/* AirMouse components v2 — Manrope (display, numerals) · Lato 400/700 (body, UI) · JetBrains Mono (codes).
   Every size below sits on the 4pt grid; 2pt only for optical nudges. Lato ships 400 and 700 only — never 500/600 on --font-text. */

/* ============ Base ============ */
body { margin: 0; font-family: var(--font-text); font-size: 16px; line-height: 24px; background: var(--bg-base); color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
button, input { font-family: inherit; }
.am-icon { display: block; flex: none; }
:where(.am-btn, .am-iconbtn, .am-key, .am-rocker__half, .am-seg__opt, .am-switch, .am-tab, .am-row, .am-qa__tile, .am-media__btn, .am-media__play, .am-conn, .am-chip, .am-snack__action, .am-header__device, .am-air__orb, .am-field__clear, .am-numpad__key, .am-colorkey):focus-visible,
.am-dpad:focus-visible, .am-slider input:focus-visible { outline: var(--border-focus) solid var(--focus); outline-offset: 2px; }
.am-num { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ============ Button ============ */
.am-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); box-sizing: border-box; border: 1px solid transparent; cursor: pointer; font: 700 16px/20px var(--font-text); letter-spacing: .005em; white-space: nowrap; border-radius: var(--radius-md); transition: transform var(--duration-fast) var(--ease-press), background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast); -webkit-tap-highlight-color: transparent; user-select: none; }
.am-btn:active:not(:disabled) { transform: scale(.97); transition-duration: var(--duration-instant); }
.am-btn--lg { height: 56px; padding: 0 var(--space-xl); }
.am-btn--md { height: 48px; padding: 0 var(--space-lg); }
.am-btn--sm { height: 36px; padding: 0 var(--space-md); font-size: 14px; line-height: 18px; letter-spacing: .01em; border-radius: var(--radius-sm); gap: 6px; position: relative; }
.am-btn--sm .am-icon { width: 18px; height: 18px; }
.am-btn--sm::after { content: ""; position: absolute; inset: -6px -2px; }
.am-btn--full { width: 100%; }
.am-btn--primary { background: var(--brand-primary); border-color: var(--brand-edge); color: var(--on-brand); box-shadow: var(--shadow-ok); }
.am-btn--primary:active:not(:disabled) { background: var(--brand-primary-pressed); box-shadow: none; }
.am-btn--secondary { background: var(--key); border-color: var(--border); color: var(--text-primary); box-shadow: var(--shadow-key); }
.am-btn--secondary:active:not(:disabled) { background: var(--key-pressed); box-shadow: var(--shadow-key-pressed); }
.am-btn--tertiary { background: transparent; color: var(--text-primary); }
.am-btn--tertiary:active:not(:disabled) { background: var(--surface-pressed); }
.am-btn--destructive { background: var(--error); color: var(--on-error); }
.am-btn:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; box-shadow: none; }
.am-btn.is-loading { opacity: 1; cursor: progress; }

/* ============ IconButton ============ */
.am-iconbtn { display: inline-grid; place-items: center; box-sizing: border-box; border: 1px solid transparent; background: transparent; color: var(--text-primary); border-radius: var(--radius-full); cursor: pointer; position: relative; padding: 0; transition: transform var(--duration-fast) var(--ease-press), background-color var(--duration-fast); -webkit-tap-highlight-color: transparent; }
.am-iconbtn--sm { width: 36px; height: 36px; }
.am-iconbtn--sm::after { content: ""; position: absolute; inset: -6px; }
.am-iconbtn--md { width: 48px; height: 48px; }
.am-iconbtn--lg { width: 56px; height: 56px; }
.am-iconbtn--tonal { background: var(--key); border-color: var(--border); box-shadow: var(--shadow-key); }
.am-iconbtn--outlined { border: var(--border-control) solid var(--border-strong); }
.am-iconbtn--brand { background: var(--brand-primary); color: var(--on-brand); border-color: var(--brand-edge); box-shadow: var(--shadow-ok); }
.am-iconbtn:active:not(:disabled) { transform: scale(.94); background: var(--key-pressed); box-shadow: var(--shadow-key-pressed); }
.am-iconbtn.is-active { background: var(--accent); color: var(--brand-ink); border-color: transparent; box-shadow: none; }
.am-iconbtn.am-tone--power { color: var(--error); }
.am-iconbtn:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }

/* ============ RemoteKey ============ */
.am-key { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-sizing: border-box; border: 1px solid var(--border); background: var(--key); color: var(--text-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-key); cursor: pointer; padding: 0; flex: none; transition: transform var(--duration-fast) var(--ease-press), background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast); -webkit-tap-highlight-color: transparent; user-select: none; touch-action: manipulation; }
.am-key--sm { width: 48px; height: 48px; border-radius: var(--radius-md); }
.am-key--md { width: 56px; height: 56px; }
.am-key--lg { width: 72px; height: 72px; border-radius: var(--radius-xl); gap: 4px; }
.am-key--wide { height: 56px; min-width: 96px; padding: 0 var(--space-lg); flex-direction: row; gap: var(--space-sm); }
.am-key__caption { font: 700 11px/16px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.am-key--md .am-key__caption { display: none; }
.am-key--wide .am-key__caption { font: 700 14px/18px var(--font-text); letter-spacing: .01em; text-transform: none; color: var(--text-primary); }
.am-key:active:not(:disabled), .am-key.is-pressed { background: var(--key-pressed); box-shadow: var(--shadow-key-pressed); transform: scale(.94); transition-duration: var(--duration-instant); }
.am-key--brand { background: var(--brand-primary); color: var(--on-brand); border-color: var(--brand-edge); box-shadow: var(--shadow-ok); }
.am-key--brand .am-key__caption { color: var(--on-brand); }
.am-key--brand:active:not(:disabled), .am-key--brand.is-pressed { background: var(--brand-primary-pressed); }
.am-key--power { color: var(--error); }
.am-key--quiet { background: transparent; border-color: transparent; box-shadow: none; }
.am-key:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; box-shadow: none; }

