*{
margin:0;
padding:0;
box-sizing:border-box;
}

:root{
--bg:#f5f5f5;
--surface:#ffffff;
--surface-alt:#fafafa;
--surface-muted:#f1f1f1;
--line:#e7e7e7;
--line-strong:#dcdcdc;
--text:#111111;
--muted:#666666;
--shadow:0 10px 30px rgba(17,17,17,0.05);
--radius-xl:28px;
--radius-lg:20px;
--radius-md:16px;
--radius-sm:12px;
}

body{
min-height:100vh;
background:linear-gradient(180deg, #ffffff 0%, #f4f4f4 100%);
color:var(--text);
font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height:1.5;
padding:24px;
}

a{
color:inherit;
}

.container{
width:min(95vw, 1380px);
margin:0 auto;
display:flex;
flex-direction:column;
gap:22px;
}

.home-top{
display:grid;
grid-template-columns:minmax(0, 0.65fr) minmax(360px, 0.35fr);
gap:22px;
align-items:start;
}

.story-bubble,
.mosaic-bubble{
padding:30px;
}

.story-bubble{
grid-column:1 / -1;
grid-row:1;
background:#050505;
border-color:#050505;
color:#fff;
}

.mosaic-bubble{
grid-column:1;
grid-row:2;
}

.form-card-mobile{
grid-column:2;
grid-row:2;
}

.box{
background:rgba(255,255,255,0.95);
border:1px solid var(--line);
border-radius:var(--radius-xl);
box-shadow:var(--shadow);
padding:28px;
}

.box.story-bubble{
background:#050505;
border-color:#050505;
color:#fff;
}

.legal-heading{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:24px 28px;
}

.legal-heading h1{
font-size:clamp(2rem, 4vw, 3.5rem);
line-height:1;
letter-spacing:-0.05em;
}

.legal-back{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 18px;
border:1px solid #111;
border-radius:999px;
background:#111;
color:#fff;
font-size:0.92rem;
font-weight:800;
text-decoration:none;
transition:background 0.18s ease, transform 0.18s ease;
}

.legal-back:hover{
background:#2a2a2a;
transform:translateY(-1px);
}

.legal-table-wrap{
width:100%;
overflow-x:auto;
margin:14px 0 18px;
border:1px solid var(--line);
border-radius:18px;
background:#fff;
}

.legal-table{
width:100%;
min-width:780px;
border-collapse:collapse;
font-size:0.92rem;
}

.legal-table th,
.legal-table td{
padding:14px 16px;
border-bottom:1px solid var(--line);
text-align:left;
vertical-align:top;
color:var(--muted);
}

.legal-table th{
background:var(--surface-alt);
color:#111;
font-weight:800;
}

.legal-table tr:last-child td{
border-bottom:0;
}

.hero{
display:grid;
gap:14px;
padding:38px 32px;
background:
linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,248,248,0.98)),
repeating-linear-gradient(135deg, rgba(0,0,0,0.02) 0 2px, transparent 2px 18px);
}

.hero h1{
font-size:clamp(2.8rem, 5vw, 4.8rem);
line-height:0.95;
letter-spacing:-0.06em;
font-weight:800;
}

.hero p{
max-width:620px;
font-size:1.02rem;
color:var(--muted);
}

.story-copy{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
width:100%;
flex-wrap:wrap;
}

.story-copy h1{
font-size:clamp(3rem, 5vw, 4.8rem);
line-height:0.92;
letter-spacing:-0.07em;
font-weight:800;
}

.home-logo{
display:block;
width:clamp(150px, 18vw, 260px);
max-width:100%;
height:auto;
}

.story-login-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 18px;
border-radius:999px;
background:#111;
color:#fff;
font-size:0.92rem;
font-weight:800;
text-decoration:none;
transition:background 0.18s ease, transform 0.18s ease;
}

.story-bubble .story-login-button{
background:#fff;
border:1px solid #fff;
color:#111;
}

.story-login-button:hover{
background:#2a2a2a;
transform:translateY(-1px);
}

.story-bubble .story-login-button:hover{
background:#f1f1f1;
}

