/* Budget Byron colour schemes and theme-aware component overrides. */

/* Colour schemes ----------------------------------------------------------- */
:root,
html[data-theme="midnight"]{
  --bg:#090d13;
  --surface:#0f172a;
  --surface-2:#111c33;
  --nav:#0b1220;
  --primary:#3b82f6;
  --primary-hover:#2563eb;
  --primary-rgb:59,130,246;
  --primary-soft-text:#bfdbfe;
  --theme-secondary:#22c55e;
  --theme-secondary-rgb:34,197,94;
  --theme-bg:#090d13;
  --theme-menu:#11161b;
  --theme-panel-top:rgba(17,28,51,.84);
  --theme-panel-bottom:rgba(15,23,42,.96);
  --theme-card:rgba(15,23,42,.74);
  --theme-card-strong:rgba(15,23,42,.86);
  --theme-input:rgba(15,23,42,.82);
  --theme-toolbar:rgba(30,41,59,.82);
  --theme-toolbar-hover:rgba(51,65,85,.92);
  --theme-border-rgb:148,163,184;
}


html[data-theme="obsidian-green"]{
  /* Logo-led palette: black canvas, graphite/slate surfaces and lime-green trim. */
  --bg:#020403;
  --surface:#343940;
  --surface-2:#41464e;
  --nav:#030504;
  --primary:#72c914;
  --primary-hover:#5eae0d;
  --primary-rgb:114,201,20;
  --primary-soft-text:#d9ffad;
  --theme-secondary:#98e83b;
  --theme-secondary-rgb:152,232,59;
  --theme-bg:#020403;
  --theme-menu:#252a2f;
  --theme-panel-top:#30353b;
  --theme-panel-bottom:#292e34;
  --theme-card:#3b4047;
  --theme-card-strong:#454b53;
  --theme-input:#272c31;
  --theme-toolbar:#383e45;
  --theme-toolbar-hover:#474e56;
  --theme-border-rgb:114,201,20;
}

html[data-theme="emerald"]{
  --bg:#07110f;
  --surface:#0b1b17;
  --surface-2:#102720;
  --nav:#061712;
  --primary:#10b981;
  --primary-hover:#059669;
  --primary-rgb:16,185,129;
  --primary-soft-text:#a7f3d0;
  --theme-secondary:#6ee7b7;
  --theme-secondary-rgb:110,231,183;
  --theme-bg:#07110f;
  --theme-menu:#0b1915;
  --theme-panel-top:rgba(15,43,34,.88);
  --theme-panel-bottom:rgba(9,28,23,.97);
  --theme-card:rgba(10,31,25,.80);
  --theme-card-strong:rgba(12,38,30,.90);
  --theme-input:rgba(10,33,27,.86);
  --theme-toolbar:rgba(17,53,42,.86);
  --theme-toolbar-hover:rgba(24,73,57,.94);
  --theme-border-rgb:110,156,139;
}

html[data-theme="royal"]{
  --bg:#0b0914;
  --surface:#15112a;
  --surface-2:#20183c;
  --nav:#110c25;
  --primary:#7c3aed;
  --primary-hover:#6d28d9;
  --primary-rgb:124,58,237;
  --primary-soft-text:#ddd6fe;
  --theme-secondary:#c084fc;
  --theme-secondary-rgb:192,132,252;
  --theme-bg:#0b0914;
  --theme-menu:#17112a;
  --theme-panel-top:rgba(37,28,70,.88);
  --theme-panel-bottom:rgba(21,17,42,.97);
  --theme-card:rgba(27,21,53,.80);
  --theme-card-strong:rgba(35,27,66,.90);
  --theme-input:rgba(28,22,55,.86);
  --theme-toolbar:rgba(47,37,82,.86);
  --theme-toolbar-hover:rgba(65,49,109,.94);
  --theme-border-rgb:146,130,196;
}

html[data-theme="crimson"]{
  --bg:#10090c;
  --surface:#1f1117;
  --surface-2:#321822;
  --nav:#1b0b11;
  --primary:#e11d48;
  --primary-hover:#be123c;
  --primary-rgb:225,29,72;
  --primary-soft-text:#fecdd3;
  --theme-secondary:#fb7185;
  --theme-secondary-rgb:251,113,133;
  --theme-bg:#10090c;
  --theme-menu:#1d1015;
  --theme-panel-top:rgba(54,24,35,.88);
  --theme-panel-bottom:rgba(31,17,23,.97);
  --theme-card:rgba(39,18,26,.80);
  --theme-card-strong:rgba(53,23,34,.90);
  --theme-input:rgba(42,20,28,.86);
  --theme-toolbar:rgba(66,28,41,.86);
  --theme-toolbar-hover:rgba(88,37,52,.94);
  --theme-border-rgb:190,126,145;
}

