/* ============================================
   JustAndroid Emulators - App Shell Style
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.emulators-body {
    background: #0d1117;
    color: #e6edf3;
    font-family: 'Plus Jakarta Sans', sans-serif;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== HEADER ===== */
.emu-header {
    background: #161b22;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    height: 56px;
    flex-shrink: 0;
    padding: 0 24px;
}
.emu-header-inner {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 32px;
}
.emu-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #f0f6fc;
    font-weight: 800;
    font-size: 1rem;
}
.emu-logo .fa-android { color: #10b981; font-size: 1.2rem; }
.emu-product-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #8b949e;
    margin-left: 4px;
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,0.12);
}
.emu-topnav { display: flex; align-items: center; gap: 4px; flex: 1; }
.emu-topnav-link {
    color: #8b949e;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
}
.emu-topnav-link:hover { color: #e6edf3; background: rgba(255,255,255,0.06); }
.emu-topnav-link.active { color: #10b981; background: rgba(16,185,129,0.1); }
.emu-header-right { margin-left: auto; }
.emu-avatar {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 800; color: white; cursor: pointer;
}

/* ===== BANNER ===== */
.emu-banner {
    background: rgba(31,111,235,0.15);
    border-bottom: 1px solid rgba(31,111,235,0.3);
    padding: 10px 24px;
    font-size: 0.875rem;
    color: #c9d1d9;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.emu-banner .fa-clock { color: #58a6ff; }
.emu-banner a { color: #58a6ff; text-decoration: none; font-weight: 600; }
.emu-banner a:hover { text-decoration: underline; }

/* ===== SHELL LAYOUT ===== */
.emu-shell {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* ===== SIDEBAR ===== */
.emu-sidebar {
    width: 240px;
    background: #161b22;
    border-right: 1px solid rgba(255,255,255,0.07);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
    padding-bottom: 16px;
}
.sidebar-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 12px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 8px;
}
.sidebar-tab {
    flex: 1;
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.08);
    background: transparent;
    color: #8b949e;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}
.sidebar-tab.active {
    background: #10b981;
    color: #fff;
    border-color: #10b981;
}
.sidebar-tab:not(.active):hover { background: rgba(255,255,255,0.05); color: #e6edf3; }

.sidebar-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #484f58;
    padding: 12px 16px 4px;
}
.sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    color: #8b949e;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.15s;
    cursor: pointer;
}
.sidebar-item:hover { color: #e6edf3; background: rgba(255,255,255,0.04); }
.sidebar-item.active {
    color: #10b981;
    background: rgba(16,185,129,0.08);
    border-left-color: #10b981;
}
.sidebar-item i:first-child { width: 16px; text-align: center; font-size: 0.875rem; }
.sidebar-bottom { margin-top: auto; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 8px; }

/* ===== MAIN AREA ===== */
.emu-main {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: #0d1117;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.emu-view { display: none; flex: 1; width: 100%; min-height: 0; }
.emu-view.active { display: flex; flex-direction: column; min-height: 0; }
#view-quickstart { overflow-y: auto; }
#view-get-started { overflow-y: auto; }

/* ===== FULLSCREEN SESSION MODE ===== */
body.session-active .emu-header,
body.session-active .emu-banner,
body.session-active .emu-sidebar {
    display: none !important;
}
body.session-active .emu-shell {
    height: 100vh !important;
    width: 100vw !important;
}
body.session-active .emu-main {
    height: 100vh !important;
    width: 100vw !important;
    overflow: hidden !important;
}

/* ===== GET STARTED VIEW ===== */
.gs-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 48px;
    padding: 60px 48px;
    align-items: start;
    max-width: 1100px;
}
.gs-icon-title { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.gs-icon { font-size: 1.4rem; color: #58a6ff; }
.gs-title { font-size: 1.5rem; font-weight: 700; color: #f0f6fc; line-height: 1.3; }
.gs-subtitle { color: #8b949e; font-size: 0.95rem; line-height: 1.7; margin-bottom: 32px; text-align: center; max-width: 500px; }
.gs-features { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }
.gs-feature { display: flex; gap: 12px; align-items: flex-start; }
.gs-feature > i { color: #58a6ff; font-size: 1rem; margin-top: 3px; flex-shrink: 0; }
.gs-feature strong { display: block; color: #f0f6fc; font-size: 0.9rem; margin-bottom: 4px; }
.gs-feature p { color: #8b949e; font-size: 0.82rem; line-height: 1.5; }
.gs-trust { display: flex; align-items: center; gap: 10px; color: #8b949e; font-size: 0.85rem; margin-bottom: 32px; }
.gs-trust i { font-size: 1.1rem; }
.gs-actions { display: flex; gap: 16px; }
.btn-gs-secondary {
    padding: 10px 24px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15); background: transparent;
    color: #e6edf3; font-size: 0.9rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s;
}
.btn-gs-secondary:hover { background: rgba(255,255,255,0.06); }
.btn-gs-primary {
    padding: 10px 32px; border-radius: 8px;
    background: #1f6feb; border: none;
    color: white; font-size: 0.9rem; font-weight: 700; cursor: pointer;
    transition: background 0.2s;
}
.btn-gs-primary:hover { background: #388bfd; }

/* Preview Card */
.gs-preview-card {
    background: linear-gradient(135deg, #1a2035, #0d1b3e);
    border: 1px solid rgba(88,166,255,0.2);
    border-radius: 16px;
    overflow: hidden;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gs-preview-inner { text-align: center; padding: 40px 32px; }
.gs-preview-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; }
.gs-preview-logo i { font-size: 2.5rem; color: #10b981; }
.gs-preview-logo span { font-size: 1.6rem; font-weight: 800; color: #f0f6fc; }
.gs-preview-label { color: #8b949e; font-size: 0.9rem; margin-bottom: 16px; }
.gs-preview-badge { display: inline-block; border: 1px solid rgba(255,255,255,0.15); border-radius: 20px; padding: 6px 16px; font-size: 0.8rem; color: #8b949e; margin-bottom: 20px; }
.gs-preview-play {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
    color: #f0f6fc; padding: 10px 20px; border-radius: 8px; font-size: 0.875rem;
    font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.gs-preview-play:hover { background: rgba(255,255,255,0.14); }

/* ===== DEVICE SELECT VIEW ===== */
.device-select-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}
.ds-title { font-size: 1.3rem; font-weight: 700; color: #f0f6fc; }
.ds-subtitle { color: #8b949e; font-size: 0.85rem; }
.ds-header-actions { display: flex; gap: 10px; }
.ds-action-btn {
    padding: 7px 16px; border-radius: 7px; font-size: 0.85rem; font-weight: 600;
    border: 1px solid rgba(255,255,255,0.15); background: transparent; color: #e6edf3;
    cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.2s;
}
.ds-action-btn:hover { background: rgba(255,255,255,0.06); }
.ds-action-btn.primary { background: #1f6feb; border-color: #1f6feb; color: #fff; }
.ds-action-btn.primary:hover { background: #388bfd; }
.ds-action-btn.green { background: #10b981; border-color: #10b981; color: #fff; }
.ds-action-btn.green:hover { background: #0d9f6e; }

.ds-layout { display: flex; flex: 1; overflow: hidden; min-height: 0; }
.ds-sources {
    width: 280px; flex-shrink: 0; border-right: 1px solid rgba(255,255,255,0.07);
    overflow-y: auto; padding: 16px 0;
}
.ds-source-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #484f58; padding: 4px 16px 12px; }
.ds-source-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    color: #8b949e; text-decoration: none; font-size: 0.875rem; font-weight: 500;
    transition: all 0.15s; cursor: pointer; position: relative;
}
.ds-source-item:hover { background: rgba(255,255,255,0.04); color: #e6edf3; }
.ds-source-item.active { color: #e6edf3; background: rgba(255,255,255,0.06); }
.ds-source-item > i:first-child { font-size: 1.1rem; width: 20px; text-align: center; color: #58a6ff; flex-shrink: 0; }
.ds-source-item > div { flex: 1; }
.ds-source-item > div strong { display: block; color: #f0f6fc; font-size: 0.875rem; margin-bottom: 2px; }
.ds-source-item > div span { font-size: 0.78rem; color: #8b949e; }
.ds-chevron { color: #484f58; font-size: 0.75rem; }
.ds-badge-new { background: rgba(16,185,129,0.2); color: #10b981; font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; }

.ds-device-panel { flex: 1; overflow: hidden; display: flex; flex-direction: column; background: #0d1117; min-height: 0; position: relative; }
#panelDeviceSelect { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
#panelAppUpload { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; background: #0d1117; z-index: 10; }
.ds-device-tabs { display: flex; gap: 0; border-bottom: 1px solid rgba(255,255,255,0.07); padding: 0 20px; flex-shrink: 0; background: #161b22; }
.ds-dtab {
    padding: 14px 20px; background: none; border: none; border-bottom: 2px solid transparent;
    color: #8b949e; font-size: 0.875rem; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; gap: 7px; margin-bottom: -1px; transition: all 0.2s;
}
.ds-dtab.active { color: #10b981; border-bottom-color: #10b981; }
.ds-dtab:not(.active):hover { color: #e6edf3; }

/* Split Device Body */
.ds-device-body { display: flex; flex: 1; overflow: hidden; }

/* Brand Sidebar */
.ds-brand-sidebar {
    width: 220px; flex-shrink: 0; border-right: 1px solid rgba(255,255,255,0.07);
    display: flex; flex-direction: column; background: #161b22; overflow-y: auto;
}
.ds-sim-tabs {
    display: flex; border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0;
}
.ds-sim-tab {
    flex: 1; padding: 12px 10px; background: transparent; border: none;
    border-bottom: 2px solid transparent; color: #8b949e; font-size: 0.8rem;
    font-weight: 600; cursor: pointer; text-align: center; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 4px;
}
.ds-sim-tab.active { color: #58a6ff; border-bottom-color: #58a6ff; }
.ds-sim-tab:not(.active):hover { color: #e6edf3; }
.ds-sim-pro { background: rgba(16,185,129,0.2); color: #10b981; font-size: 0.65rem; padding: 1px 4px; border-radius: 4px; font-weight: 800; }

.ds-brand-list { display: flex; flex-direction: column; padding: 8px 0; }
.ds-brand-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; color: #8b949e; text-decoration: none; font-size: 0.875rem;
    font-weight: 600; transition: all 0.15s; border-left: 3px solid transparent;
}
.ds-brand-item:hover { background: rgba(255,255,255,0.04); color: #e6edf3; }
.ds-brand-item.active {
    color: #58a6ff; background: rgba(88,166,255,0.08); border-left-color: #58a6ff;
}
.ds-brand-item i { font-size: 0.75rem; color: #484f58; }
.ds-brand-item.active i { color: #58a6ff; }

/* Device Grid Container */
.ds-device-grid-container { flex: 1; overflow-y: auto; background: #0d1117; padding: 24px; }
.ds-device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.device-card {
    background: #161b22; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
    padding: 16px 20px; display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.device-card:hover { border-color: rgba(88,166,255,0.4); background: #1c2230; transform: translateY(-2px); }
.device-card.selected { border-color: #f59e0b; background: rgba(245,158,11,0.08); box-shadow: 0 0 0 1px #f59e0b; }
.device-name { font-size: 0.95rem; font-weight: 700; color: #f0f6fc; }
.device-api { font-size: 0.85rem; font-weight: 700; color: #8b949e; }

/* ===== QUICKSTART VIEW ===== */
#view-quickstart { padding: 0; }
.qs-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 28px; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.qs-title { font-size: 1.4rem; font-weight: 700; color: #f0f6fc; }
.qs-meta { font-size: 0.82rem; color: #8b949e; display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.qs-actions { display: flex; gap: 10px; }

.qs-card { margin: 24px; background: #161b22; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 28px; flex: 1; }
.qs-card-title { font-size: 1.2rem; font-weight: 700; color: #f0f6fc; margin-bottom: 8px; }
.qs-card-sub { color: #8b949e; font-size: 0.9rem; margin-bottom: 20px; }
.qs-card-hint { font-size: 0.9rem; font-weight: 600; color: #e6edf3; margin-bottom: 16px; }

.qs-layout { display: flex; gap: 0; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; overflow: hidden; }
.qs-frameworks { width: 220px; flex-shrink: 0; border-right: 1px solid rgba(255,255,255,0.08); }
.qs-fw {
    display: flex; align-items: center; gap: 10px; padding: 13px 16px;
    color: #8b949e; text-decoration: none; font-size: 0.875rem; font-weight: 600;
    transition: all 0.15s; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.qs-fw:hover { background: rgba(255,255,255,0.04); color: #e6edf3; }
.qs-fw.active { color: #10b981; background: rgba(16,185,129,0.08); }
.qs-fw-arrow { margin-left: auto; font-size: 0.75rem; }
.qs-fw-missing { color: #484f58; }

.qs-guides { flex: 1; padding: 20px; }
.qs-guide-section { margin-bottom: 24px; }
.qs-guide-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #484f58; margin-bottom: 14px; }
.qs-lang-grid { display: flex; gap: 24px; flex-wrap: wrap; }
.qs-lang {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: #8b949e; text-decoration: none; font-size: 0.8rem; font-weight: 600;
    transition: color 0.2s;
}
.qs-lang i { font-size: 1.8rem; }
.qs-lang:hover { color: #10b981; }
.qs-fw-guide-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.qs-fw-guide {
    color: #8b949e; text-decoration: none; font-size: 0.82rem; font-weight: 500;
    padding: 4px 0; transition: color 0.15s;
}
/* ===== UPLOAD APP PANEL ===== */
.upload-app-container {
    padding: 36px 48px; display: flex; flex-direction: column; gap: 36px; max-width: 900px; margin: 0 auto; width: 100%;
}
.upload-box {
    border: 2px dashed rgba(88,166,255,0.3); background: rgba(22,27,34,0.6);
    border-radius: 24px; padding: 56px 36px; display: flex; flex-direction: column;
    align-items: center; text-align: center; transition: all 0.2s ease;
    box-shadow: 0 16px 32px rgba(0,0,0,0.2);
}
.upload-box:hover {
    border-color: #58a6ff; background: rgba(22,27,34,0.9); box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.upload-icon { font-size: 3.5rem; color: #58a6ff; margin-bottom: 20px; animation: floatIcon 3s infinite ease-in-out; }
@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.upload-title { font-size: 1.5rem; font-weight: 700; color: #f0f6fc; margin-bottom: 8px; }
.upload-subtitle { font-size: 0.95rem; color: #8b949e; margin-bottom: 28px; }
.upload-or { display: flex; align-items: center; width: 200px; margin: 0 auto 28px; color: #484f58; font-size: 0.75rem; font-weight: 700; }
.upload-or::before, .upload-or::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.08); margin: 0 10px; }
.upload-btn {
    background: #1f6feb; color: white; font-size: 0.95rem; font-weight: 600; padding: 12px 28px;
    border-radius: 12px; cursor: pointer; display: flex; align-items: center; gap: 10px;
    transition: background 0.2s, transform 0.1s; box-shadow: 0 8px 16px rgba(31,111,235,0.3);
}
.upload-btn:hover { background: #388bfd; transform: translateY(-1px); }
.upload-btn:active { transform: translateY(0); }

.upload-info-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.u-card {
    background: #161b22; border: 1px solid rgba(255,255,255,0.08); border-radius: 16px;
    padding: 24px; display: flex; align-items: flex-start; gap: 18px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.u-card i { font-size: 1.5rem; color: #10b981; padding: 12px; background: rgba(16,185,129,0.1); border-radius: 12px; }
.u-card h4 { font-size: 1.05rem; font-weight: 700; color: #f0f6fc; margin-bottom: 8px; }
.u-card p { font-size: 0.85rem; color: #8b949e; line-height: 1.5; }

/* ===== BOOTING VIEW ===== */
.booting-layout { display: flex; height: 100%; overflow: hidden; background: #202124; width: 100%; }
.booting-main { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; }
.booting-screen { background: #202124; display: flex; align-items: center; justify-content: center; }
.phone-cable { width: 14px; height: 50px; background: #1a1a1a; border-left: 2px solid #333; border-right: 2px solid #333; margin: 0 auto; border-radius: 0 0 4px 4px; box-shadow: inset 0 10px 10px rgba(0,0,0,0.8); }

.boot-animation { display: flex; gap: 12px; align-items: center; justify-content: center; }
.boot-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; animation: bootBounce 1.4s infinite ease-in-out both; }
.boot-dot.yellow { background: #fbbc05; animation-delay: -0.32s; }
.boot-dot.green { background: #34a853; animation-delay: -0.16s; }
.boot-dot.red { background: #ea4335; animation-delay: -0.08s; }
.boot-dot.blue { background: #4285f4; }

@keyframes bootBounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}

.booting-sidepanel { width: 340px; flex-shrink: 0; background: #1c1d20; border-left: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; padding: 24px 20px; font-family: 'JetBrains Mono', monospace; }
.booting-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 16px; margin-bottom: 20px; }
.booting-title { font-size: 0.75rem; font-weight: 800; color: #94a3b8; letter-spacing: 0.08em; }
.btn-cancel-session { background: #dc2626; color: white; font-weight: 700; font-size: 0.75rem; font-family: 'Plus Jakarta Sans', sans-serif; padding: 6px 12px; border-radius: 6px; border: none; cursor: pointer; transition: background 0.2s; }
.btn-cancel-session:hover { background: #ef4444; }
.booting-logs { display: flex; flex-direction: column; gap: 10px; font-size: 0.8rem; color: #e2e8f0; }

/* ===== SESSION VIEW ===== */
.session-layout { display: flex; height: 100%; overflow: hidden; background: #21262d; }
.session-sidebar { width: 220px; flex-shrink: 0; background: #161b22; border-right: 1px solid rgba(255,255,255,0.07); overflow-y: auto; display: flex; flex-direction: column; }
.session-action {
    display: flex; align-items: center; gap: 12px; padding: 12px 18px;
    color: #8b949e; text-decoration: none; font-size: 0.85rem; font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,0.04); transition: all 0.15s;
}
.session-action:hover { background: rgba(255,255,255,0.05); color: #e6edf3; }
.session-action i:first-child { font-size: 1rem; width: 20px; text-align: center; color: #58a6ff; }
.sub-arrow { margin-left: auto; font-size: 0.75rem; color: #484f58; }
.session-pro { background: #10b981; color: #0d1117; font-size: 0.65rem; font-weight: 800; padding: 2px 6px; border-radius: 4px; margin-left: auto; }
.session-dot { width: 6px; height: 6px; background: #58a6ff; border-radius: 50%; margin-left: auto; display: inline-block; }

.session-screen-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #21262d; }
.session-toolbar {
    display: flex; align-items: center; gap: 8px; padding: 10px 20px; background: #161b22;
    border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; flex-wrap: wrap;
}
.session-tool {
    padding: 8px 14px; border-radius: 8px; font-size: 0.8rem; font-weight: 600;
    border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
    color: #8b949e; cursor: pointer; display: flex; align-items: center; gap: 8px;
    transition: all 0.2s;
}
.session-tool:hover { background: rgba(255,255,255,0.09); color: #e6edf3; }
.session-tool.active { background: rgba(88,166,255,0.15); border-color: rgba(88,166,255,0.3); color: #58a6ff; }
.session-tool.danger { border-color: rgba(239,68,68,0.4); color: #ef4444; margin-left: auto; }
.session-tool.danger:hover { background: rgba(239,68,68,0.15); color: #f87171; }

.session-tool-group { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 12px; border-left: 1px solid rgba(255,255,255,0.07); border-right: 1px solid rgba(255,255,255,0.07); }
.zoom-btns { display: flex; gap: 4px; }
.z-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); color: #8b949e; width: 24px; height: 22px; border-radius: 4px; font-size: 0.85rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.z-btn:hover { background: rgba(255,255,255,0.15); color: #e6edf3; }
.tool-label { font-size: 0.65rem; color: #8b949e; font-weight: 600; text-transform: uppercase; }

.session-workspace { flex: 1; display: flex; align-items: flex-start; justify-content: center; gap: 64px; padding: 24px; overflow: auto; min-height: 0; }

/* Phone Column */
.session-phone-container { display: flex; flex-direction: column; align-items: center; margin: auto 0; }
.session-phone {
    width: 300px; height: 620px; background: #12121f; border: 12px solid #2d2d44; border-radius: 36px;
    box-shadow: 0 25px 70px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.05);
    overflow: hidden; display: flex; flex-direction: column; position: relative;
    max-height: calc(100vh - 140px); transition: all 0.3s ease;
}
.booting-phone { background: #171717; border-color: #2b2b2b; }

/* Device Camera Notch / Punch Hole */
.phone-camera-notch {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    width: 14px; height: 14px; background: #000; border-radius: 50%;
    z-index: 20; box-shadow: inset 0 -2px 4px rgba(255,255,255,0.2);
}

/* Dynamic Brand Frames */
.session-phone.frame-google {
    border-color: #202124; border-radius: 38px; width: 300px; height: 630px;
    box-shadow: 0 25px 70px rgba(0,0,0,0.8), inset 0 0 0 2px #3c4043;
}
.session-phone.frame-google .phone-camera-notch { width: 16px; height: 16px; top: 14px; }

.session-phone.frame-samsung {
    border-color: #333a42; border-radius: 18px; width: 310px; height: 640px;
    box-shadow: 0 25px 70px rgba(0,0,0,0.8), inset 0 0 0 2px #535a64;
}
.session-phone.frame-samsung .phone-camera-notch { width: 12px; height: 12px; top: 10px; }

.session-phone.frame-oneplus,
.session-phone.frame-xiaomi,
.session-phone.frame-vivo,
.session-phone.frame-oppo,
.session-phone.frame-motorola,
.session-phone.frame-realme,
.session-phone.frame-huawei {
    border-color: #1e293b; border-radius: 42px; width: 296px; height: 626px;
    box-shadow: 0 25px 70px rgba(0,0,0,0.8), inset 0 0 0 2px #334155;
}
.session-phone.frame-oneplus .phone-camera-notch,
.session-phone.frame-xiaomi .phone-camera-notch { width: 14px; height: 14px; top: 12px; left: 28px; transform: none; }

.session-phone.frame-apple,
.session-phone.frame-ios {
    border-color: #1c1c1e; border-radius: 48px; width: 306px; height: 636px;
    box-shadow: 0 25px 70px rgba(0,0,0,0.8), inset 0 0 0 2px #48484a;
}
.session-phone.frame-apple .phone-camera-notch,
.session-phone.frame-ios .phone-camera-notch { width: 80px; height: 24px; top: 10px; left: 50%; transform: translateX(-50%); border-radius: 12px; background: #000; }
.phone-status-bar { display: flex; justify-content: space-between; padding: 8px 16px; font-size: 0.75rem; color: #8b949e; background: #0d1117; font-weight: 600; flex-shrink: 0; }
.phone-icons { display: flex; align-items: center; gap: 6px; }
.phone-screen { background: #12121f; flex: 1; overflow-y: auto; padding: 20px 16px; display: flex; flex-direction: column; justify-content: space-between; min-height: 0; }

/* Android Home Screen */
.phone-screen.android-home { background: linear-gradient(145deg, #0f172a, #1e1b4b, #31103f); color: #f0f6fc; font-family: 'Plus Jakarta Sans', sans-serif; padding: 20px 14px; }
.home-clock-widget { padding: 12px 6px; margin-bottom: 16px; }
.home-time { font-size: 2.5rem; font-weight: 800; line-height: 1; margin-bottom: 6px; letter-spacing: -0.03em; }
.home-date { font-size: 0.8rem; color: #94a3b8; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.home-weather { color: #f1f5f9; display: flex; align-items: center; gap: 4px; font-weight: 700; }
.home-weather i { color: #eab308; }

.home-search-widget { background: rgba(255,255,255,0.12); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.2); border-radius: 24px; padding: 10px 16px; display: flex; align-items: center; gap: 12px; margin-bottom: 24px; box-shadow: 0 8px 20px rgba(0,0,0,0.2); flex-shrink: 0; }
.google-icon { color: #f1f5f9; font-size: 1.1rem; }
.search-text { font-size: 0.8rem; color: #94a3b8; flex: 1; font-weight: 500; }
.search-icons { display: flex; align-items: center; gap: 10px; color: #94a3b8; font-size: 0.9rem; }

.home-app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 10px; margin-bottom: auto; }
.home-app { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: transform 0.15s; }
.home-app:hover { transform: scale(1.1); }
.app-icon { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: white; box-shadow: 0 6px 14px rgba(0,0,0,0.25); }
.home-app span { font-size: 0.65rem; font-weight: 600; color: #e2e8f0; text-shadow: 0 2px 4px rgba(0,0,0,0.5); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* App Icon Colors */
.google-blue { background: linear-gradient(135deg, #ef4444, #dc2626); }
.google-photo { background: linear-gradient(135deg, #3b82f6, #10b981); }
.google-play { background: linear-gradient(135deg, #10b981, #06b6d4); }
.google-map { background: linear-gradient(135deg, #22c55e, #16a34a); }
.google-drive { background: linear-gradient(135deg, #eab308, #3b82f6); }
.google-yt { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.google-calc { background: linear-gradient(135deg, #64748b, #475569); }
.google-settings { background: linear-gradient(135deg, #475569, #1e293b); }

.home-dock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; background: rgba(255,255,255,0.08); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.15); border-radius: 22px; padding: 12px 8px; margin-top: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.3); flex-shrink: 0; }
.dock-phone { background: linear-gradient(135deg, #22c55e, #16a34a); }
.dock-msg { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.dock-chrome { background: linear-gradient(135deg, #eab308, #ef4444); }
.dock-camera { background: linear-gradient(135deg, #64748b, #334155); }

.phone-nav-bar { display: flex; justify-content: space-around; padding: 12px; background: #1a1a2e; color: #484f58; font-size: 1.1rem; flex-shrink: 0; }
.session-timer { margin-top: 16px; display: flex; align-items: center; gap: 8px; color: #10b981; font-weight: 700; font-size: 0.95rem; background: rgba(16,185,129,0.12); padding: 6px 18px; border-radius: 20px; border: 1px solid rgba(16,185,129,0.3); align-self: flex-start; }

/* Promo Card Column */
.session-promo-container { display: flex; align-items: center; margin: auto 0; }
.session-promo-card { width: 300px; background: #161b22; border: 2px dashed rgba(255,255,255,0.15); border-radius: 28px; padding: 36px 28px; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 25px 50px rgba(0,0,0,0.5); }
.promo-close { position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.08); border: none; color: #8b949e; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; font-size: 1rem; }
.promo-close:hover { background: rgba(255,255,255,0.2); color: white; }
.promo-icon { width: 58px; height: 58px; border-radius: 50%; background: #1f6feb; color: white; font-size: 1.6rem; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; box-shadow: 0 10px 28px rgba(31,111,235,0.45); }
.promo-title { font-size: 1.25rem; font-weight: 700; color: #f0f6fc; margin-bottom: 14px; line-height: 1.3; }
.promo-desc { font-size: 0.88rem; color: #8b949e; line-height: 1.6; margin-bottom: 24px; }
.promo-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; width: 100%; text-align: left; }
.promo-item { font-size: 0.82rem; color: #e6edf3; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.03); padding: 10px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); font-weight: 500; }
.promo-item i { color: #10b981; font-size: 0.9rem; }
.promo-btn { background: #1f6feb; color: white; font-weight: 700; font-size: 0.9rem; padding: 14px 22px; border-radius: 10px; border: none; cursor: pointer; width: 100%; transition: background 0.2s; box-shadow: 0 8px 24px rgba(31,111,235,0.35); }
.promo-btn:hover { background: #388bfd; }

/* DevTools */
.session-devtools { width: 320px; flex-shrink: 0; border-left: 1px solid rgba(255,255,255,0.07); display: flex; flex-direction: column; background: #161b22; }
.devtools-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 0.85rem; font-weight: 700; color: #8b949e; background: #0d1117; }
.devtools-actions { display: flex; align-items: center; gap: 8px; }
.devtools-icon-btn { background: none; border: none; color: #8b949e; cursor: pointer; padding: 4px; font-size: 0.9rem; transition: color 0.15s; }
.devtools-icon-btn:hover { color: #e6edf3; }
.devtools-subrow { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,0.07); background: #161b22; flex-wrap: wrap; }
.devtools-select { background: #0d1117; border: 1px solid rgba(255,255,255,0.1); color: #8b949e; padding: 4px 8px; border-radius: 6px; font-size: 0.78rem; font-weight: 500; outline: none; }
.devtools-small-btn { background: #0d1117; border: 1px solid rgba(255,255,255,0.1); color: #8b949e; padding: 4px 10px; border-radius: 6px; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; }
.devtools-small-btn.active { background: rgba(88,166,255,0.15); border-color: rgba(88,166,255,0.3); color: #58a6ff; }
.devtools-search { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,0.07); background: #0d1117; }
.devtools-search i { color: #484f58; font-size: 0.85rem; }
.devtools-search-input { flex: 1; background: none; border: none; outline: none; color: #e6edf3; font-size: 0.82rem; }
.devtools-regex { font-size: 0.78rem; color: #8b949e; display: flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 500; }
.devtools-log { flex: 1; overflow-y: auto; padding: 12px; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; background: #0d1117; }
.log-line { padding: 4px 8px; border-radius: 4px; margin-bottom: 4px; line-height: 1.5; }
.log-line.info { color: #8b949e; }
.log-line.warn { color: #e3b341; background: rgba(227,179,65,0.08); border-left: 2px solid #e3b341; }
.log-line.error { color: #ff7b72; background: rgba(255,123,114,0.08); border-left: 2px solid #ff7b72; }

/* Right Extension Bar */
.session-ext-bar { width: 56px; flex-shrink: 0; background: #0d1117; border-left: 1px solid rgba(255,255,255,0.07); display: flex; flex-direction: column; align-items: center; padding: 16px 0; gap: 16px; }
.ext-btn { width: 40px; height: 40px; border-radius: 10px; background: transparent; border: none; color: #8b949e; font-size: 1.2rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; transition: all 0.15s; }
.ext-btn:hover { background: rgba(255,255,255,0.05); color: #e6edf3; }
.ext-btn.active { background: rgba(88,166,255,0.15); color: #58a6ff; }
.ext-pro { position: absolute; bottom: -2px; right: -2px; background: #10b981; color: #0d1117; font-size: 0.55rem; font-weight: 800; padding: 2px 4px; border-radius: 4px; }