/* Lifeboard. Base colors come from the chosen scheme (board/theme.js sets them on <html>);
   the values below are the Console scheme, used until the script runs. Color on the board
   comes from plugins (--c, text on it --on-c). Never fade a plugin color with opacity. */

:root {
  --shell: #E4E2EB;     /* page background */
  --panel: #F6F5FA;     /* cards, the board screen, sheets */
  --panel-2: #ECEAF2;   /* empty blocks, rows inside panels */
  --ink: #1D1A2B;
  --ink-2: #565170;     /* secondary text, at least 4.5:1 on --panel */
  --line: #CAC6D5;
  --edge: #B5AFC6;      /* hard shadow under raised things */
  --outline: #1D1A2B;   /* pixel outline around a filled block */
  --bezel: #4E4963;     /* frame around the week board */
  --bezel-ink: #EDEBF4;
  --on-fill: #1D1A2B;
  --led: #FF5263;
  --led-off: #8A85A0;
  --bad: #B3261E;
  --gold: #FFC83D;
  --font: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-head: var(--font);
  --pixel: 'Pixelify Sans', ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --shell: #1B1828; --panel: #262236; --panel-2: #2F2A42; --ink: #EEECF6; --ink-2: #ABA6C2;
    --line: #3D3754; --edge: #0E0C16; --outline: #0E0C16; --bezel: #0F0D18; --bezel-ink: #C9C4DC;
    --led-off: #4A4560; --bad: #FF9A90; color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--shell); color: var(--ink); font: 400 16px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
body.sheet-open { overflow: hidden; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap {
  max-width: 1200px; margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

/* ── Wallpaper ── */
#wall { position: fixed; inset: 0; z-index: -1; background-color: var(--shell); }
#wall.photo { background-size: cover; background-position: center; }
#wall::after { content: ''; position: absolute; inset: 0; background: var(--shell); opacity: 0; }
#wall.photo::after { opacity: var(--dim, .35); }
#wall[class^="pat-"]::after { opacity: calc(var(--dim, .35) * .5); } /* patterns are already subtle */
.pat-dots { background-image: radial-gradient(var(--line) 2px, transparent 2.3px); background-size: 22px 22px; }
.pat-grid { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 28px 28px; }
.pat-checks { background-image: conic-gradient(var(--panel-2) 25%, transparent 0 50%, var(--panel-2) 0 75%, transparent 0); background-size: 44px 44px; }
.pat-lines { background-image: repeating-linear-gradient(45deg, var(--line) 0 2px, transparent 2px 14px); }

/* ── Top bar ── */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.has-wall .top { background: var(--panel); border-radius: 14px; padding: 2px 6px 2px 12px; box-shadow: 0 3px 0 var(--edge); }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font: 700 22px/1 var(--pixel); }
.logo img { image-rendering: pixelated; }
.top-actions { display: flex; align-items: center; gap: 4px; }
.edit-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; margin-right: 6px; }
.edit-btn { white-space: nowrap; }
@media (max-width: 480px) { .wide-only { display: none; } }
.editing-note { font: 700 14px var(--font); color: var(--ink-2); padding: 0 8px; }

.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0; flex: none;
  background: transparent; border: 2px solid transparent; border-radius: 10px; cursor: pointer;
}
.icon-btn:hover:not(:disabled) { background: var(--panel-2); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn svg, .edit-bar svg, .add-tile svg, .h-grip svg, .h-more svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
svg.dots, .dots path { stroke-width: 3.2; stroke-linecap: round; }
.icon-btn.small { width: 40px; height: 40px; }
.icon-btn.small svg { width: 16px; height: 16px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px;
  font: 700 15px/1.2 var(--font); background: var(--ink); color: var(--shell);
  border: 2px solid var(--ink); border-radius: 10px; box-shadow: 0 3px 0 var(--edge); cursor: pointer;
}
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--edge); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.small { font-size: 14px; padding: 8px 12px; }
.btn.danger { color: var(--bad); border-color: var(--bad); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ── The board: widgets on a grid, floats on top ── */
.board-area { position: relative; overflow-x: clip; min-height: 200px; }
.widget {
  position: absolute; container-type: inline-size;
  transition: left .2s, top .2s, width .2s, height .2s;
}
.w-frame { height: 100%; overflow: auto; scrollbar-width: thin; }

.hello { padding: 4px 2px; }
.has-wall .hello { background: var(--panel); border-radius: 16px; padding: 16px; box-shadow: 0 4px 0 var(--edge); }
.hello h1 { margin: 0 0 2px; font: 800 clamp(30px, 9cqi, 52px)/1.02 var(--font-head); letter-spacing: -.025em; overflow-wrap: anywhere; }
.date { margin: 0; font-size: 18px; color: var(--ink-2); }
.tally { margin: 16px 0 0; font-size: 18px; max-width: 30ch; }
.tally b { font: 700 1.35em/1 var(--pixel); }
.connect { margin-top: 16px; max-width: 46ch; }
.connect p { margin: 0; }

/* The week board: a bezel with a big lower-right corner, a screen inside, a power LED below. */
.console { background: var(--bezel); border-radius: 18px 18px 44px 18px; padding: 14px 14px 10px; }
.screen { background: var(--panel); border-radius: 8px; padding: 14px 14px 12px; }
.screen-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.screen-head h2 { margin: 0; font: 700 18px/1.2 var(--font-head); }
.week-nav { display: flex; gap: 2px; }
.bezel-foot { display: flex; align-items: center; gap: 8px; padding: 10px 6px 2px; color: var(--bezel-ink); font-size: 13px; }
.led { width: 8px; height: 8px; border-radius: 50%; background: var(--led-off); flex: none; }
.led.lit { background: var(--led); box-shadow: 0 0 6px var(--led); }
.led.blink { animation: blink 1s steps(2, jump-none) infinite; }
@keyframes blink { 50% { background: var(--led-off); box-shadow: none; } }

.board {
  display: grid; grid-template-columns: minmax(64px, max-content) repeat(7, minmax(0, 50px));
  gap: 6px; align-items: center; justify-content: start; margin-top: 12px;
}
.col-head { display: grid; justify-items: center; align-content: end; font-size: 12px; color: var(--ink-2); line-height: 1.15; min-height: 38px; }
.col-head b { font-weight: 700; color: var(--ink); }
.col-head small { font: 500 12px/1.1 var(--pixel); }
.col-head.is-today { color: var(--ink); }
.gem { width: 14px; height: 14px; margin-bottom: 2px; }
.gem .o { fill: var(--outline); }
.gem .i { fill: var(--gold); }
.row-name { display: flex; align-items: center; gap: 7px; font: 700 14px/1.15 var(--font); padding-right: 6px; }
.row-name i { width: 10px; height: 10px; flex: none; background: var(--c); border: 2px solid var(--outline); border-radius: 2px; }
.row-name .short { display: none; }
@container (max-width: 470px) {
  .console { padding: 10px 10px 8px; border-radius: 14px 14px 32px 14px; }
  .screen { padding: 12px 10px 10px; }
  .board { grid-template-columns: minmax(48px, max-content) repeat(7, minmax(0, 1fr)); gap: 5px; }
  .row-name .full { display: none; }
  .row-name .short { display: inline; }
  .row-name { font-size: 13px; gap: 5px; padding-right: 2px; }
}
@container (max-width: 330px) {
  .console { padding: 8px 8px 6px; }
  .screen { padding: 10px 8px; }
  .board { gap: 3px; }
  .row-name i { display: none; }
}

.cell {
  display: block; width: 100%; aspect-ratio: 1; padding: 0; position: relative; overflow: hidden;
  background: var(--panel-2); border: 2px solid var(--line); border-radius: 4px; cursor: pointer;
}
.cell::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--s, 0) * 100%); background: var(--c); }
.cell.on { border-color: var(--outline); }
.cell.is-today { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink-2); }
.cell.static { cursor: default; }
.boot .cell::after { animation: fillup .5s steps(4, end) both; animation-delay: calc(var(--i, 0) * 55ms + 150ms); }
@keyframes fillup { from { height: 0; } }
body.cheat .cell::after { height: 100%; background: var(--gold); transition: height .4s steps(4, end); }
body.cheat .cell { border-color: var(--outline); }
.legend { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); max-width: 60ch; }

