:root { --bg:#f8fafc; --surface:#ffffff; --surface2:#f1f5f9; --nav:#0f172a; --primary:#2563eb; --primary-d:#1d4ed8; --primary-l:#eff6ff; --green:#059669; --green-l:#ecfdf5; --amber:#d97706; --amber-l:#fffbeb; --red:#dc2626; --red-l:#fef2f2; --purple:#7c3aed; --purple-l:#f5f3ff; --text:#0f172a; --text2:#374151; --muted:#6b7280; --border:#e5e7eb; --r:12px; --sh:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04); --sh-md:0 4px 12px rgba(0,0,0,.08); --sh-lg:0 8px 24px rgba(0,0,0,.10); --font-head:'Plus Jakarta Sans',sans-serif; --font-body:'Plus Jakarta Sans',sans-serif} *,*::before,*::after { box-sizing:border-box; margin:0; padding:0} html { scroll-behavior:smooth; -webkit-tap-highlight-color:transparent} body { background:var(--bg); color:var(--text); font-family:var(--font-body); min-height:100vh; line-height:1.65; font-size:14px} .pg-nav { position:sticky; top:0; z-index:200; background:var(--nav); height:54px; display:flex; align-items:center; padding:0 20px; gap:10px; box-shadow:0 2px 14px rgba(0,0,0,.25)} .nav-logo { font-family:var(--font-head); font-weight:800; font-size:19px; color:#fff; text-decoration:none; letter-spacing:-.3px; flex-shrink:0} .nav-logo em { color:#60a5fa; font-style:normal} .nav-links-right { display:flex; gap:2px; margin-left:auto; align-items:center} .nav-links-right a { color:rgba(255,255,255,.6); text-decoration:none; font-size:12px; font-weight:600; padding:5px 10px; border-radius:7px; transition:all .18s; white-space:nowrap} .nav-links-right a:hover { color:#fff; background:rgba(255,255,255,.1)} .nav-home { border:1px solid rgba(255,255,255,.12) !important} .nav-game-link { background:rgba(37,99,235,.4) !important; color:#93c5fd !important; border:1px solid rgba(96,165,250,.25) !important} @media(max-width:520px) { .nav-links-right a:not(.nav-home):not(.nav-game-link) { display:none} } .breadcrumb { font-size:12px; color:var(--muted); margin-bottom:14px} .breadcrumb a { color:var(--primary); text-decoration:none} .breadcrumb a:hover { text-decoration:underline} .pg-wrap { max-width:960px; margin:0 auto; padding:24px 16px 56px} .pg-wrap-wide { max-width:1100px; margin:0 auto; padding:24px 16px 56px} .page-hero { background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 60%,#0f172a 100%); border-radius:14px; padding:26px 22px; margin-bottom:20px; position:relative; overflow:hidden} .page-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 25% 50%,rgba(37,99,235,.18),transparent 65%); pointer-events:none} .hero-inner { position:relative; z-index:1} .hero-tag { display:inline-flex; align-items:center; gap:5px; background:rgba(96,165,250,.15); border:1px solid rgba(96,165,250,.28); color:#93c5fd; padding:4px 12px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.04em; margin-bottom:10px} .page-hero h1 { font-family:var(--font-head); font-size:clamp(20px,4vw,30px); font-weight:800; color:#fff; line-height:1.2; margin-bottom:8px} .page-hero h1 em { color:#60a5fa; font-style:normal} .page-hero p { font-size:13px; color:rgba(255,255,255,.6); max-width:540px; line-height:1.7; margin-bottom:14px} .hero-pills { display:flex; gap:7px; flex-wrap:wrap} .hero-pill { padding:4px 11px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.13); border-radius:7px; font-size:11px; font-weight:600; color:rgba(255,255,255,.75)} .calc-card { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r); padding:20px; box-shadow:var(--sh); margin-bottom:14px} .card-title { font-family:var(--font-head); font-size:13px; font-weight:700; color:var(--text); padding-bottom:10px; border-bottom:1px solid var(--border); margin-bottom:14px; display:flex; align-items:center; gap:6px} .two-col { display:grid; grid-template-columns:1fr 1.1fr; gap:14px} @media(max-width:680px) { .two-col { grid-template-columns:1fr} } .field { margin-bottom:13px} .field label { display:block; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px} .inp { width:100%; padding:10px 13px; border:1.5px solid var(--border); border-radius:9px; font-size:15px; font-weight:600; color:var(--text); outline:none; background:var(--surface2); font-family:var(--font-body); transition:border .2s,background .2s} .inp:focus { border-color:var(--primary); background:#fff} .inp-row { display:flex; gap:8px; align-items:center} .inp-row .inp { flex:1} .range-val { font-family:var(--font-head); font-weight:800; font-size:13px; color:var(--primary); min-width:68px; text-align:right; flex-shrink:0} input[type=range] { flex:1; accent-color:var(--primary); cursor:pointer} select.inp { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%236b7280' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:16px; padding-right:32px} .field-hint { font-size:11px; color:#9ca3af; margin-top:3px} .result-hero { background:linear-gradient(135deg,var(--primary-l),#dbeafe); border:2px solid #93c5fd; border-radius:11px; padding:18px; text-align:center; margin-bottom:14px} .result-hero.green { background:linear-gradient(135deg,var(--green-l),#d1fae5); border-color:#6ee7b7} .result-hero.purple { background:linear-gradient(135deg,var(--purple-l),#ede9fe); border-color:#c4b5fd} .res-label { font-size:11px; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px} .result-hero.green .res-label { color:var(--green)} .result-hero.purple .res-label { color:var(--purple)} .res-value { font-family:var(--font-head); font-size:40px; font-weight:800; color:var(--primary); line-height:1} .result-hero.green .res-value { color:var(--green)} .result-hero.purple .res-value { color:var(--purple)} .res-sub { font-size:12px; color:var(--muted); margin-top:5px} .metric-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; margin-bottom:12px} .metric-box { background:var(--surface2); border-radius:9px; padding:11px; text-align:center; border:1px solid var(--border)} .metric-val { font-family:var(--font-head); font-size:17px; font-weight:800; color:var(--primary)} .metric-val.green { color:var(--green)} .metric-val.amber { color:var(--amber)} .metric-val.red { color:var(--red)} .metric-lbl { font-size:10px; color:var(--muted); margin-top:2px} .s-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px} .s-row:last-child { border-bottom:none} .s-label { color:var(--muted)} .s-value { font-weight:700; color:var(--text)} .s-value.primary { color:var(--primary)} .s-value.green { color:var(--green)} .s-value.red { color:var(--red)} .data-table { width:100%; border-collapse:collapse; font-size:12px; border-radius:var(--r); overflow:hidden; border:1px solid var(--border)} .data-table th { background:var(--nav); color:#fff; padding:10px 12px; text-align:left; font-size:11px; font-weight:700; font-family:var(--font-head)} .data-table td { padding:9px 12px; border-bottom:1px solid var(--border); color:var(--text2)} .data-table td:first-child { font-weight:600; color:var(--text)} .data-table tr:last-child td { border-bottom:none} .data-table tr:nth-child(even) td { background:var(--surface2)} .data-table .hl td { background:var(--primary-l); color:var(--primary) !important; font-weight:700} .bar-row { display:flex; align-items:center; gap:8px; margin-bottom:7px} .bar-label { font-size:11px; color:var(--muted); width:65px; flex-shrink:0} .bar-track { flex:1; height:7px; background:var(--border); border-radius:4px; overflow:hidden} .bar-fill { height:100%; border-radius:4px; transition:width .4s ease} .bar-value { font-size:11px; font-weight:700; color:var(--text); min-width:48px; text-align:right; flex-shrink:0} .calc-btn { width:100%; padding:12px; margin-top:6px; background:var(--primary); color:#fff; font-size:15px; font-weight:700; font-family:var(--font-head); border:none; border-radius:10px; cursor:pointer; transition:all .2s} .calc-btn:hover { background:var(--primary-d); transform:translateY(-1px)} .calc-btn.green { background:var(--green)} .calc-btn.green:hover { background:#047857} .callout { border-radius:0 var(--r) var(--r) 0; padding:13px 16px; margin:14px 0; font-size:13px; line-height:1.75; border-left:4px solid} .callout.blue { background:var(--primary-l); border-color:var(--primary); color:#1e40af} .callout.green { background:var(--green-l); border-color:var(--green); color:#065f46} .callout.amber { background:var(--amber-l); border-color:var(--amber); color:#92400e} .callout.red { background:var(--red-l); border-color:var(--red); color:#991b1b} .ad-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:10px; margin:18px 0; min-height:90px; display:flex; align-items:center; justify-content:center; box-shadow:var(--sh)} .badge { display:inline-block; font-size:9px; font-weight:700; padding:2px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em} .badge-hot { background:#fef2f2; color:#dc2626; border:1px solid #fecaca} .badge-new { background:#ecfdf5; color:#059669; border:1px solid #a7f3d0} .badge-live { background:#fffbeb; color:#d97706; border:1px solid #fde68a} .badge-blue { background:#eff6ff; color:#2563eb; border:1px solid #bfdbfe} .faq-section { margin-top:24px} .faq-heading { font-family:var(--font-head); font-size:17px; font-weight:800; color:var(--text); margin-bottom:12px} .faq-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm,9px); margin-bottom:6px; overflow:hidden; box-shadow:var(--sh)} .faq-q { padding:13px 16px; font-size:13px; font-weight:700; cursor:pointer; display:flex; justify-content:space-between; align-items:center; color:var(--text); transition:background .18s; gap:10px} .faq-q:hover { background:var(--surface2)} .faq-icon { color:var(--primary); flex-shrink:0; transition:transform .25s; font-size:12px} .faq-item.open .faq-icon { transform:rotate(180deg)} .faq-a { padding:0 16px; max-height:0; overflow:hidden; transition:max-height .3s ease,padding .3s; font-size:13px; color:var(--text2); line-height:1.8} .faq-item.open .faq-a { max-height:500px; padding:2px 16px 14px} .related-section { margin-top:24px} .related-heading { font-family:var(--font-head); font-size:14px; font-weight:700; color:var(--text); margin-bottom:10px} .related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:8px} .related-card { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r); padding:13px; text-decoration:none; color:var(--text); transition:all .18s; box-shadow:var(--sh); display:block} .related-card:hover { border-color:var(--primary); box-shadow:var(--sh-md); transform:translateY(-2px)} .related-card .rc-icon { font-size:20px; margin-bottom:7px} .related-card .rc-name { font-family:var(--font-head); font-size:12px; font-weight:700; margin-bottom:3px} .related-card .rc-desc { font-size:11px; color:var(--muted); line-height:1.5} .content-section { margin-top:24px} .content-section h2 { font-family:var(--font-head); font-size:18px; font-weight:800; color:var(--text); margin-bottom:10px; margin-top:22px; padding-top:4px} .content-section h3 { font-family:var(--font-head); font-size:15px; font-weight:700; color:var(--primary); margin-bottom:8px; margin-top:16px} .content-section p { font-size:13px; color:var(--text2); line-height:1.85; margin-bottom:12px} .content-section ul,.content-section ol { margin:0 0 12px 18px; font-size:13px; color:var(--text2); line-height:2.2} .pg-footer { background:#0f172a; margin-top:40px; padding:32px 20px 20px} .pg-footer-inner { max-width:960px; margin:0 auto} .footer-top { display:grid; grid-template-columns:1fr repeat(4,auto); gap:28px; margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.06)} @media(max-width:700px) { .footer-top { grid-template-columns:1fr 1fr} } @media(max-width:420px) { .footer-top { grid-template-columns:1fr} } .footer-brand {} .footer-logo { font-family:var(--font-head); font-weight:800; font-size:18px; color:#fff; text-decoration:none; display:block; margin-bottom:6px} .footer-logo em { color:#60a5fa; font-style:normal} .footer-tagline { font-size:12px; color:rgba(255,255,255,.35); line-height:1.6; max-width:180px} .footer-col h4 { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.3); margin-bottom:10px} .footer-col a { display:block; color:rgba(255,255,255,.52); text-decoration:none; font-size:12px; margin-bottom:6px; transition:color .18s} .footer-col a:hover { color:#fff} .footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; font-size:11px; color:rgba(255,255,255,.22)} @media(max-width:480px) { .pg-wrap,.pg-wrap-wide { padding:18px 12px 40px} .page-hero { padding:20px 16px; border-radius:10px} .metric-grid { grid-template-columns:1fr 1fr} .two-col { grid-template-columns:1fr} .res-value { font-size:32px} } .pg-footer { background:linear-gradient(180deg,#0f172a 0%,#020617 100%); margin-top:56px; padding:52px 24px 0; position:relative; overflow:hidden} .pg-footer::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(96,165,250,.4),rgba(99,102,241,.4),transparent)} .pg-footer::after { content:''; position:absolute; top:-120px; right:-80px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,rgba(37,99,235,.07),transparent 70%); pointer-events:none} .pg-footer-inner { max-width:1060px; margin:0 auto; position:relative; z-index:1} .footer-top { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:36px; margin-bottom:0; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.07)} @media(max-width:860px) { .footer-top { grid-template-columns:1fr 1fr 1fr} } @media(max-width:560px) { .footer-top { grid-template-columns:1fr 1fr; gap:24px} } @media(max-width:380px) { .footer-top { grid-template-columns:1fr} } .footer-brand { } .footer-logo { font-family:var(--font-head); font-weight:800; font-size:20px; color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:2px; margin-bottom:10px; letter-spacing:-.3px} .footer-logo em { color:#60a5fa; font-style:normal} .footer-tagline { font-size:13px; color:rgba(255,255,255,.38); line-height:1.7; max-width:200px; margin-bottom:18px} .footer-badges { display:flex; flex-wrap:wrap; gap:6px} .footer-badge { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:6px; font-size:10px; font-weight:700; letter-spacing:.04em; background:rgba(255,255,255,.06); color:rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.08)} .footer-col { } .footer-col h4 { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.28); margin-bottom:14px; display:flex; align-items:center; gap:6px} .footer-col h4::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.07); display:block} .footer-col a { display:flex; align-items:center; color:rgba(255,255,255,.48); text-decoration:none; font-size:12.5px; font-weight:500; margin-bottom:9px; transition:all .18s; padding:2px 0} .footer-col a:hover { color:#fff; transform:translateX(3px)} .footer-divider { height:1px; background:rgba(255,255,255,.06); margin:0} .footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding:20px 0 24px; font-size:12px; color:rgba(255,255,255,.2)} .footer-bottom-links { display:flex; gap:16px; flex-wrap:wrap} .footer-bottom-links a { color:rgba(255,255,255,.3); text-decoration:none; font-size:11px; transition:color .18s} .footer-bottom-links a:hover { color:rgba(255,255,255,.7)} .pg-nav { gap:8px} .pg-nav .nav-links-right { flex-shrink:0}