/* ═══════════════════════════════════════════════════════════════
   SHEEPOW TV  ·  Wall Display  ·  v2  (Landscape + Portrait)
   Designed for Samsung Frame, LG OLED, Tizen & webOS
   ═══════════════════════════════════════════════════════════════ */

/* ── Design tokens — SheepowBrandDark (matches Kiosk + Wall dark theme) ── */
/* Self-contained so tv.css works without app.css design tokens            */
#tv-root {
    /* Backgrounds — deep navy, matching SheepowNight palette */
    --bg:          #182135;
    --bg-2:        #1D2840;
    --bg-3:        #222E4A;
    --surface:     #25304C;
    --card:        #2C3A58;
    --card-h:      #334265;

    /* Brand — Teal primary (Kiosk/Wall dark mode), Lavender accent */
    --teal:        #2DB6A3;
    --teal-2:      #4ECFBD;
    --teal-dim:    rgba(45, 182, 163, 0.15);
    --purple:      #7B61FF;
    --purple-2:    #9A85FF;
    --purple-3:    #C4B5FD;
    --purple-dim:  rgba(123, 97, 255, 0.15);
    --cyan:        #2DB6A3;
    --gold:        #FFB631;
    --green:       #2DB6A3;
    --pink:        #FF6B8A;

    /* Glow */
    --glow-teal:   0 0 28px rgba(45,182,163,0.45), 0 0 72px rgba(45,182,163,0.18);
    --glow-purple: 0 0 28px rgba(123,97,255,0.45),  0 0 72px rgba(123,97,255,0.18);

    /* Gradients */
    --g-text:      linear-gradient(135deg, #C4B5FD 0%, #4ECFBD 60%, #FFB631 100%);
    --g-primary:   linear-gradient(135deg, #2DB6A3 0%, #1D9286 100%);
    --g-card:      linear-gradient(160deg, rgba(45,182,163,0.08) 0%, rgba(123,97,255,0.05) 100%);

    /* Text — light on dark navy */
    --t1: #FFFFFF;
    --t2: #E1E7F2;
    --t3: #8E9EC2;
    --t4: #5A6A8E;

    /* Borders */
    --b1: rgba(255,255,255,0.06);
    --b2: rgba(255,255,255,0.10);
    --b3: rgba(255,255,255,0.16);

    /* Radii */
    --r-xs:   6px;
    --r-sm:   10px;
    --r:      16px;
    --r-lg:   24px;
    --r-xl:   32px;
    --r-pill: 100px;

    /* Transitions */
    --ease:   cubic-bezier(0.4, 0, 0.2, 1);
    --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Font */
    --font: 'Inter', system-ui, -apple-system, sans-serif;

    /* ── Layout ── */
    position: fixed;
    inset: 0;
    transform-origin: top left;
    background: var(--bg);
    font-family: var(--font);
    color: var(--t1);
    overflow: hidden;
    outline: none;
    user-select: none;
}

/* Landscape canvas: 1920×1080 */
#tv-root.tv-landscape {
    width:  1920px;
    height: 1080px;
}

/* Portrait canvas: 1080×1920 */
#tv-root.tv-portrait {
    width:  1080px;
    height: 1920px;
}

#tv-root.tv-booting {
    width: 100vw !important;
    height: 100vh !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
}

html.tv-mode,
body.tv-mode {
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: transparent !important;
    color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════════════
   ── LANDSCAPE LAYOUT ─────────────────────────────────────────
   ═══════════════════════════════════════════════════════════════ */

/* ── Full-screen slideshow background ───────────────────────── */
.tv-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--bg);
}

.tv-bg__placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 52%, var(--surface) 100%);
}

.tv-bg__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1);
    animation: tv-kenburns 50s ease-in-out infinite alternate;
    transform-origin: center center;
    will-change: transform, opacity;
}
.tv-bg__img--active { opacity: 1; }

@keyframes tv-kenburns {
    0%   { transform: scale(1.0)  translate(0, 0); }
    100% { transform: scale(1.07) translate(-1.5%, -0.8%); }
}

/* Overlay: left heavy (for left panel readability), lighter right (slideshow visible) */
.tv-bg__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right,
            var(--bg) 0%,
            transparent 34%,
            transparent 64%,
            var(--bg) 100%
        );
    opacity: 0.58;
    z-index: 1;
}

/* ── Top app bar ─────────────────────────────────────────────── */
.tv-l-topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 80px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 52px;
    background: rgba(24,33,53,0.75);
    backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.tv-l-topbar__logo {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.95);
    border-radius: 100px;
    padding: 6px 18px 6px 10px;
    border: 1.5px solid rgba(190,199,216,0.6);
    flex-shrink: 0;
}
.tv-l-topbar__logoimg {
    height: 38px;
    width: auto;
}
.tv-l-topbar__wordmark {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
}
.tv-l-topbar__sheep { color: #1F2A44; }
.tv-l-topbar__ow    { color: #2DB6A3; }

.tv-l-topbar__center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tv-l-topbar__dots {
    display: flex;
    gap: 7px;
    align-items: center;
}
.tv-l-topbar__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    transition: background 0.3s, transform 0.3s;
}
.tv-l-topbar__dot--active {
    background: rgba(255,255,255,0.88);
    transform: scale(1.5);
}

.tv-l-topbar__right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.tv-l-topbar__clock-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(37,48,76,0.80);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 100px;
    padding: 8px 22px;
}
.tv-l-topbar__time {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}
.tv-l-topbar__sep {
    font-size: 22px;
    color: rgba(255,255,255,0.3);
}
.tv-l-topbar__date {
    font-size: 20px;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
}

/* ── Left panel — Clock + upcoming events ───────────────────── */
.tv-l-left {
    position: absolute;
    left: 0; top: 80px; bottom: 60px;
    width: 420px;
    z-index: 10;
    display: flex;
    flex-direction: column;
}

.tv-l-left__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 44px 40px 32px 52px;
}

.tv-l-clock {
    font-size: 108px;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #fff;
    text-shadow:
        0 0 48px rgba(45,182,163,0.5),
        0 2px 20px rgba(0,0,0,0.8);
}

.tv-l-date {
    font-size: 22px;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.03em;
    margin-top: 10px;
    margin-bottom: 32px;
    text-transform: uppercase;
}

.tv-l-divider {
    height: 1px;
    background: rgba(255,255,255,0.10);
    margin-bottom: 28px;
    flex-shrink: 0;
}