/* A plugin cartridge. */
.w-plugin { filter: drop-shadow(0 4px 0 var(--edge)); }
.cart {
  background: var(--panel); border-radius: 12px 0 12px 12px; padding: 10px 14px 6px;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}
.ridges { height: 8px; margin: 0 46px 10px 6px; background: repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 8px); }
.label { background: var(--c); color: var(--on-c, var(--on-fill)); border-radius: 8px; padding: 12px 14px 10px; }
.label h3 { margin: 0; font: 800 22px/1.1 var(--font-head); letter-spacing: -.01em; }
.label p { margin: 2px 0 0; font-size: 14px; font-weight: 500; }
.hint { margin: 12px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); font-size: 14px; }
.hint.bad { color: var(--bad); }

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; margin-top: 14px; }
@container (max-width: 250px) { .tiles { grid-template-columns: minmax(0, 1fr); } }
@container (min-width: 560px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { display: grid; gap: 2px; align-content: start; min-width: 0; }
.t-label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.t-value { font: 700 30px/1.05 var(--pixel); overflow-wrap: anywhere; }
.t-value small { margin-left: 3px; font: 500 14px var(--font); color: var(--ink-2); }
.t-sub { font-size: 13px; line-height: 1.3; color: var(--ink-2); }
.spark { display: block; margin-top: 6px; max-width: 100%; height: auto; }
.spark rect { fill: var(--c); stroke: var(--outline); stroke-width: 1; }
.spark rect.zero { fill: var(--line); stroke: none; }

.today-list { margin-top: 14px; padding-top: 10px; border-top: 2px dashed var(--line); }
.today-list h4 { display: flex; justify-content: space-between; margin: 0; font: 700 14px var(--font); }
.today-list h4 span { font-weight: 500; color: var(--ink-2); }
.today-list ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.today-list li { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.25; }
.box { width: 18px; height: 18px; flex: none; position: relative; background: var(--panel); border: 2px solid var(--ink-2); border-radius: 3px; }
li.done .box { background: var(--c); border-color: var(--outline); }
li.done .box::after {
  content: ''; position: absolute; left: 4px; top: 0; width: 5px; height: 9px;
  border: solid var(--on-c, var(--on-fill)); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.more { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
.cart-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.cart-foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 700; text-decoration: underline 2px; text-underline-offset: 3px; white-space: nowrap; }

/* ── Floats ── */
.float { position: absolute; transform: rotate(var(--rot, 0deg)); transform-origin: center; }
.f-photo { margin: 0; }
.f-photo .ph { position: relative; overflow: hidden; background: var(--panel-2); }
.f-photo img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-select: none; user-select: none; }
.ph-wait { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--ink-2); }
.frame-rounded .ph { border-radius: 16px; box-shadow: 0 4px 0 var(--edge); }
.frame-polaroid { background: #FBFBF7; padding: 7% 7% 0; box-shadow: 0 8px 18px rgb(0 0 0 / .22); }
.frame-polaroid figcaption { min-height: 2.6em; padding: .45em 0 .6em; font: 400 22px/1.2 'Caveat', var(--font); color: #2A2620; text-align: center; overflow-wrap: anywhere; }
.frame-tape .ph { box-shadow: 0 6px 14px rgb(0 0 0 / .2); overflow: visible; }
.frame-tape .ph::before, .frame-tape .ph::after {
  content: ''; position: absolute; top: -10px; width: 34%; height: 22px; background: rgb(255 236 170 / .82); z-index: 1;
}
.frame-tape .ph::before { left: -6%; transform: rotate(-24deg); }
.frame-tape .ph::after { right: -6%; transform: rotate(22deg); }
.frame-sticker .ph { border: 6px solid #FFFFFF; border-radius: 14px; box-shadow: 0 4px 0 var(--edge), 0 8px 18px rgb(0 0 0 / .18); }
.frame-circle .ph { border-radius: 50%; box-shadow: 0 0 0 4px var(--panel), 0 4px 0 4px var(--edge); }

.f-text .t-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.15; }
.ts-note { background: #FFE58A; padding: .55em .65em; box-shadow: 0 5px 0 rgb(0 0 0 / .14); }
.ts-label { background: var(--ink); padding: .3em .55em; border-radius: 4px; }
.ts-label.c-ink { color: var(--panel) !important; }
.ts-card { background: var(--panel); padding: .6em .75em; border-radius: 12px; box-shadow: 0 4px 0 var(--edge); }
.ts-tape { background: var(--panel); padding: .7em .75em .55em; box-shadow: 0 4px 10px rgb(0 0 0 / .15); }
.ts-tape::before { content: ''; position: absolute; top: -11px; left: 50%; width: 40%; height: 22px; transform: translateX(-50%) rotate(-3deg); background: rgb(255 236 170 / .82); }
.ts-note.c-ink { color: #2A2620 !important; }
.f-sticker svg { display: block; width: 100%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgb(0 0 0 / .18)); }
.f-sticker .emoji { display: block; line-height: 1; text-align: center; filter: drop-shadow(0 3px 0 rgb(0 0 0 / .15)); }

/* ── Edit mode ── */
.editing { -webkit-user-select: none; user-select: none; }
.editing .widget { outline: 2px dashed var(--ink-2); outline-offset: 4px; border-radius: 14px; }
.editing .widget > .w-frame { pointer-events: none; }
.editing .float { outline: 1px dashed var(--ink-2); outline-offset: 4px; cursor: pointer; }
.editing .float.sel { outline: 2px solid var(--ink); outline-offset: 6px; z-index: 20; }
@media (pointer: fine) { .editing .widget, .editing .float { cursor: grab; } }
.dragging { z-index: 50; transition: none !important; cursor: grabbing !important; }
.widget.dragging { filter: drop-shadow(0 14px 18px rgb(0 0 0 / .28)); }
.drop-ghost { position: absolute; border: 2px dashed var(--ink); border-radius: 14px; background: var(--panel-2); transition: left .12s, top .12s, width .12s, height .12s; }

.h-grip, .h-more {
  position: absolute; top: 6px; z-index: 6; width: 34px; height: 34px; padding: 0; display: grid; place-items: center;
  background: var(--ink); color: var(--shell); border: 0; border-radius: 10px; box-shadow: 0 3px 0 var(--edge); cursor: pointer;
}
.h-grip { left: 6px; touch-action: none; cursor: grab; }
.h-more { right: 6px; }
.h-resize, .h-rotate { position: absolute; z-index: 6; touch-action: none; background: var(--panel); border: 3px solid var(--ink); }
.h-resize { right: -8px; bottom: -8px; width: 28px; height: 28px; border-radius: 7px; cursor: nwse-resize; }
.float .h-grip, .float .h-more { top: -20px; width: 32px; height: 32px; }
.float .h-grip { left: -16px; }
.float .h-more { right: -16px; }
.float .h-rotate { top: -42px; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; cursor: grab; }
.float .h-rotate::after { content: ''; position: absolute; left: 50%; top: 100%; width: 3px; height: 14px; margin-left: -1.5px; background: var(--ink); }
.float .h-resize { right: -14px; bottom: -14px; }

.edit-bar {
  position: fixed; z-index: 30; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; gap: 2px; padding: 6px; background: var(--ink); color: var(--shell); border-radius: 18px;
  box-shadow: 0 6px 0 var(--edge), 0 10px 28px rgb(0 0 0 / .25); max-width: calc(100vw - 20px);
}
.edit-bar button {
  display: grid; justify-items: center; gap: 2px; min-width: 60px; min-height: 52px; padding: 6px 8px;
  background: transparent; border: 0; border-radius: 12px; color: inherit; font: 600 12px/1.1 var(--font); cursor: pointer;
}
.edit-bar button:hover:not(:disabled) { background: color-mix(in srgb, var(--shell) 14%, var(--ink)); }
.edit-bar button:disabled { opacity: .4; cursor: default; }
.edit-bar .done { background: var(--shell); color: var(--ink); }
.edit-bar .done:hover { background: var(--shell); }
@media (max-width: 380px) { .edit-bar button { min-width: 52px; padding: 6px 4px; } }

.foot { margin-top: 28px; font-size: 13px; color: var(--ink-2); }
.has-wall .foot p { display: inline-block; background: var(--panel); padding: 6px 10px; border-radius: 8px; }

/* ── Sheets ── */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgb(14 12 22 / .55); }
.sheet {
  position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow: auto;
  background: var(--panel); border-radius: 18px 18px 0 0;
  padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
}
@media (min-width: 700px) {
  .sheet { left: 50%; right: auto; top: 50%; bottom: auto; width: min(520px, 92vw); max-height: 86vh; transform: translate(-50%, -50%); border-radius: 18px; padding: 24px; }
  .sheet.wide { width: min(720px, 94vw); }
}
.sheet-close { position: absolute; top: 10px; right: 10px; }
.sheet h2 { margin: 4px 48px 6px 0; font: 800 22px/1.2 var(--font-head); }
.sheet h3 { margin: 22px 0 8px; font: 700 16px var(--font); }
.muted { margin: 0; color: var(--ink-2); }
.muted.small { margin-top: 12px; font-size: 13px; }

.plug-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.plug-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); }
.chip { width: 16px; height: 16px; flex: none; background: var(--c); border: 2px solid var(--outline); border-radius: 3px; }
.chip.plain { background: var(--panel); }
.upcoming .chip { background: transparent; border: 2px dashed var(--ink-2); }
.plug-text { flex: 1; min-width: 0; }
.plug-text b { display: block; font-size: 15px; }
.plug-text small { display: block; font-size: 13px; color: var(--ink-2); }
.soon { font-size: 12px; color: var(--ink-2); white-space: nowrap; }

