:root { --bg: #111114; --surface: #191920; --surface2: #202028; --surface3: #26262f; --border: #2c2c38; --border2: #38384a; /* Aliases for chart overlay */ --s1: #191920; --s2: #202028; --s3: #26262f; --b1: #2c2c38; --b2: #38384a; --c1: #f0eef8; --c2: #c4bdd8; --c3: #c0b4d8; --c4: #9888b8; --ff: 'Inter', -apple-system, sans-serif; --pur: #7B45C8; --pur-light: #9B6BD4; --pur-mid: #5C30A8; --pur-deep: #4c1d95; --grad: linear-gradient(135deg, #4C1D95 0%, #6B3CB8 60%, #9B6BD4 100%); --grad-btn: linear-gradient(135deg, #5C30A8 0%, #9333ea 100%); --grad-soft: rgba(123,69,200,0.12); --grad-glow: rgba(123,69,200,0.25); --bpur: rgba(123,69,200,0.35); --text: #f0eef8; --text2: #c4bdd8; --text3: #c0b4d8; --text4: #9888b8; --green: #34d399; --green-dim: rgba(52,211,153,0.15); --red: #f87171; --red-dim: rgba(248,113,113,0.15); --amber: #fbbf24; --amber-dim: rgba(251,191,36,0.15); --blue: #60a5fa; --blue-dim: rgba(96,165,250,0.15); /* ── Semantic colors ── */ --text-bright: #fff; --text-on-accent: #fff; --text-soft: #d4d0e0; --pur-accent: #a855f7; --violet: #a78bfa; --pur-chip: #B090D8; --spotify: #1DB954; --red-strong: #ef4444; --amber-strong:#f59e0b; /* ── Surface variants ── */ --sidebar-bg: rgba(17,17,20,0.97); --topbar-bg: rgba(17,17,20,0.6); --surface-chart: #1e1e26; --overlay-bg: rgba(0,0,0,0.6); --overlay-modal: rgba(0,0,0,0.8); --overlay-blur: rgba(15,15,19,0.98); /* ── Mobile nav ── */ --mobnav-from: #1e1432; --mobnav-via: #1b1628; --mobnav-to: #1a1a1a; /* ── Session type colors ── */ --sess-recording: #2D9CDB; --sess-recording-text: #1a6fa0; --sess-mixing: #E99D1A; --sess-mixing-text: #9a6a10; --sess-mastering: #27AE60; --sess-mastering-text: #1a7a42; --sess-meeting: #D4537E; --sess-meeting-text: #9a2d56; --sess-other: #a78bfa; --sess-other-text: #6d52c7; /* ── RGB base values for opacity variants ── */ --rgb-white: 255,255,255; --rgb-black: 0,0,0; --rgb-pur: 123,69,200; --rgb-violet: 139,92,246; --rgb-green: 52,211,153; --rgb-red: 248,113,113; --rgb-red-strong: 239,68,68; --rgb-amber: 251,191,36; --rgb-blue: 96,165,250; --rgb-spotify: 29,185,84; --rgb-bg: 17,17,20; --rgb-pur-accent: 168,85,247; --rgb-a78bfa: 167,139,250; --rgb-cyan: 6,182,212; --rgb-pur-dark: 90,40,180; --rgb-amber-strong: 245,158,11; --rgb-sess-recording: 45,156,219; --rgb-sess-mixing: 233,157,26; --rgb-sess-mastering: 39,174,96; --rgb-sess-meeting: 212,83,126; --violet-mid: #8b5cf6; --cyan: #06b6d4; --green-accept:#22c55e; --orange: #fb923c; --pink: #f472b6; --slate: #94a3b8; --rgb-green-accept: 34,197,94; --rgb-violet-mid: 139,92,246; --rgb-pur-bright: 124,58,237; --rgb-gold: 232,201,106; /* Icon-Filter: invertiert Emojis in Dark Mode zu weiß, in Light Mode zu schwarz */ --icon-filter: brightness(0) invert(1); color-scheme: dark; } /* ═══════════════════════════════════════════════════════════════════════════ LIGHT MODE Aktivierung via: oder Dark Mode bleibt Default (das obige :root). ─────────────────────────────────────────────────────────────────────────── */ :root.light, :root[data-theme="light"] { color-scheme: light; /* Surfaces – Apple iOS inspiriert: kühl-neutral, professionell #f2f2f7 ist Apples systemGroupedBackground – vertraut, angenehm, weiße Karten poppen klar. */ --bg: #f2f2f7; /* iOS systemGroupedBackground */ --surface: #ffffff; /* Cards, Modals, erhöhte Elemente */ --surface2: #ffffff; /* Eingaben, Buttons – gleich hell wie Cards, Border trennt */ --surface3: #e5e5ea; /* Depressed/Inset/Chips */ --border: #d1d1d6; /* iOS separator (2:1 Kontrast zu bg) */ --border2: #c6c6cc; /* Starker Divider */ /* Chart aliases */ --s1: #ffffff; --s2: #ffffff; --s3: #e5e5ea; --b1: #d1d1d6; --b2: #c6c6cc; --c1: #1c1c1e; --c2: #3a3a3c; --c3: #6e6e73; --c4: #8e8e93; /* Text – iOS Label-Farben */ --text: #1c1c1e; /* primary label */ --text2: #3a3a3c; /* secondary label */ --text3: #6e6e73; /* tertiary label */ --text4: #8e8e93; /* quaternary label */ /* Lila-Akzent – dunkler für Lesbarkeit auf hellem Grund */ --pur: #6d28d9; --pur-light: #7c3aed; --pur-mid: #5b21b6; --pur-deep: #4c1d95; --grad: linear-gradient(135deg, #4c1d95 0%, #6d28d9 60%, #7c3aed 100%); --grad-btn: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%); --grad-soft: rgba(109,40,217,0.08); --grad-glow: rgba(109,40,217,0.18); --bpur: rgba(109,40,217,0.28); /* Status – gedämpfter, höherer Kontrast */ --green: #059669; --green-dim: rgba(5,150,105,0.14); --red: #dc2626; --red-dim: rgba(220,38,38,0.12); --amber: #b45309; --amber-dim: rgba(180,83,9,0.14); --blue: #2563eb; --blue-dim: rgba(37,99,235,0.12); /* Semantische Farben */ --text-bright: #1c1c1e; /* war weiß – wird dunkel */ --text-on-accent: #ffffff; /* bleibt weiß auf gefärbten Buttons */ --text-soft: #3a3a3c; --pur-accent: #7c3aed; --violet: #6d28d9; --violet-mid: #5b21b6; --pur-chip: #5b21b6; --spotify: #1DB954; /* Brand – bleibt */ --red-strong: #dc2626; --amber-strong:#d97706; --green-accept:#059669; --cyan: #0891b2; --orange: #ea580c; --pink: #db2777; --slate: #64748b; /* Surface-Varianten */ --sidebar-bg: rgba(242,242,247,0.92); --topbar-bg: rgba(242,242,247,0.6); --surface-chart: #ffffff; --overlay-bg: rgba(0,0,0,0.45); --overlay-modal: rgba(0,0,0,0.55); --overlay-blur: rgba(255,255,255,0.92); /* Mobile Nav (light) */ --mobnav-from: #ffffff; --mobnav-via: #fafafa; --mobnav-to: #f2f2f7; /* Session-Typ-Farben – dunkler für Kontrast auf hellem Grund */ --sess-recording: #1e40af; --sess-recording-text: #1e3a8a; --sess-mixing: #b45309; --sess-mixing-text: #7c2d12; --sess-mastering: #15803d; --sess-mastering-text: #14532d; --sess-meeting: #be185d; --sess-meeting-text: #9f1239; --sess-other: #7c3aed; --sess-other-text: #5b21b6; /* RGB-Triplets – KERN der Theme-Adaption --rgb-white wird zu 0,0,0 damit "Glas-Highlights" zu "Dunkel-Tints" werden. Der Variablenname ist historisch ("white") aber verhält sich semantisch als "Tint-Farbe die auf Basis-Farbe aufgetragen wird". */ --rgb-white: 0,0,0; --rgb-black: 0,0,0; /* Schatten bleiben schwarz */ --rgb-pur: 109,40,217; --rgb-violet: 109,40,217; --rgb-violet-mid: 91,33,182; --rgb-green: 5,150,105; --rgb-red: 220,38,38; --rgb-red-strong: 220,38,38; --rgb-amber: 180,83,9; --rgb-blue: 37,99,235; --rgb-spotify: 29,185,84; /* Brand */ --rgb-bg: 242,242,247; --rgb-pur-accent: 124,58,237; --rgb-a78bfa: 124,58,237; --rgb-cyan: 8,145,178; --rgb-pur-dark: 76,29,149; --rgb-amber-strong: 217,119,6; --rgb-sess-recording: 30,64,175; --rgb-sess-mixing: 180,83,9; --rgb-sess-mastering: 21,128,61; --rgb-sess-meeting: 190,24,93; --rgb-green-accept: 5,150,105; --rgb-pur-bright: 124,58,237; --rgb-gold: 180,128,55; --icon-filter: brightness(0); } /* System-Preference als Fallback, wenn der User noch keine Wahl getroffen hat. :not(.dark) stellt sicher dass ein expliziter Dark-Toggle Vorrang hat. */ @media (prefers-color-scheme: light) { :root:not(.dark):not(.light) { color-scheme: light; --bg: #f2f2f7; --surface: #ffffff; --surface2: #ffffff; --surface3: #e5e5ea; --border: #d1d1d6; --border2: #c6c6cc; --s1: #ffffff; --s2: #ffffff; --s3: #e5e5ea; --b1: #d1d1d6; --b2: #c6c6cc; --c1: #1c1c1e; --c2: #3a3a3c; --c3: #6e6e73; --c4: #8e8e93; --text: #1c1c1e; --text2: #3a3a3c; --text3: #6e6e73; --text4: #8e8e93; --pur: #6d28d9; --pur-light: #7c3aed; --pur-mid: #5b21b6; --pur-deep: #4c1d95; --grad: linear-gradient(135deg, #4c1d95 0%, #6d28d9 60%, #7c3aed 100%); --grad-btn: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%); --grad-soft: rgba(109,40,217,0.08); --grad-glow: rgba(109,40,217,0.18); --bpur: rgba(109,40,217,0.28); --green: #059669; --green-dim: rgba(5,150,105,0.14); --red: #dc2626; --red-dim: rgba(220,38,38,0.12); --amber: #b45309; --amber-dim: rgba(180,83,9,0.14); --blue: #2563eb; --blue-dim: rgba(37,99,235,0.12); --text-bright: #1c1c1e; --text-on-accent: #ffffff; --text-soft: #3a3a3c; --pur-accent: #7c3aed; --violet: #6d28d9; --violet-mid: #5b21b6; --pur-chip: #5b21b6; --red-strong: #dc2626; --amber-strong:#d97706; --green-accept:#059669; --cyan: #0891b2; --orange: #ea580c; --pink: #db2777; --slate: #64748b; --sidebar-bg: rgba(242,242,247,0.92); --topbar-bg: rgba(242,242,247,0.6); --surface-chart: #ffffff; --overlay-bg: rgba(0,0,0,0.45); --overlay-modal: rgba(0,0,0,0.55); --overlay-blur: rgba(255,255,255,0.92); --mobnav-from: #ffffff; --mobnav-via: #fafafa; --mobnav-to: #f2f2f7; --sess-recording: #1e40af; --sess-recording-text: #1e3a8a; --sess-mixing: #b45309; --sess-mixing-text: #7c2d12; --sess-mastering: #15803d; --sess-mastering-text: #14532d; --sess-meeting: #be185d; --sess-meeting-text: #9f1239; --sess-other: #7c3aed; --sess-other-text: #5b21b6; --rgb-white: 0,0,0; --rgb-black: 0,0,0; --rgb-pur: 109,40,217; --rgb-violet: 109,40,217; --rgb-violet-mid: 91,33,182; --rgb-green: 5,150,105; --rgb-red: 220,38,38; --rgb-red-strong: 220,38,38; --rgb-amber: 180,83,9; --rgb-blue: 37,99,235; --rgb-bg: 248,246,242; --rgb-pur-accent: 124,58,237; --rgb-a78bfa: 124,58,237; --rgb-cyan: 8,145,178; --rgb-pur-dark: 76,29,149; --rgb-amber-strong: 217,119,6; --rgb-sess-recording: 30,64,175; --rgb-sess-mixing: 180,83,9; --rgb-sess-mastering: 21,128,61; --rgb-sess-meeting: 190,24,93; --rgb-green-accept: 5,150,105; --rgb-pur-bright: 124,58,237; --rgb-gold: 180,128,55; --icon-filter: brightness(0); } } *{margin:0;padding:0;box-sizing:border-box;} body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100dvh;} .sidebar,.main{position:relative;z-index:1;} /* SIDEBAR */ .sidebar{width:240px;background:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:200;} .logo-area{padding:28px 22px 22px;border-bottom:1px solid var(--border);text-align:center;display:flex;flex-direction:column;align-items:center;} .logo-default{display:flex;flex-direction:column;align-items:center;} .logo-cueport{height:36px;margin-bottom:8px;} .logo-cueport img{height:100%;width:auto;object-fit:contain;} .logo-sub-text{font-size:9px;color:var(--text4);font-family:'Space Mono',monospace;letter-spacing:2.5px;} .logo-custom{display:flex;flex-direction:column;align-items:center;} .logo-emblem{width:63px;height:63px;border-radius:50%;border:1.5px solid var(--bpur);background:var(--grad-soft);display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:12px;} .logo-name{font-size:18px;font-weight:700;color:var(--text-bright);letter-spacing:0.5px;} .logo-sub{display:none;} .nav{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:2px;} .nav-lbl{font-size:9px;letter-spacing:3px;color:var(--text4);text-transform:uppercase;font-family:'Space Mono',monospace;padding:10px 10px 5px;} .nav-btn{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;border:1px solid transparent;background:none;color:var(--text3);font-family:'Inter',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.15s;width:100%;text-align:left;} .nav-btn:hover{background:var(--surface2);color:var(--text);} .nav-btn.active{background:var(--grad-soft);color:var(--pur-light);border:1px solid var(--bpur);} .nav-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;} .nav-icon svg{width:18px;height:18px;stroke-width:1.5;} .sidebar-footer{padding:14px 12px;border-top:1px solid var(--border);} .studio-badge{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--surface2);border-radius:8px;border:1px solid var(--border);} .studio-badge-info{flex:1;min-width:0;overflow:hidden;} .studio-badge-name{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .studio-badge-meta{font-size:10px;color:var(--text3);margin-top:1px;font-family:'Space Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .studio-av{width:32px;height:32px;border-radius:8px;background:var(--grad-soft);border:1px solid var(--bpur);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--pur-light);cursor:pointer;padding:0;font:inherit;transition:background-color 0.15s ease,border-color 0.15s ease,color 0.15s ease,transform 0.1s ease;} .studio-av:hover{background:rgba(var(--rgb-pur),0.20);border-color:var(--pur-light);color:#fff;} .studio-av:active{transform:scale(0.94);} .studio-av:focus-visible{outline:2px solid var(--pur-light);outline-offset:2px;} .studio-badge-logout{width:32px;height:32px;border-radius:8px;background:transparent;border:1px solid transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text4);cursor:pointer;padding:0;font:inherit;transition:background-color 0.15s ease,border-color 0.15s ease,color 0.15s ease,transform 0.1s ease;} .studio-badge-logout:hover{background:rgba(var(--rgb-red),0.10);border-color:rgba(var(--rgb-red),0.30);color:var(--red);} .studio-badge-logout:active{transform:scale(0.94);} .studio-badge-logout:focus-visible{outline:2px solid var(--red);outline-offset:2px;} @media (prefers-reduced-motion: reduce){.studio-av,.studio-badge-logout{transition:none;}} /* MAIN */ .main{margin-left:240px;min-height:100vh;} .view{display:none;} .view.active{display:block;} /* TOPBAR Bewusst NICHT sticky/fixed auf Mobile: die Topbar soll mit dem Content wegscrollen, damit iOS 26 Safari beim Scrollen echten Page-Content am Top-Edge sieht und die URL-Bar als schwebende Liquid-Glass-Pill rendert. Desktop/Tablet (>=769px): Topbar bleibt sticky fuer gewohnte UX. */ .topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;border-bottom:1px solid var(--border);background:var(--topbar-bg);backdrop-filter:blur(12px);gap:12px;flex-wrap:wrap;} @media (min-width:769px){ .topbar{position:sticky;top:0;z-index:100;} } .page-heading{font-size:22px;font-weight:700;color:var(--text-bright);letter-spacing:-0.3px;} .page-sub{font-size:11px;color:var(--text3);margin-top:2px;font-family:'Space Mono',monospace;letter-spacing:1px;} /* SORT DROPDOWN */ .sort-dd{position:relative;z-index:50;} .sort-dd-btn{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--bpur);border-radius:20px;padding:7px 15px;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--text2);cursor:pointer;transition:all .15s;white-space:nowrap;height:34px;box-sizing:border-box;} .sort-dd-btn:hover{background:var(--grad-soft);color:var(--pur-light);} .sort-dd.open .sort-dd-btn{background:var(--grad-soft);color:var(--pur-light);border-color:var(--bpur);} .sort-dd.open .sort-dd-btn svg{transform:rotate(180deg);} .sort-dd-btn svg{transition:transform .2s;} .sort-dd-menu{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:100%;background:var(--surface);border:1px solid var(--bpur);border-radius:12px;padding:4px;box-shadow:0 8px 24px rgba(var(--rgb-black),0.4);max-height:70vh;overflow-y:auto;} .sort-dd.open .sort-dd-menu{display:block;} .sort-dd-item{padding:10px 14px;border-radius:8px;font-family:'Inter',sans-serif;font-size:13px;color:var(--text2);cursor:pointer;transition:all .1s;white-space:nowrap;} .sort-dd-item:hover{background:var(--surface3);color:var(--text);} .sort-dd-item.active{color:var(--pur-light);font-weight:600;} .at-search{flex:1;min-width:140px;padding:8px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:'Space Mono',monospace;font-size:13px;outline:none;transition:border-color .15s;} .at-search:focus{border-color:var(--bpur);} .at-search::placeholder{color:var(--text4);} /* BUTTONS */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:7px 15px;border-radius:20px;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.15s;border:1px solid transparent;white-space:nowrap;height:34px;box-sizing:border-box;} .btn-pur{background:var(--grad-btn);color:var(--text-on-accent);font-weight:600;box-shadow:0 2px 12px rgba(var(--rgb-pur),0.4);} .btn-pur:hover{opacity:0.88;transform:translateY(-1px);} .btn-outline{background:transparent;color:var(--text2);border-color:var(--bpur);} .btn-outline:hover{background:var(--grad-soft);color:var(--pur-light);} .btn-ghost{background:var(--surface2);color:var(--text2);border-color:var(--border);border-radius:8px;} .btn-ghost:hover{color:var(--text);} .btn-danger{background:var(--red-dim);color:var(--red);border-color:rgba(var(--rgb-red),0.3);} .btn-danger:hover{background:rgba(var(--rgb-red),0.25);} .btn-sm{padding:7px 15px;font-size:13px;height:34px;} /* CONTENT */ .content{padding:24px 32px;} /* STATS */ .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px;} .stats-row-5{grid-template-columns:repeat(5,1fr);} .stat-card{ background:var(--surface);border:1px solid var(--border);border-radius:14px; padding:20px 22px;position:relative;overflow:hidden;transition:border-color .2s,transform .2s;box-shadow:0 4px 24px rgba(var(--rgb-black),0.3),0 1px 4px rgba(var(--rgb-black),0.2); } .stat-card:hover{border-color:var(--bpur);transform:translateY(-1px);box-shadow:0 6px 32px rgba(var(--rgb-black),0.4),0 1px 4px rgba(var(--rgb-black),0.2);} .stat-card::before{ content:'';position:absolute;top:-20px;right:-20px; width:80px;height:80px;border-radius:50%; background:var(--card-glow,rgba(var(--rgb-violet),0.12));filter:blur(22px);pointer-events:none; } .stat-card::after{content:none;} .stat-card.cyan{--card-glow:rgba(var(--rgb-cyan),0.15);} .stat-card.green{--card-glow:rgba(var(--rgb-green),0.15);} .stat-card.blue{--card-glow:rgba(var(--rgb-blue),0.15);} .stat-card.amber{--card-glow:rgba(var(--rgb-amber),0.15);} .stat-icon{margin-bottom:12px;line-height:1;} .stat-icon svg{width:22px;height:22px;} .stat-lbl{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text3);font-family:'Space Mono',monospace;margin-bottom:8px;} .stat-num{font-family:var(--mono);font-size:34px;font-weight:700;line-height:1;color:var(--text);} .stat-desc{font-size:11px;color:var(--text4);margin-top:6px;} /* ── NEW DASHBOARD ─────────────────────────────────────────────────────────── */ .dash-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:18px;} .dash-st{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;transition:all .15s;position:relative;overflow:hidden;} .dash-st::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 0%,var(--card-glow,rgba(var(--rgb-pur),0.1)),transparent 70%);pointer-events:none;} .dash-st:hover{border-color:var(--bpur);transform:translateY(-1px);} .dash-st-n{font-size:28px;font-weight:700;color:var(--text);font-family:'Space Mono',monospace;position:relative;} .dash-st-l{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text3);font-family:'Space Mono',monospace;margin-top:6px;position:relative;} .dash-st-s{font-size:10px;color:var(--text4);margin-top:4px;position:relative;} .dash-st:nth-child(1){--card-glow:rgba(var(--rgb-pur),0.15);} .dash-st:nth-child(2){--card-glow:rgba(var(--rgb-cyan),0.12);} .dash-st:nth-child(3){--card-glow:rgba(var(--rgb-green),0.12);} .dash-st:nth-child(4){--card-glow:rgba(var(--rgb-blue),0.12);} .dash-st:nth-child(5){--card-glow:rgba(var(--rgb-amber),0.12);} .dash-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;} .dash-row2{display:grid;grid-template-columns:3fr 2fr;gap:14px;} .dash-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;position:relative;overflow:hidden;transition:border-color .2s,transform .2s;box-shadow:0 4px 24px rgba(var(--rgb-black),0.3),0 1px 4px rgba(var(--rgb-black),0.2);} .dash-card:hover{border-color:var(--bpur);transform:translateY(-1px);box-shadow:0 6px 32px rgba(var(--rgb-black),0.4),0 1px 4px rgba(var(--rgb-black),0.2);} .dash-card::before{content:'';position:absolute;bottom:-30px;left:-30px;width:140px;height:140px;border-radius:50%;background:rgba(var(--rgb-pur),0.1);filter:blur(35px);pointer-events:none;} .dash-card::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--rgb-violet),0.15),transparent);pointer-events:none;} .dash-card-t{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;} .dash-card-t span{font-size:13px;font-weight:600;color:var(--text2);} .dash-card-link{font-size:11px;color:var(--pur-light);cursor:pointer;text-decoration:none;} .dash-card-link:hover{text-decoration:underline;} .dash-empty{text-align:center;padding:24px 12px;color:var(--text4);font-size:12px;} /* Week strip */ .dash-week-strip{display:flex;gap:4px;margin-bottom:14px;padding:2px 0;} .dash-week-day{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 6px;border-radius:10px;cursor:pointer;transition:all .2s;border:1px solid transparent;} .dash-week-day:hover{background:rgba(var(--rgb-pur),0.06);} .dash-week-day.selected{background:rgba(var(--rgb-pur),0.1);border-color:var(--bpur);} .dash-week-day.today .dash-week-num{background:var(--pur-light);color:var(--text-on-accent);} .dash-week-name{font-size:10px;color:var(--text4);font-weight:500;text-transform:uppercase;letter-spacing:0.5px;} .dash-week-num{font-size:13px;font-weight:600;color:var(--text);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s;} .dash-week-dots{display:flex;gap:3px;min-height:6px;align-items:center;justify-content:center;} .dash-week-dots span{width:5px;height:5px;border-radius:50%;display:block;} /* Agenda */ .dash-agenda-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:0 2px;} .dash-agenda-date{font-size:12px;font-weight:600;color:var(--text2);} .dash-agenda-count{font-size:11px;color:var(--text4);font-family:'Space Mono',monospace;} /* Scroll container */ .dash-agenda-scroll-wrap{position:relative;flex:1;overflow:hidden;} .dash-agenda-scroll-wrap.has-overflow{-webkit-mask-image:linear-gradient(to bottom,black calc(100% - 40px),transparent 100%);mask-image:linear-gradient(to bottom,black calc(100% - 40px),transparent 100%);} .dash-agenda-scroll{height:100%;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;} .dash-agenda-scroll::-webkit-scrollbar{display:none;} /* Session cards */ .dash-sess-card{display:flex;align-items:stretch;margin-bottom:8px;border-radius:10px;background:rgba(var(--rgb-pur),0.04);border:1px solid var(--border);cursor:pointer;transition:all .15s;overflow:hidden;position:relative;flex-shrink:0;} .dash-sess-card:last-child{margin-bottom:0;} .dash-sess-card:hover{border-color:var(--bpur);background:rgba(var(--rgb-pur),0.08);} .dash-sess-card.past{opacity:0.45;} .dash-sess-card.active{border-color:var(--sess-color,var(--bpur));box-shadow:0 0 12px rgba(var(--rgb-pur),0.15);} .dash-sess-card-bar{width:4px;flex-shrink:0;background:var(--sess-color,var(--violet));} .dash-sess-card-body{flex:1;padding:10px 12px;min-width:0;} .dash-sess-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;} .dash-sess-card-time{font-size:11px;color:var(--text3);font-family:'Space Mono',monospace;} .dash-sess-card-badge{font-size:9px;padding:2px 7px;border-radius:4px;font-weight:600;white-space:nowrap;} .dash-sess-card-title{font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px;} .dash-sess-card-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text4);} .dash-sess-card-live{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--green);} .dash-live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:dashLivePulse 1.5s ease-in-out infinite;} @keyframes dashLivePulse{0%,100%{opacity:1;}50%{opacity:0.3;}} /* Now line */ .dash-now-line{display:flex;align-items:center;gap:8px;padding:6px 0;margin:4px 0;flex-shrink:0;} .dash-now-line::after{content:'';flex:1;height:1.5px;background:linear-gradient(90deg,var(--pur-light),transparent);} .dash-now-line span{font-size:10px;font-weight:600;color:var(--pur-light);font-family:'Space Mono',monospace;flex-shrink:0;} /* Agenda container – fixed height */ #dash-sess-agenda{height:135px;display:flex;flex-direction:column;} /* Empty state */ .dash-sess-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 12px;gap:8px;color:var(--text4);flex:1;} .dash-sess-empty-state svg{opacity:0.3;margin-bottom:4px;} .dash-sess-empty-state span{font-size:12px;} .dash-sess-empty-state a{font-size:11px;color:var(--pur-light);cursor:pointer;text-decoration:none;margin-top:4px;} .dash-sess-empty-state a:hover{text-decoration:underline;} .dash-fb-item{padding:10px 0;border-bottom:1px solid var(--border);} .dash-fb-item:last-child{border:none;} .dash-fb-head{display:flex;align-items:center;gap:8px;margin-bottom:4px;} .dash-fb-av{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;color:var(--text-on-accent);flex-shrink:0;} .dash-fb-name{font-size:11px;font-weight:500;color:var(--text2);} .dash-fb-time{font-size:10px;color:var(--text4);margin-left:auto;font-family:'Space Mono',monospace;} .dash-fb-text{font-size:12px;color:var(--text3);line-height:1.4;} .dash-fb-goto{display:flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;border-radius:8px;border:1px solid var(--border);background:rgba(var(--rgb-pur),0.08);color:var(--pur-accent);cursor:pointer;transition:all .15s;margin-left:8px;flex-shrink:0;} .dash-fb-goto:hover{background:rgba(var(--rgb-pur),0.18);border-color:var(--pur-accent);transform:translateX(2px);} .dash-fb-goto:active{transform:scale(0.92);} @media(max-width:768px){.dash-fb-goto{width:36px;height:36px;min-width:36px;border-radius:10px;}} .dash-prod-row{display:flex;align-items:center;gap:12px;padding:10px 8px;border-bottom:1px solid var(--border);transition:all .15s;border-radius:8px;margin:0 -8px;} .dash-prod-row:last-child{border:none;} .dash-proj-ticker .dash-prod-row{border-bottom:1px solid var(--border);} .dash-prod-row:hover{background:rgba(var(--rgb-pur),0.06);} .dash-prod-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--text-on-accent);flex-shrink:0;} .dash-prod-info{flex:1;min-width:0;} .dash-prod-name{font-size:12px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .dash-prod-artist{font-size:10px;color:var(--text4);margin-top:2px;} .dash-bar{height:4px;background:rgba(var(--rgb-white),0.04);border-radius:100px;margin-top:6px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(var(--rgb-black),0.4);} .dash-bar-fill{height:100%;border-radius:100px;position:relative;overflow:hidden;} .dash-bar-fill::before{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(var(--rgb-white),0.18),transparent);border-radius:100px 100px 0 0;} .dash-bar-fill::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(var(--rgb-white),0.5),transparent);transform:skewX(-20deg);animation:dashShimmer 3s ease-in-out infinite;animation-delay:var(--shimmer-delay,0s);} @keyframes dashShimmer{0%{left:-100%}50%{left:200%}100%{left:200%}} .dash-prod-pct{font-size:13px;font-weight:600;min-width:40px;text-align:right;font-family:'Space Mono',monospace;} .dash-proj-ticker{max-height:240px;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 92%,transparent 100%);} .dash-proj-ticker-inner{will-change:transform;} .dash-act-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:12px;color:var(--text3);} .dash-act-item:last-child{border:none;} .dash-act-item b{color:var(--text2);font-weight:500;} .dash-act-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .dash-act-time{font-size:10px;color:var(--text4);font-family:'Space Mono',monospace;white-space:nowrap;} @media(max-width:768px){ .dash-stats{grid-template-columns:repeat(2,1fr);} .dash-stats .dash-st:last-child{grid-column:span 2;} .dash-row,.dash-row2{grid-template-columns:1fr;} } /* Dashboard Config Modal */ .dash-cfg-overlay{position:fixed;inset:0;background:var(--overlay-bg);backdrop-filter:blur(4px);z-index:9999;display:none;align-items:center;justify-content:center;} .dash-cfg-overlay.open{display:flex;} .dash-cfg-modal{background:var(--surface2);border:1px solid var(--border);border-radius:14px;width:90%;max-width:420px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(var(--rgb-black),0.5);} .dash-cfg-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);font-size:14px;font-weight:600;color:var(--text);} .dash-cfg-close{background:none;border:none;color:var(--text4);font-size:16px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .15s;} .dash-cfg-close:hover{background:rgba(var(--rgb-white),0.06);color:var(--text);} .dash-cfg-body{padding:12px 16px;overflow-y:auto;flex:1;} .dash-cfg-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--border);} .dash-cfg-item{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:8px;border:1px solid transparent;transition:all .15s;user-select:none;} .dash-cfg-item:hover{background:rgba(var(--rgb-pur),0.05);} .dash-cfg-item.dragging{opacity:0.5;border:1px dashed var(--pur-accent);} .dash-cfg-item.drag-over{border-top:2px solid var(--pur-accent);} .dash-cfg-drag{cursor:grab;color:var(--text4);flex-shrink:0;display:flex;align-items:center;} .dash-cfg-drag:active{cursor:grabbing;} .dash-cfg-icon{font-size:16px;flex-shrink:0;width:24px;text-align:center;} .dash-cfg-label{flex:1;font-size:13px;color:var(--text);font-weight:500;} .dash-cfg-toggle{position:relative;width:36px;height:20px;background:var(--border);border-radius:100px;cursor:pointer;transition:background .2s;flex-shrink:0;border:none;} .dash-cfg-toggle.on{background:var(--pur-accent);} .dash-cfg-toggle::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text-on-accent);transition:transform .2s;} .dash-cfg-toggle.on::after{transform:translateX(16px);} .dash-cfg-arrows{display:flex;flex-shrink:0;gap:2px;} .dash-cfg-arrows button{background:none;border:1px solid var(--border);color:var(--text3);width:28px;height:28px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;} .dash-cfg-arrows button:hover{background:rgba(var(--rgb-pur),0.1);border-color:var(--pur-accent);color:var(--text);} @media(max-width:768px){ .dash-cfg-drag{display:none;} .dash-cfg-item{padding:12px 8px;} } .sec-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;} .sec-lbl{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--text3);font-family:'Space Mono',monospace;} /* ARTIST GRID */ .artist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;} .artist-card{ background:var(--surface);border:1px solid var(--border);border-radius:14px; padding:20px 22px;cursor:pointer;position:relative;overflow:hidden; transition:border-color .2s,transform .2s,box-shadow .2s; } .artist-card::before{ content:'';position:absolute;top:-24px;left:-24px; width:90px;height:90px;border-radius:50%; background:var(--card-color,rgba(var(--rgb-pur),0.12));filter:blur(24px); pointer-events:none;opacity:0.7;transition:opacity .2s; } .artist-card:hover{border-color:var(--bpur);transform:translateY(-2px);box-shadow:0 8px 32px rgba(var(--rgb-black),0.2);} .artist-card:hover::before{opacity:1;} .ac-av{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0;color:var(--text-on-accent);border:2px solid rgba(var(--rgb-white),0.15);box-shadow:0 2px 12px rgba(var(--rgb-black),0.3);} .ac-name{font-size:15px;font-weight:700;color:var(--text-bright);font-family:'Inter',sans-serif;} .ac-genre{font-size:11px;color:var(--text4);margin-top:2px;font-family:'Space Mono',monospace;} .prod-pill{padding:3px 10px;border-radius:20px;font-size:11px;font-family:'Space Mono',monospace;background:rgba(var(--rgb-violet),0.08);color:var(--pur-light);border:1px solid rgba(var(--rgb-violet),0.2);} .ac-stats{display:flex;gap:18px;padding-top:14px;border-top:1px solid var(--border);margin-top:14px;} .ac-stat .lbl{font-size:9px;color:var(--text4);letter-spacing:1.5px;text-transform:uppercase;font-family:'Space Mono',monospace;} .ac-stat .val{font-family:var(--mono);font-size:16px;font-weight:700;margin-top:3px;color:var(--text);} /* PROD LIST */ .prod-list{display:flex;flex-direction:column;gap:8px;} .prod-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 18px;cursor:pointer;transition:all 0.15s;display:flex;align-items:flex-start;gap:14px;} .prod-card:hover{border-color:var(--bpur);background:var(--surface2);} .prod-icon{width:50px;height:50px;border-radius:10px;background:var(--grad-soft);border:1px solid var(--bpur);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;filter:var(--icon-filter);} .prod-icon.has-cover{filter:none;background:none;border:none;} .prod-title{font-size:14px;font-weight:600;color:var(--text-bright);} .prod-meta{font-size:12px;color:var(--text3);margin-top:2px;} .prog-bar{height:3px;background:var(--border);border-radius:10px;overflow:hidden;margin-bottom:3px;} .prog-fill{height:100%;background:var(--grad);border-radius:10px;} .prog-pct{font-size:11px;color:var(--text3);font-family:'Space Mono',monospace;text-align:right;} /* BADGES */ .badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600;font-family:'Space Mono',monospace;white-space:nowrap;letter-spacing:0.3px;} .badge-pur{background:rgba(var(--rgb-pur),0.18);color:var(--pur-light);} .badge-green{background:rgba(var(--rgb-green),0.15);color:var(--green);} .badge-amber{background:rgba(var(--rgb-amber),0.15);color:var(--amber);} .badge-blue{background:rgba(var(--rgb-blue),0.15);color:var(--blue);} .badge-red{background:rgba(var(--rgb-red),0.15);color:var(--red);} .badge-gray{background:var(--surface3);color:var(--text2);} .feat-chip{display:inline-flex;align-items:center;padding:3px 9px;border-radius:6px;font-size:11px;background:rgba(var(--rgb-pur),0.18);color:var(--pur-light);font-family:'Space Mono',monospace;} /* DETAIL */ .detail-wrap{padding:22px 32px;} .back-btn{display:inline-flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-family:'Inter',sans-serif;font-size:14px;font-weight:500;letter-spacing:0;cursor:pointer;margin-bottom:18px;padding:8px 14px;transition:all 0.15s;} .back-btn:hover{color:var(--pur-light);} .pd-cover-mobile,.pd-info-mobile{display:none;} .pd-info-desktop{display:block;} .detail-grid{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start;} .dg-uploads-mobile{display:none;} .dg-uploads-desktop{display:block;} /* STEPS */ .steps-block{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:16px;} .steps-hdr{padding:14px 20px;border-bottom:1px solid var(--border);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--text2);font-family:'Space Mono',monospace;} .step-item{border-bottom:1px solid var(--border);} .step-item:last-child{border-bottom:none;} .step-row{display:flex;align-items:center;gap:12px;padding:13px 18px;} .step-chk{width:22px;height:22px;border-radius:50%;border:2px solid var(--border2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.2s;font-size:11px;color:transparent;cursor:pointer;user-select:none;} .step-chk:hover{border-color:var(--pur-light);background:var(--grad-soft);} .step-item.done .step-chk{background:var(--grad);border-color:transparent;color:var(--text-on-accent);} .step-item.done .step-chk:hover{opacity:0.7;} .step-left{flex:1;min-width:0;} .step-name{font-size:15px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;} .step-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;color:var(--text3);margin-right:6px;} .step-icon svg{width:20px;height:20px;stroke-width:1.5;} .step-item.done .step-name{color:var(--text2);} .step-desc{font-size:13px;color:var(--text2);margin-top:2px;} /* UNIFIED PLAYER (mini + expand share one audio) */ .upl{display:flex;align-items:center;gap:7px;background:var(--surface3);border:1px solid var(--bpur);border-radius:8px;padding:5px 8px;margin-left:4px} .upl-btn{width:24px;height:24px;border-radius:50%;background:var(--grad-btn);border:none;color:var(--text-on-accent);font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s;line-height:1;font-family:'Inter',sans-serif;-webkit-appearance:none;appearance:none;font-variant-emoji:text;} .upl-btn:hover{opacity:.82} .upl-bar{flex:1;height:3px;background:var(--border2);border-radius:10px;position:relative;cursor:pointer;min-width:50px} .upl-bar-fill{height:100%;background:var(--pur-light);border-radius:10px;pointer-events:none;transition:width .1s linear} .upload-prog{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface2);border:1px solid var(--bpur);border-radius:12px;margin-top:6px;animation:uplPulse 1.5s ease infinite} .upload-prog-track{flex:1;height:6px;background:var(--border2);border-radius:10px;overflow:hidden} .upload-prog-fill{height:100%;background:var(--grad);border-radius:10px;transition:width .2s ease} .upload-prog-text{font-size:12px;font-family:'Space Mono',monospace;color:var(--pur-light);white-space:nowrap} @keyframes uplPulse{0%,100%{opacity:1}50%{opacity:.7}} .upl-time{font-size:10px;color:var(--text3);font-family:'Space Mono',monospace;white-space:nowrap;flex-shrink:0} .upl-exp{width:24px;height:24px;border-radius:50%;background:rgba(var(--rgb-amber),.1);border:1px solid rgba(var(--rgb-amber),.25);color:var(--amber);font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;position:relative} .upl-exp:hover{background:rgba(var(--rgb-amber),.2);border-color:rgba(var(--rgb-amber),.4)} .upl-exp .cmt-count{position:absolute;top:-4px;right:-4px;background:var(--amber);color:var(--text-on-accent);font-size:7px;font-weight:700;width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center} /* Studio Waveform Overlay */ .swf-overlay{position:fixed;inset:0;background:var(--overlay-bg);backdrop-filter:blur(8px);z-index:9999;display:none;align-items:center;justify-content:center;padding:24px;transform:translateZ(0);-webkit-transform:translateZ(0);} .swf-overlay.open{display:flex} .swf-card{background:var(--surface);border:1px solid var(--bpur);border-radius:16px;padding:24px;width:100%;max-width:1080px;height:90vh;display:flex;flex-direction:column;overflow:hidden;animation:swfZoom .3s cubic-bezier(0.34,1.56,0.64,1)} /* Mobile: echtes Fullscreen-Overlay (wie Artist), damit der Player nicht ueber den sichtbaren Bereich hinausragt. */ @media (max-width:768px){ .swf-overlay{padding:0;background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;} .swf-card{max-width:none;height:100%;border:none;border-radius:0;padding:16px;animation:none;} /* PWA: Overlay ist position:fixed, ignoriert Body-Padding – Status-Bar selbst kompensieren, sonst rutscht der Header hinter die iOS Status-Bar. */ .is-pwa .swf-overlay,body.is-pwa .swf-overlay{padding-top:env(safe-area-inset-top);} } @media (max-width:768px) and (display-mode:standalone){ .swf-overlay{padding-top:env(safe-area-inset-top);} } .swf-card::-webkit-scrollbar{width:5px} .swf-card::-webkit-scrollbar-track{background:transparent} .swf-card::-webkit-scrollbar-thumb{background:rgba(var(--rgb-violet),0.3);border-radius:10px} @keyframes swfZoom{from{opacity:0;transform:scale(0.6)}to{opacity:1;transform:scale(1)}} .swf-header{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-shrink:0} .swf-close{width:32px;height:32px;border-radius:50%;background:rgba(var(--rgb-white),0.06);border:1px solid rgba(var(--rgb-white),0.1);color:var(--text3);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,color .15s} .swf-close:hover{background:rgba(var(--rgb-white),0.12);color:var(--text-bright)} .swf-title{font-size:18px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .swf-meta{font-size:11px;color:var(--text3);font-family:'Space Mono',monospace} .swf-meta .step-icon,.modal-title .step-icon{margin-right:8px;vertical-align:middle;} .swf-time{font-size:14px;font-family:'Space Mono',monospace;color:var(--pur-light);flex-shrink:0} .swf-play{width:52px;height:52px;border-radius:50%;background:var(--grad-btn);border:none;color:var(--text-on-accent);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;font-variant-emoji:text;} .swf-play:hover{transform:scale(1.08);box-shadow:0 0 24px rgba(var(--rgb-violet),0.35)} .swf-wave{position:relative;height:140px;cursor:pointer;margin-bottom:6px;overflow:visible;flex-shrink:0} .swf-wave canvas{width:100%;height:100%;display:block} .swf-trow{display:flex;justify-content:space-between;font-size:10px;font-family:'Space Mono',monospace;color:var(--text4);margin-bottom:12px;flex-shrink:0} .swf-hover{position:absolute;top:-26px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-size:9px;font-family:'Space Mono',monospace;color:var(--pur-light);pointer-events:none;transform:translateX(-50%);display:none;white-space:nowrap;z-index:10} .swf-wave:hover .swf-hover{display:block} .swf-mk{position:absolute;bottom:4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--amber);z-index:3;cursor:grab;transition:transform .15s;box-shadow:0 0 3px rgba(var(--rgb-amber),0.4)} .swf-mk::before{content:'';position:absolute;top:-10px;left:-10px;right:-10px;bottom:-10px;border-radius:50%} .swf-mk:hover{transform:scale(1.3)} .swf-mk.dragging{cursor:grabbing;transform:scale(1.5);z-index:30;box-shadow:0 0 10px rgba(var(--rgb-amber),0.6)} .swf-mkline{position:absolute;bottom:12px;width:2px;height:calc(100% - 12px);background:rgba(var(--rgb-amber),0.35);pointer-events:none;z-index:2} .swf-drag-t{position:absolute;top:-22px;background:var(--amber);border-radius:3px;padding:1px 5px;font-size:9px;font-family:'Space Mono',monospace;color:var(--text-on-accent);font-weight:700;pointer-events:none;transform:translateX(-50%);z-index:30;display:none} .swf-drag-t.show{display:block} .swf-bub{position:absolute;top:calc(100% + 6px);background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:7px 10px;min-width:45vw;max-width:240px;z-index:20;pointer-events:none;opacity:0;transform:translateX(-50%) translateY(-3px);transition:opacity .15s,transform .15s;box-shadow:0 6px 20px rgba(var(--rgb-black),0.4)} .swf-bub.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto} .swf-bub::after{content:'';position:absolute;top:-4px;left:50%;margin-left:-4px;width:8px;height:8px;background:var(--surface2);border-left:1px solid var(--border);border-top:1px solid var(--border);transform:rotate(45deg)} .swf-bub-author{font-size:10px;font-weight:600;color:var(--pur-light)} .swf-bub-text{font-size:11px;color:var(--text);margin-top:2px;line-height:1.3} .swf-bub-time{font-size:8px;font-family:'Space Mono',monospace;color:var(--text4);margin-top:3px} .swf-inl{position:absolute;top:calc(100% + 5px);background:var(--surface2);border:1px solid var(--border);border-radius:16px;padding:3px 3px 3px 10px;z-index:25;transform:translateX(-50%);box-shadow:0 4px 12px rgba(var(--rgb-black),0.4);display:none;min-width:220px} .swf-inl.show{display:flex;gap:4px;align-items:center;animation:swfPop .15s ease} @keyframes swfPop{from{opacity:0;transform:translateX(-50%) translateY(-3px)}to{opacity:1;transform:translateX(-50%) translateY(0)}} .swf-inl::after{content:'';position:absolute;top:-4px;left:50%;margin-left:-4px;width:8px;height:8px;background:var(--surface2);border-left:1px solid var(--border);border-top:1px solid var(--border);transform:rotate(45deg)} .swf-inl input{flex:1;background:transparent;border:none;padding:4px 0;color:var(--text);font-size:11px;font-family:'Inter',sans-serif;outline:none;min-width:0} .swf-inl input::placeholder{color:var(--text4)} .swf-inl button{width:22px;height:22px;border-radius:50%;background:var(--grad-btn);border:none;color:var(--text-on-accent);font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0} /* Thread Comment Cards */ .swf-threads{overflow-y:auto;flex:1;min-height:0;margin-top:14px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;scrollbar-color:rgba(var(--rgb-violet),0.3) transparent} .swf-threads::-webkit-scrollbar{width:5px} .swf-threads::-webkit-scrollbar-track{background:transparent} .swf-threads::-webkit-scrollbar-thumb{background:rgba(var(--rgb-violet),0.3);border-radius:10px} .swf-thread{display:flex;flex-direction:column;gap:0} .swf-cmcard{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px 14px} .swf-cmcard-head{display:flex;align-items:center;gap:8px;margin-bottom:4px} .swf-cmcard-avatar{width:24px;height:24px;border-radius:50%;background:var(--grad-btn);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text-on-accent);font-weight:700;flex-shrink:0} .swf-cmcard-author{font-size:14px;font-weight:600;color:var(--text-bright);flex:1} .swf-cmcard-badge{font-size:10px;font-family:'Space Mono',monospace;color:var(--pur-light);background:rgba(var(--rgb-pur),.12);padding:2px 8px;border-radius:10px;cursor:pointer;flex-shrink:0} .swf-cmcard-badge:hover{background:rgba(var(--rgb-pur),.25)} .swf-cmcard-text{font-size:14px;color:var(--text);line-height:1.5;margin-bottom:4px} .swf-cmcard-foot{display:flex;align-items:center;gap:10px;font-size:10px;color:var(--text4);font-family:'Space Mono',monospace} .swf-cmcard-reply-btn{background:none;border:none;color:var(--text4);font-size:10px;cursor:pointer;padding:2px 6px;border-radius:4px;font-family:'Space Mono',monospace;transition:all .15s} .swf-cmcard-reply-btn:hover{color:var(--pur-light);background:rgba(var(--rgb-pur),.1)} .swf-cmcard-del{background:none;border:none;color:var(--text4);font-size:10px;cursor:pointer;padding:2px 6px;border-radius:4px;font-family:'Space Mono',monospace;transition:all .15s;margin-left:auto} .swf-cmcard-del:hover{color:var(--red);background:rgba(var(--rgb-red-strong),.1)} .swf-cmcard.highlight{animation:swfCmHl .8s ease;border-color:var(--pur-light)} .swf-reply-card.highlight{animation:swfCmHl .8s ease;border-color:var(--pur-light)} @keyframes swfCmHl{0%{background:rgba(var(--rgb-pur),0.15)}100%{background:var(--surface2)}} /* Reply card (indented) */ .swf-reply-card{margin-left:38px;background:var(--surface3);border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin-top:6px} .swf-reply-card{margin-left:32px;background:var(--surface3);border:1px solid var(--border);border-radius:8px;padding:8px 12px;margin-top:4px} .swf-reply-card .swf-cmcard-avatar{width:20px;height:20px;font-size:8px} .swf-reply-card .swf-cmcard-author{font-size:12px} .swf-reply-card .swf-cmcard-text{font-size:13px;margin-bottom:2px} .swf-reply-input-row{margin-left:38px;margin-top:6px;display:flex;gap:6px;align-items:center} .swf-reply-input-row input{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:6px 10px;color:var(--text);font-size:11px;font-family:'Inter',sans-serif;outline:none} .swf-reply-input-row input:focus{border-color:var(--pur-light)} .swf-reply-input-row button{background:var(--grad-btn);border:none;color:var(--text-on-accent);border-radius:6px;padding:5px 12px;font-size:10px;cursor:pointer;flex-shrink:0} /* STEP ACTION BUTTONS */ .step-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;} .act-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:20px;border:1px solid var(--bpur);background:var(--grad-soft);color:var(--pur-light);font-size:10px;font-family:'Space Mono',monospace;cursor:pointer;transition:all 0.15s;white-space:nowrap;} .act-btn:hover{background:var(--grad-glow);} .act-btn.lyrics-new{border-color:rgba(var(--rgb-green),0.3);background:rgba(var(--rgb-green),0.08);color:var(--green);} .act-btn.lyrics-new:hover{background:rgba(var(--rgb-green),0.15);} .act-btn.dl-active{border-color:rgba(var(--rgb-green),0.3);background:rgba(var(--rgb-green),0.08);color:var(--green);} .act-btn.dl-active:hover{background:rgba(var(--rgb-green),0.15);} /* FILE INFO ROW */ .file-info{display:flex;align-items:center;gap:8px;padding:6px 18px 10px;margin-top:-4px;} .fi-icon{font-size:13px;flex-shrink:0;} .fi-name{font-size:11px;color:var(--text2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .fi-size{font-size:10px;color:var(--text4);font-family:'Space Mono',monospace;flex-shrink:0;} .fi-rm{background:none;border:none;color:var(--text4);cursor:pointer;font-size:12px;padding:2px 4px;transition:color 0.15s;flex-shrink:0;} .fi-rm:hover{color:var(--red);} /* COVER */ .cover-img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;margin-bottom:12px;border:1px solid var(--border);} /* INFO PANEL */ .info-panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:12px;} .info-panel-hdr{padding:11px 18px;border-bottom:1px solid var(--border);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text3);font-family:'Space Mono',monospace;} .info-row{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;border-bottom:1px solid var(--border);font-size:13px;gap:12px;} .info-row:last-child{border-bottom:none;} .info-row .key{color:var(--text3);flex-shrink:0;font-size:12px;} .info-row .val{font-weight:500;text-align:right;color:var(--text);} .toggle{width:34px;height:18px;background:var(--border2);border-radius:10px;cursor:pointer;position:relative;transition:background 0.2s;border:none;flex-shrink:0;} .toggle.on{background:var(--grad-btn);} .toggle::after{content:'';width:12px;height:12px;background:var(--text-on-accent);border-radius:50%;position:absolute;top:3px;left:3px;transition:transform 0.2s;} .toggle.on::after{transform:translateX(16px);} /* PROGRESS */ .prog-summary{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin-bottom:16px;} .prog-line{display:none;} .prog-big{height:7px;background:var(--border);border-radius:10px;overflow:hidden;margin:10px 0 6px;} .prog-big-fill{height:100%;background:var(--grad);border-radius:10px;transition:width 0.5s ease;} /* MODAL */ .modal-overlay{display:none;position:fixed;inset:0;background:var(--overlay-modal);backdrop-filter:blur(8px);z-index:1000;align-items:center;justify-content:center;overscroll-behavior:contain;touch-action:none;} .modal-overlay.open{display:flex;} .modal{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:26px;width:480px;max-width:96vw;max-height:90vh;overflow-y:auto;} .modal-title{font-size:19px;font-weight:700;margin-bottom:20px;color:var(--text-bright);} .form-group{margin-bottom:13px;} .form-lbl{display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text3);font-family:'Space Mono',monospace;margin-bottom:5px;} .form-inp,.form-sel,.form-ta{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--text);font-family:'Inter',sans-serif;font-size:14px;outline:none;transition:border-color 0.15s;} .form-inp:focus,.form-sel:focus,.form-ta:focus{border-color:var(--pur-light);} .form-inp::placeholder,.form-ta::placeholder{color:var(--text4);} .form-sel option{background:var(--surface2);color:var(--text);} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;padding-top:16px;border-top:1px solid var(--border);} /* LYRICS EDITOR MODAL */ /* SONGWRITER FULLSCREEN */ .sw-full{background:var(--bg);width:100%;height:100%;height:100dvh;display:flex;flex-direction:column;position:relative;overflow:hidden;overscroll-behavior:contain;touch-action:manipulation;} .sw-full,.sw-full *{scrollbar-width:none;} .sw-full::-webkit-scrollbar,.sw-full *::-webkit-scrollbar{display:none;} .sw-hdr{padding:12px 16px 8px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;} .sw-back{color:var(--pur-light);font-size:15px;background:none;border:none;cursor:pointer;font-family:inherit;padding:10px 12px;min-height:44px;display:flex;align-items:center;} .sw-back:active{opacity:0.7;} .sw-title{color:var(--text);font-size:15px;font-weight:500;} .sw-save-btn{color:var(--green);font-size:14px;font-weight:500;background:none;border:1px solid rgba(var(--rgb-green),0.25);cursor:pointer;font-family:inherit;padding:10px 18px;border-radius:10px;min-height:44px;transition:all 0.15s;} .sw-save-btn:hover{background:rgba(var(--rgb-green),0.08);} .sw-save-btn:active{transform:scale(0.97);} .sw-stats{display:flex;gap:16px;padding:6px 20px 10px;font-size:12px;color:var(--text3);font-family:'Space Mono',monospace;border-bottom:1px solid rgba(var(--rgb-white),0.04);} .sw-editor-wrap{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;} .sw-editor{width:100%;min-height:100%;background:transparent;border:none;padding:20px 24px;color:var(--text);font-family:'Courier New',monospace;font-size:17px;line-height:2.2;outline:none;resize:none;box-sizing:border-box;caret-color:var(--pur-light);} .sw-editor::placeholder{color:var(--text4);} .sw-sheet{position:absolute;bottom:52px;left:0;right:0;background:var(--surface);border-top:1px solid var(--border2);border-radius:18px 18px 0 0;max-height:50vh;overflow:auto;overscroll-behavior:contain;z-index:100;transform:translateY(100%);transition:transform 0.25s ease-out;pointer-events:none;} .sw-sheet.open{transform:translateY(0);pointer-events:auto;} .sw-sheet-handle{width:36px;height:4px;background:var(--border2);border-radius:2px;margin:0 auto;padding:14px 0;background-clip:content-box;cursor:grab;} .sw-sheet-top{display:flex;align-items:center;justify-content:space-between;padding:0 16px 6px;} .sw-sheet-label{color:var(--text);font-size:15px;font-weight:500;} .sw-sheet-x{color:var(--text3);background:none;border:none;font-size:18px;cursor:pointer;padding:10px 12px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;transition:background 0.15s;} .sw-sheet-x:hover{background:rgba(var(--rgb-white),0.06);} .sw-sheet-x:active{background:rgba(var(--rgb-white),0.1);} .sw-modes{display:flex;gap:6px;padding:10px 16px;overflow-x:auto;} .sw-mtab{padding:10px 18px;font-size:14px;font-weight:500;color:var(--text);background:rgba(var(--rgb-white),0.06);border:1px solid rgba(var(--rgb-white),0.12);border-radius:10px;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all 0.15s;min-height:44px;display:flex;align-items:center;} .sw-mtab:active{transform:scale(0.97);} .sw-mtab.on{background:var(--pur);border-color:var(--pur);color:var(--text-on-accent);} .sw-ai-row{display:flex;gap:8px;padding:8px 16px;} .sw-ai-inp{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:12px 16px;color:var(--text);font-size:16px;outline:none;font-family:inherit;min-width:0;min-height:44px;transition:border-color 0.15s;} .sw-ai-inp:focus{border-color:var(--pur-light);} .sw-ai-inp::placeholder{color:var(--text4);} .sw-ai-go{background:var(--pur);border:none;border-radius:12px;padding:0 24px;color:var(--text-on-accent);font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;min-height:44px;transition:all 0.15s;} .sw-ai-go:active{transform:scale(0.97);} .sw-ai-go:disabled{opacity:0.4;cursor:wait;transform:none;} .sw-ai-ref{background:none;border:1px solid rgba(var(--rgb-white),0.1);border-radius:12px;padding:0 14px;color:var(--text3);font-size:18px;cursor:pointer;font-family:inherit;min-height:44px;transition:all 0.15s;display:none;} .sw-ai-ref.show{display:flex;align-items:center;} .sw-ai-ref:hover{border-color:var(--pur-light);color:var(--pur-light);} .sw-ai-ref:active{transform:scale(0.97);} .sw-chips{display:flex;flex-wrap:wrap;gap:8px;padding:8px 16px 16px;min-height:16px;} .sw-chip{background:rgba(var(--rgb-pur),0.1);border:1px solid rgba(var(--rgb-pur),0.25);color:var(--pur-chip);padding:10px 18px;border-radius:22px;font-size:14px;cursor:pointer;transition:all 0.15s;user-select:none;min-height:44px;display:inline-flex;align-items:center;} .sw-chip:hover{background:rgba(var(--rgb-pur),0.22);color:var(--text-bright);} .sw-chip:active{transform:scale(0.96);} .sw-chip.meta{border-radius:10px;padding:12px 18px;line-height:1.5;} .sw-chip.flash{background:rgba(var(--rgb-green),0.15)!important;border-color:rgba(var(--rgb-green),0.35)!important;color:var(--green)!important;} .sw-err{color:var(--red);font-size:13px;padding:4px 0;} .sw-loading{color:var(--text3);font-size:13px;padding:4px 0;} .sw-refresh{display:flex;align-items:center;gap:4px;margin-top:4px;padding:8px 14px;font-size:12px;color:var(--text3);background:rgba(var(--rgb-white),0.04);border:1px solid rgba(var(--rgb-white),0.08);border-radius:10px;cursor:pointer;font-family:inherit;transition:all 0.15s;width:100%;} .sw-refresh:hover{color:var(--text);background:rgba(var(--rgb-white),0.08);} .sw-refresh:active{transform:scale(0.97);} .sw-struct-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 16px 16px;} .sw-st{padding:14px 16px;border-radius:12px;font-size:14px;font-weight:500;background:color-mix(in srgb,var(--stc) 6%,transparent);border:1px solid color-mix(in srgb,var(--stc) 20%,transparent);color:var(--stc);cursor:pointer;font-family:inherit;text-align:left;display:flex;align-items:center;gap:10px;transition:all 0.15s;min-height:48px;} .sw-st::before{content:'';width:4px;height:20px;border-radius:2px;background:var(--stc);flex-shrink:0;} .sw-st:hover{background:color-mix(in srgb,var(--stc) 12%,transparent);} .sw-st:active{transform:scale(0.97);} .sw-st-tpl{text-align:center;justify-content:center;} .sw-st-tpl::before{display:none;} .sw-sheet-sub{padding:12px 16px 4px;font-size:12px;color:var(--text4);font-weight:600;text-transform:uppercase;letter-spacing:0.5px;} .sw-tcat-tabs{display:flex;gap:4px;padding:6px 16px 8px;flex-wrap:wrap;} .sw-tcat{padding:6px 12px;font-size:11px;font-weight:500;color:var(--text3);background:rgba(var(--rgb-white),0.04);border:1px solid rgba(var(--rgb-white),0.08);border-radius:8px;cursor:pointer;font-family:inherit;transition:all 0.15s;} .sw-tcat.on{background:rgba(var(--rgb-pur),0.15);border-color:rgba(var(--rgb-pur),0.3);color:var(--pur-light);} .sw-tcat:active{transform:scale(0.97);} .sw-tcat-panel{display:none;} .sw-tcat-panel.on{display:block;} .sw-sidebar{display:contents;} .sw-toolbar{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;padding-bottom:max(8px,env(safe-area-inset-bottom));border-top:1px solid rgba(var(--rgb-white),0.08);background:var(--overlay-blur);flex-shrink:0;z-index:200;} .sw-tb{display:flex;align-items:center;gap:6px;padding:12px 20px;border-radius:12px;font-size:14px;font-weight:500;background:rgba(var(--rgb-white),0.05);border:1px solid rgba(var(--rgb-white),0.1);color:var(--text-soft);cursor:pointer;font-family:inherit;transition:all 0.15s;min-height:44px;} .sw-tb:active{transform:scale(0.97);} .sw-tb.on{background:var(--pur);border-color:var(--pur);color:var(--text-on-accent);} /* SONGWRITER DESKTOP SIDEBAR */ @media(min-width:900px){ .sw-full{display:grid;grid-template-columns:1fr 400px;grid-template-rows:auto auto 1fr;} .sw-hdr{grid-column:1/-1;} .sw-stats{grid-column:1/-1;} .sw-editor-wrap{grid-column:1;grid-row:3;} .sw-sidebar{grid-column:2;grid-row:3;display:flex;flex-direction:column;border-left:1px solid rgba(var(--rgb-white),0.06);background:var(--surface);overflow-y:auto;overscroll-behavior:contain;} .sw-sidebar .sw-sheet{position:static!important;transform:none!important;pointer-events:auto!important;max-height:none;border-top:none;border-radius:0;overflow:visible;} .sw-sidebar .sw-sheet-handle{display:none;} .sw-sidebar .sw-sheet-x{display:none;} .sw-sidebar .sw-sheet-top{padding:16px 16px 8px;} .sw-sidebar .sw-sheet-label{font-size:13px;color:var(--text3);text-transform:uppercase;letter-spacing:0.5px;font-weight:600;} .sw-sidebar .sw-modes{padding:8px 16px;gap:4px;flex-wrap:wrap;overflow:visible;} .sw-sidebar .sw-mtab{padding:7px 12px;font-size:12px;min-height:36px;} .sw-sidebar .sw-ai-row{padding:8px 16px;} .sw-sidebar .sw-ai-inp{font-size:14px;padding:10px 12px;min-height:40px;} .sw-sidebar .sw-ai-go{min-height:40px;padding:0 16px;font-size:13px;} .sw-sidebar .sw-chips{padding:6px 16px 12px;gap:5px;flex:1;} .sw-sidebar .sw-chip{padding:7px 12px;font-size:12px;min-height:36px;} .sw-sidebar #sw-sheet-struct{border-top:1px solid var(--border);} .sw-sidebar .sw-struct-grid{gap:6px;padding:8px 16px 12px;} .sw-sidebar .sw-st{padding:10px 12px;font-size:12px;min-height:40px;} .sw-toolbar{display:none;} } /* SEARCH */ .s-inp{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--text);font-family:'Inter',sans-serif;font-size:13px;outline:none;transition:border-color 0.15s;} .s-inp:focus{border-color:var(--pur-light);} .s-inp::placeholder{color:var(--text4);} /* TOAST */ .toast{position:fixed;bottom:24px;right:24px;background:var(--grad-btn);color:var(--text-on-accent);font-family:'Space Mono',monospace;font-size:11px;font-weight:700;padding:10px 16px;border-radius:8px;z-index:9999;transform:translateY(60px);opacity:0;transition:all 0.3s;pointer-events:none;letter-spacing:1px;box-shadow:0 4px 20px rgba(var(--rgb-pur),0.4);} .toast.show{transform:translateY(0);opacity:1;} /* EMPTY */ .empty{text-align:center;padding:60px 40px;color:var(--text3);} .empty .ei{font-size:32px;margin-bottom:12px;opacity:0.3;} .empty p{font-size:14px;color:var(--text2);} .empty .es{font-size:11px;color:var(--text3);margin-top:5px;font-family:'Space Mono',monospace;} .notes-display{padding:12px 18px;font-size:13px;line-height:1.7;color:var(--text2);} /* DROP ZONE */ .drop-zone{display:none;margin-top:6px;border:2px dashed var(--bpur);border-radius:8px;padding:10px 14px;text-align:center;font-size:11px;color:var(--pur-light);font-family:'Space Mono',monospace;background:var(--grad-soft);transition:all 0.2s;cursor:pointer;letter-spacing:1px;-webkit-tap-highlight-color:transparent;} .drop-zone.drag-over{background:var(--grad-glow);border-color:var(--pur-light);} body.is-pwa .drop-zone{display:block;} body.is-pwa .act-btn.upload-btn{display:none;} /* HIDDEN FILE INPUTS */ .file-input{position:fixed;top:0;left:0;width:0;height:0;opacity:0;overflow:hidden;} /* ===================== MOBILE RESPONSIVE ===================== */ @media (max-width: 768px) { html, body { overflow-x: hidden; max-width: 100vw; } .sidebar { display: none; } .main { margin-left: 0; padding-bottom: 96px; background: var(--bg); overflow-x: hidden; } .topbar { padding: 12px 16px; gap: 8px; } .page-heading { font-size: 18px; } .page-sub { display: none; } .content { padding: 14px 16px; background: var(--bg); } .stats-row, .stats-row-5 { grid-template-columns: repeat(2,1fr); gap: 8px; margin-bottom: 14px; } .stat-sess-card { display: none; } .stat-num { font-size: 26px; } .stat-card { padding: 14px 16px; } .artist-grid { grid-template-columns: 1fr; gap: 8px; } .detail-grid { grid-template-columns: 1fr; } .pd-cover-mobile,.pd-info-mobile{display:block;} .pd-info-desktop,.dg-right .cover-img{display:none !important;} .dg-uploads-mobile{display:block;} .dg-uploads-desktop{display:none;} .detail-wrap { padding: 14px 16px; } .modal { width: 100%; max-width: 100%; border-radius: 16px 16px 0 0; position: fixed; bottom: 0; left: 0; right: 0; max-height: 88vh; } .modal-overlay { align-items: flex-end; } .form-row { grid-template-columns: 1fr; } .sort-dd-btn { font-size:13px; padding:7px 14px; } .sort-dd-menu { right:auto;left:0;max-width:calc(100vw - 32px);max-height:60vh; } .sort-dd-item { font-size:13px; padding:11px 14px; } .step-row { padding: 10px 12px; gap: 8px; flex-wrap: wrap; } .step-row .upl { width: 100%; margin-left: 0; } .step-left { min-width: 0; flex-shrink: 1; } .step-left .step-name { font-size: 13px; } .step-left .step-desc { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .step-row .badge { display: none; } .mini-player { flex-shrink: 0; margin-left: auto; } .act-btn { padding: 4px 7px; font-size: 9px; } .ver-mgr-row { gap: 8px; padding: 10px 0; } .ver-mgr-actions { gap: 4px; } .ver-mgr-btn { padding: 5px 8px; font-size: 11px; } .ver-mgr-dropzone { padding: 16px; } #ver-mgr-modal .modal { position: relative; bottom: auto; left: auto; right: auto; border-radius: 14px; width: 92vw; max-width: 92vw; margin: auto; } #ver-mgr-modal { align-items: center; } #ver-mgr-modal input, #ver-mgr-modal select { font-size: 16px; } .mini-seek { width: 50px; } .sw-editor { font-size: 16px; } .sw-ai-inp { font-size: 16px; } .toast { left: 16px; right: 16px; bottom: 80px; } .btn { padding: 9px 16px; } input, textarea, select { font-size: 16px !important; } .back-btn { margin-bottom: 12px; } } #mobile-nav,.mob-more-menu,.mob-more-overlay { display: none; } @media (max-width: 768px) { #mobile-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg, var(--mobnav-from) 0%, var(--mobnav-via) 50%, var(--mobnav-to) 100%); border-radius: 0; z-index: 500; padding: 14px 8px max(24px, env(safe-area-inset-bottom)); } .mob-nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; border: none; background: none; color: rgba(var(--rgb-white),0.7); font-family: 'Inter',sans-serif; gap: 4px; cursor: pointer; transition: all 0.25s ease; } /* Active-State: Label-Farbe folgt Theme (dunkel im Light, hell im Dark); das Icon im lila Kreis wird explizit weiß gesetzt (siehe unten). */ .mob-nav-btn.active { color:var(--text); } .mob-nav-icon { display:flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:50%; background:transparent; box-shadow:inset 1px 2px 4px rgba(var(--rgb-black),0.5), inset -1px -1px 2px rgba(var(--rgb-white),0.04); transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1); } .mob-nav-btn.swapping .mob-nav-icon{animation:mobSwapIcon .35s cubic-bezier(0.34,1.56,0.64,1);} .mob-nav-btn.swapping .mob-nav-lbl{animation:mobSwapLbl .35s ease;} @keyframes mobSwapIcon{0%{transform:scale(0.3) translateY(-20px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}} @keyframes mobSwapLbl{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}} .mob-nav-btn.active .mob-nav-icon, .mob-nav-btn.fan-open .mob-nav-icon { background:linear-gradient(145deg, rgba(var(--rgb-pur),0.5), rgba(var(--rgb-pur-dark),0.8)); color: var(--text-on-accent); /* Icon-SVG: immer weiß auf lila */ box-shadow: 0 4px 12px rgba(var(--rgb-pur),0.4), 0 2px 4px rgba(var(--rgb-black),0.3), inset 0 1px 1px rgba(var(--rgb-white),0.2), 0 0 20px rgba(var(--rgb-pur),0.15); transform:translateY(-4px) scale(1.08); } .mob-nav-lbl { font-size: 9px; font-weight:500; letter-spacing:0.03em; } /* Fan Menu */ .mob-fan-wrap{position:relative;flex:1;display:flex;} .mob-fan-items{position:absolute;bottom:calc(100% + 16px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column-reverse;align-items:center;gap:12px;pointer-events:none;} .mob-fan-item{opacity:0;transform:scale(0.4) translateY(16px);pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:none;padding:0;color:rgba(var(--rgb-white),0.85);font-family:'Inter',sans-serif;font-size:9px;font-weight:500;cursor:pointer;white-space:nowrap;transition:opacity 0.2s ease,transform 0.4s cubic-bezier(0.34,1.56,0.64,1);transition-delay:calc(var(--i) * 0.08s);} .mob-fan-items.open{pointer-events:auto;} .mob-fan-items.open .mob-fan-item{opacity:1;transform:scale(1) translateY(0);pointer-events:auto;} .mob-fan-item:active .mob-fan-icon{background:linear-gradient(145deg,rgba(var(--rgb-pur),0.5),rgba(var(--rgb-pur-dark),0.8));box-shadow:0 4px 16px rgba(var(--rgb-pur),0.4),inset 0 1px 1px rgba(var(--rgb-white),0.15);} .mob-fan-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:linear-gradient(145deg,var(--pur-deep),var(--mobnav-from));border-radius:50%;color:var(--text-on-accent);box-shadow:0 2px 10px rgba(var(--rgb-pur),0.3),inset 0 1px 1px rgba(var(--rgb-white),0.1);transition:all .2s;} .mob-fan-label{letter-spacing:0.03em;color:#fff;font-weight:600;text-shadow:0 0 3px rgba(0,0,0,0.95),0 1px 4px rgba(0,0,0,0.75),0 0 1px rgba(0,0,0,1);} .mob-fan-overlay{position:fixed;inset:0;z-index:499;background:rgba(var(--rgb-black),0);pointer-events:none;transition:background 0.3s ease;display:none;} .mob-fan-overlay.open{display:block;background:rgba(var(--rgb-black),0.55);pointer-events:auto;} .mob-nav-btn.fan-open{color:var(--text);} .mob-more-menu { display:none;position:fixed;bottom:90px;right:14px;left:14px; background:var(--surface);border:1px solid var(--border);border-radius:14px; padding:16px;z-index:501;box-shadow:0 -8px 40px rgba(var(--rgb-black),.5); animation:mobMenuUp .2s ease; } .mob-more-menu.open{display:block;} @keyframes mobMenuUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} .mob-more-overlay{display:none;position:fixed;inset:0;z-index:500;background:rgba(var(--rgb-black),0.4);} .mob-more-overlay.open{display:block;} .mob-menu-section{margin-bottom:14px;} .mob-menu-section:last-child{margin-bottom:0;} .mob-menu-lbl{font-size:10px;letter-spacing:2px;color:var(--text3);text-transform:uppercase;font-family:'Space Mono',monospace;margin-bottom:8px;} .mob-online-list{display:flex;flex-direction:column;gap:4px;} .mob-online-user{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;background:var(--surface2);} .mob-online-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;box-shadow:0 0 6px rgba(var(--rgb-green),0.6);animation:pulse-dot 2s infinite;} .mob-online-name{font-size:13px;color:var(--text2);} .mob-online-group-lbl{font-size:9px;letter-spacing:2px;color:var(--text4);text-transform:uppercase;font-family:'Space Mono',monospace;padding:8px 8px 3px;opacity:0.7;} .mob-online-group-lbl:first-child{padding-top:0;} .mob-online-empty{font-size:12px;color:var(--text4);padding:4px 8px;} .mob-menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;} .mob-menu-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border:none;background:none;cursor:pointer;color:rgba(var(--rgb-white),0.7);font-family:'Inter',sans-serif;transition:all .15s;} .mob-menu-btn:active{transform:scale(0.92);} .mob-menu-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(145deg,rgba(123,69,200,0.25),rgba(90,40,180,0.45));box-shadow:0 2px 10px rgba(123,69,200,0.25),inset 0 1px 1px rgba(255,255,255,0.1);color:#fff;transition:all .2s;} .mob-menu-btn:active .mob-menu-icon{background:linear-gradient(145deg,rgba(123,69,200,0.5),rgba(90,40,180,0.7));box-shadow:0 4px 16px rgba(123,69,200,0.4),inset 0 1px 1px rgba(255,255,255,0.15);} .mob-menu-lbl2{font-size:9px;font-weight:500;letter-spacing:0.03em;} } /* ONLINE PRESENCE */ .presence-block{padding:10px 12px;border-top:1px solid var(--border);} .presence-lbl{font-size:9px;letter-spacing:3px;color:var(--text4);text-transform:uppercase;font-family:'Space Mono',monospace;padding:0 10px 6px;} .presence-list{display:flex;flex-direction:column;gap:3px;} .presence-user{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:7px;} .presence-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;box-shadow:0 0 6px rgba(var(--rgb-green),0.6);animation:pulse-dot 2s infinite;} @keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:0.5;}} .presence-name{font-size:12px;color:var(--text2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .presence-me{color:var(--pur-light);} .presence-group-lbl{font-size:8px;letter-spacing:2px;color:var(--text4);text-transform:uppercase;font-family:'Space Mono',monospace;padding:8px 10px 3px;opacity:0.7;} .presence-group-lbl:first-child{padding-top:2px;} .presence-empty{font-size:11px;color:var(--text4);padding:4px 10px;font-family:'Space Mono',monospace;} /* LOADING SCREEN */ #loading-screen{position:fixed;inset:0;background:var(--bg);z-index:9000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:opacity 0.4s ease;} #loading-screen.hidden{opacity:0;pointer-events:none;} .ls-logo{height:40px;margin-bottom:4px;} .ls-logo img{height:100%;width:auto;object-fit:contain;} .ls-title{display:none;} .ls-bar{width:180px;height:3px;background:var(--border);border-radius:10px;overflow:hidden;} .ls-bar-fill{height:100%;width:0%;background:var(--grad);border-radius:10px;animation:ls-progress 1.2s ease forwards;} @keyframes ls-progress{0%{width:0%}60%{width:70%}100%{width:95%}} .ls-sub{font-size:11px;color:var(--text4);font-family:'Space Mono',monospace;letter-spacing:1px;} /* AUTH SCREEN */ #auth-screen{position:fixed;inset:0;background:var(--bg);z-index:8500;display:flex;align-items:center;justify-content:center;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:24px 16px;transition:opacity 0.4s ease;} #auth-screen.hidden{opacity:0;pointer-events:none;} .auth-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:36px 32px;width:380px;max-width:calc(100vw - 32px);position:relative;overflow:hidden;margin:auto;} .auth-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);} .auth-logo{display:flex;flex-direction:column;align-items:center;margin-bottom:28px;} .auth-logo-img{height:52px;margin-bottom:16px;} .auth-logo-img img{height:100%;width:auto;object-fit:contain;} .auth-logo-title{display:none;} .auth-logo-sub{font-size:10px;color:var(--text4);font-family:'Space Mono',monospace;letter-spacing:2px;margin-top:4px;} .auth-tabs{display:flex;gap:0;margin-bottom:24px;background:var(--surface2);border-radius:10px;padding:3px;border:1px solid var(--border);} .auth-tab{flex:1;padding:8px 0;border:none;background:none;color:var(--text3);font-family:'Inter',sans-serif;font-size:13px;font-weight:500;cursor:pointer;border-radius:8px;transition:all 0.15s;} .auth-tab.active{background:var(--grad-btn);color:var(--text-on-accent);font-weight:600;} .auth-field{margin-bottom:14px;} .auth-field label{display:block;font-size:11px;color:var(--text3);margin-bottom:5px;font-family:'Space Mono',monospace;letter-spacing:1px;} .auth-field input{width:100%;padding:10px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:'Inter',sans-serif;font-size:16px;outline:none;transition:border-color 0.15s;} .auth-field input:focus{border-color:var(--pur);} .auth-field input::placeholder{color:var(--text4);} .auth-submit{width:100%;padding:11px;border:none;border-radius:10px;background:var(--grad-btn);color:var(--text-on-accent);font-family:'Inter',sans-serif;font-size:14px;font-weight:600;cursor:pointer;margin-top:6px;transition:all 0.15s;box-shadow:0 2px 12px rgba(var(--rgb-pur),0.4);} .auth-submit:hover{opacity:0.88;transform:translateY(-1px);} .auth-submit:disabled{opacity:0.5;cursor:not-allowed;transform:none;} .auth-error{color:var(--red);font-size:12px;margin-top:10px;text-align:center;min-height:18px;} .auth-info{color:var(--green);font-size:12px;margin-top:10px;text-align:center;min-height:18px;} @media(max-width:600px){ #auth-screen{padding:20px 12px;padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(20px,env(safe-area-inset-bottom));} .auth-card{padding:28px 22px;width:100%;max-width:100%;border-radius:14px;} .auth-logo{margin-bottom:22px;} .auth-logo-img{height:44px;margin-bottom:12px;} .auth-tabs{margin-bottom:20px;} .auth-field{margin-bottom:12px;} } /* ── ACCOUNT SETTINGS ─────────────────────────────────────────────────────── */ .acc-tab{padding:6px 14px;border-radius:20px;border:1px solid transparent;background:transparent;color:var(--text3);font-family:'Inter',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:background-color 0.15s ease,color 0.15s ease,border-color 0.15s ease;} .acc-tab:hover{background:var(--surface2);color:var(--text);} .acc-tab.active{background:var(--grad-soft);color:var(--pur-light);border-color:var(--bpur);} @media (prefers-reduced-motion: reduce){.acc-tab{transition:none;}} /* Account modal — stable size across tabs (panes scroll internally, actions stick to bottom) */ #account-modal .modal{display:flex;flex-direction:column;width:840px;max-width:96vw;height:min(820px,92vh);overflow:hidden;} #account-modal .acc-pane-wrap{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;padding-right:4px;} #account-modal .acc-pane-wrap > [id^="acc-pane-"]{flex-direction:column;} #account-modal .acc-pane-wrap > [id^="acc-pane-"] > .modal-actions{margin-top:auto;} @media (max-width:768px){#account-modal .modal{width:100%;max-width:100%;height:88vh;}} /* Integrations pane — theme-aware (works in dark + light) */ .int-intro{font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:22px;padding:0 2px;} .int-intro b{color:var(--text-bright);font-weight:600;} .int-section{margin-bottom:24px;} .int-section:last-child{margin-bottom:0;} .int-section.is-dimmed{opacity:0.65;} .int-section.is-dimmed:hover{opacity:0.85;} .int-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding:0 2px;} .int-section-head-text{min-width:0;flex:1;} .int-section-title{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);font-family:'Space Mono',monospace;font-weight:600;margin-bottom:4px;} .int-section-subtitle{font-size:14px;color:var(--text);font-weight:600;} .int-badge{flex-shrink:0;font-size:10px;letter-spacing:1px;text-transform:uppercase;font-family:'Space Mono',monospace;font-weight:600;padding:4px 10px;border-radius:20px;border:1px solid transparent;white-space:nowrap;} .int-badge.is-available{color:var(--green);background:rgba(var(--rgb-green),0.10);border-color:rgba(var(--rgb-green),0.30);} .int-badge.is-soon{color:var(--text3);background:var(--surface2);border-color:var(--border);} .int-grid{display:flex;flex-direction:column;gap:10px;width:100%;box-sizing:border-box;} .int-card{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:16px;min-width:0;box-sizing:border-box;overflow-wrap:break-word;word-break:break-word;} .int-title{font-size:14px;font-weight:600;margin-bottom:6px;color:var(--text-bright);display:flex;align-items:center;gap:8px;} .int-sub{font-size:13px;color:var(--text3);line-height:1.5;margin-bottom:12px;} .int-token-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--border);gap:10px;min-width:0;} .int-token-row:first-of-type{border-top:none;} .int-token-main{min-width:0;flex:1;} .int-token-name{font-size:14px;font-weight:600;color:var(--text);word-break:break-word;} .int-token-meta{font-size:11px;color:var(--text3);margin-top:2px;font-family:'Space Mono',monospace;word-break:break-all;} .int-steps{font-size:13px;color:var(--text2);line-height:1.65;padding-left:20px;margin:0;} .int-steps li{margin:6px 0;} .int-code-box{background:var(--grad-soft);border:1px solid var(--bpur);border-radius:8px;padding:10px 12px;font-family:'Space Mono',monospace;font-size:11px;margin:8px 0;user-select:all;word-break:break-all;overflow-wrap:anywhere;color:var(--text);} .int-vst-body{font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:10px;} .int-vst-notify{font-size:12px;color:var(--text3);font-style:italic;} .acc-settings-btn{background:none;border:none;color:var(--text4);cursor:pointer;font-size:15px;padding:5px;border-radius:6px;transition:all 0.15s;flex-shrink:0;line-height:1;} .acc-settings-btn:hover{color:var(--pur-light);background:var(--grad-soft);} .team-member-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surface2);border-radius:8px;border:1px solid var(--border);} .team-member-av{width:30px;height:30px;border-radius:50%;background:var(--grad-soft);border:1.5px solid var(--bpur);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--pur-light);flex-shrink:0;} .team-member-info{flex:1;overflow:hidden;} .team-member-name{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .team-member-email{font-size:11px;color:var(--text4);font-family:'Space Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .role-badge{padding:2px 8px;border-radius:10px;font-size:10px;font-family:'Space Mono',monospace;font-weight:600;} .role-badge.admin{background:rgba(var(--rgb-pur),0.18);color:var(--pur-light);} .role-badge.team{background:var(--surface3);color:var(--text3);} /* ── TRACK VERSIONS ─────────────────────────────────────────────────────────── */ .ver-panel{margin:0 18px 12px;padding:10px 12px;background:var(--surface2);border-radius:8px;border:1px solid var(--border);} .ver-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);} .ver-row:last-child{border-bottom:none;padding-bottom:0;} .ver-row:first-child{padding-top:0;} /* ── VERSION MANAGER OVERLAY ───────────────────────────────────────────────── */ .ver-mgr-modal-inner{max-width:560px;} .ver-mgr-list{display:flex;flex-direction:column;gap:0;} .ver-mgr-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--border);transition:background 0.15s;} .ver-mgr-row:last-child{border-bottom:none;} .ver-mgr-badge{width:32px;height:32px;border-radius:8px;background:var(--pur-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;font-weight:700;color:var(--pur-light);font-family:'Space Mono',monospace;} .ver-mgr-info{flex:1;min-width:0;overflow:hidden;} .ver-mgr-label{font-size:14px;color:var(--text);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;} .ver-mgr-label:hover{color:var(--pur-light);} .ver-mgr-meta{font-size:11px;color:var(--text4);font-family:'Space Mono',monospace;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .ver-mgr-tag{font-size:10px;background:rgba(var(--rgb-violet),0.15);color:var(--pur-light);border-radius:4px;padding:1px 6px;font-family:'Space Mono',monospace;flex-shrink:0;} .ver-mgr-actions{display:flex;gap:6px;flex-shrink:0;} .ver-mgr-btn{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:6px 10px;color:var(--text3);font-size:12px;cursor:pointer;transition:all 0.15s;font-family:'Space Mono',monospace;display:flex;align-items:center;gap:4px;} .ver-mgr-btn:hover{background:var(--surface3);color:var(--pur-light);border-color:var(--bpur);} .ver-mgr-btn.del:hover{color:var(--red);border-color:rgba(var(--rgb-red),0.4);} .ver-mgr-empty{text-align:center;padding:28px 16px;color:var(--text4);font-family:'Space Mono',monospace;font-size:13px;} .ver-mgr-empty svg{display:block;margin:0 auto 12px;opacity:0.4;} .ver-mgr-upload-area{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);} .ver-mgr-dropzone{border:2px dashed var(--border);border-radius:10px;padding:20px;text-align:center;color:var(--text4);font-size:13px;cursor:pointer;transition:all 0.2s;font-family:'Space Mono',monospace;} .ver-mgr-dropzone:hover,.ver-mgr-dropzone.dragover{border-color:var(--pur-light);background:rgba(var(--rgb-violet),0.06);color:var(--pur-light);} .ver-mgr-dropzone svg{display:block;margin:0 auto 8px;opacity:0.5;} .ver-mgr-progress{margin-top:12px;display:none;} .ver-mgr-progress.active{display:block;} .ver-mgr-progress-bar{height:6px;background:var(--surface3);border-radius:3px;overflow:hidden;} .ver-mgr-progress-fill{height:100%;background:var(--grad);border-radius:3px;transition:width 0.3s ease;width:0%;} .ver-mgr-progress-text{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:11px;color:var(--text3);font-family:'Space Mono',monospace;} .ver-mgr-add-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px;background:var(--pur-bg);border:1px solid var(--bpur);border-radius:10px;color:var(--pur-light);font-size:13px;font-weight:600;font-family:'Space Mono',monospace;cursor:pointer;transition:all 0.15s;} .ver-mgr-add-btn:hover{background:rgba(var(--rgb-violet),0.2);} /* ── VERSION PILLS (Big Player) ────────────────────────────────────────────── */ .swf-ver-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;padding:0 2px;flex-shrink:0;} .swf-ver-pill{background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:5px 14px;color:var(--text3);font-size:12px;font-family:'Space Mono',monospace;cursor:pointer;transition:all .15s;white-space:nowrap;} .swf-ver-pill:hover{border-color:var(--bpur);color:var(--pur-light);background:var(--pur-bg);} .swf-ver-pill.active{background:var(--pur-bg);border-color:var(--pur-light);color:var(--pur-light);font-weight:600;} /* ── Studio Track Chart Overlay ───────────────────────────────────────── */ .stc-overlay{position:fixed;inset:0;background:rgba(var(--rgb-black),0.65);backdrop-filter:blur(10px);z-index:5000;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.2s;} .stc-overlay.stc-open{opacity:1;} .stc-panel{width:100%;max-width:460px;max-height:90vh;background:var(--surface-chart);border:1px solid rgba(var(--rgb-white),0.12);border-radius:16px;overflow-y:auto;overflow-x:hidden;transform:translateY(24px);transition:transform 0.25s;-webkit-overflow-scrolling:touch;box-shadow:0 8px 40px rgba(var(--rgb-black),0.6);} .stc-overlay.stc-open .stc-panel{transform:translateY(0);} .stc-header{padding:18px 18px 14px;position:relative;} .stc-close{position:absolute;top:10px;right:10px;background:var(--s2);border:none;color:var(--c3);font-size:20px;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1;line-height:1;} .stc-close:hover{background:var(--s3);color:var(--c1);} .stc-hero{display:flex;align-items:center;gap:14px;} .stc-cover{width:68px;height:68px;border-radius:8px;object-fit:cover;flex-shrink:0;box-shadow:0 3px 16px rgba(var(--rgb-black),0.3);} .stc-meta{flex:1;min-width:0;padding-right:28px;} .stc-title{font-family:var(--ff);font-size:15px;font-weight:700;color:var(--c1);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .stc-sub{font-size:11px;color:var(--c4);margin-top:2px;} .stc-streams{font-size:13px;font-weight:700;color:var(--spotify);margin-top:5px;} .stc-ext{display:inline-block;font-size:10px;color:var(--c4);text-decoration:none;margin-top:10px;padding:4px 10px;border:1px solid var(--b1);border-radius:16px;transition:all 0.15s;} .stc-ext:hover{color:var(--spotify);border-color:var(--spotify);} .stc-chart-area{padding:0 14px 18px;} .stc-canvas-wrap{position:relative;width:100%;margin:6px 0;touch-action:none;} .stc-tooltip{position:absolute;background:var(--s3);border:1px solid var(--b2);color:var(--c1);font-size:10px;padding:5px 8px;border-radius:6px;pointer-events:none;opacity:0;transition:opacity 0.12s;white-space:nowrap;z-index:2;line-height:1.5;} .stc-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--spotify);border:2px solid var(--text-bright);pointer-events:none;opacity:0;transition:opacity 0.1s;z-index:3;} .stc-vline{position:absolute;width:1px;background:rgba(var(--rgb-white),0.12);pointer-events:none;opacity:0;transition:opacity 0.1s;z-index:1;} .stc-periods{display:flex;gap:5px;margin-bottom:10px;} .stc-period{background:var(--s2);border:1px solid var(--b1);color:var(--c3);font-size:11px;font-weight:600;padding:4px 12px;border-radius:16px;cursor:pointer;font-family:var(--ff);} .stc-period:hover{border-color:var(--b2);color:var(--c2);} .stc-period-active{background:rgba(var(--rgb-spotify),0.1);border-color:rgba(var(--rgb-spotify),0.35);color:var(--spotify);} .stc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:6px;margin-top:14px;} .stc-stat{background:var(--s2);border:1px solid var(--b1);border-radius:10px;padding:12px 10px;text-align:center;} .stc-stat-val{font-family:var(--ff);font-size:15px;font-weight:700;color:var(--c1);} .stc-stat-lbl{font-size:9px;color:var(--c4);margin-top:3px;text-transform:uppercase;letter-spacing:0.5px;} .stc-loading{text-align:center;padding:40px 0;color:var(--c4);font-size:12px;} .stc-empty{text-align:center;padding:36px 16px;color:var(--c3);font-size:13px;line-height:1.7;} @media(min-width:600px){.stc-overlay{align-items:center;}.stc-panel{border-radius:16px;max-height:88vh;max-width:780px;}} /* ── Spotify Search in Artist Modal ─────────────────────────────────── */ #am-spotify-results{max-height:200px;overflow-y:auto;background:var(--s2);border:1px solid var(--b1);border-radius:8px;margin-top:4px;} .am-sp-item{display:flex;align-items:center;gap:10px;padding:8px 10px;cursor:pointer;transition:background 0.12s;} .am-sp-item:hover{background:rgba(var(--rgb-white),0.04);} .am-sp-item+.am-sp-item{border-top:1px solid var(--b1);} /* ══════════════════════════════════════════════════════════════════════════════ */ /* ── PLAYLIST TRACKER ──────────────────────────────────────────────────────── */ .pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;} .pl-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s;display:flex;flex-direction:row;} .pl-card:hover{border-color:var(--bpur);transform:translateY(-2px);box-shadow:0 8px 32px rgba(var(--rgb-black),0.2);} .pl-card-cover{width:110px;min-height:110px;object-fit:cover;flex-shrink:0;} .pl-card-cover-empty{display:flex;align-items:center;justify-content:center;background:var(--surface2);font-size:28px;color:var(--text4);} .pl-card-body{padding:14px 16px;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;} .pl-card-name{font-size:14px;font-weight:700;color:var(--text-bright);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .pl-card-owner{font-size:11px;color:var(--text4);margin-top:2px;font-family:'Space Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .pl-card-stats{display:flex;gap:16px;margin-top:10px;} .pl-card-stat{display:flex;flex-direction:column;} .pl-stat-val{font-size:15px;font-weight:700;color:var(--text);} .pl-stat-lbl{font-size:9px;color:var(--text4);text-transform:uppercase;letter-spacing:1px;font-family:'Space Mono',monospace;margin-top:1px;} .pld-hero{display:flex;gap:24px;margin-bottom:28px;align-items:flex-start;} .pld-cover-wrap{flex-shrink:0;} .pld-cover{width:200px;height:200px;border-radius:12px;object-fit:cover;box-shadow:0 8px 32px rgba(var(--rgb-black),0.3);} .pld-cover-empty{width:200px;height:200px;border-radius:12px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:48px;color:var(--text4);} .pld-info{flex:1;min-width:0;} .pld-name{font-size:24px;font-weight:700;color:var(--text-bright);line-height:1.2;margin-bottom:6px;} .pld-desc{font-size:13px;color:var(--text3);line-height:1.5;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .pld-owner{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;} .pld-owner-link{font-size:13px;font-weight:600;color:var(--pur-light);text-decoration:none;transition:opacity .15s;} .pld-owner-link:hover{opacity:0.8;} .pld-spotify-link{font-size:10px;color:var(--green);text-decoration:none;padding:3px 10px;border:1px solid rgba(var(--rgb-green),0.3);border-radius:16px;font-family:'Space Mono',monospace;transition:all .15s;} .pld-spotify-link:hover{background:rgba(var(--rgb-green),0.1);border-color:var(--green);} .pld-stats-row{display:flex;gap:18px;flex-wrap:wrap;} .pld-stat-val{font-size:18px;font-weight:700;color:var(--text);} .pld-stat-lbl{font-size:9px;color:var(--text4);text-transform:uppercase;letter-spacing:1.5px;font-family:'Space Mono',monospace;margin-top:1px;} .pld-section{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 22px;margin-bottom:16px;} .pld-section-title{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--text3);font-family:'Space Mono',monospace;margin-bottom:14px;} .pld-chart-wrap{width:100%;overflow:hidden;} .pld-chart-wrap canvas{width:100%;display:block;} .pld-owner-grid{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;scrollbar-color:rgba(var(--rgb-violet),0.3) transparent;} .pld-owner-grid::-webkit-scrollbar{height:4px;} .pld-owner-grid::-webkit-scrollbar-thumb{background:rgba(var(--rgb-violet),0.3);border-radius:4px;} .pld-owner-pl{flex-shrink:0;width:100px;text-decoration:none;text-align:center;transition:opacity .15s;} .pld-owner-pl:hover{opacity:0.8;} .pld-opl-img{width:100px;height:100px;border-radius:8px;object-fit:cover;margin-bottom:6px;} .pld-opl-img-empty{display:flex;align-items:center;justify-content:center;background:var(--surface2);font-size:24px;color:var(--text4);} .pld-opl-name{font-size:11px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .pld-opl-count{font-size:9px;color:var(--text4);font-family:'Space Mono',monospace;} .plt-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);} .plt-row:last-child{border-bottom:none;} .plt-pos{width:28px;text-align:center;font-size:12px;color:var(--text4);font-family:'Space Mono',monospace;flex-shrink:0;} .plt-cover{width:40px;height:40px;border-radius:4px;object-fit:cover;flex-shrink:0;} .plt-cover-empty{width:40px;height:40px;border-radius:4px;background:var(--surface3);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text4);flex-shrink:0;} .plt-info{flex:1;min-width:0;overflow:hidden;} .plt-name{font-size:13px;font-weight:600;color:var(--text-bright);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .plt-artist{font-size:11px;color:var(--text4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .plt-right{text-align:right;flex-shrink:0;} .plt-streams{font-size:13px;font-weight:700;color:var(--green);font-family:'Space Mono',monospace;} .plt-meta{font-size:10px;color:var(--text4);font-family:'Space Mono',monospace;margin-top:1px;} @media(max-width:768px){ .pl-grid{grid-template-columns:1fr;} .pld-hero{flex-direction:column;gap:16px;align-items:center;text-align:center;} .pld-cover,.pld-cover-empty{width:160px;height:160px;} .pld-stats-row{justify-content:center;} .pld-owner{justify-content:center;} .pld-info{text-align:center;} .pld-info>div:last-child{justify-content:center;} .pld-owner-pl{width:80px;}.pld-opl-img{width:80px;height:80px;} } /* ── Playlist Loading Spinner ──────────────────────────────────────── */ .pl-spinner{width:36px;height:36px;border:3px solid var(--border2);border-top-color:var(--pur-light);border-radius:50%;animation:pl-spin .8s linear infinite;} @keyframes pl-spin{to{transform:rotate(360deg)}} /* ── Quick-Add Input ──────────────────────────────────────────────── */ .pl-quick-add{display:flex;gap:10px;align-items:center;margin-bottom:18px;position:relative;} .pl-quick-add .form-inp{flex:1;font-size:14px;} @media(max-width:768px){.pl-quick-add{flex-direction:column;}.pl-quick-add .form-inp{width:100%;}.pl-quick-add .btn{width:100%;}} .pl-search-overlay{display:none;position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--surface);border:1px solid var(--border2);border-radius:12px;max-height:420px;overflow-y:auto;z-index:50;box-shadow:0 12px 40px rgba(var(--rgb-black),0.5);scrollbar-width:thin;scrollbar-color:var(--border2) transparent;} .pl-search-overlay.open{display:block;} .pl-sr-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background 0.12s;} .pl-sr-item:hover{background:rgba(var(--rgb-white),0.05);} .pl-sr-item+.pl-sr-item{border-top:1px solid var(--b1);} .pl-sr-img{width:46px;height:46px;border-radius:6px;object-fit:cover;flex-shrink:0;} .pl-sr-img-empty{background:var(--surface3);display:flex;align-items:center;justify-content:center;font-size:18px;} .pl-sr-info{flex:1;min-width:0;} .pl-sr-name{font-size:13px;font-weight:600;color:var(--text-bright);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .pl-sr-meta{font-size:11px;color:var(--text4);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* ── AI Song Checker ──────────────────────────────────────────────── */ .aic-wrap{max-width:640px;margin:0 auto;} .aic-header{text-align:center;margin-bottom:32px;} .aic-header-icon{margin-bottom:12px;opacity:0.6;} .aic-header h2{font-size:22px;font-weight:700;color:var(--text);margin:0 0 8px;font-family:'Syne',sans-serif;} .aic-header p{font-size:13px;color:var(--text3);line-height:1.6;max-width:420px;margin:0 auto;} .aic-section{margin-bottom:28px;} .aic-features-row{display:flex;justify-content:center;gap:24px;margin-bottom:24px;} .aic-feat{display:flex;align-items:center;gap:6px;} .aic-feat-icon{width:auto;height:auto;border-radius:0;background:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .aic-feat-lbl{font-size:11px;font-weight:500;color:var(--text3);} .aic-feat-desc{display:none;} .aic-formats{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:32px;} .aic-fmt{font-size:10px;padding:3px 8px;border-radius:4px;background:rgba(var(--rgb-pur),0.06);color:var(--text4);font-family:'Space Mono',monospace;} .aic-powered{text-align:center;font-size:10px;color:var(--text4);opacity:0.5;margin-top:24px;font-family:'Space Mono',monospace;} .aic-intro{display:none;} .aic-toggle{display:flex;gap:6px;margin-bottom:18px;} .aic-toggle-btn{flex:1;padding:12px 0;border-radius:10px;border:1px solid var(--border2);background:transparent;color:var(--text3);font-family:'Syne',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;} .aic-toggle-btn.active{background:var(--bpur);border-color:var(--pur-light);color:var(--pur-light);} .aic-toggle-btn:hover:not(.active){border-color:var(--text4);} .aic-input-row{display:flex;gap:10px;align-items:center;} .aic-inp{flex:1;font-size:14px;} .aic-btn{flex-shrink:0;white-space:nowrap;} .aic-hint{font-size:11px;color:var(--text4);margin-top:8px;font-family:'Space Mono',monospace;} @media(max-width:768px){.aic-input-row{flex-direction:column;}.aic-inp,.aic-btn{width:100%;}.aic-card{padding:20px 16px;}} .aic-dropzone{border:2px dashed var(--border2);border-radius:12px;padding:52px 20px;text-align:center;cursor:pointer;transition:all .2s;position:relative;} .aic-dropzone:hover,.aic-dropzone.drag-over{border-color:var(--pur-light);background:rgba(var(--rgb-pur-accent),0.05);} .aic-dz-content{display:flex;flex-direction:column;align-items:center;gap:10px;} .aic-dz-icon{font-size:40px;opacity:0.7;} .aic-dz-text{font-size:14px;color:var(--text3);line-height:1.6;} .aic-dz-text span{font-size:12px;color:var(--pur-light);text-decoration:underline;} .aic-file-info{display:flex;align-items:center;gap:10px;padding:4px 0;} .aic-file-icon{font-size:22px;} .aic-file-name{flex:1;font-size:14px;color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .aic-file-size{font-size:11px;color:var(--text4);font-family:'Space Mono',monospace;flex-shrink:0;} .aic-file-remove{background:none;border:1px solid var(--border2);border-radius:6px;color:var(--text4);font-size:14px;padding:2px 8px;cursor:pointer;flex-shrink:0;transition:all .15s;} .aic-file-remove:hover{border-color:var(--red);color:var(--red);} .aic-loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:40px 0;} .aic-loading-text{font-size:13px;color:var(--text3);font-family:'Space Mono',monospace;} /* Chase Animation */ .aic-chase-scene{display:flex;justify-content:center;gap:0;margin:0 auto;} .aic-runner{width:80px;height:80px;} .aic-runner svg{width:100%;height:100%;} @keyframes aic-run{ 0%{left:-15%;transform:translateY(0)} 5%{transform:translateY(-10px)} 10%{transform:translateY(0)} 15%{transform:translateY(-10px)} 20%{transform:translateY(0)} 25%{transform:translateY(-10px)} 30%{transform:translateY(0)} 35%{transform:translateY(-10px)} 40%{transform:translateY(0)} 45%{transform:translateY(-10px)} 50%{transform:translateY(0)} 55%{transform:translateY(-10px)} 60%{transform:translateY(0)} 65%{transform:translateY(-10px)} 70%{transform:translateY(0)} 75%{transform:translateY(-10px)} 80%{transform:translateY(0)} 85%{transform:translateY(-10px)} 90%{transform:translateY(0)} 95%{transform:translateY(-8px)} 100%{left:105%;transform:translateY(0)} } .aic-error{background:rgba(var(--rgb-red-strong),0.1);border:1px solid rgba(var(--rgb-red-strong),0.3);border-radius:12px;padding:18px;color:var(--red-strong);font-size:14px;margin-top:16px;line-height:1.6;} .aic-result-card{margin-top:24px;margin-bottom:28px;} .aic-result-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px;} .aic-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:12px;font-size:17px;font-weight:700;font-family:'Syne',sans-serif;} .aic-badge-human{background:rgba(var(--rgb-green),0.15);color:var(--green);border:1px solid rgba(var(--rgb-green),0.3);} .aic-badge-ai{background:rgba(var(--rgb-red-strong),0.15);color:var(--red-strong);border:1px solid rgba(var(--rgb-red-strong),0.3);} .aic-badge-processed{background:rgba(var(--rgb-amber-strong),0.15);color:var(--amber-strong);border:1px solid rgba(var(--rgb-amber-strong),0.3);} .aic-ai-type{font-size:14px;color:var(--text3);} .aic-ai-type strong{color:var(--text);} .aic-meter-section{margin-bottom:26px;} .aic-meter-label{font-size:11px;color:var(--text4);text-transform:uppercase;letter-spacing:1px;font-family:'Space Mono',monospace;margin-bottom:10px;} .aic-meter-bar{width:100%;height:14px;background:var(--surface3);border-radius:8px;overflow:hidden;} .aic-meter-fill{height:100%;border-radius:8px;transition:width .6s ease;} .aic-meter-vals{display:flex;justify-content:space-between;margin-top:10px;} .aic-meter-pct{font-size:28px;font-weight:700;font-family:'Syne',sans-serif;} .aic-meter-conf{font-size:13px;color:var(--text4);font-family:'Space Mono',monospace;align-self:flex-end;} .aic-details{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px;} @media(max-width:768px){.aic-details{grid-template-columns:1fr;}} .aic-detail-block{background:rgba(var(--rgb-white),0.02);border:1px solid var(--border);border-radius:10px;padding:16px;} .aic-detail-title{font-size:11px;color:var(--text4);text-transform:uppercase;letter-spacing:1px;font-family:'Space Mono',monospace;margin-bottom:12px;} .aic-detail-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;} .aic-detail-row>span:first-child{font-size:12px;color:var(--text3);width:86px;flex-shrink:0;} .aic-detail-row>span:last-child{font-size:12px;color:var(--text);width:46px;text-align:right;flex-shrink:0;font-family:'Space Mono',monospace;} .aic-mini-bar{flex:1;height:8px;background:var(--border);border-radius:5px;overflow:hidden;} .aic-mini-bar>div{height:100%;border-radius:5px;} .aic-meta{display:flex;gap:20px;font-size:12px;color:var(--text4);font-family:'Space Mono',monospace;margin-bottom:14px;} .aic-disclaimer{display:flex;align-items:flex-start;gap:6px;font-size:11px;color:var(--text4);line-height:1.5;padding-top:14px;border-top:1px solid var(--border);} /* ── SESSIONS KALENDER ─────────────────────────────────────────────────────── */ .sess-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px;} .sess-stat{background:var(--surface2);border-radius:10px;padding:12px 14px;} .sess-stat-num{font-size:22px;font-weight:600;color:var(--pur-light);} .sess-stat-lbl{font-size:11px;color:var(--text4);margin-top:2px;} .sess-controls{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px;} .sess-nav{display:flex;align-items:center;gap:8px;} .sess-nav-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--border2);background:var(--surface2);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;} .sess-nav-btn:hover{background:var(--surface3);border-color:var(--bpur);} .sess-nav-lbl{font-size:14px;font-weight:600;color:var(--text);min-width:180px;text-align:center;} .sess-views{display:flex;gap:3px;background:var(--surface2);border-radius:8px;padding:3px;} .sess-view-btn{padding:6px 14px;border:none;background:transparent;border-radius:6px;font-size:12px;cursor:pointer;color:var(--text3);font-weight:500;font-family:'Inter',sans-serif;} .sess-view-btn.active{background:var(--grad-soft);color:var(--pur-light);border:1px solid var(--bpur);} .sess-legend{display:flex;gap:14px;margin-bottom:14px;flex-wrap:wrap;} .sess-legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text4);} .sess-legend-dot{width:10px;height:10px;border-radius:3px;} .sess-grid{display:grid;grid-template-columns:50px repeat(7,minmax(0,1fr));border:1px solid var(--border);overflow:hidden;} .sess-grid-hdr{border-radius:12px 12px 0 0;border-bottom:none;overflow-y:scroll;scrollbar-gutter:stable;} .sess-grid-hdr::-webkit-scrollbar{width:6px;background:transparent;} .sess-grid-body{border:none;} .sess-scroll{flex:1;min-height:200px;overflow-y:scroll;border:1px solid var(--border);border-top:none;border-radius:0 0 12px 12px;scrollbar-gutter:stable;} #sessions-content{display:flex;flex-direction:column;height:calc(100vh - 130px);overflow:hidden;} #sess-cal-area{flex:1;display:flex;flex-direction:column;min-height:0;} .sess-scroll::-webkit-scrollbar{width:6px;} .sess-scroll::-webkit-scrollbar-track{background:transparent;} .sess-scroll::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;} .sess-scroll::-webkit-scrollbar-thumb:hover{background:var(--text4);} .sess-corner{background:var(--surface2);border-right:1px solid var(--border);border-bottom:1px solid var(--border);} .sess-day-hd{padding:8px 4px;text-align:center;background:var(--surface2);border-bottom:1px solid var(--border);border-right:1px solid var(--border);font-size:11px;color:var(--text4);} .sess-day-hd:last-child{border-right:none;} .sess-day-hd .sess-dnum{font-size:16px;font-weight:600;color:var(--text);margin-top:1px;} .sess-day-hd.today{background:rgba(var(--rgb-pur),0.08);} .sess-day-hd.today .sess-dnum{color:var(--pur-light);font-weight:700;} .sess-day-hd.today::after{content:'';display:block;width:20px;height:2px;background:var(--pur);border-radius:1px;margin:3px auto 0;} .sess-time{padding:2px 5px;font-size:10px;color:var(--text4);text-align:right;border-right:1px solid var(--border);background:var(--surface2);height:54px;display:flex;align-items:flex-start;justify-content:flex-end;font-family:'Space Mono',monospace;} .sess-cell{height:54px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);position:relative;cursor:pointer;padding:1px;} .sess-cell-past{background:rgba(var(--rgb-black),0.15);cursor:default;} /* Light-Mode: 15% schwarz auf weiß (#d9d9d9) liegt fast genau auf der Border-Farbe (--border #d1d1d6) → die Grid-Linien verschwinden. Leichteres Overlay + spürbar dunklerer Border pro Past-Cell. */ :root.light .sess-cell-past, :root[data-theme="light"] .sess-cell-past{background:rgba(60,60,67,0.07);border-right-color:rgba(60,60,67,0.22);border-bottom-color:rgba(60,60,67,0.22);} @media (prefers-color-scheme: light){ :root:not(.dark):not(.light) .sess-cell-past{background:rgba(60,60,67,0.07);border-right-color:rgba(60,60,67,0.22);border-bottom-color:rgba(60,60,67,0.22);} } .sess-day-hd.past{opacity:0.4;} .sess-time-past{opacity:0.4;} .sess-cell:nth-child(8n){border-right:none;} .sess-cell:hover{background:var(--surface2);} .sess-block{position:absolute;left:2px;right:2px;border-radius:6px;padding:3px 5px;font-size:10px;cursor:pointer;overflow:hidden;z-index:2;border-left:3px solid;transition:transform .1s;} .sess-block:hover{transform:scale(1.02);z-index:3;} .sess-block .sb-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sess-block .sb-time{font-size:9px;opacity:0.75;font-family:'Space Mono',monospace;} .sess-block.t-recording{background:rgba(var(--rgb-sess-recording),0.15);border-left-color:var(--sess-recording);color:var(--sess-recording-text);} .sess-block.t-mixing{background:rgba(var(--rgb-sess-mixing),0.15);border-left-color:var(--sess-mixing);color:var(--sess-mixing-text);} .sess-block.t-mastering{background:rgba(var(--rgb-sess-mastering),0.15);border-left-color:var(--sess-mastering);color:var(--sess-mastering-text);} .sess-block.t-meeting{background:rgba(var(--rgb-sess-meeting),0.15);border-left-color:var(--sess-meeting);color:var(--sess-meeting-text);} .sess-block.t-other{background:rgba(var(--rgb-a78bfa),0.15);border-left-color:var(--violet);color:var(--sess-other-text);} .sess-block.s-done{opacity:0.5;} /* Session list view */ .sess-list-item{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid var(--border);border-radius:10px;margin-bottom:8px;cursor:pointer;transition:border-color .15s;} .sess-list-item:hover{border-color:var(--bpur);} .sess-list-date{min-width:50px;text-align:center;} .sess-list-date .sld-day{font-size:20px;font-weight:600;color:var(--text);} .sess-list-date .sld-month{font-size:10px;color:var(--text4);text-transform:uppercase;} .sess-list-dot{width:4px;height:36px;border-radius:2px;flex-shrink:0;} .sess-list-info{flex:1;min-width:0;} .sess-list-title{font-size:13px;font-weight:600;color:var(--text);} .sess-list-meta{font-size:11px;color:var(--text4);margin-top:2px;} .sess-list-badge{font-size:10px;padding:3px 8px;border-radius:6px;font-weight:600;} /* Session modal */ .sess-modal-bg{position:fixed;inset:0;background:var(--overlay-bg);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;animation:sessOverlayIn .2s ease;} @keyframes sessOverlayIn{from{opacity:0}to{opacity:1}} .sess-modal{background:var(--surface);border:1px solid var(--border2);border-radius:16px;width:420px;max-width:100%;padding:28px;position:relative;box-shadow:0 8px 40px rgba(var(--rgb-black),0.5),0 0 80px rgba(var(--rgb-pur),0.08),inset 0 0 80px -40px rgba(var(--rgb-pur),0.06);animation:sessModalIn .3s cubic-bezier(0.34,1.56,0.64,1);} @keyframes sessModalIn{from{opacity:0;transform:scale(0.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}} .sess-modal h3{font-size:16px;font-weight:600;color:var(--text);margin:0 0 18px;} .sess-modal label{display:block;font-size:12px;color:var(--text3);margin-bottom:4px;margin-top:12px;} .sess-modal label:first-of-type{margin-top:0;} .sess-modal input,.sess-modal select,.sess-modal textarea{width:100%;padding:9px 12px;border:1px solid var(--border2);border-radius:8px;background:var(--surface2);color:var(--text);font-size:13px;font-family:'Inter',sans-serif;-webkit-appearance:none;-moz-appearance:none;appearance:none;} .sess-modal select{background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' fill='none' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;cursor:pointer;} .sess-modal select:focus{border-color:var(--pur-light);outline:none;} .sess-modal textarea{resize:vertical;min-height:60px;} .sess-modal-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .sess-modal-actions{display:flex;gap:8px;margin-top:20px;} .sess-modal-actions button{flex:1;} /* Custom time picker */ .tp{position:relative;} .tp-val{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:var(--surface2);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-size:13px;cursor:pointer;font-family:'Inter',sans-serif;user-select:none;} .tp-list{display:none;position:absolute;top:100%;left:0;right:0;max-height:180px;overflow-y:auto;background:var(--surface);border:1px solid var(--border2);border-radius:8px;z-index:50;margin-top:4px;padding:4px;scrollbar-width:thin;scrollbar-color:rgba(var(--rgb-pur),0.3) transparent;} .tp-list::-webkit-scrollbar{width:4px;} .tp-list::-webkit-scrollbar-track{background:transparent;} .tp-list::-webkit-scrollbar-thumb{background:rgba(var(--rgb-pur),0.3);border-radius:4px;} .tp-list::-webkit-scrollbar-thumb:hover{background:rgba(var(--rgb-pur),0.5);} .tp.open .tp-list{display:block;} .tp-opt{padding:7px 12px;cursor:pointer;font-size:13px;color:var(--text3);border-radius:6px;font-family:'Inter',sans-serif;transition:background .1s;} .tp-opt:hover{background:rgba(var(--rgb-pur),0.12);color:var(--text);} .tp-opt.sel{color:var(--pur-light);font-weight:600;background:rgba(var(--rgb-pur),0.08);} /* Session detail popup */ .sess-detail-bg{position:fixed;inset:0;background:var(--overlay-bg);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;animation:sessOverlayIn .2s ease;} .sess-detail{background:var(--surface);border:1px solid var(--border2);border-radius:16px;width:380px;max-width:100%;padding:28px;position:relative;box-shadow:0 8px 40px rgba(var(--rgb-black),0.5),0 0 80px rgba(var(--rgb-pur),0.08),inset 0 0 80px -40px rgba(var(--rgb-pur),0.06);animation:sessModalIn .3s cubic-bezier(0.34,1.56,0.64,1);} .sess-detail h3{font-size:16px;font-weight:600;color:var(--text);margin:0 0 16px;} .sess-detail-row{display:flex;justify-content:space-between;padding:7px 0;font-size:13px;border-bottom:1px solid var(--border);} .sess-detail-row:last-of-type{border:none;} .sess-detail-lbl{color:var(--text4);} .sess-detail-val{font-weight:500;color:var(--text);text-align:right;max-width:60%;} .sess-detail-actions{display:flex;gap:8px;margin-top:18px;} .sess-detail-actions button{flex:1;} /* Month view */ .sess-month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--border);border-radius:12px;overflow:hidden;} .sess-month-hd{padding:8px 4px;text-align:center;background:var(--surface2);border-bottom:1px solid var(--border);border-right:1px solid var(--border);font-size:11px;font-weight:600;color:var(--text4);} .sess-month-hd:nth-child(7){border-right:none;} .sess-month-day{min-height:80px;padding:4px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);cursor:pointer;} .sess-month-day:nth-child(7n){border-right:none;} .sess-month-day:hover{background:var(--surface2);} .sess-month-day.outside{opacity:0.3;} .sess-month-day.today{background:rgba(var(--rgb-pur),0.06);} .sess-month-dnum{font-size:12px;font-weight:500;color:var(--text);margin-bottom:2px;} .sess-month-dot{width:100%;height:4px;border-radius:2px;margin-bottom:2px;} .sess-month-pill{font-size:9px;padding:1px 4px;border-radius:3px;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} @media(max-width:768px){ .sess-stats{grid-template-columns:repeat(4,1fr);gap:6px;} .sess-stat{background:none;border-radius:0;padding:0;text-align:center;border-right:1px solid var(--border);padding-right:6px;} .sess-stat:last-child{border-right:none;padding-right:0;} .sess-grid{grid-template-columns:40px repeat(7,minmax(0,1fr));} .sess-cell,.sess-time{height:32px;} #sessions-content{height:calc(100vh - 220px);} .sess-time{font-size:9px;padding:2px 3px;} .sess-block .sb-title{font-size:9px;} .sess-block .sb-time{display:none;} .sess-nav-lbl{min-width:120px;font-size:12px;} .sess-month-day{min-height:50px;} } /* Studio Delivery upload progress */ .upload-progress{display:none;margin-top:8px;} .upload-progress.show{display:block;} .up-bar{height:2px;background:var(--border);overflow:hidden;border-radius:1px;} .up-fill{height:100%;background:var(--grad);width:0%;transition:width 0.2s;} .up-txt{font-size:11px;color:var(--text4);font-family:'Space Mono',monospace;margin-top:4px;letter-spacing:0.5px;} /* Delivery Upload Overlay */ #dlv-overlay{display:none;position:fixed;inset:0;z-index:9999;background:rgba(var(--rgb-black),0.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);align-items:center;justify-content:center;} .dlv-overlay-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:32px 40px;text-align:center;max-width:380px;width:90%;box-shadow:0 20px 60px rgba(var(--rgb-black),0.5);} .dlv-overlay-spinner{width:40px;height:40px;margin:0 auto 16px;border:3px solid var(--border);border-top-color:var(--pur-light);border-radius:50%;animation:dlv-spin 0.8s linear infinite;} @keyframes dlv-spin{to{transform:rotate(360deg)}} .dlv-overlay-name{font-size:14px;color:var(--text-bright);font-weight:600;margin-bottom:16px;word-break:break-all;max-height:40px;overflow:hidden;text-overflow:ellipsis;} .dlv-overlay-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:10px;} .dlv-overlay-fill{height:100%;background:var(--grad);width:0%;transition:width 0.3s ease;border-radius:2px;} .dlv-overlay-txt{font-size:13px;color:var(--pur-light);font-family:'Space Mono',monospace;} /* ═══════════════════════════════════════════════════════════════════════════ LIGHT MODE — Element-spezifische Overrides Wird angewendet wenn .light Klasse ODER (System-Light UND nicht .dark) aktiv. ─────────────────────────────────────────────────────────────────────────── */ :is(:root.light, :root[data-theme="light"], :root:not(.dark):not(.light):where(:root)) { /* dummy selector, echte Rules unten */ } /* Logo: weißes "Cue" + lila Gradient — im Light Mode mit invert+hue-rotate das Weiß zu Schwarz drehen, Gradient bleibt lila */ :root.light .ls-logo img, :root.light .auth-logo-img img, :root.light .logo-cueport img, :root[data-theme="light"] .ls-logo img, :root[data-theme="light"] .auth-logo-img img, :root[data-theme="light"] .logo-cueport img { filter: invert(1) hue-rotate(180deg); } @media (prefers-color-scheme: light) { :root:not(.dark):not(.light) .ls-logo img, :root:not(.dark):not(.light) .auth-logo-img img, :root:not(.dark):not(.light) .logo-cueport img { filter: invert(1) hue-rotate(180deg); } } /* Kräftigere Schatten für Karten — im Light Mode essentiell für Elevation, während im Dark Mode Borders + dunkler Hintergrund das Trennen reichen. Mehrstufiger Schatten-Stack (Tailwind/Material-inspiriert): eng + weit, für weiche Tiefe ohne harten Kontrast. */ :root.light .stat-card, :root.light .dash-card, :root.light .artist-card, :root.light .prod-card, :root.light .pl-card, :root.light .pld-section, :root.light .info-panel, :root.light .steps-block, :root.light .prog-summary, :root.light .modal, :root.light .auth-card, :root.light .dash-cfg-modal, :root[data-theme="light"] .stat-card, :root[data-theme="light"] .dash-card, :root[data-theme="light"] .artist-card, :root[data-theme="light"] .prod-card, :root[data-theme="light"] .pl-card, :root[data-theme="light"] .pld-section, :root[data-theme="light"] .info-panel, :root[data-theme="light"] .steps-block, :root[data-theme="light"] .prog-summary, :root[data-theme="light"] .modal, :root[data-theme="light"] .auth-card, :root[data-theme="light"] .dash-cfg-modal { box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 8px rgba(0,0,0,0.04), 0 8px 24px -4px rgba(0,0,0,0.06); } /* Hover-States mit verstärktem Shadow für Interaktivitäts-Gefühl */ :root.light .stat-card:hover, :root.light .dash-card:hover, :root.light .artist-card:hover, :root.light .pl-card:hover, :root[data-theme="light"] .stat-card:hover, :root[data-theme="light"] .dash-card:hover, :root[data-theme="light"] .artist-card:hover, :root[data-theme="light"] .pl-card:hover { box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 8px 16px rgba(0,0,0,0.06), 0 16px 32px -8px rgba(0,0,0,0.08); } @media (prefers-color-scheme: light) { :root:not(.dark):not(.light) .stat-card, :root:not(.dark):not(.light) .dash-card, :root:not(.dark):not(.light) .artist-card, :root:not(.dark):not(.light) .prod-card, :root:not(.dark):not(.light) .pl-card, :root:not(.dark):not(.light) .pld-section, :root:not(.dark):not(.light) .info-panel, :root:not(.dark):not(.light) .steps-block, :root:not(.dark):not(.light) .prog-summary, :root:not(.dark):not(.light) .modal, :root:not(.dark):not(.light) .auth-card, :root:not(.dark):not(.light) .dash-cfg-modal { box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 8px rgba(0,0,0,0.04), 0 8px 24px -4px rgba(0,0,0,0.06); } :root:not(.dark):not(.light) .stat-card:hover, :root:not(.dark):not(.light) .dash-card:hover, :root:not(.dark):not(.light) .artist-card:hover, :root:not(.dark):not(.light) .pl-card:hover { box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 8px 16px rgba(0,0,0,0.06), 0 16px 32px -8px rgba(0,0,0,0.08); } } /* ═══════════════════════════════════════════════════════════════════════════ LIGHT MODE — BOLD DEPTH (Stripe/Vercel/Linear inspiriert) Pronouncierte Tiefe durch große Farborbs, starke Shadows, Glass-Effects. ─────────────────────────────────────────────────────────────────────────── */ /* Light Mode: solider Hintergrund. Die ursprünglich hier verwendeten radial-gradient Orbs via position:fixed Pseudo-Element wurden entfernt weil sie auf älteren Android Chrome Versions das Scrolling blockierten. Depth kommt nun ausschließlich über Card-Shadows. */ :root.light body, :root[data-theme="light"] body { background: var(--bg); } /* (Grain-Textur via body::after entfernt — machte auf älteren Android- Geräten das Scrolling kaputt) */ /* Karten: STARKE Shadows mit Lila-Tint + Gradient + Glass-Edge */ :root.light .stat-card, :root.light .dash-card, :root.light .artist-card, :root.light .pl-card, :root.light .pld-section, :root.light .info-panel, :root.light .steps-block, :root.light .prog-summary, :root.light .auth-card, :root.light .prod-card, :root.light .modal, :root.light .dash-cfg-modal, :root[data-theme="light"] .stat-card, :root[data-theme="light"] .dash-card, :root[data-theme="light"] .artist-card, :root[data-theme="light"] .pl-card, :root[data-theme="light"] .pld-section, :root[data-theme="light"] .info-panel, :root[data-theme="light"] .steps-block, :root[data-theme="light"] .prog-summary, :root[data-theme="light"] .auth-card, :root[data-theme="light"] .prod-card, :root[data-theme="light"] .modal, :root[data-theme="light"] .dash-cfg-modal { background: linear-gradient(160deg, #ffffff 0%, #faf7ff 50%, #f3efff 100%); border: 1px solid rgba(209,213,219,0.6); box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 2px 4px rgba(17,24,39,0.04), 0 8px 16px -4px rgba(17,24,39,0.08), 0 24px 48px -12px rgba(109,40,217,0.18), 0 -1px 0 rgba(109,40,217,0.04) inset; } /* Hover: noch mehr Lift (wie in Stripe Dashboard) */ :root.light .stat-card:hover, :root.light .dash-card:hover, :root.light .artist-card:hover, :root.light .pl-card:hover, :root[data-theme="light"] .stat-card:hover, :root[data-theme="light"] .dash-card:hover, :root[data-theme="light"] .artist-card:hover, :root[data-theme="light"] .pl-card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 4px 8px rgba(17,24,39,0.06), 0 16px 32px -4px rgba(17,24,39,0.1), 0 40px 80px -16px rgba(109,40,217,0.28); transform: translateY(-2px); } /* Primary Buttons: Lila "Glow" effect wie Linear */ :root.light .btn-pur, :root.light .auth-submit, :root.light .auth-tab.active, :root[data-theme="light"] .btn-pur, :root[data-theme="light"] .auth-submit, :root[data-theme="light"] .auth-tab.active { box-shadow: 0 1px 2px rgba(17,24,39,0.1), 0 4px 12px rgba(109,40,217,0.35), 0 12px 24px -4px rgba(109,40,217,0.25), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.15); } :root.light .btn-pur:hover, :root.light .auth-submit:hover, :root[data-theme="light"] .btn-pur:hover, :root[data-theme="light"] .auth-submit:hover { box-shadow: 0 2px 4px rgba(17,24,39,0.15), 0 8px 20px rgba(109,40,217,0.45), 0 20px 40px -6px rgba(109,40,217,0.35), inset 0 1px 0 rgba(255,255,255,0.3); } /* Form-Inputs mit pronouncierter Vertiefung */ :root.light .form-inp, :root.light .form-sel, :root.light .form-ta, :root.light .at-search, :root.light .s-inp, :root[data-theme="light"] .form-inp, :root[data-theme="light"] .form-sel, :root[data-theme="light"] .form-ta, :root[data-theme="light"] .at-search, :root[data-theme="light"] .s-inp { background: #ffffff; border-color: rgba(209,213,219,0.9); box-shadow: inset 0 2px 4px rgba(17,24,39,0.06), inset 0 0 0 1px rgba(17,24,39,0.02); } :root.light .form-inp:focus, :root.light .form-sel:focus, :root.light .form-ta:focus, :root.light .at-search:focus, :root[data-theme="light"] .form-inp:focus, :root[data-theme="light"] .form-sel:focus, :root[data-theme="light"] .form-ta:focus, :root[data-theme="light"] .at-search:focus { box-shadow: inset 0 2px 4px rgba(17,24,39,0.04), 0 0 0 4px rgba(109,40,217,0.12), 0 4px 12px rgba(109,40,217,0.08); border-color: var(--pur); } /* Sidebar: vollwertige Glass-Optik */ :root.light .sidebar, :root[data-theme="light"] .sidebar { background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(250,250,252,0.75) 100%); backdrop-filter: blur(24px) saturate(200%); -webkit-backdrop-filter: blur(24px) saturate(200%); border-right-color: rgba(209,213,219,0.4); box-shadow: 1px 0 3px rgba(17,24,39,0.04), 4px 0 20px -4px rgba(109,40,217,0.08); } /* Topbar: Glass + Bottom-Shadow Alpha bewusst <=0.6, damit Safari 26 die URL-Bar als Liquid-Glass-Pill rendert (ab ~0.7 opak kippt Safari's Toolbar-Sampling auf "solid"). */ :root.light .topbar, :root[data-theme="light"] .topbar { background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(250,250,252,0.5) 100%); backdrop-filter: blur(24px) saturate(200%); -webkit-backdrop-filter: blur(24px) saturate(200%); border-bottom-color: rgba(209,213,219,0.4); box-shadow: 0 1px 3px rgba(17,24,39,0.04), 0 4px 20px -4px rgba(109,40,217,0.06); } /* Mehr-Menu Icon-Buttons im Light Mode: solider Lila-Gradient analog zum aktiven Bottom-Nav-Button (.mob-nav-btn.active). Dark Mode bleibt bei der transluzenten 0.25/0.45-Version (siehe @media max-width:768px). */ :root.light .mob-menu-icon, :root[data-theme="light"] .mob-menu-icon { background: linear-gradient(145deg, rgba(123,69,200,0.5), rgba(76,29,149,0.8)); color: #fff; box-shadow: 0 4px 12px rgba(123,69,200,0.4), 0 2px 4px rgba(0,0,0,0.1), inset 0 1px 1px rgba(255,255,255,0.2), 0 0 20px rgba(123,69,200,0.15); } :root.light .mob-menu-btn:active .mob-menu-icon, :root[data-theme="light"] .mob-menu-btn:active .mob-menu-icon { background: linear-gradient(145deg, rgba(123,69,200,0.7), rgba(76,29,149,0.95)); box-shadow: 0 4px 14px rgba(123,69,200,0.5), inset 0 1px 1px rgba(255,255,255,0.25); } :root.light .mob-menu-btn, :root[data-theme="light"] .mob-menu-btn { color: var(--text); } /* Sidebar nav-btn.active mit Lila-Glow */ :root.light .nav-btn.active, :root[data-theme="light"] .nav-btn.active { background: linear-gradient(135deg, rgba(109,40,217,0.12), rgba(124,58,237,0.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 8px rgba(109,40,217,0.15); border-color: rgba(109,40,217,0.3); } /* Badges mit kräftigem Shadow für "lifted Chip"-Feel */ :root.light .badge, :root.light .feat-chip, :root[data-theme="light"] .badge, :root[data-theme="light"] .feat-chip { box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 2px rgba(17,24,39,0.08), 0 2px 4px rgba(17,24,39,0.04); } /* Cover Image mit Foto-Schatten */ :root.light .cover-img, :root[data-theme="light"] .cover-img { box-shadow: 0 2px 6px rgba(17,24,39,0.15), 0 12px 28px -6px rgba(17,24,39,0.2), 0 24px 48px -12px rgba(109,40,217,0.15); } /* Modal-Overlay mit stärkerem Blur */ :root.light .modal-overlay, :root[data-theme="light"] .modal-overlay { background: rgba(17,24,39,0.4); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); } /* Play-Buttons (swf-play, upl-btn) mit extra Glow */ :root.light .swf-play, :root.light .upl-btn, :root[data-theme="light"] .swf-play, :root[data-theme="light"] .upl-btn { box-shadow: 0 1px 2px rgba(17,24,39,0.12), 0 4px 12px rgba(109,40,217,0.4), 0 8px 20px -4px rgba(109,40,217,0.3), inset 0 1px 0 rgba(255,255,255,0.3); } /* Stats-Icons etc. - kleine farbige Akzent-Kreise mit Tiefe */ :root.light .logo-emblem, :root.light .studio-av, :root.light .ac-av, :root[data-theme="light"] .logo-emblem, :root[data-theme="light"] .studio-av, :root[data-theme="light"] .ac-av { box-shadow: 0 2px 4px rgba(17,24,39,0.08), 0 8px 16px -4px rgba(109,40,217,0.2); } /* System-Preference Fallback */ @media (prefers-color-scheme: light) { :root:not(.dark):not(.light) body { background: var(--bg); } :root:not(.dark):not(.light) .stat-card, :root:not(.dark):not(.light) .dash-card, :root:not(.dark):not(.light) .artist-card, :root:not(.dark):not(.light) .pl-card, :root:not(.dark):not(.light) .pld-section, :root:not(.dark):not(.light) .info-panel, :root:not(.dark):not(.light) .steps-block, :root:not(.dark):not(.light) .prog-summary, :root:not(.dark):not(.light) .auth-card, :root:not(.dark):not(.light) .prod-card, :root:not(.dark):not(.light) .modal, :root:not(.dark):not(.light) .dash-cfg-modal { background: linear-gradient(160deg, #ffffff 0%, #faf7ff 50%, #f3efff 100%); border: 1px solid rgba(209,213,219,0.6); box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 2px 4px rgba(17,24,39,0.04), 0 8px 16px -4px rgba(17,24,39,0.08), 0 24px 48px -12px rgba(109,40,217,0.18); } :root:not(.dark):not(.light) .btn-pur, :root:not(.dark):not(.light) .auth-submit { box-shadow: 0 1px 2px rgba(17,24,39,0.1), 0 4px 12px rgba(109,40,217,0.35), 0 12px 24px -4px rgba(109,40,217,0.25), inset 0 1px 0 rgba(255,255,255,0.25); } :root:not(.dark):not(.light) .sidebar { background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(250,250,252,0.75) 100%); backdrop-filter: blur(24px) saturate(200%); -webkit-backdrop-filter: blur(24px) saturate(200%); box-shadow: 0 1px 3px rgba(17,24,39,0.04), 0 4px 20px -4px rgba(109,40,217,0.06); } :root:not(.dark):not(.light) .topbar { background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(250,250,252,0.5) 100%); backdrop-filter: blur(24px) saturate(200%); -webkit-backdrop-filter: blur(24px) saturate(200%); box-shadow: 0 1px 3px rgba(17,24,39,0.04), 0 4px 20px -4px rgba(109,40,217,0.06); } /* Mehr-Menu Icon-Buttons im System-Light (siehe .light Override oben) */ :root:not(.dark):not(.light) .mob-menu-icon { background: linear-gradient(145deg, rgba(123,69,200,0.5), rgba(76,29,149,0.8)); color: #fff; box-shadow: 0 4px 12px rgba(123,69,200,0.4), 0 2px 4px rgba(0,0,0,0.1), inset 0 1px 1px rgba(255,255,255,0.2), 0 0 20px rgba(123,69,200,0.15); } :root:not(.dark):not(.light) .mob-menu-btn:active .mob-menu-icon { background: linear-gradient(145deg, rgba(123,69,200,0.7), rgba(76,29,149,0.95)); box-shadow: 0 4px 14px rgba(123,69,200,0.5), inset 0 1px 1px rgba(255,255,255,0.25); } :root:not(.dark):not(.light) .mob-menu-btn { color: var(--text); } :root:not(.dark):not(.light) .form-inp, :root:not(.dark):not(.light) .form-sel, :root:not(.dark):not(.light) .form-ta, :root:not(.dark):not(.light) .at-search { background: #ffffff; box-shadow: inset 0 2px 4px rgba(17,24,39,0.06); } :root:not(.dark):not(.light) .nav-btn.active { background: linear-gradient(135deg, rgba(109,40,217,0.12), rgba(124,58,237,0.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 8px rgba(109,40,217,0.15); } :root:not(.dark):not(.light) .cover-img { box-shadow: 0 2px 6px rgba(17,24,39,0.15), 0 12px 28px -6px rgba(17,24,39,0.2), 0 24px 48px -12px rgba(109,40,217,0.15); } } /* (entfernt: position:relative Override auf .topbar brach die position:sticky Basis-Regel → Topbar scrollte weg statt oben zu bleiben. Die Regel wurde ursprünglich gebraucht damit Content über body::after Grain-Texture liegt, aber der Grain-Texture wurde entfernt.) */ /* ── THEME PICKER (Segmented Control) ────────────────────────────────────── */ .theme-picker{ display:inline-flex; gap:0; padding:3px; background:var(--surface2); border:1px solid var(--border); border-radius:12px; box-shadow: inset 0 1px 3px rgba(var(--rgb-black),0.08); } .theme-btn{ display:inline-flex;align-items:center;gap:6px; padding:8px 14px; background:transparent; border:none; border-radius:9px; color:var(--text3); font-family:'Inter',sans-serif; font-size:13px;font-weight:500; cursor:pointer; transition:all 0.15s ease; white-space:nowrap; } .theme-btn:hover{color:var(--text2);} .theme-btn.active{ background:var(--surface); color:var(--pur-light); box-shadow: 0 1px 2px rgba(var(--rgb-black),0.05), 0 2px 6px rgba(var(--rgb-pur),0.15); font-weight:600; } .theme-btn svg{width:15px;height:15px;flex-shrink:0;} .theme-picker-row{ display:flex;align-items:center;justify-content:space-between; gap:16px;padding:10px 0; flex-wrap:wrap; } .theme-picker-label{ font-size:14px;color:var(--text2);font-weight:500; font-family:'Inter',sans-serif; } .theme-picker-hint{ font-size:12px;color:var(--text4);margin-top:6px; font-family:'Space Mono',monospace;letter-spacing:0.3px; } /* ── WHAT'S NEW BANNER ───────────────────────────────────────────────────── */ .wn-overlay{display:none;position:fixed;inset:0;z-index:1000;background:var(--overlay-bg);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);align-items:flex-end;justify-content:center;opacity:0;transition:opacity 0.25s;} .wn-overlay.show{display:flex;opacity:1;} @media(min-width:600px){.wn-overlay{align-items:center;}} .wn-card{background:var(--surface);border:1px solid var(--border);border-radius:20px 20px 0 0;padding:28px 24px 24px;width:100%;max-width:460px;max-height:85vh;overflow-y:auto;position:relative;transform:translateY(20px);transition:transform 0.25s;} .wn-overlay.show .wn-card{transform:translateY(0);} @media(min-width:600px){.wn-card{border-radius:20px;}} .wn-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--text4);font-size:22px;cursor:pointer;padding:4px;line-height:1;} .wn-header{text-align:center;margin-bottom:20px;} .wn-logo{font-size:32px;margin-bottom:8px;} .wn-title{font-size:20px;font-weight:700;color:var(--text-bright);font-family:'Inter',sans-serif;letter-spacing:-0.3px;} .wn-sub{font-size:13px;color:var(--text3);margin-top:4px;} .wn-items{display:flex;flex-direction:column;gap:12px;margin-bottom:20px;} .wn-item{display:flex;gap:12px;padding:12px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;} .wn-item-icon{font-size:20px;flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(var(--rgb-pur),0.1);border-radius:10px;color:var(--pur-light);} .wn-item-body{flex:1;min-width:0;} .wn-item-title{font-size:14px;font-weight:600;color:var(--text-bright);margin-bottom:2px;} .wn-item-desc{font-size:12px;color:var(--text3);line-height:1.4;} .wn-btn{width:100%;padding:14px;background:var(--grad-btn);border:none;border-radius:12px;color:var(--text-on-accent);font-size:15px;font-weight:600;cursor:pointer;transition:opacity 0.15s;font-family:'Inter',sans-serif;box-shadow:0 2px 12px rgba(var(--rgb-pur),0.4);} .wn-btn:hover{opacity:0.9;} /* ── QUICK THEME TOGGLE (oben rechts) ───────────────────────────────────── */ .theme-quick-toggle{ display:inline-flex;align-items:center;justify-content:center; width:36px;height:36px; border-radius:10px;border:1px solid var(--border); background:var(--surface2);color:var(--text2); cursor:pointer;flex-shrink:0; transition:all 0.15s ease; padding:0; } .theme-quick-toggle:hover{ background:var(--surface3);color:var(--pur-light); border-color:var(--bpur); } .theme-quick-toggle svg{width:18px;height:18px;} /* Default (dark mode): zeige Sonne → klick = light */ .theme-quick-toggle .tqt-moon{display:none;} .theme-quick-toggle .tqt-sun{display:block;} /* is-light class gesetzt wenn effective theme light → zeige Mond → klick = dark */ .theme-quick-toggle.is-light .tqt-moon{display:block;} .theme-quick-toggle.is-light .tqt-sun{display:none;} /* ── TUTORIAL / SPOTLIGHT SYSTEM ────────────────────────────────────────── */ .tutorial-dim{ position:fixed;inset:0;z-index:9990; background:rgba(0,0,0,0.55); pointer-events:none; opacity:0; transition:opacity 0.25s ease; } .tutorial-dim.show{opacity:1;} /* Highlighted Element sticht heraus */ .tutorial-spotlight{ position:relative; z-index:9995 !important; border-radius:12px; box-shadow: 0 0 0 3px var(--pur-light), 0 0 0 8px rgba(var(--rgb-pur),0.35), 0 10px 40px rgba(var(--rgb-pur),0.5) !important; animation:tutorialPulse 1.8s ease-in-out infinite; } @keyframes tutorialPulse{ 0%,100%{box-shadow:0 0 0 3px var(--pur-light),0 0 0 8px rgba(var(--rgb-pur),0.35),0 10px 40px rgba(var(--rgb-pur),0.5);} 50%{box-shadow:0 0 0 5px var(--pur),0 0 0 14px rgba(var(--rgb-pur),0.2),0 14px 50px rgba(var(--rgb-pur),0.7);} } /* Tooltip mit Anweisungstext */ .tutorial-tooltip{ position:fixed;z-index:9996; background:var(--pur); color:var(--text-on-accent); padding:12px 16px; border-radius:10px; font-family:'Inter',sans-serif; font-size:14px;font-weight:500; max-width:280px; box-shadow:0 8px 32px rgba(var(--rgb-pur),0.4); animation:tutorialTooltipIn 0.3s cubic-bezier(0.22,1,0.36,1) both; pointer-events:auto; } .tutorial-tooltip::before{ content:'';position:absolute; width:10px;height:10px; background:var(--pur); transform:rotate(45deg); } .tutorial-tooltip.pos-bottom::before{top:-5px;left:var(--tut-arrow-x,calc(50% - 5px));} .tutorial-tooltip.pos-top::before{bottom:-5px;left:var(--tut-arrow-x,calc(50% - 5px));} .tutorial-tooltip.pos-left::before{right:-5px;top:var(--tut-arrow-y,calc(50% - 5px));} .tutorial-tooltip.pos-right::before{left:-5px;top:var(--tut-arrow-y,calc(50% - 5px));} .tutorial-tooltip-close{ background:none;border:none;color:rgba(255,255,255,0.7); font-size:12px;cursor:pointer;padding:4px 0 0;margin-top:4px; text-decoration:underline;font-family:inherit;display:block; } .tutorial-tooltip-close:hover{color:#fff;} .tutorial-tooltip-next{ display:inline-block; background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.28); color:#fff; font-size:13px;font-weight:600; padding:6px 12px;border-radius:8px; cursor:pointer;font-family:inherit; margin-top:10px; transition:background 0.15s; } .tutorial-tooltip-next:hover{background:rgba(255,255,255,0.28);} .tut-msg{line-height:1.4;} /* Modal über Tutorial-Dim heben */ .modal-overlay.tutorial-lift, .lyrics-modal-bg.tutorial-lift, #mobile-nav.tutorial-lift, .mob-more-menu.tutorial-lift{z-index:9991 !important;} /* Während der Tour soll der Tutorial-Dim die Sicht-Reduktion machen — der eigene Backdrop-Blur des Modal-Overlays liegt sonst über dem Dim und verwischt auch das Spotlight-Element. */ .modal-overlay.tutorial-lift{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;background:transparent !important;} @keyframes tutorialTooltipIn{ from{opacity:0;transform:translateY(8px) scale(0.95);} to{opacity:1;transform:translateY(0) scale(1);} } /* What's New: sekundärer CTA (öffnet Tipps & Tricks Hub) */ .wn-btn-secondary{ width:100%; padding:12px; margin-bottom:10px; background:rgba(var(--rgb-pur),0.12); border:1px solid rgba(var(--rgb-pur),0.3); color:var(--pur-light); border-radius:12px; font-size:14px;font-weight:600; font-family:'Inter',sans-serif; cursor:pointer; transition:all 0.15s ease; } .wn-btn-secondary:hover{ background:rgba(var(--rgb-pur),0.2); border-color:var(--pur-light); } /* Tipps & Tricks Hub (wiederverwendet .wn-overlay / .wn-card) */ .th-tiles{display:flex;flex-direction:column;gap:10px;margin-bottom:8px;} .th-tile{ display:flex;align-items:center;gap:12px; padding:14px;width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:12px; cursor:pointer; font-family:'Inter',sans-serif; text-align:left; transition:all 0.15s ease; } .th-tile:hover{ background:rgba(var(--rgb-pur),0.08); border-color:rgba(var(--rgb-pur),0.4); transform:translateY(-1px); } .th-tile:active{transform:translateY(0);} .th-tile-icon{ font-size:22px; width:42px;height:42px;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:rgba(var(--rgb-pur),0.12); border-radius:10px; color:var(--pur-light); } .th-tile-body{flex:1;min-width:0;} .th-tile-title{font-size:14px;font-weight:600;color:var(--text-bright);margin-bottom:2px;} .th-tile-desc{font-size:12px;color:var(--text3);line-height:1.4;} .th-tile-arrow{font-size:22px;color:var(--text4);flex-shrink:0;line-height:1;} .th-section{display:flex;flex-direction:column;gap:8px;margin-top:18px;} .th-section:first-of-type{margin-top:6px;} .th-section-lbl{ font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase; color:var(--text4);padding:0 2px;line-height:1.4; } /* ── PLAN BADGE / STORAGE BAR / UPGRADE MODAL (Phase B2) ────────────────── */ .plan-badge{ display:inline-flex;align-items:center;gap:6px; padding:3px 10px;border-radius:999px; font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase; font-family:Nunito,sans-serif;line-height:1.6; width:fit-content; } .plan-badge.plan-free{background:rgba(var(--rgb-pur),0.12);color:var(--text3);border:1px solid rgba(var(--rgb-pur),0.25);} .plan-badge.plan-pro{background:linear-gradient(135deg,rgba(var(--rgb-pur),0.25),rgba(var(--rgb-pur),0.15));color:var(--pur-light);border:1px solid rgba(var(--rgb-pur),0.4);} .plan-badge.plan-studio{background:linear-gradient(135deg,var(--pur-accent),var(--pur-deep));color:var(--text-on-accent);border:none;} .plan-badge.plan-grandfathered{background:linear-gradient(135deg,rgba(245,158,11,0.25),rgba(217,119,6,0.15));color:#fbbf24;border:1px solid rgba(245,158,11,0.4);} .storage-bar-wrap{display:flex;flex-direction:column;gap:6px;padding:12px 14px;background:var(--surface2);border-radius:10px;border:1px solid var(--border);} .storage-bar-label{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--text3);font-family:Nunito,sans-serif;} .storage-bar-label > :first-child{font-weight:600;letter-spacing:0.04em;text-transform:uppercase;font-size:11px;} .storage-bar-label .storage-bar-text{font-family:'Space Mono',monospace;color:var(--text2);font-size:12px;} .storage-bar-track{height:6px;background:rgba(var(--rgb-pur),0.1);border-radius:3px;overflow:hidden;} .storage-bar-fill{height:100%;width:0%;border-radius:3px;transition:width 0.4s ease,background 0.3s ease;} .storage-bar-fill.ok{background:linear-gradient(90deg,#10b981,#34d399);} .storage-bar-fill.warn{background:linear-gradient(90deg,#f59e0b,#fbbf24);} .storage-bar-fill.crit{background:linear-gradient(90deg,#ef4444,#f87171);} .plan-upgrade-modal-overlay{ position:fixed;inset:0;display:none;align-items:center;justify-content:center; background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);z-index:9000; padding:20px; } .plan-upgrade-modal-box{ background:var(--surface);border:1px solid var(--border);border-radius:14px; padding:28px 26px 22px;width:420px;max-width:96vw;text-align:center; } .plan-upgrade-icon{ width:48px;height:48px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--pur-accent),var(--pur-deep)); color:var(--text-on-accent);border-radius:12px; } .plan-upgrade-title{font-size:17px;font-weight:600;color:var(--text);margin-bottom:10px;font-family:var(--serif);} .plan-upgrade-body{font-size:14px;color:var(--text2);line-height:1.5;font-family:Nunito,sans-serif;margin-bottom:18px;} .plan-upgrade-note{font-size:12px;color:var(--text3);background:rgba(var(--rgb-pur),0.08);border:1px solid rgba(var(--rgb-pur),0.2);border-radius:8px;padding:10px 12px;margin-bottom:18px;} .plan-upgrade-actions{display:flex;gap:10px;justify-content:center;} .plan-upgrade-btn-primary{ padding:10px 28px;border-radius:24px;border:none;cursor:pointer; background:linear-gradient(135deg,var(--pur-accent),var(--pur-deep)); color:var(--text-on-accent);font-family:Nunito,sans-serif;font-size:13px;font-weight:600; } .plan-upgrade-btn-primary:hover{filter:brightness(1.1);} /* Plan cards inside the upgrade modal (Phase B3). Compact version of the subscription-tab cards — fewer features, focused on the value prop. */ .plan-upgrade-modal-box-wide{width:640px;} .plan-upgrade-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 8px;} @media(max-width:600px){.plan-upgrade-cards{grid-template-columns:1fr;}.plan-upgrade-modal-box-wide{width:auto;}} .puc{position:relative;padding:16px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;gap:8px;text-align:left;} .puc-featured{border-color:rgba(var(--rgb-pur),0.5);background:linear-gradient(180deg,rgba(var(--rgb-pur),0.06),var(--surface2));} .puc-badge{position:absolute;top:-8px;right:12px;padding:2px 9px;border-radius:999px;background:linear-gradient(135deg,var(--pur-accent),var(--pur-deep));color:var(--text-on-accent);font-size:9px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;font-family:Nunito,sans-serif;} .puc-name{font-size:13px;font-weight:600;color:var(--text);font-family:var(--serif,Outfit);letter-spacing:0.02em;} .puc-price{font-size:20px;font-weight:700;color:var(--text);font-family:var(--serif,Outfit);} .puc-per{font-size:11px;color:var(--text3);font-weight:400;margin-left:2px;} .puc-feats{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--text2);font-family:Nunito,sans-serif;line-height:1.4;flex:1;} .puc-feats li{position:relative;padding-left:16px;} .puc-feats li::before{content:'✓';position:absolute;left:0;top:0;color:var(--pur-light);font-weight:700;font-size:11px;} .puc-btn{margin-top:6px;padding:8px 14px;border-radius:20px;border:1px solid rgba(var(--rgb-pur),0.4);background:transparent;color:var(--pur-light);font-family:Nunito,sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.15s ease;} .puc-btn:hover{background:rgba(var(--rgb-pur),0.1);border-color:rgba(var(--rgb-pur),0.6);} .puc-btn-featured{background:linear-gradient(135deg,var(--pur-accent),var(--pur-deep));color:var(--text-on-accent);border-color:transparent;} .puc-btn-featured:hover{filter:brightness(1.1);} /* ── SUBSCRIPTION VIEW (Phase C2) ────────────────────────────────────────── */ .sub-current-card{padding:14px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;margin-bottom:18px;} .sub-current-loading{font-size:13px;color:var(--text3);font-family:Nunito,sans-serif;} .sub-current-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;} .sub-current-label{font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--text3);font-family:Nunito,sans-serif;margin-bottom:6px;} .sub-current-plan{display:flex;gap:8px;align-items:center;} .sub-meta{font-size:12px;color:var(--text3);font-family:'Space Mono',monospace;margin-top:6px;} .sub-status{display:inline-block;padding:3px 10px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;font-family:Nunito,sans-serif;} .sub-status-active{background:rgba(16,185,129,0.15);color:#10b981;border:1px solid rgba(16,185,129,0.3);} .sub-status-cancelled{background:rgba(245,158,11,0.15);color:#fbbf24;border:1px solid rgba(245,158,11,0.3);} .sub-status-paused{background:rgba(156,163,175,0.15);color:var(--text3);border:1px solid rgba(156,163,175,0.3);} .sub-status-past_due{background:rgba(239,68,68,0.15);color:#f87171;border:1px solid rgba(239,68,68,0.3);} .sub-status-expired{background:rgba(156,163,175,0.15);color:var(--text3);border:1px solid rgba(156,163,175,0.3);} .sub-upgrade-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px;} @media(max-width:520px){.sub-upgrade-row{grid-template-columns:1fr;}} .sub-upgrade-card{position:relative;padding:18px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;gap:10px;} .sub-upgrade-card-featured{border-color:rgba(var(--rgb-pur),0.5);background:linear-gradient(180deg,rgba(var(--rgb-pur),0.06),var(--surface2));} .sub-upgrade-badge{position:absolute;top:-8px;right:12px;padding:3px 10px;border-radius:999px;background:linear-gradient(135deg,var(--pur-accent),var(--pur-deep));color:var(--text-on-accent);font-size:9px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;font-family:Nunito,sans-serif;} .sub-upgrade-name{font-size:14px;font-weight:600;color:var(--text);font-family:var(--serif,Outfit);letter-spacing:0.02em;} .sub-upgrade-price{font-size:24px;font-weight:700;color:var(--text);font-family:var(--serif,Outfit);} .sub-upgrade-per{font-size:12px;color:var(--text3);font-weight:400;margin-left:2px;} .sub-upgrade-features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text2);font-family:Nunito,sans-serif;line-height:1.4;} .sub-upgrade-features li{position:relative;padding-left:18px;} .sub-upgrade-features li::before{content:'✓';position:absolute;left:0;top:0;color:var(--pur-light);font-weight:700;font-size:13px;} .sub-upgrade-btn{margin-top:6px;padding:9px 16px;border-radius:24px;border:1px solid rgba(var(--rgb-pur),0.4);background:transparent;color:var(--pur-light);font-family:Nunito,sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.15s ease;} .sub-upgrade-btn:hover{background:rgba(var(--rgb-pur),0.1);border-color:rgba(var(--rgb-pur),0.6);} .sub-upgrade-btn-featured{background:linear-gradient(135deg,var(--pur-accent),var(--pur-deep));color:var(--text-on-accent);border-color:transparent;} .sub-upgrade-btn-featured:hover{filter:brightness(1.1);} .sub-upgrade-btn:disabled{opacity:0.5;cursor:not-allowed;}