:root {
  --brand-primary: #001C3D;
  --brand-primary-strong: #032a58;
  --brand-secondary: #005EB8;
  --brand-secondary-soft: #e1eefb;
  --bg: #edf3f9;
  --card: #ffffff;
  --line: #c7d6e6;
  --text: #0f2744;
  --muted: #5d7189;
  --accent: var(--brand-secondary);
  --accent-soft: #e4f0fb;
  --selected-outline: #ffd84d;
  --selected-bg: transparent;
  --selected-pattern-a: rgba(255, 216, 77, 0.42);
  --selected-pattern-b: rgba(0, 28, 61, 0.18);
  --shadow: 0 18px 48px rgba(0, 28, 61, 0.12);
  --item-text: #001c3d;
  --item-divider: rgba(0, 28, 61, 0.14);
  --item-badge-bg: rgba(255, 255, 255, 0.98);
  --item-badge-border: rgba(0, 28, 61, 0.14);
  --item-badge-text: #001c3d;
}

body {
  font-family: "Segoe UI Variable Text", "Segoe UI", "Trebuchet MS", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(0, 94, 184, 0.08), transparent 26%),
    radial-gradient(circle at top right, rgba(0, 28, 61, 0.10), transparent 22%),
    linear-gradient(180deg, #eef4fa 0%, #f6f9fc 46%, #edf3f9 100%);
}

.app {
  gap: 18px;
  padding: 18px;
}

h1,
h2,
.cargo-sheet-title,
.group-editor-title,
.cargo-area-modal-title,
.area-quick-title {
  color: var(--brand-primary);
}

button,
input,
select,
textarea {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(0, 94, 184, 0.65);
  box-shadow: 0 0 0 4px rgba(0, 94, 184, 0.12);
}

button {
  border: 1px solid transparent;
  box-shadow: 0 4px 14px rgba(0, 28, 61, 0.06);
}

.primary {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
  color: #ffffff;
}

.soft {
  background: #f6f9fc;
  color: var(--brand-primary);
  border-color: rgba(0, 28, 61, 0.10);
}

.success {
  background: linear-gradient(135deg, #0d6fd4 0%, var(--brand-secondary) 100%);
  color: #ffffff;
}

.top-project-bar {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-strong) 56%, var(--brand-secondary) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  box-shadow: 0 18px 42px rgba(0, 28, 61, 0.18);
}

.top-project-bar label,
.top-project-bar .project-title-field,
.top-project-bar .muted {
  color: rgba(255, 255, 255, 0.78);
}

.top-project-bar input,
.top-project-bar select,
.top-project-bar textarea {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.top-project-bar .soft {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  box-shadow: none;
}

.top-project-bar .primary,
.top-project-bar .success {
  background: linear-gradient(180deg, #ffffff 0%, #deebf9 100%);
  color: var(--brand-primary);
}

.panel,
.main-card,
.app-footer,
.cargo-area-modal-card,
.group-editor-card,
.context-menu,
.area-quick-menu,
.stack-hover-card {
  border-color: rgba(0, 28, 61, 0.08);
  box-shadow: 0 12px 30px rgba(0, 28, 61, 0.10);
}

.panel,
.main-card {
  border-radius: 22px;
}

.section {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 28, 61, 0.08);
}

.control-premium {
  background: rgba(0, 94, 184, 0.05);
  border-color: rgba(0, 94, 184, 0.18);
}

.target-chip,
.vehicle-badge,
.area-meta-badge,
.legend-total-chip,
.legend-card-badge,
.workspace-guide-step {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 28, 61, 0.1);
  color: var(--brand-primary);
  box-shadow: none;
}

.canvas-wrap,
.length-bar-wrap {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 28, 61, 0.08);
}

.stats .stat {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 94, 184, 0.12);
  box-shadow: none;
}

.stat strong,
.area-meta-badge strong,
.cargo-sheet-title,
.legend-card-title-text,
.context-menu .menu-info-value {
  color: var(--brand-primary);
}

.cargo-area {
  border-color: var(--brand-primary);
  background-color: #ffffff;
  background-image:
    linear-gradient(to right, rgba(0, 94, 184, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 94, 184, 0.07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(246, 250, 254, 0.99) 100%);
}

.compound-segment-label,
.cargo-label,
.cargo-dim-top,
.cargo-dim-side,
.meter-label,
.length-end-label {
  border-color: rgba(0, 28, 61, 0.12);
  color: var(--brand-primary);
}

.item {
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 28, 61, 0.07);
}

.item.stack-target-ready {
  box-shadow: 0 0 0 5px rgba(0, 94, 184, 0.18), inset 0 0 0 2px rgba(0, 94, 184, 0.48);
}

