/* MASRI Prompt AI — gaya halaman aplikasi (dashboard & generator baru).
   Token sama dengan landing page (public/index.html). */
:root{
  --bg-0:#05070d; --bg-1:#090c16; --bg-2:#0d1120;
  --ink-0:#F3F5FB; --ink-1:#AEB4C8; --ink-2:#767D93;
  --cyan:#00D4FF; --violet:#8B5CF6; --amber:#F5A623; --green:#10B981; --red:#F87171;
  --glass-bg:rgba(255,255,255,.04); --glass-bg-strong:rgba(255,255,255,.065); --glass-brd:rgba(255,255,255,.09);
  --f-display:'Space Grotesk','Segoe UI',sans-serif; --f-body:'Inter','Segoe UI',sans-serif; --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --radius:18px; --radius-sm:12px;
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg-0:#F7F8FC; --bg-1:#EFF1F8; --bg-2:#E6E9F4;
  --ink-0:#12141C; --ink-1:#454B5C; --ink-2:#767E93;
  --glass-bg:rgba(255,255,255,.7); --glass-bg-strong:rgba(255,255,255,.9); --glass-brd:rgba(20,25,50,.1);
  --red:#DC2626;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg-0); color:var(--ink-0); font:15px/1.6 var(--f-body); min-height:100vh;
  background-image:radial-gradient(900px 500px at 85% -10%, rgba(139,92,246,.14), transparent 60%),
                   radial-gradient(700px 400px at -10% 10%, rgba(0,212,255,.10), transparent 60%);}
a{color:inherit}
button{font:inherit; color:inherit}
.shell{max-width:1080px; margin:0 auto; padding:0 16px}
.muted{color:var(--ink-1)} .small{font-size:.85rem}
[hidden]{display:none !important}

/* top bar */
.topbar{position:sticky; top:0; z-index:10; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--bg-0) 78%, transparent); border-bottom:1px solid var(--glass-brd)}
.topbar .shell{display:flex; align-items:center; gap:12px; height:62px}
.brand{font-family:var(--f-display); font-weight:700; text-decoration:none; letter-spacing:-.01em; margin-right:auto; white-space:nowrap}
.brand-mark{color:var(--cyan)}
.icon-btn{width:40px; height:40px; border-radius:12px; border:1px solid var(--glass-brd); background:var(--glass-bg); cursor:pointer; display:inline-grid; place-items:center}
.icon-btn:hover{border-color:var(--cyan)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:8px 16px; border-radius:12px;
  border:1px solid var(--glass-brd); background:var(--glass-bg-strong); text-decoration:none; cursor:pointer; font-weight:600; font-size:.9rem}
