:root {
  color-scheme: light;
  --bg: #f4f7f5;
  --panel: #ffffff;
  --panel-soft: #f8faf9;
  --ink: #18271f;
  --muted: #718078;
  --line: #dfe7e2;
  --green-900: #173c2a;
  --green-700: #176b46;
  --green-500: #19a363;
  --green-100: #e8f7ef;
  --yellow: #f9c04b;
  --orange: #ef8b34;
  --blue: #3979dc;
  --purple: #8265d8;
  --red: #dc635b;
  --shadow: 0 18px 55px rgba(24, 39, 31, 0.09);
  font-family: "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-width: 1000px; min-height: 100%; background: var(--bg); color: var(--ink); }
body { min-height: 100vh; }
button, input { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.login-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(480px, 1.1fr) minmax(480px, 0.9fr);
  background: #eef4f0;
}

.login-brand {
  position: relative;
  min-height: 720px;
  padding: 56px clamp(54px, 6vw, 104px);
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 15% 100%, rgba(249, 192, 75, 0.22), transparent 30%),
    radial-gradient(circle at 86% 18%, rgba(80, 220, 144, 0.16), transparent 27%),
    linear-gradient(145deg, #102e20 0%, #174c33 55%, #176e48 100%);
}

.login-brand::before, .login-brand::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
}
.login-brand::before { width: 470px; height: 470px; right: -190px; top: 90px; }
.login-brand::after { width: 660px; height: 660px; right: -250px; top: -18px; }

