:root {
  color-scheme: light;
  --ink: #1c342f;
  --muted: #71827b;
  --subtle: #9aa79f;
  --teal: #176b5d;
  --teal-deep: #123b34;
  --teal-soft: #e8f2ed;
  --gold: #b88b43;
  --gold-soft: #fff4dd;
  --paper: #f5f6f2;
  --white: #fff;
  --line: #e1e8e2;
  --red: #a83f39;
  --red-soft: #fff0ee;
  --shadow: 0 12px 34px rgba(25, 53, 44, .07);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--paper); font-size: 14px; line-height: 1.55; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: #0e5147; }
:focus-visible { outline: 3px solid #d2a959; outline-offset: 3px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -60px; left: 12px; z-index: 20; padding: 9px 13px; background: #fff; border-radius: 8px; box-shadow: var(--shadow); }
.skip-link:focus { top: 12px; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 242px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 25px 16px 16px; color: #eaf2eb; background: var(--teal-deep); }
.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; padding: 0 7px; }
.brand:hover { color: inherit; }
.brand-mark { display: grid; width: 39px; height: 39px; place-items: center; color: #183f35; background: #dcb66c; border-radius: 12px 12px 12px 4px; font-size: 21px; font-weight: 850; letter-spacing: -.04em; }
.brand strong { display: block; color: #f3f6ed; font-size: 17px; letter-spacing: -.03em; line-height: 1.2; }
.brand small { display: block; margin-top: 3px; color: #a9c2b4; font-size: 10px; letter-spacing: .08em; }
.pilot-switcher { display: flex; align-items: center; gap: 10px; margin: 29px 0 29px; padding: 12px 10px; border: 1px solid #ffffff21; border-radius: 11px; background: #ffffff09; }
.pilot-dot, .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #70c398; flex: 0 0 auto; }
.pilot-switcher b { display: block; color: #f3f6ed; font-size: 12px; }
.pilot-switcher small { display: block; margin-top: 2px; color: #a7beb1; font-size: 10px; }
.chevron { margin-left: auto; color: #9cb7aa; font-size: 15px; }
.primary-nav { display: flex; flex-direction: column; gap: 5px; }
.nav-label { padding: 0 12px 8px; color: #78988a; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nav-link { min-height: 42px; display: flex; align-items: center; gap: 12px; padding: 9px 12px; color: #c4d7cc; text-decoration: none; border-radius: 8px; transition: background .15s ease, color .15s ease; }
.nav-link:hover { color: #fff; background: #ffffff12; }
.nav-link.active { color: #fff; background: #ffffff17; box-shadow: inset 3px 0 #d7b46e; }
.nav-icon { width: 23px; color: #91afa0; font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.nav-link.active .nav-icon { color: #e1c27f; }
.sidebar-bottom { margin-top: auto; }
.truth-note { display: flex; gap: 9px; margin: 12px 4px 17px; padding: 12px 10px; color: #b8cec0; border: 1px solid #ffffff1a; border-radius: 9px; font-size: 10px; line-height: 1.5; }
.truth-icon { flex: 0 0 auto; display: grid; width: 16px; height: 16px; place-items: center; color: #163e33; background: #a7c7ad; border-radius: 50%; font-size: 10px; font-weight: 800; }
.user-card { display: flex; align-items: center; gap: 10px; padding: 12px 8px 2px; border-top: 1px solid #ffffff20; }
.avatar { display: grid; width: 33px; height: 33px; flex: 0 0 auto; place-items: center; color: #27493b; background: #cfdfcb; border-radius: 50%; font-size: 12px; font-weight: 800; }
.user-meta { min-width: 0; }
.user-meta b { display: block; overflow: hidden; color: #eff4ed; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.user-meta small { display: block; overflow: hidden; margin-top: 2px; color: #96b3a4; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.logout-form { margin-left: auto; }
.icon-button { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #ffffff20; border-radius: 8px; color: #adc4b7; background: transparent; }
.icon-button:hover { color: #fff; background: #ffffff14; }
.workspace { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 5; min-height: 61px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 clamp(20px, 4vw, 52px); border-bottom: 1px solid #e7ebe5; background: rgba(249, 250, 247, .93); backdrop-filter: blur(12px); }
.breadcrumb { display: flex; align-items: center; gap: 9px; color: #97a49c; font-size: 11px; }
.breadcrumb b { color: #40594e; font-weight: 650; }
.topbar-status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid transparent; border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.status-pill .status-dot { width: 6px; height: 6px; }
.mock-pill { color: #75551e; border-color: #ecdbb4; background: var(--gold-soft); }
.mock-pill .status-dot { background: #d7a743; }
.human-pill { color: #426651; border-color: #d2e4d6; background: #edf5ed; }
.human-pill .status-dot { background: #58a570; }
.main-content { width: 100%; max-width: 1510px; flex: 1; margin: 0 auto; padding: 34px clamp(20px, 4vw, 52px) 55px; }
.workspace-footer { display: flex; justify-content: space-between; gap: 14px; padding: 16px clamp(20px, 4vw, 52px); color: #93a098; border-top: 1px solid #e7ebe5; font-size: 10px; }
.global-notice { position: sticky; top: 76px; z-index: 4; margin: 0 0 16px; padding: 11px 15px; border: 1px solid #b9d5c5; border-radius: 9px; color: #295843; background: #eaf4ed; box-shadow: var(--shadow); }
.global-notice.error { color: var(--red); border-color: #edc4bf; background: var(--red-soft); }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 0 25px; }
.page-heading-copy { max-width: 760px; }
.eyebrow { color: #738d7d; font-size: 10px; font-weight: 850; letter-spacing: .14em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 7px 0 7px; color: #1b3c32; font-size: clamp(25px, 3vw, 34px); letter-spacing: -.045em; line-height: 1.18; }
.page-heading p { margin: 0; color: #77877e; font-size: 12px; }
.page-heading-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; color: #819087; font-size: 10px; text-align: right; }
.notice-strip { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 21px; padding: 12px 15px; border: 1px solid #e8dab8; border-radius: 10px; color: #695625; background: #fff9eb; font-size: 11px; }
.notice-strip strong { color: #594717; }
.notice-mark { display: grid; width: 19px; height: 19px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #684e1f; background: #f4dfaa; font-size: 11px; font-weight: 800; }
.grid { display: grid; gap: 17px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.wide-left { grid-template-columns: minmax(0, 1.3fr) minmax(285px, .7fr); }
.card { min-width: 0; border: 1px solid var(--line); border-radius: 13px; background: var(--white); box-shadow: 0 4px 15px rgba(25, 53, 44, .025); }
.card + .card, .section-gap { margin-top: 17px; }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 17px 19px 0; }
.card-header h2, .card-header h3 { margin: 0; color: #24473b; font-size: 14px; letter-spacing: -.01em; }
.card-header p { margin: 4px 0 0; color: #829087; font-size: 10px; }
.card-body { padding: 16px 19px 19px; }
.card-header + .card-body { padding-top: 13px; }
.card-tag { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid #e2e9e2; border-radius: 5px; color: #6b8174; background: #f8faf7; font-size: 9px; font-weight: 750; white-space: nowrap; }
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat { min-width: 0; padding: 13px 14px; border: 1px solid #e6ece6; border-radius: 10px; background: #fbfcfa; }
.stat-label { color: #8b9991; font-size: 10px; }
.stat-value { display: block; overflow: hidden; margin-top: 6px; color: #275747; font-size: 17px; font-weight: 800; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.stat-foot { display: block; margin-top: 3px; color: #9aa69f; font-size: 9px; }
.form-stack { display: flex; flex-direction: column; gap: 13px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: #435a4e; font-size: 10px; font-weight: 750; }
.field.full { grid-column: 1 / -1; }
.field .field-hint { color: #92a098; font-size: 9px; font-weight: 450; }
input, select, textarea { width: 100%; min-width: 0; border: 1px solid #d9e2da; border-radius: 7px; color: #294338; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
input, select { min-height: 39px; padding: 8px 10px; }
textarea { min-height: 100px; padding: 10px 11px; resize: vertical; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
input::placeholder, textarea::placeholder { color: #a7b1ab; }
input:focus, select:focus, textarea:focus { border-color: #72a38d; outline: none; box-shadow: 0 0 0 3px rgba(52, 131, 99, .11); }
input[type="checkbox"] { width: 15px; min-height: auto; height: 15px; accent-color: var(--teal); }
input[type="file"] { min-height: 42px; padding: 7px; color: #71827a; font-size: 10px; }
input[type="file"]::file-selector-button { margin-right: 9px; padding: 6px 9px; border: 1px solid #d8e4db; border-radius: 5px; color: #426352; background: #f2f7f2; font: inherit; cursor: pointer; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.check-item { display: flex; align-items: flex-start; gap: 9px; padding: 9px 10px; border: 1px solid #e7ece7; border-radius: 8px; color: #53695e; background: #fbfcfa; font-size: 10px; font-weight: 600; }
.check-item input { margin: 1px 0 0; }
.form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 2px; }
.button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 8px 13px; border: 1px solid transparent; border-radius: 7px; text-decoration: none; font-size: 10px; font-weight: 800; transition: transform .12s ease, background .12s ease, border-color .12s ease; }
.button:hover { transform: translateY(-1px); text-decoration: none; }
.button:disabled { opacity: .55; cursor: wait; transform: none; }
.button-primary { color: #fff; border-color: #176b5d; background: #176b5d; }
.button-primary:hover { color: #fff; border-color: #105347; background: #105347; }
.button-secondary { color: #38634f; border-color: #d3e1d5; background: #f5f9f4; }
.button-secondary:hover { color: #234e3d; border-color: #aac9b1; background: #edf5ed; }
.button-danger { color: #9c4039; border-color: #efceca; background: #fff8f7; }
.button-danger:hover { color: #862c27; border-color: #dfa9a3; background: #fff0ee; }
.button-quiet { color: #73847a; border-color: #e3e9e3; background: #fff; }
.button-wide { width: 100%; }
.form-message { width: 100%; padding: 9px 11px; border: 1px solid #cce0d1; border-radius: 7px; color: #376148; background: #eff7f0; font-size: 10px; }
.form-message.error { color: var(--red); border-color: #edc4bf; background: var(--red-soft); }
.form-message a { color: inherit; }
.muted { color: #849189; }
.small { font-size: 10px; }
.micro { font-size: 9px; }
.divider { height: 1px; margin: 16px 0; background: #edf0ed; }
.empty-state { padding: 24px 18px; border: 1px dashed #d7e2d9; border-radius: 10px; text-align: center; background: #fbfcfa; }
.empty-icon { display: grid; width: 34px; height: 34px; margin: 0 auto 9px; place-items: center; border-radius: 11px; color: #46775e; background: #e9f2e9; font-size: 15px; font-weight: 800; }
.empty-state b { display: block; color: #436151; font-size: 11px; }
.empty-state p { max-width: 370px; margin: 5px auto 0; color: #87948d; font-size: 10px; }
.data-list { display: flex; flex-direction: column; gap: 9px; }
.data-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid #e9eee9; border-radius: 9px; background: #fff; }
.data-row-main { min-width: 0; }
.data-row-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: #355346; font-size: 11px; font-weight: 800; }
.data-row-sub { overflow: hidden; margin-top: 4px; color: #89958e; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.data-row-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.badge { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 999px; color: #547361; background: #edf5ed; font-size: 8px; font-weight: 800; white-space: nowrap; }
.badge.amber { color: #795c25; background: #fff3d8; }
.badge.gray { display: inline-block; max-width: 100%; overflow-wrap: anywhere; white-space: normal; color: #718078; background: #eff2ee; }
.badge.red { color: #9a4841; background: #fff0ee; }
.badge.blue { color: #496d88; background: #edf5fb; }
.raw-data { margin-top: 13px; border: 1px solid #e6ece6; border-radius: 8px; background: #fbfcfa; }
.raw-data summary { padding: 9px 11px; color: #64776c; cursor: pointer; font-size: 9px; font-weight: 750; }
.raw-data pre { max-height: 360px; overflow: auto; margin: 0; padding: 11px 13px; border-top: 1px solid #e6ece6; color: #3d594b; background: #f6f9f5; font: 9px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.table-wrap { overflow: auto; border: 1px solid #e6ece6; border-radius: 9px; }
table { width: 100%; border-collapse: collapse; font-size: 9px; }
th, td { min-width: 95px; padding: 9px 10px; border-bottom: 1px solid #edf0ed; text-align: left; vertical-align: top; }
th { color: #72847a; background: #f4f7f2; font-size: 8px; font-weight: 800; white-space: nowrap; }
td { color: #53685d; }
tr:last-child td { border-bottom: 0; }
.step-line { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 1px 0 19px; color: #73857b; font-size: 9px; }
.step-line span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #e1e9e1; border-radius: 999px; background: #fff; }
.step-line span.current { color: #246249; border-color: #c8dfce; background: #edf6ee; font-weight: 800; }
.step-line i { color: #b4beb7; font-style: normal; }
.inline-callout { padding: 10px 12px; border-left: 3px solid #7fab86; border-radius: 0 7px 7px 0; color: #5e7363; background: #f0f6ef; font-size: 10px; }
.inline-callout.amber { border-color: #d5a74e; color: #745c2b; background: #fff8e9; }
.mb-small { margin-bottom: 13px; }
.mt-small { margin-top: 12px; }
.mt-tiny { margin-top: 8px; }
.mt-form { margin-top: 7px; }
.break-word { margin-top: 13px; overflow-wrap: anywhere; }
.file-status { min-height: 18px; color: #718178; font-size: 9px; }
.file-status[data-state="ready"] { color: #367349; }
.file-status[data-state="error"] { color: var(--red); }
.download-list { display: flex; flex-wrap: wrap; gap: 8px; }
.download-link { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid #dce8dd; border-radius: 7px; color: #38654e; background: #f6faf5; font-size: 9px; font-weight: 800; text-decoration: none; }
.download-link:hover { border-color: #b5cfb8; background: #edf5ed; }
.download-link[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.metric-grid .field { padding: 9px; border: 1px solid #e8ede8; border-radius: 8px; background: #fbfcfa; }
.metric-value { color: #2a5a46; font-size: 15px; font-weight: 850; }
.review-text { white-space: pre-wrap; color: #4f665a; font-size: 10px; line-height: 1.7; }
.login-page { min-height: 100vh; background: #f4f5f0; }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(340px, .88fr) minmax(410px, 1.12fr); }
.login-story { position: relative; display: flex; flex-direction: column; overflow: hidden; min-height: 100vh; padding: 36px clamp(28px, 5vw, 72px); color: #edf4e9; background: #123d34; }
.brand-light { position: relative; z-index: 1; }
.login-story-copy { position: relative; z-index: 1; max-width: 510px; margin: auto 0; padding: 65px 0; }
.login-story-copy .eyebrow { color: #d4b66f; }
.login-story-copy h1 { margin: 15px 0 18px; color: #f4f7ed; font-size: clamp(34px, 4.5vw, 54px); line-height: 1.25; }
.login-story-copy p { max-width: 410px; color: #b3c9bb; font-size: 13px; line-height: 1.8; }
.login-story-foot { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 13px; color: #91ad9d; font-size: 10px; }
.login-orbit { position: absolute; width: 440px; height: 440px; border: 1px solid #a9c7ae22; border-radius: 50%; pointer-events: none; }
.orbit-one { right: -260px; top: 17%; box-shadow: 0 0 0 48px #a9c7ae0b, 0 0 0 97px #a9c7ae08; }
.orbit-two { left: -275px; bottom: -355px; width: 500px; height: 500px; border-color: #d2b66b24; }
.login-panel-wrap { display: grid; place-items: center; padding: 35px 25px; }
.login-panel { width: min(100%, 390px); padding: 34px 34px 25px; border: 1px solid #e1e8e0; border-radius: 15px; background: #fff; box-shadow: 0 25px 70px rgba(29, 58, 46, .08); }
.login-panel h2 { margin: 7px 0 6px; color: #213f34; font-size: 25px; letter-spacing: -.04em; }
.login-panel > p { margin: 0 0 23px; color: #849188; font-size: 11px; }
.login-panel .field { margin-top: 14px; }
.login-panel .button { margin-top: 22px; }
.login-note { display: flex; gap: 9px; margin-top: 17px; padding: 10px 11px; border-radius: 7px; color: #728178; background: #f5f8f4; font-size: 9px; }
.lock-icon { color: #518064; font-size: 15px; }
.login-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; padding-top: 14px; border-top: 1px solid #edf0ed; color: #98a39c; font-size: 8px; }

@media (max-width: 1120px) {
  .app-shell { grid-template-columns: 214px minmax(0, 1fr); }
  .main-content { padding-right: 27px; padding-left: 27px; }
  .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .app-shell { display: block; }
  .sidebar { position: relative; height: auto; padding: 13px 17px 10px; }
  .brand { display: inline-flex; }
  .pilot-switcher, .sidebar-bottom, .nav-label { display: none; }
  .primary-nav { flex-direction: row; overflow-x: auto; gap: 4px; margin-top: 13px; padding-bottom: 1px; }
  .nav-link { min-height: 36px; flex: 0 0 auto; gap: 7px; padding: 7px 9px; font-size: 10px; white-space: nowrap; }
  .nav-icon { width: auto; font-size: 8px; }
  .topbar { min-height: 53px; padding: 0 19px; }
  .main-content { padding: 25px 19px 40px; }
  .grid.wide-left { grid-template-columns: 1fr; }
  .workspace-footer { padding: 13px 19px; }
}
@media (max-width: 570px) {
  .topbar { align-items: flex-start; flex-direction: column; gap: 6px; padding: 10px 15px; }
  .topbar-status { justify-content: flex-start; }
  .status-pill { font-size: 9px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .page-heading-aside { align-items: flex-start; text-align: left; }
  .grid.two, .grid.three { grid-template-columns: 1fr; }
  .field-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .stat-row { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .check-grid { grid-template-columns: 1fr; }
  .card-header { padding: 15px 15px 0; }
  .card-body { padding: 14px 15px 16px; }
  .card-header + .card-body { padding-top: 12px; }
  .workspace-footer { flex-direction: column; gap: 4px; }
  .data-row { grid-template-columns: minmax(0, 1fr); }
  .data-row-actions { justify-content: flex-start; }
  .login-layout { display: block; }
  .login-story { min-height: 240px; padding: 23px 22px; }
  .login-story-copy { padding: 29px 0 18px; }
  .login-story-copy h1 { font-size: 31px; }
  .login-story-copy p { font-size: 11px; }
  .login-story-foot { display: none; }
  .login-panel-wrap { padding: 24px 17px; }
  .login-panel { padding: 27px 23px 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }
