:root{--bg:#f5f4f2;--panel:#fff;--ink:#171310;--muted:#766f68;--line:#e7e1db;--accent:#c54a0a;--accent2:#f47a24;--dark:#171310;--soft:#fff0e7;--good:#216e4a;--warn:#985000;--bad:#aa2b2b;--radius:18px;--shadow:0 16px 40px rgba(38,25,16,.08)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.muted{color:var(--muted)}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:800;color:var(--accent)}
.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(360px,520px) 1fr;background:#fff}.login-panel{padding:clamp(30px,6vw,90px);display:flex;flex-direction:column;justify-content:center}.login-panel h1{font-size:48px;margin:12px 0 6px;letter-spacing:-.04em}.login-panel>p{line-height:1.6}.brand-mark{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,var(--dark),#3c2519);color:#fff;font-weight:900;letter-spacing:-.05em;box-shadow:0 12px 28px rgba(0,0,0,.16)}.brand-mark.small{width:40px;height:40px;border-radius:12px;font-size:13px}.stack-lg{display:grid;gap:18px;margin-top:30px}.stack-lg label,.form-grid label{display:grid;gap:8px;font-size:13px;font-weight:700}.stack-lg input,.form-grid input,.form-grid select,.form-grid textarea,.search-input{width:100%;border:1px solid var(--line);border-radius:13px;padding:13px 14px;background:#fff;color:var(--ink);outline:none;transition:.2s}.stack-lg input:focus,.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.search-input:focus{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(244,122,36,.13)}.login-foot{font-size:12px;margin-top:30px}.login-art{background:radial-gradient(circle at 75% 20%,#f57c27 0,#c54a0a 25%,#351c11 76%,#171310 100%);color:white;display:flex;align-items:center;padding:8vw}.login-art-inner{max-width:720px}.login-art h2{font-size:clamp(36px,5vw,72px);letter-spacing:-.055em;line-height:1.02;margin:24px 0 36px}.pill{display:inline-flex;border-radius:999px;padding:8px 12px;background:#fff2;font-size:12px;font-weight:800}.preview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.preview-card{border:1px solid #ffffff24;background:#ffffff12;backdrop-filter:blur(12px);border-radius:20px;padding:20px;display:grid;gap:8px}.preview-card span{color:#f7dfd2;font-size:13px;line-height:1.5}
.app-shell{min-height:100vh;display:grid;grid-template-columns:250px 1fr}.sidebar{position:sticky;top:0;height:100vh;background:var(--dark);color:#fff;padding:20px 14px;display:flex;flex-direction:column;z-index:20}.brand{display:flex;gap:11px;align-items:center;padding:5px 8px 22px;border-bottom:1px solid #ffffff16}.brand strong{display:block;font-size:17px}.brand small{display:block;color:#af9f94;margin-top:2px}.sidebar nav{display:grid;gap:4px;padding:18px 0;overflow:auto}.sidebar nav button{border:0;background:transparent;color:#c8bbb2;text-align:left;padding:11px 12px;border-radius:11px;font-weight:650}.sidebar nav button:hover{background:#ffffff0c;color:#fff}.sidebar nav button.active{background:linear-gradient(90deg,#c54a0a,#9c3504);color:white;box-shadow:inset 0 0 0 1px #ffb27a20}.sidebar-foot{margin-top:auto;border-top:1px solid #ffffff16;padding:14px 8px 4px;display:flex;align-items:center;justify-content:space-between;gap:8px}.user-mini{display:flex;align-items:center;gap:9px;min-width:0}.user-mini>span{width:32px;height:32px;border-radius:10px;background:#ffffff14;display:grid;place-items:center;font-weight:900}.user-mini b,.user-mini small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px}.user-mini small{color:#a99d95;font-size:11px}.text-btn{border:0;background:transparent;color:#d8c8bd;font-size:12px}.main{min-width:0}.topbar{height:92px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:18px 28px;position:sticky;top:0;z-index:15}.topbar h1{font-size:23px;letter-spacing:-.03em;margin:0}.topbar p{font-size:12px;color:var(--muted);margin:4px 0 0}.topbar-actions{display:flex;align-items:center;gap:14px}.clock{text-align:right;display:grid}.clock b{font-size:18px}.clock span{font-size:11px;color:var(--muted)}.menu-btn{display:none}.content{padding:24px 28px 48px;max-width:1680px;margin:0 auto}.btn{border:1px solid var(--line);background:white;color:var(--ink);padding:10px 14px;border-radius:11px;font-weight:800;font-size:13px}.btn:hover{transform:translateY(-1px)}.btn.primary{border-color:transparent;background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff;box-shadow:0 8px 18px rgba(197,74,10,.18)}.btn.dark{background:var(--dark);border-color:var(--dark);color:white}.btn.ghost{background:#faf9f8}.btn.danger{background:#fff5f5;color:var(--bad);border-color:#f2d0d0}.btn.wide{width:100%;padding:14px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:0 8px 26px rgba(35,22,14,.035)}.kpi .label{font-size:12px;color:var(--muted);font-weight:700}.kpi .value{font-size:29px;font-weight:900;letter-spacing:-.045em;margin:8px 0 5px}.kpi .hint{font-size:11px;color:var(--muted)}.kpi.orange{background:linear-gradient(145deg,#251914,#9f3808);color:white;border:0}.kpi.orange .label,.kpi.orange .hint{color:#efd7ca}.grid-2{display:grid;grid-template-columns:1.3fr .7fr;gap:16px;margin-top:16px}.grid-2.equal{grid-template-columns:1fr 1fr}.panel{background:white;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 28px rgba(35,22,14,.035);overflow:hidden}.panel-head{padding:17px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}.panel-head h3{margin:0;font-size:15px}.panel-body{padding:18px}.empty{padding:34px;text-align:center;color:var(--muted);font-size:13px}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;font-size:13px}.data-table th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.055em;padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap}.data-table td{padding:12px;border-bottom:1px solid #f0ece8;vertical-align:middle}.data-table tr:last-child td{border-bottom:0}.data-table tr:hover td{background:#fffaf6}.money{font-variant-numeric:tabular-nums;font-weight:800}.badge{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:850;background:#f2efec;color:#635b55;white-space:nowrap}.badge.new{background:#fff0e7;color:#a33a06}.badge.processing{background:#fff6dd;color:#805100}.badge.ready{background:#eaf5ef;color:#216e4a}.badge.delivery{background:#eaf2ff;color:#285da8}.badge.completed{background:#eaf5ef;color:#216e4a}.badge.cancelled{background:#fff0f0;color:#9d2a2a}.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap}.toolbar-left,.toolbar-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.search-input{min-width:250px;padding:10px 12px}.filter-tabs{display:flex;gap:7px;flex-wrap:wrap}.filter-tabs button{border:1px solid var(--line);background:#fff;padding:8px 11px;border-radius:999px;font-size:12px;font-weight:750}.filter-tabs button.active{background:var(--dark);color:#fff;border-color:var(--dark)}
.pos-layout{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:16px;align-items:start}.catalog-wrap{min-width:0}.category-row{display:flex;gap:8px;overflow:auto;padding-bottom:12px}.category-row button{white-space:nowrap;border:1px solid var(--line);background:#fff;padding:9px 13px;border-radius:999px;font-weight:750;font-size:12px}.category-row button.active{background:var(--dark);color:#fff}.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}.product-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;gap:10px;min-height:144px;transition:.16s}.product-card:hover{border-color:#efb28c;transform:translateY(-2px);box-shadow:0 10px 28px rgba(64,32,12,.08)}.product-card .product-art{height:54px;border-radius:12px;background:linear-gradient(135deg,#fff2e9,#f6dfd0);display:flex;align-items:flex-end;padding:9px;font-size:11px;color:#98542c}.product-card b{font-size:14px;line-height:1.25}.product-card .product-bottom{display:flex;justify-content:space-between;align-items:end;gap:7px}.product-card .price{font-size:14px;font-weight:900;color:var(--accent)}.product-card .stock{font-size:10px;color:var(--muted)}.product-card.low{border-color:#e7b8b8}.cart{position:sticky;top:115px;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}.cart-head{padding:16px 17px;background:var(--dark);color:white;display:flex;justify-content:space-between;align-items:center}.cart-head h3{margin:0}.cart-body{padding:14px;max-height:43vh;overflow:auto}.cart-item{display:grid;grid-template-columns:1fr auto;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}.cart-item:last-child{border-bottom:0}.cart-item b{font-size:13px}.cart-item small{display:block;color:var(--muted);margin-top:3px}.qty{display:flex;align-items:center;gap:6px}.qty button{width:28px;height:28px;border-radius:9px;border:1px solid var(--line);background:#fff}.cart-form{padding:14px;border-top:1px solid var(--line);display:grid;gap:9px}.inline-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mini-input{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:white}.totals{display:grid;gap:7px;padding:12px 14px;border-top:1px dashed var(--line);font-size:12px}.totals div{display:flex;justify-content:space-between}.totals .grand{font-size:18px;font-weight:900;padding-top:6px;border-top:1px solid var(--line)}.cart-actions{padding:0 14px 14px;display:grid;grid-template-columns:1fr 1.5fr;gap:8px}
.kitchen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:13px}.kitchen-card{background:#fff;border:1px solid var(--line);border-radius:17px;overflow:hidden}.kitchen-card.new{border-top:4px solid var(--accent2)}.kitchen-card.processing{border-top:4px solid #b87d11}.kitchen-card.ready{border-top:4px solid var(--good)}.kitchen-head{padding:14px 15px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.kitchen-body{padding:14px 15px;display:grid;gap:7px}.kitchen-item{font-size:13px;font-weight:700}.kitchen-foot{padding:11px 15px;background:#faf8f6;display:flex;gap:8px;justify-content:flex-end}.age{font-size:11px;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.form-grid .full{grid-column:1/-1}.form-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}.section-title{font-size:18px;margin:0 0 14px}.stock-bar{width:84px;height:7px;border-radius:999px;background:#eee;overflow:hidden}.stock-bar span{display:block;height:100%;background:var(--accent2)}.alert{border:1px solid #f0d5c4;background:#fff8f4;border-radius:14px;padding:12px 14px;font-size:13px;color:#88400e}.report-bars{display:grid;gap:9px}.bar-row{display:grid;grid-template-columns:110px 1fr 100px;gap:10px;align-items:center;font-size:12px}.bar-track{height:9px;background:#f0ece8;border-radius:999px;overflow:hidden}.bar-track span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:999px}.stat-list{display:grid;gap:10px}.stat-list div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}.stat-list div:last-child{border-bottom:0}dialog{border:0;border-radius:22px;padding:0;box-shadow:0 30px 100px rgba(0,0,0,.28);width:min(680px,calc(100vw - 28px));max-height:88vh;overflow:auto}dialog::backdrop{background:rgba(18,12,8,.52);backdrop-filter:blur(4px)}.modal-shell{padding:22px}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.modal-head h2{margin:0;font-size:20px}.close-modal{border:0;background:#f3efec;width:34px;height:34px;border-radius:10px}.receipt{width:320px;margin:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.receipt h2{text-align:center;margin-bottom:4px}.receipt .center{text-align:center}.receipt hr{border:0;border-top:1px dashed #888}.receipt .rline{display:flex;justify-content:space-between;gap:10px;margin:5px 0}.receipt .rgrand{font-weight:900;font-size:15px}
#toast{position:fixed;right:20px;top:20px;z-index:100;display:grid;gap:8px}.toast{background:#171310;color:#fff;padding:12px 15px;border-radius:12px;box-shadow:0 14px 40px #0003;font-size:13px;max-width:340px}.toast.error{background:#8f2828}.toast.success{background:#245f43}
@media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.pos-layout{grid-template-columns:1fr}.cart{position:relative;top:auto}.grid-2,.grid-2.equal{grid-template-columns:1fr}.login-art{display:none}.login-shell{grid-template-columns:1fr}.login-panel{max-width:620px;margin:auto;width:100%}}
@media(max-width:760px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-270px;width:250px;transition:.2s;box-shadow:20px 0 50px #0003}.sidebar.open{left:0}.topbar{height:auto;padding:15px 16px}.topbar-actions .clock{display:none}.menu-btn{display:inline-block;border:0;background:#f3efec;border-radius:9px;padding:7px 10px;margin-right:8px}.topbar>div:first-child{display:grid;grid-template-columns:auto 1fr;align-items:center}.topbar p{grid-column:1/-1}.content{padding:16px}.kpi-grid{grid-template-columns:1fr 1fr;gap:10px}.kpi{padding:15px}.kpi .value{font-size:22px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.search-input{min-width:0;width:100%}.toolbar-left,.toolbar-right{width:100%}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.inline-fields{grid-template-columns:1fr}.bar-row{grid-template-columns:90px 1fr}.bar-row>:last-child{display:none}}
@media print{body>*{display:none!important}dialog[open]{display:block!important;position:static;width:auto;max-height:none;box-shadow:none}.modal-head,.form-actions{display:none!important}dialog::backdrop{display:none}.receipt{display:block!important}}

/* POSKasir v2.1 — payment center + server-time base */
.payment-shell{min-width:0}.payment-groups{display:grid;gap:18px}.payment-group-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:900;margin-bottom:8px}.payment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.payment-method{min-height:88px;border:1px solid var(--line);background:#fff;border-radius:15px;padding:13px;text-align:left;display:flex;flex-direction:column;gap:6px;justify-content:center;transition:.16s}.payment-method:hover{border-color:#e7a77f;box-shadow:0 9px 24px rgba(70,35,14,.08);transform:translateY(-1px)}.payment-method[data-warn="1"]{background:#fffaf6}.payment-name{font-weight:900;font-size:13px}.payment-mode{display:inline-flex;width:max-content;border-radius:999px;padding:4px 7px;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;background:#f1eeeb;color:#665d56}.payment-mode.gateway{background:#fff0e7;color:#a33a06}.payment-mode.manual{background:#fff8df;color:#805100}.payment-method small{font-size:10px;color:var(--muted)}
.payment-confirm{text-align:center;padding:20px 8px}.payment-big{font-size:22px;font-weight:950;letter-spacing:-.03em}.qris-box{text-align:center;display:grid;justify-items:center;gap:10px;padding:10px}.qris-box img{width:min(360px,80vw);max-height:430px;object-fit:contain;border:1px solid var(--line);border-radius:18px;background:#fff;padding:10px}.payment-code{display:grid;justify-items:center;text-align:center;gap:12px;padding:24px 10px}.payment-code small{color:var(--muted)}.payment-code b{font-size:28px;letter-spacing:.04em}.wrap-code{font-size:14px!important;word-break:break-all;letter-spacing:0!important}.link-btn{text-decoration:none;text-align:center;display:block}.qris-upload-preview{border:1px dashed #ddc8ba;border-radius:16px;min-height:180px;display:grid;place-items:center;background:#fffaf6;margin:12px 0}.qris-upload-preview img{width:min(260px,100%);max-height:260px;object-fit:contain;padding:10px}.empty.compact{padding:22px}.upload-btn{display:inline-flex}.payment-settings-grid h4,.panel-body h4{margin:0 0 8px}.soft-rule{border:0;border-top:1px solid var(--line);margin:20px 0}.toggle-line{display:flex;align-items:center;gap:9px;margin:8px 0 14px}.toggle-line input,.toggle-card input{accent-color:var(--accent);width:18px;height:18px}.method-toggle-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.toggle-card{border:1px solid var(--line);border-radius:13px;padding:11px;background:#fff;display:flex;gap:9px;align-items:flex-start}.toggle-card span{display:grid;gap:3px}.toggle-card b{font-size:12px}.toggle-card small{font-size:10px;color:var(--muted)}
.date-range-chip{display:inline-flex;padding:9px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12px;font-weight:800}.date-modal{max-width:620px}.date-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.date-fields button{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff;text-align:left}.date-fields button.active{border-color:var(--accent);box-shadow:0 0 0 3px rgba(225,91,17,.08)}.date-fields small{display:block;color:var(--muted);font-size:10px;margin-bottom:5px}.date-fields b{font-size:13px}.calendar{border:1px solid var(--line);border-radius:18px;padding:13px;background:#fff}.calendar-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-bottom:12px}.calendar-head b{text-align:center}.weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.weekdays span{text-align:center;color:var(--muted);font-size:10px;font-weight:800;padding:4px}.cal-empty{height:38px}.cal-day{height:38px;border:0;border-radius:10px;background:#faf8f6;font-size:12px;font-weight:800}.cal-day:hover{background:#fff0e7}.cal-day.selected{background:var(--dark);color:#fff}.date-modal .form-actions{margin-top:16px}
@media(max-width:900px){.payment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.method-toggle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.payment-grid,.method-toggle-grid{grid-template-columns:1fr 1fr}.payment-method{min-height:78px;padding:10px}.date-fields{grid-template-columns:1fr}.calendar{padding:8px}.cal-day{height:36px}.qris-box img{width:100%}}

/* POSKasir v2.2 — compact date picker + modern time picker */
dialog.compact-picker{width:min(398px,calc(100vw - 32px));max-height:calc(100dvh - 32px);border-radius:20px;overflow:visible}
dialog.compact-picker::backdrop{background:rgba(18,12,8,.48);backdrop-filter:blur(3px)}
dialog.compact-picker .modal-shell{padding:15px}
dialog.compact-picker .compact-head{margin-bottom:11px}
dialog.compact-picker .compact-head h2{font-size:17px;letter-spacing:-.02em}
dialog.compact-picker .compact-head small{font-size:10px}
dialog.compact-picker .close-modal{width:30px;height:30px;border-radius:9px;font-size:17px}
dialog.compact-picker .compact-actions{margin-top:11px}
dialog.compact-picker .compact-actions .btn{padding:8px 12px;font-size:12px}

.date-modal{max-width:none}.date-fields{grid-template-columns:1fr 1fr;gap:7px;margin-bottom:9px}.date-fields button{border-radius:11px;padding:8px 10px;min-width:0}.date-fields small{font-size:9px;margin-bottom:3px}.date-fields b{font-size:11px;white-space:nowrap}.calendar{border-radius:14px;padding:9px}.calendar-head{grid-template-columns:31px 1fr 31px;gap:7px;margin-bottom:7px;position:relative}.picker-nav{width:31px;height:31px;border:1px solid var(--line);background:#faf8f6;border-radius:9px;font-size:20px;line-height:1;color:var(--ink)}.picker-nav:hover{border-color:#e5a177;background:#fff4ec}.calendar-title{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0}.month-label{font-size:13px;font-weight:900}.year-picker{position:relative}.year-trigger{height:30px;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 8px;font-size:12px;font-weight:900}.year-trigger i{font-style:normal;font-size:11px;color:var(--muted);transition:.15s}.year-trigger.active{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(244,122,36,.10)}.year-trigger.active i{transform:rotate(180deg)}.year-menu{position:absolute;z-index:30;top:35px;left:50%;transform:translateX(-50%);width:94px;max-height:184px;overflow-y:auto;padding:5px;background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 16px 40px rgba(30,18,10,.20);scrollbar-width:thin}.year-option{width:100%;border:0;background:transparent;border-radius:7px;padding:7px 8px;font-size:11px;font-weight:800;text-align:center}.year-option:hover{background:#fff1e8}.year-option.selected{background:var(--dark);color:#fff}.weekdays,.calendar-grid{gap:3px}.weekdays span{font-size:8px;padding:3px 0}.cal-empty,.cal-day{height:31px}.cal-day{border-radius:8px;font-size:10px;background:#faf9f8}.cal-day:hover{background:#fff0e7}.cal-day.selected{background:linear-gradient(145deg,var(--accent2),var(--accent));color:#fff;box-shadow:0 5px 12px rgba(197,74,10,.20)}

.operating-hours{display:grid;gap:8px}.field-caption{font-size:13px;font-weight:700}.field-help{font-size:10px}.time-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.time-field{border:1px solid var(--line);border-radius:13px;background:#fff;padding:11px 12px;text-align:left;display:grid;gap:4px;transition:.16s}.time-field:hover{border-color:#e5a177;box-shadow:0 7px 18px rgba(70,35,14,.06)}.time-field small{font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:900}.time-value{font-size:20px;font-weight:950;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.time-modal{max-width:none}.time-display{display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(145deg,#221711,#4b2614);color:#fff;border-radius:14px;padding:11px;margin-bottom:10px;box-shadow:0 10px 22px rgba(40,22,12,.12)}.time-display span{font-size:28px;line-height:1;font-weight:950;font-variant-numeric:tabular-nums;letter-spacing:.03em}.time-display i{font-size:23px;font-style:normal;color:#ffad76;font-weight:900}.time-wheels{display:grid;grid-template-columns:1fr 20px 1fr;align-items:end;gap:5px}.time-wheel-col{display:grid;gap:5px}.time-wheel-col>small{text-align:center;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-size:8px;font-weight:900}.time-wheel{height:138px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;padding:48px 5px;background:linear-gradient(#faf8f6,#fff 27%,#fff 73%,#faf8f6);scrollbar-width:thin;scroll-snap-type:y proximity}.wheel-item{display:block;width:100%;height:32px;border:0;background:transparent;border-radius:8px;font-size:12px;font-weight:850;color:#6f665f;scroll-snap-align:center}.wheel-item:hover{background:#fff1e8}.wheel-item.selected{background:var(--dark);color:#fff;font-size:14px;box-shadow:0 5px 12px rgba(0,0,0,.10)}.time-wheel-sep{height:138px;display:grid;place-items:center;font-size:18px;font-weight:950;color:var(--accent)}.minute-shortcuts{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:8px}.minute-shortcuts button{border:1px solid var(--line);border-radius:8px;background:#faf9f8;padding:6px;font-size:10px;font-weight:850}.minute-shortcuts button.active{border-color:var(--accent2);background:#fff0e7;color:#9f3808}

.clock{min-width:124px;border:1px solid var(--line);border-radius:13px;padding:8px 11px;background:#faf9f8;text-align:right}.clock b{font-size:17px;letter-spacing:.04em;font-variant-numeric:tabular-nums}.clock span{font-size:9px;margin-top:1px}

@media(max-width:560px){dialog.compact-picker{width:min(360px,calc(100vw - 24px));max-height:calc(100dvh - 24px)}dialog.compact-picker .modal-shell{padding:13px}.date-fields{grid-template-columns:1fr 1fr}.calendar{padding:8px}.cal-empty,.cal-day{height:30px}.cal-day{font-size:10px}.time-wheel{height:130px}.time-wheel-sep{height:130px}.qris-box img{width:100%}}