/* ============ DPad ============ */
.am-dpad { position: relative; box-sizing: border-box; border-radius: 50%; background: var(--key); border: 1px solid var(--border); box-shadow: var(--shadow-key); flex: none; touch-action: none; }
.am-dpad__arm { position: absolute; inset: 0; border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; padding: 0; border-radius: 50%; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast); -webkit-tap-highlight-color: transparent; }
.am-dpad__arm--up { clip-path: polygon(50% 50%, 0 0, 100% 0); }
.am-dpad__arm--right { clip-path: polygon(50% 50%, 100% 0, 100% 100%); }
.am-dpad__arm--down { clip-path: polygon(50% 50%, 100% 100%, 0 100%); }
.am-dpad__arm--left { clip-path: polygon(50% 50%, 0 100%, 0 0); }
.am-dpad__arm.is-pressed, .am-dpad__arm:active:not(:disabled) { background: var(--key-pressed); color: var(--text-primary); }
.am-dpad__glyph { position: absolute; display: grid; place-items: center; width: 28px; height: 28px; }
.am-dpad__arm--up .am-dpad__glyph { left: 50%; top: 10%; margin-left: -14px; }
.am-dpad__arm--down .am-dpad__glyph { left: 50%; bottom: 10%; margin-left: -14px; }
.am-dpad__arm--left .am-dpad__glyph { top: 50%; left: 10%; margin-top: -14px; }
.am-dpad__arm--right .am-dpad__glyph { top: 50%; right: 10%; margin-top: -14px; }
.am-dpad__groove { position: absolute; left: 50%; top: 50%; width: 60%; height: 60%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid var(--border); pointer-events: none; box-sizing: border-box; }
.am-dpad__ok { position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; transform: translate(-50%, -50%); box-sizing: border-box; border-radius: 50%; border: 1px solid var(--brand-edge); background: var(--brand-primary); color: var(--on-brand); font: 800 18px/1 var(--font-display); letter-spacing: .04em; cursor: pointer; padding: 0; transition: transform var(--duration-fast) var(--ease-press), background-color var(--duration-fast); box-shadow: var(--shadow-ok), 0 0 0 6px var(--key); }
.am-dpad__ok.is-pressed, .am-dpad__ok:active:not(:disabled) { background: var(--brand-primary-pressed); transform: translate(-50%, -50%) scale(.94); box-shadow: 0 0 0 6px var(--key); }
.am-dpad.is-disabled { opacity: var(--opacity-disabled); box-shadow: none; }
.am-dpad.is-disabled .am-dpad__ok { background: var(--key-pressed); color: var(--text-disabled); border-color: var(--border); box-shadow: 0 0 0 6px var(--key); }

/* ============ Touchpad ============ */
.am-touchpad { position: relative; width: 100%; box-sizing: border-box; border-radius: var(--radius-xl); background-color: var(--touchpad); background-image: radial-gradient(circle at center, var(--touchpad-dot) 1.25px, transparent 1.75px); background-size: 24px 24px; background-position: center; border: 1px solid var(--border); overflow: hidden; touch-action: none; user-select: none; cursor: crosshair; }
.am-touchpad__rail { position: absolute; right: 10px; top: var(--space-xl); bottom: var(--space-xl); width: 4px; border-radius: 2px; background: var(--touchpad-dot); transition: width var(--duration-fast), right var(--duration-fast); }
.am-touchpad__thumb { position: absolute; left: 0; right: 0; top: 12%; height: 20%; border-radius: 2px; background: var(--text-muted); transition: top var(--duration-base) var(--ease-standard); }
.am-touchpad.is-scrolling .am-touchpad__rail { width: 6px; right: 9px; background: var(--brand-secondary-soft); }
.am-touchpad.is-scrolling .am-touchpad__thumb { background: var(--brand-secondary); border-radius: 3px; }
.am-touchpad__hint { position: absolute; left: 0; right: 0; bottom: var(--space-lg); display: flex; justify-content: center; pointer-events: none; }
.am-touchpad__hintpill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--space-md); box-sizing: border-box; border-radius: var(--radius-full); background: var(--bg-elevated); border: 1px solid var(--border); font: 400 13px/16px var(--font-text); color: var(--text-secondary); white-space: nowrap; }
.am-touchpad__finger { position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px; box-sizing: border-box; border-radius: 50%; background: var(--brand-secondary-soft); border: 2px solid var(--brand-secondary); pointer-events: none; }
.am-touchpad__finger::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--brand-secondary); }
.am-touchpad__ripple { position: absolute; width: 96px; height: 96px; margin: -48px 0 0 -48px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--brand-secondary); pointer-events: none; animation: am-ripple 420ms var(--ease-out) forwards; }
.am-touchpad__ripple.is-static { animation: none; transform: scale(.75); background: var(--brand-secondary-soft); }
.am-touchpad__ripple.is-static::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--brand-secondary); }
.am-touchpad__scrolltag { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; font: 700 13px/16px var(--font-text); color: var(--brand-secondary); }
.am-touchpad.is-disabled { cursor: not-allowed; background-image: none; }
.am-touchpad__lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-sm); color: var(--text-secondary); font: 400 14px/20px var(--font-text); text-align: center; padding: var(--space-xl); }
@keyframes am-ripple { from { transform: scale(.3); opacity: 1; } to { transform: scale(1); opacity: 0; } }

