:root {
  color-scheme: light;
  --navy: #102a56;
  --navy-strong: #091d40;
  --blue: #1967e8;
  --blue-hover: #0f55c9;
  --cyan: #12b8e8;
  --magenta: #be2f88;
  --canvas: #eef2f7;
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  --text: #14213a;
  --muted: #68758c;
  --border: #d7dfeb;
  --success: #087a55;
  --warning: #9a5d00;
  --danger: #c63838;
  --shadow: 0 14px 38px rgba(24, 43, 76, .12);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #081b3d;
  --surface: #102b5a;
  --surface-soft: #173664;
  --text: #f4f7fd;
  --muted: #b9c6dc;
  --border: #35517f;
  --shadow: 0 14px 38px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--canvas); color: var(--text); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
[hidden] { display: none !important; }

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  background:
    radial-gradient(circle at 70% 20%, rgba(18, 184, 232, .18), transparent 28%),
    linear-gradient(145deg, #091d40, #173b78);
}
.login-card {
  width: min(420px, 100%);
  padding: 38px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 16px;
  color: #fff;
  background: rgba(10, 30, 65, .88);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .32);
}
.brand-mark {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--cyan);
  color: #08204a;
  font-weight: 800;
}
.brand-mark.small { width: 36px; height: 36px; border-radius: 8px; font-size: 12px; }
.eyebrow {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.login-card .eyebrow { margin-top: 24px; color: #90a8cb; }
.login-card h1 { margin: 0; font-size: 34px; }
.intro { margin: 8px 0 26px; color: #c4d0e3; line-height: 1.5; }
label { display: grid; gap: 7px; margin: 16px 0; font-size: 13px; font-weight: 650; }
input {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid #55709c;
  border-radius: 7px;
  outline: none;
  background: #fff;
  color: #14213a;
}
input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(18,184,232,.2); }
select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  outline: none;
  background: var(--surface);
  color: var(--text);
}
select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(18,184,232,.2); }
.form-message { min-height: 20px; margin: 4px 0 10px; color: #ffb8b8; font-size: 13px; }

.primary-button, .secondary-button, .icon-button {
  min-height: 38px;
  border-radius: 7px;
  border: 1px solid transparent;
  padding: 8px 14px;
  font-weight: 650;
}
.primary-button { background: var(--blue); color: #fff; }
.primary-button:hover:not(:disabled) { background: var(--blue-hover); }
.secondary-button { border-color: var(--border); background: var(--surface); color: var(--text); }
.secondary-button:hover:not(:disabled), .icon-button:hover { border-color: var(--blue); }
.icon-button { width: 38px; padding: 0; border-color: var(--border); background: var(--surface-soft); color: var(--text); font-size: 18px; }
.full-button { width: 100%; }

.app-shell { min-height: 100vh; }
.topbar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: var(--navy-strong);
  color: #fff;
}
.brand-row, .topbar-actions { display: flex; align-items: center; gap: 12px; }
.brand-row strong { display: block; }
.environment-label { display: block; margin-top: 2px; color: #8fa7ca; font-size: 11px; }
.topbar .secondary-button, .topbar .icon-button { border-color: #35517f; background: #173664; color: #fff; }
.user-name { color: #c7d3e5; font-size: 13px; }

.workspace { min-height: calc(100vh - 64px); display: grid; grid-template-columns: 250px 1fr; }
.sidebar { padding: 22px 14px; background: var(--navy); color: #fff; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 10px 18px; }
.sidebar-title { margin: 0; color: #8fa7ca; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.sidebar-add-button { width: 28px; height: 28px; border: 1px solid #3f659e; border-radius: 6px; background: #1b427d; color: #fff; font-size: 18px; line-height: 1; }
.sidebar-add-button:hover { border-color: var(--cyan); }
.project-block { margin-bottom: 20px; }
.project-name { margin: 0; color: #d8e1ef; font-size: 12px; font-weight: 700; }
.project-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 10px 8px; }
.group-add-button { min-height: 26px; padding: 3px 7px; border: 1px solid #3f659e; border-radius: 5px; background: transparent; color: #bcd0ec; font-size: 10px; font-weight: 700; }
.group-add-button:hover { border-color: var(--cyan); color: #fff; }
.group-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #dbe5f4;
  text-align: left;
}
.group-button:hover, .group-button.is-active { border-color: #3f659e; background: #1b427d; color: #fff; }
.wizard-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 0 3px rgba(190,47,136,.16); }
.group-button span:last-child { margin-left: auto; color: #91a8c9; font-size: 11px; }

.content { min-width: 0; padding: 24px; }
.context-header, .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.context-header { margin-bottom: 18px; }
h1, h2 { margin: 0; letter-spacing: -.02em; }
.context-header h1 { font-size: 25px; }
.panel h2 { font-size: 17px; }
.context-meta { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.header-actions { display: flex; gap: 8px; }
.status-banner { margin: 0 0 16px; padding: 11px 14px; border: 1px solid #7bcbb1; border-radius: 8px; background: rgba(8,122,85,.08); color: var(--success); font-size: 13px; }
.status-banner.is-error { border-color: #ef9d9d; background: rgba(198,56,56,.08); color: var(--danger); }
.status-banner.is-warning { border-color: #e7bf7c; background: rgba(154,93,0,.08); color: var(--warning); }

.work-grid { display: grid; grid-template-columns: minmax(480px, 1.45fr) minmax(360px, .85fr); gap: 18px; align-items: stretch; }
.panel { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.panel-heading { min-height: 70px; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.workplace-editor-tools { min-height: 54px; display: flex; align-items: center; gap: 8px; padding: 8px 18px; border-bottom: 1px solid var(--border); background: var(--surface-soft); }
.workplace-editor-tools > span { margin-right: auto; color: var(--muted); font-size: 11px; font-weight: 700; }
.workplace-editor-tools .secondary-button { min-height: 34px; padding: 6px 10px; font-size: 11px; }
.danger-icon-button { width: 34px; height: 34px; border: 1px solid #e45b5b; border-radius: 7px; background: #d83d3d; color: #fff; font-size: 18px; font-weight: 700; }
.danger-icon-button:hover:not(:disabled) { background: #b92d2d; }
.danger-icon-button:disabled { cursor: not-allowed; opacity: .42; }
.revision-badge, .line-count { padding: 5px 9px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 700; }
.drawing-stage {
  min-height: 560px;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow: auto;
  background-color: #f8fafc;
  background-image:
    linear-gradient(#dfe5ed 1px, transparent 1px),
    linear-gradient(90deg, #dfe5ed 1px, transparent 1px);
  background-size: 25px 25px;
}
.drawing-stage svg { width: min(100%, 680px); height: auto; touch-action: none; user-select: none; filter: drop-shadow(0 8px 12px rgba(31,45,70,.08)); }
.drawing-object-group { cursor: default; }
.drawing-object-group.is-selected { cursor: move; }
.floor { fill: rgba(230,235,242,.75); stroke: #718096; stroke-width: 2; }
.floor-grid { fill: url(#major-grid); pointer-events: none; }
.svg-grid-minor { fill: none; stroke: #d9e0e9; stroke-width: .65; }
.svg-grid-major { fill: none; stroke: #b9c4d2; stroke-width: 1.2; }
.desk-clearance { stroke: #9ba6b4; stroke-width: 2; stroke-dasharray: 7 6; pointer-events: none; vector-effect: non-scaling-stroke; }
.drawing-object { fill: #d9b47a; stroke: #202a38; stroke-width: 2; }
.drawing-object.rack { fill: #5c6572; }
.drawing-object.technical { fill: #fff7dd; stroke: #aa7400; }
.drawing-label { fill: #172235; font-size: 12px; font-weight: 750; text-anchor: middle; dominant-baseline: middle; }
.drawing-label.light { fill: #fff; }
.selection-outline { fill: none; stroke: var(--blue); stroke-width: 3; stroke-dasharray: 8 5; vector-effect: non-scaling-stroke; }
.move-handle { fill: var(--blue); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.group-selection-outline { fill: rgba(25,103,232,.05); stroke: var(--blue); stroke-width: 3; stroke-dasharray: 8 5; pointer-events: none; vector-effect: non-scaling-stroke; }
.group-move-handle { pointer-events: none; }
.selection-marquee { fill: rgba(25,103,232,.1); stroke: var(--blue); stroke-width: 2; stroke-dasharray: 6 4; pointer-events: none; vector-effect: non-scaling-stroke; }
.cable { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 6; opacity: .9; }
.cable.multi { stroke: #bba6e8; }
.cable.power { stroke: #191d24; stroke-width: 4; }
.cable.feed { stroke: #e33434; stroke-width: 4; }
.cable-length-badge { fill: #f7e2a3; stroke: #7b672c; stroke-width: 1; pointer-events: none; vector-effect: non-scaling-stroke; }
.cable-length-label { fill: #302b1d; font-size: 10px; font-weight: 750; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.drawing-legend { display: flex; gap: 18px; padding: 11px 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; }
.editor-status { margin: 0; padding: 9px 18px; border-top: 1px solid var(--border); background: var(--surface-soft); color: var(--muted); font-size: 11px; }
.drawing-legend span { display: flex; align-items: center; gap: 7px; }
.legend-line { width: 24px; height: 4px; display: inline-block; border-radius: 4px; }
.legend-line.multi { background: #bba6e8; height: 6px; }
.legend-line.power { background: #191d24; }
.legend-line.feed { background: #e33434; }
.empty-state, .empty-cell { color: #7c8798; text-align: center; }

.table-scroll { max-height: 608px; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { position: sticky; top: 0; z-index: 1; padding: 10px 12px; background: var(--surface-soft); color: var(--muted); text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
td { padding: 11px 12px; border-top: 1px solid var(--border); }
td:first-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.number { text-align: right; font-variant-numeric: tabular-nums; }
.origin-mark { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 5px; border-radius: 5px; background: rgba(190,47,136,.14); color: var(--magenta); font-size: 10px; font-weight: 800; }

.diff-panel { margin-top: 18px; }
.diff-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); }
.diff-column { min-height: 110px; padding: 15px; background: var(--surface); }
.diff-column h3 { margin: 0 0 10px; font-size: 12px; }
.diff-column ul { margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 12px; }
.diff-column li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; }
.diff-empty { color: var(--muted); font-style: italic; }

.confirm-dialog { max-width: 480px; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: 0 24px 80px rgba(0,0,0,.32); }
.confirm-dialog::backdrop { background: rgba(7, 20, 44, .62); }
.confirm-dialog form { padding: 25px; }
.confirm-dialog h2 { margin-bottom: 12px; }
.dialog-note { padding: 12px; border-radius: 8px; background: var(--surface-soft); color: var(--muted); font-size: 12px; line-height: 1.5; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

.settings-shell { min-height: calc(100vh - 64px); padding: 24px; }
.mapping-panel { min-height: 520px; }
.mapping-toolbar { justify-content: flex-start; flex-wrap: wrap; }
.mapping-toolbar > div { margin-right: 12px; }
.mapping-toolbar label { width: 150px; margin: 0; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.mapping-toolbar label select, .mapping-toolbar label input { margin-top: 1px; padding: 8px 10px; }
.mapping-toolbar .mapping-filter { width: min(360px, 100%); flex: 1 1 240px; }
.mapping-toolbar input { border-color: var(--border); background: var(--surface); color: var(--text); }
.mapping-summary { margin-left: auto; padding: 6px 10px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 700; }
.mapping-table-scroll { max-height: calc(100vh - 245px); }
.mapping-table td { vertical-align: middle; }
.mapping-table td:nth-child(3) strong, .mapping-table td:nth-child(4) strong { display: block; color: var(--text); }
.mapping-table td:nth-child(3) code, .mapping-table td:nth-child(4) span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.mapping-table td:last-child { width: 1%; white-space: nowrap; }
.mapping-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 750;
}
.mapping-status::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; content: ""; }
.mapping-status.linked { background: rgba(8,122,85,.12); color: var(--success); }
.mapping-status.missing { background: rgba(154,93,0,.12); color: var(--warning); }
.mapping-status.invalid { background: rgba(198,56,56,.12); color: var(--danger); }
.mapping-dialog { width: min(660px, calc(100% - 32px)); max-width: 660px; }
.mapping-dialog form { padding: 25px; }
.mapping-dialog label { color: var(--text); }
.mapping-dialog input { border-color: var(--border); background: var(--surface); color: var(--text); }
.mapping-dialog select { min-height: 210px; }
.mapping-dialog select option { padding: 8px; }
.mapping-product-key { display: block; margin: 8px 0 16px; color: var(--muted); font-size: 11px; }
.mapping-dialog-actions { align-items: center; }
.dialog-action-spacer { flex: 1; }
.danger-text-button { min-height: 38px; padding: 8px 12px; border: 1px solid rgba(198,56,56,.38); border-radius: 7px; background: rgba(198,56,56,.08); color: var(--danger); font-weight: 700; }
.danger-text-button:hover:not(:disabled) { background: rgba(198,56,56,.16); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 1050px) {
  .work-grid { grid-template-columns: 1fr; }
  .workspace { grid-template-columns: 210px 1fr; }
}
@media (max-width: 760px) {
  .workspace { grid-template-columns: 1fr; }
  .sidebar { min-height: auto; }
  .context-header { align-items: flex-start; flex-direction: column; }
  .work-grid { display: block; }
  .materials-panel { margin-top: 16px; }
  .diff-columns { grid-template-columns: 1fr 1fr; }
  .topbar { padding: 0 12px; }
  .environment-label, .user-name { display: none; }
}