:root {
    --ink: #172033;
    --ink-soft: #334155;
    --paper: #fffdf8;
    --canvas: #e9e7e1;
    --panel: #f7f4ec;
    --line: #d8d3c8;
    --muted: #7b8494;
    --accent: #ff6b35;
    --accent-dark: #e65422;
    --blue: #2563eb;
    --shadow: 0 18px 45px rgba(23, 32, 51, .12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    height: 100vh;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--canvas);
    color: var(--ink);
    font: 14px/1.45 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

button, input, select, textarea { font: inherit; }
button { color: inherit; }

#app { display: flex; flex-direction: column; height: 100vh; }

/* Header */
#toolbar {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: auto minmax(430px, 1fr) auto;
    grid-template-areas: "brand config actions" "modes modes modes";
    gap: 12px 22px;
    padding: 13px 18px 10px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 4px 20px rgba(23, 32, 51, .06);
}

.brand-block {
    grid-area: brand;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 150px;
}

.brand-block > span:last-child { display: flex; flex-direction: column; letter-spacing: .12em; }
.brand-block strong { font-size: 13px; line-height: 1.1; }
.brand-block small { margin-top: 3px; color: var(--muted); font-size: 9px; letter-spacing: .2em; }
.brand-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #fff;
    background: var(--ink);
    border-radius: 10px 3px 10px 3px;
    font: 800 17px/1 Georgia, serif;
}

