/* squadt Basis-Design für alle Apps: Tokens, Topbar, Hintergrund-Formen, Buttons.
   Fonts werden in jeder Seite per <link> geladen (Nunito + JetBrains Mono). */
:root{
  --navy:#264960; --teal:#31BCA9; --magenta:#D3277C;
  --bg:#FFFFFF; --surface:#FFFFFF; --field:#F3F5F6; --blob:#F3F5F6; --logo:#2b4860; --ink:#264960; --text:#3A4F5C; --muted:#6E828E; --line:#E1E8EC;
  --teal-ink:#1F9483; --magenta-ink:#C0206F; --magenta-soft:#FBE4EF; --danger:#B42318;
  --hatch:#264960;
  --grad:linear-gradient(30deg,#264960 10%,#31BCA9 125%);
  --grad-collab:linear-gradient(30deg,#264960 0%,#D3277C 120%);
  --font:"Nunito","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0F1C25; --surface:#16293A; --field:#1C3344; --ink:#E9F1F5; --text:#CFDBE2; --muted:#8FA5B2; --line:#25404F;
  --teal-ink:#5ED6C5; --magenta-ink:#F06BAA; --magenta-soft:#3A1A2C; --danger:#FF8A80; --hatch:rgba(120,170,195,.35); --blob:#132634; --logo:#E9F1F5; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0F1C25; --surface:#16293A; --field:#1C3344; --ink:#E9F1F5; --text:#CFDBE2; --muted:#8FA5B2; --line:#25404F;
  --teal-ink:#5ED6C5; --magenta-ink:#F06BAA; --magenta-soft:#3A1A2C; --danger:#FF8A80; --hatch:rgba(120,170,195,.35); --blob:#132634; --logo:#E9F1F5; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.55;position:relative;overflow-x:clip;min-height:100vh}
img{max-width:100%}
[hidden]{display:none!important}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

.shapes{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.shapes .blob{position:absolute;left:-520px;bottom:-520px;width:1000px;animation:spin 180s linear infinite}
.shapes .hatch{position:absolute;right:-400px;top:60px;width:760px}
@keyframes spin{to{transform:rotate(360deg)}}

.topbar{position:relative;z-index:5}
.topbar .wrap{padding-block:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{display:flex;align-items:center;min-height:44px}
.logo .lg{fill:var(--logo)}
.top-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.toplink{font-weight:700;color:var(--teal-ink);text-decoration:none}
.toplink:hover{text-decoration:underline}
.user-slot{display:flex;align-items:center;gap:10px}
.userchip{display:flex;align-items:center;gap:8px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--teal);color:#fff;font-weight:800;font-size:13px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.avatar img{width:100%;height:100%;object-fit:cover}
.uname{font-weight:700;color:var(--ink);font-size:14px}
.auth-note{font-size:13px;color:var(--danger)}

.btn{font:inherit;font-weight:700;font-size:14px;border-radius:999px;border:1px solid transparent;padding:7px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;line-height:1.3;white-space:nowrap}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{filter:brightness(1.15)}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--muted);border-color:var(--line)}
.btn-ghost:hover{color:var(--ink);border-color:var(--muted)}
.btn-danger{background:transparent;color:var(--danger);border-color:var(--line)}
.btn:disabled{opacity:.55;cursor:default}

@media (max-width:820px){
  .shapes .hatch{right:-240px;top:56px;width:400px}
  .shapes .blob{left:-300px;bottom:-300px;width:560px}
  .uname{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.shapes .blob{animation:none}}