/* ============================================================
   elico media – Wiedervorlage · App-Layout
   Tokens & Komponenten gemäss elico-design-system
   ============================================================ */

/* Geomanist – Dateien unter assets/fonts/geomanist/ ablegen (lizenziert).
   Ohne Dateien greift automatisch der System-Fallback. */
@font-face { font-family:'Geomanist'; src:url('../fonts/geomanist/geomanist-light.woff2')   format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Geomanist'; src:url('../fonts/geomanist/geomanist-regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Geomanist'; src:url('../fonts/geomanist/geomanist-medium.woff2')  format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Geomanist'; src:url('../fonts/geomanist/geomanist-bold.woff2')    format('woff2'); font-weight:700; font-display:swap; }

:root{
  --bg:#08090a; --bg-soft:#0d0f12; --surface:#111317; --surface-2:#15181d; --surface-3:#202733;
  --text:#f5f5f2; --text-soft:#d9d9d2; --muted:#b8b8ae; --muted-2:#747e8d;
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.16);
  --brand:#e25304; --brand-rgb:226,83,4; --brand-2:#ff7a1b; --brand-dark:#ac3e03; --brand-soft:rgba(226,83,4,.13);
  --ok:#4ade80; --warn:#f59e0b; --danger:#f87171; --info:#28B8DA; --accent-teal:#02ab84;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;
  --shadow:0 30px 80px rgba(0,0,0,.34); --shadow-soft:0 18px 50px rgba(0,0,0,.24);
  --container:1180px; --sidebar-w:260px; --sidebar-collapsed-w:64px;
  --transition:.22s cubic-bezier(.4,0,.2,1); --ease:cubic-bezier(.2,.8,.2,1);
  --h3:clamp(22px,2vw,30px); --text-lg:clamp(18px,1.7vw,21px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; font-size:16px; }
body{ margin:0; min-height:100vh; overflow-x:hidden; background:var(--bg); color:var(--text);
  font-family:'Geomanist', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; } a:hover{ color:var(--brand); }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; cursor:pointer; }
::selection{ background:rgba(var(--brand-rgb),.35); color:#fff; }
code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--surface-3); padding:2px 7px; border-radius:6px; font-size:.85em; color:var(--text-soft); }

/* ---------- Buttons ---------- */
.btn-primary,.btn-ghost,.btn-ai{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:var(--radius-pill); border:1px solid transparent; font-weight:800; cursor:pointer;
  transition:transform var(--ease) .18s, background var(--ease) .18s, color var(--ease) .18s; }