.story-copy p{
max-width:560px;
font-size:1rem;
color:var(--muted);
margin-right:auto;
}

.story-chips{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.story-chips span{
display:inline-flex;
align-items:center;
min-height:34px;
padding:0 14px;
border-radius:999px;
background:#ffffff;
border:1px solid var(--line);
font-size:0.82rem;
font-weight:700;
color:#111;
}

.story-subcopy{
max-width:520px;
font-size:0.92rem;
color:var(--muted);
}

.story-side-note{
display:flex;
flex-wrap:wrap;
gap:10px;
padding:0 6px;
}

.story-side-note span{
display:inline-flex;
align-items:center;
min-height:32px;
padding:0 12px;
border-radius:999px;
font-size:0.78rem;
font-weight:700;
letter-spacing:0.08em;
text-transform:uppercase;
color:#666;
background:#f7f7f7;
border:1px solid var(--line);
}

.hero-mosaic{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:14px;
}

.mosaic-card{
position:relative;
display:block;
aspect-ratio:1 / 1;
border-radius:24px;
overflow:hidden;
text-decoration:none;
background:#ececec;
border:1px solid var(--line);
box-shadow:var(--shadow);
}

.mosaic-card img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.mosaic-card span{
position:absolute;
left:14px;
bottom:14px;
display:inline-flex;
align-items:center;
min-height:36px;
padding:0 14px;
border-radius:999px;
background:rgba(255,255,255,0.9);
font-size:0.9rem;
font-weight:700;
color:#111;
}

.form-card{
position:sticky;
top:24px;
width:100%;
}

.field-stack{
display:grid;
gap:8px;
}

.field-stack span{
font-size:0.78rem;
letter-spacing:0.12em;
text-transform:uppercase;
color:#666;
}

.field-note{
display:flex;
align-items:flex-end;
padding:0 2px 2px;
font-size:0.86rem;
color:var(--muted);
}

form{
display:flex;
flex-direction:column;
gap:18px;
}

.section-copy{
font-size:15px;
color:var(--muted);
margin-top:-6px;
line-height:1.35;
}

h3{
font-size:0.8rem;
letter-spacing:0.12em;
text-transform:uppercase;
color:#7a7a7a;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select{
width:100%;
border:1px solid var(--line);
background:var(--surface);
border-radius:16px;
padding:15px 16px;
font-size:0.98rem;
color:var(--text);
outline:none;
transition:border-color 0.18s, background 0.18s, box-shadow 0.18s;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="date"]:hover,
select:hover{
background:var(--surface-alt);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
select:focus{
border-color:#cfcfcf;
background:#fff;
box-shadow:0 0 0 4px rgba(17,17,17,0.04);
}

select{
appearance:none;
background-image:linear-gradient(45deg, transparent 50%, #666 50%), linear-gradient(135deg, #666 50%, transparent 50%);
background-position:calc(100% - 22px) calc(50% - 2px), calc(100% - 16px) calc(50% - 2px);
background-size:6px 6px, 6px 6px;
background-repeat:no-repeat;
padding-right:42px;
}

input::placeholder{
color:#9a9a9a;
}

.form-grid,
.phone-row{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:12px;
}

.pref-group{
border:1px solid var(--line);
border-radius:20px;
background:var(--surface);
padding:8px;
}

.pref-group summary{
list-style:none;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:14px 16px;
cursor:pointer;
font-size:0.82rem;
letter-spacing:0.12em;
text-transform:uppercase;
color:#555;
font-weight:700;
}

.pref-group summary::-webkit-details-marker{
display:none;
}

.pref-group summary::after{
content:"+";
font-size:1.05rem;
letter-spacing:0;
color:#777;
}

.pref-group[open] summary::after{
content:"-";
}

.pref-group .music-grid{
padding:0 8px 8px;
}

.music-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
gap:12px;
}

.music-chip{
position:relative;
display:flex;
align-items:center;
min-height:56px;
border:1px solid var(--line);
border-radius:18px;
background:var(--surface);
cursor:pointer;
transition:background 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s;
overflow:hidden;
}

.music-chip:hover{
background:var(--surface-alt);
border-color:var(--line-strong);
transform:translateY(-1px);
}

.music-chip input{
position:absolute;
opacity:0;
pointer-events:none;
}

.music-chip span{
display:flex;
align-items:center;
gap:10px;
width:100%;
padding:14px 16px;
font-weight:600;
font-size:0.95rem;
}

.music-chip span::before{
content:"";
width:18px;
height:18px;
border-radius:999px;
border:1px solid #cfcfcf;
background:#fff;
transition:background 0.18s, border-color 0.18s, transform 0.18s;
}

.music-chip input:checked + span{
background:#f3f3f3;
}

.music-chip input:checked + span::before{
background:#111;
border-color:#111;
box-shadow:inset 0 0 0 4px #fff;
transform:scale(1.02);
}

.legal,
.promo{
display:flex;
align-items:flex-start;
gap:12px;
padding:14px 16px;
border:1px solid var(--line);
border-radius:16px;
background:var(--surface-alt);
font-size:11px;
line-height:1.35;
color:var(--muted);
}

.legal input,
.promo input{
margin-top:3px;
accent-color:#111;
}

.legal a,
.promo a{
color:#111;
font-weight:700;
text-decoration:none;
}

.legal a:hover,
.promo a:hover{
opacity:0.7;
}

button[type="submit"],
.cookie-actions button,
.cookie-action,
.cookie-save{
border:none;
border-radius:16px;
background:#111;
color:#fff;
padding:15px 18px;
font-size:0.98rem;
font-weight:700;
cursor:pointer;
transition:background 0.18s, transform 0.18s, opacity 0.18s;
}

button[type="submit"]:hover,
.cookie-actions button:hover,
.cookie-save:hover{
background:#2a2a2a;
transform:translateY(-1px);
}

.grid-cards{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
gap:14px;
}

.card,
.linktree-btn{
display:flex;
align-items:center;
justify-content:center;
text-align:center;
min-height:76px;
padding:18px;
text-decoration:none;
font-weight:700;
border-radius:20px;
background:var(--surface);
border:1px solid var(--line);
transition:background 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s;
gap:12px;
}

.linktree-btn{
text-align:left;
}

.event-line{
display:grid;
grid-template-columns:minmax(132px, 160px) minmax(0, 1fr) minmax(132px, 160px);
gap:16px;
align-items:center;
width:100%;
}

.event-date-inline{
display:inline-flex;
align-items:center;
gap:8px;
font-size:0.84rem;
font-weight:700;
color:var(--muted);
white-space:nowrap;
}

.event-date-inline svg{
width:16px;
height:16px;
fill:currentColor;
}

.event-title-inline{
font-size:1rem;
font-weight:700;
color:var(--text);
overflow-wrap:anywhere;
text-align:center;
}

.event-arrow-inline{
font-size:1rem;
font-weight:700;
color:var(--muted);
justify-self:end;
}

.card:hover,
.linktree-btn:hover{
background:var(--surface-alt);
border-color:var(--line-strong);
transform:translateY(-1px);
box-shadow:var(--shadow);
}

.card-media{
position:relative;
display:block;
min-height:220px;
padding:0;
overflow:hidden;
}

.card-media img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.card-media span{
position:absolute;
left:14px;
bottom:14px;
display:inline-flex;
align-items:center;
min-height:36px;
padding:0 14px;
border-radius:999px;
background:rgba(255,255,255,0.9);
font-size:0.92rem;
font-weight:700;
}

.linktree-wrapper{
display:grid;
gap:12px;
}

.card-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:22px;
height:22px;
color:#111;
}

.card-icon svg{
width:100%;
height:100%;
fill:currentColor;
}

.footer-legal{
display:flex;
align-items:center;
flex-wrap:wrap;
justify-content:space-between;
gap:20px;
margin-top:10px;
padding:22px 26px;
border:1px solid var(--line);
border-radius:28px;
background:rgba(255,255,255,0.88);
box-shadow:0 18px 44px rgba(15,23,42,0.08);
font-size:0.94rem;
color:var(--muted);
}

.footer-group{
display:flex;
flex-wrap:wrap;
gap:16px;
align-items:center;
}

.footer-legal a{
color:var(--muted);
text-decoration:none;
transition:color 0.18s ease, opacity 0.18s ease;
}

.footer-legal a:hover{
color:#111;
}

p,
ul,
li{
color:var(--muted);
}

ul{
padding-left:20px;
}

li + li{
margin-top:6px;
}

#cookie-banner,
#cookie-preferences{
position:fixed;
inset:0;
display:none;
align-items:flex-end;
justify-content:center;
padding:20px;
z-index:1000;
background:transparent;
}

