/* Genta OS — Dashboard Design System
   Sumber kebenaran styling untuk semua halaman dashboard.
   Palet: Navy + Electric Orange + Blue (disesuaikan dari referensi BizAI StoryFlow ad — BUKAN palet crimson+gold di proposal penjualan yang sudah di-ACC Genta). */

:root {
  --bg-void: #0A0E1A;
  --bg-surface: #111827;
  --bg-surface-2: #182238;
  --bg-surface-3: #212D48;
  --hairline: rgba(46,158,255,0.22);
  --hairline-strong: rgba(46,158,255,0.4);
  --accent: #FF7A29;
  --accent-bright: #FF9A52;
  --accent-2: #2E9EFF;
  --text-primary: #F5F7FA;
  --text-muted: #A9B4C6;
  --text-dim: #6B7690;
  --ok: #4ADE80;
  --warn: #FBBF24;
  --crit: #FF5C5C;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-void: #F3F6FB; --bg-surface: #FFFFFF; --bg-surface-2: #E8EEF7; --bg-surface-3: #D8E2F0;
    --hairline: rgba(46,158,255,0.18); --hairline-strong: rgba(46,158,255,0.32);
    --accent: #E5620A; --accent-bright: #C94F00; --accent-2: #1D7FDB;
    --text-primary: #101828; --text-muted: #47536B; --text-dim: #6B7690;
    --ok: #16A34A; --warn: #B45309; --crit: #DC2626;
  }
}
:root[data-theme="dark"] {
  --bg-void: #0A0E1A; --bg-surface: #111827; --bg-surface-2: #182238; --bg-surface-3: #212D48;
  --hairline: rgba(46,158,255,0.22); --hairline-strong: rgba(46,158,255,0.4);
  --accent: #FF7A29; --accent-bright: #FF9A52; --accent-2: #2E9EFF;
  --text-primary: #F5F7FA; --text-muted: #A9B4C6; --text-dim: #6B7690;
  --ok: #4ADE80; --warn: #FBBF24; --crit: #FF5C5C;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}
.mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-variant-numeric: tabular-nums; }

/* ---------- Shell layout ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  flex: none; width: 232px;
  background: var(--bg-void);
  border-right: 1px solid var(--hairline);
  padding: 1.6em 1.1em;
  display: flex; flex-direction: column; gap: 2em;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 0.6em; padding: 0 0.5em; font-weight: 700; font-size: 0.95rem; text-decoration: none; color: var(--text-primary); }
.brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6em;
  padding: 0.65em 1.1em; border-radius: 999px;
  font-size: 0.88rem; color: var(--text-dim); text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-item:hover { background: var(--bg-surface-3); color: var(--text-primary); }
.nav-item.active { background: var(--accent); color: var(--bg-void); font-weight: 700; }
.nav-item.active:hover { background: var(--accent-bright); }
.nav-item .badge-count {
  background: var(--crit); color: #fff; font-size: 0.66rem; font-weight: 700;
  padding: 0.1em 0.55em; border-radius: 999px; flex: none;
}
.nav-item.active .badge-count { background: var(--bg-void); color: var(--accent-bright); }
.nav-item-top { margin-bottom: 0.5em; }

/* Grup sidebar collapsible (native <details>, tanpa JS) */
.nav-group { margin-bottom: 1px; }
.nav-group-label {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6em 1.1em; font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 700;
}
.nav-group-label::-webkit-details-marker { display: none; }
.nav-group-label::after { content: "\203A"; transition: transform 0.15s ease; font-size: 0.9rem; }
.nav-group[open] .nav-group-label::after { transform: rotate(90deg); }
.nav-group-label:hover { color: var(--text-primary); }
.nav-group-items { display: flex; flex-direction: column; gap: 2px; padding-bottom: 4px; }

