/* FILE: /assets/styles.css */

/* =========================
   NEW DESIGN SYSTEM (NF-*)
   Friends of the National Liver Waiting List
   ========================= */

/* Scoped to body.nf for new design */
body.nf{
  /* Layout */
  --nf-maxw: 1120px;

  /* Primary Colors */
  --nf-navy: #1b2a55;
  --nf-navy-2: #23366e;
  --nf-purple: #7766ad;
  --nf-purple-2: #6d5aa8;
  --nf-sky: #8fc3ff;
  --nf-sky-2: #d7ecff;
  --nf-yellow: #f6c343;
  --nf-coral: #f47b6a;
  --nf-teal: #4db6ac;

  /* Neutrals - Light Theme */
  --nf-ink: #162033;
  --nf-muted: #5a6376;

  /* Component Colors - Light Theme */
  --nf-card: #ffffff;
  --nf-card-soft: rgba(255,255,255,.70);
  --nf-card-soft-2: rgba(255,255,255,.78);
  --nf-border: rgba(27,42,85,.18);
  --nf-border-light: rgba(27,42,85,.10);
  --nf-border-strong: rgba(27,42,85,.20);
  --nf-shadow: 0 10px 30px rgba(20,26,40,.10);
  --nf-shadow-2: 0 18px 60px rgba(20,26,40,.14);
  --nf-shadow-hover: 0 18px 44px rgba(20,26,40,.14);

  /* Background Gradients - Light Theme (3-layer) */
  --nf-bg-layer-1: radial-gradient(1200px 700px at 92% 4%, rgba(100,160,230,.95), rgba(100,160,230,0) 55%);
  --nf-bg-layer-2: radial-gradient(1000px 600px at 12% 12%, rgba(190,215,240,.95), rgba(190,215,240,0) 55%);
  --nf-bg-layer-3: linear-gradient(#f0f4f8, #e8eef5);
  --nf-bg-body: var(--nf-bg-layer-1), var(--nf-bg-layer-2), var(--nf-bg-layer-3);
  --nf-bg-header: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.52));
  --nf-bg-hero: linear-gradient(180deg, var(--nf-purple), var(--nf-purple-2));
  --nf-bg-hero-art: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
  --nf-bg-circle: #fff;

  /* Overlay Colors - Light Theme */
  --nf-overlay-card: rgba(255,255,255,.78);
  --nf-overlay-footer: rgba(255,255,255,.62);
  --nf-overlay-pill: rgba(255,255,255,.72);

  /* Border Colors - Light Theme */
  --nf-border-hero: rgba(255,255,255,.18);
  --nf-border-hero-art: rgba(27,42,85,.18);
  --nf-border-footer: rgba(27,42,85,.10);

  /* Hover States - Light Theme */
  --nf-hover-nav: rgba(143,195,255,.24);
  --nf-hover-table: rgba(246,195,67,.10);
  --nf-hover-active: rgba(246,195,67,.30);
  --nf-border-active: rgba(246,195,67,.55);

  /* Text Colors - Light Theme */
  --nf-text-hero: #ffffff;
  --nf-text-hero-muted: rgba(255,255,255,.86);
  --nf-text-btn-primary: #ffffff;
  --nf-text-btn-primary-alt: var(--nf-navy);

  /* Sizing */
  --nf-r-sm: 10px;
  --nf-r-md: 14px;
  --nf-r-lg: 18px;
  --nf-r-xl: 22px;

  /* Typography */
  --nf-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Dark mode overrides for new design - POLAR OPPOSITE COLORS */