#cookie-preferences{
align-items:center;
z-index:1001;
background:rgba(255,255,255,0.76);
}

.cookie-modal,
.cookie-panel{
width:min(100%, 920px);
background:#ffffff;
border:1px solid var(--line);
border-radius:26px;
box-shadow:0 24px 60px rgba(17,17,17,0.1);
}

.cookie-modal{
display:flex;
gap:18px;
align-items:center;
justify-content:space-between;
padding:20px;
width:min(100%, 1180px);
}

.cookie-text p{
margin-top:6px;
}

.cookie-text{
flex:1 1 720px;
}

.cookie-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:flex-end;
flex:0 1 320px;
}

.cookie-actions button:nth-child(2),
.cookie-secondary{
background:#f2f2f2;
color:#111;
}

.cookie-actions button:nth-child(2):hover,
.cookie-secondary:hover{
background:#e8e8e8;
}

.cookie-panel{
padding:24px;
display:flex;
flex-direction:column;
gap:18px;
}

.cookie-panel-header{
display:flex;
justify-content:space-between;
gap:12px;
align-items:flex-start;
}

.cookie-close{
border:none;
background:#f3f3f3;
width:40px;
height:40px;
border-radius:999px;
cursor:pointer;
font-size:1.1rem;
}

.cookie-options{
display:grid;
gap:12px;
}