.btn-primary{ min-height:54px; padding:0 24px; color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); box-shadow:0 18px 48px rgba(var(--brand-rgb),.24); }
.btn-ghost{ min-height:54px; padding:0 22px; color:#fff; background:rgba(255,255,255,.06); border-color:var(--line); }
.btn-primary:hover,.btn-ghost:hover{ transform:translateY(-2px); color:#fff; }
.btn-sm{ min-height:42px; padding:0 16px; font-size:15px; }
.btn-block{ width:100%; margin-top:18px; }
.btn-danger{ background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.35); color:var(--danger); }
.btn-ai{ min-height:42px; padding:0 18px; font-size:15px; color:#fff;
  background:linear-gradient(135deg,#15a34a,#22c55e); box-shadow:0 12px 30px rgba(34,197,94,.22); }
.btn-ai:hover{ transform:translateY(-2px); color:#fff; }
.btn-ai:disabled{ opacity:.6; cursor:default; transform:none; }
.detail-static{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:12px 14px; color:var(--text); white-space:pre-wrap; line-height:1.5; }
.detail-static.detail-title{ font-size:17px; font-weight:800; }
.icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:transparent; color:var(--muted);
  transition:border-color var(--transition), color var(--transition); }
.icon-btn:hover{ border-color:var(--line-strong); color:var(--text); }

/* ---------- Inputs ---------- */
.input,.select,textarea.input{ width:100%; padding:11px 13px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--text); font-size:14px; font-family:inherit; outline:none; color-scheme:dark;
  transition:border-color var(--transition), box-shadow var(--transition); }
.input:focus{ border-color:rgba(var(--brand-rgb),.5); box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12); }
.input::placeholder{ color:var(--muted-2); }
textarea.input{ resize:vertical; line-height:1.55; }
/* API-Key maskieren, ohne type=password (verhindert Passwort-Autofill) */
.input-secret{ -webkit-text-security:disc; text-security:disc; }
.label{ display:block; margin:14px 0 6px; color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
.label:first-child{ margin-top:0; }
.req{ color:var(--brand); }
.select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23747e8d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; }
.check-row{ display:flex; align-items:center; gap:8px; margin-top:14px; color:var(--muted); font-size:14px; }
.check-row input{ accent-color:var(--brand); width:16px; height:16px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.inline-row{ display:flex; gap:10px; align-items:stretch; }
.inline-row .input{ flex:1; }

/* ---------- Cards ---------- */
.card{ border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-soft); padding:24px; }
.card-title{ font-size:var(--h3); font-weight:800; margin:0 0 4px; letter-spacing:-.02em; }
.card-desc{ color:var(--muted); font-size:14px; margin:0 0 16px; }

/* ---------- Alerts / Badges ---------- */
.alert{ padding:13px 15px; border-radius:var(--radius-md); font-size:14px; margin-bottom:14px; border:1px solid var(--line); }
.alert-ok{ background:rgba(74,222,128,.12); border-color:rgba(74,222,128,.3); color:var(--ok); }
.alert-warn{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.3); color:var(--warn); }
.alert-danger{ background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.3); color:var(--danger); }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border:1px solid var(--line);
  border-radius:var(--radius-pill); background:var(--surface-2); color:var(--muted); font-size:11px; font-weight:700; }
.pill-ok{ border-color:rgba(74,222,128,.3); color:var(--ok); background:rgba(74,222,128,.10); }
.pill-danger{ border-color:rgba(248,113,113,.3); color:var(--danger); background:rgba(248,113,113,.10); }
.pill-info{ border-color:rgba(40,184,218,.3); color:var(--info); background:rgba(40,184,218,.10); }
.pill-muted{ border-color:var(--line); color:var(--muted-2); background:var(--surface-2); }
.status-badge{ display:inline-flex; align-items:center; padding:5px 9px; border:1px solid var(--status-color,var(--line));
  border-radius:var(--radius-pill); background:transparent; color:var(--status-color,var(--muted)); font-size:11px; font-weight:900; letter-spacing:.02em; }
.sec-label{ color:var(--brand); font-size:13px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; margin:0 0 10px; }

/* ============================================================
   Auth-Seiten (Login / Setup)
   ============================================================ */
.auth-body{ display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px; position:relative; }
.auth-glow{ position:fixed; top:-30%; left:50%; transform:translateX(-50%); width:1100px; height:800px; pointer-events:none; filter:blur(10px);
  background:radial-gradient(circle at 50% 40%, rgba(var(--brand-rgb),.22), rgba(var(--brand-rgb),.06) 35%, transparent 62%); }
.auth-card{ width:100%; max-width:460px; position:relative; z-index:1; }
.brand-mark{ font-weight:850; letter-spacing:-.04em; font-size:20px; color:#fff; margin-bottom:18px; }
.brand-mark span{ color:var(--brand); }
.auth-title{ font-size:clamp(30px,4.5vw,44px); font-weight:900; letter-spacing:-.05em; line-height:1.05; margin:0 0 10px; }
.auth-title em{ color:var(--brand); font-style:normal; }
.auth-sub{ color:var(--muted); font-size:14px; margin:0 0 20px; line-height:1.6; }
.auth-foot{ color:var(--muted-2); font-size:12px; margin-top:18px; text-align:center; }
.form-section-label{ color:var(--muted-2); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.1em;
  margin:22px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line); }

/* ============================================================
   App-Shell
   ============================================================ */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{ position:fixed; top:0; left:0; height:100vh; width:var(--sidebar-w); background:var(--surface);
  border-right:1px solid var(--line); display:flex; flex-direction:column; z-index:100; transition:transform var(--transition); }
