:root {
    --vit: #ffffff;
    --yta: #14121f;
    --panel: #1c1930;
    --bock: #f1eef8;
    --marin: #14121f;
    --marin-ljus: #211d33;
    --accent: #3d3577;
    --accent-ljus: #55499e;
    --accent-glod: #8b7cf0;
    --linje: #332e4d;
    --dammad: #9c97b3;
    --dammad-ljus: #a8a4bd;
    --font-serif: Georgia, 'Times New Roman', serif;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--yta);
    color: var(--bock);
}

input, select, textarea {
    background: var(--panel);
    color: var(--bock);
}

/* ---------- Layout / sidomeny ---------- */

.layout {
    display: flex;
    min-height: 100vh;
}

.sidomeny {
    width: 240px;
    flex-shrink: 0;
    background: var(--marin);
    color: var(--vit);
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.25rem;
}

.sidomeny-topp {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 2.5rem;
}

.logga {
    width: 34px;
    height: 34px;
}

.varumarke {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    color: var(--vit);
}

.sidomeny-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex-grow: 1;
}

.sidomeny-nav a {
    color: var(--dammad-ljus);
    text-decoration: none;
    padding: 0.55rem 0.8rem;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: background 0.12s ease, color 0.12s ease;
}

.sidomeny-nav a:hover {
    background: var(--marin-ljus);
    color: var(--vit);
}

.sidomeny-nav a.aktiv {
    background: var(--accent);
    color: var(--vit);
}

.sidomeny-grupp {
    display: flex;
    flex-direction: column;
}

.grupp-knapp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    color: var(--dammad-ljus);
    text-align: left;
    text-decoration: none;
    padding: 0.55rem 0.8rem;
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.grupp-knapp:hover {
    background: var(--marin-ljus);
    color: var(--vit);
}

.grupp-knapp.aktiv {
    color: var(--vit);
}

.grupp-pil {
    transition: transform 0.15s ease;
}

.grupp-knapp.oppen .grupp-pil {
    transform: rotate(90deg);
}

.grupp-lista {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-left: 0.6rem;
    margin: 0.15rem 0 0.3rem;
    border-left: 1px solid var(--marin-ljus);
}

.grupp-lista.dold {
    display: none;
}

.grupp-lista a {
    color: var(--dammad-ljus);
    text-decoration: none;
    padding: 0.45rem 0.8rem;
    border-radius: 6px;
    font-size: 0.88rem;
    transition: background 0.12s ease, color 0.12s ease;
}

.grupp-lista a:hover {
    background: var(--marin-ljus);
    color: var(--vit);
}

.grupp-lista a.aktiv {
    background: var(--accent);
    color: var(--vit);
}

.sidomeny-fot {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.82rem;
    padding-top: 1rem;
    border-top: 1px solid var(--marin-ljus);
}

.sidomeny-fot .anvandare {
    color: var(--dammad-ljus);
}

.sidomeny-fot a {
    color: var(--vit);
    text-decoration: none;
    opacity: 0.8;
}

.sidomeny-fot a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* ---------- Innehåll ---------- */

.innehall {
    flex-grow: 1;
    padding: 2.25rem 2.75rem;
    background: var(--yta);
}

.hero {
    background: linear-gradient(135deg, var(--marin) 0%, var(--accent) 100%);
    color: var(--vit);
    border-radius: 14px;
    padding: 2.5rem 3rem;
    margin-bottom: 2.5rem;
}

.hero .kicker {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    color: var(--dammad-ljus);
    margin: 0 0 0.8rem;
}

.hero h1 {
    font-family: var(--font-serif);
    font-size: 2.1rem;
    margin: 0 0 0.6rem;
}

.hero p {
    margin: 0;
    color: var(--dammad-ljus);
    max-width: 40ch;
}

.innehall-header {
    border-bottom: 1px solid var(--linje);
    padding-bottom: 1.1rem;
    margin-bottom: 1.75rem;
}

.innehall-header h1 {
    font-family: var(--font-serif);
    font-size: 1.85rem;
    margin: 0 0 0.4rem;
    color: var(--vit);
}

