/* OpenCapsule UFUI — Material 3 look (baseline purple seed). */
:root {
  --primary: #6750a4; --on-primary: #fff; --primary-container: #eaddff; --on-primary-container: #21005d;
  --secondary-container: #e8def8; --on-secondary-container: #1d192b;
  --tertiary-container: #ffd8e4; --on-tertiary-container: #31111d;
  --error: #b3261e; --error-container: #f9dedc;
  --surface: #fef7ff; --surface-1: #f7f2fa; --surface-2: #f3edf7; --surface-3: #ece6f0;
  --on-surface: #1d1b20; --on-surface-variant: #49454f; --outline: #79747e; --outline-variant: #cac4d0;
  --shadow: 0 1px 3px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.1);
  --radius-l: 28px; --radius-m: 16px; --radius-s: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #d0bcff; --on-primary: #381e72; --primary-container: #4f378b; --on-primary-container: #eaddff;
    --secondary-container: #4a4458; --on-secondary-container: #e8def8;
    --tertiary-container: #633b48; --on-tertiary-container: #ffd8e4;
    --error: #f2b8b5; --error-container: #8c1d18;
    --surface: #141218; --surface-1: #1d1b20; --surface-2: #211f26; --surface-3: #2b2930;
    --on-surface: #e6e0e9; --on-surface-variant: #cac4d0; --outline: #938f99; --outline-variant: #49454f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --primary: #d0bcff; --on-primary: #381e72; --primary-container: #4f378b; --on-primary-container: #eaddff;
  --secondary-container: #4a4458; --on-secondary-container: #e8def8;
  --tertiary-container: #633b48; --on-tertiary-container: #ffd8e4;
  --error: #f2b8b5; --error-container: #8c1d18;
  --surface: #141218; --surface-1: #1d1b20; --surface-2: #211f26; --surface-3: #2b2930;
  --on-surface: #e6e0e9; --on-surface-variant: #cac4d0; --outline: #938f99; --outline-variant: #49454f;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; }
html, body { min-height: 100%; }
body { background: var(--surface); color: var(--on-surface); font: 15px/1.5 var(--panel-font, "Roboto Flex", Roboto, "Segoe UI", system-ui, sans-serif); -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.ms { font-family: "Material Symbols Rounded"; font-size: 24px; line-height: 1; font-variation-settings: "FILL" 0, "wght" 400; user-select: none; font-style: normal; font-weight: 400; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: 'liga'; display: inline-block; width: 1em; flex-shrink: 0; overflow: hidden; vertical-align: middle; }

/* Layout: navigation rail on wide screens, bottom bar on phones */
.app { display: flex; min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; width: 88px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 0; background: var(--surface); }
.rail__logo { width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--primary); margin-bottom: 12px; }
.rail__logo.off { border-color: var(--outline); }
.dest { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 80px; border: 0; background: none; cursor: pointer; color: var(--on-surface-variant); font-size: 12px; font-weight: 500; }
.dest .ms { width: 56px; height: 32px; display: grid; place-items: center; border-radius: 16px; transition: background .2s; }
.dest:hover .ms { background: var(--surface-3); }
.dest[aria-current] { color: var(--on-surface); }
.dest[aria-current] .ms { background: var(--secondary-container); color: var(--on-secondary-container); font-variation-settings: "FILL" 1; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; height: 64px; padding: 0 16px 0 24px; background: var(--surface); }
.topbar h1 { flex: 1; font-size: 22px; font-weight: 400; }
.content { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 8px 24px 96px; }
@media (max-width: 839px) {
  .rail { position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 10; width: auto; height: 80px; flex-direction: row; justify-content: space-around; gap: 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: var(--surface-2); }
  .rail__logo, .dest--wide { display: none; }
  .dest { width: auto; flex: 1; }
  .dest .ms { width: 64px; }
  .topbar { padding: 0 8px 0 16px; }
  .content { padding: 4px 16px 112px; }
}
/* Cards and grid */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
.card { background: var(--surface-1); border-radius: var(--radius-m); padding: 20px; display: grid; gap: 14px; }
.card--filled { background: var(--surface-3); }
.card--primary { background: var(--primary-container); color: var(--on-primary-container); }
.card h2 { font-size: 16px; font-weight: 500; letter-spacing: .1px; }
.muted { color: var(--on-surface-variant); }
.small { font-size: 13px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row > .grow { flex: 1; min-width: 0; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--outline-variant); }
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--on-surface-variant); }
.kv b { font-weight: 500; text-align: right; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 24px; border: 0; border-radius: 20px; background: var(--primary); color: var(--on-primary); font-weight: 500; font-size: 14px; letter-spacing: .1px; cursor: pointer; white-space: nowrap; }
.btn .ms { font-size: 18px; }
.btn--tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.btn--outlined { background: none; color: var(--primary); box-shadow: inset 0 0 0 1px var(--outline); }
.btn--text { background: none; color: var(--primary); padding: 0 12px; }
.btn--danger { background: var(--error-container); color: var(--on-surface); }
.btn:disabled { opacity: .38; cursor: default; }
.btn:not(:disabled):hover { filter: brightness(1.08); }
.icon-btn { width: 40px; height: 40px; border: 0; border-radius: 20px; background: none; display: inline-grid; place-items: center; cursor: pointer; color: var(--on-surface-variant); }
.icon-btn:hover { background: var(--surface-3); }
.icon-btn--tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.fab { position: fixed; right: 24px; bottom: 24px; z-index: 8; height: 56px; padding: 0 20px; border: 0; border-radius: 16px; background: var(--primary-container); color: var(--on-primary-container); display: inline-flex; align-items: center; gap: 12px; font-weight: 500; box-shadow: 0 3px 8px rgba(0,0,0,.25); cursor: pointer; }
@media (max-width: 839px) { .fab { bottom: 96px; right: 16px; } }

/* Chips, banners */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--outline-variant); font-size: 13px; font-weight: 500; color: var(--on-surface-variant); background: none; cursor: default; }
button.chip { cursor: pointer; }
.chip--on { background: var(--secondary-container); color: var(--on-secondary-container); box-shadow: none; }
.chip--ok { color: #1b6c33; }
.chip--bad { color: var(--error); }
.banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-m); background: var(--tertiary-container); color: var(--on-tertiary-container); }
.banner .grow { flex: 1; }

/* Fields */
.field { display: grid; gap: 6px; }
.field > span { font-size: 13px; color: var(--on-surface-variant); }
.field small { color: var(--on-surface-variant); font-size: 12px; }
.input, select.input, textarea.input { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 4px; border: 1px solid var(--outline); background: transparent; outline: none; }
.input:focus { border: 2px solid var(--primary); padding: 9px 13px; }
textarea.input { resize: vertical; }
input[type=color] { width: 48px; height: 40px; border: 0; padding: 0; background: none; cursor: pointer; }
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; }

/* Slider */
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 16px; border-radius: 8px; background: linear-gradient(90deg, var(--primary) var(--pct, 50%), var(--secondary-container) var(--pct, 50%)); outline: none; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: 44px; border-radius: 2px; background: var(--primary); box-shadow: 0 0 0 6px var(--surface-1); cursor: pointer; }
.slider::-moz-range-thumb { width: 4px; height: 44px; border: 0; border-radius: 2px; background: var(--primary); cursor: pointer; }

/* Switch */
.switch { position: relative; width: 52px; height: 32px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 16px; background: var(--surface-3); box-shadow: inset 0 0 0 2px var(--outline); transition: .2s; pointer-events: none; }
.switch i::after { content: ""; position: absolute; left: 8px; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--outline); transition: .2s; }
.switch input:checked + i { background: var(--primary); box-shadow: none; }
.switch input:checked + i::after { left: 24px; top: 4px; width: 24px; height: 24px; background: var(--on-primary); }

/* Lists */
.list { display: grid; }
.item { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--outline-variant); }
.item:last-child { border-bottom: 0; }
.item .grow { flex: 1; min-width: 0; }
.item .title { font-weight: 500; }
.item .sub { font-size: 13px; color: var(--on-surface-variant); overflow: hidden; text-overflow: ellipsis; }
.item--hi { background: var(--tertiary-container); border-radius: var(--radius-s); padding: 8px 12px; border: 0; }
.progress { height: 4px; border-radius: 2px; background: var(--secondary-container); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--primary); transition: width .3s linear; }

/* Bubbles, logs */
.bubble { padding: 10px 14px; border-radius: var(--radius-s); background: var(--surface-3); display: grid; gap: 2px; }
.bubble small { font-size: 12px; color: var(--on-surface-variant); }
.bubble--bot { background: var(--secondary-container); color: var(--on-secondary-container); }
pre.logs { white-space: pre-wrap; word-break: break-word; font: 12.5px/1.6 ui-monospace, Consolas, monospace; max-height: 70vh; overflow: auto; }

