/* =========================================================
   CIRClO – LIGHT THEME (NEW DESIGN)
   - bright background, soft gradients, clean cards
   - keeps your accent gradient for CTAs + highlights
========================================================= */

/* =========================
   Tokens + Base
========================= */
:root{
    /* neutrals */
    --bg: #f7f8fc;
    --bg2:#ffffff;
    --surface:#ffffff;
    --surface-2:#fbfcff;

    --ink:#0f172a;            /* slate-900-ish */
    --muted:#667085;          /* modern gray */
    --border:#e6e8f0;

    /* shadow */
    --shadow-sm: 0 6px 18px rgba(15, 23, 42, .06);
    --shadow-md: 0 14px 40px rgba(15, 23, 42, .10);

    /* radii */
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 22px;

    /* gradient palette (brand) */
    --c1:#6D28D9;
    --c2:#EC4899;
    --c3:#F97316;

    --grad: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
}

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

body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
    color: var(--ink);
    background: var(--bg);
    overflow-x:hidden;
    position:relative;
}

/* Soft bright background glow */
body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    background:
            radial-gradient(900px 600px at 15% 5%, rgba(109,40,217,.10), transparent 60%),
            radial-gradient(1000px 700px at 80% 10%, rgba(236,72,153,.10), transparent 60%),
            radial-gradient(1100px 700px at 50% 95%, rgba(249,115,22,.08), transparent 60%),
            linear-gradient(180deg, #ffffff 0%, var(--bg) 55%, #ffffff 100%);
}

/* Utilities */
.hidden{ display:none !important; }
.muted{ color:var(--muted); }
.small{ font-size:12px; }

/* =========================
   Top bar (hidden when not authed)
========================= */
#topBar{
    opacity:0;
    pointer-events:none;
    transition: opacity .18s ease;
}
body.is-authed #topBar{
    opacity:1;
    pointer-events:auto;
}

.bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 16px;

    /* bright glass */
    background: rgba(255,255,255,.72);
    border-bottom: 1px solid rgba(15,23,42,.08);
    backdrop-filter: blur(12px);

    box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

.brand-logo{
    padding:10px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow:
            0 10px 26px rgba(15,23,42,.08),
            0 0 0 1px rgba(255,255,255,.7) inset;
}

/* =========================
   Generic form controls
========================= */
input, select, button, textarea{
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:12px;
    font-size:14px;
}

input, select, textarea{
    background: #fff;
    color: var(--ink);
}

input::placeholder, textarea::placeholder{ color: rgba(102,112,133,.75); }

input:focus, select:focus, textarea:focus{
    outline:none;
    border-color: rgba(109,40,217,.35);
    box-shadow: 0 0 0 4px rgba(109,40,217,.12);
}

/* Make default buttons lighter (Bootstrap still applies to .btn) */
button{
    cursor:pointer;
    background:#ffffff;
    color: var(--ink);
    border-color: var(--border);
}
button:hover{ filter:brightness(0.99); }
button:disabled{ opacity:.6; cursor:not-allowed; }

hr{
    border:none;
    border-top:1px solid rgba(15,23,42,.10);
    margin:14px 0;
}

/* =========================
   Container height
========================= */
.container{
    width:100%;
    padding:12px;
    min-height:100vh;
    height:auto;
    max-width:none;
}

body.is-authed .container{
    min-height: calc(100vh - 58px);
    height: calc(100vh - 58px);
}

/* =========================
   Cards
========================= */
.card{
    background: var(--surface);
    border:1px solid rgba(15,23,42,.08);
    border-radius: var(--r-md);
    padding:14px;
    box-shadow: var(--shadow-sm);
}

/* Bootstrap input spacing */
.card input, .card select, .card button, .card textarea{ border-radius:12px; }

/* Card headers in light theme */
.card-header{
    background: linear-gradient(180deg, rgba(249,250,255,.9), rgba(255,255,255,.7));
    border-bottom: 1px solid rgba(15,23,42,.08);
}

