/* Inter interface font: real 400-800 weights, optical size 14; see fonts/README.md. */
@font-face {
    font-family: "DAC Interface";
    src: url("/dac-assets/fonts/dac-inter-ui-c0bb1af0.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 800;
    font-display: swap
}
/* Local, static Inter 600 digits; see fonts/README.md for source and license. */
@font-face {
    font-family: "DAC Display Digits";
    src: url("/dac-assets/fonts/dac-inter-600-008158cf.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    unicode-range: U+0030-0039
}
:root {
    color-scheme: light dark;
    font-synthesis: none;
    --page: #eef1f4;
    --surface: #fff;
    --surface-soft: #f6f7f9;
    --surface-variant: #e8ebee;
    --surface-control: #f2f5f7;
    --text: #262b31;
    --text-strong: #243746;
    --muted: #6e777f;
    --outline: #dce1e5;
    --outline-strong: #aab3ba;
    --danger: #b83a31;
    --digit-bg: #102a1c;
    --digit-text: #16f05b;
    --scrim: #0f141894;
    --shadow-dialog: 0 18px 56px #00000047;
    --font-ui: "DAC Interface",Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-family: var(--font-ui);
    font-weight: 400
}
@media (prefers-color-scheme:dark) {
}
* {
    box-sizing: border-box;
    letter-spacing: 0
}
html,body,#root {
    touch-action: manipulation;
    width: 100%;
    min-height: 100%;
    margin: 0
}
body {
    background: var(--page);
    min-height: 100dvh;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
    overflow-x: hidden
}
body.modal-open {
    overflow: hidden
}
button,input {
    font: inherit
}
button {
    color: inherit;
    cursor: pointer;
    touch-action: manipulation;
    border: 0
}
button:disabled {
    cursor: not-allowed
}
button:focus-visible,input:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent-focus) 50%, transparent);
    outline-offset: 2px
}
svg {
    stroke-width: 2px;
    width: 1em;
    height: 1em
}
.app-shell {
    --primary: #2980b9;
    --primary-deep: #236f9d;
    --profile-active: #2c3e50;
    --profile-drag: #f1c40f;
    --dashboard-height: clamp(361px, 48dvh, 440px);
    width: min(100%,520px);
    min-height: 100dvh;
    padding: max(16px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    background: var(--surface);
    touch-action: pan-x pan-y pinch-zoom;
    flex-direction: column;
    gap: 10px;
    margin: 0 auto;
    display: flex
}
.app-shell.mode-ruby {
    --primary: #d84336;
    --primary-deep: #a83229;
    --profile-active: #b9382e;
    --profile-drag: #ffbaba
}
.top-controls {
    flex: 0 0 44px;
    gap: 8px;
    height: 44px;
    display: flex
}
.mode-tabs {
    background: var(--surface-variant);
    border-radius: 8px;
    flex: 1;
    gap: 4px;
    min-width: 0;
    height: 44px;
    padding: 4px;
    display: flex
}
.mode-tabs button {
    min-width: 0;
    color: var(--muted);
    background: 0 0;
    border-radius: 6px;
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    transition: transform .13s,background-color .17s,color .17s
}
.mode-tabs button:active {
    transform: scale(.985)
}
.mode-tabs button.active {
    color: var(--accent-on-solid);
    background: linear-gradient(135deg,var(--accent-action),var(--accent-action-strong))
}
.settings-button {
    border: 1px solid var(--outline);
    background: color-mix(in srgb, var(--surface-variant) 82%, var(--surface));
    width: 44px;
    height: 44px;
    color: var(--text-strong);
    border-radius: 10px;
    flex: 0 0 44px;
    place-items: center;
    transition: transform .11s ease-out,background-color .16s;
    display: grid
}
.settings-button svg {
    width: 21px;
    height: 21px
}
.settings-button:active {
    background: var(--surface-variant);
    transform: scale(.94)
}
.profile-strip-wrap {
    flex: 0 0 48px;
    align-items: center;
    gap: 0;
    min-width: 0;
    height: 48px;
    display: flex
}
.profile-strip {
    scrollbar-width: none;
    touch-action: pan-y pinch-zoom;
    flex: 1;
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: 48px;
    display: flex;
    overflow: auto hidden
}
.profile-strip::-webkit-scrollbar {
    display: none
}
.profile-chip {
    color: #50575d;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
    background: #e4e7e9;
    border: 1px solid #d4d9dd;
    border-radius: 8px;
    flex: none;
    align-items: center;
    gap: 5px;
    min-width: 70px;
    max-width: 148px;
    height: 44px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    transition: transform .15s,background-color .17s,color .17s;
    display: flex;
    overflow: hidden
}
.profile-chip span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}
.profile-chip.active {
    background: var(--accent-selected);
    color: var(--accent-on-solid);
    border-color: #0000
}
.profile-chip.dragging {
    z-index: 1000;
    pointer-events: none;
    background: var(--accent-drag);
    color: var(--accent-drag-text);
    will-change: transform;
    margin: 0;
    transition: none;
    position: fixed;
    box-shadow: 0 7px 18px #0003
}
.profile-chip-placeholder {
    border: 2px dashed color-mix(in srgb, var(--accent-focus) 65%, var(--outline));
    background: var(--accent-soft);
    border-radius: 8px;
    flex: none;
    min-width: 70px;
    height: 44px
}
.add-profile-button {
    background: var(--accent-action);
    color: var(--accent-on-solid);
    border-radius: 50%;
    flex: 0 0 44px;
    place-items: center;
    width: 44px;
    height: 44px;
    transition: transform .13s,background-color .17s;
    display: grid
}
.add-profile-button svg {
    width: 20px;
    height: 20px
}
.add-profile-button:active {
    transform: scale(.94)
}
.profile-toolbar {
    flex: 0 0 48px;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    display: flex
}
.profile-toolbar h1 {
    min-width: 0;
    color: var(--accent-text);
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden
}
.profile-actions {
    flex: 0 0 148px;
    gap: 5px;
    width: 148px;
    display: flex
}
.text-action {
    border: 1px solid var(--outline-strong);
    background: var(--surface);
    min-width: 0;
    height: 44px;
    color: var(--muted);
    border-radius: 8px;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 0 7px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex
}
.text-action svg {
    width: 13px;
    height: 13px
}
.text-action.danger {
    border-color: color-mix(in srgb, var(--danger) 55%, transparent);
    color: var(--danger)
}
.section-divider {
    background: var(--outline);
    flex: 0 0 1px;
    width: 100%;
    height: 1px
}
.dashboard-stage {
    width: 100%;
    min-height: var(--dashboard-height);
    flex: 1 1 var(--dashboard-height);
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    display: flex
}
.measurement-workspace {
    width: 100%;
    height: var(--dashboard-height);
    min-height: var(--dashboard-height);
    flex: 0 0 var(--dashboard-height);
    grid-template-columns: minmax(0,1fr) clamp(68px,19vw,76px);
    gap: clamp(6px,2vw,8px);
    display: grid
}
.counter-stack {
    grid-template-rows: repeat(2,minmax(0,1fr));
    gap: 8px;
    min-width: 0;
    display: grid
}
.counter-section {
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    display: flex
}
.counter-header {
    flex: 0 0 44px;
    align-items: center;
    gap: 6px;
    height: 44px;
    display: flex
}
.counter-header h2 {
    min-width: 0;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    overflow: hidden
}
.counter-header-action {
    justify-content: center;
    align-items: center;
    width: 82px;
    min-width: 82px;
    min-height: 36px;
    display: flex
}
.counter-action {
    border: 1px solid var(--outline-strong);
    background: var(--surface);
    width: 82px;
    min-width: 82px;
    height: 36px;
    color: var(--muted);
    border-radius: 7px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex
}
.counter-action svg {
    width: 14px;
    height: 14px
}
.temperature-action {
    border-color: #2c9a56
}
.temperature-action.active {
    border-color: var(--accent-focus);
    color: var(--accent-text);
    background: var(--accent-soft)
}
.counter-grid {
    flex: 1;
    align-items: stretch;
    gap: 2px;
    min-height: 0;
    display: flex
}
.digit-column {
    flex: 1;
    grid-template-rows: 44px minmax(40px,1fr) 44px;
    gap: 4px;
    min-width: 0;
    display: grid;
    position: relative
}
.decimal-separator {
    width: 8px;
    min-width: 8px;
    color: var(--text);
    pointer-events: none;
    flex: 0 0 8px;
    grid-template-rows: 44px minmax(40px,1fr) 44px;
    font-size: 25px;
    font-weight: 600;
    line-height: 1;
    display: grid
}
.decimal-separator span {
    grid-row: 2;
    place-self: end center;
    padding-bottom: 1px
}
.repeat-button {
    border: 1px solid var(--outline);
    background: var(--surface-control);
    width: 100%;
    min-width: 0;
    color: var(--text-strong);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    border-radius: 6px;
    place-items: center;
    padding: 0;
    display: grid
}
.repeat-button * {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none
}
.repeat-button svg {
    width: 18px;
    height: 18px
}
.repeat-button:active:not(:disabled) {
    background: var(--accent-soft-active);
    transform: translateY(1px)
}
.repeat-button:disabled {
    opacity: .3
}
.digit-column output {
    background: var(--digit-bg);
    min-width: 0;
    color: var(--digit-text);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 8px #16f05b52;
    border: 1px solid #244733;
    border-radius: 5px;
    place-items: center;
    font-family: "DAC Display Digits",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    display: grid
}
.mini-history {
    border: 1px solid var(--outline);
    background: var(--surface-soft);
    border-radius: 8px;
    flex-direction: column;
    min-width: 0;
    padding: 4px;
    display: flex;
    overflow: hidden
}
.mini-history h2 {
    height: 15px;
    color: color-mix(in srgb, var(--muted) 70%, transparent);
    text-align: center;
    flex: 0 0 15px;
    margin: 0 0 2px;
    font-size: 10px;
    font-weight: 500;
    line-height: 12px
}
.mini-history-list {
    border-top: 1px solid var(--outline);
    flex-direction: column;
    flex: 1;
    justify-content: flex-end;
    min-height: 0;
    display: flex;
    position: relative;
    overflow: hidden
}
.mini-history-row {
    border-bottom: 1px solid color-mix(in srgb, var(--outline) 65%, transparent);
    font-variant-numeric: tabular-nums;
    flex: 24px;
    place-items: center;
    width: 100%;
    height: auto;
    min-height: 24px;
    max-height: 26px;
    padding: 0;
    display: grid;
    position: relative
}
.mini-history-row:last-child {
    border-bottom: 0
}
.mini-history-row.latest {
    background: var(--accent-status-background)
}
.mini-history-row.latest:before {
    content: "";
    background: var(--accent-status-marker);
    border-radius: 999px;
    width: 3px;
    height: 14px;
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%)
}
.mini-history-row strong {
    color: var(--accent-text);
    font-size: 11px;
    line-height: 1;
    position: relative
}
.empty-mini {
    height: 24px;
    color: var(--muted);
    text-align: center;
    flex: 0 0 24px;
    place-items: center;
    margin: 0;
    font-size: 10px;
    line-height: 1.35;
    display: grid
}
.result-panel {
    background: linear-gradient(135deg,var(--accent-result-from),var(--accent-result-to));
    color: var(--accent-on-solid);
    border-radius: 8px;
    flex: 0 0 112px;
    align-items: center;
    gap: 10px;
    min-height: 112px;
    padding: 8px 8px 8px 18px;
    display: flex
}
.result-panel.out-of-range {
    --accent-on-solid: #fff;
    --accent-button-text: #a83229;
    --accent-button-surface: #fff1ef;
    --accent-button-surface-active: #ffdad6;
    --accent-button-foreground: #a83229;
    --accent-button-border: #e54d2e;
    background: linear-gradient(135deg,#8f2c25,#cb463b)
}
.result-copy {
    flex-direction: column;
    flex: 1;
    gap: 4px;
    min-width: 0;
    display: flex
}
.result-copy strong {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-family: inherit;
    font-size: clamp(30px,11.6vw,44px);
    font-weight: 800;
    line-height: 1.1
}
.result-panel.out-of-range .result-copy strong {
    font-size: 24px
}
.result-copy span {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3
}
.result-copy small {
    color: var(--accent-on-solid);
    min-height: 14px;
    font-size: 10px;
    line-height: 1.35
}
.result-actions {
    flex: 0 0 80px;
    gap: 7px;
    width: 80px;
    display: grid
}
.result-actions button {
    height: 44px;
    color: var(--accent-button-foreground);
    background: var(--accent-button-surface);
    border: 1px solid color-mix(in srgb,var(--accent-button-border) 72%,transparent);
    border-radius: 7px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 0 9px;
    font-size: 11px;
    font-weight: 600;
    transition: transform .1s ease-out,background-color .14s ease-out;
    display: inline-flex
}
.result-actions button.secondary {
    color: var(--accent-on-solid);
    background: transparent;
    border: 1px solid color-mix(in srgb,var(--accent-on-solid) 65%,transparent)
}
.result-actions button:disabled {
    opacity: .45
}
.offline-indicator {
    z-index: 30;
    top: max(8px, env(safe-area-inset-top));
    color: #fff;
    background: #252a2f;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500;
    transition: transform .18s;
    position: fixed;
    left: 50%;
    transform: translate(-50%,-44px)
}
.offline-indicator.visible {
    transform: translate(-50%)
}
.toast {
    z-index: 80;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    color: #fff;
    opacity: 0;
    pointer-events: none;
    background: #262b31;
    border-radius: 8px;
    max-width: min(420px,100% - 32px);
    padding: 11px 16px;
    font-size: 13px;
    line-height: 1.35;
    transition: opacity .16s,transform .16s;
    position: fixed;
    transform: translate(-50%,20px);
    box-shadow: 0 8px 26px #00000040
}
.toast.visible {
    opacity: 1;
    transform: translate(-50%)
}
.dialog-backdrop {
    z-index: 60;
    background: var(--scrim);
    grid-template-columns: minmax(0,1fr);
    place-items: center;
    padding: 22px;
    display: grid;
    position: fixed;
    inset: 0
}
.dialog-panel {
    border: 1px solid var(--outline);
    background: var(--surface);
    width: min(100%,400px);
    min-width: 0;
    max-height: calc(100dvh - 44px);
    box-shadow: var(--shadow-dialog);
    border-radius: 12px;
    padding: 22px;
    overflow: auto
}
.settings-backdrop {
    padding: calc(max(16px, env(safe-area-inset-top)) + 52px) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    place-items: start center;
    animation: .19s ease-out both settings-scrim-in;
    display: grid
}
.settings-backdrop.is-closing {
    animation: .17s ease-in both settings-scrim-out
}
.settings-dialog {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: blur(30px)saturate(180%);
    backdrop-filter: blur(30px)saturate(180%);
    transform-origin: calc(100% - 30px) 0;
    border: 1px solid #ffffff94;
    border-radius: 24px;
    flex-direction: column;
    width: min(96%,499.2px);
    height: 100%;
    max-height: 820px;
    padding: 0;
    animation: .24s cubic-bezier(.2,.8,.2,1) both settings-panel-in;
    display: flex;
    overflow: hidden;
    box-shadow: 0 24px 72px #0000004d,inset 0 1px #ffffffad
}
.settings-dialog.is-closing {
    pointer-events: none;
    animation: .17s cubic-bezier(.4,0,.8,.2) both settings-panel-out
}
.settings-header {
    z-index: 1;
    flex: none;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 22px 16px;
    display: flex;
    position: relative
}
.settings-header:after {
    content: "";
    pointer-events: none;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--surface) 24%, transparent), transparent);
    height: 10px;
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0
}
.settings-header span {
    color: var(--muted);
    letter-spacing: .025em;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    display: block
}
.settings-dialog .settings-header h2 {
    letter-spacing: -.022em;
    margin: 0;
    font-size: 24px;
    line-height: 1.15
}
.settings-close {
    width: 44px;
    height: 44px;
    color: var(--muted);
    background: 0 0;
    border-radius: 50%;
    flex: 0 0 44px;
    place-items: center;
    margin: -6px -6px 0 0;
    transition: transform .1s ease-out;
    display: grid;
    position: relative
}
.settings-close:before {
    content: "";
    background: color-mix(in srgb, var(--surface-variant) 86%, transparent);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    transition: transform .1s ease-out,background-color .15s;
    position: absolute
}
.settings-close svg {
    z-index: 1;
    stroke-width: 2.4px;
    width: 17px;
    height: 17px;
    position: relative
}
.settings-close:active {
    transform: scale(.94)
}
.settings-close:active:before {
    background: var(--surface-variant);
    transform: scale(.9)
}
.settings-content {
    min-height: 0;
    padding: 4px 22px max(28px, env(safe-area-inset-bottom));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    flex: 1;
    overflow: hidden auto
}
.settings-section {
    margin-top: 18px
}
.settings-section:first-child {
    margin-top: 8px
}
.settings-section h3 {
    color: var(--muted);
    letter-spacing: .045em;
    text-transform: uppercase;
    margin: 0 0 7px 12px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3
}
.settings-group {
    border: 1px solid color-mix(in srgb, var(--outline) 74%, transparent);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    border-radius: 13px;
    overflow: hidden
}
.settings-row {
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 62px;
    padding: 10px 13px;
    display: flex
}
.settings-row+.settings-row {
    border-top: 1px solid color-mix(in srgb, var(--outline) 74%, transparent)
}
.settings-row div {
    min-width: 0
}
.settings-row strong,.settings-row span {
    display: block
}
.settings-row strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3
}
.settings-row span {
    color: var(--muted);
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.35
}
.settings-row output {
    color: #000;
    font-variant-numeric: tabular-nums;
    flex: none;
    font-size: 15px;
    font-weight: 500;
    line-height: 1
}
@keyframes settings-scrim-in {
    0% {
        background: #0f141800
    }
    to {
        background: var(--scrim)
    }
}
@keyframes settings-scrim-out {
    0% {
        background: var(--scrim)
    }
    to {
        background: #0f141800
    }
}
@keyframes settings-panel-in {
    0% {
        opacity: 0;
        -webkit-backdrop-filter: blur(10px)saturate(130%);
        backdrop-filter: blur(10px)saturate(130%);
        transform: translateY(-10px)scale(.94)
    }
    to {
        opacity: 1;
        transform: translateY(0)scale(1)
    }
}
@keyframes settings-panel-out {
    0% {
        opacity: 1;
        transform: translateY(0)scale(1)
    }
    to {
        opacity: 0;
        transform: translateY(-10px)scale(.94)
    }
}
.dialog-panel h2 {
    color: var(--text);
    margin: 0 0 18px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2
}
.dialog-panel form {
    margin: 0
}
.field-label {
    color: var(--muted);
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 500;
    display: block
}
.dialog-panel input {
    border: 1px solid var(--outline-strong);
    background: var(--surface);
    width: 100%;
    height: 48px;
    color: var(--text);
    border-radius: 7px;
    padding: 0 12px;
    font-size: 16px
}
.dialog-error {
    min-height: 18px;
    color: var(--danger);
    margin: 6px 0 12px;
    font-size: 12px;
    line-height: 1.4
}
.dialog-message {
    color: var(--text);
    margin: -3px 0 22px;
    font-size: 15px;
    line-height: 1.55
}
.dialog-actions {
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    display: flex
}
.primary-button,.quiet-button,.danger-button,.outline-button,.danger-outline-button {
    border-radius: 7px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 15px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex
}
.primary-button {
    background: var(--accent-action,#2980b9);
    color: var(--accent-on-solid,#fff)
}
.quiet-button {
    background: var(--surface-variant);
    color: var(--text)
}
.danger-button {
    background: var(--danger);
    color: #fff
}
.outline-button {
    border: 1px solid var(--accent-text,var(--accent-action,#2980b9));
    background: var(--surface);
    color: var(--accent-text,var(--accent-action,#2980b9))
}
.danger-outline-button {
    border: 1px solid var(--danger);
    background: var(--surface);
    color: var(--danger)
}
.primary-button:disabled,.outline-button:disabled,.danger-outline-button:disabled {
    opacity: .38
}
.temperature-dialog {
    width: min(100%,420px)
}
.temperature-stepper {
    grid-template-columns: 64px minmax(0,1fr) 64px;
    gap: 10px;
    width: 100%;
    height: 72px;
    display: grid
}
.temperature-step-button {
    border-color: var(--outline-strong);
    background: var(--surface-control);
    align-self: center;
    height: 64px
}
.temperature-input-wrap {
    align-items: center;
    min-width: 0;
    display: flex;
    position: relative
}
.temperature-input-wrap input {
    height: 64px;
    color: var(--text);
    text-align: center;
    font-variant-numeric: tabular-nums;
    appearance: textfield;
    padding: 0 42px 0 12px;
    font-size: 27px;
    font-weight: 700
}
.temperature-input-wrap input::-webkit-outer-spin-button {
    appearance: none
}
.temperature-input-wrap input::-webkit-inner-spin-button {
    appearance: none
}
.temperature-input-wrap span:last-child {
    color: var(--muted);
    font-size: 17px;
    font-weight: 500;
    position: absolute;
    right: 16px
}
.room-temperature-button {
    border: 1px solid var(--outline-strong);
    background: var(--surface);
    width: 100%;
    min-height: 48px;
    color: var(--text-strong);
    border-radius: 8px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600
}
.temperature-dialog-actions output {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    margin-right: auto;
    font-size: 14px
}
.history-dialog {
    flex-direction: column;
    width: min(100%,620px);
    height: min(76vh,650px);
    padding: 18px;
    display: flex;
    overflow: visible
}
.history-header {
    border-bottom: 1px solid var(--outline);
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    display: flex
}
.history-header>div:first-child {
    flex: 1;
    min-width: 0
}
.history-header h2 {
    margin: 0;
    font-size: 20px
}
.history-header p {
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 4px 0 0;
    font-size: 12px;
    overflow: hidden
}
.export-menu-wrap {
    position: relative
}
.export-menu-wrap .outline-button {
    min-height: 44px;
    padding: 0 11px
}
.export-menu {
    z-index: 2;
    border: 1px solid var(--outline);
    background: var(--surface);
    border-radius: 8px;
    min-width: 142px;
    padding: 5px;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    box-shadow: 0 10px 28px #0000002e
}
.export-menu button {
    width: 100%;
    height: 40px;
    color: var(--text);
    text-align: left;
    background: 0 0;
    border-radius: 6px;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 500;
    display: flex
}
.export-menu button:hover {
    background: var(--surface-variant)
}
.history-list {
    overscroll-behavior: contain;
    flex: 1;
    min-height: 0;
    overflow-y: auto
}
.history-empty {
    height: 100%;
    color: var(--muted);
    place-items: center;
    margin: 0;
    font-size: 14px;
    display: grid
}
.history-row {
    border-bottom: 1px solid var(--outline);
    align-items: center;
    gap: 10px;
    padding: 11px 2px;
    display: flex
}
.history-row>div:first-child {
    flex-direction: column;
    flex: 1;
    gap: 3px;
    min-width: 0;
    display: flex
}
.history-row time {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.2
}
.history-row strong {
    color: var(--accent-text);
    font-size: 16px;
    line-height: 1.25
}
.history-row span {
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-ui);
    font-size: 11px;
    line-height: 1.3;
    overflow: hidden
}
.history-row-actions {
    gap: 6px;
    display: flex
}
.compact {
    min-height: 44px;
    padding: 0 10px;
    font-size: 12px
}
.icon-only {
    width: 44px;
    padding: 0
}
.history-footer {
    border-top: 1px solid var(--outline);
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 12px;
    display: grid
}
.sr-only {
    clip: rect(0, 0, 0, 0)!important;
    white-space: nowrap!important;
    border: 0!important;
    width: 1px!important;
    height: 1px!important;
    margin: -1px!important;
    padding: 0!important;
    position: absolute!important;
    overflow: hidden!important
}
@media (width<=380px) {
    .app-shell {
        padding-top: max(10px, env(safe-area-inset-top));
        padding-left: 6px;
        padding-right: 6px;
        padding-bottom: max(30px, env(safe-area-inset-bottom));
        gap: 4px
    }
    .profile-strip-wrap,.profile-strip,.profile-toolbar {
        flex-basis: 44px;
        height: 44px
    }
    .profile-actions {
        flex-basis: 132px;
        width: 132px
    }
    .text-action {
        padding: 0 5px;
        font-size: 10px
    }
    .measurement-workspace {
        min-height: var(--dashboard-height);
        flex-basis: var(--dashboard-height);
        grid-template-columns: minmax(0,1fr) 70px;
        gap: 6px
    }
    .counter-stack {
        gap: 6px
    }
    .counter-header {
        flex-basis: 40px;
        height: 40px
    }
    .counter-grid {
        gap: 2px
    }
    .counter-header h2 {
        font-size: 12px
    }
    .counter-action {
        padding: 0 6px;
        font-size: 10px
    }
    .counter-action svg {
        display: block
    }
    .result-panel {
        padding: 6px 8px 6px 12px
    }
    .result-copy strong {
        font-size: clamp(30px,11.6vw,44px)
    }
    .result-actions {
        flex-basis: 76px;
        width: 76px
    }
    .dialog-backdrop {
        padding: 14px
    }
    .dialog-panel {
        padding: 18px
    }
    .settings-backdrop {
        padding: calc(max(10px, env(safe-area-inset-top)) + 52px) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left))
    }
    .settings-dialog {
        padding: 0
    }
    .history-dialog {
        height: min(82vh,650px);
        padding: 14px
    }
    .history-row {
        align-items: center
    }
    .history-row-actions {
        flex-direction: row
    }
}
@media (width>=430px) and (width<=540px) and (height>=800px) and (aspect-ratio<=3/5) {
    .app-shell {
        --dashboard-height: clamp(440px, min(48dvh, 104vw), 520px);
        padding-top: max(22px, env(safe-area-inset-top));
        padding-bottom: max(44px, env(safe-area-inset-bottom))
    }
    .settings-backdrop {
        padding-top: calc(max(22px, env(safe-area-inset-top)) + 60px)
    }
    .top-controls,.mode-tabs {
        flex-basis: 52px;
        height: 52px
    }
    .settings-button {
        flex-basis: 52px;
        width: 52px;
        height: 52px
    }
    .profile-strip-wrap,.profile-strip {
        flex-basis: 56px;
        height: 56px
    }
    .profile-chip,.profile-chip-placeholder,.add-profile-button {
        height: 52px
    }
    .add-profile-button {
        flex-basis: 52px;
        width: 52px
    }
    .profile-toolbar {
        flex-basis: 56px;
        height: 56px
    }
    .text-action {
        height: 48px
    }
    .counter-header {
        flex-basis: 52px;
        height: 52px
    }
    .measurement-workspace {
        align-items: stretch
    }
    .counter-stack {
        gap: 14px
    }
    .mini-history {
        align-self: stretch;
        height: 100%
    }
    .digit-column,.decimal-separator {
        grid-template-rows: 56px minmax(48px,1fr) 56px
    }
    .result-panel {
        flex-basis: 136px;
        min-height: 136px
    }
    .result-copy strong {
        font-size: 50px
    }
    .result-actions button {
        height: 48px
    }
}
@media (width>=680px) {
    #root {
        place-items: center;
        min-height: 100dvh;
        display: grid
    }
    .app-shell {
        border-left: 1px solid var(--outline);
        border-right: 1px solid var(--outline);
        min-height: min(100dvh,820px);
        margin-top: 0;
        margin-bottom: 0
    }
    .settings-backdrop {
        padding-top: calc(max(0px, (100dvh - 820px) / 2) + max(16px, env(safe-area-inset-top)) + 52px)
    }
}
@media (prefers-color-scheme:dark) {
    :root {
        --page: #151719;
        --surface: #1c1f22;
        --surface-soft: #25292d;
        --surface-variant: #30353a;
        --surface-control: #2d3236;
        --text: #eceff1;
        --text-strong: #e7ebee;
        --muted: #a8b0b6;
        --outline: #3a4045;
        --outline-strong: #667078;
        --danger: #ef6b61;
        --digit-bg: #07180e;
        --digit-text: #32ef69;
        --scrim: #000000b8
    }
    .profile-chip {
        color: #d0d5d9;
        background: #3a4045;
        border-color: #4b5258
    }
    .profile-chip.active {
        background: var(--accent-selected);
        color: var(--accent-on-solid);
        border-color: #0000
    }
    .mode-tabs button.active,.result-panel {
        color: var(--accent-on-solid)
    }
    .toast {
        color: #1d2023;
        background: #eceff1
    }
    .settings-row output {
        color: #fff
    }
}
@media (prefers-reduced-motion:reduce) {
    *,:before,:after {
        scroll-behavior: auto!important;
        transition-duration: .01ms!important;
        animation-duration: .01ms!important;
        animation-iteration-count: 1!important
    }
    body:has(.settings-backdrop) .app-shell {
        filter: none;
        transform: none
    }
}
@media (prefers-reduced-transparency:reduce) {
    .settings-dialog {
        border-color: var(--outline);
        background: var(--surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none
    }
    .settings-group {
        background: var(--surface-soft)
    }
}
@media (prefers-contrast:more) {
    .settings-dialog {
        border: 2px solid var(--text);
        background: var(--surface)
    }
    .settings-group,.settings-button {
        border-color: var(--text)
    }
}
/* Consolidated layout and help-view rules. */
.settings-help-row {
    width: 100%;
    text-align: left;
    background: transparent;
    cursor: pointer
}
.settings-help-row:hover {
    background: var(--surface-variant)
}
.settings-help-row:after {
    content: "›";
    color: var(--muted);
    font-size: 24px
}
html {
    scrollbar-gutter: stable
}
body:has(.settings-backdrop) .app-shell,body:has(.settings-backdrop.is-closing) .app-shell {
    filter: none;
    transform: none;
    transition: none
}
.settings-dialog.help-dialog {
    height: auto;
    max-height: 100%;
    background: color-mix(in srgb,var(--surface) 96%,transparent)
}
.help-dialog .settings-header {
    flex-shrink: 0;
    align-items: center;
    padding: 18px 20px 14px;
    border-bottom: 1px solid color-mix(in srgb,var(--outline) 72%,transparent)
}
.help-dialog .settings-header:after {
    display: none
}
.settings-dialog.help-dialog .settings-header h2 {
    font-size: 22px;
    line-height: 1.2
}
.help-dialog .settings-close {
    margin: 0 -4px 0 0
}
.help-dialog .settings-content {
    display: block;
    flex: 0 1 auto;
    overflow: hidden auto;
    padding: 16px 18px max(18px,env(safe-area-inset-bottom))
}
.help-content {
    display: flex;
    flex-direction: column;
    gap: 10px
}
.help-dialog .help-content>a {
    display: block;
    flex: none;
    min-height: 0;
    background: #fff;
    border: 1px solid color-mix(in srgb,var(--outline) 68%,transparent);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 28px #00000012
}
.help-dialog .help-content img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    background: #fff;
    border-radius: 0
}
.help-dialog .help-content>p {
    color: var(--muted);
    text-align: center;
    margin: 0;
    padding: 0 8px;
    font-size: 12px;
    line-height: 1.4
}
/* Theme-aware result action and settings navigation. */
.app-shell {
    --accent-button-surface: var(--accent-soft);
    --accent-button-surface-active: var(--accent-soft-active);
    --accent-button-foreground: var(--accent-button-text);
    --accent-button-border: var(--accent-focus)

}
.result-actions button:not(.secondary):active:not(:disabled) {
    background: var(--accent-button-surface-active);
    transform: scale(.97)
}
.settings-heading {
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    display: flex
}
.settings-back {
    min-height: 30px;
    color: var(--accent-text);
    background: transparent;
    border-radius: 8px;
    align-items: center;
    gap: 2px;
    margin: -5px 0 2px -7px;
    padding: 0 7px 0 3px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    transition: transform .1s ease-out,background-color .14s ease-out
}
.settings-back>svg {
    color: inherit;
    flex: none;
    width: 16px;
    height: 16px;
    stroke-width: 2.2px;
    margin-left: 1px
}
.settings-back b {
    font: inherit
}
.settings-back:active {
    background: var(--accent-soft);
    transform: scale(.96)
}
.settings-header.detail {
    padding-top: 16px
}
/* Radix Step 12 keeps text legible on the Step 3 button surface. */
@media (prefers-color-scheme:light) {
    .app-shell[data-palette="default"] {
        --accent-button-foreground: var(--text-strong)
    }
    .app-shell[data-palette="tomato"] {
        --accent-button-foreground: #5c271f
    }
    .app-shell[data-palette="red"] {
        --accent-button-foreground: #641723
    }
    .app-shell[data-palette="ruby"] {
        --accent-button-foreground: #64172b
    }
    .app-shell[data-palette="crimson"] {
        --accent-button-foreground: #621639
    }
    .app-shell[data-palette="pink"] {
        --accent-button-foreground: #651249
    }
    .app-shell[data-palette="plum"] {
        --accent-button-foreground: #53195d
    }
    .app-shell[data-palette="purple"] {
        --accent-button-foreground: #402060
    }
    .app-shell[data-palette="violet"] {
        --accent-button-foreground: #2f265f
    }
    .app-shell[data-palette="iris"] {
        --accent-button-foreground: #272962
    }
    .app-shell[data-palette="indigo"] {
        --accent-button-foreground: #1f2d5c
    }
    .app-shell[data-palette="blue"] {
        --accent-button-foreground: #113264
    }
    .app-shell[data-palette="cyan"] {
        --accent-button-foreground: #0d3c48
    }
    .app-shell[data-palette="teal"] {
        --accent-button-foreground: #0d3d38
    }
    .app-shell[data-palette="jade"] {
        --accent-button-foreground: #1d3b31
    }
    .app-shell[data-palette="green"] {
        --accent-button-foreground: #193b2d
    }
    .app-shell[data-palette="grass"] {
        --accent-button-foreground: #203c25
    }
    .app-shell[data-palette="brown"] {
        --accent-button-foreground: #3e332e
    }
    .app-shell[data-palette="bronze"] {
        --accent-button-foreground: #43302b
    }
    .app-shell[data-palette="gold"] {
        --accent-button-foreground: #3b352b
    }
    .app-shell[data-palette="lime"] {
        --accent-button-foreground: #37401c
    }
    .app-shell[data-palette="mint"] {
        --accent-button-foreground: #16433c
    }
    .app-shell[data-palette="sky"] {
        --accent-button-foreground: #1d3e56
    }
    .app-shell[data-palette="orange"] {
        --accent-button-foreground: #582d1d
    }
    .app-shell[data-palette="amber"] {
        --accent-button-foreground: #4f3422
    }
    .app-shell[data-palette="yellow"] {
        --accent-button-foreground: #473b1f
    }
}
@media (prefers-color-scheme:dark) {
    .app-shell {
        --accent-button-foreground: var(--accent-text)
    }
    .app-shell[data-palette="default"] {
        --accent-button-foreground: var(--accent-on-solid)
    }
    .result-panel.out-of-range {
        --accent-button-surface: #451e17;
        --accent-button-surface-active: #5e2a21;
        --accent-button-foreground: #ff977d;
        --accent-button-border: #ac4d39
  
    }
}
/* Curated mode palettes use Radix Colors 3.0 role scales. */
.app-shell {
    --accent-status-background: var(--accent-2, var(--accent-soft));
    --accent-status-marker: var(--accent-9, var(--accent-action));
    --accent-action: color-mix(in srgb, var(--primary) 92%, #000);
    --accent-action-strong: var(--primary-deep);
    --accent-result-from: var(--primary-deep);
    --accent-result-to: color-mix(in srgb, var(--primary) 92%, #000);
    --accent-selected: var(--profile-active);
    --accent-text: var(--primary-deep);
    --accent-focus: var(--primary);
    --accent-soft: color-mix(in srgb, var(--primary) 7%, var(--surface));
    --accent-soft-active: color-mix(in srgb, var(--primary) 13%, var(--surface-control));
    --accent-drag: var(--profile-drag);
    --accent-drag-text: #262b31;
    --accent-button-text: var(--primary-deep);
    --accent-on-solid: #fff;
}
.app-shell[data-palette="blue"] {
    --accent-action: #0d74ce;
    --accent-action-strong: color-mix(in srgb,#0d74ce 86%,#000);
    --accent-result-from: #0d74ce;
    --accent-result-to: color-mix(in srgb,#0d74ce 82%,#000);
    --accent-selected: #0d74ce;
    --accent-text: #0d74ce;
    --accent-focus: #5eb1ef;
    --accent-soft: #e6f4fe;
    --accent-soft-active: #c2e5ff;
    --accent-drag: #c2e5ff;
    --accent-drag-text: #243746;
    --accent-button-text: #0d74ce;
    --accent-on-solid: #fff
}
.app-shell[data-palette="indigo"] {
    --accent-action: #3a5bc7;
    --accent-action-strong: color-mix(in srgb,#3a5bc7 86%,#000);
    --accent-result-from: #3a5bc7;
    --accent-result-to: color-mix(in srgb,#3a5bc7 82%,#000);
    --accent-selected: #3a5bc7;
    --accent-text: #3a5bc7;
    --accent-focus: #8da4ef;
    --accent-soft: #edf2fe;
    --accent-soft-active: #d2deff;
    --accent-drag: #d2deff;
    --accent-drag-text: #243746;
    --accent-button-text: #3a5bc7;
    --accent-on-solid: #fff
}
.app-shell[data-palette="violet"] {
    --accent-action: #6550b9;
    --accent-action-strong: color-mix(in srgb,#6550b9 86%,#000);
    --accent-result-from: #6550b9;
    --accent-result-to: color-mix(in srgb,#6550b9 82%,#000);
    --accent-selected: #6550b9;
    --accent-text: #6550b9;
    --accent-focus: #aa99ec;
    --accent-soft: #f4f0fe;
    --accent-soft-active: #e1d9ff;
    --accent-drag: #e1d9ff;
    --accent-drag-text: #243746;
    --accent-button-text: #6550b9;
    --accent-on-solid: #fff
}
.app-shell[data-palette="purple"] {
    --accent-action: #8145b5;
    --accent-action-strong: color-mix(in srgb,#8145b5 86%,#000);
    --accent-result-from: #8145b5;
    --accent-result-to: color-mix(in srgb,#8145b5 82%,#000);
    --accent-selected: #8145b5;
    --accent-text: #8145b5;
    --accent-focus: #be93e4;
    --accent-soft: #f7edfe;
    --accent-soft-active: #ead5f9;
    --accent-drag: #ead5f9;
    --accent-drag-text: #243746;
    --accent-button-text: #8145b5;
    --accent-on-solid: #fff
}
.app-shell[data-palette="ruby"] {
    --accent-action: #ca244d;
    --accent-action-strong: color-mix(in srgb,#ca244d 86%,#000);
    --accent-result-from: #ca244d;
    --accent-result-to: color-mix(in srgb,#ca244d 82%,#000);
    --accent-selected: #ca244d;
    --accent-text: #ca244d;
    --accent-focus: #e592a3;
    --accent-soft: #feeaed;
    --accent-soft-active: #ffced6;
    --accent-drag: #ffced6;
    --accent-drag-text: #243746;
    --accent-button-text: #ca244d;
    --accent-on-solid: #fff
}
.app-shell[data-palette="orange"] {
    --accent-action: #cc4e00;
    --accent-action-strong: color-mix(in srgb,#cc4e00 86%,#000);
    --accent-result-from: #cc4e00;
    --accent-result-to: color-mix(in srgb,#cc4e00 82%,#000);
    --accent-selected: #cc4e00;
    --accent-text: #cc4e00;
    --accent-focus: #ec9455;
    --accent-soft: #ffefd6;
    --accent-soft-active: #ffd19a;
    --accent-drag: #ffd19a;
    --accent-drag-text: #243746;
    --accent-button-text: #cc4e00;
    --accent-on-solid: #fff
}
.app-shell[data-palette="teal"] {
    --accent-action: #008573;
    --accent-action-strong: color-mix(in srgb,#008573 86%,#000);
    --accent-result-from: #008573;
    --accent-result-to: color-mix(in srgb,#008573 82%,#000);
    --accent-selected: #008573;
    --accent-text: #008573;
    --accent-focus: #53b9ab;
    --accent-soft: #e0f8f3;
    --accent-soft-active: #b8eae0;
    --accent-drag: #b8eae0;
    --accent-drag-text: #243746;
    --accent-button-text: #008573;
    --accent-on-solid: #fff
}
.app-shell[data-palette="green"] {
    --accent-action: #218358;
    --accent-action-strong: color-mix(in srgb,#218358 86%,#000);
    --accent-result-from: #218358;
    --accent-result-to: color-mix(in srgb,#218358 82%,#000);
    --accent-selected: #218358;
    --accent-text: #218358;
    --accent-focus: #5bb98b;
    --accent-soft: #e6f6eb;
    --accent-soft-active: #c4e8d1;
    --accent-drag: #c4e8d1;
    --accent-drag-text: #243746;
    --accent-button-text: #218358;
    --accent-on-solid: #fff
}
@media (prefers-color-scheme:dark) {
    .app-shell[data-palette="blue"] {
        --accent-action: #2870bd;
        --accent-action-strong: color-mix(in srgb,#2870bd 86%,#000);
        --accent-result-from: #2870bd;
        --accent-result-to: color-mix(in srgb,#2870bd 82%,#000);
        --accent-selected: #2870bd;
        --accent-text: #70b8ff;
        --accent-focus: #2870bd;
        --accent-soft: #0d2847;
        --accent-soft-active: #004074;
        --accent-drag: #004074;
        --accent-drag-text: #eceff1;
        --accent-button-text: #0d74ce;
        --accent-on-solid: #fff
    }
    .app-shell[data-palette="indigo"] {
        --accent-action: #435db1;
        --accent-action-strong: color-mix(in srgb,#435db1 86%,#000);
        --accent-result-from: #435db1;
        --accent-result-to: color-mix(in srgb,#435db1 82%,#000);
        --accent-selected: #435db1;
        --accent-text: #9eb1ff;
        --accent-focus: #435db1;
        --accent-soft: #182449;
        --accent-soft-active: #253974;
        --accent-drag: #253974;
        --accent-drag-text: #eceff1;
        --accent-button-text: #3a5bc7;
        --accent-on-solid: #fff
    }
    .app-shell[data-palette="violet"] {
        --accent-action: #6958ad;
        --accent-action-strong: color-mix(in srgb,#6958ad 86%,#000);
        --accent-result-from: #6958ad;
        --accent-result-to: color-mix(in srgb,#6958ad 82%,#000);
        --accent-selected: #6958ad;
        --accent-text: #baa7ff;
        --accent-focus: #6958ad;
        --accent-soft: #291f43;
        --accent-soft-active: #3c2e69;
        --accent-drag: #3c2e69;
        --accent-drag-text: #eceff1;
        --accent-button-text: #6550b9;
        --accent-on-solid: #fff
    }
    .app-shell[data-palette="purple"] {
        --accent-action: #8457aa;
        --accent-action-strong: color-mix(in srgb,#8457aa 86%,#000);
        --accent-result-from: #8457aa;
        --accent-result-to: color-mix(in srgb,#8457aa 82%,#000);
        --accent-selected: #8457aa;
        --accent-text: #d19dff;
        --accent-focus: #8457aa;
        --accent-soft: #301c3b;
        --accent-soft-active: #48295c;
        --accent-drag: #48295c;
        --accent-drag-text: #eceff1;
        --accent-button-text: #8145b5;
        --accent-on-solid: #fff
    }
    .app-shell[data-palette="ruby"] {
        --accent-action: #b3445a;
        --accent-action-strong: color-mix(in srgb,#b3445a 86%,#000);
        --accent-result-from: #b3445a;
        --accent-result-to: color-mix(in srgb,#b3445a 82%,#000);
        --accent-selected: #b3445a;
        --accent-text: #ff949d;
        --accent-focus: #b3445a;
        --accent-soft: #3a141e;
        --accent-soft-active: #5e1a2e;
        --accent-drag: #5e1a2e;
        --accent-drag-text: #eceff1;
        --accent-button-text: #ca244d;
        --accent-on-solid: #fff
    }
    .app-shell[data-palette="orange"] {
        --accent-action: #a35829;
        --accent-action-strong: color-mix(in srgb,#a35829 86%,#000);
        --accent-result-from: #a35829;
        --accent-result-to: color-mix(in srgb,#a35829 82%,#000);
        --accent-selected: #a35829;
        --accent-text: #ffa057;
        --accent-focus: #a35829;
        --accent-soft: #331e0b;
        --accent-soft-active: #562800;
        --accent-drag: #562800;
        --accent-drag-text: #eceff1;
        --accent-button-text: #cc4e00;
        --accent-on-solid: #fff
    }
    .app-shell[data-palette="teal"] {
        --accent-action: #207e73;
        --accent-action-strong: color-mix(in srgb,#207e73 86%,#000);
        --accent-result-from: #207e73;
        --accent-result-to: color-mix(in srgb,#207e73 82%,#000);
        --accent-selected: #207e73;
        --accent-text: #0bd8b6;
        --accent-focus: #207e73;
        --accent-soft: #0d2d2a;
        --accent-soft-active: #084843;
        --accent-drag: #084843;
        --accent-drag-text: #eceff1;
        --accent-button-text: #008573;
        --accent-on-solid: #fff
    }
    .app-shell[data-palette="green"] {
        --accent-action: #2f7c57;
        --accent-action-strong: color-mix(in srgb,#2f7c57 86%,#000);
        --accent-result-from: #2f7c57;
        --accent-result-to: color-mix(in srgb,#2f7c57 82%,#000);
        --accent-selected: #2f7c57;
        --accent-text: #3dd68c;
        --accent-focus: #2f7c57;
        --accent-soft: #132d21;
        --accent-soft-active: #174933;
        --accent-drag: #174933;
        --accent-drag-text: #eceff1;
        --accent-button-text: #218358;
        --accent-on-solid: #fff
    }
}
.theme-swatch[data-palette="default"][data-mode="diamond"] {
    --swatch-light: #2980b9;
    --swatch-dark: #3498db
}
.theme-swatch[data-palette="default"][data-mode="ruby"] {
    --swatch-light: #d84336;
    --swatch-dark: #eb5a4c
}
.theme-swatch[data-palette="blue"] {
    --swatch-light: #0d74ce;
    --swatch-dark: #2870bd
}
.theme-swatch[data-palette="indigo"] {
    --swatch-light: #3a5bc7;
    --swatch-dark: #435db1
}
.theme-swatch[data-palette="violet"] {
    --swatch-light: #6550b9;
    --swatch-dark: #6958ad
}
.theme-swatch[data-palette="purple"] {
    --swatch-light: #8145b5;
    --swatch-dark: #8457aa
}
.theme-swatch[data-palette="ruby"] {
    --swatch-light: #ca244d;
    --swatch-dark: #b3445a
}
.theme-swatch[data-palette="orange"] {
    --swatch-light: #cc4e00;
    --swatch-dark: #a35829
}
.theme-swatch[data-palette="teal"] {
    --swatch-light: #008573;
    --swatch-dark: #207e73
}
.theme-swatch[data-palette="green"] {
    --swatch-light: #218358;
    --swatch-dark: #2f7c57
}
.settings-theme-row,.settings-reset-row {
    width: 100%;
    text-align: left;
    background: transparent;
    cursor: pointer
}
.settings-theme-row:hover,.settings-reset-row:hover {
    background: var(--surface-variant)
}
.settings-theme-row:active,.settings-reset-row:active {
    background: color-mix(in srgb,var(--surface-variant) 82%,var(--surface))
}
.settings-reset-row:disabled {
    cursor: default;
    opacity: .45;
    background: transparent
}
.theme-row-value {
    display: flex!important;
    align-items: center;
    gap: 9px;
    flex: none
}
.theme-row-value .settings-chevron {
    color: var(--muted);
    margin: 0;
    font-size: 24px;
    line-height: 1
}
.theme-swatch {
    --swatch-light: #2980b9;
    --swatch-dark: #3498db;
    width: 28px;
    height: 28px;
    display: block!important;
    flex: none;
    margin: 0!important;
    border: 1px solid color-mix(in srgb,var(--outline-strong) 72%,transparent);
    border-radius: 50%;
    background: linear-gradient(135deg,var(--swatch-light) 0 48%,var(--swatch-dark) 52% 100%);
    box-shadow: inset 0 0 0 1px #ffffff42
}
.theme-picker {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0 8px
}
.theme-picker-intro {
    color: var(--muted);
    margin: 0;
    font-size: 13px;
    line-height: 1.45
}
.theme-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 9px
}
.theme-option {
    position: relative;
    min-width: 0;
    min-height: 82px;
    padding: 9px 5px 8px;
    border: 1px solid color-mix(in srgb,var(--outline) 82%,transparent);
    border-radius: 13px;
    background: color-mix(in srgb,var(--surface) 74%,transparent);
    color: var(--text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform .1s ease-out,border-color .15s,background-color .15s,box-shadow .15s
}
.theme-option:hover {
    background: var(--surface-soft);
    border-color: var(--outline-strong)
}
.theme-option:active {
    transform: scale(.97)
}
.theme-option.selected {
    border-color: var(--text-strong);
    background: var(--surface-soft);
    box-shadow: 0 0 0 1px var(--text-strong)
}
.theme-option>span:not(.theme-swatch):not(.theme-option-check) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap
}
.theme-option-swatch {
    width: 34px;
    height: 34px
}
.theme-option-check {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 18px;
    height: 18px!important;
    margin: 0!important;
    border-radius: 50%;
    background: var(--text-strong);
    color: var(--surface)!important;
    display: grid!important;
    place-items: center;
    font-size: 12px!important;
    font-weight: 700!important;
    line-height: 1!important
}
@media (min-width:430px) {
    .theme-grid {
        grid-template-columns: repeat(4,minmax(0,1fr))
    }
}
@media (prefers-reduced-motion:reduce) {
    .theme-option {
        transition: none
    }
}
/* Radix accent palette options: Tomato through Yellow */
.app-shell[data-palette="tomato"] {
    --accent-action: #d13415;
    --accent-action-strong: color-mix(in srgb,#d13415 86%,#000);
    --accent-result-from: #d13415;
    --accent-result-to: color-mix(in srgb,#d13415 82%,#000);
    --accent-selected: #d13415;
    --accent-text: #d13415;
    --accent-focus: #f38d7a;
    --accent-soft: #ffebe7;
    --accent-soft-active: #ffccc2;
    --accent-drag: #ffccc2;
    --accent-drag-text: #243746;
    --accent-button-text: #d13415;
    --accent-on-solid: #fff
}
.app-shell[data-palette="red"] {
    --accent-action: #ce2c31;
    --accent-action-strong: color-mix(in srgb,#ce2c31 86%,#000);
    --accent-result-from: #ce2c31;
    --accent-result-to: color-mix(in srgb,#ce2c31 82%,#000);
    --accent-selected: #ce2c31;
    --accent-text: #ce2c31;
    --accent-focus: #eb9091;
    --accent-soft: #ffebec;
    --accent-soft-active: #ffcdce;
    --accent-drag: #ffcdce;
    --accent-drag-text: #243746;
    --accent-button-text: #ce2c31;
    --accent-on-solid: #fff
}
.app-shell[data-palette="crimson"] {
    --accent-action: #cb1d63;
    --accent-action-strong: color-mix(in srgb,#cb1d63 86%,#000);
    --accent-result-from: #cb1d63;
    --accent-result-to: color-mix(in srgb,#cb1d63 82%,#000);
    --accent-selected: #cb1d63;
    --accent-text: #cb1d63;
    --accent-focus: #e68fac;
    --accent-soft: #ffe8f0;
    --accent-soft-active: #fac5d5;
    --accent-drag: #fac5d5;
    --accent-drag-text: #243746;
    --accent-button-text: #cb1d63;
    --accent-on-solid: #fff
}
.app-shell[data-palette="pink"] {
    --accent-action: #c2298a;
    --accent-action-strong: color-mix(in srgb,#c2298a 86%,#000);
    --accent-result-from: #c2298a;
    --accent-result-to: color-mix(in srgb,#c2298a 82%,#000);
    --accent-selected: #c2298a;
    --accent-text: #c2298a;
    --accent-focus: #df8dba;
    --accent-soft: #ffe9f4;
    --accent-soft-active: #f3c7e4;
    --accent-drag: #f3c7e4;
    --accent-drag-text: #243746;
    --accent-button-text: #c2298a;
    --accent-on-solid: #fff
}
.app-shell[data-palette="plum"] {
    --accent-action: #953ea3;
    --accent-action-strong: color-mix(in srgb,#953ea3 86%,#000);
    --accent-result-from: #953ea3;
    --accent-result-to: color-mix(in srgb,#953ea3 82%,#000);
    --accent-selected: #953ea3;
    --accent-text: #953ea3;
    --accent-focus: #d495d9;
    --accent-soft: #fceffc;
    --accent-soft-active: #f3d9f4;
    --accent-drag: #f3d9f4;
    --accent-drag-text: #243746;
    --accent-button-text: #953ea3;
    --accent-on-solid: #fff
}
.app-shell[data-palette="iris"] {
    --accent-action: #5753c6;
    --accent-action-strong: color-mix(in srgb,#5753c6 86%,#000);
    --accent-result-from: #5753c6;
    --accent-result-to: color-mix(in srgb,#5753c6 82%,#000);
    --accent-selected: #5753c6;
    --accent-text: #5753c6;
    --accent-focus: #9b9de4;
    --accent-soft: #efefff;
    --accent-soft-active: #dadafe;
    --accent-drag: #dadafe;
    --accent-drag-text: #243746;
    --accent-button-text: #5753c6;
    --accent-on-solid: #fff
}
.app-shell[data-palette="cyan"] {
    --accent-action: #107d98;
    --accent-action-strong: color-mix(in srgb,#107d98 86%,#000);
    --accent-result-from: #107d98;
    --accent-result-to: color-mix(in srgb,#107d98 82%,#000);
    --accent-selected: #107d98;
    --accent-text: #107d98;
    --accent-focus: #3db9cf;
    --accent-soft: #d7f9ff;
    --accent-soft-active: #afe9f5;
    --accent-drag: #afe9f5;
    --accent-drag-text: #243746;
    --accent-button-text: #107d98;
    --accent-on-solid: #fff
}
.app-shell[data-palette="jade"] {
    --accent-action: #208368;
    --accent-action-strong: color-mix(in srgb,#208368 86%,#000);
    --accent-result-from: #208368;
    --accent-result-to: color-mix(in srgb,#208368 82%,#000);
    --accent-selected: #208368;
    --accent-text: #208368;
    --accent-focus: #56b7a7;
    --accent-soft: #d2f7ef;
    --accent-soft-active: #a2e8d8;
    --accent-drag: #a2e8d8;
    --accent-drag-text: #243746;
    --accent-button-text: #208368;
    --accent-on-solid: #fff
}
.app-shell[data-palette="grass"] {
    --accent-action: #2a7e3b;
    --accent-action-strong: color-mix(in srgb,#2a7e3b 86%,#000);
    --accent-result-from: #2a7e3b;
    --accent-result-to: color-mix(in srgb,#2a7e3b 82%,#000);
    --accent-selected: #2a7e3b;
    --accent-text: #2a7e3b;
    --accent-focus: #8ec78d;
    --accent-soft: #e4f7e4;
    --accent-soft-active: #c7eac7;
    --accent-drag: #c7eac7;
    --accent-drag-text: #243746;
    --accent-button-text: #2a7e3b;
    --accent-on-solid: #fff
}
.app-shell[data-palette="gold"] {
    --accent-action: #71624b;
    --accent-action-strong: color-mix(in srgb,#71624b 86%,#000);
    --accent-result-from: #71624b;
    --accent-result-to: color-mix(in srgb,#71624b 82%,#000);
    --accent-selected: #71624b;
    --accent-text: #71624b;
    --accent-focus: #b9a98d;
    --accent-soft: #f2f0e7;
    --accent-soft-active: #e2ddce;
    --accent-drag: #e2ddce;
    --accent-drag-text: #243746;
    --accent-button-text: #71624b;
    --accent-on-solid: #fff
}
.app-shell[data-palette="bronze"] {
    --accent-action: #7d5e54;
    --accent-action-strong: color-mix(in srgb,#7d5e54 86%,#000);
    --accent-result-from: #7d5e54;
    --accent-result-to: color-mix(in srgb,#7d5e54 82%,#000);
    --accent-selected: #7d5e54;
    --accent-text: #7d5e54;
    --accent-focus: #ac938a;
    --accent-soft: #f2e9e7;
    --accent-soft-active: #e0d1ce;
    --accent-drag: #e0d1ce;
    --accent-drag-text: #243746;
    --accent-button-text: #7d5e54;
    --accent-on-solid: #fff
}
.app-shell[data-palette="brown"] {
    --accent-action: #815e46;
    --accent-action-strong: color-mix(in srgb,#815e46 86%,#000);
    --accent-result-from: #815e46;
    --accent-result-to: color-mix(in srgb,#815e46 82%,#000);
    --accent-selected: #815e46;
    --accent-text: #815e46;
    --accent-focus: #c49a6c;
    --accent-soft: #f6eee7;
    --accent-soft-active: #e8d5c4;
    --accent-drag: #e8d5c4;
    --accent-drag-text: #243746;
    --accent-button-text: #815e46;
    --accent-on-solid: #fff
}
.app-shell[data-palette="lime"] {
    --accent-action: #bdee63;
    --accent-action-strong: #b0e64c;
    --accent-result-from: #bdee63;
    --accent-result-to: #b0e64c;
    --accent-selected: #bdee63;
    --accent-text: #5c7c2f;
    --accent-focus: #a6c86f;
    --accent-soft: #eef6d6;
    --accent-soft-active: #d7e9b2;
    --accent-drag: #d7e9b2;
    --accent-drag-text: #24311f;
    --accent-button-text: #5c7c2f;
    --accent-on-solid: #22300f
}
.app-shell[data-palette="mint"] {
    --accent-action: #86ead4;
    --accent-action-strong: #7de0cb;
    --accent-result-from: #86ead4;
    --accent-result-to: #7de0cb;
    --accent-selected: #86ead4;
    --accent-text: #027864;
    --accent-focus: #68c4b1;
    --accent-soft: #d7f9f0;
    --accent-soft-active: #afe9d7;
    --accent-drag: #afe9d7;
    --accent-drag-text: #18302a;
    --accent-button-text: #027864;
    --accent-on-solid: #12372e
}
.app-shell[data-palette="sky"] {
    --accent-action: #7ce2fe;
    --accent-action-strong: #74daf8;
    --accent-result-from: #7ce2fe;
    --accent-result-to: #74daf8;
    --accent-selected: #7ce2fe;
    --accent-text: #00749e;
    --accent-focus: #60b3d0;
    --accent-soft: #d5f4fd;
    --accent-soft-active: #abe1ef;
    --accent-drag: #abe1ef;
    --accent-drag-text: #153146;
    --accent-button-text: #00749e;
    --accent-on-solid: #12384a
}
.app-shell[data-palette="amber"] {
    --accent-action: #ffc53d;
    --accent-action-strong: #ffba18;
    --accent-result-from: #ffc53d;
    --accent-result-to: #ffba18;
    --accent-selected: #ffc53d;
    --accent-text: #ab6400;
    --accent-focus: #e2a336;
    --accent-soft: #fff4d6;
    --accent-soft-active: #ffe3a2;
    --accent-drag: #ffe3a2;
    --accent-drag-text: #4e3211;
    --accent-button-text: #ab6400;
    --accent-on-solid: #4b2f09
}
.app-shell[data-palette="yellow"] {
    --accent-action: #ffe629;
    --accent-action-strong: #ffdc00;
    --accent-result-from: #ffe629;
    --accent-result-to: #ffdc00;
    --accent-selected: #ffe629;
    --accent-text: #9e6c00;
    --accent-focus: #d5ae39;
    --accent-soft: #fffab8;
    --accent-soft-active: #ffe770;
    --accent-drag: #ffe770;
    --accent-drag-text: #493b18;
    --accent-button-text: #9e6c00;
    --accent-on-solid: #4b3808
}
@media (prefers-color-scheme:dark) {
    .app-shell[data-palette="tomato"] {
        --accent-action: #ac4d39;
        --accent-action-strong: color-mix(in srgb,#ac4d39 86%,#000);
        --accent-result-from: #ac4d39;
        --accent-result-to: color-mix(in srgb,#ac4d39 82%,#000);
        --accent-selected: #ac4d39;
        --accent-text: #ff977d;
        --accent-focus: #ac4d39;
        --accent-soft: #451e17;
        --accent-soft-active: #5e2a21;
        --accent-drag: #5e2a21;
        --accent-drag-text: #eceff1;
        --accent-button-text: #d13415;
        --accent-on-solid: #fff
    }
    .app-shell[data-palette="red"] {
        --accent-action: #ac4d52;
        --accent-action-strong: color-mix(in srgb,#ac4d52 86%,#000);
        --accent-result-from: #ac4d52;
        --accent-result-to: color-mix(in srgb,#ac4d52 82%,#000);
        --accent-selected: #ac4d52;
        --accent-text: #ff9592;
        --accent-focus: #ac4d52;
        --accent-soft: #471a1d;
        --accent-soft-active: #5c2729;
        --accent-drag: #5c2729;
        --accent-drag-text: #eceff1;
        --accent-button-text: #ce2c31;
        --accent-on-solid: #fff
    }
    .app-shell[data-palette="crimson"] {
        --accent-action: #a83e63;
        --accent-action-strong: color-mix(in srgb,#a83e63 86%,#000);
        --accent-result-from: #a83e63;
        --accent-result-to: color-mix(in srgb,#a83e63 82%,#000);
        --accent-selected: #a83e63;
        --accent-text: #ff92ad;
        --accent-focus: #a83e63;
        --accent-soft: #451e2b;
        --accent-soft-active: #5a2740;
        --accent-drag: #5a2740;
        --accent-drag-text: #eceff1;
        --accent-button-text: #cb1d63;
        --accent-on-solid: #fff
    }
    .app-shell[data-palette="pink"] {
        --accent-action: #a63d7b;
        --accent-action-strong: color-mix(in srgb,#a63d7b 86%,#000);
        --accent-result-from: #a63d7b;
        --accent-result-to: color-mix(in srgb,#a63d7b 82%,#000);
        --accent-selected: #a63d7b;
        --accent-text: #ff8dcc;
        --accent-focus: #a63d7b;
        --accent-soft: #451e3b;
        --accent-soft-active: #5a2850;
        --accent-drag: #5a2850;
        --accent-drag-text: #eceff1;
        --accent-button-text: #c2298a;
        --accent-on-solid: #fff
    }
    .app-shell[data-palette="plum"] {
        --accent-action: #9c3dad;
        --accent-action-strong: color-mix(in srgb,#9c3dad 86%,#000);
        --accent-result-from: #9c3dad;
        --accent-result-to: color-mix(in srgb,#9c3dad 82%,#000);
        --accent-selected: #9c3dad;
        --accent-text: #e796f3;
        --accent-focus: #9c3dad;
        --accent-soft: #451e48;
        --accent-soft-active: #59255d;
        --accent-drag: #59255d;
        --accent-drag-text: #eceff1;
        --accent-button-text: #953ea3;
        --accent-on-solid: #fff
    }
    .app-shell[data-palette="iris"] {
        --accent-action: #3b3e8d;
        --accent-action-strong: color-mix(in srgb,#3b3e8d 86%,#000);
        --accent-result-from: #3b3e8d;
        --accent-result-to: color-mix(in srgb,#3b3e8d 82%,#000);
        --accent-selected: #3b3e8d;
        --accent-text: #b1a9ff;
        --accent-focus: #3b3e8d;
        --accent-soft: #202248;
        --accent-soft-active: #2e2d57;
        --accent-drag: #2e2d57;
        --accent-drag-text: #eceff1;
        --accent-button-text: #5753c6;
        --accent-on-solid: #fff
    }
    .app-shell[data-palette="cyan"] {
        --accent-action: #12677e;
        --accent-action-strong: #045468;
        --accent-result-from: #12677e;
        --accent-result-to: #045468;
        --accent-selected: #12677e;
        --accent-text: #4ccce6;
        --accent-focus: #11809c;
        --accent-soft: #082c36;
        --accent-soft-active: #004558;
        --accent-drag: #004558;
        --accent-drag-text: #eceff1;
        --accent-button-text: #107d98;
        --accent-on-solid: #fff
    }
    .app-shell[data-palette="jade"] {
        --accent-action: #246854;
        --accent-action-strong: #1b5745;
        --accent-result-from: #246854;
        --accent-result-to: #1b5745;
        --accent-selected: #246854;
        --accent-text: #1fd8a4;
        --accent-focus: #2a7e68;
        --accent-soft: #0f2e22;
        --accent-soft-active: #114837;
        --accent-drag: #114837;
        --accent-drag-text: #eceff1;
        --accent-button-text: #208368;
        --accent-on-solid: #fff
    }
    .app-shell[data-palette="grass"] {
        --accent-action: #328146;
        --accent-action-strong: color-mix(in srgb,#328146 86%,#000);
        --accent-result-from: #328146;
        --accent-result-to: color-mix(in srgb,#328146 82%,#000);
        --accent-selected: #328146;
        --accent-text: #71d083;
        --accent-focus: #328146;
        --accent-soft: #15301b;
        --accent-soft-active: #214d28;
        --accent-drag: #214d28;
        --accent-drag-text: #eceff1;
        --accent-button-text: #2a7e3b;
        --accent-on-solid: #fff
    }
    .app-shell[data-palette="gold"] {
        --accent-action: #6f654b;
        --accent-action-strong: color-mix(in srgb,#6f654b 86%,#000);
        --accent-result-from: #6f654b;
        --accent-result-to: color-mix(in srgb,#6f654b 82%,#000);
        --accent-selected: #6f654b;
        --accent-text: #cbb99f;
        --accent-focus: #6f654b;
        --accent-soft: #2b251b;
        --accent-soft-active: #483b2b;
        --accent-drag: #483b2b;
        --accent-drag-text: #eceff1;
        --accent-button-text: #71624b;
        --accent-on-solid: #fff
    }
    .app-shell[data-palette="bronze"] {
        --accent-action: #725e54;
        --accent-action-strong: color-mix(in srgb,#725e54 86%,#000);
        --accent-result-from: #725e54;
        --accent-result-to: color-mix(in srgb,#725e54 82%,#000);
        --accent-selected: #725e54;
        --accent-text: #d4b3a5;
        --accent-focus: #725e54;
        --accent-soft: #332b28;
        --accent-soft-active: #463832;
        --accent-drag: #463832;
        --accent-drag-text: #eceff1;
        --accent-button-text: #7d5e54;
        --accent-on-solid: #fff
    }
    .app-shell[data-palette="brown"] {
        --accent-action: #8f5f3d;
        --accent-action-strong: color-mix(in srgb,#8f5f3d 86%,#000);
        --accent-result-from: #8f5f3d;
        --accent-result-to: color-mix(in srgb,#8f5f3d 82%,#000);
        --accent-selected: #8f5f3d;
        --accent-text: #dbb594;
        --accent-focus: #8f5f3d;
        --accent-soft: #38291f;
        --accent-soft-active: #4b352a;
        --accent-drag: #4b352a;
        --accent-drag-text: #eceff1;
        --accent-button-text: #815e46;
        --accent-on-solid: #fff
    }
    .app-shell[data-palette="lime"] {
        --accent-action: #334423;
        --accent-action-strong: #1f2917;
        --accent-result-from: #1f2917;
        --accent-result-to: #334423;
        --accent-selected: #334423;
        --accent-text: #bde56c;
        --accent-focus: #6f8c45;
        --accent-soft: #1f2917;
        --accent-soft-active: #334423;
        --accent-drag: #334423;
        --accent-drag-text: #bde56c;
        --accent-button-text: #5c7c2f;
        --accent-on-solid: #bde56c
    }
    .app-shell[data-palette="mint"] {
        --accent-action: #004744;
        --accent-action-strong: #092c2b;
        --accent-result-from: #092c2b;
        --accent-result-to: #004744;
        --accent-selected: #004744;
        --accent-text: #58d5ba;
        --accent-focus: #277f70;
        --accent-soft: #092c2b;
        --accent-soft-active: #004744;
        --accent-drag: #004744;
        --accent-drag-text: #58d5ba;
        --accent-button-text: #027864;
        --accent-on-solid: #58d5ba
    }
    .app-shell[data-palette="sky"] {
        --accent-action: #154467;
        --accent-action-strong: #112840;
        --accent-result-from: #112840;
        --accent-result-to: #154467;
        --accent-selected: #154467;
        --accent-text: #75c7f0;
        --accent-focus: #197cae;
        --accent-soft: #112840;
        --accent-soft-active: #154467;
        --accent-drag: #154467;
        --accent-drag-text: #75c7f0;
        --accent-button-text: #00749e;
        --accent-on-solid: #75c7f0
    }
    .app-shell[data-palette="amber"] {
        --accent-action: #4d3000;
        --accent-action-strong: #302008;
        --accent-result-from: #302008;
        --accent-result-to: #4d3000;
        --accent-selected: #4d3000;
        --accent-text: #ffca16;
        --accent-focus: #8f6424;
        --accent-soft: #302008;
        --accent-soft-active: #4d3000;
        --accent-drag: #4d3000;
        --accent-drag-text: #ffca16;
        --accent-button-text: #ab6400;
        --accent-on-solid: #ffca16
    }
    .app-shell[data-palette="yellow"] {
        --accent-action: #433500;
        --accent-action-strong: #2d2305;
        --accent-result-from: #2d2305;
        --accent-result-to: #433500;
        --accent-selected: #433500;
        --accent-text: #f5e147;
        --accent-focus: #836a21;
        --accent-soft: #2d2305;
        --accent-soft-active: #433500;
        --accent-drag: #433500;
        --accent-drag-text: #f5e147;
        --accent-button-text: #9e6c00;
        --accent-on-solid: #f5e147
    }
}
.theme-swatch[data-palette="tomato"] {
    --swatch-light: #d13415;
    --swatch-dark: #ac4d39
}
.theme-swatch[data-palette="red"] {
    --swatch-light: #ce2c31;
    --swatch-dark: #ac4d52
}
.theme-swatch[data-palette="crimson"] {
    --swatch-light: #cb1d63;
    --swatch-dark: #a83e63
}
.theme-swatch[data-palette="pink"] {
    --swatch-light: #c2298a;
    --swatch-dark: #a63d7b
}
.theme-swatch[data-palette="plum"] {
    --swatch-light: #953ea3;
    --swatch-dark: #9c3dad
}
.theme-swatch[data-palette="iris"] {
    --swatch-light: #5753c6;
    --swatch-dark: #3b3e8d
}
.theme-swatch[data-palette="cyan"] {
    --swatch-light: #107d98;
    --swatch-dark: #12677e
}
.theme-swatch[data-palette="jade"] {
    --swatch-light: #208368;
    --swatch-dark: #246854
}
.theme-swatch[data-palette="grass"] {
    --swatch-light: #2a7e3b;
    --swatch-dark: #328146
}
.theme-swatch[data-palette="lime"] {
    --swatch-light: #bdee63;
    --swatch-dark: #334423
}
.theme-swatch[data-palette="mint"] {
    --swatch-light: #86ead4;
    --swatch-dark: #004744
}
.theme-swatch[data-palette="sky"] {
    --swatch-light: #7ce2fe;
    --swatch-dark: #154467
}
.theme-swatch[data-palette="gold"] {
    --swatch-light: #71624b;
    --swatch-dark: #6f654b
}
.theme-swatch[data-palette="bronze"] {
    --swatch-light: #7d5e54;
    --swatch-dark: #725e54
}
.theme-swatch[data-palette="brown"] {
    --swatch-light: #815e46;
    --swatch-dark: #8f5f3d
}
.theme-swatch[data-palette="amber"] {
    --swatch-light: #ffc53d;
    --swatch-dark: #4d3000
}
.theme-swatch[data-palette="yellow"] {
    --swatch-light: #ffe629;
    --swatch-dark: #433500
}
/* Software update status stays inside the existing Version row. */
.settings-version-row {
    width: 100%;
    text-align: left
}
.settings-version-row:disabled {
    opacity: 1;
    cursor: progress
}
.settings-version-row:active:not(:disabled) {
    background: color-mix(in srgb,var(--surface-variant) 68%,transparent)
}
.settings-version-row:focus-visible {
    outline: 2px solid var(--accent-focus);
    outline-offset: -2px
}
.settings-row .settings-version-value {
    flex: none;
    align-items: center;
    gap: 10px;
    display: flex
}
.settings-version-value output {
    color: #000;
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 500;
    line-height: 1
}
/* A calibration advisory preserves the numeric result and the active theme. */
.result-copy .calibration-note {
    align-self: flex-start;
    max-width: 100%;
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--amber-12);
    background: var(--amber-3);
    font-weight: 500
}
/* Size the glyph from its actual display cell, including short, wide layouts.
   Keep a safe 24px fallback when size container queries are unavailable. */
.digit-value {
    display: block;
    line-height: 1
}
@supports (container-type:size) {
    .digit-column output {
        container-type: size
    }
    .digit-value {
        font-size: clamp(24px,min(85cqi,60cqb),35px)
    }
}
/* Keep emphasis consistent with the interface weight scale. */
.mini-history-row strong,.history-row strong {
    font-weight: 600
}
.storage-notice {
    flex: none;
    padding: 10px 12px;
    border: 1px solid var(--danger);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--text);
    font-size: 12px;
    line-height: 1.4
}
.storage-notice p {
    margin: 0 0 8px
}
.storage-notice>div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}
.storage-notice button {
    min-height: 36px;
    padding: 5px 10px;
    border: 1px solid var(--outline-strong);
    border-radius: 6px;
    background: var(--surface);
    font-weight: 600
}