:root {
    color-scheme: dark;
    --accent: #5b8cff;
    --overlay-opacity: .72;
    --schedule-opacity: .20;
    --surface: rgba(7, 15, 25, var(--overlay-opacity));
    --surface-strong: rgba(4, 10, 18, .88);
    --border: rgba(220, 235, 255, .18);
    --text: #f4f8ff;
    --muted: rgba(228, 238, 255, .72);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #02060b; color: var(--text); }
button { font: inherit; }
.mirror-app { position: relative; width: 100%; height: 100%; min-height: 100%; overflow: hidden; isolation: isolate; background: radial-gradient(circle at center, #15283d, #02060b 72%); }
#mirrorVideo { position: absolute; inset: 0; z-index: -4; width: 100%; height: 100%; object-fit: cover; background: #02060b; transition: filter .3s ease, opacity .3s ease; }
#mirrorVideo.mirrored { transform: scaleX(-1); }
.video-shade { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.54), transparent 22%, transparent 64%, rgba(0,0,0,.64)), radial-gradient(circle at center, transparent 42%, rgba(0,0,0,.24)); }
.camera-fallback { position: absolute; inset: 0; z-index: -3; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--muted); text-align: center; background: radial-gradient(circle, #1d334b, #050a11 72%); }
.camera-fallback strong { color: var(--text); font-size: 1.25rem; }
.fallback-icon { font-size: 3.5rem; color: var(--accent); }
.top-widget-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: stretch; gap: clamp(8px, 1.2vw, 14px); padding: clamp(10px, 1.5vw, 18px); }
.widget { min-height: 64px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface); backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 10px 30px rgba(0,0,0,.16); }
.widget strong { display: block; font-size: clamp(.95rem, 1.5vw, 1.2rem); }
.widget span { color: var(--muted); font-size: clamp(.7rem, 1vw, .85rem); }
.time-widget { min-width: 132px; align-items: baseline; }
.time-widget strong { font-size: clamp(1.65rem, 3.5vw, 2.5rem); letter-spacing: -.05em; }
.time-widget > span { font-size: 1rem; }
.date-widget { min-width: 160px; display: grid; align-content: center; gap: 2px; }
.weather-widget { min-width: 185px; }
.weather-icon { font-size: 2rem !important; color: inherit !important; }
.compact-widget { margin-left: auto; min-width: 126px; }
.compact-widget + .compact-widget { margin-left: 0; }
.status-dot { width: 11px; height: 11px; border-radius: 50%; background: #45d39d; box-shadow: 0 0 0 5px rgba(69,211,157,.14); }
.status-dot.offline { background: #ff6b78; box-shadow: 0 0 0 5px rgba(255,107,120,.14); }
#deviceStatusIcon { color: #45d39d; }
.section-label { color: var(--accent); text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 900; }
.schedule-board {
    position: absolute;
    left: clamp(12px, 1.6vw, 24px);
    top: clamp(104px, 15vh, 132px);
    bottom: clamp(18px, 3vh, 30px);
    z-index: 3;
    width: clamp(250px, 25vw, 350px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 13px 13px 10px;
    border: 1px solid rgba(220,235,255,.12);
    border-radius: 16px;
    background: rgba(5, 12, 21, var(--schedule-opacity));
    box-shadow: 0 8px 28px rgba(0,0,0,.08);
    text-shadow: 0 2px 8px rgba(0,0,0,.86);
    pointer-events: none;
    transition: background-color .25s ease, opacity .25s ease;
}
.schedule-board-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    padding: 1px 2px 9px;
    border-bottom: 1px solid rgba(228,238,255,.18);
}
.schedule-board-heading > strong {
    color: rgba(244,248,255,.82);
    font-size: .74rem;
    font-weight: 700;
}
.schedule-board-list {
    min-height: 0;
    overflow: hidden;
    scroll-behavior: smooth;
}
.schedule-board-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 2px;
    border-bottom: 1px solid rgba(228,238,255,.14);
}
.schedule-board-item:last-child { border-bottom: 0; }
.schedule-board-item time,
.schedule-item time {
    display: grid;
    align-content: start;
    justify-items: center;
    min-width: 0;
    color: var(--accent);
    font-weight: 900;
    line-height: 1;
}
.schedule-board-item time strong,
.schedule-item time strong { font-size: 1.03rem; }
.schedule-board-item time span,
.schedule-item time span {
    margin-top: 3px;
    color: rgba(228,238,255,.75);
    font-size: .63rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.schedule-item-details { min-width: 0; }
.schedule-board-item .schedule-item-details > strong {
    display: block;
    color: rgba(255,255,255,.95);
    font-size: .9rem;
    line-height: 1.25;
}
.schedule-item-meta {
    display: block;
    margin-top: 3px;
    color: rgba(235,242,255,.78);
    font-size: .68rem;
    line-height: 1.35;
}
.schedule-item-notes {
    margin: 5px 0 0;
    color: rgba(247,250,255,.92);
    font-size: .76rem;
    line-height: 1.35;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.schedule-board-empty {
    padding: 18px 4px;
    color: rgba(235,242,255,.76);
    font-size: .8rem;
    line-height: 1.55;
}
.dock-reveal-zone {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 7;
    height: 72px;
}
.bottom-dock {
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 8;
    transform: translate(-50%, calc(100% + 32px));
    display: flex;
    gap: 6px;
    padding: 7px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(5,12,21,.82);
    backdrop-filter: blur(20px);
    opacity: 0;
    pointer-events: none;
    transition: transform .22s ease, opacity .22s ease;
}
.bottom-dock.dock-visible,
.bottom-dock:hover,
.bottom-dock:focus-within {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}
.bottom-dock button { width: clamp(62px, 8vw, 82px); min-height: 58px; display: grid; place-items: center; align-content: center; gap: 2px; color: var(--text); background: transparent; border: 0; border-radius: 12px; cursor: pointer; }
.bottom-dock button:hover, .bottom-dock button:focus-visible { background: rgba(255,255,255,.1); outline: 2px solid rgba(255,255,255,.35); outline-offset: -2px; }
.bottom-dock button span { font-size: 1.25rem; }
.bottom-dock button small { color: var(--muted); }
.permission-panel { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 22px; background: rgba(1,5,10,.85); backdrop-filter: blur(18px); }
.permission-panel.hidden { display: none; }
.permission-card { width: min(500px, 100%); padding: 28px; border: 1px solid var(--border); border-radius: 24px; background: #0b1726; text-align: center; box-shadow: 0 30px 90px rgba(0,0,0,.48); }
.permission-icon { font-size: 3.5rem; }
.permission-card h2 { margin: 8px 0; font-size: 1.8rem; }
.permission-card p, .permission-card small { color: var(--muted); }
.permission-card button { width: 100%; margin: 18px 0 10px; padding: 13px; border: 0; border-radius: 13px; color: #fff; background: var(--accent); font-weight: 900; cursor: pointer; }
.kiosk-modal { position: absolute; inset: 0; z-index: 30; display: none; place-items: center; padding: clamp(18px, 4vw, 44px); background: rgba(1,5,10,.7); backdrop-filter: blur(16px); }
.kiosk-modal.open { display: grid; }
.modal-card { width: min(920px, 100%); max-height: 86vh; overflow: auto; border: 1px solid var(--border); border-radius: 24px; background: rgba(7,16,28,.94); padding: clamp(18px, 3vw, 28px); box-shadow: 0 30px 90px rgba(0,0,0,.48); }
.modal-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.modal-heading h2 { margin: 3px 0 0; font-size: clamp(1.4rem, 3vw, 2.2rem); }
.close-modal { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); color: var(--text); background: #14243a; font-size: 1.5rem; cursor: pointer; }
.app-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.app-grid button { min-height: 150px; display: grid; place-items: center; align-content: center; gap: 5px; border-radius: 17px; border: 1px solid var(--border); color: var(--text); background: #0e1d30; cursor: pointer; }
.app-grid button:hover { border-color: var(--accent); background: #152b48; }
.app-grid button > span { font-size: 2rem; }
.app-grid button small { color: var(--muted); }
.schedule-list { display: grid; gap: 10px; }
.schedule-item { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 15px; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: #0d1b2c; }
.schedule-item .schedule-item-details > strong { display: block; }
.schedule-item .schedule-item-meta { color: var(--muted); font-size: .85rem; }
.schedule-item .schedule-item-notes { color: rgba(244,248,255,.9); font-size: .88rem; }
.empty-state { color: var(--muted); padding: 30px; text-align: center; }
.weather-detail-card { width: min(680px, 100%); }
.weather-detail { display: flex; align-items: center; gap: 22px; margin: 16px 0 24px; }
.weather-detail > span { font-size: 5rem; }
.weather-detail strong { font-size: clamp(3rem, 9vw, 6rem); line-height: 1; }
.weather-detail p { margin: 4px 0 0; color: var(--muted); }
.weather-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.weather-metrics > div { padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: #0d1b2c; }
.weather-metrics span { display: block; color: var(--muted); font-size: .78rem; }
.weather-metrics strong { display: block; margin-top: 5px; }
.sleep-overlay { position: absolute; inset: 0; z-index: 50; display: none; place-items: center; text-align: center; background: #000; }
.sleep-overlay.open { display: grid; }
.sleep-clock strong { display: block; font-size: clamp(4rem, 15vw, 11rem); letter-spacing: -.08em; }
.sleep-clock span, .sleep-overlay p { color: #808080; }
.kiosk-toast { position: absolute; right: 20px; bottom: 94px; z-index: 60; max-width: min(420px, calc(100% - 40px)); padding: 12px 15px; border: 1px solid var(--border); border-radius: 12px; background: rgba(4,12,22,.94); opacity: 0; transform: translateY(12px); transition: .2s ease; pointer-events: none; }
.kiosk-toast.show { opacity: 1; transform: translateY(0); }
.kiosk-toast.error { border-color: rgba(255,107,120,.65); color: #ffd8de; }
.hidden-widget { display: none !important; }
@media (max-width: 900px), (max-height: 650px) {
    .top-widget-bar { flex-wrap: wrap; }
    .compact-widget { display: none; }
    .schedule-board {
        top: clamp(100px, 20vh, 148px);
        bottom: 14px;
        width: clamp(230px, 34vw, 310px);
    }
    .bottom-dock { bottom: 10px; }
}
@media (max-width: 620px) {
    .top-widget-bar { display: grid; grid-template-columns: 1fr 1fr; }
    .widget { min-height: 54px; padding: 8px 10px; }
    .weather-widget { grid-column: 1 / -1; }
    .schedule-board {
        top: 184px;
        left: 10px;
        bottom: 10px;
        width: min(270px, calc(100% - 20px));
    }
    .schedule-board-item { grid-template-columns: 38px minmax(0,1fr); }
    .bottom-dock button { width: 48px; }
    .bottom-dock button small { display: none; }
    .app-grid, .weather-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.controller-modal-card { width: min(720px, 100%); }
.controller-status-panel { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: #0d1b2c; }
.controller-status-icon { font-size: 2.2rem; }
.controller-status-panel strong { display: block; margin-bottom: 6px; }
.controller-status-panel p { margin: 0; color: var(--muted); line-height: 1.55; }
.controller-modal-actions { display: flex; gap: 10px; margin-top: 16px; }
.controller-modal-actions button { min-height: 46px; padding: 0 16px; border-radius: 12px; cursor: pointer; font-weight: 800; }
.modal-primary-button { border: 0; color: #fff; background: var(--accent); }
.modal-secondary-button { border: 1px solid var(--border); color: var(--text); background: #14243a; }
.controller-steps { margin: 16px 0 0; padding-left: 22px; color: var(--muted); line-height: 1.65; }
@media (max-width: 620px) { .controller-modal-actions { flex-direction: column; } }