/* =========================
   Auth / Landing
========================= */
#authPane{ height:auto; }
body.is-authed #authPane{ display:none; }

.authLayout{
    max-width:1200px;
    padding:18px;
}

/* HERO – now LIGHT */
.heroCard{
    position:relative;
    border-radius: var(--r-lg);
    padding:28px;
    overflow:hidden;

    background:
            radial-gradient(900px 420px at 25% 10%, rgba(236,72,153,.10), transparent 60%),
            radial-gradient(900px 420px at 85% 20%, rgba(249,115,22,.08), transparent 60%),
            radial-gradient(900px 420px at 55% 95%, rgba(109,40,217,.09), transparent 60%),
            rgba(255,255,255,.82);

    border: 1px solid rgba(15,23,42,.08);
    box-shadow: var(--shadow-md);
}

.heroGlow{ display:none; } /* not needed on light theme */

.heroTitle{
    color: var(--ink);
    font-size: clamp(28px, 4.2vw, 46px);
    line-height:1.05;
    letter-spacing:-0.02em;
    margin: 10px 0 12px;
}

.gradText{
    background: var(--grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.heroLead{
    color: rgba(15,23,42,.72);
    font-size:16px;
    max-width:58ch;
}

.heroBadges{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:16px;
}

.heroBadge{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:999px;

    background: rgba(255,255,255,.85);
    border: 1px solid rgba(15,23,42,.08);
    color: rgba(15,23,42,.78);
    font-size:13px;
    box-shadow: 0 8px 18px rgba(15,23,42,.06);
}

.heroSteps{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px;
}
@media (max-width: 991px){
    .heroSteps{ grid-template-columns: 1fr; }
}

.step{
    display:flex;
    gap:12px;
    padding:12px;
    border-radius: 16px;

    background: rgba(255,255,255,.86);
    border: 1px solid rgba(15,23,42,.08);
}

.stepIcon{
    width:38px;
    height:38px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;

    background: var(--grad);
    color:#fff;
    box-shadow: 0 10px 18px rgba(109,40,217,.18);
}

.stepTitle{
    color: var(--ink);
    font-weight:800;
    font-size:14px;
    margin-bottom:2px;
}
.stepText{
    color: rgba(15,23,42,.68);
    font-size:13px;
}

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

.btnHeroPrimary{
    border:0;
    border-radius:14px;
    padding:10px 14px;
    background: var(--grad);
    color:#fff;
    font-weight:800;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:6px;
    box-shadow: 0 14px 28px rgba(109,40,217,.22);
}
.btnHeroPrimary:hover{ filter:brightness(1.03); color:#fff; }

.btnHeroGhost{
    border-radius:14px;
    padding:10px 14px;
    background: rgba(255,255,255,.9);
    border:1px solid rgba(15,23,42,.10);
    color: rgba(15,23,42,.85);
    font-weight:700;
    text-decoration:none;
}
.btnHeroGhost:hover{ background:#fff; color: var(--ink); }

.heroFineprint{
    color: rgba(15,23,42,.55);
    font-size:12px;
}

/* =========================
   Login/Register card – LIGHT
========================= */
#loginRegisterBox.card{
    border-radius: var(--r-lg);
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: var(--shadow-md);
    color: var(--ink);
    overflow:hidden;
    position: relative;
}

#loginRegisterBox.card::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
            radial-gradient(520px 220px at 15% 10%, rgba(236,72,153,.10), transparent 65%),
            radial-gradient(520px 220px at 85% 10%, rgba(249,115,22,.08), transparent 65%),
            radial-gradient(520px 220px at 55% 95%, rgba(109,40,217,.08), transparent 65%);
}

#loginRegisterBox .card-header{
    background: rgba(255,255,255,.75);
}
#loginRegisterBox h2{
    margin:0;
    font-size:18px;
    font-weight:900;
}

#loginRegisterBox label{
    color: rgba(15,23,42,.70);
    font-size: 12px;
    margin-bottom: 6px;
}

#loginRegisterBox .form-control{
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(15,23,42,.10);
    color: var(--ink);
}

