@charset "UTF-8";

:root {
  color-scheme: light;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "微软雅黑", "PingFang SC", system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --ink: #243244;
  --muted: #596877;
  --blue: #315f84;
  --blue-hover: #254d6f;
  --line: #d9dfe3;
  --focus: #5482a4;
  --timer-font-size: 14pt;
  --timer-time-font-size: 16pt;
  --timer-countdown-font-size: 18pt;
  --timer-header-font-size: 13pt;
  --mono: Consolas, "Cascadia Mono", "SFMono-Regular", "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 0; background: #f3f5f7; color: var(--ink); font-size: 14px; line-height: 1.5; }
button, input, select { font: inherit; }
button, select, summary { -webkit-tap-highlight-color: transparent; }
button, summary, select { cursor: pointer; }
button { color: inherit; }
button:disabled { cursor: default; opacity: .4; }
input { min-width: 0; color: inherit; }
button, input, select, summary, article { outline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); }
[hidden] { display: none !important; }
svg { display: block; }
.icon { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }

#app {
  --column-toggle: 96px;
  --column-name: max(190px, calc(var(--timer-font-size) * 4 + 65px));
  --column-interval: max(135px, calc(var(--timer-header-font-size) * 5 + 24px));
  --column-countdown: max(205px, calc(var(--timer-countdown-font-size) * 5 + 32px));
  --column-time: max(195px, calc(var(--timer-header-font-size) * 6 + 30px), calc(var(--timer-time-font-size) * 4.8 + 36px));
  --row-columns: var(--column-toggle) minmax(var(--column-name), 3fr) minmax(var(--column-interval), 1fr) minmax(var(--column-countdown), 2fr) minmax(var(--column-time), 2fr) minmax(var(--column-time), 2fr);
  --row-areas: "toggle name interval countdown last next";
  --mobile-display: none;
  --desktop-display: block;
  --header-display: grid;
  --row-padding: 0;
  --row-gap: 0;
  --row-border: 0;
  --row-radius: 0;
  --row-min-height: 48px;
  --row-text-size: var(--timer-font-size);
  --cell-padding: 5px 12px;
  --cell-divider: 1px solid var(--line);
  --cell-align: center;
  --last-align: center;
  --countdown-weight: 700;
  --countdown-limit: 100px;
  --time-limit: 100px;
  --interval-limit: 100px;
  --mobile-actions-display: none;
  --table-min-width: calc(var(--column-toggle) + var(--column-name) + var(--column-interval) + var(--column-countdown) + var(--column-time) * 2);
  --list-gap: 0;
  --panel-border: 1px solid var(--line);
  --panel-background: #fff;
  --panel-radius: 12px;
  width: min(1320px, 100%);
  margin: 0 auto;
  padding: 34px clamp(16px, 3.3vw, 46px) 22px;
}

#app, #app main, .timer-workspace, .timer-panel { min-width: 0; max-width: 100%; }

