@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root { --ink:#17211f; --muted:#74817e; --line:#dce5e1; --cream:#f4f7f2; --lime:#c8ee79; --teal:#1e6860; --dark:#17211f; --red:#a13f3f; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--cream); font-family:'Space Grotesk',sans-serif; } button,input,textarea { font:inherit; } button { cursor:pointer; } .hidden { display:none !important; }
.dashboard-page { min-height:100vh; display:grid; grid-template-columns:260px minmax(0,1fr); transition:grid-template-columns .2s ease; }.sidebar { position:relative; z-index:2; color:#dce9e5; background:#18322f; border-right:1px solid #28504a; box-shadow:8px 0 22px rgba(11,34,30,.22); padding:24px 14px 18px; display:flex; flex-direction:column; min-height:100vh; transition:padding .2s ease; }.brand-icon { color:#d7f287; text-decoration:none; font:25px 'DM Mono'; height:40px; display:flex; align-items:center; padding:0 10px; }.sidebar-divider { width:100%; height:1px; background:#315550; margin:18px 0 23px; }.sidebar-heading { color:#93b2ab; font:500 10px 'DM Mono'; letter-spacing:.12em; display:flex; justify-content:space-between; align-items:center; padding:0 10px; margin-bottom:12px; }.count { color:#17211f; background:#c8ee79; border-radius:20px; padding:3px 7px; }.app-navigation { width:100%; display:flex; flex-direction:column; gap:5px; overflow:auto; }.nav-app { width:100%; min-height:51px; border:1px solid transparent; border-radius:5px; display:flex; align-items:center; gap:11px; text-align:left; padding:9px 10px; background:transparent; color:#e7f1ed; }.nav-app:hover { background:#244640; }.nav-app.active { background:#315d55; border-color:#4f7a72; }.app-kind { flex:0 0 28px; color:#d7f287; font:15px 'DM Mono'; text-align:center; }.nav-app strong,.nav-app small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.nav-app strong { color:#f6fbf8; font-size:13px; }.nav-app small { color:#9fbbb5; font-size:10px; margin-top:3px; }.nav-empty { color:#9fbbb5; font-size:12px; padding:0 10px; }.sidebar-icon-button { width:100%; height:42px; border:1px solid transparent; border-radius:5px; display:grid; place-items:center; background:transparent; color:#dce9e5; }.sidebar-icon-button:hover { background:#244640; }.add-app { margin-top:16px; background:#d7f287; color:#17211f; font-size:22px; font-weight:400; }.add-app:hover { background:#c8ee79; color:#17211f; }.sidebar-footer { border-top:1px solid #315550; padding:18px 10px 0; margin-top:auto; display:flex; align-items:center; justify-content:space-between; }.status-dot { width:8px; height:8px; border-radius:50%; background:#8ede8f; box-shadow:0 0 0 4px rgba(142,222,143,.13); }.logout-button { width:30px; height:30px; color:#9fbbb5; font:21px 'DM Mono'; }.logout-button:hover { color:#fff; }.sidebar-toggle { position:absolute; top:50%; right:-13px; transform:translateY(-50%); z-index:3; width:26px; height:52px; border:1px solid #315550; border-radius:0 13px 13px 0; background:#18322f; color:#d7f287; font-size:25px; line-height:1; }.sidebar-toggle:hover { background:#244640; }
.dashboard-page.compact-sidebar { grid-template-columns:76px minmax(0,1fr); }.compact-sidebar .sidebar { padding-left:12px; padding-right:12px; }.compact-sidebar .brand-icon { justify-content:center; padding:0; }.compact-sidebar .sidebar-divider { margin-bottom:18px; }.compact-sidebar .sidebar-heading { display:none; }.compact-sidebar .app-navigation { align-items:center; }.compact-sidebar .nav-app { width:42px; min-height:42px; justify-content:center; padding:0; }.compact-sidebar .nav-app strong,.compact-sidebar .nav-app small,.compact-sidebar .nav-empty { display:none; }.compact-sidebar .app-kind { flex:0; }.compact-sidebar .sidebar-footer { flex-direction:column; padding-left:0; padding-right:0; gap:15px; }.compact-sidebar .sidebar-icon-button { width:42px; }.compact-sidebar .sidebar-toggle { transform:translateY(-50%) rotate(180deg); }
.playground { min-width:0; padding:60px clamp(40px,7vw,130px) 60px 30px; }.empty-playground { max-width:680px; padding-top:13vh; }.eyebrow { color:var(--teal); font:500 11px 'DM Mono'; letter-spacing:.13em; margin:0; }.empty-playground h1,.workspace-head h1 { font-size:clamp(28px,4vw,51px); letter-spacing:-.07em; line-height:.98; margin:18px 0; }.empty-playground > p:not(.eyebrow) { color:#586966; max-width:580px; line-height:1.6; font-size:16px; }.primary { border:0; background:var(--teal); color:#fff; padding:14px 16px; border-radius:3px; display:flex; justify-content:space-between; gap:35px; font-size:13px; font-weight:600; }.compact { width:auto; margin-top:20px; }.workspace-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); padding-bottom:26px; margin-bottom:30px; }.workspace-head h1 { font-size:27px; margin:9px 0 0; }.workspace-description { color:var(--muted); font-size:13px; margin:10px 0 0; }.text-button { border:0; background:transparent; color:var(--teal); padding:8px; font-size:12px; white-space:nowrap; }.danger { color:var(--red); }
.runner-view { height:calc(100vh - 120px); display:flex; flex-direction:column; }.runner-actions { display:flex; gap:8px; }.console-view,.browser-view { flex:1; min-height:0; background:var(--dark); border-radius:4px; overflow:hidden; display:flex; flex-direction:column; }.console-toolbar,.browser-toolbar { height:42px; color:#a7b9b4; padding:0 15px; display:flex; align-items:center; justify-content:space-between; background:#22302d; font:11px 'DM Mono'; }.run-button { background:var(--lime); border:0; border-radius:2px; padding:6px 10px; color:var(--ink); font:600 11px 'Space Grotesk'; }.run-button:disabled { opacity:.6; cursor:wait; }.console-view pre { color:#dcefd8; padding:23px; white-space:pre-wrap; overflow:auto; margin:0; font:13px/1.65 'DM Mono'; }.browser-view { background:#fff; border:1px solid var(--line); }.browser-toolbar { background:#f6f9f5; color:var(--muted); border-bottom:1px solid var(--line); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.browser-view iframe { border:0; width:100%; flex:1; background:#fff; }
.modal { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:22px; background:rgba(23,33,31,.48); }.modal-card { width:min(100%,680px); max-height:calc(100vh - 44px); overflow:auto; background:#fff; border-radius:8px; box-shadow:0 24px 80px rgba(0,0,0,.22); padding:28px; }.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); padding-bottom:20px; }.modal-head h2 { letter-spacing:-.05em; font-size:26px; margin:8px 0 0; }.close-modal { width:34px; height:34px; background:#f3f6f1; color:var(--muted); border:0; border-radius:50%; font-size:23px; line-height:1; }.register-form { padding-top:5px; }.type-picker { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:22px 0 24px; }.type-option input { position:absolute; opacity:0; }.type-option span { border:1px solid var(--line); display:block; padding:14px; cursor:pointer; }.type-option input:checked + span { border-color:var(--teal); background:#eef8e7; }.type-option strong,.type-option small { display:block; }.type-option strong { font-size:13px; }.type-option small { color:var(--muted); font-size:11px; margin-top:4px; } label { display:block; color:#52625d; font-size:12px; margin:17px 0 7px; } label span { color:#a5b0ad; } input,textarea { width:100%; border:1px solid var(--line); background:#fbfcfa; border-radius:3px; padding:12px; outline:none; color:var(--ink); } input:focus,textarea:focus { border-color:var(--teal); } textarea { height:210px; resize:vertical; font:13px/1.6 'DM Mono'; }.message { color:var(--red); font-size:12px; min-height:15px; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; }.login-card { width:min(100%,410px); padding:36px; background:#fff; border:1px solid var(--line); box-shadow:0 14px 40px rgba(39,68,59,.06); }.brand { font-size:20px; font-weight:700; display:flex; gap:9px; align-items:center; letter-spacing:-.05em; }.brand-mark { color:var(--teal); font:24px 'DM Mono'; }.login-card .brand { margin-bottom:55px; }.login-card h1 { font-size:38px; letter-spacing:-.06em; margin:12px 0 8px; }.login-intro { color:var(--muted); font-size:13px; line-height:1.5; margin-bottom:28px; }.login-error { background:#fff1f1; color:var(--red); padding:10px 12px; font-size:12px; border-left:2px solid var(--red); }
@media (max-width:640px) { .dashboard-page { grid-template-columns:1fr; }.sidebar { min-height:76px; height:76px; flex-direction:row; padding:12px 16px; }.sidebar-divider,.sidebar-heading { display:none; }.app-navigation { flex-direction:row; justify-content:flex-start; }.nav-app { width:42px; min-height:42px; padding:0; justify-content:center; }.nav-app strong,.nav-app small { display:none; }.sidebar-footer { border:0; padding:0; margin:0 0 0 auto; flex-direction:row; gap:14px; }.add-app { width:42px; order:2; margin:0 0 0 10px; flex-shrink:0; }.playground { padding:36px 20px; }.runner-view { height:calc(100vh - 180px); min-height:450px; }.type-picker { grid-template-columns:1fr; } }