:root {
    --bg: #06090f;
    --bg-soft: #0b1019;
    --panel: rgba(12, 17, 27, 0.86);
    --panel-strong: rgba(16, 22, 34, 0.94);
    --line: rgba(255, 255, 255, 0.1);
    --line-strong: rgba(255, 255, 255, 0.18);
    --text: #f5f7fb;
    --muted: #a7b0c0;
    --accent-cyan: #59d9ff;
    --accent-blue: #4a76ff;
    --accent-lime: #78f36b;
    --accent-yellow: #ffe066;
    --accent-orange: #ff9448;
    --accent-red: #ff5a5a;
    --success-bg: rgba(95, 208, 149, 0.14);
    --danger-bg: rgba(255, 90, 90, 0.16);
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    --ring: linear-gradient(90deg, var(--accent-red) 0%, var(--accent-orange) 20%, var(--accent-yellow) 40%, var(--accent-lime) 60%, var(--accent-cyan) 80%, var(--accent-blue) 100%);
}

* {
    box-sizing: border-box;
}

html {
    background: #05080d;
}

body {
    margin: 0;
    font-family: "Pretendard", "Noto Sans KR", sans-serif;
    color: var(--text);
    background:
            radial-gradient(circle at top left, rgba(255, 90, 90, 0.18), transparent 26%),
            radial-gradient(circle at 18% 12%, rgba(255, 224, 102, 0.15), transparent 22%),
            radial-gradient(circle at 72% 14%, rgba(89, 217, 255, 0.18), transparent 28%),
            radial-gradient(circle at 88% 82%, rgba(120, 243, 107, 0.16), transparent 24%),
            linear-gradient(180deg, #05080d 0%, #0a1018 100%);
}

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

button {
    cursor: pointer;
}

.workbench-page {
    width: min(1520px, calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 0 60px;
}

.hero {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(14, 19, 30, 0.92), rgba(10, 15, 24, 0.88));
    box-shadow: var(--shadow);
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 10% 18%, rgba(255, 90, 90, 0.14), transparent 18%),
            radial-gradient(circle at 34% 82%, rgba(255, 224, 102, 0.1), transparent 18%),
            radial-gradient(circle at 84% 22%, rgba(89, 217, 255, 0.16), transparent 22%),
            radial-gradient(circle at 72% 74%, rgba(120, 243, 107, 0.12), transparent 18%);
    pointer-events: none;
}

.hero > * {
    position: relative;
    z-index: 1;
}

.eyebrow {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.28em;
    color: #d7def2;
}

.hero h1 {
    margin: 0;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.08;
}

.hero-copy {
    max-width: 760px;
    margin: 14px 0 0;
    color: var(--muted);
    line-height: 1.75;
}

.hero-status {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-end;
    gap: 10px;
    min-width: 260px;
}

.workbench-steps-strip {
    position: sticky;
    top: 12px;
    z-index: 14;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(9, 13, 21, 0.86);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow);
}

.workbench-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-height: 88px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.workbench-step.is-active,
.workbench-step.is-complete {
    border-color: rgba(89, 217, 255, 0.32);
    background: linear-gradient(180deg, rgba(21, 30, 47, 0.96), rgba(10, 17, 27, 0.94));
}

.workbench-step.is-complete {
    box-shadow: inset 0 0 0 1px rgba(120, 243, 107, 0.18);
}

.workbench-step__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    font-weight: 800;
    flex: 0 0 auto;
}

.workbench-step.is-active .workbench-step__index,
.workbench-step.is-complete .workbench-step__index {
    background: var(--ring);
    color: #081018;
}

.workbench-step strong {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
}

.workbench-step p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

.status-chip,
.target-chip,
.option-chip,
.meta-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #f7fbff;
    font-size: 13px;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.status-chip:first-child,
.meta-pill:first-child {
    border-color: rgba(89, 217, 255, 0.28);
}

.workbench-layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
    margin-top: 20px;
}

.panel--editor {
    overflow: hidden;
}

.panel-header--editor {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.editor-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.panel {
    border: 1px solid var(--line);
    border-radius: 26px;
    background: var(--panel);
    box-shadow: var(--shadow);
    padding: 24px;
    backdrop-filter: blur(14px);
}

.panel--span-3 { grid-column: span 3; }
.panel--span-4 { grid-column: span 4; }
.panel--span-5 { grid-column: span 5; }
.panel--span-6 { grid-column: span 6; }
.panel--span-7 { grid-column: span 7; }
.panel--span-8 { grid-column: span 8; }
.panel--span-12 { grid-column: span 12; }

.panel-header h2 {
    margin: 0;
    font-size: 24px;
}

.panel-header p {
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.7;
}

.control-grid,
.info-grid,
.stl-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.info-grid {
    grid-template-columns: 1fr;
}

.start-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.start-mode-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 132px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--muted);
    cursor: pointer;
}