html[data-theme="slate"]{
  --bg:#0b1016;
  --surface:#131c27;
  --surface-2:#1b2938;
  --nav:#0c141d;
  --primary:#4f7da8;
  --primary-hover:#3d668c;
  --primary-rgb:79,125,168;
  --primary-soft-text:#bae6fd;
  --theme-secondary:#7dd3fc;
  --theme-secondary-rgb:125,211,252;
  --theme-bg:#0b1016;
  --theme-menu:#121b25;
  --theme-panel-top:rgba(29,43,58,.88);
  --theme-panel-bottom:rgba(19,28,39,.97);
  --theme-card:rgba(21,32,44,.80);
  --theme-card-strong:rgba(29,43,58,.90);
  --theme-input:rgba(23,35,48,.86);
  --theme-toolbar:rgba(39,55,71,.86);
  --theme-toolbar-hover:rgba(53,73,93,.94);
  --theme-border-rgb:132,151,170;
}

html[data-theme="sunset"]{
  --bg:#120a13;
  --surface:#251225;
  --surface-2:#3a1b34;
  --nav:#1f0c1f;
  --primary:#c2410c;
  --primary-hover:#9a3412;
  --primary-rgb:194,65,12;
  --primary-soft-text:#fed7aa;
  --theme-secondary:#f59e0b;
  --theme-secondary-rgb:245,158,11;
  --theme-bg:#120a13;
  --theme-menu:#211020;
  --theme-panel-top:rgba(62,28,55,.88);
  --theme-panel-bottom:rgba(37,18,37,.97);
  --theme-card:rgba(46,22,44,.80);
  --theme-card-strong:rgba(61,28,56,.90);
  --theme-input:rgba(49,23,47,.86);
  --theme-toolbar:rgba(75,33,66,.86);
  --theme-toolbar-hover:rgba(99,43,84,.94);
  --theme-border-rgb:185,121,161;
}


html[data-theme="custom"]{
  --bg:#080b0a;
  --surface:#30353b;
  --surface-2:#3b4047;
  --nav:#050706;
  --nav-border:rgba(114,201,20,.26);
  --border:rgba(114,201,20,.24);
  --text:#f1f5f2;
  --muted:#a8b0ab;
  --primary:#72c914;
  --primary-hover:#5eae0d;
  --primary-rgb:114,201,20;
  --primary-soft-text:#b7df8a;
  --primary-contrast:#111111;
  --success:#22c55e;
  --success-contrast:#111111;
  --danger:#ef4444;
  --danger-contrast:#ffffff;
  --val-pos:#22c55e;
  --val-neg:#ef4444;
  --theme-secondary:#95d956;
  --theme-secondary-rgb:149,217,86;
  --theme-bg:#080b0a;
  --theme-menu:#222724;
  --theme-panel-top:#30353b;
  --theme-panel-bottom:#282d31;
  --theme-card:#3b4047;
  --theme-card-strong:#4c5158;
  --theme-input:#31363b;
  --theme-toolbar:#41483f;
  --theme-toolbar-hover:#48533f;
  --theme-border-rgb:114,201,20;
  --panel:#30353b;
  --line:rgba(114,201,20,.28);
  --accent:#72c914;
}

html[data-theme="custom"] .topbar{
  border-bottom-color:rgba(var(--primary-rgb),.32);
}

html[data-theme="custom"] .panel{
  border-color:rgba(var(--primary-rgb),.42);
}

html[data-theme="custom"] .card{
  border-color:rgba(var(--primary-rgb),.32);
}

html[data-theme="custom"] .btn.primary,
html[data-theme="custom"] .segmented-control-btn.is-active,
html[data-theme="custom"] .preference-option input:checked + .preference-switch{
  color:var(--primary-contrast);
}

html[data-theme="custom"] .btn.ok{
  color:var(--success-contrast);
}

html[data-theme="custom"] .btn.danger{
  color:var(--danger-contrast);
}

html[data-theme="obsidian-green"] .topbar{
  border-bottom-color:rgba(var(--primary-rgb),.30);
  box-shadow:0 1px 0 rgba(var(--primary-rgb),.10),0 10px 34px rgba(0,0,0,.38);
}

html[data-theme="obsidian-green"] .desktop-nav-links,
html[data-theme="obsidian-green"] .header-icon-link,
html[data-theme="obsidian-green"] .header-customize,
html[data-theme="obsidian-green"] .account-toggle{
  border-color:rgba(var(--primary-rgb),.24);
}

html[data-theme="obsidian-green"] .navlink.active,
html[data-theme="obsidian-green"] .mnav.active,
html[data-theme="obsidian-green"] .account-toggle.active{
  box-shadow:inset 0 0 0 1px rgba(var(--primary-rgb),.16),0 0 18px rgba(var(--primary-rgb),.10);
}

html[data-theme="obsidian-green"] .panel{
  border-color:rgba(var(--primary-rgb),.48);
  box-shadow:0 16px 38px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.045),0 0 0 1px rgba(var(--primary-rgb),.035);
}

html[data-theme="obsidian-green"] .card{
  border-color:rgba(var(--primary-rgb),.38);
  box-shadow:0 8px 22px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035);
}

html[data-theme="obsidian-green"] .panel:hover,
html[data-theme="obsidian-green"] .card:hover{
  border-color:rgba(var(--primary-rgb),.58);
}

html[data-theme="obsidian-green"] input,
html[data-theme="obsidian-green"] select,
html[data-theme="obsidian-green"] .table-wrap,
html[data-theme="obsidian-green"] .dialog-body,
html[data-theme="obsidian-green"] .customize-menu,
html[data-theme="obsidian-green"] .mobile-menu,
html[data-theme="obsidian-green"] .notification-menu,
html[data-theme="obsidian-green"] .account-menu{
  border-color:rgba(var(--primary-rgb),.30);
}

html,
body{
  background:var(--theme-bg);
}

body{
  background-color:var(--theme-bg);
}

.topbar{
  background:color-mix(in srgb, var(--nav) 94%, transparent);
  border-bottom-color:rgba(var(--theme-border-rgb),.20);
}

.brand-dot{
  background:linear-gradient(135deg,var(--primary),var(--theme-secondary));
}

.navlink.active,
.mnav.active{
  background:rgba(var(--primary-rgb),.18);
  border-color:rgba(var(--primary-rgb),.42);
}

.chip .dot{
  box-shadow:0 0 0 3px rgba(var(--theme-secondary-rgb),.22);
}

h1::before{
  background:linear-gradient(90deg,var(--primary),var(--theme-secondary));
  box-shadow:0 0 18px rgba(var(--primary-rgb),.38);
}

h2::before{
  background:linear-gradient(180deg,var(--primary),var(--theme-secondary));
  box-shadow:0 0 12px rgba(var(--primary-rgb),.26);
}

h3::before{
  background:linear-gradient(135deg,var(--primary),var(--theme-secondary));
  box-shadow:0 0 12px rgba(var(--primary-rgb),.30);
}

.panel{
  background:linear-gradient(180deg,var(--theme-panel-top),var(--theme-panel-bottom));
  border-color:rgba(var(--theme-border-rgb),.22);
}

.card{
  background:var(--theme-card);
  border-color:rgba(var(--theme-border-rgb),.20);
}

input,
select{
  background:var(--theme-input);
  border-color:rgba(var(--theme-border-rgb),.26);
}

select option{
  background:var(--surface-2);
}

select option:checked,
select option:hover{
  background:var(--primary-hover);
}

input:focus,
select:focus{
  border-color:rgba(var(--primary-rgb),.62);
  box-shadow:0 0 0 4px rgba(var(--primary-rgb),.16);
}

.switch input:checked + .slider{
  background:rgba(var(--primary-rgb),.86);
}

.table-wrap{
  background:color-mix(in srgb, var(--theme-card) 88%, transparent);
  border-color:rgba(var(--theme-border-rgb),.20);
}

thead th{
  background:color-mix(in srgb, var(--surface-2) 96%, transparent);
  color:var(--primary-soft-text);
}

tbody tr:hover{
  background:rgba(var(--primary-rgb),.12);
}

.due-badge.neutral{
  background:rgba(var(--primary-rgb),.12);
  border-color:rgba(var(--primary-rgb),.26);
  color:var(--primary-soft-text);
}

.dialog-body{
  background:linear-gradient(180deg,var(--surface-2) 0%,var(--surface) 100%);
  border-color:rgba(var(--theme-border-rgb),.28);
}

.customize-menu,
.mobile-menu{
  background:linear-gradient(180deg,var(--surface-2),var(--theme-menu));
  border-color:rgba(var(--theme-border-rgb),.26);
}

.panel.hideable > .hide-btn,
.panel.hideable > .drag-handle,
.panel.hideable.has-top-action > .row-between > :last-child.btn,
.panel.hideable.has-top-action > .row-between > :last-child .btn{
  background:var(--theme-card-strong);
  border-color:rgba(var(--theme-border-rgb),.24);
}

