/* =========================================================
   Epheron — Global Styles (dark, responsive, accessible)
   ========================================================= */

:root{
  --bg:#0b1216;
  --panel:#0f1720;
  --panel-2:#0e1520;
  --line:#1a2732;
  --muted:#9fb3c5;
  --text:#e6eef5;

  --accent:#2dd4a7;      /* mint */
  --accent-2:#111827;
  --accent-ghost:#193b31;

  --danger:#f87171;
  --danger-ghost:#2a1818;
  --warn:#f59e0b;

  --badge:#0b141c;
  --focus:#2e7a66;

  --shadow-sm:0 6px 16px rgba(0,0,0,.18);
  --shadow:0 10px 24px rgba(0,0,0,.25);
  --shadow-lg:0 18px 44px rgba(0,0,0,.32);

  color-scheme:dark;
}

/* Light theme override (aktif kalau <html data-theme="light">) */
:root[data-theme="light"]{
  --bg:#f3f4f6;
  --panel:#ffffff;
  --panel-2:#f9fafb;
  --line:#e5e7eb;
  --muted:#6b7280;
  --text:#0f172a;

  /* hijau tetap, biru dibuat lebih jelas di light mode */
  --accent:#2dd4a7;
  --accent-2:#2563eb;
  --accent-ghost:#dbeafe;

  --badge:#e5f3ff;

  --shadow-sm:0 6px 16px rgba(15,23,42,.10);
  --shadow:0 10px 24px rgba(15,23,42,.18);
  --shadow-lg:0 18px 44px rgba(15,23,42,.24);

  color-scheme:light;
}

/* header di light mode */
:root[data-theme="light"] .site-header{
  background:rgba(248,250,252,.9);
  border-bottom:1px solid rgba(226,232,240,.9);
}

/* ========= Form controls di light mode ========= */
:root[data-theme="light"] .input{
  background:var(--panel-2);
  color:var(--text);
  border-color:#d1d5db;
}
:root[data-theme="light"] .input::placeholder{
  color:#9ca3af;
}

/* area hasil/output kalau pakai .cardish / .card */
:root[data-theme="light"] .card,
:root[data-theme="light"] .cardish,
:root[data-theme="light"] .fcard{
  background:var(--panel);
  color:var(--text);
}

/* ========= Buttons di light mode ========= */
:root[data-theme="light"] .btn{
  background:#e5e7eb;
  color:#111827;
  border-color:#d1d5db;
}

:root[data-theme="light"] .btn-primary{
  background:var(--accent);
  color:#022c22;
  box-shadow:0 6px 24px rgba(34,197,94,.25);
}

:root[data-theme="light"] .btn-ghost{
  background:#f3f4f6;
  color:#4b5563;
}

/* biarin .btn-danger & .btn-warn pakai warna aslinya, tetap kebaca di light */

/* ========= Tabs / Pills / Counter di light mode ========= */
:root[data-theme="light"] .tab{
  background:#f3f4f6;
  color:#111827;
  border-color:#d1d5db;
}
:root[data-theme="light"] .tab.is-active,
:root[data-theme="light"] .tab.active{
  background:#111827;
  color:#f9fafb;
}

:root[data-theme="light"] .pill{
  background:#e5e7eb;
  border-color:#d1d5db;
  color:#4b5563;
}

:root[data-theme="light"] .counter{
  background:#e5f3ff;
  border-color:#bfdbfe;
  color:#1f2937;
}


/* ========== Base / Reset ========== */

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font:15px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
::selection{ background:rgba(45,212,167,.25) }

/* Wrappers & helpers */
.wrap{ width:min(1200px,92vw); margin-inline:auto; }
.center{ display:grid; place-items:center }
.hidden{ display:none !important }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Grad text */
.grad{ background:linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Focus ring — consistent across elements */
:focus{ outline:none }
:focus-visible{
  box-shadow:0 0 0 3px rgba(46,122,102,.45) !important;
  border-color:var(--focus) !important;
  transition:box-shadow .15s ease;
}

/* =========================================================
   Header / Brand
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:30;
  backdrop-filter:saturate(140%) blur(6px);
  background:rgba(11,18,22,.6);
  border-bottom:1px solid rgba(26,39,50,.6);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
}

/* Container kanan (nav + theme toggle) */
.header-right{
  display:flex;
  align-items:center;
  gap:16px;
}

/* Theme toggle button */
.theme-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--muted);
  font-size:13px;
  cursor:pointer;
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .1s ease;
}
.theme-toggle:hover{
  border-color:var(--accent);
  color:var(--text);
  transform:translateY(-0.5px);
}

