:root {
    color-scheme: light;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #172033;
    background: #f4f7fb;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top right, #dbeafe 0, transparent 34%), #f4f7fb; }
.shell { width: min(960px, calc(100% - 32px)); margin: 0 auto; padding: 72px 0; }
.hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.eyebrow { margin: 0 0 8px; color: #1557d5; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
h1 { margin: 0; max-width: 700px; font-size: clamp(32px, 5vw, 54px); line-height: 1.05; letter-spacing: -.04em; }
h2 { margin: 0 0 22px; font-size: 22px; }
.lead { max-width: 650px; margin: 18px 0 0; color: #5b667a; font-size: 18px; line-height: 1.6; }
.status { white-space: nowrap; padding: 9px 13px; border-radius: 999px; font-size: 13px; font-weight: 750; }
.status.success { color: #047857; background: #d1fae5; }
.status.ready { color: #1557d5; background: #dbeafe; }
.status.warning { color: #9a3412; background: #ffedd5; }
.inline-status { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 750; }
.inline-status.success { color: #047857; background: #d1fae5; }
.inline-status.warning { color: #9a3412; background: #ffedd5; }
.card { padding: 30px; border: 1px solid #e2e8f0; border-radius: 20px; background: rgba(255,255,255,.92); box-shadow: 0 18px 50px rgba(30, 64, 175, .08); }
.card.error { max-width: 620px; margin: 10vh auto 0; }
dl { margin: 0 0 28px; }
dl div { display: grid; grid-template-columns: 180px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid #edf0f5; }
dt { color: #697386; }
dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border-radius: 11px; color: #fff; background: #1557d5; text-decoration: none; font-weight: 750; }
.button.secondary { color: #1557d5; background: #e8f0ff; }
.notice { padding: 15px 17px; border-radius: 12px; color: #854d0e; background: #fef9c3; line-height: 1.55; }
.connected-message { margin: 0; padding: 15px 17px; border-radius: 12px; color: #065f46; background: #ecfdf5; line-height: 1.55; }
code { font-family: "SFMono-Regular", Consolas, monospace; }
@media (max-width: 680px) {
    .shell { padding: 38px 0; }
    .hero { flex-direction: column; }
    dl div { grid-template-columns: 1fr; gap: 5px; }
    .card { padding: 22px; }
}

.dashboard-shell { width: min(1180px, calc(100% - 32px)); }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:30px; }
.logout { color:#5b667a; text-decoration:none; font-weight:700; padding:10px 14px; background:#fff; border:1px solid #e2e8f0; border-radius:10px; }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:18px; }
.stats-grid article { padding:22px; background:#fff; border:1px solid #e2e8f0; border-radius:16px; }
.stats-grid span { display:block; color:#697386; font-size:14px; }
.stats-grid strong { display:block; margin-top:8px; font-size:32px; }
.grid-two { display:grid; grid-template-columns:1.2fr .8fr; gap:18px; margin-bottom:18px; }
.form-stack { display:grid; gap:16px; }
.form-stack label { display:grid; gap:7px; color:#475569; font-weight:700; font-size:14px; }
input { width:100%; min-height:46px; border:1px solid #cbd5e1; border-radius:10px; padding:0 13px; background:#fff; color:#172033; font:inherit; }
input:focus { outline:3px solid rgba(21,87,213,.14); border-color:#1557d5; }
.date-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.combo { position:relative; }
.combo-options { position:absolute; z-index:10; top:calc(100% + 6px); left:0; right:0; max-height:230px; overflow:auto; padding:6px; border:1px solid #dbe3ef; border-radius:12px; background:#fff; box-shadow:0 18px 35px rgba(15,23,42,.14); }
.combo-options button { display:block; width:100%; border:0; border-radius:8px; padding:11px 12px; text-align:left; color:#172033; background:transparent; cursor:pointer; }
.combo-options button:hover { background:#eef4ff; color:#1557d5; }
.muted { color:#718096; }
.run-list { display:grid; }
.run-list>div { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid #edf0f5; }
.run-list span { display:grid; gap:4px; }.run-list small { color:#718096; }.run-list em { font-style:normal; font-size:12px; font-weight:800; text-transform:uppercase; }
.run-success { color:#047857; }.run-failed { color:#b91c1c; }.run-running { color:#1557d5; }
.flash { padding:14px 17px; border-radius:12px; margin:0 0 18px; font-weight:650; }.success-flash{color:#065f46;background:#d1fae5}.error-flash{color:#991b1b;background:#fee2e2}
.table-card { padding:0; overflow:hidden; }.section-heading{display:flex;justify-content:space-between;align-items:center;padding:24px 26px}.section-heading h2{margin:0}.section-heading span{color:#718096}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:14px 18px;border-top:1px solid #edf0f5;text-align:left;white-space:nowrap}th{color:#64748b;background:#f8fafc;font-size:12px;text-transform:uppercase;letter-spacing:.04em}.num{text-align:right}.empty{text-align:center;color:#718096;padding:30px}
.login-card{max-width:520px;margin:7vh auto}.login-title{font-size:38px}.login-lead{margin-bottom:24px}.error-notice{color:#991b1b;background:#fee2e2}
@media (max-width:800px){.grid-two{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr}.date-grid{grid-template-columns:1fr}.topbar{flex-direction:column}}

/* v5: navigasi, halaman data, detail, dan dokumen cetak */
.app-nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);border-bottom:1px solid #e2e8f0;backdrop-filter:blur(14px)}
.app-nav-inner{width:min(1180px,calc(100% - 32px));min-height:68px;margin:auto;display:flex;align-items:center;gap:28px}.app-brand{font-weight:900;color:#1557d5;text-decoration:none;letter-spacing:-.02em}.app-menu{display:flex;align-items:center;gap:6px}.app-menu a{padding:10px 13px;border-radius:9px;color:#64748b;text-decoration:none;font-weight:700}.app-menu a:hover,.app-menu a.active{color:#1557d5;background:#eef4ff}.app-nav .logout{margin-left:auto}
.page-shell{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:46px 0 70px}.page-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px}.page-title h1,.detail-heading h1{font-size:clamp(34px,5vw,48px)}.page-title p:not(.eyebrow),.detail-heading p{color:#64748b}
.stats-grid>a{color:inherit;text-decoration:none}.stats-grid>a article{height:100%;transition:transform .15s,border-color .15s}.stats-grid>a:hover article{transform:translateY(-2px);border-color:#93b4f4}.stats-grid small{display:block;margin-top:9px;color:#1557d5;font-weight:700}
.filter-card{display:grid;grid-template-columns:2fr 1.2fr 1.1fr 1fr 1fr auto auto;gap:12px;align-items:end;margin-bottom:18px;padding:20px;border:1px solid #e2e8f0;border-radius:16px;background:#fff;box-shadow:0 12px 34px rgba(30,64,175,.06)}.filter-card label{display:grid;gap:7px;color:#475569;font-size:13px;font-weight:750}.filter-card select{width:100%;min-height:46px;padding:0 12px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#172033;font:inherit}.filter-card .button{border:0;cursor:pointer}
td small{display:block;margin-top:5px;color:#718096}.row-link{color:#1557d5;text-decoration:none;font-weight:750}.data-status{display:inline-flex;padding:5px 9px;border-radius:999px;background:#eef4ff;color:#1557d5;font-size:12px;font-weight:800;text-transform:uppercase}.pagination{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:24px}.pagination a{padding:10px 14px;border:1px solid #dbe3ef;border-radius:9px;background:#fff;color:#1557d5;text-decoration:none;font-weight:700}.pagination a.disabled{pointer-events:none;opacity:.4}
.back-link{display:inline-block;margin-bottom:25px;color:#1557d5;text-decoration:none;font-weight:750}.detail-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px}.action-group{display:flex;gap:10px;flex-wrap:wrap}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}.detail-list{margin-bottom:0}.detail-list div{grid-template-columns:1fr 1.2fr}.detail-list .grand{font-size:20px;border-bottom:0}.detail-list .grand dt,.detail-list .grand dd{color:#1557d5;font-weight:900}

.print-body{background:#e9eef7;color:#172033}.print-toolbar{position:sticky;top:0;z-index:20;display:flex;justify-content:flex-end;gap:10px;padding:14px max(20px,calc((100vw - 210mm)/2));background:rgba(23,32,51,.9);backdrop-filter:blur(10px)}.print-toolbar button{border:0;cursor:pointer}.print-sheet{width:210mm;min-height:297mm;margin:22px auto;padding:18mm;background:#fff;box-shadow:0 24px 60px rgba(15,23,42,.18)}.document-header{display:grid;grid-template-columns:1.4fr 1fr;gap:30px;padding-bottom:20px;border-bottom:3px solid #1557d5}.document-header h1{font-size:34px;letter-spacing:.04em}.document-header p{margin:5px 0;color:#64748b}.document-number{display:grid;grid-template-columns:110px 1fr;gap:7px 13px;align-content:start;font-size:13px}.document-number span{color:#718096}.document-number strong{color:#1557d5}.document-info{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin:28px 0}.document-info.three{grid-template-columns:repeat(3,1fr)}.document-info>div{padding:15px;border:1px solid #e2e8f0;border-radius:10px}.document-info span,.spk-notes span,.document-bottom span,.signature-grid span{display:block;margin-bottom:7px;color:#718096;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.document-info strong{display:block}.document-info p{margin:5px 0;color:#64748b;font-size:13px}.document-table{width:100%;font-size:12px}.document-table th,.document-table td{white-space:normal;padding:11px 9px}.document-bottom{display:grid;grid-template-columns:1fr 280px;gap:30px;margin-top:25px}.document-bottom p{margin:7px 0}.print-totals{margin:0}.print-totals div{grid-template-columns:1fr auto;padding:9px 0}.print-totals .grand{font-size:18px;color:#1557d5}.document-footer{margin-top:48px;padding-top:18px;border-top:1px solid #dbe3ef;text-align:center;color:#718096;font-size:12px}.spk-sheet .document-header h1{font-size:29px}.spk-table .write-space{min-width:110px;height:70px}.spk-notes{min-height:90px;margin-top:24px;padding:15px;border:1px solid #dbe3ef;border-radius:10px}.signature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin-top:40px;text-align:center}.signature-grid i{display:block;height:70px}.signature-grid b{display:block;padding-top:8px;border-top:1px solid #64748b;font-size:12px}
@media(max-width:950px){.filter-card{grid-template-columns:repeat(2,1fr)}.detail-grid{grid-template-columns:1fr}.detail-heading{align-items:flex-start;flex-direction:column}.app-nav-inner{gap:10px}.app-menu{overflow:auto}.app-menu a{white-space:nowrap}}
@media(max-width:600px){.filter-card{grid-template-columns:1fr}.app-nav-inner{flex-wrap:wrap;padding:10px 0}.app-nav .logout{margin-left:0}.page-shell{padding-top:30px}}
@media print{*{-webkit-print-color-adjust:exact;print-color-adjust:exact}.print-body{background:#fff}.print-toolbar{display:none}.print-sheet{width:auto;min-height:auto;margin:0;padding:12mm;box-shadow:none}@page{size:A4 portrait;margin:0}.document-footer{margin-top:25px}}

/* v6: SPK Fanfun Store mengikuti contoh CorelDRAW A4 lanskap */
.spk-template-body{background:#353b47}.print-tip{margin-right:auto;color:#fff;font-size:13px}.spk-template-sheet{position:relative;width:297mm;height:210mm;margin:18px auto;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.28);overflow:hidden}.spk-template-image{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}.spk-overlay{position:absolute;z-index:2;color:#050505;font-family:Arial,Helvetica,sans-serif;font-size:8.5pt;font-weight:700;line-height:1.12;overflow:hidden}.spk-overlay[contenteditable="true"]:focus{outline:1px dashed #1557d5;background:rgba(219,234,254,.75)}.spk-customer,.spk-phone,.spk-order-date,.spk-ready-date{left:67.2%;width:29.7%;height:2.1%}.spk-customer{top:3.25%}.spk-phone{top:5.65%}.spk-order-date{top:8.05%}.spk-ready-date{top:10.45%}.spk-material{left:53.2%;top:14.6%;width:43.7%;height:5.4%;text-align:center;font-size:8pt}.spk-size{width:2.5%;height:2.3%;text-align:center;font-size:8pt}.spk-total-qty{left:86.5%;top:71.7%;width:5%;text-align:center;font-size:10pt}.spk-price{left:55%;top:76.5%;width:14%}.spk-deposit{left:72.5%;top:76.5%;width:10%}.spk-balance{left:84.3%;top:76.5%;width:12%}.spk-label-position{left:9.6%;top:72.2%;width:13.2%;height:3.9%;font-size:6.5pt}.spk-chain-thread{left:24%;top:72.2%;width:13%;height:3.9%;font-size:6.5pt}.spk-overdeck-thread{left:38%;top:72.2%;width:13%;height:3.9%;font-size:6.5pt}.spk-other-notes{left:9.6%;top:78.5%;width:41.6%;height:9.7%;font-size:7pt}.spk-cashier{left:53.2%;top:84.2%;width:23%;text-align:center;font-size:7.5pt}
@media(max-width:1150px){.spk-template-sheet{width:calc(100vw - 24px);height:calc((100vw - 24px)*.70707)}.spk-overlay{font-size:clamp(5px,.75vw,8.5pt)}}
@media print{.spk-template-body{background:#fff}.spk-template-sheet{width:297mm;height:210mm;margin:0;box-shadow:none}@page{size:A4 landscape;margin:0}}

/* v7: laporan shift dan expense */
.narrow-page{max-width:760px}.shift-title{align-items:center}.shift-filter{grid-template-columns:1.1fr 1.2fr 1fr 1fr auto auto}.fixed-outlet{background:#f8fafc;color:#172033;font-weight:800;cursor:default}.combo-themed input{padding-right:38px}.combo-arrow{position:absolute;right:14px;top:50%;z-index:2;transform:translateY(-54%);color:#1557d5;font-size:19px;font-weight:900;pointer-events:none}.combo-themed .combo-options{padding:7px}.combo-themed .combo-options button{min-height:42px;color:#334155;font-weight:750}.combo-themed .combo-options button:hover,.combo-themed .combo-options button:focus{outline:0;color:#1557d5;background:#eef4ff}.shift-stats{grid-template-columns:repeat(4,1fr)}.shift-stats strong{font-size:clamp(20px,2.4vw,30px)}.report-actions{display:flex;justify-content:flex-end;gap:10px;margin:0 0 18px}.report-range-card{display:grid;grid-template-columns:1fr 1fr auto auto;gap:12px;align-items:end;margin:0 0 18px;padding:18px;border:1px solid #dbe3ef;border-radius:16px;background:#fff}.report-range-card label{display:grid;gap:7px;color:#475569;font-size:13px;font-weight:750}.report-range-card button{border:0;cursor:pointer}.click-row{cursor:pointer}.click-row:hover td{background:#f5f8ff}.negative{color:#e00000!important;font-weight:850}.detail-shift-stats{margin-bottom:18px}.shift-metrics .detail-list>div{padding:10px 0}.shift-metrics .detail-list .emphasis{font-weight:800;border-bottom-color:#cbd5e1}.section-heading.compact{padding:0 0 18px}.expense-list{display:grid}.expense-list>div{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid #edf0f5}.expense-list .expense-total{margin-top:8px;padding-top:17px;color:#1557d5;font-size:18px;font-weight:850;border-top:2px solid #1557d5;border-bottom:0}
.shift-print-body{background:#d8dde6}.report-print-page{margin:14px auto;background:#fff;box-shadow:0 18px 46px rgba(15,23,42,.2);padding:8mm;overflow:hidden}.shift-report-page{page:shift;width:355.6mm;min-height:215.9mm}.expense-report-page{page:expense;width:297mm;min-height:210mm;padding:12mm}.moka-report-table{width:100%;border-collapse:collapse;color:#000;font-family:Arial,Helvetica,sans-serif}.moka-report-table th,.moka-report-table td{border:1.5px solid #000;white-space:nowrap;padding:4px 5px}.moka-report-table th{background:#9dc3e6;color:#000;text-align:left;text-transform:none;letter-spacing:0;font-weight:850}.shift-cross-table{font-size:9pt}.shift-cross-table th:first-child,.shift-cross-table td:first-child{width:16%;text-align:left}.shift-cross-table th:not(:first-child){width:12%;text-align:left}.shift-cross-table td.num{text-align:right}.shift-cross-table .strong-row td{font-weight:800}.expense-print-table{font-size:13pt}.expense-print-table th{font-size:15pt}.expense-print-table th:first-child{width:8%}.expense-print-table th:nth-child(2),.expense-print-table th:nth-child(3){width:20%}.expense-print-table th:nth-child(4){width:32%}.expense-print-table th:nth-child(5){width:18%}.expense-grand-total td{font-weight:900;font-size:15pt}
@media(max-width:950px){.shift-filter,.report-range-card{grid-template-columns:repeat(2,1fr)}.shift-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.shift-filter,.shift-stats,.report-range-card{grid-template-columns:1fr}.report-actions{align-items:stretch;flex-direction:column}}
@media print{.shift-print-body{background:#fff}.report-print-page{margin:0;box-shadow:none;break-after:page}.report-print-page:last-child{break-after:auto}.shift-report-page{width:355.6mm;height:215.9mm;padding:6mm}.expense-report-page{width:297mm;min-height:210mm;padding:10mm}@page shift{size:legal landscape;margin:0}@page expense{size:A4 landscape;margin:0}}