.panel.hideable.has-top-action > .row-between > :last-child.btn,
.panel.hideable.has-top-action > .row-between > :last-child .btn{
  background:var(--theme-toolbar);
  border-color:rgba(var(--theme-border-rgb),.30);
}

.panel.hideable.has-top-action > .row-between > :last-child.btn:hover,
.panel.hideable.has-top-action > .row-between > :last-child .btn:hover,
.panel.hideable > .hide-btn:hover,
.panel.hideable > .drag-handle:hover{
  background:var(--theme-toolbar-hover);
  border-color:rgba(var(--theme-border-rgb),.38);
}

.bills-filter-panel,
.bulk-actions-panel{
  background:color-mix(in srgb,var(--theme-card) 68%,transparent);
  border-color:rgba(var(--theme-border-rgb),.22);
}

.bills-stack > .panel{
  background:linear-gradient(180deg,var(--theme-panel-top),var(--theme-panel-bottom)) !important;
  border-color:rgba(var(--theme-border-rgb),.28) !important;
}

.bills-summary-cards .card{
  background:color-mix(in srgb,var(--theme-card) 78%,transparent) !important;
  border-color:rgba(var(--theme-border-rgb),.24) !important;
}

.bills-list-panel .table-wrap{
  background:color-mix(in srgb,var(--theme-card) 58%,transparent);
  border-color:rgba(var(--theme-border-rgb),.22);
}

@media (max-width:700px){
  .table-wrap tbody tr{
    background:var(--theme-card);
    border-color:rgba(var(--theme-border-rgb),.22);
  }

  .table-wrap tbody tr:hover{
    background:var(--theme-card-strong);
  }

  .bills-layout .table-wrap tbody tr.bill-card-due-neutral{
    border-color:rgba(var(--primary-rgb),.54);
    box-shadow:0 0 0 4px rgba(var(--primary-rgb),.90),0 10px 24px rgba(0,0,0,.22);
  }
}

/* Colour scheme picker */
.customize-menu{
  width:min(430px,92vw);
  max-height:calc(100vh - 86px);
  overflow:auto;
}

.customize-section{
  min-width:0;
}

.customize-divider{
  height:1px;
  margin:8px 6px;
  background:rgba(var(--theme-border-rgb),.20);
}

.theme-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:6px;
}

.theme-option{
  --preview-bg:#090d13;
  --preview-surface:#111c33;
  --preview-primary:#3b82f6;
  --preview-secondary:#22c55e;
  position:relative;
  min-width:0;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 16px;
  align-items:center;
  gap:9px;
  padding:9px;
  border:1px solid rgba(var(--theme-border-rgb),.18);
  border-radius:12px;
  background:rgba(255,255,255,.025);
  color:var(--text);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background-color .12s ease,border-color .12s ease,transform .08s ease,box-shadow .12s ease;
}

.theme-option:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.055);
  border-color:rgba(var(--theme-border-rgb),.34);
}

.theme-option:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),.20);
}

.theme-option[aria-pressed="true"]{
  background:rgba(var(--primary-rgb),.13);
  border-color:rgba(var(--primary-rgb),.68);
  box-shadow:inset 0 0 0 1px rgba(var(--primary-rgb),.16);
}


.theme-option[data-theme-choice="obsidian-green"]{
  --preview-bg:#020403;
  --preview-surface:#41464e;
  --preview-primary:#72c914;
  --preview-secondary:#98e83b;
}

.theme-option[data-theme-choice="emerald"]{
  --preview-bg:#07110f;
  --preview-surface:#102720;
  --preview-primary:#10b981;
  --preview-secondary:#6ee7b7;
}

.theme-option[data-theme-choice="royal"]{
  --preview-bg:#0b0914;
  --preview-surface:#20183c;
  --preview-primary:#7c3aed;
  --preview-secondary:#c084fc;
}

.theme-option[data-theme-choice="crimson"]{
  --preview-bg:#10090c;
  --preview-surface:#321822;
  --preview-primary:#e11d48;
  --preview-secondary:#fb7185;
}

.theme-option[data-theme-choice="slate"]{
  --preview-bg:#0b1016;
  --preview-surface:#1b2938;
  --preview-primary:#4f7da8;
  --preview-secondary:#7dd3fc;
}

.theme-option[data-theme-choice="sunset"]{
  --preview-bg:#120a13;
  --preview-surface:#3a1b34;
  --preview-primary:#c2410c;
  --preview-secondary:#f59e0b;
}


