/* HTML Editor: full-height app layout */

body.editor-page { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }

/* ---------- toolbar ---------- */

.ed-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--rule-soft);
    flex-wrap: wrap;
}
.ed-bar .seg { flex-wrap: nowrap; }
.ed-bar .seg button { flex: none; padding: 6px 12px; display: inline-flex; gap: 6px; align-items: center; }
.ed-bar .seg svg { width: 15px; height: 15px; }
.ed-bar .spacer { flex: 1; }
.ed-name {
    font: 600 15px var(--sans);
    color: var(--ink);
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 6px 8px;
    width: 170px;
}
.ed-name:hover { border-color: var(--rule-soft); }
.ed-name:focus { outline: none; border-color: var(--ink); }
.ed-saved { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.ed-sep { width: 1px; height: 22px; background: var(--rule-soft); }
.icon-btn {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 9px;
    background: none;
    color: var(--ink-2);
    cursor: pointer;
    position: relative;
}
.icon-btn:hover { color: var(--ink); background: var(--bg-soft); }
.icon-btn svg { width: 18px; height: 18px; }
.ed-bar .mini.run { background: var(--c); border-color: var(--c); color: #fff; }

/* menus */
.menu-wrap { position: relative; }
.menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 230px;
    background: var(--bg);
    border: 1px solid var(--rule-soft);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,.14);
    padding: 6px;
    z-index: 50;
    display: none;
}
.menu.right { left: auto; right: 0; }
.menu.open { display: block; }
.menu button, .menu label.item {
    display: flex;
    width: 100%;
    gap: 10px;
    align-items: center;
    text-align: left;
    font: 500 14px var(--sans);
    color: var(--ink);
    background: none;
    border: 0;
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
}
.menu button:hover { background: var(--bg-soft); }
.menu button small { margin-left: auto; color: var(--ink-3); font: 12px var(--mono); }
.menu .label { font-size: 12px; color: var(--ink-3); padding: 8px 10px 4px; text-transform: uppercase; letter-spacing: .06em; }
.menu hr { border: 0; border-top: 1px solid var(--rule-soft); margin: 6px 0; }
.menu .setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; font-size: 14px; }
.menu .setting input[type="range"] { width: 110px; }

/* ---------- workspace ---------- */