/* ============ Slider ============ */
.am-slider { display: flex; flex-direction: column; gap: var(--space-xs); width: 100%; }
.am-slider__head { display: flex; justify-content: space-between; align-items: baseline; font: 400 14px/20px var(--font-text); color: var(--text-secondary); }
.am-slider__value { font: 600 15px/20px var(--font-display); font-variant-numeric: tabular-nums; color: var(--text-primary); }
.am-slider__row { display: flex; align-items: center; gap: var(--space-md); color: var(--text-secondary); }
.am-slider input { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 32px; margin: 0; background: transparent; cursor: pointer; --fill: var(--brand-primary); }
.am-slider--secondary input { --fill: var(--brand-secondary); }
.am-slider--neutral input { --fill: var(--text-primary); }
.am-slider input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--fill) 0 var(--p), var(--border) var(--p) 100%); }
.am-slider input::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--fill) 0 var(--p), var(--border) var(--p) 100%); }
.am-slider input::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: var(--control-thumb); border: 4px solid var(--fill); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.am-slider input::-moz-range-thumb { box-sizing: border-box; width: 24px; height: 24px; border-radius: 50%; background: var(--control-thumb); border: 4px solid var(--fill); }
.am-slider.is-disabled { opacity: var(--opacity-disabled); }

/* ============ Air mouse ============ */
.am-air { display: flex; flex-direction: column; gap: var(--space-xl); padding: var(--space-xl) var(--space-lg) var(--space-lg); border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--border); box-sizing: border-box; }
.am-air__stage { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); text-align: center; padding-top: 12px; }
.am-air__orb { width: 152px; height: 152px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0; background: var(--key); color: var(--brand-secondary); border: 2px solid var(--brand-secondary); box-shadow: var(--shadow-key), 0 0 0 12px var(--bg-elevated), 0 0 0 13px var(--border); transition: transform var(--duration-base) var(--ease-standard), background-color var(--duration-base); touch-action: none; }
.am-air.is-active .am-air__orb { background: var(--brand-secondary); color: var(--bg-base); box-shadow: 0 0 0 12px var(--brand-secondary-soft), 0 0 0 13px var(--brand-secondary); transform: scale(1.03); }
.am-air.is-activating .am-air__orb, .am-air.is-calibrating .am-air__orb, .am-air.is-paused .am-air__orb { border-color: var(--border-strong); color: var(--text-secondary); }
.am-air.is-unavailable .am-air__orb { color: var(--text-muted); border: 2px dashed var(--border-strong); background: transparent; cursor: not-allowed; box-shadow: none; }
.am-air__spin { color: var(--brand-secondary); }
.am-air__title { font: 700 20px/28px var(--font-display); letter-spacing: -.01em; margin-top: var(--space-sm); }
.am-air.is-active .am-air__title { color: var(--brand-secondary); }
.am-air__body { font: 400 14px/20px var(--font-text); color: var(--text-secondary); max-width: 280px; margin: 4px auto 0; }
.am-air__tools { display: grid; grid-template-columns: 1fr 1fr; gap: var(--button-gap); }

/* ============ Rockers ============ */
.am-rocker { display: inline-flex; flex-direction: column; width: 56px; height: var(--touch-rocker); box-sizing: border-box; border-radius: var(--radius-lg); background: var(--key); border: 1px solid var(--border); box-shadow: var(--shadow-key); overflow: hidden; flex: none; }
.am-rocker__half { flex: 1 1 0; display: grid; place-items: center; border: 0; background: transparent; color: var(--text-primary); cursor: pointer; padding: 0; transition: background-color var(--duration-fast); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.am-rocker__half:active:not(:disabled), .am-rocker__half.is-pressed { background: var(--key-pressed); box-shadow: var(--shadow-key-pressed); }
.am-rocker__caption { height: 16px; flex: none; display: grid; place-items: center; font: 700 11px/16px var(--font-display); letter-spacing: .1em; color: var(--text-secondary); }
.am-rocker__muted { color: var(--error); }
.am-rocker.is-disabled { opacity: var(--opacity-disabled); box-shadow: none; }

/* ============ HUD ============ */
.am-hud { display: inline-flex; align-items: center; gap: var(--space-md); height: 64px; padding: 0 var(--space-xl) 0 var(--space-md); box-sizing: border-box; border-radius: var(--radius-full); background: var(--surface-elevated); border: 1px solid var(--border); box-shadow: var(--shadow-float); color: var(--text-primary); min-width: 240px; animation: am-in var(--duration-base) var(--ease-out); }
.am-hud > .am-icon { width: 40px; height: 40px; padding: 8px; box-sizing: border-box; border-radius: 50%; background: var(--key); }
.am-hud__num { font: 600 28px/32px var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; min-width: 36px; }
.am-hud.is-muted .am-hud__num { font: 700 16px/20px var(--font-text); letter-spacing: 0; color: var(--error); }
.am-hud.is-muted > .am-icon { color: var(--error); background: var(--error-soft); }
.am-hud__bar { flex: 1; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; min-width: 96px; }
.am-hud__bar span { display: block; height: 100%; background: var(--text-primary); border-radius: 2px; transition: width var(--duration-fast) var(--ease-standard); }
.am-hud--channel { gap: var(--space-sm); padding-left: var(--space-xl); }
.am-hud__kicker { font: 700 11px/16px var(--font-display); letter-spacing: .1em; color: var(--text-secondary); }
.am-hud__label { font: 400 14px/20px var(--font-text); color: var(--text-secondary); margin-left: var(--space-xs); }
@keyframes am-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ============ Media ============ */
.am-media { display: flex; color: var(--text-primary); box-sizing: border-box; }
.am-media--compact { align-items: center; justify-content: space-between; height: 56px; padding: 0 4px; border-radius: var(--radius-full); background: var(--key); border: 1px solid var(--border); box-shadow: var(--shadow-key); }
.am-media--full { flex-direction: column; gap: var(--space-sm); padding: var(--space-xl) var(--space-lg) var(--space-md); border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--border); }
.am-media__meta { margin-bottom: var(--space-xs); }
.am-media__source { font: 700 13px/16px var(--font-text); color: var(--text-secondary); letter-spacing: .01em; }
.am-media__title { font: 700 20px/28px var(--font-display); letter-spacing: -.01em; margin-top: 4px; }
.am-media__times { display: flex; justify-content: space-between; font: 600 12px/16px var(--font-display); font-variant-numeric: tabular-nums; color: var(--text-secondary); margin-top: -4px; }
.am-media__transport { display: flex; align-items: center; justify-content: space-between; margin: var(--space-sm) 0; padding: 0 4px; }
.am-media__btn { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--text-primary); cursor: pointer; padding: 0; transition: transform var(--duration-fast) var(--ease-press), background-color var(--duration-fast); }
.am-media__btn:active { background: var(--key-pressed); transform: scale(.92); }
.am-media__play { width: 72px; height: 72px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--text-primary); color: var(--bg-base); cursor: pointer; padding: 0; transition: transform var(--duration-fast) var(--ease-press); }
.am-media--compact .am-media__play { width: 48px; height: 48px; }
.am-media__play:active { transform: scale(.94); }
.am-media__extras { display: flex; align-items: center; gap: var(--space-xs); border-top: 1px solid var(--divider); padding-top: var(--space-sm); margin: 0 calc(-1 * var(--space-xs)); }
.am-media__vol { flex: 1; }