.switch {
  width: 54px; height: 32px; flex: none; position: relative; padding: 0; cursor: pointer;
  background: var(--line); border: 2px solid var(--ink-2); border-radius: 6px;
}
.switch i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: var(--panel); border: 2px solid var(--ink-2); border-radius: 3px; transition: transform .15s steps(3, end); }
.switch[aria-checked="true"] { background: var(--c); border-color: var(--outline); }
.switch[aria-checked="true"] i { transform: translateX(22px); border-color: var(--outline); }

.seg { display: inline-flex; flex-wrap: wrap; border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; }
.seg button { min-height: 40px; padding: 8px 12px; background: transparent; border: 0; font-weight: 600; font-size: 14px; cursor: pointer; }
.seg button + button { border-left: 2px solid var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--shell); }

.field { display: grid; gap: 6px; margin-top: 16px; }
.field > span { display: flex; justify-content: space-between; font-weight: 700; font-size: 15px; }
.field output { font-weight: 500; color: var(--ink-2); }
.field input:not([type="range"]), .field textarea, .font-any input {
  width: 100%; font: 400 16px/1.35 var(--font); color: var(--ink); background: var(--panel-2);
  border: 2px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input[type="range"] { width: 100%; accent-color: var(--ink); min-height: 32px; }

.add-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.add-tile {
  display: grid; justify-items: start; gap: 2px; padding: 14px; min-height: 96px; text-align: left;
  background: var(--panel-2); border: 2px solid var(--line); border-radius: 14px; cursor: pointer;
}
.add-tile:hover { border-color: var(--ink-2); }
.add-tile b { font-size: 16px; margin-top: 6px; }
.add-tile small { font-size: 13px; color: var(--ink-2); }
.aa { font: 700 20px/20px 'Caveat', var(--font); }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }
.sticker-grid button {
  height: 48px; display: grid; place-items: center; padding: 6px; font-size: 26px; line-height: 1;
  background: var(--panel-2); border: 2px solid transparent; border-radius: 10px; cursor: pointer;
}
.sticker-grid button:hover { border-color: var(--line); }
.sticker-grid svg { width: 30px; height: 30px; image-rendering: pixelated; }

