:root {
    --canvas: #f4f6f8;
    --surface: #ffffff;
    --surface-muted: #f8fafc;
    --ink: #101828;
    --muted: #667085;
    --line: #e4e7ec;
    --line-strong: #d0d5dd;
    --accent: #175cd3;
    --accent-hover: #1849a9;
    --accent-soft: #eff8ff;
    --success: #079455;
    --warning: #dc6803;
    --danger: #d92d20;
    --sidebar: #101828;
    --sidebar-muted: #98a2b3;
    --sidebar-hover: #1d2939;
    --radius: 14px;
    --control-radius: 9px;
    --shadow: 0 5px 18px rgb(16 24 40 / 7%);
    --shadow-hover: 0 12px 28px rgb(16 24 40 / 10%);
    --font: "Aptos", "Segoe UI Variable", "PingFang SC", "Microsoft YaHei", sans-serif;
}

html { background: var(--canvas); }
body { color: var(--ink); font-family: var(--font); background: radial-gradient(circle at 92% -10%, rgb(23 92 211 / 7%), transparent 32rem), var(--canvas); }
body:not(.auth-page) { min-height: 100vh; margin-left: 240px; padding: 92px 32px 56px; transition: margin-left 180ms ease; }
.ui-icon { display: block; flex: 0 0 auto; }
.skip-link { position: fixed; top: 8px; left: 252px; z-index: 200; transform: translateY(-160%); padding: 9px 14px; border-radius: 8px; color: #fff; background: var(--accent); text-decoration: none; }
.skip-link:focus { transform: translateY(0); }
.content-anchor { position: absolute; width: 1px; height: 1px; overflow: hidden; }

.workspace-nav {
    position: fixed; inset: 0 auto 0 0; z-index: 90; width: 240px; height: 100vh; min-height: 0; margin: 0; padding: 0 10px 14px;
    display: flex; flex-direction: column; align-items: stretch; gap: 0; overflow-y: auto;
    border: 0; border-right: 1px solid rgb(255 255 255 / 6%);
    color: #fff; background: radial-gradient(circle at 0 0, rgb(23 92 211 / 24%), transparent 18rem), var(--sidebar);
    box-shadow: 8px 0 24px rgb(16 24 40 / 8%);
}
.workspace-nav a { text-decoration: none; }
.workspace-nav .workspace-brand { min-height: 76px; padding: 17px 8px; display: flex; align-items: center; gap: 12px; color: #fff; }
.workspace-nav .brand-mark { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgb(255 255 255 / 18%); border-radius: 11px; color: #fff; background: linear-gradient(145deg, #2970ff, var(--accent)); box-shadow: 0 8px 20px rgb(23 92 211 / 34%); }
.workspace-nav .brand-name, .workspace-nav .brand-caption { display: block; }
.workspace-nav .brand-name { font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.workspace-nav .brand-caption { margin: 2px 0 0; padding: 0; border: 0; color: var(--sidebar-muted); font-size: 11px; font-weight: 400; }
.workspace-links { order: 1; display: flex; flex-direction: column; gap: 4px; width: 100%; }
.nav-group-label { display: block; padding: 18px 12px 7px; color: #667085; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.workspace-links a, .workspace-nav-footer > a { min-height: 44px; padding: 0 12px; display: flex; align-items: center; gap: 11px; border-radius: 9px; color: var(--sidebar-muted); font-size: 13px; font-weight: 550; }
.workspace-links a:hover, .workspace-nav-footer > a:hover { color: #fff; background: var(--sidebar-hover); }
.workspace-links a[aria-current] { color: #fff; background: var(--accent); box-shadow: 0 7px 18px rgb(23 92 211 / 22%); }
.workspace-links .ui-icon, .workspace-nav-footer .ui-icon { width: 18px; height: 18px; }
.workspace-nav-footer { order: 2; margin-top: auto; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / 7%); }
.workspace-nav-footer > a { margin-top: 3px; }
.workspace-nav-footer > a .ui-icon:last-child { width: 14px; height: 14px; margin-left: auto; }
.workspace-note { margin: 0 4px 12px; padding: 13px 12px; border: 1px solid rgb(255 255 255 / 7%); border-radius: 10px; background: rgb(255 255 255 / 3%); }
.workspace-note .nav-group-label { padding: 0; color: #b2ddff; }
.workspace-note p { margin: 5px 0 0; color: #98a2b3; font-size: 11px; line-height: 1.45; }

.workspace-topbar { position: fixed; inset: 0 0 auto 240px; z-index: 80; height: 64px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / 90%); box-shadow: 0 1px 0 rgb(16 24 40 / 2%); backdrop-filter: blur(14px); }
.topbar-location, .workspace-account { display: flex; align-items: center; min-width: 0; }
.topbar-location { gap: 9px; font-size: 13px; }
.topbar-home { color: var(--muted); }
.topbar-separator { color: #d0d5dd; }
.topbar-current { color: var(--ink); font-weight: 650; }
.workspace-account { margin: 0; gap: 10px; color: var(--muted); font-size: 12px; }
.account-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); font-weight: 700; }
.menu-toggle { display: none; width: 38px; height: 38px; padding: 0; border: 0; place-items: center; border-radius: 9px; color: #475467; background: transparent; }
.nav-backdrop { position: fixed; inset: 0; z-index: 85; background: rgb(16 24 40 / 48%); backdrop-filter: blur(2px); }

body > .container, body > .header, body > h1, body > .page-heading, body > .cards-container,
body > .charts-container, body > .labels-section, body > .section-index { max-width: 1560px; }
body > .container { max-width: 1560px; }
.page-heading { min-height: 58px; align-items: flex-end; margin-bottom: 20px; }
.page-heading > div:first-child, .monitor-heading > div:first-child { padding-left: 14px; border-left: 3px solid var(--accent); }
body h1, body .header h1 { color: var(--ink); font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.page-heading h1 { margin: 0 0 4px; }
.page-heading p, .page-subtitle { color: var(--muted); font-size: 13px; }
.updated-at { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgb(255 255 255 / 72%); }

body .cards-container, body .stats-cards { gap: 14px; border: 0; border-radius: 0; overflow: visible; background: transparent; }
body .card, body .stat-card { position: relative; padding: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
body .cards-container > .card + .card, body .stats-cards > .stat-card + .stat-card { border-left: 1px solid var(--line); }
body .card::before, body .stat-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ""; background: var(--accent); opacity: .8; }
body .card h2, body .stat-card h2 { color: var(--muted); font-size: 12px; font-weight: 550; }
body .card p, body .stat-card p { color: var(--ink); font-size: 28px; font-weight: 700; }
body #statsCards.cards-container > .card { border-bottom: 1px solid var(--line); }
body #statsCards.cards-container > .card:nth-child(4n+1) { border-left: 1px solid var(--line); }
.metric-unit { color: var(--muted); }

body .chart, body .label-category, body .details-card, body .section, body .filter-container, body .results-container, body .tours-container, body .projects-section { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
body .chart, body .label-category { transition: transform 160ms ease, box-shadow 160ms ease; }
@media (hover: hover) { body .chart:hover, body .label-category:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); } }
body .chart { padding: 14px; }
body .label-category { padding: 20px 22px 12px; }
body .label-category h3, body .details-card h3 { font-weight: 650; }
.section-index { gap: 8px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgb(16 24 40 / 4%); }
.section-index a { padding: 7px 11px; border-radius: 7px; }
.section-index a:hover { background: var(--accent-soft); }
body .sort-btn { border-radius: 7px; }

body .filter-container { padding: 22px 24px 18px; }
body .filter-group label { color: #475467; font-weight: 550; }
body .filter-group input, body .filter-group select, body #pageSize { height: 40px; border-color: var(--line-strong); border-radius: var(--control-radius); background: var(--surface); box-shadow: 0 1px 2px rgb(16 24 40 / 4%); }
body .filter-group input:hover, body .filter-group select:hover { border-color: #84adff; }
body .filter-group input:focus, body .filter-group select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(23 92 211 / 10%); }
.advanced-filters summary { padding: 8px 11px; border-radius: 7px; color: var(--accent); font-weight: 600; }
.advanced-filters summary:hover { background: var(--accent-soft); }
body .filter-actions { border-top-color: var(--line); }
body .btn, body .table-btn, body .pagination button { min-height: 38px; padding: 8px 14px; border-color: var(--line-strong); border-radius: var(--control-radius); color: #344054; background: #fff; box-shadow: 0 1px 2px rgb(16 24 40 / 4%); font-weight: 600; transition: color 140ms ease, border-color 140ms ease, background 140ms ease, transform 140ms ease; }
body .btn:hover, body .table-btn:hover, body .pagination button:hover:not(:disabled) { border-color: #84adff; color: var(--accent); background: var(--accent-soft); filter: none; }
body .btn-primary { border-color: var(--accent); color: #fff; background: var(--accent); box-shadow: 0 4px 10px rgb(23 92 211 / 18%); }
body .btn-primary:hover { border-color: var(--accent-hover); color: #fff; background: var(--accent-hover); }
body button:active:not(:disabled) { transform: translateY(1px); }

body .results-container { overflow: hidden; }
body .results-header { padding: 17px 20px; background: #fff; }
body th { padding-top: 12px; padding-bottom: 12px; color: #475467; background: var(--surface-muted); font-weight: 650; letter-spacing: .01em; }
body td { color: #344054; }
body tbody tr { transition: background 120ms ease; }
body tbody tr:hover { background: #f8fbff; }
body .project-name, body .project-link { color: var(--ink); font-weight: 600; }
body .project-name:hover, body .project-link:hover { color: var(--accent); }
body .status { padding: 3px 8px; border-radius: 999px; font-weight: 600; }
body .status-on_sale { color: #067647; background: #ecfdf3; }
body .status-sold_out { color: #b54708; background: #fffaeb; }
body .status-停售 { color: #475467; background: #f2f4f7; }
body .pagination { background: #fff; }

body .details-card { padding: 22px; }
body .detail-item { border-color: #f2f4f7; }
body .tag-value { border-radius: 999px; color: #344054; background: #f2f4f7; }
body .tour-item { transition: background 130ms ease; }
body .tour-item:hover { background: #f8fbff; }
body .tours-header { color: #475467; background: var(--surface-muted); font-weight: 650; }
body .sql-editor { border-color: var(--line-strong); border-radius: var(--control-radius); background: #fcfcfd; }
body .sql-editor:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(23 92 211 / 10%); }

body .ai-button { min-height: 42px; padding: 0 17px; border-color: #84adff; border-radius: 11px; color: #fff; background: var(--accent); box-shadow: 0 8px 22px rgb(23 92 211 / 24%); font-weight: 650; }
body .ai-button::before { margin-right: 7px; content: "✦"; }
body .ai-button:hover { color: #fff; background: var(--accent-hover); box-shadow: 0 10px 24px rgb(23 92 211 / 28%); }
body .ai-modal { background: rgb(16 24 40 / 52%); backdrop-filter: blur(3px); }
body .ai-modal-content { border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 64px rgb(16 24 40 / 20%); }
body .ai-send-btn { background: var(--accent); }
body .ai-result { background: var(--surface-muted); }

body.auth-page { position: relative; isolation: isolate; min-height: 100vh; padding: 24px; background: radial-gradient(circle at 18% 18%, rgb(41 112 255 / 22%), transparent 24rem), radial-gradient(circle at 86% 82%, rgb(23 92 211 / 14%), transparent 26rem), #101828; }
body.auth-page::before { position: fixed; inset: 0; z-index: -1; content: ""; opacity: .1; background-image: linear-gradient(rgb(255 255 255 / 35%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 35%) 1px, transparent 1px); background-size: 32px 32px; }
body.auth-page .login-card, body.auth-page > .card { width: min(420px, 100%); padding: 38px; border: 1px solid rgb(255 255 255 / 70%); border-radius: 16px; background: rgb(255 255 255 / 96%); box-shadow: 0 24px 70px rgb(0 0 0 / 26%); }
body.auth-page .workspace-brand { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 700; }
body.auth-page .brand-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(145deg, #2970ff, var(--accent)); box-shadow: 0 8px 20px rgb(23 92 211 / 28%); }
body.auth-page h1 { margin: 26px 0 24px; color: var(--ink); font-size: 22px; }
body.auth-page label { color: #344054; font-weight: 550; }
body.auth-page input { height: 42px; border-color: var(--line-strong); border-radius: var(--control-radius); }
body.auth-page input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(23 92 211 / 10%); }
body.auth-page button { height: 42px; border-radius: var(--control-radius); background: var(--accent); font-weight: 650; box-shadow: 0 4px 10px rgb(23 92 211 / 18%); }
body.auth-page button:hover { background: var(--accent-hover); }
body.auth-page .status { border: 1px solid var(--line); color: #475467; background: var(--surface-muted); }
body.auth-page .status.expired { border-color: #fedf89; color: #b54708; background: #fffaeb; }
body.auth-page .error { color: #b42318; background: #fef3f2; }

@keyframes content-in { from { opacity: 0; } to { opacity: 1; } }
body:not(.auth-page) > :not(.workspace-nav):not(.workspace-topbar):not(.nav-backdrop):not(.skip-link):not(.content-anchor) { animation: content-in 260ms ease both; }

@media (max-width: 1100px) {
    body:not(.auth-page) { margin-left: 80px; }
    .workspace-nav { width: 80px; padding-inline: 10px; overflow: visible; }
    .workspace-nav .workspace-brand { justify-content: center; padding-inline: 0; }
    .workspace-nav .workspace-brand > span:last-child, .workspace-links a span, .workspace-nav-footer > a span, .nav-group-label, .workspace-note { display: none; }
    .workspace-links a, .workspace-nav-footer > a { justify-content: center; padding: 0; }
    .workspace-links .ui-icon, .workspace-nav-footer .ui-icon { width: 20px; height: 20px; }
    .workspace-nav-footer > a .ui-icon:last-child { display: none; }
    .workspace-topbar { left: 80px; }
}

@media (max-width: 760px) {
    body:not(.auth-page) { margin-left: 0; padding: 84px 16px 76px; }
    .workspace-nav { width: min(280px, 86vw); padding-inline: 10px; transform: translateX(-105%); transition: transform 180ms ease; overflow-y: auto; }
    body.nav-open { overflow: hidden; }
    body.nav-open .workspace-nav { transform: translateX(0); }
    .workspace-nav .workspace-brand { justify-content: flex-start; padding-inline: 8px; }
    .workspace-nav .workspace-brand > span:last-child, .workspace-links a span, .workspace-nav-footer > a span, .nav-group-label { display: block; }
    .workspace-links a, .workspace-nav-footer > a { justify-content: flex-start; padding-inline: 12px; }
    .workspace-note { display: block; }
    .workspace-topbar { left: 0; height: 60px; padding: 0 16px; }
    .menu-toggle { display: grid; }
    .topbar-home, .topbar-separator, .account-role { display: none; }
    .nav-backdrop:not([hidden]) { display: block; }
    .page-heading { align-items: flex-start; }
    body .cards-container, body .stats-cards { gap: 10px; }
    body .cards-container > .card:nth-child(even), body .stats-cards > .stat-card:nth-child(even), body .cards-container > .card:nth-child(n), body .stats-cards > .stat-card { border-left: 1px solid var(--line); }
    body .filter-container { padding: 16px; }
}

@media (max-width: 520px) {
    body .cards-container, body .stats-cards, body #statsCards.cards-container { grid-template-columns: 1fr; }
    body .filter-row, .search-primary { grid-template-columns: 1fr; }
    .search-primary > :first-child { grid-column: auto; }
    body .card, body .stat-card { padding: 17px 18px; }
    .export-actions { flex-direction: column; }
    .export-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.auth-page) > :not(.workspace-nav):not(.workspace-topbar) { animation: none; }
}