.status-dot { display: inline-block; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #639482; }
.workspace-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 14px; }
.list-heading { display: flex; align-items: center; gap: 12px; }
.list-heading h2 { font-size: 15px; font-weight: 700; margin: 0; }
.running-summary { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid #dce6e2; border-radius: 20px; color: #5b7d70; background: #edf5f0; font-size: 11px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.toolbar-main, .toolbar-options { display: flex; align-items: center; gap: 8px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 37px; padding: 8px 13px; border: 1px solid #d6dfe6; border-radius: 7px; background: #fff; color: #465d6e; font-size: 12px; line-height: 1.4; font-weight: 500; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s; }
.button:hover:not(:disabled) { border-color: #a9bdcb; background: #f9fbfc; }
.button-primary { color: #fff; border-color: var(--blue); background: var(--blue); }
.button-primary:hover:not(:disabled) { color: #fff; border-color: var(--blue-hover); background: var(--blue-hover); }
.button-symbol { font-size: 20px; line-height: 14px; font-weight: 300; }
.button-delete { background: transparent; }
.button-delete:hover:not(:disabled) { color: #a4493f; border-color: #d4b2ae; background: #fff8f6; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding: 7px; border: 0; background: transparent; border-radius: 6px; color: #5d7383; line-height: 1; }
.icon-button:hover:not(:disabled) { background: #e3eaf0; color: var(--blue); }
.font-control { display: flex; align-items: center; border: 1px solid #d7e0e6; border-radius: 7px; overflow: hidden; }
.font-control .icon-button { min-height: 35px; border-radius: 0; font-family: Georgia, serif; font-size: 16px; }
.font-control .icon-button + .icon-button { border-left: 1px solid #d7e0e6; }
.font-symbol { margin-left: 1px; font: 12px var(--mono); }
.layout-control { display: flex; align-items: center; gap: 7px; padding-left: 6px; color: #718390; font-size: 12px; }
#layout-select { min-height: 37px; padding: 7px 22px 7px 10px; border: 1px solid #d7e0e6; border-radius: 7px; color: #465d6e; background-color: #fff; }
.data-menu { position: relative; flex: 0 0 auto; }
.data-menu summary { list-style: none; }
.data-menu summary::-webkit-details-marker { display: none; }
.data-menu-trigger { display: inline-flex; align-items: center; min-height: 28px; color: var(--blue); white-space: nowrap; border-radius: 3px; }
.data-menu-trigger:hover, .data-menu[open] .data-menu-trigger { text-decoration: underline; text-underline-offset: 3px; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 7px); z-index: 20; min-width: 208px; max-width: calc(100vw - 24px); padding: 5px; border: 1px solid #dce3e8; border-radius: 10px; background: #fff; color: var(--ink); box-shadow: 0 8px 30px #2337471f; }
.menu-panel button { display: block; width: 100%; padding: 10px 11px; border: 0; border-radius: 5px; background: transparent; text-align: left; font-size: 12px; }
.menu-panel button:hover { background: #eef3f6; }
.menu-panel button span { display: block; margin-top: 3px; color: #7d8d98; font-size: 11px; }
.menu-divider { height: 1px; margin: 4px 7px; background: #e8edf0; }

.timer-panel { border: var(--panel-border); border-radius: var(--panel-radius); background: var(--panel-background); box-shadow: 0 2px 7px #243a4b03; }
.table-scroll { display: block; width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; border-radius: inherit; touch-action: pan-x pan-y pinch-zoom; -webkit-overflow-scrolling: touch; }
.table-scroll:focus-visible { outline-offset: -2px; }
.table-heading { display: var(--header-display); grid-template-columns: var(--row-columns); align-items: stretch; width: 100%; min-width: var(--table-min-width); min-height: 51px; border-bottom: 1px solid var(--line); border-radius: 11px 11px 0 0; background: #f6ebe6; color: #a83e3e; font-size: var(--timer-header-font-size); font-weight: 700; text-align: center; }
.table-heading > span { display: flex; align-items: center; justify-content: center; padding: 12px 8px; border-right: 1px solid var(--line); white-space: nowrap; }
.table-heading > span:last-child { border-right: 0; }
.table-heading small { margin-left: 4px; font-size: .85em; font-weight: 600; white-space: nowrap; }
#timer-list { display: grid; gap: var(--list-gap); position: relative; width: 100%; min-width: var(--table-min-width); }
.timer-row { position: relative; display: grid; grid-template-columns: var(--row-columns); grid-template-areas: var(--row-areas); align-items: stretch; gap: var(--row-gap); min-width: 0; min-height: var(--row-min-height); padding: var(--row-padding); border: var(--row-border); border-radius: var(--row-radius); background: #fff; color: var(--ink); font-size: var(--row-text-size); touch-action: pan-x pan-y pinch-zoom; }
.timer-row + .timer-row { border-top: 1px solid var(--line); }
.timer-row:last-child { border-bottom-left-radius: var(--panel-radius); border-bottom-right-radius: var(--panel-radius); }
.timer-row.running, .timer-row.is-running { background: #dcf3c5; }
.timer-row.running:nth-child(even), .timer-row.is-running:nth-child(even) { background: #fff0ae; }
.timer-row.is-selected { box-shadow: inset 3px 0 #456e8e; z-index: 1; }
.timer-row.is-selected::after { content: ""; pointer-events: none; position: absolute; inset: 0; border: 1px solid #7397b34d; border-radius: inherit; }
.timer-row:hover { z-index: 2; }
.timer-cell { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: var(--cell-padding); border-right: var(--cell-divider); text-align: var(--cell-align); }
.cell-switch { grid-area: toggle; display: flex; align-items: center; justify-content: center; }
.cell-name { grid-area: name; text-align: left; }
.cell-interval { grid-area: interval; }
.cell-countdown { grid-area: countdown; display: flex; align-items: var(--cell-align); flex-direction: column; gap: 1px; }
.cell-last { grid-area: last; text-align: var(--last-align); }
.cell-next { grid-area: next; border-right: 0; text-align: var(--last-align); }
.cell-label { margin-bottom: 5px; font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; color: #526457; font-size: 12px; font-weight: 400; letter-spacing: .02em; }
.desktop-only { display: var(--desktop-display); }
.mobile-only { display: var(--mobile-display); }
.inline-input { width: 100%; min-width: 0; min-height: calc(1.25em + 8px); padding: 3px 6px; border: 1px solid #d6dfe6; border-radius: 4px; background: #fbfcfd; color: var(--ink); text-align: center; font-size: var(--timer-font-size); line-height: 1.25; transition: border-color .12s, background .12s; }
.input-name { text-align: left; font-weight: 400; }
.input-interval, .input-time { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.input-time { font-size: var(--timer-time-font-size); border-color: #aebfcd; background: transparent; }
.inline-input:hover:not(:read-only), .inline-input:focus { background: #ffffffaa; border-color: #9cb2c5; }
.inline-input:focus { outline: 2px solid #6a8ea030; outline-offset: 0; background: #fff; }
.inline-input:read-only, .inline-input:disabled { cursor: default; }
.inline-input:disabled { opacity: 1; border-color: transparent; background: transparent; -webkit-text-fill-color: currentColor; }
.inline-input:read-only:focus { border-color: transparent; background: transparent; }
.inline-input.invalid, .inline-input[aria-invalid="true"] { border-color: #b85f51; background: #fff4f0; }
.input-time::placeholder { color: #647383; opacity: 1; }
.name-label { font-size: var(--row-text-size); font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.timer-switch { position: relative; display: inline-flex; width: 39px; height: 23px; padding: 3px; border: 1px solid #c3cdd4; border-radius: 20px; background: #c7d1d8; transition: background .16s, border-color .16s; }
.switch-thumb { width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #293a4833; transition: transform .16s; pointer-events: none; }
.timer-switch[aria-checked="true"] { background: #326947; border-color: #326947; }
.timer-switch[aria-checked="true"] .switch-thumb { transform: translateX(15px); }
.timer-switch::before { content: ""; position: absolute; inset: -9px -5px; }
.countdown { display: block; max-width: 100%; font-family: var(--mono); font-size: min(var(--timer-countdown-font-size), var(--countdown-limit)); font-weight: var(--countdown-weight); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.time-value { font-family: var(--mono); font-size: min(var(--timer-time-font-size), var(--time-limit)); font-variant-numeric: tabular-nums; line-height: 1.5; white-space: nowrap; }
.interval-value { font-family: var(--mono); font-size: min(var(--timer-font-size), var(--interval-limit)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.interval-unit { margin-left: 4px; font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; color: #596877; font-size: 12px; }
.mobile-actions { display: var(--mobile-actions-display); grid-area: actions; align-items: center; justify-content: space-between; gap: 5px; padding-top: 9px; border-top: 1px solid #667d681b; }
.card-edit-actions, .card-order-actions { display: flex; align-items: center; gap: 4px; }
.row-button { display: inline-flex; justify-content: center; align-items: center; gap: 4px; min-height: 32px; padding: 6px 7px; border: 0; border-radius: 5px; background: transparent; font-size: 12px; color: #4b666b; }
.row-button:hover:not(:disabled) { background: #72858916; color: #294c5c; }
.row-button .icon { width: 14px; height: 14px; flex-basis: 14px; }
.order-button { min-width: 29px; padding: 5px; }
.list-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; padding: 8px 2px 0; font-size: 10px; color: #86959f; }
#selected-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 30px; margin-top: 24px; border-top: 1px solid #dee5ea; color: #98a5ae; font-size: 10px; }
.empty-state { display: flex; min-height: 300px; flex-direction: column; justify-content: center; align-items: center; padding: 35px 20px; text-align: center; }
.empty-icon { display: grid; place-items: center; width: 65px; height: 65px; margin-bottom: 8px; border-radius: 18px; color: #91a6b4; background: #f2f6f8; }
.empty-icon svg { width: 40px; height: 40px; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.empty-state h3 { margin: 8px 0 3px; font-size: 16px; font-weight: 600; }
.empty-state p { margin: 0 0 19px; color: #8a99a3; font-size: 12px; }

.notice { padding: 12px 15px; margin-bottom: 20px; border: 1px solid #e6c99f; border-radius: 8px; background: #fff7e9; color: #81633c; font-size: 12px; overflow-wrap: anywhere; }
.notice.error, .notice[data-type="error"] { background: #fff1ed; border-color: #e9c4b9; color: #994e3c; }
.toast { position: fixed; bottom: max(28px, env(safe-area-inset-bottom)); left: 50%; z-index: 100; width: max-content; max-width: calc(100vw - 32px); padding: 11px 18px; border: 1px solid #365468; border-radius: 9px; background: #294558; box-shadow: 0 5px 20px #1b30442b; color: #fff; font-size: 12px; text-align: center; transform: translateX(-50%); pointer-events: none; }
.dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); margin: auto; padding: 0; border: 1px solid #d9e2e8; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 20px 80px #1c34452e; }
.dialog::backdrop { background: #263b4b66; backdrop-filter: blur(3px); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 19px 22px 15px; border-bottom: 1px solid #e8edf0; }
.dialog-heading h2 { margin: 0; font-size: 17px; font-weight: 650; }
.dialog-close { font-size: 25px; font-weight: 300; min-height: 30px; min-width: 30px; margin: -6px -7px -6px 0; }
.dialog-body { padding: 22px; }
.form-field + .form-field { margin-top: 19px; }
.form-field label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 600; color: #4c6170; }
.form-field input { display: block; width: 100%; height: 43px; padding: 10px 11px; border: 1px solid #cfdbe3; border-radius: 7px; background: #fbfcfd; font-size: 15px; }
.form-field input::placeholder { color: #a0adb7; font-size: 13px; }
.form-field input:focus { border-color: #7194ae; outline: 3px solid #7299b31a; outline-offset: 0; background: #fff; }
.field-hint { margin: 5px 0 0; color: #94a1ab; font-size: 11px; }
.input-with-unit { position: relative; }
.input-with-unit input { padding-right: 35px; }
.input-with-unit > span { position: absolute; right: 13px; top: 11px; color: #90a0ab; font-size: 12px; pointer-events: none; }
.form-error { margin: 16px 0 0; padding: 9px 11px; border: 1px solid #edcec3; border-radius: 6px; background: #fff5f0; color: #ae5641; font-size: 12px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 22px 18px; border-top: 1px solid #edf1f4; }
.dialog-actions .button { min-width: 70px; }
.confirm-message { margin: 0; line-height: 1.8; color: #617785; font-size: 13px; white-space: pre-line; overflow-wrap: anywhere; }
.noscript-message { position: fixed; inset: 0; display: grid; place-items: center; background: #f0f3f6; color: #234760; padding: 24px; }

.timer-row.is-dragging { z-index: 50; pointer-events: none; opacity: .96; border-radius: 10px; box-shadow: 0 12px 30px #29404b35; outline: 1px solid #83a0b3; cursor: grabbing; transition: none !important; }
.drag-placeholder { border: 1px dashed #98b1c1; border-radius: var(--row-radius); background: #dce7ef99; min-height: var(--row-min-height); }
.timer-row.drag-placeholder > * { visibility: hidden; }
.sorting .timer-row:not(.is-dragging) { transition: transform .16s ease; }
.dragging, .dragging *, .is-sorting, .is-sorting * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
.drag-zone { position: absolute; top: 0; right: 16px; left: 16px; height: 24px; touch-action: none; user-select: none; -webkit-user-select: none; }

/* Layout variables keep one DOM tree and preserve focus while changing UI. */
#app[data-layout="mobile"] {
  --row-columns: minmax(0, 1fr) auto;
  --row-areas: "name toggle" "countdown interval" "last next" "actions actions";
  --mobile-display: block;
  --desktop-display: none;
  --header-display: none;
  --row-padding: 26px 16px 9px;
  --row-gap: 14px 12px;
  --row-border: 1px solid #dbe3e8;
  --row-radius: 12px;
  --row-min-height: 218px;
  --row-text-size: min(var(--timer-font-size), 28px);
  --cell-padding: 0;
  --cell-divider: 0;
  --cell-align: flex-start;
  --last-align: left;
  --countdown-weight: 700;
  --countdown-limit: 30px;
  --time-limit: 22px;
  --interval-limit: 18px;
  --mobile-actions-display: flex;
  --table-min-width: 0;
  --list-gap: 11px;
  --panel-border: 0;
  --panel-background: transparent;
  --panel-radius: 12px;
  max-width: 680px;
}
#app[data-layout="mobile"] .mobile-actions { display: flex; }
#app[data-layout="mobile"] .cell-switch { align-items: flex-end; justify-content: center; }
#app[data-layout="mobile"] .cell-interval { text-align: right; align-self: center; }
#app[data-layout="mobile"] .cell-next { min-width: 95px; }
#app[data-layout="mobile"] .time-value { line-height: 1.5; }
#app[data-layout="mobile"] .countdown { white-space: normal; overflow-wrap: anywhere; }
#app[data-layout="mobile"] .cell-last, #app[data-layout="mobile"] .cell-next { padding-top: 10px; border-top: 1px solid #6c83741c; }
#app[data-layout="mobile"] .row-button { min-height: 44px; }
#app[data-layout="mobile"] .order-button { min-width: 44px; }
#app[data-layout="mobile"] .timer-switch::before { inset: -11px -6px; }
#app[data-layout="mobile"][data-large-font="true"] {
  --row-areas: "name toggle" "countdown countdown" "interval interval" "last last" "next next" "actions actions";
  --row-text-size: min(var(--timer-font-size), 36px);
  --countdown-limit: 42px;
  --time-limit: 34px;
  --interval-limit: 28px;
}
#app[data-layout="mobile"][data-large-font="true"] .cell-interval { text-align: left; }

@media (max-width: 859px) {
  #app:not([data-layout="desktop"]) {
    --row-columns: minmax(0, 1fr) auto;
    --row-areas: "name toggle" "countdown interval" "last next" "actions actions";
    --mobile-display: block;
    --desktop-display: none;
    --header-display: none;
    --row-padding: 26px 16px 9px;
    --row-gap: 14px 12px;
    --row-border: 1px solid #dbe3e8;
    --row-radius: 12px;
    --row-min-height: 218px;
    --row-text-size: min(var(--timer-font-size), 28px);
    --cell-padding: 0;
    --cell-divider: 0;
    --cell-align: flex-start;
    --last-align: left;
    --countdown-weight: 700;
    --countdown-limit: 30px;
    --time-limit: 22px;
    --interval-limit: 18px;
    --mobile-actions-display: flex;
    --table-min-width: 0;
    --list-gap: 11px;
    --panel-border: 0;
    --panel-background: transparent;
    --panel-radius: 12px;
    max-width: 680px;
  }
  #app:not([data-layout="desktop"]) .mobile-actions { display: flex; }
  #app:not([data-layout="desktop"]) .cell-switch { align-items: flex-end; justify-content: center; }
  #app:not([data-layout="desktop"]) .cell-interval { text-align: right; align-self: center; }
  #app:not([data-layout="desktop"]) .cell-next { min-width: 95px; }
  #app:not([data-layout="desktop"]) .time-value { line-height: 1.5; }
  #app:not([data-layout="desktop"]) .countdown { white-space: normal; overflow-wrap: anywhere; }
  #app:not([data-layout="desktop"]) .cell-last, #app:not([data-layout="desktop"]) .cell-next { padding-top: 10px; border-top: 1px solid #6c83741c; }
  #app:not([data-layout="desktop"]) .row-button { min-height: 44px; }
  #app:not([data-layout="desktop"]) .order-button { min-width: 44px; }
  #app:not([data-layout="desktop"]) .timer-switch::before { inset: -11px -6px; }
  #app:not([data-layout="desktop"])[data-large-font="true"] {
    --row-areas: "name toggle" "countdown countdown" "interval interval" "last last" "next next" "actions actions";
    --row-text-size: min(var(--timer-font-size), 36px);
    --countdown-limit: 42px;
    --time-limit: 34px;
    --interval-limit: 28px;
  }
  #app:not([data-layout="desktop"])[data-large-font="true"] .cell-interval { text-align: left; }
}

@media (max-width: 620px) {
  #app { padding: 24px 16px max(22px, env(safe-area-inset-bottom)); }
  .workspace-heading { margin-bottom: 12px; }
  .list-heading h2 { font-size: 14px; }
  .running-summary { font-size: 10px; padding: 2px 7px; }
  .toolbar { flex-wrap: wrap; gap: 10px; margin-bottom: 13px; }
  .toolbar-main { flex: 1 1 auto; }
  .toolbar-options { flex: 1 1 auto; justify-content: flex-end; gap: 7px; }
  .toolbar-main .button { min-height: 44px; }
  .toolbar-options .icon-button, #layout-select { min-height: 44px; }
  .button-delete { padding-inline: 10px; }
  .layout-control { padding-left: 0; }
  .font-control .icon-button { min-width: 44px; }
  #layout-select { width: 67px; padding-left: 7px; padding-right: 15px; }
  .data-menu-trigger { min-height: 44px; }
  .app-footer { flex-wrap: wrap; margin-top: 18px; padding-top: 20px; gap: 4px; font-size: 9px; }
  .list-footer { font-size: 9px; padding-top: 9px; }
  .form-field input { font-size: 16px; }
  .dialog-body { padding: 20px; }
  .dialog-heading { padding-inline: 20px; }
  .dialog-actions { padding-inline: 20px; }
}

@media (max-width: 380px) {
  #app { padding-inline: 12px; }
  .toolbar-main { justify-content: space-between; }
  .toolbar-options { justify-content: space-between; gap: 3px; }
  .layout-control { margin-left: auto; }
  .card-edit-actions { gap: 0; }
  .row-button { padding-inline: 5px; font-size: 12px; }
  .card-order-actions { gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}