.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  width: 40px; height: 40px; padding: 0; position: relative; flex: none; cursor: pointer;
  background: var(--c); border: 2px solid var(--outline); border-radius: 8px;
}
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--ink); }
.swatch.picker { background: conic-gradient(#FF5263, #FFC83D, #7EE0A8, #5EE0E6, #6EA6FF, #A99BFF, #FF8FB1, #FF5263); display: block; overflow: hidden; }
.swatch.picker.small { width: 34px; height: 34px; }
.swatch.picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }

.schemes { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.scheme {
  display: grid; gap: 6px; justify-items: center; padding: 8px; font-size: 13px; font-weight: 600;
  background: var(--panel-2); border: 2px solid transparent; border-radius: 12px; cursor: pointer;
}
.scheme[aria-pressed="true"] { border-color: var(--ink); }
.scheme-art { position: relative; width: 100%; height: 46px; border-radius: 8px; background: var(--s1); border: 1px solid var(--line); overflow: hidden; }
.scheme-art i { position: absolute; display: block; }
.scheme-art i:nth-child(1) { left: 12%; top: 18%; width: 56%; height: 64%; border-radius: 4px; background: var(--s2); }
.scheme-art i:nth-child(2) { left: 20%; top: 32%; width: 34%; height: 5px; border-radius: 2px; background: var(--s3); }
.scheme-art i:nth-child(3) { right: 10%; top: 26%; width: 16%; height: 16%; border-radius: 3px; background: #FFC83D; }
.custom-colors { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.color-field { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.color-field input { width: 44px; height: 44px; padding: 0; border: 2px solid var(--outline); border-radius: 10px; background: none; cursor: pointer; }

.font-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 8px; min-height: 52px;
  padding: 10px 12px; background: var(--panel-2); border: 2px solid transparent; border-radius: 12px; cursor: pointer; text-align: left;
}
.font-row:hover { border-color: var(--line); }
.font-row span { font: 600 14px var(--font); color: var(--ink-2); }
.font-row b { font-size: 20px; font-weight: 700; overflow-wrap: anywhere; text-align: right; }
.font-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.font-btn {
  min-height: 52px; padding: 8px 10px; font-size: 20px; line-height: 1.1; text-align: left;
  background: var(--panel-2); border: 2px solid transparent; border-radius: 10px; cursor: pointer; overflow-wrap: anywhere;
}
.font-btn:hover { border-color: var(--line); }
.font-btn[aria-pressed="true"] { border-color: var(--ink); }
.font-any { display: flex; gap: 8px; }
.font-any input { flex: 1; min-width: 0; }

.walls { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.wall-opt {
  display: grid; gap: 6px; justify-items: center; padding: 8px; font-size: 13px; font-weight: 600;
  background: var(--panel-2); border: 2px solid transparent; border-radius: 12px; cursor: pointer;
}
.wall-opt[aria-pressed="true"] { border-color: var(--ink); }
.wall-art { width: 100%; height: 46px; border-radius: 8px; border: 1px solid var(--line); background-color: var(--shell); display: grid; place-items: center; }
.wall-art.pat-checks { background-size: 16px 16px; }
.wall-art.pat-dots { background-size: 12px 12px; }
.wall-art.pat-grid { background-size: 14px 14px; }
.wall-art svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }

.day-list { list-style: none; margin: 12px 0 0; padding: 0; }
.day-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.day-list .cell { width: 30px; flex: none; }
.day-list b { display: block; }
.day-list small { display: block; font-size: 14px; color: var(--ink-2); }

/* ── Toasts ── */
#toast-root {
  position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 60; display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none;
}
.toast { background: var(--ink); color: var(--shell); padding: 12px 14px; border-radius: 10px; font-weight: 600; box-shadow: 0 4px 0 var(--edge); transition: opacity .4s; }
.toast.bad { border-left: 8px solid var(--led); }
.toast.gold, .toast.ok { border-left: 8px solid var(--gold); }
.toast.out { opacity: 0; }

@media (max-width: 359px) {
  .wrap { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .t-value { font-size: 26px; }
  .tiles { gap: 14px 10px; }
  .edit-btn span { display: none; }
  .edit-btn svg { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}