:root {
  --bg: #0f1419;
  --bg-alt: #172029;
  --bg-card: #1d2733;
  --fg: #e6edf3;
  --fg-dim: #8b949e;
  --accent: #4493f8;
  --accent-hover: #58a6ff;
  --ok: #3fb950;
  --warn: #d29922;
  --err: #f85149;
  --border: #30363d;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
}
.hidden { display: none !important; }

.topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 12px 20px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 700; font-size: 18px; color: var(--accent); }
.nav { display: flex; gap: 6px; flex: 1; }
.nav button {
  background: transparent; border: none; color: var(--fg-dim);
  padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 14px;
}
.nav button:hover { background: var(--bg-card); color: var(--fg); }
.nav button.active { background: var(--accent); color: #fff; }
.user-slot { display: flex; align-items: center; gap: 10px; }
.user-slot img { width: 28px; height: 28px; border-radius: 50%; }
.user-slot button { background: transparent; border: 1px solid var(--border); color: var(--fg); padding: 4px 10px; border-radius: 4px; cursor: pointer; }

main { padding: 20px; max-width: 1400px; margin: 0 auto; }

.auth-screen { display: flex; align-items: center; justify-content: center; min-height: 70vh; }
.auth-card { background: var(--bg-card); padding: 40px; border-radius: 12px; text-align: center; max-width: 400px; }
.auth-card h1 { margin-top: 0; }
.hint { color: var(--fg-dim); font-size: 13px; margin-top: 20px; }

.view { animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar input[type=text], .toolbar input:not([type]), .toolbar input[type=number] {
  background: var(--bg-card); border: 1px solid var(--border); color: var(--fg);
  padding: 6px 10px; border-radius: 4px;
}
button.primary, .toolbar button {
  background: var(--accent); color: #fff; border: none;
  padding: 6px 14px; border-radius: 4px; cursor: pointer;
}
button.primary:hover, .toolbar button:hover { background: var(--accent-hover); }
button { cursor: pointer; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.grid .card {
  background: var(--bg-card); border: 1px solid var(--border);
  padding: 12px; border-radius: 8px; cursor: pointer;
}
.grid .card:hover { border-color: var(--accent); }
.grid .card .name { font-weight: 600; margin-bottom: 4px; }
.grid .card .meta { color: var(--fg-dim); font-size: 12px; }

.detail { background: var(--bg-card); padding: 20px; border-radius: 8px; }
.detail .back { background: transparent; border: 1px solid var(--border); color: var(--fg); padding: 4px 10px; border-radius: 4px; margin-bottom: 12px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 12px 0; }
.stat { background: var(--bg-alt); padding: 10px; border-radius: 6px; }
.stat .label { color: var(--fg-dim); font-size: 11px; text-transform: uppercase; }
.stat .value { font-size: 18px; font-weight: 600; margin-top: 4px; }
.chart { width: 100%; height: 400px; margin: 20px 0; }

.table-wrap { overflow-x: auto; background: var(--bg-card); border-radius: 6px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; }
th { background: var(--bg-alt); color: var(--fg-dim); font-weight: 500; }
tr:hover td { background: var(--bg-alt); }
td .action-btn { background: transparent; border: 1px solid var(--border); color: var(--fg); padding: 2px 8px; border-radius: 3px; font-size: 12px; margin-right: 4px; }
td .action-btn.danger { color: var(--err); }
td .action-btn:hover { background: var(--bg-alt); }

.feed { display: flex; flex-direction: column; gap: 10px; }
.feed-item { background: var(--bg-card); border-left: 3px solid var(--accent); padding: 10px 14px; border-radius: 6px; }
.feed-item.alert { border-left-color: var(--ok); }
.feed-item.competitor { border-left-color: var(--warn); }
.feed-item.stop_loss, .feed-item.inventory_sold { border-left-color: var(--err); }
.feed-item .type { color: var(--fg-dim); font-size: 11px; text-transform: uppercase; }
.feed-item .title { font-weight: 600; margin-top: 2px; }
.feed-item .body { color: var(--fg-dim); font-size: 13px; margin-top: 4px; white-space: pre-wrap; }
.feed-item .ts { color: var(--fg-dim); font-size: 11px; margin-top: 6px; }

.inline-form { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.inline-form input { background: var(--bg-card); border: 1px solid var(--border); color: var(--fg); padding: 6px 10px; border-radius: 4px; }
.vertical-form { display: flex; flex-direction: column; gap: 10px; max-width: 400px; }
.vertical-form label { display: flex; flex-direction: column; gap: 4px; color: var(--fg-dim); font-size: 13px; }
.vertical-form input { background: var(--bg-card); border: 1px solid var(--border); color: var(--fg); padding: 6px 10px; border-radius: 4px; }

dialog { background: var(--bg-card); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; padding: 20px; min-width: 320px; }
dialog::backdrop { background: rgba(0,0,0,0.6); }
dialog form label { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; color: var(--fg-dim); font-size: 13px; }
dialog form input { background: var(--bg-alt); border: 1px solid var(--border); color: var(--fg); padding: 6px 10px; border-radius: 4px; }
dialog menu { display: flex; justify-content: flex-end; gap: 8px; padding: 0; margin-top: 16px; }
dialog menu button { background: var(--bg-alt); color: var(--fg); border: 1px solid var(--border); padding: 6px 14px; border-radius: 4px; }
dialog menu button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }

#toast-container { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast { background: var(--bg-card); border-left: 3px solid var(--accent); padding: 10px 16px; border-radius: 4px; animation: slideIn .2s ease; }
.toast.err { border-left-color: var(--err); }
.toast.ok { border-left-color: var(--ok); }
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }