/* ===========================================================
   NOVA Music — modern dark UI
   violet / blue accents · glass · desktop + mobile
   =========================================================== */

:root{
  --bg:#07060d;
  --bg-2:#0b0916;
  --panel:rgba(255,255,255,.04);
  --panel-2:rgba(255,255,255,.06);
  --panel-3:rgba(255,255,255,.09);
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.14);
  --text:#f5f3ff;
  --muted:#a6a0c2;
  --muted-2:#726c8f;
  --violet:#8b5cf6;
  --violet-bright:#a78bfa;
  --blue:#3b82f6;
  --accent:linear-gradient(135deg,#8b5cf6 0%,#6366f1 45%,#3b82f6 100%);
  --accent-soft:linear-gradient(135deg,rgba(139,92,246,.22),rgba(59,130,246,.22));
  --danger:#f87171;
  --danger-bg:rgba(248,113,113,.12);
  --ok:#34d399;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.7);
  --glow:0 0 40px -8px rgba(139,92,246,.55);
  --font-display:"Sora",system-ui,sans-serif;
  --font-body:"Manrope",system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

body{
  font-family:var(--font-body);
  color:var(--text);
  background:
    radial-gradient(1100px 700px at 78% -8%,rgba(99,102,241,.20),transparent 60%),
    radial-gradient(900px 650px at 6% 4%,rgba(139,92,246,.18),transparent 55%),
    radial-gradient(700px 700px at 50% 120%,rgba(59,130,246,.14),transparent 60%),
    var(--bg);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

::selection{background:rgba(139,92,246,.4);color:#fff}

/* Dropdowns dunkel (Chrome + Firefox) */
select{color-scheme:dark}
select option,select optgroup{background-color:#14101f;color:var(--text)}
select option:checked,select option:hover{background-color:#2a2145;color:#fff}

/* subtle grain */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:20px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(139,92,246,.5);background-clip:content-box}

/* ===========================================================
   Shell
   =========================================================== */
.app-shell{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:264px 1fr;
  height:100vh;
  padding:14px;
  gap:14px;
}

/* ---------- Sidebar ---------- */
.sidebar{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius:24px;
  backdrop-filter:blur(20px);
  padding:22px 16px;
  overflow:hidden;
}

.brand{display:flex;align-items:center;gap:12px;padding:6px 8px 22px}
.brand-icon{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  font-size:22px;color:#fff;
  background:var(--accent);
  box-shadow:var(--glow);
}
.brand-name{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:.5px}
.brand-sub{font-size:12px;color:var(--muted);letter-spacing:3px;text-transform:uppercase;margin-top:-2px}

.side-nav{display:flex;flex-direction:column;gap:4px}
.side-nav button{
  display:flex;align-items:center;gap:14px;
  width:100%;padding:12px 14px;
  border:none;border-radius:14px;cursor:pointer;
  background:transparent;color:var(--muted);
  font-family:var(--font-body);font-size:15px;font-weight:600;
  text-align:left;
  transition:color .2s ease,background-color .2s ease,transform .15s ease;
}
.side-nav button .nav-ico{font-size:17px;width:22px;text-align:center;opacity:.9}
.side-nav button:hover{background:var(--panel-2);color:var(--text);transform:translateX(2px)}
.side-nav button.active{
  color:#fff;
  background:var(--accent-soft);
  box-shadow:inset 0 0 0 1px var(--border-strong);
  position:relative;
}
.side-nav button.active::before{
  content:"";position:absolute;left:-16px;top:20%;bottom:20%;width:3px;border-radius:3px;background:var(--accent);
}

.sidebar-playlists{margin-top:20px;padding-top:18px;border-top:1px solid var(--border);overflow-y:auto;flex:1;min-height:0}
.sidebar-title{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted-2);padding:0 10px 10px;font-weight:700}
.sidebar-playlist{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 10px;border:none;border-radius:10px;cursor:pointer;
  background:transparent;color:var(--muted);font-family:var(--font-body);font-size:14px;font-weight:500;text-align:left;
  transition:background-color .2s ease,color .2s ease;
}
.sidebar-playlist:hover{background:var(--panel-2);color:var(--text)}
.sidebar-playlist.active{color:#fff;background:var(--panel-2)}
.playlist-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;box-shadow:0 0 10px rgba(139,92,246,.7)}

/* ---------- Content ---------- */
.app-content{display:flex;flex-direction:column;min-width:0;min-height:0}

.topbar{
  display:flex;align-items:center;
  padding:0 4px 14px;
  flex:none;
}
.search-top{
  display:flex;align-items:center;gap:10px;
  padding:12px 18px;min-width:min(420px,60%);
  border:1px solid var(--border);border-radius:999px;cursor:pointer;
  background:var(--panel);color:var(--muted);
  font-family:var(--font-body);font-size:14px;
  transition:border-color .2s ease,background-color .2s ease,color .2s ease;
}
.search-top:hover{border-color:var(--border-strong);color:var(--text);background:var(--panel-2)}
.search-top-ico{font-size:16px}

main{
  flex:1;min-height:0;overflow-y:auto;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  border:1px solid var(--border);
  border-radius:24px;
  padding:34px 36px 130px;
  backdrop-filter:blur(6px);
  position:relative;
}

/* screens */
.app-screen{display:none;animation:fade .45s ease both}
.app-screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.eyebrow{
  font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:700;
  background:var(--accent);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:8px;
}

.content-section{margin-bottom:44px}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.section-heading h2{font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:.3px}

h1{font-family:var(--font-display)}

/* ---------- Home hero ---------- */
.home-hero{
  position:relative;overflow:hidden;
  border-radius:26px;
  padding:52px 46px;
  margin-bottom:30px;
  background:
    linear-gradient(120deg,rgba(139,92,246,.28),rgba(59,130,246,.12) 60%,transparent),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:space-between;gap:30px;
}
.home-hero-glow{position:absolute;width:460px;height:460px;right:-120px;top:-160px;border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,.6),transparent 65%);filter:blur(30px);pointer-events:none}
.home-hero-content{position:relative;z-index:1;max-width:560px}
.home-hero-content h1{font-size:clamp(34px,5vw,56px);line-height:1.05;font-weight:800;margin-bottom:16px;letter-spacing:-.5px}
.home-hero-content h1 span{background:var(--accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.home-hero-content p{color:var(--muted);font-size:16px;max-width:440px;margin-bottom:26px}
.home-actions{display:flex;gap:12px;flex-wrap:wrap}

.home-hero-art{position:relative;width:210px;height:210px;flex:none}
.hero-art-glow{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.55),transparent 60%);filter:blur(20px)}
.hero-art-disc{position:absolute;inset:22px;border-radius:50%;
  background:conic-gradient(from 0deg,#8b5cf6,#3b82f6,#6366f1,#8b5cf6);
  box-shadow:0 0 60px -8px rgba(139,92,246,.7),inset 0 0 30px rgba(0,0,0,.5);
  animation:spin 14s linear infinite}
.hero-art-disc::after{content:"";position:absolute;inset:38%;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 4px rgba(255,255,255,.1)}
.hero-art-note{position:absolute;inset:0;display:grid;place-items:center;font-size:44px;color:#fff;z-index:1;text-shadow:0 2px 20px rgba(0,0,0,.6)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Buttons ---------- */
.primary-action,.secondary-action{
  font-family:var(--font-body);font-weight:700;font-size:15px;
  padding:13px 24px;border-radius:999px;cursor:pointer;border:none;
  transition:transform .15s ease,box-shadow .25s ease,background-color .2s ease,border-color .2s ease;
}
.primary-action{color:#fff;background:var(--accent);box-shadow:0 10px 30px -8px rgba(99,102,241,.7)}
.primary-action:hover{transform:translateY(-2px);box-shadow:0 16px 40px -8px rgba(99,102,241,.85)}
.primary-action:active{transform:translateY(0)}
.secondary-action{color:var(--text);background:var(--panel-2);border:1px solid var(--border-strong)}
.secondary-action:hover{background:var(--panel-3);transform:translateY(-2px)}
.danger-action{background:linear-gradient(135deg,#f87171,#dc2626)!important;box-shadow:0 10px 30px -8px rgba(220,38,38,.6)!important}

/* ---------- Shortcuts ---------- */
.home-shortcuts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:44px}
.home-shortcut{
  display:flex;align-items:center;gap:16px;
  padding:20px;border-radius:var(--radius);cursor:pointer;text-align:left;
  background:var(--panel);border:1px solid var(--border);color:var(--text);
  transition:transform .18s ease,border-color .2s ease,background-color .2s ease;
}
.home-shortcut:hover{transform:translateY(-4px);border-color:var(--border-strong);background:var(--panel-2)}
.home-shortcut .shortcut-icon{
  width:52px;height:52px;border-radius:14px;flex:none;display:grid;place-items:center;font-size:22px;color:#fff;
  background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--border-strong)}
.home-shortcut strong{display:block;font-family:var(--font-display);font-size:16px;font-weight:600}
.home-shortcut small{display:block;color:var(--muted);font-size:13px;margin-top:2px}

/* ---------- Song list / grid ---------- */
.song-list{display:flex;flex-direction:column;gap:8px}
.song-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}

.song{
  position:relative;
  display:flex;align-items:center;gap:14px;width:100%;
  padding:13px 16px;border-radius:14px;cursor:pointer;text-align:left;
  background:var(--panel);border:1px solid transparent;color:var(--text);
  font-family:var(--font-body);font-size:15px;
  transition:background-color .18s ease,border-color .2s ease,transform .12s ease;
}
.song:hover{background:var(--panel-2);border-color:var(--border);transform:translateX(3px)}
.song .num{width:34px;flex:none;color:var(--muted-2);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.song .songid{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.song .playmini{color:var(--violet-bright);opacity:0;transition:opacity .2s ease;font-size:13px}
.song:hover .playmini{opacity:1}
.history-time{display:block;color:var(--muted-2);font-size:12px;font-weight:500;margin-top:2px}

/* add / remove buttons inside rows */
.playlist-add,.playlist-remove{
  width:30px;height:30px;flex:none;border-radius:9px;cursor:pointer;
  border:1px solid var(--border);background:var(--panel-2);color:var(--text);
  font-size:16px;line-height:1;display:grid;place-items:center;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .15s ease;
}
.playlist-add:hover{background:var(--accent-soft);border-color:var(--border-strong);transform:scale(1.08)}
.playlist-remove{color:var(--danger)}
.playlist-remove:hover{background:var(--danger-bg);border-color:rgba(248,113,113,.4);transform:scale(1.08)}
.playlist-song-row{display:flex;align-items:center;gap:8px}
.playlist-song-row .song{flex:1}

/* ---------- Playlist header ---------- */
.playlist-header{display:flex;align-items:flex-end;gap:26px;
  padding:34px;border-radius:26px;margin-bottom:34px;
  background:linear-gradient(120deg,rgba(139,92,246,.26),rgba(59,130,246,.10),transparent);
  border:1px solid var(--border-strong)}
.playlist-cover{width:150px;height:150px;flex:none;border-radius:20px;display:grid;place-items:center;font-size:60px;color:#fff;
  background:var(--accent);box-shadow:var(--shadow),var(--glow)}
.playlist-info h1{font-size:clamp(28px,4vw,44px);font-weight:800;margin:6px 0 6px;letter-spacing:-.5px}
.playlist-info p{color:var(--muted);margin-bottom:18px}

/* ---------- Account ---------- */
.account-header{display:flex;align-items:center;gap:22px;padding-bottom:10px}
.account-avatar{width:88px;height:88px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-size:38px;font-weight:700;color:#fff;
  background:var(--accent);box-shadow:var(--glow);text-transform:uppercase}
.account-header h1{font-size:32px;font-weight:800;margin:6px 0 2px}
.account-header p{color:var(--muted)}

.account-settings{max-width:620px}
.account-group{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.account-action{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:16px 20px;border-radius:14px;cursor:pointer;
  background:var(--panel);border:1px solid var(--border);color:var(--text);
  font-family:var(--font-body);font-size:15px;font-weight:600;
  transition:background-color .18s ease,border-color .2s ease,transform .12s ease;
}
.account-action:hover{background:var(--panel-2);border-color:var(--border-strong);transform:translateX(3px)}
.account-action-main{display:flex;align-items:center;gap:14px}
.account-action-ico{width:26px;text-align:center;font-size:16px;opacity:.85}
.account-action-arrow{color:var(--muted-2);font-size:20px}
.account-action.danger{color:var(--danger)}
.account-action.danger:hover{background:var(--danger-bg);border-color:rgba(248,113,113,.4)}
.account-danger-zone{padding:18px;border:1px solid rgba(248,113,113,.22);border-radius:var(--radius);background:rgba(248,113,113,.04)}
.danger-zone-title{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--danger);font-weight:700;margin-bottom:12px}

/* ---------- Search ---------- */
.search-field{position:relative;max-width:640px;margin-bottom:24px}
.search-field-ico{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:18px;pointer-events:none}
#searchInput{
  width:100%;padding:16px 18px 16px 48px;border-radius:14px;
  background:var(--panel);border:1px solid var(--border);color:var(--text);
  font-family:var(--font-body);font-size:16px;outline:none;
  transition:border-color .2s ease,background-color .2s ease}
#searchInput:focus{border-color:var(--violet);background:var(--panel-2);box-shadow:0 0 0 3px rgba(139,92,246,.18)}
.search-results{display:flex;flex-direction:column;gap:8px;color:var(--muted)}
.search-results>div:first-child{color:var(--muted-2);font-size:13px;padding:2px 2px 6px}
.search-song{background:var(--panel)}

/* ---------- Login ---------- */
body.pre-login .app-shell,
body.pre-login .player-bar{display:none!important}
.login-screen{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:radial-gradient(1000px 700px at 70% 10%,rgba(99,102,241,.22),transparent 60%),var(--bg);overflow:hidden}
.login-glow{position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(40px);pointer-events:none;
  background:radial-gradient(circle,rgba(139,92,246,.5),transparent 65%);top:-160px;left:-120px}
.login-glow-2{background:radial-gradient(circle,rgba(59,130,246,.45),transparent 65%);top:auto;left:auto;bottom:-180px;right:-140px}
.login-card{position:relative;z-index:1;width:min(420px,92vw);padding:40px 36px;border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid var(--border-strong);backdrop-filter:blur(22px);box-shadow:var(--shadow);
  animation:fade .5s ease both}
.login-brand{font-family:var(--font-display);font-weight:800;font-size:22px;margin-bottom:26px}
.login-brand span{color:var(--muted)}
.login-eyebrow{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.login-card h1{font-size:32px;font-weight:800;margin-bottom:8px}
.login-subtitle{color:var(--muted);margin-bottom:26px}
.login-form{display:flex;flex-direction:column;gap:16px}
.login-form label,.modal-form label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}
.login-form input,.modal-form input{
  padding:14px 16px;border-radius:12px;background:rgba(0,0,0,.25);
  border:1px solid var(--border);color:var(--text);font-family:var(--font-body);font-size:15px;outline:none;
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
.login-form input:focus,.modal-form input:focus{border-color:var(--violet);background:rgba(0,0,0,.35);box-shadow:0 0 0 3px rgba(139,92,246,.18)}
.login-submit{margin-top:6px;width:100%}
.login-error,.modal-error{color:var(--danger);font-size:13px;font-weight:600;min-height:0}
.login-error:empty,.modal-error:empty{display:none}
.login-switch{margin-top:20px;font-size:13px;color:var(--muted);text-align:center}
.login-link{background:none;border:none;padding:0;margin-left:6px;color:var(--violet);font-family:var(--font-body);font-weight:700;font-size:13px;cursor:pointer}
.login-link:hover{text-decoration:underline}
.login-success{margin-top:8px;padding:16px 18px;border-radius:14px;background:rgba(52,211,153,.14);border:1px solid rgba(52,211,153,.4);color:#6ee7b7;font-size:14px;font-weight:600;line-height:1.5}
.role-tag.pending{background:rgba(251,191,36,.16);color:#fcd34d;border-color:rgba(251,191,36,.4)}
.admin-user-row.pending{border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.06)}
.admin-user-actions{display:flex;gap:8px;flex-shrink:0}
.role-select{padding:7px 12px;border-radius:10px;font-family:var(--font-body);font-weight:600;font-size:13px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer;flex-shrink:0}
.role-select:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(139,92,246,.18);outline:none}
.login-form.hidden{display:none}


/* ---------- Player bar ---------- */
#audio{display:none!important}
.player-bar{
  position:fixed;left:14px;right:14px;bottom:14px;z-index:40;
  display:grid;grid-template-columns:minmax(180px,1fr) minmax(300px,1.5fr) minmax(140px,1fr);
  align-items:center;gap:22px;
  padding:12px 22px;border-radius:20px;
  background:linear-gradient(180deg,rgba(23,19,40,.9),rgba(12,10,22,.94));
  border:1px solid var(--border-strong);backdrop-filter:blur(26px);
  box-shadow:var(--shadow);
}

.player-song{display:flex;align-items:center;gap:14px;min-width:0}
.player-cover{width:64px;height:64px;flex:none;border-radius:14px;overflow:hidden;position:relative;
  background:#100b22;box-shadow:var(--glow),inset 0 0 0 1px var(--border-strong)}
.player-cover canvas{width:100%;height:100%;display:block;border-radius:inherit}
.player-meta{min-width:0;flex:1}
.player-meta strong{display:block;font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-meta span{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-fav{flex:none;width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;background:transparent;color:var(--violet-bright);font-size:22px;transition:transform .15s ease,background-color .2s ease}
.player-fav:hover{background:var(--panel-2);transform:scale(1.1)}

.player-center{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0;width:100%}
.player-controls{display:flex;align-items:center;gap:10px}
.player-controls button{
  width:40px;height:40px;border-radius:50%;cursor:pointer;border:1px solid transparent;
  background:transparent;color:var(--text);font-size:22px;display:grid;place-items:center;
  transition:background-color .2s ease,color .2s ease,transform .15s ease}
.player-controls button:hover:not(:disabled){background:var(--panel-2);transform:scale(1.08)}
.player-controls button:disabled{opacity:.3;cursor:not-allowed}
.player-controls .play{width:48px;height:48px;color:#fff;background:var(--accent);box-shadow:0 8px 24px -6px rgba(99,102,241,.85);font-size:18px}
.player-controls .play:hover{transform:scale(1.08)}

.player-seek{display:flex;align-items:center;gap:12px;width:100%}
.player-time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:40px;text-align:center;font-weight:600}
.progress{position:relative;flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,.12);cursor:pointer;touch-action:none;transition:height .15s ease}
.progress:hover{height:9px}
.progress-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:var(--accent);box-shadow:0 0 12px -2px rgba(139,92,246,.85)}
.progress-handle{position:absolute;top:50%;left:0;width:13px;height:13px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 10px rgba(139,92,246,.95);opacity:0;transition:opacity .2s ease}
.progress:hover .progress-handle{opacity:1}

.player-side{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.vol-ico{color:var(--muted);display:grid;place-items:center;flex:none}
.vol-ico svg{width:18px;height:18px;display:block}
.volume-slider{-webkit-appearance:none;appearance:none;width:96px;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--violet) 100%,rgba(255,255,255,.14) 100%);outline:none;cursor:pointer}
.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(139,92,246,.95);cursor:pointer}
.volume-slider::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(139,92,246,.95);cursor:pointer}

/* ---------- Equalizer ---------- */
.eq-wrap{position:relative;flex:none}
.eq-button{padding:7px 12px;border-radius:10px;border:1px solid var(--border);background:var(--panel-2);color:var(--muted);
  font-family:var(--font-body);font-weight:800;font-size:12px;letter-spacing:1px;cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
.eq-button:hover{color:var(--text);border-color:var(--border-strong)}
.eq-button.active{color:#fff;background:var(--accent-soft);border-color:var(--border-strong);box-shadow:0 0 14px -4px rgba(139,92,246,.7)}
.eq-panel{position:absolute;bottom:calc(100% + 14px);right:0;width:250px;padding:16px;z-index:50;
  border-radius:16px;background:linear-gradient(180deg,rgba(28,24,46,.98),rgba(16,13,28,.98));
  border:1px solid var(--border-strong);box-shadow:var(--shadow);display:none}
.eq-panel.open{display:block;animation:pop .22s ease both}
.eq-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.eq-panel-head span{font-family:var(--font-display);font-weight:700;font-size:14px}
.eq-switch{position:relative;display:inline-block;width:42px;height:22px;cursor:pointer}
.eq-switch input{opacity:0;width:0;height:0}
.eq-slider-track{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.14);transition:background-color .2s ease}
.eq-slider-track::before{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s ease}
.eq-switch input:checked + .eq-slider-track{background:var(--accent)}
.eq-switch input:checked + .eq-slider-track::before{transform:translateX(20px)}
.eq-bands{display:flex;flex-direction:column;gap:14px;margin-bottom:14px;opacity:.45;pointer-events:none;transition:opacity .2s ease}
.eq-panel.eq-active .eq-bands{opacity:1;pointer-events:auto}
.eq-band{display:grid;grid-template-columns:52px 1fr 30px;align-items:center;gap:10px}
.eq-band-label{font-size:12px;color:var(--muted);font-weight:600}
.eq-band-val{font-size:12px;color:var(--violet-bright);font-variant-numeric:tabular-nums;text-align:right;font-weight:700}
.eq-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:rgba(255,255,255,.14);outline:none;cursor:pointer}
.eq-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--violet-bright);box-shadow:0 0 8px rgba(139,92,246,.9);cursor:pointer}
.eq-range::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:var(--violet-bright);box-shadow:0 0 8px rgba(139,92,246,.9);cursor:pointer}
.eq-reset{width:100%;padding:9px;border-radius:10px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);
  font-family:var(--font-body);font-weight:600;font-size:13px;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}
.eq-reset:hover{background:var(--panel-3);border-color:var(--border-strong)}

/* ---------- Modals ---------- */
.modal-overlay{
  position:fixed;inset:0;z-index:80;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(4,3,10,.72);backdrop-filter:blur(8px)}
.modal-overlay.open{display:flex;animation:fade .25s ease both}
.modal{display:none;width:min(460px,94vw);padding:28px;border-radius:22px;
  background:linear-gradient(180deg,rgba(28,24,46,.98),rgba(16,13,28,.98));
  border:1px solid var(--border-strong);box-shadow:var(--shadow);
  animation:pop .3s cubic-bezier(.2,.8,.3,1.2) both}
.modal.open{display:block}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(12px)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.modal-head h3{font-family:var(--font-display);font-size:20px;font-weight:700}
.modal-close{width:34px;height:34px;border-radius:10px;border:none;cursor:pointer;background:var(--panel-2);color:var(--muted);font-size:20px;transition:background-color .2s,color .2s}
.modal-close:hover{background:var(--panel-3);color:var(--text)}
.modal-sub{color:var(--muted);font-size:14px;margin-bottom:20px;line-height:1.5}
.modal-form{display:flex;flex-direction:column;gap:16px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.modal-actions .primary-action,.modal-actions .secondary-action{padding:11px 20px;font-size:14px}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:104px;transform:translate(-50%,20px);z-index:90;
  padding:13px 22px;border-radius:999px;font-weight:600;font-size:14px;
  background:linear-gradient(135deg,rgba(28,24,46,.98),rgba(16,13,28,.98));
  border:1px solid var(--border-strong);box-shadow:var(--shadow);color:#fff;
  opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.ok{border-color:rgba(52,211,153,.4)}
.toast.err{border-color:rgba(248,113,113,.4)}

.hidden-canvas{display:none}

/* ---------- Rollen / Vorschläge / Admin ---------- */
.side-nav button.role-nav{display:none}
.side-nav button.role-nav.role-visible{display:flex}

.role-badge{display:none;margin-top:12px;padding:5px 14px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.5px;
  background:var(--accent-soft);border:1px solid var(--border-strong);color:#fff}
.role-badge.show{display:inline-block}
.role-badge.admin{background:linear-gradient(135deg,rgba(59,130,246,.35),rgba(139,92,246,.35))}

.suggestion-form{display:flex;flex-direction:column;gap:16px;max-width:620px}
.suggestion-form label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}
.suggestion-form select,.suggestion-form textarea{
  padding:13px 15px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid var(--border);
  color:var(--text);font-family:var(--font-body);font-size:15px;outline:none;resize:vertical;
  transition:border-color .2s ease,box-shadow .2s ease}
.suggestion-form select:focus,.suggestion-form textarea:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(139,92,246,.18)}
.suggestion-form button{align-self:flex-start}

