:root {
  --bg: #f2f6f3;
  --panel: #fcfdfb;
  --panel-solid: #fcfdfb;
  --line: rgba(39, 74, 61, .12);
  --line-strong: rgba(39, 74, 61, .22);
  --text: #273a32;
  --muted: #6f7c75;
  --soft: #e8efeb;
  --accent: #99744c;
  --green: #3e7b64;
  --green-deep: #24584a;
  --green-soft: #e5f0ea;
  --red: #ad675b;
  --red-soft: #f7ebe7;
  --amber: #9e7847;
  --amber-soft: #f5eee2;
  --blue: #668791;
  --blue-soft: #e9f0f2;
  --shadow: 0 10px 26px rgba(34, 72, 58, .045);
  --radius: 5px;
  --font-sans: "Microsoft YaHei UI", "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --font-display: "Noto Serif SC", "Source Han Serif SC", "Noto Serif CJK SC", "STSong", "SimSun", "Times New Roman", serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 1120px;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.guizang-emblem { width: 104px; height: 54px; flex: 0 0 104px; display: flex; align-items: center; gap: 9px; pointer-events: none; user-select: none; }
.guizang-emblem i { display: block; flex: 0 0 auto; margin: 0; background-repeat: no-repeat; background-position: center; background-size: contain; }
.guizang-emblem-mark { width: 24px; aspect-ratio: 412 / 624; background-image: url("../assets/guizang-symbol.png"); }
.guizang-emblem-wordmark { width: 70px; aspect-ratio: 324 / 250; background-image: url("../assets/guizang-wordmark.png"); }
body:has(.login-page) { min-width: 0; background: var(--green-deep); }
.login-page {
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  padding: 0;
  overflow-x: hidden;
  background: var(--green-deep);
  color: #303832;
}
.login-shell {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(480px, 1fr) minmax(440px, 1fr);
  background: #f6f8f5;
}
.login-shell.is-entering { animation: login-surface-enter .42s ease-out both; }
.login-brand {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  margin: 0;
  padding: clamp(56px, 8vh, 104px) clamp(52px, 7vw, 120px);
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, .08);
  background: var(--green-deep);
  color: #f7faf6;
}
.login-brand-mark {
  width: 100%;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(44px, 6vh, 72px);
}
.login-brand-symbol-wrap {
  width: min(210px, 62%);
  aspect-ratio: 412 / 624;
  display: block;
  pointer-events: none;
}
.login-brand-symbol,
.login-brand-wordmark { display: block; pointer-events: none; user-select: none; background-repeat: no-repeat; background-position: center; background-size: contain; }
.login-brand-symbol { width: 100%; height: 100%; background-image: url("../assets/guizang-symbol.png"); animation: login-symbol-breathe 5.8s .8s ease-in-out infinite; transform-origin: 50% 55%; }
.login-brand-wordmark {
  width: min(164px, 48%);
  aspect-ratio: 324 / 250;
  background-image: url("../assets/guizang-wordmark.png");
  opacity: .98;
}
.login-shell.is-entering .login-brand-symbol-wrap { animation: login-symbol-enter .72s .06s cubic-bezier(.22, .68, .22, 1) both; }
.login-shell.is-entering .login-brand-wordmark { animation: login-wordmark-enter .62s .34s ease-out both; }
.login-panel {
  width: min(384px, calc(100% - 104px));
  display: grid;
  align-content: center;
  align-self: center;
  justify-self: start;
  gap: 22px;
  min-width: 0;
  margin-left: clamp(44px, 6vw, 112px);
  padding: 64px 0;
  border: 0;
  background: transparent;
}
.login-heading { display: grid; text-align: left; }
.login-heading::after { content: ''; width: 36px; height: 1px; margin-top: 18px; background: #7d9186; }
.login-heading h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 29px;
  font-weight: 400;
  line-height: 1.4;
  color: #293b33;
  letter-spacing: 0;
}
.login-feedback {
  min-height: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -9px 0 -5px;
  color: transparent;
  font-size: 12px;
  line-height: 1.5;
}
.login-feedback.has-error { color: #934b41; }
.login-feedback.has-error::before { content: ''; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #a95d51; }
.login-fields { display: grid; gap: 18px; }
.login-field { display: grid; gap: 7px; color: #4e5a53; font-size: 12px; }
.login-field > span:first-child { font-weight: 600; }
.login-input-wrap { position: relative; display: block; min-width: 0; }
.login-panel input {
  width: 100%;
  height: 54px;
  border: 1px solid #d0d6d1;
  border-radius: 2px;
  padding: 0 16px;
  background: #fcfdfb;
  color: #28332d;
  font-size: 15px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.login-panel input:hover { border-color: #aebbb4; background: #fbfcf9; }
.login-panel input::placeholder { color: #98a19b; }
.login-panel input:focus { border-color: #567568; background: #fff; box-shadow: 0 0 0 3px rgba(69, 107, 90, .11); }
.login-input-wrap:has(.password-toggle) input { padding-right: 54px; }
.password-toggle {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 2px;
  padding: 0;
  background: transparent;
  color: #738078;
  transition: color .16s ease, background .16s ease;
}
.password-toggle:hover { color: #365647; background: #e9eee9; }
.password-toggle:focus-visible { outline: 2px solid #567568; outline-offset: -2px; }
.password-toggle svg { width: 18px; height: 18px; display: block; }
.login-submit {
  width: 100%;
  height: 54px;
  border: 1px solid var(--green-deep);
  border-radius: 2px;
  background: var(--green-deep);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: 0 8px 20px rgba(36, 88, 74, .09);
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.login-submit:hover { border-color: #2d6958; background: #2d6958; box-shadow: 0 10px 24px rgba(36, 88, 74, .14); }
.login-submit:active { transform: translateY(1px); }
.login-submit:focus-visible { outline: 3px solid rgba(69, 107, 90, .2); outline-offset: 3px; }
.login-submit:disabled { cursor: wait; opacity: .68; box-shadow: none; }
.login-help { margin: -3px 0 0; color: #747d77; font-size: 12px; line-height: 1.75; text-align: left; }
@keyframes login-surface-enter { from { opacity: .94; } to { opacity: 1; } }
@keyframes login-symbol-enter { from { transform: translateY(6px) scale(.996); } to { transform: translateY(0) scale(1); } }
@keyframes login-symbol-breathe {
  0%, 100% { transform: scale(.997); filter: drop-shadow(0 0 2px rgba(229, 244, 235, .08)); }
  50% { transform: scale(1.003); filter: drop-shadow(0 0 10px rgba(229, 244, 235, .2)); }
}
@keyframes login-wordmark-enter { from { opacity: .72; transform: translateY(4px); } to { opacity: .98; transform: translateY(0); } }
.session-list { display: grid; gap: 8px; margin-top: 14px; }
.session-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 12px; border: 1px solid var(--line); background: rgba(255,255,255,.48); }
.session-row b, .session-row span { display: block; }
.session-row b { font-size: 13px; font-weight: 600; }
.session-row span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.layout { min-height: 100vh; display: grid; grid-template-columns: 212px minmax(0, 1fr); }
.sidebar { background: var(--green-deep); color: #f2f7f3; border-right: 1px solid rgba(26, 74, 61, .52); padding: 26px 18px 30px; position: sticky; top: 0; height: 100vh; box-shadow: 8px 0 22px rgba(35, 78, 64, .035); }
.brand { min-height: 56px; display: flex; align-items: center; padding: 0 7px; }
.brand + .nav-list { margin-top: 24px; }
.nav-list { display: grid; gap: 2px; }
.nav { width: 100%; height: 44px; border: 0; border-left: 2px solid transparent; border-radius: 4px; background: transparent; color: rgba(239, 246, 241, .76); display: flex; gap: 12px; align-items: center; padding: 0 10px; margin: 0; text-align: left; font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0; transition: color .16s ease, border-color .16s ease, background .16s ease; }
.nav:hover { color: #fff; background: rgba(250, 252, 250, .075); }
.nav.active { color: #fff; font-weight: 650; border-left-color: #d9b47d; background: rgba(246, 250, 247, .12); }
.nav-icon { width: 18px; height: 18px; color: #9fc3ae; opacity: .92; flex: 0 0 18px; }
.nav-icon svg { display: block; width: 18px; height: 18px; }
.nav:nth-child(3) .nav-icon, .nav:nth-child(6) .nav-icon { color: #d7b47f; }
.nav:nth-child(4) .nav-icon, .nav:nth-child(10) .nav-icon { color: #9ebdca; }
.nav:nth-child(8) .nav-icon, .nav:nth-child(9) .nav-icon { color: #d59a89; }
.nav.active .nav-icon { color: #f1d3a7; opacity: 1; }
.nav-label { min-width: 0; white-space: nowrap; }
main { min-width: 0; padding: 30px 28px 64px; }
main > * { width: 100%; }
.topbar { min-height: 48px; display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 20px; }
.page-heading { min-width: 0; }
h1 { margin: 0; font-family: var(--font-display); font-size: 25px; font-weight: 500; line-height: 1.4; letter-spacing: .04em; color: var(--text); }
p { color: var(--muted); }
.topbar p { margin: 2px 0 0; font-size: 12px; color: var(--muted); letter-spacing: .02em; }
.topbar-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.tenant { min-height: 42px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 10px 4px 5px; background: var(--panel-solid); white-space: nowrap; box-shadow: 0 4px 14px rgba(34, 72, 58, .025); }
.account-avatar { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 32px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-family: var(--font-display); font-size: 14px; font-style: normal; }
.account-context { display: grid; min-width: 0; }
.account-context b { max-width: 180px; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-size: 12px; font-weight: 650; line-height: 1.35; }
.account-context em { max-width: 180px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 10px; font-style: normal; line-height: 1.35; }
.tenant.busy { opacity: .72; }
.logout-button { min-width: 88px; height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 11px; background: var(--panel-solid); color: #617068; font-size: 12px; transition: color .16s ease, border-color .16s ease, background .16s ease; }
.logout-button svg { width: 16px; height: 16px; }
.logout-button:hover { color: #8c4f45; border-color: rgba(167, 95, 82, .28); background: var(--red-soft); }
.logout-button:focus-visible { outline: 3px solid rgba(50, 109, 89, .15); outline-offset: 2px; }
.logout-button:disabled { cursor: wait; opacity: .62; }
.view-sync-badge { min-height: 30px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 0 11px; background: var(--panel-solid); color: var(--muted); font-size: 11px; white-space: nowrap; }
.toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; background: var(--panel-solid); border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(34,72,58,.03); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 18px; }
.toolbar-main, .view-controls { display: flex; gap: 8px; align-items: center; min-width: 0; }
.toolbar-main { flex: 1; }
.view-controls { padding-left: 12px; border-left: 1px solid var(--line); }
.toolbar .search-input { min-width: 260px; flex: 1 1 380px; }
.toolbar .account-filter { min-width: 120px; max-width: 180px; }
input, select, textarea { height: 36px; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 11px; background: #fff; color: var(--text); outline: none; font-size: 13px; }
input:hover, select:hover, textarea:hover { border-color: rgba(50,109,89,.24); }
input:focus, select:focus, textarea:focus { border-color: rgba(50,109,89,.56); box-shadow: 0 0 0 3px rgba(50,109,89,.1); }
.btn { height: 36px; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 12px; background: var(--panel-solid); color: var(--text); font-size: 13px; white-space: nowrap; transition: color .16s ease, border-color .16s ease, background .16s ease; }
.btn:hover { border-color: var(--line-strong); background: #fff; }
.btn.primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn.primary:hover { background: #285f4d; border-color: #285f4d; }
.btn.ghost { background: rgba(239,243,240,.74); }
.btn.subtle { color: var(--muted); }
.refresh-btn { border-color: rgba(50,109,89,.2); color: var(--green); }
.btn.danger, .link.danger { color: var(--red); border-color: rgba(167,95,82,.24); background: var(--red-soft); }
.btn.danger:hover, .link.danger:hover { background: #f3ded8; }
.link { border: 0; background: transparent; color: var(--accent); margin-right: 8px; padding: 4px 0; }
.loading, .alert, .notice { border: 1px solid rgba(50,109,89,.16); border-radius: var(--radius); padding: 11px 13px; margin-bottom: 12px; background: var(--green-soft); color: #3d6a58; }
.alert.error { border-color: rgba(167,95,82,.22); background: var(--red-soft); color: #8b4c41; }
.kpis { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,1fr); gap: 12px; margin-bottom: 18px; }
.kpi { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); overflow: hidden; }
.kpi::before { content: ''; position: absolute; top: 0; left: 0; width: 46px; height: 2px; background: var(--green); }
.kpi-stack .kpi:first-child::before { background: var(--amber); }
.kpi-stack .kpi:last-child::before { background: var(--red); }
.kpi-lead { min-height: 202px; display: flex; flex-direction: column; justify-content: space-between; }
.kpi-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; }
.kpi-stack .kpi { min-height: 95px; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 4px 16px; }
.kpi b { display: block; color: #315246; font-family: var(--font-display); font-size: 40px; font-weight: 500; line-height: 1.2; letter-spacing: 0; }
.kpi > span { color: var(--muted); font-size: 12px; letter-spacing: .03em; }
.kpi em { grid-column: 1 / -1; color: var(--muted); font-size: 12px; font-style: normal; }
.kpi-meta { display: flex; gap: 36px; padding-top: 15px; border-top: 1px solid var(--line); }
.kpi-meta span { color: var(--muted); font-size: 12px; }
.kpi-meta strong { display: block; margin-bottom: 2px; color: var(--text); font-family: var(--font-display); font-size: 20px; font-weight: 500; }
.table-card, .upload-box, .side-card, .settings { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 18px; overflow: auto; }
.table-head { min-height: 54px; padding: 12px 15px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.table-head b, .side-card h2, .upload-box h2 { color: #314139; font-family: var(--font-display); font-size: 16px; font-weight: 500; letter-spacing: .04em; }
table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: #596b62; background: #edf3ef; font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 12px; border-bottom: 1px solid rgba(38,61,51,.065); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tr:hover td { background: rgba(229, 240, 234, .55); }
td span, .muted { color: var(--muted); font-size: 12px; }
.product { display: flex; align-items: center; min-width: 220px; gap: 10px; }
.product img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); background: #f0f3f0; }
.product img.empty { display: none; }
.product b { display: block; max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 650; }
.tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid rgba(50,109,89,.2); background: var(--green-soft); color: #416e5b; font-size: 12px; }
.tag.red { border-color: rgba(167,95,82,.24); background: var(--red-soft); color: var(--red); }
.tag.green { border-color: rgba(50,109,89,.2); background: var(--green-soft); color: #416e5b; }
.delta.up { color: var(--green); }
.delta.down { color: var(--red); }
.empty-row { height: 92px; text-align: center; color: var(--muted); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; }
.side-card, .upload-box, .settings { padding: 17px; }
.side-card h2, .upload-box h2 { margin: 0 0 10px; }
.batch { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin: 10px 0; background: rgba(246,249,246,.82); }
.batch b, .batch span, .batch em { display: block; }
.batch span, .batch em { color: var(--muted); font-size: 12px; font-style: normal; margin-top: 4px; }
.upload-grid { display: grid; grid-template-columns: 160px 180px minmax(260px,1fr) 110px; gap: 10px; align-items: center; }
.upload-grid input[type=file] { padding: 6px 10px; }
.export-grid { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 14px; }
.export-card { min-height: 130px; border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); text-align: left; padding: 18px; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.export-card:hover { border-color: rgba(50,109,89,.25); transform: translateY(-1px); box-shadow: 0 13px 30px rgba(25,51,41,.075); }
.export-card b { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 500; margin-bottom: 10px; }
.export-card span { color: var(--muted); line-height: 1.7; }
.settings { max-width: 680px; }
.settings-grid { display: grid; grid-template-columns: minmax(420px,1fr) minmax(360px,.8fr); gap: 18px; align-items: start; }
.settings-grid .settings { max-width: none; }
.settings h2 { margin: 0 0 8px; color: #314139; font-family: var(--font-display); font-size: 18px; font-weight: 500; }
.settings label { display: block; margin-bottom: 14px; font-weight: 650; }
.settings input, .settings select { width: 100%; margin-top: 8px; }
.settings-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.settings-title-row h2, .settings-title-row p { margin-right: 12px; }
.workspace-settings label { margin-top: 16px; color: var(--muted); font-size: 12px; }
.workspace-summary { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 14px; align-items: center; padding: 12px 0 2px; border-top: 1px solid var(--line); }
.workspace-summary span { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.workspace-summary b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.workspace-summary em { color: var(--green); font-size: 12px; font-style: normal; white-space: nowrap; }
.account-settings { grid-row: span 2; }
.shared-settings-warning { margin: 12px 0 -4px; padding: 8px 10px; border-left: 2px solid rgba(146,118,78,.5); background: rgba(255,248,236,.7); color: var(--amber); font-size: 11px; }
.workspace-loading { margin-top: -8px; }
.account-create { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin: 16px 0; }
.account-create input { margin: 0; }
.account-manage-list { border-top: 1px solid var(--line); }
.account-manage-row { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.account-manage-row b, .account-manage-row span { display: block; }
.account-manage-row span { margin-top: 2px; color: var(--muted); font-size: 12px; }
.empty-setting { padding: 20px 0; color: var(--muted); font-size: 13px; }
.account-needed { margin-top: 10px; display: flex; align-items: center; gap: 8px; color: var(--amber); font-size: 13px; }
.inline-account-manager { width: fit-content; max-width: 100%; margin: 14px 0; padding: 10px 12px; border-left: 2px solid rgba(50,109,89,.42); background: rgba(237,243,239,.72); display: grid; grid-template-columns: 180px minmax(280px,360px) minmax(0,auto); gap: 12px; align-items: center; }
.inline-account-manager > div:first-child span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.account-create.compact { margin: 0; }
.inline-account-manager .account-create.compact { display: grid; grid-template-columns: minmax(220px,1fr) 64px; gap: 6px; }
.inline-account-manager .account-create.compact input { min-width: 0; width: 100%; }
.account-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.account-chip { min-height: 30px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: rgba(255,255,255,.7); padding: 0 5px 0 9px; font-size: 12px; }
.account-chip button { width: 22px; height: 22px; border: 0; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; }
.inbound-layout { display: grid; grid-template-columns: minmax(620px,1.45fr) minmax(260px,.55fr); gap: 18px; align-items: start; }
.inbound-form, .history-panel { border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); padding: 18px; }
.section-copy h2 { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 400; letter-spacing: .06em; }
.section-copy p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.inbound-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.inbound-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.inbound-grid label.wide { grid-column: 1 / -1; }
.inbound-grid input, .inbound-grid select { width: 100%; }
.inbound-actions { min-height: 44px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.inbound-message { color: var(--green); font-size: 12px; }
.history-label { display: block; margin: 16px 0 7px; font-size: 12px; color: var(--muted); }
.purchase-history { display: flex; flex-wrap: wrap; gap: 7px; }
.history-account { min-height: 32px; border: 1px solid var(--line); background: rgba(255,255,255,.7); display: inline-flex; align-items: center; gap: 8px; padding: 0 7px 0 10px; color: var(--text); cursor: pointer; }
.history-account i { font-style: normal; color: var(--muted); font-size: 15px; }
.history-panel > .link { margin-top: 18px; }
.drawer-mask { position: fixed; inset: 0; background: rgba(26,45,37,.2); z-index: 20; display: flex; justify-content: flex-end; }
.drawer { width: 430px; max-width: 92vw; height: 100%; background: var(--panel-solid); box-shadow: -18px 0 42px rgba(22,47,38,.14); padding: 22px; overflow: auto; }
.drawer header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 14px; }
.drawer h2 { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: .05em; }
.drawer header p { margin: 6px 0 0; }
.drawer-product, .drawer-field, .defect-form, .repair-panel, .chart-panel { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(239,244,240,.68); }
.drawer-product { padding: 12px; margin-bottom: 14px; }
.drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.drawer-field { padding: 10px; }
.drawer-field span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.drawer-field b { font-size: 14px; word-break: break-all; }
.drawer footer { position: sticky; bottom: 0; background: var(--panel-solid); padding-top: 14px; margin-top: 16px; display: flex; gap: 10px; border-top: 1px solid var(--line); }
.batch-cost-panel, .defect-batch-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; margin-bottom: 12px; display: grid; grid-template-columns: minmax(220px,1fr) 160px 110px; gap: 10px; align-items: center; }
.defect-batch-panel { grid-template-columns: minmax(220px,1fr) 170px 110px; }
.batch-cost-panel b, .defect-batch-panel b { display: block; }
.batch-cost-panel span, .defect-batch-panel span { color: var(--muted); font-size: 12px; }
.cost-pick-list { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; margin-bottom: 16px; display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 8px; max-height: 180px; overflow: auto; }
.cost-pick-list label { font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.error-list { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.error-list li span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.sparkline { height: 66px; min-width: 120px; display: flex; align-items: flex-end; gap: 5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(237,243,239,.78); }
.sparkline i { display: block; width: 9px; border-radius: 9px 9px 1px 1px; background: #8ca7b0; }
.sparkline i.latest { background: var(--green); }
.sparkline.empty { align-items: center; justify-content: center; color: var(--muted); font-size: 12px; }
.point-head, .point-row { display: grid; grid-template-columns: 40px minmax(120px,1fr) 90px 90px 76px 82px; gap: 8px; align-items: center; }
.point-head { margin-top: 12px; padding: 8px 10px; color: var(--muted); font-size: 12px; }
.point-list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.point-row { padding: 9px 10px; border-top: 1px solid rgba(38,61,51,.065); font-size: 12px; }
.point-row:first-child { border-top: 0; }
.point-row em { font-style: normal; }
.point-row strong { font-weight: 700; }
.point-row.up strong { color: var(--green); }
.point-row.down strong { color: var(--red); }
.point-row.flat strong { color: var(--muted); }
.defect-form { margin-top: 14px; padding: 12px; display: grid; gap: 10px; }
.defect-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.defect-form textarea { min-height: 72px; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; resize: vertical; font: inherit; color: var(--text); background: rgba(255,255,255,.84); }
.defect-form input, .defect-form select { width: 100%; }
.defect-history { margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.34); }
.defect-history .drawer-section-head { margin-top: 0; }
.defect-history .drawer-section-head span { color: var(--muted); font-size: 11px; }
.defect-history-list { margin-top: 10px; }
.defect-history-row { display: grid; grid-template-columns: 12px minmax(0,1fr); gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.defect-history-row:last-child { border-bottom: 0; }
.defect-history-row i { width: 7px; height: 7px; margin-top: 5px; border: 1px solid var(--green); border-radius: 50%; background: var(--green-soft); }
.defect-history-row b, .defect-history-row span { display: block; }
.defect-history-row b { font-size: 12px; font-weight: 600; line-height: 1.5; }
.defect-history-row span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.drawer-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.drawer-section-head h3 { margin: 0; font-size: 15px; font-weight: 650; }
.drawer-section-head div { display: flex; gap: 8px; flex-wrap: wrap; }
.export-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.repair-panel { margin-top: 12px; padding: 10px; overflow: auto; }
.repair-panel table { min-width: 680px; background: rgba(255,255,255,.8); overflow: hidden; }
.repair-panel input { width: 100%; min-width: 140px; height: 32px; }
.repair-panel td, .repair-panel th { font-size: 12px; }
.repair-panel .muted { margin-bottom: 8px; display: block; }
.price-drawer { width: 780px; }
.chart-panel { margin-top: 14px; padding: 14px; }
.chart-summary { display: grid; grid-template-columns: repeat(4,minmax(120px,1fr)); gap: 10px; margin: 10px 0 12px; }
.chart-summary span { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.66); padding: 9px 10px; color: var(--muted); font-size: 12px; }
.chart-summary b { display: block; color: var(--text); font-size: 15px; margin-top: 4px; }
.large-chart { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.72); padding: 10px; overflow: hidden; }
.large-chart svg { width: 100%; height: 280px; display: block; }
.large-chart .grid line { stroke: rgba(38,61,51,.08); stroke-width: 1; }
.large-chart .grid text, .large-chart .xlabels text { fill: #7f827b; font-size: 11px; }
.large-chart .xlabels text { text-anchor: middle; }
.large-chart .line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lowest-line { stroke: var(--green); }
.bid-line { stroke: var(--blue); }
.large-chart .dot { stroke: #fff; stroke-width: 2; }
.lowest-dot { fill: var(--green); }
.bid-dot { fill: var(--blue); }
.chart-legend { display: flex; gap: 16px; justify-content: flex-end; margin-top: 8px; color: var(--muted); font-size: 12px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 18px; height: 3px; border-radius: 999px; display: inline-block; }
.chart-legend i.lowest { background: var(--green); }
.chart-legend i.bid { background: var(--blue); }
.large-chart.empty { height: 220px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.view-sync-badge.cloud { color: var(--green); background: var(--green-soft); border-color: rgba(50,109,89,.2); }
.view-sync-badge.local { color: #6f7772; background: rgba(246,248,246,.7); border-color: var(--line); }
.rollback-audit { margin-top: 12px; border: 1px solid rgba(155,118,68,.22); border-radius: var(--radius); background: var(--amber-soft); padding: 12px; }
.rollback-audit.compact { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rollback-audit.compact b { display: block; }
.rollback-audit.compact span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.rollback-counts { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin: 10px 0; }
.rollback-counts span { border: 1px solid rgba(169,119,53,.2); background: rgba(255,255,255,.65); border-radius: var(--radius); padding: 8px; color: var(--muted); font-size: 11px; }
.rollback-counts b { display: block; color: #7a5835; font-size: 16px; }
.rollback-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.rollback-result { margin: 8px 0; padding: 8px 10px; border-radius: var(--radius); background: var(--green-soft); color: #4f7155; font-size: 12px; }
.price-tabs { display: flex; gap: 8px; margin: 0 0 14px; }
.price-tab { height: 36px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.58); color: var(--muted); padding: 0 14px; }
.price-tab.active { background: var(--green-deep); color: #fff; border-color: var(--green-deep); }
.price-tab span { display: inline-flex; min-width: 22px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.18); align-items: center; justify-content: center; margin-left: 6px; font-size: 12px; }
.favorite-link { margin-left: 8px; color: var(--amber); }
.favorite-link.active { color: #936522; font-weight: 700; }
.favorited td { background: rgba(255,249,235,.46); }
.favorite-btn { margin-left: auto; color: var(--amber); background: var(--amber-soft); border-color: rgba(155,118,68,.22); }
.favorite-btn.active { color: #fff; background: var(--amber); border-color: var(--amber); }
.price-product { display: flex; align-items: center; gap: 12px; }
.price-rule-note { margin-top: 14px; padding: 12px 14px; border-left: 2px solid rgba(155,118,68,.5); background: var(--amber-soft); }
.price-rule-note b, .price-rule-note span { display: block; }
.price-rule-note b { font-family: var(--font-display); font-size: 14px; font-weight: 400; }
.price-rule-note span { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.price-batch-table .move-up { color: var(--green); }
.price-batch-table .move-down { color: var(--red); }
.batch-detail-drawer { width: min(980px, 88vw); }
.batch-item-table { margin-top: 16px; max-height: 52vh; }
.batch-item-table table { min-width: 860px; }

@media (max-height: 720px) and (min-width: 821px) {
  .login-brand { padding: 36px; }
  .login-brand-mark { gap: 34px; }
  .login-brand-symbol-wrap { width: min(172px, 60%); }
  .login-brand-wordmark { width: min(130px, 46%); }
  .login-panel { gap: 18px; padding-top: 32px; padding-bottom: 32px; }
  .login-fields { gap: 14px; }
  .login-panel input, .login-submit { height: 50px; }
  .password-toggle { top: 3px; }
}

@media (max-width: 820px) {
  body { min-width: 0; }
  .login-page { padding: 0; }
  .login-shell { width: 100%; min-height: 100svh; grid-template-columns: 1fr; grid-template-rows: 228px minmax(0, 1fr); }
  .login-brand { min-height: 0; padding: 15px 24px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .055); }
  .login-brand-mark { gap: 10px; }
  .login-brand-symbol-wrap { width: 74px; }
  .login-brand-wordmark { width: 96px; }
  .login-panel { width: min(100%, 420px); align-self: start; justify-self: center; gap: 20px; margin-left: 0; padding: 40px 28px 32px; }
  .login-heading h1 { font-size: 27px; }
  .login-fields { gap: 16px; }
  .login-feedback { margin-bottom: -8px; }
}

@media (max-width: 820px) and (max-height: 700px) {
  .login-shell { grid-template-rows: 168px minmax(0, 1fr); }
  .login-brand { padding: 8px 20px; }
  .login-brand-mark { gap: 3px; }
  .login-brand-symbol-wrap { width: 54px; }
  .login-brand-wordmark { width: 76px; }
  .login-panel { gap: 14px; padding-top: 24px; padding-bottom: 24px; }
  .login-heading::after { margin-top: 12px; }
  .login-feedback { margin-top: -7px; margin-bottom: -7px; }
  .login-fields { gap: 12px; }
  .login-panel input, .login-submit { height: 48px; }
  .password-toggle { top: 2px; }
}

@media (max-width: 360px) {
  .login-panel { padding-right: 24px; padding-left: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-shell.is-entering,
  .login-brand-symbol-wrap,
  .login-brand-symbol,
  .login-shell.is-entering .login-brand-symbol-wrap,
  .login-shell.is-entering .login-brand-symbol,
  .login-shell.is-entering .login-brand-wordmark { animation: none; }
}

@media (max-width: 1320px) {
  main { padding-right: 26px; padding-left: 26px; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .view-controls { padding-left: 0; padding-top: 10px; border-left: 0; border-top: 1px solid var(--line); justify-content: flex-end; }
  .toolbar-main { width: 100%; }
  .export-grid { grid-template-columns: repeat(2,minmax(220px,1fr)); }
}

@media (max-width: 1160px) {
  .layout { grid-template-columns: 180px minmax(0,1fr); }
  .sidebar { padding-right: 16px; padding-left: 16px; }
  .toolbar-main { flex-wrap: wrap; }
  .toolbar .search-input { min-width: 360px; }
  .split, .batch-cost-panel, .defect-batch-panel { grid-template-columns: 1fr; }
  .upload-grid { grid-template-columns: 150px 170px minmax(240px,1fr) 100px; }
  .settings-grid { grid-template-columns: 1fr; }
  .account-settings { grid-row: auto; }
  .inbound-layout { grid-template-columns: 1fr; }
  .inline-account-manager { width: 100%; grid-template-columns: 160px minmax(260px,360px) minmax(0,1fr); }
  .account-chip-list { grid-column: 1 / -1; }
}

.workbench-page { display: grid; gap: 14px; }
.work-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); }
.work-tab { height: 42px; padding: 0 16px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.work-tab.active { color: var(--text); border-bottom-color: var(--green); font-weight: 650; }
.work-tab span { display: inline-flex; min-width: 20px; height: 20px; margin-left: 5px; padding: 0 5px; align-items: center; justify-content: center; border-radius: 10px; background: rgba(92,101,89,.08); color: var(--muted); font-size: 11px; }
.work-tab.active span { background: var(--green-soft); color: var(--green); }
.compact-tools { display: flex; align-items: center; gap: 8px; }
.compact-tools input { width: min(460px,55vw); height: 36px; }
.order-table small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.status-dot { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.status-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #a5a69f; }
.status-dot.matched::before { background: var(--green); }
.status-dot.pending::before, .status-dot.needs_link::before, .status-dot.unmatched::before { background: var(--amber); }
.status-dot.ignored::before { background: #a5a69f; }
.finance-kpis { display: grid; grid-template-columns: repeat(5,minmax(130px,1fr)); gap: 10px; }
.finance-kpis > div { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.52); }
.finance-kpis span { display: block; color: var(--muted); font-size: 12px; }
.finance-kpis b { display: block; margin-top: 7px; font-family: var(--font-display); font-size: 22px; font-weight: 500; }
.manual-cashflow-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border: 1px solid var(--line); background: rgba(255,255,255,.38); }
.manual-cashflow-summary button { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 18px; align-items: center; min-height: 72px; padding: 12px 16px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.manual-cashflow-summary button + button { border-left: 1px solid var(--line); }
.manual-cashflow-summary span, .manual-cashflow-summary b, .manual-cashflow-summary small { display: block; }
.manual-cashflow-summary b { font-size: 13px; }
.manual-cashflow-summary small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.manual-cashflow-summary strong { color: var(--green); font-family: var(--font-display); font-size: 21px; font-weight: 500; white-space: nowrap; }
.manual-cashflow-summary .expense strong { color: var(--red); }
.manual-cashflow-summary em { color: var(--muted); font-size: 11px; font-style: normal; white-space: nowrap; }
.manual-cashflow-summary button:hover { background: rgba(255,255,255,.52); }
.finance-summary-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.finance-summary-grid section { padding: 16px; border-top: 1px solid var(--line); background: rgba(255,255,255,.28); }
.finance-summary-grid h3 { margin: 0 0 12px; font-family: var(--font-display); font-size: 17px; font-weight: 500; }
.finance-summary-grid dl { margin: 0; display: grid; grid-template-columns: repeat(3,1fr); }
.finance-summary-grid dl div { padding: 4px 14px; border-left: 1px solid var(--line); }
.finance-summary-grid dl div:first-child { padding-left: 0; border-left: 0; }
.finance-summary-grid dt { color: var(--muted); font-size: 12px; }
.finance-summary-grid dd { margin: 6px 0 0; font-size: 18px; }
.reconcile-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.reconcile-blockers { display: flex; gap: 7px; flex-wrap: wrap; }
.reconcile-blockers span { padding: 6px 9px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); background: rgba(255,255,255,.45); font-size: 11px; }
.reconcile-blockers b { margin-left: 4px; color: var(--text); }
.profit-cell { font-weight: 650; }
.manual-entry-panel { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 14px; align-items: start; padding: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.32); }
.manual-entry-body { min-width: 0; }
.manual-type-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.54); }
.manual-type-switch button { height: 34px; border: 0; border-radius: 3px; background: transparent; color: var(--muted); cursor: pointer; }
.manual-type-switch button.active.income { background: var(--green-soft); color: var(--green); }
.manual-type-switch button.active.expense { background: var(--red-soft); color: var(--red); }
.manual-entry-form { display: grid; grid-template-columns: minmax(180px,1.4fr) minmax(130px,.8fr) 120px 145px minmax(130px,.8fr) minmax(170px,1fr) 76px; gap: 8px; }
.manual-entry-form input, .manual-entry-form select { width: 100%; min-width: 0; }
.finance-settings-warning { margin: 0 0 8px; }
.manual-entry-table { margin-top: 12px; }
.cash-type { display: inline-flex; min-width: 38px; justify-content: center; padding: 4px 7px; border-radius: 3px; font-size: 11px; }
.cash-type.income { color: var(--green); background: var(--green-soft); }
.cash-type.expense { color: var(--red); background: var(--red-soft); }
.cash-amount { font-weight: 650; }
.cash-amount.income { color: var(--green); }
.cash-amount.expense { color: var(--red); }
.order-drawer { width: min(620px,90vw); }
.candidate-panel { margin-top: 16px; }
.candidate-panel .drawer-section-head span { color: var(--muted); font-size: 12px; }
.candidate-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.candidate-row b, .candidate-row span { display: block; }
.candidate-row span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.order-resolved { margin-top: 16px; padding: 12px; color: var(--green); background: var(--green-soft); border-radius: var(--radius); }
.expense-form { display: grid; gap: 12px; margin-top: 16px; }
.expense-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.expense-form textarea { min-height: 88px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.78); font: inherit; resize: vertical; }
@media (max-width: 1180px) { .finance-kpis { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 1180px) { .manual-cashflow-summary button { grid-template-columns: minmax(0,1fr) auto; } .manual-cashflow-summary em { display: none; } }
@media (max-width: 1600px) { .manual-entry-panel { grid-template-columns: 1fr; } }
@media (max-width: 1400px) {
  .manual-entry-form { grid-template-columns: repeat(3,minmax(150px,1fr)); }
  .manual-entry-form .btn { grid-column: 3; width: 88px; justify-self: end; }
}

.web-ai-bubble { position: fixed; z-index: 90; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(50,109,89,.28); border-radius: 6px; display: grid; place-items: center; color: var(--green); background: rgba(248,251,248,.96); box-shadow: 0 8px 22px rgba(25,51,41,.11); cursor: grab; touch-action: none; user-select: none; transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease; }
.web-ai-bubble:hover { color: var(--green-deep); border-color: rgba(50,109,89,.48); background: #fff; transform: translateY(-1px); }
.web-ai-bubble:active { cursor: grabbing; }
.web-ai-bubble svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.web-ai-panel { position: fixed; z-index: 91; right: 28px; bottom: 28px; width: min(430px,calc(100vw - 56px)); max-height: min(680px,calc(100vh - 56px)); display: grid; grid-template-rows: auto auto minmax(110px,1fr) auto auto; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 8px; background: rgba(251,252,249,.98); box-shadow: 0 24px 70px rgba(22,47,38,.2); }
.web-ai-panel header { min-height: 72px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.web-ai-panel h2 { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 500; }
.web-ai-panel header p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.web-ai-icon-button { width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; }
.web-ai-quick { display: flex; gap: 6px; padding: 10px 14px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.web-ai-quick button { flex: 0 0 auto; height: 28px; padding: 0 10px; border: 1px solid rgba(50,109,89,.18); border-radius: 14px; background: var(--green-soft); color: #416e5b; font-size: 11px; }
.web-ai-messages { min-height: 140px; max-height: 350px; padding: 14px; overflow-y: auto; background: rgba(237,243,239,.58); }
.web-ai-empty { padding: 28px 18px; color: var(--muted); font-size: 12px; line-height: 1.8; text-align: center; }
.web-ai-message { display: grid; gap: 3px; margin-bottom: 12px; }
.web-ai-message span { color: var(--muted); font-size: 10px; }
.web-ai-message > div { width: fit-content; max-width: 92%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--text); font-size: 12px; line-height: 1.65; }
.web-ai-message.user { justify-items: end; }
.web-ai-message.user > div { background: var(--green-soft); border-color: rgba(120,139,120,.16); }
.web-ai-compose { display: grid; grid-template-columns: minmax(0,1fr) 68px; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.web-ai-compose textarea { width: 100%; height: 66px; min-height: 66px; padding: 9px 10px; resize: none; line-height: 1.5; }
.web-ai-compose .btn { height: 66px; }
.web-ai-panel footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 14px 12px; color: var(--muted); font-size: 10px; }
.web-ai-panel footer button { padding: 0; border: 0; background: transparent; color: var(--accent); font-size: 11px; }
.ai-settings { grid-column: 1 / -1; }
.ai-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.ai-setting-row b,.ai-setting-row span { display: block; }
.ai-setting-row span { margin-top: 2px; color: var(--muted); font-size: 11px; }