#loginRegisterBox .form-control:focus{
    border-color: rgba(236,72,153,.35);
    box-shadow: 0 0 0 4px rgba(236,72,153,.12);
    outline: none;
}

/* Keep your gradient primary inside auth */
#loginRegisterBox .btn-primary{
    border:0;
    font-weight:900;
    border-radius:14px;
    background: var(--grad);
    box-shadow: 0 14px 28px rgba(109,40,217,.18);
}
#loginRegisterBox .btn-primary:hover{ filter:brightness(1.03); }

/* Secondary now looks like a soft card button */
#loginRegisterBox .btn-secondary{
    border: 1px solid rgba(15,23,42,.12);
    background: rgba(255,255,255,.90);
    color: rgba(15,23,42,.88);
    border-radius: 14px;
    font-weight: 800;
}
#loginRegisterBox .btn-secondary:hover{
    background:#fff;
}

/* forgot btn */
#loginRegisterBox .btn-warning{
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(15,23,42,.12);
    color: rgba(15,23,42,.88);
    border-radius: 14px;
    font-weight: 800;
}
#loginRegisterBox .btn-warning:hover{ background:#fff; }

#loginRegisterBox hr{
    border-top: 1px solid rgba(15,23,42,.10);
}

#loginRegisterBox .form-check-label{
    color: rgba(15,23,42,.70);
}
#loginRegisterBox .form-check-label a{
    color: rgba(15,23,42,.92);
    text-decoration: underline;
    text-underline-offset: 2px;
}
#loginRegisterBox .form-check-label a:hover{ color: var(--ink); }

@media (min-width: 992px){
    #loginRegisterBox{ position: sticky; top: 16px; }
}

/* =========================
   Articles (LIGHT)
========================= */
.articlesCard{ padding:22px; }

.articlesHead{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:14px;
}
@media (max-width: 991px){
    .articlesHead{ flex-direction:column; align-items:flex-start; }
}

.articlesTitle{
    color: var(--ink);
    font-size: clamp(18px, 2.2vw, 26px);
    line-height:1.1;
    margin:0 0 6px;
    letter-spacing:-0.02em;
}
.articlesSub{
    margin:0;
    color: rgba(15,23,42,.66);
    font-size:13px;
    max-width:78ch;
}

.articlesAllBtn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    text-decoration:none;
    padding:10px 12px;
    border-radius:12px;

    background: rgba(255,255,255,.92);
    border: 1px solid rgba(15,23,42,.10);
    color: rgba(15,23,42,.88);
    font-weight:800;
    white-space:nowrap;
    box-shadow: 0 10px 20px rgba(15,23,42,.06);
}
.articlesAllBtn:hover{ background:#fff; color: var(--ink); }

.articlesList{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
}

.articleRow{
    text-decoration:none;
    display:block;
    border-radius:16px;
    padding:14px 14px 12px;

    background: rgba(255,255,255,.92);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 10px 22px rgba(15,23,42,.06);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.articleRow:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15,23,42,.10);
    border-color: rgba(109,40,217,.18);
}

.articleRowTop{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
}

.articlePill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:999px;

    background: rgba(109,40,217,.08);
    border: 1px solid rgba(109,40,217,.12);
    color: rgba(15,23,42,.82);
    font-size:12px;
    font-weight:800;
}

.articleMeta{
    color: rgba(15,23,42,.55);
    font-size:12px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
}

.articleRowTitle{
    color: var(--ink);
    font-weight:950;
    font-size:16px;
    line-height:1.2;
    margin:0 0 6px;
    letter-spacing:-0.01em;
}

.articleRowExcerpt{
    color: rgba(15,23,42,.70);
    font-size:13px;
    line-height:1.45;
    margin:0 0 10px;
    max-width:92ch;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.articleRowCta{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-weight:900;
    color:#fff;
    padding:8px 10px;
    border-radius:12px;
    background: var(--grad);
    width: fit-content;
    box-shadow: 0 12px 22px rgba(109,40,217,.18);
}

/* =========================
   App (authed) layout
========================= */
#appPane{ height:100%; }

/* Dashboard grid (projects) */
.dashGrid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap:12px;
}

