:root{--ink:#1c2533;--ink2:#465163;--mute:#6b7688;--line:#e3e7ee;--bg:#f6f7fb;--card:#fff;--navy:#1f2b3d;--blue:#3f7bd6;--blue2:#e9f1fd;--acc:#f2a23a;--r:12px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
/* header */
.site-header{background:var(--navy);position:sticky;top:0;z-index:50;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.hdr{display:flex;align-items:center;gap:18px;min-height:64px}
.logo img{width:136px;height:auto}
.main-nav>ul{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.main-nav .nav-top{display:block;color:#fff;font-weight:600;font-size:15px;padding:20px 12px;cursor:pointer}
.main-nav .nav-top:hover{text-decoration:none;color:#cfe0ff}
.has-sub{position:relative}
.sub{display:none;position:absolute;left:0;top:100%;background:#fff;list-style:none;margin:0;padding:10px;border-radius:0 0 var(--r) var(--r);box-shadow:0 12px 30px rgba(0,0,0,.18);min-width:250px;columns:2;column-gap:8px;width:max-content;max-width:520px}
.sub li{break-inside:avoid}
.sub a{display:block;color:var(--ink);padding:6px 10px;border-radius:8px;font-size:14.5px;white-space:nowrap}
.sub a:hover{background:var(--blue2);text-decoration:none}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:block}
.search{margin-left:auto;position:relative}
.search input,.bigsearch input{width:240px;border:0;border-radius:999px;padding:10px 16px;font-size:15px;background:#fff}
.qres{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border-radius:var(--r);box-shadow:0 12px 30px rgba(0,0,0,.2);width:320px;max-height:420px;overflow:auto;z-index:60;padding:6px}
.qres a{display:block;padding:8px 12px;color:var(--ink);border-radius:8px;font-size:15px}.qres a:hover{background:var(--blue2);text-decoration:none}
.nav-toggle{display:none;background:none;border:0;padding:10px;margin-left:auto;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px 0}
@media (max-width:899px){
 .nav-toggle{display:block}
 .main-nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--navy);max-height:calc(100vh - 64px);overflow:auto;padding-bottom:12px}
 body.nav-open .main-nav{display:block}
 .main-nav>ul{flex-direction:column}
 .main-nav .nav-top{padding:12px 16px}
 .sub{position:static;box-shadow:none;border-radius:0;columns:1;max-width:none;width:auto;background:#26354b}
 .sub a{color:#e8eef8}
 .has-sub:hover .sub{display:none}.has-sub.open .sub{display:block}
 .search{order:3;width:100%;margin:0 0 10px}.search input{width:100%}
 .hdr{flex-wrap:wrap}
 .qres{left:0;right:0;width:auto}
}
/* layout */
.main{padding:18px 16px 40px}
.crumbs{font-size:14px;color:var(--mute);margin:4px 0 14px}.crumbs a{color:var(--mute)}.crumbs .sep{margin:0 4px}
.post{background:var(--card);border-radius:var(--r);padding:28px clamp(16px,4vw,44px) 30px;box-shadow:0 1px 3px rgba(20,30,50,.06);max-width:880px}
h1{font-size:clamp(28px,4.4vw,40px);line-height:1.18;margin:0 0 8px;letter-spacing:-.02em}
h2{font-size:clamp(22px,3vw,27px);line-height:1.25;margin:34px 0 10px;letter-spacing:-.01em;scroll-margin-top:80px}
.byline{color:var(--mute);font-size:14px;margin:0 0 16px}
.hero{margin:0 0 20px}.hero img{border-radius:var(--r);width:100%}
.post p{margin:0 0 14px}
.picks{background:var(--blue2);border-radius:var(--r);padding:12px 16px;margin:16px 0;font-size:16px}
.picks span{font-weight:600}
.toc{border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;margin:22px 0;background:#fbfcfe}
.toc ol{margin:8px 0 0;padding-left:20px;columns:2;column-gap:28px}.toc li{margin:3px 0;font-size:15.5px;break-inside:avoid}
@media(max-width:640px){.toc ol{columns:1}}
/* tables */
.tbl{overflow-x:auto;margin:10px 0 8px;border:1px solid var(--line);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;font-size:16px}
th{background:#f1f4f9;text-align:left;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2);padding:10px 14px}
td{padding:10px 14px;border-top:1px solid var(--line);vertical-align:top}
td.nm{font-weight:700;white-space:nowrap;cursor:copy}
tbody tr:nth-child(even){background:#fafbfd}
td.copied,.gen-out span.copied{background:#dff5e3!important}
@media(max-width:600px){
 table,thead,tbody,tr,td{display:block}thead{display:none}
 tr{padding:10px 14px;border-top:1px solid var(--line)}tr:first-child{border-top:0}
 td{border:0;padding:1px 0}td.nm{font-size:17px;white-space:normal}
 td:not(.nm)::before{content:attr(data-l) ": ";color:var(--mute);font-size:14px}
}
.tips ul{padding-left:20px}.tips li{margin:6px 0}
/* faq */
.faq details{border:1px solid var(--line);border-radius:10px;margin:8px 0;background:#fff}
.faq summary{cursor:pointer;padding:12px 16px;font-weight:600;list-style:none;position:relative;padding-right:40px}
.faq summary::after{content:"+";position:absolute;right:16px;top:9px;font-size:22px;color:var(--blue)}
.faq details[open] summary::after{content:"–"}
.faq details>div{padding:0 16px 6px}
/* azbar */
.azbox{margin:6px 0 18px;font-size:14px}
.az{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:4px 0}
.az strong{margin-right:6px;font-size:14px}
.az a,.az span{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:7px;background:var(--blue2);font-weight:700}
.az span{background:#f1f2f5;color:#b7bdc7}.az a.cur{background:var(--blue);color:#fff}
/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:14px;margin:12px 0 18px}
@media(max-width:600px){.cards{grid-template-columns:1fr 1fr;gap:10px}.card .ct{font-size:14px;padding:8px 10px 2px}.card .cnt{padding:0 10px 8px}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--ink);display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.card:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,30,50,.10)}
.card img{aspect-ratio:1.75;object-fit:cover;width:100%}
.card .ph{aspect-ratio:1.75;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#3f7bd6,#1f2b3d);color:#fff;font-size:40px;font-weight:800}
.card .ct{padding:10px 12px 2px;font-weight:650;font-size:15px;line-height:1.3}
.card .cnt{padding:0 12px 10px;color:var(--mute);font-size:13px}
.kids h2{margin-top:26px}
.chips{list-style:none;padding:0;margin:8px 0 16px;display:flex;flex-wrap:wrap;gap:8px}
.chips a{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:14.5px;color:var(--ink)}
.chips a:hover{border-color:var(--blue);color:var(--blue);text-decoration:none}
.related{max-width:880px;margin-top:26px}
.related h2{font-size:22px;margin:24px 0 6px}
.up{margin-top:18px}
/* generator */
.gen{border:2px solid var(--blue2);border-radius:var(--r);padding:18px;margin:18px 0;background:#fbfdff}
.gen-out{display:flex;flex-wrap:wrap;gap:8px;min-height:90px}
.gen-out span{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-weight:700;cursor:copy}
.gen-ctl{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.gen-ctl button{background:var(--blue);color:#fff;border:0;border-radius:999px;padding:10px 18px;font-weight:700;font-size:15px;cursor:pointer}
.gen-ctl button:hover{background:#2f67bd}
.gen-note{font-size:13px;color:var(--mute);margin:10px 0 0!important}
/* home */
.homehero{display:flex;gap:30px;align-items:center;background:linear-gradient(135deg,#1f2b3d,#34507a);color:#fff;border-radius:18px;padding:34px clamp(18px,4vw,48px);margin:8px 0 26px}
.homehero h1{color:#fff}.homehero p{color:#dbe6f7;font-size:18px}
.homehero img{width:200px;flex:none}
.bigsearch{position:relative;max-width:560px}.bigsearch input{width:100%;padding:14px 20px;font-size:17px}
.bigsearch .qres{left:0;right:auto;width:100%}
@media(max-width:760px){.homehero{flex-direction:column;align-items:flex-start}.homehero img{display:none}}
.homesec{margin:10px 0 26px}.homesec h2 a{color:var(--ink)}.more{font-weight:600}
.home .faq{background:#fff;border-radius:var(--r);padding:8px 24px 18px;max-width:880px}
/* footer */
.site-footer{background:var(--navy);color:#c7d2e3;margin-top:40px;padding:34px 0 20px;font-size:14.5px}
.site-footer a{color:#e6eefb}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}
.fgrid h3{font-size:15px;margin:0 0 8px}.fgrid ul{list-style:none;margin:0;padding:0}.fgrid li{margin:3px 0}
.fbottom{border-top:1px solid #33435c;margin-top:22px;padding-top:16px}
.copy{color:#8e9bb0}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:28px;align-items:start}
.layout .post,.layout .related{max-width:none}
.side{position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto}
.sbox{background:#fff;border-radius:var(--r);padding:14px 16px;margin-bottom:16px;box-shadow:0 1px 3px rgba(20,30,50,.06)}
.sbox h3{font-size:15px;margin:0 0 8px;text-transform:uppercase;letter-spacing:.04em}.sbox h3 a{color:var(--ink)}
.sbox ul{list-style:none;margin:0;padding:0}.sbox li a{display:block;padding:5px 8px;border-radius:8px;font-size:14.5px;color:var(--ink2)}
.sbox li a:hover{background:var(--blue2);text-decoration:none}.sbox li a.cur{background:var(--blue);color:#fff}
@media(max-width:999px){.layout{grid-template-columns:1fr}.side{position:static;max-height:none}}