.theme-option[data-theme-choice="custom"]{
  --preview-bg:#080b0a;
  --preview-surface:#3b4047;
  --preview-primary:#72c914;
  --preview-secondary:#f1f5f2;
}

.customize-menu.custom-theme-editor-open{
  width:min(720px,94vw);
}

.custom-theme-editor{
  margin:4px 6px 8px;
  padding:12px;
  border:1px solid rgba(var(--theme-border-rgb),.25);
  border-radius:14px;
  background:color-mix(in srgb,var(--theme-card) 88%,var(--theme-bg));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.custom-theme-editor[hidden]{
  display:none !important;
}

.custom-theme-editor-head,
.custom-picker-heading,
.custom-theme-actions{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.custom-theme-editor-head{
  justify-content:space-between;
  margin-bottom:12px;
}

.custom-theme-editor-head > div,
.custom-picker-heading > div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.custom-theme-editor-head strong,
.custom-picker-heading strong{
  color:var(--text);
  font-size:13px;
}

.custom-theme-editor-head span,
.custom-picker-heading span{
  color:var(--muted);
  font-size:10px;
  line-height:1.35;
}

.custom-theme-status{
  min-height:18px;
  flex:0 0 auto;
  color:var(--muted);
  font-weight:750;
  text-align:right;
}

.custom-theme-status.is-error{ color:var(--danger); }
.custom-theme-status.is-success{ color:var(--success); }

.custom-theme-layout{
  display:grid;
  grid-template-columns:minmax(230px,.86fr) minmax(310px,1.14fr);
  gap:12px;
  align-items:start;
}

.custom-theme-fields{
  display:grid;
  gap:6px;
}

.custom-colour-field{
  min-width:0;
  display:grid;
  grid-template-columns:26px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:8px;
  border:1px solid rgba(var(--theme-border-rgb),.18);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  color:var(--text);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease;
}

.custom-colour-field:hover{
  background:rgba(255,255,255,.055);
  border-color:rgba(var(--theme-border-rgb),.34);
}

.custom-colour-field.is-active{
  background:rgba(var(--primary-rgb),.12);
  border-color:rgba(var(--primary-rgb),.62);
  box-shadow:inset 0 0 0 1px rgba(var(--primary-rgb),.12);
}

.custom-colour-field:focus-visible,
.custom-hue-wheel:focus-visible,
.custom-sv-square:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}

.custom-colour-swatch,
.custom-current-swatch{
  display:block;
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 3px 9px rgba(0,0,0,.24);
}

.custom-colour-swatch{
  width:26px;
  height:26px;
  border-radius:8px;
}

.custom-colour-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}

