:root{
  --bg:#0f0f14;--panel:#17171f;--panel2:#1e1e29;--line:#2a2a38;--text:#e8e8f0;--muted:#8b8ba3;
  --accent:#7c5cff;--accent2:#22d3ee;--danger:#f43f5e;--ok:#22c55e;--radius:12px;
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 600px at 10% -10%,#7c5cff22,transparent),var(--bg);color:var(--text);min-height:100vh;font-size:14px}
.hidden{display:none!important}
a{color:var(--accent2)}
input,select,textarea{font:inherit;color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;outline:none;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
textarea{resize:vertical;line-height:1.5}
label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);margin-bottom:12px}
label.inline{flex-direction:row;align-items:center;margin:0;white-space:nowrap}
.btn{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--panel2);color:var(--text);padding:8px 14px;border-radius:8px;transition:.15s}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.primary:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--danger)}
.btn.danger:hover{border-color:var(--danger)}
.btn.sm{padding:6px 10px;font-size:13px}
.btn.full{width:100%}
.btn.active{border-color:var(--accent);color:#fff}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:16px}
.muted{color:var(--muted)}
.error{color:var(--danger);min-height:1em;margin:4px 0 8px;font-size:13px}
.brand{display:flex;align-items:center;gap:10px}
.brand small{display:block;color:var(--muted);font-size:11px}
.logo{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent2));font-weight:800;color:#fff;font-size:13px}
.brand.big .logo{width:44px;height:44px;font-size:16px}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{width:100%;max-width:360px;padding:28px}
.login-card .brand{margin-bottom:22px}
.topbar{display:flex;align-items:center;gap:20px;padding:12px 24px;border-bottom:1px solid var(--line);background:#0f0f14cc;backdrop-filter:blur(8px);position:sticky;top:0;z-index:5}
.topbar nav{display:flex;gap:4px}
.tab{background:none;border:0;color:var(--muted);font:inherit;padding:8px 12px;border-radius:8px;cursor:pointer}
.tab.active,.tab:hover{color:var(--text);background:var(--panel2)}
.user-menu{margin-left:auto;display:flex;align-items:center;gap:8px}
#me-name{color:var(--muted);margin-right:4px}
main{max-width:1280px;margin:0 auto;padding:24px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:16px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;cursor:pointer}
.stat:hover{border-color:var(--accent)}
.stat b{display:block;font-size:22px}
.stat span{color:var(--muted);font-size:12px;text-transform:capitalize}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.toolbar #f-q{flex:1 1 260px}
.toolbar select{width:auto;flex:0 1 160px}
.toolbar input[type=date]{width:auto}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.spacer{flex:1}
.view-toggle{display:flex;gap:4px;margin-right:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.item{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:.15s}
.item:hover{border-color:var(--accent);transform:translateY(-1px)}
.item h4{margin:0;font-size:15px;line-height:1.35}
.item .sum{color:#c3c3d4;font-size:13px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}
.meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--muted)}
.chip{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);font-size:11px;color:#c9c9de;cursor:pointer}
.chip:hover{border-color:var(--accent2)}
.status{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;text-transform:capitalize}
.s-ide{background:#64748b33;color:#cbd5e1}.s-riset{background:#0ea5e933;color:#7dd3fc}.s-draft{background:#eab30833;color:#fde047}
.s-review{background:#f9731633;color:#fdba74}.s-siap{background:#22c55e33;color:#86efac}.s-publish{background:#7c5cff44;color:#c4b5fd}.s-arsip{background:#33333a;color:#888}
.topic{color:var(--accent2);font-weight:600}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.table th{color:var(--muted);font-weight:500;font-size:12px}
.table tr.click{cursor:pointer}.table tr.click:hover td{background:var(--panel2)}
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.dlg{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:16px;padding:22px;width:min(680px,94vw);max-height:90vh}
.dlg.wide{width:min(860px,94vw)}
.dlg::backdrop{background:#000a;backdrop-filter:blur(2px)}
.dlg h3{margin:0 0 16px}
.row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.detail h2{margin:6px 0 10px;font-size:20px}
.detail .body{white-space:pre-wrap;line-height:1.65;background:var(--panel2);padding:14px;border-radius:10px;margin:12px 0}
.detail .src{white-space:pre-wrap;word-break:break-all}
.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;align-items:end}
.grid-form label{margin:0}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--accent);padding:10px 18px;border-radius:10px;opacity:0;transition:.25s;pointer-events:none;z-index:100}
#toast.show{opacity:1}
#print-area{display:none}
@media (max-width:720px){
  .topbar{flex-wrap:wrap;padding:10px 14px;gap:10px}.user-menu{width:100%;margin:0}
  main{padding:14px}.row{grid-template-columns:1fr}.toolbar select{flex:1 1 45%}
  .table-wrap{overflow-x:auto}
}
@media print{
  body{background:#fff;color:#000;font-size:11px}
  body>*:not(#print-area){display:none!important}
  #print-area{display:block!important}
  #print-area h1{font-size:16px;margin:0 0 4px}
  #print-area .pmeta{color:#555;margin-bottom:12px}
  #print-area table{width:100%;border-collapse:collapse}
  #print-area th,#print-area td{border:1px solid #bbb;padding:5px;text-align:left;vertical-align:top}
  #print-area th{background:#eee}
  #print-area td.sum{white-space:pre-wrap}
  #print-area tr{page-break-inside:avoid}
  @page{size:A4 landscape;margin:12mm}
}