/* ============ BuTari design system ============ */

:root{
  --h900:#052318; --h800:#08301F; --h700:#0C4630; --h600:#116044; --h500:#1B7A57;
  --h300:#8FC9AC; --h100:#E4F1E9;
  --gold:#C99A3E; --gold-soft:#F3E3BE; --gold-deep:#8C621C;
  --cream:#F7F4EA; --cream-2:#EFEADC; --white:#fff;
  --ink:#12261F; --ink-2:#43574E; --ink-3:#7B8C84; --line:#E4DECF;
  --red:#B4402F; --red-bg:#FAE7E2; --amber:#B77A17; --amber-bg:#FBF0D8;
  --blue:#2C5F8A; --blue-bg:#E6EFF6;
  --r-lg:22px; --r-md:16px; --r-sm:11px;
  --shadow:0 18px 40px -24px rgba(5,35,24,.45);
  --shadow-soft:0 8px 24px -18px rgba(5,35,24,.5);
  --sidebar:264px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Arial,Helvetica,sans-serif;
  background:var(--cream); color:var(--ink); font-size:14.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{font-family:Arial,Helvetica,sans-serif; font-weight:700; letter-spacing:0; margin:0}
a{color:var(--h600); text-decoration:none}
button{font-family:inherit}
[hidden]{display:none !important}

/* ===== buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 17px; border-radius:11px; border:1px solid transparent; cursor:pointer;
  font-weight:600; font-size:13.5px; line-height:1; transition:.16s ease; white-space:nowrap;
}
.btn svg{width:16px;height:16px;flex:none}
.btn-primary{background:var(--h700); color:#fff; box-shadow:0 10px 20px -14px var(--h700)}
.btn-primary:hover{background:var(--h600); transform:translateY(-1px)}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--h300); color:var(--h700); background:#fff}
.btn-gold{background:var(--gold); color:#25190A}
.btn-gold:hover{background:#D8AB55}
.btn-danger{background:var(--red-bg); color:var(--red); border-color:#F0CFC7}
.btn-danger:hover{background:#F5D7CF}
.btn-sm{padding:7px 12px; font-size:12.5px; border-radius:9px}
.btn-block{width:100%}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none!important}

/* ===== forms ===== */
.field{margin-bottom:15px}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:6px; letter-spacing:.01em}
.field .hint{font-size:11.5px; color:var(--ink-3); margin-top:5px}
.input, .select, textarea.input{
  width:100%; padding:11px 13px; border-radius:11px; border:1px solid var(--line);
  background:#fff; font-family:inherit; font-size:14px; color:var(--ink); outline:none; transition:.15s;
}
.input:focus,.select:focus,textarea.input:focus{border-color:var(--h500); box-shadow:0 0 0 3px rgba(27,122,87,.13)}
textarea.input{resize:vertical; min-height:88px}
.select{appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%237B8C84' stroke-width='1.8' fill='none' stroke-linecap='round'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; padding-right:34px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
@media(max-width:560px){.grid-2{grid-template-columns:1fr}}

/* ===== badges ===== */
.badge{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:99px; font-size:11.5px; font-weight:600; line-height:1.5}
.badge::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor}
.badge.menunggu{background:var(--amber-bg); color:var(--amber)}
.badge.eskalasi{background:#FCE7DA; color:#A8531B}
.badge.ditunggu{background:var(--blue-bg); color:var(--blue)}
.badge.selesai{background:var(--h100); color:var(--h600)}
.badge.dialihkan{background:#EDE6F7; color:#6247A0}
.badge.kadaluarsa{background:#EFEAE3; color:#78695B}
.badge.aktif{background:var(--h100); color:var(--h600)}
.badge.nonaktif{background:#EFEAE3; color:#78695B}
.badge.hadir{background:var(--h100); color:var(--h600)}
.badge.tugas{background:var(--blue-bg); color:var(--blue)}
.badge.cuti{background:var(--amber-bg); color:var(--amber)}
.badge.sakit{background:#FCE7DA; color:#A8531B}
.badge.tanpa{background:var(--red-bg); color:var(--red)}

/* ===== layout ===== */
.app{display:flex; min-height:100vh}
.sidebar{
  width:var(--sidebar); flex:none; background:linear-gradient(175deg,#07291D 0%,#052017 55%,#07281C 100%);
  color:#EAF3ED; padding:22px 16px 18px; position:fixed; inset:0 auto 0 0; z-index:40;
  display:flex; flex-direction:column; overflow-y:auto;
}
.sidebar::after{content:''; position:absolute; top:0; right:0; width:1px; height:100%; background:linear-gradient(180deg,transparent,rgba(201,154,62,.55),transparent)}
.brand{display:flex; align-items:center; gap:11px; padding:2px 6px 18px; border-bottom:1px solid rgba(255,255,255,.09); margin-bottom:16px}
.brand img{width:46px;height:46px; flex:none; filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
.brand .name{font-family:Arial,Helvetica,sans-serif; font-size:23px; line-height:1.05; color:#FDFBF4; font-weight:600}
.brand .name span{color:var(--gold)}
.brand .sub{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:#9DBBA9; margin-top:3px}
.nav-label{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:#7FA08C; padding:10px 12px 6px}
.nav-item{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:11px; color:#C9DCD1;
  font-size:13.5px; font-weight:500; cursor:pointer; transition:.15s; position:relative; margin-bottom:2px;
}
.nav-item svg{width:18px;height:18px;flex:none;opacity:.8}
.nav-item:hover{background:rgba(255,255,255,.06); color:#fff}
.nav-item.active{background:rgba(201,154,62,.14); color:#fff}
.nav-item.active::before{content:''; position:absolute; left:-16px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--gold)}
.nav-item.active svg{opacity:1; color:var(--gold)}
.nav-badge{margin-left:auto; background:var(--gold); color:#231803; font-size:10.5px; font-weight:700; min-width:19px; height:19px; border-radius:99px; display:flex; align-items:center; justify-content:center; padding:0 5px}
.sidebar .side-foot{margin-top:auto; padding-top:16px}
.side-card{background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:12px 13px; margin-bottom:12px}
.side-card .t{font-size:11px; color:#9DBBA9; letter-spacing:.04em; text-transform:uppercase}
.side-card .v{font-family:Arial,Helvetica,sans-serif; font-size:15px; color:#fff; margin-top:3px; line-height:1.3}
.side-card .d{font-size:11px; color:#9DBBA9; margin-top:2px}

.main{flex:1; min-width:0; margin-left:var(--sidebar); display:flex; flex-direction:column}
.topbar{
  display:flex; align-items:center; gap:14px; padding:16px 30px; background:rgba(247,244,234,.86);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30;
}
.topbar .crumb{font-size:11.5px; color:var(--ink-3); letter-spacing:.02em}
.topbar h1{font-size:22px; line-height:1.2}
.topbar .spacer{flex:1}
.icon-btn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2);position:relative;transition:.15s}
.icon-btn:hover{border-color:var(--h300); color:var(--h700)}
.icon-btn svg{width:18px;height:18px}
.icon-btn .dot{position:absolute; top:-4px; right:-4px; min-width:17px;height:17px;border-radius:99px;background:var(--red);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--cream)}
.userchip{display:flex;align-items:center;gap:10px;padding:5px 12px 5px 6px;border:1px solid var(--line);border-radius:99px;background:#fff;cursor:pointer}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--h700);color:#F5E6BF;display:flex;align-items:center;justify-content:center;font-family:Arial,Helvetica,sans-serif;font-size:14px;flex:none;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.userchip .nm{font-size:12.5px;font-weight:600;line-height:1.2}
.userchip .rl{font-size:10.5px;color:var(--ink-3);line-height:1.2}
.content{padding:26px 30px 46px; max-width:1480px; width:100%}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px}
.page-head h2{font-size:25px}
.page-head p{margin:4px 0 0; color:var(--ink-3); font-size:12.5px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-soft)}
.card-pad{padding:20px 22px}
.card-head{display:flex;align-items:center;gap:12px;padding:17px 22px;border-bottom:1px solid var(--line)}
.card-head h3{font-size:16.5px}
.card-head .spacer{flex:1}

/* ===== stats ===== */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px}
.stat{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:17px 18px; position:relative; overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.stat::after{content:''; position:absolute; right:-22px; top:-22px; width:88px; height:88px; border-radius:50%; background:var(--cream); opacity:.7}
.stat .lbl{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.stat .num{font-family:Arial,Helvetica,sans-serif; font-weight:700; font-size:36px; line-height:1.05; margin:7px 0 2px; color:var(--h800); position:relative}
.stat .sub{font-size:11.5px; color:var(--ink-3); position:relative}
.stat .ic{position:absolute; right:14px; top:14px; width:34px;height:34px;border-radius:10px;background:var(--h100);color:var(--h600);display:flex;align-items:center;justify-content:center;z-index:1}
.stat .ic svg{width:17px;height:17px}
.stat.accent{background:linear-gradient(150deg,var(--h800),var(--h700)); border-color:var(--h700); color:#fff}
.stat.accent .lbl{color:#A9C8B7}
.stat.accent .num{color:#FBF4DF}
.stat.accent .sub{color:#C7DCCE}
.stat.accent .ic{background:rgba(201,154,62,.18); color:var(--gold-soft)}
.stat.accent::after{background:rgba(201,154,62,.12)}

/* ===== table ===== */
.table-wrap{overflow-x:auto}
table.tbl{width:100%; border-collapse:collapse; font-size:13px; min-width:660px}
.tbl thead th{
  text-align:left; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
  padding:11px 14px; background:#FBF8F0; border-bottom:1px solid var(--line); white-space:nowrap; font-weight:700;
}
.tbl tbody td{padding:11px 14px; border-bottom:1px solid #F0EBDD; vertical-align:middle}
.tbl tbody tr:hover{background:#FCFAF4}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .nm{font-weight:600; color:var(--ink)}
.tbl .sub{font-size:11px; color:var(--ink-3)}
.row-actions{display:flex; gap:6px}
.thumb{width:38px;height:38px;border-radius:9px;object-fit:cover;background:var(--cream-2);border:1px solid var(--line)}
.empty{padding:42px 20px; text-align:center; color:var(--ink-3); font-size:13px}
.empty svg{width:42px;height:42px;opacity:.35;margin-bottom:8px}
.toolbar{display:flex; gap:9px; flex-wrap:wrap; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line)}
.toolbar .search{position:relative; flex:1; min-width:170px}
.toolbar .search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink-3)}
.toolbar .search .input{padding-left:33px}
.toolbar .input,.toolbar .select{padding:8px 12px; font-size:12.5px; border-radius:9px; width:auto}
.toolbar .search .input{width:100%}

/* ===== drawer / modal ===== */
.overlay{position:fixed; inset:0; background:rgba(5,30,20,.42); backdrop-filter:blur(2px); z-index:90; display:flex; justify-content:flex-end; animation:fade .18s ease}
.modal-wrap{position:fixed; inset:0; background:rgba(5,30,20,.42); backdrop-filter:blur(2px); z-index:90; display:flex; align-items:center; justify-content:center; padding:18px; animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.drawer{width:min(520px,100%); height:100%; background:var(--cream); display:flex; flex-direction:column; box-shadow:-24px 0 60px rgba(0,0,0,.2); animation:slidein .22s ease}
@keyframes slidein{from{transform:translateX(30px);opacity:.4}to{transform:none;opacity:1}}
.drawer-head{padding:20px 24px; background:var(--h800); color:#fff; display:flex; align-items:center; gap:10px}
.drawer-head h3{font-size:18px; color:#FBF4DF}
.drawer-head .sub{font-size:11.5px; color:#9DBBA9; margin-top:2px}
.drawer-body{padding:22px 24px; overflow-y:auto; flex:1}
.drawer-foot{padding:15px 24px; border-top:1px solid var(--line); background:#fff; display:flex; gap:9px; justify-content:flex-end}
.x-btn{margin-left:auto;background:rgba(255,255,255,.1);border:0;color:#fff;width:32px;height:32px;border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.x-btn:hover{background:rgba(255,255,255,.2)}
.modal{width:min(560px,100%); background:var(--cream); border-radius:20px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.3); max-height:92vh; display:flex; flex-direction:column; animation:pop .18s ease}
@keyframes pop{from{transform:scale(.97);opacity:.5}to{transform:none;opacity:1}}
.modal .m-head{background:var(--h800); color:#fff; padding:18px 22px; display:flex; align-items:center}
.modal .m-head h3{font-size:18px;color:#FBF4DF}
.modal .m-body{padding:20px 22px; overflow-y:auto}
.modal .m-foot{padding:14px 22px; background:#fff; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:9px}

/* ===== misc ===== */
.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--h800); color:#fff; padding:11px 18px; border-radius:12px; font-size:13px; z-index:200; box-shadow:0 14px 34px rgba(0,0,0,.28); display:flex; gap:8px; align-items:center; animation:up .2s ease}
.toast.err{background:var(--red)}
@keyframes up{from{transform:translate(-50%,10px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.dropdown{position:absolute; top:calc(100% + 8px); right:0; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); min-width:210px; padding:7px; z-index:50}
.dropdown .dd-item{display:flex; gap:9px; align-items:center; padding:9px 11px; border-radius:9px; font-size:13px; cursor:pointer; color:var(--ink-2)}
.dropdown .dd-item:hover{background:var(--cream)}
.dropdown .dd-item svg{width:16px;height:16px}
.dropdown .dd-sep{height:1px;background:var(--line);margin:5px 3px}
.tabs{display:flex; gap:4px; background:#EFEADA; padding:4px; border-radius:12px}
.tab{padding:8px 14px; border-radius:9px; font-size:12.5px; font-weight:600; color:var(--ink-2); cursor:pointer; border:0; background:transparent}
.tab.active{background:#fff; color:var(--h700); box-shadow:0 2px 8px rgba(0,0,0,.06)}
.chart{display:flex; align-items:flex-end; gap:10px; height:150px; padding:4px 2px 0}
.chart .bar{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:7px; height:100%}
.chart .bar .fill{width:100%; max-width:42px; background:linear-gradient(180deg,var(--h500),var(--h700)); border-radius:8px 8px 3px 3px; min-height:4px; transition:height .5s ease; position:relative}
.chart .bar .fill span{position:absolute; top:-19px; left:50%; transform:translateX(-50%); font-size:10.5px; font-weight:700; color:var(--h700)}
.chart .bar .lbl{font-size:10px; color:var(--ink-3); white-space:nowrap}
.section-title{font-family:Arial,Helvetica,sans-serif; font-size:17px; margin:0 0 12px}
.muted{color:var(--ink-3)}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.flex{display:flex;gap:10px;align-items:center}
.empty-state{padding:50px 20px;text-align:center}
.empty-state img{width:90px;opacity:.9;margin-bottom:10px}
.kv{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:13px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--ink-3)}
.kv .v{font-weight:600; text-align:right}
.timeline{padding-left:4px}
.timeline .ev{display:flex; gap:11px; padding-bottom:14px; position:relative}
.timeline .ev::before{content:''; position:absolute; left:5px; top:14px; bottom:0; width:1px; background:var(--line)}
.timeline .ev:last-child::before{display:none}
.timeline .dot{width:11px;height:11px;border-radius:50%;background:var(--h500);border:2px solid #fff;box-shadow:0 0 0 1px var(--h300);flex:none;margin-top:4px}
.timeline .tt{font-size:12.5px;font-weight:600}
.timeline .tx{font-size:11.5px;color:var(--ink-3)}
.photo-box{border:1px dashed var(--h300); border-radius:14px; background:#fff; padding:14px; text-align:center; color:var(--ink-3); font-size:12px}
.photo-box img{max-width:100%; border-radius:10px; display:block; margin:0 auto 8px; max-height:170px}

/* ========================= LOGIN ========================= */
.login-page{min-height:100vh; display:grid; grid-template-columns:1.08fr .92fr; background:var(--cream)}
.login-hero{position:relative; background:linear-gradient(160deg,#062A1E 0%,#0A3B2A 45%,#0D5138 100%); color:#fff; overflow:hidden; display:flex; flex-direction:column; padding:38px 48px; min-height:100vh}
.login-hero::before{content:''; position:absolute; width:520px;height:520px;border-radius:50%; border:1px solid rgba(201,154,62,.28); right:-160px; top:-130px}
.login-hero::after{content:''; position:absolute; width:380px;height:380px;border-radius:50%; border:1px solid rgba(201,154,62,.18); right:-90px; top:-60px}
.hero-brand{display:flex; align-items:center; gap:13px; position:relative; z-index:2}
.hero-brand img{width:56px;height:56px}
.hero-brand .name{font-family:Arial,Helvetica,sans-serif;font-size:27px;color:#FDFBF4}
.hero-brand .name span{color:var(--gold)}
.hero-brand .sub{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#A6C4B3}
.hero-body{margin:auto 0; position:relative; z-index:2; padding:36px 0 20px; max-width:460px}
.hero-body .kicker{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);border:1px solid rgba(201,154,62,.4);padding:6px 12px;border-radius:99px;margin-bottom:20px}
.hero-body h1{font-size:clamp(31px,3.4vw,46px); line-height:1.12; color:#FCF8EE; font-weight:500; letter-spacing:-.02em}
.hero-body h1 em{font-style:italic; color:var(--gold)}
.hero-body p{color:#B9D2C3; font-size:14px; max-width:420px; margin-top:15px}
.hero-illus{position:absolute; right:24px; bottom:118px; width:250px; z-index:1; background:var(--cream); border:1px solid rgba(201,154,62,.45); border-radius:130px 130px 20px 20px; padding:9px 9px 0; box-shadow:0 24px 50px rgba(0,0,0,.32); opacity:1}
.hero-foot{display:flex; gap:26px; position:relative; z-index:3; border-top:1px solid rgba(255,255,255,.12); padding-top:18px; margin-top:20px; flex-wrap:wrap}
.hero-foot .hf .n{font-family:Arial,Helvetica,sans-serif;font-size:20px;color:#FBF4DF}
.hero-foot .hf .l{font-size:10.5px;color:#9DBBA9;letter-spacing:.05em;text-transform:uppercase}
.login-pane{display:flex; align-items:center; justify-content:center; padding:34px; position:relative}
.login-card{width:min(410px,100%)}
.login-card .lc-head{margin-bottom:22px}
.login-card .lc-head .eyebrow{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);font-weight:700}
.login-card h2{font-size:30px;margin:6px 0 5px}
.login-card .lc-head p{color:var(--ink-3);font-size:12.5px;margin:0}
.login-card .field label{font-size:12px}
.input-ico{position:relative}
.input-ico svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-3)}
.input-ico .input{padding-left:38px}
.login-card .btn-primary{padding:12px; font-size:14px; margin-top:4px}
.login-note{margin-top:16px; background:#fff; border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:10px; padding:11px 13px; font-size:11.5px; color:var(--ink-2)}
.login-note b{color:var(--h700)}
.login-switch{text-align:center; font-size:12.5px; color:var(--ink-3); margin-top:16px}
.login-switch a{font-weight:700; color:var(--h700); cursor:pointer}
.login-foot{font-size:10.5px; color:var(--ink-3); text-align:center; margin-top:26px}
.login-foot b{color:var(--ink-2)}
@media(max-width:900px){
  .login-page{grid-template-columns:1fr}
  .login-hero{min-height:auto; padding:24px 22px 26px}
  .hero-body{padding:20px 0 4px}
  .hero-body h1{font-size:29px}
  .hero-body p{font-size:12.5px}
  .hero-illus{width:150px; right:-6px; bottom:-8px; opacity:.5}
  .hero-foot{display:none}
  .login-pane{padding:24px 20px 40px}
}

/* ========================= KIOSK ========================= */
.kiosk-body{background:#EFEADC; min-height:100vh}
.kiosk-shell{max-width:1000px; margin:0 auto; background:var(--cream); min-height:100vh; box-shadow:0 0 60px rgba(0,0,0,.08); display:flex; flex-direction:column}
.kiosk-top{background:linear-gradient(140deg,#062A1E,#0B4430); color:#fff; padding:14px 22px; display:flex; align-items:center; gap:11px; position:sticky; top:0; z-index:20}
.kiosk-top img{width:40px;height:40px}
.kiosk-top .nm{font-family:Arial,Helvetica,sans-serif; font-size:19px; line-height:1.1}
.kiosk-top .nm span{color:var(--gold)}
.kiosk-top .dc{font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:#A6C4B3}
.kiosk-top .clock{margin-left:auto; text-align:right}
.kiosk-top .clock .t{font-family:Arial,Helvetica,sans-serif;font-size:16px}
.kiosk-top .clock .d{font-size:10px;color:#A6C4B3}
.kiosk-banner{background:var(--gold-soft); color:#5A4212; font-size:12px; padding:9px 22px; display:flex; gap:8px; align-items:center; border-bottom:1px solid #E8D5A6}
.kiosk-steps{display:flex; gap:0; padding:16px 22px 0; align-items:center}
.kstep{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-3);font-weight:600}
.kstep .n{width:23px;height:23px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:11px}
.kstep.on{color:var(--h700)}
.kstep.on .n{background:var(--h700);border-color:var(--h700);color:#fff}
.kstep.done .n{background:var(--h100);border-color:var(--h300);color:var(--h700)}
.kstep .line{width:34px;height:1px;background:var(--line);margin:0 8px}
.kiosk-main{flex:1; padding:20px 22px 34px; display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start}
.kiosk-form h2{font-size:26px; margin:2px 0 4px}
.kiosk-form .lead{color:var(--ink-3); font-size:12.5px; margin-bottom:16px}
.kiosk-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px}
.kiosk-side{position:sticky; top:84px; display:flex; flex-direction:column; gap:12px}
.cam-box{background:#08251A; border-radius:14px; overflow:hidden; position:relative; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center}
.cam-box video,.cam-box img,.cam-box canvas{width:100%;height:100%;object-fit:cover; display:block}
.cam-box .ph{color:#7FA08C; font-size:11.5px; text-align:center; padding:18px}
.cam-box .ph svg{width:30px;height:30px;display:block;margin:0 auto 6px;opacity:.6}
.cam-ctrl{display:flex; gap:8px; margin-top:9px}
.cam-ctrl .btn{flex:1}
.pick{position:relative}
.pick-list{position:absolute; left:0; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); max-height:250px; overflow-y:auto; z-index:15}
.pick-item{padding:10px 12px; border-bottom:1px solid #F3EEE1; cursor:pointer; font-size:12.5px}
.pick-item:last-child{border-bottom:0}
.pick-item:hover{background:var(--cream)}
.pick-item .n{font-weight:600}
.pick-item .j{font-size:11px;color:var(--ink-3)}
.pick-item .st{font-size:10px;padding:2px 7px;border-radius:99px;background:var(--h100);color:var(--h600);margin-left:6px}
.pick-item .st.off{background:var(--amber-bg);color:var(--amber)}
.kiosk-submit{margin-top:6px; padding:14px; font-size:15px}
.kiosk-success{max-width:560px; margin:0 auto; padding:38px 22px; text-align:center}
.kiosk-success .tick{width:70px;height:70px;border-radius:50%;background:var(--h100);color:var(--h600);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.kiosk-success .tick svg{width:34px;height:34px}
.kiosk-success h2{font-size:27px;margin-bottom:5px}
.kiosk-success .code{font-family:Arial,Helvetica,sans-serif; font-size:15px; letter-spacing:.08em; color:var(--gold-deep); background:var(--gold-soft); display:inline-block; padding:4px 12px; border-radius:99px; margin-bottom:16px}
.status-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;text-align:left;margin-bottom:14px}
.status-card .who{display:flex;gap:11px;align-items:center;margin-bottom:12px}
.status-card .who .av{width:42px;height:42px;border-radius:50%;background:var(--h100);color:var(--h700);display:flex;align-items:center;justify-content:center;font-weight:700}
.countdown{font-family:Arial,Helvetica,sans-serif; font-size:38px; color:var(--h700); line-height:1; letter-spacing:-.02em}
.countdown.warn{color:var(--red)}
.phase{display:flex; gap:10px; margin-top:16px; text-align:left}
.phase .ph-item{flex:1; background:var(--cream); border-radius:12px; padding:10px 12px; font-size:11px; color:var(--ink-3); border:1px solid var(--line)}
.phase .ph-item.on{background:var(--h100); border-color:var(--h300); color:var(--h700); font-weight:600}
.phase .ph-item b{display:block; font-size:11.5px; color:var(--ink); margin-bottom:2px}
@media(max-width:820px){
  .kiosk-main{grid-template-columns:1fr; gap:16px}
  .kiosk-side{position:static}
  .kiosk-shell{box-shadow:none}
  .kiosk-top{padding:12px 16px}
  .kiosk-main{padding:16px}
  .kiosk-steps{padding:12px 16px 0; overflow-x:auto}
}

/* ========================= RESPONSIVE APP ========================= */
.mobile-only{display:none}
@media(max-width:1080px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  :root{--sidebar:0px}
  .sidebar{transform:translateX(-100%); transition:.24s ease; width:270px; box-shadow:20px 0 50px rgba(0,0,0,.3)}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  .content{padding:18px 16px 90px}
  .topbar{padding:12px 16px}
  .topbar h1{font-size:19px}
  .userchip .nm,.userchip .rl{display:none}
  .userchip{padding:4px; border-radius:50%}
  .mobile-only{display:flex}
  .desktop-only{display:none!important}
  .mobile-nav{
    position:fixed; left:12px; right:12px; bottom:12px; background:rgba(6,40,28,.97); backdrop-filter:blur(10px);
    border-radius:18px; display:flex; justify-content:space-around; padding:8px 6px; z-index:60; box-shadow:0 18px 40px rgba(0,0,0,.32);
  }
  .mobile-nav .mn{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; color:#9DBBA9; font-size:10px; padding:6px 2px; border-radius:12px; border:0; background:transparent}
  .mobile-nav .mn svg{width:19px;height:19px}
  .mobile-nav .mn.active{color:var(--gold)}
  .stat .num{font-size:29px}
  .page-head h2{font-size:22px}
  .drawer{width:100%}
  .grid2{grid-template-columns:1fr!important}
  .kiosk-top .clock .d{display:none}
}
@media(max-width:420px){
  .stat-grid{gap:10px}
  .stat{padding:14px}
  .stat .num{font-size:26px}
}
.grid2{display:grid; grid-template-columns:1.55fr 1fr; gap:16px; align-items:start}
.grid3{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:1080px){.grid2{grid-template-columns:1fr}}

/* print */
@media print{
  .sidebar,.topbar,.toolbar,.row-actions,.no-print,.mobile-nav{display:none!important}
  .main{margin:0}
  .content{padding:0}
  body{background:#fff}
  .card{border:0; box-shadow:none}
}