.sidebar-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 18px; border-bottom:1px solid var(--line); }
.nav-logo{ font-weight:850; letter-spacing:-.04em; font-size:22px; color:#fff; }
.nav-logo span{ color:var(--brand); }
.sidebar-toggle{ display:inline-flex; }
.sidebar-nav{ flex:1; padding:16px 12px; overflow-y:auto; }
.nav-group-label{ color:var(--muted-2); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.1em; padding:8px 10px 10px; }
.nav-link{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius-md); color:var(--muted);
  font-weight:700; font-size:14px; position:relative; transition:background var(--transition), color var(--transition); }
.nav-link:hover{ background:var(--surface-2); color:var(--text); }
.nav-link.active{ background:var(--brand-soft); color:var(--brand-2); }
.nav-link.active::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:3px; background:var(--brand); }
.sidebar-foot{ padding:12px; border-top:1px solid var(--line); }
.sidebar-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); z-index:99; }

/* ---------- Eingeklappte Sidebar (nur Desktop) ---------- */
@media (min-width:821px){
  body.sidebar-collapsed .sidebar{ width:var(--sidebar-collapsed-w); }
  body.sidebar-collapsed .main-wrap,
  body.sidebar-collapsed .site-footer{ margin-left:var(--sidebar-collapsed-w); }
  body.sidebar-collapsed .nav-logo,
  body.sidebar-collapsed .nav-link span,
  body.sidebar-collapsed .nav-group-label{ display:none; }
  body.sidebar-collapsed .sidebar-head{ justify-content:center; padding:20px 0; }
  body.sidebar-collapsed .nav-link{ justify-content:center; padding:10px 0; gap:0; }
  body.sidebar-collapsed .sidebar-nav{ padding:16px 8px; }
  body.sidebar-collapsed .sidebar-foot{ padding:12px 8px; }
}

.main-wrap{ flex:1; margin-left:var(--sidebar-w); transition:margin-left var(--transition); min-width:0; position:relative; z-index:1; }
#cstage{ max-width:var(--container); margin:0 auto; padding:40px 36px 80px; }

.site-footer{ margin-left:var(--sidebar-w); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  padding:20px 36px calc(20px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:#070809;
  color:var(--muted-2); font-size:12px; font-weight:700; }

/* ---------- Hero ---------- */
.report-hero{ position:relative; text-align:center; padding:48px 28px 32px; margin-bottom:20px; }
.hero-mark{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:78px; height:78px; margin:0 auto 18px; border-radius:50%; color:var(--brand-2);
  background:radial-gradient(circle at 50% 35%, rgba(var(--brand-rgb),.22), rgba(var(--brand-rgb),.05) 70%);
  border:1px solid rgba(var(--brand-rgb),.35); box-shadow:0 14px 40px rgba(var(--brand-rgb),.22); }
.hero-mark svg{ position:relative; z-index:1; filter:drop-shadow(0 2px 6px rgba(var(--brand-rgb),.4)); }
.hero-mark-ring{ position:absolute; inset:-5px; border-radius:50%; pointer-events:none;
  border:2px solid transparent; border-top-color:var(--brand); border-right-color:var(--brand-2);
  opacity:.7; animation:wv-spin 6s linear infinite; }
@keyframes wv-spin{ to{ transform:rotate(360deg); } }
.report-hero h1{ font-size:clamp(30px,4.5vw,54px); font-weight:900; letter-spacing:-.055em; margin:0; line-height:1.04; }
.report-hero h1 span{ color:var(--brand); }
.hero-cta{ margin-top:24px; display:inline-flex; align-items:center; gap:8px; }
.hero-date{ color:var(--muted); margin:12px 0 0; font-size:15px; font-weight:600; position:relative; }
.page-head{ margin-bottom:22px; } .page-title{ font-size:clamp(28px,4vw,44px); font-weight:900; letter-spacing:-.04em; margin:0; }

/* ---------- Schnellerfassung ---------- */
.capture-card{ margin-bottom:24px; }
.capture-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:10px; }
.capture-tools{ display:flex; gap:8px; }
.capture-text{ font-size:16px; font-weight:600; margin-bottom:10px; }
.capture-body{ margin-bottom:14px; }
.capture-row{ display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:12px; align-items:end; }
.capture-field .label{ margin-top:0; }
.capture-save{ min-height:46px; }
.ai-hint{ margin-top:12px; font-size:13px; color:var(--muted); display:none; }
.ai-hint.show{ display:block; }
.ai-hint.is-live{ color:var(--accent-teal); }
.mic-active{ border-color:var(--accent-teal)!important; color:var(--accent-teal)!important; }

