/* ==========================================================
   DASHBOARD GLOBAL
   ========================================================== */

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    width:100%;
    min-height:100%;
    background:#050505;
    color:#ffffff;
    font-family:Inter, Arial, sans-serif;
    overflow-x:hidden;
}
/* ==========================================================
   DASHBOARD LAYOUT
   ========================================================== */

.dashboard-shell{
    display:grid;
    grid-template-columns:240px minmax(0,1fr);
    min-height:100vh;
    background:#050505;
}

.dashboard-main{
    min-width:0;
    background:#050505;
}

.dashboard-content{
    width:100%;
    max-width:1120px;
    padding:36px 40px;
}                                  /* /* /* ==========================================================
   DASHBOARD SIDEBAR
   ========================================================== */

.dashboard-sidebar{
    width:260px;
    min-height:100vh;
    padding:32px 24px;
    background:#050505;
    border-right:1px solid #202020;
}

.dashboard-sidebar-brand{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:58px;
}

.dashboard-logo{
    width:48px;
    height:48px;
    flex:0 0 48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#ff7a1a;
    color:#000000;
    font-size:24px;
    font-weight:900;
}

.dashboard-sidebar-brand h2{
    margin:0;
    color:#ffffff;
    font-size:22px;
    font-weight:900;
    line-height:1;
}

.dashboard-sidebar-brand span{
    display:block;
    margin-top:6px;
    color:#a3a3a3;
    font-size:14px;
}

.dashboard-nav{
    display:flex;
    flex-direction:column;
    gap:34px;
}

.dashboard-nav-group{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.dashboard-nav-title{
    color:#737373;
    font-size:11px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.dashboard-nav a{
    display:block;
    padding:8px 0;
    color:#d4d4d4;
    text-decoration:none;
    font-size:15px;
    font-weight:700;
}

.dashboard-nav a:hover{
    color:#ffffff;
}

.dashboard-nav a.active{
    color:#ff7a1a;
}                                          /* ==========================================================
   DASHBOARD HEADER
   ========================================================== */

.dashboard-header{
    height:96px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:0 36px;
    background:#080808;
    border-bottom:1px solid #202020;
}

.dashboard-kicker{
    margin:0 0 6px;
    color:#ff7a1a;
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.dashboard-header h1{
    margin:0;
    color:#ffffff;
    font-size:24px;
    font-weight:800;
}

.dashboard-header-actions{
    display:flex;
    align-items:center;
    gap:14px;
}

.dashboard-search{
    width:280px;
    height:42px;
    padding:0 14px;
    border:1px solid #2a2a2a;
    border-radius:12px;
    background:#050505;
    color:#ffffff;
    font-size:14px;
    outline:none;
}

.dashboard-search::placeholder{
    color:#777777;
}

.dashboard-search:focus{
    border-color:#ff7a1a;
}

.dashboard-workspace{
    height:42px;
    display:flex;
    align-items:center;
    padding:0 16px;
    border:1px solid #2a2a2a;
    border-radius:12px;
    background:#111111;
    color:#ffffff;
    font-size:14px;
    font-weight:700;
}                                                                                      .dashboard-user-menu {
    position: relative;
}

.dashboard-user-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #2a2f3a;
    border-radius: 999px;
    background: #111827;
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
}

.dashboard-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ff7a1a;
    color: #000000;
    font-weight: 900;
}

.dashboard-user-name {
    max-width: 160px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dashboard-user-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 180px;
    background: #111827;
    border: 1px solid #2a2f3a;
    border-radius: 14px;
    padding: 8px;
    display: none;
    z-index: 50;
    box-shadow: 0 20px 40px rgba(0,0,0,.35);
}

.dashboard-user-dropdown.show {
    display: block;
}

.dashboard-user-dropdown a,
.dashboard-user-dropdown button {
    width: 100%;
    display: block;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #ffffff;
    text-align: left;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
}

.dashboard-user-dropdown a:hover,
.dashboard-user-dropdown button:hover {
    background: #1f2937;
}                                                                      /* ==========================================================
   DASHBOARD PAGE HEADER
   ========================================================== */

.dashboard-page-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    margin-bottom:28px;
}

.dashboard-page-header h2{
    margin:0 0 8px;
    color:#ffffff;
    font-size:32px;
    font-weight:900;
}

.dashboard-page-header p{
    margin:0;
    color:#a3a3a3;
    font-size:16px;
    line-height:1.6;
}


/* ==========================================================
   DASHBOARD BUTTONS
   ========================================================== */

.dashboard-primary-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 22px;
    border-radius:14px;
    background:#ff7a1a;
    color:#000000;
    text-decoration:none;
    font-size:15px;
    font-weight:900;
    white-space:nowrap;
    transition:all .2s ease;
}

.dashboard-primary-button:hover{
    transform:translateY(-1px);
    background:#ff8a2a;
}                                                                                     /* ==========================================================
   DASHBOARD STAT CARDS
   ========================================================== */

.dashboard-stats-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:16px;
    margin-bottom:28px;
}

.dashboard-stat-card{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:110px;
    padding:20px 22px;
    border:1px solid #202020;
    border-radius:16px;
    background:#0b0b0b;
    transition:.2s;
}

.dashboard-stat-card:hover{
    border-color:#2f2f2f;
    transform:translateY(-2px);
}

.dashboard-stat-card span{
    display:block;
    color:#9f9f9f;
    font-size:13px;
    font-weight:700;
    margin:0;
}

.dashboard-stat-card strong{
    display:block;
    margin-top:18px;
    color:#ffffff;
    font-size:42px;
    font-weight:800;
    line-height:1;
}                                                              /* ==========================================================
   DASHBOARD PANELS
   ========================================================== */

.dashboard-two-column{
    display:grid;
    grid-template-columns:1.4fr .8fr;
    gap:24px;
}

.dashboard-panel{
    min-height:280px;
    padding:26px;
    border:1px solid #202020;
    border-radius:18px;
    background:#0b0b0b;
    box-shadow:0 18px 45px rgba(0,0,0,.22);
}

.dashboard-panel h3{
    margin:0 0 22px;
    color:#ffffff;
    font-size:20px;
    font-weight:800;
}


/* ==========================================================
   DASHBOARD EMPTY STATE
   ========================================================== */

.dashboard-empty-state{
    height:190px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    border:1px dashed #2b2b2b;
    border-radius:16px;
}

.dashboard-empty-state p{
    margin:0 0 8px;
    color:#ffffff;
    font-size:18px;
    font-weight:800;
}

