:root{--red:#df151d;--red-dark:#a20a11;--ink:#202124;--muted:#667080;--line:#dce1e7;--bg:#f3f5f7;--green:#176832;--blue:#1450a3;--gold:#8e5c00}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,"Helvetica Neue",sans-serif}
.page{width:min(1180px,calc(100% - 24px));margin:18px auto 55px}
.hero{padding:clamp(27px,5vw,50px);border-radius:23px;background:radial-gradient(circle at 90% 5%,rgba(255,255,255,.15),transparent 18rem),linear-gradient(135deg,#9d0910,#df151d);color:#fff;box-shadow:0 17px 42px rgba(100,5,10,.22)}
.eyebrow{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;opacity:.88}
.hero h1{margin:.18em 0;font-size:clamp(38px,6vw,67px);line-height:.98;letter-spacing:-.04em}
.hero p{max-width:760px;margin:12px 0 0;font-size:17px;line-height:1.55}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.badge{padding:7px 10px;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:rgba(255,255,255,.1);font-size:12px;font-weight:900}
.related{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.related button{border:1px solid var(--line);border-radius:999px;background:#fff;padding:9px 12px;color:#9c0a10;font-weight:900;cursor:pointer}
.panel{margin:14px 0;padding:20px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 6px 20px rgba(28,39,54,.06)}
.panel h2{margin:0 0 14px;font-size:25px}
.finder{display:grid;grid-template-columns:minmax(220px,1.6fr) repeat(4,minmax(120px,1fr));gap:10px}
.finder label{display:grid;gap:6px;color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
.finder select,.filters input,.filters select,.calculator input,.calculator select{width:100%;min-height:44px;padding:10px 11px;border:1px solid #bcc4ce;border-radius:11px;background:#fff;color:var(--ink)}
.rate-box{padding:14px;border-radius:13px;background:#f6f8fa;border-top:5px solid var(--red)}
.rate-box span{display:block;color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase}.rate-box strong{display:block;margin-top:7px;font-size:25px}
.rate-box.base{border-color:var(--green)}.rate-box.ot1{border-color:var(--gold)}.rate-box.ot2{border-color:var(--red)}.rate-box.bonus{border-color:var(--blue)}
.filters{display:grid;grid-template-columns:2fr 1fr auto;gap:10px;align-items:end}.count{padding:12px;color:var(--muted);font-size:13px;font-weight:900}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px}
table{width:100%;min-width:760px;border-collapse:collapse;background:#fff}
th,td{padding:12px 13px;border-bottom:1px solid #e5e8ec;text-align:left}
th{position:sticky;top:0;background:#2e3641;color:#fff;font-size:12px}
td.money{font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
tbody tr:nth-child(even) td{background:#f8f9fb}tbody tr:hover td{background:#fff7d9}
.empty{display:none;padding:30px;text-align:center;color:var(--muted)}
.explain{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.explain article{padding:14px;border:1px solid var(--line);border-radius:13px;background:#fff}.explain strong{display:block;margin-bottom:6px}.explain p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}
.source{color:var(--muted);font-size:12px;line-height:1.5}
@media(max-width:900px){.finder{grid-template-columns:repeat(2,1fr)}.finder label{grid-column:1/-1}.explain{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.page{width:min(100% - 14px,1180px);margin-top:7px}.hero{border-radius:16px}.finder,.filters,.explain{grid-template-columns:1fr}.count{padding:4px}}