/* ==========================================================================
   playbook-ui.css — the Playbook workspace interface.

   Extracted verbatim from the Amazon Account Management build by
   tools/extract_playbook_ui.py. This is the interface that already
   existed in that Playbook; nothing here was redesigned. Every Playbook
   in the master renders in it, driven by its own data.

   Everything is scoped under .pbx so it cannot collide with the
   platform's own design system, and the token block is emitted on .pbx
   rather than :root for the same reason.

   Do not hand-edit — re-run the extractor.
   ========================================================================== */
.pbx{--orange:        #ff6b35;
    --orange-dark:   #e85a25;
    --orange-light:  #ffe4d9;
    --orange-20:     rgba(255,107,53,0.2);
    --orange-30:     rgba(255,107,53,0.3);
    --navy:          #1e3a5f;
    --navy-dark:     #152b45;
    --navy-800:      #112338;
    --navy-900:      #0c1a2b;

    
    --indigo:        #6366f1;
    --indigo-dark:   #4f46e5;
    --electric:      #0ea5e9;
    --emerald:       #10b981;
    --violet:        #8b5cf6;
    --pink:          #ec4899;
    --amber:         #f59e0b;

    --sidebar-bg:    #0b1729;
    --sidebar-hover: rgba(255,255,255,0.06);
    --sidebar-active:#ff6b35;
    --sidebar-glass: linear-gradient(180deg, #0d1b30 0%, #07101f 100%);

    
    --bg:           #f7f8fc;
    --bg-2:         #eef1f7;
    --surface:      #ffffff;
    --surface-2:    #fbfcfe;
    --surface-glass: rgba(255,255,255,0.72);
    --border:       #e5e7eb;
    --border-light: #f1f5f9;
    --border-glass: rgba(15,23,42,0.06);

    
    --text:        #0f172a;
    --text-2:      #374151;
    --text-muted:  #6b7280;
    --text-light:  #6b7280;

    
    --success: #16a34a; --success-bg: #dcfce7;
    --warning: #d97706; --warning-bg: #fef3c7;
    --danger:  #dc2626; --danger-bg:  #fee2e2;
    --info:    #0284c7; --info-bg:    #e0f2fe;

    
    --grad-brand:   linear-gradient(135deg, #ff6b35 0%, #ffb347 100%);
    --grad-navy:    linear-gradient(135deg, #1e3a5f 0%, #0c1a2b 100%);
    --grad-aurora:  linear-gradient(135deg, #ff6b35 0%, #ec4899 50%, #6366f1 100%);
    --grad-mesh:    radial-gradient(at 20% 10%, rgba(255,107,53,0.18) 0%, transparent 50%),
                    radial-gradient(at 80% 20%, rgba(99,102,241,0.18) 0%, transparent 55%),
                    radial-gradient(at 60% 90%, rgba(16,185,129,0.13) 0%, transparent 50%);

    
    --font-head: 'Outfit', sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;

    
    --r-sm:  8px;
    --r:     12px;
    --r-lg:  18px;
    --r-xl:  24px;
    --r-2xl: 28px;
    --r-3xl: 36px;
    --r-pill: 999px;

    
    --sh-xs: 0 1px 2px 0 rgba(15,23,42,0.04);
    --sh-sm: 0 1px 3px 0 rgba(15,23,42,0.06), 0 1px 2px -1px rgba(15,23,42,0.06);
    --sh:    0 4px 12px -2px rgba(15,23,42,0.08), 0 2px 4px -2px rgba(15,23,42,0.05);
    --sh-lg: 0 12px 28px -6px rgba(15,23,42,0.12), 0 6px 10px -6px rgba(15,23,42,0.08);
    --sh-xl: 0 24px 48px -12px rgba(15,23,42,0.18), 0 8px 16px -8px rgba(15,23,42,0.1);
    --sh-glow-orange: 0 0 0 1px rgba(255,107,53,0.18), 0 18px 40px -10px rgba(255,107,53,0.35);
    --sh-glow-navy:   0 0 0 1px rgba(30,58,95,0.15),  0 18px 40px -10px rgba(30,58,95,0.25);
    --sh-ring:  inset 0 0 0 1px rgba(15,23,42,0.06);

    
    --ease: cubic-bezier(0.4,0,0.2,1);
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --pbt: 0.15s;
    --pbt-md: 0.25s;
    --pbt-lg: 0.4s;

    --sidebar-w: 272px;
    --header-h:  60px;

    
    --accent:       var(--orange);
    --accent-light: var(--orange-light, #ffe6db);
    --primary:      var(--navy);
    --text-dark:    var(--text);}
[data-theme="dark"] .pbx{--bg:           #0a0f1c;
    --bg-2:         #0d1424;
    --surface:      #111a2c;
    --surface-2:    #0e1626;
    --surface-glass: rgba(17,26,44,0.72);
    --border:       #1f2a44;
    --border-light: #18223a;
    --border-glass: rgba(255,255,255,0.06);

    --text:        #f1f5f9;
    --text-2:      #cbd5e1;
    --text-muted:  #94a3b8;
    --text-light:  #64748b;

    --navy:        #e2e8f0;
    --navy-dark:   #cbd5e1;

    --orange-light:#2a1810;
    --success-bg:  #052e1a;
    --warning-bg:  #2a1a06;
    --danger-bg:   #2a0a0a;
    --info-bg:     #06243a;

    --sh-sm: 0 1px 3px 0 rgba(0,0,0,0.4), 0 1px 2px -1px rgba(0,0,0,0.4);
    --sh:    0 4px 12px -2px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.4);
    --sh-lg: 0 12px 28px -6px rgba(0,0,0,0.55), 0 6px 10px -6px rgba(0,0,0,0.45);
    --sh-xl: 0 24px 48px -12px rgba(0,0,0,0.7);
    --sh-ring: inset 0 0 0 1px rgba(255,255,255,0.05);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pbx{--bg:           #0a0f1c;
    --bg-2:         #0d1424;
    --surface:      #111a2c;
    --surface-2:    #0e1626;
    --surface-glass: rgba(17,26,44,0.72);
    --border:       #1f2a44;
    --border-light: #18223a;
    --border-glass: rgba(255,255,255,0.06);

    --text:        #f1f5f9;
    --text-2:      #cbd5e1;
    --text-muted:  #94a3b8;
    --text-light:  #64748b;

    --navy:        #e2e8f0;
    --navy-dark:   #cbd5e1;

    --orange-light:#2a1810;
    --success-bg:  #052e1a;
    --warning-bg:  #2a1a06;
    --danger-bg:   #2a0a0a;
    --info-bg:     #06243a;

    --sh-sm: 0 1px 3px 0 rgba(0,0,0,0.4), 0 1px 2px -1px rgba(0,0,0,0.4);
    --sh:    0 4px 12px -2px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.4);
    --sh-lg: 0 12px 28px -6px rgba(0,0,0,0.55), 0 6px 10px -6px rgba(0,0,0,0.45);
    --sh-xl: 0 24px 48px -12px rgba(0,0,0,0.7);
    --sh-ring: inset 0 0 0 1px rgba(255,255,255,0.05);}}
.pbx{font-family:var(--font-body);color:var(--text);background:var(--bg);overflow:hidden;display:flex;height:100vh;height:100dvh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:'cv11','ss01';font-size:0.9375rem;line-height:1.625;transition:background var(--pbt-md) var(--ease-out),color var(--pbt-md) var(--ease-out)}
.pbx .app-container{display:flex;width:100%;height:100%}
.pbx .sidebar{width:var(--sidebar-w);background:var(--sidebar-glass);
    display:flex;flex-direction:column;flex-shrink:0;
    transition:width var(--pbt-md) var(--ease-out);overflow:hidden;
    border-right:1px solid rgba(255,255,255,0.05);z-index:20;
    position:relative;}
.pbx .sidebar::before{content:'';position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(at 20% 0%, rgba(255,107,53,0.10) 0%, transparent 45%),
      radial-gradient(at 80% 100%, rgba(99,102,241,0.10) 0%, transparent 45%);}
.pbx .sidebar > *{position:relative;z-index:1}
.pbx .sidebar.collapsed{width:0}
/* Height comes from the same token as .top-header, so the rail header and the
   topbar stay one band across the top of the page even if that token moves.
   The collapse control is taken out of the flex row below: while it shared the
   row, centring centred the PAIR and the lockup sat left of true centre. */
.pbx .sidebar-header{height:var(--header-h); padding:0 14px; box-sizing:border-box;
    display:flex;align-items:center;position:relative;
    justify-content:center;border-bottom:1px solid rgba(255,255,255,0.06);
    flex-shrink:0;}
.pbx .sidebar-logo-img{height:34px;width:auto;max-width:72%;object-fit:contain;
    object-position:center;margin:0 auto;display:block}
.pbx .sidebar-collapse-btn{position:absolute;right:10px;top:50%;
    transform:translateY(-50%);
    background:none;border:none;color:rgba(255,255,255,0.4);padding:6px;
    border-radius:var(--r-sm);transition:all var(--pbt);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;}
.pbx .sidebar-collapse-btn:hover{background:var(--sidebar-hover);color:#fff}
.pbx .sidebar-progress{padding:14px 18px 16px;border-bottom:1px solid rgba(255,255,255,0.05);flex-shrink:0}
.pbx .progress-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.pbx .progress-label span{font-size:10.5px;font-weight:700;color:rgba(255,255,255,0.75);text-transform:uppercase;letter-spacing:0.1em;font-family:var(--font-head)}
.pbx .progress-pct{color:var(--orange)!important;font-variant-numeric:tabular-nums;font-size:11.5px!important}
.pbx .progress-track{height:6px;background:rgba(255,255,255,0.07);border-radius:99px;overflow:hidden;position:relative}
.pbx .progress-fill{height:100%;background:linear-gradient(90deg,var(--orange) 0%,#ffb347 60%,#ec4899 100%);width:0%;transition:width 0.9s var(--ease-out);border-radius:99px;box-shadow:0 0 12px rgba(255,107,53,0.5)}
.pbx .sidebar-search{margin:12px 14px;padding:9px 12px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:var(--r-sm);
    display:flex;align-items:center;gap:9px;flex-shrink:0;
    transition:all var(--pbt) var(--ease-out);}
.pbx .sidebar-search:focus-within{background:rgba(255,255,255,0.07);border-color:rgba(255,107,53,0.35);box-shadow:0 0 0 3px rgba(255,107,53,0.12)}
.pbx .sidebar-search input{flex:1;background:none;border:none;outline:none;
    font-size:13px;color:rgba(255,255,255,0.85);}
.pbx .sidebar-search input::placeholder{color:rgba(255,255,255,0.6)}
.pbx .search-kbd{font-family:var(--font-mono);font-size:10px;color:rgba(255,255,255,0.45);
    background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);
    border-radius:5px;padding:2px 7px;flex-shrink:0;font-weight:600;
    display:inline-flex;align-items:center;justify-content:center;
    line-height:1;height:18px;white-space:nowrap;letter-spacing:.02em;}
.pbx .sidebar-nav{flex:1;overflow-y:auto;padding:8px 0 4px}
.pbx .sidebar-nav::-webkit-scrollbar{width:3px}
.pbx .sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:4px}
.pbx .nav-home-btn{display:flex;align-items:center;gap:11px;width:calc(100% - 16px);
    margin:0 8px 6px;padding:10px 12px;background:none;border:none;
    border-radius:var(--r-sm);
    color:rgba(255,255,255,0.65);font-size:13px;font-weight:600;
    transition:all var(--pbt) var(--ease-out);text-align:left;font-family:var(--font-body);}
.pbx .nav-home-btn:hover{background:rgba(255,255,255,0.06);color:#fff}
.pbx .nav-home-btn.active{color:#fff;
    background:linear-gradient(135deg,rgba(255,107,53,0.22) 0%,rgba(255,107,53,0.08) 100%);
    box-shadow:inset 0 0 0 1px rgba(255,107,53,0.25);}
.pbx .nav-home-btn.active svg{color:var(--orange);opacity:1}
.pbx .nav-home-btn svg{flex-shrink:0;opacity:0.75;transition:all var(--pbt)}
/* The standard module gap, matching what the bridge applies to the eight
   builds. At 1px the rows ran together into one continuous band. */
.pbx .nav-group{margin:0 8px 6px;border-radius:var(--r-sm);transition:background var(--pbt)}
.pbx .nav-group-header{display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:9px 12px;background:none;border:none;border-radius:var(--r-sm);
    cursor:pointer;transition:background var(--pbt) var(--ease-out);}
.pbx .nav-group-header:hover{background:rgba(255,255,255,0.05)}
.pbx .nav-group-left{display:flex;align-items:center;gap:10px}
.pbx .nav-group-icon{font-size:13px;line-height:1;width:24px;height:24px;text-align:center;
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:7px;background:rgba(255,255,255,0.05);
    transition:all var(--pbt) var(--ease-out);}
.pbx .nav-group.open .nav-group-icon{transform:scale(1.05)}
.pbx #group-p1 .nav-group-icon{background:rgba(20,184,166,0.16)}
.pbx #group-p2 .nav-group-icon{background:rgba(255,107,53,0.16)}
.pbx #group-p3 .nav-group-icon{background:rgba(99,102,241,0.16)}
.pbx #group-p4 .nav-group-icon{background:rgba(14,165,233,0.16)}
.pbx #group-p5 .nav-group-icon{background:rgba(16,185,129,0.16)}
.pbx #group-p6 .nav-group-icon{background:rgba(245,158,11,0.16)}
.pbx #group-p7 .nav-group-icon{background:rgba(139,92,246,0.16)}
.pbx #group-p8 .nav-group-icon{background:rgba(236,72,153,0.16)}
.pbx #group-p9 .nav-group-icon{background:rgba(239,68,68,0.16)}
.pbx .nav-group-title{font-size:11.5px;font-weight:700;color:rgba(255,255,255,0.7);text-transform:uppercase;letter-spacing:0.08em;font-family:var(--font-head)}
.pbx .nav-group-right{display:flex;align-items:center;gap:8px}
.pbx .nav-group-count{font-size:10px;font-weight:700;color:rgba(255,255,255,0.72);font-variant-numeric:tabular-nums;background:rgba(255,255,255,0.07);padding:2px 7px;border-radius:99px;transition:all var(--pbt)}
.pbx .nav-group-count.complete{color:#fff;background:linear-gradient(135deg,var(--orange) 0%,#ffb347 100%);box-shadow:0 2px 8px rgba(255,107,53,0.35)}
.pbx .nav-chevron{color:rgba(255,255,255,0.35);transition:transform var(--pbt-md) var(--ease-out);flex-shrink:0}
.pbx .nav-group.open .nav-chevron{transform:rotate(0deg)}
.pbx .nav-group:not(.open) .nav-chevron{transform:rotate(-90deg)}
.pbx .nav-list{list-style:none;padding:0;overflow:hidden;max-height:0;transition:max-height 0.4s var(--ease-out)}
.pbx .nav-list.open{max-height:700px;padding-bottom:4px}
.pbx .nav-list li{position:relative;
    display:flex;align-items:center;gap:9px;
    padding:6px 10px;margin:1px 5px;border-radius:var(--r-sm);
    color:rgba(255,255,255,0.6);
    cursor:pointer;transition:background var(--pbt) var(--ease-out),color var(--pbt) var(--ease-out);
    min-height:33px;white-space:nowrap;overflow:hidden;}
.pbx .nav-num{flex-shrink:0;font-family:var(--font-head);font-size:10.5px;font-weight:800;
    color:rgba(255,255,255,0.55);background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.09);
    padding:2px 0;width:32px;text-align:center;border-radius:7px;
    font-variant-numeric:tabular-nums;letter-spacing:0.02em;
    transition:all var(--pbt) var(--ease-out);}
/* The row's colour lives on the <li>, but its <a> had no colour of its own, so
   the site's generic link rule won over inheritance: #14427f on a navy rail.
   The number was legible only because .nav-num sets its own colour, which is
   why the numbers read and the titles did not. The anchor also spanned 146px
   of a 242px row, leaving most of the row unclickable. */
.pbx .nav-list li a{
    color:inherit;text-decoration:none;
    display:flex;align-items:center;gap:9px;flex:1;min-width:0;}
.pbx .nav-list li a:hover,.pbx .nav-list li a:focus-visible{color:inherit;}
.pbx .nav-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:12.5px;line-height:1.25;}
.pbx .nav-tick{flex-shrink:0;width:13px;height:13px;color:#22c55e;opacity:0;transform:scale(.6);transition:all var(--pbt) var(--ease-out)}
.pbx .nav-list li.done .nav-tick{opacity:1;transform:none}
.pbx .nav-list li.done .nav-num{color:#34d399;background:rgba(34,197,94,0.12);border-color:rgba(34,197,94,0.28)}
.pbx .nav-list li.done .nav-title{color:rgba(255,255,255,0.78)}
.pbx .nav-list li:hover{color:rgba(255,255,255,0.96);background:rgba(255,255,255,0.05)}
.pbx .nav-list li:hover .nav-num{color:#fff;background:rgba(255,107,53,0.2);border-color:rgba(255,107,53,0.35)}
.pbx .nav-list li.active{color:#fff;background:linear-gradient(90deg,rgba(255,107,53,0.2) 0%,rgba(255,107,53,0.04) 100%);
    box-shadow:inset 0 0 0 1px rgba(255,107,53,0.28);}
.pbx .nav-list li.active .nav-num{color:#fff;background:var(--orange);border-color:transparent;box-shadow:0 2px 8px -1px rgba(255,107,53,0.6)}
.pbx .nav-list li.active .nav-title{font-weight:600}
.pbx .nav-list li.locked .nav-tick{display:none}
body.nav-fly .pbx .nav-list{position:fixed; z-index:120; width:304px;
    max-height:none; padding:8px 4px 10px;
    overflow:hidden auto;
    background:var(--sidebar-glass);
    border:1px solid rgba(255,255,255,0.10);
    border-left:3px solid var(--pc,var(--orange));
    border-radius:0 14px 14px 0;
    box-shadow:26px 0 60px -22px rgba(0,0,0,0.75),0 10px 30px -14px rgba(0,0,0,0.6);
    opacity:0; visibility:hidden; pointer-events:none; transform:translateX(-6px);
    transition:opacity .13s var(--ease-out),transform .13s var(--ease-out),visibility .13s;}
body.nav-fly .pbx .nav-list.open{opacity:1; visibility:visible; pointer-events:auto; transform:none;
    padding-bottom:10px;}
body.nav-fly .pbx .nav-list::before{content:attr(data-pillar);
    display:block; margin:2px 4px 7px; padding:9px 11px;
    border-radius:8px; border-left:2px solid var(--pc,var(--orange));
    background:linear-gradient(90deg,
        color-mix(in srgb, var(--pc,var(--orange)) 20%, transparent) 0%,
        rgba(255,255,255,0.03) 62%, transparent 100%);
    font-family:var(--font-head); font-size:11.5px; font-weight:700;
    letter-spacing:0.08em; text-transform:uppercase;
    color:rgba(255,255,255,0.92);}
body.nav-fly .pbx .nav-list li{padding:7px 10px; margin:1px 3px; min-height:35px; white-space:normal;}
body.nav-fly .pbx .nav-list li .nav-title{white-space:normal; overflow:visible; text-overflow:clip;
    font-size:12.6px; line-height:1.3;}
body.nav-fly .pbx .nav-group.open > .nav-group-header{background:rgba(255,255,255,0.09);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--pc,var(--orange)) 32%, transparent);}
body.nav-fly .pbx .nav-group.open .nav-chevron{transform:rotate(-90deg);opacity:0.55}
body.nav-fly .pbx .nav-list::-webkit-scrollbar{width:3px}
body.nav-fly .pbx .nav-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.14);border-radius:4px}
@media (prefers-reduced-motion:reduce){body.nav-fly .pbx .nav-list{transition:none}}
.pbx .sidebar-footer{padding:10px 12px 14px;border-top:1px solid rgba(255,255,255,0.05);
    display:flex;flex-direction:column;gap:3px;flex-shrink:0;
    background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.18) 100%);}
.pbx .sidebar-footer-btn{display:flex;align-items:center;gap:10px;width:100%;
    padding:9px 12px;background:none;border:none;border-radius:var(--r-sm);
    color:rgba(255,255,255,0.55);font-size:12.5px;font-weight:600;
    transition:all var(--pbt) var(--ease-out);text-align:left;font-family:var(--font-body);}
.pbx .sidebar-footer-btn:hover{background:rgba(255,255,255,0.06);color:#fff;transform:translateX(2px)}
.pbx .sidebar-footer-btn svg{flex-shrink:0;opacity:0.7}
.pbx .main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);min-width:0;position:relative}
.pbx .main-content::before{content:'';position:absolute;inset:0;pointer-events:none;
    background:var(--grad-mesh);opacity:0.5;}
[data-theme="dark"] .pbx .main-content::before{opacity:0.35}
.pbx .top-header{height:var(--header-h);
    background:var(--surface-glass);
    backdrop-filter:saturate(1.4) blur(14px);
    -webkit-backdrop-filter:saturate(1.4) blur(14px);
    padding:0 22px;display:flex;justify-content:space-between;align-items:center;
    border-bottom:1px solid var(--border-glass);
    flex-shrink:0;z-index:10;gap:12px;position:relative;}
.pbx .header-left{display:flex;align-items:center;gap:12px;min-width:0}
.pbx .header-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.pbx .sidebar-toggle-btn{background:none;border:none;color:var(--text-muted);padding:8px;
    border-radius:var(--r-sm);transition:all var(--pbt) var(--ease-out);display:flex;
    align-items:center;flex-shrink:0;}
.pbx .sidebar-toggle-btn:hover{background:var(--bg-2);color:var(--navy);transform:scale(1.05)}
.pbx .breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted);min-width:0;overflow:hidden}
.pbx .bc-home{cursor:pointer;color:var(--text-muted);transition:color var(--pbt);white-space:nowrap}
.pbx .bc-home:hover{color:var(--orange)}
.pbx .bc-sep{color:var(--border);font-size:15px}
.pbx .bc-current{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbx .header-action-btn{background:none;border:none;color:var(--text-muted);padding:8px;
    border-radius:var(--r-sm);transition:all var(--pbt) var(--ease-out);
    display:flex;align-items:center;position:relative;}
.pbx .header-action-btn:hover{background:var(--orange-light);color:var(--orange);transform:translateY(-1px)}
.pbx .theme-toggle-btn{background:none;border:none;color:var(--text-muted);padding:8px;
    border-radius:var(--r-sm);transition:all var(--pbt) var(--ease-out);
    display:flex;align-items:center;cursor:pointer;position:relative;}
.pbx .theme-toggle-btn:hover{background:var(--bg-2);color:var(--orange);transform:rotate(15deg)}
[data-theme="dark"] .pbx .theme-toggle-btn .icon-moon{display:none}
.pbx .theme-toggle-btn .icon-sun{display:none}
[data-theme="dark"] .pbx .theme-toggle-btn .icon-sun{display:block}
.pbx .header-kbar{display:flex;align-items:center;gap:8px;
    background:var(--bg-2);border:1px solid var(--border);
    border-radius:99px;padding:5px 8px 5px 12px;
    color:var(--text-muted);font-size:12px;font-weight:500;
    cursor:pointer;transition:all var(--pbt) var(--ease-out);
    min-width:200px;}
.pbx .header-kbar:hover{border-color:rgba(255,107,53,0.35);background:var(--surface);color:var(--text-2)}
.pbx .header-kbar svg{flex-shrink:0;opacity:0.6}
.pbx .header-kbar .kbd{font-family:var(--font-mono);font-size:10.5px;
    background:var(--surface);border:1px solid var(--border);
    border-radius:5px;padding:2px 7px;color:var(--text-muted);font-weight:700;
    margin-left:auto;
    display:inline-flex;align-items:center;justify-content:center;
    line-height:1;height:18px;white-space:nowrap;letter-spacing:.02em;}
@media(max-width:900px){.pbx .header-kbar{display:none}}
.pbx .user-badge{display:flex;align-items:center;gap:8px;
    background:var(--surface);border:1.5px solid var(--border);
    border-radius:99px;padding:4px 12px 4px 4px;
    font-size:12.5px;font-weight:600;color:var(--navy);
    cursor:pointer;transition:all var(--pbt) var(--ease-out);
    box-shadow:var(--sh-xs);}
.pbx .user-badge:hover{border-color:var(--orange);background:var(--orange-light);transform:translateY(-1px);box-shadow:var(--sh-sm)}
/* The initials are white, so the circle needs the darker ends of both
   ramps: the brand orange carries white at 2.84:1. */
.pbx .user-avatar{width:28px;height:28px;border-radius:50%;
    background:linear-gradient(135deg,var(--orange-btn,#c25200) 0%,#be185d 100%);
    display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:800;color:#fff;flex-shrink:0;text-transform:uppercase;
    box-shadow:0 2px 8px rgba(255,107,53,0.4);}
.pbx .user-avatar img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.pbx .user-menu-wrap{position:relative}
.pbx .user-menu{display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:1300;
    min-width:170px;background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r);box-shadow:var(--sh-lg);padding:6px;overflow:hidden;}
.pbx .user-menu.open{display:block;animation:scaleIn 0.18s var(--ease-out)}
.pbx .user-menu button{display:flex;align-items:center;gap:9px;width:100%;
    background:none;border:none;text-align:left;cursor:pointer;
    padding:9px 12px;border-radius:var(--r-sm);
    font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--text-2);
    transition:background var(--pbt) var(--ease-out),color var(--pbt) var(--ease-out);}
.pbx .user-menu button:hover{background:var(--bg-2);color:var(--navy)}
.pbx .user-menu button.um-signout:hover{background:var(--danger-bg);color:var(--danger)}
[data-theme="dark"] .pbx .user-menu button{color:var(--text)}
.pbx .content-scrollable{flex:1;overflow-y:auto;padding:32px 36px 48px;scroll-behavior:smooth;position:relative;z-index:1}
.pbx .content-scrollable::-webkit-scrollbar{width:8px}
.pbx .content-scrollable::-webkit-scrollbar-track{background:transparent}
.pbx .content-scrollable::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;border:2px solid var(--bg)}
.pbx .content-scrollable::-webkit-scrollbar-thumb:hover{background:#94a3b8}
[data-theme="dark"] .pbx .content-scrollable::-webkit-scrollbar-thumb{background:#334155;border-color:var(--bg)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}
@keyframes shineSlow{from{background-position:-200% 0}to{background-position:200% 0}}
.pbx .dashboard-section{display:none}
.pbx .dashboard-section.active{display:block;animation:fadeUp 0.4s var(--ease)}
@keyframes orbFloat{0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -25px) scale(1.08); }}
@keyframes orbFloatB{0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-25px, 20px) scale(0.95); }}
@keyframes shimmerSweep{0% { transform: translateX(-100%) skewX(-15deg); }
    100% { transform: translateX(220%) skewX(-15deg); }}
