@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ╔══════════════════════════════════════════════════════════════╗
   ║   NERVE DESIGN SYSTEM — nerve.css                            ║
   ║   CSS Custom Properties + Component Classes                   ║
   ║   Shared by all app pages via base.html                       ║
   ╚══════════════════════════════════════════════════════════════╝ */

:root {

  /* ═══════════════════════════════════════
     SEITE / BODY
     ═══════════════════════════════════════ */
  --page-bg:            #F0F2F5;
  --page-font:          'Inter', system-ui, sans-serif;
  --page-font-mono:     'JetBrains Mono', monospace;
  --page-text-color:    #1a1a1a;
  --page-text-secondary:#6B7280;
  --page-text-muted:    #9CA3AF;

  /* ═══════════════════════════════════════
     GLASS PANEL (.n-glass)
     ═══════════════════════════════════════ */
  --glass-bg:             #FFFFFF;
  --glass-border:         #E2E8F0;
  --glass-border-hover:   #CBD5E1;
  --glass-radius:         20px;
  --glass-blur:           0px;
  --glass-shadow:         0 1px 3px rgba(0,0,0,0.08);
  --glass-shadow-hover:   0 4px 12px rgba(0,0,0,0.12);
  --glass-shine-color:    rgba(255,255,255,0.12);
  --glass-prismatic-left: rgba(0,212,170,0.15);
  --glass-prismatic-mid:  rgba(167,139,250,0.15);
  --glass-prismatic-right:rgba(244,114,182,0.1);

  /* ═══════════════════════════════════════
     BUTTON PRIMARY (.n-btn-primary)
     ═══════════════════════════════════════ */
  --btn-primary-bg-from:  #00D4AA;
  --btn-primary-bg-to:    #00B894;
  --btn-primary-text:     #0D1117;
  --btn-primary-radius:   9999px;
  --btn-primary-padding:  12px 28px;
  --btn-primary-size:     14px;
  --btn-primary-weight:   600;
  --btn-primary-glow:     0 0 20px rgba(0,212,170,0.15), 0 0 60px rgba(0,212,170,0.06);
  --btn-primary-glow-hover: 0 8px 30px rgba(0,212,170,0.25);
  --btn-primary-shine:    rgba(255,255,255,0.15);

  /* ═══════════════════════════════════════
     BUTTON ACCENT / KI (.n-btn-accent)
     ═══════════════════════════════════════ */
  --btn-accent-bg-from:   #d4a853;
  --btn-accent-bg-to:     #e8c476;
  --btn-accent-text:      #0D1117;
  --btn-accent-radius:    9999px;
  --btn-accent-padding:   12px 28px;
  --btn-accent-size:      14px;
  --btn-accent-weight:    600;
  --btn-accent-glow:      0 0 20px rgba(212,168,83,0.15);
  --btn-accent-glow-hover:0 8px 30px rgba(212,168,83,0.25);

  /* ═══════════════════════════════════════
     BUTTON GHOST (.n-btn-ghost)
     ═══════════════════════════════════════ */
  --btn-ghost-bg:         rgba(0,0,0,0.04);
  --btn-ghost-bg-hover:   rgba(0,0,0,0.07);
  --btn-ghost-text:       #1a1a1a;
  --btn-ghost-border:     rgba(0,0,0,0.12);
  --btn-ghost-border-hover:rgba(0,0,0,0.2);
  --btn-ghost-radius:     9999px;
  --btn-ghost-padding:    12px 28px;
  --btn-ghost-size:       14px;
  --btn-ghost-weight:     600;

  /* ═══════════════════════════════════════
     BUTTON DANGER (.n-btn-danger)
     ═══════════════════════════════════════ */
  --btn-danger-bg:        rgba(248,113,113,0.1);
  --btn-danger-bg-hover:  #f87171;
  --btn-danger-text:      #f87171;
  --btn-danger-text-hover:#ffffff;
  --btn-danger-border:    rgba(248,113,113,0.2);
  --btn-danger-radius:    9999px;
  --btn-danger-padding:   12px 28px;
  --btn-danger-size:      14px;

  /* ═══════════════════════════════════════
     INPUT (.n-input)
     ═══════════════════════════════════════ */
  --input-bg:             #FFFFFF;
  --input-border:         #E2E8F0;
  --input-border-focus:   #00D4AA;
  --input-focus-glow:     0 0 0 3px rgba(0,212,170,0.12);
  --input-text:           #1a1a1a;
  --input-placeholder:    #9CA3AF;
  --input-radius:         12px;
  --input-padding:        12px 16px;
  --input-size:           14px;

  /* ═══════════════════════════════════════
     LABEL (.n-label)
     ═══════════════════════════════════════ */
  --label-color:          #1a1a1a;
  --label-size:           12px;
  --label-weight:         700;
  --label-spacing:        0.5px;
  --label-margin-bottom:  8px;

  /* ═══════════════════════════════════════
     KPI CARD (.n-kpi)
     ═══════════════════════════════════════ */
  --kpi-bg:               #FFFFFF;
  --kpi-border:           #E2E8F0;
  --kpi-border-hover:     #CBD5E1;
  --kpi-radius:           20px;
  --kpi-padding:          22px;
  --kpi-shadow:           0 1px 3px rgba(0,0,0,0.08);
  --kpi-shadow-hover:     0 4px 12px rgba(0,0,0,0.12);
  --kpi-hover-lift:       -3px;
  --kpi-label-color:      #6B7280;
  --kpi-label-size:       11px;
  --kpi-label-weight:     600;
  --kpi-label-spacing:    1.5px;
  --kpi-label-transform:  uppercase;
  --kpi-value-color:      #1a1a1a;
  --kpi-value-size:       28px;
  --kpi-value-weight:     600;
  --kpi-value-font:       'JetBrains Mono', monospace;
  --kpi-delta-up-color:   #00D4AA;
  --kpi-delta-up-bg:      rgba(0,212,170,0.08);
  --kpi-delta-down-color: #f87171;
  --kpi-delta-down-bg:    rgba(248,113,113,0.08);
  --kpi-delta-radius:     9999px;
  --kpi-delta-size:       11px;
  --kpi-delta-weight:     600;
  --kpi-delta-padding:    3px 10px;

  /* ═══════════════════════════════════════
     BADGE (.n-badge)
     ═══════════════════════════════════════ */
  --badge-radius:         9999px;
  --badge-padding:        3px 10px;
  --badge-size:           11px;
  --badge-weight:         600;
  --badge-spacing:        0.5px;
  --badge-primary-bg:     rgba(0,212,170,0.08);
  --badge-primary-text:   #00D4AA;
  --badge-accent-bg:      rgba(212,168,83,0.08);
  --badge-accent-text:    #d4a853;
  --badge-secondary-bg:   rgba(167,139,250,0.08);
  --badge-secondary-text: #a78bfa;
  --badge-success-bg:     rgba(0,212,170,0.08);
  --badge-success-text:   #00D4AA;
  --badge-warning-bg:     rgba(251,191,36,0.08);
  --badge-warning-text:   #fbbf24;
  --badge-danger-bg:      rgba(248,113,113,0.08);
  --badge-danger-text:    #f87171;
  --badge-info-bg:        rgba(96,165,250,0.08);
  --badge-info-text:      #60a5fa;
  --badge-neutral-bg:     rgba(0,0,0,0.05);
  --badge-neutral-text:   #4a5068;
  --badge-solid-bg:       #00D4AA;
  --badge-solid-text:     #0D1117;
  --badge-solid-size:     9px;
  --badge-solid-weight:   700;

  /* ═══════════════════════════════════════
     NAV ITEM (.n-nav-item)
     ═══════════════════════════════════════ */
  --nav-text:             #FFFFFF;
  --nav-text-hover:       #e8eaed;
  --nav-text-active:      #00D4AA;
  --nav-bg-hover:         rgba(255,255,255,0.06);
  --nav-bg-active:        rgba(0,212,170,0.08);
  --nav-border-active:    rgba(0,212,170,0.12);
  --nav-radius:           12px;
  --nav-padding:          12px;
  --nav-size:             13px;
  --nav-weight:           500;
  --nav-weight-active:    600;
  --nav-icon-size:        20px;
  --nav-icon-opacity:     0.6;
  --nav-icon-opacity-active: 1;
  --nav-gap:              12px;

  /* ═══════════════════════════════════════
     SESSION ROW (.n-session)
     ═══════════════════════════════════════ */
  --session-bg:           #FFFFFF;
  --session-bg-hover:     #F8FAFC;
  --session-border:       #E2E8F0;
  --session-border-hover: #CBD5E1;
  --session-radius:       14px;
  --session-padding:      14px;
  --session-gap:          12px;
  --session-score-size:   20px;
  --session-score-weight: 600;
  --session-score-font:   'JetBrains Mono', monospace;
  --session-score-high:   #00D4AA;
  --session-score-mid:    #fbbf24;
  --session-score-low:    #f87171;
  --session-title-size:   13px;
  --session-title-weight: 600;
  --session-title-color:  #1a1a1a;
  --session-meta-size:    11px;
  --session-meta-color:   #6B7280;
  --session-duration-size:12px;
  --session-duration-color:#6B7280;

  /* ═══════════════════════════════════════
     METRIC BAR (.n-metric)
     ═══════════════════════════════════════ */
  --metric-name-color:    #6B7280;
  --metric-name-size:     11px;
  --metric-name-weight:   500;
  --metric-value-color:   #1a1a1a;
  --metric-value-size:    11px;
  --metric-value-font:    'JetBrains Mono', monospace;
  --metric-track-height:  3px;
  --metric-track-bg:      rgba(0,0,0,0.08);
  --metric-track-radius:  3px;
  --metric-fill-primary-from: #00B894;
  --metric-fill-primary-to:   #00D4AA;
  --metric-fill-success-from: #16a34a;
  --metric-fill-success-to:   #4ade80;
  --metric-fill-warning-from: #d97706;
  --metric-fill-warning-to:   #fbbf24;
  --metric-fill-secondary-from:#7c3aed;
  --metric-fill-secondary-to:  #a78bfa;
  --metric-fill-accent-from:   #b8872e;
  --metric-fill-accent-to:     #d4a853;
  --metric-spacing:       16px;

  /* ═══════════════════════════════════════
     PILL TABS (.n-pill)
     ═══════════════════════════════════════ */
  --pill-bg:              rgba(0,0,0,0.05);
  --pill-bg-hover:        rgba(0,0,0,0.08);
  --pill-bg-active:       #00D4AA;
  --pill-border:          rgba(0,0,0,0.1);
  --pill-border-hover:    rgba(0,0,0,0.15);
  --pill-border-active:   #00D4AA;
  --pill-text:            #6B7280;
  --pill-text-hover:      #1a1a1a;
  --pill-text-active:     #FFFFFF;
  --pill-radius:          9999px;
  --pill-padding:         8px 20px;
  --pill-size:            13px;
  --pill-weight:          500;
  --pill-weight-active:   600;
  --pill-active-glow:     0 0 16px rgba(0,212,170,0.15);

  /* ═══════════════════════════════════════
     AI PANEL (.n-ai-panel)
     ═══════════════════════════════════════ */
  --ai-bg-from:           rgba(212,168,83,0.06);
  --ai-bg-to:             rgba(255,255,255,0.04);
  --ai-border:            rgba(212,168,83,0.2);
  --ai-radius:            20px;
  --ai-padding:           24px;
  --ai-blur:              40px;
  --ai-glow:              0 0 40px rgba(212,168,83,0.15);
  --ai-shine:             rgba(212,168,83,0.4);
  --ai-label-bg-from:     #d4a853;
  --ai-label-bg-to:       #e8c476;
  --ai-label-text:        #0D1117;
  --ai-label-size:        10px;
  --ai-label-weight:      700;
  --ai-label-radius:      9999px;
  --ai-label-padding:     4px 14px;
  --ai-label-spacing:     2px;
  --ai-label-glow:        0 2px 12px rgba(212,168,83,0.15);
  --ai-context-color:     #4a5068;
  --ai-context-size:      10px;
  --ai-text-color:        #8b92a5;
  --ai-text-size:         14px;
  --ai-highlight-color:   #d4a853;
  --ai-highlight-weight:  700;
  --ai-pill-bg:           rgba(212,168,83,0.08);
  --ai-pill-border:       rgba(212,168,83,0.15);
  --ai-pill-text:         #d4a853;
  --ai-pill-size:         10px;
  --ai-pill-radius:       9999px;
  --ai-pill-padding:      4px 14px;

  /* ═══════════════════════════════════════
     LIVE BADGE (.n-live-badge)
     ═══════════════════════════════════════ */
  --live-dot-color:       #f87171;
  --live-dot-size:        8px;
  --live-dot-glow:        rgba(248,113,113,0.4);
  --live-text-color:      #f87171;
  --live-text-size:       12px;
  --live-text-weight:     700;
  --live-text-spacing:    2px;
  --live-bg:              rgba(248,113,113,0.08);
  --live-border:          rgba(248,113,113,0.2);
  --live-radius:          9999px;
  --live-padding:         8px 20px;

  /* ═══════════════════════════════════════
     FEED ITEM (.n-feed-item)
     ═══════════════════════════════════════ */
  --feed-dot-size:        6px;
  --feed-dot-primary:     #00D4AA;
  --feed-dot-primary-glow:0 0 8px rgba(0,212,170,0.15);
  --feed-dot-secondary:   #a78bfa;
  --feed-dot-secondary-glow:0 0 8px rgba(167,139,250,0.12);
  --feed-dot-danger:      #f87171;
  --feed-text-color:      #6B7280;
  --feed-text-size:       13px;
  --feed-text-bold-color: #1a1a1a;
  --feed-time-color:      #9CA3AF;
  --feed-time-size:       11px;
  --feed-gap:             12px;

  /* ═══════════════════════════════════════
     AVATAR (.n-avatar)
     ═══════════════════════════════════════ */
  --avatar-sm-size:       28px;
  --avatar-sm-font:       10px;
  --avatar-sm-radius:     50%;
  --avatar-md-size:       36px;
  --avatar-md-font:       13px;
  --avatar-md-radius:     12px;
  --avatar-lg-size:       48px;
  --avatar-lg-font:       16px;
  --avatar-lg-radius:     14px;
  --avatar-text-color:    #0D1117;
  --avatar-weight:        700;

  /* ═══════════════════════════════════════
     HERO CARD (.n-hero)
     ═══════════════════════════════════════ */
  --hero-bg-from:         rgba(0,212,170,0.08);
  --hero-bg-mid:          rgba(167,139,250,0.06);
  --hero-bg-to:           rgba(244,114,182,0.03);
  --hero-border:          rgba(0,212,170,0.12);
  --hero-radius:          20px;
  --hero-padding:         32px;
  --hero-shine-from:      rgba(0,212,170,0.3);
  --hero-shine-to:        rgba(167,139,250,0.2);

  /* ═══════════════════════════════════════
     PROMO CARD (.n-promo)
     ═══════════════════════════════════════ */
  --promo-bg-from:        rgba(167,139,250,0.08);
  --promo-bg-mid:         rgba(244,114,182,0.04);
  --promo-bg-to:          rgba(0,212,170,0.04);
  --promo-border:         rgba(167,139,250,0.15);
  --promo-radius:         20px;
  --promo-padding:        24px;
  --promo-glow:           0 0 30px rgba(167,139,250,0.12);
  --promo-title-color:    #a78bfa;
  --promo-title-size:     14px;
  --promo-text-color:     #4a5068;
  --promo-text-size:      12px;

  /* ═══════════════════════════════════════
     SIDEBAR
     ═══════════════════════════════════════ */
  --sidebar-bg:           #0A0E14;
  --sidebar-hover:        rgba(255,255,255,0.06);
  --badge-bg:             rgba(255,255,255,0.04);
  --card-hover:           rgba(255,255,255,0.02);
}



