/* Shared brand color + corner-radius tokens -- also read by index.html and
   signup.html (via <link>), so there is exactly one place "brand blue" and
   "the corner radius" are defined. See assets/tokens.css. */
@import url("/assets/tokens.css?v=1");

/* Base styles and variables */
:root {
    --bg: #fafafa;
    --card-bg: #ffffff;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --border-hover: #cbd5e1;

    /* Category colors */
    --color-sparekonto: #0284c7;
    --color-aksjefond: #10b981;
    --color-bsu: #8b5cf6;
    --color-total: #1F5784;
    --color-tax: #f59e0b;
}

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

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-main);
    background-color: var(--bg);
    background-image: linear-gradient(160deg, #f5f8fb 0%, #fafafa 45%, #fafafa 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    transition: background-image 0.4s ease;
}

/* Each main tab gets a faint tint of its own, matching that section's accent
   color, so switching tabs reads as a distinct "place" without competing
   with the cards on top of it. */
body.theme-oversikt {
    background-image: linear-gradient(160deg, #E6F0FA 0%, #FFFFFF 100%);
}

body.user-dashboard {
    --border: #ADADAD;
    --border-hover: #8F8F8F;
}

body.user-dashboard .container {
    max-width: 92rem;
}

body.theme-laer {
    background-image: linear-gradient(160deg, #F6F9F5 0%, #FFFFFF 100%);
}

body.theme-kalkulatorer {
    background-image: linear-gradient(160deg, #FAF7F5 0%, #FFFFFF 100%);
}

h1, h2, h3, h4 {
    font-family: 'Bricolage Grotesque', sans-serif;
    color: var(--primary);
    font-weight: 700;
}

.container {
    max-width: 72rem;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* Header & Navigation */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.header-logo img {
    height: 2rem;
    width: auto;
}

.header-logo span {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
}

.nav-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-back:hover {
    color: var(--primary);
}

/* Dashboard Layout */
.dashboard-title-section {
    margin-bottom: 1rem;
}

.dashboard-title-section h1 {
    font-size: 2.5rem;
    margin-bottom: 0;
    letter-spacing: -0.02em;
}

.dashboard-title-section p {
    color: var(--text-muted);
    font-size: 1.1rem;
}

.title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.share-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 44px;
    box-sizing: border-box;
    padding: 0 1.25rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-light);
    border: 1.5px solid rgba(21, 85, 140, 0.2);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    flex-shrink: 0;
}

.share-link-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(21, 85, 140, 0.25);
}

.share-link-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.share-link-btn svg {
    flex-shrink: 0;
}

.dashboard-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.inputs-grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 0.5rem;
}

@media (min-width: 640px) {
    .inputs-grid-container {
        grid-template-columns: 1.15fr 0.85fr;
    }
}

@media (min-width: 1100px) {
    .inputs-grid-container {
        grid-template-columns: 1.3fr 0.9fr 0.9fr 0.9fr;
    }
}

/* Card Styles */
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
}

.card:last-child {
    margin-bottom: 0;
}

.card-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    margin-top: 0;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Inputs & Form Elements */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group:last-of-type {
    margin-bottom: 1.5rem;
}

.label-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.85rem;
}

label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
}

.input-info-link {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: underline;
    transition: color 0.2s;
}

.input-info-link:hover {
    color: var(--primary);
}

/* Chrome, Safari, Edge, Opera: Hide spin buttons */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox: Hide spin buttons */
input[type="number"] {
    -moz-appearance: textfield;
}

.input-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 220px; /* Make the input narrower to prevent overlapping labels/widgets */
}

.input-container input[type="number"],
.input-container input[type="text"] {
    width: 100%;
    padding: 0.75rem 4.5rem 0.75rem 0.75rem; /* Increased right padding to prevent overlap with suffixes */
    font-size: 1rem;
    border: 1px solid #ADADAD;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: inherit;
    font-weight: 500;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-container input[type="number"]:focus,
.input-container input[type="text"]:focus {
    border-color: #0E2243;
    box-shadow: 0 0 0 3px rgba(14, 34, 67, 0.1);
}

.input-container .suffix {
    position: absolute;
    right: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    pointer-events: none;
    font-size: 0.9rem;
}

.input-slider {
    width: 100%;
    margin-top: 0.5rem;
    height: 6px;
    background: #cbd5e1; /* slider background track set back to light grey */
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.input-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transition: transform 0.1s, background-color 0.1s;
}

.input-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    background: var(--primary-hover);
}

/* Global Switches */
.switch-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--primary-light);
    padding: 1.25rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    border: 1px dashed rgba(21, 85, 140, 0.2);
}

.switch-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.switch-label-block {
    display: flex;
    flex-direction: column;
}

.switch-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--primary);
}

.switch-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.switch-subtitle a {
    color: var(--text-muted);
    text-decoration: underline;
}

.switch-subtitle a:hover {
    color: var(--primary);
}

/* Toggle Switch Widget */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: .3s;
    border-radius: 34px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

input:checked + .toggle-slider {
    background-color: var(--primary);
}

input:focus + .toggle-slider {
    box-shadow: 0 0 1px var(--primary);
}

input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

/* Key Metrics Cards */
.metrics-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 640px) and (max-width: 767px) {
    .metrics-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .metrics-row {
        grid-template-columns: repeat(4, 1fr);
    }
}

.metric-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color 0.2s;
}

.metric-card:hover {
    border-color: var(--border-hover);
}

.metric-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.metric-value {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
}

.metric-accent-sparekonto { border-left: 4px solid var(--color-sparekonto); }
.metric-accent-aksjefond { border-left: 4px solid var(--color-aksjefond); }
.metric-accent-bsu { border-left: 4px solid var(--color-bsu); }
.metric-accent-total { border-left: 4px solid var(--color-total); }
.metric-accent-inflation { border-left: 4px solid #ea580c; }

/* BSU Tax Refund Info Banner */
.tax-refund-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: #fffbeb;
    border: 1px solid #fef3c7;
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: #b45309;
    font-weight: 500;
}

.tax-refund-banner svg {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
}

/* Charts and Visualization Area */
.chart-container {
    position: relative;
    height: 350px;
    width: 100%;
}

/* Mortgage Section */
.mortgage-box {
    background-color: var(--primary-light);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    border: 1px solid rgba(21, 85, 140, 0.1);
}

.mortgage-box h4 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.mortgage-box .price-value {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 0.25rem;
}

.mortgage-box .detail-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
}

.mortgage-box .detail-row span:last-child {
    font-weight: 600;
    color: var(--text-main);
}

/* Progress bar representing mortgage vs equity */
.progress-bar-wrapper {
    margin-top: 1.25rem;
}

.progress-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.progress-bar {
    display: flex;
    height: 12px;
    background-color: #cbd5e1;
    border-radius: 6px;
    overflow: hidden;
}

.progress-equity {
    height: 100%;
    background-color: var(--color-total);
    transition: width 0.3s ease;
}

.progress-loan {
    height: 100%;
    background-color: #93c5fd;
    transition: width 0.3s ease;
}

/* Child selection list (for index.html) */
.children-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

@media (min-width: 640px) {
    .children-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .children-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.child-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-decoration: none;
    color: var(--text-main);
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.child-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 10px 15px -3px rgba(21, 85, 140, 0.1);
}

.child-info h3 {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.child-info p {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.child-arrow {
    width: 2rem;
    height: 2rem;
    background-color: var(--primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-weight: bold;
    transition: background-color 0.2s, color 0.2s;
}

.child-card:hover .child-arrow {
    background-color: var(--primary);
    color: white;
}

/* Footer style */
footer {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

footer a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

footer a:hover {
    text-decoration: underline;
}

/* Tooltip info trigger */
.info-tooltip-trigger {
    cursor: help;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 9px;
    background-color: var(--text-muted);
    color: white;
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
}

.info-tooltip-trigger:hover {
    background-color: var(--primary);
}

/* Input Framing */
.input-frame {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -2px rgba(0, 0, 0, 0.02);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s ease-out;
}

.input-frame:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 16px -4px rgba(21, 85, 140, 0.08);
}

.input-frame .frame-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
}

/* Custom styling for switches frame */
.input-frame.switches {
    background-color: var(--primary-light);
    border: 1px dashed rgba(21, 85, 140, 0.25);
    box-shadow: none;
}

.input-frame.switches:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(21, 85, 140, 0.05);
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    background-color: var(--card-bg);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 580px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border);
    transform: translateY(20px);
    transition: transform 0.25s ease;
    overflow: hidden;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    font-size: 1.25rem;
    color: var(--primary);
    margin: 0;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 1.75rem;
    font-weight: 300;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem;
    transition: color 0.2s;
}

.modal-close-btn:hover {
    color: var(--text-main);
}

.modal-body {
    padding: 1.5rem;
    max-height: 70vh;
    overflow-y: auto;
    font-size: 0.95rem;
}

.modal-body p {
    color: var(--text-main);
    margin-bottom: 1.25rem;
}

.modal-body h4 {
    font-size: 1.05rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--primary);
}

.modal-body ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
}

.modal-body li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.modal-body li:before {
    content: "•";
    position: absolute;
    left: 0.25rem;
    color: var(--color-bsu);
    font-weight: bold;
    font-size: 1.25rem;
    line-height: 1;
    top: -0.1rem;
}

/* Inline Info Button inside Frame Title */
.info-rules-btn {
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-bsu);
    background-color: #f5f3ff;
    border: 1px solid #ddd6fe;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.info-rules-btn:hover {
    background-color: var(--color-bsu);
    color: white;
    border-color: var(--color-bsu);
}

/* Disabled text alert */
.bsu-disabled-alert {
    font-size: 0.8rem;
    color: #dc2626;
    background-color: #fef2f2;
    border: 1px solid #fee2e2;
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    margin-top: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
}

/* Sticky Navigation Bar */
.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1.5rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 2rem;
    position: sticky;
    top: 1rem;
    z-index: 100;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
}

.nav-brand {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-link-back {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.2s, transform 0.2s;
}

.nav-link-back:hover {
    color: var(--primary);
    transform: translateX(-3px);
}

/* Segmented Control Tabs */
.tab-container {
    display: flex;
    background-color: #f1f5f9;
    padding: 0.2rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    border: 1px solid #e2e8f0;
}

.tab-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.4rem 0.5rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    border-radius: calc(var(--radius-sm) - 2px);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    white-space: nowrap;
}

.tab-btn:hover {
    color: var(--text-main);
}

.tab-btn.active {
    background-color: #ffffff;
    color: var(--primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.03);
}

/* Responsive returns table container and table */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    margin-top: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.returns-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.85rem;
}

.returns-table th {
    background-color: #f8fafc;
    color: #000000;
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.returns-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    color: #000000;
    white-space: nowrap;
}

.returns-table tr:last-child td {
    border-bottom: none;
}

.returns-table tr:hover {
    background-color: #f8fafc;
}

.returns-table th.num, .returns-table td.num {
    text-align: right;
}

.returns-table th.text, .returns-table td.text {
    text-align: left;
}