.cookie-option{
display:flex;
justify-content:space-between;
gap:16px;
align-items:center;
padding:16px;
border:1px solid var(--line);
border-radius:18px;
background:var(--surface-alt);
}

.cookie-option-copy{
display:grid;
gap:4px;
}

.cookie-option-copy strong{
font-size:0.97rem;
}

.cookie-option-copy span{
font-size:0.92rem;
color:var(--muted);
}

.cookie-switch{
position:relative;
display:inline-flex;
width:50px;
height:30px;
}

.cookie-switch input{
opacity:0;
width:0;
height:0;
}

.cookie-slider{
position:absolute;
inset:0;
border-radius:999px;
background:#d9d9d9;
transition:background 0.18s;
}

.cookie-slider::after{
content:"";
position:absolute;
top:4px;
left:4px;
width:22px;
height:22px;
border-radius:50%;
background:#fff;
box-shadow:0 2px 6px rgba(0,0,0,0.15);
transition:transform 0.18s;
}

.cookie-switch input:checked + .cookie-slider{
background:#111;
}

.cookie-switch input:checked + .cookie-slider::after{
transform:translateX(20px);
}

.cookie-panel-actions{
display:flex;
justify-content:flex-end;
gap:10px;
flex-wrap:wrap;
}

@media(max-width:768px){
body{
padding:16px;
}

.home-top{
grid-template-columns:1fr;
}

.form-card-mobile{
grid-column:1;
grid-row:2;
}

.story-bubble{
grid-column:1;
grid-row:1;
}

.mosaic-bubble{
grid-column:1;
grid-row:3;
}

.box{
padding:22px 18px;
border-radius:22px;
}

.hero,
.story-bubble,
.mosaic-bubble{
padding:28px 22px;
}

.home-logo{
width:clamp(130px, 42vw, 190px);
}

.story-copy{
align-items:center;
flex-direction:row;
flex-wrap:nowrap;
gap:12px;
justify-content:space-between;
}

.story-login-button{
flex:0 0 auto;
min-height:38px;
padding:0 14px;
font-size:0.84rem;
}

.music-grid,
.grid-cards{
grid-template-columns:1fr;
}

.hero-mosaic{
grid-template-columns:repeat(2, minmax(0, 1fr));
}

.form-grid,
.phone-row{
grid-template-columns:1fr;
}

.form-card{
position:static;
}

.footer-legal{
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
padding:18px 20px;
border-radius:22px;
}

.footer-group{
width:100%;
justify-content:flex-start;
}

.cookie-panel-header,
.cookie-option{
flex-direction:column;
align-items:flex-start;
}

.cookie-modal{
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
width:100%;
max-width:none;
min-height:0;
padding:12px;
gap:8px;
border-radius:16px;
max-height:30vh;
overflow:auto;
}

.cookie-modal{
box-shadow:0 10px 28px rgba(17,17,17,0.08);
}

.cookie-text h3{
font-size:0.82rem;
}

.cookie-text p{
font-size:0.76rem;
line-height:1.3;
display:block;
max-width:none;
}

.cookie-text{
flex:none;
width:100%;
}

.cookie-actions,
.cookie-panel-actions{
width:100%;
}

.cookie-actions button,
.cookie-panel-actions button{
flex:1 1 0;
min-height:36px;
padding:10px 10px;
font-size:0.78rem;
border-radius:12px;
}

.event-line{
display:grid;
grid-template-columns:43px minmax(0, 1fr) 43px;
gap:8px;
align-items:center;
min-height:38px;
}

.event-date-inline{
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
font-size:0.76rem;
width:100%;
white-space:nowrap;
text-align:center;
}

.event-date-inline svg{
width:14px;
height:14px;
}

.event-title-inline{
font-size:0.94rem;
line-height:1.2;
overflow:hidden;
overflow-wrap:normal;
word-break:normal;
text-wrap:balance;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
text-align:center;
grid-column:2;
}

.event-arrow-inline{
display:flex;
align-items:center;
justify-content:center;
width:100%;
line-height:1;
grid-column:3;
}

.linktree-btn{
padding:14px 14px;
min-height:68px;
}

#cookie-banner{
top:auto;
right:12px;
bottom:6px;
left:12px;
width:auto;
height:auto;
max-height:none;
padding:0;
align-items:stretch;
justify-content:stretch;
background:transparent;
}

