:root{
    /* Accent */
    --blue:#29abe2;
    --blue-dark:#1f93c4;
    --panel-radius:6px;
    --gap:18px;

    /* Lyst tema (standard-værdier) */
    --body-grad: radial-gradient(120% 100% at 50% 120%, rgba(0,0,0,.10), transparent 60%),
                 linear-gradient(180deg,#efefef 0%, #d4d4d4 100%);
    --page-border:#bdbdbd;
    --panel-bg:#29abe2;
    --panel-text:#ffffff;
    --panel-link:#ffffff;
    --surface:#f6f6f6;
    --text:#1a1a1a;
    --text-muted:#777777;
    --desc-text:#333333;
    --input-bg:#ffffff;
    --input-border:#cfcfcf;
    --input-text:#1a1a1a;
    --table-head:#f4f4f4;
    --border:#eeeeee;
    --ghost-bg:#eeeeee;
    --ghost-bg-hover:#e0e0e0;
    --ghost-text:#333333;
    --ok-bg:#e4f6e4;   --ok-text:#256029;   --ok-border:#bfe3bf;
    --err-bg:#fbe4e4;  --err-text:#8a2020;  --err-border:#e6bcbc;
    --stage-grad: radial-gradient(closest-side at 50% 62%, #4a4a4a 0%, #2b2b2b 42%, #171717 70%, #101010 100%);
}

html[data-theme="dark"]{
    --blue:#37b0e6;
    --blue-dark:#2790bd;
    --body-grad: radial-gradient(120% 100% at 50% 120%, rgba(0,0,0,.55), transparent 60%),
                 linear-gradient(180deg,#12151b 0%, #0b0d11 100%);
    --page-border:#2a2f3a;
    --panel-bg:#1b6f92;
    --panel-text:#eaf6fc;
    --panel-link:#eaf6fc;
    --surface:#1b212b;
    --text:#e6e9ee;
    --text-muted:#98a2b0;
    --desc-text:#ccd2da;
    --input-bg:#11151c;
    --input-border:#333b47;
    --input-text:#e6e9ee;
    --table-head:#232a35;
    --border:#2a313d;
    --ghost-bg:#2a313d;
    --ghost-bg-hover:#333b47;
    --ghost-text:#e6e9ee;
    --ok-bg:rgba(47,211,79,.12);   --ok-text:#8fe6a6;   --ok-border:rgba(47,211,79,.30);
    --err-bg:rgba(217,83,79,.14);  --err-text:#ff9d97;  --err-border:rgba(217,83,79,.35);
    --stage-grad: radial-gradient(closest-side at 50% 62%, #2b2f37 0%, #1a1d23 42%, #101216 70%, #0a0b0e 100%);
}

/* Følg systemet når brugeren IKKE har valgt eksplicit (intet data-theme) */
@media (prefers-color-scheme: dark){
    html:not([data-theme]){
        --blue:#37b0e6;
        --blue-dark:#2790bd;
        --body-grad: radial-gradient(120% 100% at 50% 120%, rgba(0,0,0,.55), transparent 60%),
                     linear-gradient(180deg,#12151b 0%, #0b0d11 100%);
        --page-border:#2a2f3a;
        --panel-bg:#1b6f92;
        --panel-text:#eaf6fc;
        --panel-link:#eaf6fc;
        --surface:#1b212b;
        --text:#e6e9ee;
        --text-muted:#98a2b0;
        --desc-text:#ccd2da;
        --input-bg:#11151c;
        --input-border:#333b47;
        --input-text:#e6e9ee;
        --table-head:#232a35;
        --border:#2a313d;
        --ghost-bg:#2a313d;
        --ghost-bg-hover:#333b47;
        --ghost-text:#e6e9ee;
        --ok-bg:rgba(47,211,79,.12);   --ok-text:#8fe6a6;   --ok-border:rgba(47,211,79,.30);
        --err-bg:rgba(217,83,79,.14);  --err-text:#ff9d97;  --err-border:rgba(217,83,79,.35);
        --stage-grad: radial-gradient(closest-side at 50% 62%, #2b2f37 0%, #1a1d23 42%, #101216 70%, #0a0b0e 100%);
    }
}

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

body{
    font-family:Arial, Helvetica, "Segoe UI", sans-serif;
    color:var(--text);
    background:var(--body-grad);
    background-attachment:fixed;
    min-height:100vh;
}

.page{
    max-width:1860px;
    margin:8px auto;
    padding:0 8px;
    border:1px solid var(--page-border);
    border-radius:8px;
    background:transparent;
}

/* Fullscreen backdrop (pr. mix, valgfri) -------------------------------- */
.page-backdrop{
    display:none;
    position:fixed;
    inset:0;
    z-index:-1;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    opacity:var(--backdrop-opacity, 1);
}
body.has-backdrop .page-backdrop{display:block;}
/* Med backdrop skal visualizerens egen baggrund (ringene) væk, så
   backdroppet ses igennem – selve visualizeren skal stadig tegnes. */
body.has-backdrop .stage{background:transparent;box-shadow:none;}
body.has-backdrop .stage::before{display:none;}

/* Header ------------------------------------------------------------------ */
.masthead{
    position:relative;
    background:var(--panel-bg);
    color:var(--panel-text);
    border-radius:var(--panel-radius);
    padding:18px 24px;
    margin:8px 0;
    box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.masthead h1{
    margin:0;
    text-align:center;
    font-size:34px;
    letter-spacing:.3px;
    padding:0 44px;
}

/* Tema-knap --------------------------------------------------------------- */
.theme-toggle{
    position:absolute;
    top:50%;
    right:18px;
    transform:translateY(-50%);
    width:40px;height:40px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.12);
    color:var(--panel-text);
    font-size:18px;
    line-height:1;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
}
.theme-toggle:hover{background:rgba(255,255,255,.22);}
.admin-top .theme-toggle{display:inline-flex;position:static;transform:none;width:34px;height:34px;font-size:16px;vertical-align:middle;}

/* Layout ------------------------------------------------------------------ */
.layout{
    display:grid;
    grid-template-columns:clamp(240px,22vw,420px) 1fr clamp(240px,22vw,460px);
    gap:var(--gap);
    align-items:start;
    margin:var(--gap) 0;
}
.panel{
    background:var(--panel-bg);
    color:var(--panel-text);
    border-radius:var(--panel-radius);
    padding:20px 22px;
    box-shadow:0 1px 3px rgba(0,0,0,.15);
}

/* Navigation -------------------------------------------------------------- */
.nav ul{list-style:none;margin:0;padding:0;}
.nav li{margin:14px 0;text-align:center;}
.nav a{
    color:var(--panel-link);
    text-decoration:underline;
    font-size:15px;
    line-height:1.4;
    display:inline-block;
}
.nav a:hover{opacity:.85;}
.nav a.active{font-weight:bold;text-decoration:underline;}
.nav a .type-icon{vertical-align:-2px;margin-left:6px;opacity:.7;}

/* Center ------------------------------------------------------------------ */
.center{min-width:0;}
.mix-card{
    background:var(--surface);
    border-radius:var(--panel-radius);
    padding:30px 34px;
    box-shadow:0 1px 3px rgba(0,0,0,.12);
    min-height:120px;
}
.mix-artist{
    margin:0 0 14px;
    font-size:20px;
    text-align:center;
    color:var(--desc-text);
}
.mix-description{
    font-size:16px;
    line-height:1.55;
    color:var(--desc-text);
    text-align:center;
}
.mix-description a,
.facts a{color:inherit;text-decoration:underline;}

/* Stage ------------------------------------------------------------------- */
.stage{
    position:relative;
    margin-top:22px;
    padding:24px 24px 20px;
    border-radius:var(--panel-radius);
    overflow:hidden;
    background:var(--stage-grad);
    box-shadow:inset 0 0 60px rgba(0,0,0,.6);
}
.stage::before{
    content:"";
    position:absolute;
    left:50%; top:60%;
    width:min(70vw,780px); height:min(70vw,780px);
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 45%,
            rgba(41,171,226,.18) 0%, rgba(41,171,226,.05) 18%, transparent 30%),
        repeating-radial-gradient(circle at 50% 50%,
            rgba(255,255,255,.03) 0 3px, rgba(0,0,0,.10) 3px 8px);
    pointer-events:none;
}
.visualizer{position:relative;display:block;width:100%;height:300px;z-index:1;}
#audio-player{
    position:relative;z-index:2;display:block;width:100%;margin-top:14px;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.video-player{
    position:relative;z-index:2;display:block;width:100%;max-height:60vh;
    background:#000;border-radius:6px;box-shadow:0 4px 18px rgba(0,0,0,.5);
}

/* Facts ------------------------------------------------------------------- */
.facts .cover-wrap{margin-top:0;margin-bottom:20px;}
.facts h2{text-align:center;margin:6px 0 10px;font-size:22px;}
.facts h2 + p{margin-top:0;}
.facts p{text-align:center;font-size:15px;line-height:1.5;margin:0 0 22px;}

/* Footer ------------------------------------------------------------------ */
.site-footer{
    background:var(--panel-bg);
    color:var(--panel-text);
    border-radius:var(--panel-radius);
    padding:14px 20px;
    text-align:center;
    margin:8px 0;
    box-shadow:0 1px 3px rgba(0,0,0,.15);
    font-size:15px;
}

/* Empty state ------------------------------------------------------------- */
.empty-state{
    background:var(--surface);
    border-radius:var(--panel-radius);
    padding:60px 24px;
    margin:var(--gap) 0;
    text-align:center;
    font-size:18px;
    color:var(--text);
}
.empty-state a{color:var(--blue);}

/* "Ny version" besked ------------------------------------------------------ */
.update-banner{
    position:fixed;left:50%;bottom:20px;transform:translateX(-50%);
    z-index:50;display:flex;align-items:center;gap:14px;
    background:var(--panel-bg);color:var(--panel-text);
    padding:12px 18px;border-radius:30px;
    box-shadow:0 4px 18px rgba(0,0,0,.35);
    font-size:14px;
    animation:update-banner-in .25s ease;
}
.update-banner button{
    background:var(--blue);color:#fff;border:none;border-radius:20px;
    padding:6px 16px;font-size:13px;cursor:pointer;
}
.update-banner button:hover{background:var(--blue-dark);}
@keyframes update-banner-in{
    from{transform:translate(-50%,20px);opacity:0;}
    to{transform:translate(-50%,0);opacity:1;}
}

/* Cover ------------------------------------------------------------------- */
.cover-wrap{text-align:center;margin-top:18px;}
.cover-wrap img{
    max-width:260px;width:60%;min-width:160px;border-radius:8px;
    box-shadow:0 4px 18px rgba(0,0,0,.35);display:inline-block;
    cursor:pointer;
}

/* Billedefremviser (fuldskærm cover/backdrop) ------------------------------ */
.image-viewer{
    position:fixed;inset:0;z-index:200;
    background:rgba(0,0,0,.9);
    display:flex;align-items:center;justify-content:center;
    touch-action:pan-y;
}
.iv-img{
    max-width:90vw;max-height:85vh;border-radius:6px;
    box-shadow:0 8px 40px rgba(0,0,0,.6);
    -webkit-user-select:none;user-select:none;
}
.iv-btn{
    position:absolute;background:rgba(255,255,255,.12);color:#fff;
    border:1px solid rgba(255,255,255,.35);border-radius:50%;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    line-height:1;
}
.iv-btn:hover{background:rgba(255,255,255,.22);}
.iv-close{top:18px;right:18px;width:44px;height:44px;font-size:26px;}
.iv-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:20px;}
.iv-prev{left:18px;}
.iv-next{right:18px;}
@media (max-width:700px){
    .iv-close{width:38px;height:38px;font-size:22px;top:10px;right:10px;}
    .iv-nav{width:42px;height:42px;font-size:16px;}
    .iv-prev{left:8px;}
    .iv-next{right:8px;}
}

/* Infomodal (fx privatlivsinformation) -------------------------------------- */
.modal-overlay{
    position:fixed;inset:0;z-index:200;
    background:rgba(0,0,0,.6);
    display:flex;align-items:center;justify-content:center;
    padding:20px;
}
.modal-box{
    position:relative;
    background:var(--surface);color:var(--text);
    border-radius:var(--panel-radius);
    max-width:480px;width:100%;
    padding:28px 30px;
    box-shadow:0 8px 40px rgba(0,0,0,.5);
    max-height:85vh;overflow:auto;
}
.modal-box h2{margin-top:0;}
.modal-box ul{padding-left:20px;line-height:1.6;}
.modal-box li{margin-bottom:6px;}
.modal-close{
    position:absolute;top:14px;right:14px;
    width:32px;height:32px;border-radius:50%;
    border:1px solid var(--input-border);
    background:var(--ghost-bg);color:var(--ghost-text);
    cursor:pointer;font-size:20px;line-height:1;
    display:flex;align-items:center;justify-content:center;
}
.modal-close:hover{background:var(--ghost-bg-hover);}

/* Play-hint --------------------------------------------------------------- */
.play-hint{
    position:absolute;z-index:3;left:50%;top:44%;
    transform:translate(-50%,-50%);
    background:rgba(41,171,226,.92);color:#fff;
    padding:12px 22px;border-radius:30px;font-size:16px;font-weight:bold;
    cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.4);
    animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
    0%,100%{transform:translate(-50%,-50%) scale(1);}
    50%    {transform:translate(-50%,-50%) scale(1.06);}
}

/* Responsivt -------------------------------------------------------------- */
@media (max-width:1000px){
    .layout{grid-template-columns:1fr;}
    .center{order:1;}
    .facts{order:2;}
    .nav{order:3;}
    .masthead h1{font-size:24px;}
    .visualizer{height:220px;}
}
@media (min-width:1001px){
    /* Equalizeren kan klikkes for play/pause – kun relevant på pc */
    .visualizer{cursor:pointer;}
}

/* ==========================================================================
   Admin / login
   ========================================================================== */
.admin-wrap{max-width:1100px;margin:0 auto;}

/* Admin-faneblade ---------------------------------------------------------- */
.admin-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;}
.tab-btn{
    display:inline-block;background:var(--ghost-bg);color:var(--ghost-text);
    border:none;border-radius:6px 6px 0 0;padding:10px 18px;font-size:14px;
    cursor:pointer;text-decoration:none;font-family:inherit;
}
.tab-btn:hover{background:var(--ghost-bg-hover);}
.tab-btn.active{background:var(--surface);color:var(--text);font-weight:bold;}
.card{
    background:var(--surface);
    color:var(--text);
    border-radius:var(--panel-radius);
    padding:24px 26px;
    margin:16px 0;
    box-shadow:0 1px 4px rgba(0,0,0,.12);
}
.card h2{margin-top:0;}
.login-box{max-width:420px;margin:60px auto;}

label{display:block;font-weight:bold;margin:14px 0 6px;font-size:14px;}
input[type=text],input[type=email],input[type=password],textarea,input[type=file]{
    width:100%;padding:10px 12px;
    border:1px solid var(--input-border);
    border-radius:5px;font-size:15px;font-family:inherit;
    background:var(--input-bg);color:var(--input-text);
}
input[type=file]{padding:8px 12px;cursor:pointer;}
input[type=file]::file-selector-button,
input[type=file]::-webkit-file-upload-button{
    display:inline-block;background:var(--blue);color:#fff;border:none;
    border-radius:5px;padding:8px 16px;margin-right:14px;
    font-size:13px;font-family:inherit;font-weight:bold;cursor:pointer;
    transition:background .15s ease;
}
input[type=file]:hover::file-selector-button,
input[type=file]:hover::-webkit-file-upload-button{background:var(--blue-dark);}
textarea{min-height:90px;resize:vertical;}
.hint{color:var(--text-muted);font-size:13px;margin-top:4px;}
code{background:var(--input-bg);padding:2px 6px;border-radius:4px;}

.btn{
    display:inline-block;background:var(--blue);color:#fff;border:none;
    border-radius:5px;padding:11px 20px;font-size:15px;cursor:pointer;
    text-decoration:none;margin-top:16px;
}
.btn:hover{background:var(--blue-dark);}
.btn.small{padding:6px 12px;font-size:13px;margin:0;}
.btn.danger{background:#d9534f;}
.btn.danger:hover{background:#c9302c;}
.btn.ghost{background:var(--ghost-bg);color:var(--ghost-text);}
.btn.ghost:hover{background:var(--ghost-bg-hover);}

.flash{padding:12px 16px;border-radius:5px;margin:12px 0;font-size:15px;}
.flash.ok{background:var(--ok-bg);color:var(--ok-text);border:1px solid var(--ok-border);}
.flash.err{background:var(--err-bg);color:var(--err-text);border:1px solid var(--err-border);}

.mix-table{width:100%;border-collapse:collapse;margin-top:10px;}
.mix-table th,.mix-table td{
    text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);
    font-size:14px;vertical-align:middle;
}
.mix-table th{background:var(--table-head);}
.mix-table .actions{display:flex;gap:6px;flex-wrap:wrap;}
.admin-top{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.admin-top a{color:var(--panel-link);}

/* Upload-progressbar ------------------------------------------------------ */
.upload-progress{display:flex;align-items:center;gap:12px;margin-top:16px;}
.upload-progress .bar{flex:1;height:14px;background:var(--ghost-bg);border-radius:8px;overflow:hidden;}
.upload-progress .bar-fill{height:100%;width:0%;background:linear-gradient(90deg,#2fd44f,var(--blue));transition:width .15s ease;}
.upload-progress span{font-size:14px;font-weight:bold;min-width:80px;text-align:right;color:var(--text);}

/* Rich-text editor (admin) ------------------------------------------------ */
.rt{margin-top:2px;}
.rt-toolbar{
    display:flex;flex-wrap:wrap;align-items:center;gap:4px;
    padding:6px;border:1px solid var(--input-border);border-bottom:none;
    border-radius:5px 5px 0 0;background:var(--table-head);
}
.rt-btn{
    min-width:30px;height:28px;padding:0 8px;
    border:1px solid var(--input-border);border-radius:4px;
    background:var(--input-bg);color:var(--input-text);
    font-size:14px;line-height:1;cursor:pointer;
}
.rt-btn:hover{background:var(--ghost-bg-hover);}
.rt-sep{width:1px;height:20px;background:var(--input-border);margin:0 2px;}
.rt-area{
    min-height:90px;padding:10px 12px;
    border:1px solid var(--input-border);border-radius:0 0 5px 5px;
    background:var(--input-bg);color:var(--input-text);
    font-size:15px;line-height:1.5;overflow:auto;
}
.rt-area:focus{outline:2px solid var(--blue);outline-offset:-1px;}
.rt-area h1,.rt-area h2,.rt-area h3,.rt-area h4{margin:.3em 0;}
.rt-area a{color:inherit;text-decoration:underline;}