.custom-colour-name{
  overflow:hidden;
  color:var(--text);
  font-size:11px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.custom-colour-note{
  overflow:hidden;
  color:var(--muted);
  font-size:9px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.custom-colour-hex,
.custom-picker-value{
  color:var(--primary-soft-text);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:9px;
  font-weight:800;
}

.custom-picker-panel{
  min-width:0;
  padding:11px;
  border:1px solid rgba(var(--theme-border-rgb),.20);
  border-radius:12px;
  background:color-mix(in srgb,var(--theme-input) 86%,transparent);
}

.custom-picker-heading{
  justify-content:space-between;
  margin-bottom:10px;
}

.custom-picker-value{
  flex:0 0 auto;
  padding:4px 7px;
  border:1px solid rgba(var(--theme-border-rgb),.20);
  border-radius:8px;
  background:rgba(0,0,0,.16);
}

.custom-picker-visuals{
  display:grid;
  grid-template-columns:146px minmax(0,1fr);
  gap:12px;
  align-items:center;
}

.custom-hue-wheel{
  position:relative;
  width:146px;
  aspect-ratio:1;
  justify-self:center;
  border-radius:50%;
  background:conic-gradient(from 0deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.20),0 8px 18px rgba(0,0,0,.25);
  cursor:crosshair;
  touch-action:none;
}

.custom-hue-wheel-centre{
  position:absolute;
  inset:24%;
  border:1px solid rgba(var(--theme-border-rgb),.22);
  border-radius:50%;
  background:var(--theme-input);
  box-shadow:0 0 0 4px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.06);
}

.custom-hue-thumb,
.custom-sv-thumb{
  position:absolute;
  z-index:2;
  width:15px;
  height:15px;
  border:2px solid #fff;
  border-radius:50%;
  box-shadow:0 2px 7px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.35);
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.custom-sv-area{
  min-width:0;
  display:grid;
  gap:9px;
}

.custom-sv-square{
  --custom-picker-hue:#72c914;
  position:relative;
  width:100%;
  min-height:118px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:10px;
  background:
    linear-gradient(to top,#000,transparent),
    linear-gradient(to right,#fff,transparent),
    var(--custom-picker-hue);
  box-shadow:0 7px 16px rgba(0,0,0,.22);
  cursor:crosshair;
  touch-action:none;
}

.custom-picker-sliders{
  display:grid;
  gap:6px;
}

.custom-picker-sliders label{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:9px;
  font-weight:750;
}

.custom-picker-sliders input[type="range"]{
  width:100%;
  min-width:0;
  height:20px;
  padding:0;
  accent-color:var(--primary);
}

.custom-hex-label{
  display:block;
  margin-top:10px;
}

.custom-hex-label > span{
  display:block;
  margin-bottom:5px;
  color:var(--muted);
  font-size:9px;
  font-weight:750;
}

.custom-hex-row{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 38px;
  gap:7px;
  align-items:center;
}

.custom-current-swatch{
  width:30px;
  height:30px;
  border-radius:9px;
}

.custom-hex-row input[type="text"]{
  width:100%;
  min-width:0;
  height:34px;
  padding:7px 10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
}

.custom-hex-row input[type="text"].is-invalid{
  border-color:var(--danger);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 18%,transparent);
}

.custom-native-colour{
  width:38px;
  height:34px;
  padding:2px;
  border-radius:9px;
  cursor:pointer;
}

.custom-palette-preview{
  margin-top:10px;
  overflow:hidden;
  border:1px solid rgba(var(--theme-border-rgb),.22);
  border-radius:10px;
  box-shadow:0 7px 16px rgba(0,0,0,.18);
}

.custom-preview-header{
  height:18px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:0 7px;
  border-bottom:1px solid;
}

.custom-preview-header span{
  width:5px;
  height:5px;
  border-radius:50%;
}

.custom-preview-canvas{
  padding:8px;
}

.custom-preview-panel{
  padding:8px;
  border:1px solid;
  border-radius:8px;
}

.custom-preview-panel > strong,
.custom-preview-panel > span{
  display:block;
  font-size:9px;
}

.custom-preview-panel > span{
  margin-top:2px;
  font-size:8px;
}

.custom-preview-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  margin-top:7px;
}

.custom-preview-cards span{
  height:18px;
  border:1px solid;
  border-radius:5px;
}

.custom-preview-values{
  display:flex;
  justify-content:space-between;
  margin-top:7px;
  font-size:8px;
}

.custom-contrast{
  margin-top:9px;
  padding:7px 8px;
  border:1px solid rgba(var(--theme-border-rgb),.20);
  border-radius:9px;
  color:var(--muted);
  font-size:9px;
  line-height:1.35;
}

.custom-contrast.is-ok{
  border-color:color-mix(in srgb,var(--success) 45%,transparent);
  color:var(--success);
}

.custom-contrast.is-warning{
  border-color:color-mix(in srgb,var(--warning) 48%,transparent);
  color:color-mix(in srgb,var(--warning) 78%,var(--text));
}

.custom-theme-actions{
  align-items:center;
  margin-top:12px;
}

.custom-theme-action-spacer{
  flex:1;
}

.custom-theme-actions .btn:disabled{
  opacity:.58;
  cursor:wait;
}

@media (max-width:700px){
  .custom-theme-editor{
    margin:4px 0 8px;
    padding:10px;
  }

  .custom-theme-editor-head{
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }

  .custom-theme-status{
    text-align:left;
  }

  .custom-theme-layout{
    grid-template-columns:1fr;
  }

  .custom-theme-fields{
    grid-template-columns:1fr 1fr;
  }

  .custom-colour-field{
    grid-template-columns:24px minmax(0,1fr);
  }

  .custom-colour-hex{
    display:none;
  }

  .custom-picker-visuals{
    grid-template-columns:118px minmax(0,1fr);
  }

  .custom-hue-wheel{
    width:118px;
  }

  .custom-sv-square{
    min-height:108px;
  }
}

@media (max-width:430px){
  .custom-colour-note{
    display:none;
  }

  .custom-picker-visuals{
    grid-template-columns:1fr;
  }

  .custom-hue-wheel{
    width:138px;
  }

  .custom-theme-actions{
    flex-wrap:wrap;
  }

  .custom-theme-action-spacer{
    display:none;
  }

  .custom-theme-actions .btn{
    flex:1 1 auto;
  }
}
@media (max-width:350px){
  .custom-theme-fields{
    grid-template-columns:1fr;
  }
}


.theme-preview{
  width:42px;
  height:32px;
  display:grid;
  grid-template-columns:1.45fr 1fr 1fr 1fr;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  border-radius:9px;
  box-shadow:0 4px 12px rgba(0,0,0,.22);
}

.theme-preview > span{
  display:block;
}

.theme-preview-bg{ background:var(--preview-bg); }
.theme-preview-surface{ background:var(--preview-surface); }
.theme-preview-primary{ background:var(--preview-primary); }
.theme-preview-secondary{ background:var(--preview-secondary); }

.theme-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.theme-name{
  overflow:hidden;
  color:var(--text);
  font-size:12px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.theme-note{
  overflow:hidden;
  color:var(--muted);
  font-size:9px;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.theme-selected{
  opacity:0;
  color:var(--primary-soft-text);
  font-size:14px;
  font-weight:900;
  transform:scale(.72);
  transition:opacity .12s ease,transform .12s ease;
}

.theme-option[aria-pressed="true"] .theme-selected{
  opacity:1;
  transform:scale(1);
}

.mobile-theme-section{
  padding:0 6px 6px;
}

.mobile-theme-section .customize-title{
  padding-left:8px;
}

@media (max-width:860px){
  .mobile-menu{
    max-height:calc(100vh - 84px);
    overflow-y:auto;
  }
}

@media (max-width:520px){
  .theme-options{
    grid-template-columns:1fr;
  }
}

/* Colour scheme integration */
.segmented-control{
  background:color-mix(in srgb,var(--theme-card) 84%,transparent);
  border-color:rgba(var(--theme-border-rgb),.24);
}

.segmented-control-btn.is-active{
  background:var(--primary);
  box-shadow:0 5px 14px rgba(var(--primary-rgb),.30);
}

.calendar-toolbar,
.calendar-day-details,
.calendar-undated{
  background:linear-gradient(135deg,var(--theme-toolbar),var(--theme-card));
  border-color:rgba(var(--theme-border-rgb),.22);
}

.calendar-weekdays{
  background:color-mix(in srgb,var(--surface-2) 92%,transparent);
  border-color:rgba(var(--theme-border-rgb),.22);
}

.calendar-weekdays > span{
  border-right-color:rgba(var(--theme-border-rgb),.16);
}

.calendar-month-grid{
  background:rgba(var(--theme-border-rgb),.15);
  border-color:rgba(var(--theme-border-rgb),.22);
}

.calendar-day{
  background:color-mix(in srgb,var(--theme-card) 96%,var(--theme-bg));
}

.calendar-day:hover{
  background:var(--theme-card-strong);
}

.calendar-day.is-adjacent{
  background:color-mix(in srgb,var(--theme-bg) 76%,var(--theme-card));
}

.calendar-day.is-today{
  box-shadow:inset 0 0 0 1px rgba(var(--primary-rgb),.82);
}

.calendar-day.is-selected{
  background:rgba(var(--primary-rgb),.20);
  box-shadow:inset 0 0 0 2px rgba(var(--primary-rgb),.68);
}

.calendar-day.is-today .calendar-day-number{
  box-shadow:0 4px 12px rgba(var(--primary-rgb),.30);
}

.calendar-day-more,
.calendar-agenda-edit{
  color:var(--primary-soft-text);
}

.calendar-day-more:hover{
  background:rgba(var(--primary-rgb),.12);
  color:var(--text);
}

.calendar-week-day{
  background:var(--theme-card);
  border-color:rgba(var(--theme-border-rgb),.22);
}

.calendar-week-day.is-today{
  border-color:rgba(var(--primary-rgb),.76);
  box-shadow:0 0 0 1px rgba(var(--primary-rgb),.28);
}

.calendar-week-day-head{
  background:color-mix(in srgb,var(--surface-2) 76%,transparent);
  border-bottom-color:rgba(var(--theme-border-rgb),.18);
}

.calendar-week-day.is-today .calendar-week-day-head{
  background:rgba(var(--primary-rgb),.16);
}

.calendar-day-details{
  border-color:rgba(var(--primary-rgb),.34);
}

.calendar-agenda-item{
  background:var(--theme-card);
  border-color:rgba(var(--theme-border-rgb),.20);
}

.calendar-agenda-item:hover{
  background:var(--theme-toolbar-hover);
}

.calendar-agenda-empty,
.calendar-empty{
  background:color-mix(in srgb,var(--theme-card) 56%,transparent);
  border-color:rgba(var(--theme-border-rgb),.25);
}

.calendar-context-menu{
  background:linear-gradient(180deg,var(--surface-2),var(--theme-menu));
  border-color:rgba(var(--theme-border-rgb),.30);
}

.calendar-context-date{
  border-bottom-color:rgba(var(--theme-border-rgb),.20);
}

.calendar-context-action:hover,
.calendar-context-action:focus-visible{
  background:rgba(var(--primary-rgb),.16);
}

.calendar-context-icon{
  border-color:rgba(var(--primary-rgb),.38);
  background:rgba(var(--primary-rgb),.18);
  color:var(--primary-soft-text);
}

/* Bill logo preference and shared logo treatment */
.preference-option{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  margin:0 6px 6px;
  padding:11px 12px;
  border:1px solid rgba(var(--theme-border-rgb),.18);
  border-radius:12px;
  background:rgba(255,255,255,.025);
  cursor:pointer;
}

.preference-option:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(var(--theme-border-rgb),.32);
}

.preference-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.preference-name{
  color:var(--text);
  font-size:12px;
  font-weight:800;
}

.preference-note{
  color:var(--muted);
  font-size:10px;
  line-height:1.35;
}

.preference-option input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.preference-switch{
  width:38px;
  height:22px;
  display:flex;
  align-items:center;
  padding:3px;
  border:1px solid rgba(var(--theme-border-rgb),.28);
  border-radius:999px;
  background:rgba(148,163,184,.18);
  transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
}

.preference-switch span{
  width:14px;
  height:14px;
  border-radius:50%;
  background:rgba(255,255,255,.80);
  box-shadow:0 2px 5px rgba(0,0,0,.28);
  transition:transform .15s ease,background-color .15s ease;
}

.preference-option input:checked + .preference-switch{
  border-color:rgba(var(--primary-rgb),.68);
  background:rgba(var(--primary-rgb),.68);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),.10);
}