.start-mode-card strong {
    font-size: 17px;
    color: var(--text);
}

.start-mode-card span {
    line-height: 1.7;
}

.start-mode-card input {
    accent-color: var(--accent-cyan);
}

.start-mode-card:has(input:checked) {
    border-color: rgba(89, 217, 255, 0.42);
    box-shadow: 0 0 0 1px rgba(89, 217, 255, 0.18), inset 0 0 0 1px rgba(89, 217, 255, 0.14);
    background: linear-gradient(180deg, rgba(17, 26, 40, 0.94), rgba(10, 18, 28, 0.92));
}

.start-flow-summary {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
    line-height: 1.7;
}

.assistant-chat {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.assistant-chat__bubble {
    padding: 14px 16px;
    border-radius: 18px;
    line-height: 1.7;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.assistant-chat__bubble--assistant {
    background: linear-gradient(180deg, rgba(20, 28, 43, 0.96), rgba(13, 20, 31, 0.94));
    color: #edf7ff;
}

.stage-ready-card {
    margin-top: 20px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
}

.stage-ready-card strong {
    display: block;
    margin-bottom: 10px;
}

.stage-ready-card p {
    margin: 0 0 8px;
    color: var(--muted);
    line-height: 1.7;
}

.stage-ready-card p:last-child {
    margin-bottom: 0;
}

.field,
.field-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
}

.field input[type="text"],
.field input[type="number"],
.field select,
.field textarea,
.field-compact input[type="number"],
.field-compact input[type="text"],
.field-compact select {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 13px 14px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    outline: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.field-compact input:focus,
.field-compact select:focus {
    border-color: rgba(89, 217, 255, 0.45);
    box-shadow: 0 0 0 4px rgba(89, 217, 255, 0.12);
}

.field input[readonly] {
    background: rgba(255, 255, 255, 0.04);
}

.field input[type="range"] {
    width: 100%;
    accent-color: var(--accent-cyan);
}

.range-inline {
    display: flex;
    align-items: center;
    gap: 12px;
}

.range-inline output {
    min-width: 46px;
    text-align: right;
    color: #ffffff;
    font-weight: 700;
}

.field-checkbox {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
}

.field-note {
    margin: -2px 0 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
}

.file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.upload-dropzone {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    justify-content: center;
    min-height: 144px;
    padding: 18px;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03)),
            radial-gradient(circle at 12% 16%, rgba(255, 90, 90, 0.1), transparent 20%),
            radial-gradient(circle at 88% 20%, rgba(89, 217, 255, 0.12), transparent 24%),
            radial-gradient(circle at 72% 82%, rgba(120, 243, 107, 0.1), transparent 20%);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.upload-dropzone strong {
    font-size: 18px;
    color: var(--text);
}

.upload-dropzone span,
.upload-dropzone small {
    color: var(--muted);
    line-height: 1.6;
}

.upload-dropzone.is-dragover {
    border-color: rgba(89, 217, 255, 0.48);
    box-shadow: 0 0 0 4px rgba(89, 217, 255, 0.12);
    transform: translateY(-1px);
}

.workbench-actions,
.stl-actions,
.quick-tool-row,
.ai-tool-row,
.correction-tool-row,
.selection-tool-row,
.shape-tool-row,
.text-tool-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.workbench-actions--stack {
    flex-direction: column;
}

.workbench-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font-weight: 700;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.workbench-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.22);
}

.workbench-btn--primary {
    border: none;
    background: var(--ring);
    color: #081018;
}

.workbench-btn--tool {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
}

.workbench-btn--ghost {
    background: transparent;
    color: var(--muted);
}

.workbench-btn[disabled] {
    opacity: 0.55;
    cursor: default;
    transform: none;
}

.workbench-message {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--success-bg);
    color: #d6ffe7;
    line-height: 1.7;
}

.workbench-message[hidden] {
    display: none;
}

.workbench-message.is-error {
    background: var(--danger-bg);
    color: #ffd9d9;
}

.workbench-draft-meta {
    margin-top: 16px;
    color: var(--muted);
    font-size: 13px;
}

