/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 56px; padding: 0 var(--s-6); border-radius: var(--r-2); border: 1px solid transparent; font-size: var(--t-2); font-weight: 600; background: var(--surface-2); text-decoration: none; transition: background var(--d-fast) var(--ease); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: #e3b45a; }
.btn--primary:active { background: #c4953a; }
.btn--secondary { border-color: var(--line); }
.btn--secondary:hover { background: #26302b; }
.btn--secondary:active { background: var(--surface-1); }
.btn--danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn--danger:active { background: rgb(255 122 105 / .14); }
.btn--icon { width: 56px; padding: 0; border-radius: var(--r-full); }
.btn--small { min-height: var(--touch-min); padding: 0 var(--s-4); font-size: var(--t-1); }
.btn--link { background: none; min-height: var(--touch-min); padding: 0 var(--s-2); color: var(--accent); text-decoration: underline; font-weight: 500; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; }
.btn[aria-busy="true"] { opacity: .85; pointer-events: none; }

.spin .icon, [data-state="syncing"] .icon { animation: spin 2s linear infinite; }

/* Fields */
.field { margin-bottom: var(--s-4); }
.field label, label[for] { display: block; margin-bottom: var(--s-2); color: var(--ink-2); font-size: var(--t-1); }
.field__row { display: flex; gap: var(--s-2); align-items: center; }
input[type="text"], input[type="password"] { width: 100%; min-height: 56px; padding: 0 var(--s-4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-1); font-size: var(--t-2); }
input:focus { border-color: var(--accent); }
input[aria-invalid="true"] { border: 2px solid var(--danger); }
input[readonly] { opacity: .5; }
.hint-text { margin: var(--s-2) 0 0; color: var(--ink-2); font-size: var(--t-1); }
.field__err { margin: var(--s-2) 0 0; color: var(--danger); font-size: var(--t-1); }
.field__err::before { content: "! "; font-weight: 700; }
.check { display: flex; gap: var(--s-4); align-items: center; min-height: 56px; margin-bottom: var(--s-4); cursor: pointer; border-radius: var(--r-1); }
.check input { position: absolute; opacity: 0; }
.check__box { flex: none; width: 24px; height: 24px; border: 2px solid var(--line); border-radius: 6px; }
.check input:checked + .check__box { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2314100a' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px no-repeat; border-color: var(--accent); }
.check:has(input:focus-visible) { box-shadow: var(--ring); }

/* Banners, chips, tags */
.banner { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; padding: var(--s-4); margin-bottom: var(--s-4); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-2); }
.banner--danger { border-color: var(--danger); color: var(--danger); }
.banner--warn { border-color: var(--warn); color: var(--warn); }
.banner .btn { margin-left: auto; }
.chip { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--touch-min); padding: 0 var(--s-4); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-full); font-size: var(--t-1); }
.chip[data-state="synced"] .icon { color: var(--ok); }
.chip[data-state="offline"] .icon, .chip[data-state="conflict"] .icon { color: var(--warn); }
.chip[data-state="error"] .icon { color: var(--danger); }
.chip[data-state="none"] { color: var(--ink-2); }
.tag { display: inline-block; padding: 0 var(--s-2); border: 1px solid var(--accent); border-radius: var(--r-1); color: var(--accent); font-size: var(--t-1); }
.badge { position: absolute; left: var(--s-2); bottom: var(--s-2); display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-2); background: var(--scrim); border-radius: var(--r-1); font-size: var(--t-1); }
.badge--danger { color: var(--danger); }
.ok { color: var(--ok); } .warn { color: var(--warn); } .err { color: var(--danger); }
.ok .icon { vertical-align: -4px; }

