*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f0f0f5;color:#1a1a1a;height:100vh;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
.app{display:flex;height:100vh;overflow:hidden}

/* SIDEBAR */
.sidebar{width:210px;min-width:210px;background:#1e1e2e;color:#cdd6f4;display:flex;flex-direction:column}
.logo{padding:20px 16px 15px;border-bottom:1px solid #313244}
.logo-name{font-size:15px;font-weight:700;color:#cba6f7;letter-spacing:-.3px}
.logo-sub{font-size:10px;color:#585b70;margin-top:3px}
.nav{flex:1;padding:10px 8px;display:flex;flex-direction:column;gap:1px;overflow-y:auto}
.nav-btn{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:none;background:none;color:#a6adc8;font-size:12.5px;border-radius:7px;cursor:pointer;text-align:left;transition:.15s;font-family:inherit;position:relative}
.nav-btn:hover{background:#313244;color:#cdd6f4}
.nav-btn.active{background:#45475a;color:#cba6f7;font-weight:600}
.nav-btn.logout-btn{color:#f38ba8}
.nav-btn.logout-btn:hover{background:#313244;color:#f38ba8}
.nav-badge{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:#f38ba8;color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:10px;min-width:18px;text-align:center}
.nav-sep{height:1px;background:#313244;margin:6px 2px}
.sidebar-stats{padding:10px;border-top:1px solid #313244;display:grid;grid-template-columns:1fr 1fr;gap:7px}
.sstat{background:#313244;border-radius:7px;padding:9px;text-align:center}
.sstat-n{font-size:20px;font-weight:700;color:#cba6f7}
.sstat-l{font-size:9px;color:#585b70;margin-top:2px;text-transform:uppercase;letter-spacing:.5px}

/* MAIN */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{display:flex;align-items:center;gap:12px;padding:13px 20px;background:#fff;border-bottom:1px solid #e8e8ef;flex-shrink:0}
.topbar-title{font-size:14px;font-weight:700;flex:1;color:#111}
.logout-btn-mobile{display:none !important}
.search-box{display:flex;align-items:center;gap:7px;background:#f5f5f8;border:1px solid #e8e8ef;border-radius:8px;padding:7px 11px;flex:1;max-width:300px}
.search-box input{border:none;background:none;outline:none;font-size:13px;color:#333;width:100%;font-family:inherit}
.search-box input::placeholder{color:#bbb}
.btn{padding:8px 14px;border-radius:8px;font-size:12.5px;cursor:pointer;border:1px solid #e8e8ef;background:#f5f5f8;color:#333;display:inline-flex;align-items:center;gap:6px;transition:.15s;font-family:inherit;white-space:nowrap;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}
.btn:hover{background:#eaeaef;border-color:#d0d0dc}
.btn:active{transform:scale(0.98)}
.btn-primary{background:#7c3aed;color:#fff;border-color:#7c3aed}
.btn-primary:hover{background:#6d28d9;border-color:#6d28d9}
.btn-sm{padding:5px 10px;font-size:11.5px}
.btn-danger{background:#fef2f2;color:#dc2626;border-color:#fecaca}
.btn-danger:hover{background:#fee2e2}
.content{flex:1;overflow-y:auto;padding:20px}
.page{display:none}
.page.active{display:block}

/* METRICS */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:20px}
.metric{background:#fff;border:1px solid #e8e8ef;border-radius:11px;padding:15px 17px}
.metric-icon{font-size:20px;margin-bottom:5px}
.metric-val{font-size:28px;font-weight:700;color:#111;line-height:1}
.metric-lbl{font-size:11px;color:#999;margin-top:4px}

/* CARDS & TABLES */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.sec-title{font-size:13.5px;font-weight:700;color:#111}
.card{background:#fff;border:1px solid #e8e8ef;border-radius:11px;overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:12.5px}
thead{background:#f8f8fc}
th{padding:10px 13px;text-align:left;font-size:10px;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid #e8e8ef}
td{padding:11px 13px;border-bottom:1px solid #f2f2f5;color:#222;vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#fafafa}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:10.5px;font-weight:600}
.b-ok{background:#dcfce7;color:#15803d}
.b-warn{background:#fef3c7;color:#92400e}
.b-gray{background:#f3f4f6;color:#4b5563}
.b-red{background:#fee2e2;color:#991b1b}
.b-blue{background:#dbeafe;color:#1e40af}
.b-purple{background:#ede9fe;color:#6d28d9}
.b-green{background:#d1fae5;color:#059669}
.bdot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.b-ok .bdot{background:#22c55e}
.b-warn .bdot{background:#f59e0b}
.b-gray .bdot{background:#9ca3af}
.b-red .bdot{background:#ef4444}

/* FILTERS */
.filter-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.chip{padding:5px 13px;border-radius:20px;border:1px solid #e8e8ef;background:#fff;font-size:11.5px;color:#666;cursor:pointer;transition:.15s}
.chip:hover{border-color:#c4b5fd;color:#7c3aed}
.chip.on{background:#ede9fe;color:#7c3aed;border-color:#c4b5fd;font-weight:600}

/* MODALS */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:999;align-items:center;justify-content:center;pointer-events:auto}
.modal-bg.open{display:flex}
.modal{background:#fff;border-radius:14px;border:1px solid #e8e8ef;padding:24px;width:580px;max-width:96vw;max-height:92vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.15);pointer-events:auto}
.modal-sm{width:380px}
.modal-lg{width:700px}
.mhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.mtitle{font-size:15px;font-weight:700;color:#111}
.xbtn{background:none;border:none;font-size:20px;color:#bbb;cursor:pointer;padding:2px;line-height:1;transition:.15s}
.xbtn:hover{color:#666}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.fg{margin-bottom:12px}
label{display:block;font-size:11px;color:#888;margin-bottom:4px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid #e8e8ef;border-radius:8px;font-size:13px;background:#fafafa;color:#222;outline:none;font-family:inherit;transition:.15s}
input:focus,select:focus,textarea:focus{border-color:#7c3aed;background:#fff;box-shadow:0 0 0 3px rgba(124,58,237,.08)}
textarea{resize:vertical;min-height:70px}
select option{background:#fff}
.factions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px;padding-top:16px;border-top:1px solid #f0f0f0}

/* NOTIFICATION */
.notif{position:fixed;bottom:20px;right:20px;background:#1e1e2e;color:#cdd6f4;padding:12px 17px;border-radius:10px;font-size:13px;z-index:9999;transform:translateY(70px);opacity:0;transition:.3s ease;max-width:300px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.notif.show{transform:translateY(0);opacity:1}
.notif.ok{border-left:3px solid #a6e3a1}
.notif.err{border-left:3px solid #f38ba8}

/* QR */
.qr-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 0}
.qr-name{font-size:16px;font-weight:700;text-align:center;color:#111}
.qr-id{font-size:12px;color:#888;font-family:'Courier New',monospace;background:#f3f4f6;padding:4px 10px;border-radius:5px}
.print-box{background:#fff;border:2px dashed #e8e8ef;border-radius:10px;padding:14px}
#qrc{border-radius:6px}

/* SCANNER */
.scanner-box{background:#f8f8fc;border:1px solid #e8e8ef;border-radius:12px;padding:28px 24px;text-align:center}
.scan-icon{font-size:40px;margin-bottom:10px}
.sinput-row{display:flex;gap:8px;margin-top:14px}
.sinput-row input{flex:1}

/* DETAIL */
.det-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
.det-lbl{font-size:10px;color:#999;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.det-val{font-size:13.5px;color:#222}

/* PROGRESS */
.prog{height:5px;background:#f0f0f5;border-radius:3px;overflow:hidden;margin-top:7px}
.prog-fill{height:100%;background:linear-gradient(90deg,#7c3aed,#a78bfa);border-radius:3px;transition:width .4s}

/* HISTORY */
.hist-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #f5f5f8}
.hist-item:last-child{border-bottom:none}
.hist-dot{width:8px;height:8px;border-radius:50%;background:#7c3aed;margin-top:5px;flex-shrink:0}
.hist-text{font-size:13px;color:#333}
.hist-time{font-size:10.5px;color:#bbb;margin-top:2px}

/* TABS */
.tabs{display:flex;border-bottom:1px solid #e8e8ef;margin-bottom:18px}
.tab{padding:10px 15px;font-size:13px;color:#999;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:500}
.tab.on{color:#7c3aed;border-bottom-color:#7c3aed;font-weight:700}

/* MISC */
.empty{text-align:center;padding:36px;color:#bbb}
.empty-ic{font-size:32px;margin-bottom:10px}
.acbtn{background:none;border:none;cursor:pointer;padding:5px 7px;border-radius:6px;color:#bbb;font-size:14px;transition:.15s}
.acbtn:hover{background:#f0f0f5;color:#555}
.col-acts{display:flex;gap:2px}
.dash2col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}

@media(max-width:900px){
  .sidebar{width:180px;min-width:180px}
  .grid4{grid-template-columns:repeat(2,1fr)}
  .dash2col{grid-template-columns:1fr}
  .topbar{flex-wrap:wrap}
  .search-box{max-width:100%;order:3;flex:1 1 100%;margin-top:8px}
}

/* MOBILE BURGER MENU */
.burger-btn{display:none;background:#1e1e2e;border:none;color:#cdd6f4;font-size:24px;padding:10px 15px;cursor:pointer;position:fixed;top:13px;right:10px;z-index:1001;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.burger-btn:active{transform:scale(0.95)}

@media(max-width:768px){
  body{overflow:auto}
  .app{flex-direction:column;height:auto;min-height:100vh}

  /* Hide sidebar by default on mobile */
  .sidebar{position:fixed;left:-100%;top:0;bottom:0;width:280px;min-width:280px;flex-direction:column;z-index:1000;transition:left .3s ease;box-shadow:2px 0 10px rgba(0,0,0,.3)}
  .sidebar.open{left:0}

  /* Show burger button */
  .burger-btn{display:block}

  /* Show logout button in sidebar on mobile, hide in topbar */
  .nav-btn.logout-btn{display:flex !important}
  .logout-btn-mobile{display:none !important}

  /* Overlay when menu is open */
  .menu-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999}
  .menu-overlay.show{display:block}

  /* Restore normal sidebar layout */
  .logo{padding:20px 16px 15px;border-bottom:1px solid #313244;border-right:none}
  .nav{flex-direction:column;overflow-y:auto;overflow-x:hidden;padding:10px 8px;gap:1px}
  .nav-btn{padding:8px 10px;font-size:12.5px;white-space:normal}
  .nav-sep{display:block}
  .sidebar-stats{border-top:1px solid #313244;border-left:none;padding:10px;gap:7px;grid-template-columns:1fr 1fr}
  .sstat{padding:9px}
  .sstat-n{font-size:20px}
  .sstat-l{font-size:9px}

  .main{height:auto;margin-left:0}
  .topbar{padding:10px 60px 10px 12px;flex-wrap:wrap}
  .topbar-title{font-size:13px;flex:1}
  .search-box{flex:1;max-width:none;order:3;flex-basis:100%;margin-top:8px}
  .btn{padding:7px 12px;font-size:11px}

  .content{padding:12px;overflow-y:visible}
  .grid4{grid-template-columns:repeat(2,1fr);gap:10px}
  .metric{padding:12px 14px}
  .metric-val{font-size:24px}

  .dash2col{grid-template-columns:1fr;gap:12px}

  table{font-size:11px;display:block;overflow-x:auto;white-space:nowrap}
  th{padding:8px 10px;font-size:9px}
  td{padding:9px 10px}

  .filter-row{gap:4px}
  .chip{padding:4px 10px;font-size:10.5px}

  .modal{width:95vw;max-width:95vw;padding:18px;max-height:85vh}
  .modal-sm{width:95vw}
  .modal-lg{width:95vw}
  .frow{grid-template-columns:1fr;gap:10px}
  .mtitle{font-size:14px}

  .det-grid{grid-template-columns:1fr;gap:12px}

  .scanner-box{padding:20px 16px}
  .sinput-row{flex-direction:column}
  .sinput-row input{width:100%}
  .sinput-row .btn{width:100%}

  .acbtn{padding:6px 8px;font-size:16px}
  .col-acts{gap:4px}
}

@media(max-width:480px){
  .burger-btn{font-size:20px;padding:8px 12px;top:8px;right:8px}
  .sidebar{width:260px;min-width:260px}

  .logo-name{font-size:14px}
  .logo-sub{font-size:9px}
  .nav-btn{padding:8px 10px;font-size:12px}

  .topbar{padding:8px 55px 8px 10px}
  .topbar-title{font-size:12px}
  .btn{padding:6px 10px;font-size:10.5px}

  .grid4{grid-template-columns:1fr}
  .metric-icon{font-size:18px}
  .metric-val{font-size:20px}
  .metric-lbl{font-size:10px}

  table{font-size:10px}
  th{padding:6px 8px;font-size:8px}
  td{padding:7px 8px}

  .badge{padding:2px 7px;font-size:9px}
  .bdot{width:4px;height:4px}

  .modal{padding:14px}
  .mtitle{font-size:13px}
  input,select,textarea{font-size:12px;padding:7px 9px}
  label{font-size:10px}
}

/* COLOR PALETTE */
.color-palette{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.color-option{width:40px;height:40px;border-radius:8px;cursor:pointer;border:3px solid transparent;transition:.15s;position:relative}
.color-option:hover{transform:scale(1.1);border-color:#e8e8ef}
.color-option.selected{border-color:#7c3aed;box-shadow:0 0 0 2px rgba(124,58,237,.2)}
.color-option.selected::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:20px;font-weight:bold;text-shadow:0 1px 3px rgba(0,0,0,.3)}