/* Risk Profile Radio Options */
.risk-profile-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.risk-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.95rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--card-bg);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}
.risk-option:hover {
    background-color: #f0f7ff;
    border-color: rgba(21, 85, 140, 0.35);
}
.risk-option:has(input:checked) {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(21, 85, 140, 0.06), rgba(2, 132, 199, 0.04));
    box-shadow: 0 0 0 1px rgba(21, 85, 140, 0.1);
}
.risk-option input[type="radio"] {
    margin: 0;
    cursor: pointer;
    accent-color: var(--primary);
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
}
.risk-option .risk-label {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.3;
}
.risk-option .risk-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-main);
}
.risk-option .risk-pct {
    font-weight: 500;
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.risk-info-box {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.85rem;
    margin: 0.75rem 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.risk-info-box:empty {
    display: none;
}

.risk-info-box strong {
    color: var(--text-main);
    font-weight: 700;
}

.risk-info-box-title {
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.3rem;
}

/* For expected return percentage input specifically */
.expected-return-wrapper {
    margin-bottom: 1rem;
}
.expected-return-wrapper label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.85rem;
    color: var(--text-main);
}

/* Mobile Responsiveness Improvements */
@media (max-width: 480px) {
    .container {
        padding: 0.75rem 0.5rem;
    }
    .nav-bar {
        padding: 0.6rem 1rem;
        margin-bottom: 1.5rem;
        border-radius: var(--radius-sm);
    }
    .nav-brand {
        font-size: 1rem;
    }
    .nav-link-back {
        font-size: 0.8rem;
    }
    .dashboard-title-section h1 {
        font-size: 1.75rem;
    }
    .dashboard-title-section p {
        font-size: 0.9rem;
    }
    .card {
        padding: 1.25rem 0.85rem;
        margin-bottom: 1rem;
        border-radius: var(--radius-md);
    }
    .input-frame {
        padding: 1.25rem 0.85rem;
        margin-bottom: 1rem;
        border-radius: var(--radius-md);
    }
    .tab-btn {
        font-size: 0.7rem;
        padding: 0.35rem 0.2rem;
    }
    .metrics-row {
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }
    .metric-card {
        padding: 1rem;
    }
    .metric-value {
        font-size: 1.35rem;
    }
    .chart-container {
        height: 280px;
    }
    .returns-table th, .returns-table td {
        padding: 0.5rem 0.6rem;
        font-size: 0.75rem;
    }
}

/* Sparemål Progress Bar & Card Accent */
.metric-accent-goal {
    border-left: 4px solid #e11d48;
}

/* Sparing vs Investering Comparison Styles */
.comparison-card {
    border: 1px solid var(--border);
    background-color: var(--card-bg);
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .comparison-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.comparison-box {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: #fafafa;
    transition: transform 0.2s, box-shadow 0.2s;
}

.comparison-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.bank-box {
    border-top: 4px solid #94a3b8;
}

.fond-box {
    border-top: 4px solid #10b981;
    background-color: #fcfdfa;
}

.box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.75rem;
    margin-bottom: 0.25rem;
}

.box-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
}

.box-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
}

.box-badge.negative {
    background-color: #fee2e2;
    color: #dc2626;
}

.box-badge.positive {
    background-color: #dcfce7;
    color: #15803d;
}

.box-metric {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.box-metric-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.box-metric-value {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-main);
}

.box-metric-value.accent-neg {
    color: #ea580c;
}

.box-metric-value.accent-pos {
    color: #10b981;
}

.box-explanation {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0;
}

.comparison-footer {
    background-color: #f0fdf4;
    border: 1px solid #dcfce7;
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    color: #166534;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
}

/* Mål og konti input styling */
.form-group-konti {
    margin-bottom: 0.75rem;
}
.form-group-konti label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}
.konti-input {
    width: 100%;
    padding: 0.65rem 0.75rem;
    font-size: 0.85rem;
    border: 1px solid #ADADAD;
    border-radius: var(--radius-sm);
    background-color: var(--bg-card);
    color: var(--text-main);
    font-family: monospace;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.konti-input:focus {
    outline: none;
    border-color: #0E2243;
}

.konti-validation-hint {
    font-size: 0.72rem;
    margin-top: 0.3rem;
    min-height: 1em;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.konti-validation-hint.valid {
    color: rgb(11, 91, 42);
}

.konti-validation-hint.invalid {
    color: #ef4444;
}

.konti-sparekompis-note {
    font-size: 0.82rem;
    color: var(--text-main);
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.75rem;
    line-height: 1.4;
}

.reward-progress-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.reward-progress-card {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
    min-width: 0;
}

.reward-progress-card-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.4rem 0.5rem;
    margin-bottom: 0.6rem;
    min-width: 0;
}

.reward-progress-card-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.reward-progress-card-value {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text-main);
}

.reward-progress-card-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}

.reward-manager-checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
    margin-bottom: 1rem;
}

.reward-manager-section {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
}

.reward-manager-overrides-summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--primary);
}

.reward-manager-overrides-list {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.reward-manager-override-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.78rem;
}

.reward-manager-override-row span {
    color: var(--text-muted);
    flex: 1;
}

.reward-manager-override-row input {
    width: 80px;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-size: 0.78rem;
}

.reward-manager-pending-row {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.82rem;
}

.reward-manager-pending-actions {
    display: flex;
    gap: 0.4rem;
}

.reward-manager-pending-actions button {
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.7rem;
    font-weight: 700;
    font-size: 0.75rem;
    cursor: pointer;
}

.reward-manager-approve-btn {
    background: #10b981;
    color: #fff;
}

.reward-manager-reject-btn {
    background: #fee2e2;
    color: #b91c1c;
}

.share-settings-list {
    min-width: 0;
}

.share-toggle-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    text-align: left;
}

.share-toggle-row:last-of-type {
    border-bottom: none;
}

.share-toggle-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-main);
    text-align: left;
}

.share-toggle-desc {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
    text-align: left;
}

.share-toggle-row input[type="checkbox"] {
    width: 1.3rem;
    height: 1.3rem;
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
    order: -1;
}

.share-connections-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.share-connections-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.share-connections-header h4 {
    margin: 0 0 0.2rem;
    color: var(--text-main);
    font-size: 0.95rem;
}

.share-connections-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

.share-connections-count {
    display: inline-flex;
    min-width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #e7f7ee;
    color: rgb(11, 91, 42);
    font-size: 0.78rem;
    font-weight: 800;
}

.share-connections-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.share-connection-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #ffffff;
}

.share-connection-avatar {
    display: flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef4f9;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 800;
}

.share-connection-copy {
    min-width: 0;
    flex: 1;
}

.share-connection-name {
    overflow: hidden;
    color: var(--text-main);
    font-size: 0.84rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-connection-relation {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.share-connection-remove {
    flex: 0 0 auto;
    padding: 0.42rem 0.65rem;
    border: 1px solid #dc9b95;
    border-radius: var(--radius-sm);
    background: #ffffff;
    color: #a3352b;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}

.share-connection-remove:hover {
    background: #fff5f4;
}

.share-connection-remove:disabled {
    cursor: wait;
    opacity: 0.55;
}

.share-connections-empty,
.share-connections-status {
    padding: 0.7rem 0;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.share-connections-status.success {
    color: rgb(11, 91, 42);
}

.share-connections-status.error {
    color: #a3352b;
}

/* Aurora backdrop: shared dark, canvas-animated background for the
   share-settings and reward-breakdown modal overlays (spare/calculator.js
   draws the animation into .modal-overlay-aurora-canvas via
   createAuroraAnimation). Sits behind .modal-content, filling the whole
   dimmed backdrop -- same effect as the login screen's #aurora-canvas,
   just scoped to these two modals instead of the full page. */
#share-settings-modal.modal-overlay,
#reward-breakdown-modal.modal-overlay {
    background-color: #020617;
}

.modal-overlay-aurora-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    pointer-events: none;
}

#share-settings-modal .modal-content,
#reward-breakdown-modal .modal-content {
    position: relative;
    z-index: 1;
}

.share-url-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--primary-light);
    border: 1px solid rgba(21, 85, 140, 0.15);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    margin-bottom: 1.25rem;
}

.share-url-text {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--primary);
    word-break: break-all;
    line-height: 1.3;
}

.share-url-copy-btn {
    background: var(--primary);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.6rem 1.1rem;
    font-weight: 700;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.share-url-copy-btn:hover {
    background: var(--primary-hover);
}

.reward-total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    background: #ecfbea;
    border: 1px solid #dcf5da;
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    margin-bottom: 1.1rem;
    font-size: 0.95rem;
    color: #31553b;
    font-weight: 700;
}

.reward-total-row strong {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.5rem;
    color: #0b5b2a;
}

.share-modal-content {
    max-width: 460px;
}

.share-modal-body {
    padding-top: 1.25rem;
}

.share-email-invite-box {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    background: #f8fafc;
}

.share-email-invite-box > label {
    display: block;
    margin-bottom: 0.55rem;
    color: var(--text-main);
    font-size: 0.82rem;
    font-weight: 700;
}

.share-email-invite-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
}

.share-email-invite-row input {
    min-width: 0;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #ffffff;
    color: var(--text-main);
    font: inherit;
}

.share-email-invite-row button {
    padding: 0.7rem 1rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: #1F5784;
    color: #ffffff;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
}

.share-email-invite-row button:disabled {
    cursor: wait;
    opacity: 0.65;
}

.share-email-invite-status {
    min-height: 1.2em;
    margin-top: 0.55rem;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.share-email-invite-status.success {
    color: rgb(11, 91, 42);
}

.share-email-invite-status.error {
    color: #a3352b;
}

@media (max-width: 560px) {
    .share-email-invite-row {
        grid-template-columns: 1fr;
    }
}

/* Shared (read-only) link view */
#shared-viewer-root {
    margin-bottom: 1.5rem;
}

.shared-connect-box {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 1.25rem;
    padding: 1.4rem;
    border: 1px solid #b8d8c7;
    border-radius: var(--radius-lg);
    background: #f2fbf6;
}

.shared-connect-eyebrow {
    margin-bottom: 0.35rem;
    color: rgb(11, 91, 42);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.shared-connect-copy h2 {
    margin-bottom: 0.45rem;
    color: var(--text-main);
    font-size: 1.35rem;
}

.shared-connect-copy p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.shared-connect-actions {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.shared-connect-field span {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.shared-connect-field select {
    width: 100%;
    min-height: 44px;
    padding: 0.65rem 0.8rem;
    border: 1px solid #9fb7a9;
    border-radius: var(--radius-sm);
    background: #ffffff;
    color: var(--text-main);
    font: inherit;
}

.shared-connect-btn,
.shared-family-dashboard-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1rem;
    border: 1px solid rgb(11, 91, 42);
    border-radius: var(--radius-sm);
    background: rgb(11, 91, 42);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.shared-connect-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.shared-connect-status {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.shared-connect-status.success {
    color: rgb(11, 91, 42);
}

.shared-connect-status.error {
    color: #b42318;
}

/* Saved family connections dashboard */
.family-brand-link {
    color: inherit;
    text-decoration: none;
}

.family-logout-btn {
    min-height: 40px;
    padding: 0.55rem 1rem;
    border: 1px solid #7a94aa;
    border-radius: 9999px;
    background: #ffffff;
    color: var(--primary);
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
}

.family-main {
    min-height: calc(100vh - 240px);
}

.family-auth-card,
.family-empty-state {
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #ffffff;
    color: var(--text-muted);
}

.family-auth-card {
    max-width: 560px;
}

.family-auth-card h2,
.family-empty-state h2 {
    margin-bottom: 0.4rem;
    color: var(--text-main);
    font-size: 1.15rem;
}

.family-auth-card p,
.family-empty-state p {
    margin-bottom: 1rem;
}

.family-status {
    margin-top: 0.75rem;
    color: #b42318;
    font-size: 0.82rem;
    font-weight: 600;
}

.family-account-row {
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.family-account-row strong {
    color: var(--text-main);
}

.family-connections-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.family-empty-state {
    grid-column: 1 / -1;
}

.family-child-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #ffffff;
}

.family-child-avatar {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e7f7ee;
    color: rgb(11, 91, 42);
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
}

.family-child-copy {
    flex: 1;
}

.family-child-relation {
    margin-bottom: 0.2rem;
    color: rgb(11, 91, 42);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.family-child-copy h2 {
    margin-bottom: 0.35rem;
    color: var(--text-main);
    font-size: 1.25rem;
}

.family-child-copy p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

.family-primary-btn {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1rem;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.family-primary-btn:disabled {
    cursor: wait;
    opacity: 0.6;
}

@media (max-width: 900px) {
    .family-connections-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.shared-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 640px) {
    .shared-connect-box {
        grid-template-columns: 1fr;
        padding: 1.1rem;
    }
    .family-connections-grid {
        grid-template-columns: 1fr;
    }
    .shared-top-grid {
        grid-template-columns: 1fr;
    }
}

/* The shared modal styles center learning screens; BSU rules are long-form text. */
#bsu-rules-modal .modal-header,
#bsu-rules-modal .modal-body {
    text-align: left;
}

#bsu-rules-modal .modal-body {
    align-items: stretch;
    justify-content: flex-start;
}

.shared-box {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.08);
}

.shared-box-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 1rem;
}

.shared-box-field {
    margin-bottom: 1rem;
}

.shared-box-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.shared-box-field input[type="text"] {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #ADADAD;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.9rem;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
}

.shared-box-field input[type="text"]:focus {
    border-color: #0E2243;
}

.shared-box-field input[type="range"] {
    width: 100%;
    accent-color: var(--color-aksjefond);
}

.shared-box-help {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
    background: #f8fafc;
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.85rem;
    margin-bottom: 1rem;
}

.shared-box-submit {
    width: 100%;
    background: var(--color-aksjefond);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    font-weight: 700;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
}

.shared-box-status {
    margin-top: 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius-sm);
}

.shared-box-status.correct {
    background: #ecfdf5;
    color: #047857;
}

.shared-box-status.incorrect {
    background: #fef2f2;
    color: #b91c1c;
}

.shared-learning-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 260px;
    overflow-y: auto;
}

.shared-learning-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.shared-learning-row.soon {
    color: var(--text-muted);
}

.shared-learning-progress {
    font-weight: 700;
    color: var(--color-aksjefond);
}

.shared-learning-soon {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.reward-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.95rem;
}

.reward-breakdown-row span:last-child {
    font-weight: 700;
    color: var(--text-main);
}

.reward-breakdown-total {
    border-bottom: none;
    padding-top: 0.85rem;
    font-weight: 700;
}

.reward-breakdown-total span:last-child {
    color: var(--primary);
    font-size: 1.1rem;
}

.konti-section {
    padding: 0;
}

.konti-section-header {
    margin-bottom: 0.5rem;
}

.konti-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.konti-divider {
    height: 1px;
    background: var(--border);
    margin: 0.75rem 0;
}

.konti-static-value {
    font-family: monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    padding: 0.65rem 0.75rem;
    background: var(--bg-main);
    border: 1px solid #ADADAD;
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    white-space: nowrap;
}

.konti-box {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.konti-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.form-group-konti--nordnet {
    flex: 0 0 auto;
    width: 14ch;
    min-width: 0;
}

.form-group-konti--nordnet .konti-static-value {
    width: 100%;
}

.form-group-konti--kid {
    flex: 1 1 auto;
    min-width: 0;
}

.form-group-konti--account {
    max-width: 15ch;
}

.reward-breakdown-total-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.9rem 1.1rem;
    margin-top: 0.5rem;
    font-weight: 700;
    font-size: 0.95rem;
}

.reward-breakdown-total-box span:last-child {
    color: var(--primary);
    font-size: 1.1rem;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#reward-breakdown-modal .reward-modal-content {
    position: relative;
    width: min(960px, 100%);
    max-width: 960px;
    max-height: 92vh;
    overflow: hidden;
    background: #ffffff;
}

#reward-breakdown-modal .reward-modal-header .modal-close-btn {
    font-size: 2.3rem;
}

#reward-breakdown-modal .reward-modal-body {
    display: block;
    align-items: stretch;
    justify-content: flex-start;
    max-height: calc(92vh - 70px);
    padding: 1.1rem 1.25rem 1.25rem;
    overflow-y: auto;
    text-align: left;
    background: #ffffff;
}

.reward-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.reward-summary-card,
.reward-account-card {
    min-width: 0;
    border-radius: var(--radius-md);
    padding: 1.4rem;
}

.reward-summary-card {
    min-height: 235px;
    display: flex;
    flex-direction: column;
    text-align: center;
    background: #ecfbea;
    border: 1px solid #dcf5da;
}

.reward-summary-card h3,
.reward-account-card h3 {
    margin: 0;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: #111111;
}

.reward-summary-card > p {
    margin: 0.35rem 0 1rem;
    color: #111111;
    font-size: 0.95rem;
    line-height: 1.45;
}

.reward-earned-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-top: auto;
    margin-bottom: 0.55rem;
    color: #31553b;
    font-size: 0.78rem;
    font-weight: 700;
}

.reward-earned-row strong {
    color: #0b5b2a;
    font-size: 1rem;
}

.reward-progress-track {
    width: 100%;
    height: 22px;
    overflow: hidden;
    border-radius: 9999px;
    background: #d1d5db;
}

.reward-progress-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #22c55e;
    transition: width 2000ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reward-progress-fill--matching {
    background: #16a34a;
}

.reward-progress-card-sub {
    margin-top: 0.45rem;
    color: #5f7566;
    font-size: 0.7rem;
    text-align: left;
}

.reward-account-card {
    min-height: 235px;
    border: 1px solid #cfd3d0;
    background: #ffffff;
}

.reward-account-card h3 {
    margin-bottom: 1.15rem;
    text-align: center;
    font-size: 1.08rem;
}

.reward-account-fields {
    width: 100%;
}

.reward-account-fields .form-group-konti {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin-bottom: 0;
}

.reward-account-fields .konti-input {
    height: 42px;
}

#reward-breakdown-modal #kron-section {
    margin-top: 0.85rem;
}

#reward-breakdown-modal #kron-message {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.reward-bank-account-field {
    width: 100%;
}

.sparekompiser-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.sparekompis-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border);
}

.sparekompis-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.sparekompis-avatar {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #22c55e;
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
}

.sparekompis-name {
    font-weight: 700;
    color: var(--text-main);
    font-size: 0.92rem;
    margin-bottom: 0.25rem;
}

.sparekompis-pledges {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.sparekompiser-empty {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.sparekompiser-invite-btn {
    width: 100%;
    background: #f0fdf4;
    border: 1.5px dashed #86efac;
    color: #15803d;
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.9rem;
    font-weight: 700;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    margin-top: 0.9rem;
}

.sparekompiser-invite-btn:hover {
    background: #dcfce7;
}

.reward-confetti-layer {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
}

.reward-confetti-piece {
    position: absolute;
    top: -24px;
    left: var(--confetti-left);
    width: var(--confetti-width);
    height: var(--confetti-height);
    border-radius: 2px;
    background: var(--confetti-color);
    opacity: 0;
    animation: reward-confetti-fall var(--confetti-duration) ease-out var(--confetti-delay) forwards;
}

@keyframes reward-confetti-fall {
    0% {
        opacity: 1;
        transform: translate3d(0, -10px, 0) rotate(0deg);
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--confetti-drift), 620px, 0) rotate(var(--confetti-spin));
    }
}

@media (max-width: 720px) {
    #reward-breakdown-modal {
        padding: 0.75rem;
    }
    #reward-breakdown-modal .reward-modal-content {
        max-height: 96vh;
    }
    #reward-breakdown-modal .reward-modal-body {
        max-height: calc(96vh - 64px);
        padding: 1rem 0.85rem 1rem;
    }
    .reward-dashboard-grid {
        grid-template-columns: 1fr;
    }
    .reward-summary-card,
    .reward-account-card {
        min-height: auto;
        padding: 1.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reward-progress-fill {
        transition: none;
    }
    .reward-confetti-piece {
        display: none;
    }
}

/* Parent Navigation Bar styling */
.parent-nav-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: white;
    border-radius: var(--radius-md);
    margin-bottom: 2.5rem;
    gap: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.parent-nav-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #38bdf8;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.parent-nav-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.parent-nav-btn {
    text-decoration: none;
    padding: 0.45rem 1.15rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.2s;
    cursor: pointer;
}

.parent-nav-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-color: rgba(255, 255, 255, 0.25);
}

.parent-nav-btn.active {
    background: #0284c7;
    color: white;
    border-color: #38bdf8;
    box-shadow: 0 0 12px rgba(2, 132, 199, 0.4);
}

.parent-nav-exit {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: color 0.2s;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

.parent-nav-exit:hover {
    color: #f1f5f9;
}

.parent-edit-mode-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    border-radius: var(--radius-sm);
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0.75rem 0 2rem;
}

.parent-add-person-modal-content {
    width: min(680px, 100%);
    max-width: 680px;
}

.parent-add-person-subtitle {
    margin: 0.2rem 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.parent-add-person-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin-bottom: 1.4rem;
}

.parent-add-person-progress-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.65rem;
    border-radius: var(--radius-sm);
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 0.76rem;
    font-weight: 700;
}

.parent-add-person-progress-item span {
    width: 1.45rem;
    height: 1.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e2e8f0;
}

.parent-add-person-progress-item.active {
    background: #ecfdf5;
    color: #065f46;
}

.parent-add-person-progress-item.active span {
    background: #0b5b2a;
    color: #ffffff;
}

.parent-add-person-step[hidden] {
    display: none;
}

.parent-add-person-step h4 {
    margin: 0;
    color: var(--text-main);
    font-size: 1.08rem;
}

.parent-add-person-step > p {
    margin: 0.3rem 0 1rem;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.parent-add-person-role-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.parent-add-person-role {
    min-height: 84px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.85rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    background: #ffffff;
    color: var(--text-main);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.parent-add-person-role span {
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.35;
}

.parent-add-person-role.active {
    border-color: #0b5b2a;
    background: #ecfdf5;
    box-shadow: 0 0 0 2px rgba(11, 91, 42, 0.08);
}

.parent-add-person-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 0.75rem;
}

.parent-add-person-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
    color: var(--text-main);
    font-size: 0.8rem;
    font-weight: 700;
}

.parent-add-person-field[hidden],
.parent-add-person-username[hidden] {
    display: none;
}

.parent-add-person-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.72rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #ffffff;
    color: var(--text-main);
    font: inherit;
    font-weight: 500;
}

.parent-add-person-field small {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 500;
}

.parent-add-person-ident {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    color: var(--text-main);
    font-size: 0.8rem;
    font-weight: 700;
}

.parent-add-person-ident > div {
    display: flex;
    gap: 0.35rem;
}

.parent-add-person-ident button {
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #ffffff;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
}

.parent-add-person-ident button.active {
    border-color: #0b5b2a;
    background: #0b5b2a;
    color: #ffffff;
}

.parent-add-person-username {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
    padding: 0.72rem 0.8rem;
    border: 1px solid #a7f3d0;
    border-radius: var(--radius-sm);
    background: #ecfdf5;
    color: #065f46;
    font-size: 0.8rem;
}

.parent-add-person-child-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #ffffff;
    cursor: pointer;
}

.parent-add-person-child-option--all {
    margin-bottom: 0.65rem;
    border-color: #a7f3d0;
    background: #f0fdf4;
}

.parent-add-person-child-option input {
    width: 19px;
    height: 19px;
    margin: 0;
    accent-color: #0b5b2a;
}

.parent-add-person-child-option span {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    color: var(--text-main);
    font-size: 0.82rem;
}

.parent-add-person-child-option small {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.parent-add-person-children {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.parent-add-person-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-top: 1.25rem;
}

.parent-add-person-status {
    margin-top: 0.8rem;
    padding: 0.7rem 0.8rem;
    border-radius: var(--radius-sm);
    background: #fef2f2;
    color: #b42318;
    font-size: 0.78rem;
    font-weight: 600;
}

.parent-add-person-success {
    text-align: center;
    padding: 0.8rem 0;
}

.parent-add-person-success-icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem;
    border-radius: 50%;
    background: #0b5b2a;
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 800;
}

.parent-add-person-credentials {
    padding: 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #f8fafc;
    color: var(--text-main);
    font-size: 0.82rem;
    line-height: 1.7;
    text-align: left;
}

@media (max-width: 620px) {
    .parent-add-person-role-grid,
    .parent-add-person-children,
    .parent-add-person-form-grid {
        grid-template-columns: 1fr;
    }

    .parent-add-person-progress-item {
        justify-content: center;
        font-size: 0;
    }

    .parent-add-person-progress-item span {
        font-size: 0.76rem;
    }
}

/* Save Toast Notification */
.save-toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 50px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    opacity: 0;
    transform: translateY(1rem) scale(0.95);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.save-toast.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.toast-spinner {
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: toast-spin 0.8s linear infinite;
}

.toast-checkmark {
    width: 1.1rem;
    height: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #10b981;
}

@keyframes toast-spin {
    to { transform: rotate(360deg); }
}

/* Learning Tracker Styles */
.learning-card {
    border: 1px solid var(--border);
}

/* Rainbow hover button */
.rainbow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1.25rem 2rem;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: white;
    background: linear-gradient(45deg, #15558C, #0284c7);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
    z-index: 1;
}

.rainbow-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(120deg, #4c1d95, #1e3a8a, #065f46, #854d0e, #991b1b, #4c1d95);
    background-size: 400% 400%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: -1;
    animation: rainbow-shift 10s ease infinite;
}

.rainbow-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.rainbow-btn:hover::before {
    opacity: 1;
}

.rainbow-btn:active {
    transform: translateY(0);
}

@keyframes rainbow-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Chapters Grid */
.chapters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.chapter-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    background-color: var(--card-bg);
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}

.chapter-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.chapter-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-main);
    line-height: 1.3;
}

.chapter-card.locked {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--bg-main);
}

.chapter-card.locked:hover {
    transform: none;
    border-color: var(--border);
    box-shadow: none;
}

.chapter-card .chapter-lock-icon {
    display: none;
}

.chapter-card.locked .chapter-lock-icon {
    display: block;
}

.chapters-toggle-header:hover {
    opacity: 0.85;
}

/* Slide modal styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-container {
    background: #ffffff;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    overflow: hidden;
    transform: translateY(0);
    transition: none;
}

/* On Desktop, wrap modal in a centered simulated mobile frame overlay */
@media (min-width: 600px) {
    .modal-overlay {
        background: rgba(15, 23, 42, 0.85); /* Fades background content */
        backdrop-filter: blur(10px);
    }
    .modal-container {
        max-width: 440px;
        max-height: 850px;
        height: 90vh;
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }
}

.modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
}

.modal-close {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    color: #0f172a;
    background: #f1f5f9;
}

.modal-body {
    padding: 2.5rem 1.5rem 6.5rem 1.5rem; /* Large bottom padding to prevent content overlapping fixed buttons on mobile */
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #ffffff;
}

.slide-content-text {
    font-size: 1.3rem;
    line-height: 1.6;
    color: #1e293b;
    font-weight: 500;
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -0.01em;
}

.modal-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    z-index: 100;
}

/* Ensure relative position on container for absolute footer positioning on mobile */
@media (max-width: 599px) {
    .modal-container {
        position: relative;
    }
}
@media (min-width: 600px) {
    .modal-container {
        position: relative;
    }
}

.slide-nav-btn {
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-main);
    opacity: 1;
    /* Only animates when re-enabling (see :disabled below) -- becoming disabled
       should snap to faded instantly, not visibly fade out first. */
    transition: background 0.2s, opacity 0.6s ease;
}

.slide-nav-btn:hover:not(:disabled) {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

/* Coffee Calculator Custom Styles */
#coffee-count {
    height: 14px;
    background: var(--border);
    border-radius: 7px;
    outline: none;
    transition: background 0.2s;
}

#coffee-count::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-aksjefond);
    border: 4px solid white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: grab;
    transition: transform 0.1s, background-color 0.1s, box-shadow 0.2s;
    animation: thumb-pulse 2s infinite ease-in-out;
}

#coffee-count::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    background: #0d9488; /* Slightly darker teal */
    animation: none;
}

#coffee-count::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.25);
    animation: none;
}

@keyframes thumb-pulse {
    0% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 0px rgba(16, 185, 129, 0.4);
    }
    50% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 10px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 0px rgba(16, 185, 129, 0);
    }
}

.coffee-result-box {
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.coffee-result-box.pop-active {
    animation: coffee-box-pop 0.3s ease-out;
}

@keyframes coffee-box-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.04); border-color: var(--primary); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); }
    100% { transform: scale(1); }
}

.slide-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transition: none;
}

.slide-nav-btn.primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.slide-nav-btn.primary:hover:not(:disabled) {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: white;
}

/* ==========================================================================
   App Header — logo, main site nav pills, share button
   ========================================================================== */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0;
    border-bottom: none;
}

.app-header-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-family: 'Bricolage Grotesque', sans-serif;
}

.app-header-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.app-header-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
}

.app-header-age {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 0.15rem;
}

.main-site-tabs {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    height: 44px;
    box-sizing: border-box;
    background-color: #f1f5f9;
    border: 1px solid var(--border);
    border-radius: 9999px;
    padding: 0.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.main-site-tabs .site-tab-btn {
    height: 100%;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0 1.1rem;
    border-radius: 9999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.main-site-tabs .site-tab-btn.active {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.app-header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* ==========================================================================
   Hero chart card — dark navy card with headline number + Chart.js canvas
   ========================================================================== */
.hero-chart-card {
    position: relative;
    background: linear-gradient(165deg, #0f2547 0%, #0a1c38 100%);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    color: #ffffff;
}

.hero-chart-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.hero-chart-title-block {
    min-width: 0;
}

.hero-chart-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #93a5c4;
    margin-bottom: 0.2rem;
}

.hero-chart-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff;
}

.hero-chart-value-block {
    text-align: right;
}

.hero-chart-value-block .hero-chart-eyebrow {
    margin-bottom: 0.15rem;
}

.hero-chart-value {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
}

.hero-chart-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 42px;
    margin-top: 0.5rem;
}

.hero-chart-legend {
    min-width: 0;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.45rem 0.85rem;
    /* padding-left is set inline in JS (renderSavingsChartLegend) to match
       the chart's actual plotted area, so the legend lines up with the
       x-axis instead of the y-axis label gutter to its left. */
}

.hero-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #93a5c4;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
}

.hero-chart-legend-swatch {
    display: inline-block;
    width: 16px;
    height: 2px;
    border-radius: 9999px;
    background: var(--legend-color, #ffffff);
    flex-shrink: 0;
}

.hero-chart-legend-swatch.is-total {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.hero-chart-legend-swatch.is-dashed {
    background: repeating-linear-gradient(
        90deg,
        var(--legend-color, #ffffff) 0 5px,
        transparent 5px 8px
    );
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hero-chart-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    flex: 0 0 auto;
}

.hero-chart-settings-control,
.hero-milestone-control {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 0 0 auto;
    z-index: 5;
}

/* Ghost-knapper: ingen bakgrunn, ingen ramme -- kortet er allerede løftet,
   og en fylt knapp ble tyngre enn innholdet den står ved siden av. */
.hero-chart-settings-btn,
.hero-add-milestone-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    background: none;
    color: #e8eef6;
    border: 0;
    border-radius: 0.85rem;
    padding: 0.72rem 1.15rem;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    margin-bottom: 0;
    box-shadow: none;
    transition: color 0.15s ease;
}

.hero-chart-settings-btn:hover,
.hero-add-milestone-btn:hover,
.hero-chart-settings-btn[aria-expanded="true"],
.hero-add-milestone-btn[aria-expanded="true"] {
    color: #ffffff;
}

.hero-chart-settings-btn:focus-visible,
.hero-add-milestone-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 2px;
}

/* Lengde på graf -- i «Avansert»-popoveren. Popoveren står på mørk bakgrunn,
   så select-en må stiles eksplisitt; nettleserens standard er lys og leser
   som et hull i kortet. appearance:none fjerner systempilen, og pilen tegnes
   som bakgrunnsbilde slik at den følger tekstfargen. */
.hero-chart-horizon-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-chart-horizon-field label {
    font-size: 0.9rem;
    font-weight: 600;
    color: inherit;
}

.hero-chart-horizon-select {
    position: relative;
    flex: 0 0 auto;
}

.hero-chart-horizon-select select {
    appearance: none;
    -webkit-appearance: none;
    background-color: rgba(255, 255, 255, 0.10);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23e8eef6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    color: #ffffff;
    border: 0;
    border-radius: 0.5rem;
    padding: 0.5rem 2.1rem 0.5rem 0.8rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    min-width: 6.5rem;
}

.hero-chart-horizon-select select:hover {
    background-color: rgba(255, 255, 255, 0.16);
}

.hero-chart-horizon-select select:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 2px;
}

/* Nedtrekkslisten arver ikke popoverens farger i alle nettlesere,
   så optionene settes eksplisitt til mørk bakgrunn. */
.hero-chart-horizon-select select option {
    background-color: #16293f;
    color: #ffffff;
}

.hero-chart-settings-btn img {
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 auto;
}

.hero-add-milestone-btn > span:first-child {
    font-size: 1.05rem;
    line-height: 1;
}

.hero-chart-settings-popover {
    position: absolute;
    right: 0;
    bottom: calc(100% + 1rem);
    width: min(365px, calc(100vw - 4rem));
    padding: 1.25rem;
    background: #dcecf7;
    color: #172033;
    border: 1px solid rgba(15, 34, 67, 0.12);
    border-radius: 0.55rem;
    box-shadow: 0 18px 34px rgba(3, 15, 35, 0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px) scale(0.98);
    transform-origin: bottom right;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.hero-chart-settings-popover::after {
    content: '';
    position: absolute;
    right: 3.1rem;
    bottom: -0.8rem;
    width: 1.6rem;
    height: 1.6rem;
    background: #dcecf7;
    border-right: 1px solid rgba(15, 34, 67, 0.12);
    border-bottom: 1px solid rgba(15, 34, 67, 0.12);
    transform: rotate(45deg);
}

.hero-chart-settings-popover.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.hero-chart-settings-checkbox {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #27364a;
    font-size: 1rem;
    font-weight: 650;
    cursor: pointer;
}

.hero-chart-settings-checkbox input {
    width: 1.55rem;
    height: 1.55rem;
    margin: 0;
    flex: 0 0 auto;
    accent-color: #1f6c9b;
    cursor: pointer;
}

.hero-chart-inflation-field {
    display: block;
    width: 145px;
    margin: 0.9rem 0 1rem 2.3rem;
}

.hero-chart-inflation-input {
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    padding: 0 0.75rem;
    background: #ffffff;
    border: 1px solid #9ca3af;
    border-radius: 0.5rem;
}

.hero-chart-inflation-input input {
    min-width: 0;
    width: 100%;
    padding: 0;
    background: #ffffff;
    border: 0;
    outline: 0;
    color: #172033;
    font: inherit;
    font-size: 1.1rem;
    font-weight: 700;
}

.hero-chart-inflation-input > span {
    color: #7c8796;
    font-size: 1rem;
    font-weight: 650;
}

.hero-chart-settings-popover p {
    margin: 0 0 1.15rem;
    color: #334155;
    font-size: 0.83rem;
    line-height: 1.55;
}

.hero-chart-settings-popover p:last-child {
    margin: 0.8rem 0 0;
}

.hero-chart-settings-popover a {
    color: #245b9f;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hero-milestone-popover {
    position: absolute;
    right: 0;
    bottom: calc(100% + 1rem);
    width: min(540px, calc(100vw - 4rem));
    padding: 1.2rem 1.25rem 1.15rem;
    background: #dcecf7;
    color: #172033;
    border: 1px solid rgba(15, 34, 67, 0.12);
    border-radius: 0.55rem;
    box-shadow: 0 18px 34px rgba(3, 15, 35, 0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px) scale(0.98);
    transform-origin: bottom right;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.hero-milestone-popover::after {
    content: '';
    position: absolute;
    right: 3.25rem;
    bottom: -0.8rem;
    width: 1.6rem;
    height: 1.6rem;
    background: #dcecf7;
    border-right: 1px solid rgba(15, 34, 67, 0.12);
    border-bottom: 1px solid rgba(15, 34, 67, 0.12);
    transform: rotate(45deg);
}

.hero-milestone-popover.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.hero-milestone-sentence {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 650;
}

#add-milestone-age-field select {
    width: 74px;
    height: 38px;
    padding: 0 0.65rem;
    background: #ffffff;
    border: 1px solid #9ca3af;
    border-radius: 0.45rem;
    color: #172033;
    font: inherit;
    font-weight: 700;
}

.hero-milestone-type-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.hero-milestone-type-tabs .tab-btn {
    min-width: 0;
    padding: 0.44rem 0.65rem;
    background: #ffffff;
    border: 1px solid #9ca3af;
    border-radius: 9999px;
    color: #172033;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
}

.hero-milestone-type-tabs .tab-btn.active {
    background: #ffffff;
    border-color: #1f5784;
    box-shadow: inset 0 0 0 1px #1f5784;
    color: #123d61;
}

.hero-milestone-amount-field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.hero-milestone-amount-field > span {
    color: #526174;
    font-size: 0.86rem;
    font-weight: 600;
}

.hero-milestone-amount-input {
    display: flex;
    align-items: center;
    width: 165px;
    height: 40px;
    padding: 0 0.65rem;
    background: #ffffff;
    border: 1px solid #9ca3af;
    border-radius: 0.45rem;
}

.hero-milestone-amount-input input {
    min-width: 0;
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: #172033;
    font: inherit;
    font-weight: 700;
}

.hero-milestone-amount-input .unit {
    color: #7c8796;
    font-size: 0.8rem;
}

.hero-milestone-helper {
    margin: -0.3rem 0 0.85rem;
    color: #526174;
    font-size: 0.76rem;
    line-height: 1.45;
}

.hero-milestone-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.5rem 1rem;
    background: #1f5784;
    color: #ffffff;
    border: 0;
    border-radius: 0.5rem;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.hero-milestone-submit-btn:hover {
    background: #16456d;
}

.hero-milestone-status {
    display: none;
    margin: 0 0 0.7rem;
    color: #b91c1c;
    font-size: 0.78rem;
    font-weight: 600;
}

.hero-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7ea3d1;
    margin-bottom: 0.3rem;
}