body.nf[data-theme="dark"]{
  color-scheme: dark;

  /* Neutrals - Polar Opposite */
  --nf-ink: #eaf0ff;
  --nf-muted: rgba(234,240,255,.74);

  /* Component Colors - Polar Opposite */
  --nf-card: rgba(18,22,38,.92);
  --nf-card-soft: rgba(30,35,55,.75);
  --nf-card-soft-2: rgba(25,30,45,.85);
  --nf-border: rgba(255,255,255,.14);
  --nf-border-light: rgba(255,255,255,.10);
  --nf-border-strong: rgba(255,255,255,.20);
  --nf-shadow: 0 14px 40px rgba(0,0,0,.32);
  --nf-shadow-2: 0 22px 70px rgba(0,0,0,.40);
  --nf-shadow-hover: 0 22px 60px rgba(0,0,0,.36);

  /* Background Gradients - Dark Theme */
  --nf-bg-body: var(--nf-bg-layer-1-dark), var(--nf-bg-layer-2-dark), var(--nf-bg-layer-3-dark);
  --nf-bg-header: linear-gradient(180deg, rgba(15,20,30,.92), rgba(20,25,38,.75));
  --nf-bg-hero: linear-gradient(180deg, #2d2a4a, #252340);
  --nf-bg-hero-art: linear-gradient(180deg, rgba(20,22,40,.90), rgba(15,18,30,.85));
  --nf-bg-circle: rgba(25,30,45,.90);

  /* 3-Layer Background Gradients - Dark Theme (Polar Opposite) */
  --nf-bg-layer-1-dark: radial-gradient(1200px 700px at 92% 4%, rgba(180,130,70,.25), rgba(180,130,70,0) 55%);
  --nf-bg-layer-2-dark: radial-gradient(1000px 600px at 12% 12%, rgba(70,60,90,.35), rgba(70,60,90,0) 55%);
  --nf-bg-layer-3-dark: linear-gradient(#0a0d14, #12171f);
  --nf-bg-body-dark: var(--nf-bg-layer-1-dark), var(--nf-bg-layer-2-dark), var(--nf-bg-layer-3-dark);

  /* Overlay Colors - Dark Theme */
  --nf-overlay-card: rgba(20,25,40,.85);
  --nf-overlay-footer: rgba(15,20,30,.75);
  --nf-overlay-pill: rgba(40,45,65,.72);

  /* Border Colors - Dark Theme */
  --nf-border-hero: rgba(255,255,255,.12);
  --nf-border-hero-art: rgba(255,255,255,.18);
  --nf-border-footer: rgba(255,255,255,.10);

  /* Hover States - Dark Theme */
  --nf-hover-nav: rgba(143,195,255,.15);
  --nf-hover-table: rgba(246,195,67,.15);
  --nf-hover-active: rgba(246,195,67,.25);
  --nf-border-active: rgba(246,195,67,.40);

  /* Text Colors - Dark Theme */
  --nf-text-hero: #eaf0ff;
  --nf-text-hero-muted: rgba(234,240,255,.86);
  --nf-text-btn-primary: #eaf0ff;
  --nf-text-btn-primary-alt: #eaf0ff;
}

/* =========================
   BASE (NEW DESIGN)
   ========================= */
body.nf{
  margin:0;
  font-family: var(--nf-font);
  color: var(--nf-ink);
  background: var(--nf-bg-body);
  min-height:100vh;
}

body.nf a{ color: inherit; text-decoration: none; }
body.nf a:hover{ text-decoration: none; }
body.nf *{ box-sizing: border-box; }
body.nf img{ max-width:100%; height:auto; display:block; }

body.nf :focus-visible{
  outline: 3px solid var(--nf-yellow);
  outline-offset: 3px;
  border-radius: 10px;
}

body.nf .container{ width: min(var(--nf-maxw), calc(100% - 32px)); margin: 0 auto; }
body.nf .muted{ color: var(--nf-muted); }

/* =========================
   NEW: Utility Row
   ========================= */
body.nf .utility-row{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  font-size: 12px;
  color: var(--nf-muted);
  padding: 2px 2px 10px;
}
body.nf .utility-row .utility-links{ display:flex; gap: 14px; flex-wrap: wrap; }
body.nf .utility-row a{ color: var(--nf-muted); font-weight: 700; }
body.nf .utility-row a:hover{ color: var(--nf-navy); text-decoration: underline; }
body.nf[data-theme="dark"] .utility-row a:hover{ color: var(--nf-sky); }

/* =========================
   NEW: Site Header
   ========================= */
body.nf .site-header{
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 14px 0 12px;
  background: var(--nf-bg-header);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--nf-border-light);
}

body.nf .header-card{
  background: var(--nf-overlay-card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--nf-border-light);
  border-radius: var(--nf-r-xl);
  box-shadow: var(--nf-shadow);
  padding: 14px 16px 10px;
}

body.nf .brand-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}