/* ── Reset ───────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
body{font-family:var(--page-font);background:var(--page-bg);color:var(--page-text-color);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;height:100vh;overflow:hidden;}
a{color:inherit;text-decoration:none}


/* ── Component Classes ───────────────────────────────────────────── */

/* Glass */
.n-glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--glass-radius);
  box-shadow:var(--glass-shadow);
  position:relative;overflow:hidden;transition:all 0.25s ease;
}
.n-glass::before{display:none;}
.n-glass::after{display:none;}
.n-glass:hover{border-color:var(--glass-border-hover);box-shadow:var(--glass-shadow-hover);}

/* Buttons */
.n-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden;line-height:1;}
.n-btn::before{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,0.15),transparent);border-radius:inherit;pointer-events:none;}

.n-btn-primary{background:linear-gradient(135deg,var(--btn-primary-bg-from),var(--btn-primary-bg-to));color:var(--btn-primary-text);border-radius:var(--btn-primary-radius);padding:var(--btn-primary-padding);font-size:var(--btn-primary-size);font-weight:var(--btn-primary-weight);font-family:var(--page-font);box-shadow:var(--btn-primary-glow);}
.n-btn-primary::before{background:linear-gradient(180deg,var(--btn-primary-shine),transparent);}
.n-btn-primary:hover{transform:translateY(-2px);box-shadow:var(--btn-primary-glow-hover);}

