:root {
    color-scheme: light;
    --ink: #30241f;
    --muted: #75665f;
    --paper: #fffdfb;
    --sand: #f4ede7;
    --accent: #b96835;
    --accent-dark: #965027;
    --line: #e5d8ce;
    --success: #2e7d54;
    --danger: #a33b35;
}

* { box-sizing: border-box; }
strong, b { font-weight: 400; }
h1, h2 { font-weight: 500; }
body {
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(145deg, #f7f1ec 0%, #eee3da 100%);
    color: var(--ink);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
}
.shell { width: min(760px, calc(100% - 28px)); margin: 0 auto; padding: 22px 0 20px; }
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 17px; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--ink); color: white; font-size: .86rem; font-weight: 500; }
.brand strong, .brand small { display: block; }
.brand strong { font-weight: 500; }
.brand small { color: var(--muted); margin-top: 2px; }
.topnav { display: flex; justify-content: flex-end; gap: 12px; margin: -47px 0 24px; font-size: .84rem; }
.topnav a { color: var(--accent-dark); }
.card, .status-card, .danger-zone { background: rgba(255,253,251,.94); border: 1px solid rgba(229,216,206,.95); box-shadow: 0 12px 35px rgba(64,42,30,.07); }
.card { border-radius: 15px; padding: 19px 22px; margin-bottom: 12px; }
.card.narrow { max-width: 520px; margin-inline: auto; }
.card h1, .card h2 { margin: 5px 0 9px; line-height: 1.16; }
.card h1 { font-size: 1.55rem; }
.card h2 { font-size: 1.22rem; }
.lead { color: var(--muted); line-height: 1.5; margin-bottom: 16px; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .09em; font-size: .69rem; font-weight: 500; }
.form-grid { display: grid; gap: 12px; }
label { display: grid; gap: 5px; font-size: .86rem; font-weight: 400; }
label small { color: var(--muted); font-weight: 400; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 9px 10px; color: var(--ink); font: inherit; }
textarea { resize: vertical; min-height: 105px; line-height: 1.4; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(185,104,53,.16); border-color: var(--accent); }
input[type="range"] { padding: 8px 0; accent-color: var(--accent); }
.button { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-height: 34px; padding: 0 13px; border: 0; border-radius: 8px; font-family: inherit; font-size: .86rem; font-weight: 400; text-decoration: none; cursor: pointer; }
.button.primary { background: var(--accent); color: #fff; }
.button.primary:hover { background: var(--accent-dark); }
.button.secondary { background: var(--ink); color: #fff; }
.button:disabled { opacity: .45; cursor: not-allowed; }
.callback { background: var(--sand); border-radius: 9px; padding: 10px; margin-bottom: 14px; }
.callback span { display: block; color: var(--muted); font-size: .78rem; margin-bottom: 5px; }
.callback code { overflow-wrap: anywhere; font-size: .87rem; }
.notice { padding: 10px 12px; margin: 0 0 12px; border-radius: 9px; font-size: .86rem; }
.notice.success { background: #e8f5ed; color: #205d3d; border: 1px solid #b8ddc7; }
.notice.error { background: #fbeceb; color: #7f2a26; border: 1px solid #edc3c0; }
.notice.info { background: #edf3f7; color: #355264; border: 1px solid #ccdce5; }
.status-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.status-grid.three { grid-template-columns: repeat(3, 1fr); }
.status-card { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 11px; }
.status-card > div { min-width: 0; }
.status-card small, .status-card strong { display: block; }
.status-card small { color: var(--muted); margin-bottom: 2px; font-size: .78rem; }
.status-card strong { font-size: .93rem; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #a8a09b; box-shadow: 0 0 0 4px #ece8e5; }
.status-dot.online { background: var(--success); box-shadow: 0 0 0 4px #dcefe4; }
.status-dot.error { background: var(--danger); box-shadow: 0 0 0 4px #f4dddb; }
.speaker-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--sand); font-size: .8rem; font-weight: 400; }
.refresh-link { flex: 0 0 auto; margin-left: auto; color: var(--accent-dark); font-size: 1.05rem; line-height: 1; text-decoration: none; }
.refresh-link:hover { color: var(--accent); }
.danger-zone { padding: 10px 13px; border-radius: 10px; margin-top: 12px; }
.danger-zone summary { cursor: pointer; color: var(--muted); }
.danger-zone form { margin-top: 12px; }
.text-button { border: 0; background: none; padding: 0; color: var(--danger); font-family: inherit; font-size: .82rem; font-weight: 400; cursor: pointer; text-decoration: underline; }
footer { text-align: center; color: var(--muted); font-size: .74rem; padding-top: 12px; }
.stack { display: grid; gap: 10px; }
.stack .card { margin-bottom: 0; }
.settings-section { padding: 0; overflow: hidden; }
.settings-section > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 22px; cursor: pointer; list-style: none; }
.settings-section > summary::-webkit-details-marker { display: none; }
.settings-section > summary::after { content: "›"; flex: 0 0 auto; color: var(--accent); font-size: 1.5rem; line-height: 1; transform: rotate(90deg); transition: transform .18s ease; }
.settings-section[open] > summary::after { transform: rotate(-90deg); }
.settings-summary .eyebrow, .settings-summary strong { display: block; }
.settings-summary strong { margin-top: 3px; font-size: 1.1rem; line-height: 1.2; }
.settings-body { padding: 16px 22px 19px; border-top: 1px solid var(--line); }
.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.switch-row { display: flex; grid-column: 1 / -1; align-items: center; gap: 8px; margin: 7px 0 11px; }
.switch-row input, .choice-row input, .day-check input { width: auto; }
.hint { color: var(--muted); font-size: .81rem; line-height: 1.45; }
.schedule-list { display: grid; gap: 5px; margin-top: 10px; }
.schedule-row { display: grid; grid-template-columns: minmax(130px, 1fr) 115px auto 115px; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.schedule-row:last-child { border-bottom: 0; }
.day-check { display: flex; align-items: center; gap: 9px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0; }
.choice-row label { display: flex; align-items: center; gap: 8px; }
.volume-mode-block { grid-column: 1 / -1; padding: 9px 10px; border-radius: 9px; background: var(--sand); }
.volume-mode-block > span { font-size: .86rem; }
.volume-mode-block .choice-row { margin: 8px 0 5px; }
.volume-mode-block > small { color: var(--muted); font-size: .76rem; }
.sound-preview { display: grid; gap: 8px; padding: 10px; border-radius: 9px; background: var(--sand); }
.sound-preview audio { width: 100%; }
.button-row { display: flex; flex-wrap: wrap; gap: 7px; }
.button-row form { margin: 0; }
.inline-form { display: inline; }
.top-gap { display: block; margin-top: 10px; }
.cron-box code { display: block; padding: 9px; margin-top: 7px; border-radius: 8px; background: var(--sand); overflow-wrap: anywhere; }
.sticky-save { margin-bottom: 4px; }
.compact-card { padding-block: 17px; }
.health-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.health-item { display: flex; align-items: flex-start; gap: 9px; min-width: 0; padding: 10px; border-radius: 9px; background: var(--sand); }
.health-item .status-dot { flex: 0 0 auto; margin-top: 5px; }
.health-item small, .health-item strong, .health-item span { display: block; }
.health-item small { color: var(--muted); }
.health-item strong { margin: 1px 0 2px; font-size: .9rem; }
.health-item span { color: var(--muted); font-size: .75rem; overflow-wrap: anywhere; }
.pause-card p { color: var(--muted); }
.test-volume-row { display: grid; grid-template-columns: 105px 1fr; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.volume-button { min-width: 50px; min-height: 32px; border: 1px solid var(--line); border-radius: 7px; background: var(--sand); color: var(--ink); font-family: inherit; font-size: .82rem; font-weight: 400; cursor: pointer; }
.volume-button:hover { border-color: var(--accent); background: #fff; }
.current-volume { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 10px 0 11px; padding: 9px 11px; border-radius: 9px; background: var(--sand); }
.current-volume span, .current-volume strong { display: block; }
.current-volume span { color: var(--muted); font-size: .76rem; }
.current-volume strong { margin-top: 2px; font-size: .94rem; }
.target-volume-list { display: grid; gap: 2px; margin-top: 3px; }
.refresh-link.labeled { font-size: .79rem; white-space: nowrap; }
.sonos-player-list { display: grid; gap: 7px; margin-top: 12px; }
.sonos-player-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; background: var(--sand); }
.sonos-player-copy { min-width: 0; }
.sonos-player-copy > span { display: block; margin-top: 2px; color: var(--muted); font-size: .76rem; }
.sonos-player-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.sonos-player-name > span { overflow-wrap: anywhere; }
.sonos-player-name small { padding: 2px 6px; border-radius: 999px; background: #e3d5ca; color: var(--muted); font-size: .67rem; }
.sonos-player-volume { min-width: 48px; text-align: right; font-size: .94rem; }
.sonos-player-volume small { display: block; color: var(--muted); font-size: .68rem; }
.player-targets { display: grid; gap: 7px; margin: 0; padding: 0; border: 0; }
.player-targets legend { margin-bottom: 6px; font-size: .86rem; }
.player-target { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--sand); cursor: pointer; }
.player-target input { width: auto; margin: 0; }
.section-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.section-heading-row h2 { margin-bottom: 0; }
.history-list { display: grid; margin-top: 12px; }
.history-item { display: grid; grid-template-columns: 120px 100px 1fr; gap: 9px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .81rem; }
.history-item time { color: var(--muted); }
.history-item.has-error strong, .history-item.has-error span { color: var(--danger); }
.folder-picker { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.folder-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.folder-picker-heading strong, .folder-picker-heading small { display: block; }
.folder-picker-heading small { margin-top: 3px; color: var(--muted); font-size: .78rem; }
.small-button { min-height: 31px; padding-inline: 11px; font-size: .8rem; }
.folder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.folder-option { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.folder-option input { width: auto; flex: 0 0 auto; }
.folder-option span { min-width: 0; overflow-wrap: anywhere; }
.sound-library { display: grid; gap: 9px; margin-top: 14px; }
.sound-item { display: grid; gap: 8px; padding: 11px; border-radius: 9px; background: var(--sand); }
.sound-item audio { width: 100%; height: 36px; }
.sound-item-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.sound-item-heading > span { min-width: 0; overflow-wrap: anywhere; }
.sound-item-heading small { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; background: #e3d5ca; color: var(--muted); font-size: .7rem; }
.sound-actions { align-items: center; }
.rule-form { margin-top: 13px; }
.rule-form .button { grid-column: 1 / -1; }
.rule-list { display: grid; gap: 7px; margin-top: 14px; }
.rule-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.rule-copy, .rule-copy span, .rule-copy small { display: block; }
.rule-copy { min-width: 0; }
.rule-title { font-weight: 400; }
.rule-copy small { margin-top: 3px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.rule-sound { margin-top: 3px; color: var(--accent-dark); font-size: .8rem; }

@media (max-width: 620px) {
    .shell { width: min(100% - 14px, 760px); padding-top: 14px; }
    .topnav { margin: 0 0 12px; justify-content: space-between; }
    .status-grid { grid-template-columns: 1fr; }
    .status-grid.three { grid-template-columns: 1fr; }
    .card { border-radius: 13px; padding: 16px 14px; }
    .settings-section { padding: 0; }
    .settings-section > summary { padding: 14px; }
    .settings-body { padding: 14px 14px 16px; }
    .two-columns { grid-template-columns: 1fr; }
    .schedule-row { grid-template-columns: 1fr 1fr; }
    .schedule-row > span { display: none; }
    .day-check { grid-column: 1 / -1; }
    .button-row { display: flex; width: 100%; }
    .button-row form { width: auto; }
    .health-grid { grid-template-columns: 1fr; }
    .test-volume-row { grid-template-columns: 1fr; }
    .compact-buttons { display: grid; grid-template-columns: repeat(3, 1fr); }
    .compact-buttons form { width: auto; }
    .volume-button { width: 100%; }
    .section-heading-row { align-items: flex-start; }
    .current-volume { align-items: flex-start; }
    .sonos-player-item { grid-template-columns: auto minmax(0, 1fr) auto; }
    .section-heading-row .text-button { white-space: nowrap; margin-top: 10px; }
    .history-item { grid-template-columns: 1fr; gap: 3px; }
    .folder-picker-heading { align-items: flex-start; flex-direction: column; }
    .folder-grid { grid-template-columns: 1fr; }
    .rule-item { align-items: flex-start; }
}