/* ── Reset — tryit.html is fully self-contained ─────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
html { scroll-behavior: smooth; }
body {
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-orient: vertical; -webkit-box-direction: normal;
-ms-flex-direction: column; flex-direction: column;
overflow: hidden !important;
font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
background: #0f1117; color: #d4d8f0;
-webkit-font-smoothing: antialiased;
}
a { color: #4f9cf9; text-decoration: none; }
a:hover { text-decoration: underline; }
/* ── W3Schools-style Run bar ─────────────────────────────────────── */
.w3s-run-bar {
display: flex; align-items: center; justify-content: space-between;
background: rgba(26,115,232,.08);
padding: 0 16px; height: 42px; flex-shrink: 0;
border-bottom: 2px solid #1a73e8;
box-shadow: 0 2px 12px rgba(26,115,232,.15);
}
.w3s-run-bar-title {
color: rgba(255,255,255,.55); font-size: 13px; font-weight: 500;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.w3s-run-bar-title span { color: #fff; font-weight: 700; }
.w3s-run-bar-title em { color: #4f9cf9; font-style: normal; font-size: 11px; }
.tryit-status-banner {
display: flex; align-items: center; justify-content: center;
padding: 8px 14px; font-size: 12px; font-weight: 600;
color: #e0f2fe; background: linear-gradient(90deg, rgba(26,115,232,.95), rgba(6,182,212,.95));
border-bottom: 1px solid rgba(255,255,255,.16);
box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
position: relative; z-index: 3;
}
.tryit-status-banner.warning {
background: linear-gradient(90deg, rgba(244,114,182,.95), rgba(249,115,22,.95));
}
.tryit-status-banner.info {
background: linear-gradient(90deg, rgba(14,165,233,.95), rgba(59,130,246,.95));
}
.tryit-status-copy { max-width: 100%; text-align: center; }
.tryit-fallback-editor {
display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 12px; background: rgba(255,255,255,.03); border: 1px dashed rgba(255,255,255,.16); border-radius: 10px;
}
.tryit-fallback-note {
font-size: 12px; color: #cbd5e1; line-height: 1.5;
}
.tryit-fallback-textarea {
width: 100%; height: 100%; min-height: 220px; resize: none; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 12px; background: rgba(2,6,23,.75); color: #f8fafc; font-family: 'Fira Code', Consolas, monospace; font-size: 13px;
}
/* ── Design tokens */
:root {
--bg: #1a1b2e;
--surface: #1e2038;
--raised: #252742;
--border: #2e3150;
--text: #d4d8f0;
--accent: #1a73e8;
--accent-h: #1557b0;
--accent-glow: rgba(26,115,232,.3);
--run: #1a73e8;
--run-dark: #1557b0;
--status-bg: #1a73e8;
--err-bg: #c72e2e;
/* VS Code aliases kept for any external references */
--vsc-bg: var(--bg);
--vsc-sidebar: var(--surface);
--vsc-tabbar: var(--raised);
--vsc-border: var(--border);
--vsc-text: var(--text);
--vsc-accent: var(--accent);
--vsc-run: var(--run);
--vsc-run-h: var(--run-dark);
--vsc-status: var(--status-bg);
}
/* ── Announcement bar ────────────────────────────────────────────────── */
.announcement-bar {
background: linear-gradient(90deg, #8b5cf6 0%, #1a73e8 50%, #06b6d4 100%);
color: #fff; text-align: center; padding: 9px 44px 9px 16px;
font-size: 12.5px; font-weight: 500; position: relative; flex-shrink: 0;
}
.announcement-bar strong { font-weight: 700; }
.announcement-bar a { color: #fff; text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.announcement-bar .ann-close {
position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
background: none; border: none; color: rgba(255,255,255,.75); cursor: pointer;
font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 4px;
transition: background .18s;
}
.announcement-bar .ann-close:hover { background: rgba(255,255,255,.2); color: #fff; }
.announcement-bar.hidden, .ann-hidden .announcement-bar { display: none !important; }
/* ── Slim editor footer ─────────────────────────────────────────────── */
.editor-footer {
flex-shrink: 0; background: rgba(10,12,24,.97);
border-top: 1px solid rgba(26,115,232,.15);
padding: 7px 16px;
display: flex; align-items: center; justify-content: space-between;
font-size: 11.5px; color: rgba(255,255,255,.32);
}
.editor-footer a {
color: rgba(255,255,255,.42); margin-left: 14px;
text-decoration: none; transition: color .15s;
}
.editor-footer a:hover { color: #4f9cf9; }
/* ── Nav bar ────────────────────────────────────────────────────────── */
.top-nav {
background: rgba(15,17,35,0.98) !important;
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
height: 48px !important; min-height: 48px !important;
display: flex !important; align-items: center !important;
justify-content: space-between !important;
padding: 0 16px !important; flex-shrink: 0 !important;
z-index: 100; border-bottom: 1px solid rgba(26,115,232,.2);
box-shadow: 0 1px 20px rgba(0,0,0,.5), 0 0 0 1px rgba(26,115,232,.06);
}
.top-nav .logo {
font-size: 17px; font-weight: 800;
color: #fff !important; display: flex; align-items: center; gap: 8px;
white-space: nowrap; text-decoration: none !important;
}
.logo-accent {
background: linear-gradient(135deg, #4f9cf9, #a78bfa);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.logo-badge {
font-size: 9px; font-weight: 700; text-transform: uppercase;
background: linear-gradient(135deg, #1a73e8, #8b5cf6); color: #fff;
padding: 2px 7px; border-radius: 4px; letter-spacing: .6px;
}
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
color: rgba(255,255,255,.55) !important; font-size: 13px; font-weight: 500;
padding: 5px 11px; border-radius: 5px; text-decoration: none !important;
transition: background .15s, color .15s;
}
.nav-links a:hover, .nav-links a.active {
color: #fff !important; background: #1a73e8;
}
.nav-dropdown { position: relative; }
.nav-drop-btn {
display: inline-flex; align-items: center; gap: 6px;
background: transparent; border: none; cursor: pointer;
color: rgba(255,255,255,.55); font-size: 13px; font-weight: 500;
padding: 5px 11px; border-radius: 5px;
transition: background .15s, color .15s;
}
.nav-drop-btn:hover,
.nav-drop-btn[aria-expanded="true"] {
color: #fff; background: rgba(26,115,232,.18);
}
.nav-chevron { font-size: 10px; opacity: .75; }
.nav-drop-menu {
display: none; position: absolute; top: calc(100% + 10px); right: 0;
min-width: 220px; padding: 10px;
background: rgba(16,18,32,.98); border: 1px solid rgba(26,115,232,.2);
border-radius: 14px; box-shadow: 0 20px 48px rgba(0,0,0,.45);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); z-index: 120;
}
.nav-dropdown.open .nav-drop-menu { display: block; }
.nav-drop-menu a {
display: flex; align-items: center; gap: 10px;
color: rgba(255,255,255,.72) !important; font-size: 13px; font-weight: 500;
padding: 10px 12px; border-radius: 10px; text-decoration: none !important;
transition: background .15s, color .15s, transform .15s;
}
.nav-drop-menu a:hover,
.nav-drop-menu a.active {
background: rgba(26,115,232,.16); color: #fff !important; transform: translateX(1px);
}
.nav-drop-divider {
height: 1px; margin: 8px 4px; background: linear-gradient(90deg, transparent, rgba(26,115,232,.28), transparent);
}
.nav-right { display: flex; align-items: center; gap: 6px; }
/* Auth cluster — Login / User pill / Logout */
.nav-auth-cluster { display: flex; align-items: center; gap: 6px; }
.btn-signin {
background: transparent; border: 1px solid rgba(255,255,255,.28);
color: rgba(255,255,255,.75); padding: 5px 12px;
border-radius: 6px; font-size: 12.5px; font-weight: 500;
cursor: pointer; text-decoration: none; white-space: nowrap;
transition: border-color .15s, color .15s, background .15s;
display: inline-flex; align-items: center; gap: 6px;
}
.btn-signin:hover { border-color: #1a73e8; color: #fff; text-decoration: none; }
.btn.btn-primary {
background: linear-gradient(135deg, #1a73e8, #0d5fc7);
color: #fff; border: none; padding: 5px 14px;
border-radius: 6px; font-size: 12.5px; font-weight: 700;
cursor: pointer; text-decoration: none; white-space: nowrap;
display: inline-flex; align-items: center;
transition: box-shadow .15s, transform .1s;
}
.btn.btn-primary:hover { box-shadow: 0 4px 14px rgba(26,115,232,.55); transform: translateY(-1px); text-decoration: none; color: #fff; }
.nav-user-mini {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
font-size: 11px; font-weight: 800; color: #fff;
background: linear-gradient(135deg, #1a73e8, #10b981);
}
.nav-account-menu { position: relative; }
.nav-account-trigger {
display: inline-flex; align-items: center; gap: 8px;
min-height: 36px; padding: 3px 9px 3px 5px;
border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
background: rgba(255,255,255,.07); color: rgba(255,255,255,.9);
cursor: pointer; font: inherit; transition: border-color .16s, background .16s, box-shadow .16s;
}
.nav-account-trigger:hover,
.nav-account-trigger[aria-expanded="true"] {
background: rgba(255,255,255,.12);
border-color: rgba(26,115,232,.55);
box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.nav-account-copy {
display: flex; flex-direction: column; align-items: flex-start;
min-width: 0; line-height: 1.05;
}
.nav-account-name {
max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: #fff; font-size: 12px; font-weight: 800;
}
.nav-account-role {
color: rgba(255,255,255,.48); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
.nav-account-caret { color: rgba(255,255,255,.42); font-size: 10px; }
.nav-account-dropdown {
position: absolute; right: 0; top: calc(100% + 9px); z-index: 1200;
display: none; min-width: 190px; padding: 6px;
background: rgba(13,18,30,.98); border: 1px solid rgba(255,255,255,.12);
border-radius: 12px; box-shadow: 0 18px 46px rgba(0,0,0,.38);
}
.nav-account-dropdown.open { display: block; }
.nav-account-dropdown a {
display: flex; align-items: center; min-height: 34px;
padding: 7px 10px; border-radius: 8px;
color: rgba(255,255,255,.78); font-size: 12px; font-weight: 700; text-decoration: none;
}
.nav-account-dropdown a:hover {
background: rgba(26,115,232,.18); color: #fff; text-decoration: none;
}
.nav-account-divider {
display: block; height: 1px; margin: 5px 4px;
background: rgba(255,255,255,.1);
}
.btn-dark-toggle, .btn-nav-search, .hamburger {
background: none; border: none; cursor: pointer;
color: rgba(255,255,255,.6); font-size: 15px; padding: 5px 8px;
border-radius: 5px; transition: background .15s, color .15s;
}
.btn-dark-toggle:hover, .btn-nav-search:hover, .hamburger:hover {
background: rgba(255,255,255,.1); color: #fff;
}
.hamburger { display: none; flex-direction: column; gap: 4px; padding: 8px; }
.hamburger span { display: block; width: 20px; height: 2px; background: rgba(255,255,255,.6); border-radius: 2px; }
@media (max-width: 700px) {
.nav-links { display: none; }
.hamburger { display: flex; }
}
.mobile-menu {
display: none; position: fixed; top: 48px; left: 0; right: 0; bottom: 0;
z-index: 998; background: rgba(12,14,28,.97); flex-direction: column;
padding: 16px; gap: 2px; overflow-y: auto;
transform: translateX(-100%); transition: transform .3s ease;
border-top: 1px solid rgba(26,115,232,.2);
}
.mobile-menu.open { transform: translateX(0); display: flex; }
.mobile-menu a {
display: flex; align-items: center; gap: 10px;
color: rgba(255,255,255,.75); padding: 12px 16px; border-radius: 10px;
font-size: 14px; font-weight: 500;
border-bottom: 1px solid rgba(255,255,255,.06); text-decoration: none;
}
.mobile-menu a:hover { background: #1a73e8; color: #fff; }
.mobile-backdrop {
position: fixed; inset: 48px 0 0; z-index: 997;
background: rgba(3,6,16,.58); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.mobile-backdrop.open { opacity: 1; pointer-events: auto; }
#scroll-progress {
position: fixed; top: 0; left: 0; z-index: 9999;
height: 2px; width: 0%;
background: linear-gradient(90deg, #1a73e8, #a78bfa);
pointer-events: none;
}
#search-overlay {
display: none; position: fixed; inset: 0; z-index: 2000;
background: rgba(0,0,0,.7); align-items: flex-start; justify-content: center;
padding-top: 10vh;
}
#search-overlay.open { display: flex; }
.search-modal {
background: #1a1c30; border-radius: 14px;
padding: 22px; width: 100%; max-width: 580px; margin: 0 16px;
box-shadow: 0 24px 64px rgba(0,0,0,.85), 0 0 0 1px rgba(26,115,232,.2);
border: 1px solid rgba(26,115,232,.25);
}
.search-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.search-modal-head h3 { color: #d4d4d4; font-size: 13px; font-weight: 600; }
#search-close { background: none; border: none; color: #666; font-size: 16px; cursor: pointer; }
#search-close:hover { color: #fff; }
#global-search {
width: 100%; border: 1px solid #454545; border-radius: 6px;
padding: 10px 14px; font-size: 14px;
background: #0f1117; color: #d4d4d4; outline: none;
}
#global-search:focus { border-color: #1a73e8; box-shadow: 0 0 0 3px rgba(26,115,232,.25); }
#search-results { margin-top: 10px; max-height: 300px; overflow-y: auto; }
#back-to-top { display: none !important; }
/* ── Tips & Reference panel ─────────────────────────────────────────── */
.tips-panel {
width: 296px; min-width: 260px;
background: #161827;
border-right: 1px solid #2d314d;
display: none; flex-direction: column;
overflow: hidden;
}
.tips-panel.active { display: flex; }
.tips-head {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 12px; border-bottom: 1px solid #2d314d; flex-shrink: 0;
}
.tips-head h4 {
font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
color: rgba(255,255,255,.6); font-weight: 700; display: flex; align-items: center; gap: 7px;
}
.tips-head h4 svg { color: #f59e0b; }
.tips-lang-badge {
font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
background: rgba(26,115,232,.16); color: #8ec5ff; border: 1px solid rgba(26,115,232,.3);
}
.tips-search-wrap { padding: 8px; border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0; }
.tips-search {
width: 100%; border: 1px solid rgba(255,255,255,.15); border-radius: 8px;
background: rgba(255,255,255,.05); color: #fff; font-size: 12px;
padding: 7px 9px; outline: none;
}
.tips-search:focus { border-color: rgba(26,115,232,.8); box-shadow: 0 0 0 2px rgba(26,115,232,.2); }
.tips-body { flex: 1; overflow-y: auto; padding: 8px; }
.tips-body::-webkit-scrollbar { width: 5px; }
.tips-body::-webkit-scrollbar-thumb { background: rgba(121,121,121,.35); border-radius: 6px; }
/* Section header */
.tips-section-hd {
display: flex; align-items: center; gap: 7px;
width: 100%; background: none; border: 0; text-align: left;
padding: 10px 6px 5px; cursor: pointer;
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .08em; color: rgba(255,255,255,.45);
border-radius: 6px; user-select: none; -webkit-user-select: none;
}
.tips-section-hd svg { flex-shrink: 0; color: rgba(255,255,255,.35); }
.tips-section-hd .tips-chevron {
margin-left: auto; font-size: 9px; color: rgba(255,255,255,.3);
transition: transform .18s;
}
.tips-section.collapsed .tips-chevron { transform: rotate(-90deg); }
.tips-section-body { display: grid; gap: 4px; padding-bottom: 4px; }
.tips-section.collapsed .tips-section-body { display: none; }
/* Tip card */
.tip-card {
background: rgba(255,255,255,.038); border: 1px solid rgba(255,255,255,.07);
border-radius: 8px; padding: 10px 11px; display: grid; gap: 5px;
transition: border-color .15s, background .15s;
}
.tip-card:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.tip-card.tip-highlight {
border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.05);
}
.tip-card-head {
display: flex; align-items: center; gap: 7px;
}
.tip-card-icon {
width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.tip-icon-syntax { background: rgba(86,156,214,.16); color: #569cd6; }
.tip-icon-tip { background: rgba(245,158,11,.14); color: #f59e0b; }
.tip-icon-warn { background: rgba(248,113,113,.12); color: #f87171; }
.tip-icon-info { background: rgba(74,222,128,.12); color: #4ade80; }
.tip-icon-pattern{ background: rgba(167,139,250,.12); color: #a78bfa; }
.tip-card-title {
font-size: 12px; font-weight: 600; color: rgba(255,255,255,.82); flex: 1;
}
.tip-card-desc { font-size: 11.5px; color: rgba(255,255,255,.5); line-height: 1.55; }
.tip-code {
background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08);
border-radius: 5px; padding: 6px 9px;
font-family: 'Fira Code','Consolas','Courier New',monospace;
font-size: 11px; color: #d4d4d4; line-height: 1.65;
overflow-x: auto; white-space: pre; tab-size: 2;
}
.tip-code::-webkit-scrollbar { height: 4px; }
.tip-code::-webkit-scrollbar-thumb { background: rgba(121,121,121,.35); border-radius: 4px; }
/* Inline syntax coloring inside tip-code */
.tc-kw { color: #c586c0; }
.tc-fn { color: #dcdcaa; }
.tc-str { color: #ce9178; }
.tc-num { color: #b5cea8; }
.tc-cmt { color: #6a9955; font-style: italic; }
.tc-tag { color: #569cd6; }
.tc-atr { color: #9cdcfe; }
.tc-sel { color: #4ec9b0; }
.tc-var { color: #9cdcfe; }
.tc-op { color: #d4d4d4; }
.tip-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.tip-chip {
background: rgba(26,115,232,.12); border: 1px solid rgba(26,115,232,.28);
color: #8ec5ff; border-radius: 4px; padding: 1px 7px; font-size: 10px;
font-family: 'Fira Code', monospace; font-weight: 500;
}
.tip-chip.green { background: rgba(74,222,128,.1); border-color: rgba(74,222,128,.3); color: #4ade80; }
.tip-chip.purple{ background: rgba(167,139,250,.1); border-color: rgba(167,139,250,.3); color: #c4b5fd; }
.tip-chip.amber { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); color: #fcd34d; }
.tip-chip.red { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.3); color: #fca5a5; }
/* Empty / no-match state */
.tips-empty { padding: 20px 10px; text-align: center; color: rgba(255,255,255,.3); font-size: 12px; }
/* ── Boilerplate toast ───────────────────────────────────────────────── */
#boilerplate-toast {
position: fixed; bottom: 36px; left: 50%; transform: translateX(-50%) translateY(12px);
background: #1a2540; border: 1px solid rgba(26,115,232,.45);
border-radius: 8px; padding: 8px 18px;
font-size: 12.5px; font-weight: 600; color: #8ec5ff;
box-shadow: 0 6px 28px rgba(0,0,0,.55), 0 0 0 1px rgba(26,115,232,.2);
pointer-events: none; opacity: 0;
transition: opacity .22s, transform .22s;
z-index: 99999; white-space: nowrap;
display: flex; align-items: center; gap: 8px;
}
#boilerplate-toast.show {
opacity: 1; transform: translateX(-50%) translateY(0);
}
.bpt-trigger {
background: rgba(26,115,232,.2); border: 1px solid rgba(26,115,232,.4);
border-radius: 4px; padding: 1px 6px; font-family: 'Fira Code', monospace;
font-size: 11px; color: #93c5fd;
}
/* ══════════════════════════════════════════════════════════════════════
GUIDED TOUR ─ step-by-step spotlight tutorial
══════════════════════════════════════════════════════════════════════ */
#tut-root { display: none; }
#tut-root.active { display: block; }
/* 4 mask panels that surround the spotlight target */
.tut-shade {
position: fixed; z-index: 9990;
background: rgba(5, 8, 22, 0.80);
pointer-events: all;
transition: all .28s cubic-bezier(.4,0,.2,1);
}
/* Spotlight ring – draws an animated border around the target */
#tut-ring {
position: fixed; z-index: 9991; pointer-events: none;
border: 2px solid #1a73e8; border-radius: 9px;
box-shadow: 0 0 0 3px rgba(26,115,232,.25), 0 0 28px rgba(26,115,232,.22), inset 0 0 0 1px rgba(26,115,232,.1);
transition: all .28s cubic-bezier(.4,0,.2,1);
animation: tutRingPulse 2s ease-in-out infinite;
}
@keyframes tutRingPulse {
0%,100% { box-shadow: 0 0 0 3px rgba(26,115,232,.25), 0 0 28px rgba(26,115,232,.2); }
50% { box-shadow: 0 0 0 5px rgba(26,115,232,.4), 0 0 40px rgba(26,115,232,.35); }
}
/* Step card */
#tut-card {
position: fixed; z-index: 9993;
background: linear-gradient(150deg, #1a1e35 0%, #141728 100%);
border: 1px solid rgba(26,115,232,.4);
border-radius: 16px; padding: 22px 22px 18px;
width: 340px; max-width: calc(100vw - 24px);
box-shadow: 0 24px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04), 0 0 40px rgba(26,115,232,.07);
transition: top .28s cubic-bezier(.4,0,.2,1), left .28s cubic-bezier(.4,0,.2,1), opacity .22s;
}
#tut-card.tut-fading { opacity: 0; pointer-events: none; } /* I2 — fade between steps */
#tut-card .tut-card-top {
display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.tut-step-badge {
font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
background: rgba(26,115,232,.18); border: 1px solid rgba(26,115,232,.4);
color: #8ec5ff; padding: 3px 10px; border-radius: 20px;
}
.tut-x {
width: 26px; height: 26px; border-radius: 6px; border: none;
background: rgba(255,255,255,.07); color: rgba(255,255,255,.5); cursor: pointer;
display: flex; align-items: center; justify-content: center; font-size: 14px;
transition: background .15s, color .15s; flex-shrink: 0;
}
.tut-x:hover { background: rgba(248,113,113,.18); color: #f87171; }
/* Icon + title */
.tut-card-icon-wrap { font-size: 28px; margin-bottom: 10px; line-height: 1; }
.tut-card-title {
font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 9px; line-height: 1.3;
}
.tut-card-desc {
font-size: 13px; color: rgba(255,255,255,.62); line-height: 1.65; margin-bottom: 14px;
}
.tut-card-desc strong { color: rgba(255,255,255,.88); font-weight: 600; }
.tut-card-desc code, .tut-card-desc kbd {
background: rgba(26,115,232,.14); border: 1px solid rgba(26,115,232,.3);
border-radius: 4px; padding: 1px 6px; font-family: 'Fira Code', monospace;
font-size: 11.5px; color: #93c5fd;
}
.tut-card-desc kbd { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.7); }
/* Code block inside card */
.tut-code {
background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08);
border-radius: 8px; padding: 10px 12px; font-family: 'Fira Code', monospace;
font-size: 11.5px; color: #d4d4d4; line-height: 1.7; overflow-x: auto;
white-space: pre; margin-bottom: 12px; tab-size: 2;
}
.tut-code:empty { display: none; }
/* "Load Example" button */
.tut-try-btn {
display: flex; align-items: center; gap: 7px;
width: 100%; padding: 9px 14px; border-radius: 9px;
border: 1px solid rgba(26,115,232,.5); background: rgba(26,115,232,.1);
color: #8ec5ff; font-size: 12.5px; font-weight: 600; cursor: pointer;
margin-bottom: 16px; transition: background .15s, border-color .15s;
}
.tut-try-btn:hover { background: rgba(26,115,232,.22); border-color: rgba(26,115,232,.8); }
.tut-try-btn.hidden { display: none !important; }
/* Footer */
.tut-footer { display: flex; flex-direction: column; gap: 12px; }
.tut-progress-wrap { display: flex; align-items: center; gap: 8px; }
.tut-prog-label { font-size: 11px; color: rgba(255,255,255,.3); font-weight: 500; white-space: nowrap; }
.tut-prog-bar { flex: 1; height: 4px; background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; }
.tut-prog-fill { height: 100%; background: linear-gradient(90deg,#1a73e8,#4fa3f7); border-radius: 4px; transition: width .3s ease; }
.tut-nav { display: flex; align-items: center; gap: 8px; }
.tut-btn {
flex: 1; padding: 9px 0; border-radius: 9px; border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.06); color: rgba(255,255,255,.7); font-size: 12.5px;
font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.tut-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.tut-btn.tut-skip { font-size: 11.5px; color: rgba(255,255,255,.35); flex: none; padding: 9px 12px; }
.tut-btn.tut-skip:hover { color: rgba(255,255,255,.6); }
.tut-btn.tut-fwd {
background: #1a73e8; border-color: #1a73e8; color: #fff; flex: 2;
}
.tut-btn.tut-fwd:hover { background: #2a7ff7; }
.tut-btn.tut-fwd.done { background: #16a34a; border-color: #16a34a; }
.tut-btn.tut-back { flex: none; padding: 9px 12px; }
.tut-btn.tut-back:disabled { opacity: .3; cursor: default; }
.tut-btn.tut-back:disabled:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.7); }
/* Floating "Start Tutorial" button (first-visit or from activity bar) */
#tut-launch-fab {
position: fixed; bottom: 80px; right: 20px; z-index: 9980;
background: linear-gradient(135deg, #1a73e8, #4fa3f7);
color: #fff; border: none; border-radius: 50px;
padding: 10px 18px; font-size: 12.5px; font-weight: 700;
cursor: pointer; display: flex; align-items: center; gap: 8px;
box-shadow: 0 4px 20px rgba(26,115,232,.5), 0 0 0 1px rgba(255,255,255,.07);
transition: transform .15s, box-shadow .15s, opacity .4s;
opacity: 0; pointer-events: none;
}
#tut-launch-fab.show { opacity: 1; pointer-events: all; animation: tutFabBounce .6s .5s ease-out both; }
#tut-launch-fab:hover { transform: scale(1.04); box-shadow: 0 6px 28px rgba(26,115,232,.65); }
@keyframes tutFabBounce {
0% { transform: translateY(20px); opacity: 0; }
60% { transform: translateY(-4px); }
100% { transform: translateY(0); opacity: 1; }
}
/* ── Editor shell ────────────────────────────────────────────────────── */
.vsc-shell {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--bg);
}
/* ── Language selector bar ───────────────────────────────────────────── */
.vsc-langbar {
display: flex; align-items: center; gap: 10px;
background: #1e2038;
border-bottom: 1px solid var(--border);
padding: 0 12px;
height: 36px; flex-shrink: 0;
position: relative; overflow: visible;
}
#lang-select { display: none; }
/* ── Language pill button ────────────────────────────────────────────── */
.lang-pill-btn {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
border-radius: 5px; padding: 4px 11px 4px 8px;
color: #d4d4d4; cursor: pointer; font-size: 13px; font-weight: 500;
transition: background .15s, border-color .15s; white-space: nowrap; line-height: 1.4;
}
.lang-pill-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); }
.lang-pill-btn.open { background: rgba(26,115,232,.2); border-color: #1a73e8; }
.lang-pill-icon { display: inline-flex; align-items: center; justify-content: center; }
.lang-pill-name { font-size: 13px; }
.lang-pill-caret { font-size: 10px; opacity: .4; margin-left: 2px; transition: transform .2s; display: inline-block; }
.lang-pill-btn.open .lang-pill-caret { transform: rotate(180deg); }
.lang-detect-badge {
font-size: 10px; font-weight: 700; color: #8ec5ff;
background: rgba(26,115,232,.14); border: 1px solid rgba(26,115,232,.28);
border-radius: 10px; padding: 2px 8px; white-space: nowrap;
animation: fadeInBadge .3s ease;
}
@keyframes fadeInBadge { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.lang-picker-wrap { position: relative; display: inline-block; }
.lang-picker-modal {
position: absolute; top: calc(100% + 6px); left: 0;
z-index: 8000; display: none; flex-direction: column;
background: #1e2038; border: 1px solid #454545;
border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.7);
width: 268px; max-height: 380px; overflow: hidden;
}
.lang-picker-modal.open { display: flex; }
.lang-picker-head {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px; border-bottom: 1px solid #2e3150; flex-shrink: 0;
}
.lang-picker-head-title { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .5px; flex-shrink: 0; }
.lang-picker-search {
flex: 1; background: #141726; border: 1px solid #3a4064; color: #d4d4d4;
border-radius: 4px; padding: 4px 8px; font-size: 12px; outline: none; width: 0;
}
.lang-picker-search:focus { border-color: #1a73e8; }
.lang-picker-items { flex: 1; overflow-y: auto; padding: 4px 0; }
.lang-picker-items::-webkit-scrollbar { width: 6px; }
.lang-picker-items::-webkit-scrollbar-thumb { background: rgba(121,121,121,.4); border-radius: 6px; }
.lang-picker-group { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.25); text-transform: uppercase; letter-spacing: .5px; padding: 8px 12px 3px; }
.lang-picker-item {
display: flex; align-items: center; gap: 9px;
padding: 6px 12px; cursor: pointer; color: #ccc; transition: background .1s;
}
.lang-picker-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.lang-picker-item.selected { background: rgba(26,115,232,.2); color: #fff; }
.lpi-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; flex-shrink: 0; }
.lpi-name { font-size: 13px; flex: 1; }
.lpi-check { font-size: 11px; color: #1a73e8; }
.lang-mode-badge {
display: inline-flex; align-items: center;
padding: 2px 9px; border-radius: 10px; font-size: 10px; font-weight: 700;
letter-spacing: .5px; text-transform: uppercase; margin-left: 4px;
}
.badge-live { background: rgba(26,115,232,.18); color: #8ec5ff; border: 1px solid rgba(26,115,232,.35); }
.badge-local { background: rgba(16,185,129,.16); color: #b7f7db; border: 1px solid rgba(16,185,129,.34); }
.badge-sim { background: rgba(120,119,198,.18); color: #c8c5ff; border: 1px solid rgba(167,139,250,.35); }
.code-icon {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 6px;
border-radius: 6px; border: 1px solid transparent;
font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: .02em;
text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.code-icon-sm { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 5px; font-size: 9px; }
.code-icon-html { background: rgba(228,77,38,.16); color: #ff9d7a; border-color: rgba(228,77,38,.35); }
.code-icon-css { background: rgba(38,77,228,.16); color: #8fb0ff; border-color: rgba(38,77,228,.35); }
.code-icon-js { background: rgba(247,223,30,.14); color: #ffe36c; border-color: rgba(247,223,30,.3); }
.code-icon-react { background: rgba(97,218,251,.14); color: #9de9ff; border-color: rgba(97,218,251,.34); }
.code-icon-node { background: rgba(52,199,89,.14); color: #8df5ac; border-color: rgba(52,199,89,.34); }
.code-icon-python { background: rgba(79,156,249,.14); color: #a9d3ff; border-color: rgba(79,156,249,.34); }
.code-icon-php { background: rgba(167,139,250,.16); color: #ddd1ff; border-color: rgba(167,139,250,.34); }
.code-icon-laravel { background: rgba(255,45,32,.14); color: #ff9b92; border-color: rgba(255,45,32,.34); }
.code-icon-java { background: rgba(255,132,90,.16); color: #ffc4af; border-color: rgba(255,132,90,.34); }
.code-icon-cpp,
.code-icon-csharp,
.code-icon-ts,
.code-icon-json,
.code-icon-xml,
.code-icon-yaml,
.code-icon-shell,
.code-icon-go,
.code-icon-rust,
.code-icon-sql,
.code-icon-md,
.code-icon-reference,
.code-icon-tool,
.code-icon-home,
.code-icon-ui { background: rgba(255,255,255,.08); color: #e6ebff; border-color: rgba(255,255,255,.16); }
/* ── Tab bar ─────────────────────────────────────────────────────────── */
.vsc-tabbar {
display: flex; align-items: stretch;
background: var(--raised);
border-bottom: 1px solid var(--border);
flex-shrink: 0; height: 38px;
-webkit-user-select: none; user-select: none;
}
.vsc-app-name {
display: flex; align-items: center;
padding: 0 12px;
font-size: 11px; font-weight: 700;
color: rgba(255,255,255,.18);
letter-spacing: 1.2px;
border-right: 1px solid var(--border);
white-space: nowrap; font-family: 'Fira Code', monospace;
}
.vsc-tabs { display: flex; align-items: stretch; flex: 1; overflow: hidden; }
.vsc-tab {
display: flex; align-items: center; gap: 7px;
padding: 0 16px; font-size: 13px;
color: rgba(255,255,255,.4);
background: var(--raised); border: none;
border-right: 1px solid var(--border);
border-top: 2px solid transparent;
cursor: pointer; white-space: nowrap;
transition: color .15s, background .15s;
}
.vsc-tab:hover { color: #ccc; background: rgba(255,255,255,.04); }
.vsc-tab.active {
background: var(--bg); color: #fff; border-top-color: var(--accent);
box-shadow: inset 0 1px 0 rgba(26,115,232,.28);
}
.tab-icon { display: inline-flex; align-items: center; justify-content: center; }
.tab-close {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border-radius: 3px;
font-size: 13px; color: transparent;
transition: background .12s, color .12s; flex-shrink: 0;
}
.vsc-tab:hover .tab-close { color: rgba(255,255,255,.5); }
.vsc-tab.active .tab-close { color: rgba(255,255,255,.4); }
.tab-close:hover { background: rgba(255,255,255,.15) !important; color: #fff !important; }
.vsc-tab.modified .tab-close-x { display: none; }
.vsc-tab.modified .tab-close { position: relative; }
.vsc-tab.modified .tab-close::after {
content: ''; display: block; width: 7px; height: 7px; border-radius: 50%;
background: #d4d4d4;
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.vsc-tab.modified .tab-close:hover::after { display: none; }
.vsc-tab.modified .tab-close:hover { background: rgba(255,255,255,.15); }
.vsc-tab.modified .tab-close:hover .tab-close-x { display: inline; color: rgba(255,255,255,.9); }
.vsc-breadcrumb {
display: flex; align-items: center; gap: 4px;
background: var(--bg); border-bottom: 1px solid #2a2a2a;
padding: 0 14px; height: 22px; flex-shrink: 0;
font-size: 11px; color: rgba(255,255,255,.3); -webkit-user-select: none; user-select: none;
}
.vsc-breadcrumb span { color: rgba(255,255,255,.45); }
.vsc-breadcrumb span.bc-active { color: rgba(255,255,255,.7); }
.vsc-breadcrumb .bc-sep { color: rgba(255,255,255,.18); margin: 0 2px; }
.bc-file-icon { display: inline-flex; align-items: center; vertical-align: middle; margin-right: 3px; }
/* ── Per-file editor tabs (F5) ──────────────────────────────────────── */
.editor-file-tabs {
display: flex; flex-direction: row; align-items: stretch;
background: var(--raised); height: 35px;
overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
border-bottom: 1px solid var(--border); flex-shrink: 0;
-webkit-user-select: none; user-select: none;
}
.editor-file-tabs:empty { display: none; }
.editor-file-tabs::-webkit-scrollbar { display: none; }
.eft-tab {
display: inline-flex; align-items: center; gap: 5px;
padding: 0 8px 0 10px; height: 35px;
font-size: 12px; color: rgba(255,255,255,.45);
border-right: 1px solid var(--border); cursor: pointer;
white-space: nowrap; background: transparent;
min-width: 80px; max-width: 200px; position: relative;
transition: color .1s, background .1s;
}
.eft-tab:hover { color: rgba(255,255,255,.75); background: rgba(255,255,255,.04); }
.eft-tab.active {
color: #cccccc; background: var(--bg);
border-bottom: 2px solid #007acc;
}
.eft-tab.dirty > .eft-name::before {
content: '\25CF'; color: #e8a838; margin-right: 4px; font-size: 8px; vertical-align: middle;
}
.eft-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.eft-icon { display: inline-flex; align-items: center; flex-shrink: 0; }
.eft-close {
width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
border-radius: 3px; font-size: 15px; line-height: 1; opacity: 0;
flex-shrink: 0; color: inherit; transition: opacity .1s, background .1s;
}
.eft-tab:hover .eft-close,
.eft-tab.active .eft-close,
.eft-tab.dirty .eft-close { opacity: 1; }
.eft-close:hover { background: rgba(255,255,255,.15); color: #fff; }
/* ── Toolbar right ─────────────────────────────────────────────────── */
.vsc-tabbar-right {
display: flex; align-items: center; gap: 5px;
padding: 0 10px; margin-left: auto;
border-left: 1px solid var(--border);
}
.vsc-btn {
display: flex; align-items: center; gap: 5px;
padding: 4px 10px; font-size: 12px; font-weight: 600;
border: none; border-radius: 4px;
cursor: pointer; transition: background .15s, transform .1s;
white-space: nowrap;
}
.vsc-btn:active { transform: scale(0.96); }
.btn-run {
background: linear-gradient(135deg, #1a73e8 0%, #0d5fc7 100%) !important;
color: #fff !important;
border: none !important;
padding: 5px 16px !important;
font-size: 13px !important; font-weight: 700 !important;
box-shadow: 0 1px 4px rgba(26,115,232,.35);
letter-spacing: 0.3px;
}
.btn-run:hover {
background: linear-gradient(135deg, #1557b0 0%, #0a4a9e 100%) !important;
box-shadow: 0 4px 16px rgba(26,115,232,.55) !important;
transform: translateY(-1px);
}
.btn-reset {
background: rgba(255,255,255,.06); color: rgba(255,255,255,.6);
border: 1px solid rgba(255,255,255,.1);
}
.btn-reset:hover { background: rgba(255,255,255,.1); color: #fff; }
.btn-fmt,.btn-copy-code,.btn-dl,.btn-kb,.btn-zen,.btn-share,.btn-img-upload {
background: rgba(255,255,255,.06); color: rgba(255,255,255,.6);
border: 1px solid rgba(255,255,255,.1);
}
.btn-fmt:hover,.btn-copy-code:hover,.btn-dl:hover,.btn-kb:hover,.btn-zen:hover,.btn-share:hover,.btn-img-upload:hover {
background: rgba(255,255,255,.1); color: #fff;
}
.btn-img-upload { color: #a78bfa; border-color: rgba(167,139,250,.3); }
.btn-img-upload:hover { color: #c4b5fd !important; background: rgba(167,139,250,.12) !important; border-color: rgba(167,139,250,.5) !important; }
.btn-share { color: #60a5fa; border-color: rgba(96,165,250,.3); }
.btn-share:hover { color: #93c5fd !important; background: rgba(96,165,250,.12) !important; border-color: rgba(96,165,250,.5) !important; }
.btn-zen[aria-pressed="true"] { background: rgba(99,102,241,.3); color: #a5b4fc; border-color: #6366f1; }
.btn-theme {
background: rgba(255,255,255,.06); color: rgba(255,255,255,.6);
border: 1px solid rgba(255,255,255,.1); border-radius: 4px;
padding: 4px 8px; font-size: 11px; font-weight: 600;
cursor: pointer; outline: none; -webkit-appearance: none; appearance: none;
}
.btn-theme:hover { background: rgba(255,255,255,.1); color: #fff; }
@keyframes runPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.07);} }
.btn-run.running { animation: runPulse .4s ease-in-out; }
.tab-icon-html { color: inherit; }
.tab-icon-css { color: inherit; }
.tab-icon-js { color: inherit; }
#lang-detect-badge { display: none; }
#console-err-badge { display: none; }
#sb-run-time { display: none; }
#btn-stdin-clear { margin-left: auto; }
/* ── Main split area ─────────────────────────────────────────────────── */
.vsc-main {
flex: 1;
min-height: 0;
display: flex;
overflow: hidden;
}
.vsc-explorer {
width: 248px;
min-width: 220px;
background: #161827;
border-right: 1px solid #2d314d;
display: flex;
flex-direction: column;
overflow: hidden;
}
.explorer-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
border-bottom: 1px solid #2d314d;
}
.explorer-head h4 {
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(255,255,255,.6);
font-weight: 700;
}
.explorer-actions { display: flex; gap: 6px; }
.explorer-actions button {
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.04);
color: rgba(255,255,255,.8);
border-radius: 6px;
font-size: 11px;
padding: 3px 8px;
cursor: pointer;
}
.explorer-actions button:hover { background: rgba(26,115,232,.22); border-color: rgba(26,115,232,.55); }
.explorer-meta {
padding: 8px 12px;
font-size: 11px;
color: rgba(255,255,255,.5);
border-bottom: 1px solid rgba(255,255,255,.06);
}
.explorer-search-wrap {
padding: 8px;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.explorer-search {
width: 100%;
border: 1px solid rgba(255,255,255,.15);
border-radius: 8px;
background: rgba(255,255,255,.05);
color: #fff;
font-size: 12px;
padding: 7px 9px;
outline: none;
}
.explorer-search:focus {
border-color: rgba(26,115,232,.8);
box-shadow: 0 0 0 2px rgba(26,115,232,.2);
}
.explorer-list {
flex: 1;
overflow-y: auto;
padding: 6px;
display: grid;
gap: 4px;
}
.explorer-file {
border: 1px solid transparent;
border-radius: 8px;
padding: 7px 8px;
background: rgba(255,255,255,.02);
cursor: pointer;
display: grid;
gap: 2px;
}
.explorer-file:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
.explorer-file.active { background: rgba(26,115,232,.2); border-color: rgba(26,115,232,.5); }
.explorer-file-head {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.file-lang-chip {
min-width: 32px;
text-align: center;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.2);
background: rgba(255,255,255,.05);
color: rgba(255,255,255,.85);
font-size: 10px;
font-weight: 700;
padding: 2px 6px;
}
.explorer-file strong { font-size: 12px; color: #fff; font-weight: 600; }
.explorer-file span { font-size: 10px; color: rgba(255,255,255,.55); }
.file-state {
margin-left: auto;
border-radius: 999px;
padding: 2px 7px;
font-size: 10px;
font-weight: 700;
border: 1px solid transparent;
text-transform: uppercase;
letter-spacing: .03em;
}
.file-state.saved { color: #86efac; border-color: rgba(134,239,172,.35); background: rgba(34,197,94,.14); }
.file-state.unsaved { color: #fcd34d; border-color: rgba(252,211,77,.35); background: rgba(245,158,11,.12); }
.file-state.saving { color: #93c5fd; border-color: rgba(147,197,253,.35); background: rgba(59,130,246,.14); }
.file-state.error { color: #fca5a5; border-color: rgba(252,165,165,.35); background: rgba(239,68,68,.14); }
.explorer-empty { padding: 12px; font-size: 12px; color: rgba(255,255,255,.5); }
/* inline rename / new-file input rows */
.explorer-name-edit {
flex: 1; min-width: 0;
background: rgba(255,255,255,.08);
border: 1px solid rgba(26,115,232,.7);
border-radius: 5px;
color: #fff;
font-size: 12px;
font-weight: 600;
padding: 2px 6px;
outline: none;
box-shadow: 0 0 0 2px rgba(26,115,232,.25);
}
.explorer-file .file-rename-btn {
margin-left: auto;
background: none;
border: none;
color: rgba(255,255,255,.35);
cursor: pointer;
font-size: 11px;
padding: 0 2px;
line-height: 1;
flex-shrink: 0;
display: none;
}
.explorer-file:hover .file-rename-btn,
.explorer-file.active .file-rename-btn { display: block; }
.explorer-file .file-rename-btn:hover { color: #93c5fd; }
/* ── VS Code-accurate inline new-item row ── */
.explorer-new-row { display: flex; flex-direction: column; margin: 1px 0; }
.explorer-new-row-head {
display: flex; align-items: center; height: 26px;
padding: 0 6px 0 12px; gap: 4px;
}
.explorer-new-row-icon {
width: 16px; height: 16px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.55);
}
.explorer-new-row input {
flex: 1; min-width: 0;
background: #3c3c3c;
border: 1px solid #007fd4;
border-radius: 0;
color: #cccccc;
font-size: 13px;
font-family: inherit;
padding: 1px 5px;
height: 19px;
line-height: 19px;
outline: none;
box-shadow: 0 0 0 1px #007fd4;
}
.explorer-new-row-error {
font-size: 11px; color: #f48771;
padding: 2px 8px 3px 36px;
line-height: 1.4; min-height: 16px;
background: #5a1d1d;
border-left: 3px solid #be1100;
display: none;
}
.explorer-new-row-error:not(:empty) { display: block; }
/* ── Folder rows ── */
.explorer-folder-head {
display: flex; align-items: center; gap: 6px;
padding: 5px 8px; border-radius: 7px;
cursor: pointer; user-select: none; -webkit-user-select: none;
}
.explorer-folder-head:hover { background: rgba(255,255,255,.07); }
.explorer-folder-toggle {
font-size: 9px; color: rgba(255,255,255,.4);
transition: transform .15s; line-height: 1; flex-shrink: 0;
width: 10px; text-align: center; display: inline-block;
}
.explorer-folder.open > .explorer-folder-head .explorer-folder-toggle { transform: rotate(90deg); }
.explorer-folder-icon { font-size: 13px; flex-shrink: 0; line-height: 1; }
.explorer-folder-name {
flex: 1; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.85);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.explorer-folder-children { display: none; padding-left: 14px; }
.explorer-folder.open > .explorer-folder-children { display: grid; gap: 3px; padding-bottom: 4px; }
/* VS Code-style hover action icons on folder rows */
.explorer-folder-actions {
display: flex; gap: 1px; margin-left: auto; flex-shrink: 0;
opacity: 0; pointer-events: none;
}
.explorer-folder-head:hover .explorer-folder-actions {
opacity: 1; pointer-events: auto;
}
.explorer-folder-action-btn {
background: none; border: none; cursor: pointer;
color: rgba(255,255,255,.55); font-size: 12px;
padding: 1px 5px; border-radius: 4px; line-height: 1.5; flex-shrink: 0;
}
.explorer-folder-action-btn:hover { color: #e2e8f0; background: rgba(255,255,255,.12); }
.explorer-folder-action-btn.danger:hover { color: #fca5a5; background: rgba(239,68,68,.15); }
.explorer-cloud-section {
font-size: 10px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: rgba(255,255,255,.35);
padding: 8px 8px 4px; margin-top: 4px;
}
/* ── Editor pane ─────────────────────────────────────────────────────── */
.vsc-editor-side {
width: 50%; min-width: 160px;
min-height: 0;
display: flex; flex-direction: column;
background: var(--bg);
border-right: 1px solid var(--border);
position: relative; overflow: hidden;
}
.editor-wrap {
display: none;
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
overflow: hidden;
}
.editor-wrap.active-tab { display: block !important; }
.split-mirror-host {
position: absolute; top: 0; right: 0; bottom: 0;
width: 50%;
display: none;
border-left: 1px solid #2b2b2b;
background: #1e1e1e;
z-index: 2;
overflow: hidden;
}
.vsc-editor-side.code-split .split-mirror-host { display: block; }
.vsc-editor-side.code-split .editor-wrap.active-tab .CodeMirror {
width: calc(50% - 1px) !important;
}
.vsc-editor-side.code-split .vsc-minimap { display: none !important; }
.split-mirror-host .CodeMirror,
.split-mirror-host .CodeMirror-scroll {
height: 100% !important;
}
.CodeMirror {
height: 100% !important;
font-family: 'Fira Code','Cascadia Code','Consolas','Courier New',monospace !important;
font-size: 14px !important; line-height: 1.65 !important;
}
.CodeMirror-scroll { height: 100% !important; }
/* VS Code-accurate syntax colors */
.cm-s-one-dark.CodeMirror { background: #1e1e1e !important; color: #d4d4d4 !important; }
.cm-s-one-dark .CodeMirror-gutters { background: #1e1e1e !important; border-right: 1px solid #333 !important; min-width: 50px; }
.cm-s-one-dark .CodeMirror-linenumber { color: #6e7681 !important; padding: 0 10px 0 6px; font-size: 12px; }
.cm-s-one-dark .CodeMirror-activeline-background { background: #282828 !important; }
.cm-s-one-dark .CodeMirror-cursor { border-left: 2px solid #aeafad !important; }
.cm-s-one-dark .CodeMirror-selected { background: #264f78 !important; }
.cm-s-one-dark .CodeMirror-matchingbracket { color: #fff !important; background: #3b514d !important; outline: 1px solid #888 !important; }
.cm-s-one-dark span.cm-tag { color: #569cd6 !important; }
.cm-s-one-dark span.cm-attribute { color: #9cdcfe !important; }
.cm-s-one-dark span.cm-string { color: #ce9178 !important; }
.cm-s-one-dark span.cm-comment { color: #6a9955 !important; font-style: italic; }
.cm-s-one-dark span.cm-keyword { color: #c586c0 !important; }
.cm-s-one-dark span.cm-variable,.cm-s-one-dark span.cm-variable-2 { color: #9cdcfe !important; }
.cm-s-one-dark span.cm-def { color: #dcdcaa !important; }
.cm-s-one-dark span.cm-property { color: #9cdcfe !important; }
.cm-s-one-dark span.cm-number { color: #b5cea8 !important; }
.cm-s-one-dark span.cm-operator { color: #d4d4d4 !important; }
.cm-s-one-dark span.cm-atom { color: #569cd6 !important; }
.cm-s-one-dark span.cm-builtin { color: #dcdcaa !important; }
.cm-s-one-dark span.cm-type { color: #4ec9b0 !important; }
.cm-s-one-dark span.cm-qualifier { color: #d7ba7d !important; }
.cm-s-one-dark span.cm-meta { color: #9cdcfe !important; }
/* VS Code-style thin scrollbars */
.CodeMirror-vscrollbar::-webkit-scrollbar,
.CodeMirror-hscrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.CodeMirror-vscrollbar::-webkit-scrollbar-track,
.CodeMirror-hscrollbar::-webkit-scrollbar-track { background: transparent; }
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
.CodeMirror-hscrollbar::-webkit-scrollbar-thumb { background: rgba(121,121,121,.35); border-radius: 8px; }
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
.CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover { background: rgba(121,121,121,.6); }
/* ── Minimap ─────────────────────────────────────────────────────────── */
.vsc-minimap {
position: absolute; right: 0; top: 0; bottom: 0; width: 50px;
background: rgba(28,28,28,.9); border-left: 1px solid #2a2a2a;
overflow: hidden; pointer-events: none; z-index: 1;
}
.mm-line { height: 2px; margin: 1.5px 4px; background: rgba(255,255,255,.06); border-radius: 1px; }
.mm-line.mm-kw { background: rgba(86,156,214,.28); }
.mm-line.mm-str { background: rgba(206,145,120,.28); }
.mm-line.mm-fn { background: rgba(220,220,170,.28); }
/* ── Drag resize handle ──────────────────────────────────────────────── */
.vsc-resize {
width: 4px; flex-shrink: 0;
background: var(--border); cursor: col-resize;
transition: background .15s; position: relative;
}
.vsc-resize:hover, .vsc-resize.active { background: var(--accent); }
/* ── Preview pane ────────────────────────────────────────────────────── */
.vsc-preview-side {
flex: 1; min-width: 160px;
min-height: 0; display: flex; flex-direction: column;
overflow: hidden;
background: #fff;
}
.preview-titlebar {
display: flex; align-items: center; gap: 8px;
background: #f0f0f0; border-bottom: 1px solid #d0d0d0;
padding: 0 10px; height: 34px; flex-shrink: 0;
transition: background .2s, border-color .2s;
}
.traffic-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; transition: opacity .2s; }
.td-red { background: #ff5f57; }
.td-yellow { background: #febc2e; }
.td-green { background: #28c840; }
.preview-titlebar span { font-size: 11px; color: #555; font-weight: 600; margin-left: 4px; transition: color .2s; }
/* ── Sim mode overrides for preview side ───────────────────────────── */
.vsc-preview-side.sim-mode { background: #0d1117; }
.sim-mode .preview-titlebar { background: #161b22; border-bottom-color: #30363d; }
.sim-mode .preview-titlebar span:not(.traffic-dot) { color: rgba(255,255,255,.55); }
.sim-mode .traffic-dot { opacity: 0; pointer-events: none; }
.sim-mode .ptb-btn { color: rgba(255,255,255,.4); border-color: rgba(255,255,255,.14); }
.sim-mode .ptb-btn:hover { background: rgba(255,255,255,.09); color: #fff; border-color: rgba(255,255,255,.3); }
#preview-frame {
flex: 1; min-height: 0;
border: none; width: 100%;
display: block;
background: #fff;
}
/* ── Sim output panel ────────────────────────────────────────────────── */
#sim-output {
display: none; flex-direction: column;
flex: 1; min-height: 0;
background: #1e1e1e; overflow: hidden;
}
.sim-bar {
display: flex; align-items: center; gap: 8px;
background: #252526; border-bottom: 1px solid #474747;
padding: 0 12px; height: 32px; flex-shrink: 0;
font-size: 11px; color: rgba(255,255,255,.5);
}
.sim-bar .sim-title { font-weight: 700; color: rgba(255,255,255,.7); letter-spacing: .08em; font-size: 10px; text-transform: uppercase; }
.sim-bar-icon { color: rgba(255,255,255,.4); flex-shrink: 0; }
.sim-bar-sep { color: rgba(255,255,255,.2); }
#sim-lang-label {
font-size: 11px; color: #569cd6; font-weight: 500;
background: rgba(86,156,214,.1); padding: 1px 6px; border-radius: 3px;
border: 1px solid rgba(86,156,214,.25);
}
.sim-bar .btn-sim-copy {
margin-left: auto; background: none; border: 1px solid rgba(255,255,255,.18);
color: rgba(255,255,255,.5); cursor: pointer; font-size: 10px;
padding: 1px 8px; border-radius: 3px;
}
.sim-bar .btn-sim-copy:hover { color: #fff; border-color: rgba(255,255,255,.5); }
#sim-output-body {
flex: 1; overflow-y: auto; overflow-x: auto;
padding: 14px 18px;
font-family: 'Fira Code','Consolas','Courier New',monospace;
font-size: 13px; line-height: 1.75;
}
#sim-output-body::-webkit-scrollbar { width: 8px; }
#sim-output-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 6px; }
.sim-line { display: block; white-space: pre-wrap; word-break: break-all; }
.sim-line.prompt { color: #58a6ff; }
.sim-line.success { color: #3fb950; }
.sim-line.error { color: #ff7b72; }
.sim-line.warning { color: #e3b341; }
.sim-line.info { color: #79c0ff; }
.sim-line.output { color: #c9d1d9; }
.sim-line.comment { color: #8b949e; }
.sim-line.table-h { color: #58a6ff; font-weight: bold; }
.sim-line.empty { color: transparent; -webkit-user-select: none; user-select: none; }
.sim-line.input-echo { color: #ffa500; font-style: italic; }
/* ── Status bar ──────────────────────────────────────────────────────── */
.vsc-statusbar {
height: 22px;
background: var(--status-bg);
display: flex; align-items: center;
padding: 0 10px; gap: 14px;
flex-shrink: 0;
box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.vsc-statusbar span { font-size: 11px; color: rgba(255,255,255,.85); white-space: nowrap; }
.vsc-statusbar .sb-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.vsc-statusbar.has-errors { background: var(--err-bg) !important; }
.sb-branding { font-size: 11px; font-weight: 600; letter-spacing: .02em; }
#sb-lang { cursor: pointer; border-radius: 2px; padding: 0 4px; transition: background .12s; }
#sb-lang:hover { color: #fff; background: rgba(255,255,255,.15); }
#sb-run-time { font-size: 11px; color: rgba(255,255,255,.5); font-style: italic; }
#sb-lines { font-size: 11px; color: rgba(255,255,255,.5); }
/* ── Console panel ───────────────────────────────────────────────────── */
.vsc-console {
display: none; flex-direction: column;
height: 160px; flex-shrink: 0;
background: #0f1117; border-top: 2px solid var(--accent);
box-shadow: 0 -4px 20px rgba(26,115,232,.1);
}
.vsc-console.open { display: flex; }
.console-titlebar {
display: flex; align-items: center; gap: 8px;
background: #1a1c30; border-bottom: 1px solid var(--border);
padding: 0 10px; height: 28px; flex-shrink: 0;
font-size: 11px; color: rgba(255,255,255,.5); -webkit-user-select: none; user-select: none;
}
.console-err-badge { color: #ff8a80; font-size: 11px; margin-left: 8px; }
.btn-console-clear {
margin-left: auto; background: none;
border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.5);
cursor: pointer; font-size: 10px; padding: 1px 8px; border-radius: 3px;
}
.btn-console-clear:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.console-entries { flex: 1; overflow-y: auto; padding: 3px 6px; }
.console-entries::-webkit-scrollbar { width: 6px; }
.console-entries::-webkit-scrollbar-thumb { background: rgba(121,121,121,.4); border-radius: 6px; }
.console-entry {
font-size: 12px; font-family: 'Fira Code','Consolas','Courier New',monospace;
padding: 2px 6px; line-height: 1.6;
border-bottom: 1px solid rgba(255,255,255,.04);
white-space: pre-wrap; word-break: break-all;
}
.console-entry.log { color: #d4d4d4; }
.console-entry.warn { color: #ffd082; background: rgba(255,208,130,.05); }
.console-entry.error { color: #ff8a80; background: rgba(255,138,128,.05); }
.console-entry.info { color: #82c4ff; }
/* ── Preview titlebar extras ─────────────────────────────────────────── */
.ptb-right { margin-left: auto; display: flex; align-items: center; gap: 5px; }
#result-size {
font-size: 11px; color: #555; font-weight: 500;
white-space: nowrap; padding-right: 10px; margin-right: 4px;
border-right: 1px solid #ccc;
}
.sim-mode #result-size { display: none; }
.ptb-btn {
background: none; border: 1px solid #c0c0c0; border-radius: 4px;
padding: 2px 8px; font-size: 11px; cursor: pointer; color: #555;
transition: background .15s, color .15s;
}
.ptb-btn:hover { background: #e0e0f0; color: #111; border-color: #999; }
/* ── Status bar extras ────────────────────────────────────────────────── */
.sb-auto-run {
display: flex; align-items: center; gap: 4px;
font-size: 11px; color: rgba(255,255,255,.85); cursor: pointer;
}
.sb-auto-run input { accent-color: #fff; cursor: pointer; width: 12px; height: 12px; }
.sb-divider { width: 1px; height: 11px; background: rgba(255,255,255,.2); flex-shrink: 0; }
.sb-font-ctrl { display: flex; align-items: center; gap: 2px; }
.sb-font-ctrl button {
background: none; border: none; color: rgba(255,255,255,.7);
cursor: pointer; font-size: 10px; padding: 0 3px; line-height: 1;
}
.sb-font-ctrl button:hover { color: #fff; }
#sb-font-size { font-size: 11px; color: rgba(255,255,255,.85); min-width: 18px; text-align: center; }
#sb-wrap-toggle { cursor: pointer; }
#sb-wrap-toggle:hover { color: #fff !important; }
/* ── Keyboard shortcuts modal ─────────────────────────────────────────── */
#kb-modal {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,.7); z-index: 9000;
align-items: center; justify-content: center;
}
#kb-modal.open { display: flex; }
.kb-modal-box {
background: #1a1c30; border: 1px solid rgba(26,115,232,.24);
border-radius: 10px; width: 500px; max-width: 95vw;
box-shadow: 0 24px 64px rgba(0,0,0,.7), 0 0 0 1px rgba(26,115,232,.12);
animation: modalIn .2s ease;
}
@keyframes modalIn { from { transform:scale(.95); opacity:0; } to { transform:none; opacity:1; } }
.kb-modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; border-bottom: 1px solid rgba(26,115,232,.18);
}
.kb-modal-head h3 { font-size: 14px; color: #d4d4d4; font-weight: 600; }
#kb-modal-close {
background: none; border: none; color: #888; font-size: 16px;
cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 4px;
}
#kb-modal-close:hover { color: #fff; background: rgba(255,255,255,.1); }
.kb-modal-body { padding: 14px 18px 18px; max-height: 72vh; overflow-y: auto; }
.kb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kb-table th { text-align: left; color: #888; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 0 0 8px; }
.kb-table td { padding: 6px 0; color: #ccc; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; }
.kb-table td:last-child { text-align: right; }
.kb-table kbd {
display: inline-block; background: #141726; color: #d4d4d4;
border: 1px solid #394062; border-bottom-width: 2px;
border-radius: 4px; padding: 1px 6px; font-size: 11px;
font-family: 'Consolas','Courier New',monospace;
}
/* ── Share modal ──────────────────────────────────────────────────────── */
#share-modal {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,.75); z-index: 9000;
align-items: center; justify-content: center;
}
#share-modal.open { display: flex; }
.share-modal-box {
background: #1a1c30; border: 1px solid rgba(96,165,250,.24);
border-radius: 12px; width: 520px; max-width: 96vw;
box-shadow: 0 28px 72px rgba(0,0,0,.8);
animation: modalIn .2s ease;
}
.share-modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; border-bottom: 1px solid rgba(96,165,250,.15);
}
.share-modal-head h3 { font-size: 14px; color: #d4d4d4; font-weight: 700; margin: 0; }
#share-modal-close {
background: none; border: none; color: #888; font-size: 16px;
cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
#share-modal-close:hover { color: #fff; background: rgba(255,255,255,.1); }
.share-modal-body { padding: 16px 18px 18px; }
.share-perm-row {
display: flex; gap: 8px; margin-bottom: 14px;
}
.share-perm-btn {
flex: 1; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.04); color: #94a3b8; cursor: pointer;
font-size: 13px; font-weight: 600; text-align: center; transition: all .15s;
}
.share-perm-btn:hover { border-color: rgba(96,165,250,.4); color: #bfdbfe; }
.share-perm-btn.active { background: rgba(96,165,250,.15); border-color: #60a5fa; color: #60a5fa; }
.share-perm-btn.active.green { background: rgba(74,222,128,.12); border-color: #4ade80; color: #4ade80; }
.share-create-row { display: flex; gap: 8px; margin-bottom: 16px; }
.share-create-btn {
flex: 1; padding: 10px; background: #1a73e8; color: #fff; border: none;
border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s;
}
.share-create-btn:hover { background: #1557b0; }
.share-link-list { margin-top: 4px; }
.share-link-item {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.07); margin-bottom: 6px;
}
.share-link-item .sli-url {
flex: 1; font-size: 11px; color: #60a5fa; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; font-family: 'Fira Code', monospace;
}
.share-link-item .sli-perm {
font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
flex-shrink: 0;
}
.sli-perm.view { background: rgba(148,163,184,.12); color: #94a3b8; }
.sli-perm.edit { background: rgba(74,222,128,.12); color: #4ade80; }
.sli-copy-btn {
background: rgba(26,115,232,.15); border: 1px solid rgba(26,115,232,.3);
color: #60a5fa; border-radius: 5px; padding: 3px 9px; font-size: 11px;
font-weight: 600; cursor: pointer; flex-shrink: 0; transition: background .1s;
}
.sli-copy-btn:hover { background: rgba(26,115,232,.3); }
.sli-revoke-btn {
background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.25);
color: #f87171; border-radius: 5px; padding: 3px 9px; font-size: 11px;
font-weight: 600; cursor: pointer; flex-shrink: 0; transition: background .1s;
}
.sli-revoke-btn:hover { background: rgba(239,68,68,.22); }
.share-empty { color: #64748b; font-size: 13px; text-align: center; padding: 12px 0; }
.share-no-file { padding: 14px; text-align: center; color: #94a3b8; font-size: 13px; }
.share-no-file a { color: #60a5fa; }
#share-modal-status { font-size: 12px; color: #64748b; margin-top: 8px; min-height: 16px; }
.share-collab-banner {
display: none; align-items: center; gap: 10px; padding: 8px 12px;
background: rgba(124,58,237,.14); border: 1px solid rgba(124,58,237,.3);
border-radius: 8px; font-size: 12px; color: #c4b5fd; margin-top: 8px;
}
.share-collab-banner.visible { display: flex; }
/* shared-mode editor bar */
.shared-mode-bar {
display: none; align-items: center; justify-content: space-between; gap: 10px;
padding: 0 14px; background: #1c2a1c; border-bottom: 1px solid rgba(74,222,128,.3);
font-size: 12px; color: #4ade80; flex-shrink: 0; min-height: 34px;
}
.shared-mode-bar.visible { display: flex; }
.smb-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.smb-icon { flex-shrink: 0; color: #4ade80; }
.smb-sep { color: rgba(74,222,128,.4); }
.smb-perm-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; border-radius: 12px; font-size: 10px; font-weight: 700;
letter-spacing: .04em;
}
.smb-perm-edit { background: rgba(74,222,128,.15); color: #4ade80; border: 1px solid rgba(74,222,128,.3); }
.smb-perm-view { background: rgba(148,163,184,.12); color: #94a3b8; border: 1px solid rgba(148,163,184,.25); }
.smb-proposal-badge {
display: inline-flex; align-items: center; gap: 4px; font-size: 10px;
background: rgba(251,146,60,.15); color: #fb923c; border: 1px solid rgba(251,146,60,.3);
padding: 2px 8px; border-radius: 12px; font-weight: 700;
}
#smb-proposal-count {
background: #fb923c; color: #1e1e1e; border-radius: 50%;
width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
font-size: 9px; font-weight: 900;
}
.smb-actions { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.smb-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: 5px; border: 1px solid;
font-size: 11px; font-weight: 500; cursor: pointer;
transition: background .12s, color .12s;
text-decoration: none; white-space: nowrap;
}
.smb-btn svg { flex-shrink: 0; }
.smb-btn-diff { background: rgba(74,222,128,.1); color: #4ade80; border-color: rgba(74,222,128,.3); }
.smb-btn-diff:hover { background: rgba(74,222,128,.22); }
.smb-btn-propose { background: rgba(59,130,246,.12); color: #60a5fa; border-color: rgba(59,130,246,.3); }
.smb-btn-propose:hover { background: rgba(59,130,246,.25); }
.smb-btn-review-proposals { background: rgba(251,146,60,.12); color: #fb923c; border-color: rgba(251,146,60,.3); }
.smb-btn-review-proposals:hover { background: rgba(251,146,60,.25); }
.smb-btn-fork { background: rgba(167,139,250,.1); color: #a78bfa; border-color: rgba(167,139,250,.3); }
.smb-btn-fork:hover { background: rgba(167,139,250,.22); }
.smb-btn-history { background: rgba(148,163,184,.08); color: #94a3b8; border-color: rgba(148,163,184,.2); }
.smb-btn-history:hover { background: rgba(148,163,184,.18); color: #cbd5e1; }
.smb-btn-view { background: rgba(255,255,255,.05); color: #94a3b8; border-color: rgba(255,255,255,.12); }
.smb-btn-view:hover { background: rgba(255,255,255,.1); color: #fff; }
/* ── Space Context Bar ─────────────────────────────────────────────── */
#space-context-bar {
display: none; align-items: center; gap: 10px; flex-shrink: 0;
background: linear-gradient(90deg, rgba(99,102,241,.1), rgba(139,92,246,.07));
border-bottom: 1px solid rgba(99,102,241,.22);
padding: 0 14px; height: 30px; font-size: 12px; color: #94a3b8;
}
#space-context-bar.visible { display: flex; }
.scb-icon { font-size: 13px; flex-shrink: 0; }
.scb-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: rgba(165,180,252,.55); }
.scb-name { color: #a5b4fc; font-weight: 700; font-size: 12px; }
.scb-back { color: #64748b; text-decoration: none; font-size: 11px; transition: color .12s; }
.scb-back:hover { color: #c7d2fe; }
.scb-spacer { flex: 1; }
.scb-pub-url {
display: none; font-size: 11px; color: #a5b4fc;
background: rgba(99,102,241,.14); border: 1px solid rgba(99,102,241,.3);
border-radius: 4px; padding: 2px 9px; max-width: 300px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
cursor: pointer; transition: background .12s;
}
.scb-pub-url:hover { background: rgba(99,102,241,.26); }
.scb-pub-url.visible { display: block; }
.scb-publish-btn {
display: inline-flex; align-items: center; gap: 5px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff; border: none; border-radius: 5px;
padding: 3px 12px; font-size: 11px; font-weight: 700;
cursor: pointer; transition: opacity .15s, transform .1s; flex-shrink: 0;
}
.scb-publish-btn:hover:not(:disabled) { opacity: .85; transform: translateY(-1px); }
.scb-publish-btn:disabled { opacity: .45; cursor: default; transform: none; }
/* ── Diff Review Modal ─────────────────────────────────────────────── */
#diff-modal {
display: none; position: fixed; inset: 0; z-index: 9500;
background: rgba(0,0,0,.80); align-items: flex-start; justify-content: center;
padding-top: 36px;
}
#diff-modal.open { display: flex; }
.diff-modal-box {
background: #1e1e1e; border: 1px solid #474747; border-radius: 8px;
width: 92vw; max-width: 1100px; max-height: 85vh;
display: flex; flex-direction: column;
box-shadow: 0 24px 64px rgba(0,0,0,.8);
animation: modalIn .18s ease;
}
.diff-modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px; border-bottom: 1px solid #474747; flex-shrink: 0;
background: #252526; border-radius: 8px 8px 0 0;
}
.diff-modal-head-left { display: flex; align-items: center; gap: 10px; }
.diff-modal-head-left > svg { color: #4ade80; flex-shrink: 0; }
#diff-modal-title { font-size: 14px; font-weight: 600; color: #d4d4d4; }
.diff-stats-bar { display: flex; align-items: center; gap: 6px; margin-left: 4px; }
.diff-stat-add { font-size: 11px; font-weight: 700; color: #4ade80; background: rgba(74,222,128,.12); padding: 1px 6px; border-radius: 4px; }
.diff-stat-del { font-size: 11px; font-weight: 700; color: #f87171; background: rgba(248,113,113,.12); padding: 1px 6px; border-radius: 4px; }
.diff-stat-mod { font-size: 11px; color: rgba(255,255,255,.4); }
.diff-modal-head-right { display: flex; align-items: center; gap: 8px; }
#diff-view-toggle-wrap { display: flex; border: 1px solid #474747; border-radius: 5px; overflow: hidden; }
.diff-view-btn {
padding: 3px 10px; font-size: 11px; border: none; background: none;
color: rgba(255,255,255,.45); cursor: pointer;
}
.diff-view-btn.active { background: #007acc; color: #fff; }
.diff-view-btn:not(.active):hover { background: rgba(255,255,255,.08); color: #fff; }
.diff-modal-close-btn {
background: none; border: none; color: #888; font-size: 18px;
cursor: pointer; width: 26px; height: 26px; border-radius: 4px;
display: flex; align-items: center; justify-content: center;
}
.diff-modal-close-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.diff-body { flex: 1; overflow-y: auto; overflow-x: auto; min-height: 0; }
.diff-body::-webkit-scrollbar { width: 8px; height: 8px; }
.diff-body::-webkit-scrollbar-thumb { background: rgba(121,121,121,.4); border-radius: 6px; }
/* Diff file header */
.diff-file-hunk {
font-size: 12px; font-family: 'Fira Code','Consolas',monospace;
}
.diff-hunk-header {
background: #0d2b4e; color: #79c0ff; padding: 4px 14px;
font-size: 11px; border-top: 1px solid #1f4070; border-bottom: 1px solid #1f4070;
}
.diff-line {
display: flex; align-items: stretch;
font-family: 'Fira Code','Consolas','Courier New',monospace;
font-size: 12.5px; line-height: 1.5; min-height: 22px;
border-bottom: 1px solid transparent;
}
.diff-ln {
min-width: 44px; padding: 0 8px; text-align: right;
color: rgba(255,255,255,.22); font-size: 11px; flex-shrink: 0;
-webkit-user-select: none; user-select: none; line-height: 22px;
}
.diff-ln-new { min-width: 44px; }
.diff-code { padding: 0 14px; flex: 1; white-space: pre-wrap; word-break: break-all; line-height: 22px; }
.diff-line.add { background: rgba(46,160,67,.15); }
.diff-line.del { background: rgba(248,81,73,.15); }
.diff-line.ctx { background: transparent; }
.diff-line.add .diff-prefix { color: #4ade80; padding: 0 8px 0 14px; line-height: 22px; -webkit-user-select: none; user-select: none; }
.diff-line.del .diff-prefix { color: #f87171; padding: 0 8px 0 14px; line-height: 22px; -webkit-user-select: none; user-select: none; }
.diff-line.ctx .diff-prefix { color: rgba(255,255,255,.2); padding: 0 8px 0 14px; line-height: 22px; -webkit-user-select: none; user-select: none; }
.diff-line.add .diff-code { color: #d1fae5; }
.diff-line.del .diff-code { color: #fee2e2; text-decoration: line-through; text-decoration-color: rgba(248,81,73,.5); }
/* Inline word-level highlights */
.diff-line.add .diff-code mark { background: rgba(46,160,67,.45); color: #a7f3d0; border-radius: 2px; }
.diff-line.del .diff-code mark { background: rgba(248,81,73,.4); color: #fecaca; border-radius: 2px; }
/* Split view */
.diff-split-table { width: 100%; border-collapse: collapse; font-family: 'Fira Code','Consolas',monospace; font-size: 12.5px; }
.diff-split-table td { width: 50%; vertical-align: top; padding: 0; border: none; }
.diff-split-table .split-old { border-right: 1px solid #474747; }
.diff-split-line { display: flex; min-height: 22px; }
.diff-split-line.add { background: rgba(46,160,67,.12); }
.diff-split-line.del { background: rgba(248,81,73,.12); }
.diff-split-line .diff-ln { line-height: 22px; }
.diff-split-line .diff-code { padding: 0 10px; white-space: pre-wrap; word-break: break-all; line-height: 22px; min-height: 22px; }
.diff-no-changes { padding: 40px; text-align: center; color: rgba(255,255,255,.35); font-size: 13px; }
.diff-footer {
border-top: 1px solid #474747; padding: 10px 14px;
display: flex; align-items: flex-end; gap: 10px; flex-shrink: 0;
background: #252526;
}
.diff-footer-left { flex: 1; }
.diff-footer-right { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.diff-comment-box {
width: 100%; background: #3c3c3c; border: 1px solid #555; border-radius: 5px;
color: #d4d4d4; font-size: 12px; padding: 6px 10px; resize: none;
font-family: inherit; line-height: 1.5;
}
.diff-comment-box::placeholder { color: rgba(255,255,255,.3); }
.diff-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 14px; border-radius: 5px; border: 1px solid;
font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.diff-btn-close { background: none; border-color: #555; color: #94a3b8; }
.diff-btn-close:hover { background: rgba(255,255,255,.08); color: #fff; }
.diff-btn-propose { background: rgba(59,130,246,.2); border-color: rgba(59,130,246,.5); color: #93c5fd; }
.diff-btn-propose:hover { background: rgba(59,130,246,.35); color: #fff; }
.diff-btn-merge { background: rgba(74,222,128,.15); border-color: rgba(74,222,128,.4); color: #4ade80; }
.diff-btn-merge:hover { background: rgba(74,222,128,.3); color: #fff; }
.diff-btn-reject { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.35); color: #f87171; }
.diff-btn-reject:hover { background: rgba(248,113,113,.25); color: #fff; }
/* ── Propose Changes Modal ──────────────────────────────────────────── */
#propose-modal {
display: none; position: fixed; inset: 0; z-index: 9600;
background: rgba(0,0,0,.8); align-items: flex-start; justify-content: center;
padding-top: 80px;
}
#propose-modal.open { display: flex; }
.propose-modal-box {
background: #1e1e1e; border: 1px solid #474747; border-radius: 8px;
width: 90vw; max-width: 680px; max-height: 80vh;
display: flex; flex-direction: column;
box-shadow: 0 20px 60px rgba(0,0,0,.8); animation: modalIn .18s ease;
}
.propose-modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px; border-bottom: 1px solid #474747;
background: #252526; border-radius: 8px 8px 0 0;
}
.propose-modal-head h3 { font-size: 14px; font-weight: 600; color: #d4d4d4; margin: 0; display: flex; align-items: center; gap: 8px; }
.propose-modal-head h3 svg { color: #60a5fa; }
.propose-modal-head button {
background: none; border: none; color: #888; font-size: 18px; cursor: pointer;
border-radius: 4px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
}
.propose-modal-head button:hover { background: rgba(255,255,255,.1); color: #fff; }
.propose-modal-body { padding: 14px 16px; overflow-y: auto; flex: 1; }
.propose-info {
display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px;
background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.25);
border-radius: 6px; font-size: 12px; color: #93c5fd; margin-bottom: 14px;
}
.propose-info svg { flex-shrink: 0; margin-top: 1px; }
.propose-field { margin-bottom: 12px; }
.propose-label { display: block; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; }
.propose-label .req { color: #f87171; }
.propose-input {
width: 100%; background: #3c3c3c; border: 1px solid #555; border-radius: 5px;
color: #d4d4d4; font-size: 13px; padding: 7px 10px; font-family: inherit;
}
.propose-input:focus { outline: none; border-color: #007acc; box-shadow: 0 0 0 2px rgba(0,122,204,.2); }
.propose-textarea {
width: 100%; background: #3c3c3c; border: 1px solid #555; border-radius: 5px;
color: #d4d4d4; font-size: 13px; padding: 7px 10px; font-family: inherit;
resize: none; line-height: 1.5;
}
.propose-textarea:focus { outline: none; border-color: #007acc; }
.propose-diff-preview-wrap { margin-top: 4px; }
.propose-diff-preview {
max-height: 200px; overflow-y: auto; background: #0d0d0d;
border: 1px solid #474747; border-radius: 5px; font-family: 'Fira Code',monospace; font-size: 11px;
}
.propose-footer {
padding: 10px 16px; border-top: 1px solid #474747;
display: flex; justify-content: flex-end; gap: 8px;
background: #252526; border-radius: 0 0 8px 8px; flex-shrink: 0;
}
/* ── Review Proposals Modal ─────────────────────────────────────────── */
#review-proposals-modal {
display: none; position: fixed; inset: 0; z-index: 9500;
background: rgba(0,0,0,.8); align-items: flex-start; justify-content: center;
padding-top: 60px;
}
#review-proposals-modal.open { display: flex; }
.review-proposals-box {
background: #1e1e1e; border: 1px solid #474747; border-radius: 8px;
width: 90vw; max-width: 720px; max-height: 80vh;
display: flex; flex-direction: column;
box-shadow: 0 20px 60px rgba(0,0,0,.8); animation: modalIn .18s ease;
}
.review-proposals-head {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px; border-bottom: 1px solid #474747;
background: #252526; border-radius: 8px 8px 0 0;
}
.review-proposals-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: #d4d4d4; display: flex; align-items: center; gap: 8px; }
.review-proposals-head h3 svg { color: #4ade80; }
.review-proposals-head button { background: none; border: none; color: #888; font-size: 18px; cursor: pointer; border-radius: 4px; padding: 2px 6px; }
.review-proposals-head button:hover { background: rgba(255,255,255,.1); color: #fff; }
.review-proposals-body { flex: 1; overflow-y: auto; padding: 12px 14px; }
.proposal-card {
background: #252526; border: 1px solid #474747; border-radius: 7px;
margin-bottom: 10px; overflow: hidden;
}
.proposal-card-head {
display: flex; align-items: center; gap: 10px; padding: 10px 14px;
border-bottom: 1px solid #474747;
}
.proposal-card-title { flex: 1; font-size: 13px; font-weight: 600; color: #d4d4d4; }
.proposal-card-meta { font-size: 11px; color: rgba(255,255,255,.4); }
.proposal-card-body { padding: 10px 14px; font-size: 12px; color: #94a3b8; }
.proposal-card-diff { max-height: 180px; overflow-y: auto; margin-top: 8px; background: #0d0d0d; border: 1px solid #474747; border-radius: 5px; font-family: 'Fira Code',monospace; font-size: 11px; }
.proposal-card-actions { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid #474747; background: #1a1a1a; }
.prp-btn-merge { flex: 1; padding: 6px 0; background: rgba(74,222,128,.15); border: 1px solid rgba(74,222,128,.4); color: #4ade80; border-radius: 5px; cursor: pointer; font-size: 12px; font-weight: 600; }
.prp-btn-merge:hover { background: rgba(74,222,128,.3); }
.prp-btn-review { flex: 1; padding: 6px 0; background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.3); color: #60a5fa; border-radius: 5px; cursor: pointer; font-size: 12px; }
.prp-btn-review:hover { background: rgba(59,130,246,.22); }
.prp-btn-reject { flex: 1; padding: 6px 0; background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3); color: #f87171; border-radius: 5px; cursor: pointer; font-size: 12px; }
.prp-btn-reject:hover { background: rgba(248,113,113,.22); }
.proposals-empty { padding: 32px; text-align: center; color: rgba(255,255,255,.3); font-size: 13px; }
/* ── Version History Modal ──────────────────────────────────────────── */
#history-modal {
display: none; position: fixed; inset: 0; z-index: 9500;
background: rgba(0,0,0,.8); align-items: flex-start; justify-content: center;
padding-top: 60px;
}
#history-modal.open { display: flex; }
.history-modal-box {
background: #1e1e1e; border: 1px solid #474747; border-radius: 8px;
width: 85vw; max-width: 640px; max-height: 78vh;
display: flex; flex-direction: column;
box-shadow: 0 20px 60px rgba(0,0,0,.8); animation: modalIn .18s ease;
}
.history-modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px; border-bottom: 1px solid #474747;
background: #252526; border-radius: 8px 8px 0 0;
}
.history-modal-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: #d4d4d4; display: flex; align-items: center; gap: 8px; }
.history-head-actions { display: flex; align-items: center; gap: 8px; }
.history-save-now-btn {
background: rgba(59,130,246,.15); border: 1px solid rgba(59,130,246,.35);
color: #60a5fa; padding: 3px 10px; border-radius: 5px; font-size: 11px; cursor: pointer;
}
.history-save-now-btn:hover { background: rgba(59,130,246,.28); }
#history-modal-close { background: none; border: none; color: #888; font-size: 18px; cursor: pointer; border-radius: 4px; padding: 2px 6px; }
#history-modal-close:hover { background: rgba(255,255,255,.1); color: #fff; }
.history-modal-body { padding: 10px 14px; flex: 1; overflow-y: auto; }
.history-hint { font-size: 11px; color: rgba(255,255,255,.3); margin-bottom: 10px; }
.history-list { display: flex; flex-direction: column; gap: 6px; }
.history-item {
background: #252526; border: 1px solid #474747; border-radius: 6px;
display: flex; align-items: center; gap: 10px; padding: 9px 12px;
cursor: pointer; transition: background .1s;
}
.history-item:hover { background: #2d2d2d; border-color: rgba(0,122,204,.4); }
.history-item-icon { color: rgba(255,255,255,.3); flex-shrink: 0; }
.history-item-info { flex: 1; min-width: 0; }
.history-item-label { font-size: 12.5px; font-weight: 500; color: #d4d4d4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-item-time { font-size: 10.5px; color: rgba(255,255,255,.35); margin-top: 1px; }
.history-item-lang { font-size: 10px; background: rgba(0,122,204,.15); color: #569cd6; padding: 1px 6px; border-radius: 4px; flex-shrink: 0; }
.history-item-actions { display: flex; gap: 5px; flex-shrink: 0; }
.history-restore-btn {
padding: 3px 9px; background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.3);
color: #4ade80; border-radius: 4px; font-size: 10px; cursor: pointer;
}
.history-restore-btn:hover { background: rgba(74,222,128,.22); }
.history-diff-btn {
padding: 3px 9px; background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.25);
color: #60a5fa; border-radius: 4px; font-size: 10px; cursor: pointer;
}
.history-diff-btn:hover { background: rgba(59,130,246,.2); }
.history-delete-btn {
padding: 3px 9px; background: none; border: 1px solid rgba(248,113,113,.2);
color: rgba(248,113,113,.6); border-radius: 4px; font-size: 10px; cursor: pointer;
}
.history-delete-btn:hover { background: rgba(248,113,113,.12); color: #f87171; }
.history-empty { padding: 30px; text-align: center; color: rgba(255,255,255,.3); font-size: 13px; }
/* ── Image Upload Modal ───────────────────────────────────────────────── */
#img-modal {
display: none; position: fixed; inset: 0; z-index: 9200;
background: rgba(0,0,0,.72); align-items: flex-start; justify-content: center;
padding-top: 60px;
}
#img-modal.open { display: flex; }
.img-modal-box {
background: #1e1e2e; border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
width: min(680px,96vw); max-height: calc(100vh - 120px); display: flex; flex-direction: column;
box-shadow: 0 24px 64px rgba(0,0,0,.6);
}
.img-modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px 0;
}
.img-modal-head h3 { font-size: 14px; color: #d4d4d4; font-weight: 700; margin: 0; }
#img-modal-close {
background: none; border: none; color: rgba(255,255,255,.5); font-size: 20px;
cursor: pointer; padding: 2px 8px; border-radius: 6px; line-height: 1;
}
#img-modal-close:hover { color: #fff; background: rgba(255,255,255,.1); }
.img-modal-body { padding: 14px 18px 18px; overflow-y: auto; }
/* Drop zone */
.img-dropzone {
border: 2px dashed rgba(167,139,250,.4); border-radius: 10px;
padding: 28px 20px; text-align: center; cursor: pointer;
transition: border-color .2s, background .2s; position: relative;
}
.img-dropzone.over, .img-dropzone:hover { border-color: #a78bfa; background: rgba(167,139,250,.06); }
.img-dropzone input[type="file"] {
position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}
.img-dropzone-icon { font-size: 32px; margin-bottom: 8px; }
.img-dropzone-label { font-size: 14px; color: #94a3b8; }
.img-dropzone-label strong { color: #a78bfa; }
.img-dropzone-hint { font-size: 11px; color: #64748b; margin-top: 4px; }
/* Gallery grid */
.img-gallery {
display: grid; grid-template-columns: repeat(auto-fill,minmax(130px,1fr));
gap: 10px; margin-top: 16px;
}
.img-gallery-item {
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
border-radius: 8px; overflow: hidden; cursor: pointer; position: relative;
transition: border-color .2s, transform .15s;
display: flex; flex-direction: column;
}
.img-gallery-item:hover { border-color: #a78bfa; transform: translateY(-2px); }
.img-gallery-item img {
width: 100%; height: 88px; object-fit: cover; display: block;
}
.img-gallery-item-info {
padding: 6px 8px; flex: 1;
}
.img-gallery-item-name {
font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis;
}
.img-gallery-item-size { font-size: 10px; color: #475569; }
.img-gallery-item-actions {
display: flex; gap: 4px; padding: 0 6px 7px;
}
.img-insert-btn {
flex: 1; font-size: 11px; font-weight: 600; padding: 3px 0;
background: rgba(167,139,250,.15); border: 1px solid rgba(167,139,250,.3);
color: #a78bfa; border-radius: 5px; cursor: pointer;
}
.img-insert-btn:hover { background: rgba(167,139,250,.28); }
.img-delete-btn {
font-size: 11px; font-weight: 600; padding: 3px 7px;
background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.2);
color: #f87171; border-radius: 5px; cursor: pointer;
}
.img-delete-btn:hover { background: rgba(239,68,68,.22); }
.img-empty-msg { color: #64748b; font-size: 13px; text-align: center; padding: 20px 0; }
.img-modal-tabs {
display: flex; gap: 6px; margin-bottom: 14px;
}
.img-modal-tab {
font-size: 12px; font-weight: 700; padding: 5px 14px;
border-radius: 20px; border: 1px solid rgba(255,255,255,.12);
background: none; color: rgba(255,255,255,.5); cursor: pointer;
}
.img-modal-tab.active {
background: rgba(167,139,250,.18); border-color: #a78bfa; color: #c4b5fd;
}
.img-modal-tab-panel { display: none; }
.img-modal-tab-panel.active { display: block; }
/* Insert as select */
.img-insert-as {
display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap;
}
.img-insert-as label { font-size: 12px; color: #94a3b8; }
.img-insert-as select {
font-size: 12px; padding: 4px 8px; background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12); border-radius: 6px; color: #d4d4d4;
}
/* Upload progress bar */
.img-progress {
height: 3px; background: rgba(167,139,250,.2); border-radius: 2px;
margin-top: 10px; overflow: hidden; display: none;
}
.img-progress-bar {
height: 100%; width: 0%; background: #a78bfa;
transition: width .3s; border-radius: 2px;
}
/* ── Zen / Focus mode ─────────────────────────────────────────────────── */
.vsc-shell.zen-mode .vsc-langbar,
.vsc-shell.zen-mode .vsc-breadcrumb,
.vsc-shell.zen-mode .editor-file-tabs,
.vsc-shell.zen-mode .vsc-statusbar { display: none !important; }
.vsc-shell.zen-mode .vsc-explorer,
.vsc-shell.zen-mode .vsc-activity-bar { display: none !important; }
.vsc-shell.zen-mode .tbr-theme-select,
.vsc-shell.zen-mode #btn-fmt,
.vsc-shell.zen-mode #btn-copy-code,
.vsc-shell.zen-mode #btn-dl,
.vsc-shell.zen-mode #btn-reset,
.vsc-shell.zen-mode #btn-kb,
.vsc-shell.zen-mode #btn-cloud-save,
.vsc-shell.zen-mode #btn-img-upload,
.vsc-shell.zen-mode #btn-share,
.vsc-shell.zen-mode .tbr-sep { display: none !important; }
.vsc-shell.zen-mode .vsc-resize,
.vsc-shell.zen-mode .vsc-preview-side { display: none !important; }
.vsc-shell.zen-mode .vsc-editor-side { width: 100% !important; min-width: 0; }
/* ── Toast ────────────────────────────────────────────────────────────── */
#tryit-toast {
position: fixed; top: 16px; left: 50%;
transform: translateX(-50%) translateY(-80px);
background: linear-gradient(135deg, #1a73e8 0%, #0d5fc7 100%); color: #fff;
padding: 8px 24px; border-radius: 30px;
font-size: 13px; font-weight: 600; letter-spacing: .3px;
box-shadow: 0 4px 20px rgba(26,115,232,.45);
z-index: 9999; pointer-events: none;
transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
opacity: 0;
}
#tryit-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
/* ── STDIN panel ──────────────────────────────────────────────────────── */
.vsc-stdin {
display: none; flex-direction: column;
max-height: 156px; min-height: 90px; flex-shrink: 0;
background: #0d1117; border-top: 2px solid #ffa500;
}
.stdin-titlebar {
display: flex; align-items: center; gap: 6px;
background: #161b22; border-bottom: 1px solid #21262d;
padding: 0 10px; height: 28px; flex-shrink: 0;
font-size: 11px; color: rgba(255,255,255,.5); -webkit-user-select: none; user-select: none;
}
.stdin-title { color: #ffa500 !important; font-weight: 600; }
.stdin-hint { font-size: 10px; color: rgba(255,255,255,.22); }
#stdin-area {
flex: 1; resize: none; border: none; outline: none;
background: #0d1117; color: #c9d1d9;
font-family: 'Fira Code','Consolas','Courier New',monospace;
font-size: 12.5px; padding: 8px 14px; line-height: 1.7;
min-height: 55px;
}
#stdin-area::placeholder { color: rgba(255,255,255,.16); }
#stdin-area::-webkit-scrollbar { width: 6px; }
#stdin-area::-webkit-scrollbar-thumb { background: rgba(121,121,121,.35); border-radius: 6px; }
#btn-stdin-toggle {
display: none; align-items: center; gap: 5px;
background: rgba(255,165,0,.09); color: #ffa500;
border: 1px solid rgba(255,165,0,.28); border-radius: 4px;
padding: 3px 10px; font-size: 11px; font-weight: 600;
cursor: pointer; outline: none; white-space: nowrap;
transition: background .15s;
}
#btn-stdin-toggle:hover { background: rgba(255,165,0,.18); }
#btn-stdin-toggle.visible { display: inline-flex; }
#btn-stdin-toggle.closed { opacity: .5; }
body > footer, body > #back-to-top { display: none !important; }
/* ── Focus rings ──────────────────────────────────────────────────────── */
.vsc-tab:focus-visible,.vsc-btn:focus-visible,
.lang-pill-btn:focus-visible,.ptb-btn:focus-visible,
.tbr-btn:focus-visible,.tbr-btn-palette:focus-visible,.tbr-run:focus-visible,
.vsc-act-btn:focus-visible,.explorer-icon-btn:focus-visible,.exp-ws-action-btn:focus-visible,
.ptb-icon-btn:focus-visible,.btn-sim-copy:focus-visible,.btn-console-clear:focus-visible,
#btn-stdin-toggle:focus-visible {
outline: 2px solid var(--accent); outline-offset: 2px;
}
button:focus:not(:focus-visible) { outline: none; }
/* ── Responsive ──────────────────────────────────────────────────────── */
/* Tablet landscape — allow toolbar to scroll horizontally */
@media (max-width: 900px) {
.vsc-tabbar-right {
overflow-x: auto; scrollbar-width: none; flex-shrink: 1; min-width: 0;
}
.vsc-tabbar-right::-webkit-scrollbar { display: none; }
/* Hide low-priority buttons to reduce toolbar width */
#btn-kb, #btn-zen { display: none; }
}
/* Tablet portrait / large phone */
@media (max-width: 700px) {
/* Hide app name badge (saves ~120px) */
.vsc-app-name { display: none; }
/* Hide Share, Cloud Save, Images on mobile — keep Run, Reset, Format, Copy, Save */
#btn-share, #btn-cloud-save, #btn-img-upload { display: none; }
/* Compact run button */
.tbr-run { padding: 4px 12px !important; font-size: 12px !important; }
/* Editor layout: stack vertically */
.vsc-main { flex-direction: column; }
/* Explorer: full-width compact strip at top */
.vsc-explorer { width: 100%; min-width: 0; max-height: 160px; }
/* Editor takes 55% height, preview 45% */
.vsc-editor-side { width: 100% !important; height: 55% !important; }
.vsc-preview-side { width: 100% !important; height: 45%; }
/* Resize handle becomes horizontal */
.vsc-resize { width: 100%; height: 4px; cursor: row-resize; }
/* Hide minimap to save space */
.vsc-minimap { display: none; }
/* Compact stdin area */
.vsc-stdin { max-height: 100px; min-height: 60px; }
/* Reduce console height */
.vsc-console { height: 120px !important; }
/* Compact announcement bar */
.announcement-bar { font-size: 12px; padding: 7px 14px; }
/* Nav breakpoint matches editor breakpoint */
.nav-links { display: none; }
.hamburger { display: flex !important; }
/* Auth cluster hidden — mobile menu has auth links */
.nav-auth-cluster { display: none; }
}
/* Small phones — further reduce chrome */
@media (max-width: 480px) {
/* Only keep: Theme select, Reset, Run */
#btn-fmt, #btn-copy-code, #btn-dl { display: none; }
.btn-theme { font-size: 10px; padding: 3px 6px 3px 4px; max-width: 80px; }
/* Give more space to editor on small screens */
.vsc-explorer { max-height: 130px; }
.vsc-editor-side { height: 58% !important; }
.vsc-preview-side { height: 42%; }
/* Compact breadcrumb */
.vsc-breadcrumb { font-size: 10px; padding: 0 10px; }
/* Announcement bar: hide on tiny screens */
.announcement-bar { display: none; }
/* Status bar: tighten */
.vsc-statusbar { font-size: 10px; }
.vsc-status-item { padding: 0 6px; }
}
/* ═══════════════════════════════════════════════════════════
VS CODE PRO SUITE — Activity Bar, Context Menu, Panel Tabs
═══════════════════════════════════════════════════════════ */
/* ── Activity Bar (leftmost strip) ──────────────────────────────────── */
.vsc-activity-bar {
width: 44px; flex-shrink: 0;
background: #333333; border-right: 1px solid #252526;
display: flex; flex-direction: column; align-items: center;
padding: 4px 0; gap: 1px; overflow: hidden;
-webkit-user-select: none; user-select: none;
}
.vsc-act-btn {
width: 36px; height: 36px; border-radius: 7px;
border: none; background: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.38); font-size: 17px;
transition: background .14s, color .14s; position: relative; flex-shrink: 0;
}
.vsc-act-btn:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); }
.vsc-act-btn.active { color: #fff; }
.vsc-act-btn.active::before {
content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 2px; height: 20px; border-radius: 0 2px 2px 0; background: #007acc;
}
.vsc-act-btn svg { pointer-events: none; }
.vsc-act-badge {
position: absolute;
right: 2px;
top: 2px;
min-width: 14px;
height: 14px;
padding: 0 4px;
border-radius: 999px;
background: #2f81f7;
color: #ffffff;
display: none;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 800;
line-height: 1;
box-shadow: 0 0 0 2px #0d1218;
pointer-events: none;
}
.vsc-act-spacer { flex: 1; }
@media (max-width: 700px) { .vsc-activity-bar { display: none; } }
/* ── Explorer panel tabs ─────────────────────────────────────────────── */
.explorer-panel-tabs {
display: flex; border-bottom: 1px solid #474747; flex-shrink: 0;
}
.explorer-panel-tab {
flex: 1; padding: 7px 0; font-size: 10px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; text-align: center;
color: rgba(255,255,255,.38); cursor: pointer; background: none; border: none;
border-bottom: 2px solid transparent; transition: color .14s, border-color .14s;
}
.explorer-panel-tab.active { color: #fff; border-bottom-color: #007acc; }
.explorer-panel-tab:hover:not(.active) { color: rgba(255,255,255,.7); }
.explorer-panel-section { display: none; flex-direction: column; overflow: hidden; flex: 1; }
.explorer-panel-section.active { display: flex; }
/* ── Explorer icon action buttons ───────────────────────────────────── */
.explorer-icon-btn {
width: 22px; height: 22px; border-radius: 4px;
border: none; background: none; cursor: pointer;
color: rgba(255,255,255,.5); font-size: 14px;
display: flex; align-items: center; justify-content: center;
transition: background .12s, color .12s; flex-shrink: 0;
}
.explorer-icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.explorer-icon-btn.danger:hover { color: #fca5a5; background: rgba(239,68,68,.14); }
.explorer-actions { display: flex; gap: 2px; align-items: center; }
/* ── Source Control panel ───────────────────────────────────────────── */
.source-control-panel {
width: 280px;
min-width: 244px;
display: none;
flex-direction: column;
background: #141922;
border-right: 1px solid rgba(255,255,255,.08);
color: #d7deea;
overflow: hidden;
flex-shrink: 0;
}
.source-control-panel.active { display: flex; }
.source-control-head {
height: 38px;
min-height: 38px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 0 10px 0 14px;
border-bottom: 1px solid rgba(255,255,255,.08);
background: #141922;
}
.source-control-head h4 {
margin: 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: rgba(255,255,255,.7);
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.source-control-body {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px;
overflow: auto;
}
.sc-icon-btn {
width: 26px;
height: 26px;
border: 0;
border-radius: 5px;
background: transparent;
color: #98a4b5;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.sc-icon-btn:hover { background: rgba(255,255,255,.08); color: #ffffff; }
.sc-branch-row {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.sc-branch-btn,
.sc-btn,
.sc-mini-btn {
border: 1px solid rgba(255,255,255,.11);
background: rgba(255,255,255,.045);
color: #d7deea;
border-radius: 6px;
cursor: pointer;
transition: background .12s, border-color .12s, color .12s;
}
.sc-branch-btn {
min-width: 0;
flex: 1 1 auto;
height: 32px;
padding: 0 10px;
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12px;
font-weight: 700;
text-align: left;
}
.sc-branch-btn span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sc-branch-btn:hover,
.sc-btn:hover,
.sc-mini-btn:hover {
background: rgba(79,140,255,.13);
border-color: rgba(79,140,255,.38);
color: #ffffff;
}
.sc-commit-input {
width: 100%;
min-height: 66px;
resize: vertical;
border: 1px solid rgba(255,255,255,.11);
border-radius: 6px;
background: #0f151d;
color: #e5ecf7;
padding: 8px 10px;
font-size: 12px;
line-height: 1.45;
outline: none;
}
.sc-commit-input:focus {
border-color: rgba(79,140,255,.65);
box-shadow: 0 0 0 3px rgba(79,140,255,.16);
}
.sc-btn-row {
display: flex;
gap: 7px;
min-width: 0;
}
.sc-btn {
height: 30px;
padding: 0 10px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 11.5px;
font-weight: 700;
white-space: nowrap;
}
.sc-btn.primary {
flex: 1 1 auto;
background: #238636;
border-color: rgba(255,255,255,.12);
color: #ffffff;
}
.sc-btn.primary:hover { background: #2ea043; }
.sc-section-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
color: #b7c2d2;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
}
.sc-count {
min-width: 20px;
height: 18px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 6px;
background: rgba(79,140,255,.16);
color: #bfdbfe;
font-size: 10px;
font-weight: 800;
}
.sc-changes-list,
.sc-commit-list {
min-height: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.sc-empty {
padding: 14px 10px;
border: 1px dashed rgba(255,255,255,.12);
border-radius: 6px;
color: rgba(215,222,234,.62);
font-size: 12px;
line-height: 1.4;
text-align: center;
}
.sc-change-row {
display: grid;
grid-template-columns: 20px minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
min-height: 42px;
padding: 6px 7px;
border-radius: 6px;
background: rgba(255,255,255,.035);
border: 1px solid transparent;
}
.sc-change-row:hover {
background: rgba(255,255,255,.065);
border-color: rgba(255,255,255,.08);
}
.sc-change-status {
width: 18px;
height: 18px;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: Consolas, "Fira Code", monospace;
font-size: 11px;
font-weight: 900;
}
.sc-status-added { color: #7ee787; background: rgba(46,160,67,.14); }
.sc-status-modified { color: #79c0ff; background: rgba(56,139,253,.14); }
.sc-status-deleted { color: #ff7b72; background: rgba(248,81,73,.14); }
.sc-change-main {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.sc-change-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #f0f6fc;
font-size: 12px;
font-weight: 700;
}
.sc-change-meta {
color: #8b949e;
font-size: 10.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sc-change-actions {
display: flex;
align-items: center;
gap: 4px;
opacity: .65;
}
.sc-change-row:hover .sc-change-actions { opacity: 1; }
.sc-mini-btn {
width: 28px;
height: 26px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: #aab7c7;
}
.sc-commit-card {
padding: 8px;
border-radius: 6px;
background: rgba(255,255,255,.035);
border: 1px solid rgba(255,255,255,.06);
}
.sc-commit-message {
color: #f0f6fc;
font-size: 12px;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sc-commit-meta {
margin-top: 3px;
color: #8b949e;
font-size: 10.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 700px) {
.source-control-panel {
width: 100% !important;
min-width: 0 !important;
max-height: min(34dvh, 210px) !important;
border-right: 0 !important;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.source-control-body {
padding: 8px !important;
gap: 8px !important;
}
.sc-commit-input { min-height: 50px; }
.sc-commit-list { display: none; }
}
/* ── Active folder highlight ─────────────────────────────────────────── */
.explorer-folder.active-folder > .explorer-folder-head {
background: rgba(255,255,255,.06); border-radius: 4px;
}
/* ── Right-click context menu ────────────────────────────────────────── */
#ctx-menu {
position: fixed; z-index: 9999;
background: #252526; border: 1px solid #454545;
border-radius: 4px; padding: 4px; min-width: 192px;
box-shadow: 0 4px 16px rgba(0,0,0,.5);
display: none; animation: ctx-pop .12s cubic-bezier(.22,1,.36,1);
}
#ctx-menu.open { display: block; }
@keyframes ctx-pop { from { opacity:0; transform:scale(.96) translateY(-3px); } to { opacity:1; transform:none; } }
.ctx-item {
display: flex; align-items: center; gap: 10px;
padding: 6px 12px; cursor: pointer; font-size: 12px;
color: #cccccc; border-radius: 3px;
transition: background .08s;
}
.ctx-item:hover { background: rgba(0,120,204,.25); color: #fff; }
.ctx-item.danger:hover { background: rgba(196,48,48,.3); color: #f48771; }
.ctx-item .ctx-icon { font-size: 13px; width: 16px; text-align: center; flex-shrink: 0; }
.ctx-item .ctx-kbd { margin-left: auto; font-size: 10px; color: rgba(255,255,255,.3); font-family: 'Fira Code', monospace; }
.ctx-sep { height: 1px; background: #454545; margin: 3px 0; }
.ctx-separator { height: 1px; background: #454545; margin: 3px 2px; }
.ctx-item-icon { font-size: 13px; width: 16px; text-align: center; flex-shrink: 0; }
/* ── Workspace search results (Search panel) ─────────────────────────── */
.explorer-search-file-head {
padding: 6px 10px 3px; font-size: 10px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: rgba(255,255,255,.4);
border-top: 1px solid rgba(255,255,255,.06); margin-top: 4px;
}
.explorer-search-result {
display: flex; align-items: baseline; gap: 6px;
padding: 3px 10px 3px 14px; font-size: 11.5px; color: #c9d1e9;
transition: background .1s;
}
.explorer-search-result:hover { background: rgba(0,120,204,.15); border-radius: 4px; }
.search-result-line {
min-width: 26px; text-align: right; font-size: 10px; color: rgba(255,255,255,.3);
font-family: 'Fira Code', monospace; flex-shrink: 0;
}
.search-result-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; }
.search-result-text mark { background: rgba(255,198,0,.35); color: #ffe566; border-radius: 2px; padding: 0 1px; }
/* ── Explorer workspace title bar (VS Code style) ───────────────────── */
.explorer-head {
display: flex; align-items: center; justify-content: space-between;
padding: 0 6px 0 10px; height: 36px;
border-bottom: 1px solid #2d314d;
}
.explorer-head h4 {
font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
color: rgba(255,255,255,.55); font-weight: 700;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0;
}
.explorer-actions { opacity: 0; transition: opacity .15s; }
.explorer-head:hover .explorer-actions { opacity: 1; }
/* ══════════════════════════════════════════════════════════════════
PRO EDITOR OVERHAUL — comprehensive VS Code–accurate redesign
══════════════════════════════════════════════════════════════════ */
/* ── Hide clutter bars in editor mode ────────────────────────── */
.announcement-bar { display: none !important; }
.w3s-run-bar { display: none !important; }
#back-to-top { display: none !important; }
/* ── Root token refresh ──────────────────────────────────────── */
:root {
--vsc-base: #1e1e1e; /* true VS Code editor bg */
--vsc-sidebar-bg: #252526; /* VS Code sidebar bg */
--vsc-tabs-bg: #2d2d2d; /* VS Code tab bar bg */
--vsc-tab-active: #1e1e1e; /* active tab = editor bg */
--vsc-act-bar: #333333; /* VS Code activity bar */
--vsc-border-c: #474747; /* VS Code border */
--vsc-status: #007acc; /* VS Code status bar blue */
--vsc-input-bg: #3c3c3c; /* VS Code input field bg */
--vsc-hover: rgba(255,255,255,.08);
--vsc-sel: rgba(26,115,232,.2);
}
/* ── Compact nav ──────────────────────────────────────────────── */
.top-nav {
height: 44px !important; min-height: 44px !important;
background: #1a1b2e !important;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
/* ── Editor shell ─────────────────────────────────────────────── */
.vsc-shell { background: var(--vsc-base) !important; }
/* ── Language bar ─────────────────────────────────────────────── */
.vsc-langbar {
background: #2d2d2d !important;
border-bottom: 1px solid var(--vsc-border-c) !important;
height: 34px !important;
padding: 0 10px !important;
}
/* ── Tab bar ──────────────────────────────────────────────────── */
.vsc-tabbar {
height: 36px !important;
background: #2d2d2d !important;
border-bottom: 1px solid var(--vsc-border-c) !important;
}
.vsc-app-name {
font-size: 12px !important;
color: rgba(255,255,255,.3) !important;
border-right: 1px solid var(--vsc-border-c) !important;
padding: 0 12px !important;
display: flex !important; align-items: center !important; justify-content: center !important;
width: 42px !important;
}
.vsc-tab {
background: #2d2d2d !important;
border-right: 1px solid var(--vsc-border-c) !important;
border-top: 1px solid transparent !important;
color: rgba(255,255,255,.45) !important;
font-size: 12.5px !important;
padding: 0 14px !important;
}
.vsc-tab:hover { background: rgba(255,255,255,.05) !important; color: rgba(255,255,255,.7) !important; }
.vsc-tab.active {
background: #1e1e1e !important;
color: #fff !important;
border-top-color: #007acc !important;
box-shadow: none !important;
}
/* ── Breadcrumb ───────────────────────────────────────────────── */
.vsc-breadcrumb {
background: #1e1e1e !important;
border-bottom: 1px solid rgba(255,255,255,.06) !important;
height: 22px !important;
}
/* ── NEW: Compact icon-only toolbar ──────────────────────────── */
.vsc-tabbar-right {
display: flex !important; align-items: center !important;
gap: 0 !important; padding: 0 8px !important;
margin-left: auto !important;
border-left: 1px solid var(--vsc-border-c) !important;
height: 100% !important;
}
.tbr-group { display: flex; align-items: center; gap: 0; }
.tbr-sep {
width: 1px; height: 16px; flex-shrink: 0;
background: rgba(255,255,255,.12); margin: 0 5px;
}
/* Icon-only toolbar button */
.tbr-btn {
width: 28px; height: 28px; flex-shrink: 0;
border: none; border-radius: 5px;
background: none; cursor: pointer;
color: rgba(255,255,255,.4);
display: flex; align-items: center; justify-content: center;
transition: background .12s, color .12s;
position: relative;
}
.tbr-btn svg { pointer-events: none; }
.tbr-btn:hover {
background: rgba(255,255,255,.1);
color: rgba(255,255,255,.9);
}
.tbr-btn:active { transform: scale(0.93); }
/* Accent-colored variants */
.tbr-btn.tbr-cloud { color: rgba(96,165,250,.7); }
.tbr-btn.tbr-cloud:hover { color: #93c5fd !important; background: rgba(96,165,250,.12) !important; }
.tbr-btn.tbr-img { color: rgba(167,139,250,.7); }
.tbr-btn.tbr-img:hover { color: #c4b5fd !important; background: rgba(167,139,250,.12) !important; }
.tbr-btn.tbr-share-btn { color: rgba(52,211,153,.7); }
.tbr-btn.tbr-share-btn:hover { color: #6ee7b7 !important; background: rgba(52,211,153,.12) !important; }
/* Zen active state */
.tbr-btn#btn-zen[aria-pressed="true"] {
color: #a5b4fc; background: rgba(99,102,241,.25);
}
/* Theme dropdown in toolbar */
.tbr-theme-select {
height: 26px; padding: 0 6px 0 8px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: 5px; color: rgba(255,255,255,.6);
font-size: 11px; font-weight: 500; font-family: inherit;
cursor: pointer; outline: none;
-webkit-appearance: none; appearance: none;
transition: background .12s, color .12s;
flex-shrink: 0; max-width: 86px;
}
.tbr-theme-select option { background: #2d2d2d; color: #e2e8f0; }
.tbr-theme-select:hover { background: rgba(255,255,255,.1); color: #fff; }
/* Run button — prominent */
.tbr-run {
display: flex; align-items: center; gap: 6px;
padding: 5px 16px; margin-left: 6px; flex-shrink: 0;
background: linear-gradient(135deg, #0078d4 0%, #005fa3 100%);
color: #fff; border: none; border-radius: 5px; cursor: pointer;
font-size: 12.5px; font-weight: 700; font-family: inherit;
letter-spacing: .3px; white-space: nowrap;
box-shadow: 0 1px 6px rgba(0,120,212,.4);
transition: background .15s, box-shadow .15s, transform .1s;
}
.tbr-run:hover {
background: linear-gradient(135deg, #106ebe 0%, #004d8a 100%);
box-shadow: 0 3px 14px rgba(0,120,212,.55);
transform: translateY(-1px);
}
.tbr-run:active { transform: scale(0.97); box-shadow: none; }
.tbr-run svg { pointer-events: none; }
@keyframes runPulse2 { 0%,100%{opacity:1;} 50%{opacity:.65;} }
.tbr-run.running { animation: runPulse2 .5s ease-in-out infinite; }
/* ── Activity bar ─────────────────────────────────────────────── */
.vsc-activity-bar {
background: var(--vsc-act-bar) !important;
border-right: 1px solid var(--vsc-border-c) !important;
width: 46px !important;
}
.vsc-act-btn { width: 40px !important; height: 40px !important; border-radius: 0 !important; }
.vsc-act-btn:hover { background: rgba(255,255,255,.1) !important; }
.vsc-act-btn.active { color: #fff !important; }
.vsc-act-btn.active::before { background: #007acc !important; }
/* ── Explorer / sidebar ───────────────────────────────────────── */
.vsc-explorer {
background: var(--vsc-sidebar-bg) !important;
border-right: 1px solid var(--vsc-border-c) !important;
width: 240px !important;
}
.explorer-head {
background: var(--vsc-sidebar-bg) !important;
padding: 0 8px 0 14px !important;
height: 35px !important;
border-bottom: none !important;
}
.explorer-head h4 {
font-size: 11px !important; letter-spacing: .1em !important;
color: #bbbcbe !important;
}
.explorer-meta {
font-size: 11px !important; padding: 4px 14px !important;
border-bottom: 1px solid rgba(255,255,255,.06) !important;
color: rgba(255,255,255,.38) !important;
}
/* Explorer file rows — VS Code style */
.explorer-list { padding: 2px 0 !important; gap: 0 !important; display: flex !important; flex-direction: column !important; }
.explorer-file {
border: none !important; border-radius: 0 !important;
padding-top: 0 !important; padding-bottom: 0 !important; padding-right: 8px !important;
margin: 0 !important;
background: none !important;
cursor: pointer;
display: flex !important; align-items: center !important;
height: 22px !important; min-height: 22px !important;
gap: 0 !important;
}
.explorer-file:hover { background: rgba(255,255,255,.06) !important; }
.explorer-file.active {
background: #094771 !important; /* VS Code blue selection */
border-radius: 0 !important;
}
.explorer-file .explorer-file-head { gap: 6px !important; }
.explorer-file strong { font-size: 12.5px !important; color: #cccccc !important; font-weight: 400 !important; }
.explorer-file span { font-size: 11px !important; color: rgba(255,255,255,.4) !important; }
.file-lang-chip {
width: 15px !important; min-width: 15px !important; max-width: 15px !important;
height: 15px !important; padding: 0 !important; margin-right: 6px !important;
border-radius: 3px !important; border: none !important; flex-shrink: 0 !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
font-size: 9px !important; font-weight: 800 !important;
font-family: 'Consolas','Courier New',monospace !important;
letter-spacing: 0 !important;
}
/* Per-language chip accent colors */
.file-lang-chip[data-lang="html"] { background: rgba(228,77,38,.2) !important; color: #e07c5c !important; border-color: rgba(228,77,38,.4) !important; }
.file-lang-chip[data-lang="css"] { background: rgba(21,114,182,.2) !important; color: #5ba4e0 !important; border-color: rgba(21,114,182,.4) !important; }
.file-lang-chip[data-lang="js"] { background: rgba(247,223,30,.15) !important; color: #e5c900 !important; border-color: rgba(247,223,30,.35) !important; }
.file-lang-chip[data-lang="ts"] { background: rgba(49,120,198,.2) !important; color: #5b9bd5 !important; border-color: rgba(49,120,198,.4) !important; }
.file-lang-chip[data-lang="py"] { background: rgba(53,114,165,.2) !important; color: #4a8fc0 !important; border-color: rgba(53,114,165,.4) !important; }
.file-lang-chip[data-lang="cs"] { background: rgba(104,183,35,.15) !important; color: #7cc940 !important; border-color: rgba(104,183,35,.35) !important; }
.file-lang-chip[data-lang="cpp"] { background: rgba(0,89,156,.2) !important; color: #4a8fd6 !important; border-color: rgba(0,89,156,.4) !important; }
.file-lang-chip[data-lang="md"] { background: rgba(150,150,150,.12)!important; color: #999999 !important; border-color: rgba(150,150,150,.3) !important; }
.file-lang-chip[data-lang="sh"] { background: rgba(80,160,80,.15) !important; color: #6db33f !important; border-color: rgba(80,160,80,.35) !important; }
.file-lang-chip[data-lang="php"] { background: rgba(119,123,180,.2) !important; color: #9da4d6 !important; border-color: rgba(119,123,180,.4) !important; }
.file-lang-chip[data-lang="laravel"] { background: rgba(255,45,32,.16) !important; color: #ef6f64 !important; border-color: rgba(255,45,32,.35) !important; }
.file-lang-chip[data-lang="web"] { background: rgba(228,77,38,.2) !important; color: #e07c5c !important; border-color: rgba(228,77,38,.4) !important; }
.file-lang-chip[data-lang="sql"] { background: rgba(200,140,0,.15) !important; color: #c8920a !important; border-color: rgba(200,140,0,.35) !important; }
.file-lang-chip[data-lang="java"] { background: rgba(237,102,40,.2) !important; color: #e06030 !important; border-color: rgba(237,102,40,.4) !important; }
/* ── VS Code unsaved indicator: dot before filename, no badge ── */
.file-state { display: none !important; }
.explorer-file.is-unsaved .file-filename::before {
content: '\25CF'; font-size: 7px; color: #cccccc;
margin-right: 4px; vertical-align: middle; line-height: 1;
}
/* ── File row rename btn — SVG 18×18 ── */
.file-rename-btn {
width: 18px !important; height: 18px !important; padding: 0 !important;
display: none !important; align-items: center !important; justify-content: center !important;
flex-shrink: 0 !important; border-radius: 3px !important;
background: none !important; border: none !important; cursor: pointer !important;
color: rgba(255,255,255,.45) !important;
transition: background .1s, color .1s !important;
}
.explorer-file:hover .file-rename-btn,
.explorer-file.active .file-rename-btn { display: inline-flex !important; }
.file-rename-btn:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }
.file-rename-btn svg { pointer-events: none; }
/* ── File row inline delete btn ── */
.file-delete-btn {
width: 18px; height: 18px; padding: 0; margin-left: 1px;
display: none; align-items: center; justify-content: center;
flex-shrink: 0; border-radius: 3px; border: none; cursor: pointer;
background: none; color: rgba(255,255,255,.4);
transition: background .1s, color .1s;
}
.explorer-file:hover .file-delete-btn,
.explorer-file.active .file-delete-btn { display: inline-flex; }
.file-delete-btn:hover { background: rgba(239,68,68,.15) !important; color: #fca5a5 !important; }
.file-delete-btn svg { pointer-events: none; }
/* ── File row inline open-in-new-window btn ── */
.file-open-new-btn {
width: 18px; height: 18px; padding: 0; margin-left: 1px;
display: none; align-items: center; justify-content: center;
flex-shrink: 0; border-radius: 3px; border: none; cursor: pointer;
background: none; color: rgba(255,255,255,.42);
transition: background .1s, color .1s;
}
.explorer-file:hover .file-open-new-btn,
.explorer-file.active .file-open-new-btn { display: inline-flex; }
.file-open-new-btn:hover { background: rgba(96,165,250,.16) !important; color: #bfdbfe !important; }
.file-open-new-btn svg { pointer-events: none; }
/* ── Folder toggle — SVG chevron ── */
.explorer-folder-toggle {
width: 16px !important; height: 16px !important; min-width: 16px !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
color: rgba(255,255,255,.45) !important; flex-shrink: 0 !important; font-size: 0 !important;
}
.explorer-folder-toggle svg { transition: transform .15s ease; pointer-events: none; }
.explorer-folder.open > .explorer-folder-head .explorer-folder-toggle svg { transform: rotate(90deg); }
/* ── Folder icon — SVG ── */
.explorer-folder-icon {
width: 16px !important; height: 16px !important; flex-shrink: 0 !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
font-size: 0 !important;
}
.explorer-folder-icon svg { pointer-events: none; }
/* ── Folder action buttons ── */
.explorer-folder-actions { gap: 1px !important; }
.explorer-folder-action-btn {
width: 20px !important; height: 20px !important; padding: 0 !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
border-radius: 3px !important;
}
.explorer-folder-action-btn svg { pointer-events: none; }
/* ── Folder active state ── */
.explorer-folder.active-folder > .explorer-folder-head {
background: rgba(255,255,255,.06) !important;
}
/* ── Folder name ── */
.explorer-folder-head { gap: 4px !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-right: 6px !important; }
.explorer-folder-name { font-size: 12.5px !important; font-weight: 400 !important; color: #cccccc !important; }
/* ── Cloud file meta row (hide clutter) ── */
.file-meta { display: none !important; }
/* ── VS Code accurate file rows ───────────────────────────────── */
.explorer-file {
border-radius: 0 !important; border: none !important;
background: transparent !important;
display: flex !important; align-items: center !important;
height: 22px !important; min-height: 22px !important;
padding-top: 0 !important; padding-bottom: 0 !important; padding-right: 8px !important;
gap: 0 !important;
}
.explorer-file:hover { background: rgba(255,255,255,.07) !important; }
.explorer-file.active { background: #094771 !important; }
.explorer-file-head {
display: flex !important; align-items: center !important;
gap: 5px !important; flex: 1 !important; min-width: 0 !important; overflow: hidden !important;
}
.file-filename {
flex: 1 !important; overflow: hidden !important; text-overflow: ellipsis !important;
white-space: nowrap !important; font-size: 13px !important; font-weight: 400 !important;
color: #cccccc !important;
}
.explorer-empty {
text-align: center; padding: 20px 12px 12px; font-size: 12px;
color: rgba(255,255,255,.4); line-height: 1.6;
}
/* Folder rows — VS Code style */
.explorer-folder-head {
height: 22px !important;
padding-top: 0 !important; padding-bottom: 0 !important;
padding-right: 6px !important;
border-radius: 0 !important;
}
.explorer-folder-head:hover { background: rgba(255,255,255,.06) !important; }
.explorer-folder-name { font-size: 12.5px !important; color: #cccccc !important; font-weight: 400 !important; }
.explorer-folder-children {
border-left: 1px solid rgba(255,255,255,.08) !important;
margin-left: 15px !important; padding-left: 0 !important;
}
/* WORKSPACE section hover buttons */
.exp-ws-actions {
display: flex; gap: 1px; margin-left: auto; opacity: 0; pointer-events: none; flex-shrink: 0;
transition: opacity .1s;
}
.exp-section-workspace:hover .exp-ws-actions { opacity: 1; pointer-events: auto; }
.exp-ws-action-btn {
width: 22px; height: 22px; padding: 0; border: none; cursor: pointer;
background: none; color: rgba(255,255,255,.55); border-radius: 3px;
display: flex; align-items: center; justify-content: center;
}
.exp-ws-action-btn:hover { background: rgba(255,255,255,.1) !important; color: #fff !important; }
.exp-ws-action-btn svg { pointer-events: none; }
/* Panel tabs */
.explorer-panel-tabs { background: var(--vsc-sidebar-bg) !important; }
.explorer-panel-tab {
font-size: 11px !important; letter-spacing: .05em !important;
color: rgba(255,255,255,.4) !important;
}
.explorer-panel-tab.active {
color: #fff !important;
border-bottom-color: #007acc !important;
}
/* Explorer search — see earlier .explorer-search declaration */
/* ── Editor area ──────────────────────────────────────────────── */
.vsc-editor-side { background: var(--vsc-base) !important; }
/* VS Code–accurate CodeMirror overrides for one-dark */
.cm-s-one-dark.CodeMirror {
background: #1e1e1e !important;
color: #d4d4d4 !important;
font-family: 'Cascadia Code','Fira Code','Consolas','Courier New',monospace !important;
font-size: 13.5px !important; line-height: 1.6 !important;
caret-color: #aeafad !important;
}
.cm-s-one-dark .CodeMirror-gutters {
background: #1e1e1e !important;
border-right: 1px solid rgba(255,255,255,.07) !important;
width: 54px !important;
}
.cm-s-one-dark .CodeMirror-linenumber {
color: #858585 !important; padding: 0 10px 0 6px !important;
font-size: 11.5px !important;
}
.cm-s-one-dark .CodeMirror-activeline-background { background: #2a2d2e !important; }
.cm-s-one-dark .CodeMirror-selected { background: #264f78 !important; }
.cm-s-one-dark .CodeMirror-cursor { border-left: 2px solid #aeafad !important; }
/* Foldgutter arrow */
.CodeMirror-foldgutter-open::after { color: rgba(255,255,255,.4); }
.CodeMirror-foldgutter-folded::after { color: rgba(255,255,255,.4); }
/* ── Resize handle ────────────────────────────────────────────── */
.vsc-resize { background: var(--vsc-border-c) !important; width: 1px !important; }
.vsc-resize:hover, .vsc-resize.active { background: #007acc !important; width: 2px !important; }
/* ── Preview panel ────────────────────────────────────────────── */
.preview-titlebar {
background: #2d2d2d !important;
border-bottom: 1px solid #474747 !important;
height: 36px !important;
}
.preview-titlebar span { color: rgba(255,255,255,.5) !important; font-size: 11px !important; }
/* ── Preview browser-like URL bar ─────────────────────── */
.ptb-urlbar {
flex: 1; max-width: 340px; height: 24px;
display: flex; align-items: center; gap: 6px;
background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.1);
border-radius: 4px; padding: 0 8px; margin: 0 6px;
overflow: hidden; -webkit-user-select: none; user-select: none;
}
.ptb-lock-icon { color: rgba(255,255,255,.28); flex-shrink: 0; }
.ptb-url-text {
font-size: 11px !important; color: rgba(255,255,255,.38) !important;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-weight: 400 !important; flex: 1;
}
.ptb-icon-btn {
width: 24px; height: 24px; border-radius: 4px; border: none;
background: none; cursor: pointer; color: rgba(255,255,255,.45);
display: flex; align-items: center; justify-content: center;
transition: background .12s, color .12s; flex-shrink: 0;
}
.ptb-icon-btn:hover { background: rgba(255,255,255,.1) !important; color: #fff !important; }
.ptb-icon-btn svg { pointer-events: none; }
/* ptb text buttons dark-mode override */
.ptb-btn {
background: none !important; border: 1px solid rgba(255,255,255,.1) !important;
border-radius: 4px !important; padding: 2px 8px !important;
font-size: 11px !important; cursor: pointer !important;
color: rgba(255,255,255,.45) !important;
transition: background .12s, color .12s !important;
}
.ptb-btn:hover { background: rgba(255,255,255,.1) !important; color: #fff !important; border-color: rgba(255,255,255,.2) !important; }
/* ── Status bar ───────────────────────────────────────────────── */
.vsc-statusbar {
height: 24px !important;
background: #007acc !important;
gap: 0 !important; padding: 0 !important;
}
.vsc-statusbar > * {
padding: 0 8px; height: 100%;
display: flex; align-items: center;
font-size: 11.5px !important;
color: #fff !important; opacity: .9;
transition: background .12s;
}
.vsc-statusbar > *:hover { background: rgba(255,255,255,.15); opacity: 1; cursor: pointer; }
.vsc-statusbar .sb-right {
margin-left: auto !important;
display: flex !important; gap: 0 !important; height: 100%;
}
.vsc-statusbar .sb-right > * {
padding: 0 8px; height: 100%;
display: flex; align-items: center;
font-size: 11.5px !important; color: #fff !important; opacity: .9;
}
.vsc-statusbar .sb-right > *:hover { background: rgba(255,255,255,.15); opacity: 1; cursor: pointer; }
.vsc-statusbar .sb-divider { width: 1px; background: rgba(255,255,255,.2); padding: 0; height: 16px !important; margin: auto 0; }
.vsc-statusbar .sb-divider:hover { background: rgba(255,255,255,.2); cursor: default; }
/* Hidden checkboxes — toggle labels provide clickable status items */
.sb-toggle-cb {
position: absolute !important; opacity: 0 !important;
width: 0 !important; height: 0 !important;
pointer-events: none !important; padding: 0 !important;
margin: 0 !important; overflow: hidden !important;
}
.sb-toggle-item {
padding: 0 8px; height: 100%; display: flex; align-items: center;
font-size: 11px; color: rgba(255,255,255,.75); cursor: pointer;
transition: background .1s, color .1s; -webkit-user-select: none; user-select: none; gap: 4px;
}
.sb-toggle-item:hover { background: rgba(255,255,255,.15); color: #fff; }
/* Checked state — slightly highlighted to indicate ON */
#cb-autorun:checked ~ .sb-toggle-item[for="cb-autorun"],
#cb-autosave:checked ~ .sb-toggle-item[for="cb-autosave"],
#cb-autocomplete:checked ~ .sb-toggle-item[for="cb-autocomplete"] {
color: #fff; background: rgba(255,255,255,.12);
}
.vsc-statusbar .sb-font-ctrl { gap: 3px; }
.vsc-statusbar .sb-font-ctrl button {
width: 16px; height: 16px; border-radius: 2px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.15); color: #fff; border: none;
font-size: 9px; cursor: pointer; padding: 0;
}
.vsc-statusbar .sb-font-ctrl button:hover { background: rgba(255,255,255,.3); }
.vsc-statusbar.has-errors { background: #c5303c !important; }
/* ── VS Code-style autocomplete hint dropdown ─────────────────── */
.CodeMirror-hints {
background: #252526 !important;
border: 1px solid #454545 !important;
border-radius: 6px !important;
box-shadow: 0 4px 20px rgba(0,0,0,.6) !important;
padding: 4px 0 !important;
min-width: 240px !important;
max-width: 480px !important;
max-height: 260px !important;
font-family: 'Fira Code', Consolas, monospace !important;
font-size: 13px !important;
z-index: 9999 !important;
overflow-y: overlay !important;
}
.CodeMirror-hint {
padding: 3px 10px 3px 28px !important;
color: #d4d4d4 !important;
line-height: 1.6 !important;
position: relative !important;
cursor: pointer !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
li.CodeMirror-hint-active {
background: #094771 !important;
color: #fff !important;
}
li.CodeMirror-hint-active .cm-hint-icon { color: rgba(255,255,255,.7) !important; }
.cm-hint-icon {
position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
font-size: 11px; width: 16px; text-align: center; pointer-events: none;
}
.hint-kw .cm-hint-icon { color: #569cd6; }
.hint-fn .cm-hint-icon { color: #dcdcaa; }
.hint-snip .cm-hint-icon { color: #4ec9b0; }
.hint-var .cm-hint-icon { color: #9cdcfe; }
.hint-prop .cm-hint-icon { color: #ce9178; }
.hint-cls .cm-hint-icon { color: #4ec9b0; }
.hint-const .cm-hint-icon { color: #4fc1ff; }
.hint-word .cm-hint-icon { color: #858585; }
.cm-hint-label { font-weight: 500; }
.cm-hint-desc {
font-size: 11px; color: #858585; margin-left: 8px;
font-family: Inter, sans-serif; font-weight: 400; vertical-align: middle;
}
li.CodeMirror-hint-active .cm-hint-desc { color: rgba(255,255,255,.5); }
/* Ghost / inline suggestion text */
.cm-inline-ghost {
color: rgba(200,200,200,.35) !important;
font-style: italic;
pointer-events: none;
display: inline-block;
}
/* Auto-save spinner in status bar */
@keyframes sb-save-spin { to { transform: rotate(360deg); } }
.sb-saving-icon { display: inline-block; animation: sb-save-spin .8s linear infinite; }
/* ── Console panel ────────────────────────────────────────────── */
.vsc-console {
border-top: 1px solid var(--vsc-border-c) !important;
background: #1e1e1e !important;
}
.console-titlebar {
background: #252526 !important;
border-bottom: 1px solid var(--vsc-border-c) !important;
}
/* ── Scrollbar polish ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(121,121,121,.3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(121,121,121,.55); }
* { scrollbar-width: thin; scrollbar-color: rgba(121,121,121,.3) transparent; }
/* ── Footer — hide in editor for max canvas ───────────────────── */
footer.editor-footer { display: none !important; }
/* ── VS Code Explorer section headers ────────────────────────── */
.exp-section-header {
display: flex; align-items: center; gap: 6px;
padding: 4px 8px 4px 16px; height: 26px;
font-size: 11px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: rgba(255,255,255,.55);
cursor: pointer; user-select: none; -webkit-user-select: none;
flex-shrink: 0;
transition: background .1s;
}
.exp-section-header:hover { background: rgba(255,255,255,.04); color: rgba(255,255,255,.8); }
.exp-section-chevron { font-size: 9px; color: rgba(255,255,255,.4); transition: transform .15s; }
.exp-section-header.collapsed .exp-section-chevron { transform: rotate(-90deg); }
.exp-section-workspace { margin-top: 2px; border-top: 1px solid rgba(255,255,255,.06); }
/* ── OPEN EDITORS list ───────────────────────────────────────── */
.exp-open-editors-list { flex-shrink: 0; max-height: 160px; overflow: hidden; }
.exp-open-editors-list.collapsed { display: none; }
.exp-collapsed { display: none !important; }
.exp-open-editor-item {
display: flex; align-items: center; gap: 5px;
padding: 2px 8px 2px 20px; height: 26px;
font-size: 12.5px; color: #cccccc; cursor: pointer;
transition: background .1s;
white-space: nowrap; overflow: hidden;
}
.exp-open-editor-item:hover { background: rgba(255,255,255,.06); }
.exp-open-editor-item.active { background: #094771; }
.exp-open-editor-item .eoe-icon { width: 14px; height: 14px; flex-shrink: 0; display: flex; align-items: center; }
.exp-open-editor-item .eoe-name { flex: 1; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.exp-open-editor-item .eoe-close {
width: 16px; height: 16px; border: none; background: none; cursor: pointer;
color: transparent; border-radius: 3px; display: flex; align-items: center;
justify-content: center; flex-shrink: 0; font-size: 12px;
transition: background .1s, color .1s;
}
.exp-open-editor-item:hover .eoe-close { color: rgba(255,255,255,.5); }
.exp-open-editor-item.active .eoe-close { color: rgba(255,255,255,.4); }
.exp-open-editor-item .eoe-close:hover { background: rgba(255,255,255,.15) !important; color: #fff !important; }
.eoe-modified { color: #cccccc !important; position: relative; }
.eoe-modified::before {
content: ''; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
width: 6px; height: 6px; border-radius: 50%; background: #cccccc;
}
/* ── Explorer head refinements ───────────────────────────────── */
.explorer-head h4 {
font-size: 11px !important; letter-spacing: .09em !important;
color: #bbbcbe !important; text-transform: uppercase;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-weight: 700 !important;
}
/* ── Indent guides in CodeMirror ─────────────────────────────── */
.CodeMirror-line > .cm-indent-guide {
border-left: 1px solid rgba(255,255,255,.08);
}
/* Restore gutter line numbers with proper padding */
.cm-s-one-dark .CodeMirror-linenumber {
min-width: 28px !important;
}
/* ── Toast notification ───────────────────────────────────────── */
#tryit-toast {
position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%) translateY(10px);
background: #323232; color: #fff; padding: 8px 18px;
border-radius: 6px; font-size: 12.5px; font-weight: 500;
box-shadow: 0 4px 16px rgba(0,0,0,.5);
opacity: 0; pointer-events: none; z-index: 9998;
transition: opacity .2s, transform .2s;
}
#tryit-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ── Minimap ──────────────────────────────────────────────────── */
.vsc-minimap {
width: 44px !important;
background: rgba(30,30,30,.95) !important;
border-left: 1px solid rgba(255,255,255,.04) !important;
}
.mm-line { height: 1.8px !important; }
/* ── Smooth transitions on interactive elements ───────────────── */
.vsc-tab, .explorer-file, .explorer-folder-head, .tbr-btn, .vsc-act-btn {
transition: background .1s ease, color .1s ease !important;
}
/* ── Drag & Drop — explorer internal ─────────────────────────── */
.explorer-file[draggable="true"] { cursor: grab; }
.explorer-file[draggable="true"]:active { cursor: grabbing; }
.explorer-file.dragging { opacity: .35 !important; pointer-events: none; }
.explorer-folder.dragging > .explorer-folder-head { opacity: .35; pointer-events: none; }
.explorer-folder-head[draggable="true"] { cursor: grab; }
.explorer-folder-head.drag-over {
background: rgba(0,120,204,.28) !important;
outline: 1px solid #007acc; outline-offset: -1px;
border-radius: 3px !important;
}
.explorer-folder-children.drag-over-child,
.explorer-list.drag-over-root {
outline: 1px dashed rgba(0,120,204,.55);
outline-offset: -2px;
background: rgba(0,120,204,.06) !important;
}
/* ── Drag & Drop — OS files/folders into explorer ────────────── */
.vsc-explorer.os-drag-over {
outline: 2px dashed #007acc !important;
outline-offset: -3px !important;
background: rgba(0,120,204,.1) !important;
}
.explorer-os-drop-hint {
display: none; text-align: center;
padding: 14px 10px; margin: 8px 8px 4px;
color: #5a9fd4; font-size: 11px; font-weight: 500;
border: 1px dashed rgba(0,120,204,.45);
border-radius: 4px; background: rgba(0,120,204,.05);
pointer-events: none;
}
.vsc-explorer.os-drag-over .explorer-os-drop-hint { display: block; }
.vsc-explorer.os-drag-over .explorer-list { opacity: .4; pointer-events: none; }
/* ── Search/Replace dialog polish ────────────────────────────── */
.CodeMirror-dialog {
background: #252526 !important;
border: 1px solid #474747 !important;
color: #cccccc !important;
padding: 6px 10px !important;
font-size: 12px !important;
}
.CodeMirror-dialog input {
background: #3c3c3c !important;
border: 1px solid #6b6b6b !important;
color: #cccccc !important;
border-radius: 3px !important;
padding: 2px 6px !important;
outline: none !important;
}
.CodeMirror-dialog input:focus { border-color: #007acc !important; }
/* ── Responsive tweaks ────────────────────────────────────────── */
@media (max-width: 900px) {
.vsc-explorer { width: 200px !important; min-width: 180px !important; }
.tbr-btn { width: 26px !important; height: 26px !important; }
}
@media (max-width: 700px) {
.vsc-explorer { display: none; }
.vsc-activity-bar { display: none !important; }
.tbr-theme-select { display: none; }
}
/* ── Match-highlight (word occurrences) ─────────────────────────────── */
.cm-matchhighlight {
background: rgba(255,255,100,.12) !important;
border-bottom: 1px solid rgba(255,255,100,.5) !important;
border-radius: 2px;
}
.CodeMirror-selection-highlight-scrollbar {
background: rgba(255,255,100,.3);
}
/* ── Matching bracket highlight ─────────────────────────────────────── */
.CodeMirror-matchingbracket {
background: rgba(26,115,232,.28) !important;
color: #fff !important;
font-weight: 700;
border-radius: 2px;
outline: 1px solid rgba(26,115,232,.55);
}
/* ════════════════════════════════════════════════════════════════════
COMMAND PALETTE (Ctrl+Shift+P / Ctrl+P)
════════════════════════════════════════════════════════════════════ */
#cmd-palette {
position: fixed; inset: 0; z-index: 10000;
background: rgba(0,0,0,.65);
backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
display: none; align-items: flex-start; justify-content: center;
padding-top: 80px;
}
#cmd-palette.open { display: flex; }
.cmd-palette-box {
width: 100%; max-width: 600px; margin: 0 16px;
background: #1b1e35;
border: 1px solid rgba(26,115,232,.4);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 32px 80px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.05);
animation: cmdFadeIn .12s cubic-bezier(.2,.8,.4,1);
}
@keyframes cmdFadeIn {
from { opacity:0; transform:translateY(-10px) scale(.97); }
to { opacity:1; transform:translateY(0) scale(1); }
}
.cmd-palette-input-wrap {
display: flex; align-items: center; gap: 10px;
padding: 13px 16px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.cmd-palette-input-wrap svg { color: rgba(255,255,255,.4); flex-shrink: 0; }
#cmd-palette-input {
flex: 1; background: none; border: none; outline: none;
color: #e8eaf0; font-size: 14px; font-family: inherit; caret-color: #4f9cf9;
}
#cmd-palette-input::placeholder { color: rgba(255,255,255,.3); }
.cmd-esc-badge {
font-size: 10px; color: rgba(255,255,255,.3);
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
border-radius: 4px; padding: 2px 7px; font-family: 'Fira Code', monospace;
flex-shrink: 0;
}
.cmd-palette-list {
max-height: 400px; overflow-y: auto; padding: 6px;
}
.cmd-palette-list::-webkit-scrollbar { width: 5px; }
.cmd-palette-list::-webkit-scrollbar-thumb { background: rgba(121,121,121,.35); border-radius: 4px; }
.cmd-group-label {
font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: rgba(255,255,255,.28); padding: 10px 12px 3px; user-select: none;
}
.cmd-item {
display: flex; align-items: center; gap: 11px;
padding: 8px 12px; border-radius: 7px; cursor: pointer;
transition: background .1s;
}
.cmd-item.focused, .cmd-item:hover { background: rgba(26,115,232,.22); }
.cmd-item-icon {
width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 14px; background: rgba(255,255,255,.07); line-height: 1;
}
.cmd-item-body { flex: 1; min-width: 0; }
.cmd-item-label { font-size: 13px; color: rgba(255,255,255,.9); font-weight: 500; }
.cmd-item-desc { font-size: 11px; color: rgba(255,255,255,.4); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-item-kbd {
font-size: 10px; color: rgba(255,255,255,.3); white-space: nowrap;
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
border-radius: 4px; padding: 2px 6px; font-family: 'Fira Code', monospace; flex-shrink: 0;
}
.cmd-empty { padding: 30px 16px; text-align: center; color: rgba(255,255,255,.3); font-size: 13px; }
/* ── Toolbar ⌘ palette button ────────────────────────────────────────── */
.tbr-btn-palette {
display: inline-flex; align-items: center; gap: 5px;
background: rgba(26,115,232,.15); border: 1px solid rgba(26,115,232,.3);
color: #8ec5ff; padding: 4px 10px; border-radius: 6px;
font-size: 11.5px; font-weight: 600; cursor: pointer;
transition: background .15s, border-color .15s;
white-space: nowrap;
}
.tbr-btn-palette:hover { background: rgba(26,115,232,.3); border-color: rgba(26,115,232,.6); color: #fff; }
.tbr-btn-palette kbd { font-family: 'Fira Code', monospace; font-size: 10px; opacity: .7; }
/* ── Selection count badge in status bar ────────────────────────────── */
#sb-sel {
display: none; font-size: 11px; color: #8ec5ff;
background: rgba(26,115,232,.18); border: 1px solid rgba(26,115,232,.3);
border-radius: 4px; padding: 0 6px; line-height: 18px;
}
#sb-sel.visible { display: inline-block; }
/* ── Indent guides (visual vertical lines) ──────────────────────────── */
.CodeMirror .cm-indent-guide {
border-left: 1px solid rgba(255,255,255,.06);
display: inline-block;
pointer-events: none;
}
/* ── Real-time lint: error line background highlight ─────────────────── */
.cm-error-line .CodeMirror-linenumber { color: #f87171 !important; }
.cm-error-line { background: rgba(248, 113, 113, 0.13) !important; }
/* ── Status bar lint badge ───────────────────────────────────────────── */
.sb-lint-badge {
font-size: 11px; padding: 1px 7px; border-radius: 3px;
white-space: nowrap; cursor: pointer; transition: opacity .2s;
display: none; /* shown by JS once an editor is active */
}
.sb-lint-badge.ok { color: #4ade80; display: inline; }
.sb-lint-badge.err { color: #f87171; font-weight: 700; display: inline; }
.sb-lint-badge.checking { color: #94a3b8; display: inline; }
/* ── Hover documentation popup ───────────────────────────────────────── */
#cm-hover-doc {
position: fixed; z-index: 3000;
background: #1e293b; border: 1px solid #334155;
border-radius: 7px; padding: 9px 13px;
font-size: 12px; color: #e2e8f0;
max-width: 340px; min-width: 160px;
pointer-events: none;
box-shadow: 0 6px 24px rgba(0,0,0,.5);
display: none; line-height: 1.55;
}
#cm-hover-doc .hdoc-kind { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: .5px; }
#cm-hover-doc .hdoc-name { font-weight: 700; color: #93c5fd; font-family: monospace; font-size: 13px; }
#cm-hover-doc .hdoc-info { color: #94a3b8; margin-top: 4px; font-size: 11.5px; }
#cm-hover-doc .hdoc-snip { color: #86efac; font-family: monospace; font-size: 11px; margin-top: 5px;
background: rgba(255,255,255,.06); border-radius: 4px; padding: 4px 7px; white-space: pre-wrap; }
/* ── Collab live-update notification bar ─────────────────────────────── */
#collab-update-bar {
display: none; align-items: center; justify-content: space-between;
gap: 10px; background: #1d4ed8; color: #fff;
padding: 5px 16px; font-size: 12px; flex-shrink: 0;
}
#collab-update-bar.visible { display: flex; }
#collab-update-bar .cub-msg { display: flex; align-items: center; gap: 6px; }
#collab-update-bar button {
background: #fff; color: #1d4ed8; border: none;
border-radius: 4px; padding: 3px 11px; font-size: 11px;
font-weight: 600; cursor: pointer; white-space: nowrap;
}
#collab-update-bar button:hover { background: #dbeafe; }
#collab-update-bar .cub-dismiss {
background: transparent; color: rgba(255,255,255,.7); font-size: 14px;
padding: 2px 6px; font-weight: 400;
}
#collab-update-bar .cub-dismiss:hover { color: #fff; background: transparent; }
/* ── Filename / rename modal ────────────────────────────────────────── */
#fn-modal {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,.72); z-index: 10000;
align-items: center; justify-content: center;
}
#fn-modal.open { display: flex; }
#fn-modal-box {
background: #1e293b; border: 1px solid #334155;
border-radius: 10px; width: 380px; max-width: 95vw;
box-shadow: 0 24px 64px rgba(0,0,0,.7);
animation: modalIn .15s ease;
}
#fn-modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: 13px 16px 12px; border-bottom: 1px solid #334155;
}
#fn-modal-title { font-size: 13px; font-weight: 600; color: #e2e8f0; }
#fn-modal-close {
background: none; border: none; color: #64748b; font-size: 16px;
cursor: pointer; padding: 2px 6px; border-radius: 4px; line-height: 1;
}
#fn-modal-close:hover { color: #e2e8f0; background: rgba(255,255,255,.08); }
#fn-modal-body { padding: 16px; }
#fn-modal-input {
width: 100%; box-sizing: border-box;
background: #0f172a; border: 1px solid #475569;
border-radius: 6px; color: #e2e8f0; font-size: 13px;
font-family: var(--vsc-font-mono, monospace);
padding: 8px 10px; outline: none;
}
#fn-modal-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.2); }
#fn-modal-hint { font-size: 11px; color: #64748b; margin-top: 6px; }
#fn-modal-footer {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 16px; border-top: 1px solid #1e293b;
}
#fn-modal-cancel {
background: none; border: 1px solid #334155; color: #94a3b8;
border-radius: 6px; padding: 7px 16px; font-size: 13px; cursor: pointer;
}
#fn-modal-cancel:hover { background: rgba(255,255,255,.06); }
#fn-modal-ok {
background: #6366f1; border: none; color: #fff;
border-radius: 6px; padding: 7px 18px; font-size: 13px; cursor: pointer; font-weight: 600;
}
#fn-modal-ok:hover { background: #4f46e5; }
/* ── Inline image fold widget (collapses base64 data URLs) ──────────── */
.cm-img-fold {
display: inline-flex; align-items: center; gap: 3px;
background: #1e293b;
border: 1px solid #334155;
border-radius: 4px; padding: 1px 5px 1px 3px;
cursor: pointer; vertical-align: middle;
transition: border-color .15s, background .15s;
max-height: 22px; overflow: hidden;
}
.cm-img-fold:hover { background: #263348; border-color: #4f7096; }
.cm-img-fold img { height: 16px; width: auto; max-width: 40px; border-radius: 2px; object-fit: cover; pointer-events: none; flex-shrink: 0; }
.cm-img-fold-label { font-size: 10.5px; color: #7dd3fc; font-family: var(--vsc-font-mono, monospace); white-space: nowrap; letter-spacing: .02em; }
.cm-img-fold-expand { font-size: 11px; color: #475569; line-height: 1; }
/* ── Minor professional polish pass ──────────────────────────────────── */
:root {
--tryit-focus-ring: rgba(79,156,249,.9);
--tryit-focus-glow: rgba(79,156,249,.26);
--tryit-control-border: rgba(255,255,255,.14);
}
button,
input,
select,
textarea {
font: inherit;
}
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="menuitem"]:focus-visible {
outline: 2px solid var(--tryit-focus-ring) !important;
outline-offset: 2px;
box-shadow: 0 0 0 4px var(--tryit-focus-glow) !important;
}
.tbr-btn,
.ptb-icon-btn,
.vsc-act-btn,
.smb-btn,
.diff-btn,
.history-save-now-btn,
.img-modal-tab,
.lang-pill-btn,
.btn-dark-toggle,
.btn-nav-search,
.hamburger,
#btn-stdin-toggle,
#fn-modal-cancel,
#fn-modal-ok {
transition:
background-color .16s ease,
border-color .16s ease,
color .16s ease,
box-shadow .16s ease,
transform .12s ease;
}
.tbr-btn:hover,
.ptb-icon-btn:hover,
.vsc-act-btn:hover,
.smb-btn:hover,
.diff-btn:hover,
.history-save-now-btn:hover,
.img-modal-tab:hover,
.lang-pill-btn:hover,
.btn-dark-toggle:hover,
.btn-nav-search:hover,
#btn-stdin-toggle:hover {
transform: translateY(-1px);
}
.tbr-btn:active,
.ptb-icon-btn:active,
.vsc-act-btn:active,
.smb-btn:active,
.diff-btn:active,
.history-save-now-btn:active,
.img-modal-tab:active,
.lang-pill-btn:active,
.btn-dark-toggle:active,
.btn-nav-search:active,
#btn-stdin-toggle:active {
transform: translateY(0);
}
.search-modal,
.kb-modal-box,
.share-modal-box,
.diff-modal-box,
.propose-modal-box,
.review-proposals-box,
.history-modal-box,
.img-modal-box,
.cmd-palette-box,
#fn-modal-box {
border-color: var(--tryit-control-border);
box-shadow: 0 24px 70px rgba(0,0,0,.64), 0 0 0 1px rgba(255,255,255,.04);
}
.editor-footer {
gap: 12px;
}
/* VS Code Pro editor visual refinement */
:root {
--pro-bg: #1e1e1e;
--pro-title: #181818;
--pro-chrome: #252526;
--pro-sidebar: #252526;
--pro-activity: #333333;
--pro-border: #3c3c3c;
--pro-border-soft: #2b2b2b;
--pro-hover: #2a2d2e;
--pro-active: #37373d;
--pro-selection: #094771;
--pro-blue: #007acc;
--pro-blue-soft: rgba(0,122,204,.22);
--pro-green: #16825d;
--pro-text: #cccccc;
--pro-muted: #858585;
}
body {
background: var(--pro-bg);
}
.w3s-run-bar {
height: 30px;
padding: 0 12px;
background: var(--pro-title);
border-bottom: 1px solid var(--pro-border-soft);
box-shadow: none;
}
.w3s-run-bar-title {
color: var(--pro-muted);
font-size: 12px;
font-weight: 500;
}
.w3s-run-bar-title span {
color: var(--pro-text);
font-weight: 600;
}
.w3s-run-bar-title em {
color: #75beff;
font-size: 11px;
}
.vsc-shell {
background: var(--pro-bg) !important;
color: var(--pro-text);
}
.vsc-langbar {
height: 32px !important;
background: var(--pro-title) !important;
border-bottom: 1px solid var(--pro-border-soft) !important;
gap: 8px;
}
.lang-pill-btn,
.tbr-theme-select,
.explorer-search,
.tips-search {
background: #313131 !important;
border-color: #454545 !important;
border-radius: 3px !important;
color: var(--pro-text) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.lang-pill-btn:hover,
.tbr-theme-select:hover,
.explorer-search:hover,
.tips-search:hover {
border-color: #5a5a5a !important;
background: #383838 !important;
}
.lang-pill-btn.open,
.lang-picker-search:focus,
.explorer-search:focus,
.tips-search:focus {
border-color: var(--pro-blue) !important;
box-shadow: 0 0 0 1px var(--pro-blue) !important;
}
.lang-mode-badge,
.lang-detect-badge,
.tips-lang-badge {
border-radius: 3px !important;
background: rgba(0,122,204,.16) !important;
border-color: rgba(0,122,204,.35) !important;
color: #9cdcfe !important;
letter-spacing: .03em;
}
.lang-picker-modal {
background: var(--pro-chrome) !important;
border-color: var(--pro-border) !important;
border-radius: 4px !important;
box-shadow: 0 16px 46px rgba(0,0,0,.55) !important;
}
.lang-picker-head {
border-bottom-color: var(--pro-border-soft) !important;
}
.lang-picker-item {
color: var(--pro-text);
}
.lang-picker-item:hover {
background: var(--pro-hover) !important;
}
.lang-picker-item.selected {
background: var(--pro-selection) !important;
}
.vsc-tabbar {
height: 35px !important;
background: var(--pro-chrome) !important;
border-bottom: 1px solid var(--pro-border-soft) !important;
}
.vsc-app-name {
width: 46px !important;
background: var(--pro-chrome) !important;
border-right: 1px solid var(--pro-border-soft) !important;
}
.vsc-tabs {
min-width: 0;
}
.vsc-tab,
.eft-tab {
position: relative;
min-width: 118px;
max-width: 220px;
height: 35px !important;
background: #2d2d2d !important;
border-right: 1px solid var(--pro-border-soft) !important;
border-top: 1px solid transparent !important;
color: #969696 !important;
font-size: 12.5px !important;
font-weight: 400 !important;
}
.vsc-tab:hover,
.eft-tab:hover {
background: var(--pro-active) !important;
color: var(--pro-text) !important;
}
.vsc-tab.active,
.eft-tab.active {
background: var(--pro-bg) !important;
color: #ffffff !important;
border-top-color: var(--pro-blue) !important;
box-shadow: none !important;
}
.vsc-tab.active::after,
.eft-tab.active::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background: #4fc1ff;
}
.tab-close,
.eft-close {
border-radius: 3px;
}
.vsc-tabbar-right {
background: var(--pro-chrome);
border-left-color: var(--pro-border-soft) !important;
gap: 2px !important;
}
.tbr-group {
gap: 1px;
}
.tbr-sep {
height: 18px !important;
margin: 0 5px !important;
background: rgba(255,255,255,.12) !important;
}
.tbr-btn,
.ptb-icon-btn,
.explorer-icon-btn,
.exp-ws-action-btn,
.vsc-act-btn {
border-radius: 4px !important;
color: #bfbfbf !important;
}
.tbr-btn:hover,
.ptb-icon-btn:hover,
.explorer-icon-btn:hover,
.exp-ws-action-btn:hover,
.vsc-act-btn:hover {
background: var(--pro-hover) !important;
color: #ffffff !important;
transform: none;
}
.tbr-run {
height: 27px;
margin-left: 4px;
padding: 0 14px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 4px;
background: var(--pro-green);
color: #ffffff;
box-shadow: none;
font-size: 12px;
font-weight: 700;
}
.tbr-run:hover {
background: #1f9d6a;
box-shadow: 0 0 0 1px rgba(255,255,255,.08);
transform: none;
}
.vsc-breadcrumb,
.editor-file-tabs {
background: var(--pro-bg) !important;
border-bottom: 1px solid var(--pro-border-soft) !important;
}
.vsc-breadcrumb {
height: 24px !important;
color: var(--pro-muted) !important;
}
.vsc-breadcrumb span.bc-active {
color: var(--pro-text) !important;
}
.vsc-activity-bar {
width: 48px !important;
background: var(--pro-activity) !important;
border-right: 1px solid var(--pro-border-soft) !important;
}
.vsc-act-btn {
width: 48px !important;
height: 46px !important;
color: #858585 !important;
}
.vsc-act-btn.active {
color: #ffffff !important;
}
.vsc-act-btn.active::before {
width: 2px !important;
height: 24px !important;
background: #ffffff !important;
}
.vsc-explorer,
.tips-panel,
.source-control-panel {
background: var(--pro-sidebar) !important;
border-right: 1px solid var(--pro-border-soft) !important;
}
.explorer-head,
.tips-head,
.source-control-head {
height: 35px !important;
padding: 0 8px 0 14px !important;
background: var(--pro-sidebar) !important;
border-bottom: 1px solid var(--pro-border-soft) !important;
}
.explorer-head h4,
.tips-head h4,
.source-control-head h4,
.exp-section-header {
color: #bbbbbb !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: .08em !important;
}
.exp-section-header {
height: 24px !important;
padding: 0 8px !important;
background: transparent !important;
border-top: 1px solid rgba(255,255,255,.05);
}
.exp-section-header:hover {
background: var(--pro-hover) !important;
}
.explorer-meta {
background: #202020 !important;
border-bottom: 1px solid var(--pro-border-soft) !important;
color: #9a9a9a !important;
line-height: 1.45;
}
.explorer-panel-tabs {
background: var(--pro-sidebar) !important;
border-bottom: 1px solid var(--pro-border-soft);
}
.explorer-panel-tab {
height: 28px;
border-radius: 0 !important;
color: var(--pro-muted) !important;
}
.explorer-panel-tab.active {
color: #ffffff !important;
border-bottom-color: var(--pro-blue) !important;
}
.explorer-search-wrap,
.tips-search-wrap {
padding: 8px !important;
border-bottom: 1px solid var(--pro-border-soft) !important;
}
.explorer-search,
.tips-search {
height: 26px;
padding: 3px 8px !important;
font-size: 12px !important;
}
.explorer-list,
.tips-body,
.lang-picker-items,
.console-entries,
#sim-output-body {
scrollbar-color: rgba(121,121,121,.45) transparent;
scrollbar-width: thin;
}
.explorer-file,
.explorer-folder-head {
height: 24px !important;
min-height: 24px !important;
background: transparent !important;
color: var(--pro-text) !important;
border-radius: 0 !important;
}
.explorer-file:hover,
.explorer-folder-head:hover {
background: var(--pro-hover) !important;
}
.explorer-file.active {
background: var(--pro-selection) !important;
}
.file-filename,
.explorer-folder-name {
color: var(--pro-text) !important;
font-size: 13px !important;
font-weight: 400 !important;
}
.file-lang-chip {
opacity: .95;
box-shadow: none !important;
}
.vsc-editor-side {
background: var(--pro-bg) !important;
border-right: none !important;
}
.editor-wrap {
background: var(--pro-bg);
}
.cm-s-one-dark.CodeMirror {
background: var(--pro-bg) !important;
color: #d4d4d4 !important;
font-family: 'Cascadia Code','Fira Code','Consolas','Courier New',monospace !important;
font-size: 13.5px !important;
line-height: 1.55 !important;
letter-spacing: 0 !important;
}
.cm-s-one-dark .CodeMirror-scroll {
background: var(--pro-bg) !important;
}
.cm-s-one-dark .CodeMirror-lines {
padding: 8px 0 !important;
}
.cm-s-one-dark .CodeMirror-gutters {
background: var(--pro-bg) !important;
border-right: 1px solid var(--pro-border-soft) !important;
box-shadow: inset -1px 0 0 rgba(255,255,255,.02);
}
.cm-s-one-dark .CodeMirror-linenumber {
color: var(--pro-muted) !important;
font-size: 12px !important;
padding: 0 12px 0 8px !important;
}
.cm-s-one-dark .CodeMirror-activeline-background {
background: rgba(255,255,255,.045) !important;
}
.cm-s-one-dark .CodeMirror-activeline-gutter,
.cm-s-one-dark .CodeMirror-activeline-gutter .CodeMirror-linenumber {
background: transparent !important;
color: #c6c6c6 !important;
}
.cm-s-one-dark .CodeMirror-selected {
background: #264f78 !important;
}
.cm-s-one-dark .CodeMirror-cursor {
border-left: 2px solid #aeafad !important;
}
.CodeMirror-focused .CodeMirror-matchingbracket {
background: rgba(0,122,204,.28) !important;
outline: 1px solid rgba(0,122,204,.9) !important;
color: #ffffff !important;
}
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
padding-left: 8px !important;
}
.CodeMirror-foldgutter {
width: 14px !important;
}
.CodeMirror-foldgutter-open,
.CodeMirror-foldgutter-folded {
color: #858585 !important;
}
.CodeMirror-hints,
.CodeMirror-dialog,
.cmd-palette-box {
background: #252526 !important;
border-color: #454545 !important;
box-shadow: 0 16px 48px rgba(0,0,0,.55) !important;
}
.CodeMirror-hint {
color: var(--pro-text) !important;
}
li.CodeMirror-hint-active,
.cmd-item.active {
background: var(--pro-selection) !important;
color: #ffffff !important;
}
.vsc-minimap {
width: 64px !important;
background: #1b1b1b !important;
border-left: 1px solid var(--pro-border-soft) !important;
opacity: .82;
}
.mm-line {
margin-left: 6px !important;
margin-right: 6px !important;
}
.vsc-resize {
width: 2px !important;
background: var(--pro-border-soft) !important;
}
.vsc-resize:hover,
.vsc-resize.active {
width: 2px !important;
background: var(--pro-blue) !important;
}
.vsc-preview-side {
background: var(--pro-bg) !important;
border-left: 1px solid var(--pro-border-soft);
}
.preview-titlebar,
.sim-bar,
.console-titlebar,
.stdin-titlebar {
height: 34px !important;
background: var(--pro-title) !important;
border-bottom: 1px solid var(--pro-border-soft) !important;
}
.traffic-dot {
width: 9px !important;
height: 9px !important;
opacity: .75;
}
.ptb-urlbar {
height: 24px;
background: #2b2b2b !important;
border-color: #454545 !important;
border-radius: 3px !important;
max-width: none !important;
}
.ptb-url-text,
#result-size,
.console-titlebar span,
.stdin-hint {
color: #969696 !important;
font-weight: 400 !important;
}
#preview-frame {
background: #ffffff;
}
#sim-output,
.vsc-console,
.vsc-stdin {
background: var(--pro-bg) !important;
border-top: 1px solid var(--pro-border-soft) !important;
box-shadow: none !important;
}
#sim-output-body,
.console-entries,
#stdin-area {
background: var(--pro-bg) !important;
color: var(--pro-text) !important;
font-family: 'Cascadia Code','Fira Code','Consolas','Courier New',monospace !important;
}
.vsc-statusbar {
height: 22px !important;
background: var(--pro-blue) !important;
border-top: 1px solid rgba(255,255,255,.08);
color: #ffffff !important;
}
.vsc-statusbar > *,
.vsc-statusbar .sb-right > * {
min-height: 22px;
padding: 0 8px !important;
color: #ffffff !important;
font-size: 11px !important;
}
.vsc-statusbar .sb-branding {
background: rgba(0,0,0,.18);
font-weight: 600;
}
.vsc-statusbar > *:hover,
.vsc-statusbar .sb-right > *:hover {
background: rgba(255,255,255,.16) !important;
}
.sb-lint-badge.ok {
background: rgba(22,130,93,.45) !important;
}
.sb-lint-badge.err {
background: rgba(244,135,113,.45) !important;
}
@media (max-width: 900px) {
.top-nav {
padding: 0 10px !important;
}
.logo-badge {
display: none;
}
.vsc-tabbar,
.vsc-langbar {
min-width: 0;
}
.vsc-statusbar {
min-height: 24px;
overflow: hidden;
}
.vsc-statusbar .sb-right {
overflow-x: auto;
scrollbar-width: none;
}
.vsc-statusbar .sb-right::-webkit-scrollbar {
display: none;
}
.editor-footer {
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
}
@media (max-width: 640px) {
.w3s-run-bar {
padding: 0 10px;
}
.w3s-run-bar-title {
max-width: 70vw;
}
.vsc-langbar {
height: auto;
min-height: 42px;
flex-wrap: wrap;
gap: 6px;
padding-top: 6px;
padding-bottom: 6px;
}
.shared-mode-bar,
#space-context-bar,
#collab-update-bar {
height: auto;
min-height: 38px;
flex-wrap: wrap;
gap: 8px;
padding-top: 6px;
padding-bottom: 6px;
}
.smb-actions {
width: 100%;
overflow-x: auto;
padding-bottom: 2px;
scrollbar-width: none;
}
.smb-actions::-webkit-scrollbar {
display: none;
}
.search-modal,
.kb-modal-box,
.share-modal-box,
.diff-modal-box,
.propose-modal-box,
.review-proposals-box,
.history-modal-box,
.img-modal-box,
.cmd-palette-box,
#fn-modal-box {
max-width: calc(100vw - 24px);
}
}
/* ═══════════════════════════════════════════════════════════
Professional UI polish - final visual layer
═══════════════════════════════════════════════════════════ */
:root {
--ui-canvas: #0f1319;
--ui-surface: #151a22;
--ui-surface-2: #1a202a;
--ui-surface-3: #202733;
--ui-border: rgba(148,163,184,.16);
--ui-border-strong: rgba(148,163,184,.28);
--ui-text: #d8dee9;
--ui-muted: #8f9bad;
--ui-blue: #3b82f6;
--ui-green: #16a36f;
--ui-focus: rgba(59,130,246,.36);
}
body {
background: var(--ui-canvas) !important;
color: var(--ui-text) !important;
}
.top-nav {
height: 46px !important;
min-height: 46px !important;
background: rgba(17,24,34,.96) !important;
border-bottom: 1px solid var(--ui-border) !important;
box-shadow: none !important;
}
.top-nav .logo {
font-weight: 800;
}
.top-nav .logo-badge {
border-radius: 6px !important;
background: rgba(59,130,246,.14) !important;
border: 1px solid rgba(59,130,246,.24) !important;
color: #bfdbfe !important;
}
.nav-links a,
.nav-auth-cluster a,
.nav-drop-btn {
border-radius: 6px !important;
letter-spacing: 0 !important;
}
.w3s-run-bar {
height: 36px !important;
padding: 0 14px !important;
background: var(--ui-surface) !important;
border-bottom: 1px solid var(--ui-border) !important;
box-shadow: none !important;
}
.w3s-run-bar-title {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
color: var(--ui-text) !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
}
.w3s-run-bar-title em {
color: var(--ui-muted);
font-size: 12px;
font-style: normal;
font-weight: 500;
}
.w3s-run-bar-right {
display: flex;
align-items: center;
gap: 6px;
}
.runbar-pill {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 8px;
border: 1px solid rgba(22,163,127,.28);
border-radius: 999px;
background: rgba(22,163,127,.12);
color: #a7f3d0;
font-size: 11px;
font-weight: 650;
white-space: nowrap;
}
.runbar-pill-muted {
border-color: var(--ui-border);
background: rgba(148,163,184,.08);
color: var(--ui-muted);
}
.vsc-shell {
background: var(--ui-canvas) !important;
}
.vsc-langbar,
.vsc-breadcrumb,
.editor-file-tabs {
background: var(--ui-surface) !important;
border-bottom: 1px solid var(--ui-border) !important;
}
.vsc-langbar {
height: 38px !important;
gap: 10px !important;
padding: 0 12px !important;
}
.lang-pill-btn,
.lang-mode-badge,
.lang-detect-badge,
#btn-stdin-toggle {
border-radius: 6px !important;
letter-spacing: 0 !important;
}
.lang-pill-btn {
height: 28px !important;
background: var(--ui-surface-2) !important;
border: 1px solid var(--ui-border-strong) !important;
}
.lang-mode-badge.badge-live {
background: rgba(22,163,127,.12) !important;
border: 1px solid rgba(22,163,127,.25) !important;
color: #a7f3d0 !important;
}
.lang-mode-badge.badge-local {
background: rgba(14,165,233,.12) !important;
border: 1px solid rgba(14,165,233,.25) !important;
color: #bae6fd !important;
}
.vsc-tabbar {
min-height: 42px !important;
background: #111820 !important;
border-bottom: 1px solid var(--ui-border) !important;
box-shadow: none !important;
}
.vsc-app-name {
width: 42px !important;
border-right: 1px solid var(--ui-border) !important;
}
.vsc-tabs {
align-items: flex-end !important;
gap: 2px !important;
padding-left: 6px !important;
}
.vsc-tab {
position: relative;
min-width: 104px !important;
height: 34px !important;
margin-top: 4px !important;
padding: 0 10px !important;
border: 1px solid transparent !important;
border-bottom: 0 !important;
border-radius: 6px 6px 0 0 !important;
background: transparent !important;
color: var(--ui-muted) !important;
letter-spacing: 0 !important;
}
.vsc-tab:hover {
background: rgba(255,255,255,.04) !important;
color: var(--ui-text) !important;
}
.vsc-tab.active {
background: var(--ui-surface-2) !important;
border-color: var(--ui-border) !important;
color: #ffffff !important;
}
.vsc-tab.active::after {
content: '';
position: absolute;
left: 10px;
right: 10px;
bottom: 0;
height: 2px;
border-radius: 2px 2px 0 0;
background: var(--ui-blue);
}
.vsc-tabbar-right {
gap: 6px !important;
padding: 5px 10px !important;
overflow-x: auto !important;
scrollbar-width: none;
}
.vsc-tabbar-right::-webkit-scrollbar {
display: none;
}
.tbr-group {
gap: 4px !important;
}
.tbr-sep {
width: 1px !important;
height: 20px !important;
background: var(--ui-border) !important;
margin: 0 2px !important;
}
.tbr-theme-select,
.tbr-btn,
.tbr-btn-palette,
.tbr-run,
.ptb-btn,
.ptb-icon-btn,
.explorer-icon-btn,
.exp-ws-action-btn {
border-radius: 6px !important;
letter-spacing: 0 !important;
}
.tbr-theme-select {
height: 30px !important;
background: var(--ui-surface-2) !important;
border: 1px solid var(--ui-border) !important;
color: var(--ui-text) !important;
}
.tbr-btn,
.tbr-btn-palette {
height: 30px !important;
min-width: 30px !important;
background: transparent !important;
border: 1px solid transparent !important;
color: #aab4c2 !important;
box-shadow: none !important;
}
.tbr-btn:hover,
.tbr-btn-palette:hover {
background: var(--ui-surface-3) !important;
border-color: var(--ui-border-strong) !important;
color: #ffffff !important;
transform: none !important;
}
.tbr-run {
height: 30px !important;
padding: 0 14px !important;
background: var(--ui-green) !important;
border: 1px solid rgba(255,255,255,.12) !important;
color: #ffffff !important;
box-shadow: none !important;
font-weight: 800 !important;
}
.tbr-run:hover {
background: #13875f !important;
transform: none !important;
}
.vsc-main {
background: #0d1117 !important;
}
.vsc-activity-bar {
width: 46px !important;
background: #111820 !important;
border-right: 1px solid var(--ui-border) !important;
}
.vsc-act-btn {
width: 36px !important;
height: 36px !important;
border-radius: 6px !important;
color: #7d899b !important;
}
.vsc-act-btn:hover {
background: rgba(255,255,255,.06) !important;
color: #ffffff !important;
}
.vsc-act-btn.active {
background: rgba(59,130,246,.14) !important;
color: #dbeafe !important;
}
.vsc-act-btn.active::before {
width: 3px !important;
background: var(--ui-blue) !important;
}
.vsc-explorer,
.tips-panel,
.source-control-panel {
background: #141922 !important;
border-right: 1px solid var(--ui-border) !important;
}
.explorer-head,
.tips-head,
.source-control-head {
min-height: 38px !important;
background: #141922 !important;
border-bottom: 1px solid var(--ui-border) !important;
}
.explorer-head h4,
.tips-head h4,
.source-control-head h4,
.explorer-panel-tab,
.exp-section-header {
letter-spacing: 0 !important;
}
.explorer-search,
.tips-search,
.lang-picker-search {
height: 30px !important;
border-radius: 6px !important;
background: #0f141c !important;
border: 1px solid var(--ui-border) !important;
color: var(--ui-text) !important;
}
.explorer-search:focus,
.tips-search:focus,
.lang-picker-search:focus {
border-color: rgba(59,130,246,.65) !important;
box-shadow: 0 0 0 3px var(--ui-focus) !important;
}
.explorer-file,
.explorer-folder-head,
.tip-card {
border-radius: 6px !important;
}
.explorer-file:hover,
.explorer-folder-head:hover,
.tip-card:hover {
background: rgba(255,255,255,.055) !important;
}
.vsc-editor-side {
background: #111820 !important;
border-right: 1px solid var(--ui-border) !important;
}
.editor-wrap,
.cm-s-one-dark.CodeMirror,
.cm-s-one-dark .CodeMirror-scroll,
.cm-s-one-dark .CodeMirror-gutters {
background: #111820 !important;
}
.cm-s-one-dark.CodeMirror {
color: #d7deea !important;
font-size: 13.5px !important;
}
.cm-s-one-dark .CodeMirror-lines {
padding: 12px 0 !important;
}
.cm-s-one-dark .CodeMirror-linenumber {
color: #647083 !important;
}
.cm-s-one-dark .CodeMirror-activeline-background {
background: rgba(255,255,255,.045) !important;
}
.cm-s-one-dark .CodeMirror-cursor {
border-left-color: #e5e7eb !important;
}
.cm-s-one-dark .CodeMirror-selected {
background: rgba(59,130,246,.34) !important;
}
.vsc-resize {
width: 5px !important;
background: linear-gradient(90deg, transparent 0, transparent 2px, var(--ui-border) 2px, var(--ui-border) 3px, transparent 3px) !important;
}
.vsc-resize:hover,
.vsc-resize.active {
background: var(--ui-blue) !important;
}
.vsc-preview-side {
background: #ffffff !important;
border-left: 1px solid var(--ui-border) !important;
}
.preview-titlebar,
.console-titlebar,
.stdin-titlebar,
.sim-bar {
height: 36px !important;
background: #f8fafc !important;
border-bottom: 1px solid #dbe3ee !important;
}
.preview-titlebar span:not(.traffic-dot),
.ptb-url-text {
color: #526071 !important;
letter-spacing: 0 !important;
}
.ptb-urlbar {
max-width: none !important;
height: 26px !important;
background: #ffffff !important;
border: 1px solid #dbe3ee !important;
border-radius: 6px !important;
box-shadow: none !important;
}
.ptb-btn,
.ptb-icon-btn {
min-height: 26px !important;
background: #ffffff !important;
border: 1px solid #dbe3ee !important;
color: #526071 !important;
}
.ptb-btn:hover,
.ptb-icon-btn:hover {
background: #f1f5f9 !important;
color: #111827 !important;
transform: none !important;
}
#preview-frame {
background: #ffffff !important;
}
.vsc-console,
.vsc-stdin,
#sim-output {
border-top: 1px solid var(--ui-border) !important;
background: #0f141c !important;
}
.vsc-console .console-titlebar,
.vsc-stdin .stdin-titlebar,
#sim-output .sim-bar {
background: #111820 !important;
border-bottom: 1px solid var(--ui-border) !important;
}
.console-entries,
#sim-output-body,
#stdin-area {
background: #0f141c !important;
color: #d6deeb !important;
}
.vsc-statusbar {
height: 24px !important;
background: #1d4f8f !important;
border-top: 1px solid rgba(255,255,255,.10) !important;
box-shadow: none !important;
}
.vsc-statusbar > *,
.vsc-statusbar .sb-right > * {
min-height: 24px !important;
padding: 0 8px !important;
color: #ffffff !important;
font-size: 11px !important;
letter-spacing: 0 !important;
}
.vsc-statusbar .sb-branding {
background: rgba(0,0,0,.20) !important;
}
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="menuitem"]:focus-visible {
outline: 2px solid #93c5fd !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 4px var(--ui-focus) !important;
}
@media (max-width: 900px) {
.top-nav {
height: 44px !important;
min-height: 44px !important;
}
.vsc-tabbar-right {
flex: 1 1 auto !important;
min-width: 0 !important;
}
.vsc-tab {
min-width: 92px !important;
}
}
@media (max-width: 700px) {
.w3s-run-bar {
height: 32px !important;
}
.w3s-run-bar-right {
display: none !important;
}
.vsc-langbar,
.vsc-tabbar,
.vsc-breadcrumb {
min-width: 0 !important;
}
.vsc-tabbar-right {
padding-right: 8px !important;
}
.vsc-editor-side {
height: 56% !important;
}
.vsc-preview-side {
height: 44% !important;
}
.vsc-resize {
width: 100% !important;
height: 5px !important;
background: var(--ui-border) !important;
}
}
@media (max-width: 480px) {
#btn-fmt,
#btn-copy-code,
#btn-dl {
display: inline-flex !important;
}
.tbr-btn-palette kbd,
.w3s-run-bar-title em {
display: none !important;
}
.tbr-run {
min-width: 64px !important;
}
.vsc-statusbar .sb-right {
max-width: 60vw;
}
}
/* Studio polish layer - final overrides for the production editor */
:root {
--studio-page: #0b0f14;
--studio-shell: #0f141b;
--studio-panel: #121821;
--studio-panel-2: #171f29;
--studio-panel-3: #1d2632;
--studio-editor: #0f141b;
--studio-gutter: #0b1016;
--studio-border: rgba(148,163,184,.18);
--studio-border-strong: rgba(148,163,184,.32);
--studio-text: #e5e7eb;
--studio-muted: #94a3b8;
--studio-faint: #64748b;
--studio-blue: #4f8cff;
--studio-green: #17a673;
--studio-red: #ef4444;
--studio-yellow: #eab308;
--studio-focus: rgba(79,140,255,.28);
}
html,
body {
background: var(--studio-page) !important;
}
.top-nav {
height: 48px !important;
min-height: 48px !important;
padding: 0 18px !important;
background: #0d1218 !important;
border-bottom: 1px solid var(--studio-border) !important;
box-shadow: 0 1px 0 rgba(255,255,255,.03) !important;
}
.top-nav .logo {
gap: 10px !important;
font-size: 16px !important;
letter-spacing: 0 !important;
}
.logo-accent {
background: none !important;
-webkit-text-fill-color: currentColor !important;
color: #93c5fd !important;
}
.logo-badge {
height: 22px !important;
padding: 0 8px !important;
border-radius: 5px !important;
display: inline-flex !important;
align-items: center !important;
background: rgba(79,140,255,.12) !important;
border: 1px solid rgba(79,140,255,.26) !important;
color: #bfdbfe !important;
box-shadow: none !important;
}
.nav-links {
gap: 4px !important;
}
.nav-links a,
.nav-drop-btn,
.btn-dark-toggle,
.btn-nav-search {
border-radius: 6px !important;
color: #aab4c2 !important;
}
.nav-links a:hover,
.nav-links a.active,
.nav-drop-btn:hover,
.nav-drop-btn[aria-expanded="true"],
.btn-dark-toggle:hover,
.btn-nav-search:hover {
background: var(--studio-panel-3) !important;
color: #ffffff !important;
}
.nav-drop-menu,
.search-modal,
.lang-picker-modal,
.CodeMirror-hints,
.cmd-palette-box,
.kb-modal-box,
.share-modal-box,
.history-modal-box,
.img-modal-box,
.diff-modal-box,
.propose-modal-box,
.review-proposals-box,
#fn-modal-box {
background: var(--studio-panel) !important;
border: 1px solid var(--studio-border-strong) !important;
border-radius: 8px !important;
box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.04) inset !important;
}
.vsc-shell {
background: var(--studio-shell) !important;
color: var(--studio-text) !important;
}
.vsc-langbar,
.vsc-tabbar,
.vsc-breadcrumb,
.editor-file-tabs {
background: #0d1218 !important;
border-bottom: 1px solid var(--studio-border) !important;
}
.vsc-langbar {
height: 40px !important;
padding: 0 14px !important;
gap: 10px !important;
}
.lang-pill-btn,
.tbr-theme-select,
#btn-stdin-toggle {
height: 30px !important;
border-radius: 6px !important;
background: var(--studio-panel-2) !important;
border: 1px solid var(--studio-border) !important;
color: var(--studio-text) !important;
box-shadow: none !important;
}
.lang-pill-btn:hover,
.tbr-theme-select:hover,
#btn-stdin-toggle:hover {
border-color: var(--studio-border-strong) !important;
background: var(--studio-panel-3) !important;
}
.lang-mode-badge,
.lang-detect-badge,
.tips-lang-badge {
height: 24px !important;
border-radius: 999px !important;
padding: 0 9px !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
.lang-mode-badge.badge-live {
background: rgba(23,166,115,.13) !important;
border-color: rgba(23,166,115,.32) !important;
color: #b7f7db !important;
}
.lang-mode-badge.badge-local {
background: rgba(14,165,233,.13) !important;
border-color: rgba(14,165,233,.32) !important;
color: #bae6fd !important;
}
.vsc-tabbar {
min-height: 44px !important;
}
.vsc-app-name {
width: 48px !important;
background: #0d1218 !important;
border-right: 1px solid var(--studio-border) !important;
}
.vsc-tabs {
align-items: flex-end !important;
gap: 3px !important;
padding-left: 8px !important;
min-width: 0 !important;
}
.vsc-tab,
.eft-tab {
height: 36px !important;
min-width: 106px !important;
max-width: 220px !important;
margin-top: 4px !important;
padding: 0 11px !important;
border: 1px solid transparent !important;
border-bottom: 0 !important;
border-radius: 7px 7px 0 0 !important;
background: transparent !important;
color: var(--studio-muted) !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
}
.vsc-tab:hover,
.eft-tab:hover {
background: rgba(255,255,255,.045) !important;
color: var(--studio-text) !important;
}
.vsc-tab.active,
.eft-tab.active {
background: var(--studio-panel-2) !important;
border-color: var(--studio-border) !important;
color: #ffffff !important;
}
.vsc-tab.active::after,
.eft-tab.active::after {
left: 10px !important;
right: 10px !important;
top: auto !important;
bottom: 0 !important;
height: 2px !important;
border-radius: 2px 2px 0 0 !important;
background: var(--studio-blue) !important;
}
.vsc-tabbar-right {
min-width: 0 !important;
padding: 6px 12px !important;
gap: 6px !important;
background: #0d1218 !important;
border-left: 1px solid var(--studio-border) !important;
overflow-x: auto !important;
scrollbar-width: none !important;
}
.vsc-tabbar-right::-webkit-scrollbar {
display: none !important;
}
.tbr-group {
gap: 4px !important;
}
.tbr-sep {
width: 1px !important;
height: 22px !important;
margin: 0 2px !important;
background: var(--studio-border) !important;
}
.tbr-btn,
.tbr-btn-palette,
.ptb-icon-btn,
.ptb-btn,
.explorer-icon-btn,
.exp-ws-action-btn,
.vsc-act-btn,
.btn-sim-copy,
.btn-console-clear {
border-radius: 6px !important;
box-shadow: none !important;
}
.tbr-btn,
.tbr-btn-palette {
height: 30px !important;
min-width: 30px !important;
border: 1px solid transparent !important;
background: transparent !important;
color: #aab4c2 !important;
}
.tbr-btn:hover,
.tbr-btn-palette:hover {
background: var(--studio-panel-3) !important;
border-color: var(--studio-border) !important;
color: #ffffff !important;
transform: none !important;
}
.tbr-btn svg,
.tbr-btn-palette svg,
.tbr-run svg,
.ptb-icon-btn svg,
.explorer-icon-btn svg,
.vsc-act-btn svg {
flex-shrink: 0 !important;
}
.tbr-btn-palette {
gap: 7px !important;
padding: 0 10px !important;
white-space: nowrap !important;
font-weight: 700 !important;
}
.tbr-btn-palette kbd {
padding: 1px 5px !important;
border-radius: 4px !important;
background: rgba(255,255,255,.08) !important;
border: 1px solid rgba(255,255,255,.12) !important;
color: #cbd5e1 !important;
font-size: 10px !important;
font-family: 'Fira Code', Consolas, monospace !important;
}
.tbr-run {
height: 30px !important;
min-width: 78px !important;
padding: 0 14px !important;
gap: 7px !important;
border-radius: 6px !important;
border: 1px solid rgba(255,255,255,.12) !important;
background: var(--studio-green) !important;
color: #ffffff !important;
box-shadow: 0 8px 20px rgba(23,166,115,.18) !important;
font-weight: 800 !important;
}
.tbr-run:hover {
background: #139565 !important;
box-shadow: 0 10px 24px rgba(23,166,115,.24) !important;
transform: none !important;
}
.vsc-main {
background: var(--studio-shell) !important;
}
.vsc-activity-bar {
width: 48px !important;
padding: 8px 6px !important;
gap: 4px !important;
background: #0d1218 !important;
border-right: 1px solid var(--studio-border) !important;
}
.vsc-act-btn {
width: 36px !important;
height: 36px !important;
color: #8390a2 !important;
background: transparent !important;
}
.vsc-act-btn:hover {
background: rgba(255,255,255,.06) !important;
color: #ffffff !important;
}
.vsc-act-btn.active {
background: rgba(79,140,255,.13) !important;
color: #dbeafe !important;
}
.vsc-act-btn.active::before {
left: -6px !important;
width: 3px !important;
height: 24px !important;
background: var(--studio-blue) !important;
}
.vsc-explorer,
.tips-panel,
.source-control-panel {
width: 260px !important;
background: var(--studio-panel) !important;
border-right: 1px solid var(--studio-border) !important;
}
.explorer-head,
.tips-head,
.source-control-head {
height: 40px !important;
min-height: 40px !important;
padding: 0 10px 0 14px !important;
background: var(--studio-panel) !important;
border-bottom: 1px solid var(--studio-border) !important;
}
.explorer-head h4,
.tips-head h4,
.source-control-head h4,
.exp-section-header,
.explorer-panel-tab {
color: #c4ccd8 !important;
letter-spacing: 0 !important;
}
.explorer-actions {
opacity: 1 !important;
gap: 2px !important;
}
.explorer-icon-btn,
.exp-ws-action-btn {
width: 26px !important;
height: 26px !important;
color: #98a4b5 !important;
}
.explorer-icon-btn:hover,
.exp-ws-action-btn:hover {
background: var(--studio-panel-3) !important;
color: #ffffff !important;
}
.explorer-meta {
background: #0f151d !important;
color: var(--studio-muted) !important;
border-bottom: 1px solid var(--studio-border) !important;
}
.explorer-panel-tabs {
border-bottom: 1px solid var(--studio-border) !important;
}
.explorer-panel-tab {
height: 32px !important;
border-radius: 0 !important;
}
.explorer-panel-tab.active {
color: #ffffff !important;
border-bottom-color: var(--studio-blue) !important;
}
.explorer-search-wrap,
.tips-search-wrap {
padding: 10px !important;
border-bottom: 1px solid var(--studio-border) !important;
}
.explorer-search,
.tips-search,
.lang-picker-search,
#global-search,
#fn-modal-input,
.propose-textarea,
.diff-comment-box {
height: 32px !important;
border-radius: 6px !important;
background: #0c1118 !important;
border: 1px solid var(--studio-border) !important;
color: var(--studio-text) !important;
box-shadow: none !important;
}
.explorer-search:focus,
.tips-search:focus,
.lang-picker-search:focus,
#global-search:focus,
#fn-modal-input:focus,
.propose-textarea:focus,
.diff-comment-box:focus {
border-color: rgba(79,140,255,.72) !important;
box-shadow: 0 0 0 3px var(--studio-focus) !important;
}
.explorer-list {
padding: 8px !important;
gap: 3px !important;
}
.explorer-file,
.explorer-folder-head,
.exp-open-editor-item,
.tip-card {
border-radius: 6px !important;
}
.explorer-file,
.explorer-folder-head {
height: 26px !important;
min-height: 26px !important;
padding-left: 8px !important;
}
.explorer-file:hover,
.explorer-folder-head:hover,
.exp-open-editor-item:hover,
.tip-card:hover {
background: rgba(255,255,255,.055) !important;
}
.explorer-file.active,
.exp-open-editor-item.active {
background: rgba(79,140,255,.20) !important;
box-shadow: inset 2px 0 0 var(--studio-blue) !important;
}
.file-filename,
.explorer-folder-name,
.exp-open-editor-item .eoe-name {
color: #d7dde6 !important;
font-size: 13px !important;
}
.file-lang-chip {
min-width: 30px !important;
border-radius: 5px !important;
padding: 2px 5px !important;
}
.explorer-empty {
color: var(--studio-muted) !important;
text-align: left !important;
}
.vsc-editor-side {
background: var(--studio-editor) !important;
border-right: 1px solid var(--studio-border) !important;
}
.editor-wrap,
.CodeMirror,
.cm-s-one-dark.CodeMirror,
.cm-s-one-dark .CodeMirror-scroll {
background: var(--studio-editor) !important;
}
.cm-s-one-dark.CodeMirror {
color: #d9e2ef !important;
font-family: 'Fira Code','Cascadia Code','Consolas','Courier New',monospace !important;
font-size: 14px !important;
line-height: 1.62 !important;
letter-spacing: 0 !important;
}
.cm-s-one-dark .CodeMirror-lines {
padding: 12px 0 14px !important;
}
.cm-s-one-dark .CodeMirror-gutters {
background: var(--studio-gutter) !important;
border-right: 1px solid rgba(148,163,184,.12) !important;
box-shadow: inset -1px 0 0 rgba(255,255,255,.02) !important;
}
.cm-s-one-dark .CodeMirror-linenumber {
color: #66758a !important;
padding: 0 12px 0 8px !important;
}
.cm-s-one-dark .CodeMirror-activeline-background {
background: rgba(148,163,184,.08) !important;
}
.cm-s-one-dark .CodeMirror-activeline-gutter,
.cm-s-one-dark .CodeMirror-activeline-gutter .CodeMirror-linenumber {
background: rgba(148,163,184,.04) !important;
color: #cbd5e1 !important;
}
.cm-s-one-dark .CodeMirror-selected {
background: rgba(79,140,255,.34) !important;
}
.CodeMirror-focused .CodeMirror-matchingbracket {
background: rgba(79,140,255,.26) !important;
outline: 1px solid rgba(147,197,253,.85) !important;
color: #ffffff !important;
}
.vsc-minimap {
width: 58px !important;
background: rgba(5,8,12,.42) !important;
border-left: 1px solid rgba(148,163,184,.12) !important;
opacity: .72 !important;
}
.vsc-resize {
width: 6px !important;
background: linear-gradient(90deg, transparent 0, transparent 2px, var(--studio-border) 2px, var(--studio-border) 4px, transparent 4px) !important;
}
.vsc-resize:hover,
.vsc-resize.active {
background: var(--studio-blue) !important;
}
.vsc-preview-side {
background: #f8fafc !important;
border-left: 1px solid var(--studio-border) !important;
}
.preview-titlebar {
height: 40px !important;
padding: 0 12px !important;
background: #eef2f7 !important;
border-bottom: 1px solid #d8e0ec !important;
}
.ptb-urlbar {
height: 28px !important;
border-radius: 7px !important;
background: #ffffff !important;
border: 1px solid #d8e0ec !important;
}
.preview-titlebar span:not(.traffic-dot),
.ptb-url-text,
#result-size {
color: #526071 !important;
font-size: 11.5px !important;
letter-spacing: 0 !important;
}
.ptb-btn,
.ptb-icon-btn {
min-height: 28px !important;
border: 1px solid #d8e0ec !important;
background: #ffffff !important;
color: #526071 !important;
}
.ptb-btn:hover,
.ptb-icon-btn:hover {
background: #e8eef6 !important;
color: #111827 !important;
transform: none !important;
}
.vsc-preview-side.sim-mode,
.vsc-preview-side.sim-mode .preview-titlebar,
.vsc-console .console-titlebar,
.vsc-stdin .stdin-titlebar,
#sim-output .sim-bar {
background: var(--studio-panel) !important;
border-bottom-color: var(--studio-border) !important;
}
.vsc-preview-side.sim-mode .ptb-urlbar,
.vsc-preview-side.sim-mode .ptb-btn,
.vsc-preview-side.sim-mode .ptb-icon-btn {
background: var(--studio-panel-2) !important;
border-color: var(--studio-border) !important;
color: var(--studio-muted) !important;
}
.vsc-preview-side.sim-mode .preview-titlebar span:not(.traffic-dot),
.vsc-preview-side.sim-mode .ptb-url-text {
color: var(--studio-muted) !important;
}
.vsc-console,
.vsc-stdin,
#sim-output,
.vsc-terminal,
.console-entries,
#sim-output-body,
#stdin-area,
.terminal-output,
.terminal-input-row {
background: #0b1016 !important;
color: #d9e2ef !important;
}
.vsc-terminal {
display: none;
flex-direction: column;
height: 220px;
min-height: 150px;
flex-shrink: 0;
border-top: 1px solid var(--studio-border) !important;
box-shadow: 0 -12px 30px rgba(0,0,0,.22) !important;
overflow: hidden;
}
.vsc-terminal.open {
display: flex;
}
.terminal-titlebar {
height: 34px;
min-height: 34px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 10px;
background: var(--studio-panel) !important;
border-bottom: 1px solid var(--studio-border) !important;
color: var(--studio-muted);
-webkit-user-select: none;
user-select: none;
}
.terminal-title {
color: #d7dde6;
font-size: 11px;
font-weight: 800;
letter-spacing: .06em;
}
.terminal-pill {
height: 20px;
display: inline-flex;
align-items: center;
padding: 0 7px;
border-radius: 999px;
background: rgba(23,166,115,.14);
border: 1px solid rgba(23,166,115,.28);
color: #bbf7d0;
font-size: 11px;
font-weight: 700;
}
.terminal-hint {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 11px;
color: var(--studio-muted);
}
.terminal-clear {
margin-left: auto;
height: 24px;
padding: 0 9px;
border: 1px solid var(--studio-border);
border-radius: 6px;
background: transparent;
color: var(--studio-muted);
cursor: pointer;
font-size: 11px;
font-weight: 700;
}
.terminal-clear:hover {
background: var(--studio-panel-3);
color: #ffffff;
}
.terminal-output {
flex: 1;
overflow: auto;
padding: 10px 12px 8px;
font-family: 'Fira Code','Cascadia Code','Consolas',monospace;
font-size: 12.5px;
line-height: 1.65;
}
.terminal-line {
white-space: pre-wrap;
word-break: break-word;
color: #d9e2ef;
}
.terminal-line.cmd { color: #93c5fd; }
.terminal-line.ok { color: #bbf7d0; }
.terminal-line.warn { color: #fde68a; }
.terminal-line.err { color: #fecaca; }
.terminal-line.muted { color: #94a3b8; }
.terminal-input-row {
min-height: 34px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 12px;
border-top: 1px solid rgba(148,163,184,.12);
font-family: 'Fira Code','Cascadia Code','Consolas',monospace;
font-size: 12.5px;
}
.terminal-prompt {
flex-shrink: 0;
color: #93c5fd;
white-space: nowrap;
}
.terminal-input {
flex: 1;
min-width: 0;
height: 28px;
border: 0;
outline: 0;
background: transparent;
color: #ffffff;
font: inherit;
}
.terminal-input::placeholder {
color: rgba(148,163,184,.55);
}
.vsc-statusbar {
height: 26px !important;
background: #0d1218 !important;
border-top: 1px solid var(--studio-border) !important;
box-shadow: none !important;
}
.vsc-statusbar > *,
.vsc-statusbar .sb-right > * {
min-height: 26px !important;
padding: 0 9px !important;
color: #cbd5e1 !important;
font-size: 11px !important;
letter-spacing: 0 !important;
}
.vsc-statusbar .sb-branding {
background: rgba(79,140,255,.18) !important;
color: #dbeafe !important;
font-weight: 700 !important;
}
.vsc-statusbar > *:hover,
.vsc-statusbar .sb-right > *:hover,
.sb-toggle-item:hover {
background: rgba(255,255,255,.07) !important;
color: #ffffff !important;
}
.vsc-statusbar.has-errors {
background: #5f1720 !important;
}
.sb-lint-badge.ok {
background: rgba(23,166,115,.20) !important;
color: #bbf7d0 !important;
}
.sb-lint-badge.err {
background: rgba(239,68,68,.20) !important;
color: #fecaca !important;
}
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="menuitem"]:focus-visible {
outline: 2px solid #93c5fd !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 4px var(--studio-focus) !important;
}
@media (max-width: 980px) {
.nav-links {
gap: 1px !important;
}
.nav-links a {
padding-left: 8px !important;
padding-right: 8px !important;
}
.tbr-btn-palette kbd,
.tbr-sep:nth-of-type(2) {
display: none !important;
}
.vsc-explorer,
.tips-panel,
.source-control-panel {
width: 230px !important;
}
.vsc-statusbar .sb-right {
overflow-x: auto !important;
scrollbar-width: none !important;
}
.vsc-statusbar .sb-right::-webkit-scrollbar {
display: none !important;
}
}
@media (max-width: 700px) {
.top-nav {
padding: 0 12px !important;
}
.logo-badge,
.vsc-app-name,
.vsc-breadcrumb {
display: none !important;
}
.vsc-langbar {
min-height: 44px !important;
height: auto !important;
flex-wrap: wrap !important;
padding: 6px 10px !important;
}
.vsc-tabbar {
min-height: 42px !important;
}
.vsc-tabbar-right {
padding: 5px 8px !important;
}
.tbr-theme-select,
.tbr-btn-palette {
max-width: 118px !important;
}
.vsc-main {
flex-direction: column !important;
}
.vsc-explorer,
.tips-panel,
.source-control-panel {
width: 100% !important;
max-height: 150px !important;
border-right: 0 !important;
border-bottom: 1px solid var(--studio-border) !important;
}
.vsc-editor-side {
width: 100% !important;
height: 56% !important;
}
.vsc-preview-side {
width: 100% !important;
height: 44% !important;
}
.vsc-resize {
width: 100% !important;
height: 6px !important;
background: var(--studio-border) !important;
}
.preview-titlebar {
min-height: 38px !important;
}
.vsc-terminal {
height: 170px;
}
.terminal-hint {
display: none;
}
#result-size {
display: none !important;
}
.vsc-statusbar {
overflow: hidden !important;
}
.vsc-statusbar .sb-right {
max-width: 68vw !important;
}
}
@media (max-width: 480px) {
.top-nav .logo {
font-size: 15px !important;
}
.vsc-tab {
min-width: 84px !important;
padding: 0 8px !important;
}
.tbr-theme-select {
display: none !important;
}
.tbr-btn-palette {
width: 32px !important;
min-width: 32px !important;
padding: 0 !important;
justify-content: center !important;
font-size: 0 !important;
}
.tbr-run {
min-width: 68px !important;
padding: 0 10px !important;
}
.preview-titlebar {
gap: 5px !important;
padding: 0 8px !important;
}
.traffic-dot {
display: none !important;
}
.terminal-prompt {
max-width: 42vw;
overflow: hidden;
text-overflow: ellipsis;
}
.ptb-urlbar {
min-width: 0 !important;
margin-left: 0 !important;
}
.vsc-statusbar .sb-branding,
#sb-lines,
#sb-wrap-toggle,
#sb-indent {
display: none !important;
}
}
/* Mobile-first editor overrides: keep the IDE usable inside phones, tablets, Android WebView, and desktop shells. */
.vsc-shell,
.vsc-main,
.vsc-editor-side,
.vsc-preview-side,
.vsc-tabbar,
.vsc-langbar,
.editor-file-tabs,
.preview-titlebar,
.vsc-statusbar {
min-width: 0 !important;
}
.CodeMirror-scroll,
.explorer-list,
.tips-body,
.source-control-body,
.console-entries,
.terminal-output,
#sim-output-body,
.lang-picker-items {
-webkit-overflow-scrolling: touch;
}
.vsc-tabbar-right,
.editor-file-tabs,
.vsc-tabs,
.ptb-right,
.vsc-statusbar .sb-right {
overflow-x: auto !important;
overflow-y: hidden !important;
scrollbar-width: none !important;
}
.vsc-tabbar-right::-webkit-scrollbar,
.editor-file-tabs::-webkit-scrollbar,
.vsc-tabs::-webkit-scrollbar,
.ptb-right::-webkit-scrollbar,
.vsc-statusbar .sb-right::-webkit-scrollbar {
display: none !important;
}
@supports (height: 100dvh) {
html,
body {
height: 100dvh !important;
}
}
/* Tablet and phone workbench: stack the IDE, keep controls touch-sized, and preserve editor space. */
@media (max-width: 900px) {
.announcement-bar {
display: none !important;
}
.top-nav {
height: calc(44px + env(safe-area-inset-top, 0px)) !important;
min-height: calc(44px + env(safe-area-inset-top, 0px)) !important;
padding-top: env(safe-area-inset-top, 0px) !important;
}
.mobile-menu {
top: calc(44px + env(safe-area-inset-top, 0px)) !important;
}
.mobile-backdrop {
inset: calc(44px + env(safe-area-inset-top, 0px)) 0 0 !important;
}
.w3s-run-bar,
.tryit-status-banner {
display: none !important;
}
.vsc-main {
flex-direction: column !important;
min-height: 0 !important;
}
.vsc-activity-bar {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
width: 100% !important;
height: 46px !important;
min-height: 46px !important;
padding: 5px 8px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
border-right: 0 !important;
border-bottom: 1px solid var(--studio-border) !important;
scrollbar-width: none !important;
background: #0b1118 !important;
}
.vsc-activity-bar::-webkit-scrollbar {
display: none !important;
}
.vsc-act-btn {
width: 40px !important;
min-width: 40px !important;
height: 36px !important;
border-radius: 8px !important;
}
.vsc-act-spacer {
flex: 1 0 8px !important;
min-width: 8px !important;
}
.vsc-act-btn.active::before {
left: 50% !important;
top: auto !important;
bottom: -4px !important;
width: 22px !important;
height: 2px !important;
transform: translateX(-50%) !important;
border-radius: 2px 2px 0 0 !important;
}
.vsc-explorer,
.tips-panel,
.source-control-panel {
width: 100% !important;
min-width: 0 !important;
max-height: min(35dvh, 260px) !important;
min-height: 0 !important;
border-right: 0 !important;
border-bottom: 1px solid var(--studio-border) !important;
}
.vsc-explorer {
display: flex;
}
.tips-panel:not(.active),
.source-control-panel:not(.active) {
display: none !important;
}
.explorer-head,
.tips-head,
.source-control-head,
.explorer-meta,
.explorer-os-drop-hint {
display: none !important;
}
.explorer-panel-tabs,
.explorer-search-wrap,
.tips-search-wrap,
.source-control-body > .sc-branch-row,
.source-control-body > .sc-btn-row,
.source-control-body > .sc-section-title {
flex-shrink: 0 !important;
}
.explorer-list,
.tips-body,
.source-control-body,
.sc-changes-list {
min-height: 0 !important;
}
.source-control-body {
max-height: min(35dvh, 260px) !important;
overflow: auto !important;
}
.sc-commit-list {
display: none !important;
}
.sc-change-row {
min-height: 44px !important;
}
.vsc-editor-side,
.vsc-preview-side {
min-width: 0 !important;
min-height: 132px !important;
}
.vsc-editor-side {
width: 100% !important;
height: var(--tryit-mobile-editor, 60%) !important;
}
.vsc-preview-side {
width: 100% !important;
height: calc(100% - var(--tryit-mobile-editor, 60%)) !important;
}
.vsc-resize {
width: 100% !important;
min-height: 12px !important;
height: 12px !important;
cursor: row-resize !important;
touch-action: none !important;
background:
linear-gradient(90deg, transparent, rgba(148,163,184,.28), transparent),
var(--studio-shell) !important;
}
.vsc-resize::after {
content: '';
display: block;
width: 44px;
height: 4px;
margin: 4px auto;
border-radius: 999px;
background: rgba(203,213,225,.55);
}
.vsc-tabbar {
height: 42px !important;
min-height: 42px !important;
}
.vsc-tabs {
flex: 1 1 auto !important;
}
.vsc-tab {
min-width: 90px !important;
max-width: 148px !important;
min-height: 42px !important;
padding: 0 10px !important;
}
.vsc-tabbar-right {
flex: 0 0 auto !important;
max-width: 58vw !important;
gap: 4px !important;
}
.vsc-langbar {
min-height: 46px !important;
height: auto !important;
max-height: 96px !important;
padding: 6px 8px !important;
gap: 7px !important;
overflow-y: auto !important;
}
.lang-picker-wrap {
flex: 0 1 auto !important;
min-width: 0 !important;
}
.lang-picker-modal {
position: fixed !important;
top: calc(50px + env(safe-area-inset-top, 0px)) !important;
left: 8px !important;
right: 8px !important;
width: auto !important;
max-height: min(70dvh, 560px) !important;
border-radius: 8px !important;
}
.lang-picker-item {
min-height: 42px !important;
}
.lang-pill-btn,
.tbr-btn,
.tbr-btn-palette,
.ptb-btn,
.ptb-icon-btn,
.sc-btn,
.sc-mini-btn,
.explorer-icon-btn,
.exp-ws-action-btn {
min-height: 36px !important;
}
.tbr-sep,
.tbr-theme-select,
#btn-copy-code,
#btn-dl,
#btn-img-upload,
#btn-share {
display: none !important;
}
.tbr-run {
min-width: 76px !important;
height: 34px !important;
}
.tbr-btn,
.tbr-btn-palette {
width: 36px !important;
min-width: 36px !important;
padding: 0 !important;
}
.tbr-btn-palette {
font-size: 0 !important;
}
.tbr-btn-palette kbd {
display: none !important;
}
.preview-titlebar {
min-height: 38px !important;
padding: 0 8px !important;
gap: 6px !important;
}
.ptb-urlbar {
flex: 1 1 auto !important;
min-width: 84px !important;
}
.ptb-right {
flex: 0 0 auto !important;
max-width: 54vw !important;
gap: 4px !important;
}
.ptb-btn,
.ptb-icon-btn {
min-width: 34px !important;
height: 32px !important;
padding: 0 8px !important;
}
#result-size,
.traffic-dot {
display: none !important;
}
.vsc-console,
.vsc-terminal,
.vsc-stdin,
#sim-output {
max-height: 35dvh !important;
}
.vsc-terminal {
height: min(35dvh, 190px) !important;
}
.terminal-titlebar,
.terminal-input-row,
.console-titlebar,
.stdin-titlebar,
.sim-bar {
min-height: 34px !important;
}
.terminal-output,
.console-entries,
#sim-output-body {
min-height: 0 !important;
}
.CodeMirror {
font-size: 13.5px !important;
line-height: 1.62 !important;
}
.CodeMirror-gutters {
min-width: 38px !important;
}
.CodeMirror-lines {
padding: 8px 0 28px !important;
}
.vsc-statusbar {
min-height: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
}
@media (max-width: 520px) {
.top-nav .logo span:first-child {
max-width: 128px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lang-pill-name,
.lang-mode-badge,
#lang-detect-badge,
.tbr-btn-palette kbd,
.terminal-pill,
.terminal-title {
display: none !important;
}
.vsc-langbar {
max-height: 88px !important;
}
.lang-pill-btn {
max-width: 96px !important;
}
.lang-detect-badge {
display: none !important;
}
.lang-pill-btn,
.tbr-btn,
.tbr-btn-palette,
.ptb-btn,
.ptb-icon-btn {
min-width: 34px !important;
height: 32px !important;
}
.vsc-tabbar-right {
max-width: 46vw !important;
}
.ptb-right {
max-width: 48vw !important;
}
.editor-file-tabs {
height: 32px !important;
}
.eft-tab {
min-width: 72px !important;
max-width: 118px !important;
}
.vsc-statusbar .sb-right {
max-width: 66vw !important;
}
}
@media (max-width: 380px) {
.vsc-act-btn {
width: 36px !important;
min-width: 36px !important;
}
.vsc-tab {
min-width: 74px !important;
max-width: 108px !important;
font-size: 11px !important;
}
.tbr-run {
min-width: 62px !important;
padding: 0 8px !important;
}
.ptb-urlbar {
display: none !important;
}
.ptb-right {
max-width: 100% !important;
}
.vsc-editor-side {
height: var(--tryit-mobile-editor, 64%) !important;
}
.vsc-preview-side {
height: calc(100% - var(--tryit-mobile-editor, 64%)) !important;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: .01ms !important;
}
}
/* Pending upgrades: device presets + AI insights panel */
.ptb-device-presets {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px;
border-radius: 999px;
border: 1px solid rgba(148,163,184,.25);
background: rgba(15,23,42,.28);
}
.ptb-chip {
height: 24px;
border: 1px solid transparent;
border-radius: 999px;
padding: 0 10px;
font-size: 11px;
font-weight: 700;
color: rgba(226,232,240,.85);
background: transparent;
cursor: pointer;
transition: all .18s ease;
}
.ptb-chip:hover {
background: rgba(255,255,255,.08);
color: #fff;
}
.ptb-chip.active {
background: rgba(26,115,232,.92);
border-color: rgba(125,211,252,.35);
color: #fff;
}
#btn-insights-toggle.active {
background: rgba(16,185,129,.18) !important;
border-color: rgba(110,231,183,.45) !important;
color: #d1fae5 !important;
}
.vsc-preview-side.device-tablet #preview-frame,
.vsc-preview-side.device-mobile #preview-frame {
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 14px;
border: 1px solid rgba(148,163,184,.24);
box-shadow: 0 18px 44px rgba(2,6,23,.36);
}
.vsc-preview-side.device-tablet #preview-frame {
width: min(820px, calc(100% - 18px)) !important;
}
.vsc-preview-side.device-mobile #preview-frame {
width: min(390px, calc(100% - 16px)) !important;
}
.ai-insights {
display: none;
border-top: 1px solid rgba(148,163,184,.2);
background: rgba(15,23,42,.76);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
max-height: 240px;
min-height: 180px;
overflow: auto;
}
.ai-insights.open {
display: block;
}
.ai-insights-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px 8px;
border-bottom: 1px solid rgba(148,163,184,.16);
}
.ai-insights-title {
font-size: 12px;
font-weight: 800;
color: #dbeafe;
letter-spacing: .03em;
}
.ai-insights-meta {
font-size: 11px;
color: #93c5fd;
}
.ai-insights-scores {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
padding: 10px 12px;
}
.ai-score-card {
border: 1px solid rgba(148,163,184,.2);
border-radius: 10px;
padding: 7px 8px;
display: flex;
flex-direction: column;
gap: 3px;
background: rgba(15,23,42,.52);
}
.ai-score-card span {
font-size: 10px;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: .04em;
}
.ai-score-card strong {
font-size: 15px;
color: #e2e8f0;
}
.ai-score-card.good { border-color: rgba(16,185,129,.36); }
.ai-score-card.mid { border-color: rgba(59,130,246,.32); }
.ai-score-card.warn { border-color: rgba(245,158,11,.38); }
.ai-insights-list {
display: grid;
gap: 8px;
padding: 0 12px 12px;
}
.ai-insight-item {
display: grid;
grid-template-columns: 22px 1fr;
gap: 9px;
align-items: start;
border: 1px solid rgba(148,163,184,.14);
border-radius: 10px;
background: rgba(15,23,42,.45);
padding: 8px 9px;
}
.ai-insight-idx {
width: 22px;
height: 22px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
color: #0b1220;
background: #93c5fd;
}
.ai-insight-item p {
margin: 0;
font-size: 12px;
line-height: 1.52;
color: #cbd5e1;
}
@media (max-width: 980px) {
.ptb-device-presets {
order: 2;
}
.ai-insights-scores {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.ptb-device-presets {
width: 100%;
justify-content: space-between;
}
.ptb-chip {
flex: 1 1 0;
min-width: 0;
text-align: center;
}
.vsc-preview-side.device-tablet #preview-frame,
.vsc-preview-side.device-mobile #preview-frame {
width: calc(100% - 10px) !important;
border-radius: 8px;
box-shadow: none;
}
.ai-insights {
max-height: 210px;
}
}
@media (max-width: 520px) {
.ai-insights-scores {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ai-insight-item p {
font-size: 11.5px;
}
}
/* ================================================================
PRO MOBILE / TABLET CODE EDITOR — Full redesign
================================================================ */
/* ── Mobile dock bar ────────────────────────────────────────── */
.tryit-mobile-dock {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9100;
background: #141c2a;
border-top: 1px solid rgba(148,163,184,.18);
padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px));
flex-direction: row;
align-items: center;
gap: 2px;
overflow-x: auto;
scrollbar-width: none;
-webkit-user-select: none;
user-select: none;
box-shadow: 0 -4px 20px rgba(0,0,0,.45);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
.tryit-mobile-dock::-webkit-scrollbar { display: none; }
.dock-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-width: 54px;
max-width: 68px;
flex: 1 1 54px;
height: 52px;
border: none;
border-radius: 10px;
background: transparent;
color: rgba(203,213,225,.7);
cursor: pointer;
font-size: 9.5px;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
transition: background .14s, color .14s, transform .1s;
padding: 4px 2px;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.dock-btn svg { flex-shrink: 0; }
.dock-btn:active {
transform: scale(.9);
background: rgba(255,255,255,.08);
}
.dock-btn:hover { background: rgba(255,255,255,.06); color: #e2e8f0; }
.dock-btn.active { color: #60a5fa; }
.dock-btn-run {
color: #fff;
background: linear-gradient(135deg,#2563eb,#1d4ed8);
box-shadow: 0 2px 10px rgba(37,99,235,.38);
min-width: 64px;
}
.dock-btn-run:hover { background: linear-gradient(135deg,#3b82f6,#2563eb); }
.dock-btn-run:active { transform: scale(.88); box-shadow: none; }
/* ── Show dock only on touch/small devices ─────────────────── */
@media (max-width: 900px) {
.tryit-mobile-dock { display: flex; }
/* push status bar up to make room for dock */
.vsc-shell { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}
/* ── Phone-only buttons (undo/redo) ───────────────────────── */
.dock-btn-phone-only { display: none; }
@media (max-width: 520px) {
.dock-btn-phone-only { display: flex; }
}
/* ── Global touch / tap target upgrades ──────────────────── */
@media (pointer: coarse) {
.vsc-tab,
.eft-tab,
.vsc-act-btn,
.explorer-file,
.explorer-folder-head,
.explorer-panel-tab,
.lang-picker-item,
.dock-btn {
min-height: 44px !important;
}
.vsc-act-btn {
min-width: 44px !important;
}
.file-rename-btn,
.file-delete-btn,
.file-open-new-btn,
.explorer-folder-action-btn {
width: 32px !important;
height: 32px !important;
display: inline-flex !important;
}
.CodeMirror { font-size: 14px !important; line-height: 1.72 !important; }
.CodeMirror-gutters { min-width: 42px !important; }
.CodeMirror-linenumber { padding: 0 8px 0 4px !important; }
}
/* ── Tablet (600–900 px) pro layout ─────────────────────── */
@media (min-width: 601px) and (max-width: 900px) {
.vsc-shell { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
.vsc-main {
flex-direction: row !important;
height: calc(100% - 48px) !important;
}
.vsc-activity-bar {
flex-direction: column !important;
width: 44px !important;
height: 100% !important;
border-bottom: 0 !important;
border-right: 1px solid var(--studio-border) !important;
}
.vsc-act-btn {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
}
.vsc-editor-side {
width: calc(55% - 22px) !important;
height: 100% !important;
}
.vsc-preview-side {
width: 45% !important;
height: 100% !important;
}
.vsc-resize {
width: 6px !important;
min-height: 0 !important;
height: 100% !important;
cursor: col-resize !important;
}
.vsc-resize::after {
display: none !important;
}
.tryit-mobile-dock .dock-btn span {
font-size: 9px !important;
}
}
/* ── Phone (≤600 px) optimized layout ──────────────────── */
@media (max-width: 600px) {
.top-nav {
height: calc(42px + env(safe-area-inset-top, 0px)) !important;
}
.vsc-tabbar {
height: 38px !important;
min-height: 38px !important;
}
.vsc-tab {
min-width: 70px !important;
height: 38px !important;
font-size: 11.5px !important;
padding: 0 8px !important;
}
.vsc-langbar {
padding: 4px 6px !important;
min-height: 40px !important;
height: auto !important;
max-height: 84px !important;
}
.lang-pill-btn {
height: 30px !important;
min-height: 30px !important;
font-size: 12px !important;
}
/* Full-screen stacked panes */
.vsc-editor-side {
height: var(--tryit-mobile-editor, 58%) !important;
}
.vsc-preview-side {
height: calc(100% - var(--tryit-mobile-editor, 58%)) !important;
}
/* Resize handle: bigger finger target */
.vsc-resize {
min-height: 16px !important;
height: 16px !important;
}
.vsc-resize::after {
width: 54px;
height: 5px;
}
/* Editor font & gutters */
.CodeMirror { font-size: 13px !important; line-height: 1.65 !important; }
.CodeMirror-gutters { min-width: 34px !important; }
/* Keep explorer compact */
.vsc-explorer,
.tips-panel,
.source-control-panel {
max-height: min(38dvh, 280px) !important;
}
/* Statusbar minimal */
.vsc-statusbar .sb-right { gap: 8px !important; }
.sb-toggle-item { font-size: 10.5px !important; }
/* Preview titlebar compact */
.preview-titlebar { min-height: 36px !important; }
/* Hide heavy desktop-only chrome */
.vsc-minimap,
.split-mirror-host { display: none !important; }
.vsc-breadcrumb { font-size: 10.5px !important; }
/* Dock bigger on phone */
.tryit-mobile-dock { gap: 1px; padding-left: 4px; padding-right: 4px; }
.dock-btn { min-width: 46px; height: 48px; font-size: 9px; border-radius: 8px; }
.dock-btn-run { min-width: 58px; }
}
/* ── Small phone (≤380 px) ──────────────────────────────── */
@media (max-width: 380px) {
.dock-btn span { display: none; }
.dock-btn { min-width: 40px; max-width: 48px; height: 44px; gap: 0; }
.dock-btn-run { min-width: 48px; }
}
/* ── Landscape phone ────────────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
.top-nav { display: none !important; }
.vsc-shell { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
.vsc-main {
flex-direction: row !important;
height: 100% !important;
}
.vsc-activity-bar {
flex-direction: column !important;
width: 40px !important;
height: 100% !important;
border-bottom: 0 !important;
border-right: 1px solid var(--studio-border) !important;
padding: 4px 2px !important;
}
.vsc-editor-side {
width: 54% !important;
height: 100% !important;
}
.vsc-preview-side {
width: 46% !important;
height: 100% !important;
}
.vsc-resize {
width: 5px !important;
height: 100% !important;
cursor: col-resize !important;
min-height: 0 !important;
}
.vsc-resize::after { display: none !important; }
.tryit-mobile-dock {
height: calc(44px + env(safe-area-inset-bottom, 0px));
}
.dock-btn { height: 38px; font-size: 0; }
.dock-btn svg { width: 18px; height: 18px; }
.dock-btn-run { min-width: 48px; }
}