/* Kuadro — interface styles. Colors, shadows and fonts come from tokens.css;
   this file holds the app shell, then the pages. */

/* stylelint-disable scale-unlimited/declaration-strict-value -- var() is not allowed in @font-face, which declares real weights */
@font-face { font-family: "Bricolage Grotesque"; font-weight: 200 800; font-display: swap; src: url("/assets/bricolage-grotesque-latin-wght-normal-3084aa15.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 200 800; font-display: swap; src: url("/assets/bricolage-grotesque-latin-ext-wght-normal-50e25c3f.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-weight: 100 1000; font-display: swap; src: url("/assets/dm-sans-latin-wght-normal-fe3ac7ee.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-weight: 100 1000; font-display: swap; src: url("/assets/dm-sans-latin-ext-wght-normal-c1985016.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("/assets/jetbrains-mono-latin-400-normal-849c32ea.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("/assets/jetbrains-mono-latin-500-normal-9590a15c.woff2") format("woff2"); }
/* stylelint-enable scale-unlimited/declaration-strict-value */

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--text-base)/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.02em; font-weight: var(--weight-semibold); margin: 0; }
h2 { display: flex; align-items: center; gap: var(--space-12); margin: var(--space-32) 0 var(--space-16); font-size: var(--text-3xl); }
h2:first-child { margin-top: 0; }
h2 small { font-family: var(--font-body); font-weight: var(--weight-regular); color: var(--muted); font-size: var(--text-sm); letter-spacing: 0; }
h3 { margin: var(--space-24) 0 var(--space-10); font-size: var(--text-lg); }
a { color: var(--accent-text); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
code { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1px var(--space-6); font: var(--text-xs) var(--font-mono); word-break: break-all; }

/* --- App shell: sidebar + top bar --- */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.shell.guest { display: block; }
.sidebar { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--line); padding: var(--space-20) var(--space-14); display: flex; flex-direction: column; gap: var(--space-8); }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-10) var(--space-16); }
.brand { display: inline-flex; align-items: center; gap: var(--space-10); color: var(--text); text-decoration: none; font: var(--weight-semibold) var(--text-2xl) var(--font-display); letter-spacing: -.02em; }
.brand:hover { color: var(--text); }
.brand-mark { width: 28px; height: 28px; color: currentColor; display: grid; place-items: center; flex: none; }
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-mark-module { fill: var(--color-coral-500); }
.menu-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-xl); cursor: pointer; color: var(--text); }
.side-nav { display: flex; flex-direction: column; gap: var(--space-4); }
.side-nav a { display: flex; align-items: center; gap: var(--space-12); min-height: 44px; padding: 0 var(--space-12); border-radius: var(--radius-xl); color: var(--text); text-decoration: none; font-weight: var(--weight-medium); }
.side-nav a:hover { background: var(--surface-2); }
.side-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); font-weight: var(--weight-bold); }
.side-nav a.divided { margin-top: var(--space-12); position: relative; }
.side-nav a.divided::before { content: ""; position: absolute; left: 8px; right: 8px; top: -8px; border-top: 1px solid var(--line); }
.side-nav svg { flex: none; }
.side-menu { flex: 1; display: flex; flex-direction: column; gap: var(--space-8); min-height: 0; }
/* The foot of the sidebar: which workspace this is (and its plan), a new one, and the account. */
.sidebar-foot { margin-top: auto; padding-top: var(--space-16); display: grid; gap: var(--space-8); }
.workspace-switch { position: relative; display: flex; align-items: center; gap: var(--space-10); margin: 0; padding: var(--space-8) var(--space-10); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); }
.workspace-switch:hover { border-color: var(--edge); }
.workspace-switch:focus-within { outline: 3px solid var(--focus); outline-offset: 1px; }
.workspace-avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-lg); background: var(--accent-soft); color: var(--accent-text); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.workspace-text { flex: 1; min-width: 0; display: grid; }
.workspace-text small { color: var(--muted); font-size: var(--text-xs); line-height: 1.2; }
/* The select is the whole card's control: no box of its own, the chevron drawn at the right. */
.workspace-switch select { min-height: 0; padding: 0 var(--space-24) 0 0; border: 0; background: transparent; color: var(--text); font-weight: var(--weight-semibold); text-overflow: ellipsis; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23565b70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5-5 5 5M7 15l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0 center; }
.workspace-switch select:focus { outline: none; } /* the container shows the ring: .workspace-switch:focus-within */
.workspace-add { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-12); color: var(--accent-text); font-size: var(--text-md); font-weight: var(--weight-semibold); text-decoration: none; }
.workspace-add:hover { text-decoration: underline; }
.sidebar-foot .account { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding: var(--space-8) var(--space-2) 0 var(--space-12); border-top: 1px solid var(--line); }
.sidebar-foot .account .button_to { margin: 0; flex: none; }
.sidebar-foot .account button.sign-out { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--muted); }
[dir="rtl"] .sidebar-foot .account button.sign-out svg { transform: scaleX(-1); }
.shell-main { min-width: 0; display: flex; flex-direction: column; }
/* The admin panel keeps a top bar (layouts/admin). */
.topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12) var(--space-20); min-height: 72px; padding: var(--space-14) var(--space-32); background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar .workspace, .topbar .account { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); }
.topbar form, .topbar .button_to { margin: 0; }
.topbar select { width: auto; min-width: 180px; font-weight: var(--weight-semibold); }
.topbar a { font-weight: var(--weight-semibold); text-decoration: none; padding: var(--space-10) var(--space-4); }
.who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--text-sm); text-decoration: none; }
.who:hover { color: var(--accent-text); }
.content { padding: var(--space-32); width: 100%; max-width: 1240px; }
.shell.guest .content { margin: 0 auto; }
.guest-footer { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); padding: var(--space-8) var(--space-32) var(--space-40); }
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4) var(--space-16); font-size: var(--text-sm); }
.legal-links a { color: var(--muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.legal-links a:hover { color: var(--accent-text); text-decoration: underline; }
/* The button is centred, so its list opens centred above it (on phones the list is a bottom sheet already). */
@media (min-width: 641px) {
  .guest-footer .lang-menu-up .lang-panel { inset-inline-start: 50%; transform: translateX(-50%); }
  [dir="rtl"] .guest-footer .lang-menu-up .lang-panel { transform: translateX(50%); }
}
.page-title { font-size: var(--text-7xl); line-height: 1.1; margin-bottom: var(--space-20); }

@media (max-width: 900px) {
  .shell { display: block; }
  .sidebar { position: static; height: auto; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); padding: var(--space-10) var(--space-14); }
  .sidebar-head { padding: 0; }
  .menu-toggle { display: inline-flex; }
  .side-menu, .admin-shell .side-nav { display: none; padding: var(--space-12) 0 var(--space-6); }
  .side-menu.open, .admin-shell .side-nav.open { display: flex; }
  .topbar { padding: var(--space-12) var(--space-14); }
  .content { padding: var(--space-20) var(--space-14) var(--space-56); }
  .page-title { font-size: var(--text-5xl); }
}

/* --- Language switcher: segmented control --- */
.locales { display: inline-flex; align-items: center; gap: var(--space-2); padding: 3px; border-radius: var(--radius-xl); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--text-md); }
.locales svg { margin: 0 var(--space-4) 0 var(--space-8); color: var(--muted); flex: none; }
.locales form, .locales .button_to { margin: 0; display: inline-flex; }
.locales .current, .locales button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 var(--space-12); border-radius: var(--radius-lg); border: 0; font: inherit; }
.locales .current { background: var(--surface); color: var(--text); font-weight: var(--weight-bold); box-shadow: var(--shadow-pressed); }
.locales button, .locales button.linklike { background: transparent; color: var(--muted); cursor: pointer; font-weight: var(--weight-medium); }
.locales button:hover { color: var(--text); }
body.landing-body .locales, .notice-page .locales { display: flex; width: fit-content; margin: var(--space-24) auto 0; }