.n-btn-accent{background:linear-gradient(135deg,var(--btn-accent-bg-from),var(--btn-accent-bg-to));color:var(--btn-accent-text);border-radius:var(--btn-accent-radius);padding:var(--btn-accent-padding);font-size:var(--btn-accent-size);font-weight:var(--btn-accent-weight);font-family:var(--page-font);box-shadow:var(--btn-accent-glow);}
.n-btn-accent:hover{transform:translateY(-2px);box-shadow:var(--btn-accent-glow-hover);}

.n-btn-ghost{background:var(--btn-ghost-bg);color:var(--btn-ghost-text);border:1px solid var(--btn-ghost-border);border-radius:var(--btn-ghost-radius);padding:var(--btn-ghost-padding);font-size:var(--btn-ghost-size);font-weight:var(--btn-ghost-weight);font-family:var(--page-font);backdrop-filter:blur(10px);}
.n-btn-ghost::before{background:linear-gradient(180deg,rgba(255,255,255,0.04),transparent);}
.n-btn-ghost:hover{background:var(--btn-ghost-bg-hover);border-color:var(--btn-ghost-border-hover);}

.n-btn-danger{background:var(--btn-danger-bg);color:var(--btn-danger-text);border:1px solid var(--btn-danger-border);border-radius:var(--btn-danger-radius);padding:var(--btn-danger-padding);font-size:var(--btn-danger-size);font-weight:600;font-family:var(--page-font);}
.n-btn-danger:hover{background:var(--btn-danger-bg-hover);color:var(--btn-danger-text-hover);border-color:transparent;}

.n-btn-sm{padding:8px 16px;font-size:11px;}
.n-btn-lg{padding:16px 32px;font-size:16px;}

/* Input */
.n-input{width:100%;padding:var(--input-padding);background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);color:var(--input-text);font-family:var(--page-font);font-size:var(--input-size);outline:none;transition:all 0.25s ease;}
.n-input:focus{border-color:var(--input-border-focus);box-shadow:var(--input-focus-glow);}
.n-input::placeholder{color:var(--input-placeholder);}
.n-label{display:block;font-size:var(--label-size);font-weight:var(--label-weight);color:var(--label-color);margin-bottom:var(--label-margin-bottom);letter-spacing:var(--label-spacing);}

/* KPI */
.n-kpi{background:var(--kpi-bg);border:1px solid var(--kpi-border);border-radius:var(--kpi-radius);padding:var(--kpi-padding);box-shadow:var(--kpi-shadow);transition:all 0.25s ease;backdrop-filter:blur(var(--glass-blur)) saturate(1.3);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.3);position:relative;overflow:hidden;}
.n-kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--glass-shine-color),transparent);}
.n-kpi:hover{transform:translateY(var(--kpi-hover-lift));box-shadow:var(--kpi-shadow-hover);border-color:var(--kpi-border-hover);}
.n-kpi-label{font-size:var(--kpi-label-size);font-weight:var(--kpi-label-weight);color:var(--kpi-label-color);text-transform:var(--kpi-label-transform);letter-spacing:var(--kpi-label-spacing);margin-bottom:10px;}
.n-kpi-value{font-family:var(--kpi-value-font);font-size:var(--kpi-value-size);font-weight:var(--kpi-value-weight);color:var(--kpi-value-color);}
.n-kpi-delta{display:inline-flex;align-items:center;gap:3px;font-size:var(--kpi-delta-size);font-weight:var(--kpi-delta-weight);margin-top:8px;padding:var(--kpi-delta-padding);border-radius:var(--kpi-delta-radius);}
.n-kpi-delta-up{color:var(--kpi-delta-up-color);background:var(--kpi-delta-up-bg);}
.n-kpi-delta-down{color:var(--kpi-delta-down-color);background:var(--kpi-delta-down-bg);}

