* { box-sizing: border-box; }
:root {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--page-bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --nav: #102d4b;
  --nav-deep: #0d2947;
  --ink: #20334b;
  --muted: #708197;
  --line: #e5ebf2;
  --orange: #1b67b4;
  --orange-dark: #185d9f;
  --page-bg: #f7f9fb;
  --surface: #fff;
  --surface-muted: #f1f5f8;
  --accent-soft: #edf5ff;
  --accent-ink: #185d9f;
  --nav-item-bg: #294864;
  --nav-hover: #ffffff1c;
  --nav-active: #ffffff25;
  --secondary-bg: #fff;
  --secondary-ink: #2d4761;
  --secondary-border: #dce5ee;
  --secondary-hover: #f1f5f8;
  --focus-ring: #1b67b4;
  --danger: #ad302a;
  --danger-dark: #8e2723;
}
html[data-theme="arctic"] { color-scheme: light; }
body { margin: 0; min-width: 320px; min-height: 100vh; font-size: 13px; }
button, input { font: inherit; }
button { cursor: pointer; }
.login-screen { min-height: 100vh; display: grid; grid-template-columns: 54% 46%; background: var(--surface); }
.login-photo {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 46px 56px;
  color: #fff;
  background: linear-gradient(120deg, rgba(10, 27, 55, .38), rgba(15, 39, 68, .1)), url("login-photo.cdd79d05176d.jpg") center / cover;
}
.brandmark { display: inline-flex; width: max-content; align-items: center; gap: 9px; color: #fff; text-decoration: none; font-size: 18px; font-weight: 800; letter-spacing: -.5px; }
.logo-symbol { width: 31px; height: 31px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid currentColor; border-radius: 9px; font-size: 17px; font-weight: 800; letter-spacing: -2px; }
.login-message { max-width: 510px; margin: 0; font-size: 36px; font-weight: 750; line-height: 1.2; letter-spacing: -.7px; }
.login-message-block p { margin: 15px 0 0; color: #e0f1fb; font-size: 14px; }
.login-caption-light { font-size: 11px; color: #e5eef7; }
.login-form-side { display: flex; align-items: center; justify-content: center; padding: 30px; }
.login-card { width: min(370px, 100%); }
.language-switch { width: max-content; display: flex; justify-content: flex-end; gap: 2px; margin: 0 0 15px auto; border: 1px solid #dce5ee; border-radius: 8px; padding: 3px; background: #f5f8fb; white-space: nowrap; }
.language-switch form { margin: 0; }
.language-button { min-width: 38px; border: 0; border-radius: 6px; padding: 6px 8px; color: #718299; background: transparent; font-size: 11px; font-weight: 750; }
.language-button:hover { background: #f2f6fa; }
.language-button.selected { color: #205d94; background: var(--surface); box-shadow: 0 1px 5px #dbe5ed; }
.login-card h1 { margin: 0 0 8px; font-size: 25px; font-weight: 800; letter-spacing: -.4px; }
.login-subtitle { margin: 0; color: #718097; }
.login-form { margin-top: 18px; }
.field { margin: 22px 0; }
.field label { display: block; margin-bottom: 8px; color: #314c67; font-weight: 650; }
.field input { width: 100%; min-width: 0; border: 1px solid #dce4ec; border-radius: 8px; padding: 11px 12px; color: #20334b; background: var(--surface); outline: none; }
.field input:focus { border-color: #8bb9e7; box-shadow: 0 0 0 3px #ebf4ff; }
.share-link-entry { display: grid; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.customer-search-panel { margin-bottom: 14px; }
.customer-search-panel input[type="search"] { width: min(520px, 100%); min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: var(--ink); background: var(--surface); }
.customer-archive-toggle { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); }
.customer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.customer-actions form { margin: 0; }
.customer-picker-field { margin-bottom: 18px; }
.customer-picker-field select { width: min(620px, 100%); min-height: 42px; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; color: var(--ink); background: var(--surface); }
.share-copy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; }
.share-url-input { min-width: 0; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.copy-feedback { color: var(--muted); font-size: .9rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.snapshot-changed { display: inline-block; margin-left: 8px; border-radius: 999px; padding: 3px 8px; color: #7b4a18; background: #fff0d5; font-size: .82rem; white-space: nowrap; }
.button-primary, .button-secondary { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--secondary-border); border-radius: 8px; padding: 10px 15px; background: var(--secondary-bg); color: var(--secondary-ink); font-weight: 650; text-decoration: none; }
.button-primary { color: #fff; background: var(--orange); border-color: var(--orange); }
.button-primary:hover { background: var(--orange-dark); }
.button-danger { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--danger); border-radius: 8px; padding: 10px 15px; color: #fff; background: var(--danger); font-weight: 650; text-decoration: none; }
.button-danger:hover { background: var(--danger-dark); }
.delete-warning { border-left: 4px solid #ad302a; padding: 12px 14px; color: #7f2521; background: #fff3f2; line-height: 1.55; }
.trip-edit-form, .itinerary-edit-section { display: grid; gap: 16px; }
.edit-day { display: grid; gap: 12px; min-width: 0; }
.day-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.day-heading h3 { margin: 0; }
.edit-day select, .edit-day input:not([type="checkbox"]), .edit-day textarea { max-width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; color: var(--ink); background: var(--surface); }
.edit-day select { min-width: 170px; }
.edit-day .quantity-input { width: 90px; }
.remove-line-label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.staged-new-lines { display: grid; gap: 8px; min-width: 0; }
.new-line-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(80px, .4fr) minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; }
.new-line-row select, .new-line-row input { min-width: 0; width: 100%; }
.add-line-button { justify-self: start; }
.edit-save-actions { position: sticky; bottom: 0; z-index: 2; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface); box-shadow: 0 -4px 18px #20334b12; }
.login-submit { position: relative; width: 100%; margin-top: 8px; justify-content: center; }
.login-submit span { position: absolute; right: 13px; font-size: 22px; line-height: 14px; }
.login-caption { margin: 25px 0 0; color: #8293a4; font-size: 12px; line-height: 1.6; }
.form-error { margin: 12px 0; border: 1px solid #f0c6c4; border-radius: 8px; padding: 10px 12px; color: #a33b36; background: #fff5f4; line-height: 1.5; }

.workspace-page { background: var(--page-bg); }
.workspace-layout { min-height: 100vh; display: flex; }
.sidebar { position: sticky; top: 0; width: 190px; height: 100vh; flex: 0 0 190px; display: flex; flex-direction: column; padding: 22px 11px; color: #d5dfeb; background: linear-gradient(160deg, var(--nav), var(--nav-deep)); }
.sidebar .brandmark { padding: 3px 12px 30px; }
.nav-group-title { margin: 0 12px 10px; color: #96afc7; font-size: 10px; font-weight: 700; letter-spacing: .7px; }
.nav-item { display: flex; align-items: center; gap: 12px; border-radius: 9px; padding: 12px 13px; color: #fff; background: var(--nav-item-bg); font-weight: 600; }
.mobile-nav { display: none; }
.nav-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.sidebar-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; border-top: 1px solid #32506a; padding: 17px 10px 0; color: #fff; font-size: 12px; }
.avatar { width: 35px; height: 35px; display: inline-flex; flex: 0 0 35px; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: #728baa; font-size: 15px; font-weight: 700; }
.foot-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-main { flex: 1; min-width: 0; }
.topbar { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding: 0 29px; background: var(--surface); }
.topbar-title { font-weight: 700; }
.topbar-actions { display: flex; align-items: center; gap: 13px; }
.topbar-actions form { margin: 0; }
.language-switch.compact { margin: 0; }
.profile-name { color: #334f6c; font-weight: 650; }
.button-secondary:hover { background: var(--secondary-hover); }
.logout-button { min-height: 36px; padding: 7px 11px; }
.workspace-content { max-width: 1680px; margin: 0 auto; padding: 28px; }
.workspace-heading h1 { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -.6px; }
.workspace-heading p { margin: 7px 0 0; color: #66809b; }
.empty-workspace { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 23px; border: 1px solid var(--line); border-radius: 12px; padding: 32px; background: var(--surface); box-shadow: 0 7px 24px rgba(28, 51, 79, .045); text-align: center; }
.workspace-mark { width: 48px; height: 48px; display: grid; place-items: center; border: 2px solid #dbe7f0; border-radius: 13px; color: #244865; font-size: 18px; font-weight: 800; letter-spacing: -2px; }
.empty-workspace h2 { margin: 18px 0 5px; font-size: 18px; }
.empty-workspace p { max-width: 480px; margin: 0; color: #718097; line-height: 1.6; }
.site-logo { display: block; max-width: 150px; max-height: 40px; object-fit: contain; }
.sidebar .site-logo { max-width: 145px; max-height: 38px; }
.nav-item { color: #fff; text-decoration: none; transition: background .15s; }
.nav-item:hover { background: var(--nav-hover); }
.nav-item.active { background: var(--nav-active); }
.nav-group-title.secondary-group { margin-top: 22px; border-top: 1px solid #ffffff22; padding-top: 16px; }
.workspace-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.workspace-card, .form-panel { border: 1px solid var(--line); border-radius: 12px; padding: 22px; background: var(--surface); box-shadow: 0 7px 24px rgba(28,51,79,.045); }
.workspace-card { display: flex; flex-direction: column; gap: 8px; color: var(--ink); text-decoration: none; }
.workspace-card:hover { border-color: var(--orange); }
.workspace-card strong { font-size: 16px; }
.workspace-card span, .muted { color: var(--muted); line-height: 1.55; }
.header-row, .form-actions, .inline-form { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.header-row { margin-bottom: 20px; }
.form-panel { margin: 18px 0; }
.form-panel h2 { margin: 0 0 8px; font-size: 18px; }
.stack-form { max-width: 520px; margin-top: 24px; }
.stack-form .field { margin: 18px 0; }
.stack-form input, .stack-form select, .inline-form select, .inline-form input[type=file] { max-width: 100%; border: 1px solid #dce4ec; border-radius: 8px; padding: 10px; background: var(--surface); color: var(--ink); }
.stack-form input { width: 100%; }
.field-error { color: #a33b36; margin: 7px 0; font-size: 12px; }
.form-actions { justify-content: flex-start; margin-top: 20px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.data-table { width: 100%; border-collapse: collapse; min-width: 700px; }
.data-table th, .data-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table th { background: var(--surface-muted); font-size: 11px; color: #4b6176; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table a { color: var(--orange); font-weight: 650; }
.inline-form { justify-content: flex-start; flex-wrap: wrap; }
.inline-form select { min-width: 165px; }
.notice.success { margin-bottom: 16px; border-color: #b6dfd0; color: #1c745f; background: #eff9f5; }
.brand-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
.brand-layout .form-panel { margin: 0; }
.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.theme-option { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 9px; padding: 12px; cursor: pointer; }
.theme-option.selected { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(27,103,180,.12); }
.theme-option input { accent-color: var(--orange); }
.theme-swatch { width: 25px; height: 25px; flex: 0 0 25px; border-radius: 7px; background: #1b67b4; }
.theme-swatch.forest { background: #16866f; }
.theme-swatch.copper { background: #af6748; }
.logo-preview { min-height: 110px; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0; border: 1px dashed #cbd6e2; border-radius: 10px; background: #fafcfe; }
.logo-preview img { max-width: 240px; max-height: 80px; object-fit: contain; }
.logo-preview .logo-symbol { color: var(--nav); border-color: #cbd6e2; }
html[data-theme="forest"] { --nav: #173b35; --nav-deep: #0e312b; --nav-item-bg: #28564e; --orange: #0d725d; --orange-dark: #095b4a; --accent-soft: #e8f5f0; --accent-ink: #095b4a; --secondary-hover: #edf5f2; --focus-ring: #0d725d; --page-bg: #f4f8f6; --surface-muted: #eff6f2; --line: #dce9e3; }
html[data-theme="copper"] { --nav: #513d39; --nav-deep: #352923; --nav-item-bg: #665148; --orange: #925135; --orange-dark: #75402b; --accent-soft: #f8eee8; --accent-ink: #75402b; --secondary-hover: #f6efeb; --focus-ring: #925135; --page-bg: #faf6f3; --surface-muted: #f5eee8; --line: #eadfd7; }

@media (max-width: 760px) {
  .login-screen { grid-template-columns: 1fr; grid-template-rows: 38vh 1fr; }
  .login-photo { min-height: 0; padding: 28px 24px; background-position: center 35%; }
  .login-message { font-size: 26px; }
  .login-message-block p { max-width: 360px; font-size: 12px; }
  .login-form-side { min-height: 500px; align-items: flex-start; padding: 28px; }
  .login-card { max-width: 420px; margin: 0 auto; }
  .login-card h1 { font-size: 22px; }
  .login-card .field { margin: 15px 0; }
  .login-form { margin-top: 10px; }
  .workspace-layout { display: block; }
  .sidebar { display: none; }
  .mobile-nav { display: flex; gap: 7px; overflow-x: auto; border-bottom: 1px solid var(--line); padding: 9px 14px; background: var(--surface); scrollbar-width: none; }
  .mobile-nav a { flex: 0 0 auto; border-radius: 8px; padding: 8px 10px; color: #516a83; text-decoration: none; white-space: nowrap; }
  .mobile-nav a.active { color: var(--orange); background: var(--accent-soft); font-weight: 700; }
  .topbar { height: auto; min-height: 64px; flex-wrap: wrap; padding: 12px 17px; }
  .topbar-actions { gap: 7px; }
  .profile-name { display: none; }
  .workspace-content { padding: 24px 17px; }
  .workspace-heading h1 { font-size: 22px; }
  .empty-workspace { min-height: 250px; padding: 24px 20px; }
  .workspace-cards, .brand-layout { grid-template-columns: 1fr; }
  .workspace-content { padding: 22px 16px; }
  .form-panel { padding: 17px; }
  .header-row { align-items: flex-start; flex-wrap: wrap; }
  .theme-grid { grid-template-columns: 1fr; }
  .inline-form { align-items: stretch; }
  .inline-form input[type=file] { width: 100%; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .form-actions form, .form-actions a { width: 100%; }
  .form-actions form button { width: 100%; }
  .day-heading { align-items: flex-start; flex-direction: column; }
  .new-line-row { grid-template-columns: minmax(0, 1fr) minmax(72px, .35fr); }
  .new-line-row input[type="text"] { grid-column: 1; }
  .new-line-row button { grid-column: 2; }
  .edit-save-actions { position: static; }
  .share-copy-row { grid-template-columns: minmax(0, 1fr) auto; }
  .share-copy-row .copy-feedback { grid-column: 1 / -1; }
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
:where(button, input, select, textarea):disabled { cursor: not-allowed; opacity: .58; }
.button-secondary:active { background: var(--accent-soft); border-color: var(--orange); }
.button-primary:active { background: var(--orange-dark); }
.button-danger:focus-visible { outline-color: var(--danger); }
.quote-history-panel h2{margin:0 0 12px}.quote-history-version{border-top:1px solid var(--line);padding:12px 0}.quote-history-version summary{display:grid;grid-template-columns:minmax(150px,1fr) minmax(150px,auto) auto;align-items:center;gap:14px;cursor:pointer;list-style-position:inside}.quote-history-version summary strong:last-child{text-align:right}.quote-history-version[open]>summary{margin-bottom:10px}.quote-history-version .muted{margin:0 0 10px}@media(max-width:640px){.quote-history-version summary{grid-template-columns:1fr auto;gap:6px}.quote-history-version summary span{grid-row:2}.quote-history-version summary strong:last-child{grid-column:2;grid-row:1/3}}

/* Shared page structure used by the Django screens integrated for GUI-C-02. */
.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin:0 0 22px; }
.page-heading h1 { margin:0; color:var(--ink); font-size:25px; line-height:1.25; letter-spacing:-.45px; }
.page-heading p { margin:7px 0 0; color:var(--muted); line-height:1.55; }
.page-heading .eyebrow, .eyebrow { margin:0 0 7px; color:var(--accent-ink); font-size:10px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.panel, .form-panel { min-width:0; margin:0 0 18px; border:1px solid var(--line); border-radius:12px; padding:20px; background:var(--surface); box-shadow:0 7px 24px rgba(28,51,79,.045); }
.panel h2, .panel h3, .form-panel h2 { margin-top:0; color:var(--ink); }
.panel > p:last-child { margin-bottom:0; }
.panel .data-table { min-width:0; }
.panel .table-wrap { border:0; border-radius:0; }
.data-table { color:var(--ink); }
.data-table th { color:var(--muted); font-weight:700; }
.data-table td { line-height:1.45; }
.category-heading th { color:var(--accent-ink); background:var(--accent-soft); font-size:12px; }
.empty-category td { color:var(--muted); background:var(--surface); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.form-field { min-width:0; display:grid; align-content:start; gap:7px; color:var(--ink); font-weight:650; }
.form-field.wide, .form-grid .wide { grid-column:1/-1; }
.form-field input, .form-field select, .form-field textarea, .form-grid input, .form-grid select, .form-grid textarea { width:100%; min-width:0; min-height:42px; border:1px solid var(--line); border-radius:8px; padding:10px 11px; color:var(--ink); background:var(--surface); }
.form-field textarea, .form-grid textarea { min-height:100px; resize:vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus, .form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color:var(--focus-ring); outline:3px solid color-mix(in srgb,var(--focus-ring) 18%,transparent); }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:22px 0 12px; }
.section-heading h2, .section-heading h3 { margin:0; }
.detail-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; margin:0; }
.detail-list div { min-width:0; border-bottom:1px solid var(--line); padding:12px 0; }
.detail-list dt { margin-bottom:5px; color:var(--muted); font-size:12px; }
.detail-list dd { margin:0; overflow-wrap:anywhere; color:var(--ink); font-weight:600; }
.notice { margin:0 0 16px; border:1px solid var(--line); border-radius:9px; padding:12px 14px; }
.notice.error { border-color:#efc5c2; color:#8e2723; background:#fff5f4; }
.text-button { border:0; padding:5px 7px; color:var(--accent-ink); background:transparent; font-weight:650; text-decoration:underline; text-underline-offset:2px; }
.table-wrap { max-width:100%; }
.workspace-content, .workspace-main, .panel, .form-panel, .table-wrap { min-width:0; }
.workspace-content :where(img, input, select, textarea) { max-width:100%; }
@media (max-width:760px) {
  .page-heading { flex-direction:column; gap:12px; margin-bottom:18px; }
  .page-heading h1 { font-size:22px; }
  .page-heading > :is(a,button) { width:100%; }
  .panel, .form-panel { padding:16px; }
  .form-grid, .detail-list { grid-template-columns:minmax(0,1fr); }
  .form-field.wide, .form-grid .wide { grid-column:auto; }
  .data-table { min-width:650px; }
  .table-wrap { overflow-x:auto; overscroll-behavior-inline:contain; }
  .section-heading { align-items:flex-start; flex-direction:column; }
}