:root { --bg:#07040d; --panel:rgba(24,12,42,.82); --panel2:rgba(70,35,120,.32); --solid:#150a26; --line:rgba(190,110,255,.42); --line2:rgba(255,255,255,.09); --text:#fff; --muted:#bdb0d6; --accent:#a855f7; --accent2:#7c22e8; --pink:#d946ef; --neon:#d78bff; --danger:#ff5a68; --ok:#2fe67f; --warn:#ffc53d; --glow:0 0 22px rgba(168,85,247,.45); }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; color:var(--text); font:15px/1.45 "Segoe UI",system-ui,-apple-system,sans-serif; background:radial-gradient(1000px 600px at 75% 0,rgba(124,34,232,.22),transparent 70%),radial-gradient(800px 500px at 15% 100%,rgba(217,70,239,.1),transparent 70%),var(--bg); background-attachment:fixed; min-height:100vh; }
a { color:var(--neon); }
h1 { font-size:27px; line-height:1.2; margin:0 0 18px; font-weight:800; } h2 { font-size:19px; line-height:1.25; margin:0; font-weight:700; }
.ic { width:21px; height:21px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.layout { display:flex; min-height:100vh; }
.side { width:238px; flex:none; position:sticky; top:0; height:100vh; overflow-y:auto; padding:12px 12px 70px; display:flex; flex-direction:column; gap:1px; background:url(waves.svg) bottom/100% 72px no-repeat,linear-gradient(180deg,#0e0719,#080410); border-right:1px solid rgba(190,110,255,.25); scrollbar-width:thin; scrollbar-color:var(--accent2) transparent; }
.brand { display:block; padding:0 24px 4px; flex:none; } .brand img { display:block; width:100%; filter:drop-shadow(0 0 14px rgba(190,90,255,.75)); }
.navhead { margin:7px 12px 3px; font-size:13px; color:#d9cfec; }
.side a.nav { display:flex; align-items:center; gap:13px; color:#fff; text-decoration:none; padding:6px 13px; border-radius:10px; border:1px solid transparent; flex:none; }
.side a.nav:hover { background:var(--panel2); }
.side a.nav.active { background:linear-gradient(90deg,#7c22e8,#c23bf0); border-color:rgba(255,255,255,.35); box-shadow:0 0 20px rgba(192,59,240,.7); font-weight:600; }
.navbadge { margin-left:auto; min-width:23px; text-align:center; font-size:12px; font-weight:700; padding:1px 7px; border-radius:99px; background:#7c22e8; color:#fff; box-shadow:0 0 8px rgba(168,85,247,.8); }
.active .navbadge { background:rgba(0,0,0,.4); box-shadow:none; }
.spacer { flex:1; min-height:8px; }

.content { flex:1; min-width:0; display:flex; flex-direction:column; position:relative; }
.herobg { position:absolute; top:0; right:0; width:min(66%,1060px); aspect-ratio:872/138; background:url(hero.webp) right top/100% auto no-repeat; -webkit-mask-image:linear-gradient(90deg,transparent,#000 34%),linear-gradient(180deg,#000 72%,transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent,#000 34%),linear-gradient(180deg,#000 72%,transparent); mask-composite:intersect; pointer-events:none; }
.topbar { display:flex; align-items:center; gap:14px; padding:11px 22px 0; position:relative; z-index:5; }
.search { position:relative; flex:1; max-width:640px; }
.search .ic { position:absolute; left:13px; top:11px; color:#e6def2; }
.search input { margin:0; padding:9px 74px 9px 44px; border-radius:13px; background:rgba(14,8,26,.82); border-color:rgba(255,255,255,.2); }
.kbd { position:absolute; right:10px; top:9px; font-size:12px; color:#e6def2; border:1px solid rgba(255,255,255,.25); border-radius:6px; padding:1px 8px; }
.results { position:absolute; left:0; right:0; top:calc(100% + 6px); background:var(--solid); border:1px solid var(--line); border-radius:12px; padding:6px; box-shadow:0 12px 32px rgba(0,0,0,.7); max-height:360px; overflow-y:auto; }
.results a { display:flex; justify-content:space-between; gap:12px; padding:8px 10px; border-radius:8px; color:var(--text); text-decoration:none; } .results a:hover,.results a:focus { background:var(--panel2); } .results small { color:var(--muted); }
.topright { margin-left:auto; display:flex; align-items:center; gap:14px; }
.iconbtn { position:relative; display:flex; color:#fff; padding:8px; border-radius:10px; } .iconbtn:hover { background:rgba(0,0,0,.4); } .iconbtn .ic { width:25px; height:25px; }
.dot { position:absolute; top:6px; right:6px; width:9px; height:9px; border-radius:50%; background:var(--pink); box-shadow:0 0 8px var(--pink); }
.me { display:flex; align-items:center; gap:10px; padding-left:14px; border-left:1px solid rgba(255,255,255,.2); }
.avatar { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:18px; background:linear-gradient(135deg,#7c22e8,#d946ef); color:#fff; box-shadow:0 0 12px rgba(217,70,239,.7); }
.me b { display:block; line-height:1.2; font-weight:600; overflow-wrap:anywhere; text-shadow:0 1px 6px #000; } .me small { color:#e6def2; text-shadow:0 1px 6px #000; }
.logout { display:flex; color:#e6def2; padding:8px; border-radius:10px; background:none; border:0; } .logout:hover { color:#fff; background:rgba(0,0,0,.4); box-shadow:none; }
main { padding:16px 22px 28px; width:100%; max-width:1600px; position:relative; }

.hero { min-height:128px; margin:0 0 12px; display:flex; flex-direction:column; justify-content:center; gap:5px; }
.hero h1 { font-size:35px; margin:0; letter-spacing:.2px; text-shadow:0 2px 12px #000; } .hero h1 em { font-style:normal; color:#e15cff; text-shadow:0 0 18px rgba(217,70,239,.8); }
.hero p { margin:0; font-size:16px; text-shadow:0 1px 8px #000; }
.chip { align-self:flex-start; margin-top:4px; display:inline-flex; align-items:center; gap:9px; padding:6px 13px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(14,8,26,.8); font-size:14px; } .chip .ic { width:18px; height:18px; }

.card { background:var(--panel); border:1px solid var(--line); border-radius:15px; padding:15px 17px; margin-bottom:14px; box-shadow:0 0 14px rgba(168,85,247,.16),inset 0 1px 0 rgba(255,255,255,.04); min-width:0; }
.card > h2:first-child { margin-bottom:12px; }
.cardhead { display:flex; align-items:center; gap:14px; margin-bottom:10px; } .cardhead .big { width:36px; height:36px; color:var(--neon); filter:drop-shadow(0 0 7px rgba(190,90,255,.95)); stroke-width:1.5; } .cardhead p { margin:1px 0 0; color:var(--muted); font-size:13px; } .cardhead .end { margin-left:auto; flex:none; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:5px 13px; border-radius:10px; border:1px solid rgba(255,255,255,.28); color:#fff; text-decoration:none; font-size:13.500px; background:rgba(14,8,26,.6); white-space:nowrap; } .pill:hover { border-color:var(--neon); box-shadow:var(--glow); } .pill.good { color:var(--ok); border-color:rgba(47,230,127,.6); background:rgba(47,230,127,.12); } .pill.bad { color:var(--danger); border-color:rgba(255,90,104,.6); background:rgba(255,90,104,.12); }
select.mini { width:auto; margin:0; padding:5px 10px; font-size:13.500px; border-radius:10px; background:rgba(14,8,26,.6); border-color:rgba(255,255,255,.28); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-bottom:14px; }
.kpi { display:flex; align-items:center; gap:18px; padding:17px 20px; min-height:88px; text-decoration:none; color:#fff; border-radius:15px; border:1.5px solid rgba(205,130,255,.75); background:linear-gradient(120deg,rgba(104,36,180,.5),rgba(32,14,58,.85) 65%); box-shadow:0 0 18px rgba(168,85,247,.45),inset 0 0 22px rgba(168,85,247,.16); transition:transform .15s,box-shadow .15s; position:relative; }
a.kpi:hover { transform:translateY(-2px); box-shadow:0 0 28px rgba(190,90,255,.7),inset 0 0 22px rgba(168,85,247,.2); }
.kpi > .ic { width:48px; height:48px; color:var(--neon); filter:drop-shadow(0 0 8px rgba(190,90,255,1)); stroke-width:1.5; }
.kpitext { min-width:0; } .kpitext span { display:block; font-size:15px; } .kpitext b { display:block; font-size:30px; line-height:1.15; font-weight:800; }
.delta { position:absolute; right:14px; bottom:12px; padding:3px 10px; border-radius:8px; font-size:14px; font-weight:700; background:rgba(47,230,127,.16); color:var(--ok); white-space:nowrap; } .delta.down { background:rgba(255,90,104,.18); color:var(--danger); }
.panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .panels .card { margin:0; display:flex; flex-direction:column; }

.chart { position:relative; } .chart svg { display:block; width:100%; height:auto; } .chart text { fill:#e0d8ee; font-size:12.500px; } .gridline { stroke:rgba(255,255,255,.09); } .cross { stroke:rgba(255,255,255,.4); stroke-dasharray:3 3; }
.line { fill:none; stroke:#d78bff; stroke-width:2.500; filter:drop-shadow(0 0 6px rgba(215,139,255,.95)); } .pt { fill:#fff; stroke:#b14dff; stroke-width:2; }
.tip,.callout { position:absolute; background:rgba(14,8,26,.95); border:1px solid var(--neon); border-radius:10px; padding:5px 11px; font-weight:700; white-space:nowrap; box-shadow:var(--glow); text-align:center; pointer-events:none; }
.tip { transform:translate(-50%,-115%); } .tip small,.callout small { display:block; font-weight:600; color:var(--muted); } .callout small.pos { color:var(--ok); } .callout small.neg { color:var(--danger); }
details.tableview { margin-top:6px; font-size:13px; color:var(--muted); }

.line-item,.progress-row { display:flex; align-items:center; gap:12px; padding:7px 0; border-bottom:1px solid var(--line2); min-width:0; color:#fff; text-decoration:none; } .line-item:last-child,.progress-row:last-child { border-bottom:0; } .line-item > .ic,.progress-row > .ic { color:var(--neon); } .grow { flex:1; min-width:0; overflow-wrap:anywhere; } .grow small { display:block; color:var(--muted); }
.progress-row .grow { flex:0 0 40%; overflow-wrap:break-word; } .progress-row:hover .grow { color:var(--neon); } .progress-row b { width:48px; text-align:right; flex:none; font-weight:600; } .progress-row.plain { border:0; padding:4px 0; }
.bar { flex:1 1 auto; height:11px; min-width:60px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; } .bar div { height:100%; border-radius:99px; background:linear-gradient(90deg,#8d2bf0,#e9a6ff); box-shadow:0 0 10px rgba(205,120,255,.9); }
.line-item time { color:var(--muted); font-size:13px; white-space:nowrap; } .num { min-width:66px; text-align:right; font-weight:600; flex:none; white-space:nowrap; }
.online { color:var(--ok); white-space:nowrap; } .statusdot { width:10px; height:10px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); display:inline-block; margin-right:7px; } .statusdot.off { background:var(--danger); box-shadow:0 0 8px var(--danger); } .online:has(.off) { color:var(--danger); }
.datechip { display:inline-flex; align-items:center; gap:7px; font-size:13.500px; white-space:nowrap; } .datechip .ic { width:18px; height:18px; color:#e6def2; }
.actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); grid-auto-rows:1fr; gap:12px; flex:1; }
.action { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-height:88px; padding:10px; text-align:center; color:#fff; text-decoration:none; border-radius:13px; border:1.5px solid rgba(205,130,255,.7); background:linear-gradient(180deg,rgba(124,34,232,.55),rgba(80,20,140,.4)); box-shadow:inset 0 0 18px rgba(205,130,255,.16); transition:transform .15s,box-shadow .15s; } .action:hover { transform:translateY(-2px); box-shadow:0 0 20px rgba(190,90,255,.75); } .action .ic { width:30px; height:30px; }
.empty { color:var(--muted); font-size:14px; padding:12px 0; margin:0; }

.month { display:grid; grid-template-columns:repeat(7,minmax(92px,1fr)); gap:6px; margin-top:12px; } .dayhead { color:var(--muted); font-size:13px; padding:0 6px; } .day { min-height:88px; padding:6px; border-radius:10px; border:1px solid var(--line2); background:rgba(14,8,26,.5); min-width:0; cursor:pointer; } .day:hover { border-color:var(--line); background:var(--panel2); } .day.selected { border-color:var(--pink); box-shadow:0 0 14px rgba(217,70,239,.55); } .day.blank { cursor:default; } .day.blank { border:0; background:none; } .day.today { border-color:var(--neon); box-shadow:var(--glow); } .daynum { background:none; border:0; padding:0 3px; font-size:13px; font-weight:400; color:var(--muted); } .daynum:hover { box-shadow:none; } .today .daynum { color:#fff; font-weight:700; }
.event { margin-top:4px; padding:2px 6px; border-radius:6px; font-size:12.500px; color:#fff; background:rgba(124,34,232,.6); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .event.ev-todo { background:rgba(217,70,239,.3); } .event.ev-termin { background:rgba(47,180,230,.32); } .dayform { margin-top:12px; }

label { display:block; font-size:13px; color:var(--muted); margin-bottom:12px; }
input,select,textarea { display:block; width:100%; margin-top:5px; background:rgba(10,5,20,.8); border:1px solid var(--line); color:#fff; border-radius:10px; padding:9px 11px; font:inherit; } select option { background:var(--solid); } ::placeholder { color:#d5cbe6; opacity:1; }
input[type=checkbox] { display:inline-block; width:20px; height:20px; margin:0 9px 0 0; accent-color:#b14dff; vertical-align:-4px; flex:none; } .line-item input[type=checkbox] { margin:0; } input[type=color] { height:42px; padding:4px; }
textarea { min-height:88px; resize:vertical; }
:focus-visible { outline:2px solid var(--neon); outline-offset:2px; }
button { background:linear-gradient(135deg,#7c22e8,#c23bf0); color:#fff; border:0; border-radius:10px; padding:9px 16px; font:inherit; font-weight:600; cursor:pointer; } button:hover { box-shadow:0 0 18px rgba(192,59,240,.7); }
button.ghost { background:var(--panel2); border:1px solid var(--line); font-weight:500; } button.danger { background:linear-gradient(135deg,#d62f3e,#ff5a68); }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .between { justify-content:space-between; }
.scroll { overflow-x:auto; } table { width:100%; border-collapse:collapse; } th,td { text-align:left; padding:10px; border-bottom:1px solid var(--line2); vertical-align:top; overflow-wrap:anywhere; } th { color:var(--muted); font-size:13px; font-weight:500; }
.muted { color:var(--muted); font-size:13px; } .pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.badge { display:inline-block; padding:2px 11px; border-radius:99px; font-size:12.500px; background:var(--panel2); border:1px solid var(--line); white-space:nowrap; } .badge.ok { color:var(--ok); border-color:rgba(47,230,127,.6); } .badge.warn { color:var(--warn); border-color:rgba(255,197,61,.6); } .badge.bad { color:var(--danger); border-color:rgba(255,90,104,.65); } .badge.strong.ok { background:rgba(47,230,127,.14); } .badge.strong.warn { background:rgba(255,197,61,.14); } .badge.strong.bad { background:rgba(255,90,104,.2); }
.center { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; } .center .card { width:100%; max-width:430px; text-align:center; box-shadow:var(--glow); } .center img.logo { width:170px; filter:drop-shadow(0 0 14px rgba(190,90,255,.75)); } .qr { background:#fff; border-radius:8px; padding:8px; width:220px; }
.toast { position:fixed; right:16px; bottom:16px; background:var(--solid); border:1px solid var(--neon); border-radius:10px; padding:10px 14px; max-width:360px; z-index:9; box-shadow:var(--glow); } .toast.bad { border-color:var(--danger); }
.bars { display:flex; align-items:flex-end; gap:3px; height:110px; margin-top:12px; } .bars div { flex:1; background:linear-gradient(180deg,#d78bff,#7c22e8); border-radius:4px 4px 0 0; min-height:2px; }
.stat b { display:block; font-size:26px; } .stat span { color:var(--muted); font-size:13px; }
.todo { display:flex; align-items:center; gap:8px; padding:6px 0; flex-wrap:wrap; } .todo.done span:first-of-type { text-decoration:line-through; color:var(--muted); } .todo > span:first-of-type { flex:1; min-width:120px; overflow-wrap:anywhere; }
.msg { padding:10px 0; border-bottom:1px solid var(--line2); }
@media (max-width:1150px) { .panels { grid-template-columns:minmax(0,1fr); } }
@media (max-width:820px) {
  .layout { flex-direction:column; } .side { position:static; width:100%; height:auto; flex-direction:row; overflow-x:auto; align-items:center; border-right:0; border-bottom:1px solid var(--line); padding:8px 12px; background:#0e0719; } .side a.nav { white-space:nowrap; padding:8px 10px; }
  .brand { width:54px; flex:none; padding:0 6px 0 0; } .navhead,.spacer { display:none; }
  .topbar { flex-wrap:wrap; padding:12px 16px 0; } .search { order:3; flex:1 0 100%; max-width:none; } .kbd { display:none; } main { padding:12px 16px 20px; }
  .herobg { width:100%; height:300px; opacity:.45; } .hero h1 { font-size:27px; } .kpis { grid-template-columns:minmax(0,1fr); }
  .cardhead { flex-wrap:wrap; } .cardhead > div:nth-child(2) { flex:1; min-width:150px; } .cardhead .end { margin-left:0; }
  .progress-row { flex-wrap:wrap; } .progress-row .grow { flex:1 1 calc(100% - 100px); } .bar { flex:1 1 100%; order:3; } .progress-row b { width:auto; }
  .line-item { flex-wrap:wrap; } .line-item .grow { flex:1 1 55%; } .kpi { padding-right:88px; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }