/* EdgeFabric Dashboard — Utility-first CSS */

:root {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-card: #1e293b;
    --bg-hover: #334155;
    --bg-input: #0f172a;
    --border: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #06b6d4;
    --radius: 8px;
    --radius-lg: 12px;
    --shadow: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.4);
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* ---- Layout ---- */
.app-shell { display: flex; min-height: 100vh; overflow-x: hidden; }

.sidebar {
    width: 220px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
}

.sidebar-brand {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, transparent 100%);
}

.brand-logo { width: 100%; max-width: 140px; height: auto; object-fit: contain; }

.sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: var(--bg-hover); }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }

.nav-section-title {
    margin: 0.7rem 0.5rem 0.3rem;
    padding: 0 0.25rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    padding-top: 0.45rem;
}

.nav-section-title:first-child {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

.sidebar-nav a, .sidebar-nav button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.15s;
    border: none;
    background: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.sidebar-nav a:hover, .sidebar-nav button:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidebar-nav a.active { background: var(--accent); color: #fff; }

.nav-icon {
    width: 1.05rem;
    height: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.05rem;
}

.nav-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.sidebar-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.env-badge {
    font-size: 0.65rem;
    padding: 0.1rem 0.45rem;
    border-radius: 9999px;
    background: rgba(6,182,212,0.15);
    color: #22d3ee;
    font-weight: 500;
    letter-spacing: 0.03em;
    border: 1px solid rgba(6,182,212,0.25);
}

.main-content {
    margin-left: 220px;
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 100vw;
    overflow-x: hidden;
}

.main-content h1 {
    font-size: 1.35rem;
    font-weight: 600;
}

.topbar {
    min-height: 56px;
    background: linear-gradient(90deg, var(--bg-secondary) 0%, rgba(30,41,59,0.95) 100%);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(8px);
}

.topbar-left { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; }
.topbar-title-stack {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    line-height: 1.08;
}
.topbar-title {
    font-weight: 600;
    background: linear-gradient(90deg, #22d3ee, #06b6d4, #0ea5e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.topbar-title-primary {
    font-size: 1.08rem;
    letter-spacing: 0.01em;
}
.topbar-title-secondary {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    -webkit-text-fill-color: unset;
    background-clip: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-title-short { display: none; }

.topbar-actions { display: flex; align-items: center; gap: 0.75rem; }
.topbar-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
}
.status-dot.online {
    background: var(--success);
    box-shadow: 0 0 6px rgba(34,197,94,0.5);
    animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.page { padding: 1.5rem; flex: 1; overflow-x: hidden; }

/* ---- Cards ---- */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.card-header h2 { font-size: 1rem; font-weight: 600; }

/* ---- Stats grid ---- */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.stat-value { font-size: 1.75rem; font-weight: 700; }
.stat-value.success { color: var(--success); }
.stat-value.warning { color: var(--warning); }
.stat-value.danger { color: var(--danger); }
.stat-value.info { color: var(--info); }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }
thead th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
tbody td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    vertical-align: middle;
}
tbody tr:hover { background: var(--bg-hover); }

/* ---- Badges / Status ---- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.badge.available { background: rgba(34,197,94,0.15); color: var(--success); }
.badge.available::before { background: var(--success); }
.badge.busy { background: rgba(245,158,11,0.15); color: var(--warning); }
.badge.busy::before { background: var(--warning); }
.badge.offline { background: rgba(100,116,139,0.15); color: var(--text-muted); }
.badge.offline::before { background: var(--text-muted); }
.badge.active { background: rgba(59,130,246,0.15); color: var(--accent); }
.badge.active::before { background: var(--accent); }
.badge.error, .badge.failed { background: rgba(239,68,68,0.15); color: var(--danger); }
.badge.error::before, .badge.failed::before { background: var(--danger); }
.badge.passed { background: rgba(34,197,94,0.15); color: var(--success); }
.badge.passed::before { background: var(--success); }
.badge.running { background: rgba(59,130,246,0.15); color: var(--accent); }
.badge.running::before { background: var(--accent); }
.badge.queued { background: rgba(100,116,139,0.15); color: var(--text-secondary); }
.badge.queued::before { background: var(--text-secondary); }

/* ---- OS icons ---- */
.os-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05em;
    height: 1.05em;
    vertical-align: -0.1em;
}

.os-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.os-icon-lg {
    width: 1.3em;
    height: 1.3em;
}

.os-icon-title {
    width: 1.1em;
    height: 1.1em;
}

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #dc2626; }
.btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Forms ---- */
.form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; }

input[type="text"], input[type="password"], input[type="email"], input[type="number"], select, textarea {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    transition: border-color 0.15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }

/* ---- Filters bar ---- */
.filters {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* ---- Log viewer ---- */
.log-viewer {
    background: #000;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.7;
    max-height: 500px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    color: #e2e8f0;
}
.log-line { padding: 1px 0; }
.log-line.info { color: var(--info); }
.log-line.warn { color: var(--warning); }
.log-line.error { color: var(--danger); }
.log-line.fatal { color: #ff6b6b; font-weight: 600; }
.log-line.debug { color: #8b9dc3; }
.log-line.verbose { color: var(--text-muted); }
.log-ts { color: var(--text-muted); margin-right: 0.5rem; min-width: 16ch; display: inline-block; }
.log-level { margin-right: 0.5rem; font-weight: 700; width: 1.5ch; display: inline-block; text-align: center; }
.log-tag { color: #a78bfa; margin-right: 0.25rem; }

/* ---- Video player ---- */
.video-container {
    background: #000;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    aspect-ratio: 16/9;
    max-width: 100%;
}
.video-container video { width: 100%; height: 100%; object-fit: contain; }
.video-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ---- Progress bar ---- */
.progress-bar {
    height: 8px;
    background: var(--bg-hover);
    border-radius: 999px;
    overflow: hidden;
}
.progress-bar .fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s;
}
.progress-bar .fill.success { background: var(--success); }
.progress-bar .fill.info { background: var(--accent); }

/* ---- Toast/Alert ---- */
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: 0.85rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.alert.error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: var(--danger); }
.alert.success { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); color: var(--success); }
.alert.info { background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.3); color: var(--accent); }

/* ---- Misc ---- */
.empty-state { text-align: center; padding: 3rem; color: var(--text-muted); }
.loading { display: flex; align-items: center; justify-content: center; padding: 2rem; color: var(--text-muted); }
.loading::after { content: ''; width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; margin-left: 0.5rem; }
@keyframes spin { to { transform: rotate(360deg); } }

.mono { font-family: var(--font-mono); font-size: 0.85em; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; display: inline-block; vertical-align: middle; }

/* ---- Login page ---- */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg-primary);
}
.login-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem 2rem;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-lg);
}
.login-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}
.login-logo-img {
    max-width: 200px;
    height: auto;
}
.login-card h1 { text-align: center; margin-bottom: 0.5rem; }
.login-card .subtitle { text-align: center; color: var(--text-muted); margin-bottom: 1.25rem; font-size: 0.9rem; }
.login-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.login-tab {
    flex: 1;
    padding: 0.6rem 0.75rem;
    background: var(--bg-secondary);
    color: var(--text-muted);
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
.login-tab:first-child { border-right: 1px solid var(--border); }
.login-tab:hover { background: var(--bg-hover); color: var(--text-primary); }
.login-tab.active {
    background: var(--accent);
    color: #0f172a;
    font-weight: 600;
}
.login-hint {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 0.75rem;
    opacity: 0.7;
}
.login-card .form-group { margin-bottom: 1rem; }
.login-card .btn { width: 100%; justify-content: center; margin-top: 0.5rem; }

/* ---- Grid layouts ---- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }

/* ---- Session viewer layout ---- */
.session-layout { display: grid; grid-template-columns: 1fr 350px; gap: 1.5rem; }

/* ---- Hamburger button (hidden on desktop) ---- */
.hamburger-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0.3rem;
    border-radius: var(--radius);
    transition: background 0.15s;
    flex-shrink: 0;
}
.hamburger-btn:hover { background: var(--bg-hover); }

.topbar-logo {
    display: none;
    height: 24px;
    width: auto;
    object-fit: contain;
}

/* ---- Sidebar backdrop overlay (mobile) ---- */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 45;
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}
.sidebar-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

/* ---- Responsive: Tablet (≤1024px) ---- */
@media (max-width: 1024px) {
    .sidebar {
        width: 184px;
    }
    .main-content {
        margin-left: 184px;
    }
    .session-layout {
        grid-template-columns: 1fr 280px;
    }
    .phone-frame {
        width: clamp(170px, 24vw, 250px);
    }
    .viewer-panel {
        flex: 0 0 260px;
        min-width: 220px;
    }
    .topbar-title {
        font-size: 0.85rem;
    }
    .page { padding: 1rem; }
}

