*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif; font-size:16px; line-height:1.6; background:var(--bg-deep); color:var(--text-primary); }
:root {
  --bg-deep:#1A1F2E;
  --bg-blue:#2C3E50;
  --bg-green:#1E4D2B;
  --card-cream:#F5F0E6;
  --card-peach:#F5CBA7;
  --accent-yellow:#F1C40F;
  --accent-blue:#3498DB;
  --status-new:#27AE60;
  --status-updating:#F39C12;
  --status-done:#95A5A6;
  --tag-install:#E74C3C;
  --tag-adapt:#8E44AD;
  --text-primary:#ECF0F1;
  --text-dark:#2C3E50;
  --border-color:#7F8C8D;
  --font-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}
[hidden] { display:none !important; }
:focus-visible { outline:3px solid var(--accent-yellow); outline-offset:2px; }
img { max-width:100%; height:auto; }

.skip-link { position:absolute; top:-100%; left:1rem; background:var(--accent-yellow); color:var(--text-dark); padding:.5rem 1rem; border-radius:0 0 .25rem .25rem; z-index:200; text-decoration:none; font-weight:700; }
.skip-link:focus { top:0; }

.container { max-width:1440px; margin:0 auto; padding:0 24px; }
.section { padding:56px 24px; }
.section--blue { background:var(--bg-blue); color:var(--text-primary); }
.section--green { background:var(--bg-green); color:var(--text-primary); }
.section--dark { background:var(--bg-deep); color:var(--text-primary); }