.cookie-actions{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:6px;
width:100%;
}

.cookie-panel-actions{
display:grid;
grid-template-columns:1fr;
gap:8px;
}
}

/* Dark theme */
:root{
--bg:#030303;
--surface:#0b0b0b;
--surface-alt:#121212;
--surface-muted:#181818;
--line:#272727;
--line-strong:#3a3a3a;
--text:#f6f6f6;
--muted:#a7a7a7;
--shadow:0 18px 46px rgba(0,0,0,0.42);
}

body{
background:
radial-gradient(circle at top left, rgba(255,255,255,0.08), transparent 30%),
linear-gradient(180deg, #000 0%, var(--bg) 100%);
color:var(--text);
color-scheme:dark;
}

.box,
.hero,
.pref-group,
.music-chip,
.legal,
.promo,
.card,
.linktree-btn,
.footer-legal,
.cookie-modal,
.cookie-panel,
.cookie-option,
.legal-table-wrap{
background:rgba(12,12,12,0.96);
border-color:var(--line);
color:var(--text);
box-shadow:var(--shadow);
}

.box.story-bubble{
background:rgba(12,12,12,0.96);
border-color:var(--line);
color:#fff;
box-shadow:var(--shadow);
}

.hero{
background:
linear-gradient(180deg, rgba(12,12,12,0.98), rgba(5,5,5,0.98)),
repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 18px);
}

.legal-table th,
.legal-table td{
border-color:var(--line);
color:var(--muted);
}

.legal-table th{
background:var(--surface-alt);
color:var(--text);
}

.story-chips span,
.story-side-note span,
.mosaic-card span,
.card-media span{
background:rgba(0,0,0,0.74);
border-color:rgba(255,255,255,0.18);
color:#fff;
}

.mosaic-card{
background:#141414;
border-color:var(--line);
}

h1,
h2,
h3,
.event-title-inline,
.cookie-option-copy strong{
color:var(--text);
}

