@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  --bg:#0b0e14; --panel:#131720; --card:#1c222d;
  --border:rgba(255,255,255,0.07); --border-hover:rgba(255,255,255,0.13);
  --accent:#6366f1; --accent-hover:#4f46e5; --accent-light:rgba(99,102,241,0.1);
  --accent-glow:0 4px 16px rgba(99,102,241,0.25);
  --text:#f1f5f9; --text-muted:#94a3b8; --text-dim:#475569;
  --success:#10b981; --danger:#ef4444; --warning:#f59e0b; --info:#3b82f6;
  --sidebar-w:260px; --header-h:64px;
  --shadow:0 4px 12px rgba(0,0,0,0.3); --shadow-lg:0 10px 30px rgba(0,0,0,0.4);
  --shadow-xl:0 20px 50px rgba(0,0,0,0.5);
  --radius-sm:6px; --radius:10px; --radius-lg:16px; --radius-xl:24px;
}

*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5;min-height:100vh}
h1,h2,h3,h4,.font-heading{font-family:'Outfit',sans-serif}
a{color:inherit;text-decoration:none;transition:all .2s}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.18)}

/* ── App Layout ─────────────────────────────────────────────────────── */
.app-wrapper{display:flex;min-height:100vh}
.main-content{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-height:100vh}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.sidebar{width:var(--sidebar-w);background:var(--panel);border-right:1px solid var(--border);position:fixed;height:100vh;display:flex;flex-direction:column;z-index:50;overflow:hidden}
.sidebar-header{height:var(--header-h);padding:0 20px;display:flex;align-items:center;border-bottom:1px solid var(--border);flex-shrink:0}
.logo{display:flex;align-items:center;gap:10px;font-family:'Outfit',sans-serif;font-weight:800;font-size:1.2rem;letter-spacing:-.5px}
.logo-icon{width:34px;height:34px;background:linear-gradient(135deg,var(--accent),#a855f7);border-radius:9px;display:flex;align-items:center;justify-content:center;box-shadow:var(--accent-glow);flex-shrink:0}
.nav-links{padding:16px 12px;flex:1;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.nav-section-label{padding:10px 12px 6px;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}
.nav-link{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius);color:var(--text-muted);font-size:.875rem;font-weight:500;transition:all .18s;position:relative}
.nav-link:hover{background:rgba(255,255,255,.04);color:var(--text)}
.nav-link.active{background:var(--accent-light);color:var(--accent);font-weight:600}
.nav-link.active::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:3px;background:var(--accent);border-radius:0 4px 4px 0}
.nav-link-cta{background:var(--accent-light);color:var(--accent);font-weight:600;border:1px solid rgba(99,102,241,.2)}
.nav-link-cta:hover{background:var(--accent);color:white;border-color:transparent;box-shadow:var(--accent-glow)}
.nav-badge{margin-left:auto;background:var(--accent-light);color:var(--accent);font-size:.65rem;font-weight:700;padding:2px 7px;border-radius:20px}
.sidebar-footer{padding:12px;border-top:1px solid var(--border);flex-shrink:0}
.user-profile{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--card);border-radius:var(--radius);border:1px solid var(--border)}
.avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#a855f7);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;color:white;flex-shrink:0}

