:root {
  --bg:#0b0f17; --side:#0e131c; --card:#121826; --card2:#161d2d; --line:#1f2737; --line2:#2a3447;
  --fg:#e5e7eb; --fg2:#c3c9d4; --dim:#8b95a7; --dim2:#67718a;
  --accent:#3b9eff; --accent2:#2b86e0; --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444; --violet:#a78bfa;
  --r:14px; --r2:10px; --shadow:0 1px 0 rgba(255,255,255,.02) inset;
}
* { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body { background:var(--bg); color:var(--fg); font:15px/1.5 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
code { background:var(--card2); border:1px solid var(--line); border-radius:5px; padding:1px 6px; font-size:13px; }

/* ---------- Layout */
.shell { display:flex; min-height:100vh; }
aside.side { width:250px; flex:none; background:var(--side); border-right:1px solid var(--line); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:12px; padding:22px 22px 18px; font-weight:700; font-size:17px; color:#fff; border-bottom:1px solid var(--line); }
.brand .logo { width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,var(--accent),#7c3aed); display:grid; place-items:center; color:#fff; }
nav.menu { padding:12px; display:flex; flex-direction:column; gap:2px; }
nav.menu a { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--r2); color:var(--fg2); font-size:15px; }
nav.menu a svg { width:20px; height:20px; color:var(--dim); flex:none; }
nav.menu a:hover { background:var(--card2); text-decoration:none; color:#fff; }
nav.menu a.active { background:var(--card2); color:#fff; box-shadow:inset 0 0 0 1px var(--line2); } nav.menu a.active svg { color:#fff; }
.side .spacer { flex:1; }
.side .bottom { border-top:1px solid var(--line); padding:14px 18px; display:flex; align-items:center; gap:12px; }
.avatar { width:36px; height:36px; border-radius:50%; background:var(--card2); border:1px solid var(--line2); display:grid; place-items:center; font-weight:600; color:var(--fg2); }
.who { flex:1; line-height:1.2; } .who b { display:block; font-weight:600; } .who span { color:var(--dim); font-size:13px; }
.iconbtn { background:none; border:none; color:var(--dim); cursor:pointer; padding:6px; border-radius:8px; display:grid; place-items:center; } .iconbtn:hover { color:#fff; background:var(--card2); }
.iconbtn svg { width:20px; height:20px; }
.topbar { display:none; }
main.content { flex:1; min-width:0; padding:36px 40px 60px; }
.pagehead { display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:28px; }
.pagehead h1 { margin:0; font-size:28px; font-weight:700; letter-spacing:-.3px; color:#fff; }
.pagehead p { margin:6px 0 0; color:var(--dim); font-size:15px; }
.pagehead .actions { margin-left:auto; margin-top:4px; }

/* ---------- Cards / tiles */
.card { position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px 28px; margin-bottom:22px; box-shadow:var(--shadow); }
.card h2 { margin:0 0 6px; font-size:19px; font-weight:600; color:#fff; display:flex; align-items:center; gap:10px; }
.card h2 svg { width:20px; height:20px; color:var(--fg2); }
.card .desc { margin:0 0 18px; color:var(--dim); font-size:14.5px; }
.card .head { display:flex; align-items:center; gap:12px; margin-bottom:14px; } .card .head h2 { margin:0; } .card .head .more { margin-left:auto; font-size:14px; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:18px; margin-bottom:22px; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; box-shadow:var(--shadow); min-height:140px; display:flex; flex-direction:column; }
.tile .t { display:flex; align-items:center; color:var(--dim); font-size:15px; } .tile .t svg { margin-left:auto; width:20px; height:20px; color:var(--dim2); }
.tile .n { font-size:34px; font-weight:700; color:#fff; letter-spacing:-.5px; margin:10px 0 4px; line-height:1.1; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.tile .n small { font-size:14px; font-weight:500; color:var(--dim); letter-spacing:0; }
.tile .s { color:var(--dim); font-size:14px; margin-top:auto; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:22px; } .grid2 > .card { margin-bottom:0; }
@media (max-width:1100px) { .grid2 { grid-template-columns:1fr; } }

/* ---------- Pills / status */
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:999px; font-size:12.5px; font-weight:500; white-space:nowrap; background:var(--card2); color:var(--fg2); border:1px solid var(--line2); }
.pill.ok { background:rgba(34,197,94,.12); color:#4ade80; border-color:rgba(34,197,94,.25); }
.pill.warn { background:rgba(245,158,11,.12); color:#fbbf24; border-color:rgba(245,158,11,.25); }
.pill.bad { background:rgba(239,68,68,.12); color:#f87171; border-color:rgba(239,68,68,.25); }
.pill.info { background:rgba(59,158,255,.12); color:#7cc0ff; border-color:rgba(59,158,255,.25); }
.chip { display:inline-block; padding:2px 9px; border-radius:7px; font-size:12.5px; background:var(--card2); border:1px solid var(--line); color:var(--fg2); margin:2px 4px 2px 0; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--dim); } .dot.ok { background:var(--ok); } .dot.bad { background:var(--bad); } .dot.warn { background:var(--warn); }
.up { color:#4ade80; } .down { color:#f87171; }

/* ---------- Tables */
table.list { width:100%; border-collapse:collapse; font-size:15px; }
table.list th { text-align:left; color:var(--dim); font-weight:500; font-size:14px; padding:8px 10px; border-bottom:1px solid var(--line); }
table.list td { padding:14px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.list tr:last-child td { border-bottom:none; } table.list tr.off td { color:var(--dim); }
table.list .r { text-align:right; } table.list .dim { color:var(--dim); font-size:14px; } table.list td.dim, table.list td.nowrap { white-space:nowrap; }
.empty { color:var(--dim); padding:24px 0; text-align:center; }

/* ---------- Forms */
.field { margin-bottom:16px; min-width:0; } .field > label { display:block; color:var(--fg2); font-size:14px; font-weight:500; margin-bottom:6px; }
.field .hint { color:var(--dim); font-size:13px; margin-top:6px; }
.row { display:flex; gap:16px; flex-wrap:wrap; } .row > .field { flex:1 1 180px; }
input, select, textarea { width:100%; background:var(--bg); color:var(--fg); border:1px solid var(--line2); border-radius:var(--r2); padding:10px 12px; font:inherit; font-size:15px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(59,158,255,.18); }
input[type=checkbox] { width:18px; height:18px; accent-color:var(--accent); vertical-align:middle; }
label.check { display:flex; align-items:center; gap:10px; color:var(--fg); font-size:15px; cursor:pointer; margin:8px 0; }
select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238b95a7' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }

/* ---------- Buttons */
.btn { display:inline-flex; align-items:center; gap:8px; background:var(--card2); color:#fff; border:1px solid var(--line2); border-radius:var(--r2); padding:10px 16px; font:inherit; font-size:15px; font-weight:500; cursor:pointer; white-space:nowrap; }
.btn svg { width:18px; height:18px; } .btn:hover { border-color:var(--dim2); background:#1b2335; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#071120; } .btn.primary:hover { background:var(--accent2); border-color:var(--accent2); }
.btn.ghost { background:transparent; } .btn.danger:hover { border-color:var(--bad); color:#f87171; }
.btn.sm { padding:6px 11px; font-size:13.5px; } .btn.sm svg { width:15px; height:15px; }
.btn:disabled { opacity:.5; cursor:default; }
.actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.result { margin-top:14px; font-size:14.5px; white-space:pre-wrap; color:var(--fg2); } .result.ok { color:#4ade80; } .result.bad { color:#f87171; } .result:empty { display:none; }
.alertcard { border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--card2); border-radius:var(--r2); padding:12px 14px; margin-top:10px; font-size:14.5px; }

/* ---------- Log */
pre.log { background:var(--bg); border:1px solid var(--line); border-radius:var(--r2); padding:14px 16px; max-height:70vh; overflow:auto; margin:0; white-space:pre-wrap; word-break:break-word; font:13px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color:var(--fg2); }
pre.log .error { color:#f87171; } pre.log .ts { color:var(--dim2); }

/* ---------- Dialog */
dialog { background:var(--card); color:var(--fg); border:1px solid var(--line2); border-radius:var(--r); padding:0; width:min(920px, calc(100vw - 32px)); max-height:calc(100vh - 40px); }
dialog::backdrop { background:rgba(3,6,12,.7); backdrop-filter:blur(2px); }
dialog .dhead { display:flex; align-items:center; padding:20px 28px 0; } dialog .dhead h2 { margin:0; font-size:20px; color:#fff; } dialog .dhead .iconbtn { margin-left:auto; }
dialog .dbody { padding:18px 28px 8px; overflow:auto; max-height:calc(100vh - 200px); }
dialog .dfoot { display:flex; gap:10px; align-items:center; padding:16px 28px 22px; border-top:1px solid var(--line); }
fieldset { border:1px solid var(--line); border-radius:var(--r2); padding:14px 18px 2px; margin:0 0 16px; } legend { color:var(--dim); font-size:13px; padding:0 6px; }
.bonusrow { display:flex; gap:8px; margin-bottom:8px; align-items:center; } .bonusrow input:first-child { flex:3; } .bonusrow input:nth-child(2) { flex:1; min-width:80px; }

/* ---------- Login */
body.login { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.loginbox { width:360px; padding:32px; } .loginbox .brand { padding:0 0 22px; border:none; justify-content:center; }
.loginbox .btn { width:100%; justify-content:center; margin-top:6px; }
.error { color:#f87171; font-size:14px; }

/* ---------- Mobile */
@media (max-width: 900px) {
  .shell { flex-direction:column; }
  aside.side { position:fixed; inset:0 auto 0 0; z-index:20; transform:translateX(-100%); transition:transform .2s; width:270px; height:100vh; }
  aside.side.open { transform:none; box-shadow:0 0 0 100vw rgba(0,0,0,.5); }
  .topbar { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--side); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
  .topbar .brand { padding:0; border:none; font-size:16px; }
  main.content { padding:20px 16px 48px; }
  .pagehead h1 { font-size:24px; } .card { padding:18px 18px; }
  .tiles { grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
  .tile { min-height:0; padding:14px 16px; } .tile .n { font-size:24px; margin:6px 0 2px; } .tile .t { font-size:13px; } .tile .s { font-size:12.5px; } .tile .t svg { display:none; }
  table.list th:nth-child(n+4), table.list td:nth-child(n+4) { display:none; }
  /* Watchlist: Zeilen als Karten */
  table.cards, table.cards tbody { display:block; }
  table.cards thead { display:none; }
  table.cards tr { display:grid; grid-template-columns:1fr auto; gap:6px 12px; padding:14px 0; border-bottom:1px solid var(--line); }
  table.cards tr:last-child { border-bottom:none; }
  table.cards td { display:block; padding:0; border:none; }
  table.cards td:nth-child(1) { grid-column:1; font-size:16px; }
  table.cards td:nth-child(5) { display:block; grid-column:2; grid-row:1; text-align:right; }
  table.cards td:nth-child(2) { grid-column:1 / -1; }
  table.cards td:nth-child(3), table.cards td:nth-child(4) { display:inline-flex; align-items:center; gap:8px; margin-right:18px; font-size:13px; color:var(--dim); }
  table.cards td:nth-child(3)::after { content:"Suche"; } table.cards td:nth-child(4)::after { content:"Telegram"; }
  dialog .dhead, dialog .dbody, dialog .dfoot { padding-left:18px; padding-right:18px; }
}
#toast { position:fixed; right:20px; bottom:20px; background:var(--card2); border:1px solid var(--line2); border-left:3px solid var(--accent); border-radius:var(--r2); padding:12px 16px; display:none; max-width:420px; z-index:50; }

/* ---------- Treffer */
.filters { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.filters select, .filters input { width:auto; min-width:160px; flex:0 1 auto; } .filters input { flex:1 1 200px; } .filters .dim { margin-left:auto; font-size:13.5px; }
.hits { display:flex; flex-direction:column; }
.hit { border-top:1px solid var(--line); } .hit:first-child { border-top:none; }
.hit summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px; padding:14px 6px; border-radius:var(--r2); }
.hit summary::-webkit-details-marker { display:none; } .hit summary:hover { background:var(--card2); }
.hit-main { flex:1; min-width:0; } .hit-title { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; } .hit-title b { font-size:16px; color:#fff; }
.hit-item { color:var(--fg2); } .hit-meta { display:flex; gap:12px; align-items:center; margin-top:6px; font-size:13.5px; flex-wrap:wrap; }
.hit-side { display:flex; align-items:center; gap:14px; flex:none; } .price { font-size:18px; font-weight:600; color:#fff; }
.hit-body { padding:4px 6px 18px 6px; }
.kv { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px 18px; margin-bottom:12px; }
.kv .k { display:block; color:var(--dim); font-size:12.5px; } .kv > div > span:last-child { font-size:15px; }
.bonuses { margin-top:4px; } .chip.want { border-color:var(--accent); color:#9ccfff; background:rgba(59,158,255,.1); }
@media (max-width:900px) { .hit summary { flex-direction:column; align-items:flex-start; gap:8px; } .hit-side { width:100%; justify-content:space-between; } .filters .dim { margin-left:0; } }

/* ---------- Preisentwicklung */
.seg { display:inline-flex; border:1px solid var(--line2); border-radius:var(--r2); overflow:hidden; }
.seg a { padding:8px 14px; color:var(--fg2); font-size:14px; border-right:1px solid var(--line2); } .seg a:last-child { border-right:none; }
.seg a.on { background:var(--card2); color:#fff; } .seg a:hover { text-decoration:none; color:#fff; }
.legend { margin-left:auto; display:flex; gap:16px; font-size:13.5px; color:var(--fg2); flex-wrap:wrap; }
.legend .lk { display:inline-block; width:18px; height:3px; border-radius:2px; vertical-align:middle; margin-right:7px; }
.legend .lk.dash { background:repeating-linear-gradient(90deg, var(--dim) 0 4px, transparent 4px 7px); }
.chart { position:relative; width:100%; } .chart svg { display:block; width:100%; height:auto; font:12.5px -apple-system, BlinkMacSystemFont, "Inter", sans-serif; }
.chart .grid { stroke:var(--line); stroke-width:1; } .chart .tick { fill:var(--dim); font-variant-numeric:tabular-nums; } .chart .tick.strong { fill:var(--fg); font-weight:600; }
.chart .limit { stroke:var(--dim); stroke-width:1.5; stroke-dasharray:5 4; } .chart .cross { stroke:var(--dim2); stroke-width:1; pointer-events:none; }
.chart .ring { stroke:var(--card); stroke-width:2; } .chart .offer:hover line { opacity:1; }
.tip { position:absolute; pointer-events:none; background:var(--card2); border:1px solid var(--line2); border-radius:var(--r2); padding:8px 11px; font-size:13.5px; color:var(--fg); max-width:260px; box-shadow:0 6px 24px rgba(0,0,0,.4); z-index:5; }
.tip .dim { color:var(--dim); font-size:12.5px; }
@media (max-width:900px) { .legend { margin-left:0; } .pagehead .actions { width:100%; } }

/* ---------- Toggle-Switch */
.switch { position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer; vertical-align:middle; margin:0; }
.switch input { position:absolute; opacity:0; width:0; height:0; }
.switch span { width:40px; height:22px; border-radius:999px; background:var(--line2); position:relative; transition:background .15s; flex:none; }
.switch span::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.4); }
.switch input:checked + span { background:var(--accent); } .switch input:checked + span::after { transform:translateX(18px); }
.switch input:focus-visible + span { box-shadow:0 0 0 3px rgba(59,158,255,.3); }
.switch.labeled { color:var(--fg2); font-size:14.5px; }