.hero-subtitle {
    font-size: 0.95rem;
    color: #cbd5e1;
}

.hero-subtitle strong {
    color: #ffffff;
}

.hero-headline {
    text-align: right;
}

.hero-number {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
}

.hero-chart-canvas-wrap {
    position: relative;
    height: 350px;
    width: 100%;
    margin-top: 0.5rem;
}

/* ==========================================================================
   Category cards — Investeringskonto / Sparekonto / BSU
   ========================================================================== */
/* Flex, ikke grid med faste kolonner.
   Kortene skjules dynamisk: BSU forsvinner fra 34 år, og brukeren kan fjerne
   Investeringskonto. Med `grid-template-columns: repeat(3, 1fr)` sto kolonnen
   igjen som et tomt hull når kortet ble borte. Flex teller bare synlige barn. */
.category-cards-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.category-cards-grid > .category-card {
    flex: 1 1 260px;
    min-width: 0;
}

/* Extra accounts (Crypto, Pensjon, etc.) shouldn't stretch to fill the row
   when there are only one or two of them -- flex-grow:1 on the shared base
   rule above is fine for the primary three-card row (always 3 cards, so
   "grow to fill" already lands on ~33% each), but with fewer cards it grows
   to 100%/50%. Cap growth so extra cards stay the same ~33% width as the
   primary row regardless of count, leaving empty space instead of stretching. */
@media (min-width: 861px) {
    #extra-accounts-grid > .category-card {
        flex: 0 1 calc((100% - 2.5rem) / 3);
    }
}

.category-cards-grid:empty {
    display: none;
    margin-bottom: 0;
}

.add-account-label {
    font-size: 1.05rem;
    font-weight: 700;
    font-family: 'Bricolage Grotesque', sans-serif;
    color: #ffffff;
    margin-bottom: 0.85rem;
}

.add-account-panel {
    background: #527c9d;
    border: 1px solid #3f698a;
    border-radius: var(--radius-lg);
    padding: 1rem;
}

.add-account-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.65rem;
    margin-bottom: 0;
}

.add-account-grid:empty {
    margin-bottom: 0;
}

.category-card.add-account-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #d2d8dd;
    border-radius: var(--radius-sm);
    padding: 0.85rem 2.35rem 0.85rem 0.9rem;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.add-account-card:hover {
    background: #f8fafc;
    border-color: var(--accent, #8F8F8F);
    transform: translateY(-1px);
}

.add-account-card .category-card-header {
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.add-account-card .category-dot {
    display: none;
}

.add-account-cta {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

@media (max-width: 1080px) {
    .add-account-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .add-account-grid {
        grid-template-columns: 1fr;
    }
}

body.user-dashboard #section-oversikt.dashboard-grid {
    gap: 1.25rem;
}

body.user-dashboard #section-oversikt .hero-chart-card,
body.user-dashboard #section-oversikt .category-cards-grid,
body.user-dashboard #section-oversikt .add-account-grid {
    margin-bottom: 0;
}

body.user-dashboard #extra-accounts-grid {
    align-items: stretch;
}

.pgs-milestones-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.pgs-milestone-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
}

.pgs-milestone-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent, var(--primary));
    flex-shrink: 0;
}

.pgs-milestone-label {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-main);
    min-width: 100px;
}

.pgs-milestone-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    flex: 1;
}

.pgs-milestone-field {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.pgs-milestone-field input {
    width: 80px;
    padding: 0.35rem 0.5rem;
    border: 1px solid #ADADAD;
    border-radius: var(--radius-sm);
    background: #f8faf7;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    text-align: right;
    outline: none;
    transition: border-color 0.15s;
}

.pgs-milestone-field input:focus {
    border-color: #0E2243;
}

.pgs-milestone-unit {
    color: var(--text-muted);
}

.remove-account-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.2rem;
    flex-shrink: 0;
    transition: color 0.15s;
}

.remove-account-btn:hover {
    color: #ef4444;
}

.category-card .remove-account-btn {
    font-size: 1.65rem;
}

@media (max-width: 640px) {
    .pgs-milestone-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .pgs-milestone-fields {
        width: 100%;
    }
}

/* Keep every editable dashboard field visually consistent. */
body.user-dashboard input:not([type="range"]):not([type="radio"]):not([type="checkbox"]):not([type="button"]):not([type="submit"]),
body.user-dashboard textarea,
body.user-dashboard select,
body.user-dashboard .category-input-wrap {
    background-color: #ffffff;
}

.category-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
}

.primary-account-hidden {
    display: none !important;
}

.category-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 1rem;
}

.category-card-header > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.category-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent, var(--primary));
    flex-shrink: 0;
}

.category-field {
    margin-bottom: 0.85rem;
}

.category-field-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 0.65rem;
}

.category-field-pair .category-field {
    min-width: 0;
    margin-bottom: 0.75rem;
}

.category-field label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
    font-weight: 500;
}

.category-input-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: #f8faf7;
    border: 1px solid #ADADAD;
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.85rem;
    transition: border-color 0.15s;
}

.category-input-wrap:focus-within {
    border-color: #0E2243;
}

.category-input-wrap input {
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    width: 100%;
    padding: 0;
}

.category-input-wrap .unit {
    font-size: 0.85rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.bsu-rules-btn {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 9999px;
    cursor: pointer;
    color: #ffffff;
    font-family: inherit;
}

.bsu-rules-btn:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.sparekonto-account-details {
    margin: -0.2rem 0 0.85rem;
    min-height: 2.25rem;
}

.sparekonto-bank-name,
.sparekonto-account-number {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 600;
}

.sparekonto-account-number {
    margin-top: 0.12rem;
    color: var(--text-main);
}

.category-card-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.category-card-footer {
    margin-top: auto;
    padding-top: 0.45rem;
}

.category-card-footer .category-projection {
    margin-top: 0;
}

.category-projection {
    margin-top: auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--accent-tint, #f8faf7);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
}

.category-projection-col {
    min-width: 0;
}

.category-projection-col--right {
    text-align: right;
}

.category-projection-value--deposited {
    color: var(--text-main);
}

.category-projection + .category-tax-note {
    margin-top: 0.6rem;
}

.category-tax-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.category-tax-note strong {
    color: var(--text-main);
    font-weight: 600;
}

.category-desc-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin-bottom: 1rem;
}

.bsu-limit-note {
    margin: 0.05rem 0 1rem;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.45;
}

.category-projection-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0.15rem;
}

#bsu-age-note {
    font-weight: 400;
    color: var(--text-muted);
    opacity: 0.85;
}

.category-projection-value {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--accent, var(--text-main));
}

.bsu-annual-tax-refund {
    margin-top: 0.18rem;
    color: #0f9f6e;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.35;
}

/* Pill-style toggle buttons reused for risk profile / rente / provider tabs inside category cards */
.category-card .risk-profile-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0;
}

.category-card .risk-option {
    padding: 0.45rem 0.85rem;
    border: 1.5px solid var(--border);
    border-radius: 9999px;
    background: #ffffff;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    gap: 0;
}

.category-card .risk-option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.category-card .risk-option:has(input:checked) {
    background: var(--accent, var(--primary));
    border-color: var(--accent, var(--primary));
    color: #ffffff;
    box-shadow: none;
}

.category-card .tab-container {
    background: transparent;
    border: none;
    padding: 0;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.category-card .tab-btn {
    border: 1.5px solid var(--border);
    border-radius: 9999px;
    padding: 0.4rem 0.85rem;
    flex: 0 0 auto;
}

.category-card .tab-btn.active {
    background: var(--accent, var(--primary));
    border-color: var(--accent, var(--primary));
    color: #ffffff;
    box-shadow: none;
}

/* ==========================================================================
   Responsive: stack everything on small screens
   ========================================================================== */
@media (max-width: 860px) {
    /* Full bredde per kort. flex-basis 100% gjør jobben som
       grid-template-columns: 1fr gjorde før flex-omleggingen. */
    .category-cards-grid > .category-card {
        flex: 1 1 100%;
    }
}

@media (max-width: 640px) {
    .app-header-title {
        font-size: 1.2rem;
    }
    /* Title, kr badge, share and profile stay together on row one; the tabs
       drop to their own full-width row two instead of wrapping unpredictably
       among the three header groups. */
    .app-header-brand {
        order: 1;
    }
    .app-header-actions {
        order: 2;
    }
    .main-site-tabs {
        order: 3;
        flex-basis: 100%;
    }
    .main-site-tabs {
        height: 38px;
    }
    .main-site-tabs .site-tab-btn {
        font-size: 0.78rem;
        padding: 0 0.85rem;
    }
    .hero-chart-card {
        padding: 1.25rem 1.1rem 1.1rem;
        border-radius: var(--radius-md);
    }
    .hero-headline {
        text-align: left;
    }
    .hero-number {
        font-size: 1.65rem;
    }
    .hero-chart-canvas-wrap {
        height: 280px;
    }
    .hero-chart-header-row {
        flex-direction: column;
        gap: 0.6rem;
    }
    .hero-chart-value-block {
        text-align: left;
    }
    .hero-chart-footer-row {
        align-items: flex-end;
        gap: 0.6rem;
        flex-wrap: wrap;
    }
    .hero-chart-legend {
        gap: 0.35rem 0.6rem;
    }
    .hero-chart-legend-item {
        font-size: 0.64rem;
    }
    .hero-chart-controls {
        width: 100%;
        justify-content: flex-end;
    }
    .hero-chart-settings-btn,
    .hero-add-milestone-btn {
        padding: 0.52rem 0.7rem;
        font-size: 0.72rem;
        white-space: nowrap;
    }
    .hero-chart-settings-popover,
    .hero-milestone-popover {
        right: 0;
        width: calc(100vw - 3rem);
        padding: 1rem;
    }
    .hero-chart-settings-popover::after,
    .hero-milestone-popover::after {
        right: 2rem;
    }
    .hero-milestone-type-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .category-field-pair {
        gap: 0.5rem;
    }
    .category-card {
        padding: 1.1rem;
    }
}

/* ==========================================================================
   Page intro — shared H1 + subtitle for Pengeskolen / Kalkulatorer
   ========================================================================== */
.page-intro {
    margin-bottom: 1.5rem;
}

.page-intro-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 0.35rem;
}

