/* ============================================================
   Steuris Crypto — Klienten-Dashboard (app.steurisinvest.com)
   Bullisch design system · dark / crypto-modern
   Palette: [data-palette="neon"] (default) | "blau"
   ============================================================ */

:root {
	--bg-primary:   #0A0A0F;
	--bg-elevated:  #101017;
	--bg-card:      #14141D;
	--bg-surface:   rgba(255,255,255,0.025);
	--bg-surface-2: rgba(255,255,255,0.05);
	--border-soft:  rgba(255,255,255,0.085);
	--border-hair:  rgba(255,255,255,0.05);

	--text-primary: #ECECEE;
	--text-strong:  #FFFFFF;
	--text-muted:   #8E8E9C;
	--text-subtle:  #5A5A68;

	--font-body:    'Inter', system-ui, -apple-system, sans-serif;
	--font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
	--font-mono:    'JetBrains Mono', ui-monospace, monospace;

	--r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;
	--s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem;

	--dur: 320ms; --ease: cubic-bezier(.2,.7,.2,1); --spin: 120s;
	--up: #00FF88; --down: #FF4466;
}

:root, [data-palette="neon"] {
	--accent-1:#00FF88; --accent-2:#7B5FF7; --accent-3:#00D4FF;
	--accent-1-rgb:0,255,136; --accent-2-rgb:123,95,247; --accent-3-rgb:0,212,255;
	--on-accent:#07120B; --grad-bull:linear-gradient(120deg,#00FF88,#7B5FF7);
	--grad-spec:linear-gradient(95deg,#00FF88,#7B5FF7 52%,#00D4FF); --bg-primary:#0A0A0F;
}
[data-palette="blau"] {
	--accent-1:#316FF6; --accent-2:#1941BA; --accent-3:#92BDF9;
	--accent-1-rgb:49,111,246; --accent-2-rgb:25,65,186; --accent-3-rgb:146,189,249;
	--on-accent:#03081A; --grad-bull:linear-gradient(120deg,#316FF6,#1941BA);
	--grad-spec:linear-gradient(95deg,#92BDF9,#316FF6 50%,#1941BA); --bg-primary:#070B18; --up:#316FF6;
}
[data-motion="aus"] { --spin: 0s; }

/* font options (Tweaks) */
[data-font="space"]   { --font-display:'Space Grotesk', sans-serif; --font-body:'Space Grotesk', sans-serif; }
[data-font="sora"]    { --font-display:'Sora', sans-serif; --font-body:'Inter', sans-serif; }
[data-font="manrope"] { --font-display:'Manrope', sans-serif; --font-body:'Manrope', sans-serif; }
[data-font="plex"]    { --font-display:'IBM Plex Sans', sans-serif; --font-body:'IBM Plex Sans', sans-serif; }

* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
	font-family:var(--font-body); background:var(--bg-primary); color:var(--text-primary);
	line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before {
	content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
	background:
		radial-gradient(55% 40% at 88% -4%, rgba(var(--accent-2-rgb),0.20), transparent 70%),
		radial-gradient(45% 35% at 6% 2%, rgba(var(--accent-1-rgb),0.10), transparent 70%);
}
.shell, .rail, .main-col, .app { position:relative; z-index:1; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.mono { font-family:var(--font-mono); }

/* ---------- Shell + sidebar ---------- */
.shell { display:grid; grid-template-columns:248px minmax(0,1fr); min-height:100vh; }

.rail { position:sticky; top:0; align-self:start; height:100vh;
	display:flex; flex-direction:column; gap:var(--s5);
	padding:var(--s5) var(--s4);
	border-right:1px solid var(--border-hair);
	background:rgba(6,6,10,0.65); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }

.rail-logo { display:flex; align-items:center; gap:var(--s3); padding:0 var(--s2); }
.rail-logo img { width:38px; height:42px; object-fit:contain; cursor:pointer;
	filter:drop-shadow(0 0 12px rgba(var(--accent-2-rgb),0.5)); transition:transform var(--dur) var(--ease); }
.rail-logo img:hover { transform:scale(1.06); }
.rail-logo .t { display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.rail-logo .t b { font-family:var(--font-display); font-weight:800; font-size:0.96rem; letter-spacing:-0.02em; color:var(--text-strong); }
.rail-logo .t small { font-family:var(--font-mono); font-size:0.58rem; color:var(--text-subtle); letter-spacing:0.1em; text-transform:uppercase; }

.rail-nav { display:flex; flex-direction:column; gap:2px; flex:1; }
.nav-label { font-family:var(--font-mono); font-size:0.56rem; letter-spacing:0.14em; text-transform:uppercase;
	color:var(--text-subtle); padding:var(--s4) var(--s3) var(--s2); }
.nav-label:first-child { padding-top:var(--s2); }
.rail-link { display:flex; align-items:center; gap:var(--s3);
	padding:0.65rem var(--s3); border-radius:var(--r-md);
	font-size:0.88rem; color:var(--text-muted);
	border:1px solid transparent;
	transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.rail-link svg { width:18px; height:18px; flex:none; opacity:0.85; }
.rail-link:hover { background:var(--bg-surface-2); color:var(--text-primary); }
.rail-link.active { background:rgba(var(--accent-1-rgb),0.1); color:var(--accent-1);
	border-color:rgba(var(--accent-1-rgb),0.3); box-shadow:0 0 24px -10px rgba(var(--accent-1-rgb),0.5); }
.rail-link.danger:hover { background:rgba(255,68,102,0.1); color:var(--down); }

.rail-foot { display:flex; flex-direction:column; gap:var(--s2);
	padding-top:var(--s4); border-top:1px solid var(--border-hair); }
.rail-user { display:flex; align-items:center; gap:var(--s3); padding:var(--s3);
	border-radius:var(--r-md); background:var(--bg-surface); border:1px solid var(--border-soft); }
.avatar { width:36px; height:40px; flex:none; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	background:var(--grad-bull); color:var(--on-accent); display:grid; place-items:center;
	font-family:var(--font-mono); font-weight:700; font-size:0.78rem; }
.rail-user .ru { display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.rail-user .ru b { font-family:var(--font-display); font-weight:700; font-size:0.84rem; color:var(--text-strong);
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rail-user .ru small { font-family:var(--font-mono); font-size:0.58rem; color:var(--text-subtle); letter-spacing:0.06em; }
.rail-user .ru .id { font-family:var(--font-mono); font-size:0.66rem; color:var(--accent-3); margin-top:2px; }

.main-col { display:flex; flex-direction:column; min-width:0; }

/* ---------- Page ---------- */
.app { max-width:1180px; margin:0 auto; width:100%; padding:var(--s6) var(--s5) var(--s7); }

@media (max-width:900px){
	.shell { grid-template-columns:1fr; }
	.rail { position:static; height:auto; flex-direction:column;
		border-right:none; border-bottom:1px solid var(--border-hair);
		padding:var(--s3) var(--s4); gap:var(--s3); }
	.rail-nav { flex-direction:row; flex-wrap:wrap; gap:var(--s2); flex:0 1 auto; }
	.nav-label { display:none; }
	.rail-link { padding:0.5rem 0.8rem; font-size:0.82rem; }
	.rail-link span { display:none; }
	.rail-link svg { width:20px; height:20px; }
	.rail-foot { flex-direction:row; align-items:center; gap:var(--s3); padding-top:var(--s3); }
	.rail-user { flex:1; min-width:0; }
	.rail-user .ru small { display:none; }
}
@media (max-width:520px){
	.rail-user .ru b { font-size:0.78rem; }
	.rail-user .ru .id { font-size:0.6rem; }
}
.greet { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s6); }
.greet h1 { font-family:var(--font-display); font-weight:800; letter-spacing:-0.03em; font-size:clamp(1.7rem,3.4vw,2.5rem); color:var(--text-strong); }
.greet .sub { color:var(--text-muted); font-size:0.95rem; margin-top:4px; }
.greet .sub b { color:var(--text-primary); font-weight:600; }
.stand { display:inline-flex; align-items:center; gap:var(--s2); font-family:var(--font-mono); font-size:0.72rem;
	color:var(--text-muted); padding:0.45rem 0.85rem; border:1px solid var(--border-soft); border-radius:var(--r-pill); background:var(--bg-surface); }
.stand::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--up); box-shadow:0 0 8px var(--up); }

.grid { display:grid; grid-template-columns:1.7fr 1fr; gap:var(--s5); align-items:start; }
@media (max-width:980px){ .grid { grid-template-columns:1fr; } }
.col { display:flex; flex-direction:column; gap:var(--s5); }

.card { background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:var(--s5); }
.card-h { display:flex; align-items:center; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s4); }
.card-h h2 { font-family:var(--font-display); font-weight:700; font-size:1.05rem; letter-spacing:-0.01em; white-space:nowrap; }
.card-h .meta { font-family:var(--font-mono); font-size:0.68rem; color:var(--text-subtle); letter-spacing:0.06em; }
.indikativ { font-family:var(--font-mono); font-size:0.66rem; color:var(--text-subtle); letter-spacing:0.03em; }

/* ---------- Summary / performance ---------- */
.summary .top { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--s5); justify-content:space-between; }
.bigval { font-family:var(--font-display); font-weight:800; letter-spacing:-0.03em; font-size:clamp(2.4rem,5vw,3.4rem); line-height:1; color:var(--text-strong); }
.bigval .cur { font-family:var(--font-mono); font-size:0.42em; color:var(--text-muted); font-weight:500; margin-right:0.4rem; vertical-align:0.55em; }
.delta { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-family:var(--font-mono); font-size:0.95rem; font-weight:700;
	padding:0.35rem 0.7rem; border-radius:var(--r-pill); }
.delta.pos { color:var(--up); background:rgba(var(--accent-1-rgb),0.1); }
.delta.neg { color:var(--down); background:rgba(255,68,102,0.1); }
.periods { display:flex; gap:4px; padding:4px; background:var(--bg-surface-2); border-radius:var(--r-pill); align-self:flex-start; }
.periods button { padding:0.4rem 0.8rem; border-radius:var(--r-pill); font-family:var(--font-mono); font-size:0.74rem; color:var(--text-muted); transition:all var(--dur) var(--ease); }
.periods button.active { background:var(--grad-bull); color:var(--on-accent); font-weight:700; }
.periods button:not(.active):hover { color:var(--accent-1); }
.chart { margin-top:var(--s5); position:relative; }
.chart svg { width:100%; height:auto; display:block; overflow:visible; }
.chart .axis { font-family:var(--font-mono); font-size:9px; fill:var(--text-subtle); }
.chartline { transition:d var(--dur) var(--ease); }

/* ---------- Positions table ---------- */
.ptable-wrap { overflow-x:auto; margin:calc(var(--s4) * -1) calc(var(--s5) * -1) 0; padding:var(--s4) var(--s5) 0; }
.ptable { width:100%; border-collapse:collapse; min-width:560px; }
.ptable th, .ptable td { padding:0.7rem var(--s3); text-align:right; border-bottom:1px solid var(--border-hair); font-size:0.88rem; white-space:nowrap; }
.ptable th { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-subtle); font-weight:600; }
.ptable th:first-child, .ptable td:first-child { text-align:left; }
.ptable tbody tr:last-child td { border-bottom:none; }
.ptable tbody tr { transition:background var(--dur) var(--ease); }
.ptable tbody tr:hover td { background:rgba(var(--accent-2-rgb),0.05); }
.coin { display:flex; align-items:center; gap:var(--s3); }
.coin .sym { width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center;
	font-family:var(--font-mono); font-weight:700; font-size:0.62rem; color:var(--text-strong);
	background:var(--bg-surface-2); border:1px solid var(--border-soft); }
.coin .nm { display:flex; flex-direction:column; line-height:1.2; }
.coin .nm b { font-size:0.86rem; font-weight:600; }
.coin .nm small { font-family:var(--font-mono); font-size:0.62rem; color:var(--text-subtle); }
.apr { color:var(--up); font-family:var(--font-mono); }
.apr.none { color:var(--text-subtle); }
.ptable .val { font-family:var(--font-mono); font-weight:600; color:var(--text-primary); }
.ptable tfoot td { padding-top:var(--s4); font-family:var(--font-mono); font-weight:700; color:var(--text-strong); border-top:1px solid var(--border-soft); border-bottom:none; }

/* ---------- Cluster (honeycomb) ---------- */
.cluster-card .hexwrap { position:relative; aspect-ratio:1/1; max-width:300px; margin:var(--s4) auto 0; display:grid; place-items:center; }
.cluster-card .hexwrap::before { content:''; position:absolute; inset:8%; border-radius:50%;
	background:radial-gradient(circle,rgba(var(--accent-2-rgb),0.22),transparent 62%); }
.hring { position:absolute; inset:0; animation:spin var(--spin) linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.hc { position:absolute; width:62px; height:71px; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	background:var(--bg-card); border:1px solid var(--border-soft); display:grid; place-items:center;
	font-family:var(--font-mono); font-size:0.66rem; color:var(--text-muted); }
.hc .inner { animation:spin var(--spin) linear infinite reverse; }
.hc.on { background:rgba(var(--accent-1-rgb),0.16); border-color:var(--accent-1); color:var(--accent-1);
	filter:drop-shadow(0 0 14px rgba(var(--accent-1-rgb),0.5)); font-weight:700; }
.hc.p1{left:50%;top:-3%;transform:translateX(-50%);} .hc.p2{right:2%;top:30%;} .hc.p3{right:5%;bottom:0;}
.hc.p4{left:5%;bottom:0;} .hc.p5{left:2%;top:30%;}
.hcore { position:relative; z-index:2; text-align:center; }
.hcore .lvl { font-family:var(--font-mono); font-size:0.7rem; color:var(--accent-1); letter-spacing:0.1em; }
.hcore .big { font-family:var(--font-display); font-weight:800; font-size:2.4rem; line-height:1; color:var(--text-strong); }
.hcore .nm { font-size:0.82rem; color:var(--text-muted); }
.cluster-card .note { margin-top:var(--s4); font-size:0.84rem; color:var(--text-muted); text-align:center; }

/* ---------- Stat rows (Kapitalfluss / Gebühren) ---------- */
.rows { display:flex; flex-direction:column; }
.row { display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:0.7rem 0; border-bottom:1px solid var(--border-hair); }
.row:last-child { border-bottom:none; }
.row .k { color:var(--text-muted); font-size:0.88rem; }
.row .v { font-family:var(--font-mono); font-weight:600; color:var(--text-primary); white-space:nowrap; text-align:right; }
.row.tot .k { color:var(--text-primary); font-weight:600; }
.row.tot .v { color:var(--up); }

/* ---------- Actions / buttons ---------- */
.actions { display:flex; flex-direction:column; gap:var(--s3); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); padding:0.85rem 1.3rem;
	border-radius:var(--r-pill); font-weight:700; font-size:0.9rem; transition:all var(--dur) var(--ease); white-space:nowrap; }
.btn-primary { background:var(--grad-bull); color:var(--on-accent); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 36px -12px rgba(var(--accent-1-rgb),0.6); }
.btn-ghost { border:1px solid rgba(var(--accent-2-rgb),0.4); color:var(--text-primary); background:rgba(var(--accent-2-rgb),0.04); }
.btn-ghost:hover { border-color:var(--accent-1); color:var(--accent-1); }

/* ---------- Reports list ---------- */
.replist { display:flex; flex-direction:column; gap:var(--s2); }
.rep { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:0.8rem var(--s4);
	background:var(--bg-surface); border:1px solid var(--border-soft); border-radius:var(--r-md); transition:all var(--dur) var(--ease); }
.rep:hover { border-color:rgba(var(--accent-1-rgb),0.4); }
.rep .when { font-family:var(--font-display); font-weight:600; font-size:0.92rem; white-space:nowrap; }
.rep .pct { font-family:var(--font-mono); font-size:0.78rem; white-space:nowrap; }
.rep .pct.pos { color:var(--up); } .rep .pct.neg { color:var(--down); }
.rep a { font-family:var(--font-mono); font-size:0.72rem; color:var(--accent-3); white-space:nowrap; }
.rep .dl { display:inline-flex; align-items:center; gap:5px; }

/* ---------- pills ---------- */
.pills { display:flex; flex-wrap:wrap; gap:var(--s2); }
.pill { font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.05em; color:var(--text-muted); white-space:nowrap;
	padding:0.3rem 0.7rem; border:1px solid var(--border-soft); border-radius:var(--r-pill); background:var(--bg-surface); }
.pill.ok { color:var(--up); border-color:rgba(var(--accent-1-rgb),0.3); background:rgba(var(--accent-1-rgb),0.05); }

/* ---------- footer ---------- */
.dash-foot { max-width:1180px; width:100%; margin:auto auto 0; padding:var(--s5); border-top:1px solid var(--border-hair);
	display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s3); font-size:0.74rem; color:var(--text-subtle); }