/* Badge (NERVE design system .n-badge) */
.n-badge{display:inline-flex;align-items:center;gap:4px;padding:var(--badge-padding);border-radius:var(--badge-radius);font-size:var(--badge-size);font-weight:var(--badge-weight);letter-spacing:var(--badge-spacing);}
.n-badge-primary{background:var(--badge-primary-bg);color:var(--badge-primary-text);}
.n-badge-accent{background:var(--badge-accent-bg);color:var(--badge-accent-text);}
.n-badge-secondary{background:var(--badge-secondary-bg);color:var(--badge-secondary-text);}
.n-badge-success{background:var(--badge-success-bg);color:var(--badge-success-text);}
.n-badge-warning{background:var(--badge-warning-bg);color:var(--badge-warning-text);}
.n-badge-danger{background:var(--badge-danger-bg);color:var(--badge-danger-text);}
.n-badge-info{background:var(--badge-info-bg);color:var(--badge-info-text);}
.n-badge-neutral{background:var(--badge-neutral-bg);color:var(--badge-neutral-text);}
.n-badge-solid{background:var(--badge-solid-bg);color:var(--badge-solid-text);font-size:var(--badge-solid-size);font-weight:var(--badge-solid-weight);}

/* Nav */
.n-nav-item{display:flex;align-items:center;gap:var(--nav-gap);padding:var(--nav-padding);border-radius:var(--nav-radius);color:var(--nav-text);font-size:var(--nav-size);font-weight:var(--nav-weight);cursor:pointer;transition:all 0.2s ease;}
.n-nav-item:hover{background:none;color:#00D4AA;}
.n-nav-item-active{background:none;color:#00D4AA;border:none;font-weight:var(--nav-weight-active);}
.n-nav-icon{width:var(--nav-icon-size);height:var(--nav-icon-size);opacity:var(--nav-icon-opacity);}
.n-nav-item-active .n-nav-icon{opacity:var(--nav-icon-opacity-active);}

/* Session */
.n-session{display:grid;grid-template-columns:48px 2fr 1fr 80px 40px;align-items:center;gap:var(--session-gap);padding:var(--session-padding);border-radius:var(--session-radius);background:var(--session-bg);border:1px solid var(--session-border);cursor:pointer;transition:all 0.2s ease;}
.n-session:hover{background:var(--session-bg-hover);border-color:var(--session-border-hover);}
.n-session-score{font-family:var(--session-score-font);font-size:var(--session-score-size);font-weight:var(--session-score-weight);text-align:center;}
.n-session-score-high{color:var(--session-score-high);}
.n-session-score-mid{color:var(--session-score-mid);}
.n-session-score-low{color:var(--session-score-low);}
.n-session-title{font-size:var(--session-title-size);font-weight:var(--session-title-weight);color:var(--session-title-color);}
.n-session-meta{font-size:var(--session-meta-size);color:var(--session-meta-color);margin-top:2px;}
.n-session-duration{font-family:var(--page-font-mono);font-size:var(--session-duration-size);color:var(--session-duration-color);}

/* Metric */
.n-metric{margin-bottom:var(--metric-spacing);}
.n-metric-header{display:flex;justify-content:space-between;font-size:var(--metric-name-size);margin-bottom:5px;}
.n-metric-name{color:var(--metric-name-color);font-weight:var(--metric-name-weight);}
.n-metric-value{color:var(--metric-value-color);font-family:var(--metric-value-font);font-size:var(--metric-value-size);}
.n-metric-track{height:var(--metric-track-height);background:var(--metric-track-bg);border-radius:var(--metric-track-radius);overflow:hidden;}
.n-metric-fill{height:100%;border-radius:var(--metric-track-radius);transition:width 0.6s ease;}
.n-metric-fill-primary{background:linear-gradient(90deg,var(--metric-fill-primary-from),var(--metric-fill-primary-to));}
.n-metric-fill-success{background:linear-gradient(90deg,var(--metric-fill-success-from),var(--metric-fill-success-to));}
.n-metric-fill-warning{background:linear-gradient(90deg,var(--metric-fill-warning-from),var(--metric-fill-warning-to));}
.n-metric-fill-secondary{background:linear-gradient(90deg,var(--metric-fill-secondary-from),var(--metric-fill-secondary-to));}
.n-metric-fill-accent{background:linear-gradient(90deg,var(--metric-fill-accent-from),var(--metric-fill-accent-to));}

/* Pills */
.n-pill{padding:var(--pill-padding);border-radius:var(--pill-radius);font-family:var(--page-font);font-size:var(--pill-size);font-weight:var(--pill-weight);border:1px solid var(--pill-border);background:var(--pill-bg);color:var(--pill-text);cursor:pointer;transition:all 0.25s ease;}
.n-pill:hover{background:var(--pill-bg-hover);border-color:var(--pill-border-hover);color:var(--pill-text-hover);}
.n-pill-active{background:var(--pill-bg-active);border-color:var(--pill-border-active);color:var(--pill-text-active);font-weight:var(--pill-weight-active);box-shadow:var(--pill-active-glow);}

/* AI Panel */
.n-ai-panel{padding:var(--ai-padding);background:linear-gradient(135deg,var(--ai-bg-from),var(--ai-bg-to));backdrop-filter:blur(var(--ai-blur));-webkit-backdrop-filter:blur(var(--ai-blur));border:1px solid var(--ai-border);border-radius:var(--ai-radius);box-shadow:var(--ai-glow),inset 0 1px 0 rgba(255,255,255,0.06);position:relative;overflow:hidden;}
.n-ai-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--ai-shine),transparent);}
.n-ai-label{position:absolute;top:-11px;left:24px;background:linear-gradient(135deg,var(--ai-label-bg-from),var(--ai-label-bg-to));color:var(--ai-label-text);font-size:var(--ai-label-size);font-weight:var(--ai-label-weight);padding:var(--ai-label-padding);border-radius:var(--ai-label-radius);letter-spacing:var(--ai-label-spacing);text-transform:uppercase;box-shadow:var(--ai-label-glow);}

/* Live Badge */
.n-live-badge{display:inline-flex;align-items:center;gap:8px;padding:var(--live-padding);border-radius:var(--live-radius);background:var(--live-bg);border:1px solid var(--live-border);}
.n-live-dot{width:var(--live-dot-size);height:var(--live-dot-size);border-radius:50%;background:var(--live-dot-color);animation:n-pulse 2s infinite;}
@keyframes n-pulse{0%,100%{box-shadow:0 0 0 0 var(--live-dot-glow);}50%{box-shadow:0 0 0 6px transparent;}}
.n-live-text{font-size:var(--live-text-size);font-weight:var(--live-text-weight);color:var(--live-text-color);text-transform:uppercase;letter-spacing:var(--live-text-spacing);}

/* Feed */
.n-feed-item{display:flex;gap:var(--feed-gap);}
.n-feed-dot{width:var(--feed-dot-size);height:var(--feed-dot-size);border-radius:50%;margin-top:7px;flex-shrink:0;}
.n-feed-dot-primary{background:var(--feed-dot-primary);box-shadow:var(--feed-dot-primary-glow);}
.n-feed-dot-secondary{background:var(--feed-dot-secondary);box-shadow:var(--feed-dot-secondary-glow);}
.n-feed-dot-danger{background:var(--feed-dot-danger);}
.n-feed-text{font-size:var(--feed-text-size);color:var(--feed-text-color);}
.n-feed-text b{color:var(--feed-text-bold-color);font-weight:600;}
.n-feed-time{font-size:var(--feed-time-size);color:var(--feed-time-color);margin-top:2px;}