/* --- Theme switcher: System · Light · Dark, the same segmented look as the language switcher --- */
.theme-switch { display: inline-flex; align-items: center; gap: var(--space-2); padding: 3px; border-radius: var(--radius-xl); background: var(--surface-2); border: 1px solid var(--line); }
.theme-switch button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-6); min-height: 44px; min-width: 44px; padding: 0 var(--space-10); border: 0; border-radius: var(--radius-lg); background: transparent; color: var(--muted); font: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); cursor: pointer; }
.theme-switch button:hover { color: var(--text); }
.theme-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text); font-weight: var(--weight-bold); box-shadow: var(--shadow-pressed); }
.theme-switch svg { flex: none; }
@media (max-width: 640px) { .theme-switch .theme-switch-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* --- Cards, forms --- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-4xl); padding: var(--space-28); box-shadow: var(--shadow); }
.panel.narrow { max-width: 760px; margin: 0 auto; }
.auth { max-width: 440px; margin: 6vh auto; }
/* Settings: the settings menu beside the section's cards (a scrolling row of chips on phones). */
.settings-title { margin: 0 0 var(--space-20); font: var(--weight-semibold) var(--text-3xl)/1.2 var(--font-display); letter-spacing: -.02em; }
.settings-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--space-28); align-items: start; }
.settings-body { min-width: 0; max-width: 820px; }
.settings-body > .panel + .panel { margin-top: var(--space-16); }
.settings-nav { position: sticky; top: 20px; display: flex; flex-direction: column; gap: var(--space-2); }
.settings-nav-group { margin: var(--space-14) var(--space-12) var(--space-6); color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .04em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-nav-group:first-child { margin-top: 0; }
.settings-nav a { display: flex; align-items: center; gap: var(--space-10); min-height: 44px; padding: 0 var(--space-12); border-radius: var(--radius-lg); color: var(--text); text-decoration: none; font-weight: var(--weight-medium); }
.settings-nav a:hover { background: var(--surface-2); }
.settings-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); font-weight: var(--weight-bold); }
.settings-nav a svg { flex: none; color: var(--muted); }
.settings-nav a[aria-current="page"] svg { color: currentColor; }
.settings-nav a .tag { margin-left: auto; }
.panel.settings-section { margin: 0 0 var(--space-16); }
.settings-section h3:first-child { margin-top: 0; }
.settings-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12); }
.settings-row p { margin: 0; }
.settings-row form { margin: 0; }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.muted { background: var(--surface-2); color: var(--muted); }
/* --- Page header: the one title of every page of the panel, on the background and never inside a panel --- */
.page-head { display: grid; gap: var(--space-8); margin-bottom: var(--space-24); }
.page-head__row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-12); }
.page-head h1 { margin: 0; font: var(--weight-semibold) var(--text-5xl)/1.15 var(--font-display); letter-spacing: -.02em; }
.page-head__lede { margin: var(--space-4) 0 0; color: var(--muted); }
.page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.muted { color: var(--muted); }
.settings-section > .hint-text:first-of-type { margin-top: -4px; }
.settings-section .stats strong { font-size: var(--text-8xl); }
.settings-section .table-scroll { overflow-x: auto; }
.settings-tabs { display: flex; gap: var(--space-4); margin: 0 0 var(--space-16); border-bottom: 1px solid var(--line); }
.settings-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-16); margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--muted); font-weight: var(--weight-semibold); text-decoration: none; }
.settings-tabs a:hover { color: var(--text); }
.settings-tabs a[aria-current="page"] { color: var(--accent-text); border-bottom-color: var(--accent); }
.settings-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-12); }
.settings-inline-form label { flex: 1 1 280px; }
.settings-inline-form .error { flex-basis: 100%; margin: 0; }
.settings-note { margin: var(--space-16) 0 0; padding: var(--space-12) var(--space-14); border-radius: var(--radius-xl); background: var(--surface-2); color: var(--muted); font-size: var(--text-md); }
.danger-zone { border-color: var(--bad); }
.danger-zone h3 { color: var(--bad); }
.danger-zone hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-20) 0; }
.danger-zone .hint-text { margin: var(--space-4) 0 var(--space-12); }
.danger-zone .settings-note ul { margin: var(--space-6) 0 0; padding-left: var(--space-16); }
.danger-zone .settings-note p { margin: 0; }
.event-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-8); }
.event-choices label.inline { padding: 0 var(--space-14); border: 1px solid var(--line); border-radius: var(--radius-xl); }
/* Theme choice as three small previews of the app. */
.theme-cards { margin: 0; padding: 0; border: 0; min-width: 0; }
.theme-cards legend { padding: 0; }
.theme-cards legend h3 { margin: 0 0 var(--space-12); }
.theme-card-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-12); }
.theme-card { display: grid; gap: var(--space-10); padding: var(--space-12); border: 1px solid var(--line); border-radius: var(--radius-3xl); cursor: pointer; position: relative; }
.theme-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.theme-card:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.theme-card input { position: absolute; top: 12px; right: 12px; }
.theme-thumb { display: flex; height: 64px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.theme-thumb i { flex: 1; }
.theme-card-system .theme-thumb i:first-child, .theme-card-light .theme-thumb i { background: var(--color-white); }
.theme-card-system .theme-thumb i:last-child, .theme-card-dark .theme-thumb i { background: var(--color-night-900); }
.theme-card-light .theme-thumb { background: var(--color-slate-50); }
@media (max-width: 900px) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
  .settings-nav { position: static; flex-direction: row; gap: var(--space-6); overflow-x: auto; padding-bottom: var(--space-4); scrollbar-width: none; }
  .settings-nav-group { display: none; }
  .settings-nav a { flex: none; min-height: 44px; border: 1px solid var(--line); background: var(--surface); white-space: nowrap; }
  .settings-nav a[aria-current="page"] { border-color: transparent; }
}
.theme-choice { display: grid; gap: var(--space-8); margin: 0; padding: 0; border: 0; min-width: 0; }
.theme-choice legend { padding: 0; margin-bottom: var(--space-6); color: var(--muted); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.theme-choice .choices { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-20); }
.fields, .grid { display: grid; gap: var(--space-16); }
.grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: end; }
label { display: grid; gap: var(--space-6); }
label > span { color: var(--muted); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
label.inline { display: flex; align-items: center; gap: var(--space-10); min-height: 44px; }
input[type='text'], input[type='number'], input[type='password'], input[type='email'], input[type='search'], input[type='datetime-local'], input[type='url'], input[type='file'], textarea, select {
  width: 100%; min-height: 44px; background: var(--surface); color: var(--text); border: 1px solid var(--edge); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-12); font: inherit;
}
textarea { min-height: 96px; }
input[type='file'] { padding: var(--space-8) var(--space-12); }
input:focus, textarea:focus, select:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--accent); }
input[type='color'] { width: 44px; height: 44px; padding: 3px; border: 1px solid var(--edge); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; }
/* A color picker with its hex next to it (shared/_color_field) and a file field with a button of our own (shared/_file_picker). */
.color-field { display: inline-flex; align-items: center; gap: var(--space-8); }
.color-field .color-field__hex { width: 10ch; min-width: 0; font-variant-numeric: tabular-nums; text-transform: lowercase; }
.file-picker { display: grid; gap: var(--space-4); }
.file-picker__label { font-weight: var(--weight-semibold); }
.file-picker__row { display: flex; align-items: center; gap: var(--space-12); min-width: 0; }
.file-picker__row input:focus-visible + .btn { outline: 3px solid var(--focus); outline-offset: 2px; }
.file-picker__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.file-picker__help { color: var(--muted); font-size: var(--text-sm); }
input[type='range'] { width: 100%; min-height: 28px; accent-color: var(--accent); }
input[type='checkbox'], input[type='radio'] { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
/* --- Button base (.btn) ---
   One base with variants and states. The older classes (button.primary, button.ghost, button.danger,
   a.button-link, .downloads button, input[type=submit]) work as aliases. */
.btn, input[type='submit'], button.primary, button.ghost, button.danger, a.button-link, .downloads button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  min-height: 44px; padding: 0 var(--space-16); border: 1px solid var(--edge); border-radius: var(--radius-xl);
  background: var(--surface); color: var(--text); font: inherit; font-weight: var(--weight-semibold); line-height: 1; text-decoration: none; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.btn--primary, input[type='submit'], button.primary { padding: 0 var(--space-20); background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: var(--weight-bold); }
.btn--danger, button.danger { padding: 0 var(--space-20); background: var(--bad); border-color: var(--bad); color: var(--on-bad); font-weight: var(--weight-bold); }
.btn:hover, button.ghost:hover, a.button-link:hover, .downloads button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-text); }
.btn--primary:hover, input[type='submit']:hover, button.primary:hover, .btn--danger:hover, button.danger:hover { filter: brightness(1.08); }
.btn--primary:hover, button.primary:hover { border-color: var(--accent); color: var(--on-accent); }
.btn--danger:hover, button.danger:hover { border-color: var(--bad); color: var(--on-bad); }
.btn:active, button.primary:active, button.ghost:active, button.danger:active, a.button-link:active { transform: translateY(1px); filter: brightness(.95); }
.btn:disabled, .btn[aria-disabled='true'], input[type='submit']:disabled, button.primary:disabled, button.ghost:disabled, button.danger:disabled, .downloads button:disabled { opacity: .4; cursor: not-allowed; filter: none; transform: none; }
/* Loading: the label goes transparent (the width stays) and a spinner takes its place. */
.btn[aria-busy='true'], button[aria-busy='true'], button[aria-busy='true']:disabled { color: transparent; cursor: progress; pointer-events: none; opacity: 1; }
.btn[aria-busy='true']::after, button[aria-busy='true']::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--text); border-right-color: transparent; border-radius: var(--radius-circle); animation: btn-spin .7s linear infinite; }
.btn--primary[aria-busy='true']::after, button.primary[aria-busy='true']::after { border-color: var(--on-accent); border-right-color: transparent; }
.btn--danger[aria-busy='true']::after, button.danger[aria-busy='true']::after { border-color: var(--on-bad); border-right-color: transparent; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn, input[type='submit'], button { transition: none; } .btn[aria-busy='true']::after, button[aria-busy='true']::after { animation-duration: 2s; } }
/* --- Accessibility: page structure and field errors --- */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: var(--space-8); left: var(--space-8); z-index: var(--z-overlay); display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-16); border-radius: var(--radius-xl); background: var(--accent); color: var(--on-accent); font-weight: var(--weight-bold); text-decoration: none; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
main[tabindex="-1"]:focus { outline: none; }
.field-error { display: block; margin-top: var(--space-4); color: var(--bad); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
[aria-invalid="true"] { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.marquee-pause { min-height: 44px; }
button.linklike { background: none; border: 0; padding: 0; color: var(--accent-text); cursor: pointer; font: inherit; }
.hint-text, .draft { color: var(--muted); }
.error { color: var(--bad); font-weight: var(--weight-semibold); }
.flash { background: var(--ok-soft); border: 1px solid var(--ok); color: var(--ok); border-radius: var(--radius-xl); padding: var(--space-10) var(--space-14); margin: 0 0 var(--space-20); font-weight: var(--weight-semibold); }
.flash.alert { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }

/* --- Step number badge --- */
.step { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-lg); background: var(--accent); color: var(--on-accent); font: var(--weight-bold) var(--text-md) var(--font-body); flex: none; }

/* --- QR editor --- */
.qr-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: var(--space-24); align-items: start; }
.content .qr-cols > div { display: grid; gap: var(--space-24); min-width: 0; }
@media (max-width: 960px) { .qr-cols { grid-template-columns: 1fr; } }
.preview { position: sticky; top: 24px; }
@media (max-width: 960px) { .preview { position: static; } }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-16); }
.chips button, .chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-14); border-radius: var(--radius-full); border: 1px solid var(--edge); background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-md); cursor: pointer; text-decoration: none; }
.chips button:hover, .chips a:hover { border-color: var(--accent); }
.chips button.active, .chips a.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); font-weight: var(--weight-bold); }
.payload { margin: var(--space-14) 0 0; padding: var(--space-12) var(--space-14); background: var(--surface-2); border: 1px dashed var(--edge); border-radius: var(--radius-xl); color: var(--muted); font: var(--text-xs)/1.5 var(--font-mono); white-space: pre-wrap; word-break: break-all; max-height: 140px; overflow: auto; }
.canvas-wrap { position: relative; border-radius: var(--radius-3xl); overflow: hidden; background: var(--color-white); border: 1px solid var(--line); aspect-ratio: 1; }
.canvas-wrap.checker { background: repeating-conic-gradient(var(--color-gray-300) 0% 25%, var(--color-white) 0% 50%) 0 / 20px 20px; }
.canvas-wrap canvas { display: block; width: 100%; height: 100%; }
.hint { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: var(--space-24); color: var(--color-slate-700); text-align: center; }
.encoded { margin: var(--space-12) 0 0; font: var(--text-xs) var(--font-mono); color: var(--muted); word-break: break-all; }
.meter { margin-top: var(--space-16); font-size: var(--text-md); font-weight: var(--weight-bold); }
.meter .bar { position: relative; height: 10px; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--bad), var(--warn), var(--ok)); border: 1px solid var(--line); overflow: hidden; margin-bottom: var(--space-8); }
.meter .bar i { position: absolute; right: 0; top: 0; bottom: 0; width: 100%; background: var(--surface-2); transition: width var(--dur-base) var(--ease); }
.meter[data-level='no'] span { color: var(--bad); }
.meter[data-level='low'] span, .meter[data-level='medium'] span { color: var(--warn); }
.meter[data-level='high'] span { color: var(--ok); }
.downloads { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin-top: var(--space-16); }
.downloads label { display: flex; align-items: center; gap: var(--space-8); }
.downloads select { width: auto; min-height: 44px; }
.save { display: grid; gap: var(--space-14); margin-top: var(--space-20); padding-top: var(--space-20); border-top: 1px solid var(--line); }
.link-links { font-size: var(--text-md); color: var(--muted); margin: 0 0 var(--space-14); }