/* Snackbar, dialog, ring */
.snackbar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30; max-width: min(560px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 4px; background: var(--on-surface); color: var(--surface); box-shadow: var(--shadow); font-size: 14px; }
.snackbar--err { background: var(--error); color: #fff; }
@media (max-width: 839px) { .snackbar { bottom: 96px; } }
dialog { border: 0; border-radius: var(--radius-l); padding: 24px; margin: auto; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; background: var(--surface-3); color: var(--on-surface); }
dialog::backdrop { background: rgba(0,0,0,.4); }
dialog h2 { font-size: 24px; font-weight: 400; margin-bottom: 16px; }
.ring { position: relative; width: 200px; height: 200px; border-radius: 50%; margin: 8px auto; background: radial-gradient(circle, var(--surface-3) 56%, var(--surface-2) 57%); }
.ring--mini { width: 88px; height: 88px; margin: 0; flex: none; }
.ring i { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: #333; }
.ring--mini i { width: 9px; height: 9px; margin: -4.5px; }
/* ---- pages (ui.js) ---- */
:root { --ok: #1b6c33; --warn: #8a5300; }
:root[data-theme="dark"] { --ok: #7fdc96; --warn: #ffb95c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ok: #7fdc96; --warn: #ffb95c; } }
.page { display: grid; gap: 16px; }
.ok { color: var(--ok); }
.bad { color: var(--error); }
.warn { color: var(--warn); }
.mono { font-variant-numeric: tabular-nums; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nowrap { white-space: nowrap; }
.center { text-align: center; justify-content: center; }
.chip--ok { color: var(--ok); }
.ms--fill { font-variation-settings: "FILL" 1, "wght" 400; }
.banners { display: grid; gap: 8px; }
.banners:empty { display: none; }
.banner .ms { flex: none; }
.banner--alert { background: var(--error-container); color: var(--on-surface); animation: oc-pulse 1.2s ease-in-out infinite; }
@keyframes oc-pulse { 50% { filter: brightness(1.08); } }
@media (prefers-reduced-motion: reduce) { .banner--alert { animation: none; } }
.status__head { display: flex; align-items: center; gap: 16px; }
.status__state { font-size: 22px; line-height: 1.3; }
.vol { display: flex; align-items: center; gap: 12px; }
.vol .slider { flex: 1; min-width: 0; }
.vol output { min-width: 4.5em; text-align: right; font-variant-numeric: tabular-nums; color: var(--on-surface-variant); font-size: 13px; }
.vol .ms { color: var(--on-surface-variant); }
.form-line { flex-wrap: nowrap; }
.form-line > .input, .form-line > select { flex: 1; min-width: 0; }
.icon-btn { flex: none; }
.icon-btn--filled { background: var(--primary); color: var(--on-primary); }
.icon-btn--filled:hover { background: var(--primary); filter: brightness(1.1); }
.icon-btn--on { color: var(--error); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips:empty { display: none; }
.chip .ms { font-size: 18px; }
.chip--assist { background: var(--surface-1); }
.chips button.chip:hover { background: var(--surface-3); }
.chips button.chip.chip--on:hover { background: var(--secondary-container); }
.segmented { display: flex; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--outline); overflow: hidden; min-width: 0; }
.segmented button { flex: 1; min-width: 0; height: 40px; padding: 0 10px; border: 0; border-left: 1px solid var(--outline); background: none; cursor: pointer; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.segmented button:first-child { border-left: 0; }
.segmented button .ms { font-size: 18px; }
.segmented button[aria-checked="true"] { background: var(--secondary-container); color: var(--on-secondary-container); }
@media (max-width: 420px) { .segmented button .ms { display: none; } }

/* items */
.item__icon { color: var(--on-surface-variant); flex: none; }
.item--off { opacity: .55; }
.item--active { background: var(--secondary-container); border-radius: var(--radius-s); padding: 8px; border: 0; }
.item .progress { margin-top: 6px; }
.alarm__time { font-size: 32px; line-height: 1.15; font-weight: 400; }
.item .title.mono { font-size: 20px; }

/* music */
.np { display: flex; gap: 16px; align-items: center; min-width: 0; }
.cover { width: 96px; height: 96px; flex: none; border-radius: var(--radius-s); background: var(--secondary-container); color: var(--on-secondary-container); display: grid; place-items: center; overflow: hidden; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover .ms { font-size: 40px; }
.np__meta { min-width: 0; display: grid; gap: 2px; }
.np__title { font-size: 18px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.np__artist { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np__time { display: flex; align-items: center; gap: 10px; }
.np__bar { flex: 1; height: 6px; border-radius: 3px; background: var(--secondary-container); cursor: pointer; overflow: hidden; }
.np__bar i { display: block; height: 100%; background: var(--primary); transition: width .25s linear; }
.np__ctl { display: flex; justify-content: center; align-items: center; gap: 8px; }
.np__ctl--off { opacity: .5; }
.np__play { width: 56px; height: 56px; border-radius: 16px; }
.np__play .ms { font-size: 32px; }
.music__body { display: grid; gap: 14px; min-width: 0; }
.thumb { width: 40px; height: 40px; border-radius: 8px; flex: none; object-fit: cover; background: var(--surface-3); display: grid; place-items: center; }
.item--track { min-height: 52px; gap: 10px; }
.queue { max-height: 320px; overflow: auto; }
.queue__wrap summary { cursor: pointer; font-weight: 500; padding: 4px 0; color: var(--on-surface-variant); }

/* rings */
.ring--mid { width: 136px; height: 136px; margin: 0; flex: none; }
.ring--mid i { width: 13px; height: 13px; margin: -6.5px; }
.signals { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.signals > .grow { flex: 1; min-width: min(100%, 240px); }
@media (max-width: 480px) { .signals { justify-content: center; } }
.color-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }

/* forms, dialogs */
.dialog__form { display: grid; gap: 12px; min-width: 0; }
.dialog__body { max-height: min(70vh, 640px); overflow: auto; padding: 2px; }
.dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
dialog p { color: var(--on-surface-variant); }
.hms { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
.file { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-s); border: 1px dashed var(--outline); cursor: pointer; min-width: 0; }
.file input { min-width: 0; flex: 1; font-size: 13px; }
.settings { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }
.save-bar { position: static; display: flex; justify-content: flex-start; grid-column: 1 / -1; pointer-events: auto; }
.save-bar .btn { pointer-events: auto; box-shadow: none; min-height: 40px; }
@media (max-width: 839px) { .save-bar { bottom: 96px; } }
.progress--level i { transition: none; background: var(--ok); }
.clip { gap: 8px; }
.clip .input { min-height: 40px; padding: 6px 10px; }
.clip .input:focus { padding: 5px 9px; }
a.btn { text-decoration: none; justify-self: start; }
.card a:not(.btn) { color: var(--primary); }

.command-url { overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 839px) { .rail .dest { font-size: 10px; } }

/* login */
.login { position: fixed; inset: 0; z-index: 40; background: var(--surface); display: grid; place-items: center; padding: 16px; }
.login__card { width: min(380px, 100%); }
.login__logo { width: 48px; height: 48px; border-radius: 50%; border: 5px solid var(--primary); }

/* narrow screens: nothing may overflow 360px */
@media (max-width: 480px) {
  .card { padding: 16px; }
  .cover { width: 72px; height: 72px; }
  .alarm__time { font-size: 28px; }
  .btn { padding: 0 16px; }
  .topbar h1 { font-size: 20px; }
  .topbar .chip { max-width: 40vw; overflow: hidden; white-space: nowrap; }
}
.topbar h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 840px) { #log-btn { display: none; } }
@media (max-width: 839px) {
  .dest { flex: 1 1 0; min-width: 0; font-size: 11px; letter-spacing: 0; }
  .dest { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .dest .ms { width: min(64px, 100%); }
}
@media (max-width: 420px) {
  .segmented button { font-size: 13px; padding: 0 6px; }
}

/* Persistent navigation and a compact overview. */
.app { min-height: 100dvh; }
button, a, summary, input[type=range] { touch-action: manipulation; }
.oc-navigation { position: fixed; inset: 16px auto 16px 16px; z-index: 12; width: 208px; padding: 18px 12px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--outline-variant); border-radius: 24px; background: var(--surface-1); overflow-y: auto; }
.nav-brand { display: flex; align-items: center; gap: 12px; padding: 10px 8px 26px; text-decoration: none; color: var(--on-surface); font-size: 17px; font-weight: 600; }
.nav-brand small { display: block; color: var(--on-surface-variant); font-size: 12px; font-weight: 400; }
.nav-brand .rail__logo { margin: 0; width: 32px; height: 32px; flex: none; border-width: 3px; }
.nav-brand img.rail__logo { width: 40px; height: 40px; border: 0; border-radius: 12px; }
.topbar-brand { display: none; }
.login__logo { border: 0; border-radius: 14px; background: url('icon.svg') center / contain no-repeat; }
@media (max-width: 839px) {
  .topbar-brand { display: grid; place-items: center; flex: none; width: 40px; height: 44px; border-radius: 12px; }
  .topbar-brand img { display: block; border-radius: 11px; }
  .topbar h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; }
}
.oc-navigation .dest { width: 100%; min-height: 48px; flex: none; flex-direction: row; padding: 0 14px; gap: 12px; border-radius: 16px; font-size: 14px; text-align: left; }
.oc-navigation .dest .ms { width: 24px; height: 24px; flex: none; }
.oc-navigation .dest:hover { background: var(--surface-3); }
.oc-navigation .dest[aria-current] { background: var(--secondary-container); color: var(--on-secondary-container); }
.oc-navigation .dest--more { display: none; }
.nav-caption { margin-top: auto; padding: 24px 14px 4px; color: var(--on-surface-variant); font-size: 12px; }
.app > .main { margin-left: 240px; }
.topbar { height: 76px; padding: 0 28px; border-bottom: 1px solid var(--outline-variant); }
.content { max-width: 1240px; padding: 28px 28px 48px; }
.card { border: 1px solid color-mix(in srgb, var(--outline-variant) 50%, transparent); border-radius: 22px; min-width: 0; }
.page { min-width: 0; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; color: var(--primary); margin-bottom: 8px; }
.home-overview { padding: 26px 28px 0; background: linear-gradient(120deg, var(--primary-container), var(--surface-2) 85%); border: 1px solid var(--outline-variant); border-radius: 26px; overflow: hidden; }
.home-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.home-heading h2 { font-size: clamp(27px, 3vw, 36px); font-weight: 500; line-height: 1.2; margin-bottom: 8px; letter-spacing: -.7px; }
.home-heading p { font-size: 14px; }
.home-orbit { width: 84px; height: 84px; border: 1px solid var(--primary); border-radius: 50%; display: grid; place-items: center; color: var(--primary); flex: none; background: var(--surface-1); box-shadow: 0 0 0 10px color-mix(in srgb, var(--primary) 6%, transparent); }
.home-orbit .ms { font-size: 38px; }
.home-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 26px; border-top: 1px solid var(--outline-variant); }
.home-metric { display: flex; gap: 12px; align-items: center; padding: 18px 12px; min-width: 0; }
.home-metric:first-child { padding-left: 0; }
.home-metric + .home-metric { border-left: 1px solid var(--outline-variant); }
.home-metric > .ms { color: var(--primary); }
.home-metric span:not(.ms) { display: block; font-size: 12px; color: var(--on-surface-variant); }
.home-metric b { display: block; font-size: 15px; font-weight: 500; }
.home-quick { display: flex; flex-wrap: wrap; gap: 10px; }
.home-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.home-column { display: grid; gap: 20px; min-width: 0; }
.home-speaker .status__head { padding: 4px 0 12px; }
.home-speaker .status__state { font-size: 28px; letter-spacing: -.5px; }
.home-speaker .status__head h2 { color: var(--on-surface-variant); font-size: 13px; margin-bottom: 4px; }
.home-speaker .vol { padding: 14px 0; }
.home-speaker .row:empty { display: none; }
.speaker-details { border-top: 1px solid var(--outline-variant); padding-top: 14px; }
.speaker-details summary { cursor: pointer; font-size: 13px; color: var(--on-surface-variant); }
.speaker-details .kv { flex-wrap: wrap; font-size: 13px; }
.speaker-details .kv b { overflow-wrap: anywhere; }
.home-dialog .bubble { padding: 14px 16px; }
.home-dialog .bubble span { overflow-wrap: anywhere; }
.more-menu { display: grid; gap: 10px; }

/* Command constructor: library, three steps, request and spoken reply previews. */
.command-intro { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px; border-radius: 24px; background: var(--primary-container); color: var(--on-primary-container); }
.command-intro h2 { font-size: clamp(23px, 2.4vw, 30px); font-weight: 500; line-height: 1.2; margin-bottom: 10px; }
.command-intro p { max-width: 640px; font-size: 14px; color: inherit; opacity: .8; }
.command-intro > .ms { font-size: 54px; flex: none; opacity: .7; }
.command-toolbar { gap: 10px; }
.command-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.command-library { padding: 18px 12px; gap: 16px; position: sticky; top: 96px; }
.command-library > .row { padding: 0 8px; }
.command-list { display: grid; gap: 6px; }
.command-choice { width: 100%; padding: 14px 10px; background: transparent; color: var(--on-surface); border: 1px solid transparent; border-radius: 14px; display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; min-width: 0; }
.command-choice:hover { background: var(--surface-3); }
.command-choice--active { background: var(--secondary-container); border-color: var(--outline-variant); }
.command-choice__text { flex: 1; min-width: 0; }
.command-choice__text b, .command-choice__text small { display: block; overflow-wrap: anywhere; }
.command-choice__text small { color: var(--on-surface-variant); font-size: 12px; margin-top: 3px; }
.command-choice__icon { color: var(--primary); }
.command-choice > .ms { font-size: 18px; }
.command-editor { padding: 26px; gap: 24px; }
.command-editor > .row > h2 { font-size: 20px; }
.builder-step { display: grid; gap: 16px; padding-top: 24px; border-top: 1px solid var(--outline-variant); min-width: 0; }
.builder-step__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 2px; }
.builder-step__head h3, .builder-test h3 { font-size: 16px; font-weight: 500; }
.builder-step__head p { margin-top: 3px; }
.builder-step__number { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--secondary-container); color: var(--on-secondary-container); font-size: 13px; font-weight: 600; }
.builder-fields { display: grid; gap: 16px; min-width: 0; }
.request-address { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; }
.builder-details { padding: 12px 14px; border: 1px solid var(--outline-variant); border-radius: 12px; }
.builder-details summary, .builder-test summary { cursor: pointer; font-size: 13px; color: var(--on-surface-variant); }
.builder-details[open] summary { margin-bottom: 12px; }
.pair-rows { display: grid; gap: 8px; }
.pair-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) 36px; gap: 8px; align-items: center; }
.pair-row .icon-btn { width: 36px; }
.pair-row .input { min-width: 0; padding-left: 10px; padding-right: 10px; }
.pairs-editor > .btn { margin-top: 8px; }
.code-input { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.request-preview { display: grid; gap: 6px; padding: 12px 14px; background: var(--surface-2); border-radius: 12px; }
.request-line { font-size: 12px; overflow-wrap: anywhere; }
.reply-preview { padding: 18px; border-radius: 16px; background: var(--secondary-container); color: var(--on-secondary-container); display: grid; gap: 12px; }
.reply-preview__text { font-size: 19px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.reply-preview .ms { font-size: 19px; }
.builder-test { padding: 18px; border: 1px dashed var(--outline); border-radius: 16px; display: grid; gap: 16px; }
.test-answer { overflow-wrap: anywhere; white-space: pre-wrap; }
.raw-response { font: 12px/1.6 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 280px; overflow: auto; margin-top: 12px; }
.builder-actions { display: flex; gap: 10px; flex-wrap: wrap; position: sticky; bottom: 16px; z-index: 2; padding: 12px; margin: 0 -12px; border-radius: 18px; background: var(--surface-1); border: 1px solid var(--outline-variant); box-shadow: var(--shadow); }
.builder-actions .btn:last-child { margin-left: auto; }
.import-list { max-height: 320px; overflow: auto; }
.import-list .sub { white-space: normal; overflow-wrap: anywhere; }
.input { min-width: 0; }
.input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
@media (min-width: 840px) and (max-width: 1150px) {
  .oc-navigation { width: 178px; inset: 12px auto 12px 12px; padding: 14px 8px; }
  .app > .main { margin-left: 202px; }
  .nav-brand { font-size: 14px; gap: 8px; }
  .content { padding: 24px 20px 40px; }
  .command-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 14px; }
  .command-editor { padding: 20px; }
  .home-columns { gap: 14px; }
}
@media (max-width: 1000px) { .home-columns { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 839px) {
  .oc-navigation { inset: auto 0 0; width: 100%; height: calc(76px + env(safe-area-inset-bottom)); padding: 8px 4px calc(8px + env(safe-area-inset-bottom)); flex-direction: row; gap: 0; border-radius: 20px 20px 0 0; border: 0; border-top: 1px solid var(--outline-variant); background: var(--surface-2); overflow: visible; }
  .oc-navigation .nav-brand, .oc-navigation .nav-caption, .oc-navigation .dest--wide { display: none; }
  .oc-navigation .dest, .oc-navigation .dest--more { display: flex; width: 20%; min-width: 0; flex: 1 1 0; flex-direction: column; justify-content: center; gap: 3px; padding: 4px 0; font-size: 10px; border-radius: 14px; }
  .oc-navigation .dest.dest--wide { display: none; }
  .oc-navigation .dest .ms { width: 42px; height: 26px; }
  .app > .main { margin-left: 0; }
  .topbar { height: 64px; padding: 0 12px 0 16px; }
  .content { padding: 18px 16px calc(100px + env(safe-area-inset-bottom)); }
  .home-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .command-layout { grid-template-columns: minmax(0, 1fr); }
  .command-library { position: static; }
  .command-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
  .builder-actions { bottom: calc(90px + env(safe-area-inset-bottom)); }
}
@media (max-width: 650px) {
  .home-columns { grid-template-columns: minmax(0, 1fr); }
  .home-overview { padding: 22px 18px 0; }
  .home-orbit { width: 54px; height: 54px; }
  .home-orbit .ms { font-size: 28px; }
  .home-metric { padding: 14px 8px; gap: 6px; align-items: flex-start; }
  .home-metric > .ms { display: none; }
  .home-metric span:not(.ms) { font-size: 10px; }
  .home-metric b { font-size: 13px; }
  .home-heading h2 { font-size: 27px; }
  .home-heading p { font-size: 12px; }
  .home-quick .btn { font-size: 12px; height: 36px; padding: 0 12px; }
  .command-intro { padding: 22px; }
  .command-intro > .ms { display: none; }
  .command-intro p { font-size: 13px; }
  .command-toolbar .btn { font-size: 12px; padding: 0 14px; }
  .command-editor { padding: 18px; }
  .pair-row { grid-template-columns: minmax(0, 1fr) 36px; }
  .pair-row .input:first-child { grid-column: 1; }
  .pair-row .input:nth-child(2) { grid-column: 1; grid-row: 2; }
  .pair-row .icon-btn { grid-column: 2; grid-row: 1 / 3; }
  .pair-row + .pair-row { border-top: 1px solid var(--outline-variant); padding-top: 8px; }
  .builder-actions { padding: 8px; margin: 0 -6px; gap: 6px; }
  .builder-actions .btn { padding: 0 12px; font-size: 12px; }
  .request-address { grid-template-columns: 86px minmax(0, 1fr); gap: 8px; }
}

/* Standalone phones: safe areas and touch targets. */
.plugin-list { display: grid; gap: 20px; }
.plugin-card { gap: 20px; }
.plugin-card h2, .plugin-card p { overflow-wrap: anywhere; }
.plugin-card__head { display: flex; align-items: center; gap: 16px; }
.plugin-card__head > .grow { flex: 1; min-width: 0; }
.plugin-card__head h2 { font-size: 21px; letter-spacing: .2px; }
.plugin-icon { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; flex: none; font-size: 32px; background: linear-gradient(135deg, var(--primary-container), var(--secondary-container)); }
.plugin-icon img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.plugin-card__head > .plugin-disclosure { flex: 1; min-width: 0; }
.plugin-disclosure { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; display: flex; align-items: center; gap: 16px; padding: 4px; margin: -4px; cursor: pointer; border-radius: 16px; }
.plugin-disclosure:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.plugin-disclosure:focus-visible { outline: 2px solid var(--primary); outline-offset: 5px; }
.plugin-disclosure > .grow { flex: 1; min-width: 0; }
.plugin-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.plugin-title > [role=heading] { font-size: 21px; font-weight: 500; overflow-wrap: anywhere; }
.plugin-version { color: var(--on-surface-variant); font-size: 12px; }
.plugin-chevron { font-size: 26px; color: var(--on-surface-variant); transition: transform .18s ease; flex: none; }
.plugin-chevron.is-open { transform: rotate(180deg); }
.plugin-card__body { display: grid; gap: 20px; padding-top: 20px; border-top: 1px solid var(--outline-variant); }
.plugin-card:has(.plugin-card__body[hidden]) { gap: 0; }
.plugin-guide-link { color: var(--on-surface-variant); font-size: 12px; text-underline-offset: 3px; width: fit-content; padding: 8px 0; }
@media (max-width:480px) {
  .plugin-disclosure { gap: 10px; }
  .plugin-title > [role=heading] { font-size: 17px; }
  .plugin-version { font-size: 10px; }
  .plugin-card__body { gap: 16px; }
}
.plugin-status { color: var(--on-surface-variant); font-size: 13px; display: inline-block; margin-top: 5px; }
.plugin-status--setup { color: #a86a00; }
.plugin-status--on { color: var(--ok); }
:root[data-theme=dark] .plugin-status--setup { color: #f5c85b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .plugin-status--setup { color: #f5c85b; } }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + i { opacity: .4; }
.plugin-device { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: var(--surface-2); }
.plugin-device > .ms { color: var(--primary); }
.plugin-device b, .plugin-device code { display: block; }
.plugin-device code, .ble-device code { font-size: 12px; color: var(--on-surface-variant); margin-top: 3px; }
.plugin-functions { border-top: 1px solid var(--outline-variant); padding-top: 18px; }
.plugin-functions > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; min-height: 44px; }
.plugin-functions > summary .grow { flex: 1; }
.plugin-functions > summary::after { content: '⌄'; margin-left: 8px; }
.plugin-functions[open] > summary::after { transform: rotate(180deg); }
.plugin-function { padding: 18px 0; display: grid; gap: 10px; border-top: 1px solid var(--outline-variant); }
.plugin-function:first-child { margin-top: 14px; }
.plugin-phrases > summary { color: var(--primary); font-size: 13px; cursor: pointer; }
.phrase-list { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; }
.phrase-list span { border-radius: 8px; padding: 6px 10px; font-size: 12px; background: var(--surface-3); overflow-wrap: anywhere; }
.plugin-controls { display: grid; gap: 14px; min-width: 0; }
.plugin-controls:empty { display: none; }
.plugin-controls h3 { font-size: 14px; font-weight: 500; color: var(--on-surface-variant); }
.ble-devices { display: grid; gap: 10px; }
.ble-device { display: flex; align-items: center; gap: 12px; border: 1px solid var(--outline-variant); border-radius: 14px; padding: 14px 12px; cursor: pointer; }
.ble-device:has(input:checked) { border-color: var(--primary); background: var(--secondary-container); }
.ble-device .grow { min-width: 0; flex: 1; }
.ble-device code, .ble-device b, .ble-device .small { display: block; overflow-wrap: anywhere; }
.setup-status { padding: 12px 14px; background: var(--surface-2); border-radius: 12px; font-size: 14px; }
.ai-context > summary { cursor: pointer; display: flex; align-items: center; gap: 10px; font-weight: 500; min-height: 36px; }
.ai-context[open] > summary { margin-bottom: 16px; }
.ai-context .kv { font-size: 13px; flex-wrap: wrap; }
.ai-context .kv b { overflow-wrap: anywhere; max-width: 100%; }
.ai-context pre { max-height: 320px; margin-top: 12px; }

/* Smart home: compact controls on phones, spacious device grid on desktop. */
.ms.ms--smart { font-family: 'Smart Home Symbols'; }
.tuya-panel { display: grid; gap: 20px; min-width: 0; padding-top: 8px; }
.findmy-panel { display: grid; gap: 20px; min-width: 0; }
.findmy-device > .btn { width: 100%; padding-left: 12px; padding-right: 12px; }
.tuya-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tuya-heading h3 { font-size: 22px; margin-bottom: 4px; }
.tuya-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 12px; }
.tuya-device { display: grid; gap: 12px; min-width: 0; padding: 18px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--outline-variant); align-content: start; }
.tuya-device .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tuya-device .row > .ms { color: var(--primary); }
.tuya-device details { font-size: 13px; }
.tuya-device summary, .tuya-controls summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.tuya-properties { display: grid; gap: 8px; margin-top: 12px; }
.tuya-properties .kv { font-size: 12px; flex-wrap: wrap; gap: 4px 12px; }
.tuya-properties b, .tuya-device p { overflow-wrap: anywhere; }
.tuya-controls { display: grid; gap: 16px; padding: 20px; border-radius: 18px; background: var(--surface-2); }
.tuya-controls input[type=number] { max-width: 180px; }
.tuya-empty { text-align: center; padding: 32px 20px; border: 1px dashed var(--outline); border-radius: 18px; display: grid; gap: 12px; }
.tuya-empty > .ms { font-size: 42px; color: var(--primary); }
.tuya-member { display: flex; align-items: center; gap: 12px; padding: 14px; min-height: 52px; border-radius: 14px; background: var(--surface-2); cursor: pointer; }
.tuya-member > span:first-of-type { flex: 1; overflow-wrap: anywhere; }
.tuya-members { display: grid; gap: 8px; }
.tuya-member input { width: 20px; height: 20px; accent-color: var(--primary); }
.setup-guide { display: grid; gap: 10px; padding: 18px; background: var(--surface-2); border-radius: 18px; font-size: 14px; line-height: 1.6; }
.setup-guide ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.setup-guide a { color: var(--primary); }
.text-ok { color: var(--ok); }

/* Keep the main dashboard balanced at laptop widths, and prioritize controls on mobile. */
@media (min-width: 840px) {
  .content { max-width: 1440px; padding: 30px clamp(22px, 3vw, 48px) 60px; }
  .home-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 24px; }
  .home-column { gap: 24px; }
  .card { padding: clamp(20px, 1.8vw, 28px); box-shadow: 0 8px 30px #00000005; }
  .topbar { border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent); }
  .plugin-card > .plugin-controls:empty { display: none; }
  .plugins-page > .row { padding: 4px 0; }
}
@media (max-width: 839px) {
  .content { padding-top: 16px; }
  .home-columns { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .home-column { gap: 16px; }
  .home-columns > .home-column { display: contents; }
  .home-columns .home-speaker { order: 1; }
  .home-columns .home-music { order: 2; }
  .home-columns .home-events { order: 3; }
  .home-columns .home-dialog { order: 4; }
  .home-columns .home-connections { order: 5; }
  .home-columns .card:has(.ai-context) { order: 6; }
  .card { border-radius: 20px; padding: 18px; }
  .home-heading h2 { font-size: 26px; }
  .plugins-page > .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .plugins-page > .row .btn { min-width: 0; height: auto; min-height: 48px; padding: 10px; font-size: 12px; white-space: normal; text-align: center; line-height: 1.35; }
  .plugin-card { gap: 16px; }
  .tuya-controls, .tuya-device { padding: 16px; }
  .tuya-controls .row { gap: 8px; }
  .tuya-controls .btn { flex: 1; padding: 0 12px; }
  .tuya-device > .row:last-child { justify-content: space-between; }
  .tuya-heading h3 { font-size: 20px; }
  dialog { max-height: calc(100dvh - 24px); overscroll-behavior: contain; }
}
@media (max-width: 480px) {
  dialog { width: calc(100vw - 16px); padding: 20px 16px; border-radius: 24px; }
  .dialog__actions { gap: 8px; flex-wrap: wrap; }
  .dialog__actions .btn { flex: 1; padding: 0 14px; }
  .tuya-panel > .row { display: grid; grid-template-columns: 1fr; }
  .tuya-panel > .row .btn { width: 100%; }
  .home-heading { align-items: flex-start; }
  .home-quick { gap: 8px; }
}
@media (max-width: 480px) {
  .plugin-icon { width: 50px; height: 50px; border-radius: 16px; font-size: 27px; }
  .plugin-card__head { gap: 10px; }
  .plugin-card__head h2 { font-size: 18px; }
  .plugin-functions > summary { flex-wrap: wrap; }
  .plugin-functions > summary > .small { font-size: 11px; }
}

@media (max-width: 839px) {
  .topbar { height: calc(64px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .content { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .input, select.input, textarea.input { font-size: 16px; }
  .icon-btn { min-width: 44px; min-height: 44px; }
  .btn { min-height: 44px; }
  .oc-navigation .dest { min-height: 56px; }
  .pair-row { grid-template-columns: minmax(0, 1fr) 44px; }
  .pair-row .icon-btn { width: 44px; }
  .builder-actions { bottom: calc(88px + env(safe-area-inset-bottom)); }
  .snackbar { bottom: calc(92px + env(safe-area-inset-bottom)); }
}

/* Aligned nonmodular pages. Each column flows independently. */
.content{max-width:1360px;padding:24px 24px 64px}.card{padding:22px;gap:16px;border-radius:22px}.panel-stack{display:flex;flex-direction:column;gap:18px;min-width:0}.panel-stack>.card{width:100%;margin:0;min-width:0}.functions-layout,.ring-layout,.settings-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}.settings{display:flex;flex-direction:column;gap:20px}.settings .save-bar{width:100%;margin:0;bottom:18px}.field,.dialog__form,.input,select{min-width:0;max-width:100%}.signals-card{container-type:inline-size}.signals{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;align-items:center}.signals>.ring{width:120px;height:120px;margin:0}.signals>.grow{min-width:0}.signals-card>.row{display:flex;flex-wrap:wrap;gap:10px}.signals-card .segmented{width:100%}.chip{font:inherit;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 10px;min-height:32px;border:1px solid var(--outline-variant);border-radius:10px;background:var(--surface-2);color:var(--on-surface);cursor:pointer}.chip .ms{font-size:18px}.ring canvas{border-radius:50%;filter:drop-shadow(0 0 6px #8d7bb522)}.ring-layout .ring{margin:4px auto;width:200px;height:200px}.ring-layout .color-row{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:0;cursor:default}.color-row-label{font-size:13px;line-height:1.45}.color-controls{display:flex;gap:10px;align-items:center}.color-controls>input[type=color]{width:48px;height:40px;flex-shrink:0;border-radius:10px;overflow:hidden}.color-controls>.input{flex:1;font-family:monospace}.ring-layout .dialog__form{gap:12px}.ring-layout .vol{padding:9px 0}.ring-layout .chips{gap:8px}.ring-layout .chips>.btn{flex:1 1 40%;font-size:12px}.home-status-line{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 18px;border:1px solid var(--outline-variant);border-radius:16px;background:var(--surface-1);flex-wrap:wrap}.home-status-line .home-metric{display:flex;flex-direction:row;align-items:center;gap:10px;background:none;padding:0;border:0}.home-status-line .home-metric>div{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.home-status-line .home-metric span:not(.ms){font-size:12px;color:var(--on-surface-variant)}.home-status-line .home-metric b{font-size:13px}.home-status-line .ms{font-size:19px;color:var(--primary)}.home-columns{gap:20px}.home-column{gap:18px}.home-page{gap:18px}.home-quick{gap:8px}
@container(max-width:470px){.signals{grid-template-columns:minmax(0,1fr)}.signals>.ring{margin:0 auto;width:120px;height:120px}.signals-card>.row>.btn{flex:1 1 100%}}
@media(max-width:1050px){.functions-layout,.ring-layout,.settings-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:839px){.content{padding:18px 14px 100px}.card{padding:18px}.home-status-line{gap:10px;padding:12px}.home-status-line .home-metric{flex:1 1 100%}.functions-layout,.ring-layout,.settings-layout{gap:16px}.settings .save-bar{bottom:92px}}

.ai-context>summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}.ai-context>summary::-webkit-details-marker{display:none}.ai-context>summary::after{content:"";display:block;width:9px;height:9px;margin-left:auto;margin-right:4px;border-right:2px solid var(--primary);border-bottom:2px solid var(--primary);transform:rotate(45deg);transition:transform .18s}.ai-context[open]>summary::after{transform:rotate(225deg)}

:root{color-scheme:dark}select.input option,select.input optgroup{background:#25222b;color:#eee7fa}.input{border-radius:12px}input[type=color]{border:1px solid var(--outline-variant);border-radius:10px;padding:3px;background:var(--surface-2)}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:0;border-radius:6px}
.check>input[type=checkbox],.tuya-member>input[type=checkbox],.field>input[type=checkbox]{appearance:none;-webkit-appearance:none;display:inline-grid;place-content:center;width:21px;height:21px;flex-shrink:0;margin:0;border:1.5px solid var(--outline);border-radius:7px;background:var(--surface-2);cursor:pointer;transition:background .15s,border-color .15s}.check>input[type=checkbox]:checked,.tuya-member>input[type=checkbox]:checked,.field>input[type=checkbox]:checked{background:var(--primary);border-color:var(--primary)}.check>input[type=checkbox]:checked::after,.tuya-member>input[type=checkbox]:checked::after,.field>input[type=checkbox]:checked::after{content:"";display:block;width:5px;height:10px;border-right:2px solid var(--on-primary);border-bottom:2px solid var(--on-primary);transform:translateY(-1px) rotate(45deg)}input[type=checkbox]:focus-visible{outline:2px solid var(--primary);outline-offset:3px}input[type=checkbox]:disabled{opacity:.45;cursor:not-allowed}
.palette-picker{position:relative;min-width:0}.palette-button{width:100%;display:flex;align-items:center;gap:12px;min-height:50px;padding:11px 14px;border:1px solid var(--outline);border-radius:14px;background:var(--surface-2);color:var(--on-surface);font:inherit;text-align:left;cursor:pointer}.palette-button:hover{border-color:var(--primary)}.palette-button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.palette-name{flex:1;min-width:0}.palette-dots{display:inline-flex;gap:3px;flex-shrink:0}.palette-dots i{display:block;width:12px;height:24px;border-radius:6px}.palette-caret{width:8px;height:8px;border-right:2px solid var(--on-surface-variant);border-bottom:2px solid var(--on-surface-variant);transform:rotate(45deg);margin:0 3px 4px 6px;transition:transform .15s}.palette-button[aria-expanded=true] .palette-caret{transform:rotate(225deg);margin-bottom:-3px}.palette-menu{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 8px);padding:7px;border:1px solid var(--outline-variant);border-radius:17px;background:#28242f;box-shadow:0 14px 34px #0007;display:flex;flex-direction:column;gap:4px}.palette-menu[hidden]{display:none}.palette-option{display:flex;align-items:center;gap:12px;min-height:47px;padding:9px 12px;border:0;border-radius:11px;background:transparent;color:var(--on-surface);font:inherit;text-align:left;cursor:pointer}.palette-option:hover,.palette-option:focus-visible{background:#3b3349;outline:none}.palette-option[aria-selected=true]{background:var(--secondary-container);color:var(--on-secondary-container)}.palette-selected{margin-left:auto;color:var(--primary);opacity:0}.palette-option[aria-selected=true] .palette-selected{opacity:1}.palette-option .palette-dots i{height:22px;width:11px}

.speaker-main-controls{display:flex;gap:10px;flex-wrap:wrap}.speaker-main-controls>.btn{flex:1 1 180px}.speaker-main-controls>.wake-enabled{background:var(--secondary-container);color:var(--on-secondary-container);border-color:transparent}.color-controls>input[type=color]{width:42px;height:42px;border-radius:50%;padding:3px}.color-controls>input[type=color]::-webkit-color-swatch{border-radius:50%}.color-controls>input[type=color]::-moz-color-swatch{border:0;border-radius:50%}.palette-dots i,.palette-option .palette-dots i{width:14px;height:14px;border-radius:50%}.wake-sound-card>.row{gap:8px;flex-wrap:wrap}.wake-sound-card>.row>.btn{flex:1}.wake-sound-card .vol{padding:8px 0}

/* Compact wake toggle and accessible sound upload. */
.speaker-main-controls>.wake-sound-toggle{flex:0 0 42px;width:42px;min-width:42px;height:42px;padding:9px;border-radius:50%}
.sound-file-picker{position:relative;display:flex;align-items:center;gap:12px;min-width:0;min-height:54px;padding:10px 14px;border:1px dashed var(--outline);border-radius:16px;cursor:pointer;overflow:hidden}
.sound-file-picker input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;border:0}
.sound-file-picker:focus-within{outline:2px solid var(--primary);outline-offset:3px}
.sound-file-picker:hover{background:var(--secondary-container)}
.sound-file-action{flex:none;font-weight:500;color:var(--primary)}
.sound-file-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--on-surface-variant);font-size:13px}
@media(max-width:480px){.sound-file-picker{gap:8px;padding:10px}.sound-file-action{font-size:13px}}

.speaker-main-controls>.wake-sound-toggle{flex:1 1 180px;width:auto;min-width:0;height:42px;padding:0 20px;border-radius:24px;gap:10px}

.package-panel{display:grid;gap:16px}.package-function{padding:16px;border:1px solid var(--outline-variant);border-radius:16px;display:grid;gap:10px}.package-function h3,.package-function p{margin:0}.package-result{white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;overflow:auto}.package-frame{width:100%;min-height:240px;border:0;border-radius:16px;background:var(--surface)}

.scenario-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0 24px}.scenario-intro h2{font-size:28px;margin:8px 0}.scenario-intro p{margin:0}.scenario-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.scenario-list>.card{display:flex;flex-direction:column;gap:18px}.scenario-list h2{margin:0}.scenario-preview{display:grid;gap:10px;flex:1}.scenario-preview-step,.scenario-result{display:flex;align-items:center;gap:12px;min-width:0}.scenario-number{display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;border-radius:50%;background:var(--secondary-container);color:var(--on-secondary-container);font-size:13px}.scenario-empty{grid-column:1/-1;text-align:center;padding:64px 16px;border:1px dashed var(--outline-variant);border-radius:24px}.scenario-empty>.ms{font-size:48px;color:var(--primary)}.scenario-editor-steps{display:grid;gap:16px}.scenario-editor-step{padding:16px;border:1px solid var(--outline-variant);border-radius:20px;display:grid;gap:14px}.scenario-args{display:grid;gap:12px}.scenario-editor .check{display:flex;gap:10px;align-items:center}.scenario-run-status:empty{display:none}.scenario-run-status{margin-bottom:20px}.scenario-run-status .card{display:grid;gap:12px}.scenario-preview-step>.grow{overflow-wrap:anywhere}
@media(max-width:900px){.scenario-list{grid-template-columns:1fr}.scenario-intro{align-items:flex-start;flex-direction:column}.scenario-editor-step{padding:12px}}

/* Scenario action picker: bounded modal with category and function cards. */
.scenario-editor-step svg,.scenario-picker svg{width:22px;height:22px;flex:none}
.scenario-trigger-editor{display:grid;gap:14px;padding:16px;border:1px solid var(--outline-variant);border-radius:18px;min-width:0}.scenario-trigger-editor>p{margin:0}.scenario-schedule,.scenario-weekdays{display:grid;gap:12px;min-width:0}.scenario-trigger-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.scenario-day-chips{display:flex;flex-wrap:wrap;gap:6px}.scenario-day-chips>.chip{flex:1;padding:7px;min-width:32px}.scenario-day-presets{display:flex;gap:4px;flex-wrap:wrap}.scenario-day-presets>.btn{padding:0 9px;font-size:12px}.scenario-trigger-summary{display:grid;gap:5px;overflow-wrap:anywhere}.scenario-trigger-editor [hidden]{display:none!important}@media(max-width:420px){.scenario-trigger-grid{grid-template-columns:1fr}.scenario-trigger-editor{padding:12px}.scenario-day-chips>.chip{min-width:30px}}
.scenario-trigger-editor .scenario-day-chips>button.chip[aria-pressed=true]{background:var(--primary);color:var(--on-primary);border-color:var(--primary);font-weight:600}.scenario-day-chips>button.chip:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.scenario-function-choice{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px;border:1px solid var(--outline-variant);border-radius:16px;background:var(--surface-2);color:var(--on-surface);font:inherit;cursor:pointer}
.scenario-function-choice:hover{border-color:var(--primary);background:var(--secondary-container)}
.scenario-function-choice b,.scenario-function-choice small{display:block}.scenario-function-choice small{margin-top:5px;font-size:12px;color:var(--on-surface-variant)}
.scenario-category-art{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--secondary-container);color:var(--primary);flex:none;overflow:hidden}.scenario-category-art img{object-fit:contain;border-radius:10px}.scenario-category-art svg{width:26px;height:26px}
dialog.scenario-picker{width:min(760px,calc(100vw - 32px));padding:24px;overflow:hidden;display:none;flex-direction:column;gap:20px;max-height:calc(100dvh - 40px);border:1px solid var(--outline-variant);border-radius:24px;background:var(--surface-1);box-shadow:0 24px 100px #0008}
dialog.scenario-picker[open]{display:flex}dialog.scenario-picker::backdrop{background:#09070dbb;backdrop-filter:blur(5px)}
.scenario-picker-header{display:flex;align-items:flex-start;gap:12px}.scenario-picker-header h2{font-size:23px;font-weight:600;margin:0 0 7px}.scenario-picker-header p{font-size:13px;margin:0;color:var(--on-surface-variant)}.scenario-picker-header>.icon-btn{margin-top:-4px}
.scenario-picker-search{display:flex;align-items:center;gap:10px;border:1px solid var(--outline-variant);border-radius:14px;padding:0 14px;background:var(--surface-2);color:var(--on-surface-variant)}.scenario-picker-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}.scenario-picker-search>.input{border:0;background:transparent;outline:none;box-shadow:none;min-height:46px;padding:10px 0;width:100%}
.scenario-picker-scroll{overflow-y:auto;min-height:0;max-height:min(52dvh,470px);padding:2px 5px 4px 2px;scrollbar-width:thin;scrollbar-color:var(--outline) transparent}.scenario-picker-scroll::-webkit-scrollbar{width:5px}.scenario-picker-scroll::-webkit-scrollbar-thumb{border-radius:8px;background:var(--outline)}
.scenario-picker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.scenario-category-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;min-height:172px;padding:18px;border:1px solid var(--outline-variant);border-radius:18px;background:var(--surface-2);color:var(--on-surface);font:inherit;text-align:left;cursor:pointer;transition:background .15s,border-color .15s}.scenario-category-tile:hover,.scenario-function-tile:hover{background:var(--secondary-container);border-color:var(--primary)}.scenario-category-tile>strong{font-size:16px;overflow-wrap:anywhere}.scenario-category-tile>span:not(.scenario-category-art){font-size:12px;line-height:1.45;color:var(--on-surface-variant)}.scenario-category-tile>small{font-size:11px;color:var(--primary);margin-top:auto}.scenario-category-tile>svg{position:absolute;right:15px;top:24px;color:var(--on-surface-variant);width:18px}
.scenario-picker-grid--functions{grid-template-columns:repeat(2,minmax(0,1fr))}.scenario-function-tile{display:flex;align-items:center;gap:12px;padding:16px;min-height:88px;min-width:0;border:1px solid var(--outline-variant);border-radius:16px;background:var(--surface-2);color:var(--on-surface);text-align:left;font:inherit;cursor:pointer}.scenario-function-tile__icon{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:11px;background:var(--secondary-container);color:var(--primary)}.scenario-function-tile strong{font-size:14px;line-height:1.4;display:block;overflow-wrap:anywhere}.scenario-function-tile small{display:block;color:var(--on-surface-variant);font-size:11px;line-height:1.4;margin-top:6px}.scenario-function-tile>svg{width:18px;color:var(--primary)}.scenario-function-tile--unavailable small{color:var(--error)}.scenario-picker-footer{font-size:12px;color:var(--on-surface-variant);line-height:1.5}.scenario-picker-empty{grid-column:1/-1;padding:24px 0;text-align:center}
@media(max-width:600px){dialog.scenario-picker{padding:18px;gap:16px;width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}.scenario-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.scenario-category-tile{padding:14px;min-height:166px}.scenario-picker-grid--functions{grid-template-columns:1fr}.scenario-function-choice{padding:12px}.scenario-picker-header h2{font-size:20px}}
.scenario-picker-header>.grow,.scenario-function-choice>.grow,.scenario-function-tile>.grow{flex:1;min-width:0}.scenario-picker-header>.icon-btn[hidden]{display:none}

.page-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 0 24px;min-width:0}.page-heading__text{min-width:0}.page-heading h2{font-size:28px;font-weight:600;line-height:1.25;margin:9px 0 12px}.page-heading p{margin:0;color:var(--on-surface-variant);line-height:1.5}.page-heading__actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;flex-shrink:0}.eleven-key-list{display:grid;gap:10px}.eleven-key-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--outline-variant);border-radius:14px}.eleven-key-item>.grow{flex:1;min-width:0}.eleven-key-item b,.eleven-key-item small{display:block;overflow-wrap:anywhere}.eleven-key-item small{font-size:12px;color:var(--on-surface-variant);margin-top:4px}.settings .page-heading{margin:0}
@media(max-width:1000px){.page-heading{align-items:flex-start;flex-direction:column;gap:18px}.page-heading__actions{justify-content:flex-start;flex-shrink:1}}@media(max-width:480px){.page-heading h2{font-size:26px}.page-heading__actions{width:100%}.page-heading__actions>.btn{flex:1 1 auto;padding:0 16px;font-size:12px}}