/* ============ Status: dot, indicator, badge ============ */
.am-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; box-sizing: border-box; }
.am-dot--connected { background: var(--status-connected); }
.am-dot--connecting { background: var(--status-connecting); color: var(--status-connecting); }
.am-dot--connecting::after, .am-dot--pairing::after, .am-dot--searching::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: am-pulse var(--duration-pulse) var(--ease-out) infinite; }
.am-dot--pairing, .am-dot--searching { background: var(--status-pairing); color: var(--status-pairing); }
.am-dot--weak { background: var(--status-weak); }
.am-dot--disconnected { border: 2px solid var(--status-disconnected); }
.am-dot--unavailable { border: 1.5px dashed var(--status-unavailable); }
.am-dot--available { border: 2px solid var(--text-secondary); }
.am-dot--unsupported { border: 2px solid var(--status-unsupported); }
.am-dot--error { background: var(--status-error); }
@keyframes am-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }

.am-conn { display: inline-flex; align-items: center; gap: var(--space-sm); height: 32px; padding: 0 var(--space-md); box-sizing: border-box; border-radius: var(--radius-full); background: var(--surface); border: 1px solid var(--border); color: var(--text-primary); font: 700 13px/16px var(--font-text); letter-spacing: .005em; white-space: nowrap; cursor: default; }
button.am-conn { cursor: pointer; }
.am-conn--connected .am-conn__label { color: var(--brand-ink); }
.am-conn--connecting .am-conn__label, .am-conn--weak .am-conn__label { color: var(--warning); }
.am-conn--error .am-conn__label { color: var(--error); }
.am-conn--pairing .am-conn__label { color: var(--brand-secondary); }
.am-conn--disconnected .am-conn__label, .am-conn--unavailable .am-conn__label { color: var(--text-secondary); }
.am-conn__method { display: inline-flex; align-items: center; gap: 4px; padding-left: var(--space-sm); border-left: 1px solid var(--border); color: var(--text-secondary); height: 16px; font-weight: 400; }
.am-conn__method--wifi .am-icon { color: var(--wifi); }
.am-conn__method--bluetooth .am-icon { color: var(--bluetooth); }
.am-conn--disconnected .am-conn__method .am-icon, .am-conn--unavailable .am-conn__method .am-icon { color: var(--status-disconnected); }
.am-conn--compact { padding: 0 var(--space-sm) 0 var(--space-md); }
.am-conn--compact .am-conn__method { border-left: 0; padding-left: 0; }

.am-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--space-sm); box-sizing: border-box; border-radius: var(--radius-xs); font: 700 12px/16px var(--font-text); letter-spacing: .01em; white-space: nowrap; background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border); }
.am-badge .am-dot { width: 6px; height: 6px; }
.am-badge .am-dot--disconnected, .am-badge .am-dot--available { border-width: 1.5px; }
.am-badge--connected { background: var(--accent); color: var(--brand-ink); border-color: transparent; }
.am-badge--connecting, .am-badge--weak, .am-badge--warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.am-badge--error { background: var(--error-soft); color: var(--error); border-color: transparent; }
.am-badge--pairing, .am-badge--info { background: var(--info-soft); color: var(--info); border-color: transparent; }
.am-badge--wifi { background: var(--wifi-soft); color: var(--wifi); border-color: transparent; }
.am-badge--bluetooth { background: var(--bluetooth-soft); color: var(--bluetooth); border-color: transparent; }
.am-badge--unsupported, .am-badge--unavailable { background: transparent; color: var(--text-muted); border-style: dashed; border-color: var(--border-strong); }
.am-badge--solid.am-badge--connected { background: var(--brand-primary); color: var(--on-brand); }