.suggestion-list{display:flex;flex-direction:column;gap:12px;max-width:840px}
.suggestion-card{padding:16px 18px;border-radius:14px;background:var(--panel);border:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.suggestion-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.suggestion-type{font-family:var(--font-display);font-weight:700;font-size:14px}
.suggestion-meta{font-size:12px;color:var(--muted-2)}
.suggestion-text{color:var(--text);font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.suggestion-actions{display:flex;gap:8px;margin-top:4px}
.status-pill{padding:4px 12px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border:1px solid transparent}
.status-offen{background:rgba(255,255,255,.08);color:var(--muted);border-color:var(--border)}
.status-angenommen{background:rgba(52,211,153,.15);color:#6ee7b7;border-color:rgba(52,211,153,.4)}
.status-abgelehnt{background:rgba(248,113,113,.14);color:#fca5a5;border-color:rgba(248,113,113,.4)}
.mini-btn{padding:7px 14px;border-radius:10px;cursor:pointer;font-family:var(--font-body);font-weight:600;font-size:13px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);transition:background-color .2s ease}
.mini-btn.accept{background:rgba(52,211,153,.15);color:#6ee7b7;border-color:rgba(52,211,153,.4)}
.mini-btn.accept:hover{background:rgba(52,211,153,.26)}
.mini-btn.reject{background:rgba(248,113,113,.14);color:#fca5a5;border-color:rgba(248,113,113,.4)}
.mini-btn.reject:hover{background:rgba(248,113,113,.24)}
.list-empty{color:var(--muted-2);font-size:14px;padding:6px 2px}

.admin-user-list{display:flex;flex-direction:column;gap:10px;max-width:740px}
.admin-user-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-radius:14px;background:var(--panel);border:1px solid var(--border)}
.admin-user-main{display:flex;align-items:center;gap:12px;min-width:0}
.admin-user-name{font-weight:700;font-size:15px}
.role-tag{padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.5px;background:var(--panel-2);border:1px solid var(--border);color:var(--muted)}
.role-tag.active_user{background:var(--accent-soft);color:#fff;border-color:var(--border-strong)}
.role-tag.admin{background:linear-gradient(135deg,rgba(59,130,246,.32),rgba(139,92,246,.32));color:#fff;border-color:var(--border-strong)}

.role-tag.moderator{background:rgba(59,130,246,.18);color:#bfdbfe;border-color:rgba(59,130,246,.38)}
.role-tag.music_manager{background:rgba(139,92,246,.18);color:#ddd6fe;border-color:rgba(139,92,246,.38)}
.role-tag.owner{background:linear-gradient(135deg,rgba(245,158,11,.25),rgba(139,92,246,.28));color:#fff;border-color:rgba(245,158,11,.45)}
.role-badge.moderator{background:rgba(59,130,246,.22)}
.role-badge.music_manager{background:rgba(139,92,246,.22)}
.role-badge.owner{background:linear-gradient(135deg,rgba(245,158,11,.35),rgba(139,92,246,.35))}

/* Musikverwaltung */
.music-search{max-width:520px}
.music-list{display:flex;flex-direction:column;gap:12px;max-width:900px}
.music-card{padding:16px 18px;border-radius:14px;background:var(--panel);border:1px solid var(--border);display:flex;flex-direction:column;gap:12px}
.music-card-id{font-size:12px;color:var(--muted-2);font-weight:600}
.music-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.music-fields label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--muted)}
.music-fields input,.music-fields select{
  padding:11px 13px;border-radius:10px;background:rgba(0,0,0,.25);border:1px solid var(--border);
  color:var(--text);font-family:var(--font-body);font-size:14px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}
.music-fields input:focus,.music-fields select:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(139,92,246,.18)}
.music-card-actions{display:flex;justify-content:flex-end}

/* Info & Regeln */
.info-view{display:flex;flex-direction:column;gap:26px;max-width:760px}
.info-block h3{font-family:var(--font-display);font-size:18px;font-weight:700;margin-bottom:8px}
.info-block p{color:var(--muted);font-size:15px;line-height:1.65;white-space:pre-wrap;word-break:break-word}
.info-form{display:flex;flex-direction:column;gap:16px;max-width:760px}
.info-form label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}
.info-form textarea{padding:13px 15px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid var(--border);
  color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.5;outline:none;resize:vertical;
  transition:border-color .2s ease,box-shadow .2s ease}
.info-form textarea:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(139,92,246,.18)}
.info-form-actions{display:flex;gap:10px;justify-content:flex-end}

/* Teil 4: Filter, Chips, Badges, Toolbars */
.genre-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.genre-chip{padding:8px 16px;border-radius:999px;cursor:pointer;font-family:var(--font-body);font-weight:600;font-size:13px;
  background:var(--panel);border:1px solid var(--border);color:var(--muted);transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.genre-chip:hover{color:var(--text);border-color:var(--border-strong)}
.genre-chip.active{color:#fff;background:var(--accent-soft);border-color:var(--border-strong)}
.genre-badge{flex:none;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.3px;
  background:var(--accent-soft);border:1px solid var(--border-strong);color:var(--violet-bright)}
.admin-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.filter-tabs{display:flex;gap:6px;flex-wrap:wrap}
.filter-tab{padding:8px 14px;border-radius:10px;cursor:pointer;font-family:var(--font-body);font-weight:600;font-size:13px;
  background:var(--panel);border:1px solid var(--border);color:var(--muted);transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.filter-tab:hover{color:var(--text)}
.filter-tab.active{color:#fff;background:var(--accent-soft);border-color:var(--border-strong)}
.admin-search-input{padding:11px 15px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid var(--border);
  color:var(--text);font-family:var(--font-body);font-size:14px;outline:none;min-width:220px;max-width:320px;margin-bottom:16px;
  transition:border-color .2s ease,box-shadow .2s ease}
.admin-search-input:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(139,92,246,.18)}
.admin-toolbar .admin-search-input{margin-bottom:0}
.suggestion-notice{display:none;margin-bottom:14px;padding:12px 16px;border-radius:12px;font-size:14px;font-weight:600;
  background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.35);color:#6ee7b7}
.suggestion-notice.show{display:block}

/* ===========================================================
   Responsive — Smartphone
   =========================================================== */
@media (max-width:900px){
  .app-shell{grid-template-columns:1fr;padding:10px;gap:10px}

  /* sidebar -> bottom tab bar */
  .sidebar{
    position:fixed;left:10px;right:10px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:45;
    flex-direction:row;align-items:center;
    padding:8px;border-radius:20px;overflow:visible;
  }
  .brand,.sidebar-playlists{display:none}
  .side-nav{flex-direction:row;justify-content:space-between;width:100%;gap:2px}
  .side-nav button{flex-direction:column;gap:3px;padding:8px 4px;font-size:10px;border-radius:12px}
  .side-nav button span:not(.nav-ico){font-size:10px}
  .side-nav button .nav-ico{font-size:19px;width:auto}
  .side-nav button.active::before{display:none}
  .side-nav button:hover{transform:none}

  .topbar{padding:2px 2px 10px}
  .search-top{min-width:0;width:100%}

  main{padding:22px 18px 240px;border-radius:20px}

  .home-hero{flex-direction:column;text-align:left;align-items:flex-start;padding:34px 24px}
  .home-hero-art{display:none}
  .home-shortcuts{grid-template-columns:1fr}
  .section-heading h2{font-size:22px}

  .playlist-header{flex-direction:column;align-items:flex-start;gap:18px;padding:24px}
  .playlist-cover{width:110px;height:110px;font-size:44px}

  .account-header{gap:16px}
  .account-avatar{width:68px;height:68px;font-size:28px}

  /* player above the tab bar */
  .player-bar{
    left:10px;right:10px;bottom:calc(150px + env(safe-area-inset-bottom));
    display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:10px 14px}
  .player-side{justify-content:flex-end}
  .player-side .vol-ico,.player-side .volume-slider{display:none}
  .player-song{width:100%}
  .player-center{width:100%}
  .player-cover{width:48px;height:48px}
  .player-controls .play{width:44px;height:44px}
  .player-controls button{width:38px;height:38px}

  .music-fields{grid-template-columns:1fr}
  .admin-toolbar{flex-direction:column;align-items:stretch}
  .admin-search-input{max-width:none;width:100%}
}

@media (max-width:420px){
  .home-hero-content h1{font-size:30px}
  .song-grid{grid-template-columns:1fr}
}


/* === NOVA MOBILE COMPACT FIX 2026-08-24 === */
@media (max-width:900px){

  /* Inhalt bekommt unten genug Platz */
  main{
    padding:18px 14px 195px;
  }

  /* Mobile Navigation: kompakt + horizontal scrollbar */
  .sidebar{
    left:8px;
    right:8px;
    bottom:calc(8px + env(safe-area-inset-bottom));
    padding:6px;
    border-radius:16px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .sidebar::-webkit-scrollbar{
    display:none;
  }

  .side-nav{
    width:max-content;
    min-width:100%;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:4px;
  }

  .side-nav button{
    flex:0 0 58px;
    width:58px;
    min-width:58px;
    padding:6px 4px;
    gap:2px;
    border-radius:10px;
  }

  .side-nav button .nav-ico{
    font-size:18px;
  }

  .side-nav button span:not(.nav-ico){
    display:block;
    max-width:54px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:9px;
  }

  /* Player kompakt über der Navigation */
  .player-bar{
    left:8px;
    right:8px;
    bottom:calc(78px + env(safe-area-inset-bottom));

    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "song side"
      "center center";

    align-items:center;
    gap:6px 8px;
    padding:8px 10px;
    border-radius:16px;
  }

  .player-song{
    grid-area:song;
    width:auto;
    gap:8px;
    min-width:0;
  }

  .player-center{
    grid-area:center;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:8px;
    width:100%;
  }

  .player-side{
    grid-area:side;
    align-self:center;
    justify-content:flex-end;
  }

  .player-cover{
    width:40px;
    height:40px;
    border-radius:10px;
  }

  .player-meta strong{
    font-size:13px;
  }

  .player-meta span{
    font-size:10px;
  }

  .player-fav{
    width:32px;
    height:32px;
    font-size:20px;
  }

  .player-controls{
    gap:4px;
  }

  .player-controls button{
    width:32px;
    height:32px;
    font-size:18px;
  }

  .player-controls .play{
    width:38px;
    height:38px;
    font-size:15px;
  }

  .player-seek{
    min-width:0;
    gap:6px;
  }

  .player-time{
    min-width:30px;
    font-size:10px;
  }

  .player-side .vol-ico,
  .player-side .volume-slider{
    display:none;
  }

  .eq-panel{
    max-width:calc(100vw - 32px);
  }

  .toast{
    bottom:calc(190px + env(safe-area-inset-bottom));
  }
}

@media (max-width:420px){
  .side-nav button{
    flex-basis:54px;
    width:54px;
    min-width:54px;
  }
}


/* === NOVA MOBILE HARD COMPACT FIX === */
@media (max-width:900px){

  main{
    padding:14px 12px calc(180px + env(safe-area-inset-bottom)) !important;
  }

  /* Untere Navigation */
  .sidebar{
    left:6px !important;
    right:6px !important;
    bottom:calc(6px + env(safe-area-inset-bottom)) !important;
    height:62px !important;
    padding:5px !important;
    border-radius:14px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .sidebar::-webkit-scrollbar{
    display:none;
  }

  .side-nav{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    width:max-content !important;
    min-width:max-content !important;
    height:100% !important;
    gap:3px !important;
  }

  .side-nav button{
    flex:0 0 56px !important;
    width:56px !important;
    min-width:56px !important;
    height:50px !important;
    padding:4px 2px !important;
    gap:1px !important;
    border-radius:9px !important;
  }

  .side-nav button .nav-ico{
    font-size:17px !important;
    width:auto !important;
  }

  .side-nav button span:not(.nav-ico){
    display:block !important;
    width:52px !important;
    max-width:52px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:8px !important;
    line-height:10px !important;
  }

  /* Kompakter Player */
  .player-bar{
    left:6px !important;
    right:6px !important;
    bottom:calc(74px + env(safe-area-inset-bottom)) !important;

    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:
      "song side"
      "center center" !important;

    align-items:center !important;
    gap:4px 6px !important;
    padding:6px 8px !important;
    border-radius:14px !important;
  }

  .player-song{
    grid-area:song !important;
    display:flex !important;
    width:auto !important;
    height:38px !important;
    align-items:center !important;
    gap:7px !important;
    min-width:0 !important;
  }

  .player-cover{
    width:34px !important;
    height:34px !important;
    border-radius:8px !important;
  }

  .player-meta{
    min-width:0 !important;
  }

  .player-meta strong{
    font-size:12px !important;
    line-height:15px !important;
  }

  .player-meta span{
    display:none !important;
  }

  .player-fav{
    width:28px !important;
    height:28px !important;
    font-size:18px !important;
  }

  .player-side{
    grid-area:side !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:4px !important;
  }

  .player-side .vol-ico,
  .player-side .volume-slider{
    display:none !important;
  }

  .eq-button{
    padding:5px 8px !important;
    font-size:10px !important;
  }

  .player-center{
    grid-area:center !important;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:center !important;
    gap:6px !important;
    width:100% !important;
    height:40px !important;
  }

  .player-controls{
    display:flex !important;
    gap:2px !important;
  }

  .player-controls button{
    width:30px !important;
    height:30px !important;
    font-size:17px !important;
  }

  .player-controls .play{
    width:36px !important;
    height:36px !important;
    font-size:14px !important;
  }

  .player-seek{
    min-width:0 !important;
    width:100% !important;
    gap:4px !important;
  }

  .progress{
    height:4px !important;
  }

  .player-time{
    min-width:27px !important;
    font-size:9px !important;
  }

  .eq-panel{
    max-width:calc(100vw - 24px) !important;
  }

  .toast{
    bottom:calc(180px + env(safe-area-inset-bottom)) !important;
  }
}


/* === NOVA MOBILE APP UI V1 === */
@media (max-width:900px){

  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body{
    min-height:100dvh;
  }

  .app-shell{
    min-height:100dvh;
    padding:8px !important;
    gap:8px !important;
  }

  /* App-artige Kopfzeile */
  .topbar{
    position:sticky;
    top:0;
    z-index:30;
    padding:6px 0 8px !important;
    background:rgba(9,8,16,.88);
    backdrop-filter:blur(20px);
  }

  .search-top{
    width:100% !important;
    min-width:0 !important;
    height:44px;
    padding:0 16px !important;
    border-radius:16px !important;
  }

  main{
    padding:16px 14px calc(190px + env(safe-area-inset-bottom)) !important;
    border-radius:18px !important;
  }

  /* Home kompakter */
  .home-hero{
    padding:24px 18px !important;
    margin-bottom:16px !important;
    border-radius:18px !important;
  }

  .home-hero-content h1{
    font-size:28px !important;
    margin-bottom:10px !important;
  }

  .home-hero-content p{
    font-size:14px !important;
    margin-bottom:16px !important;
  }

  .home-actions{
    gap:8px !important;
  }

  .home-actions button{
    padding:11px 16px !important;
    font-size:13px !important;
  }

  .home-shortcuts{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .home-shortcuts > *{
    min-width:0 !important;
    min-height:112px !important;
    padding:16px !important;
    border-radius:16px !important;
  }

  .content-section{
    margin-bottom:24px !important;
  }

  .section-heading{
    margin-bottom:14px !important;
  }

  .section-heading h2{
    font-size:22px !important;
  }

  /* =========================
     MOBILE MINI PLAYER
     ========================= */
  .player-bar{
    left:8px !important;
    right:8px !important;
    bottom:calc(82px + env(safe-area-inset-bottom)) !important;

    min-height:96px !important;
    padding:7px 10px !important;

    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:
      "song side"
      "center center" !important;

    gap:5px 8px !important;
    border-radius:18px !important;
  }

  .player-song{
    grid-area:song !important;
    width:auto !important;
    height:40px !important;
    gap:8px !important;
    min-width:0 !important;
  }

  .player-cover{
    width:38px !important;
    height:38px !important;
    border-radius:10px !important;
  }

  .player-meta strong{
    font-size:13px !important;
    line-height:16px !important;
  }

  .player-meta span{
    display:none !important;
  }

  .player-fav{
    width:30px !important;
    height:30px !important;
    font-size:19px !important;
  }

  .player-side{
    grid-area:side !important;
    gap:4px !important;
  }

  .player-side .vol-ico,
  .player-side .volume-slider{
    display:none !important;
  }

  .eq-button{
    padding:5px 8px !important;
    font-size:10px !important;
  }

  .player-center{
    grid-area:center !important;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:center !important;
    width:100% !important;
    height:38px !important;
    gap:7px !important;
  }

  .player-controls{
    gap:2px !important;
  }

  .player-controls button{
    width:30px !important;
    height:30px !important;
    font-size:17px !important;
  }

  .player-controls .play{
    width:36px !important;
    height:36px !important;
    font-size:14px !important;
  }

  .player-seek{
    width:100% !important;
    min-width:0 !important;
    gap:5px !important;
  }

  .player-time{
    min-width:28px !important;
    font-size:9px !important;
  }

  .progress{
    height:4px !important;
  }

  /* =========================
     ECHTE BOTTOM NAV
     ========================= */
  .sidebar{
    left:8px !important;
    right:8px !important;
    bottom:calc(6px + env(safe-area-inset-bottom)) !important;

    height:68px !important;
    padding:5px !important;

    overflow:hidden !important;
    border-radius:18px !important;
  }

  .brand,
  .sidebar-playlists{
    display:none !important;
  }

  .side-nav{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    width:100% !important;
    min-width:0 !important;
    height:100% !important;
    gap:2px !important;
  }

  .side-nav button{
    width:100% !important;
    min-width:0 !important;
    height:58px !important;
    padding:5px 2px !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;

    gap:2px !important;
    border-radius:12px !important;
  }

  .side-nav button .nav-ico{
    width:auto !important;
    font-size:18px !important;
  }

  .side-nav button span:not(.nav-ico){
    display:block !important;
    max-width:100% !important;
    font-size:9px !important;
    line-height:11px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .side-nav button.mobile-extra-nav{
    display:none !important;
  }

  .side-nav .mobile-more-button{
    display:flex !important;
  }

  /* Mehr-Menü */
  .mobile-more-overlay{
    position:fixed;
    inset:0;
    z-index:120;
    display:none;
    align-items:flex-end;
    background:rgba(3,3,9,.68);
    backdrop-filter:blur(8px);
  }

  .mobile-more-overlay.open{
    display:flex;
  }

  .mobile-more-sheet{
    width:100%;
    padding:18px 14px calc(22px + env(safe-area-inset-bottom));
    border-radius:24px 24px 0 0;
    background:linear-gradient(180deg,#1b1830,#0e0c18);
    border-top:1px solid var(--border-strong);
    box-shadow:0 -20px 60px rgba(0,0,0,.45);
  }

  .mobile-more-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;
  }

  .mobile-more-head strong{
    font-size:19px;
  }

  .mobile-more-close{
    width:36px;
    height:36px;
    border:none;
    border-radius:50%;
    background:var(--panel-2);
    color:var(--text);
    font-size:22px;
  }

  .mobile-more-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
  }

  .mobile-more-grid button{
    min-height:78px;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--panel);
    color:var(--text);

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:7px;
    padding:10px 6px;
    font-family:var(--font-body);
  }

  .mobile-more-grid .nav-ico{
    font-size:21px;
  }

  .mobile-more-grid button > span:last-child{
    font-size:11px;
    text-align:center;
  }

  .eq-panel{
    max-width:calc(100vw - 24px) !important;
  }
}

@media (max-width:390px){
  .home-shortcuts{
    grid-template-columns:1fr !important;
  }
}


/* === NOVA MOBILE TOPBAR FIX === */
@media (max-width:900px){

  .app-content{
    padding-top:10px !important;
  }

  .topbar{
    position:relative !important;
    top:auto !important;
    z-index:1 !important;

    padding:4px 4px 14px !important;
    margin:0 !important;

    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .search-top{
    position:relative !important;
    width:100% !important;
    height:46px !important;

    margin:0 !important;
    padding:0 16px !important;

    border-radius:15px !important;

    background:rgba(255,255,255,.045) !important;
    border:1px solid var(--border) !important;
  }
}


/* === NOVA MOBILE COLLAPSIBLE NAV V2 === */
@media (max-width:900px){

  /* Mobile: obere Suchleiste komplett entfernen */
  .topbar{
    display:none !important;
  }

  .app-content{
    padding-top:0 !important;
  }

  /* Navigation standardmäßig einklappen */
  .sidebar{
    opacity:0 !important;
    pointer-events:none !important;

    transform:translateY(
      calc(100% + 30px)
    ) !important;

    transition:
      transform .25s ease,
      opacity .2s ease !important;
  }

  body.mobile-nav-open .sidebar{
    opacity:1 !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
  }

  /* Kleiner Griff zum Öffnen */
  .mobile-nav-toggle{
    position:fixed;
    z-index:70;

    left:50%;
    bottom:calc(
      8px + env(safe-area-inset-bottom)
    );

    transform:translateX(-50%);

    width:58px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--border-strong);
    border-radius:999px;

    background:
      linear-gradient(
        180deg,
        rgba(35,31,58,.98),
        rgba(18,15,31,.98)
      );

    color:#fff;
    font-size:22px;
    cursor:pointer;

    box-shadow:
      0 10px 32px rgba(0,0,0,.45);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    transition:
      bottom .25s ease,
      transform .2s ease;
  }

  body.mobile-nav-open .mobile-nav-toggle{
    bottom:calc(
      78px + env(safe-area-inset-bottom)
    );
  }

  /* Player sitzt sauber über dem Griff */
  .player-bar{
    bottom:calc(
      58px + env(safe-area-inset-bottom)
    ) !important;

    transition:
      bottom .25s ease !important;
  }

  body.mobile-nav-open .player-bar{
    bottom:calc(
      88px + env(safe-area-inset-bottom)
    ) !important;
  }

  main{
    padding-bottom:
      calc(
        160px + env(safe-area-inset-bottom)
      ) !important;
  }

  body.mobile-nav-open main{
    padding-bottom:
      calc(
        195px + env(safe-area-inset-bottom)
      ) !important;
  }
}


/* === NOVA MOBILE SIDE DRAWER V3 === */
@media (max-width:900px){

  /* ====================================
     MOBILE NAV: SEITLICHER DRAWER
     ==================================== */

  .sidebar{
    top:50% !important;
    bottom:auto !important;

    left:8px !important;
    right:auto !important;

    width:210px !important;
    height:auto !important;
    max-height:70dvh !important;

    padding:8px !important;

    opacity:1 !important;
    pointer-events:auto !important;

    transform:
      translate(-115%,-50%) !important;

    overflow:hidden !important;

    border-radius:18px !important;

    transition:
      transform .25s ease !important;
  }

  body.mobile-nav-open .sidebar{
    transform:
      translate(0,-50%) !important;
  }

  .side-nav{
    display:flex !important;
    flex-direction:column !important;

    width:100% !important;
    min-width:0 !important;
    height:auto !important;

    gap:4px !important;
  }

  .side-nav button{
    width:100% !important;
    min-width:0 !important;
    height:48px !important;

    flex:none !important;
    flex-direction:row !important;

    justify-content:flex-start !important;
    align-items:center !important;

    gap:12px !important;
    padding:8px 12px !important;

    border-radius:12px !important;
  }

  .side-nav button .nav-ico{
    width:24px !important;
    font-size:18px !important;
  }

  .side-nav button span:not(.nav-ico){
    display:block !important;

    width:auto !important;
    max-width:none !important;

    font-size:13px !important;
    line-height:16px !important;

    overflow:visible !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
  }

  /* seitlicher Griff */
  .mobile-nav-toggle{
    left:0 !important;
    top:50% !important;
    bottom:auto !important;

    width:38px !important;
    height:62px !important;

    transform:
      translateY(-50%) !important;

    border-radius:0 16px 16px 0 !important;

    transition:
      left .25s ease,
      transform .2s ease !important;
  }

  body.mobile-nav-open .mobile-nav-toggle{
    left:218px !important;
    bottom:auto !important;
  }


  /* ====================================
     PLAYER NUR NACH ERSTEM PLAY
     ==================================== */

  .player-bar{
    left:8px !important;
    right:8px !important;

    bottom:
      calc(8px + env(safe-area-inset-bottom))
      !important;

    opacity:0 !important;
    pointer-events:none !important;

    transform:
      translateY(calc(100% + 40px)) !important;

    transition:
      transform .28s ease,
      opacity .22s ease !important;
  }

  body.mobile-player-active .player-bar{
    opacity:1 !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
  }

  /* kein riesiger Leerraum solange Player zu ist */
  main{
    padding-bottom:
      calc(24px + env(safe-area-inset-bottom))
      !important;
  }

  body.mobile-player-active main{
    padding-bottom:
      calc(130px + env(safe-area-inset-bottom))
      !important;
  }

  /* Player bewegt sich NICHT mit dem Menü */
  body.mobile-nav-open .player-bar{
    bottom:
      calc(8px + env(safe-area-inset-bottom))
      !important;
  }
}


/* NOVA eigenes Logo */
.brand-logo{
    display:block;
    width:118px;
    height:auto;
    max-width:100%;
    object-fit:contain;
}


/* NOVA Login Logo */
.login-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
}

.login-logo{
    display:block;
    width:210px;
    max-width:100%;
    height:auto;
    object-fit:contain;
}

@media (max-width:600px){
    .login-logo{
        width:190px;
    }
}

/* ==========================================================
   NOVA LOGIN / REGISTRIERUNG – IMMERSIVE AUDIO STAGE V8
   ========================================================== */

.login-screen{
    position:fixed;
    inset:0;
    overflow:hidden;
    isolation:isolate;
    background:
        radial-gradient(circle at 50% 48%, rgba(24,22,45,.48), transparent 36%),
        #07070d;
}


/* alte bisherige Glows deaktivieren */
.login-glow,
.login-glow-2{
    display:none !important;
}


/* ==========================================================
   KOMPLETTE HINTERGRUND-STAGE
   ========================================================== */

.nova-login-stage{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    overflow:hidden;
}


/* Sterne / digitale Partikel */
.nova-star-field{
    position:absolute;
    inset:0;
    opacity:.72;

    background-image:
        radial-gradient(circle, rgba(192,132,252,.85) 0 1px, transparent 1.8px),
        radial-gradient(circle, rgba(96,165,250,.80) 0 1px, transparent 1.8px),
        radial-gradient(circle, rgba(255,255,255,.50) 0 .8px, transparent 1.5px);

    background-size:
        113px 127px,
        157px 143px,
        89px 101px;

    background-position:
        17px 29px,
        71px 47px,
        31px 83px;

    animation:nova-stars-drift 38s linear infinite;
}


.nova-star-field::before,
.nova-star-field::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}


.nova-star-field::before{
    width:5px;
    height:5px;
    left:20%;
    top:26%;

    background:#c084fc;

    box-shadow:
        180px 90px 0 -1px #8b5cf6,
        490px -65px 0 -1px #60a5fa,
        730px 140px 0 -1px #a855f7,
        1010px -80px 0 -1px #60a5fa,
        1190px 185px 0 -1px #818cf8;

    filter:drop-shadow(0 0 7px currentColor);

    animation:nova-star-pulse 4s ease-in-out infinite alternate;
}


.nova-star-field::after{
    width:3px;
    height:3px;
    right:15%;
    top:17%;

    background:#60a5fa;

    box-shadow:
        -220px 80px #818cf8,
        -430px 230px #c084fc,
        -790px 40px #60a5fa,
        -1030px 210px #a855f7;

    filter:drop-shadow(0 0 6px currentColor);

    animation:nova-star-pulse 5.3s ease-in-out infinite alternate-reverse;
}


/* ==========================================================
   SVG AUDIO-STAGE
   ========================================================== */

.nova-audio-stage{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    overflow:visible;
}


/* dezente Orbital-Linien oben */
.nova-orbit{
    fill:none;
    stroke-width:1;
    opacity:.09;
}

.nova-orbit-purple{
    stroke:#8b5cf6;
}

.nova-orbit-blue{
    stroke:#3b82f6;
}


/* ==========================================================
   SPECTRUM BARS
   ========================================================== */

.nova-spectrum{
    opacity:.46;
}

.nova-spectrum .bar{
    transform-box:fill-box;
    transform-origin:center;

    animation:
        nova-spectrum-bar 3.1s ease-in-out infinite alternate;

    animation-delay:var(--delay);
}


.nova-spectrum.left .bar{
    fill:url(#novaSpectrumPurple);
}


.nova-spectrum.right .bar{
    fill:url(#novaSpectrumBlue);
}


/* ==========================================================
   HAUPTWELLE
   ========================================================== */

.nova-wave-halo{
    fill:none;

    stroke:url(#novaWaveMainGradient);

    stroke-width:15;
    stroke-linecap:round;

    opacity:.085;

    filter:blur(10px);
}


.nova-wave-main{
    fill:none;

    stroke:url(#novaWaveMainGradient);

    stroke-width:2.7;
    stroke-linecap:round;
    stroke-linejoin:round;

    opacity:.88;

    filter:
        drop-shadow(0 0 4px rgba(192,132,252,.65))
        drop-shadow(0 0 11px rgba(96,165,250,.42));

    animation:nova-main-wave 10s ease-in-out infinite alternate;
}


.nova-wave-inner{
    fill:none;

    stroke:url(#novaWaveInnerGradient);

    stroke-width:1.05;

    opacity:.23;

    animation:nova-inner-wave 16s ease-in-out infinite alternate-reverse;
}


/* ==========================================================
   DIGITAL WAVE MESH
   ========================================================== */

.nova-mesh-line{
    fill:none;

    stroke:url(#novaMeshGradient);

    stroke-width:.72;

    stroke-linecap:round;

    stroke-dasharray:1.5 7;

    opacity:.18;
}


.nova-mesh-line:nth-of-type(even){
    opacity:.10;
}


.nova-mesh-group{
    animation:nova-mesh-float 16s ease-in-out infinite alternate;
}


/* ==========================================================
   FLOOR / AUDIO-RINGE UNTER DER KARTE
   ========================================================== */

.nova-floor{
    position:absolute;

    left:50%;
    bottom:7%;

    width:620px;
    height:150px;

    transform:translateX(-50%);

    opacity:.64;
}


.nova-floor-ring{
    position:absolute;

    left:50%;
    top:50%;

    border:1px solid rgba(124,58,237,.35);
    border-radius:50%;

    transform:translate(-50%,-50%);

    box-shadow:
        0 0 12px rgba(124,58,237,.13),
        inset 0 0 10px rgba(59,130,246,.06);

    animation:nova-floor-pulse 6s ease-in-out infinite;
}


.nova-floor-ring.r1{
    width:220px;
    height:42px;
}


.nova-floor-ring.r2{
    width:350px;
    height:70px;

    border-color:rgba(99,102,241,.27);

    animation-delay:-1.5s;
}


.nova-floor-ring.r3{
    width:490px;
    height:100px;

    border-color:rgba(59,130,246,.20);

    animation-delay:-3s;
}


.nova-floor-ring.r4{
    width:610px;
    height:135px;

    border-color:rgba(59,130,246,.11);

    animation-delay:-4.5s;
}


/* ==========================================================
   LOGIN / REGISTRIERUNG KARTE
   ========================================================== */

.login-card{
    position:relative;
    z-index:5;

    background:
        linear-gradient(
            160deg,
            rgba(26,25,45,.94),
            rgba(10,12,23,.97)
        );

    border:1px solid rgba(139,92,246,.30);

    box-shadow:
        0 35px 110px rgba(0,0,0,.62),
        0 0 42px rgba(124,58,237,.08),
        0 0 85px rgba(37,99,235,.045);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}


/* sehr feine obere Neon-Kante */
.login-card::after{
    content:"";

    position:absolute;

    left:20%;
    right:20%;
    top:-1px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #a855f7,
            #818cf8,
            #60a5fa,
            transparent
        );

    box-shadow:
        0 0 10px rgba(139,92,246,.55);

    opacity:.8;
}


.login-logo{
    animation:none !important;

    filter:
        drop-shadow(0 0 5px rgba(168,85,247,.24))
        drop-shadow(0 0 11px rgba(59,130,246,.13));
}


/* Inputs etwas näher ans Konzept */
.login-form input{
    background:rgba(5,7,15,.55);

    border-color:rgba(99,102,241,.20);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.login-form input:focus{
    background:rgba(5,7,15,.72);

    border-color:rgba(96,165,250,.62);

    box-shadow:
        0 0 0 3px rgba(59,130,246,.08),
        0 0 18px rgba(99,102,241,.08);
}


/* ==========================================================
   ANIMATIONEN
   ========================================================== */

@keyframes nova-spectrum-bar{

    0%{
        transform:scaleY(.35);
        opacity:.45;
    }

    45%{
        transform:scaleY(.90);
        opacity:.92;
    }

    100%{
        transform:scaleY(.52);
        opacity:.62;
    }
}


@keyframes nova-main-wave{

    from{
        transform:translate3d(-6px,3px,0);
    }

    to{
        transform:translate3d(6px,-3px,0);
    }
}


@keyframes nova-inner-wave{

    from{
        transform:translate3d(8px,-2px,0);
    }

    to{
        transform:translate3d(-8px,3px,0);
    }
}


@keyframes nova-mesh-float{

    from{
        transform:translate3d(-5px,4px,0);
    }

    to{
        transform:translate3d(5px,-5px,0);
    }
}


@keyframes nova-floor-pulse{

    0%,100%{
        opacity:.34;
        transform:translate(-50%,-50%) scale(.98);
    }

    50%{
        opacity:.75;
        transform:translate(-50%,-50%) scale(1.025);
    }
}


@keyframes nova-stars-drift{

    from{
        background-position:
            17px 29px,
            71px 47px,
            31px 83px;
    }

    to{
        background-position:
            65px 73px,
            23px 91px,
            74px 37px;
    }
}


@keyframes nova-star-pulse{

    from{
        opacity:.3;
        transform:scale(.75);
    }

    to{
        opacity:1;
        transform:scale(1.25);
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:800px){

    .nova-audio-stage{
        width:170%;
        left:-35%;
    }


    .nova-spectrum{
        opacity:.28;
    }


    .nova-mesh-line{
        opacity:.10;
    }


    .nova-wave-main{
        stroke-width:2.3;
        opacity:.68;
    }


    .nova-floor{
        width:420px;
        bottom:4%;
    }


    .nova-floor-ring.r4{
        width:410px;
    }


    .nova-floor-ring.r3{
        width:340px;
    }


    .nova-floor-ring.r2{
        width:270px;
    }


    .nova-star-field{
        opacity:.52;
    }
}


@media (prefers-reduced-motion:reduce){

    .nova-spectrum .bar,
    .nova-wave-main,
    .nova-wave-inner,
    .nova-mesh-group,
    .nova-floor-ring,
    .nova-star-field,
    .nova-star-field::before,
    .nova-star-field::after{
        animation:none !important;
    }
}




/* === NOVA LOGIN V9 POLISH === */

.login-screen{
    background:
        radial-gradient(42% 42% at 18% 8%, rgba(168,85,247,.16), transparent 62%),
        radial-gradient(36% 40% at 84% 10%, rgba(59,130,246,.15), transparent 60%),
        radial-gradient(50% 25% at 50% 100%, rgba(51,65,180,.16), transparent 68%),
        linear-gradient(180deg, #03040a 0%, #04050d 35%, #020308 100%);
}

.login-screen .login-card{
    position:relative;
    background:linear-gradient(180deg, rgba(15,18,34,.88) 0%, rgba(10,12,24,.92) 100%);
    border:1px solid rgba(130,145,255,.22);
    box-shadow:
        0 28px 90px rgba(0,0,0,.55),
        0 0 0 1px rgba(255,255,255,.03) inset,
        0 0 26px rgba(114,92,255,.18);
}

.login-screen .login-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:28px;
    pointer-events:none;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.03) inset,
        0 -1px 0 rgba(255,255,255,.05) inset;
}

.login-screen .login-card::after{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:-95px;
    width:160%;
    height:180px;
    border-radius:50%;
    background:
        radial-gradient(
            ellipse at center,
            rgba(95,110,255,.22) 0%,
            rgba(140,92,255,.14) 22%,
            rgba(70,88,255,.08) 40%,
            transparent 72%
        );
    filter:blur(18px);
    pointer-events:none;
    z-index:-1;
}

.login-screen [class*="wave"]{
    opacity:1 !important;
    filter:
        drop-shadow(0 0 14px rgba(173,94,255,.32))
        drop-shadow(0 0 18px rgba(75,128,255,.26));
}

.login-screen [class*="spectrum"],
.login-screen [class*="bar"]{
    opacity:.92 !important;
    filter:drop-shadow(0 0 8px rgba(125,92,255,.25));
}

.login-screen [class*="floor"]{
    opacity:.95 !important;
    filter:blur(.1px) drop-shadow(0 0 18px rgba(75,128,255,.15));
}

.login-screen [class*="star"]{
    opacity:.9 !important;
}

.login-screen [class*="stage"]{
    transform:scale(1.03);
}

.login-form input{
    background:rgba(5,7,18,.88);
    border:1px solid rgba(79,95,182,.35);
    box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;
}

.login-form input:focus{
    border-color:rgba(82,137,255,.75);
    box-shadow:
        0 0 0 2px rgba(82,137,255,.14),
        0 0 22px rgba(100,92,255,.15);
}

.login-form button[type="submit"]{
    box-shadow:0 8px 28px rgba(92,90,255,.28);
}

.login-screen #loginView,
.login-screen #registerView{
    position:relative;
    z-index:3;
}

@media (max-width:700px){
    .login-screen .login-card::after{
        width:120%;
        height:120px;
        bottom:-70px;
    }
}



/* === NOVA REFERENCE COLOR MATCH V10 === */

/* ----------------------------------------------------------
   GRUNDBELEUCHTUNG
   Layout bleibt unverändert
   ---------------------------------------------------------- */

.login-screen{
    background:
        radial-gradient(
            36% 44% at -2% 10%,
            rgba(202,35,255,.22) 0%,
            rgba(139,30,255,.10) 38%,
            transparent 72%
        ),
        radial-gradient(
            38% 46% at 102% 10%,
            rgba(30,101,255,.25) 0%,
            rgba(20,72,220,.11) 40%,
            transparent 72%
        ),
        radial-gradient(
            46% 25% at 22% 100%,
            rgba(178,36,255,.16) 0%,
            transparent 72%
        ),
        radial-gradient(
            46% 25% at 78% 100%,
            rgba(32,104,255,.18) 0%,
            transparent 72%
        ),
        linear-gradient(
            180deg,
            #020208 0%,
            #03040c 46%,
            #020309 100%
        ) !important;
}


/* ----------------------------------------------------------
   SVG FARBEN – LINKS MAGENTA / RECHTS CYAN
   ---------------------------------------------------------- */

#novaSpectrumPurple stop:nth-child(1){
    stop-color:#ff5cff;
}

#novaSpectrumPurple stop:nth-child(2){
    stop-color:#d52cff;
}

#novaSpectrumPurple stop:nth-child(3){
    stop-color:#7c1dff;
}


#novaSpectrumBlue stop:nth-child(1){
    stop-color:#67d4ff;
}

#novaSpectrumBlue stop:nth-child(2){
    stop-color:#258cff;
}

#novaSpectrumBlue stop:nth-child(3){
    stop-color:#174cff;
}


/* Hauptwelle */
#novaWaveMainGradient stop:nth-child(1){
    stop-color:#8b20ff;
}

#novaWaveMainGradient stop:nth-child(2){
    stop-color:#f16cff;
}

#novaWaveMainGradient stop:nth-child(3){
    stop-color:#dc59ff;
}

#novaWaveMainGradient stop:nth-child(4){
    stop-color:#a8a0ff;
}

#novaWaveMainGradient stop:nth-child(5){
    stop-color:#71d1ff;
}

#novaWaveMainGradient stop:nth-child(6){
    stop-color:#2384ff;
}


