:root { --ink:#1d2939; --muted:#7b8799; --line:#e8ecf2; --paper:#fff; --canvas:#f5f7fb; --blue:#276ef1; --blue-soft:#edf3ff; --mint:#1aae87; --violet:#7b61ff; --amber:#ed9a1f; --shadow:0 12px 32px rgba(24,39,75,.07); }
* { box-sizing:border-box; } body { margin:0; background:var(--canvas); color:var(--ink); font:14px/1.5 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; } button,input,textarea,select { font:inherit; } button { cursor:pointer; }
.app-shell { display:flex; min-height:100vh; }.sidebar { width:248px; flex:0 0 248px; padding:24px 12px 16px; background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column; }.brand { display:flex; gap:11px; align-items:center; padding:0 12px 28px; }.brand-mark { display:grid; place-items:center; width:38px; height:38px; color:#fff; background:linear-gradient(145deg,#387bf5,#1854d8); border-radius:12px; box-shadow:0 8px 16px #276ef133; font-weight:800; font-size:20px; }.brand strong,.sidebar-foot strong { display:block; font-size:17px; letter-spacing:.03em; }.brand span,.sidebar-foot span { display:block; color:var(--muted); font-size:12px; }.back-link { color:#55708f; text-decoration:none; padding:10px 12px; border-radius:9px; background:#f5f8fd; font-size:13px; }.back-link:hover { background:#edf3ff; color:var(--blue); }.side-nav { padding-top:24px; }.nav-label { margin:0 12px 8px; color:#98a3b3; font-size:11px; font-weight:700; letter-spacing:.08em; }.nav-item { width:100%; display:flex; align-items:center; gap:11px; border:0; padding:11px 12px; color:#526174; background:transparent; text-align:left; border-radius:9px; font-weight:600; }.nav-item span { width:18px; color:#8f9bae; font-size:18px; text-align:center; }.nav-item:hover { background:#f5f7fb; }.nav-item.active { background:var(--blue-soft); color:var(--blue); }.nav-item.active span { color:var(--blue); }.sidebar-foot { display:flex; gap:10px; align-items:center; margin-top:auto; padding:16px 8px 0; border-top:1px solid var(--line); }.avatar,.profile-avatar { display:grid; place-items:center; flex:0 0 auto; width:35px; height:35px; border-radius:50%; color:#fff; font-weight:800; background:linear-gradient(135deg,#f2a968,#c7644b); }.sidebar-foot strong { font-size:13px; }.more-button { margin-left:auto; border:0; background:transparent; color:#8895a7; font-size:18px; }.workspace { min-width:0; flex:1; }.topbar { min-height:104px; padding:21px 40px; background:rgba(255,255,255,.94); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }.breadcrumb { margin:0 0 3px; color:#8a96a7; font-size:12px; }.breadcrumb span { padding:0 5px; }.breadcrumb strong { color:#667488; }.topbar h1 { margin:0; letter-spacing:-.03em; font-size:24px; }.top-actions { display:flex; align-items:center; gap:12px; }.icon-button,.help-button,.outline-button { border:1px solid var(--line); background:#fff; border-radius:9px; color:#64748b; }.icon-button { position:relative; width:38px; height:38px; font-size:20px; }.icon-button i { position:absolute; top:8px; right:8px; width:6px; height:6px; border-radius:50%; background:#f1505c; }.help-button,.outline-button { padding:8px 12px; }.page-content { max-width:1320px; padding:30px 40px 48px; margin:0 auto; }.overview-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }.metric-card,.panel { background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }.metric-card { min-height:118px; padding:20px; display:flex; gap:13px; align-items:flex-start; }.metric-icon { display:grid; place-items:center; width:38px; height:38px; font-size:19px; border-radius:11px; }.metric-icon.blue { color:var(--blue); background:#edf3ff; }.metric-icon.mint { color:var(--mint); background:#e8f8f3; }.metric-icon.violet { color:var(--violet); background:#f0edff; }.metric-icon.amber { color:#cc7c00; background:#fff6e5; }.metric-card p { margin:0; color:var(--muted); font-size:13px; }.metric-card strong { display:block; margin:3px 0; font-size:25px; letter-spacing:-.04em; }.metric-card small { color:#9ba4b0; font-size:11px; }.metric-card b { color:var(--mint); font-weight:600; }.content-panel { overflow:hidden; }.panel-heading { min-height:76px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }.tabs { display:flex; gap:25px; align-self:stretch; }.tab { position:relative; border:0; color:#8591a2; background:transparent; font-size:15px; font-weight:600; }.tab.active { color:var(--blue); }.tab.active:after { position:absolute; content:""; height:2px; right:0; bottom:0; left:0; border-radius:2px 2px 0 0; background:var(--blue); }.tab span { margin-left:3px; padding:1px 5px; border-radius:9px; color:#8090a6; background:#f2f4f7; font-size:11px; }.tab.active span { color:var(--blue); background:#e9f1ff; }.primary-button { border:0; border-radius:9px; padding:10px 15px; color:#fff; background:var(--blue); box-shadow:0 6px 14px #276ef12b; font-weight:700; }.primary-button:hover { background:#1559dd; }.toolbar { padding:18px 20px 12px; display:flex; justify-content:space-between; gap:18px; align-items:center; }.search-box { width:275px; display:flex; align-items:center; gap:7px; padding:0 10px; color:#95a0b0; border:1px solid var(--line); border-radius:8px; background:#fafbfc; }.search-box input { flex:1; min-width:0; height:37px; border:0; outline:0; color:var(--ink); background:transparent; }.search-box button { border:0; color:#a0a9b5; background:transparent; font-size:20px; }.filter-group { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }.filter { padding:6px 12px; border:1px solid var(--line); border-radius:99px; color:#6d7c8f; background:#fff; font-size:12px; }.filter.active { color:var(--blue); border-color:#bfd4ff; background:var(--blue-soft); font-weight:700; }.content-list { padding:0 20px 20px; display:grid; gap:11px; }.project-card { display:grid; grid-template-columns:52px minmax(180px,1fr) 170px 144px 95px; gap:15px; align-items:center; padding:13px; border:1px solid #e9edf3; border-radius:11px; background:#fff; transition:transform .18s,box-shadow .18s; }.project-card:hover { box-shadow:0 10px 22px rgba(24,39,75,.07); transform:translateY(-1px); }.cover { display:grid; place-items:center; width:52px; height:52px; overflow:hidden; border-radius:9px; font-size:20px; font-weight:800; }.cover.blue { color:#2864b7; background:linear-gradient(135deg,#bfe1ff,#eff7ff); }.cover.orange { color:#b85524; background:linear-gradient(135deg,#ffca9c,#fff0dc); }.cover.green { color:#177b57; background:linear-gradient(135deg,#c1f0db,#ecfff7); }.cover.violet { color:#6a48bb; background:linear-gradient(135deg,#d9cdff,#f5f1ff); }.project-title { min-width:0; }.project-title h3 { overflow:hidden; margin:0 0 3px; font-size:15px; white-space:nowrap; text-overflow:ellipsis; }.project-title p { overflow:hidden; margin:0; color:#8490a1; font-size:12px; white-space:nowrap; text-overflow:ellipsis; }.scope-row,.stats { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }.scope { padding:3px 7px; color:#188165; background:#e9f9f3; border-radius:5px; font-size:11px; }.scope.restricted { color:#386ec1; background:#edf4ff; }.scope.draft { color:#737f90; background:#f1f3f5; }.review-note { display:block; margin-top:5px; color:#ce8106; font-size:11px; }.stats { color:#8693a4; font-size:12px; gap:12px; }.status-button { border:0; padding:6px 8px; border-radius:99px; background:#eaf8f2; color:#178462; font-size:11px; font-weight:700; }.status-button.review { color:#c98008; background:#fff5e2; }.status-button.draft { color:#5380cb; background:#edf4ff; }.status-button.pause { color:#7d8794; background:#f0f2f4; }.set-button { justify-self:end; border:1px solid #cfe0ff; padding:6px 10px; border-radius:7px; color:var(--blue); background:#fff; font-size:12px; font-weight:700; }.set-button:hover { background:var(--blue-soft); }.empty-state { padding:50px 20px; text-align:center; color:#8490a1; }.empty-state span { display:grid; place-items:center; width:44px; height:44px; margin:0 auto 8px; color:#a8b3c1; background:#f4f6fa; border-radius:50%; font-size:23px; }.empty-state h2 { margin:0; color:#526175; font-size:16px; }.empty-state p { margin:4px 0 0; font-size:13px; }.secondary-page { display:grid; gap:20px; }.profile-card,.section-intro { display:flex; align-items:center; gap:17px; padding:28px; }.profile-avatar { width:68px; height:68px; font-size:24px; }.profile-card h2,.section-intro h2,.info-block h2,.settings-card h3 { margin:0; }.profile-card p,.section-intro p,.feature-card p,.settings-card p { margin:5px 0 0; color:var(--muted); }.profile-card .outline-button { margin-left:auto; }.tag-row { display:flex; gap:6px; margin-top:11px; }.tag-row span { padding:3px 8px; border-radius:99px; color:#486d9f; background:#f0f5fc; font-size:12px; }.info-block { padding:25px 28px; }.info-block dl { display:grid; grid-template-columns:repeat(3,1fr); margin:20px 0 0; }.info-block dl div { border-right:1px solid var(--line); padding:0 26px; }.info-block dl div:first-child { padding-left:0; }.info-block dl div:last-child { border-right:0; }.info-block dt { color:#8995a5; font-size:12px; }.info-block dd { margin:5px 0 0; font-weight:600; }.section-icon { display:grid; place-items:center; width:44px; height:44px; color:var(--blue); background:var(--blue-soft); border-radius:12px; font-size:22px; }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.feature-card { padding:24px; }.feature-card>span { color:var(--blue); font-size:22px; }.feature-card h3 { margin:13px 0 0; }.feature-card button { margin-top:18px; border:0; padding:0; color:var(--blue); background:transparent; font-weight:700; }.settings-card { display:flex; align-items:center; justify-content:space-between; padding:24px 26px; }.settings-card.stacked { display:block; }.switch { position:relative; width:46px; height:26px; }.switch input { position:absolute; opacity:0; }.switch span { position:absolute; inset:0; border-radius:99px; background:#c9d0da; transition:.2s; }.switch span:after { position:absolute; content:""; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0003; transition:.2s; }.switch input:checked + span { background:var(--blue); }.switch input:checked + span:after { transform:translateX(20px); }.segmented { display:flex; width:max-content; max-width:100%; overflow:auto; margin:16px 0 10px; padding:3px; border-radius:9px; background:#f2f5f9; }.segmented button { border:0; padding:7px 12px; border-radius:7px; color:#718095; background:transparent; white-space:nowrap; }.segmented button.active { color:var(--ink); background:#fff; box-shadow:0 1px 3px #00000012; font-weight:700; }
.project-dialog { width:min(480px,calc(100vw - 32px)); padding:0; border:0; border-radius:16px; box-shadow:0 24px 70px #1720343d; }.project-dialog::backdrop { background:#15213c77; backdrop-filter:blur(2px); }.project-dialog form { display:grid; gap:15px; padding:24px; }.dialog-head { display:flex; justify-content:space-between; align-items:flex-start; }.dialog-head p { margin:0; color:var(--blue); font-size:12px; font-weight:700; }.dialog-head h2 { margin:3px 0 0; }.close-button { border:0; background:transparent; color:#778497; font-size:24px; }.project-dialog label { display:grid; gap:6px; color:#526174; font-size:13px; font-weight:600; }.project-dialog input[type="text"],.project-dialog input:not([type]),.project-dialog select,.project-dialog textarea { width:100%; padding:10px; border:1px solid #dce2eb; border-radius:8px; outline-color:var(--blue); color:var(--ink); background:#fff; }.project-dialog textarea { min-height:77px; resize:vertical; }.radio-row { display:flex; gap:18px; }.radio-row label { display:flex; align-items:center; gap:5px; font-weight:400; }.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:5px; }.text-button { border:0; padding:9px 14px; color:#64748b; background:transparent; }.toast { position:fixed; z-index:10; bottom:26px; left:50%; max-width:calc(100vw - 40px); padding:11px 15px; border-radius:9px; color:#fff; background:#17243acc; box-shadow:0 10px 25px #0003; opacity:0; transform:translate(-50%,20px); pointer-events:none; transition:.2s; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:980px) { .sidebar { width:205px; flex-basis:205px; }.page-content,.topbar { padding-left:24px; padding-right:24px; }.overview-grid { grid-template-columns:repeat(2,1fr); }.project-card { grid-template-columns:52px minmax(160px,1fr) 125px 86px; }.stats { display:none; } }
@media (max-width:720px) { .app-shell { display:block; }.sidebar { width:100%; height:auto; padding:13px 16px; flex-direction:row; align-items:center; border-right:0; border-bottom:1px solid var(--line); }.brand { padding:0; }.brand-mark { width:34px; height:34px; font-size:17px; }.back-link,.side-nav,.sidebar-foot { display:none; }.topbar { min-height:82px; padding:17px 16px; }.topbar h1 { font-size:20px; }.help-button { display:none; }.page-content { padding:18px 16px 36px; }.overview-grid { gap:10px; }.metric-card { min-height:100px; padding:14px; }.metric-card strong { font-size:21px; }.metric-icon { display:none; }.panel-heading { min-height:64px; padding:0 14px; }.tabs { gap:16px; }.tab { font-size:13px; }.tab span { display:none; }.primary-button { padding:9px 11px; font-size:12px; }.toolbar { display:grid; padding:13px 14px 8px; }.search-box { width:100%; }.filter-group { justify-content:flex-start; flex-wrap:nowrap; overflow:auto; padding-bottom:4px; }.content-list { padding:0 14px 14px; }.project-card { grid-template-columns:48px minmax(0,1fr) auto; gap:10px; }.cover { width:48px; height:48px; }.project-title p { display:none; }.project-card .scope-row { grid-column:2 / 4; }.project-card .stats { display:none; }.set-button { grid-column:3; grid-row:1; padding:5px 7px; font-size:11px; }.status-button { display:none; }.profile-card,.section-intro { padding:20px; }.profile-card { flex-wrap:wrap; }.profile-card .outline-button { margin-left:0; }.info-block { padding:20px; }.info-block dl { grid-template-columns:1fr; gap:15px; }.info-block dl div { padding:0; border:0; }.feature-grid { grid-template-columns:1fr; }.settings-card { padding:20px; } }

/* Live-data and authentication additions. */
.auth-screen { display:grid; place-items:center; min-height:100vh; padding:28px; background:radial-gradient(circle at 18% 18%,#dce9ff 0,transparent 28%),radial-gradient(circle at 82% 75%,#e6f8f2 0,transparent 25%),#f7f9fc; }.auth-brand { position:fixed; top:30px; left:40px; display:flex; align-items:center; gap:10px; }.auth-brand .brand-mark { width:38px; height:38px; }.auth-brand strong { display:block; font-size:17px; }.auth-brand span { display:block; color:var(--muted); font-size:12px; }.auth-card { width:min(430px,100%); padding:32px; border:1px solid #e6ebf2; border-radius:18px; background:#fff; box-shadow:0 24px 60px rgba(24,39,75,.10); }.auth-heading p { margin:0; color:var(--blue); font-size:12px; font-weight:800; }.auth-heading h1 { margin:4px 0; letter-spacing:-.04em; font-size:26px; }.auth-heading span { color:var(--muted); font-size:13px; }.auth-tabs { display:flex; gap:20px; margin-top:28px; border-bottom:1px solid var(--line); }.auth-tab { position:relative; border:0; padding:0 2px 10px; color:#8591a2; background:transparent; font-weight:700; }.auth-tab.active { color:var(--blue); }.auth-tab.active:after { position:absolute; right:0; bottom:-1px; left:0; height:2px; background:var(--blue); content:""; }.auth-form { display:grid; gap:15px; margin-top:21px; }.auth-form label { display:grid; gap:6px; color:#526174; font-size:13px; font-weight:600; }.auth-form input { width:100%; height:42px; padding:0 11px; border:1px solid #dce2eb; border-radius:8px; outline-color:var(--blue); color:var(--ink); }.auth-submit { margin-top:4px; min-height:42px; }.code-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:end; }.code-row .outline-button { height:42px; white-space:nowrap; }.auth-message { min-height:20px; margin:13px 0 0; color:#d45050; font-size:12px; }.auth-message.success { color:#178462; }.auth-note { margin:8px 0 0; color:#96a1af; font-size:11px; line-height:1.7; }.config-warning { position:fixed; bottom:22px; width:min(720px,calc(100% - 48px)); padding:11px 14px; border:1px solid #f2d59e; border-radius:9px; color:#976112; background:#fffaf0; text-align:center; font-size:12px; }.config-warning code { padding:1px 4px; border-radius:3px; background:#f4e8cc; }.refresh-button { border:1px solid #cfe0ff; padding:8px 11px; border-radius:9px; color:var(--blue); background:#fff; font-weight:700; }.refresh-button:disabled { opacity:.55; cursor:wait; }.data-banner { margin-bottom:16px; padding:10px 13px; border:1px solid #eed5a4; border-radius:9px; color:#956111; background:#fff8e9; font-size:13px; }.data-banner.error { border-color:#f3c2c2; color:#b83a3a; background:#fff3f3; }.project-dialog input[type="file"] { width:100%; padding:10px; border:1px solid #dce2eb; border-radius:8px; background:#fff; }.project-dialog label small { color:#9aa5b4; font-size:11px; font-weight:400; }.dialog-tip { margin:0; padding:9px 11px; border-radius:7px; color:#76653d; background:#fff8e8; font-size:12px; }
@media (max-width:720px) { .auth-screen { padding:20px; }.auth-brand { position:static; margin-bottom:25px; }.auth-card { padding:25px 21px; }.refresh-button { font-size:0; }.refresh-button:first-letter { font-size:17px; } }

/* Author styles such as display:grid must never override semantic hidden state. */
[hidden] { display: none !important; }