/* cpp.chromoshub.ru — online C++ compiler */
:root {
    --bg: #0d1117;
    --bg-2: #161b22;
    --bg-3: #1c2430;
    --panel: #10151d;
    --line: #26303c;
    --line-2: #313d4d;
    --txt: #e6edf3;
    --txt-2: #9aa7b4;
    --txt-3: #6b7684;
    --accent: #59b0ff;
    --accent-2: #2f81f7;
    --ok: #3fb950;
    --err: #f85149;
    --warn: #d29922;
    --mono: "JetBrains Mono", "Cascadia Code", "Fira Code", "DejaVu Sans Mono", "Consolas", monospace;
    --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --topbar-h: 54px;
    --toolbar-h: 52px;
}
:root[data-theme="light"] {
    --bg: #f4f6fa;
    --bg-2: #ffffff;
    --bg-3: #eef1f6;
    --panel: #ffffff;
    --line: #dde3ec;
    --line-2: #c8d1de;
    --txt: #16202b;
    --txt-2: #52616f;
    --txt-3: #808d9b;
    --accent: #1f6feb;
    --accent-2: #1a5fd0;
    --ok: #1a7f37;
    --err: #cf222e;
    --warn: #9a6700;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    font-family: var(--ui);
    background: var(--bg);
    color: var(--txt);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* ---- topbar ---- */
.topbar {
    height: var(--topbar-h);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
    gap: 12px;
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand__mark {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    padding: 5px 9px;
    border-radius: 8px;
    box-shadow: 0 3px 12px rgba(47, 129, 247, .4);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand__name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand__host { font-family: var(--mono); font-size: 11px; color: var(--txt-3); }

.topbar__actions { display: flex; align-items: center; gap: 10px; }
.lang { display: inline-flex; height: 32px; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.lang__btn {
    font-family: var(--mono); font-size: 11px; font-weight: 600;
    padding: 0 9px; border: 0; background: var(--bg-3); color: var(--txt-2); cursor: pointer;
    transition: background .12s, color .12s;
}
.lang__btn + .lang__btn { border-left: 1px solid var(--line-2); }
.lang__btn:hover { color: var(--accent); }
.lang__btn.is-active { background: var(--accent); color: #fff; }

.icon-btn {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-3); color: var(--txt-2); cursor: pointer;
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn .i-moon { display: none; }
:root[data-theme="light"] .icon-btn .i-sun { display: none; }
:root[data-theme="light"] .icon-btn .i-moon { display: block; }

/* ---- toolbar ---- */
.toolbar {
    height: var(--toolbar-h);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}
.field { display: inline-flex; align-items: center; gap: 8px; }
.field__lbl { font-size: 12px; color: var(--txt-2); }
.select {
    font-family: var(--mono); font-size: 13px;
    background: var(--bg-3); color: var(--txt); border: 1px solid var(--line-2);
    border-radius: 7px; padding: 6px 10px; cursor: pointer;
}
.select:focus { outline: none; border-color: var(--accent); }

.btn {
    font-family: var(--ui); font-size: 13px; font-weight: 500;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--line-2); background: var(--bg-3); color: var(--txt);
    transition: background .12s, border-color .12s, opacity .12s;
}
.btn:hover { border-color: var(--accent); }
.btn--primary { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.btn--primary:hover { background: var(--accent); border-color: var(--accent); }
.btn[disabled] { opacity: .55; cursor: default; pointer-events: none; }
.btn__icon { font-size: 10px; }
.btn__hint { font-family: var(--mono); font-size: 10px; opacity: .7; }
.toolbar__spacer { flex: 1; }
.sandbox-note { font-family: var(--mono); font-size: 12px; color: var(--txt-3); white-space: nowrap; }

/* ---- workspace ---- */
.workspace {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 0;
}
.pane {
    display: flex; flex-direction: column; min-height: 0; min-width: 0;
    background: var(--panel);
}
.pane--editor { border-right: 1px solid var(--line); }
.pane__head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px; font-size: 12px; color: var(--txt-2);
    border-bottom: 1px solid var(--line);
    background: var(--bg-2);
}
.pane__file, .status { font-family: var(--mono); font-size: 11px; color: var(--txt-3); }

.editor {
    flex: 1 1 auto; min-height: 0; width: 100%; resize: none;
    font-family: var(--mono); font-size: 13.5px; line-height: 1.6;
    padding: 14px 16px; border: 0; outline: none;
    background: var(--panel); color: var(--txt);
    tab-size: 4;
    white-space: pre;
    overflow: auto;
}
.stdin-box { flex: 0 0 auto; border-top: 1px solid var(--line); background: var(--bg-2); }
.stdin-box__head { font-size: 11px; color: var(--txt-2); padding: 6px 14px 2px; }
.stdin { width: 100%; height: 90px; resize: vertical; border: 0; outline: none;
    font-family: var(--mono); font-size: 12.5px; padding: 4px 16px 10px;
    background: var(--bg-2); color: var(--txt); }

/* ---- output ---- */
.output {
    flex: 1 1 auto; min-height: 0; overflow: auto;
    font-family: var(--mono); font-size: 13px; line-height: 1.55;
    padding: 14px 16px;
}
.output__placeholder { color: var(--txt-3); font-family: var(--ui); font-size: 13px; }
.out-block { margin-bottom: 16px; }
.out-block__title {
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--txt-3); margin-bottom: 6px;
    display: flex; align-items: center; gap: 8px;
}
.out-block__title .dot { width: 8px; height: 8px; border-radius: 50%; }
.dot--ok { background: var(--ok); }
.dot--err { background: var(--err); }
.dot--warn { background: var(--warn); }
.out-pre { white-space: pre-wrap; word-break: break-word; margin: 0; }
.out-pre--err { color: var(--err); }
.out-pre--muted { color: var(--txt-2); }
.badge {
    display: inline-block; font-size: 11px; font-family: var(--mono);
    padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2);
}
.badge--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.badge--err { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.badge--warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.truncated { color: var(--warn); font-size: 11px; margin-top: 4px; }

.status.is-busy { color: var(--accent); }
.spinner {
    display: inline-block; width: 11px; height: 11px; margin-right: 6px;
    border: 2px solid var(--line-2); border-top-color: var(--accent);
    border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -1px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- responsive ---- */
@media (max-width: 820px) {
    body { height: auto; min-height: 100vh; overflow: auto; }
    .workspace { grid-template-columns: 1fr; }
    .pane--editor { border-right: 0; border-bottom: 1px solid var(--line); }
    .editor { min-height: 300px; }
    .output { min-height: 240px; }
    .brand__name { display: none; }
    .sandbox-note { display: none; }
}