.profile {
  margin-top: auto; display: flex; align-items: center; gap: 0.7em;
  padding: 0.7em 0.9em; border-radius: 999px; background: var(--bg-surface-2); border: 1px solid var(--hairline);
}
.profile .avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--accent); color: var(--bg-void); font-weight: 700; font-size: 0.78rem;
  display: flex; align-items: center; justify-content: center;
}
.profile .who { font-size: 0.8rem; }
.profile .name { color: var(--text-primary); font-weight: 700; }
.profile .role { color: var(--text-dim); font-size: 0.73rem; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2em 2em; border-bottom: 1px solid var(--hairline);
  background: var(--bg-surface-2);
  position: sticky; top: 0; z-index: 5;
}
.topbar-title { font-weight: 700; font-size: 1.05rem; font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; }
.topbar-range { font-size: 0.8rem; color: var(--text-dim); border: 1px solid var(--hairline-strong); padding: 0.45em 1em; border-radius: 999px; }

.content { flex: 1; padding: 1.8em 2em; }
.app-footer {
  padding: 1.1em 2em; border-top: 1px solid var(--hairline);
  font-size: 0.76rem; color: var(--text-dim);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6em 1.4em;
}

/* ---------- Stat tiles ---------- */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 4px;
  overflow: hidden; margin-bottom: 1.6em;
}
.stat-card { background: var(--bg-surface); padding: 1.2em 1.3em; }
.stat-card .label { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.stat-card .value { font-size: 1.6rem; font-weight: 700; margin-top: 0.35em; }
.stat-card .delta { font-size: 0.8rem; margin-top: 0.3em; }
.stat-card .delta.up { color: var(--ok); }
.stat-card .delta.down { color: var(--crit); }
.stat-card .delta.flat { color: var(--text-dim); }

/* ---------- Panels ---------- */
.panel { background: var(--bg-surface-2); border: 1px solid var(--hairline); border-radius: 4px; padding: 1.3em 1.4em; }
.panel + .panel { margin-top: 1.4em; }
.panel-title { font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 1em; }
.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.4em; margin-bottom: 1.4em; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* ---------- Table ---------- */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.data-table th { text-align: left; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); padding: 0.6em 0.7em; border-bottom: 1px solid var(--hairline); }
.data-table td { padding: 0.7em 0.7em; border-bottom: 1px solid var(--hairline); color: var(--text-muted); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table td:first-child { color: var(--text-primary); font-weight: 600; }

/* ---------- Pills, chips, list rows ---------- */
.pill { font-size: 0.68rem; padding: 0.25em 0.7em; border-radius: 999px; font-weight: 700; letter-spacing: 0.02em; display: inline-block; }
.pill.ok { background: rgba(111,207,151,0.15); color: var(--ok); }
.pill.warn { background: rgba(232,163,61,0.15); color: var(--warn); }
.pill.crit { background: rgba(226,104,92,0.15); color: var(--crit); }
.pill.off { background: rgba(156,128,100,0.15); color: var(--text-dim); }

.chip-row { display: flex; gap: 0.6em; flex-wrap: wrap; margin-bottom: 1.3em; }
.chip { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.8rem; padding: 0.5em 1em; border-radius: 999px; background: var(--bg-surface-2); border: 1px solid var(--hairline); color: var(--text-muted); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; }
.chip.paused .dot { background: var(--text-dim); }
.chip.warn .dot { background: var(--warn); }

.list-row { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.6em 0; font-size: 0.86rem; }
.list-row + .list-row { border-top: 1px solid var(--hairline); }
.list-name { color: var(--text-primary); }
.list-meta { color: var(--text-dim); font-size: 0.76rem; margin-top: 0.15em; }

.breakdown-row { display: flex; justify-content: space-between; gap: 1em; padding: 0.55em 0; font-size: 0.87rem; }
.breakdown-row + .breakdown-row { border-top: 1px solid var(--hairline); }
.breakdown-row .k { color: var(--text-muted); }
.breakdown-row .v { color: var(--text-primary); font-weight: 600; }
.breakdown-row.total .k, .breakdown-row.total .v { color: var(--accent); font-weight: 700; }

/* ---------- Kanban ---------- */
.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 4px; overflow: hidden; }
@media (max-width: 900px) { .kanban { grid-template-columns: repeat(2, 1fr); } }
.kanban-col { background: var(--bg-surface-2); padding: 0.9em; display: flex; flex-direction: column; gap: 0.6em; }
.kanban-head { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); display: flex; justify-content: space-between; }
.kanban-card { background: var(--bg-surface); border: 1px solid var(--hairline); border-radius: 4px; padding: 0.6em 0.75em; }
.kanban-card .name { font-size: 0.8rem; color: var(--text-primary); font-weight: 600; }
.kanban-card .meta { font-size: 0.71rem; color: var(--text-dim); margin-top: 0.2em; }

