/* ============================================================
   Nova — Customer Service (FAJER AL SALAMEEN)
   style.css — التصميم الكامل للواجهة
   يعتمد نظام Design Tokens عبر CSS Custom Properties في :root
   ============================================================ */
    :root {
      --navy: #0A6DCC;
      --navy-soft: #0D9488;
      --slate: #5B5A6E;
      --slate-soft: #8987A0;
      --bg: #F6F5FB;
      --card: #FFFFFF;
      --border: #E6E4F0;
      --brand-blue: #0A6DCC;
      --brand-teal: #0891B2;
      --text-main: #17172B;
      --coral: #E11D48;
      --gold: #0F766E;
      --gold-soft: #0D9488;
      --surface-soft: #F1F0F9;
      --shadow: 0 10px 28px rgba(30,20,70,.08);
      --panel-accent: #0d9488;
    }

    body.dark-mode {
      --navy: #0B84FF;
      --navy-soft: #14B8A6;
      --slate: #9B99AC;
      --slate-soft: #716F82;
      --bg: #08090C;
      --card: #131318;
      --border: #232329;
      --brand-blue: #0B84FF;
      --brand-teal: #22D3EE;
      --text-main: #F3F2EE;
      --gold: #10B981;
      --gold-soft: #5EEAD4;
      --surface-soft: #1A1A21;
      --shadow: 0 10px 30px rgba(0,0,0,.5);
      --panel-accent: #2dd4bf;
    }

    * { box-sizing: border-box; }
    /* The home page (header + full-screen hero) is designed to fit one screen —
       no scrolling needed there. Every other "page" (Scripts, Tech Issues, etc.)
       is its own fixed-position overlay with its own independent overflow-y:auto,
       so locking body scroll here doesn't affect scrolling inside them. */
    body { margin: 0; background: var(--bg); color: var(--text-main); font-family: 'Cairo', 'Inter', sans-serif; min-height: 100vh; overflow: hidden; transition: background 0.3s, color 0.3s; }
    /* Suspended for one frame during the dark/light toggle (see toggleTheme in
       app.js) so every element recolors together instead of a staggered wave. */
    html.theme-switching, html.theme-switching * { transition: none !important; animation-duration: 0s !important; }
    
    header {
      background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-teal) 100%);
      padding: 20px clamp(16px, 4vw, 52px);
      display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; position: relative; overflow: visible; z-index: 20;
    }
    .brand { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; flex-wrap: wrap; }
    .nova-wordmark { cursor: pointer; background: #fff; border-radius: 12px; padding: 8px 18px 9px; box-shadow: 0 2px 10px rgba(0,0,0,0.12); display: flex; flex-direction: column; align-items: center; line-height: 1; }
    /* Wordmark is drawn as an SVG (not type) so the ring "O", the smile mark and the
       letterforms match the brand logo exactly. font-size stays the sizing lever. */
    .nova-text { font-size: 26px; display: inline-flex; align-items: center; direction: ltr; }
    .nova-text .nova-logo { height: 1.4em; width: auto; display: block; overflow: visible; }
    @keyframes novaORingSpin { to { transform: rotate(360deg); } }
    .nova-sub { font-size: 7px; font-weight: 700; letter-spacing: 0.18em; color: #55697A; margin-top: 2px; text-transform: uppercase; }

    .project-seal { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 8px 16px; border: 1px solid rgba(255,255,255,0.22); border-radius: 8px; background: rgba(255,255,255,0.06); }
    .project-seal .eyebrow { font-size: 9.5px; letter-spacing: 0.12em; color: rgba(255,255,255,0.55); text-transform: uppercase; font-weight: 600; }
    .project-seal .name { font-size: 13px; color: #fff; font-weight: 700; }

    .controls { background: var(--card); border-bottom: 1px solid var(--border); padding: 16px clamp(16px,4vw,52px); position: sticky; top: 0; z-index: 10; }
    .search-row { display: flex; gap: 10px; margin-bottom: 12px; align-items: center; }
    input[type=text], input[type=password], select, textarea { flex: 1; border: 1.5px solid var(--border); border-radius: 9px; padding: 10px 14px; background: var(--bg); color: var(--text-main); font-size: 13.5px; font-family: inherit; }
    input[type=text]:focus, input[type=password]:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-blue); }
    
    .tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
    .tab { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: var(--slate); cursor: pointer; white-space: nowrap; border: 1px solid transparent; }
    .tab.active { background: var(--brand-blue); color: #fff; }
    .tab .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .tab.active .dot { background: #fff !important; }

    main { padding: 24px clamp(16px,4vw,52px) 60px; width: 100%; }
    .section { margin-bottom: 34px; }
    .section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
    .section-head .idx { font-size: 11px; font-weight: 700; color: #fff; width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
    .section-head h2 { font-size: 15px; margin: 0; font-weight: 700; color: var(--text-main); }

    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
    .card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
    .card::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; width: 100%; height: 4px; background: var(--card-accent, var(--navy)); }
    
    .card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--card-accent, var(--navy)); background: color-mix(in srgb, var(--card-accent, var(--navy)) 14%, transparent); padding: 3px 10px 3px 8px; border-radius: 999px; width: fit-content; }
    .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--card-accent, var(--navy)); flex-shrink: 0; }
    
    /* Usage badge shown only in Admin Mode */
    .usage-badge { font-size: 10.5px; font-weight: 700; color: #D97706; background: rgba(217, 119, 6, 0.12); padding: 3px 8px; border-radius: 5px; display: none; align-items: center; gap: 4px; }
    .admin-mode .usage-badge { display: inline-flex; }

    .card-title { font-weight: 700; font-size: 14.5px; margin: 0 0 8px; color: var(--text-main); }
    .card-text { font-size: 13px; line-height: 1.65; color: var(--slate); margin: 0 0 14px; flex: 1; white-space: pre-line; }
    
    /* Icon-only action buttons: a soft neutral circle at rest, the function's
       color only appears on hover/focus so the card-actions row stays quiet
       until you actually reach for it. title="" attributes on the buttons
       (see app.js) carry the label for accessibility/tooltips since there's
       no visible text. */
    .card-actions { justify-content: center; }
    .copy-btn, .edit-btn, .delete-btn {
      width: 38px; height: 38px; padding: 0; border-radius: 999px; cursor: pointer; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      background: var(--card); border: 1.5px solid var(--border); color: var(--slate);
      transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
    }
    .btn-icon { width: 16px; height: 16px; flex-shrink: 0; }
    .copy-btn:hover { border-color: var(--brand-teal); color: var(--brand-teal); }
    .copy-btn.copied { background: #0D9488; border-color: #0D9488; color: #fff; }
    .edit-btn:hover { border-color: #D97706; color: #D97706; background: rgba(217,119,6,.1); }
    .delete-btn:hover { border-color: #B91C1C; color: #B91C1C; background: rgba(185,28,28,.1); }
    .edit-btn, .delete-btn { display: none; margin-inline-start: 0; }
    .admin-mode .delete-btn, .admin-mode .edit-btn { display: flex; }
    .admin-limited .delete-btn, .admin-limited .danger-btn { display: none !important; }

    footer { text-align: center; padding: 20px; color: var(--slate-soft); font-size: 11.5px; border-top: 1px solid var(--border); display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }

    /* Side Panels */
    
    .panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: none; z-index: 96; }
    .panel-overlay.show { display: block; }
    .side-panel { position: fixed; top: 0; left: 0; height: 100vh; width: min(440px, 90vw); background: var(--card); color: var(--text-main); z-index: 97; transform: translateX(-100%); transition: transform .25s ease; padding: 20px; overflow-y: auto; will-change: transform; }
    body[dir="ltr"] .side-panel { left: auto; right: 0; transform: translateX(100%); }
    .side-panel.open { transform: translateX(0) !important; }

    /* Modal */
    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 100; display: none; align-items: center; justify-content: center; }
    .modal-overlay.active { display: flex; }
    .modal-card { background: var(--card); color: var(--text-main); border-radius: 12px; padding: 24px; width: min(560px, 92vw); max-height: 90vh; overflow-y: auto; }
    .admin-tab-btn { background: var(--bg); color: var(--text-main); border: 1px solid var(--border); padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; }
    .admin-tab-btn.active { background: var(--brand-blue); color: #fff; }

    .info-card { background: var(--bg); border-inline-start: 4px solid var(--panel-accent); border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; font-size: 12.5px; }
    .info-card .label { font-weight: 700; color: var(--panel-accent); margin-bottom: 4px; display: block; }
    .info-card .val { color: var(--text-main); word-break: break-word; }
    .panel-head h2 { color: var(--panel-accent) !important; display: flex; align-items: center; gap: 8px; }
    .panel-head h2::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--panel-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--panel-accent) 20%, transparent); flex-shrink: 0; }
    .panel-close:hover { border-color: var(--panel-accent); color: var(--panel-accent); }

    .update-card {
      background: var(--surface-soft, var(--bg)); border-inline-start: 4px solid #6E5A9E; border-radius: 8px; padding: 12px 14px;
      animation: cardEnter .4s cubic-bezier(.2,.75,.25,1) both;
    }
    .update-card .update-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 5px; }
    .update-card .update-date { font-size: 10px; color: var(--slate-soft); white-space: nowrap; }
    .update-card .update-text { font-size: 12.5px; line-height: 1.65; color: var(--text-main); white-space: pre-line; }

    /* Premium redesign — indigo/gold, glass + glow */
    :root {
      --navy: #0A6DCC;
      --navy-soft: #0D9488;
      --slate: #5B5A6E;
      --slate-soft: #8987A0;
      --bg: #F6F5FB;
      --card: #ffffff;
      --border: #E6E4F0;
      --brand-blue: #0A6DCC;
      --brand-teal: #0891B2;
      --text-main: #17172B;
      --coral: #E11D48;
      --gold: #0F766E;
      --gold-soft: #0D9488;
      --surface-soft: #F1F0F9;
      --shadow: 0 8px 24px rgba(30,20,70,.08);
    }
    body.dark-mode {
      --navy: #0B84FF;
      --navy-soft: #14B8A6;
      --slate: #9B99AC;
      --slate-soft: #716F82;
      --bg: #08090C;
      --card: #131318;
      --border: #232329;
      --brand-blue: #0B84FF;
      --brand-teal: #22D3EE;
      --text-main: #F3F2EE;
      --gold: #10B981;
      --gold-soft: #5EEAD4;
      --surface-soft: #1A1A21;
      --shadow: 0 8px 24px rgba(0,0,0,.45);
    }
    html { scroll-behavior: smooth; }
    body { background: var(--bg); letter-spacing: 0; }
    button, input, select, textarea { font: inherit; letter-spacing: 0; }
    button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-blue) 24%, transparent); outline-offset: 2px; }

    header {
      min-height: 84px; padding: 16px clamp(18px,4vw,56px); flex-wrap: nowrap;
      background: linear-gradient(120deg, #0B84FF 0%, #14B8A6 55%, #10B981 100%); border-bottom: 1px solid rgba(16,185,129,.45); overflow: visible;
    }
    .brand { flex-wrap: nowrap; gap: 14px; cursor: default; }
    .nova-wordmark { min-width: 104px; border-radius: 6px; padding: 7px 16px 8px; box-shadow: none; }
    .nova-text { font-size: 25px; }
    .project-seal { padding: 0; border: 0; background: transparent; border-radius: 0; gap: 3px; }
    .project-seal .eyebrow { color: rgba(255,255,255,0.65); font-size: 9px; }
    .project-seal .name { font-size: 12px; }

    .controls { top: 0; padding: 14px clamp(18px,4vw,56px) 10px; box-shadow: 0 1px 0 var(--border); }
    .controls-inner { width: 100%; }
    .search-row { margin-bottom: 10px; }
    .search-shell { position: relative; flex: 1; }
    .search-icon { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--slate-soft); font-size: 18px; pointer-events: none; }
    input[type=text], input[type=password], select, textarea { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 6px; }
    #searchInput { width: 100%; min-height: 43px; padding-inline-start: 42px; font-size: 13px; }
    .tabs { gap: 2px; padding: 0 0 4px; scrollbar-width: thin; }
    .tab { min-height: 36px; padding: 7px 12px; border-radius: 5px; border: 1px solid transparent; font-size: 11.5px; }
    .tab:hover { background: var(--surface-soft); color: var(--text-main); }
    .tab.active { background: color-mix(in srgb, var(--brand-blue) 12%, var(--card)); color: var(--brand-blue); border-color: color-mix(in srgb, var(--brand-blue) 30%, var(--border)); }
    .tab.active .dot { background: var(--brand-blue) !important; }

    main { padding: 28px clamp(18px,4vw,56px) 64px; }
    .workspace-head { margin: 0 0 22px; display: flex; align-items: end; justify-content: space-between; gap: 18px; }
    .workspace-head h1 { margin: 0 0 4px; font-size: 22px; line-height: 1.35; letter-spacing: -0.01em; font-weight: 800; }
    .workspace-head p { margin: 0; color: var(--slate); font-size: 12.5px; }
    .library-count { flex: none; border-inline-start: 3px solid var(--coral); padding-inline-start: 12px; }
    .library-count strong { display: block; font-size: 20px; line-height: 1; }
    .library-count span { color: var(--slate-soft); font-size: 10.5px; }
    #content, #followupGrid { width: 100%; }
    .section { margin-bottom: 30px; }
    .section-head { margin-bottom: 11px; padding-bottom: 9px; border-bottom: 1px solid var(--border); }
    .section-head .idx { width: 24px; height: 24px; border-radius: 4px; font-size: 10px; }
    .section-head h2 { font-size: 14px; }
    .section-count { margin-inline-start: auto; font-size: 10.5px; color: var(--slate-soft); }
    .grid { grid-template-columns: repeat(auto-fill,minmax(315px,1fr)); gap: 12px; }
    .card { border-radius: 14px; padding: 18px 18px 16px; box-shadow: 0 1px 2px rgba(23,33,43,.03); transition: border-color .2s, box-shadow .2s, transform .2s; min-height: 222px; }
    .card:hover { box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--card-accent, var(--navy)) 40%, transparent), var(--shadow); transform: translateY(-3px); border-color: color-mix(in srgb, var(--card-accent, var(--navy)) 35%, var(--border)); }
    .card-top { margin-bottom: 11px; }
    .badge { font-size: 10px; padding: 3px 10px 3px 8px; }
    .usage-badge { border-radius: 999px; font-size: 9.5px; padding: 3px 8px; }
    .card-title { font-size: 14px; margin-bottom: 8px; }
    .card-text { font-size: 12.5px; line-height: 1.75; margin-bottom: 16px; }
    .card-actions { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--border); }
    .empty-state { max-width: 1240px; margin: 40px auto; text-align: center; padding: 36px; border: 1px dashed var(--border); color: var(--slate); background: var(--card); border-radius: 6px; }

    .panel-overlay { background: rgba(10,15,18,.58); backdrop-filter: blur(2px); }
    .side-panel { width: min(430px,92vw); padding: 26px; box-shadow: 12px 0 30px rgba(0,0,0,.18); }
    .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
    .panel-head h2 { margin: 0 !important; font-size: 17px; }
    .panel-close { width: 34px; height: 34px; border: 1px solid var(--border); background: var(--surface-soft); color: var(--text-main); border-radius: 5px; cursor: pointer; font-size: 20px; }
    .info-card { background: var(--surface-soft); border-radius: 5px; padding: 12px 14px; }
    .modal-overlay { padding: 18px; background: rgba(10,15,18,.66); backdrop-filter: blur(3px); }
    .modal-card { border-radius: 7px; padding: 24px; box-shadow: 0 24px 70px rgba(0,0,0,.28); }
    .admin-tab-btn { border-radius: 5px; }
    footer { background: var(--card); padding: 18px 56px; }
    footer button { text-decoration: none !important; }

    @keyframes cardEnter {
      from { opacity: 0; transform: translateY(14px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes sectionEnter {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes modalEnter {
      from { opacity: 0; transform: translateY(14px) scale(.97); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes copiedPulse {
      0% { transform: scale(1); }
      45% { transform: scale(.94); }
      100% { transform: scale(1); }
    }
    @keyframes toolBreathe {
      0%, 100% { box-shadow: 0 6px 18px rgba(23,33,43,.2); }
      50% { box-shadow: 0 8px 24px rgba(23,33,43,.32); }
    }
    .section { animation: sectionEnter .42s both; }
    .card { animation: cardEnter .48s cubic-bezier(.2,.75,.25,1) both; animation-delay: var(--enter-delay, 0ms); }
    .card:hover .badge { transform: translateY(-1px); }
    .badge { transition: transform .2s ease, background-color .2s ease; }
    .copy-btn, .edit-btn, .delete-btn, .admin-tab-btn, .panel-close { transition: transform .16s ease, background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease; }
    .copy-btn:active, .edit-btn:active, .delete-btn:active, .admin-tab-btn:active, .panel-close:active { transform: scale(.94); }
    .copy-btn.copied { animation: copiedPulse .38s ease; }
    .tab { position: relative; transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .18s ease; }
    .tab:active { transform: scale(.96); }
    .tab .dot { transition: transform .22s ease, background-color .22s ease; }
    .tab:hover .dot, .tab.active .dot { transform: scale(1.25); }
    .search-shell { transition: transform .2s ease; }
    .search-shell:focus-within { transform: translateY(-1px); }
    #searchInput { transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
    #searchInput:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-blue) 11%, transparent); }
    .panel-overlay { opacity: 0; transition: opacity .25s ease; }
    .panel-overlay.show { opacity: 1; }
    .side-panel { transition: transform .34s cubic-bezier(.22,.8,.25,1); }
    .side-panel.open .info-card, .side-panel.open #criticalList p, .side-panel.open #etiquetteList p { animation: cardEnter .36s both; }
    .side-panel.open .info-card:nth-child(2), .side-panel.open #criticalList p:nth-child(2), .side-panel.open #etiquetteList p:nth-child(2) { animation-delay: 45ms; }
    .side-panel.open .info-card:nth-child(3), .side-panel.open #criticalList p:nth-child(3), .side-panel.open #etiquetteList p:nth-child(3) { animation-delay: 90ms; }
    .side-panel.open .info-card:nth-child(n+4), .side-panel.open #criticalList p:nth-child(n+4), .side-panel.open #etiquetteList p:nth-child(n+4) { animation-delay: 130ms; }
    .modal-overlay { opacity: 0; transition: opacity .22s ease; }
    .modal-overlay.active { opacity: 1; }
    .modal-overlay.active .modal-card { animation: modalEnter .3s cubic-bezier(.2,.8,.25,1) both; }
    .library-count strong { transition: transform .2s ease, color .2s ease; }
    .library-count.updated strong { color: var(--brand-blue); transform: scale(1.12); }
    .empty-state { animation: cardEnter .4s both; }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }

    /* Custom scrollbar in brand colors */
    * { scrollbar-width: thin; scrollbar-color: var(--brand-teal) var(--bg); }
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--brand-blue), var(--brand-teal)); border-radius: 10px; border: 2px solid var(--bg); }
    ::-webkit-scrollbar-thumb:hover { background: var(--brand-teal); }

    /* Maintenance kill-switch overlay — blocks the app for everyone except
       full admins while public.system_lock.locked is true. Hidden by
       default; app.js toggles the .show class once it polls the flag. */
    .maintenance-overlay {
      display: none; position: fixed; inset: 0; z-index: 400; align-items: center; justify-content: center;
      background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(6px);
      padding: 20px; text-align: center;
    }
    .maintenance-overlay.show { display: flex; }
    .maintenance-card {
      max-width: 380px; padding: 36px 30px; border-radius: 18px; background: var(--card);
      border: 1px solid var(--border); box-shadow: 0 24px 60px -24px rgba(0,0,0,.35);
    }
    .maintenance-icon { font-size: 34px; display: block; margin-bottom: 14px; }
    .maintenance-card h2 { font-size: 17px; margin: 0 0 8px; color: var(--text-main); }
    .maintenance-card p { font-size: 13px; line-height: 1.7; color: var(--slate); margin: 0; white-space: pre-line; }

    /* First-visit-of-the-day splash */
    .splash-overlay {
      position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
      background: linear-gradient(120deg, #050b12 0%, #0a2a3d 40%, #0d3f45 75%, #0f4a42 100%);
      opacity: 1; transition: opacity .5s ease; overflow: hidden;
    }
    .splash-overlay::before {
      content: ''; position: absolute; width: 640px; height: 640px; border-radius: 50%;
      background: radial-gradient(circle, rgba(11,132,255,.45), transparent 70%); filter: blur(60px);
      top: 50%; left: 50%; transform: translate(-50%,-50%); animation: splashGlow 3s ease-in-out infinite alternate;
    }
    @keyframes splashGlow { 0% { opacity: .6; transform: translate(-50%,-50%) scale(.9); } 100% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); } }
    .splash-logo, .splash-sub { position: relative; z-index: 1; }
    .splash-overlay.hide { opacity: 0; pointer-events: none; }
    .splash-logo { opacity: 0; animation: splashIn 1s ease forwards; }
    .splash-logo .nova-text { font-size: 52px; }
    .splash-sub { display: block; text-align: center; margin-top: 8px; font-family: 'Cairo', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .16em; color: rgba(255,255,255,.75); opacity: 0; animation: splashIn 1s ease .15s forwards; }
    @keyframes splashIn { 0% { opacity: 0; transform: scale(.85); } 60% { opacity: 1; transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }

    /* Toast notifications (replaces alert()) */
    .toast-container { position: fixed; top: 16px; inset-inline-end: 16px; z-index: 250; display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: min(360px, 92vw); }
    .toast {
      background: var(--card); color: var(--text-main); border: 1px solid var(--border); border-inline-start: 4px solid var(--brand-teal);
      border-radius: 8px; padding: 12px 14px; box-shadow: 0 12px 30px rgba(0,0,0,.16); font-size: 12.5px; font-weight: 600;
      display: flex; align-items: flex-start; gap: 8px; opacity: 0; transform: translateY(-10px); pointer-events: auto;
      transition: opacity .25s ease, transform .25s ease;
    }
    .toast.show { opacity: 1; transform: translateY(0); }
    .toast.success { border-inline-start-color: #0D9488; }
    .toast.error { border-inline-start-color: #B91C1C; }
    .toast-icon { flex-shrink: 0; font-size: 15px; line-height: 1.3; }

    /* New-version banner — shown when a fresh service-worker build is ready, no manual refresh needed */
    .sw-update-toast {
      position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(16px);
      z-index: 300; display: flex; align-items: center; gap: 10px;
      background: linear-gradient(120deg, #0B84FF, #10B981);
      color: #fff; padding: 9px 9px 9px 16px; border-radius: 999px;
      box-shadow: 0 16px 40px -12px rgba(0,0,0,.5);
      font-size: 12.5px; font-weight: 700; white-space: nowrap;
      opacity: 0; pointer-events: none;
      transition: opacity .3s ease, transform .3s ease;
    }
    .sw-update-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
    .sw-update-toast button {
      background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.4); color: #fff;
      font-family: inherit; font-weight: 800; font-size: 11.5px; padding: 7px 16px; border-radius: 999px;
      cursor: pointer; transition: background .15s ease;
    }
    .sw-update-toast button:hover { background: rgba(255,255,255,.36); }
    @media (max-width: 640px) {
      .sw-update-toast { bottom: 88px; font-size: 11.5px; padding: 8px 8px 8px 14px; }
    }

    /* Skeleton loading state */
    .skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(315px, 1fr)); gap: 12px; }
    .skeleton-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px; min-height: 190px; }
    .skeleton-line { height: 11px; border-radius: 6px; margin-bottom: 12px; position: relative; overflow: hidden; background: var(--border); }
    .skeleton-line::after {
      content: ''; position: absolute; inset: 0; transform: translateX(-100%);
      background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--card) 70%, #fff), transparent);
      animation: skeletonShimmer 1.3s infinite;
    }
    .skeleton-line.w-40 { width: 40%; } .skeleton-line.w-70 { width: 70%; } .skeleton-line.w-90 { width: 90%; } .skeleton-line.w-60 { width: 60%; }
    @keyframes skeletonShimmer { 100% { transform: translateX(100%); } }

    /* Friendlier empty search state */
    .empty-state .empty-icon { font-size: 30px; display: block; margin-bottom: 10px; opacity: .8; }

    @media (max-width: 620px) {
      header { min-height: 74px; padding: 12px 16px; }
      .nova-wordmark { min-width: 80px; padding: 6px 11px; }
      .nova-text { font-size: 21px; }
      .nova-sub { font-size: 5.5px; }
      .project-seal .eyebrow { display: none; }
      .project-seal .name { font-size: 9.5px; max-width: 82px; text-align: end; }
      .controls { padding: 10px 14px 7px; }
      .search-row { gap: 7px; }
      main { padding: 22px 14px 78px; }
      .workspace-head { align-items: center; }
      .workspace-head h1 { font-size: 18px; }
      .workspace-head p { display: none; }
      .grid { grid-template-columns: 1fr; }
      .card { min-height: 0; }
      footer { padding: 18px 14px 72px; }
    }

    /* Decor enhancements */
    body {
      background-image: radial-gradient(color-mix(in srgb, var(--navy) 6%, transparent) 1px, transparent 1px);
      background-size: 22px 22px;
    }
    body.dark-mode {
      background-image: radial-gradient(color-mix(in srgb, var(--text-main) 5%, transparent) 1px, transparent 1px);
    }

    /* Ambient premium layer: orbit-field canvas + film grain, sits behind all content */
    .orbit-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; pointer-events: none; transition: opacity .4s ease; }
    body.dark-mode .orbit-canvas { opacity: .8; }
    .ambient-grain {
      position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0; mix-blend-mode: overlay; transition: opacity .4s ease;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    }
    body.dark-mode .ambient-grain { opacity: .045; }

    /* Editorial mono meta labels — small tracked labels feel intentional, not generic */
    .project-seal .eyebrow, .badge, .dash-chip, .training-head-chip,
    .section-head .idx, .presence-stat span, .library-count span {
      font-family: 'JetBrains Mono', 'Cairo', monospace; letter-spacing: .04em;
    }

    /* Subtle cursor-reactive tilt + glow on cards — signature of the new premium chrome */
    .card {
      --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
      transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
      background:
        radial-gradient(280px circle at var(--mx) var(--my), color-mix(in srgb, var(--card-accent, var(--navy)) 10%, transparent), transparent 60%),
        linear-gradient(180deg, color-mix(in srgb, var(--card-accent, var(--navy)) 5%, var(--card)) 0%, var(--card) 60%);
    }
    .card:hover {
      transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px);
    }

    .section-head { border-bottom: none; position: relative; }
    .section-head::after {
      content: ''; position: absolute; inset-inline-start: 0; bottom: 0; width: 100%; height: 1px;
      background: linear-gradient(90deg, var(--border) 0%, transparent 85%);
    }
    body[dir="ltr"] .section-head::after { background: linear-gradient(270deg, var(--border) 0%, transparent 85%); }

    .card { background: linear-gradient(180deg, color-mix(in srgb, var(--card-accent, var(--navy)) 5%, var(--card)) 0%, var(--card) 60%); }

    body.dark-mode .card-text { color: var(--slate); }

    .login-gate {
      position: fixed; inset: 0; z-index: 10000;
      display: flex;
      background: linear-gradient(150deg, #050b12 0%, #0a2436 45%, #0d3f45 75%, #0f4a42 100%);
    }
    .login-gate.hide { display: none; }
    .login-image-panel {
      flex: 1 1 55%; min-width: 0;
      background: #050b12;
      position: relative; overflow: hidden;
    }
    .login-moon-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
    .login-form-panel {
      flex: 0 0 460px; max-width: 100%; display: flex; flex-direction: column;
      justify-content: center; padding: 48px 56px; overflow-y: auto;
      background: rgba(255,255,255,.07); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%);
      position: relative; z-index: 1;
      animation: modalEnter .4s cubic-bezier(.2,.75,.25,1) both;
    }
    /* Spotlight: a soft glow that follows the cursor, positioned via --spot-x/--spot-y
       (set in app.js on mousemove). Pure CSS/JS — no framer-motion needed. */
    .login-form-panel::before {
      content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background: radial-gradient(260px circle at var(--spot-x, 50%) var(--spot-y, 15%), rgba(255,255,255,.16), transparent 70%);
      opacity: 0; transition: opacity .3s ease;
    }
    .login-form-panel:hover::before { opacity: 1; }
    .login-card { position: relative; z-index: 1; width: 100%; text-align: center; }
    .login-brand { display: flex; align-items: center; justify-content: center; margin-bottom: 26px; }
    .login-wordmark {
      display: inline-flex; flex-direction: column; align-items: center; line-height: 1;
    }
    .login-wordmark .nova-text { font-size: 34px; }
    .login-wordmark .nova-sub { font-size: 10px; margin-top: 3px; color: #6B7480; }
    .login-card h2 { margin: 0 0 8px; font-size: 22px; color: #F5F7FA; }
    .login-card p { margin: 0 0 28px; font-size: 13.5px; color: rgba(245,247,250,.65); }
    .login-card form { text-align: start; }
    .login-card label { display: block; font-size: 12.5px; font-weight: 700; color: rgba(245,247,250,.7); margin: 16px 0 7px; }
    .login-card input {
      width: 100%; box-sizing: border-box; padding: 13px 15px; border-radius: 9px;
      border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff;
      font-size: 14.5px; font-family: inherit;
    }
    .login-card input::placeholder { color: rgba(245,247,250,.4); }
    .login-card input:focus { outline: none; border-color: var(--brand-blue); background: rgba(255,255,255,.1); }
    .login-card button[type="submit"] {
      width: 100%; margin-top: 26px; padding: 14px; border: none; border-radius: 9px;
      background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-teal) 100%);
      color: #fff; font-weight: 800; font-size: 14.5px; font-family: inherit; cursor: pointer;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      transition: opacity .2s ease, transform .16s ease;
    }
    .login-card button[type="submit"]:hover { opacity: .9; }
    .login-card button[type="submit"]:active { transform: scale(.98); }
    .login-card button[type="submit"]:disabled { opacity: .6; cursor: not-allowed; }
    .login-spinner {
      width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4);
      border-top-color: #fff; animation: spin .7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .login-error {
      margin-top: 14px; padding: 10px 12px; border-radius: 7px; font-size: 12px; font-weight: 600;
      background: rgba(229,72,77,.12); color: #e5484d; text-align: center;
    }
    .turnstile-widget { margin-top: 14px; display: flex; justify-content: center; min-height: 65px; }
    .login-forgot {
      display: block; margin: 16px auto 0; background: none; border: none; cursor: pointer;
      font-size: 11.5px; color: var(--brand-blue); font-family: inherit; text-decoration: underline;
    }

    @media (max-width: 860px) {
      .login-image-panel { display: none; }
      .login-form-panel { flex: 1 1 100%; padding: 32px 24px; }
    }
    @media (max-width: 480px) {
      .login-wordmark .nova-text { font-size: 28px; }
      .login-card h2 { font-size: 19px; }
    }

    .header-right { display: flex; align-items: center; gap: 14px; position: relative; z-index: 5; }

    /* ===== Language toggle — visible in the header instead of buried in the
       profile dropdown, same reasoning as the sky theme switch below. ===== */
    .lang-toggle-btn {
      display: flex; align-items: center; justify-content: center; font-family: inherit; cursor: pointer;
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.22); color: #fff;
      border-radius: 999px; width: 34px; height: 34px; padding: 0; font-size: 11px; font-weight: 800;
      letter-spacing: .02em; transition: background-color .2s ease, transform .16s ease;
    }
    .lang-toggle-btn:hover { background: rgba(255,255,255,0.14); }
    .lang-toggle-btn:active { transform: scale(.92); }
    @media (max-width: 640px) { .lang-toggle-btn { width: 28px; height: 28px; font-size: 9.5px; } }

    /* ===== Sky theme switch — day/night toggle, visible in the header instead of
       buried in the profile dropdown. Ported to plain CSS (no styled-components). ===== */
    .theme-switch {
      --toggle-size: 15px;
      --container-width: 5.625em; --container-height: 2.5em; --container-radius: 6.25em;
      --container-light-bg: #3D7EAE; --container-night-bg: #1D1F2C;
      --circle-container-diameter: 3.375em; --sun-moon-diameter: 2.125em;
      --sun-bg: #ECCA2F; --moon-bg: #C4C9D1; --spot-color: #959DB1;
      --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
      --stars-color: #fff; --clouds-color: #F3FDFF; --back-clouds-color: #AACADF;
      --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
      --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
      flex-shrink: 0; display: inline-flex;
    }
    .theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {
      box-sizing: border-box; margin: 0; padding: 0; font-size: var(--toggle-size);
    }
    .theme-switch__container {
      width: var(--container-width); height: var(--container-height);
      background-color: var(--container-light-bg); border-radius: var(--container-radius);
      overflow: hidden; cursor: pointer;
      box-shadow: 0em -0.062em 0.062em rgba(0,0,0,.25), 0em 0.062em 0.125em rgba(255,255,255,.94);
      transition: var(--transition); position: relative;
    }
    .theme-switch__container::before {
      content: ''; position: absolute; z-index: 1; inset: 0;
      box-shadow: 0em 0.05em 0.187em rgba(0,0,0,.25) inset, 0em 0.05em 0.187em rgba(0,0,0,.25) inset;
      border-radius: var(--container-radius);
    }
    .theme-switch__checkbox { display: none; }
    .theme-switch__circle-container {
      width: var(--circle-container-diameter); height: var(--circle-container-diameter);
      background-color: rgba(255,255,255,.1); position: absolute;
      left: var(--circle-container-offset); top: var(--circle-container-offset);
      border-radius: var(--container-radius);
      box-shadow: inset 0 0 0 3.375em rgba(255,255,255,.1), inset 0 0 0 3.375em rgba(255,255,255,.1), 0 0 0 0.625em rgba(255,255,255,.1), 0 0 0 1.25em rgba(255,255,255,.1);
      display: flex; transition: var(--circle-transition); pointer-events: none;
    }
    .theme-switch__sun-moon-container {
      pointer-events: auto; position: relative; z-index: 2;
      width: var(--sun-moon-diameter); height: var(--sun-moon-diameter); margin: auto;
      border-radius: var(--container-radius); background-color: var(--sun-bg);
      box-shadow: 0.062em 0.062em 0.062em 0em rgba(254,255,239,.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
      filter: drop-shadow(0.062em 0.125em 0.125em rgba(0,0,0,.25)) drop-shadow(0em 0.062em 0.125em rgba(0,0,0,.25));
      overflow: hidden; transition: var(--transition);
    }
    .theme-switch__moon {
      transform: translateX(100%); width: 100%; height: 100%;
      background-color: var(--moon-bg); border-radius: inherit;
      box-shadow: 0.062em 0.062em 0.062em 0em rgba(254,255,239,.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
      transition: var(--transition); position: relative;
    }
    .theme-switch__spot {
      position: absolute; top: 0.75em; left: 0.312em; width: 0.75em; height: 0.75em;
      border-radius: var(--container-radius); background-color: var(--spot-color);
      box-shadow: 0em 0.0312em 0.062em rgba(0,0,0,.25) inset;
    }
    .theme-switch__spot:nth-of-type(2) { width: 0.375em; height: 0.375em; top: 0.937em; left: 1.375em; }
    .theme-switch__spot:nth-last-of-type(3) { width: 0.25em; height: 0.25em; top: 0.312em; left: 0.812em; }
    .theme-switch__clouds {
      width: 1.25em; height: 1.25em; background-color: var(--clouds-color);
      border-radius: var(--container-radius); position: absolute; bottom: -0.625em; left: 0.312em;
      box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
      transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
    }
    .theme-switch__stars-container {
      position: absolute; color: var(--stars-color); top: -100%; left: 0.312em;
      width: 2.75em; height: auto; transition: var(--transition);
    }
    .theme-switch__checkbox:checked + .theme-switch__container { background-color: var(--container-night-bg); }
    .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
      left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
    }
    .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {
      left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em);
    }
    .theme-switch__circle-container:hover { left: calc(var(--circle-container-offset) + 0.187em); }
    .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon { transform: translate(0); }
    .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds { bottom: -4.062em; }
    .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {
      top: 50%; transform: translateY(-50%);
    }
    @media (max-width: 640px) { .theme-switch { --toggle-size: 12px; } }

    .profile-menu { position: relative; }
    .profile-btn {
      display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.35);
      border-radius: 999px; padding: 4px 10px 4px 4px; cursor: pointer; color: #fff; transition: background .2s ease;
    }
    body[dir="ltr"] .profile-btn { padding: 4px 4px 4px 10px; }
    .profile-btn:hover { background: rgba(255,255,255,.24); }
    .profile-chevron { transition: transform .2s ease; flex-shrink: 0; }
    .profile-btn[aria-expanded="true"] .profile-chevron { transform: rotate(180deg); }
    .profile-avatar {
      width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, #ffffff 0%, #E4E1F5 100%); color: var(--brand-blue);
      font-weight: 700; font-size: 12.5px; display: flex; align-items: center; justify-content: center;
      font-family: 'Fraunces', 'Amiri', serif; text-transform: uppercase;
    }
    .profile-avatar-lg { width: 42px; height: 42px; font-size: 15px; }
    .profile-dropdown {
      position: absolute; top: calc(100% + 10px); inset-inline-end: 0; width: 264px;
      background: var(--card); border: 1px solid var(--border); border-radius: 12px;
      box-shadow: 0 18px 44px rgba(0,0,0,.22); padding: 8px; z-index: 50;
      opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s;
      will-change: opacity, transform;
    }
    .profile-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
    .profile-dropdown-head { display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; background: var(--surface-soft); border-radius: 8px; }
    .profile-info { min-width: 0; }
    .profile-email { font-size: 12px; font-weight: 700; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .profile-role { font-size: 10.5px; color: var(--slate); margin-top: 1px; }
    .profile-dropdown-item {
      display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box; padding: 9px 8px;
      background: none; border: none; border-radius: 7px; cursor: pointer; text-align: start;
      font-size: 12.5px; font-weight: 600; color: var(--text-main); font-family: inherit;
    }
    .profile-dropdown-item:hover { background: var(--surface-soft); }
    .profile-dropdown-sep { height: 1px; background: var(--border); margin: 6px 4px; }
    .profile-dropdown-danger { color: #e5484d; }
    .profile-dropdown-danger:hover { background: rgba(229,72,77,.1); }

    /* ===== Premium touches: gold accents, glass, elegant type, refined motion ===== */

    /* Elegant Arabic display face for headings, used sparingly */
    .workspace-head h1, .section-head h2, .login-card h2, .panel-head h2 {
      font-family: 'Fraunces', 'Amiri', 'Cairo', serif; font-weight: 700; letter-spacing: -0.005em;
    }
    .workspace-head h1 { font-size: 24px; }
    .section-head h2 { font-size: 15.5px; }

    /* Gold hairline signature under primary headings */
    .workspace-head { position: relative; padding-bottom: 14px; }
    .workspace-head::after {
      content: ''; position: absolute; inset-inline-start: 0; bottom: 0; width: 74px; height: 2px;
      background: linear-gradient(90deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 10%, transparent) 100%);
    }
    body[dir="ltr"] .workspace-head::after { background: linear-gradient(270deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 10%, transparent) 100%); }
    .section-head::after {
      background: linear-gradient(90deg, var(--gold-soft) 0%, var(--border) 18%, transparent 85%) !important;
    }
    body[dir="ltr"] .section-head::after { background: linear-gradient(270deg, var(--gold-soft) 0%, var(--border) 18%, transparent 85%) !important; }

    /* Header: soft ambient glow + gentle entrance */
    header { animation: headerEnter .6s cubic-bezier(.2,.8,.2,1) both; }
    header::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(480px 260px at 10% -30%, rgba(11,132,255,.35), transparent 70%),
                  radial-gradient(380px 220px at 94% 130%, rgba(16,185,129,.14), transparent 70%);
    }
    @keyframes headerEnter { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

    /* Refined frame around the wordmark */
    .nova-wordmark { box-shadow: 0 2px 10px rgba(0,0,0,0.12); }

    /* Cards: composed hover lift with a whisper of brass, gradient top accent */
    .card::before { background: linear-gradient(90deg, var(--card-accent, var(--navy)) 0%, color-mix(in srgb, var(--card-accent, var(--navy)) 55%, var(--gold-soft)) 100%); }
    .card:hover {
      box-shadow: 0 20px 38px -18px color-mix(in srgb, var(--card-accent, var(--navy)) 46%, transparent), var(--shadow);
      transform: translateY(-4px);
      transition: border-color .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s cubic-bezier(.2,.8,.2,1), transform .3s cubic-bezier(.2,.8,.2,1);
    }

    /* Side panels & modal: nearly-opaque background (96%), so the frosted backdrop-filter
       this used to carry had almost nothing left behind it to actually blur — it was pure
       recompute cost on every frame of the slide-in transition (the panel's own transform
       animating forces the browser to re-blur what's behind it continuously), with no
       visible payoff. Dropped for a plain opaque panel: same look, no per-frame cost. */
    .side-panel {
      background: color-mix(in srgb, var(--card) 96%, transparent);
      border-inline-start: 1px solid color-mix(in srgb, var(--panel-accent) 22%, var(--border));
    }
    body[dir="ltr"] .side-panel { border-inline-start: none; border-inline-end: 1px solid color-mix(in srgb, var(--panel-accent) 22%, var(--border)); }
    .modal-card {
      background: var(--card);
      border: 1px solid color-mix(in srgb, var(--gold) 20%, var(--border));
    }

    /* Admin usage badge gets a refined brass tone instead of plain amber */
    .usage-badge { color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }

    /* Softer, slower easing across interactive elements for a more composed feel */
    .copy-btn, .edit-btn, .delete-btn, .admin-tab-btn, .panel-close, .tab {
      transition-duration: .26s; transition-timing-function: cubic-bezier(.2,.8,.2,1);
    }

    /* Login gate: brass hairline frame, refined pattern glow, slower reveal */
    .login-form-panel {
      border-inline-start: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
      box-shadow: -18px 0 50px rgba(0,0,0,.05);
      animation-duration: .6s;
    }
    body[dir="ltr"] .login-form-panel { border-inline-start: none; border-inline-end: 1px solid color-mix(in srgb, var(--gold) 32%, transparent); }
    .login-card { position: relative; }
    .login-wordmark { background: #fff; border-radius: 12px; padding: 10px 24px 11px; box-shadow: 0 2px 10px rgba(0,0,0,0.12); }
    .login-card h2::after {
      content: ''; display: block; width: 46px; height: 2px; margin: 10px auto 0;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
    }
    .login-card button[type="submit"] {
      background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-teal) 100%);
      box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--brand-blue) 55%, transparent);
    }
    .login-image-panel::after {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(520px 320px at 20% 15%, rgba(214,161,94,.10), transparent 70%);
      pointer-events: none;
    }

    @media (prefers-reduced-motion: reduce) {
      header, .card { animation: none !important; }
    }

    /* ===== Card redesign: crisp paper surface with a discreet brass corner mark ===== */
    .card {
      border-radius: 14px;
      padding: 22px 20px 16px;
      border: 1px solid color-mix(in srgb, var(--card-accent, var(--navy)) 16%, var(--border));
      background: var(--card);
      overflow: visible;
    }
    .card::before {
      content: ''; position: absolute; inset-inline-start: 0; top: 0; width: 100%; height: 3px;
      background: linear-gradient(90deg, var(--card-accent, var(--navy)) 0%, color-mix(in srgb, var(--card-accent, var(--navy)) 55%, var(--gold-soft)) 100%);
    }
    .card::after {
      content: ''; position: absolute; top: 16px; inset-inline-end: 16px; width: 34px; height: 34px;
      background:
        url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center/15px no-repeat,
        linear-gradient(135deg, var(--card-accent, var(--navy)) 0%, color-mix(in srgb, var(--card-accent, var(--navy)) 55%, var(--gold-soft)) 100%);
      border-radius: 10px;
      box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--card-accent, var(--navy)) 60%, transparent);
      opacity: 0; transform: translateY(-2px);
      transition: opacity .22s ease, transform .22s cubic-bezier(.2,.8,.2,1);
    }
    .card:hover::after { opacity: 1; transform: translateY(0); }
    .card-top { margin-bottom: 16px; padding-inline-end: 46px; }
    .badge { border-radius: 999px; }
    .card-actions { border-top: 1px solid color-mix(in srgb, var(--card-accent, var(--navy)) 14%, var(--border)); padding-top: 14px; }

    /* ===== Masonry layout: variable-height columns instead of a uniform grid ===== */
    .grid {
      display: block;
      column-width: 320px;
      column-gap: 14px;
    }
    .card {
      width: 100%;
      break-inside: avoid;
      -webkit-column-break-inside: avoid;
      margin: 0 0 14px;
      min-height: 0;
    }
    .card-text { flex: initial; }
    @media (max-width: 620px) {
      .grid { column-width: auto; columns: 1; }
    }

    /* ===== Fixed bottom bar (Home / Technical Issue) ===== */
    body { padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)); }
    .bottom-bar {
      position: fixed; inset-inline: 0; bottom: 0; z-index: 95;
      display: flex; justify-content: center;
      padding: 10px clamp(14px, 4vw, 40px) calc(10px + env(safe-area-inset-bottom, 0px));
      pointer-events: none;
    }
    .bottom-bar-inner {
      pointer-events: auto; position: relative;
      display: flex; align-items: stretch; justify-content: center; gap: 6px;
      width: 100%; max-width: 620px;
      background: linear-gradient(180deg, color-mix(in srgb, var(--card) 74%, transparent), color-mix(in srgb, var(--card) 88%, transparent));
      border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
      border-radius: 20px;
      box-shadow: 0 16px 38px -12px rgba(20,91,140,.22), 0 2px 8px rgba(23,33,43,.06), inset 0 1px 0 rgba(255,255,255,.35);
      /* This bar is fixed on screen on every single page, sitting directly over the
         continuously-animating hero particles/glow behind it - a blur(18px)+saturate(180%)
         here had to be recomputed on every animation frame, permanently, everywhere in the
         app. Cut to a much lighter blur with no saturate pass, and made the background a
         touch more opaque to keep the same frosted look with a fraction of the GPU cost. */
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      padding: 7px; height: 68px;
    }
    /* Only the home planet remains in the bar — keep it centered instead of stretched */
    .bottom-bar-inner.bb-home-only { max-width: 220px; }
    .bottom-bar-inner.bb-home-only .bb-home { flex: 0 0 auto; }
    body.dark-mode .bottom-bar-inner {
      background: linear-gradient(180deg, color-mix(in srgb, var(--card) 55%, transparent), color-mix(in srgb, var(--card) 72%, transparent));
      border-color: color-mix(in srgb, #94A3B8 35%, transparent);
      box-shadow: 0 16px 38px -12px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
    }
    .bb-btn {
      flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px;
      background: none; border: none; cursor: pointer; font-family: inherit;
      font-size: 12.5px; font-weight: 700; color: var(--slate); white-space: nowrap;
      border-radius: 14px;
      transition: background .18s ease, color .18s ease, transform .12s ease;
    }
    .bb-icon {
      width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      transition: background .18s ease, transform .18s ease;
    }
    .bb-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
    .bb-btn:active { transform: scale(.96); }
    .bb-btn:active .bb-icon { transform: scale(.92); }
    .bb-home {
      flex: 0 0 66px; flex-direction: column; justify-content: flex-start; gap: 3px;
      color: var(--brand-blue); margin-top: -27px; z-index: 2;
    }
    .bb-home .bb-icon {
      width: 54px; height: 54px; border-radius: 50%; position: relative;
      background: radial-gradient(circle at 34% 30%, #6FE9D0 0%, #17C9A6 22%, #0B84FF 62%, #064B9E 100%);
      box-shadow: inset -9px -9px 16px rgba(0,10,30,.55), inset 5px 5px 12px rgba(255,255,255,.35),
                  0 0 0 4px var(--bg), 0 0 18px 2px rgba(11,132,255,.45);
      color: #fff; transform: scale(1);
      animation: bbHomeGlow 2.6s ease-in-out infinite, bbHomeBreathe 2.6s ease-in-out infinite;
    }
    .bb-planet-surface { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
    .bb-planet-bands {
      position: absolute; inset: -25%; pointer-events: none;
      background: repeating-linear-gradient(102deg,
        rgba(255,255,255,.16) 0 3px, rgba(255,255,255,0) 3px 9px,
        rgba(3,30,60,.28) 9px 13px, rgba(255,255,255,0) 13px 20px);
      animation: bbPlanetSpin 6s linear infinite;
    }
    .bb-planet-ring {
      position: absolute; inset: -20%; border-radius: 50%; pointer-events: none;
      background: conic-gradient(from 0deg, #10B981 0%, #0B84FF 25%, #041F42 45%, #22D3EE 65%, #10B981 100%);
      opacity: .8; mix-blend-mode: overlay;
      animation: bbPlanetSpin 5s linear infinite;
    }
    .bb-planet-term {
      position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
      background: radial-gradient(circle at 30% 26%, rgba(255,255,255,0) 40%, rgba(0,8,25,.55) 88%);
    }
    .bb-planet-highlight {
      position: absolute; top: 9%; left: 20%; width: 40%; height: 27%; border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,0) 68%);
      pointer-events: none; filter: blur(.6px);
    }
    @keyframes bbPlanetSpin { to { transform: rotate(360deg); } }
    body.dark-mode .bb-home .bb-icon { animation: bbHomeGlowDark 2.6s ease-in-out infinite, bbHomeBreathe 2.6s ease-in-out infinite; }
    .bb-home:hover .bb-icon { animation-play-state: paused; transform: translateY(-3px) scale(1.08); box-shadow: 0 14px 28px -6px rgba(11,132,255,.55), 0 0 0 5px var(--bg); }
    .bb-home:active .bb-icon { animation-play-state: paused; transform: scale(.9); }
    .bb-home span:not(.bb-icon) { font-size: 10px; font-weight: 800; }
    @keyframes bbHomeGlow {
      0%, 100% { box-shadow: 0 10px 22px -6px rgba(67,56,202,.5), 0 0 0 4px var(--bg), 0 0 0 4px rgba(67,56,202,0); }
      50% { box-shadow: 0 10px 22px -6px rgba(67,56,202,.5), 0 0 0 4px var(--bg), 0 0 0 11px rgba(67,56,202,.16); }
    }
    @keyframes bbHomeGlowDark {
      0%, 100% { box-shadow: 0 10px 22px -6px rgba(0,0,0,.5), 0 0 0 4px var(--bg), 0 0 0 4px rgba(11,132,255,0); }
      50% { box-shadow: 0 10px 22px -6px rgba(0,0,0,.5), 0 0 0 4px var(--bg), 0 0 0 11px rgba(11,132,255,.3); }
    }
    @keyframes bbHomeBreathe {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.045); }
    }
    /* Click "launch" burst */
    .bb-home .bb-icon.bb-launch { animation: bbLaunch .6s cubic-bezier(.2,.8,.2,1); }
    @keyframes bbLaunch {
      0% { transform: scale(1); filter: brightness(1); }
      35% { transform: scale(1.35); filter: brightness(1.5); }
      100% { transform: scale(1); filter: brightness(1); }
    }
    .bb-launch-ring {
      position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
      border: 2px solid rgba(11,132,255,.7); opacity: 0; z-index: 3;
    }
    .bb-launch-ring.go { animation: bbLaunchRing .6s cubic-bezier(.2,.8,.2,1); }
    @keyframes bbLaunchRing {
      0% { transform: scale(.6); opacity: .9; border-color: rgba(16,185,129,.8); }
      100% { transform: scale(2.2); opacity: 0; border-color: rgba(11,132,255,0); }
    }
    @media (max-width: 560px) {
      .bottom-bar-inner { height: 62px; gap: 4px; padding: 5px; }
      .bb-btn { flex-direction: column; gap: 3px; font-size: 9.5px; }
      .bb-icon { width: 28px; height: 28px; border-radius: 9px; }
      .bb-btn svg { width: 15px; height: 15px; }
      .bb-home { flex: 0 0 58px; margin-top: -22px; }
      .bb-home .bb-icon { width: 46px; height: 46px; }
      .bb-home svg { width: 19px; height: 19px; }
    }
    @media (max-width: 340px) {
      .bb-btn { font-size: 8.5px; }
    }

    /* ===== Command Center hero — full-width diagram of all five sections, connected
       by animated light lines. Follows the app's own light/dark toggle like every
       other page (background/text via the shared --bg/--text-main tokens below);
       only its geometry is physically positioned rather than direction-mirrored,
       since it's a fixed diagram layout, not text flow. */
    .cmd-hero {
      position: relative; z-index: 1; overflow: hidden;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      min-height: calc(100vh - 84px); min-height: calc(100svh - 84px);
      padding: 24px 20px 60px; color: var(--text-main);
      background: linear-gradient(160deg, #eef9f6 0%, #dcf4ee 50%, #cdeee5 100%);
      --hero-accent: #0d9488; --hero-line: rgba(13,148,136,.4);
    }
    body.dark-mode .cmd-hero {
      background: linear-gradient(160deg, #071b26 0%, #0a2e2b 55%, #0d3b34 100%);
      --hero-accent: #2dd4bf; --hero-line: rgba(45,212,191,.55);
    }
    .cmd-hero .mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
    /* The hero stays mounted (and its animations keep running) behind every full-page
       overlay, since those slide in with transform/opacity rather than unmounting.
       Pause them while a page is open on top so the CPU cost isn't paid site-wide. */
    body.cmd-hero-paused .cmd-hero, body.cmd-hero-paused .cmd-hero * { animation-play-state: paused !important; }
    .cmd-mesh { position: absolute; inset: -20%; z-index: 0; filter: blur(56px); pointer-events: none; opacity: .5; }
    body.dark-mode .cmd-mesh { opacity: .8; }
    .cmd-mesh span { position: absolute; border-radius: 50%; }
    .cmd-mesh .m1 { width: 44vw; height: 44vw; top: -8%; inset-inline-end: -8%; background: radial-gradient(circle, rgba(13,148,136,.4), transparent 66%); animation: cmdDriftA 26s ease-in-out infinite alternate; }
    .cmd-mesh .m2 { width: 36vw; height: 36vw; bottom: -12%; inset-inline-start: -8%; background: radial-gradient(circle, rgba(45,212,191,.3), transparent 66%); animation: cmdDriftB 30s ease-in-out infinite alternate; }
    @keyframes cmdDriftA { to { transform: translate(-5%,7%) scale(1.08); } }
    @keyframes cmdDriftB { to { transform: translate(6%,-6%) scale(1.05); } }
    .cmd-circuit-bg {
      position: absolute; inset: 0; z-index: 0; opacity: .5; pointer-events: none;
      background-image: linear-gradient(var(--hero-line) 1px, transparent 1px), linear-gradient(90deg, var(--hero-line) 1px, transparent 1px);
      background-size: 34px 34px; opacity: .12;
      mask-image: radial-gradient(ellipse 85% 80% at 50% 40%, #000 0%, transparent 85%);
    }
    body.dark-mode .cmd-circuit-bg { opacity: .22; }

    .cmd-eyebrow {
      position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 800; color: var(--slate);
      background: color-mix(in srgb, var(--text-main) 5%, transparent); border: 1px solid color-mix(in srgb, var(--text-main) 10%, transparent);
      padding: 7px 16px; border-radius: 22px; margin-bottom: 26px;
    }
    .cmd-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hero-accent); box-shadow: 0 0 0 0 rgba(45,212,191,.5); animation: cmdLivedot 1.8s infinite; }
    @keyframes cmdLivedot { 0%,100% { box-shadow: 0 0 0 0 rgba(45,212,191,.45); } 50% { box-shadow: 0 0 0 6px rgba(45,212,191,0); } }

    .cmd-node {
      position: relative; z-index: 2;
      background: color-mix(in srgb, var(--card) 62%, transparent);
      border: 1px solid color-mix(in srgb, var(--hero-accent) 26%, transparent); backdrop-filter: blur(14px);
      box-shadow: 0 20px 46px -26px color-mix(in srgb, var(--text-main) 45%, transparent);
      border-radius: 20px; opacity: 0; animation: cmdNodeIn .5s cubic-bezier(.16,1,.3,1) forwards;
      transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease;
    }
    .cmd-node:hover {
      transform: scale(.985);
      border-color: color-mix(in srgb, var(--hero-accent) 50%, transparent);
      box-shadow: 0 0 30px 1px color-mix(in srgb, var(--hero-accent) 32%, transparent), 0 20px 46px -26px color-mix(in srgb, var(--text-main) 45%, transparent);
    }

    .cmd-board {
      position: relative; z-index: 2; width: min(94vw, 1600px); direction: ltr;
      display: grid; align-items: start; gap: 16px;
      grid-template-columns: minmax(320px, 1.25fr) minmax(220px, .8fr) minmax(220px, .8fr);
      grid-template-areas: "main tech training" "main mentor updates";
    }
    /* A gentle vertical stagger on the satellites — breaks the strict
       row-aligned grid look without going back to manual positioning. */
    .cmd-tech { margin-top: 4px; }
    .cmd-training { margin-top: 34px; }
    .cmd-mentor { margin-top: 44px; }
    .cmd-updates { margin-top: 14px; }

    /* Thin connecting lines forming a mesh between the cards — a light,
       two-layer treatment (soft base + animated flowing core), not the
       earlier bold 5-layer glow tubes. */
    .cmd-glow-lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
    .cmd-glow-lines path { fill: none; vector-effect: non-scaling-stroke; }
    .cmd-glow-base { stroke: url(#cmdLineGrad); stroke-width: 1.2; opacity: .3; }
    body.dark-mode .cmd-glow-base { opacity: .55; }
    .cmd-glow-flow {
      stroke: url(#cmdLineGrad); stroke-width: 1.2; opacity: .9; stroke-dasharray: 4 16;
      filter: drop-shadow(0 0 3px var(--hero-accent)); animation: cmdLineFlow 3.5s linear infinite;
    }
    @keyframes cmdLineFlow { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
    /* .cmd-board is forced ltr so the grid-area layout stays physically
       stable regardless of language (same "fixed diagram" decision as
       before) — but the cards' own text content must still follow the
       actual page direction, not inherit the board's ltr. */
    .cmd-node { direction: rtl; }
    html[dir="ltr"] .cmd-node { direction: ltr; }
    .cmd-stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
    body:not(.dark-mode) .cmd-stars { display: none; }
    .cmd-stars span { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; animation: cmdTwinkle 3.4s ease-in-out infinite; }
    @keyframes cmdTwinkle { 0%,100% { opacity: .1; } 50% { opacity: .75; } }

    .cmd-node.cmd-tech, .cmd-node.cmd-training, .cmd-node.cmd-mentor, .cmd-node.cmd-updates {
      border: none; padding: 0; font: inherit; color: inherit; text-align: start; cursor: pointer;
    }
    .cmd-main { grid-area: main; align-self: stretch; display: flex; overflow: hidden; z-index: 2; }
    @keyframes cmdNodeIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
    .cmd-gp { animation: cmdGp 2.8s ease-in-out infinite; }
    @keyframes cmdGp { 0%,100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }

    /* Scripts: wide landscape card, icon rail on the far side */
    .cmd-rail {
      width: 128px; flex-shrink: 0; border-inline-start: 1px solid color-mix(in srgb, var(--text-main) 7%, transparent);
      padding: 16px 9px; display: flex; flex-direction: column; gap: 4px; order: 2;
    }
    .cmd-rail-item {
      display: flex; align-items: center; gap: 8px; padding: 6px 7px; border-radius: 9px;
      border: none; background: none; font: inherit; color: inherit; cursor: pointer; width: 100%; text-align: start;
    }
    .cmd-rail-item.on { background: color-mix(in srgb, var(--hero-accent) 16%, transparent); }
    .cmd-rail-item .sw { width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .cmd-rail-item .sw i { width: 8px; height: 8px; border-radius: 50%; display: block; }
    .cmd-rail-item .tx { display: flex; flex-direction: column; min-width: 0; }
    .cmd-rail-item .tx .a { font-size: 9px; font-weight: 800; color: var(--text-main); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cmd-rail-item .tx .b { font-size: 7.5px; color: var(--slate-soft); white-space: nowrap; }

    .cmd-main-body {
      flex: 1; padding: 18px 18px 16px; display: flex; flex-direction: column; min-width: 0; order: 1;
      border: none; background: none; font: inherit; color: inherit; cursor: pointer; text-align: start;
    }
    .cmd-mb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
    .cmd-ic { position: relative; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--hero-accent) 22%, transparent); border: 1px solid color-mix(in srgb, var(--hero-accent) 35%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .cmd-ic svg { width: 19px; height: 19px; position: relative; z-index: 1; stroke: var(--hero-accent) !important; }
    .cmd-ic-glow { position: absolute; inset: -9px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--hero-accent) 45%, transparent), transparent 70%); filter: blur(7px); }
    .cmd-mb-head h2 { margin: 0; font-size: 15.5px; font-weight: 800; color: var(--text-main); }
    .cmd-mb-head p { margin: 2px 0 0; font-size: 9.5px; color: var(--slate-soft); }

    .cmd-search-pill { display: flex; align-items: center; gap: 7px; background: color-mix(in srgb, var(--text-main) 5%, transparent); border: 1px solid color-mix(in srgb, var(--text-main) 9%, transparent); border-radius: 10px; padding: 8px 11px; font-size: 10px; color: var(--slate-soft); margin-bottom: 11px; }
    .cmd-search-pill svg { width: 13px; height: 13px; flex-shrink: 0; }

    .cmd-sc-row {
      display: flex; align-items: center; gap: 9px; padding: 7px 10px; margin: 0 -10px; border-radius: 8px;
      cursor: pointer; position: relative; border-inline-end: 3px solid transparent;
      transition: background-color .15s ease, transform .12s ease;
    }
    .cmd-sc-row:hover { background: color-mix(in srgb, var(--hero-accent) 8%, transparent); border-inline-end-color: var(--hero-accent); transform: translateX(-2px); }
    html[dir="ltr"] .cmd-sc-row:hover { transform: translateX(2px); }
    .cmd-sc-row:hover .t { color: var(--text-main); }
    .cmd-sc-row .n { font-size: 9px; color: var(--slate-soft); font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }
    .cmd-sc-row .t { flex: 1; font-size: 10px; font-weight: 700; color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .cmd-sc-row .tag { font-size: 7.5px; font-weight: 800; padding: 3px 9px; border-radius: 20px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }

    .cmd-stat-row { display: flex; gap: 9px; margin-top: auto; padding-top: 10px; }
    .cmd-stat { flex: 1; background: color-mix(in srgb, var(--text-main) 5%, transparent); border: 1px solid color-mix(in srgb, var(--text-main) 8%, transparent); border-radius: 11px; padding: 9px 11px; }
    .cmd-stat b { font-size: 19px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--text-main); line-height: 1; display: block; }
    .cmd-stat .lb { font-size: 7.5px; color: var(--slate-soft); margin-top: 3px; display: block; }

    /* Satellite card shared head */
    .cmd-card-head { display: flex; align-items: center; gap: 9px; padding: 15px 15px 0; margin-bottom: 11px; }
    .cmd-c-ic {
      position: relative; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
      background: color-mix(in srgb, var(--hero-accent) 22%, transparent) !important; border: 1px solid color-mix(in srgb, var(--hero-accent) 35%, transparent);
    }
    .cmd-c-ic svg { width: 16px; height: 16px; position: relative; z-index: 1; stroke: var(--hero-accent) !important; }
    .cmd-c-ic .cmd-ic-glow { background: radial-gradient(circle, color-mix(in srgb, var(--hero-accent) 45%, transparent), transparent 70%) !important; }
    .cmd-c-t { font-size: 11.5px; font-weight: 800; color: var(--text-main); }
    .cmd-c-m { font-size: 8.5px; color: var(--slate-soft); }
    .cmd-badge { font-size: 10px; font-weight: 800; color: #fff; padding: 3px 9px; border-radius: 20px; margin-inline-start: auto; background: var(--hero-accent); }

    .cmd-tech { grid-area: tech; }
    .cmd-tech > div:last-child { padding: 0 15px 15px; }
    .cmd-tech-row {
      display: flex; align-items: center; gap: 7px; padding: 6px 10px; margin: 0 -10px; border-radius: 8px;
      border-top: 1px solid color-mix(in srgb, var(--text-main) 6%, transparent);
      cursor: pointer; position: relative; border-inline-end: 3px solid transparent;
      transition: background-color .15s ease, transform .12s ease;
    }
    .cmd-tech-row:first-child { border-top: none; }
    .cmd-tech-row:hover { background: color-mix(in srgb, var(--hero-accent) 8%, transparent); border-inline-end-color: var(--hero-accent); transform: translateX(-2px); }
    html[dir="ltr"] .cmd-tech-row:hover { transform: translateX(2px); }
    .cmd-tech-row:hover .num { color: var(--text-main); }
    .cmd-tech-row .d { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
    .cmd-tech-row .num { font-size: 8.5px; font-family: 'JetBrains Mono', monospace; color: var(--slate); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cmd-tech-row .pill { font-size: 7px; font-weight: 800; padding: 2px 6px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
    .cmd-tech-empty { font-size: 9.5px; color: var(--slate-soft); padding: 4px 0 12px; }

    .cmd-training { grid-area: training; }
    .cmd-training > div:last-child { padding: 0 15px 15px; }
    .cmd-training-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
    .cmd-training-row .ic { width: 18px; height: 18px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; }
    .cmd-training-row .t { font-size: 9.5px; color: var(--slate); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cmd-training-count { display: flex; align-items: baseline; gap: 6px; padding: 2px 0 8px; }
    .cmd-training-count b { font-size: 20px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--text-main); }
    .cmd-training-count span { font-size: 9px; color: var(--slate-soft); }

    .cmd-mentor { grid-area: mentor; padding: 14px 22px; display: flex; flex-direction: column; justify-content: center; }
    .cmd-mentor-title { font-size: 10.5px; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; gap: 7px; color: var(--text-main); }
    .cmd-mentor-title svg { stroke: var(--hero-accent) !important; }
    .cmd-stepper { display: flex; align-items: center; }
    .cmd-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
    .cmd-step .circ { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; position: relative; z-index: 1; }
    .cmd-step .lbl { font-size: 8px; font-weight: 700; color: var(--slate); text-align: center; white-space: nowrap; }
    .cmd-step .lbl b { display: block; font-size: 9px; color: var(--text-main); margin-bottom: 1px; }
    .cmd-step-link { flex: 1; height: 2px; background: color-mix(in srgb, var(--text-main) 10%, transparent); margin: 0 3px 24px; position: relative; overflow: hidden; }
    .cmd-step-link.done::after { content: ''; position: absolute; inset: 0; background: var(--hero-accent); }
    .cmd-mentor-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .cmd-mentor-cta p { margin: 0; font-size: 11px; color: var(--slate); }
    .cmd-mentor-cta span.btn { font-size: 10.5px; font-weight: 800; color: #fff; background: var(--hero-accent); padding: 8px 16px; border-radius: 10px; flex-shrink: 0; white-space: nowrap; }

    .cmd-updates { grid-area: updates; }
    .cmd-updates > div:last-child { padding: 0 15px 15px; }
    .cmd-upd-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
    .cmd-upd-row .bell { width: 6px; height: 6px; border-radius: 50%; background: var(--hero-accent); flex-shrink: 0; }
    .cmd-upd-row .skel { font-size: 9.5px; color: var(--slate); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cmd-upd-row .new { font-size: 7px; font-weight: 800; background: var(--hero-accent); color: #fff; padding: 2px 6px; border-radius: 20px; flex-shrink: 0; }
    .cmd-upd-empty { font-size: 9.5px; color: var(--slate-soft); padding: 4px 0 12px; }

    @media (max-width: 900px) {
      .cmd-board {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "main main" "tech training" "mentor updates";
      }
      .cmd-tech, .cmd-training, .cmd-mentor, .cmd-updates { margin-top: 0; }
      .cmd-glow-lines { display: none; }
    }
    @media (max-width: 620px) {
      .cmd-board { grid-template-columns: 1fr; grid-template-areas: "main" "tech" "training" "mentor" "updates"; }
      .cmd-main { flex-direction: column; }
      .cmd-rail { width: 100%; border-inline-start: none; border-top: 1px solid color-mix(in srgb, var(--text-main) 7%, transparent); flex-direction: row; flex-wrap: wrap; }
    }

    /* ===== Edge quick-tools rail — small circular icon buttons docked to the
       screen edge, always visible, one unified accent color. ===== */
    .edge-rail {
      position: fixed; top: 50%; inset-inline-end: 14px; transform: translateY(-50%);
      display: flex; flex-direction: column; gap: 10px; z-index: 80;
    }
    .edge-rail .edge-tab {
      display: flex; flex: none; align-items: center; justify-content: center;
      width: 42px; height: 42px; border-radius: 50%;
      cursor: pointer; font-family: inherit; border: 1px solid color-mix(in srgb, var(--brand-teal) 35%, transparent);
      background: color-mix(in srgb, var(--card) 75%, transparent);
      backdrop-filter: blur(12px);
      box-shadow: 0 10px 24px -12px rgba(0,0,0,.4);
      transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
      position: relative; color: var(--brand-teal);
    }
    .edge-rail .edge-tab:hover, .edge-rail .edge-tab:focus-visible {
      transform: scale(1.08); background: color-mix(in srgb, var(--brand-teal) 18%, var(--card));
      box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--brand-teal) 45%, transparent);
    }
    .edge-rail .et-icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .edge-rail .et-icon svg { width: 19px; height: 19px; stroke: currentColor; }
    .edge-rail .et-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    @media (max-width: 640px) {
      .edge-rail .edge-tab { width: 36px; height: 36px; }
      .edge-rail .et-icon svg { width: 16px; height: 16px; }
      .edge-rail { gap: 8px; inset-inline-end: 8px; }
    }
    /* Rotating tip bar — one line above the tabs, sourced from Critical mistakes / Etiquette items */
    .dash-tip {
      display: none; align-items: center; gap: 10px; background: var(--surface-soft);
      border: 1px solid var(--border); border-inline-start: 3px solid var(--gold);
      border-radius: 8px; padding: 9px 14px; margin-bottom: 12px; font-size: 12.5px;
    }
    .dash-tip-label { font-weight: 800; color: var(--gold); flex-shrink: 0; white-space: nowrap; }
    .dash-tip-text { color: var(--text-main); }
    @media (max-width: 480px) { .dash-tip { font-size: 11.5px; padding: 8px 12px; } }

    /* Small header chip — same status-dot language as dash-stat-card, for the tech/training page heads */
    .dash-chip {
      display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700;
      color: var(--stat-accent, var(--brand-blue)); background: color-mix(in srgb, var(--stat-accent, var(--brand-blue)) 12%, transparent);
      padding: 5px 12px 5px 10px; border-radius: 999px; white-space: nowrap;
    }
    .dash-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--stat-accent, var(--brand-blue)); flex-shrink: 0; }
    .dash-chip:empty { display: none; }

    /* ===== Scripts full page — same slide-in overlay pattern as the other four
       Command Center sections, opened from the hero's Script Library card. ===== */
    .scripts-page {
      position: fixed; inset: 0; z-index: 90; background: var(--bg); color: var(--text-main);
      display: flex; flex-direction: column; transform: translateY(100%); opacity: 0; pointer-events: none;
      transition: transform .3s cubic-bezier(.22,.8,.25,1), opacity .3s ease; overflow-y: auto; overflow-x: hidden;
    }
    .scripts-page.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    /* Its own scroll container now (not the body), so it needs its own reserve
       against the fixed bottom bar instead of relying on body's padding-bottom. */
    .scripts-page main { padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)); }

    /* ===== Technical Issue full page (Mission Control: hero report card + live status board) ===== */
    .tech-page {
      position: fixed; inset: 0; z-index: 90; background: var(--bg); color: var(--text-main);
      display: flex; flex-direction: column; transform: translateY(100%); opacity: 0; pointer-events: none;
      transition: transform .3s cubic-bezier(.22,.8,.25,1), opacity .3s ease; overflow-y: auto; overflow-x: hidden;
    }
    .tech-page.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .tech-page-inner { position: relative; z-index: 1; margin: 0 auto; width: 100%; padding: 18px clamp(16px,4vw,56px) 90px; flex: 1; }

    .tech-page-head { display: flex; align-items: center; margin-bottom: 8px; position: sticky; top: 0; z-index: 3; padding: 6px 0; }
    .tech-back-btn {
      width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--card);
      color: var(--brand-blue); font-size: 18px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      transition: background .18s ease, transform .15s ease, border-color .18s ease;
    }
    .tech-back-btn:hover { background: color-mix(in srgb, var(--brand-blue) 10%, var(--card)); border-color: color-mix(in srgb, var(--brand-blue) 30%, var(--border)); }
    .tech-back-btn:active { transform: scale(.94); }

    /* ===== Break schedule page ===== */
    .breaks-page {
      position: fixed; inset: 0; z-index: 90; background: var(--bg); color: var(--text-main);
      display: flex; flex-direction: column; transform: translateY(100%); opacity: 0; pointer-events: none;
      transition: transform .3s cubic-bezier(.22,.8,.25,1), opacity .3s ease; overflow-y: auto; overflow-x: hidden;
    }
    .breaks-page.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .breaks-page-inner { position: relative; z-index: 1; margin: 0 auto; width: 100%; max-width: 760px; padding: 18px clamp(16px,4vw,56px) 90px; flex: 1; }
    .breaks-page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; position: sticky; top: 0; z-index: 3; padding: 6px 0; }
    .breaks-head-copy h2 { margin: 0; font-size: 17px; }
    .breaks-head-copy p { margin: 2px 0 0; font-size: 11.5px; color: var(--slate); }

    .breaks-add-panel {
      background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
      padding: 14px 16px; margin-bottom: 16px;
    }
    .breaks-add-label { margin: 0 0 10px; font-size: 11.5px; color: var(--slate); }
    .breaks-add-panel .chip-row { margin-bottom: 12px; }
    .breaks-add-selected-btn {
      background: var(--brand-blue); color: #fff; border: none; padding: 9px 16px; border-radius: 8px;
      font-weight: 800; font-size: 12px; cursor: pointer; font-family: inherit;
    }
    .breaks-add-selected-btn:disabled { opacity: .45; cursor: not-allowed; }

    .breaks-notice {
      display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--brand-teal) 12%, var(--card));
      border: 1px solid color-mix(in srgb, var(--brand-teal) 30%, var(--border)); border-radius: 10px;
      padding: 11px 14px; font-size: 12px; margin-bottom: 16px;
    }

    .breaks-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; margin-bottom: 16px; }
    .breaks-card-head { padding: 14px 18px; border-bottom: 1px solid var(--border); font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 8px; justify-content: space-between; }
    .breaks-card-head-actions { display: flex; align-items: center; gap: 10px; }
    .breaks-count { font-size: 11px; font-weight: 800; color: #fff; background: var(--brand-teal); padding: 3px 10px; border-radius: 999px; }

    .breaks-edit-toggle {
      display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--border); background: var(--bg);
      color: var(--text-main); font: inherit; font-weight: 800; font-size: 12px; padding: 7px 14px;
      border-radius: 9px; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
    }
    .breaks-edit-toggle svg { width: 13px; height: 13px; flex-shrink: 0; }
    .breaks-edit-toggle:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
    .breaks-edit-toggle.active { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
    .breaks-edit-toggle.active:hover { color: #fff; }

    .breaks-edit-hint {
      margin: 0; font-size: 12px; font-weight: 700; color: var(--brand-blue); text-align: center;
      max-height: 0; opacity: 0; overflow: hidden; transition: max-height .15s ease, opacity .15s ease, padding .15s ease;
    }
    .breaks-edit-hint.show { max-height: 40px; opacity: 1; padding: 10px 16px 0; }

    .breaks-col-labels { display: flex; align-items: center; gap: 12px; padding: 12px 18px 6px; }
    .breaks-col-labels .who { flex: 1 1 220px; min-width: 0; }
    .breaks-col-labels .b {
      flex: 1; min-width: 96px; display: flex; align-items: center; justify-content: center; gap: 5px;
      font-size: 10.5px; font-weight: 800; color: var(--slate-soft); letter-spacing: .2px;
    }
    .breaks-col-labels .b .ic { font-size: 13px; }

    .breaks-roster { display: flex; flex-direction: column; gap: 8px; padding: 6px 12px 14px; }

    .breaks-row {
      display: flex; align-items: center; gap: 12px; background: var(--card);
      border: 1.5px solid var(--border); border-radius: 14px; padding: 12px 14px;
      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .breaks-row.me { background: color-mix(in srgb, var(--brand-blue) 6%, var(--card)); }
    .breaks-roster.edit-mode .breaks-row { cursor: pointer; }
    .breaks-roster.edit-mode .breaks-row:hover { border-color: var(--brand-teal); }
    .breaks-row.picked { border-color: var(--brand-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 18%, transparent); }

    .breaks-identity { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; min-width: 0; }
    .breaks-avatar {
      width: 40px; height: 40px; border-radius: 50%; color: #fff; font-size: 13.5px; font-weight: 800;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .breaks-name { font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .breaks-you-tag {
      font-size: 10px; font-weight: 800; color: var(--brand-blue); background: color-mix(in srgb, var(--brand-blue) 12%, var(--card));
      padding: 2px 8px; border-radius: 6px; margin-inline-start: 7px; white-space: nowrap;
    }

    .breaks-row-actions { display: flex; align-items: center; gap: 7px; margin-inline-start: auto; flex-shrink: 0; }

    .breaks-remove-btn, .breaks-swap-request-btn {
      width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-soft);
      color: var(--slate-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
      transition: background .15s ease, border-color .15s ease, color .15s ease;
    }
    .breaks-remove-btn:hover { background: rgba(185,28,28,.1); border-color: #B91C1C; color: #B91C1C; }
    .breaks-remove-btn svg { width: 14px; height: 14px; }
    .breaks-swap-request-btn { background: var(--brand-teal); border-color: var(--brand-teal); color: #fff; }
    .breaks-swap-request-btn:hover { background: var(--brand-blue); border-color: var(--brand-blue); }
    .breaks-swap-request-btn svg { width: 14px; height: 14px; }

    .breaks-chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 2 1 320px; }
    .breaks-chip {
      display: flex; align-items: center; gap: 6px; border-radius: 10px; padding: 8px 11px;
      font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
      font-size: 13px; font-weight: 700; color: var(--text-main); flex: 1; min-width: 92px; justify-content: center;
    }
    .breaks-chip.b1 { background: color-mix(in srgb, var(--brand-teal) 15%, var(--card)); }
    .breaks-chip.b2 { background: color-mix(in srgb, #D6572B 14%, var(--card)); }
    .breaks-chip.b3 { background: color-mix(in srgb, #7C6FE0 15%, var(--card)); }
    .breaks-chip .ic { font-size: 14px; }
    .breaks-chip .t { white-space: nowrap; }
    .breaks-chip.editing { background: var(--card); border: 1.5px solid var(--brand-blue); }

    .breaks-chip .breaks-time-edit-btn {
      flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: none; padding: 0; background: none;
      color: var(--slate-soft); display: flex; align-items: center; justify-content: center; cursor: pointer;
      opacity: 0; transition: opacity .12s ease, color .12s ease;
    }
    .breaks-row:hover .breaks-chip .breaks-time-edit-btn { opacity: .8; }
    .breaks-chip .breaks-time-edit-btn:hover { opacity: 1 !important; color: var(--brand-blue); }
    .breaks-chip .breaks-time-edit-btn svg { width: 10.5px; height: 10.5px; }

    .breaks-chip input[type="time"] {
      width: 100%; border: none; background: none; outline: none; font: inherit; color: inherit; text-align: center; padding: 0;
    }

    .break-req-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 12px; }
    .break-req-row:last-child { border-bottom: none; }
    .break-req-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .break-req-detail .swap-desc { color: var(--slate); font-size: 11px; margin-top: 2px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
    .swap-desc .arrow { color: var(--brand-teal); }
    .break-req-actions { display: flex; gap: 6px; flex-shrink: 0; }
    .break-accept-btn, .break-decline-btn {
      border: none; border-radius: 999px; padding: 6px 13px; font-size: 11px; font-weight: 800; cursor: pointer; font-family: inherit;
    }
    .break-accept-btn { background: var(--gold); color: #fff; }
    .break-decline-btn { background: none; border: 1px solid var(--coral); color: var(--coral); }
    .break-pending-tag { font-size: 10.5px; font-weight: 800; color: var(--slate-soft); background: var(--surface-soft); padding: 4px 10px; border-radius: 999px; flex-shrink: 0; }

    /* Swap request picker */
    .picker-overlay { position: fixed; inset: 0; background: rgba(10,15,18,.5); display: none; align-items: center; justify-content: center; z-index: 200; }
    .picker-overlay.show { display: flex; }
    .picker { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; width: min(340px, 90vw); box-shadow: 0 24px 60px rgba(0,0,0,.3); }
    .picker h3 { margin: 0 0 4px; font-size: 14px; }
    .picker .sub { margin: 0 0 16px; font-size: 11.5px; color: var(--slate); }
    .picker label { display: block; font-size: 11px; font-weight: 700; margin-bottom: 5px; color: var(--slate); }
    .picker select { width: 100%; margin-bottom: 14px; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-soft); color: var(--text-main); font-family: inherit; font-size: 12.5px; }
    .picker-actions { display: flex; gap: 8px; margin-top: 4px; }
    .picker-actions button { flex: 1; padding: 10px; border-radius: 8px; border: none; font-weight: 800; cursor: pointer; font-family: inherit; font-size: 12.5px; }
    .picker-send { background: var(--brand-blue); color: #fff; }
    .picker-cancel { background: var(--surface-soft); color: var(--text-main); border: 1px solid var(--border) !important; }

    @media (max-width: 620px) {
      .breaks-page-inner { padding: 14px 12px 90px; }
      .breaks-col-labels { display: none; }
      .breaks-row { flex-wrap: wrap; }
      .breaks-chips { flex: 1 1 100%; }
      .breaks-chip { min-width: 0; }
    }

    /* Mission-control layout: full-width report banner on top, stats + live board stacked below, edge to edge */
    .tech-layout { display: flex; flex-direction: column; gap: 20px; }
    .tech-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
    .tech-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .tech-stat-tile { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
    .tech-stat-tile.accent { border-color: color-mix(in srgb, var(--brand-blue) 35%, var(--border)); background: color-mix(in srgb, var(--brand-blue) 6%, var(--card)); }
    .tech-stat-tile .n { font-size: 20px; font-weight: 800; color: var(--text-main); line-height: 1.2; }
    .tech-stat-tile .n.mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
    .tech-stat-tile .l { font-size: 10.5px; color: var(--slate-soft); margin-top: 3px; }
    @media (max-width: 480px) {
      .tech-stats-row { grid-template-columns: 1fr 1fr; }
    }

    /* Hero: report a new issue — a full-width banner spanning edge to edge, like the other pages' gradient heads */
    .tech-hero {
      overflow: hidden; border-radius: 24px;
      background: linear-gradient(120deg, #0B84FF 0%, #14B8A6 55%, #10B981 100%); border: 1px solid rgba(255,255,255,.08);
    }
    .tech-hero::before {
      content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%;
      background: radial-gradient(circle, rgba(11,132,255,.5), transparent 70%); filter: blur(50px);
      top: -220px; inset-inline-end: -80px; animation: cometDrift 12s ease-in-out infinite alternate; pointer-events: none;
    }
    .tech-hero::after {
      content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%;
      background: radial-gradient(circle, rgba(16,185,129,.3), transparent 70%); filter: blur(50px);
      bottom: -200px; inset-inline-start: -60px; animation: cometDrift 15s ease-in-out infinite alternate-reverse; pointer-events: none;
    }
    .tech-hero-inner { position: relative; z-index: 1; padding: clamp(22px,4vw,36px); }
    .tech-hero-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
    .tech-hero-kicker {
      display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; color: #fff;
      background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); padding: 5px 12px; border-radius: 20px; margin-bottom: 10px;
    }
    .tech-hero-kicker svg { width: 13px; height: 13px; }
    .tech-hero-head-copy h2 { margin: 0; font-size: 21px; font-weight: 800; color: #fff; }
    .tech-hero-sub { margin: 4px 0 0; font-size: 12.5px; color: rgba(255,255,255,.78); }
    .tech-hero-live {
      margin-inline-start: auto; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: #fff;
      background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); padding: 6px 13px; border-radius: 20px; flex-shrink: 0;
    }
    .tech-hero-live .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .7; }

    .tech-hero-num-label { display: block; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.65); margin-bottom: 8px; }
    .tech-number-row { display: flex; gap: 10px; margin-bottom: 18px; max-width: 640px; }
    .tech-number-row input {
      flex: 1; border: 1.5px solid rgba(255,255,255,.16); border-radius: 12px; padding: 14px 18px;
      background: rgba(255,255,255,.06); color: #fff; font-size: 14.5px;
    }
    .tech-number-row input::placeholder { color: rgba(255,255,255,.4); }
    #techAttachBtn {
      background: rgba(255,255,255,.12); color: #fff; border: none; border-radius: 12px; padding: 0 22px;
      font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
      transition: background .18s ease, transform .12s ease;
    }
    #techAttachBtn:hover { background: rgba(255,255,255,.2); }
    #techAttachBtn:active { transform: scale(.96); }
    #techAttachBtn:disabled { opacity: .5; cursor: not-allowed; }
    .tech-attached-row {
      display: none; align-items: center; justify-content: space-between; gap: 10px; max-width: 640px;
      background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
      border-radius: 12px; padding: 12px 16px; margin-bottom: 18px;
    }
    .tech-attached-row .num { font-weight: 800; font-size: 14px; color: #fff; }
    .tech-attached-row #techAttachedLabel { color: rgba(255,255,255,.7); font-size: 12.5px; }
    #techChangeNumBtn { background: none; border: none; color: #fff; font-weight: 700; font-size: 11.5px; cursor: pointer; text-decoration: underline; }
    #techOptionsWrap { display: none; max-width: 900px; }
    #techOptionsLabel { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.65); margin: 0 0 12px; }
    .tech-options { display: flex; gap: 14px; flex-wrap: wrap; }
    .tech-opt-btn {
      flex: 1; min-width: 160px; display: flex; align-items: center; gap: 13px; padding: 16px 18px; border-radius: 15px; cursor: pointer;
      font-size: 13px; font-weight: 700; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff;
      transition: transform .18s ease, background .18s ease;
      text-align: start;
    }
    .tech-opt-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,.09); }
    .tech-opt-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
    .tech-opt-btn .opt-icon {
      width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      font-size: 19px; background: linear-gradient(140deg, #3BB4F5, #0B84FF);
    }
    .tech-opt-btn[data-issue="closed"] .opt-icon { background: linear-gradient(140deg, #FF8A65, #F0424A); }
    .tech-opt-btn[data-issue="delay"] .opt-icon { background: linear-gradient(140deg, #FBBF24, #D97706); }

    /* Live status board */
    .tech-board-card {
      background: var(--card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
    }
    .tech-sheet-head {
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px 20px;
      border-bottom: 1px solid var(--border); background: var(--surface-soft);
    }
    .tech-sheet-head h3 {
      margin: 0; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
      display: flex; align-items: center; gap: 8px; color: var(--slate);
    }
    .tech-sheet-count {
      font-size: 10.5px; font-weight: 800; color: var(--brand-blue); background: color-mix(in srgb, var(--brand-blue) 12%, transparent);
      padding: 2px 9px; border-radius: 999px;
    }
    #techHeadCount:not(:empty) { font-size: 10.5px; color: var(--slate-soft); font-weight: 700; }
    .tech-search-shell { position: relative; margin-inline-start: auto; min-width: 200px; flex: 1 1 220px; max-width: 320px; }
    .tech-search-shell .search-icon { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--slate-soft); font-size: 15px; pointer-events: none; }
    #techRecordSearch { width: 100%; padding-inline-start: 34px; min-height: 38px; font-size: 12.5px; }
    .tech-export-btn {
      display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; min-height: 38px; padding: 0 14px;
      border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--slate);
      font-size: 12px; font-weight: 700; cursor: pointer;
      transition: background .18s ease, border-color .18s ease, color .18s ease;
    }
    .tech-export-btn:hover { color: var(--brand-blue); border-color: color-mix(in srgb, var(--brand-blue) 30%, var(--border)); background: color-mix(in srgb, var(--brand-blue) 6%, var(--card)); }
    .tech-export-btn:active { transform: scale(.96); }

    .tech-sheet-wrap { overflow-x: auto; max-height: min(64vh, 620px); overflow-y: auto; }
    #techSheetTable { width: 100%; border-collapse: collapse; font-size: 13px; }
    #techSheetTable thead th {
      position: sticky; top: 0; z-index: 1;
      text-align: start; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-soft);
      padding: 12px 16px; border-bottom: 1.5px solid var(--border); white-space: nowrap;
      background: var(--surface-soft);
    }
    #techSheetTable td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    #techSheetTable tbody tr {
      transition: background .15s ease;
      animation: cardEnter .4s cubic-bezier(.2,.75,.25,1) both;
    }
    #techSheetTable tbody tr:hover { background: color-mix(in srgb, var(--brand-blue) 4%, transparent); }
    #techSheetTable tbody tr:nth-child(2) { animation-delay: 35ms; }
    #techSheetTable tbody tr:nth-child(3) { animation-delay: 70ms; }
    #techSheetTable tbody tr:nth-child(4) { animation-delay: 105ms; }
    #techSheetTable tbody tr:nth-child(5) { animation-delay: 140ms; }
    #techSheetTable tbody tr:nth-child(n+6) { animation-delay: 170ms; }
    #techSheetTable tr:last-child td { border-bottom: none; }
    .tech-num-cell { display: flex; align-items: center; gap: 10px; font-weight: 700; }
    .tech-num-cell .num-icon {
      width: 8px; height: 8px; min-width: 8px; padding: 0; border-radius: 50%; background: var(--brand-blue);
      box-shadow: 0 0 8px 1px color-mix(in srgb, var(--brand-blue) 60%, transparent);
    }
    .tech-num-cell .num-icon svg { display: none; }
    #techSheetTable tr:has(.pill-closed) .tech-num-cell .num-icon { background: #F0424A; box-shadow: 0 0 8px 1px rgba(240,66,74,.6); }
    #techSheetTable tr:has(.pill-delay) .tech-num-cell .num-icon { background: #D97706; box-shadow: 0 0 8px 1px rgba(217,119,6,.6); }
    .tech-emp-cell { color: var(--slate); font-size: 12.5px; }
    .tech-time-cell { white-space: nowrap; color: var(--slate-soft); font-size: 12px; }

    .tech-issue-pill {
      display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 5px 12px;
      border-radius: 999px; white-space: nowrap;
    }
    .tech-issue-pill.pill-audio { background: color-mix(in srgb, var(--brand-blue) 13%, transparent); color: var(--brand-blue); }
    .tech-issue-pill.pill-closed { background: rgba(240,66,74,.13); color: #F0424A; }
    .tech-issue-pill.pill-delay { background: rgba(217,119,6,.14); color: #D97706; }
    body.dark-mode .tech-issue-pill.pill-closed { color: #FF8A80; background: rgba(240,66,74,.18); }
    body.dark-mode .tech-issue-pill.pill-delay { color: #FBBF24; background: rgba(217,119,6,.18); }

    .tech-empty { text-align: center; padding: 54px 16px; color: var(--slate-soft); }
    .tech-empty .tech-empty-icon {
      width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
      background: color-mix(in srgb, var(--brand-blue) 10%, transparent); color: var(--brand-blue); font-size: 24px;
    }
    .tech-empty strong { display: block; font-size: 13px; color: var(--text-main); margin-bottom: 4px; }
    .tech-empty span { font-size: 12px; }

    .tech-row-del {
      width: 30px; height: 30px; border-radius: 8px; display: none; align-items: center; justify-content: center;
      background: none; border: 1px solid transparent; color: var(--slate-soft); cursor: pointer; font-size: 13px;
      transition: background .15s ease, color .15s ease, border-color .15s ease;
    }
    .tech-row-del:hover { background: color-mix(in srgb, var(--brand-blue) 10%, transparent); color: var(--brand-blue); border-color: color-mix(in srgb, var(--brand-blue) 25%, transparent); }
    .admin-mode .tech-row-del { display: inline-flex; }

    .tech-skeleton-row td { padding: 14px 16px; }
    .tech-skeleton-bar { height: 11px; border-radius: 6px; background: var(--border); position: relative; overflow: hidden; width: 70%; }
    .tech-skeleton-bar::after {
      content: ''; position: absolute; inset: 0; transform: translateX(-100%);
      background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--card) 70%, #fff), transparent);
      animation: skeletonShimmer 1.3s infinite;
    }

    @media (max-width: 900px) {
      .tech-search-shell { max-width: none; flex-basis: 100%; margin-inline-start: 0; }
      .tech-sheet-wrap { max-height: none; }
    }
    @media (max-width: 620px) {
      .tech-page-inner { padding: 14px 12px 90px; }
      .tech-sheet-head { padding: 16px; }
      .tech-options { flex-direction: column; }
      #techSheetTable td, #techSheetTable thead th { padding: 11px 12px; }
    }

    /* ===== Admin: Online Users (Presence) panel ===== */
    .presence-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
    .presence-stat {
      flex: 1 1 160px; display: flex; align-items: center; gap: 10px;
      background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px;
    }
    .presence-stat strong { display: block; font-size: 17px; line-height: 1.2; color: var(--text-main); }
    .presence-stat span { font-size: 10.5px; color: var(--slate-soft); font-weight: 700; }
    .presence-stat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .presence-stat-dot.online { background: #16A34A; box-shadow: 0 0 0 3px rgba(22,163,74,.18); animation: presencePulse 2s ease-in-out infinite; }
    .presence-stat-dot.total { background: var(--brand-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 20%, transparent); }
    @keyframes presencePulse { 0%,100% { box-shadow: 0 0 0 3px rgba(22,163,74,.18); } 50% { box-shadow: 0 0 0 6px rgba(22,163,74,.05); } }

    .presence-table-wrap { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; }
    .presence-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .presence-table thead th {
      position: sticky; top: 0; z-index: 1; background: var(--card); text-align: start;
      font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--slate-soft);
      padding: 9px 10px; border-bottom: 1.5px solid var(--border); white-space: nowrap;
    }
    .presence-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .presence-table tr:last-child td { border-bottom: none; }
    .presence-table tbody tr:hover { background: color-mix(in srgb, var(--brand-blue) 4%, transparent); }
    .presence-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
    .presence-dot.on { background: #16A34A; box-shadow: 0 0 0 2px rgba(22,163,74,.18); }
    .presence-dot.off { background: var(--slate-soft); }
    .presence-user { font-weight: 700; font-size: 11.5px; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; display: inline-block; vertical-align: middle; }
    .presence-status-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
    .presence-status-pill.on { background: rgba(22,163,74,.12); color: #16A34A; }
    .presence-status-pill.off { background: color-mix(in srgb, var(--slate-soft) 16%, transparent); color: var(--slate); }
    .presence-time { color: var(--slate-soft); font-size: 11px; white-space: nowrap; }
    .presence-logout-btn {
      width: 30px; height: 30px; padding: 0; border-radius: 999px; cursor: pointer; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      background: var(--card); border: 1.5px solid var(--border); color: var(--slate);
      transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
    }
    .presence-logout-btn:hover { border-color: #B91C1C; color: #B91C1C; background: rgba(185,28,28,.1); }
    .presence-logout-btn:active { transform: scale(.92); }
    .presence-empty { text-align: center; padding: 26px 10px; color: var(--slate-soft); font-size: 12px; }

    /* ===== Shipment tracking number field (on script cards) ===== */
    .track-row { margin-bottom: 12px; }
    .track-input {
      width: 100%; box-sizing: border-box; padding: 9px 13px; border-radius: 9px;
      border: 1.5px solid var(--border); background: var(--surface-soft, var(--bg)); color: var(--text-main);
      font-size: 12.5px; font-family: inherit;
      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .track-input::placeholder { color: var(--slate-soft); }
    .track-input:focus {
      outline: none; border-color: var(--card-accent, var(--brand-blue));
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-accent, var(--brand-blue)) 16%, transparent);
      background: var(--card);
    }
    .track-input:not(:placeholder-shown) { border-color: color-mix(in srgb, var(--card-accent, var(--brand-blue)) 45%, var(--border)); }

    /* ===== Training Center (مركز التدريب) ===== */
    .training-page {
      position: fixed; inset: 0; z-index: 90; background: var(--bg); color: var(--text-main);
      display: flex; flex-direction: column; transform: translateY(100%); opacity: 0; pointer-events: none;
      transition: transform .3s cubic-bezier(.22,.8,.25,1), opacity .3s ease; overflow-y: auto; overflow-x: hidden;
    }
    .training-page.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .training-page-inner { position: relative; z-index: 1; margin: 0 auto; width: 100%; padding: 18px clamp(16px,4vw,56px) 90px; flex: 1; }

    .training-page-head {
      display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
      margin-block: -18px 24px; margin-inline: calc(-1 * clamp(16px,4vw,56px)); padding: 30px 20px 34px;
      background: linear-gradient(120deg, #0B84FF 0%, #14B8A6 55%, #10B981 100%);
      position: relative; overflow: hidden;
    }
    .training-page-head::before {
      content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%;
      background: radial-gradient(circle, rgba(11,132,255,.5), transparent 70%); filter: blur(50px);
      top: -220px; inset-inline-end: -80px; animation: cometDrift 12s ease-in-out infinite alternate; pointer-events: none;
    }
    .training-page-head::after {
      content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%;
      background: radial-gradient(circle, rgba(16,185,129,.3), transparent 70%); filter: blur(50px);
      bottom: -200px; inset-inline-start: -60px; animation: cometDrift 15s ease-in-out infinite alternate-reverse; pointer-events: none;
    }
    @keyframes cometDrift { 0% { transform: translate(0,0); } 100% { transform: translate(-60px,50px) scale(1.1); } }
    .training-head-chip, .training-head-copy { position: relative; z-index: 1; }
    .training-head-chip {
      position: absolute; top: 14px; inset-inline-end: 14px; font-size: 11px; font-weight: 700; color: #fff;
      background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); padding: 5px 12px; border-radius: 999px;
    }
    .training-head-chip:empty { display: none; }
    .training-head-copy h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; font-family: 'Amiri', 'Cairo', serif; color: #fff; }
    .training-head-copy p { margin: 0 0 18px; font-size: 12.5px; color: rgba(255,255,255,.78); }
    .training-search-shell { position: relative; max-width: 380px; width: 100%; margin: 0 auto; }
    .training-search-shell .search-icon { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--slate-soft); font-size: 16px; pointer-events: none; }
    #trainingSearchInput {
      width: 100%; box-sizing: border-box; min-height: 44px; padding-inline-start: 40px; padding-inline-end: 14px;
      border-radius: 10px; border: none; font-size: 13px; background: #fff; color: var(--text-main);
      box-shadow: 0 14px 30px -10px rgba(0,0,0,.35);
    }
    #trainingSearchInput:focus { outline: none; box-shadow: 0 14px 30px -10px rgba(0,0,0,.35), 0 0 0 3px rgba(255,255,255,.4); }

    .training-section-label {
      font-size: 11px; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: .06em;
      margin: 0 2px 12px;
    }
    .training-footer-cta {
      text-align: center; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border);
    }
    .training-footer-cta p { font-size: 12.5px; color: var(--slate); margin: 0 0 12px; }
    .training-footer-cta button {
      background: var(--gold); color: #fff; border: none; border-radius: 10px; padding: 10px 22px;
      font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer;
      transition: opacity .18s ease, transform .15s ease;
    }
    .training-footer-cta button:hover { opacity: .9; }
    .training-footer-cta button:active { transform: scale(.96); }

    .training-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
    .training-card {
      cursor: pointer; text-align: start; padding: 0; min-height: 0; margin: 0; overflow: hidden;
      display: flex; flex-direction: column;
    }
    .training-card::after { content: none; }
    .training-card-icon-legacy {
      width: 100%; height: 100px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      font-size: 34px; background: color-mix(in srgb, var(--card-accent, var(--brand-blue)) 15%, transparent);
    }
    .training-card-body { flex: 1; min-width: 0; padding: 14px 16px 16px; }
    .training-card-title { font-weight: 800; font-size: 13.5px; color: var(--text-main); margin-bottom: 4px; }
    .training-card-desc { font-size: 11.5px; line-height: 1.55; color: var(--slate); margin-bottom: 10px; }
    .training-card-more {
      font-size: 10.5px; font-weight: 800; color: var(--card-accent, var(--brand-blue)); display: inline-flex;
      align-items: center; gap: 4px; transition: gap .18s ease;
    }
    .training-card:hover .training-card-more { gap: 7px; }
    .training-card:nth-child(2) { animation-delay: 45ms; }
    .training-card:nth-child(3) { animation-delay: 90ms; }
    .training-card:nth-child(4) { animation-delay: 135ms; }
    .training-card:nth-child(n+5) { animation-delay: 175ms; }

    /* Isometric 3D-style illustration banner — reused for grid cards, question stage, and solution stage */
    .training-illus { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
    .training-illus-svg { position: relative; z-index: 1; animation: trainingFloat 3.4s ease-in-out infinite; filter: drop-shadow(0 8px 12px rgba(0,0,0,.16)); }
    .training-illus-glow {
      position: absolute; top: -18%; inset-inline-start: -10%; width: 62%; height: 62%; border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,.65), rgba(255,255,255,0) 70%); pointer-events: none;
    }
    .training-illus-shadow {
      position: absolute; bottom: 14%; left: 50%; transform: translateX(-50%); border-radius: 50%;
      background: rgba(0,0,0,.16); filter: blur(3px); animation: trainingShadowPulse 3.4s ease-in-out infinite;
    }
    @keyframes trainingFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-7px) rotate(-2deg); } }
    @keyframes trainingShadowPulse { 0%, 100% { transform: translateX(-50%) scale(1); opacity: .3; } 50% { transform: translateX(-50%) scale(.72); opacity: .14; } }

    .training-illus-card { height: 122px; transition: height .2s ease; }
    .training-illus-card .training-illus-svg { width: 68px; height: 68px; }
    .training-illus-card .training-illus-shadow { width: 50px; height: 9px; }

    .training-illus-question { height: 88px; margin: -20px -20px 16px; width: calc(100% + 40px); }
    .training-illus-question .training-illus-svg { width: 48px; height: 48px; }
    .training-illus-question .training-illus-shadow { width: 38px; height: 7px; }

    .training-illus-end { height: 96px; margin: -26px -22px 14px; width: calc(100% + 44px); }
    .training-illus-end .training-illus-svg { width: 52px; height: 52px; }
    .training-illus-end .training-illus-shadow { width: 40px; height: 7px; }

    .training-tree-back {
      display: inline-flex; align-items: center; gap: 7px; background: var(--card); border: 1px solid var(--border);
      border-radius: 9px; padding: 8px 14px; font-size: 12px; font-weight: 700; color: var(--slate); cursor: pointer;
      margin-bottom: 16px; transition: border-color .18s ease, color .18s ease, background .18s ease;
    }
    .training-tree-back:hover { color: var(--brand-blue); border-color: color-mix(in srgb, var(--brand-blue) 30%, var(--border)); background: color-mix(in srgb, var(--brand-blue) 6%, var(--card)); }
    .training-tree-back svg { flex-shrink: 0; }
    body[dir="ltr"] .training-tree-back svg { transform: scaleX(-1); }

    .training-tree-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
    .training-tree-icon {
      width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
      font-size: 19px; background: color-mix(in srgb, var(--training-accent, var(--brand-blue)) 14%, transparent); flex-shrink: 0;
    }
    .training-tree-head h3 { margin: 0; font-size: 16.5px; font-weight: 800; font-family: 'Amiri','Cairo',serif; color: var(--text-main); }

    .training-tree-stage { max-width: 620px; margin: 0 auto; }
    .training-trail { display: flex; flex-direction: column; align-items: stretch; }
    .training-connector {
      width: 2px; height: 24px; margin: 0 auto; background: linear-gradient(180deg, color-mix(in srgb, var(--training-accent, var(--brand-blue)) 45%, transparent), color-mix(in srgb, var(--training-accent, var(--brand-blue)) 10%, transparent)); position: relative;
      animation: cardEnter .3s ease both;
    }
    .training-connector::after {
      content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%);
      width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
      border-top: 6px solid color-mix(in srgb, var(--training-accent, var(--brand-blue)) 55%, transparent);
    }

    .training-node-card {
      background: color-mix(in srgb, var(--card) 90%, transparent); border: 1px solid var(--border); border-radius: 16px;
      padding: 20px; box-shadow: 0 8px 22px -14px rgba(20,91,140,.2);
      backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%);
      animation: cardEnter .38s cubic-bezier(.2,.75,.25,1) both;
    }
    /* Each node-card is followed by a .training-connector sibling, so trail steps land on the odd nth-child positions. */
    .training-trail .training-node-card:nth-child(3) { animation-delay: 55ms; }
    .training-trail .training-node-card:nth-child(5) { animation-delay: 110ms; }
    .training-trail .training-node-card:nth-child(7) { animation-delay: 165ms; }
    .training-trail .training-node-card:nth-child(n+9) { animation-delay: 200ms; }
    .training-node-card.answered {
      opacity: .68; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    }
    .training-node-card.answered .training-answered-q { font-size: 12px; font-weight: 700; color: var(--slate); }
    .training-node-card.answered .training-answered-a {
      font-size: 11.5px; font-weight: 800; color: var(--training-accent, var(--brand-blue));
      background: color-mix(in srgb, var(--training-accent, var(--brand-blue)) 12%, transparent); padding: 4px 11px; border-radius: 999px;
    }
    .training-node-card.active { border-color: color-mix(in srgb, var(--training-accent, var(--brand-blue)) 32%, var(--border)); box-shadow: 0 16px 34px -16px color-mix(in srgb, var(--training-accent, var(--brand-blue)) 45%, transparent); }
    .training-question { font-size: 15px; font-weight: 800; color: var(--text-main); margin: 0 0 16px; line-height: 1.5; text-align: center; }
    .training-options { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
    .training-opt-btn {
      flex: 1 1 150px; max-width: 260px; padding: 12px 16px; border-radius: 11px; cursor: pointer;
      font-size: 13px; font-weight: 700; border: 1.5px solid var(--border); background: var(--surface-soft, var(--bg)); color: var(--text-main);
      transition: border-color .18s ease, transform .15s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
    }
    .training-opt-btn:hover {
      border-color: var(--training-accent, var(--brand-blue)); color: var(--training-accent, var(--brand-blue));
      background: color-mix(in srgb, var(--training-accent, var(--brand-blue)) 8%, var(--surface-soft, var(--bg)));
      transform: translateY(-2px); box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--training-accent, var(--brand-blue)) 55%, transparent);
    }
    .training-opt-btn:active { transform: translateY(0) scale(.98); }

    .training-end-card {
      background: color-mix(in srgb, var(--training-accent, #16A34A) 8%, var(--card));
      border: 1.5px solid color-mix(in srgb, var(--training-accent, #16A34A) 32%, var(--border));
      border-radius: 18px; padding: 26px 22px; text-align: center; overflow: hidden;
      animation: cardEnter .4s cubic-bezier(.2,.75,.25,1) both;
    }
    .training-end-title { font-size: 16px; font-weight: 800; color: var(--training-accent, #15803D); margin: 0 0 16px; }
    .training-end-fields { display: flex; flex-direction: column; gap: 10px; text-align: start; margin-bottom: 18px; }
    .training-end-field { background: var(--card); border: 1px solid color-mix(in srgb, var(--training-accent, #16A34A) 22%, var(--border)); border-radius: 10px; padding: 10px 14px; }
    .training-end-field .lbl { display: block; font-size: 10.5px; font-weight: 800; color: var(--training-accent, #16A34A); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
    .training-end-field .val { font-size: 13px; color: var(--text-main); white-space: pre-line; }
    .training-end-field .val.empty { color: var(--slate-soft); font-style: italic; }
    .training-restart-btn {
      display: inline-flex; align-items: center; gap: 8px; background: var(--training-accent, #16A34A); color: #fff; border: none;
      border-radius: 10px; padding: 11px 22px; font-size: 13px; font-weight: 700; cursor: pointer;
      transition: opacity .18s ease, transform .15s ease; box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--training-accent, #16A34A) 55%, transparent);
    }
    .training-restart-btn:hover { opacity: .9; }
    .training-restart-btn:active { transform: scale(.96); }

    @media (max-width: 620px) {
      .training-page-inner { padding: 14px 12px 90px; }
      .training-page-head { margin: -14px -12px 20px; padding: 26px 16px 28px; }
      .training-grid { grid-template-columns: 1fr 1fr; }
      .training-node-card { padding: 16px; }
      .training-question { font-size: 14px; }
      .training-opt-btn { flex: 1 1 100%; max-width: none; }
    }
    @media (max-width: 420px) {
      .training-grid { grid-template-columns: 1fr; }
    }

    /* ===== Updates page (full page — was a cramped side-panel) ===== */
    .updates-page {
      position: fixed; inset: 0; z-index: 90; background: var(--bg); color: var(--text-main);
      display: flex; flex-direction: column; transform: translateY(100%); opacity: 0; pointer-events: none;
      transition: transform .3s cubic-bezier(.22,.8,.25,1), opacity .3s ease; overflow-y: auto; overflow-x: hidden;
    }
    .updates-page.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .updates-page-inner { position: relative; z-index: 1; margin: 0 auto; width: 100%; padding: 18px clamp(16px,4vw,56px) 90px; flex: 1; }

    .updates-page-head {
      display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
      margin-block: -18px 24px; margin-inline: calc(-1 * clamp(16px,4vw,56px)); padding: 30px 20px 34px;
      background: linear-gradient(120deg, #0B84FF 0%, #14B8A6 55%, #10B981 100%);
      position: relative; overflow: hidden;
    }
    .updates-page-head::before {
      content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%;
      background: radial-gradient(circle, rgba(11,132,255,.5), transparent 70%); filter: blur(50px);
      top: -220px; inset-inline-end: -80px; animation: cometDrift 12s ease-in-out infinite alternate; pointer-events: none;
    }
    .updates-page-head::after {
      content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%;
      background: radial-gradient(circle, rgba(16,185,129,.3), transparent 70%); filter: blur(50px);
      bottom: -200px; inset-inline-start: -60px; animation: cometDrift 15s ease-in-out infinite alternate-reverse; pointer-events: none;
    }
    .updates-head-copy { position: relative; z-index: 1; }
    .updates-head-copy h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: #fff; }
    .updates-head-copy p { margin: 0; font-size: 12.5px; color: rgba(255,255,255,.78); }

    /* Timeline layout: main feed grouped by day + a pinned search/stats sidebar */
    .updates-layout { display: grid; grid-template-columns: 1fr 260px; gap: 26px; align-items: start; }
    .updates-sidebar { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; }
    .updates-side-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
    .updates-side-card h4 { margin: 0 0 12px; font-size: 12px; font-weight: 800; color: var(--slate); }
    .updates-search-shell { position: relative; }
    .updates-search-shell .search-icon { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--slate-soft); font-size: 15px; pointer-events: none; }
    #updatesSearchInput {
      width: 100%; box-sizing: border-box; min-height: 40px; padding-inline-start: 36px; padding-inline-end: 12px;
      border-radius: 9px; font-size: 12.5px; background: var(--surface-soft); border: 1px solid var(--border); color: var(--text-main);
    }
    .updates-side-stat-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--slate); padding: 8px 0; border-bottom: 1px solid var(--border); }
    .updates-side-stat-row:last-child { border-bottom: none; padding-bottom: 0; }
    .updates-side-stat-row span:last-child { font-weight: 800; color: var(--text-main); font-family: 'JetBrains Mono', monospace; }

    .chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
    .chip {
      font-size: 10.5px; font-weight: 700; padding: 6px 11px; border-radius: 999px; cursor: pointer;
      background: var(--surface-soft); color: var(--slate); border: 1px solid var(--border); transition: background .15s ease, color .15s ease, border-color .15s ease;
      user-select: none;
    }
    .chip:hover { border-color: var(--brand-blue); }
    .chip.on { background: linear-gradient(120deg, #0B84FF, #14B8A6); color: #fff; border-color: transparent; }

    /* Timeline: a connecting spine with a dot per update, grouped under day labels */
    .updates-list.timeline { position: relative; padding-inline-start: 24px; }
    .updates-list.timeline::before {
      content: ''; position: absolute; inset-inline-start: 5px; top: 6px; bottom: 6px; width: 2px;
      background: linear-gradient(180deg, var(--brand-blue), #14B8A6, #10B981); opacity: .35;
    }
    .tl-group-label {
      font-size: 10.5px; font-weight: 800; color: var(--slate-soft); text-transform: uppercase; letter-spacing: .05em;
      margin: 20px 0 10px;
    }
    .tl-group-label:first-child { margin-top: 0; }
    .tl-item { position: relative; margin-bottom: 12px; }
    .tl-item::before {
      content: ''; position: absolute; inset-inline-start: -24px; top: 6px; width: 10px; height: 10px; border-radius: 50%;
      background: var(--bg); border: 2px solid var(--brand-blue);
    }
    .update-card { margin-bottom: 0; }
    .update-new-chip {
      font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #fff;
      background: #6E5A9E; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
    }
    .update-card.is-new { border-inline-start-color: #8B5CF6; box-shadow: 0 0 0 1px color-mix(in srgb, #8B5CF6 25%, transparent); }

    .updates-empty { text-align: center; padding: 54px 16px; color: var(--slate-soft); }
    .updates-empty-icon {
      width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
      background: color-mix(in srgb, #6E5A9E 12%, transparent); color: #6E5A9E; font-size: 24px;
    }
    .updates-empty strong { display: block; font-size: 13px; color: var(--text-main); margin-bottom: 4px; }
    .updates-empty span { font-size: 12px; }

    @media (max-width: 900px) {
      .updates-layout { grid-template-columns: 1fr; }
      .updates-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
      .updates-side-card { flex: 1 1 220px; }
    }
    @media (max-width: 620px) {
      .updates-page-inner { padding: 14px 12px 90px; }
      .updates-page-head { margin: -14px -12px 20px; padding: 26px 16px 28px; }
    }

    /* ===== Mentorship ("Buddy System") page ===== */
    .mentorship-page {
      position: fixed; inset: 0; z-index: 90; background: var(--bg); color: var(--text-main);
      display: flex; flex-direction: column; transform: translateY(100%); opacity: 0; pointer-events: none;
      transition: transform .3s cubic-bezier(.22,.8,.25,1), opacity .3s ease; overflow-y: auto; overflow-x: hidden;
    }
    .mentorship-page.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .mentorship-page-inner { position: relative; z-index: 1; margin: 0 auto; width: 100%; padding: 18px clamp(16px,4vw,56px) 90px; flex: 1; }
    #mentorIncomingList { display: flex; flex-direction: column; gap: 10px; }

    /* Tab 1 "Request a Mentor": a compact request bar on top, full width, edge to edge */
    .mentor-request-bar {
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 22px;
    }
    .mentor-request-bar-lbl { font-size: 12.5px; font-weight: 700; color: var(--slate); white-space: nowrap; flex-shrink: 0; }
    .mentor-request-bar select#mentorRequestEmail { flex: 1 1 220px; min-width: 0; }
    .mentor-request-bar input#mentorRequestNote { flex: 1.4 1 260px; min-width: 0; }
    .mentor-request-bar .mentorship-primary-btn { width: auto; flex-shrink: 0; padding: 10px 22px; }

    /* Status table: same visual language as the Technical Issues log */
    .mentor-table-card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
    .mentor-table-head {
      display: flex; align-items: center; gap: 10px; padding: 16px 18px;
      border-bottom: 1px solid var(--border); background: var(--surface-soft);
    }
    .mentor-table-head h4 {
      margin: 0; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--slate);
    }
    .mentor-table-count {
      font-size: 10.5px; font-weight: 800; color: var(--brand-blue); background: color-mix(in srgb, var(--brand-blue) 12%, transparent);
      padding: 2px 9px; border-radius: 999px;
    }
    .mentor-table-wrap { overflow-x: auto; }
    #mentorOutgoingTable { width: 100%; border-collapse: collapse; font-size: 13px; }
    #mentorOutgoingTable thead th {
      text-align: start; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-soft);
      padding: 12px 16px; border-bottom: 1.5px solid var(--border); white-space: nowrap; background: var(--surface-soft);
    }
    #mentorOutgoingTable td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    #mentorOutgoingTable tr:last-child td { border-bottom: none; }
    .mentor-who-cell { font-weight: 700; color: var(--text-main); }
    .mentor-reason-cell { color: var(--slate); font-size: 12.5px; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mentor-date-cell { white-space: nowrap; color: var(--slate-soft); font-size: 12px; font-family: 'JetBrains Mono', monospace; }
    .mentor-table-empty { text-align: center; padding: 44px 16px; color: var(--slate-soft); }
    .mentor-table-empty-icon {
      width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
      background: color-mix(in srgb, var(--brand-blue) 10%, transparent); color: var(--brand-blue); font-size: 21px;
    }
    @media (max-width: 620px) {
      .mentor-request-bar select#mentorRequestEmail, .mentor-request-bar input#mentorRequestNote { flex: 1 1 100%; }
      .mentor-request-bar .mentorship-primary-btn { flex: 1 1 100%; }
      .mentor-reason-cell { max-width: 160px; }
    }

    /* ===== New Hire Onboarding Journey ===== */
    .onboarding-page {
      position: fixed; inset: 0; z-index: 95; background: var(--bg); color: var(--text-main);
      display: flex; flex-direction: column; transform: translateY(100%); opacity: 0; pointer-events: none;
      transition: transform .3s cubic-bezier(.22,.8,.25,1), opacity .3s ease; overflow-y: auto; overflow-x: hidden;
    }
    .onboarding-page.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .onboarding-page-inner { position: relative; z-index: 1; margin: 0 auto; width: 100%; padding: 18px clamp(16px,4vw,56px) 90px; flex: 1; }

    /* ===== Shared page background: every full-page overlay gets the exact same
       gradient + grid + drifting glow as the home hero (.cmd-hero), instead of a
       flat solid fill, so opening any page never feels like jumping to plain
       black/white. Each real page's own opaque cards/content sit at z-index:1
       (see e.g. .breaks-page-inner), so these two z-index:0 glow blobs never
       show through or clash with anything readable. */
    .app-page-bg {
      background:
        linear-gradient(rgba(13,148,136,.048) 1px, transparent 1px) 0 0 / 34px 34px,
        linear-gradient(90deg, rgba(13,148,136,.048) 1px, transparent 1px) 0 0 / 34px 34px,
        linear-gradient(160deg, #eef9f6 0%, #dcf4ee 50%, #cdeee5 100%);
    }
    body.dark-mode .app-page-bg {
      background:
        linear-gradient(rgba(45,212,191,.121) 1px, transparent 1px) 0 0 / 34px 34px,
        linear-gradient(90deg, rgba(45,212,191,.121) 1px, transparent 1px) 0 0 / 34px 34px,
        linear-gradient(160deg, #071b26 0%, #0a2e2b 55%, #0d3b34 100%);
    }
    .app-page-bg::before, .app-page-bg::after {
      content: ''; position: absolute; z-index: 0; border-radius: 50%; filter: blur(56px); pointer-events: none; opacity: .5;
    }
    body.dark-mode .app-page-bg::before, body.dark-mode .app-page-bg::after { opacity: .8; }
    .app-page-bg::before {
      width: 44vw; height: 44vw; top: -8%; inset-inline-end: -8%;
      background: radial-gradient(circle, rgba(13,148,136,.4), transparent 66%);
      animation: cmdDriftA 26s ease-in-out infinite alternate;
    }
    .app-page-bg::after {
      width: 36vw; height: 36vw; bottom: -12%; inset-inline-start: -8%;
      background: radial-gradient(circle, rgba(45,212,191,.3), transparent 66%);
      animation: cmdDriftB 30s ease-in-out infinite alternate;
    }

    /* Every one of these pages stays mounted off-screen (transform + opacity, not
       display:none) even while closed, so any CSS animation inside one — including
       the blob glow above, and each page's own hero-banner "comet" blur decorations
       (.tech-hero::before/::after, .training-page-head::before, etc.) — kept running
       every frame, on every page, all the time, from the moment the app loaded,
       whether that page was ever opened or not. With 7 pages each doing this at
       once, that's the main source of the site-wide slowness: stop every animation
       inside a page the instant it's not .open, and let it resume seamlessly
       (mid-loop, no visual jump) the moment it opens again. */
    .app-page-bg:not(.open),
    .app-page-bg:not(.open) *,
    .app-page-bg:not(.open)::before,
    .app-page-bg:not(.open)::after,
    .app-page-bg:not(.open) *::before,
    .app-page-bg:not(.open) *::after {
      animation-play-state: paused !important;
    }

    .onboarding-top { display: flex; justify-content: flex-end; margin-bottom: 6px; }
    .onboarding-skip {
      display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--slate-soft);
      cursor: pointer; padding: 6px 12px; border-radius: 20px; transition: background .15s ease, color .15s ease;
    }
    .onboarding-skip:hover { background: var(--surface-soft); color: var(--text-main); }

    .onboarding-hero {
      display: flex; align-items: center; margin-block: 0 26px;
      margin-inline: calc(-1 * clamp(16px,4vw,56px)); padding: 30px clamp(16px,4vw,56px) 34px;
      background: linear-gradient(120deg, #0B84FF 0%, #14B8A6 55%, #10B981 100%);
      position: relative; overflow: hidden;
    }
    .onboarding-hero::before {
      content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,.3), transparent 70%); filter: blur(50px);
      top: -200px; inset-inline-end: -70px; animation: cometDrift 12s ease-in-out infinite alternate; pointer-events: none;
    }
    .onboarding-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; position: relative; z-index: 1; width: 100%; }
    .onboarding-hero-copy h2 { margin: 0; font-size: 22px; font-weight: 800; color: #fff; }
    .onboarding-hero-copy p { margin: 6px 0 0; font-size: 13px; color: rgba(255,255,255,.85); max-width: 560px; }
    .onboarding-ring { position: relative; width: 86px; height: 86px; flex-shrink: 0; }
    .onboarding-ring svg { transform: rotate(-90deg); }
    .onboarding-ring-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: #fff; font-family: 'JetBrains Mono', monospace; }
    .onboarding-ring-lbl { position: absolute; bottom: -18px; width: 100%; text-align: center; font-size: 9.5px; color: rgba(255,255,255,.85); font-weight: 700; white-space: nowrap; }

    .onboarding-steps { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
    .onboarding-step {
      display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--border);
      border-radius: 14px; padding: 16px 18px; transition: opacity .2s ease;
    }
    .onboarding-step.done { opacity: .6; }
    .onboarding-step .chk {
      width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 800; font-family: 'JetBrains Mono', monospace;
      background: var(--surface-soft); color: var(--slate-soft); border: 1.5px solid var(--border);
    }
    .onboarding-step.done .chk { background: color-mix(in srgb, #10B981 18%, transparent); color: #10B981; border-color: transparent; }
    .onboarding-step .info { flex: 1; min-width: 0; }
    .onboarding-step .title { font-size: 13.5px; font-weight: 700; color: var(--text-main); }
    .onboarding-step .sub { font-size: 11.5px; color: var(--slate-soft); margin-top: 2px; }
    .onboarding-step .go {
      flex-shrink: 0; background: var(--surface-soft); border: 1px solid var(--border); color: var(--text-main);
      font-size: 11.5px; font-weight: 700; padding: 8px 16px; border-radius: 9px; cursor: pointer;
      transition: background .15s ease, border-color .15s ease;
    }
    .onboarding-step .go:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
    .onboarding-step.done .go { background: none; border: none; color: #10B981; cursor: default; }
    @media (max-width: 620px) {
      .onboarding-hero { flex-direction: column; align-items: flex-start; margin-bottom: 20px; padding: 26px 16px 28px; }
      .onboarding-hero-top { flex-direction: column; align-items: flex-start; }
      .onboarding-ring { margin-top: 14px; }
    }

    /* Inbox layout for the Chats tab: conversation list pinned on the side, thread fills the rest */
    .mentor-inbox {
      display: grid; grid-template-columns: 320px 1fr; border: 1px solid var(--border); border-radius: 16px;
      overflow: hidden; min-height: 560px; background: var(--card);
    }
    .mentor-inbox.thread-open { grid-template-columns: 320px 1fr 240px; }
    .mentor-inbox-list { border-inline-end: 1px solid var(--border); overflow-y: auto; padding: 10px; }
    .mentor-inbox-thread { display: flex; flex-direction: column; min-width: 0; }
    .mentor-inbox-empty {
      flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
      color: var(--slate-soft); font-size: 13px; font-weight: 700;
    }
    .mentor-inbox-empty-icon { font-size: 30px; opacity: .6; }
    #mentorChatThread { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 16px 18px 0; }
    .mentorship-chat-messages { flex: 1; max-height: none; }

    /* Side panel: other party's profile + mentorship summary stats, shown while a thread is open */
    .mentor-inbox-side { border-inline-start: 1px solid var(--border); padding: 18px; background: var(--surface-soft); flex-direction: column; }
    .mentor-inbox-side .m-profile { text-align: center; margin-bottom: 18px; }
    .mentor-inbox-side .profile-avatar-lg { margin: 0 auto 8px; }
    .mentor-inbox-side .m-name { font-size: 13px; font-weight: 800; color: var(--text-main); }
    .mentor-inbox-side .m-role { font-size: 10.5px; color: var(--slate-soft); margin-top: 2px; }
    .mentor-inbox-side h4 { margin: 0 0 10px; font-size: 12px; font-weight: 800; color: var(--slate); }
    .mentor-inbox-side .m-stat-row {
      display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: var(--slate);
      padding: 9px 0; border-bottom: 1px solid var(--border);
    }
    .mentor-inbox-side .m-stat-row:last-child { border-bottom: none; }
    .mentor-inbox-side .m-stat-row .mono { font-weight: 800; color: var(--text-main); font-family: 'JetBrains Mono', monospace; }

    @media (max-width: 1100px) {
      .mentor-inbox-side { display: none !important; }
      .mentor-inbox.thread-open { grid-template-columns: 320px 1fr; }
    }
    @media (max-width: 860px) {
      .mentor-inbox { grid-template-columns: 1fr; min-height: 0; }
      .mentor-inbox-list { border-inline-end: none; border-bottom: 1px solid var(--border); max-height: 260px; }
      .mentor-inbox.thread-open { grid-template-columns: 1fr; }
      .mentor-inbox.thread-open .mentor-inbox-list { display: none; }
      .mentor-inbox:not(.thread-open) .mentor-inbox-thread { display: none; }
      .mentorship-back-link { display: inline-block; }
    }
    @media (min-width: 861px) {
      .mentorship-back-link { display: none; }
    }

    .mentorship-page-head {
      display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
      margin-block: -18px 20px; margin-inline: calc(-1 * clamp(16px,4vw,56px)); padding: 30px 20px 34px;
      background: linear-gradient(120deg, #0B84FF 0%, #14B8A6 55%, #10B981 100%);
      position: relative; overflow: hidden;
    }
    .mentorship-page-head::before {
      content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,.35), transparent 70%); filter: blur(50px);
      top: -200px; inset-inline-end: -70px; animation: cometDrift 12s ease-in-out infinite alternate; pointer-events: none;
    }
    .mentorship-head-copy { position: relative; z-index: 1; }
    .mentorship-head-copy h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: #fff; }
    .mentorship-head-copy p { margin: 0; font-size: 12.5px; color: rgba(255,255,255,.85); }

    .mentor-notify-banner {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      background: color-mix(in srgb, var(--brand-blue) 10%, var(--card));
      border: 1px solid color-mix(in srgb, var(--brand-blue) 30%, var(--border));
      border-radius: 10px; padding: 10px 12px; margin-bottom: 16px;
      font-size: 12px; font-weight: 600; color: var(--text-main);
    }
    .mentor-notify-banner button {
      flex-shrink: 0; background: linear-gradient(120deg, #0B84FF, #10B981); color: #fff; border: none;
      font-family: inherit; font-weight: 800; font-size: 11.5px; padding: 7px 14px; border-radius: 999px; cursor: pointer;
    }
    .mentor-notify-banner button:hover { filter: brightness(1.08); }

    .mentorship-tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
    .mentorship-tab-btn {
      display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--border); color: var(--slate);
      padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; cursor: pointer;
      transition: background .18s ease, color .18s ease, border-color .18s ease;
    }
    .mentorship-tab-btn.active { background: #0B84FF; color: #fff; border-color: #0B84FF; }
    .mentorship-tab-btn:hover:not(.active) { border-color: #0B84FF; color: #0B84FF; }
    .mentorship-tab-badge {
      min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: #F0424A; color: #fff;
      font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
    }

    .mentorship-primary-btn {
      width: 100%; background: #0B84FF; color: #fff; border: none; padding: 10px; border-radius: 8px;
      font-weight: 700; cursor: pointer; transition: opacity .18s ease, transform .15s ease;
    }
    .mentorship-primary-btn:hover { opacity: .92; }
    .mentorship-primary-btn:active { transform: scale(.98); }

    .mentor-request-card {
      border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
      display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
      animation: cardEnter .36s cubic-bezier(.2,.75,.25,1) both;
    }
    .mentor-request-card .who { font-size: 12.5px; font-weight: 700; color: var(--text-main); }
    .mentor-request-card .note { font-size: 11.5px; color: var(--slate); margin-top: 2px; white-space: pre-line; }
    .mentor-request-card .actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
    .mentor-status-pill {
      font-size: 10px; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
    }
    .mentor-status-pill.pending { color: #D97706; background: color-mix(in srgb, #D97706 14%, transparent); }
    .mentor-status-pill.accepted { color: #10B981; background: color-mix(in srgb, #10B981 14%, transparent); }
    .mentor-status-pill.declined { color: #B91C1C; background: color-mix(in srgb, #B91C1C 14%, transparent); }
    .mentor-accept-btn, .mentor-decline-btn {
      border: none; padding: 6px 13px; border-radius: 999px; font-size: 11px; font-weight: 800; cursor: pointer;
    }
    .mentor-accept-btn { background: #10B981; color: #fff; }
    .mentor-decline-btn { background: none; border: 1px solid #B91C1C; color: #B91C1C; }

    .mentor-chat-card {
      border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer;
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      transition: border-color .18s ease, background .18s ease;
      animation: cardEnter .36s cubic-bezier(.2,.75,.25,1) both;
    }
    .mentor-chat-card:hover { border-color: color-mix(in srgb, #0B84FF 30%, var(--border)); background: color-mix(in srgb, #0B84FF 5%, var(--card)); }
    .mentor-chat-card.on { border-color: #0B84FF; background: color-mix(in srgb, #0B84FF 10%, var(--card)); }
    .mentor-chat-card .who { font-size: 13px; font-weight: 700; color: var(--text-main); }
    .mentor-chat-card .role-tag { font-size: 10px; font-weight: 700; color: var(--slate-soft); }

    .mentorship-back-link { background: none; border: none; color: #0B84FF; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 4px 0 14px; }
    .mentorship-chat-messages { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; padding: 4px 2px 14px; }
    .mentor-msg { max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.5; white-space: pre-line; }
    .mentor-msg .mentor-msg-time { display: block; font-size: 9.5px; opacity: .65; margin-top: 3px; }
    .mentor-msg.mine { align-self: flex-end; background: #0B84FF; color: #fff; border-bottom-right-radius: 4px; }
    .mentor-msg.theirs { align-self: flex-start; background: var(--surface-soft, var(--bg)); color: var(--text-main); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
    .mentorship-chat-input-row { display: flex; gap: 8px; position: sticky; bottom: 0; background: var(--bg); padding-top: 8px; }
    #mentorChatInput { flex: 1; min-height: 42px; }
    #mentorChatSendBtn {
      width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px; border: none; background: #0B84FF; color: #fff;
      font-size: 16px; font-weight: 800; cursor: pointer;
    }
    .mentorship-empty { font-size: 11.5px; color: var(--slate-soft); text-align: center; padding: 20px 10px; }

    @media (max-width: 620px) {
      .mentorship-page-inner { padding: 14px 12px 90px; }
      .mentorship-page-head { margin: -14px -12px 18px; padding: 26px 16px 28px; }
    }

    /* ===== Admin: Training Center management (Tree Builder) ===== */
    .tb-subnav { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
    .tb-subnav-btn {
      background: var(--bg); border: 1px solid var(--border); color: var(--text-main);
      padding: 7px 13px; border-radius: 7px; font-size: 12px; font-weight: 700; cursor: pointer;
      transition: background .18s ease, color .18s ease, border-color .18s ease;
    }
    .tb-subnav-btn.active { background: #6E5A9E; color: #fff; border-color: #6E5A9E; }
    .tb-subnav-btn:hover:not(.active) { border-color: #6E5A9E; color: #6E5A9E; }

    .tb-mini-title { font-size: 12.5px; font-weight: 700; color: var(--text-main); margin: 0 0 10px; }
    .tb-empty-hint { font-size: 12px; color: var(--slate-soft); background: var(--bg); border: 1px dashed var(--border); border-radius: 8px; padding: 12px; text-align: center; }

    .tb-stats-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
    .tb-stat { flex: 1 1 110px; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; text-align: center; }
    .tb-stat strong { display: block; font-size: 18px; color: var(--text-main); }
    .tb-stat span { font-size: 10px; color: var(--slate-soft); font-weight: 700; }
    .tb-stat-warn strong { color: #D97706; }

    .tb-issue-ok { font-size: 12.5px; color: #16A34A; background: rgba(22,163,74,.1); border: 1px solid rgba(22,163,74,.3); border-radius: 8px; padding: 10px 14px; font-weight: 700; text-align: center; }
    .tb-issue-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; padding: 8px 10px; border-radius: 7px; margin-bottom: 5px; }
    .tb-issue-row.error { background: rgba(220,38,38,.08); color: #B91C1C; }
    .tb-issue-row.warn { background: rgba(217,119,6,.1); color: #92400E; }
    .tb-issue-text { flex: 1; }
    .tb-issue-icon { flex-shrink: 0; }

    .tb-new-problem-card { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 14px; }
    .tb-new-problem-row { display: flex; gap: 6px; flex-wrap: wrap; }
    .tb-new-problem-row input[type=text] { flex: 1; min-width: 120px; }

    .tb-problems-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; max-height: 200px; overflow-y: auto; }
    .tb-problem-pill {
      display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 9px; cursor: pointer;
      border: 1.5px solid var(--border); background: var(--card); transition: border-color .15s ease, background .15s ease;
    }
    .tb-problem-pill:hover { border-color: color-mix(in srgb, var(--tb-accent, #6E5A9E) 40%, var(--border)); }
    .tb-problem-pill.active { border-color: var(--tb-accent, #6E5A9E); background: color-mix(in srgb, var(--tb-accent, #6E5A9E) 8%, var(--card)); }
    .tb-problem-pill-icon { font-size: 15px; }
    .tb-problem-pill-title { font-weight: 700; font-size: 12px; flex: 1; }
    .tb-problem-pill-meta { font-size: 10px; color: var(--slate-soft); white-space: nowrap; }
    .tb-problem-pill-status { font-size: 9.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
    .tb-problem-pill-status.on { background: rgba(22,163,74,.12); color: #16A34A; }
    .tb-problem-pill-status.off { background: rgba(148,163,184,.18); color: var(--slate); }

    .tb-meta-card { background: var(--bg); border: 1px solid var(--border); border-inline-start: 4px solid var(--tb-accent, #6E5A9E); border-radius: 10px; padding: 12px; margin-bottom: 16px; }
    .tb-meta-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
    .tb-meta-row:last-child { margin-bottom: 0; }
    .tb-meta-row input[type=text] { flex: 1; min-width: 120px; }
    .tb-icon-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; margin-bottom: 8px; }
    .tb-icon-opt {
      aspect-ratio: 1; border: 1.5px solid var(--border); border-radius: 9px; background: var(--card);
      display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 6px;
      transition: border-color .15s ease, transform .12s ease, background .15s ease;
    }
    .tb-icon-opt svg { width: 100%; height: 100%; }
    .tb-icon-opt:hover { border-color: var(--tb-accent, #6E5A9E); transform: translateY(-1px); }
    .tb-icon-opt.selected { border-color: var(--tb-accent, #6E5A9E); border-width: 2.5px; background: color-mix(in srgb, var(--tb-accent, #6E5A9E) 10%, var(--card)); }
    .tb-icon-legacy-note { font-size: 11px; color: var(--slate-soft); font-style: italic; margin: 0 0 8px; }

    .tb-tree-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
    .tb-tree-outline { display: flex; flex-direction: column; }

    .tb-node-card {
      background: var(--card); border: 1.5px solid var(--border); border-inline-start: 4px solid var(--tb-accent, #6E5A9E);
      border-radius: 10px; padding: 12px; margin-bottom: 10px;
    }
    .tb-node-card.has-error { border-color: #DC2626; }
    .tb-node-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
    .tb-node-type-badge { font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
    .tb-node-type-badge.question { background: color-mix(in srgb, var(--tb-accent, #2563EB) 14%, transparent); color: var(--tb-accent, #2563EB); }
    .tb-node-type-badge.end { background: rgba(22,163,74,.12); color: #16A34A; }
    .tb-root-badge { font-size: 10px; font-weight: 800; color: #D97706; background: rgba(217,119,6,.12); padding: 3px 9px; border-radius: 999px; }
    .tb-active-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--slate); font-weight: 700; }

    .tb-mini-btn {
      background: var(--bg); border: 1px solid var(--border); color: var(--text-main); font-size: 10.5px; font-weight: 700;
      padding: 5px 10px; border-radius: 6px; cursor: pointer; transition: border-color .15s ease, background .15s ease;
    }
    .tb-mini-btn:hover { border-color: var(--tb-accent, #6E5A9E); }
    .tb-mini-btn.primary { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }
    .tb-mini-btn.danger { background: #FEE2E2; color: #991B1B; border-color: #FCA5A5; }
    .admin-limited .tb-mini-btn.danger { display: none !important; }

    .tb-field-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
    .tb-field-row label { font-size: 10px; font-weight: 700; color: var(--slate-soft); }
    .tb-field-row textarea, .tb-field-row input { width: 100%; box-sizing: border-box; }

    .tb-options-block { background: var(--bg); border: 1px dashed var(--border); border-radius: 8px; padding: 10px; }
    .tb-options-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 11px; font-weight: 700; color: var(--slate); }
    .tb-option-row { display: flex; gap: 5px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
    .tb-option-row input[type=text] { flex: 1 1 110px; min-width: 90px; padding: 6px 9px; font-size: 11.5px; }
    .tb-option-row select { flex: 1 1 140px; min-width: 110px; padding: 6px 9px; font-size: 11px; }

    .tb-node-issues { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
    .tb-node-issue-chip { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
    .tb-node-issue-chip.error { background: rgba(220,38,38,.1); color: #B91C1C; }
    .tb-node-issue-chip.warn { background: rgba(217,119,6,.1); color: #92400E; }

    .tb-branch-wrap { margin-inline-start: 26px; padding-inline-start: 16px; border-inline-start: 2px dashed color-mix(in srgb, var(--tb-accent, #6E5A9E) 40%, var(--border)); position: relative; }
    .tb-branch-line { margin-bottom: 6px; }
    .tb-branch-label {
      display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; color: var(--tb-accent, #6E5A9E);
      background: color-mix(in srgb, var(--tb-accent, #6E5A9E) 10%, transparent); padding: 3px 10px; border-radius: 999px;
    }
    .tb-branch-label::before { content: '↳'; margin-inline-end: 5px; }