/* ============ Header ============ */
.am-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); height: 56px; }
.am-header__device { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: transparent; border: 0; color: inherit; padding: 4px; margin: -4px; border-radius: var(--radius-sm); cursor: pointer; min-width: 0; text-align: left; }
.am-header__name { display: flex; align-items: center; gap: 4px; font: 700 17px/24px var(--font-display); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.am-header__name .am-icon { color: var(--text-secondary); margin-top: 1px; }
.am-header__conn { height: 24px; padding: 0; background: transparent; border: 0; }
.am-header__actions { display: flex; gap: var(--space-sm); flex: none; }

/* ============ Device card ============ */
.am-device { display: flex; gap: var(--space-md); padding: var(--space-lg); box-sizing: border-box; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); align-items: flex-start; }
.am-device.is-selected { border-color: var(--brand-edge); }
.am-device.is-connected { border-color: var(--status-connected); box-shadow: inset 0 0 0 1px var(--status-connected); }
.am-device.is-error { border-color: var(--error); }
.am-device.is-unavailable { opacity: .72; border-style: dashed; }
.am-device__art { width: 48px; height: 48px; box-sizing: border-box; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--key); color: var(--text-primary); border: 1px solid var(--border); box-shadow: var(--shadow-key); flex: none; }
.am-device.is-connected .am-device__art { background: var(--accent); color: var(--brand-ink); border-color: transparent; box-shadow: none; }
.am-device__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.am-device__name { font: 700 17px/24px var(--font-display); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-device__meta { font: 400 12px/16px var(--font-text); letter-spacing: .01em; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-device__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-md); }
.am-device__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-md); min-height: 24px; }
.am-device__last { font: 400 12px/16px var(--font-text); letter-spacing: .01em; color: var(--text-muted); }
.am-device__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-md); flex: none; min-height: 24px; padding-top: 4px; }
.am-device__check { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-primary); color: var(--on-brand); }
.am-device__check .am-icon { width: 16px; height: 16px; }
.am-signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.am-signal span { width: 4px; border-radius: 1px; background: var(--border); }
.am-signal span:nth-child(1) { height: 6px; } .am-signal span:nth-child(2) { height: 10px; } .am-signal span:nth-child(3) { height: 14px; }
.am-signal span.on { background: var(--text-secondary); }
.am-signal.is-weak span.on { background: var(--status-weak); }

/* ============ Sheet, dialog, scrim ============ */
.am-sheet-host { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; z-index: var(--z-sheet); }
.am-scrim { position: absolute; inset: 0; background: var(--scrim); animation: am-fade var(--duration-base) var(--ease-out); }
.am-sheet { position: relative; box-sizing: border-box; background: var(--surface-elevated); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-sheet); padding: 0 var(--space-xl) var(--space-xl); display: flex; flex-direction: column; animation: am-up var(--duration-base) var(--ease-out); }
.am-sheet--full { min-height: 88%; }
.am-sheet__handle { width: 36px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 8px auto 16px; opacity: .6; flex: none; }
.am-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
.am-sheet__title { font: 700 20px/28px var(--font-display); letter-spacing: -.01em; }
.am-sheet__sub { font: 400 14px/20px var(--font-text); color: var(--text-secondary); }
.am-sheet__body { display: flex; flex-direction: column; gap: var(--space-md); }
.am-sheet--compact .am-sheet__body { gap: var(--space-sm); }
.am-sheet__foot { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-xl); }
.am-dialog { width: 100%; max-width: 320px; box-sizing: border-box; padding: var(--space-xl); border-radius: var(--radius-xl); background: var(--surface-elevated); border: 1px solid var(--border); box-shadow: var(--shadow-float); text-align: center; display: flex; flex-direction: column; align-items: center; animation: am-pop var(--duration-slow) var(--ease-out); }
.am-dialog__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--key); color: var(--text-primary); margin-bottom: var(--space-lg); }
.am-dialog--error .am-dialog__icon { background: var(--error-soft); color: var(--error); }
.am-dialog--success .am-dialog__icon { background: var(--accent); color: var(--brand-ink); }
.am-dialog--info .am-dialog__icon { background: var(--info-soft); color: var(--info); }
.am-dialog__title { font: 700 20px/28px var(--font-display); letter-spacing: -.01em; }
.am-dialog__body { font: 400 15px/22px var(--font-text); color: var(--text-secondary); margin-top: var(--space-sm); }
.am-dialog__actions { width: 100%; display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-xl); }
@keyframes am-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes am-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes am-pop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============ Toast, snackbar ============ */
.am-toast { display: flex; align-items: center; gap: var(--space-md); min-height: 64px; padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-md); box-sizing: border-box; border-radius: var(--radius-lg); background: var(--surface-elevated); border: 1px solid var(--border); box-shadow: var(--shadow-float); max-width: 360px; animation: am-in var(--duration-base) var(--ease-out); }
.am-toast__icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--accent); color: var(--brand-ink); }
.am-toast--error .am-toast__icon { background: var(--error-soft); color: var(--error); }
.am-toast--warning .am-toast__icon { background: var(--warning-soft); color: var(--warning); }
.am-toast--info .am-toast__icon, .am-toast--neutral .am-toast__icon { background: var(--info-soft); color: var(--info); }
.am-toast__title { font: 700 15px/20px var(--font-text); }
.am-toast__msg { font: 400 13px/18px var(--font-text); color: var(--text-secondary); margin-top: 2px; }
.am-snack { display: flex; align-items: center; gap: var(--space-md); min-height: 56px; padding: 0 var(--space-xs) 0 var(--space-lg); box-sizing: border-box; border-radius: var(--radius-md); background: var(--text-primary); color: var(--bg-base); box-shadow: var(--shadow-float); max-width: 390px; font: 400 14px/20px var(--font-text); animation: am-up var(--duration-base) var(--ease-out); }
.am-snack__msg { flex: 1; padding: var(--space-md) 0; }
.am-snack__action { border: 0; background: transparent; color: var(--bg-base); font: 700 14px/18px var(--font-text); text-decoration: underline; text-underline-offset: 3px; height: 48px; padding: 0 var(--space-md); border-radius: var(--radius-sm); cursor: pointer; }
.am-snack .am-iconbtn { color: var(--bg-base); }
.am-snack .am-iconbtn:active { background: transparent; }

