/* Gaya halaman akun & panel admin SIMBARA: senada dengan aplikasi asli (hijau/emas, clay). */
:root{
  color-scheme:light;
  --bg:#fbfdfc;--bg2:#eef4f1;--ink:#16241d;--muted:#5f6d66;--line:#dde4e0;--soft:#f1f5f3;
  --accent:#0f6b4c;--accent-d:#0a4a35;--accent-soft:#e2f2ea;--gold:#e3c468;
  --err:#b3261e;--err-soft:#fde7e5;--warn:#a15c00;--warn-soft:#fdf1dc;--ok:#1b7a4c;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-disp:"IBM Plex Sans Condensed","IBM Plex Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --slab:10px 14px 28px rgba(118,146,134,.30),inset -7px -8px 14px rgba(118,146,134,.17),inset 7px 8px 14px rgba(255,255,255,.98);
  --slab-s:6px 8px 16px rgba(118,146,134,.26),inset -4px -5px 9px rgba(118,146,134,.15),inset 4px 5px 9px rgba(255,255,255,.98);
  --well:inset 3px 4px 8px rgba(118,146,134,.30),inset -3px -3px 7px rgba(255,255,255,.95);
  --puff:5px 7px 14px rgba(118,146,134,.34),inset -3px -4px 7px rgba(0,0,0,.13),inset 3px 4px 7px rgba(255,255,255,.6);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{color:var(--ink);font:14px/1.45 var(--f-body);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%230f6b4c' stroke-width='1' opacity='.07'%3E%3Crect x='18' y='18' width='44' height='44'/%3E%3Crect x='18' y='18' width='44' height='44' transform='rotate(45 40 40)'/%3E%3Cpath d='M0 40h18M62 40h18M40 0v18M40 62v18'/%3E%3Ccircle cx='40' cy='40' r='9'/%3E%3C/g%3E%3C/svg%3E"),radial-gradient(700px 500px at 80% 0,#dcf3e6 0,transparent 60%),radial-gradient(700px 520px at 10% 100%,#fbefcf 0,transparent 60%),linear-gradient(160deg,#f7fbf9,#e3f1ea) fixed}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--f-disp);font-weight:600;margin:0}
h1{font-size:23px} h2{font-size:17px}
p{margin:0}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.muted{color:var(--muted)}
.mono{font-family:var(--f-mono)}

/* tombol */
.btn{border:0;border-radius:16px;background:#fff;box-shadow:var(--puff);padding:8px 15px;cursor:pointer;white-space:nowrap;text-decoration:none;color:var(--ink);display:inline-block}
.btn:hover{filter:brightness(1.03)}
.btn:active{transform:scale(.96);box-shadow:var(--well)}
.btn.pri{background:linear-gradient(160deg,#2cb486,#0f7a56);color:#fff;font-weight:600;box-shadow:5px 7px 14px rgba(15,107,76,.42),inset -3px -4px 7px rgba(0,0,0,.2),inset 3px 4px 7px rgba(255,255,255,.4)}
.btn.pri:active{box-shadow:inset 3px 4px 8px rgba(0,0,0,.3)}
.btn.out{background:linear-gradient(160deg,#fff,#ffe1dc);color:#8a1f15;font-weight:600}
.btn.gold{background:linear-gradient(160deg,#fff7df,#f2d98a);color:#5b4300;font-weight:600}
.btn.sm{border-radius:12px;padding:5px 11px;font-size:12.5px}
.btn.big{font-size:16px;padding:14px 26px;border-radius:22px;font-family:var(--f-disp)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* isian */
.field{display:flex;flex-direction:column;gap:4px;text-align:left;min-width:0;flex:1}
.field label{font-size:12px;color:var(--muted);font-weight:500}
.field .hint{font-size:11.5px;color:var(--muted)}
input[type=text],input[type=password],select{border:0;border-radius:14px;box-shadow:var(--well);background:#fbfdfc;padding:9px 12px;width:100%}

/* halaman masuk & ganti password */
.gate{min-height:100vh;display:grid;place-items:center;padding:16px}
.gcard{width:min(420px,100%);background:#fff;border-radius:34px;padding:30px 30px 24px;display:flex;flex-direction:column;gap:12px;text-align:center;outline:3px solid var(--gold);outline-offset:-3px;box-shadow:18px 26px 50px rgba(90,125,110,.38),inset -9px -10px 18px rgba(118,146,134,.16),inset 9px 10px 18px #fff}
.gcard .slogo{align-self:center;filter:drop-shadow(4px 6px 8px rgba(15,107,76,.35))}
.gcard h1{font-size:34px;letter-spacing:.06em}
.gsub{color:var(--muted);margin-top:-6px}
.gerr{color:var(--err);min-height:1.2em;font-size:13px}
.gok{color:var(--ok);font-size:13px}
.gnote{font-size:11.5px;color:var(--muted)}

/* panel admin */
.top{display:flex;gap:12px;align-items:center;padding:10px 18px;background:#fff;border-radius:0 0 26px 26px;margin:0 10px;box-shadow:0 10px 24px rgba(118,146,134,.25),inset 0 -6px 10px rgba(118,146,134,.10);border-bottom:3px solid var(--gold);flex-wrap:wrap}
.top .brand{display:flex;gap:10px;align-items:center;font-family:var(--f-disp);font-size:19px;font-weight:600;letter-spacing:.04em}
.top .brand small{font-family:var(--f-body);font-size:12px;color:var(--muted);letter-spacing:0;font-weight:500}
.top .sp{flex:1}
.chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--accent-soft);color:var(--accent)}
.chip.admin{background:#fff3cf;color:#6b5000}
.chip.off{background:var(--err-soft);color:var(--err)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.trial{background:#e9efff;color:#23408e}
.trialtag{margin-top:4px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}.trialtag .small{flex-basis:100%;font-size:11.5px}
.trialcard{border:2px solid #b9c8f0}
.trialres{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;padding:12px 14px;border-radius:14px;background:#f4f7ff;border:1px solid #cdd8f5}
.trialres dt{font-size:12px;color:var(--muted);align-self:center}.trialres dd{margin:0;font-weight:600;word-break:break-all}.trialres dd.mono{font-size:16px;letter-spacing:.04em}
.trialacts{gap:10px;flex-wrap:wrap}
.page{max-width:1180px;margin:22px auto;padding:0 18px;display:flex;flex-direction:column;gap:18px}
.card{background:#fff;border-radius:26px;padding:18px 20px;box-shadow:var(--slab)}
.card h2{margin-bottom:10px}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.row .field{min-width:170px}
table.ut{border-collapse:collapse;width:100%;font-size:13px}
table.ut th,table.ut td{padding:9px 8px;border-bottom:1px solid var(--soft);text-align:left;vertical-align:top}
table.ut th{font-size:12px;color:var(--muted);font-weight:600}
table.ut td.act{white-space:nowrap}
table.ut td.act .btn{margin:0 4px 6px 0}
table.ut td.act.trial{white-space:normal;min-width:300px}
.tw{overflow:auto}
.msg{padding:9px 13px;border-radius:14px;font-size:13px;box-shadow:var(--well)}
.msg.ok{background:var(--accent-soft);color:var(--ok)}
.msg.err{background:var(--err-soft);color:var(--err)}
.keys{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px;font-size:12px}
.keys li{font-family:var(--f-mono)}
dialog{border:0;border-radius:26px;padding:22px;box-shadow:var(--slab),0 30px 60px rgba(0,0,0,.25);outline:3px solid var(--gold);outline-offset:-3px;width:min(440px,94vw)}
dialog::backdrop{background:rgba(22,36,29,.35)}
dialog .stack{display:flex;flex-direction:column;gap:12px}
dialog .acts{display:flex;gap:8px;justify-content:flex-end}
.secret{font-family:var(--f-mono);font-size:18px;letter-spacing:.06em;padding:10px;border-radius:14px;box-shadow:var(--well);background:#fbfdfc;text-align:center;user-select:all}

/* kontak admin (WhatsApp) */
.gwa{font-size:13px;color:var(--muted)}
.gwa a.wa{font-weight:600;color:#128c4a}
.btn.wa{background:linear-gradient(160deg,#3fd47a,#14935a);color:#fff;font-weight:600;box-shadow:5px 7px 14px rgba(20,147,90,.35),inset -3px -4px 7px rgba(0,0,0,.18),inset 3px 4px 7px rgba(255,255,255,.4)}