.dashCard{
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    padding:12px;
    cursor:pointer;
    box-shadow: 0 10px 22px rgba(15,23,42,.06);
    transition: transform .10s ease, box-shadow .10s ease;
}
.dashCard:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15,23,42,.10);
}

.dashThumbWrap{
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 14px;
    overflow:hidden;
    background:#fff;
    margin-bottom:10px;
}
.dashThumb{ width:100%; height:auto; display:block; }
.dashTitle{ font-weight:900; }
.dashMeta{ color:var(--muted); font-size:12px; margin-top:4px; }

/* App topbar row inside app views */
.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
    gap:12px;
    flex-wrap:wrap;
}

/* Two-column layout (canvas + sidepane) */
.layout{
    height: calc(100% - 56px);
    display:grid;
    grid-template-columns: 1fr 360px;
    gap:12px;
    align-items:stretch;
}
@media (max-width: 992px){
    .layout{ grid-template-columns: 1fr; height:auto; }
}

/* Canvas pane */
.canvasPane{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    overflow:hidden;
}

#wheelWrap {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    aspect-ratio: 1 / 1; /* gør container kvadratisk */
    position: relative;
}

#wheelCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

#wheel{
    width:100%;
    height:100%;
    display:block;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 14px;
    background:#fff;
    box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

/* Side pane scroll */
.sidePane{ height:100%; overflow:auto; }

/* Lists */
.listItem{
    padding: 10px 8px;
    border-bottom:1px solid rgba(15,23,42,.08);
}
.listItem:hover{ background: rgba(249,250,255,.9); }

.itemTitle{ font-weight:800; color:#242424; }
.itemMeta{ color:var(--muted); font-size:12px; margin-top:4px; }

.listItem button{ padding:6px 10px; font-size:12px; }
.btn i.bi{ display:inline-block; width:1em; }

/* Icon button */
.icon-btn{
    width:32px;
    height:32px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    line-height:1;
    border-radius:999px;
}

/* Small inline button */
.btn-xs{
    padding:4px 8px;
    font-size:12px;
    border-radius:10px;
}

/* Invite + members */
.inviteBox{
    margin-top:12px;
    padding:12px;
    border:1px dashed rgba(15,23,42,.18);
    border-radius:14px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

/* Tooltip */
#wheelTooltip{
    position:fixed;
    display:none;
    pointer-events:none;
    z-index:9999;
    background: rgba(255,255,255,0.98);
    border: 1px solid rgba(15,23,42,0.12);
    border-radius: 12px;
    padding:8px 10px;
    box-shadow: 0 10px 26px rgba(15,23,42,.12);
    font:12px system-ui;
    color: var(--ink);
    max-width:260px;
}

/* =========================
   Optional: make Bootstrap "dark" buttons fit light theme
   (Your header uses btn-dark for "Nyt projekt")
========================= */
.btn-dark{
    background: var(--grad) !important;
    border: 0 !important;
    font-weight: 900;
    box-shadow: 0 14px 28px rgba(109,40,217,.18);
}
.btn-dark:hover{ filter:brightness(1.03); }

.btn-outline-secondary{
    border-color: rgba(15,23,42,.18) !important;
    color: rgba(15,23,42,.78) !important;
}
.btn-outline-secondary:hover{
    background: rgba(15,23,42,.04) !important;
}

/* Make .text-light readable on light backgrounds (your dashboard heading uses text-light) */
.text-light{ color: var(--ink) !important; }


/* =========================================================
   Circlo Buttons (match logo + light background)
   Paste AFTER the Light Theme CSS
========================================================= */

/* Brand button tokens */
:root{
    --brand-ink: #2b1453;              /* deep logo purple vibe */
    --brand-1: #6D28D9;                /* purple */
    --brand-2: #EC4899;                /* pink */
    --brand-3: #F97316;                /* orange */
    --brand-grad: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3));

    --btn-radius: 14px;
    --btn-shadow: 0 12px 22px rgba(109,40,217,.18);
    --btn-shadow-hover: 0 16px 30px rgba(109,40,217,.22);

    --btn-soft-bg: rgba(109,40,217,.08);
    --btn-soft-border: rgba(109,40,217,.16);
    --btn-soft-hover: rgba(109,40,217,.12);

    --btn-outline-border: rgba(43,20,83,.20);
    --btn-outline-hover: rgba(43,20,83,.05);
}