/* ============ Fields ============ */
.am-field { display: flex; flex-direction: column; gap: var(--space-sm); width: 100%; }
.am-field__label { font: 700 13px/16px var(--font-text); letter-spacing: .01em; color: var(--text-secondary); }
.am-field__box { display: flex; align-items: center; gap: var(--space-sm); height: 52px; padding: 0 4px 0 var(--space-lg); box-sizing: border-box; border-radius: var(--radius-sm); background: var(--surface); border: var(--border-control) solid var(--border-strong); color: var(--text-secondary); transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.am-field__box:focus-within, .am-field.is-focused .am-field__box { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.am-field.is-error .am-field__box { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.am-field.is-disabled { opacity: var(--opacity-disabled); }
.am-field__input, .am-search__input, .am-kb__input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); font: 400 16px/24px var(--font-text); padding: 0; }
.am-field__input::placeholder, .am-search__input::placeholder, .am-kb__input::placeholder { color: var(--text-muted); }
.am-field__clear { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 50%; flex: none; padding: 0; }
.am-field__help { display: flex; align-items: center; gap: 6px; font: 400 13px/16px var(--font-text); color: var(--text-muted); }
.am-field.is-error .am-field__help { color: var(--error); }
.am-search { display: flex; align-items: center; gap: var(--space-sm); height: 48px; padding: 0 2px 0 var(--space-lg); box-sizing: border-box; border-radius: var(--radius-full); background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); }
.am-search:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.am-pin { display: flex; gap: var(--space-sm); justify-content: center; }
.am-pin__cell { width: 56px; height: 68px; display: grid; place-items: center; box-sizing: border-box; border-radius: var(--radius-sm); background: var(--surface); border: var(--border-control) solid var(--border-strong); font: 600 32px/40px var(--font-mono); color: var(--text-primary); }
.am-pin__cell.is-active { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.am-pin__cell.is-active::after { content: ""; width: 2px; height: 32px; border-radius: 1px; background: var(--focus); animation: am-caret 1s steps(1) infinite; }
.am-pin__cell.is-error { border-color: var(--error); color: var(--error); }
@keyframes am-caret { 50% { opacity: 0; } }

/* ============ Number pad, colour keys ============ */
.am-numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.am-numpad__key { height: 56px; display: grid; place-items: center; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--key); box-shadow: var(--shadow-key); color: var(--text-primary); font: 600 24px/32px var(--font-display); font-variant-numeric: tabular-nums; cursor: pointer; padding: 0; transition: transform var(--duration-fast) var(--ease-press), background-color var(--duration-fast); }
.am-numpad__key.is-special { background: transparent; box-shadow: none; border-color: transparent; color: var(--text-secondary); }
.am-numpad__key:active, .am-numpad__key.is-pressed { background: var(--key-pressed); box-shadow: var(--shadow-key-pressed); transform: scale(.96); }
.am-colorkeys { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); }
.am-colorkey { position: relative; height: 48px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--key); box-shadow: var(--shadow-key); color: var(--text-secondary); cursor: pointer; padding: 0; overflow: hidden; transition: transform var(--duration-fast) var(--ease-press); }
.am-colorkey__bar { position: absolute; left: 12px; right: 12px; top: 0; height: 4px; border-radius: 0 0 2px 2px; }
.am-colorkey__label { font: 700 13px/16px var(--font-text); margin-top: 4px; }
.am-colorkey--red .am-colorkey__bar { background: var(--tvkey-red); }
.am-colorkey--green .am-colorkey__bar { background: var(--tvkey-green); }
.am-colorkey--yellow .am-colorkey__bar { background: var(--tvkey-yellow); }
.am-colorkey--blue .am-colorkey__bar { background: var(--tvkey-blue); }
.am-colorkey:active:not(:disabled), .am-colorkey.is-pressed { background: var(--key-pressed); transform: scale(.96); box-shadow: var(--shadow-key-pressed); }
.am-colorkey:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }

/* ============ TV keyboard ============ */
.am-kb { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg); box-sizing: border-box; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.am-kb__mirror { display: flex; align-items: center; height: 64px; padding: 0 4px 0 var(--space-lg); box-sizing: border-box; border-radius: var(--radius-md); background: var(--bg-base); border: var(--border-control) solid var(--border-strong); }
.am-kb__mirror:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.am-kb__input { font: 600 20px/28px var(--font-display); letter-spacing: -.01em; }
.am-kb.is-unavailable .am-kb__mirror { opacity: var(--opacity-disabled); border-style: dashed; }
.am-kb__sugg { display: flex; gap: var(--space-sm); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--space-lg)); padding: 0 var(--space-lg); }
.am-chip { height: 36px; padding: 0 var(--space-md); box-sizing: border-box; border-radius: var(--radius-full); background: var(--key); border: 1px solid var(--border); color: var(--text-primary); font: 400 14px/20px var(--font-text); white-space: nowrap; cursor: pointer; flex: none; }
.am-kb__actions { display: flex; gap: var(--space-sm); align-items: center; }
.am-kb__actions .am-btn { flex: 1; }