.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.2rem; border:1px solid transparent; border-radius:4px; font-size:1rem; text-decoration:none; cursor:pointer; transition:background .2s,border-color .2s,transform .2s; }
.btn--primary { background:var(--accent-yellow); color:var(--text-dark); border-color:var(--accent-yellow); }
.btn--primary:hover { background:#f5d51e; }
.btn--ghost { background:transparent; color:var(--accent-blue); border-color:var(--accent-blue); }
.btn--ghost:hover { background:rgba(52,152,219,.15); }

.breadcrumb { list-style:none; padding:0; margin:0 0 1rem; display:flex; flex-wrap:wrap; gap:.5rem; font-size:.9rem; color:var(--accent-blue); }
.breadcrumb li::after { content:"/"; margin-left:.5rem; color:var(--border-color); }
.breadcrumb li:last-child::after { content:""; }
.breadcrumb a { color:var(--accent-blue); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }

.site-header { position:sticky; top:0; z-index:100; background-color:var(--bg-blue); background-image:linear-gradient(rgba(236,240,241,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(236,240,241,.08) 1px,transparent 1px); background-size:28px 28px; border-bottom:1px solid var(--border-color); box-shadow:0 2px 12px rgba(0,0,0,.4); }
.site-header__inner { max-width:1440px; margin:0 auto; min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 24px; position:relative; z-index:2; }
.site-header__progress { position:absolute; left:0; bottom:-2px; height:3px; background:linear-gradient(90deg,var(--accent-yellow),var(--accent-blue)); transform:scaleX(0); transform-origin:0 0; z-index:110; }

.site-brand { display:inline-flex; align-items:baseline; gap:.5rem; text-decoration:none; }
.site-brand__word { font-weight:900; font-size:1.45rem; letter-spacing:.02em; color:var(--accent-yellow); }
.site-brand__suffix { font-size:.8rem; font-weight:700; letter-spacing:.12em; color:var(--accent-blue); border:1px solid currentColor; padding:.1rem .45rem; border-radius:4px; }

.nav-toggle { display:none; align-items:center; gap:.5rem; background:transparent; border:1px solid var(--accent-blue); color:var(--accent-blue); border-radius:4px; padding:.4rem .75rem; font-size:.9rem; font-weight:600; cursor:pointer; }
.nav-toggle__icon { display:inline-block; width:16px; height:2px; background:currentColor; position:relative; transition:background .2s; }
.nav-toggle__icon::before,.nav-toggle__icon::after { content:""; position:absolute; left:0; width:16px; height:2px; background:currentColor; transition:transform .2s,top .2s; }
.nav-toggle__icon::before { top:-5px; }
.nav-toggle__icon::after { top:5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon { background:transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { transform:rotate(45deg); top:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { transform:rotate(-45deg); top:0; }

.site-nav { display:flex; align-items:center; gap:2rem; }
.site-nav__list { display:flex; list-style:none; margin:0; padding:0; gap:.25rem; }
.site-nav__link { display:block; padding:.6rem .85rem; color:var(--text-primary); text-decoration:none; font-size:.95rem; font-weight:600; border-bottom:2px solid transparent; transition:color .2s,border-color .2s; }
.site-nav__link:hover { color:var(--accent-yellow); border-bottom-color:var(--accent-yellow); }
.site-nav__link[aria-current="page"] { color:var(--accent-yellow); border-bottom-color:var(--accent-yellow); }

.site-search { position:relative; display:flex; align-items:center; }
.site-search__input { padding:.45rem .8rem; background:rgba(0,0,0,.35); border:1px solid var(--border-color); border-radius:4px; color:var(--text-primary); min-width:200px; font-size:.9rem; }
.site-search__input::placeholder { color:rgba(236,240,241,.6); }
.site-search__input:focus { outline:none; border-color:var(--accent-blue); box-shadow:0 0 0 3px rgba(52,152,219,.25); }

.site-footer { background:var(--bg-deep); color:var(--text-primary); border-top:4px solid var(--accent-yellow); }
.site-footer__inner { max-width:1440px; margin:0 auto; padding:48px 24px; display:grid; grid-template-columns:1fr 2fr 1fr; gap:40px; }
.site-footer__brand { display:flex; flex-direction:column; gap:.5rem; }
.site-footer__logo { color:var(--accent-yellow); font-size:1.8rem; font-weight:900; text-decoration:none; }
.site-footer__tagline { color:var(--accent-blue); font-size:1rem; letter-spacing:.1em; }
.site-footer__nav { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.site-footer__heading { font-size:.8rem; text-transform:uppercase; letter-spacing:.15em; color:var(--accent-yellow); margin:0 0 1rem; }
.site-footer__list { list-style:none; margin:0; padding:0; }
.site-footer__list li { margin:.4rem 0; }
.site-footer__link { color:rgba(236,240,241,.85); text-decoration:none; border-bottom:1px solid transparent; transition:color .2s,border-bottom-color .2s; }
.site-footer__link:hover { color:var(--accent-blue); border-bottom-color:var(--accent-blue); }
.site-footer__meta { display:flex; flex-direction:column; gap:.5rem; font-size:.9rem; color:rgba(236,240,241,.75); }
.site-footer__contact { margin:0; line-height:1.8; }
.site-footer__icp { margin:0; border-top:1px solid var(--border-color); padding-top:.6rem; }
.site-footer__copy { margin:0; }

.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; }
.card { background:var(--card-cream); color:var(--text-dark); border-radius:8px; padding:1.25rem; border:1px solid var(--border-color); box-shadow:0 2px 8px rgba(0,0,0,.12); transition:transform .2s,box-shadow .2s,border-color .2s; position:relative; }
.card:hover { transform:translateY(-4px); border-color:var(--accent-yellow); box-shadow:0 8px 24px rgba(0,0,0,.3); }
.card--cream { background:var(--card-cream); }
.card--peach { background:var(--card-peach); }
.card--accent { border-top:4px solid var(--accent-yellow); }
.card__title { margin:0 0 .5rem; font-size:1.1rem; font-weight:700; }
.card__meta { font-size:.8rem; opacity:.75; }
.card__body { font-size:.95rem; }

.magnet-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
.magnet { background:var(--card-peach); color:var(--text-dark); border-radius:12px; padding:1.5rem 1rem; text-align:center; border:2px solid transparent; transition:transform .2s,border-color .2s; }
.magnet:hover { transform:translateY(-2px); border-color:var(--accent-blue); }
.magnet--blue { background:linear-gradient(135deg,#3498DB,#2C3E50); color:#fff; }
.magnet--green { background:var(--bg-green); color:#fff; }
.magnet--yellow { background:var(--accent-yellow); color:var(--text-dark); }
.magnet__title { font-weight:900; font-size:1.2rem; margin-bottom:.25rem; }
.magnet__desc { font-size:.85rem; opacity:.8; }

.row-list { list-style:none; margin:0; padding:0; }
.row-list__item { display:flex; align-items:center; gap:1rem; padding:.75rem 1rem; border-bottom:1px solid var(--border-color); background:rgba(236,240,241,.02); }
.row-list__item:nth-child(odd) { background:var(--card-cream); color:var(--text-dark); }
.row-list__item:nth-child(even) { background:var(--card-peach); color:var(--text-dark); }
.row-list__mark { font-family:var(--font-mono); color:var(--accent-yellow); font-weight:700; }
.row-list__content { flex:1; min-width:0; }
.row-list__title { font-weight:600; }
.row-list__badges { display:flex; gap:4px; flex-wrap:wrap; }

.tag-group { display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0; list-style:none; }
.tag { display:inline-block; padding:.2rem .6rem; font-size:.75rem; font-weight:700; border-radius:999px; background:rgba(236,240,241,.15); color:var(--text-primary); border:1px solid var(--border-color); text-transform:uppercase; letter-spacing:.03em; }
.tag--install { background:var(--tag-install); color:#fff; border-color:transparent; }
.tag--adapt { background:var(--tag-adapt); color:#fff; border-color:transparent; }
.tag--blue { background:var(--accent-blue); color:#fff; border-color:transparent; }
.tag--yellow { background:var(--accent-yellow); color:var(--text-dark); border-color:transparent; }

.status-badge { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .6rem; border-radius:4px; font-size:.75rem; font-weight:800; text-transform:uppercase; line-height:1.3; }
.status-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status-badge--new { background:var(--status-new); color:#fff; }
.status-badge--updating { background:var(--status-updating); color:var(--text-dark); }
.status-badge--done { background:var(--status-done); color:#fff; }

.index-mark { font-family:var(--font-mono); font-size:.75rem; font-weight:700; color:var(--accent-yellow); background:var(--bg-deep); padding:.15rem .45rem; border-radius:4px; border:1px solid var(--accent-yellow); }
.metric-bar { display:flex; align-items:center; gap:.5rem; }
.metric-bar__track { flex:1; height:8px; background:rgba(236,240,241,.2); border-radius:999px; overflow:hidden; }
.metric-bar__fill { height:100%; background:var(--accent-yellow); border-radius:999px; width:0%; }
.index-line { display:flex; align-items:center; gap:1rem; font-size:.85rem; color:var(--accent-blue); border-left:3px solid var(--accent-yellow); padding:.25rem .75rem; margin-bottom:.75rem; }

.rail-scroll { display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x proximity; }
.rail-scroll > * { flex:0 0 auto; scroll-snap-align:start; }

.data-table { width:100%; border-collapse:collapse; font-size:.95rem; }
.data-table th,.data-table td { padding:.6rem .75rem; border-bottom:1px solid var(--border-color); text-align:left; }
.data-table thead th { background:var(--bg-blue); color:var(--text-primary); text-transform:uppercase; font-size:.75rem; letter-spacing:.05em; }
.data-table tbody tr:nth-child(even) { background:rgba(236,240,241,.05); }

.tabs { border:1px solid var(--border-color); border-radius:8px; overflow:hidden; }
.tabs__nav { display:flex; flex-wrap:wrap; background:var(--bg-blue); border-bottom:1px solid var(--border-color); }
.tabs__button { flex:1; padding:.75rem 1rem; background:transparent; border:none; color:var(--text-primary); font-weight:600; cursor:pointer; border-bottom:3px solid transparent; font-size:.95rem; }
.tabs__button:hover { color:var(--accent-yellow); }
.tabs__button[aria-selected="true"] { color:var(--accent-yellow); border-bottom-color:var(--accent-yellow); }
.tabs__panel { padding:1.5rem; background:var(--bg-deep); }

@media (max-width:1020px) {
  .site-nav { gap:1rem; }
  .site-search__input { min-width:140px; }
  .site-footer__inner { grid-template-columns:1fr 1fr; }
}

@media (max-width:920px) {
  .site-header__inner { min-height:64px; padding:0 16px; }
  .nav-toggle { display:inline-flex; }
  .site-nav { position:absolute; top:100%; left:0; right:0; background:var(--bg-blue); flex-direction:column; align-items:stretch; padding:1rem; gap:1rem; border-bottom:2px solid var(--accent-yellow); box-shadow:0 12px 24px rgba(0,0,0,.5); transform:scaleY(0); transform-origin:top; opacity:0; transition:transform .2s ease,opacity .2s ease; max-height:calc(100vh - 64px); overflow:auto; pointer-events:none; }
  .site-nav[data-open] { transform:scaleY(1); opacity:1; pointer-events:auto; }
  .site-nav__list { flex-direction:column; width:100%; gap:0; }
  .site-nav__link { border-bottom:1px solid rgba(236,240,241,.15); border-left:3px solid transparent; }
  .site-nav__link[aria-current="page"] { border-bottom-color:var(--accent-yellow); border-left-color:var(--accent-yellow); }
  .site-search { width:100%; }
  .site-search__input { width:100%; }
}

@media (max-width:720px) {
  .site-footer__inner { grid-template-columns:1fr; gap:24px; }
  .site-footer__nav { grid-template-columns:1fr; gap:16px; }
  .section { padding:32px 16px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  * { transition:none !important; animation:none !important; }
}