:root{--bg:#FFF3F7;--surface:#fff;--ink:#3B1F2B;--muted:#7D6070;--line:#F2D3DE;--red:#C2185B;--gold:#C9A227;--goldtext:#8A6A12;--ok:#2F6B3A}
@media (prefers-color-scheme:dark){:root{--bg:#1E1219;--surface:#2A1A23;--ink:#F6E8EE;--muted:#C4A9B6;--line:#4A2E3C;--red:#F06292;--gold:#E0C15A;--goldtext:#E0C15A;--ok:#7BC48A}}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:radial-gradient(circle at 20% 10%,color-mix(in srgb,var(--red) 18%,var(--bg)),var(--bg) 60%);min-height:100vh}
.auth{min-height:100vh;display:grid;place-items:center;padding:16px}
.card{width:min(860px,100%);display:grid;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 20px 50px rgba(194,24,91,.18)}
@media (min-width:720px){.card{grid-template-columns:.9fr 1.1fr}}
.img{background:#3a1d14;min-height:200px;max-height:260px}
@media (min-width:720px){.img{max-height:none}}
.img img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.body{padding:24px clamp(18px,4vw,34px) 26px;display:flex;flex-direction:column;gap:8px}
.kicker{margin:0;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--red)}
h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(1.4rem,4vw,1.9rem);color:var(--red);margin:0;line-height:1.2}
h2{font-family:Georgia,serif;font-weight:400;font-size:1.25rem;margin:10px 0 0}
.nama{margin:0;font-family:Georgia,serif;font-size:1.1rem}
.form{display:grid;gap:12px;margin-top:8px}
.form label{display:grid;gap:4px;font-size:.85rem;color:var(--muted)}
.form input{font:inherit;font-size:1rem;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:11px 12px}
.form input:focus{outline:2px solid var(--gold);outline-offset:1px}
.form button{font:inherit;font-weight:700;font-size:1rem;padding:12px;border:0;border-radius:10px;background:var(--red);color:#fff;cursor:pointer}
.alt{margin:6px 0 0;text-align:center}.alt a{color:var(--red);font-weight:600}
.hint{margin:4px 0 0;font-size:.88rem;color:var(--muted)}
.err{margin:6px 0 0;padding:10px 12px;border-radius:8px;background:color-mix(in srgb,var(--red) 12%,var(--surface));color:var(--red);font-weight:600}
.ok{margin:6px 0 0;padding:10px 12px;border-radius:8px;background:color-mix(in srgb,var(--ok) 14%,var(--surface));color:var(--ok);font-weight:600}
/* daftar project (Super Admin) */
.prj{width:min(860px,100%);margin:0 auto;padding:24px 16px 48px;display:grid;gap:20px}
.prj-top{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:flex-end}
.prj-user{margin:0;font-size:.88rem;color:var(--muted);text-align:right}.prj-user a{color:var(--red);font-weight:600}
.prj-list{display:grid;gap:10px}
.prj-item{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;color:inherit;text-decoration:none}
.prj-item:hover,.prj-item:focus-visible{border-color:var(--red);outline:none}
.prj-item.cur{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.prj-nama{font-family:Georgia,serif;font-size:1.1rem;color:var(--red)}
.prj-meta{grid-column:1;font-size:.85rem;color:var(--muted)}
.prj-open{grid-column:2;grid-row:1/3;align-self:center;font-weight:700;color:var(--red);white-space:nowrap}
.prj-end{color:var(--red);font-weight:600}
.prj-add{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px clamp(16px,4vw,28px)}
.prj-add h2{margin:0 0 4px}
.prj-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form select{font:inherit;font-size:1rem;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:11px 12px}