/* ============ Tab bar, segmented, switch ============ */
.am-tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: var(--space-sm) var(--space-sm) 4px; background: var(--bg-elevated); border-top: 1px solid var(--divider); }
.am-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 52px; border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; padding: 0; }
.am-tab__pill { position: relative; width: 64px; height: 32px; border-radius: var(--radius-full); display: grid; place-items: center; transition: background-color var(--duration-fast) var(--ease-standard); }
.am-tab__pill .am-dot { position: absolute; top: 4px; right: 18px; box-shadow: 0 0 0 2px var(--bg-elevated); }
.am-tab.is-active .am-tab__pill .am-dot { box-shadow: 0 0 0 2px var(--accent); }
.am-tab.is-active .am-tab__pill { background: var(--accent); color: var(--brand-ink); }
.am-tab.is-active .am-tab__label { color: var(--text-primary); }
.am-tab__label { font: 700 11px/14px var(--font-text); letter-spacing: .02em; }
.am-seg { display: flex; padding: 3px; gap: 2px; box-sizing: border-box; height: 44px; border-radius: var(--radius-full); background: var(--bg-elevated); border: 1px solid var(--border); }
.am-seg__opt { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--text-secondary); font: 700 13px/16px var(--font-text); letter-spacing: .01em; cursor: pointer; white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast); }
.am-seg__opt.is-on { background: var(--text-primary); color: var(--bg-base); }
.am-seg__opt:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.am-switch { position: relative; width: 52px; height: 32px; flex: none; box-sizing: border-box; border-radius: var(--radius-full); background: var(--bg-elevated); border: var(--border-control) solid var(--border-strong); cursor: pointer; padding: 0; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast); }
.am-switch::after { content: ""; position: absolute; inset: -8px -2px; }
.am-switch__thumb { position: absolute; top: 50%; left: 4px; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--text-secondary); transition: transform var(--duration-fast) var(--ease-press), background-color var(--duration-fast), width var(--duration-fast), height var(--duration-fast), margin var(--duration-fast); }
.am-switch.is-on { background: var(--brand-primary); border-color: var(--brand-edge); }
.am-switch.is-on .am-switch__thumb { transform: translateX(20px); width: 24px; height: 24px; margin-top: -12px; margin-left: -2px; background: var(--on-brand); }
.am-switch:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }

/* ============ Progress, radar, skeleton ============ */
.am-spinner { animation: am-spin 800ms linear infinite; flex: none; }
@keyframes am-spin { to { transform: rotate(360deg); } }
.am-bar { width: 100%; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.am-bar > span { display: block; height: 100%; border-radius: 2px; background: var(--brand-primary); transition: width var(--duration-base) var(--ease-standard); }
.am-bar--secondary > span { background: var(--brand-secondary); }
.am-bar.is-indeterminate > span { width: 36%; animation: am-indet 1200ms var(--ease-standard) infinite; }
@keyframes am-indet { from { transform: translateX(-100%); } to { transform: translateX(280%); } }
.am-ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.am-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.am-ring__track { fill: none; stroke: var(--border); stroke-width: 4; }
.am-ring__fill { fill: none; stroke: var(--brand-primary); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset var(--duration-base) var(--ease-standard); }
.am-ring--secondary .am-ring__fill { stroke: var(--brand-secondary); }
.am-ring.is-indeterminate svg { animation: am-spin 900ms linear infinite; }
.am-ring__label { position: relative; font: 600 13px/16px var(--font-display); font-variant-numeric: tabular-nums; }
.am-radar { position: relative; flex: none; color: var(--brand-secondary); }
.am-radar__ring { position: absolute; border-radius: 50%; border: 1px solid var(--border); }
.am-radar__ring.r1 { inset: 0; } .am-radar__ring.r2 { inset: 17%; } .am-radar__ring.r3 { inset: 34%; border-color: var(--border-strong); border-style: dashed; }
.am-radar__pulse { position: absolute; inset: 34%; border-radius: 50%; border: 2px solid var(--brand-secondary); animation: am-radar var(--duration-pulse) var(--ease-out) infinite; }
@keyframes am-radar { from { transform: scale(1); opacity: .9; } to { transform: scale(3); opacity: 0; } }
.am-radar__core { position: absolute; inset: 38%; border-radius: 50%; display: grid; place-items: center; background: var(--brand-secondary-soft); color: var(--brand-secondary); box-shadow: 0 0 0 1px var(--brand-secondary); }
.am-radar__blip { position: absolute; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--brand-primary); box-shadow: 0 0 0 6px var(--accent); animation: am-pop var(--duration-slow) var(--ease-out); }
.am-skel { display: block; height: 12px; border-radius: var(--radius-xs); background: linear-gradient(90deg, var(--key) 0%, var(--surface-pressed) 50%, var(--key) 100%); background-size: 200% 100%; animation: am-shimmer 1400ms linear infinite; }
.am-skel--circle { border-radius: 50%; }
.am-skel--tile { width: 48px; height: 48px; border-radius: var(--radius-sm); flex: none; }
.am-skel-card { display: flex; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); }
.am-skel-card__lines { flex: 1; display: flex; flex-direction: column; gap: var(--space-sm); padding-top: 8px; }
@keyframes am-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ============ States ============ */
.am-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-2xl) var(--space-lg); gap: var(--space-sm); }
.am-state__icon { width: 88px; height: 88px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); margin-bottom: var(--space-md); }
.am-state--error .am-state__icon { background: var(--error-soft); color: var(--error); border-color: transparent; }
.am-state--warning .am-state__icon { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.am-state--unsupported .am-state__icon { border-style: dashed; border-color: var(--border-strong); background: transparent; color: var(--text-muted); }
.am-state__title { font: 700 20px/28px var(--font-display); letter-spacing: -.01em; }
.am-state__body { font: 400 15px/22px var(--font-text); color: var(--text-secondary); max-width: 300px; }
.am-state__tips { list-style: none; width: 100%; max-width: 320px; box-sizing: border-box; padding: var(--space-md) var(--space-lg); margin: var(--space-sm) 0 0; text-align: left; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--space-sm); font: 400 14px/20px var(--font-text); color: var(--text-secondary); }
.am-state__tips li { display: flex; gap: var(--space-sm); align-items: flex-start; }
.am-state__tips .am-icon { color: var(--brand-ink); margin-top: 2px; }
.am-state__actions { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-lg); width: 100%; max-width: 320px; }
.am-state__code { font: 500 12px/16px var(--font-mono); color: var(--text-muted); margin-top: var(--space-xs); }