.ed-work {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: var(--left, 50%) 8px minmax(0, 1fr);
}
.ed-left, .ed-right { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ed-split { cursor: col-resize; background: var(--rule-soft); position: relative; }
.ed-split::after { content: ""; position: absolute; inset: 50% 2px auto; height: 32px; transform: translateY(-50%); border-left: 2px dotted var(--ink-3); left: 3px; }
.ed-split:hover, .ed-split.drag { background: var(--c); }

/* code tabs */
.ed-tabs { display: flex; gap: 2px; padding: 8px 12px 0; border-bottom: 1px solid var(--rule-soft); }
.ed-tabs button {
    font: 600 13px var(--mono);
    color: var(--ink-3);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 8px 12px;
    cursor: pointer;
    display: inline-flex;
    gap: 8px;
    align-items: center;
}
.ed-tabs button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.ed-tabs button[data-tab="html"] { --dot: #ff5b2e; }
.ed-tabs button[data-tab="css"] { --dot: #2563eb; }
.ed-tabs button[data-tab="js"] { --dot: #e0a100; }
.ed-tabs button[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.ed-code { flex: 1; min-height: 0; position: relative; }
.ed-code .CodeMirror { position: absolute; inset: 0; height: auto; }

/* ---------- CodeMirror theme that follows the site theme ---------- */

.CodeMirror {
    font-family: var(--mono);
    font-size: var(--ed-font, 14px);
    line-height: 1.6;
    background: var(--bg);
    color: var(--ink);
}
.CodeMirror-gutters { background: var(--bg); border-right: 1px solid var(--rule-soft); }
.CodeMirror-linenumber { color: var(--ink-3); padding: 0 10px 0 6px; }
.CodeMirror-cursor { border-left: 2px solid var(--c); }
.CodeMirror-activeline-background { background: var(--bg-soft); }
.CodeMirror-selected, .CodeMirror-focused .CodeMirror-selected { background: color-mix(in srgb, var(--c) 22%, transparent) !important; }
.CodeMirror-matchingbracket { color: var(--ink) !important; background: color-mix(in srgb, var(--c) 25%, transparent); }
.CodeMirror-matchingtag { background: color-mix(in srgb, var(--c) 14%, transparent); }
.CodeMirror-lines { padding: 10px 0; }

.cm-s-sb .cm-tag { color: #d6336c; }
.cm-s-sb .cm-attribute { color: #b45309; }
.cm-s-sb .cm-string { color: #15803d; }
.cm-s-sb .cm-string-2 { color: #15803d; }
.cm-s-sb .cm-keyword { color: #7c3aed; }
.cm-s-sb .cm-def { color: #2563eb; }
.cm-s-sb .cm-variable-2, .cm-s-sb .cm-variable-3 { color: #0e7490; }
.cm-s-sb .cm-property { color: #2563eb; }
.cm-s-sb .cm-number { color: #c2410c; }
.cm-s-sb .cm-atom { color: #c2410c; }
.cm-s-sb .cm-comment { color: var(--ink-3); font-style: italic; }
.cm-s-sb .cm-qualifier, .cm-s-sb .cm-builtin { color: #db2777; }
.cm-s-sb .cm-meta { color: var(--ink-3); }
.cm-s-sb .cm-bracket { color: var(--ink-3); }
.cm-s-sb .cm-error { color: #dc2626; }

:root[data-theme="dark"] .cm-s-sb .cm-tag { color: #ff7aa8; }
:root[data-theme="dark"] .cm-s-sb .cm-attribute { color: #fbbf24; }
:root[data-theme="dark"] .cm-s-sb .cm-string, :root[data-theme="dark"] .cm-s-sb .cm-string-2 { color: #86efac; }
:root[data-theme="dark"] .cm-s-sb .cm-keyword { color: #c4b5fd; }
:root[data-theme="dark"] .cm-s-sb .cm-def, :root[data-theme="dark"] .cm-s-sb .cm-property { color: #93c5fd; }
:root[data-theme="dark"] .cm-s-sb .cm-variable-2, :root[data-theme="dark"] .cm-s-sb .cm-variable-3 { color: #67e8f9; }
:root[data-theme="dark"] .cm-s-sb .cm-number, :root[data-theme="dark"] .cm-s-sb .cm-atom { color: #fdba74; }
:root[data-theme="dark"] .cm-s-sb .cm-qualifier, :root[data-theme="dark"] .cm-s-sb .cm-builtin { color: #f9a8d4; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .cm-s-sb .cm-tag { color: #ff7aa8; }
    :root:not([data-theme="light"]) .cm-s-sb .cm-attribute { color: #fbbf24; }
    :root:not([data-theme="light"]) .cm-s-sb .cm-string, :root:not([data-theme="light"]) .cm-s-sb .cm-string-2 { color: #86efac; }
    :root:not([data-theme="light"]) .cm-s-sb .cm-keyword { color: #c4b5fd; }
    :root:not([data-theme="light"]) .cm-s-sb .cm-def, :root:not([data-theme="light"]) .cm-s-sb .cm-property { color: #93c5fd; }
    :root:not([data-theme="light"]) .cm-s-sb .cm-variable-2, :root:not([data-theme="light"]) .cm-s-sb .cm-variable-3 { color: #67e8f9; }
    :root:not([data-theme="light"]) .cm-s-sb .cm-number, :root:not([data-theme="light"]) .cm-s-sb .cm-atom { color: #fdba74; }
    :root:not([data-theme="light"]) .cm-s-sb .cm-qualifier, :root:not([data-theme="light"]) .cm-s-sb .cm-builtin { color: #f9a8d4; }
}

.CodeMirror-hints {
    font-family: var(--mono);
    font-size: 13px;
    background: var(--bg);
    border: 1px solid var(--rule-soft);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,.16);
    padding: 4px;
    z-index: 60;
}
.CodeMirror-hint { color: var(--ink); border-radius: 6px; padding: 3px 8px; }
li.CodeMirror-hint-active { background: var(--c); color: #fff; }

/* ---------- preview ---------- */

.pv-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 13px;
    color: var(--ink-3);
    min-height: 43px;
}
.pv-bar .url { font-family: var(--mono); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-stage { flex: 1; min-height: 0; background: var(--bg-soft); display: flex; justify-content: center; overflow: auto; }
.pv-stage iframe { border: 0; background: #fff; width: 100%; height: 100%; display: block; transition: width .2s; }
.pv-stage.framed { padding: 20px; }
.pv-stage.framed iframe { border-radius: 14px; box-shadow: 0 0 0 1px var(--rule-soft), 0 10px 30px rgba(0,0,0,.1); flex: none; }

.console { border-top: 1px solid var(--rule-soft); display: flex; flex-direction: column; max-height: 40%; }
.console-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font: 600 12px var(--sans);
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
    user-select: none;
}
.console-head .count { font: 500 11px var(--mono); background: var(--bg-soft); border-radius: 999px; padding: 1px 7px; color: var(--ink-2); }
.console-head .count.err { background: #dc2626; color: #fff; }
.console-head button { margin-left: auto; text-transform: none; letter-spacing: 0; }
.console-head .chev { transition: transform .15s; width: 14px; height: 14px; }
.console.closed .console-head .chev { transform: rotate(-90deg); }
.console-body { overflow: auto; font: 12.5px/1.5 var(--mono); min-height: 90px; }
.console.closed .console-body { display: none; }
.console-line { padding: 4px 12px; border-top: 1px solid var(--rule-soft); white-space: pre-wrap; word-break: break-word; display: flex; gap: 8px; }
.console-line .lvl { flex: none; width: 14px; text-align: center; }
.console-line.warn { background: color-mix(in srgb, #e0a100 10%, transparent); color: #a16207; }
.console-line.error { background: color-mix(in srgb, #dc2626 9%, transparent); color: #dc2626; }
.console-empty { padding: 10px 12px; color: var(--ink-3); }

/* ---------- blocks mode ---------- */

.bk { flex: 1; min-height: 0; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.bk > * { flex: none; }
.bk-palette { display: grid; gap: 10px; }
.bk-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bk-group > span { font-size: 12px; color: var(--ink-3); width: 76px; flex: none; }
.bk-add {
    font: 600 13px var(--sans);
    color: #fff;
    background: var(--bc);
    border: 0;
    border-radius: 8px;
    padding: 7px 11px 7px 9px;
    cursor: grab;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.18);
}
.bk-add:hover { filter: brightness(1.08); }
.bk-add:active { cursor: grabbing; }
.bk-add::before { content: "+"; font-weight: 700; opacity: .8; }

.bk-list { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: var(--bg-soft); min-height: 140px; align-content: start; }
.bk-list.over { outline: 2px dashed var(--c); outline-offset: -2px; }
.bk-empty { color: var(--ink-3); font-size: 14px; text-align: center; padding: 30px 10px; }

.blk {
    background: var(--bg);
    border-radius: 10px;
    border: 1px solid var(--rule-soft);
    border-left: 6px solid var(--bc);
    overflow: hidden;
}
.blk.sel { border-color: var(--bc); box-shadow: 0 0 0 1px var(--bc); }
.blk.dragging { opacity: .4; }
.blk.drop-before { box-shadow: 0 -3px 0 var(--c); }
.blk.drop-after { box-shadow: 0 3px 0 var(--c); }
.blk-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 6px; cursor: pointer; }
.blk-grip { cursor: grab; color: var(--ink-3); padding: 2px; display: grid; place-items: center; }
.blk-grip svg { width: 16px; height: 16px; }
.blk-type { font: 600 12px var(--sans); color: var(--bc); text-transform: uppercase; letter-spacing: .05em; flex: none; }
.blk-sum { font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.blk-acts { display: flex; gap: 2px; }
.blk-acts button { width: 28px; height: 28px; border: 0; background: none; color: var(--ink-3); border-radius: 6px; cursor: pointer; display: grid; place-items: center; }
.blk-acts button:hover { background: var(--bg-soft); color: var(--ink); }
.blk-acts svg { width: 15px; height: 15px; }
.blk-body { display: none; padding: 4px 14px 14px; gap: 12px; grid-template-columns: 1fr 1fr; }
.blk.sel .blk-body { display: grid; }
.blk-body .full { grid-column: 1 / -1; }
.blk-body .area { min-height: 84px; }
.blk-body .input, .blk-body .select, .blk-body .area { font-size: 14px; padding: 7px 10px; }
.blk-body .color-row { display: flex; gap: 6px; align-items: center; }
.blk-body .color-row input[type="color"] { width: 38px; height: 34px; }

.page-card { border: 1px solid var(--rule-soft); border-radius: 14px; }
.page-card summary { padding: 12px 14px; font-weight: 600; font-size: 14px; cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: center; }
.page-card summary::-webkit-details-marker { display: none; }
.page-card summary::before { content: "▸"; color: var(--ink-3); transition: transform .15s; }
.page-card[open] summary::before { transform: rotate(90deg); }
.page-card .blk-body { display: grid; }

body[data-mode="blocks"] .code-only, body[data-mode="code"] .blocks-only { display: none !important; }

/* ---------- small screens ---------- */

.only-narrow { display: none !important; }
@media (max-width: 900px) {
    .only-narrow { display: flex !important; }
    .hide-narrow { display: none !important; }
    .ed-work { grid-template-columns: 1fr; }
    .ed-split { display: none; }
    .ed-work[data-view="edit"] .ed-right { display: none; }
    .ed-work[data-view="preview"] .ed-left { display: none; }
    .ed-name { width: 120px; }
}

/* ---------- editor styles (Settings → Style) ---------- */

body[data-ed-style="midnight"] { --t-bg: #1e1e1e; --t-text: #d4d4d4; --t-gutter: #858585; --t-line: #2a2a2a; --t-tag: #569cd6; --t-attr: #9cdcfe; --t-string: #ce9178; --t-keyword: #c586c0; --t-def: #dcdcaa; --t-prop: #9cdcfe; --t-number: #b5cea8; --t-comment: #6a9955; --t-var: #4fc1ff; }
body[data-ed-style="paper"]    { --t-bg: #fdfcf8; --t-text: #222222; --t-gutter: #a8a29e; --t-line: #f3efe6; --t-tag: #0067b8; --t-attr: #7a3e9d; --t-string: #a31515; --t-keyword: #af00db; --t-def: #795e26; --t-prop: #0451a5; --t-number: #098658; --t-comment: #008000; --t-var: #001080; }
body[data-ed-style="ocean"]    { --t-bg: #102133; --t-text: #e6f1ff; --t-gutter: #5b7a99; --t-line: #16304a; --t-tag: #7fdbff; --t-attr: #ffd166; --t-string: #9cffd2; --t-keyword: #ff9ff3; --t-def: #ffb86c; --t-prop: #8be9fd; --t-number: #ffb86c; --t-comment: #6c8aa8; --t-var: #c3e88d; }
body[data-ed-style="legacy"]   { --t-bg: #1e1e1e; --t-text: #d4d4d4; --t-gutter: #858585; --t-line: #262626; --t-tag: #569cd6; --t-attr: #9cdcfe; --t-string: #ce9178; --t-keyword: #569cd6; --t-def: #dcdcaa; --t-prop: #dcdcaa; --t-number: #b5cea8; --t-comment: #6a9955; --t-var: #9cdcfe; }

body[data-ed-style]:not([data-ed-style="default"]) .CodeMirror,
body[data-ed-style]:not([data-ed-style="default"]) .CodeMirror-gutters { background: var(--t-bg); color: var(--t-text); }
body[data-ed-style]:not([data-ed-style="default"]) .CodeMirror-gutters { border-color: var(--t-line); }
body[data-ed-style]:not([data-ed-style="default"]) .CodeMirror-linenumber { color: var(--t-gutter); }
body[data-ed-style]:not([data-ed-style="default"]) .CodeMirror-activeline-background { background: var(--t-line); }
body[data-ed-style]:not([data-ed-style="default"]) .CodeMirror-cursor { border-left-color: var(--t-text); }
body[data-ed-style]:not([data-ed-style="default"]) .cm-s-sb .cm-tag { color: var(--t-tag); }
body[data-ed-style]:not([data-ed-style="default"]) .cm-s-sb .cm-attribute { color: var(--t-attr); }
body[data-ed-style]:not([data-ed-style="default"]) .cm-s-sb .cm-string,
body[data-ed-style]:not([data-ed-style="default"]) .cm-s-sb .cm-string-2 { color: var(--t-string); }
body[data-ed-style]:not([data-ed-style="default"]) .cm-s-sb .cm-keyword { color: var(--t-keyword); }
body[data-ed-style]:not([data-ed-style="default"]) .cm-s-sb .cm-def { color: var(--t-def); }
body[data-ed-style]:not([data-ed-style="default"]) .cm-s-sb .cm-property { color: var(--t-prop); }
body[data-ed-style]:not([data-ed-style="default"]) .cm-s-sb .cm-number,
body[data-ed-style]:not([data-ed-style="default"]) .cm-s-sb .cm-atom { color: var(--t-number); }
body[data-ed-style]:not([data-ed-style="default"]) .cm-s-sb .cm-comment { color: var(--t-comment); }
body[data-ed-style]:not([data-ed-style="default"]) .cm-s-sb .cm-variable-2,
body[data-ed-style]:not([data-ed-style="default"]) .cm-s-sb .cm-variable-3,
body[data-ed-style]:not([data-ed-style="default"]) .cm-s-sb .cm-qualifier,
body[data-ed-style]:not([data-ed-style="default"]) .cm-s-sb .cm-builtin { color: var(--t-var); }
body[data-ed-style]:not([data-ed-style="default"]) .cm-s-sb .cm-bracket,
body[data-ed-style]:not([data-ed-style="default"]) .cm-s-sb .cm-meta { color: var(--t-gutter); }

/* Legacy coder: how the ShadeBox HTML Tool used to look */
body[data-ed-style="legacy"] {
    --bg: #ffffff; --bg-soft: #f3eaea; --ink: #222; --ink-2: #444; --ink-3: #6b6b6b; --rule-soft: #d9bcbc; --c: #008eb3;
    --leg-grad: linear-gradient(360deg, #007a99 0%, #00b4db 100%);
    font-family: Verdana, Geneva, sans-serif;
    background: #dfe9ee;
    color-scheme: light;
}
body[data-ed-style="legacy"] button,
body[data-ed-style="legacy"] input,
body[data-ed-style="legacy"] select { font-family: Verdana, Geneva, sans-serif !important; }
body[data-ed-style="legacy"] .CodeMirror { font-family: Consolas, "Courier New", monospace; }
body[data-ed-style="legacy"] .tool-head { background: var(--leg-grad); border: 0; }
body[data-ed-style="legacy"] .tool-head .wrap { height: 50px; max-width: none; }
body[data-ed-style="legacy"] .tool-head .logo { color: #fff; font-style: italic; }
body[data-ed-style="legacy"] .tool-head .path, body[data-ed-style="legacy"] .tool-head .path a, body[data-ed-style="legacy"] .tool-head .path b { color: #fff; }
body[data-ed-style="legacy"] .tool-head .theme-btn { color: #fff; border-color: rgba(255,255,255,.5); border-radius: 0; }
body[data-ed-style="legacy"] .ed-bar { background: #f3eaea; border-bottom: 1px solid #d9bcbc; }
body[data-ed-style="legacy"] .ed-name { border-radius: 0; color: #008eb3; font-weight: bold; }
body[data-ed-style="legacy"] .mini,
body[data-ed-style="legacy"] .seg,
body[data-ed-style="legacy"] .seg button,
body[data-ed-style="legacy"] .icon-btn,
body[data-ed-style="legacy"] .menu,
body[data-ed-style="legacy"] .menu button,
body[data-ed-style="legacy"] .bk-add,
body[data-ed-style="legacy"] .blk,
body[data-ed-style="legacy"] .bk-list,
body[data-ed-style="legacy"] .page-card,
body[data-ed-style="legacy"] .input,
body[data-ed-style="legacy"] .select,
body[data-ed-style="legacy"] .area { border-radius: 0 !important; }
body[data-ed-style="legacy"] .mini { background: #006f8c; border-color: #006f8c; color: #fff; }
body[data-ed-style="legacy"] .mini:hover { background: #007a99; }
body[data-ed-style="legacy"] .seg { background: #fff; border: 1px solid #d9bcbc; }
body[data-ed-style="legacy"] .seg button[aria-pressed="true"] { background: #008eb3; color: #fff; box-shadow: none; }
body[data-ed-style="legacy"] .icon-btn { background: #006f8c; color: #fff; }
body[data-ed-style="legacy"] .icon-btn[data-act="run"] { background: #198a3a; }
body[data-ed-style="legacy"] .icon-btn[data-act="run"]:hover { background: #21a84a; }
body[data-ed-style="legacy"] .menu { box-shadow: 0 8px 18px rgba(0,0,0,.28); }
body[data-ed-style="legacy"] .menu button { color: #008eb3; }
body[data-ed-style="legacy"] .menu button:hover { background: var(--leg-grad); color: #fff; }
body[data-ed-style="legacy"] .ed-work { gap: 12px; padding: 14px; background: rgba(255,255,255,.55); grid-template-columns: var(--left, 50%) 6px minmax(0, 1fr); }
body[data-ed-style="legacy"] .ed-left, body[data-ed-style="legacy"] .ed-right { background: #fff; border: 1px solid rgba(0,142,179,.18); box-shadow: 0 8px 20px rgba(0,0,0,.16); }
body[data-ed-style="legacy"] .ed-split { background: transparent; }
body[data-ed-style="legacy"] .ed-split::after { display: none; }
body[data-ed-style="legacy"] .ed-tabs { background: var(--leg-grad); border: 0; padding: 6px 10px 0; }
body[data-ed-style="legacy"] .ed-tabs button { color: rgba(255,255,255,.85); font-family: Verdana, sans-serif; border: 0; border-top: 3px solid transparent; }
body[data-ed-style="legacy"] .ed-tabs button::before { display: none; }
body[data-ed-style="legacy"] .ed-tabs button[aria-pressed="true"] { background: #fff; color: #008eb3; border-top-color: #008eb3; }
body[data-ed-style="legacy"] .pv-bar { background: var(--leg-grad); color: #fff; border: 0; font-weight: bold; font-family: Verdana, sans-serif; }
body[data-ed-style="legacy"] .pv-bar .url { font-family: Verdana, sans-serif; }
body[data-ed-style="legacy"] .pv-stage { background: #eee; }
body[data-ed-style="legacy"] .console-head { background: #f3eaea; }
@media (max-width: 900px) {
    body[data-ed-style="legacy"] .ed-work { grid-template-columns: 1fr; padding: 8px; }
}