:root {
  --ink: #17212b;
  --muted: #667381;
  --line: #dbe1e7;
  --soft-line: #e9edf1;
  --canvas: #f3f5f7;
  --surface: #ffffff;
  --green: #12715b;
  --green-dark: #0d5746;
  --green-soft: #e7f3ef;
  --red: #c53b42;
  --red-soft: #fcebed;
  --amber: #a96500;
  --amber-soft: #fff4df;
  --blue: #1e6fa8;
  --radius: 6px;
  font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.eyebrow { margin: 0 0 8px; color: var(--amber); font-size: 12px; font-weight: 700; }
.subtle-status { color: var(--muted); font-size: 13px; }
h1, h2, h3 { margin: 0; letter-spacing: 0; }
h2 { font-size: 28px; line-height: 1.2; }
h3 { font-size: 16px; }
label { display: grid; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
input, select, textarea { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 4px; padding: 9px 10px; color: var(--ink); background: var(--surface); outline: none; }
textarea { min-height: 76px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(18, 113, 91, .12); }
.form-error, .form-message { min-height: 20px; margin: -5px 0 0; color: var(--red); font-size: 13px; }
.form-message.success { color: var(--green); }

.button { min-height: 38px; border: 1px solid transparent; border-radius: 4px; padding: 8px 13px; font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; }
.button.primary { background: var(--green); color: white; border-color: var(--green); }
.button.primary:hover { background: var(--green-dark); border-color: var(--green-dark); }
.button.secondary, .button.icon-text { color: var(--ink); background: var(--surface); border-color: var(--line); }
.button.secondary:hover, .button.icon-text:hover { background: var(--canvas); }
.button.wide { width: 100%; }
.button:disabled, .quick-action:disabled { opacity: .45; cursor: not-allowed; }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); }
.login-intro { padding: clamp(40px, 10vw, 160px); display: flex; flex-direction: column; justify-content: center; background: var(--green); color: white; }
.login-intro .eyebrow { color: #c9f0df; }
.login-intro h1 { font-size: 44px; line-height: 1.16; }
.login-intro p:last-child { max-width: 370px; font-size: 16px; line-height: 1.8; color: #e7f3ef; }
.login-form { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(32px, 7vw, 104px); background: var(--surface); }

.mode-shell { min-height: 100vh; background: var(--canvas); }
.mode-topbar, .topbar { min-height: 68px; padding: 0 28px; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.mode-content { width: min(940px, calc(100% - 40px)); margin: 0 auto; padding: clamp(56px, 10vh, 130px) 0; }
.mode-content h1 { font-size: 34px; }
.mode-copy { margin: 12px 0 30px; color: var(--muted); font-size: 16px; }
.mode-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mode-choice { min-height: 230px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); text-align: left; background: var(--surface); display: grid; align-content: start; gap: 12px; transition: border-color .15s ease, transform .15s ease; }
.mode-choice:hover { border-color: var(--green); transform: translateY(-2px); }
.mode-choice.update { background: var(--green); border-color: var(--green); color: white; }
.mode-kicker { color: var(--amber); font-size: 12px; font-weight: 800; }
.mode-choice.update .mode-kicker { color: #c9f0df; }
.mode-choice strong { font-size: 25px; }
.mode-choice small { max-width: 290px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.mode-choice.update small { color: #e7f3ef; }

.app-shell { min-height: 100vh; }
.brand-lockup, .topbar-actions { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 4px; background: var(--green); color: white; font-size: 11px; font-weight: 800; }
.group-name { margin: 0 0 2px; color: var(--muted); font-size: 11px; }
.quote-status { max-width: 300px; color: var(--muted); font-size: 12px; text-align: right; }
.quote-status.warning { color: var(--amber); }
.workspace { min-height: calc(100vh - 68px); display: grid; grid-template-columns: 190px minmax(0, 1fr); }
.sidebar { padding: 18px 12px; border-right: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 4px; }
.nav-item { min-height: 40px; border: 0; border-left: 3px solid transparent; border-radius: 0 4px 4px 0; padding: 0 12px; background: transparent; color: var(--muted); text-align: left; font-weight: 700; }
.nav-item:hover { background: var(--canvas); color: var(--ink); }
.nav-item.active { border-left-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.sidebar-user { margin-top: auto; padding: 16px 12px 4px; border-top: 1px solid var(--soft-line); display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
.sidebar-user small { color: var(--muted); font-weight: 400; }
.content { min-width: 0; padding: 32px clamp(18px, 4vw, 56px) 56px; }
.view { display: none; max-width: 1440px; margin: 0 auto; }
.view.active { display: block; }
.view-heading { margin-bottom: 16px; display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.view-intro { margin: 0 0 22px; color: var(--muted); font-size: 14px; }

.member-strip, .metrics-grid, .update-balance { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.member-strip { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 22px; }
.member-choice { min-height: 76px; padding: 13px 14px; border: 0; border-right: 1px solid var(--line); text-align: left; background: var(--surface); display: grid; gap: 5px; }
.member-choice:hover { background: var(--canvas); }
.member-choice.active { background: var(--green-soft); box-shadow: inset 0 -3px 0 var(--green); }
.member-choice span { font-weight: 800; }
.member-choice small { color: var(--muted); font-size: 12px; }
.member-choice strong { font-size: 13px; }
.metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 28px; }
.metric-block, .update-balance > div { min-height: 110px; padding: 18px; border-right: 1px solid var(--line); display: grid; align-content: center; gap: 9px; }
.metric-block:last-child, .update-balance > div:last-child { border-right: 0; }
.metric-block span, .update-balance span { color: var(--muted); font-size: 13px; }
.metric-block strong, .update-balance strong { font-size: 23px; }
.metric-block.emphasis { background: #fafcfb; }

.data-section, .quick-section, .settings-section { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.section-title-row { min-height: 72px; padding: 17px 20px; border-bottom: 1px solid var(--soft-line); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.section-title-row p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.section-title-actions { display: flex; align-items: center; gap: 8px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 790px; border-collapse: collapse; }
th, td { padding: 14px 16px; border-bottom: 1px solid var(--soft-line); text-align: right; white-space: nowrap; font-size: 13px; }
th { background: #fafbfc; color: var(--muted); font-size: 12px; font-weight: 700; }
th:first-child, td:first-child, td.stock-name, td.note { text-align: left; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafcfd; }
.position-table { min-width: 680px; }
.position-row { cursor: pointer; }
.position-row:focus { outline: 2px solid var(--green); outline-offset: -2px; }
.stock-name { display: grid; gap: 3px; }
.stock-name small, td.muted { color: var(--muted); font-size: 12px; }
.positive { color: var(--red); font-weight: 800; }
.negative { color: var(--green); font-weight: 800; }
.neutral { color: var(--muted); }
.empty-row { padding: 42px 16px; color: var(--muted); text-align: center !important; }
.badge { display: inline-flex; justify-content: center; padding: 4px 7px; border-radius: 3px; font-size: 12px; font-weight: 800; }
.badge.buy, .badge.deposit { color: var(--red); background: var(--red-soft); }
.badge.sell, .badge.withdrawal { color: var(--green); background: var(--green-soft); }

.update-balance { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; }
.quick-section { margin-bottom: 18px; }
.quick-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.quick-action { min-height: 118px; padding: 18px; border: 0; border-right: 1px solid var(--line); background: var(--surface); text-align: left; display: grid; align-content: center; gap: 9px; }
.quick-action:last-child { border-right: 0; }
.quick-action:hover { background: var(--canvas); }
.quick-action strong { font-size: 16px; }
.quick-action small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.quick-action.new { box-shadow: inset 0 3px 0 var(--green); }
.quick-action.add { box-shadow: inset 0 3px 0 var(--red); }
.quick-action.reduce { box-shadow: inset 0 3px 0 var(--blue); }
.quick-action.close { box-shadow: inset 0 3px 0 var(--amber); }
.quick-action.cash { box-shadow: inset 0 3px 0 #7e8994; }
.update-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 18px; }
.position-list, .recent-list { min-height: 210px; }
.position-card { padding: 16px 18px; border-bottom: 1px solid var(--soft-line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.position-card:last-child { border-bottom: 0; }
.position-card h3 { font-size: 16px; }
.position-card p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.position-values { display: grid; grid-template-columns: repeat(3, auto); gap: 18px; text-align: right; }
.position-values span { display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
.position-values strong { color: var(--ink); font-size: 14px; }
.position-actions { display: flex; gap: 7px; }
.compact-button { min-height: 32px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 800; }
.compact-button:hover { background: var(--green-soft); border-color: var(--green); }
.recent-item { padding: 14px 18px; border-bottom: 1px solid var(--soft-line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.recent-item:last-child { border-bottom: 0; }
.recent-item div { display: grid; gap: 4px; }
.recent-item small { color: var(--muted); font-size: 12px; }
.recent-item strong { font-size: 14px; }

.member-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 14px; }
.member-card { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: grid; gap: 14px; }
.member-card header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.member-card h3 { font-size: 18px; }
.member-card p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.member-card dl { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 0; font-size: 13px; }
.member-card dt { color: var(--muted); }
.member-card dd { margin: 0; font-weight: 800; }
.role-chip { padding: 4px 6px; border-radius: 3px; color: var(--green-dark); background: var(--green-soft); font-size: 12px; font-weight: 700; }
.settings-section { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(240px, .8fr); align-items: start; }
.settings-form, .notice { padding: 22px; }
.settings-form { border-right: 1px solid var(--line); display: grid; gap: 16px; }
.notice { color: var(--muted); font-size: 14px; line-height: 1.7; }
.notice h3 { color: var(--ink); }

.modal-root { position: fixed; inset: 0; z-index: 10; padding: 20px; display: grid; place-items: center; background: rgba(23, 33, 43, .48); }
.modal { width: min(590px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow-y: auto; border-radius: 6px; background: var(--surface); box-shadow: 0 22px 60px rgba(23, 33, 43, .25); }
.modal-header { padding: 19px 22px; border-bottom: 1px solid var(--soft-line); display: flex; align-items: center; justify-content: space-between; }
.modal-header h2 { font-size: 20px; }
.close-button { padding: 4px 8px; border: 0; background: transparent; color: var(--muted); font-size: 24px; line-height: 1; }
.modal-form { padding: 22px; display: grid; gap: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid.full { grid-template-columns: 1fr; }
.stock-picker { position: relative; }
.search-results { position: absolute; z-index: 2; top: calc(100% + 4px); right: 0; left: 0; max-height: 190px; overflow-y: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); box-shadow: 0 8px 20px rgba(23, 33, 43, .12); }
.search-result { width: 100%; min-height: 42px; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--soft-line); background: var(--surface); text-align: left; display: flex; justify-content: space-between; gap: 10px; }
.search-result:hover { background: var(--green-soft); }
.search-result small { color: var(--muted); }
.quote-hint { min-height: 42px; padding: 10px; border-left: 3px solid var(--amber); background: var(--amber-soft); color: #735000; font-size: 13px; line-height: 1.45; }
.trade-summary { padding: 13px; border: 1px solid var(--line); border-radius: 4px; background: #fafbfc; font-size: 14px; line-height: 1.65; }
.trade-summary strong { color: var(--green-dark); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
.selected-stock { min-height: 42px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background: #fafbfc; display: grid; gap: 4px; }
.selected-stock span, .selected-stock small { color: var(--muted); font-size: 12px; }
.selected-stock strong { font-size: 15px; }
.position-action-summary { padding: 18px 22px; border-bottom: 1px solid var(--soft-line); display: grid; gap: 6px; }
.position-action-summary span { color: var(--muted); font-size: 13px; }
.position-action-options { padding: 18px 22px 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.action-option { min-height: 108px; padding: 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); text-align: left; display: grid; align-content: center; gap: 7px; }
.action-option:hover { border-color: var(--green); background: var(--green-soft); }
.action-option strong { font-size: 15px; }
.action-option small { color: var(--muted); line-height: 1.45; }
.action-option.buy { box-shadow: inset 0 3px 0 var(--red); }
.action-option.sell { box-shadow: inset 0 3px 0 var(--blue); }
.action-option.clear { box-shadow: inset 0 3px 0 var(--amber); }
.field-help { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.toast-root { position: fixed; z-index: 30; right: 18px; bottom: 18px; display: grid; gap: 8px; max-width: min(380px, calc(100vw - 36px)); }
.toast { padding: 12px 14px; border-radius: 4px; color: white; background: var(--ink); box-shadow: 0 8px 22px rgba(23, 33, 43, .2); font-size: 14px; }
.toast.error { background: var(--red); }
.toast.success { background: var(--green); }

@media (max-width: 980px) {
  .quick-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quick-action:nth-child(3) { border-right: 0; }
  .quick-action:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .update-layout { grid-template-columns: 1fr; }
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-block:nth-child(2) { border-right: 0; }
  .metric-block:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .settings-section { grid-template-columns: 1fr; }
  .settings-form { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 720px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-intro { min-height: 34vh; padding: 38px 26px; }
  .login-intro h1 { font-size: 36px; }
  .login-form { padding: 32px 26px 42px; }
  .mode-topbar, .topbar { min-height: 62px; padding: 12px 16px; align-items: start; }
  .mode-content { width: min(100% - 28px, 560px); padding: 46px 0; }
  .mode-content h1 { font-size: 28px; }
  .mode-actions { grid-template-columns: 1fr; }
  .mode-choice { min-height: 175px; }
  .topbar-actions { gap: 7px; flex-wrap: wrap; justify-content: end; }
  .quote-status { display: none; }
  .workspace { display: block; min-height: 0; }
  .sidebar { position: sticky; top: 0; z-index: 5; height: 54px; padding: 7px 8px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: row; background: rgba(255,255,255,.96); }
  .nav-item { min-width: max-content; min-height: 38px; border-left: 0; border-bottom: 3px solid transparent; border-radius: 4px 4px 0 0; }
  .nav-item.active { border-left-color: transparent; border-bottom-color: var(--green); }
  .sidebar-user { display: none; }
  .content { padding: 22px 14px 42px; }
  .view-heading { align-items: center; margin-bottom: 14px; }
  .section-title-actions { align-items: stretch; flex-direction: column; }
  .section-title-actions .button { min-height: 34px; padding: 7px 10px; }
  h2 { font-size: 24px; }
  .member-strip { grid-template-columns: 1fr 1fr; }
  .member-choice:nth-child(2n) { border-right: 0; }
  .member-choice { border-bottom: 1px solid var(--line); }
  .update-balance { grid-template-columns: 1fr; }
  .update-balance > div { min-height: 72px; border-right: 0; border-bottom: 1px solid var(--line); grid-template-columns: 1fr auto; align-items: center; }
  .update-balance > div:last-child { border-bottom: 0; }
  .quick-actions { grid-template-columns: 1fr 1fr; }
  .quick-action { min-height: 100px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .quick-action:nth-child(2n) { border-right: 0; }
  .quick-action:nth-child(3) { border-right: 1px solid var(--line); }
  .quick-action:last-child { border-bottom: 0; }
  .position-card { grid-template-columns: 1fr; }
  .position-values { grid-template-columns: repeat(3, 1fr); text-align: left; gap: 8px; }
  .position-actions { flex-wrap: wrap; }
  .form-grid { grid-template-columns: 1fr; }
  .modal-root { padding: 0; align-items: end; }
  .modal { width: 100%; max-height: calc(100vh - 12px); border-radius: 6px 6px 0 0; }
  .position-action-options { grid-template-columns: 1fr; }
  .action-option { min-height: 72px; }
}