.ingress {
    color: var(--dammad);
    margin: 0;
}

/* ---------- Underflikar (in-page, en URL per huvudflik) ---------- */

.flikrad {
    display: flex;
    gap: 0.4rem;
    border-bottom: 1px solid var(--linje);
    margin-bottom: 1.75rem;
}

.flik {
    background: none;
    border: none;
    padding: 0.7rem 1rem;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    color: var(--dammad);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.flik:hover {
    color: var(--bock);
}

.flik.aktiv {
    color: var(--bock);
    border-bottom: 2px solid var(--accent-glod);
    font-weight: 600;
}

.flik-innehall.dold {
    display: none;
}

/* ---------- Verktygshuvud / knappar ---------- */

.verktygshuvud {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.knapprad {
    display: flex;
    gap: 0.6rem;
}

.knapp {
    display: inline-block;
    padding: 0.55rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
}

.knapp-primar {
    background: var(--accent);
    color: var(--vit);
}

.knapp-primar:hover {
    background: var(--accent-glod);
}

.knapp-sekundar {
    background: var(--panel);
    color: var(--bock);
    border: 1px solid var(--linje);
}

.knapp-sekundar:hover {
    border-color: var(--bock);
}

.lank-knapp {
    background: none;
    border: none;
    padding: 0;
    color: #b00020;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: var(--font-sans);
}

/* ---------- Tabeller ---------- */

.tabell {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.tabell th {
    text-align: left;
    color: var(--dammad);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--linje);
}

.tabell td {
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid var(--linje);
}

.tabell-atgarder {
    display: flex;
    gap: 0.8rem;
    align-items: center;
}

.tabell-atgarder a {
    color: var(--accent-glod);
    text-decoration: none;
    font-size: 0.85rem;
}

.tabell-atgarder a:hover {
    text-decoration: underline;
}

/* ---------- Statusmärken ---------- */

.badge {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.badge-betald {
    background: #e3f5e9;
    color: #1c7a3f;
}

.badge-forfallen {
    background: #fbe4e4;
    color: #b00020;
}

.badge-skickad {
    background: #ece9fb;
    color: var(--accent-ljus);
}

/* ---------- Formulär ---------- */

.formular {
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.formular-rad {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.formular-rad label {
    font-size: 0.82rem;
    color: var(--dammad);
}

.formular-rad input,
.formular-rad select {
    padding: 0.55rem 0.7rem;
    font-size: 1rem;
    border: 1px solid var(--linje);
    border-radius: 6px;
    font-family: var(--font-sans);
}

.formular-rad input:focus,
.formular-rad select:focus {
    outline: none;
    border-color: var(--accent);
}

.formular-rad-dubbel,
.formular-rad-trippel {
    flex-direction: row;
    gap: 1rem;
}

.formular-rad-dubbel > div,
.formular-rad-trippel > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.formular-rad-dubbel > div label,
.formular-rad-trippel > div label {
    font-size: 0.82rem;
    color: var(--dammad);
}

.formular-underrubrik {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    margin: 0.5rem 0 0.75rem;
}

.formular-knappar {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.faktura-rad {
    display: grid;
    grid-template-columns: 1fr 100px 130px 32px;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
    align-items: center;
}

.faktura-rad input {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--linje);
    border-radius: 6px;
    font-family: var(--font-sans);
}

.faktura-rad input:focus {
    outline: none;
    border-color: var(--accent);
}

.ta-bort-rad {
    background: none;
    border: 1px solid var(--linje);
    border-radius: 6px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    color: var(--dammad);
    font-size: 1rem;
}

.ta-bort-rad:hover {
    border-color: #b00020;
    color: #b00020;
}

.tva-kolumner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

/* ---------- Ljusprogrammering ---------- */

.knapp-fara {
    background: #b00020;
    color: var(--vit);
}

.knapp-fara:hover {
    background: #8a0018;
}

.badge-ansluten {
    background: #e3f5e9;
    color: #1c7a3f;
}

.badge-ej-ansluten {
    background: #fbe4e4;
    color: #b00020;
}

.scen-rutnat {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}

.scen-kort {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid var(--linje);
    border-radius: 10px;
    padding: 1rem;
    background: var(--panel);
}

.scen-knapp {
    width: 100%;
    padding: 1.1rem 0.6rem;
    border-radius: 8px;
    border: none;
    background: var(--marin);
    color: var(--vit);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.scen-knapp:hover {
    background: var(--accent);
}

.scen-kort-atgarder {
    display: flex;
    gap: 0.8rem;
    justify-content: space-between;
    font-size: 0.82rem;
}

.scen-kort-atgarder a {
    color: var(--accent-glod);
    text-decoration: none;
}

.scen-kort-atgarder a:hover {
    text-decoration: underline;
}

.fixture-block {
    border: 1px solid var(--linje);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    background: var(--panel);
}

.fixture-block h3 {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    margin: 0 0 1rem;
}

.slider-rad {
    display: grid;
    grid-template-columns: 140px 1fr 48px;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.7rem;
}

.slider-rad label {
    font-size: 0.85rem;
    color: var(--dammad);
}

.slider-rad output {
    font-size: 0.85rem;
    color: var(--bock);
    text-align: right;
}

.slider-rad input[type="range"] {
    width: 100%;
}

:root {
    --rumsvy-bredd: clamp(380px, 48vw, 960px);
}

@media (max-width: 900px) {
    :root {
        --rumsvy-bredd: 0px;
    }
    .rum-panel {
        display: none;
    }
}

.scen-redigera-sida {
    padding-right: calc(var(--rumsvy-bredd) + 2.5rem);
}

.scen-redigera-sida .formular {
    max-width: 640px;
}

.rum-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--rumsvy-bredd);
    background: #050409;
    border-left: 1px solid var(--marin-ljus);
    z-index: 20;
    display: flex;
    flex-direction: column;
}

.rum-panel canvas {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
    touch-action: none;
}

.rum-panel canvas.rum-drar {
    cursor: grabbing;
}

.farg-kryssrad {
    display: flex;
    gap: 1.2rem;
    padding: 0.3rem 0;
}

.farg-kryss {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.falt-hjalp {
    font-size: 0.75rem;
    color: var(--dammad);
    margin: 0.25rem 0 0;
}


.rum-panel .rum-bildtext {
    margin: 0;
    padding: 0.85rem 1.25rem;
    font-size: 0.78rem;
    color: var(--dammad-ljus);
    background: var(--marin);
}

/* ---------- Budgetverktyg ---------- */

.budget-post-rad {
    display: grid;
    grid-template-columns: 1fr 100px 90px 32px;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    align-items: center;
}

.budget-post-rad input,
.budget-post-rad select {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--linje);
    border-radius: 6px;
    font-family: var(--font-sans);
    width: 100%;
}

.budget-post-rad input:focus,
.budget-post-rad select:focus {
    outline: none;
    border-color: var(--accent);
}

.budget-post-header span {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dammad);
    font-weight: 600;
}

.biljettekonomi {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    background: #f7f6fb;
    border: 1px solid var(--linje);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin: 1.5rem 0 2rem;
}

.biljettekonomi-falt {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 240px;
}

.biljettekonomi-falt label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--marin);
}

.biljettekonomi-rad {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.biljettekonomi-rad input,
.biljettekonomi-rad select {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--linje);
    border-radius: 6px;
    font-family: var(--font-sans);
    background: var(--vit);
    color: var(--marin);
}

.biljettekonomi-rad input {
    flex: 1;
    min-width: 0;
}

.biljettekonomi-rad input:focus,
.biljettekonomi-rad select:focus {
    outline: none;
    border-color: var(--accent);
}

.biljettekonomi-hjalp {
    font-size: 0.78rem;
    color: #6b6874;
    margin: 0;
}

.prisforslag-ruta {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-end;
    background: #f4f2fb;
    border: 1px solid var(--linje);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin: 1.5rem 0 2rem;
}

.prisforslag-falt {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 220px;
}

.prisforslag-falt label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--marin);
}