.dashboard-empty-state span{
    max-width:340px;
    color:#8d8d8d;
    font-size:14px;
    line-height:1.6;
}                                                                                      /* ==========================================================
   DASHBOARD CHECKLIST
   ========================================================== */

.dashboard-checklist{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.dashboard-checklist div{
    display:flex;
    align-items:center;
    gap:10px;
    color:#a3a3a3;
    font-size:15px;
    font-weight:700;
}

.dashboard-checklist div.done{
    color:#ffffff;
}

.dashboard-checklist span{
    width:22px;
    color:#ff7a1a;
    font-weight:900;
}                                                                                     /* ==========================================================
   DEVELOPER CONSOLE
   ========================================================== */

.developer-console{
    max-width:920px;
}

.console-hero{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:32px;
    margin-bottom:32px;
}

.console-hero h2{
    margin:0 0 14px;
    color:#ffffff;
    font-size:34px;

    font-weight:900;
    line-height:1.08;
}

.console-hero p{
    max-width:640px;
    margin:0;
    color:#a3a3a3;
    font-size:17px;
    line-height:1.7;
}

.console-empty-panel{
    min-height:360px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:48px;
    border:1px solid #202020;
    border-radius:22px;
    background:#0b0b0b;
}

.console-empty-icon{
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:22px;
    border-radius:18px;
    background:#ff7a1a;
    color:#000000;
    font-size:28px;
    font-weight:900;
}

.console-empty-panel h3{
    margin:0 0 10px;
    color:#ffffff;
    font-size:26px;
    font-weight:900;
}

.console-empty-panel p{
    max-width:520px;
    margin:0 0 26px;
    color:#9f9f9f;
    font-size:16px;
    line-height:1.7;
}

.dashboard-secondary-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 20px;
    border:1px solid #2a2a2a;
    border-radius:14px;
    background:#111111;
    color:#ffffff;
    text-decoration:none;
    font-size:15px;
    font-weight:800;
}                                                                                      /* ==========================================================
   APPLICATIONS / DASHBOARD SHARED
   ========================================================== */

.dashboard-page{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.dashboard-page-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
}

.dashboard-page-header h1{
    margin:0 0 6px;
    font-size:24px;
    line-height:1.2;
    font-weight:700;
    color:#f9fafb;
}

.dashboard-page-header p{
    margin:0;
    font-size:14px;
    line-height:1.5;
    color:#9ca3af;
}

.dashboard-panel{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:28px;
}

.dashboard-primary-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:38px;
    padding:0 16px;
    border:0;
    border-radius:8px;
    background:#111827;
    color:#ffffff;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
}

.dashboard-primary-button:hover{
    background:#000000;
}


/* ==========================================================
   APPLICATIONS EMPTY STATE
   Used on Applications index when no applications exist.
   ========================================================== */

.dashboard-empty-state{
    min-height:280px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.dashboard-empty-icon{
    width:44px;
    height:44px;
    border-radius:12px;
    background:#f3f4f6;
    color:#6b7280;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    margin-bottom:18px;
}

.dashboard-empty-state h2{
    margin:0 0 8px;
    font-size:18px;
    line-height:1.3;
    font-weight:700;
    color:#111827;
}

.dashboard-empty-state p{
    max-width:430px;
    margin:0 0 22px;
    font-size:14px;
    line-height:1.6;
    color:#6b7280;
}


/* ==========================================================
   FORMS
   Shared form styles used inside dashboard panels.
   ========================================================== */

.dashboard-form{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.form-group label{
    font-size:14px;
    font-weight:600;
    color:#374151;
}

.form-group input,
.form-group textarea{
    width:100%;
    padding:12px 14px;
    border:1px solid #d1d5db;
    border-radius:10px;
    background:#ffffff;
    font-size:14px;
    font-family:inherit;
    color:#111827;
    outline:none;
    transition:border-color .2s, box-shadow .2s;
}

.form-group textarea{
    resize:vertical;
    min-height:120px;
}

.form-group input:focus,
.form-group textarea:focus{
    border-color:#111827;
    box-shadow:0 0 0 3px rgba(17,24,39,.08);
}

.form-help{
    margin:0;
    font-size:13px;
    line-height:1.5;
    color:#6b7280;
}


/* ==========================================================
   CREATE APPLICATION PAGE
   Used only on /dashboard/applications/new
   ========================================================== */

.create-application-panel{
    max-width:800px;
    margin:0;
    padding:28px;
}

.create-application-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:14px;
    margin-top:10px;
}

.create-application-back-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:38px;
    padding:0 16px;
    border:1px solid #d1d5db;
    border-radius:8px;
    background:#ffffff;
    color:#374151;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    line-height:1;
}

.create-application-back-button:hover{
    background:#f9fafb;
    border-color:#f97316;
    color:#f97316;
}

.create-application-submit-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:38px;
    padding:0 16px;
    border:0;
    border-radius:8px;
    background:#111827;
    color:#ffffff;
    font-size:14px;
    font-weight:600;
    line-height:1;
    cursor:pointer;
}

.create-application-submit-button:hover{
    background:#000000;
}


/* ==========================================================
   APPLICATION DETAILS PAGE
   Used on /dashboard/applications/{application_id}
   ========================================================== */

.dashboard-section{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.dashboard-page-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.dashboard-secondary-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:38px;
    padding:0 16px;
    border:1px solid #d1d5db;
    border-radius:8px;
    background:#ffffff;
    color:#374151;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
}

.dashboard-secondary-button:hover{
    background:#f9fafb;
    border-color:#f97316;
    color:#f97316;
}

.dashboard-card{
    border:1px solid #e5e7eb;
    border-radius:16px;
    background:#ffffff;
    padding:24px;
}

.dashboard-card-header{
    margin-bottom:20px;
}

.dashboard-card-header h2{
    margin:0 0 6px;
    font-size:18px;
    font-weight:700;
    color:#111827;
}

.dashboard-card-header p{
    margin:0;
    font-size:14px;
    color:#6b7280;
}

.details-list{
    display:flex;
    flex-direction:column;
    border-top:1px solid #e5e7eb;
}

.details-row{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:24px;
    padding:16px 0;
    border-bottom:1px solid #e5e7eb;
    align-items:center;
}

.details-row span{
    font-size:14px;
    color:#6b7280;
}

.details-row strong{
    font-size:14px;
    font-weight:600;
    color:#111827;
}

.details-row code{
    display:inline-flex;
    width:fit-content;
    padding:6px 10px;
    border-radius:8px;
    background:#f6f8fa;
    color:#111827;
    font-size:13px;
}

