:root { --ink:#17211c; --muted:#64736a; --line:#dbe4dd; --surface:#fff; --canvas:#f3f6f4; --brand:#287047; --brand-dark:#195333; --soft:#e5f0e8; --danger:#b42318; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--canvas); color:var(--ink); font:14px/1.5 "PingFang SC","Microsoft YaHei",Arial,sans-serif; }
button,input,select { font:inherit; } button { cursor:pointer; }
.login-layout { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(125deg,#eff5ef 0%,#d8eadc 100%); }
.login-panel { width:min(100%,400px); padding:40px; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:0 18px 44px rgba(25,83,51,.12); }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; background:var(--brand); color:#fff; font-size:20px; font-weight:700; border-radius:8px; }
.brand-mark.small { width:30px; height:30px; border-radius:6px; font-size:15px; }
.eyebrow { margin:16px 0 2px; color:var(--brand); font-size:12px; font-weight:700; letter-spacing:0; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:8px; font-size:28px; } h2 { margin:0; font-size:22px; } h3 { margin:0; font-size:16px; }.login-copy { color:var(--muted); margin-bottom:26px; }
.login-form { display:grid; gap:16px; }.login-form label { display:grid; gap:6px; color:#39463f; font-weight:600; }.login-form input,.filters input,.filters select { width:100%; min-height:40px; border:1px solid #b9c8be; border-radius:5px; background:#fff; padding:8px 10px; color:var(--ink); }.login-form input:focus,.filters input:focus,.filters select:focus { border-color:var(--brand); outline:2px solid rgba(40,112,71,.15); }
.primary-button,.secondary-button { min-height:38px; border-radius:5px; padding:8px 13px; font-weight:600; }.primary-button { border:1px solid var(--brand); background:var(--brand); color:#fff; }.primary-button:hover { background:var(--brand-dark); }.primary-button:disabled { opacity:.6; cursor:wait; }.secondary-button { border:1px solid #a4b6a9; background:#fff; color:#244632; }.secondary-button:hover { background:var(--soft); }.form-error { min-height:20px; margin:0; color:var(--danger); }
.app-layout { min-height:100vh; display:grid; grid-template-columns:220px minmax(0,1fr); }.sidebar { display:flex; flex-direction:column; padding:22px 14px; background:#163b27; color:#fff; }.sidebar-brand { display:flex; align-items:center; gap:10px; padding:0 8px; font-size:17px; font-weight:700; }.nav-list { display:grid; gap:4px; margin-top:38px; }.nav-item { width:100%; border:0; border-radius:5px; padding:10px 12px; background:transparent; color:#c8d8cd; text-align:left; }.nav-item:hover,.nav-item.active { background:#285e3d; color:#fff; }.sidebar-footer { display:grid; gap:10px; margin-top:auto; padding:12px 8px 0; border-top:1px solid rgba(255,255,255,.18); color:#c8d8cd; }.text-button { width:max-content; padding:0; border:0; background:transparent; color:#fff; text-decoration:underline; }
.workspace { min-width:0; }.topbar { display:flex; justify-content:space-between; align-items:center; min-height:83px; padding:16px 32px; background:var(--surface); border-bottom:1px solid var(--line); }.topbar .eyebrow { margin:0 0 2px; }.topbar-actions { display:flex; align-items:center; gap:12px; }.updated-at { color:var(--muted); font-size:12px; }.icon-button { width:36px; height:36px; border:1px solid #a4b6a9; border-radius:5px; background:#fff; color:var(--brand-dark); font-size:21px; }.view-panel { padding:28px 32px; }.metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.metric,.data-section { background:var(--surface); border:1px solid var(--line); border-radius:7px; }.metric { padding:20px; }.metric span { color:var(--muted); }.metric strong { display:block; margin-top:6px; font-size:32px; font-variant-numeric:tabular-nums; }.analysis-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }.data-section { padding:18px; }.data-section.wide { grid-column:1 / -1; }.section-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; }.section-heading p { margin:3px 0 0; color:var(--muted); }.stat-list,.trend-list { display:grid; gap:10px; }.stat-row { display:grid; grid-template-columns:minmax(90px,1fr) 2fr auto; gap:10px; align-items:center; }.stat-bar { height:8px; overflow:hidden; background:#e7eee9; border-radius:5px; }.stat-bar i { display:block; height:100%; background:var(--brand); }.trend-row { display:grid; grid-template-columns:72px 1fr 48px; gap:10px; align-items:center; }.toolbar { display:flex; justify-content:space-between; gap:16px; margin-bottom:16px; }.filters,.export-actions { display:flex; align-items:center; gap:8px; }.filters input { width:150px; }.filters select { width:112px; }.export-actions { flex-wrap:wrap; justify-content:flex-end; }.table-wrap { overflow:auto; background:#fff; border:1px solid var(--line); border-radius:7px; } table { width:100%; min-width:760px; border-collapse:collapse; } th,td { padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; } th { background:#f8faf8; color:#536259; font-size:12px; } tbody tr:hover { background:#f5f9f6; }.empty-state { margin:0; padding:34px; color:var(--muted); text-align:center; }.image-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }.image-card { overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:7px; }.image-card img { display:block; width:100%; aspect-ratio:1; object-fit:cover; background:#edf2ee; }.image-meta { padding:10px; color:var(--muted); font-size:12px; }.image-meta strong { display:block; color:var(--ink); font-size:13px; }.download-link { display:inline-flex; align-items:center; text-decoration:none; }.toast { position:fixed; right:24px; bottom:24px; max-width:340px; padding:11px 14px; border-radius:5px; background:#183c28; color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.18); }.toast.error { background:#8f1d18; }
@media (max-width:820px) { .app-layout { grid-template-columns:1fr; }.sidebar { flex-direction:row; align-items:center; padding:10px 14px; }.nav-list { display:flex; margin:0 0 0 22px; }.sidebar-footer { display:none; }.view-panel,.topbar { padding-left:16px; padding-right:16px; }.metric-grid,.analysis-grid { grid-template-columns:1fr; }.data-section.wide { grid-column:auto; }.toolbar { flex-direction:column; }.filters { flex-wrap:wrap; }.filters input { flex:1 1 145px; }.topbar { align-items:flex-start; }.updated-at { display:none; } }

/* Research workspace redesign */
:root { --paper:#f4f7f5; --pine:#123126; --pine-2:#1f5a39; --leaf:#2f7d51; --leaf-soft:#e4f0e7; --sand:#b97927; --water:#397b8e; --ink-2:#34483b; --muted-2:#718077; --hair:#dce5df; }
body { background:var(--paper); color:var(--ink); }
button { transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease; }
button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid rgba(47,125,81,.2); outline-offset:2px; }
i[data-lucide] { width:17px; height:17px; stroke-width:1.9; }
.login-layout { display:grid; grid-template-columns:minmax(360px,43%) 1fr; place-items:stretch; min-height:100vh; padding:0; background:#fbfcfb; }
.login-aside { display:flex; flex-direction:column; padding:46px clamp(34px,5vw,82px); color:#fff; background:var(--pine); }
.login-brand { display:flex; align-items:center; gap:10px; font-size:18px; }.login-brand .brand-mark { width:38px; height:38px; border:1px solid rgba(255,255,255,.32); background:rgba(255,255,255,.1); box-shadow:none; }
.login-aside-copy { max-width:390px; margin:auto 0; }.login-aside-copy .eyebrow { margin:0 0 11px; color:#b8d9c1; }.login-aside-copy h1 { margin:0 0 19px; color:#fff; font-size:clamp(40px,4.5vw,60px); line-height:1.12; }.login-aside-copy p:last-child { color:#c7d9cc; font-size:16px; line-height:1.8; }
.access-note { display:flex; align-items:center; gap:8px; margin:0; color:#bad4c1; font-size:12px; }.access-note span { width:8px; height:8px; border-radius:50%; background:#6bc68a; box-shadow:0 0 0 4px rgba(107,198,138,.12); }
.login-panel { display:grid; place-items:center; width:auto; padding:32px; border:0; border-radius:0; box-shadow:none; background:#fbfcfb; }.login-content { width:min(100%,410px); }.login-content .eyebrow { margin:0 0 8px; }.login-content h2 { margin:0 0 9px; font-size:29px; }.login-copy { margin:0 0 31px; }.login-form { gap:9px; }.login-form label { gap:6px; margin-top:6px; color:var(--ink-2); font-size:13px; }.login-form input { min-height:45px; border-color:#c9d6cd; padding:10px 12px; }.login-form input::placeholder { color:#9aa79f; }.login-form .primary-button { width:100%; min-height:46px; margin-top:5px; justify-content:center; gap:8px; }.form-error { min-height:21px; margin:4px 0 0; font-size:13px; }
.primary-button,.secondary-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:5px; font-weight:700; }.primary-button { border-color:var(--leaf); background:var(--leaf); }.primary-button:hover { border-color:var(--pine-2); background:var(--pine-2); }.secondary-button { border-color:#bdcbbf; color:var(--ink-2); }.secondary-button:hover { border-color:var(--leaf); background:var(--leaf-soft); }
.app-layout { grid-template-columns:236px minmax(0,1fr); background:var(--paper); }.sidebar { padding:24px 14px 16px; background:var(--pine); }.sidebar-brand { align-items:flex-start; padding:0 9px; }.sidebar-brand > span:last-of-type { display:grid; gap:1px; }.sidebar-brand small { color:#a9c8b3; font-size:10px; font-weight:500; }.sidebar-brand em { margin-left:auto; border:1px solid rgba(190,226,200,.35); border-radius:3px; padding:3px 5px; color:#bee3c7; font-size:9px; font-style:normal; letter-spacing:.6px; }.sidebar .brand-mark { background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.3); box-shadow:none; }.nav-list { gap:4px; margin-top:42px; }.nav-list > p { margin:0 10px 9px; color:#8eac9b; font-size:11px; font-weight:700; }.nav-item { display:flex; align-items:center; gap:12px; min-height:42px; border-radius:5px; color:#bad1c2; }.nav-item:hover { background:rgba(217,240,223,.09); color:#fff; }.nav-item.active { background:#2e714b; color:#fff; }.sidebar-footer { grid-template-columns:30px 1fr; align-items:center; gap:9px; padding:14px 9px 2px; border-top-color:rgba(210,234,218,.16); }.admin-avatar { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#3b865a; color:#fff; font-size:12px; font-weight:700; }.sidebar-footer #adminName { color:#fff; font-size:13px; }.text-button { grid-column:1 / -1; display:flex; align-items:center; gap:7px; margin-top:3px; color:#c2d5c7; text-decoration:none; font-size:12px; }.text-button:hover { color:#fff; }
.topbar { min-height:80px; padding:15px 34px; }.topbar .eyebrow { color:#74867a; font-size:12px; }.topbar h2 { font-size:23px; }.live-badge { display:inline-flex; align-items:center; gap:7px; border:1px solid #b8d8c3; border-radius:999px; padding:5px 10px; background:#f5fbf7; color:var(--pine-2); font-size:12px; font-weight:700; }.live-badge b { width:7px; height:7px; border-radius:50%; background:#3ca967; }.icon-button { display:grid; place-items:center; border-color:#c7d2c9; font-size:0; }.icon-button:hover { background:var(--leaf-soft); }.view-panel { padding:30px 34px 42px; }.section-intro { display:flex; align-items:end; justify-content:space-between; gap:22px; margin-bottom:22px; }.section-intro .eyebrow { margin:0 0 4px; }.section-intro h3 { margin:0 0 4px; font-size:25px; }.section-intro span { color:var(--muted-2); }.nav-shortcut { min-height:39px; }
.metric-grid { gap:14px; }.metric,.data-section { border-color:var(--hair); border-radius:7px; box-shadow:0 9px 24px rgba(22,52,35,.06); }.metric { position:relative; min-height:136px; padding:20px 20px 18px 72px; }.metric > i { position:absolute; top:21px; left:20px; display:grid; place-items:center; width:39px; height:39px; padding:10px; border-radius:6px; color:var(--pine-2); background:var(--leaf-soft); }.metric:nth-child(2) > i { color:var(--sand); background:#fff0da; }.metric:nth-child(3) > i { color:var(--water); background:#e1f0f4; }.metric span { font-size:13px; }.metric strong { margin:2px 0 3px; font-size:31px; line-height:1.1; }.metric small { color:#809087; font-size:11px; }.analysis-grid { gap:14px; margin-top:14px; }.data-section { min-height:220px; padding:20px; }.data-section.wide { min-height:210px; }.section-heading { align-items:flex-start; padding-bottom:14px; margin-bottom:0; border-bottom:1px solid #edf1ee; }.section-heading h3 { margin-bottom:2px; font-size:15px; }.section-heading p { font-size:12px; }.section-heading > i { color:#73927e; }.stat-list,.trend-list { gap:12px; padding-top:15px; }.stat-row { grid-template-columns:minmax(65px,1fr) 2fr 30px; color:var(--ink-2); font-size:12px; }.stat-row strong,.trend-row strong { text-align:right; }.stat-bar { height:6px; background:#e6eee8; }.stat-bar i { background:var(--leaf); }.trend-row { grid-template-columns:66px 1fr 36px; color:var(--muted-2); font-size:12px; }.trend-row .stat-bar i { background:#739880; }.export-panel { min-height:auto !important; }.research-export { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding-top:14px; }.export-item { display:grid; grid-template-columns:43px 1fr 18px; align-items:center; gap:10px; padding:10px; border:1px solid #e3ebe5; border-radius:5px; background:#fbfcfb; color:var(--ink); text-align:left; }.export-item:hover { border-color:#a7c4b0; background:#f5faf6; }.export-item > b { display:grid; place-items:center; min-height:27px; border-radius:4px; background:#237a4b; color:#fff; font-size:9px; }.export-item:nth-child(2) > b { background:#527a9b; }.export-item span strong,.export-item span small { display:block; }.export-item span strong { font-size:12px; }.export-item span small { color:var(--muted-2); font-size:11px; }.export-item > i { color:#62836d; }
.toolbar { align-items:end; padding:16px 18px; margin-bottom:15px; border:1px solid var(--hair); border-radius:7px; background:#fff; box-shadow:0 9px 24px rgba(22,52,35,.06); }.filters { align-items:end; }.filters input,.filters select { min-height:39px; border-color:#c9d6cd; }.table-wrap { border-color:var(--hair); border-radius:7px; box-shadow:0 9px 24px rgba(22,52,35,.06); } th { padding:12px 16px; color:#697b70; background:#fbfcfb; font-size:11px; } td { padding:12px 16px; color:var(--ink-2); font-size:13px; }.image-grid { gap:13px; }.image-card { border-color:var(--hair); border-radius:7px; box-shadow:0 9px 24px rgba(22,52,35,.06); }.image-card img { transition:transform .2s ease; }.image-card:hover img { transform:scale(1.025); }.image-meta { padding:11px 12px; }.image-meta strong { font-size:12px; }.toast { border-radius:5px; background:var(--pine); }
@media (max-width:1040px) { .app-layout { grid-template-columns:208px minmax(0,1fr); }.metric-grid { grid-template-columns:1fr; }.metric { min-height:104px; }.view-panel,.topbar { padding-left:24px; padding-right:24px; }.research-export { grid-template-columns:1fr; } }
@media (max-width:740px) { .login-layout { grid-template-columns:1fr; }.login-aside { min-height:280px; padding:28px; }.login-aside-copy { margin:45px 0 0; }.login-aside-copy h1 { font-size:40px; }.access-note { display:none; }.login-panel { padding:30px 22px; }.app-layout { grid-template-columns:1fr; }.sidebar { position:sticky; top:0; z-index:4; flex-direction:row; align-items:center; min-height:auto; padding:11px 13px; }.sidebar-brand { padding:0; }.sidebar-brand em,.sidebar-footer,.nav-list > p { display:none; }.nav-list { display:flex; overflow:auto; margin:0 0 0 16px; }.nav-item { width:auto; min-height:34px; padding:7px 9px; white-space:nowrap; }.nav-item i { width:15px; }.topbar { align-items:flex-start; padding:16px; }.updated-at { display:none; }.view-panel { padding:21px 16px 30px; }.section-intro,.toolbar { align-items:flex-start; flex-direction:column; }.metric-grid,.analysis-grid { grid-template-columns:1fr; }.data-section.wide { grid-column:auto; }.toolbar,.filters,.export-actions { width:100%; }.filters { flex-wrap:wrap; }.filters input { flex:1 1 145px; }.research-export { grid-template-columns:1fr; }.live-badge { font-size:11px; } }

.password-field { position:relative; display:block; }
.password-field input { padding-right:44px; }
.input-icon { position:absolute; top:1px; right:1px; display:grid; place-items:center; width:40px; height:40px; border:0; background:transparent; color:var(--muted); }
.field-label { display:grid; gap:4px; color:var(--muted); font-size:11px; }
.table-caption { display:flex; justify-content:space-between; margin:0 2px 8px; color:var(--muted); font-size:12px; }
.status { display:inline-flex; align-items:center; gap:5px; color:var(--leaf); font-size:12px; }.status:before { width:6px; height:6px; border-radius:50%; background:currentColor; content:""; }
.image-meta-row { display:flex; align-items:center; justify-content:space-between; gap:7px; margin-top:4px; }.image-meta-row a { color:var(--water); font-size:12px; text-decoration:none; }
.live-badge.loading b { background:var(--sand); }
.user-row { cursor:pointer; }
.user-row td:first-child { color:var(--pine-2); font-weight:700; }
.user-row:hover td { background:#edf6ef; }
.export-modal { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px; background:rgba(17,39,29,.42); }
.export-dialog { width:min(100%,460px); padding:22px; border:1px solid var(--hair); border-radius:7px; background:#fff; box-shadow:0 20px 52px rgba(13,35,24,.25); }
.export-dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }.export-dialog-heading .eyebrow { margin:0 0 4px; }.export-dialog-heading h3 { font-size:18px; }
.export-option { display:flex; align-items:flex-start; gap:11px; padding:13px 2px; border-top:1px solid #e7eee9; cursor:pointer; }.export-option input { width:16px; height:16px; margin-top:2px; accent-color:var(--leaf); }.export-option strong,.export-option small { display:block; }.export-option strong { font-size:13px; }.export-option small { margin-top:2px; color:var(--muted-2); font-size:12px; }
.export-dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:12px; }.export-dialog-actions button { min-width:88px; }
@media (min-width:741px) {
  html, body { height:100%; overflow:hidden; }
  .app-layout { height:100vh; min-height:0; overflow:hidden; }
  .sidebar { height:100vh; min-height:0; overflow:hidden; }
  .workspace { height:100vh; min-height:0; overflow-x:hidden; overflow-y:auto; }
}
@media (max-width:740px) { .table-caption { align-items:flex-start; flex-direction:column; gap:3px; } }