/* ==========================================================================
   pptmstr modern theme v0.1.12 (dark-first, light-ready)
   - Futuristic/hacker vibe: charcoal panels, honeycomb backdrop, neon accents
   - All design tokens via CSS variables. Light theme ≙ .theme-light wrapper.
   ========================================================================== */

/* --------------------------- Design Tokens --------------------------- */
:root{
  /* Surfaces & text (dark) */
  --bg: #0b0f14;
  --bg-elev: #111722;
  --panel: #151b23;
  --panel-2: #0f141a;
  --text: #e8ecef;
  --text-muted: #9aa5b1;
  --muted-2: #7b8794;

  /* Borders & depth */
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.12);
  --shadow-xl: 0 20px 60px rgba(0,0,0,.45);
  --shadow-lg: 0 14px 36px rgba(0,0,0,.40);
  --shadow:    0 10px 24px rgba(0,0,0,.30);

  /* Radii */
  --radius-xl: 16px;
  --radius-lg: 14px;
  --radius:    12px;

  /* Accents */
  --accent:   #ff6a2a;            /* warm CTA */
  --accent-2: #22d3ee;            /* cyan focus/glow */
  --accent-2-rgb: 34,211,238;

  /* State colors */
  --success: #22c55e;
  --warning: #f59e0b;
  --danger:  #ef4444;
  --info:    #60a5fa;

  /* Input underline + glow tuning */
  --underline-thickness: 2px;     /* underline height */
  --input-glow-alpha: .24;        /* inner glow intensity at bottom */
  --input-glow-height: 10%;       /* glow fade height (bottom → transparent) */
  --input-bloom-blur: 12px;       /* inset bloom blur (0 to disable) */
  --input-bloom-offset: -10px;    /* bloom vertical offset from bottom */
  --input-bloom-alpha: .22;       /* bloom opacity */

  /* Honeycomb grid */
  --hex-tile: 46px;                        /* cell size */
  --hex-line-w: 1px;                       /* line thickness */
  --hex-stroke: rgba(255,255,255,.045);    /* dark line */
  --hex-stroke-light: rgba(15,23,42,.06);  /* light line */

  color-scheme: dark;
}

/* Light theme override */
.theme-light{
  --bg: #f6f7fb;
  --bg-elev: #ffffff;
  --panel: #ffffff;
  --panel-2: #f1f5f9;
  --text: #0f172a;
  --text-muted: #475569;
  --muted-2: #64748b;
  --border: rgba(15,23,42,.08);
  --border-strong: rgba(15,23,42,.14);
  --shadow-xl: 0 30px 80px rgba(2,6,23,.18);
  --shadow-lg: 0 18px 48px rgba(2,6,23,.16);
  --shadow:    0 12px 26px rgba(2,6,23,.14);
  /* honeycomb color in light mode */
  --hex-stroke: var(--hex-stroke-light);
  color-scheme: light;
}

/* --------------------------- Base & Backdrop --------------------------- */
*{box-sizing:border-box}
html,body{height:100%}

/* ---- Tunables for the CodePen honeycomb ---- */
:root{
  --hc-size: 32px;                         /* cell size (same as CodePen) */
  --hc-fill-dark: rgba(255,255,255,.055);  /* line/fill tone on dark bg */
  --hc-fill-light: rgba(15,23,42,.10);     /* line/fill tone on light bg */
}

