/* EdgeFabric Dashboard — device-mockups
   Split from main.css for maintainability. */

/* ── Device selection grid ── */
.device-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}
.device-card {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.device-card:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.device-card-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.device-card-name { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.25rem; }
.device-card-info { font-size: 0.8rem; color: var(--text-secondary); }
.device-card-serial { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); margin: 0.25rem 0 0.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* ── Phone-frame live viewer ── */
.viewer-layout {
    display: flex;
    gap: 2rem;
    align-items: stretch;
    position: relative;
    overflow: visible;
    isolation: isolate;
}
.viewer-panel {
    flex: 0 0 260px;
    min-width: 220px;
    max-height: calc(100vh - 100px);
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-left: 20px;
    position: relative;
    z-index: 20;
}
.viewer-panel .card {
    margin-top: 0;
    padding: 0.6rem 0.8rem;
}
.viewer-panel .card-header {
    margin-bottom: 0.4rem;
    padding-bottom: 0.3rem;
}
.viewer-panel .card-header h2 {
    font-size: 0.85rem;
}

/* Drag wrappers around movable phone/watch mockups */
.draggable-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    touch-action: none;
}
.draggable-shell.dragging {
    z-index: 30;
}
.phone-shell { z-index: 3; }
.watch-shell { z-index: 2; }

.draggable-panel {
    position: relative;
    z-index: 22;
    transition: box-shadow 0.15s ease;
}
.draggable-panel.dragging {
    z-index: 200;
    box-shadow: 0 10px 34px rgba(0,0,0,0.45);
}

.drag-icon-btn {
    cursor: grab;
    min-width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.35rem;
}
.drag-icon-btn:active {
    cursor: grabbing;
}

.phone-frame {
    cursor: grab;
}
.phone-frame:active {
    cursor: grabbing;
}
.watch-band-top,
.watch-band-bottom,
.band-texture {
    cursor: grab;
}
.watch-band-top:active,
.watch-band-bottom:active,
.band-texture:active {
    cursor: grabbing;
}

/* Phone wrapper (frame + side buttons) — left margin clears sidebar */
.phone-wrapper {
    position: relative;
    flex-shrink: 0;
    margin-left: 40px;
}

/* Landscape orientation: rotate 90° CW.
   Phone frame width ≈ clamp(180px,20vw,280px) ≈ 220px, height ≈ 500–600px.
   After rotation the visual dimensions swap so we compensate with negative
   top/bottom margins so the flex row doesn't waste vertical space. */
