/* HANMA Studio — design system (light frosted glass + navy cockpit) */
:root{
  --paper:#F4F1EA; --panel:rgba(255,255,255,.62); --panel-solid:#FBFAF6;
  --ink:#191C24; --ink-soft:#4C515F; --ink-faint:#7C8290;
  --line:rgba(25,28,36,.12); --line-soft:rgba(25,28,36,.07);
  --navy:#0D1430; --navy-2:#141C42;
  --blue:#2563EB; --blue-soft:#DCE6FD; --blue-ink:#1B45B0;
  --teal:#0E8A82; --teal-soft:#D8EFEC;
  --good:#0E9F6E; --good-bg:#DDF3EA; --warn:#B7791F; --warn-bg:#FBEFD6; --crit:#D64545; --crit-bg:#FADCDC;
  --fh:"Space Grotesk",-apple-system,system-ui,sans-serif;
  --fb:"Plus Jakarta Sans",-apple-system,system-ui,sans-serif;
  --fd:"Fraunces",Georgia,serif;
  --glass:saturate(1.4) blur(18px);
  --shadow:0 18px 44px -22px rgba(13,20,48,.4);
  --r:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--fb);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(760px 520px at 90% -6%, rgba(37,99,235,.12), transparent 60%),
    radial-gradient(680px 520px at -6% 12%, rgba(14,138,130,.10), transparent 58%),
    radial-gradient(600px 460px at 60% 108%, rgba(37,99,235,.08), transparent 60%),
    var(--paper);
  background-attachment:fixed;}
.mono,.num{font-family:var(--fh);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
a{color:var(--blue-ink);text-decoration:none}
button{font-family:var(--fb);cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}

/* ---------- app shell ---------- */
.app{display:flex;min-height:100vh}
.rail{width:236px;flex:0 0 236px;background:rgba(255,255,255,.5);
  backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  border-right:1px solid var(--line);display:flex;flex-direction:column;padding:16px 14px;gap:1px;position:sticky;top:0;height:100vh}
.rail .brand{display:flex;align-items:center;gap:11px;padding:6px 8px;margin-bottom:12px}
.rail .mk{width:40px;height:40px;border-radius:11px;background:linear-gradient(150deg,var(--navy),var(--navy-2));color:#fff;
  display:grid;place-items:center;font-family:var(--fh);font-weight:700;font-size:19px;box-shadow:0 8px 20px -8px rgba(13,20,48,.6)}
.rail .bt{font-family:var(--fh);font-weight:600;font-size:15px;line-height:1.1}
.rail .bs{font-size:11px;color:var(--ink-faint)}
.rail .gl{font-size:10px;color:var(--ink-faint);font-weight:700;letter-spacing:.07em;padding:14px 12px 6px}
.nav{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:11px;color:var(--ink-soft);
  font-size:13px;font-weight:500;border:none;background:none;width:100%;text-align:left;position:relative}
.nav svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;flex:0 0 19px}
.nav .lb{flex:1}
.nav .bd{font-family:var(--fh);font-weight:700;font-size:11px;background:var(--blue);color:#fff;border-radius:20px;padding:1px 7px}
.nav:hover{background:rgba(255,255,255,.6);color:var(--ink)}
.nav.on{background:var(--blue-soft);color:var(--blue-ink);font-weight:600}
.nav.on svg{stroke:var(--blue)}
.rail .sp{flex:1}
.rail .user{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.55);border:1px solid var(--line);margin-top:6px}
.rail .user .av{width:34px;height:34px;border-radius:10px;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--fh);font-weight:600;font-size:13px}
.rail .user .un{font-size:13px;font-weight:600;line-height:1.1}
.rail .user .ur{font-size:11px;color:var(--ink-faint)}
.rail .user .out{margin-left:auto;background:none;border:none;color:var(--ink-faint)}
.rail .user .out svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:14px;padding:22px 30px 4px;flex-wrap:wrap}
.top .hi{flex:1;min-width:200px}
.top .k{font-size:12px;color:var(--ink-faint);font-weight:600}
.top h1{font-family:var(--fd);font-style:italic;font-weight:600;font-size:26px;letter-spacing:-.01em;margin:2px 0 0;line-height:1.05}
.top h1 em{font-style:italic;color:var(--blue-ink)}
.wrap{padding:16px 30px 40px}
.cols{display:grid;grid-template-columns:1fr 350px;gap:18px;align-items:start}
@media(max-width:1080px){.cols{grid-template-columns:1fr}}

