/* TamuKu v2 (irisan 4). Tanpa font/skrip eksternal. Nama variabel lama dipertahankan. */
:root{
  --bg:#f1f5f3;--card:#fff;--ink:#10201c;--mut:#566761;--line:#dbe4e0;--line2:#c8d5cf;
  --pri:#0b5d4f;--pri-ink:#fff;--pri-soft:#dff1ec;
  --acc:#f2b632;--acc-ink:#3a2a00;--acc-soft:#fdf0cb;
  --ok:#0b6b3a;--okbg:#d9f2e3;--warn:#8a4b00;--warnbg:#fdecc8;--err:#a61e1e;--errbg:#fde2e0;--info:#1f5a99;--infobg:#e0ecfa;
  --r:16px;--r-sm:11px;--sh:0 1px 2px rgba(16,32,28,.06),0 4px 14px rgba(16,32,28,.05);
  --s-vacant:#1f9d6b;--s-occupied:#2b6cb0;--s-dirty:#e0951a;--s-maintenance:#cf3f3f;
}
@media(prefers-color-scheme:dark){:root{
  --bg:#0a1311;--card:#112019;--ink:#e6efeb;--mut:#9bb0a8;--line:#203830;--line2:#2d4a40;
  --pri:#3fd1ad;--pri-ink:#02201a;--pri-soft:#12342b;
  --acc:#f2c14e;--acc-ink:#2e2000;--acc-soft:#3a2f10;
  --ok:#7ee0a8;--okbg:#0e3a24;--warn:#f6c866;--warnbg:#3b2a08;--err:#ff9d96;--errbg:#451514;--info:#8cc2ff;--infobg:#0f2a47;
  --sh:none;--s-vacant:#38c48c;--s-occupied:#6aa8f0;--s-dirty:#f2b04a;--s-maintenance:#f27a7a;
}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-variant-numeric:tabular-nums}
a{color:var(--pri)}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.wrap{max-width:880px;margin:0 auto;padding:16px 16px 96px}.narrow{max-width:460px;padding-top:28px}
/* bilah atas dan menu bawah */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--pri);color:var(--pri-ink)}
.brand{font-weight:800;color:var(--pri-ink);text-decoration:none;letter-spacing:-.02em;font-size:1.05rem}
.prop{flex:1;opacity:.85;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.logout{font-size:.88rem;color:var(--pri-ink);opacity:.9}
.bnav{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.bnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px 9px;color:var(--mut);text-decoration:none;font-size:.74rem;font-weight:650;min-height:56px}
.bnav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bnav a.on{color:var(--pri)}.bnav a.on svg{stroke-width:2.3}.bnav a.on span{box-shadow:inset 0 -3px 0 var(--acc)}
@media(min-width:900px){.bnav{max-width:880px;left:50%;transform:translateX(-50%);border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0}}
h1{font-size:1.45rem;line-height:1.2;margin:.2rem 0 .3rem;letter-spacing:-.015em}h2{font-size:1.05rem;margin:1.6rem 0 .6rem;display:flex;align-items:center;gap:8px}
h2 .n{font-size:.78rem;min-width:24px;height:24px;padding:0 7px;border-radius:99px;background:var(--pri-soft);color:var(--pri);display:inline-grid;place-items:center}
p{margin:.3rem 0 .8rem}.mut{color:var(--mut);font-size:.9rem}.sub{color:var(--mut);margin:0 0 14px}
/* kartu, formulir, tombol */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:0 0 12px;box-shadow:var(--sh)}
label{display:block;font-weight:650;font-size:.9rem;margin:10px 0 4px}
input,select,textarea{width:100%;min-height:48px;padding:10px 12px;border:1.5px solid var(--line2);border-radius:var(--r-sm);background:var(--bg);color:var(--ink);font:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-soft)}
input[type=checkbox]{width:22px;height:22px;min-height:0;margin:0;flex:none;accent-color:var(--pri)}.inl{display:flex;align-items:center;gap:10px;font-weight:500}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0 18px;border:1.5px solid var(--line2);border-radius:var(--r-sm);background:var(--card);color:var(--ink);font:inherit;font-weight:650;text-decoration:none;cursor:pointer;transition:background .12s,transform .06s}
.btn:active{transform:scale(.98)}.btn:hover{background:var(--pri-soft)}
.btn.pri{background:var(--pri);color:var(--pri-ink);border-color:var(--pri)}.btn.pri:hover{filter:brightness(1.08);background:var(--pri)}
.btn.acc{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}.btn.acc:hover{filter:brightness(1.05);background:var(--acc)}
.btn.sm{min-height:40px;padding:0 14px;font-size:.88rem}.btn.dng{color:var(--err)}.btn.block{display:flex;width:100%;margin-top:14px}.btn.lg{min-height:56px;font-size:1.05rem}
.btn[disabled],.btn.off{opacity:.45;pointer-events:none}
.flash{padding:11px 14px;border-radius:var(--r-sm);margin:0 0 12px;font-weight:550;border-left:5px solid}
.flash.ok{background:var(--okbg);color:var(--ok);border-color:var(--ok)}.flash.warn{background:var(--warnbg);color:var(--warn);border-color:var(--acc)}.flash.err{background:var(--errbg);color:var(--err);border-color:var(--err)}
.flash a{color:inherit;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.stat{padding:12px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}.stat b{display:block;font-size:1.6rem}
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.78rem;font-weight:700;background:var(--line);color:var(--ink)}
table{width:100%;border-collapse:collapse;font-size:.92rem}th,td{padding:9px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{color:var(--mut);font-size:.8rem;font-weight:600}
tr:last-child>th,tr:last-child>td{border-bottom:0}
.scroll{overflow-x:auto}.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.actions form{margin:0}
.steps{counter-reset:s;list-style:none;padding:0}.steps li{counter-increment:s;padding:10px 0 10px 40px;position:relative}.steps li:before{content:counter(s);position:absolute;left:0;top:8px;width:28px;height:28px;border-radius:50%;background:var(--line);display:grid;place-items:center;font-weight:700;font-size:.85rem}.steps li.done:before{content:"\2713";background:var(--okbg);color:var(--ok)}
.qrbox{max-width:320px;margin:10px auto;padding:14px;background:#fff;border-radius:var(--r);text-align:center}.qrbox svg{width:100%;height:auto}
.pub .brand{display:block;text-align:center;font-size:1.6rem;margin-bottom:14px;color:var(--pri)}
/* chip status */
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:.78rem;font-weight:700;background:var(--line);color:var(--ink);white-space:nowrap}
.chip:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.75}
.chip.ok{background:var(--okbg);color:var(--ok)}.chip.warn{background:var(--warnbg);color:var(--warn)}.chip.info{background:var(--infobg);color:var(--info)}.chip.err{background:var(--errbg);color:var(--err)}.chip.mut{background:var(--line);color:var(--mut)}
/* Beranda: ringkasan */
.today-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 4px}
.tile{display:block;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px 8px 9px;text-align:center;box-shadow:var(--sh)}
.tile b{display:block;font-size:1.7rem;line-height:1.1;font-weight:800}.tile span{font-size:.76rem;color:var(--mut);font-weight:600}
.tile.hot{background:var(--acc-soft);border-color:var(--acc)}.tile.hot b{color:var(--acc-ink)}@media(prefers-color-scheme:dark){.tile.hot b{color:var(--acc)}}
/* daftar tindakan */
.list{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}.item:last-child{border-bottom:0}
.item .who{flex:1;min-width:0}.item .who a{color:var(--ink);text-decoration:none;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .meta{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;color:var(--mut);font-size:.85rem;margin-top:2px}
.item .act{flex:none}.item .act form{margin:0}
.empty{padding:18px 14px;color:var(--mut);text-align:center;font-size:.92rem}
/* papan kunci kamar */
.keys{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.key{position:relative;background:var(--card);border:1px solid var(--line);border-top:6px solid var(--line2);border-radius:6px 6px var(--r) var(--r);padding:12px 12px 10px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:3px;min-height:112px}
.key:before{content:"";position:absolute;top:-1px;right:12px;width:14px;height:14px;border-radius:0 0 50% 50%;background:var(--bg);border:1px solid var(--line);border-top:0}
.key .nm{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;line-height:1.15;padding-right:22px;overflow-wrap:anywhere}
.key .ty{font-size:.8rem;color:var(--mut)}.key .gs{font-size:.82rem;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.key .st{margin-top:auto;padding-top:6px}.key form{margin:0}.key select{min-height:40px;font-size:.85rem;padding:4px 8px}.key .btn{width:100%}
.key.vacant{border-top-color:var(--s-vacant)}.key.occupied{border-top-color:var(--s-occupied)}.key.dirty{border-top-color:var(--s-dirty)}.key.maintenance{border-top-color:var(--s-maintenance)}
.room{border-left:5px solid var(--line)}.room.vacant{border-left-color:var(--s-vacant)}.room.occupied{border-left-color:var(--s-occupied)}.room.dirty{border-left-color:var(--s-dirty)}.room.maintenance{border-left-color:var(--s-maintenance)}
/* check-in */
.hero{background:var(--pri);color:var(--pri-ink);border-radius:var(--r);padding:16px;margin:0 0 12px}
.hero h1{margin:0 0 4px;font-size:1.5rem}.hero .meta{opacity:.9;font-size:.92rem}.hero .chip{background:rgba(255,255,255,.18);color:inherit}
@media(prefers-color-scheme:dark){.hero .chip{background:rgba(0,0,0,.2)}}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 0}.facts div{background:rgba(255,255,255,.12);border-radius:var(--r-sm);padding:8px 10px}.facts small{display:block;opacity:.8;font-size:.74rem}.facts b{font-size:1rem}
@media(prefers-color-scheme:dark){.facts div{background:rgba(0,0,0,.18)}}
.check{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--line2);border-radius:var(--r-sm);background:var(--card);margin:8px 0;font-weight:550}
.check small{display:block;color:var(--mut);font-weight:400}.check input{margin-top:2px}
.pick{display:grid;gap:8px}.pick label{margin:0;font-weight:500}
.pick .opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--line2);border-radius:var(--r-sm);background:var(--card);cursor:pointer}
.pick .opt input{width:22px;height:22px;min-height:0;accent-color:var(--pri)}.pick .opt b{font-weight:750}
.pick .opt:has(input:checked){border-color:var(--pri);background:var(--pri-soft)}.pick .opt.nope{opacity:.55;cursor:not-allowed}
.stickybar{position:sticky;bottom:64px;z-index:4;margin:14px -4px 0;padding:10px 4px;background:linear-gradient(to top,var(--bg) 70%,transparent)}
.timeline{list-style:none;margin:0;padding:0}.timeline li{position:relative;padding:0 0 12px 22px;font-size:.9rem}
.timeline li:before{content:"";position:absolute;left:3px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--line2)}.timeline li.on:before{background:var(--pri)}
.timeline li:after{content:"";position:absolute;left:7px;top:18px;bottom:-2px;width:2px;background:var(--line)}.timeline li:last-child:after{display:none}
/* kalender */
.calt{border-collapse:separate;border-spacing:0;font-size:.8rem;min-width:100%}.calt th,.calt td{padding:0;border:1px solid var(--line);text-align:center;height:40px;min-width:42px}
.calt thead th{font-weight:600;color:var(--mut);height:44px;line-height:1.15}.calt th.we{background:var(--bg)}.calt th.tod,.calt td.tod{box-shadow:inset 0 -3px 0 var(--acc)}
.calt .rn{position:sticky;left:0;z-index:2;background:var(--card);min-width:84px;max-width:110px;text-align:left;padding:0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calt td.free a{display:block;height:100%;min-height:40px}.calt td.free a:hover{background:var(--okbg)}
.calt td.occ{padding:0 6px;color:#fff;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0}.calt td.occ a{color:#fff;text-decoration:none;display:block;overflow:hidden;text-overflow:ellipsis}
.st-confirmed{background:#2b6cb0}.st-checked_in{background:#0b6b3a}.st-ical{background:#64748b}.st-checked_out{background:#8a9a94}
.occp{font-size:.72rem;color:var(--mut)}.lg{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:middle;margin:0 4px 0 10px}
@media(max-width:380px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media print{.top,.bnav,.noprint{display:none!important}body{background:#fff;color:#000}.wrap{padding:0}}