/* Avatar */
.n-avatar{display:inline-flex;align-items:center;justify-content:center;font-weight:var(--avatar-weight);color:var(--avatar-text-color);}
.n-avatar-sm{width:var(--avatar-sm-size);height:var(--avatar-sm-size);font-size:var(--avatar-sm-font);border-radius:var(--avatar-sm-radius);}
.n-avatar-md{width:var(--avatar-md-size);height:var(--avatar-md-size);font-size:var(--avatar-md-font);border-radius:var(--avatar-md-radius);}
.n-avatar-lg{width:var(--avatar-lg-size);height:var(--avatar-lg-size);font-size:var(--avatar-lg-font);border-radius:var(--avatar-lg-radius);}

/* Hero */
.n-hero{padding:var(--hero-padding);background:linear-gradient(135deg,var(--hero-bg-from),var(--hero-bg-mid),var(--hero-bg-to));border:1px solid var(--hero-border);border-radius:var(--hero-radius);box-shadow:0 8px 32px rgba(0,0,0,0.2);position:relative;overflow:hidden;}
.n-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--hero-shine-from),var(--hero-shine-to),transparent);}

/* Promo */
.n-promo{padding:var(--promo-padding);background:linear-gradient(135deg,var(--promo-bg-from),var(--promo-bg-mid),var(--promo-bg-to));border:1px solid var(--promo-border);border-radius:var(--promo-radius);box-shadow:var(--promo-glow);position:relative;overflow:hidden;}
.n-promo::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,0.3),rgba(244,114,182,0.2),transparent);}

/* Lucide sizing */
.lucide{width:20px;height:20px;stroke-width:2;}
.lucide-sm{width:16px;height:16px;}
.lucide-lg{width:24px;height:24px;}