/* innere Wave */
#novaWaveInnerGradient stop:nth-child(1){
    stop-color:#b332ff;
}

#novaWaveInnerGradient stop:nth-child(2){
    stop-color:#8e6cff;
}

#novaWaveInnerGradient stop:nth-child(3){
    stop-color:#35a9ff;
}


/* Mesh */
#novaMeshGradient stop:nth-child(1){
    stop-color:#9e24ff;
}

#novaMeshGradient stop:nth-child(2){
    stop-color:#d43aff;
}

#novaMeshGradient stop:nth-child(3){
    stop-color:#936dff;
}

#novaMeshGradient stop:nth-child(4){
    stop-color:#328fff;
}

#novaMeshGradient stop:nth-child(5){
    stop-color:#1971ff;
}


/* ----------------------------------------------------------
   SPECTRUM – HELLER UND KLARER
   ---------------------------------------------------------- */

.nova-spectrum{
    opacity:.72 !important;
}

.nova-spectrum.left .bar{
    filter:
        brightness(1.30)
        saturate(1.35)
        drop-shadow(0 0 5px rgba(223,52,255,.50))
        drop-shadow(0 0 13px rgba(168,35,255,.24));
}

.nova-spectrum.right .bar{
    filter:
        brightness(1.35)
        saturate(1.30)
        drop-shadow(0 0 5px rgba(61,168,255,.52))
        drop-shadow(0 0 13px rgba(35,102,255,.24));
}


/* ----------------------------------------------------------
   HAUPTWELLE – FAST WEISSER NEONKERN
   ---------------------------------------------------------- */

.nova-wave-main{
    stroke-width:2.35 !important;
    opacity:1 !important;

    filter:
        brightness(1.65)
        saturate(1.10)
        drop-shadow(0 0 2px rgba(255,255,255,.95))
        drop-shadow(0 0 5px rgba(223,112,255,.80))
        drop-shadow(0 0 12px rgba(113,135,255,.62))
        drop-shadow(0 0 24px rgba(47,119,255,.30)) !important;
}

.nova-wave-halo{
    stroke-width:19 !important;
    opacity:.15 !important;

    filter:
        blur(9px)
        brightness(1.55)
        saturate(1.40) !important;
}

.nova-wave-inner{
    opacity:.34 !important;
    filter:
        brightness(1.30)
        drop-shadow(0 0 7px rgba(95,122,255,.22));
}


/* ----------------------------------------------------------
   MESH – SICHTBARER, ABER NICHT DOMINANT
   ---------------------------------------------------------- */

.nova-mesh-line{
    opacity:.25 !important;

    filter:
        brightness(1.30)
        saturate(1.35)
        drop-shadow(0 0 3px rgba(112,86,255,.15));
}

.nova-mesh-line:nth-of-type(even){
    opacity:.15 !important;
}


/* ----------------------------------------------------------
   STERNE
   ---------------------------------------------------------- */

.nova-star-field{
    opacity:.88 !important;
}

.nova-star-field::before{
    filter:
        brightness(1.50)
        drop-shadow(0 0 7px rgba(239,95,255,.85))
        drop-shadow(0 0 14px rgba(156,58,255,.38));
}

.nova-star-field::after{
    filter:
        brightness(1.55)
        drop-shadow(0 0 7px rgba(86,180,255,.90))
        drop-shadow(0 0 14px rgba(46,108,255,.38));
}


/* ----------------------------------------------------------
   ORBITEN
   ---------------------------------------------------------- */

.nova-orbit{
    opacity:.15 !important;
}

.nova-orbit-purple{
    stroke:#a72cff !important;
}

.nova-orbit-blue{
    stroke:#247dff !important;
}


/* ----------------------------------------------------------
   BODEN / RINGE
   ---------------------------------------------------------- */

.nova-floor{
    opacity:.92 !important;

    filter:
        brightness(1.40)
        saturate(1.35)
        drop-shadow(0 0 15px rgba(112,79,255,.22));
}

.nova-floor-ring{
    border-color:rgba(187,70,255,.56) !important;

    box-shadow:
        0 0 10px rgba(194,57,255,.28),
        0 0 22px rgba(71,99,255,.15),
        inset 0 0 10px rgba(63,117,255,.08) !important;
}

.nova-floor-ring.r2{
    border-color:rgba(154,75,255,.44) !important;
}

.nova-floor-ring.r3{
    border-color:rgba(82,107,255,.38) !important;
}

.nova-floor-ring.r4{
    border-color:rgba(47,112,255,.25) !important;
}


/* ----------------------------------------------------------
   LOGIN-KARTE – REFERENZ-FARBE
   ---------------------------------------------------------- */