/* ── Page Layout ─────────────────────────────────────────────────────── */
.page-content{padding:32px;flex:1}
.page-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.page-title-block h1{font-size:1.5rem;font-weight:800;letter-spacing:-.5px;line-height:1.2}
.page-title-block p{font-size:.875rem;color:var(--text-muted);margin-top:4px}
.page-actions{display:flex;align-items:center;gap:10px}
.section{margin-bottom:32px}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.section-header h2{font-size:1.05rem;font-weight:700}
.divider{height:1px;background:var(--border);margin:24px 0}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 18px;border-radius:var(--radius);font-weight:600;font-size:.875rem;border:1px solid transparent;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);white-space:nowrap;font-family:'Inter',sans-serif;line-height:1}
.btn i{width:16px;height:16px;flex-shrink:0}
.btn-primary{background:var(--accent);color:white;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--accent-glow)}
.btn-secondary{background:var(--card);border-color:var(--border);color:var(--text)}
.btn-secondary:hover{border-color:var(--border-hover);background:rgba(255,255,255,.04)}
.btn-ghost{background:transparent;color:var(--text-muted)}
.btn-ghost:hover{background:rgba(255,255,255,.05);color:var(--text)}
.btn-danger{background:rgba(239,68,68,.1);color:var(--danger);border-color:rgba(239,68,68,.2)}
.btn-danger:hover{background:var(--danger);color:white;border-color:transparent}
.btn-success{background:rgba(16,185,129,.1);color:var(--success);border-color:rgba(16,185,129,.2)}
.btn-success:hover{background:var(--success);color:white;border-color:transparent}
.btn-sm{padding:6px 12px;font-size:.8rem}
.btn-lg{padding:12px 24px;font-size:.9375rem}
.btn-xl{padding:14px 28px;font-size:1rem}
:disabled,.btn:disabled{opacity:.4;pointer-events:none;cursor:not-allowed}

/* ── Cards ───────────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all .25s}
.card-hover:hover{border-color:var(--border-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg)}

/* ── Stats Grid ──────────────────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:32px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;display:flex;align-items:center;gap:16px;transition:all .25s}
.stat-card:hover{border-color:var(--border-hover);transform:translateY(-2px);box-shadow:var(--shadow)}
.stat-icon-wrap{width:46px;height:46px;border-radius:12px;background:var(--accent-light);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-icon-wrap i{width:22px;height:22px}
.stat-info .value{display:block;font-size:1.75rem;font-weight:800;font-family:'Outfit',sans-serif;line-height:1;letter-spacing:-.5px}
.stat-info .label{display:block;font-size:.8rem;color:var(--text-muted);margin-top:4px}

/* ── Label Cards ─────────────────────────────────────────────────────── */
.labels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.label-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all .25s;cursor:pointer}
.label-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 8px 24px rgba(99,102,241,.15)}
.label-preview{height:110px;background:linear-gradient(135deg,rgba(99,102,241,.05),rgba(168,85,247,.05));display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border);padding:12px}
.mini-label{width:90%;height:80%;background:white;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:5px;padding:10px;overflow:hidden}
.mini-bar{height:6px;border-radius:3px;background:rgba(99,102,241,.15)}
.mini-bar.accent{background:rgba(99,102,241,.5)}
.mini-barcode{height:18px;background:linear-gradient(90deg,#1e293b 1px,transparent 1px);background-size:3px}
.label-card-body{padding:14px 16px}
.label-card-name{font-weight:700;font-size:.875rem;color:var(--text);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.label-card-meta{font-size:.75rem;color:var(--text-dim);display:flex;align-items:center;gap:6px;margin-bottom:12px}
.label-card-actions{display:flex;gap:6px}

.add-card{background:var(--card);border:2px dashed var(--border);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:32px 20px;cursor:pointer;transition:all .25s;min-height:220px;text-decoration:none;color:var(--text-muted)}
.add-card:hover{border-color:var(--accent);background:var(--accent-light);color:var(--accent);transform:translateY(-2px)}
.add-card .add-icon{width:48px;height:48px;border-radius:14px;background:var(--accent-light);color:var(--accent);display:flex;align-items:center;justify-content:center}
.add-card .add-icon i{width:22px;height:22px}
.add-card strong{font-size:.875rem}
.add-card small{font-size:.75rem;opacity:.7}

/* ── Data Table ──────────────────────────────────────────────────────── */
.data-table-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.table-toolbar{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.data-table{width:100%;border-collapse:collapse}
.data-table th{text-align:left;padding:12px 18px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);border-bottom:1px solid var(--border);background:rgba(255,255,255,.02)}
.data-table td{padding:13px 18px;border-bottom:1px solid var(--border);font-size:.875rem;color:var(--text-muted);vertical-align:middle}
.data-table td:first-child{color:var(--text);font-weight:600}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:rgba(255,255,255,.02)}
.td-actions{display:flex;gap:6px;align-items:center}

/* ── Empty State ─────────────────────────────────────────────────────── */
.empty-state{text-align:center;padding:60px 24px;color:var(--text-dim)}
.empty-state i{width:48px;height:48px;opacity:.2;margin-bottom:16px}
.empty-state h3{font-size:1.1rem;color:var(--text-muted);margin-bottom:8px;font-family:'Outfit',sans-serif}
.empty-state p{font-size:.875rem;margin-bottom:20px}

/* ── Badges ──────────────────────────────────────────────────────────── */
.badge{padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.badge-success{background:rgba(16,185,129,.1);color:var(--success)}
.badge-danger{background:rgba(239,68,68,.1);color:var(--danger)}
.badge-warning{background:rgba(245,158,11,.1);color:var(--warning)}
.badge-info{background:rgba(59,130,246,.1);color:var(--info)}
.badge-accent{background:var(--accent-light);color:var(--accent)}

/* ── Forms ───────────────────────────────────────────────────────────── */
.form-group{margin-bottom:18px}
.form-label{display:block;font-size:.78rem;font-weight:700;color:var(--text-muted);margin-bottom:7px;text-transform:uppercase;letter-spacing:.04em}
.input,select.input,textarea.input{width:100%;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:11px 14px;color:var(--text);font-family:'Inter',sans-serif;font-size:.9rem;outline:none;transition:all .2s;appearance:none}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);background:var(--bg)}
.input::placeholder{color:var(--text-dim)}
select.input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;cursor:pointer}