.page-intro-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
}

/* Track sections: each track (Pengeskolen / KI og teknologi / Karriere) is
   a collapsible section -- a dark header bar you click to expand/collapse,
   with that track's chapter cards underneath when open. Replaces the old
   tab-switcher now that all three tracks are shown at once. */
.pgs-track-sections {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pgs-track-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pgs-track-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    background: var(--primary);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.pgs-track-header-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    min-width: 0;
}

.pgs-track-header-meta {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
    flex-shrink: 0;
}

.pgs-track-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

/* Expand/collapse + fade, animated via the grid-template-rows trick (0fr ->
   1fr) since the content's height isn't known ahead of time -- .pgs-track-body
   is the grid container, .pgs-track-body-inner is clipped by overflow:hidden
   while its row track grows/shrinks. */
.pgs-track-body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.3s ease, opacity 0.3s ease;
}

.pgs-track-body.expanded {
    grid-template-rows: 1fr;
    opacity: 1;
}

.pgs-track-body-inner {
    min-height: 0;
    overflow: hidden;
}

/* Emails tab (admin dashboard) -- reuses the .pgs-track-* section/expand
   styling above, just with a context blurb + a live srcdoc iframe preview
   instead of a chapter grid. */
.email-context-box {
    background: var(--primary-light);
    border: 1px solid rgba(21, 85, 140, 0.15);
    border-radius: var(--radius-md);
    padding: 0.9rem 1.1rem;
    margin-bottom: 1rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-main);
}

.email-context-source {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.email-context-source code {
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 0.76rem;
}

.email-preview-frame {
    display: block;
    width: 100%;
    height: 420px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #ffffff;
}

@media (max-width: 640px) {
    .pgs-track-header {
        flex-wrap: wrap;
    }
    .pgs-track-header-meta {
        order: 3;
        flex-basis: 100%;
    }
}

/* ==========================================================================
   Kalkulatorer — reuses .category-card as a full-width stacked card
   ========================================================================== */
.calc-card {
    width: 100%;
    margin-bottom: 1.5rem;
}

.calc-card .category-card-header {
    font-size: 1.15rem;
}

.calc-card-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.calc-mortgage-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 768px) {
    .calc-mortgage-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    }
}

.calc-mortgage-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.coffee-slider-block {
    margin-bottom: 1.5rem;
}

.coffee-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.75rem;
}

.coffee-slider-header label {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-main);
}

.coffee-slider-header span {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-bsu);
}

.coffee-quick-stats {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 0.85rem;
}

.coffee-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.coffee-result-box {
    border: 1.5px solid var(--border);
    padding: 1.1rem;
    border-radius: var(--radius-md);
    background: #f8faf7;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.coffee-result-box.highlight {
    border-color: var(--color-aksjefond);
    background: #ecfdf5;
}

.coffee-result-box.muted {
    opacity: 0.7;
}

.coffee-result-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

.coffee-result-value {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

.coffee-result-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
}

@media (max-width: 640px) {
    .page-intro-title {
        font-size: 1.5rem;
    }
    .coffee-slider-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
}

/* ==========================================================================
   Header: reward badge, profile avatar + dropdown, edit-profile modal
   ========================================================================== */
.header-reward-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 44px;
    box-sizing: border-box;
    background: #0f2e1c;
    color: #ffffff;
    border: none;
    border-radius: 9999px;
    padding: 0 0.9rem 0 0.45rem;
    font-weight: 700;
    font-size: 0.9rem;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s;
}

.header-reward-badge:hover {
    background: #143b25;
}

.header-reward-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #facc15;
    color: #78350f;
    font-size: 0.65rem;
    font-weight: 800;
}

.profile-menu {
    position: relative;
}

.profile-avatar-btn {
    width: 44px;
    height: 44px;
    box-sizing: border-box;
    border-radius: 50%;
    background: none;
    padding: 0;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: box-shadow 0.15s;
}

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

.profile-avatar-btn:hover {
    box-shadow: 0 0 0 3px var(--primary-light, rgba(31, 87, 132, 0.2));
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    padding: 0.4rem;
    min-width: 190px;
    z-index: 200;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.profile-dropdown.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.profile-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0.6rem 0.65rem;
    border-radius: var(--radius-sm);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

/* Summary header row inside .profile-dropdown -- avatar + name + role,
   shared between the admin dashboard and the kid/parent dashboard so both
   profile menus look identical. */
.admin-profile-summary {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.3rem;
}

.admin-profile-summary-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
}

.admin-profile-summary-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.admin-profile-summary strong,
.admin-profile-summary span {
    display: block;
}

.admin-profile-summary strong {
    color: var(--text-main);
    font-size: 0.88rem;
    line-height: 1.3;
}

.admin-profile-summary span {
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.3;
}

.profile-dropdown-item:hover {
    background: var(--bg-main);
}

.profile-dropdown-item--danger {
    color: #dc2626;
    border-top: 1px solid var(--border);
    margin-top: 0.3rem;
    padding-top: 0.75rem;
}

.profile-dropdown-item--danger:hover {
    background: #fef2f2;
}

@media (max-width: 640px) {
    .header-reward-badge {
        height: 38px;
        font-size: 0.8rem;
        padding: 0 0.75rem 0 0.4rem;
    }
    .share-link-btn {
        height: 38px;
        font-size: 0.8rem;
        padding: 0 1rem;
    }
    .profile-avatar-btn {
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   Pengeskolen v2 -- overview (renders into #pengeskolen-root)
   ========================================================================== */
.continue-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    background: linear-gradient(155deg, #0f2e1c 0%, #163d26 100%);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    color: #ffffff;
}

.pgs-admin-notice {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-md);
    color: #1e3a5f;
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    padding: 1rem 1.2rem;
}

.continue-banner-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #86efac;
    margin-bottom: 0.35rem;
}

.continue-banner-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
}

.continue-banner-btn {
    background: #15803d;
    color: #ffffff;
    border: none;
    border-radius: 9999px;
    padding: 0.75rem 1.4rem;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, transform 0.1s;
}

.continue-banner-btn:hover {
    background: #14532d;
    transform: translateY(-1px);
}

.learning-stats-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.learning-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.learning-stats-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
}

.learning-stats-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.learning-stats-total {
    text-align: right;
}

.learning-stats-total-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.learning-stats-total-value {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-aksjefond);
}

.pgs-overall-progress-row,
.pgs-chapter-progress-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pgs-chapter-progress-bar-track {
    flex: 1;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.pgs-chapter-progress-bar-fill {
    height: 100%;
    background: var(--color-aksjefond);
    transition: width 0.3s;
}

.pgs-chapter-progress-text {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.match-request-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-main);
}

.pgs-match-request-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--border);
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 500;
}

.pgs-match-request-btn {
    background: var(--primary);
    color: #ffffff;
    border: none;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.pgs-chapters-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.pgs-all-chapters {
    margin-top: 1.5rem;
}

.pgs-all-chapters-summary {
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-muted);
    padding: 0.6rem 0;
    user-select: none;
}

.pgs-all-chapters-summary::-webkit-details-marker {
    display: none;
}

.pgs-all-chapters-summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 0.4rem;
    transition: transform 0.15s;
}

.pgs-all-chapters[open] .pgs-all-chapters-summary::before {
    transform: rotate(90deg);
}

.pgs-all-chapters .pgs-chapters-grid {
    margin-top: 1rem;
}

.pgs-chapter-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.8rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    min-height: 66px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.pgs-chapter-card:not(.pgs-chapter-card--soon):not(.pgs-chapter-card--locked):hover {
    transform: translateY(-1px);
    border-color: var(--color-aksjefond);
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.16);
}

.pgs-chapter-card:focus-visible {
    outline: 3px solid rgba(16, 185, 129, 0.22);
    outline-offset: 2px;
}

.pgs-chapter-card--locked {
    cursor: default;
    opacity: 0.65;
}

.pgs-chapter-card--soon {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    cursor: default;
    opacity: 0.65;
}

.pgs-chapter-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pgs-chapter-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 0.4rem;
    background: #ecfdf5;
    color: var(--color-aksjefond);
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.8rem;
    font-family: 'Bricolage Grotesque', sans-serif;
}

.pgs-chapter-copy {
    min-width: 0;
}

.pgs-chapter-duration {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
}

.pgs-chapter-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.3;
}

.pgs-chapter-cake {
    position: relative;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

.pgs-chapter-cake svg {
    display: block;
    transform: rotate(-90deg);
}

.pgs-chapter-cake-track,
.pgs-chapter-cake-fill {
    fill: none;
    stroke-width: 3.5;
}

.pgs-chapter-cake-track {
    stroke: rgba(15, 23, 42, 0.1);
}

.pgs-chapter-cake-fill {
    stroke: var(--color-aksjefond);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}

.pgs-chapter-cake > span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.pgs-chapter-cake--complete > span {
    color: var(--color-aksjefond);
    font-size: 0.86rem;
}

.pgs-chapter-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
    flex: 1;
}

/* Statusmerke i superadmin-visningen av kapitteloversikten.
   Barn ser aldri disse -- de finnes for at redaktøren skal se hva som er
   sluppet og hva som fortsatt er utkast. Utkast er previewbare, men usynlige
   for barn (se CHAPTER_ROADMAP.status i pengeskolen.js). */
.pgs-status-badge {
    flex: 0 0 auto;
    align-self: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
}

.pgs-status-badge--published {
    background: #e6f4ee;
    color: #12734c;
    border: 1px solid #c2e5d5;
}

.pgs-status-badge--draft {
    background: #fdf6e3;
    color: #8a6400;
    border: 1px solid #f0dfae;
}

/* Utkastkort får en stiplet ramme, slik at det skiller seg ut i rutenettet
   uten å bruke farge alene -- det ville vært utilgjengelig for fargeblinde. */
.pgs-chapter-card--draft {
    border-style: dashed;
    border-color: #d9c48a;
    background: #fffdf7;
}

.pgs-chapter-soon-badge {
    align-self: flex-start;
    background: var(--bg-main);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
}

@media (max-width: 860px) {
    .pgs-chapters-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .pgs-chapters-grid {
        grid-template-columns: 1fr;
    }
    .continue-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    .continue-banner-btn {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   Pengeskolen v2 -- screen viewer overlay. Namespaced under #pengeskolen-viewer
   / .pgs-* deliberately, NOT the shared .modal-overlay/.modal-content classes --
   those are already reused by two other unrelated popup systems in this file.
   ========================================================================== */
#pengeskolen-viewer.pgs-viewer-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(15, 46, 28, 0.35);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

#pengeskolen-viewer.pgs-viewer-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.pgs-viewer-card {
    width: 100%;
    max-width: 640px;
    max-height: min(88vh, 720px);
    aspect-ratio: 4 / 5;
    display: flex;
    flex-direction: column;
    background: linear-gradient(165deg, #f4fbf6 0%, #eaf6ee 45%, #eef7fb 100%);
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transform: translateY(16px) scale(0.98);
    transition: transform 0.25s ease;
}

#pengeskolen-viewer.active .pgs-viewer-card {
    transform: translateY(0) scale(1);
}

.pgs-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem 0.75rem;
}

.pgs-viewer-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
}

.pgs-viewer-chapter-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 0.35rem;
    background: #ecfdf5;
    color: var(--color-aksjefond);
    border-radius: 8px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    flex-shrink: 0;
}