.login-card{
    background:
        linear-gradient(
            155deg,
            rgba(18,18,48,.96) 0%,
            rgba(9,12,31,.97) 52%,
            rgba(5,10,25,.98) 100%
        ) !important;

    border:
        1px solid rgba(116,133,255,.48) !important;

    box-shadow:
        0 34px 100px rgba(0,0,0,.62),
        -8px 0 32px rgba(174,54,255,.07),
        8px 0 32px rgba(42,115,255,.08),
        0 0 0 1px rgba(255,255,255,.025) inset !important;
}


/* obere Neon-Kante heller */
.login-card::after{
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #d44cff 27%,
            #f5b3ff 45%,
            #ffffff 50%,
            #a8c7ff 56%,
            #3f8cff 74%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 6px rgba(255,255,255,.65),
        0 0 13px rgba(162,82,255,.62),
        0 0 22px rgba(49,105,255,.30) !important;
}


/* ----------------------------------------------------------
   BUTTON
   ---------------------------------------------------------- */

.login-form button[type="submit"]{
    background:
        linear-gradient(
            100deg,
            #a12cff 0%,
            #7b4eff 40%,
            #397cff 72%,
            #2995ff 100%
        ) !important;

    box-shadow:
        0 10px 28px rgba(89,77,255,.34),
        0 0 18px rgba(100,92,255,.17),
        inset 0 1px rgba(255,255,255,.15) !important;
}


/* ----------------------------------------------------------
   LOGO
   ---------------------------------------------------------- */

.login-logo{
    filter:
        brightness(1.12)
        saturate(1.22)
        drop-shadow(0 0 7px rgba(225,62,255,.34))
        drop-shadow(0 0 11px rgba(38,126,255,.28)) !important;
}




/* === NOVA COURSE CORRECTION V11 === */

/* ----------------------------------------------------------
   ZURÜCK ZUR REFERENZ:
   weniger Weiß, weniger Matsch, mehr crisp, dunkler
   ---------------------------------------------------------- */

.login-screen{
    background:
        radial-gradient(
            26% 30% at 7% 8%,
            rgba(177,44,255,.10) 0%,
            transparent 72%
        ),
        radial-gradient(
            24% 28% at 93% 8%,
            rgba(39,114,255,.10) 0%,
            transparent 72%
        ),
        radial-gradient(
            32% 22% at 50% 100%,
            rgba(57,74,255,.05) 0%,
            transparent 70%
        ),
        linear-gradient(
            180deg,
            #020208 0%,
            #02030a 55%,
            #010208 100%
        ) !important;
}

/* ganz wichtig: dieser helle Matsch hinter der Karte weg */
.login-card::before{
    content:none !important;
    display:none !important;
}

/* Karte wieder dunkler und klarer */
.login-card{
    background:
        linear-gradient(
            180deg,
            rgba(15,18,44,.94) 0%,
            rgba(9,12,30,.97) 55%,
            rgba(5,8,22,.985) 100%
        ) !important;

    border:1px solid rgba(104,118,255,.30) !important;

    box-shadow:
        0 20px 60px rgba(0,0,0,.52),
        0 0 18px rgba(112,79,255,.10),
        0 0 24px rgba(46,107,255,.08),
        inset 0 1px 0 rgba(255,255,255,.03) !important;

    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
}

/* obere Neonlinie schmal und sauber */
.login-card::after{
    height:2px !important;
    opacity:.95 !important;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #b737ff 26%,
            #e26bff 44%,
            #90a9ff 58%,
            #3a8dff 74%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 6px rgba(191,72,255,.38),
        0 0 10px rgba(61,121,255,.24) !important;
}

/* Logo weniger überstrahlt */
.login-logo{
    filter:
        brightness(1.04)
        saturate(1.08)
        drop-shadow(0 0 5px rgba(193,61,255,.20))
        drop-shadow(0 0 7px rgba(43,118,255,.18)) !important;
}

/* Hauptwelle: weniger weiß, weniger fetter Glow */
.nova-wave-main{
    stroke-width:2.0 !important;
    opacity:.98 !important;
    filter:
        brightness(1.10)
        saturate(1.06)
        drop-shadow(0 0 2px rgba(255,255,255,.22))
        drop-shadow(0 0 6px rgba(189,92,255,.26))
        drop-shadow(0 0 8px rgba(74,136,255,.20)) !important;
}

/* äußeres Halo stark runter */
.nova-wave-halo{
    opacity:.08 !important;
    stroke-width:13 !important;
    filter:
        blur(5px)
        brightness(1.04)
        saturate(1.05) !important;
}

/* innere Zusatzlinie sauber und dezent */
.nova-wave-inner{
    opacity:.18 !important;
    filter:none !important;
}

/* Spectrum-Balken: leuchtend, aber nicht verbrannt */
.nova-spectrum{
    opacity:.68 !important;
}

.nova-spectrum.left .bar{
    filter:
        brightness(1.08)
        saturate(1.12)
        drop-shadow(0 0 4px rgba(205,70,255,.20)) !important;
}

.nova-spectrum.right .bar{
    filter:
        brightness(1.08)
        saturate(1.10)
        drop-shadow(0 0 4px rgba(67,170,255,.20)) !important;
}

/* Mesh wieder dezenter */
.nova-mesh-line{
    opacity:.14 !important;
    filter:none !important;
}

.nova-mesh-line:nth-of-type(even){
    opacity:.08 !important;
}

/* Sterne feiner */
.nova-star-field{
    opacity:.76 !important;
}

.nova-star-field::before,
.nova-star-field::after{
    filter:none !important;
}

/* Orbit-Linien dezenter */
.nova-orbit{
    opacity:.10 !important;
}

/* Bodenringe weniger glowig */
.nova-floor{
    opacity:.72 !important;
    filter:none !important;
}

.nova-floor-ring{
    box-shadow:
        0 0 10px rgba(145,74,255,.12),
        inset 0 0 8px rgba(53,97,255,.05) !important;
}

.nova-floor-ring.r2,
.nova-floor-ring.r3,
.nova-floor-ring.r4{
    box-shadow:none !important;
}

/* Button auch etwas sauberer */
.login-form button[type="submit"]{
    background:
        linear-gradient(
            90deg,
            #9e33ff 0%,
            #7c4dff 38%,
            #4f78ff 72%,
            #3593ff 100%
        ) !important;

    box-shadow:
        0 10px 22px rgba(90,84,255,.18),
        inset 0 1px 0 rgba(255,255,255,.10) !important;
}




/* === NOVA LOGIN COLOR SHARP V1 === */

/* Nur Farbe + Schärfe, kein neuer Aufbau */

.login-screen{
    background:
        radial-gradient(circle at 9% 10%, rgba(180,40,255,.11) 0%, transparent 34%),
        radial-gradient(circle at 91% 9%, rgba(40,120,255,.12) 0%, transparent 34%),
        radial-gradient(circle at 50% 100%, rgba(70,70,180,.05) 0%, transparent 28%),
        linear-gradient(180deg, #020208 0%, #02030a 56%, #010208 100%) !important;
}

/* Karte etwas sauberer und klarer */
.login-card{
    background:
        linear-gradient(
            180deg,
            rgba(14,18,43,.94) 0%,
            rgba(10,13,34,.965) 54%,
            rgba(6,9,24,.985) 100%
        ) !important;

    border:1px solid rgba(99,120,255,.34) !important;

    box-shadow:
        0 22px 58px rgba(0,0,0,.54),
        0 0 18px rgba(167,66,255,.10),
        0 0 22px rgba(55,110,255,.09),
        inset 0 1px 0 rgba(255,255,255,.03) !important;

    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
}

/* obere Neonlinie schärfer */
.login-card::after{
    height:2px !important;
    opacity:.96 !important;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(196,82,255,.95) 24%,
            rgba(236,170,255,.98) 45%,
            rgba(140,178,255,.96) 60%,
            rgba(70,145,255,.95) 76%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 6px rgba(206,88,255,.40),
        0 0 10px rgba(76,139,255,.25) !important;
}

/* Logo etwas klarer */
.login-logo{
    filter:
        brightness(1.07)
        saturate(1.12)
        drop-shadow(0 0 5px rgba(196,76,255,.22))
        drop-shadow(0 0 8px rgba(54,132,255,.18)) !important;
}

/* Wellen schärfer, aber nicht übertrieben */
.nova-wave-main{
    stroke-width:2.35 !important;
    opacity:1 !important;
    filter:
        brightness(1.13)
        saturate(1.10)
        drop-shadow(0 0 3px rgba(255,255,255,.20))
        drop-shadow(0 0 8px rgba(200,92,255,.28))
        drop-shadow(0 0 10px rgba(83,148,255,.22)) !important;
}

/* äußeres Glow runter, damit es sauberer aussieht */
.nova-wave-halo{
    opacity:.11 !important;
    stroke-width:12 !important;
    filter:
        blur(5px)
        brightness(1.03)
        saturate(1.04) !important;
}

/* feine Zusatzlinie etwas sichtbarer */
.nova-wave-inner{
    opacity:.24 !important;
    filter:none !important;
}

/* Spectrum-Balken klarer */
.nova-spectrum{
    opacity:.78 !important;
}

.nova-spectrum.left .bar{
    filter:
        brightness(1.10)
        saturate(1.14)
        drop-shadow(0 0 4px rgba(215,72,255,.24)) !important;
}

.nova-spectrum.right .bar{
    filter:
        brightness(1.11)
        saturate(1.12)
        drop-shadow(0 0 4px rgba(84,188,255,.23)) !important;
}

/* Sterne minimal klarer */
.nova-star-field{
    opacity:.86 !important;
}

.nova-star{
    box-shadow:0 0 4px rgba(255,255,255,.18) !important;
}

/* Orbit-Linien leicht sichtbarer */
.nova-orbit{
    opacity:.14 !important;
}

/* Mesh etwas präziser */
.nova-mesh-line{
    opacity:.17 !important;
}

.nova-mesh-line:nth-of-type(even){
    opacity:.10 !important;
}

/* Bodenringe etwas näher an Referenz */
.nova-floor{
    opacity:.83 !important;
}

.nova-floor-ring{
    border-color:rgba(142,84,255,.22) !important;
    box-shadow:
        0 0 10px rgba(163,88,255,.14),
        inset 0 0 8px rgba(64,105,255,.06) !important;
}

.nova-floor-ring.r2{
    border-color:rgba(120,84,255,.17) !important;
}

.nova-floor-ring.r3,
.nova-floor-ring.r4{
    border-color:rgba(96,88,220,.11) !important;
}

/* Labels / Inputs etwas cleaner */
.login-card label,
.login-form label,
.login-form span{
    color:rgba(232,236,255,.86) !important;
}

.login-form input{
    background:rgba(5,8,24,.82) !important;
    border:1px solid rgba(63,98,210,.30) !important;
    color:#f3f6ff !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.02) !important;
}

.login-form input::placeholder{
    color:rgba(210,218,255,.42) !important;
}

.login-form input:focus{
    border-color:rgba(84,136,255,.58) !important;
    box-shadow:
        0 0 0 1px rgba(85,136,255,.22),
        0 0 12px rgba(86,126,255,.12) !important;
}

/* Button etwas klarer */
.login-form button[type="submit"]{
    background:
        linear-gradient(
            90deg,
            #a234ff 0%,
            #7f49ff 36%,
            #5377ff 70%,
            #3792ff 100%
        ) !important;

    box-shadow:
        0 12px 22px rgba(90,82,255,.18),
        inset 0 1px 0 rgba(255,255,255,.12) !important;
}




/* === NOVA STRUCTURE MATCH V12 === */

/* ==========================================================
   1. LOGIN-KARTE – PROPORTIONEN NÄHER AN REFERENZ
   ========================================================== */

.login-card{
    box-sizing:border-box !important;

    width:min(540px, calc(100vw - 48px)) !important;
    min-height:650px !important;

    padding:46px 42px 38px !important;

    border-radius:30px !important;

    transform:translateY(-8px);
}


/* Logo deutlich größer */
.login-brand{
    margin-bottom:26px !important;
}

.login-logo{
    width:220px !important;
    max-width:100% !important;
}


/* Inhalt bekommt mehr Raum */
#loginView{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
}


/* Überschrift größer */
.login-eyebrow{
    margin-bottom:10px !important;
}

.login-card h1{
    font-size:44px !important;
    line-height:1.05 !important;
    margin-bottom:12px !important;
}

.login-subtitle{
    font-size:17px !important;
    margin-bottom:26px !important;
}


/* Inputs näher an Referenzgröße */
.login-form input{
    height:58px !important;
    border-radius:14px !important;
    font-size:16px !important;
}

.login-form label{
    margin-bottom:17px !important;
}


/* Login-Button größer */
.login-form button[type="submit"]{
    height:58px !important;
    border-radius:16px !important;
    font-size:17px !important;
}


/* Account erstellen etwas weiter nach unten */
.login-card #loginView > p:last-child{
    margin-top:20px !important;
}



/* ==========================================================
   2. AUDIO-STAGE – GRÖSSER UND DICHTER UM DIE KARTE
   ========================================================== */

.nova-audio-stage{
    transform:
        translateY(-4px)
        scaleY(1.18);

    transform-origin:50% 50%;

    overflow:visible !important;
}


/* Balken höher und präsenter */
.nova-spectrum{
    transform:scaleY(1.24);
    transform-origin:50% 50%;

    opacity:.82 !important;
}


/* Hauptwelle minimal größer */
.nova-wave-main,
.nova-wave-halo,
.nova-wave-inner{
    transform-origin:50% 50%;
}


/* Mesh weiter nach oben/unten ausdehnen */
.nova-mesh-group{
    transform:
        translateY(4px)
        scaleY(1.28);

    transform-origin:50% 50%;
}


/* Orbit-Linien stärker in die Szene ziehen */
.nova-orbit{
    transform:
        translateY(5px)
        scaleY(1.10);

    transform-origin:50% 50%;
}



/* ==========================================================
   3. BODEN – GRÖSSER, BREITER, DIREKT UNTER DER KARTE
   ========================================================== */

.nova-floor{
    width:960px !important;
    height:230px !important;

    left:50% !important;
    bottom:-8px !important;

    transform:translateX(-50%) !important;
}


/* innerster Ring */
.nova-floor-ring.r1{
    width:330px !important;
    height:62px !important;
}


/* Ring 2 */
.nova-floor-ring.r2{
    width:500px !important;
    height:100px !important;
}


/* Ring 3 */
.nova-floor-ring.r3{
    width:700px !important;
    height:150px !important;
}


/* äußerster Ring */
.nova-floor-ring.r4{
    width:920px !important;
    height:210px !important;
}


/* Boden sitzt optisch hinter der Karte */
.nova-floor{
    z-index:2;
}

.login-card{
    z-index:5 !important;
}



/* ==========================================================
   DESKTOP – Szene etwas kompakter um Mittelpunkt
   ========================================================== */

@media (min-width:1000px){

    .nova-login-stage{
        transform:scale(1.025);
        transform-origin:50% 50%;
    }

}


/* ==========================================================
   MOBILE – KEINE RIESIGE 650px-KARTE ERZWINGEN
   ========================================================== */

@media (max-width:700px){

    .login-card{
        width:calc(100vw - 28px) !important;
        min-height:0 !important;

        padding:30px 22px 26px !important;

        border-radius:24px !important;

        transform:none;
    }

    .login-logo{
        width:180px !important;
    }

    .login-card h1{
        font-size:36px !important;
    }

    #loginView{
        display:block;
    }

    .nova-audio-stage{
        transform:
            translateY(0)
            scaleY(1.08);
    }

    .nova-spectrum{
        transform:scaleY(1.10);
    }

    .nova-floor{
        width:520px !important;
        height:150px !important;
        bottom:-25px !important;
    }

    .nova-floor-ring.r1{
        width:190px !important;
        height:38px !important;
    }

    .nova-floor-ring.r2{
        width:280px !important;
        height:60px !important;
    }

    .nova-floor-ring.r3{
        width:390px !important;
        height:95px !important;
    }

    .nova-floor-ring.r4{
        width:500px !important;
        height:130px !important;
    }
}


/* ==========================================================
   NOVA LOGIN FIX – BODEN + KARTENGRÖSSE + WENIGER UNIVERSUM
   ========================================================== */
.login-glow,
.login-glow-2{
    display:none !important;
}

body.pre-login{
    position:relative;
    min-height:100vh;
    background:
        radial-gradient(circle at 8% 10%, rgba(168,85,247,.10), transparent 18%),
        radial-gradient(circle at 92% 8%, rgba(59,130,246,.09), transparent 18%),
        linear-gradient(180deg, #04050a 0%, #050812 58%, #060913 100%);
}

body.pre-login::before{
    content:"";
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:30vh;
    pointer-events:none;
    z-index:0;
    background:
        linear-gradient(
            180deg,
            rgba(3,5,10,0) 0%,
            rgba(5,8,16,.72) 45%,
            rgba(5,8,16,.96) 100%
        );
}

body.pre-login::after{
    content:"";
    position:fixed;
    left:50%;
    bottom:5.5vh;
    transform:translateX(-50%);
    width:min(760px,78vw);
    height:145px;
    border-radius:50%;
    pointer-events:none;
    z-index:0;
    background:
        radial-gradient(
            ellipse at center,
            rgba(133,92,255,.16) 0%,
            rgba(79,100,255,.10) 28%,
            rgba(18,22,40,.05) 46%,
            transparent 72%
        );
    box-shadow:
        0 0 0 1px rgba(113,88,255,.14) inset,
        0 0 26px rgba(100,89,255,.10);
}

.login-screen{
    position:fixed;
    inset:0;
    overflow:hidden;
    isolation:isolate;
    background:transparent !important;
}

.login-screen > *{
    position:relative;
    z-index:1;
}

.login-card{
    width:min(420px, calc(100vw - 48px)) !important;
    max-width:420px !important;
    min-height:auto !important;
    padding:34px 34px 28px !important;
    border-radius:30px !important;
    margin:0 auto !important;
    transform:translateY(-6px);
    background:
        linear-gradient(
            180deg,
            rgba(8,12,26,.94) 0%,
            rgba(5,8,18,.97) 100%
        ) !important;
    box-shadow:
        0 18px 44px rgba(0,0,0,.42),
        0 0 0 1px rgba(103,90,255,.18),
        0 0 24px rgba(90,81,255,.08);
}

.login-card::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-54px;
    transform:translateX(-50%);
    width:132%;
    height:96px;
    border-radius:50%;
    pointer-events:none;
    background:
        radial-gradient(
            ellipse at center,
            rgba(108,84,255,.14) 0%,
            rgba(55,81,188,.08) 34%,
            transparent 74%
        );
    filter:blur(2px);
    opacity:.95;
}