/* Base for ALL bootstrap buttons */
.btn{
    border-radius: var(--btn-radius) !important;
    font-weight: 850 !important;
    letter-spacing: -0.01em;
    transition: transform .10s ease, filter .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:active{ transform: translateY(1px); }

/* PRIMARY — logo accent (gradient) */
.btn-primary,
.btn-dark{ /* you use btn-dark for “Nyt projekt” */
    border: 0 !important;
    background: var(--brand-grad) !important;
    color: #fff !important;
    box-shadow: var(--btn-shadow);
}
.btn-primary:hover,
.btn-dark:hover{
    filter: brightness(1.03);
    box-shadow: var(--btn-shadow-hover);
}

/* SECONDARY — soft purple “complementary” */
.btn-secondary{
    background: var(--btn-soft-bg) !important;
    border: 1px solid var(--btn-soft-border) !important;
    color: var(--brand-ink) !important;
}
.btn-secondary:hover{
    background: var(--btn-soft-hover) !important;
}

/* OUTLINE SECONDARY — clean, slightly purple/ink */
.btn-outline-secondary{
    background: transparent !important;
    border: 1px solid var(--btn-outline-border) !important;
    color: rgba(43,20,83,.82) !important;
}
.btn-outline-secondary:hover{
    background: var(--btn-outline-hover) !important;
    border-color: rgba(43,20,83,.26) !important;
    color: var(--brand-ink) !important;
}

/* OUTLINE DARK — make it match the system (you use it for zoom buttons) */
.btn-outline-dark{
    border: 1px solid var(--btn-outline-border) !important;
    color: rgba(43,20,83,.82) !important;
}
.btn-outline-dark:hover{
    background: var(--btn-outline-hover) !important;
}

/* INFO — make it “brand-soft” (your 100% zoom button) */
.btn-info{
    border: 1px solid rgba(236,72,153,.18) !important;
    background: rgba(236,72,153,.10) !important;
    color: var(--brand-ink) !important;
}
.btn-info:hover{
    background: rgba(236,72,153,.14) !important;
}

/* LIGHT — for export pills in modal */
.btn-light{
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    color: rgba(15,23,42,.85) !important;
    box-shadow: 0 10px 20px rgba(15,23,42,.06);
}
.btn-light:hover{
    background: #fff !important;
}

/* DANGER / SUCCESS — keep semantic colors but softer for the light UI */
.btn-danger{
    background: rgba(220,53,69,.12) !important;
    border: 1px solid rgba(220,53,69,.22) !important;
    color: rgba(160,20,35,.95) !important;
}
.btn-danger:hover{ background: rgba(220,53,69,.16) !important; }

.btn-outline-danger{
    border-color: rgba(220,53,69,.30) !important;
    color: rgba(160,20,35,.95) !important;
}
.btn-outline-danger:hover{ background: rgba(220,53,69,.08) !important; }

.btn-success{
    background: rgba(25,135,84,.12) !important;
    border: 1px solid rgba(25,135,84,.22) !important;
    color: rgba(12,95,55,.95) !important;
}
.btn-success:hover{ background: rgba(25,135,84,.16) !important; }

/* Small buttons look nicer */
.btn-sm{
    border-radius: 12px !important;
    font-weight: 850 !important;
}


/* =========================================================
   CIRClO – NORDIC LIGHT THEME
   - cool whites, blue-gray neutrals, calm accents
   - keeps Circlo purple as PRIMARY accent
   - uses pink/orange very sparingly (ring vibe)
========================================================= */

/* =========================
   Tokens
========================= */
:root{
    /* Nordic base surfaces */
    --bg:        #f3f6fb;     /* cool, light */
    --bg2:       #ffffff;
    --surface:   rgba(255,255,255,.88);
    --surface-2: rgba(255,255,255,.94);

    /* Typography */
    --ink:   #0f172a;         /* slate */
    --muted: #5f6b7a;         /* nordic gray */
    --border:#e3e8f2;

    /* Brand accents (logo aligned) */
    --brand:     #4c1d95;     /* deep purple (calm) */
    --brand-1:   #6D28D9;     /* purple */
    --brand-2:   #EC4899;     /* pink */
    --brand-3:   #F97316;     /* orange */

    /* A "Nordic" gradient: mostly purple, subtle warm edge */
    --brand-grad: linear-gradient(90deg,
    rgba(109,40,217,1) 0%,
    rgba(109,40,217,1) 55%,
    rgba(236,72,153,1) 82%,
    rgba(249,115,22,1) 100%);

    /* Soft functional accent (icy blue) */
    --ice: #2f7dd1;
    --ice-soft: rgba(47,125,209,.10);

    /* Shadows (calm, minimal) */
    --shadow-sm: 0 6px 18px rgba(15,23,42,.06);
    --shadow-md: 0 16px 46px rgba(15,23,42,.10);

    /* radii */
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 22px;
}

/* =========================
   Base
========================= */
*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
    color: var(--ink);
    background: var(--bg);
    overflow-x:hidden;
    position:relative;
}