.risk-note { font-size:0.78rem; color:var(--text-muted); background:rgba(255,68,102,0.06);
	border:1px solid rgba(255,68,102,0.2); border-radius:var(--r-md); padding:var(--s3) var(--s4); margin-top:var(--s5); }
.risk-note b { color:var(--down); font-family:var(--font-mono); letter-spacing:0.06em; margin-right:var(--s2); }

@media (prefers-reduced-motion: reduce){ .hring, .hc .inner { animation:none !important; } }

/* ============================================================
   Settings / Profil view
   ============================================================ */
.view[hidden] { display:none; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); align-items:start; }
@media (max-width:880px){ .settings-grid { grid-template-columns:1fr; } }

.field { display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:0.7rem 0; border-bottom:1px solid var(--border-hair); }
.field:last-child { border-bottom:none; }
.field .lab { color:var(--text-muted); font-size:0.85rem; }
.field .val2 { font-family:var(--font-mono); font-size:0.84rem; color:var(--text-primary); text-align:right; }
.field input.inp { font-family:var(--font-body); font-size:0.84rem; background:var(--bg-surface); border:1px solid var(--border-soft);
	border-radius:var(--r-sm); padding:0.45rem 0.7rem; color:var(--text-primary); max-width:58%; text-align:right; transition:border-color var(--dur) var(--ease); }