.credentials-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
}

.credential-box{
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:20px;
    background:#fafafa;
}

.credential-box h3{
    margin:0 0 8px;
    font-size:15px;
    color:#111827;
}

.credential-box p{
    margin:0 0 14px;
    font-size:14px;
    color:#6b7280;
}

.credential-box span{
    display:inline-flex;
    padding:5px 10px;
    border-radius:999px;
    background:#fff7ed;
    color:#f97316;
    font-size:12px;
    font-weight:700;
}


.credential-status{
    display:inline-flex;
    align-self:flex-start;

    padding:6px 12px;

    border-radius:999px;

    background:#fff7ed;
    color:#ea580c;

    font-size:13px;
    font-weight:700;
}

.credential-box button{
    width:max-content;
}

.credential-box button:disabled{
    opacity:.55;
    cursor:not-allowed;
}

.credential-note{
    color:var(--color-text-secondary);
    font-size:13px;
}
.danger-card{
    border-color:#fecaca;
}

.danger-zone-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    border-top:1px solid #fecaca;
    padding-top:20px;
}

.danger-zone-row h3{
    margin:0 0 6px;
    font-size:15px;
    color:#991b1b;
}

.danger-zone-row p{
    margin:0;
    font-size:14px;
    color:#6b7280;
}

.danger-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    padding:10px 16px;
    border:1px solid #dc2626;
    border-radius:10px;
    background:#ffffff;
    color:#dc2626;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
}

.danger-button:hover{
    background:#dc2626;
    color:#ffffff;
}                                                                                      /* ----------------------------------------------------------
   Status Badge
   Used for application status values.
   Example: Active
   ---------------------------------------------------------- */

.status-badge{
    display:inline-flex;
    align-items:center;
    width:fit-content;
    padding:5px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    line-height:1;
}

.status-active{
    background:#dcfce7;
    color:#166534;
    border:1px solid #86efac;
}

.status-revoked{
    background:#fee2e2;
    color:#991b1b;
    border:1px solid #fca5a5;
}
.status-pending-payment{
    background:#fffbeb;
    color:#b45309;
    border:1px solid #fbbf24;
}

/* ----------------------------------------------------------
   Details Link
   Used for external URLs in application details.
   Example: Homepage URL
   ---------------------------------------------------------- */

.details-link{
    display:inline-flex;
    align-items:center;
    width:fit-content;
    color:#111827;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
}

.details-link:hover{
    color:#f97316;
}                                                                                     /* ----------------------------------------------------------
   Danger Form
   Used for destructive POST actions.
   Example: Delete Application.
   ---------------------------------------------------------- */

.danger-zone-row form{
    margin:0;
}                                                                                      /* ==========================================================
   APPLICATIONS LIST PAGE
   Used on /dashboard/applications
   ========================================================== */

.applications-table-wrapper{
    width:100%;
    overflow-x:auto;
}

.applications-table{
    width:100%;
    border-collapse:collapse;
}

.applications-table th{
    padding:0 0 14px;
    text-align:left;
    font-size:12px;
    font-weight:700;
    color:#6b7280;
    text-transform:uppercase;
    letter-spacing:.04em;
    border-bottom:1px solid #e5e7eb;
}

.applications-table td{
    padding:18px 0;
    font-size:14px;
    color:#374151;
    border-bottom:1px solid #e5e7eb;
    vertical-align:middle;
}

.applications-table tr:last-child td{
    border-bottom:0;
}

.application-cell{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.application-cell strong{
    font-size:14px;
    font-weight:700;
    color:#111827;
}

.application-cell span{
    font-size:13px;
    color:#6b7280;
}

.applications-table code{
    display:inline-flex;
    width:fit-content;
    padding:6px 10px;
    border-radius:8px;
    background:#f6f8fa;
    color:#111827;
    font-size:13px;
}

.table-actions{
    text-align:right;
}

.table-action-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:34px;
    padding:0 12px;
    border:1px solid #d1d5db;
    border-radius:8px;
    background:#ffffff;
    color:#374151;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
}

.table-action-link:hover{
    border-color:#f97316;
    color:#f97316;
}                                                                                      /* ----------------------------------------------------------
   Details Back Link
   Small navigation link above application details title.
   Example: ← Back to Applications
   ---------------------------------------------------------- */

.details-back-link{
    display:inline-flex;
    margin-bottom:10px;
    color:#9ca3af;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
}

.details-back-link:hover{
    color:#f97316;
}


/* ==========================================================
   COPY FIELD
   Client ID + Copy Button
   ========================================================== */

.copy-field{
    display:flex;
    align-items:center;
    gap:10px;
}

.copy-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:32px;
    padding:0 12px;

    border:1px solid #d1d5db;
    border-radius:8px;

    background:#ffffff;

    color:#374151;
    font-size:13px;
    font-weight:600;

    cursor:pointer;
}

.copy-button:hover{
    border-color:#f97316;
    color:#f97316;
}                                                                                    /* ==========================================================
   API KEYS PAGE
   Used on /dashboard/api-keys
   ========================================================== */

.environment-badge{
    display:inline-flex;
    align-items:center;
    width:fit-content;

    padding:5px 10px;

    border-radius:999px;

    background:#eff6ff;
    color:#1d4ed8;

    font-size:12px;
    font-weight:700;
    line-height:1;
}                                                                                    .form-group select{
    width:100%;
    padding:12px 14px;
    border:1px solid #d1d5db;
    border-radius:10px;
    background:#ffffff;
    font-size:14px;
    font-family:inherit;
    color:#111827;
    outline:none;
}

.form-group select:focus{
    border-color:#111827;
    box-shadow:0 0 0 3px rgba(17,24,39,.08);
}                                                                                     .dashboard-success-card{
    margin:32px 0;
    padding:32px 36px;
    border:1px solid rgba(249,115,22,.55);
    border-radius:18px;
    background:linear-gradient(
        135deg,
        rgba(249,115,22,.22),
        rgba(249,115,22,.08)
    );
    box-shadow:0 18px 50px rgba(249,115,22,.12);
}

.dashboard-success-header{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:22px;

}

.dashboard-success-icon{
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-weight:800;
    color:#ffffff;
    background:#f97316;
    flex-shrink:0;
}

.dashboard-success-header h2{

    margin:0;

    font-size:28px;

}

.dashboard-success-header p{

    margin-top:8px;

    color:var(--color-text-secondary);

    line-height:1.6;

}