/* Nordic background: barely-there gradients + calm paper feel */
body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    background:
            radial-gradient(900px 560px at 10% 0%, rgba(109,40,217,.07), transparent 62%),
            radial-gradient(900px 560px at 95% 10%, rgba(47,125,209,.06), transparent 62%),
            radial-gradient(1000px 680px at 50% 100%, rgba(249,115,22,.05), transparent 65%),
            linear-gradient(180deg, #ffffff 0%, var(--bg) 55%, #ffffff 100%);
}

/* Utilities */
.hidden{ display:none !important; }
.muted{ color:var(--muted); }
.small{ font-size:12px; }

/* =========================
   Top bar
========================= */
#topBar{
    opacity:0;
    pointer-events:none;
    transition: opacity .18s ease;
}
body.is-authed #topBar{
    opacity:1;
    pointer-events:auto;
}

.bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 16px;

    background: rgba(255,255,255,.75);
    border-bottom: 1px solid rgba(15,23,42,.08);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

.brand-logo{
    padding:10px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 10px 26px rgba(15,23,42,.08);
}

/* =========================
   Forms
========================= */
input, select, button, textarea{
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius: 12px;
    font-size:14px;
}

input, select, textarea{
    background:#fff;
    color:var(--ink);
}

input::placeholder, textarea::placeholder{
    color: rgba(95,107,122,.75);
}

input:focus, select:focus, textarea:focus{
    outline:none;
    border-color: rgba(109,40,217,.30);
    box-shadow: 0 0 0 4px rgba(109,40,217,.10);
}

hr{
    border:none;
    border-top:1px solid rgba(15,23,42,.10);
    margin:14px 0;
}

/* =========================
   Layout containers
========================= */
.container{
    width:100%;
    padding:12px;
    min-height:100vh;
    height:auto;
    max-width:none;
}

body.is-authed .container{
    min-height: calc(100vh - 58px);
    height: calc(100vh - 58px);
}

/* =========================
   Cards (Nordic: soft surface + thin border)
========================= */
.card{
    background: var(--surface);
    border: 1px solid rgba(15,23,42,.08);
    border-radius: var(--r-md);
    padding:14px;
    box-shadow: var(--shadow-sm);
}

.card-header{
    background: rgba(255,255,255,.70);
    border-bottom: 1px solid rgba(15,23,42,.08);
}

/* =========================
   HERO (Nordic minimal)
========================= */
.heroCard{
    position:relative;
    border-radius: var(--r-lg);
    padding:28px;
    overflow:hidden;

    background:
            linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));

    border: 1px solid rgba(15,23,42,.08);
    box-shadow: var(--shadow-md);
}