/* Tabs */
.tab { min-height: 48px; padding: 0 var(--s-4); background: none; border: 0; border-bottom: 4px solid transparent; font-size: var(--t-2); }
.tab[aria-selected="true"] { border-bottom-color: var(--accent); }
.tab__count { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tabs--vertical { display: flex; flex-direction: column; gap: var(--s-1); }
.tab--side { text-align: left; border: 0; border-left: 4px solid transparent; border-radius: var(--r-1); }
.tab--side[aria-selected="true"] { border-left-color: var(--accent); background: var(--surface-1); }

/* Dialog, sheet, scrim, toast */
.scrim { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--s-5); background: var(--scrim); animation: fade var(--d-med) var(--ease); }
.dialog { width: 100%; max-width: 640px; max-height: 92vh; overflow: auto; padding: var(--s-6); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-3); }
.dialog h2 { margin-bottom: var(--s-4); }
.dialog--sheet { position: fixed; right: 0; top: 0; bottom: 0; max-width: 420px; max-height: none; border-radius: var(--r-3) 0 0 var(--r-3); }
.dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-3); margin-top: var(--s-5); }
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin: var(--s-4) 0; }
.panel { padding: var(--s-4); background: var(--surface-2); border-radius: var(--r-2); }
.panel p { margin: 0 0 var(--s-1); font-variant-numeric: tabular-nums; }
#toasts { position: fixed; z-index: 60; left: 50%; bottom: calc(64px + var(--s-4)); transform: translateX(-50%); display: grid; gap: var(--s-2); width: min(480px, 92vw); }
.toast { display: flex; align-items: center; gap: var(--s-3); justify-content: space-between; padding: var(--s-3) var(--s-4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-2); animation: rise var(--d-med) var(--ease); }
.toast .btn { min-height: var(--touch-min); }

/* Rows, progress, menu, switch */
.rows { list-style: none; margin: var(--s-4) 0; padding: 0; }
.row { display: flex; justify-content: space-between; gap: var(--s-4); min-height: 56px; align-items: center; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.row__state--error { color: var(--danger); }
.skeleton { background: var(--surface-2); border-radius: var(--r-1); animation: pulse 1.2s linear infinite; margin-bottom: var(--s-2); border: 0; }
.progress { height: 8px; background: var(--surface-2); border-radius: var(--r-full); overflow: hidden; }
.progress__fill { height: 100%; width: 0; background: var(--accent); border-radius: var(--r-full); }
.progress--indeterminate .progress__fill { width: 30%; animation: slide 1.4s var(--ease) infinite; }
[data-motion="reduce"] .progress--indeterminate .progress__fill { width: 40%; opacity: .4; }
.menu { max-width: 480px; }
.menu__list { display: grid; gap: var(--s-1); }
.menu__item { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 64px; padding: 0 var(--s-4); background: none; border: 0; border-radius: var(--r-2); font-size: var(--t-2); text-align: left; }
.menu__item:hover { background: var(--surface-2); }
.menu__item:disabled { opacity: .5; }
.switch { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); width: 100%; min-height: 56px; padding: var(--s-2) var(--s-4); margin-bottom: var(--s-2); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-2); text-align: left; }
.switch__state { margin-left: auto; color: var(--ink-2); }
.switch[role="switch"] { padding-right: calc(52px + var(--s-8)); }
.switch__knob { position: absolute; right: var(--s-4); width: 52px; height: 32px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--line); }
.switch__knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink-2); transition: transform var(--d-fast) var(--ease); }
.switch[aria-checked="true"] .switch__knob { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"] .switch__knob::after { transform: translateX(20px); background: var(--accent-ink); }
.switch[role="switch"] .switch__state { margin-left: 0; position: absolute; right: calc(52px + var(--s-6)); }
.link { color: var(--accent); }

/* Hint bar */
#hints { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: 0 var(--safe); background: rgb(22 28 25 / .92); border-top: 1px solid var(--line); font-size: var(--t-1); }
.hints__keys { display: flex; gap: var(--s-5); }
.hint { display: inline-flex; align-items: center; gap: var(--s-2); }
.hint kbd, .padkey { padding: 2px var(--s-2); border: 2px solid var(--ink); border-radius: var(--r-1); font: 600 var(--t-1) var(--font-ui); }
.glyph { color: var(--ink); }
[data-input="touch"] #hints { display: none; }
.precache { position: fixed; z-index: 45; left: var(--safe); bottom: 80px; width: min(360px, 80vw); padding: var(--s-3) var(--s-4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-2); font-size: var(--t-1); }
.precache .progress { margin-top: var(--s-2); }