.board-config {
    grid-area: config;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.board-config::-webkit-scrollbar { display: none; }

.field-shell {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 9px;
    background: #f2efe8;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: border-color .15s, background .15s;
}

.field-shell:focus-within { background: #fff; border-color: #a8b4c6; }
.field-shell span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.field-shell input, .field-shell select {
    width: 38px;
    padding: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}
.field-shell select { width: 68px; cursor: pointer; }
.field-wide select { width: 78px; }
.toggle-field { cursor: pointer; }
.toggle-field input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.toggle-field span { color: var(--ink-soft); }

.primary-btn, .toolbar-actions button {
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    transition: transform .15s, border-color .15s, background .15s, color .15s;
}

.primary-btn { color: #fff; border-color: var(--ink); background: var(--ink); }
.primary-btn:hover, .toolbar-actions .accent-btn:hover { transform: translateY(-1px); background: #27334a; }

.toolbar-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    flex-wrap: wrap;
}
.toolbar-actions button:hover { border-color: #9da7b5; background: #f7f8fa; }
.toolbar-actions .accent-btn { color: #fff; background: var(--accent); border-color: var(--accent); }
#btn-import-file,
#btn-import-yaml,
#btn-export-file,
#btn-export-text { white-space: nowrap; }
.export-copy-feedback {
    margin: 8px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}
.export-copy-feedback.ok {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}
.export-copy-feedback.error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}
.action-divider { width: 1px; height: 22px; margin: 0 3px; background: var(--line); }

.toolbar-modes {
    grid-area: modes;
    display: flex;
    justify-content: center;
    gap: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
}
.toolbar-modes::-webkit-scrollbar { display: none; }
.toolbar-modes.is-dragging { cursor: grabbing; user-select: none; }

.mode-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 78px;
    height: 37px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #667085;
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
    transition: background .15s, color .15s, transform .15s;
}
.mode-btn > span { min-width: 18px; color: #9299a6; font-size: 14px; font-weight: 800; text-align: center; }
.mode-btn kbd { color: #a7adb8; font: 600 9px/1 ui-monospace, monospace; }
.mode-btn:hover { color: var(--ink); background: #f1eee7; }
.mode-btn.active { color: var(--ink); background: #ebe7dd; box-shadow: inset 0 -2px var(--accent); }
.mode-btn.active > span { color: var(--accent); }
.mode-btn:disabled { opacity: .35; cursor: not-allowed; }
.mode-btn:disabled:hover { color: #667085; background: transparent; }

/* Workspace */
#main { display: flex; flex: 1; min-height: 0; overflow: hidden; }

#palette {
    position: relative;
    z-index: 2;
    flex: 0 0 238px;
    width: 238px;
    padding: 20px 18px 28px;
    overflow-y: auto;
    background: var(--panel);
    border-right: 1px solid var(--line);
    box-shadow: 8px 0 24px rgba(23, 32, 51, .04);
    scrollbar-color: #c6c0b4 transparent;
    scrollbar-width: thin;
}

.palette-heading { margin-bottom: 22px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.palette-heading span, .modal-eyebrow { display: block; margin-bottom: 4px; color: var(--accent-dark); font-size: 9px; font-weight: 800; letter-spacing: .2em; }
.palette-heading strong { font: 700 21px/1.2 Georgia, "Noto Serif SC", serif; }
.palette-panel h3 { margin: 17px 0 9px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.palette-panel > h3:first-child { display: none; }
.palette-panel.hidden, .hidden { display: none !important; }

#palette label { display: block; margin: 8px 0; color: var(--ink-soft); font-size: 12px; }
#palette input[type="radio"] { accent-color: var(--accent); transform: translateY(1px); }
#palette input[type="number"], #palette input[type="text"], #palette select, #palette textarea {
    width: 100%;
    margin-top: 4px;
    padding: 8px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    outline: 0;
    background: #fff;
    color: var(--ink);
    font-size: 12px;
    transition: border-color .15s, box-shadow .15s;
}
#palette input:focus, #palette select:focus, #palette textarea:focus { border-color: #9ba9bb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .08); }

/* Secondary section labels inside a tool panel (e.g. symbol → color). */
.palette-section-title {
    display: block;
    margin: 20px 0 10px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
/* Keep space between symbol grid and the color block even without the title. */
.palette-panel[data-for="symbol"] .symbol-grid { margin-bottom: 4px; }
.palette-panel[data-for="symbol"] .color-options { margin-top: 2px; }

.color-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.color-btn {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border: 3px solid var(--panel);
    border-radius: 10px;
    outline: 1px solid var(--line);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.color-btn:hover { transform: translateY(-2px); }
.color-btn.active { box-shadow: 0 0 0 2px var(--accent); }
.color-btn input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.color-btn[data-color="custom"] { background: conic-gradient(#ff6b35, #facc15, #22c55e, #3b82f6, #a855f7, #ff6b35); }

.number-pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 15px; }
.num-btn, .sym-btn {
    display: grid;
    place-items: center;
    min-width: 0;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-weight: 700;
    transition: border-color .15s, background .15s, color .15s, transform .15s;
}
.num-btn:hover, .sym-btn:hover { color: #fff; border-color: var(--ink); background: var(--ink); transform: translateY(-1px); }
.symbol-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.sym-btn { height: 38px; font-size: 17px; }
.sym-btn.active { color: var(--accent-dark); border-color: var(--accent); background: #fff4ed; }
.half-icon { display: block; flex: 0 0 auto; color: currentColor; }
.half-icon.half-up, .half-icon.half-down { width: 18px; height: 9px; }
.half-icon.half-left, .half-icon.half-right { width: 9px; height: 18px; }
.half-icon.filled { background: currentColor; }
.half-icon.empty { border: 2px solid currentColor; background: transparent; }
.half-icon.half-up { border-radius: 18px 18px 0 0; }
.half-icon.half-down { border-radius: 0 0 18px 18px; }
.half-icon.half-left { border-radius: 18px 0 0 18px; }
.half-icon.half-right { border-radius: 0 18px 18px 0; }

.number-style, .edge-styles, .line-styles, .line-target, .line-mode, .marker-types, .perimeter-dir {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 9px;
    margin: 12px 0;
    padding: 10px;
    border: 1px solid #e2ddd2;
    border-radius: 10px;
    background: rgba(255, 255, 255, .55);
}
.line-target, .number-style { grid-template-columns: 1fr; }
.number-style label, .edge-styles label, .line-styles label, .line-target label, .line-mode label, .marker-types label, .perimeter-dir label { margin: 2px 0 !important; cursor: pointer; }

.hint { margin-top: 12px; padding: 9px 10px; color: #70798a; background: #eeebe3; border-left: 2px solid #bbb4a7; border-radius: 0 7px 7px 0; font-size: 10.5px; line-height: 1.55; }
.hint.error { color: #b42318; border-left-color: #f04438; background: #fee4e2; }
.meta-section-title { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 12px; }
.custom-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 8px 0 12px; }
.custom-actions button { padding: 8px 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-size: 11px; font-weight: 700; }
.custom-actions .primary-btn, .custom-actions button.primary-btn { color: #fff; border-color: var(--accent); background: var(--accent); }
#custom-yaml { min-height: 110px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; line-height: 1.4; }
.palette-copy { color: var(--ink-soft); font-size: 12px; line-height: 1.7; }
.board-mask-actions { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: 14px; }
.board-mask-actions:has(#btn-board-select-all:not(.hidden)) { grid-template-columns: 1fr 1fr; }
.board-mask-actions button { padding: 8px 5px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-size: 11px; font-weight: 700; }
#btn-board-select-all:not(.hidden) { color: #fff; border-color: var(--accent); background: var(--accent); }
.pos-grid-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; }
.prop-item { display: grid; grid-template-columns: 1fr 48px 24px; align-items: center; gap: 5px; margin: 5px 0; padding: 5px 7px; background: #ebe7de; border-radius: 7px; font-size: 11px; }
.prop-del { border: 0; background: transparent; color: #dc2626; cursor: pointer; font-size: 16px; }
#btn-region-prop-add { width: 100%; padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--ink); color: #fff; cursor: pointer; font-size: 11px; }
.curve-data-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.curve-data-actions button { padding: 8px 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-size: 11px; font-weight: 700; }
.curve-data-actions button:first-child { color: #fff; border-color: var(--accent); background: var(--accent); }
.curve-data-actions button:last-child { color: #b42318; }
.curve-data-preview { min-height: 48px; margin: 10px 0 0; padding: 9px 10px; overflow-x: auto; border: 1px solid #e2ddd2; border-radius: 8px; background: #fff; color: #374151; font: 10.5px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; }
#curve-data-ascii { min-height: 126px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; line-height: 1.35; white-space: pre; }
#palette:has(.palette-panel[data-for="curve_data"]:not(.hidden)) { flex-basis: 300px; width: 300px; }
.curve-data-shape-picker { margin-top: 4px; }
.curve-data-shape-picker-button, .curve-data-shape-option { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; width: 100%; border: 1px solid var(--line); background: #fff; cursor: pointer; text-align: left; }
.curve-data-shape-picker-button { min-height: 58px; padding: 4px 9px 4px 5px; border-radius: 9px; color: var(--ink); font-size: 12px; font-weight: 700; }
.curve-data-shape-picker-button:focus { border-color: #9ba9bb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .08); outline: 0; }
.curve-data-shape-picker-button:disabled { cursor: default; opacity: .7; }
.curve-data-shape-picker canvas { display: block; }
#curve-data-shape-current-name, .curve-data-shape-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.curve-data-shape-chevron { margin-left: 7px; color: var(--muted); font-size: 17px; }
.curve-data-shape-menu { max-height: 300px; margin-top: 5px; overflow-y: auto; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: 0 12px 28px rgba(23, 32, 51, .14); }
.curve-data-shape-option { grid-template-columns: 72px minmax(0, 1fr); min-height: 54px; padding: 3px 9px 3px 5px; border: 0; border-bottom: 1px solid #ece8df; font-size: 11px; }
.curve-data-shape-option:last-child { border-bottom: 0; }
.curve-data-shape-option:hover { background: #f3f6fa; }
.curve-data-shape-option.is-selected { color: #174f91; background: #eaf1fb; font-weight: 800; }
.curve-data-grid-open { width: 100%; margin-top: 8px; padding: 8px 10px; border: 1px solid #9ba9bb; border-radius: 8px; background: #f6f8fb; color: #1e4d8f; cursor: pointer; font-size: 11px; font-weight: 700; }
.curve-data-grid-open:hover { background: #eaf1fb; border-color: #5e84bd; }
.curve-data-grid-modal-content { width: min(760px, 100%); }
.curve-data-grid-size { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; margin: 16px 0 10px; }
.curve-data-grid-size label { margin: 0; }
.curve-data-grid-size input { width: 100%; margin-top: 5px; }
.curve-data-grid-size button { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--ink); color: #fff; cursor: pointer; font-weight: 700; }
.curve-data-grid-status { min-height: 20px; margin: 0 0 9px; color: var(--ink-soft); font-size: 12px; }
.curve-data-grid-editor { --curve-grid-columns: 5; display: grid; grid-template-columns: repeat(var(--curve-grid-columns), 30px); grid-auto-rows: 30px; width: 100%; max-height: 48vh; overflow: auto; padding: 16px; border: 1px solid #d7ddea; border-radius: 10px; box-sizing: border-box; background: linear-gradient(135deg, #f8fbff, #f1f5f9); justify-content: center; align-items: stretch; user-select: none; -webkit-user-select: none; }
.curve-data-grid-editor.is-painting, .curve-data-grid-editor.is-painting .curve-grid-edge { cursor: crosshair; }
.curve-grid-node { width: 11px; height: 11px; place-self: center; border: 2px solid #1f3f67; border-radius: 50%; background: #fff; box-sizing: border-box; z-index: 1; pointer-events: none; }
.curve-grid-edge { position: relative; min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.curve-grid-edge::after { position: absolute; display: block; border-radius: 99px; background: #cbd5e1; content: ''; transition: background .12s ease, box-shadow .12s ease; }
.curve-grid-edge:hover::after { background: #7f9fc8; }
.curve-grid-edge.is-active::after { background: #1769d2; box-shadow: 0 0 0 2px rgba(23, 105, 210, .12); }
.curve-grid-edge.is-horizontal::after { inset: calc(50% - 3px) 0; }
.curve-grid-edge.is-vertical::after { inset: 0 calc(50% - 3px); }
@media (max-width: 560px) { .curve-data-grid-size { grid-template-columns: 1fr 1fr; } .curve-data-grid-size button { grid-column: 1 / -1; } .curve-data-grid-editor { grid-template-columns: repeat(var(--curve-grid-columns), 26px); grid-auto-rows: 26px; padding: 12px; } }

.solver-fab {
    position: fixed;
    right: 24px;
    bottom: 48px;
    z-index: 45;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 104px;
    padding: 12px 18px;
    border: 1px solid #143b78;
    border-radius: 999px;
    background: #1769d2;
    color: #fff;
    box-shadow: 0 12px 32px rgba(23, 32, 51, .26);
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .03em;
}
.solver-fab:hover { background: #1259b7; transform: translateY(-1px); }
.solver-fab:disabled { cursor: wait; opacity: .78; transform: none; }
.solver-fab-icon { font-size: 11px; }
.solver-fab.loading .solver-fab-icon { animation: solver-pulse .8s ease-in-out infinite alternate; }
@keyframes solver-pulse { to { opacity: .3; transform: scale(.76); } }

.solver-popover {
    position: fixed;
    right: 24px;
    bottom: 108px;
    z-index: 44;
    width: min(330px, calc(100vw - 32px));
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 50px rgba(23, 32, 51, .22);
    backdrop-filter: blur(12px);
}
.solver-popover-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.solver-popover-head small { display: block; margin-bottom: 3px; color: var(--accent-dark); font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.solver-popover-head strong { display: block; font: 700 19px/1.25 Georgia, "Noto Serif SC", serif; }
#solver-close { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #eef1f5; cursor: pointer; font-size: 20px; line-height: 1; }
.solver-popover label { display: block; color: var(--ink-soft); font-size: 12px; }
.solver-popover select { width: 100%; margin-top: 5px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.solver-status { min-height: 44px; margin: 12px 0; padding: 9px 10px; border-left: 3px solid #94a3b8; border-radius: 0 8px 8px 0; background: #f3f5f7; color: #5c6574; font-size: 11px; line-height: 1.55; }
.solver-status.success { border-color: #16a34a; background: #effaf2; color: #166534; }
.solver-status.error { border-color: #dc2626; background: #fff1f1; color: #991b1b; }
.solver-status.running { border-color: #1769d2; background: #eef5ff; color: #174b92; }
.solver-solutions { display: grid; grid-template-columns: 36px 1fr 36px; gap: 7px; margin: 0 0 12px; }
.solver-solutions button, .solver-solutions select { min-width: 0; height: 34px; margin: 0; border: 1px solid #c7d4e5; border-radius: 8px; background: #f7faff; color: #174b92; font-size: 12px; font-weight: 800; }
.solver-solutions button { cursor: pointer; font-size: 19px; line-height: 1; }
.solver-solutions button:disabled { cursor: default; opacity: .4; }
.solver-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.solver-actions button { padding: 9px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-size: 11px; font-weight: 800; }
#solver-run { border-color: #1769d2; background: #1769d2; color: #fff; }
#solver-run:disabled { cursor: wait; opacity: .6; }

@media (max-width: 620px) {
    .solver-fab { right: 14px; bottom: 44px; min-width: auto; padding: 11px 14px; }
    .solver-popover { right: 14px; bottom: 100px; }
}

#canvas-wrapper {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    background-color: var(--canvas);
    background-image: radial-gradient(circle at 1px 1px, rgba(23, 32, 51, .09) 1px, transparent 0);
    background-size: 22px 22px;
}

.stage-note {
    position: absolute;
    top: 15px;
    left: 18px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    color: #657083;
    background: rgba(255, 253, 248, .88);
    border: 1px solid rgba(216, 211, 200, .9);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    pointer-events: none;
}
.stage-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .13); }

#puzzle-canvas {
    background: #fff;
    border: 1px solid #d4cfc5;
    border-radius: 3px;
    box-shadow: var(--shadow), 0 2px 0 rgba(23, 32, 51, .04);
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
    touch-action: none;
    /* Avoid looking like the whole board is "selected" on first mouse focus. */
    outline: none;
}
/* Keyboard focus only (not mouse click on the canvas). */
#puzzle-canvas:focus:not(:focus-visible) { outline: none; }
#puzzle-canvas:focus-visible {
    outline: 2px solid rgba(37, 99, 235, .35);
    outline-offset: 2px;
}

/* Footer */
#statusbar {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 0 0 30px;
    min-height: 30px;
    padding: 0 15px;
    color: #aeb7c5;
    background: var(--ink);
    font-size: 10px;
    letter-spacing: .035em;
}
#statusbar b { color: #fff; font-weight: 650; }
.status-brand { color: #fff; font-weight: 800; letter-spacing: .14em; }
.status-tip { margin-left: auto; color: #7f8a9c; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, .64); backdrop-filter: blur(6px); }
.modal-content { width: min(680px, 100%); max-height: 85vh; padding: 26px; overflow-y: auto; background: var(--paper); border: 1px solid rgba(255,255,255,.4); border-radius: 16px; box-shadow: 0 30px 80px rgba(15, 23, 42, .32); }
.modal-content h3 { margin-bottom: 15px; font: 700 25px/1.2 Georgia, "Noto Serif SC", serif; }
.modal-content textarea { width: 100%; min-height: 330px; padding: 13px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: #fff; color: var(--ink); font: 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; }
.modal-content textarea:focus { border-color: #9ba9bb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .08); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.modal-actions button { min-width: 90px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-size: 12px; font-weight: 700; }
.modal-actions button:disabled { opacity: .45; cursor: not-allowed; }
.import-modal-content textarea { min-height: 220px; }
.import-toolbar { display: flex; gap: 8px; margin-top: 10px; }
.import-toolbar button { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; cursor: pointer; font-size: 12px; font-weight: 700; }
.import-feedback { margin-top: 12px; display: grid; gap: 10px; }
.import-feedback.hidden { display: none; }
.import-preview { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: #f8fafc; font-size: 12px; line-height: 1.55; color: var(--ink); }
.import-preview strong { font-weight: 800; }
.import-preview .import-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin-top: 6px; }
.import-issues { max-height: 180px; overflow: auto; padding: 0; margin: 0; list-style: none; display: grid; gap: 6px; }
.import-issue { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); font-size: 12px; line-height: 1.45; }
.import-issue.error { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.import-issue.warning { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.import-issue code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.import-issue .suggestion { margin-top: 4px; opacity: .9; }
#btn-import-confirm,
#btn-export-text-copy { color: #fff; border-color: var(--accent); background: var(--accent); }
#export-textarea { width: 100%; min-height: 280px; padding: 13px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: #f8fafc; color: var(--ink); font: 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; }
#btn-curve-data-grid-quick-save { color: #fff; border-color: var(--accent); background: var(--accent); }

@media (max-width: 1440px) {
    #toolbar {
        grid-template-columns: auto 1fr;
        grid-template-areas: "brand actions" "config config" "modes modes";
    }
    .board-config { flex-wrap: wrap; overflow: visible; }
}

@media (max-width: 1120px) {
    #toolbar { gap: 10px; padding-inline: 12px; }
    .brand-block small { display: none; }
    .brand-block { min-width: auto; }
    .toolbar-actions button span { display: none; }
    .mode-btn { min-width: 68px; }
    .mode-btn kbd { display: none; }
}

@media (max-width: 820px) {
    #toolbar { grid-template-columns: auto 1fr; grid-template-areas: "brand actions" "config config" "modes modes"; }
    .board-config { justify-content: flex-start; flex-wrap: wrap; overflow: visible; }
    .toolbar-actions { justify-self: end; }
    .action-divider { display: none; }
    .toolbar-modes { justify-content: flex-start; cursor: grab; }
    #palette { flex-basis: 205px; width: 205px; padding-inline: 14px; }
    .status-tip, .status-brand { display: none; }
    #statusbar { gap: 14px; }
}

@media (max-width: 560px) {
    #toolbar { grid-template-columns: 1fr; grid-template-areas: "brand" "actions" "config" "modes"; }
    .brand-block > span:last-child { display: none; }
    .toolbar-actions {
        justify-self: stretch;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .toolbar-actions::-webkit-scrollbar { display: none; }
    .toolbar-actions button { flex: 0 0 auto; padding-inline: 9px; }
}