@font-face { font-family:"Source Han Sans Local"; src:url("fonts/source-han-sans-sc-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Source Han Sans Local"; src:url("fonts/source-han-sans-sc-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Source Han Sans Local"; src:url("fonts/source-han-sans-sc-600.woff2") format("woff2"); font-weight:600 700; font-style:normal; font-display:swap; }

:root {
  --blue:#2f7fe8;
  --blue-deep:#226dd1;
  --blue-icon:#6b9ee8;
  --blue-pale:#f3f7fd;
  --blue-row:#eef5fd;
  --ink:#1f2937;
  --text:#374151;
  --muted:#7b8492;
  --paper:#f5f7fa;
  --surface:#fff;
  --line:#e8edf3;
  --line-strong:#dce5ef;
  --mint:var(--blue);
  --mint-dark:var(--blue-deep);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 14px/1.45 "Source Han Sans Local","PingFang SC","Microsoft YaHei",sans-serif; letter-spacing:0; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
.page-shell { width:min(100% - 32px,1180px); margin-inline:auto; }

/* Inner pages keep a neutral utility header. */
.site-header { border-bottom:1px solid var(--line); background:rgba(255,255,255,.96); }
.site-header-inner { min-height:56px; display:flex; align-items:center; gap:28px; position:relative; }
.brand { color:var(--ink); font-size:21px; font-weight:600; letter-spacing:-.045em; }
.brand small { margin-left:10px; color:var(--muted); font-size:12px; font-weight:400; letter-spacing:0; }
.top-nav { display:flex; align-items:center; gap:22px; color:#667085; font-size:13px; }
.top-nav a:hover,.top-nav a.active { color:var(--blue); }
.submit-link { margin-left:auto; color:#667085; font-size:13px; }
.submit-link:hover { color:var(--blue); }

/* Homepage: UC-like dense portal with a quieter, more precise finish. */
.home-page { background:#fff; }
.portal-header { background:var(--blue); color:#fff; border-bottom:1px solid rgba(28,92,175,.18); }
.portal-header-inner { min-height:148px; display:flex; flex-direction:column; justify-content:center; gap:16px; padding-block:18px 20px; }
.portal-brand { color:#fff; font-size:28px; font-weight:600; line-height:1; letter-spacing:-.05em; text-shadow:0 1px 1px rgba(20,73,143,.08); }
.brand-with-mark { display:inline-flex; align-items:center; gap:9px; }
.hamster-mark { width:28px; height:28px; position:relative; display:inline-block; flex:0 0 28px; overflow:hidden; border:1px solid rgba(255,255,255,.52); border-radius:8px; background:rgba(255,255,255,.16); }
.hamster-mark::before { content:""; position:absolute; left:7px; top:8px; width:12px; height:12px; border-radius:48% 48% 54% 54%; background:#fff; box-shadow:-5px -4px 0 -1px #fff,5px -4px 0 -1px #fff; }
.hamster-mark::after { content:""; position:absolute; left:10px; top:13px; width:8px; height:5px; background:radial-gradient(circle at 1px 1px,#2f7fe8 0 1px,transparent 1.3px),radial-gradient(circle at 7px 1px,#2f7fe8 0 1px,transparent 1.3px),radial-gradient(ellipse at 50% 100%,#6b9ee8 0 1px,transparent 1.4px); }
.search-form { width:100%; min-height:48px; display:grid; grid-template-columns:34px minmax(0,1fr) 72px; align-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.72); border-radius:6px; background:#fff; box-shadow:0 1px 2px rgba(20,67,129,.08); }
.search-glyph { width:16px; height:16px; position:relative; margin-left:13px; border:2px solid #96a0ad; border-radius:50%; opacity:.9; }
.search-glyph::after { content:""; position:absolute; width:6px; height:2px; right:-5px; bottom:-3px; border-radius:2px; background:#96a0ad; transform:rotate(45deg); }
.search-form > img { width:19px; height:19px; margin-left:13px; opacity:.86; }
.search-form input { min-width:0; height:46px; padding:0 10px; border:0; outline:0; color:var(--ink); background:transparent; font-size:14px; }
.search-form input::placeholder { color:#98a1ad; }
.search-form:focus-within { border-color:#d8e8ff; box-shadow:0 0 0 2px rgba(255,255,255,.18); }
.search-form button { align-self:stretch; border:0; background:#fff; color:var(--blue-deep); cursor:pointer; font-size:14px; font-weight:500; }
.search-form button:hover { background:#f7faff; color:#165ebd; }

.portal-main { margin-top:0; }
.quick-access { overflow:hidden; border-inline:1px solid var(--line); background:#fff; }
.favicon-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
.favicon-site { min-width:0; min-height:48px; display:flex; align-items:center; justify-content:center; gap:8px; padding:5px 8px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); color:#303a49; font-size:13px; transition:color .16s ease,background .16s ease; }
.favicon-site:nth-child(5n) { border-right:0; }
.favicon-site:hover { color:var(--blue-deep); background:#f8fbff; }
.site-monogram { display:grid; place-items:center; flex:0 0 auto; border-radius:5px; background:hsl(var(--site-tone) 58% 94%); color:hsl(var(--site-tone) 42% 40%); font-size:11px; font-weight:600; line-height:1; }
.favicon-site-mark { width:21px; height:21px; flex-basis:21px; }
img.favicon-site-mark { border-radius:5px; object-fit:contain; }
.favicon-site span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.text-link-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
.quick-text-link { min-width:0; min-height:38px; display:flex; align-items:center; justify-content:center; padding:5px 6px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); color:#3f4957; font-size:12.5px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .16s ease,background .16s ease; }
.quick-text-link:nth-child(5n) { border-right:0; }
.quick-text-link:hover { color:var(--blue-deep); background:#f8fbff; }

.sponsor-strip { min-height:40px; display:grid; grid-template-columns:auto minmax(0,1fr) 16px; align-items:center; gap:13px; margin-top:8px; padding:0 14px; border:1px solid var(--line); background:#fafbfd; color:#586273; font-size:12.5px; transition:border-color .16s ease,background .16s ease; }
.sponsor-strip:hover { border-color:#d6e4f5; background:#f7faff; }
.sponsor-label { display:flex; align-items:center; gap:6px; color:#5c8fd5; font-weight:500; white-space:nowrap; }
.sponsor-copy { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sponsor-arrow { width:14px; justify-self:end; color:#9aa5b3; font-size:19px; line-height:1; }

.resource-sections { margin-top:8px; }
.resource-section { margin:0 0 8px; overflow:hidden; border:1px solid var(--line); background:#fff; }
.resource-heading { min-height:46px; display:flex; align-items:center; gap:10px; padding:0 13px; border-bottom:1px solid var(--line); }
.resource-icon { width:22px; height:22px; display:grid; place-items:center; flex:0 0 22px; border-radius:6px; background:#f4f8fd; }
.resource-icon::before { content:""; width:12px; height:12px; border:1.5px solid #6b9ee8; border-radius:4px; box-shadow:3px -3px 0 -2px #6b9ee8; }
.resource-heading h2 { margin:0; color:#273142; font-size:15px; font-weight:600; letter-spacing:-.02em; }
.resource-heading > a { margin-left:auto; color:#7e8997; font-size:12.5px; }
.resource-heading > a { display:flex; align-items:center; gap:2px; }
.more-arrow { margin-left:2px; font-size:17px; line-height:1; }
.resource-heading > a:hover { color:var(--blue); }
.resource-table { width:100%; }
.resource-column-heads,.resource-link-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
.resource-column-heads { min-height:36px; align-items:center; background:var(--blue-row); color:#344054; font-size:12.5px; font-weight:500; }
.resource-column-heads span,.resource-link-row > * { min-width:0; display:flex; align-items:center; justify-content:center; padding:5px 5px; text-align:center; }
.resource-column-heads span:not(:last-child),.resource-link-row > *:not(:last-child) { border-right:1px solid rgba(220,229,239,.62); }
.resource-link-row { min-height:36px; border-top:1px solid var(--line); }
.resource-link-row:first-of-type { border-top:0; }
.resource-link { color:#354052; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .16s ease,background .16s ease; }
.resource-link:hover { color:var(--blue-deep); background:#f8fbff; }

.search-results { margin:12px 0; padding:0 14px 12px; border:1px solid var(--line); background:#fff; }
.search-result-heading { min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-bottom:1px solid var(--line); }
.search-result-heading h1 { margin:0; color:var(--ink); font-size:17px; font-weight:600; }
.search-result-heading button { border:0; color:var(--blue); background:transparent; cursor:pointer; font-size:13px; }
.result-summary { margin:12px 0 3px; color:var(--muted); font-size:12px; }
.result-item { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:12px 2px; border-bottom:1px solid var(--line); }
.result-item > span { font-size:14px; font-weight:500; }
.result-item small { color:var(--muted); font-size:12px; }
.result-item b { color:var(--blue); font-size:12px; }
.no-results { color:var(--muted); }

.footer { display:flex; gap:14px; flex-wrap:wrap; padding:24px 0 34px; color:#8a94a2; font-size:12px; }
.footer a:hover { color:var(--blue); }

a:focus-visible,button:focus-visible,input:focus-visible { outline:2px solid #85b4f3; outline-offset:2px; }

@media (min-width:820px) {
  .page-shell { width:min(100% - 64px,1180px); }
  .portal-header-inner { min-height:154px; }
  .portal-brand { font-size:30px; }
  .favicon-site { justify-content:flex-start; padding-inline:20%; font-size:14px; }
  .favicon-site img { width:22px; height:22px; flex-basis:22px; }
  .quick-text-link,.resource-column-heads,.resource-link { font-size:13px; }
  .resource-link-row { min-height:38px; }
}

@media (max-width:540px) {
  .page-shell { width:100%; }
  .portal-header-inner { min-height:106px; gap:10px; padding:12px 12px 13px; }
  .portal-brand { align-self:center; font-size:21px; }
  .search-form { min-height:41px; grid-template-columns:30px minmax(0,1fr) 56px; border-radius:5px; }
  .search-form > img { width:17px; height:17px; margin-left:11px; }
  .search-form input { height:39px; padding-inline:7px; font-size:13px; }
  .search-form button { font-size:13px; }
  .favicon-site { min-height:39px; flex-direction:row; gap:3px; padding:4px 2px; font-size:9.5px; line-height:1.15; }
  .favicon-site img { width:16px; height:16px; flex-basis:16px; border-radius:3px; }
  .quick-text-link { min-height:31px; padding:3px 2px; font-size:10.5px; }
  .sponsor-strip { min-height:38px; grid-template-columns:auto minmax(0,1fr) 10px; gap:8px; margin-top:6px; padding-inline:9px; font-size:11px; }
  .sponsor-label { gap:4px; }
  .sponsor-label img { width:14px; height:14px; }
  .resource-sections { margin-top:6px; }
  .resource-section { margin-bottom:6px; border-inline:0; }
  .resource-heading { min-height:41px; gap:8px; padding-inline:9px; }
  .resource-icon { width:21px; height:21px; flex-basis:21px; background:#f6f9fd; }
  .resource-icon img { width:14px; height:14px; opacity:.7; }
  .resource-heading h2 { font-size:14px; }
  .resource-heading > a { font-size:11px; }
  .resource-column-heads { min-height:31px; font-size:11px; }
  .resource-link-row { min-height:31px; }
  .resource-column-heads span,.resource-link-row > * { padding:4px 2px; }
  .resource-link { font-size:10.5px; }
  .search-results { margin:6px; }
  .footer { width:calc(100% - 20px); padding-top:18px; }
  .site-header-inner { width:calc(100% - 24px); min-height:54px; gap:14px; }
  .brand { font-size:18px; }
  .top-nav { display:none; }
  .submit-link { font-size:12px; }
}