.dashboard-api-key-value{
    margin:24px 0;
    padding:18px 22px;
    border-radius:12px;
    background:#ffffff;
    border:1px solid rgba(249,115,22,.35);
    overflow-x:auto;
}

.dashboard-api-key-value code{
    font-family:"JetBrains Mono","Fira Code",monospace;
    font-size:15px;
    color:#111827;
    white-space:nowrap;
}

.dashboard-api-key-value::-webkit-scrollbar{

    height:8px;

}

.dashboard-api-key-value::-webkit-scrollbar-thumb{

    background:#374151;

    border-radius:20px;

}                                                                                    .application-link{

    color:var(--color-text);

    font-weight:700;

    text-decoration:none;

}

.application-link:hover{

    color:#f97316;

}                                                                                     .details-section{
    padding:0 0 28px 0;
    margin:0 0 28px 0;
    border-bottom:1px solid var(--color-border);
}

.details-section:last-child{
    padding-bottom:0;
    margin-bottom:0;
    border-bottom:none;
}

.details-section h2{
    margin:0 0 18px 0;
    font-size:22px;
    color:#111827;
}

.details-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
}

.detail-item{
    padding:18px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#ffffff;
}

.detail-item span{
    display:block;
    margin-bottom:8px;
    font-size:12px;
    font-weight:700;
    color:#6b7280;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.detail-item strong{
    color:#111827;
    font-size:15px;
}

.detail-item code{
    color:#111827;
    font-size:14px;
}

.details-muted{
    max-width:720px;
    color:#4b5563;
    line-height:1.7;
    margin:0 0 18px 0;
}

.details-prefix-box{
    max-width:720px;
    margin-top:18px;
}                                                                                    .details-code-block{
    margin-top:18px;
    padding:20px 24px;
    border-radius:14px;
    background:#111827;
    border:1px solid #1f2937;
    overflow-x:auto;
}

.details-code-block code{
    font-family:"JetBrains Mono","Fira Code",monospace;
    font-size:14px;
    line-height:1.7;
    color:#ffffff;
    white-space:pre;
}

.details-code-block pre{
    margin:0;
}                                                                                    .dashboard-card .dashboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 28px;
    color: #111827;
}

.dashboard-card .dashboard-table th {
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-align: left;
    padding: 14px 0;
    border-bottom: 1px solid #e5e7eb;
}

.dashboard-card .dashboard-table td {
    color: #111827;
    font-size: 14px;
    padding: 18px 0;
    border-bottom: 1px solid #e5e7eb;
}

.dashboard-card .dashboard-table tr:last-child td {
    border-bottom: none;
}                                                                                    /* =========================================================
   BUSINESS SIGNAL CAPACITY PAGE
   Page: /dashboard/business-signal-capacity
   Template: dashboard/business_signal_capacity.html
   ========================================================= */

.capacity-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 24px;
}

.capacity-card h2 {
    color: #0f172a;
    font-size: 24px;
    margin: 0 0 10px;
}

.capacity-card p {
    color: #64748b;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

.capacity-pipeline-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 24px;
}

.capacity-pipeline-grid div {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px 16px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
}

.capacity-note-box {
    margin-top: 24px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 16px;
    padding: 16px 18px;
    color: #9a3412;
    font-size: 14px;
    line-height: 1.6;
}

.capacity-options-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 26px;
}

.capacity-option-card {
    display: flex;
    flex-direction: column;
    min-height: 155px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    color: #0f172a;
    text-decoration: none;
    box-sizing: border-box;
    transition: 0.2s;
}

.capacity-option-card:hover {
    border-color: #f97316;
    transform: translateY(-2px);
}

.capacity-option-card h3 {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 800;
}

.capacity-option-card span {
    display: block;
    margin-bottom: 20px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
}

.capacity-button {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 38px;
    border-radius: 10px;
    background: #0f172a;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
}

.capacity-option-custom {
    background: #fff7ed;
    border-color: #f97316;
}                                                                                    .billing-pricing-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
    margin-top:28px;
}

.billing-price-card{
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:22px;
    background:#ffffff;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:18px;
    min-height:260px;
}

.billing-price-card:hover{
    border-color:#fb923c;
    box-shadow:0 12px 30px rgba(15, 23, 42, 0.08);
}

.billing-card-label{
    display:block;
    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#64748b;
    margin-bottom:10px;
}

.billing-price-card h3{
    margin:0;
    font-size:24px;
    line-height:1.2;
    color:#020617;
}

.billing-sandbox{
    margin:12px 0 0;
    color:#475569;
    font-size:15px;
    line-height:1.45;
}

.billing-price{
    font-size:24px;
    font-weight:900;
    color:#020617;
}

.billing-card-note{
    margin:0;
    color:#475569;
    font-size:14px;
    line-height:1.45;
}

.billing-tax-note{
    margin-top:24px;
}                                                                                    .usage-shell {
    display: grid;
    gap: 28px;
}

.usage-overview-card,
.usage-metric-card,
.usage-api-card,
.usage-empty-card {
    background: #ffffff;
    color: #050505;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    padding: 32px;
}

.usage-overview-card {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: flex-start;
}

.usage-overview-card h2,
.usage-metric-card h3,
.usage-api-card h3 {
    margin: 8px 0 10px;
    color: #050505;
}

.usage-overview-card p,
.usage-api-card p {
    margin: 0;
    color: #64748b;
    font-size: 16px;
}

.usage-label,
.usage-overview-meta span,
.usage-stats-row span,
.usage-api-grid span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.usage-overview-meta {
    display: grid;
    gap: 22px;
    min-width: 320px;
}

.usage-overview-meta strong {
    display: block;
    margin-top: 8px;
    font-size: 22px;
    color: #050505;
}

.usage-status-pill {
    width: fit-content;
    padding: 7px 13px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534 !important;
    font-size: 14px !important;
}

.usage-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.usage-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.usage-env-pill {
    padding: 8px 13px;
    border-radius: 999px;
    background: #fff3e8;
    color: #f97316;
    font-weight: 800;
    font-size: 12px;
}

.usage-env-pill.muted {
    background: #f1f5f9;
    color: #334155;
}

.usage-main-number {
    margin-top: 34px;
    font-size: 42px;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #050505;
}

.usage-main-number span {
    font-size: 18px;
    color: #64748b;
    font-weight: 700;
}

.usage-progress {
    margin: 22px 0;
    height: 12px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.usage-progress-fill {
    height: 100%;
    background: #f97316;
    border-radius: 999px;
}

.usage-progress-fill.sandbox {
    background: #111827;
}

.usage-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding-top: 8px;
}