.preference-option input:checked + .preference-switch span{
  transform:translateX(16px);
  background:#fff;
}

.preference-option input:focus-visible + .preference-switch{
  outline:2px solid var(--primary);
  outline-offset:2px;
}

.preference-option-mobile{
  margin:0 6px 8px;
}

.bill-description-with-logo{
  min-width:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  vertical-align:middle;
}

.bill-description-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

.bill-logo{
  width:24px;
  height:24px;
  flex:0 0 24px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(var(--theme-border-rgb),.18);
  border-radius:7px;
  background:rgba(255,255,255,.055);
  box-shadow:0 3px 9px rgba(0,0,0,.18);
  visibility:hidden;
}

.bill-logo.is-loaded,
.bill-logo.is-generic{
  visibility:visible;
}

html.bill-logos-hidden .bill-logo{
  display:none !important;
}

.bill-logo.is-generic{
  border-color:rgba(var(--primary-rgb),.52);
  border-radius:50%;
  background:linear-gradient(135deg,rgba(var(--primary-rgb),.92),rgba(var(--theme-secondary-rgb),.78));
  box-shadow:0 3px 10px rgba(0,0,0,.22),0 0 0 2px rgba(var(--primary-rgb),.10);
}

.bill-logo.is-generic img{
  display:none;
}

