@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Oswald:wght@500;700&display=swap');

/* --- GLOBAL HARDWARE RESET --- */
/* Kill all browser defaults immediately */
* {
    box-sizing: border-box !important;
    margin: 0;
    padding: 0;
    /* Prevent Android from inflating font sizes */
    -webkit-text-size-adjust: 100%; 
    text-size-adjust: 100%;
}
        /* --- Design System: Colors & Fonts --- */
        /* --- NEW GLOBAL THEME ENGINE (v2.0) --- */
        :root { 
            --theme-bg: #1e1e1e; 
            --theme-border: #333333; 
            --theme-pad: 16px; 
            --theme-headline: #ffffff; 
            --theme-label: #aaaaaa; 
            --theme-body: #cccccc; 
            --signal-success: #4caf50; 
            --signal-warning: #ffeb3b; 
            --signal-danger: #ff4444; 
            --signal-neutral: #2196f3; 

            /* System Mappings (Bridge to Legacy Variables) */
            --color-bg: var(--theme-bg);
            --color-surface-1: var(--theme-bg);
            --color-surface-2: var(--theme-bg);
            --color-surface-3: var(--theme-border);
            --color-text-primary: var(--theme-headline);
            --color-text-secondary: var(--theme-label);
            --color-text-tertiary: var(--theme-body);
            --color-border: var(--theme-border);
            --color-border-subtle: var(--theme-label); /* Use label color for tile borders */
            --color-tile-base: #000000; /* Tiles are black, content inside is themed */
            --theme-hover-overlay: rgba(255,255,255,0.05);
            --color-accent-green: var(--signal-success);
            --color-accent-red: var(--signal-danger);
            --color-accent-yellow: var(--signal-warning);
            --tile-radius: 28px;
            --font-family-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        /* Global Typography Utilities (Matches Engine) */
        .font-oswald { font-family: 'Oswald', sans-serif; font-weight: 700; }
        .font-montserrat { font-family: 'Montserrat', sans-serif; font-weight: 600; }

        [data-theme="navy-pro"] { --theme-bg: #0d1b2a; --theme-border: #1b263b; --theme-pad: 16px; --theme-headline: #e0e1dd; --theme-label: #778da9; --theme-body: #415a77; --signal-success: #00b4d8; --signal-warning: #f4a261; --signal-danger: #e76f51; --signal-neutral: #90e0ef; }
        [data-theme="snow"] { --theme-bg: #ffffff; --theme-border: #e0e0e0; --theme-pad: 16px; --theme-headline: #121212; --theme-label: #555555; --theme-body: #333333; --signal-success: #388e3c; --signal-warning: #fbc02d; --signal-danger: #d32f2f; --signal-neutral: #1976d2; --fc-card-bg: #e8e8e8; --color-tile-base: #e8e8e8; --theme-hover-overlay: rgba(0,0,0,0.05); }
        [data-theme="bright-blue"] { --theme-bg: #0274BD; --theme-border: #000000; --theme-pad: 16px; --theme-headline: #E9E6DD; --theme-label: #C4AD9D; --theme-body: #F57251; --signal-success: #00b4d8; --signal-warning: #f4a261; --signal-danger: #e76f51; --signal-neutral: #90e0ef; }
        [data-theme="olive-green"] { --theme-bg: #445D48; --theme-border: #000000; --theme-pad: 16px; --theme-headline: #FDE5D4; --theme-label: #D6CC99; --theme-body: #5E3023; --signal-success: #00b4d8; --signal-warning: #f4a261; --signal-danger: #e76f51; --signal-neutral: #90e0ef; }
        [data-theme="black"] { --theme-bg: #000000; --theme-border: #000000; --theme-pad: 16px; --theme-headline: #FBF4EF; --theme-label: #AAABAE; --theme-body: #975E64; --signal-success: #00b4d8; --signal-warning: #f4a261; --signal-danger: #e76f51; --signal-neutral: #90e0ef; }
        [data-theme="charcoal-gold"] { --theme-bg: #212121; --theme-border: #2B2B2B; --theme-pad: 16px; --theme-headline: #ffffff; --theme-label: #A0A0A0; --theme-body: #cccccc; --signal-success: #008000; --signal-warning: #D4AF37; --signal-danger: #D32F2F; --signal-neutral: #8D9CB5; }
        [data-theme="ereader"] { --theme-bg: #F4EFE4; --theme-border: #E5DFD2; --theme-pad: 16px; --theme-headline: #3D3832; --theme-label: #6B6560; --theme-body: #5A5550; --signal-success: #4A6B4A; --signal-warning: #8B7355; --signal-danger: #8B4A4A; --signal-neutral: #6B7A85; --fc-card-bg: #EDE8DD; --color-tile-base: #EDE8DD; --theme-hover-overlay: rgba(0,0,0,0.05); }

        /* Light themes: invert logo filters (BluOS, etc.) so logos are dark */
        [data-theme="snow"] .bluos-tile-logo,
        [data-theme="snow"] .bluos-pop-logo-bl,
        [data-theme="ereader"] .bluos-tile-logo,
        [data-theme="ereader"] .bluos-pop-logo-bl { filter: brightness(0) invert(0); }

        /* Hide scrollbars app-wide while keeping scroll where overflow:auto is used */
        html {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        html::-webkit-scrollbar {
            width: 0;
            height: 0;
            background: transparent;
        }
        /* Set the background and remove default margin */
        body {
            background-color: var(--color-bg);
            color: var(--color-text-primary);
            margin: 0;
            height: 100vh; /* Make the body fill the entire viewport height */
            font-family: var(--font-family-sans);
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        body::-webkit-scrollbar {
            width: 0;
            height: 0;
            background: transparent;
        }
        /* Menus / panels that scroll: keep scroll, hide scrollbar chrome */
        #side-menu .menu-content,
        .doodad-grid,
        .fp-pop__slot,
        .fp-modal__content {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        #side-menu .menu-content::-webkit-scrollbar,
        .doodad-grid::-webkit-scrollbar,
        .fp-pop__slot::-webkit-scrollbar,
        .fp-modal__content::-webkit-scrollbar {
            width: 0;
            height: 0;
            background: transparent;
        }

        /* FP open (dashboard): lock scroll before measuring grid so width matches every open */
        html.fp-modal-scroll-lock,
        body.fp-modal-scroll-lock {
            overflow: hidden !important;
        }

        /* --- Menu Styles --- */
        #menu-toggle-btn {
            position: fixed;
            top: 1rem;
            left: 1rem;
            background: none;
            border: none;
            color: var(--color-text-primary);
            font-size: 2rem;
            cursor: pointer;
            z-index: 1001; /* Ensure it's above other content */
        }

        #side-menu {
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: 350px;
            background-color: var(--color-surface-1);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            box-shadow: 5px 0 30px rgba(0,0,0,0.1);
            border-right: 1px solid rgba(0,0,0,0.05);
            transform: translateX(-100%);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 1002; /* Ensure it covers the toggle button (z-index 1001) */
            display: flex;
            flex-direction: column;
            color: var(--color-text-primary); /* Use theme text color inside menu */
        }
        
        .menu-content {
            padding: 1rem;
            overflow-y: auto; /* Allow scrolling for many settings */
            flex-grow: 1; /* Make content area fill available space */
            min-height: 0; /* Required for flex overflow to work */
        }
        

        #side-menu.menu-visible {
            transform: translateX(0);
            z-index: 5000; /* Above layout-name-bar / favourites rail when open */
        }

        .menu-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            flex-shrink: 0;
        }

        .menu-header h2 { margin: 0; }

        .menu-header .menu-toggle-btn {
            background: none;
            border: none;
            color: var(--color-text-secondary);
            font-size: 1.5rem;
            cursor: pointer;
        }
        
        .menu-settings-btn {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            margin-right: 1rem;
            color: var(--color-text-primary);
        }

        .menu-footer {
            padding: 1rem;
            border-top: 1px solid rgba(0,0,0,0.05);
            flex-shrink: 0;
        }

        /* --- Global Settings Modal Styles --- */
        .gs-section {
            margin-bottom: 2rem;
            border-bottom: 1px solid rgba(0,0,0,0.1);
            padding-bottom: 1.5rem;
        }
        .gs-section:last-child { border-bottom: none; }
        .gs-section h3 { margin-top: 0; color: var(--signal-warm); }
        
        .gs-btn {
            padding: 0.5rem 1rem;
            border: none;
            background: #0071e3; /* Apple Blue */
            color: #fff;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 500;
        }
        .gs-btn:hover { background: #0077ED; }
        .gs-btn.danger { background: var(--signal-red); color: white; border: none; }

        /* --- NATIVE TYPOGRAPHY (Scaled for 1200px Grid) --- */
        
        .label-eyebrow {
            font-size: 1.5rem; /* Was 0.85rem */
            font-size: 2.2rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            letter-spacing: 3px;
            color: var(--color-text-secondary);
            margin-bottom: 0.75rem;
            margin-bottom: 1rem;
            font-weight: 600;
        }

        .value-hero {
            font-size: 7rem; /* Was 3.5rem */
            font-size: 9rem;
            font-weight: 700;
            line-height: 0.9;
            letter-spacing: -3px;
            letter-spacing: -5px;
            color: var(--color-text-primary);
        }

        .sub-detail {
            font-size: 2rem; /* Was 1rem */
            font-size: 2.8rem;
            color: var(--color-text-secondary);
            margin-top: 0.75rem;
            margin-top: 1rem;
        }

        /* Signal Colors */
        .text-green { color: var(--signal-green) !important; }
        .text-red { color: var(--signal-red) !important; }
        .text-warm { color: var(--signal-warm) !important; }
        .text-blue { color: var(--signal-blue) !important; }
        .text-secondary { color: var(--color-text-secondary) !important; }

        /* Widget Specific Overrides for 1200px */
        .game-team-name { font-size: 1.5rem !important; }
        .game-scores { font-size: 3rem !important; }
        
        /* --------------------------------------------------------- */

        #widget-library h3 {
            margin-top: 0;
            margin-bottom: 0.5rem;
            color: var(--color-text-secondary);
            font-size: 1rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        #widget-library h3:first-of-type {
            margin-top: 1rem;
        }

        /* Favourites bin — main page, right of layout (dashboard only) */
        .favourites-bin-main {
            position: fixed;
            right: 0;
            top: 70px; /* Below layout-name-bar */
            bottom: 0;
            width: 240px;
            padding: 1rem;
            background: var(--color-surface-2);
            border-left: 1px solid var(--color-border);
            overflow-y: auto;
            z-index: 2500;
            pointer-events: auto;
            display: flex;
            flex-direction: column;
            transition: background 0.2s, border-color 0.2s;
            box-shadow: -4px 0 20px rgba(0,0,0,0.15);
        }
        .favourites-bin-main.drag-over {
            background: rgba(33, 150, 243, 0.12);
            border-left-color: var(--signal-neutral);
        }
        body.mode-kiosk .favourites-bin-main {
            display: none !important;
        }
        .favourites-bin-header {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--color-text-secondary);
            letter-spacing: 0.5px;
            margin-bottom: 0.75rem;
            flex-shrink: 0;
        }
        .favourites-bin-list {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
            flex: 1;
            min-height: 80px;
            padding: 0.75rem 0;
            border: 2px dashed var(--color-border);
            border-radius: 10px;
            background: rgba(0,0,0,0.15);
            transition: background 0.2s, border-color 0.2s;
        }
        .favourites-bin-main.drag-over .favourites-bin-list {
            background: rgba(33, 150, 243, 0.08);
            border-color: var(--signal-neutral);
        }
        .favourites-bin-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.5rem 0.6rem;
            background: var(--color-surface-3);
            border-radius: 8px;
            font-size: 0.85rem;
            cursor: grab;
            color: var(--color-text-primary);
            border: 1px solid transparent;
        }
        .favourites-bin-item:hover {
            background: var(--theme-hover-overlay);
        }
        .favourites-bin-item:active {
            cursor: grabbing;
        }
        .favourites-bin-item .fav-remove {
            opacity: 0.5;
            padding: 0 0.2rem;
            cursor: pointer;
            font-size: 1rem;
            line-height: 1;
        }
        .favourites-bin-item .fav-remove:hover {
            opacity: 1;
            color: var(--signal-danger);
        }

        .widget-list-item {
            /* This style is now used in both the side menu (services) and the flyout */
            background-color: #FFFFFF;
            padding: 1rem;
            margin-bottom: 0.5rem;
            border-radius: 12px;
            cursor: grab;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            user-select: none;
            -webkit-user-select: none; /* Safari */
            color: #1d1d1f; /* Ensure text is visible on white card */
        }
        .widget-list-item:hover {
            background-color: #f0f0f0;
        }

        #widget-library h3:hover {
            background-color: rgba(0,0,0,0.05);
            color: var(--color-text-primary);
        }

        /* NEW: Flyout menu for widget categories */
        #category-flyout {
            position: fixed;
            left: 350px; /* Width of side-menu */
            top: 0; /* Will be set by JS */
            width: 300px;
            max-height: 80vh;
            overflow-y: auto;
            background-color: var(--color-surface-1);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            box-shadow: 10px 0 30px rgba(0,0,0,0.1);
            border-radius: 0 12px 12px 0;
            z-index: 1001; /* Below side-menu but above content */
            display: none; /* Hidden by default */
            padding: 1rem;
        }
        /* Container for the top title */

        /* --- Widget Controls (Settings/Close buttons) --- */
        .widget-controls {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            display: flex;
            gap: 0.75rem;
            opacity: 0; /* Hidden by default */
            transition: opacity 0.2s ease-in-out;
            z-index: 10; /* Ensure they are on top of widget content */
        }

        .doodad:hover .widget-controls {
            opacity: 1; /* Show on hover */
        }

        .widget-control-btn {
            background-color: rgba(0, 0, 0, 0.5);
            border: 1px solid #555;
            color: #ffffff; /* Always white on dark button */
            border-radius: 50%;
            width: 24px;
            height: 24px;
            min-width: 24px;
            min-height: 24px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1rem;
            line-height: 1;
        }
        .widget-control-btn:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

        /* --- Settings Modal --- */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: none; /* Hidden by default */
            align-items: center;
            justify-content: center;
            z-index: 2000;
        }
        .modal-overlay.visible {
            display: flex;
        }
        .modal-content {
            background-color: var(--theme-bg, #1e1e1e);
            padding: 0;
            border-radius: 20px;
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            box-shadow: 0 20px 50px rgba(0,0,0,0.2);
            display: flex;
            flex-direction: column;
            color: var(--theme-headline, #fff);
            pointer-events: auto; /* Ensure clicks work */
        }
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.25rem 2rem;
            border-bottom: 1px solid var(--theme-border, rgba(0,0,0,0.05));
            flex-shrink: 0;
            position: relative;
            z-index: 10; /* Header above body */
            background: var(--theme-border, rgba(0,0,0,0.06));
        }
        .modal-header h2 {
            margin: 0;
            color: var(--theme-headline, #fff);
            flex: 1 1 auto;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-right: 0.5rem;
        }

        /* Settings modal close - themed for contrast */
        .modal-close-btn,
        #modal-close-btn {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 2px solid var(--theme-label, #555);
            background: var(--theme-border, #333);
            color: var(--theme-headline, #fff);
            font-size: 1.75rem;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex: 0 0 auto;
            padding: 0;
            pointer-events: auto;
        }
        .modal-close-btn:hover,
        #modal-close-btn:hover {
            background: var(--theme-label, #555);
            border-color: var(--theme-label, #555);
            color: var(--theme-headline, #fff);
        }
        .modal-body {
            padding: 1rem 2rem;
            overflow-y: auto;
            flex: 1 1 auto;
            min-height: 0;
            z-index: 1;
        }
        .modal-footer {
            padding: 1rem 2rem;
            border-top: 1px solid var(--theme-border, rgba(0,0,0,0.05));
            text-align: right;
            flex-shrink: 0;
            position: relative;
            z-index: 10; /* Footer above body */
            pointer-events: auto; /* Ensure clicks work */
        }
        .form-group {
            margin-bottom: 1rem;
        }
        .form-group label {
            display: block;
            margin-bottom: 0.25rem;
            color: var(--color-text-secondary);
        }
        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 0.5rem;
            background-color: var(--theme-border, rgba(255, 255, 255, 0.1));
            border: 1px solid var(--theme-label, rgba(255,255,255,0.2));
            color: var(--theme-headline, #fff);
            border-radius: 8px;
            box-sizing: border-box;
        }
        #modal-save-btn {
            padding: 0.5rem 1rem;
        }
        .form-group select {
            width: 100%;
            padding: 0.5rem;
            background-color: var(--theme-border, #333);
            border: 1px solid var(--theme-label, #555);
            color: var(--theme-headline, #fff);
            border-radius: 8px;
            box-sizing: border-box;
        }
        .form-group select option,
        .form-group select optgroup {
            background-color: var(--theme-bg, #1e1e1e);
            color: var(--theme-headline, #fff);
        }
        .modal-content .form-group select option,
        .modal-content .form-group select optgroup {
            background-color: var(--theme-bg, #1e1e1e);
            color: var(--theme-headline, #fff);
        }

        .title-container {
            display: flex;
            justify-content: center; /* Center horizontally */
            padding-top: 2rem;       /* Add some space from the top */
            padding-bottom: 2rem;
        }

        h1 {
            font-size: 2.5rem;
            font-weight: 600;
        }

        /* Grid container for the doodadz */
        .doodad-grid {
            position: relative; /* For positioning the background layer */
            display: grid;
            grid-template-columns: repeat(10, 120px); /* 10 columns, 120px each */
            grid-template-rows: repeat(16, 120px); /* 16 rows, 120px each */
            justify-content: center; /* Center the grid in the viewport */
            grid-auto-flow: dense;
            width: 1200px !important; /* Fixed width */
            height: 1920px; /* Fixed height (16 * 120px). Production Spec. */
            margin: 0 auto; /* Center the grid container */
            background-color: var(--color-tile-base);
            color: var(--theme-headline); /* Use theme text color */
            overflow: hidden; /* Ensure overlays are clipped to the frame */
            /* Column line 1 must stay geometric top-left regardless of UA / OS RTL (Arabic/hebrew TV, Chrome RTL). */
            direction: ltr;
            
            /* Wood Frame */
            /* border: 25px solid transparent; */
            /* border-image: url('img/frame.png') 25 stretch; */
            /* box-shadow: 0 20px 60px rgba(0,0,0,0.3); */
        }

        /* Landscape mode: 16 cols × 10 rows (1920×1200) */
        body.mode-landscape .doodad-grid {
            grid-template-columns: repeat(16, 120px) !important;
            grid-template-rows: repeat(10, 120px) !important;
            width: 1920px !important;
            height: 1200px !important;
        }

        /* FIX: Ensure background layer inside grid doesn't occupy a slot */
        .doodad-grid #background-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
            background-color: var(--color-tile-base);
        }

        /* Layout name + save bar top-right (dashboard only; hidden in kiosk) */
        .layout-name-bar {
            position: fixed;
            top: 16px;
            right: 16px;
            z-index: 2000;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .layout-name-display {
            font-size: 22px;
            font-weight: 700;
            color: var(--theme-label, rgba(255,255,255,0.6));
        }
        .layout-save-btn {
            padding: 6px 14px;
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            background: rgba(0,0,0,0.5);
            border: 1px solid rgba(255,255,255,0.4);
            border-radius: 8px;
            cursor: pointer;
        }
        .layout-save-btn:hover {
            background: rgba(0,0,0,0.7);
            border-color: rgba(255,255,255,0.7);
        }
        body.mode-kiosk .layout-name-bar {
            display: none;
        }

        /* Narrow dashboard (phone browser / embedded WebView): reserve no right column; move save bar off top-right corner */
        body.dashboard-compact:not(.mode-kiosk) .favourites-bin-main {
            display: none !important;
        }
        body.dashboard-compact:not(.mode-kiosk) .layout-name-bar {
            top: calc(52px + env(safe-area-inset-top, 0px));
            left: 8px;
            right: 8px;
            max-width: none;
            justify-content: center;
            flex-wrap: wrap;
            row-gap: 6px;
        }
        body.dashboard-compact:not(.mode-kiosk) .layout-name-display {
            font-size: clamp(14px, 3.8vw, 18px);
            text-align: center;
        }
        body.dashboard-compact:not(.mode-kiosk) .layout-save-btn {
            font-size: 13px;
            padding: 5px 10px;
        }
        body.dashboard-compact:not(.mode-kiosk) #menu-toggle-btn {
            top: calc(10px + env(safe-area-inset-top, 0px));
            left: calc(10px + env(safe-area-inset-left, 0px));
        }

        .op-screen-label {
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--signal-blue, #6ab8ff);
            padding-right: 10px;
            margin-right: 2px;
            border-right: 1px solid rgba(255,255,255,0.22);
        }

        .op-dashboard-target-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.5rem;
            margin-top: 0.25rem;
        }
        .op-target-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            min-height: 3.75rem;
            padding: 0.45rem 0.3rem;
            background: var(--color-surface-3);
            border: 1px solid var(--color-border);
            border-radius: 8px;
            color: var(--color-text-primary);
            cursor: pointer;
            font-size: 0.72rem;
            font-weight: 600;
            line-height: 1.15;
        }
        .op-target-btn:hover {
            border-color: var(--signal-blue, #4a9eff);
            background: rgba(0,0,0,0.12);
        }
        .op-target-btn--active {
            border-color: var(--signal-blue, #4a9eff);
            box-shadow: 0 0 0 1px var(--signal-blue, #4a9eff);
            background: rgba(74, 158, 255, 0.1);
        }
        .op-target-btn-label {
            display: block;
        }
        .op-target-btn-icon--landscape {
            width: 32px;
            height: 22px;
            border: 2px solid currentColor;
            border-radius: 3px;
            background: rgba(255,255,255,0.05);
            box-sizing: border-box;
        }
        .op-screen-btn-icon--tv-4k {
            transform: scale(1.08);
        }
        .op-canvas-select-hidden,
        .op-canvas-select-hidden-label {
            display: none;
        }

        .op-screen-switcher {
            display: flex;
            gap: 0.5rem;
            margin-top: 0.25rem;
        }
        .op-screen-btn {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            min-height: 4.5rem;
            padding: 0.5rem 0.35rem;
            background: var(--color-surface-3);
            border: 1px solid var(--color-border);
            border-radius: 8px;
            color: var(--color-text-primary);
            cursor: pointer;
            font-size: 0.78rem;
            font-weight: 600;
            line-height: 1.2;
        }
        .op-screen-btn:hover {
            border-color: var(--signal-blue, #4a9eff);
            background: rgba(0,0,0,0.12);
        }
        .op-screen-btn--active {
            border-color: var(--signal-blue, #4a9eff);
            box-shadow: 0 0 0 1px var(--signal-blue, #4a9eff);
            background: rgba(74, 158, 255, 0.1);
        }
        .op-screen-btn-icon {
            display: block;
            flex-shrink: 0;
            color: inherit;
        }
        .op-screen-btn-icon--frame {
            width: 26px;
            height: 32px;
            border: 2px solid currentColor;
            border-radius: 3px;
            background: rgba(255,255,255,0.05);
            box-sizing: border-box;
        }
        .op-screen-btn-icon--tv {
            width: 36px;
            height: 22px;
            border: 2px solid currentColor;
            border-radius: 3px;
            background: rgba(255,255,255,0.05);
            box-sizing: border-box;
            position: relative;
        }
        .op-screen-btn-icon--tv::after {
            content: '';
            position: absolute;
            bottom: -7px;
            left: 50%;
            transform: translateX(-50%);
            width: 12px;
            height: 5px;
            background: currentColor;
            border-radius: 0 0 2px 2px;
            opacity: 0.85;
        }

        .doodad-selected {
            outline: 3px solid var(--signal-neutral);
            outline-offset: 2px;
            z-index: 10;
        }

        .doodad {
            /* Add some padding and flex properties to center the content we're about to add */
            padding: 10px;
            box-sizing: border-box; /* Ensures padding doesn't increase the div size */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative; /* Needed for controls and z-index */
            z-index: 1; /* Ensure widgets are on top of the background layer */
            overflow: hidden; /* Prevents content from spilling out during drag */
            transition: background-color 0.2s ease-in-out;
            background-color: transparent; /* Invisible container */
            border-radius: 0;
            border: none;
            pointer-events: auto; /* Ensure interaction */
        }

        /* FIX: Ensure widget content fills the entire tile in all modes */
        .widget-content {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 0; /* below resize handle so corner stays visible */
            overflow: hidden;
            /* The Widget Content is now the visible card */
            background-color: var(--theme-bg);
            border: 1px solid var(--theme-border);
            border-radius: var(--tile-radius);
        }

        /* FP slide-show: frame extends to absolute limits of display, no rounded corners */
        .doodad[data-widget="slide-show"].class-FP {
            padding: 0 !important;
            border-radius: 0 !important;
            overflow: hidden;
        }
        .doodad[data-widget="slide-show"].class-FP .widget-content,
        .doodad[data-widget="slide-show"].class-FP .widget-content * {
            border-radius: 0 !important;
        }
        .doodad[data-widget="slide-show"].class-FP .widget-content {
            border: none !important;
            box-shadow: none !important;
        }

        /* Resize handle: grab corner or edge to drag and size (dashboard only; kiosk does not add it) */
        body:not(.mode-kiosk) .doodad .doodad-resize-handle {
            opacity: 0.2;
            transition: opacity 0.22s ease;
        }
        body:not(.mode-kiosk) .doodad:hover .doodad-resize-handle,
        body:not(.mode-kiosk) .doodad.doodad-resize-active .doodad-resize-handle {
            opacity: 1;
        }
        .doodad-resize-handle {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 24px;
            height: 24px;
            cursor: nwse-resize;
            z-index: 100;
            pointer-events: auto;
            background: linear-gradient(135deg, transparent 50%, rgba(59, 130, 246, 0.4) 50%);
            border-radius: 4px 0 0 0;
        }
        .doodad-resize-handle:hover {
            background: linear-gradient(135deg, transparent 50%, rgba(59, 130, 246, 0.7) 50%);
        }
        /* Headline/news full-bleed content must not cover the handle */
        .doodad.class-2x .doodad-resize-handle,
        .doodad.class-2y .doodad-resize-handle,
        .doodad.class-4x .doodad-resize-handle {
            z-index: 100;
        }
        /* DDZ Headline News (4x): force resize corner on top and visible */
        .doodad[data-widget="headline-news-4x"] .widget-content {
            z-index: 0;
        }
        .doodad[data-widget="headline-news-4x"] .doodad-resize-handle {
            z-index: 9999 !important;
            background: rgba(59, 130, 246, 0.7) !important;
            border: 2px solid rgba(255, 255, 255, 0.9);
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
        }
        .doodad[data-widget="headline-news-4x"] .doodad-resize-handle:hover {
            background: rgba(59, 130, 246, 1) !important;
        }

        /* Live grid readout while resizing (dashboard only) */
        body:not(.mode-kiosk) .doodad-resize-grid-float {
            position: fixed;
            z-index: 100050;
            padding: 10px 14px;
            border-radius: 10px;
            font-size: 13px;
            line-height: 1.4;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
            font-family: var(--font-family-sans);
            pointer-events: none;
            white-space: pre-line;
            background: var(--color-surface-2);
            color: var(--color-text-primary);
            border: 1px solid var(--color-border);
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
            opacity: 0;
            visibility: hidden;
            max-width: min(340px, calc(100vw - 24px));
        }
        body:not(.mode-kiosk) .doodad-resize-grid-float.is-visible {
            opacity: 1;
            visibility: visible;
        }

/* FIX: This forces the widget's root element (e.g., .calc-container) 
   to fill the .widget-content div, which solves the sizing issue for 
   the calculator, stock ticker, and other affected widgets. */
.widget-content > *:not(.doodad-resize-handle) {
    width: 100%;
    height: 100%;
}

        /* --- GRID SPAN HELPERS (v2.0 Standard: 10-Col Grid for 1920 Production) --- */
        
        /* v2.0 Class-Based Sizes (Primary System - Use these for new widgets) */
        .doodad.class-11 { 
            grid-column: span 1 !important; 
            grid-row: span 1 !important; 
        }
        .doodad.class-12 { 
            grid-column: span 1 !important; 
            grid-row: span 2 !important; 
        }
        .doodad.class-13 { 
            grid-column: span 1 !important; 
            grid-row: span 3 !important; 
        }
        .doodad.class-14 { 
            grid-column: span 1 !important; 
            grid-row: span 4 !important; 
        }
        .doodad.class-21 { 
            grid-column: span 2 !important; 
            grid-row: span 1 !important; 
        }
        .doodad.class-22 { 
            grid-column: span 2 !important; 
            grid-row: span 2 !important; 
        }
        .doodad.class-23 { 
            grid-column: span 3 !important; 
            grid-row: span 2 !important; 
        }
        .doodad.class-24 { 
            grid-column: span 4 !important; 
            grid-row: span 2 !important; 
        }
        .doodad.class-25 { 
            grid-column: span 5 !important; 
            grid-row: span 2 !important; 
        }
        .doodad.class-1X,
        .doodad.class-1x { 
            grid-column: span 10 !important; 
            grid-row: span 1 !important; 
        }
        .doodad.class-1y { 
            grid-column: span 16 !important; 
            grid-row: span 1 !important; 
        }
        .doodad.class-42 { 
            grid-column: span 2 !important; 
            grid-row: span 4 !important; 
        }
        .doodad.class-62 { 
            grid-column: span 2 !important; 
            grid-row: span 6 !important; 
        }
        .doodad.class-72 { 
            grid-column: span 2 !important; 
            grid-row: span 7 !important; 
        }
        .doodad.class-82 { 
            grid-column: span 2 !important; 
            grid-row: span 8 !important; 
        }
        .doodad.class-26 { 
            grid-column: span 6 !important; 
            grid-row: span 2 !important; 
        }
        .doodad.class-27 { 
            grid-column: span 7 !important; 
            grid-row: span 2 !important; 
        }
        .doodad.class-28 { 
            grid-column: span 8 !important; 
            grid-row: span 2 !important; 
        }
        .doodad.class-32 { 
            grid-column: span 2 !important; 
            grid-row: span 3 !important; 
        }
        .doodad.class-33 { 
            grid-column: span 3 !important; 
            grid-row: span 3 !important; 
        }
        .doodad.class-44 { 
            grid-column: span 4 !important; 
            grid-row: span 4 !important; 
        }
        .doodad.class-46 { 
            grid-column: span 6 !important; 
            grid-row: span 4 !important; 
        }
        .doodad.class-45 { 
            grid-column: span 5 !important; 
            grid-row: span 4 !important; 
        }
        .doodad.class-4X { 
            grid-column: span 10 !important; 
            grid-row: span 4 !important; 
        }
        .doodad.class-FP { 
            grid-column: span 10 !important; 
            grid-row: span 16 !important; 
        }
        .doodad.class-2X { 
            grid-column: span 10 !important; 
            grid-row: span 2 !important; 
        }
        
        /* Legacy: Keep for backward compatibility (deprecated - migrate to class-* system) */
        .doodad-2-col { grid-column: span 10; }
        .doodad-2x2 { grid-column: span 10; grid-row: span 4; }
        .doodad-1x2 { grid-row: span 2; }
        .doodad-1x3 { grid-row: span 3; }
        .doodad-1x4 { grid-row: span 4; }
        .doodad-2x3 { grid-column: span 2; grid-row: span 3; }
        .doodad-2x4 { grid-column: span 2; grid-row: span 4; }
        .doodad-2x6 { grid-column: span 2; grid-row: span 6; }
        .doodad-2x7 { grid-column: span 2; grid-row: span 7; }
        .doodad-2x8 { grid-column: span 2; grid-row: span 8; }
        .doodad-4-5 { grid-column: span 5; grid-row: span 4; }
        .doodad-2-5 { grid-column: span 5; grid-row: span 2; }
        .doodad-2x { grid-column: span 10; grid-row: span 2; }

        /* Make the doodad slightly visible on hover */
        .doodad:hover {
            background-color: rgba(255, 255, 255, 0.05);
            cursor: pointer;
        }

        /* REMOVED: expanded-view - Legacy/unused class */

        /* Style for the element being dragged */
        .sortable-ghost { /* The new, cleaner placeholder */
            background: rgba(59, 130, 246, 0.1);
            border: 2px dashed var(--signal-blue);
            border-radius: var(--tile-radius);
            opacity: 1;
        }
        /* Hide the content of the ghost element, so it's just an outline */
        .sortable-ghost > * {
            visibility: hidden;
        }

        /* --- New Weather Widget Styles --- */
        .weather-location {
            position: absolute;
            top: 1rem;    /* Matches doodad padding */
            right: 1rem;  /* Matches doodad padding */
            font-size: 1.2rem;
        }

        .weather-temp {
            position: absolute;
            top: 1rem;
            left: 1rem;
            font-size: 3rem;
            margin: 0; /* Override default heading margin */
        }

        .weather-icon-main {
            width: 96px;
            height: 96px;
        }

        .weather-details-bottom {
            position: absolute;
            bottom: 1rem;
            left: 1rem; /* Align with padding */
            display: flex;
            flex-direction: column; /* Stack items vertically */
            align-items: flex-start; /* Align text to the left */
            font-size: 0.9rem;
        }

        /* --- Vertical Weather Location Style --- */
        .weather-location-vertical {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3rem; /* Fixed width strip on the left */
            display: flex;
            align-items: center;
            justify-content: center;
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            font-size: 1.5rem;
            font-weight: 700;
            z-index: 1;
        }

        /* --- Vancouver Weather Widget Styles --- */
        .van-weather-container {
            display: flex;
            justify-content: space-around; /* Space out the left/right sections */
            align-items: center;
            width: 100%;
            height: 100%;
            padding-left: 3rem; /* Make space for the vertical city name */
            box-sizing: border-box;
        }
        .van-weather-main {
            text-align: left;
        }
        .van-weather-main h2 { font-size: 3.5rem; margin: 0; }
        .van-weather-main p { margin: 0; text-transform: capitalize; font-size: 1.2rem; }

        .van-weather-details {
            display: grid;
            grid-template-columns: 1fr; /* A single column for the details */
            gap: 0.5rem;
            font-size: 1rem;
        }
        .van-weather-details span {
            min-width: 140px; /* Give the column some width */
        }

        /* --- Nanjing Weather Widget Styles --- */
        .nanjing-weather-container {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center; /* Center the forecast grid vertically */
            justify-content: center; /* Center the forecast grid horizontally */
            padding-left: 3rem; /* Make space for the vertical city name */
            box-sizing: border-box; /* Include padding in height */
        }
        .nanjing-forecast-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr); /* 5 columns for 5 days */
            gap: 0.5rem;
            width: 100%;
        }
        .nanjing-day-forecast {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            font-size: 0.9rem; /* Slightly larger font */
        }
        .nanjing-day-forecast img {
            width: 96px;
            height: 96px;
            margin-bottom: 0.2rem;
        }
        .nanjing-day-forecast .day-name {
            font-weight: bold;
            margin-bottom: 0.1rem;
        }
        .nanjing-day-forecast .high-low { font-size: 0.75rem; }
        .nanjing-day-forecast .high-temp { font-weight: bold; font-size: 0.85rem; }
        .nanjing-day-forecast .low-temp { color: #aaa; }

 /* --- KIOSK MODE: NATIVE FIT --- */
/* No scaling. No zoom. The widgets just fit. */

html.mode-kiosk,
body.mode-kiosk {
    overflow: hidden !important;
    overscroll-behavior: none;
}
body.mode-kiosk {
    background: var(--color-bg);
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    display: block; /* Pin Top Left */
}
/* Host (grid + modals) must clip to prevent overflow when rotated */
body.mode-kiosk #fp-modal-host {
    overflow: hidden !important;
}

/* FP / 88-pop open: full viewport host so pop content isn’t clipped by scaled grid; panel scales like dashboard */
body.mode-kiosk.fp-modal-open #fp-modal-host {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    transform: none !important;
    overflow: visible !important;
    z-index: 9000;
}

/* Scale set in JS (--kiosk-fp-scale-*) so it matches applyKioskGridScale viewport + TV swap and never exceeds 1 */
body.mode-kiosk.fp-modal-open .fp-pop--portrait .fp-pop__panel {
    transform: scale(var(--kiosk-fp-scale-portrait, 1));
    transform-origin: center center;
}
body.mode-kiosk.fp-modal-open .fp-pop--landscape .fp-pop__panel {
    transform: scale(var(--kiosk-fp-scale-landscape, 1));
    transform-origin: center center;
}

/* Design px stay on .fp-pop__panel (1200×1920 / 1920×1200); only transform: scale(var(--kiosk-fp-scale-*)) fits the viewport.
   Do NOT set max-width/max-height to 100vw/100vh here — that shrinks the layout box AND scale() shrinks again (~¼ area). */
body.mode-kiosk.fp-modal-open .fp-pop__panel {
    flex: 0 0 auto;
    align-self: center;
    box-sizing: border-box;
}

/* Remote / D-pad: glow fades after idle; logical focus keeps elevated z-index for Enter */
body.mode-kiosk .doodad[data-widget].kiosk-nav-focus {
    outline: none;
    box-shadow: none;
    z-index: 50;
    position: relative;
    transition: box-shadow 0.35s ease;
}
body.mode-kiosk .doodad[data-widget].kiosk-nav-focus.kiosk-nav-focus-visible {
    box-shadow:
        0 0 0 4px rgba(106, 184, 255, 0.95),
        0 0 24px rgba(106, 184, 255, 0.45);
}

/* Kiosk D-pad: focus ring inside DDZ / FP modal (see js/utils/kiosk-ddz-nav.js).
   Ring class is applied to any focused nav target — not only [data-kiosk-focusable] (native <button> etc.). */
body.mode-kiosk .kiosk-ddz-focus-ring {
    outline: 3px solid rgba(106, 184, 255, 0.95);
    outline-offset: 3px;
    z-index: 5;
    position: relative;
}

/* OP TV: WebViews often tie D-pad focus to :hover/:focus — kill 5% white tint on the tile chrome */
body.kiosk-target-tv .doodad:hover,
body.kiosk-target-tv .doodad:focus,
body.kiosk-target-tv .doodad:focus-within {
    background-color: transparent !important;
}
body.kiosk-target-tv .doodad {
    -webkit-tap-highlight-color: transparent;
}

/* (Removed) OP TV OLED burn-in lateral flip — disabled in main.js (was .onpoint-tv-burnin-flip + neg scaleX). */

/* Dashboard: modal host on body — full viewport so fp-pop isn’t clipped by grid */
body:not(.mode-kiosk) #fp-modal-host {
    position: fixed !important;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    box-sizing: border-box;
}

/* Dashboard FP open: host pinned to .doodad-grid rect (JS sets top/left/width/height with !important) */
body:not(.mode-kiosk).fp-modal-open #fp-modal-host[data-fp-anchor-layout="1"] {
    inset: auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Kiosk grid cell count + px size come from applyGridProfileCss() (#onpoint-grid-profile-css).
   Do NOT hardcode 10×16 / 16×10 here — that overrode 32×18 (3840×2160) on OP TV to 1920×1200 (first “half” of the canvas). */
body.mode-kiosk .doodad-grid {
    display: grid !important;
    border: none !important;
    margin: 0 !important;
    background: none !important;
    position: absolute !important;
    top: 0;
    left: 0;
    transform-origin: 0 0;
}

body.mode-kiosk .doodad {
    width: 100% !important;
    height: 100% !important;
    padding: 10px !important; /* Standard padding */
    border: none !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

body.mode-kiosk.mode-landscape .doodad-grid {
    position: absolute !important;
    transform-origin: 0 0;
}


/* Out-of-bounds doodads: transparent strip so user sees what they're losing */
.doodad-overflow-root {
    display: block;
    margin: 0.5rem 0;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    min-height: 2rem;
}
.doodad-overflow-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    margin: 0.25rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    opacity: 0.7;
    vertical-align: middle;
}
.doodad-overflow-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}
.doodad-overflow-hint {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.15rem;
}
body.mode-kiosk .doodad-overflow-root {
    display: none !important;
}

/* HIDE UI */
body.mode-kiosk .title-container,
body.mode-kiosk #menu-toggle-btn,
body.mode-kiosk #side-menu {
    display: none !important;
}

/* ========== FP-pop & 88-pop shell (shared containers; doodads supply content only) ========== */
/* No scaling; orientation from canvas (body.mode-landscape) only. Gestures disabled when open; close only returns. */
/* Host: same #fp-modal-host; pointer-events enabled on pop roots */
.doodad-grid #fp-modal-host > .fp-pop,
.doodad-grid #fp-modal-host > .88-pop {
    pointer-events: auto;
}

/* --- FP-pop: full-page popout --- */
/* Portrait: single container 16h×10w (1200×1920). Landscape: two containers side by side 10h×8w each (960×1200). */
/* DDZ note: landscape *content* rules should use #fp-modal-host .*.fp-pop--landscape … (or .widget.fp-pop--landscape on the pop root), not body.mode-landscape — OP TV kiosk can open fp-pop--landscape while body.mode-landscape is still off. */
.fp-pop {
    position: absolute;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.92);
    color: var(--theme-headline, #fff);
}

.fp-pop__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--theme-bg, #1e1e1e);
    border: 2px solid var(--theme-border, #333);
    border-radius: 20px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.6);
}

.fp-pop--portrait .fp-pop__panel {
    width: 1200px;
    height: 1920px;
}

.fp-pop--landscape .fp-pop__panel {
    width: 1920px;
    height: 1200px;
}

/* Dashboard/builder: scale fp-pop to fit viewport (kiosk uses fixed 1200×1920 / 1920×1200) */
body:not(.mode-kiosk) .fp-pop--portrait .fp-pop__panel {
    transform: scale(min(100vw / 1200, 100vh / 1920));
    transform-origin: center center;
}
body:not(.mode-kiosk) .fp-pop--landscape .fp-pop__panel {
    transform: scale(min(100vw / 1920, 100vh / 1200));
    transform-origin: center center;
}

/*
 * Dashboard: scale FP to .doodad-grid size using zoom() so the layout box shrinks with the visual
 * (transform:scale alone keeps 1200×1920 layout and clips bottom/right inside a small host).
 * Host stays full viewport (see fp-modal-shell); only --fp-* vars come from grid rect.
 */
body:not(.mode-kiosk) #fp-modal-host[data-fp-scale-from-grid="1"] .fp-pop {
    overflow: visible;
}
body:not(.mode-kiosk) #fp-modal-host[data-fp-scale-from-grid="1"] .fp-pop--portrait .fp-pop__panel {
    zoom: var(--fp-scale-portrait);
    transform: none !important;
}
body:not(.mode-kiosk) #fp-modal-host[data-fp-scale-from-grid="1"] .fp-pop--landscape .fp-pop__panel {
    zoom: var(--fp-scale-landscape);
    transform: none !important;
}
/* Fallback when zoom() isn’t applied to arbitrary elements: match grid scale; may clip slightly */
@supports not (zoom: 0.5) {
    body:not(.mode-kiosk) #fp-modal-host[data-fp-scale-from-grid="1"] .fp-pop--portrait .fp-pop__panel {
        transform: scale(var(--fp-scale-portrait)) !important;
        transform-origin: center center;
    }
    body:not(.mode-kiosk) #fp-modal-host[data-fp-scale-from-grid="1"] .fp-pop--landscape .fp-pop__panel {
        transform: scale(var(--fp-scale-landscape)) !important;
        transform-origin: center center;
    }
}

.fp-pop__content-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.fp-pop--portrait .fp-pop__content-wrapper {
    flex: 1 1 auto;
}

.fp-pop__row {
    display: flex;
    flex: 1;
    min-height: 0;
}

.fp-pop__container {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fp-pop--landscape .fp-pop__container {
    width: 960px;
    height: 1200px;
}

/* Single-slot: one container uses full panel width (landscape 1920×1200, portrait 1200×1920). Two-slot keeps 960px columns. */
.fp-pop--landscape.fp-pop--single-slot .fp-pop__container {
    width: 1920px;
    height: 1200px;
}
.fp-pop--portrait.fp-pop--single-slot .fp-pop__container {
    width: 1200px;
    height: 1920px;
}

.fp-pop__slot {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 1rem;
}

/* Kiosk/TV: force shell to full design width (max-width:100% on container was shrinking to a narrow parent). No scroll in FP. */
body.mode-kiosk.fp-modal-open .fp-pop__content-wrapper {
    width: 100%;
    max-width: none;
    align-self: stretch;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}
body.mode-kiosk.fp-modal-open .fp-pop__row {
    width: 100%;
    min-width: 0;
}
body.mode-kiosk.fp-modal-open .fp-pop--landscape.fp-pop--single-slot .fp-pop__container {
    width: 1920px !important;
    max-width: none !important;
    min-width: 1920px;
    box-sizing: border-box;
}
body.mode-kiosk.fp-modal-open .fp-pop--portrait.fp-pop--single-slot .fp-pop__container {
    width: 1200px !important;
    max-width: none !important;
    min-width: 1200px;
    box-sizing: border-box;
}
body.mode-kiosk.fp-modal-open .fp-pop__slot {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
    -webkit-overflow-scrolling: auto;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
}
/* Kiosk FP: disable inner scroll regions (widgets often set overflow:auto on bodies) */
body.mode-kiosk.fp-modal-open .fp-pop .dp-modal-body,
body.mode-kiosk.fp-modal-open .fp-pop .sm-content,
body.mode-kiosk.fp-modal-open .fp-pop .wm-content {
    overflow: hidden !important;
}

.fp-pop__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 2px solid var(--theme-label, rgba(255,255,255,0.3));
    background: var(--theme-border, rgba(255,255,255,0.1));
    color: var(--theme-headline, #fff);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
}
.fp-pop__close:hover {
    background: var(--theme-label, rgba(255,255,255,0.2));
    border-color: var(--theme-headline, rgba(255,255,255,0.5));
}

/* Simple timer alarm flash (used by .st-alarm-pop in DDZ/simple-timer) */
@keyframes st-alarm-flash {
    0%, 100% { background-color: #000; }
    50% { background-color: var(--signal-danger, #ef4444); }
}

/* --- 88-pop: overlay full viewport (hides everything below); container 960×960 centered on both axes (exact same position in portrait and landscape). Content inside container orients to P/L. --- */
.88-pop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    pointer-events: auto;
}

/* Full viewport darkening; nothing visible below */
.88-pop__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 0;
}

/* Container is 960×960 only; centered on both dimensions. Same structure as fp-pop: panel has close + content-wrapper, slot inside wrapper. */
.88-pop__panel {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 960px;
    height: 960px;
    max-width: 960px;
    max-height: 960px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--theme-bg, #1e1e1e);
    border: 2px solid var(--theme-border, #333);
    border-radius: 20px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
    z-index: 1;
}

/* Same as fp-pop__content-wrapper: flex child that holds the slot so close stays out of flow */
.88-pop__content-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.88-pop__slot {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 1rem;
}

/* Same as fp-pop__close: X in circle, top-right; themed for light/dark */
.88-pop__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 2px solid var(--theme-label, rgba(255,255,255,0.3));
    background: var(--theme-border, rgba(255,255,255,0.1));
    color: var(--theme-headline, #fff);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
}
.88-pop__close:hover {
    background: var(--theme-label, rgba(255,255,255,0.2));
    border-color: var(--theme-headline, rgba(255,255,255,0.5));
}

/* FP slide-show: force edge-to-edge, no rounded corners, no shadow (wins over all other rules) */
.doodad[data-widget="slide-show"].class-FP,
body.mode-kiosk .doodad[data-widget="slide-show"].class-FP {
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
.doodad[data-widget="slide-show"].class-FP .widget-content,
body.mode-kiosk .doodad[data-widget="slide-show"].class-FP .widget-content {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
}
.doodad[data-widget="slide-show"].class-FP .widget-content *,
body.mode-kiosk .doodad[data-widget="slide-show"].class-FP .widget-content * {
    border-radius: 0 !important;
    box-shadow: none !important;
}
.doodad[data-widget="slide-show"].class-FP .doodad-resize-handle,
body.mode-kiosk .doodad[data-widget="slide-show"].class-FP .doodad-resize-handle {
    display: none !important;
}

/* FP slide-show: content-based override so frame is always edge-to-edge (no shadow, no rounded corner) */
.widget-content:has(.slide-show-frame) {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
}
.doodad:has(.widget-content .slide-show-frame) {
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    clip-path: inset(0 0 0 0 round 0) !important;
}
.doodad:has(.widget-content .slide-show-frame) .widget-content {
    clip-path: inset(0 0 0 0 round 0) !important;
}
.doodad:has(.widget-content .slide-show-frame) .widget-content * {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* --- Kiosk Slideshow FP (design px + same --kiosk-fp-scale-* as other FP pops; was position:absolute+transform:none which broke centering and scaling) --- */
.kiosk-slideshow-fp .fp-pop__panel {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #000 !important;
    width: 1200px !important;
    height: 1920px !important;
    transform: scale(var(--kiosk-fp-scale-portrait, 1)) !important;
    transform-origin: center center !important;
    overflow: visible !important;
}
body.mode-landscape .kiosk-slideshow-fp .fp-pop__panel,
.kiosk-slideshow-fp.fp-pop--landscape .fp-pop__panel {
    width: 1920px !important;
    height: 1200px !important;
    transform: scale(var(--kiosk-fp-scale-landscape, 1)) !important;
}
/* Ensure internals fill the absolute panel */
.kiosk-slideshow-fp .fp-pop__content-wrapper,
.kiosk-slideshow-fp .fp-pop__container,
.kiosk-slideshow-fp .fp-pop__slot {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #000 !important; /* Ensure background matches to hide any sub-pixel gaps */
}

/* Force square corners on EVERYTHING inside the kiosk slideshow */
.kiosk-slideshow-fp * {
    border-radius: 0 !important;
}
/* Ensure the close button is visible on top */
.kiosk-slideshow-fp .fp-pop__close {
    z-index: 9999 !important;
    top: 20px !important;
    right: 20px !important;
    background: rgba(0,0,0,0.5) !important;
    border: 2px solid rgba(255,255,255,0.5) !important;
    transition: opacity 0.5s ease-in-out;
    opacity: 0; /* Hidden by default (idle) */
}
/* Show close button when user interacts with the container */
.kiosk-slideshow-fp:hover .fp-pop__close,
.kiosk-slideshow-fp:active .fp-pop__close,
.kiosk-slideshow-fp.user-active .fp-pop__close {
    opacity: 1;
}

/* Ensure no rounded corners on the mat inside the kiosk slideshow */
.kiosk-slideshow-fp .slide-show-frame,
.kiosk-slideshow-fp .slide-show-mat,
.kiosk-slideshow-fp .slide-show-bevel,
.kiosk-slideshow-fp .slide-show-inner,
.kiosk-slideshow-fp .slide-show-inner img {
    border-radius: 0 !important;
}

/* Sleep overlay: clock-analog-1-33 (date at bottom); dim on Frame/small — OP TV (secondary sync) is full bright */
.sleep-overlay .sleep-clock-wrap {
    border-radius: 20px;
    overflow: hidden;
    filter: brightness(0.5);
}
.sleep-overlay.sleep-overlay--tv-full-bright .sleep-clock-wrap {
    filter: none;
}
.sleep-overlay .clock-analog-1-33 {
    background: transparent;
    border: none;
}
.sleep-overlay .ca33-day,
.sleep-overlay .ca33-date {
    font-size: 2rem;
    bottom: 1.5rem;
}

/* Power: pause all CSS animations when tab/screen hidden */
body.visibility-hidden * {
    animation-play-state: paused !important;
}