/* a thin “Nordic accent stripe” */
.heroCard::after{
    content:"";
    position:absolute;
    left:0; top:0; right:0;
    height:4px;
    background: var(--brand-grad);
    opacity:.9;
}

.heroGlow{ display:none; }

.heroTitle{
    color: var(--ink);
    font-size: clamp(28px, 4.2vw, 46px);
    line-height:1.05;
    letter-spacing:-0.02em;
    margin: 10px 0 12px;
}

.gradText{
    background: var(--brand-grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.heroLead{
    color: rgba(15,23,42,.72);
    font-size:16px;
    max-width:58ch;
}

.heroBadges{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:16px;
}

.heroBadge{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:999px;

    background: rgba(255,255,255,.90);
    border: 1px solid rgba(15,23,42,.08);
    color: rgba(15,23,42,.72);
    font-size:13px;
    box-shadow: 0 8px 18px rgba(15,23,42,.05);
}

/* Steps */
.heroSteps{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px;
}
@media (max-width: 991px){
    .heroSteps{ grid-template-columns: 1fr; }
}

.step{
    display:flex;
    gap:12px;
    padding:12px;
    border-radius: 16px;

    background: rgba(255,255,255,.92);
    border: 1px solid rgba(15,23,42,.08);
}

.stepIcon{
    width:38px;
    height:38px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;

    /* Nordic icon style: calm purple on icy background */
    background: rgba(109,40,217,.10);
    color: var(--brand);
    border: 1px solid rgba(109,40,217,.16);
}

.stepTitle{
    color: var(--ink);
    font-weight:900;
    font-size:14px;
    margin-bottom:2px;
}
.stepText{
    color: rgba(15,23,42,.66);
    font-size:13px;
}

.heroFineprint{
    color: rgba(15,23,42,.55);
    font-size:12px;
}

/* =========================
   Articles (Nordic clean list)
========================= */
.articlesCard{ padding:22px; }

.articlesTitle{
    color: var(--ink);
    font-size: clamp(18px, 2.2vw, 26px);
    line-height:1.1;
    margin:0 0 6px;
    letter-spacing:-0.02em;
}
.articlesSub{
    margin:0;
    color: rgba(15,23,42,.66);
    font-size:13px;
    max-width:78ch;
}

.articleRow{
    text-decoration:none;
    display:block;
    border-radius:16px;
    padding:14px 14px 12px;

    background: rgba(255,255,255,.92);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 10px 22px rgba(15,23,42,.05);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.articleRow:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15,23,42,.10);
    border-color: rgba(109,40,217,.18);
}

.articlePill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:999px;

    background: rgba(47,125,209,.08);
    border: 1px solid rgba(47,125,209,.14);
    color: rgba(15,23,42,.80);
    font-size:12px;
    font-weight:850;
}

.articleRowTitle{
    color: var(--ink);
    font-weight:950;
    font-size:16px;
    line-height:1.2;
    margin:0 0 6px;
}

.articleRowExcerpt{
    color: rgba(15,23,42,.70);
    font-size:13px;
    line-height:1.45;
    margin:0 0 10px;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.articleRowCta{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-weight:900;
    color: var(--brand);
    padding:8px 10px;
    border-radius:12px;
    background: rgba(109,40,217,.08);
    border: 1px solid rgba(109,40,217,.14);
}

/* =========================
   App pieces
========================= */
.dashCard{
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    padding:12px;
    cursor:pointer;
    box-shadow: 0 10px 22px rgba(15,23,42,.05);
    transition: transform .10s ease, box-shadow .10s ease;
}
.dashCard:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15,23,42,.10);
}

#wheel{
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 14px;
    background:#fff;
    box-shadow: 0 10px 22px rgba(15,23,42,.05);
}

/* Lists */
.listItem{
    padding: 10px 8px;
    border-bottom:1px solid rgba(15,23,42,.08);
}
.listItem:hover{ background: rgba(255,255,255,.70); }

