.ls-entry { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem; border: 1px solid var(--cloud-border); border-radius: 16px; background: var(--cloud-accent-soft); }
.ls-entry[hidden] { display: none; }
.ls-entry h2 { margin: .3rem 0 .65rem; font-size: 1.6rem; letter-spacing: -.035em; }
.ls-entry p { margin: 0; color: var(--cloud-ink-soft); }
.ls-entry-actions { display: grid; gap: .65rem; text-align: center; flex-shrink: 0; }
.ls-entry-actions span { font-size: .85rem; color: var(--cloud-ink-soft); }
#location-setup-screen { --ls-surface: #fffefa; --ls-paper: #f5f4ee; color: var(--cloud-ink); background: var(--ls-surface); border: 1px solid var(--cloud-border); border-radius: 18px; overflow: hidden; font-size: 1rem; line-height: 1.55; }
[data-theme="dark"] #location-setup-screen { --ls-surface: #152629; --ls-paper: #102023; }
#location-setup-screen * { box-sizing: border-box; }
#location-setup-screen button, #location-setup-screen input, #location-setup-screen select { font: inherit; }
#location-setup-screen button { min-height: 44px; border-radius: 8px; padding: .65rem 1rem; cursor: pointer; }
#location-setup-screen button:disabled { cursor: default; opacity: .48; }
#location-setup-screen :focus-visible, .ls-entry :focus-visible { outline: 3px solid var(--cloud-accent); outline-offset: 4px; }
#location-setup-screen h1 { margin: .4rem 0 .6rem; max-width: 24ch; font-size: clamp(1.8rem, 2.6vw, 2.65rem); letter-spacing: -.045em; line-height: 1.13; font-weight: 650; }
#location-setup-screen h3 { margin: 0; font-size: 1.08rem; }
#location-setup-screen p { margin: 0; }
#location-setup-screen .eyebrow { font-size: .73rem; letter-spacing: .13em; color: var(--cloud-accent); font-weight: 700; text-transform: uppercase; }
.ls-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.6rem; border-bottom: 1px solid var(--cloud-border); }
.ls-topbar > div { display: flex; align-items: center; gap: 1rem; }
.ls-layout { display: grid; grid-template-columns: 242px minmax(0, 1fr); }
.ls-rail { background: var(--ls-paper); padding: 2rem 1rem; border-right: 1px solid var(--cloud-border); }
.ls-rail ol { padding: 0; margin: 0; list-style: none; display: grid; gap: .75rem; }
#location-setup-screen .ls-rail button { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .6rem; text-align: left; color: var(--cloud-ink-soft); background: transparent; border: 1px solid transparent; font-size: .88rem; font-weight: 500; }
.ls-rail button > span:first-child { display: grid; place-items: center; flex: 0 0 30px; height: 30px; font-size: .72rem; border: 1px solid var(--cloud-border); border-radius: 50%; }
#location-setup-screen .ls-rail .active button { color: var(--cloud-accent-strong); background: var(--cloud-accent-soft); border-color: var(--cloud-border); font-weight: 650; opacity: 1; }
.ls-rail .active button > span:first-child, .ls-rail .done button > span:first-child { background: var(--cloud-accent); color: white; border-color: transparent; }
#location-setup-screen .ls-rail > p { margin: 2.5rem .6rem 0; font-size: .8rem; line-height: 1.7; color: var(--cloud-ink-soft); }
.ls-main { padding: 2.4rem clamp(1.5rem, 4vw, 3.5rem); max-width: 920px; width: 100%; }
.ls-lead { color: var(--cloud-ink-soft); max-width: 60ch; }
.ls-form { margin-top: 2rem; display: grid; gap: 1.25rem; }
.ls-form label { display: grid; gap: .45rem; font-weight: 550; font-size: .9rem; }
.ls-form input:not([type="checkbox"]), .ls-form select { width: 100%; min-width: 0; padding: .8rem .9rem; min-height: 46px; border: 1px solid var(--cloud-border); border-radius: 8px; background: var(--cloud-surface-strong); color: var(--cloud-ink); }
.ls-form input[readonly] { background: var(--ls-paper); }
.ls-caption { font-size: .84rem; color: var(--cloud-ink-soft); line-height: 1.6; }
.ls-note { padding: 1rem 1.1rem; border-left: 3px solid var(--cloud-accent); background: var(--cloud-accent-soft); border-radius: 0 8px 8px 0; font-size: .9rem; line-height: 1.6; }
.ls-note.ls-good { border-color: var(--cloud-online); }
.ls-actions, .ls-choice-row { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.ls-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.4rem; margin-top: .65rem; border-top: 1px solid var(--cloud-border); }
.ls-form details { padding: 1rem 0; border-top: 1px solid var(--cloud-border); }
.ls-form details[open] { display: grid; gap: .8rem; }
.ls-form details[open] > :not(summary) { margin-top: .8rem; }
.ls-form summary { cursor: pointer; color: var(--cloud-accent-strong); font-weight: 550; }
.ls-form a { color: var(--cloud-accent-strong); }
.ls-two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ls-form .ls-check { display: flex; align-items: flex-start; gap: .8rem; padding: .9rem; border: 1px solid var(--cloud-border); border-radius: 8px; cursor: pointer; font-weight: 450; }
.ls-check input { width: 20px; height: 20px; flex: 0 0 20px; margin: 2px 0 0; accent-color: var(--cloud-accent); }
.ls-check small, .ls-checks small, .ls-speaker small, .ls-draft-list small { display: block; color: var(--cloud-ink-soft); font-size: .82rem; font-weight: 400; }
.ls-listening { display: grid; gap: .6rem; }
.ls-checks { display: grid; gap: 1.2rem; }
.ls-checks > div { display: flex; gap: .85rem; }
.ls-checks > div > span { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--cloud-accent-soft); color: var(--cloud-accent-strong); font-size: .72rem; font-weight: 700; }
.ls-split { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ls-speakers { display: grid; gap: .6rem; }
.ls-form .ls-speaker { display: grid; grid-template-columns: 1fr 180px; align-items: center; gap: 1rem; padding: .85rem; border: 1px solid var(--cloud-border); border-radius: 8px; }
.ls-speaker span { overflow-wrap: anywhere; min-width: 0; }
.ls-inline-form { display: flex; align-items: end; gap: .8rem; }
.ls-inline-form label { flex: 1; min-width: 0; }
.ls-inline-form button { flex-shrink: 0; }
.ls-reuse { display: grid; gap: .7rem; padding: 1rem; border: 1px solid var(--cloud-border); border-radius: 10px; background: var(--ls-paper); }
.ls-staff-link { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
.ls-staff-link label { flex: 1 1 100%; }
.ls-link-button { display: inline-flex; align-items: center; min-height: 44px; padding: .65rem 1rem; border: 1px solid var(--cloud-border); border-radius: 8px; font-weight: 600; text-decoration: none; }
.ls-error:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.2rem 1.6rem; background: var(--cloud-surface-strong); border-top: 2px solid var(--cloud-offline); color: var(--cloud-ink); }
.ls-notice:empty { display: none; }
.ls-notice { padding: 1rem 1.6rem; border-top: 1px solid var(--cloud-border); color: var(--cloud-accent-strong); font-size: .9rem; }
.ls-dashboard, .ls-complete { padding: clamp(1.5rem, 5vw, 4rem); display: grid; justify-items: start; gap: 1.5rem; }
.ls-draft-list { display: grid; gap: .75rem; width: 100%; margin-top: 1rem; }
.ls-draft-list button { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; }
.ls-success-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--cloud-accent-soft); color: var(--cloud-accent-strong); font-size: 1.8rem; }
.ls-complete-stats { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; padding: 1.5rem 0; gap: 1rem; border-top: 1px solid var(--cloud-border); border-bottom: 1px solid var(--cloud-border); }
.ls-complete-stats strong { display: block; font-size: 1.6rem; letter-spacing: -.04em; }
.ls-complete-stats span { color: var(--cloud-ink-soft); font-size: .85rem; }
.ls-bridge-art { position: relative; width: min(100%, 300px); margin: .5rem auto 1rem; height: 130px; border-radius: 14px; background: linear-gradient(130deg, #263e42, #101d20); border: 1px solid #526567; box-shadow: 0 15px 20px #0002; display: flex; justify-content: center; flex-direction: column; align-items: center; color: #ecf4f0; }
.ls-bridge-art strong { font-size: 1.8rem; font-weight: 450; letter-spacing: -.03em; }
.ls-bridge-art > span:not(.ls-led) { font-size: .6rem; letter-spacing: .24em; color: #a1b4b5; }
.ls-led { position: absolute; top: 18px; left: 20px; height: 5px; width: 5px; border-radius: 50%; background: #d6a55b; }
.ls-led.on { background: #87dfb8; }
#location-setup-screen, .ls-entry { --cloud-accent: #1d756b; --cloud-accent-strong: #155e57; --cloud-accent-soft: #e9f3ee; }
[data-theme="dark"] #location-setup-screen, [data-theme="dark"] .ls-entry { --cloud-accent: #2b9385; --cloud-accent-strong: #91d7c5; --cloud-accent-soft: #203b37; }
@media (max-width: 1050px) { .ls-layout { grid-template-columns: 190px minmax(0, 1fr); } .ls-rail { padding: 1.5rem .65rem; } .ls-main { padding: 2rem 1.4rem; } .ls-topbar .ls-caption { display: none; } }
@media (max-width: 740px) { .ls-entry { flex-direction: column; align-items: stretch; padding: 1.4rem; gap: 1.2rem; } .ls-entry-actions { text-align: left; justify-items: start; } .ls-layout { display: block; } .ls-rail { padding: .8rem; border-right: 0; border-bottom: 1px solid var(--cloud-border); } .ls-rail ol { display: flex; justify-content: space-between; gap: .2rem; } #location-setup-screen .ls-rail button { width: auto; padding: .3rem; } .ls-rail button > span:last-child, .ls-rail > p { display: none; } .ls-topbar { padding: .8rem 1rem; } .ls-topbar > .eyebrow { max-width: 45%; overflow-wrap: anywhere; } .ls-main { padding: 1.6rem 1.1rem; } .ls-form { margin-top: 1.5rem; } .ls-two-columns { grid-template-columns: 1fr; } .ls-form .ls-speaker { grid-template-columns: 1fr; gap: .5rem; } .ls-inline-form { flex-wrap: wrap; } .ls-footer button { padding: .6rem .75rem; font-size: .9rem; } .ls-complete-stats { grid-template-columns: 1fr; } .ls-complete-stats > div { display: flex; align-items: center; gap: 1rem; } .ls-complete-stats strong { min-width: 70px; } }