.prisforslag-falt input {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--linje);
    border-radius: 6px;
    font-family: var(--font-sans);
    background: var(--vit);
    color: var(--marin);
}

.prisforslag-resultat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 220px;
}

.prisforslag-varde {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--accent);
}

.positiv-text {
    color: #1c7a3f;
    font-weight: 600;
}

.negativ-text {
    color: #b00020;
    font-weight: 600;
}

.analys-rad {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.analys-kort {
    background: var(--panel);
    color: var(--vit);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    min-width: 190px;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.analys-etikett {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dammad-ljus);
}

.analys-varde {
    font-family: var(--font-serif);
    font-size: 1.6rem;
}

.analys-varde.positiv { color: #8de6ab; }
.analys-varde.negativ { color: #ff9494; }

.analys-underrubrik {
    font-size: 0.72rem;
    color: var(--dammad-ljus);
}

/* ---------- Login ---------- */

.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    font-family: var(--font-sans);
    background: var(--marin);
}

.login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    width: 300px;
    padding: 2.5rem 2rem;
    background: var(--vit);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.login-logga {
    width: 56px;
    height: 56px;
    margin-bottom: 0.4rem;
}

.login-form h1 {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    margin: 0 0 1rem;
    text-align: center;
    color: var(--marin);
}

.login-form label {
    align-self: flex-start;
    font-size: 0.82rem;
    color: #6b6874;
}

.login-form input {
    width: 100%;
    padding: 0.55rem 0.7rem;
    font-size: 1rem;
    border: 1px solid var(--linje);
    border-radius: 6px;
    font-family: var(--font-sans);
    background: var(--vit);
    color: var(--marin);
}

.login-form input:focus {
    outline: none;
    border-color: var(--accent);
}

.login-form button {
    width: 100%;
    padding: 0.65rem;
    margin-top: 0.8rem;
    background: var(--marin);
    color: var(--vit);
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    cursor: pointer;
}

.login-form button:hover {
    background: var(--accent);
}

.fel {
    color: #d33;
    font-size: 0.85rem;
    margin: 0;
}

/* ---------- Samarbetspartners ---------- */

.partner-sokrad {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0 0.5rem;
}

.partner-sokrad input[type="search"] {
    flex: 1;
    max-width: 460px;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--linje);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: var(--font-sans);
}

.partner-sokrad input[type="search"]:focus {
    outline: none;
    border-color: var(--accent-ljus);
}

.partner-antal {
    color: var(--dammad);
    font-size: 0.9rem;
    white-space: nowrap;
}

.partner-bokstav {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--accent-glod);
    border-bottom: 1px solid var(--linje);
    margin: 1.75rem 0 0.75rem;
    padding-bottom: 0.25rem;
}

