/* Shared foundations; each page owns its component styles. */
:root {
  --bg:#f4f7fb; --bg2:#fff; --panel:#fff; --text:#18324f; --muted:#52657a;
  --border:#dce4ee; --brand:#205bbe; --brand2:#174893; --focus:#205bbe; --navbar-height:64px;
  --shadow:0 2px 8px rgb(24 50 79 / 4%); --shadow2:0 8px 24px rgb(24 50 79 / 7%);
}
body { font-family:"Microsoft YaHei UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif; color:var(--text); background:var(--bg); }
h1,h2,h3 { letter-spacing:-.025em; }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline:3px solid #205bbe; outline-offset:3px; }
[hidden] { display:none !important; }
.text-muted,.form-text,.muted { color:var(--muted) !important; }
.skip-link { position:fixed; z-index:2000; left:12px; top:-80px; background:#fff; padding:12px 18px; border:2px solid var(--brand); border-radius:6px; }
.skip-link:focus { top:10px; }
body .topbar { height:var(--navbar-height); min-height:var(--navbar-height); padding:0 24px; background:#fff; backdrop-filter:none; box-shadow:none; gap:16px; }
body .topbar__left { flex:1; min-width:0; gap:30px; }
body .brand { white-space:nowrap; flex:0 0 auto; gap:10px; font-size:18px; color:var(--text); }
body .brand__mark { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; border-radius:7px; background:#205bbe; color:#fff; font-size:18px; }
body .brand .brand__name { display:inline; }
body .topbar__nav { display:flex; flex-wrap:nowrap; align-items:center; gap:3px; padding:0; overflow:visible; min-width:0; }
body .navlink,.nav-group > summary { white-space:nowrap; font-size:14px; line-height:1.5; padding:10px 11px; border-radius:6px; color:#354d69; }
body .navlink { flex-shrink:0; }
.nav-group { position:relative; }
.nav-group > summary { cursor:pointer; list-style:none; border:1px solid transparent; user-select:none; }
.nav-group > summary::-webkit-details-marker { display:none; }
.nav-group > summary::after { content:""; display:inline-block; width:6px; height:6px; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:rotate(45deg); margin:0 0 3px 8px; }
.nav-group[open] > summary::after { transform:rotate(225deg); margin-bottom:0; }
.nav-group > summary:hover,.nav-group[open] > summary { background:#f0f4fa; }
body .navlink--active,.nav-group--active > summary { background:#edf3fe; color:#1b50a4; border-color:transparent; box-shadow:none; font-weight:700; }
.nav-group__links { position:absolute; top:calc(100% + 8px); left:0; display:grid; min-width:210px; padding:8px; border:1px solid var(--border); border-radius:10px; background:#fff; box-shadow:var(--shadow2); }
.nav-group__links .navlink { display:block; padding:11px 12px; }
body .topbar__right { flex:0 0 auto; gap:12px; white-space:nowrap; font-size:13px; }
.topbar__username { max-width:126px; overflow:hidden; text-overflow:ellipsis; color:var(--muted); }
.topbar__right .is-current { font-weight:700; text-decoration:underline; text-underline-offset:5px; }
body .topbar__menu { display:none; }
.btn-primary,.supervision-page .btn-primary { background:var(--brand); border-color:var(--brand); box-shadow:none; }
.btn-primary:hover,.btn-primary:focus-visible,.supervision-page .btn-primary:hover,.supervision-page .btn-primary:focus-visible { background:var(--brand2); border-color:var(--brand2); }
.btn,.form-control,.form-select { border-radius:7px; }
.form-control,.form-select { min-height:42px; border-color:#bccbdc; color:var(--text); font-size:15px; }
.form-control:focus,.form-select:focus { border-color:var(--brand); box-shadow:0 0 0 3px #205bbe26; }
input::placeholder,textarea::placeholder { color:#65768a !important; opacity:1; }
.surface-card,.supervision-panel,.contract-notice-panel { border-color:var(--border); box-shadow:var(--shadow); border-radius:10px; }
.surface-card:hover { border-color:var(--border); box-shadow:var(--shadow); }
/* A working index, grouped by the task the reader came to do. */
.home-page { max-width:1240px; padding:30px 28px 56px; margin:0 auto; }
.home-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:0 0 24px; border-bottom:1px solid var(--border); margin-bottom:26px; }
.home-heading h1 { font-size:30px; font-weight:750; margin:4px 0 10px; }
.home-heading p { color:var(--muted); margin:0; font-size:15px; }
.home-eyebrow { font-size:12px; font-weight:700; color:var(--brand); }
.home-heading > a { flex-shrink:0; font-size:14px; }
.home-section { margin:0 0 28px; }
.home-section__heading { display:flex; align-items:baseline; gap:16px; margin-bottom:13px; }
.home-section__heading h2 { font-size:18px; margin:0; font-weight:700; }
.home-section__heading p { font-size:13px; color:var(--muted); margin:0; }
.home-page .features-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0; }
.home-page .feature-card { display:grid; grid-template-columns:40px minmax(0,1fr); grid-template-rows:auto 1fr auto; align-items:start; column-gap:14px; row-gap:6px; padding:20px; border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); text-align:left; min-height:160px; }
.home-page .feature-card:hover { transform:none; border-color:#86a9dc; box-shadow:0 3px 10px rgb(32 91 190 / 7%); }
.home-page .feature-icon { grid-column:1; grid-row:1/4; width:40px; height:40px; padding:8px; margin:0; border-radius:8px; }
.home-page .feature-title { grid-column:2; font-size:16px; line-height:1.5; margin:0; color:var(--text); }
.home-page .feature-desc { grid-column:2; margin:0; font-size:13px; line-height:1.7; }
.home-page .feature-btn { grid-column:2; padding:2px 0; color:var(--brand); background:none; font-size:13px; border-radius:0; }
.home-page .feature-btn::after { content:" →"; }
.home-page .feature-card:hover .feature-btn { background:transparent; color:var(--brand2); }
.home-page .feature-status { grid-column:2; position:static; width:fit-content; margin:0; font-size:12px; }
/* Compact headings keep the actual fields visible. */
body .supervision-page,body .contract-notice-page { max-width:1180px; padding:26px 24px 48px; }
.supervision-hero,.contract-notice-hero { padding:20px 24px; margin-bottom:18px; border:1px solid var(--border); border-left:4px solid var(--brand); background:#fff; color:var(--text); border-radius:9px; box-shadow:none; align-items:center; gap:18px; }
.supervision-hero h1,.contract-notice-hero h1 { font-size:26px; font-weight:700; margin:4px 0 8px; }
.supervision-hero p,.contract-notice-hero p { color:var(--muted); font-size:14px; line-height:1.7; }
.supervision-kicker,.contract-notice-kicker,.supervision-panel .supervision-kicker { color:var(--brand); font-size:12px; letter-spacing:.04em; }
.supervision-progress,.contract-notice-steps { gap:6px; flex-wrap:wrap; }
.supervision-progress span,.contract-notice-steps span { background:#f0f3f7; color:#52657a; border:1px solid transparent; border-radius:5px; font-size:12px; padding:6px 9px; }
.supervision-progress span.is-active,.contract-notice-steps span.is-active { background:#eaf1fe; color:#194b9b; border-color:#abc3e7; font-weight:700; }
.supervision-progress span.is-complete,.contract-notice-steps span.is-complete { background:#edf6f0; color:#146347; }
.supervision-panel,.contract-notice-panel { padding:24px; margin-bottom:18px; }
.supervision-section-heading,.classic-tool-heading { margin-bottom:16px; }
.supervision-panel h2 { font-size:20px; }
.classic-tool-input-shell { padding:0; border:0; background:transparent; margin-bottom:18px; }
.classic-tool-page textarea.classic-tool-textarea { min-height:180px; padding:12px 14px; border-radius:7px; }
.supervision-date-badge { color:#205bbe; background:#edf3fe; }
.supervision-catalog-hero { background:#fff; color:var(--text); border:1px solid var(--border); border-left:4px solid var(--brand); border-radius:9px; padding:24px; box-shadow:none; }
.supervision-catalog-hero h1 { font-size:26px; }
.supervision-catalog-hero p { color:var(--muted); }
.supervision-catalog-hero .btn-outline-light { border-color:#bccbdc; color:var(--brand); }
.supervision-catalog-hero .btn-outline-light:hover { background:#edf3fe; }
.classic-tool-guides { gap:10px; margin-bottom:18px; }
.classic-tool-guide { padding:10px 12px; background:#f8fafc; border-color:var(--border); border-radius:7px; }
.classic-tool-guide > span { display:none; }
.classic-tool-guide strong { font-size:13px; }
.classic-tool-guide small { font-size:12px; color:var(--muted); }
.classic-tool-submit { font-size:16px; padding:11px 18px; }
.classic-tool-result { padding:17px 22px; box-shadow:none; background:transparent; }
.classic-tool-result h2 { font-size:16px; }
.classic-result-icon { width:36px; height:36px; flex-basis:36px; background:#eaf1fe; color:var(--brand); border-radius:8px; }
.classic-tool-result p { font-size:13px; }
.classic-upload-zone { min-height:170px; margin-bottom:12px; }
.classic-upload-icon { width:40px; height:40px; }
.upload-controls { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 18px; }
.upload-controls .form-control { flex:1 1 260px; min-width:0; }
.upload-controls .btn { flex:0 0 auto; }
.upload-validation { margin-top:-8px; }
.simple-page { padding-top:28px; }
.settings-page { max-width:720px; }
.settings-form { display:grid; gap:10px; max-width:440px; }
.settings-form .btn { justify-self:start; margin-top:10px; }
.form-label { font-weight:600; color:var(--text); }
.form { display:grid; gap:16px; }
.form > div > label { display:block; margin-bottom:6px; font-weight:600; }
.form .help { color:var(--muted); font-size:13px; margin-top:6px; }
.help-sections { display:grid; gap:24px; }
.help-sections h2 { font-size:18px; margin:0 0 10px; }
.help-sections p,.help-sections li { font-size:15px; line-height:1.8; color:#435973; }
.help-sections details { padding:13px 0; border-bottom:1px solid var(--border); }
.help-sections summary { font-weight:600; cursor:pointer; }
.help-sections details p { margin:12px 0 0; }
.feedback-checklist { padding-left:22px; line-height:2; color:#435973; }
.suspension-page { background:var(--bg); padding:32px 18px; }
.suspension-card { display:block; max-width:760px; border-color:var(--border); border-radius:10px; box-shadow:var(--shadow); }
.suspension-copy { padding:28px; }
.suspension-copy h1 { font-size:28px; letter-spacing:0; color:var(--text); }
.suspension-eyebrow { margin-top:18px; color:var(--muted); letter-spacing:0; }
.suspension-notice { font-size:15px; color:#435973; }
.suspension-actions { margin-top:22px; flex-wrap:wrap; }
.suspension-details { border-top:1px solid var(--border); }
.suspension-details > summary { padding:16px 28px; color:var(--brand); cursor:pointer; font-size:14px; }
.suspension-proof { min-height:0; padding:24px; background:#f4f7fb; }
.suspension-proof img { box-shadow:none; }
.suspension-proof figcaption { color:var(--muted); }
.supervision-upload-zone:focus-within { outline:3px solid var(--brand); outline-offset:3px; }
.supervision-upload-zone input[type=file].accessible-upload { display:block !important; width:100%; max-width:440px; margin:12px auto; font-size:14px; color:var(--text); }
@media(max-width:1199px) {
  body .topbar { padding:0 20px; }
  body .topbar__left { gap:16px; }
  .topbar__username { display:none; }
  body .navlink,.nav-group > summary { padding:10px 9px; }
}
@media(min-width:993px) and (max-width:1199px) {
  .home-page .home-section:not(:last-child) .features-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(min-width:1200px) {
  .home-page .home-section:not(:last-child) .features-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(max-width:992px) {
  body .topbar { padding:0 16px; }
  body .topbar__left { gap:14px; flex:1; }
  body .topbar__menu { display:flex; width:40px; height:40px; flex-direction:column; align-items:center; justify-content:center; gap:4px; margin-left:auto; border:1px solid var(--border); border-radius:7px; background:#fff; }
  body .topbar__menu span { width:18px; height:2px; background:var(--text); }
  body .topbar__menu[aria-expanded=true] span:first-child { transform:translateY(6px) rotate(45deg); }
  body .topbar__menu[aria-expanded=true] span:nth-child(2) { opacity:0; }
  body .topbar__menu[aria-expanded=true] span:last-child { transform:translateY(-6px) rotate(-45deg); }
  body .topbar__nav { display:none; position:absolute; top:100%; left:0; right:0; width:auto; max-height:calc(100dvh - 64px); overflow-y:auto; padding:14px 20px 22px; background:#fff; border-bottom:1px solid var(--border); box-shadow:var(--shadow2); border-radius:0; }
  body .topbar__nav.is-open { display:grid; grid-template-columns:1fr; gap:5px; }
  .nav-group__links { position:static; min-width:0; margin:0 0 8px 12px; padding:2px 0 2px 12px; border:0; border-left:2px solid var(--border); border-radius:0; box-shadow:none; }
  body .topbar__nav .navlink,.nav-group > summary { padding:11px 12px; font-size:15px; text-align:left; }
  .site-menu-open { overflow:hidden; }
  .home-page .features-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .supervision-hero,.contract-notice-hero { flex-direction:column; align-items:flex-start; }
}
@media(max-width:600px) {
  body .topbar { gap:10px; padding:0 12px; }
  body .brand { font-size:15px; gap:7px; }
  body .brand__mark { width:28px; height:28px; flex-basis:28px; font-size:16px; }
  body .topbar__right { gap:10px; }
  body .topbar__right .btn { padding:6px 8px; font-size:12px; }
  body .topbar__left { gap:10px; }
  .home-page { padding:22px 16px 36px; }
  .home-heading { align-items:flex-start; padding-bottom:18px; margin-bottom:22px; }
  .home-heading h1 { font-size:24px; }
  .home-heading p { font-size:13px; }
  .home-heading > a { font-size:13px; padding-top:5px; }
  .home-section__heading { display:block; }
  .home-section__heading p { margin-top:5px; }
  .home-page .features-grid { grid-template-columns:1fr; gap:9px; }
  .home-page .feature-card { min-height:0; padding:16px; row-gap:5px; }
  body .supervision-page,body .contract-notice-page { padding:18px 14px 32px; }
  .supervision-hero,.contract-notice-hero { padding:16px; gap:12px; }
  .supervision-hero h1,.contract-notice-hero h1 { font-size:23px; }
  .supervision-panel,.contract-notice-panel { padding:18px 16px; }
  .classic-tool-page textarea.classic-tool-textarea { min-height:165px; }
  .classic-tool-guides { grid-template-columns:1fr; gap:0; border:1px solid var(--border); border-radius:7px; }
  .classic-tool-guide { border:0; padding:8px 12px; }
  .classic-tool-guide > div { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; }
  .classic-tool-result { gap:12px; padding:14px 16px; }
  .simple-page { padding:20px 16px 32px; }
  .settings-form { max-width:none; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; } }
@media print { .topbar,.skip-link { display:none !important; } body { background:#fff; } }