.field input.inp:focus { outline:none; border-color:var(--accent-1); }

.switch { position:relative; width:46px; height:26px; flex:none; cursor:pointer; }
.switch input { opacity:0; width:0; height:0; }
.switch .tr { position:absolute; inset:0; background:var(--bg-surface-2); border:1px solid var(--border-soft); border-radius:99px; transition:all var(--dur) var(--ease); }
.switch .tr::after { content:''; position:absolute; left:3px; top:2.5px; width:18px; height:18px; border-radius:50%; background:var(--text-muted); transition:all var(--dur) var(--ease); }
.switch input:checked + .tr { background:rgba(var(--accent-1-rgb),0.22); border-color:var(--accent-1); }
.switch input:checked + .tr::after { left:23px; background:var(--accent-1); box-shadow:0 0 10px var(--accent-1); }

.docrow { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:0.6rem 0; border-bottom:1px solid var(--border-hair); }
.docrow:last-child { border-bottom:none; }
.docrow .dn { font-size:0.85rem; color:var(--text-primary); }
.docrow .dv { font-family:var(--font-mono); font-size:0.64rem; color:var(--up); white-space:nowrap; display:inline-flex; align-items:center; gap:5px; }
.docrow .dv::before { content:'✓'; }

.refbox { background:var(--bg-surface); border:1px dashed rgba(var(--accent-1-rgb),0.45); border-radius:var(--r-md);
	padding:var(--s4); display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s4); }
.refbox code { font-family:var(--font-mono); font-size:1rem; color:var(--accent-1); letter-spacing:0.04em; }
.refbox button { font-family:var(--font-mono); font-size:0.72rem; color:var(--accent-3); border:1px solid rgba(var(--accent-3-rgb),0.4);
	border-radius:var(--r-pill); padding:0.4rem 0.8rem; transition:all var(--dur) var(--ease); white-space:nowrap; }
.refbox button:hover { border-color:var(--accent-3); background:rgba(var(--accent-3-rgb),0.08); }

.lang-opts { display:flex; gap:var(--s2); flex-wrap:wrap; }
.lang { font-family:var(--font-mono); font-size:0.78rem; padding:0.5rem 0.9rem; border-radius:var(--r-pill);
	border:1px solid var(--border-soft); background:var(--bg-surface); color:var(--text-muted); transition:all var(--dur) var(--ease); }
.lang.on { border-color:var(--accent-1); background:rgba(var(--accent-1-rgb),0.1); color:var(--accent-1); }