.partner-kort {
    border: 1px solid var(--linje);
    border-radius: 10px;
    margin-bottom: 0.6rem;
    background: var(--panel);
    overflow: hidden;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.partner-kort:hover {
    border-color: var(--accent-ljus);
}

.partner-kort.oppen {
    border-color: var(--accent-ljus);
    box-shadow: 0 4px 18px rgba(20, 18, 31, 0.08);
}

.partner-huvudrad {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 0.85rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-sans);
    font-size: 1rem;
}

.partner-initial {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--marin);
    color: var(--vit);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.partner-namn-block {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.partner-namn {
    font-weight: 600;
    color: var(--bock);
}

.partner-forhandsvisning {
    color: var(--dammad);
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.partner-pil {
    color: var(--dammad-ljus);
    font-size: 1.3rem;
    transition: transform 0.15s ease;
}

.partner-kort.oppen .partner-pil {
    transform: rotate(90deg);
}

.partner-detaljer {
    padding: 0.25rem 1.25rem 1.25rem 4.3rem;
    border-top: 1px solid var(--linje);
}

.partner-detaljer .formular {
    margin-top: 1rem;
    max-width: 460px;
}

.partner-falt {
    margin-top: 0.9rem;
}

.partner-falt-etikett {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dammad);
    margin-bottom: 0.2rem;
}

.partner-falt-varde {
    display: block;
    color: var(--bock);
    white-space: pre-line;
}

.partner-atgarder {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.1rem;
}

.partner-detaljer.dold,
.partner-info.dold,
.partner-redigera-form.dold,
.partner-kort.dold,
.partner-bokstav.dold,
#partner-inga-traffar.dold {
    display: none;
}