.pbx .hero-banner{background:
      radial-gradient(at 90% 20%, rgba(255,107,53,0.4) 0%, transparent 45%),
      radial-gradient(at 10% 90%, rgba(99,102,241,0.32) 0%, transparent 50%),
      linear-gradient(135deg,#1e3a5f 0%,#152b45 45%,#0c1a2b 100%);
    border-radius:var(--r-2xl);color:#fff;margin-bottom:0;
    box-shadow:var(--sh-xl);position:relative;overflow:hidden;
    border:1px solid rgba(255,255,255,0.06);}
.pbx .hero-banner::before{content:'';position:absolute;top:-140px;right:-100px;
    width:520px;height:520px;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,rgba(255,107,53,0.28) 0%,transparent 65%);
    animation:orbFloat 14s ease-in-out infinite;
    filter:blur(8px);}
.pbx .hero-banner::after{content:'';position:absolute;bottom:-120px;left:25%;
    width:380px;height:380px;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,rgba(236,72,153,0.22) 0%,transparent 65%);
    animation:orbFloatB 18s ease-in-out infinite;
    filter:blur(6px);}
.pbx .hero-banner > .hero-inner::before{content:'';position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size:22px 22px;
    mask-image:radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, transparent 75%);
    opacity:0.6;}
.pbx .hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:44px;
    align-items:center;padding:48px 48px;position:relative;z-index:1;}
.pbx .hero-content{max-width:620px;position:relative;z-index:2}
.pbx .hero-media{position:relative; z-index:2; display:flex; flex-direction:column; gap:10px;}
.pbx .hero-player{width:100%; border-radius:18px; overflow:hidden; box-shadow:0 26px 60px -26px rgba(0,0,0,.6);}
.pbx .hero-player .vplayer{border-radius:18px;}
.pbx .hero-player .hero-film{display:block; width:100%; aspect-ratio:16/9; border-radius:18px;
    background:#080C16; object-fit:cover;}
.pbx .hero-player-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; color:rgba(255,255,255,.72); font-weight:600;}
.pbx .hero-player-meta .ov-eyebrow{background:rgba(255,138,77,.16); border:1px solid rgba(255,138,77,.35); border-radius:999px; padding:3px 10px;}
.pbx .hero-eyebrow{display:inline-flex;align-items:center;gap:8px;
    background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);
    backdrop-filter:blur(10px);
    border-radius:99px;padding:6px 14px 6px 8px;
    font-size:11.5px;font-weight:700;color:rgba(255,255,255,0.92);
    font-family:var(--font-head);letter-spacing:0.04em;
    text-transform:uppercase;margin-bottom:22px;}
.pbx .hero-eyebrow svg{flex-shrink:0;fill:var(--orange);filter:drop-shadow(0 0 6px rgba(255,107,53,0.7))}
.pbx .hero-banner h1{color:#fff;border:none;padding:0;
    font-size:3rem;font-weight:900;margin-bottom:16px;
    letter-spacing:-0.045em;line-height:1.05;}
.pbx .hero-accent{background:linear-gradient(95deg,var(--orange) 0%,#ffb347 50%,#ec4899 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    display:inline-block;}
.pbx .hero-banner p{color:rgba(255,255,255,0.78);font-size:1.0625rem;line-height:1.65;
    margin-bottom:22px;font-weight:400;max-width:520px;}
.pbx .hero-features{display:flex;flex-direction:column;gap:8px;margin-bottom:30px;}
.pbx .hero-feat{display:inline-flex;align-items:center;gap:9px;
    font-size:13.5px;color:rgba(255,255,255,0.85);font-weight:500;}
.pbx .hero-feat svg{color:var(--orange);flex-shrink:0;
    background:rgba(255,107,53,0.15);
    border-radius:50%;padding:3px;width:20px;height:20px;}
.pbx .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.pbx .hero-btn-primary{display:inline-flex;align-items:center;gap:9px;
    padding:13px 28px;
    /* The brand orange carries white at 2.84:1. --orange-btn is the
       darker shade this system already picked for white-on-orange; the
       glow below keeps the button reading as the brand colour. */
    background:linear-gradient(135deg,var(--orange-btn,#c25200) 0%,
                               var(--orange-btn-2,#aa4600) 100%);
    color:#fff;border:none;
    border-radius:var(--r);font-family:var(--font-head);font-weight:700;font-size:14.5px;
    letter-spacing:-0.01em;box-shadow:0 8px 24px rgba(255,107,53,0.45), inset 0 1px 0 rgba(255,255,255,0.2);
    transition:all var(--pbt-md) var(--ease-out);cursor:pointer;
    position:relative;overflow:hidden;}
.pbx .hero-btn-primary::before{content:'';position:absolute;top:0;left:0;bottom:0;width:35%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.35),transparent);
    transform:translateX(-100%) skewX(-15deg);
    transition:transform 0.6s var(--ease-out);}
.pbx .hero-btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 32px rgba(255,107,53,0.55), inset 0 1px 0 rgba(255,255,255,0.25)}
.pbx .hero-btn-primary:hover::before{transform:translateX(280%) skewX(-15deg)}
.pbx .hero-btn-ghost{display:inline-flex;align-items:center;gap:9px;
    padding:13px 26px;background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.92);
    border:1.5px solid rgba(255,255,255,0.22);border-radius:var(--r);
    font-family:var(--font-head);font-weight:600;font-size:14.5px;letter-spacing:-0.01em;
    transition:all var(--pbt-md) var(--ease-out);cursor:pointer;backdrop-filter:blur(10px);}
.pbx .hero-btn-ghost:hover{background:rgba(255,255,255,0.16);border-color:rgba(255,255,255,0.42);transform:translateY(-2px)}
.pbx .hero-visual{display:grid;grid-template-columns:1fr 1fr;gap:14px;
    position:relative;z-index:2;}
.pbx .hv-card{border-radius:var(--r-xl);padding:22px 20px;
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,0.12);
    position:relative;overflow:hidden;
    transition:all var(--pbt-md) var(--ease-out);
    cursor:default;}
.pbx .hv-card::before{content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(135deg,rgba(255,255,255,0.08) 0%,transparent 50%);}
.pbx .hv-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,0.22);box-shadow:0 14px 30px rgba(0,0,0,0.25)}
.pbx .hv-card:hover .hv-icon{opacity:0.55;transform:scale(1.1) rotate(-6deg)}
@media (max-width:880px){.pbx .hero-inner{grid-template-columns:1fr;padding:40px 28px;gap:28px}.pbx .hero-banner h1{font-size:2.2rem}.pbx .hero-visual{grid-template-columns:1fr 1fr}}
.pbx .trust-bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
    gap:0;background:var(--surface-glass);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border:1px solid var(--border-glass);
    border-radius:var(--r-pill);padding:12px 28px;margin:18px 0 0;
    box-shadow:var(--sh-sm), var(--sh-ring);}
.pbx .dash-section-header{display:flex;align-items:flex-end;justify-content:space-between;
    margin:36px 0 18px;}
