/* =======================
   Vision Glass · Tokens
   ======================= */
:root{
  --text: #e9eaee;
  --text-dim:#b8bdc7;

  --glass-bg: rgba(255,255,255,0.055);
  --glass-border: rgba(255,255,255,0.14);
  --glass-hi: rgba(255,255,255,0.10);
  --shadow: rgba(0,0,0,0.45);

  --chip-bg: rgba(255,255,255,0.08);
  --chip-border: rgba(255,255,255,0.18);
  --chip-text: #eef1f9;

  --radius-xxl: 44px;
  --pad-y: 16px;
  --pad-x: 18px;
  --icon-size: 60px;
  --title-size: clamp(18px, 2.1vw, 22px);

  --btn-fg: #0e1014;
  --btn-bg: rgba(255,255,255,.9);
  --btn-bg-d: rgba(255,255,255,.1);
}

/* Light Theme Overrides */
:root.light{
  --text:#0e1014;
  --text-dim:#566072;

  --glass-bg: rgba(255,255,255,0.72);
  --glass-border: rgba(255,255,255,0.85);
  --glass-hi: rgba(255,255,255,0.55);
  --shadow: rgba(6,8,12,0.20);

  --chip-bg: rgba(0,0,0,0.06);
  --chip-border: rgba(0,0,0,0.10);
  --chip-text: #0e1014;

  --btn-fg: #0e1014;
  --btn-bg: rgba(255,255,255,.95);
  --btn-bg-d: rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font: 500 16px/1.45 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background:#0b0e13;
  overflow-x:hidden;
  transition: background-color 0.5s, color 0.5s;
}

.hidden{display:none!important}