/* ---------- Filter-Tabs ---------- */
.tabbar{ display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap; }
.tab{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border:1px solid var(--line);
  border-radius:var(--radius-pill); background:var(--surface); color:var(--muted); cursor:pointer;
  font-size:14px; font-weight:800; letter-spacing:-.01em; transition:all var(--transition); }
.tab:hover{ border-color:var(--line-strong); color:var(--text); }
.tab.is-active{ background:var(--brand-soft); border-color:rgba(var(--brand-rgb),.5); color:var(--brand-2); }
.tab-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px;
  border-radius:var(--radius-pill); background:var(--surface-3); color:var(--muted); font-size:12px; font-weight:800; }
.tab.is-active .tab-badge{ background:rgba(var(--brand-rgb),.22); color:var(--brand-2); }
.tab-badge-danger{ background:rgba(248,113,113,.16); color:var(--danger); }
.tab-badge-ok{ background:rgba(74,222,128,.16); color:var(--ok); }
.empty-state{ text-align:center; color:var(--muted-2); font-size:15px; font-weight:600; padding:48px 16px; }

/* ---------- API-Kosten ---------- */
.cost-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px; }
.cost-tile{ display:flex; flex-direction:column; gap:6px; padding:22px 24px; border:1px solid var(--line);
  border-radius:var(--radius-lg); background:var(--surface); }
.cost-label{ font-size:13px; font-weight:800; color:var(--muted); }
.cost-num{ font-size:34px; font-weight:900; letter-spacing:-.03em; line-height:1; color:var(--brand-2); }
.cost-sub{ font-size:12px; color:var(--muted-2); font-weight:700; }
.cost-table{ width:100%; border-collapse:collapse; font-size:14px; }
.cost-table th{ text-align:left; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted-2); padding:8px 10px; border-bottom:1px solid var(--line); }
.cost-table td{ padding:11px 10px; border-bottom:1px solid var(--line); color:var(--text); }
.cost-table tr:last-child td{ border-bottom:none; }
.cost-table .r{ text-align:right; }
.cost-table .muted{ color:var(--muted-2); font-size:12px; }
#byModel, #byMonth{ overflow-x:auto; }

/* ---------- Notiz-Listen ---------- */
.note-section{ margin-bottom:24px; }
.note-section[hidden]{ display:none; }
.section-title{ display:flex; align-items:center; gap:10px; font-size:15px; font-weight:900; letter-spacing:.02em;
  text-transform:uppercase; color:var(--muted); margin:0 0 12px; }
.section-title .count{ color:var(--muted-2); font-weight:700; }
.note-card{ display:flex; align-items:flex-start; gap:14px; padding:16px 18px; border:1px solid var(--line);
  border-radius:var(--radius-lg); background:var(--surface); margin-bottom:10px; transition:border-color var(--transition), transform var(--transition); }
.note-card:hover{ border-color:var(--line-strong); transform:translateY(-1px); }
.note-card.is-overdue{ border-left:3px solid var(--danger); }
.note-card.is-today{ border-left:3px solid var(--brand); }
.note-card.is-done{ opacity:.6; }
.note-check{ flex:none; width:24px; height:24px; border-radius:50%; border:2px solid var(--line-strong); background:transparent;
  display:flex; align-items:center; justify-content:center; margin-top:2px; transition:border-color var(--transition), background var(--transition); }