/* Collapsible groups in the style step */
.fold { margin: 0 -28px; border-top: 1px solid var(--line); padding: 0 var(--space-28); }
.fold > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); min-height: 56px; cursor: pointer; font-weight: var(--weight-bold); list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -4px var(--space-6) 0 0; flex: none; transition: transform var(--dur-base); }
.fold[open] > summary::after { transform: rotate(-135deg); margin-top: var(--space-4); }
.fold > summary small { display: block; font-weight: var(--weight-regular); }
.fold > .grid { padding-bottom: var(--space-24); }
.panel > .fold:last-child { margin-bottom: -28px; }

/* --- Lists --- */
.search { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; margin-bottom: var(--space-16); }
.search input[type='search'] { flex: 1 1 260px; width: auto; }
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-2xl); overflow: hidden; }
.list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-12); padding: var(--space-14) var(--space-16); background: var(--surface); border-top: 1px solid var(--line); }
.list li:first-child { border-top: 0; }
.list li:hover { background: var(--surface-2); }
.list li.stack { flex-direction: column; align-items: stretch; }
.list li .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.list a { color: var(--text); text-decoration: none; font-weight: var(--weight-bold); }
.list a:hover { color: var(--accent-text); }
.list small { display: block; color: var(--muted); font-weight: var(--weight-regular); }
.list.compact li { padding: var(--space-8) var(--space-14); font-size: var(--text-md); }
.list.compact li em { color: var(--warn); font-style: normal; font-size: var(--text-xs); }
.list li em { color: var(--warn); font-style: normal; }
.list form, .list .button_to { margin: 0; }
.tag { display: inline-block; background: var(--accent-soft); color: var(--accent-text); border-radius: var(--radius-full); padding: 0 var(--space-10); font-size: var(--text-xs); font-weight: var(--weight-semibold); margin-left: var(--space-4); }
.dns { background: var(--surface-2); border: 1px dashed var(--edge); border-radius: var(--radius-xl); padding: var(--space-10) var(--space-14); }
.dns p { margin: var(--space-4) 0; }

