:root {
  color-scheme: light;
  --ink: #13232e;
  --ink-soft: #2e404b;
  --muted: #66747c;
  --muted-light: #8c989e;
  --canvas: #f3f6f5;
  --sidebar: #edf2f0;
  --surface: #ffffff;
  --surface-soft: #f7f9f8;
  --surface-hover: #eef3f1;
  --line: #d9e3e0;
  --line-strong: #c4d1cd;
  --blue: #0b56a4;
  --blue-deep: #083b77;
  --blue-soft: #e9f1fb;
  --teal: #0b9185;
  --teal-deep: #08766d;
  --teal-soft: #e7f5f2;
  --warning: #8a631c;
  --warning-soft: #fff7e7;
  --danger: #a9443c;
  --danger-soft: #fff0ed;
  --bg: var(--canvas);
  --card: var(--surface);
  --soft: var(--surface-soft);
  --text: var(--ink);
  --green: var(--teal);
  --green-dark: var(--teal-deep);
  --green-soft: var(--teal-soft);
  --warning-bg: var(--warning-soft);
  --brand: var(--blue);
  --brand-deep: var(--blue-deep);
  --brand-soft: var(--blue-soft);
  --radius: 18px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(22, 45, 55, .025), 0 16px 45px rgba(22, 45, 55, .055);
  --shadow-float: 0 22px 70px rgba(28, 48, 58, .16);
  --topbar-height: 76px;
  --sidebar-width: 238px;
  font-family: "Segoe UI Variable", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { min-width: 320px; background: var(--canvas); }

body {
  color: var(--ink);
  background: var(--canvas);
  font-family: "Segoe UI Variable", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

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

::selection { color: var(--ink); background: rgba(11, 145, 133, .18); }

:focus-visible { outline: 3px solid rgba(11, 145, 133, .18); outline-offset: 2px; }

.sketch-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Shared wordmark and account bar */
.topbar {
  height: var(--topbar-height);
  padding: 0 26px;
  background: rgba(255, 255, 255, .96);
  border-color: var(--line);
  backdrop-filter: blur(16px);
}

.brand-text-only { gap: 0; }

.brand-copy,
.ai-brand-copy {
  display: grid;
  min-width: 0;
  line-height: 1.12;
}

.brand-copy strong,
.ai-brand-copy strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 760;
  letter-spacing: -.02em;
}

.brand-copy small,
.ai-brand-copy small {
  margin-top: 4px;
  color: var(--muted-light);
  font-size: 9px;
  font-weight: 720;
  letter-spacing: .14em;
}

.topbar-actions { gap: 10px; }

.user-chip {
  max-width: 190px;
  padding: 7px 11px;
  color: var(--ink-soft);
  background: var(--surface-soft);
  border-color: var(--line);
  border-radius: var(--radius-md);
  font-size: 11px;
}

.admin-link,
.text-button {
  padding: 8px 9px;
  color: var(--muted);
  border-radius: var(--radius-sm);
  font-size: 11px;
}

.admin-link:hover,
.text-button:hover { color: var(--blue); background: var(--blue-soft); }

/* Main workspace */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: 0;
  width: 100%;
  max-width: none;
  min-height: calc(100vh - var(--topbar-height));
  padding: 0;
  margin: 0;
}

.workspace-sidebar {
  position: sticky;
  top: var(--topbar-height);
  align-self: start;
  height: calc(100vh - var(--topbar-height));
  padding: 22px 14px;
  overflow-y: auto;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
}

.module-nav { gap: 7px; }

.module-nav-button {
  position: relative;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  min-height: 54px;
  padding: 7px 10px;
  color: var(--muted);
  border-radius: 13px;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.module-nav-button::before {
  position: absolute;
  top: 13px;
  bottom: 13px;
  left: -15px;
  width: 3px;
  content: "";
  background: var(--teal);
  border-radius: 0 4px 4px 0;
  opacity: 0;
  transform: scaleY(.5);
  transition: opacity 160ms ease, transform 160ms ease;
}

.module-nav-button:hover { color: var(--ink); background: rgba(255, 255, 255, .56); }
.module-nav-button:active { transform: translateY(1px); }
.module-nav-button.is-active { color: var(--ink); background: var(--surface); border-color: var(--line); box-shadow: none; }
.module-nav-button.is-active::before { opacity: 1; transform: scaleY(1); }

.module-nav-button strong { font-size: 13px; font-weight: 700; }
.module-nav-button small { color: var(--muted-light); font-size: 9px; }

.module-icon {
  width: 38px;
  height: 38px;
  color: var(--muted);
  background: rgba(255, 255, 255, .68);
  border: 1px solid rgba(196, 209, 205, .82);
  border-radius: 10px;
  font-family: inherit;
}

.module-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#rough-ink);
  transition: transform 180ms ease;
}

