*,
      *::before,
      *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      :root {
        /* Modern Aurora Dark Theme */
        --bg-base: #0f172a; /* Deep Slate */
        --bg-panel: rgba(30, 41, 59, 0.6);
        --bg-panel-hover: rgba(30, 41, 59, 0.8);
        --border: rgba(255, 255, 255, 0.08);
        --border-bright: rgba(255, 255, 255, 0.15);

        --text-main: #f8fafc;
        --text-muted: #94a3b8;
        --text-dim: #475569;

        --accent: #8b5cf6; /* Violet */
        --mastery: #fbbf24; /* Amber */
        --vanguard: #c084fc; /* Lavender */

        --font-display: "Outfit", sans-serif;
        --font-body: "Inter", sans-serif;
        --font-mono: "JetBrains Mono", monospace;

        --radius-sm: 8px;
        --radius-md: 16px;
        --radius-lg: 24px;
        --radius-pill: 9999px;
      }

      html,
      body {
        height: 100%;
      }

      body {
        background-color: var(--bg-base);
        color: var(--text-main);
        font-family: var(--font-body);
        overflow-x: hidden;
        min-height: 100vh;
        position: relative;
        -webkit-font-smoothing: antialiased;
      }

      /* ── AMBIENT AURORA GLOWS ── */
      .ambient-tl,
      .ambient-br,
      .ambient-tr {
        position: fixed;
        width: 80vw;
        height: 80vw;
        max-width: 800px;
        max-height: 800px;
        border-radius: 50%;
        filter: blur(120px);
        z-index: 0;
        pointer-events: none;
        opacity: 0.4;
        animation: float-glow 20s ease-in-out infinite alternate;
      }
      .ambient-tl {
        top: -20%;
        left: -10%;
        background: radial-gradient(
          circle,
          rgba(56, 189, 248, 0.15),
          transparent 70%
        );
      }
      .ambient-tr {
        top: -10%;
        right: -10%;
        background: radial-gradient(
          circle,
          rgba(192, 132, 252, 0.15),
          transparent 70%
        );
        animation-delay: -5s;
      }
      .ambient-br {
        bottom: -20%;
        right: 10%;
        background: radial-gradient(
          circle,
          rgba(139, 92, 246, 0.1),
          transparent 70%
        );
        animation-delay: -10s;
      }

      @keyframes float-glow {
        0% {
          transform: translate(0, 0) scale(1);
        }
        100% {
          transform: translate(5%, 5%) scale(1.1);
        }
      }

      /* ── TICKER TAPE ── */
      .ticker-wrap {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 36px;
        background: rgba(15, 23, 42, 0.8);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--border);
        overflow: hidden;
        z-index: 100;
        display: flex;
        align-items: center;
      }
      .ticker-label {
        flex-shrink: 0;
        background: var(--text-main);
        color: var(--bg-base);
        font-family: var(--font-display);
        font-size: 0.75rem;
        font-weight: 700;
        padding: 0 16px;
        height: 100%;
        display: flex;
        align-items: center;
        letter-spacing: 0.1em;
        border-bottom-right-radius: var(--radius-sm);
      }
      .ticker-track {
        flex: 1;
        overflow: hidden;
        position: relative;
      }
      .ticker-inner {
        display: inline-block;
        white-space: nowrap;
        font-family: var(--font-mono);
        font-size: 0.75rem;
        color: var(--text-muted);
        letter-spacing: 0.05em;
        animation: ticker-scroll 50s linear infinite;
        padding-left: 100%;
      }
      @keyframes ticker-scroll {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-50%);
        }
      }
      .ticker-inner .t-accent {
        color: var(--text-main);
        font-weight: 700;
      }
      .ticker-inner .t-sep {
        color: var(--text-dim);
        margin: 0 20px;
        font-weight: 300;
      }

      .page-wrap {
        position: relative;
        z-index: 1;
        max-width: 1600px;
        margin: 0 auto;
        padding: 72px 40px 60px;
      }

      /* ── GLASS PANEL MIXIN ── */
      .panel {
        background: var(--bg-panel);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        position: relative;
        overflow: hidden;
      }

      /* ══════════════════════════════════════════
       HEADER
    ══════════════════════════════════════════ */
      .nexus-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 32px;
        gap: 24px;
        flex-wrap: wrap;
      }

      .brand {
        display: flex;
        align-items: center;
        gap: 20px;
      }

      .brand-sigil {
        width: 56px;
        height: 56px;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.1),
          rgba(255, 255, 255, 0)
        );
        border: 1px solid var(--border-bright);
        border-radius: var(--radius-md);
        display: grid;
        place-items: center;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
      }
      .brand-sigil i {
        font-size: 24px;
        background: linear-gradient(135deg, #fff, var(--text-muted));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .brand-text h1 {
        font-family: var(--font-display);
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        color: var(--text-main);
        line-height: 1;
      }
      .brand-text p {
        font-family: var(--font-body);
        font-size: 0.85rem;
        color: var(--text-muted);
        letter-spacing: 0.05em;
        margin-top: 4px;
      }

      /* ─── BOTTOM-LEFT COUNTDOWN WIDGET ─── */
      @keyframes cdPulse { 0%,100%{opacity:1} 50%{opacity:0.2} }
      @keyframes cdGlow  {
        0%,100% { box-shadow: 0 0 18px rgba(139,92,246,0.18), 0 8px 32px rgba(0,0,0,0.5); }
        50%     { box-shadow: 0 0 34px rgba(139,92,246,0.38), 0 8px 32px rgba(0,0,0,0.5); }
      }
      .header-right {
        position: fixed; bottom: 24px; left: 24px; z-index: 9998;
        background: rgba(15,23,42,0.82);
        border: 1px solid rgba(139,92,246,0.22);
        border-top: 1px solid rgba(139,92,246,0.5);
        border-radius: 12px;
        padding: 10px 14px 9px;
        backdrop-filter: blur(20px) saturate(1.4);
        -webkit-backdrop-filter: blur(20px) saturate(1.4);
        animation: cdGlow 3s ease-in-out infinite;
        min-width: 142px;
      }
      .clock-header-label {
        font-family: var(--font-display);
        font-size: 0.5rem;
        letter-spacing: 0.2em;
        color: rgba(139,92,246,0.7);
        text-transform: uppercase;
        margin-bottom: 7px;
      }
      .clock-slots {
        display: flex; align-items: flex-end; gap: 4px; justify-content: center;
      }
      .clock-unit { display: flex; flex-direction: column; align-items: center; gap: 2px; }
      .clock-time {
        font-family: var(--font-display);
        font-size: 1.15rem; line-height: 1;
        color: var(--text-main); letter-spacing: 0.04em;
        text-shadow: 0 0 8px rgba(139,92,246,0.7), 0 0 18px rgba(139,92,246,0.25);
      }
      .clock-unit-lbl {
        font-family: var(--font-mono); font-size: 0.4rem;
        letter-spacing: 0.16em; color: var(--text-dim);
        text-transform: uppercase;
      }
      .clock-sep {
        font-family: var(--font-display); font-size: 0.95rem;
        color: var(--accent); opacity: 0.5; margin-bottom: 3px;
        animation: cdPulse 1s step-start infinite;
      }
      .clock-bar-wrap {
        margin-top: 8px; height: 1px; border-radius: 2px;
        background: rgba(139,92,246,0.1); overflow: hidden;
      }
      .clock-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--accent), #c084fc);
        border-radius: 2px; transition: width 1s linear;
        box-shadow: 0 0 4px var(--accent);
      }
      .clock-sublabel {
        margin-top: 5px; text-align: center;
        font-family: var(--font-mono); font-size: 0.37rem;
        letter-spacing: 0.18em; color: rgba(139,92,246,0.35);
        text-transform: uppercase;
      }
      .sys-status {
        display: flex; align-items: center; justify-content: center;
        gap: 5px; margin-top: 7px;
        border-top: 1px solid rgba(255,255,255,0.05); padding-top: 7px;
        font-family: var(--font-mono); font-size: 0.4rem;
        color: var(--text-dim); letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .pulse-ring {
        width: 5px; height: 5px; border-radius: 50%;
        background: #34d399; flex-shrink: 0;
        box-shadow: 0 0 0 0 rgba(52,211,153,0.4);
        animation: ring-pulse 2s ease-in-out infinite;
      }
      @keyframes ring-pulse {
        0%   { box-shadow: 0 0 0 0 rgba(52,211,153,0.6); }
        70%  { box-shadow: 0 0 0 5px transparent; }
        100% { box-shadow: 0 0 0 0 transparent; }
      }
      @media (max-width: 480px) {
        .header-right { bottom: 12px; left: 12px; padding: 8px 12px; min-width: 130px; border-radius: 10px; }
        .clock-time { font-size: 1.05rem; }
      }

      /* ─── BOTTOM-RIGHT DAY TIMER ─── */
      @keyframes yellowGlow {
        0%,100% { box-shadow: 0 0 18px rgba(255,233,0,0.16), 0 8px 32px rgba(0,0,0,0.5); }
        50%     { box-shadow: 0 0 34px rgba(255,233,0,0.36), 0 8px 32px rgba(0,0,0,0.5); }
      }
      .day-timer-widget {
        position: fixed; bottom: 24px; right: 24px; z-index: 9998;
        background: rgba(20, 18, 0, 0.82);
        border: 1px solid rgba(255,233,0,0.22);
        border-top: 1px solid rgba(255,233,0,0.5);
        border-radius: 12px;
        padding: 10px 14px 9px;
        backdrop-filter: blur(20px) saturate(1.4);
        -webkit-backdrop-filter: blur(20px) saturate(1.4);
        animation: yellowGlow 3s ease-in-out infinite;
        min-width: 142px;
      }
      .dt-header-label {
        font-family: var(--font-display);
        font-size: 0.5rem;
        letter-spacing: 0.22em;
        color: #ffe900;
        text-transform: uppercase;
        margin-bottom: 8px;
      }
      .dt-slots {
        display: flex; align-items: flex-end; gap: 5px; justify-content: center;
      }
      .dt-unit { display: flex; flex-direction: column; align-items: center; gap: 2px; }
      .dt-num {
        font-family: var(--font-display);
        font-size: 1.15rem; line-height: 1;
        color: var(--text-main); letter-spacing: 0.05em;
        text-shadow: 0 0 10px rgba(255,233,0,0.85), 0 0 20px rgba(255,233,0,0.3);
      }
      .dt-lbl {
        font-family: var(--font-mono); font-size: 0.4rem;
        letter-spacing: 0.2em; color: rgba(255,233,0,0.45);
        text-transform: uppercase;
      }
      .dt-sep {
        font-family: var(--font-display); font-size: 0.95rem;
        color: #ffe900; opacity: 0.5; margin-bottom: 3px;
      }
      .dt-bar-wrap {
        margin-top: 8px; height: 1px; border-radius: 2px;
        background: rgba(255,233,0,0.08); overflow: hidden;
      }
      .dt-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, #ffe900, #ffb800);
        border-radius: 2px; transition: width 1s linear;
        box-shadow: 0 0 6px #ffe900;
      }
      .dt-sublabel {
        margin-top: 5px; text-align: center;
        font-family: var(--font-mono); font-size: 0.37rem;
        letter-spacing: 0.2em; color: rgba(255,233,0,0.4);
        text-transform: uppercase;
      }
      @media (max-width: 480px) {
        .day-timer-widget { bottom: 12px; right: 12px; padding: 8px 12px; min-width: 128px; border-radius: 10px; }
        .dt-num { font-size: 1.05rem; }
      }

      /* ══════════════════════════════════════════
       MINI WIDGETS (header)
    ══════════════════════════════════════════ */
      .header-mini-widgets {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
        justify-content: center;
        flex-wrap: wrap;
      }
      .mini-widget {
        display: flex;
        flex-direction: column;
        gap: 5px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 10px 16px;
        min-width: 130px;
        background: var(--bg-panel);
        backdrop-filter: blur(12px);
        transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
        position: relative; overflow: hidden;
      }
      .mini-widget::before {
        content: '';
        position: absolute; top: 0; left: 0; right: 0; height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
      }
      .mini-widget:hover {
        border-color: var(--border-bright);
        background: var(--bg-panel-hover);
        box-shadow: 0 4px 20px rgba(0,0,0,0.2);
      }
      .mini-widget-name {
        font-family: var(--font-display);
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        line-height: 1;
      }
      .mini-widget-name.mastery-color  { color: var(--mastery);  }
      .mini-widget-name.vanguard-color { color: var(--vanguard); }
      @media (max-width: 640px) {
        #mwMasteryWidget, #mwVanguardWidget { cursor: pointer; -webkit-tap-highlight-color: transparent; }
        #mwMasteryWidget:active, #mwVanguardWidget:active { opacity: 0.7; transform: scale(0.97); }
      }
      .mini-widget-name.streak-color   { color: #f59e0b; }
      .mini-widget.streak-widget {
        background: linear-gradient(135deg, rgba(245,158,11,0.08) 0%, rgba(251,191,36,0.04) 100%);
        border-color: rgba(245,158,11,0.25);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
      }
      .mini-widget.streak-widget:hover {
        background: linear-gradient(135deg, rgba(245,158,11,0.14) 0%, rgba(251,191,36,0.08) 100%);
        border-color: rgba(245,158,11,0.45);
        box-shadow: 0 4px 24px rgba(245,158,11,0.12);
      }
      .mini-widget.streak-widget::after {
        content: '';
        position: absolute; inset: 0;
        background: radial-gradient(ellipse at 80% 20%, rgba(251,191,36,0.08) 0%, transparent 65%);
        pointer-events: none;
      }
      .mini-widget.streak-widget .streak-sweep {
        position: absolute; inset: 0; overflow: hidden;
        border-radius: inherit; pointer-events: none; z-index: 1;
      }
      .mini-widget.streak-widget .streak-sweep::before {
        content: '';
        position: absolute; top: 0; bottom: 0;
        width: 40%; left: -40%;
        background: linear-gradient(
          105deg,
          transparent 20%,
          rgba(251,191,36,0.18) 45%,
          rgba(255,255,255,0.08) 50%,
          rgba(251,191,36,0.18) 55%,
          transparent 80%
        );
        animation: streakSweep 4s ease-in-out infinite;
        filter: blur(2px);
      }
      @keyframes streakSweep {
        0%   { left: -40%; }
        45%  { left: 130%; }
        50%  { left: 130%; }
        95%  { left: -40%; }
        100% { left: -40%; }
      }
      .streak-icon {
        position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
        font-size: 1.5rem; opacity: 0.13; pointer-events: none;
        filter: drop-shadow(0 0 6px rgba(245,158,11,0.6));
      }
      .mini-widget-name.streak-color i {
        margin-right: 5px;
        opacity: 0.9;
        filter: drop-shadow(0 0 4px rgba(245,158,11,0.8));
      }
      .mini-widget-name.planning-color { color: #38bdf8; }
      .mini-widget-name.tracking-color { color: #e879f9; }
      .mini-widget-name.ontrack-color  { color: #9ca3af; }

      .mini-widget-stat {
        font-family: var(--font-mono);
        font-size: 0.88rem;
        color: var(--text-main);
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
      }
      .mini-widget-bar-wrap {
        height: 3px;
        background: rgba(255,255,255,0.06);
        border-radius: var(--radius-pill);
        overflow: hidden;
        margin-top: 2px;
      }
      .mini-widget-bar {
        height: 100%;
        border-radius: var(--radius-pill);
        transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      .mini-widget-bar.mastery-bar  { background: var(--mastery); }
      .mini-widget-bar.vanguard-bar { background: var(--vanguard); }
      .mini-widget-bar.streak-bar   { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
      .mini-widget-bar.planning-bar { background: linear-gradient(90deg, #38bdf8, #0284c7); }
      .mini-widget-bar.tracking-bar { background: linear-gradient(90deg, #f0abfc, #e879f9); }
      .mini-widget-bar.ontrack-bar  { background: linear-gradient(90deg, #d1d5db, #6b7280); }

      .mini-widget-divider {
        width: 1px; height: 48px;
        background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.13), transparent);
        flex-shrink: 0; align-self: center; margin: 0 4px;
      }

      /* ══════════════════════════════════════════
       TIME MATRIX
    ══════════════════════════════════════════ */
      .time-matrix {
        padding: 28px 36px;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        gap: 40px;
        flex-wrap: wrap;
      }

      .today-widget {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-shrink: 0;
        position: relative;
        padding-right: 40px;
        border-right: 1px solid var(--border);
      }

      .today-date {
        font-family: var(--font-display);
        font-size: 4rem;
        line-height: 1;
        font-weight: 700;
        color: var(--date-color, var(--text-main));
        transition: color 0.5s ease;
      }

      .today-meta {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .today-day {
        font-family: var(--font-display);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text-main);
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }
      .today-month {
        font-family: var(--font-body);
        font-size: 0.9rem;
        color: var(--text-muted);
        font-weight: 500;
      }

      .month-timeline {
        flex: 1;
        min-width: 260px;
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .timeline-header {
        display: flex;
        justify-content: space-between;
        font-family: var(--font-body);
        font-size: 0.85rem;
        color: var(--text-muted);
        font-weight: 500;
      }
      .timeline-header span:last-child {
        color: var(--text-main);
        font-weight: 600;
      }
      .bricks-container {
        display: flex;
        gap: 6px;
        width: 100%;
        align-items: center;
      }
      .brick {
        flex: 1;
        height: 8px;
        border-radius: var(--radius-pill);
        background: rgba(255, 255, 255, 0.05);
        transition: all 0.4s ease;
      }
      .brick.past {
        background: rgba(255, 255, 255, 0.2);
      }
      .brick.current {
        transform: scaleY(1.5);
        z-index: 2;
      }
      .brick.sunday {
        position: relative;
      }
      .brick.sunday::before {
        content: "";
        position: absolute;
        top: -7px;
        left: 50%;
        transform: translateX(-50%);
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.35);
      }
      .brick.sunday.past::before {
        background: rgba(255, 255, 255, 0.55);
      }
      .brick.sunday.current::before {
        background: var(--date-color, var(--text-main));
        box-shadow: 0 0 6px var(--date-color, var(--text-main));
      }

      /* ══════════════════════════════════════════
       READINESS BANNER — v2 (Command Strip)
    ══════════════════════════════════════════ */
      .readiness-banner {
        position: relative;
        margin-bottom: 24px;
        padding: 0;
        display: grid;
        grid-template-columns: 160px 1fr 220px;
        align-items: stretch;
        overflow: hidden;
        clip-path: polygon(
          0 0,
          calc(100% - 36px) 0,
          100% 36px,
          100% 100%,
          36px 100%,
          0 calc(100% - 36px)
        );
      }

      /* Scan-line texture */
      .readiness-banner::before {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
          180deg,
          transparent 0px,
          transparent 2px,
          rgba(255, 255, 255, 0.012) 2px,
          rgba(255, 255, 255, 0.012) 3px
        );
        pointer-events: none;
        z-index: 0;
      }

      /* Diagonal corner accent — top-right */
      .readiness-banner::after {
        content: '';
        position: absolute;
        top: -1px;
        right: -1px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 40px 40px 0;
        border-color: transparent rgba(255, 255, 255, 0.1) transparent transparent;
        pointer-events: none;
        z-index: 3;
      }

      /* ─── Left column: score ─── */
      .rb-score-col {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 32px 24px;
        border-right: 1px solid var(--border);
        z-index: 1;
        gap: 6px;
      }

      .rb-score-col::before {
        content: '';
        position: absolute;
        left: 0;
        top: 15%;
        bottom: 15%;
        width: 3px;
        background: linear-gradient(
          180deg,
          transparent,
          #38bdf8 35%,
          #c084fc 75%,
          transparent
        );
        border-radius: 2px;
        opacity: 0.75;
      }

      .rb-score-eyebrow {
        font-family: var(--font-mono);
        font-size: 0.55rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--text-dim);
        opacity: 0.6;
      }

      #gaugePct {
        font-family: var(--font-display);
        font-size: 3rem;
        font-weight: 800;
        letter-spacing: -2px;
        line-height: 1;
      }

      .rb-score-bar-wrap {
        width: 78%;
        height: 3px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 2px;
        overflow: hidden;
        margin-top: 6px;
      }

      .rb-score-bar-fill {
        height: 100%;
        width: 0%;
        border-radius: 2px;
        transition: width 1.8s cubic-bezier(0.4, 0, 0.2, 1),
                    background 0.6s ease;
      }

      /* ─── Center column: meta ─── */
      .rb-meta-col {
        padding: 28px 36px;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .rb-eyebrow {
        font-family: var(--font-mono);
        font-size: 0.62rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--text-dim);
        opacity: 0.55;
        margin-bottom: 8px;
      }

      /* ─── Right column: stats ─── */
      .rb-stats-col {
        z-index: 1;
        border-left: 1px solid var(--border);
      }

      .readiness-title {
        font-family: var(--font-display);
        font-size: 2.2rem;
        font-weight: 800;
        letter-spacing: -0.04em;
        line-height: 1;
        margin-bottom: 20px;
      }

      .mini-bars {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .mini-bar-item {
        display: grid;
        grid-template-columns: 62px 1fr 40px;
        align-items: center;
        gap: 10px;
      }

      .mini-bar-label {
        font-family: var(--font-mono);
        font-size: 0.66rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--text-muted);
      }

      .mini-bar-track {
        height: 3px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 2px;
        position: relative;
        overflow: visible;
      }

      .mini-bar-fill {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        border-radius: 2px;
        transition: width 1.8s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .mini-bar-fill::after {
        content: '';
        position: absolute;
        right: -1px;
        top: 50%;
        transform: translateY(-50%);
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: inherit;
        filter: blur(4px);
        opacity: 0.9;
      }

      .mini-bar-pct {
        font-family: var(--font-mono);
        font-size: 0.7rem;
        font-weight: 700;
        text-align: right;
      }

      .readiness-stats {
        display: flex;
        flex-direction: column;
        height: 100%;
      }

      .rs-item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24px;
        gap: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
      }

      .rs-item:last-child {
        border-bottom: none;
      }

      .rs-lbl {
        font-family: var(--font-mono);
        font-size: 0.6rem;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--text-dim);
        opacity: 0.65;
        white-space: nowrap;
      }

      .rs-val {
        font-family: var(--font-display);
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--text-main);
        line-height: 1;
      }

      /* ══════════════════════════════════════════
       DAY DELTA WIDGET
    ══════════════════════════════════════════ */
      .delta-widget {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-left: 40px;
        border-left: 1px solid var(--border);
        position: relative;
        flex-shrink: 0;
      }
      .delta-label {
        font-family: var(--font-body);
        font-size: 0.8rem;
        color: var(--text-muted);
        font-weight: 500;
      }
      .delta-main {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .delta-arrow {
        font-size: 1.2rem;
        line-height: 1;
      }
      .delta-pct {
        font-family: var(--font-display);
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 1;
      }
      .delta-sub {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .delta-sub-row {
        font-family: var(--font-mono);
        font-size: 0.75rem;
        color: var(--text-muted);
      }
      .delta-sub-row span {
        font-weight: 700;
      }
      .delta-bars {
        display: flex;
        gap: 10px;
        align-items: flex-end;
        margin-top: 4px;
      }
      .delta-bar-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
      }
      .delta-bar-pair {
        display: flex;
        gap: 3px;
        align-items: flex-end;
        height: 32px;
      }
      .delta-bar-seg {
        width: 6px;
        border-radius: var(--radius-pill);
        opacity: 0.3;
        transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .delta-bar-seg.today {
        opacity: 1;
      }
      .delta-bar-lbl {
        font-family: var(--font-body);
        font-size: 0.65rem;
        color: var(--text-dim);
        font-weight: 600;
      }

      /* ══════════════════════════════════════════
       APP GRID — Redesigned Cards
    ══════════════════════════════════════════ */
      .app-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
        gap: 20px;
        margin-bottom: 48px;
      }

      .app-card {
        background: linear-gradient(
          145deg,
          rgba(var(--card-rgb), 0.07) 0%,
          rgba(15, 23, 42, 0.9) 60%
        );
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border: 1px solid rgba(var(--card-rgb), 0.2);
        border-radius: var(--radius-lg);
        display: flex;
        flex-direction: column;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
      }

      .app-card:hover {
        transform: translateY(-3px);
        border-color: rgba(var(--card-rgb), 0.4);
        box-shadow:
          0 20px 52px rgba(0, 0, 0, 0.35),
          0 0 60px rgba(var(--card-rgb), 0.07);
      }

      /* Gradient accent line at top */
      .app-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(
          90deg,
          transparent 0%,
          var(--card-color) 30%,
          var(--card-color) 70%,
          transparent 100%
        );
        opacity: 0.9;
      }

      /* Large decorative background glyph */
      .card-bg-glyph {
        position: absolute;
        right: -10px;
        bottom: -16px;
        font-size: 9rem;
        color: var(--card-color);
        opacity: 0.04;
        pointer-events: none;
        line-height: 1;
        transition: opacity 0.3s;
      }
      .app-card:hover .card-bg-glyph {
        opacity: 0.08;
      }

      /* ─── Card Band (header) ─── */
      .card-band {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24px 28px 20px;
        border-bottom: 1px solid rgba(var(--card-rgb), 0.1);
      }

      .card-band-left {
        display: flex;
        align-items: center;
        gap: 14px;
      }

      .card-icon-wrap {
        width: 44px;
        height: 44px;
        border-radius: var(--radius-md);
        background: rgba(var(--card-rgb), 0.12);
        border: 1px solid rgba(var(--card-rgb), 0.25);
        display: grid;
        place-items: center;
        font-size: 18px;
        color: var(--card-color);
        flex-shrink: 0;
      }

      .card-title {
        font-family: var(--font-display);
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--text-main);
        letter-spacing: -0.01em;
        line-height: 1.2;
      }

      .card-subtitle {
        font-family: var(--font-body);
        font-size: 0.78rem;
        color: var(--text-muted);
        margin-top: 2px;
      }

      .card-open-btn {
        width: 34px;
        height: 34px;
        border-radius: var(--radius-sm);
        background: rgba(var(--card-rgb), 0.08);
        border: 1px solid rgba(var(--card-rgb), 0.2);
        display: grid;
        place-items: center;
        color: var(--card-color);
        text-decoration: none;
        font-size: 0.82rem;
        transition: all 0.2s;
        flex-shrink: 0;
      }
      .card-open-btn:hover {
        background: var(--card-color);
        color: #0f172a;
        border-color: var(--card-color);
        box-shadow: 0 0 18px rgba(var(--card-rgb), 0.45);
      }

      /* ─── Stats Row ─── */
      .card-stats-row {
        display: flex;
        align-items: stretch;
      }

      .card-stat {
        flex: 1;
        padding: 22px 16px;
        text-align: center;
        position: relative;
      }

      .card-stat + .card-stat {
        border-left: 1px solid rgba(255, 255, 255, 0.05);
      }

      .card-stat-num {
        font-family: var(--font-display);
        font-size: 2rem;
        font-weight: 800;
        color: var(--text-main);
        line-height: 1;
        letter-spacing: -0.04em;
      }

      .card-stat-num.accent {
        color: var(--card-color);
        text-shadow: 0 0 24px rgba(var(--card-rgb), 0.4);
      }

      .card-stat-sub {
        font-family: var(--font-body);
        font-size: 0.68rem;
        color: var(--text-muted);
        font-weight: 500;
        margin-top: 6px;
        text-transform: uppercase;
        letter-spacing: 0.07em;
      }

      /* ─── Progress section ─── */
      .card-prog {
        padding: 18px 28px;
        border-top: 1px solid rgba(255, 255, 255, 0.04);
      }

      .card-prog-header {
        display: flex;
        justify-content: space-between;
        font-family: var(--font-body);
        font-size: 0.78rem;
        color: var(--text-muted);
        font-weight: 500;
        margin-bottom: 10px;
      }

      .card-prog-bar {
        height: 5px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: var(--radius-pill);
        overflow: hidden;
      }

      .card-prog-fill {
        height: 100%;
        border-radius: var(--radius-pill);
        background: var(--card-color);
        box-shadow: 0 0 10px rgba(var(--card-rgb), 0.5);
        transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
        min-width: 0;
      }

      /* ─── Chips ─── */
      .card-chips {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        padding: 0 28px 22px;
      }

      .chip {
        font-family: var(--font-body);
        font-size: 0.68rem;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: var(--radius-pill);
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.07);
        color: var(--text-dim);
        transition: all 0.2s;
      }

      .chip.done {
        background: rgba(var(--card-rgb), 0.12);
        border-color: rgba(var(--card-rgb), 0.3);
        color: var(--card-color);
      }

      .chip.miss {
        opacity: 0.4;
      }

      .no-data {
        font-family: var(--font-body);
        font-size: 0.9rem;
        color: var(--text-muted);
        padding: 32px 28px;
        text-align: center;
        border-top: 1px dashed rgba(255, 255, 255, 0.06);
      }



      /* Nexus Toast */
      #nexusToast {
        position: fixed;
        bottom: 80px;
        left: 50%;
        transform: translateX(-50%) translateY(16px);
        background: rgba(15,23,42,0.95);
        border: 1px solid rgba(56,189,248,0.4);
        color: #38bdf8;
        padding: 11px 26px;
        border-radius: var(--radius-pill);
        font-family: var(--font-mono);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        backdrop-filter: blur(20px);
        opacity: 0;
        transition: opacity 0.35s ease, transform 0.35s ease;
        z-index: 9999;
        pointer-events: none;
        white-space: nowrap;
        box-shadow: 0 0 24px rgba(56,189,248,0.18), 0 8px 32px rgba(0,0,0,0.4);
      }

      #nexusToast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }

      /* ══════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════ */
      .nexus-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 24px;
        border-top: 1px solid var(--border);
        font-family: var(--font-body);
        font-size: 0.85rem;
        color: var(--text-muted);
        flex-wrap: wrap;
        gap: 16px;
        font-weight: 500;
      }
      .footer-left {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      /* ── Purge button ──────────────────────────────────────────── */
      .purge-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 10px;
        background: rgba(244,63,94,0.07);
        border: 1px solid rgba(244,63,94,0.25);
        border-radius: 4px;
        color: rgba(244,63,94,0.5);
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.09em;
        cursor: pointer;
        transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
        font-family: inherit;
        line-height: 1;
      }
      .purge-btn:hover {
        background: rgba(244,63,94,0.16);
        border-color: rgba(244,63,94,0.65);
        color: #f43f5e;
        box-shadow: 0 0 14px rgba(244,63,94,0.28);
      }
      .purge-btn:active { transform: scale(0.96); }

      /* ── Purge confirmation modal ──────────────────────────────── */
      .purge-modal {
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: rgba(0,0,0,0.72);
        backdrop-filter: blur(5px);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .purge-modal-panel {
        background: #0d1017;
        border: 1px solid rgba(244,63,94,0.35);
        border-radius: 14px;
        padding: 38px 44px;
        max-width: 420px;
        width: 90%;
        text-align: center;
        box-shadow: 0 0 70px rgba(244,63,94,0.14), 0 24px 64px rgba(0,0,0,0.65);
        animation: purge-pop 0.18s ease-out;
      }
      @keyframes purge-pop {
        from { transform: scale(0.92); opacity: 0; }
        to   { transform: scale(1);    opacity: 1; }
      }
      .purge-modal-icon {
        font-size: 2.6rem;
        color: #f43f5e;
        margin-bottom: 16px;
        filter: drop-shadow(0 0 14px rgba(244,63,94,0.55));
      }
      .purge-modal-title {
        font-size: 0.95rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        color: #f43f5e;
        margin-bottom: 14px;
      }
      .purge-modal-msg {
        font-size: 0.8rem;
        color: var(--text-muted);
        line-height: 1.65;
        margin-bottom: 30px;
      }
      .purge-modal-msg strong { color: var(--text-base); }
      .purge-modal-actions {
        display: flex;
        gap: 12px;
        justify-content: center;
      }
      .purge-modal-cancel {
        padding: 8px 24px;
        background: transparent;
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: 7px;
        color: var(--text-dim);
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        transition: border-color 0.2s, color 0.2s;
        font-family: inherit;
      }
      .purge-modal-cancel:hover {
        border-color: rgba(255,255,255,0.3);
        color: var(--text-base);
      }
      .purge-modal-confirm {
        padding: 8px 24px;
        background: rgba(244,63,94,0.13);
        border: 1px solid rgba(244,63,94,0.45);
        border-radius: 7px;
        color: #f43f5e;
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        cursor: pointer;
        transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
        font-family: inherit;
      }
      .purge-modal-confirm:hover {
        background: rgba(244,63,94,0.28);
        border-color: #f43f5e;
        box-shadow: 0 0 18px rgba(244,63,94,0.32);
      }
      .purge-modal-confirm:active { transform: scale(0.97); }
      .purge-modal-confirm:disabled { opacity: 0.55; cursor: not-allowed; }

      .footer-right {
        display: flex;
        align-items: center;
        gap: 16px;
      }
      .pulse-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--text-muted);
        animation: pd-pulse 3s ease-in-out infinite;
      }
      @keyframes pd-pulse {
        0%,
        100% {
          opacity: 0.8;
        }
        50% {
          opacity: 0.3;
        }
      }

      /* ══════════════════════════════════════════
       NODE CANVAS (particle network)
    ══════════════════════════════════════════ */
      #nodeCanvas {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0.6;
      }

      /* ══════════════════════════════════════════
       WEEK ACTIVITY PANEL
    ══════════════════════════════════════════ */
      .week-panel {
        padding: 24px 32px;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        gap: 36px;
        flex-wrap: wrap;
      }

      .week-tab-btns {
        display: flex;
        gap: 10px;
        flex-shrink: 0;
      }

      .week-tab-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        padding: 16px 22px;
        border-radius: var(--radius-md);
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.02);
        cursor: pointer;
        transition: all 0.25s ease;
        min-width: 92px;
        font-family: var(--font-body);
        color: var(--text-dim);
        position: relative;
        overflow: hidden;
      }

      .week-tab-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--wtb-gradient, var(--wtb-color, transparent));
        opacity: 0;
        transition: opacity 0.25s ease;
      }

      .week-tab-btn:hover {
        border-color: var(--border-bright);
        color: var(--text-muted);
        transform: translateY(-2px);
      }

      .week-tab-btn.active {
        border-color: var(--wtb-color);
        color: var(--wtb-color);
        box-shadow:
          0 0 24px rgba(var(--wtb-rgb), 0.15),
          inset 0 0 20px rgba(var(--wtb-rgb), 0.05);
      }

      .week-tab-btn.active::before {
        opacity: 0.07;
      }

      .wtb-icon {
        font-size: 1.5rem;
        transition: transform 0.25s ease, filter 0.25s ease;
        position: relative;
        z-index: 1;
      }

      .week-tab-btn.active .wtb-icon {
        transform: scale(1.1);
        filter: drop-shadow(0 0 8px var(--wtb-color));
      }

      .wtb-label {
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        position: relative;
        z-index: 1;
      }

      .wtb-count {
        font-family: var(--font-mono);
        font-size: 0.82rem;
        font-weight: 700;
        position: relative;
        z-index: 1;
        color: var(--text-dim);
        transition: color 0.25s;
      }

      .week-tab-btn.active .wtb-count {
        color: var(--wtb-color);
      }

      /* Stats section */
      .week-stats {
        flex: 1;
        min-width: 300px;
      }

      .week-stats-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
      }

      .week-stats-title {
        font-family: var(--font-body);
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.1em;
      }

      .week-day-row {
        display: flex;
        gap: 6px;
        margin-bottom: 16px;
      }

      .week-day-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
      }

      .week-day-label {
        font-family: var(--font-mono);
        font-size: 0.58rem;
        color: var(--text-dim);
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.05em;
      }

      .week-day-dot {
        width: 100%;
        height: 28px;
        border-radius: var(--radius-sm);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.06);
        transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        cursor: pointer;
      }
      .week-day-dot:hover:not(.future) {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.2);
        transform: scaleY(1.08);
      }
      .week-day-dot.done:hover:not(.future) {
        background: var(--week-color, var(--accent));
        opacity: 0.75;
      }

      .week-day-dot.done {
        background: var(--week-color, var(--accent));
        border-color: var(--week-color, var(--accent));
        box-shadow: 0 0 10px rgba(var(--week-rgb, 139, 92, 246), 0.35);
      }

      .week-day-dot.today {
        border: 2px solid rgba(255, 255, 255, 0.25);
      }

      .week-day-dot.today.done {
        border: 2px solid rgba(255, 255, 255, 0.7);
        box-shadow: 0 0 16px rgba(var(--week-rgb, 139, 92, 246), 0.55);
        transform: scaleY(1.15);
      }

      .week-day-dot.future {
        opacity: 0.3;
      }

      .week-bottom {
        display: flex;
        align-items: center;
        gap: 24px;
        flex-wrap: wrap;
      }

      .week-main-stat {
        display: flex;
        align-items: baseline;
        gap: 2px;
      }

      .week-stat-num {
        font-family: var(--font-display);
        font-size: 2.8rem;
        font-weight: 800;
        line-height: 1;
        transition: color 0.3s;
      }

      .week-stat-denom {
        font-family: var(--font-display);
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--text-dim);
      }

      .week-stat-lbl {
        font-family: var(--font-body);
        font-size: 0.72rem;
        color: var(--text-muted);
        margin-top: 3px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }

      .week-vs {
        display: flex;
        flex-direction: column;
        gap: 3px;
        padding-left: 24px;
        border-left: 1px solid var(--border);
      }

      .week-vs-label {
        font-family: var(--font-mono);
        font-size: 0.58rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--text-dim);
      }

      .week-vs-delta {
        font-family: var(--font-display);
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1;
        transition: color 0.3s;
      }

      .week-vs-prev {
        font-family: var(--font-mono);
        font-size: 0.68rem;
        color: var(--text-dim);
      }

      /* ══════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════ */
      @media (max-width: 960px) {
        .time-matrix {
          flex-direction: column;
          align-items: stretch;
          gap: 24px;
        }
        .today-widget {
          padding-right: 0;
          border-right: none;
          border-bottom: 1px solid var(--border);
          padding-bottom: 24px;
        }
        .delta-widget {
          padding-left: 0;
          border-left: none;
          border-top: 1px solid var(--border);
          padding-top: 24px;
        }
        .readiness-banner {
          grid-template-columns: 140px 1fr;
          clip-path: none;
          border-radius: var(--radius-md);
        }
        .rb-stats-col {
          grid-column: 1 / -1;
          border-left: none;
          border-top: 1px solid var(--border);
        }
        .readiness-stats {
          flex-direction: row;
          flex-wrap: wrap;
          height: auto;
          padding: 16px 24px;
          gap: 0;
        }
        .rs-item {
          flex: 1;
          min-width: 100px;
          padding: 8px 12px;
          border-bottom: none;
          border-right: 1px solid rgba(255,255,255,0.04);
          justify-content: flex-start;
          flex-direction: column;
          align-items: flex-start;
          gap: 4px;
        }
        .rs-item:last-child {
          border-right: none;
        }
      }
      @media (max-width: 640px) {
        .nexus-header {
          flex-direction: column;
          align-items: flex-start;
        }
        .ticker-wrap {
          display: none;
        }
        .page-wrap {
          padding: 20px 16px 40px;
        }
        .app-grid {
          grid-template-columns: 1fr;
        }
        .brand-text h1 { font-size: 1.5rem; }
        .header-mini-widgets {
          flex-wrap: wrap;
          justify-content: flex-start;
          gap: 8px;
        }
        .mini-widget { flex: 0 1 auto; }
        .mini-widget-divider { display: none; }
        .time-matrix { padding: 20px 16px; gap: 20px; }
        .today-date { font-size: 2.6rem; }
        .readiness-title { font-size: 1.5rem; }
        .rb-meta-col { padding: 18px 20px; }
        .mini-bar-item { grid-template-columns: 52px 1fr 36px; }
        .readiness-banner { grid-template-columns: 1fr; clip-path: none; border-radius: var(--radius-md); }
        .rb-score-col { border-right: none; border-bottom: 1px solid var(--border); padding: 20px 16px; }
        .rb-stats-col { border-left: none; border-top: 1px solid var(--border); }
        #gaugePct { font-size: 2rem; }
      }

      @media (max-width: 480px) {
        .page-wrap { padding: 16px 12px 32px; }
        .mini-widget { flex: 0 1 auto; }
        .mini-widget-divider { display: none; }
        .today-date { font-size: 2.2rem; }
        .time-matrix { padding: 16px 12px; }
        .nexus-header { gap: 12px; margin-bottom: 20px; }
        .brand-sigil { width: 40px; height: 40px; }
        .brand-sigil i { font-size: 18px; }
      }

      /* ── ACCESS BUTTON ── */
      .btn-signin-nexus {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 18px;
        font-family: var(--font-display);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        color: #fff;
        background: linear-gradient(135deg, rgba(139,92,246,0.25), rgba(192,132,252,0.15));
        border: 1px solid transparent;
        border-radius: 8px;
        cursor: pointer;
        overflow: hidden;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        background-clip: padding-box;
        box-shadow: 0 0 0 1px rgba(139,92,246,0.5), 0 0 14px rgba(139,92,246,0.25);
      }
      .btn-signin-nexus::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(139,92,246,0.5), rgba(192,132,252,0.35));
        opacity: 0;
        transition: opacity 0.2s ease;
      }
      .btn-signin-nexus:hover {
        transform: translateY(-1px);
        box-shadow: 0 0 0 1px rgba(192,132,252,0.7), 0 0 22px rgba(139,92,246,0.45), 0 4px 16px rgba(0,0,0,0.3);
      }
      .btn-signin-nexus:hover::before { opacity: 1; }
      .btn-signin-nexus:active { transform: translateY(0); }
      .btn-signin-nexus span, .btn-signin-nexus i { position: relative; z-index: 1; }
      .btn-signin-glow {
        position: absolute;
        top: 50%; left: 50%;
        width: 120%;
        aspect-ratio: 1;
        transform: translate(-50%, -50%);
        background: radial-gradient(circle, rgba(192,132,252,0.35) 0%, transparent 65%);
        animation: signin-pulse 2.4s ease-in-out infinite;
        pointer-events: none;
      }
      @keyframes signin-pulse {
        0%, 100% { opacity: 0.5; transform: translate(-50%,-50%) scale(0.85); }
        50%       { opacity: 1;   transform: translate(-50%,-50%) scale(1.1); }
      }
      /* greeting icon */
      .user-icon-btn {
        background: none;
        border: none;
        cursor: pointer;
        color: #c4b5fd;
        padding: 4px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s;
      }
      .user-icon-btn:hover {
        background: rgba(196, 181, 253, 0.15);
      }
      .user-email-popup {
        display: none;
        position: fixed;
        background: #1e1b2e;
        border: 1px solid #c4b5fd;
        color: #c4b5fd;
        font-family: var(--font-display);
        font-size: 0.9rem;
        font-weight: 600;
        padding: 8px 14px;
        border-radius: 8px;
        z-index: 9999;
        white-space: nowrap;
        box-shadow: 0 4px 20px rgba(0,0,0,0.4);
      }