/* --- Analytics --- */
.stats { font-size: var(--text-xl); margin: var(--space-4) 0 0; }
.stats strong { font: var(--weight-semibold) var(--text-10xl)/1.05 var(--font-display); letter-spacing: -.03em; }
h2 small a { margin-left: var(--space-8); color: var(--muted); text-decoration: none; padding: var(--space-8) var(--space-10); border-radius: var(--radius-lg); display: inline-block; font-weight: var(--weight-medium); }
h2 small a.current { background: var(--accent-soft); color: var(--accent-text); font-weight: var(--weight-bold); }
.heatmap { display: grid; gap: var(--space-4); overflow-x: auto; }
.heat-axis { display: grid; grid-template-columns: 36px repeat(24, minmax(12px, 1fr)); gap: var(--space-4); min-width: 560px; font-size: var(--text-xs); color: var(--muted); }
.heat-axis span:nth-child(1) { grid-column: 2; }
.heat-axis span:nth-child(2) { grid-column: 8; }
.heat-axis span:nth-child(3) { grid-column: 14; }
.heat-axis span:nth-child(4) { grid-column: 20; }
.heat-legend { display: flex; align-items: center; gap: var(--space-4); margin: 0; font-size: var(--text-xs); color: var(--muted); }
.heat-legend i { width: 12px; height: 12px; border-radius: var(--radius-xs); background: var(--accent); }
.heat-legend i:nth-of-type(1) { opacity: .15; }
.heat-legend i:nth-of-type(2) { opacity: .4; }
.heat-legend i:nth-of-type(3) { opacity: .7; }
.heat-legend i:nth-of-type(4) { opacity: 1; }
.heat-row { display: grid; grid-template-columns: 36px repeat(24, minmax(12px, 1fr)); gap: var(--space-4); align-items: center; font-size: var(--text-xs); color: var(--muted); min-width: 560px; }
.heat-cell { display: block; aspect-ratio: 1; border-radius: var(--radius-xs); background: var(--accent); }