body.nf .brand{ display:flex; align-items:center; gap: 12px; min-width: 240px; }
body.nf .brand .logo{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  box-shadow: var(--nf-shadow);
  background: #fff;
}
body.nf .brand .title{ display:flex; flex-direction: column; line-height: 1.15; }
body.nf .brand .title strong{ font-size: 14px; color: var(--nf-navy); }
body.nf .brand .title span{ font-size: 12px; color: var(--nf-muted); font-weight: 600; }
body.nf[data-theme="dark"] .brand .title strong{ color: var(--nf-sky); }

body.nf .nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
body.nf .nav a{
  font-weight: 800;
  font-size: 13px;
  color: var(--nf-navy);
  opacity: .92;
  padding: 8px 10px;
  border-radius: 999px;
}
body.nf .nav a:hover{ background: var(--nf-hover-nav); }
body.nf .nav a[aria-current="page"]{
  background: var(--nf-hover-active);
  border: 1px solid var(--nf-border-active);
}
body.nf[data-theme="dark"] .nav a{ color: var(--nf-ink); }

body.nf .header-actions{ display:flex; align-items:center; gap: 10px; }

/* =========================
   NEW: Action Bar
   ========================= */
body.nf .action-bar{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body.nf .action-card{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: var(--nf-r-lg);
  background: var(--nf-card);
  border: 2px solid var(--nf-border-strong);
  box-shadow: var(--nf-shadow);
  transition: transform .08s ease, box-shadow .18s ease;
  min-height: 58px;
  cursor: pointer;
}
body.nf .action-card:hover{ transform: translateY(-1px); box-shadow: var(--nf-shadow-hover); }
body.nf .action-card a{ display:flex; align-items:center; gap: 12px; width:100%; height:100%; text-decoration:none; }

body.nf .action-card .icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight: 900;
  color: var(--nf-text-btn-primary);
  background: linear-gradient(180deg, var(--nf-navy), var(--nf-navy-2));
  box-shadow: 0 10px 24px rgba(27,42,85,.18);
  flex: 0 0 auto;
}

body.nf .action-card .meta{ display:flex; flex-direction: column; gap: 2px; line-height: 1.12; }
body.nf .action-card .meta strong{ font-size: 12px; letter-spacing: .02em; color: var(--nf-navy); }
body.nf .action-card .meta span{ font-size: 11px; color: var(--nf-muted); font-weight: 700; }
body.nf[data-theme="dark"] .action-card .meta strong{ color: var(--nf-sky); }

