/* GensFlo Cloud — web shell. Clay design system, disamakan 1:1 dengan landing gensflo.com.
   Harmoni warna dari LOGO (ungu→biru, tinta navy, latar lavender) — SDD bab 23. */

/* ===== TOKEN LOKAL = ALIAS ke token clay (clay-tokens.css dimuat DULUAN).
   Revamp paket "Gensflow Platform Clay Revamp": satu sumber warna = token clay.
   Nilai TIDAK berubah dari yang live — cuma sumbernya dipindah, biar dua sistem
   token ga pelan-pelan beda warna. Var tanpa padanan clay tetap literal. ===== */
:root {
  --bg:var(--clay-bg); --surface:var(--clay-surface); --surface2:var(--clay-well);
  --ink:var(--clay-ink); --muted:var(--clay-ink-soft); --line:rgba(108,92,225,.14);
  --primary:var(--clay-primary); --primary-d:var(--clay-primary-text);
  --mint:#66bfae; --mint-d:var(--clay-mint);
  --blue:var(--clay-blue); --blue-d:#3a63e0; --lav:#c9baff;
  --sh:104,92,180;
  --r:var(--clay-r-card); --r-btn:16px; --r-sm:var(--clay-r-well); --maxw:1280px;
  --hi:rgba(255,255,255,.9); --hdr:rgba(241,238,250,.72);
  --clay: var(--clay-sh-card);
  --clay-lift: 0 20px 36px rgba(var(--sh),.26), inset 0 2px 0 var(--hi);
  --clay-in: var(--clay-sh-inset);
  --ok:var(--clay-mint); --bad:var(--clay-rose); --warn:var(--clay-amber);
  font-synthesis:none;
}

/* ===== DARK (cool clay navy) — toggle menang dua arah.
   Warna inti (bg/surface/ink/…) otomatis ikut blok gelap clay-tokens.css lewat
   alias di atas; yang ditulis di sini cuma var yang mapping-nya BEDA di gelap
   (ok/bad/warn pakai varian -hi biar kebaca) + var tanpa padanan clay. ===== */
:root[data-theme="dark"] {
  --line:rgba(216,208,255,.10);
  --sh:0,0,0; --hi:rgba(226,220,255,.12); --hdr:rgba(22,21,31,.76);
  --mint-d:var(--clay-mint-hi); --blue-d:var(--clay-blue-hi);
  --ok:var(--clay-mint-hi); --bad:var(--clay-rose-hi); --warn:var(--clay-amber-hi);
}
/* System default → ikut OS kecuali user pilih light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --line:rgba(216,208,255,.10);
    --sh:0,0,0; --hi:rgba(226,220,255,.12); --hdr:rgba(22,21,31,.76);
    --mint-d:var(--clay-mint-hi); --blue-d:var(--clay-blue-hi);
    --ok:var(--clay-mint-hi); --bad:var(--clay-rose-hi); --warn:var(--clay-amber-hi);
  }
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Nunito',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); line-height:1.5; font-weight:700; -webkit-font-smoothing:antialiased;
  min-height:100vh;
  /* Latar = token --clay-grad-page (punya nilai terang & gelap sendiri). */
  background:var(--clay-grad-page);
}
h1,h2,h3,.brand-name { letter-spacing:-.01em; line-height:1.12; }
a { color:inherit; text-decoration:none; }
.clayico { display:block; }
/* Atribut hidden HARUS menang atas display kelas apa pun (.auth-gate display:grid dst
   sempat ngalahin hidden bawaan browser → overlay gate nutupin app selamanya). */
[hidden] { display:none !important; }

.app { display:grid; grid-template-columns:250px 1fr; min-height:100vh; }