.formular-rad textarea {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--linje);
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    resize: vertical;
}

.formular-rad textarea:focus {
    outline: none;
    border-color: var(--accent-ljus);
}

/* ---------- Modal ---------- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 31, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 1rem;
    z-index: 50;
}

.modal-overlay.dold {
    display: none;
}

.modal {
    background: var(--panel);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    width: 100%;
    max-width: 500px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-huvud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.modal-huvud h2 {
    font-family: var(--font-serif);
    margin: 0;
}

.modal-stang {
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--dammad);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
}

.modal-stang:hover {
    color: var(--bock);
}

/* ---------- Marknadsföringsplaner ---------- */

.modal-bred {
    max-width: 640px;
}

.formular-tva-kolumner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}

.kryss-grupp {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    padding: 0.35rem 0;
}

.kryss-grupp label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: normal;
    cursor: pointer;
}

.plan-lista {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.plan-kort {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--linje);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    background: var(--panel);
}

.plan-kort-lank {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    text-decoration: none;
    color: var(--bock);
    min-width: 0;
}

.plan-namn {
    font-weight: 600;
    font-size: 1.05rem;
}

.plan-datum {
    color: var(--dammad);
    white-space: nowrap;
}

.plan-progress {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--dammad);
    font-size: 0.9rem;
    white-space: nowrap;
}

.plan-progress-stor {
    margin: 0 0 1rem;
    font-size: 1rem;
}

.plan-progress-bar {
    display: inline-block;
    width: 140px;
    height: 8px;
    border-radius: 4px;
    background: var(--linje);
    overflow: hidden;
}

.plan-progress-stor .plan-progress-bar {
    width: 260px;
}

.plan-progress-bar span {
    display: block;
    height: 100%;
    background: var(--accent-ljus);
    border-radius: 4px;
}

.plan-varning {
    background: #fdf3d7;
    border: 1px solid #e8d28a;
    border-radius: 8px;
    padding: 0.7rem 1rem;
    margin-bottom: 0.75rem;
    color: var(--marin);
}

.plan-regler {
    border: 1px solid #e0b4b4;
    background: #fdf5f5;
    border-radius: 8px;
    padding: 0.7rem 1rem;
    margin-bottom: 1.25rem;
    color: var(--marin);
}

.plan-regler summary {
    cursor: pointer;
    font-weight: 600;
}

.plan-regler ul {
    margin: 0.6rem 0 0.2rem;
    padding-left: 1.2rem;
}

.plan-regler li {
    margin-bottom: 0.35rem;
}

.plan-kommande {
    border: 1px solid var(--accent-ljus);
    border-radius: 10px;
    padding: 0.9rem 1.1rem 1rem;
    margin-bottom: 1.5rem;
}

.plan-kommande h2,
.plan-fas h2 {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    margin: 0 0 0.6rem;
}

.plan-fas {
    margin-bottom: 1.75rem;
}

.uppgift-rad {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.3rem 0;
}

.uppgift-kort {
    border: 1px solid var(--linje);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.6rem;
    background: var(--panel);
}

.uppgift-huvud {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.uppgift-huvudtext {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.uppgift-kryss {
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: var(--accent-glod);
    padding: 0;
}

.uppgift-nar {
    color: var(--dammad);
    font-size: 0.85rem;
    white-space: nowrap;
}

.uppgift-titel {
    font-weight: 600;
}

.uppgift-kanal {
    color: var(--accent-glod);
    font-size: 0.85rem;
}

.uppgift-beskrivning {
    margin: 0.5rem 0 0 1.85rem;
    color: var(--dammad-ljus);
    line-height: 1.5;
}

.uppgift-klar .uppgift-titel,
.uppgift-klar .uppgift-beskrivning {
    text-decoration: line-through;
    color: var(--dammad);
}

@media (max-width: 640px) {
    .formular-tva-kolumner {
        grid-template-columns: 1fr;
    }
    .plan-kort-lank {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }
}