.btn:hover{border-color:var(--cyan)}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn-primary{background:linear-gradient(135deg, var(--cyan), var(--violet)); border-color:transparent; color:#05070d}
.btn-primary:hover{filter:brightness(1.08)}
.btn-sm{min-height:34px; padding:5px 11px; font-size:.82rem; border-radius:10px}
.btn-danger:hover{border-color:var(--red); color:var(--red)}

/* cards */
.card{background:var(--glass-bg); border:1px solid var(--glass-brd); border-radius:var(--radius); padding:20px}
.grid{display:grid; gap:14px}
main{padding:24px 0 64px}
h1,h2,h3{font-family:var(--f-display); letter-spacing:-.015em; margin:0}
h1{font-size:clamp(1.4rem, 4vw, 1.9rem)}
h2{font-size:1.15rem; margin-bottom:12px}
section{margin-top:28px}

/* hello + stats */
.hello{display:grid; gap:14px; grid-template-columns:1.4fr 1fr}
.badge{display:inline-flex; align-items:center; gap:6px; font-size:.75rem; font-weight:700; letter-spacing:.04em; padding:3px 10px; border-radius:999px; border:1px solid var(--glass-brd)}
.badge-pro{background:linear-gradient(135deg, rgba(245,166,35,.22), rgba(139,92,246,.22)); border-color:rgba(245,166,35,.5); color:var(--amber)}
.badge-free{color:var(--ink-1)}
.meter{height:10px; border-radius:999px; background:var(--bg-2); overflow:hidden; margin:10px 0 6px}
.meter > i{display:block; height:100%; width:0; background:linear-gradient(90deg, var(--cyan), var(--violet)); transition:width .4s}
.meter.full > i{background:var(--red)}
.stat{font-family:var(--f-display); font-size:1.6rem; font-weight:700}

/* generator tiles */
.tiles{grid-template-columns:repeat(auto-fill, minmax(200px, 1fr))}
.tile{display:flex; flex-direction:column; gap:6px; text-decoration:none; padding:16px; border-radius:var(--radius-sm);
  background:var(--glass-bg); border:1px solid var(--glass-brd); transition:transform .15s, border-color .15s; position:relative}
.tile:hover{transform:translateY(-2px); border-color:var(--cyan)}
.tile i.bi{font-size:1.35rem; color:var(--cyan)}
.tile b{font-family:var(--f-display); font-size:1rem}
.tile span{font-size:.84rem; color:var(--ink-1)}
.tile .tag{position:absolute; top:12px; right:12px; font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:999px; border:1px solid var(--glass-brd); color:var(--ink-1)}
.tile.soon{opacity:.6; pointer-events:none}

/* upgrade */
.upgrade{display:flex; gap:16px; align-items:center; flex-wrap:wrap; border-color:rgba(245,166,35,.35);
  background:linear-gradient(135deg, rgba(245,166,35,.08), rgba(139,92,246,.08))}
.upgrade div{flex:1 1 260px}

/* history */
.tabs{display:flex; gap:6px; margin-bottom:12px}
.tabs button{border:1px solid var(--glass-brd); background:transparent; padding:6px 14px; border-radius:999px; cursor:pointer; font-size:.88rem}
.tabs button[aria-selected="true"]{background:var(--glass-bg-strong); border-color:var(--cyan)}
.hist{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.hist li{background:var(--glass-bg); border:1px solid var(--glass-brd); border-radius:var(--radius-sm); padding:14px}
.hist-head{display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap}
.hist-title{flex:1 1 220px; min-width:0}
.hist-title b{display:block; overflow-wrap:anywhere}
.hist-actions{display:flex; gap:6px; flex-wrap:wrap}
.preview{color:var(--ink-1); font-size:.86rem; margin-top:6px; overflow-wrap:anywhere}
.fav-on{color:var(--amber); border-color:rgba(245,166,35,.5)}
pre.output{white-space:pre-wrap; overflow-wrap:anywhere; font:13px/1.55 var(--f-mono); background:var(--bg-1); border:1px solid var(--glass-brd);
  border-radius:var(--radius-sm); padding:14px; margin:12px 0 0; max-height:420px; overflow:auto}
.empty{text-align:center; padding:28px 16px; color:var(--ink-1)}

/* toast + state */
.toast{position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:50; max-width:calc(100% - 32px);
  padding:11px 16px; border-radius:12px; background:#1f2937; color:#fff; font-size:.9rem; box-shadow:0 8px 24px rgba(0,0,0,.3)}
.state{padding:60px 16px; text-align:center}

@media (max-width:760px){
  .hello{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2, minmax(0,1fr))}
  .card{padding:16px}
}
@media (max-width:380px){ .tiles{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ *{transition:none !important} }

/* generator form + hasil */
.gen-layout{display:grid; gap:16px; grid-template-columns:minmax(0,380px) minmax(0,1fr); align-items:start}
.form-grid{display:grid; gap:12px}
.field label{display:block; font-size:.85rem; font-weight:600; margin-bottom:5px}
.field .req{color:var(--cyan)}
.field input,.field select,.field textarea{width:100%; font:inherit; font-size:.92rem; color:var(--ink-0); background:var(--bg-1);
  border:1px solid var(--glass-brd); border-radius:10px; padding:9px 11px; min-height:40px}
.field textarea{resize:vertical; min-height:72px}
.field input:focus,.field select:focus,.field textarea:focus,textarea.editor:focus{outline:2px solid color-mix(in srgb, var(--cyan) 60%, transparent); outline-offset:1px; border-color:transparent}
.field .hint{font-size:.78rem; color:var(--amber); margin-top:4px}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--red)}
.notice{border-radius:var(--radius-sm); padding:12px 14px; font-size:.9rem; border:1px solid var(--glass-brd); background:var(--glass-bg-strong)}
.notice.warn{border-color:rgba(245,166,35,.5)}
.notice.err{border-color:color-mix(in srgb, var(--red) 60%, transparent)}
.notice .btn{margin-top:8px}
.toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px}
.sec{background:var(--glass-bg); border:1px solid var(--glass-brd); border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:10px}
.sec-head{display:flex; justify-content:space-between; align-items:center; gap:8px}
.sec-head b{font-family:var(--f-display); font-size:.9rem; letter-spacing:.02em}
.sec pre{white-space:pre-wrap; overflow-wrap:anywhere; font:13px/1.55 var(--f-mono); margin:8px 0 0}
textarea.editor{width:100%; min-height:480px; font:13px/1.55 var(--f-mono); color:var(--ink-0); background:var(--bg-1); border:1px solid var(--glass-brd); border-radius:var(--radius-sm); padding:12px}
.placeholder{padding:40px 16px; text-align:center; color:var(--ink-1); border:1px dashed var(--glass-brd); border-radius:var(--radius)}
@media (max-width:860px){ .gen-layout{grid-template-columns:1fr} }