:root {
  --bg: #0b0e1a;
  --bg2: #111420;
  --bg3: #161927;
  --sidebar-w: 260px;
  --sidebar-collapsed: 68px;
  --accent: #f5a623;
  --accent2: #e8480c;
  --accent3: #00d4aa;
  --blue: #4f8ef7;
  --purple: #9b72ff;
  --red: #ff4d6d;
  --green: #00d4aa;
  --yellow: #f5a623;
  --text: #e8eaf0;
  --text2: #8a90a8;
  --border: rgba(255,255,255,0.07);
  --card: rgba(255,255,255,0.04);
  --card-hover: rgba(255,255,255,0.07);
  --radius: 14px;
  --shadow: 0 8px 32px rgba(0,0,0,0.4);
  --transition: 0.28s cubic-bezier(0.4,0,0.2,1);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden; }
.layout { display:flex; min-height:100vh; }

/* SIDEBAR */
.sidebar { width:var(--sidebar-w); background:var(--bg2); border-right:1px solid var(--border); display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:100; transition:width var(--transition); overflow:hidden; }
.sidebar.collapsed { width:var(--sidebar-collapsed); }
.sidebar-header { display:flex; align-items:center; padding:20px 18px; border-bottom:1px solid var(--border); min-height:68px; gap:12px; }
.logo-icon { width:34px; height:34px; background:linear-gradient(135deg,var(--accent),var(--accent2)); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; box-shadow:0 0 18px rgba(245,166,35,0.3); }
.logo-text { font-family:'Syne',sans-serif; font-weight:800; font-size:18px; letter-spacing:-0.3px; white-space:nowrap; overflow:hidden; transition:opacity var(--transition),width var(--transition); }
.logo-text span { color:var(--accent); }
.sidebar.collapsed .logo-text { opacity:0; width:0; }
.toggle-btn { margin-left:auto; width:28px; height:28px; border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--text2); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; transition:all 0.2s; }
.toggle-btn:hover { background:var(--accent); color:#000; border-color:var(--accent); }
.sidebar-nav { flex:1; overflow-y:auto; padding:12px 0; scrollbar-width:none; }
.sidebar-nav::-webkit-scrollbar { display:none; }
.nav-section-label { font-size:10px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--text2); padding:12px 20px 6px; white-space:nowrap; overflow:hidden; transition:opacity var(--transition); }
.sidebar.collapsed .nav-section-label { opacity:0; }
.nav-item { display:flex; align-items:center; gap:12px; padding:10px 18px; margin:2px 10px; border-radius:10px; cursor:pointer; transition:all 0.2s; position:relative; text-decoration:none; color:var(--text2); white-space:nowrap; }
.nav-item:hover { background:var(--card-hover); color:var(--text); }
.nav-item.active { background:linear-gradient(135deg,rgba(245,166,35,0.15),rgba(232,72,12,0.1)); color:var(--accent); border:1px solid rgba(245,166,35,0.2); }
.nav-item .nav-icon { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:8px; font-size:14px; flex-shrink:0; background:var(--card); transition:all 0.2s; }
.nav-item.active .nav-icon { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#000; box-shadow:0 4px 12px rgba(245,166,35,0.35); }
.nav-label { font-size:13.5px; font-weight:500; overflow:hidden; transition:opacity var(--transition),width var(--transition); }
.sidebar.collapsed .nav-label { opacity:0; width:0; }
.nav-badge { margin-left:auto; background:var(--red); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; flex-shrink:0; transition:opacity var(--transition); }
.sidebar.collapsed .nav-badge { opacity:0; }
.nav-badge.green { background:var(--green); color:#000; }
.nav-badge.yellow { background:var(--yellow); color:#000; }
.nav-badge.blue { background:var(--blue); }
.fraud-indicator { width:8px; height:8px; background:var(--red); border-radius:50%; margin-left:auto; animation:pulse 2s infinite; flex-shrink:0; transition:opacity var(--transition); }
.sidebar.collapsed .fraud-indicator { opacity:0; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.4)} }
.sidebar.collapsed .nav-item { justify-content:center; padding:10px; }
.sidebar.collapsed .nav-item .nav-icon { width:36px; height:36px; }
.sidebar-profile { border-top:1px solid var(--border); padding:14px 16px; display:flex; align-items:center; gap:11px; cursor:pointer; transition:background 0.2s; position:relative; }
.sidebar-profile:hover { background:var(--card-hover); }
.profile-avatar { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--purple),var(--blue)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0; color:#fff; }
.profile-info { overflow:hidden; transition:opacity var(--transition),width var(--transition); }
.profile-name { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; }
.profile-role { font-size:11px; color:var(--text2); white-space:nowrap; }
.sidebar.collapsed .profile-info { opacity:0; width:0; }
.profile-menu-btn { margin-left:auto; color:var(--text2); font-size:12px; flex-shrink:0; transition:opacity var(--transition); }
.sidebar.collapsed .profile-menu-btn { opacity:0; }
.profile-dropdown { position:absolute; bottom:60px; left:12px; right:12px; background:var(--bg3); border:1px solid var(--border); border-radius:12px; padding:8px; display:none; z-index:200; box-shadow:var(--shadow); }
.profile-dropdown.open { display:block; }
.pd-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; cursor:pointer; font-size:13px; color:var(--text2); transition:all 0.15s; }
.pd-item:hover { background:var(--card-hover); color:var(--text); }
.pd-item.danger { color:var(--red); }
.pd-item.danger:hover { background:rgba(255,77,109,0.1); }
.pd-divider { height:1px; background:var(--border); margin:6px 0; }

/* MAIN */
.main { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; transition:margin-left var(--transition); min-height:100vh; }
.main.expanded { margin-left:var(--sidebar-collapsed); }
.topbar { height:68px; background:var(--bg2); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 28px; gap:16px; position:sticky; top:0; z-index:50; }
.topbar-title { font-family:'Syne',sans-serif; font-size:17px; font-weight:700; color:var(--text); }
.topbar-search { margin-left:auto; display:flex; align-items:center; background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:0 14px; gap:10px; height:38px; width:220px; }
.topbar-search input { background:none; border:none; outline:none; color:var(--text); font-size:13px; font-family:'DM Sans',sans-serif; width:100%; }
.topbar-search input::placeholder { color:var(--text2); }
.topbar-search i { color:var(--text2); font-size:13px; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.topbar-btn { width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--text2); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:14px; transition:all 0.2s; position:relative; }
.topbar-btn:hover { background:var(--card-hover); color:var(--text); }
.topbar-btn .notif-dot { width:8px; height:8px; background:var(--red); border-radius:50%; position:absolute; top:6px; right:6px; border:2px solid var(--bg2); }
.topbar-profile { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:6px 12px 6px 8px; cursor:pointer; transition:all 0.2s; }
.topbar-profile:hover { background:var(--card-hover); }
.topbar-profile .tp-avatar { width:28px; height:28px; border-radius:7px; background:linear-gradient(135deg,var(--purple),var(--blue)); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; }
.topbar-profile .tp-name { font-size:13px; font-weight:500; color:var(--text); }
.content { padding:28px; flex:1; }
.mobile-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:90; backdrop-filter:blur(2px); }
.mobile-overlay.active { display:block; }
.mobile-toggle { display:none; width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--text); align-items:center; justify-content:center; cursor:pointer; font-size:15px; margin-right:8px; }

/* SHARED COMPONENTS */
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.card-title { font-family:'Syne',sans-serif; font-size:15px; font-weight:700; }
.card-subtitle { font-size:12px; color:var(--text2); margin-top:2px; }
.fade-in { animation:fadeIn 0.4s ease both; }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* BREADCRUMB */
.breadcrumb { display:flex; align-items:center; gap:8px; margin-bottom:20px; font-size:13px; }
.breadcrumb a { color:var(--text2); text-decoration:none; transition:color 0.2s; }
.breadcrumb a:hover { color:var(--accent); }
.breadcrumb .sep { color:var(--text2); opacity:0.5; }
.breadcrumb .current { color:var(--text); font-weight:600; }