.theme-toggle-thumb{
  width:18px;
  height:18px;
  border-radius:999px;
  background:var(--accent);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
}

.theme-toggle-label{
  font-weight:600;
}

/* Mobile: label disembunyikan, icon saja */
@media (max-width:760px){
  .header-right{
    gap:10px;
  }
  .theme-toggle{
    padding:4px 8px;
  }
  .theme-toggle-label{
    display:none;
  }
}


/* Brand */
.brand{
  display:flex; align-items:center; gap:10px;
  color:var(--text); text-decoration:none;
}
.logo{
  width:26px;height:26px;display:grid;place-items:center;
  border-radius:7px;background:var(--accent);color:#052a21;font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
}
.brandname{ font-weight:700; white-space:nowrap }

/* Variant: hide name (logo-only mode) */
.brand--logo-only .brandname{ display:none }

/* Nav */
.nav a{
  color:var(--muted); text-decoration:none; margin-left:18px; font-weight:600;
  padding:6px 0;
}
.nav a:hover{ color:var(--text) }

/* Mobile: stack nav */
@media (max-width:760px){
  .nav a{ margin-left:12px }
}

/* =========================================================
   Hero
   ========================================================= */
.hero{ padding:36px 0 12px; text-align:center; }
.hero h1{ font-size:42px; margin:0 0 8px }
.hero .sub{ color:var(--muted); margin:0 0 20px }
.stats{
  display:grid; grid-template-columns:repeat(3, minmax(0, 180px));
  gap:14px; justify-content:center; list-style:none; padding:0; margin:14px 0 0;
}
.stats li{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; box-shadow:var(--shadow);
}
.stats li strong{ display:block; font-size:16px }
.stats li span{ color:var(--muted); font-size:12px }

@media (max-width:720px){
  .hero h1{ font-size:34px }
  .stats{ grid-template-columns:1fr; }
}

/* =========================================================
   Cards / Panels
   ========================================================= */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  box-shadow:var(--shadow);
}
.card.flat{ box-shadow:none }

/* Elevation utilities */
.elev-sm{ box-shadow:var(--shadow-sm) }
.elev    { box-shadow:var(--shadow) }
.elev-lg { box-shadow:var(--shadow-lg) }

/* =========================================================
   Tabs
   ========================================================= */
.tabs{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin:18px 0 8px;
}
.tabs-left{ display:flex; gap:8px; flex-wrap:wrap }
.tabs-right{ display:flex }

.tab{
  border:1px solid var(--line);
  background:#0c151c; color:var(--text);
  padding:10px 16px; border-radius:20px; cursor:pointer; font-weight:600;
  transition:filter .15s ease, transform .05s ease;
}
.tab:hover{ filter:brightness(1.08) }
.tab:active{ transform:translateY(1px) }
.tab.is-active{
  background:var(--accent); color:#04261f; border-color:transparent;
  box-shadow:0 0 0 6px rgba(45,212,167,.15) inset
}

.pane{ display:none }
.pane.is-active{ display:block }

/* =========================================================
   Form controls
   ========================================================= */