.brand-lockup { display: flex; align-items: center; gap: 13px; }
.brand-lockup img { flex: 0 0 auto; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.12)); }
.brand-lockup div { display: grid; gap: 2px; }
.brand-lockup strong { font-size: 20px; letter-spacing: 0.04em; }
.brand-lockup span { color: #89978f; font-size: 12px; }
.brand-lockup-light span { color: rgba(255, 255, 255, 0.62); }

.login-copy { position: relative; z-index: 1; margin-top: clamp(90px, 14vh, 150px); max-width: 580px; }
.eyebrow { color: var(--yellow); font-size: 12px; font-weight: 800; letter-spacing: 0.19em; }
.login-copy h1 { margin: 19px 0 24px; font-size: clamp(42px, 4.2vw, 66px); line-height: 1.13; letter-spacing: -0.045em; }
.login-copy p { max-width: 500px; margin: 0; color: rgba(255, 255, 255, 0.69); font-size: 17px; line-height: 1.8; }

.login-feature-list { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 66px; }
.login-feature-list > div { min-width: 0; padding: 18px; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 16px; background: rgba(255, 255, 255, 0.065); backdrop-filter: blur(12px); }
.login-feature-list i { display: block; margin-bottom: 18px; color: var(--yellow); font-size: 12px; font-style: normal; font-weight: 800; }
.login-feature-list span { display: grid; gap: 6px; color: rgba(255, 255, 255, 0.58); font-size: 12px; line-height: 1.5; }
.login-feature-list strong { color: white; font-size: 14px; }
.brand-footnote { position: absolute; bottom: 36px; left: clamp(54px, 6vw, 104px); color: rgba(255, 255, 255, 0.44); font-size: 12px; }

.login-panel { display: grid; place-items: center; align-content: center; gap: 28px; padding: 52px; background: linear-gradient(180deg, #fbfdfb, #f2f6f3); }
.login-card { width: min(100%, 440px); padding: 44px; border: 1px solid rgba(205, 217, 210, 0.85); border-radius: 24px; background: rgba(255, 255, 255, 0.9); box-shadow: var(--shadow); }
.desktop-badge { display: inline-flex; padding: 6px 10px; border-radius: 999px; color: var(--green-700); background: var(--green-100); font-size: 12px; font-weight: 800; }
.login-heading h2 { margin: 16px 0 7px; font-size: 31px; letter-spacing: -0.03em; }
.login-heading p { margin: 0 0 34px; color: var(--muted); font-size: 14px; }
.field-label { display: block; margin: 19px 0 9px; color: #425047; font-size: 13px; font-weight: 700; }
.field-shell { display: flex; align-items: center; min-height: 52px; overflow: hidden; border: 1px solid #d6e0da; border-radius: 12px; background: white; transition: border-color .18s, box-shadow .18s; }
.field-shell:focus-within { border-color: var(--green-500); box-shadow: 0 0 0 4px rgba(25, 163, 99, 0.11); }
.field-prefix { padding: 0 14px 0 16px; border-right: 1px solid var(--line); color: #536158; font-size: 14px; font-weight: 700; }
.field-shell input { flex: 1; min-width: 0; height: 50px; padding: 0 15px; border: 0; outline: 0; color: var(--ink); background: transparent; }
.field-shell input::placeholder { color: #a1ada6; }
.code-field input { padding-right: 8px; }
.text-button { align-self: stretch; flex: 0 0 116px; border: 0; border-left: 1px solid var(--line); color: var(--green-700); background: transparent; font-size: 13px; font-weight: 800; cursor: pointer; }
.text-button:hover { background: var(--green-100); }
.text-button:disabled { color: #9aa69f; background: #f6f8f7; cursor: wait; }
.primary-button, .secondary-button { min-height: 42px; border-radius: 10px; font-weight: 750; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; }
.primary-button { border: 0; color: white; background: var(--green-500); box-shadow: 0 9px 20px rgba(25, 163, 99, 0.2); }
.primary-button:hover { background: #148e56; transform: translateY(-1px); }
.primary-button:disabled { opacity: .58; cursor: wait; transform: none; }
.secondary-button { padding: 0 15px; border: 1px solid var(--line); color: #39483f; background: white; }
.secondary-button:hover { border-color: #b9c9c0; background: #f9fbfa; }
.login-submit { width: 100%; min-height: 52px; margin-top: 23px; }
.form-error { margin: 14px 0 -7px; padding: 10px 12px; border-radius: 9px; color: #ad3b35; background: #fff1f0; font-size: 13px; }
.agreement { margin: 18px 0 0; color: #8a968f; font-size: 11px; line-height: 1.7; text-align: center; }
.agreement button { padding: 0; border: 0; color: var(--green-700); background: none; cursor: pointer; }
.login-help { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid #edf1ee; color: #9aa69f; font-size: 12px; line-height: 1.7; text-align: center; }
.environment-line { display: flex; align-items: center; gap: 8px; color: #7e8c84; font-size: 12px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #29b872; box-shadow: 0 0 0 4px rgba(41, 184, 114, .11); }

.app-layout { min-height: 100vh; display: grid; grid-template-columns: 244px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 27px 20px 20px; border-right: 1px solid #dbe4de; background: #fff; }
.sidebar > .brand-lockup { padding: 0 10px 26px; }
.main-nav { display: grid; gap: 6px; margin-top: 18px; }
.nav-item { position: relative; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; min-height: 48px; padding: 0 13px; border: 0; border-radius: 11px; color: #68766e; background: transparent; text-align: left; font-size: 14px; font-weight: 700; cursor: pointer; }
.nav-item:hover { color: var(--ink); background: #f3f7f4; }
.nav-item.active { color: #0f6b40; background: var(--green-100); }
.nav-item.active::before { content: ""; position: absolute; left: -20px; width: 4px; height: 27px; border-radius: 0 4px 4px 0; background: var(--green-500); }
.nav-icon { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; color: #738179; background: #edf2ef; font-size: 13px; }
.nav-item.active .nav-icon { color: white; background: var(--green-500); }
.nav-item b { min-width: 22px; padding: 3px 6px; border-radius: 999px; color: white; background: var(--orange); font-size: 10px; text-align: center; }
.sidebar-spacer { flex: 1; }
.sidebar-account { display: grid; grid-template-columns: 38px 1fr 30px; align-items: center; gap: 10px; padding: 13px 10px 0; border-top: 1px solid #e9eeeb; }
.account-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: #0f7043; background: var(--green-100); font-weight: 800; }
.sidebar-account > div:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.sidebar-account strong, .sidebar-account span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account strong { font-size: 13px; }
.sidebar-account span { color: var(--muted); font-size: 11px; }
.sidebar-account button { width: 30px; height: 30px; border: 0; border-radius: 8px; color: #8b9790; background: transparent; cursor: pointer; }
.sidebar-account button:hover { color: #b64841; background: #fff0ef; }

.workspace { min-width: 0; }
.topbar { height: 106px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 38px; border-bottom: 1px solid #e1e8e4; background: rgba(250, 252, 251, .88); backdrop-filter: blur(10px); }
.topbar p { margin: 0 0 5px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.topbar h1 { margin: 0; font-size: 25px; letter-spacing: -.025em; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.last-updated { color: #8a968f; font-size: 12px; }
.page-content { padding: 30px 38px 50px; }
.page-loading { position: fixed; z-index: 20; top: 120px; right: 38px; display: flex; align-items: center; gap: 10px; padding: 11px 15px; border: 1px solid var(--line); border-radius: 999px; color: #617068; background: white; box-shadow: 0 8px 30px rgba(24, 39, 31, .1); font-size: 12px; }
.page-loading span:first-child { width: 14px; height: 14px; border: 2px solid #c8d7cf; border-top-color: var(--green-500); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.hero-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .7fr); min-height: 208px; overflow: hidden; border-radius: 21px; color: white; background: linear-gradient(125deg, #163c2a 0%, #176744 72%, #168452 100%); box-shadow: 0 20px 45px rgba(17, 67, 42, .16); }
.hero-card::after { content: ""; position: absolute; width: 290px; height: 290px; right: -85px; top: -120px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; box-shadow: 0 0 0 50px rgba(255, 255, 255, .025), 0 0 0 100px rgba(255, 255, 255, .02); }
.hero-main { position: relative; z-index: 1; padding: 30px 34px; }
.hero-shop { display: flex; align-items: center; gap: 12px; }
.shop-mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: var(--green-900); background: var(--yellow); font-weight: 900; }
.hero-shop div { display: grid; gap: 3px; }
.hero-shop strong { font-size: 18px; }
.hero-shop span { color: rgba(255, 255, 255, .61); font-size: 11px; }
.hero-income { margin-top: 31px; }
.hero-income span { display: block; color: rgba(255, 255, 255, .66); font-size: 12px; }
.hero-income strong { display: block; margin-top: 5px; font-size: 39px; letter-spacing: -.04em; }
.hero-side { position: relative; z-index: 1; display: grid; align-content: center; gap: 18px; padding: 28px 34px; border-left: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); }
.hero-side div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.hero-side span { color: rgba(255, 255, 255, .62); font-size: 12px; }
.hero-side strong { font-size: 21px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.metric-card, .panel { border: 1px solid #e0e7e3; background: white; box-shadow: 0 10px 32px rgba(28, 47, 37, .045); }
.metric-card { padding: 20px; border-radius: 15px; }
.metric-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }
.metric-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; font-weight: 800; }
.metric-icon.orange { color: #b65c14; background: #fff0e3; }
.metric-icon.blue { color: #2e68bd; background: #eaf2ff; }
.metric-icon.green { color: #167546; background: var(--green-100); }
.metric-icon.purple { color: #674ab7; background: #f0ecff; }
.metric-card > strong { display: block; margin-top: 17px; font-size: 27px; letter-spacing: -.025em; }
.metric-card > small { display: block; margin-top: 6px; color: #95a199; font-size: 11px; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr); gap: 18px; margin-top: 18px; }
.panel { overflow: hidden; border-radius: 17px; }
.panel-header { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 22px; border-bottom: 1px solid #e9eeeb; }
.panel-header h2 { margin: 0; font-size: 16px; }
.panel-header p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.panel-link { border: 0; color: var(--green-700); background: none; font-size: 12px; font-weight: 700; cursor: pointer; }
.task-list { padding: 4px 20px 12px; }
.task-row { display: grid; grid-template-columns: 39px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; border-bottom: 1px solid #edf1ef; }
.task-row:last-child { border-bottom: 0; }
.task-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; color: #a45012; background: #fff0e2; font-size: 12px; font-weight: 800; }
.task-row div:nth-child(2) { min-width: 0; }
.task-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.task-row span { display: block; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.task-row time { color: #5d6a62; font-size: 11px; }
.ai-panel { padding: 24px; color: white; background: linear-gradient(145deg, #2d315c, #55478f); }
.ai-label { color: #d7d4ff; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.ai-panel h2 { margin: 19px 0 12px; font-size: 21px; line-height: 1.45; }
.ai-panel p { min-height: 64px; margin: 0; color: rgba(255, 255, 255, .7); font-size: 13px; line-height: 1.7; }
.ai-panel footer { display: flex; align-items: center; justify-content: space-between; margin-top: 31px; padding-top: 17px; border-top: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .54); font-size: 10px; }
.ai-panel footer span:last-child { color: #f6d879; }

.page-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.segmented { display: inline-flex; flex-wrap: wrap; gap: 5px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.segmented button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 8px; color: #6d7b73; background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }
.segmented button.active { color: #0f7043; background: var(--green-100); }
.search-box { display: flex; align-items: center; width: min(100%, 360px); height: 42px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.search-box:focus-within { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(25, 163, 99, .08); }
.search-box span { color: #8e9a93; }
.search-box input { flex: 1; min-width: 0; height: 40px; padding: 0 10px; border: 0; outline: 0; background: transparent; }
.search-box button { border: 0; color: var(--green-700); background: none; font-size: 12px; font-weight: 800; cursor: pointer; }

.data-panel { overflow: hidden; border: 1px solid #dfe7e2; border-radius: 15px; background: white; box-shadow: 0 10px 32px rgba(28, 47, 37, .04); }
.data-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 20px; border-bottom: 1px solid #e9eeeb; color: var(--muted); font-size: 12px; }
.data-summary strong { color: var(--ink); }
.data-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.data-table th { height: 42px; padding: 0 16px; color: #86928b; background: #f8faf9; font-size: 11px; font-weight: 700; text-align: left; }
.data-table td { height: 70px; padding: 11px 16px; border-top: 1px solid #edf1ef; color: #35443b; font-size: 12px; vertical-align: middle; }
.data-table tbody tr:hover { background: #fbfdfc; }
.cell-main { display: block; overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.cell-sub { display: block; margin-top: 5px; overflow: hidden; color: #8b9790; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.status-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-pill.warning { color: #b96018; background: #fff0e2; }
.status-pill.info { color: #2e68bd; background: #eaf2ff; }
.status-pill.success { color: #167546; background: var(--green-100); }
.status-pill.muted { color: #79857e; background: #eef2ef; }
.status-pill.neutral { color: #655196; background: #f0ecff; }
.row-actions { display: flex; align-items: center; gap: 7px; }
.row-button { min-height: 30px; padding: 0 10px; border: 1px solid #dce5df; border-radius: 8px; color: #59675f; background: white; font-size: 10px; font-weight: 700; cursor: pointer; }
.row-button:hover { border-color: #b8c9bf; }
.row-button.primary { border-color: #bde3cf; color: #0f7043; background: var(--green-100); }
.row-button.danger { border-color: #f0cfcc; color: #ad4841; background: #fff4f3; }
.empty-state { display: grid; min-height: 310px; place-items: center; align-content: center; gap: 10px; color: #89968e; text-align: center; }
.empty-state b { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 16px; color: #6c7b72; background: #eef3f0; font-size: 21px; }
.empty-state strong { color: #45544b; font-size: 14px; }
.empty-state span { font-size: 12px; }
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 14px 18px; border-top: 1px solid #e9eeeb; }
.pagination span { min-width: 74px; color: #7e8b84; font-size: 11px; text-align: center; }
.pagination button { min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: white; font-size: 11px; cursor: pointer; }
.pagination button:disabled { color: #aab3ae; background: #f6f8f7; cursor: default; }
.member-avatar { display: grid; width: 38px; height: 38px; place-items: center; float: left; margin-right: 10px; border-radius: 11px; color: #126f43; background: var(--green-100); font-weight: 800; }
.member-cell { min-width: 0; padding-top: 1px; }
.member-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.member-stat { padding: 17px 18px; border: 1px solid var(--line); border-radius: 13px; background: white; }
.member-stat span { color: var(--muted); font-size: 11px; }
.member-stat strong { display: block; margin-top: 9px; font-size: 21px; }

.toast { position: fixed; z-index: 100; right: 28px; bottom: 28px; max-width: 380px; padding: 13px 17px; border-radius: 11px; color: white; background: #21372c; box-shadow: 0 14px 35px rgba(14, 31, 21, .22); font-size: 13px; }
.toast.error { background: #a83e38; }

.document-dialog { width: min(700px, calc(100vw - 60px)); max-height: calc(100vh - 70px); padding: 0; overflow: hidden; border: 0; border-radius: 18px; color: var(--ink); background: white; box-shadow: 0 30px 90px rgba(12, 29, 19, .28); }
.document-dialog::backdrop { background: rgba(11, 28, 18, .5); backdrop-filter: blur(3px); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 25px; border-bottom: 1px solid var(--line); }
.dialog-header span { color: var(--green-700); font-size: 10px; font-weight: 800; letter-spacing: .09em; }
.dialog-header h2 { margin: 5px 0 0; font-size: 20px; }
.dialog-header button { width: 34px; height: 34px; border: 0; border-radius: 9px; color: #728078; background: #f1f5f2; font-size: 22px; cursor: pointer; }
.document-content { max-height: 58vh; overflow: auto; padding: 12px 27px 24px; }
.document-content p { margin: 13px 0; color: #5f6e65; font-size: 13px; line-height: 1.8; }
.document-content p:first-child { color: #8b9790; font-size: 11px; }
.document-content strong { color: var(--ink); }
.dialog-footer { display: flex; justify-content: flex-end; padding: 16px 24px; border-top: 1px solid var(--line); background: #fafcfb; }
.dialog-footer button { min-width: 110px; padding: 0 18px; }

@media (max-width: 1220px) {
  .login-brand { padding-inline: 52px; }
  .login-feature-list { grid-template-columns: 1fr; max-width: 360px; gap: 8px; margin-top: 40px; }
  .login-feature-list > div { display: grid; grid-template-columns: 30px 1fr; padding: 12px 15px; }
  .login-feature-list i { margin: 2px 0 0; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
}