/* ── Modal ───────────────────────────────────────────────────────────── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);z-index:5000;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease}
.modal{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-xl);width:480px;max-width:95vw;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-xl);animation:slideUp .3s cubic-bezier(.34,1.56,.64,1)}
.modal-head{padding:20px 24px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-head h2{font-size:1rem;font-weight:700;display:flex;align-items:center;gap:10px}
.modal-head h2 i{width:18px;height:18px;color:var(--accent)}
.modal-body{padding:20px 24px}
.modal-foot{padding:14px 24px 20px;border-top:1px solid var(--border);display:flex;gap:10px}
.modal-foot .btn{flex:1}
.btn-close{width:30px;height:30px;background:var(--card);border:1px solid var(--border);border-radius:8px;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s;flex-shrink:0}
.btn-close:hover{background:var(--danger);color:white;border-color:transparent}
.btn-close i{width:13px;height:13px}

/* ── Alerts ──────────────────────────────────────────────────────────── */
.alert{padding:12px 16px;border-radius:var(--radius);font-size:.875rem;display:flex;align-items:center;gap:10px;margin-bottom:20px}
.alert i{width:16px;height:16px;flex-shrink:0}
.alert-success{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);color:var(--success)}
.alert-danger{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);color:var(--danger)}
.alert-warning{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.25);color:var(--warning)}

/* ── Search Bar ──────────────────────────────────────────────────────── */
.search-bar{position:relative;min-width:220px;display:flex;align-items:center}
.search-bar i{position:absolute;left:12px;color:var(--text-dim);width:14px;height:14px;pointer-events:none;z-index:2;display:flex;align-items:center}
.search-bar input{width:100%;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:8px 14px 8px 34px;color:var(--text);font-size:.875rem;outline:none;transition:all .2s;font-family:'Inter',sans-serif}
.search-bar input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-light)}
.search-bar input::placeholder{color:var(--text-dim)}

/* ── Toast ───────────────────────────────────────────────────────────── */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--accent);color:var(--text);padding:11px 18px;border-radius:var(--radius);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;font-size:.875rem;font-weight:500;min-width:240px;transform:translateX(120%);transition:transform .35s cubic-bezier(.34,1.56,.64,1);pointer-events:auto}
.toast i{width:16px;height:16px;flex-shrink:0}
.toast.show{transform:translateX(0)}
.toast.toast-success{border-left-color:var(--success)}
.toast.toast-success i{color:var(--success)}
.toast.toast-danger{border-left-color:var(--danger)}
.toast.toast-danger i{color:var(--danger)}
.toast.toast-warning{border-left-color:var(--warning)}
.toast.toast-warning i{color:var(--warning)}

/* ── Animations ──────────────────────────────────────────────────────── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
.animate-fade-in{animation:fadeIn .4s ease-out forwards}
.spin{animation:spin 1s linear infinite}