.eleven-brand{filter:brightness(0) invert(1)}.eleven-key-item>svg{width:22px;height:22px;flex:none;color:var(--primary)}.eleven-key-item .icon-btn>svg{width:20px;height:20px}
.ring-layout{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.ring-layout>.card{min-width:0;margin:0}.ring-layout .ring{width:156px;height:156px}.ring-layout .card{padding:18px;gap:12px}.ring-layout .input:not([type=color]){min-height:40px;padding:9px 12px}.ring-layout .palette-trigger{min-height:42px}.ring-layout .color-row{gap:5px}.ring-layout .color-controls>input[type=color]{width:34px;height:34px}.ring-layout .vol{padding:5px 0}.ring-layout .btn{min-height:36px;padding:0 13px;font-size:12px}.ring-layout .wake-sound-card>p{font-size:11px;line-height:1.45;margin:4px 0}.ring-layout .wake-sound-card .check{padding:10px 12px}.ring-layout .chips{gap:7px}.ring-layout .chips>.btn{flex-basis:42%}
.ring-preview-column{min-width:0;gap:16px}.ring-idle-card>p{margin:0;line-height:1.45}.idle-color-swatches{display:flex;gap:8px;flex-wrap:wrap}.idle-color-swatch{width:30px;height:30px;flex:none;border:3px solid var(--surface);border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px var(--outline-variant);cursor:pointer}.idle-color-swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--primary)}.idle-color-swatch:focus-visible{outline:2px solid var(--primary);outline-offset:3px}.ring-idle-card .color-controls>.input{min-width:0;width:0}.ring-idle-card .check{display:flex;align-items:center;gap:10px}
@media(min-width:1200px){.ring-layout{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.ring-layout .card{padding:16px}.ring-layout .color-row-label{font-size:12px}.ring-layout .field>span{font-size:12px}.ring-layout .ring{width:148px;height:148px}.ring-layout .wake-sound-card>.row{gap:7px}.ring-layout .wake-sound-card>.row>.btn{padding:0 9px}.ring-layout .color-controls{gap:8px}.ring-layout .btn{font-size:11px}.page:has(>.ring-layout)>.page-heading{padding:4px 0 16px}}
@media(max-width:839px){.ring-layout{grid-template-columns:1fr}.ring-layout .ring{width:180px;height:180px}.ring-layout .card{padding:18px}.ring-layout .btn{font-size:12px}}

.ai-command-list{display:grid;gap:6px;max-height:200px;overflow:auto}.ai-command-list[hidden]{display:none}.ai-command{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:var(--surface-2);font-size:13px;overflow-wrap:anywhere}.ai-command small{opacity:.7;flex-shrink:0}.ai-command[data-status="error"]{color:var(--error,#ffb4ab)}

.accent-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.accent-option{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:58px;border:1px solid var(--outline-variant);border-radius:16px;background:var(--surface-2);color:var(--on-surface);text-align:left;cursor:pointer;min-width:0}
.accent-option:hover{border-color:var(--primary)}
.accent-option[aria-pressed=true]{background:var(--secondary-container);border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.accent-option:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.accent-swatch{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:var(--swatch);color:#151218}
.accent-swatch span{visibility:hidden;font-weight:700}
.accent-option[aria-pressed=true] .accent-swatch span{visibility:visible}
.accent-custom{display:flex;align-items:end;justify-content:space-between;gap:16px}
.accent-custom .field{margin:0;max-width:260px}
.accent-custom__fields{display:flex;align-items:center;gap:12px}
.accent-custom__fields input[type=color]{width:44px;height:44px;flex-shrink:0;border:0;border-radius:50%;padding:0;overflow:hidden;background:none;cursor:pointer}
.accent-custom__fields input[type=color]::-webkit-color-swatch{border-radius:50%;border:2px solid var(--outline-variant)}
.accent-custom__fields input[type=color]::-moz-color-swatch{border-radius:50%;border:2px solid var(--outline-variant)}
.accent-custom__fields input[type=text]{min-width:0;width:160px}
@media(max-width:700px){.accent-options{grid-template-columns:repeat(2,minmax(0,1fr))}.accent-option{padding:10px;gap:8px;font-size:13px}.accent-custom{flex-wrap:wrap}}

/* Plugin catalogue: a compact list or description tiles with a full editor. */
.plugin-list--tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:18px;align-items:stretch}
.plugin-card--tile{display:flex;flex-direction:column;gap:16px;min-width:0;margin:0;padding:22px}
.plugin-card--tile .plugin-card__head{padding:0;border:0;gap:12px}
.plugin-card--tile .plugin-disclosure{padding:0;gap:14px;min-width:0}
.plugin-card--tile .plugin-icon{width:54px;height:54px;flex:0 0 54px}
.plugin-card--tile .plugin-icon img{width:54px;height:54px}
.plugin-card--tile .plugin-title{font-size:19px;overflow-wrap:anywhere}
.plugin-tile-description{color:var(--on-surface-variant);font-size:14px;line-height:1.55;margin:0;flex:1}
.plugin-tile-actions{display:flex;justify-content:flex-end;margin-top:auto}
.plugin-editor{width:min(1200px,calc(100vw - 40px));max-width:none;height:calc(100dvh - 40px);max-height:none;padding:0;border-radius:24px;overflow:auto;background:var(--surface);color:var(--on-surface)}
.plugin-editor__head{display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:2;background:var(--surface);padding:18px 24px;border-bottom:1px solid var(--outline-variant)}
.plugin-editor__head h2{margin:0;font-size:24px}
.plugin-editor>.plugin-card__body{padding:24px;border:0}
@media(max-width:600px){.plugin-editor{width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}.plugin-editor__head,.plugin-editor>.plugin-card__body{padding:16px}.plugin-card--tile{padding:18px}}

.plugin-card.plugin-card--tile:has(.plugin-card__body[hidden]){gap:16px}

.plugin-editor__head>.grow{flex:1}.ledcontrol-panel{display:grid;gap:16px}.ledcontrol-panel .row>.slider{flex:1;min-width:120px}.ledcontrol-panel input[type=color]{border-radius:50%;width:44px;height:44px;overflow:hidden;padding:0}.ledcontrol-panel input[type=color]::-webkit-color-swatch{border-radius:50%;border:0}

.tavily-key-list{display:grid;gap:14px}.tavily-key-row{display:flex;gap:10px;align-items:end}.tavily-key-row>.grow{flex:1;min-width:0}.tavily-key-row>.icon-btn{margin-bottom:3px;flex:none}

.applications-caption{margin-top:0;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--on-surface-variant);padding:16px 14px 5px}.application-dest img{flex:none}.application-heading{display:flex;align-items:center;gap:18px;margin-bottom:24px}.application-heading h2{font-size:28px;margin:0}.application-heading p{margin:5px 0 0}.yandex-app-content{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:20px;align-items:start}.yandex-app-content .music{min-width:0}.yandex-app-content .music__body{min-width:0}.yandex-app-content .list{max-height:500px;overflow:auto}.yandex-application-card>.plugin-card__head>.grow{flex:1}.music-overview .np__meta{min-width:0}.music-sources{margin-bottom:12px}.music-sources .btn{font-size:12px;padding:7px 12px;min-height:34px}.yandex-shortcuts{margin-top:14px}.oc-navigation [hidden]{display:none!important}
@media(max-width:1000px){.yandex-app-content{grid-template-columns:1fr}}@media(max-width:839px){.applications-caption{display:none}.application-heading{gap:12px}.application-heading h2{font-size:23px}}

.ms>svg{display:block;width:100%;height:100%}
.track-heart[aria-pressed="false"] svg,.track-heart[aria-pressed="mixed"] svg{fill:none}.track-heart[aria-pressed="false"]{color:var(--on-surface-variant)}
.playlist-picker{display:grid;gap:8px;max-height:55dvh;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--outline) transparent}.playlist-choice{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--outline-variant);border-radius:14px;background:var(--surface-2);color:var(--on-surface);text-align:left;cursor:pointer;font:inherit;width:100%}.playlist-choice:hover{background:var(--secondary-container);border-color:var(--primary)}.playlist-choice>.grow{display:grid;gap:5px;min-width:0;flex:1}.playlist-choice b{overflow-wrap:anywhere}.playlist-choice>.ms{color:var(--primary)}
.yandex-library .yandex-playlist-tracks:empty{display:none}
.yandex-library .yandex-playlist-tracks{max-height:min(65dvh,650px);padding:4px 8px 8px 4px;scrollbar-width:thin;scrollbar-color:var(--outline) transparent;scrollbar-gutter:stable}
.yandex-playlist-tracks::-webkit-scrollbar,.music__body .list::-webkit-scrollbar{width:5px}.yandex-playlist-tracks::-webkit-scrollbar-track,.music__body .list::-webkit-scrollbar-track{background:transparent}.yandex-playlist-tracks::-webkit-scrollbar-thumb,.music__body .list::-webkit-scrollbar-thumb{background:var(--outline);border-radius:12px}
.playlist-tracks-heading{display:flex;align-items:center;gap:12px;padding:14px 8px 18px;position:sticky;top:-4px;z-index:2;background:var(--surface-1)}.playlist-tracks-heading>.grow{flex:1;min-width:0}.playlist-tracks-heading h3{margin:0 0 5px;font-size:18px;overflow-wrap:anywhere}.playlist-tracks-heading>.icon-btn{flex:none}
.music-track-list{display:grid;gap:5px}.item.item--track{grid-template-columns:44px minmax(0,1fr) auto auto;border:0;padding:10px 8px;border-radius:12px;transition:background .15s}.music-track-list>.item:nth-child(even){background:var(--surface-2)}.music-track-list>.item:hover{background:var(--secondary-container)}
.track-actions{display:flex;align-items:center;gap:6px;flex:none}.track-actions>.icon-btn{width:36px;height:36px}.track-actions>.track-heart{color:var(--primary)}.track-heart svg{fill:currentColor;stroke-width:1.5}.track-duration{padding:0 6px}.playlist-empty{padding:24px 8px;text-align:center}
@media(max-width:440px){.item.item--track{grid-template-columns:40px minmax(0,1fr) auto auto;gap:6px;padding:9px 4px}.track-actions{gap:0}.track-actions>.icon-btn{width:30px;height:34px}.track-actions .ms{font-size:20px}.track-duration{padding:0;font-size:11px}.playlist-tracks-heading{padding-left:4px;padding-right:4px}.playlist-tracks-heading h3{font-size:16px}}
.yandex-application-card .plugin-icon{background:#080808}.application-heading>img[src="plugin-yandex-music.svg"]{background:#080808;border-radius:16px}
.yandex-playlists{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:16px;align-items:start}
.yandex-playlist{background:var(--surface-2);border:1px solid var(--outline-variant);border-radius:18px;padding:12px;display:grid;gap:10px;min-width:0;transition:border-color .2s,background .2s}
.yandex-playlist:hover{border-color:var(--primary)}
.playlist-open{display:grid;gap:7px;width:100%;padding:0;background:none;border:0;color:inherit;text-align:left;cursor:pointer;min-width:0;font:inherit}
.playlist-artwork{position:relative;aspect-ratio:1;display:grid;place-items:center;background:linear-gradient(135deg,var(--secondary-container),var(--surface-3));border-radius:12px;overflow:hidden;width:100%;margin-bottom:3px;color:var(--primary)}
.playlist-artwork>.ms{font-size:52px;width:52px;height:52px}.playlist-artwork>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.yandex-playlist--likes .playlist-artwork{background:linear-gradient(135deg,var(--primary),var(--secondary-container));color:var(--on-primary)}
.playlist-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15px;line-height:1.5}.playlist-count{font-size:12px;color:var(--on-surface-variant)}
.playlist-actions{display:flex;align-items:center;gap:4px;min-width:0}.playlist-actions>.btn{flex:1;padding:0 10px;font-size:12px;min-width:0}.playlist-actions>.icon-btn{flex:none;width:32px;height:32px}.playlist-actions>.icon-btn>.ms{font-size:20px}
.playlist-menu{position:relative;flex:none}.playlist-menu>summary{list-style:none;cursor:pointer;padding:5px;font-size:14px;color:var(--on-surface-variant)}.playlist-menu>summary::-webkit-details-marker{display:none}.playlist-menu-content{position:absolute;right:0;top:100%;z-index:5;display:grid;min-width:180px;background:var(--surface-3);padding:6px;border:1px solid var(--outline-variant);border-radius:14px;box-shadow:0 6px 24px #0005}.playlist-menu-content .btn{justify-content:flex-start}
.yandex-playlist-tracks{max-height:480px;overflow:auto}.item--track{display:grid;grid-template-columns:44px minmax(0,1fr) auto 38px;gap:12px;align-items:center;padding:10px 4px;min-width:0}.track-artwork{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--secondary-container);color:var(--on-secondary-container);overflow:hidden}.track-artwork>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.track-meta{display:grid;gap:4px;min-width:0}.track-title,.track-artist{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.track-title{font-size:14px;font-weight:500}.track-artist,.track-duration{font-size:12px;color:var(--on-surface-variant)}.item--track>.icon-btn{width:36px;height:36px}.item--track:hover{background:var(--surface-2);border-radius:12px}.item--track.item--active{background:var(--secondary-container)}
@media(max-width:440px){.yandex-playlists{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.yandex-playlist{padding:8px;border-radius:14px}.playlist-actions>.btn{padding:0 7px}.playlist-actions>.btn>.ms{display:none}.item--track{gap:8px;grid-template-columns:40px minmax(0,1fr) auto 32px}.track-artwork{width:40px;height:40px}.track-duration{font-size:11px}.playlist-title{font-size:13px}}

.sidebar-order-list{display:grid;gap:7px}.sidebar-order-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--surface-2);border:1px solid var(--outline-variant);border-radius:12px;min-width:0}.sidebar-order-row>.grow{flex:1;min-width:0;font-size:13px}.sidebar-order-row>.ms{color:var(--on-surface-variant);cursor:grab}.sidebar-order-row .icon-btn{width:32px;height:32px;min-width:32px}.home-columns.home-columns--ordered{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:18px}.home-columns--ordered>.card{margin:0;min-width:0}@media(max-width:1050px){.home-columns.home-columns--ordered{grid-template-columns:minmax(0,1fr)}}

.accent-option{min-width:0}.accent-option>span:last-child{min-width:0;white-space:normal;overflow-wrap:anywhere}.sidebar-order-row .icon-btn{flex-shrink:0}

.home-page .card>*{min-width:0;max-width:100%}.home-page .np__ctl{flex-wrap:wrap}.home-page .np__ctl .icon-btn{flex-shrink:0}

.home-page .status__head{flex-wrap:wrap}.home-page .status__head>.grow{min-width:0;flex:1}.home-page .btn{max-width:100%;white-space:normal;height:auto;min-height:40px;overflow-wrap:anywhere}

.home-page .status__state{white-space:normal;overflow-wrap:anywhere}.home-page .status__head>.grow{overflow-wrap:anywhere}
/* Ассистент: память (card grid gap 14px задаёт вертикальный ритм) */
.memory-add{display:flex;gap:10px;align-items:stretch;margin:0}
.memory-add .input{flex:1;min-width:0}
.memory-add .btn{height:auto;min-height:48px;padding:0 20px;flex:none}
.memory-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0;min-height:32px}
.memory-head .btn--text{height:32px;padding:0 10px;margin-right:-10px}
.memory-list{display:flex;flex-direction:column;gap:8px;max-height:520px;overflow:auto;margin:0;padding:0}
.memory-list>p{margin:0;padding:8px 0}
.memory-item{display:flex;align-items:center;gap:12px;padding:12px 8px 12px 16px;border:1px solid var(--outline-variant);border-radius:14px;background:var(--surface-2)}
.memory-item .icon-btn{width:36px;height:36px}
.memory-item .icon-btn+.icon-btn{margin-left:-8px}
.memory-text{flex:1;min-width:0;display:grid;gap:4px}
.memory-text p{margin:0;overflow-wrap:anywhere;line-height:1.45}
.memory-text small{color:var(--on-surface-variant);font-size:12px;line-height:1.3}
.memory-text textarea{min-height:64px}
.memory-text .row{margin-top:4px;gap:8px}
.memory-item:has(textarea){align-items:flex-start}
#sound-panel-1 .sound-save-bar{margin-top:2px}
@media (max-width:600px){.memory-add{flex-direction:column}.memory-add .btn{width:100%}}