/* Base background (keep your glows + base) + CodePen honeycomb in the middle */
body{
  margin:0;
  background:
    /* glow layers (keep as-is) */
    radial-gradient(1200px 800px at 70% -10%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(1000px 700px at -10% 120%, rgba(255,106,42,.08), transparent 55%),

    /* === CodePen polygon honeycomb (DARK) === */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 169.5' width='100' height='169.5' fill='rgba(255,255,255,.055)'%3E%3Cpolygon points='50,34.75 93.5,59.75 93.5,109.75 50,134.75 6.5,109.75 6.5,59.75'%3E%3C/polygon%3E%3Cpolygon points='0,-50 43.5,-25 43.5,25 0,50 -43.5,25 -43.5,-25'%3E%3C/polygon%3E%3Cpolygon points='100,-50 143.5,-25 143.5,25 100,50 56.5,25 56.5,-25'%3E%3C/polygon%3E%3Cpolygon points='0,119.5 43.5,144.5 43.5,194.5 0,219.5 -43.5,194.5 -43.5,144.5'%3E%3C/polygon%3E%3Cpolygon points='100,119.5 143.5,144.5 143.5,194.5 100,219.5 56.5,194.5 56.5,144.5'%3E%3C/polygon%3E%3C/svg%3E")
      center / var(--hc-size) auto repeat,

    /* base surface */
    linear-gradient(180deg, var(--bg), var(--bg));
}

/* Light theme version: same SVG, different fill */
.theme-light body{
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(34,211,238,.08), transparent 60%),
    radial-gradient(1000px 700px at -10% 120%, rgba(255,106,42,.06), transparent 55%),

    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 169.5' width='100' height='169.5' fill='rgba(15,23,42,.10)'%3E%3Cpolygon points='50,34.75 93.5,59.75 93.5,109.75 50,134.75 6.5,109.75 6.5,59.75'%3E%3C/polygon%3E%3Cpolygon points='0,-50 43.5,-25 43.5,25 0,50 -43.5,25 -43.5,-25'%3E%3C/polygon%3E%3Cpolygon points='100,-50 143.5,-25 143.5,25 100,50 56.5,25 56.5,-25'%3E%3C/polygon%3E%3Cpolygon points='0,119.5 43.5,144.5 43.5,194.5 0,219.5 -43.5,194.5 -43.5,144.5'%3E%3C/polygon%3E%3Cpolygon points='100,119.5 143.5,144.5 143.5,194.5 100,219.5 56.5,194.5 56.5,144.5'%3E%3C/polygon%3E%3C/svg%3E")
      center / var(--hc-size) auto repeat,

    linear-gradient(180deg, var(--bg), var(--bg));
}
/* --------------------------- Layout --------------------------- */
.container{max-width:1100px; margin:0 auto; padding:2rem}
.center-page{min-height:calc(100vh - 120px); display:flex; align-items:center; justify-content:center}

.card{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding:1.5rem 1.25rem;
}
.card h1{margin:.25rem 0 1rem; font-size:1.4rem; letter-spacing:.3px}
hr{border:0; border-top:1px solid var(--border); margin:1rem 0}

/* --------------------------- Forms --------------------------- */
label{display:block; font-weight:600; color:var(--text); margin:.35rem 0 .35rem}