.pgs-viewer-chapter-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pgs-viewer-header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.pgs-viewer-cake {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.pgs-viewer-cake svg {
    transform: rotate(-90deg);
}

.pgs-viewer-cake-track {
    fill: none;
    stroke: rgba(0, 0, 0, 0.08);
    stroke-width: 3;
}

.pgs-viewer-cake-fill {
    fill: none;
    stroke: var(--color-aksjefond);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s ease;
}

.pgs-viewer-cake-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.pgs-viewer-close {
    background: rgba(255, 255, 255, 0.7);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
}

/* Innholdet i modalen ruller, mens bunnlinjen står fast.
   Uten pust nederst legger siste element seg helt inntil knappene, og på
   skjermer der innholdet vokser -- en oppgave som utvider seg, et resultat
   som dukker opp -- ser det ut som teksten er kuttet.
   Sidepaddingen er strammet inn for å gi lesebredden mer plass. */
.pgs-viewer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.25rem 4rem;
    scroll-padding-bottom: 4rem;
}

@media (max-width: 640px) {
    .pgs-viewer-body {
        padding: 1rem 1rem 3.5rem;
    }
}

/* Siste element skal aldri ha egen bunnmarg i tillegg til paddingen. */
.pgs-viewer-body > *:last-child {
    margin-bottom: 0;
}

.pgs-fade-in {
    animation: pgsFadeIn 0.3s ease;
}

@keyframes pgsFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pgs-viewer-screen-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.9rem;
}

/* Per learning-work-files/IMAGES.md §2: full width on mobile, capped and
   centered on desktop, 14px radius, no border unless the image has a white
   background (then a thin frame so it doesn't bleed into the card). */
.pgs-viewer-image {
    margin: 1.5rem 0;
}

.pgs-viewer-image img {
    display: block;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    border-radius: 14px;
}

.pgs-viewer-image figcaption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
}

.pgs-viewer-screen-body {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-main);
}

.pgs-viewer-screen-body p {
    margin-bottom: 0.9rem;
}

.pgs-viewer-screen-body ul {
    margin: 0 0 0.9rem 1.2rem;
}

.pgs-viewer-screen-body li {
    margin-bottom: 0.35rem;
}

.pgs-blockquote {
    margin: 0 0 0.9rem;
    padding: 0.95rem 1.1rem;
    background: rgba(31, 87, 132, 0.06);
    border-left: 3px solid var(--primary, #1F5784);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.pgs-blockquote p, .pgs-blockquote ul {
    margin-bottom: 0.65rem;
}

.pgs-blockquote p:last-child, .pgs-blockquote ul:last-child {
    margin-bottom: 0;
}

.pgs-table-wrap {
    overflow-x: auto;
    margin-bottom: 0.9rem;
}

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

.pgs-table th, .pgs-table td {
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    text-align: left;
}

.pgs-table th {
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
}

.pgs-interaction-placeholder {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(255, 255, 255, 0.65);
    border: 1.5px dashed rgba(16, 185, 129, 0.4);
    border-radius: var(--radius-md);
    padding: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.pgs-interaction-placeholder-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.pgs-interaction {
    position: relative;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.09), rgba(16, 185, 129, 0.02));
    border: 1.5px solid rgba(16, 185, 129, 0.35);
    border-left: 4px solid #10b981;
    border-radius: var(--radius-md);
    padding: 1.4rem 1.1rem 1.1rem;
    margin-top: 1.25rem;
}

.pgs-interaction::before {
    content: "OPPGAVE";
    position: absolute;
    top: -0.6rem;
    left: 1rem;
    background: #10b981;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    box-shadow: 0 2px 5px rgba(16, 185, 129, 0.35);
}

.pgs-bank-picker-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.pgs-bank-picker-option,
.pgs-bank-picker-skip,
.pgs-interest-story-tabs button {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-main);
    border-radius: 999px;
    padding: 0.7rem 0.9rem;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
}

.pgs-bank-picker-option.active,
.pgs-interest-story-tabs button.active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.pgs-bank-picker-skip {
    display: block;
    margin: 0.85rem auto 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    text-decoration: underline;
}

.pgs-bank-picker-status {
    min-height: 1.4em;
    margin-top: 0.65rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.pgs-interest-story {
    text-align: center;
}

.pgs-interest-story-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.pgs-interest-story-number {
    color: var(--primary);
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(2.5rem, 9vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pgs-interest-story-change {
    min-height: 1.5em;
    margin-top: 0.65rem;
    color: #0b5b2a;
    font-weight: 800;
}

.pgs-interest-story-change.negative {
    color: #9f3a38;
}

.pgs-interest-story-rate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 1.2rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.pgs-interest-story-rate-input {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
}

.pgs-interest-story-rate-input input {
    width: 4.2rem;
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: 800;
    outline: none;
}

.pgs-interest-story-source,
.pgs-goal-comparison-source {
    margin: 0.7rem 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.pgs-interest-story-result,
.pgs-interest-story-break-even {
    max-width: 35rem;
    margin: 1rem auto 0;
    color: var(--text-main);
    line-height: 1.5;
}

.pgs-interest-story-break-even {
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.84rem;
}

.pgs-goal-comparison-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 0.75rem;
}

.pgs-goal-comparison-toolbar label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.pgs-goal-comparison-toolbar select {
    min-width: 11rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    padding: 0.65rem 0.75rem;
    color: var(--text-main);
    font: inherit;
    font-weight: 700;
}

.pgs-goal-comparison-toolbar .pgs-goal-comparison-real {
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}

.pgs-goal-comparison-context {
    margin-bottom: 0.75rem;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.pgs-goal-comparison-rows {
    display: grid;
    gap: 0.45rem;
}

.pgs-goal-comparison-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6rem 8rem;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.8rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.78);
    font-size: 0.82rem;
}

.pgs-goal-comparison-row label {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.pgs-goal-comparison-row input {
    width: 4rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    padding: 0.35rem;
    font: inherit;
}

.pgs-goal-comparison-row strong {
    text-align: right;
    color: var(--primary);
}

.pgs-goal-comparison-highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin-top: 0.8rem;
}

.pgs-goal-comparison-highlights > div {
    display: flex;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.8rem;
    border-radius: var(--radius-sm);
    background: rgba(31, 87, 132, 0.08);
    font-size: 0.78rem;
}

.pgs-goal-comparison-source a {
    color: var(--primary);
    font-weight: 700;
}

.pgs-age-timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.pgs-age-timeline-header strong {
    color: var(--primary);
    font-size: 1.35rem;
}

.pgs-age-timeline > input[type='range'] {
    width: 100%;
    margin: 0.6rem 0 1rem;
    accent-color: var(--primary);
}

.pgs-age-timeline-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.pgs-age-timeline-columns > div {
    padding: 0.85rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.78);
}

.pgs-age-timeline-columns h4 {
    margin: 0 0 0.45rem;
    color: var(--text-main);
    font-size: 0.82rem;
}

.pgs-age-timeline-columns ul {
    margin: 0;
    padding-left: 1rem;
    font-size: 0.8rem;
}

.pgs-age-timeline-columns .muted {
    opacity: 0.62;
}

.pgs-age-timeline-note {
    margin: 0.8rem 0 0;
    color: var(--primary);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.5;
}

@media (max-width: 620px) {
    .pgs-bank-picker-options,
    .pgs-goal-comparison-highlights,
    .pgs-age-timeline-columns {
        grid-template-columns: 1fr;
    }

    .pgs-goal-comparison-row {
        grid-template-columns: 1fr 5.5rem;
    }

    .pgs-goal-comparison-row strong {
        grid-column: 1 / -1;
        text-align: left;
    }
}

/* quickCheck */
.pgs-quickcheck-question {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.85rem;
    color: var(--text-main);
}

.pgs-quickcheck-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.pgs-quickcheck-option {
    border: 1.5px solid var(--border);
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 0.6rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.pgs-quickcheck-option:hover {
    border-color: var(--color-aksjefond);
}

.pgs-quickcheck-option.correct {
    border-color: #10b981;
    background: #ecfdf5;
    color: #047857;
}

.pgs-quickcheck-option.incorrect {
    border-color: #ef4444;
    background: #fef2f2;
    color: #b91c1c;
}

.pgs-quickcheck-feedback {
    margin-top: 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius-sm);
}

.pgs-quickcheck-feedback.correct {
    background: #ecfdf5;
    color: #047857;
}

.pgs-quickcheck-feedback.incorrect {
    background: #fef2f2;
    color: #b91c1c;
}

/* goalForm */
.pgs-goalform-field {
    margin-bottom: 1rem;
}

.pgs-goalform-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.pgs-goalform-field input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.88rem;
}

.pgs-goalform-tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pgs-goalform-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1.5px solid var(--border);
    background: #fff;
    border-radius: 9999px;
    padding: 0.5rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-main);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.pgs-goalform-tag-icon {
    font-size: 1rem;
}

.pgs-goalform-tag:hover {
    border-color: var(--color-aksjefond);
}

.pgs-goalform-tag.active {
    background: var(--color-aksjefond);
    border-color: var(--color-aksjefond);
    color: #fff;
}

.pgs-goalform-sliders {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
}

.pgs-goalform-slider-box {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
}

.pgs-goalform-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
}

.pgs-goalform-slider-value {
    color: var(--color-aksjefond);
    font-weight: 800;
}

.pgs-goalform-slider-input {
    width: 100%;
    margin-top: 0.6rem;
    accent-color: var(--color-aksjefond);
}

.pgs-goalform-slider-sublabel {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 0.6rem;
    margin-bottom: 0.3rem;
}

.pgs-goalform-bolig-egenkapital {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid #ADADAD;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s;
}

.pgs-goalform-bolig-egenkapital:focus {
    border-color: #0E2243;
}

.pgs-goalform-bolig-percent {
    width: 100%;
    accent-color: var(--color-aksjefond);
}

.pgs-goalform-bolig-percent-val {
    color: var(--color-aksjefond);
    font-weight: 800;
    font-size: 0.85rem;
}

.pgs-goalform-bolig-price {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--text-main);
    padding-top: 0.6rem;
    border-top: 1px dashed var(--border);
}

.pgs-goalform-submit {
    background: var(--color-aksjefond);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.65rem 1.2rem;
    font-weight: 700;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
}

.pgs-goalform-status {
    margin-top: 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm);
}

.pgs-goalform-status.correct {
    background: #ecfdf5;
    color: #047857;
}

.pgs-goalform-status.incorrect {
    background: #fef2f2;
    color: #b91c1c;
}

/* checklist */
.pgs-checklist-items {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.pgs-checklist-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.88rem;
    cursor: pointer;
}

.pgs-checklist-item input {
    width: 18px;
    height: 18px;
    accent-color: var(--color-aksjefond);
}

/* sorting */
.pgs-sorting-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    min-height: 2.4rem;
}

.pgs-sorting-items-empty {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
}

.pgs-sorting-item {
    border: 1.5px solid var(--border);
    background: #fff;
    border-radius: 9999px;
    padding: 0.5rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.pgs-sorting-item:hover {
    border-color: var(--color-aksjefond);
}

.pgs-sorting-item.selected {
    background: var(--color-aksjefond);
    border-color: var(--color-aksjefond);
    color: #fff;
}

.pgs-sorting-buckets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
}

.pgs-sorting-bucket {
    background: #f8fafc;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    min-height: 4.5rem;
    cursor: pointer;
}

.pgs-sorting-bucket--disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.pgs-sorting-bucket-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-main);
}

.pgs-sorting-bucket-note {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-style: italic;
}

.pgs-sorting-bucket-slot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.pgs-sorting-chip {
    border-radius: 9999px;
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1.5px solid;
}

.pgs-sorting-chip.correct {
    background: #ecfdf5;
    border-color: #10b981;
    color: #047857;
}