.media-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
    gap: 18px;
    margin-top: 18px;
}

.source-preview,
.vector-preview {
    min-height: 340px;
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(14, 19, 30, 0.96), rgba(9, 13, 21, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.preview-box {
    display: grid;
    place-items: center;
    min-height: 280px;
    border-radius: 20px;
    overflow: hidden;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
            linear-gradient(135deg, rgba(255, 90, 90, 0.05), transparent 24%),
            linear-gradient(225deg, rgba(89, 217, 255, 0.06), transparent 28%),
            #090d14;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.preview-box img,
.preview-box svg {
    max-width: 100%;
    max-height: 100%;
}

.preview-placeholder {
    padding: 0 24px;
    text-align: center;
    color: var(--muted);
    line-height: 1.8;
}

.preview-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
}

.editor-shell {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr) 340px;
    gap: 16px;
    margin-top: 18px;
    align-items: start;
}

.editor-shell--wide {
    grid-template-columns: 124px minmax(0, 1fr) 340px;
}

.output-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 18px;
    margin-top: 18px;
    align-items: start;
}

.output-stage__preview,
.output-stage__summary {
    display: grid;
    gap: 16px;
}

.output-preview-box {
    min-height: 520px;
}

.workbench-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.editor-toolbox,
.editor-inspector {
    display: grid;
    gap: 14px;
}

.editor-toolbox__group,
.editor-inspector__section {
    padding: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.editor-toolbox__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.editor-toolbox__title {
    display: block;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.editor-toolbox__button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 72px;
    margin-top: 0;
    padding: 10px 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    font-weight: 700;
    text-align: center;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.editor-toolbox__button:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.2);
}

.editor-toolbox__button.is-active {
    border-color: rgba(89, 217, 255, 0.42);
    background: rgba(89, 217, 255, 0.16);
    color: #e8fbff;
}

.editor-toolbox__button--secondary {
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted);
}

.editor-toolbox__button--danger {
    background: rgba(255, 90, 90, 0.1);
    border-color: rgba(255, 90, 90, 0.2);
    color: #ffd7d7;
}

.editor-toolbox__glyph {
    font-size: 22px;
    line-height: 1;
}

.editor-toolbox__caption {
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.02em;
}

.editor-stage {
    display: grid;
    gap: 12px;
}

.editor-stage__topbar,
.editor-stage__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.editor-stage__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.editor-stage__measure {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.editor-stage__measure strong {
    color: var(--text);
    font-size: 14px;
}

.editor-stage__measure span {
    color: var(--muted);
    font-size: 12px;
}

.editor-stage__tool-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.vector-canvas--editor {
    min-height: 820px;
    padding: 12px;
    align-items: stretch;
}

.vector-canvas--editor svg {
    width: 100%;
    height: 100%;
}

.selection-size-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.selection-scale-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 10px;
    margin-top: 14px;
    align-items: end;
}

.meta-label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.stat-card {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.stat-card strong {
    display: block;
    margin-top: 4px;
    font-size: 18px;
    color: var(--text);
}

.warning-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.ai-assist-status {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(89, 217, 255, 0.12);
    color: #dff8ff;
    line-height: 1.7;
}

.ai-assist-status[hidden] {
    display: none;
}

.ai-hint-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.ai-hint-list[hidden] {
    display: none;
}

.ai-hint-card {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-hint-card strong {
    display: block;
    margin-bottom: 6px;
}

.ai-hint-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.contour-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.contour-selector[hidden] {
    display: none;
}

.contour-chip {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.contour-chip.is-active {
    border: none;
    background: var(--ring);
    color: #081018;
}

.contour-chip.is-selected:not(.is-active) {
    border-color: rgba(89, 217, 255, 0.4);
    background: rgba(89, 217, 255, 0.12);
    color: #f7fbff;
}

.contour-chip.is-all {
    font-weight: 800;
}

.text-tool-panel {
    margin-top: 18px;
    padding: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.panel-header--compact {
    margin-bottom: 12px;
}

.panel-header--compact h2 {
    font-size: 18px;
}

.text-tool-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.text-element-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.text-element-list[hidden] {
    display: none;
}

.text-element-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    cursor: pointer;
}

.text-element-chip.is-active {
    border-color: rgba(255, 224, 102, 0.4);
    background: rgba(255, 224, 102, 0.12);
    color: #fff6cc;
}

.vector-text-hitbox {
    fill: transparent;
    stroke: rgba(255, 255, 255, 0.16);
    stroke-dasharray: 6 5;
}

.vector-text-hitbox.is-active {
    stroke: rgba(255, 224, 102, 0.72);
}

.vector-text-label {
    fill: #f7fbff;
    dominant-baseline: middle;
    text-anchor: middle;
    pointer-events: none;
}

.vector-draft-path {
    fill: rgba(89, 217, 255, 0.08);
    stroke: rgba(89, 217, 255, 0.92);
    stroke-width: 2.2;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 8 6;
}

.vector-draft-point {
    fill: #ffe066;
    stroke: #0d1119;
    stroke-width: 1.2;
}

.vector-grid-minor {
    stroke: rgba(255, 255, 255, 0.05);
    stroke-width: 0.7;
}

.vector-grid-major {
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 1;
}

.vector-grid-label {
    fill: rgba(255, 255, 255, 0.42);
    font-size: 10px;
    font-weight: 600;
}

.warning-item {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 214, 102, 0.12);
    color: #fff2b0;
    line-height: 1.6;
}

.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.editor-helper {
    margin-top: 14px;
    color: var(--muted);
    line-height: 1.7;
}

.source-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 20px;
}

.source-preview-modal[hidden] {
    display: none;
}

.source-preview-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.66);
    backdrop-filter: blur(8px);
}

