/* ─────────────────────────────────────────────────────────────
   CAL.COM DESIGN SYSTEM — FULL IMPLEMENTATION
   Cal Sans + Inter + Multi-layer Shadow Elevation
   ───────────────────────────────────────────────────────────── */

/* ── FONT LOADING ─────────────────────────────────────────── */
/* Cal Sans — geometric display font (open-source, jsDelivr) */
@font-face {
    font-family: 'Cal Sans';
    src: url('https://cdn.jsdelivr.net/gh/calcom/font@master/CalSans-SemiBold.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/calcom/font@master/CalSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

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

/* ── CSS CUSTOM PROPERTIES ───────────────────────────────── */
:root {

    /* ── Palette — pure monochrome ── */
    --charcoal:  #242424;
    --midnight:  #111111;
    --white:     #ffffff;
    --gray-50:   #f9f9f9;
    --gray-100:  #f2f2f2;
    --gray-200:  #e5e5e5;
    --gray-300:  #d4d4d4;
    --gray-400:  #a3a3a3;
    --gray-500:  #898989;
    --gray-600:  #6b6b6b;
    --gray-700:  #525252;
    --gray-800:  #3d3d3d;
    --gray-900:  #242424;

    /* ── Semantic Roles ── */
    --bg:        #ffffff;
    --bg2:       #f9f9f9;
    --bg3:       #f2f2f2;
    --surface:   #ffffff;
    --text:      #242424;
    --text2:     #525252;
    --muted:     #898989;
    --muted2:    #a3a3a3;
    --border:    rgba(34, 42, 53, 0.08);
    --border2:   rgba(34, 42, 53, 0.14);

    /* ── Accent — intentionally minimal ── */
    --accent:        #242424;
    --accent-light:  #f2f2f2;
    --link-blue:     #0099ff;
    --danger:        #dc2626;
    --success:       #16a34a;
    --warning:       #d97706;

    /* ── Legacy compat mappings ── */
    --bg-main:        #ffffff;
    --bg-card:        #ffffff;
    --bg-card-hover:  #f9f9f9;
    --border-color:   rgba(34, 42, 53, 0.08);
    --text-primary:   #242424;
    --text-secondary: #898989;
    --accent-blue:    #0099ff;
    --accent-purple:  #6366F1;
    --accent-gradient: linear-gradient(135deg, #242424, #525252);

    /* ── ELEVATION SYSTEM ── */
    /* Level 0 — Flat: no shadow, page canvas */
    --shadow-0: none;

    /* Level 1 — Inset: pressed/recessed elements, input wells */
    --shadow-inset: inset 0px 1px 1.9px 0px rgba(0, 0, 0, 0.16);

    /* Level 2 — Ring + Soft: workhorse card elevation */
    --shadow:    0px 1px 5px -4px rgba(19, 19, 22, 0.70),
                 0px 0px 0px 1px rgba(34, 42, 53, 0.08),
                 0px 4px 8px  0px rgba(34, 42, 53, 0.05);

    /* Level 2 Alt — No ring, just shadows */
    --shadow-alt: 0px 1px 5px -4px rgba(36, 36, 36, 0.70),
                  0px 4px 8px  0px rgba(36, 36, 36, 0.05);

    /* Level 3 — Soft Only: ambient shadow, gentle floating */
    --shadow-md:  0px 1px 8px  -3px rgba(19, 19, 22, 0.50),
                  0px 0px 0px   1px rgba(34, 42, 53, 0.10),
                  0px 8px 20px  0px rgba(34, 42, 53, 0.08);

    /* Level 3 soft-only variant */
    --shadow-soft: 0px 4px 8px 0px rgba(34, 42, 53, 0.05);

    /* Larger lift */
    --shadow-lg: 0px 2px 20px  -4px rgba(19, 19, 22, 0.40),
                 0px 0px 0px    1px rgba(34, 42, 53, 0.08),
                 0px 16px 40px  0px rgba(34, 42, 53, 0.10);

    /* Level 4 — Inset Highlight: button 3D bevel (white inset on dark bg) */
    --shadow-btn-inset: rgba(255, 255, 255, 0.15) 0px 2px 0px inset;

    /* Button: ring + contact + inset highlight */
    --shadow-btn: 0px 0px 0px 1px rgba(34, 42, 53, 0.10),
                  0px 1px 3px 0px rgba(34, 42, 53, 0.08),
                  rgba(255, 255, 255, 0.15) 0px 2px 0px inset;

    /* White button: ring shadow border */
    --shadow-btn-white: 0px 0px 0px 1px rgba(34, 42, 53, 0.12),
                        0px 1px 5px -4px rgba(19, 19, 22, 0.40),
                        0px 4px 8px 0px rgba(34, 42, 53, 0.05);

    /* ── TYPOGRAPHY ── */
    --font-display: 'Cal Sans', 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'Roboto Mono', 'Fira Code', monospace;

    /* Aliases for backward compat */
    --heading: var(--font-display);
    --body:    var(--font-body);
    --mono:    var(--font-mono);

    /* ── TYPOGRAPHY SCALE ── */
    /* Display Hero — Cal Sans 64px / 600 / lh 1.10 / ls 0 */
    --text-display-size:    64px;
    --text-display-weight:  600;
    --text-display-lh:      1.10;
    --text-display-ls:      0px;

    /* Section Heading — Cal Sans 48px / 600 / lh 1.10 / ls 0 */
    --text-h1-size:   48px;
    --text-h1-weight: 600;
    --text-h1-lh:     1.10;

    /* Feature Heading — Cal Sans 24px / 600 / lh 1.30 / ls 0 */
    --text-h2-size:   24px;
    --text-h2-weight: 600;
    --text-h2-lh:     1.30;

    /* Sub-heading — Cal Sans 20px / 600 / lh 1.20 / ls +0.2px */
    --text-h3-size:   20px;
    --text-h3-weight: 600;
    --text-h3-lh:     1.20;
    --text-h3-ls:     0.2px;

    /* Card Title — Cal Sans 16px / 600 / lh 1.10 */
    --text-h4-size:   16px;
    --text-h4-weight: 600;
    --text-h4-lh:     1.10;

    /* Body Light — Inter 18px / 300 / lh 1.30 / ls -0.2px */
    --text-body-lg-size:   18px;
    --text-body-lg-weight: 300;
    --text-body-lg-lh:     1.30;
    --text-body-lg-ls:     -0.2px;

    /* Body Standard — Inter 16px / 300 / lh 1.50 / ls -0.2px */
    --text-body-size:   16px;
    --text-body-weight: 300;
    --text-body-lh:     1.50;
    --text-body-ls:     -0.2px;

    /* UI Label — Inter 16px / 600 / lh 1.00 */
    --text-label-size:   16px;
    --text-label-weight: 600;
    --text-label-lh:     1.00;

    /* Caption — Inter 14px / 500 / lh 1.14 */
    --text-caption-size:   14px;
    --text-caption-weight: 500;
    --text-caption-lh:     1.14;

    /* Micro — Inter 12px / 500 / lh 1.00 */
    --text-micro-size:   12px;
    --text-micro-weight: 500;
    --text-micro-lh:     1.00;

    /* Code — Roboto Mono 14px / 600 / lh 1.00 */
    --text-code-size:   14px;
    --text-code-weight: 600;
    --text-code-lh:     1.00;

    /* ── SPACING SCALE (8px base) ── */
    --space-1:  1px;
    --space-2:  2px;
    --space-3:  3px;
    --space-4:  4px;
    --space-6:  6px;
    --space-8:  8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-28: 28px;
    --space-80: 80px;
    --space-96: 96px;

    /* ── BORDER RADIUS SCALE ── */
    --r-2:    2px;
    --r-4:    4px;
    --r-6:    6px;
    --r-8:    8px;
    --r-12:   12px;
    --r-16:   16px;
    --r-pill: 9999px;

    /* Semantic aliases */
    --radius-sm:   var(--r-4);
    --radius:      var(--r-8);
    --radius-md:   var(--r-12);
    --radius-lg:   var(--r-16);
    --radius-pill: var(--r-pill);

    /* ── LAYOUT ── */
    --sidebar-width: 256px;
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
    background:  var(--gray-50);
    color:       var(--charcoal);
    font-family: var(--font-body);
    font-size:   var(--text-caption-size);
    font-weight: var(--text-caption-weight);
    line-height: var(--text-caption-lh);
    min-height:  100vh;
    display:     flex;
    overflow-x:  hidden;
}

a { text-decoration: none; color: inherit; transition: color 0.15s; }

/* ── TYPOGRAPHY ELEMENTS ─────────────────────────────────── */

/* Cal Sans headings */
h1 {
    font-family:    var(--font-display);
    font-size:      var(--text-h1-size);
    font-weight:    var(--text-h1-weight);
    line-height:    var(--text-h1-lh);
    letter-spacing: 0px;
    color:          var(--charcoal);
}

h2 {
    font-family:    var(--font-display);
    font-size:      var(--text-h2-size);
    font-weight:    var(--text-h2-weight);
    line-height:    var(--text-h2-lh);
    letter-spacing: 0px;
    color:          var(--charcoal);
}

h3 {
    font-family:    var(--font-display);
    font-size:      var(--text-h3-size);
    font-weight:    var(--text-h3-weight);
    line-height:    var(--text-h3-lh);
    letter-spacing: var(--text-h3-ls); /* +0.2px — mandatory below 24px */
    color:          var(--charcoal);
}

h4, h5, h6 {
    font-family:    var(--font-display);
    font-size:      var(--text-h4-size);
    font-weight:    var(--text-h4-weight);
    line-height:    var(--text-h4-lh);
    letter-spacing: 0.2px; /* +0.2px for small cal sans */
    color:          var(--charcoal);
}

p {
    font-family:    var(--font-body);
    font-size:      var(--text-body-size);
    font-weight:    var(--text-body-weight);
    line-height:    var(--text-body-lh);
    letter-spacing: var(--text-body-ls);
    color:          var(--muted);
}

code, pre {
    font-family: var(--font-mono);
    font-size:   var(--text-code-size);
    font-weight: var(--text-code-weight);
    line-height: var(--text-code-lh);
}

/* ── TYPOGRAPHY UTILITY CLASSES ──────────────────────────── */

/* Display Hero — Cal Sans 64px / 600 / 1.10 */
.text-display {
    font-family:    var(--font-display);
    font-size:      64px;
    font-weight:    600;
    line-height:    1.10;
    letter-spacing: 0px;
    color:          var(--charcoal);
}

/* Section Heading — Cal Sans 48px / 600 / 1.10 */
.text-section {
    font-family:    var(--font-display);
    font-size:      48px;
    font-weight:    600;
    line-height:    1.10;
    letter-spacing: 0px;
    color:          var(--charcoal);
}

/* Feature Heading — Cal Sans 24px / 600 / 1.30 */
.text-feature {
    font-family:    var(--font-display);
    font-size:      24px;
    font-weight:    600;
    line-height:    1.30;
    letter-spacing: 0px;
    color:          var(--charcoal);
}

/* Sub-heading — Cal Sans 20px / 600 / 1.20 / +0.2px */
.text-subheading {
    font-family:    var(--font-display);
    font-size:      20px;
    font-weight:    600;
    line-height:    1.20;
    letter-spacing: 0.2px;
    color:          var(--charcoal);
}

/* Card Title — Cal Sans 16px / 600 / 1.10 */
.text-card-title {
    font-family:    var(--font-display);
    font-size:      16px;
    font-weight:    600;
    line-height:    1.10;
    letter-spacing: 0.2px;
    color:          var(--charcoal);
}

/* Body Light — Inter 18px / 300 / 1.30 / -0.2px */
.text-body-light {
    font-family:    var(--font-body);
    font-size:      18px;
    font-weight:    300;
    line-height:    1.30;
    letter-spacing: -0.2px;
    color:          var(--muted);
}

/* Body Standard — Inter 16px / 300 / 1.50 / -0.2px */
.text-body {
    font-family:    var(--font-body);
    font-size:      16px;
    font-weight:    300;
    line-height:    1.50;
    letter-spacing: -0.2px;
    color:          var(--muted);
}

/* UI Label — Inter 16px / 600 / 1.00 */
.text-label {
    font-family:    var(--font-body);
    font-size:      16px;
    font-weight:    600;
    line-height:    1.00;
    letter-spacing: 0px;
    color:          var(--charcoal);
}

/* Caption — Inter 14px / 500 / 1.14 */
.text-caption {
    font-family:    var(--font-body);
    font-size:      14px;
    font-weight:    500;
    line-height:    1.14;
    letter-spacing: 0px;
    color:          var(--text2);
}

/* Micro — Inter 12px / 500 / 1.00 */
.text-micro {
    font-family:    var(--font-body);
    font-size:      12px;
    font-weight:    500;
    line-height:    1.00;
    letter-spacing: 0px;
    color:          var(--muted);
}

/* Code — Roboto Mono 14px / 600 / 1.00 */
.text-code {
    font-family:    var(--font-mono);
    font-size:      14px;
    font-weight:    600;
    line-height:    1.00;
    letter-spacing: 0px;
    color:          var(--charcoal);
}

/* ── LAYOUT ───────────────────────────────────────────────── */
.sidebar {
    width:      var(--sidebar-width);
    height:     100vh;
    position:   fixed;
    top: 0; left: 0;
    display:        flex;
    flex-direction: column;
    background:  var(--white);
    border-right: 1px solid var(--border);
    z-index:    100;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-200) transparent;
    transition: transform 0.25s ease;
}
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: var(--r-pill); }

.main-content, .content {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding:     40px 48px;
    background:  var(--gray-50);
    min-height:  100vh;
    width:       calc(100% - var(--sidebar-width));
}

/* ── SIDEBAR BRAND ────────────────────────────────────────── */
.sidebar-brand {
    padding:        20px 20px 16px;
    display:        flex;
    align-items:    center;
    gap:            10px;
    font-family:    var(--font-display);
    font-size:      16px;
    font-weight:    600;
    line-height:    1.10;
    letter-spacing: 0.2px;
    color:          var(--charcoal);
    border-bottom:  1px solid var(--border);
    margin-bottom:  8px;
    flex-shrink:    0;
}

.logo-mark {
    width:       30px;
    height:      30px;
    background:  var(--charcoal);
    border-radius: var(--r-4);
    display:     flex;
    align-items: center;
    justify-content: center;
    color:       #fff;
    font-family: var(--font-body);
    font-size:   13px;
    font-weight: 600;
    flex-shrink: 0;
}

/* ── NAV ─────────────────────────────────────────────────── */
.nav-section { padding: 4px 12px; margin-bottom: 4px; }

.nav-title {
    font-family:    var(--font-body);
    font-size:      10px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color:          var(--muted2);
    padding:        12px 8px 4px;
    line-height:    1.00;
}

.nav-link {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     8px 10px;
    border-radius: var(--r-8);
    color:       var(--gray-600);
    font-family: var(--font-body);
    font-size:   13px;
    font-weight: 500;
    line-height: 1.00;
    margin-bottom: 1px;
    transition:  all 0.12s;
    text-decoration: none;
}

.nav-link i {
    font-size:  13px;
    width:      16px;
    text-align: center;
    color:      var(--muted2);
    transition: color 0.12s;
    flex-shrink: 0;
}

.nav-link:hover { background: var(--gray-100); color: var(--charcoal); }
.nav-link:hover i { color: var(--gray-600); }

.nav-link.active {
    background: var(--gray-100);
    color:      var(--charcoal);
    font-weight: 600;
    box-shadow: 0px 0px 0px 1px rgba(34, 42, 53, 0.08);
}
.nav-link.active i { color: var(--charcoal); }

.sidebar-footer {
    margin-top:  auto;
    padding:     12px;
    border-top:  1px solid var(--border);
    flex-shrink: 0;
}

/* ── PAGE HEADER ─────────────────────────────────────────── */
.top-header {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    margin-bottom:   32px;
    gap:             16px;
    flex-wrap:       wrap;
}

.page-title h1 {
    font-family:    var(--font-display);
    font-size:      26px;
    font-weight:    600;
    line-height:    1.15;
    letter-spacing: 0px;
    color:          var(--charcoal);
    margin-bottom:  4px;
}

.page-title p {
    font-family:    var(--font-body);
    font-size:      14px;
    font-weight:    300;
    line-height:    1.50;
    letter-spacing: -0.2px;
    color:          var(--muted);
}

.header-actions {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-shrink: 0;
    flex-wrap:   wrap;
}

/* ── BUTTONS ─────────────────────────────────────────────── */

/* Dark Primary — #242424 / white / 8px / inset highlight (Level 4 elevation) */
.btn-primary {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             7px;
    padding:         9px 16px;
    background:      var(--charcoal);
    color:           #ffffff;
    border:          none;
    border-radius:   var(--r-8);
    font-family:     var(--font-body);
    font-size:       14px;
    font-weight:     600;
    line-height:     1.00;
    cursor:          pointer;
    transition:      opacity 0.15s, transform 0.15s;
    text-decoration: none;
    white-space:     nowrap;
    /* Ring + contact + inset white highlight (Level 4) */
    box-shadow:      0px 0px 0px 1px rgba(34, 42, 53, 0.10),
                     0px 1px 3px  0px rgba(34, 42, 53, 0.08),
                     rgba(255, 255, 255, 0.15) 0px 2px 0px inset;
}
.btn-primary:hover  { opacity: 0.78; transform: translateY(-1px); color: #ffffff; }
.btn-primary:active { opacity: 1.00; transform: none; }

/* Pill Button — #242424 / 9999px radius */
.btn-pill {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             7px;
    padding:         9px 20px;
    background:      var(--charcoal);
    color:           #ffffff;
    border:          none;
    border-radius:   var(--r-pill);
    font-family:     var(--font-body);
    font-size:       14px;
    font-weight:     600;
    line-height:     1.00;
    cursor:          pointer;
    transition:      opacity 0.15s, transform 0.15s;
    text-decoration: none;
    white-space:     nowrap;
    box-shadow:      0px 0px 0px 1px rgba(34, 42, 53, 0.10),
                     0px 1px 3px  0px rgba(34, 42, 53, 0.08),
                     rgba(255, 255, 255, 0.15) 0px 2px 0px inset;
}
.btn-pill:hover { opacity: 0.78; transform: translateY(-1px); color: #ffffff; }

/* White Shadow Button — #fff / ring shadow / 8px */
.btn-secondary {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             7px;
    padding:         8px 14px;
    background:      var(--white);
    color:           var(--text2);
    border:          none;
    border-radius:   var(--r-8);
    font-family:     var(--font-body);
    font-size:       14px;
    font-weight:     500;
    line-height:     1.00;
    cursor:          pointer;
    text-decoration: none;
    white-space:     nowrap;
    transition:      all 0.12s;
    /* White shadow button: ring border via shadow */
    box-shadow:      0px 0px 0px 1px rgba(34, 42, 53, 0.12),
                     0px 1px 5px -4px rgba(19, 19, 22, 0.40),
                     0px 4px 8px   0px rgba(34, 42, 53, 0.05);
}
.btn-secondary:hover {
    background:  var(--gray-50);
    color:       var(--charcoal);
    box-shadow:  0px 0px 0px 1px rgba(34, 42, 53, 0.18),
                 0px 1px 8px -3px rgba(19, 19, 22, 0.50),
                 0px 8px 20px 0px rgba(34, 42, 53, 0.08);
}

.btn-danger {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             7px;
    padding:         8px 14px;
    background:      #fef2f2;
    color:           var(--danger);
    border:          none;
    border-radius:   var(--r-8);
    font-family:     var(--font-body);
    font-size:       14px;
    font-weight:     600;
    line-height:     1.00;
    cursor:          pointer;
    transition:      all 0.15s;
    text-decoration: none;
    box-shadow:      0px 0px 0px 1px rgba(220, 38, 38, 0.15);
}
.btn-danger:hover { background: var(--danger); color: #fff; }

/* ── CARDS & ELEVATION ───────────────────────────────────── */

/* Shadow Card — Level 2: Ring + contact + diffused shadow */
.glass, .card {
    background:    var(--white);
    border-radius: var(--r-12);
    box-shadow:    var(--shadow);
}
.card { padding: 24px; margin-bottom: 20px; transition: box-shadow 0.2s, transform 0.2s; }
.card:hover {
    box-shadow: var(--shadow-md);
    transform:  translateY(-1px);
}

/* Alt Shadow Card — contact + soft, no ring */
.card-alt {
    background:    var(--white);
    border-radius: var(--r-12);
    padding:       24px;
    margin-bottom: 20px;
    box-shadow:    var(--shadow-alt);
    transition:    box-shadow 0.2s;
}

/* Inset Card — Level 1: recessed/pressed */
.card-inset {
    background:    var(--gray-50);
    border-radius: var(--r-8);
    padding:       20px 24px;
    box-shadow:    var(--shadow-inset);
}

/* ── STAT CARDS ──────────────────────────────────────────── */
.stats-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap:                   12px;
    margin-bottom:         24px;
}

.stat-card {
    background:    var(--white);
    border-radius: var(--r-12);
    padding:       20px 24px;
    box-shadow:    var(--shadow);
    transition:    box-shadow 0.2s, transform 0.2s;
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.stat-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   12px;
    font-family:     var(--font-body);
    font-size:       11px;
    font-weight:     600;
    text-transform:  uppercase;
    letter-spacing:  0.09em;
    color:           var(--muted);
}

.stat-icon {
    width:           28px;
    height:          28px;
    background:      var(--gray-100);
    border-radius:   var(--r-4);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       12px;
    color:           var(--gray-600);
}

.stat-value {
    font-family:    var(--font-display);
    font-size:      28px;
    font-weight:    600;
    letter-spacing: -0.03em;
    line-height:    1.10;
    color:          var(--charcoal);
    margin-bottom:  4px;
}

.stat-subtitle {
    font-family: var(--font-body);
    font-size:   12px;
    font-weight: 500;
    color:       var(--muted);
}

/* ── CHART CARDS ─────────────────────────────────────────── */
.charts-grid {
    display:               grid;
    grid-template-columns: 2fr 1fr;
    gap:                   12px;
    margin-bottom:         24px;
}

.chart-card {
    background:    var(--white);
    border-radius: var(--r-12);
    padding:       24px;
    box-shadow:    var(--shadow);
    display:       flex;
    flex-direction: column;
}

.chart-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   20px;
}

.chart-title {
    font-family:    var(--font-display);
    font-size:      16px;
    font-weight:    600;
    line-height:    1.10;
    letter-spacing: 0.2px;
    color:          var(--charcoal);
}

.chart-body { flex: 1; position: relative; min-height: 200px; }

.empty-state {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    height:          100%;
    gap:             10px;
    color:           var(--muted);
    font-size:       13px;
}
.empty-state i { font-size: 24px; color: var(--muted2); }

/* ── FORMS ───────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; text-align: left; }

.form-group label,
.field label {
    display:        block;
    font-family:    var(--font-body);
    font-size:      12px;
    font-weight:    600;
    line-height:    1.00;
    letter-spacing: 0.01em;
    color:          var(--charcoal);
    margin-bottom:  6px;
}

/* Default Input — shadow-ring border / 8px radius */
.form-input,
.field input,
.field select,
.field textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
select,
textarea {
    width:       100%;
    padding:     9px 12px;
    background:  var(--white);
    border:      none;
    border-radius: var(--r-8);
    color:       var(--charcoal);
    font-family: var(--font-body);
    font-size:   var(--text-caption-size);
    font-weight: var(--text-caption-weight);
    line-height: var(--text-caption-lh);
    outline:     none;
    transition:  box-shadow 0.15s;
    /* Level 1 inset + ring border shadow */
    box-shadow:  0px 0px 0px 1px rgba(34, 42, 53, 0.12),
                 inset 0px 1px 1.9px 0px rgba(0, 0, 0, 0.08);
}

/* Focus State — blue ring */
.form-input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
input:focus,
select:focus,
textarea:focus {
    box-shadow: 0px 0px 0px 2px rgba(59, 130, 246, 0.50),
                0px 0px 0px 1px rgba(34, 42, 53, 0.12),
                inset 0px 1px 1.9px 0px rgba(0, 0, 0, 0.08);
}

/* Error State */
.form-input.error,
input.error,
select.error {
    box-shadow: 0px 0px 0px 2px rgba(220, 38, 38, 0.40),
                0px 0px 0px 1px rgba(220, 38, 38, 0.30),
                inset 0px 1px 1.9px 0px rgba(0, 0, 0, 0.08);
}

.form-input::placeholder,
input::placeholder,
textarea::placeholder { color: var(--muted2); }

/* ── TABLES ──────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }

table thead th {
    background:     var(--gray-50);
    padding:        10px 16px;
    font-family:    var(--font-body);
    font-size:      10px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color:          var(--muted);
    border-bottom:  1px solid var(--border);
    text-align:     left;
    white-space:    nowrap;
}

table tbody td {
    padding:       13px 16px;
    border-bottom: 1px solid var(--border);
    font-family:   var(--font-body);
    font-size:     14px;
    font-weight:   500;
    line-height:   1.14;
    color:         var(--text2);
    vertical-align: middle;
}

table tbody tr:last-child td { border-bottom: none; }
table tbody tr:hover td { background: var(--gray-50); }

/* ── BADGES ──────────────────────────────────────────────── */
.badge {
    display:        inline-flex;
    align-items:    center;
    gap:            4px;
    font-family:    var(--font-body);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.02em;
    line-height:    1.00;
    padding:        3px 8px;
    border-radius:  var(--r-pill);
    background:     var(--gray-100);
    color:          var(--gray-700);
}
.badge-blue   { background: #eff6ff; color: #2563eb; }
.badge-green  { background: #f0fdf4; color: #16a34a; }
.badge-orange { background: #fffbeb; color: #d97706; }
.badge-red    { background: #fef2f2; color: #dc2626; }
.badge-purple { background: #f5f3ff; color: #6366f1; }

/* ── ALERTS ──────────────────────────────────────────────── */
.success-msg {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       12px 16px;
    background:    #f0fdf4;
    border-radius: var(--r-8);
    font-family:   var(--font-body);
    font-size:     13px;
    font-weight:   500;
    color:         #16a34a;
    margin-bottom: 16px;
    box-shadow:    0px 0px 0px 1px rgba(22, 163, 74, 0.15);
}

.error-message {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       12px 16px;
    background:    #fef2f2;
    border-radius: var(--r-8);
    font-family:   var(--font-body);
    font-size:     13px;
    font-weight:   500;
    color:         var(--danger);
    margin-bottom: 16px;
    box-shadow:    0px 0px 0px 1px rgba(220, 38, 38, 0.15);
}

/* ── MODAL ───────────────────────────────────────────────── */
.modal-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(17, 17, 17, 0.50);
    backdrop-filter: blur(4px);
    z-index:         500;
    display:         flex;
    justify-content: center;
    align-items:     center;
    padding:         20px;
}
.modal-content {
    background:    var(--white);
    border-radius: var(--r-16);
    padding:       28px;
    width:         100%;
    max-width:     460px;
    box-shadow:    var(--shadow-lg);
}

/* ── SETTINGS ────────────────────────────────────────────── */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.settings-card {
    background:    var(--white);
    border-radius: var(--r-12);
    padding:       24px;
    box-shadow:    var(--shadow);
    transition:    box-shadow 0.2s;
}
.settings-card:hover { box-shadow: var(--shadow-md); }
.settings-card-title {
    font-family:    var(--font-display);
    font-size:      16px;
    font-weight:    600;
    line-height:    1.10;
    letter-spacing: 0.2px;
    color:          var(--charcoal);
    margin-bottom:  18px;
    display:        flex;
    align-items:    center;
    gap:            10px;
}
.settings-card-title i { color: var(--gray-600); font-size: 14px; }
.info-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         11px 0;
    border-bottom:   1px solid var(--border);
}
.info-row:last-child { border-bottom: none; }
.info-label { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--muted); }
.info-value { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--charcoal); }

/* ── PAGINATION ──────────────────────────────────────────── */
.pagination { display: flex; justify-content: center; gap: 4px; margin-top: 24px; }
.pagination a, .pagination span {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       34px;
    height:          34px;
    padding:         0 8px;
    border-radius:   var(--r-8);
    font-family:     var(--font-body);
    font-size:       12px;
    font-weight:     600;
    color:           var(--text2);
    background:      var(--white);
    box-shadow:      0px 0px 0px 1px rgba(34,42,53,0.10),
                     0px 1px 3px 0px rgba(34,42,53,0.08);
    transition:      all 0.15s;
}
.pagination a:hover  { background: var(--gray-100); color: var(--charcoal); }
.pagination .current { background: var(--charcoal); color: #fff; box-shadow: none; }

/* ── LINKS TABLE ─────────────────────────────────────────── */
.links-table { width: 100%; border-collapse: collapse; }
.links-table th {
    text-align:     left;
    padding:        10px 16px;
    color:          var(--muted);
    font-family:    var(--font-body);
    font-weight:    600;
    font-size:      10px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    border-bottom:  1px solid var(--border);
    background:     var(--gray-50);
    white-space:    nowrap;
}
.links-table td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
.links-table tr:hover td { background: var(--gray-50); }
.links-table tr:last-child td { border-bottom: none; }
.link-url {
    font-family: var(--font-body);
    font-weight: 600;
    font-size:   13px;
    color:       var(--charcoal);
    margin-bottom: 3px;
    display:     block;
}
.link-original {
    font-family: var(--font-body);
    font-size:   11px;
    font-weight: 400;
    color:       var(--muted);
    max-width:   280px;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
    display:     block;
}

/* ── TOASTS ──────────────────────────────────────────────── */
.toast {
    position:      fixed;
    bottom:        24px;
    right:         24px;
    background:    var(--charcoal);
    color:         #fff;
    padding:       12px 20px;
    border-radius: var(--r-12);
    font-family:   var(--font-body);
    font-size:     13px;
    font-weight:   500;
    box-shadow:    var(--shadow-lg);
    z-index:       9999;
    transform:     translateY(100px);
    opacity:       0;
    transition:    all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.toast.show { transform: translateY(0); opacity: 1; }

/* ── MISC HELPERS ────────────────────────────────────────── */
.mobile-toggle {
    display:    none;
    font-size:  18px;
    cursor:     pointer;
    background: none;
    border:     none;
    color:      var(--charcoal);
    padding:    4px;
}

.links-table-wrap {
    background:    var(--white);
    border-radius: var(--r-12);
    box-shadow:    var(--shadow);
    overflow:      hidden;
}

.analytics-header {
    background:    var(--white);
    border-radius: var(--r-12);
    padding:       24px;
    margin-bottom: 20px;
    box-shadow:    var(--shadow);
    display:       flex;
    align-items:   center;
    gap:           20px;
    flex-wrap:     wrap;
}

.field { margin-bottom: 15px; }
hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }

.icon-gradient {
    background: linear-gradient(135deg, #242424, #525252);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-title {
    font-family:    var(--font-display);
    font-size:      20px;
    font-weight:    600;
    line-height:    1.20;
    letter-spacing: 0.2px;
    color:          var(--charcoal);
}
.section-desc {
    font-family:    var(--font-body);
    font-size:      14px;
    font-weight:    300;
    line-height:    1.50;
    letter-spacing: -0.2px;
    color:          var(--muted);
    margin-top:     4px;
}

.btn-copy {
    padding:       5px 10px;
    background:    var(--gray-100);
    border:        none;
    border-radius: var(--r-8);
    color:         var(--gray-700);
    font-family:   var(--font-body);
    font-size:     11px;
    font-weight:   600;
    cursor:        pointer;
    transition:    all 0.15s;
}
.btn-copy:hover { background: var(--charcoal); color: #fff; }

/* status dot */
.status-dot {
    display:       inline-block;
    width:         6px;
    height:        6px;
    border-radius: 50%;
    margin-right:  6px;
    flex-shrink:   0;
}
.status-dot.green  { background: #16a34a; }
.status-dot.red    { background: #dc2626; }
.status-dot.orange { background: #d97706; }
.status-dot.gray   { background: var(--muted2); }

/* text helpers */
.text-muted   { color: var(--muted) !important; }
.text-success { color: var(--success) !important; }
.text-danger  { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.font-mono    { font-family: var(--font-mono) !important; }
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.gap-2        { gap: 8px; }
.gap-3        { gap: 12px; }
.mt-auto      { margin-top: auto; }

/* ── LOGIN ───────────────────────────────────────────────── */
.login-container {
    width:           100vw;
    height:          100vh;
    display:         flex;
    justify-content: center;
    align-items:     center;
    background:      var(--gray-50);
}
.login-card {
    width:         100%;
    max-width:     400px;
    padding:       40px;
    background:    var(--white);
    border-radius: var(--r-16);
    box-shadow:    var(--shadow-lg);
}
.login-logo {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    margin-bottom:   8px;
    font-family:     var(--font-display);
    font-size:       20px;
    font-weight:     600;
    letter-spacing:  0.2px;
    color:           var(--charcoal);
}
.login-orb-1, .login-orb-2 { display: none; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .charts-grid  { grid-template-columns: 1fr; }
    .settings-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); width: 280px; }
    .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .main-content, .content { margin-left: 0; width: 100%; padding: 20px 16px; }
    .mobile-toggle { display: flex; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .top-header { flex-wrap: wrap; }
}
@media (max-width: 500px) {
    .stats-grid { grid-template-columns: 1fr; }
    .main-content, .content { padding: 16px 12px; }
}