:root{ --brand:#2563eb; --brand-ink:#0b1930; --text:#0f172a; --muted:#475569; --bg:#f8fafc; --card:#fff; --ring:rgba(37,99,235,.15); --radius:16px; --shadow:0 10px 30px rgba(2,8,23,.08); }
*{box-sizing:border-box} html,body{margin:0} body{font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif; color:var(--text); background:var(--bg)}
a{color:var(--brand); text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1280px; margin-inline:auto; padding:24px}
.topbar{position:sticky; top:0; z-index:40; backdrop-filter:saturate(180%) blur(8px); background:color-mix(in oklab, var(--bg) 92%, transparent); border-bottom:1px solid color-mix(in oklab, var(--brand) 12%, transparent)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 0}
.brand{display:flex; align-items:center; gap:12px; color:var(--brand-ink)}
.logo{width:40px; height:26px; flex-shrink:0}
.logo svg{width:100%; height:100%; display:block}
.logo-eye{stroke:var(--brand); fill:none; stroke-width:2.25}
.logo-pupil{fill:var(--brand)}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-name{font-weight:700; letter-spacing:.2px; color:var(--brand-ink); font-size:18px}
.brand .by{font-weight:600; color:var(--muted); font-size:13px}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; cursor:pointer; z-index:50}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--brand-ink); border-radius:2px; transition:all .3s ease}
.nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.navlinks{display:flex; gap:4px; align-items:center}
.navlinks a{display:inline-block; padding:9px 15px; font-weight:500; font-size:15px; color:var(--brand-ink); border-radius:8px; background:transparent; transition:all .2s ease; white-space:nowrap}
.navlinks a:hover{background:color-mix(in oklab, var(--brand) 8%, transparent); text-decoration:none}
.navlinks a.active{color:#fff; background:var(--brand); box-shadow:0 2px 8px rgba(37,99,235,.25)}
@media (max-width:1024px){
  .nav-toggle{display:flex}
  .navlinks{position:fixed; top:74px; left:0; right:0; flex-direction:column; gap:0; background:var(--card); border-bottom:1px solid color-mix(in oklab, var(--brand) 12%, transparent); box-shadow:0 10px 30px rgba(2,8,23,.15); max-height:0; overflow:hidden; opacity:0; transition:all .3s ease, opacity .2s ease}
  .navlinks.active{max-height:600px; opacity:1; padding:12px 0}
  .navlinks a{width:100%; text-align:left; padding:14px 24px; border-radius:0}
  .navlinks a:hover{background:color-mix(in oklab, var(--brand) 6%, transparent)}
  .navlinks a.active{background:color-mix(in oklab, var(--brand) 12%, transparent); color:var(--brand); box-shadow:none}
}

.hero{padding:56px 0 24px}
h1{font-size:clamp(28px,4vw,44px); line-height:1.15; margin:0 0 12px; color:var(--brand-ink)}
.lead{font-size:clamp(16px,2.1vw,20px); color:var(--muted)}
section{padding:22px 0}
h2{font-size:clamp(22px,3vw,30px); margin:0 0 12px; color:var(--brand-ink)}
h3{margin-top:0; color:var(--brand-ink)}

.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px}
.grid{display:grid; gap:18px}
.grid.cols-2{grid-template-columns:repeat(2, minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fit, minmax(260px,1fr))}
.list{margin:0; padding-left:18px} .list li{margin:6px 0}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:color-mix(in oklab, var(--brand) 12%, transparent); color:var(--brand)}

.table{width:100%; border-collapse:separate; border-spacing:0}
.table th,.table td{padding:12px 14px; text-align:left}
.table thead th{background:#f1f5f9; color:#0b1930; position:sticky; top:0}
.table tbody tr{background:#fff} .table tbody tr+tr td{border-top:1px solid #e5e7eb}

.notice{padding:12px 14px; border:1px solid #e5e7eb; border-radius:12px; background:#fff}
.ok{border-color:#22c55e4d; background:#ecfdf5} .error{border-color:#ef44444d; background:#fef2f2}

.logo-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:16px; align-items:center; justify-items:center}
.logo-grid img{max-width:130px; max-height:36px; filter:grayscale(100%); opacity:.9; transition:filter .2s ease, opacity .2s ease}
.logo-grid img:hover{filter:none; opacity:1}
.logo-grid svg{max-width:130px; max-height:36px; filter:grayscale(100%); opacity:.9; transition:filter .2s ease, opacity .2s ease}
.logo-grid svg:hover{filter:none; opacity:1}

footer{padding:32px 0; color:var(--muted); font-size:14px}
@media (max-width: 760px){ .grid.cols-2{grid-template-columns:1fr} }
@media print{ .topbar, .navlinks{display:none !important} body{background:#fff} .card{box-shadow:none; border:1px solid #e5e7eb} a{color:#000; text-decoration:none} }