/* ── Dashboard preview mockup ──────────────────────────── */
.preview {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 18px 40px -16px rgba(7,9,26,0.6), 0 4px 8px rgba(7,9,26,0.18);
  overflow: hidden;
  transform: translateY(-4px);
}
.preview-bar {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-1);
}
.preview-bar .dots { display: flex; gap: 6px; }
.preview-bar .dots span { width: 10px; height: 10px; border-radius: 99px; background: var(--bg-4); }
.preview-bar .url {
  flex: 1; padding: 5px 10px; background: var(--bg-3); border-radius: 6px;
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-3);
}
.preview-body { display: grid; grid-template-columns: 180px 1fr; min-height: 360px; }

/* Sidebar */
.pside { padding: 12px 8px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.pside .pbrand { display:flex; align-items:center; gap:8px; padding:6px 10px 14px; border-bottom:1px solid var(--line); margin-bottom:8px; }
.pside .pbrand img { height:18px; }
.pside .pbrand b { font-family:var(--font-display); font-weight:800; font-size:14px; letter-spacing:-0.04em; }
.pside-item { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:6px; font-size:12px; color:var(--fg-2); cursor:pointer; }
.pside-item.active { background: var(--bg-3); color: var(--fg-1); position: relative; }
.pside-item.active::before { content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px; background:var(--brand-violet); border-radius:2px; }
.pside-item svg { color:var(--fg-3); }
.pside-item.active svg { color: var(--brand-violet-soft); }

/* Main panel */
.pmain { padding: 18px; display:flex; flex-direction:column; gap:14px; }
.pmain-head { display:flex; align-items:center; justify-content:space-between; }
.pmain-head h3 { margin:0; font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:-0.015em; }
.pmain-head .month { font-size:11px; color:var(--fg-3); padding: 5px 10px; background: var(--bg-3); border-radius: 999px; border: 1px solid var(--line); display:flex; align-items:center; gap:6px; }

/* KPIs */
.kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.kpi { background: var(--bg-1); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.kpi .l { font-size:10px; color:var(--fg-3); }
.kpi .v { font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:-0.015em; font-variant-numeric:tabular-nums; margin-top:4px; }
.kpi .d { font-size:10px; margin-top:2px; font-variant-numeric: tabular-nums; }
.kpi .d.pos { color: var(--success); }
.kpi .d.neg { color: var(--danger); }

/* Charts */
.charts { display:grid; grid-template-columns: 1.5fr 1fr; gap:10px; flex:1; }
.chart-card { background: var(--bg-1); border:1px solid var(--line); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:6px; }
.chart-card .l { font-size:11px; color:var(--fg-3); }
.line-svg { width:100%; height:100px; }
.donut-wrap { display:flex; align-items:center; gap:14px; flex:1; }
.donut-wrap svg { width: 80px; height:80px; }
.donut-legend { font-size: 11px; color: var(--fg-2); display:flex; flex-direction:column; gap:4px; }
.donut-legend .row { display:flex; gap:6px; align-items:center; justify-content:space-between; min-width: 110px; }
.donut-legend .row .left { display:flex; gap:6px; align-items:center; }
.donut-legend .dot { width:8px; height:8px; border-radius:99px; }