/* ---------- Store cards ---------- */
.store-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 4px; overflow: hidden; margin-bottom: 1.4em; }
.store-card { background: var(--bg-surface-2); padding: 1.1em 1.2em; }
.store-card .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8em; gap: 0.6em; }
.store-card .pname { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); }
.store-card .srow { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 0.32em 0; color: var(--text-dim); }
.store-card .srow .v { color: var(--text-primary); font-weight: 600; }

/* ---------- Alert ---------- */
.alert { display: flex; gap: 0.9em; align-items: flex-start; background: rgba(232,163,61,0.09); border: 1px solid rgba(232,163,61,0.3); border-radius: 4px; padding: 0.9em 1.1em; margin-top: 1.4em; }
.alert .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); margin-top: 0.4em; flex: none; }
.alert .t { font-size: 0.85rem; color: var(--text-primary); font-weight: 600; }
.alert .d { font-size: 0.8rem; color: var(--text-dim); margin-top: 0.2em; }

/* ---------- Temp infra badge ---------- */
.temp-badge {
  display: inline-flex; align-items: center; gap: 0.5em;
  background: rgba(46,158,255,0.1); border: 1px solid var(--hairline-strong);
  color: var(--text-muted); font-size: 0.78rem; padding: 0.55em 1.1em; border-radius: 999px;
  margin-bottom: 1.4em;
}
.temp-badge b { color: var(--accent-2); }
.temp-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); flex: none; }

.live-badge {
  display: inline-flex; align-items: center; gap: 0.5em;
  background: rgba(74,222,128,0.1); border: 1px solid var(--ok);
  color: var(--text-muted); font-size: 0.78rem; padding: 0.55em 1.1em; border-radius: 999px;
  margin-bottom: 1.4em;
}
.live-badge b { color: var(--ok); }
.live-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; animation: pulse-dot 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .live-badge .dot { animation: none; } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ============ KANG MAS — WIDGET SUPPORT TEKNIS ============
   Diadaptasi dari 5. klien/02 - Ideku/web-system/mockup-ideku-ai-os.html
   (widget dipakai BARENG semua klien bizai.id, cuma variabel warna disesuaikan
   ke palet Genta -- lihat 1. administrasi/SOP-Kang-Mas.md §5 sebelum ubah). */
