:root{
  --navy:#172554;--navy-2:#1e3a8a;--blue:#2563eb;--cyan:#0891b2;--teal:#0f766e;
  --green:#16a34a;--green-soft:#dcfce7;--red:#dc2626;--red-soft:#fee2e2;
  --orange:#ea580c;--amber:#f59e0b;--purple:#7c3aed;--violet:#6d28d9;
  --ink:#172033;--muted:#64748b;--line:#e2e8f0;--surface:#fff;--bg:#f5f7fb;
  --shadow:0 10px 28px rgba(15,23,42,.07);--radius:18px;
}
*{box-sizing:border-box}html{font-size:16px}body{margin:0;background:var(--bg);font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);-webkit-tap-highlight-color:transparent}.nav-toggle{display:none}.sidebar{position:fixed;z-index:50;inset:0 auto 0 0;width:250px;background:linear-gradient(180deg,#172554 0%,#172033 100%);padding:24px 16px;color:#fff;display:flex;flex-direction:column;box-shadow:10px 0 30px rgba(15,23,42,.08)}.brand-wrap{display:flex;gap:12px;align-items:center;padding:2px 8px 26px}.brand-icon{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#38bdf8,#2563eb);display:grid;place-items:center;font-weight:900;box-shadow:0 8px 20px rgba(37,99,235,.35)}.brand{font-size:16px;font-weight:900;line-height:1.05;letter-spacing:.2px}.brand span{display:block;font-size:9px;font-weight:700;letter-spacing:2.1px;color:#93c5fd;margin-top:6px}.nav-menu{display:grid;gap:7px}.nav-menu a{min-height:50px;display:flex;align-items:center;gap:11px;color:#cbd5e1;text-decoration:none;padding:10px 12px;border-radius:13px;font-size:14px;font-weight:650;transition:.18s}.nav-menu a:hover{background:rgba(255,255,255,.08);color:#fff}.nav-menu a.active{background:linear-gradient(90deg,rgba(56,189,248,.22),rgba(59,130,246,.14));color:#fff;box-shadow:inset 3px 0 #38bdf8}.nav-ico{width:27px;height:27px;border-radius:8px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:15px}.sidebar-note{margin-top:auto;padding:13px;border:1px solid rgba(148,163,184,.18);border-radius:14px;background:rgba(255,255,255,.05);display:flex;gap:10px;align-items:center}.sidebar-note b{display:block;font-size:12px}.sidebar-note small{display:block;color:#94a3b8;font-size:10px;margin-top:3px}.pulse-dot{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.13)}.main{margin-left:250px;min-height:100vh}.topbar{height:86px;display:flex;justify-content:space-between;align-items:center;padding:0 28px;background:rgba(255,255,255,.9);border-bottom:1px solid #edf1f6;position:sticky;top:0;z-index:30;backdrop-filter:blur(10px)}.topbar-left{display:flex;align-items:center;gap:14px}.eyebrow{font-size:9px;font-weight:800;letter-spacing:2px;color:#94a3b8;margin-bottom:3px}.topbar h1{font-size:23px;margin:0;line-height:1.1}.menu-button{display:none;width:46px;height:46px;border-radius:12px;background:#eef2ff;color:#1e3a8a;place-items:center;font-size:22px;cursor:pointer}.top-actions{display:flex;align-items:center;gap:14px}.server-pill{height:38px;padding:0 13px;border-radius:999px;background:#ecfdf5;color:#166534;display:flex;gap:8px;align-items:center;font-size:12px;font-weight:750}.server-pill span{width:8px;height:8px;border-radius:50%;background:#22c55e}.profile-chip{display:flex;align-items:center;gap:9px}.avatar{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#4338ca,#7c3aed);color:#fff;display:grid;place-items:center;font-weight:800}.profile-chip b,.profile-chip small{display:block}.profile-chip b{font-size:12px}.profile-chip small{font-size:10px;color:var(--muted);margin-top:2px}.content{padding:26px 28px 42px;max-width:1680px;margin:0 auto}.msg{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;padding:12px 15px;border-radius:13px;margin-bottom:18px;display:flex;gap:12px;font-size:13px}.welcome-strip{border-radius:22px;padding:24px 28px;background:linear-gradient(115deg,#172554 0%,#1d4ed8 58%,#0891b2 100%);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:0 14px 32px rgba(30,64,175,.17);overflow:hidden;position:relative}.welcome-strip:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;border:45px solid rgba(255,255,255,.055);right:12%;top:-120px}.welcome-strip h2{font-size:24px;margin:5px 0 6px;position:relative;z-index:1}.welcome-strip p{margin:0;color:#dbeafe;font-size:13px;position:relative;z-index:1}.welcome-kicker{font-size:10px;font-weight:800;letter-spacing:1.6px;color:#7dd3fc}.primary-action{position:relative;z-index:2;white-space:nowrap;min-height:46px;padding:0 17px;border-radius:13px;background:#fff;color:#1e3a8a;display:flex;align-items:center;gap:12px;text-decoration:none;font-size:13px;font-weight:800;box-shadow:0 8px 20px rgba(15,23,42,.12)}.primary-action span{font-size:20px}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:20px 0}.kpi{min-height:124px;background:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);display:flex;gap:14px;align-items:center;border:1px solid #edf2f7;position:relative;overflow:hidden}.kpi:after{content:"";position:absolute;height:4px;left:0;right:0;bottom:0;background:var(--accent)}.kpi.revenue{--accent:#0f766e}.kpi.sales{--accent:#7c3aed}.kpi.online{--accent:#16a34a}.kpi.running{--accent:#ea580c}.kpi-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-weight:900;background:color-mix(in srgb,var(--accent) 12%,white);color:var(--accent);flex:0 0 auto}.kpi small{display:block;color:var(--muted);font-size:11px;font-weight:700}.kpi strong{display:block;font-size:23px;margin:6px 0 2px;letter-spacing:-.6px}.kpi strong em{font-size:13px;color:#94a3b8;font-style:normal;font-weight:650}.kpi span{font-size:10px;color:#94a3b8}.dashboard-grid,.report-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-bottom:18px}.panel{background:#fff;border:1px solid #edf2f7;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:15px}.section-head h3{font-size:16px;margin:2px 0 0}.section-head a{color:#2563eb;text-decoration:none;font-size:12px;font-weight:700}.section-kicker{font-size:9px;letter-spacing:1.7px;font-weight:900;color:#94a3b8}.branch-list{display:grid}.branch-row{display:flex;align-items:center;gap:12px;padding:13px 6px;border-top:1px solid #f1f5f9;text-decoration:none;color:inherit;border-radius:10px}.branch-row:hover{background:#f8fafc}.branch-row:first-child{border-top:0}.branch-symbol{width:38px;height:38px;border-radius:11px;background:#eff6ff;color:#1d4ed8;display:grid;place-items:center;font-size:11px;font-weight:900}.branch-copy{min-width:0;flex:1}.branch-copy b,.branch-copy span{display:block}.branch-copy b{font-size:13px}.branch-copy span{font-size:11px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chevron{font-size:25px;color:#94a3b8}.status-badge{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:4px 9px;border-radius:999px;font-size:9px;font-weight:900;letter-spacing:.4px}.status-badge.success{background:var(--green-soft);color:#15803d}.status-badge.danger{background:var(--red-soft);color:#b91c1c}.status-badge.warning{background:#fef3c7;color:#b45309}.system-hero{display:flex;gap:14px;align-items:center;background:#f8fafc;border-radius:15px;padding:15px}.api-ring{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:20px;font-weight:900;flex:0 0 auto}.system-hero.ok .api-ring{background:#dcfce7;color:#15803d}.system-hero.bad .api-ring{background:#fee2e2;color:#b91c1c}.system-hero b{font-size:13px}.system-hero p{font-size:11px;line-height:1.5;color:var(--muted);margin:4px 0 0}.system-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.system-stats div{background:#f8fafc;padding:10px;border-radius:11px;text-align:center}.system-stats span,.system-stats b{display:block}.system-stats span{font-size:9px;color:var(--muted)}.system-stats b{font-size:18px;margin-top:3px}.table-panel{overflow:hidden}.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.data-table{width:100%;border-collapse:separate;border-spacing:0;min-width:680px}.data-table th,.data-table td{text-align:left;padding:12px 11px;border-bottom:1px solid #edf2f7;font-size:12px;vertical-align:middle}.data-table th{color:#64748b;background:#f8fafc;font-size:10px;text-transform:uppercase;letter-spacing:.6px;font-weight:800}.data-table tbody tr:hover{background:#fbfdff}.data-table tbody tr:last-child td{border-bottom:0}.data-table .right{text-align:right}.invoice{font-size:11px;color:#334155}.money{font-weight:800;color:#0f766e}.machine-tag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:8px;padding:5px 8px;font-size:10px;font-weight:800}.payment-badge{display:inline-block;background:#f3e8ff;color:#7e22ce;border-radius:8px;padding:5px 8px;font-size:10px;font-weight:800}.empty{text-align:center!important;color:#94a3b8;padding:28px!important}.page-intro{display:flex;justify-content:space-between;align-items:end;gap:15px;margin:2px 0 20px}.page-intro h2{font-size:21px;margin:4px 0 5px}.page-intro p{font-size:12px;color:var(--muted);margin:0}.branch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.branch-card{background:#fff;border-radius:20px;border:1px solid #edf2f7;box-shadow:var(--shadow);padding:20px;text-decoration:none;color:inherit;transition:.18s;position:relative;overflow:hidden}.branch-card:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,#2563eb,#06b6d4)}.branch-card:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(15,23,42,.10)}.branch-card-top,.branch-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px}.branch-number{font-size:9px;letter-spacing:1.4px;color:#94a3b8;font-weight:900}.branch-building{width:50px;height:50px;margin-top:24px;border-radius:15px;background:#eff6ff;color:#1d4ed8;display:grid;place-items:center;font-size:25px}.branch-card h3{font-size:18px;margin:13px 0 5px}.branch-card p{min-height:34px;font-size:11px;line-height:1.5;color:var(--muted);margin:0 0 20px}.branch-card-bottom{border-top:1px solid #f1f5f9;padding-top:13px;font-size:10px;color:#64748b}.branch-card-bottom b{color:#2563eb}.branch-heading{display:flex;justify-content:space-between;align-items:end;gap:15px;margin-bottom:18px}.back-link{font-size:11px;font-weight:800;color:#2563eb;text-decoration:none}.branch-heading p{font-size:12px;color:var(--muted);margin:7px 0 0}.legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:10px;color:#64748b}.legend>span{display:inline-flex;align-items:center;gap:6px}.dot{width:8px;height:8px;border-radius:50%;display:inline-block}.dot.on{background:#22c55e}.dot.off{background:#ef4444}.washer-legend,.dryer-legend{border-radius:999px;padding:5px 8px;font-weight:800}.washer-legend{background:#e0f2fe;color:#0369a1}.dryer-legend{background:#ffedd5;color:#c2410c}.machine-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.machine-card{background:#fff;border:1px solid #e7edf4;border-radius:18px;padding:15px;box-shadow:0 7px 22px rgba(15,23,42,.055);position:relative;overflow:hidden}.machine-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--machine-accent)}.machine-card.washer{--machine-accent:#0891b2;--machine-soft:#ecfeff}.machine-card.dryer{--machine-accent:#ea580c;--machine-soft:#fff7ed}.machine-card.machine-offline{opacity:.72}.machine-top{display:flex;align-items:center;gap:8px}.machine-type-icon{width:34px;height:34px;border-radius:10px;background:var(--machine-soft);color:var(--machine-accent);font-weight:900;display:grid;place-items:center;flex:0 0 auto}.machine-title{min-width:0;flex:1}.machine-title b,.machine-title small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.machine-title b{font-size:12px}.machine-title small{font-size:9px;color:#94a3b8;margin-top:2px}.online-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 7px;font-size:8px;font-weight:900}.online-pill i{width:6px;height:6px;border-radius:50%}.online-pill.is-online{background:#dcfce7;color:#15803d}.online-pill.is-online i{background:#22c55e}.online-pill.is-offline{background:#fee2e2;color:#b91c1c}.online-pill.is-offline i{background:#ef4444}.machine-state{display:flex;justify-content:space-between;align-items:center;background:#f8fafc;border-radius:11px;padding:9px 10px;margin:13px 0 10px}.machine-state span{font-size:9px;color:var(--muted)}.machine-state strong{font-size:10px;color:#334155}.machine-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.machine-metrics div{text-align:center;padding:7px 3px;border-radius:9px;background:var(--machine-soft)}.machine-metrics span,.machine-metrics b{display:block}.machine-metrics span{font-size:8px;color:#64748b}.machine-metrics b{font-size:9px;margin-top:3px}.machine-actions,.button-pair{display:grid;grid-template-columns:1fr 1fr;gap:7px}.machine-actions{margin-top:11px}.machine-actions form,.button-pair form{margin:0}.btn{border:0;border-radius:10px;min-height:44px;padding:9px 11px;font-weight:850;font-size:10px;cursor:pointer;transition:.15s;width:100%;touch-action:manipulation}.btn:active{transform:scale(.98)}.btn:disabled{cursor:not-allowed;opacity:.38;filter:grayscale(.4)}.btn.start{background:#dcfce7;color:#15803d}.btn.start:not(:disabled):hover{background:#bbf7d0}.btn.stop{background:#fee2e2;color:#b91c1c}.btn.stop:not(:disabled):hover{background:#fecaca}.btn.qris{margin-top:7px;background:linear-gradient(90deg,#4f46e5,#7c3aed);color:#fff}.btn.compact{min-width:86px;min-height:40px}.sub-id{display:block;color:#94a3b8;font-size:9px;margin-top:3px}.type-badge{border-radius:8px;padding:5px 8px;font-size:9px;font-weight:900}.washer-badge{background:#e0f2fe;color:#0369a1}.dryer-badge{background:#ffedd5;color:#c2410c}.row-offline{background:#fffafa}.muted{font-size:10px;color:#94a3b8}
@media(max-width:1380px){.machine-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.kpi strong{font-size:20px}}
@media(max-width:1180px){.sidebar{transform:translateX(-102%);transition:transform .2s;width:260px}.nav-toggle:checked~.sidebar{transform:translateX(0)}.nav-overlay{display:none;position:fixed;z-index:45;inset:0;background:rgba(15,23,42,.42)}.nav-toggle:checked+.nav-overlay{display:block}.main{margin-left:0}.menu-button{display:grid}.content{padding:22px}.topbar{padding:0 22px}.machine-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.branch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.topbar{height:76px}.eyebrow{display:none}.topbar h1{font-size:20px}.server-pill{display:none}.content{padding:18px}.welcome-strip{padding:20px;align-items:flex-start}.welcome-strip h2{font-size:20px}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.dashboard-grid,.report-grid{grid-template-columns:1fr}.machine-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.machine-table-panel{padding:0}.machine-table{min-width:920px}.branch-heading{align-items:flex-start;flex-direction:column}.branch-grid{gap:12px}}
@media(max-width:640px){.profile-chip>div:last-child{display:none}.profile-chip{gap:0}.topbar{padding:0 14px}.content{padding:14px}.welcome-strip{display:block}.welcome-strip p{max-width:90%}.primary-action{margin-top:16px;width:max-content}.kpi{min-height:108px;padding:14px}.kpi-icon{width:42px;height:42px}.kpi strong{font-size:18px}.branch-grid,.machine-grid{grid-template-columns:1fr}.page-intro{align-items:flex-start;flex-direction:column}.panel{padding:15px}.data-table th,.data-table td{padding:11px 9px}.machine-card{padding:16px}.machine-title b{font-size:13px}.btn{font-size:11px;min-height:48px}}
@media(hover:none){.btn,.nav-menu a,.branch-card,.branch-row,.primary-action{cursor:pointer}.branch-card:hover{transform:none}}
/* v1.2 - real API machine assignment */
.settings-hero{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 24px;border-radius:20px;background:linear-gradient(115deg,#eef6ff,#f8fbff 52%,#ecfeff);border:1px solid #dbeafe;margin-bottom:18px}.settings-hero h2{font-size:21px;margin:5px 0 7px}.settings-hero p{font-size:12px;color:var(--muted);margin:0;max-width:760px;line-height:1.55}.api-connect-card{min-width:310px;display:flex;gap:10px;align-items:center;border-radius:15px;padding:13px 14px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 8px 22px rgba(15,23,42,.05)}.api-status-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}.api-connect-card.connected .api-status-dot{background:#22c55e;box-shadow:0 0 0 5px #dcfce7}.api-connect-card.disconnected .api-status-dot{background:#ef4444;box-shadow:0 0 0 5px #fee2e2}.api-connect-card b,.api-connect-card small{display:block}.api-connect-card b{font-size:11px}.api-connect-card small{font-size:9px;color:#64748b;margin-top:3px;max-width:175px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.api-device-count{margin-left:auto;border-radius:999px;padding:6px 9px;background:#eff6ff;color:#1d4ed8;font-size:9px;font-weight:900;white-space:nowrap}.api-warning{display:grid;gap:5px;background:#fff1f2;border:1px solid #fecdd3;border-radius:15px;padding:14px 16px;margin-bottom:18px;color:#9f1239}.api-warning b{font-size:12px}.api-warning span{font-size:10px;word-break:break-word}.api-warning small{font-size:10px;color:#be123c}.branch-setting-tabs{display:flex;gap:9px;overflow-x:auto;padding-bottom:7px;margin-bottom:12px}.branch-setting-tabs a{min-width:150px;background:#fff;border:1px solid #e2e8f0;border-radius:13px;padding:10px 12px;text-decoration:none;color:#334155;box-shadow:0 4px 14px rgba(15,23,42,.035)}.branch-setting-tabs span,.branch-setting-tabs b{display:block}.branch-setting-tabs span{font-size:8px;color:#64748b;font-weight:900;letter-spacing:1px}.branch-setting-tabs b{font-size:11px;margin-top:3px}.branch-setting-panel{background:#fff;border:1px solid #e8eef5;border-radius:20px;padding:19px;margin-bottom:20px;box-shadow:var(--shadow);scroll-margin-top:105px}.setting-head p{font-size:10px;color:#64748b;margin:5px 0 0}.assignment-summary{min-width:88px;text-align:center;background:#eef6ff;border-radius:13px;padding:9px 13px}.assignment-summary strong,.assignment-summary span{display:block}.assignment-summary strong{font-size:22px;color:#1d4ed8}.assignment-summary span{font-size:8px;color:#64748b}.device-select-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.device-select-card{position:relative;display:block;border:1px solid #e2e8f0;border-radius:15px;padding:12px;background:#fff;cursor:pointer;transition:.16s;min-width:0}.device-select-card input{position:absolute;opacity:0;pointer-events:none}.device-select-card:hover{border-color:#bfdbfe;box-shadow:0 7px 20px rgba(15,23,42,.06)}.device-select-card.selected{border:2px solid var(--select-accent);background:var(--select-soft);padding:11px}.device-select-card.washer-select{--select-accent:#0891b2;--select-soft:#ecfeff}.device-select-card.dryer-select{--select-accent:#ea580c;--select-soft:#fff7ed}.check-ui{position:absolute;right:9px;top:9px;width:23px;height:23px;border-radius:7px;background:#f1f5f9;color:transparent;display:grid;place-items:center;font-size:12px;font-weight:900}.device-select-card.selected .check-ui{background:var(--select-accent);color:#fff}.device-select-top{display:flex;align-items:center;gap:8px;padding-right:24px}.type-icon{width:32px;height:32px;border-radius:9px;background:var(--select-soft);color:var(--select-accent);display:grid;place-items:center;font-size:11px;font-weight:900;flex:0 0 auto}.device-select-top>div{min-width:0;flex:1}.device-select-top b,.device-select-top small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.device-select-top b{font-size:10px}.device-select-top small{font-size:8px;color:#94a3b8;margin-top:2px}.live-dot{width:8px;height:8px;border-radius:50%;margin-left:auto}.live-dot.on{background:#22c55e}.live-dot.off{background:#ef4444}.device-select-meta{display:flex;gap:4px;flex-wrap:wrap;margin-top:10px}.device-select-meta span{background:#f8fafc;border-radius:6px;padding:4px 5px;font-size:7px;color:#64748b;font-weight:800}.assigned-other,.assigned-here,.unassigned{margin-top:9px;border-radius:8px;padding:7px;font-size:8px;line-height:1.35}.assigned-other{background:#fff7ed;color:#9a3412}.assigned-other small{display:block;margin-top:2px}.assigned-here{background:#dcfce7;color:#166534;font-weight:800}.unassigned{background:#f8fafc;color:#94a3b8}.setting-actions{display:flex;justify-content:space-between;align-items:center;gap:15px;border-top:1px solid #edf2f7;margin-top:15px;padding-top:15px}.setting-actions span{font-size:9px;color:#64748b;line-height:1.5}.save-settings-btn,.settings-link{border:0;border-radius:11px;background:linear-gradient(90deg,#1d4ed8,#0891b2);color:#fff;font-weight:850;text-decoration:none;min-height:44px;padding:10px 15px;font-size:10px;cursor:pointer;white-space:nowrap}.save-settings-btn:disabled{opacity:.4;cursor:not-allowed}.branch-toolbar{display:flex;justify-content:flex-end;margin-bottom:9px}.empty-machine-state{grid-column:1/-1;text-align:center;padding:46px 20px;background:#fff;border:1px dashed #cbd5e1;border-radius:18px;color:#64748b}.empty-machine-state>div{font-size:30px}.empty-machine-state h3{margin:8px 0 5px;color:#334155}.empty-machine-state p{font-size:11px}.empty-machine-state a{display:inline-block;margin-top:6px;text-decoration:none;color:#1d4ed8;font-size:11px;font-weight:800}.no-api-devices{grid-column:1/-1;text-align:center;padding:28px;border-radius:14px;background:#f8fafc;color:#64748b;font-size:11px}
@media(max-width:1380px){.device-select-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1000px){.settings-hero{align-items:stretch;flex-direction:column}.api-connect-card{min-width:0;width:100%}.device-select-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.device-select-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.setting-actions{align-items:stretch;flex-direction:column}.save-settings-btn{width:100%;min-height:50px}}
@media(max-width:480px){.device-select-grid{grid-template-columns:1fr}}

.api-settings-hero{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:28px;border-radius:24px;background:linear-gradient(135deg,#eff6ff,#ecfeff);border:1px solid #dbeafe;margin-bottom:22px}.api-settings-hero h2{margin:6px 0 8px;font-size:28px;color:#172554}.api-settings-hero p{margin:0;max-width:760px;color:#64748b}.api-settings-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:20px}.setting-card{background:#fff;border:1px solid #e2e8f0;border-radius:22px;padding:24px;box-shadow:0 10px 30px rgba(15,23,42,.06)}.api-form{display:grid;gap:18px}.api-form label{display:grid;gap:8px}.api-form label>span{font-weight:800;color:#334155}.api-form em{font-weight:500;color:#94a3b8}.api-form input{width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:14px;padding:14px 15px;font-size:16px;background:#f8fafc}.api-form small{color:#64748b}.timeout-row{display:flex;align-items:center;gap:10px}.timeout-row input{max-width:120px}.api-form-actions{display:flex;gap:12px;justify-content:flex-end}.secondary-action{border:1px solid #cbd5e1;background:#fff;color:#334155;border-radius:14px;padding:13px 18px;font-weight:800}.connection-big{display:flex;align-items:center;gap:12px;padding:16px;border-radius:16px;margin:12px 0 18px}.connection-big span{width:13px;height:13px;border-radius:50%}.connection-big.ok{background:#ecfdf5;color:#047857}.connection-big.ok span{background:#10b981}.connection-big.bad{background:#fef2f2;color:#b91c1c}.connection-big.bad span{background:#ef4444}.connection-big b,.connection-big small{display:block}.api-detail-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f1f5f9}.api-error-box{margin-top:14px;padding:12px;border-radius:12px;background:#fff7ed;color:#9a3412;word-break:break-word}.cashier-sync-info{margin-top:20px;padding:16px;border-radius:16px;background:#f0fdfa;color:#115e59}.cashier-sync-info p{margin:6px 0 0;line-height:1.5}@media(max-width:900px){.api-settings-layout{grid-template-columns:1fr}.api-settings-hero{align-items:flex-start;flex-direction:column}.api-form-actions{flex-direction:column}.api-form-actions button{width:100%}}

/* v1.6 Owner operational controls */
.ops-hero{display:flex;justify-content:space-between;gap:20px;align-items:center;background:linear-gradient(135deg,#eff6ff,#f0fdfa);border:1px solid #dbeafe;border-radius:24px;padding:24px;margin-bottom:20px}.ops-hero h2{margin:5px 0 7px;font-size:25px}.ops-hero p{margin:0;color:#64748b}.ops-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.ops-card{background:#fff;border:1px solid #e2e8f0;border-radius:22px;padding:18px;box-shadow:0 10px 28px rgba(15,23,42,.06)}.ops-card.washer{border-top:4px solid #0ea5e9}.ops-card.dryer{border-top:4px solid #f59e0b}.ops-card.locked{box-shadow:inset 0 0 0 2px #fecaca,0 10px 28px rgba(15,23,42,.06)}.ops-card.resting{background:linear-gradient(180deg,#fff,#fffbeb)}.ops-card-head{display:flex;align-items:center;gap:12px}.ops-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-weight:900;background:#e0f2fe;color:#0369a1}.dryer .ops-icon{background:#fef3c7;color:#b45309}.ops-title{flex:1;min-width:0}.ops-title span,.ops-title small{display:block;color:#64748b;font-size:12px}.ops-title h3{margin:2px 0;font-size:18px}.ops-statuses{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}.mini-status{font-size:10px;font-weight:900;padding:5px 7px;border-radius:999px;background:#e2e8f0}.mini-status.on{background:#dcfce7;color:#166534}.mini-status.off,.mini-status.danger{background:#fee2e2;color:#991b1b}.mini-status.rest{background:#fef3c7;color:#92400e}.ops-form{margin-top:16px}.ops-row{display:grid;gap:10px}.ops-row.two{grid-template-columns:1fr 1fr}.ops-form label,.shift-add-grid label,.shift-admin-row label{font-size:12px;font-weight:800;color:#475569}.ops-form input,.shift-add-grid input,.shift-add-grid select,.shift-admin-row input{width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:11px;padding:10px;margin-top:5px;background:#fff}.switch-line{display:flex!important;justify-content:space-between;gap:14px;align-items:center;padding:13px 0;border-top:1px solid #f1f5f9}.switch-line span:first-child{display:flex;flex-direction:column}.switch-line small{font-weight:500;color:#64748b;margin-top:2px}.switch{position:relative;width:46px;height:26px;flex:0 0 46px}.switch input{opacity:0;position:absolute}.switch i{position:absolute;inset:0;background:#cbd5e1;border-radius:30px;cursor:pointer}.switch i:after{content:'';position:absolute;width:20px;height:20px;left:3px;top:3px;border-radius:50%;background:white;transition:.2s}.switch input:checked+i{background:#16a34a}.switch input:checked+i:after{transform:translateX(20px)}.day-pills{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin:10px 0 14px}.day-pills>span{font-size:12px;font-weight:800;color:#64748b}.day-pills label input{display:none}.day-pills label b{display:block;padding:6px 8px;border:1px solid #cbd5e1;border-radius:8px;font-size:11px;cursor:pointer}.day-pills label input:checked+b{background:#172554;color:#fff;border-color:#172554}.full-btn{width:100%}.lock-panel{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px dashed #cbd5e1}.lock-panel div{display:flex;flex-direction:column}.lock-panel small{color:#64748b;font-size:11px;margin-top:2px}.lock-owner,.unlock-owner{border:0;border-radius:10px;padding:10px 13px;font-weight:900;cursor:pointer}.lock-owner{background:#fee2e2;color:#991b1b}.unlock-owner{background:#dcfce7;color:#166534}.shift-admin-card{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:20px;margin-bottom:18px}.shift-add-grid{display:grid;grid-template-columns:1.1fr 1.4fr .8fr .8fr auto;gap:10px;align-items:end}.shift-admin-list{display:grid;gap:10px}.shift-admin-row{display:grid;grid-template-columns:1.3fr 1.3fr .75fr .75fr .55fr auto auto;gap:10px;align-items:end;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:14px}.shift-badge{display:flex;flex-direction:column}.shift-badge span{font-size:11px;color:#64748b}.shift-badge b{font-size:16px}.shift-active{display:flex;gap:5px;align-items:center;padding-bottom:10px}.shift-active input{width:auto;margin:0}.save-mini,.delete-mini{border:0;border-radius:9px;padding:10px 12px;font-weight:900;cursor:pointer}.save-mini{background:#dbeafe;color:#1d4ed8}.delete-mini{background:#fee2e2;color:#991b1b}
@media(max-width:1050px){.ops-grid{grid-template-columns:1fr}.shift-add-grid{grid-template-columns:1fr 1fr}.shift-admin-row{grid-template-columns:1fr 1fr 1fr}.shift-badge{grid-column:1/-1}}@media(max-width:650px){.ops-hero{align-items:flex-start;flex-direction:column}.ops-row.two{grid-template-columns:1fr}.shift-add-grid,.shift-admin-row{grid-template-columns:1fr}.shift-badge{grid-column:auto}.lock-panel{align-items:flex-start;flex-direction:column}.lock-panel form,.lock-panel button{width:100%}}

/* v1.7 simplified Owner settings & sales */
.page-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:18px}.page-intro h2{font-size:26px;margin:5px 0 6px}.page-intro p,.muted{color:#64748b;font-size:12px;margin:0}.subtabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}.subtabs a{min-height:40px;display:flex;align-items:center;text-decoration:none;padding:8px 14px;border-radius:11px;background:#fff;border:1px solid #e2e8f0;color:#475569;font-size:12px;font-weight:850;box-shadow:0 5px 15px rgba(15,23,42,.03)}.subtabs a:hover,.subtabs a.active{background:#172554;color:#fff;border-color:#172554}.sticky-tabs{position:sticky;top:96px;z-index:15;background:rgba(245,247,251,.92);padding:7px;border-radius:14px;backdrop-filter:blur(8px)}.anchor-section{scroll-margin-top:160px}.setting-section{background:#fff;border:1px solid #e2e8f0;border-radius:22px;padding:22px;margin-bottom:22px;box-shadow:0 10px 28px rgba(15,23,42,.05)}.settings-two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.settings-two-col>.panel{box-shadow:none;background:#fdfefe}.inline-shift-form{display:grid;grid-template-columns:1.2fr .8fr .8fr auto auto;gap:8px;align-items:end;flex:1}.inline-shift-form input{width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:9px}.operator-grid{display:grid;grid-template-columns:1fr .8fr 1.2fr 1fr .7fr auto;gap:10px;align-items:end}.operator-grid label,.expense-form label{display:grid;gap:6px;font-size:11px;font-weight:800;color:#475569}.operator-grid input,.operator-grid select,.expense-form input,.expense-form select{width:100%;border:1px solid #cbd5e1;border-radius:11px;padding:11px;background:#fff}.operator-list{display:grid;gap:10px;margin-top:14px}.operator-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:12px}.operator-avatar{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#4338ca,#0891b2);color:#fff;display:grid;place-items:center;font-weight:900}.operator-copy{min-width:150px}.operator-copy b,.operator-copy span{display:block}.operator-copy span{font-size:10px;color:#64748b;margin-top:3px}.operator-edit{display:grid;grid-template-columns:1fr 1fr .7fr auto auto;gap:8px;align-items:center;flex:1}.operator-edit input{min-width:0;border:1px solid #cbd5e1;border-radius:9px;padding:9px}.operator-edit label{font-size:11px;white-space:nowrap}.mini-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 18px}.mini-kpi-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.mini-kpi-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.mini-kpi{background:linear-gradient(135deg,#eff6ff,#fff);border:1px solid #dbeafe;border-radius:17px;padding:18px}.mini-kpi.cost{background:linear-gradient(135deg,#fff7ed,#fff);border-color:#fed7aa}.mini-kpi small{display:block;color:#64748b;font-size:11px;font-weight:800}.mini-kpi strong{display:block;font-size:21px;margin-top:7px;color:#172554}.expense-entry{margin-bottom:18px}.expense-form{display:grid;grid-template-columns:1fr .85fr 1.15fr .85fr 1.5fr auto;gap:10px;align-items:end}.expense-desc{min-width:180px}.sales-tabs{margin-bottom:18px}
@media(max-width:1150px){.operator-grid{grid-template-columns:1fr 1fr 1fr}.operator-edit{grid-template-columns:1fr 1fr 1fr}.expense-form{grid-template-columns:1fr 1fr 1fr}.settings-two-col{grid-template-columns:1fr}.mini-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.inline-shift-form{grid-template-columns:1fr 1fr 1fr}.operator-card{align-items:flex-start;flex-wrap:wrap}.operator-edit{width:100%;flex-basis:100%}}
@media(max-width:700px){.page-intro h2{font-size:22px}.sticky-tabs{top:88px;overflow-x:auto;flex-wrap:nowrap}.sticky-tabs a{white-space:nowrap}.setting-section{padding:15px}.operator-grid,.operator-edit,.expense-form,.inline-shift-form,.mini-kpi-grid,.mini-kpi-grid.three,.mini-kpi-grid.two{grid-template-columns:1fr}.operator-card{display:grid;grid-template-columns:auto 1fr}.operator-edit,.operator-card>form:last-child{grid-column:1/-1}.operator-card>form:last-child button{width:100%}.subtabs{overflow-x:auto;flex-wrap:nowrap}.subtabs a{white-space:nowrap}.mini-kpi strong{font-size:18px}}
.auth-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#0f172a,#172554 55%,#0f766e);padding:24px}.auth-card{width:min(430px,100%);background:#fff;border-radius:26px;padding:30px;box-shadow:0 30px 80px #0005}.auth-logo{width:62px;height:62px;border-radius:18px;background:#172554;color:#fff;display:grid;place-items:center;font-weight:900;font-size:22px}.auth-card h1{margin:18px 0 4px}.auth-card p{color:#64748b}.auth-card form{display:grid;gap:15px;margin:22px 0}.auth-card label{display:grid;gap:7px;font-weight:700}.auth-card input{padding:14px;border:1px solid #cbd5e1;border-radius:12px;font-size:16px}.auth-submit{width:100%;padding:14px}.logout-mini{padding:9px 12px;border-radius:10px;background:#fee2e2;color:#991b1b;text-decoration:none;font-weight:800;font-size:12px}

.pending-warning{display:block;color:#b45309;font-size:10px;font-weight:800;margin-top:5px}.status-running-pending{color:#b45309}

.dryer-safety-box{margin-top:14px;padding:14px;border:1px solid #f1c46d;border-radius:14px;background:#fffaf0}.dryer-safety-box.warning{border:2px solid #e67e22;background:#fff3e5}.safety-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;margin-top:10px}.safety-form label{font-size:12px;font-weight:700}.safety-form input{width:100%;padding:9px;border:1px solid #d8e0ea;border-radius:8px}.safety-warning-banner,.safety-warning-badge{background:#e67e22;color:white;font-weight:900;border-radius:8px;padding:7px 10px;margin-top:8px;display:inline-block}@media(max-width:700px){.safety-form{grid-template-columns:1fr}}

.machine-admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(390px,1fr));gap:18px}
.owner-machine-card{background:#fff;border:1px solid #dfe7f1;border-radius:18px;padding:18px;box-shadow:0 8px 26px rgba(31,59,92,.06)}
.owner-machine-card.offline{opacity:.72}.owner-machine-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.owner-machine-head h3{margin:8px 0 2px}.owner-machine-state{margin:14px 0;padding:12px;border-radius:12px;background:#f7f9fc;display:flex;flex-direction:column;gap:3px}
.sensor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.sensor-grid div{background:#f7f9fc;border-radius:10px;padding:10px}.sensor-grid span{display:block;font-size:11px;color:#718097}.sensor-grid b{font-size:15px}
.owner-control-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:14px}.owner-control-grid form,.owner-control-grid button{width:100%}.pause-owner{background:#f59e0b!important;color:white!important}.neutral-owner{background:#eef2f7!important;color:#334155!important}.blower-owner{background:#0f766e!important;color:white!important}
.qris-machine-status{margin:12px 0;padding:11px 13px;border-radius:11px;display:flex;flex-direction:column}.qris-machine-status.success{background:#e8f8ef;color:#17603a}.qris-machine-status.processing{background:#eaf3ff;color:#1d4f91}.qris-machine-status.warning{background:#fff4df;color:#8a5410}
@media(max-width:700px){.machine-admin-grid{grid-template-columns:1fr}.sensor-grid{grid-template-columns:repeat(2,1fr)}}


/* Owner per-machine interruption */
.owner-machine-card{scroll-margin-top:110px}
.interrupt-zone{margin-top:14px;padding-top:14px;border-top:1px dashed #fecaca;display:flex;align-items:center;justify-content:space-between;gap:14px}
.interrupt-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.interrupt-copy span,.interrupt-kicker{font-size:9px;letter-spacing:1.5px;font-weight:900;color:#dc2626}
.interrupt-copy b{font-size:12px;color:#7f1d1d}.interrupt-copy small{font-size:10px;color:#64748b;line-height:1.4}
.interrupt-open{border:0;border-radius:11px;padding:11px 13px;background:#fee2e2;color:#991b1b;font-size:11px;font-weight:900;cursor:pointer;white-space:nowrap}
.interrupt-open:hover{background:#fecaca}.interrupt-open:disabled{opacity:.45;cursor:not-allowed}
.interrupt-modal{position:fixed;z-index:200;inset:0;background:rgba(15,23,42,.58);display:none;place-items:center;padding:20px}
.interrupt-modal.show{display:grid}.interrupt-dialog{width:min(470px,100%);background:#fff;border-radius:20px;padding:24px;box-shadow:0 30px 90px rgba(0,0,0,.3);position:relative}
.interrupt-close{position:absolute;right:14px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:#f1f5f9;font-size:22px;cursor:pointer}
.interrupt-dialog h3{margin:7px 0 8px;font-size:23px}.interrupt-dialog p{margin:0 0 13px;color:#475569;font-size:13px}
.interrupt-warning{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:12px;padding:12px;font-size:12px;line-height:1.5;margin-bottom:15px}
.interrupt-dialog label{display:grid;gap:7px;font-size:12px;font-weight:850;color:#334155}.interrupt-dialog input{width:100%;padding:13px;border:1px solid #cbd5e1;border-radius:11px;font-size:18px;letter-spacing:4px}
.interrupt-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:16px}.interrupt-actions button{border:0;border-radius:11px;padding:12px;font-weight:900;cursor:pointer}
.interrupt-cancel{background:#eef2f7;color:#475569}.interrupt-confirm{background:#dc2626;color:#fff}
@media(max-width:700px){.interrupt-zone{align-items:stretch;flex-direction:column}.interrupt-open{width:100%}.interrupt-actions{grid-template-columns:1fr}}