.pgs-sorting-chip.incorrect {
    background: #fef2f2;
    border-color: #ef4444;
    color: #b91c1c;
}

.pgs-sorting-status {
    margin-top: 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm);
}

.pgs-sorting-status.correct {
    background: #ecfdf5;
    color: #047857;
}

.pgs-sorting-status.incorrect {
    background: #fef2f2;
    color: #b91c1c;
}

/* cardQuiz */
.pgs-cardquiz-prompt {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-main);
}

.pgs-cardquiz-counter {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0.75rem;
}

.pgs-cardquiz-card {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.pgs-cardquiz-desc {
    font-size: 0.9rem;
    color: var(--text-main);
    margin-bottom: 0.85rem;
}

.pgs-cardquiz-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.pgs-cardquiz-option {
    border: 1.5px solid var(--border);
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 0.6rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
}

.pgs-cardquiz-option:disabled {
    cursor: default;
}

.pgs-cardquiz-option.correct {
    border-color: #10b981;
    background: #ecfdf5;
    color: #047857;
}

.pgs-cardquiz-option.incorrect {
    border-color: #ef4444;
    background: #fef2f2;
    color: #b91c1c;
}

.pgs-cardquiz-explanation {
    margin-top: 0.75rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border);
}

.pgs-cardquiz-next {
    margin-top: 0.85rem;
    background: var(--color-aksjefond);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.65rem 1.2rem;
    font-weight: 700;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
}

/* calculator */
.pgs-calc-fields {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.pgs-calc-field-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-main);
}

.pgs-calc-field-value {
    color: var(--color-aksjefond);
    font-weight: 800;
}

.pgs-calc-field input[type="range"] {
    width: 100%;
    margin-top: 0.4rem;
    accent-color: var(--color-aksjefond);
}

.pgs-calc-field input[type="number"] {
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid #ADADAD;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s;
}

.pgs-calc-field input[type="number"]:focus {
    border-color: #0E2243;
}

.pgs-calc-rows {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.9rem;
}

.pgs-calc-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.85rem;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

.pgs-calc-row:last-child {
    border-bottom: none;
}

.pgs-calc-row.negative strong {
    color: #b91c1c;
}

.pgs-calc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.pgs-calc-chip {
    border: 1.5px solid var(--border);
    background: #fff;
    border-radius: 9999px;
    padding: 0.5rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.pgs-calc-chip.active {
    background: var(--color-aksjefond);
    border-color: var(--color-aksjefond);
    color: #fff;
}

.pgs-calc-doubling-result {
    font-size: 0.9rem;
    color: var(--text-main);
    margin-bottom: 0.85rem;
}

.pgs-calc-ladder-field {
    margin-bottom: 0.75rem;
}

.pgs-calc-ladder-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.pgs-calc-ladder-field input {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.85rem;
}

.pgs-calc-ladder-row {
    display: flex;
    justify-content: space-between;
    padding: 0.45rem 0;
    font-size: 0.83rem;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

.pgs-calc-check {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--border);
}

.pgs-calc-check label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

.pgs-calc-check-row {
    display: flex;
    gap: 0.5rem;
}

.pgs-calc-check-row input {
    flex: 1;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.85rem;
}

.pgs-calc-check-submit {
    background: var(--color-aksjefond);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.55rem 1rem;
    font-weight: 700;
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
}

.pgs-calc-check-feedback {
    margin-top: 0.65rem;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.55rem 0.8rem;
    border-radius: var(--radius-sm);
}

.pgs-calc-check-feedback.correct {
    background: #ecfdf5;
    color: #047857;
}

.pgs-calc-check-feedback.incorrect {
    background: #fef2f2;
    color: #b91c1c;
}

/* taskCard */
.pgs-taskcard-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-main);
    margin-bottom: 0.75rem;
}

.pgs-taskcard-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.pgs-taskcard-link {
    border: 1.5px solid var(--color-aksjefond);
    color: var(--color-aksjefond);
    border-radius: 9999px;
    padding: 0.5rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.pgs-taskcard-inputs {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.pgs-taskcard-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.pgs-taskcard-field-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pgs-taskcard-field-row input {
    flex: 1;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.85rem;
}

.pgs-taskcard-unit {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.pgs-taskcard-output {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.9rem;
    font-size: 0.85rem;
    color: var(--text-main);
    margin-bottom: 0.85rem;
}

.pgs-taskcard-action {
    background: var(--color-aksjefond);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.65rem 1.2rem;
    font-weight: 700;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
}

.pgs-taskcard-action:disabled {
    opacity: 0.6;
    cursor: default;
}

/* projection / scenarioCompare */
.pgs-projection-canvas-wrap {
    position: relative;
    height: 240px;
    width: 100%;
}

.pgs-projection-controls {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.85rem;
}

.pgs-projection-btn {
    border: 1.5px solid var(--border);
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.pgs-projection-btn:hover {
    border-color: var(--color-aksjefond);
}

.pgs-projection-annotations {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.pgs-projection-annotation {
    font-size: 0.72rem;
    color: var(--text-muted);
    background: #f1f5f9;
    border-radius: 9999px;
    padding: 0.25rem 0.65rem;
}

.pgs-projection-field {
    margin-top: 0.85rem;
}

.pgs-projection-field label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-main);
}

.pgs-projection-field-value {
    color: var(--color-aksjefond);
}

.pgs-projection-amount {
    width: 100%;
    margin-top: 0.4rem;
    accent-color: var(--color-aksjefond);
}

.pgs-projection-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-main);
    margin-top: 0.6rem;
    cursor: pointer;
}

.pgs-scenario-scrubber {
    margin-top: 0.85rem;
}

.pgs-scenario-range {
    width: 100%;
    accent-color: var(--color-aksjefond);
}

.pgs-scenario-readout {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pgs-scenario-readout-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.pgs-scenario-readout-row strong {
    color: var(--text-main);
}

.pgs-scenario-deposited {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.pgs-scenario-personal {
    margin-top: 0.85rem;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.9rem;
    font-size: 0.85rem;
    color: var(--text-main);
}

@media (max-width: 640px) {
    .pgs-sorting-buckets {
        grid-template-columns: 1fr;
    }
}

/* ---- Karriere-track interaction kinds ------------------------------- */

.pgs-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.pgs-chip {
    border: 1.5px solid var(--border);
    background: #fff;
    border-radius: 9999px;
    padding: 0.5rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-main);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.pgs-chip:hover {
    border-color: var(--color-aksjefond);
}

.pgs-chip.active {
    background: var(--color-aksjefond);
    border-color: var(--color-aksjefond);
    color: #fff;
}

.pgs-chip.revealed:not(.active) {
    border-color: var(--primary);
    border-style: dashed;
}

.pgs-multiselect-submit,
.pgs-sliderguess-submit,
.pgs-threshold-add {
    border: 0;
    background: var(--primary);
    color: #fff;
    border-radius: 9999px;
    padding: 0.65rem 1.1rem;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
}

.pgs-multiselect-reveal,
.pgs-textcompare-note,
.pgs-sliderguess-reveal,
.pgs-checknotes-closing,
.pgs-repeat-closing {
    margin-top: 0.85rem;
    background: #f0fdf4;
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.9rem;
    font-size: 0.85rem;
    color: var(--text-main);
}

.pgs-choice-question {
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.pgs-choice-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.pgs-choice-options .pgs-bank-picker-option {
    text-align: left;
}

.pgs-choice-outcome {
    margin-top: 0.75rem;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.9rem;
    font-size: 0.85rem;
    color: var(--text-main);
}

.pgs-repeat-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.pgs-repeat-entries {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.pgs-repeat-entry {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pgs-repeat-entry-label {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-main);
}

.pgs-repeat-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.82rem;
}

.pgs-repeat-field span {
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.pgs-repeat-field input,
.pgs-repeat-field select,
.pgs-repeat-field textarea,
.pgs-checknotes-note,
.pgs-threshold-form input {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid #ADADAD;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.pgs-repeat-field input:focus,
.pgs-repeat-field select:focus,
.pgs-repeat-field textarea:focus,
.pgs-checknotes-note:focus {
    border-color: #0E2243;
}

.pgs-repeat-field textarea {
    min-height: 4.5rem;
    resize: vertical;
}

.pgs-checknotes-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pgs-checknotes-item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pgs-checknotes-note {
    margin-left: 1.85rem;
    max-width: calc(100% - 1.85rem);
}

.pgs-textcompare-box {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}

.pgs-textcompare-box--specific {
    background: #f0fdf4;
    border-color: rgba(16, 185, 129, 0.3);
}

.pgs-textcompare-label {
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.pgs-textcompare-prompt {
    font-weight: 700;
    font-size: 0.85rem;
    margin: 0.75rem 0 0.5rem;
}

.pgs-templateeditor-fields {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.pgs-templateeditor-templates {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pgs-templateeditor-card {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
}

.pgs-templateeditor-card-label {
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.pgs-templateeditor-text {
    font-size: 0.85rem;
    color: var(--text-main);
    white-space: pre-wrap;
    margin-bottom: 0.6rem;
}

.pgs-templateeditor-copy {
    border: 1.5px solid var(--color-aksjefond);
    background: #fff;
    color: var(--color-aksjefond);
    border-radius: 9999px;
    padding: 0.4rem 0.8rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.pgs-incomecheck-detail {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0.75rem 0;
}

.pgs-incomecheck-response {
    margin-top: 0.75rem;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.9rem;
    font-size: 0.85rem;
}

.pgs-threshold-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.pgs-threshold-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.pgs-threshold-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
}

.pgs-threshold-remove {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
}

.pgs-threshold-total {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
}

.pgs-threshold-total--over {
    color: #b91c1c;
}

.pgs-threshold-note {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.pgs-sliderguess-value {
    text-align: center;
    color: var(--primary);
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(2.5rem, 9vw, 4rem);
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.pgs-sliderguess {
    text-align: center;
}

.pgs-sliderguess input[type="range"] {
    width: 100%;
    accent-color: var(--color-aksjefond);
    margin-bottom: 0.85rem;
}

.pgs-fiveyear-hint {
    font-size: 0.78rem;
    color: #b91c1c;
    margin-top: -0.3rem;
}

.pgs-calc-note {
    margin-top: 0.75rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .pgs-repeat-entries {
        gap: 0.65rem;
    }
}

.pgs-viewer-footer {
    position: relative;
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Mykt tonet felt rett over knappene. Gjør det tydelig at innholdet ruller
   videre bak dem, i stedet for at det ser ut som teksten stopper brått. */
.pgs-viewer-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 2rem;
    background: linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0));
    pointer-events: none;
}

@media (max-width: 640px) {
    .pgs-viewer-footer {
        padding: 0.85rem 1rem;
    }
}

.pgs-viewer-prev {
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--text-main);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1.1rem;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    font-family: inherit;
}

.pgs-viewer-prev:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pgs-viewer-next {
    flex: 1;
    background: #15803d;
    color: #ffffff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.85rem 1.1rem;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    font-family: inherit;
    opacity: 1;
    transition: background 0.15s, opacity 0.6s ease;
}

.pgs-viewer-next:hover {
    background: #14532d;
}

.pgs-viewer-next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transition: none;
}

@media (max-width: 640px) {
    #pengeskolen-viewer.pgs-viewer-overlay {
        padding: 0;
    }
    .pgs-viewer-card {
        max-width: 100%;
        max-height: 100%;
        height: 100dvh;
        aspect-ratio: auto;
        border-radius: 0;
    }
    .pgs-viewer-header {
        padding: max(1rem, env(safe-area-inset-top)) 1.15rem 0.6rem;
    }
    .pgs-viewer-body {
        padding: 1.15rem;
    }
    .pgs-viewer-screen-title {
        font-size: 1.15rem;
    }
    .pgs-viewer-screen-body {
        font-size: 1rem;
    }
    .pgs-viewer-footer {
        padding: 0.9rem 1.15rem max(0.9rem, env(safe-area-inset-bottom));
    }
}