/* ============ Permission ============ */
.am-perm { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-sm); padding: var(--space-xl); box-sizing: border-box; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--border); max-width: 360px; }
.am-perm__icon { width: 72px; height: 72px; border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--brand-secondary-soft); color: var(--brand-secondary); margin-bottom: var(--space-sm); box-shadow: inset 0 0 0 1px var(--brand-secondary); }
.am-perm.is-denied .am-perm__icon { background: var(--warning-soft); color: var(--warning); box-shadow: inset 0 0 0 1px var(--warning); }
.am-perm.is-granted .am-perm__icon { background: var(--accent); color: var(--brand-ink); box-shadow: none; }
.am-perm__title { font: 700 20px/28px var(--font-display); letter-spacing: -.01em; }
.am-perm__body { font: 400 15px/22px var(--font-text); color: var(--text-secondary); }
.am-perm__privacy { display: flex; align-items: center; gap: 6px; font: 400 12px/16px var(--font-text); color: var(--text-muted); margin-top: var(--space-xs); }
.am-perm__actions { display: flex; flex-direction: column; gap: var(--space-sm); width: 100%; margin-top: var(--space-lg); }

/* ============ Quick actions ============ */
.am-qa { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg) var(--space-md); }
.am-qa__cell { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); min-width: 0; }
.am-qa__tile { position: relative; width: 100%; max-width: 72px; aspect-ratio: 1; box-sizing: border-box; border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--key); border: 1px solid var(--border); box-shadow: var(--shadow-key); color: var(--text-primary); cursor: pointer; padding: 0; transition: transform var(--duration-fast) var(--ease-press); }
.am-qa__tile:active:not(:disabled) { transform: scale(.94); background: var(--key-pressed); box-shadow: var(--shadow-key-pressed); }
.am-qa__mono { font: 800 26px/1 var(--font-display); letter-spacing: -.03em; }
.am-qa__label { font: 400 12px/16px var(--font-text); letter-spacing: .01em; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.am-qa__tile.is-unsupported { opacity: var(--opacity-disabled); border-style: dashed; box-shadow: none; }
.am-qa__tile--add { background: transparent; border: var(--border-control) dashed var(--border-strong); color: var(--text-secondary); box-shadow: none; }
.am-qa__remove { position: absolute; top: -6px; left: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--text-primary); color: var(--bg-base); }
.am-qa.is-editing .am-qa__tile:not(.am-qa__tile--add) { animation: am-wiggle 260ms ease-in-out infinite alternate; }
@keyframes am-wiggle { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }

/* ============ List ============ */
.am-group { display: flex; flex-direction: column; gap: var(--space-sm); }
.am-group__title { margin: 0; padding: 0 var(--space-xs); font: 700 13px/16px var(--font-text); letter-spacing: .01em; color: var(--text-secondary); }
.am-group__rows { border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.am-group__foot { margin: 0; padding: 0 var(--space-xs); font: 400 13px/18px var(--font-text); color: var(--text-muted); }
.am-row { position: relative; display: flex; align-items: center; gap: var(--space-md); width: 100%; min-height: 56px; padding: var(--space-sm) var(--space-lg); box-sizing: border-box; border: 0; background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; }
.am-row + .am-row::before { content: ""; position: absolute; top: 0; right: 0; left: var(--space-lg); height: 1px; background: var(--divider); }
.am-row + .am-row:has(.am-row__icon)::before { left: 60px; }
div.am-row { cursor: default; }
.am-row:active:not(div) { background: var(--surface-pressed); }
.am-row__icon { width: 32px; height: 32px; box-sizing: border-box; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--key); color: var(--text-primary); border: 1px solid var(--border); flex: none; }
.am-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.am-row__title { font: 400 16px/22px var(--font-text); }
.am-row__sub { font: 400 13px/18px var(--font-text); color: var(--text-secondary); }
.am-row__value { display: flex; align-items: center; gap: 4px; font: 400 15px/20px var(--font-text); color: var(--text-secondary); flex: none; }
.am-row__value .am-icon { color: var(--text-muted); }
.am-row.is-destructive .am-row__title { color: var(--error); font-weight: 700; }
.am-row.is-selected { background: var(--accent); }
.am-row.is-selected .am-row__title { color: var(--brand-ink); font-weight: 700; }
.am-row.is-selected > .am-icon { color: var(--brand-ink); }

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .am-dot--connecting::after, .am-dot--pairing::after, .am-radar__pulse { display: none; }
  .am-spinner, .am-ring.is-indeterminate svg { animation: am-spin 1600ms linear infinite !important; }
}