/* ===== SIDEBAR ===== */
.sidebar {
  padding:22px 16px; display:flex; flex-direction:column; gap:20px;
  position:sticky; top:0; height:100vh;
  background:var(--hdr); backdrop-filter:blur(10px);
  border-right:1px solid var(--line);
}
.brand { display:flex; align-items:center; gap:11px; padding:4px 8px; font-weight:900; font-size:22px; }
.brand .mark {
  width:42px; height:42px; object-fit:contain; display:block;
  filter:drop-shadow(0 7px 12px rgba(var(--sh),.36));
  transition:transform .32s cubic-bezier(.34,1.56,.64,1);
}
.brand:hover .mark { transform:rotate(-6deg) scale(1.06); }
.nav { display:flex; flex-direction:column; gap:6px; flex:1; }
.nav-item {
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--r-sm);
  color:var(--muted); font-weight:800; font-size:15px; transition:.16s;
}
.nav-item:hover { color:var(--ink); background:var(--surface); box-shadow:var(--clay); }
.nav-item.active { color:var(--ink); background:var(--surface); box-shadow:var(--clay); }
.nav-item.active .nav-ico { transform:rotate(-6deg); }
.nav-ico {
  width:34px; height:34px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:var(--surface2); box-shadow:0 6px 12px rgba(var(--sh),.22), inset 0 2px 0 var(--hi);
  transition:transform .32s cubic-bezier(.34,1.56,.64,1);
}
.nav-ico .clayico { width:22px; height:22px; }
/* Titik "ada yang baru" di menu (TCK-0145). Kecil & tanpa angka: ini kabar,
   bukan tugas — badge berangka bikin orang ngerasa punya utang. */
.nav-dot { width:8px; height:8px; border-radius:50%; margin-left:auto; flex:none;
  background:var(--clay-grad-primary); box-shadow:0 0 0 4px rgba(115,85,232,.18); }
.sidebar-foot {
  display:flex; align-items:center; gap:9px; padding:11px 13px; font-size:13px; font-weight:800; color:var(--muted);
  background:var(--surface); border-radius:var(--r-sm); box-shadow:var(--clay-in);
}
.status-dot { width:10px; height:10px; border-radius:50%; background:var(--warn); flex:none; }
.status-dot[data-state="ok"] { background:var(--ok); }
.status-dot[data-state="bad"] { background:var(--bad); }
.status-dot[data-state="checking"] { background:var(--warn); animation:pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity:.35; } }