.km-fab{ position:fixed; right:22px; bottom:22px; z-index:950; width:58px; height:58px; border-radius:50%; background:linear-gradient(135deg, var(--accent-bright), var(--accent)); color:#fff; border:none; cursor:pointer; font-size:24px; display:flex; align-items:center; justify-content:center; box-shadow:0 16px 34px -10px rgba(0,0,0,0.55); transition:transform .15s ease; }
.km-fab:hover{ transform:translateY(-2px) scale(1.03); }
.km-fab .km-fab-dot{ position:absolute; top:1px; right:1px; width:14px; height:14px; border-radius:50%; background:var(--ok); border:2.5px solid var(--bg-void); }
.km-fab-label{ position:fixed; right:88px; bottom:38px; z-index:949; background:var(--bg-surface); color:var(--text-primary); border:1px solid var(--hairline-strong); border-radius:100px; padding:9px 10px 9px 16px; font-size:12px; font-weight:700; box-shadow:0 10px 30px -8px rgba(0,0,0,0.4); cursor:pointer; display:flex; align-items:center; gap:8px; white-space:nowrap; animation:kmLabelPop .3s ease; }
.km-fab-label-close{ background:var(--hairline-strong); border:none; border-radius:50%; width:16px; height:16px; font-size:9px; color:var(--text-primary); cursor:pointer; display:flex; align-items:center; justify-content:center; flex:0 0 auto; padding:0; }
@keyframes kmLabelPop{ from{ opacity:0; transform:translateX(8px); } to{ opacity:1; transform:translateX(0); } }
@media (max-width:480px){ .km-fab-label{ display:none; } }

.km-chat{ position:fixed; right:22px; bottom:22px; z-index:960; width:330px; max-height:min(540px,72vh); background:var(--bg-surface); border:1px solid var(--hairline); border-radius:18px; box-shadow:0 20px 50px -12px rgba(0,0,0,0.5); display:none; flex-direction:column; overflow:hidden; }
.km-chat.open{ display:flex; animation:kmPop .18s ease; }
@keyframes kmPop{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
.km-chat-head{ background:linear-gradient(135deg, var(--accent-bright), var(--accent)); color:#fff; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex:0 0 auto; }
.km-chat-head .who{ display:flex; align-items:center; gap:10px; }
.km-chat-head .av{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; font-size:16px; flex:0 0 auto; }
.km-chat-head .n{ font-size:13px; font-weight:700; }
.km-chat-head .st{ font-size:10px; opacity:0.9; display:flex; align-items:center; gap:5px; }
.km-chat-head .st::before{ content:''; width:6px; height:6px; border-radius:50%; background:#5CE68C; }
.km-chat-close{ width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.18); border:none; color:#fff; cursor:pointer; font-size:12px; flex:0 0 auto; }
.km-chat-body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:var(--bg-surface-2); min-height:200px; }
.km-msg{ max-width:85%; display:flex; }
.km-msg.in{ align-self:flex-start; }
.km-msg.out{ align-self:flex-end; }
.km-msg .bubble{ padding:9px 13px; border-radius:14px; font-size:12.5px; line-height:1.55; white-space:pre-wrap; }
.km-msg.in .bubble{ background:var(--bg-surface); border:1px solid var(--hairline); border-bottom-left-radius:4px; color:var(--text-primary); }
.km-msg.out .bubble{ background:linear-gradient(135deg, var(--accent-bright), var(--accent)); color:#fff; border-bottom-right-radius:4px; }
.km-msg.typing .bubble{ color:var(--text-dim); font-style:italic; }
.km-chat-foot{ border-top:1px solid var(--hairline); padding:10px; display:flex; gap:8px; background:var(--bg-surface); flex:0 0 auto; }
.km-chat-foot input{ flex:1; border:1px solid var(--hairline-strong); border-radius:100px; padding:9px 15px; font-size:12.5px; background:var(--bg-surface-2); color:var(--text-primary); font-family:inherit; }
.km-chat-foot button{ width:36px; height:36px; border-radius:50%; border:none; background:linear-gradient(135deg, var(--accent-bright), var(--accent)); color:#fff; cursor:pointer; font-size:14px; flex:0 0 auto; }
.km-attach-btn{ background:var(--bg-surface-2)!important; border:1px solid var(--hairline-strong)!important; font-size:17px!important; line-height:1!important; }
.km-image-preview{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-top:1px solid var(--hairline); background:var(--bg-surface-2); flex:0 0 auto; }
.km-image-preview[hidden]{ display:none; }
.km-image-preview img{ width:44px; height:44px; object-fit:cover; border-radius:8px; border:1px solid var(--hairline-strong); }
.km-image-preview button{ width:22px; height:22px; border-radius:50%; border:none; background:var(--hairline-strong); color:var(--text-primary); cursor:pointer; font-size:11px; margin-left:auto; }
.km-msg-img{ display:block; max-width:100%; border-radius:10px; margin-bottom:6px; }
@media (max-width:400px){ .km-chat{ width:calc(100vw - 32px); right:16px; } .km-fab{ right:16px; } }

/* ---------- Tutorial accordion ---------- */
.tut-intro { max-width: 72ch; color: var(--text-muted); font-size: 0.92rem; line-height: 1.65; }
.tut-intro + .tut-intro { margin-top: 1em; }
.tut-flow { display: flex; flex-direction: column; gap: 0.6em; margin-top: 1em; counter-reset: tut-step; }
.tut-flow-item { display: flex; gap: 0.9em; align-items: flex-start; }
.tut-flow-item::before {
  counter-increment: tut-step; content: counter(tut-step);
  flex: none; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--accent); color: var(--bg-void);
  display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700;
}
.tut-flow-item p { margin: 0; color: var(--text-muted); font-size: 0.88rem; padding-top: 0.15em; }
.tut-flow-item b { color: var(--text-primary); }

.tut-item {
  background: var(--bg-surface); border: 1px solid var(--hairline); border-radius: 4px;
  margin-bottom: 1px;
}
.tut-item summary {
  list-style: none; cursor: pointer; user-select: none; padding: 0.9em 1.1em;
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
}
.tut-item summary::-webkit-details-marker { display: none; }
.tut-item summary::after { content: "\203A"; transition: transform 0.15s ease; color: var(--text-dim); font-size: 1rem; flex: none; }
.tut-item[open] summary::after { transform: rotate(90deg); }
.tut-item summary .tname { font-weight: 600; color: var(--text-primary); font-size: 0.92rem; }
.tut-item summary .tleft { display: flex; align-items: center; gap: 0.8em; }
.tut-item-body { padding: 0 1.1em 1.1em; }
.tut-item-body .row { margin-bottom: 0.8em; }
.tut-item-body .row:last-child { margin-bottom: 0; }
.tut-item-body .label { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.3em; }
.tut-item-body .val { font-size: 0.87rem; color: var(--text-muted); line-height: 1.6; }

/* ---------- Laporan Iklan: tab dua-lapis, saldo, event ---------- */
.tab-bar { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 1px; }
.tab-bar .tab-btn {
  background: var(--bg-surface); border: 1px solid var(--hairline); border-bottom: none;
  border-radius: 6px 6px 0 0; padding: 0.6em 1.1em; font-size: 0.82rem; color: var(--text-muted);
  cursor: pointer; font-family: inherit;
}
.tab-bar .tab-btn .tab-count {
  background: var(--bg-surface-3); color: var(--text-dim); padding: 0.1em 0.55em; border-radius: 999px;
  font-size: 0.7rem; margin-left: 0.5em;
}
.tab-bar.stage-tab-bar .tab-btn.active { background: var(--accent); color: var(--bg-void); font-weight: 700; border-color: var(--accent); }
.tab-bar.stage-tab-bar .tab-btn.active .tab-count { background: var(--bg-void); color: var(--accent-bright); }
.tab-bar.product-tab-bar .tab-btn.active { background: var(--accent-2); color: #fff; font-weight: 700; border-color: var(--accent-2); }
.tab-bar.product-tab-bar .tab-btn.active .tab-count { background: rgba(0,0,0,0.25); color: #fff; }
.tab-panel { background: var(--bg-surface-2); border: 1px solid var(--hairline); border-radius: 0 4px 4px 4px; padding: 1.3em; margin-bottom: 1.4em; }
.tab-panel[hidden] { display: none; }

.saldo-aman { color: var(--ok); }
.saldo-menipis { color: var(--warn); }
.saldo-kritis { color: var(--crit); }

.event-tag { font-size: 0.7rem; font-weight: 700; padding: 0.2em 0.6em; border-radius: 4px; }
.event-tag.off { background: rgba(255,92,92,0.15); color: var(--crit); }
.event-tag.scale_ok { background: rgba(74,222,128,0.15); color: var(--ok); }
.event-tag.scale_aggressive { background: rgba(251,191,36,0.15); color: var(--warn); }

.chart-wrap { position: relative; height: 260px; margin-bottom: 1.2em; }
.chart-wrap-title { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 0.6em; }

.sublink-card { display: flex; align-items: center; gap: 1.2em; background: var(--bg-surface); border: 1px solid var(--hairline); border-radius: 4px; padding: 1.1em 1.3em; margin-bottom: 1.4em; flex-wrap: wrap; }
.sublink-card .sublink-desc h3 { margin: 0 0 0.3em; font-size: 0.92rem; color: var(--text-primary); font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; }
.sublink-card .sublink-desc p { margin: 0; font-size: 0.82rem; color: var(--text-dim); max-width: 60ch; }
.sublink-btn { flex: none; background: var(--accent); color: var(--bg-void); font-weight: 700; text-decoration: none; padding: 0.7em 1.3em; border-radius: 4px; font-size: 0.85rem; }

.decision-card { border: 1px solid var(--hairline); border-radius: 4px; padding: 1em 1.2em; margin-bottom: 0.9em; background: var(--bg-surface); }
.decision-card:last-child { margin-bottom: 0; }
.decision-card .dhead { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin-bottom: 0.6em; flex-wrap: wrap; }
.decision-card .dtitle { font-weight: 600; color: var(--text-primary); font-size: 0.88rem; }
.decision-card .ddate { font-size: 0.74rem; color: var(--text-dim); }
.decision-card .drow { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.4em; }
.decision-card .drow b { color: var(--text-primary); }

/* ---------- Kalender Konten: grid kalender + wizard AI generator (futuristik) ---------- */
.cal-card { background: var(--bg-surface); border: 1px solid var(--hairline); border-radius: 10px; padding: 1.3em; margin-bottom: 1.4em; position: relative; overflow: hidden; }
.cal-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); opacity: 0.7; }
.cal-card-title { font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-size: 1rem; color: var(--text-primary); margin: 0; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 1em; }
.cal-nav-btn { background: rgba(255,255,255,0.03); border: 1px solid var(--hairline-strong); color: var(--text-primary); width: 32px; height: 32px; border-radius: 6px; cursor: pointer; font-size: 0.95rem; line-height: 1; transition: all 0.15s ease; }
.cal-nav-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cal-nav-btn:disabled { opacity: 0.3; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 6px; overflow: hidden; }
.cal-month-group { display: contents; }
.cal-day-head { text-align: center; padding: 0.5em 0.2em; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); background: var(--bg-surface-2); }
.cal-cell { background: var(--bg-surface); min-height: 64px; padding: 0.4em; }
.cal-cell.is-empty { background: var(--bg-void); }
.cal-cell .daynum { font-size: 0.72rem; color: var(--text-dim); }
.cal-dots { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 0.4em; }
.cal-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cal-dot.tofu { background: var(--accent-2); box-shadow: 0 0 6px var(--accent-2); }
.cal-dot.mofu { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.cal-dot.bofu { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.cal-dot.none { background: var(--text-dim); }
.cal-legend { display: flex; gap: 1.3em; margin-top: 0.9em; font-size: 0.74rem; color: var(--text-dim); flex-wrap: wrap; }
.cal-legend span { display: inline-flex; align-items: center; gap: 0.4em; }
.cal-legend .cal-dot { box-shadow: none; }

.wizard-panel {
  background: linear-gradient(160deg, var(--bg-surface), var(--bg-surface-2));
  border: 1px solid var(--hairline-strong); border-radius: 12px; padding: 1.6em;
  box-shadow: 0 0 50px rgba(255,122,41,0.06), inset 0 1px 0 rgba(255,255,255,0.03);
  position: relative; overflow: hidden; margin-bottom: 1.4em;
}
.wizard-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.wizard-title { font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-size: 1.1rem; color: var(--text-primary); margin-bottom: 0.2em; }
.wizard-sub { font-size: 0.82rem; color: var(--text-dim); margin-bottom: 1.4em; }
.wiz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2em 1.6em; margin-bottom: 1.2em; }
.wiz-field label { font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.5em; display: block; }
.wiz-field input[type=date], .wiz-field input[type=number], .wiz-field select {
  width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--hairline-strong); border-radius: 6px;
  padding: 0.6em 0.8em; color: var(--text-primary); font-family: inherit; font-size: 0.88rem;
}
.wiz-field input:focus, .wiz-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,122,41,0.15); }
.wiz-chip-group { display: flex; gap: 0.5em; flex-wrap: wrap; }
.wiz-chip {
  padding: 0.5em 1.1em; border-radius: 999px; border: 1px solid var(--hairline-strong);
  background: rgba(255,255,255,0.02); color: var(--text-muted); font-size: 0.8rem; cursor: pointer;
  user-select: none; transition: all 0.15s ease;
}
.wiz-chip:hover { border-color: var(--accent); color: var(--text-primary); }
.wiz-chip.active { background: linear-gradient(135deg, var(--accent), var(--accent-bright)); color: var(--bg-void); border-color: var(--accent); font-weight: 700; box-shadow: 0 0 16px rgba(255,122,41,0.35); }
.wiz-slider-row { margin-bottom: 1em; }
.wiz-slider-row .slabel { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.4em; }
.wiz-slider-row .sval { color: var(--accent); font-weight: 700; font-family: "SFMono-Regular", Consolas, monospace; }
.wiz-slider-row input[type=range] { width: 100%; accent-color: var(--accent); }
.wiz-total-badge { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.78rem; color: var(--text-dim); padding: 0.4em 0.9em; border: 1px solid var(--hairline-strong); border-radius: 999px; margin-top: 0.4em; }
.wiz-total-badge b { color: var(--text-primary); font-family: "SFMono-Regular", Consolas, monospace; }
.wiz-generate-btn {
  width: 100%; padding: 0.95em; border-radius: 8px; border: none; margin-top: 0.6em;
  background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; font-weight: 700; font-size: 0.95rem;
  cursor: pointer; box-shadow: 0 0 26px rgba(46,158,255,0.25); letter-spacing: 0.02em; font-family: inherit;
}
.wiz-generate-btn:hover:not(:disabled) { filter: brightness(1.1); }
.wiz-generate-btn:disabled { opacity: 0.55; cursor: wait; }
.wiz-status { font-size: 0.82rem; color: var(--text-dim); margin-top: 0.8em; min-height: 1.2em; }
.wiz-status.err { color: var(--crit); }

.gen-result-card { background: var(--bg-surface); border: 1px solid var(--hairline); border-left: 3px solid var(--accent); border-radius: 6px; padding: 1em 1.2em; margin-bottom: 0.8em; }
.gen-result-card .grhead { display: flex; justify-content: space-between; gap: 1em; flex-wrap: wrap; align-items: baseline; }
.gen-result-card .grtitle { font-weight: 700; color: var(--text-primary); font-size: 0.92rem; }
.gen-result-card .grmeta { font-size: 0.72rem; color: var(--text-dim); margin: 0.3em 0 0.6em; }
.gen-result-card .grcaption { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.6em; line-height: 1.55; }
.gen-result-card .grtags { font-size: 0.78rem; color: var(--accent-2); }

/* ---------- Chart labels (SVG) ---------- */
.chart-label { font-size: 11px; fill: var(--text-primary); }
.chart-label-muted { font-size: 10.5px; fill: var(--text-dim); }