/* Satr Terminal design decisions: calm technical workspace, restrained violet keywords, Arabic-first hierarchy, high-contrast code colors, no external assets. */
:root {
  color-scheme: dark;
  --app-bg: #171816;
  --surface: #20211f;
  --surface-raised: #282a27;
  --surface-soft: #1c1e1c;
  --line: #343633;
  --line-soft: #2a2c29;
  --text: #ecebe5;
  --text-soft: #c0c0b8;
  --muted: #92948c;
  --accent: #c4b0dc;
  --accent-strong: #d3c1e9;
  --syntax-keyword: #d3c1e9;
  --accent-ink: #25202d;
  --cyan: #85c7cf;
  --gold: #e1bd78;
  --success: #9bca9c;
  --danger: #e49a8d;
  --shadow: 0 14px 36px rgba(0,0,0,.22);
  --app-height: 100vh;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Arabic", "Geeza Pro", Tahoma, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@supports (height: 100dvh) { :root { --app-height: 100dvh; } }
:root[data-theme="light"] { color-scheme:light; --syntax-keyword:#705a8b; --app-bg:#f6f7f5; --surface:#fff; --surface-raised:#f1f3ef; --surface-soft:#f7f8f6; --line:#dce0d9; --line-soft:#e8ebe5; --text:#20221e; --text-soft:#4d514a; --muted:#72776e; --accent:#705a8b; --accent-strong:#5c4775; --accent-ink:#fff; --cyan:#147783; --gold:#9a6b16; --success:#277b48; --danger:#b44a3a; --shadow:0 12px 30px rgba(24,31,20,.08); }
:root[data-theme="cream"] { color-scheme:light; --syntax-keyword:#705a8b; --app-bg:#f4eee2; --surface:#fbf7ef; --surface-raised:#eee6d8; --surface-soft:#f7f0e5; --line:#ddd3c2; --line-soft:#e8dece; --text:#2f2a22; --text-soft:#5f574a; --muted:#837969; --accent:#71578a; --accent-strong:#634a7b; --accent-ink:#fff; --cyan:#21747b; --gold:#946513; --success:#39744c; --danger:#b34d3c; --shadow:0 12px 30px rgba(48,37,20,.09); }
:root[data-theme="rose"] { color-scheme:light; --syntax-keyword:#705a8b; --app-bg:#f6eff0; --surface:#fff9fa; --surface-raised:#f2e5e8; --surface-soft:#f9f0f2; --line:#e5d5d9; --line-soft:#eee2e5; --text:#302528; --text-soft:#5f4d52; --muted:#847176; --accent:#805c78; --accent-strong:#6c4b65; --accent-ink:#fff; --cyan:#26767d; --gold:#98701f; --success:#3a7651; --danger:#b34d3c; --shadow:0 12px 30px rgba(50,25,37,.08); }
:root[data-theme="green"] { color-scheme:light; --syntax-keyword:#705a8b; --app-bg:#edf3ed; --surface:#f8fcf7; --surface-raised:#e3ede2; --surface-soft:#f1f7ef; --line:#d2ded1; --line-soft:#e1e9df; --text:#222b22; --text-soft:#4c5a4b; --muted:#718171; --accent:#5c7260; --accent-strong:#475d4b; --accent-ink:#fff; --cyan:#176f78; --gold:#906918; --success:#337a47; --danger:#ae4f42; --shadow:0 12px 30px rgba(24,49,24,.08); }
* { box-sizing:border-box; }
html, body { width:100%; min-width:320px; height:100%; margin:0; overflow:hidden; background:var(--app-bg); color:var(--text); }
body { overscroll-behavior:none; }
button, input, textarea { font:inherit; }
button { color:inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
button:disabled { cursor:not-allowed; opacity:.5; }
.app-shell { width:min(100%, 1440px); height:var(--app-height); min-height:0; margin:0 auto; display:flex; flex-direction:column; background:var(--app-bg); overflow:hidden; }
.topbar { height:66px; flex:none; display:flex; align-items:center; justify-content:space-between; padding:0 24px; border-bottom:1px solid var(--line-soft); background:var(--app-bg); }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; min-width:160px; }
.brand-mark { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; background:var(--surface-raised); border:1px solid var(--line); color:var(--accent); }
.brand-mark svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.brand-copy { display:flex; flex-direction:column; align-items:flex-start; gap:1px; }
.brand-copy strong { font-size:17px; line-height:1.1; letter-spacing:-.03em; }
.brand-copy small { font-size:11px; color:var(--muted); direction:ltr; letter-spacing:.02em; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.connection-state { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; margin-inline-end:4px; }
.connection-state i { width:7px; height:7px; display:block; border-radius:50%; background:var(--success); }
.connection-state.offline i { background:var(--gold); }
.icon-button { width:42px; height:42px; display:grid; place-items:center; border:1px solid transparent; border-radius:12px; background:transparent; color:var(--text-soft); cursor:pointer; transition:background .16s ease, color .16s ease, border-color .16s ease; }
.icon-button:hover { background:var(--surface); border-color:var(--line); color:var(--text); }
.icon-button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.app-main { flex:1; min-height:0; position:relative; overflow:hidden; }
.tab-panel { width:100%; height:100%; min-height:0; }
.tab-panel[hidden] { display:none!important; }
#editorPanel { display:flex; flex-direction:column; min-height:0; }
.editor-toolbar { flex:none; min-height:65px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:9px 22px; border-bottom:1px solid var(--line-soft); }
.active-file { display:flex; align-items:center; gap:11px; min-width:0; }
.file-glyph { width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; color:var(--accent); background:var(--surface); font:600 15px ui-monospace, SFMono-Regular, Menlo, monospace; direction:ltr; }
.file-meta { min-width:0; display:flex; flex-direction:column; gap:3px; }
.file-meta strong { max-width:36vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:600; }
.file-meta span { font-size:11px; color:var(--muted); }
.toolbar-actions { display:flex; align-items:center; gap:7px; }
.toolbar-button { min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--text-soft); font-size:13px; font-weight:550; cursor:pointer; transition:background .16s ease, border-color .16s ease, transform .16s ease; white-space:nowrap; }
.toolbar-button:hover { background:var(--surface-raised); color:var(--text); }
.toolbar-button:active { transform:none; }
.toolbar-button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.toolbar-button.primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.toolbar-button.primary:hover { background:var(--accent-strong); border-color:var(--accent-strong); }
.toolbar-button.secondary { background:transparent; }
.editor-workspace { flex:1; min-height:0; display:flex; flex-direction:column; }
.code-editor { position:relative; flex:1; min-height:120px; overflow:hidden; background:var(--app-bg); }
.line-gutter, .code-highlight, #codeInput { position:absolute; inset:0; margin:0; padding:21px 22px 30px; font:15px/1.85 ui-monospace, "SFMono-Regular", Menlo, Monaco, "Noto Sans Arabic", monospace; letter-spacing:0; tab-size:2; white-space:pre; word-break:normal; overflow:auto; }
.line-gutter { inset-inline-start:0; inset-inline-end:auto; width:51px; padding-inline:0; padding-top:21px; text-align:center; color:var(--muted); border-inline-end:1px solid var(--line-soft); user-select:none; direction:ltr; font-size:12px; line-height:27.75px; overflow:hidden; background:var(--app-bg); z-index:2; }
.code-highlight { inset-inline-start:51px; padding-inline-start:18px; padding-inline-end:25px; color:var(--text); pointer-events:none; direction:rtl; overflow:hidden; }
#codeInput { z-index:1; width:100%; height:100%; border:0; border-radius:0; resize:none; color:transparent; -webkit-text-fill-color:transparent; caret-color:var(--accent-strong); background:transparent; direction:rtl; text-align:right; outline:none; padding-inline-start:69px; padding-inline-end:25px; overflow:auto; }
#codeInput::selection { background:color-mix(in srgb, var(--accent) 38%, transparent); }
.code-highlight .kw, .output-line .kw { color:var(--syntax-keyword); font-weight:650; }
.code-highlight .str, .output-line .str { color:var(--cyan); }
.code-highlight .num, .output-line .num { color:var(--gold); }
.code-highlight .comment, .output-line .comment { color:var(--muted); font-style:italic; }
.code-highlight .op, .output-line .op { color:var(--text-soft); }
.editor-empty { position:absolute; z-index:0; inset-block-start:45%; inset-inline-start:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center; color:var(--muted); pointer-events:none; opacity:0; transition:opacity .15s; }
.editor-empty.visible { opacity:.75; }
.editor-empty span { font-size:14px; }
.editor-empty small { font-size:12px; }
.language-badge { position:absolute; inset-inline-end:19px; inset-block-end:12px; z-index:3; padding:4px 7px; border-radius:6px; background:var(--surface); border:1px solid var(--line-soft); color:var(--muted); font:10px ui-monospace, monospace; letter-spacing:.04em; pointer-events:none; }
.console-panel { height:210px; min-height:84px; flex:none; border-top:1px solid var(--line); background:var(--surface-soft); display:flex; flex-direction:column; transition:height .18s ease; }
.console-panel.collapsed { height:39px; min-height:39px; }
.console-heading { height:39px; flex:none; display:flex; align-items:center; justify-content:space-between; padding:0 19px; border-bottom:1px solid var(--line-soft); }
.console-title { display:flex; align-items:center; gap:9px; min-width:0; }
.console-prompt { color:var(--accent); font:600 12px ui-monospace, monospace; }
.console-title strong { font-size:12px; font-weight:600; }
.run-badge { color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.run-badge.success { color:var(--success); }
.run-badge.error { color:var(--danger); }
.console-tools { display:flex; gap:3px; }
.console-icon { width:34px; height:34px; border:0; border-radius:8px; display:grid; place-items:center; background:transparent; color:var(--muted); cursor:pointer; }
.console-icon:hover { background:var(--surface-raised); color:var(--text); }
.console-icon svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.console-panel.collapsed #toggleConsoleButton svg { transform:rotate(180deg); }
.output-content { flex:1; min-height:0; overflow:auto; padding:12px 20px 16px; font:13px/1.75 ui-monospace, "SFMono-Regular", Menlo, Monaco, "Noto Sans Arabic", monospace; direction:rtl; }
.console-panel.collapsed .output-content { display:none; }
.output-placeholder { display:flex; align-items:center; gap:9px; color:var(--muted); font:12px/1.6 inherit; }
.output-caret { width:6px; height:6px; border-radius:50%; background:var(--muted); }
.output-line { min-height:23px; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text-soft); }
.output-line.error { color:var(--danger); }
.output-line.system { color:var(--muted); }
.output-line.command { color:var(--accent-strong); }
.terminal-command-line { min-height:52px; flex:none; display:flex; align-items:center; gap:10px; padding:4px 12px; border-top:1px solid var(--line-soft); background:var(--surface); }
.terminal-prefix { flex:none; display:flex; align-items:center; gap:5px; color:var(--muted); font:12px ui-monospace, monospace; }
.terminal-prefix b { color:var(--accent); font-size:16px; font-weight:500; }
#terminalInput { flex:1; min-width:0; height:42px; padding:0 4px; border:0; border-radius:0; background:transparent; color:var(--text); font-size:16px; outline:none; text-align:right; }
#terminalInput::placeholder { color:var(--muted); opacity:.86; }
.terminal-command-line:focus-within { background:var(--surface-raised); }
.terminal-submit { width:42px; height:42px; flex:none; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; background:var(--surface-raised); color:var(--accent); cursor:pointer; }
.terminal-submit:hover { border-color:var(--accent); }
.terminal-submit svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transform:scaleX(-1); }
.bottom-nav { height:64px; flex:none; display:flex; align-items:stretch; justify-content:center; gap:7px; padding:5px 15px calc(5px + var(--safe-bottom)); border-top:1px solid var(--line-soft); background:var(--surface); }
.nav-button { min-width:84px; min-height:48px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:4px 12px; border:0; border-radius:11px; background:transparent; color:var(--muted); font-size:11px; cursor:pointer; }
.nav-button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.nav-button.active { color:var(--accent-strong); background:var(--surface-raised); }
.secondary-panel { display:flex; flex-direction:column; gap:22px; overflow:auto; padding:30px clamp(20px, 5vw, 70px) 28px; }
.panel-heading { flex:none; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; padding-bottom:19px; border-bottom:1px solid var(--line-soft); }
.section-eyebrow { margin:0 0 6px; color:var(--muted); font-size:12px; }
.panel-heading h1 { margin:0; font-size:26px; font-weight:650; letter-spacing:-.04em; }
.panel-description { margin:7px 0 0; color:var(--text-soft); font-size:13px; line-height:1.6; }
.version-stamp { flex:none; padding:7px 10px; border:1px solid var(--line); border-radius:8px; color:var(--muted); font-size:11px; }
.files-list { display:flex; flex-direction:column; gap:8px; width:min(100%, 840px); }
.file-row { min-height:68px; display:flex; align-items:center; gap:13px; padding:9px 13px; border:1px solid var(--line-soft); border-radius:12px; background:var(--surface); transition:border-color .15s ease, background .15s ease; }
.file-row:hover { border-color:var(--line); background:var(--surface-raised); }
.file-row-icon { width:40px; height:40px; flex:none; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); color:var(--accent); font:14px ui-monospace,monospace; }
.file-row-main { flex:1; min-width:0; cursor:pointer; }
.file-row-main strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:600; }
.file-row-main span { display:block; margin-top:5px; color:var(--muted); font-size:11px; }
.file-row-actions { display:flex; align-items:center; gap:3px; }
.file-row-actions button { width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; }
.file-row-actions button:hover { background:var(--surface-soft); color:var(--text); }
.file-row-actions button.delete:hover { color:var(--danger); }
.file-row-actions svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.empty-files { width:min(100%,840px); min-height:170px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:1px dashed var(--line); border-radius:14px; color:var(--muted); text-align:center; }
.empty-files strong { color:var(--text-soft); font-size:14px; font-weight:550; }
.empty-files span { font-size:12px; }
.project-tools { width:min(100%,840px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:14px; border:1px solid var(--line-soft); border-radius:12px; background:var(--surface); }
.project-tools>div:first-child { flex:1 1 230px; }
.project-tools strong,.assets-section h2 { color:var(--text); font-size:13px; font-weight:650; }
.project-tools p { margin:4px 0 0; color:var(--text-soft); font-size:11px; line-height:1.6; }
.project-actions { display:flex; flex-wrap:wrap; gap:7px; }
.project-actions .toolbar-button { min-height:44px; }
.project-syntax { flex:1 0 100%; }
.project-syntax code { color:var(--cyan); font:11px/1.8 ui-monospace,"Noto Sans Arabic",monospace; direction:rtl; }
.assets-section { width:min(100%,840px); display:flex; flex-direction:column; gap:9px; }
.assets-section h2 { margin:0; }
.assets-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr)); gap:8px; }
.asset-card { min-width:0; min-height:68px; display:flex; align-items:center; gap:10px; padding:8px; border:1px solid var(--line-soft); border-radius:10px; background:var(--surface); }
.asset-card img { width:52px; height:52px; flex:none; border-radius:7px; object-fit:cover; background:var(--surface-raised); }
.asset-card strong { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-soft); font-size:12px; font-weight:550; }
.asset-card button { width:44px; height:44px; flex:none; border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:11px; cursor:pointer; }
.asset-card button:hover { background:var(--surface-raised); color:var(--danger); }
.empty-assets { padding:12px; border:1px dashed var(--line); border-radius:9px; color:var(--muted); font-size:11px; }
.storage-note { width:min(100%, 840px); display:flex; align-items:flex-start; gap:9px; padding:12px 14px; border-radius:10px; background:var(--surface-raised); color:var(--text-soft); font-size:12px; line-height:1.6; }
.storage-note svg { width:17px; height:17px; flex:none; margin-top:1px; fill:none; stroke:var(--success); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.language-content { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; width:min(100%, 1000px); }
.command-reference { min-height:114px; display:flex; flex-direction:column; gap:10px; padding:14px 16px 13px; border:1px solid var(--line-soft); border-radius:12px; background:var(--surface); }
.command-reference header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.command-reference header strong { color:var(--accent-strong); font-size:14px; }
.command-reference header span { color:var(--muted); font-size:11px; }
.command-reference code { display:block; color:var(--cyan); font:12px/1.8 ui-monospace, "Noto Sans Arabic", monospace; white-space:pre-wrap; direction:rtl; }
.command-reference p { margin:0; color:var(--text-soft); font-size:12px; line-height:1.6; }
.language-tip { width:min(100%,1000px); display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--line-soft); border-radius:11px; background:var(--surface-raised); }
.tip-mark { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; color:var(--muted); background:var(--surface); font:16px ui-monospace,monospace; }
.language-tip div { flex:1; }
.language-tip strong { font-size:13px; }
.language-tip p { margin:3px 0 0; color:var(--text-soft); font-size:11px; }
.language-tip code { color:var(--muted); font:11px ui-monospace,monospace; direction:rtl; }
.dialog-backdrop { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:18px; background:rgba(8,9,8,.58); }
.dialog-backdrop[hidden] { display:none; }
.dialog { width:min(100%, 420px); padding:21px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:var(--shadow); }
.dialog-top { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; }
.dialog-kicker { color:var(--muted); font-size:11px; }
.dialog-top h2 { margin:5px 0 0; font-size:19px; font-weight:620; }
.dialog-close { width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; }
.dialog-close svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.dialog-message { margin:13px 0 16px; color:var(--text-soft); font-size:13px; line-height:1.7; white-space:pre-wrap; }
.dialog-label { display:block; margin-bottom:7px; color:var(--text-soft); font-size:12px; }
.dialog-input { width:100%; height:46px; padding:0 12px; border:1px solid var(--line); border-radius:9px; background:var(--surface-soft); color:var(--text); outline:none; font-size:16px; }
.dialog-input:focus { border-color:var(--accent); }
.dialog-actions { display:flex; justify-content:flex-start; gap:8px; margin-top:16px; }
.dialog-secondary, .dialog-primary { min-height:42px; padding:0 15px; border:1px solid var(--line); border-radius:9px; background:transparent; color:var(--text-soft); font-size:13px; cursor:pointer; }
.dialog-primary { border-color:var(--accent); background:var(--accent); color:var(--accent-ink); font-weight:600; }
.toast { position:fixed; z-index:30; inset-inline-start:50%; inset-block-end:calc(78px + var(--safe-bottom)); max-width:min(90vw, 380px); transform:translate(-50%, 12px); padding:11px 15px; border:1px solid var(--line); border-radius:10px; background:var(--surface-raised); color:var(--text); box-shadow:var(--shadow); opacity:0; visibility:hidden; font-size:12px; line-height:1.55; text-align:center; transition:opacity .18s ease, transform .18s ease, visibility .18s; pointer-events:none; }
.toast.visible { opacity:1; visibility:visible; transform:translate(-50%,0); }
.toast.toast-error { border-color:color-mix(in srgb, var(--danger) 55%, var(--line)); }
@media (min-width:900px) {
  .app-main { padding:0 18px 13px; }
  #editorPanel { border:1px solid var(--line-soft); border-radius:15px; overflow:hidden; }
  .secondary-panel { border-inline:1px solid var(--line-soft); }
  .editor-toolbar { padding-inline:20px; }
}
@media (max-width:700px) {
  .topbar { height:58px; padding:0 15px; }
  .brand-mark { width:33px; height:33px; border-radius:10px; }
  .brand { gap:8px; min-width:auto; }
  .brand-copy strong { font-size:16px; }
  .brand-copy small { font-size:10px; }
  .topbar-actions { gap:4px; }
  .connection-state { gap:6px; font-size:10px; margin-inline-end:3px; }
  .icon-button { width:40px; height:40px; }
  .app-main { flex:1; min-height:0; }
  .editor-toolbar { min-height:56px; padding:7px 10px 7px 12px; gap:6px; }
  .active-file { gap:8px; }
  .file-glyph { width:31px; height:31px; font-size:13px; }
  .file-meta strong { max-width:24vw; font-size:12px; }
  .file-meta span { font-size:10px; }
  .toolbar-actions { gap:4px; }
  .toolbar-button { min-height:39px; padding:0 9px; gap:5px; border-radius:9px; font-size:12px; }
  .toolbar-button svg { width:16px; height:16px; }
  #newFileButton { display:none; }
  .toolbar-button.secondary { width:39px; padding:0; }
  .toolbar-button.secondary span { display:none; }
  .toolbar-button.compact { display:inline-flex; }
  .editor-workspace { flex:1; min-height:0; }
  .code-editor { flex:1; min-height:100px; }
  .line-gutter, .code-highlight, #codeInput { padding-top:16px; font-size:16px; line-height:1.8; }
  .line-gutter { width:42px; padding-top:16px; line-height:28.8px; font-size:11px; }
  .code-highlight { inset-inline-start:42px; padding-inline-start:14px; padding-inline-end:17px; }
  #codeInput { padding-inline-start:56px; padding-inline-end:17px; }
  .language-badge { inset-inline-end:11px; inset-block-end:8px; font-size:9px; }
  .console-panel { height:130px; min-height:76px; }
  .console-heading { padding-inline:13px; }
  .output-content { padding:10px 14px 12px; font-size:12px; }
  .terminal-command-line { min-height:52px; gap:7px; padding:4px 10px; }
  .terminal-prefix { gap:3px; font-size:11px; }
  #terminalInput { height:42px; padding-inline:3px; font-size:16px; }
  .terminal-submit { width:42px; height:42px; }
  .bottom-nav { display:flex; height:calc(60px + var(--safe-bottom)); padding-bottom:calc(4px + var(--safe-bottom)); }
  .nav-button { flex:1; min-width:0; min-height:47px; }
  .secondary-panel { gap:17px; padding:23px 17px 24px; }
  .panel-heading { padding-bottom:15px; }
  .panel-heading h1 { font-size:23px; }
  .panel-description { max-width:65vw; font-size:12px; }
  .language-content { grid-template-columns:1fr; gap:8px; }
  .command-reference { min-height:102px; padding:12px 13px; }
  .command-reference code { font-size:11px; }
  .storage-note { font-size:11px; }
  .language-tip { flex-wrap:wrap; }
  .language-tip code { margin-inline-start:42px; }
}
@media (max-width:390px) {
  .topbar { padding-inline:11px; }
  .connection-state span { display:none; }
  .editor-toolbar { padding-inline:8px; }
  .toolbar-button { padding-inline:7px; font-size:11px; }
  .file-meta strong { max-width:21vw; }
  .run-badge { max-width:36vw; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

@media (min-width:701px) and (max-width:900px) {
  .toolbar-button.secondary { width:42px; padding:0; }
  .toolbar-button.secondary span { display:none; }
  .file-meta strong { max-width:26vw; }
}

/* Final touch-target pass: 44px minimum for actionable controls. */
.icon-button { width:44px; height:44px; }
.toolbar-button { min-height:44px; }
.console-heading { height:44px; }
.console-icon { width:44px; height:44px; }
.console-panel.collapsed { height:44px; min-height:44px; }
.terminal-submit { width:44px; height:44px; }
#terminalInput { height:44px; }
.dialog-close { width:44px; height:44px; }
.file-row-actions button { width:44px; height:44px; }
.dialog-secondary, .dialog-primary { min-height:44px; }
.nav-button { min-height:44px; }
@media (max-width:700px) {
  .toolbar-button { min-height:44px; }
  .toolbar-button.secondary { width:44px; }
  .editor-toolbar { padding:6px 10px; gap:8px; }
  .active-file { flex:1; }
  .toolbar-actions { flex:none; }
  .file-meta { flex:1; }
  .file-meta strong { max-width:none; }
  .file-meta span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}
@media (min-width:701px) and (max-width:900px) {
  .toolbar-button.secondary { width:44px; }
}
@media (max-width:390px) {
  .file-glyph { display:none; }
  .file-meta strong { max-width:none; }
}

.dialog-backdrop { height:var(--app-height); inset-block-end:auto; }


/* SatrLang v6: local terminal assistant and phone-first learning path. */
.console-panel { height:208px; }
.console-heading { gap:10px; }
.console-title { flex:0 1 auto; }
.console-tabs { display:flex; align-items:center; gap:3px; flex:none; }
.console-tab { min-height:36px; padding:0 10px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--muted); font-size:11px; cursor:pointer; white-space:nowrap; }
.console-tab:hover { background:var(--surface-raised); color:var(--text); }
.console-tab.active { border-color:var(--line); background:var(--surface-raised); color:var(--text); }
.console-view { flex:1; min-height:0; display:flex; flex-direction:column; }
.console-view[hidden] { display:none!important; }
.console-panel .output-content { flex:1; }
.console-tools { margin-inline-start:auto; }
.console-tools .console-icon[hidden] { display:none!important; }
.assistant-view { gap:5px; padding:5px 14px 9px; background:var(--surface-soft); }
.assistant-intro { min-height:21px; display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--text-soft); font-size:11px; }
.assistant-intro strong { color:var(--text); font-weight:600; }
.assistant-intro span { color:var(--muted); font-size:10px; }
.assistant-messages { flex:1; min-height:34px; display:flex; flex-direction:column; gap:5px; overflow:auto; padding:2px 0; }
.assistant-message { width:fit-content; max-width:min(90%,760px); margin:0; padding:6px 10px; border:1px solid var(--line-soft); border-radius:9px; color:var(--text-soft); background:var(--surface); font-size:12px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.assistant-question { align-self:flex-start; border-color:color-mix(in srgb, var(--accent) 38%, var(--line)); color:var(--text); background:var(--surface-raised); }
.assistant-answer { align-self:flex-end; }
.assistant-suggestions { flex:none; display:flex; align-items:center; gap:6px; overflow-x:auto; padding:1px 0 3px; }
.assistant-suggestions button { min-height:30px; padding:0 9px; border:1px solid var(--line); border-radius:7px; background:transparent; color:var(--text-soft); font-size:10px; white-space:nowrap; cursor:pointer; }
.assistant-suggestions button:hover { border-color:var(--accent); color:var(--text); }
.assistant-form { flex:none; display:flex; align-items:center; gap:8px; }
.assistant-form input { flex:1; min-width:0; height:42px; padding:0 12px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--text); font-size:16px; outline:none; }
.assistant-form input:focus { border-color:var(--accent); }
.assistant-form button { min-width:64px; min-height:42px; padding:0 12px; border:1px solid var(--accent); border-radius:9px; background:var(--accent); color:var(--accent-ink); font-size:12px; font-weight:600; cursor:pointer; }
.assistant-form button:hover { background:var(--accent-strong); }