/* --- Barcodes, smart links, landing editor, tables --- */
.barcode-wrap { aspect-ratio: auto; min-height: 180px; display: grid; place-items: center; padding: var(--space-16); }
.barcode-wrap img { max-width: 100%; height: auto; display: block; }
.barcode-wrap .hint { position: static; padding: 0; }
.block-row { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-2xl); padding: var(--space-12) var(--space-14); margin-bottom: var(--space-12); }
.block-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); margin-bottom: var(--space-8); }
.block-head select { width: auto; }
.block-tools { display: flex; gap: var(--space-4); }
.block-body { display: grid; gap: var(--space-10); }
.table-wrap { overflow-x: auto; }
table.responses, table.data { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
table.responses th, table.responses td, table.data th, table.data td { text-align: left; vertical-align: top; padding: var(--space-10); border-bottom: 1px solid var(--line); }
table.responses th, table.data th { color: var(--muted); font-weight: var(--weight-bold); }
table.data td { white-space: nowrap; }
.token-box { background: var(--ok-soft); border: 1px solid var(--ok); border-radius: var(--radius-2xl); padding: var(--space-4) var(--space-16); margin: var(--space-12) 0; }
.token { font-size: var(--text-md); user-select: all; }
td.ok { color: var(--ok); }
td.bad { color: var(--bad); }
.deliveries { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; gap: var(--space-4); font-size: var(--text-sm); }
.deliveries li { display: flex; gap: var(--space-10); align-items: baseline; flex-wrap: wrap; }
.deliveries li.delivered b { color: var(--ok); }
.deliveries li.failed b { color: var(--bad); }
.deliveries li.pending b { color: var(--warn); }
fieldset.events { border: 1px solid var(--line); border-radius: var(--radius-xl); padding: var(--space-10) var(--space-14); display: grid; gap: var(--space-8); }
fieldset.events legend { color: var(--muted); font-size: var(--text-sm); padding: 0 var(--space-6); }

/* --- Short-link notice pages (locked, expired, not found) --- */
.notice-page { max-width: 440px; margin: 14vh auto; padding: 0 var(--space-20); text-align: center; }
.notice-page h1 { font-size: var(--text-5xl); }
.notice-page p { color: var(--muted); }
.unlock { display: grid; gap: var(--space-12); margin-top: var(--space-20); text-align: left; }

/* --- Public landing pages (always light) --- */
body.landing-body { background: var(--bg); color: var(--text); }
.landing-page { max-width: 520px; margin: 0 auto; padding: var(--space-24) var(--space-16) var(--space-56); }
.landing-page .flash { background: var(--ok-soft); }
.landing { background: var(--surface); border-radius: var(--radius-5xl); padding: var(--space-28) var(--space-24); box-shadow: var(--shadow); }
.landing h1 { margin: 0 0 var(--space-8); font-size: var(--text-6xl); line-height: 1.1; }
.landing h2 { margin: var(--space-24) 0 var(--space-8); font-size: var(--text-2xl); }
.landing p { margin: 0 0 var(--space-12); line-height: 1.5; }
.landing .error { color: var(--bad); }
.landing-link { display: flex; align-items: center; justify-content: center; min-height: 52px; background: var(--text); color: var(--color-white); text-decoration: none; padding: 0 var(--space-20); border-radius: var(--radius-2xl); margin: var(--space-10) 0; font-weight: var(--weight-bold); }
.landing-link:hover { background: var(--accent); }
.landing-item { padding: var(--space-12) 0; border-bottom: 1px solid var(--line); }
.landing-item p { color: var(--muted); margin: var(--space-4) 0 0; font-size: var(--text-md); }
.item-line { display: flex; justify-content: space-between; gap: var(--space-12); }
.landing-field { margin: var(--space-16) 0; display: grid; gap: var(--space-6); }
.landing-field label, .landing-field legend { font-weight: var(--weight-bold); font-size: var(--text-base); color: var(--text); }
.landing-field input[type='text'], .landing-field input[type='email'], .landing-field textarea, .landing-field select { min-height: 48px; border-radius: var(--radius-xl); padding: var(--space-10) var(--space-14); }
.landing-field.has-error input, .landing-field.has-error textarea, .landing-field.has-error select { border-color: var(--bad); border-width: 2px; }
.landing-field fieldset { border: 0; padding: 0; margin: 0; }
.rating { display: flex; gap: var(--space-8); }
.rating label { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: 56px; border: 1px solid var(--edge); border-radius: var(--radius-xl); font-weight: var(--weight-semibold); cursor: pointer; }
.landing-form input[type='submit'] { width: 100%; min-height: 52px; border-radius: var(--radius-2xl); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
body.landing-body button.linklike { color: var(--muted); text-decoration: underline; min-height: 44px; padding: 0 var(--space-12); }
.landing-page .locales { background: transparent; border-color: transparent; }
.fold > summary small { color: var(--muted); font-size: var(--text-sm); }

/* Plans and billing */
.upgrade { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8) var(--space-16); background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent-text); border-radius: var(--radius-xl); padding: var(--space-12) var(--space-16); margin: var(--space-12) 0; grid-column: 1 / -1; }
.upgrade p { margin: 0; font-weight: var(--weight-semibold); }
.upgrade .upgrade-link { color: var(--accent-text); font-weight: var(--weight-bold); }
.plan-summary p { margin: var(--space-6) 0; }
.plan-summary .stats strong { font-size: var(--text-8xl); margin-left: var(--space-8); }
.plan-actions { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-16); }
.plans-panel { margin-top: var(--space-24); }
.plan-grid { display: grid; gap: var(--space-16); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: var(--space-16); }
.plan-card { display: flex; flex-direction: column; gap: var(--space-8); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-3xl); padding: var(--space-20); }
.plan-card h3 { margin: 0; }
.plan-card p { margin: 0; }
.plan-card.current { border-color: var(--accent); }
.plan-card.highlight { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-price strong { font: var(--weight-semibold) var(--text-7xl)/1.1 var(--font-display); letter-spacing: -.02em; }
.plan-price small { display: block; }
.plan-features { margin: var(--space-4) 0 var(--space-8); padding-left: var(--space-16); flex: 1; }
.plan-card .row { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.plan-card form, .plan-actions form { margin: 0; }