/* Tata letak: bilah samping kiri (menu per role) + area kerja; di HP menu jadi bilah geser di atas */
:root{
  --bg:#E8DCCB; --sf:#FBF7EF; --sf2:#EFE5D6; --ink:#2F2C33; --mut:#554F57; --ln:#D3C4AE; --ln2:#B8A78E;
  --acc:#2F2C33; --accs:#F6D2CB; --acci:#F7F1E8; --pk:#F2A7A0; --pks:#F6D2CB;
  --ok:#2E6B4B; --oks:#E3EEDF; --warn:#8A4410; --warns:#FBE7D0; --bad:#A93C34; --bads:#F9DAD5;
  --addb:#E3EEDF; --addf:#2E6B4B; --delb:#F9DAD5; --delf:#A93C34;
  --ff:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#1F1D22; --sf:#2A272E; --sf2:#34303A; --ink:#F2ECE3; --mut:#B9B2BC; --ln:#3C3841; --ln2:#4E4955;
  --acc:#F2A7A0; --accs:#4A3636; --acci:#2F2C33; --pk:#E8968F; --pks:#4A3636;
  --ok:#8FD0A9; --oks:#233629; --warn:#F0B87A; --warns:#40301C; --bad:#F2A7A0; --bads:#4A3636;
  --addb:#233629; --addf:#8FD0A9; --delb:#4A3636; --delf:#F2A7A0; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1F1D22; --sf:#2A272E; --sf2:#34303A; --ink:#F2ECE3; --mut:#B9B2BC; --ln:#3C3841; --ln2:#4E4955;
  --acc:#F2A7A0; --accs:#4A3636; --acci:#2F2C33; --pk:#E8968F; --pks:#4A3636;
  --ok:#8FD0A9; --oks:#233629; --warn:#F0B87A; --warns:#40301C; --bad:#F2A7A0; --bads:#4A3636;
  --addb:#233629; --addf:#8FD0A9; --delb:#4A3636; --delf:#F2A7A0; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg); color:var(--ink); font-family:var(--ff); font-size:14px; line-height:1.5}
h1,h2,h3{margin:0; text-wrap:balance; line-height:1.25}
h1{font-size:22px; font-weight:750}
h2{font-size:16px; font-weight:700}
h3{font-size:14px; font-weight:700}
p{margin:0}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--acc)}
.mut{color:var(--mut)}
.sm{font-size:12.5px}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--acc); outline-offset:2px}

/* bilah prototipe */
.proto{background:var(--ink); color:var(--bg); font-size:12.5px; padding-block:7px; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center}
.proto b{font-weight:700}
.proto select{background:transparent; color:inherit; border:1px solid currentColor; border-radius:6px; padding:2px 6px; font-size:12.5px}
.proto select option{color:#2F2C33; background:#FBF7EF}
.proto .sp{flex:1}
@media (max-width:600px){.proto .pd{display:none}}
.proto button{background:none; border:1px solid currentColor; border-radius:6px; padding:2px 9px; cursor:pointer; font-size:12.5px}

/* tombol & isian */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; padding:6px 14px; border-radius:8px; border:1px solid var(--ln2); background:var(--sf); font-weight:650; font-size:13.5px; cursor:pointer; white-space:nowrap}
.btn:hover{border-color:var(--acc)}
.btn.pri{background:var(--acc); border-color:var(--acc); color:var(--acci)}
.btn.danger{color:var(--bad)}
.btn.ghost{border-color:transparent; background:none}
.btn.xs{min-height:28px; padding:3px 10px; font-size:12.5px; border-radius:7px}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.fld{display:grid; gap:5px}
.fld label{font-weight:650; font-size:13px}
.in{width:100%; min-height:38px; padding:7px 10px; border:1px solid var(--ln2); border-radius:8px; background:var(--sf)}
textarea.in{min-height:90px; resize:vertical}
.err{color:var(--bad); font-size:12.5px}
.chk{display:flex; gap:8px; align-items:flex-start; font-size:13px}
.chk input{margin-top:3px}

/* login */
.auth{min-height:calc(100vh - 40px); display:grid; place-items:center; padding-block:32px; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px))}
.authbox{width:100%; max-width:400px; display:grid; gap:18px}
.brandrow{display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; letter-spacing:-.01em}
.logo{width:34px; height:34px; border-radius:9px; background:var(--acc); color:var(--acci); display:grid; place-items:center; font-weight:800; font-size:15px}
.card{background:var(--sf); border:1px solid var(--ln); border-radius:12px; padding:20px}
.authbox form{display:grid; gap:14px}
.demo{display:grid; gap:6px}
.demo button{display:flex; justify-content:space-between; align-items:center; gap:10px; text-align:left; padding:8px 11px; border:1px dashed var(--ln2); border-radius:8px; background:var(--sf2); cursor:pointer}
.demo button:hover{border-color:var(--acc)}
.otp{font-family:var(--mono); letter-spacing:.4em; font-size:20px; text-align:center}
.lock{display:grid; gap:10px; text-align:center; justify-items:center}