p,
ul,
li,
.story-copy p,
.story-subcopy,
.field-note,
.section-copy,
.event-date-inline,
.event-arrow-inline,
.footer-legal,
.footer-legal a,
.cookie-option-copy span{
color:var(--muted);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select{
background:#111;
border-color:var(--line);
color:var(--text);
color-scheme:dark;
}

select option{
background:#111;
color:#fff;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="date"]:hover,
select:hover,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
select:focus{
background:#171717;
border-color:#4a4a4a;
box-shadow:0 0 0 4px rgba(255,255,255,0.06);
}

select{
appearance:none;
-webkit-appearance:none;
background-color:#111;
background-image:url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.25L7 7.25L13 1.25' stroke='%23d8d8d8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
background-position:calc(100% - 18px) 50%;
background-size:14px 9px;
background-repeat:no-repeat;
padding-right:46px;
}

#pais-select,
#telefono-prefijo-select{
background-color:#111;
background-image:url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.25L7 7.25L13 1.25' stroke='%23d8d8d8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
background-position:calc(100% - 18px) 50%;
background-size:14px 9px;
background-repeat:no-repeat;
}

input::placeholder{
color:#777;
}

.pref-group summary,
.field-stack span,
h3{
color:#cfcfcf;
}

.music-chip:hover,
.card:hover,
.linktree-btn:hover{
background:#171717;
border-color:var(--line-strong);
}

.music-chip span::before{
background:#090909;
border-color:#666;
}

.music-chip input:checked + span{
background:#1b1b1b;
color:#fff;
}

.music-chip input:checked + span::before{
background:#fff;
border-color:#fff;
box-shadow:inset 0 0 0 4px #111;
}

.legal a,
.promo a,
.footer-legal a:hover,
.card-icon{
color:#fff;
}

.legal input,
.promo input{
accent-color:#fff;
}

.legal-back,
button[type="submit"],
.cookie-actions button,
.cookie-action,
.cookie-save{
background:#fff;
border:1px solid #fff;
color:#050505;
}

.legal-back:hover,
button[type="submit"]:hover,
.cookie-actions button:hover,
.cookie-save:hover{
background:#e8e8e8;
color:#050505;
}

.story-bubble .story-login-button{
background:#fff;
border-color:#fff;
color:#050505;
}

.story-bubble .story-login-button:hover{
background:#e8e8e8;
}

#cookie-preferences{
background:rgba(0,0,0,0.74);
}

.cookie-actions button:nth-child(2),
.cookie-secondary,
.cookie-close{
background:#1a1a1a;
color:#fff;
}

.cookie-actions button:nth-child(2):hover,
.cookie-secondary:hover,
.cookie-close:hover{
background:#242424;
}

.cookie-slider{
background:#d83b3b;
}

.cookie-slider::after{
background:#fff;
}

.cookie-switch input:checked + .cookie-slider{
background:#25c76f;
}

.cookie-switch input:checked + .cookie-slider::after{
background:#fff;
}

/* Clear active/inactive states */
.music-chip{
border-color:var(--line);
background:var(--surface);
}

.music-chip span{
color:var(--text);
justify-content:flex-start;
}

.music-chip span::before{
display:inline-flex;
content:"";
width:18px;
height:18px;
border-radius:999px;
border:1px solid #343434;
background:#050505;
box-shadow:inset 0 0 0 4px #050505;
transition:background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.music-chip input:checked + span{
background:transparent;
color:var(--text);
}

.music-chip input:checked + span::before{
background:#25c76f;
border-color:#25c76f;
box-shadow:inset 0 0 0 4px #050505;
transform:scale(1.02);
}

.legal,
.promo{
position:relative;
align-items:flex-start;
padding-left:46px;
}

.legal input,
.promo input{
position:absolute;
opacity:0;
pointer-events:none;
}

.legal::before,
.promo::before{
content:"";
position:absolute;
left:16px;
top:15px;
width:18px;
height:18px;
border-radius:999px;
border:1px solid #343434;
background:#050505;
box-shadow:inset 0 0 0 4px #050505;
transition:background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.legal:has(input:checked)::before,
.promo:has(input:checked)::before{
background:#25c76f;
border-color:#25c76f;
box-shadow:inset 0 0 0 4px #050505;
transform:scale(1.02);
}