/* ===== Background ===== */
.bg.layer{
  position:fixed; inset:-12% -8% -8% -8%; z-index:-2;
  transform: translateZ(0);
}
.bg.base{
  background:
    radial-gradient(45% 55% at 18% 22%, #171725 0%, transparent 70%),
    radial-gradient(50% 60% at 82% 28%, #151b27 0%, transparent 70%),
    radial-gradient(60% 65% at 50% 90%, #0f2130 0%, transparent 75%);
  animation: driftA 52s ease-in-out infinite;
  filter: saturate(1.05) contrast(1.03);
}
.bg.glow{
  z-index:-1; opacity:.45;
  background:
    radial-gradient(35% 40% at 15% 72%, #572f8a 0%, transparent 70%),
    radial-gradient(30% 35% at 86% 72%, #1b4a6c 0%, transparent 70%);
  animation: driftB 70s linear infinite reverse;
}
:root.light .bg.base{
  background:
    radial-gradient(60% 70% at 50% -10%, #f4f6fc 0%, transparent 70%),
    radial-gradient(60% 70% at 50% 110%, #f3f2f7 0%, transparent 70%);
}
:root.light .bg.glow{
  opacity:.6;
  background:
    radial-gradient(34% 40% at 15% 70%, #ffffff 0%, transparent 70%),
    radial-gradient(34% 40% at 80% 75%, #ffffff 0%, transparent 70%);
}

@keyframes driftA{0%{transform:translate3d(0,0,0) scale(1.04)}50%{transform:translate3d(0,-1.2%,0) scale(1.07)}100%{transform:translate3d(0,0,0) scale(1.04)}}
@keyframes driftB{0%{transform:translate3d(0,0,0) scale(1.10)}50%{transform:translate3d(0,1.2%,0) scale(1.13)}100%{transform:translate3d(0,0,0) scale(1.10)}}

/* ===== Header ===== */
.page-head{
  position:sticky; top:0; padding:22px 16px 8px;
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  background: linear-gradient(to bottom, rgba(8,10,14,0.55), rgba(8,10,14,0));
}
:root.light .page-head{
  background: linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0));
}

.page-head h1{
  margin:0 auto; max-width:980px; padding:0 8px;
  font-size: clamp(26px, 3.4vw, 42px);
  display:flex; align-items:center; justify-content:space-between;
}
.muted{color:var(--text-dim)}
.title-left{display:inline-flex; gap:.4ch; align-items:baseline}
.auth-right{display:inline-flex; align-items:center; gap:10px}

/* ===== Login/Logout Chips ===== */
.chip{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:10px 14px; border-radius:999px;
  background:var(--chip-bg);
  border:1px solid var(--chip-border);
  color:var(--chip-text);
  font-weight:600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  cursor:pointer;
  text-decoration:none;
}
.chip.ghost:hover{filter:brightness(1.05)}
.glogo{
  width:1.2rem; height:1.2rem; display:grid; place-items:center;
  font-weight:800; font-family:system-ui,ui-sans-serif;
}

/* Logout-Button (Iconkreis) */
.logout-btn{
  width:44px; height:44px; border-radius:999px; display:grid; place-items:center;
  border:1px solid var(--glass-border);
  background: var(--btn-bg-d);
  color: var(--text);
  backdrop-filter: blur(12px) saturate(160%);
}
:root.light .logout-btn{
  background: var(--btn-bg);
  border-color: rgba(0,0,0,.08);
}

/* Avatar */
.avatar{
  width:44px; height:44px; border-radius:999px; object-fit:cover;
  border:2px solid var(--chip-border);
  background:var(--glass-bg);
}

/* ===== Layout ===== */
.container{
  max-width:980px; margin:18px auto 64px; padding:0 12px 12px;
  display:grid; gap:14px;
}

/* ===== Karte ===== */
a.card{text-decoration:none; color:inherit}
a.card:visited{color:inherit}

.card{
  position:relative; display:flex; align-items:center; gap:14px;
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--radius-xxl);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 14px 36px var(--glass-hi),
    0 10px 38px var(--shadow);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  min-height: 82px;
}
.card:hover{ transform: translateY(-1.5px); border-color: rgba(255,255,255,.20) }

.icon-wrap{
  width: var(--icon-size); height: var(--icon-size); border-radius: 24px; flex:0 0 auto;
  display:grid; place-items:center;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.11);
  box-shadow: inset 0 8px 20px rgba(255,255,255,0.08);
}
:root.light .icon-wrap{
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.10);
  box-shadow: inset 0 8px 20px rgba(0,0,0,0.06);
}

iconify-icon{ font-size: 30px; color:#eef1f9 }
:root.light iconify-icon{ color:#111 }

.meta{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.title{ font-size: var(--title-size); font-weight:700; line-height:1.15 }
.row{ display:flex; align-items:center; gap:10px; color:var(--text-dim); font-size:14.5px }

.dot{ width:10px; height:10px; border-radius:99px; display:inline-block; box-shadow: 0 0 0 2px rgba(0,0,0,.28), 0 0 10px currentColor }
.dot.ok{ background:#34d399; color:#34d399 }
.dot.warn{ background:#f59e0b; color:#f59e0b }
.dot.off{ background:#6b7280; color:#6b7280 }
.dot.check{ background:#60a5fa; color:#60a5fa; animation:pulse 1.2s ease-in-out infinite }
@keyframes pulse{0%,100%{ box-shadow: 0 0 0 2px rgba(0,0,0,.28), 0 0 6px currentColor }50%{ box-shadow: 0 0 0 2px rgba(0,0,0,.28), 0 0 14px currentColor }}

/* ===== Theme FAB (Switcher) ===== */
.theme-fab{
  position:fixed; left:20px; bottom:22px; z-index:10;
  width:64px; height:64px; border-radius:999px; display:grid; place-items:center;
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow: 0 10px 30px var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(16px) saturate(160%);
  cursor:pointer;
  transition: all .25s ease;
}
.theme-fab:hover{ transform:scale(1.06) }
.theme-fab iconify-icon{font-size:26px; color:var(--text)}

/* ===== Login-Seite ===== */
.login-bg{
  min-height:100dvh; display:grid; place-items:center; padding:24px;
}
.login-box{
  width:min(560px, 92vw);
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius: 28px;
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 14px 36px var(--glass-hi),
    0 10px 38px var(--shadow);
  padding:28px 24px;
  text-align:center;
}
.login-title{font-size: clamp(22px, 4vw, 32px); margin: 6px 0 4px}
.login-sub{color:var(--text-dim); margin:0 0 18px}

.btn{
  appearance:none; border:0; cursor:pointer;
  padding:12px 18px; border-radius:999px; font-weight:700;
  display:inline-flex; align-items:center; gap:.6rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  text-decoration:none; user-select:none;
}
.btn.primary{ background: var(--btn-bg); color: var(--btn-fg); border:1px solid var(--chip-border) }
.btn.ghost{ background: var(--chip-bg); color: var(--chip-text); border:1px solid var(--chip-border) }
.btn:active{ transform: translateY(1px) }

/* Motion-Reduktion */
@media (prefers-reduced-motion: reduce){
  .bg.layer{ animation:none }
  .dot.check{ animation:none }
  .card{ transition: border-color .15s ease }
}

/* Kleinere Geräte */
@media (max-width:420px){
  :root{ --pad-y:14px; --pad-x:16px; --icon-size:56px; --title-size:18px; }
  .container{ gap:12px }
}