:root {
  --bg: #090a0c;
  --sidebar: #0e1014;
  --surface: #15181d;
  --surface-2: #1b2027;
  --surface-hover: #232a33;
  --text: #f4f6f8;
  --muted: #9aa4b2;
  --line: #2a313b;
  --brand: #31c48d;
  --brand-dark: #15815b;
  --brand-soft: #123d30;
  --good: #43d18d;
  --warn: #f5b849;
  --danger: #ff7181;
  --danger-soft: #431e26;
  --shadow: 0 16px 40px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--text); font:14px/1.45 Inter,Segoe UI,system-ui,sans-serif; }
button,input,select,textarea { font:inherit; }

aside { position:fixed; inset:0 auto 0 0; width:258px; padding:24px 14px 16px; display:flex; flex-direction:column; background:var(--sidebar); border-right:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; padding:6px 10px 28px; font-size:20px; font-weight:750; letter-spacing:-.45px; }
.brand>span { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border-radius:12px; color:#04170f; background:linear-gradient(135deg,#78e5b9,#22ad79); box-shadow:0 7px 20px rgba(49,196,141,.2); }
.brand small { display:block; margin-top:1px; color:var(--muted); font-size:11px; font-weight:500; letter-spacing:0; }
nav { display:grid; gap:4px; }
nav button { display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; border:0; border-radius:9px; color:#aeb8c5; background:transparent; text-align:left; cursor:pointer; transition:background .15s,color .15s; }
nav button:hover { background:var(--surface); color:#fff; }
nav button.active { color:#fff; background:var(--brand-soft); box-shadow:inset 3px 0 0 var(--brand); }
nav button:first-letter { color:var(--brand); font-size:16px; }
.nav-count { display:inline-flex; align-items:center; justify-content:center; min-width:21px; height:21px; margin-left:auto; padding:0 6px; border-radius:99px; color:#24070b; background:var(--danger); font-size:11px; font-style:normal; font-weight:850; }
.notification-list { display:grid; gap:11px; }
.notification { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px; padding:15px; border:1px solid var(--line); border-radius:11px; background:var(--surface); }
.notification-icon { display:grid; place-items:center; width:35px; height:35px; border-radius:10px; color:#ffd588; background:#493619; font-weight:900; }
.notification.warning .notification-icon { color:#ffc2ca; background:#4b2028; }
.notification h3 { margin:0 0 2px; font-size:14px; }
.notification p { margin:0; color:var(--muted); font-size:12px; }
.notification-group { margin:0 0 24px; }
.notification-group h2 { margin:0 0 10px; color:var(--text); font-size:15px; }
.workflow-actions { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.workflow-actions button { min-height:34px; padding:7px 10px; font-size:12px; }
.stock-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 16px; }
.stock-summary>div { padding:14px 16px; border:1px solid var(--line); border-radius:11px; background:var(--surface); box-shadow:var(--shadow); }
.stock-summary span,.stock-summary small { display:block; color:var(--muted); font-size:11px; }
.stock-summary strong { display:block; margin:3px 0; color:var(--brand); font-size:27px; letter-spacing:-.6px; }
@media (max-width:740px) { .stock-summary { grid-template-columns:1fr; } }
.daily-niches { display:grid; gap:12px; margin-top:16px; }
.daily-niche-card { display:grid; grid-template-columns:30px 1fr; gap:12px; padding:15px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); }
.daily-niche-card h3 { margin:0 0 3px; font-size:15px; }
.daily-niche-card p { margin:5px 0; }
.daily-index { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; color:#04170f; background:var(--brand); font-size:12px; font-weight:850; }
.daily-prices { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.daily-prices span { padding:6px 8px; border:1px solid var(--line); border-radius:7px; color:var(--muted); font-size:11px; }
.daily-prices b { display:block; color:var(--text); font-size:13px; }
.offline { margin:auto 10px 2px; color:#748091; font-size:11px; }

main { min-height:100vh; margin-left:258px; padding:38px clamp(22px,4vw,62px) 56px; }
header { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 auto 32px; max-width:1500px; }
#eyebrow { margin:0 0 5px; color:var(--brand); font-size:11px; font-weight:750; letter-spacing:1.35px; }
h1 { margin:0; font-size:31px; letter-spacing:-.9px; }
h2 { color:var(--text); }
#app { max-width:1500px; margin:auto; }

.primary,.secondary,.danger { display:inline-flex; justify-content:center; align-items:center; min-height:40px; padding:9px 14px; border:1px solid transparent; border-radius:9px; font-weight:700; cursor:pointer; transition:transform .15s,background .15s,border-color .15s; }
.primary:hover,.secondary:hover,.danger:hover { transform:translateY(-1px); }
.primary { color:#051811; background:var(--brand); box-shadow:0 5px 16px rgba(49,196,141,.16); }
.primary:hover { background:#55dca6; }
.secondary { color:#e0e5ec; background:var(--surface-2); border-color:var(--line); }
.secondary:hover { background:var(--surface-hover); border-color:#3b4654; }
.danger { color:#ffacb6; background:var(--danger-soft); border-color:#71313d; }

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:14px; }
.card,.panel { border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); }
.card { min-height:130px; padding:18px; border-radius:13px; }
.card p { margin:0; color:var(--muted); font-size:12px; font-weight:650; }
.card strong { display:block; margin:8px 0 3px; font-size:27px; letter-spacing:-.75px; }
.card .hint { color:var(--good); font-size:11px; }
.two-col { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:20px; }
.panel { padding:20px; border-radius:13px; }
.panel h2 { margin:0 0 16px; font-size:16px; letter-spacing:-.15px; }
.task { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-top:1px solid var(--line); }
.task:first-of-type { border-top:0; }
.badge { display:inline-flex; align-items:center; justify-content:center; padding:4px 8px; border-radius:99px; color:#91edc8; background:var(--brand-soft); font-size:11px; font-weight:750; white-space:nowrap; }

.toolbar,.bulkbar { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:14px; }
.toolbar input { flex:1 1 250px; }
.toolbar select,.bulkbar select { width:auto; min-width:130px; }
.bulkbar { padding:10px 12px; border:1px solid #224238; border-radius:10px; background:#102a23; color:#c6d8d1; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:13px; background:var(--surface); box-shadow:var(--shadow); }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { padding:13px 15px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
th { position:sticky; top:0; z-index:1; color:#8793a2; background:var(--surface-2); font-size:10px; font-weight:800; letter-spacing:.85px; text-transform:uppercase; }
tbody tr:last-child td { border-bottom:0; }
tr.clickable { cursor:pointer; }
tr.clickable:hover,tbody tr:hover { background:rgba(255,255,255,.025); }
.muted-row { opacity:.52; text-decoration:line-through; }
.status { display:inline-flex; padding:4px 8px; border-radius:99px; color:#c6d0da; background:#28303a; font-size:11px; font-weight:700; }
.status.sold,.status.shipped { color:#92eac5; background:#123d30; }
.status.listed { color:#a9d3ff; background:#182f4a; }
.status.cleaning,.status.photography { color:#ffd682; background:#453516; }
.old-stock { color:var(--danger); font-weight:750; }
.thumb { width:36px; height:36px; margin-right:8px; border:1px solid #3a434e; border-radius:7px; object-fit:cover; vertical-align:middle; }

form { display:grid; gap:14px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
label { display:grid; gap:6px; color:#c8d0da; font-size:12px; font-weight:700; }
input,select,textarea { width:100%; border:1px solid #343d49; border-radius:8px; outline:none; color:var(--text); background:#0f1217; padding:10px 11px; }
input::placeholder,textarea::placeholder { color:#647181; }
input:focus,select:focus,textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(49,196,141,.13); }
select { cursor:pointer; }
textarea { min-height:96px; resize:vertical; }
.form-actions { display:flex; justify-content:flex-end; gap:9px; flex-wrap:wrap; margin-top:7px; }
.section-title { margin:24px 0 10px; color:var(--brand); font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }
.notice { padding:12px 13px; border:1px solid #66551e; border-radius:9px; color:#f6dc96; background:#2c2614; font-size:12px; }
.small { color:var(--muted); font-size:12px; }
.empty { padding:48px; color:var(--muted); text-align:center; }
.stat-list { display:grid; gap:12px; }
.stat-row { display:flex; justify-content:space-between; gap:14px; }
.bar { height:7px; overflow:hidden; margin-top:7px; border-radius:99px; background:#262e38; }
.bar>i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--brand-dark),var(--brand)); }
.data-actions { display:flex; gap:9px; flex-wrap:wrap; }

.photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px; margin:7px 0 12px; }
.photo img,.gallery img { width:100%; aspect-ratio:1; border:1px solid #343d49; border-radius:9px; object-fit:cover; }
.photo button { width:100%; min-height:30px; margin-top:5px; padding:5px; font-size:11px; }
.gallery { grid-template-columns:repeat(auto-fill,minmax(95px,1fr)); }

.modal { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.76); backdrop-filter:blur(7px); }
.modal.hidden { display:none; }
.dialog { position:relative; width:min(780px,100%); max-height:90vh; overflow:auto; padding:28px; border:1px solid #343d49; border-radius:15px; background:#15191f; box-shadow:0 28px 80px rgba(0,0,0,.55); }
.dialog h2 { margin-top:0; }
.dialog hr { border:0; border-top:1px solid var(--line); margin:22px 0; }
.icon { position:absolute; top:13px; right:15px; border:0; color:var(--muted); background:transparent; font-size:26px; cursor:pointer; }

@media (max-width:980px) { aside { width:220px; } main { margin-left:220px; padding:30px 24px 48px; } .cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:740px) { aside { position:static; width:auto; padding:14px 12px; } .brand { padding:2px 8px 12px; } nav { display:flex; overflow:auto; padding-bottom:3px; } nav button { width:auto; flex:0 0 auto; white-space:nowrap; } .offline { display:none; } main { margin:0; padding:22px 15px 40px; } header { align-items:flex-start; margin-bottom:23px; } h1 { font-size:27px; } .cards,.two-col,.form-grid { grid-template-columns:1fr; } .toolbar { align-items:stretch; } .toolbar input,.toolbar select { flex:1 1 100%; width:100%; } .dialog { padding:23px 18px; } input,select,textarea { font-size:16px; } }