/* aplikasi */
.app{display:grid; grid-template-columns:232px minmax(0,1fr); min-height:calc(100vh - 34px)}
.side{background:var(--sf); border-right:1px solid var(--ln); padding:18px 12px; display:flex; flex-direction:column; gap:18px; position:sticky; top:0; height:calc(100vh - 34px); overflow:auto}
.side .brandrow{padding:0 8px; font-size:17px}
.side .logo{width:28px; height:28px; font-size:13px; border-radius:8px}
.grp{display:grid; gap:2px}
.grp>.gt{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); padding:0 10px 4px}
.nav{display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:8px; border:0; background:none; text-align:left; cursor:pointer; font-weight:550; width:100%}
.nav:hover{background:var(--sf2)}
.nav.on{background:var(--accs); color:var(--acc); font-weight:700}
.nav .cnt{margin-left:auto; background:var(--bad); color:#fff; border-radius:9px; font-size:11px; padding:0 6px; font-weight:700}
.nav.off{color:var(--mut)}
.me{margin-top:auto; display:flex; gap:9px; align-items:center; padding:10px; border-top:1px solid var(--ln)}
.me .who{min-width:0}
.me .who b{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.main{min-width:0; padding-block:22px 48px; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px))}
.inner{max-width:1080px; margin:0 auto; display:grid; gap:18px}
.ph{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:flex-end; justify-content:space-between}
.ph p{margin-top:4px}
.av{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-weight:750; font-size:12.5px; flex:none; background:var(--accs); color:var(--acc); background-size:cover; background-position:center}
.av.big{width:72px; height:72px; font-size:24px}
.pill{display:inline-flex; align-items:center; gap:5px; border-radius:20px; padding:1px 9px; font-size:12px; font-weight:650; background:var(--sf2); border:1px solid var(--ln); white-space:nowrap}
.pill.ok{background:var(--oks); color:var(--ok); border-color:transparent}
.pill.warn{background:var(--warns); color:var(--warn); border-color:transparent}
.pill.bad{background:var(--bads); color:var(--bad); border-color:transparent}
.pill.acc{background:var(--accs); color:var(--acc); border-color:transparent}
.seg{display:inline-flex; border:1px solid var(--ln2); border-radius:8px; overflow:hidden; background:var(--sf)}
.seg button{border:0; background:none; padding:6px 12px; cursor:pointer; font-weight:600; font-size:13px}
.seg button.on{background:var(--acc); color:var(--acci)}
.kpis{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px}
.kpi{background:var(--sf); border:1px solid var(--ln); border-radius:10px; padding:13px 14px; display:grid; gap:2px}
.kpi .v{font-size:22px; font-weight:750; font-variant-numeric:tabular-nums}
.kpi .l{font-size:12.5px; color:var(--mut); font-weight:600}
.kpi .s{font-size:12px; color:var(--mut)}
.box{background:var(--sf); border:1px solid var(--ln); border-radius:12px; padding:16px; display:grid; gap:12px; min-width:0}
.box>.bh{display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; align-items:center}
.cols{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:18px}
.cols>*{min-width:0}
.tw{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:13px}
th{text-align:left; font-size:12px; color:var(--mut); font-weight:650; padding:7px 10px; border-bottom:1px solid var(--ln); white-space:nowrap}
td{padding:9px 10px; border-bottom:1px solid var(--ln); vertical-align:middle}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.pr{display:flex; align-items:center; gap:9px; min-width:0}
.pr b{white-space:nowrap}
.acts{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.empty{padding:18px; text-align:center; color:var(--mut)}
.note{background:var(--sf2); border:1px solid var(--ln); border-radius:10px; padding:11px 13px; font-size:13px; color:var(--mut)}
.note.warn{background:var(--warns); color:var(--warn); border-color:transparent}
.note.acc{background:var(--accs); color:var(--acc); border-color:transparent}

/* grafik */
.chart svg{width:100%; height:auto; display:block}
.legend{display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--mut)}
.legend i{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px}
.hbar{display:grid; grid-template-columns:90px minmax(0,1fr) 40px; gap:8px; align-items:center; font-size:13px}
.hbar .t{height:12px; background:var(--sf2); border-radius:3px; overflow:hidden}
.hbar .t i{display:block; height:100%; background:var(--acc); border-radius:3px}