.usage-stats-row strong {
    display: block;
    margin-top: 8px;
    font-size: 24px;
    color: #050505;
}

.usage-api-card {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: flex-start;
}

.usage-api-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 32px;
}

.usage-api-grid strong {
    display: block;
    margin-top: 8px;
    font-size: 20px;
    color: #050505;
}

.usage-empty-card a {
    display: inline-flex;
    margin-top: 18px;
    background: #f97316;
    color: #050505;
    padding: 12px 18px;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
}                                                                                    .dashboard-back-link{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-bottom:18px;

    color:#94a3b8;
    text-decoration:none;
    font-size:14px;
    font-weight:600;

    transition:.2s;
}

.dashboard-back-link:hover{
    color:#f97316;
}

.dashboard-back-link span:first-child{
    font-size:18px;
    line-height:1;
}                                                                                    .organization-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
    max-width: 1100px;
}

.organization-card,
.organization-summary-card {
    background: #ffffff;
    color: #050505;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    padding: 32px;
}

.organization-card-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 28px;
}

.organization-card-header.small {
    margin-bottom: 22px;
}

.organization-label,
.organization-summary-list span,
.organization-field label {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.organization-card h2,
.organization-summary-card h2 {
    margin: 8px 0 0;
    color: #050505;
}

.organization-status-pill {
    padding: 7px 13px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 13px;
    font-weight: 800;
}

.organization-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.organization-field.full {
    grid-column: 1 / -1;
}

.organization-field input {
    width: 100%;
    margin-top: 8px;
    padding: 13px 14px;
    border: 1px solid #dbe3ee;
    border-radius: 12px;
    background: #ffffff;
    color: #050505;
    font-size: 15px;
}

.organization-field input[readonly] {
    background: #f8fafc;
    color: #64748b;
}

.organization-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 32px 0;
}

.organization-actions {
    margin-top: 28px;
}

.organization-actions button {
    border: 0;
    border-radius: 12px;
    padding: 12px 18px;
    background: #f97316;
    color: #050505;
    font-weight: 800;
    cursor: pointer;
}

.organization-summary-list {
    display: grid;
    gap: 24px;
    margin-top: 28px;
}

.organization-summary-list strong {
    display: block;
    margin-top: 8px;
    font-size: 26px;
    color: #050505;
}                                                                                     .settings-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 0;
    border-bottom: 1px solid #e5e7eb;
}

.settings-row:last-child {
    border-bottom: none;
}

.settings-row h3 {
    margin: 0 0 6px;
    font-size: 18px;
    color: #0f172a;
}

.settings-row p {
    margin: 0;
    color: #64748b;
    font-size: 15px;
}

.role-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 20px;
}

.role-card {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 22px;
    background: #f8fafc;
}

.role-card h3 {
    margin: 0 0 8px;
    color: #0f172a;
}

.role-card p {
    margin: 0;
    color: #64748b;
}                                                                                    .secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #111827;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}                                                                                    .documentation-section {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.documentation-section h2 {
    margin: 0;
    font-size: 26px;
    color: #0f172a;
}

.documentation-section h3 {
    margin: 16px 0 0;
    font-size: 17px;
    color: #0f172a;
}

.documentation-section p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}

.code-block {
    padding: 18px 20px;
    border-radius: 14px;
    background: #0f172a;
    overflow-x: auto;
}

.code-block pre {
    margin: 0;
}

.code-block code {
    font-family: Consolas, Monaco, monospace;
    font-size: 14px;
    line-height: 1.6;
    color: #f8fafc;
    white-space: pre-wrap;
}

.documentation-list {
    margin: 0;
    padding-left: 20px;
    color: #475569;
    line-height: 1.9;
}

.endpoint-badge {
    width: fit-content;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff7ed;
    color: #ea580c;
    font-size: 13px;
    font-weight: 700;
}                                                                                    /* ==========================================================
   PROFILE
========================================================== */

.profile-settings-card{
    padding:0;
    overflow:hidden;
}

.profile-top{
    display:flex;
    align-items:center;
    gap:28px;
    padding:36px 40px;
    border-bottom:1px solid #e5e7eb;
}

.profile-avatar-large{
    width:88px;
    height:88px;
    border-radius:50%;
    background:#ff7a1a;
    color:#000;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    font-weight:800;
    flex-shrink:0;
}

.profile-top-info{
    flex:1;
}

.profile-top-info h2{
    margin:0;
    color:#0f172a;
    font-size:30px;
    font-weight:800;
}

.profile-top-info p{
    margin:8px 0 0;
    color:#64748b;
    font-size:16px;
}

.profile-top-badges{
    display:flex;
    gap:10px;
}

.profile-role-badge,
.profile-status-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:34px;
    padding:0 16px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
}

.profile-role-badge{
    background:#fff4e8;
    color:#ff7a1a;
}

.profile-status-badge{
    background:#ecfdf5;
    color:#047857;
}

.profile-section{
    display:grid;
    grid-template-columns:240px 1fr;
    gap:42px;
    padding:36px 40px;
    border-bottom:1px solid #e5e7eb;
}

.profile-section:last-child{
    border-bottom:none;
}

.profile-section-copy h3{
    margin:0;
    color:#0f172a;
    font-size:22px;
}

.profile-section-copy p{
    margin:10px 0 0;
    color:#64748b;
    line-height:1.6;
}