/* ===== MAIN ===== */
.main { display:flex; flex-direction:column; min-width:0; }
.topbar {
  display:flex; align-items:center; gap:14px; padding:16px 30px;
  position:sticky; top:0; z-index:5; background:var(--hdr); backdrop-filter:blur(10px);
}
.page-head { flex:1; min-width:0; }
.page-kicker { font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.page-title { font-size:22px; font-weight:900; margin:0; letter-spacing:-.02em; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.icon-btn, .pill {
  border:1px solid var(--line); cursor:pointer; background:var(--surface); color:var(--ink);
  font-weight:900; border-radius:14px;
  box-shadow:0 7px 14px rgba(var(--sh),.26), inset 0 2px 0 var(--hi), inset 0 -3px 6px rgba(var(--sh),.14);
  transition:transform .18s ease, box-shadow .18s ease;
}
.icon-btn { width:42px; height:42px; font-size:18px; display:grid; place-items:center; }
.pill { height:42px; padding:0 16px; font-size:14px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
/* Tombol utama di header = clay-btn-primary paket desain (Dashboard.dc.html). */
.pill-primary {
  background:var(--clay-grad-primary); color:#fff; border-color:rgba(255,255,255,.28);
  text-shadow:0 1px 1px rgba(63,48,150,.4);
  box-shadow:var(--clay-sh-btn-primary);
}
.pill-primary:active { box-shadow:0 4px 9px rgba(115,85,232,.4), inset 0 2px 0 rgba(255,255,255,.4); }
/* Chip channel aktif: WELL (tenggelam), bukan tombol — dia penanda, bukan aksi. */
.topbar-chip { background:var(--surface2); box-shadow:var(--clay-in); border:none; color:var(--ink); }
.topbar-chip .av {
  width:22px; height:22px; border-radius:8px; display:grid; place-items:center; flex:none;
  background:var(--clay-grad-primary); color:#fff; font-size:10px; font-weight:900;
}
.icon-btn:active, .pill:active {
  transform:translateY(3px);
  box-shadow:0 3px 8px rgba(var(--sh),.22), inset 0 2px 0 var(--hi), inset 0 -2px 4px rgba(var(--sh),.12);
}
.menu-btn { display:none; }

.content { padding:12px 30px 44px; display:flex; flex-direction:column; gap:24px; max-width:var(--maxw); }

/* ===== HERO ===== */
.hero-card {
  background:linear-gradient(150deg, var(--surface), var(--surface2));
  border:1px solid var(--line); border-radius:var(--r); padding:34px 34px; box-shadow:var(--clay);
}
.hero-card h2 { margin:0 0 8px; font-size:30px; font-weight:900; letter-spacing:-.02em; }
.hero-card p { margin:0 0 22px; color:var(--muted); font-size:16px; font-weight:700; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }

/* ===== BUTTONS (puffy clay) ===== */
.btn {
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  border:1px solid var(--line); cursor:pointer; border-radius:var(--r-btn);
  padding:14px 24px; font-weight:900; font-size:15px; font-family:inherit;
  background:var(--surface); color:var(--ink);
  box-shadow:0 8px 16px rgba(var(--sh),.30), inset 0 2px 0 var(--hi), inset 0 -4px 7px rgba(var(--sh),.16);
  transition:transform .1s ease, box-shadow .1s ease;
}
.btn:active { transform:translateY(4px); box-shadow:0 3px 8px rgba(var(--sh),.26), inset 0 2px 0 var(--hi), inset 0 -2px 4px rgba(var(--sh),.14); }
.btn-primary {
  background:linear-gradient(180deg,#9b7bff,#7355e8); color:#fff; border-color:rgba(255,255,255,.28);
  text-shadow:0 1px 1px rgba(63,48,150,.4);
  box-shadow:0 10px 18px rgba(115,85,232,.42), inset 0 2px 0 rgba(255,255,255,.45), inset 0 -5px 9px rgba(0,0,0,.15);
}
.btn-primary:active { transform:translateY(4px); box-shadow:0 4px 9px rgba(115,85,232,.4), inset 0 2px 0 rgba(255,255,255,.4), inset 0 -3px 6px rgba(0,0,0,.13); }

/* ===== CARDS ===== */
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:18px; }
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px;
  box-shadow:var(--clay); display:flex; flex-direction:column; gap:8px;
  transition:transform .32s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
/* Kontrak paket clay (PORTING.md): hover lift -4px, spring pop — bukan -8px+rotate. */
.card:hover { transform:translateY(-4px); box-shadow:var(--clay-lift); }
.card .ic {
  width:60px; height:60px; border-radius:20px; display:grid; place-items:center; margin-bottom:8px;
  transform:rotate(-5deg);
  background:var(--surface2); box-shadow:0 8px 15px rgba(var(--sh),.24), inset 0 2px 0 var(--hi);
}
.card:hover .ic { animation:wiggle .6s ease; }
.card .ic .clayico { width:38px; height:38px; }
.card h3 { margin:0; font-size:20px; font-weight:900; }
.card p { margin:0; color:var(--muted); font-size:14.5px; font-weight:700; line-height:1.5; }
.card .soon {
  font-size:11px; font-weight:900; color:var(--blue-d); background:var(--surface2);
  padding:4px 11px; border-radius:999px; align-self:flex-start; letter-spacing:.04em; text-transform:uppercase;
  box-shadow:inset 0 2px 0 var(--hi);
}
@keyframes wiggle { 0%,100%{transform:rotate(-5deg)} 25%{transform:rotate(3deg)} 60%{transform:rotate(-8deg)} }

/* ===== AUTH GATE + AKUN ===== */
.auth-gate {
  position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px;
  background:var(--clay-grad-page);
}
.auth-card {
  width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:32px; box-shadow:var(--clay); display:flex; flex-direction:column; gap:14px;
}
.auth-brand { display:flex; align-items:center; gap:10px; font-weight:900; font-size:22px; }
.auth-logo { width:38px; height:38px; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(var(--sh),.34)); }
.auth-card h2 { font-size:23px; font-weight:900; margin-top:4px; }
.auth-sub { color:var(--muted); font-size:14.5px; font-weight:700; margin-top:-6px; }
.auth-card form, .acct-form { display:flex; flex-direction:column; gap:12px; }
.auth-card label, .acct-form label { display:flex; flex-direction:column; gap:6px; font-weight:800; font-size:13.5px; color:var(--muted); }
.auth-card input, .acct-form input {
  font-family:inherit; font-weight:700; font-size:15px; color:var(--ink);
  padding:12px 14px; border-radius:var(--r-btn); border:1px solid var(--line);
  background:var(--surface2); box-shadow:var(--clay-in); outline:none;
}
.auth-card input:focus, .acct-form input:focus { border-color:var(--primary); }
.auth-toggle { background:none; border:0; color:var(--primary-d); font-weight:800; font-size:13.5px; cursor:pointer; font-family:inherit; }
.auth-err { color:var(--bad); font-weight:800; font-size:13px; }
/* Tombol "Sign in with Google" (TCK-0158). Tombolnya sendiri digambar Google
   di dalam iframe — jadi yang diatur di sini cuma ruang di sekitarnya. Warna
   dan bentuk tombolnya SENGAJA ga diutak-atik: Google punya aturan tampilan
   sendiri, dan tombol yang diubah-ubah bisa bikin app ditolak pas ditinjau. */
.auth-google { display:flex; flex-direction:column; align-items:center; gap:10px; }
/* Garis "atau" — biar jelas ini jalan masuk KEDUA, bukan lanjutan form di atasnya. */
.auth-atau { display:flex; align-items:center; gap:10px; width:100%; color:var(--muted);
  font-size:12.5px; font-weight:800; }
.auth-atau::before, .auth-atau::after { content:""; flex:1; height:1px; background:var(--line); }
/* Wadah tombol "tautin akun Google" di Akun & Setting. */
#gsiLink { display:flex; }
#gsiLink:empty { display:none; }   /* Client ID belum diisi = ga nyisain celah kosong */


.auth-err.ok { color:var(--mint-d); }
.acct .ic, .card.acct { }
.tier-badge { font-size:11px; font-weight:900; padding:2px 9px; border-radius:999px; letter-spacing:.04em; box-shadow:inset 0 2px 0 var(--hi); }
.tier-free { background:var(--surface2); color:var(--muted); }
.tier-pro { background:linear-gradient(180deg,#9b7bff,#7355e8); color:#fff; }
.user-chip {
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--clay);
  font-weight:800; font-size:12.5px;
}
.user-chip:empty { display:none; }
.user-chip .chip-email { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.key-actions { display:flex; gap:10px; flex-wrap:wrap; }
.key-card h3 { display:flex; align-items:center; gap:8px; }
.keys-intro { grid-column:1/-1; }
/* Pilihan model per provider (TCK-0018). Ditaruh sebaris di bawah kolom key
   supaya jelas dia NEMPEL ke key itu, bukan setelan global. */
.key-model { display:flex; flex-direction:column; gap:6px; margin:10px 0 4px; }
.key-model > span { font-weight:800; font-size:12.5px; color:var(--muted); }
.key-model select {
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); color:inherit; font:inherit; font-weight:700;
}
.key-model select:disabled { opacity:.55; cursor:not-allowed; }
.key-note { margin:2px 0 0; font-size:12px; font-weight:700; color:var(--muted); line-height:1.45; }
.key-note:empty { display:none; }
.quota-lock {
  grid-column:1/-1; display:flex; flex-direction:column; gap:8px; align-items:flex-start;
  background:linear-gradient(150deg,#e6defc,var(--surface2)); border:1px solid var(--line);
  border-radius:var(--r); padding:22px 24px; box-shadow:var(--clay);
}
:root[data-theme="dark"] .quota-lock { background:linear-gradient(150deg,#262046,var(--surface2)); }
.quota-lock b { font-size:18px; font-weight:900; }
.quota-lock span { color:var(--muted); font-weight:700; font-size:14px; }
.quota-lock .btn { margin-top:6px; }
.grid.locked .card:not(.quota-lock) { opacity:.5; pointer-events:none; filter:grayscale(.3); }
.admin-tablewrap { grid-column:1/-1; overflow-x:auto; }
.admin-table { width:100%; border-collapse:collapse; font-size:13px; font-weight:700; }
.admin-table th, .admin-table td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
.admin-table th { color:var(--muted); font-weight:900; text-transform:uppercase; letter-spacing:.04em; font-size:11px; }
.admin-table .row-flag { background:rgba(216,79,107,.10); }

/* ===== RESPONSIVE ===== */
@media (max-width: 860px) {
  .app { grid-template-columns:1fr; }
  .sidebar { position:fixed; left:-270px; z-index:20; transition:left .22s; width:250px; }
  .sidebar.open { left:0; box-shadow:var(--clay-lift); }
  .menu-btn { display:grid; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
}

.caret { color:var(--muted); font-weight:900; }