/*
      Aurora Glass — Glass only on header & cards (with chromatic edge shimmer).
      All other components are dark neumorphic (no chroma, no blur).
      Zero dependencies. Prefix: ag-
    */

    :root {
      --bg-0: #010512;
      --bg-1a: rgba(4,10,28,0.62);
      --bg-1b: rgba(6,14,36,0.44);

      --ink-0: #e8f3ff;
      --ink-1: #b9d1ff;
      --ink-2: #7fa4ff;

      /* Aurora hues for borders only (glass only) */
      --chroma-blue: #47b6ff;
      --chroma-cyan: #36e7ff;
      --chroma-green: #2ffdac;
      --chroma-purple: #b46dff;

      --glass-blur: 18px;
      --glass-sat: 1.25;
      --glass-border: 3px;
      --radius: 16px;
      --radius-lg: 22px;

      --shadow-0: 0 8px 28px rgba(0,0,0,0.45);
      --shadow-1: 0 18px 60px rgba(0,0,0,0.55);

      /* Neumorphic tokens */
      --neo-bg: #0a142e; /* deep navy */
      --neo-raised-dark: rgba(0,0,0,0.55);
      --neo-raised-light: rgba(130,170,255,0.08);
      --neo-inset-dark: rgba(0,0,0,0.6);
      --neo-inset-light: rgba(130,170,255,0.10);

      --ease-out: cubic-bezier(.16,1,.3,1);
      --ease-in: cubic-bezier(.32,0,.67,0);
      --dur-1: .18s;
      --dur-2: .32s;

      /* Shimmer (glass only, set via JS) */
      --mx: 50%;
      --my: 50%;
      --shine: .18; /* tight highlight */
      --glow-blur: 1.2px;
      --falloff-px: 110; /* cursor influence radius */
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body { margin: 0; background: var(--bg-0); color: var(--ink-0); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; -webkit-font-smoothing: antialiased; }

    /* Typography */
    .ag-display-1 { font-size: clamp(2.2rem, 2.2rem + 5vw, 5.2rem); line-height: 1.05; letter-spacing: .4px; font-weight: 800; }
    .ag-display-2 { font-size: clamp(1.6rem, 1.4rem + 2.5vw, 3rem); line-height: 1.1; font-weight: 800; }
    .ag-headline { font-size: 1.5rem; line-height: 1.2; font-weight: 750; }
    .ag-subhead  { font-size: 1.125rem; line-height: 1.4; color: var(--ink-1); font-weight: 600; }
    .ag-body     { font-size: 1rem; line-height: 1.55; color: var(--ink-0); }
    .ag-caption  { font-size: .875rem; line-height: 1.5; color: var(--ink-2); }
    .ag-eyebrow  { font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); font-weight: 800; }
    .ag-mono     { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

    /* Layout */
    .ag-wrap { max-width: 1200px; margin: 0 auto; padding: 32px 20px 120px; position: relative; }
    .ag-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
    .ag-span-12 { grid-column: span 12; }
    .ag-span-6 { grid-column: span 6; }
    .ag-span-4 { grid-column: span 4; }
    @media (max-width: 900px) { .ag-span-6, .ag-span-4 { grid-column: span 12; } }

    /* ===== GLASS (header & cards only) ===== */
    .ag-glass { position: relative; border-radius: var(--radius); border: var(--glass-border) solid transparent; background: linear-gradient(0deg, var(--bg-1a), var(--bg-1b)) padding-box; box-shadow: var(--shadow-0); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
    .ag-glass:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }

    /* Border-only chroma via masked pseudo-element */
    .ag-chroma::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: var(--glass-border); background: radial-gradient(circle at var(--mx) var(--my), rgba(71,182,255, calc(.90*var(--shine))) 0%, rgba(54,231,255, calc(.75*var(--shine))) 6%, rgba(47,253,172, calc(.55*var(--shine))) 10%, rgba(180,109,255, calc(.45*var(--shine))) 14%, rgba(180,109,255, 0) 18% ); filter: blur(var(--glow-blur)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }

    /* Navbar (glass) */
    .ag-nav { position: sticky; top: 16px; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 999px; }
    .ag-nav .ag-nav-links { display: flex; gap: 8px; }

    /* Cards (glass) */
    .ag-card { padding: 18px; border-radius: var(--radius-lg); }
    .ag-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .ag-card-actions { display: flex; gap: 8px; }

    /* ===== NEUMORPHIC (everything else) ===== */
    .ag-neo { background: var(--neo-bg); color: var(--ink-0); border-radius: var(--radius); box-shadow: 10px 10px 22px var(--neo-raised-dark), -10px -10px 22px var(--neo-raised-light); }
    .ag-neo.inset { box-shadow: inset 8px 8px 16px var(--neo-inset-dark), inset -8px -8px 16px var(--neo-inset-light); }

    /* Buttons */
    .ag-btn { position: relative; display: inline-flex; align-items: center; gap: .6rem; padding: .75rem 1rem; border-radius: 14px; font-weight: 750; letter-spacing: .2px; color: var(--ink-0); cursor: pointer; user-select: none; text-decoration: none; line-height: 1; border: none; background: var(--neo-bg); box-shadow: 10px 10px 22px var(--neo-raised-dark), -10px -10px 22px var(--neo-raised-light); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out); }
    .ag-btn:hover { transform: translateY(-1px); box-shadow: 12px 12px 26px var(--neo-raised-dark), -12px -12px 26px var(--neo-raised-light); }
    .ag-btn:active { transform: translateY(0); box-shadow: inset 8px 8px 16px var(--neo-inset-dark), inset -8px -8px 16px var(--neo-inset-light); filter: brightness(.98); }
    .ag-btn--ghost { background: linear-gradient(0deg, rgba(8,16,38,0.9), rgba(10,20,44,0.9)); box-shadow: 8px 8px 18px var(--neo-raised-dark), -8px -8px 18px var(--neo-raised-light); }

    /* Pills & badges (neumorphic) */
    .ag-pill { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem .75rem; border-radius: 999px; background: var(--neo-bg); box-shadow: 8px 8px 16px var(--neo-raised-dark), -8px -8px 16px var(--neo-raised-light); }
    .ag-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .6rem; border-radius: 999px; font-weight: 700; color: var(--ink-1); background: var(--neo-bg); box-shadow: inset 6px 6px 12px var(--neo-inset-dark), inset -6px -6px 12px var(--neo-inset-light); }

    /* Icon dot */
    .ag-dot { width: 8px; height: 8px; border-radius: 999px; background: radial-gradient(circle at 30% 30%, #fff, var(--chroma-blue) 40%, transparent 70%); filter: drop-shadow(0 0 10px rgba(90,170,255,0.6)); }

    /* Inputs (neumorphic) */
    .ag-field { display: flex; flex-direction: column; gap: .4rem; }
    .ag-label { font-weight: 700; color: var(--ink-1); }
    .ag-hint  { font-size: .85rem; color: var(--ink-2); }
    .ag-input, .ag-select, .ag-textarea { width: 100%; padding: .75rem .85rem; border-radius: 14px; color: var(--ink-0); outline: none; border: none; background: var(--neo-bg); box-shadow: inset 6px 6px 14px var(--neo-inset-dark), inset -6px -6px 14px var(--neo-inset-light); transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
    .ag-input:focus, .ag-select:focus, .ag-textarea:focus { box-shadow: inset 8px 8px 16px var(--neo-inset-dark), inset -8px -8px 16px var(--neo-inset-light), 0 0 0 2px rgba(180,110,255,0.22); }

    /* Tabs (neumorphic - clean version) */
    .ag-tabs {
      display: flex;
      gap: 10px;
      padding: 10px;
      border-radius: 14px;
      background: var(--neo-bg);
      box-shadow:
        inset 8px 8px 16px var(--neo-inset-dark),
        inset -8px -8px 16px var(--neo-inset-light);
    }
    .ag-tab {
      padding: .6rem 1rem;
      border-radius: 12px;
      font-weight: 700;
      color: var(--ink-1);
      cursor: pointer;
      background: var(--neo-bg);
      box-shadow:
        10px 10px 22px var(--neo-raised-dark),
        -10px -10px 22px var(--neo-raised-light);
      transition:
        transform var(--dur-2) var(--ease-out),
        box-shadow var(--dur-2) var(--ease-out),
        color var(--dur-2) var(--ease-out);
    }
    .ag-tab:hover {
      transform: translateY(-1px);
      box-shadow:
        12px 12px 26px var(--neo-raised-dark),
        -12px -12px 26px var(--neo-raised-light);
      color: #fff;
    }
    .ag-tab:active {
      transform: translateY(0);
      box-shadow:
        inset 8px 8px 16px var(--neo-inset-dark),
        inset -8px -8px 16px var(--neo-inset-light);
    }
    .ag-tab[aria-selected="true"] {
      color: var(--ink-0);
      box-shadow:
        inset 8px 8px 16px var(--neo-inset-dark),
        inset -8px -8px 16px var(--neo-inset-light);
    }

    /* Accordion (neumorphic) */
    .ag-accordion-item { overflow: hidden; border-radius: var(--radius); background: var(--neo-bg); box-shadow: 10px 10px 22px var(--neo-raised-dark), -10px -10px 22px var(--neo-raised-light); }
    .ag-accordion-header { width: 100%; text-align: left; background: none; color: var(--ink-0); padding: 14px 16px; font-weight: 750; cursor: pointer; }
    .ag-accordion-panel { padding: 0 16px 16px; display: none; }
    .ag-accordion-item[open] .ag-accordion-panel { display: block; }

    /* Dropdown (neumorphic) */
    .ag-dropdown { position: relative; display: inline-block; }
    .ag-menu { position: absolute; top: 100%; right: 0; margin-top: 8px; min-width: 200px; display: none; padding: 6px; border-radius: 12px; background: var(--neo-bg); box-shadow: 10px 10px 22px var(--neo-raised-dark), -10px -10px 22px var(--neo-raised-light); }
    .ag-menu a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--ink-0); text-decoration: none; }
    .ag-menu a:hover { background: rgba(12,22,50,0.45); }
    .ag-dropdown[open] .ag-menu { display: block; }

    /* Toasts (neumorphic) */
    .ag-toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 10px; width: min(380px, calc(100% - 32px)); z-index: 50; }
    .ag-toast { padding: 12px 14px; border-radius: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--neo-bg); box-shadow: 10px 10px 22px var(--neo-raised-dark), -10px -10px 22px var(--neo-raised-light); }

    /* Modal (neumorphic) */
    .ag-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; place-items: center; z-index: 40; }
    .ag-modal { width: min(560px, calc(100% - 32px)); border-radius: var(--radius-lg); padding: 18px; background: var(--neo-bg); box-shadow: 10px 10px 22px var(--neo-raised-dark), -10px -10px 22px var(--neo-raised-light); }
    .ag-modal-backdrop[open] { display: grid; }

    /* Table (neumorphic) */
    table.ag-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 16px; background: var(--neo-bg); box-shadow: 10px 10px 22px var(--neo-raised-dark), -10px -10px 22px var(--neo-raised-light); }
    table.ag-table thead th { text-align: left; font-weight: 800; padding: 12px 14px; color: #d2e5ff; background: rgba(6,14,36,0.55); }
    table.ag-table tbody td { padding: 12px 14px; color: #cfe1ff; border-bottom: 1px solid rgba(120,180,255,0.14); background: rgba(6,14,36,0.35); }
    table.ag-table tbody tr:hover td { background: rgba(12,22,50,0.45); }

    /* Breadcrumbs & Pagination (neumorphic) */
    .ag-breadcrumbs { display: flex; align-items: center; gap: 8px; color: var(--ink-2); background: var(--neo-bg); padding: 8px 10px; border-radius: 12px; box-shadow: 8px 8px 16px var(--neo-raised-dark), -8px -8px 16px var(--neo-raised-light); }
    .ag-breadcrumbs a { color: var(--ink-1); text-decoration: none; }
    .ag-breadcrumbs a:hover { color: #e6f0ff; }
    .ag-pagination { display: flex; align-items: center; gap: 8px; background: var(--neo-bg); padding: 6px; border-radius: 12px; box-shadow: 8px 8px 16px var(--neo-raised-dark), -8px -8px 16px var(--neo-raised-light); }

    /* Utilities */
    .ag-hidden { display: none !important; }

    a { color: #b7d1ff; text-decoration: none; }
    a:hover { color: #e6f0ff; }
  </style>