.tv-l-upcoming-label {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.tv-l-upcoming-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    overflow: hidden;
}

.tv-l-upcoming-empty {
    font-size: 18px;
    color: rgba(255,255,255,0.3);
}

.tv-l-upcoming-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border-left: 3px solid #2DB6A3;
    background: rgba(255,255,255,0.06);
    border-radius: 0 10px 10px 0;
    backdrop-filter: blur(8px);
    flex-shrink: 0;
}
.tv-l-upcoming-item__time {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tv-l-upcoming-item__title {
    font-size: 19px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tv-l-left__logo {
    margin-top: auto;
    padding-top: 20px;
    flex-shrink: 0;
}
.tv-l-left__logo img {
    height: 24px;
    opacity: 0.25;
    filter: brightness(0) invert(1);
}

/* ── Right panel ─────────────────────────────────────────────── */
.tv-l-right {
    position: absolute;
    left: 440px;
    top: 80px;
    right: 0;
    bottom: 60px;
    z-index: 10;
    display: flex;
    flex-direction: column;
}

.tv-l-right__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 36px 52px 24px 24px;
}

/* ── Section header ──────────────────────────────────────────── */
.tv-l-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-shrink: 0;
}

.tv-l-section-title {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    gap: 16px;
}
.tv-l-section-title i {
    font-size: 34px;
    color: var(--teal-2, #4ECFBD);
    text-shadow: 0 0 20px rgba(45,182,163,0.5);
}

.tv-l-section-hint {
    font-size: 20px;
    color: rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Full-width calendar grid ────────────────────────────────── */
.tv-l-cal-grid-wrap {
    flex: 1;
    overflow: hidden;
}

.tv-l-cal-full-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    height: 100%;
}

.tv-l-cal-day-label {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: rgba(255,255,255,0.35);
    padding: 4px 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tv-l-cal-day {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 7px 6px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(6px);
    overflow: hidden;
    transition: background 0.15s, box-shadow 0.15s;
    border: 1px solid rgba(255,255,255,0.04);
    cursor: default;
    min-height: 80px;
}
.tv-l-cal-day__num {
    font-size: 20px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    line-height: 1;
    margin-bottom: 5px;
    align-self: flex-start;
}
.tv-l-cal-day--other {
    opacity: 0.3;
    background: rgba(255,255,255,0.02);
}
.tv-l-cal-day--today {
    background: var(--teal, #2DB6A3) !important;
    border-color: transparent;
    box-shadow: 0 0 20px rgba(45,182,163,0.6);
}
.tv-l-cal-day--today .tv-l-cal-day__num { color: #fff; font-weight: 800; }
.tv-l-cal-day--today .tv-cal-chip { background: rgba(255,255,255,0.25) !important; color: #fff; }
.tv-l-cal-day--focused {
    background: rgba(45,182,163,0.20) !important;
    border-color: var(--teal-2, #4ECFBD);
    box-shadow: 0 0 0 2px var(--teal-2, #4ECFBD), 0 0 20px rgba(45,182,163,0.3);
}
.tv-l-cal-day--focused .tv-l-cal-day__num { color: #fff; }
.tv-l-cal-day--selected {
    background: rgba(123,97,255,0.18) !important;
    border-color: rgba(123,97,255,0.5);
}

/* Event chips — use inline style for color, so category colors work */
.tv-cal-chip {
    width: 100%;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #2DB6A3;
    border-radius: 4px;
    padding: 2px 5px;
    margin-top: 3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.35;
    flex-shrink: 0;
}

/* ── Tasks view ──────────────────────────────────────────────── */
.tv-l-tasks {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tv-l-tasks__empty {
    font-size: 32px;
    color: rgba(255,255,255,0.4);
    margin-top: 60px;
    text-align: center;
}
.tv-l-task {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 24px;
    border-radius: 14px;
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.07);
    transition: background 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}
.tv-l-task--focused {
    background: rgba(45,182,163,0.18);
    border-color: var(--teal-2, #4ECFBD);
    box-shadow: 0 0 0 2px var(--teal-2, #4ECFBD), 0 0 24px rgba(45,182,163,0.25);
}
.tv-l-task__check {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 2.5px solid rgba(255,255,255,0.2);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--teal-2, #4ECFBD);
}
.tv-l-task__check--focused {
    border-color: var(--teal-2, #4ECFBD);
    background: rgba(45,182,163,0.15);
}
.tv-l-task__title {
    font-size: 28px;
    font-weight: 600;
    color: #fff;
    flex: 1;
}
.tv-l-task__desc {
    font-size: 19px;
    color: rgba(255,255,255,0.5);
    margin-top: 4px;
}

/* ── Chores view ─────────────────────────────────────────────── */
.tv-l-chores {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.tv-l-chores__progress {
    margin-bottom: 24px;
    flex-shrink: 0;
}
.tv-l-chores__progress-text {
    font-size: 18px;
    color: rgba(255,255,255,0.45);
    margin-bottom: 8px;
}
.tv-l-progress-bar {
    height: 5px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
}
.tv-l-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2DB6A3, #4ECFBD);
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.tv-l-chores__slot {
    margin-bottom: 20px;
    flex-shrink: 0;
}
.tv-l-chores__slot-label {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 10px;
}
.tv-l-chores__slot-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.tv-l-chore {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.06);
    transition: background 0.15s, box-shadow 0.15s;
}
.tv-l-chore--done { opacity: 0.4; }
.tv-l-chore--focused {
    background: rgba(45,182,163,0.18);
    border-color: var(--teal-2, #4ECFBD);
    box-shadow: 0 0 0 2px var(--teal-2, #4ECFBD);
}
.tv-l-chore__check {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.tv-l-chore--done .tv-l-chore__check {
    background: #2DB6A3;
    border-color: #2DB6A3;
    color: #fff;
}
.tv-l-chore__title {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    flex: 1;
    line-height: 1.2;
}
.tv-l-chore--done .tv-l-chore__title {
    text-decoration: line-through;
    color: rgba(255,255,255,0.4);
}
.tv-l-chore__emoji { font-size: 22px; }

/* ── Day detail MODAL ────────────────────────────────────────── */
.tv-l-day-modal {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.42);
    backdrop-filter: blur(4px);
    animation: tv-fade-in 0.25s cubic-bezier(0.4,0,0.2,1) forwards;
}

.tv-l-day-modal__panel {
    width: 840px;
    max-height: 860px;
    background: var(--bg-2);
    backdrop-filter: blur(32px) saturate(1.5);
    border: 1px solid var(--divider);
    border-radius: 8px;
    padding: 52px 56px;
    box-shadow:
        0 0 0 1px var(--divider),
        0 32px 64px rgba(0,0,0,0.32);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tv-l-day-modal__heading {
    font-size: 40px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 8px;
    flex-shrink: 0;
}
.tv-l-day-modal__hint {
    font-size: 18px;
    color: var(--text-3);
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.tv-l-day-modal__hint i { color: var(--teal-2); }

.tv-l-day-modal__events {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tv-l-day-modal__empty {
    font-size: 26px;
    color: var(--text-3);
    margin-top: 32px;
    text-align: center;
}
.tv-l-day-modal__event {
    display: flex;
    gap: 20px;
    padding: 18px 22px;
    border-radius: 8px;
    background: var(--card);
    border-left: 4px solid #2DB6A3;
    border-top: 1px solid var(--divider);
    border-right: 1px solid var(--divider);
    border-bottom: 1px solid var(--divider);
    flex-shrink: 0;
}
.tv-l-day-modal__event-time {
    font-size: 24px;
    font-weight: 700;
    color: var(--teal-2);
    min-width: 90px;
    flex-shrink: 0;
}
.tv-l-day-modal__event-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}
.tv-l-day-modal__event-sub {
    font-size: 19px;
    color: var(--text-3);
    margin-top: 5px;
}

/* ── Bottom hints bar ────────────────────────────────────────── */
.tv-l-bottom {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 52px;
    background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
}

.tv-l-bottom__hints {
    display: flex;
    align-items: center;
    gap: 28px;
}
.tv-l-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    color: rgba(255,255,255,0.4);
    font-weight: 500;
}
.tv-l-hint__dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.tv-l-hint--red    .tv-l-hint__dot { background: #ef4444; }
.tv-l-hint--green  .tv-l-hint__dot { background: #22c55e; }
.tv-l-hint--yellow .tv-l-hint__dot { background: #eab308; }
.tv-l-hint--blue   .tv-l-hint__dot { background: #3b82f6; }
.tv-l-hint i { font-size: 15px; color: rgba(255,255,255,0.4); }

/* ═══════════════════════════════════════════════════════════════
   ── PORTRAIT LAYOUT ──────────────────────────────────────────
   ═══════════════════════════════════════════════════════════════ */

/* ── Top app bar (matches SheepowWall header) ─────────────── */
.tv-p-topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 96px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    background: rgba(24, 33, 53, 0.96);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    backdrop-filter: blur(12px);
}

.tv-p-topbar__logo {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,0.96);
    border-radius: 100px;
    padding: 8px 22px 8px 14px;
    border: 1.5px solid rgba(190, 199, 216, 0.65);
}
.tv-p-topbar__logoimg {
    height: 44px;
    width: auto;
}
.tv-p-topbar__wordmark {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
}
.tv-p-topbar__sheep { color: #1F2A44; }
.tv-p-topbar__ow    { color: #2DB6A3; }

.tv-p-topbar__right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tv-p-topbar__clock-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(37, 48, 76, 0.85);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 100px;
    padding: 10px 24px;
}
.tv-p-topbar__clock-icon {
    font-size: 22px;
    color: var(--teal-2, #4ECFBD);
}
.tv-p-topbar__time {
    font-size: 32px;
    font-weight: 700;
    color: var(--t1, #fff);
    letter-spacing: -0.01em;
}
.tv-p-topbar__date {
    font-size: 22px;
    font-weight: 500;
    color: var(--t3, #8E9EC2);
    padding-left: 4px;
}

/* Top slideshow strip — 44% of content area, matching SheepowWall HubImagePanel */
.tv-p-slides {
    position: absolute;
    top: 96px; left: 0; right: 0;
    height: 760px;
    overflow: hidden;
    z-index: 0;
}

.tv-p-slides__img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.tv-p-slides__img:not(.tv-p-slides__img--hidden) { opacity: 1; }

.tv-p-slides__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(7,6,13,0) 50%,
        rgba(7,6,13,0.85) 100%
    );
}

.tv-p-slides__dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}
.tv-p-slides__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transition: background 0.3s, transform 0.3s;
}
.tv-p-slides__dot--active {
    background: #fff;
    transform: scale(1.4);
}

.tv-p-slides__placeholder {
    position: absolute;
    inset: 0;
    background: #182135;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tv-p-slides__placeholder-time {
    font-size: 96px;
    font-weight: 900;
    color: var(--t1, #F8FAFC);
    letter-spacing: -0.04em;
}

/* Content area — below image panel, above remote hint bar */
.tv-p-content {
    position: absolute;
    top: 856px;
    left: 0; right: 0;
    bottom: 66px;
    overflow-y: auto;
    padding: 36px 52px 24px;
    z-index: 10;
}

/* Portrait calendar */
.tv-p-cal { }
.tv-p-cal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.tv-p-cal__month {
    font-size: 38px;
    font-weight: 800;
    color: var(--t1, #F8FAFC);
}
.tv-p-cal__hint {
    font-size: 18px;
    color: var(--t4, #64748B);
}
.tv-p-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 24px;
}
.tv-p-cal__label {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--t4, #64748B);
    padding: 6px 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.tv-p-cal__day {
    min-height: 110px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 6px 6px;
    font-size: 22px;
    font-weight: 500;
    color: var(--t2, #CBD5E1);
    border-radius: 10px;
    background: rgba(37, 48, 76, 0.5);
    overflow: hidden;
    transition: background 0.15s, color 0.15s;
}
.tv-p-cal__day-num {
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 5px;
    align-self: flex-start;
}
.tv-p-cal__day--other   { color: var(--t4, #64748B); opacity: 0.4; }
.tv-p-cal__day--today {
    background: var(--teal, #2DB6A3) !important;
    box-shadow: 0 0 16px rgba(45,182,163,0.7);
}
.tv-p-cal__day--today .tv-p-cal__day-num { color: #fff; font-weight: 800; }
.tv-p-cal__day--today .tv-cal-chip { background: rgba(255,255,255,0.25); color: #fff; }
.tv-p-cal__day--focused {
    outline: 3px solid var(--teal-2, #4ECFBD);
    outline-offset: 2px;
    background: rgba(45,182,163,0.14);
    color: var(--t1, #F8FAFC);
}

/* Event chip — inside calendar cell, matches Kiosk/Wall colored pills */
.tv-cal-chip {
    width: 100%;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--teal, #2DB6A3);
    border-radius: 4px;
    padding: 2px 5px;
    margin-top: 3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.3;
    flex-shrink: 0;
}

.tv-p-cal__events {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}
.tv-p-event {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
    border-radius: 14px;
    background: rgba(26, 23, 48, 0.85);
    border-left: 4px solid var(--teal, #2DB6A3);
}
.tv-p-event__time {
    font-size: 22px;
    font-weight: 700;
    color: var(--teal-2, #4ECFBD);
    min-width: 80px;
}
.tv-p-event__title {
    font-size: 26px;
    font-weight: 600;
    color: var(--t1, #F8FAFC);
    flex: 1;
}

/* Portrait day view */
.tv-p-day__heading {
    font-size: 34px;
    font-weight: 800;
    color: var(--purple-3);
    margin-bottom: 24px;
}
.tv-p-day__empty {
    font-size: 26px;
    color: var(--t4, #64748B);
}
.tv-p-day-event {
    display: flex;
    gap: 18px;
    padding: 18px 22px;
    border-radius: 14px;
    background: rgba(26, 23, 48, 0.85);
    border-left: 4px solid var(--teal, #2DB6A3);
    margin-bottom: 12px;
}
.tv-p-day-event__time {
    font-size: 24px;
    font-weight: 700;
    color: var(--teal-2, #4ECFBD);
    min-width: 90px;
}
.tv-p-day-event__title {
    font-size: 28px;
    font-weight: 600;
    color: var(--t1, #F8FAFC);
}
.tv-p-day-event__sub {
    font-size: 20px;
    color: var(--t3, #94A3B8);
    margin-top: 4px;
}

/* Portrait tasks */
.tv-p-tasks__heading {
    font-size: 36px;
    font-weight: 800;
    color: var(--t1, #F8FAFC);
    margin-bottom: 20px;
}
.tv-p-tasks__empty {
    font-size: 26px;
    color: var(--t4, #64748B);
}
.tv-p-task {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 22px;
    border-radius: 14px;
    background: rgba(26, 23, 48, 0.85);
    border: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 10px;
    transition: background 0.15s, box-shadow 0.15s;
}
.tv-p-task--focused {
    background: rgba(45,182,163,0.18);
    border-color: var(--teal-2, #4ECFBD);
    box-shadow: 0 0 0 2px var(--teal-2, #4ECFBD);
}
.tv-p-task__title {
    font-size: 28px;
    font-weight: 600;
    color: var(--t1, #F8FAFC);
}
.tv-p-task__desc {
    font-size: 19px;
    color: var(--t3, #94A3B8);
    margin-top: 4px;
}

/* Portrait chores */
.tv-p-chores__heading {
    font-size: 36px;
    font-weight: 800;
    color: var(--t1, #F8FAFC);
    margin-bottom: 20px;
}
.tv-p-chores__slot {
    margin-bottom: 20px;
}
.tv-p-chores__slot-label {
    font-size: 18px;
    font-weight: 700;
    color: var(--t4, #64748B);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}
.tv-p-chore {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
    border-radius: 12px;
    background: rgba(26, 23, 48, 0.85);
    margin-bottom: 8px;
    transition: background 0.15s, box-shadow 0.15s;
}
.tv-p-chore--done { opacity: 0.45; }
.tv-p-chore--focused {
    background: rgba(45,182,163,0.18);
    box-shadow: 0 0 0 2px var(--teal-2, #4ECFBD);
}
.tv-p-chore__check {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
}
.tv-p-chore--done .tv-p-chore__check {
    background: var(--green);
    border-color: var(--green);
}
.tv-p-chore__title {
    font-size: 26px;
    font-weight: 600;
    color: var(--t1, #F8FAFC);
    flex: 1;
}
.tv-p-chore--done .tv-p-chore__title {
    text-decoration: line-through;
    color: var(--t3, #94A3B8);
}

/* ═══════════════════════════════════════════════════════════════
   ── KIOSK/WALL ALIGNMENT OVERRIDES ──────────────────────────
   TV-only refinements. Keep the normal web app components untouched.
   ═══════════════════════════════════════════════════════════════ */

#tv-root {
    --bg: #111A2E;
    --bg-2: #182135;
    --bg-3: var(--surface);
    --surface: #202B44;
    --card: #25304C;
    --card-h: var(--surface);
    --text: #FFFFFF;
    --text-2: #E1E7F2;
    --text-3: #8E9EC2;
    --t1: var(--text);
    --t2: var(--text-2);
    --t3: var(--text-3);
    --t4: var(--text-3);
    --divider: rgba(190, 199, 216, 0.16);
    --b1: var(--divider);
    --b2: var(--divider);
    --b3: var(--divider);
    --teal: #2DB6A3;
    --teal-2: #4ECFBD;
    --focus-bg: #2DB6A3;
    --focus-text: #FFFFFF;
    --accent-soft: rgba(45, 182, 163, 0.12);
    --line-soft: rgba(190, 199, 216, 0.16);
    background: var(--bg);
}

#tv-root.tv-theme-light,
#tv-root.tv-theme-sheepow-brand {
    --bg: #F3F4F6;
    --bg-2: #FFFFFF;
    --surface: #FFFFFF;
    --card: #FFFFFF;
    --text: #2B3550;
    --text-2: #1F2A44;
    --text-3: #5B667D;
    --divider: rgba(31,42,68,0.18);
    --line-soft: rgba(31,42,68,0.16);
    --teal: #2DB6A3;
    --teal-2: #1D9286;
    --focus-bg: #1D9286;
    --focus-text: #FFFFFF;
}

#tv-root.tv-theme-high-contrast {
    --bg: #FFFFFF;
    --bg-2: #FFFFFF;
    --surface: #FFFFFF;
    --card: #FFFFFF;
    --text: #000000;
    --text-2: #000000;
    --text-3: #000000;
    --divider: #000000;
    --line-soft: #000000;
    --teal: #000000;
    --teal-2: #000000;
    --focus-bg: #000000;
    --focus-text: #FFFFFF;
}

#tv-root.tv-theme-cappuccino {
    --bg: #8B6E5C;
    --bg-2: #A68C7C;
    --surface: #A68C7C;
    --card: #B79E8F;
    --text: #260B00;
    --text-2: #260B00;
    --text-3: #3E2C23;
    --divider: rgba(246,237,198,0.45);
    --line-soft: rgba(246,237,198,0.45);
    --teal: #F6EDC6;
    --teal-2: #FFF7E3;
    --focus-bg: #260B00;
    --focus-text: #FFF7E3;
}

#tv-root.tv-theme-cappuccino-supreme {
    --bg: #F5EFE7;
    --bg-2: #D7C1B3;
    --surface: #D7C1B3;
    --card: #E8D9CF;
    --text: #3E2C23;
    --text-2: #4A3B30;
    --text-3: #6B5548;
    --divider: rgba(62,44,35,0.18);
    --line-soft: rgba(62,44,35,0.18);
    --teal: #9C7B60;
    --teal-2: #6F543F;
    --focus-bg: #6F543F;
    --focus-text: #FFFFFF;
}

#tv-root.tv-theme-regent-green {
    --bg: #3E4D44;
    --bg-2: #54665B;
    --surface: #54665B;
    --card: #607568;
    --text: #E9EFEC;
    --text-2: #FFFFFF;
    --text-3: #DDE7E1;
    --divider: rgba(221,231,225,0.24);
    --line-soft: rgba(221,231,225,0.24);
    --teal: #BDC9C1;
    --teal-2: #DDE7E1;
    --focus-bg: #DDE7E1;
    --focus-text: #26342D;
}

#tv-root.tv-theme-midnight-neon {
    --bg: #050513;
    --bg-2: #0B0B22;
    --surface: #121233;
    --card: #1A1B3C;
    --text: #FFFFFF;
    --text-2: #E6E6FF;
    --text-3: #B8B8F5;
    --divider: rgba(109,109,154,0.4);
    --line-soft: rgba(109,109,154,0.4);
    --teal: #00E5FF;
    --teal-2: #67F4FF;
    --focus-bg: #00E5FF;
    --focus-text: #050513;
}

#tv-root.tv-theme-forest-matte {
    --bg: #04130B;
    --bg-2: #0A1F14;
    --surface: #102B1D;
    --card: #163626;
    --text: #FFFFFF;
    --text-2: #E0FFE9;
    --text-3: #B8E8C8;
    --divider: rgba(111,175,143,0.42);
    --line-soft: rgba(111,175,143,0.42);
    --teal: #00FF85;
    --teal-2: #8CFFBE;
    --focus-bg: #00FF85;
    --focus-text: #04130B;
}

#tv-root.tv-theme-arctic-glass,
#tv-root.tv-theme-quartz {
    --bg: #F3F6FB;
    --bg-2: #F8FAFF;
    --surface: #FFFFFF;
    --card: #E7ECFF;
    --text: #0E1220;
    --text-2: #232B45;
    --text-3: #4D5A7A;
    --divider: rgba(123,134,176,0.35);
    --line-soft: rgba(123,134,176,0.35);
    --teal: #0066FF;
    --teal-2: #E83E8C;
    --focus-bg: #0066FF;
    --focus-text: #FFFFFF;
}

#tv-root.tv-theme-sunset-bloom,
#tv-root.tv-theme-miami-vice,
#tv-root.tv-theme-barbie-pink,
#tv-root.tv-theme-highlighter-hell,
#tv-root.tv-theme-nuclear-warning {
    --bg: #FFF3EE;
    --bg-2: #FFFFFF;
    --surface: #FFFFFF;
    --card: #FFE5DA;
    --text: #151515;
    --text-2: #2A1E1A;
    --text-3: #5D4740;
    --divider: rgba(21,21,21,0.22);
    --line-soft: rgba(21,21,21,0.22);
    --teal: #FF3B30;
    --teal-2: #FF00AA;
    --focus-bg: #151515;
    --focus-text: #FFFFFF;
}

#tv-root.tv-theme-graphite-gold {
    --bg: #070707;
    --bg-2: #121212;
    --surface: #181818;
    --card: #1F1F1F;
    --text: #FFFFFF;
    --text-2: #EAEAEA;
    --text-3: #BDBDBD;
    --divider: rgba(119,119,119,0.45);
    --line-soft: rgba(119,119,119,0.45);
    --teal: #FFD400;
    --teal-2: #FFE766;
    --focus-bg: #FFD400;
    --focus-text: #070707;
}

#tv-root.tv-theme-ocean-deep {
    --bg: #001018;
    --bg-2: #001B24;
    --surface: #072635;
    --card: #0E2C3A;
    --text: #FFFFFF;
    --text-2: #E2F4FF;
    --text-3: #A7CEE0;
    --divider: rgba(95,135,150,0.46);
    --line-soft: rgba(95,135,150,0.46);
    --teal: #00E5FF;
    --teal-2: #67F4FF;
    --focus-bg: #00E5FF;
    --focus-text: #001018;
}

#tv-root.tv-theme-retro-terminal {
    --bg: #000700;
    --bg-2: #061106;
    --surface: #0A190A;
    --card: #0E240E;
    --text: #DBFFE6;
    --text-2: #C8FFD6;
    --text-3: #86E59E;
    --divider: rgba(76,175,80,0.52);
    --line-soft: rgba(76,175,80,0.52);
    --teal: #00FF5A;
    --teal-2: #8CFFAA;
    --focus-bg: #00FF5A;
    --focus-text: #000700;
}

.tv-bg__overlay {
    background:
        linear-gradient(90deg, var(--bg) 0%, transparent 42%, var(--bg) 100%);
    opacity: 0.58;
    backdrop-filter: blur(18px) saturate(1.05);
}

.tv-l-topbar,
.tv-p-topbar {
    height: 88px;
    padding: 0 34px;
    background: var(--bg);
    border-bottom: 1px solid var(--divider);
    backdrop-filter: none;
}

.tv-l-topbar__logo,
.tv-p-topbar__logo {
    gap: 10px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(31, 42, 68, 0.14);
    border-radius: 999px;
    padding: 7px 18px 7px 10px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
    min-width: 0;
}

.tv-l-topbar__brand-mark,
.tv-p-topbar__brand-mark {
    height: 44px;
    width: 60px;
    display: block;
    object-fit: contain;
    flex: 0 0 auto;
}

.tv-l-topbar__brand-logo,
.tv-p-topbar__brand-logo {
    height: 34px;
    max-width: 260px;
    width: auto;
    display: block;
    object-fit: contain;
    flex: 0 1 auto;
}

.tv-l-topbar__logoimg,
.tv-p-topbar__logoimg {
    height: 44px;
    width: 44px;
}

.tv-l-topbar__wordmark,
.tv-p-topbar__wordmark {
    display: inline-flex;
    align-items: center;
    font-size: 31px;
    font-weight: 900;
    line-height: 1;
    color: var(--text);
    letter-spacing: 0;
}

.tv-l-topbar__clock-pill,
.tv-p-topbar__clock-pill,
.tv-l-topbar__weather-pill,
.tv-p-topbar__weather-pill {
    background: var(--card);
    border: 1px solid var(--divider);
    padding: 8px 18px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tv-l-topbar__weather-icon,
.tv-p-topbar__weather-icon {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.tv-l-topbar__weather-temp,
.tv-p-topbar__weather-temp {
    font-size: 25px;
    font-weight: 900;
    color: var(--text);
}

.tv-l-topbar__weather-location,
.tv-p-topbar__weather-location {
    max-width: 180px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-3);
}

.tv-l-topbar__time,
.tv-p-topbar__time {
    font-size: 28px;
    font-weight: 800;
    color: var(--text);
}

.tv-l-topbar__date,
.tv-p-topbar__date {
    font-size: 18px;
    color: var(--text-3);
}

/* Landscape mirrors the portrait hub in a horizontal composition:
   image panel first, functional section second, bottom nav always present. */
.tv-l-left {
    top: 112px;
    left: 34px;
    bottom: 86px;
    width: 1040px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-2);
    border: 1px solid var(--line-soft);
    box-shadow: 0 18px 50px rgba(0,0,0,0.28);
}

.tv-l-left__slide,
.tv-l-left__placeholder,
.tv-l-left__shade {
    position: absolute;
    inset: 0;
}

.tv-l-left__slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: opacity 1.2s cubic-bezier(0.4,0,0.2,1);
    pointer-events: none;
}

.tv-l-left__slide--hidden {
    opacity: 0;
}

.tv-l-left__placeholder {
    background: linear-gradient(135deg, var(--bg) 0%, var(--surface) 100%);
}

.tv-l-left__shade {
    background:
        linear-gradient(to bottom, rgba(17,26,46,0.05) 42%, rgba(17,26,46,0.84) 100%),
        linear-gradient(to right, rgba(17,26,46,0.30), rgba(17,26,46,0.04));
}

.tv-l-left__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 32px;
    justify-content: flex-end;
}

.tv-l-left__inner:empty {
    display: none;
}

.tv-l-left__clock-card {
    display: none;
}

.tv-l-clock {
    font-size: 86px;
    letter-spacing: -0.045em;
}

.tv-l-date {
    margin-top: 4px;
    font-size: 25px;
    color: rgba(255,255,255,0.76);
}

.tv-l-left__dots {
    display: flex;
    gap: 8px;
    margin-top: 24px;
}

.tv-l-left__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.32);
}

.tv-l-left__dot--active {
    width: 24px;
    background: rgba(255,255,255,0.88);
}

.tv-l-divider,
.tv-l-upcoming-label,
.tv-l-upcoming-list,
.tv-l-left__logo {
    display: none;
}

.tv-l-right {
    top: 112px;
    left: 1108px;
    right: 34px;
    bottom: 86px;
    background: var(--bg-2);
    border: 1px solid var(--divider);
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.22);
}

.tv-l-right__inner {
    padding: 22px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.tv-l-section-header {
    min-height: 52px;
    margin-bottom: 8px;
    padding: 0 4px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.09);
}

.tv-l-section-title {
    font-size: 28px;
    color: var(--text);
}

.tv-l-section-hint {
    font-size: 14px;
    color: var(--text-3);
}

.tv-l-cal-full-grid {
    gap: 1px;
    background: rgba(255,255,255,0.08);
}

.tv-l-cal-day-label,
.tv-p-cal__label {
    background: var(--bg-2);
    padding: 7px 0;
    color: var(--text-3);
}

.tv-l-cal-day,
.tv-p-cal__day {
    border-radius: 2px;
    border: 0;
    background: var(--card);
    color: var(--text-2);
    backdrop-filter: none;
    box-shadow: none;
}

.tv-l-cal-day {
    min-height: 0;
    padding: 6px;
}

.tv-l-cal-day__num,
.tv-p-cal__day-num {
    font-weight: 900;
    color: var(--text-2);
    line-height: 1;
    margin-bottom: 3px;
}

.tv-l-cal-day__num {
    font-size: 16px;
}

.tv-p-cal__day-num {
    font-size: 18px;
}

.tv-l-cal-day--other,
.tv-p-cal__day--other {
    opacity: 0.22;
    background: rgba(37,48,76,0.52);
}

.tv-l-cal-day--today,
.tv-p-cal__day--today {
    background: var(--focus-bg) !important;
    color: var(--focus-text);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.34);
}
.tv-l-cal-day--today .tv-l-cal-day__num,
.tv-p-cal__day--today .tv-p-cal__day-num {
    color: var(--focus-text);
}

.tv-l-cal-day--focused,
.tv-p-cal__day--focused {
    outline: 0;
    background: var(--focus-bg) !important;
    color: var(--focus-text);
    box-shadow: inset 0 0 0 3px var(--teal-2), 0 0 0 2px var(--bg);
}
.tv-l-cal-day--focused .tv-l-cal-day__num,
.tv-p-cal__day--focused .tv-p-cal__day-num {
    color: var(--focus-text);
}

.tv-cal-chip {
    border-radius: 2px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    padding: 2px 4px;
    margin-top: 2px;
}

.tv-l-bottom {
    height: 66px;
    padding: 0 34px;
    background: var(--bg);
    border-top: 1px solid var(--line-soft);
}

.tv-l-hint {
    color: var(--text-3);
}

/* Portrait should match the kiosk/wall portrait hub proportions. */
.tv-p-topbar {
    height: 88px;
}

.tv-p-slides {
    top: 88px;
    height: 840px;
    border-bottom: 1px solid var(--line-soft);
    cursor: default;
}

.tv-p-slides__img,
.tv-p-slides__overlay,
.tv-p-slides__dots,
.tv-p-slides__placeholder {
    pointer-events: none;
}

.tv-p-slides__overlay {
    background: linear-gradient(to bottom, rgba(17,26,46,0.02) 52%, rgba(17,26,46,0.82) 100%);
}

.tv-p-content {
    top: 929px;
    bottom: 66px;
    padding: 20px 24px 18px;
    background: var(--bg-2);
    overflow: hidden;
}

#tv-root.tv-portrait .tv-l-bottom {
    justify-content: center;
    padding: 0 24px;
}

#tv-root.tv-portrait .tv-l-bottom__hints {
    gap: 22px;
}

#tv-root.tv-portrait .tv-l-hint {
    font-size: 16px;
}

.tv-p-cal {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tv-p-cal__header {
    height: 52px;
    margin: 0;
    padding: 0 4px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.09);
}

.tv-p-cal__month {
    font-size: 30px;
    color: var(--text);
}

.tv-p-cal__hint {
    font-size: 14px;
    color: rgba(225,231,242,0.42);
}

.tv-p-cal__grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 32px repeat(6, 1fr);
    gap: 1px;
    margin: 10px 0 0;
    background: rgba(255,255,255,0.08);
}

.tv-p-cal__day {
    min-height: 0;
    padding: 6px 5px 4px;
}

.tv-p-cal__day-num {
    font-size: 18px;
    margin-bottom: 3px;
}

.tv-p-cal__events {
    display: none;
}

.tv-p-day,
.tv-p-tasks,
.tv-p-chores {
    height: 100%;
    overflow: hidden;
}

.tv-p-day__heading,
.tv-p-tasks__heading,
.tv-p-chores__heading {
    font-size: 30px;
    margin-bottom: 16px;
    color: #fff;
}

.tv-p-event,
.tv-p-day-event,
.tv-p-task,
.tv-p-chore {
    border-radius: 8px;
    background: var(--card);
    border-top: 1px solid rgba(255,255,255,0.06);
    border-right: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* ═══════════════════════════════════════════════════════════════
   ── SCENERY MODE (full-screen slideshow, both orientations) ──
   ═══════════════════════════════════════════════════════════════ */

.tv-scenery {
    position: absolute;
    inset: 0;
    z-index: 40;
    overflow: hidden;
    animation: tv-fade-in 0.8s cubic-bezier(0.4,0,0.2,1) forwards;
}

.tv-scenery__img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
}
.tv-scenery__img--hidden { opacity: 0; }

.tv-scenery__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(24, 33, 53, 0.6) 0%,
        transparent 40%,
        rgba(24, 33, 53, 0.25) 100%
    );
}

.tv-scenery__hud {
    position: absolute;
    bottom: 64px;
    right: 80px;
    text-align: right;
}
.tv-scenery__hud-time {
    font-size: 96px;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    color: rgba(255,255,255,0.92);
    text-shadow: 0 2px 32px rgba(0,0,0,0.7);
}
.tv-scenery__hud-date {
    font-size: 32px;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
    margin-top: 8px;
}

.tv-scenery__hints {
    position: absolute;
    bottom: 64px;
    left: 80px;
    display: flex;
    gap: 32px;
}
.tv-scenery__hint-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    color: rgba(255,255,255,0.4);
}
.tv-scenery__hint-item i { color: rgba(255,255,255,0.6); }

.tv-scenery__counter {
    position: absolute;
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}
.tv-scenery__counter-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transition: background 0.3s, transform 0.3s;
}
.tv-scenery__counter-dot--active {
    background: rgba(255,255,255,0.9);
    transform: scale(1.4);
}

/* ═══════════════════════════════════════════════════════════════
   ── SETTINGS OVERLAY ─────────────────────────────────────────
   ═══════════════════════════════════════════════════════════════ */

.tv-settings-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: tv-fade-in 0.3s cubic-bezier(0.4,0,0.2,1) forwards;
}

.tv-settings__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(40px) brightness(0.25) saturate(1.2);
    transform: scale(1.08);
}
.tv-settings__bg-dim {
    position: absolute;
    inset: 0;
    background: rgba(7,6,13,0.7);
}

.tv-settings__panel {
    position: relative;
    z-index: 1;
    width: 760px;
    max-height: calc(100vh - 96px);
    overflow: hidden;
    background: var(--bg-2);
    backdrop-filter: blur(24px);
    border: 1px solid var(--divider);
    border-radius: 8px;
    padding: 42px;
    box-shadow: 0 24px 90px rgba(0,0,0,0.35);
}

.tv-settings__title {
    font-size: 44px;
    font-weight: 800;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--text);
}
.tv-settings__title i {
    color: var(--teal-2, #4ECFBD);
}

.tv-settings__section {
    margin-bottom: 28px;
}
.tv-settings__section-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 12px;
}

.tv-settings__row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    border-radius: 8px;
    background: var(--card);
    border: 1px solid var(--divider);
    margin-bottom: 8px;
    transition: background 0.15s, border-color 0.15s;
}
.tv-settings__row--focused {
    background: var(--focus-bg);
    border-color: var(--focus-bg);
    box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--teal-2, #4ECFBD);
}
.tv-settings__row i {
    font-size: 24px;
    color: var(--teal-2, #4ECFBD);
    width: 32px;
    text-align: center;
}
.tv-settings__row--focused i,
.tv-settings__row--focused .tv-settings__row-label,
.tv-settings__row--focused .tv-settings__row-value {
    color: var(--focus-text);
}
.tv-settings__row-label {
    font-size: 26px;
    font-weight: 600;
    color: var(--text);
    flex: 1;
}
.tv-settings__row-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--teal-2, #4ECFBD);
}

.tv-settings-dropdown {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 314px;
    overflow-y: auto;
    margin: -2px 0 12px 52px;
    padding: 8px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--divider);
}

.tv-settings-dropdown__option,
.tv-settings-dropdown__empty {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 21px;
    font-weight: 700;
    color: var(--text-2);
}

.tv-settings-dropdown__option--focused {
    background: var(--focus-bg);
    color: var(--focus-text);
}

.tv-settings-dropdown__option--active {
    box-shadow: inset 0 0 0 2px var(--teal-2, #4ECFBD);
}

.tv-settings-dropdown__option i {
    color: currentColor;
    font-size: 22px;
}

.tv-settings-dropdown__empty {
    color: var(--text-3);
}

.tv-settings__hint {
    font-size: 20px;
    color: var(--text-3);
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.tv-settings__hint i { color: var(--teal-2, #4ECFBD); }

/* ═══════════════════════════════════════════════════════════════
   ── LOADING / AUTH ───────────────────────────────────────────
   ═══════════════════════════════════════════════════════════════ */

.tv-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 32px;
    background: #182135;
    z-index: 50;
}
.tv-loading__logo {
    height: 80px;
    animation: tv-pulse 1.4s ease-in-out infinite alternate;
}
.tv-loading__text { font-size: 32px; color: var(--t3, #94A3B8); }

.tv-loading__bar {
    width: min(520px, 56vw);
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.tv-loading__bar-fill {
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2DB6A3, #7B61FF, #FFB631);
    animation: tv-loading-progress 1.25s ease-in-out infinite;
}

@keyframes tv-pulse {
    from { opacity: 0.4; transform: scale(0.97); }
    to   { opacity: 1;   transform: scale(1.0); }
}

@keyframes tv-loading-progress {
    0%   { transform: translateX(-115%); }
    100% { transform: translateX(245%); }
}

/* ── TV QR sign-in screen ────────────────────────────────────── */
.tv-signin {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 640px;
    align-items: center;
    padding: 100px 120px;
    gap: 80px;
}

#tv-root.tv-auth-screen {
    width: 100vw !important;
    height: 100vh !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
}

#tv-root.tv-auth-screen .tv-signin {
    position: fixed;
    inset: 0;
    grid-template-columns: minmax(420px, 1fr) minmax(360px, 560px);
    padding: clamp(36px, 7vh, 92px) clamp(42px, 7vw, 120px);
    gap: clamp(36px, 7vw, 112px);
    align-items: center;
    justify-items: stretch;
}

.tv-signin__left {
    min-width: 0;
    max-width: 880px;
}

.tv-signin__logo {
    height: 52px;
    margin-bottom: 40px;
    filter: brightness(0) invert(1);
}
.tv-signin__heading {
    font-size: clamp(44px, 5.4vw, 64px);
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 42px;
    line-height: 1.1;
    background: var(--g-text, linear-gradient(135deg, #C4B5FD 0%, #93C5FD 50%, #67E8F9 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.tv-signin__instruction {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: clamp(24px, 2.6vw, 36px);
    font-weight: 500;
    color: var(--t2, #CBD5E1);
    margin-bottom: 24px;
}
.tv-signin__instruction strong { color: var(--t1, #F8FAFC); }
.tv-signin__step {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--teal, #2DB6A3);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.5);
}
.tv-signin__code {
    font-family: monospace;
    font-size: clamp(32px, 3.8vw, 44px);
    font-weight: 900;
    letter-spacing: 0.1em;
    color: var(--teal-2, #4ECFBD);
    background: rgba(124,58,237,0.15);
    padding: 6px 20px;
    border-radius: var(--r, 16px);
}
.tv-signin__expires {
    font-size: 26px;
    color: var(--t4, #64748B);
    margin-top: 32px;
}
.tv-signin__status {
    font-size: 36px;
    color: var(--t3, #94A3B8);
    display: flex;
    align-items: center;
    gap: 16px;
}
.tv-signin__status--success { color: var(--green); }
.tv-signin__status--error   { color: #F87171; }
.tv-signin__refresh { font-size: 28px; color: var(--t4, #64748B); margin-top: 16px; }
.tv-signin__right {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tv-signin__qr-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}
.tv-signin__qr {
    width: 620px;
    height: 620px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    padding: 40px;
    background: #fff;
    border: 0;
    box-shadow: none;
}

#tv-root.tv-auth-screen .tv-signin__qr {
    width: min(48vw, 62vh, 560px);
    height: min(48vw, 62vh, 560px);
    min-width: 340px;
    min-height: 340px;
    padding: clamp(22px, 3.2vw, 42px);
}

.sheepow-qr {
    display: block;
    width: 100%;
    height: 100%;
    shape-rendering: crispEdges;
}

.sheepow-qr--fallback {
    color: #102036;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-align: center;
}

.tv-signin__debug {
    margin-top: 18px;
    color: rgba(225, 231, 242, 0.62);
    font-size: 18px;
    font-family: monospace;
}

.tv-fallback-root {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #182135;
    color: #fff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tv-fallback-panel {
    width: min(88vw, 1360px);
    min-height: min(72vh, 680px);
    display: grid;
    grid-template-columns: minmax(420px, 1fr) minmax(320px, 460px);
    align-items: center;
    gap: clamp(44px, 7vw, 104px);
}

.tv-fallback-panel--loading {
    display: flex;
    justify-content: center;
    text-align: center;
}

.tv-fallback-panel--loading .tv-fallback-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tv-fallback-copy {
    min-width: 0;
}

.tv-fallback-qr-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.tv-fallback-logo {
    width: 360px;
    max-width: 70%;
    height: auto;
    filter: brightness(0) invert(1);
    margin-bottom: 46px;
}

.tv-fallback-title {
    font-size: clamp(42px, 5vw, 76px);
    font-weight: 900;
    line-height: 1.05;
    margin-bottom: 28px;
}

.tv-fallback-message {
    font-size: clamp(24px, 2.4vw, 36px);
    color: #CBD5E1;
    line-height: 1.3;
    max-width: 760px;
}

.tv-fallback-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 900;
    letter-spacing: 0.12em;
    color: #4ECFBD;
    margin-top: 38px;
}

.tv-fallback-qr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(34vw, 52vh, 420px);
    height: min(34vw, 52vh, 420px);
    box-sizing: border-box;
    border-radius: 16px;
    padding: clamp(18px, 2.6vw, 30px);
    background: #fff;
    border: 3px solid #2DB6A3;
    box-shadow: 0 0 42px rgba(45,182,163,0.34);
}

@media (max-width: 980px), (max-height: 620px) {
    #tv-root.tv-auth-screen .tv-signin,
    .tv-fallback-panel {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 28px;
    }

    .tv-signin__left,
    .tv-fallback-copy {
        max-width: 760px;
    }

    .tv-signin__instruction {
        justify-content: center;
        text-align: left;
    }

    #tv-root.tv-auth-screen .tv-signin__qr,
    .tv-fallback-qr {
        width: min(70vw, 42vh, 360px);
        height: min(70vw, 42vh, 360px);
        min-width: 260px;
        min-height: 260px;
    }
}

/* ── Utilities ───────────────────────────────────────────────── */
@keyframes tv-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes tv-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* Gradient text helper */
.g-text {
    background: var(--g-text, linear-gradient(135deg, #C4B5FD 0%, #93C5FD 50%, #67E8F9 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}