.learning-panel { gap:16px; }
.course-note { width:min(100%,1000px); padding:13px 15px; border:1px solid var(--line); border-radius:10px; background:var(--surface-raised); }
.course-note strong { font-size:13px; font-weight:650; }
.course-note p { max-width:820px; margin:6px 0 0; color:var(--text-soft); font-size:12px; line-height:1.75; }
.course-lessons { width:min(100%,1000px); display:flex; flex-direction:column; gap:8px; padding-bottom:12px; }
.lesson-card { border:1px solid var(--line-soft); border-radius:11px; background:var(--surface); overflow:hidden; }
.lesson-card[open] { border-color:var(--line); }
.lesson-card summary { min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; list-style:none; cursor:pointer; }
.lesson-card summary::-webkit-details-marker { display:none; }
.lesson-card summary > span:first-child { min-width:0; display:flex; flex-direction:column; gap:4px; }
.lesson-card summary small { color:var(--muted); font-size:10px; }
.lesson-card summary strong { color:var(--text); font-size:14px; font-weight:600; line-height:1.4; }
.lesson-state { flex:none; color:var(--muted); font-size:10px; }
.lesson-state.done { color:var(--success); }
.lesson-body { padding:0 14px 15px; color:var(--text-soft); font-size:13px; line-height:1.75; }
.lesson-body > p { max-width:760px; margin:8px 0; }
.lesson-body .lesson-goal { color:var(--accent-strong); font-weight:600; }
.lesson-code { max-width:100%; margin:10px 0; padding:12px 14px; overflow:auto; border:1px solid var(--line-soft); border-radius:8px; background:var(--surface-soft); color:var(--cyan); font:12px/1.8 ui-monospace,"SFMono-Regular",Menlo,monospace; direction:rtl; text-align:right; white-space:pre; tab-size:2; }
.lesson-code code { font:inherit; }
.lesson-pitfall,.lesson-checkpoint { max-width:760px; margin:10px 0; padding:10px 12px; border-inline-start:2px solid var(--warning); border-radius:0 7px 7px 0; background:var(--surface-soft); }
.lesson-checkpoint { border-inline-start-color:var(--accent); }
.lesson-pitfall strong,.lesson-checkpoint strong { color:var(--text); font-size:12px; }
.lesson-pitfall p,.lesson-checkpoint p { margin:3px 0 0; }
.lesson-exercise { margin:10px 0; padding:10px 12px; border-inline-start:2px solid var(--accent); background:var(--surface-soft); }
.lesson-exercise strong { color:var(--text); font-size:12px; }
.lesson-exercise p { margin:3px 0 0; }
.lesson-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
.lesson-actions .toolbar-button { min-height:44px; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

@media (min-width:900px) {
  .console-panel { height:228px; }
  .assistant-view { padding-inline:20px; }
  .assistant-message { font-size:13px; }
  .lesson-card summary { padding-inline:18px; }
  .lesson-body { padding-inline:18px; }
}
@media (max-width:700px) {
  .console-panel { height:225px; }
  .console-heading { padding-inline:8px; gap:5px; }
  .console-title { min-width:0; flex:0 1 52px; }
  .console-title .console-prompt, .console-title strong { display:none; }
  .run-badge { max-width:54px; font-size:9px; }
  .console-tabs { gap:1px; }
  .console-tab { min-height:36px; padding-inline:7px; font-size:10px; }
  .console-tools { gap:0; }
  .console-tools .console-icon { width:36px; height:36px; }
  .assistant-view { gap:4px; padding:4px 10px 8px; }
  .assistant-intro { min-height:18px; font-size:10px; }
  .assistant-messages { gap:4px; }
  .assistant-message { padding:6px 8px; font-size:11px; }
  .assistant-suggestions button { min-height:28px; padding-inline:8px; }
  .assistant-form input, .assistant-form button { height:42px; min-height:42px; }
  .learning-panel { gap:13px; }
  .course-note { padding:11px 12px; }
  .course-note p { font-size:11px; }
  .lesson-card summary { min-height:58px; padding:9px 11px; }
  .lesson-card summary strong { font-size:13px; }
  .lesson-body { padding:0 11px 13px; font-size:12px; }
  .lesson-code { padding:10px; font-size:11px; }
}
@media (max-width:390px) {
  .console-panel { height:220px; }
  .console-heading { padding-inline:6px; }
  .console-title { flex-basis:44px; }
  .run-badge { max-width:44px; }
  .console-tab { padding-inline:5px; font-size:9px; }
  .console-tools .console-icon { width:34px; height:34px; }
  .assistant-suggestions button { font-size:9px; }
}
.console-panel.collapsed .console-view { display:none!important; }
@media (max-width:700px) {
  .bottom-nav { gap:2px; padding-inline:8px; }
  .nav-button { padding-inline:5px; font-size:10px; }
}
/* SatrLang 6.2: a bounded page preview built from safe language components. */
.site-preview { flex:1; min-height:100px; display:flex; flex-direction:column; overflow:hidden; background:var(--surface-soft); }
.site-preview[hidden] { display:none!important; }
.site-preview-toolbar { min-height:54px; flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 17px; border-bottom:1px solid var(--line-soft); background:var(--surface); }
.site-preview-toolbar > div { display:flex; flex-direction:column; gap:3px; min-width:0; }
.site-preview-toolbar strong { font-size:13px; font-weight:650; }
.site-preview-toolbar span { color:var(--muted); font-size:11px; }
.site-preview-toolbar .toolbar-button { flex:none; }
.site-preview-stage { flex:1; min-height:0; overflow:auto; padding:clamp(12px,3vw,28px); }
.site-preview-content { width:min(100%,780px); min-height:100%; margin:auto; padding:clamp(24px,5vw,58px); border:1px solid #dbe2db; border-radius:16px; background:#fbfcf9; color:#202822; box-shadow:0 8px 24px rgba(24,38,27,.06); }
.site-preview-content[hidden], .site-preview-empty[hidden], .site-preview-message[hidden] { display:none!important; }
.site-block { direction:rtl; text-align:right; }
.site-block-heading { margin:0 0 17px; color:#202822; font-size:clamp(25px,4vw,38px); font-weight:700; line-height:1.35; letter-spacing:-.02em; overflow-wrap:anywhere; }
.site-block-text { margin:0 0 15px; color:#445149; font-size:16px; line-height:1.8; white-space:pre-wrap; overflow-wrap:anywhere; }
.site-block-card { margin:12px 0; padding:17px 19px; border:1px solid #dce5dd; border-inline-start:4px solid #63856a; border-radius:12px; background:#f6f9f5; color:#37443a; font-size:15px; line-height:1.8; white-space:pre-wrap; overflow-wrap:anywhere; }
.site-layout { min-width:0; margin:12px 0; }
.site-layout-stack { display:flex; flex-direction:column; gap:12px; }
.site-layout-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.site-block-image { display:block; width:100%; max-height:480px; object-fit:cover; border:1px solid #dce3dc; border-radius:12px; background:#f4f7f2; }
.site-block-input { display:flex; flex-direction:column; gap:8px; margin:14px 0; color:#39463c; font-size:14px; font-weight:600; }
.site-block-input input { width:100%; min-height:48px; padding:0 12px; border:1px solid #cbd7cd; border-radius:9px; background:#fff; color:#202822; font-family:inherit; font-size:16px; outline:none; }
.site-block-input input:focus { border-color:#42644a; box-shadow:0 0 0 3px rgba(66,100,74,.16); }
.site-game-canvas { display:block; width:min(100%,640px); height:auto; margin:16px 0; border:1px solid #d9e1d9; border-radius:10px; background:#f4f7f2; touch-action:manipulation; }
.site-key-hint { margin:5px 0 12px; color:#59665b; font-size:13px; line-height:1.6; }
.site-game-controls { display:flex; flex-direction:column; align-items:flex-start; gap:7px; margin:4px 0 14px; }
.site-game-controls>strong { color:#59665b; font-size:12px; font-weight:600; }
.site-game-control-grid { display:grid; grid-template-columns:repeat(3,52px); grid-template-rows:repeat(2,48px); gap:5px; }
.site-game-control { min-width:48px; min-height:44px; border:1px solid #cbd7cd; border-radius:10px; background:#f6f9f5; color:#26372a; font-family:inherit; font-size:19px; font-weight:650; cursor:pointer; touch-action:manipulation; }
.site-game-control:focus-visible { outline:3px solid #8aab8f; outline-offset:2px; }
.site-game-control:disabled { opacity:.6; cursor:wait; }
.site-game-control-arrowup { grid-column:2; grid-row:1; }
.site-game-control-arrowleft { grid-column:1; grid-row:2; }
.site-game-control-arrowdown { grid-column:2; grid-row:2; }
.site-game-control-arrowright { grid-column:3; grid-row:2; }
.site-game-control-space,.site-game-control-enter { min-width:76px; padding:0 10px; font-size:12px; grid-row:3; }
.site-block-button { min-height:48px; margin:8px 0; padding:0 19px; border:1px solid #42644a; border-radius:9px; background:#42644a; color:#fff; font-family:inherit; font-size:16px; font-weight:600; line-height:1.4; cursor:pointer; transition:background .15s ease; touch-action:manipulation; }
.site-block-button:hover { background:#35543c; }
.site-block-button:active { transform:none; }
.site-block-button:focus-visible { outline:3px solid #8aab8f; outline-offset:3px; }
.site-block-button:disabled { opacity:.65; cursor:wait; }
.site-preview-empty { width:min(100%,680px); min-height:100%; margin:auto; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:12px; padding:clamp(22px,5vw,45px); border:1px dashed var(--line); border-radius:14px; color:var(--text-soft); }
.site-preview-empty strong { color:var(--text); font-size:17px; font-weight:650; }
.site-preview-empty p { max-width:520px; margin:0; font-size:13px; line-height:1.7; }
.site-preview-empty pre { width:100%; margin:2px 0; padding:13px 15px; overflow:auto; border:1px solid var(--line-soft); border-radius:9px; background:var(--surface); color:var(--cyan); font:12px/1.85 ui-monospace,"SFMono-Regular",Menlo,monospace; direction:rtl; text-align:right; white-space:pre; }
.site-preview-empty .toolbar-button { min-height:44px; }
.site-preview-message { width:min(100%,780px); margin:12px auto 0; padding:10px 14px; border:1px solid var(--line); border-radius:9px; color:var(--text-soft); background:var(--surface); font-size:12px; line-height:1.65; }
.preview-active { color:var(--accent-strong)!important; border-color:var(--accent)!important; background:var(--surface-raised)!important; }
@media(max-width:700px) {
  .site-preview-toolbar { min-height:50px; padding-inline:11px; }
  .site-preview-toolbar span { font-size:10px; }
  .site-preview-stage { padding:10px; }
  .site-preview-content { min-height:100%; padding:25px 19px; border-radius:12px; }
  .site-block-heading { font-size:26px; }
  .site-block-text { font-size:15px; }
  .site-preview-empty { padding:22px 17px; }
  .site-layout-grid { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
  .site-block-button { transition:none; }
}