.workspace, .entry-page { --ink:#203730; --green:#225d4c; --subtle:#78847d; --line:#e6eae5; color:var(--ink); font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif; background:#f6f7f3; font-size:14px; line-height:1.5; }
.workspace *, .entry-page * { box-sizing:border-box; }
.workspace [hidden] { display:none!important; }
.workspace a, .entry-page a { color:inherit; text-decoration:none; }
.workspace button, .workspace input, .workspace select, .entry-page button, .entry-page input { font:inherit; }
.workspace button, .workspace a, .entry-page button { transition:background .15s,color .15s,box-shadow .15s; }
.workspace :focus-visible, .entry-page :focus-visible { outline:3px solid #8cbaa6; outline-offset:3px; }
.ui-icon { width:21px; height:21px; flex:none; }
.workspace { display:flex; min-height:100vh; }
.workspace-sidebar { width:230px; position:fixed; top:0; bottom:0; display:flex; flex-direction:column; background:#fcfdfb; border-right:1px solid var(--line); padding:32px 20px 20px; z-index:5; }
.workspace-brand { display:flex; align-items:center; gap:11px; font-size:16px; font-weight:700; letter-spacing:.03em; }
.brand-mark { display:grid; place-items:center; width:39px; height:43px; background:var(--green); color:#fff; border-radius:12px 12px 12px 3px; font-size:21px; font-weight:600; flex:none; }
.workspace-brand small { display:block; font-size:10px; color:var(--subtle); letter-spacing:.06em; margin-top:4px; font-weight:400; }
.nav-caption { font-size:10px; letter-spacing:.16em; color:#8c968d; margin:52px 14px 12px; }
.workspace-nav { display:grid; gap:7px; }
.workspace-nav a { display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:8px; color:#63766c; }
.workspace-nav a:hover { background:#f0f3ed; }
.workspace-nav a[aria-current] { color:#245941; background:#e9efe4; font-weight:650; }
.sidebar-note { margin:auto 10px 24px; padding-top:30px; font-size:12px; color:#476455; }
.sidebar-note p { font-size:11px; color:#869287; margin:9px 0 0; line-height:1.8; }
.small-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#4e8662; margin-right:7px; vertical-align:middle; }
.sidebar-account { border-top:1px solid var(--line); padding-top:20px; display:flex; gap:10px; align-items:center; }
.account-avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#e8ecdf; color:#5d7057; }
.sidebar-account strong { font-size:12px; }.sidebar-account small { display:block; font-size:10px; color:#869087; }
.sidebar-account form { margin-left:auto; }.sidebar-account button { background:transparent; color:#78867c; padding:7px; display:flex; }.sidebar-account button:hover { background:#eef1eb; }
.workspace-body { margin-left:230px; min-width:0; flex:1; }
.workspace-top { height:73px; padding:0 42px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; font-size:12px; color:#7b877e; background:rgba(252,253,251,.7); }
.crumb-slash { padding:0 15px; color:#b6bdb4; }.term-chip { border:1px solid #dfe5dc; padding:6px 13px; border-radius:6px; background:#fff; color:#53675c; }
.workspace-main { max-width:1520px; margin:auto; padding:38px 42px 22px; }
.workspace-title { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:30px; }
.overline { font-size:10px; letter-spacing:.13em; color:#81917f; margin:0 0 9px; }
.workspace-title h1 { font-size:29px; font-weight:650; letter-spacing:-.04em; margin:0 0 9px; }
.workspace-title p:last-child { margin:0; color:#7a877b; font-size:12px; }
.workspace-label { font-size:11px; color:#81917e; white-space:nowrap; border-left:1px solid #d5ddd0; padding-left:15px; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:26px; }
.metric { background:white; padding:20px 22px; border:1px solid var(--line); border-radius:12px; position:relative; }
.metric > span, .metric-label > span:first-child { font-size:12px; color:#7a857c; }
.metric > div:not(.metric-label) { display:flex; gap:8px; align-items:baseline; margin:9px 0 10px; }
.metric strong { font-size:35px; line-height:1.2; letter-spacing:-.04em; font-weight:600; font-variant-numeric:tabular-nums; }
.metric div > span:not(.medal) { font-size:12px; }.metric small { font-size:10px; color:#879083; }
.metric-label { display:flex; align-items:center; justify-content:space-between; height:18px; }
.medal { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:9px; background:#f9f1dc; color:#ab8642; }
.medal-2 { color:#829598; background:#edf2f3; }.medal-3 { color:#b18568; background:#f7eee7; }
.metric-overview { color:#fff; background:#245342; border-color:#245342; }
.metric-overview > span, .metric-overview small { color:#c6d4bd; }
.work-panel { background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 3px 12px #26452d03; }
.panel-title { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:22px 24px; }
.panel-title h2 { font-size:17px; font-weight:650; letter-spacing:-.02em; }.panel-title p { font-size:11px; color:#899187; margin:5px 0 0; }
.status-pill { padding:5px 10px; border-radius:5px; color:#527355; font-size:10px; background:#f0f5ec; white-space:nowrap; }
.roster-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:0 24px 20px; }
.segmented { display:flex; gap:3px; padding:4px; background:#f4f5f0; border-radius:7px; }
.segmented button { color:#7c867a; padding:7px 15px; background:transparent; font-size:12px; font-weight:500; border-radius:5px; white-space:nowrap; }
.segmented button[aria-pressed="true"] { color:#2b6048; background:#fff; box-shadow:0 1px 4px #223e2415; font-weight:650; }.segmented button:hover { color:#2b6048; }
.search-field { margin-left:auto; display:flex; gap:9px; align-items:center; border:1px solid #e2e6df; border-radius:7px; padding:0 12px; height:37px; color:#8a9689; }
.search-field .ui-icon { width:16px; height:16px; }.search-field input { border:0; background:transparent; width:150px; min-width:0; color:var(--ink); font-size:12px; height:32px; }
.search-field:focus-within { border-color:#81a88e; }.search-field input:focus { outline:none; }
.workspace select, .grade-filters input { height:38px; border:1px solid #e0e6dc; border-radius:7px; padding:0 11px; color:#4f6557; background:#fff; min-width:0; }
.roster-toolbar select { font-size:12px; }
.roster-scroll { overflow:auto; max-width:100%; }
.roster-table { width:100%; min-width:720px; border-collapse:collapse; font-size:12px; }
.roster-table th, .roster-table td, .roster-table th:nth-child(n), .roster-table td:nth-child(n) { text-align:left; padding:14px 22px; border-bottom:1px solid #eef0eb; white-space:nowrap; }
.roster-table th { font-weight:500; font-size:11px; background:#f8faf6; color:#7e8b7b; padding-top:12px; padding-bottom:12px; }
.roster-table th.numeric, .roster-table td.numeric { text-align:right; font-variant-numeric:tabular-nums; }
.roster-table td strong { font-weight:600; font-size:13px; }.roster-table small { display:block; color:#929b8f; font-size:10px; font-weight:400; margin-top:3px; }
.roster-table tbody tr:hover { background:#fafcf8; }.roster-table tr:last-child td { border-bottom:0; }
.person { display:flex; gap:10px; align-items:center; }.person small { font-size:10px; letter-spacing:.035em; }
.avatar { flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#edf1e7; color:#78856b; font-size:12px; }
.roster-table tr:nth-child(3n+2) .avatar { background:#eef0e8; color:#83866a; }.roster-table tr:nth-child(3n) .avatar { background:#f3eee5; color:#a18a63; }
.level-badge { display:inline-block; border-radius:5px; color:#557160; background:#edf3ec; padding:4px 9px; font-size:10px; }
.level-1 { color:#a7823a; background:#faf2dd; }.level-2 { color:#72868d; background:#eff3f4; }.level-3 { color:#ae8769; background:#f7eee6; }
.selected-status { color:#497858; font-size:11px; }.muted { color:#a3aa9f; font-size:11px; }
.roster-footer { display:flex; justify-content:space-between; align-items:center; padding:16px 24px; border-top:1px solid var(--line); color:#84907f; font-size:11px; gap:12px; }
.roster-footer > div { display:flex; align-items:center; gap:13px; }.roster-footer button { border:1px solid #dfe4db; background:#fff; color:#53664f; font-size:11px; font-weight:500; padding:6px 11px; border-radius:5px; }.roster-footer button:hover { background:#f2f5ee; }.roster-footer button:disabled { opacity:.4; cursor:default; }
.roster-empty { text-align:center; padding:48px 20px; color:#74866f; }.roster-empty p { font-size:12px; margin:8px 0 20px; }.roster-empty button { padding:9px 16px; }
.rules-panel { border:1px solid var(--line); background:#f9faf6; border-radius:9px; margin-top:20px; padding:15px 20px; color:#73836b; font-size:12px; }
.rules-panel summary { display:flex; align-items:center; gap:9px; cursor:pointer; }.rules-panel summary span { margin-left:auto; font-size:10px; }.rules-panel .ui-icon { width:17px; height:17px; }.rules-panel > div { padding:15px 0 0; line-height:1.9; }.rules-panel p:last-child { margin-bottom:0; }
.workspace-foot { display:flex; justify-content:space-between; gap:10px; color:#a3ac9d; font-size:10px; padding-top:28px; }
.grade-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:18px; padding:0 24px 24px; }.grade-filters label { display:grid; gap:7px; font-size:11px; color:#788774; }.grade-filters input,.grade-filters select { width:100%; font-size:12px; }
.workspace .primary-action, .entry-page .primary-action { background:#275e49; color:white; border-radius:7px; padding:10px 20px; display:inline-block; text-align:center; font-size:12px; font-weight:600; }.workspace .primary-action:hover, .entry-page .primary-action:hover { background:#194733; }
.subtle-link { color:#537754!important; font-size:12px; }.subtle-link:hover { text-decoration:underline; }.grade-results { margin-top:22px; }.filter-error { margin:0 24px 24px; color:#ab413b; }
.blank-panel { padding:60px 24px; text-align:center; }.blank-panel .ui-icon { width:36px; height:36px; color:#8d9f7a; }.blank-panel h2 { margin:14px 0; }.blank-panel p { color:#87917f; }
.skip-link { position:fixed; top:-80px; left:250px; background:white; padding:10px; z-index:10; }.skip-link:focus { top:10px; }
.entry-page { min-height:100vh; padding:40px 6vw; display:flex; flex-direction:column; background:#f7f8f3; }
.entry-brand { display:flex; gap:10px; align-items:center; font-weight:650; font-size:16px; }
.entry-layout { width:min(100%,1120px); margin:auto; padding:50px 0; display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:100px; }
.entry-art { position:relative; padding:55px 45px; border-radius:22px; background:#214c3d; color:#f6f8ec; overflow:hidden; min-height:490px; display:flex; flex-direction:column; justify-content:center; }
.entry-art::after { content:""; position:absolute; width:360px; height:360px; border:1px solid #64856650; border-radius:50%; right:-200px; bottom:-150px; box-shadow:0 0 0 36px #64856610,0 0 0 74px #64856610,0 0 0 110px #64856610; pointer-events:none; }
.entry-art .overline { color:#b8c6a4; letter-spacing:.2em; }.entry-art h1 { font-size:43px; line-height:1.4; letter-spacing:-.035em; font-weight:550; margin:24px 0; }.entry-art h1 span { color:#c5d5ae; }
.entry-art > p { color:#c4d0be; font-size:13px; line-height:1.9; max-width:300px; }.entry-art-footer { margin-top:45px; display:flex; gap:14px; align-items:center; color:#acbd9e; font-size:10px; letter-spacing:.12em; }.entry-art-footer::before { content:""; width:32px; height:1px; background:#98ac83; }
.entry-form h2 { margin:0 0 10px; font-size:28px; letter-spacing:-.04em; }.entry-form > p { color:#8b9484; font-size:12px; margin-bottom:30px; }
.entry-form form { display:grid; gap:9px; }.entry-form label { color:#65755e; font-size:12px; margin-top:12px; }
.entry-form input { width:100%; border:1px solid #dce3d5; border-radius:8px; background:white; color:#254333; height:47px; padding:0 14px; font-size:14px; }.entry-form input::placeholder { color:#aab2a3; }.entry-form .primary-action { width:100%; margin-top:20px; height:46px; font-size:14px; }
.password-field { position:relative; }.password-field input { padding-right:64px; }.password-field button { position:absolute; right:6px; top:5px; height:37px; padding:0 12px; background:transparent; color:#819374; font-size:11px; }
.entry-divider { display:flex; gap:12px; align-items:center; color:#abb3a3; font-size:11px; margin:26px 0 20px; }.entry-divider::before,.entry-divider::after { content:""; flex:1; height:1px; background:#e1e6d9; }
.entry-form .demo-button { background:transparent; color:#738368; border:1px solid #dce3d5; height:44px; font-size:12px; font-weight:500; }.entry-form .demo-button:hover { background:#edf1e7; }.entry-privacy { font-size:10px!important; line-height:1.8; margin:22px 0 0!important; }
.entry-foot { display:flex; justify-content:space-between; font-size:10px; color:#9aa48e; }.entry-error { padding:10px; background:#faefed; color:#ac4940; border-radius:7px; font-size:12px; margin:8px 0 0; }
@media(min-width:1500px) { .workspace-main { padding-top:48px; }.metrics { gap:22px; } }
@media(max-width:1150px) { .workspace-sidebar { width:195px; padding-left:14px; padding-right:14px; }.workspace-brand { font-size:14px; }.workspace-body { margin-left:195px; }.workspace-main { padding:28px 24px; }.workspace-top { padding:0 24px; }.metrics { gap:10px; }.metric { padding:18px 14px; }.metric small { font-size:9px; }.search-field { margin-left:0; }.entry-layout { gap:50px; }.roster-table th,.roster-table td,.roster-table th:nth-child(n),.roster-table td:nth-child(n) { padding-left:16px; padding-right:16px; } }
@media(max-width:780px) { .workspace { display:block; }.workspace-sidebar { position:relative; width:100%; padding:16px 20px 0; border-right:0; border-bottom:1px solid var(--line); }.workspace-brand { font-size:15px; }.workspace-brand small { font-size:10px; }.brand-mark { width:32px; height:36px; font-size:18px; }.nav-caption,.sidebar-note { display:none; }.workspace-nav { display:flex; gap:4px; margin-top:17px; }.workspace-nav a { flex:1; padding:10px 7px; justify-content:center; gap:6px; font-size:12px; border-radius:7px 7px 0 0; }.workspace-nav .ui-icon { width:16px; height:16px; }.sidebar-account { position:absolute; top:16px; right:16px; border:0; padding:0; }.sidebar-account > div,.sidebar-account > span { display:none; }.workspace-body { margin-left:0; }.workspace-top { height:49px; padding:0 20px; font-size:10px; }.workspace-main { padding:24px 18px; }.workspace-title { margin-bottom:22px; }.workspace-title h1 { font-size:25px; }.workspace-title p:last-child { line-height:1.8; font-size:11px; }.workspace-label { display:none; }.metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:20px; }.metric { padding:16px; }.metric strong { font-size:29px; }.metric small { font-size:9px; }.panel-title { padding:18px 16px; }.panel-title h2 { font-size:16px; }.status-pill { font-size:9px; padding:4px 6px; }.panel-title p { font-size:10px; }.roster-toolbar { padding:0 16px 16px; gap:10px; }.segmented { width:100%; }.segmented button { flex:1; padding:7px 6px; }.search-field { flex:1; min-width:0; }.search-field input { width:100%; }.roster-toolbar select { max-width:100px; }.roster-table { min-width:670px; }.roster-table th:first-child,.roster-table td:first-child { position:sticky; left:0; background:#fff; z-index:1; box-shadow:2px 0 4px #23382006; }.roster-table th:first-child { background:#f8faf6; }.roster-footer { padding:14px 12px; font-size:10px; }.roster-footer > div { gap:7px; }.roster-footer button { padding:6px 8px; font-size:10px; }.grade-filters { grid-template-columns:repeat(2,minmax(0,1fr)); padding:0 16px 18px; gap:12px; }.grade-filters .primary-action { grid-column:1/-1; }.workspace-foot { font-size:9px; }.workspace-foot span { text-align:right; }.skip-link { left:10px; }.entry-page { padding:22px; }.entry-layout { grid-template-columns:1fr; max-width:400px; padding:35px 0; gap:30px; }.entry-art { display:none; }.entry-form h2 { margin-top:10px; }.entry-foot { font-size:9px; gap:20px; } }
@media(prefers-reduced-motion:reduce) { .workspace *, .entry-page * { transition:none!important; } }
.workspace, .entry-page { font-size:15px; }
.workspace-main { color:#243a30; }
.workspace-title h1 { font-size:32px; }
.workspace-title p:last-child, .panel-title p, .sidebar-note p, .rules-panel, .workspace-top, .workspace-foot { color:#66766b; }
.roster-table { font-size:14px; }
.roster-table th { color:#5e6d62; font-size:12px; font-weight:650; }
.roster-table th, .roster-table td, .roster-table th:nth-child(n), .roster-table td:nth-child(n) { padding-top:16px; padding-bottom:16px; }
.roster-table small { color:#68786c; font-size:11px; }
.person small { font-size:11px; color:#68786c; }
.search-field input, .roster-toolbar select, .grade-filters input, .workspace select { font-size:13px; }
.metric > span, .metric-label > span:first-child { color:#637368; }
.metric-overview > span, .metric-overview small { color:#d7e3d1; }
.entry-form > p, .entry-privacy { color:#687568; }
.entry-form label { color:#536858; font-size:13px; }
.entry-form input { font-size:14px; }
@media(max-width:780px) { .workspace-title h1 { font-size:28px; }.roster-table { font-size:13px; } }