/* llm108: ИИ генерация действий сценария */
.scenario-dialog-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}.scenario-dialog-head>h2{flex:1;min-width:0;margin:0!important}
.scenario-gen-button{flex:none;gap:8px}.scenario-gen-button>svg{width:18px;height:18px;flex:none}
dialog.scenario-llm{width:min(640px,calc(100vw - 32px));height:min(660px,calc(100dvh - 40px));padding:22px;display:none;flex-direction:column;gap:14px;border:1px solid var(--outline-variant);border-radius:24px;background:var(--surface-1);color:var(--on-surface);box-shadow:0 24px 100px #0008;overflow:hidden}
dialog.scenario-llm[open]{display:flex}dialog.scenario-llm::backdrop{background:#09070dbb;backdrop-filter:blur(5px)}
dialog.scenario-llm .scenario-picker-header{align-items:center}dialog.scenario-llm .scenario-picker-header h2{margin:0 0 3px}
.scenario-llm-orb{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:14px;background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 35%,var(--surface-3)));color:var(--on-primary);box-shadow:0 6px 22px color-mix(in srgb,var(--primary) 28%,transparent)}
.scenario-llm-orb svg{width:22px;height:22px}
.scenario-llm-chat{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:4px 4px 4px 2px;scrollbar-width:thin;scrollbar-color:var(--outline) transparent}
.scenario-llm-empty{margin:auto 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:12px 6px}
.scenario-llm-empty .scenario-llm-orb{width:64px;height:64px;border-radius:20px;margin-bottom:4px}.scenario-llm-empty .scenario-llm-orb svg{width:30px;height:30px}
.scenario-llm-empty>b{font-size:17px}.scenario-llm-empty>span{color:var(--on-surface-variant);font-size:13px;max-width:430px;line-height:1.55}
.scenario-llm-examples{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px}
.scenario-llm-examples .chip{white-space:normal;text-align:left;max-width:100%;height:auto;min-height:34px;padding:7px 12px;line-height:1.35}
.scenario-llm-msg{max-width:86%;padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.scenario-llm-msg--user{align-self:flex-end;background:var(--primary);color:var(--on-primary);border-bottom-right-radius:6px}
.scenario-llm-msg--ai{align-self:flex-start;background:var(--surface-2);border:1px solid var(--outline-variant);border-bottom-left-radius:6px;display:flex;flex-direction:column;gap:10px}
.scenario-llm-msg--error{border-color:color-mix(in srgb,var(--error,#f2b8b5) 60%,transparent);color:var(--error,#f2b8b5)}
.scenario-llm-typing{display:inline-flex;align-items:center;gap:4px;color:var(--on-surface-variant)}
.scenario-llm-typing i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:scenario-llm-dot 1.2s infinite}
.scenario-llm-typing i:nth-child(2){animation-delay:.15s}.scenario-llm-typing i:nth-child(3){animation-delay:.3s}.scenario-llm-typing span{margin-left:6px}
@keyframes scenario-llm-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.scenario-llm-typing i{animation:none;opacity:.6}}
.scenario-llm-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.scenario-llm-steps li{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:12px;background:var(--surface-1);border:1px solid var(--outline-variant)}
.scenario-llm-steps .grow{flex:1;min-width:0}.scenario-llm-steps b{display:block;font-size:13px;font-weight:600}.scenario-llm-steps small{display:block;font-size:11px;color:var(--on-surface-variant)}
.scenario-llm-actions{display:flex;flex-wrap:wrap;gap:8px}
.scenario-llm-composer{display:flex;align-items:flex-end;gap:8px;padding:6px 6px 6px 16px;border:1px solid var(--outline-variant);border-radius:20px;background:var(--surface-2);transition:border-color .15s,box-shadow .15s}
.scenario-llm-composer:focus-within{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.scenario-llm-input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:inherit;font:inherit;font-size:14px;line-height:1.5;resize:none;padding:9px 0;max-height:160px;box-shadow:none}
.scenario-llm-send{display:grid;place-items:center;width:42px;height:42px;flex:none;border:0;border-radius:14px;background:var(--primary);color:var(--on-primary);cursor:pointer;transition:opacity .15s,transform .1s}
.scenario-llm-send:active{transform:scale(.94)}.scenario-llm-send:disabled{opacity:.4;cursor:default;transform:none}.scenario-llm-send svg{width:20px;height:20px}
.scenario-llm-hint{margin:-6px 6px 0;font-size:11px;color:var(--on-surface-variant)}
@media(max-width:600px){dialog.scenario-llm{padding:16px;gap:12px;width:calc(100vw - 24px);height:calc(100dvh - 24px)}.scenario-llm-msg{max-width:94%}.scenario-gen-button{padding-inline:12px}.scenario-llm-hint{display:none}}

/* fn109: кнопки сохранения голоса/распознавания слева; новое меню действий сценария */
form.settings .card .sound-save-bar{justify-content:flex-start}
.scenario-tint{--cat:#9aa8ff;display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px;background:color-mix(in srgb,var(--cat) 16%,transparent);color:var(--cat);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cat) 24%,transparent)}
.scenario-tint svg{width:20px!important;height:20px!important}
.scenario-tint--sm{width:30px;height:30px;border-radius:9px}.scenario-tint--sm svg{width:16px!important;height:16px!important}
.scenario-tint--lg{width:56px;height:56px;border-radius:17px}.scenario-tint--lg svg{width:26px!important;height:26px!important}
dialog.scenario-fnpicker{width:min(820px,calc(100vw - 32px));height:min(720px,calc(100dvh - 40px));gap:14px}
dialog.scenario-fnpicker .scenario-picker-header{align-items:center}dialog.scenario-fnpicker .scenario-picker-header h2{margin:0 0 3px}
.scenario-fn-search{display:flex;align-items:center;gap:10px;padding:0 14px;min-height:48px;border:1px solid var(--outline-variant);border-radius:16px;background:var(--surface-2);color:var(--on-surface-variant);cursor:text;transition:border-color .15s,box-shadow .15s}
.scenario-fn-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.scenario-fn-search svg{width:20px;height:20px;flex:none}
.scenario-fn-search-input{flex:1;min-width:0;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;color:var(--on-surface);font:inherit;font-size:15px;padding:12px 0;-webkit-appearance:none;appearance:none}
.scenario-fn-search-input::-webkit-search-cancel-button{cursor:pointer}
.scenario-fn-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;margin:0 -2px;scrollbar-width:none;flex:none}.scenario-fn-chips::-webkit-scrollbar{display:none}
.scenario-fn-chip{--cat:var(--primary);display:inline-flex;align-items:center;gap:7px;flex:none;height:36px;padding:0 12px;border:1px solid var(--outline-variant);border-radius:999px;background:var(--surface-2);color:var(--on-surface-variant);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.scenario-fn-chip svg{width:16px!important;height:16px!important;color:var(--cat)}
.scenario-fn-chip small{font-size:11px;font-weight:600;opacity:.65}
.scenario-fn-chip:hover{border-color:color-mix(in srgb,var(--cat) 55%,var(--outline-variant));color:var(--on-surface)}
.scenario-fn-chip[aria-selected=true]{background:color-mix(in srgb,var(--cat) 18%,var(--surface-2));border-color:color-mix(in srgb,var(--cat) 60%,transparent);color:var(--on-surface)}
.scenario-fn-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:20px;padding:2px 6px 6px 2px;scrollbar-width:thin;scrollbar-color:var(--outline) transparent}
.scenario-fn-group{display:flex;flex-direction:column;gap:10px}
.scenario-fn-group__head{display:flex;align-items:center;gap:10px;padding:0 2px}
.scenario-fn-group__head .grow{flex:1;min-width:0}.scenario-fn-group__head b{display:block;font-size:15px}.scenario-fn-group__head small{display:block;font-size:12px;color:var(--on-surface-variant)}
.scenario-fn-group__count{font-size:12px;color:var(--on-surface-variant);white-space:nowrap}
.scenario-fn-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.scenario-fn{--cat:var(--primary);display:flex;align-items:center;gap:12px;min-width:0;min-height:68px;padding:12px 12px 12px 12px;border:1px solid var(--outline-variant);border-radius:16px;background:var(--surface-2);color:var(--on-surface);font:inherit;text-align:left;cursor:pointer;transition:background .15s,border-color .15s,transform .1s}
.scenario-fn:hover{background:color-mix(in srgb,var(--cat) 8%,var(--surface-2));border-color:color-mix(in srgb,var(--cat) 50%,var(--outline-variant))}
.scenario-fn:active{transform:scale(.985)}
.scenario-fn:focus-visible{outline:2px solid var(--cat);outline-offset:2px}
.scenario-fn__text{flex:1;min-width:0}.scenario-fn__text strong{display:block;font-size:14px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.scenario-fn__text small{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:var(--on-surface-variant);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.scenario-fn__add{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;color:var(--on-surface-variant);background:var(--surface-3);transition:background .15s,color .15s}
.scenario-fn__add svg{width:16px!important;height:16px!important}
.scenario-fn:hover .scenario-fn__add{background:var(--cat);color:#101116}
.scenario-fn--current{border-color:color-mix(in srgb,var(--cat) 70%,transparent);background:color-mix(in srgb,var(--cat) 10%,var(--surface-2))}.scenario-fn--current .scenario-fn__add{background:var(--cat);color:#101116}
.scenario-fn--off{opacity:.55}.scenario-fn--off .scenario-tint{filter:grayscale(1)}
.scenario-fn-empty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:24px}.scenario-fn-empty span{color:var(--on-surface-variant);font-size:13px;max-width:320px}
.scenario-function-choice .scenario-tint{width:44px;height:44px}
.scenario-wait-presets{display:flex;flex-wrap:wrap;gap:6px}
@media(prefers-reduced-motion:reduce){.scenario-fn,.scenario-fn-chip,.scenario-fn__add{transition:none}.scenario-fn:active{transform:none}}
@media(max-width:600px){dialog.scenario-fnpicker{padding:16px;gap:12px;width:calc(100vw - 24px);height:calc(100dvh - 24px)}.scenario-fn-list{grid-template-columns:1fr}.scenario-fn{min-height:62px;padding:10px}.scenario-fn-group__count{display:none}}
@media(max-width:600px){dialog.scenario-fnpicker .scenario-picker-header>.scenario-llm-orb{display:none}}
.status__assistant{margin-top:4px;font-size:14px;line-height:1.4;color:var(--on-surface-variant);transition:color .2s}.status__assistant--active{color:var(--primary);font-weight:600}
/* fn112: редактор системного промпта */
dialog.prompt-editor{width:min(900px,calc(100vw - 32px));height:min(820px,calc(100dvh - 40px));padding:22px;display:none;flex-direction:column;gap:14px;border:1px solid var(--outline-variant);border-radius:24px;background:var(--surface-1);color:var(--on-surface);box-shadow:0 24px 100px #0008;overflow:hidden}
dialog.prompt-editor[open]{display:flex}dialog.prompt-editor::backdrop{background:#09070dbb;backdrop-filter:blur(5px)}
.prompt-editor__head{display:flex;align-items:flex-start;gap:12px}.prompt-editor__head h2{margin:0 0 3px;font-size:22px}.prompt-editor__head p{margin:0;font-size:13px;color:var(--on-surface-variant)}.prompt-editor__head .grow{flex:1;min-width:0}
.prompt-editor__tabs{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--surface-2);border:1px solid var(--outline-variant);align-self:flex-start;max-width:100%;overflow-x:auto;scrollbar-width:none}
.prompt-editor__tab{flex:none;height:36px;padding:0 16px;border:0;border-radius:10px;background:transparent;color:var(--on-surface-variant);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.prompt-editor__tab[aria-selected=true]{background:var(--primary);color:var(--on-primary)}
.prompt-editor__pane{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}.prompt-editor__pane[hidden]{display:none}.prompt-editor__pane>p{margin:0}
.prompt-editor__text{flex:1;min-height:180px;width:100%;box-sizing:border-box;resize:none;padding:14px 16px;border:1px solid var(--outline-variant);border-radius:16px;background:var(--surface-2);color:var(--on-surface);font:inherit;font-size:14px;line-height:1.6;outline:0}
.prompt-editor__text:focus{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.prompt-editor__text--code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12.5px;line-height:1.55}
.prompt-editor__row{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.prompt-editor__row .grow{flex:1;min-width:200px;margin:0}
.prompt-editor__count{margin-right:auto;font-size:12px;color:var(--on-surface-variant);font-variant-numeric:tabular-nums}
.prompt-editor__badge{flex:none;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--surface-3);color:var(--on-surface-variant)}
.prompt-editor__badge--custom{background:color-mix(in srgb,#ffb86b 22%,transparent);color:#ffb86b}
.prompt-editor__chips{display:flex;flex-wrap:wrap;gap:6px}.prompt-editor__chips .chip{height:auto;min-height:30px;padding:5px 10px;white-space:normal}
.prompt-editor__preview{flex:1;min-height:0;margin:0;overflow:auto;padding:14px 16px;border:1px solid var(--outline-variant);border-radius:16px;background:var(--surface-2);color:var(--on-surface);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.prompt-editor__foot{display:flex;justify-content:flex-end;gap:8px}
@media(max-width:600px){dialog.prompt-editor{padding:16px;gap:12px;width:calc(100vw - 24px);height:calc(100dvh - 24px)}.prompt-editor__tab{padding:0 12px}}
.prompt-editor__text--extra{flex:none;height:110px;min-height:90px;resize:vertical;font-size:13px}
/* bind116: Настройки → Привязки → карточки провайдеров устройств */
.provider-bindings{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.provider-bindings__head h2{margin:0 0 4px;font-size:18px}.provider-bindings__head p{margin:0}
.provider-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.provider-card{display:flex;flex-direction:column;gap:12px;min-width:0}
.provider-card__head{display:flex;align-items:center;gap:12px;min-width:0}
.provider-card__head img{width:44px;height:44px;flex:none;border-radius:12px;object-fit:contain}
.provider-card__head .grow{flex:1;min-width:0}.provider-card__head h3{margin:0;font-size:16px}.provider-card__head .small{display:block;overflow-wrap:anywhere}
.provider-card__badge{flex:none;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--surface-3);color:var(--on-surface-variant);white-space:nowrap}
.provider-card--on .provider-card__badge{background:color-mix(in srgb,#5fdc8f 20%,transparent);color:#7be3a3}
.provider-card__state{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}.provider-card__status{font-size:14px;color:var(--on-surface);overflow-wrap:anywhere;min-width:0}
.provider-card:not(.provider-card--on) .provider-card__status{color:var(--on-surface-variant)}
.provider-card__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
@media(max-width:600px){.provider-grid{grid-template-columns:1fr}}

/* account button + popup (account.js) */
.account-btn{width:38px;height:38px;border-radius:50%;padding:0;border:1px solid var(--outline-variant,rgba(255,255,255,.14));background:var(--surface-2,#1b1c23);cursor:pointer;display:grid;place-items:center;flex:none;margin-left:6px}
.account-btn[hidden]{display:none}
.account-av{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;font:600 13px/1 inherit;color:var(--on-surface,#eceef3);background:color-mix(in srgb,var(--primary,#8052d8) 35%,transparent) center/cover no-repeat}
.account-av--icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eceef3' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.5'/%3E%3Cpath d='M5 19.5c1.4-3 4-4.5 7-4.5s5.6 1.5 7 4.5'/%3E%3C/svg%3E");background-size:62%}
.account-av--big{width:52px;height:52px;flex:none;font-size:18px}
.account-pop{position:fixed;z-index:200;width:min(300px,calc(100vw - 16px));display:grid;gap:14px;padding:18px;border-radius:20px;background:var(--surface-2,#1b1c23);border:1px solid var(--outline-variant,rgba(255,255,255,.12));box-shadow:0 24px 50px -20px #000;animation:accpop .18s ease-out}
.account-pop__head{display:flex;gap:12px;align-items:center;min-width:0}.account-pop__head>div{display:grid;gap:3px;min-width:0}
.account-pop__head b{font-size:15px;overflow-wrap:anywhere}.account-pop__head span{font-size:12.5px;color:var(--on-surface-variant,#a3a7b3)}
.account-pop__rows{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;font-size:12.5px}.account-pop__rows dt{color:var(--on-surface-variant,#a3a7b3)}.account-pop__rows dd{margin:0;text-align:right;overflow-wrap:anywhere}
.account-pop__out{width:100%}
@keyframes accpop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.account-pop{animation:none}}