@media (max-width:700px){
    body.pre-login::after{
        width:88vw;
        height:110px;
        bottom:4.2vh;
    }

    .login-card{
        width:min(390px, calc(100vw - 28px)) !important;
        max-width:390px !important;
        padding:28px 24px 24px !important;
        border-radius:26px !important;
        transform:none;
    }

    .login-card::after{
        width:120%;
        bottom:-46px;
        height:76px;
    }
}

/* ==========================================================
   NOVA REAL FLOOR V2
   NUR BODEN / TIEFE – KARTE UND AUDIO BLEIBEN UNVERÄNDERT
   ========================================================== */

/* alte Body-Pseudo-Böden komplett abschalten */
body.pre-login::before,
body.pre-login::after{
    content:none !important;
    display:none !important;
}


/* Stage wieder korrekt vollflächig */
.nova-login-stage{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    overflow:hidden !important;

    z-index:1 !important;
    pointer-events:none !important;
}


/* ----------------------------------------------------------
   STERNE NUR IM OBEREN / MITTLEREN RAUM
   Unten verschwinden sie vor dem Boden.
   ---------------------------------------------------------- */

.nova-star-field{
    opacity:.66 !important;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            #000 54%,
            rgba(0,0,0,.72) 64%,
            rgba(0,0,0,.18) 73%,
            transparent 82%
        ) !important;

    mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            #000 54%,
            rgba(0,0,0,.72) 64%,
            rgba(0,0,0,.18) 73%,
            transparent 82%
        ) !important;
}


/* riesige Universum-Orbits deutlich zurücknehmen */
.nova-orbit{
    opacity:.045 !important;
}


/* ----------------------------------------------------------
   HORIZONT
   ---------------------------------------------------------- */

.nova-login-stage::before{
    content:"";

    position:absolute;

    left:5%;
    right:5%;

    bottom:27%;

    height:1px;

    z-index:1;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(174,58,255,.10) 17%,
            rgba(111,84,255,.15) 42%,
            rgba(77,108,255,.15) 58%,
            rgba(47,128,255,.10) 83%,
            transparent 100%
        );

    box-shadow:
        0 0 18px rgba(92,86,255,.07);

    pointer-events:none;
}


/* ----------------------------------------------------------
   ECHTE BODENFLÄCHE MIT PERSPEKTIVE
   ---------------------------------------------------------- */

.nova-login-stage::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:-20%;

    width:145%;
    height:55%;

    z-index:1;

    transform:
        translateX(-50%)
        perspective(720px)
        rotateX(63deg);

    transform-origin:50% 100%;

    background:
        linear-gradient(
            90deg,
            rgba(150,45,255,.025),
            rgba(65,70,150,.025) 50%,
            rgba(35,105,255,.025)
        ),

        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 86px,
            rgba(92,89,180,.055) 87px,
            transparent 88px
        ),

        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 38px,
            rgba(92,89,180,.06) 39px,
            transparent 40px
        ),

        linear-gradient(
            180deg,
            rgba(7,10,22,.18) 0%,
            rgba(5,8,17,.72) 30%,
            rgba(3,5,12,.96) 100%
        );

    opacity:.58;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.40) 16%,
            #000 43%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.40) 16%,
            #000 43%,
            #000 100%
        );

    pointer-events:none;
}


/* SVG über dem Boden, aber weiterhin hinter Login */
.nova-audio-stage{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    z-index:2 !important;
}


/* ----------------------------------------------------------
   LICHT-/REFLEXIONSFLÄCHE DIREKT UNTER DER KARTE
   ---------------------------------------------------------- */

.nova-floor{
    position:absolute !important;

    left:50% !important;
    bottom:1.5% !important;

    width:min(1080px,84vw) !important;
    height:190px !important;

    transform:translateX(-50%) !important;

    z-index:3 !important;

    opacity:.82 !important;

    border-radius:50% !important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(105,87,235,.105) 0%,
            rgba(74,76,170,.055) 28%,
            rgba(30,43,95,.025) 48%,
            transparent 72%
        ) !important;

    filter:none !important;
}


/* weiche Spiegelung */
.nova-floor::before{
    content:"";

    position:absolute;

    left:50%;
    top:35%;

    width:66%;
    height:55%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(125,94,255,.13) 0%,
            rgba(65,91,210,.07) 38%,
            transparent 72%
        );

    filter:blur(10px);
}


/* ----------------------------------------------------------
   RINGE: FLACH AUF DEM BODEN, NICHT SCHWEBEND
   ---------------------------------------------------------- */

.nova-floor-ring{
    position:absolute !important;

    left:50% !important;
    top:52% !important;

    transform:translate(-50%,-50%) !important;

    border-radius:50% !important;

    background:transparent !important;

    box-shadow:none !important;
}


.nova-floor-ring.r1{
    width:300px !important;
    height:38px !important;

    border:1px solid rgba(149,90,255,.35) !important;
}


.nova-floor-ring.r2{
    width:480px !important;
    height:62px !important;

    border:1px solid rgba(116,91,245,.25) !important;
}


.nova-floor-ring.r3{
    width:710px !important;
    height:94px !important;

    border:1px solid rgba(75,101,220,.18) !important;
}


.nova-floor-ring.r4{
    width:1010px !important;
    height:135px !important;

    border:1px solid rgba(55,104,205,.11) !important;
}


/* Login bleibt garantiert darüber */
.login-card{
    position:relative !important;
    z-index:10 !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width:700px){

    .nova-star-field{
        opacity:.50 !important;
    }

    .nova-login-stage::before{
        bottom:22%;
    }

    .nova-login-stage::after{
        bottom:-15%;
        height:43%;
    }

    .nova-floor{
        width:92vw !important;
        height:125px !important;
        bottom:1% !important;
    }

    .nova-floor-ring.r1{
        width:150px !important;
        height:24px !important;
    }

    .nova-floor-ring.r2{
        width:240px !important;
        height:38px !important;
    }

    .nova-floor-ring.r3{
        width:340px !important;
        height:54px !important;
    }

    .nova-floor-ring.r4{
        width:450px !important;
        height:74px !important;
    }
}

/* NOVA FLOOR IMAGE FINAL */
.login-screen .nova-floor{
    position:absolute !important;
    left:50% !important;
    bottom:0 !important;
    width:min(1240px,90vw) !important;
    height:230px !important;
    transform:translateX(-50%) !important;
    z-index:3 !important;
    pointer-events:none !important;
    opacity:1 !important;
    border-radius:0 !important;
    background:
        url("assets/login-floor.jpg")
        center bottom / 100% 100%
        no-repeat !important;
    filter:none !important;
    box-shadow:none !important;
}

.login-screen .nova-floor::before,
.login-screen .nova-floor::after{
    content:none !important;
    display:none !important;
}

.login-screen .nova-floor-ring,
.login-screen .nova-floor-ring.r1,
.login-screen .nova-floor-ring.r2,
.login-screen .nova-floor-ring.r3,
.login-screen .nova-floor-ring.r4{
    display:none !important;
    opacity:0 !important;
    border:none !important;
    box-shadow:none !important;
    background:transparent !important;
    animation:none !important;
}

@media (max-width:700px){
    .login-screen .nova-floor{
        width:94vw !important;
        height:150px !important;
        bottom:0 !important;
        background:
            url("assets/login-floor.jpg")
            center bottom / 100% 100%
            no-repeat !important;
    }
}

/* NOVA FLOOR FULLWIDTH FIX */

.login-screen .nova-floor{
    position:absolute !important;

    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100vw !important;
    max-width:none !important;

    height:18.5vh !important;
    min-height:165px !important;

    transform:none !important;

    /*
       Boden unter Wave / Equalizer,
       aber über dem Grundhintergrund
    */
    z-index:1 !important;

    opacity:1 !important;

    border-radius:0 !important;

    background:
        url("assets/login-floor.jpg")
        center 28% / cover
        no-repeat !important;

    filter:
        brightness(.78)
        contrast(1.06)
        saturate(.88) !important;
    box-shadow:none !important;

    /*
       Oberkante verschwindet weich im schwarzen Hintergrund
    */
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.18) 7%,
            rgba(0,0,0,.72) 18%,
            #000 30%,
            #000 100%
        ) !important;

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.18) 7%,
            rgba(0,0,0,.72) 18%,
            #000 30%,
            #000 100%
        ) !important;
}


/* alte Floor-Effekte weiterhin aus */

.login-screen .nova-floor::before,
.login-screen .nova-floor::after{
    content:none !important;
    display:none !important;
}

.login-screen .nova-floor-ring{
    display:none !important;
}


/* Mobile */

@media (max-width:700px){

    .login-screen .nova-floor{
        width:100vw !important;

        height:18vh !important;
        min-height:140px !important;

        background:
            url("assets/login-floor.jpg")
            center bottom / cover
            no-repeat !important;
    }
}

/* NOVA FLOOR PERSPECTIVE DEPTH */

.login-screen .nova-floor{
    left:50% !important;
    right:auto !important;

    bottom:-6vh !important;

    width:108vw !important;
    max-width:none !important;

    height:30vh !important;
    min-height:240px !important;

    transform:
        translateX(-50%)
        perspective(950px)
        rotateX(55deg)
        scaleX(1.04) !important;

    transform-origin:center bottom !important;

    background-position:center 30% !important;

    /*
       oben stärker ausblenden,
       damit die hintere Bodenkante nicht sichtbar ist
    */
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.12) 14%,
            rgba(0,0,0,.60) 30%,
            #000 48%,
            #000 100%
        ) !important;

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.12) 14%,
            rgba(0,0,0,.60) 30%,
            #000 48%,
            #000 100%
        ) !important;
}

@media (max-width:700px){
    .login-screen .nova-floor{
        bottom:-4vh !important;
        width:112vw !important;
        height:25vh !important;
        min-height:180px !important;

        transform:
            translateX(-50%)
            perspective(750px)
            rotateX(52deg)
            scaleX(1.04) !important;
    }
}

/* NOVA FLOOR DEPTH FIX V2 */

.login-screen .nova-floor{
    position:absolute !important;

    left:50% !important;
    right:auto !important;
    bottom:-10vh !important;

    width:132vw !important;
    max-width:none !important;

    height:50vh !important;
    min-height:360px !important;

    transform:
        translateX(-50%)
        perspective(1500px)
        rotateX(79deg) !important;

    transform-origin:center bottom !important;

    border-radius:0 !important;
    opacity:.98 !important;
    overflow:hidden !important;

    background:
        url("assets/login-floor.jpg")
        center top / cover
        no-repeat !important;

    filter:
        brightness(.78)
        saturate(.88)
        contrast(1.06) !important;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.08) 10%,
            rgba(0,0,0,.42) 22%,
            rgba(0,0,0,.78) 34%,
            #000 46%,
            #000 100%
        ) !important;

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.08) 10%,
            rgba(0,0,0,.42) 22%,
            rgba(0,0,0,.78) 34%,
            #000 46%,
            #000 100%
        ) !important;
}

.login-screen .nova-floor::before{
    content:none !important;
    display:none !important;
}

.login-screen .nova-floor-ring{
    display:none !important;
}

@media (max-width:700px){
    .login-screen .nova-floor{
        bottom:-6vh !important;
        width:138vw !important;
        height:34vh !important;
        min-height:220px !important;

        transform:
            translateX(-50%)
            perspective(1100px)
            rotateX(77deg) !important;
    }
}

/* NOVA FLOOR PERSPECTIVE FIX V4 */

.login-screen .nova-floor{
    left:50% !important;
    right:auto !important;

    bottom:-13vh !important;

    width:116vw !important;
    max-width:none !important;

    height:34vh !important;
    min-height:250px !important;

    transform:
        translateX(-50%)
        perspective(1400px)
        rotateX(34deg)
        scaleX(1.02) !important;

    transform-origin:center bottom !important;

    background:
        url("assets/login-floor.jpg")
        center center / cover
        no-repeat !important;

    filter:
        brightness(.70)
        contrast(1.05)
        saturate(.84) !important;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.04) 8%,
            rgba(0,0,0,.22) 18%,
            rgba(0,0,0,.58) 32%,
            #000 50%,
            #000 100%
        ) !important;

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.04) 8%,
            rgba(0,0,0,.22) 18%,
            rgba(0,0,0,.58) 32%,
            #000 50%,
            #000 100%
        ) !important;
}

.login-screen .nova-floor::before,
.login-screen .nova-floor::after{
    content:none !important;
    display:none !important;
}

.login-screen .nova-floor-ring{
    display:none !important;
}

@media (max-width:700px){
    .login-screen .nova-floor{
        bottom:-9vh !important;
        width:120vw !important;
        height:26vh !important;
        min-height:170px !important;

        transform:
            translateX(-50%)
            perspective(1000px)
            rotateX(31deg)
            scaleX(1.02) !important;
    }
}


/* NOVA FLOOR CORRECT PERSPECTIVE FINAL */

/*
   nova-floor ist nur noch die unsichtbare Bühne.
   Der eigentliche Steinboden liegt auf ::before.
*/
.login-screen .nova-floor{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;

    transform:none !important;

    z-index:1 !important;

    overflow:hidden !important;

    border-radius:0 !important;

    background:none !important;

    filter:none !important;
    opacity:1 !important;

    -webkit-mask-image:none !important;
    mask-image:none !important;

    pointer-events:none !important;
}


/* ==========================================================
   EIGENTLICHER STEINBODEN
   Fluchtpunkt HINTEN bei ca. 72% Bildschirmhöhe
   ========================================================== */

.login-screen .nova-floor::before{
    content:"" !important;

    display:block !important;

    position:absolute !important;

    /*
       DAS ist die hintere Bodenkante.
       Sie bleibt fest und läuft von dort nach vorne.
    */
    top:75% !important;

    left:-10vw !important;

    width:120vw !important;
    height:68vh !important;

    background:
        url("assets/login-floor.jpg")
        center top / cover
        no-repeat !important;

    /*
       WICHTIG:
       Perspektive ist OBEN verankert.
       Dadurch liegt hinten der Fluchtpunkt
       und der Boden öffnet sich nach vorne.
    */
    transform:
        perspective(1100px)
        rotateX(70deg)
        scaleX(1.03) !important;

    transform-origin:
        center top !important;

    border-radius:0 !important;

    filter:
        brightness(.70)
        contrast(1.06)
        saturate(.86) !important;

    opacity:.98 !important;

    /*
       Hintere Kante weich im Schwarz verschwinden lassen.
    */
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.12) 5%,
            rgba(0,0,0,.55) 13%,
            #000 24%,
            #000 100%
        ) !important;

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.12) 5%,
            rgba(0,0,0,.55) 13%,
            #000 24%,
            #000 100%
        ) !important;

    pointer-events:none !important;
}


/* keine zweite alte Bodenebene */
.login-screen .nova-floor::after{
    content:none !important;
    display:none !important;
}


/* alte Neonringe bleiben aus */
.login-screen .nova-floor-ring,
.login-screen .nova-floor-ring.r1,
.login-screen .nova-floor-ring.r2,
.login-screen .nova-floor-ring.r3,
.login-screen .nova-floor-ring.r4{
    display:none !important;
}


/* Karte weiterhin darüber */
.login-screen .login-card{
    z-index:10 !important;
}


@media (max-width:700px){

    .login-screen .nova-floor::before{
        top:78% !important;

        left:-15vw !important;

        width:130vw !important;
        height:65vh !important;

        transform:
            perspective(900px)
            rotateX(68deg)
            scaleX(1.03) !important;

        transform-origin:
            center top !important;
    }
}

/* ==========================================================
   NOVA LOGIN BACKGROUND V5
   KEINE DURCHGEHENDEN AUDIO-LINIEN
   ========================================================== */

.nova-bg-v5{
    position:absolute;
    inset:0;

    z-index:2;

    overflow:hidden;
    pointer-events:none;

    isolation:isolate;
}


/* ----------------------------------------------------------
   LICHTQUELLEN
   ---------------------------------------------------------- */

.nova-bg-v5::before,
.nova-bg-v5::after{
    content:"";

    position:absolute;

    top:-31vh;

    width:44vw;
    height:56vh;

    border-radius:50%;

    filter:blur(74px);

    opacity:.40;

    pointer-events:none;

    animation:novaV5Light 9s ease-in-out infinite;
}