/* ---- Responsive: Small tablet / large phone (≤768px) ---- */
@media (max-width: 768px) {
    .hamburger-btn {
        display: flex;
    }
    .topbar-logo {
        display: block;
    }
    .sidebar-backdrop {
        display: block;
    }

    .sidebar {
        width: 260px;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }

    .topbar {
        padding: 0.5rem 1rem;
        min-height: 48px;
    }
    .topbar-title {
        white-space: normal;
        line-height: 1.3;
    }
    .topbar-title-stack {
        gap: 0.02rem;
    }
    .topbar-title-primary {
        font-size: 0.88rem;
    }
    .topbar-title-secondary {
        font-size: 0.68rem;
        white-space: normal;
    }
    .topbar-status { display: none; }
    .topbar-actions { gap: 0.5rem; }
    .topbar-title-full { display: none; }
    .topbar-title-short { display: inline; }

    .page { padding: 0.75rem; }

    .main-content h1 {
        font-size: 1.15rem;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    .stat-value { font-size: 1.35rem; }

    .grid-2, .grid-3 {
        grid-template-columns: 1fr;
    }
    .session-layout {
        grid-template-columns: 1fr;
    }

    .viewer-layout {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
    .viewer-panel {
        flex: none;
        width: 100%;
        min-width: 0;
        max-height: none;
        overflow: visible;
        margin-left: 0;
    }
    .phone-wrapper {
        align-self: center;
        margin-left: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .draggable-shell {
        width: 100%;
    }
    .drag-icon-btn {
        min-width: 26px;
        padding: 0.14rem 0.28rem;
    }
    .phone-wrapper.landscape-orientation {
        /* Keep layout safe near hamburger/sidebar overlay on small screens */
        transform: none;
        margin: 0;
        min-height: min(72vw, 340px);
        justify-content: center;
    }
    .phone-wrapper.portrait-for-tablet {
        transform: none;
        margin: 0;
        min-height: min(72vw, 340px);
        justify-content: center;
    }
    .phone-frame {
        width: clamp(220px, 65vw, 320px);
        max-height: 60svh;
        transform: none;
    }
    .phone-wrapper.landscape-orientation .phone-frame {
        transform: rotate(90deg);
        transform-origin: center center;
    }
    .phone-wrapper.portrait-for-tablet .phone-frame {
        transform: rotate(90deg);
        transform-origin: center center;
    }
    .phone-frame:hover {
        transform: none;
    }
    .phone-wrapper.landscape-orientation .phone-frame:hover {
        transform: rotate(90deg);
    }
    .phone-wrapper.portrait-for-tablet .phone-frame:hover {
        transform: rotate(90deg);
    }
    /* Side buttons become horizontal bar below phone */
    .phone-side-buttons {
        position: static;
        flex-direction: row;
        gap: 12px;
        margin-top: 8px;
        justify-content: center;
    }
    .phone-side-buttons.side-left {
        display: none;
    }
    .phone-side-buttons.side-right {
        right: auto;
    }
    .side-btn {
        width: 36px;
        height: 36px;
    }
    .power-btn {
        margin-bottom: 0;
    }
    .ios-power {
        height: 36px;
    }
    .main-content h1 {
        font-size: 0.9rem;
        margin-bottom: 0.5rem !important;
    }

    .device-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    table { font-size: 0.8rem; }
    thead th { padding: 0.5rem 0.5rem; font-size: 0.7rem; }
    tbody td { padding: 0.5rem 0.5rem; font-size: 0.8rem; }

    .card {
        padding: 1rem;
        border-radius: var(--radius);
    }

    .filters {
        flex-direction: column;
        align-items: stretch;
    }
    .filters input, .filters select { width: 100%; }

    .log-viewer {
        font-size: 0.7rem;
        padding: 0.75rem;
        max-height: 400px;
    }
    .log-ts { min-width: auto; }

    .login-card { margin: 1rem; padding: 1.5rem; }
}

/* ---- Responsive: Phone (≤480px) ---- */
@media (max-width: 480px) {
    html { font-size: 13px; }

    .topbar {
        padding: 0.4rem 0.75rem;
        min-height: 44px;
    }
    .topbar-title {
        font-size: 0.7rem;
    }

    .page { padding: 0.5rem; }

    .main-content h1 {
        font-size: 1.05rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .stat-card { padding: 0.75rem 1rem; }
    .stat-value { font-size: 1.2rem; }
    .stat-label { font-size: 0.7rem; }

    .device-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .device-card {
        padding: 0.75rem;
    }
    .device-card-icon { font-size: 1.5rem; margin-bottom: 0.25rem; }
    .device-card-name { font-size: 0.85rem; }

    .phone-frame {
        width: min(calc(100vw - 1rem), 300px);
        max-height: 55svh;
        transform: none;
    }
    .phone-frame:hover {
        transform: none;
    }
    .phone-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 0;
    }
    .drag-icon-btn {
        min-width: 24px;
        padding: 0.12rem 0.24rem;
    }
    .phone-wrapper.landscape-orientation {
        transform: none;
        margin: 0;
        min-height: min(82vw, 300px);
        justify-content: center;
    }
    .phone-wrapper.portrait-for-tablet {
        transform: none;
        margin: 0;
        min-height: min(82vw, 300px);
        justify-content: center;
    }
    .phone-wrapper.landscape-orientation .phone-frame {
        transform: rotate(90deg);
        transform-origin: center center;
    }
    .phone-wrapper.portrait-for-tablet .phone-frame {
        transform: rotate(90deg);
        transform-origin: center center;
    }
    .phone-side-buttons {
        position: static;
        flex-direction: row;
        gap: 10px;
        margin-top: 6px;
        justify-content: center;
    }
    .phone-side-buttons.side-left {
        display: none;
    }
    .phone-side-buttons.side-right {
        right: auto;
    }
    .side-btn {
        width: 32px;
        height: 32px;
        font-size: 0.7rem;
    }
    .power-btn { margin-bottom: 0; }
    .ios-power { height: 32px; }
    .viewer-layout {
        gap: 0.5rem;
        padding: 0;
    }
    .viewer-panel {
        max-height: none;
        overflow: visible;
        margin-left: 0;
        width: 100%;
    }
    .viewer-panel .card {
        padding: 0.4rem 0.5rem;
    }
    .viewer-panel .card-header h2 {
        font-size: 0.75rem;
    }
    .stream-info {
        font-size: 0.68rem;
        gap: 0.05rem;
    }
    .info-row {
        padding: 0.05rem 0;
    }
    .info-label {
        font-size: 0.6rem;
    }
    .bezel-select {
        font-size: 0.68rem;
        max-width: 140px;
    }
    .page { padding: 0.25rem; }
    .main-content h1 {
        font-size: 0.85rem;
        margin-bottom: 0.25rem !important;
    }
    /* Hide interaction guide on small phones */
    .interaction-guide { display: none; }

    .card { padding: 0.75rem; }
    .card-header { margin-bottom: 0.75rem; padding-bottom: 0.5rem; }
    .card-header h2 { font-size: 0.9rem; }

    .btn { padding: 0.4rem 0.75rem; font-size: 0.8rem; }
    .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; }

    .table-wrap { margin: 0; overflow-x: auto; }
    table { min-width: 500px; }

    .log-viewer {
        font-size: 0.65rem;
        max-height: 350px;
        line-height: 1.5;
    }

    .badge { font-size: 0.7rem; padding: 0.15rem 0.45rem; }

    .truncate { max-width: 120px; }

    .login-card {
        margin: 0.5rem;
        padding: 1.25rem;
    }

    .empty-state { padding: 2rem 1rem; font-size: 0.85rem; }

    .interaction-guide { gap: 0.5rem; }
    .guide-item { font-size: 0.75rem; }
    .guide-icon { font-size: 0.95rem; width: 24px; }
}


/* ── 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;
}

/* ---- IoT Designer ---- */
.iot-designer-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}
.iot-designer-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.iot-designer-header h1 {
    font-size: 1.2rem;
    font-weight: 600;
    flex: 1;
    margin: 0;
}
.iot-designer-actions {
    display: flex;
    gap: 0.5rem;
}
.iot-designer-layout {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 1rem;
    align-items: start;
}
@media (max-width: 768px) {
    .iot-designer-layout {
        grid-template-columns: 1fr;
    }
}
.iot-designer-preview {
    position: sticky;
    top: 1rem;
}
.board-preview-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background:
        radial-gradient(circle at 18% 12%, rgba(255,255,255,0.08), transparent 24%),
        radial-gradient(circle at 84% 78%, rgba(34,197,94,0.08), transparent 28%),
        linear-gradient(180deg, #08121b, #040a10);
    border-radius: var(--radius);
    border: 1px solid rgba(148, 163, 184, 0.12);
}
.board-shell-svg {
    width: 210px;
    height: auto;
    filter: drop-shadow(0 18px 28px rgba(0,0,0,0.42));
}
.controller-specs {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.spec-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
}
.spec-label {
    color: var(--text-muted);
}
.spec-value {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.78rem;
}
.iot-designer-config {}

/* Sensor category checklist */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.form-group label {
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.sensor-categories {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.sensor-category {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.sensor-category-header {
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sensor-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.5rem 0.7rem;
}
.sensor-checkbox {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    transition: background 0.12s;
    user-select: none;
}
.sensor-checkbox:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.sensor-checkbox input[type="checkbox"] {
    accent-color: var(--accent);
    width: 13px;
    height: 13px;
    cursor: pointer;
}
.virtual-iot-events-panel {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.virtual-iot-events-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.virtual-iot-events-header h3 {
    margin: 0 0 0.2rem;
    font-size: 0.95rem;
    color: #dbeafe;
}
.virtual-iot-events-header p,
.virtual-iot-event-footnote,
.virtual-iot-events-empty {
    margin: 0;
    font-size: 0.76rem;
    color: #8daac4;
    line-height: 1.45;
}
.virtual-iot-events-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.virtual-iot-event-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: linear-gradient(180deg, rgba(14, 22, 34, 0.92), rgba(8, 14, 23, 0.96));
}
.virtual-iot-event-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}
.virtual-iot-event-heading {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.virtual-iot-event-description {
    min-height: 68px;
    resize: vertical;
}
.virtual-iot-event-steps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.virtual-iot-event-step-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)           /* sensor */
        minmax(0, 1.1fr)            /* action */
        minmax(0, 0.95fr)           /* start */
        minmax(0, 0.95fr)           /* end */
        minmax(0, 0.75fr)           /* duration */
        auto;                       /* delete */
    gap: 0.4rem;
    align-items: end;
    min-width: 0;
}
.virtual-iot-event-step-row > * {
    min-width: 0;
}
.virtual-iot-event-step-row .form-control,
.virtual-iot-event-step-row .form-select {
    min-width: 0;
    width: 100%;
    padding: 0.32rem 0.45rem;
    font-size: 0.78rem;
}
.virtual-iot-event-step-row > button:last-child {
    padding: 0.32rem 0.55rem;
    font-size: 0.78rem;
}
/* A single value cell (start / end / duration) — tag above, widget below */
.virtual-iot-value-cell {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    min-width: 0;
}
.virtual-iot-value-tag {
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7f98b4;
    font-weight: 600;
}
/* Input + unit suffix live inside this wrapper */
.virtual-iot-value-group {
    display: flex;
    align-items: stretch;
    border-radius: 8px;
    overflow: hidden;
    min-width: 0;
}
.virtual-iot-value-group > .form-control {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.virtual-iot-value-group > .form-control:only-child {
    border-radius: 8px;
}
.virtual-iot-value-unit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.4rem;
    font-size: 0.64rem;
    font-weight: 600;
    color: #cfe3f7;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-left: none;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
/* Vector (Vec3 / LatLng) — lay axes side-by-side */
.virtual-iot-value-group.is-vector {
    gap: 0.25rem;
    border-radius: 0;
    overflow: visible;
    flex-wrap: wrap;
}
.virtual-iot-value-group.is-vector > .virtual-iot-value-axis {
    flex: 1 1 0;
    min-width: 44px;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.virtual-iot-value-group.is-vector > .virtual-iot-value-axis > .form-control {
    border-radius: 8px;
    padding: 0.32rem 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
}
.virtual-iot-value-group.is-vector .virtual-iot-value-axis-label {
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    color: #94a9c2;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}
.virtual-iot-value-group.is-vector > .virtual-iot-value-unit {
    flex: 0 0 auto;
    align-self: stretch;
    border-radius: 8px;
    border-left: 1px solid rgba(148, 163, 184, 0.22);
    margin-top: 12px; /* align with inputs, skip axis labels */
}
.virtual-iot-event-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

/* ---- Virtual IoT Viewer ---- */
.virtual-iot-viewer {
    flex: 1;
    min-width: 0;
}
.virtual-iot-viewer.is-full-window {
    position: fixed;
    inset: 0;
    z-index: 9999;
    margin: 0;
    width: 100vw;
    height: 100vh;
    max-height: none;
    display: flex;
    flex-direction: column;
}
.virtual-iot-viewer.is-full-window .card-header {
    position: sticky;
    top: 0;
    z-index: 2;
}
.virtual-iot-viewer.is-full-window .virtual-iot-workbench {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}
body.virtual-iot-full-window .sidebar,
body.virtual-iot-full-window .sidebar-backdrop,
body.virtual-iot-full-window .topbar {
    display: none !important;
}
body.virtual-iot-full-window .main-content {
    margin-left: 0 !important;
}
.virtual-iot-board-svg {
    width: min(360px, 100%);
    height: auto;
    filter: drop-shadow(0 12px 28px rgba(0,0,0,0.45));
}
.virtual-iot-board-live-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.virtual-iot-board-live-overlay .live-led {
    pointer-events: auto;
    cursor: pointer;
}
.virtual-iot-board-live-overlay .live-led-glow {
    transition: opacity 0.18s ease-out, r 0.18s ease-out;
}
.virtual-iot-workbench {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    background:
        radial-gradient(circle at top, rgba(34, 197, 94, 0.08), transparent 26%),
        radial-gradient(circle at 15% 25%, rgba(14, 165, 233, 0.12), transparent 22%),
        linear-gradient(180deg, rgba(7, 16, 29, 0.98), rgba(4, 11, 18, 0.99));
}
.virtual-iot-workbench-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.virtual-iot-events-rack,
.virtual-iot-runtime-log {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: linear-gradient(180deg, rgba(12, 20, 32, 0.94), rgba(8, 14, 22, 0.98));
}
.virtual-iot-section-caption {
    font-size: 0.75rem;
    color: #8daac4;
    line-height: 1.45;
}
.virtual-iot-event-trigger-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.virtual-iot-event-trigger {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.22rem;
    min-width: 170px;
    padding: 0.7rem 0.85rem;
    border-radius: 14px;
    border: 1px solid rgba(96, 165, 250, 0.18);
    background: linear-gradient(180deg, rgba(20, 33, 50, 0.96), rgba(10, 18, 29, 0.98));
    color: #dbeafe;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.virtual-iot-event-trigger:hover {
    transform: translateY(-1px);
    border-color: rgba(125, 211, 252, 0.42);
    box-shadow: 0 10px 20px rgba(8, 15, 24, 0.22);
}
.virtual-iot-event-trigger span {
    font-size: 0.72rem;
    color: #8daac4;
    line-height: 1.4;
    text-align: left;
}
.virtual-iot-meta-chip {
    min-width: 150px;
    padding: 0.7rem 0.9rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.15);
    background: linear-gradient(180deg, rgba(19, 31, 48, 0.92), rgba(10, 19, 31, 0.96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.virtual-iot-meta-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8daac4;
}
.virtual-iot-physical-scene {
    position: relative;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(320px, 380px) minmax(260px, 1fr);
    gap: 1rem;
    min-height: 760px;
    padding: 1.25rem;
    border-radius: 24px;
    border: 1px solid rgba(125, 211, 252, 0.10);
    background:
        linear-gradient(180deg, rgba(5, 12, 21, 0.92), rgba(3, 9, 16, 0.98)),
        repeating-linear-gradient(90deg, rgba(148,163,184,0.03) 0, rgba(148,163,184,0.03) 1px, transparent 1px, transparent 92px);
    overflow: hidden;
}
/* Canvas variant: items position themselves freely (absolute) inside this rect. */
.virtual-iot-physical-scene-canvas {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 640px;
    overflow: hidden;
}
.virtual-iot-scene-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0.1rem 0.55rem;
    color: #8daac4;
    width: 100%;
}
.virtual-iot-scene-item {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 14px;
    box-shadow: none;
    overflow: visible;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.virtual-iot-scene-item:hover,
.virtual-iot-scene-item:focus-within {
    background: rgba(8, 15, 26, 0.32);
    border-color: rgba(148, 163, 184, 0.14);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}
.virtual-iot-scene-item.is-dragging,
.virtual-iot-scene-item.is-resizing {
    z-index: 3;
    background: rgba(8, 15, 26, 0.6);
    border-color: rgba(125, 211, 252, 0.4);
    box-shadow: 0 18px 36px rgba(56, 189, 248, 0.22);
}
.virtual-iot-scene-drag-handle {
    height: 14px;
    flex: 0 0 auto;
    background: transparent;
    border-bottom: 1px solid transparent;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    user-select: none;
    opacity: 0;
    transition: opacity 0.18s ease, background 0.18s ease;
}
.virtual-iot-scene-item:hover .virtual-iot-scene-drag-handle,
.virtual-iot-scene-item:focus-within .virtual-iot-scene-drag-handle,
.virtual-iot-scene-item.is-dragging .virtual-iot-scene-drag-handle {
    opacity: 1;
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.10), rgba(15, 23, 42, 0.18));
    border-bottom-color: rgba(148, 163, 184, 0.12);
}
.virtual-iot-scene-drag-handle:active {
    cursor: grabbing;
}
.virtual-iot-scene-drag-grip {
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: rgba(148, 163, 184, 0.45);
    box-shadow: 0 2px 0 rgba(148, 163, 184, 0.2), 0 4px 0 rgba(148, 163, 184, 0.1);
}
.virtual-iot-scene-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.virtual-iot-scene-body > .virtual-iot-module-card {
    flex: 1 1 auto;
    height: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
.virtual-iot-scene-body > .virtual-iot-controller-shell {
    flex: 1 1 auto;
    height: 100%;
    margin: 0;
}
.virtual-iot-scene-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    touch-action: none;
    background:
        linear-gradient(135deg, transparent 50%, rgba(148, 163, 184, 0.45) 50%, rgba(148, 163, 184, 0.45) 62%, transparent 62%, transparent 72%, rgba(148, 163, 184, 0.32) 72%, rgba(148, 163, 184, 0.32) 82%, transparent 82%);
    border-bottom-right-radius: 14px;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.virtual-iot-scene-item:hover .virtual-iot-scene-resize-handle,
.virtual-iot-scene-item:focus-within .virtual-iot-scene-resize-handle,
.virtual-iot-scene-item.is-resizing .virtual-iot-scene-resize-handle {
    opacity: 0.85;
}
.virtual-iot-scene-resize-handle:hover {
    opacity: 1;
}
.virtual-iot-physical-wires {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
.virtual-iot-module-column {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 1rem;
}
.virtual-iot-controller-stage {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.virtual-iot-controller-shell {
    width: 100%;
    height: 100%;
    padding: 0.55rem 0.7rem 0.7rem;
    border-radius: 18px;
    border: 1px solid rgba(0, 0, 0, 0.55);
    background:
        linear-gradient(180deg, rgba(28, 38, 54, 0.78) 0%, rgba(10, 17, 28, 0.82) 100%);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 1px rgba(0, 0, 0, 0.5),
        inset 0 -2px 6px rgba(0, 0, 0, 0.5),
        0 6px 14px rgba(0, 0, 0, 0.35);
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.5rem;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.virtual-iot-controller-shell:hover,
.virtual-iot-controller-shell:focus-within,
.virtual-iot-scene-item:hover .virtual-iot-controller-shell,
.virtual-iot-scene-item:focus-within .virtual-iot-controller-shell {
    border-color: rgba(96, 165, 250, 0.35);
    box-shadow:
        0 0 0 1px rgba(96, 165, 250, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1px 1px rgba(0, 0, 0, 0.5),
        inset 0 -2px 6px rgba(0, 0, 0, 0.5),
        0 12px 22px rgba(0, 0, 0, 0.4),
        0 0 18px rgba(96, 165, 250, 0.18);
}
.virtual-iot-controller-led-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: rgba(4, 8, 14, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -1px 1px rgba(0, 0, 0, 0.5);
    align-self: center;
}
.virtual-iot-led {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #142132;
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.55);
    transition: all 0.18s ease;
}
.virtual-iot-led.is-on {
    box-shadow: 0 0 12px currentColor, 0 0 22px color-mix(in srgb, currentColor 55%, transparent), inset 0 0 6px rgba(255,255,255,0.25);
}
.virtual-iot-led-power { color: #5ee47d; }
.virtual-iot-led-activity { color: #67e8f9; }
.virtual-iot-led-alert { color: #fb7185; }
.virtual-iot-led-link { color: #fbbf24; }
.virtual-iot-controller-board-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto;
    min-height: 160px;
    margin: 0;
    padding: 0.4rem;
    border-radius: 12px;
    background:
        radial-gradient(circle at center, rgba(59, 130, 246, 0.12), transparent 55%),
        linear-gradient(180deg, rgba(4, 9, 16, 0.85), rgba(2, 6, 12, 0.92));
    border: 1px solid rgba(0, 0, 0, 0.55);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 -1px 2px rgba(0, 0, 0, 0.5);
}
.virtual-iot-controller-board-wrap .virtual-iot-board-holder {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 220px;
    height: auto;
    max-width: 100%;
}
.virtual-iot-controller-board-wrap .virtual-iot-board-holder > svg.virtual-iot-board-svg {
    width: min(360px, 100%);
    height: auto;
    max-width: 100%;
    display: block;
}
.virtual-iot-controller-board-wrap .virtual-iot-board-holder > .virtual-iot-board-live-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.virtual-iot-controller-readout {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin: 0;
}
.virtual-iot-controller-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f1f9ff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}
.virtual-iot-controller-caption {
    font-size: 0.6rem;
    color: rgba(141, 170, 196, 0.7);
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.virtual-iot-controller-status-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.virtual-iot-status-pill {
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid rgba(0, 0, 0, 0.5);
    background: linear-gradient(180deg, rgba(20, 30, 44, 0.85), rgba(8, 14, 22, 0.85));
    color: rgba(141, 170, 196, 0.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -1px 1px rgba(0, 0, 0, 0.5);
    transition: color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.virtual-iot-status-pill.is-hot {
    color: #fde68a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 8px rgba(253, 230, 138, 0.45);
}
.virtual-iot-status-pill.is-alert {
    color: #fca5a5;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 8px rgba(252, 165, 165, 0.45);
}
.virtual-iot-status-pill.is-linked {
    color: #86efac;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 8px rgba(134, 239, 172, 0.45);
}
/* Virtual IoT module/instrument visuals are defined in style/instruments.css */
.virtual-iot-module-card[data-kind="env"]       { --module-accent: #22c55e; }
.virtual-iot-module-card[data-kind="air"]       { --module-accent: #fbbf24; }
.virtual-iot-module-card[data-kind="light"]     { --module-accent: #facc15; }
.virtual-iot-module-card[data-kind="proximity"] { --module-accent: #67e8f9; }
.virtual-iot-module-card[data-kind="power"]     { --module-accent: #34d399; }
.virtual-iot-module-card[data-kind="audio"]     { --module-accent: #38bdf8; }
.virtual-iot-module-card[data-kind="location"]  { --module-accent: #f87171; }
.virtual-iot-module-card[data-kind="digital"]   { --module-accent: #60a5fa; }
.virtual-iot-module-card[data-kind="network"]   { --module-accent: #c084fc; }
.virtual-iot-module-card[data-kind="motion"]    { --module-accent: #a78bfa; }

.virtual-iot-section-title {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    color: #dbeafe;
    letter-spacing: 0.02em;
}
.virtual-iot-runtime-log-table {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
}
.virtual-iot-runtime-log-row {
    display: grid;
    grid-template-columns: 92px minmax(120px, 1fr) minmax(110px, 1fr) minmax(160px, 1.1fr);
    gap: 0.65rem;
    align-items: center;
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.44);
    border: 1px solid rgba(148, 163, 184, 0.08);
    font-size: 0.75rem;
}
.virtual-iot-runtime-log-row.is-event {
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.12), rgba(15, 23, 42, 0.5) 70%);
    border-color: rgba(192, 132, 252, 0.35);
    box-shadow: inset 2px 0 0 rgba(192, 132, 252, 0.7);
}
.virtual-iot-runtime-log-empty,
.virtual-iot-runtime-log-source {
    color: #8daac4;
    font-size: 0.74rem;
}
.virtual-iot-runtime-log-source.is-event {
    color: #e9d5ff;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.virtual-iot-runtime-log-sensor {
    color: #dbeafe;
}
.virtual-iot-runtime-log-value,
.virtual-iot-runtime-log-ts {
    color: #7dd3fc;
}
.virtual-iot-wiring-svg {
    width: 100%;
    height: auto;
    background:
        radial-gradient(circle at top left, rgba(148, 163, 184, 0.08), transparent 24%),
        radial-gradient(circle at 80% 24%, rgba(34,197,94,0.08), transparent 18%),
        linear-gradient(180deg, rgba(8, 18, 30, 0.96), rgba(5, 13, 20, 0.99));
    border: 1px solid #21364d;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.virtual-iot-draggable-node {
    cursor: grab;
    transition: filter 0.12s ease, transform 0.12s ease;
}
.virtual-iot-draggable-node:active {
    cursor: grabbing;
}
.virtual-iot-draggable-node:hover {
    filter: drop-shadow(0 8px 18px rgba(14, 165, 233, 0.28));
}
@media (max-width: 1180px) {
    .virtual-iot-event-step-row {
        grid-template-columns:
            minmax(0, 1fr) minmax(0, 1fr) auto;
        grid-auto-rows: auto;
    }
    .virtual-iot-event-step-row > .virtual-iot-value-cell:nth-child(3),
    .virtual-iot-event-step-row > .virtual-iot-value-cell:nth-child(4),
    .virtual-iot-event-step-row > .virtual-iot-value-cell:nth-child(5) {
        grid-column: span 1;
    }
    .virtual-iot-event-step-row > .form-select:nth-child(1) {
        grid-column: 1 / 2;
    }
    .virtual-iot-event-step-row > .form-select:nth-child(2) {
        grid-column: 2 / 3;
    }
    .virtual-iot-event-step-row > button:last-child {
        grid-row: 1;
        grid-column: 3;
        align-self: start;
    }
}
@media (max-width: 960px) {
    .virtual-iot-event-step-row,
    .virtual-iot-runtime-log-row {
        grid-template-columns: 1fr;
    }
    .virtual-iot-event-footer,
    .virtual-iot-events-header {
        flex-direction: column;
        align-items: stretch;
    }
    .virtual-iot-physical-scene {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .virtual-iot-physical-scene-canvas {
        overflow-x: auto;
    }
    .virtual-iot-physical-wires {
        display: none;
    }
    .virtual-iot-controller-stage {
        order: -1;
    }
    .virtual-iot-controller-board-wrap {
        min-height: 200px;
    }
}

/* ─── Available Backends table ─────────────────────────────────────── */
.backends-page-header {
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.backends-page-header .page-subtitle {
    margin: 0.35rem 0 0;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.backend-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}
.backend-kpi-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(18, 29, 44, 0.7), rgba(11, 20, 32, 0.9));
    padding: 0.55rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.backend-kpi-card span {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.backend-kpi-card strong {
    font-size: 1.08rem;
    color: var(--text-primary);
}

.backends-layout {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
}
.backends-create-card {
    position: sticky;
    top: 68px;
}
.backends-create-body {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.backends-list-card {
    min-width: 0;
}
.backends-list-header {
    align-items: center;
    gap: 0.7rem;
}
.backends-list-hint {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.backends-table { width: 100%; table-layout: fixed; }
.backends-table col.col-name     { width: 14%; }
.backends-table col.col-ctrls    { width: 15%; }
.backends-table col.col-provider { width: 7%;  }
.backends-table col.col-region   { width: 7%;  }
.backends-table col.col-agent    { width: 11%; }
.backends-table col.col-status   { width: 9%;  }
.backends-table col.col-vm       { width: 9%; }
.backends-table col.col-shell    { width: 8%; }
.backends-table col.col-actions  { width: 20%; }

.backends-table thead th,
.backends-table tbody td {
    vertical-align: middle;
}
.backends-table th.th-actions,
.backends-table td.cell-actions {
    text-align: right;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}
.backends-table td.cell-actions .row-actions,
.backends-table td.cell-actions .row-actions .btn {
    position: relative;
    z-index: 3;
    pointer-events: auto;
}
.backends-table td.cell-name strong {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.backends-table td.cell-mono {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--text-muted);
    overflow: hidden;
    /* table-layout:fixed — let the col width govern */
    max-width: 0;
}
.backends-table td.cell-mono .cell-mono-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.backends-table td.cell-ctrls .chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.backends-table td.cell-ctrls .chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    font-size: 0.72rem;
    line-height: 1.4;
    border-radius: 999px;
    background: var(--bg-hover, rgba(255,255,255,0.04));
    color: var(--text-muted);
    border: 1px solid var(--border);
    white-space: nowrap;
}

.backends-table .row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    flex-wrap: nowrap;
}
.backends-table .row-actions .btn {
    white-space: nowrap;
    line-height: 1;
}

@media (max-width: 1180px) {
    .backend-kpis {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
    .backends-layout {
        grid-template-columns: 1fr;
    }
    .backends-create-card {
        position: static;
    }
}

@media (max-width: 900px) {
    .backends-page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .backends-list-hint {
        margin-left: 0;
    }
    .backends-table { table-layout: auto; min-width: 720px; }
    .backends-table td.cell-mono { max-width: none; }
}