/* Shared by both layouts: the settings sheet. */
.sheet-scrim{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;
  padding:0 calc(env(safe-area-inset-right,0px) + 8px) 0 calc(env(safe-area-inset-left,0px) + 8px)}
.sheet{width:100%;max-width:600px;max-height:88vh;max-height:88dvh;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;
  background:#1c1c1e;color:#a1a1a8;border-radius:22px 22px 0 0;padding:0 18px calc(env(safe-area-inset-bottom,0px) + 22px);
  display:flex;flex-direction:column;gap:20px;font-size:15px;line-height:1.35;box-shadow:0 -10px 40px rgba(0,0,0,.5)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#1c1c1e;margin:0 -18px;padding:14px 18px 8px;z-index:2}
.sheet-head h2{color:#f5f5f7;font-size:20px;margin:0}
.sheet .done-btn{background:transparent;color:#0a84ff;font-weight:700;min-height:44px;padding:0 6px;font-size:17px}
.set-group{display:flex;flex-direction:column;gap:10px}
.set-group h3{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#8e8e93;font-weight:700}
.set-group p{margin:0}
.set-note{font-size:13px;color:#8e8e93}
.set-strips{display:flex;flex-direction:column;gap:8px}
.set-strips:empty{display:none}
.set-strip{background:#2c2c2e;border-radius:14px;padding:6px 10px 10px 14px;display:flex;flex-direction:column;gap:4px;transition:box-shadow .3s}
.set-strip.flash{box-shadow:0 0 0 2px #0a84ff}
.set-strip-top{display:flex;align-items:center;gap:10px}
.set-strip .dot{width:10px;height:10px;border-radius:50%;background:#636366;flex:none}
.set-strip[data-state=connected] .dot{background:#34c759;box-shadow:0 0 10px #34c759}
.set-strip[data-state=connecting] .dot{background:#ffcc00;animation:pulse 1s infinite}
.set-strip[data-state=lost] .dot{background:#ff453a}
.nm-input{flex:1;min-width:0;font:inherit;font-size:17px;font-weight:600;color:#f5f5f7;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.12);border-radius:0;padding:6px 0;min-height:44px;-webkit-user-select:text;user-select:text;-webkit-appearance:none;appearance:none}
.nm-input:focus{outline:none;border-bottom-color:#0a84ff}
.set-strip .status{font-size:13px;color:#8e8e93;white-space:normal;margin:0}
.set-strip-bot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.type-lab{display:flex;align-items:center;gap:8px;font-size:14px;flex:1 1 180px;min-width:0;color:#a1a1a8}
.type-lab select{font:inherit;font-size:16px;color:#f5f5f7;background:#3a3a3c;border:0;border-radius:10px;min-height:44px;padding:0 10px;flex:1;min-width:0;width:auto}
.sheet .btn-small{min-height:44px;padding:0 14px;border-radius:12px;font-size:15px}
.sheet .conn{flex:none;background:#0a84ff;color:#fff}
.set-strip[data-state=connected] .conn,.set-strip[data-state=connecting] .conn{background:#3a3a3c;color:#f5f5f7}
.sheet .rm{background:rgba(255,69,58,.16);color:#ff6961;margin-left:auto}
.sheet .set-add{background:#2c2c2e;color:#0a84ff;min-height:50px;border:0;border-radius:14px;width:100%}
.sheet .showall{display:flex;align-items:center;gap:10px;color:#f5f5f7;min-height:44px;font-size:15px;padding:0}
.sheet .showall input{width:22px;height:22px;flex:none;accent-color:#0a84ff}
.sheet .share{display:flex;flex-direction:row;align-items:center;gap:10px;background:#2c2c2e;border-radius:14px;padding:10px 12px 10px 14px;min-height:60px;border:0;margin:0}
.sheet .share .dot{display:block;width:10px;height:10px;border-radius:50%;background:#636366;flex:none}
.sheet .share[data-state=live] .dot{background:#34c759;box-shadow:0 0 10px #34c759}
.sheet .share[data-state=starting] .dot{background:#ffcc00}
.sheet .share[data-state=lost] .dot{background:#ff453a}
.sheet .share-text{flex:1;min-width:0}
.sheet .share-text h4{margin:0;font-size:15px;color:#f5f5f7;font-weight:600}
.sheet .share .status{display:block!important;font-size:13px;color:#8e8e93;white-space:normal}
.seg{display:grid;grid-template-columns:repeat(4,1fr);background:#2c2c2e;border-radius:12px;padding:3px;gap:3px}
.seg button{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:#f5f5f7;font:inherit;font-size:14px;font-weight:600;min-height:44px;border-radius:9px;cursor:pointer;padding:0 4px}
.seg button[aria-checked=true]{background:#636366}
.set-remote{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.set-remote li::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:#636366;margin-right:8px;vertical-align:1px}
.set-remote li.on::before{background:#34c759}
.remote-only{display:none!important}
.remote-mode .remote-only{display:flex!important}
.remote-mode .local-only,.remote-mode .add-strip{display:none!important}
.sheet .last-sent{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#6e6e76;word-break:break-all}
.sheet .help p{color:#a1a1a8}
.sheet :focus-visible{outline:3px solid #0a84ff;outline-offset:2px}
html[data-layout=desktop] .sheet-scrim{align-items:center;padding:24px}
html[data-layout=desktop] .sheet{border-radius:22px;max-height:86vh}
@media (min-width:700px) and (min-height:700px){ .sheet-scrim{align-items:center;padding:24px} .sheet{border-radius:22px;max-height:86vh;max-height:86dvh} }