:root{
    --bg: #0b0b0c;
    --fg: #e9e9ea;
    --muted:#b8b8bb;
    --card:#141418;
    --accent:#ff5b24; /* Vipps-oransje-ish */
    --brand:#81029b;  /* Kimsec-lilla som sekundær */
    --radius:16px;
    --shadow: 0 8px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
    :root{
    --bg:#f6f7f9; --fg:#111216; --muted:#5a5b60; --card:#ffffff;
    --shadow: 0 8px 30px rgba(0,0,0,.10);
    }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0; background:var(--bg); color:var(--fg);
    font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
    display:grid; place-items:center; padding:24px;
}
.card{
    width:min(760px, 100%);
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding: clamp(18px, 4vw, 28px);
}
header{
    display:flex;
    align-items:center; /* Justerer vertikal plassering */
    gap:10px; /* Avstand mellom dot og tekst */
    margin-bottom:10px;
}
.dot{
    width:10px;
    height:10px;
    margin-top: -25px;
    border-radius:50%;
    background:var(--accent, #ff5b24); /* Fallback til ønsket farge */
}
h1{
    font-size: clamp(20px, 3.6vw, 28px);
    margin:0;
}
p{margin:0 0 12px 0; color:var(--muted)}
.qr-wrap{
    margin:18px 0 14px 0;
    display:flex; justify-content:center;
}
.qr{
    width:min(360px, 82vw);
    aspect-ratio:1/1;
    border-radius:12px;
    background:#fff;
    padding:12px;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.pill{
    display:inline-flex; align-items:center; gap:10px;
    border:1px solid rgba(128,128,128,.25);
    border-radius:999px; padding:8px 14px; color:var(--fg);
    background:transparent;
}
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    border:none; border-radius:12px; padding:12px 16px; cursor:pointer;
    background:var(--accent); color:#fff; font-weight:600;
    transition: transform .05s ease;
}
.btn:active{ transform: scale(.99); }
.btn.secondary{ background:var(--brand); }
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}
footer{margin-top:18px; font-size:.95rem; color:var(--muted)}
.success{ color:#1aa34a; display:none; margin-left:6px; }
.hint{ font-size:.95rem; color:var(--muted); margin-top:4px }
.center{ text-align:center }