.input{
  width:100%;
  border:1px solid var(--line);
  background:#0b141c;
  color:var(--text);
  padding:12px 14px;
  border-radius:10px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus{ border-color:var(--focus); box-shadow:0 0 0 4px rgba(46,122,102,.25) }

.row{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:12px; margin-top:12px;
}
.row.align{ align-items:center }
@media (max-width:760px){ .row{ grid-template-columns:1fr } }

.chk{ display:flex; align-items:center; gap:8px; color:var(--muted); user-select:none }

/* Buttons */
.btn{
  border:1px solid var(--line);
  background:#0d171f;
  color:var(--text);
  padding:12px 18px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  transition:filter .15s ease, transform .05s ease;
}
.btn:hover{ filter:brightness(1.08) }
.btn:active{ transform:translateY(1px) }
.btn[disabled]{ opacity:.55; cursor:not-allowed; filter:saturate(.6) }
.btn[disabled]:hover{ filter:none }

.btn-primary{
  background:var(--accent);
  border-color:transparent; color:#04261f;
  box-shadow:0 6px 24px rgba(45,212,167,.25);
}
.btn-ghost{
  background:#0b141c; color:var(--muted);
}
.btn-danger{
  background:rgba(248,113,113,.12);
  border-color:rgba(248,113,113,.45);
  color:#ffd1d1;
}
.btn-warn{
  background:rgba(245,158,11,.12);
  border-color:rgba(245,158,11,.45);
  color:#ffe6b0;
}
.btn-sm{ padding:8px 12px; border-radius:10px; font-weight:600 }

/* =========================================================
   Token output / Results
   ========================================================= */
.tokenout{
  margin-top:12px; padding:12px; border:2px dashed var(--line); border-radius:12px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#0b1217;
}
.tok{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  color:#dfe9f7; font-size:14px; word-break:break-all
}
.tok.copied{ color:var(--accent) }
.hint{ color:var(--muted) }

.result{ margin-top:12px }
.cardish{
  background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:12px;
}
.result-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }

/* Badges / Chips */
.badge{
  background:var(--badge); color:var(--muted);
  border:1px solid var(--line);
  border-radius:8px; padding:4px 8px; font-size:12px; display:inline-block;
}
.badge.danger{ background:var(--danger-ghost); color:#ffd4d4; border-color:#3a1b1b }
.chip{
  background:#1d2630; border:1px solid #223040; color:#c9d6e2;
  font-size:12px; padding:4px 8px; border-radius:999px; display:inline-flex; align-items:center; gap:6px;
}

.error{ background:var(--danger-ghost); border:1px solid #3a1b1b; border-radius:12px; padding:8px 10px }

/* =========================================================
   File Drop
   ========================================================= */
.drop{
  height:120px; display:grid; place-items:center;
  border:2px dashed var(--line);
  border-radius:14px; color:var(--muted);
  background:#0b141a;
  transition:border-color .15s ease, background .15s ease;
}
.drop.drag{ border-color:var(--accent); background:#0e171f }

/* =========================================================
   Features
   ========================================================= */
.features{ padding:40px 0 28px }
.features .wrap{ display:grid; gap:22px }
.features .fgrid{  /* optional grid helper (not required by HTML) */
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:22px;
}
.fcard{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px; padding:18px 18px 20px;
  box-shadow:var(--shadow);
}
.fcard .ico{font-size:22px;margin-bottom:8px}
.fcard h3{margin:4px 0 8px;font-size:18px}
.fcard p{margin:0;color:var(--muted);line-height:1.4}

/* =========================================================
   FAQ
   ========================================================= */
.faq{ padding:38px 0 64px }
.faq h2{ text-align:center; margin:0 0 10px }
.faq .faq-list{
  width:min(900px,92vw);
  margin:10px auto 0;
  display:grid; gap:12px;
}
.faq details{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 12px
}
.faq summary{ cursor:pointer; font-weight:600 }
.faq p{ color:var(--muted); margin:6px 4px 0 }

/* =========================================================
   Footer
   ========================================================= */
.footer{ border-top:1px solid var(--line); color:var(--muted); padding:20px 0; }
.footer small{ color:var(--muted) }
/* Pusatkan konten footer */
.footer .wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; /* jaga-jaga kalau bukan flex */
}


/* =========================================================
   Toast
   ========================================================= */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(10px);
  background:#0d171f; border:1px solid var(--line); color:var(--text);
  padding:10px 14px; border-radius:10px; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:.18s ease;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }

/* =========================================================
   Admin (shared styles used by admin.html / stats)
   ========================================================= */
.topbar{ display:flex; align-items:center; gap:16px; margin:24px 0 16px }
.pill{
  background:#111a22; border:1px solid #243140; color:#9fb3c8;
  padding:4px 10px; border-radius:999px; font-size:12px;
}
.counter{
  margin-left:auto; background:#0f1923; color:#9fb3c8;
  border:1px solid #213140; padding:6px 10px; border-radius:10px; font-size:12px;
}

/* Table */
.table{ width:100%; border-collapse:collapse; }
table{ width:100%; border-collapse:collapse; }
th, td{
  padding:14px 12px; border-top:1px solid var(--line);
  font-size:14px; vertical-align:middle;
}
thead th{
  background:#0d141a; text-align:left; color:#9fb3c8; border-top:none; position:sticky; top:0; z-index:1;
}
tbody tr:hover{ background:#0c141b; }
.footerlog{ margin-top:14px; font-size:12px; color:#9fb3c8; }
.sel{ width:18px; height:18px; }

/* Item status variants */
.b-active  { color:#22d3a6; background:rgba(34,211,166,.08); border:1px solid #22d3a6; }
.b-expired { color:#f59e0b; background:rgba(245,158,11,.08); border:1px solid #f59e0b; }
.b-destroy { color:#94a3b8; background:rgba(148,163,184,.12); border:1px solid #94a3b8; }

/* Admin actions row */
.row-actions{ display:flex; gap:10px; flex-wrap:wrap }

/* =========================================================
   Small tweaks / utilities
   ========================================================= */
.actions{ display:flex; gap:10px; margin-top:10px }
.muted{ color:var(--muted) }
.badge.warn{ background:rgba(245,158,11,.12); color:#ffe6b0; border-color:rgba(245,158,11,.45) }

/* Improve link appearance on dark */
a{ color:#93e6ff }
a:hover{ color:#c1f1ff }

/* Print: keep content readable */
@media print{
  .site-header, .hero, .tabs, .toast{ display:none !important }
  body{ background:#fff; color:#000 }
  .card, .cardish, .fcard, .faq details{ border:1px solid #ccc; box-shadow:none; background:#fff; color:#000 }
}

/* Link di light mode: biru lebih jelas */
:root[data-theme="light"] a{
  color:#111827;
}
:root[data-theme="light"] a:hover{
  color:#020617;
  text-decoration:underline;
}

/* ============================================
   Light theme — buttons, inputs, drop & output
   (pastikan blok ini di paling bawah file)
   ============================================ */

:root[data-theme="light"] .input{
  background:#f9fafb;
  color:#111827;
  border-color:#d1d5db;
}
:root[data-theme="light"] .input::placeholder{
  color:#9ca3af;
}

/* Tombol dasar */
:root[data-theme="light"] .btn{
  background:#f3f4f6;
  color:#111827;
  border-color:#d1d5db;
}

/* Tombol utama (Create / Upload) */
:root[data-theme="light"] .btn-primary{
  background:#111827;
  color:#f9fafb;
  border-color:#111827;
  box-shadow:none;
}

/* Tombol ghost (Clear, Copy, dsb) jadi abu-abu terang */
:root[data-theme="light"] .btn-ghost{
  background:#f9fafb;
  color:#4b5563;
  border-color:#e5e7eb;
}

/* Output token / link */
:root[data-theme="light"] .tokenout{
  background:#f9fafb;
  border-color:#e5e7eb;
}
:root[data-theme="light"] .tok{
  color:#111827;
}

/* Drop area (File Drop) */
:root[data-theme="light"] .drop{
  background:#f9fafb;
  color:#6b7280;
  border-color:#e5e7eb;
}
:root[data-theme="light"] .drop.drag{
  background:#ecfdf3;           /* sedikit hint hijau saat drag */
  border-color:var(--accent);
}


/* Spasi extra untuk tombol utama di form */
#btn_text_create,
#btn_file_upload,
#btn_link_create,
#open_pwd{
  margin-top: 12px;   /* boleh dinaikkan ke 16px kalau mau lebih lega */
}


@media (max-width: 760px){
  #btn_text_create,
  #btn_file_upload,
  #btn_link_create{
    margin-top: 10px;
  }
}

:root[data-theme="light"] .toast{
  background:#ffffff;
  border-color:#d1d5db;
  color:#111827;
  box-shadow:0 10px 24px rgba(15,23,42,.18);
}