.phone-wrapper.landscape-orientation {
    transform: rotate(90deg);
    transform-origin: center center;
    /* Keep rotated device clear of sidebar and info panel */
    margin-left: 180px;
    margin-right: 160px;
    margin-top: 0;
    margin-bottom: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tablet/iPad bezels are landscape by default; portrait is the inverse rotation. */
.phone-wrapper.portrait-for-tablet {
    transform: rotate(90deg);
    transform-origin: center center;
    margin-left: 180px;
    margin-right: 160px;
    margin-top: 0;
    margin-bottom: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 1280px) {
    .phone-wrapper.landscape-orientation {
        margin-left: 140px;
        margin-right: 120px;
    }
    .phone-wrapper.portrait-for-tablet {
        margin-left: 140px;
        margin-right: 120px;
    }
}

/* Smooth portrait → landscape transition on the frame itself */
.phone-wrapper {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Phone frame — the bezel, adaptive width, fits viewport height */
/* Real phones are ~2:1 H:W body ratio (e.g. 138.4×67.3 mm for iPhone 8) */
.phone-frame {
    width: clamp(180px, 20vw, 280px);
    max-height: calc(100vh - 100px);
    background: #1a3a3a;
    border-radius: 36px;
    border: 2px solid rgba(127,255,212,0.35);
    box-shadow:
        /* outer glow */
        0 0 0 1px rgba(127,255,212,0.08),
        /* 3D depth layers */
        0 2px 4px rgba(0,0,0,0.3),
        0 8px 16px rgba(0,0,0,0.25),
        0 20px 60px rgba(0,0,0,0.5),
        /* bottom edge highlight */
        0 1px 0 rgba(255,255,255,0.05),
        /* inner rim */
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    /* subtle 3D tilt */
    transform: perspective(800px) rotateY(-1deg);
    transition: transform 0.3s ease;
}
.phone-frame:hover {
    transform: perspective(800px) rotateY(0deg) translateY(-2px);
}
.phone-frame.android {
    border-radius: 32px;
}

/* ── Android Bezel Variants ── */
/* Samsung Galaxy S (S23/S24/S25) — flat glass, slim aluminium frame */
.phone-frame.android.galaxy-s {
    border-radius: 28px;
    background: linear-gradient(145deg, #1e1e1e, #141414);
    border: 2px solid #3a3a3a;
    box-shadow:
        0 0 0 1px rgba(100,100,105,0.15),
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.3),
        0 2px 4px rgba(0,0,0,0.3),
        0 8px 20px rgba(0,0,0,0.35),
        0 20px 50px rgba(0,0,0,0.5);
}
/* Samsung Galaxy A (A54/A55) — polycarbonate, matte feel */
.phone-frame.android.galaxy-a {
    border-radius: 26px;
    background: linear-gradient(145deg, #222236, #181828);
    border: 2px solid #44446a;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        inset 0 -1px 0 rgba(0,0,0,0.25),
        0 2px 4px rgba(0,0,0,0.3),
        0 16px 44px rgba(0,0,0,0.45),
        0 0 10px rgba(68,68,106,0.12);
}
/* Google Pixel (8/9) — visor bar look, matte aluminium */
.phone-frame.android.pixel {
    border-radius: 30px;
    background: linear-gradient(145deg, #282a2d, #1a1c1f);
    border: 2.5px solid #5f6368;
    box-shadow:
        0 0 0 1px rgba(95,99,104,0.2),
        inset 0 1px 0 rgba(255,255,255,0.07),
        inset 0 -1px 0 rgba(0,0,0,0.3),
        0 2px 4px rgba(0,0,0,0.3),
        0 10px 24px rgba(0,0,0,0.35),
        0 20px 52px rgba(0,0,0,0.5);
}
/* OnePlus (12/13) — alert slider detail, curved glass */
.phone-frame.android.oneplus {
    border-radius: 34px;
    background: linear-gradient(145deg, #151518, #0a0a0c);
    border: 2px solid #c41e3a;
    box-shadow:
        0 0 0 1px rgba(196,30,58,0.1),
        inset 0 1px 0 rgba(255,255,255,0.04),
        inset 0 -1px 0 rgba(0,0,0,0.3),
        0 2px 4px rgba(0,0,0,0.3),
        0 20px 56px rgba(0,0,0,0.55),
        0 0 12px rgba(196,30,58,0.06);
}
/* Xiaomi (14/15) — flat edges, matte frame */
.phone-frame.android.xiaomi {
    border-radius: 24px;
    background: linear-gradient(145deg, #1e1e21, #111113);
    border: 2px solid #555;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        inset 0 -1px 0 rgba(0,0,0,0.3),
        0 2px 4px rgba(0,0,0,0.3),
        0 16px 48px rgba(0,0,0,0.5);
}
/* Nothing Phone — transparent-inspired, glyph accent */
.phone-frame.android.nothing {
    border-radius: 30px;
    background: linear-gradient(145deg, #0e0e0e, #050505);
    border: 2px solid #d4d4d4;
    box-shadow:
        0 0 0 1px rgba(212,212,212,0.15),
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.3),
        0 2px 4px rgba(0,0,0,0.3),
        0 18px 52px rgba(0,0,0,0.5),
        0 0 16px rgba(212,212,212,0.04);
}
/* Motorola Edge/Razr — vegan leather texture, rounded */
.phone-frame.android.motorola {
    border-radius: 32px;
    background: linear-gradient(155deg, #2a1f1a, #1a120e);
    border: 2px solid #6b4c3b;
    box-shadow:
        inset 0 1px 0 rgba(255,220,180,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.35),
        0 2px 4px rgba(0,0,0,0.3),
        0 16px 48px rgba(0,0,0,0.5),
        0 0 8px rgba(107,76,59,0.1);
}
/* Sony Xperia — tall 21:9, flat industrial */
.phone-frame.android.xperia {
    border-radius: 18px;
    background: linear-gradient(145deg, #1c1c2e, #0e0e18);
    border: 2.5px solid #484868;
    box-shadow:
        0 0 0 1px rgba(72,72,104,0.2),
        inset 0 1px 0 rgba(140,140,200,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.35),
        0 2px 4px rgba(0,0,0,0.3),
        0 18px 52px rgba(0,0,0,0.5);
    aspect-ratio: 9 / 21;
}
/* Huawei Mate/P series — leatherette back, gold accent */
.phone-frame.android.huawei {
    border-radius: 28px;
    background: linear-gradient(150deg, #1e1e22, #111114);
    border: 2px solid #a68b5b;
    box-shadow:
        0 0 0 1px rgba(166,139,91,0.12),
        inset 0 1px 0 rgba(255,230,180,0.05),
        inset 0 -1px 0 rgba(0,0,0,0.35),
        0 2px 4px rgba(0,0,0,0.3),
        0 20px 54px rgba(0,0,0,0.5),
        0 0 10px rgba(166,139,91,0.06);
}
/* Oppo / Realme — hasselblad-inspired, sleek curves */
.phone-frame.android.oppo {
    border-radius: 30px;
    background: linear-gradient(145deg, #181820, #0c0c12);
    border: 2px solid #4a9e60;
    box-shadow:
        0 0 0 1px rgba(74,158,96,0.1),
        inset 0 1px 0 rgba(255,255,255,0.05),
        inset 0 -1px 0 rgba(0,0,0,0.3),
        0 2px 4px rgba(0,0,0,0.3),
        0 18px 50px rgba(0,0,0,0.5),
        0 0 10px rgba(74,158,96,0.05);
}
/* Asus ROG Phone — gaming RGB accent, angular feel */
.phone-frame.android.rog {
    border-radius: 20px;
    background: linear-gradient(145deg, #141418, #080808);
    border: 2px solid #e13333;
    box-shadow:
        0 0 0 1px rgba(225,51,51,0.15),
        inset 0 1px 0 rgba(255,80,80,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.4),
        0 2px 4px rgba(0,0,0,0.3),
        0 16px 48px rgba(0,0,0,0.55),
        0 0 18px rgba(225,51,51,0.08);
}
/* Samsung Z Fold — wider foldable aspect */
.phone-frame.android.galaxy-fold {
    border-radius: 22px;
    background: linear-gradient(145deg, #1a1a20, #0e0e12);
    border: 2px solid #55556a;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        inset 0 -1px 0 rgba(0,0,0,0.3),
        0 2px 4px rgba(0,0,0,0.3),
        0 16px 44px rgba(0,0,0,0.5);
    aspect-ratio: 10 / 16;
}
/* Samsung Z Flip — compact clamshell */
.phone-frame.android.galaxy-flip {
    border-radius: 26px;
    background: linear-gradient(145deg, #2a1a2e, #180e1c);
    border: 2px solid #9966aa;
    box-shadow:
        0 0 0 1px rgba(153,102,170,0.12),
        inset 0 1px 0 rgba(255,200,255,0.05),
        inset 0 -1px 0 rgba(0,0,0,0.35),
        0 2px 4px rgba(0,0,0,0.3),
        0 16px 44px rgba(0,0,0,0.5),
        0 0 8px rgba(153,102,170,0.06);
    aspect-ratio: 9 / 22;
}

/* ── Android Tablet Bezel Variants ── */
/* Samsung Galaxy Tab S — landscape, thin bezels, dark */
.phone-frame.android.galaxy-tab {
    border-radius: 16px;
    background: linear-gradient(145deg, #1e1e1e, #111111);
    border: 2px solid #3a3a3a;
    width: clamp(380px, 50vw, 640px);
    flex-direction: row;
    transform: none;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 2px 4px rgba(0,0,0,0.3),
        0 10px 24px rgba(0,0,0,0.35),
        0 18px 54px rgba(0,0,0,0.5);
}
.phone-frame.android.galaxy-tab:hover { transform: none; }
/* Google Pixel Tablet — landscape, rounded, porcelain feel */
.phone-frame.android.pixel-tablet {
    border-radius: 20px;
    background: linear-gradient(145deg, #e8e5e0, #d8d4cf);
    border: 2.5px solid #c5c0b8;
    width: clamp(380px, 50vw, 640px);
    flex-direction: row;
    transform: none;
    box-shadow:
        inset 0 0 1px rgba(255,255,255,0.5),
        0 2px 4px rgba(0,0,0,0.2),
        0 10px 24px rgba(0,0,0,0.25),
        0 18px 54px rgba(0,0,0,0.4);
}
.phone-frame.android.pixel-tablet:hover { transform: none; }
/* Generic Android Tablet — landscape, neutral dark */
.phone-frame.android.android-tablet {
    border-radius: 14px;
    background: linear-gradient(145deg, #222226, #18181c);
    border: 2px solid #555;
    width: clamp(360px, 48vw, 600px);
    flex-direction: row;
    transform: none;
}
.phone-frame.android.android-tablet:hover { transform: none; }

/* Android tablet screen — landscape 16:10 */
.galaxy-tab .phone-screen,
.pixel-tablet .phone-screen,
.android-tablet .phone-screen {
    aspect-ratio: 16 / 10;
}
/* Android tablet notch → left side camera bar */
.galaxy-tab .phone-notch,
.pixel-tablet .phone-notch,
.android-tablet .phone-notch {
    height: auto;
    width: 16px;
    min-height: 100%;
    flex-direction: column;
}
/* Android tablet navbar → right side nav bar */
.galaxy-tab .phone-navbar,
.pixel-tablet .phone-navbar,
.android-tablet .phone-navbar {
    height: auto;
    width: 20px;
    min-height: 100%;
    flex-direction: column;
    gap: 0.5rem;
}
.galaxy-tab .phone-navbar .nav-btn,
.pixel-tablet .phone-navbar .nav-btn,
.android-tablet .phone-navbar .nav-btn {
    padding: 3px;
}
.galaxy-tab .phone-navbar svg,
.pixel-tablet .phone-navbar svg,
.android-tablet .phone-navbar svg {
    width: 14px;
    height: 14px;
}

/* Android notch variants */
.phone-notch.android-punch-hole {
    height: 24px;
    background: #000;
    justify-content: flex-end;
    padding-right: 30%;
}
.android-hole-punch {
    width: 10px;
    height: 10px;
    background: #1a1a1a;
    border-radius: 50%;
    border: 1.5px solid #333;
}
/* Pixel camera bar */
.phone-notch.pixel-bar {
    height: 28px;
    background: #000;
    justify-content: center;
}
.pixel-camera-dot {
    width: 8px;
    height: 8px;
    background: #202124;
    border-radius: 50%;
    border: 1.5px solid #5f6368;
}

/* iPhone — titanium / space-black frame (base styles) */
.phone-frame.ios {
    background: linear-gradient(145deg, #2e2e32, #222226);
    border: 2.5px solid #5a5a5e;
    box-shadow:
        0 0 0 1px rgba(180,180,185,0.12),
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.25),
        0 2px 4px rgba(0,0,0,0.3),
        0 8px 20px rgba(0,0,0,0.35),
        0 20px 60px rgba(0,0,0,0.55),
        0 0 18px rgba(0,0,0,0.2);
}

/* iPhone 3G/3GS — chrome-edged, thick bezels, very rounded, 3:2 screen */
.phone-frame.ios.iphone-3g {
    border-radius: 42px;
    background: linear-gradient(145deg, #2a2a2c, #1a1a1c);
    border: 3px solid #888;
    box-shadow:
        0 0 0 1px rgba(160,160,170,0.3),
        inset 0 1px 0 rgba(255,255,255,0.15),
        inset 0 -1px 0 rgba(0,0,0,0.2),
        0 2px 4px rgba(0,0,0,0.25),
        0 8px 20px rgba(0,0,0,0.3),
        0 16px 48px rgba(0,0,0,0.45);
}
/* iPhone 4/4S — flat glass sandwich, stainless steel band */
.phone-frame.ios.iphone-4 {
    border-radius: 24px;
    background: linear-gradient(145deg, #1e1e20, #111113);
    border: 2.5px solid #9a9a9e;
    box-shadow:
        0 0 0 1px rgba(180,180,185,0.25),
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 -1px 0 rgba(0,0,0,0.2),
        0 2px 4px rgba(0,0,0,0.25),
        0 8px 20px rgba(0,0,0,0.3),
        0 16px 48px rgba(0,0,0,0.45);
}
/* iPhone 5/5S/SE 1st — aluminium unibody, taller 16:9 */
.phone-frame.ios.iphone-5 {
    border-radius: 28px;
    background: linear-gradient(145deg, #d0d0d4, #b8b8bc);
    border: 2px solid #a8a8ac;
    box-shadow:
        0 0 0 1px rgba(190,190,195,0.2),
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -1px 0 rgba(0,0,0,0.1),
        0 2px 4px rgba(0,0,0,0.2),
        0 8px 20px rgba(0,0,0,0.25),
        0 16px 48px rgba(0,0,0,0.45);
}
/* iPhone 6/7/8 — classic with home button, thick bezels, rounded body */
.phone-frame.ios.iphone-classic {
    border-radius: 36px;
    background: linear-gradient(145deg, #d8d8dc, #c5c5ca);
    border: 2px solid #b0b0b5;
    box-shadow:
        0 0 0 1px rgba(200,200,205,0.2),
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -1px 0 rgba(0,0,0,0.1),
        0 2px 4px rgba(0,0,0,0.2),
        0 8px 20px rgba(0,0,0,0.25),
        0 16px 48px rgba(0,0,0,0.45);
}
/* iPhone X / 11 — large notch, rounded stainless steel frame */
.phone-frame.ios.iphone-notch {
    border-radius: 44px;
    background: linear-gradient(145deg, #222224, #141416);
    border: 2.5px solid #48484a;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.3),
        0 2px 4px rgba(0,0,0,0.3),
        0 8px 20px rgba(0,0,0,0.35),
        0 20px 56px rgba(0,0,0,0.5);
}
/* iPhone 12–14 — flat edges, notch, aluminium frame */
.phone-frame.ios.iphone-modern {
    border-radius: 40px;
    background: linear-gradient(145deg, #222224, #151517);
    border: 2.5px solid #636366;
    box-shadow:
        0 0 0 1px rgba(160,160,165,0.15),
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.3),
        0 2px 4px rgba(0,0,0,0.3),
        0 10px 24px rgba(0,0,0,0.35),
        0 18px 54px rgba(0,0,0,0.50);
}
/* iPhone 15/16 — Dynamic Island, titanium frame */
.phone-frame.ios.iphone-island {
    border-radius: 48px;
    background: linear-gradient(145deg, #2e2e32, #222226);
    border: 2.5px solid #5a5a5e;
}
/* iPhone 12/13 mini — same style as modern but smaller body */
.phone-frame.ios.iphone-mini {
    border-radius: 40px;
    background: linear-gradient(145deg, #2a2a2e, #1e1e22);
    border: 2.5px solid #555;
    width: clamp(150px, 16vw, 220px);
}

/* ── iPad bezels — landscape orientation ────────── */
/* iPad classic — thick bezels, home button, silver/space-grey */
.phone-frame.ios.ipad-classic {
    border-radius: 16px;
    background: linear-gradient(145deg, #d8d8dc, #c0c0c4);
    border: 2.5px solid #bbb;
    width: clamp(380px, 50vw, 640px);
    flex-direction: row;
    box-shadow:
        inset 0 0 1px rgba(255,255,255,0.5),
        0 2px 4px rgba(0,0,0,0.2),
        0 10px 24px rgba(0,0,0,0.3),
        0 18px 54px rgba(0,0,0,0.40);
    transform: none;
}
.phone-frame.ios.ipad-classic:hover { transform: none; }
/* iPad Air / 10th gen — thin bezels, dark body */
.phone-frame.ios.ipad-air {
    border-radius: 18px;
    background: linear-gradient(145deg, #2e2e32, #222226);
    border: 2.5px solid #555;
    width: clamp(380px, 50vw, 640px);
    flex-direction: row;
    transform: none;
}
.phone-frame.ios.ipad-air:hover { transform: none; }
/* iPad Pro — generic modern thin bezels (fallback) */
.phone-frame.ios.ipad-pro {
    border-radius: 16px;
    background: linear-gradient(145deg, #1c1c1e, #141416);
    border: 2px solid #444;
    width: clamp(400px, 52vw, 680px);
    flex-direction: row;
    transform: none;
}
.phone-frame.ios.ipad-pro:hover { transform: none; }
/* iPad Pro 12.9" 1st/2nd gen (2015-2017) — thick bezels, home button */
.phone-frame.ios.ipad-pro-classic {
    border-radius: 16px;
    background: linear-gradient(145deg, #d8d8dc, #c0c0c4);
    border: 2.5px solid #bbb;
    width: clamp(420px, 54vw, 720px);
    flex-direction: row;
    box-shadow:
        inset 0 0 1px rgba(255,255,255,0.5),
        0 2px 4px rgba(0,0,0,0.2),
        0 10px 24px rgba(0,0,0,0.3),
        0 18px 54px rgba(0,0,0,0.40);
    transform: none;
}
.phone-frame.ios.ipad-pro-classic:hover { transform: none; }
/* iPad Pro 9.7"/10.5" (2016-2017) — thick bezels, home button, smaller */
.phone-frame.ios.ipad-pro-10 {
    border-radius: 16px;
    background: linear-gradient(145deg, #d8d8dc, #c0c0c4);
    border: 2.5px solid #bbb;
    width: clamp(360px, 48vw, 600px);
    flex-direction: row;
    box-shadow:
        inset 0 0 1px rgba(255,255,255,0.5),
        0 2px 4px rgba(0,0,0,0.2),
        0 10px 24px rgba(0,0,0,0.3),
        0 18px 54px rgba(0,0,0,0.40);
    transform: none;
}
.phone-frame.ios.ipad-pro-10:hover { transform: none; }
/* iPad Pro 11" (2018-2022) — thin bezels, Face ID, dark body */
.phone-frame.ios.ipad-pro-11 {
    border-radius: 18px;
    background: linear-gradient(145deg, #1c1c1e, #141416);
    border: 2px solid #444;
    width: clamp(380px, 50vw, 640px);
    flex-direction: row;
    transform: none;
}
.phone-frame.ios.ipad-pro-11:hover { transform: none; }
/* iPad Pro 12.9" (2018-2022) — thin bezels, Face ID, larger frame */
.phone-frame.ios.ipad-pro-12 {
    border-radius: 18px;
    background: linear-gradient(145deg, #1c1c1e, #141416);
    border: 2px solid #444;
    width: clamp(440px, 56vw, 740px);
    flex-direction: row;
    transform: none;
}
.phone-frame.ios.ipad-pro-12:hover { transform: none; }
/* iPad Pro 11" M4 (2024) — ultra-thin bezels, OLED, nano-texture */
.phone-frame.ios.ipad-pro-m4 {
    border-radius: 20px;
    background: linear-gradient(145deg, #111113, #0a0a0c);
    border: 1.5px solid #333;
    width: clamp(380px, 50vw, 640px);
    flex-direction: row;
    transform: none;
}
.phone-frame.ios.ipad-pro-m4:hover { transform: none; }
/* iPad Pro 13" M4 (2024) — ultra-thin bezels, OLED, largest */
.phone-frame.ios.ipad-pro-m4-13 {
    border-radius: 20px;
    background: linear-gradient(145deg, #111113, #0a0a0c);
    border: 1.5px solid #333;
    width: clamp(460px, 58vw, 760px);
    flex-direction: row;
    transform: none;
}
.phone-frame.ios.ipad-pro-m4-13:hover { transform: none; }
/* iPad mini classic — home button, silver, compact */
.phone-frame.ios.ipad-mini-classic {
    border-radius: 16px;
    background: linear-gradient(145deg, #d8d8dc, #c0c0c4);
    border: 2.5px solid #bbb;
    width: clamp(320px, 42vw, 520px);
    flex-direction: row;
    box-shadow:
        inset 0 0 1px rgba(255,255,255,0.5),
        0 2px 4px rgba(0,0,0,0.2),
        0 10px 24px rgba(0,0,0,0.3),
        0 18px 54px rgba(0,0,0,0.40);
    transform: none;
}
.phone-frame.ios.ipad-mini-classic:hover { transform: none; }
/* iPad mini 6+ — thin bezels, rounded, no home button */
.phone-frame.ios.ipad-mini-modern {
    border-radius: 16px;
    background: linear-gradient(145deg, #2e2e32, #222226);
    border: 2.5px solid #555;
    width: clamp(320px, 42vw, 520px);
    flex-direction: row;
    transform: none;
}
.phone-frame.ios.ipad-mini-modern:hover { transform: none; }

/* Top notch / camera area */
.phone-notch {
    height: 28px;
    background: #1a3a3a;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}
.phone-notch.ios-notch {
    height: 32px;
    background: #000;
}
/* Classic top bar — silver/space-grey with speaker grille + front camera, no notch */
.phone-notch.ios-classic-top {
    height: 48px;
    background: #d1d1d6;
    gap: 10px;
}
/* Darker top bar for black-faced iPhones */
.iphone-3g .phone-notch.ios-classic-top,
.iphone-4 .phone-notch.ios-classic-top {
    background: #222;
}
.iphone-3g .phone-notch.ios-classic-top::after,
.iphone-4 .phone-notch.ios-classic-top::after {
    background: #1c1c1e;
    border-color: #444;
}
.phone-speaker {
    width: 42px;
    height: 5px;
    background: #999;
    border-radius: 3px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
/* Classic front camera dot next to speaker */
.phone-notch.ios-classic-top::after {
    content: "";
    width: 8px;
    height: 8px;
    background: #1c1c1e;
    border-radius: 50%;
    border: 1.5px solid #888;
    box-shadow: inset 0 0 2px rgba(0,0,0,0.5);
}
/* Notch cutout for X/11/12-14 — wide dark notch shape */
.ios-notch-cutout {
    width: 160px;
    height: 26px;
    background: #000;
    border-radius: 0 0 18px 18px;
    position: relative;
}
.ios-notch-cutout::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: #333;
    border-radius: 50%;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: inset 0 0 2px rgba(0,0,0,0.6);
}
.phone-camera {
    width: 10px;
    height: 10px;
    background: #222;
    border-radius: 50%;
    border: 1.5px solid #333;
    box-shadow: inset 0 0 2px rgba(0,0,0,0.5);
}
/* Dynamic Island — pill-shaped cutout (iPhone 15/16) */
.dynamic-island {
    width: 90px;
    height: 22px;
    background: #111;
    border-radius: 14px;
    border: 1px solid #222;
    box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.6),
        0 0 4px rgba(0,0,0,0.3);
}
/* iPhone mini — smaller notch cutout */
.mini-notch {
    width: 130px;
    height: 22px;
}

/* ── iPad top bars → left side bars in landscape ──── */
/* iPad classic top → left camera bar (thick bezel) */
.phone-notch.ipad-classic-top {
    height: auto;
    width: 28px;
    min-height: 100%;
    background: #d1d1d6;
    flex-direction: column;
}
/* iPad Pro classic (12.9" home button) → wider left camera bar */
.phone-notch.ipad-pro-classic-top {
    height: auto;
    width: 32px;
    min-height: 100%;
    background: #d1d1d6;
    flex-direction: column;
}
/* iPad Pro 9.7"/10.5" (home button) → medium left camera bar */
.phone-notch.ipad-pro-10-top {
    height: auto;
    width: 26px;
    min-height: 100%;
    background: #d1d1d6;
    flex-direction: column;
}
/* iPad modern top → left camera strip (thin bezel) */
.phone-notch.ipad-modern-top {
    height: auto;
    width: 16px;
    min-height: 100%;
    background: #000;
    flex-direction: column;
}
/* iPad Pro 11" (2018-2022) → left camera strip */
.phone-notch.ipad-pro-11-top {
    height: auto;
    width: 14px;
    min-height: 100%;
    background: #000;
    flex-direction: column;
}
/* iPad Pro 12.9" (2018-2022) → left camera strip, slightly wider */
.phone-notch.ipad-pro-12-top {
    height: auto;
    width: 16px;
    min-height: 100%;
    background: #000;
    flex-direction: column;
}
/* iPad Pro M4 11" (2024) → ultra-thin left camera strip */
.phone-notch.ipad-pro-m4-top {
    height: auto;
    width: 10px;
    min-height: 100%;
    background: #000;
    flex-direction: column;
}
/* iPad Pro M4 13" (2024) → ultra-thin left camera strip */
.phone-notch.ipad-pro-m4-13-top {
    height: auto;
    width: 12px;
    min-height: 100%;
    background: #000;
    flex-direction: column;
}
/* iPad front camera dot — centered in side bar */
.ipad-camera-dot {
    width: 6px;
    height: 6px;
    background: #1c1c1e;
    border-radius: 50%;
    border: 1px solid #555;
    box-shadow: inset 0 0 2px rgba(0,0,0,0.5);
}
/* Smaller camera dot for ultra-thin bezels (M4) */
.ipad-pro-m4 .ipad-camera-dot,
.ipad-pro-m4-13 .ipad-camera-dot {
    width: 4px;
    height: 4px;
}
/* iPad navbar → right side bar */
.phone-navbar.ipad-navbar {
    height: auto;
    width: 16px;
    min-height: 100%;
    flex-direction: column;
    background: #000;
    border-top: none;
}
/* iPad Pro 11" navbar — narrower right side */
.ipad-pro-11 .phone-navbar.ipad-navbar {
    width: 14px;
}
/* iPad Pro 12.9" navbar */
.ipad-pro-12 .phone-navbar.ipad-navbar {
    width: 16px;
}
/* iPad Pro M4 navbar — ultra-thin right side */
.ipad-pro-m4 .phone-navbar.ipad-navbar {
    width: 10px;
}
.ipad-pro-m4-13 .phone-navbar.ipad-navbar {
    width: 12px;
}
/* iPad home indicator — rotated vertical for side bar */
.ipad-air .ios-home-indicator,
.ipad-pro .ios-home-indicator,
.ipad-pro-11 .ios-home-indicator,
.ipad-pro-12 .ios-home-indicator,
.ipad-pro-m4 .ios-home-indicator,
.ipad-pro-m4-13 .ios-home-indicator,
.ipad-mini-modern .ios-home-indicator {
    width: 4px;
    height: 60px;
    border-radius: 2px;
}
/* M4 home indicator — slightly smaller */
.ipad-pro-m4 .ios-home-indicator,
.ipad-pro-m4-13 .ios-home-indicator {
    height: 50px;
}
/* iPad classic navbar → right side bar with home button */
.ipad-classic .phone-navbar.classic-navbar,
.ipad-mini-classic .phone-navbar.classic-navbar {
    height: auto;
    width: 36px;
    min-height: 100%;
    flex-direction: column;
    background: #d1d1d6;
}
/* iPad Pro classic (12.9" home button) → wider right side bar */
.ipad-pro-classic .phone-navbar.classic-navbar {
    height: auto;
    width: 40px;
    min-height: 100%;
    flex-direction: column;
    background: #d1d1d6;
}
/* iPad Pro 9.7"/10.5" → narrower right side bar */
.ipad-pro-10 .phone-navbar.classic-navbar {
    height: auto;
    width: 34px;
    min-height: 100%;
    flex-direction: column;
    background: #d1d1d6;
}
.ipad-classic .phone-navbar .ios-home-button,
.ipad-mini-classic .phone-navbar .ios-home-button {
    width: 28px;
    height: 28px;
}
.ipad-pro-classic .phone-navbar .ios-home-button {
    width: 30px;
    height: 30px;
}
.ipad-pro-10 .phone-navbar .ios-home-button {
    width: 26px;
    height: 26px;
}

/* Bezel selector dropdown */
.bezel-select {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
    cursor: pointer;
    max-width: 200px;
}
.bezel-select:hover {
    border-color: var(--accent);
}
.bezel-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(127,255,212,0.15);
}

/* Screen area — default 16:9 for classic iPhone */
.phone-screen {
    width: 100%;
    aspect-ratio: 9 / 16;
    background: #000;
    position: relative;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
}
/* Glass reflection overlay */
.phone-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.06) 0%,
        rgba(255,255,255,0.02) 30%,
        transparent 50%,
        transparent 100%
    );
}
/* Modern Android — typically 20:9 (1080×2400), reduced for fit */
.phone-frame.android .phone-screen {
    aspect-ratio: 9 / 18;
}
/* iPhone 3G/3GS — 3:2 (320×480), thick side bezels */
.iphone-3g .phone-screen {
    aspect-ratio: 2 / 3;
    width: calc(100% - 16px);
    margin: 0 auto;
    border-radius: 2px;
}
/* iPhone 4/4S — 3:2 (640×960), thick side bezels */
.iphone-4 .phone-screen {
    aspect-ratio: 2 / 3;
    width: calc(100% - 14px);
    margin: 0 auto;
    border-radius: 2px;
}
/* iPhone 5/5S/SE — 16:9 (640×1136), slightly narrower bezels */
.iphone-5 .phone-screen {
    aspect-ratio: 9 / 16;
    width: calc(100% - 12px);
    margin: 0 auto;
    border-radius: 2px;
}
/* iPhone 6/7/8 — 16:9 (750×1334), visible side bezels (~65% screen-to-body) */
.iphone-classic .phone-screen {
    aspect-ratio: 9 / 16;
    width: calc(100% - 10px);
    margin: 0 auto;
    border-radius: 2px;
}
/* iPhone X/11 — 19.5:9 body, slightly reduced for fit */
.iphone-notch .phone-screen {
    aspect-ratio: 9 / 18;
}
/* iPhone 12–14 — 19.5:9 body, slightly reduced for fit */
.iphone-modern .phone-screen {
    aspect-ratio: 9 / 18;
}
/* iPhone 15/16 — 19.5:9 body, slightly reduced for fit */
.iphone-island .phone-screen {
    aspect-ratio: 9 / 18;
}
/* iPhone mini — 19.5:9 same as modern, width handled by frame */
.iphone-mini .phone-screen {
    aspect-ratio: 9 / 18;
}
/* iPad classic — landscape 4:3 */
.ipad-classic .phone-screen {
    aspect-ratio: 4 / 3;
    width: calc(100% - 14px);
    margin: 0 auto;
    border-radius: 2px;
}
/* iPad Air — landscape ~4.3:3 */
.ipad-air .phone-screen {
    aspect-ratio: 4.3 / 3;
}
/* iPad Pro — landscape ~4.3:3 (generic fallback) */
.ipad-pro .phone-screen {
    aspect-ratio: 4.3 / 3;
}
/* iPad Pro 12.9" classic (home button) — landscape 4:3 */
.ipad-pro-classic .phone-screen {
    aspect-ratio: 4 / 3;
    width: calc(100% - 16px);
    margin: 0 auto;
    border-radius: 2px;
}
/* iPad Pro 9.7"/10.5" (home button) — landscape 4:3 */
.ipad-pro-10 .phone-screen {
    aspect-ratio: 4 / 3;
    width: calc(100% - 12px);
    margin: 0 auto;
    border-radius: 2px;
}
/* iPad Pro 11" (2018-2022) — landscape ~4.3:3, narrow bezels */
.ipad-pro-11 .phone-screen {
    aspect-ratio: 4.3 / 3;
}
/* iPad Pro 12.9" (2018-2022) — landscape ~4.3:3 */
.ipad-pro-12 .phone-screen {
    aspect-ratio: 4.3 / 3;
}
/* iPad Pro 11" M4 (2024) — landscape ~4.3:3, OLED */
.ipad-pro-m4 .phone-screen {
    aspect-ratio: 4.3 / 3;
}
/* iPad Pro 13" M4 (2024) — landscape ~4.3:3, OLED */
.ipad-pro-m4-13 .phone-screen {
    aspect-ratio: 4.3 / 3;
}
/* iPad mini classic — landscape 4:3 */
.ipad-mini-classic .phone-screen {
    aspect-ratio: 4 / 3;
    width: calc(100% - 10px);
    margin: 0 auto;
    border-radius: 2px;
}
/* iPad mini 6+ — landscape ~4.3:3 */
.ipad-mini-modern .phone-screen {
    aspect-ratio: 4.3 / 3;
}
.phone-screen img {
    display: block;
    pointer-events: none;
}
.phone-screen-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    gap: 1rem;
    font-size: 0.85rem;
}
.phone-screen-placeholder .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
/* iOS boot screen — Apple logo + progress bar */
.ios-boot {
    background: #000;
    color: #fff;
    gap: 2rem;
}
.apple-logo {
    font-size: 3.5rem;
    opacity: 0.95;
    animation: ios-fade-in 1.2s ease-in-out;
}
.ios-progress-bar {
    width: 40%;
    height: 4px;
    background: #333;
    border-radius: 2px;
    overflow: hidden;
}
.ios-progress-fill {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 2px;
    animation: ios-loading 2.5s ease-in-out infinite;
}
@keyframes ios-fade-in {
    0% { opacity: 0; }
    100% { opacity: 0.95; }
}
@keyframes ios-loading {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(0%); }
    100% { transform: translateX(100%); }
}

/* Bottom navigation bar */
.phone-navbar {
    height: 40px;
    background: #1a3a3a;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-shrink: 0;
    border-top: none;
}
.android-navbar {
    border-top: 1px solid rgba(127,255,212,0.3);
}
.nav-btn {
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}
.nav-btn:active {
    transform: scale(0.9);
    background: rgba(255,255,255,0.15);
}
.nav-home { transform: scale(1.1); }

/* iOS home indicator */
.ios-navbar {
    height: 30px;
    background: #000;
    border-top: none;
}
.ios-home-indicator {
    width: 120px;
    height: 4px;
    background: #555;
    border-radius: 2px;
    cursor: pointer;
}
.ios-home-indicator:hover {
    background: #777;
}
.ios-home-indicator:active {
    background: #999;
}
/* iPhone classic (6/7/8) — taller bottom bar with circular home button */
.classic-navbar {
    height: 52px;
    background: #d1d1d6;
    border-top: none;
}
/* Darker navbar for black-faced iPhones */
.iphone-3g .classic-navbar,
.iphone-4 .classic-navbar {
    background: #222;
}
.iphone-3g .ios-home-button,
.iphone-4 .ios-home-button {
    border-color: #555;
    background: #333;
}
.iphone-3g .ios-home-button:active,
.iphone-4 .ios-home-button:active {
    background: #282828;
}
.ios-home-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #999;
    background: #c8c8cc;
    cursor: pointer;
    box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.15),
        0 1px 2px rgba(0,0,0,0.1);
}
.ios-home-button:active {
    background: #b8b8bc;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
}

/* ── Watch frame ───────────────────────────────── */
.watch-wrapper {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    gap: 0;
}
/* Wrist bands — wider, textured, premium silicone/leather feel */
.watch-band-top, .watch-band-bottom {
    width: 64px;
    height: 56px;
    background: linear-gradient(180deg, #2c2c30, #222225);
    border-left: 1px solid rgba(255,255,255,0.04);
    border-right: 1px solid rgba(0,0,0,0.3);
    position: relative;
}
.watch-band-top {
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, #333338, #2a2a2e);
}
.watch-band-bottom {
    border-radius: 0 0 10px 10px;
    background: linear-gradient(0deg, #252528, #2a2a2e);
}
/* Band texture — horizontal stitching lines */
.band-texture {
    position: absolute;
    inset: 8px 6px;
    background: repeating-linear-gradient(
        0deg,
        transparent, transparent 5px,
        rgba(255,255,255,0.03) 5px,
        rgba(255,255,255,0.03) 6px
    );
    border-radius: 2px;
}
/* Lugs — metal connectors between band and case */
.watch-lugs-top, .watch-lugs-bottom {
    width: 44px;
    height: 6px;
    background: linear-gradient(90deg, #555 0%, #888 30%, #999 50%, #888 70%, #555 100%);
    border-radius: 1px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
/* Watch case — base size bigger */
.watch-frame {
    width: 130px;
    height: 155px;
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
}
/* Watch display — larger, edge-to-edge feel */
.watch-screen {
    width: 108px;
    height: 128px;
    border-radius: 26px;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.8);
}
/* Watch face content */
.watch-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #aaa;
    width: 100%;
    padding: 8px;
}
.watch-face-time {
    font-size: 1.6rem;
    font-weight: 200;
    letter-spacing: 2px;
    color: #e0e0e0;
    font-family: -apple-system, 'Helvetica Neue', sans-serif;
}
.watch-face-complication {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    color: #8f8;
}
.complication-icon { font-size: 0.7rem; }
.complication-text { font-size: 0.6rem; color: #aaa; }
.watch-label { font-size: 0.5rem; color: #555; margin-top: 2px; }
/* Digital Crown — Apple Watch */
.watch-crown {
    position: absolute;
    right: -8px;
    top: 32%;
    width: 7px;
    height: 22px;
    background: linear-gradient(to bottom, #bbb, #888, #999);
    border-radius: 3px;
    border: 1px solid #666;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.4),
        1px 0 3px rgba(0,0,0,0.3);
}
/* Side button — below crown on Apple Watch */
.watch-side-btn {
    position: absolute;
    right: -7px;
    top: 52%;
    width: 6px;
    height: 12px;
    background: linear-gradient(to bottom, #aaa, #777);
    border-radius: 2px;
    border: 1px solid #666;
    box-shadow: 1px 0 2px rgba(0,0,0,0.2);
}
/* Galaxy Watch — two buttons on right side */
.watch-btn-top {
    position: absolute;
    right: -7px;
    top: 28%;
    width: 6px;
    height: 16px;
    background: linear-gradient(to bottom, #555, #333);
    border-radius: 2px;
    border: 1px solid #444;
    box-shadow: 1px 0 2px rgba(0,0,0,0.3);
}
.watch-btn-bottom {
    position: absolute;
    right: -7px;
    top: 50%;
    width: 6px;
    height: 16px;
    background: linear-gradient(to bottom, #555, #333);
    border-radius: 2px;
    border: 1px solid #444;
    box-shadow: 1px 0 2px rgba(0,0,0,0.3);
}
/* Pixel Watch — small nub crown */
.pixel-crown {
    width: 5px;
    height: 14px;
    right: -6px;
    top: 38%;
    background: linear-gradient(to bottom, #ddd, #bbb);
    border-color: #aaa;
}

/* ── Watch variant styles ────────────────────────── */
/* Apple Watch Series — rounded square, matte aluminium */
.watch-frame.apple-watch {
    border-radius: 36px;
    background: linear-gradient(145deg, #b8b8bc 0%, #a8a8ac 30%, #b0b0b4 60%, #a0a0a4 100%);
    border: 2.5px solid #9a9a9e;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -1px 0 rgba(0,0,0,0.12),
        0 2px 6px rgba(0,0,0,0.22),
        0 6px 16px rgba(0,0,0,0.24),
        0 12px 32px rgba(0,0,0,0.28);
}
.watch-frame.apple-watch .watch-screen {
    border-radius: 28px;
}
.watch-frame.apple-watch ~ .watch-band-top,
.watch-frame.apple-watch ~ .watch-band-bottom {
    background: linear-gradient(180deg, #2a2a2e, #222225);
    width: 60px;
}
.watch-frame.apple-watch ~ .watch-lugs-top,
.watch-frame.apple-watch ~ .watch-lugs-bottom {
    background: linear-gradient(90deg, #909094 0%, #b0b0b4 30%, #b8b8bc 50%, #b0b0b4 70%, #909094 100%);
}
/* Apple Watch SS — polished stainless steel, silver mirror finish */
.watch-frame.apple-watch-ss {
    border-radius: 36px;
    background: linear-gradient(145deg, #d0d0d6 0%, #b8b8c0 12%, #dcdce0 28%, #a8a8b2 45%, #c8c8d0 58%, #b0b0ba 72%, #d4d4da 88%, #bababf 100%);
    border: 2.5px solid #b0b0b8;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.65),
        inset 0 -1px 0 rgba(0,0,0,0.15),
        0 1px 2px rgba(255,255,255,0.12),
        0 2px 6px rgba(0,0,0,0.22),
        0 6px 16px rgba(0,0,0,0.25),
        0 12px 32px rgba(0,0,0,0.30);
}
/* Mirror-polish highlight streak */
.watch-frame.apple-watch-ss::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 14px;
    width: 38%;
    height: 28%;
    background: linear-gradient(155deg, rgba(255,255,255,0.32), transparent 60%);
    border-radius: 30px;
    pointer-events: none;
    z-index: 1;
}
.watch-frame.apple-watch-ss .watch-screen {
    border-radius: 28px;
}
.watch-frame.apple-watch-ss .watch-crown {
    background: linear-gradient(to bottom, #c8c8d0, #9a9aa4, #b8b8c0);
    border-color: #909098;
}
.watch-frame.apple-watch-ss .watch-side-btn {
    background: linear-gradient(to bottom, #c0c0c8, #909098);
    border-color: #909098;
}
.watch-frame.apple-watch-ss ~ .watch-band-top,
.watch-frame.apple-watch-ss ~ .watch-band-bottom {
    background: linear-gradient(180deg, #2a2a2e, #222225);
    width: 60px;
}
.watch-frame.apple-watch-ss ~ .watch-lugs-top,
.watch-frame.apple-watch-ss ~ .watch-lugs-bottom {
    background: linear-gradient(90deg, #a0a0a8 0%, #c8c8d0 30%, #d8d8de 50%, #c8c8d0 70%, #a0a0a8 100%);
}
/* Apple Watch Ultra — titanium, larger, rugged */
.watch-frame.apple-watch-ultra {
    width: 145px;
    height: 168px;
    border-radius: 30px;
    background: linear-gradient(145deg, #d4cfc0, #b8b2a2);
    border: 3px solid #a8a290;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.5),
        inset 0 -1px 0 rgba(0,0,0,0.1),
        0 2px 6px rgba(0,0,0,0.25),
        0 8px 20px rgba(0,0,0,0.25),
        0 14px 36px rgba(0,0,0,0.3);
}
.watch-frame.apple-watch-ultra .watch-screen {
    width: 118px;
    height: 138px;
    border-radius: 22px;
}
.watch-frame.apple-watch-ultra .watch-crown {
    width: 9px;
    height: 26px;
    right: -10px;
    background: linear-gradient(to bottom, #c5bf90, #a8a270);
    border-color: #908a70;
}
.watch-frame.apple-watch-ultra .watch-side-btn {
    right: -9px;
    width: 7px;
    height: 14px;
    background: linear-gradient(to bottom, #c0ba88, #a09a70);
    border-color: #908a70;
}
.watch-frame.apple-watch-ultra ~ .watch-band-top,
.watch-frame.apple-watch-ultra ~ .watch-band-bottom {
    width: 66px;
    background: linear-gradient(180deg, #3a3630, #2e2a24);
}
.watch-frame.apple-watch-ultra ~ .watch-lugs-top,
.watch-frame.apple-watch-ultra ~ .watch-lugs-bottom {
    width: 48px;
    background: linear-gradient(90deg, #a09880 0%, #c5bf90 50%, #a09880 100%);
}
/* Galaxy Watch — circular, dark, rotating bezel ring */
.watch-frame.galaxy-watch {
    width: 142px;
    height: 142px;
    border-radius: 50%;
    background: linear-gradient(145deg, #2a2a2e, #18181c);
    border: 4px solid #3a3a3e;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.4),
        0 0 0 2px #222,
        0 2px 6px rgba(0,0,0,0.3),
        0 8px 20px rgba(0,0,0,0.3),
        0 14px 36px rgba(0,0,0,0.35);
}
.watch-frame.galaxy-watch::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.05);
    pointer-events: none;
}
.watch-frame.galaxy-watch .watch-screen {
    width: 114px;
    height: 114px;
    border-radius: 50%;
}
.watch-frame.galaxy-watch ~ .watch-band-top,
.watch-frame.galaxy-watch ~ .watch-band-bottom {
    width: 56px;
    background: linear-gradient(180deg, #1e1e22, #18181c);
}
.watch-frame.galaxy-watch ~ .watch-lugs-top,
.watch-frame.galaxy-watch ~ .watch-lugs-bottom {
    width: 40px;
    background: linear-gradient(90deg, #333 0%, #555 50%, #333 100%);
}
/* Pixel Watch — circular, domed glass, polished aluminium */
.watch-frame.pixel-watch {
    width: 138px;
    height: 138px;
    border-radius: 50%;
    background: linear-gradient(145deg, #f0ece6, #d8d4cc);
    border: 3px solid #ccc8c0;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.6),
        inset 0 -2px 0 rgba(0,0,0,0.06),
        0 2px 6px rgba(0,0,0,0.15),
        0 8px 20px rgba(0,0,0,0.2),
        0 14px 36px rgba(0,0,0,0.25);
}
/* Domed glass effect */
.watch-frame.pixel-watch::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.12), transparent 60%);
    pointer-events: none;
    z-index: 1;
}
.watch-frame.pixel-watch .watch-screen {
    width: 112px;
    height: 112px;
    border-radius: 50%;
}
.watch-frame.pixel-watch ~ .watch-band-top,
.watch-frame.pixel-watch ~ .watch-band-bottom {
    width: 56px;
    background: linear-gradient(180deg, #e8e4de, #d4d0c8);
    border-color: rgba(0,0,0,0.08);
}
.watch-frame.pixel-watch ~ .watch-band-top .band-texture,
.watch-frame.pixel-watch ~ .watch-band-bottom .band-texture {
    background: repeating-linear-gradient(
        0deg,
        transparent, transparent 5px,
        rgba(0,0,0,0.03) 5px,
        rgba(0,0,0,0.03) 6px
    );
}
.watch-frame.pixel-watch ~ .watch-lugs-top,
.watch-frame.pixel-watch ~ .watch-lugs-bottom {
    width: 38px;
    background: linear-gradient(90deg, #c8c4bc 0%, #e0dcd4 50%, #c8c4bc 100%);
}
/* Wear OS generic — circular, dark matte */
.watch-frame.wear-os {
    width: 135px;
    height: 135px;
    border-radius: 50%;
    background: linear-gradient(145deg, #2c2c30, #151518);
    border: 3px solid #484848;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 2px 6px rgba(0,0,0,0.3),
        0 8px 20px rgba(0,0,0,0.3),
        0 14px 36px rgba(0,0,0,0.35);
}
.watch-frame.wear-os .watch-screen {
    width: 108px;
    height: 108px;
    border-radius: 50%;
}
.watch-frame.wear-os ~ .watch-band-top,
.watch-frame.wear-os ~ .watch-band-bottom {
    width: 56px;
}
.watch-frame.wear-os ~ .watch-lugs-top,
.watch-frame.wear-os ~ .watch-lugs-bottom {
    width: 38px;
    background: linear-gradient(90deg, #444 0%, #666 50%, #444 100%);
}

/* Side buttons (power, volume) */
.phone-side-buttons {
    position: absolute;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.phone-side-buttons.side-right {
    right: -36px;
}
.phone-side-buttons.side-left {
    left: -36px;
}
.side-btn {
    width: 28px;
    height: 28px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.side-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--accent);
}
.side-btn:active {
    transform: scale(0.9);
}
.power-btn {
    margin-bottom: 12px;
}
/* iOS power button — taller, like the real side button */
.ios-power {
    height: 48px;
    border-radius: 8px;
}
/* iOS action button */
.ios-action-btn {
    margin-bottom: 8px;
}

/* Stream info panel */
.stream-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.78rem;
}
.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.1rem 0;
    min-width: 0;
}
.info-row > span:last-child,
.info-row > .mono {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}
.info-label {
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

/* Interaction guide */
.interaction-guide {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.guide-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
}
.guide-icon {
    font-size: 0.9rem;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
}
.guide-item p {
    color: var(--text-muted);
    margin-top: 0;
    font-size: 0.68rem;
}