/* PAGE HEADER */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.page-header h1 { font-family:'Syne',sans-serif; font-size:22px; font-weight:800; }
.page-header .subtitle { font-size:13px; color:var(--text2); margin-top:2px; }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:10px; font-size:13px; font-weight:600; font-family:'DM Sans',sans-serif; border:none; cursor:pointer; transition:all 0.2s; text-decoration:none; }
.btn-primary { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#000; box-shadow:0 4px 15px rgba(245,166,35,0.3); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(245,166,35,0.4); }
.btn-secondary { background:var(--card); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { background:var(--card-hover); }
.btn-sm { padding:6px 14px; font-size:12px; border-radius:8px; }
.btn-danger { background:rgba(255,77,109,0.15); color:var(--red); border:1px solid rgba(255,77,109,0.2); }
.btn-danger:hover { background:rgba(255,77,109,0.25); }
.btn-success { background:rgba(0,212,170,0.15); color:var(--green); border:1px solid rgba(0,212,170,0.2); }

/* FILTER BAR */
.filter-bar { display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.filter-bar .search-box { display:flex; align-items:center; background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:0 14px; gap:10px; height:40px; min-width:240px; flex:1; max-width:360px; }
.filter-bar .search-box input { background:none; border:none; outline:none; color:var(--text); font-size:13px; font-family:'DM Sans',sans-serif; width:100%; }
.filter-bar .search-box input::placeholder { color:var(--text2); }
.filter-bar .search-box i { color:var(--text2); font-size:13px; }

/* SELECT */
.select-wrap { position:relative; }
.select-wrap select { appearance:none; background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:0 36px 0 14px; height:40px; color:var(--text); font-size:13px; font-family:'DM Sans',sans-serif; cursor:pointer; transition:border-color 0.2s; min-width:140px; }
.select-wrap select:focus { outline:none; border-color:var(--accent); }
.select-wrap::after { content:'\f107'; font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--text2); font-size:11px; pointer-events:none; }

/* TABLE */
.data-table-wrap { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.data-table { width:100%; border-collapse:collapse; }
.data-table th { text-align:left; padding:14px 16px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.8px; color:var(--text2); background:rgba(255,255,255,0.02); border-bottom:1px solid var(--border); white-space:nowrap; }
.data-table td { padding:14px 16px; font-size:13px; border-bottom:1px solid var(--border); vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:rgba(255,255,255,0.02); }
.data-table .order-avatar-sm { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; flex-shrink:0; }

/* STATUS BADGES */
.badge { font-size:10px; font-weight:700; padding:4px 10px; border-radius:20px; text-transform:uppercase; letter-spacing:0.3px; display:inline-block; }
.badge-pending { background:rgba(245,166,35,0.15); color:var(--yellow); }
.badge-processing { background:rgba(79,142,247,0.15); color:var(--blue); }
.badge-shipped { background:rgba(155,114,255,0.15); color:var(--purple); }
.badge-delivered { background:rgba(0,212,170,0.15); color:var(--green); }
.badge-cancelled { background:rgba(255,77,109,0.15); color:var(--red); }
.badge-active { background:rgba(0,212,170,0.15); color:var(--green); }
.badge-draft { background:rgba(138,144,168,0.15); color:var(--text2); }
.badge-outofstock { background:rgba(255,77,109,0.15); color:var(--red); }

/* PAGINATION */
.pagination { display:flex; align-items:center; justify-content:space-between; margin-top:20px; padding:0 4px; }
.pagination .info { font-size:13px; color:var(--text2); }
.pagination .pages { display:flex; gap:6px; }
.pagination .page-btn { width:36px; height:36px; border-radius:8px; border:1px solid var(--border); background:var(--card); color:var(--text2); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:13px; font-weight:500; transition:all 0.2s; font-family:'DM Sans',sans-serif; }
.pagination .page-btn:hover { background:var(--card-hover); color:var(--text); }
.pagination .page-btn.active { background:var(--accent); color:#000; border-color:var(--accent); font-weight:700; }

/* CARDS */
.info-card { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:22px; margin-bottom:20px; }

/* FORM ELEMENTS */
.form-group { margin-bottom:18px; }
.form-label { display:block; font-size:12px; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.form-input { width:100%; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:11px 14px; color:var(--text); font-size:13px; font-family:'DM Sans',sans-serif; transition:border-color 0.2s; }
.form-input:focus { outline:none; border-color:var(--accent); }
textarea.form-input { resize:vertical; min-height:100px; }
.form-select { width:100%; appearance:none; background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238a90a8' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 14px center; border:1px solid var(--border); border-radius:10px; padding:11px 36px 11px 14px; color:var(--text); font-size:13px; font-family:'DM Sans',sans-serif; cursor:pointer; transition:border-color 0.2s; }
.form-select:focus { outline:none; border-color:var(--accent); }

/* TOGGLE SWITCH */
.toggle { position:relative; width:44px; height:24px; cursor:pointer; }
.toggle input { opacity:0; width:0; height:0; }
.toggle .slider { position:absolute; inset:0; background:var(--border); border-radius:24px; transition:0.3s; }
.toggle .slider::before { content:''; position:absolute; width:18px; height:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:0.3s; }
.toggle input:checked + .slider { background:var(--accent); }
.toggle input:checked + .slider::before { transform:translateX(20px); }

/* MINI STAT */
.mini-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:20px; }
.mini-stat { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; display:flex; align-items:center; gap:12px; }
.mini-stat .dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.mini-stat .label { font-size:11px; color:var(--text2); }
.mini-stat .count { font-family:'Syne',sans-serif; font-size:18px; font-weight:700; }

/* TABS */
.tabs { display:flex; gap:4px; margin-bottom:24px; border-bottom:1px solid var(--border); }
.tab { padding:10px 20px; font-size:13px; font-weight:500; color:var(--text2); cursor:pointer; border-bottom:2px solid transparent; transition:all 0.2s; background:none; border-top:none; border-left:none; border-right:none; font-family:'DM Sans',sans-serif; }
.tab:hover { color:var(--text); }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }

/* TWO COLUMN */
.two-col { display:grid; grid-template-columns:1fr 380px; gap:20px; }
.three-col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }

/* SCROLLBAR */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }

/* RESPONSIVE */
@media (max-width:1200px) { .mini-stats { grid-template-columns:repeat(3,1fr); } .two-col { grid-template-columns:1fr; } }
@media (max-width:768px) {
  .sidebar { transform:translateX(-100%); width:var(--sidebar-w) !important; }
  .sidebar.mobile-open { transform:translateX(0); }
  .main { margin-left:0 !important; }
  .topbar { padding:0 16px; }
  .content { padding:16px; }
  .mobile-toggle { display:flex !important; }
  .topbar-search { width:160px; }
  .mini-stats { grid-template-columns:1fr 1fr; }
  .filter-bar { flex-direction:column; align-items:stretch; }
  .filter-bar .search-box { max-width:100%; }
}