.source-preview-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(1080px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    padding: 24px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(15, 21, 33, 0.98), rgba(9, 13, 21, 0.98));
    box-shadow: var(--shadow);
}

.source-preview-modal__header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.source-preview-modal__header h2 {
    margin: 0;
}

.source-preview-modal__canvas {
    min-height: 620px;
}

.source-preview-modal__meta {
    margin-top: 18px;
}

.vector-canvas {
    width: 100%;
    min-height: 460px;
}

.vector-canvas svg {
    width: 100%;
    height: auto;
    touch-action: none;
}

.vector-handle {
    fill: #ffffff;
    stroke: #0d1119;
    stroke-width: 1.1;
    cursor: grab;
    vector-effect: non-scaling-stroke;
}

.vector-handle.is-active {
    fill: var(--accent-yellow);
}

.anchor-note {
    margin-top: 12px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

pre {
    overflow: auto;
    margin: 18px 0 0;
    padding: 18px;
    border-radius: 18px;
    background: #030507;
    color: #edf5ff;
    font-size: 13px;
    line-height: 1.65;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 1240px) {
    .panel--span-3,
    .panel--span-4,
    .panel--span-5,
    .panel--span-6,
    .panel--span-7,
    .panel--span-8 {
        grid-column: span 12;
    }

    .workbench-steps-strip {
        grid-template-columns: 1fr;
        position: static;
    }

    .media-grid {
        grid-template-columns: 1fr;
    }

    .output-stage {
        grid-template-columns: 1fr;
    }

    .editor-shell {
        grid-template-columns: 1fr;
    }

    .editor-toolbox {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .editor-toolbox__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .editor-stage__topbar,
    .editor-stage__footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .editor-stage__measure {
        align-items: flex-start;
    }

    .editor-stage__tool-actions {
        margin-left: 0;
    }

    .hero {
        flex-direction: column;
    }
}

@media (max-width: 720px) {
    .workbench-page {
        width: min(100% - 20px, 100%);
        padding-top: 18px;
    }

    .hero,
    .panel,
    .source-preview,
    .vector-preview {
        padding: 18px;
        border-radius: 22px;
    }

    .panel-header--editor,
    .source-preview-modal__header {
        flex-direction: column;
    }

    .control-grid,
    .info-grid,
    .start-mode-grid,
    .stl-grid,
    .stats-grid,
    .text-tool-grid,
    .selection-size-grid {
        grid-template-columns: 1fr;
    }

    .workbench-actions,
    .stl-actions,
    .editor-toolbar,
    .shape-tool-row,
    .ai-tool-row,
    .correction-tool-row,
    .selection-tool-row,
    .text-tool-row,
    .quick-tool-row,
    .preview-meta {
        flex-direction: column;
    }

    .vector-canvas {
        min-height: 320px;
    }

    .vector-canvas--editor {
        min-height: 520px;
    }

    .selection-scale-row,
    .editor-toolbox {
        grid-template-columns: 1fr;
    }

    .editor-toolbox__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .vector-canvas--editor {
        min-height: 620px;
    }

    .source-preview-modal__canvas {
        min-height: 360px;
    }

    .output-preview-box {
        min-height: 360px;
    }
}