.profile-form{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.profile-field{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.profile-field label{
    color:#334155;
    font-size:14px;
    font-weight:700;
}

.profile-field input{
    width:100%;
    height:50px;
    padding:0 16px;
    border:1px solid #d6dbe4;
    border-radius:10px;
    background:#fff;
    color:#0f172a;
    font-size:15px;
    font-weight:600;
    box-sizing:border-box;
}

.profile-field input:focus{
    outline:none;
    border-color:#ff7a1a;
    box-shadow:0 0 0 3px rgba(255,122,26,.12);
}

.profile-field input:disabled{
    background:#f8fafc;
    color:#64748b;
}

.profile-field small{
    color:#64748b;
    font-size:13px;
    line-height:1.5;
}

.profile-actions{
    margin-top:6px;
}

.profile-actions .dashboard-button{
    min-width:170px;
}

.profile-section-muted{
    align-items:center;
}

.profile-coming-soon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:40px;
    padding:0 20px;
    border-radius:999px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    color:#64748b;
    font-weight:700;
}

.dashboard-alert{
    margin-bottom:24px;
    padding:14px 18px;
    border-radius:10px;
    font-weight:700;
}

.dashboard-alert.success{
    background:#ecfdf5;
    color:#047857;
    border:1px solid #a7f3d0;
}

.dashboard-alert.error{
    background:#fef2f2;
    color:#b91c1c;
    border:1px solid #fecaca;
}

@media (max-width:960px){

    .profile-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .profile-top-badges{
        margin-top:10px;
    }

    .profile-section{
        grid-template-columns:1fr;
        gap:24px;
    }

}

    .dashboard-alert {
        margin-bottom: 24px;
        padding: 14px 18px;
        border-radius: 12px;
        font-weight: 700;
    }

    .dashboard-alert.success {
        background: #ecfdf5;
        color: #047857;
        border: 1px solid #a7f3d0;
    }

    .dashboard-alert.error {
        background: #fef2f2;
        color: #b91c1c;
        border: 1px solid #fecaca;
    }


.dashboard-alert {
    margin-bottom: 24px;
    padding: 14px 18px;
    border-radius: 12px;
    font-weight: 700;
}

.dashboard-alert.success {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.dashboard-alert.error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.partner-console {
    padding: 42px 46px;
}

.partner-console-hero {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    padding: 34px;
    border: 1px solid var(--color-border);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255,122,0,.12), rgba(255,255,255,.025));
}

.partner-console-eyebrow {
    margin: 0 0 10px;
    color: #ff7a00;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.partner-console-hero h1 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 34px;
}

.partner-console-hero p {
    margin: 0;
    max-width: 760px;
    color: #fff;
    font-size: 17px;
    line-height: 1.6;
}

.partner-console-action {
    align-self: flex-start;
    padding: 14px 22px;
    border-radius: 14px;
    background: #ff7a00;
    color: #000;
    font-weight: 800;
    text-decoration: none;
}

.partner-console-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 26px;
}

.partner-console-card {
    display: block;
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: #0b0b0b;
    text-decoration: none;
    transition: .2s ease;
}

.partner-console-card:hover {
    border-color: #ff7a00;
    transform: translateY(-2px);
}

.partner-console-card span {
    display: block;
    margin-bottom: 14px;
    color:#9ca3af;
    font-size: 14px;
    font-weight: 700;
}

.partner-console-card strong {
    display: block;
    margin-bottom: 10px;
    color: #fff;
    font-size: 28px;
}

.partner-console-card p {
    margin: 0;
    color:#cbd5e1;
    font-size: 15px;
    line-height: 1.5;
}

.partner-console-next {
    margin-top: 28px;
    padding: 30px;
    border: 1px solid var(--color-border);
    border-radius: 24px;
    background: #0b0b0b;
}

.partner-console-next h2 {
    margin: 0 0 20px;
    color: #fff;
    font-size: 24px;
}

.partner-console-steps {
    display: grid;
    gap: 14px;
}

.partner-console-step {
    display: flex;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
    text-decoration: none;
    transition: .2s ease;
}

.partner-console-step:hover {
    border-color: #ff7a00;
}

.partner-console-step span {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ff7a00;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.partner-console-step strong {
    display: block;
    margin-bottom: 6px;
    color: #fff;
}

.partner-console-step p {
    margin: 0;
    color: #fff;
    line-height: 1.5;
}                                                                                     .dashboard-back-link{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-bottom:24px;

    color:#9ca3af;
    text-decoration:none;
    font-weight:600;

    transition:.2s;
}

.dashboard-back-link:hover{
    color:#ff7a00;
}                                                                                    .password-field-wrapper {
    position: relative;
}

.password-field-wrapper input {
    width: 100%;
    padding-right: 74px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);

    border: none;
    background: transparent;
    color: #ff7417;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.password-toggle:hover {
    text-decoration: underline;
}

.password-toggle:focus-visible {
    outline: 2px solid #ff7417;
    outline-offset: 2px;
    border-radius: 4px;
}                                                                                    .assigned-contact-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px;
    margin-top: 20px;
    border: 1px solid #dbe3ee;
    border-radius: 14px;
    background: #f8fafc;
}

.assigned-contact-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #ff7417;
    color: #08111f;
    font-size: 22px;
    font-weight: 800;
}

.assigned-contact-details {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}

.assigned-contact-details strong {
    font-size: 18px;
    color: #101828;
}

.assigned-contact-details span {
    color: #667085;
    font-size: 14px;
}

.assigned-contact-details a {
    color: #344054;
    font-size: 14px;
    text-decoration: none;
}

.assigned-contact-details a:hover {
    text-decoration: underline;
}

.assigned-contact-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px;
    margin-top: 20px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
}

.assigned-contact-empty span {
    color: #667085;
}

.technical-contact-selector {
    margin-top: 20px;
}

.technical-contact-selector select {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    background: #ffffff;
    font: inherit;
}                                                                                         .integration-required-message {
    margin-top: 16px;
    padding: 18px 20px;
    border: 1px solid #d6dbe4;
    border-radius: 10px;
    background: #f7f8fa;
    color: #111827;
}

.integration-required-message strong {
    display: block;
    margin-bottom: 10px;
    color: #111827;
    font-size: 16px;
    line-height: 1.4;
}

.integration-required-message p {
    margin: 0 0 10px;
    color: #4b5563;
    line-height: 1.6;
}

.integration-required-message p:last-of-type {
    margin-bottom: 16px;
}

.integration-required-message .dashboard-primary-button {
    display: inline-flex;
    margin-top: 4px;
}                                                                                        /* ==========================================================
   DELIVERED INTELLIGENCE
   API Key Details → Delivered Intelligence
   ========================================================== */

.delivered-intelligence-section{
    padding-top:22px;
}

.delivered-intelligence-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    margin-bottom:26px;
}

.delivered-intelligence-header > div{
    min-width:0;
    max-width:820px;
}

.delivered-intelligence-header h2{
    margin:0 0 6px;
}

.delivered-intelligence-header .details-muted{
    margin:0;
}

.delivered-intelligence-edit-button{
    flex:0 0 auto;
    white-space:nowrap;
}

/* ----------------------------------------------------------
   GRID
   ---------------------------------------------------------- */

.delivered-intelligence-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:start;
    gap:18px;
    margin-top:0;
}

.intelligence-group{
    --intelligence-accent:#2563eb;
    --intelligence-soft:#eff6ff;
    --intelligence-border:#bfdbfe;
    --intelligence-field-background:#eff6ff;

    display:flex;
    flex-direction:column;
    min-width:0;
}