/* jadwal */
.dayrow{display:grid; grid-template-columns:110px 120px 120px 110px minmax(0,1fr); gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--ln)}
.dayrow:last-child{border-bottom:0}
.dayrow .in{min-height:34px; padding:5px 8px}
.slots{display:flex; flex-wrap:wrap; gap:5px}
.slot{font-family:var(--mono); font-size:12px; padding:2px 7px; border-radius:6px; background:var(--accs); color:var(--acc); font-weight:600}
.slot.bk{background:var(--warns); color:var(--warn)}
.slot.gone{background:var(--bads); color:var(--bad); text-decoration:line-through}
.dayrow.dis .slots,.dayrow.dis select,.dayrow.dis input[type=time]{opacity:.4}
.sw{position:relative; display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-weight:650}
.sw input{width:34px; height:20px; appearance:none; background:var(--ln2); border-radius:20px; position:relative; cursor:pointer; margin:0; transition:background .15s}
.sw input::after{content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .15s}
.sw input:checked{background:var(--acc)}
.sw input:checked::after{left:16px}

/* log */
.log{display:grid}
.lg{display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px; padding:12px 0; border-bottom:1px solid var(--ln)}
.lg:last-child{border-bottom:0}
.lg .diff{grid-column:2}
.lg .hash{align-self:start; font-family:var(--mono); font-size:12px; color:var(--acc); background:var(--accs); padding:1px 6px; border-radius:5px}
.lg .meta{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; font-size:12.5px; color:var(--mut)}
.lg .lmsg{font-weight:650}
.lg .path{font-family:var(--mono); font-size:12px}
.diff{font-family:var(--mono); font-size:12px; border:1px solid var(--ln); border-radius:8px; overflow:hidden; margin-top:6px}
.diff div{padding:3px 10px; white-space:pre-wrap; overflow-wrap:anywhere}
.diff .d{background:var(--delb); color:var(--delf)}
.diff .a{background:var(--addb); color:var(--addf)}
.lg .acts{grid-column:2; justify-content:flex-start; margin-top:4px}

