:root{--navy:#102a43;--blue:#1976d2;--cyan:#00a6c7;--bg:#f4f8fb;--card:#fff;--text:#243b53;--muted:#627d98;--line:#d9e2ec}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text);line-height:1.65}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1080px;margin:auto;padding:0 18px}
.hero{background:linear-gradient(135deg,#102a43 0%,#165a8a 62%,#00a6c7 100%);color:#fff;padding:52px 0 42px}
.eyebrow{font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;opacity:.78}
h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.1;margin:.35rem 0 1rem}
.lead{font-size:1.1rem;max-width:780px;opacity:.93}
.nav{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 3px 12px #102a4312}
.nav .wrap{display:flex;gap:7px;overflow:auto;padding-top:10px;padding-bottom:10px}
.nav a{white-space:nowrap;padding:8px 12px;border-radius:8px;font-weight:700;font-size:.9rem}
.nav a:hover{background:#eaf4fb;text-decoration:none}
main{padding:35px 0 60px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:25px;box-shadow:0 10px 30px #102a4319}
.full{grid-column:1/-1}
.footer{background:var(--navy);color:#d9e2ec;padding:28px 0}
.footer a{color:#fff}
.small{font-size:.9rem}

table{width:100%;border-collapse:separate;border-spacing:0 9px;font-size:.95rem}
th{text-align:left;color:var(--navy);padding:0 12px 8px;font-size:.9rem}
td{background:#f6fafc;border-top:1px solid #e6eef4;border-bottom:1px solid #e6eef4;padding:12px}
td:first-child{border-left:1px solid #e6eef4;border-radius:10px 0 0 10px}
td:last-child{border-right:1px solid #e6eef4;border-radius:0 10px 10px 0}
tr:hover td{background:#eaf4fb}
.indexcolname a,.indexcolicon a{color:var(--blue);font-weight:700}
.indexcolmtime,.indexcolsize{color:var(--muted);white-space:nowrap}
img{vertical-align:middle}

@media(max-width:760px){
.card{padding:20px}
.indexcolmtime{display:none}
}