/* ---------- glass card ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);box-shadow:var(--shadow)}
.card .ch{display:flex;align-items:center;gap:10px;padding:15px 18px 0}
.card .ch h3{font-family:var(--fh);font-weight:600;font-size:14px;flex:1;margin:0}
.cnt{font-family:var(--fh);font-weight:600;font-size:12px;color:var(--ink-faint);background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:20px;padding:2px 9px}
.lnk{font-size:12px;color:var(--blue-ink);font-weight:600;background:none;border:none}

/* ---------- cockpit ---------- */
.cockpit{grid-column:1/-1;background:
   radial-gradient(560px 320px at 13% 16%, rgba(37,99,235,.34), transparent 60%),
   linear-gradient(155deg,#18244170 0%,#111A32 30%,#0C1226 62%,#090D1C 100%);
  border:1px solid rgba(125,165,255,.22);border-radius:18px;padding:22px 24px;color:#EAF0FF;
  box-shadow:0 26px 60px -30px rgba(13,20,48,.9);position:relative;overflow:hidden}
.cockpit .lbl{font-family:var(--fh);text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:#93A4CF;display:flex;align-items:center;gap:8px}
.cockpit .live{background:var(--good);color:#04160E;font-size:10px;font-weight:700;padding:1px 7px;border-radius:20px}
.cockpit .big{font-family:var(--fh);font-weight:700;font-size:clamp(30px,5vw,40px);letter-spacing:-.02em;line-height:1;margin-top:6px;font-variant-numeric:tabular-nums}
.cockpit .big small{font-size:17px;color:#93A4CF;font-weight:500}
.cockpit .sub{font-size:12px;color:#8FA0C6;margin-top:6px}
.cockpit .brk{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid rgba(255,255,255,.12);margin-top:16px;padding-top:14px}
.cockpit .bi{flex:1;min-width:150px;padding-right:16px}
.cockpit .bi+.bi{padding-left:16px;border-left:1px solid rgba(255,255,255,.12)}
.cockpit .bi .t{font-size:11px;color:#8FA0C6;font-weight:600}
.cockpit .bi .v{font-family:var(--fh);font-weight:600;font-size:19px;margin-top:4px;font-variant-numeric:tabular-nums}

/* ---------- lanes / funnel ---------- */
.lane{padding:16px 0}
.lane+.lane{border-top:1px dashed var(--line)}
.lh{display:flex;align-items:center;gap:11px;margin-bottom:12px;flex-wrap:wrap}
.tag{font-family:var(--fh);font-weight:700;font-size:11px;letter-spacing:.04em;padding:3px 9px;border-radius:7px;color:#fff}
.tag.a{background:var(--blue)}.tag.b{background:var(--teal)}
.lh .nm{font-family:var(--fh);font-weight:600;font-size:14px}
.lh .ds{font-size:12px;color:var(--ink-faint)}
.track{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.stg{flex:1;min-width:150px;background:rgba(255,255,255,.45);border:1px solid var(--line);border-radius:12px;padding:10px}
.stg .sk{display:flex;justify-content:space-between;margin-bottom:8px}
.stg .sn{font-size:11px;font-weight:700;color:var(--ink-soft)}
.stg .sc{font-family:var(--fh);font-weight:700;font-size:12px;color:var(--ink-faint)}
.stg.act{border-color:var(--blue);background:var(--blue-soft)}
.stg.act .sn,.stg.act .sc{color:var(--blue-ink)}

/* ---------- approval dock ---------- */
.item{padding:13px 18px;border-top:1px solid var(--line-soft)}
.item:first-of-type{margin-top:4px;border-top:none}
.item .r1{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.pill{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:5px}
.p-story{background:#EFE6F7;color:#6B3FA0}.p-feed{background:#E6EDF7;color:#3563B0}
.p-carousel{background:#FCE6D9;color:#C2571E}.p-va{background:#E3F0E9;color:#2E7D57}
.p-script{background:#F6ECD8;color:#B4791A}.p-image_ad{background:#E6EDF7;color:#3563B0}
.item .pr{font-size:11px;color:var(--ink-faint);font-weight:600}
.item .tm{margin-left:auto;font-family:var(--fh);font-size:10px;color:var(--ink-faint)}
.item .qt{font-size:12.5px;color:var(--ink-soft);font-weight:500}
.item .qt b{color:var(--ink)}
.acts{display:flex;gap:6px;margin-top:10px}
.acts .b{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;height:34px;border-radius:9px;font-size:11.5px;font-weight:700;border:1px solid var(--line);background:rgba(255,255,255,.7);color:var(--ink-soft)}
.acts .b svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.acts .b.ap{background:var(--good);border-color:var(--good);color:#fff;flex:0 0 100px}
.acts .b.cw{color:var(--blue-ink);border-color:var(--blue-soft);background:var(--blue-soft)}

/* ---------- buttons / forms ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--blue);color:#fff;border:none;border-radius:11px;padding:10px 15px;font-size:13px;font-weight:600;box-shadow:0 8px 18px -10px rgba(37,99,235,.8)}
.btn.ghost{background:rgba(255,255,255,.6);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.sm{padding:7px 11px;font-size:12px;border-radius:9px}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin:12px 0 5px}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.75);font-family:var(--fb);font-size:14px;color:var(--ink)}
textarea{min-height:90px;resize:vertical}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1;min-width:140px}

/* ---------- table ---------- */
.scroll{overflow-x:auto;border-radius:12px;border:1px solid var(--line);margin:0 18px 16px}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:13px}
thead th{background:rgba(255,255,255,.6);text-align:left;font-family:var(--fh);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);padding:10px 13px;border-bottom:1px solid var(--line)}
td{padding:9px 13px;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--ink-soft)}
td.f{font-family:var(--fh);font-weight:600;color:var(--ink)}
tr:last-child td{border-bottom:none}
.st-badge{font-family:var(--fh);font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em}
.st-draft{background:#EEE;color:#666}.st-review{background:var(--warn-bg);color:var(--warn)}
.st-approved{background:var(--good-bg);color:var(--good)}.st-produksi{background:var(--blue-soft);color:var(--blue-ink)}
.st-selesai{background:var(--teal-soft);color:var(--teal)}.st-posted{background:#E7E9EF;color:#333}
.st-rejected,.st-assigned{background:#EEE;color:#666}.st-in_progress{background:var(--warn-bg);color:var(--warn)}
.st-uploaded{background:var(--blue-soft);color:var(--blue-ink)}.st-done{background:var(--good-bg);color:var(--good)}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login .box{width:100%;max-width:380px}
.login .card{padding:26px 24px}
.login .mk{width:46px;height:46px;border-radius:13px;background:linear-gradient(150deg,var(--navy),var(--navy-2));color:#fff;display:grid;place-items:center;font-family:var(--fh);font-weight:700;font-size:22px;margin-bottom:16px}
.login h2{font-family:var(--fh);font-weight:700;font-size:20px;margin:0 0 3px}
.login p.s{color:var(--ink-faint);font-size:13px;margin:0 0 8px}
.err{background:var(--crit-bg);color:var(--crit);font-size:12.5px;font-weight:600;padding:8px 11px;border-radius:9px;margin-top:12px}

/* ---------- misc ---------- */
.empty{padding:22px 18px;color:var(--ink-faint);font-size:13px;text-align:center}
.section-title{font-family:var(--fh);font-weight:700;font-size:16px;margin:22px 0 10px}
.gen{padding:0 18px 16px}
.gen .grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px}
.gen .gb{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px;background:rgba(255,255,255,.5);border:1px solid var(--line);border-radius:12px;color:var(--ink-soft);font-size:11px;font-weight:600}
.gen .gb svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7}
.modal-bg{position:fixed;inset:0;background:rgba(13,20,48,.4);backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px;z-index:50}
.modal{width:100%;max-width:440px;background:var(--panel-solid);border-radius:16px;padding:22px;box-shadow:var(--shadow);max-height:90vh;overflow:auto}
.modal h3{font-family:var(--fh);margin:0 0 4px}
.chip-pick{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:6px 10px;border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.6);margin:4px 4px 0 0}
.chip-pick.on{background:var(--blue-soft);color:var(--blue-ink);border-color:var(--blue)}

/* mobile: rail -> top */
@media(max-width:720px){
  .app{flex-direction:column}
  .rail{width:auto;flex:none;height:auto;position:sticky;top:0;flex-direction:row;align-items:center;overflow-x:auto;gap:4px;z-index:20}
  .rail .brand{margin:0 8px 0 0}.rail .bt,.rail .bs,.rail .gl,.rail .user .un,.rail .user .ur{display:none}
  .rail .sp{display:none}.nav{width:auto;padding:8px 10px}.nav .lb{display:none}
  .rail .user{margin:0 0 0 auto;padding:6px}
  .top,.wrap{padding-left:16px;padding-right:16px}
}