/* notifikasi, chat, modal */
.nt{display:flex; gap:11px; padding:12px 0; border-bottom:1px solid var(--ln)}
.nt:last-child{border-bottom:0}
.nt.unread .tx{font-weight:650}
.nt .dot{width:8px; height:8px; border-radius:50%; background:var(--acc); margin-top:7px; flex:none}
.nt.read .dot{background:transparent}
.ov{position:fixed; inset:0; background:rgba(10,14,22,.5); display:grid; place-items:center; z-index:50; padding:16px}
.mdl{background:var(--sf); border-radius:14px; width:100%; max-width:520px; max-height:calc(100vh - 32px); overflow:auto; padding:20px; display:grid; gap:14px; border:1px solid var(--ln)}
.mdl.wide{max-width:640px}
.mdl .mh{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.mdl .row{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}
.x{border:0; background:none; font-size:22px; line-height:1; cursor:pointer; color:var(--mut); padding:2px 6px}
.chat{display:grid; gap:8px; max-height:300px; overflow:auto; padding:4px}
.msg{max-width:80%; padding:8px 11px; border-radius:12px; background:var(--sf2); border:1px solid var(--ln); font-size:13.5px}
.msg.me{justify-self:end; background:var(--acc); color:var(--acci); border-color:transparent}
.msg small{display:block; font-size:11px; opacity:.75; margin-top:2px}
.toast{position:fixed; bottom:max(18px,env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:10px; font-size:13.5px; z-index:60; max-width:calc(100% - 32px); box-shadow:0 6px 24px rgba(0,0,0,.2)}
.prof{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px}
.prof>*{min-width:0}
.pcard{border:1px solid var(--ln); border-radius:12px; padding:16px; display:grid; gap:10px; background:var(--sf)}
.pcard .top{display:flex; gap:12px; align-items:center}
.tags{display:flex; flex-wrap:wrap; gap:5px}
.tags span{font-size:12px; padding:1px 8px; border-radius:6px; background:var(--sf2); border:1px solid var(--ln)}
.tagin{display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-height:40px; padding:5px 8px; border:1px solid var(--ln2); border-radius:8px; background:var(--sf)}
.tagin .tg{display:inline-flex; align-items:center; gap:2px; font-size:12.5px; padding:2px 4px 2px 9px; border-radius:6px; background:var(--accs); color:var(--acc); font-weight:600}
.tagin .tg button{border:0; background:none; color:inherit; cursor:pointer; font-size:15px; line-height:1; padding:0 4px}
.tagin input{border:0; outline:0; flex:1; min-width:90px; background:transparent; padding:4px}
.pcard .lnk{display:flex; gap:10px; flex-wrap:wrap; font-size:12.5px}
.fbi{border-bottom:1px solid var(--ln); padding:10px 0; display:grid; gap:4px}
.fbi:last-child{border-bottom:0}
.stars{color:#e0a100; letter-spacing:1px}

/* grid jadwal: klik seperti memilih kursi bioskop */
.wgrid{border-collapse:separate; border-spacing:4px; width:100%; min-width:560px; user-select:none}
.wgrid th{border:0; padding:2px 4px; text-align:center; font-size:12px}
.wgrid thead th b{display:block; font-size:13px; color:var(--ink)}
.wgrid thead th span{font-weight:500}
.wgrid th.tm{text-align:right; font-family:var(--mono); font-size:11.5px; color:var(--mut); width:52px; font-weight:500}
.wgrid td{border:0; padding:0}
.cell{width:100%; height:24px; border-radius:5px; border:1px solid var(--ln); background:var(--sf2); cursor:pointer; padding:0; display:grid; place-items:center; font-size:11px; font-weight:700; touch-action:none}
.cell:hover{border-color:var(--acc)}
.cell.on{background:var(--acc); border-color:var(--acc); color:var(--acci)}
.cell.bk{background:var(--warn); border-color:var(--warn); color:var(--sf)}
.cell.past{opacity:.35; cursor:not-allowed}
.cell.gone{background:var(--bads); border-color:var(--bad); color:var(--bad)}
/* report */
.repw{display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:18px; align-items:start}
.repw>*{min-width:0}
.repprev{position:sticky; top:16px; display:grid; gap:8px}
.pick{display:flex; flex-wrap:wrap; gap:6px}
.pk{border:1px solid var(--ln2); background:var(--sf); border-radius:16px; padding:4px 11px; font-size:12.5px; cursor:pointer}
.pk.on{background:var(--acc); border-color:var(--acc); color:var(--acci); font-weight:650}
.pk[disabled]{opacity:.4; cursor:not-allowed}
.pkin{border:1px dashed var(--ln2); border-radius:16px; padding:4px 11px; font-size:12.5px; background:transparent; min-width:140px}
.st5{display:inline-flex; gap:2px}
.st5 button{border:0; background:none; font-size:22px; line-height:1; cursor:pointer; color:var(--ln2); padding:0 1px}
.st5 button.on{color:#e0a100}
.asp{display:grid; gap:8px}
.aspr{display:grid; grid-template-columns:200px auto minmax(0,1fr); gap:10px; align-items:center; font-size:13px}
.aspr .in{min-height:32px; padding:4px 9px}
.qs{display:grid; gap:10px}
.qr2{display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:8px; align-items:start}
.qn{width:24px; height:24px; border-radius:50%; background:var(--accs); color:var(--acc); display:grid; place-items:center; font-size:12px; font-weight:700; margin-top:7px}
/* kertas report: selalu putih seperti PDF */
.paper2{--a:#1d232d; --a2:#f2f3f5; background:#fff; color:#1d232d; border:1px solid var(--ln); border-radius:6px; padding:22px 22px 16px; font-size:11.5px; line-height:1.45; box-shadow:0 6px 20px rgba(0,0,0,.08); display:grid; gap:10px; min-height:560px; align-content:start}
.paper2.th-modern{--a:#2c56c9; --a2:#e8eefc}
.paper2.th-hangat{--a:#b4532a; --a2:#fbefe6}
.paper2 h4{margin:6px 0 0; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--a)}
.p-hd{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding-bottom:10px; border-bottom:2px solid var(--a)}
.th-modern .p-hd{background:var(--a); color:#fff; margin:-22px -22px 0; padding:18px 22px; border:0; border-radius:6px 6px 0 0}
.th-hangat .p-hd{background:var(--a2); margin:-22px -22px 0; padding:18px 22px; border:0; border-radius:6px 6px 0 0}
.p-br{font-weight:800; font-size:11px; opacity:.8}
.p-tt{font-size:16px; font-weight:800}
.p-sub{font-size:11px; opacity:.8}
.th-klasik .p-tt{font-family:Georgia,"Times New Roman",serif}
.p-sc b{font-size:28px; font-weight:800} .p-sc span{opacity:.7}
.p-meta{display:grid; grid-template-columns:1fr 1fr; gap:4px 14px}
.p-meta i{display:block; font-style:normal; font-size:10px; color:#6b7380}
.p-ver{background:var(--a2); color:var(--a); font-weight:700; padding:6px 10px; border-radius:6px; justify-self:start}
.th-klasik .p-ver{background:none; border:1px solid #1d232d; color:#1d232d}
.p-two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.paper2 ul,.paper2 ol{margin:4px 0 0; padding-left:16px}
.p-asp{display:grid; gap:5px}
.p-asp div{display:grid; grid-template-columns:1fr 70px 14px; gap:6px; align-items:center}
.p-asp em{grid-column:1/-1; font-size:10.5px; color:#6b7380}
.p-asp .bar{height:6px; background:#eceef2; border-radius:3px; overflow:hidden}
.p-asp .bar i{display:block; height:100%; background:var(--a)}
.p-q b{display:block} .p-q p{margin:2px 0 0; color:#4a5260}
.p-close{border-left:3px solid var(--a); padding:4px 10px; font-style:italic}
.p-ft{margin-top:auto; padding-top:8px; border-top:1px solid #e5e7eb; font-size:10px; color:#6b7380}
.ph2{color:#a3abb8; font-style:italic; margin:2px 0 0}
@media (max-width:1100px){ .repw{grid-template-columns:1fr} .repprev{position:static} .aspr{grid-template-columns:1fr auto} .aspr .in{grid-column:1/-1} }
/* ruang interview: panggung video selalu gelap seperti layar kamera */
.stage{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.tile{position:relative; aspect-ratio:4/3; max-width:100%; background:#1c2433; border-radius:12px; display:grid; place-items:center; color:#f2f4f8; overflow:hidden}
.tile.wait{background:#111722; outline:2px dashed #3a4558; outline-offset:-8px}
.tile .bigav{width:84px; height:84px; border-radius:50%; display:grid; place-items:center; font-size:32px; font-weight:750; color:#fff}
.tile .lbl{position:absolute; left:10px; bottom:9px; font-size:12.5px; background:rgba(0,0,0,.55); color:#fff; padding:2px 8px; border-radius:6px}
.tile .st{position:absolute; right:10px; top:9px; font-size:12px; background:rgba(0,0,0,.55); color:#fff; padding:2px 8px; border-radius:6px}
.tile .w{font-size:13px; color:#aab3c3; text-align:center; padding:0 18px}
.timer{font-variant-numeric:tabular-nums; font-size:34px; font-weight:800; line-height:1}
.timer.low{color:var(--bad)}
.ctl{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
.ctl .btn.offb{background:var(--bads); color:var(--bad); border-color:transparent}
.meter{height:8px; background:var(--sf2); border-radius:4px; overflow:hidden; border:1px solid var(--ln)}
.meter i{display:block; height:100%; background:var(--ok); transition:width .15s}
.urlbar{font-family:var(--mono); font-size:12px; color:var(--mut); background:var(--sf2); border:1px solid var(--ln); border-radius:8px; padding:5px 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.qbar{display:flex; height:14px; border-radius:7px; overflow:hidden; background:var(--sf2); border:1px solid var(--ln)}
.qbar i{display:block; height:100%}
.flow{display:grid; gap:8px; font-size:13px}
.flow div{border:1px solid var(--ln); border-radius:8px; padding:8px 11px; background:var(--sf2)}
.flow div b{display:block}
/* chat di pojok kanan bawah */
.dock{position:fixed; right:calc(18px + env(safe-area-inset-right,0px)); bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:45; width:370px; height:min(540px, calc(100vh - 90px)); background:var(--sf); border:1px solid var(--ln); border-radius:16px; box-shadow:0 18px 50px rgba(15,22,40,.28); display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; overflow:hidden}
.dk-h{display:flex; align-items:center; gap:10px; padding:11px 10px 11px 14px; background:var(--acc); color:var(--acci)}
.dk-h .nm{min-width:0; flex:1} .dk-h .nm b{display:block; font-size:15px} .dk-h .nm span{font-size:12px; opacity:.85}
.dk-h button{border:0; background:none; color:inherit; width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:18px}
.dk-h button:hover{background:rgba(255,255,255,.15)}
.dk-ctx{padding:8px 14px; font-size:12.5px; border-bottom:1px solid var(--ln); background:var(--sf2)}
.dk-body{overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:4px; background:var(--bg)}
.dk-note{align-self:center; text-align:center; font-size:11.5px; color:var(--mut); background:var(--sf); border:1px solid var(--ln); border-radius:10px; padding:5px 10px; margin:2px 0 8px; max-width:92%}
.dk-note.sys{color:var(--acc); background:var(--accs); border-color:transparent}
.bb{max-width:78%; padding:8px 12px; border-radius:16px; font-size:14px; line-height:1.4; overflow-wrap:anywhere; white-space:pre-wrap}
.bb.them{align-self:flex-start; background:var(--sf); border:1px solid var(--ln); border-bottom-left-radius:5px}
.bb.me{align-self:flex-end; background:var(--acc); color:var(--acci); border-bottom-right-radius:5px}
.bt{font-size:10.5px; color:var(--mut); margin:1px 4px 8px} .bt.me{align-self:flex-end} .bt.them{align-self:flex-start}
.typing{align-self:flex-start; background:var(--sf); border:1px solid var(--ln); border-radius:16px; padding:10px 14px; display:flex; gap:4px}
.typing i{width:6px; height:6px; border-radius:50%; background:var(--mut); animation:tp 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s} .typing i:nth-child(3){animation-delay:.4s}
@keyframes tp{0%,60%,100%{opacity:.25}30%{opacity:1}}
.dk-f{display:flex; gap:8px; align-items:flex-end; padding:10px 12px; border-top:1px solid var(--ln); background:var(--sf)}
.dk-f textarea{flex:1; resize:none; border:1px solid var(--ln2); border-radius:18px; padding:9px 14px; min-height:40px; max-height:110px; background:var(--sf2); line-height:1.35}
.dk-f .send{width:40px; height:40px; border-radius:50%; border:0; background:var(--acc); color:var(--acci); display:grid; place-items:center; cursor:pointer; flex:none}
.dk-f .send[disabled]{opacity:.4; cursor:default}
.dk-ro{padding:10px 14px; font-size:12.5px; color:var(--mut); border-top:1px solid var(--ln); background:var(--sf)}
@media (max-width:600px){ .dock{inset:0; width:auto; height:auto; border-radius:0; border:0} }
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:static; height:auto; flex-direction:row; overflow-x:auto; padding:8px 12px; gap:6px; border-right:0; border-bottom:1px solid var(--ln); align-items:center}
  .side .brandrow,.side .gt,.me{display:none}
  .grp{display:flex; gap:4px}
  .nav{white-space:nowrap; width:auto}
  .cols,.prof{grid-template-columns:1fr}
  .dayrow{grid-template-columns:1fr 1fr; }
  .dayrow .slots{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== tampilan pastel ===== */
[hidden]{display:none!important}
html,body{margin:0}
body{font-size:15px}
a{color:var(--ink)}
:focus-visible{outline:2px solid var(--ink)}

/* atas */
.hdr{position:relative; display:flex; align-items:center; gap:26px; min-height:76px; padding-block:10px; padding-inline:max(24px,calc((100% - 1100px)/2 + 24px))}
.hdr .wm{font-weight:700; font-size:21px; letter-spacing:-.02em; margin-right:auto}
.tn{display:flex; gap:26px; align-items:center}
.tn .nv{display:inline-flex; align-items:center; gap:6px; width:auto; background:none; border:0; border-bottom:3px solid transparent; border-radius:0; padding:4px 0; font-size:15px; font-weight:500; color:var(--ink); white-space:nowrap; cursor:pointer}
.tn .nv:hover{border-bottom-color:var(--ln2)}
.tn .nv.on{border-bottom-color:var(--pk); font-weight:600}
.tn .nv.off{color:var(--mut)}
.tn .cnt{background:var(--bad); color:#fff; border-radius:99px; min-width:18px; height:18px; display:inline-grid; place-items:center; font-size:11px; font-weight:700; padding:0 5px}
.whob{border:0; background:var(--ink); color:var(--bg); padding:7px 16px; border-radius:99px; font-size:15px; font-weight:500; cursor:pointer; white-space:nowrap}
.whob.on{outline:3px solid var(--pk); outline-offset:2px}
.pmenu{position:absolute; top:calc(100% - 4px); right:max(16px,calc((100% - 1100px)/2 + 24px)); z-index:30; background:var(--sf); border:1px solid var(--ln2); border-radius:12px; padding:10px; min-width:230px; display:grid; gap:10px; box-shadow:0 12px 30px rgba(47,44,51,.18); animation:rise .2s ease both}
.pmenu .pg{display:grid; gap:2px} .pmenu .pg b{font-size:12px; font-family:var(--mono); font-weight:500; color:var(--mut); padding:4px 10px}
.pmenu .pi{border:0; background:none; text-align:left; padding:8px 10px; border-radius:8px; font-size:15px; cursor:pointer; color:var(--ink)}
.pmenu .pi:hover{background:var(--pks)}
.ptabs{display:flex; gap:20px; align-items:center; flex-wrap:wrap; margin:0 0 18px; padding-bottom:10px; border-bottom:1px solid var(--ln)}
.ptabs b{font-size:18px; font-weight:700; background:var(--sf); border:1px solid var(--ln); border-radius:10px; padding:6px 14px; margin-right:10px}
.ptabs button{border:0; background:none; padding:0 0 3px; font-size:15px; cursor:pointer; color:var(--ink); border-bottom:2px solid transparent}
.ptabs button.on{font-weight:600; border-bottom-color:var(--pk)}
.main{max-width:1100px; margin:0 auto; padding:10px 24px 80px}
.inner{max-width:none; gap:16px}
@media (max-width:820px){
 .hdr{flex-wrap:wrap; gap:8px 16px; padding-inline:16px} .hdr .wm{order:1} .whob{order:2} .pmenu{right:16px}
 .tn{order:3; width:100%; overflow-x:auto; flex-wrap:nowrap; gap:20px; padding-bottom:2px; scrollbar-width:none} .tn .nv{flex:none}
 .main{padding:10px 16px 80px} .ptabs b{font-size:16px}
}

/* judul halaman */
.ph{align-items:flex-end; margin-bottom:6px}
.ph h1{font-size:clamp(34px,5.4vw,58px); font-weight:700; letter-spacing:-.04em; line-height:1}
.ph p{font-size:16px; margin-top:8px}
h2{font-weight:600}

/* kotak */
.box,.kpi,.pcard,.card,.mdl{border:1px solid var(--ln); border-radius:12px; background:var(--sf)}
.box{padding:22px 26px}
.kpis{gap:14px}
.kpi{padding:18px 22px; gap:4px}
.kpi{min-width:0}
.kpi .v{white-space:nowrap; overflow:hidden}
.kpi .v{font-size:36px; font-weight:700; letter-spacing:-.03em; line-height:1.1}
.kpi .l{font-size:14px; font-weight:500; color:var(--ink)}
.kpi .s{font-size:13px}
.kpis>.kpi:first-child{background:var(--pk); color:#2F2C33; border-color:transparent}
.kpis>.kpi:first-child .l,.kpis>.kpi:first-child .s{color:#2F2C33}
.note{border:1px solid var(--ln); border-radius:12px; background:var(--sf2); color:var(--ink)}
.note.acc{background:var(--pks); color:#2F2C33; border-color:transparent}
.note.warn{border-color:transparent}
.empty{color:var(--mut)}

/* tombol dan isian */
.btn{border:1px solid var(--ln); background:var(--sf2); border-radius:99px; min-height:38px; padding:7px 18px; font-weight:600; transition:transform .15s ease}
.btn:hover{transform:translateY(-2px); border-color:var(--ln)} .btn:active{transform:scale(.95)}
.btn[disabled]:hover{transform:none}
.btn.pri{background:var(--acc); color:var(--acci); border-color:transparent}
.btn.danger{background:var(--bads); color:var(--bad); border-color:transparent}
.btn.ghost{background:none; border-color:transparent}
.btn.xs{min-height:30px; padding:3px 13px; border-radius:99px}
.in{border:1.5px solid var(--ln2); background:var(--sf); border-radius:10px; min-height:40px}
textarea.in{border-radius:12px}
.seg{border:1px solid var(--ln); background:var(--sf2); border-radius:99px; padding:3px; overflow:visible}
.seg button{border-radius:99px; padding:5px 14px; font-weight:600}
.seg button.on{background:var(--ink); color:var(--bg)}
.seg button[disabled]{opacity:.45; cursor:not-allowed}
.pill{border:1px solid var(--ln); background:var(--sf2); border-radius:99px}
.pill.ok,.pill.warn,.pill.bad{border-color:transparent}
.pill.acc{background:var(--pks); color:#2F2C33; border-color:transparent}
.sw input{background:var(--ln2)} .sw input:checked{background:var(--ink)} .sw input::after{background:var(--sf)}
.stars,.st5 button.on{color:#C98A2E}
.st5 button{color:var(--ln2)}

/* tabel */
th{color:var(--mut)} td,th{border-color:var(--ln)}

/* grafik */
.legend i{border-radius:3px}
.hbar{grid-template-columns:90px minmax(0,1fr) 40px; gap:12px}
.hbar .t{height:10px; border-radius:5px; background:var(--ln)}
.hbar .t i{background:var(--pk); border-radius:5px; transform-origin:left}
.qbar{height:14px; border:0; background:var(--ln); border-radius:7px}
.qbar i{transform-origin:left}
.chart rect{transform-box:fill-box; transform-origin:bottom}
@keyframes growx{from{transform:scaleX(0)}}
@keyframes growy{from{transform:scaleY(0)}}
@keyframes rise{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
@keyframes popc{0%{opacity:0;transform:translateY(-10px) rotate(-1.5deg) scale(.96)}100%{opacity:1;transform:none}}
.rise{animation:rise .35s ease both}
.fresh .hbar .t i,.fresh .qbar i{animation:growx .9s cubic-bezier(.2,.8,.2,1) both}
.fresh .hbar:nth-child(2) .t i{animation-delay:90ms} .fresh .hbar:nth-child(3) .t i{animation-delay:180ms} .fresh .hbar:nth-child(4) .t i{animation-delay:270ms} .fresh .hbar:nth-child(n+5) .t i{animation-delay:360ms}
.fresh .chart rect{animation:growy .8s cubic-bezier(.2,.8,.2,1) both}
.fresh .kpi{animation:rise .4s ease both}
.fresh .kpi:nth-child(2){animation-delay:60ms} .fresh .kpi:nth-child(3){animation-delay:120ms} .fresh .kpi:nth-child(4){animation-delay:180ms} .fresh .kpi:nth-child(n+5){animation-delay:240ms}
.fresh .pcard{animation:popc .45s cubic-bezier(.3,1.4,.5,1) both}
.fresh .pcard:nth-child(2){animation-delay:80ms} .fresh .pcard:nth-child(n+3){animation-delay:160ms}

/* jadwal */
.wgrid th.tm{font-family:var(--mono)}
.cell{border:1px solid var(--ln); background:var(--sf2); border-radius:6px; transition:transform .12s ease}
.cell:hover{border-color:var(--ink)}
.cell.on{background:var(--pk); border-color:transparent; color:#2F2C33}
.cell.bk{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.cell.gone{background:var(--bads); border-color:var(--bad); color:var(--bad)}
.slot{background:var(--pks); color:#2F2C33; font-family:var(--mono)}

/* log, notifikasi */
.lg .hash{color:var(--ink); background:var(--sf2); border:1px solid var(--ln); border-radius:99px; padding:1px 8px}
.diff{border-color:var(--ln); border-radius:10px}
.nt .dot{background:var(--pk)}

/* profil partner */
.av{background:var(--ink); color:var(--bg)}
.tags span{border-radius:99px; background:var(--sf2); border:1px solid var(--ln); padding:2px 10px}
.tagin{border:1.5px solid var(--ln2); border-radius:10px}
.tagin .tg{background:var(--pks); color:#2F2C33; border-radius:99px}
.pcard{padding:22px 24px}

/* report */
.pk{border:1px solid var(--ln2); background:var(--sf); border-radius:99px; padding:5px 13px}
.pk.on{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.pkin{border-radius:99px}
.qn{background:var(--pks); color:#2F2C33}
.paper2{background:#FFFDF9; border-radius:10px}
.paper2.th-modern{--a:#2F2C33; --a2:#F6D2CB}
.th-modern .p-hd{background:#F2A7A0; color:#2F2C33; border-radius:10px 10px 0 0}
.th-hangat .p-hd{border-radius:10px 10px 0 0}

/* ruang interview */
.tile{background:#35313A; color:#F7F1E8}
.tile.wait{background:#2A272E; outline-color:#4E4955}
.tile .bigav{color:#2F2C33}
.tile .w{color:#B9B2BC}
.timer{font-weight:700; letter-spacing:-.03em}
.urlbar{border-radius:99px; padding:6px 14px}
.flow div{border-radius:10px}
.meter{border:0; background:var(--ln); border-radius:5px}
.ctl .btn.offb{background:var(--bads); color:var(--bad)}

/* modal, toast */
.ov{background:rgba(47,44,51,.5)}
.mdl{border-radius:14px}
.toast{border-radius:99px}

/* chat */
.dock{border:1px solid var(--ln); border-radius:14px; box-shadow:0 10px 34px rgba(47,44,51,.25)}
.dk-h{background:var(--pk); color:#2F2C33}
.dk-h button:hover{background:rgba(47,44,51,.1)}
.dk-ctx{background:var(--sf2)}
.dk-note.sys{background:var(--pks); color:#2F2C33}
.bb.them{background:var(--sf); border:1px solid var(--ln2)}
.bb.me{background:var(--pk); color:#2F2C33}
.dk-f textarea{background:var(--sf); border:1px solid var(--ln2)}
.dk-f .send{background:var(--ink); color:var(--bg)}

/* masuk */
.lg2{min-height:calc(100vh - 40px); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:16px; padding:16px max(16px,env(safe-area-inset-left,0px))}
.lgl{background:var(--pk); color:#2F2C33; border-radius:12px; padding:36px; display:flex; flex-direction:column; justify-content:flex-end; min-height:420px}
.lgw{font-size:clamp(48px,9vw,112px); font-weight:700; letter-spacing:-.05em; line-height:.95}
.lg2 .authbox{align-self:center; justify-self:center; width:min(420px,100%); max-width:none}
.lg2 .card{padding:34px}
.lg2 .card h1{font-size:34px; font-weight:700; letter-spacing:-.03em}
.lg2 .in{min-height:46px}
.lg2 .btn.pri{min-height:48px; font-size:15px}
.demo button{border:1px dashed var(--ln2); background:var(--sf2); border-radius:10px}
.demo button:hover{border-color:var(--ink)}
.otp{font-family:var(--mono)}
@media (max-width:820px){.lg2{grid-template-columns:minmax(0,1fr)} .lgl{min-height:200px; padding:26px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
.pgrid4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:start}
.ph2s{margin-top:28px}
@media (max-width:980px){.pgrid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pgrid4{grid-template-columns:minmax(0,1fr)}}
.fresh .pgrid4 .pcard:nth-child(n+3){animation-delay:160ms}


/* ===== tambahan halaman masuk ===== */
.lg2 .card{display:grid; gap:14px}
.lgs{font-size:22px; margin-top:10px; font-weight:500}
.authbox form{display:grid; gap:14px}
.langkah{margin:0; padding-left:20px; display:grid; gap:4px; font-size:14px}
.qr{display:grid; place-items:center; background:#fff; border-radius:12px; padding:12px; border:1px solid var(--ln)}
.qr img{display:block}
details.kunci summary{cursor:pointer; font-size:13px; color:var(--mut)}
details.kunci code{display:block; margin-top:6px; font-family:var(--mono); font-size:13px; word-break:break-all; background:var(--sf2); padding:8px 10px; border-radius:8px}
.prodsw{display:flex; justify-content:space-between; width:100%; padding:10px 0; border-bottom:1px solid var(--ln)}
.prodsw:last-child{border-bottom:0}
.lg2 .row{display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap}
textarea#pesanInv{min-height:180px; font-size:14px}
.empty{padding:22px; text-align:center}
@media (max-width:820px){.lg2{min-height:auto; align-content:start} .lg2 .authbox{align-self:start; justify-self:stretch; width:100%}}