/* ----------------------------------------------------------
   CATEGORY ACCENTS
   ---------------------------------------------------------- */

.intelligence-group-signal{
    --intelligence-accent:#2563eb;
    --intelligence-soft:#eff6ff;
    --intelligence-border:#bfdbfe;
    --intelligence-field-background:#eaf2ff;
}

.intelligence-group-business{
    --intelligence-accent:#7c3aed;
    --intelligence-soft:#f5f3ff;
    --intelligence-border:#ddd6fe;
    --intelligence-field-background:#f3e8ff;
}

.intelligence-group-decision{
    --intelligence-accent:#ea580c;
    --intelligence-soft:#fff7ed;
    --intelligence-border:#fed7aa;
    --intelligence-field-background:#ffedd5;
}

.intelligence-group-action{
    --intelligence-accent:#15803d;
    --intelligence-soft:#f0fdf4;
    --intelligence-border:#bbf7d0;
    --intelligence-field-background:#dcfce7;
}

/* ----------------------------------------------------------
   GROUP HEADER
   ---------------------------------------------------------- */

.intelligence-group-header{
    display:flex;
    align-items:flex-start;
    gap:10px;
    height:92px;
    padding:0 4px 12px;
    box-sizing:border-box;
    border-bottom:2px solid var(--intelligence-accent);
}

.intelligence-group-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:28px;
    height:28px;
    color:var(--intelligence-accent);
    font-size:25px;
    font-weight:800;
    line-height:1;
}

.intelligence-group-title{
    margin:0;
    padding:0;
    border:0;
    color:var(--intelligence-accent);
    font-size:15px;
    font-weight:750;
    line-height:1.3;
}

.intelligence-group-title::before{
    display:none;
}

.intelligence-group-subtitle{
    margin:4px 0 0;
    color:#64748b;
    font-size:12px;
    line-height:1.4;
}

/* ----------------------------------------------------------
   CAPABILITY CARDS
   ---------------------------------------------------------- */

.intelligence-group-cards{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding-top:8px;
}

.intelligence-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:188px;
    padding:14px;
    overflow:hidden;
    border:1px solid #e2e8f0;
    border-radius:10px;
    background:#ffffff;
    box-shadow:0 1px 3px rgba(15,23,42,.04);
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.intelligence-card:hover{
    border-color:var(--intelligence-border);
    box-shadow:0 8px 20px rgba(15,23,42,.08);
    transform:translateY(-1px);
}

.intelligence-card.selected{
    border-color:var(--intelligence-border);
    background:#ffffff;
    box-shadow:0 1px 4px rgba(15,23,42,.06);
}

.intelligence-card.selected::after{
    display:none;
}

.intelligence-card-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}

.intelligence-card-heading{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}

.intelligence-selection-indicator{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:19px;
    height:19px;
    border:1px solid #cbd5e1;
    border-radius:50%;
    background:#ffffff;
    color:#94a3b8;
    font-size:11px;
    font-weight:800;
    line-height:1;
}

.intelligence-card.selected .intelligence-selection-indicator{
    border-color:var(--intelligence-accent);
    background:var(--intelligence-accent);
    color:#ffffff;
}

.intelligence-title{
    margin:0;
    color:#334155;
    font-size:13px;
    font-weight:750;
    line-height:1.35;
}

.intelligence-card.selected .intelligence-title{
    color:var(--intelligence-accent);
}

.intelligence-status-badge{
    flex:0 0 auto;
    padding:4px 7px;
    border-radius:6px;
    font-size:10px;
    font-weight:700;
    line-height:1.2;
    white-space:nowrap;
}

.intelligence-status-badge.included{
    background:#dcfce7;
    color:#15803d;
}

.intelligence-status-badge.not-included{
    background:#f1f5f9;
    color:#64748b;
}

.intelligence-description{
    margin:10px 0 0 27px;
    color:#475569;
    font-size:12px;
    line-height:1.45;
}

/* ----------------------------------------------------------
   RESPONSE FIELDS
   ---------------------------------------------------------- */

.intelligence-response-fields{
    margin-top:auto;
    padding-top:14px;
    border-top:0;
}

.intelligence-response-label{
    display:block;
    margin-bottom:7px;
    color:#64748b;
    font-size:9px;
    font-weight:800;
    letter-spacing:.08em;
    line-height:1.2;
    text-transform:uppercase;
}

.intelligence-response-field-list{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}

.intelligence-response-field{
    display:inline-flex;
    align-items:center;
    max-width:100%;
    padding:4px 7px;
    border-radius:5px;
    background:var(--intelligence-field-background);
    color:var(--intelligence-accent);
    font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    font-size:9px;
    font-weight:650;
    line-height:1.25;
    overflow-wrap:anywhere;
    white-space:normal;
}

.intelligence-card.selected .intelligence-response-fields code{
    background:var(--intelligence-field-background);
}

/* ----------------------------------------------------------
   ALWAYS INCLUDED
   ---------------------------------------------------------- */

.always-included-box{
    margin-top:24px;
    padding:16px 18px;
    border:1px solid #bfdbfe;
    border-left:1px solid #bfdbfe;
    border-radius:10px;
    background:linear-gradient(
        135deg,
        #eff6ff 0%,
        #ffffff 100%
    );
}

.always-included-header{
    display:flex;
    align-items:flex-start;
    gap:12px;
}

.always-included-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:30px;
    height:30px;
    border:2px solid #2563eb;
    border-radius:9px;
    color:#2563eb;
    font-size:14px;
    font-weight:800;
}

.always-included-box h3{
    margin:0 0 3px;
    color:#1d4ed8;
    font-size:13px;
    font-weight:750;
}

.always-included-box .details-muted{
    margin:0;
    color:#2563eb;
    font-size:11px;
    line-height:1.45;
}

.always-included-list{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px;
    margin:14px 0 0;
    padding:0;
    list-style:none;
}

.always-included-list li{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-width:0;
    margin:0;
    color:#334155;
    font-size:10px;
    font-weight:550;
    line-height:1.35;
    text-align:center;
}

