@import url("https://fonts.googleapis.com/css2?family=Cabin:wght@500;600;700;800&family=Open+Sans:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: light;
  --font-body: "Open Sans", "Segoe UI", Arial, Helvetica, sans-serif;
  --font-heading: "Cabin", "Open Sans", "Segoe UI", Arial, Helvetica, sans-serif;
  --color-brand-red: #e4002b;
  --color-brand-red-dark: #aa001f;
  --color-brand-red-soft: #fff1f3;
  --color-brand-dark: #53565a;
  --color-brand-dark-strong: #2f3336;
  --color-info-blue: #c2dcf9;
  --color-info-blue-soft: #eff5fb;
  --color-account-blue: #348be2;
  --color-account-blue-hover: #498ddc;
  --color-success: #74bf2f;
  --color-success-dark: #5fa825;
  --color-success-soft: #e8f2df;
  --color-coral: #f65856;
  --ink: var(--color-brand-dark-strong);
  --muted: var(--color-brand-dark);
  --line: #d9dde1;
  --line-strong: #aeb4ba;
  --paper: #f7f8fa;
  --panel: #ffffff;
  --field: #ffffff;
  --field-focus: var(--color-info-blue-soft);
  --accent: var(--color-brand-red);
  --accent-dark: var(--color-brand-red-dark);
  --blue: var(--color-brand-dark);
  --rose: var(--color-brand-red);
  --radius: 8px;
  --radius-pill: 999px;
  --shadow: 0 16px 36px rgba(47, 51, 54, 0.12);
  --shadow-soft: 0 8px 22px rgba(83, 86, 90, 0.10);
  --shadow-control: inset 0 0 0 1px rgba(83, 86, 90, 0.14), 0 3px 10px rgba(83, 86, 90, 0.08);
  --shadow-button: 0 8px 18px rgba(228, 0, 43, 0.18);
  --focus-ring: 0 0 0 3px rgba(228, 0, 43, 0.16);
  --focus-ring-blue: 0 0 0 3px rgba(52, 139, 226, 0.22);
}

* {
  text-rendering: optimizeLegibility;
}

body {
  color: var(--ink);
  background:
    linear-gradient(180deg, #ffffff 0, #ffffff 104px, transparent 104px),
    linear-gradient(90deg, rgba(83, 86, 90, 0.055) 0 1px, transparent 1px 100%),
    linear-gradient(0deg, rgba(83, 86, 90, 0.045) 0 1px, transparent 1px 100%),
    var(--paper);
  background-size: auto, 42px 42px, 42px 42px, auto;
  font-family: var(--font-body);
  letter-spacing: 0;
}

button,
input,
select,
textarea,
output,
table,
.field,
.check-field,
.metric,
.status,
.pill,
.cart-button,
.button,
.plain-button,
.icon-button {
  font-family: var(--font-body);
  letter-spacing: 0;
}

h1,
h2,
.section-title,
.panel-head h2,
.panel h2,
.actions h2,
.actions-panel h2,
.description-title {
  color: var(--color-brand-dark);
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0;
}

h1 {
  line-height: 1.08;
}

.brand-logo {
  max-width: 190px;
}

.app-tabs {
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 3px solid var(--color-brand-red);
  box-shadow: 0 9px 24px rgba(83, 86, 90, 0.12);
}

.app-tabs a,
.page-switch a {
  border-color: rgba(83, 86, 90, 0.18);
  border-radius: var(--radius-pill);
  background: #ffffff;
  color: var(--color-brand-dark);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 2px 7px rgba(83, 86, 90, 0.08);
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.app-tabs a:hover,
.page-switch a:hover {
  border-color: var(--color-brand-red);
  color: var(--color-brand-red);
  transform: translateY(-1px);
}

.app-tabs a.active,
.page-switch a.active {
  border-color: var(--color-brand-red);
  background: var(--color-brand-red-soft);
  color: var(--color-brand-red);
  box-shadow: 0 0 0 3px rgba(228, 0, 43, 0.08);
}

.app-tabs a[href*="shopping-cart"] {
  border-color: var(--color-account-blue);
  background: var(--color-account-blue);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(52, 139, 226, 0.24);
}

.app-tabs a[href*="shopping-cart"]:hover {
  border-color: var(--color-account-blue-hover);
  background: var(--color-account-blue-hover);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(52, 139, 226, 0.28);
}

.sidebar {
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--line);
}

.section,
.metric,
.panel,
.actions,
.actions-panel,
.price-row,
.description-block,
.copy-row,
.check-field {
  border-color: rgba(83, 86, 90, 0.16);
  border-radius: var(--radius);
  background-color: var(--panel);
  box-shadow: var(--shadow);
}

.section-title {
  color: var(--color-brand-dark);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
}

.status {
  border-color: rgba(116, 191, 47, 0.35);
  background: var(--color-success-soft);
  color: var(--color-success-dark);
  font-weight: 700;
}

.status::before {
  background: var(--color-success);
  box-shadow: 0 0 0 4px rgba(116, 191, 47, 0.16);
}

.pill {
  border-color: var(--color-brand-red);
  background: var(--color-brand-red-soft);
  color: var(--color-brand-red);
  font-weight: 700;
}

.metric span,
label,
.field span,
.check-field span,
.dimension span,
.price-label span,
.price-cell,
.subtitle,
.hint,
.quote-note,
.insert-summary {
  color: var(--color-brand-dark);
}

.metric strong,
.dimension strong,
.price-cell strong {
  color: var(--color-brand-dark-strong);
}

input,
select,
textarea,
output {
  color: var(--ink);
  border-color: transparent;
  background: var(--field);
  box-shadow: var(--shadow-control);
}

input,
select {
  border-radius: var(--radius-pill);
}

textarea,
output,
.description-preview,
.description-box,
.url-box {
  border-radius: var(--radius);
}

input::placeholder,
textarea::placeholder {
  color: rgba(83, 86, 90, 0.48);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-brand-red);
  background: #ffffff;
  box-shadow: var(--focus-ring), var(--shadow-control);
}