/* Text helpers */
.text-primary{color:var(--page-text-color);}
.text-secondary{color:var(--page-text-secondary);}
.text-muted{color:var(--page-text-muted);}
.text-success{color:#00D4AA;}
.text-warning{color:#fbbf24;}
.text-danger{color:#f87171;}
.text-accent{color:#d4a853;}
.font-mono{font-family:var(--page-font-mono);}


/* ── Layout Shell ─────────────────────────────────────────────────── */
.g-header{padding:0 24px;height:52px;border-bottom:1px solid rgba(255,255,255,0.06);
  display:flex;align-items:center;justify-content:space-between;
  background:var(--page-bg);flex-shrink:0;z-index:10}
.g-body{display:flex;flex:1;overflow:hidden}
.g-sidebar{width:204px;background:#000000;border-right:1px solid rgba(255,255,255,0.06);
  display:flex;flex-direction:column;flex-shrink:0;padding:8px;}
.g-sidebar-inner{flex:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:2px;}
.g-sidebar-inner::-webkit-scrollbar{width:3px}
.g-sidebar-inner::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.06)}
.g-content{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.g-content::-webkit-scrollbar{width:4px}
.g-content::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.12);border-radius:2px}

/* ---- Sidebar collapse ---- */
.g-sidebar { transition: width 0.2s ease; overflow: hidden; }
.g-sidebar.collapsed { width: 52px; }
.g-sidebar.collapsed .n-nav-label,
.g-sidebar.collapsed .sidebar-user-info,
.g-sidebar.collapsed .sidebar-plan-badge { display: none; }
.g-sidebar.collapsed .n-nav-item {
  justify-content: center;
  padding: 12px;
}
.g-sidebar.collapsed .n-nav-item .nav-icon-lucide { margin-right: 0; }
.g-sidebar.collapsed .sidebar-user-block { justify-content: center; padding: 12px; }
.g-sidebar.collapsed .sidebar-avatar { margin-right: 0; }
.g-sidebar.collapsed .sidebar-user-dropdown { display: none; }

/* Lucide nav icons */
.nav-icon-lucide { width: 18px; height: 18px; flex-shrink: 0; margin-right: 10px; }

/* Collapse toggle button */
.sidebar-collapse-btn {
  background: none; border: none; cursor: pointer;
  color: var(--page-text-muted); padding: 8px 12px;
  display: flex; align-items: center; justify-content: flex-end;
  width: 100%;
}
.sidebar-collapse-btn:hover { color: var(--page-text-secondary); }
.sidebar-collapse-icon { width: 18px; height: 18px; }

/* Plan badge */
.sidebar-plan-badge {
  background: var(--badge-primary-bg, rgba(0,212,170,0.12));
  color: var(--badge-primary-text, #00D4AA);
  border-radius: 9999px; padding: 2px 8px;
  font-size: 12px; font-weight: 600;
}


/* ── Legacy classes — preserved for backward compatibility ──────── */
/* These are used by base.html elements not yet migrated to NERVE     */

/* Flash messages */
.flash-wrap{padding:12px 32px 0}
.flash{border-radius:8px;padding:10px 14px;font-size:13px;margin-bottom:8px;
  display:flex;align-items:center;gap:8px}
.flash-error{background:#1a0808;border:1px solid #5a2020;color:#e05c5c}
.flash-success{background:#0a1810;border:1px solid #1a5a38;color:#00D4AA}
.flash-info{background:#0e0e1a;border:1px solid #2e2e58;color:#9898d8}

/* Cancel banner */
.cancel-banner{background:#1a0808;border-bottom:1px solid #5a202060;
  padding:9px 24px;font-size:12px;color:#e05c5c;display:flex;align-items:center;
  gap:10px;flex-shrink:0}
.cancel-banner a{color:#00D4AA;font-weight:600}

/* Help FAB */
.help-fab{position:fixed;bottom:20px;right:20px;width:44px;height:44px;
  border-radius:50%;background:rgba(255,255,255,0.04);border:1px solid rgba(0,212,170,0.2);
  color:#00D4AA;font-size:20px;font-weight:700;display:flex;align-items:center;
  justify-content:center;cursor:pointer;z-index:100;transition:all .2s;text-decoration:none}
.help-fab:hover{background:rgba(0,212,170,0.1);border-color:#00D4AA;transform:scale(1.1)}
body.kompakt .help-fab,body.live-active .help-fab{display:none}

/* Changelog badge */
.new-badge{background:rgba(0,212,170,0.15);color:#00D4AA;font-size:9px;font-weight:800;
  padding:1px 6px;border-radius:10px;margin-left:6px;letter-spacing:.05em}

/* Changelog popup */
.changelog-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .3s;pointer-events:none}
.changelog-overlay.open{opacity:1;pointer-events:all}
.changelog-popup{background:#0c0c18;border:1px solid rgba(0,212,170,0.2);
  border-top:3px solid #00D4AA;border-radius:12px;padding:24px;
  max-width:500px;width:90%;max-height:70vh;overflow-y:auto;position:relative}
.changelog-close{position:absolute;top:12px;right:16px;background:none;border:none;
  color:#b8b0a0;font-size:24px;cursor:pointer;line-height:1}
.changelog-close:hover{color:#f0ebe0}
.changelog-popup h2{color:#f0ebe0;font-size:18px;margin-bottom:16px;font-family:inherit}
.cl-entry{border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:12px;margin-bottom:12px}
.cl-entry:last-of-type{border-bottom:none}
.cl-version{color:#00D4AA;font-size:12px;font-weight:600}
.cl-title{color:#f0ebe0;font-size:15px;font-weight:700;margin:4px 0 8px}
.cl-body{color:#b8b0a0;font-size:13px;line-height:1.6;white-space:pre-line}
.cl-bugs{background:rgba(0,212,170,0.06);border-left:3px solid #00D4AA;
  border-radius:0 6px 6px 0;padding:8px 12px;margin-top:8px}
.cl-bug{color:#b8b0a0;font-size:12px;margin-bottom:4px}
.cl-workaround{color:#00D4AA;font-size:11px}
.cl-actions{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.cl-link{color:#b8b0a0;font-size:13px;text-decoration:none}
.cl-link:hover{color:#00D4AA}
.cl-btn{background:#00D4AA;color:#0D1117;border:none;padding:8px 20px;border-radius:6px;
  font-weight:700;font-size:13px;cursor:pointer;font-family:inherit}

/* Auto-logout warning */
#al-warning{position:fixed;bottom:20px;right:20px;background:#1a0e00;
  border:1px solid #f0a500;border-radius:10px;padding:14px 18px;z-index:9999;
  max-width:280px;display:none}
#al-warning.visible{display:block}
#al-warning p{font-size:13px;color:#c8922a;margin-bottom:10px;line-height:1.4}
#al-warning button{background:#f0a500;color:#0a0800;border:none;border-radius:6px;
  padding:6px 14px;font-size:12px;font-weight:700;cursor:pointer}
#al-warning button:hover{opacity:.85}

/* Nav Logo */
.nav-mark{display:flex;align-items:center;gap:10px}
.nav-n{width:32px;height:32px;border:1.5px solid #00D4AA;border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-size:18px;font-weight:900;color:#00D4AA}
.nav-word{font-family:'Inter',sans-serif;font-size:16px;font-weight:900;letter-spacing:3px;color:#e8eaed}
.nav-word small{display:block;font-size:7px;letter-spacing:.2em;color:#00D4AA;font-weight:600;margin-top:-2px}

/* Early Access Badge */
.ea-badge{background:rgba(0,212,170,0.1);border:1px solid rgba(0,212,170,0.3);
  color:#00D4AA;font-size:9px;font-weight:800;letter-spacing:.1em;
  padding:2px 8px;border-radius:4px;text-transform:uppercase;margin-left:8px;vertical-align:middle}

/* Nav separator */
.nav-sep{height:1px;background:rgba(255,255,255,0.06);margin:8px 0}

/* Nav badge (sidebar item counter/status) */
.nav-badge{font-size:9px;font-weight:700;background:rgba(167,139,250,0.1);color:#a78bfa;
  padding:1px 6px;border-radius:20px;margin-left:auto;border:1px solid rgba(167,139,250,0.2)}

/* Header sub-elements */
.g-logo{font-size:19px;font-weight:800;letter-spacing:-.01em}
.g-logo span{color:#00D4AA}
.g-org{font-size:11px;color:#4a5068;margin-left:10px;font-weight:500}
.g-hright{display:flex;align-items:center;gap:12px;font-size:12px}
.g-user{color:#4a5068}

/* Page layout helpers */
.page-wrap{padding:28px 32px;flex:1}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:24px;gap:16px}
.page-title{font-size:22px;font-weight:700;letter-spacing:-.01em}
.page-sub{font-size:13px;color:#8b92a5;margin-top:4px}
.page-actions{display:flex;gap:8px;flex-shrink:0;align-items:flex-start}

/* Legacy Buttons (for child templates not yet migrated) */
.btn{border:none;border-radius:8px;padding:8px 16px;font-size:13px;font-weight:600;
  cursor:pointer;letter-spacing:.03em;transition:opacity .15s,border-color .15s,background .15s;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-family:inherit}
.btn:hover{opacity:.82}
.btn-primary{background:#00D4AA;color:#0D1117}
.btn-secondary{background:#F8FAFC;border:1px solid #E2E8F0;color:#374151}
.btn-secondary:hover{background:#F0F2F5;border-color:#CBD5E1;opacity:1;color:#1a1a1a}
.btn-danger{background:#1a0808;border:1px solid #5a2020;color:#e05c5c}
.btn-danger:hover{border-color:#e05c5c;opacity:1}
.btn-sm{padding:5px 11px;font-size:11px;border-radius:6px}
.btn-xs{padding:3px 8px;font-size:10px;border-radius:5px;font-weight:700}

/* Legacy Cards */
.card{background:#0c0c18;border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:20px 22px}
.card-grid{display:grid;gap:16px}
.card-grid-2{grid-template-columns:repeat(2,1fr)}
.card-grid-3{grid-template-columns:repeat(3,1fr)}
.card-header{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;gap:8px}
.card-title{font-size:14px;font-weight:700}
.card-sub{font-size:12px;color:#8b92a5;margin-top:3px}

/* Legacy Badges */
.badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;
  padding:2px 8px;border-radius:20px}
.badge-teal{background:rgba(0,212,170,0.08);color:#00D4AA;border:1px solid rgba(0,212,170,0.2)}
.badge-gray{background:#1a1a2e;color:#6b6b80;border:1px solid #2e2e40}
.badge-amber{background:#1e1400;color:#f0a500;border:1px solid #3a2800}
.badge-red{background:#1a0808;color:#e05c5c;border:1px solid #3a1414}
.badge-purple{background:#1a1428;color:#9898d8;border:1px solid #303058}

/* Legacy Table */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:10px;font-weight:700;letter-spacing:.08em;color:#8b92a5;
  text-transform:uppercase;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,0.06);text-align:left}
.tbl td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.03);font-size:13px;vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:rgba(255,255,255,0.02)}
.tbl-wrap{background:#0c0c18;border:1px solid rgba(255,255,255,0.06);border-radius:12px;overflow:hidden}

/* Legacy Form */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;
  color:#1a1a1a;text-transform:uppercase;margin-bottom:6px}
.form-input,.form-select,.form-textarea{width:100%;background:#FFFFFF;
  border:1px solid #E2E8F0;border-radius:6px;color:#1a1a1a;font-size:13px;
  padding:9px 12px;outline:none;font-family:inherit;transition:border-color .15s}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:#00D4AA}
.form-textarea{resize:vertical;min-height:80px;line-height:1.5}
.form-select{cursor:pointer}
.form-hint{font-size:11px;color:#6B7280;margin-top:4px}
.form-row{display:grid;gap:12px;grid-template-columns:1fr 1fr}

/* ── Sidebar Logo ──────────────────────────────── */
.sidebar-logo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 8px 8px;
  text-decoration: none;
  flex-shrink: 0;
}
.sidebar-logo-word { color: #FFFFFF; }
.g-sidebar.collapsed .sidebar-logo-link { display: none; }

/* ── Sidebar User Block ──────────────────────────── */
.sidebar-user-block {
  margin-top: auto;
  padding: 10px 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  transition: background 0.15s;
  border-radius: 8px;
  flex-shrink: 0;
}
.sidebar-user-block:hover { background: rgba(255,255,255,0.06); }
.sidebar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #00D4AA;
  color: #0D1117;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.sidebar-user-info { overflow: hidden; flex: 1; }
.sidebar-user-name {
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-plan {
  font-size: 13px;
  color: #00D4AA;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Sidebar User Popup ──────────────────────────── */
.sidebar-user-popup {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  z-index: 600;
  overflow: visible;
}
.sidebar-user-popup.open { display: block; }
.popup-email {
  padding: 10px 14px 8px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(0,0,0,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.popup-divider {
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 2px 0;
}
.popup-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  color: #1a1a1a;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.1s;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}
.popup-item:hover { color: #00D4AA; background: none; }
.popup-item-logout { color: #F85149; }
.popup-item-logout:hover { color: #F85149; background: none; }
.popup-arrow {
  font-size: 9px;
  color: rgba(0,0,0,0.35);
  flex-shrink: 0;
}

/* Flyout submenus */
.popup-flyout-wrap { position: relative; }
.popup-flyout {
  display: none;
  position: fixed;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  min-width: 160px;
  z-index: 1000;
  overflow: hidden;
}
.popup-flyout-wrap.flyout-open .popup-flyout { display: block; }
.popup-flyout-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 14px;
  color: #1a1a1a;
  text-decoration: none;
  font-size: 13px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: color 0.1s;
}
.popup-flyout-item:hover { color: #00D4AA; }
.popup-flyout-check { color: #00D4AA; font-weight: 700; }

/* Collapsed: hide info */
.g-sidebar.collapsed .sidebar-user-info,
.g-sidebar.collapsed .sidebar-user-plan { display: none; }
.g-sidebar.collapsed .sidebar-user-block { justify-content: center; padding: 12px 8px; }
.g-sidebar.collapsed .sidebar-avatar { margin-right: 0; }

/* ── Simulator EWB Highlight ────────────────────────────────── */
.slider-ewb-highlight {
  background: rgba(0, 212, 170, 0.08);
  border: 1px solid rgba(0, 212, 170, 0.25);
  border-radius: 12px;
  padding: 12px 16px;
}

/* ── Training Analytics Panel ──────────────────────────────── */

.t-training-layout {
  display: grid;
  grid-template-columns: 580px 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1100px) {
  .t-training-layout {
    grid-template-columns: 1fr;
  }
}

.t-analytics-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 4px;
}

/* Scrollbar styling for analytics panel */
.t-analytics-panel::-webkit-scrollbar {
  width: 4px;
}
.t-analytics-panel::-webkit-scrollbar-thumb {
  background: #D1D5DB;
  border-radius: 2px;
}

.t-analytics-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  padding: 16px 20px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.t-analytics-card:hover {
  border-color: #00D4AA;
  box-shadow: 0 2px 8px rgba(0,212,170,0.15);
}

.t-analytics-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
}

.t-analytics-card-title .t-card-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.t-card-icon svg {
  width: 16px;
  height: 16px;
}

/* Stats row: 3 KPI numbers */
.t-stats-row {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
}

.t-stat-item {
  flex: 1;
  text-align: center;
}

.t-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
}

.t-stat-label {
  font-size: 12px;
  font-weight: 400;
  color: #6b7280;
  margin-top: 2px;
}

/* Heatmap grid */
.t-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

.t-heatmap-tile {
  padding: 10px 12px;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  border: 1px solid transparent;
}

.t-heatmap-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.t-heatmap-tile-name {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}

.t-heatmap-tile-quote {
  font-size: 18px;
  font-weight: 700;
}

.t-heatmap-tile-count {
  font-size: 11px;
  font-weight: 400;
  margin-top: 2px;
}

/* Heatmap color classes */
.t-heatmap-tile--gruen {
  background: rgba(0,212,170,0.12);
  border-color: rgba(0,212,170,0.3);
  color: #00D4AA;
}
.t-heatmap-tile--gruen .t-heatmap-tile-name { color: #059669; }

.t-heatmap-tile--gelb {
  background: rgba(245,158,11,0.12);
  border-color: rgba(245,158,11,0.3);
  color: #F59E0B;
}
.t-heatmap-tile--gelb .t-heatmap-tile-name { color: #B45309; }

.t-heatmap-tile--rot {
  background: rgba(248,81,73,0.12);
  border-color: rgba(248,81,73,0.3);
  color: #F85149;
}
.t-heatmap-tile--rot .t-heatmap-tile-name { color: #DC2626; }

.t-heatmap-tile--neutral {
  background: #F3F4F6;
  border-color: #E5E7EB;
  color: #9CA3AF;
}
.t-heatmap-tile--neutral .t-heatmap-tile-name { color: #6b7280; }

/* Trend chart container */
.t-trend-chart-wrap {
  height: 80px;
  position: relative;
}

/* Recommendation card */
.t-reco-text {
  font-size: 14px;
  color: #1a1a1a;
  line-height: 1.5;
  margin-bottom: 12px;
}

.t-reco-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #00D4AA;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
}

.t-reco-btn:hover {
  background: #00B894;
}

/* Phrases list */
.t-phrases-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.t-phrase-item {
  padding: 10px 12px;
  background: #F9FAFB;
  border-radius: 8px;
  border: 1px solid #F3F4F6;
}

.t-phrase-text {
  font-size: 13px;
  color: #1a1a1a;
  line-height: 1.4;
  font-style: italic;
}

.t-phrase-meta {
  font-size: 11px;
  color: #6b7280;
  margin-top: 4px;
}

.t-phrase-tag {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(0,212,170,0.1);
  color: #00D4AA;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.t-phrases-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.t-phrases-filter-btn {
  padding: 4px 10px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  background: #FFFFFF;
  color: #6b7280;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}

.t-phrases-filter-btn:hover,
.t-phrases-filter-btn--active {
  border-color: #00D4AA;
  color: #00D4AA;
  background: rgba(0,212,170,0.06);
}

.t-phrases-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.t-phrases-pagination button {
  padding: 4px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  background: #FFFFFF;
  color: #6b7280;
  font-size: 12px;
  cursor: pointer;
}

.t-phrases-pagination button:hover {
  border-color: #00D4AA;
  color: #00D4AA;
}

.t-phrases-pagination button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Wochenziel progress bar */
.t-goal-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.t-goal-progress-wrap {
  flex: 1;
  height: 8px;
  background: #F3F4F6;
  border-radius: 4px;
  overflow: hidden;
}

.t-goal-progress-bar {
  height: 100%;
  background: #00D4AA;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.t-goal-text {
  font-size: 13px;
  color: #6b7280;
}

.t-goal-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.t-goal-input {
  width: 50px;
  padding: 4px 8px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
  color: #1a1a1a;
  background: #FFFFFF;
}

.t-goal-input:focus {
  outline: none;
  border-color: #00D4AA;
}

.t-goal-save-btn {
  padding: 4px 12px;
  background: #00D4AA;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* Letzte Session card */
.t-last-session-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.t-last-session-label {
  font-size: 12px;
  color: #6b7280;
}

.t-last-session-value {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
}

.t-last-session-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #00D4AA;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  margin-top: 8px;
}

.t-last-session-link:hover {
  text-decoration: underline;
}

/* Empty state */
.t-empty-state {
  text-align: center;
  padding: 16px;
  color: #9CA3AF;
  font-size: 13px;
}

/* Streak badge */
.t-streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(0,212,170,0.1);
  color: #00D4AA;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}
.g-sidebar.collapsed .sidebar-user-popup { display: none !important; }

/* ── Sales Performance Calculator ─────────────────────────────────────────── */

/* Slider Track + Thumb */
input[type="range"].perf-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: #E5E7EB;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
input[type="range"].perf-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: #00D4AA;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,212,170,0.3);
}
input[type="range"].perf-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #00D4AA;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

/* KPI-Karten: Basis-Card */
.kpi-card {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.kpi-card .kpi-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6b7280;
  margin-bottom: 6px;
}
.kpi-card .kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.1;
  margin-bottom: 4px;
}
.kpi-card .kpi-sub {
  font-size: 12px;
  color: #6b7280;
}

/* KPI-Reihe generisch */
.perf-kpi-row {
  display: none; /* JS: style.display = 'grid' */
  gap: 12px;
  margin-bottom: 12px;
}

/* Reihe 1: 5 Karten */
#perf-kpi-row-1 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { #perf-kpi-row-1 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { #perf-kpi-row-1 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { #perf-kpi-row-1 { grid-template-columns: 1fr; } }

/* Reihe 2: 2 breitere Karten */
#perf-kpi-row-2 { grid-template-columns: 1fr 1fr; margin-bottom: 16px; }
@media (max-width: 768px)  { #perf-kpi-row-2 { grid-template-columns: 1fr; } }

/* Charts-Grid: 2 Spalten */
#perf-charts {
  display: none; /* JS: style.display = 'grid' */
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 768px) { #perf-charts { grid-template-columns: 1fr; } }

.perf-chart-card {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.perf-chart-card .perf-chart-title {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 2px;
}
.perf-chart-card .perf-chart-sub {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 14px;
}
.perf-chart-card canvas { max-height: 220px; }

/* Simulation: Split-Layout */
.perf-sim-split {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) { .perf-sim-split { grid-template-columns: 1fr; } }

.sim-sliders-card {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Simulation Ergebnis-KPIs: 3 Karten nebeneinander */
.sim-result-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 600px) { .sim-result-kpis { grid-template-columns: 1fr; } }

/* Hint-Bar */
.perf-hint-bar {
  background: rgba(0,212,170,0.06);
  border-left: 3px solid #00D4AA;
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
  font-size: 13px;
  color: #1a1a1a;
  margin-top: 4px;
}

.perf-slider-group { margin-bottom: 4px; }


/* ═══════════════════════════════════════════════════════════════
   DASHBOARD v2
   ═══════════════════════════════════════════════════════════════ */

/* Layout wrapper */
.db2-wrap {
  padding: 24px;
  max-width: 1200px;
}

/* ── Zeile 1: Begrüßung ──────────────────────────────────────── */
.db2-greeting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.db2-greeting-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}
.db2-greeting-sub {
  font-size: 14px;
  color: #6b7280;
  margin-top: 3px;
}
.db2-greeting-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Zeile 2: KPI-Reihe ──────────────────────────────────────── */
.db2-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.db2-kpi {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  min-height: 80px;
}
.db2-kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1;
}
.db2-kpi-label {
  font-size: 12px;
  color: #6b7280;
  margin-top: 5px;
}
.db2-kpi-trend {
  font-size: 11px;
  font-weight: 600;
  margin-top: 3px;
  min-height: 14px;
}
.db2-trend-up      { color: #00D4AA; }
.db2-trend-down    { color: #F85149; }
.db2-trend-neutral { color: #6b7280; }
.db2-streak-fire   { color: #F59E0B; }

/* ── Shared Card ─────────────────────────────────────────────── */
.db2-card {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.db2-card-title {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.db2-card-sub {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 2px;
}

/* ── Zeile 3: Zwei Spalten ───────────────────────────────────── */
.db2-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

/* ── Zeile 4: Sales Performance ──────────────────────────────── */
.db2-mode-toggle {
  display: flex;
  background: #F0F2F5;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.db2-mode-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: #6b7280;
  transition: all .15s;
}
.db2-mode-btn-active {
  background: #FFFFFF;
  color: #1a1a1a;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.db2-perf-split {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 20px;
  align-items: start;
}
.db2-perf-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.db2-perf-kpi {
  background: #F9FAFB;
  border-radius: 10px;
  padding: 12px 14px;
}
.db2-perf-kpi-val {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1;
}
.db2-perf-kpi-lbl {
  font-size: 11px;
  color: #6b7280;
  margin-top: 4px;
}

/* Hint bar */
.db2-hint-bar {
  background: rgba(0,212,170,0.08);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: #1a1a1a;
}

/* ── Sliders ─────────────────────────────────────────────────── */
.db2-slider-group {
  margin-bottom: 14px;
}
.db2-slider-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.db2-slider-row label {
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
}
.db2-slider-val {
  font-size: 13px;
  font-weight: 700;
  color: #00D4AA;
}
.db2-slider-range {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #9ca3af;
  margin-top: 2px;
}

.db2-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: #E5E7EB;
  border-radius: 3px;
  outline: none;
}
.db2-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: #00D4AA;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.db2-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #00D4AA;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

/* ── Zeile 5a: Session-Liste ─────────────────────────────────── */
.db2-session-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #F0F2F5;
  font-size: 13px;
}
.db2-session-row:last-child { border-bottom: none; }
.db2-session-date {
  color: #6b7280;
  font-size: 12px;
  min-width: 90px;
}
.db2-session-score {
  font-weight: 700;
  margin-left: auto;
  font-size: 13px;
}

/* Session-Badges */
.db2-badge {
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.db2-badge-cold     { background: rgba(0,212,170,0.12);  color: #00D4AA; }
.db2-badge-meeting  { background: rgba(59,130,246,0.12); color: #3B82F6; }
.db2-badge-training { background: rgba(139,92,246,0.12); color: #8B5CF6; }

/* ── Zeile 5b: Empfehlungen ──────────────────────────────────── */
.db2-reco-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #F0F2F5;
}
.db2-reco-item:last-child { border-bottom: none; }
.db2-reco-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}
.db2-reco-title {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
}
.db2-reco-sub {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .db2-kpi-row   { grid-template-columns: repeat(3, 1fr); }
  .db2-two-col   { grid-template-columns: 1fr; }
  .db2-perf-split { grid-template-columns: 1fr; }
  .db2-perf-kpis  { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .db2-kpi-row  { grid-template-columns: repeat(2, 1fr); }
  .db2-perf-kpis { grid-template-columns: 1fr; }
  .db2-greeting { flex-direction: column; align-items: flex-start; }
}