/* Fix .text-light in your dashboard header */
.text-light{ color: var(--ink) !important; }

/* =========================================================
   NORDIC BUTTON SYSTEM (Bootstrap-compatible)
========================================================= */
:root{
    --btn-radius: 14px;
    --btn-shadow: 0 10px 22px rgba(15,23,42,.08);
    --btn-shadow-hover: 0 14px 30px rgba(15,23,42,.12);
}

/* Base */
.btn{
    border-radius: var(--btn-radius) !important;
    font-weight: 850 !important;
    letter-spacing: -0.01em;
    transition: transform .10s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:active{ transform: translateY(1px); }

/* PRIMARY: calm purple (Nordic), gradient only on hover */
.btn-primary,
.btn-dark{
    background: var(--brand-1) !important;
    border: 1px solid rgba(109,40,217,.35) !important;
    color:#fff !important;
    box-shadow: var(--btn-shadow);
}
.btn-primary:hover,
.btn-dark:hover{
    background: var(--brand-grad) !important;   /* subtle brand ring feel */
    box-shadow: var(--btn-shadow-hover);
}

/* SECONDARY: light ice / calm */
.btn-secondary{
    background: rgba(47,125,209,.10) !important;
    border: 1px solid rgba(47,125,209,.22) !important;
    color: rgba(15,23,42,.88) !important;
}
.btn-secondary:hover{
    background: rgba(47,125,209,.14) !important;
}

/* OUTLINE SECONDARY: minimal nordic outline */
.btn-outline-secondary{
    background: transparent !important;
    border: 1px solid rgba(15,23,42,.18) !important;
    color: rgba(15,23,42,.78) !important;
}
.btn-outline-secondary:hover{
    background: rgba(15,23,42,.04) !important;
    border-color: rgba(15,23,42,.24) !important;
    color: rgba(15,23,42,.88) !important;
}

/* OUTLINE DARK: same style */
.btn-outline-dark{
    background: transparent !important;
    border: 1px solid rgba(15,23,42,.18) !important;
    color: rgba(15,23,42,.78) !important;
}
.btn-outline-dark:hover{ background: rgba(15,23,42,.04) !important; }

/* INFO: use ice color (Nordic accent) */
.btn-info{
    background: var(--ice-soft) !important;
    border: 1px solid rgba(47,125,209,.22) !important;
    color: rgba(15,23,42,.88) !important;
}
.btn-info:hover{ background: rgba(47,125,209,.14) !important; }

/* LIGHT: clean pill buttons */
.btn-light{
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    color: rgba(15,23,42,.85) !important;
    box-shadow: 0 10px 20px rgba(15,23,42,.06);
}
.btn-light:hover{ background:#fff !important; }

/* DANGER/SUCCESS: softer nordic semantics */
.btn-danger{
    background: rgba(220,53,69,.10) !important;
    border: 1px solid rgba(220,53,69,.22) !important;
    color: rgba(160,20,35,.95) !important;
}
.btn-danger:hover{ background: rgba(220,53,69,.14) !important; }

.btn-success{
    background: rgba(25,135,84,.10) !important;
    border: 1px solid rgba(25,135,84,.20) !important;
    color: rgba(12,95,55,.95) !important;
}
.btn-success:hover{ background: rgba(25,135,84,.14) !important; }

/* Small buttons */
.btn-sm{
    border-radius: 12px !important;
    font-weight: 850 !important;
}

/* Hero CTA buttons (keep your custom classes consistent) */
.btnHeroPrimary{
    background: var(--brand-1) !important;
    border: 1px solid rgba(109,40,217,.35) !important;
    color:#fff !important;
    box-shadow: var(--btn-shadow);
}
.btnHeroPrimary:hover{
    background: var(--brand-grad) !important;
    box-shadow: var(--btn-shadow-hover);
}
.btnHeroGhost{
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(15,23,42,.12) !important;
    color: rgba(15,23,42,.86) !important;
}
.btnHeroGhost:hover{ background:#fff !important; }