.note-check:hover{ border-color:var(--ok); }
.note-check.done{ background:var(--ok); border-color:var(--ok); color:#06210f; }
.note-main{ flex:1; min-width:0; cursor:pointer; }
.note-title{ font-size:16px; font-weight:700; color:var(--text); margin:0 0 4px; line-height:1.35; word-break:break-word; }
.note-card.is-done .note-title{ text-decoration:line-through; }
.note-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12px; color:var(--muted-2); }
.note-time{ display:inline-flex; align-items:center; gap:5px; font-weight:700; }
.note-time.overdue{ color:var(--danger); }
.note-snippet{ color:var(--muted); font-size:13px; margin-top:6px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.prio-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.prio-1{ background:var(--warn); } .prio-2{ background:var(--danger); }
.note-actions{ flex:none; display:flex; gap:6px; }
.empty-hint{ color:var(--muted-2); font-size:14px; padding:8px 2px; }

/* ---------- Modal ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); z-index:200; }
.modal{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:201; width:92vw; max-width:600px; max-height:88vh;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-xl); box-shadow:var(--shadow);
  display:flex; flex-direction:column; overflow:hidden; }
.modal[hidden],.modal-overlay[hidden]{ display:none; }
.modal-header{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); }
.modal-header h3{ margin:0; font-size:18px; font-weight:800; }
.modal-body{ padding:22px; overflow-y:auto; }
.detail-section{ margin-bottom:20px; }
.detail-label{ font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-2); margin-bottom:8px; }
.timeline{ position:relative; padding-left:18px; }
.timeline-item{ position:relative; padding:0 0 14px 0; border-left:2px solid var(--line); padding-left:16px; margin-left:2px; }
.timeline-item::before{ content:""; position:absolute; left:-6px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--brand); }
.timeline-item.is-meta::before{ background:var(--muted-2); }
.timeline-item.is-meta .timeline-text{ color:var(--muted); font-style:italic; }
.capture-row.two{ grid-template-columns:1fr 1fr; }
.timeline-date{ font-size:11px; color:var(--muted-2); font-weight:700; }
.timeline-text{ font-size:14px; color:var(--text-soft); white-space:pre-wrap; line-height:1.5; margin-top:2px; }
.detail-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.cal-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.export-wrap{ display:flex; flex-direction:column; gap:14px; margin-top:8px; }
.export-group{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-md); padding:12px 14px; }
.export-label{ display:block; font-size:12px; font-weight:800; letter-spacing:.02em; color:var(--muted); margin-bottom:8px; }

/* ---------- Settings ---------- */
.settings-card{ margin-bottom:18px; }
.settings-danger{ border-color:rgba(248,113,113,.25); }
.settings-actions{ margin:6px 0 22px; }
.kv-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--muted); }
.kv-row:last-of-type{ border-bottom:0; }

/* ---------- Toast ---------- */
.toast-wrap{ position:fixed; bottom:24px; right:24px; z-index:300; display:flex; flex-direction:column; gap:10px; }
.toast{ padding:13px 18px; border-radius:var(--radius-md); background:var(--surface-2); border:1px solid var(--line-strong);
  color:var(--text); font-size:14px; font-weight:600; box-shadow:var(--shadow-soft); animation:toastIn .25s var(--ease); max-width:340px; }
.toast.ok{ border-color:rgba(74,222,128,.4); } .toast.err{ border-color:rgba(248,113,113,.4); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:560px){ .tabbar{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; } .tab{ flex:0 0 auto; } }
@media (max-width:900px){ .capture-row{ grid-template-columns:1fr 1fr; } .capture-save{ grid-column:1 / -1; } }
@media (max-width:820px){
  .sidebar{ transform:translateX(-100%); }
  .sidebar.open{ transform:none; }
  .sidebar-overlay.show{ display:block; }
  .main-wrap, .site-footer{ margin-left:0; }
  .sidebar-toggle{ display:inline-flex; }
  #cstage{ padding:24px 18px 80px; }
  .mobile-topbar{ display:flex; }
}
@media (max-width:560px){
  .capture-row{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .note-actions{ flex-direction:column; }
  .cost-tiles{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } }

/* Mobile-Topbar (Burger) – wird per JS eingeblendet */
.mobile-topbar{ display:none; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:90; background:rgba(8,9,10,.82); backdrop-filter:blur(18px); }
.mobile-topbar .nav-logo{ font-size:18px; }