body.nf .action-card.danger .icon{ background: linear-gradient(180deg, #e64444, #b21f1f); }
body.nf .action-card.sun .icon{ background: linear-gradient(180deg, var(--nf-yellow), #e6a90b); color: #3a2b00; }
body.nf .action-card.teal .icon{ background: linear-gradient(180deg, var(--nf-teal), #278e85); }

/* =========================
   NEW: Buttons (NF Design)
   ========================= */
body.nf .btn{
  appearance:none;
  border: 1px solid var(--nf-border);
  background: var(--nf-card);
  color: var(--nf-navy);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition: transform .08s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
body.nf .btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--nf-shadow-hover);
  border-color: rgba(27,42,85,.28);
}
body.nf .btn:active{ transform: translateY(0); }

body.nf .btn.primary{
  background: linear-gradient(180deg, var(--nf-navy), var(--nf-navy-2));
  color: var(--nf-text-btn-primary);
  border-color: rgba(255,255,255,.18);
}
body.nf .btn.ghost{ background: transparent; }
body.nf .btn.soft{ background: var(--nf-card-soft); backdrop-filter: blur(8px); }
body.nf[data-theme="dark"] .btn.primary{ color: var(--nf-text-btn-primary); }

/* =========================
   NEW: Hero Band
   ========================= */
body.nf .nf-top-pad{ height: 20px; }

body.nf .hero-band{
  margin: 16px auto 18px;
  border-radius: var(--nf-r-xl);
  overflow:hidden;
  background: var(--nf-bg-hero);
  box-shadow: var(--nf-shadow-2);
  border: 1px solid var(--nf-border-hero);
}

body.nf .hero-band .hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items:center;
  padding: 26px;
}

body.nf .hero-band h1,
body.nf .hero-band h2{ margin: 0 0 8px; color: var(--nf-text-hero); letter-spacing: -.02em; }

body.nf .hero-band p{
  margin: 0 0 14px;
  color: var(--nf-text-hero-muted);
  font-weight: 600;
  line-height: 1.5;
}

body.nf .hero-band .hero-cta{ display:flex; gap: 10px; flex-wrap: wrap; }
body.nf .hero-band .hero-cta .btn{ border-color: rgba(255,255,255,.24); }

body.nf .hero-band .hero-cta .btn.primary{
  background: linear-gradient(180deg, #ffffff, rgba(255,255,255,.92));
  color: var(--nf-text-btn-primary-alt);
  border-color: rgba(255,255,255,.30);
}

body.nf .hero-band .hero-art{
  min-height: 220px;
  border-radius: var(--nf-r-lg);
  background:
    radial-gradient(120px 120px at 20% 30%, rgba(246,195,67,.95), rgba(246,195,67,0) 60%),
    radial-gradient(170px 170px at 70% 65%, rgba(143,195,255,.90), rgba(143,195,255,0) 60%),
    radial-gradient(140px 140px at 78% 25%, rgba(244,123,106,.85), rgba(244,123,106,0) 60%),
    var(--nf-bg-hero-art);
  border: 1px solid var(--nf-border-hero-art);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

body.nf .hero-box{
  position: absolute;
  width: 120px;
  height: 70px;
  border-radius: 14px;
  background: var(--nf-card);
  border: 1px solid var(--nf-border-hero-art);
  box-shadow: var(--nf-shadow);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

body.nf .hero-box:hover,
body.nf .hero-box:focus{
  transform: scale(1.08);
  box-shadow: var(--nf-shadow-hover);
  outline: none;
}

body.nf .hero-box:focus-visible{
  outline: 3px solid var(--nf-yellow);
  outline-offset: 3px;
}

body.nf .hero-box-left{
  left: 18px;
  top: 22px;
  transform: rotate(-6deg);
}

body.nf .hero-box-right{
  right: 18px;
  bottom: 22px;
  transform: rotate(7deg);
}

body.nf .hero-box-label{
  font-size: 12px;
  font-weight: 700;
  color: var(--nf-navy);
  text-align: center;
  line-height: 1.2;
}

body.nf[data-theme="dark"] .hero-box-label{
  color: var(--nf-ink);
}

/* =========================
    Modal Styles
    ========================= */

body.nf .modal{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

body.nf .modal:not([hidden]){
  opacity: 1;
  visibility: visible;
}

body.nf .modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

body.nf .modal-container{
  position: relative;
  background: var(--nf-card);
  border-radius: var(--nf-r-lg);
  box-shadow: var(--nf-shadow-2);
  max-width: 640px;
  width: calc(100% - 32px);
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.9);
  transition: transform .3s ease;
}

body.nf .modal:not([hidden]) .modal-container{
  transform: scale(1);
}

body.nf .modal-close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--nf-card);
  color: var(--nf-ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--nf-shadow);
  transition: transform .18s ease, background .18s ease;
  z-index: 1;
}

body.nf .modal-close:hover{
  transform: scale(1.1);
  background: var(--nf-hover-nav);
}

body.nf .modal-header{
  padding: 20px 20px 12px;
  border-bottom: 1px solid var(--nf-border-light);
}

body.nf .modal-header h2{
  margin: 0;
  font-size: 18px;
  color: var(--nf-navy);
  padding-right: 40px;
}

body.nf[data-theme="dark"] .modal-header h2{
  color: var(--nf-ink);
}

body.nf .modal-video{
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: #000;
}

body.nf .modal-video iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Responsive modal */
@media (max-width: 520px){
  body.nf .modal-container{
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    max-height: 100vh;
    height: 100vh;
  }
}

/* =========================
   NEW: Cards (NF Design)
   ========================= */
body.nf .card{
  background: var(--nf-card);
  border: 1px solid var(--nf-border-light);
  border-radius: var(--nf-r-xl);
  box-shadow: var(--nf-shadow);
  padding: 18px;
}

body.nf .card.soft{ background: var(--nf-card-soft); backdrop-filter: blur(8px); }

body.nf .card h2,
body.nf .card h3{ margin: 0 0 10px; color: var(--nf-navy); letter-spacing: -.02em; }
body.nf[data-theme="dark"] .card h2,
body.nf[data-theme="dark"] .card h3{ color: var(--nf-ink); }

/* =========================
   NEW: Section Head
   ========================= */
body.nf .section-head{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
}
body.nf .section-head h2{ margin:0; font-size: 18px; }
body.nf .section-head p{ margin:0; color: var(--nf-muted); font-weight: 600; }

/* =========================
   NEW: Pill
   ========================= */
body.nf .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  border: 1px solid var(--nf-border);
  background: var(--nf-overlay-pill);
  color: var(--nf-navy);
}
body.nf[data-theme="dark"] .pill{ color: var(--nf-ink); }

/* =========================
   NEW: Tables (NF Design)
   ========================= */
body.nf table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow:hidden;
  border-radius: var(--nf-r-lg);
  border: 1px solid var(--nf-border);
  background: var(--nf-card);
}

body.nf th, body.nf td{
  padding: 10px 10px;
  border-bottom: 1px solid var(--nf-border-light);
  text-align:left;
  vertical-align: top;
  font-size: 13px;
}

body.nf th{
  background: rgba(143,195,255,.20);
  color: var(--nf-navy);
  font-weight: 900;
  position: sticky;
  top: 0;
  z-index: 1;
}
body.nf[data-theme="dark"] th{ color: var(--nf-ink); background: rgba(143,195,255,.15); }

body.nf tr:hover td{ background: var(--nf-hover-table); }
body.nf tbody tr:last-child td{ border-bottom: 0; }

/* =========================
   NEW: Footer (NF Design)
   ========================= */
body.nf .site-footer{ padding: 18px 0 36px; color: var(--nf-muted); font-size: 12px; }

body.nf .site-footer .footer-card{
  border-radius: var(--nf-r-xl);
  border: 1px solid var(--nf-border-footer);
  background: var(--nf-overlay-footer);
  backdrop-filter: blur(10px);
  box-shadow: var(--nf-shadow);
  padding: 14px 16px;
  display:flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

body.nf .site-footer a{ color: var(--nf-navy); font-weight: 800; }
body.nf .site-footer a:hover{ text-decoration: underline; }
body.nf[data-theme="dark"] .site-footer a{ color: var(--nf-sky); }

/* =========================
   NEW: Three Up Grid
   ========================= */
body.nf .three-up{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

body.nf .help-tile{ text-align:center; padding: 14px; }
body.nf .help-tile h3{ margin: 6px 0 8px; color: var(--nf-navy); }
body.nf .help-tile p{ margin: 10px 0 0; color: var(--nf-muted); font-weight: 600; line-height: 1.5; }
body.nf[data-theme="dark"] .help-tile h3{ color: var(--nf-ink); }

body.nf .help-tile .circle{
  width: 170px;
  height: 170px;
  margin: 8px auto 10px;
  border-radius: 999px;
  border: 3px solid var(--nf-border-strong);
  background:
    radial-gradient(70px 70px at 35% 35%, rgba(244,123,106,.92), rgba(244,123,106,0) 62%),
    radial-gradient(90px 90px at 70% 70%, rgba(246,195,67,.92), rgba(246,195,67,0) 62%),
    radial-gradient(90px 90px at 75% 30%, rgba(143,195,255,.92), rgba(143,195,255,0) 62%),
    var(--nf-bg-circle);
  box-shadow: var(--nf-shadow);
}

/* =========================
   NEW: Page (NF Design)
   ========================= */
body.nf .page{ padding: 18px 0 34px; }

/* =========================
   RESPONSIVE (NF Design)
   ========================= */
@media (max-width: 980px){
  body.nf .brand-row{ flex-wrap: wrap; justify-content: center; }
  body.nf .brand{ justify-content:center; }
  body.nf .nav{ justify-content:center; }
  body.nf .action-bar{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  body.nf .hero-band .hero-grid{ grid-template-columns: 1fr; }
  body.nf .hero-band .hero-art{ min-height: 180px; }
  body.nf .three-up{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  body.nf .action-bar{ grid-template-columns: 1fr; }
}

/* =========================
   LEGACY DESIGN SYSTEM (Backward Compatibility)
   Keep existing styles for your_options.css compatibility
   ========================= */
:root{
  color-scheme: dark;
  --max: 980px;
  --radius: 18px;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --bg:#07090c;
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --faint: rgba(255,255,255,.52);
  --line: rgba(255,255,255,.12);
  --glass: rgba(255,255,255,.06);
  --glass2: rgba(255,255,255,.08);
  --glassLine: rgba(255,255,255,.14);
  --glassBlur: 12px;
  --accent: #b7a7ff;
  --accent2:#9ff3e1;
  --warn:#ffdf9a;
  --page-bg:
    radial-gradient(900px 600px at 15% 15%, rgba(183,167,255,.18), transparent 55%),
    radial-gradient(1000px 700px at 80% 0%, rgba(159,243,225,.12), transparent 60%),
    radial-gradient(700px 600px at 80% 90%, rgba(255,223,154,.10), transparent 55%),
    linear-gradient(180deg, #05070a 0%, #07090c 40%, #06080b 100%);
}

:root[data-theme="dark"]{ color-scheme: dark; }
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#ffffff;
  --text: rgba(15,23,42,.92);
  --muted: rgba(15,23,42,.72);
}

:root[data-theme="dark"]{ color-scheme: dark; }
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#ffffff;
  --text: rgba(15,23,42,.92);
  --muted: rgba(15,23,42,.72);
  --faint: rgba(15,23,42,.52);
  --line: rgba(15,23,42,.12);
  --accent: rgba(15,23,42,.92);
  --accent2: rgba(15,23,42,.92);
  --warn: rgba(15,23,42,.92);
  --shadow: 0 18px 60px rgba(15,23,42,.12);
  --glass: rgba(255,255,255,.72);
  --glass2: rgba(255,255,255,.82);
  --glassLine: rgba(15,23,42,.12);
  --glassBlur: 14px;
  --page-bg:
    radial-gradient(900px 600px at 15% 15%, rgba(0,0,0,.04), transparent 55%),
    radial-gradient(1000px 700px at 80% 0%, rgba(0,0,0,.03), transparent 60%),
    radial-gradient(700px 600px at 80% 90%, rgba(0,0,0,.02), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
}

body[data-theme="light"].nf{
  color-scheme: light;
}