.module-nav-button:hover .module-icon svg { transform: rotate(-1.5deg) translateY(-1px); }
.module-nav-button.is-active .module-icon { color: #fff; background: var(--blue); border-color: var(--blue); }

.module-stage {
  min-width: 0;
  padding: 32px clamp(22px, 4vw, 64px) 80px;
}

.conversation {
  width: min(100%, 1120px);
  margin: 0 auto;
  animation: panel-in 260ms ease both;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.assistant-row {
  width: 100%;
  max-width: none;
  margin: 2px auto 26px;
}

.assistant-avatar { display: none; }

.assistant-copy { max-width: 760px; }

.assistant-copy h1 {
  margin: 0 0 9px;
  color: var(--ink);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 730;
  line-height: 1.14;
  letter-spacing: -.043em;
}

.assistant-copy p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.module-hero .eyebrow { margin-bottom: 7px; }
.eyebrow { color: var(--teal-deep); font-size: 9px; letter-spacing: .15em; }

.steps {
  width: min(700px, 100%);
  margin: 0 0 18px auto;
}

.step { color: var(--muted-light); font-size: 11px; }
.step span { width: 25px; height: 25px; border-color: var(--line-strong); font-size: 10px; }
.step.is-active { color: var(--ink); }
.step.is-active span { background: var(--blue); border-color: var(--blue); }
.step.is-done { color: var(--teal-deep); }
.step.is-done span { background: var(--teal); border-color: var(--teal); }

.composer-card,
.review-card,
.download-card,
.work-card,
.roadmap-card {
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.composer-card,
.work-card,
.roadmap-card { padding: clamp(24px, 3vw, 34px); }

.section-heading { align-items: flex-start; margin-bottom: 24px; }
.section-heading h2,
.work-card .section-heading h2,
.roadmap-card h2,
.download-card h2 { color: var(--ink); font-size: 21px; font-weight: 710; letter-spacing: -.025em; }
.file-rule { color: var(--muted-light); font-size: 11px; }

.dropzone,
.compact-dropzone {
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.dropzone:hover,
.dropzone.is-dragging,
.compact-dropzone:hover,
.compact-dropzone.is-dragging {
  color: var(--ink);
  background: var(--teal-soft);
  border-color: var(--teal);
  box-shadow: none;
  transform: scale(.998);
}

.upload-icon {
  position: relative;
  width: 42px;
  height: 42px;
  overflow: hidden;
  color: transparent;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.upload-icon::before,
.upload-icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 1.5px;
  content: "";
  background: var(--blue);
  transform: translate(-50%, -50%);
}

.upload-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.compact-dropzone strong, .dropzone strong { color: var(--ink); font-size: 14px; }

.selected-file {
  background: var(--teal-soft);
  border: 1px solid rgba(11, 145, 133, .18);
  border-radius: var(--radius-sm);
}

.file-token { color: var(--blue); background: #fff; border-color: var(--line); border-radius: 9px; }

textarea,
input[type="text"],
input[type="date"],
input[type="search"],
input[type="password"],
select {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
  border-radius: 10px;
}

textarea:focus,
input:focus,
select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(11, 145, 133, .1);
}

.notes-field > span,
.field-grid label { color: var(--ink-soft); font-size: 12px; }
.notes-field small { color: var(--muted); }

.primary-button,
.secondary-button {
  min-height: 43px;
  border-radius: 10px;
  font-size: 12px;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.primary-button { color: #fff; background: var(--blue); border-color: var(--blue); }
.primary-button:hover { background: var(--blue-deep); border-color: var(--blue-deep); transform: translateY(-1px); }
.primary-button:disabled { color: #9ba6aa; background: #e7ecea; border-color: #e7ecea; transform: none; }
.secondary-button { color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
.secondary-button:hover { color: var(--blue); background: var(--blue-soft); border-color: rgba(11, 86, 164, .3); }
.download-button { color: #fff; background: var(--teal-deep); border-color: var(--teal-deep); }
.download-button:hover { color: #fff; background: #075f58; border-color: #075f58; }

.status { color: var(--ink-soft); background: var(--surface-soft); border: 1px solid var(--line); }
.status.is-error { color: var(--danger); background: var(--danger-soft); border-color: rgba(169, 68, 60, .16); }
.status.is-warning { color: var(--warning); background: var(--warning-soft); border-color: rgba(138, 99, 28, .16); }
.status.is-loading::before { border-color: var(--line-strong); border-top-color: var(--teal); }

.table-wrap,
.table-scroll { border-color: var(--line); border-radius: var(--radius-md); }
.review-table th,
.result-table th,
.knowledge-table th { color: var(--muted); background: var(--surface-soft); border-color: var(--line); }
.review-table td,
.result-table td,
.knowledge-table td { border-color: #e9efed; }

.beta-badge { color: var(--teal-deep); background: var(--teal-soft); border-color: rgba(11, 145, 133, .18); }
.footer-note { color: var(--muted-light); }

/* The fifth workspace module keeps GPT in-page without reloading the shell. */
.chat-workspace-panel {
  width: 100%;
  max-width: none;
}

.embedded-chat-shell {
  position: relative;
  height: max(680px, calc(100vh - var(--topbar-height) - 64px));
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.embedded-chat-shell::before {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--muted);
  content: "正在打开 XUTAI GPT…";
  font-size: 12px;
  transform: translate(-50%, -50%);
}

.embedded-chat-shell iframe {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--surface);
  border: 0;
}

/* Declaration: one guided intake frame */
.declaration-workflow { gap: 20px; }
.declaration-workflow > .work-card { margin-top: 0; }
.declaration-intake-card { order: 1; padding: 0; overflow: hidden; }
.declaration-batch-card { order: 2; }
.declaration-quick-card { order: 3; }

.declaration-intake-heading {
  padding: 30px 32px 24px;
  margin: 0;
  background: linear-gradient(115deg, rgba(233, 241, 251, .72), rgba(231, 245, 242, .58));
  border-bottom: 1px solid var(--line);
}

.declaration-intake-heading h2 { margin-top: 4px; }
.declaration-intake-heading p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 12px; }

.declaration-intake-steps {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 0;
  margin: 2px 0 0;
  list-style: none;
}

.declaration-intake-steps li {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.declaration-intake-steps span {
  display: grid;
  width: 22px;
  height: 22px;
  color: var(--blue);
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(11, 86, 164, .18);
  border-radius: 50%;
  place-items: center;
  font-size: 9px;
}

.declaration-intake-board { display: flex; flex-direction: column; }

.declaration-intake-section {
  padding: 28px 32px 30px;
  border-top: 1px solid var(--line);
}

.declaration-coa-card { order: 1; border-top: 0; }
.declaration-customer-card { order: 2; background: var(--surface-soft); border-top: 1px solid var(--line); }
.declaration-intake-section .section-heading { margin-bottom: 18px; }
.declaration-intake-section .section-heading h2 { margin: 3px 0 0; font-size: 17px; }
.declaration-intake-section .declaration-intake-grid { gap: 16px; }

.declaration-dropzone,
.declaration-selected-file { min-height: 160px; }

.coa-link-actions {
  min-height: 160px;
  padding: 22px;
  color: var(--muted);
  background: var(--blue-soft);
  border: 1px solid rgba(11, 86, 164, .12);
  border-radius: var(--radius-md);
}

.coa-link-actions p { margin-top: 0; font-size: 11px; line-height: 1.7; }

.declaration-special-composer {
  position: relative;
  min-height: 160px;
  padding: 15px 15px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

.declaration-special-composer::before {
  display: grid;
  position: absolute;
  top: 13px;
  right: 13px;
  width: 26px;
  height: 26px;
  content: "···";
  color: var(--teal-deep);
  background: var(--teal-soft);
  border-radius: 8px;
  place-items: center;
  font-weight: 800;
  line-height: 1;
}

.declaration-special-composer > span { padding-right: 32px; }
.declaration-special-composer textarea {
  min-height: 88px;
  padding: 10px 0 4px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.declaration-special-composer textarea:focus { box-shadow: none; }
.declaration-special-composer:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(11, 145, 133, .1); }

.coa-context-panel { margin-top: 22px; background: var(--surface); border-color: var(--line); }
.declaration-quick-card details > summary { border-radius: var(--radius-lg); }
.declaration-quick-card details[open] > summary { border-color: var(--line); }
.declaration-template-results { border-color: var(--line); box-shadow: var(--shadow-float); }
.declaration-template-result:hover,
.declaration-template-result:focus-visible { background: var(--teal-soft); }

/* Login */
.auth-page {
  background:
    radial-gradient(circle at 13% 16%, rgba(11, 145, 133, .08), transparent 29%),
    radial-gradient(circle at 86% 82%, rgba(11, 86, 164, .08), transparent 31%),
    var(--canvas);
}

.auth-card {
  padding: 38px 40px;
  background: rgba(255, 255, 255, .96);
  border-color: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
}

.auth-brand { margin-bottom: 44px; }
.auth-card h1 { color: var(--ink); font-size: 30px; }
.auth-intro { color: var(--muted); }
.auth-form input { border-color: var(--line); border-radius: 10px; }
.auth-footnote { color: var(--muted-light); }

/* Admin */
.admin-shell { width: min(1180px, calc(100% - 40px)); padding: 38px 0 80px; }
.admin-heading h1 { color: var(--ink); font-size: 34px; }
.admin-heading p:last-child { color: var(--muted); }
.admin-table th { color: var(--muted); background: var(--surface-soft); }
.admin-table th, .admin-table td { border-color: var(--line); }
.admin-review-card,
.admin-knowledge-section { border-color: var(--line); border-radius: var(--radius-md); }
.admin-review-card { background: var(--surface-soft); }

/* XUTAI GPT */
.chat-app {
  --sidebar-width: 272px;
  color: var(--ink);
  background: var(--surface);
}

.chat-app .sidebar {
  padding: 12px 12px 14px;
  background: var(--sidebar);
  border-color: var(--line);
}

.chat-app .sidebar-top { height: 48px; }
.ai-brand { gap: 0; }
.ai-brand-copy small { letter-spacing: .08em; }

.chat-app .icon-button,
.chat-app .tiny-icon-button,
.chat-app .dialog-close { border-radius: var(--radius-sm); }
.chat-app .icon-button:hover,
.chat-app .tiny-icon-button:hover,
.chat-app .dialog-close:hover { background: rgba(255, 255, 255, .7); }

.new-chat-button {
  min-height: 44px;
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
  border-radius: 11px;
  box-shadow: none;
}
.new-chat-button:hover { color: #fff; background: var(--blue-deep); border-color: var(--blue-deep); }

.search-box {
  min-height: 40px;
  color: var(--muted);
  background: rgba(255, 255, 255, .72);
  border-color: var(--line);
  border-radius: 10px;
}
.search-box:focus-within { background: var(--surface); border-color: var(--teal); box-shadow: 0 0 0 3px rgba(11, 145, 133, .1); }

.sidebar-row,
.footer-row,
.project-row { border-radius: 10px; }
.sidebar-row:hover,
.footer-row:hover,
.project-row:hover,
.sidebar-row.is-active,
.project-row.is-active { color: var(--ink); background: rgba(255, 255, 255, .72); }

.account-row { background: rgba(255, 255, 255, .64); border: 1px solid var(--line); border-radius: 11px; }
.chat-app .account-avatar { color: #fff; background: var(--blue-deep); border-radius: 9px; }

.chat-main { background: var(--surface); }
.chat-header { background: rgba(255, 255, 255, .92); border-color: var(--line); backdrop-filter: blur(14px); }
.header-title-wrap strong { color: var(--ink); }
.model-picker select { color: var(--ink-soft); background-color: var(--surface-soft); border-color: var(--line); border-radius: 9px; }

.empty-state h1 { color: var(--ink); letter-spacing: -.035em; }
.empty-state > p { color: var(--muted); }

.message-avatar { background: var(--surface-soft); border-color: var(--line); border-radius: 10px; }
.message.assistant .message-avatar { color: #fff; background: var(--blue); }
.message-text { color: var(--ink-soft); }
.message-text pre { border-color: var(--line); border-radius: var(--radius-md); }
.message-file { background: var(--surface-soft); border-color: var(--line); border-radius: 10px; }

.composer-area { background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--surface) 28%); }
.attachment-tray,
.tool-strip,
.composer { width: min(820px, calc(100% - 32px)); }
.composer {
  background: var(--surface);
  border-color: var(--line-strong);
  border-radius: 17px;
  box-shadow: 0 8px 30px rgba(22, 45, 55, .09);
}
.composer:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(11, 145, 133, .1), 0 8px 30px rgba(22, 45, 55, .09); }
.composer.is-dragging { background: var(--teal-soft); border-color: var(--teal); }
.tool-toggle { border-color: var(--line); border-radius: 10px; }
.tool-toggle:hover { background: var(--surface-soft); }
.tool-toggle.is-active { color: var(--teal-deep); background: var(--teal-soft); border-color: rgba(11, 145, 133, .22); }
.attachment-chip { background: var(--surface-soft); border-color: var(--line); border-radius: 10px; }
.send-button { background: var(--blue); }
.send-button:hover { background: var(--blue-deep); }

.dialog-card { border-color: var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); }
.dialog-heading { border-color: var(--line); }
.drag-overlay { background: rgba(233, 245, 242, .88); backdrop-filter: blur(8px); }

body.chat-embedded .chat-app { --sidebar-width: 238px; height: 100dvh; }
body.chat-embedded .sidebar-footer #admin-link,
body.chat-embedded .sidebar-footer a[href="/"],
body.chat-embedded .account-row { display: none; }
body.chat-embedded .sidebar-footer { padding-bottom: 2px; }

@media (max-width: 900px) {
  :root { --topbar-height: 68px; }
  .app-shell { display: block; min-height: auto; }
  .workspace-sidebar {
    position: static;
    width: 100%;
    height: auto;
    padding: 10px 14px;
    overflow-x: auto;
    background: rgba(237, 242, 240, .96);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .module-nav { display: flex; min-width: max-content; flex-direction: row; gap: 6px; }
  .module-nav-button {
    display: grid;
    grid-template-columns: 34px auto;
    min-width: auto;
    min-height: 44px;
    padding: 5px 9px;
  }
  .module-nav-button::before { display: none; }
  .module-icon { width: 32px; height: 32px; }
  .module-icon svg { width: 23px; height: 23px; }
  .module-nav-button small { display: none; }
  .module-stage { padding: 26px 18px 64px; }
  .assistant-copy h1 { font-size: clamp(26px, 7vw, 34px); }
  .declaration-intake-heading { align-items: flex-start; flex-direction: column; }
  .declaration-intake-steps { flex-wrap: wrap; }
  .embedded-chat-shell { height: calc(100dvh - var(--topbar-height) - 48px); min-height: 600px; }
}

@media (max-width: 680px) {
  .topbar { padding: 0 14px; }
  .brand-copy small { display: none; }
  .topbar-actions { gap: 4px; }
  .user-chip { max-width: 92px; padding-inline: 8px; }
  .admin-link { display: none; }
  .module-stage { padding-inline: 14px; }
  .composer-card,
  .work-card,
  .roadmap-card { padding: 22px 18px; }
  .declaration-intake-card { padding: 0; }
  .declaration-intake-heading,
  .declaration-intake-section { padding: 22px 18px; }
  .declaration-intake-grid,
  .coa-context-grid { grid-template-columns: 1fr; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .steps { gap: 4px; }
  .step { gap: 5px; font-size: 10px; }
  .step span { width: 22px; height: 22px; }
  .auth-card { padding: 30px 24px; }
  .admin-shell { width: min(100% - 28px, 1180px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}