/* Base field (fill) shared by .input/.select/textarea; underline + glow layered in background */
.input,.select,textarea{
  width:100%; display:block;
  border:1px solid var(--border);
  color:var(--text);
  padding:.70rem .85rem;
  border-radius:12px;
  outline:none;
  background: linear-gradient(180deg, #0c1117, #0b0f14);
  transition: background-size .20s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
}
.theme-light .input,.theme-light .select,.theme-light textarea{
  background: linear-gradient(180deg,#fff,#f7fafc);
}

/* Bottom-only inner glow + animated underline */
.input{
  background:
    /* 1) inner gradient glow (hidden by height 0; revealed on focus) */
    linear-gradient(
      to top,
      rgba(var(--accent-2-rgb), var(--input-glow-alpha)) 0%,
      rgba(var(--accent-2-rgb), 0) var(--input-glow-height)
    ) 0 100% / 100% 0 no-repeat,
    /* 2) underline (hidden by width 0; animates on focus) */
    linear-gradient(var(--accent-2), var(--accent-2)) 0 100% / 0 var(--underline-thickness) no-repeat,
    /* 3) field fill */
    linear-gradient(180deg, #0c1117, #0b0f14);
}
.theme-light .input{
  background:
    linear-gradient(
      to top,
      rgba(var(--accent-2-rgb), var(--input-glow-alpha)) 0%,
      rgba(var(--accent-2-rgb), 0) var(--input-glow-height)
    ) 0 100% / 100% 0 no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) 0 100% / 0 var(--underline-thickness) no-repeat,
    linear-gradient(180deg,#fff,#f7fafc);
}

.input:hover{border-color:var(--border-strong)}
.input:focus{
  border-color:var(--border);
  background-size: 100% 100%, 100% var(--underline-thickness), auto;
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.08),
    inset 0 var(--input-bloom-offset) var(--input-bloom-blur) rgba(var(--accent-2-rgb), var(--input-bloom-alpha));
}

.hint{color:var(--muted-2); font-size:.85rem; margin-top:.25rem}
.row{display:flex; gap:1rem; flex-wrap:wrap}
.row>*{flex:1 1 260px}
.row-1>*{display:block; margin-bottom:.75rem}
.checklist{font-size:.92rem}
.checklist .ok{color:var(--success)}
.checklist .bad{color:var(--danger)}

/* --------------------------- Buttons --------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border:1px solid var(--border);
  border-radius:999px;
  padding:.55rem 1rem;
  background:linear-gradient(180deg, #0c1117, #0b0f14);
  color:var(--text);
  text-decoration:none; cursor:pointer; user-select:none;
  transition: transform .06s ease, box-shadow .2s ease, border-color .18s ease, background .18s ease;
}
.btn:hover{border-color:var(--border-strong)}
.btn:active{transform:translateY(1px)}

.btn-primary{
  background: radial-gradient(60% 120% at 50% 0%, #ff7a3b, #ff4c18);
  color:#fff; border-color: transparent;
  box-shadow: 0 6px 20px rgba(255,106,42,.35);
  font-weight:700;
}
.btn-primary:hover{box-shadow: 0 10px 28px rgba(255,106,42,.45)}
.btn-ghost{background:transparent}
.btn-danger{background:linear-gradient(180deg, #ef4444, #b91c1c); color:#fff; border-color:transparent}

.actions{display:flex; gap:.75rem; flex-wrap:wrap}

/* --------------------------- Badges --------------------------- */
.badge{display:inline-flex; align-items:center; gap:.35rem; padding:.18rem .55rem; border-radius:999px; font-size:.76rem; border:1px solid var(--border)}
.badge.success{background:rgba(34,197,94,.14); color:#b6f1c9; border-color:rgba(34,197,94,.35)}
.badge.warn{background:rgba(245,158,11,.16); color:#ffe3b0; border-color:rgba(245,158,11,.35)}
.badge.danger{background:rgba(239,68,68,.16); color:#ffc0c0; border-color:rgba(239,68,68,.40)}

/* --------------------------- Tables --------------------------- */
.table{width:100%; border-collapse:separate; border-spacing:0; margin:.75rem 0; font-size:.95rem}
.table th,.table td{padding:.65rem .75rem; border-bottom:1px solid var(--border)}
.table th{color:var(--text-muted); text-align:left; font-weight:600}
.table tr:hover td{background:rgba(255,255,255,.02)}

/* --------------------------- Toasts (top-right) --------------------------- */
.toast-stack{position:fixed; top:16px; right:16px; display:flex; flex-direction:column; gap:12px; z-index:9999}
.toast{
  min-width:260px; max-width:380px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  color:var(--text);
  border:1px solid var(--border-strong);
  border-radius:14px;
  box-shadow: var(--shadow);
  padding:.85rem 1rem;
}
.toast.success{border-color:rgba(34,197,94,.45)}
.toast.error{border-color:rgba(239,68,68,.45)}
.toast.info{border-color:rgba(96,165,250,.45)}

/* --------------------------- Links & Helpers --------------------------- */
a{color:#9b8cff; text-decoration:none}
a:hover{text-decoration:underline}

.muted{color:var(--text-muted)}
.max-520{max-width:520px}
.max-760{max-width:760px}
.p-1{padding:1rem} .p-2{padding:2rem}

/* --------------------------- Responsive --------------------------- */
@media (max-width:640px){
  .container{padding:1.1rem}
  .card{padding:1.1rem}
}