.pbx .dash-sh-left{display:flex;flex-direction:column;gap:4px}
.pbx .dash-sh-eyebrow{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:0.12em;
    color:var(--orange);font-family:var(--font-head);
    display:inline-flex;align-items:center;gap:8px;}
.pbx .dash-sh-eyebrow::before{content:'';width:18px;height:2px;border-radius:2px;
    background:linear-gradient(90deg,var(--orange),transparent);}
.pbx .dash-sh-title{font-size:1.5rem;font-weight:800;color:var(--navy);
    border:none!important;padding:0!important;margin:0!important;
    letter-spacing:-0.03em;line-height:1.2;}
.pbx .dash-sh-meta{font-size:12px;font-weight:600;color:var(--text-muted);
    font-family:var(--font-head);letter-spacing:0.02em;padding-bottom:4px;}
.pbx .qa-card{background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r-xl);padding:18px 20px;
    display:flex;align-items:center;gap:14px;
    cursor:pointer;transition:all var(--pbt-md) var(--ease-out);
    box-shadow:var(--sh-sm), var(--sh-ring);
    text-align:left;position:relative;overflow:hidden;}
.pbx .qa-card::before{content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,var(--qa-tint,transparent) 0%,transparent 50%);
    opacity:0;transition:opacity var(--pbt-md) var(--ease-out);pointer-events:none;}
