:root {
      --primary-color: #0d9488;
      --primary-hover: #0f766e;
      --dark-navy: #0f2b48;
      --bg-dark: #0a1118;
      --panel-bg: #132b45;
      --text-dark: #f1f5f9;
      --text-muted: #94a3b8;
      --border-color: #1e3a5f;
      --input-bg: #0f2338;
      --input-text: #ffffff;
      --danger-color: #dc2626;
      --danger-hover: #b91c1c;
      --success-color: #16a34a;
      --success-hover: #15803d;
      --bubble-bg: #1e3a5f;
    }

    body.light-mode {
      --bg-dark: #f1f5f9;
      --panel-bg: #ffffff;
      --text-dark: #0f172a;
      --text-muted: #475569;
      --border-color: #cbd5e1;
      --input-bg: #f8fafc;
      --input-text: #0f172a;
      --bubble-bg: #e2e8f0;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif; }
    .sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }

    body {
      background-color: var(--bg-dark);
      color: var(--text-dark);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      position: relative;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    /* Static 2D 4K wallpaper. Only a tiny glow overlay pulses; the full
       background never animates, keeping CPU/GPU use low. */
    body.portal-active { background-color:#020611; }

    body.portal-active::before {
      content:"";
      position:fixed;
      inset:0;
      z-index:0;
      pointer-events:none;
      background:#020611 url('/assets/4k/little-feet-aurora-stars-4k.svg') center/cover no-repeat;
      opacity:.98;
    }

    body.portal-active::after {
      content:"";
      position:fixed;
      inset:0;
      z-index:0;
      pointer-events:none;
      opacity:.14;
      /* One compact overlay tracks every pure-white star in the 4K wallpaper. */
      background:transparent url('/assets/4k/little-feet-star-glow-mask-4k.svg') center/cover no-repeat;
      animation:portalGlowPulse 5.8s ease-in-out infinite alternate;
      will-change:opacity;
    }

    @keyframes portalGlowPulse {
      0% { opacity:.10; }
      38% { opacity:.34; }
      66% { opacity:.18; }
      100% { opacity:.48; }
    }

    body.portal-active.light-mode { background-color:var(--bg-dark); }
    body.portal-active.light-mode::before { opacity:.34; }
    body.portal-active.light-mode::after { opacity:.16; }

    @media (prefers-reduced-motion: reduce) {
      body.portal-active::after,
      #authSection::after,
      .wallpaper-aurora-sky::before { animation:none !important; }
    }

    #portalLoader { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 50% 34%,rgba(13,148,136,.22),rgba(7,17,30,.98) 58%); transition:opacity .35s ease, visibility .35s ease; }
    #portalLoader.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }
    .walking-loader { display:flex; flex-direction:column; align-items:center; gap:12px; color:#e6fffb; text-align:center; }
    .walking-loader-mark { position:relative; width:124px; height:92px; }
    .walking-loader-mark img { position:absolute; left:38px; top:0; width:58px; height:58px; object-fit:contain; filter:drop-shadow(0 8px 10px rgba(0,0,0,.34)); animation:loaderWalk .72s ease-in-out infinite alternate; }
    .walking-loader-mark .loader-step { position:absolute; bottom:0; color:#5eead4; width:25px; height:25px; filter:drop-shadow(0 0 9px rgba(45,212,191,.55)); }
    .walking-loader-mark .loader-step:first-of-type { left:10px; animation:footstep .72s ease-in-out infinite; }
    .walking-loader-mark .loader-step:last-of-type { right:10px; animation:footstep .72s ease-in-out .36s infinite; }
    .walking-loader p { margin:0; font-size:.82rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
    @keyframes loaderWalk { from { transform:translateX(-7px) translateY(2px) rotate(-4deg); } to { transform:translateX(7px) translateY(-2px) rotate(4deg); } }
    @keyframes footstep { 0%,100% { opacity:.25; transform:translateY(5px) scale(.82); } 50% { opacity:1; transform:translateY(-2px) scale(1); } }
    @media (prefers-reduced-motion: reduce) { .walking-loader-mark img, .walking-loader-mark .loader-step, body.portal-active::after { animation:none; } }

    .container { padding: 15px; max-width: 1150px; margin: 0 auto; width: 100%; flex: 1; position: relative; z-index: 1; }

    .card {
      position: relative;
      background-color: var(--panel-bg);
      border: 1px solid var(--border-color);
      border-top: 4px solid var(--primary-color);
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 4px 14px rgba(0,0,0,0.25);
      color: var(--text-dark);
      animation: fadeIn 0.2s ease-in-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .card-header-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 8px;
    }

    h2 { color: var(--text-dark); font-size: 1.15rem; font-weight: 700; }

    label, .form-label { font-size: 0.82rem; font-weight: 600; color: var(--text-dark); margin-bottom: 4px; display: block; }
    label .req { color: #e11d48; margin-left: 2px; }

    input, select, textarea {
      width: 100%;
      padding: 11px;
      margin-bottom: 10px;
      border-radius: 6px;
      border: 1px solid var(--border-color);
      background-color: var(--input-bg);
      color: var(--input-text);
      font-size: 0.9rem;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    input:focus, select:focus, textarea:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.25);
    }
    select option { background-color: var(--panel-bg); color: var(--text-dark); padding: 10px; }

    button.submit-btn {
      background-color: var(--primary-color);
      color: #ffffff;
      border: none;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.1s;
      font-size: 0.95rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 11px;
      border-radius: 6px;
      width: 100%;
      user-select: none;
    }
    button.submit-btn:hover { background-color: var(--primary-hover); }
    button.submit-btn:active { transform: scale(0.99); }

    .action-btn {
      width: auto;
      padding: 7px 12px;
      margin: 4px 4px 4px 0;
      font-size: 0.82rem;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      border-radius: 6px;
      border: none;
      font-weight: 600;
      text-align: center;
      transition: background-color 0.1s;
      user-select: none;
    }
    .action-btn:active { transform: scale(0.97); }

    .btn-green { background-color: var(--success-color); color: #fff; }
    .btn-green:hover { background-color: var(--success-hover); }
    .btn-red { background-color: var(--danger-color); color: #fff; }
    .btn-red:hover { background-color: var(--danger-hover); }
    .btn-blue { background-color: var(--primary-color); color: #fff; }
    .btn-blue:hover { background-color: var(--primary-hover); }

    #authSection { display:flex; justify-content:center; align-items:center; min-height:100vh; padding:32px 20px; position:relative; z-index:1; isolation:isolate; }
    #authSection::before {
      content:"";
      position:fixed;
      inset:0;
      border-radius:0;
      pointer-events:none;
      z-index:-1;
      opacity:.98;
      background:#020611 url('/assets/4k/little-feet-aurora-stars-4k.svg') center/cover no-repeat;
    }
    #authSection::after {
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      opacity:.14;
      background:transparent url('/assets/4k/little-feet-star-glow-mask-4k.svg') center/cover no-repeat;
      animation:portalGlowPulse 5.8s ease-in-out infinite alternate;
      will-change:opacity;
    }
    #authSection > .auth-card { position:relative; z-index:1; width:min(100%,520px) !important; max-width:520px !important; margin:0; padding:18px; background-color:var(--panel-bg); border:1px solid var(--border-color); border-top:5px solid var(--primary-color); box-shadow:0 24px 64px rgba(0,0,0,.42); }
    .brand-header { position:relative; isolation:isolate; text-align:center; margin-bottom:24px; padding-top:10px; overflow:hidden; }
    .mascot-stage { position:relative; display:grid; place-items:center; min-height:180px; margin-bottom:4px; }
    .mascot-stage::before { content:""; position:absolute; z-index:0; width:164px; height:164px; border:2px solid rgba(94,234,212,.70); border-radius:20px; background:transparent; box-shadow:0 0 22px rgba(45,212,191,.34); }
    .mascot-stage::after { display:none; }
    .brand-header img { position:relative; z-index:2; height:156px; width:156px; object-fit:contain; padding:0; background:transparent; border:0; cursor:pointer; animation:logoPulse 2.8s ease-in-out infinite alternate; border-radius:18px; }
    .nav-brand img { background: #ffffff !important; }
    @keyframes logoPulse { from { filter: brightness(1.18) contrast(1.05) drop-shadow(0 0 5px rgba(45,212,191,.55)); } to { filter: brightness(1.35) contrast(1.12) drop-shadow(0 0 18px rgba(45,212,191,1)); } }
    .brand-header h1 { position:relative; z-index:3; margin-top:2px; margin-bottom:4px; color:transparent; background:linear-gradient(90deg,#f8fafc 5%,#5eead4 40%,#ffffff 62%,#2dd4bf); background-size:220% auto; -webkit-background-clip:text; background-clip:text; font-family:Georgia, 'Times New Roman', serif; font-size:2.25rem; line-height:1; letter-spacing:.035em; cursor:pointer; text-shadow:0 0 20px rgba(45,212,191,.15); animation:titleShimmer 4.5s linear infinite; }
    .brand-header p.slogan { position:relative; z-index:3; display:inline-block; margin:0; padding:5px 11px; border:1px solid rgba(45,212,191,.38); border-radius:999px; background:rgba(13,148,136,.11); color:#99f6e4; font-size:.69rem; font-style:normal; font-weight:800; letter-spacing:1.45px; text-transform:uppercase; animation:sloganLift 3s ease-in-out infinite; }
    @keyframes titleShimmer { to { background-position:220% center; } }
    @keyframes sloganLift { 50% { transform:translateY(-2px); box-shadow:0 7px 18px rgba(13,148,136,.28); } }

    nav { background-color: #07111e; border-bottom: 3px solid var(--primary-color); padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; position: relative; z-index: 2; box-shadow: 0 4px 12px rgba(0,0,0,0.35); }
    .nav-brand { display:flex; align-items:center; gap:11px; min-width:0; font-weight:bold; color:#ffffff; cursor:pointer; user-select:none; }
    .nav-brand > div { display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:nowrap; }
    .nav-brand img { height: 46px; width: 46px; background: #ffffff; padding: 2px; border:1px solid rgba(94,234,212,.86); border-radius:10px; filter: drop-shadow(0 0 8px rgba(45,212,191,.62)); object-fit: contain; }
    .nav-brand .site-name { display:inline-block; min-width:0; color:transparent; background:linear-gradient(105deg,#ffffff 8%,#c8fff7 44%,#5eead4 70%,#ffffff 96%); background-size:180% auto; -webkit-background-clip:text; background-clip:text; font-family:Georgia, 'Times New Roman', serif; font-size:clamp(1.08rem,1.42vw,1.48rem); font-weight:800; letter-spacing:.018em; line-height:1.05; white-space:nowrap; text-shadow:0 1px 12px rgba(94,234,212,.28); animation:siteNameShimmer 8s ease-in-out infinite; }
    @keyframes siteNameShimmer { 50% { background-position:100% center; } }
    .ui-icon { width:1.22em; height:1.22em; flex:0 0 auto; display:inline-block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.22em; }
    .ui-icon--fill { fill:currentColor; stroke:none; }
    .icon-label { display:inline-flex; align-items:center; gap:7px; }
    .nav-user-panel .action-btn, .nav-shortcut, .nav-more-toggle { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
    .nav-user-panel .action-btn .ui-icon, .nav-shortcut .ui-icon, .nav-more-toggle .ui-icon { width:1.1rem; height:1.1rem; vertical-align:0; }
    .user-avatar .ui-icon { width:1.08rem; height:1.08rem; vertical-align:0; }
    .sidebar-group-toggle .ui-icon { width:1.12rem; height:1.12rem; color:#99f6e4; vertical-align:0; }
    .sidebar-toggle-label { display:inline-flex; align-items:center; gap:8px; }
    .sidebar-chevron { width:1rem; height:1rem; margin-left:auto; color:#5eead4; transition:transform .2s ease; }
    [data-nav-group].is-collapsed .sidebar-chevron { transform:rotate(-90deg); }
    .sidebar-links .nav-btn .ui-icon { width:1rem; height:1rem; margin-right:8px; color:#99f6e4; vertical-align:0; }
    .sidebar-links .nav-btn:hover .ui-icon, .sidebar-links .nav-btn.active .ui-icon { color:#fff; }
    .sidebar-signout .ui-icon { width:1rem; height:1rem; margin-right:8px; vertical-align:0; }
    input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--input-text); -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset; box-shadow: 0 0 0 1000px var(--input-bg) inset; caret-color: var(--input-text); }
    .nav-brand .org-badge { margin-top:4px; font-size:.61rem; background:rgba(94,234,212,.12); padding:3px 6px; border:1px solid rgba(94,234,212,.22); border-radius:999px; font-weight:700; letter-spacing:.055em; color:#bffaf1; vertical-align:middle; }

    .nav-user-panel { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: #cbd5e1; }
    .user-switch-control { display:inline-flex; align-items:center; gap:7px; min-width:0; margin:0; padding:4px 7px 4px 4px; border:1px solid transparent; border-radius:999px; background:transparent; color:#cbd5e1; font:inherit; cursor:pointer; }
    .user-switch-control:hover, .user-switch-control:focus-visible { border-color:rgba(45,212,191,.6); background:rgba(13,148,136,.14); color:#fff; outline:none; }
    .user-switch-control #displayRole { white-space:nowrap; }
    .user-avatar { background: var(--primary-color); color: white; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.75rem; }

    .nav-links { display: flex; list-style: none; gap: 3px; flex-wrap: wrap; width: 100%; justify-content: flex-start; margin-top: 5px; }
    .nav-links li button { background: none; border: none; color: #cbd5e1; padding: 7px 11px; cursor: pointer; font-weight: 600; font-size: 0.82rem; margin: 0; border-radius: 4px; }
    .nav-links li button.active, .nav-links li button:hover { color: #ffffff; background-color: var(--primary-color); }

    /* High-resolution milestone artwork: these tiles replace fuzzy emoji-only choices. */
    .visually-hidden-select { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; }
    .badge-form-lead { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:15px; margin-bottom:15px; }
    .milestone-picker { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:9px; margin-top:8px; }
    .milestone-choice { min-height:112px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:7px; padding:12px; border:1px solid rgba(148,163,184,.3); border-radius:11px; background:linear-gradient(145deg,rgba(15,43,72,.92),rgba(8,28,47,.92)); color:#dbeafe; text-align:left; cursor:pointer; font:inherit; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease; }
    .milestone-choice:hover, .milestone-choice:focus-visible { transform:translateY(-2px); border-color:#5eead4; outline:none; box-shadow:0 9px 18px rgba(2,8,23,.22); }
    .milestone-choice.is-selected { border-color:#2dd4bf; background:linear-gradient(145deg,rgba(13,148,136,.38),rgba(15,43,72,.95)); box-shadow:0 0 0 2px rgba(45,212,191,.2),0 10px 20px rgba(2,8,23,.22); }
    .milestone-choice .ui-icon { width:1.8rem; height:1.8rem; padding:6px; border-radius:9px; color:#99f6e4; background:rgba(94,234,212,.1); vertical-align:0; }
    .milestone-choice > span { min-width:0; }
    .milestone-choice strong { display:block; font-size:.77rem; line-height:1.3; color:#f8fafc; overflow-wrap:normal; word-break:normal; }
    .milestone-choice small { display:block; margin-top:4px; color:#94a3b8; font-size:.68rem; line-height:1.35; overflow-wrap:normal; word-break:normal; }
    @media (max-width: 900px) { .badge-form-lead { grid-template-columns:1fr; } }
    @media (max-width: 700px) { .milestone-picker { grid-template-columns:repeat(2,minmax(0,1fr)); } }
    @media (max-width: 420px) { .milestone-picker { grid-template-columns:1fr; } .milestone-choice { min-height:82px; flex-direction:row; align-items:center; } .milestone-choice > span { display:flex; flex-direction:column; gap:4px; } }

    .wallpaper-overlay { position:fixed; inset:0; z-index:5000; display:none; align-items:center; justify-content:center; background:#020611; color:#fff; cursor:pointer; overflow:hidden; }
    .wallpaper-overlay.is-visible { display:flex; }
    .wallpaper-aurora-sky { position:absolute; inset:0; z-index:0; overflow:hidden; background:#020611 url('/assets/4k/little-feet-aurora-stars-4k.svg') center/cover no-repeat; opacity:1; transition:opacity .25s ease; }
    .wallpaper-aurora-sky::before { content:""; position:absolute; inset:0; opacity:.14; background:transparent url('/assets/4k/little-feet-star-glow-mask-4k.svg') center/cover no-repeat; animation:portalGlowPulse 5.8s ease-in-out infinite alternate; will-change:opacity; }
    .wallpaper-overlay.has-custom-wallpaper .wallpaper-aurora-sky { opacity:0; }
    .wallpaper-overlay::after { content:''; position:absolute; inset:0; z-index:1; background:radial-gradient(circle at center, transparent 34%, rgba(1,8,16,.56) 100%); pointer-events:none; }
    .wallpaper-overlay-copy { position:absolute; z-index:2; bottom:clamp(22px,6vh,68px); left:50%; transform:translateX(-50%); width:min(92vw,640px); text-align:center; text-shadow:0 2px 18px rgba(0,0,0,.85); }
    .wallpaper-overlay-copy h2 { margin:0 0 8px; font-size:clamp(1.4rem,3vw,2.45rem); }
    .wallpaper-overlay-copy p { margin:0; color:#d8f5ef; font-size:clamp(.8rem,1.5vw,1rem); }
    .wallpaper-exit { position:absolute; z-index:3; top:18px; right:18px; border:1px solid rgba(255,255,255,.45); border-radius:999px; background:rgba(5,19,32,.68); color:#fff; padding:9px 13px; font:inherit; cursor:pointer; }
    .wallpaper-mute { position:absolute; z-index:3; top:18px; right:150px; border:1px solid rgba(255,255,255,.45); border-radius:999px; background:rgba(5,19,32,.68); color:#fff; padding:9px 13px; font:inherit; cursor:pointer; }

    .tab-content { display: none; }
    .tab-content.active { display: block; }

    .item-row { background-color: var(--input-bg); border-radius: 6px; padding: 12px 15px; margin-bottom: 12px; border: 1px solid var(--border-color); border-left: 4px solid var(--primary-color); color: var(--text-dark); display: flex; flex-direction: column; gap: 8px; word-break: break-word; overflow: hidden; max-width: 100%; box-sizing: border-box; }
    .post-item, .worksheet-img, .item-row img { max-width: 100% !important; height: auto !important; max-height: 280px !important; object-fit: contain !important; border-radius: 6px; margin-top: 8px; border: 1px solid var(--border-color); cursor: pointer; display: block; box-sizing: border-box; }
    .meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
    .badge-tag { background-color: var(--primary-color); color: #ffffff; font-weight: 600; padding: 2px 7px; border-radius: 4px; font-size: 0.72rem; display: inline-block; margin-right: 4px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.4px; }
    .badge-tag.urgent { background-color: var(--danger-color); }
    .badge-tag.info { background-color: #0284c7; }

    .chat-box { height: 280px; overflow-y: auto; background-color: var(--input-bg); border-radius: 6px; padding: 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--border-color); }
    .msg { max-width: 85%; padding: 9px 13px; border-radius: 8px; font-size: 0.88rem; word-break: break-word; line-height: 1.35; white-space: pre-wrap; background-color: var(--bubble-bg); color: var(--text-dark); }
    .msg.sent { align-self: flex-end; border-bottom-right-radius: 2px; }
    .msg.received { align-self: flex-start; border-bottom-left-radius: 2px; }
    .msg-timestamp { font-size: 0.68rem; opacity: 0.75; display: block; margin-top: 4px; text-align: right; color: var(--text-muted); }
    .server-status { display:flex; align-items:center; gap:6px; font-size:.74rem; color:var(--text-muted); white-space:nowrap; }
    .server-dot { width:9px; height:9px; border-radius:50%; background:#ef4444; box-shadow:0 0 0 0 rgba(239,68,68,.7); animation: statusBlink 1.5s infinite; }
    .server-status.good .server-dot { background:#4ade80; box-shadow:0 0 10px #4ade80; }
    .server-status.busy .server-dot { background:#facc15; box-shadow:0 0 10px #facc15; }
    @keyframes statusBlink { 50% { opacity:.4; transform:scale(.82); } }
    .chat-shell { max-width:1040px; margin:0 auto; overflow:hidden; }
    .chat-toolbar { display:flex; gap:8px; padding:12px; background:rgba(15,43,72,.65); border-bottom:1px solid var(--border-color); flex-wrap:wrap; }
    .chat-panel { padding:16px; }
    .chat-box.modern-chat { height:360px; background:linear-gradient(180deg, var(--input-bg), rgba(15,43,72,.35)); padding:18px; }
    .chat-compose { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end; margin-top:10px; }
    .chat-compose textarea { min-height:74px; }
    .store-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:15px; }
    .store-item { border:1px solid var(--border-color); border-radius:10px; padding:16px; background:linear-gradient(145deg,var(--panel-bg),rgba(13,148,136,.08)); }
    .workspace-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
    .workspace-card { border:1px solid var(--border-color); border-radius:10px; padding:18px; background:linear-gradient(145deg,var(--panel-bg),rgba(15,43,72,.65)); }
    .workspace-card h3 { color:#2dd4bf; margin-bottom:7px; }
    .workspace-card p { color:var(--text-muted); font-size:.85rem; line-height:1.5; margin-bottom:12px; }
    .role-home-panel { overflow:hidden; background:linear-gradient(135deg,rgba(13,148,136,.18),rgba(15,43,72,.92)); }
    .role-home-panel .role-home-content { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr); gap:18px; align-items:center; }
    .role-home-panel h2 { margin:0 0 5px; color:#f8fafc; font-size:clamp(1.1rem,2vw,1.42rem); line-height:1.16; }
    .role-home-panel p { margin:0; color:#cbd5e1; font-size:.92rem; line-height:1.38; }
    .role-home-panel .role-home-icon { display:grid; place-items:center; min-height:128px; border:1px solid rgba(94,234,212,.2); border-radius:14px; background:radial-gradient(circle at 50% 35%,rgba(45,212,191,.25),rgba(7,17,30,.35)); font-size:3.2rem; }
    .role-home-panel.mascot-role-home { position:relative; isolation:isolate; min-height:0; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
    .role-home-panel.mascot-role-home::before { display:none; }
    .role-home-panel.mascot-role-home .role-home-content { position:relative; z-index:1; grid-template-columns:minmax(0,1fr); min-height:0; max-width:62%; }
    .role-home-panel.mascot-role-home .role-home-icon { display:none; }
    @keyframes adminMascotGlow { from { opacity:.58; transform:scale(.94); } to { opacity:1; transform:scale(1.07); } }
    @media (prefers-reduced-motion:reduce) { .role-home-panel.mascot-role-home::before { animation:none; opacity:.78; } }
    .portal-welcome-banner { position:relative; isolation:isolate; overflow:hidden; min-height:164px; margin:0 0 16px; padding:16px clamp(20px,3vw,38px); border:1px solid rgba(94,234,212,.38); border-radius:16px; background-image:linear-gradient(90deg,rgba(4,18,34,.98) 0%,rgba(7,29,47,.94) 44%,rgba(5,26,46,.42) 71%,rgba(5,26,46,.18) 100%),url('/assets/4k/admin-mascot-dashboard-4k.jpg'); background-size:cover,auto 142%; background-position:center,right 46%; background-repeat:no-repeat; box-shadow:0 16px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.08); }
    .portal-welcome-banner::before { content:""; position:absolute; z-index:0; inset:-32%; pointer-events:none; background:radial-gradient(ellipse at 78% 60%,rgba(255,190,92,.3),rgba(45,212,191,.16) 27%,transparent 62%); filter:blur(12px); animation:adminMascotGlow 5.2s ease-in-out infinite alternate; }
    .portal-welcome-copy { position:relative; z-index:1; max-width:min(760px,62%); }
    .portal-welcome-kicker { display:inline-flex; align-items:center; gap:7px; margin-bottom:4px; color:#99f6e4; font-size:.68rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
    .portal-welcome-kicker::before { content:""; width:8px; height:8px; border-radius:50%; background:#fbbf24; box-shadow:0 0 16px rgba(251,191,36,.8); }
    .portal-welcome-banner h1 { margin:0 0 3px; color:#fff; font-size:clamp(1.3rem,2.25vw,1.7rem); line-height:1.14; }
    .portal-welcome-banner p { margin:0; max-width:580px; color:#dbeafe; font-size:.92rem; line-height:1.38; }
    @media (max-width:640px) { .role-home-panel .role-home-content { grid-template-columns:1fr; } .role-home-panel .role-home-icon { min-height:88px; font-size:2.5rem; } .role-home-panel.mascot-role-home { min-height:0; margin:0; padding:0; background:none; } .role-home-panel.mascot-role-home .role-home-content { min-height:0; max-width:100%; } .portal-welcome-banner { min-height:214px; padding-top:15px; padding-bottom:15px; background-size:cover,auto 108%; background-position:center,right 18%; } .portal-welcome-copy { max-width:100%; } }
    .record-list { margin-top:16px; display:grid; gap:8px; }
    .record-list .item-row { margin:0; }
    .workspace-results-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:20px; }
    .workspace-results-panel { position:relative; overflow:hidden; min-width:0; padding:16px; border:1px solid rgba(94,234,212,.2); border-radius:14px; background:linear-gradient(145deg,rgba(15,43,72,.9),rgba(7,25,43,.72)); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
    .workspace-results-panel::before { content:""; position:absolute; width:110px; height:110px; top:-62px; right:-42px; border-radius:50%; background:rgba(45,212,191,.09); pointer-events:none; }
    .workspace-results-panel.is-reports { border-color:rgba(96,165,250,.22); }
    .workspace-results-panel.is-reports::before { background:rgba(96,165,250,.1); }
    .workspace-results-heading { position:relative; display:flex; align-items:center; gap:11px; margin-bottom:12px; }
    .workspace-results-icon { flex:0 0 38px; width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(94,234,212,.25); border-radius:11px; background:rgba(13,148,136,.13); font-size:1.1rem; }
    .workspace-results-icon .ui-icon { width:1.2rem; height:1.2rem; color:#5eead4; }
    .is-reports .workspace-results-icon { border-color:rgba(96,165,250,.28); background:rgba(37,99,235,.13); }
    .is-reports .workspace-results-icon .ui-icon { color:#93c5fd; }
    .workspace-results-heading h3 { margin:0; color:#f8fafc; font-size:.98rem; line-height:1.2; }
    .workspace-results-heading p { margin:3px 0 0; color:var(--text-muted); font-size:.75rem; line-height:1.35; }
    .workspace-results-panel .record-list { position:relative; margin:0; }
    .record-empty-state { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:11px; min-height:76px; padding:13px; border:1px dashed rgba(148,163,184,.25); border-radius:11px; background:rgba(2,8,23,.2); }
    .record-empty-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:rgba(148,163,184,.09); filter:grayscale(.15); }
    .record-empty-icon .ui-icon { width:1.05rem; height:1.05rem; color:#94a3b8; }
    .record-empty-state strong { display:block; margin-bottom:3px; color:#e2e8f0; font-size:.82rem; }
    .record-empty-state span:last-child { display:block; color:var(--text-muted); font-size:.75rem; line-height:1.4; }
    body.light-mode .workspace-results-panel { background:linear-gradient(145deg,#fff,#eef8f7); border-color:#cbd5e1; }
    body.light-mode .workspace-results-heading h3, body.light-mode .record-empty-state strong { color:#12304a; }
    body.light-mode .record-empty-state { background:rgba(241,245,249,.8); border-color:#cbd5e1; }
    @media (max-width:640px) {
      .workspace-results-grid { grid-template-columns:1fr; gap:11px; margin-top:16px; }
      .workspace-results-panel { padding:13px; }
    }
    .footer-links a { padding:4px 7px; border-radius:5px; }
    .footer-links a:hover { background:rgba(45,212,191,.12); }

    .flex-form-row { display: flex; flex-direction: column; gap: 10px; }

    .modal-overlay { position: fixed; inset: 0; background: rgba(10, 17, 24, 0.85); display: flex; justify-content: center; align-items: center; z-index: 9999; backdrop-filter: blur(4px); }
    .modal-card { background: var(--panel-bg); padding: 24px; border-radius: 8px; max-width: 650px; width: 90%; max-height: 85vh; overflow-y: auto; position: relative; border-top: 4px solid var(--primary-color); color: var(--text-dark); border: 1px solid var(--border-color); }
    .modal-card.subscription-modal-card { max-width: 1080px; }
    .modal-close { position: absolute; top: 12px; right: 12px; border: none; background: none; font-size: 1.2rem; cursor: pointer; color: var(--text-muted); }
    .user-location-pin { position: relative; width: 30px; height: 30px; border-radius: 50%; background: #14b8a6; border: 4px solid #ffffff; box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.35), 0 4px 10px rgba(0, 0, 0, 0.45); }
    .user-location-pin::after { content: ''; position: absolute; inset: -12px; border: 2px solid #2dd4bf; border-radius: 50%; animation: locationPulse 1.8s ease-out infinite; }
    @keyframes locationPulse { 0% { transform: scale(0.35); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }

    footer { background-color: #07111e; color: var(--text-muted); border-top: 1px solid #1e293b; padding: 20px 15px; font-size: 0.78rem; position: relative; z-index: 2; margin-top: auto; }
    .footer-container { max-width: 1150px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
    .footer-links { display: flex; gap: 8px; flex-wrap: wrap; }
    .footer-links a { color: #94a3b8; text-decoration: none; cursor: pointer; }
    .footer-links a:hover { color: #2dd4bf; text-decoration: underline; }
    .compliance-text { font-size: 0.72rem; color: #475569; line-height: 1.4; border-top: 1px solid #1e293b; padding-top: 10px; margin-top: 5px; }

    .leaflet-popup-content-wrapper, .leaflet-popup-tip {
      background: var(--panel-bg) !important;
      color: var(--text-dark) !important;
      border: 1px solid var(--border-color);
    }
    .leaflet-popup-content { color: var(--text-dark) !important; line-height: 1.45; }
    .leaflet-popup-close-button { color: var(--text-muted) !important; }
    .leaflet-popup-close-button:hover { color: var(--text-dark) !important; }
    .school-popup h3 { color: var(--primary-color) !important; }
    .school-popup strong { color: var(--text-dark) !important; }
    .school-popup .school-muted { color: var(--text-muted) !important; }
    .school-popup a { color: var(--primary-hover) !important; font-weight: 700; }
    #schoolPinCard { border:1px solid rgba(45,212,191,.48); border-left:4px solid var(--primary-color); border-radius:10px; background:linear-gradient(135deg,rgba(13,148,136,.16),var(--input-bg)); }
    @media (max-width:767px) {
      #schoolMapContainer { height:clamp(460px,74vh,620px) !important; }
      #schoolMapContainer .leaflet-control { max-width:calc(100% - 22px); }
      #schoolMapContainer .leaflet-popup-content { max-height:250px; overflow:auto; }
    }
    body.light-mode .workspace-card { background: linear-gradient(145deg, #ffffff, #eef8f7); color: var(--text-dark); }
    body.light-mode .workspace-card h3 { color: #0f766e; }
    body.light-mode #reportsTab .workspace-card [style*="color: #fff"],
    body.light-mode #reportsTab .workspace-card [style*="color:#fff"] { color: var(--text-dark) !important; }

    #loginForm { display:flex; flex-direction:column; align-items:center; }
    #loginForm > div:not(.social-signin) { align-self:stretch; }
    #loginForm > .submit-btn { width:min(100%, 360px); align-self:center; margin-top:2px; }
    .password-field { position:relative; margin-bottom:10px; }
    .password-field input { margin-bottom:0; padding-right:52px; }
    .password-toggle { position:absolute; top:50%; right:5px; width:42px; height:42px; margin:0; padding:0; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:8px; background:transparent; color:var(--text-muted); cursor:pointer; }
    .password-toggle:hover, .password-toggle:focus-visible { color:var(--primary-color); background:rgba(13,148,136,.12); outline:2px solid rgba(45,212,191,.55); outline-offset:-2px; }
    .password-toggle .ui-icon { width:1.2rem; height:1.2rem; }
    .password-toggle .icon-eye-off { display:none; }
    .password-toggle[aria-pressed="true"] .icon-eye { display:none; }
    .password-toggle[aria-pressed="true"] .icon-eye-off { display:block; }
    .profile-icon-picker { display:grid; grid-template-columns:repeat(5,minmax(44px,1fr)); gap:9px; margin-top:12px; }
    .profile-icon-choice { min-height:48px; margin:0; padding:7px; border:1px solid var(--border-color); border-radius:10px; background:var(--input-bg); color:var(--text-dark); font-size:1.35rem; line-height:1; cursor:pointer; }
    .profile-icon-choice:hover, .profile-icon-choice:focus-visible { border-color:var(--primary-color); background:rgba(13,148,136,.12); outline:none; }
    .profile-icon-choice.is-selected { border-color:#2dd4bf; background:rgba(13,148,136,.24); box-shadow:0 0 0 2px rgba(45,212,191,.2); }
    .social-signin { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:9px; width:min(100%, 360px); margin:12px auto 0; }
    .social-signin button { min-height:44px; border:1px solid var(--border-color); border-radius:8px; padding:9px 10px; color:var(--text-dark); background:var(--input-bg); font-size:.78rem; font-weight:700; line-height:1.2; cursor:pointer; }
    .social-signin button:hover, .social-signin button:focus-visible { border-color:var(--primary-color); background:rgba(13,148,136,.12); outline:none; }
    .chat-delete-btn { margin-left:9px; border:1px solid rgba(248,113,113,.55); border-radius:5px; background:rgba(127,29,29,.2); color:#fecaca; padding:3px 6px; font-size:.68rem; font-weight:700; cursor:pointer; }
    .chat-delete-btn:hover { background:rgba(220,38,38,.34); }
    .ticket-toast { position:fixed; right:22px; bottom:22px; z-index:10050; width:min(330px,calc(100vw - 44px)); padding:14px 16px; border:1px solid #2dd4bf; border-radius:12px; background:#102b41; color:#f8fafc; box-shadow:0 16px 42px rgba(0,0,0,.4); display:grid; gap:4px; animation:ticketToastIn .28s ease-out; }
    .ticket-toast span { color:#b9d5e7; font-size:.88rem; }
    @keyframes ticketToastIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
    .login-account-help { margin:10px 0 0; color:var(--text-muted); font-size:.74rem; line-height:1.4; text-align:center; }
    .login-context { margin:0 0 16px; padding:14px; border:1px solid rgba(94,234,212,.20); border-radius:12px; background:rgba(7,25,43,.48); text-align:left; }
    .login-context-kicker { display:inline-flex; align-items:center; gap:6px; margin-bottom:7px; color:#99f6e4; font-size:.64rem; font-weight:800; letter-spacing:.10em; text-transform:uppercase; }
    .login-context-kicker .ui-icon { width:.95rem; height:.95rem; }
    .login-context h2 { margin:0 0 6px; color:var(--text-dark); font-size:1.08rem; line-height:1.25; }
    .login-context p { margin:0; color:var(--text-muted); font-size:.77rem; line-height:1.45; }
    .login-trust-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
    .login-trust-chip { display:inline-flex; align-items:center; gap:5px; min-width:0; padding:6px 8px; border:1px solid rgba(94,234,212,.18); border-radius:999px; background:rgba(13,148,136,.09); color:#c9f8f2; font-size:.67rem; line-height:1.2; }
    .login-trust-chip .ui-icon { width:.86rem; height:.86rem; color:#5eead4; }
    .login-section-label { width:min(100%,360px); margin:0 auto 9px; color:#94a3b8; font-size:.65rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; text-align:left; }
    .field-help { display:block; margin:-6px 0 10px; color:var(--text-muted); font-size:.68rem; line-height:1.35; }
    .login-device-note { width:100%; margin:-7px 0 12px; color:var(--text-muted); font-size:.68rem; line-height:1.35; }
    .login-human-check { margin:2px 0 10px; padding:10px 11px; border:1px solid rgba(94,234,212,.20); border-radius:10px; background:rgba(7,25,43,.36); }
    .login-human-check-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:end; }
    .login-human-check-prompt { display:block; margin:0 0 6px; color:var(--text-muted); font-size:.72rem; line-height:1.35; }
    .login-human-check .action-btn { min-height:40px; margin:0 0 10px; }
    .login-human-trap { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; }
    .login-help-panel { width:min(100%,360px); margin:12px auto 0; padding:10px 11px; border:1px solid rgba(125,211,252,.18); border-radius:10px; background:rgba(2,15,28,.28); color:var(--text-muted); text-align:left; }
    .login-help-panel strong { display:block; margin-bottom:3px; color:var(--text-dark); font-size:.75rem; }
    .login-help-panel span { display:block; font-size:.70rem; line-height:1.4; }
    .login-divider { display:flex; align-items:center; gap:9px; width:min(100%,360px); margin:14px auto 0; color:#94a3b8; font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
    .login-divider::before, .login-divider::after { content:""; height:1px; flex:1; background:var(--border-color); }
    .login-divider span { text-align:center; }
    .login-new-account { margin-top:16px; padding-top:14px; border-top:1px solid var(--border-color); text-align:center; }
    .login-new-account p { font-size:.8rem; color:var(--text-muted); margin-bottom:9px; }
    .login-new-account .login-approval-note { margin:9px auto 0; max-width:360px; font-size:.69rem; line-height:1.4; }
    .login-legal { margin-top:14px; padding-top:12px; border-top:1px solid rgba(148,163,184,.16); text-align:center; }
    .login-legal-links { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:5px 8px; font-size:.70rem; }
    .login-legal p { max-width:390px; margin:8px auto 0; color:var(--text-muted); font-size:.66rem; line-height:1.4; }
    /* Compact login card: preserve real account/security guidance without
       turning sign-in into a long landing page. */
    #authSection > .auth-card { padding:14px 16px; }
    .login-card-tools { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; margin-bottom:7px; }
    .login-secure-label { display:inline-flex; align-items:center; gap:6px; min-width:0; color:#99f6e4; font-size:.64rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
    .login-secure-label .ui-icon { width:.92rem; height:.92rem; flex:0 0 auto; }
    .login-card-actions { display:grid; grid-template-columns:minmax(118px,auto) 34px; align-items:center; gap:6px; margin-left:auto; }
    .login-language-pill { position:relative; display:inline-flex; align-items:center; height:34px; min-width:0; border:1px solid rgba(94,234,212,.28); border-radius:9px; background:rgba(13,148,136,.10); color:#dffcf8; }
    .login-language-pill .ui-icon { position:absolute; left:8px; width:.92rem; height:.92rem; pointer-events:none; color:#5eead4; }
    #loginLanguagePreference { width:100%; min-width:118px; height:32px; min-height:32px; margin:0; padding:5px 24px 5px 27px; border:0; border-radius:8px; background:transparent; color:inherit; font-size:.69rem; font-weight:700; cursor:pointer; }
    #loginLanguagePreference:focus-visible { outline:2px solid rgba(94,234,212,.58); outline-offset:1px; }
    #loginLanguagePreference option { color:#0f2b48; background:#f8fafc; }
    .login-audio-compact { display:inline-flex; align-items:center; justify-content:center; width:34px !important; min-width:34px !important; min-height:34px !important; height:34px; margin:0 !important; padding:0 !important; border-radius:9px; font-size:.67rem; }
    .login-audio-compact .ui-icon { width:.92rem; height:.92rem; }
    .login-audio-compact span { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
    .login-access-note { margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid rgba(148,163,184,.16); color:var(--text-muted); font-size:.68rem; line-height:1.3; text-align:left; }
    #loginForm > div:not(.social-signin):not(.login-divider):not(.login-utility-row) { margin-bottom:7px; }
    #loginForm label { margin-bottom:4px; }
    #loginForm input { margin-bottom:0; }
    .login-utility-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; margin:2px 0 10px; }
    .login-remember { display:flex; align-items:center; gap:7px; min-width:0; }
    .login-remember label { margin:0 !important; font-weight:400; cursor:pointer; font-size:.74rem; white-space:nowrap; }
    .login-help-inline { max-width:190px; color:var(--text-muted); font-size:.64rem; line-height:1.2; text-align:right; }
    #loginForm > .submit-btn { width:100%; max-width:none; min-height:42px; margin:0; }
    .login-divider { margin:9px auto 7px; }
    .social-signin { width:100%; margin:0; }
    .social-signin button { min-height:39px; padding:7px 8px; }
    .login-account-help, .login-context, .login-help-panel { display:none !important; }
    .login-new-account { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; margin-top:10px; padding-top:10px; border-top:1px solid var(--border-color); text-align:left; }
    .login-new-account p { margin:0; min-width:0; font-size:.72rem; }
    .login-new-account .action-btn { width:auto; min-height:36px; margin:0; padding:7px 12px; white-space:nowrap; }
    .login-new-account .login-approval-note { display:none; }
    .login-legal { margin-top:9px; padding-top:8px; }
    .login-legal-links { font-size:.66rem; }
    .login-legal p { display:none; }
    /* Login readability pass: larger type and a non-overlapping control map. */
    .login-card-tools { display:grid; grid-template-columns:minmax(0,1fr); align-items:stretch; gap:8px; margin-bottom:8px; }
    .login-secure-label { font-size:.76rem; line-height:1.25; letter-spacing:.07em; white-space:normal; }
    .login-card-actions { display:grid; grid-template-columns:minmax(0,1fr) 82px; align-items:center; gap:8px; width:100%; margin:0; }
    .login-language-pill { height:40px; border-radius:10px; }
    #loginLanguagePreference { min-width:0; height:38px; min-height:38px; padding:7px 28px 7px 30px; font-size:.82rem; }
    .login-audio-compact { position:relative; width:82px !important; min-width:82px !important; min-height:40px !important; height:40px; padding:0 10px !important; gap:6px; font-size:.76rem; }
    .login-audio-compact span { position:static; width:auto; height:auto; padding:0; margin:0; overflow:visible; clip:auto; white-space:nowrap; border:0; }
    .login-access-note { margin:0 0 13px; padding-bottom:11px; font-size:.79rem; line-height:1.42; }
    #loginForm label { font-size:.86rem; line-height:1.3; margin-bottom:5px; }
    #loginForm input { min-height:44px; font-size:.95rem; }
    .login-utility-row { grid-template-columns:minmax(0,1fr) minmax(170px,220px); gap:12px; margin:4px 0 11px; }
    .login-remember label { font-size:.80rem; white-space:normal; }
    .login-help-inline { max-width:220px; font-size:.74rem; line-height:1.35; }
    #loginForm > .submit-btn { min-height:46px; font-size:.94rem; }
    .login-divider { margin:11px auto 8px; font-size:.69rem; }
    .social-signin button { min-height:42px; font-size:.82rem; }
    .login-new-account p { font-size:.78rem; }
    .login-new-account .action-btn { min-height:40px; font-size:.80rem; }
    .login-legal-links { font-size:.73rem; }
    @media (max-width:540px) {
      #authSection > .auth-card { width:min(100%,500px) !important; padding:16px !important; }
      .login-card-actions { grid-template-columns:minmax(0,1fr) 76px; }
      .login-audio-compact { width:76px !important; min-width:76px !important; }
      .login-utility-row { grid-template-columns:minmax(0,1fr); gap:5px; }
      .login-help-inline { max-width:none; text-align:left; }
    }

    @media (max-width:420px) {
      .login-card-tools { grid-template-columns:minmax(0,1fr); align-items:stretch; }
      .login-secure-label { white-space:normal; }
      .login-card-actions { grid-template-columns:minmax(0,1fr) 34px; width:100%; margin-left:0; }
      #loginLanguagePreference { width:100%; }
      .login-utility-row { grid-template-columns:minmax(0,1fr); align-items:start; gap:4px; }
      .login-remember label { white-space:normal; }
      .login-help-inline { max-width:none; text-align:left; }
      .login-new-account { grid-template-columns:minmax(0,1fr); align-items:stretch; }
      .login-new-account .action-btn { width:100%; }
    }
    @media (max-width:420px) {
      .login-context { padding:12px; }
      .login-trust-row { display:grid; grid-template-columns:minmax(0,1fr); }
      .login-trust-chip { width:100%; border-radius:9px; }
      .login-divider { font-size:.60rem; }
    }
    @media (max-width:640px) and (max-height:760px) {
      #authSection { padding-top:224px; }
      .brand-header { top:-210px; padding-top:126px; }
      .mascot-stage { min-height:112px; }
      .mascot-stage::before { width:104px; height:104px; }
      .brand-header img { width:96px; height:96px; }
    }
    .wellbeing-banner { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; gap:12px; padding:12px 14px; margin-bottom:18px; border:1px solid rgba(45,212,191,.45); border-left:5px solid var(--primary-color); border-radius:10px; background:linear-gradient(90deg,rgba(13,148,136,.2),rgba(15,43,72,.66)); box-shadow:0 8px 20px rgba(0,0,0,.12); }
    .wellbeing-banner > * { position:relative; z-index:1; }
    .wellbeing-banner::after { content:""; position:absolute; z-index:0; inset:0 0 0 auto; width:190px; pointer-events:none; opacity:.26; background:linear-gradient(90deg,transparent,rgba(7,17,30,.15)),url('/assets/4k/welcome-footsteps-banner-4k.jpg') center/cover; mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.92) 44%); }
    .wellbeing-banner .tip-icon { display:inline-grid; place-items:center; width:30px; height:30px; flex:0 0 30px; color:#5eead4; border:1px solid rgba(94,234,212,.28); border-radius:9px; background:rgba(45,212,191,.1); }
    .wellbeing-banner .tip-icon .ui-icon { width:17px; height:17px; vertical-align:0; }
    .wellbeing-banner p { margin:0; color:var(--text-dark); font-size:.88rem; line-height:1.4; flex:1; }
    .wellbeing-banner button { background:transparent; color:var(--text-muted); border:0; font-size:1.15rem; cursor:pointer; padding:3px 6px; }
    .runtime-error-banner { border-left-color:#fb7185; background:linear-gradient(90deg,rgba(190,24,93,.22),rgba(15,43,72,.72)); }
    .runtime-error-banner .tip-icon { color:#fecdd3; border-color:rgba(251,113,133,.36); background:rgba(190,24,93,.18); }
    .runtime-error-banner .action-btn { flex:0 0 auto; margin:0; min-height:38px; white-space:nowrap; }
    .portal-tour { position:relative; min-height:350px; margin-bottom:22px; overflow:hidden; border:1px solid var(--border-color); border-radius:16px; background:#07111e; box-shadow:0 14px 28px rgba(2,8,23,.28); }
    .portal-tour-slide { position:absolute; inset:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.82fr); opacity:0; pointer-events:none; transform:scale(1.015); transition:opacity .55s ease, transform .55s ease; }
    .portal-tour-slide.is-active { opacity:1; pointer-events:auto; transform:scale(1); }
    .portal-tour-image { width:100%; height:100%; min-height:350px; object-fit:cover; filter:brightness(.88) saturate(1.08) contrast(1.02); animation:tourImageDrift 12s ease-in-out infinite alternate; }
    .portal-tour-copy { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:24px 28px 30px; color:#fff; background:linear-gradient(135deg,rgba(7,17,30,.96),rgba(15,43,72,.86)); }
    .portal-tour-kicker { color:#5eead4; font-weight:800; font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; }
    .portal-tour h2 { color:#fff; font-size:clamp(1.35rem,2.6vw,2.05rem); line-height:1.12; }
    .portal-tour p { color:#dbeafe; line-height:1.55; max-width:52ch; }
    .portal-tour-fact { padding:9px 11px; border-left:3px solid #2dd4bf; border-radius:0 7px 7px 0; background:rgba(45,212,191,.11); color:#ccfbf1; font-size:.82rem; line-height:1.45; }
    .portal-tour-actions { display:flex; gap:8px; flex-wrap:wrap; }
    .portal-tour-actions button { width:auto; padding:8px 12px; border:1px solid rgba(255,255,255,.25); border-radius:8px; background:#0d9488; color:#fff; cursor:pointer; font:700 .8rem inherit; }
    .portal-tour-actions button:hover { background:#0f766e; }
    .tour-controls { position:absolute; z-index:3; left:18px; bottom:14px; display:flex; align-items:center; gap:8px; }
    .tour-controls button { width:34px; height:34px; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:rgba(7,17,30,.72); color:#fff; cursor:pointer; font-size:1rem; }
    .tour-controls button:hover { background:var(--primary-color); }
    .tour-dots { display:flex; gap:6px; }
    .tour-dots button { width:8px; height:8px; min-height:0; padding:0; border:0; background:rgba(255,255,255,.4); }
    .tour-dots button.is-active { width:22px; border-radius:999px; background:#5eead4; }
    @keyframes tourImageDrift { from { transform:scale(1); } to { transform:scale(1.075); } }
    .signature-pad { width:100%; height:140px; display:block; margin:7px 0 10px; background:#fff; border:2px dashed var(--primary-color); border-radius:8px; cursor:crosshair; touch-action:none; }
    .form-template-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px; margin-bottom:12px; border:1px dashed var(--border-color); border-radius:8px; background:rgba(13,148,136,.07); }
    .form-template-bar select { flex:1; min-width:190px; margin:0; padding:7px; } .form-template-bar .action-btn { margin:0; padding:7px 10px; } .form-template-bar span { width:100%; font-size:.72rem; color:var(--text-muted); }
    /* Usability polish: preserves the current teal and navy palette. */
    .container { max-width:1200px; }
    .card { border-radius:14px; padding:22px; box-shadow:0 12px 28px rgba(2,8,23,.22); }
    .card-header-bar { gap:12px; padding-bottom:12px; margin-bottom:18px; }
    .card-header-bar h2 { letter-spacing:-.015em; }
    h3 { line-height:1.3; }
    label, .form-label { margin-bottom:6px; letter-spacing:.01em; }
    input, select, textarea { min-height:44px; padding:11px 13px; border-radius:9px; background-color:color-mix(in srgb,var(--input-bg) 92%, #ffffff 8%); }
    textarea { min-height:96px; line-height:1.45; resize:vertical; }
    input::placeholder, textarea::placeholder { color:color-mix(in srgb,var(--text-muted) 85%, transparent); }
    input[type="checkbox"],
    input[type="radio"] {
      width:18px;
      min-width:18px;
      max-width:18px;
      height:18px;
      min-height:18px;
      padding:0;
      margin:0 8px 0 0;
      border:0;
      border-radius:4px;
      background:transparent;
      box-shadow:none;
      vertical-align:middle;
      flex:0 0 18px;
      accent-color:var(--primary-color);
    }
    input[type="radio"] { border-radius:50%; }
    input[type="checkbox"]:focus,
    input[type="radio"]:focus {
      border-color:transparent;
      box-shadow:none;
    }
    input[type="checkbox"]:focus-visible,
    input[type="radio"]:focus-visible {
      outline:2px solid rgba(45,212,191,.8);
      outline-offset:2px;
    }
    button, input, select, textarea { font-family:inherit; }
    button.submit-btn { min-height:46px; border-radius:9px; box-shadow:0 6px 14px rgba(13,148,136,.18); }
    .action-btn { min-height:36px; border-radius:8px; padding:8px 12px; box-shadow:0 3px 8px rgba(2,8,23,.16); }
    .action-btn:hover, button.submit-btn:hover {
      transform: translateY(-1px);
      background-color: var(--primary-hover);
    }
    .action-btn:focus-visible, button:focus-visible, a:focus-visible { outline:3px solid rgba(45,212,191,.7); outline-offset:3px; }
    .item-row { border-radius:10px; padding:14px 16px; transition:transform .15s ease, border-color .15s ease, background-color .15s ease; }
    .item-row:hover { border-color:var(--primary-color); background-color:color-mix(in srgb,var(--input-bg) 90%, var(--primary-color) 10%); }
    .workspace-card, .store-item { border-radius:12px; padding:18px; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
    .workspace-card form > :last-child { margin-bottom:0; }
    .record-list { gap:11px; }
    .form-template-bar { border-radius:10px; padding:11px; }
    .wellbeing-banner { border-radius:12px; }
    .nav-links { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; padding:3px 1px 7px; gap:5px; }
    .nav-links li { flex:0 0 auto; }
    .nav-links li button { white-space:nowrap; border:1px solid transparent; border-radius:8px; padding:8px 11px; }
    .nav-links li button.active { border-color:rgba(255,255,255,.65); box-shadow:0 3px 10px rgba(13,148,136,.28); }
    .chat-box { border-radius:12px; }
    .modal-card { border-radius:14px; box-shadow:0 24px 64px rgba(0,0,0,.45); }
    @media (max-width:767px) { .container { padding:14px; } .card { padding:17px; border-radius:12px; } .card-header-bar { align-items:flex-start; flex-direction:column; } .card-header-bar > * { max-width:100%; } .social-signin { grid-template-columns:1fr; } .workspace-grid, .store-grid { grid-template-columns:1fr; } .wellbeing-banner { align-items:flex-start; } }

    @media (max-width:820px) { #authSection { padding:20px 14px; align-items:flex-start; } #authSection > .auth-card { max-width:500px !important; } }
    @media (max-width:820px) and (min-height:800px) { #authSection { align-items:center; } }

    /* Gentle motion gives feedback without changing the visual theme. */
    .tab-content.active { animation:tabReveal .32s cubic-bezier(.2,.75,.25,1) both; }
    @keyframes tabReveal { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
    .card { animation:cardArrival .42s ease both; }
    @keyframes cardArrival { from { opacity:.84; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
    .card-header-bar h2::before { content:''; display:inline-block; width:7px; height:7px; margin:0 9px 2px 0; border-radius:50%; background:#2dd4bf; box-shadow:0 0 0 0 rgba(45,212,191,.6); animation:headingGlow 2.6s ease-in-out infinite; }
    @keyframes headingGlow { 50% { box-shadow:0 0 0 6px rgba(45,212,191,0); } }
    .workspace-card, .store-item { transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
    .workspace-card:hover, .store-item:hover { transform:translateY(-3px); border-color:var(--primary-color); box-shadow:0 12px 24px rgba(2,8,23,.18); }
    .guide-link-card { width:100%; min-height:164px; border:1px solid var(--border-color); border-radius:12px; padding:17px; background:linear-gradient(145deg,var(--panel-bg),rgba(13,148,136,.08)); color:var(--text-dark); text-align:left; cursor:pointer; font:inherit; line-height:1.55; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background-color .2s ease; }
    .guide-link-card:hover, .guide-link-card:focus-visible { transform:translateY(-3px); border-color:var(--primary-color); background:linear-gradient(145deg,var(--panel-bg),rgba(13,148,136,.18)); box-shadow:0 12px 24px rgba(2,8,23,.18); outline:none; }
    .guide-link-card h3 { color:var(--text-dark); margin:0 0 7px; font-size:1rem; }
    .guide-link-card p { color:var(--text-muted); margin:0; }
    .guide-link-card .guide-open { display:block; margin-top:12px; color:var(--primary-color); font-size:.78rem; font-weight:700; }
    /* School setup: compact, ordered steps that use the available width instead of tall empty cards. */
    .school-setup-card { padding:20px 22px; }
    .school-setup-card .card-header-bar { margin-bottom:6px; }
    .school-setup-card .card-header-bar h2 { font-size:clamp(1.2rem,1.5vw,1.48rem); }
    .school-setup-intro { margin:0 0 14px; color:var(--text-muted); font-size:clamp(.96rem,1.05vw,1.08rem); line-height:1.45; }
    .school-setup-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
    .school-setup-step {
      min-height:0;
      padding:15px 16px;
      display:grid;
      grid-template-rows:auto auto auto;
      align-content:start;
      gap:7px;
      border-radius:13px;
    }
    .school-setup-step h3 { display:flex; align-items:center; gap:9px; margin:0; font-size:clamp(1.04rem,1.1vw,1.18rem); line-height:1.25; }
    .school-setup-step p { margin:0; font-size:clamp(.9rem,.98vw,1rem); line-height:1.42; }
    .school-setup-step .guide-open { margin-top:3px; font-size:clamp(.82rem,.9vw,.92rem); }
    .school-setup-number {
      display:inline-grid;
      place-items:center;
      width:28px;
      height:28px;
      flex:0 0 28px;
      border:1px solid rgba(94,234,212,.42);
      border-radius:9px;
      background:rgba(45,212,191,.14);
      color:#99f6e4;
      font-size:.86rem;
      font-weight:900;
    }
    @media (max-width:1180px) { .school-setup-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
    @media (max-width:640px) {
      .school-setup-card { padding:16px; }
      .school-setup-grid { grid-template-columns:1fr; }
      .school-setup-step { padding:14px; }
      .school-setup-step h3 { font-size:1.08rem; }
      .school-setup-step p { font-size:.94rem; }
    }
    button, .nav-links li button { transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease; }
    button.submit-btn:not(:disabled)::after { content:'→'; margin-left:3px; transition:transform .16s ease; }
    button.submit-btn:hover::after { transform:translateX(3px); }
    .nav-links li button.active { animation:activeTab .35s ease both; }
    @keyframes activeTab { 0% { transform:scale(.94); } 65% { transform:scale(1.04); } 100% { transform:scale(1); } }
    .badge-tag { animation:badgePop .35s ease both; }
    @keyframes badgePop { from { opacity:0; transform:scale(.78); } to { opacity:1; transform:scale(1); } }
    .wellbeing-banner:not(.hidden) { animation:bannerSlide .5s cubic-bezier(.2,.75,.25,1) both; }
    @keyframes bannerSlide { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
    .user-avatar { box-shadow:0 0 0 0 rgba(13,148,136,.55); animation:avatarPulse 3s ease-in-out infinite; }
    @keyframes avatarPulse { 50% { box-shadow:0 0 0 5px rgba(13,148,136,0); } }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }
    .hidden { display: none !important; }

    @media (min-width: 768px) {
      .container { padding: 30px; }
      .card { padding: 24px; margin-bottom: 25px; }
      body::before { width: 550px; height: 550px; }
      nav { padding: 10px 25px; flex-wrap: wrap; }
      .nav-links { width: 100%; flex-basis: 100%; justify-content: flex-start; margin-top: 0; order: 3; }
      .item-row { flex-direction: row; justify-content: space-between; align-items: center; }
      .flex-form-row { flex-direction: row; }
      .footer-container { flex-direction: row; justify-content: space-between; align-items: center; }
      .compliance-text { margin-top: 0; border-top: none; padding-top: 0; max-width: 60%; text-align: right; }
    }

    /* Keep the account area separate from the full tab bar at every screen width. */
    nav { align-items:center; }
    .nav-brand { flex:0 1 auto; min-width:0; }
    .nav-user-panel { flex:0 1 auto; min-width:0; flex-wrap:wrap; justify-content:flex-end; }
    .nav-links { flex:0 0 100%; width:100%; order:3; }
    .nav-more-toggle { display:none; }
    @media (max-width: 900px) {
      .nav-more-toggle { display:inline-flex; order:2; align-items:center; justify-content:center; gap:7px; min-height:38px; margin:0; padding:8px 12px; border:1px solid rgba(45,212,191,.5); border-radius:9px; background:var(--primary-color); color:#fff; font:inherit; font-size:.78rem; font-weight:700; cursor:pointer; }
      nav .nav-links { display:none; margin:4px 0 0; padding:10px; border:1px solid var(--border-color); border-radius:12px; background:#0b1d30; overflow:visible; }
      nav .nav-links.menu-open { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
      nav .nav-links li { min-width:0; }
      nav .nav-links li button { width:100%; min-height:40px; text-align:left; padding:9px 10px; border:1px solid rgba(148,163,184,.18); }
      .nav-user-panel { order:1; margin-left:auto; }
    }
    @media (max-width: 640px) {
      nav { padding:9px 12px; }
      .nav-brand { gap:7px; }
      .nav-brand img { width:36px; height:36px; }
      .nav-user-panel { font-size:.72rem; gap:6px; }
      #displayRole { max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .nav-user-panel .action-btn { padding:6px 8px; font-size:.68rem !important; }
      .portal-tour-slide { grid-template-columns:1fr; }
      .portal-tour-image { display:none; }
      .wallpaper-overlay-copy { bottom:32px; }
      .wallpaper-mute { top:66px; right:18px; }
      nav .nav-links.menu-open { grid-template-columns:1fr; }
      .nav-more-toggle { order:3; width:100%; }
      .nav-user-panel { width:100%; justify-content:space-between; order:2; }
    }
    @media (min-width: 1440px) {
      .container { max-width:1540px; padding:34px 46px; }
      .card { padding:28px; }
      .workspace-grid { grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); }
      .portal-tour { min-height:350px; }
      .nav-links li button { padding:9px 13px; font-size:.86rem; }
    }

    /* Application shell: grouped navigation keeps every workspace reachable
       without turning the header into a scrolling row of tabs. */
    html, body { max-width:100%; overflow-x:hidden; }
    #dashboardSection { min-height:100vh; }
    #dashboardSection > nav { position:sticky; top:0; z-index:30; }
    .app-sidebar {
      position:fixed; z-index:15; top:68px; left:0; bottom:auto; width:260px;
      height:calc(100dvh - 68px);
      overflow-y:auto; overscroll-behavior:contain; padding:18px 12px 24px;
      isolation:isolate; background:#07111e; border-right:1px solid var(--border-color);
      box-shadow:6px 0 20px rgba(0,0,0,.16);
    }
    .app-sidebar > * { position:relative; z-index:1; }
    .app-sidebar::before { content:""; position:absolute; z-index:0; left:0; right:0; bottom:16px; height:300px; pointer-events:none; opacity:.34; background:linear-gradient(180deg,#07111e 0%,rgba(7,17,30,.18) 32%,#07111e 100%),url('/assets/4k/sidebar-penguin-hq.optimized.png') center bottom/220px auto no-repeat; }
    .sidebar-heading { color:#94a3b8; font-size:.68rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; margin:18px 10px 7px; }
    .sidebar-heading:first-child { margin-top:4px; }
    .app-sidebar [data-nav-group] { position:relative; isolation:isolate; overflow:hidden; margin-top:14px; padding:9px 7px 7px; border:1px solid rgba(148,163,184,.13); border-radius:10px; background:rgba(15,43,72,.88); }
    .app-sidebar [data-nav-group]::before { content:""; position:absolute; z-index:0; right:-10px; bottom:-10px; width:94px; height:94px; background:url('/assets/4k/sidebar-penguin-hq.optimized.png') center bottom/contain no-repeat; opacity:.15; filter:saturate(.9) contrast(1.04); pointer-events:none; }
    .app-sidebar [data-nav-group] > * { position:relative; z-index:1; }
    .app-sidebar [data-nav-group] .sidebar-heading { margin:0 4px 7px; color:#5eead4; }
    .sidebar-group-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0; padding:7px 8px; border:0; border-radius:7px; background:transparent; color:#5eead4; font:800 .72rem/1.1 inherit; letter-spacing:.09em; text-transform:uppercase; cursor:pointer; text-align:left; }
    .sidebar-group-toggle::after { content:none; }
    [data-nav-group].is-collapsed .sidebar-links { display:none; }
    [data-nav-group].is-collapsed::before { opacity:0; }
    /* A saved desktop collapse preference must never hide the mobile drawer. */
    @media (min-width:960px) {
      .app-sidebar.is-collapsed { width:76px; padding-inline:8px; overflow-x:hidden; }
      .app-sidebar.is-collapsed .sidebar-heading, .app-sidebar.is-collapsed .sidebar-group-toggle, .app-sidebar.is-collapsed .sidebar-links, .app-sidebar.is-collapsed .sidebar-signout, .app-sidebar.is-collapsed [data-nav-group]::before { opacity:0; pointer-events:none; }
      .app-sidebar.is-collapsed::after { content:'☰'; position:absolute; top:18px; left:25px; color:#5eead4; font-size:1.25rem; }
    }
    .sidebar-links { list-style:none; display:grid; gap:4px; }
    .sidebar-links li { min-width:0; }
    .sidebar-links .nav-btn, .sidebar-signout {
      width:100%; min-height:40px; display:flex; align-items:center; text-align:left;
      border:1px solid transparent; border-radius:8px; background:transparent; color:#cbd5e1;
      padding:9px 11px; cursor:pointer; font:600 .84rem/1.2 inherit;
    }
    .sidebar-links .nav-btn:hover, .sidebar-links .nav-btn.active { color:#fff; background:var(--primary-color); border-color:rgba(255,255,255,.5); box-shadow:0 4px 12px rgba(13,148,136,.22); }
    .sidebar-signout { color:#fca5a5; margin-top:18px; }
    .sidebar-signout:hover { background:rgba(220,38,38,.14); border-color:rgba(248,113,113,.35); }
    .nav-more-toggle { display:none; }
    .tab-content, .tab-content > *, .card, .workspace-card, .store-item, .item-row { min-width:0; max-width:100%; }
    .tab-content table { width:100%; max-width:100%; table-layout:auto; font-size:clamp(.72rem, 1.8vw, .9rem); }
    .tab-content th, .tab-content td { overflow-wrap:anywhere; white-space:normal; }
    .workspace-grid { grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
    .store-grid { grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
    @media (min-width: 960px) {
      nav { min-height:68px; padding:9px 22px; flex-wrap:nowrap; }
      .nav-user-panel { margin-left:auto; }
      .container { max-width:none; width:calc(100% - 260px); margin-left:260px; padding:26px clamp(20px, 3vw, 48px); }
      #dashboardSection footer { margin-left:260px; }
      #dashboardSection.sidebar-collapsed .container { width:calc(100% - 76px); margin-left:76px; }
      #dashboardSection.sidebar-collapsed footer { margin-left:76px; }
    }
    @media (max-width: 959px) {
      .app-sidebar { top:var(--mobile-header-height, 0px); width:min(86vw, 300px); height:calc(100dvh - var(--mobile-header-height, 0px)); transform:translateX(-105%); transition:transform .22s ease; padding-top:12px; }
      #dashboardSection.sidebar-open .app-sidebar { transform:translateX(0); }
      #dashboardSection.sidebar-open::after { content:""; position:fixed; inset:0; z-index:14; background:rgba(2,8,23,.58); }
      .nav-more-toggle { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:7px 10px; border:1px solid rgba(45,212,191,.5); border-radius:8px; background:var(--primary-color); color:#fff; font:700 .78rem inherit; cursor:pointer; }
      nav { position:sticky; top:0; z-index:20; }
    }
    @media (max-width: 640px) {
      .portal-tour { min-height:380px; }
      .portal-tour-slide { display:block; }
      .portal-tour-image { display:block; position:absolute; inset:0; width:100%; height:100%; min-height:380px; filter:brightness(.76) saturate(1.1); }
      .portal-tour-copy { min-height:380px; justify-content:flex-start; padding:23px 22px 68px; background:linear-gradient(135deg,rgba(7,17,30,.91),rgba(15,43,72,.58)); }
      .portal-tour h2 { font-size:1.48rem; }
      .portal-tour-fact { background:rgba(7,17,30,.58); }
      .portal-tour-actions { width:100%; }
      .portal-tour-actions button { width:100%; min-height:44px; justify-content:center; }
      .tour-controls { left:50%; transform:translateX(-50%); bottom:16px; }
      .chat-compose { grid-template-columns:1fr; }
      .chat-compose .action-btn, .form-template-bar .action-btn { width:100%; justify-content:center; }
      .form-template-bar { align-items:stretch; }
      .form-template-bar select { min-width:0; }
      .card-header-bar { align-items:stretch; }
      .card-header-bar > .action-btn, .card-header-bar > button { width:100%; justify-content:center; }
      .card-header-bar h2 { width:100%; }
      .item-row .action-btn, .item-row button { width:100%; justify-content:center; }
    }

    /* Header: useful context and shortcuts fill the wide centre area for every role. */
    .nav-quickbar { display:flex; flex:1 1 auto; align-items:center; justify-content:flex-start; gap:10px; min-width:0; }
    .nav-welcome { display:flex; flex-direction:column; min-width:0; padding-left:12px; border-left:1px solid rgba(148,163,184,.26); }
    .nav-welcome strong { color:#f8fafc; font-size:.8rem; line-height:1.1; white-space:nowrap; }
    .nav-welcome span { color:#94a3b8; font-size:.68rem; line-height:1.25; white-space:nowrap; }
    .nav-live-pill { display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:6px 10px; border:1px solid rgba(45,212,191,.24); border-radius:999px; background:rgba(13,148,136,.1); color:#99f6e4; font-size:.72rem; font-weight:700; white-space:nowrap; }
    .nav-live-pill::before { content:""; width:7px; height:7px; border-radius:50%; background:#34d399; box-shadow:0 0 0 4px rgba(52,211,153,.12); }
    .nav-live-pill.is-closed { border-color:rgba(148,163,184,.3); background:rgba(71,85,105,.18); color:#cbd5e1; }
    .nav-live-pill.is-closed::before { background:#94a3b8; box-shadow:0 0 0 4px rgba(148,163,184,.12); }
    .nav-term-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:8px; row-gap:2px; align-items:center; min-width:0; max-width:360px; padding:5px 8px; border:1px solid rgba(45,212,191,.28); border-radius:9px; background:rgba(5,31,49,.72); color:#99f6e4; }
    .nav-term-panel strong { grid-column:1; grid-row:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.67rem; line-height:1.15; }
    .nav-term-panel .nav-term-edit { grid-column:2; grid-row:1 / span 2; align-self:center; min-height:28px; margin:0; padding:4px 8px; border:1px solid rgba(94,234,212,.42); border-radius:6px; background:rgba(13,148,136,.74); color:#fff; font:700 .65rem/1 inherit; cursor:pointer; white-space:nowrap; }
    .nav-term-status { grid-column:1; grid-row:2; min-width:0; overflow:hidden; text-overflow:ellipsis; color:#94a3b8; font-size:.60rem; line-height:1.1; white-space:nowrap; }
    .nav-shortcut { min-height:32px; margin:0; padding:6px 10px; border:1px solid rgba(148,163,184,.23); border-radius:8px; background:rgba(15,43,72,.72); color:#dbeafe; font:700 .72rem/1.1 inherit; cursor:pointer; white-space:nowrap; }
    .nav-shortcut:hover { border-color:#2dd4bf; color:#fff; background:rgba(13,148,136,.22); }
    @media (min-width: 960px) { .nav-quickbar + .nav-user-panel { margin-left:0; } }
    @media (max-width: 1150px) { .nav-welcome { display:none; } }
    @media (max-width: 959px) {
      .nav-quickbar { display:flex; flex:1 1 auto; justify-content:flex-end; gap:6px; }
      .nav-quickbar .nav-welcome, .nav-quickbar .nav-live-pill { display:none; }
      .nav-term-panel { max-width:280px; grid-template-rows:auto; }
      .nav-term-panel .nav-term-edit { grid-row:1; }
      .nav-term-status { display:none; }
      .nav-quickbar .nav-shortcut { min-height:34px; padding:7px 9px; font-size:.72rem; }
    }
    @media (max-width: 640px) {
      .nav-quickbar { order:3; width:100%; justify-content:stretch; }
      .nav-term-panel { order:-1; flex:0 0 100%; max-width:none; justify-content:space-between; }
      .nav-term-status { display:none; }
      .nav-quickbar .nav-shortcut { flex:1 1 0; }
      .nav-more-toggle { order:4; }
    }

    /* Buttons remain readable and easy to tap on narrow screens. */
    button, .action-btn, .submit-btn {
      max-width:100%;
      white-space:normal;
      overflow-wrap:anywhere;
      line-height:1.2;
    }
    .action-btn, button.submit-btn { min-height:40px; }
    .sidebar-links .nav-btn { overflow-wrap:anywhere; }
    @media (max-width: 640px) {
      .container { padding:18px 14px; }
      .card { padding:18px; }
      .card-header-bar > div[style*="display:flex"],
      .card > div[style*="display:flex"] { width:100%; }
      .card > div[style*="display:flex"] > .action-btn,
      .card > div[style*="display:flex"] > button { flex:1 1 100%; width:100%; justify-content:center; }
      .signature-pad { width:100% !important; height:auto; }
      nav {
        display:grid;
        grid-template-columns:minmax(0, 1fr) auto;
        align-items:center;
        gap:8px;
      }
      .nav-brand { grid-column:1; grid-row:1; min-width:0; }
      .nav-brand > div { min-width:0; }
      .nav-brand .org-badge { display:none; }
      .nav-user-panel {
        grid-column:2;
        grid-row:1;
        order:initial;
        width:auto;
        margin:0;
        gap:5px;
        justify-content:flex-end;
      }
      .nav-user-panel #displayRole { max-width:90px; }
      .nav-user-panel #serverStatusText { display:none; }
      .nav-user-panel .action-btn { min-height:34px; }
      .nav-quickbar { grid-column:1 / -1; grid-row:2; order:initial; }
      .nav-more-toggle { grid-column:1 / -1; grid-row:3; order:initial; }
    }

    /* Visual system refresh: calmer glass surfaces, clearer hierarchy and softer light mode. */
    :root {
      --panel-glass: rgba(15, 43, 72, .82);
      --panel-glass-strong: rgba(9, 30, 51, .9);
      --panel-highlight: rgba(45, 212, 191, .12);
    }
    body.light-mode {
      --panel-glass: rgba(225, 244, 252, .88);
      --panel-glass-strong: rgba(212, 237, 249, .94);
      --panel-highlight: rgba(13, 148, 136, .10);
      --panel-bg: #d9eff8;
      --input-bg: rgba(246, 252, 255, .9);
      --border-color: #9fcbdc;
    }
    .card,
    .workspace-card,
    .store-item,
    .workspace-results-panel,
    .guide-link-card,
    .modal-card,
    .chat-shell,
    [data-roles][style*="background: var(--panel-bg)"] {
      background: linear-gradient(145deg, var(--panel-glass), rgba(7, 25, 43, .68)) !important;
      border-color: rgba(94, 234, 212, .24);
      box-shadow: 0 18px 42px rgba(2, 8, 23, .20), inset 0 1px 0 rgba(255,255,255,.07);
      backdrop-filter: blur(14px) saturate(112%);
      -webkit-backdrop-filter: blur(14px) saturate(112%);
    }
    body.light-mode .card,
    body.light-mode .workspace-card,
    body.light-mode .store-item,
    body.light-mode .workspace-results-panel,
    body.light-mode .guide-link-card,
    body.light-mode .modal-card,
    body.light-mode .chat-shell,
    body.light-mode [data-roles][style*="background: var(--panel-bg)"] {
      background: linear-gradient(145deg, rgba(233, 248, 255, .94), rgba(202, 232, 245, .80)) !important;
      border-color: rgba(14, 116, 144, .26);
      box-shadow: 0 18px 42px rgba(36, 94, 121, .13), inset 0 1px 0 rgba(255,255,255,.76);
    }
    .card { border-radius: 18px; border-top-width: 4px; }
    .workspace-card, .store-item, .guide-link-card, .workspace-results-panel { border-radius: 15px; }
    .card-header-bar { border-bottom-color: rgba(148,163,184,.24); }
    .card-header-bar h2::before { box-shadow: 0 0 0 4px rgba(45,212,191,.10); }

    /* Login: translucent, restrained heartbeat glow and a moon-like mascot stage. */
    #authSection > .auth-card {
      background: linear-gradient(155deg, rgba(13, 43, 69, .83), rgba(8, 28, 48, .76)) !important;
      border: 1px solid rgba(94,234,212,.36);
      border-top: 5px solid var(--primary-color);
      border-radius: 22px;
      box-shadow: 0 26px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
      backdrop-filter: blur(18px) saturate(118%);
      -webkit-backdrop-filter: blur(18px) saturate(118%);
    }
    body.light-mode #authSection > .auth-card { background: linear-gradient(155deg, rgba(222,244,253,.94), rgba(190,225,241,.87)) !important; }
    .mascot-stage::before {
      width: 176px;
      height: 176px;
      border-radius: 50%;
      border: 1px solid rgba(125, 211, 252, .44);
      background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.34), rgba(94,234,212,.13) 42%, rgba(6,25,43,.08) 70%);
      box-shadow: inset 18px -12px 24px rgba(2,8,23,.18), 0 10px 28px rgba(13,148,136,.18);
    }
    .brand-header img { animation: logoHeartbeat 3.2s ease-in-out infinite; filter: brightness(1.08) contrast(1.03) drop-shadow(0 5px 9px rgba(2,8,23,.32)); }
    @keyframes logoHeartbeat { 0%, 100% { transform:scale(1); } 12% { transform:scale(1.025); } 24% { transform:scale(1); } 36% { transform:scale(1.016); } }
    @media (prefers-reduced-motion: reduce) { .brand-header img { animation:none; } }

    /* Header status and footer are intentionally more visible and polished. */
    .nav-live-pill.is-closed {
      min-height: 36px;
      padding: 7px 12px;
      border-color: rgba(251, 191, 36, .72);
      background: linear-gradient(135deg, rgba(146, 64, 14, .86), rgba(120, 53, 15, .84));
      color: #fef3c7;
      box-shadow: 0 0 0 3px rgba(251,191,36,.12), 0 7px 18px rgba(120,53,15,.22);
      font-weight: 800;
    }
    .nav-live-pill.is-closed::before { background:#fbbf24; box-shadow:0 0 0 4px rgba(251,191,36,.18), 0 0 12px rgba(251,191,36,.78); }
    footer {
      margin-top: 30px;
      padding: 22px 18px;
      border-top: 1px solid rgba(94,234,212,.25);
      background: linear-gradient(120deg, rgba(4,17,30,.97), rgba(8,34,54,.90));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    }
    .footer-container { gap: 10px; }
    .footer-links a { color:#e6fffb; padding:6px 8px; font-weight:700; transition:color .18s ease, background-color .18s ease; }
    .footer-links a:hover, .footer-links a:focus-visible { color:#ffffff; background:rgba(45,212,191,.20); text-decoration:underline; outline:2px solid rgba(94,234,212,.72); outline-offset:2px; }
    #appModal #modalTitle { color:#e6fffb !important; }
    #appModal #modalBody a { color:#67e8f9; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
    #appModal #modalBody a:hover, #appModal #modalBody a:focus-visible { color:#ffffff; }
    body.light-mode footer { background: linear-gradient(120deg, rgba(199,231,244,.96), rgba(221,243,251,.92)); border-top-color:rgba(14,116,144,.24); }
    body.light-mode .footer-links a { color:#0c4a6e; }
    body.light-mode #appModal #modalTitle { color:#0f4c5c !important; }
    body.light-mode #appModal #modalBody a { color:#075985; }

    @media (max-width: 640px) {
      .card { border-radius: 14px; padding: 16px; }
      .workspace-card, .store-item, .guide-link-card, .workspace-results-panel { border-radius: 12px; }
      #authSection > .auth-card { border-radius: 18px; padding: 16px; }
      .mascot-stage { min-height: 158px; }
      .mascot-stage::before { width: 150px; height:150px; }
      .brand-header img { width:134px; height:134px; }
    }

    /* Conversation and signing workspaces: familiar, calm, high-contrast surfaces. */
    .chat-shell { max-width: 1080px; padding: 0; overflow: hidden; }
    .chat-toolbar {
      gap: 9px;
      padding: 14px 16px;
      background: linear-gradient(120deg, rgba(7, 39, 58, .92), rgba(13, 91, 94, .60));
      border-bottom-color: rgba(94,234,212,.20);
    }
    .chat-toolbar .action-btn {
      min-height: 38px;
      margin: 0;
      border: 1px solid rgba(148,163,184,.24);
      background: rgba(6, 29, 48, .60);
      color: #dffbf5;
      box-shadow: none;
    }
    .chat-toolbar .action-btn.btn-blue { background: rgba(13, 148, 136, .92); border-color: rgba(94,234,212,.55); color: #fff; }
    .chat-panel { padding: 18px; }
    .chat-box.modern-chat {
      min-height: 380px;
      height: min(52vh, 500px);
      padding: 16px;
      border: 1px solid rgba(94,234,212,.18);
      border-radius: 16px;
      background-color: rgba(5, 28, 45, .72);
      background-image: radial-gradient(rgba(94,234,212,.055) 1px, transparent 1px), linear-gradient(180deg, rgba(11,50,68,.82), rgba(6,31,49,.78));
      background-size: 18px 18px, auto;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    }
    .chat-compose { gap: 9px; margin-top: 12px; }
    .chat-compose textarea { min-height: 82px; margin:0; border-radius: 15px; padding: 13px 15px; background: rgba(6, 29, 48, .76); }
    .chat-compose .submit-btn { min-height: 48px; border-radius: 14px; box-shadow: 0 10px 20px rgba(13,148,136,.18); }
    .signature-pad {
      min-height: 156px;
      border: 1px solid rgba(94,234,212,.62);
      border-radius: 16px;
      background-color: rgba(237, 251, 255, .96);
      background-image: linear-gradient(rgba(13,148,136,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(13,148,136,.07) 1px, transparent 1px);
      background-size: 18px 18px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 22px rgba(2,8,23,.14);
    }
    .profile-icon-picker { grid-template-columns:repeat(5,minmax(48px,1fr)); gap:10px; }
    .profile-icon-choice {
      min-height:54px;
      border-radius:14px;
      border-color:rgba(94,234,212,.24);
      background:linear-gradient(145deg, rgba(7,39,58,.78), rgba(13,70,82,.55));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
      transition:transform .16s ease,border-color .16s ease,background .16s ease;
    }
    .profile-icon-choice:hover, .profile-icon-choice:focus-visible { transform:translateY(-2px); border-color:#5eead4; background:linear-gradient(145deg, rgba(13,148,136,.36), rgba(6,54,70,.82)); }
    .profile-icon-choice.is-selected { border-color:#5eead4; background:linear-gradient(145deg, rgba(13,148,136,.66), rgba(15,118,110,.72)); box-shadow:0 0 0 3px rgba(45,212,191,.15); }
    body.light-mode .chat-toolbar { background:linear-gradient(120deg, rgba(198,236,247,.96), rgba(167,223,224,.82)); }
    body.light-mode .chat-toolbar .action-btn:not(.btn-blue) { background:rgba(240,251,255,.84); color:#164e63; }
    body.light-mode .chat-box.modern-chat { background-color:rgba(232,247,253,.86); background-image:radial-gradient(rgba(14,116,144,.08) 1px, transparent 1px), linear-gradient(180deg, rgba(238,251,255,.92), rgba(207,235,245,.82)); }
    body.light-mode .chat-compose textarea { background:rgba(248,254,255,.94); }
    body.light-mode .profile-icon-choice { background:linear-gradient(145deg, rgba(245,253,255,.96), rgba(210,239,247,.86)); }
    @media (max-width:640px) {
      .chat-toolbar { padding:12px; }
      .chat-toolbar .action-btn { flex:1 1 100%; justify-content:center; }
      .chat-panel { padding:13px; }
      .chat-box.modern-chat { min-height:300px; height:48vh; }
      .profile-icon-picker { grid-template-columns:repeat(5,minmax(42px,1fr)); gap:8px; }
      .profile-icon-choice { min-height:48px; font-size:1.18rem; }
    }

    /* The login identity sits above the glass card as an iceberg beacon. */
    #authSection { padding-top: 255px; padding-bottom: 44px; }
    #authSection > .auth-card {
      overflow: visible;
      margin-top: 0;
      padding-top: 20px;
      background: linear-gradient(155deg, rgba(13, 43, 69, .58), rgba(8, 28, 48, .46)) !important;
      box-shadow: 0 28px 72px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.10);
    }
    .brand-header {
      position:absolute;
      z-index:4;
      top:-279px;
      left:50%;
      width:min(460px, calc(100vw - 32px));
      margin:0;
      /* Keep the emblem and name on one centred vertical brand axis. */
      padding-top:184px;
      overflow:visible;
      transform:translateX(-50%);
    }
    .mascot-stage {
      position:absolute;
      z-index:6;
      left:50%;
      top:-12px;
      display:grid;
      place-items:center;
      min-height:194px;
      width:194px;
      margin:0;
      transform:translateX(-50%);
      pointer-events:none;
    }
    .mascot-stage::before {
      width:184px;
      height:184px;
      border-radius:50%;
      border:1px solid rgba(248,250,252,.72);
      background:
        radial-gradient(ellipse 18% 11% at 10% 41%, rgba(70,78,88,.20), transparent 72%),
        radial-gradient(ellipse 15% 23% at 91% 34%, rgba(73,82,92,.17), transparent 76%),
        radial-gradient(ellipse 24% 13% at 82% 82%, rgba(68,78,90,.16), transparent 74%),
        radial-gradient(ellipse 16% 10% at 24% 91%, rgba(78,88,98,.14), transparent 72%),
        radial-gradient(ellipse 42% 28% at 42% 18%, rgba(255,255,255,.38), transparent 72%),
        radial-gradient(circle at 38% 30%, #f4f5f3 0%, #d7d9d7 43%, #a5abb0 72%, #6e7780 100%);
      box-shadow:
        0 0 11px rgba(248,250,252,.66),
        0 0 28px rgba(203,226,240,.42),
        0 0 58px rgba(125,211,252,.22),
        0 15px 30px rgba(2,8,23,.30),
        inset -15px -11px 21px rgba(35,43,52,.32),
        inset 9px 7px 15px rgba(255,255,255,.30);
    }
    .brand-header img {
      width:162px;
      height:162px;
      padding:2px;
      border:1px solid rgba(255,255,255,.64);
      border-radius:50%;
      background:rgba(245,253,255,.96);
      box-shadow:0 7px 18px rgba(2,8,23,.25), inset 0 0 0 2px rgba(226,232,240,.18);
      object-fit:cover;
    }
    .brand-header h1 { margin:22px auto 9px; max-width:100%; font-size:clamp(1.8rem,3vw,2.35rem); line-height:1.08; text-align:center; white-space:nowrap; }
    .brand-header p.slogan { margin-top:5px; background:rgba(7,28,47,.52); text-align:center; }
    body.light-mode #authSection > .auth-card { background:linear-gradient(155deg, rgba(222,244,253,.72), rgba(190,225,241,.58)) !important; }
    .sticky-note-form { display:grid; grid-template-columns:minmax(180px,.75fr) minmax(240px,1.6fr) minmax(130px,.5fr) auto; gap:12px; align-items:end; margin-bottom:18px; padding:14px; border:1px solid rgba(45,212,191,.25); border-radius:14px; background:linear-gradient(125deg, rgba(14,116,144,.10), rgba(13,148,136,.08)); }
    .sticky-note-form label { display:grid; gap:6px; color:var(--text-dark); font-size:.8rem; font-weight:700; }
    .sticky-note-form textarea { resize:vertical; min-height:84px; }
    .sticky-note-form .submit-btn { min-height:44px; white-space:nowrap; }
    .sticky-notes-board { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; align-items:start; }
    .sticky-note { position:relative; min-height:180px; padding:18px 16px 15px; border:1px solid rgba(250,204,21,.38); border-radius:4px 13px 8px 13px; color:#1f2937; box-shadow:0 12px 22px rgba(2,8,23,.20); transform:rotate(-.6deg); overflow:hidden; cursor:zoom-in; }
    .sticky-note::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg, transparent 0 26px, rgba(15,23,42,.07) 27px 28px); pointer-events:none; }
    .sticky-note::after { content:""; position:absolute; z-index:0; right:10px; bottom:9px; width:58px; height:58px; background:url('little-feet-mascot.jfif') center/contain no-repeat; opacity:.18; pointer-events:none; }
    .sticky-note:nth-child(even) { transform:rotate(.7deg); }
    .sticky-note strong, .sticky-note p, .sticky-note span { position:relative; z-index:1; display:block; }
    .sticky-note strong { padding-right:22px; font-size:1rem; line-height:1.25; }
    .sticky-note p { min-height:62px; margin:12px 0 18px; padding-right:54px; white-space:pre-wrap; line-height:1.5; font-size:.88rem; }
    .sticky-note span { margin-top:auto; color:rgba(15,23,42,.72); font-size:.72rem; }
    .sticky-note-delete { position:absolute; z-index:2; top:8px; right:9px; width:25px; height:25px; border:0; border-radius:50%; background:rgba(15,23,42,.12); color:#334155; cursor:pointer; font-size:1.15rem; line-height:1; }
    .sticky-note-delete:hover { background:rgba(185,28,28,.18); color:#991b1b; }
    .sticky-note--yellow { background:#fef3a8; }
    .sticky-note--teal { background:#b8f3e5; border-color:rgba(13,148,136,.42); }
    .sticky-note--blue { background:#cceeff; border-color:rgba(2,132,199,.40); }
    .sticky-note--rose { background:#ffd6df; border-color:rgba(225,29,72,.34); }
    #stickyNotesOverlay { position:fixed; inset:0; z-index:80; pointer-events:none; }
    #stickyNotesOverlay.hidden { display:none; }
    #stickyNotesLauncher { position:fixed; z-index:81; right:20px; bottom:20px; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid rgba(94,234,212,.72); border-radius:999px; background:#0f766e; color:#fff; box-shadow:0 10px 24px rgba(2,8,23,.34); cursor:pointer; font-weight:800; }
    #stickyNotesLauncher.hidden { display:none; }
    .floating-sticky-note { position:fixed; width:min(244px, calc(100vw - 28px)); min-height:178px; padding:0 15px 14px; border:1px solid rgba(250,204,21,.44); border-radius:4px 13px 8px 13px; color:#1f2937; box-shadow:0 16px 34px rgba(2,8,23,.34); overflow:hidden; pointer-events:auto; touch-action:none; }
    .floating-sticky-note::before { content:""; position:absolute; inset:36px 0 0; background:repeating-linear-gradient(0deg, transparent 0 26px, rgba(15,23,42,.075) 27px 28px); pointer-events:none; }
    .floating-sticky-note::after { content:""; position:absolute; z-index:0; right:10px; bottom:9px; width:62px; height:62px; background:url('little-feet-mascot.jfif') center/contain no-repeat; opacity:.20; pointer-events:none; }
    .floating-sticky-note.is-dragging { cursor:grabbing; box-shadow:0 22px 42px rgba(2,8,23,.46); }
    .floating-sticky-note--yellow { background:#fef3a8; }
    .floating-sticky-note--teal { background:#b8f3e5; border-color:rgba(13,148,136,.45); }
    .floating-sticky-note--blue { background:#cceeff; border-color:rgba(2,132,199,.44); }
    .floating-sticky-note--rose { background:#ffd6df; border-color:rgba(225,29,72,.38); }
    .floating-sticky-note-handle { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 -15px 12px; padding:10px 13px; border-bottom:1px solid rgba(15,23,42,.14); background:rgba(255,255,255,.20); cursor:grab; user-select:none; font-size:.72rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
    .floating-sticky-note-handle::before { content:"⠿"; font-size:1rem; letter-spacing:0; }
    .floating-sticky-note-delete { position:relative; z-index:3; width:25px; height:25px; border:0; border-radius:50%; background:rgba(15,23,42,.12); color:#334155; cursor:pointer; font-size:1.1rem; line-height:1; }
    .floating-sticky-note-delete:hover { background:rgba(185,28,28,.18); color:#991b1b; }
    .floating-sticky-note strong, .floating-sticky-note p, .floating-sticky-note span { position:relative; z-index:1; display:block; }
    .floating-sticky-note strong { padding-right:4px; line-height:1.25; font-size:1rem; }
    .floating-sticky-note p { min-height:62px; margin:10px 0 18px; padding-right:58px; white-space:pre-wrap; line-height:1.5; font-size:.87rem; }
    .floating-sticky-note span { color:rgba(15,23,42,.70); font-size:.7rem; }
    @media (max-width:640px) { .floating-sticky-note { width:min(222px, calc(100vw - 24px)); min-height:154px; } }
    @media (max-width:640px) {
      .sticky-note-form { grid-template-columns:1fr; }
      .sticky-note-form .submit-btn { width:100%; }
    }

    /* Remaining workspace polish: calm hierarchy, compact controls, and clear high-stakes actions. */
    .tab-content > .card > .card-header-bar {
      padding-bottom: 14px;
      margin-bottom: 16px;
      border-bottom: 1px solid rgba(125,211,252,.18);
    }
    .tab-content > .card > .workspace-grid {
      gap: 14px;
    }
    .workspace-card h3.icon-label .ui-icon,
    .card-header-bar h2.icon-label .ui-icon {
      width: 1.35em;
      height: 1.35em;
      padding: 7px;
      border: 1px solid rgba(94,234,212,.28);
      border-radius: 10px;
      background: rgba(45,212,191,.10);
      color: #99f6e4;
    }
    #schoolDayTab .workspace-card,
    #progressTab .workspace-card,
    #safeguardingTab .workspace-card,
    #financeTab .workspace-card {
      position: relative;
      overflow: hidden;
    }
    #schoolDayTab .workspace-card::after,
    #progressTab .workspace-card::after,
    #safeguardingTab .workspace-card::after,
    #financeTab .workspace-card::after {
      content:"";
      position:absolute;
      inset:auto -32px -54px auto;
      width:124px;
      height:124px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(45,212,191,.12), transparent 68%);
      pointer-events:none;
    }
    #broadcastsTab .card:first-child {
      border-top-color:#ef4444 !important;
      background:linear-gradient(145deg,rgba(66,16,27,.68),rgba(19,39,62,.78)) !important;
      box-shadow:0 20px 44px rgba(69,10,10,.18), inset 0 1px rgba(255,255,255,.07);
    }
    #broadcastsTab .card:first-child h2 {
      display:flex;
      align-items:center;
      gap:10px;
      letter-spacing:.01em;
    }
    #broadcastsTab .card:first-child h2::before {
      content:"!";
      display:grid;
      place-items:center;
      width:25px;
      height:25px;
      border-radius:50%;
      background:rgba(239,68,68,.16);
      border:1px solid rgba(252,165,165,.48);
      color:#fecaca;
      font-size:.9rem;
      font-weight:900;
    }
    #broadcastForm { display:grid; gap:13px; }
    #broadcastForm > div { padding:0; }
    #broadcastForm textarea { min-height:108px; resize:vertical; }
    #broadcastForm > div[style*="grid-template-columns"] {
      padding:12px;
      border:1px solid rgba(125,211,252,.14);
      border-radius:13px;
      background:rgba(2,15,29,.18);
    }
    #broadcastForm .submit-btn {
      min-height:48px;
      border-radius:12px;
      box-shadow:0 12px 25px rgba(220,38,38,.24);
    }
    #broadcastsTab .card + .card { margin-top:22px; }
    #parentPaymentsSummary {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
      gap:12px;
      padding:18px;
      border-left:4px solid #2dd4bf;
      background:linear-gradient(120deg,rgba(13,148,136,.15),rgba(15,43,72,.58)) !important;
    }
    #parentPaymentsActions + div .action-btn,
    #parentPaymentsActions .action-btn { min-height:42px; border-radius:11px; }
    #ticketsTab .card,
    #parentPaymentsTab .card { box-shadow:0 18px 42px rgba(2,8,23,.16), inset 0 1px rgba(255,255,255,.06); }
    .guide-link-card h3::first-letter { color:#5eead4; }
    #guideTab .guide-link-card {
      min-height:176px;
      border-color:rgba(125,211,252,.18);
      background:linear-gradient(150deg,rgba(13,43,69,.62),rgba(16,73,97,.24));
    }
    #guideTab .guide-link-card:hover { box-shadow:0 16px 30px rgba(2,8,23,.23), inset 0 1px rgba(255,255,255,.08); }
    @media (max-width:640px) {
      #broadcastForm > div[style*="grid-template-columns"] { grid-template-columns:1fr !important; }
      #broadcastsTab .card:first-child { padding:16px; }
      #parentPaymentsSummary { grid-template-columns:1fr 1fr; padding:14px; }
      #guideTab .guide-link-card { min-height:0; }
    }

    /* One icon language across the portal: compact, calm, and readable. */
    .professional-icon {
      display:inline-grid;
      place-items:center;
      width:28px;
      height:28px;
      flex:0 0 28px;
      border:1px solid rgba(94,234,212,.22);
      border-radius:9px;
      background:rgba(45,212,191,.10);
      color:#99f6e4;
    }
    .professional-icon .ui-icon { width:16px; height:16px; }
    .card-header-bar h2.icon-label { gap:9px; }
    #guideTab .guide-link-card h3.icon-label { align-items:flex-start; gap:9px; }
    #guideTab .guide-link-card h3.icon-label .professional-icon { margin-top:-2px; }
    .profile-icon-choice { display:grid; place-items:center; color:#99f6e4; }
    .profile-icon-choice .ui-icon { width:20px; height:20px; }
    .profile-icon-choice.is-selected .ui-icon { filter:drop-shadow(0 0 7px rgba(94,234,212,.58)); }
    .profile-icon-picker { grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; width:100%; }
    .profile-icon-choice { min-width:0; width:100%; }

    /* Final shared workspace pass. */
    .action-btn.icon-label,
    .submit-btn.icon-label { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
    .action-btn .professional-icon,
    .submit-btn .professional-icon { width:21px; height:21px; flex-basis:21px; border:0; border-radius:6px; background:rgba(255,255,255,.14); color:currentColor; }
    .action-btn .professional-icon .ui-icon,
    .submit-btn .professional-icon .ui-icon { width:13px; height:13px; }
    .record-list:empty::before { content:"Nothing to show yet."; display:block; padding:16px; border:1px dashed rgba(125,211,252,.22); border-radius:12px; color:var(--text-muted); }
    .modal-card { border:1px solid rgba(125,211,252,.28); background:linear-gradient(145deg,rgba(12,38,62,.98),rgba(7,25,43,.98)); }
    body.light-mode .modal-card { background:linear-gradient(145deg,#f6fcff,#dff2fa); }
    body.light-mode .professional-icon { border-color:rgba(13,148,136,.22); background:rgba(13,148,136,.10); color:#0f766e; }
    @media (max-width:900px) {
      .workspace-grid, .workspace-results-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); }
      .card-header-bar { gap:10px; align-items:flex-start; }
      .card-header-bar h2 { font-size:clamp(1rem,3.8vw,1.25rem); }
      .modal-card { width:min(94vw,680px); max-height:88vh; overflow:auto; }
    }
    @media (max-width:480px) {
      .card { padding:14px; }
      .card-header-bar { flex-wrap:wrap; }
      .badge-tag { font-size:.62rem; }
      .workspace-card { padding:14px; }
      .action-btn, button.submit-btn { width:100%; }
      .profile-icon-picker { grid-template-columns:repeat(4,minmax(0,1fr)); }
    }

    /* Performance pass: preserve the look without repainting the whole wallpaper. */
    .card,
    .workspace-card,
    .workspace-results-panel,
    .guide-link-card,
    .chat-shell,
    .modal-overlay {
      backdrop-filter:none !important;
      -webkit-backdrop-filter:none !important;
    }
    .card,
    .workspace-card,
    .workspace-results-panel,
    .guide-link-card { animation:none; }
    .tab-content.active { animation:fadeIn .16s ease-out both; }
    .portal-welcome-banner::before,
    .portal-tour-image,
    .card-header-bar h2::before,
    .badge-tag,
    .user-avatar { animation:none; }
    .portal-welcome-banner::before { filter:none; opacity:.72; }
    .workspace-card:hover,
    .store-item:hover,
    .guide-link-card:hover { transform:none; }
    .tab-content:not(.active) { content-visibility:auto; contain-intrinsic-size:900px; }
    @media (max-width: 900px) {
      #authSection::before { background-size:auto 100%; }
      .portal-tour { min-height:280px; }
      .portal-tour-image { min-height:280px; }
    }

    /* Mobile action layout: keep controls ordered without turning every button
       (including compact header controls) into an oversized full-width block. */
    @media (max-width: 640px) {
      .container { width:100%; padding:14px 12px; }
      .card, .workspace-card, .store-item { width:100%; }

      .action-btn,
      button.submit-btn { min-height:44px; margin:0; padding:10px 12px; }
      .action-btn { width:auto; }

      .nav-user-panel .action-btn,
      .nav-term-edit,
      .nav-shortcut,
      .nav-more-toggle,
      .modal-close,
      .password-toggle,
      .wellbeing-banner button,
      .tour-controls button,
      .tour-dots button,
      .profile-icon-choice { width:auto; }

      .nav-user-panel .action-btn {
        min-width:38px;
        min-height:38px;
        padding:7px !important;
        justify-content:center;
      }
      .nav-user-panel .action-btn > span { display:none; }
      .nav-user-panel .action-btn .ui-icon { width:18px; height:18px; }
      .nav-user-panel #displayRole { max-width:72px; }

      .nav-quickbar {
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:7px;
      }
      .nav-term-panel { grid-column:1 / -1; min-height:40px; }
      .nav-quickbar .nav-shortcut {
        width:100%;
        min-width:0;
        min-height:42px;
        padding:8px 6px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:5px;
      }
      .nav-more-toggle { width:100%; min-height:44px; }

      .card-header-bar,
      .item-row { align-items:stretch; }
      .card-header-bar > .action-btn,
      .card-header-bar > button,
      .item-row > .action-btn,
      .item-row > button { width:100%; justify-content:center; }

      .card-header-bar > div[style*="display:flex"],
      .item-row > div[style*="display:flex"],
      #parentPaymentsActions,
      .chat-toolbar,
      .portal-tour-actions {
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr));
        width:100%;
        gap:8px !important;
        align-items:stretch !important;
      }
      .card-header-bar > div[style*="display:flex"] > button,
      .item-row > div[style*="display:flex"] > button,
      #parentPaymentsActions > button,
      .chat-toolbar > button,
      .portal-tour-actions > button {
        width:100%;
        min-width:0;
        margin:0;
        justify-content:center;
      }

      .form-template-bar {
        display:grid;
        grid-template-columns:minmax(0,1fr);
        align-items:stretch;
      }
      .form-template-bar select,
      .form-template-bar .action-btn,
      .chat-compose .action-btn,
      .chat-compose .submit-btn,
      #authSection .action-btn,
      #authSection .submit-btn,
      form > .submit-btn { width:100%; justify-content:center; }

      .workspace-grid,
      .workspace-results-grid,
      .store-grid,
      form[style*="grid-template-columns"] {
        grid-template-columns:minmax(0,1fr) !important;
      }
      table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    }

    @media (max-width: 420px) {
      .card-header-bar > div[style*="display:flex"],
      .item-row > div[style*="display:flex"],
      #parentPaymentsActions,
      .chat-toolbar,
      .portal-tour-actions { grid-template-columns:minmax(0,1fr); }
      .nav-brand > div > span:first-child { font-size:.92rem; }
      .nav-user-panel #displayRole { display:none; }
    }

    /* Keep the complete login identity visible above the card on phones. */
    @media (max-width: 640px) {
      #authSection {
        align-items:flex-start;
        padding-top:300px;
        padding-bottom:28px;
      }
      .brand-header {
        top:-280px;
        width:min(270px, calc(100vw - 40px));
        padding-top:194px;
      }
      .mascot-stage { top:0; }
      .brand-header h1 {
        margin:4px 0 6px;
        font-size:clamp(1.72rem, 8.7vw, 1.95rem);
        line-height:1.08;
        white-space:nowrap;
      }
      .brand-header p.slogan {
        max-width:100%;
        padding:5px 10px;
        font-size:clamp(.56rem, 2.65vw, .65rem);
        letter-spacing:clamp(.7px, .35vw, 1.25px);
        line-height:1.2;
        white-space:nowrap;
      }
    }

    /* Cross-device layout hardening: final guard rails for narrow phones,
       tablets, foldables, notches, and short landscape screens. */
    *, *::before, *::after { box-sizing:border-box; }
    img, picture, video, canvas, iframe { max-width:100%; }
    input, select, textarea, button { min-width:0; }
    .container,
    .tab-content,
    .tab-content > *,
    .card,
    .workspace-card,
    .workspace-results-panel,
    .store-item,
    .item-row,
    .chat-shell,
    .portal-tour,
    .modal-card { min-width:0; max-width:100%; }
    .card p,
    .workspace-card p,
    .workspace-results-panel p,
    .item-row,
    .wellbeing-banner p,
    .record-list,
    .chat-box { overflow-wrap:anywhere; word-break:normal; }
    .modal-overlay {
      padding:
        max(12px, env(safe-area-inset-top))
        max(12px, env(safe-area-inset-right))
        max(12px, env(safe-area-inset-bottom))
        max(12px, env(safe-area-inset-left));
    }

    @media (max-width:959px) {
      .app-sidebar {
        max-width:calc(100vw - max(24px, env(safe-area-inset-right)) - max(12px, env(safe-area-inset-left)));
      }
      .container,
      #dashboardSection footer {
        width:100%;
        max-width:100%;
        margin-left:0;
      }
      nav {
        padding-left:max(10px, env(safe-area-inset-left));
        padding-right:max(10px, env(safe-area-inset-right));
      }
      .modal-card {
        width:min(100%, 680px);
        max-width:100%;
        max-height:calc(100dvh - 24px);
      }
    }

    @media (max-width:640px) {
      .card [style*="grid-template-columns:1fr 1fr"],
      .workspace-card [style*="grid-template-columns:1fr 1fr"],
      .modal-card [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns:minmax(0,1fr) !important;
      }
      .card [style*="display:flex"],
      .workspace-card [style*="display:flex"],
      .item-row [style*="display:flex"],
      .modal-card [style*="display:flex"] {
        max-width:100%;
        flex-wrap:wrap;
      }
      .wellbeing-banner { max-width:100%; }
      .wellbeing-banner p { min-width:0; }
      .modal-overlay { align-items:flex-start; overflow:auto; }
      .modal-card { margin-block:auto; }
      .profile-icon-picker { grid-template-columns:repeat(4,minmax(0,1fr)); }
      .nav-brand { max-width:100%; }
      .nav-brand > div { min-width:0; overflow:hidden; }
      .nav-brand > div > span:first-child {
        display:block;
        max-width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
    }

    @media (max-width:360px) {
      .container { padding-inline:10px; }
      .card, .workspace-card { padding:12px; }
      .nav-quickbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .nav-term-panel { grid-column:1 / -1; }
      .profile-icon-picker { grid-template-columns:repeat(3,minmax(0,1fr)); }
      #authSection > .auth-card { padding:14px; }
    }

    @media (max-width:900px) and (max-height:600px) and (orientation:landscape) {
      #authSection {
        min-height:auto;
        align-items:flex-start;
        padding:
          max(10px, env(safe-area-inset-top))
          max(14px, env(safe-area-inset-right))
          max(10px, env(safe-area-inset-bottom))
          max(14px, env(safe-area-inset-left));
      }
      .brand-header {
        top:0;
        width:100%;
        margin-bottom:10px;
        padding-top:0;
        overflow:visible;
      }
      .mascot-stage { min-height:92px; }
      .mascot-stage::before { width:88px; height:88px; }
      .brand-header img { width:80px; height:80px; }
      .brand-header h1 {
        margin:2px 0 4px;
        font-size:1.35rem;
        white-space:normal;
      }
      .brand-header p.slogan {
        max-width:100%;
        font-size:.55rem;
        white-space:normal;
      }
    }
      .legal-inline-link {
      appearance:none;
      border:0;
      background:none;
      color:var(--accent);
      padding:0;
      margin:0;
      font:inherit;
      font-weight:700;
      text-decoration:underline;
      text-underline-offset:2px;
      cursor:pointer;
    }
    .legal-inline-link:hover,
    .legal-inline-link:focus-visible {
      color:var(--text-light);
    }



    /* Final interaction polish: geometry, touch behaviour and motion only.
       No palette or surface-theme changes live in this block. */
    .tab-content { scroll-margin-top:calc(var(--portal-header-height,68px) + 12px); }
    .ui-icon { flex-shrink:0; }
    button:disabled,
    .action-btn:disabled,
    button.submit-btn:disabled {
      cursor:not-allowed;
      transform:none !important;
    }
    @media (hover:none) {
      .workspace-card:hover,
      .store-item:hover,
      .guide-link-card:hover,
      .action-btn:hover,
      button.submit-btn:hover {
        transform:none !important;
      }
    }
    @media (hover:hover) {
      button:not(:disabled):active,
      .action-btn:not(:disabled):active {
        transform:translateY(0) scale(.985);
      }
    }
    /* Executive Home: live management summary. Data is rendered from one aggregate API. */
    .executive-home-overview { margin-bottom:18px; }
    .executive-home-overview .executive-overview-header {
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      flex-wrap:wrap;
      margin-bottom:16px;
    }
    .executive-home-overview .executive-overview-header h2 { margin:0 0 4px; }
    .executive-home-overview .executive-overview-header .meta { display:block; line-height:1.45; }
    .executive-kpi-grid {
      display:grid;
      grid-template-columns:repeat(6,minmax(0,1fr));
      gap:10px;
      margin-bottom:16px;
    }
    .executive-kpi {
      min-width:0;
      padding:13px 14px;
      border:1px solid rgba(103,199,216,.22);
      border-radius:12px;
      background:rgba(5,25,45,.36);
    }
    .executive-kpi span {
      display:block;
      color:var(--text-muted);
      font-size:.72rem;
      font-weight:800;
      letter-spacing:.04em;
      text-transform:uppercase;
    }
    .executive-kpi strong {
      display:block;
      margin-top:6px;
      color:var(--text-light);
      font-size:clamp(1.2rem,1.8vw,1.7rem);
      line-height:1.05;
      overflow-wrap:anywhere;
    }
    .executive-kpi small {
      display:block;
      margin-top:5px;
      color:var(--text-muted);
      font-size:.72rem;
      line-height:1.35;
    }
    .executive-chart-grid {
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:12px;
    }
    .executive-chart-card {
      min-width:0;
      padding:14px;
      border:1px solid rgba(103,199,216,.20);
      border-radius:13px;
      background:rgba(7,29,49,.48);
    }
    .executive-chart-card h3 { margin:0; font-size:1rem; }
    .executive-chart-card > p {
      margin:4px 0 12px;
      color:var(--text-muted);
      font-size:.78rem;
      line-height:1.4;
    }
    .executive-chart-body {
      display:flex;
      align-items:center;
      gap:14px;
      min-height:150px;
    }
    .executive-pie {
      position:relative;
      flex:0 0 132px;
      width:132px;
      height:132px;
      border-radius:50%;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 8px 22px rgba(0,8,20,.22);
    }
    .executive-pie::after {
      content:"";
      position:absolute;
      inset:27px;
      border-radius:50%;
      background:rgba(8,31,52,.96);
      box-shadow:0 0 0 1px rgba(103,199,216,.16);
    }
    .executive-pie-center {
      position:absolute;
      inset:34px;
      z-index:1;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      color:var(--text-light);
      font-size:.86rem;
      font-weight:900;
      line-height:1.15;
    }
    .executive-chart-legend {
      display:grid;
      gap:6px;
      min-width:0;
      flex:1;
    }
    .executive-legend-row {
      display:grid;
      grid-template-columns:10px minmax(0,1fr) auto;
      align-items:center;
      gap:7px;
      min-width:0;
      color:var(--text-muted);
      font-size:.75rem;
      line-height:1.25;
    }
    .executive-legend-swatch {
      width:9px;
      height:9px;
      border-radius:999px;
    }
    .executive-legend-row strong {
      color:var(--text-light);
      font-size:.75rem;
      white-space:nowrap;
    }
    .executive-chart-empty {
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:132px;
      width:100%;
      padding:16px;
      border:1px dashed rgba(103,199,216,.20);
      border-radius:12px;
      color:var(--text-muted);
      font-size:.80rem;
      text-align:center;
    }
    .executive-chart-link {
      width:100%;
      margin-top:12px;
      min-height:36px;
      padding:7px 10px;
      font-size:.76rem;
    }
    @media (max-width:1180px) {
      .executive-kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
      .executive-chart-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    }
    @media (max-width:680px) {
      .executive-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .executive-chart-grid { grid-template-columns:1fr; }
      .executive-chart-body { min-height:138px; }
      .executive-pie { flex-basis:116px; width:116px; height:116px; }
      .executive-pie::after { inset:24px; }
      .executive-pie-center { inset:30px; font-size:.78rem; }
    }

    /* Home/readability pass: cap long reading lines and keep content comfortably sized. */
    #homeTab > .portal-welcome-banner,
    #homeTab > .card,
    #homeTab > .portal-tour,
    #homeTab > .cinematic-journey { width:min(100%,1440px); margin-left:auto; margin-right:auto; }
    #guideTab > .card { width:min(100%,1280px); margin-left:auto; margin-right:auto; }
    #guideTab .card-header-bar h2 { font-size:clamp(1.2rem,2vw,1.5rem); }
    #guideTab .card-header-bar h3 { font-size:1.08rem; }
    .guide-intro, .guide-records-lead { color:var(--text-muted); font-size:.96rem; line-height:1.55; }
    .guide-intro { margin-bottom:18px; }
    .guide-records-lead { margin:0 0 14px; }
    .guide-records-table-wrap { width:100%; overflow:auto; border:1px solid rgba(148,163,184,.16); border-radius:10px; }
    .guide-records-table { width:100%; border-collapse:collapse; table-layout:fixed; text-align:left; font-size:.91rem; line-height:1.5; }
    .guide-records-table th, .guide-records-table td { padding:13px 14px; vertical-align:top; overflow-wrap:normal; word-break:normal; }
    .guide-records-table th { color:#e2e8f0; font-size:.82rem; letter-spacing:.01em; background:rgba(2,8,23,.16); }
    .guide-records-table th:nth-child(1), .guide-records-table td:nth-child(1) { width:16%; }
    .guide-records-table th:nth-child(2), .guide-records-table td:nth-child(2) { width:25%; }
    .guide-records-table th:nth-child(3), .guide-records-table td:nth-child(3) { width:59%; }
    .guide-records-table .guide-records-alt { background:rgba(45,212,191,.06); }
    .guide-records-note { margin:12px 0 0 !important; font-size:.82rem; line-height:1.5; }
    #inspectTab .inspect-log-table { table-layout:auto; min-width:1220px !important; }
    #inspectTab .inspect-log-table th:nth-child(1), #inspectTab .inspect-log-table td:nth-child(1) { width:160px; }
    #inspectTab .inspect-log-table th:nth-child(2), #inspectTab .inspect-log-table td:nth-child(2) { width:104px; }
    #inspectTab .inspect-log-table th:nth-child(3), #inspectTab .inspect-log-table td:nth-child(3) { width:240px; }
    #inspectTab .inspect-log-table th:nth-child(4), #inspectTab .inspect-log-table td:nth-child(4) { width:190px; }
    #inspectTab .inspect-log-table th:nth-child(5), #inspectTab .inspect-log-table td:nth-child(5) { width:250px; }
    #inspectTab .inspect-log-table th:nth-child(6), #inspectTab .inspect-log-table td:nth-child(6) { width:82px; }
    #inspectTab .inspect-log-table th:nth-child(7), #inspectTab .inspect-log-table td:nth-child(7) { width:100px; }
    #inspectTab .inspect-log-table th:nth-child(8), #inspectTab .inspect-log-table td:nth-child(8) { width:120px; }
    #inspectTab .inspect-log-table th:nth-child(9), #inspectTab .inspect-log-table td:nth-child(9) { width:136px; min-width:136px; }
    #inspectTab .inspect-trace-button {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:auto !important;
      min-width:96px;
      min-height:40px;
      padding:8px 14px;
      font-size:.90rem !important;
      font-weight:800;
      line-height:1.15;
      white-space:nowrap !important;
      overflow-wrap:normal !important;
      word-break:keep-all !important;
    }
    #inspectTab .inspect-trace-id {
      display:block;
      margin-top:7px;
      font-size:.80rem;
      line-height:1.35;
      white-space:nowrap;
      color:var(--text-muted);
    }
    #guideTab .guide-link-card { font-size:.92rem; }
    #guideTab .guide-link-card p { font-size:.90rem; line-height:1.55; }
    @media (max-width:760px) {
      .guide-records-table-wrap { overflow:visible; border:0; }
      .guide-records-table, .guide-records-table tbody, .guide-records-table tr, .guide-records-table td { display:block; width:100%; }
      .guide-records-table thead { display:none; }
      .guide-records-table tr { margin:0 0 12px; border:1px solid var(--border-color); border-radius:10px; overflow:hidden; background:rgba(7,28,47,.52); }
      .guide-records-table tr.guide-records-alt { background:rgba(13,148,136,.08); }
      .guide-records-table td { width:100% !important; padding:10px 12px; border:0; font-size:.90rem; }
      .guide-records-table td::before { content:attr(data-label); display:block; margin-bottom:4px; color:#5eead4; font-size:.69rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
    }

    /* Portal panel sizing audit: keep every workspace aligned with the real sidebar
       state, cap ultra-wide reading widths, and let controls wrap before they clip. */
    :root {
      --portal-content-max: 1480px;
      --portal-panel-gap: clamp(14px, 1.35vw, 24px);
    }
    .container > .tab-content.active {
      width:min(100%, var(--portal-content-max));
      margin-inline:auto;
    }
    .tab-content > .card,
    .tab-content > .workspace-grid,
    .tab-content > .workspace-results-grid,
    .tab-content > .store-grid,
    .tab-content > .chat-shell,
    .tab-content > section,
    .tab-content > form {
      min-width:0;
      max-width:100%;
    }
    .card,
    .workspace-card,
    .workspace-results-panel,
    .store-item,
    .chat-shell {
      width:100%;
      min-width:0;
    }
    .card { padding:clamp(16px, 1.5vw, 24px); }
    .workspace-card { padding:clamp(14px, 1.2vw, 20px); }
    .card-header-bar {
      flex-wrap:wrap;
      gap:12px;
    }
    .card-header-bar > *,
    form,
    fieldset,
    .flex-form-row > * {
      min-width:0;
      max-width:100%;
    }
    label, .form-label { font-size:clamp(.84rem, .75vw, .9rem); }
    input, select, textarea { max-width:100%; font-size:clamp(.9rem, .78vw, .98rem); }
    .card h2 { font-size:clamp(1.08rem, 1.25vw, 1.32rem); }

    /* The content offset follows the sidebar element itself instead of a second
       dashboard flag, so expanded/collapsed states cannot cover the panels. */
    @media (min-width:960px) {
      #dashboardSection > .app-sidebar ~ .container {
        width:calc(100% - 260px);
        max-width:none;
        margin-left:260px;
        padding-inline:clamp(20px, 2.7vw, 46px);
      }
      #dashboardSection > .app-sidebar.is-collapsed ~ .container {
        width:calc(100% - 76px);
        margin-left:76px;
      }
      #dashboardSection > .app-sidebar ~ footer { margin-left:260px; }
      #dashboardSection > .app-sidebar.is-collapsed ~ footer { margin-left:76px; }
    }

    /* Support Desk is intentionally fluid: three columns when there is room,
       two or one before any field becomes cramped. */
    #ticketsTab #ticketForm {
      display:grid;
      gap:14px;
    }
    #ticketsTab #ticketForm > .flex-form-row {
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));
      gap:14px;
      align-items:start;
    }
    #ticketsTab #ticketForm input,
    #ticketsTab #ticketForm select,
    #ticketsTab #ticketForm textarea {
      margin-bottom:0;
    }
    #ticketsTab #ticketMessage { min-height:132px; }
    .ticket-queue-toolbar {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
      margin-bottom:12px;
    }
    .ticket-queue-toolbar h2 { min-width:0; margin:0; }
    #ticketDeptFilter {
      width:min(100%, 280px) !important;
      min-width:min(100%, 220px);
      margin:0 !important;
      padding:8px 10px !important;
    }
    #ticketList .item-row > div[style*="display: flex"],
    #ticketList .item-row > div[style*="display:flex"],
    #completedTicketList .item-row > div[style*="display: flex"],
    #completedTicketList .item-row > div[style*="display:flex"] {
      width:100%;
      min-width:0;
      flex-wrap:wrap;
      gap:10px;
    }
    #ticketList .item-row > div[style*="display: flex"] > div:first-child,
    #ticketList .item-row > div[style*="display:flex"] > div:first-child,
    #completedTicketList .item-row > div[style*="display: flex"] > div:first-child,
    #completedTicketList .item-row > div[style*="display:flex"] > div:first-child {
      flex:1 1 320px;
      min-width:0;
    }

    @media (max-width:959px) {
      .container {
        width:100%;
        max-width:100%;
        margin-left:0;
        padding:clamp(14px, 3vw, 22px);
      }
      .container > .tab-content.active { width:100%; }
    }
    @media (max-width:640px) {
      .card,
      .workspace-card { padding:14px; }
      #ticketsTab #ticketForm > .flex-form-row { grid-template-columns:minmax(0,1fr); }
      .ticket-queue-toolbar { align-items:stretch; }
      #ticketDeptFilter {
        width:100% !important;
        min-width:0;
      }
      #ticketList .item-row .action-btn,
      #completedTicketList .item-row .action-btn {
        width:100%;
        justify-content:center;
      }
    }

    /* Professional future surface system — visual depth without WebGL or fake 3D.
       Uses lightweight gradients, highlights and texture so the existing theme stays fast. */
    :root {
      --lf-panel-edge: rgba(94,234,212,.34);
      --lf-panel-edge-soft: rgba(125,211,252,.18);
      --lf-panel-shadow: rgba(1,10,24,.42);
      --lf-teal-bright: #2dd4bf;
      --lf-cyan-bright: #67e8f9;
      --lf-blue-bright: #38bdf8;
      --lf-panel-radius: 16px;
    }

    #dashboardSection > nav {
      background:
        linear-gradient(180deg, rgba(5,21,36,.98), rgba(4,17,31,.98)),
        repeating-linear-gradient(90deg, rgba(94,234,212,.035) 0 1px, transparent 1px 24px);
      border-bottom:1px solid rgba(94,234,212,.24);
      box-shadow:0 12px 28px rgba(0,8,20,.30), inset 0 -1px 0 rgba(125,211,252,.08);
    }

    .app-sidebar {
      top:var(--portal-header-height, 68px);
      height:calc(100dvh - var(--portal-header-height, 68px));
      background:
        radial-gradient(circle at 18% 10%, rgba(45,212,191,.10), transparent 30%),
        repeating-linear-gradient(145deg, rgba(125,211,252,.025) 0 1px, transparent 1px 18px),
        linear-gradient(180deg, #081827, #06111f 74%, #050d18);
      border-right:1px solid rgba(94,234,212,.20);
      box-shadow:8px 0 28px rgba(0,7,18,.28), inset -1px 0 0 rgba(125,211,252,.05);
    }
    .app-sidebar [data-nav-group] {
      border-color:rgba(94,234,212,.15);
      background:
        linear-gradient(145deg, rgba(18,57,88,.78), rgba(8,30,52,.88)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 14px);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 18px rgba(0,8,20,.16);
    }
    .sidebar-links .nav-btn,
    .sidebar-signout,
    .sidebar-group-toggle {
      border:1px solid transparent;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
    }
    .sidebar-links .nav-btn:hover,
    .sidebar-links .nav-btn.active {
      background:linear-gradient(135deg, #0f9f91, #087f86 58%, #09678c);
      border-color:rgba(153,246,228,.62);
      box-shadow:0 8px 18px rgba(13,148,136,.22), inset 0 1px 0 rgba(255,255,255,.20);
    }

    .card,
    .workspace-card,
    .workspace-results-panel,
    .store-item,
    .chat-shell,
    .guide-link-card,
    .modal-card {
      border-color:var(--lf-panel-edge-soft);
      background:
        radial-gradient(circle at 10% 0%, rgba(94,234,212,.105), transparent 30%),
        radial-gradient(circle at 98% 8%, rgba(56,189,248,.075), transparent 26%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 16px),
        linear-gradient(155deg, rgba(15,48,76,.96), rgba(7,27,48,.97)) !important;
      box-shadow:
        0 18px 44px var(--lf-panel-shadow),
        inset 0 1px 0 rgba(255,255,255,.075),
        inset 0 -1px 0 rgba(45,212,191,.05);
    }
    .card {
      border-top:1px solid rgba(103,232,249,.44);
      border-radius:var(--lf-panel-radius);
      box-shadow:
        0 20px 48px rgba(1,10,24,.34),
        0 0 0 1px rgba(45,212,191,.035),
        inset 0 1px 0 rgba(255,255,255,.09);
    }
    .workspace-card,
    .workspace-results-panel,
    .store-item,
    .guide-link-card {
      border-radius:14px;
    }
    .card-header-bar {
      position:relative;
      border-bottom-color:rgba(125,211,252,.17);
    }
    .card-header-bar::after {
      content:"";
      position:absolute;
      left:0;
      bottom:-1px;
      width:min(180px, 34%);
      height:1px;
      background:linear-gradient(90deg, rgba(94,234,212,.88), transparent);
      pointer-events:none;
    }

    .item-row {
      border-color:rgba(125,211,252,.15);
      border-left-color:rgba(45,212,191,.72);
      background:
        linear-gradient(145deg, rgba(20,55,83,.78), rgba(9,34,57,.82)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 1px, transparent 1px 14px);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 8px 18px rgba(1,10,24,.13);
    }
    .item-row:hover {
      border-color:rgba(94,234,212,.42);
      background:
        linear-gradient(145deg, rgba(19,70,91,.84), rgba(9,39,65,.88)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 14px);
    }

    input,
    select,
    textarea {
      border-color:rgba(125,211,252,.22);
      background:
        linear-gradient(180deg, rgba(28,61,88,.86), rgba(18,48,76,.90)) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        inset 0 0 0 1px rgba(2,8,23,.15);
    }
    input:focus,
    select:focus,
    textarea:focus {
      border-color:rgba(94,234,212,.78);
      box-shadow:
        0 0 0 3px rgba(45,212,191,.17),
        0 0 20px rgba(45,212,191,.08),
        inset 0 1px 0 rgba(255,255,255,.05);
    }

    .action-btn,
    button.submit-btn,
    .nav-shortcut,
    .nav-more-toggle {
      position:relative;
      border:1px solid rgba(153,246,228,.30);
      box-shadow:
        0 7px 16px rgba(0,8,20,.20),
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -1px 0 rgba(0,0,0,.14);
      text-shadow:0 1px 1px rgba(0,0,0,.22);
      transform:translateZ(0);
    }
    button.submit-btn,
    .btn-blue,
    .nav-shortcut,
    .nav-more-toggle {
      background:linear-gradient(135deg, #13a89b, #0b8f91 56%, #0876a0) !important;
      color:#fff;
    }
    .btn-green {
      background:linear-gradient(135deg, #16b981, #0d9f83 56%, #0b8d8f) !important;
      color:#fff;
    }
    .btn-red {
      background:linear-gradient(135deg, #ef4444, #d8324f 58%, #b5264f) !important;
      color:#fff;
      border-color:rgba(254,202,202,.30);
    }
    .action-btn:hover,
    button.submit-btn:hover,
    .nav-shortcut:hover,
    .nav-more-toggle:hover {
      filter:brightness(1.07) saturate(1.08);
      transform:translateY(-1px);
      box-shadow:
        0 10px 22px rgba(0,10,24,.25),
        0 0 18px rgba(45,212,191,.11),
        inset 0 1px 0 rgba(255,255,255,.24);
    }
    .action-btn:active,
    button.submit-btn:active,
    .nav-shortcut:active,
    .nav-more-toggle:active {
      transform:translateY(1px);
      box-shadow:0 3px 9px rgba(0,8,20,.22), inset 0 2px 4px rgba(0,0,0,.18);
    }

    .badge-tag {
      border:1px solid rgba(153,246,228,.18);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    }

    .modal-overlay {
      background:rgba(1,8,18,.76);
    }
    .modal-card {
      width:min(94vw, 720px);
      border-color:rgba(94,234,212,.30);
    }
    .modal-card.subscription-modal-card {
      width:min(96vw, 1120px);
    }

    body.light-mode .card,
    body.light-mode .workspace-card,
    body.light-mode .workspace-results-panel,
    body.light-mode .store-item,
    body.light-mode .chat-shell,
    body.light-mode .guide-link-card,
    body.light-mode .modal-card {
      background:
        radial-gradient(circle at 8% 0%, rgba(13,148,136,.10), transparent 30%),
        repeating-linear-gradient(135deg, rgba(14,116,144,.025) 0 1px, transparent 1px 16px),
        linear-gradient(155deg, rgba(242,251,255,.98), rgba(217,240,249,.97)) !important;
      border-color:rgba(14,116,144,.22);
      box-shadow:0 16px 34px rgba(25,82,105,.14), inset 0 1px 0 rgba(255,255,255,.9);
    }
    body.light-mode input,
    body.light-mode select,
    body.light-mode textarea {
      background:linear-gradient(180deg, #fbfeff, #eef8fc) !important;
      border-color:rgba(14,116,144,.24);
    }

    /* Device-specific sizing: phones, tablets, short landscape screens and TV/4K. */
    @media (max-width:959px) {
      .app-sidebar {
        top:var(--portal-header-height, var(--mobile-header-height, 0px));
        height:calc(100dvh - var(--portal-header-height, var(--mobile-header-height, 0px)));
      }
      .card { border-radius:14px; }
      .workspace-grid,
      .workspace-results-grid,
      .store-grid {
        gap:clamp(10px, 2vw, 16px);
      }
    }
    @media (min-width:641px) and (max-width:959px) {
      .container { padding:20px; }
      .workspace-grid,
      .workspace-results-grid {
        grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
      }
      .action-btn,
      button.submit-btn { min-height:42px; }
    }
    @media (max-width:640px) {
      :root { --lf-panel-radius:14px; }
      .container { padding:12px; }
      .card { margin-bottom:14px; padding:14px; }
      .workspace-card,
      .workspace-results-panel,
      .store-item { padding:13px; }
      .card h2 { font-size:1.06rem; }
      label, .form-label { font-size:.86rem; }
      input, select, textarea {
        min-height:44px;
        padding:10px 11px;
        font-size:16px;
      }
      textarea { min-height:108px; }
      .action-btn,
      button.submit-btn,
      .nav-shortcut,
      .nav-more-toggle {
        min-height:44px;
        padding:10px 12px;
        font-size:.84rem;
      }
      .modal-card {
        width:100%;
        max-height:calc(100dvh - 20px);
        border-radius:14px;
        padding:16px;
      }
      .ticket-queue-toolbar h2 { width:100%; }
      #schoolMapContainer { border-radius:12px !important; }
    }
    @media (max-width:420px) {
      .container { padding-inline:10px; }
      .card,
      .workspace-card { padding:12px; }
      .card-header-bar { gap:8px; }
      .item-row { padding:12px; }
      .action-btn,
      button.submit-btn { min-height:46px; }
    }
    @media (max-width:900px) and (max-height:600px) and (orientation:landscape) {
      .container { padding:10px 12px; }
      .card { padding:12px; margin-bottom:12px; }
      .app-sidebar {
        padding-top:8px;
        padding-bottom:12px;
      }
      .action-btn,
      button.submit-btn { min-height:38px; }
    }
    @media (min-width:1920px) and (min-height:900px) {
      :root { --portal-content-max:1760px; }
      .container { padding-block:32px; }
      .card { padding:26px; }
      .workspace-card { padding:21px; }
      .workspace-grid { grid-template-columns:repeat(auto-fit, minmax(360px, 1fr)); }
      .card h2 { font-size:1.38rem; }
      label, .form-label { font-size:.94rem; }
      input, select, textarea { font-size:1rem; }
      .action-btn,
      button.submit-btn,
      .nav-shortcut { min-height:44px; font-size:.9rem; }
      .app-sidebar { width:280px; }
      #dashboardSection > .app-sidebar ~ .container {
        width:calc(100% - 280px);
        margin-left:280px;
      }
      #dashboardSection > .app-sidebar ~ footer { margin-left:280px; }
      #dashboardSection > .app-sidebar.is-collapsed ~ .container {
        width:calc(100% - 76px);
        margin-left:76px;
      }
      #dashboardSection > .app-sidebar.is-collapsed ~ footer { margin-left:76px; }
    }
    @media (min-width:2560px) {
      :root { --portal-content-max:1880px; }
      .container { padding-inline:56px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .action-btn,
      button.submit-btn,
      .nav-shortcut,
      .nav-more-toggle { transform:none !important; }
    }


    /* Final phone density repair: compact controls and tour copy without changing desktop. */
    @media (max-width:640px) {
      .container { padding:10px 9px; }
      .card { padding:12px; margin-bottom:12px; border-radius:12px; }
      .workspace-card,
      .workspace-results-panel,
      .store-item { padding:12px; }

      .card-header-bar {
        align-items:flex-start;
        gap:8px;
        margin-bottom:12px;
        padding-bottom:9px;
      }
      .card-header-bar h2 {
        width:auto;
        max-width:100%;
        font-size:1rem;
        line-height:1.22;
      }
      .card-header-bar > .action-btn,
      .card-header-bar > button,
      .item-row > .action-btn,
      .item-row > button {
        width:auto;
        max-width:100%;
        align-self:flex-start;
        justify-content:center;
      }
      .card-header-bar > div[style*="display:flex"],
      .item-row > div[style*="display:flex"],
      #parentPaymentsActions,
      .chat-toolbar,
      .portal-tour-actions {
        display:flex !important;
        flex-wrap:wrap;
        width:100%;
        gap:7px !important;
        align-items:center !important;
      }
      .card-header-bar > div[style*="display:flex"] > button,
      .item-row > div[style*="display:flex"] > button,
      #parentPaymentsActions > button,
      .chat-toolbar > button,
      .portal-tour-actions > button {
        width:auto;
        max-width:100%;
        min-width:0;
        flex:0 1 auto;
        margin:0;
      }

      .action-btn,
      button.submit-btn {
        min-height:40px;
        padding:8px 10px;
        font-size:.80rem;
        line-height:1.15;
        border-radius:9px;
      }
      form > .submit-btn,
      .chat-compose .submit-btn,
      #authSection .submit-btn {
        width:100%;
      }

      .portal-tour { min-height:336px; }
      .portal-tour-image { min-height:336px; }
      .portal-tour-copy {
        min-height:336px;
        padding:17px 16px 54px;
        gap:7px;
      }
      .portal-tour-kicker { font-size:.64rem; letter-spacing:.09em; }
      .portal-tour h2 {
        font-size:1.22rem;
        line-height:1.14;
      }
      .portal-tour p {
        font-size:.84rem;
        line-height:1.42;
      }
      .portal-tour-fact {
        padding:7px 9px;
        font-size:.73rem;
        line-height:1.38;
      }
      .portal-tour-actions { width:auto; }
      .portal-tour-actions button {
        width:auto;
        min-height:38px;
        padding:7px 10px;
        font-size:.76rem;
      }
      .tour-controls { bottom:12px; }

      #homeTab > .card .card-header-bar > div[style*="justify-content:flex-end"] {
        width:auto;
        flex:0 1 auto;
        justify-content:flex-start !important;
      }
      #findSchoolMapButton,
      #closeSchoolMapButton {
        width:auto !important;
        min-height:40px;
        padding:8px 12px;
        font-size:.80rem;
      }
      #schoolMapContainer {
        height:clamp(360px,62vh,500px) !important;
      }
      #schoolPickerPanel { padding:10px !important; }

      .item-row { padding:11px; }
      .item-row p,
      .card > p { line-height:1.42; }
    }

    @media (max-width:420px) {
      .container { padding-inline:8px; }
      .card,
      .workspace-card { padding:11px; }
      .action-btn,
      button.submit-btn { min-height:40px; }
      .portal-tour { min-height:328px; }
      .portal-tour-image,
      .portal-tour-copy { min-height:328px; }
      .portal-tour h2 { font-size:1.16rem; }
      .portal-tour p { font-size:.82rem; }
      .portal-tour-fact { font-size:.71rem; }
    }


    /* Mobile Home shell: compact header, notices and welcome hero. */
    @media (max-width:640px) {
      #dashboardSection > nav {
        padding:7px 9px 8px;
        gap:6px;
        grid-template-columns:minmax(0,1fr) auto;
      }
      .nav-brand { gap:7px; font-size:1rem; }
      .nav-brand img { width:34px; height:34px; }
      .nav-user-panel { gap:4px; }
      .nav-user-panel .action-btn {
        min-width:34px;
        min-height:34px;
        padding:6px !important;
      }
      .user-avatar { width:26px; height:26px; }

      .nav-quickbar {
        grid-column:1 / -1;
        grid-row:2;
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:6px;
        width:100%;
        margin:0;
      }
      .nav-term-panel {
        grid-column:1 / -1;
        min-height:34px;
        max-width:none;
        padding:4px 7px;
        border-radius:8px;
      }
      .nav-term-panel strong {
        font-size:.66rem;
        line-height:1.1;
      }
      .nav-term-panel .nav-term-edit {
        min-height:30px;
        padding:4px 8px;
        font-size:.64rem;
      }
      .nav-quickbar .nav-shortcut {
        width:100%;
        min-width:0;
        min-height:38px;
        padding:6px 5px;
        gap:4px;
        font-size:.73rem;
        line-height:1.05;
        white-space:nowrap;
      }
      .nav-quickbar .nav-shortcut .ui-icon {
        width:16px;
        height:16px;
      }
      .nav-more-toggle {
        grid-column:1 / -1;
        grid-row:3;
        width:100%;
        min-height:38px;
        padding:6px 9px;
        font-size:.76rem;
      }

      #homeTab > .wellbeing-banner {
        gap:8px;
        padding:9px 10px;
        margin-bottom:10px;
        border-left-width:3px;
        border-radius:10px;
        align-items:flex-start;
      }
      #homeTab > .wellbeing-banner .tip-icon {
        width:26px;
        height:26px;
        flex-basis:26px;
        border-radius:8px;
      }
      #homeTab > .wellbeing-banner .tip-icon .ui-icon {
        width:15px;
        height:15px;
      }
      #homeTab > .wellbeing-banner p {
        font-size:.80rem;
        line-height:1.35;
      }
      #homeTab > #termsNotice p { font-size:.78rem; }
      #homeTab > .wellbeing-banner > button:last-child {
        flex:0 0 30px;
        width:30px;
        min-height:30px;
        padding:2px;
        font-size:1rem;
      }

      #homeTab > .portal-welcome-banner {
        min-height:170px;
        margin-bottom:12px;
        padding:12px 13px;
        background-size:cover,auto 100%;
        background-position:center,right center;
      }
      #homeTab > .portal-welcome-banner .portal-welcome-copy {
        max-width:72%;
      }
      #homeTab .role-home-panel.mascot-role-home .role-home-content {
        max-width:100%;
      }
      #homeTab .portal-welcome-kicker {
        margin-bottom:3px;
        font-size:.60rem;
        letter-spacing:.08em;
      }
      #homeTab .portal-welcome-banner h1 {
        margin-bottom:4px;
        font-size:1.14rem;
        line-height:1.12;
      }
      #homeTab .portal-welcome-banner p {
        font-size:.76rem;
        line-height:1.34;
      }

      #homeTab > .card,
      #homeTab > section {
        margin-bottom:12px !important;
      }
      #homeTab .workspace-grid { gap:10px; }
    }

    @media (max-width:360px) {
      .nav-quickbar {
        grid-template-columns:repeat(3,minmax(0,1fr));
      }
      .nav-quickbar .nav-shortcut {
        font-size:.68rem;
        padding-inline:4px;
      }
      #homeTab > .portal-welcome-banner .portal-welcome-copy {
        max-width:76%;
      }
      #homeTab .portal-welcome-banner h1 { font-size:1.08rem; }
      #homeTab > .wellbeing-banner p { font-size:.77rem; }
    }


    /* Premium surface skin v2 — visual-only.
       No sizing, spacing, display, positioning, responsive or sidebar geometry changes. */
    :root {
      --lf-premium-edge: rgba(118, 230, 236, .24);
      --lf-premium-edge-strong: rgba(94, 234, 212, .40);
      --lf-premium-shadow: rgba(0, 8, 20, .34);
      --lf-premium-teal: #20bfae;
      --lf-premium-cyan: #49cfe0;
    }

    #dashboardSection > nav {
      background:
        linear-gradient(180deg, rgba(11, 31, 49, .99), rgba(5, 20, 34, .99)) !important;
      border-bottom-color: rgba(91, 213, 224, .26) !important;
      box-shadow:
        0 12px 30px rgba(0, 8, 20, .34),
        inset 0 -1px 0 rgba(133, 230, 236, .07) !important;
    }

    .app-sidebar {
      background:
        radial-gradient(circle at 18% 8%, rgba(34, 197, 178, .10), transparent 34%),
        linear-gradient(180deg, rgba(8, 29, 47, .99), rgba(4, 17, 30, .995)) !important;
      border-right-color: rgba(103, 208, 222, .18) !important;
      box-shadow:
        10px 0 32px rgba(0, 7, 18, .30),
        inset -1px 0 0 rgba(123, 226, 232, .05) !important;
    }

    .app-sidebar [data-nav-group] {
      background:
        radial-gradient(circle at 8% 0%, rgba(47, 193, 183, .10), transparent 40%),
        linear-gradient(180deg, rgba(17, 52, 79, .94), rgba(9, 35, 58, .96)) !important;
      border-color: rgba(104, 196, 214, .16) !important;
      box-shadow:
        0 10px 24px rgba(0, 8, 20, .16),
        inset 0 1px 0 rgba(255, 255, 255, .045),
        inset 0 -1px 0 rgba(69, 190, 198, .04) !important;
    }

    .card,
    .workspace-card,
    .workspace-results-panel,
    .store-item,
    .chat-shell,
    .guide-link-card,
    .modal-card,
    .item-row {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 24%),
        radial-gradient(circle at 8% 0%, rgba(41, 198, 184, .13), transparent 34%),
        radial-gradient(circle at 96% 100%, rgba(56, 163, 210, .075), transparent 42%),
        linear-gradient(145deg, rgba(14, 46, 72, .98), rgba(7, 29, 49, .985)) !important;
      border-color: var(--lf-premium-edge) !important;
      box-shadow:
        0 20px 44px var(--lf-premium-shadow),
        inset 0 1px 0 rgba(255, 255, 255, .075),
        inset 0 -1px 0 rgba(62, 200, 202, .04) !important;
      backdrop-filter: blur(12px) saturate(106%);
      -webkit-backdrop-filter: blur(12px) saturate(106%);
    }

    .workspace-card,
    .workspace-results-panel,
    .store-item,
    .guide-link-card,
    .item-row {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 26%),
        radial-gradient(circle at 14% 0%, rgba(44, 194, 180, .09), transparent 36%),
        linear-gradient(145deg, rgba(17, 54, 82, .92), rgba(9, 35, 58, .95)) !important;
      border-color: rgba(103, 199, 216, .20) !important;
      box-shadow:
        0 12px 28px rgba(0, 8, 20, .20),
        inset 0 1px 0 rgba(255, 255, 255, .055),
        inset 0 -1px 0 rgba(52, 184, 194, .035) !important;
    }

    .card-header-bar {
      border-bottom-color: rgba(102, 202, 215, .16) !important;
    }

    input,
    select,
    textarea,
    .chat-box {
      background:
        linear-gradient(180deg, rgba(23, 57, 84, .95), rgba(13, 41, 66, .97)) !important;
      border-color: rgba(100, 191, 211, .22) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        inset 0 0 0 1px rgba(1, 10, 22, .12) !important;
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: rgba(84, 222, 211, .64) !important;
      box-shadow:
        0 0 0 3px rgba(45, 212, 191, .12),
        0 0 18px rgba(45, 212, 191, .07),
        inset 0 1px 0 rgba(255, 255, 255, .045) !important;
    }

    .action-btn,
    button.submit-btn,
    .nav-shortcut,
    .nav-more-toggle,
    .nav-term-edit {
      background:
        linear-gradient(180deg, #24bfae 0%, #129b99 48%, #0b788b 100%) !important;
      border-color: rgba(143, 239, 226, .34) !important;
      box-shadow:
        0 8px 18px rgba(0, 12, 24, .24),
        inset 0 1px 0 rgba(255, 255, 255, .20),
        inset 0 -1px 0 rgba(0, 26, 38, .18) !important;
      text-shadow: 0 1px 1px rgba(0, 18, 27, .34);
    }

    .action-btn:hover,
    button.submit-btn:hover,
    .nav-shortcut:hover,
    .nav-more-toggle:hover,
    .nav-term-edit:hover {
      background:
        linear-gradient(180deg, #2bc9b7 0%, #17a7a2 48%, #0d8192 100%) !important;
      border-color: rgba(159, 248, 235, .46) !important;
      box-shadow:
        0 10px 22px rgba(0, 12, 24, .28),
        0 0 16px rgba(42, 199, 186, .10),
        inset 0 1px 0 rgba(255, 255, 255, .24) !important;
    }

    .btn-red {
      background:
        linear-gradient(180deg, #ef5c66 0%, #d83d52 50%, #b82f49 100%) !important;
      border-color: rgba(255, 190, 196, .28) !important;
    }

    .btn-green {
      background:
        linear-gradient(180deg, #22bd91 0%, #139a82 50%, #0e7f7d 100%) !important;
      border-color: rgba(158, 242, 213, .30) !important;
    }

    .sidebar-links .nav-btn:hover,
    .sidebar-links .nav-btn.active {
      background:
        linear-gradient(180deg, rgba(32, 181, 169, .96), rgba(12, 128, 143, .98)) !important;
      border-color: rgba(142, 237, 226, .48) !important;
      box-shadow:
        0 8px 18px rgba(0, 16, 27, .22),
        inset 0 1px 0 rgba(255, 255, 255, .16) !important;
    }

    .badge-tag,
    .professional-icon,
    .workspace-results-icon {
      border-color: rgba(113, 215, 220, .25) !important;
      background:
        linear-gradient(180deg, rgba(45, 186, 174, .18), rgba(20, 113, 130, .12)) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .055),
        0 4px 12px rgba(0, 10, 20, .10) !important;
    }

    body.light-mode {
      --bg-dark: #c9e2eb;
      --panel-bg: #d6eaf1;
      --input-bg: #dceef3;
      --border-color: #87b6c6;
      --text-dark: #102f43;
      --text-muted: #456779;
      --input-text: #102f43;
      --bubble-bg: #c7e2ea;
    }

    body.light-mode .card,
    body.light-mode .workspace-card,
    body.light-mode .workspace-results-panel,
    body.light-mode .store-item,
    body.light-mode .chat-shell,
    body.light-mode .guide-link-card,
    body.light-mode .modal-card,
    body.light-mode .item-row {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 26%),
        radial-gradient(circle at 10% 0%, rgba(22, 151, 157, .12), transparent 36%),
        radial-gradient(circle at 96% 100%, rgba(42, 132, 178, .08), transparent 40%),
        linear-gradient(145deg, rgba(216, 238, 245, .98), rgba(190, 222, 233, .97)) !important;
      border-color: rgba(49, 129, 153, .25) !important;
      box-shadow:
        0 18px 38px rgba(29, 84, 104, .15),
        inset 0 1px 0 rgba(255, 255, 255, .56),
        inset 0 -1px 0 rgba(18, 111, 137, .055) !important;
    }

    body.light-mode .workspace-card,
    body.light-mode .workspace-results-panel,
    body.light-mode .store-item,
    body.light-mode .guide-link-card,
    body.light-mode .item-row {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 26%),
        linear-gradient(145deg, rgba(225, 243, 248, .98), rgba(202, 229, 237, .98)) !important;
      border-color: rgba(54, 135, 158, .22) !important;
      box-shadow:
        0 10px 24px rgba(35, 90, 109, .12),
        inset 0 1px 0 rgba(255, 255, 255, .52) !important;
    }

    body.light-mode input,
    body.light-mode select,
    body.light-mode textarea,
    body.light-mode .chat-box {
      background:
        linear-gradient(180deg, rgba(224, 241, 247, .98), rgba(207, 231, 239, .98)) !important;
      border-color: rgba(57, 134, 156, .24) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .48),
        inset 0 0 0 1px rgba(24, 99, 121, .035) !important;
    }

    body.light-mode .app-sidebar {
      background:
        radial-gradient(circle at 18% 8%, rgba(30, 159, 158, .10), transparent 34%),
        linear-gradient(180deg, rgba(202, 230, 239, .98), rgba(180, 216, 228, .99)) !important;
      border-right-color: rgba(45, 120, 143, .20) !important;
      box-shadow:
        10px 0 28px rgba(36, 91, 110, .12),
        inset -1px 0 0 rgba(255, 255, 255, .28) !important;
    }

    body.light-mode .app-sidebar [data-nav-group] {
      background:
        linear-gradient(180deg, rgba(218, 239, 245, .96), rgba(193, 225, 235, .97)) !important;
      border-color: rgba(53, 132, 154, .18) !important;
      box-shadow:
        0 8px 18px rgba(35, 91, 108, .10),
        inset 0 1px 0 rgba(255, 255, 255, .42) !important;
    }

    body.light-mode #dashboardSection > nav {
      background:
        linear-gradient(180deg, rgba(24, 72, 91, .98), rgba(17, 54, 73, .99)) !important;
      border-bottom-color: rgba(81, 184, 193, .30) !important;
    }


    /* Royal pristine palette — colour/material only, zero geometry changes. */
    :root {
      --lf-royal-midnight: #071a2f;
      --lf-royal-sapphire: #0b3157;
      --lf-royal-teal: #0b8f8c;
      --lf-royal-jade: #20b6a5;
      --lf-royal-cyan: #5ad6e4;
      --lf-royal-gold: #d8b76a;
      --lf-royal-gold-soft: rgba(216, 183, 106, .30);
    }

    #dashboardSection > nav {
      background:
        radial-gradient(circle at 28% -80%, rgba(62, 162, 184, .16), transparent 42%),
        linear-gradient(180deg, #081f35 0%, #06172a 100%) !important;
      border-bottom-color: rgba(109, 217, 223, .28) !important;
      box-shadow:
        0 14px 34px rgba(0, 6, 18, .38),
        inset 0 -1px 0 rgba(216, 183, 106, .08) !important;
    }

    .app-sidebar {
      background:
        radial-gradient(circle at 20% 5%, rgba(31, 182, 170, .12), transparent 34%),
        linear-gradient(180deg, #0a2741 0%, #071b30 48%, #051425 100%) !important;
      border-right-color: rgba(98, 196, 211, .20) !important;
      box-shadow:
        12px 0 34px rgba(0, 6, 18, .34),
        inset -1px 0 0 rgba(216, 183, 106, .055) !important;
    }

    .app-sidebar [data-nav-group] {
      background:
        linear-gradient(180deg, rgba(17, 59, 91, .96), rgba(9, 39, 66, .98)) !important;
      border-color: rgba(104, 204, 216, .19) !important;
      box-shadow:
        0 12px 26px rgba(0, 8, 22, .18),
        inset 0 1px 0 rgba(255, 255, 255, .05),
        inset 0 -1px 0 rgba(216, 183, 106, .04) !important;
    }

    .card,
    .workspace-card,
    .workspace-results-panel,
    .store-item,
    .chat-shell,
    .guide-link-card,
    .modal-card,
    .item-row {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, 0) 22%),
        radial-gradient(circle at 12% -6%, rgba(54, 190, 185, .15), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(37, 111, 174, .12), transparent 46%),
        linear-gradient(145deg, #123f61 0%, #0c304f 52%, #082540 100%) !important;
      border-color: rgba(104, 205, 217, .26) !important;
      box-shadow:
        0 22px 50px rgba(0, 7, 20, .34),
        0 0 0 1px rgba(216, 183, 106, .025),
        inset 0 1px 0 rgba(255, 255, 255, .085),
        inset 0 -1px 0 rgba(20, 141, 151, .055) !important;
    }

    .workspace-card,
    .workspace-results-panel,
    .store-item,
    .guide-link-card,
    .item-row {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .042), rgba(255, 255, 255, 0) 24%),
        radial-gradient(circle at 10% 0%, rgba(40, 174, 168, .11), transparent 36%),
        linear-gradient(145deg, #164b6f 0%, #103b5e 52%, #0b304f 100%) !important;
      border-color: rgba(109, 198, 214, .23) !important;
      box-shadow:
        0 14px 32px rgba(0, 8, 21, .22),
        inset 0 1px 0 rgba(255, 255, 255, .065),
        inset 0 -1px 0 rgba(216, 183, 106, .03) !important;
    }

    .card-header-bar,
    .workspace-results-heading {
      border-bottom-color: rgba(109, 205, 216, .18) !important;
    }

    .card-header-bar h2,
    .workspace-card h3,
    .guide-link-card h3,
    .workspace-results-heading h3 {
      text-shadow: 0 1px 1px rgba(0, 8, 16, .30);
    }

    .portal-welcome-kicker,
    .guide-open,
    .workspace-card h3::first-letter,
    .guide-link-card h3::first-letter {
      color: #79eadc !important;
    }

    .badge-tag,
    .professional-icon,
    .workspace-results-icon {
      background:
        linear-gradient(180deg, rgba(46, 190, 177, .22), rgba(13, 102, 125, .16)) !important;
      border-color: rgba(119, 222, 217, .27) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .075),
        0 4px 12px rgba(0, 9, 20, .12) !important;
    }

    .badge-tag.info,
    .portal-welcome-kicker::before {
      box-shadow:
        0 0 0 1px rgba(216, 183, 106, .10),
        0 0 14px rgba(216, 183, 106, .14) !important;
    }

    input,
    select,
    textarea,
    .chat-box {
      background:
        linear-gradient(180deg, #173f5e 0%, #102f4c 100%) !important;
      border-color: rgba(104, 190, 210, .24) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .045),
        inset 0 0 0 1px rgba(0, 8, 18, .14) !important;
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: rgba(103, 232, 216, .70) !important;
      box-shadow:
        0 0 0 3px rgba(32, 182, 165, .13),
        0 0 20px rgba(48, 181, 183, .09),
        inset 0 1px 0 rgba(255, 255, 255, .05) !important;
    }

    .action-btn,
    button.submit-btn,
    .nav-shortcut,
    .nav-more-toggle,
    .nav-term-edit {
      background:
        linear-gradient(180deg, #28bcae 0%, #148f98 46%, #0b6c86 100%) !important;
      border-color: rgba(142, 238, 226, .38) !important;
      box-shadow:
        0 9px 20px rgba(0, 9, 22, .27),
        0 0 0 1px rgba(216, 183, 106, .025),
        inset 0 1px 0 rgba(255, 255, 255, .22),
        inset 0 -1px 0 rgba(0, 21, 35, .18) !important;
    }

    .action-btn:hover,
    button.submit-btn:hover,
    .nav-shortcut:hover,
    .nav-more-toggle:hover,
    .nav-term-edit:hover {
      background:
        linear-gradient(180deg, #31c9b9 0%, #19a0a3 46%, #0d7892 100%) !important;
      border-color: rgba(166, 249, 237, .50) !important;
      box-shadow:
        0 11px 24px rgba(0, 9, 22, .30),
        0 0 18px rgba(47, 191, 182, .11),
        inset 0 1px 0 rgba(255, 255, 255, .27) !important;
    }

    .sidebar-links .nav-btn:hover,
    .sidebar-links .nav-btn.active {
      background:
        linear-gradient(180deg, #1ab2a8 0%, #0c7f92 100%) !important;
      border-color: rgba(149, 239, 228, .50) !important;
      box-shadow:
        0 9px 20px rgba(0, 11, 24, .24),
        inset 0 1px 0 rgba(255, 255, 255, .18),
        inset 0 -1px 0 rgba(216, 183, 106, .035) !important;
    }

    body.light-mode {
      --bg-dark: #bddbe5;
      --panel-bg: #cce6ee;
      --input-bg: #d5ebf1;
      --border-color: #79aebf;
      --text-dark: #0c2c42;
      --text-muted: #3f6274;
      --input-text: #0b2b40;
      --bubble-bg: #bedde6;
    }

    body.light-mode .card,
    body.light-mode .workspace-card,
    body.light-mode .workspace-results-panel,
    body.light-mode .store-item,
    body.light-mode .chat-shell,
    body.light-mode .guide-link-card,
    body.light-mode .modal-card,
    body.light-mode .item-row {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 22%),
        radial-gradient(circle at 10% 0%, rgba(19, 137, 143, .13), transparent 36%),
        radial-gradient(circle at 96% 100%, rgba(31, 102, 159, .09), transparent 42%),
        linear-gradient(145deg, #d8edf3 0%, #c4e1e9 56%, #b7d8e3 100%) !important;
      border-color: rgba(45, 119, 145, .27) !important;
      box-shadow:
        0 20px 42px rgba(31, 82, 102, .16),
        0 0 0 1px rgba(216, 183, 106, .03),
        inset 0 1px 0 rgba(255, 255, 255, .60),
        inset 0 -1px 0 rgba(18, 103, 130, .06) !important;
    }

    body.light-mode .workspace-card,
    body.light-mode .workspace-results-panel,
    body.light-mode .store-item,
    body.light-mode .guide-link-card,
    body.light-mode .item-row {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 24%),
        linear-gradient(145deg, #deeff4 0%, #cde6ed 54%, #bfdde6 100%) !important;
      border-color: rgba(48, 122, 147, .24) !important;
      box-shadow:
        0 12px 26px rgba(33, 83, 101, .13),
        inset 0 1px 0 rgba(255, 255, 255, .56) !important;
    }

    body.light-mode input,
    body.light-mode select,
    body.light-mode textarea,
    body.light-mode .chat-box {
      background:
        linear-gradient(180deg, #dceef3 0%, #cbe3eb 100%) !important;
      border-color: rgba(48, 121, 145, .26) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .52),
        inset 0 0 0 1px rgba(19, 91, 112, .04) !important;
    }

    body.light-mode .app-sidebar {
      background:
        radial-gradient(circle at 18% 5%, rgba(20, 143, 145, .11), transparent 34%),
        linear-gradient(180deg, #c7e2ea 0%, #b6d8e2 54%, #a9cfdb 100%) !important;
      border-right-color: rgba(44, 113, 136, .22) !important;
      box-shadow:
        10px 0 28px rgba(34, 83, 101, .13),
        inset -1px 0 0 rgba(255, 255, 255, .30) !important;
    }

    body.light-mode .app-sidebar [data-nav-group] {
      background:
        linear-gradient(180deg, #d6eaf0 0%, #c2dee7 100%) !important;
      border-color: rgba(49, 121, 143, .20) !important;
      box-shadow:
        0 8px 18px rgba(34, 82, 99, .10),
        inset 0 1px 0 rgba(255, 255, 255, .46) !important;
    }

    body.light-mode #dashboardSection > nav {
      background:
        linear-gradient(180deg, #194e68 0%, #123c55 100%) !important;
      border-bottom-color: rgba(88, 190, 194, .30) !important;
      box-shadow:
        0 12px 28px rgba(25, 65, 82, .18),
        inset 0 -1px 0 rgba(216, 183, 106, .065) !important;
    }


    /* Pristine royal contrast v2 — material/colour only. No layout geometry changes. */
    :root {
      --bg-dark: #04101d;
      --panel-bg: #0b2b47;
      --input-bg: #0c2943;
      --text-dark: #f7fbff;
      --text-muted: #b8cbd8;
      --border-color: #2b617b;
      --bubble-bg: #123957;
    }

    body.portal-active {
      background-color: #030b15;
    }

    #dashboardSection > nav {
      background:
        linear-gradient(180deg, rgba(16, 52, 77, .995) 0%, rgba(5, 24, 41, .995) 100%) !important;
      border-bottom-color: rgba(101, 219, 221, .34) !important;
      box-shadow:
        0 14px 34px rgba(0, 4, 14, .40),
        inset 0 1px 0 rgba(255, 255, 255, .045),
        inset 0 -1px 0 rgba(224, 190, 110, .09) !important;
    }

    .app-sidebar {
      background:
        radial-gradient(circle at 14% 4%, rgba(39, 190, 174, .14), transparent 34%),
        linear-gradient(180deg, #0b2d49 0%, #071d33 52%, #041522 100%) !important;
      border-right-color: rgba(98, 205, 214, .24) !important;
      box-shadow:
        12px 0 36px rgba(0, 5, 16, .38),
        inset -1px 0 0 rgba(230, 196, 121, .06) !important;
    }

    .app-sidebar [data-nav-group] {
      background:
        linear-gradient(180deg, rgba(22, 67, 98, .97) 0%, rgba(10, 43, 70, .98) 100%) !important;
      border-color: rgba(111, 207, 218, .23) !important;
      box-shadow:
        0 12px 28px rgba(0, 8, 20, .20),
        inset 0 1px 0 rgba(255, 255, 255, .06),
        inset 0 -1px 0 rgba(229, 194, 116, .04) !important;
    }

    .sidebar-heading {
      color: #a8becd !important;
    }

    .app-sidebar [data-nav-group] .sidebar-heading,
    .sidebar-group-toggle {
      color: #78eadb !important;
      text-shadow: 0 1px 1px rgba(0, 10, 18, .32);
    }

    .sidebar-links .nav-btn {
      color: #e2edf4 !important;
      text-shadow: 0 1px 1px rgba(0, 9, 16, .28);
    }

    .sidebar-links .nav-btn .ui-icon {
      color: #8cefe1 !important;
    }

    .sidebar-links .nav-btn:hover,
    .sidebar-links .nav-btn.active {
      color: #ffffff !important;
      background:
        linear-gradient(180deg, #1ab7aa 0%, #0c8795 54%, #086c83 100%) !important;
      border-color: rgba(157, 245, 233, .58) !important;
      box-shadow:
        0 10px 22px rgba(0, 12, 25, .28),
        0 0 16px rgba(45, 199, 186, .10),
        inset 0 1px 0 rgba(255, 255, 255, .20),
        inset 0 -1px 0 rgba(229, 194, 116, .045) !important;
    }

    .card,
    .workspace-card,
    .workspace-results-panel,
    .store-item,
    .chat-shell,
    .guide-link-card,
    .modal-card,
    .item-row {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .065) 0%, rgba(255, 255, 255, .015) 18%, rgba(255, 255, 255, 0) 34%),
        radial-gradient(circle at 10% -8%, rgba(56, 200, 190, .18), transparent 34%),
        radial-gradient(circle at 100% 110%, rgba(34, 102, 170, .16), transparent 44%),
        linear-gradient(145deg, #123f60 0%, #0d3352 46%, #082540 100%) !important;
      border-color: rgba(111, 207, 220, .30) !important;
      box-shadow:
        0 24px 52px rgba(0, 5, 17, .38),
        0 0 0 1px rgba(228, 193, 113, .035),
        inset 0 1px 0 rgba(255, 255, 255, .10),
        inset 0 -1px 0 rgba(35, 172, 181, .055) !important;
    }

    .workspace-card,
    .workspace-results-panel,
    .store-item,
    .guide-link-card,
    .item-row {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .052) 0%, rgba(255, 255, 255, 0) 25%),
        radial-gradient(circle at 12% 0%, rgba(48, 190, 180, .13), transparent 36%),
        linear-gradient(145deg, #174d70 0%, #103b5d 50%, #0b2f4d 100%) !important;
      border-color: rgba(114, 201, 216, .27) !important;
      box-shadow:
        0 15px 34px rgba(0, 7, 19, .24),
        inset 0 1px 0 rgba(255, 255, 255, .075),
        inset 0 -1px 0 rgba(227, 193, 115, .03) !important;
    }

    .card-header-bar {
      border-bottom-color: rgba(118, 209, 219, .22) !important;
    }

    .card-header-bar h2,
    .workspace-results-heading h3,
    .guide-link-card h3 {
      color: #f5fbff !important;
      text-shadow: 0 1px 1px rgba(0, 8, 16, .34);
    }

    .workspace-card h3 {
      color: #7cebdd !important;
      text-shadow: 0 1px 1px rgba(0, 8, 16, .28);
    }

    .workspace-card p,
    .guide-link-card p,
    .workspace-results-heading p,
    .meta,
    .field-help,
    .login-device-note {
      color: #b9cedb !important;
    }

    .guide-open,
    .portal-welcome-kicker {
      color: #7af0df !important;
    }

    input,
    select,
    textarea,
    .chat-box,
    .profile-icon-choice {
      color: #f7fbff !important;
      background:
        linear-gradient(180deg, #16405f 0%, #0f304e 100%) !important;
      border-color: rgba(111, 196, 215, .28) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .055),
        inset 0 0 0 1px rgba(0, 8, 18, .16) !important;
    }

    input::placeholder,
    textarea::placeholder {
      color: #91abba !important;
    }

    input:focus,
    select:focus,
    textarea:focus,
    .profile-icon-choice:focus-visible {
      border-color: rgba(110, 238, 220, .76) !important;
      box-shadow:
        0 0 0 3px rgba(34, 190, 173, .14),
        0 0 20px rgba(46, 194, 187, .10),
        inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    }

    .action-btn,
    button.submit-btn,
    .nav-shortcut,
    .nav-more-toggle,
    .nav-term-edit {
      color: #ffffff !important;
      background:
        linear-gradient(180deg, #2bc2b3 0%, #15989c 46%, #0b7188 100%) !important;
      border-color: rgba(159, 244, 231, .44) !important;
      box-shadow:
        0 10px 22px rgba(0, 7, 20, .30),
        0 0 0 1px rgba(228, 193, 113, .035),
        inset 0 1px 0 rgba(255, 255, 255, .26),
        inset 0 -1px 0 rgba(0, 24, 36, .20) !important;
      text-shadow: 0 1px 1px rgba(0, 14, 24, .40);
    }

    .action-btn:hover,
    button.submit-btn:hover,
    .nav-shortcut:hover,
    .nav-more-toggle:hover,
    .nav-term-edit:hover {
      background:
        linear-gradient(180deg, #35cdbd 0%, #1aa5a7 46%, #0d7e94 100%) !important;
      border-color: rgba(178, 251, 240, .56) !important;
      box-shadow:
        0 12px 26px rgba(0, 7, 20, .33),
        0 0 19px rgba(50, 199, 187, .13),
        inset 0 1px 0 rgba(255, 255, 255, .30) !important;
    }

    .btn-red {
      background:
        linear-gradient(180deg, #ef6570 0%, #d6455a 50%, #b6324b 100%) !important;
      border-color: rgba(255, 204, 209, .34) !important;
    }

    .btn-green {
      background:
        linear-gradient(180deg, #2ac39a 0%, #169c83 50%, #0e7e79 100%) !important;
      border-color: rgba(177, 246, 219, .36) !important;
    }

    .badge-tag,
    .professional-icon,
    .workspace-results-icon {
      color: #ecfffb !important;
      background:
        linear-gradient(180deg, rgba(44, 191, 178, .30), rgba(14, 105, 130, .22)) !important;
      border-color: rgba(127, 226, 220, .34) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .10),
        0 4px 12px rgba(0, 8, 20, .14) !important;
    }

    body.light-mode {
      --bg-dark: #b7d2dc;
      --panel-bg: #c9e0e7;
      --input-bg: #d5e7ec;
      --text-dark: #082438;
      --text-muted: #31566a;
      --border-color: #6e9fb2;
      --input-text: #082438;
      --bubble-bg: #c1dbe4;
    }

    body.portal-active.light-mode {
      background-color: #afcbd5 !important;
    }

    body.light-mode .card,
    body.light-mode .workspace-card,
    body.light-mode .workspace-results-panel,
    body.light-mode .store-item,
    body.light-mode .chat-shell,
    body.light-mode .guide-link-card,
    body.light-mode .modal-card,
    body.light-mode .item-row {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .08) 20%, rgba(255, 255, 255, 0) 34%),
        radial-gradient(circle at 10% -6%, rgba(22, 149, 153, .14), transparent 36%),
        radial-gradient(circle at 100% 110%, rgba(32, 101, 153, .09), transparent 44%),
        linear-gradient(145deg, #d3e7ec 0%, #c1dbe3 52%, #b5d1dc 100%) !important;
      border-color: rgba(47, 119, 144, .32) !important;
      box-shadow:
        0 20px 42px rgba(26, 71, 90, .17),
        0 0 0 1px rgba(184, 145, 67, .025),
        inset 0 1px 0 rgba(255, 255, 255, .68),
        inset 0 -1px 0 rgba(21, 104, 129, .075) !important;
    }

    body.light-mode .workspace-card,
    body.light-mode .workspace-results-panel,
    body.light-mode .store-item,
    body.light-mode .guide-link-card,
    body.light-mode .item-row {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 24%),
        linear-gradient(145deg, #dcebf0 0%, #c9dfe6 55%, #bdd5de 100%) !important;
      border-color: rgba(48, 120, 145, .30) !important;
      box-shadow:
        0 12px 26px rgba(29, 77, 96, .14),
        inset 0 1px 0 rgba(255, 255, 255, .64) !important;
    }

    body.light-mode .card-header-bar h2,
    body.light-mode .workspace-results-heading h3,
    body.light-mode .guide-link-card h3,
    body.light-mode .workspace-card h3 {
      color: #0a3148 !important;
      text-shadow: 0 1px 0 rgba(255, 255, 255, .30);
    }

    body.light-mode .workspace-card p,
    body.light-mode .guide-link-card p,
    body.light-mode .workspace-results-heading p,
    body.light-mode .meta,
    body.light-mode .field-help,
    body.light-mode .login-device-note {
      color: #31586c !important;
    }

    body.light-mode .guide-open,
    body.light-mode .portal-welcome-kicker {
      color: #087f7e !important;
    }

    body.light-mode input,
    body.light-mode select,
    body.light-mode textarea,
    body.light-mode .chat-box,
    body.light-mode .profile-icon-choice {
      color: #082438 !important;
      background:
        linear-gradient(180deg, #dcebf0 0%, #c9e0e7 100%) !important;
      border-color: rgba(49, 119, 143, .34) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .66),
        inset 0 0 0 1px rgba(17, 82, 103, .045) !important;
    }

    body.light-mode input::placeholder,
    body.light-mode textarea::placeholder {
      color: #5b7888 !important;
    }

    body.light-mode .app-sidebar {
      background:
        radial-gradient(circle at 18% 4%, rgba(43, 188, 175, .14), transparent 34%),
        linear-gradient(180deg, #103955 0%, #0b2b47 52%, #071f35 100%) !important;
      border-right-color: rgba(83, 171, 189, .28) !important;
      box-shadow:
        10px 0 30px rgba(21, 62, 80, .20),
        inset -1px 0 0 rgba(228, 193, 113, .06) !important;
    }

    body.light-mode .app-sidebar [data-nav-group] {
      background:
        linear-gradient(180deg, rgba(24, 74, 104, .96), rgba(12, 50, 80, .98)) !important;
      border-color: rgba(100, 196, 210, .24) !important;
      box-shadow:
        0 9px 20px rgba(9, 36, 54, .18),
        inset 0 1px 0 rgba(255, 255, 255, .065) !important;
    }

    body.light-mode .sidebar-heading {
      color: #b7ccd8 !important;
    }

    body.light-mode .app-sidebar [data-nav-group] .sidebar-heading,
    body.light-mode .sidebar-group-toggle {
      color: #80ecde !important;
    }

    body.light-mode .sidebar-links .nav-btn {
      color: #e8f3f7 !important;
    }

    body.light-mode .sidebar-links .nav-btn .ui-icon {
      color: #8feadd !important;
    }

    body.light-mode #dashboardSection > nav {
      background:
        linear-gradient(180deg, #173f58 0%, #0e3048 100%) !important;
      border-bottom-color: rgba(89, 189, 196, .36) !important;
      box-shadow:
        0 12px 28px rgba(23, 62, 80, .21),
        inset 0 1px 0 rgba(255, 255, 255, .05),
        inset 0 -1px 0 rgba(228, 193, 113, .07) !important;
    }


    /* Eye-comfort light mode — visual tone only, no geometry changes. */
    body.light-mode {
      --bg-dark: #89aeba;
      --panel-bg: #a9c7d0;
      --input-bg: #b8cfd6;
      --text-dark: #0a2b3b;
      --text-muted: #36586a;
      --border-color: #5f8fa1;
      --input-text: #092a3a;
      --bubble-bg: #9fbdc7;
    }

    body.portal-active.light-mode {
      background-color: #86aab6 !important;
    }

    body.portal-active.light-mode::before {
      opacity: .20 !important;
    }

    body.light-mode .card,
    body.light-mode .workspace-card,
    body.light-mode .workspace-results-panel,
    body.light-mode .store-item,
    body.light-mode .chat-shell,
    body.light-mode .guide-link-card,
    body.light-mode .modal-card,
    body.light-mode .item-row {
      background:
        linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.035) 20%, rgba(255,255,255,0) 34%),
        radial-gradient(circle at 10% -8%, rgba(17,132,139,.11), transparent 36%),
        radial-gradient(circle at 100% 110%, rgba(29,91,137,.07), transparent 44%),
        linear-gradient(145deg, #abc8d1 0%, #9dbdc7 52%, #91b2be 100%) !important;
      border-color: rgba(39,103,126,.34) !important;
      box-shadow:
        0 18px 38px rgba(27,67,83,.18),
        inset 0 1px 0 rgba(255,255,255,.26),
        inset 0 -1px 0 rgba(17,91,116,.08) !important;
    }

    body.light-mode .workspace-card,
    body.light-mode .workspace-results-panel,
    body.light-mode .store-item,
    body.light-mode .guide-link-card,
    body.light-mode .item-row {
      background:
        linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 26%),
        linear-gradient(145deg, #b1cbd3 0%, #a3c1ca 54%, #98b8c2 100%) !important;
      border-color: rgba(42,106,129,.31) !important;
      box-shadow:
        0 10px 22px rgba(27,69,86,.14),
        inset 0 1px 0 rgba(255,255,255,.23) !important;
    }

    body.light-mode .card-header-bar h2,
    body.light-mode .workspace-results-heading h3,
    body.light-mode .guide-link-card h3,
    body.light-mode .workspace-card h3 {
      color: #082b3d !important;
      text-shadow: 0 1px 0 rgba(255,255,255,.18);
    }

    body.light-mode .workspace-card p,
    body.light-mode .guide-link-card p,
    body.light-mode .workspace-results-heading p,
    body.light-mode .meta,
    body.light-mode .field-help,
    body.light-mode .login-device-note,
    body.light-mode .card > p {
      color: #345668 !important;
    }

    body.light-mode input,
    body.light-mode select,
    body.light-mode textarea,
    body.light-mode .chat-box,
    body.light-mode .profile-icon-choice {
      color: #092a3a !important;
      background:
        linear-gradient(180deg, #b8d0d7 0%, #abc5cd 100%) !important;
      border-color: rgba(42,103,125,.36) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.24),
        inset 0 0 0 1px rgba(18,74,94,.05) !important;
    }

    body.light-mode input::placeholder,
    body.light-mode textarea::placeholder {
      color: #587684 !important;
    }

    body.light-mode .wellbeing-banner,
    body.light-mode #termsNotice,
    body.light-mode #runtimeErrorBanner {
      background:
        linear-gradient(145deg, #a8c5cf 0%, #99b9c4 100%) !important;
      border-color: rgba(41,103,124,.34) !important;
      box-shadow:
        0 12px 24px rgba(28,68,84,.14),
        inset 0 1px 0 rgba(255,255,255,.20) !important;
    }

    body.light-mode .wellbeing-banner p,
    body.light-mode #termsNotice p {
      color: #0d3446 !important;
    }

    body.light-mode .profile-icon-choice,
    body.light-mode .social-signin button {
      background:
        linear-gradient(180deg, #b6cfd7 0%, #a7c3cc 100%) !important;
      border-color: rgba(43,104,126,.34) !important;
      color: #0a2b3b !important;
    }

    body.light-mode footer {
      background:
        linear-gradient(180deg, #8dabb6 0%, #7e9eaa 100%) !important;
      border-top-color: rgba(39,96,117,.30) !important;
      color: #173f50 !important;
    }


    /* Clear glass surface system — visual only, zero geometry changes. */
    :root {
      --lf-glass-edge: rgba(146, 233, 237, .34);
      --lf-glass-edge-soft: rgba(112, 197, 215, .22);
      --lf-glass-shadow: rgba(0, 7, 19, .30);
      --lf-glass-dark-a: rgba(10, 40, 62, .38);
      --lf-glass-dark-b: rgba(5, 25, 42, .27);
      --lf-glass-teal: rgba(24, 181, 168, .30);
    }

    #dashboardSection > nav {
      background:
        linear-gradient(180deg, rgba(12, 47, 68, .52), rgba(5, 24, 40, .38)) !important;
      border-bottom-color: rgba(119, 222, 226, .32) !important;
      box-shadow:
        0 14px 34px rgba(0, 5, 16, .26),
        inset 0 1px 0 rgba(255, 255, 255, .08),
        inset 0 -1px 0 rgba(226, 193, 116, .07) !important;
      backdrop-filter: blur(22px) saturate(122%);
      -webkit-backdrop-filter: blur(22px) saturate(122%);
    }

    .app-sidebar {
      background:
        linear-gradient(180deg, rgba(10, 45, 67, .48), rgba(4, 24, 41, .34)) !important;
      border-right-color: rgba(111, 210, 220, .26) !important;
      box-shadow:
        12px 0 34px rgba(0, 5, 16, .24),
        inset -1px 0 0 rgba(226, 193, 116, .05) !important;
      backdrop-filter: blur(24px) saturate(118%);
      -webkit-backdrop-filter: blur(24px) saturate(118%);
    }

    .app-sidebar [data-nav-group],
    .nav-term-panel,
    .form-template-bar,
    .chat-toolbar {
      background:
        linear-gradient(180deg, rgba(28, 75, 101, .34), rgba(8, 38, 62, .24)) !important;
      border-color: rgba(116, 209, 220, .25) !important;
      box-shadow:
        0 10px 24px rgba(0, 7, 18, .15),
        inset 0 1px 0 rgba(255, 255, 255, .075) !important;
      backdrop-filter: blur(18px) saturate(116%);
      -webkit-backdrop-filter: blur(18px) saturate(116%);
    }

    .card,
    .workspace-card,
    .workspace-results-panel,
    .store-item,
    .chat-shell,
    .guide-link-card,
    .modal-card,
    .item-row,
    .wellbeing-banner,
    #termsNotice,
    #runtimeErrorBanner,
    #schoolPinCard,
    #householdSwitcher,
    [data-roles][style*="background: var(--panel-bg)"] {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .025) 20%, rgba(255, 255, 255, 0) 36%),
        radial-gradient(circle at 10% 0%, rgba(62, 208, 198, .10), transparent 38%),
        linear-gradient(145deg, var(--lf-glass-dark-a), var(--lf-glass-dark-b)) !important;
      border-color: var(--lf-glass-edge-soft) !important;
      box-shadow:
        0 20px 46px var(--lf-glass-shadow),
        0 0 0 1px rgba(228, 194, 115, .025),
        inset 0 1px 0 rgba(255, 255, 255, .11),
        inset 0 -1px 0 rgba(89, 211, 211, .045) !important;
      backdrop-filter: blur(20px) saturate(118%);
      -webkit-backdrop-filter: blur(20px) saturate(118%);
    }

    .workspace-card,
    .workspace-results-panel,
    .store-item,
    .guide-link-card,
    .item-row {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 28%),
        linear-gradient(145deg, rgba(19, 65, 88, .34), rgba(7, 34, 55, .24)) !important;
      border-color: rgba(118, 205, 217, .24) !important;
      box-shadow:
        0 13px 30px rgba(0, 7, 18, .19),
        inset 0 1px 0 rgba(255, 255, 255, .085) !important;
    }

    input,
    select,
    textarea,
    .chat-box,
    .profile-icon-choice,
    .social-signin button {
      background:
        linear-gradient(180deg, rgba(34, 81, 105, .34), rgba(12, 47, 72, .24)) !important;
      border-color: rgba(120, 202, 217, .27) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .075),
        inset 0 0 0 1px rgba(0, 8, 18, .10) !important;
      backdrop-filter: blur(14px) saturate(114%);
      -webkit-backdrop-filter: blur(14px) saturate(114%);
    }

    .action-btn,
    button.submit-btn,
    .nav-shortcut,
    .nav-more-toggle,
    .nav-term-edit,
    .sidebar-links .nav-btn.active {
      background:
        linear-gradient(180deg, rgba(56, 214, 196, .50), rgba(15, 140, 151, .38)) !important;
      border-color: rgba(164, 244, 233, .42) !important;
      box-shadow:
        0 9px 20px rgba(0, 7, 18, .22),
        0 0 0 1px rgba(228, 193, 113, .025),
        inset 0 1px 0 rgba(255, 255, 255, .24),
        inset 0 -1px 0 rgba(0, 24, 36, .14) !important;
      backdrop-filter: blur(16px) saturate(122%);
      -webkit-backdrop-filter: blur(16px) saturate(122%);
    }

    .action-btn:hover,
    button.submit-btn:hover,
    .nav-shortcut:hover,
    .nav-more-toggle:hover,
    .nav-term-edit:hover,
    .sidebar-links .nav-btn:hover {
      background:
        linear-gradient(180deg, rgba(69, 225, 207, .58), rgba(18, 154, 164, .44)) !important;
      border-color: rgba(184, 252, 241, .54) !important;
      box-shadow:
        0 11px 24px rgba(0, 7, 18, .25),
        0 0 18px rgba(62, 201, 190, .11),
        inset 0 1px 0 rgba(255, 255, 255, .28) !important;
    }

    .btn-red {
      background:
        linear-gradient(180deg, rgba(239, 101, 112, .58), rgba(182, 50, 75, .44)) !important;
      border-color: rgba(255, 205, 211, .35) !important;
    }

    .btn-green {
      background:
        linear-gradient(180deg, rgba(42, 195, 154, .58), rgba(14, 126, 121, .44)) !important;
      border-color: rgba(178, 247, 220, .35) !important;
    }

    .badge-tag,
    .professional-icon,
    .workspace-results-icon {
      background:
        linear-gradient(180deg, rgba(62, 205, 190, .28), rgba(16, 105, 130, .18)) !important;
      border-color: rgba(136, 228, 220, .30) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .10),
        0 4px 12px rgba(0, 7, 18, .10) !important;
      backdrop-filter: blur(12px) saturate(116%);
      -webkit-backdrop-filter: blur(12px) saturate(116%);
    }

    body.light-mode {
      --bg-dark: #89aeba;
      --panel-bg: rgba(158, 193, 203, .34);
      --input-bg: rgba(176, 207, 215, .34);
      --bubble-bg: rgba(154, 189, 199, .34);
    }

    body.portal-active.light-mode::before {
      opacity: .34 !important;
    }

    body.light-mode .card,
    body.light-mode .workspace-card,
    body.light-mode .workspace-results-panel,
    body.light-mode .store-item,
    body.light-mode .chat-shell,
    body.light-mode .guide-link-card,
    body.light-mode .modal-card,
    body.light-mode .item-row,
    body.light-mode .wellbeing-banner,
    body.light-mode #termsNotice,
    body.light-mode #runtimeErrorBanner,
    body.light-mode #schoolPinCard,
    body.light-mode #householdSwitcher,
    body.light-mode [data-roles][style*="background: var(--panel-bg)"] {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .06) 22%, rgba(255, 255, 255, 0) 36%),
        radial-gradient(circle at 10% 0%, rgba(35, 154, 157, .09), transparent 40%),
        linear-gradient(145deg, rgba(178, 207, 214, .42), rgba(137, 174, 186, .30)) !important;
      border-color: rgba(45, 112, 134, .31) !important;
      box-shadow:
        0 18px 40px rgba(27, 67, 83, .16),
        0 0 0 1px rgba(184, 145, 67, .018),
        inset 0 1px 0 rgba(255, 255, 255, .32),
        inset 0 -1px 0 rgba(17, 91, 116, .06) !important;
      backdrop-filter: blur(21px) saturate(110%);
      -webkit-backdrop-filter: blur(21px) saturate(110%);
    }

    body.light-mode .workspace-card,
    body.light-mode .workspace-results-panel,
    body.light-mode .store-item,
    body.light-mode .guide-link-card,
    body.light-mode .item-row {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 28%),
        linear-gradient(145deg, rgba(188, 214, 220, .40), rgba(150, 184, 194, .28)) !important;
      border-color: rgba(47, 111, 132, .29) !important;
    }

    body.light-mode input,
    body.light-mode select,
    body.light-mode textarea,
    body.light-mode .chat-box,
    body.light-mode .profile-icon-choice,
    body.light-mode .social-signin button {
      background:
        linear-gradient(180deg, rgba(197, 220, 225, .44), rgba(162, 195, 204, .32)) !important;
      border-color: rgba(47, 108, 129, .34) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .30),
        inset 0 0 0 1px rgba(18, 74, 94, .035) !important;
      backdrop-filter: blur(15px) saturate(108%);
      -webkit-backdrop-filter: blur(15px) saturate(108%);
    }

    body.light-mode .app-sidebar {
      background:
        linear-gradient(180deg, rgba(10, 48, 70, .54), rgba(5, 27, 45, .42)) !important;
      border-right-color: rgba(94, 184, 199, .28) !important;
      backdrop-filter: blur(24px) saturate(116%);
      -webkit-backdrop-filter: blur(24px) saturate(116%);
    }

    body.light-mode .app-sidebar [data-nav-group] {
      background:
        linear-gradient(180deg, rgba(28, 78, 105, .38), rgba(10, 47, 75, .28)) !important;
      border-color: rgba(106, 199, 211, .25) !important;
      backdrop-filter: blur(18px) saturate(114%);
      -webkit-backdrop-filter: blur(18px) saturate(114%);
    }

    body.light-mode #dashboardSection > nav {
      background:
        linear-gradient(180deg, rgba(21, 64, 86, .56), rgba(9, 42, 62, .44)) !important;
      border-bottom-color: rgba(91, 193, 198, .34) !important;
      backdrop-filter: blur(22px) saturate(118%);
      -webkit-backdrop-filter: blur(22px) saturate(118%);
    }

    body.light-mode footer {
      background:
        linear-gradient(180deg, rgba(115, 153, 164, .42), rgba(89, 128, 140, .32)) !important;
      border-top-color: rgba(40, 99, 119, .28) !important;
      backdrop-filter: blur(18px) saturate(108%);
      -webkit-backdrop-filter: blur(18px) saturate(108%);
    }


    /* Compact legal-brand layout: keep the registered name readable without growing the shell. */
    @media (min-width:960px) {
      #dashboardSection > nav {
        min-height:56px !important;
        padding:6px 18px !important;
        gap:8px !important;
      }
      .nav-brand { gap:8px !important; flex:0 1 auto; }
      .nav-brand img { width:40px !important; height:40px !important; }
      .nav-brand > div { gap:6px !important; overflow:visible !important; }
      .nav-brand .site-name {
        font-size:clamp(.98rem,1.25vw,1.34rem) !important;
        letter-spacing:.012em !important;
        overflow:visible !important;
        text-overflow:clip !important;
        white-space:nowrap !important;
      }
      .nav-brand .org-badge {
        margin-top:0 !important;
        padding:2px 5px !important;
        font-size:.55rem !important;
        line-height:1.05 !important;
        white-space:nowrap !important;
      }
      .nav-user-panel { gap:7px !important; font-size:.76rem !important; }
      .nav-user-panel .action-btn { min-height:34px !important; padding:6px 9px !important; }
      .nav-quickbar { gap:7px !important; }
      .nav-quickbar .action-btn, .nav-shortcut { min-height:34px !important; padding:6px 9px !important; }
      .app-sidebar { top:var(--portal-header-height,56px) !important; }
    }

    /* Login legal identity: use the available width and keep clear air above the portal card. */
    @media (min-width:641px) {
      #authSection { padding-top:238px !important; }
      .brand-header {
        top:-268px !important;
        width:min(620px,calc(100vw - 48px)) !important;
        padding-top:184px !important;
      }
      .brand-header h1 {
        margin:10px auto 8px !important;
        padding:0 8px;
        font-size:clamp(1.72rem,3vw,2.25rem) !important;
        line-height:1.08 !important;
        white-space:nowrap !important;
      }
      .brand-header p.slogan {
        margin:2px auto 0 !important;
        transform:none;
      }
    }

    /* Responsive shell repair: treat side-by-side/narrow desktop windows like tablets
       before the header gets cramped, while keeping the full desktop shell on wide screens. */
    @media (min-width:960px) and (max-width:1180px) {
      #dashboardSection > nav {
        display:grid !important;
        grid-template-columns:minmax(0,1fr) auto !important;
        align-items:center !important;
        min-height:0 !important;
        padding:8px 12px !important;
        gap:8px 10px !important;
      }
      .nav-brand {
        grid-column:1;
        grid-row:1;
        width:auto;
        max-width:100%;
        min-width:0;
      }
      .nav-brand > div { min-width:0; overflow:visible !important; }
      .nav-brand .site-name {
        font-size:clamp(.94rem,1.75vw,1.14rem) !important;
        white-space:nowrap !important;
      }
      .nav-brand .org-badge { font-size:.52rem !important; }
      .nav-user-panel {
        grid-column:1 / -1;
        grid-row:3;
        width:100%;
        margin:0 !important;
        justify-content:flex-start !important;
        flex-wrap:wrap;
      }
      .nav-quickbar {
        grid-column:1 / -1;
        grid-row:2;
        display:grid !important;
        grid-template-columns:minmax(220px,1fr) repeat(3,auto);
        width:100%;
        gap:7px !important;
      }
      .nav-quickbar .nav-live-pill { display:none; }
      .nav-term-panel { max-width:none; width:100%; }
      .nav-more-toggle {
        display:inline-flex !important;
        grid-column:2;
        grid-row:3;
        width:auto !important;
        min-height:36px !important;
        padding:7px 12px !important;
        justify-self:end;
        align-self:center;
      }
      .app-sidebar {
        width:min(86vw,300px) !important;
        transform:translateX(-105%);
        transition:transform .22s ease;
        z-index:35 !important;
      }
      #dashboardSection.sidebar-open .app-sidebar { transform:translateX(0); }
      #dashboardSection.sidebar-open::after {
        content:"";
        position:fixed;
        inset:0;
        z-index:34;
        background:rgba(2,8,23,.58);
      }
      #dashboardSection > .app-sidebar ~ .container,
      #dashboardSection.sidebar-collapsed > .app-sidebar ~ .container {
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        padding:clamp(14px,2.2vw,24px) !important;
      }
      #dashboardSection > .app-sidebar ~ footer,
      #dashboardSection.sidebar-collapsed > .app-sidebar ~ footer { margin-left:0 !important; }
    }

    @media (max-width:959px) {
      #dashboardSection > nav {
        display:grid !important;
        grid-template-columns:minmax(0,1fr) auto !important;
        align-items:center !important;
        min-height:0 !important;
        padding:8px 10px !important;
        gap:8px !important;
      }
      .nav-brand { grid-column:1; grid-row:1; min-width:0; max-width:100%; }
      .nav-brand img { width:38px; height:38px; }
      .nav-brand > div { min-width:0; overflow:visible !important; }
      .nav-brand .site-name {
        display:block;
        max-width:none !important;
        overflow:visible !important;
        text-overflow:clip !important;
        white-space:normal !important;
        font-size:clamp(.86rem,2.35vw,1.05rem) !important;
        line-height:1.05;
      }
      .nav-brand .org-badge { display:none !important; }
      .nav-user-panel {
        grid-column:1 / -1 !important;
        grid-row:3 !important;
        width:100% !important;
        margin:0 !important;
        justify-content:flex-start !important;
        flex-wrap:wrap;
        gap:6px !important;
      }
      .nav-user-panel .user-switch-control { min-width:0; max-width:100%; }
      .nav-user-panel #displayRole {
        max-width:min(52vw,260px) !important;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
      .nav-quickbar {
        grid-column:1 / -1 !important;
        grid-row:2 !important;
        width:100%;
        display:grid !important;
        grid-template-columns:minmax(0,1fr) repeat(3,minmax(0,auto)) !important;
        gap:6px !important;
      }
      .nav-term-panel { width:100%; max-width:none !important; }
      .nav-quickbar .nav-shortcut { width:auto !important; min-width:0; }
      .nav-more-toggle {
        grid-column:2 !important;
        grid-row:3 !important;
        width:auto !important;
        min-height:38px !important;
        justify-self:end;
        align-self:center;
      }
      .container { padding:clamp(10px,2.5vw,18px) !important; }
    }

    @media (max-width:640px) {
      #dashboardSection > nav {
        grid-template-columns:minmax(0,1fr) auto !important;
        padding:8px !important;
      }
      .nav-brand img { width:34px; height:34px; }
      .nav-brand .site-name {
        font-size:clamp(.78rem,4vw,.98rem) !important;
        line-height:1.08;
      }
      .nav-quickbar {
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
      }
      .nav-term-panel {
        grid-column:1 / -1;
        grid-row:1;
      }
      .nav-quickbar .nav-shortcut {
        width:100% !important;
        min-height:40px !important;
        padding:7px 5px !important;
        font-size:.68rem !important;
      }
      .nav-user-panel {
        grid-column:1 !important;
        grid-row:3 !important;
        min-width:0;
      }
      .nav-user-panel .user-switch-control { max-width:100%; }
      .nav-user-panel #displayRole { max-width:42vw !important; }
      .nav-user-panel .action-btn {
        min-width:36px !important;
        min-height:36px !important;
        padding:6px !important;
      }
      .nav-more-toggle {
        grid-column:2 !important;
        grid-row:3 !important;
        width:auto !important;
        min-width:72px;
      }
      .portal-welcome-banner {
        min-height:190px !important;
        padding:14px !important;
        background-size:cover,auto 92% !important;
        background-position:center,right bottom !important;
      }
      .portal-welcome-copy {
        max-width:72% !important;
        padding-right:4px;
      }
      .portal-welcome-banner h1 { font-size:clamp(1.05rem,5.2vw,1.3rem); }
      .portal-welcome-banner p { font-size:.82rem; }
      .workspace-grid,
      .workspace-results-grid,
      .store-grid { grid-template-columns:minmax(0,1fr) !important; }
      .footer-container {
        align-items:flex-start !important;
        text-align:left;
      }
      .compliance-text {
        max-width:100% !important;
        text-align:left !important;
      }
    }

    @media (max-width:420px) {
      .nav-brand .site-name { font-size:.76rem !important; }
      .nav-user-panel #displayRole { max-width:36vw !important; }
      .nav-user-panel #serverStatusText { display:none; }
      .portal-welcome-copy { max-width:100% !important; }
      .portal-welcome-banner {
        background-image:linear-gradient(90deg,rgba(4,18,34,.96),rgba(7,29,47,.86)),url('/assets/4k/admin-mascot-dashboard-4k.jpg') !important;
        background-position:center,right bottom !important;
      }
    }

    /* Mobile legal-name repair: reserve the first header row for the full brand name. */
    @media (max-width:640px) {
      #dashboardSection > nav {
        grid-template-columns:minmax(0,1fr) auto !important;
      }
      #dashboardSection .nav-brand {
        grid-column:1 / -1 !important;
        grid-row:1 !important;
        width:100% !important;
        max-width:100% !important;
        justify-content:flex-start;
      }
      #dashboardSection .nav-brand > div {
        flex:1 1 auto;
        min-width:0;
        overflow:visible !important;
      }
      #dashboardSection .nav-brand .site-name {
        display:block !important;
        width:100% !important;
        max-width:none !important;
        overflow:visible !important;
        text-overflow:clip !important;
        white-space:nowrap !important;
        font-size:clamp(.82rem,4.15vw,1.02rem) !important;
        line-height:1.08 !important;
      }
      #dashboardSection .nav-quickbar {
        grid-column:1 / -1 !important;
        grid-row:2 !important;
      }
      #dashboardSection .nav-user-panel {
        grid-column:1 !important;
        grid-row:3 !important;
        width:100% !important;
      }
      #dashboardSection .nav-more-toggle {
        grid-column:2 !important;
        grid-row:3 !important;
        width:auto !important;
      }
    }
    @media (max-width:380px) {
      #dashboardSection .nav-brand .site-name {
        font-size:clamp(.72rem,3.9vw,.84rem) !important;
        letter-spacing:0 !important;
      }
      #dashboardSection .nav-brand img {
        width:32px !important;
        height:32px !important;
      }
    }

    /* Login brand repair: keep the registered name fully inside every phone viewport. */
    @media (max-width:640px) {
      #authSection .brand-header {
        box-sizing:border-box !important;
        width:calc(100vw - 24px) !important;
        max-width:100% !important;
        left:50% !important;
        transform:translateX(-50%) !important;
        overflow:visible !important;
      }
      #authSection .brand-header h1 {
        display:block !important;
        box-sizing:border-box !important;
        width:100% !important;
        max-width:100% !important;
        margin:4px auto 6px !important;
        padding:0 4px !important;
        font-size:clamp(1.22rem,6.35vw,1.72rem) !important;
        line-height:1.08 !important;
        letter-spacing:.012em !important;
        white-space:nowrap !important;
        overflow:visible !important;
        text-align:center !important;
      }
    }
    @media (max-width:360px) {
      #authSection .brand-header h1 {
        font-size:clamp(1.08rem,6vw,1.35rem) !important;
        letter-spacing:0 !important;
      }
    }

    /* Desktop sidebar scroll lock — behavior only, no visual/layout redesign. */
    @media (min-width:960px) {
      #dashboardSection > nav {
        position:sticky !important;
        top:0 !important;
      }
      .app-sidebar {
        position:fixed !important;
        top:var(--portal-header-height, 68px) !important;
        bottom:0 !important;
        height:auto !important;
      }
    }


    /* Attached sidebar scroll polish — preserve pinning, remove detached white rail. */
    @media (min-width:960px) {
      .app-sidebar {
        overflow-y:auto !important;
        overflow-x:hidden !important;
        overscroll-behavior-y:contain;
        scrollbar-width:thin;
        scrollbar-color:rgba(96, 218, 211, .42) transparent;
        scrollbar-gutter:auto;
      }
      .app-sidebar::-webkit-scrollbar {
        width:7px;
      }
      .app-sidebar::-webkit-scrollbar-track {
        background:transparent;
      }
      .app-sidebar::-webkit-scrollbar-thumb {
        background:linear-gradient(180deg, rgba(105, 232, 220, .48), rgba(29, 137, 151, .44));
        border:2px solid transparent;
        border-radius:999px;
        background-clip:padding-box;
      }
      .app-sidebar::-webkit-scrollbar-thumb:hover {
        background:linear-gradient(180deg, rgba(130, 245, 233, .62), rgba(34, 155, 168, .56));
        border:2px solid transparent;
        background-clip:padding-box;
      }
    }


    /* Sidebar follows the actually visible compact header edge while page scrolls. */
    @media (min-width:960px) {
      .app-sidebar {
        top:var(--portal-sidebar-top, var(--portal-header-height, 56px)) !important;
        bottom:0 !important;
        height:auto !important;
      }
    }


    /* Login sound control fit guard — no card geometry changes. */
    .login-card-actions {
      grid-template-columns:minmax(0,1fr) minmax(126px,auto) !important;
    }
    .login-audio-compact {
      width:100% !important;
      min-width:126px !important;
      max-width:148px;
      overflow:hidden;
      white-space:nowrap;
    }
    .login-audio-compact span {
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    @media (max-width:540px) and (min-width:421px) {
      .login-card-actions {
        grid-template-columns:minmax(0,1fr) minmax(118px,126px) !important;
      }
      .login-audio-compact {
        min-width:118px !important;
        max-width:126px;
        padding-inline:8px !important;
        font-size:.72rem;
      }
    }
    @media (max-width:420px) {
      .login-card-actions {
        grid-template-columns:minmax(0,1fr) 40px !important;
      }
      .login-audio-compact {
        width:40px !important;
        min-width:40px !important;
        max-width:40px;
        padding:0 !important;
      }
      .login-audio-compact span {
        position:absolute !important;
        width:1px !important;
        height:1px !important;
        padding:0 !important;
        margin:-1px !important;
        overflow:hidden !important;
        clip:rect(0,0,0,0) !important;
        white-space:nowrap !important;
        border:0 !important;
      }
    }


    /* Login information runner: fixed to the login viewport only. */
    .login-info-runner {
      position:fixed;
      z-index:12;
      left:0;
      right:0;
      bottom:0;
      min-height:calc(40px + env(safe-area-inset-bottom));
      overflow:hidden;
      display:flex;
      align-items:center;
      padding:8px 0 max(8px, env(safe-area-inset-bottom));
      border-top:1px solid rgba(94,234,212,.24);
      background:linear-gradient(155deg,#08287f,#061d5b);
      box-shadow:0 -10px 26px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
      backdrop-filter:blur(18px) saturate(118%);
      -webkit-backdrop-filter:blur(18px) saturate(118%);
      color:#d9f7f4;
      pointer-events:none;
    }
    .login-info-runner::before,
    .login-info-runner::after {
      content:"";
      position:absolute;
      top:0;
      bottom:0;
      width:min(9vw,90px);
      z-index:2;
      pointer-events:none;
    }
    .login-info-runner::before {
      left:0;
      background:linear-gradient(90deg, rgba(4,16,30,.96), rgba(4,16,30,0));
    }
    .login-info-runner::after {
      right:0;
      background:linear-gradient(270deg, rgba(4,16,30,.96), rgba(4,16,30,0));
    }
    .login-info-runner-track {
      display:flex;
      align-items:center;
      width:max-content;
      min-width:max-content;
      will-change:transform;
      animation:loginInfoRunner 30s linear infinite;
      transform:translate3d(0,0,0);
    }
    .login-info-runner-group {
      display:flex;
      align-items:center;
      gap:clamp(14px,2vw,34px);
      flex:0 0 auto;
      padding-right:clamp(14px,2vw,34px);
      white-space:nowrap;
      font-size:clamp(.72rem,.25vw + .66rem,.9rem);
      font-weight:700;
      letter-spacing:.01em;
      line-height:1.2;
    }
    .login-info-runner-group strong {
      color:#7cf1df;
      font-weight:800;
    }
    .login-info-runner-dot {
      color:#3ad7c4;
      opacity:.9;
    }
    @keyframes loginInfoRunner {
      from { transform:translate3d(0,0,0); }
      to { transform:translate3d(-50%,0,0); }
    }
    @media (max-width:640px) {
      #authSection {
        padding-bottom:max(76px, calc(58px + env(safe-area-inset-bottom))) !important;
      }
      .login-info-runner {
        min-height:calc(42px + env(safe-area-inset-bottom));
        padding-top:9px;
        padding-bottom:max(9px, env(safe-area-inset-bottom));
      }
      .login-info-runner-track { animation-duration:24s; }
      .login-info-runner-group {
        gap:16px;
        padding-right:16px;
        font-size:.72rem;
      }
      .login-info-runner::before,
      .login-info-runner::after { width:26px; }
    }
    @media (min-width:1600px) {
      .login-info-runner-track { animation-duration:34s; }
      .login-info-runner-group { font-size:.88rem; }
    }
    @media (max-width:900px) and (max-height:600px) and (orientation:landscape) {
      #authSection {
        padding-bottom:max(58px, calc(48px + env(safe-area-inset-bottom))) !important;
      }
      .login-info-runner {
        min-height:calc(36px + env(safe-area-inset-bottom));
        padding-top:6px;
        padding-bottom:max(6px, env(safe-area-inset-bottom));
      }
      .login-info-runner-group { font-size:.68rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      .login-info-runner-track {
        width:100%;
        min-width:0;
        animation:none;
        transform:none;
        justify-content:center;
      }
      .login-info-runner-group:first-child {
        display:block;
        width:100%;
        min-width:0;
        padding:0 24px;
        text-align:center;
        white-space:normal;
        line-height:1.35;
      }
      .login-info-runner-group[aria-hidden="true"] { display:none; }
      .login-info-runner-dot { padding:0 5px; }
    }
    body.light-mode .login-info-runner {
      background:linear-gradient(155deg,#08287f,#061d5b);
      border-top-color:rgba(88,214,205,.30);
      color:#f1fbfc;
    }


    /* Clear login sound state indicator. */
    .login-audio-compact .ui-icon {
      width:1.28rem !important;
      height:1.28rem !important;
      flex:0 0 auto;
      stroke-width:2.2;
      color:#bffcf3;
      filter:drop-shadow(0 0 5px rgba(94,234,212,.24));
    }
    .login-audio-compact.is-muted {
      border-color:rgba(250,204,106,.58) !important;
      background:linear-gradient(180deg, rgba(142,92,28,.62), rgba(89,53,20,.70)) !important;
    }
    .login-audio-compact.is-muted .ui-icon {
      color:#ffd772;
      filter:drop-shadow(0 0 5px rgba(255,199,77,.24));
    }
    .login-audio-compact.is-muted span {
      color:#fff3c4;
    }
    @media (max-width:420px) {
      .login-audio-compact .ui-icon {
        width:1.4rem !important;
        height:1.4rem !important;
      }
    }


    /* Login autofill must keep the portal glass theme instead of browser white. */
    #loginForm #loginUsername:-webkit-autofill,
    #loginForm #loginUsername:-webkit-autofill:hover,
    #loginForm #loginUsername:-webkit-autofill:focus,
    #loginForm #loginUsername:-webkit-autofill:active,
    #loginForm #loginPin:-webkit-autofill,
    #loginForm #loginPin:-webkit-autofill:hover,
    #loginForm #loginPin:-webkit-autofill:focus,
    #loginForm #loginPin:-webkit-autofill:active {
      -webkit-text-fill-color:#08287f !important;
      caret-color:#08287f !important;
      -webkit-box-shadow:
        0 0 0 1000px #b8e5ef inset,
        inset 0 1px 0 rgba(255,255,255,.055),
        inset 0 0 0 1px rgba(0,8,18,.16) !important;
      box-shadow:
        0 0 0 1000px #b8e5ef inset,
        inset 0 1px 0 rgba(255,255,255,.055),
        inset 0 0 0 1px rgba(0,8,18,.16) !important;
      border-color:rgba(111,196,215,.28) !important;
      background-color:#b8e5ef !important;
      transition:background-color 99999s ease-out 0s;
    }
    #loginForm #loginUsername:-webkit-autofill:focus,
    #loginForm #loginPin:-webkit-autofill:focus {
      border-color:rgba(97,195,226,.95) !important;
      -webkit-box-shadow:
        0 0 0 1000px #b8e5ef inset,
        0 0 0 3px rgba(97,195,226,.24),
        0 0 20px rgba(97,195,226,.10) !important;
      box-shadow:
        0 0 0 1000px #b8e5ef inset,
        0 0 0 3px rgba(97,195,226,.24),
        0 0 20px rgba(97,195,226,.10) !important;
    }
    #loginForm #loginUsername:autofill,
    #loginForm #loginPin:autofill {
      color:#08287f !important;
      caret-color:#08287f !important;
      background:#b8e5ef !important;
      border-color:rgba(111,196,215,.28) !important;
    }

    body.light-mode #loginForm #loginUsername:-webkit-autofill,
    body.light-mode #loginForm #loginUsername:-webkit-autofill:hover,
    body.light-mode #loginForm #loginUsername:-webkit-autofill:focus,
    body.light-mode #loginForm #loginUsername:-webkit-autofill:active,
    body.light-mode #loginForm #loginPin:-webkit-autofill,
    body.light-mode #loginForm #loginPin:-webkit-autofill:hover,
    body.light-mode #loginForm #loginPin:-webkit-autofill:focus,
    body.light-mode #loginForm #loginPin:-webkit-autofill:active {
      -webkit-text-fill-color:#08287f !important;
      caret-color:#08287f !important;
      -webkit-box-shadow:
        0 0 0 1000px #b8e5ef inset,
        inset 0 1px 0 rgba(255,255,255,.24) !important;
      box-shadow:
        0 0 0 1000px #b8e5ef inset,
        inset 0 1px 0 rgba(255,255,255,.24) !important;
      background-color:#b8e5ef !important;
      border-color:rgba(42,103,125,.36) !important;
    }
    body.light-mode #loginForm #loginUsername:autofill,
    body.light-mode #loginForm #loginPin:autofill {
      color:#08287f !important;
      caret-color:#08287f !important;
      background:#b8e5ef !important;
      border-color:rgba(42,103,125,.36) !important;
    }


    /* Use the full login signup row instead of a floating small button. */
    .login-new-account {
      grid-template-columns:max-content minmax(0,1fr) !important;
      align-items:center !important;
      gap:12px !important;
    }
    .login-new-account .action-btn {
      width:100% !important;
      max-width:none !important;
      margin:0 !important;
      justify-content:center !important;
    }
    @media (max-width:420px) {
      .login-new-account {
        grid-template-columns:minmax(0,1fr) !important;
        align-items:stretch !important;
      }
      .login-new-account .action-btn {
        width:100% !important;
      }
    }


    /* Light mode accent palette: Bioluminescent Teal #00B4D8. */
    body.light-mode {
      --primary-color:#00B4D8;
      --primary-hover:#0098B8;
      --lf-bioluminescent-teal:#00B4D8;
      --lf-bioluminescent-teal-rgb:0,180,216;
    }

    body.light-mode .action-btn,
    body.light-mode button.submit-btn,
    body.light-mode .nav-shortcut,
    body.light-mode .nav-term-edit,
    body.light-mode .sidebar-links .nav-btn.active {
      background:
        linear-gradient(180deg, rgba(0,180,216,.94), rgba(0,145,180,.86)) !important;
      border-color:rgba(0,180,216,.72) !important;
      color:#ffffff !important;
      box-shadow:
        0 9px 20px rgba(0,126,158,.22),
        0 0 18px rgba(0,180,216,.13),
        inset 0 1px 0 rgba(255,255,255,.28) !important;
    }

    body.light-mode .action-btn:hover,
    body.light-mode button.submit-btn:hover,
    body.light-mode .nav-shortcut:hover,
    body.light-mode .nav-term-edit:hover,
    body.light-mode .sidebar-links .nav-btn:hover {
      background:
        linear-gradient(180deg, #16C4E4, #00A4C8) !important;
      border-color:rgba(0,180,216,.90) !important;
      box-shadow:
        0 11px 24px rgba(0,126,158,.25),
        0 0 22px rgba(0,180,216,.18),
        inset 0 1px 0 rgba(255,255,255,.30) !important;
    }

    body.light-mode .guide-open,
    body.light-mode .portal-welcome-kicker,
    body.light-mode .sidebar-group-toggle,
    body.light-mode .app-sidebar [data-nav-group] .sidebar-heading,
    body.light-mode .sidebar-links .nav-btn .ui-icon,
    body.light-mode .card-header-bar .ui-icon,
    body.light-mode .workspace-results-heading .ui-icon {
      color:#00B4D8 !important;
    }

    body.light-mode .professional-icon,
    body.light-mode .workspace-results-icon,
    body.light-mode .badge-tag,
    body.light-mode .profile-icon-choice.is-selected {
      background:
        linear-gradient(180deg, rgba(0,180,216,.22), rgba(0,180,216,.10)) !important;
      border-color:rgba(0,180,216,.42) !important;
      color:#007E9A !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 0 14px rgba(0,180,216,.10) !important;
    }

    body.light-mode .card,
    body.light-mode .workspace-card,
    body.light-mode .workspace-results-panel,
    body.light-mode .store-item,
    body.light-mode .chat-shell,
    body.light-mode .guide-link-card,
    body.light-mode .modal-card,
    body.light-mode .item-row,
    body.light-mode .wellbeing-banner,
    body.light-mode #termsNotice,
    body.light-mode #runtimeErrorBanner,
    body.light-mode #schoolPinCard,
    body.light-mode #householdSwitcher,
    body.light-mode [data-roles][style*="background: var(--panel-bg)"] {
      border-color:rgba(0,180,216,.26) !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.05) 22%, rgba(255,255,255,0) 36%),
        radial-gradient(circle at 10% 0%, rgba(0,180,216,.10), transparent 40%),
        linear-gradient(145deg, rgba(174,205,214,.44), rgba(134,173,185,.31)) !important;
    }

    body.light-mode input,
    body.light-mode select,
    body.light-mode textarea,
    body.light-mode .chat-box,
    body.light-mode .profile-icon-choice,
    body.light-mode .social-signin button {
      border-color:rgba(0,180,216,.30) !important;
    }

    body.light-mode input:focus,
    body.light-mode select:focus,
    body.light-mode textarea:focus {
      border-color:#00B4D8 !important;
      box-shadow:
        0 0 0 3px rgba(0,180,216,.15),
        inset 0 1px 0 rgba(255,255,255,.28) !important;
      outline:none !important;
    }

    body.light-mode #dashboardSection > nav {
      border-bottom-color:rgba(0,180,216,.34) !important;
      box-shadow:
        0 12px 28px rgba(22,64,80,.20),
        0 0 18px rgba(0,180,216,.06),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
    }

    body.light-mode .app-sidebar {
      border-right-color:rgba(0,180,216,.28) !important;
    }

    body.light-mode .app-sidebar [data-nav-group] {
      border-color:rgba(0,180,216,.24) !important;
    }


    /* Light mode surface palette: Deep Steel Teal #1B4965 with #00B4D8 accents. */
    body.light-mode {
      --bg-dark:#163E56;
      --panel-bg:#1B4965;
      --input-bg:#214F6B;
      --bubble-bg:#214F6B;
      --text-dark:#F7FBFF;
      --text-muted:#C5D8E4;
      --border-color:rgba(0,180,216,.32);
      --input-text:#F7FBFF;
    }

    body.portal-active.light-mode {
      background-color:#163E56 !important;
    }

    body.light-mode .card,
    body.light-mode .workspace-card,
    body.light-mode .workspace-results-panel,
    body.light-mode .store-item,
    body.light-mode .chat-shell,
    body.light-mode .guide-link-card,
    body.light-mode .modal-card,
    body.light-mode .item-row,
    body.light-mode .wellbeing-banner,
    body.light-mode #termsNotice,
    body.light-mode #runtimeErrorBanner,
    body.light-mode #schoolPinCard,
    body.light-mode #householdSwitcher,
    body.light-mode [data-roles][style*="background: var(--panel-bg)"] {
      background:
        linear-gradient(180deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.018) 22%, rgba(255,255,255,0) 40%),
        radial-gradient(circle at 12% 0%, rgba(0,180,216,.14), transparent 40%),
        linear-gradient(145deg, rgba(27,73,101,.93), rgba(18,56,80,.88)) !important;
      border-color:rgba(0,180,216,.34) !important;
      box-shadow:
        0 18px 40px rgba(3,18,30,.24),
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -1px 0 rgba(0,180,216,.055) !important;
      color:#F7FBFF !important;
    }

    body.light-mode .workspace-card,
    body.light-mode .workspace-results-panel,
    body.light-mode .store-item,
    body.light-mode .guide-link-card,
    body.light-mode .item-row {
      background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0) 30%),
        linear-gradient(145deg, rgba(31,80,108,.90), rgba(22,62,86,.86)) !important;
    }

    body.light-mode .card-header-bar h2,
    body.light-mode .workspace-results-heading h3,
    body.light-mode .guide-link-card h3,
    body.light-mode .workspace-card h3,
    body.light-mode .card h2,
    body.light-mode .card h3 {
      color:#F7FBFF !important;
      text-shadow:0 1px 0 rgba(0,0,0,.16);
    }

    body.light-mode .workspace-card p,
    body.light-mode .guide-link-card p,
    body.light-mode .workspace-results-heading p,
    body.light-mode .meta,
    body.light-mode .field-help,
    body.light-mode .login-device-note,
    body.light-mode .card > p,
    body.light-mode label,
    body.light-mode .form-label {
      color:#C5D8E4 !important;
    }

    body.light-mode input,
    body.light-mode select,
    body.light-mode textarea,
    body.light-mode .chat-box,
    body.light-mode .profile-icon-choice,
    body.light-mode .social-signin button {
      color:#F7FBFF !important;
      background:
        linear-gradient(180deg, rgba(42,91,119,.94), rgba(30,71,97,.94)) !important;
      border-color:rgba(0,180,216,.34) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 0 0 1px rgba(0,0,0,.08) !important;
    }

    body.light-mode input::placeholder,
    body.light-mode textarea::placeholder {
      color:#AFC6D4 !important;
    }

    body.light-mode .wellbeing-banner p,
    body.light-mode #termsNotice p {
      color:#E7F3F8 !important;
    }

    body.light-mode footer {
      background:
        linear-gradient(180deg, rgba(27,73,101,.92), rgba(19,56,79,.92)) !important;
      border-top-color:rgba(0,180,216,.30) !important;
      color:#EAF7FB !important;
    }


    /* Dark mode palette: neutral night #0D0D1D. Light mode remains untouched. */
    body:not(.light-mode) {
      --primary-color:#0D0D1D;
      --primary-hover:#17172A;
      --dark-navy:#0D0D1D;
      --bg-dark:#070710;
      --panel-bg:#0D0D1D;
      --input-bg:#131322;
      --bubble-bg:#131322;
      --border-color:rgba(108,132,154,.30);
      --text-dark:#F7F9FC;
      --text-muted:#BCC7D1;
      --input-text:#F7F9FC;
      --lf-glass-dark-a:rgba(13,13,29,.88);
      --lf-glass-dark-b:rgba(7,7,16,.78);
    }

    body:not(.light-mode) #dashboardSection > nav {
      background:
        linear-gradient(180deg, rgba(20,20,38,.97), rgba(13,13,29,.97)) !important;
      border-bottom-color:rgba(92,126,153,.34) !important;
      box-shadow:
        0 12px 28px rgba(0,0,10,.34),
        inset 0 1px 0 rgba(255,255,255,.045) !important;
    }

    body:not(.light-mode) .app-sidebar {
      background:
        linear-gradient(180deg, rgba(17,17,33,.96), rgba(8,8,18,.97)) !important;
      border-right-color:rgba(92,126,153,.28) !important;
      box-shadow:
        10px 0 30px rgba(0,0,10,.30),
        inset -1px 0 0 rgba(255,255,255,.035) !important;
    }

    body:not(.light-mode) .app-sidebar [data-nav-group] {
      background:
        linear-gradient(180deg, rgba(22,22,40,.90), rgba(13,13,29,.94)) !important;
      border-color:rgba(92,126,153,.25) !important;
    }

    body:not(.light-mode) .card,
    body:not(.light-mode) .workspace-card,
    body:not(.light-mode) .workspace-results-panel,
    body:not(.light-mode) .store-item,
    body:not(.light-mode) .chat-shell,
    body:not(.light-mode) .guide-link-card,
    body:not(.light-mode) .modal-card,
    body:not(.light-mode) .item-row,
    body:not(.light-mode) .wellbeing-banner,
    body:not(.light-mode) #termsNotice,
    body:not(.light-mode) #runtimeErrorBanner,
    body:not(.light-mode) #schoolPinCard,
    body:not(.light-mode) #householdSwitcher,
    body:not(.light-mode) [data-roles][style*="background: var(--panel-bg)"] {
      background:
        linear-gradient(180deg, rgba(255,255,255,.042), rgba(255,255,255,0) 30%),
        radial-gradient(circle at 12% 0%, rgba(48,74,98,.12), transparent 42%),
        linear-gradient(145deg, rgba(18,18,34,.94), rgba(13,13,29,.90)) !important;
      border-color:rgba(92,126,153,.28) !important;
      box-shadow:
        0 18px 40px rgba(0,0,12,.30),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
    }

    /* The home hero was still carrying the old teal/navy strip. */
    body:not(.light-mode) .portal-welcome-banner {
      background-image:
        linear-gradient(90deg, rgba(13,13,29,.985) 0%, rgba(16,16,31,.965) 44%, rgba(12,17,25,.52) 71%, rgba(10,14,21,.20) 100%),
        url('/assets/4k/admin-mascot-dashboard-4k.jpg') !important;
      border-color:rgba(92,126,153,.32) !important;
      box-shadow:
        0 16px 34px rgba(0,0,12,.30),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
    }

    body:not(.light-mode) .portal-welcome-banner::before {
      background:
        radial-gradient(ellipse at 78% 60%, rgba(255,190,92,.18), rgba(63,91,111,.11) 28%, transparent 62%) !important;
    }

    body:not(.light-mode) input,
    body:not(.light-mode) select,
    body:not(.light-mode) textarea,
    body:not(.light-mode) .chat-box,
    body:not(.light-mode) .profile-icon-choice,
    body:not(.light-mode) .social-signin button {
      color:#F7F9FC !important;
      background:
        linear-gradient(180deg, rgba(24,24,42,.96), rgba(15,15,30,.96)) !important;
      border-color:rgba(92,126,153,.30) !important;
    }

    body:not(.light-mode) .action-btn,
    body:not(.light-mode) button.submit-btn,
    body:not(.light-mode) .nav-shortcut,
    body:not(.light-mode) .nav-term-edit,
    body:not(.light-mode) .sidebar-links .nav-btn.active {
      background:
        linear-gradient(180deg, #1A1A2D, #0D0D1D) !important;
      border-color:rgba(109,145,173,.48) !important;
      color:#FFFFFF !important;
      box-shadow:
        0 8px 18px rgba(0,0,16,.30),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
    }

    body:not(.light-mode) .action-btn:hover,
    body:not(.light-mode) button.submit-btn:hover,
    body:not(.light-mode) .nav-shortcut:hover,
    body:not(.light-mode) .nav-term-edit:hover,
    body:not(.light-mode) .sidebar-links .nav-btn:hover {
      background:
        linear-gradient(180deg, #24243A, #151526) !important;
      border-color:rgba(128,164,190,.62) !important;
    }

    body:not(.light-mode) .guide-open,
    body:not(.light-mode) .portal-welcome-kicker,
    body:not(.light-mode) .sidebar-group-toggle,
    body:not(.light-mode) .app-sidebar [data-nav-group] .sidebar-heading,
    body:not(.light-mode) .sidebar-links .nav-btn .ui-icon,
    body:not(.light-mode) .card-header-bar .ui-icon,
    body:not(.light-mode) .workspace-results-heading .ui-icon {
      color:#91B8D1 !important;
    }

    body:not(.light-mode) input:focus,
    body:not(.light-mode) select:focus,
    body:not(.light-mode) textarea:focus {
      border-color:#6F9AB8 !important;
      box-shadow:0 0 0 3px rgba(80,121,151,.18) !important;
      outline:none !important;
    }


  /* Workplace feature surfaces integrated onto production 8.2.9. */
  .staff-work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px}.staff-work-card{padding:18px;border:1px solid var(--border-color);border-radius:12px;background:var(--panel-bg)}.staff-work-card h3{margin-top:0}.staff-work-card form{display:grid;gap:8px;margin-bottom:16px}.staff-work-card form input,.staff-work-card form select,.staff-work-card form textarea{width:100%}.staff-work-list{display:grid;gap:8px}.staff-work-list article{display:grid;gap:7px;padding:11px;border:1px solid var(--border-color);border-radius:9px}.staff-work-list article span{color:var(--text-muted);font-size:.8rem}.staff-work-list article div{display:flex;gap:7px;flex-wrap:wrap}
.staff-kpi-dashboard{grid-column:1/-1}.staff-kpi-scoreboard{display:grid;gap:9px;margin:14px 0}.staff-kpi-scoreboard article{display:grid;grid-template-columns:minmax(150px,1fr) minmax(180px,2fr);gap:8px 16px;align-items:center}.staff-kpi-scoreboard article span{font-size:.82rem;color:var(--text-muted)}.staff-kpi-bar{grid-column:1/-1;height:8px;border-radius:999px;background:rgba(148,163,184,.2);overflow:hidden}.staff-kpi-bar i{display:block;height:100%;background:currentColor;border-radius:inherit}.staff-kpi-graph{display:flex;align-items:end;gap:10px;min-height:210px;padding:16px 8px 4px;overflow-x:auto}.staff-kpi-graph>div{display:grid;grid-template-rows:auto 150px auto;gap:5px;min-width:72px;text-align:center;font-size:.72rem}.staff-kpi-graph b{display:flex;align-items:end;justify-content:center;height:150px;border-bottom:1px solid var(--border-color)}.staff-kpi-graph b i{display:block;width:34px;min-height:3px;border-radius:6px 6px 0 0;background:currentColor}.staff-kpi-graph em{font-style:normal;font-weight:800}
.approval-item{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--border-color)}.approval-item>div:first-child{min-width:0}.approval-item strong{margin-left:8px}.approval-actions{display:flex;gap:8px;flex-wrap:wrap}@media(max-width:640px){.approval-item{align-items:stretch;flex-direction:column}.approval-actions .action-btn{flex:1}}
.staff-notice{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--border-color)}.staff-notice h3{margin:8px 0 5px}.staff-notice p{white-space:pre-wrap}.staff-notice .badge-tag+.badge-tag{margin-left:6px}@media(max-width:640px){.staff-notice{align-items:stretch;flex-direction:column}.staff-notice>.action-btn{width:100%}}
.meeting-record{padding:16px 0;border-bottom:1px solid var(--border-color)}.meeting-record form{display:grid;gap:10px;margin-top:12px}.meeting-action-row{display:grid;grid-template-columns:2fr 1.3fr 1fr .8fr auto;gap:8px;align-items:center;margin:8px 0}.meeting-minutes{margin-top:10px;padding:12px;border:1px solid var(--border-color);border-radius:12px}.meeting-minutes p{white-space:pre-wrap}@media(max-width:760px){.meeting-action-row{grid-template-columns:1fr}.meeting-action-row button{width:100%}}
.maintenance-order{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--border-color)}.maintenance-order strong{margin-left:7px}.maintenance-actions{display:grid;gap:8px;min-width:190px}@media(max-width:700px){.maintenance-order{flex-direction:column}.maintenance-actions{min-width:0}}
.resource-booking{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--border-color)}.resource-booking strong{margin-left:8px}@media(max-width:640px){.resource-booking{align-items:stretch;flex-direction:column}}
.purchase-request{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--border-color)}.purchase-request strong{margin-left:8px}.purchase-request>select{min-width:190px}@media(max-width:650px){.purchase-request{align-items:stretch;flex-direction:column}}
    /* Login feature banner: match the same material/color used by the login card. */
    #authSection .login-feature-banner,
    #authSection .auth-feature-banner,
    #authSection .portal-feature-banner,
    #authSection [class*="feature-strip"],
    #authSection [class*="feature-banner"] {
      background-color: var(--panel-bg) !important;
      background-image: none !important;
      border-color: var(--border-color) !important;
    }

    #authSection .login-card-actions{display:grid;grid-template-columns:minmax(150px,1fr) 42px 128px;align-items:center;gap:8px;width:100%;margin-left:0}
    #authSection .login-language-pill{width:100%;height:40px}
    #authSection #loginLanguagePreference{height:38px;min-height:38px;font-size:.78rem}
    #authSection .login-audio-compact{width:42px!important;min-width:42px!important;height:40px;min-height:40px!important;border-radius:9px}
    #authSection .login-background-compact{width:128px!important;min-width:128px!important;height:40px;min-height:40px!important;margin:0!important;padding:0 12px!important;white-space:nowrap;border:1px solid rgba(94,234,212,.34);background:rgba(13,148,136,.16);color:#dffcf8;font-size:.72rem}
    #authSection .login-background-compact:hover{background:rgba(13,148,136,.28);border-color:rgba(94,234,212,.58)}
    .nav-user-panel{position:relative}
    .lf-notification-stack{position:relative;z-index:60;display:block;flex:0 0 auto;width:auto;max-width:100%;pointer-events:auto;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
    .lf-notification-controls{display:flex;align-items:center;gap:6px}.lf-notification-controls .action-btn{min-height:34px;margin:0;padding:6px 9px;font-size:.72rem;white-space:nowrap}.lf-notification-controls [data-notification-collapse]{justify-content:center}.lf-notification-controls .is-active{border-color:#fbbf24;background:rgba(251,191,36,.18);color:#fff4c2}.lf-notification-stack.is-collapsed [data-notification-dnd],.lf-notification-stack.is-collapsed [data-notification-close-all]{display:none}
    .lf-notification-items{position:absolute;top:calc(100% + 10px);right:0;display:grid;align-content:start;gap:10px;width:min(410px,calc(100vw - 28px));max-height:min(70vh,620px);overflow:auto;padding:10px;border:1px solid rgba(94,234,212,.28);border-radius:16px;background:linear-gradient(145deg,rgba(7,30,61,.96),rgba(10,60,86,.94));box-shadow:0 20px 55px rgba(0,0,0,.35);backdrop-filter:blur(18px)}
    .lf-notification-stack.is-collapsed .lf-notification-items{display:none}
    @media (max-width:640px){.lf-notification-stack{margin-left:auto}.lf-notification-items{position:fixed;top:var(--portal-header-height,72px);left:12px;right:12px;width:auto;max-height:calc(100dvh - var(--portal-header-height,72px) - 18px)}}
    .lf-notification-popup{pointer-events:auto;background:linear-gradient(145deg,var(--panel-bg),rgba(15,43,72,.96));color:var(--text-dark);border:1px solid rgba(94,234,212,.36);border-left:4px solid var(--primary-color);border-radius:13px;padding:14px;box-shadow:0 18px 45px rgba(0,0,0,.32)}
    .lf-notification-popup header{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.lf-notification-popup p{margin:8px 0 10px;color:var(--text-muted);font-size:.84rem;line-height:1.45}.lf-notification-popup .actions{display:flex;gap:8px;justify-content:flex-end}.lf-notification-popup .action-btn{min-height:34px;margin:0;padding:6px 12px;border:1px solid rgba(94,234,212,.28);background:rgba(13,148,136,.14);color:#dffcf8}.lf-notification-popup .action-btn:hover{background:rgba(13,148,136,.26)}
    .lf-notification-popup.is-pinned{border-left-color:#fbbf24;box-shadow:0 18px 45px rgba(0,0,0,.32),inset 0 0 0 1px rgba(251,191,36,.16)}

    /* Sticky notes use the same glass material in both portal themes. */
    .sticky-note-form{grid-template-columns:minmax(180px,.85fr) minmax(250px,1.55fr) minmax(140px,.55fr) auto;gap:14px;padding:16px;border-color:rgba(94,234,212,.30);background:linear-gradient(135deg,rgba(8,40,78,.70),rgba(12,82,113,.38));box-shadow:inset 0 1px rgba(255,255,255,.10),0 12px 26px rgba(2,8,23,.16)}
    .sticky-note-form label{color:var(--text-dark);font-size:.84rem}
    .sticky-note-form input,.sticky-note-form textarea,.sticky-note-form select{background:rgba(2,15,38,.62);border-color:rgba(148,215,232,.46);color:var(--text-dark)}
    .sticky-note-form-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-self:end}
    .sticky-note-form-actions .action-btn{min-height:42px;padding:8px 12px}
    .sticky-notes-board{gap:16px}
    .sticky-note,.floating-sticky-note{color:var(--text-dark);border:1px solid rgba(148,215,232,.42);background:linear-gradient(145deg,rgba(8,40,78,.93),rgba(13,73,101,.86));box-shadow:0 16px 32px rgba(2,8,23,.28),inset 0 1px rgba(255,255,255,.12)}
    .sticky-note{min-height:192px;padding:18px 16px 15px;transform:none;cursor:default}
    .sticky-note:nth-child(even){transform:none}
    .sticky-note::before,.floating-sticky-note::before{background:linear-gradient(120deg,rgba(94,234,212,.10),transparent 42%),repeating-linear-gradient(0deg,transparent 0 28px,rgba(191,250,241,.08) 29px 30px)}
    .sticky-note::after,.floating-sticky-note::after{display:none}
    .sticky-note--yellow,.floating-sticky-note--yellow{background:linear-gradient(145deg,rgba(104,86,20,.94),rgba(73,58,14,.90));border-color:rgba(250,204,21,.56)}
    .sticky-note--teal,.floating-sticky-note--teal{background:linear-gradient(145deg,rgba(7,91,91,.94),rgba(8,61,74,.90));border-color:rgba(45,212,191,.58)}
    .sticky-note--blue,.floating-sticky-note--blue{background:linear-gradient(145deg,rgba(13,66,124,.94),rgba(8,45,92,.90));border-color:rgba(96,165,250,.60)}
    .sticky-note--rose,.floating-sticky-note--rose{background:linear-gradient(145deg,rgba(115,39,75,.94),rgba(73,26,59,.90));border-color:rgba(251,113,133,.58)}
    body.light-mode .sticky-note,body.light-mode .floating-sticky-note{background:linear-gradient(145deg,rgba(239,251,255,.96),rgba(207,239,248,.92));color:#12324a;border-color:rgba(8,89,179,.28);box-shadow:0 12px 25px rgba(8,89,179,.16),inset 0 1px rgba(255,255,255,.75)}
    body.light-mode .sticky-note--yellow,body.light-mode .floating-sticky-note--yellow{background:linear-gradient(145deg,#fff9d9,#f6e8a6);border-color:rgba(180,132,0,.34)}
    body.light-mode .sticky-note--teal,body.light-mode .floating-sticky-note--teal{background:linear-gradient(145deg,#e1fbf6,#bdeee4);border-color:rgba(13,148,136,.35)}
    body.light-mode .sticky-note--blue,body.light-mode .floating-sticky-note--blue{background:linear-gradient(145deg,#e6f2ff,#c9e2ff);border-color:rgba(0,89,179,.34)}
    body.light-mode .sticky-note--rose,body.light-mode .floating-sticky-note--rose{background:linear-gradient(145deg,#fff0f5,#ffd7e3);border-color:rgba(225,29,72,.30)}
    .sticky-note strong,.floating-sticky-note strong{color:inherit}.sticky-note p,.floating-sticky-note p{color:inherit}.sticky-note span,.floating-sticky-note span{color:inherit;opacity:.78}
    .sticky-note-actions{position:absolute;z-index:3;top:9px;right:9px;display:flex;align-items:center;gap:6px}
    .sticky-note-edit,.sticky-note-delete,.floating-sticky-note-edit,.floating-sticky-note-delete{position:static;width:auto;height:28px;min-width:28px;padding:0 8px;border:1px solid rgba(191,250,241,.35);border-radius:8px;background:rgba(2,15,38,.42);color:inherit;font:700 .71rem inherit;cursor:pointer}
    .sticky-note-delete,.floating-sticky-note-delete{padding:0;font-size:1.08rem}.sticky-note-edit:hover,.sticky-note-delete:hover,.floating-sticky-note-edit:hover,.floating-sticky-note-delete:hover{background:rgba(94,234,212,.22);color:inherit}
    .floating-sticky-note-handle{background:rgba(2,15,38,.30);border-bottom-color:rgba(191,250,241,.18);color:inherit}
    @media(max-width:1000px) and (min-width:761px){
      .sticky-note-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
      .sticky-note-form>*{min-width:0}
      .sticky-note-form-actions{grid-template-columns:minmax(0,1fr);min-width:0}
      .sticky-note-form-actions .submit-btn,.sticky-note-form-actions .action-btn{width:100%;min-width:0}
    }
    @media(max-width:760px){.sticky-note-form{grid-template-columns:1fr}.sticky-note-form-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}

    /* Login refinement: readable controls, even spacing, and an iceberg identity frame. */
    #authSection > .auth-card{width:min(100%,560px)!important;max-width:560px!important;padding:22px!important;border-radius:20px}
    #authSection .login-card-tools{gap:10px;margin-bottom:12px}
    #authSection .login-secure-label{font-size:.84rem;letter-spacing:.075em}
    #authSection .login-card-actions{grid-template-columns:minmax(0,1fr) 44px 138px;gap:9px}
    #authSection .login-language-pill,#authSection .login-audio-compact,#authSection .login-background-compact{height:44px;min-height:44px!important}
    #authSection .login-background-compact{width:138px!important;min-width:138px!important;font-size:.78rem}
    #authSection .login-access-note{margin-bottom:16px;padding-bottom:13px;font-size:.88rem;line-height:1.45}
    #authSection #loginForm > div:not(.social-signin):not(.login-divider):not(.login-utility-row){margin-bottom:11px}
    #authSection #loginForm label{font-size:.92rem;margin-bottom:6px}
    #authSection #loginForm input{min-height:48px;font-size:1rem}
    #authSection .login-utility-row{margin:6px 0 14px}
    #authSection .login-remember label,#authSection .login-help-inline{font-size:.80rem;line-height:1.35}
    #authSection #loginForm > .submit-btn{min-height:50px;font-size:1rem}
    #authSection .login-divider{margin:14px auto 10px;font-size:.73rem}
    #authSection .social-signin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    #authSection .social-signin button{min-height:44px;padding:8px 9px;font-size:.82rem}
    #authSection .social-signin button[data-provider-signin="yahoo"]{grid-column:1 / -1}
    #authSection .login-new-account{margin-top:14px;padding-top:14px;gap:14px}
    #authSection .login-new-account p{font-size:.84rem}
    #authSection .login-new-account .action-btn{min-height:44px;padding:8px 16px;font-size:.86rem}
    /* Login iceberg artwork with blue eyes and a gently waving flipper. */
    .mascot-stage{
      width:340px;
      min-height:194px;
      top:-4px;
      overflow:visible;
    }
    .mascot-stage::before,
    .mascot-stage::after{
      display:none !important;
    }
    .brand-header{
      padding-top:172px;
    }
    .brand-header h1{
      position:relative;
      z-index:6;
      margin-top:4px !important;
    }
    @media (max-width:640px){
      #authSection > .auth-card{padding:18px!important;border-radius:18px}
      #authSection .login-card-actions{grid-template-columns:minmax(0,1fr) 42px}
      #authSection .login-background-compact{grid-column:1 / -1;width:100%!important;min-width:0!important}
      #authSection .social-signin{grid-template-columns:1fr}
      #authSection .social-signin button{font-size:.88rem}
      .mascot-stage{width:min(300px,calc(100vw - 32px));min-height:178px;top:8px}
      .brand-header{padding-top:176px}
      .brand-header img{width:132px !important;height:132px !important}
      .brand-header h1{margin-top:4px !important}
    }
    @media (max-width:420px){#authSection > .auth-card{padding:16px!important}}

    @media(min-width:641px){#authSection{padding-top:280px!important}}
    .login-emblem-button{display:block;width:100%;padding:0;border:0;background:none;box-shadow:none;cursor:pointer;pointer-events:auto;line-height:0}
    .login-emblem-button:focus-visible{outline:2px solid #a5f3fc;outline-offset:4px;border-radius:12px}
    .login-iceberg-emblem{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 8px 12px #02132155)}
    .penguin-wave{transform-origin:947px 617px;animation:penguinWave 7s ease-in-out infinite}
    @keyframes penguinWave{0%,58%,86%,100%{transform:rotate(0deg)}64%,76%{transform:rotate(-12deg)}70%,82%{transform:rotate(5deg)}}
    .brand-header h1{font-family:'Palatino Linotype','Book Antiqua',Georgia,serif;font-weight:600}
    .brand-header h1,.brand-header .slogan span{color:transparent;background-image:radial-gradient(ellipse at center,#fff 0 7%,transparent 12%),linear-gradient(110deg,#c8f5f4 10%,#effeff 35%,#87dce7 48%,#fff 51%,#cef8ff 54%,#9ae9dd 70%);background-size:19px 3px,250% 100%;background-clip:text;-webkit-background-clip:text;animation:windblownFrost 8s linear infinite;text-shadow:0 1px 16px #b7f3ff30}
    .brand-header .slogan{animation:none}
    .brand-header .slogan span{display:inline-block;animation-delay:-2s}
    @keyframes windblownFrost{from{background-position:100% 0,140% 50%}to{background-position:-100% 7px,-110% 50%}}
    @media(prefers-reduced-motion:reduce){.penguin-wave,.brand-header h1,.brand-header .slogan span{animation:none!important}}
    .parent-contact-toolbar{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:8px 10px;align-items:end;margin:12px 0 16px}
    .parent-contact-toolbar label{grid-column:1/-1;font-size:.82rem;font-weight:800;color:var(--text-muted)}
    .parent-contact-toolbar input{min-height:44px}
    .parent-contact-toolbar-actions{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
    #parentContactEditor{margin:0 0 16px}
    .parent-contact-list{display:grid;gap:12px}
    .parent-contact-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:14px;border:1px solid var(--border-color);border-radius:14px;background:rgba(2,15,29,.16)}
    .parent-contact-card h3{margin:0 0 4px;font-size:1rem}
    .parent-contact-card .parent-contact-class{display:inline-flex;margin-left:6px;vertical-align:middle}
    .parent-contact-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin-top:10px}
    .parent-contact-field{min-width:0}
    .parent-contact-field span{display:block;color:var(--text-muted);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
    .parent-contact-field strong{display:block;margin-top:2px;overflow-wrap:anywhere;font-size:.88rem}
    .parent-contact-actions{display:flex;flex-direction:column;gap:7px;min-width:132px}
    .parent-contact-actions .action-btn{min-height:38px;padding:7px 10px;font-size:.78rem}
    @media(max-width:640px){.parent-contact-toolbar{grid-template-columns:1fr}.parent-contact-toolbar label{grid-column:auto}.parent-contact-toolbar-actions{display:grid;grid-template-columns:1fr 1fr}.parent-contact-card{grid-template-columns:1fr}.parent-contact-details{grid-template-columns:1fr}.parent-contact-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-width:0}}
    @media(max-width:390px){.parent-contact-actions{grid-template-columns:1fr}}
        .email-inbox-toolbar{display:flex;gap:8px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin:14px 0}.email-inbox-list{display:grid;gap:9px}
    .email-inbox-item{border:1px solid var(--border-color);border-radius:12px;padding:13px;background:rgba(2,15,29,.16)}.email-inbox-item.is-unread{border-left:4px solid #5eead4}.email-inbox-item.is-pinned{box-shadow:inset 0 0 0 1px rgba(94,234,212,.35)}
    .email-inbox-item header{display:flex;justify-content:space-between;gap:10px}.email-inbox-item .actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
    .email-compose-card{grid-column:1/-1}.email-compose-card form{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(220px,1.3fr);gap:12px}.email-compose-card form label:nth-of-type(3),.email-compose-card form .actions,.email-compose-card form .meta{grid-column:1/-1}.email-compose-card textarea{resize:vertical}
    @media(max-width:640px){#authSection .login-card-actions{grid-template-columns:minmax(0,1fr) 42px}#authSection .login-background-compact{grid-column:1/-1;width:100%!important;min-width:0!important}.lf-notification-controls{display:flex;align-items:center}.email-inbox-item header{flex-direction:column}.email-compose-card form{grid-template-columns:1fr}.email-compose-card form label,.email-compose-card form .actions,.email-compose-card form .meta{grid-column:1}}

    /* Little Feet penguin profile avatars: external SVG symbols avoid fragile PNG sprite cropping. */
    .profile-icon-picker {
      grid-template-columns:repeat(4,minmax(0,1fr)) !important;
      gap:10px !important;
    }
    .profile-icon-choice {
      display:flex !important;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:5px;
      min-height:94px !important;
      padding:8px 6px !important;
      overflow:hidden;
    }
    .profile-avatar-image {
      display:block;
      width:64px;
      height:64px;
      flex:0 0 64px;
      overflow:visible;
      filter:drop-shadow(0 2px 4px rgba(0,0,0,.30));
      pointer-events:none;
    }
    .profile-icon-label {
      display:block;
      max-width:100%;
      overflow:hidden;
      color:var(--text-muted);
      font-size:.66rem;
      font-weight:800;
      line-height:1.1;
      text-overflow:ellipsis;
      white-space:nowrap;
      pointer-events:none;
    }
    .profile-icon-choice:hover .profile-icon-label,
    .profile-icon-choice:focus-visible .profile-icon-label,
    .profile-icon-choice.is-selected .profile-icon-label { color:var(--text-light); }
    .profile-icon-choice.is-selected .profile-avatar-image {
      filter:drop-shadow(0 0 7px rgba(94,234,212,.62)) drop-shadow(0 2px 4px rgba(0,0,0,.28));
    }
    .user-avatar {
      width:34px !important;
      height:34px !important;
      min-width:34px !important;
      flex:0 0 34px !important;
      display:flex !important;
      align-items:center;
      justify-content:center;
      overflow:visible !important;
      border-radius:0 !important;
      background:transparent !important;
      color:inherit;
    }
    .user-avatar .profile-avatar-image {
      width:32px;
      height:32px;
      min-width:32px;
      flex:0 0 32px;
      filter:drop-shadow(0 1px 2px rgba(0,0,0,.36));
    }
    @media (max-width:480px) {
      .profile-icon-picker { grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:7px !important; }
      .profile-icon-choice { min-height:82px !important; padding:6px 3px !important; }
      .profile-icon-choice .profile-avatar-image { width:56px; height:56px; flex-basis:56px; }
      .profile-icon-label { font-size:.58rem; }
    }
    @media (max-width:360px) {
      .profile-icon-picker { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
      .profile-icon-choice { min-height:90px !important; }
      .profile-icon-choice .profile-avatar-image { width:60px; height:60px; flex-basis:60px; }
      .profile-icon-label { font-size:.64rem; }
    }

    /* Canonical responsive portal header — one layout owner for phone, tablet, desktop and TV. */
    #dashboardSection > nav {
      box-sizing:border-box;
      align-items:center;
    }
    #dashboardSection .nav-brand,
    #dashboardSection .nav-quickbar,
    #dashboardSection .nav-user-panel,
    #dashboardSection .nav-more-toggle { min-width:0; }

    #dashboardSection .nav-user-panel {
      position:relative;
      display:flex;
      align-items:center;
      flex-wrap:nowrap;
      gap:6px;
    }
    #dashboardSection .lf-notification-stack {
      position:static !important;
      inset:auto !important;
      z-index:70;
      flex:0 0 auto;
      width:auto !important;
      max-width:100%;
      margin:0 !important;
      padding:0;
      border:0;
      background:transparent;
      box-shadow:none;
    }
    #dashboardSection .lf-notification-controls {
      display:flex !important;
      align-items:center;
      gap:5px;
    }
    #dashboardSection .lf-notification-controls .action-btn {
      width:auto !important;
      min-width:0;
      min-height:34px;
      margin:0;
      padding:6px 9px !important;
      white-space:nowrap;
    }
    #dashboardSection .lf-notification-items { z-index:90; }

    #dashboardSection .nav-quickbar > .nav-more-toggle {
      position:static !important;
      margin:0 !important;
      min-width:0;
    }
    @media (min-width:960px) {
      #dashboardSection .nav-quickbar > .nav-more-toggle { display:none !important; }
    }
    @media (max-width:959px) {
      #dashboardSection .nav-quickbar > .nav-more-toggle { display:inline-flex !important; }
    }

    /* Wide desktop / TV: one clean row. */
    @media (min-width:1440px) {
      #dashboardSection > nav {
        display:grid !important;
        grid-template-columns:auto minmax(0,1fr) auto;
        grid-template-rows:auto;
        gap:8px 12px;
      }
      #dashboardSection .nav-brand { grid-column:1; grid-row:1; }
      #dashboardSection .nav-quickbar {
        grid-column:2;
        grid-row:1;
        display:flex !important;
        flex-wrap:nowrap;
        width:100%;
        margin:0;
        overflow:visible;
      }
      #dashboardSection .nav-user-panel {
        grid-column:3;
        grid-row:1;
        width:auto !important;
        margin:0 !important;
        justify-self:end;
        justify-content:flex-end !important;
      }
    }

    /* Opening inbox notifications must not squeeze or cover navigation buttons. */
    @media (min-width:1200px) {
      #dashboardSection .nav-user-panel .lf-notification-stack {
        width:72px !important;
        min-width:72px !important;
        max-width:72px !important;
      }
      #dashboardSection .nav-quickbar > .nav-shortcut {
        flex:0 0 auto !important;
        min-width:44px;
        overflow:hidden;
      }
      #dashboardSection .nav-user-panel .lf-notification-controls { width:72px; }
      #dashboardSection .nav-user-panel [data-notification-collapse] { width:72px !important; }
      #dashboardSection .nav-user-panel .lf-notification-stack:not(.is-collapsed) [data-notification-dnd],
      #dashboardSection .nav-user-panel .lf-notification-stack:not(.is-collapsed) [data-notification-close-all] {
        position:absolute;
        top:42px;
        z-index:95;
      }
      #dashboardSection .nav-user-panel .lf-notification-stack:not(.is-collapsed) [data-notification-dnd] { right:84px; width:148px !important; }
      #dashboardSection .nav-user-panel .lf-notification-stack:not(.is-collapsed) [data-notification-close-all] { right:0; width:78px !important; }
      #dashboardSection .nav-user-panel .lf-notification-stack:not(.is-collapsed) .lf-notification-items {
        top:84px !important;
        max-height:min(580px,calc(100dvh - var(--portal-header-height,72px) - 104px));
      }
    }

    @media (min-width:1440px) {
      #dashboardSection .nav-user-panel #displayRole {
        max-width:120px !important;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
    }

    /* Compact desktop: Term/Edit and Home/Search/Help always get separate grid cells. */
    @media (min-width:1200px) and (max-width:1599px) {
      #dashboardSection > nav {
        display:grid !important;
        grid-template-columns:auto minmax(0,1fr) auto;
        grid-template-rows:auto;
        gap:7px 9px;
      }
      #dashboardSection .nav-brand { grid-column:1; grid-row:1; }
      #dashboardSection .nav-live-pill { display:none !important; }
      #dashboardSection .nav-quickbar {
        grid-column:2;
        grid-row:1;
        display:grid !important;
        grid-template-columns:minmax(190px,1fr) repeat(3,max-content) !important;
        align-items:center;
        gap:6px !important;
        width:100%;
        margin:0;
      }
      #dashboardSection .nav-term-panel {
        width:100%;
        max-width:none !important;
      }
      #dashboardSection .nav-quickbar .nav-shortcut {
        min-width:0;
        padding:6px 8px;
        font-size:.68rem;
      }
      #dashboardSection .nav-user-panel {
        grid-column:3;
        grid-row:1;
        width:auto !important;
        margin:0 !important;
        justify-self:end;
        justify-content:flex-end !important;
        gap:5px;
      }
      #dashboardSection .nav-user-panel .user-switch-control {
        width:42px !important;
        min-width:42px !important;
        max-width:42px !important;
        padding:2px !important;
        justify-content:center !important;
      }
      #dashboardSection .nav-user-panel #displayRole {
        display:none !important;
      }
      #dashboardSection .nav-user-panel > .action-btn {
        width:34px !important;
        min-width:34px !important;
        min-height:34px !important;
        padding:6px !important;
      }
      #dashboardSection .nav-user-panel > .action-btn > span { display:none !important; }
    }

    /* Snapped-window / tablet / small desktop header.
       Absolute slotting is intentional here: it prevents older flex/grid rules,
       browser zoom and Windows snap widths from pushing Menu/account controls
       onto extra rows. */
    @media (min-width:641px) and (max-width:1199px) {
      #dashboardSection > nav {
        display:block !important;
        position:sticky !important;
        top:0 !important;
        height:98px !important;
        min-height:98px !important;
        padding:7px 9px !important;
        overflow:visible !important;
      }

      #dashboardSection .nav-brand {
        position:absolute !important;
        top:7px !important;
        left:9px !important;
        right:250px !important;
        height:40px !important;
        min-width:0 !important;
        width:auto !important;
        max-width:none !important;
        margin:0 !important;
        overflow:hidden !important;
      }
      #dashboardSection .nav-brand > div { min-width:0 !important; overflow:hidden !important; }
      #dashboardSection .nav-brand .site-name {
        display:block !important;
        max-width:100% !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        white-space:nowrap !important;
      }
      #dashboardSection .nav-brand .org-badge { display:none !important; }

      #dashboardSection .nav-user-panel {
        position:absolute !important;
        top:9px !important;
        right:9px !important;
        left:auto !important;
        bottom:auto !important;
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;
        flex-wrap:nowrap !important;
        gap:5px !important;
        width:232px !important;
        min-width:232px !important;
        max-width:232px !important;
        height:36px !important;
        margin:0 !important;
      }
      #dashboardSection .nav-user-panel .user-switch-control {
        width:40px !important;
        min-width:40px !important;
        max-width:40px !important;
        height:36px !important;
        min-height:36px !important;
        margin:0 !important;
        padding:2px !important;
        justify-content:center !important;
        overflow:hidden !important;
      }
      #dashboardSection .nav-user-panel #displayRole,
      #dashboardSection .nav-user-panel #serverStatusText { display:none !important; }
      #dashboardSection .nav-user-panel .user-avatar {
        width:30px !important;
        height:30px !important;
        min-width:30px !important;
      }
      #dashboardSection .nav-user-panel .user-avatar .profile-avatar-image {
        width:28px !important;
        height:28px !important;
        min-width:28px !important;
      }
      #dashboardSection .nav-user-panel #serverStatus {
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:32px !important;
        min-width:32px !important;
        max-width:32px !important;
        height:34px !important;
        min-height:34px !important;
        margin:0 !important;
        padding:0 !important;
      }

      #dashboardSection .nav-user-panel .lf-notification-stack {
        position:static !important;
        inset:auto !important;
        width:72px !important;
        min-width:72px !important;
        max-width:72px !important;
        height:34px !important;
        margin:0 !important;
        padding:0 !important;
      }
      #dashboardSection .nav-user-panel .lf-notification-stack.is-collapsed .lf-notification-controls {
        display:block !important;
        width:100% !important;
        height:100% !important;
      }
      #dashboardSection .nav-user-panel .lf-notification-stack.is-collapsed [data-notification-collapse] {
        width:72px !important;
        min-width:72px !important;
        max-width:72px !important;
        height:34px !important;
        min-height:34px !important;
        margin:0 !important;
        padding:4px 5px !important;
        font-size:.60rem !important;
        white-space:nowrap !important;
      }
      #dashboardSection .nav-user-panel > [data-portal-audio-mute],
      #dashboardSection .nav-user-panel > [onclick="toggleDarkMode()"] {
        width:34px !important;
        min-width:34px !important;
        max-width:34px !important;
        height:34px !important;
        min-height:34px !important;
        margin:0 !important;
        padding:5px !important;
      }
      #dashboardSection .nav-user-panel > [data-portal-audio-mute] > span,
      #dashboardSection .nav-user-panel > [onclick="toggleDarkMode()"] > span { display:none !important; }

      #dashboardSection .nav-live-pill { display:none !important; }
      #dashboardSection .nav-quickbar {
        position:absolute !important;
        left:9px !important;
        right:9px !important;
        bottom:7px !important;
        top:auto !important;
        display:grid !important;
        grid-template-columns:minmax(0,1fr) repeat(4,76px) !important;
        align-items:center !important;
        gap:6px !important;
        width:auto !important;
        min-width:0 !important;
        height:40px !important;
        margin:0 !important;
      }
      #dashboardSection .nav-term-panel {
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        height:36px !important;
        min-height:36px !important;
        margin:0 !important;
        padding:4px 7px !important;
      }
      #dashboardSection .nav-term-panel strong {
        min-width:0 !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        white-space:nowrap !important;
        font-size:.66rem !important;
      }
      #dashboardSection .nav-term-status { display:none !important; }
      #dashboardSection .nav-term-panel .nav-term-edit {
        min-height:28px !important;
        padding:4px 8px !important;
        font-size:.62rem !important;
      }
      #dashboardSection .nav-quickbar > .nav-shortcut,
      #dashboardSection .nav-quickbar > #navMoreToggle {
        position:static !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:76px !important;
        min-width:76px !important;
        max-width:76px !important;
        height:36px !important;
        min-height:36px !important;
        margin:0 !important;
        padding:6px 5px !important;
        gap:4px !important;
        font-size:.66rem !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        order:initial !important;
        grid-column:auto !important;
        grid-row:auto !important;
        justify-self:stretch !important;
        align-self:center !important;
      }

      #dashboardSection .nav-user-panel .lf-notification-stack:not(.is-collapsed) {
        position:absolute !important;
        top:40px !important;
        right:0 !important;
        left:auto !important;
        width:min(430px,calc(100vw - 18px)) !important;
        min-width:0 !important;
        max-width:min(430px,calc(100vw - 18px)) !important;
        height:auto !important;
        z-index:90 !important;
      }
    }

    @media (min-width:641px) and (max-width:760px) {
      #dashboardSection .nav-brand { right:224px !important; }
      #dashboardSection .nav-brand img {
        width:34px !important;
        height:34px !important;
        min-width:34px !important;
      }
      #dashboardSection .nav-brand .site-name { font-size:.88rem !important; }
      #dashboardSection .nav-user-panel {
        width:206px !important;
        min-width:206px !important;
        max-width:206px !important;
      }
      #dashboardSection .nav-user-panel .lf-notification-stack,
      #dashboardSection .nav-user-panel .lf-notification-stack.is-collapsed [data-notification-collapse] {
        width:58px !important;
        min-width:58px !important;
        max-width:58px !important;
        font-size:.54rem !important;
      }
      #dashboardSection .nav-quickbar {
        grid-template-columns:minmax(0,1fr) repeat(4,64px) !important;
        gap:4px !important;
      }
      #dashboardSection .nav-quickbar > .nav-shortcut,
      #dashboardSection .nav-quickbar > #navMoreToggle {
        width:64px !important;
        min-width:64px !important;
        max-width:64px !important;
        font-size:.60rem !important;
        padding-inline:3px !important;
      }
    }

    /* Phone: compact three-row header.
       Row 1 = brand + avatar/status, row 2 = term, row 3 = the full task bar. */
    @media (max-width:640px) {
      #dashboardSection > nav {
        display:grid !important;
        grid-template-columns:repeat(7,minmax(0,1fr)) !important;
        grid-template-rows:minmax(40px,auto) auto 42px !important;
        gap:5px 4px !important;
        padding:6px 7px !important;
        align-items:center !important;
      }
      #dashboardSection .nav-brand {
        grid-column:1 / 6 !important;
        grid-row:1 !important;
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        min-height:40px !important;
        padding:0 !important;
        gap:7px !important;
        overflow:hidden;
      }
      #dashboardSection .nav-brand img {
        width:34px !important;
        height:34px !important;
        min-width:34px !important;
      }
      #dashboardSection .nav-brand > div { min-width:0 !important; }
      #dashboardSection .nav-brand .site-name {
        display:block;
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size:.78rem !important;
        letter-spacing:.01em !important;
      }
      #dashboardSection .nav-brand .org-badge { display:none !important; }

      #dashboardSection .nav-quickbar,
      #dashboardSection .nav-user-panel {
        display:contents !important;
      }
      #dashboardSection .nav-live-pill { display:none !important; }
      #dashboardSection .nav-term-panel {
        grid-column:1 / -1 !important;
        grid-row:2 !important;
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        min-height:32px !important;
        padding:3px 6px !important;
        margin:0 !important;
      }
      #dashboardSection .nav-term-panel strong {
        min-width:0 !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        white-space:nowrap !important;
        font-size:.62rem !important;
        line-height:1.05 !important;
      }
      #dashboardSection .nav-term-status { display:none !important; }
      #dashboardSection .nav-term-panel .nav-term-edit {
        min-height:28px !important;
        padding:3px 7px !important;
        font-size:.60rem !important;
      }

      #dashboardSection .nav-quickbar > .nav-shortcut:nth-of-type(1) { grid-column:1 !important; grid-row:3 !important; }
      #dashboardSection .nav-quickbar > .nav-shortcut:nth-of-type(2) { grid-column:2 !important; grid-row:3 !important; }
      #dashboardSection .nav-quickbar > .nav-shortcut:nth-of-type(3) { grid-column:3 !important; grid-row:3 !important; }
      #dashboardSection .nav-quickbar > #navMoreToggle { grid-column:4 !important; grid-row:3 !important; }

      #dashboardSection .nav-quickbar > .nav-shortcut,
      #dashboardSection .nav-quickbar > #navMoreToggle {
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        align-self:stretch !important;
        justify-self:stretch !important;
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        min-height:40px !important;
        height:40px !important;
        margin:0 !important;
        padding:3px 1px !important;
        gap:1px !important;
        white-space:nowrap !important;
        overflow:hidden;
      }
      #dashboardSection .nav-quickbar > .nav-shortcut > span,
      #dashboardSection .nav-quickbar > #navMoreToggle > span { display:none !important; }
      #dashboardSection .nav-quickbar > [data-mobile-label]::after {
        content:attr(data-mobile-label);
        display:block;
        font-size:.50rem;
        font-weight:800;
        line-height:1;
      }
      #dashboardSection .nav-quickbar .ui-icon {
        width:17px !important;
        height:17px !important;
        flex:0 0 17px !important;
      }

      #dashboardSection .nav-user-panel .user-switch-control {
        grid-column:6 !important;
        grid-row:1 !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        align-self:center !important;
        justify-self:center !important;
        width:38px !important;
        min-width:38px !important;
        max-width:38px !important;
        height:38px !important;
        min-height:38px !important;
        margin:0 !important;
        padding:2px !important;
        overflow:visible !important;
      }
      #dashboardSection .nav-user-panel #displayRole { display:none !important; }
      #dashboardSection .nav-user-panel .user-avatar {
        width:34px !important;
        height:34px !important;
        min-width:34px !important;
      }
      #dashboardSection .nav-user-panel .user-avatar .profile-avatar-image {
        width:32px !important;
        height:32px !important;
        min-width:32px !important;
        flex-basis:32px !important;
      }
      #dashboardSection .nav-user-panel #serverStatus {
        grid-column:7 !important;
        grid-row:1 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        align-self:center !important;
        justify-self:center !important;
        width:34px !important;
        min-width:34px !important;
        max-width:34px !important;
        height:34px !important;
        margin:0 !important;
        padding:0 !important;
      }
      #dashboardSection .nav-user-panel #serverStatusText { display:none !important; }

      #dashboardSection .nav-user-panel .lf-notification-stack {
        grid-column:5 !important;
        grid-row:3 !important;
        align-self:stretch !important;
        justify-self:stretch !important;
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        margin:0 !important;
      }
      #dashboardSection .nav-user-panel .lf-notification-stack.is-collapsed .lf-notification-controls {
        display:block !important;
        width:100% !important;
        height:100% !important;
      }
      #dashboardSection .nav-user-panel .lf-notification-stack.is-collapsed [data-notification-collapse] {
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        height:40px !important;
        min-height:40px !important;
        margin:0 !important;
        padding:3px 1px !important;
        font-size:.50rem !important;
        line-height:1 !important;
        white-space:normal !important;
        text-align:center;
      }

      #dashboardSection .nav-user-panel > [data-portal-audio-mute] {
        grid-column:6 !important;
        grid-row:3 !important;
      }
      #dashboardSection .nav-user-panel > [onclick="toggleDarkMode()"] {
        grid-column:7 !important;
        grid-row:3 !important;
      }
      #dashboardSection .nav-user-panel > [data-portal-audio-mute],
      #dashboardSection .nav-user-panel > [onclick="toggleDarkMode()"] {
        align-self:stretch !important;
        justify-self:stretch !important;
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        height:40px !important;
        min-height:40px !important;
        margin:0 !important;
        padding:5px !important;
      }
      #dashboardSection .nav-user-panel > [data-portal-audio-mute] > span,
      #dashboardSection .nav-user-panel > [onclick="toggleDarkMode()"] > span { display:none !important; }
      #dashboardSection .nav-user-panel > [data-portal-audio-mute] .ui-icon,
      #dashboardSection .nav-user-panel > [onclick="toggleDarkMode()"] .ui-icon {
        width:18px !important;
        height:18px !important;
      }

      #dashboardSection .nav-user-panel .lf-notification-stack:not(.is-collapsed) {
        grid-column:1 / -1 !important;
        grid-row:4 !important;
        width:100% !important;
      }
      #dashboardSection .nav-user-panel .lf-notification-stack:not(.is-collapsed) .lf-notification-controls {
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:5px !important;
        width:100% !important;
      }
      #dashboardSection .nav-user-panel .lf-notification-stack:not(.is-collapsed) .lf-notification-controls .action-btn {
        width:100% !important;
        min-width:0 !important;
        min-height:36px !important;
        white-space:normal !important;
      }
      #dashboardSection .lf-notification-items {
        position:fixed !important;
        top:calc(var(--portal-header-height, 128px) + 5px) !important;
        right:8px !important;
        bottom:auto !important;
        left:8px !important;
        width:auto !important;
        max-height:calc(100dvh - var(--portal-header-height, 128px) - 13px);
      }
    }

    @media (max-width:360px) {
      #dashboardSection > nav { gap:4px 3px !important; padding-inline:5px !important; }
      #dashboardSection .nav-brand .site-name { font-size:.70rem !important; }
      #dashboardSection .nav-quickbar > [data-mobile-label]::after { font-size:.46rem !important; }
      #dashboardSection .nav-user-panel .lf-notification-stack.is-collapsed [data-notification-collapse] {
        font-size:.45rem !important;
      }
    }
    /* Windows snapped-desktop repair: keep the navigation docked on a fine-pointer
       desktop even when the browser is only about half-screen wide. Touch tablets
       at the same width keep the slide-over drawer. */
    @media (min-width:900px) and (max-width:1199px) and (hover:hover) and (pointer:fine) {
      #dashboardSection .nav-quickbar {
        grid-template-columns:minmax(0,1fr) repeat(3,76px) !important;
      }
      #dashboardSection .nav-quickbar > #navMoreToggle {
        display:none !important;
      }

      /* Windows snapped desktop: pin the whole shell together.
         Sticky can lose its viewport anchor at these widths because older
         responsive overflow rules also apply. A fixed header + fixed sidebar
         makes the attachment deterministic while scrolling. */
      #dashboardSection > nav {
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        right:0 !important;
        width:100% !important;
        z-index:40 !important;
      }
      .app-sidebar {
        position:fixed !important;
        top:98px !important;
        bottom:0 !important;
        height:auto !important;
        width:236px !important;
        transform:none !important;
        transition:none !important;
        z-index:35 !important;
      }
      #dashboardSection.sidebar-open::after {
        content:none !important;
        display:none !important;
      }
      #dashboardSection > .app-sidebar ~ .container,
      #dashboardSection.sidebar-collapsed > .app-sidebar ~ .container {
        width:calc(100% - 236px) !important;
        max-width:none !important;
        margin-left:236px !important;
        margin-top:98px !important;
        padding:clamp(14px,2.1vw,22px) !important;
      }
      #dashboardSection > .app-sidebar ~ footer,
      #dashboardSection.sidebar-collapsed > .app-sidebar ~ footer {
        margin-left:236px !important;
      }
    }


    /* Final login branding: one authoritative block for every viewport.
       Professional Little Feet styling, no decorative borders, no mobile blur,
       and explicit spacing so the identity never overlaps the login card. */

    #authSection {
      overflow-x:hidden !important;
    }

    #authSection > .auth-card {
      overflow:visible !important;
    }

    #authSection .brand-header {
      box-sizing:border-box !important;
      position:absolute !important;
      z-index:4 !important;
      left:50% !important;
      right:auto !important;
      display:flex !important;
      flex-direction:column !important;
      align-items:center !important;
      justify-content:flex-start !important;
      width:min(640px,calc(100vw - 32px)) !important;
      max-width:640px !important;
      margin:0 !important;
      padding:0 !important;
      transform:translateX(-50%) !important;
      overflow:visible !important;
      text-align:center !important;
    }

    /* Kill the old mobile blur/mask completely. */
    #authSection .brand-header::after {
      content:none !important;
      display:none !important;
      background:none !important;
      backdrop-filter:none !important;
      -webkit-backdrop-filter:none !important;
      mask-image:none !important;
      -webkit-mask-image:none !important;
    }

    #authSection .mascot-stage {
      position:relative !important;
      z-index:5 !important;
      left:auto !important;
      right:auto !important;
      top:auto !important;
      bottom:auto !important;
      order:1 !important;
      display:block !important;
      width:min(340px,72vw) !important;
      min-height:0 !important;
      height:auto !important;
      margin:0 auto 10px !important;
      transform:none !important;
      overflow:visible !important;
      pointer-events:auto !important;
    }

    #authSection .login-emblem-button,
    #authSection .login-iceberg-emblem {
      position:relative !important;
      display:block !important;
      width:100% !important;
      max-width:none !important;
      height:auto !important;
      margin:0 auto !important;
      border:0 !important;
      outline:0 !important;
      background:transparent !important;
      box-shadow:none !important;
    }

    /* Solid navy lettering; only the moving overlay emits light. */
    #authSection .brand-header h1 {
      order:2 !important;
      position:relative !important;
      z-index:6 !important;
      box-sizing:border-box !important;
      width:100% !important;
      max-width:100% !important;
      margin:0 auto 8px !important;
      padding:0 6px !important;

      font-family:'Palatino Linotype','Book Antiqua',Georgia,serif !important;
      font-size:clamp(1.65rem,3.25vw,2.35rem) !important;
      font-weight:800 !important;
      font-style:normal !important;
      line-height:1.05 !important;
      letter-spacing:.018em !important;
      white-space:nowrap !important;
      text-align:center !important;
      text-transform:none !important;

      color:#08287f !important;
      -webkit-text-fill-color:#08287f !important;
      background:none !important;
      background-image:none !important;
      background-clip:border-box !important;
      -webkit-background-clip:border-box !important;
      -webkit-text-stroke:0 !important;

      border:0 !important;
      outline:0 !important;
      box-shadow:none !important;

      text-shadow:none !important;
      animation:none !important;
      cursor:pointer !important;
    }

    /* Razor-thin ice line: the navy wordmark beneath never changes colour. */
    #authSection .brand-header h1::after {
      content:"Little Feet Technologies";
      position:absolute;
      inset:0;
      z-index:1;
      display:block;
      box-sizing:border-box;
      padding:inherit;
      pointer-events:none;

      font:inherit;
      font-size:inherit;
      font-weight:inherit;
      font-style:inherit;
      line-height:inherit;
      letter-spacing:inherit;
      white-space:inherit;
      text-align:inherit;
      text-transform:inherit;

      color:transparent;
      -webkit-text-fill-color:transparent;
      /* Shadows inherit even when the text fill is transparent. Reset them
         before filtering so only the clipped light stripe can cast a glow. */
      text-shadow:none;
      background:linear-gradient(
        90deg,
        transparent 0 3px,
        #38bdf8 5px,
        #7dd3fc 6px,
        #e6fbff 7px,
        #7dd3fc 8px,
        #38bdf8 9px,
        transparent 11px 14px
      );
      background-size:14px 100%;
      background-position:0% 50%;
      background-repeat:no-repeat;
      background-clip:text;
      -webkit-background-clip:text;
      filter:
        drop-shadow(0 0 1px rgba(125,211,252,.95))
        drop-shadow(0 0 3px rgba(56,189,248,.72));
      animation:loginWordmarkIceSweep 3.2s linear infinite;
    }

    @keyframes loginWordmarkIceSweep {
      from { background-position:0% 50%; }
      to { background-position:100% 50%; }
    }

    @media (prefers-reduced-motion:reduce) {
      #authSection .brand-header h1::after {
        animation:none;
        opacity:0;
      }
    }

    #authSection .brand-header h1:focus,
    #authSection .brand-header h1:active {
      border:0 !important;
      outline:0 !important;
      box-shadow:none !important;
    }

    #authSection .brand-header h1:focus-visible {
      border:0 !important;
      outline:0 !important;
      box-shadow:none !important;
      text-decoration:underline !important;
      text-decoration-color:#5eead4 !important;
      text-underline-offset:4px !important;
    }

    /* Raised ice lettering without a surrounding panel. */
    #authSection .brand-header p.slogan {
      order:3 !important;
      position:relative !important;
      z-index:6 !important;
      display:block !important;
      max-width:100% !important;
      margin:0 auto !important;
      padding:0 !important;

      border:0 !important;
      outline:0 !important;
      border-radius:0 !important;

      background:none !important;
      background-image:none !important;
      box-shadow:none !important;

      backdrop-filter:none !important;
      -webkit-backdrop-filter:none !important;
    }

    #authSection .brand-header p.slogan span {
      color:#08287f !important;
      -webkit-text-fill-color:#08287f !important;
      background:none !important;
      background-image:none !important;
      background-clip:border-box !important;
      -webkit-background-clip:border-box !important;
      -webkit-text-stroke:0 !important;

      font-family:"Segoe UI Variable Text",Aptos,"Segoe UI",Arial,sans-serif !important;
      font-size:clamp(.92rem,1.35vw,1.08rem) !important;
      font-weight:750 !important;
      font-style:normal !important;
      line-height:1.15 !important;
      letter-spacing:.075em !important;
      text-transform:uppercase !important;

      text-shadow:
        0 -1px 0 #fff, 0 1px 0 #568aa5, 0 2px 0 #193c60, 0 3px 6px #020c1ce6 !important;
      animation:none !important;
    }

    /* Keep wallpaper lettering from showing through the login card.
       This opacity is local to the card, not a full-screen/mobile blur. */
    #authSection > .auth-card {
      background:
        linear-gradient(
          155deg,
          rgba(8,40,127,.97),
          rgba(6,29,91,.965)
        ) !important;
      backdrop-filter:none !important;
      -webkit-backdrop-filter:none !important;
    }

    body.light-mode #authSection > .auth-card {
      background:
        linear-gradient(
          155deg,
          rgba(222,244,253,.97),
          rgba(190,225,241,.965)
        ) !important;
    }

    /* Desktop / tablet / TV: reserve enough air above the card. */
    @media (min-width:641px) {
      #authSection {
        min-height:100dvh !important;
        align-items:flex-start !important;
        justify-content:center !important;
        padding:
          max(16px,env(safe-area-inset-top))
          max(18px,env(safe-area-inset-right))
          44px
          max(18px,env(safe-area-inset-left)) !important;
      }

      #authSection > .auth-card {
        width:min(100%,520px) !important;
        max-width:520px !important;
        margin:286px auto 0 !important;
      }

      #authSection .brand-header {
        top:-274px !important;
      }
    }

    /* Phones: same visual system, tighter geometry, zero overlap. */
    @media (max-width:640px) {
      html,
      body {
        overflow-x:hidden !important;
      }

      #authSection:not(.hidden) {
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:flex-start !important;
        min-height:100dvh !important;
        width:100% !important;
        padding:
          max(12px,env(safe-area-inset-top))
          max(12px,env(safe-area-inset-right))
          22px
          max(12px,env(safe-area-inset-left)) !important;
      }

      #authSection > .auth-card {
        flex:0 0 auto !important;
        align-self:center !important;
        width:min(calc(100vw - 24px),520px) !important;
        max-width:520px !important;
        min-width:0 !important;
        margin:228px auto 0 !important;
        padding:14px !important;
        border-radius:16px !important;
      }

      #authSection .brand-header {
        top:-216px !important;
        width:calc(100vw - 28px) !important;
        max-width:430px !important;
      }

      #authSection .mascot-stage {
        width:min(225px,66vw) !important;
        margin-bottom:8px !important;
      }

      #authSection .brand-header h1 {
        font-size:clamp(1.22rem,5.7vw,1.62rem) !important;
        letter-spacing:.012em !important;
        margin-bottom:6px !important;
        padding-inline:0 !important;
      }

      #authSection .brand-header p.slogan {
        padding:5px 10px !important;
      }

      #authSection .brand-header p.slogan span {
        font-size:clamp(.76rem,3.35vw,.90rem) !important;
        letter-spacing:.065em !important;
      }

      #authSection .login-card-tools {
        gap:10px !important;
      }

      /* The ticker stacks after the card on phones. */
      #authSection .login-info-runner {
        position:relative !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        z-index:3 !important;
        flex:0 0 auto !important;
        align-self:stretch !important;
        width:100vw !important;
        max-width:100vw !important;
        min-height:42px !important;
        margin:16px calc(50% - 50vw) 0 !important;
        padding:9px 0 max(9px,env(safe-area-inset-bottom)) !important;
      }
    }

    @media (max-width:380px) {
      #authSection > .auth-card {
        margin-top:214px !important;
        padding:13px !important;
      }

      #authSection .brand-header {
        top:-202px !important;
      }

      #authSection .mascot-stage {
        width:min(205px,64vw) !important;
      }

      #authSection .brand-header h1 {
        font-size:clamp(1.08rem,5.5vw,1.34rem) !important;
      }
    }

    /* Short landscape phones/tablets: compact but still separated. */
    @media (max-width:900px) and (max-height:600px) and (orientation:landscape) {
      #authSection {
        padding-top:10px !important;
      }

      #authSection > .auth-card {
        margin-top:164px !important;
      }

      #authSection .brand-header {
        top:-154px !important;
      }

      #authSection .mascot-stage {
        width:150px !important;
        margin-bottom:4px !important;
      }

      #authSection .brand-header h1 {
        font-size:1.18rem !important;
        margin-bottom:4px !important;
      }

      #authSection .brand-header p.slogan {
        padding:4px 9px !important;
      }
    }

    /* Mobile login interaction guard.
       Keep decorative branding from covering real form hit targets. */
    #authSection > .auth-card {
      position:relative !important;
      z-index:10 !important;
      isolation:isolate !important;
      pointer-events:auto !important;
    }

    #authSection .brand-header {
      z-index:4 !important;
      pointer-events:none !important;
    }

    #authSection .brand-header .login-emblem-button,
    #authSection .brand-header h1 {
      pointer-events:auto !important;
    }

    #authSection .login-card-tools,
    #authSection .login-access-note,
    #authSection #loginForm,
    #authSection .login-new-account,
    #authSection .login-legal,
    #authSection #signupForm {
      position:relative !important;
      z-index:8 !important;
      pointer-events:auto !important;
    }

    #authSection #loginForm {
      width:100% !important;
      min-width:0 !important;
    }

    #authSection #loginForm input,
    #authSection #loginForm select,
    #authSection #loginForm button,
    #authSection #loginForm label,
    #authSection #loginForm .password-field,
    #authSection #loginForm .login-utility-row {
      pointer-events:auto !important;
    }

    #authSection #loginForm button,
    #authSection #loginForm input,
    #authSection #loginForm select {
      touch-action:manipulation;
    }

    #authSection #loginForm > .submit-btn {
      position:relative !important;
      z-index:9 !important;
      pointer-events:auto !important;
    }

    #authSection .login-info-runner {
      pointer-events:none !important;
    }

    @media (max-width:640px) {
      #authSection > .auth-card {
        width:min(calc(100vw - 24px),520px) !important;
        max-width:520px !important;
        min-width:0 !important;
        overflow:visible !important;
      }

      #authSection #loginForm > .submit-btn {
        width:100% !important;
        max-width:none !important;
        min-height:48px !important;
      }

      #authSection #loginForm input:not([type="checkbox"]):not([type="radio"]),
      #authSection #loginForm select {
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
      }

      #authSection .password-field {
        width:100% !important;
        min-width:0 !important;
      }
    }


    /* Account positions: readable native menu groups and consistent team labels. */
    #accountRole { min-height:48px; border-radius:12px; border:1px solid rgba(148,190,229,.45); font-weight:600; padding:12px 14px; color-scheme:dark; }
    #accountRole optgroup { background-color:#172b48; color:#bcd7ed; font-weight:700; }
    #accountRole option { background-color:#0e2140; color:#f1f7fd; font-weight:400; }
    #accountRole:focus-visible { outline:2px solid #7dd3fc; outline-offset:3px; }
    .account-role-description { display:block; margin-top:9px; line-height:1.55; color:var(--text-muted); }
    #accountsTab .card-header-bar .badge-tag { letter-spacing:.04em; font-size:.68rem; }
    #accountsList .item-row { align-items:flex-start; gap:16px; padding:18px; border-radius:14px; }
    #accountsList .item-row > div:first-child { flex:1 1 260px; min-width:0; overflow-wrap:anywhere; }
    #accountsList .item-row > div:last-child { flex:0 1 auto; }
    #accountsList .badge-tag { margin:5px 0 0 6px; font-size:.72rem; letter-spacing:.02em; }
    body.light-mode #accountRole { color-scheme:light; }
    body.light-mode #accountRole:focus-visible { outline-color:#0369a1; }
    body.light-mode #accountRole optgroup { background-color:#e6eff7; color:#244564; }
    body.light-mode #accountRole option { background-color:#f7fafc; color:#152d43; }
    @media (max-width:640px) { #accountsList .item-row { flex-wrap:wrap; } #accountsList .item-row > div:last-child { width:100%; } }

.education-stage-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.education-tool-host { display:grid; gap:18px; min-width:0; }
.education-tool-host > * { min-width:0; }

    /* Login card: one icy-blue neon segment travels continuously around the rim. */
    @property --login-neon-angle {
      syntax: '<angle>';
      inherits: false;
      initial-value: 0deg;
    }

    #authSection > .auth-card {
      isolation:isolate;
    }

    #authSection > .auth-card::after {
      content:"";
      position:absolute;
      inset:-2px;
      z-index:3;
      pointer-events:none;
      border-radius:24px;
      padding:2px;
      background:conic-gradient(
        from var(--login-neon-angle),
        transparent 0deg 330deg,
        rgba(56,189,248,.18) 334deg,
        rgba(56,189,248,.95) 340deg,
        #7dd3fc 346deg,
        #e6fbff 350deg,
        #7dd3fc 354deg,
        rgba(56,189,248,.92) 358deg,
        transparent 360deg
      );
      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      -webkit-mask-composite:xor;
      mask-composite:exclude;
      filter:
        drop-shadow(0 0 5px rgba(56,189,248,.95))
        drop-shadow(0 0 12px rgba(125,211,252,.68));
      animation:loginIceOrbit 3.2s linear infinite;
    }

    @keyframes loginIceOrbit {
      to { --login-neon-angle:360deg; }
    }

    @media (max-width:640px) {
      #authSection > .auth-card::after { border-radius:20px; }
    }

    @media (prefers-reduced-motion:reduce) {
      #authSection > .auth-card::after {
        animation:none;
        --login-neon-angle:346deg;
      }
    }