.nova-bg-v5::before{
    left:-12vw;

    background:
        radial-gradient(
            ellipse,
            rgba(183,30,255,.68),
            rgba(127,30,210,.20) 38%,
            transparent 72%
        );
}

.nova-bg-v5::after{
    right:-12vw;

    background:
        radial-gradient(
            ellipse,
            rgba(31,123,255,.68),
            rgba(28,80,205,.20) 38%,
            transparent 72%
        );

    animation-delay:-4.5s;
}


/* ----------------------------------------------------------
   SVG
   ---------------------------------------------------------- */

.nova-v5-svg{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    overflow:visible;
}


/* ----------------------------------------------------------
   STERNE
   ---------------------------------------------------------- */

.nova-v5-sparks{
    animation:novaV5Spark 5.5s ease-in-out infinite;
}


/* ----------------------------------------------------------
   EQUALIZER
   ---------------------------------------------------------- */

.nova-v5-bars{
    opacity:.69;
}

.nova-v5-bar{
    transform-box:fill-box;
    transform-origin:center bottom;

    animation:
        novaV5Bar
        var(--t)
        ease-in-out
        var(--d)
        infinite;

    will-change:transform,opacity;
}

.nova-v5-bar.purple{
    fill:url(#novaV5PurpleBar);

    filter:
        drop-shadow(0 0 3px rgba(217,70,239,.46));
}

.nova-v5-bar.blue{
    fill:url(#novaV5BlueBar);

    filter:
        drop-shadow(0 0 3px rgba(56,189,248,.46));
}


/* ----------------------------------------------------------
   PARTIKEL-TERRAIN
   ---------------------------------------------------------- */

.nova-v5-terrain{
    transform-box:view-box;
    transform-origin:center;

    animation:novaV5Terrain 15s ease-in-out infinite;
}

.nova-v5-terrain.terrain-purple{
    filter:
        drop-shadow(0 0 4px rgba(217,70,239,.24));
}

.nova-v5-terrain.terrain-blue{
    filter:
        drop-shadow(0 0 4px rgba(56,189,248,.24));

    animation-delay:-7.5s;
}


/* ----------------------------------------------------------
   PUNKT-WAVE
   ---------------------------------------------------------- */

.nova-v5-wave{
    transform-box:view-box;
    transform-origin:center;

    animation:novaV5Wave 8s ease-in-out infinite;
}

.nova-v5-wave.wave-purple{
    filter:
        drop-shadow(0 0 3px rgba(245,208,254,.78))
        drop-shadow(0 0 8px rgba(217,70,239,.48));
}

.nova-v5-wave.wave-blue{
    filter:
        drop-shadow(0 0 3px rgba(224,247,255,.78))
        drop-shadow(0 0 8px rgba(56,189,248,.48));

    animation-delay:-4s;
}

.nova-v5-wave-dot{
    animation:
        novaV5Dot
        3.4s
        ease-in-out
        var(--delay)
        infinite;
}


/* ----------------------------------------------------------
   ANIMATION
   ---------------------------------------------------------- */

@keyframes novaV5Bar{

    0%,
    100%{
        transform:scaleY(.28);
        opacity:.32;
    }

    35%{
        transform:scaleY(var(--m));
        opacity:.85;
    }

    68%{
        transform:scaleY(.48);
        opacity:.56;
    }
}


@keyframes novaV5Wave{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-5px);
    }
}


@keyframes novaV5Dot{

    0%,
    100%{
        opacity:.48;
    }

    50%{
        opacity:1;
    }
}


@keyframes novaV5Terrain{

    0%,
    100%{
        transform:
            translateX(0)
            translateY(0);
    }

    50%{
        transform:
            translateX(6px)
            translateY(-4px);
    }
}


@keyframes novaV5Spark{

    0%,
    100%{
        opacity:.38;
    }

    50%{
        opacity:.82;
    }
}


@keyframes novaV5Light{

    0%,
    100%{
        opacity:.27;
        transform:scale(1);
    }

    50%{
        opacity:.45;
        transform:scale(1.06);
    }
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width:700px){

    .nova-bg-v5{
        opacity:.80;
    }

    .nova-v5-bars{
        opacity:.52;
    }

    .nova-v5-terrain{
        opacity:.70;
    }
}


/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){

    .nova-v5-bar,
    .nova-v5-wave,
    .nova-v5-wave-dot,
    .nova-v5-terrain,
    .nova-v5-sparks,
    .nova-bg-v5::before,
    .nova-bg-v5::after{
        animation:none !important;
    }
}


/* NOVA LOGIN BACKGROUND V6 PLASMA */

/* ==========================================================
   GRUNDEBENE
   ========================================================== */

.nova-bg-v6{
    position:absolute;
    inset:0;

    z-index:2;

    overflow:hidden;
    pointer-events:none;

    isolation:isolate;
}


/* ==========================================================
   LICHT VON OBEN
   ========================================================== */

.nova-bg-v6::before,
.nova-bg-v6::after{
    content:"";

    position:absolute;

    top:-30vh;

    width:46vw;
    height:57vh;

    border-radius:50%;

    filter:blur(82px);

    opacity:.34;

    animation:novaV6TopLight 9s ease-in-out infinite;
}

.nova-bg-v6::before{
    left:-12vw;

    background:
        radial-gradient(
            ellipse,
            rgba(199,45,255,.72) 0%,
            rgba(133,40,210,.20) 42%,
            transparent 73%
        );
}

.nova-bg-v6::after{
    right:-12vw;

    background:
        radial-gradient(
            ellipse,
            rgba(39,138,255,.70) 0%,
            rgba(31,87,210,.20) 42%,
            transparent 73%
        );

    animation-delay:-4.5s;
}


/* ==========================================================
   DIE ZWEI PLASMAFELDER
   ========================================================== */

.nova-v6-field{
    position:absolute;

    top:34%;
    width:42vw;
    height:43vh;

    min-height:320px;

    pointer-events:none;

    transform-style:preserve-3d;
}


.nova-v6-field-left{
    left:-3vw;
}


.nova-v6-field-right{
    right:-3vw;
}


/* ==========================================================
   ORGANISCHE CLOUD-LAYER
   KEINE LINIE / KEIN BALKEN / KEIN MESH
   ========================================================== */

.nova-v6-cloud{
    position:absolute;

    left:50%;
    top:50%;

    width:74%;
    height:66%;

    border-radius:
        46% 54% 63% 37%
        /
        58% 41% 59% 42%;

    mix-blend-mode:screen;

    will-change:transform,opacity;

    pointer-events:none;
}


/* ---------------- LEFT ---------------- */

.nova-v6-field-left .c1{
    background:
        radial-gradient(
            ellipse at 44% 52%,
            rgba(240,171,252,.52) 0%,
            rgba(217,70,239,.23) 28%,
            rgba(126,34,206,.08) 52%,
            transparent 72%
        );

    filter:blur(14px);

    transform:
        translate(-50%,-50%)
        rotate(-12deg);

    animation:novaV6CloudA 13s ease-in-out infinite;
}


.nova-v6-field-left .c2{
    width:59%;
    height:76%;

    background:
        conic-gradient(
            from 205deg at 48% 50%,
            transparent 0deg,
            rgba(168,85,247,.10) 42deg,
            rgba(232,121,249,.39) 92deg,
            transparent 148deg,
            rgba(217,70,239,.28) 218deg,
            transparent 294deg
        );

    filter:blur(19px);

    transform:
        translate(-50%,-50%)
        rotate(24deg);

    animation:novaV6CloudB 17s ease-in-out infinite;
}


.nova-v6-field-left .c3{
    width:87%;
    height:44%;

    background:
        radial-gradient(
            ellipse,
            rgba(217,70,239,.27),
            rgba(126,34,206,.09) 46%,
            transparent 75%
        );

    filter:blur(27px);

    transform:
        translate(-50%,-50%)
        rotate(6deg);

    animation:novaV6CloudC 19s ease-in-out infinite;
}


.nova-v6-field-left .c4{
    width:46%;
    height:49%;

    background:
        radial-gradient(
            circle,
            rgba(255,238,255,.28),
            rgba(232,121,249,.17) 26%,
            rgba(168,85,247,.04) 57%,
            transparent 76%
        );

    filter:blur(10px);

    transform:
        translate(-50%,-50%);

    animation:novaV6CloudD 11s ease-in-out infinite;
}


/* ---------------- RIGHT ---------------- */

.nova-v6-field-right .c1{
    background:
        radial-gradient(
            ellipse at 56% 52%,
            rgba(186,230,253,.50) 0%,
            rgba(56,189,248,.22) 28%,
            rgba(37,99,235,.08) 52%,
            transparent 72%
        );

    filter:blur(14px);

    transform:
        translate(-50%,-50%)
        rotate(12deg);

    animation:novaV6CloudA 14s ease-in-out infinite reverse;
}


.nova-v6-field-right .c2{
    width:59%;
    height:76%;

    background:
        conic-gradient(
            from 155deg at 52% 50%,
            transparent 0deg,
            rgba(59,130,246,.10) 42deg,
            rgba(125,211,252,.38) 92deg,
            transparent 148deg,
            rgba(56,189,248,.27) 218deg,
            transparent 294deg
        );

    filter:blur(19px);

    transform:
        translate(-50%,-50%)
        rotate(-24deg);

    animation:novaV6CloudB 18s ease-in-out infinite reverse;
}


.nova-v6-field-right .c3{
    width:87%;
    height:44%;

    background:
        radial-gradient(
            ellipse,
            rgba(56,189,248,.26),
            rgba(37,99,235,.09) 46%,
            transparent 75%
        );

    filter:blur(27px);

    transform:
        translate(-50%,-50%)
        rotate(-6deg);

    animation:novaV6CloudC 20s ease-in-out infinite reverse;
}


.nova-v6-field-right .c4{
    width:46%;
    height:49%;

    background:
        radial-gradient(
            circle,
            rgba(238,252,255,.28),
            rgba(125,211,252,.17) 26%,
            rgba(59,130,246,.04) 57%,
            transparent 76%
        );

    filter:blur(10px);

    transform:
        translate(-50%,-50%);

    animation:novaV6CloudD 12s ease-in-out infinite reverse;
}


/* ==========================================================
   HELLER ENERGIEKERN
   ========================================================== */

.nova-v6-energy-core{
    position:absolute;

    left:50%;
    top:53%;

    width:27%;
    height:27%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    filter:blur(18px);

    opacity:.58;

    mix-blend-mode:screen;

    animation:novaV6Core 6s ease-in-out infinite;
}


.nova-v6-field-left .nova-v6-energy-core{
    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.46),
            rgba(240,171,252,.30) 20%,
            rgba(217,70,239,.12) 47%,
            transparent 73%
        );
}


.nova-v6-field-right .nova-v6-energy-core{
    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.45),
            rgba(186,230,253,.29) 20%,
            rgba(56,189,248,.12) 47%,
            transparent 73%
        );

    animation-delay:-3s;
}


/* ==========================================================
   PARTIKEL
   ========================================================== */

.nova-v6-particles{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    overflow:visible;

    z-index:4;
}


.nova-v6-particle{
    animation:
        novaV6Particle
        var(--t)
        ease-in-out
        var(--d)
        infinite;
}


.nova-v6-particle-group.left{
    filter:
        drop-shadow(0 0 3px rgba(217,70,239,.34));
}


.nova-v6-particle-group.right{
    filter:
        drop-shadow(0 0 3px rgba(56,189,248,.34));
}


/* ==========================================================
   ENERGIEKNOTEN
   ========================================================== */

.nova-v6-node{
    transform-box:fill-box;
    transform-origin:center;

    animation:
        novaV6Node
        3.5s
        ease-in-out
        var(--d)
        infinite;
}


.nova-v6-node.left{
    filter:
        drop-shadow(0 0 5px rgba(255,220,255,.95))
        drop-shadow(0 0 13px rgba(217,70,239,.58));
}


.nova-v6-node.right{
    filter:
        drop-shadow(0 0 5px rgba(224,249,255,.95))
        drop-shadow(0 0 13px rgba(56,189,248,.58));
}


/* ==========================================================
   ANIMATION
   ========================================================== */

@keyframes novaV6TopLight{

    0%,
    100%{
        opacity:.25;
        transform:scale(1);
    }

    50%{
        opacity:.44;
        transform:scale(1.06);
    }
}


@keyframes novaV6CloudA{

    0%,
    100%{
        transform:
            translate(-50%,-50%)
            rotate(-12deg)
            scale(1);
    }

    50%{
        transform:
            translate(-46%,-54%)
            rotate(-4deg)
            scale(1.09);
    }
}


@keyframes novaV6CloudB{

    0%,
    100%{
        opacity:.47;
    }

    50%{
        opacity:.84;
    }
}


@keyframes novaV6CloudC{

    0%,
    100%{
        opacity:.35;
        transform:
            translate(-50%,-50%)
            scale(1);
    }

    50%{
        opacity:.69;
        transform:
            translate(-52%,-46%)
            scale(1.12);
    }
}


@keyframes novaV6CloudD{

    0%,
    100%{
        opacity:.32;
    }

    50%{
        opacity:.74;
    }
}


@keyframes novaV6Core{

    0%,
    100%{
        transform:
            translate(-50%,-50%)
            scale(.82);

        opacity:.36;
    }

    50%{
        transform:
            translate(-50%,-50%)
            scale(1.18);

        opacity:.72;
    }
}


@keyframes novaV6Particle{

    0%,
    100%{
        opacity:.22;
        transform:translateY(4px);
    }

    50%{
        opacity:.95;
        transform:translateY(-7px);
    }
}


