/* ========== Reset & Base ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --c-primary:#f59e0b;
  --c-primary-dark:#d97706;
  --c-dark:#0f172a;
  --c-text:#334155;
  --c-muted:#94a3b8;
  --c-bg:#f8fafc;
  --c-white:#fff;
  --c-border:#e2e8f0;
  --c-success:#10b981;
  --c-danger:#ef4444;
  --c-info:#3b82f6;
  --sidebar-w:240px;
  --radius:12px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);
}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;background:var(--c-bg);color:var(--c-text);display:flex;min-height:100vh;font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;}

/* ========== Sidebar ========== */
.sidebar{width:var(--sidebar-w);background:var(--c-dark);color:#fff;display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:50;overflow-y:auto;}
.sb-brand{padding:24px 20px;border-bottom:1px solid rgba(255,255,255,.08);}
.sb-logo{font-size:24px;font-weight:800;background:linear-gradient(135deg,#f59e0b,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block;}
.sb-sub{font-size:12px;color:rgba(255,255,255,.35);margin-top:2px;display:block;}
.sb-nav{padding:12px 0;flex:1;}
.sb-item{display:flex;align-items:center;gap:10px;padding:12px 20px;font-size:14px;color:rgba(255,255,255,.55);transition:all .15s;cursor:pointer;border-left:3px solid transparent;}
.sb-item:hover{color:#fff;background:rgba(255,255,255,.05);}
.sb-item.active{color:#fff;background:rgba(245,158,11,.15);border-left-color:var(--c-primary);}
.sb-icon{font-size:16px;width:20px;text-align:center;}
.sb-footer{padding:16px 20px;font-size:11px;color:rgba(255,255,255,.2);border-top:1px solid rgba(255,255,255,.08);}

/* ========== Main ========== */
.main{flex:1;margin-left:var(--sidebar-w);padding:32px;min-height:100vh;}
.page{display:none;}
.page.active{display:block;animation:fadeIn .3s;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* ========== Page Head ========== */
.pg-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;}
.pg-title{font-size:26px;font-weight:800;color:var(--c-dark);}

/* ========== Stats ========== */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;}
.stat-card{background:var(--c-white);border-radius:var(--radius);padding:24px;text-align:center;box-shadow:var(--shadow);}
.stat-num{font-size:36px;font-weight:800;color:var(--c-primary);display:block;}
.stat-label{font-size:13px;color:var(--c-muted);margin-top:4px;display:block;}

/* ========== Table ========== */
.table-wrap{background:var(--c-white);border-radius:var(--radius);box-shadow:var(--shadow);overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
thead{background:var(--c-bg);}
th,td{padding:12px 16px;text-align:left;font-size:13px;border-bottom:1px solid var(--c-border);white-space:nowrap;}
th{font-weight:700;color:#475569;font-size:14px;letter-spacing:.2px;background:#fefce8;}
tr:last-child td{border-bottom:none;}
tr:hover{background:#fffbeb;}
.tb-img{width:48px;height:48px;border-radius:8px;object-fit:cover;}
.tb-tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700;margin:1px 2px;background:#fef3c7;color:#b45309;}
.tb-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;}
.tb-badge.active{background:#d1fae5;color:#065f46;}
.tb-badge.pending{background:#fef3c7;color:#92400e;}
.tb-badge.completed{background:#dbeafe;color:#1e40af;}
.tb-badge.cancelled{background:#fee2e2;color:#991b1b;}

/* ========== Buttons ========== */
.btn{padding:8px 18px;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;outline:none;font-family:inherit;}
.btn-primary{background:var(--c-primary);color:#fff;}
.btn-primary:hover{background:var(--c-primary-dark);}
.btn-secondary{background:var(--c-bg);color:var(--c-text);border:1px solid var(--c-border);}
.btn-secondary:hover{background:var(--c-border);}
.btn-danger{background:var(--c-danger);color:#fff;}
.btn-danger:hover{background:#dc2626;}
.btn-sm{padding:6px 16px;font-size:13px;font-weight:600;margin-right:4px;}
.btn-info{background:var(--c-info);color:#fff;}
.btn-info:hover{background:#2563eb;}

/* ========== Cards ========== */
.card{background:var(--c-white);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);margin-bottom:24px;}
.card h3{font-size:17px;font-weight:800;color:var(--c-dark);margin-bottom:16px;}

/* ========== Form ========== */
.form-card{margin-bottom:24px;}
.form-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:16px;}
.form-group{display:flex;flex-direction:column;gap:6px;}
.form-group label{font-size:12px;font-weight:700;color:var(--c-muted);}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 12px;border:1px solid var(--c-border);border-radius:8px;font-size:13px;color:var(--c-text);background:var(--c-bg);outline:none;transition:border .15s;font-family:inherit;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--c-primary);background:#fff;}
.form-group textarea{min-height:80px;resize:vertical;}

/* ========== Modal ========== */
.modal-mask{position:fixed;inset:0;background:rgba(15,23,42,.6);z-index:100;display:none;}
.modal-mask.show{display:block;animation:fadeIn .2s;}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--c-white);border-radius:16px;width:560px;max-width:90vw;max-height:80vh;z-index:101;display:none;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.2);}
.modal.show{display:flex;}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--c-border);}
.modal-head h3{font-size:18px;font-weight:800;color:var(--c-dark);}
.modal-close{background:none;border:none;font-size:22px;cursor:pointer;color:var(--c-muted);padding:4px 8px;}
.modal-close:hover{color:var(--c-dark);}
.modal-body{padding:24px;overflow-y:auto;flex:1;}
.modal-body .form-group{margin-bottom:14px;}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--c-border);}

/* ========== QR Sub Tabs ========== */
.qr-sub-tabs{display:flex;gap:10px;margin-bottom:24px;}
.qr-sub-tab{padding:10px 28px;border:2px solid var(--c-border);border-radius:10px;font-size:14px;font-weight:700;color:var(--c-muted);background:var(--c-white);cursor:pointer;transition:all .15s;}
.qr-sub-tab:hover{border-color:var(--c-primary);color:var(--c-primary);}
.qr-sub-tab.active{background:var(--c-primary);color:#fff;border-color:var(--c-primary);}

/* ========== QR Result ========== */
.qr-result{margin-top:20px;text-align:center;}
.qr-result img{width:240px;height:240px;border-radius:12px;border:3px solid var(--c-primary);}
.qr-result .qr-info{margin-top:10px;font-size:14px;font-weight:700;color:var(--c-dark);}
.qr-result .qr-url{font-size:12px;color:var(--c-muted);word-break:break-all;margin-top:4px;}

/* ========== QR Batch Grid ========== */
.qr-batch-grid{margin-top:16px;}
.qr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;}
.qr-card{background:var(--c-white);border-radius:var(--radius);padding:12px;text-align:center;box-shadow:var(--shadow);transition:transform .15s;}
.qr-card:hover{transform:translateY(-2px);}
.qr-card img{width:120px;height:120px;border-radius:8px;border:2px solid var(--c-primary);object-fit:contain;}
.qr-card-info{display:flex;flex-direction:column;gap:2px;margin-top:8px;}
.qr-card-info strong{font-size:13px;color:var(--c-dark);}
.qr-card-info span{font-size:11px;color:var(--c-muted);}
.qr-card-data{word-break:break-all;margin-top:4px;font-size:10px !important;color:var(--c-primary) !important;opacity:.8;}

/* ========== Toast ========== */
.toast{position:fixed!important;top:24px!important;left:50%!important;right:auto!important;padding:12px 24px;border-radius:10px;color:#fff;font-size:13px;font-weight:700;z-index:200;opacity:0;transform:translate(-50%,-10px);transition:all .3s;pointer-events:none;}
.toast.show{opacity:1;transform:translate(-50%,0);}
.toast.success{background:var(--c-success);}
.toast.error{background:var(--c-danger);}

/* ========== Empty ========== */
.empty{padding:40px;text-align:center;color:var(--c-muted);font-size:14px;}

/* ========== Responsive ========== */
@media(max-width:768px){
  .sidebar{width:60px;}
  .sidebar .sb-item{justify-content:center;padding:12px 0;}
  .sidebar .sb-item span:not(.sb-icon),.sb-brand,.sb-footer{display:none;}
  .main{margin-left:60px;padding:16px;}
  .form-row{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:repeat(3,1fr);}
}