.bill-logo-misc-mark{
  display:block;
  color:#fff;
  font-size:60%;
  font-weight:800;
  line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.42);
}

.bill-logo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  padding:2px;
}

.bill-logo-edit-control{
  display:grid;
  grid-template-columns:minmax(0,1fr) 74px;
  align-items:center;
  gap:12px;
}

.bill-logo-edit-preview{
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
  border:1px solid rgba(var(--theme-border-rgb),.22);
  border-radius:14px;
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.bill-logo-edit-preview.is-upload-selectable{
  cursor:pointer;
  border-color:rgba(var(--primary-rgb),.5);
}

.bill-logo-edit-preview.is-upload-selectable:hover,
.bill-logo-edit-preview.is-upload-selectable:focus-visible{
  border-color:rgba(var(--primary-rgb),.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 0 0 3px rgba(var(--primary-rgb),.12);
  outline:none;
}

.bill-logo.bill-logo-preview{
  width:58px;
  height:58px;
  flex:0 0 58px;
  border-radius:12px;
  box-shadow:0 7px 18px rgba(0,0,0,.26);
}

.bill-logo.bill-logo-preview.is-generic{
  border-radius:50%;
}

.bill-logo.bill-logo-preview .bill-logo-misc-mark{
  font-size:42%;
}

.app-footer{
  display:flex;
  justify-content:center;
  padding:4px 20px 24px;
  color:var(--muted);
  font-size:11px;
}

.app-footer a{
  color:inherit;
  text-decoration:none;
  opacity:.72;
  transition:color .12s ease,opacity .12s ease;
}

.app-footer a:hover{
  color:var(--primary-soft-text);
  opacity:1;
}