.always-included-list li span{
    flex:0 0 auto;
    color:#2563eb;
    font-size:13px;
}

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width:1280px){
    .delivered-intelligence-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .always-included-list{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media (max-width:760px){
    .delivered-intelligence-header{
        flex-direction:column;
        align-items:stretch;
    }

    .delivered-intelligence-edit-button{
        width:100%;
    }

    .delivered-intelligence-grid{
        grid-template-columns:1fr;
    }

    .intelligence-group-header{
        min-height:auto;
    }

    .always-included-list{
        grid-template-columns:1fr;
    }

    .always-included-list li{
        justify-content:flex-start;
        text-align:left;
    }
}                                                                                         /* ----------------------------------------------------------
   API KEY DETAILS — READ-ONLY CONTRACT
   ---------------------------------------------------------- */

.api-key-contract-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    padding:7px 11px;
    border:1px solid #cbd5e1;
    border-radius:999px;
    background:#f8fafc;
    color:#475569;
    font-size:11px;
    font-weight:750;
    white-space:nowrap;
}

.intelligence-card.not-selected{
    background:#f8fafc;
    border-color:#e2e8f0;
    box-shadow:none;
    opacity:.72;
}

.intelligence-card.not-selected:hover{
    border-color:#e2e8f0;
    box-shadow:none;
    transform:none;
}

.intelligence-card.not-selected
.intelligence-selection-indicator{
    background:#f1f5f9;
    border-color:#cbd5e1;
    color:#94a3b8;
}

.intelligence-card.not-selected
.intelligence-title{
    color:#64748b;
}

.intelligence-card.not-selected
.intelligence-description{
    color:#94a3b8;
}

.intelligence-card.not-selected
.intelligence-response-field{
    background:#f1f5f9;
    color:#94a3b8;
}                                                                                        /* ==========================================================
   API KEY CREATED
   One-time credential confirmation
   ========================================================== */

.api-key-created-panel{
    max-width:980px;
}

.api-key-created-alert{
    padding:28px;
    border:1px solid #bfdbfe;
    border-radius:16px;
    background:linear-gradient(
        135deg,
        #eff6ff 0%,
        #ffffff 100%
    );
}

.api-key-created-heading{
    display:flex;
    align-items:flex-start;
    gap:14px;
}

.api-key-created-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:38px;
    height:38px;
    border-radius:10px;
    background:#2563eb;
    color:#ffffff;
    font-size:18px;
    font-weight:800;
}

.api-key-created-heading h2{
    margin:0 0 6px;
    color:#0f172a;
}

.api-key-created-heading p{
    margin:0;
    max-width:720px;
    color:#475569;
    line-height:1.6;
}

.api-key-created-alert
.dashboard-api-key-value{
    margin-top:22px;
}

.api-key-created-actions{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:18px;
}

.api-key-created-actions form{
    margin:0;
}

@media (max-width:760px){
    .api-key-created-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .api-key-created-actions button{
        width:100%;
    }
}                                                                                       .documentation-navigation a {
    color: #0f172a !important;
}

.documentation-table th {
    color: #0f172a !important;
}

.documentation-table td {
    color: #334155 !important;
}

.documentation-table td code {
    color: #1e3a8a !important;
}                                                                                       /* ==========================================================
   BSOS INTELLIGENCE COMPONENT
   ========================================================== */

.bsos-intelligence-preview {
    padding: 28px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background:
        radial-gradient(
            circle at top right,
            rgba(255, 122, 26, 0.12),
            transparent 34%
        ),
        #f8fafc;
}

.bsos-intelligence {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    color: #0f172a;
    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.08),
        0 2px 8px rgba(15, 23, 42, 0.04);
}

.bsos-intelligence::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: #ff7a1a;
}

.bsos-intelligence__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid #e2e8f0;
}

.bsos-intelligence__brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.bsos-intelligence__mark {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #ff7a1a;
    color: #111111;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.06em;
}

.bsos-intelligence__brand strong,
.bsos-intelligence__brand span {
    display: block;
}

.bsos-intelligence__brand strong {
    color: #0f172a;
    font-size: 16px;
    line-height: 1.35;
}

.bsos-intelligence__brand div > span {
    margin-top: 3px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.4;
}

.bsos-intelligence__status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 12px;
    font-weight: 800;
}

.bsos-intelligence__status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.bsos-intelligence__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
}

.bsos-intelligence__summary {
    padding: 20px;
    border: 1px solid #fed7aa;
    border-radius: 14px;
    background: #fff7ed;
}

.bsos-intelligence__summary > span {
    display: block;
    margin-bottom: 6px;
    color: #c2410c;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bsos-intelligence__summary strong {
    display: block;
    color: #9a3412;
    font-size: 20px;
    line-height: 1.35;
}

.bsos-intelligence__summary p {
    margin: 8px 0 0;
    color: #7c2d12;
    line-height: 1.6;
}

.bsos-intelligence__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.bsos-intelligence__grid > div {
    min-width: 0;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.bsos-intelligence__grid dt {
    margin: 0 0 7px;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bsos-intelligence__grid dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
}

.bsos-intelligence__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

/* Processing state */

.bsos-intelligence[data-bsos-state="processing"]::before {
    background: #ff7a1a;
}

.bsos-intelligence[data-bsos-state="processing"]
.bsos-intelligence__status {
    background: #fff7ed;
    color: #c2410c;
}

.bsos-intelligence[data-bsos-state="processing"]
.bsos-intelligence__status::before {
    animation: bsos-status-pulse 1.4s ease-in-out infinite;
}

/* Successful result */

.bsos-intelligence[data-bsos-state="success"]::before {
    background: #10b981;
}

/* Partial result */

.bsos-intelligence[data-bsos-state="partial"]::before {
    background: #f59e0b;
}

.bsos-intelligence[data-bsos-state="partial"]
.bsos-intelligence__status {
    background: #fffbeb;
    color: #b45309;
}

/* Error state */

.bsos-intelligence[data-bsos-state="error"]::before {
    background: #ef4444;
}

.bsos-intelligence[data-bsos-state="error"]
.bsos-intelligence__status {
    background: #fef2f2;
    color: #b91c1c;
}

.bsos-intelligence[data-bsos-state="error"]
.bsos-intelligence__summary {
    border-color: #fecaca;
    background: #fef2f2;
}

.bsos-intelligence[data-bsos-state="error"]
.bsos-intelligence__summary > span,
.bsos-intelligence[data-bsos-state="error"]
.bsos-intelligence__summary strong,
.bsos-intelligence[data-bsos-state="error"]
.bsos-intelligence__summary p {
    color: #991b1b;
}

@keyframes bsos-status-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.45;
        transform: scale(1.35);
    }
}

@media (max-width: 720px) {
    .bsos-intelligence-preview {
        padding: 14px;
    }

    .bsos-intelligence__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .bsos-intelligence__grid {
        grid-template-columns: 1fr;
    }

    .bsos-intelligence__footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bsos-intelligence__status::before {
        animation: none !important;
    }
}