.item.stack-target-ready::after {
  background: rgba(240, 248, 255, 0.98);
  color: var(--brand-primary);
  border-color: rgba(0, 94, 184, 0.24);
}

.item.stack-target-pending::after {
  background: rgba(245, 249, 253, 0.98);
  color: var(--brand-primary);
  border-color: rgba(0, 28, 61, 0.16);
}

.legend-card {
  border-radius: 14px;
  border-color: rgba(0, 28, 61, 0.08);
  box-shadow: 0 4px 14px rgba(0, 28, 61, 0.05);
}

.legend-note-input,
.group-actions button,
.group-actions select,
.context-menu button,
.area-quick-btn {
  border-color: rgba(0, 28, 61, 0.1);
}

.context-menu .menu-header,
.area-quick-header {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.area-quick-title,
.context-menu .menu-header {
  color: #ffffff;
}

.context-menu .menu-info-strip,
.context-menu .menu-info-chip {
  background: rgba(248, 251, 254, 0.96);
}

.context-menu button:hover,
.area-quick-btn:hover,
.group-actions button:hover {
  background: rgba(0, 94, 184, 0.08);
  color: var(--brand-primary);
}

.workspace-guide {
  background: rgba(248, 251, 254, 0.94);
  border-color: rgba(0, 94, 184, 0.18);
  border-style: solid;
}

.workspace-guide-step strong {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
  color: #ffffff;
}

.cargo-area-modal-card,
.group-editor-card {
  background: linear-gradient(180deg, #ffffff 0%, #f5f9fd 100%);
}

.group-editor-rotate.is-active {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
  box-shadow: 0 0 0 3px rgba(0, 94, 184, 0.14);
}

.length-bar {
  background: #d9e5ef;
}

.length-bar-fill {
  background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
}

html[data-theme="dark"] {
  --bg: #071625;
  --card: #0d1e31;
  --line: rgba(157, 179, 201, 0.18);
  --text: #eaf2fb;
  --muted: #9db3ca;
  --accent: #4da4f0;
  --accent-soft: rgba(77, 164, 240, 0.14);
  --selected-outline: #ffe066;
  --selected-bg: transparent;
  --selected-pattern-a: rgba(255, 224, 102, 0.42);
  --selected-pattern-b: rgba(7, 22, 37, 0.26);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  --item-text: #eef6ff;
  --item-divider: rgba(255, 255, 255, 0.12);
  --item-badge-bg: rgba(7, 22, 37, 0.92);
  --item-badge-border: rgba(255, 255, 255, 0.14);
  --item-badge-text: #eaf2fb;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at top left, rgba(0, 94, 184, 0.18), transparent 26%),
    radial-gradient(circle at top right, rgba(0, 28, 61, 0.34), transparent 28%),
    linear-gradient(180deg, #05111d 0%, #091726 45%, #06101c 100%);
}

html[data-theme="dark"] .top-project-bar {
  background: linear-gradient(135deg, #02152c 0%, #032b5a 52%, #045fad 100%);
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .main-card,
html[data-theme="dark"] .app-footer,
html[data-theme="dark"] .cargo-area-modal-card,
html[data-theme="dark"] .group-editor-card,
html[data-theme="dark"] .context-menu,
html[data-theme="dark"] .area-quick-menu,
html[data-theme="dark"] .stack-hover-card,
html[data-theme="dark"] .section,
html[data-theme="dark"] .legend-card,
html[data-theme="dark"] .workspace-guide,
html[data-theme="dark"] .stats .stat,
html[data-theme="dark"] .vehicle-badge,
html[data-theme="dark"] .area-meta-badge,
html[data-theme="dark"] .legend-total-chip,
html[data-theme="dark"] .legend-card-badge,
html[data-theme="dark"] .workspace-guide-step,
html[data-theme="dark"] .context-menu .menu-info-strip,
html[data-theme="dark"] .context-menu .menu-info-chip,
html[data-theme="dark"] .canvas-wrap,
html[data-theme="dark"] .length-bar-wrap {
  border-color: rgba(157, 179, 201, 0.14);
}

html[data-theme="dark"] .soft {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
  color: #eaf2fb;
}

html[data-theme="dark"] .primary,
html[data-theme="dark"] .success {
  background: linear-gradient(135deg, #0d4d8d 0%, #3d9be8 100%);
  color: #ffffff;
}

html[data-theme="dark"] .context-menu .menu-header,
html[data-theme="dark"] .area-quick-header {
  background: linear-gradient(135deg, #03172f 0%, #04509a 100%);
}

html[data-theme="dark"] .cargo-area {
  border-color: #3d76ad;
  background-color: #0c1d2f;
  background-image:
    linear-gradient(to right, rgba(77, 164, 240, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(77, 164, 240, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(12, 29, 47, 0.98) 0%, rgba(8, 20, 33, 0.98) 100%);
}