:root{
  --bg:#f4f7fb; --card:#fff; --text:#0f172a; --muted:#64748b; --border:#e8ecf4;
  --primary:#4c6fff; --primary-2:#3351e6; --danger:#ef4444; --ok:#16a34a;
  --shadow:0 12px 36px rgba(15,23,42,.08);
  --nav-bg:#0b1324; --nav-hover:#0e1a33;
}*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu}
.noscript{background:#fff0f0;border:1px solid #ffd4d4;color:#b00000;padding:10px;text-align:center}

/* Topbar - glass */
.topbar{position:fixed;inset:0 0 auto 0;height:64px;z-index:60}
.topbar.glass::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.55));backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--border)}
.top-wrap{position:relative;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;max-width:1440px;margin:0 auto}
.brand{font-weight:900;font-size:18px;letter-spacing:.1px}.brand span{color:var(--primary)}
.icon-btn{border:0;background:transparent;padding:8px;border-radius:10px;cursor:pointer}
.icon-btn:hover{background:#eef2ff}
.clock{color:#64748b;margin-right:10px}
.btn{border:1px solid var(--border);background:#fff;border-radius:10px;padding:9px 12px;cursor:pointer}
.btn:hover{background:#f7faff}.btn.white{background:#ffffff22;border-color:#ffffff55;color:#fff}.btn.white:hover{background:#ffffff35}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn.primary:hover{filter:brightness(.96)}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn.ghost{background:transparent;border-color:transparent}

/* Sidebar (versi terakhir) */
.sidebar{position:fixed;top:64px;bottom:0;left:0;width:250px;background:var(--nav-bg);color:#cbd5e1;transition:all .2s ease;border-right:1px solid #0e1a33;z-index:40}
.sidebar-head{padding:12px 14px;border-bottom:1px solid #0e1a33}
.sidebar .title{font-size:12px;letter-spacing:.08em;color:#8aa0c6;text-transform:uppercase}
.nav-title{font-size:11px;color:#7d8fb7;opacity:.9;padding:10px 14px;text-transform:uppercase}
.sidebar nav{height:100%;overflow:auto}
.nav-link{position:relative;display:flex;align-items:center;gap:12px;padding:10px 14px;color:#cbd5e1;text-decoration:none;border-radius:10px;margin:4px 8px;transition:background .15s ease,color .15s ease, transform .06s}
.nav-link:hover{background:var(--nav-hover);color:#fff;transform:translateX(1px)}
.nav-link.active{background:linear-gradient(90deg,rgba(76,111,255,.22),rgba(76,111,255,.10));color:#fff}
.nav-link.active::after{content:"";position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:9999px;background:linear-gradient(180deg,#6ea8ff,#4c6fff)}
.nav-link::before{content:""; width:18px;height:18px;background:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-size:contain;mask-repeat:no-repeat;mask-position:center;opacity:.95}
.nav-link[data-navkey="dashboard"]::before{ -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 8v-8h8v8h-8z"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 8v-8h8v8h-8z"/></svg>'); }
.nav-link[data-navkey="items"]::before{ -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M7 6h13v2H7V6zm0 5h13v2H7v-2zm0 5h13v2H7v-2zM3 7h2v2H3V7zm0 5h2v2H3v-2zm0 5h2v2H3v-2z"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7 6h13v2H7V6zm0 5h13v2H7v-2zm0 5h13v2H7v-2zM3 7h2v2H3V7zm0 5h2v2H3v-2zm0 5h2v2H3v-2z"/></svg>'); }
.nav-link[data-navkey="prices"]::before{ -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M3 5h14l4 4-10 10-8-8V5zm5.5 2A2.5 2.5 0 1 0 11 9.5 2.5 2.5 0 0 0 8.5 7z"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M3 5h14l4 4-10 10-8-8V5zm5.5 2A2.5 2.5 0 1 0 11 9.5 2.5 2.5 0 0 0 8.5 7z"/></svg>'); }
.nav-link[data-navkey="import"]::before{ -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 3l4 4h-3v6h-2V7H8l4-4zm-7 14h14v2H5v-2z"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 3l4 4h-3v6h-2V7H8l4-4zm-7 14h14v2H5v-2z"/></svg>'); }
.nav-link[data-navkey="backup"]::before{ -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M6 18a4 4 0 0 1 0-8 5.5 5.5 0 0 1 10.7-1.9A4.5 4.5 0 1 1 18 18H6zm6-9v5l3-3 1.4 1.4L12 17l-4.4-4.6L9 11l3 3V9z"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M6 18a4 4 0 0 1 0-8 5.5 5.5 0 0 1 10.7-1.9A4.5 4.5 0 1 1 18 18H6zm6-9v5l3-3 1.4 1.4L12 17l-4.4-4.6L9 11l3 3V9z"/></svg>'); }

@media(min-width:1024px){ #main{margin-left:250px} }
@media(max-width:1023px){ .sidebar.collapsed{transform:translateX(-100%)} }

/* Layout & hero/KPI */
#main{padding-top:64px}
.hero{background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#fff}
.hero-inner{max-width:1240px;margin:0 auto;padding:16px;display:flex;align-items:center;justify-content:space-between}
.hero h1{margin:0;font-size:22px}.hero p{margin:4px 0 0;opacity:.9}
.hero-actions{display:flex;gap:8px}
.kpi-grid{max-width:1240px;margin:14px auto 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:0 16px 16px}
@media(max-width:900px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.kpi-grid{grid-template-columns:1fr}}
.kpi{position:relative;border-radius:16px;padding:16px;border-left:6px solid var(--kpi,#4c6fff);background:linear-gradient(180deg,var(--t1,#fff),var(--t2,#fff));box-shadow:var(--shadow)}
.kpi .label{font-size:11px;font-weight:900;letter-spacing:.06em;color:#0b1324;text-transform:uppercase}
.kpi .value{font-size:30px;font-weight:900;margin-top:4px;color:var(--kpi,#4c6fff)}
.kpi .sub{color:#334155;font-size:12px;margin-top:4px;opacity:.8}
.kpi-items{--kpi:#2563eb;--t1:#e4efff;--t2:#f6f9ff}
.kpi-prices{--kpi:#059669;--t1:#ddffef;--t2:#f5fffa}
.kpi-role{--kpi:#d97706;--t1:#fff0db;--t2:#fff7ec}
.kpi-health{--kpi:#16a34a;--t1:#eafff0;--t2:#f6fff9}

/* Cards & lists */
.container{max-width:1240px;margin:0 auto;padding:16px}
.grid-2-1{display:grid;grid-template-columns:2fr 1fr;gap:16px}
@media(max-width:900px){.grid-2-1{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:14px}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.card .title{font-weight:700}.card .subtitle{font-size:12px;color:#64748b}

/* Backup & QR Styles */
.backup-actions{display:flex;gap:10px;margin:20px 0;flex-wrap:wrap}
.backup-info{padding:20px;background:rgba(76,111,255,0.05);border-radius:10px;margin-top:20px;border:1px solid rgba(76,111,255,0.1)}
.backup-info h4{margin-top:0;color:var(--primary);font-weight:700}
.backup-info ul{margin:10px 0;padding-left:20px}
.backup-info li{margin:8px 0;color:#475569}
.backup-info code{background:rgba(76,111,255,0.1);padding:2px 6px;border-radius:4px;font-size:13px;color:var(--primary)}

.backup-list-section{margin:25px 0;padding:20px;background:rgba(16,185,129,0.05);border:1px solid rgba(16,185,129,0.1);border-radius:10px}
.backup-list-section h4{margin-top:0;color:#059669;font-weight:700}
.backups-list{margin:15px 0}
.backup-item{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;margin:8px 0;background:rgba(255,255,255,0.8);border:1px solid #e5e7eb;border-radius:8px;transition:all 0.2s ease}
.backup-item:hover{background:rgba(255,255,255,0.95);box-shadow:0 2px 4px rgba(0,0,0,0.1)}
.backup-info{flex:1}
.backup-name{font-weight:600;color:#374151;font-size:0.95em}
.backup-meta{font-size:0.8em;color:#6b7280;margin-top:4px}
.backup-actions{display:flex;gap:8px}
.backup-actions .btn{padding:6px 12px;font-size:0.85em}
.loading-state, .empty-state{text-align:center;padding:20px;color:#6b7280;font-style:italic}

.upload-backup-section{margin:30px 0;padding:20px;background:rgba(239,68,68,0.05);border:1px solid rgba(239,68,68,0.1);border-radius:10px}
.upload-backup-section h4{margin-top:0;color:#dc2626;font-weight:700}
.upload-area{display:flex;align-items:center;gap:10px;margin:15px 0;flex-wrap:wrap}
.file-name{color:#059669;font-weight:600;font-size:0.9em}
.upload-warning{margin:15px 0;padding:15px;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.2);border-radius:8px}
.upload-warning p{margin:0;color:#dc2626;font-weight:600}

.connection-status{margin:20px 0}
.status-row{display:flex;align-items:center;gap:10px;margin:8px 0}
.status-label{font-weight:600;min-width:100px;color:#475569}
.status-badge{padding:4px 12px;border-radius:20px;font-size:0.85em;font-weight:600;text-transform:uppercase}
.status-badge.connected{background:#10b981;color:white}
.status-badge.disconnected{background:#ef4444;color:white}
.user-info{margin:10px 0;padding:15px;background:rgba(16,185,129,0.05);border-radius:8px;border:1px solid rgba(16,185,129,0.2)}

.qr-section{margin:20px 0}
.qr-container{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.qr-image{max-width:200px;height:auto;border:3px solid #e5e7eb;border-radius:10px;background:white;padding:10px;box-shadow:0 4px 6px rgba(0,0,0,0.1)}
.qr-instructions{flex:1;min-width:250px}
.qr-instructions h4{margin-top:0;color:#374151;font-weight:700}
.qr-instructions ol{padding-left:20px}
.qr-instructions li{margin:8px 0;color:#6b7280}

.connection-actions{margin:20px 0}
.input{border:1px solid var(--border);border-radius:10px;padding:8px 10px;width:100%}
.row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.row .input{flex:1 1 180px}
.row-actions{display:flex;gap:8px}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;justify-content:space-between;border:1px solid #e7ebf7;background:#fff;border-radius:12px;padding:10px 12px;margin-bottom:10px;align-items:center}
.list li .actions{display:flex;gap:8px}
.btn.sm{padding:6px 10px;border-radius:8px;font-size:12px}

.price-attrs{display:flex;gap:8px;align-items:center;margin-top:4px}
.badge{font-size:12px;padding:3px 10px;border-radius:9999px;border:1px solid}
.badge.gray{background:#f3f4f6;border-color:#e5e7eb;color:#111827}
.badge.green{background:#ecfdf5;border-color:#a7f3d0;color:#065f46;font-weight:700}

.note{color:#94a3b8;font-size:12px;margin-top:6px}
.big-clock{font-size:28px;font-weight:900;margin-top:6px}
.pray-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}
.pray-grid>div{display:flex;justify-content:space-between;border:1px solid #dde2f1;border-radius:10px;padding:8px 10px;background:#fbfdff}

.page{display:none}.page.visible{display:block}
.toast-wrap{position:fixed;right:14px;bottom:14px;display:flex;flex-direction:column;gap:8px;z-index:80}
.toast{background:#111827;color:#fff;padding:10px 12px;border-radius:10px;box-shadow:var(--shadow);opacity:.98}
.toast.success{background:#065f46}.toast.error{background:#7f1d1d}.toast.info{background:#1f2937}