:root{
  --bg:#eef3fb; --panel:#ffffff; --panel2:#f4f7fc; --line:#e2e8f2;
  --text:#16233a; --muted:#5f7089; --brand:#2f6bff; --brand2:#1b57f0;
  --good:#12b886; --warn:#f59f0b; --bad:#f0453f; --radius:14px;
  --sun1:#ffd36e; --sun2:#ff9d5c; --sky1:#4f8cff; --sky2:#7bd0ff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:
    radial-gradient(1100px 520px at 82% -8%, #ffe9c2 0, rgba(255,233,194,0) 60%),
    radial-gradient(1000px 500px at 8% -6%, #d8e8ff 0, rgba(216,232,255,0) 55%),
    var(--bg) fixed;
  color:var(--text);font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif}
a{color:var(--brand2);text-decoration:none}
a:hover{color:#0e40c9}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:18px;height:62px}
.brand{font-weight:900;font-size:20px;color:#12213c;letter-spacing:.2px}
.brand::before{content:"☀";margin-right:6px;color:#ff9f43}
.mainnav{display:flex;gap:16px}
.mainnav a{color:var(--muted);font-weight:600}
.mainnav a.on,.mainnav a:hover{color:#0e2444}
.spacer{flex:1}
.actions{display:flex;align-items:center;gap:10px}
.who{color:var(--muted);font-size:13px;margin-right:4px}
.who b{color:var(--brand2)}
.langsel{width:auto;padding:6px 8px;background:#fff;border:1px solid var(--line);border-radius:10px;color:var(--text);font-size:13px;cursor:pointer}
.btn{display:inline-block;padding:9px 16px;border-radius:11px;background:linear-gradient(180deg,#3d78ff,#2f6bff);color:#fff;font-weight:700;border:1px solid transparent;cursor:pointer;box-shadow:0 6px 16px rgba(47,107,255,.25)}
.btn:hover{filter:brightness(1.06);color:#fff}
.btn.ghost{background:#fff;border-color:var(--line);color:var(--text);box-shadow:none}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand2)}
.btn.sm{padding:5px 11px;font-size:13px;box-shadow:none}
.btn.bad{background:linear-gradient(180deg,#ff5a54,#f0453f)}
.btn.good{background:linear-gradient(180deg,#16c795,#12b886);color:#043027}
.btn.block{display:block;width:100%;text-align:center}
.btn.big{padding:13px 26px;font-size:17px;border-radius:13px}
main.wrap{padding-top:28px;padding-bottom:64px}
h1,h2,h3{color:#12213c;line-height:1.2}
h1{font-size:30px;margin:.2em 0 .4em}
h2{font-size:22px;margin:1.4em 0 .6em}
.muted{color:var(--muted)}
/* hero */
.hero{position:relative;padding:52px 34px 40px;border-radius:22px;overflow:hidden;
  background:linear-gradient(135deg,#fff7ea 0,#eaf2ff 60%,#fff 100%);
  border:1px solid #efe3cf;box-shadow:0 16px 44px rgba(60,90,160,.10)}
.hero h1{font-size:44px;max-width:20ch;background:linear-gradient(90deg,#ff8a3d,#2f6bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:18px;color:#3a4a63;max-width:60ch}
.hero .cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;font-weight:800;font-size:13px;
  background:linear-gradient(180deg,#fff,#fff6e6);border:1px solid #ffdfa6;color:#b5590a;box-shadow:0 3px 10px rgba(255,160,60,.15)}
.badge.blue{background:linear-gradient(180deg,#fff,#eaf2ff);border-color:#bcd4ff;color:#1b57f0}
.badge.green{background:linear-gradient(180deg,#fff,#e7fbf3);border-color:#a9ecd3;color:#0a8f68}
.pricehook{margin-top:16px;font-size:15px;color:#7a4a12;font-weight:700}
.grid{display:grid;gap:16px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.grid.c3,.grid.c4,.grid.c2{grid-template-columns:1fr}.hero h1{font-size:34px}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:0 6px 18px rgba(60,90,160,.06)}
.card h3{margin:.1em 0 .4em;font-size:16px}
.stat{padding:18px}
.stat .k{color:var(--muted);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.stat .v{font-size:26px;font-weight:800;color:#12213c;margin-top:6px}
.stat .v.good{color:var(--good)} .stat .v.warn{color:#d98407} .stat .v.bad{color:var(--bad)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.3px;background:var(--panel2)}
td.r,th.r{text-align:right}
tr:hover td{background:#f7faff}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid var(--line)}
.pill.good{color:#0a8f68;border-color:#a9ecd3;background:#eafaf4}
.pill.warn{color:#b5730a;border-color:#ffdfa6;background:#fff6e6}
.pill.bad{color:#c62f2a;border-color:#ffc7c4;background:#fdecec}
.pill.mut{color:var(--muted);background:var(--panel2)}
form.stack{display:flex;flex-direction:column;gap:12px;max-width:420px}
label{font-weight:600;font-size:14px;display:block;margin-bottom:5px;color:#2a3a55}
input,select,textarea{width:100%;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:10px;color:var(--text);font-size:15px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(47,107,255,.12)}
.inline{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.flash{padding:11px 14px;border-radius:10px;margin:14px 0;border:1px solid var(--line)}
.flash.error{background:#fdecec;border-color:#ffc7c4;color:#b02a25}
.flash.ok{background:#eafaf4;border-color:#a9ecd3;color:#0a7d5c}
.flash.info{background:#eaf2ff;border-color:#bcd4ff;color:#1b57f0}
.authbox{max-width:400px;margin:40px auto}
.code{background:#0f1830;border:1px solid #1e2c4a;border-radius:10px;padding:14px;font:13px/1.6 "SFMono-Regular",Consolas,monospace;color:#d6e4ff;overflow-x:auto;white-space:pre}
.kv{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line)}
.kv .k{color:var(--muted)}
.copy{cursor:pointer;user-select:all}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 18px}
.tabs a{padding:7px 13px;border-radius:10px;color:var(--muted);font-weight:700;border:1px solid transparent}
.tabs a.on{background:#fff;border-color:var(--line);color:#12213c;box-shadow:0 3px 10px rgba(60,90,160,.07)}
.small{font-size:13px}
.right{text-align:right}
.mt{margin-top:16px}.mb{margin-bottom:16px}
.spark{display:flex;align-items:flex-end;gap:3px;height:60px}
.spark i{flex:1;background:linear-gradient(180deg,#ffb14e,#2f6bff);border-radius:3px 3px 0 0;min-height:2px}
/* blog / articles */
.artlist{display:grid;gap:14px}
.artcard{display:block;padding:18px 20px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 18px rgba(60,90,160,.06)}
.artcard:hover{border-color:var(--brand);transform:translateY(-1px);transition:.15s}
.artcard h3{margin:0 0 6px;color:#12213c}
.artmeta{color:var(--muted);font-size:12px;margin-bottom:6px}
.article{max-width:760px;margin:0 auto}
.article h2{font-size:22px;margin:1.3em 0 .5em}
.article p{margin:.8em 0;color:#2a3a55}
.article ul{padding-left:1.3em}.article li{margin:.3em 0}
.ctabox{margin:26px 0;padding:22px;border-radius:16px;text-align:center;
  background:linear-gradient(135deg,#fff7ea,#eaf2ff);border:1px solid #ffe0ad}
.ctabox h3{font-size:20px;margin:.1em 0 .4em}
.ctabox p{color:#5a4a2a;margin:0 0 14px}