@keyframes novaV6Node{

    0%,
    100%{
        transform:scale(.62);
        opacity:.33;
    }

    50%{
        transform:scale(1.28);
        opacity:1;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:700px){

    .nova-bg-v6{
        opacity:.82;
    }

    .nova-v6-field{
        width:58vw;
        height:34vh;
        top:39%;
    }

    .nova-v6-field-left{
        left:-15vw;
    }

    .nova-v6-field-right{
        right:-15vw;
    }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion:reduce){

    .nova-v6-cloud,
    .nova-v6-energy-core,
    .nova-v6-particle,
    .nova-v6-node,
    .nova-bg-v6::before,
    .nova-bg-v6::after{
        animation:none !important;
    }
}


/* ==========================================================
   NOVA LOGIN BACKGROUND V7 RESONANCE
   Floating digital resonance sculptures
   ========================================================== */

.nova-bg-v7{
    position:absolute;
    inset:0;

    z-index:2;

    overflow:hidden;
    pointer-events:none;

    isolation:isolate;
}


/* ==========================================================
   AMBIENT LICHT
   ========================================================== */

.nova-bg-v7::before,
.nova-bg-v7::after{
    content:"";

    position:absolute;

    top:-28vh;

    width:44vw;
    height:56vh;

    border-radius:50%;

    filter:blur(80px);

    opacity:.32;

    animation:novaV7TopGlow 10s ease-in-out infinite;
}


.nova-bg-v7::before{
    left:-11vw;

    background:
        radial-gradient(
            ellipse,
            rgba(196,40,255,.70),
            rgba(128,36,205,.17) 42%,
            transparent 73%
        );
}


.nova-bg-v7::after{
    right:-11vw;

    background:
        radial-gradient(
            ellipse,
            rgba(38,133,255,.68),
            rgba(27,81,205,.17) 42%,
            transparent 73%
        );

    animation-delay:-5s;
}


/* ==========================================================
   SVG
   ========================================================== */

.nova-v7-svg{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    overflow:visible;

    /*
       hinter der Karte bewusst ruhiger
    */
    -webkit-mask-image:
        radial-gradient(
            ellipse at 50% 50%,
            rgba(0,0,0,.05) 0%,
            rgba(0,0,0,.15) 15%,
            rgba(0,0,0,.65) 27%,
            #000 42%
        );

    mask-image:
        radial-gradient(
            ellipse at 50% 50%,
            rgba(0,0,0,.05) 0%,
            rgba(0,0,0,.15) 15%,
            rgba(0,0,0,.65) 27%,
            #000 42%
        );
}


/* ==========================================================
   ENERGIEKERNE
   ========================================================== */

.nova-v7-core{
    filter:url(#novaV7Blur);

    opacity:.72;

    transform-box:fill-box;
    transform-origin:center;

    animation:novaV7Core 9s ease-in-out infinite;
}


.nova-v7-core.core-right{
    animation-delay:-4.5s;
}


/* ==========================================================
   SKULPTUREN
   ========================================================== */

.nova-v7-sculpture{
    transform-box:view-box;
    transform-origin:center;

    will-change:transform;

    animation:novaV7Sculpture 18s ease-in-out infinite;
}


.nova-v7-sculpture.sculpture-right{
    animation:
        novaV7SculptureRight
        21s
        ease-in-out
        infinite;
}


/* ==========================================================
   FRAGMENTE
   ========================================================== */

.nova-v7-shard{
    transform-box:fill-box;
    transform-origin:center;

    will-change:transform,opacity;

    animation:
        novaV7Shard
        var(--t)
        ease-in-out
        var(--d)
        infinite;
}


.nova-v7-shard.far{
    filter:blur(.8px);
}


.nova-v7-shard.mid{
    filter:
        drop-shadow(0 0 2px rgba(255,255,255,.13));
}


.nova-v7-shard.near{
    filter:
        drop-shadow(0 0 3px rgba(255,255,255,.25))
        drop-shadow(0 0 9px rgba(125,110,255,.18));
}


.nova-v7-shard.left.near{
    filter:
        drop-shadow(0 0 3px rgba(255,224,255,.32))
        drop-shadow(0 0 10px rgba(217,70,239,.27));
}


.nova-v7-shard.right.near{
    filter:
        drop-shadow(0 0 3px rgba(225,249,255,.32))
        drop-shadow(0 0 10px rgba(56,189,248,.27));
}


/* ==========================================================
   ENERGIEKNOTEN
   ========================================================== */

.nova-v7-node{
    transform-box:fill-box;
    transform-origin:center;

    animation:
        novaV7Node
        4.4s
        ease-in-out
        var(--d)
        infinite;
}


.nova-v7-node.left{
    filter:
        drop-shadow(0 0 5px rgba(255,226,255,.90))
        drop-shadow(0 0 12px rgba(217,70,239,.58));
}


.nova-v7-node.right{
    filter:
        drop-shadow(0 0 5px rgba(226,249,255,.90))
        drop-shadow(0 0 12px rgba(56,189,248,.58));
}


/* ==========================================================
   TIEFENSTAUB
   ========================================================== */

.nova-v7-dust-layer{
    animation:novaV7Dust 11s ease-in-out infinite;
}


/* ==========================================================
   LICHT AUF DEM STEINBODEN
   ========================================================== */

.nova-v7-ground-reflection{
    position:absolute;

    bottom:7vh;

    width:38vw;
    height:9vh;

    border-radius:50%;

    filter:blur(27px);

    opacity:.19;

    mix-blend-mode:screen;

    z-index:1;

    animation:novaV7Reflection 9s ease-in-out infinite;
}


.nova-v7-ground-reflection.reflection-left{
    left:-2vw;

    background:
        radial-gradient(
            ellipse,
            rgba(217,70,239,.46),
            transparent 68%
        );
}


.nova-v7-ground-reflection.reflection-right{
    right:-2vw;

    background:
        radial-gradient(
            ellipse,
            rgba(56,189,248,.43),
            transparent 68%
        );

    animation-delay:-4.5s;
}


/* ==========================================================
   ANIMATION
   ========================================================== */

@keyframes novaV7TopGlow{

    0%,
    100%{
        opacity:.25;
        transform:scale(1);
    }

    50%{
        opacity:.43;
        transform:scale(1.07);
    }
}


@keyframes novaV7Core{

    0%,
    100%{
        opacity:.46;
        transform:scale(.92);
    }

    50%{
        opacity:.78;
        transform:scale(1.08);
    }
}


@keyframes novaV7Sculpture{

    0%,
    100%{
        transform:
            translate3d(0,0,0)
            rotate(-1deg);
    }

    50%{
        transform:
            translate3d(11px,-9px,0)
            rotate(2deg);
    }
}


@keyframes novaV7SculptureRight{

    0%,
    100%{
        transform:
            translate3d(0,0,0)
            rotate(1deg);
    }

    50%{
        transform:
            translate3d(-13px,8px,0)
            rotate(-2.3deg);
    }
}


@keyframes novaV7Shard{

    0%,
    100%{
        transform:
            translate3d(0,0,0)
            scale(.88);

        opacity:.40;
    }

    45%{
        transform:
            translate3d(4px,-7px,0)
            scale(1.08);

        opacity:.92;
    }

    72%{
        transform:
            translate3d(-3px,3px,0)
            scale(.98);

        opacity:.64;
    }
}


@keyframes novaV7Node{

    0%,
    100%{
        transform:scale(.62);
        opacity:.30;
    }

    50%{
        transform:scale(1.35);
        opacity:1;
    }
}


@keyframes novaV7Dust{

    0%,
    100%{
        opacity:.48;
        transform:translateY(0);
    }

    50%{
        opacity:.82;
        transform:translateY(-4px);
    }
}


@keyframes novaV7Reflection{

    0%,
    100%{
        opacity:.12;
        transform:scaleX(.94);
    }

    50%{
        opacity:.25;
        transform:scaleX(1.08);
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:700px){

    .nova-bg-v7{
        opacity:.80;
    }

    .nova-v7-ground-reflection{
        width:48vw;
        bottom:5vh;
    }

    .nova-v7-shard.near{
        opacity:.72;
    }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion:reduce){

    .nova-v7-core,
    .nova-v7-sculpture,
    .nova-v7-shard,
    .nova-v7-node,
    .nova-v7-dust-layer,
    .nova-v7-ground-reflection,
    .nova-bg-v7::before,
    .nova-bg-v7::after{
        animation:none !important;
    }
}

/* NOVA LOGIN V5 WHITE CUT */

/* ganze Visualisierung minimal zügeln */
.login-screen .nova-bg-v5{
    filter:
        brightness(.88)
        saturate(.92)
        contrast(1.00) !important;
}

/* helle Splitter / Funken deutlich entschärfen */
.login-screen .nova-bg-v5 .nova-v5-sparks{
    opacity:.42 !important;
}

/* weiße Punkte / Splitter / kleine Formen runter */
.login-screen .nova-bg-v5 .nova-v5-sparks circle,
.login-screen .nova-bg-v5 .nova-v5-sparks rect,
.login-screen .nova-bg-v5 .nova-v5-sparks polygon,
.login-screen .nova-bg-v5 .nova-v5-sparks path{
    opacity:.26 !important;
}

/* echtes Weiß extra absenken */
.login-screen .nova-bg-v5 .nova-v5-svg [fill="#fff"],
.login-screen .nova-bg-v5 .nova-v5-svg [fill="#ffffff"],
.login-screen .nova-bg-v5 .nova-v5-svg [fill="white"]{
    opacity:.16 !important;
    fill-opacity:.16 !important;
}

.login-screen .nova-bg-v5 .nova-v5-svg [stroke="#fff"],
.login-screen .nova-bg-v5 .nova-v5-svg [stroke="#ffffff"],
.login-screen .nova-bg-v5 .nova-v5-svg [stroke="white"]{
    opacity:.18 !important;
    stroke-opacity:.18 !important;
}

/* NOVA V7 WHITE REDUCTION FINAL */

/* ----------------------------------------------------------
   LINKSEITE:
   fast-weiße Splitter zurück in kräftiges Violett/Magenta
   ---------------------------------------------------------- */

.nova-bg-v7 .nova-v7-shard.left[fill="#fff7ff"],
.nova-bg-v7 .nova-v7-shard.left[fill="#f5d0fe"]{
    fill:#d946ef !important;
    opacity:.48 !important;
}

.nova-bg-v7 .nova-v7-shard.left[fill="#e879f9"]{
    fill:#c026d3 !important;
}


/* ----------------------------------------------------------
   RECHTS:
   fast-weiße Splitter zurück in Cyan/Blau
   ---------------------------------------------------------- */

.nova-bg-v7 .nova-v7-shard.right[fill="#f0fdff"],
.nova-bg-v7 .nova-v7-shard.right[fill="#cffafe"]{
    fill:#38bdf8 !important;
    opacity:.48 !important;
}

.nova-bg-v7 .nova-v7-shard.right[fill="#7dd3fc"]{
    fill:#0ea5e9 !important;
}


/* ----------------------------------------------------------
   WEISSE ENERGIEKNOTEN ENTFERNEN
   ---------------------------------------------------------- */

.nova-bg-v7 .nova-v7-node.left[fill="#ffffff"]{
    fill:#e879f9 !important;
}

.nova-bg-v7 .nova-v7-node.right[fill="#ffffff"]{
    fill:#67e8f9 !important;
}


/* Knoten weniger weiß überstrahlen lassen */

.nova-bg-v7 .nova-v7-node.left{
    filter:
        drop-shadow(0 0 4px rgba(217,70,239,.72))
        drop-shadow(0 0 10px rgba(168,85,247,.34)) !important;
}

.nova-bg-v7 .nova-v7-node.right{
    filter:
        drop-shadow(0 0 4px rgba(56,189,248,.72))
        drop-shadow(0 0 10px rgba(59,130,246,.34)) !important;
}


/* ----------------------------------------------------------
   TIEFENSTAUB:
   deutlich weniger weiße Punkte
   ---------------------------------------------------------- */

.nova-bg-v7 .nova-v7-dust-layer{
    opacity:.38 !important;
}

.nova-bg-v7 .nova-v7-dust[fill="#ffffff"]{
    opacity:.10 !important;
}


/* ----------------------------------------------------------
   NAHE SPLITTER NICHT MEHR WEISS AUFGLÜHEN LASSEN
   ---------------------------------------------------------- */

.nova-bg-v7 .nova-v7-shard.near{
    filter:
        drop-shadow(0 0 3px rgba(120,85,255,.18))
        drop-shadow(0 0 8px rgba(90,80,220,.12)) !important;
}

.nova-bg-v7 .nova-v7-shard.left.near{
    filter:
        drop-shadow(0 0 3px rgba(217,70,239,.28))
        drop-shadow(0 0 8px rgba(168,85,247,.18)) !important;
}

.nova-bg-v7 .nova-v7-shard.right.near{
    filter:
        drop-shadow(0 0 3px rgba(56,189,248,.28))
        drop-shadow(0 0 8px rgba(59,130,246,.18)) !important;
}

/* NOVA V7 WHITE REDUCTION EXTRA */

/* fast weiße Splitter noch stärker abdunkeln */
.nova-bg-v7 .nova-v7-shard.left[fill="#fff7ff"],
.nova-bg-v7 .nova-v7-shard.left[fill="#f5d0fe"]{
    fill:#c026d3 !important;
    opacity:.22 !important;
}

.nova-bg-v7 .nova-v7-shard.right[fill="#f0fdff"],
.nova-bg-v7 .nova-v7-shard.right[fill="#cffafe"]{
    fill:#0891b2 !important;
    opacity:.22 !important;
}

/* helle Energiepunkte fast komplett entschärfen */
.nova-bg-v7 .nova-v7-node.left[fill="#ffffff"]{
    fill:#d946ef !important;
    opacity:.32 !important;
}

.nova-bg-v7 .nova-v7-node.right[fill="#ffffff"]{
    fill:#22d3ee !important;
    opacity:.32 !important;
}

/* Glow deutlich schwächer */
.nova-bg-v7 .nova-v7-node.left,
.nova-bg-v7 .nova-v7-node.right{
    filter:
        drop-shadow(0 0 2px rgba(120,110,255,.20))
        drop-shadow(0 0 6px rgba(120,110,255,.10)) !important;
}

/* Tiefenstaub noch weiter runter */
.nova-bg-v7 .nova-v7-dust-layer{
    opacity:.18 !important;
}

.nova-bg-v7 .nova-v7-dust[fill="#ffffff"]{
    opacity:.04 !important;
}

/* generelle helle Partikel weiter entschärfen */
.nova-bg-v7 .nova-v7-sparks,
.nova-bg-v7 .nova-v7-particles{
    opacity:.28 !important;
}

/* nahe Splitter weniger leuchten */
.nova-bg-v7 .nova-v7-shard.near{
    opacity:.34 !important;
    filter:
        drop-shadow(0 0 2px rgba(110,100,255,.10))
        drop-shadow(0 0 5px rgba(110,100,255,.06)) !important;
}

/* falls einzelne weiße Formen durchkommen */
.nova-bg-v7 [fill="#ffffff"]{
    opacity:.18 !important;
}


/* NOVA V7 COLOR LOCK */

/* keinerlei weißes Überstrahlen mehr */

.nova-bg-v7 .nova-v7-shard.left{
    filter:
        drop-shadow(0 0 3px rgba(192,38,211,.20))
        drop-shadow(0 0 7px rgba(126,34,206,.10)) !important;
}

.nova-bg-v7 .nova-v7-shard.right{
    filter:
        drop-shadow(0 0 3px rgba(14,165,233,.20))
        drop-shadow(0 0 7px rgba(37,99,235,.10)) !important;
}

.nova-bg-v7 .nova-v7-node.left{
    filter:
        drop-shadow(0 0 3px rgba(217,70,239,.35))
        drop-shadow(0 0 7px rgba(168,85,247,.18)) !important;
}

.nova-bg-v7 .nova-v7-node.right{
    filter:
        drop-shadow(0 0 3px rgba(56,189,248,.35))
        drop-shadow(0 0 7px rgba(37,99,235,.18)) !important;
}

.nova-bg-v7 .nova-v7-dust-layer{
    opacity:.15 !important;
}

/* ==========================================================
   NOVA LOGIN FLOOR V12
   Dunkler Boden ohne login-floor.jpg / ohne weiße Steinfläche
   ========================================================== */

.login-screen .nova-floor{
    background:
        radial-gradient(
            ellipse at 27% 48%,
            rgba(192,38,211,.16) 0%,
            rgba(126,34,206,.07) 30%,
            transparent 68%
        ),
        radial-gradient(
            ellipse at 73% 48%,
            rgba(14,165,233,.15) 0%,
            rgba(37,99,235,.065) 30%,
            transparent 68%
        ),
        linear-gradient(
            180deg,
            rgba(5,6,16,.10) 0%,
            rgba(3,4,12,.72) 38%,
            rgba(1,2,7,.96) 100%
        ) !important;

    background-image:
        radial-gradient(
            ellipse at 27% 48%,
            rgba(192,38,211,.16),
            transparent 68%
        ),
        radial-gradient(
            ellipse at 73% 48%,
            rgba(14,165,233,.15),
            transparent 68%
        ),
        linear-gradient(
            180deg,
            rgba(5,6,16,.10),
            rgba(1,2,7,.96)
        ) !important;

    filter:none !important;
    mix-blend-mode:normal !important;
    opacity:1 !important;

    box-shadow:
        inset 0 40px 80px rgba(0,0,0,.48),
        inset 0 -35px 70px rgba(0,0,0,.72) !important;
}


/* alte Bild-/Glanzebenen komplett abschalten */
.login-screen .nova-floor::before,
.login-screen .nova-floor::after{
    content:none !important;
    display:none !important;
    background:none !important;
}


/* Bodenringe nur noch als dunkle Audio-Energie */
.login-screen .nova-floor-ring{
    background:transparent !important;
    box-shadow:none !important;
    filter:none !important;
    opacity:.24 !important;
}

.login-screen .nova-floor-ring.r1{
    border-color:rgba(217,70,239,.32) !important;
}

.login-screen .nova-floor-ring.r2{
    border-color:rgba(168,85,247,.22) !important;
}

.login-screen .nova-floor-ring.r3{
    border-color:rgba(56,189,248,.24) !important;
}

.login-screen .nova-floor-ring.r4{
    border-color:rgba(37,99,235,.16) !important;
}


/* ==========================================================
   WORTKOERPER – SCHRITT 12
   Login-Card aufloesen -> freistehende linke Formularspalte
   (nova-floor / nova-bg-v7 / Shards bleiben unveraendert)
   ========================================================== */

.login-screen{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    padding-left:8vw !important;
}

.login-card{
    margin:0 !important;
    background:none !important;
    border:none !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    width:min(380px, 86vw) !important;
    min-height:auto !important;
    padding:0 !important;
    transform:none !important;
}

.login-card::after{
    content:none !important;
    display:none !important;
}

/* ==========================================================
   WORTKOERPER – SCHRITT 15
   Formular: Underline-Inputs, ruhige Labels, schlichter Button
   (statischer Zustand, noch OHNE Hover-Sweep)
   Gilt gemeinsam fuer Login- und Register-Ansicht (.login-form)
   ========================================================== */

.login-form label,
.login-form span{
    color:rgba(232,236,255,.72) !important;
    font-size:12px !important;
    letter-spacing:.4px !important;
    text-transform:none !important;
    margin-bottom:8px !important;
}

.login-form input{
    background:transparent !important;
    border:none !important;
    border-bottom:1px solid rgba(255,255,255,.16) !important;
    border-radius:0 !important;
    box-shadow:none !important;
    height:44px !important;
    padding:0 2px !important;
    font-size:15px !important;
    color:#f3f6ff !important;
}

.login-form input::placeholder{
    color:rgba(255,255,255,.34) !important;
}

.login-form input:focus{
    outline:none !important;
    box-shadow:none !important;
    border-bottom:1px solid transparent !important;
    border-image:linear-gradient(90deg,#a855f7,#22d3ee) 1 !important;
}

.login-form button[type="submit"]{
    background:
        linear-gradient(
            90deg,
            rgba(168,85,247,.14),
            rgba(34,211,238,.14)
        ),
        rgba(9,12,26,.92) !important;
    border:1px solid rgba(168,130,255,.35) !important;
    border-radius:10px !important;
    box-shadow:none !important;
    height:48px !important;
    font-size:15px !important;
    color:#f3f6ff !important;
    text-shadow:none !important;
}

/* ==========================================================
   WORTKOERPER – SCHRITT 17
   Alte V7-Visualisierung (Shards/Dust/Nodes/Core/Reflection)
   komplett deaktivieren, NUR per CSS, HTML bleibt erhalten
   (Rollback jederzeit moeglich durch Entfernen dieses Blocks)
   ========================================================== */

.nova-bg-v7{
    display:none !important;
}

/* === WORTKOERPER STEP 19: OLD STAGE PSEUDO ELEMENTS OFF === */
.login-screen .nova-login-stage::before,
.login-screen .nova-login-stage::after {
    content: none !important;
    display: none !important;
}

/* === WORTKOERPER STEP 20: ISOLATIONSTEST - nova-floor komplett aus === */
.login-screen .nova-floor {
    display: none !important;
}