input[type="checkbox"] {
  box-shadow: none;
  accent-color: var(--color-brand-red);
}

button,
.cart-button,
.button,
.plain-button,
.icon-button {
  border-radius: var(--radius-pill);
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

button:focus-visible,
a:focus-visible,
.cart-button:focus-visible,
.button:focus-visible,
.plain-button:focus-visible,
.icon-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.cart-button,
.button,
.plain-button {
  border-color: var(--color-brand-red-dark);
  background: var(--color-brand-red);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: var(--shadow-button);
}

.cart-button:hover,
.button:hover,
.plain-button:hover {
  border-color: var(--color-coral);
  background: var(--color-coral);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(246, 88, 86, 0.20);
}

.cart-button:disabled,
.button:disabled,
.plain-button:disabled {
  cursor: not-allowed;
  border-color: rgba(83, 86, 90, 0.18);
  background: #eef0f2;
  color: #7a8086;
  box-shadow: none;
  opacity: 1;
  transform: none;
}

.cart-button.secondary,
.button.secondary,
.download-row .plain-button {
  border-color: rgba(83, 86, 90, 0.32);
  background: #ffffff;
  color: var(--color-brand-dark);
  box-shadow: var(--shadow-soft);
}

.cart-button.secondary:hover,
.button.secondary:hover,
.download-row .plain-button:hover {
  border-color: var(--color-brand-red);
  background: var(--color-brand-red-soft);
  color: var(--color-brand-red);
  box-shadow: 0 8px 18px rgba(228, 0, 43, 0.12);
}

.cart-button.rose,
.button.rose,
.button.combo,
.cart-button.combo,
.combo,
.rose {
  border-color: var(--color-brand-red-dark);
  background: var(--color-brand-red);
  color: #ffffff;
}

.cart-button.rose:hover,
.button.rose:hover,
.button.combo:hover,
.cart-button.combo:hover,
.combo:hover,
.rose:hover {
  border-color: var(--color-coral);
  background: var(--color-coral);
}

.cart-button,
.cart-button.secondary,
.cart-button.rose,
.cart-button.combo {
  min-height: 50px;
  padding: 10px 14px;
  border-color: var(--color-account-blue);
  border-radius: var(--radius-pill);
  background: var(--color-account-blue);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(52, 139, 226, 0.24);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
}

.cart-button:hover,
.cart-button.secondary:hover,
.cart-button.rose:hover,
.cart-button.combo:hover {
  border-color: var(--color-account-blue-hover);
  background: var(--color-account-blue-hover);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(52, 139, 226, 0.28);
}

.cart-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-blue), 0 4px 10px rgba(52, 139, 226, 0.24);
}

.cart-button span {
  font-weight: 600;
}

.cart-button small {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.72rem;
  font-weight: 600;
}

.cart-button:disabled {
  border-color: rgba(83, 86, 90, 0.18);
  background: #eef0f2;
  color: #7a8086;
  box-shadow: none;
}

.cart-button:disabled small {
  color: #7a8086;
}

.icon-button {
  border-color: rgba(83, 86, 90, 0.24);
  background: #ffffff;
  color: var(--color-brand-dark);
  box-shadow: var(--shadow-soft);
}

.icon-button:hover {
  border-color: var(--color-brand-red);
  color: var(--color-brand-red);
}

.check-field {
  background: #ffffff;
}

.check-field img,
.hero-image,
.secondary-image {
  border-color: rgba(83, 86, 90, 0.16);
  background: #ffffff;
}

.price-row.total {
  border-color: rgba(116, 191, 47, 0.38);
  background: var(--color-success-soft);
  color: var(--color-success-dark);
}

.lightbox,
.diagram-wrap,
.visual,
.hero-image {
  background:
    linear-gradient(135deg, rgba(194, 220, 249, 0.32), rgba(255, 255, 255, 0.88)),
    #ffffff;
}

.lightbox::before,
.lightbox::after {
  background: rgba(228, 0, 43, 0.08);
}

.brace-line {
  stroke: var(--color-account-blue);
}

.description-preview,
.description-box,
.url-box {
  background: #ffffff;
  color: var(--ink);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

table {
  background: #ffffff;
}

th {
  color: var(--color-brand-dark);
  background: var(--color-info-blue-soft);
}

td,
th {
  border-color: rgba(83, 86, 90, 0.14);
}

.notice {
  border-color: rgba(116, 191, 47, 0.32);
  background: var(--color-success-soft);
  color: var(--color-success-dark);
}

@media (max-width: 680px) {
  body {
    background:
      linear-gradient(90deg, rgba(83, 86, 90, 0.045) 0 1px, transparent 1px 100%),
      linear-gradient(0deg, rgba(83, 86, 90, 0.04) 0 1px, transparent 1px 100%),
      var(--paper);
  }

  .app-tabs a,
  .page-switch a {
    min-height: 42px;
  }
}