.kollio-lockup {
  display: inline-flex;
  align-items: center;
  gap: .62rem;
  color: #10243e;
  font-family: Barlow, system-ui, sans-serif;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
}

.kollio-lockup-mark {
  width: 2.1em;
  height: 2.1em;
  border-radius: .65em;
  object-fit: cover;
}

.kollio-lockup-mark-dark { display: none; }
body.dark .kollio-lockup-mark-light,
body.dark-theme .kollio-lockup-mark-light,
.auth-brand .kollio-lockup-mark-light { display: none; }
body.dark .kollio-lockup-mark-dark,
body.dark-theme .kollio-lockup-mark-dark,
.auth-brand .kollio-lockup-mark-dark { display: block; }

body.dark .kollio-lockup,
body.dark-theme .kollio-lockup,
.auth-brand .kollio-lockup {
  color: #fff;
}

.auth-brand .kollio-lockup-mark {
  width: 4rem;
  height: 4rem;
}

.bmac-website-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  box-sizing: border-box; width: auto; max-width: 100%; min-width: 0;
  min-height: 52px; padding: .25rem 1.1rem; border: 0; border-radius: 12px;
  background: #06766d; color: #fff !important; box-shadow: 0 12px 28px rgba(6,118,109,.22);
  font-weight: 800; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.bmac-website-button:hover { transform: translateY(-2px); background: #045f58; box-shadow: 0 16px 32px rgba(6,118,109,.3); }
.bmac-website-button:focus-visible { outline: 3px solid rgba(94,224,206,.6); outline-offset: 3px; }
.bmac-coffee { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: #ffdd00; font-size: 1.05rem; }

/* Publika supportrar från Buy Me a Coffees offentliga supporterflöde. */
.bmac-supporters {
  --support-surface: var(--surface, var(--box-background-color, #fff));
  --support-soft: var(--surface-soft, var(--background-color, #f3f6f6));
  --support-text: var(--text, var(--text-color, #152438));
  --support-muted: var(--muted, var(--text-muted, #64748b));
  --support-border: var(--border, var(--box-border-color, #dce5e3));
  width: 100%; box-sizing: border-box; padding: clamp(1.15rem, 3vw, 1.65rem);
  border: 1px solid var(--support-border); border-radius: 22px;
  background: var(--support-surface); color: var(--support-text);
}
.bmac-supporters-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.bmac-supporters-heading h2 { margin: .25rem 0 .35rem; color: var(--support-text); font-size: clamp(1.35rem, 3vw, 1.85rem); line-height: 1.15; }
.bmac-supporters-heading p { margin: 0; color: var(--support-muted); line-height: 1.5; }
.bmac-supporters-eyebrow { display: inline-flex; align-items: center; gap: .45rem; color: #06766d; font-size: .75rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
body.dark .bmac-supporters-eyebrow, body.dark-theme .bmac-supporters-eyebrow { color: #5ee0ce; }
.bmac-supporter-count { flex: 0 0 auto; padding: .5rem .75rem; border-radius: 999px; background: color-mix(in srgb, #06766d 11%, var(--support-surface)); color: #06766d; font-size: .78rem; font-weight: 800; }
body.dark .bmac-supporter-count, body.dark-theme .bmac-supporter-count { color: #5ee0ce; }
.bmac-supporter-list { display: grid; gap: .65rem; }
.bmac-supporter-card { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .75rem; border: 1px solid var(--support-border); border-radius: 15px; background: var(--support-soft); }
.bmac-supporter-card img, .bmac-supporter-avatar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: linear-gradient(145deg, #06766d, #0b5351); color: #fff; font-size: 1rem; font-weight: 850; }
.bmac-supporter-card > div { display: grid; gap: .2rem; min-width: 0; }
.bmac-supporter-card strong { overflow: hidden; color: var(--support-text); text-overflow: ellipsis; white-space: nowrap; }
.bmac-supporter-card span, .bmac-supporter-card time { color: var(--support-muted); font-size: .82rem; }
.bmac-supporter-card time { text-align: right; white-space: nowrap; }
.bmac-supporters-empty { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem; padding: 1rem; border: 1px dashed color-mix(in srgb, #06766d 35%, var(--support-border)); border-radius: 16px; background: color-mix(in srgb, #06766d 6%, var(--support-surface)); }
.bmac-supporters-empty > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #06766d; color: #fff; }
.bmac-supporters-empty.subdued > span { background: var(--support-muted); }
.bmac-supporters-empty h3 { margin: 0 0 .25rem; color: var(--support-text); font-size: 1rem; }
.bmac-supporters-empty p { margin: 0; color: var(--support-muted); line-height: 1.45; }
.bmac-supporters-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--support-border); }
.bmac-supporters-footer p { display: flex; align-items: flex-start; gap: .5rem; margin: 0; color: var(--support-muted); font-size: .78rem; line-height: 1.4; }
.bmac-supporters-footer p i { margin-top: .12rem; color: #06766d; }
.bmac-supporters-footer a { flex: 0 0 auto; color: #06766d; font-size: .82rem; font-weight: 750; text-decoration: none; }
.bmac-supporters-footer a:hover { text-decoration: underline; }
.public-bmac-supporters { margin: clamp(1.25rem, 3vw, 2rem) 0; }
.app-bmac-supporters { margin-bottom: 1rem; }
@media (max-width: 600px) {
  .bmac-supporters { padding: 1rem; border-radius: 18px; }
  .bmac-supporters-heading { display: grid; }
  .bmac-supporter-count { width: fit-content; }
  .bmac-supporter-card { grid-template-columns: 42px minmax(0, 1fr); }
  .bmac-supporter-card img, .bmac-supporter-avatar { width: 42px; height: 42px; }
  .bmac-supporter-card time { grid-column: 2; text-align: left; }
  .bmac-supporters-footer { display: grid; }
  .bmac-supporters-footer a { min-height: 44px; display: inline-flex; align-items: center; }
}
/* Vardagskostnader och korta inställningsflöden */
.settings-home-intro,
.settings-cost-callout,
.cost-form-sheet {
  background: var(--kollio-surface, #fff);
  border: 1px solid var(--kollio-border, rgba(21, 36, 50, .1));
  border-radius: 22px;
  box-shadow: 0 12px 34px rgba(22, 43, 60, .07);
}
.settings-home-intro { padding: 22px; margin-bottom: 16px; }
.settings-home-intro h2,
.settings-home-intro p { margin: 0; }
.settings-home-intro p { margin-top: 7px; color: var(--kollio-muted, #607080); }
.settings-home-group {
  margin-top: 16px; padding: 18px; border: 1px solid var(--kollio-border, rgba(21, 36, 50, .1));
  border-radius: 20px; background: color-mix(in srgb, var(--kollio-surface, #fff) 88%, var(--main-color, #199195) 12%);
}
.settings-home-group-title { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.settings-home-group-title h3 { margin: 0; font-size: 1.05rem; line-height: 1.25; font-weight: 850; }
.settings-home-group-title p { margin: 3px 0 0; color: var(--kollio-muted, #607080); font-size: .88rem; line-height: 1.35; }
.settings-home-group-icon { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #176f73; background: rgba(25, 145, 149, .12); }
.settings-home-group-icon.violet { color: #6953a7; background: rgba(112, 88, 175, .13); }
.settings-home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.settings-people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settings-home-grid > a {
  min-width: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 13px;
  padding: 17px; color: inherit; text-decoration: none; background: var(--kollio-surface, #fff);
  border: 1px solid var(--kollio-border, rgba(21, 36, 50, .1)); border-radius: 18px; transition: transform .18s, border-color .18s;
}
.settings-home-grid > a:hover { transform: translateY(-2px); border-color: var(--main-color, #167c80); }
.settings-home-grid strong,
.settings-home-grid small { display: block; }
.settings-home-grid small { margin-top: 4px; line-height: 1.35; color: var(--kollio-muted, #607080); }
.settings-home-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: #176f73; background: rgba(25, 145, 149, .12); }
.settings-home-icon.coral { color: #b64b35; background: rgba(239, 105, 77, .13); }
.settings-home-icon.violet { color: #6953a7; background: rgba(112, 88, 175, .13); }
.settings-home-icon.muted { color: #566778; background: rgba(80, 101, 119, .12); }
.stats-mobile-toggle { display: none; }
.settings-cost-callout { margin-top: 16px; padding: 18px; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.settings-cost-callout p { margin: 4px 0 0; color: var(--kollio-muted, #607080); }
.settings-detail-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 14px; border-radius: 15px; background: rgba(var(--main-color-rgb, 25,145,149), .08); }
.settings-detail-nav a { display: inline-flex; gap: 8px; align-items: center; color: inherit; text-decoration: none; min-height: 44px; }
.settings-detail[data-settings-section] > .account-section { display: none; }
.settings-detail[data-settings-section="budget"] > #budget,
.settings-detail[data-settings-section="budget"] > #periodbudget,
.settings-detail[data-settings-section="notifications"] > #aviseringar,
.settings-detail[data-settings-section="categories"] > #kategorier,
.settings-detail[data-settings-section="payments"] > #betalsatt,
.settings-detail[data-settings-section="appearance"] > #utseende,
.settings-detail[data-settings-section="appearance"] > #visning,
.settings-detail[data-settings-section="account"] > #konto { display: block; }

.costs-page { padding-bottom: 110px; }
.cost-context-empty { max-width: 650px; margin: 20px auto; padding: 24px; text-align: center; }
.cost-context-empty h1 { margin: 4px 0 8px; }
.cost-context-empty p { color: var(--kollio-muted, #607080); }
.cost-context-empty .app-action { justify-content: center; }
.cost-form-sheet { position: fixed; z-index: 1200; box-sizing: border-box; inset: auto max(16px, calc((100vw - 720px) / 2)) 16px; max-height: calc(100dvh - 32px); overflow: auto; padding: 22px; transform: translateY(calc(100% + 32px)); transition: transform .24s ease; }
.cost-form-sheet.is-open { transform: translateY(0); }
.cost-form-sheet > header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.cost-form-sheet h2,
.cost-form-sheet header p { margin: 0; }
.cost-form-sheet header p { margin-top: 5px; color: var(--kollio-muted, #607080); }
.cost-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cost-fee-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.cost-fee-fields .form-group { min-width: 0; }
#cost-fee-type-group { transition: opacity .18s ease; }
#cost-fee-type-group.is-disabled { opacity: .52; }
.cost-selected-subscription { display: grid; gap: 3px; margin-bottom: 14px; padding: 13px 15px; border: 1px solid var(--kollio-border, rgba(21,36,50,.1)); border-radius: 14px; background: rgba(var(--main-color-rgb,25,145,149),.07); }
.cost-selected-subscription > span { color: var(--kollio-muted, #607080); font-size: .78rem; }
.cost-selected-subscription > strong { font-size: 1.05rem; }
.cost-selected-subscription > small { display: flex; gap: 6px; align-items: center; margin-top: 3px; color: var(--kollio-muted, #607080); }
.field-help { display: block; margin-top: 6px; color: var(--kollio-muted, #607080); }
.cost-total-preview { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; padding: 13px 15px; border-radius: 13px; background: rgba(var(--main-color-rgb,25,145,149),.09); }
.cost-total-preview strong { font-size: 1.15rem; white-space: nowrap; }
.cost-amount-input { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; }
.cost-amount-input input { grid-area: 1 / 1 / 2 / 3; padding-right: 58px; }
.cost-amount-input span { grid-area: 1 / 2; padding-right: 14px; color: var(--kollio-muted, #607080); pointer-events: none; }
.cost-form-hint { padding: 12px 14px; border-radius: 13px; background: rgba(var(--main-color-rgb,25,145,149),.08); color: var(--kollio-muted, #607080); }
.cost-delete-current { width: 100%; justify-content: center; margin-top: 12px; }
.details-primary-actions { padding: 0 20px 14px; }
.details-primary-actions .app-action { width: 100%; justify-content: center; }
.cost-type-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; width: 100%; }
.cost-type-selector label { margin: 0; cursor: pointer; }
.cost-type-selector input { position: absolute; opacity: 0; pointer-events: none; }
.cost-type-selector span { display: block; min-height: 68px; padding: 12px; border: 1px solid var(--kollio-border, rgba(21,36,50,.13)); border-radius: 14px; }
.cost-type-selector small { display: block; margin-top: 3px; color: var(--kollio-muted, #607080); }
.cost-type-selector input:checked + span { border-color: var(--main-color, #167c80); box-shadow: inset 0 0 0 1px var(--main-color, #167c80); background: rgba(var(--main-color-rgb,25,145,149),.08); }
.subscription-price-inputs { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) 92px; align-items: end; gap: 10px; }
.subscription-price-inputs > div { min-width: 0; }
.subscription-price-inputs label,
.subscription-price-inputs small { display: block; }
.subscription-price-inputs small { margin-top: 5px; color: var(--kollio-muted, #607080); }
.stats-section-title-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.stats-section-title-row h2,
.stats-section-title-row p { margin: 0; }
.stats-section-title-row p { margin-top: 5px; max-width: 720px; color: var(--kollio-muted, #607080); }
.stats-page .statistic { justify-content: center; padding: 20px 18px; text-align: center; }
.stats-page .statistic > span,
.stats-page .statistic > .title,
.stats-page .statistic > .subtitle { width: 100%; text-align: center; }
.actual-cost-empty-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 13px; border-radius: 13px; background: rgba(var(--main-color-rgb,25,145,149),.08); }
.stats-entry-panel { margin-top: 14px; padding: 14px; border: 1px solid var(--kollio-border, rgba(21,36,50,.1)); border-radius: 16px; background: var(--kollio-surface, #fff); }
.stats-entry-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.stats-entry-panel > header h3,
.stats-entry-panel > header p { margin: 0; }
.stats-entry-panel > header h3 { font-size: 1rem; }
.stats-entry-panel > header p { margin-top: 4px; color: var(--kollio-muted, #607080); font-size: .82rem; line-height: 1.4; }
.stats-entry-panel > header > span { flex: 0 0 auto; min-width: 31px; height: 31px; display: grid; place-items: center; border-radius: 999px; color: var(--main-color); background: rgba(var(--main-color-rgb,25,145,149),.1); font-weight: 800; }
.stats-entry-list { display: grid; gap: 7px; }
.stats-entry-row { min-width: 0; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--kollio-border, rgba(21,36,50,.09)); border-radius: 13px; color: inherit; background: rgba(var(--main-color-rgb,25,145,149),.035); text-decoration: none; }
.stats-entry-row:hover { border-color: var(--main-color); background: rgba(var(--main-color-rgb,25,145,149),.075); }
.stats-entry-logo { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; overflow: hidden; background: rgba(var(--main-color-rgb,25,145,149),.08); color: var(--main-color); font-weight: 850; }
.stats-entry-logo img { display: block; width: 38px; height: 30px; object-fit: contain; }
.stats-entry-identity { min-width: 0; display: grid; gap: 2px; }
.stats-entry-identity strong,
.stats-entry-identity small,
.stats-entry-identity em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-entry-identity small { color: var(--kollio-muted, #607080); font-size: .78rem; }
.stats-entry-identity em { color: #b95b34; font-size: .75rem; font-style: normal; font-weight: 750; }
.stats-entry-identity em.cost-kind.is-variable { color: var(--main-color, #167c80); }
.stats-entry-identity em.cost-kind.is-fixed { color: var(--kollio-muted, #607080); }
.stats-entry-amount { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.stats-entry-amount i { color: var(--kollio-muted, #607080); font-size: .74rem; }
.stats-entry-amount.fee strong { color: #b95b34; }
.dashboard-inline-action { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; border-radius: 12px; text-decoration: none; color: var(--main-color, #167c80); background: rgba(var(--main-color-rgb,25,145,149),.08); }
.actual-cost-dashboard-row { flex-wrap: nowrap; align-items: flex-start; }
.actual-cost-dashboard-row .actual-cost-status {
  flex: 0 0 auto; width: 100%; box-sizing: border-box; display: flex; align-items: flex-start; gap: 7px;
  margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; color: var(--kollio-muted, #607080);
  background: rgba(var(--main-color-rgb,25,145,149),.08); font-size: .78rem; line-height: 1.35;
}
.actual-cost-dashboard-row .actual-cost-status i { flex: 0 0 auto; margin-top: 2px; color: var(--main-color, #167c80); }
.actual-cost-dashboard-row .actual-cost-status span { min-width: 0; }
body.dark .actual-cost-dashboard-row .actual-cost-status { color: #b8c3d2; background: rgba(var(--main-color-rgb,25,145,149),.12); }
.fee-insight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.fee-insight-card,
.fee-trend-card { padding: 17px; border: 1px solid var(--kollio-border, rgba(21,36,50,.1)); border-radius: 16px; background: var(--kollio-surface, #fff); }
.fee-insight-card h3,
.fee-trend-card h3 { margin: 0 0 12px; }
.fee-breakdown-list { display: grid; gap: 9px; }
.fee-breakdown-list > div { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding-bottom: 9px; border-bottom: 1px solid var(--kollio-border, rgba(21,36,50,.08)); }
.fee-breakdown-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
.fee-breakdown-list span { min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 0 7px; align-items: center; }
.fee-breakdown-list span i { color: #dd7345; font-size: .48rem; }
.fee-breakdown-list small { grid-column: 2; color: var(--kollio-muted, #607080); }
.fee-breakdown-list strong { white-space: nowrap; }
.fee-trend-card { margin-top: 12px; }
.fee-trend-card > div:first-child p { margin: -7px 0 14px; color: var(--kollio-muted, #607080); }
.fee-trend { min-height: 170px; display: grid; grid-template-columns: repeat(12, minmax(24px, 1fr)); gap: 6px; align-items: end; overflow-x: auto; }
.fee-trend-column { min-width: 28px; display: grid; grid-template-rows: 24px 110px 22px; gap: 4px; text-align: center; }
.fee-trend-value { overflow: hidden; font-size: .68rem; font-weight: 750; white-space: nowrap; }
.fee-trend-track { height: 110px; display: flex; align-items: end; border-radius: 8px; background: rgba(var(--main-color-rgb,25,145,149),.07); overflow: hidden; }
.fee-trend-track span { width: 100%; min-height: 3px; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, #ed8b55, #d85d43); }
.fee-trend-column small { color: var(--kollio-muted, #607080); font-size: .7rem; }

@media (max-width: 700px) {
  .stats-page > .split-header { margin: 12px 0 5px; }
  .stats-page > .stats-section { margin-top: 10px; border: 1px solid var(--kollio-border, var(--box-border-color)); border-radius: 16px; background: var(--kollio-surface, var(--box-background-color)); overflow: hidden; }
  .stats-mobile-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px; padding: 13px 15px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 1rem; font-weight: 800; text-align: left; }
  .stats-mobile-toggle i { color: var(--main-color); transition: transform .18s ease; }
  .stats-section.is-open > .stats-mobile-toggle i { transform: rotate(180deg); }
  .stats-mobile-content { display: none; padding: 0 12px 14px; }
  .stats-section.is-open > .stats-mobile-content { display: block; }
  .stats-mobile-content > h2,
  .stats-mobile-content > .stats-section-title-row h2,
  .stats-mobile-content > .stats-section-title-row .dashboard-eyebrow { display: none; }
  .stats-mobile-content > .stats-section-title-row { padding: 0 2px 12px; }
  .stats-page .stats-mobile-content .statistics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .stats-page .stats-mobile-content .statistic { min-width: 0; min-height: 104px; padding: 12px 9px; border-radius: 14px; justify-content: center; text-align: center; }
  .stats-page .stats-mobile-content .statistic > span { max-width: 100%; font-size: clamp(1.15rem, 5.2vw, 1.45rem); line-height: 1.08; letter-spacing: -.02em; white-space: nowrap; text-align: center; }
  .stats-page .stats-mobile-content .statistic > .title { font-size: .86rem; line-height: 1.25; }
  .stats-page .stats-mobile-content .statistic > .subtitle { font-size: .78rem; }
  .stats-page .stats-mobile-content .statistics > .statistic:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .settings-home-intro { padding: 18px; }
  .settings-home-group { padding: 13px; border-radius: 18px; }
  .settings-home-group-title { align-items: flex-start; }
  .settings-home-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-people-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-home-grid > a { grid-template-columns: 44px minmax(0, 1fr) auto; padding: 14px; }
  .settings-home-icon { width: 44px; height: 44px; }
  .settings-cost-callout { grid-template-columns: 44px minmax(0, 1fr); }
  .settings-cost-callout .app-action { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .settings-detail-nav { align-items: flex-start; flex-direction: column; }
  .cost-form-sheet { inset: auto 0 0; max-height: calc(100dvh - 12px); border-radius: 22px 22px 0 0; padding: 18px 16px calc(22px + env(safe-area-inset-bottom)); }
  .cost-form-grid { grid-template-columns: 1fr; gap: 0; }
  .cost-fee-fields { grid-template-columns: 1fr; gap: 0; }
  .cost-form-sheet form { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .cost-form-sheet .buttons { position: static; margin: 14px 0 0; padding: 0; background: transparent; border: 0; }
  .cost-form-sheet .buttons .app-action { min-width: 0; flex: 1 1 0; }
  .cost-type-selector { grid-template-columns: 1fr; }
  .stats-section-title-row { align-items: stretch; flex-direction: column; }
  .stats-section-title-row .app-action { width: 100%; justify-content: center; }
  .fee-insight-grid { grid-template-columns: 1fr; }
  .fee-trend { grid-template-columns: repeat(12, 34px); padding-bottom: 4px; }
}

body.dark .settings-home-intro,
body.dark .settings-home-group,
body.dark .settings-home-grid > a,
body.dark .settings-cost-callout,
body.dark .cost-form-sheet { background: #1a2029; border-color: rgba(255,255,255,.1); box-shadow: none; }
body.dark .fee-insight-card,
body.dark .fee-trend-card { background: #1a2029; border-color: rgba(255,255,255,.1); }
body.dark .stats-entry-panel { background: #1a2029; border-color: rgba(255,255,255,.1); }
body.dark .stats-entry-row { border-color: rgba(255,255,255,.09); background: rgba(var(--main-color-rgb,25,145,149),.055); }

/* Ett sammanhållet formspråk för tjänsteägarens systemadministration. */
.system-admin-page { display: grid; gap: 16px; }
.system-admin-page .system-admin-hero,
.system-admin-page > .account-section {
  margin: 0; padding: clamp(18px, 2.4vw, 26px); border: 1px solid var(--kollio-border, var(--box-border-color));
  border-radius: 20px; background: var(--kollio-surface, var(--box-background-color)); box-shadow: 0 12px 34px rgba(22,43,60,.06);
}
.system-admin-page > .account-section > header { margin-bottom: 18px; }
.system-admin-page > .account-section > header h2 { margin: 0; }
.system-admin-page .admin-form { display: grid; gap: 14px; }
.system-admin-page .form-group,
.system-admin-page .form-group-inline { margin: 0; }
.system-admin-page .form-group > label { display: block; margin-bottom: 7px; font-size: .86rem; font-weight: 750; color: var(--kollio-muted, var(--text-muted)); }
.system-admin-page input[type="text"],
.system-admin-page input[type="email"],
.system-admin-page input[type="password"],
.system-admin-page input[type="url"],
.system-admin-page input[type="number"],
.system-admin-page select,
.system-admin-page textarea { min-height: 50px; border-radius: 13px; box-sizing: border-box; }
.system-admin-page .button { min-height: 48px; height: auto; padding: 11px 18px; border-radius: 12px; font-weight: 750; line-height: 1.2; }
.system-admin-page .button i { color: currentColor; }
.system-admin-page .buttons { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.system-admin-page .admin-template-actions { margin-top: 16px; }
.system-admin-page .admin-template-heading .button { flex: 0 0 auto; min-width: 118px; padding-inline: 14px; white-space: nowrap; }
.system-admin-page .admin-template-payment { grid-template-columns: 24px minmax(0, 1.25fr) minmax(124px, .85fr) 42px; }
.system-admin-page .admin-template-row { padding: 7px; border: 1px solid var(--kollio-border, var(--box-border-color)); border-radius: 13px; background: var(--input-background-color, var(--box-background-color)); }
.system-admin-page .admin-template-row input,
.system-admin-page .admin-template-row select { border-radius: 10px; }
.system-admin-page .admin-template-row > i { font-size: .9rem; }
.system-admin-page .system-integration-card { border-radius: 17px; }
body.dark .system-admin-page .system-admin-hero,
body.dark .system-admin-page > .account-section { background: #1a2029; border-color: rgba(255,255,255,.1); box-shadow: none; }
@media (max-width: 700px) {
  .system-admin-page { gap: 12px; }
  .system-admin-page .system-admin-hero,
  .system-admin-page > .account-section { padding: 16px 14px; border-radius: 18px; }
  .system-admin-page .buttons > .button,
  .system-admin-page .buttons > input[type="button"],
  .system-admin-page .buttons > input[type="submit"] { flex: 1 1 100%; width: 100%; }
  .system-admin-page .admin-template-heading .button { min-width: 104px; }
  .system-admin-page .admin-template-payment { grid-template-columns: 24px minmax(0, 1fr) 42px; }
  .system-admin-page .admin-template-payment label:nth-of-type(2) { grid-column: 2 / 3; }
  .system-admin-page .admin-template-payment .image-button { grid-column: 3; grid-row: 1 / span 2; }
}

/* Samma lugna menyidentitet i den inloggade appen som på publika Kollio. */
body > header,
body > header button,
body > header a,
.dropdown-content { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.dropdown-content {
  padding: 5px; border: 1px solid var(--box-border-color); border-radius: 16px;
  background-color: var(--box-background-color); box-shadow: 0 24px 70px rgba(16,42,67,.16); overflow: hidden;
}
.dropdown-content a,
.dropdown-theme-action { min-height: 42px; padding: 8px 11px; border-radius: 10px; box-sizing: border-box; font-size: .96rem; font-weight: 700; gap: 10px; }
.dropdown-content a:hover,
.dropdown-theme-action:hover { background: rgba(var(--main-color-rgb,25,145,149),.09); }
.dropdown-content a.active { background: rgba(var(--main-color-rgb,25,145,149),.12); color: var(--main-color); }
.dropdown-content a > i,
.dropdown-content a > svg,
.dropdown-theme-action i { width: 18px; height: 18px; flex: 0 0 18px; color: var(--main-color) !important; fill: currentColor; text-align: center; }
.dropdown-content .dropdown-mobile-logout > i,
.dropdown-content .dropdown-mobile-logout > svg,
.dropdown-content .dropdown-desktop-logout > i,
.dropdown-content .dropdown-desktop-logout > svg { color: currentColor !important; }
.dropdown-section-label { margin: 5px 7px 2px; padding-top: 7px; border-top: 1px solid var(--box-border-color); font-size: .72rem; font-weight: 850; letter-spacing: .075em; text-transform: uppercase; opacity: .72; }
.support-costs-heading { max-width: 760px; margin: 28px auto 15px; text-align: center; }
.support-costs-heading h2 { margin: 5px 0 8px; }
.support-costs-heading p { margin: 0 auto; color: var(--kollio-muted, #607080); line-height: 1.6; }
.app-support-page .support-costs-heading { padding-inline: 14px; }
body.details-open .mobile-nav,
body.no-scroll .mobile-nav { transform: translateY(110%); pointer-events: none; }
.mobile-nav { transition: transform .2s ease; }
@media (max-width: 768px) {
  .dropdown-content { background-color: var(--box-background-color) !important; overflow-y: auto; border-radius: 0 0 16px 16px; }
  .dropdown-content a { min-height: 48px; padding: 9px 12px; font-size: 1rem; }
}
@media (max-width: 390px) {
  .account-hub-group-links { grid-template-columns: minmax(0, 1fr); }
  .account-hub-nav a { min-height: 46px; }
}
.price-adjustment-card {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--main-color) 24%, var(--box-border-color));
  border-radius: 14px;
  background: color-mix(in srgb, var(--main-color) 6%, var(--box-background-color));
}

.price-adjustment-card[hidden],
.price-adjustment-date[hidden],
.scheduled-price-change[hidden] { display: none !important; }

.price-adjustment-card.needs-confirmation {
  border-color: color-mix(in srgb, #f59e0b 58%, var(--box-border-color));
  background: color-mix(in srgb, #f59e0b 9%, var(--box-background-color));
}

.price-adjustment-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin: 0;
  cursor: pointer;
}

.price-adjustment-toggle input { width: 22px; height: 22px; margin: 0; accent-color: var(--main-color); }
.price-adjustment-toggle > span { display: grid; gap: 3px; }
.price-adjustment-toggle small,
.price-adjustment-date small { color: var(--text-muted); line-height: 1.4; }
.price-adjustment-date { display: grid; gap: 7px; padding-top: 11px; border-top: 1px solid var(--box-border-color); }
.price-adjustment-date label { margin: 0; font-weight: 750; }
.price-adjustment-date input { width: 100%; }
.scheduled-price-change { padding: 11px 12px; border-radius: 11px; background: color-mix(in srgb, #22c55e 10%, var(--box-background-color)); color: var(--text-color); font-size: .9rem; line-height: 1.45; }
.details-price-change { margin: -2px 0 14px; padding: 11px 13px; border-radius: 12px; background: color-mix(in srgb, var(--main-color) 9%, var(--box-background-color)); color: var(--text-muted); font-size: .88rem; line-height: 1.45; }