.pbx .qa-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:transparent}
.pbx .qa-card:hover::before{opacity:0.6}
.pbx .qa-card > *{position:relative;z-index:1}
.pbx .qa-card:hover .qa-icon{transform:scale(1.08) rotate(-4deg)}
.pbx .qa-card:hover .qa-arr{transform:translateX(5px)}
.pbx .qa-brand{--qa-tint:rgba(236,72,153,0.12)}
.pbx .qa-brand:hover .qa-icon{background:rgba(236,72,153,0.15);color:#ec4899}
.pbx .qa-brand:hover .qa-arr{color:#ec4899}
.pbx .module-section{display:none;animation:fadeUp 0.45s var(--ease-out);
    max-width:1140px;margin:0 auto 48px;
    background:var(--surface);border-radius:var(--r-2xl);
    box-shadow:var(--sh-lg);border:1px solid var(--border);overflow:hidden;
    position:relative;}
.pbx .module-section::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;
    background:linear-gradient(90deg,var(--orange),#ec4899,#6366f1);
    background-size:200% 100%;
    animation:shineSlow 8s linear 4;
    z-index:2;}
.pbx .module-header{padding:32px 36px 24px;
    background:linear-gradient(135deg,#fff 0%,#fafbfd 100%);
    border-bottom:1px solid var(--border-light);
    position:relative;}
.pbx .module-header-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.pbx .module-logo-block{flex-shrink:0}
.pbx .module-logo-img{height:36px;width:auto;object-fit:contain;border-radius:6px;opacity:0.75}
.pbx .module-header h2{margin-bottom:12px;font-size:1.625rem;font-weight:800;letter-spacing:-0.025em;border:none;padding:0}
.pbx .module-meta{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.pbx .badge{padding:5px 12px;border-radius:99px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;font-family:var(--font-head);display:inline-flex;align-items:center;gap:6px;box-shadow:var(--sh-ring)}
.pbx .badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:0.6}
.pbx .badge-diff{background:#f3f4f6;color:var(--navy)}
.pbx .badge-time{background:var(--orange-light);color:var(--orange-dark)}
.pbx .badge-beginner{background:#dcfce7;color:#166534}
.pbx .badge-intermediate{background:#dbeafe;color:#1e40af}
.pbx .badge-advanced{background:#fef3c7;color:#92400e}
.pbx .badge-expert{background:#fee2e2;color:#991b1b}
.pbx .module-body{padding:36px}
.pbx .overview-content{margin-bottom:28px;font-size:0.9375rem;color:var(--text-2);
    background:linear-gradient(135deg,var(--bg) 0%,rgba(255,107,53,0.04) 100%);
    padding:20px 24px;border-radius:var(--r-lg);
    border-left:4px solid var(--orange);line-height:1.75;
    box-shadow:var(--sh-ring);}
.pbx .callout{padding:16px 20px;border-radius:var(--r-lg);margin-bottom:20px;display:flex;gap:14px;border:1px solid;align-items:flex-start;box-shadow:var(--sh-ring);transition:transform var(--pbt) var(--ease-out)}
.pbx .callout:hover{transform:translateX(2px)}
.pbx .callout.pro-tip{background:linear-gradient(135deg,var(--orange-light) 0%,#fff 100%);border-color:rgba(255,107,53,0.22);border-left:4px solid var(--orange)}
.pbx .callout.pro-tip::before{content:'💡';font-size:20px;flex-shrink:0}
.pbx .callout.warning{background:linear-gradient(135deg,var(--warning-bg) 0%,#fff 100%);border-color:rgba(217,119,6,0.22);border-left:4px solid var(--warning)}
.pbx .callout.warning::before{content:'⚠️';font-size:18px;flex-shrink:0}
.pbx .callout.success{background:linear-gradient(135deg,var(--success-bg) 0%,#fff 100%);border-color:rgba(22,163,74,0.22);border-left:4px solid var(--success)}
.pbx .callout.success::before{content:'✅';font-size:18px;flex-shrink:0}
.pbx .callout.info{background:linear-gradient(135deg,var(--info-bg) 0%,#fff 100%);border-color:rgba(2,132,199,0.22);border-left:4px solid var(--info)}
.pbx .callout.info::before{content:'ℹ️';font-size:18px;flex-shrink:0}
.pbx .data-table{width:100%;border-collapse:collapse;margin-bottom:22px;font-size:13.5px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--border)}
.pbx .data-table th{background:var(--navy);color:#fff;font-weight:700;font-family:var(--font-head);padding:11px 14px;text-align:left;font-size:11.5px;letter-spacing:0.04em;text-transform:uppercase}
.pbx .data-table td{padding:9px 14px;border-bottom:1px solid var(--border-light);color:var(--text)}
.pbx .data-table tbody tr:nth-child(even){background:#fafafa}
.pbx .data-table tbody tr:hover{background:var(--orange-light)}
.pbx .btn{display:inline-flex;align-items:center;gap:6px;
    padding:0.625rem 1.25rem;font-family:var(--font-head);font-weight:600;
    font-size:0.875rem;border-radius:var(--r-sm);cursor:pointer;border:none;
    transition:all var(--pbt) var(--ease);white-space:nowrap;justify-content:center;
    letter-spacing:-0.01em;}
.pbx .btn-primary, .pbx .btn-accent{background:var(--orange);color:#fff;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1)}
.pbx .btn-primary:hover, .pbx .btn-accent:hover{background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 10px 15px -3px rgba(255,107,53,0.35)}
.pbx .btn-secondary{background:var(--navy);color:#fff;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1)}
.pbx .btn-secondary:hover{background:var(--navy-dark);transform:translateY(-2px);box-shadow:var(--sh-lg)}
.pbx .btn-success{background:var(--success);color:#fff}
.pbx .btn-success:hover{background:#15803d;transform:scale(1.04)}
.pbx .btn-outline{background:transparent;border:2px solid var(--orange);color:var(--orange)}
.pbx .btn-outline:hover{background:var(--orange);color:#fff}
.pbx .btn-block{width:100%}
.pbx .btn-sm{padding:0.45rem 1rem;font-size:0.8125rem}
.pbx .pill{display:inline-flex;align-items:center;padding:6px 14px;
    background:#f9fafb;color:var(--navy);border-radius:99px;font-size:12px;
    font-weight:600;text-decoration:none;margin:0 6px 6px 0;
    transition:all var(--pbt);border:1px solid var(--border);cursor:pointer;}
.pbx .pill:hover{background:var(--orange);color:#fff;border-color:var(--orange);transform:translateY(-1px);box-shadow:var(--sh)}
.pbx .score-bar-wrap{height:7px;background:var(--border);border-radius:99px;overflow:hidden;margin-top:10px}
.pbx .score-bar{height:100%;border-radius:99px;transition:width 0.6s var(--ease)}
.pbx .svg-wrapper{background:#fff;border:1px solid var(--border);border-radius:var(--r-sm);
    padding:20px;margin:22px 0;position:relative;overflow:auto;
    min-height:100px;display:flex;justify-content:center;align-items:center;}
.pbx .svg-wrapper::before{content:'Process Flow';position:absolute;top:8px;left:12px;font-size:10px;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:0.08em}
.pbx .flow-step{fill:#1e3a5f}
.pbx .flow-text{fill:#fff;font-family:var(--font-body);font-size:13px;font-weight:500;text-anchor:middle;dominant-baseline:middle}
.pbx .quiz-container{background:var(--bg);padding:26px;border-radius:var(--r-lg);border:1px solid var(--border);margin:22px 0}
.pbx .quiz-container h4{margin-bottom:18px;display:flex;align-items:center;gap:6px}
.pbx .quiz-container h4::before{content:'🧠'}
.pbx .quiz-q{margin-bottom:22px;background:#fff;padding:18px;border-radius:var(--r-sm);border:1px solid var(--border)}
.pbx .quiz-q p{margin-bottom:10px;font-weight:600;color:var(--navy);font-size:0.9375rem}
.pbx .quiz-q label{display:flex;align-items:flex-start;gap:8px;padding:7px 10px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;font-size:13.5px;transition:all var(--pbt);margin-bottom:4px;color:var(--text-2)}
.pbx .quiz-q label:hover{background:var(--orange-light);border-color:rgba(255,107,53,0.2)}
.pbx .quiz-q input[type="radio"]{accent-color:var(--orange);margin-top:2px;flex-shrink:0}
.pbx .quiz-result{margin-top:14px;font-weight:700;font-size:1rem;color:var(--navy);padding:12px;background:var(--orange-light);border-radius:var(--r-sm);text-align:center}
.pbx .acc-header{padding:12px 16px;font-weight:600;cursor:pointer;background:#fafafa;color:var(--navy);font-size:14px;transition:background var(--pbt)}
.pbx .acc-header:hover{background:var(--orange-light)}
.pbx .pillar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:18px 0}
.pbx .pillar-card{background:var(--bg);padding:14px 16px;border-radius:var(--r-sm);border:1px solid var(--border);border-top:3px solid var(--orange)}
.pbx .pillar-card strong{display:block;color:var(--navy);margin-bottom:5px;font-size:14px}
.pbx .pillar-card p{margin:0;font-size:13px;color:var(--text-muted)}
.pbx .progress-stats-box{padding:18px 22px;background:var(--bg);border-radius:var(--r-sm);margin:0 28px 18px;font-size:14px;line-height:2;border:1px solid var(--border)}
.pbx .yt-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;padding:14px}
.pbx .yt-card{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;border:1px solid var(--border);background:#fff;text-decoration:none;transition:all var(--pbt);box-shadow:var(--sh-sm)}
.pbx .yt-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--orange)}
.pbx .yt-card-thumb{position:relative;width:100%;padding-top:56.25%;background:#0f172a;overflow:hidden}
.pbx .yt-card-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.3s}
.pbx .yt-card:hover .yt-card-thumb img{transform:scale(1.04)}
.pbx .yt-card-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);transition:background 0.2s}
.pbx .yt-card:hover .yt-card-play{background:rgba(0,0,0,0.32)}
.pbx .yt-card-info{padding:12px 14px;display:flex;flex-direction:column;gap:5px;flex:1}
.pbx .yt-card-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--orange)}
.pbx .yt-card-title{font-size:13.5px;font-weight:600;color:var(--navy);line-height:1.4;margin:0}
.pbx .yt-card-cta{font-size:12px;font-weight:700;color:var(--orange);margin-top:auto}
.pbx .vid-upload .yt-card-title{padding:12px 14px;font-size:13.5px;font-weight:600;color:var(--navy);line-height:1.4;margin:0}
.pbx .bookmarks-inline{margin:22px 0;padding:14px 18px;background:var(--bg);border-radius:var(--r-sm);border:1px solid var(--border)}
.pbx .bookmarks-inline strong{display:block;margin-bottom:8px;font-size:13px;color:var(--text-muted)}
.pbx .btn-sc{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;
    background:var(--orange);color:#fff;border-radius:var(--r-sm);
    font-size:12.5px;font-weight:700;text-decoration:none;
    border:none;cursor:pointer;margin:4px 6px 4px 0;
    transition:all var(--pbt) var(--ease);white-space:nowrap;
    box-shadow:0 2px 8px rgba(255,107,53,0.3);}
.pbx .btn-sc::before{content:'🔗';font-size:11px}
.pbx .btn-sc:hover{background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 6px 16px rgba(255,107,53,0.45);color:#fff}
.pbx .btn-yt{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;
    background:#ff0000;color:#fff;border-radius:var(--r-sm);
    font-size:12.5px;font-weight:700;text-decoration:none;
    border:none;cursor:pointer;margin:4px 6px 4px 0;
    transition:all var(--pbt) var(--ease);white-space:nowrap;
    box-shadow:0 2px 8px rgba(255,0,0,0.25);}
.pbx .btn-yt::before{content:'▶';font-size:11px}
.pbx .btn-yt:hover{background:#cc0000;transform:translateY(-2px);box-shadow:0 6px 16px rgba(255,0,0,0.4);color:#fff}
.pbx .pill-sc{display:inline-flex;align-items:center;gap:5px;padding:5px 13px;
    background:rgba(255,107,53,0.1);color:var(--orange);border-radius:99px;
    font-size:12px;font-weight:700;text-decoration:none;margin:0 5px 5px 0;
    transition:all var(--pbt);border:1.5px solid rgba(255,107,53,0.35);cursor:pointer;}
.pbx .pill-sc:hover{background:var(--orange);color:#fff;border-color:var(--orange);transform:translateY(-1px);box-shadow:var(--sh)}
.pbx .pill-yt{display:inline-flex;align-items:center;gap:5px;padding:5px 13px;
    background:rgba(255,0,0,0.08);color:#cc0000;border-radius:99px;
    font-size:12px;font-weight:700;text-decoration:none;margin:0 5px 5px 0;
    transition:all var(--pbt);border:1.5px solid rgba(255,0,0,0.2);cursor:pointer;}
.pbx .pill-yt::before{content:'▶ ';font-size:10px}
.pbx .pill-yt:hover{background:#ff0000;color:#fff;border-color:#ff0000;transform:translateY(-1px);box-shadow:0 4px 12px rgba(255,0,0,0.3)}
.pbx .pain-point-section{margin:24px 0;border-radius:var(--r);overflow:hidden;
    border:1px solid rgba(220,38,38,0.15);box-shadow:var(--sh-sm);}
.pbx .pain-point-header{background:linear-gradient(135deg,#1e3a5f,#152b45);
    padding:13px 18px;display:flex;align-items:center;gap:10px;}
.pbx .pain-point-header h4{color:#fff;font-size:13px;font-weight:800;text-transform:uppercase;
    letter-spacing:0.06em;margin:0;border:none;padding:0;}
.pbx .pain-point-header span{font-size:16px}
.pbx .pain-point-body{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0}
@media(max-width:700px){.pbx .pain-point-body{grid-template-columns:1fr}}
.pbx .pp-card{padding:16px 18px;border-right:1px solid var(--border-light)}
.pbx .pp-card:last-child{border-right:none}
.pbx .pp-card-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;
    margin-bottom:7px;display:flex;align-items:center;gap:5px;}
.pbx .pp-pain .pp-card-label{color:#dc2626}
.pbx .pp-solution .pp-card-label{color:#16a34a}
.pbx .pp-insight .pp-card-label{color:#0284c7}
.pbx .pp-card p{font-size:13px;line-height:1.6;margin:0;color:var(--text-muted)}
.pbx .pp-pain{background:#fff8f8}
.pbx .pp-solution{background:#f0fdf4}
.pbx .pp-insight{background:#f0f9ff}
.pbx .overview-film{margin:18px 0 6px;}
.pbx .overview-poster{width:100%; display:flex; align-items:center; gap:20px; text-align:left; cursor:pointer;
    border:1px solid var(--border); border-radius:18px; padding:22px 24px; font-family:inherit;
    background:linear-gradient(135deg,#16304e 0%,#0f2138 60%,#1b2c44 100%); color:#fff; position:relative; overflow:hidden;
    transition:transform .18s var(--ease), box-shadow .18s var(--ease); box-shadow:0 18px 40px -22px rgba(15,33,56,.6);}
.pbx .overview-poster::before{content:''; position:absolute; top:-40%; right:-5%; width:340px; height:340px;
    background:radial-gradient(circle,rgba(255,107,53,.30),transparent 65%); pointer-events:none;}
.pbx .overview-poster:hover{transform:translateY(-2px); box-shadow:0 24px 50px -22px rgba(255,107,53,.45);}
@keyframes ovPulse{0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.35);opacity:0}}
.pbx .ov-badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
.pbx .ov-badges span{font-size:11px; font-weight:700; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); padding:3px 10px; border-radius:999px;}
.pbx .overview-host{margin-top:14px; border-radius:18px; overflow:hidden; box-shadow:0 22px 50px -24px rgba(15,33,56,.6);}
@media(max-width:640px){.pbx .overview-poster{flex-direction:column; text-align:center; align-items:center;}.pbx .ov-badges{justify-content:center;}}
@keyframes auroraDrift{0%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(4%,-3%) scale(1.08) } 100%{ transform:translate(-3%,4%) scale(1.05) }}
@keyframes partRise{0%{ transform:translateY(0); opacity:0 } 12%{ opacity:.55 } 86%{ opacity:.45 } 100%{ transform:translateY(-94vh); opacity:0 }}
@keyframes caretBlink{0%,50%{ opacity:1 } 51%,100%{ opacity:0 }}
.pbx .aha-card{position:absolute; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); border-radius:14px; backdrop-filter:blur(8px); box-shadow:0 16px 40px -16px rgba(0,0,0,.5);}
.pbx .aha-card-h{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:rgba(255,255,255,.85); margin-bottom:8px;}
.pbx .aha-card-h span{width:8px; height:8px; border-radius:50%; background:#ff6b35;}
.pbx .aha-stat{right:0; top:16px; width:118px; padding:14px 14px; text-align:center;}
.pbx .aha-stat b{display:block; font-family:var(--font-head); font-size:26px; font-weight:800; color:#ffb48a;}
.pbx .aha-stat span{font-size:11px; color:rgba(255,255,255,.7);}
@keyframes popIn{0%{transform:scale(.5);opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1}}
[data-theme="dark"] .pbx .module-section{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .pbx .module-header{background:linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 100%)}
[data-theme="dark"] .pbx .overview-content{background:linear-gradient(135deg,var(--surface-2) 0%,rgba(255,107,53,0.06) 100%)}
[data-theme="dark"] .pbx .feedback-container, [data-theme="dark"] .pbx .video-container, [data-theme="dark"] .pbx .yt-card, [data-theme="dark"] .pbx .quiz-q, [data-theme="dark"] .pbx .tool-result, [data-theme="dark"] .pbx .svg-wrapper{background:var(--surface-2);border-color:var(--border)}
[data-theme="dark"] .pbx .quiz-container, [data-theme="dark"] .pbx .mod-progress, [data-theme="dark"] .pbx .hero-panel, [data-theme="dark"] .pbx .bookmarks-inline, [data-theme="dark"] .pbx .progress-stats-box, [data-theme="dark"] .pbx .tool-container{background:var(--bg-2);border-color:var(--border)}
[data-theme="dark"] .pbx .data-table{border-color:var(--border)}
[data-theme="dark"] .pbx .data-table td{border-bottom-color:var(--border-light);color:var(--text-2)}
[data-theme="dark"] .pbx .data-table tbody tr:nth-child(even){background:var(--surface-2)}
[data-theme="dark"] .pbx .data-table tbody tr:hover{background:rgba(255,107,53,0.08)}
[data-theme="dark"] .pbx .acc-header{background:var(--bg-2);color:var(--text)}
[data-theme="dark"] .pbx .pill{background:var(--bg-2);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .pbx .pillar-card{background:var(--surface-2);border-color:var(--border)}
[data-theme="dark"] .pbx .qa-card{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .pbx .trust-bar{background:rgba(17,26,44,0.6)}
[data-theme="dark"] .pbx .qa-title, [data-theme="dark"] .pbx .dash-sh-title, [data-theme="dark"] .pbx .trust-item, [data-theme="dark"] .pbx .user-badge{color:var(--text)}
[data-theme="dark"] .pbx .badge-diff{background:#1f2937;color:#cbd5e1}
[data-theme="dark"] .pbx .nav-list li{color:rgba(255,255,255,0.62)}
[data-theme="dark"] .pbx .callout.pro-tip{background:linear-gradient(135deg,rgba(255,107,53,0.16) 0%,var(--surface-2) 100%);border-color:rgba(255,107,53,0.3)}
[data-theme="dark"] .pbx .callout.warning{background:linear-gradient(135deg,rgba(245,158,11,0.16) 0%,var(--surface-2) 100%);border-color:rgba(245,158,11,0.3)}
[data-theme="dark"] .pbx .callout.success{background:linear-gradient(135deg,rgba(34,197,94,0.16) 0%,var(--surface-2) 100%);border-color:rgba(34,197,94,0.3)}
[data-theme="dark"] .pbx .callout.info{background:linear-gradient(135deg,rgba(56,189,248,0.16) 0%,var(--surface-2) 100%);border-color:rgba(56,189,248,0.3)}
[data-theme="dark"] .pbx .callout, [data-theme="dark"] .pbx .callout *{color:var(--text-2)}
[data-theme="dark"] .pbx .pain-point-section{border-color:var(--border)}
[data-theme="dark"] .pbx .pp-card{border-right-color:var(--border)}
[data-theme="dark"] .pbx .pp-card p{color:var(--text-2)}
[data-theme="dark"] .pbx .pp-pain{background:rgba(239,68,68,0.10)}
[data-theme="dark"] .pbx .pp-solution{background:rgba(34,197,94,0.10)}
[data-theme="dark"] .pbx .pp-insight{background:rgba(56,189,248,0.10)}
[data-theme="dark"] .pbx .pp-pain .pp-card-label{color:#f87171}
[data-theme="dark"] .pbx .pp-solution .pp-card-label{color:#4ade80}
[data-theme="dark"] .pbx .pp-insight .pp-card-label{color:#38bdf8}
[data-theme="dark"] .pbx .badge-advanced{background:rgba(245,158,11,0.18);color:#fcd34d}
[data-theme="dark"] .pbx .badge-expert{background:rgba(239,68,68,0.18);color:#fca5a5}
[data-theme="dark"] .pbx .svg-wrapper::before{color:var(--text-muted)}
.pbx .upgrade-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
    background:linear-gradient(135deg,var(--orange) 0%,#ffb347 100%);
    color:#fff;border:none;padding:7px 14px;border-radius:99px;
    font-family:var(--font-head);font-weight:700;font-size:12.5px;letter-spacing:0.01em;
    box-shadow:0 4px 12px rgba(255,107,53,0.35);transition:all var(--pbt);}
.pbx .upgrade-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(255,107,53,0.45)}
.pbx .upgrade-btn svg{flex-shrink:0}
.pbx .upgrade-btn.is-premium{background:linear-gradient(135deg,#10b981 0%,#34d399 100%);box-shadow:0 4px 12px rgba(16,185,129,0.32)}
.pbx .plan-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:99px;
    font-family:var(--font-head);font-weight:700;font-size:11px;text-transform:uppercase;
    letter-spacing:0.06em;background:var(--bg-2);color:var(--navy);border:1px solid var(--border);}
.pbx .plan-pill.premium{background:rgba(16,185,129,0.12);color:#0f9d6b;border-color:rgba(16,185,129,0.3)}
.pbx .nav-list li.locked{opacity:0.82}
.pbx .nav-lock{margin-left:auto;font-size:11px;flex-shrink:0;opacity:0.65}
.pbx .billing-opt.active .save-badge{background:#fff;color:var(--orange-dark)}
.pbx .save-badge{background:var(--orange);color:#fff;font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:99px;letter-spacing:0.04em}
.pbx .plan-cards{display:grid;gap:12px}
.pbx .plan-card{border:1.5px solid var(--border);border-radius:var(--r-lg);padding:16px 18px;
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    transition:all var(--pbt);position:relative;background:var(--bg);}
.pbx .plan-card:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:var(--sh-lg)}
.pbx .plan-card.popular{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-20)}
.pbx .plan-card-pop{position:absolute;top:-10px;left:18px;background:var(--orange);color:#fff;font-family:var(--font-head);font-size:9.5px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;padding:3px 10px;border-radius:99px}
.pbx .plan-card-info{min-width:0}
.pbx .plan-card-name{font-family:var(--font-head);font-weight:800;font-size:15px;color:var(--navy);margin-bottom:2px}
.pbx .plan-card-tag{font-size:12px;color:var(--text-muted)}
.pbx .plan-card-price{text-align:right;flex-shrink:0}
.pbx .plan-card-amt{font-family:var(--font-head);font-weight:900;font-size:1.35rem;color:var(--navy);line-height:1}
.pbx .plan-card-cyc{font-size:11px;color:var(--text-muted)}
.pbx .plan-card-amt small{font-size:13px;font-weight:700;color:var(--text-muted)}
.pbx .plan-card-cta{background:var(--orange);color:#fff;border:none;cursor:pointer;flex-shrink:0;
    padding:10px 16px;border-radius:var(--r);font-family:var(--font-head);font-weight:700;
    font-size:13px;transition:all var(--pbt);white-space:nowrap;}
.pbx .plan-card-cta:hover{background:var(--orange-dark);transform:translateY(-1px)}
.pbx .plan-card-cta:disabled{background:var(--bg-2);color:var(--text-muted);cursor:default;transform:none}
.pbx .plan-card.current{opacity:0.78}
[data-theme="dark"] .pbx .plan-card{background:var(--bg-2)}
@media (max-width:780px){.pbx .plan-card{flex-wrap:wrap}}
.pbx .curriculum-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:0 0 26px;}
.pbx .cstat{position:relative;padding:16px 14px;border-radius:var(--r-lg);text-align:center;
    background:linear-gradient(160deg,var(--surface) 0%,var(--bg-2) 100%);
    border:1px solid var(--border);overflow:hidden;transition:all var(--pbt-md) var(--ease-out);}
.pbx .cstat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--orange),#00e5ff);opacity:0.85}
.pbx .cstat:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:transparent}
.pbx .cstat-val{display:block;font-family:var(--font-head);font-weight:900;font-size:1.65rem;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.pbx .cstat-label{display:block;margin-top:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-muted)}
.pbx .cstat-accent .cstat-val{background:linear-gradient(135deg,var(--orange),#00e5ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pbx .jp-ring{position:absolute;inset:0;transform:rotate(-90deg)}
.pbx .jp-ring circle{fill:none;stroke-width:4;stroke-linecap:round}
.pbx .jp-ring .track{stroke:var(--border)}
.pbx .jp-ring .fill{stroke:var(--pc,#00e5ff);transition:stroke-dashoffset 1.1s var(--ease-out)}
.pbx .jp-step.is-locked .jp-ring .fill{stroke:#64748b}
.pbx .jp-card{position:relative;border-radius:var(--r-lg);padding:18px 20px;
    background:linear-gradient(155deg,var(--surface) 0%,var(--bg-2) 130%);
    border:1px solid var(--border);box-shadow:var(--sh);
    transition:transform var(--pbt-md) var(--ease-out),box-shadow var(--pbt-md),border-color var(--pbt-md);
    overflow:hidden;}
.pbx .jp-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--pc,#00e5ff)}
.pbx .jp-card::after{content:"";position:absolute;inset:0;background:transparent;background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--pc,#00e5ff) 16%,transparent),transparent 45%);opacity:0;transition:opacity var(--pbt-md);pointer-events:none}
.pbx .jp-card:hover{transform:translateY(-4px);box-shadow:var(--sh-xl);border-color:var(--pc,#00e5ff);border-color:color-mix(in srgb,var(--pc,#00e5ff) 50%,var(--border))}
.pbx .jp-card:hover::after{opacity:1}
.pbx .jp-step.is-locked .jp-card{opacity:0.94}
.pbx .jp-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
.pbx .jp-badges{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.pbx .jp-badge{font-size:10px;font-weight:700;padding:3px 9px;border-radius:99px;letter-spacing:0.03em;text-transform:uppercase;font-family:var(--font-head);white-space:nowrap}
.pbx .jp-badge.level{background:var(--bg);color:var(--text-muted);border:1px solid var(--border)}
.pbx .jp-badge.status-complete{background:rgba(16,185,129,0.14);color:#0f9d6b}
.pbx .jp-badge.status-active{background:rgba(0,229,255,0.16);background:color-mix(in srgb,var(--pc) 16%,transparent);color:var(--pc)}
.pbx .jp-badge.status-locked{background:var(--bg);color:var(--text-muted);border:1px solid var(--border)}
.pbx .jp-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:none;
    font-family:var(--font-head);font-weight:700;font-size:12.5px;padding:8px 14px;border-radius:var(--r);
    transition:all var(--pbt)}
.pbx .jp-btn-primary{background:var(--pc,#00e5ff);color:#fff;box-shadow:0 4px 12px -2px rgba(0,0,0,0.25);box-shadow:0 4px 12px -2px color-mix(in srgb,var(--pc,#00e5ff) 60%,transparent)}
.pbx .jp-btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
.pbx .jp-btn-ghost{background:transparent;color:var(--navy);border:1px solid var(--border)}
.pbx .jp-btn-ghost:hover{border-color:var(--pc,#00e5ff);color:var(--pc,#00e5ff)}
.pbx .jp-btn-icon{background:var(--bg);color:var(--text-muted);border:1px solid var(--border);padding:8px 10px}
.pbx .jp-btn-icon:hover{color:var(--pc,#00e5ff);border-color:var(--pc,#00e5ff)}
.pbx .jp-btn-lock{background:linear-gradient(135deg,var(--orange),#ffb347);color:#fff;box-shadow:0 4px 12px rgba(255,107,53,0.32)}
.pbx .jp-btn-lock:hover{transform:translateY(-1px)}
.pbx .jp-modules{display:none;margin-top:14px;padding-top:14px;border-top:1px dashed var(--border)}
.pbx .jp-step.expanded .jp-modules{display:block;animation:fadeInUp 0.3s var(--ease-out)}
.pbx .jp-mod-dot{width:7px;height:7px;border-radius:50%;background:var(--pc,#00e5ff);flex-shrink:0}
.pbx .jp-mod.done .jp-mod-dot{background:#10b981}
.pbx .jp-mod-id{font-family:var(--font-head);font-weight:700;color:var(--text-muted);font-size:12px;flex-shrink:0}
.pbx .jp-mod-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbx .jp-mod-state{font-size:12px;flex-shrink:0;opacity:0.7}
[data-theme="dark"] .pbx .jp-card{background:linear-gradient(155deg,#0f1a2e 0%,#0b1322 130%)}
[data-theme="dark"] .pbx .cstat{background:linear-gradient(160deg,#0f1a2e 0%,#0b1322 100%)}
@media (max-width:720px){.pbx .curriculum-stats{grid-template-columns:repeat(3,1fr)}.pbx .jp-card-head{flex-direction:column}.pbx .jp-badges{justify-content:flex-start}}
@keyframes aiPulse{0%{transform:scale(1);opacity:0.7}100%{transform:scale(1.6);opacity:0}}
.pbx .ai-panel{position:fixed;right:24px;bottom:94px;z-index:1200;width:370px;max-width:calc(100vw - 32px);
    height:520px;max-height:calc(100vh - 140px);display:none;flex-direction:column;overflow:hidden;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2xl);
    box-shadow:var(--sh-xl);animation:scaleIn 0.26s var(--ease-out)}
.pbx .ai-panel.open{display:flex}
.pbx .ai-head-avatar{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--orange),#00e5ff);color:#fff;flex-shrink:0}
.pbx .ai-chips{display:flex;flex-wrap:wrap;gap:7px}
.pbx .ai-chip{font-size:12px;font-weight:600;padding:7px 12px;border-radius:99px;cursor:pointer;
    background:var(--surface);border:1px solid var(--border);color:var(--navy);transition:all var(--pbt)}
.pbx .ai-chip:hover{border-color:var(--orange);color:var(--orange)}
@media (max-width:480px){.pbx .ai-panel{right:12px;left:12px;width:auto}}
.pbx img.brand-logo:not([src]){visibility:hidden}
@media (max-width:768px){.pbx .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:1200;
        width:min(82vw,300px);
        transform:translateX(0);
        transition:transform .28s var(--ease-out);
        box-shadow:0 0 48px rgba(0,0,0,0.4);}.pbx .sidebar.collapsed{width:min(82vw,300px);transform:translateX(-105%);box-shadow:none}.pbx .main-content{margin-left:0 !important;width:100%}}
.pbx .module-section{--pf-accent:#ff6b35}
.pbx .module-section.p1{--pf-accent:#10b981}
.pbx .module-section.p2{--pf-accent:#ff6b35}
.pbx .module-section.p3{--pf-accent:#6366f1}
.pbx .module-section.p4{--pf-accent:#3b82f6}
.pbx .module-section.p5{--pf-accent:#22c55e}
.pbx .module-section.p6{--pf-accent:#f59e0b}
.pbx .module-section.p7{--pf-accent:#8b5cf6}
.pbx .module-section.p8{--pf-accent:#ec4899}
.pbx .module-section.p9{--pf-accent:#ef4444}
.pbx .proc-flow{margin:26px 0;padding:20px 22px;border-radius:18px;
    background:var(--surface);
    background:
        radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--pf-accent) 8%, transparent) 0%, transparent 60%),
        var(--surface);
    border:1px solid var(--border);box-shadow:var(--sh-sm);}
.pbx .pf-head{display:inline-flex;align-items:center;gap:7px;margin-bottom:16px;
    font-family:var(--font-head);font-size:11px;font-weight:800;
    text-transform:uppercase;letter-spacing:0.1em;
    /* 11px uppercase needs 4.5:1 and the accent at full strength gives 2.66
       on this card. Mixed rather than replaced, so it still reads as the
       Playbook's own colour whatever that accent is. */
    color:color-mix(in srgb, var(--pf-accent) 72%, #000);}
[data-theme="dark"] .pbx .pf-head{
    color:color-mix(in srgb, var(--pf-accent) 62%, #fff);}
.pbx .pf-track{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px 30px}
.pbx .pf-step{position:relative;flex:1 1 130px;min-width:122px;
    display:flex;align-items:center;gap:11px;
    padding:13px 15px;border-radius:14px;
    background:var(--bg);border:1px solid var(--border);
    box-shadow:var(--sh-sm);
    transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out);
    animation:pfIn .45s var(--ease-out) backwards;}
.pbx .pf-step:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.pbx .pf-step:nth-child(2){animation-delay:.06s}
.pbx .pf-step:nth-child(3){animation-delay:.12s}
.pbx .pf-step:nth-child(4){animation-delay:.18s}
.pbx .pf-step:nth-child(5){animation-delay:.24s}
.pbx .pf-step:nth-child(6){animation-delay:.30s}
@keyframes pfIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pbx .pf-dot{flex-shrink:0;width:28px;height:28px;border-radius:50%;
    display:grid;place-items:center;
    font-family:var(--font-head);font-weight:800;font-size:13px;line-height:1;
    /* Same reason as .pf-goal: the step number is white. */
    color:#fff;background:color-mix(in srgb, var(--pf-accent) 70%, #000);
    box-shadow:0 3px 9px -3px var(--pf-accent);}
.pbx .pf-label{font-weight:600;font-size:13.25px;line-height:1.32;color:var(--text)}
.pbx .pf-step:not(:last-child)::after{content:'';position:absolute;top:50%;right:-20px;
    width:9px;height:9px;
    border-top:2.5px solid var(--pf-accent);border-right:2.5px solid var(--pf-accent);
    transform:translateY(-50%) rotate(45deg);
    opacity:0.65;}
.pbx .pf-goal{background:color-mix(in srgb, var(--pf-accent) 70%, #000);
    /* The label on this chip is white, and white on the raw accent is
       2.66:1. Both stops are mixed down so the whole chip carries it. */
    background:linear-gradient(135deg, color-mix(in srgb, var(--pf-accent) 70%, #000),
                               color-mix(in srgb, var(--pf-accent) 52%, #000));
    border-color:transparent;}
.pbx .pf-goal .pf-label{color:#fff;font-weight:700}
.pbx .pf-goal .pf-dot{background:rgba(255,255,255,0.24);color:#fff;
    box-shadow:none;font-size:14px;}
[data-theme="dark"] .pbx .pf-step{background:var(--surface-2)}
[data-theme="dark"] .pbx .proc-flow{background:var(--surface)}
@media (max-width:640px){.pbx .proc-flow{padding:16px 16px}.pbx .pf-track{flex-direction:column;gap:26px}.pbx .pf-step{flex:1 1 auto;width:100%;min-width:0}.pbx .pf-step:not(:last-child)::after{top:auto;bottom:-19px;right:auto;left:24px;
        transform:rotate(135deg);}}
@media (prefers-reduced-motion:reduce){.pbx .pf-step{animation:none}.pbx .pf-step:hover{transform:none}}
.pbx .table-wrap > .data-table{margin-bottom:0;}
.pbx .module-content img, .pbx .overview-content img, .pbx .module-content svg{max-width:100%; height:auto;}
.pbx .module-content pre{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.pbx .module-content code{overflow-wrap:anywhere; word-break:break-word;}
.pbx .sidebar-scrim{display:none;}
@media (max-width:900px){.pbx .content-scrollable{padding:24px 22px 40px;}}
@media (max-width:768px){.pbx .sidebar-scrim{display:block; position:fixed; inset:0; z-index:1199;
        background:rgba(8,15,28,0.5);
        -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
        opacity:0; pointer-events:none; transition:opacity .25s var(--ease-out);}.pbx .sidebar:not(.collapsed) ~ .sidebar-scrim{opacity:1; pointer-events:auto;}.pbx .top-header{padding:0 14px; gap:8px;}.pbx .content-scrollable{padding:18px 15px 40px;}.pbx .hero-banner{border-radius:var(--r-xl);}.pbx .hero-inner{padding:30px 22px; gap:22px;}.pbx .hero-banner h1{font-size:1.9rem;}.pbx .hero-banner p{font-size:14px;}.pbx .module-body{padding:22px 17px;}.pbx .module-header{padding:22px 18px;}.pbx .module-header h2{font-size:1.3rem;}.pbx .module-logo-block{display:none;}.pbx .overview-content{padding:16px;}.pbx .dash-section-header{margin:28px 0 14px;}.pbx .dash-sh-title{font-size:1.3rem;}.pbx .curriculum-stats{gap:10px;}.pbx .nav-list li{min-height:40px;}}
@media (max-width:640px){.pbx .curriculum-stats{grid-template-columns:repeat(3,1fr); gap:8px;}.pbx .cstat{padding:13px 8px;}.pbx .cstat-val{font-size:1.3rem;}.pbx .cstat-label{font-size:9.5px; letter-spacing:0.04em;}.pbx .hero-visual{grid-template-columns:1fr 1fr; gap:12px;}.pbx .hero-actions{flex-direction:column; align-items:stretch;}.pbx .hero-actions button{width:100%; justify-content:center;}.pbx .trust-bar{padding:10px 12px;}.pbx .jp-card{padding:15px;}.pbx .jp-actions .jp-btn-primary, .pbx .jp-actions .jp-btn-ghost{flex:1 1 auto; justify-content:center;}}
@media (max-width:560px){.pbx .top-header{padding:0 10px; gap:6px;}.pbx .header-right{gap:2px;}.pbx .header-action-btn, .pbx .theme-toggle-btn, .pbx .upgrade-btn{padding:7px;}.pbx #upgrade-btn-label{display:none;}.pbx .plan-pill{display:none !important;}.pbx #user-name-el{display:none;}.pbx .user-badge{padding:4px; gap:0;}.pbx .user-badge > svg{display:none;}.pbx .breadcrumb .bc-home, .pbx .breadcrumb .bc-sep{display:none;}}
@media (max-width:460px){.pbx .curriculum-stats{grid-template-columns:repeat(2,1fr);}.pbx .hero-banner h1{font-size:1.6rem;}.pbx .module-meta{gap:6px;}.pbx .plan-card{flex-wrap:wrap;}.pbx .plan-card .plan-card-cta{width:100%;}}
.pbx .mod-video{margin:0 0 26px;}
.pbx .mvid-poster{position:relative; display:block; width:100%; aspect-ratio:16/9;
    border:0; padding:0; cursor:pointer; overflow:hidden; border-radius:18px;
    color:#fff; text-align:left; font-family:var(--font-body);
    background:#0b1422; box-shadow:0 20px 44px -20px rgba(8,15,28,.6); container-type:inline-size;
    transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);}
.pbx .mvid-poster:hover{transform:translateY(-3px); box-shadow:0 30px 60px -22px rgba(8,15,28,.7);}
.pbx .mvid-grad{position:absolute; inset:0;
    background:
        radial-gradient(120% 130% at 12% 18%, color-mix(in srgb, var(--pf-accent,#ff6b35) 55%, transparent), transparent 60%),
        radial-gradient(100% 120% at 100% 100%, rgba(0,229,255,.28), transparent 55%),
        linear-gradient(135deg,#0d1a2e,#0b1422);}
.pbx .mvid-rings{position:absolute; right:-60px; top:-60px; width:300px; height:300px; border-radius:50%;
    background:radial-gradient(circle, transparent 38%, rgba(255,255,255,.05) 39%, transparent 41%, transparent 54%, rgba(255,255,255,.05) 55%, transparent 57%);
    pointer-events:none;}
.pbx .mvid-logo{position:absolute; top:18px; left:20px; height:30px; width:auto; border-radius:5px; opacity:.95; z-index:2;}
.pbx .mvid-poster-txt{position:absolute; left:20px; right:20px; bottom:18px; z-index:2; display:flex; flex-direction:column; gap:4px;}
.pbx .mvid-eyebrow{font-family:var(--font-head); font-size:clamp(9px,1.6cqw,12px); font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--pf-accent,#ff6b35);}
.pbx .mvid-poster-title{font-family:var(--font-head); font-weight:800; font-size:clamp(15px,3.4cqw,26px); line-height:1.12; color:#fff;}
.pbx .mvid-poster-sub{font-size:clamp(10px,1.8cqw,13px); color:rgba(255,255,255,.72);}
.pbx .mvid-playbtn{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3;
    width:clamp(52px,12cqw,80px); height:clamp(52px,12cqw,80px); border-radius:50%;
    background:rgba(255,255,255,.16); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    border:2px solid rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; color:#fff;
    box-shadow:0 8px 30px rgba(0,0,0,.35); transition:transform .2s, background .2s;}
.pbx .mvid-poster:hover .mvid-playbtn{transform:translate(-50%,-50%) scale(1.08); background:var(--pf-accent,#ff6b35); border-color:transparent;}
.pbx .mvid-playbtn svg{width:42%; height:42%; margin-left:8%; fill:currentColor;}
.pbx .mvid-badge{position:absolute; top:18px; right:18px; z-index:2; background:rgba(8,15,28,.5); color:#fff; font-size:11px; font-weight:700; padding:4px 10px; border-radius:99px; backdrop-filter:blur(4px);}
@keyframes vpPan{from{ transform:scale(1.03) translate(-1%,-.5%); } to{ transform:scale(1.09) translate(1%,.5%); }}
@keyframes vpBlobA{to{ transform:translate(7cqw,5cqh) scale(1.16); }}
@keyframes vpBlobB{to{ transform:translate(-6cqw,-4cqh) scale(1.12); }}
@keyframes vpRise{from{ transform:translateY(0) scale(1); opacity:0; } 12%{ opacity:.5; } to{ transform:translateY(-115cqh) scale(.35); opacity:0; }}
@keyframes vpWord{from{ opacity:0; transform:translateY(.45em); } to{ opacity:1; transform:none; }}
@keyframes vpPop{from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; }}
@keyframes vpSpin{to{ transform:rotate(360deg); }}
@keyframes vpFloat{0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-1.4cqh); }}
@keyframes vpUp{from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; }}
@keyframes vpDraw{to{ stroke-dashoffset:72; }}
@keyframes vpKeySweep{to{ transform:translateX(130%); }}
@keyframes vpCardSweep{to{ transform:translateX(120%); }}
.pbx .ai-head-avatar{background:#16243a; overflow:hidden; padding:0;}
.pbx .ai-head-avatar .ai-bot-img{width:100%; height:100%; object-fit:cover; display:block;}
.pbx .ai-msg-avatar{width:26px; height:26px; border-radius:50%; flex-shrink:0; object-fit:cover; background:#16243a; align-self:flex-start; box-shadow:0 1px 4px rgba(0,0,0,.25);}
[data-theme="dark"] .pbx .data-table th{background:#26334d; color:#f1f5f9;}
[data-theme="dark"] .pbx .btn-secondary{background:#26334d; color:#fff;}
[data-theme="dark"] .pbx .btn-secondary:hover{background:#30425f;}
@keyframes stingBurst{0%{ transform:scale(.4); opacity:0; } 22%{ opacity:.85; } 100%{ transform:scale(1.25); opacity:.4; }}
@keyframes stingRing{0%{ transform:scale(.35); opacity:.6; } 100%{ transform:scale(1.9); opacity:0; }}
@keyframes stingLogo{0%{ opacity:0; transform:scale(.74) translateY(6px); } 55%{ opacity:1; } 100%{ opacity:1; transform:none; }}
@keyframes stingShine{to{ transform:translateX(130%); }}
.pbx .csb-instagram{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);}
.pbx .vpa-chip{display:inline-flex; align-items:center; gap:1.6cqw; margin-top:2cqh; font-family:var(--font-head);
    font-weight:800; font-size:clamp(11px,2.4cqw,18px); color:#fff; padding:1.4cqw 3cqw; border-radius:99px;}
.pbx .vpa-chip svg{width:1.4em; height:1.4em; flex-shrink:0;}
.pbx .vpa-chip-warn{background:color-mix(in srgb,#ff5b5b 22%,transparent); border:1px solid color-mix(in srgb,#ff5b5b 55%,transparent);
    color:#ffd9d9; animation:vpaPulse 1.6s ease-in-out .8s infinite both;}
@keyframes vpaPulse{0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); }}
@keyframes vpaDraw{to{ stroke-dashoffset:0; }}
@keyframes vpaFadeIn{to{ opacity:1; }}
.pbx .vpa-lever-bar{fill:var(--vacc); opacity:calc(.6 + var(--i) * .08); transform-box:fill-box; transform-origin:bottom;
    transform:scaleY(0); animation:vpaGrow .55s cubic-bezier(.34,1.4,.5,1) forwards; animation-delay:calc(var(--i) * .14s + .2s);
    filter:drop-shadow(0 4px 8px color-mix(in srgb,var(--vacc) 45%,transparent));}
@keyframes vpaGrow{to{ transform:scaleY(1); }}
@keyframes vpaSweep{to{ stroke-dashoffset:var(--off); }}
@keyframes vpaLight{0%{ opacity:.14; transform:scale(.7); } 60%{ opacity:1; transform:scale(1.35); fill:var(--vacc); }
    100%{ opacity:.92; transform:scale(1); fill:var(--vacc); }}
@keyframes vpaHover{0%,100%{ transform:translateY(2px); } 50%{ transform:translateY(-6px); }}
@keyframes vpaFlame{from{ transform:scaleY(.7); opacity:.8; } to{ transform:scaleY(1.15); opacity:1; }}
.pbx .vpa-hero{overflow:visible;}
.pbx .vpa-hero-links line{stroke:color-mix(in srgb,var(--vacc) 45%,transparent); stroke-width:1.4; stroke-linecap:round;
    stroke-dasharray:90; stroke-dashoffset:90; animation:vpaDraw .7s var(--ease-out) .25s forwards;}
.pbx .vpa-hero-halo{fill:none; stroke:color-mix(in srgb,var(--vacc) 70%,#fff); stroke-width:1.6; stroke-dasharray:5 11;
    opacity:.7; transform-box:fill-box; transform-origin:center; animation:vpSpin 11s linear infinite;}
.pbx .vpa-hero-disc{fill:var(--vacc); transform-box:fill-box; transform-origin:center; transform:scale(0);
    filter:drop-shadow(0 8px 18px color-mix(in srgb,var(--vacc) 55%,transparent));
    animation:vpPop .55s cubic-bezier(.34,1.56,.64,1) .15s backwards; animation-fill-mode:forwards;}
.pbx .vpa-hero-glyph{color:#fff;}
.pbx .vpa-hero-glyph > *{stroke-dasharray:100; stroke-dashoffset:100; animation:vpaDraw .9s var(--ease-out) .45s forwards;}
.pbx .vpa-hero-glyph [fill="currentColor"]{opacity:0; animation:vpaFadeIn .5s ease 1s forwards;}
.pbx .vpa-hero-sat{transform-box:fill-box; transform-origin:center;
    animation:vpPop .5s cubic-bezier(.34,1.56,.64,1) backwards; animation-delay:calc(var(--i) * .14s + .55s);}
.pbx .vpa-hero-sat:nth-child(2){animation-name:vpaFloatA; animation-duration:4.5s; animation-iteration-count:infinite;}
.pbx .vpa-hero-sdisc{fill:color-mix(in srgb,var(--vacc) 26%,#0f1d2e); stroke:color-mix(in srgb,var(--vacc) 60%,transparent); stroke-width:1.4;}
.pbx .vpa-hero-sglyph{color:#fff;}
.pbx .vpa-hero-spark{fill:#fff; opacity:0; transform-box:fill-box; transform-origin:center;
    animation:vpaTwinkle 2.6s ease-in-out infinite; animation-delay:calc(var(--i) * .5s + 1.1s);}
@keyframes vpaFloatA{0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); }}
@keyframes vpaTwinkle{0%,100%{ opacity:0; transform:scale(.6); } 50%{ opacity:.9; transform:scale(1.1); }}
.pbx .ac-chips{display:flex; gap:8px; flex-wrap:wrap;}
.pbx .ac-chip{font-family:var(--font-head); font-weight:700; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase;
    color:var(--text-2); background:var(--bg); border:1px solid var(--border); border-radius:99px; padding:4px 12px;}
.pbx .ac-chip-amz{color:#fff; background:#232f3e; border-color:#232f3e;}
.pbx .ac-callout{background:var(--orange-light); border:1px solid color-mix(in srgb,var(--orange) 35%,transparent); border-radius:var(--r-sm); padding:14px 16px;}
.pbx .ac-callout strong{color:var(--navy);}
.pbx .ac-callout p{margin:6px 0 0; font-size:.9rem; color:var(--text-2);}
.pbx #acExport.btn-ghost{background:var(--bg); color:var(--navy); border:1px solid var(--border); border-radius:var(--r-sm); padding:10px; font-weight:700; cursor:pointer;}
.pbx #acExport.btn-ghost:hover{border-color:var(--orange); color:var(--orange);}
@keyframes pai-shimmer{0%,60%{ transform:translateX(-120%); } 80%,100%{ transform:translateX(120%); }}
.pbx .ac-chips{display:flex; gap:8px; flex-wrap:wrap;}
.pbx .ac-chip{font-family:var(--font-head); font-weight:700; font-size:.66rem; letter-spacing:.07em; text-transform:uppercase;
    color:rgba(255,255,255,.85); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
    border-radius:99px; padding:5px 13px;}
.pbx .ac-chip-amz{color:#fff; background:linear-gradient(135deg,var(--orange),#f59e0b); border-color:transparent;
    box-shadow:0 4px 12px -3px rgba(255,107,53,.5);}
.pbx .mod-film-poster{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:20px;background:#0F172A;isolation:isolate}
.pbx .mod-film-poster .mod-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:5}
.pbx .mod-film-poster .mvid-playbtn{z-index:6;}
@keyframes authSpin{to{ transform:rotate(360deg); }}
@keyframes authShake{0%,100%{ transform:none; } 25%{ transform:translateX(-5px); } 55%{ transform:translateX(4px); } 80%{ transform:translateX(-2px); }}
@keyframes authSheetUp{from{ transform:translateY(48px); opacity:0; } to{ transform:none; opacity:1; }}
.pbx .acc-status .chip{font-size:11px;font-weight:700;padding:6px 12px;border-radius:99px;white-space:nowrap}
.pbx .acc-status .chip.todo{background:#f3f4f6;color:var(--text-muted)}
.pbx .acc-status .chip.busy{background:#dbeafe;color:#1e40af}
.pbx .acc-status .chip.done{background:#dcfce7;color:#166534}
.pbx .msec{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);margin:0 0 14px;overflow:hidden}
.pbx .msec-head{display:flex;align-items:center;gap:10px;width:100%;
    padding:15px 18px;background:transparent;border:none;cursor:pointer;text-align:left;
    font-family:var(--font-head);font-weight:800;font-size:0.9375rem;color:var(--navy);}
.pbx .msec-head:hover{background:var(--orange-light)}
.pbx .msec-label{flex:1;min-width:0}
.pbx .msec-chev{flex-shrink:0;color:var(--text-muted);display:flex;transition:transform 0.3s ease-in-out}
.pbx .msec.open .msec-chev{transform:rotate(180deg)}
.pbx .msec-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.3s ease-in-out}
.pbx .msec.open .msec-body{grid-template-rows:1fr}
.pbx .msec-inner{overflow:hidden;min-height:0;padding:0 18px}
.pbx .msec.open .msec-inner{padding:2px 18px 18px}
.pbx .msec .quiz-container, .pbx .msec .video-container, .pbx .msec .feedback-container{border:none;box-shadow:none;margin:0;padding:0;background:transparent}
.pbx .msec .feedback-container{border-top:none}
.pbx .mod-hero{display:grid;grid-template-columns:1fr;gap:16px;margin:10px 0 20px;align-items:start}
.pbx .mod-hero.no-film .mod-hero-video{display:none}
.pbx .mod-hero .mod-video{margin:0}
.pbx .mod-hero-side{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0;align-items:start}
.pbx .hero-panel{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.pbx .hero-panel-head{display:flex;align-items:center;gap:8px;width:100%;padding:13px 16px;
    background:transparent;border:none;cursor:pointer;text-align:left;
    font-family:var(--font-head);font-weight:800;font-size:0.875rem;color:var(--navy);}
.pbx .hero-panel-head:hover{background:var(--orange-light)}
.pbx .hp-chev{margin-left:auto;width:9px;height:9px;border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);transform:rotate(45deg);transition:transform 0.25s ease}
.pbx .hero-panel.open .hp-chev{transform:rotate(-135deg)}
.pbx .hero-panel-body{display:none;padding:2px 16px 15px;font-size:13.5px;color:var(--text-2);line-height:1.65}
.pbx .hero-panel.open .hero-panel-body{display:block}
.pbx .hero-learn-label{font-weight:700;color:var(--navy);margin:10px 0 6px}
.pbx .hero-learn{margin:0;padding-left:18px}
.pbx .hero-learn li{margin-bottom:5px}
.pbx .module-section.locked .mod-hero-video{display:none}
.pbx .module-section.locked .mod-hero{grid-template-columns:1fr}
.pbx .mod-progress{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 20px;margin:0}
.pbx .mod-progress-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-head);font-weight:800;font-size:0.875rem;color:var(--navy)}
.pbx .mod-progress-pct{color:var(--orange-dark);font-size:0.8125rem}
.pbx .mod-progress-bar{height:8px;border-radius:99px;background:#e5e7eb;margin:10px 0 8px;overflow:hidden}
.pbx .mod-progress-bar > i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--orange),#ec4899);transition:width 0.4s ease}
.pbx .mod-progress.done .mod-progress-bar > i{background:linear-gradient(90deg,#22c55e,#16a34a)}
.pbx .mod-progress-time{font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.pbx .quiz-lock{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:var(--r-sm);background:var(--orange-light);color:var(--orange-dark);font-weight:600;font-size:13.5px;margin-bottom:14px}
.pbx .quiz-lock-ic{font-size:1.1rem}
.pbx .quiz-inner.quiz-gated{opacity:0.35;pointer-events:none;filter:saturate(0.4)}
.pbx .quiz-flash{animation:quizFlash 1.2s ease-out 2}
@keyframes quizFlash{0%{box-shadow:0 0 0 0 rgba(255,107,53,0.6)}100%{box-shadow:0 0 0 14px rgba(255,107,53,0)}}
.pbx .mvid-playbtn.pulse{width:76px;height:76px;min-width:72px;min-height:72px;animation:playPulse 2s ease-out infinite}
@keyframes playPulse{0%{box-shadow:0 0 0 0 rgba(255,107,53,0.55)}
    70%{box-shadow:0 0 0 22px rgba(255,107,53,0)}
    100%{box-shadow:0 0 0 0 rgba(255,107,53,0)}}
.pbx .mvid-tap{position:absolute;left:50%;transform:translateX(-50%);bottom:16%;
    background:rgba(15,23,42,0.72);color:#fff;font-weight:800;font-size:13px;
    padding:9px 18px;border-radius:99px;letter-spacing:0.04em;backdrop-filter:blur(4px);
    pointer-events:none;}
@media (prefers-reduced-motion: reduce){.pbx .mvid-playbtn.pulse{animation:none}}
.pbx .mvid-poster.has-art .mvid-poster-txt, .pbx .mvid-poster.has-art .mvid-logo, .pbx .mvid-poster.has-art .mvid-grad, .pbx .mvid-poster.has-art .mvid-rings{display:none;}
.pbx .mvid-poster.has-art .mvid-playbtn{top:auto; left:auto; bottom:clamp(20px,3.4cqw,34px); right:clamp(22px,3.6cqw,36px);
    transform:none;}
.pbx .mvid-poster.has-art:hover .mvid-playbtn{transform:scale(1.1);}
.pbx .mvid-poster.has-art .mvid-badge{top:auto; right:calc(clamp(22px,3.6cqw,36px) + clamp(64px,13cqw,96px) + 14px);
    bottom:calc(clamp(20px,3.4cqw,34px) + clamp(64px,13cqw,96px) / 2 - 15px);
    z-index:6; background:rgba(11,21,36,.78); border:1px solid rgba(255,255,255,.18);
    font-family:var(--font-head); font-size:clamp(11px,1.9cqw,15px); letter-spacing:.08em;
    padding:7px 14px;}
.pbx .mvid-poster.has-art .mod-thumb{opacity:1;}
.pbx .mvid-poster.has-art .mvid-playbtn{width:clamp(64px,13cqw,96px); height:clamp(64px,13cqw,96px);
    background:linear-gradient(135deg,#ff8a4c 0%,var(--orange) 100%);
    border:4px solid rgba(255,255,255,.92);
    color:#fff;
    box-shadow:0 14px 40px -8px rgba(255,107,53,.75), 0 0 0 0 rgba(255,107,53,.5);
    backdrop-filter:none; -webkit-backdrop-filter:none;}
.pbx .mvid-poster.has-art .mvid-playbtn svg{width:40%; height:40%; margin-left:6%;}
.pbx .mvid-poster.has-art:hover .mvid-playbtn{transform:translate(-50%,-50%) scale(1.12);
    box-shadow:0 18px 52px -8px rgba(255,107,53,.9);}
.pbx .mvid-poster.has-art .mvid-playbtn.pulse{width:clamp(64px,13cqw,96px); height:clamp(64px,13cqw,96px); animation:playPulseArt 2.2s ease-out infinite;}
@keyframes playPulseArt{0%{ box-shadow:0 14px 40px -8px rgba(255,107,53,.75), 0 0 0 0 rgba(255,107,53,.55); }
    70%{ box-shadow:0 14px 40px -8px rgba(255,107,53,.75), 0 0 0 26px rgba(255,107,53,0); }
    100%{ box-shadow:0 14px 40px -8px rgba(255,107,53,.75), 0 0 0 0 rgba(255,107,53,0); }}
@media (prefers-reduced-motion: reduce){.pbx .mvid-poster.has-art .mvid-playbtn.pulse{animation:none}}
.pbx .quiz-result.quiz-passed{color:#15803d}
.pbx .quiz-result.quiz-failed{color:var(--orange-dark)}
.pbx .quiz-retry{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
    margin-top:14px;padding:14px 16px;border-radius:var(--r-md,12px);
    background:var(--orange-light);border:1px solid rgba(255,107,53,.28);}
.pbx .quiz-retry .qr-txt{font-size:13.5px;font-weight:600;color:var(--orange-dark)}
.pbx .quiz-retry .qr-actions{display:flex;gap:10px;flex-wrap:wrap}
.pbx .quiz-retry .btn{padding:9px 18px;font-size:13px}
.pbx .quiz-retry .btn-ghost{background:transparent;border:1.5px solid rgba(255,107,53,.42);
    color:var(--orange-dark);border-radius:99px;font-weight:700;cursor:pointer;}
.pbx .quiz-retry .btn-ghost:hover{background:rgba(255,107,53,.10)}
[data-theme="dark"] .pbx .quiz-retry{background:rgba(255,107,53,.10)}
[data-theme="dark"] .pbx .quiz-retry .qr-txt, [data-theme="dark"] .pbx .quiz-retry .btn-ghost{color:#ffb38a}
[data-theme="dark"] .pbx .quiz-result.quiz-passed{color:#4ade80}
@media (max-width:640px){.pbx .quiz-retry{flex-direction:column;align-items:flex-start}.pbx .quiz-retry .qr-actions{width:100%}.pbx .quiz-retry .btn{flex:1 1 auto}}
.pbx .cw-wrap{max-width:1180px;margin:26px auto 4px;padding:0 8px}
.pbx .cw-head{font-size:1rem;font-weight:800;color:var(--navy);margin-bottom:12px}
.pbx .cw-rail{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.pbx .cw-card{flex:0 0 220px;scroll-snap-align:start;text-align:left;cursor:pointer;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
    padding:14px 16px;display:flex;flex-direction:column;gap:6px;transition:all var(--pbt);}
.pbx .cw-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--orange)}
.pbx .cw-num{font-size:11px;font-weight:800;color:var(--orange-dark)}
.pbx .cw-title{font-weight:700;font-size:13px;color:var(--navy);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pbx .cw-meta{font-size:11.5px;color:var(--text-muted)}
.pbx .cw-bar{height:4px;border-radius:99px;background:#e5e7eb;overflow:hidden;margin-top:2px}
.pbx .cw-bar > i{display:block;height:100%;background:var(--orange)}
[data-theme="dark"] .pbx .msec-head:hover, [data-theme="dark"] .pbx .hero-panel-head:hover{background:rgba(255,107,53,0.12)}
[data-theme="dark"] .pbx .msec{background:var(--bg-2);border-color:var(--border)}
[data-theme="dark"] .pbx .acc-status .chip.todo{background:var(--surface-2);color:var(--text-muted)}
[data-theme="dark"] .pbx .mod-progress-bar, [data-theme="dark"] .pbx .cw-bar{background:var(--surface-2)}
[data-theme="dark"] .pbx .cw-card{background:var(--bg-2)}
@media (max-width:880px){.pbx .mod-hero-side{grid-template-columns:1fr}.pbx .msec-head{padding:13px 14px}.pbx .msec-inner{padding:0 14px}.pbx .msec.open .msec-inner{padding:2px 14px 14px}}
@media (max-width:768px){.pbx .cw-card{flex-basis:180px}}
[data-theme="dark"] .pbx .msec-head, [data-theme="dark"] .pbx .msec-label, [data-theme="dark"] .pbx .hero-panel-head, [data-theme="dark"] .pbx .mod-progress-head, [data-theme="dark"] .pbx .acc-title, [data-theme="dark"] .pbx .hero-learn-label, [data-theme="dark"] .pbx .cw-head, [data-theme="dark"] .pbx .cw-title{color:var(--text)}
.pbx .sol-hero{max-width:760px;margin:6px auto 26px;text-align:center;padding:0 16px}
.pbx .sol-hero h1{font-size:clamp(24px,3.4vw,34px);font-weight:800;letter-spacing:-.02em;margin:0 0 8px;color:var(--text,#0f1b2d)}
.pbx .sol-hero p{color:var(--text-muted,#5a6b7e);font-size:15px;margin:0}
.pbx .sol-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px 20px;display:flex;flex-direction:column;box-shadow:0 8px 26px rgba(16,27,45,.06);transition:transform .2s,box-shadow .2s}
.pbx .sol-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(16,27,45,.12)}
.pbx .sol-tag{color:var(--orange,#ff6b35);font-weight:700;font-size:12.5px;margin:4px 0 10px}
.pbx .nav-solutions-btn .nav-star, .pbx .sol-card *{box-sizing:border-box}
@keyframes vpFadeDown{from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; }}
@keyframes vpRise{from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; }}
.pbx .vpa-chip-good{background:color-mix(in srgb,#22c55e 20%,transparent); border:1px solid color-mix(in srgb,#22c55e 55%,transparent); color:#c9f7d8;}
@keyframes vpaDotIn{from{ opacity:0; transform:scale(.2); transform-origin:center; } to{ opacity:1; transform:scale(1); }}
@keyframes vpaGrow{from{ opacity:0; transform:scaleY(.05); } to{ opacity:1; transform:scaleY(1); }}
.pbx .vpa-bar-row{animation:vpaSlideIn .45s cubic-bezier(.22,1,.36,1) backwards; animation-delay:calc(.13s * var(--i));}
.pbx .vpa-bar{fill:#34d399; transform-origin:left center; animation:vpaWide .6s cubic-bezier(.22,1,.36,1) backwards;
    animation-delay:calc(.13s * var(--i) + .1s);}
.pbx .vpa-bar.neg{fill:rgba(255,120,120,.85);}
.pbx .vpa-bar-lbl{fill:rgba(255,255,255,.8); font-size:8px; font-weight:700;}
.pbx .vpa-bar-val{fill:#34d399; font-size:8px; font-weight:800;}
.pbx .vpa-bar-val.neg{fill:rgba(255,140,140,.95);}
@keyframes vpaSlideIn{from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:none; }}
@keyframes vpaWide{from{ transform:scaleX(0); } to{ transform:scaleX(1); }}
@keyframes vpaSweep{to{ stroke-dashoffset:var(--off); }}
@keyframes vpaNeedle{from{ transform:rotate(-120deg); } to{ transform:rotate(var(--ang)); }}
.pbx .vpa-flow-node{animation:vpaPopIn .45s cubic-bezier(.34,1.56,.64,1) backwards; animation-delay:calc(.2s * var(--i));}
.pbx .vpa-flow-node circle{fill:color-mix(in srgb,var(--vacc) 26%,transparent); stroke:var(--vacc); stroke-width:2;}
.pbx .vpa-flow-no{fill:#fff; font-weight:900; font-size:13px; text-anchor:middle;}
.pbx .vpa-flow-lbl{fill:rgba(255,255,255,.8); font-size:8px; font-weight:700; text-anchor:middle;}
.pbx .vpa-flow-link{stroke:rgba(255,255,255,.32); stroke-width:2; stroke-dasharray:60; stroke-dashoffset:60;
    animation:vpaDraw .45s ease backwards forwards; animation-delay:calc(.2s * var(--i) - .08s);}
@keyframes vpaDraw{to{ stroke-dashoffset:0; }}
@keyframes vpaPopIn{from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:scale(1); }}
.pbx .vpa-stk-bar{fill:rgba(255,120,120,.24); stroke:rgba(255,140,140,.5); stroke-width:1;}
@keyframes vpaDrop{from{ opacity:0; transform:translateY(-14px); } to{ opacity:1; transform:none; }}
.pbx .vpa-sp-panel{fill:rgba(255,255,255,.05); stroke-width:1.5;}
.pbx .vpa-sp-panel.bad{stroke:rgba(255,120,120,.5);}
.pbx .vpa-sp-panel.good{stroke:rgba(52,211,153,.6);}
@keyframes vpaSlideInR{from{ opacity:0; transform:translateX(12px); } to{ opacity:1; transform:none; }}
@keyframes vpaPulse2{0%,100%{ opacity:.55; } 50%{ opacity:1; }}
@keyframes vpaSpin{to{ transform:rotate(360deg); }}
@keyframes vpaFloat{0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2.5px); }}
@keyframes vpaBreathe{0%,100%{ opacity:.75; } 50%{ opacity:1; }}
@keyframes vpaDriftX{0%{ transform:translateX(0); } 100%{ transform:translateX(190px); }}
@keyframes vpaSpinSlow{to{ transform:rotate(360deg); }}
@keyframes vpaDripFall{0%{ transform:translateY(0); opacity:0; } 15%{ opacity:1; }
    100%{ transform:translateY(26px); opacity:0; }}
@keyframes vpaRiseUp{from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; }}
.pbx .vpa-tag{fill:rgba(255,255,255,.07); stroke:rgba(255,150,150,.6); stroke-width:1.4;}
.pbx .vpa-tag-hole{fill:rgba(255,150,150,.6);}
@keyframes vpaDrain{0%{ transform:translateY(0); } 100%{ transform:translateY(14px); opacity:.4; }}
@keyframes vpaFogIn{from{ opacity:0; transform:translateX(10px); } to{ opacity:1; transform:none; }}
.pbx .vpa-badge{fill:var(--vacc); animation:vpaBreathe 2.6s ease-in-out infinite;
    animation-delay:calc(.4s * var(--i));}
.pbx .vpa-pt-tag{fill:rgba(255,255,255,.07); stroke:var(--vacc); stroke-width:1.6;
    animation:vpaSlideIn .5s cubic-bezier(.22,1,.36,1) backwards;}
.pbx .vpa-hero .vpa-hero-hub{animation:vpaFloat 3.2s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){.pbx .vpa-shopper, .pbx .vpa-drip, .pbx .vpa-gear, .pbx .vpa-jar-fill, .pbx .vpa-guess-q, .pbx .vpa-pupil, .pbx .vpa-ai-core, .pbx .vpa-badge, .pbx .vpa-shop.hl .vpa-shop-body, .pbx .vpa-launch .vpa-rocket, .pbx .vpa-hero .vpa-hero-hub{animation:none !important;}}
.pbx .vpa-se-bar{fill:rgba(255,255,255,.08); stroke:rgba(255,255,255,.36); stroke-width:1.4;}
.pbx .vpa-ad-badge{fill:color-mix(in srgb,var(--vacc) 55%,transparent);}
.pbx .vpa-ad-flow{fill:none; stroke:var(--vacc); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:40; stroke-dashoffset:40; animation:vpaDraw .45s ease .45s forwards;}
@keyframes vpaCoinRun{0%{ transform:translateX(0); opacity:0; } 12%{ opacity:1; }
    70%{ transform:translateX(30px); opacity:1; } 100%{ transform:translateX(38px); opacity:0; }}
@keyframes vpaTapPulse{0%,100%{ transform:scale(1); } 50%{ transform:scale(.88); }}
.pbx .vpa-rv-card rect:first-of-type{fill:rgba(255,255,255,.06);}
.pbx .vpa-rv-card circle{fill:rgba(255,255,255,.24);}
.pbx .vpa-rv-card{animation:vpaSlideIn .45s ease backwards; animation-delay:calc(.15s * var(--i) + .5s);}
@keyframes vpaStamp{from{ opacity:0; transform:scale(1.7) rotate(-12deg); } to{ opacity:1; transform:none; }}
@keyframes vpaTapRing{0%{ opacity:.9; transform:scale(.3); } 70%{ opacity:0; transform:scale(1.5); } 100%{ opacity:0; }}
.pbx .pb-hero{max-width:760px;margin:6px auto 22px;text-align:center;padding:0 16px}
.pbx .pb-hero h1{font-size:clamp(24px,3.4vw,34px);font-weight:800;letter-spacing:-.02em;
  margin:0 0 8px;color:var(--text,#0f1b2d)}
.pbx .pb-hero p{color:var(--text-muted,#5a6b7e);font-size:15px;line-height:1.6;margin:0}
.pbx .pb-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;
  max-width:1140px;margin:0 auto 20px;padding:0 16px}
.pbx .pb-stats > div{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:14px 16px;text-align:center}
.pbx .pb-stats b{display:block;font-size:24px;font-weight:800;line-height:1.1;letter-spacing:-.02em;
  color:var(--text,#0f1b2d)}
.pbx .pb-stats span{display:block;margin-top:5px;font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-muted,#5a6b7e)}
.pbx .pb-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:0 8px 26px rgba(16,27,45,.06);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.pbx a.pb-card:hover{transform:translateY(-4px);border-color:transparent;
  box-shadow:0 18px 38px -14px rgba(15,23,42,.34)}
.pbx a.pb-card:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
[data-theme="dark"] .pbx a.pb-card:hover{box-shadow:0 18px 38px -14px rgba(0,0,0,.6)}
.pbx a.pb-card:hover .pb-art{transform:scale(1.04)}
.pbx .pb-badge{position:absolute;top:10px;right:10px;padding:5px 9px;border-radius:99px;
  background:rgba(255,255,255,.92);color:#0f172a;
  font-size:9.5px;font-weight:700;line-height:1;letter-spacing:.09em;text-transform:uppercase}
.pbx .pb-chip{padding:5px 9px;border-radius:99px;white-space:nowrap;
  background:var(--surface-2);border:1px solid var(--border);
  font-size:10.5px;font-weight:600;line-height:1;color:var(--text-2,#41546b)}
.pbx a.pb-card:hover .pb-cta svg{transform:translateX(3px)}
.pbx .pb-card.is-here{border-style:dashed;background:var(--surface-2)}
.pbx .pb-card.is-here .pb-art{opacity:.62}
@supports (padding: env(safe-area-inset-left)){.pbx .sidebar{padding-left: env(safe-area-inset-left);}.pbx .top-header{padding-right: env(safe-area-inset-right);}.pbx .main-content{padding-bottom: env(safe-area-inset-bottom);}}
@media (max-width: 768px){.pbx .nav-list li, .pbx .nav-home-btn, .pbx .sidebar-footer-btn, .pbx .nav-group-header{min-height: 44px;}.pbx .sidebar-collapse-btn, .pbx .header-action-btn, .pbx .qa-card{min-height: 44px; min-width: 44px;}.pbx .ai-panel{max-height: calc(100dvh - 140px);}.pbx .content-scrollable, .pbx .nav-list, .pbx .sidebar{-webkit-overflow-scrolling: touch;}}
@media (max-height: 430px) and (orientation: landscape){.pbx .top-header{position: static;}.pbx .hero-banner{padding-top: 12px; padding-bottom: 12px;}}
@keyframes smtIn{from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; }}
@keyframes smtRip{0% { opacity: 0; transform: scale(.5); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15); }}
@keyframes smtFade{from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; }}
@keyframes smtPop{from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; }}
@keyframes smtPop{0% { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; }}
@keyframes smtGlow{0%,100% { box-shadow: 0 0 0 0 rgba(255,107,53,.55); } 50% { box-shadow: 0 0 24px 6px rgba(255,107,53,.35); }}
@keyframes smtConfetti{0%   { transform: translate(0,0) rotate(0); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) rotate(540deg); opacity: 0; }}
@keyframes smtRestartHint{0%{ box-shadow:0 0 0 0 rgba(255,107,53,.55); }
    70%{ box-shadow:0 0 0 12px rgba(255,107,53,0); }
    100%{ box-shadow:0 0 0 0 rgba(255,107,53,0); }}
.pbx #account.module{padding:0!important;max-width:none!important;background:transparent!important;border:0!important;box-shadow:none!important}
@keyframes acctPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.pbx .pai-hero{position: relative; border-radius: 22px; padding: 34px 34px 30px; margin-bottom: 22px; overflow: hidden;
  background: radial-gradient(1100px 380px at 82% -30%, rgba(255,107,53,.30), transparent 58%), linear-gradient(150deg, #1a3a5c 0%, #122c47 45%, #0b1a2c 100%);
  color: #fff; border: 1px solid rgba(255,255,255,.06); box-shadow: 0 24px 60px -30px rgba(6,14,26,.75);}
.pbx .pai-hero::after{content: ""; position: absolute; inset: 0; background: radial-gradient(620px 280px at 8% 128%, rgba(37,99,235,.30), transparent 60%); pointer-events: none;}
.pbx .pai-hero-badge{display: inline-block; font-weight: 800; letter-spacing: .04em; font-size: 12.5px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); margin-bottom: 16px;}
.pbx .pai-hero-title{color: #fff !important; font-family: 'Outfit', system-ui, sans-serif; font-weight: 900; font-size: clamp(24px, 3.6vw, 40px); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 12px; max-width: 20ch;}
.pbx .pai-hero-title span{color: #ffb493; background: linear-gradient(90deg, #ff9d6c, #ff6b35); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.pbx .pai-hero-sub{font-size: 15px; line-height: 1.6; color: #dbe7f4; max-width: 76ch; margin: 0; position: relative;}
.pbx .pai-btn{display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; padding: 11px 18px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; transition: transform .12s, box-shadow .18s, background .18s; white-space: nowrap;}
.pbx .pai-btn:hover{transform: translateY(-1px); box-shadow: 0 8px 20px -12px rgba(0,0,0,.4);}
.pbx .pai-btn-primary{background: linear-gradient(135deg, #ff7a45, #ff6b35); color: #fff; border-color: transparent; box-shadow: 0 10px 24px -12px rgba(255,107,53,.8);}
.pbx .pai-btn-ghost{background: var(--surface);}
.pbx .pai-btn-sm{padding: 7px 12px; font-size: 12.5px; border-radius: 9px;}
.pbx .pai-btn[disabled]{opacity: .55; cursor: not-allowed; transform: none;}
.pbx .pai-upload-card{position: relative; overflow: hidden; border-radius: 20px; border: 1px solid rgba(255,255,255,.09);
  background-color: #0e2439; background-image: var(--pai-banner, none); background-size: cover; background-position: right center; background-repeat: no-repeat;
  min-height: 300px; display: flex; align-items: center; transition: box-shadow .2s, border-color .2s; box-shadow: 0 20px 50px -28px rgba(6,14,26,.7);}
.pbx .pai-upload-card::before{content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(103deg, rgba(8,17,31,.97) 0%, rgba(11,24,42,.94) 40%, rgba(11,24,42,.62) 58%, rgba(11,24,42,.14) 76%, rgba(11,24,42,0) 100%);}
.pbx .pai-upload-card.drag{border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,107,53,.4), 0 20px 50px -28px rgba(6,14,26,.7);}
.pbx .pai-upload-card.drag::before{background: linear-gradient(103deg, rgba(8,17,31,.95) 0%, rgba(38,20,8,.6) 55%, rgba(255,107,53,.14) 100%);}
.pbx .pai-up-content{position: relative; z-index: 1; padding: 32px 34px; max-width: 60%;}
.pbx .pai-upload-card h2{font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 24px; margin: 0 0 8px; color: #fff;}
.pbx .pai-up-chips{display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap;}
.pbx .pai-up-chip{font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 3px 9px; border-radius: 6px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #dbe7f4;}
.pbx .pai-upload-card .pai-btn-ghost{background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); color: #fff;}
.pbx .pai-upload-card .pai-btn-ghost:hover{background: rgba(255,255,255,.2);}
.pbx .pai-up-status{display: flex; align-items: center; gap: 10px; margin-top: 16px; font-weight: 600; color: #dbe7f4;}
@keyframes pai-spin{to { transform: rotate(360deg); }}
@media (max-width: 780px){.pbx .pai-up-content{max-width: 100%; padding: 26px 22px;}.pbx .pai-upload-card{background-position: 78% center;}.pbx .pai-upload-card::before{background: linear-gradient(158deg, rgba(8,17,31,.96) 0%, rgba(11,24,42,.9) 55%, rgba(11,24,42,.78) 100%);}}
.pbx .pai-req-card{border: 1px solid rgba(255,107,53,.35); background: rgba(255,107,53,.06); border-radius: 11px; padding: 11px 13px;}
.pbx .pai-req-card b{display: block; font-size: 13.5px; color: var(--text); margin-bottom: 2px;}
.pbx .pai-req-card span{font-size: 12px; color: var(--text-muted); line-height: 1.4;}
.pbx .pai-gchips{display: flex; flex-wrap: wrap; gap: 6px;}
.pbx .pai-gchip{font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 8px; background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.25); color: var(--text-2); cursor: help;}
.pbx .pai-err-tag{font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: rgba(220,38,38,.14); color: #b91c1c; white-space: nowrap;}
.pbx .pai-err-tag.warn{background: rgba(217,119,6,.14); color: #b45309;}
.pbx .pai-toolbar{display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); margin-bottom: 18px; position: sticky; top: 8px; z-index: 6; box-shadow: 0 8px 24px -18px rgba(0,0,0,.4);}
.pbx .pai-kpi-grid{display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;}
.pbx .pai-kpi{position: relative; border-radius: 14px; padding: 15px 16px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: transform .12s, box-shadow .18s;}
.pbx .pai-kpi:hover{transform: translateY(-2px); box-shadow: 0 14px 30px -20px rgba(0,0,0,.5);}
.pbx .pai-kpi::before{content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--border);}
.pbx .pai-kpi.good::before{background: var(--pai-good);}
.pbx .pai-kpi.bad::before{background: var(--pai-bad);}
.pbx .pai-kpi.warn::before{background: var(--pai-warn);}
.pbx .pai-kpi-label{font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700;}
.pbx .pai-kpi-val{font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 23px; margin-top: 5px; color: var(--text); letter-spacing: -.01em;}
.pbx .pai-kpi.good .pai-kpi-val{color: var(--pai-good);}
.pbx .pai-kpi.bad .pai-kpi-val{color: var(--pai-bad);}
.pbx .pai-kpi.warn .pai-kpi-val{color: var(--pai-warn);}
.pbx .pai-kpi-sub{font-size: 11.5px; color: var(--text-muted); margin-top: 3px;}
.pbx .pai-kpi-gauge{display: flex; align-items: center; justify-content: space-between;}
.pbx .pai-gauge-ring{width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;}
.pbx .pai-gauge-ring::before{content: ""; position: absolute; width: 44px; height: 44px; border-radius: 50%; background: var(--surface);}
.pbx .pai-gauge-ring span{position: relative; font-weight: 800; font-family: 'Outfit', sans-serif; font-size: 16px; color: var(--text);}
.pbx .pai-empty{color: var(--text-muted); text-align: center; padding: 14px; font-size: 12.5px;}
.pbx .pai-abc-row{display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-2);}
.pbx .pai-abc-tag{width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-weight: 800; color: #fff; flex-shrink: 0;}
.pbx .pai-abc-tag.a{background: #16a34a;}
.pbx .pai-abc-tag.b{background: #2563eb;}
.pbx .pai-abc-tag.c{background: #d97706;}
.pbx .pai-abc-bar{flex: 1; height: 9px; background: var(--surface-2); border-radius: 999px; overflow: hidden; min-width: 60px;}
.pbx .pai-abc-bar i{display: block; height: 100%; border-radius: 999px;}
.pbx .pai-exec-card{border-radius: 12px; padding: 14px; border: 1px solid var(--border);}
.pbx .pai-exec-card.up{background: rgba(22,163,74,.06); border-color: rgba(22,163,74,.3);}
.pbx .pai-exec-card.mid{background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.3);}
.pbx .pai-exec-card.down{background: rgba(220,38,38,.06); border-color: rgba(220,38,38,.3);}
.pbx .pai-exec-card h5{margin: 0 0 10px; font-size: 13.5px; color: var(--text);}
.pbx .pai-chips{display: flex; flex-wrap: wrap; gap: 6px;}
.pbx .pai-chip{font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 7px; cursor: pointer; background: var(--surface); border: 1px solid var(--border); color: var(--text-2);}
.pbx .pai-chip:hover{border-color: var(--orange); color: var(--orange);}
.pbx .pai-chip.up{color: #15803d;}
.pbx .pai-chip.mid{color: #1d4ed8;}
.pbx .pai-chip.down{color: #b91c1c;}
.pbx .pai-chip-empty{font-size: 12px; color: var(--text-muted);}
.pbx .pai-opp-card{background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px;}
.pbx .pai-opp-t{font-size: 12px; color: var(--text-muted); font-weight: 700;}
.pbx .pai-opp-big{font-family: 'Outfit', sans-serif; font-size: 21px; font-weight: 800; color: var(--orange); margin: 4px 0 2px;}
.pbx .pai-opp-sub{font-size: 11.5px; color: var(--text-muted);}
.pbx .pai-pg-btns{display: flex; align-items: center; gap: 8px;}
.pbx .pai-d-hero{display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px;}
.pbx .pai-d-badge{align-self: flex-start; font-weight: 800; font-size: 13px; padding: 6px 14px; border-radius: 999px;}
.pbx .pai-d-card{background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 15px 16px;}
.pbx .pai-d-card h5{margin: 0 0 12px; font-size: 13.5px; color: var(--text);}
@media (max-width: 1080px){.pbx .pai-kpi-grid, .pbx .pai-insight-grid{grid-template-columns: repeat(3, 1fr);}}
@media (max-width: 780px){.pbx .pai-hero{padding: 26px 20px;}.pbx .pai-kpi-grid, .pbx .pai-insight-grid{grid-template-columns: repeat(2, 1fr);}.pbx .pai-toolbar{position: static;}}
@media (max-width: 480px){.pbx .pai-kpi-grid, .pbx .pai-insight-grid{grid-template-columns: 1fr 1fr;}}
@keyframes cineRule{to{ transform:scaleX(1); }}
@keyframes cineWord{to{ transform:none; opacity:1; }}
@keyframes cineRise{to{ opacity:1; transform:none; }}
@keyframes cineSlide{to{ opacity:1; transform:none; }}
@keyframes cineWipe{to{ width:76%; }}
@keyframes cineBurns{from{ transform:scale(1) translateY(0); } to{ transform:scale(1.035) translateY(-.6cqh); }}
.pbx .vpa-li-badge{fill:rgba(255,107,53,.9);}
.pbx .vpa-ad-bar{fill:rgba(255,255,255,.07); stroke:rgba(255,255,255,.2); stroke-width:1;}
.pbx .vpa-rv-rate{font-family:'Outfit',sans-serif; font-size:12px; font-weight:900; fill:var(--cine-orange);}
@keyframes vpaFadeIn{from{ opacity:0; } to{ opacity:1; }}
.pbx '
        + '.save-btn{display:none!important}
.pbx .tag{background:#dcfce7;color:#166534;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700}



/* ------------------------------------------- rail footer: the one CTA
   Request Services is the only commercial action in the rail, so it is the
   only filled item; the marketplace link sits under it as a quiet outline.
   Mirrors what the bridge injects into the eight builds so the nine rails
   read as one product. */
.sidebar-footer-btn.sf-cta {
  /* --orange-btn / --orange-btn-2: the darker orange this system already
     chose for white ink. The brand #fe7807 carries white at 2.66:1. */
  background: linear-gradient(180deg, var(--orange-btn, #c25200),
                              var(--orange-btn-2, #aa4600));
  color: #fff; font-weight: 700;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px;
  box-shadow: 0 2px 10px rgba(254, 120, 7, .32);
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease;
}
.sidebar-footer-btn.sf-cta:hover {
  background: linear-gradient(180deg, #ff8b26, #f06d00);
  transform: translateY(-1px); box-shadow: 0 6px 18px rgba(254, 120, 7, .42);
}
.sidebar-footer-btn.sf-cta:active { transform: translateY(0); }
.sidebar-footer-btn.sf-quiet {
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px;
  transition: background-color .18s ease, border-color .18s ease;
}
.sidebar-footer-btn.sf-quiet:hover {
  background: rgba(254, 120, 7, .12); border-color: rgba(254, 120, 7, .45);
}

/* ------------------------------------------------------------- bookmarks
   The save control sits in the lesson's badge row, so it is sized to the
   badges beside it rather than to a button elsewhere on the page. */
.pbx .bm-toggle{display:inline-flex;align-items:center;gap:6px;
    padding:4px 11px;border-radius:999px;cursor:pointer;
    border:1px solid rgba(254,120,7,.42);background:rgba(254,120,7,.10);
    color:#c2410c;font:inherit;font-size:12px;font-weight:700;line-height:1.6;
    transition:background .15s ease,border-color .15s ease,color .15s ease;}
.pbx .bm-toggle:hover{background:rgba(254,120,7,.20);border-color:rgba(254,120,7,.65);}
.pbx .bm-toggle .bm-ico{font-size:13px;line-height:1;}
/* Saved is the filled state - the control reads as on, not as a second action */
.pbx .bm-toggle.is-on{background:linear-gradient(135deg,#fe7807,#e06400);
    border-color:transparent;color:#fff;}
.pbx .bm-toggle:disabled{opacity:.6;cursor:default;}
[data-theme="dark"] .pbx .bm-toggle{color:#fdba74;}
[data-theme="dark"] .pbx .bm-toggle.is-on{color:#fff;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pbx .bm-toggle{color:#fdba74;}
  :root:not([data-theme="light"]) .pbx .bm-toggle.is-on{color:#fff;}
}

/* === GENERATED: prefers-color-scheme mirror — do not edit by hand === */
/* Mirrors every [data-theme="dark"] rule above so it also applies when
   the OS is in dark mode and the user has made no explicit choice in the
   app. Without this the tokens flip and the component overrides do not,
   which is what put near-white text on a hard-coded white header.
   Regenerate with: python tools/fix_dark_media.py */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pbx { --bg:           #0a0f1c; --bg-2:         #0d1424; --surface:      #111a2c; --surface-2:    #0e1626; --surface-glass: rgba(17,26,44,0.72); --border:       #1f2a44; --border-light: #18223a; --border-glass: rgba(255,255,255,0.06); --text:        #f1f5f9; --text-2:      #cbd5e1; --text-muted:  #94a3b8; --text-light:  #64748b; --navy:        #e2e8f0; --navy-dark:   #cbd5e1; --orange-light:#2a1810; --success-bg:  #052e1a; --warning-bg:  #2a1a06; --danger-bg:   #2a0a0a; --info-bg:     #06243a; --sh-sm: 0 1px 3px 0 rgba(0,0,0,0.4), 0 1px 2px -1px rgba(0,0,0,0.4); --sh:    0 4px 12px -2px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.4); --sh-lg: 0 12px 28px -6px rgba(0,0,0,0.55), 0 6px 10px -6px rgba(0,0,0,0.45); --sh-xl: 0 24px 48px -12px rgba(0,0,0,0.7); --sh-ring: inset 0 0 0 1px rgba(255,255,255,0.05); }
  :root:not([data-theme="light"]) .pbx .main-content::before { opacity:0.35 }
  :root:not([data-theme="light"]) .pbx .theme-toggle-btn .icon-moon { display:none }
  :root:not([data-theme="light"]) .pbx .theme-toggle-btn .icon-sun { display:block }
  :root:not([data-theme="light"]) .pbx .user-menu button { color:var(--text) }
  :root:not([data-theme="light"]) .pbx .content-scrollable::-webkit-scrollbar-thumb { background:#334155;border-color:var(--bg) }
  :root:not([data-theme="light"]) .pbx .module-section { background:var(--surface);border-color:var(--border) }
  :root:not([data-theme="light"]) .pbx .module-header { background:linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 100%) }
  :root:not([data-theme="light"]) .pbx .overview-content { background:linear-gradient(135deg,var(--surface-2) 0%,rgba(255,107,53,0.06) 100%) }
  :root:not([data-theme="light"]) .pbx .feedback-container, :root:not([data-theme="light"]) .pbx .video-container, :root:not([data-theme="light"]) .pbx .yt-card, :root:not([data-theme="light"]) .pbx .quiz-q, :root:not([data-theme="light"]) .pbx .tool-result, :root:not([data-theme="light"]) .pbx .svg-wrapper { background:var(--surface-2);border-color:var(--border) }
  :root:not([data-theme="light"]) .pbx .quiz-container, :root:not([data-theme="light"]) .pbx .mod-progress, :root:not([data-theme="light"]) .pbx .hero-panel, :root:not([data-theme="light"]) .pbx .bookmarks-inline, :root:not([data-theme="light"]) .pbx .progress-stats-box, :root:not([data-theme="light"]) .pbx .tool-container { background:var(--bg-2);border-color:var(--border) }
  :root:not([data-theme="light"]) .pbx .data-table { border-color:var(--border) }
  :root:not([data-theme="light"]) .pbx .data-table td { border-bottom-color:var(--border-light);color:var(--text-2) }
  :root:not([data-theme="light"]) .pbx .data-table tbody tr:nth-child(even) { background:var(--surface-2) }
  :root:not([data-theme="light"]) .pbx .data-table tbody tr:hover { background:rgba(255,107,53,0.08) }
  :root:not([data-theme="light"]) .pbx .acc-header { background:var(--bg-2);color:var(--text) }
  :root:not([data-theme="light"]) .pbx .pill { background:var(--bg-2);color:var(--text);border-color:var(--border) }
  :root:not([data-theme="light"]) .pbx .pillar-card { background:var(--surface-2);border-color:var(--border) }
  :root:not([data-theme="light"]) .pbx .qa-card { background:var(--surface);border-color:var(--border) }
  :root:not([data-theme="light"]) .pbx .trust-bar { background:rgba(17,26,44,0.6) }
  :root:not([data-theme="light"]) .pbx .qa-title, :root:not([data-theme="light"]) .pbx .dash-sh-title, :root:not([data-theme="light"]) .pbx .trust-item, :root:not([data-theme="light"]) .pbx .user-badge { color:var(--text) }
  :root:not([data-theme="light"]) .pbx .badge-diff { background:#1f2937;color:#cbd5e1 }
  :root:not([data-theme="light"]) .pbx .nav-list li { color:rgba(255,255,255,0.62) }
  :root:not([data-theme="light"]) .pbx .callout.pro-tip { background:linear-gradient(135deg,rgba(255,107,53,0.16) 0%,var(--surface-2) 100%);border-color:rgba(255,107,53,0.3) }
  :root:not([data-theme="light"]) .pbx .callout.warning { background:linear-gradient(135deg,rgba(245,158,11,0.16) 0%,var(--surface-2) 100%);border-color:rgba(245,158,11,0.3) }
  :root:not([data-theme="light"]) .pbx .callout.success { background:linear-gradient(135deg,rgba(34,197,94,0.16) 0%,var(--surface-2) 100%);border-color:rgba(34,197,94,0.3) }
  :root:not([data-theme="light"]) .pbx .callout.info { background:linear-gradient(135deg,rgba(56,189,248,0.16) 0%,var(--surface-2) 100%);border-color:rgba(56,189,248,0.3) }
  :root:not([data-theme="light"]) .pbx .callout, :root:not([data-theme="light"]) .pbx .callout * { color:var(--text-2) }
  :root:not([data-theme="light"]) .pbx .pain-point-section { border-color:var(--border) }
  :root:not([data-theme="light"]) .pbx .pp-card { border-right-color:var(--border) }
  :root:not([data-theme="light"]) .pbx .pp-card p { color:var(--text-2) }
  :root:not([data-theme="light"]) .pbx .pp-pain { background:rgba(239,68,68,0.10) }
  :root:not([data-theme="light"]) .pbx .pp-solution { background:rgba(34,197,94,0.10) }
  :root:not([data-theme="light"]) .pbx .pp-insight { background:rgba(56,189,248,0.10) }
  :root:not([data-theme="light"]) .pbx .pp-pain .pp-card-label { color:#f87171 }
  :root:not([data-theme="light"]) .pbx .pp-solution .pp-card-label { color:#4ade80 }
  :root:not([data-theme="light"]) .pbx .pp-insight .pp-card-label { color:#38bdf8 }
  :root:not([data-theme="light"]) .pbx .badge-advanced { background:rgba(245,158,11,0.18);color:#fcd34d }
  :root:not([data-theme="light"]) .pbx .badge-expert { background:rgba(239,68,68,0.18);color:#fca5a5 }
  :root:not([data-theme="light"]) .pbx .svg-wrapper::before { color:var(--text-muted) }
  :root:not([data-theme="light"]) .pbx .plan-card { background:var(--bg-2) }
  :root:not([data-theme="light"]) .pbx .jp-card { background:linear-gradient(155deg,#0f1a2e 0%,#0b1322 130%) }
  :root:not([data-theme="light"]) .pbx .cstat { background:linear-gradient(160deg,#0f1a2e 0%,#0b1322 100%) }
  :root:not([data-theme="light"]) .pbx .pf-head { color:color-mix(in srgb, var(--pf-accent) 62%, #fff); }
  :root:not([data-theme="light"]) .pbx .pf-step { background:var(--surface-2) }
  :root:not([data-theme="light"]) .pbx .proc-flow { background:var(--surface) }
  :root:not([data-theme="light"]) .pbx .data-table th { background:#26334d; color:#f1f5f9; }
  :root:not([data-theme="light"]) .pbx .btn-secondary { background:#26334d; color:#fff; }
  :root:not([data-theme="light"]) .pbx .btn-secondary:hover { background:#30425f; }
  :root:not([data-theme="light"]) .pbx .quiz-retry { background:rgba(255,107,53,.10) }
  :root:not([data-theme="light"]) .pbx .quiz-retry .qr-txt, :root:not([data-theme="light"]) .pbx .quiz-retry .btn-ghost { color:#ffb38a }
  :root:not([data-theme="light"]) .pbx .quiz-result.quiz-passed { color:#4ade80 }
  :root:not([data-theme="light"]) .pbx .msec-head:hover, :root:not([data-theme="light"]) .pbx .hero-panel-head:hover { background:rgba(255,107,53,0.12) }
  :root:not([data-theme="light"]) .pbx .msec { background:var(--bg-2);border-color:var(--border) }
  :root:not([data-theme="light"]) .pbx .acc-status .chip.todo { background:var(--surface-2);color:var(--text-muted) }
  :root:not([data-theme="light"]) .pbx .mod-progress-bar, :root:not([data-theme="light"]) .pbx .cw-bar { background:var(--surface-2) }
  :root:not([data-theme="light"]) .pbx .cw-card { background:var(--bg-2) }
  :root:not([data-theme="light"]) .pbx .msec-head, :root:not([data-theme="light"]) .pbx .msec-label, :root:not([data-theme="light"]) .pbx .hero-panel-head, :root:not([data-theme="light"]) .pbx .mod-progress-head, :root:not([data-theme="light"]) .pbx .acc-title, :root:not([data-theme="light"]) .pbx .hero-learn-label, :root:not([data-theme="light"]) .pbx .cw-head, :root:not([data-theme="light"]) .pbx .cw-title { color:var(--text) }
  :root:not([data-theme="light"]) .pbx a.pb-card:hover { box-shadow:0 18px 38px -14px rgba(0,0,0,.6) }
  :root:not([data-theme="light"]) .pbx .bm-toggle { color:#fdba74; }
  :root:not([data-theme="light"]) .pbx .bm-toggle.is-on { color:#fff; }
}
/* === END GENERATED === */

/* ══════════════════════════════════════════════════════════════════════
   Interface standard — the same one the hosted Playbooks are held to.

   This file sets 46 font sizes below 12px, some as small as 9.5px, and no
   minimum height on any control. On a phone that reads as unreadable labels
   and targets a thumb misses. Rather than rewrite 46 declarations, the floor
   is applied once, here, at the end where it wins on order alone.
   ══════════════════════════════════════════════════════════════════════ */

/* a floor under the type, everywhere it is a label rather than prose */
.pbx .progress-label span, .pbx .progress-pct, .pbx .nav-group-title,
.pbx .nav-group-count, .pbx .nav-num, .pbx .hero-eyebrow,
.pbx .dash-sh-eyebrow, .pbx .badge, .pbx .data-table th,
.pbx .yt-card-label, .pbx .pp-card-label, .pbx .ov-badges span,
.pbx .aha-stat span, .pbx .plan-pill, .pbx .search-kbd,
.pbx .header-kbar .kbd {
  font-size: max(12px, 0.78rem);
  line-height: 1.35;
}

/* every control reachable with a thumb, where a thumb is what is used */
@media (max-width: 900px), (pointer: coarse) {
  .pbx a.btn, .pbx button.btn, .pbx .nav-item, .pbx .nav-list a,
  .pbx .chip, .pbx .plan-pill, .pbx .tab, .pbx .pill,
  .pbx [role="button"], .pbx .card-hover {
    min-height: 44px;
  }
  .pbx a.btn, .pbx button.btn, .pbx .chip, .pbx .tab, .pbx .pill {
    display: inline-flex; align-items: center; justify-content: center;
  }
  .pbx .nav-item, .pbx .nav-list a { display: flex; align-items: center; }
}

/* past this width the shell keeps filling the screen; the reading column
   inside it stops stretching */
@media (min-width: 1600px) {
  .pbx .main-pad, .pbx .pbx-main { max-width: 1480px; margin-inline: auto; }
}