:root{--serp-ink:#102330;--serp-muted:#60727d;--serp-line:#d7e4e7;--serp-teal:#087f83;--serp-orange:#ef7d1a}
*{box-sizing:border-box}
.serp-page{min-height:100vh;margin:0;background:radial-gradient(circle at 8% 0,#dff6f0 0,transparent 34%),radial-gradient(circle at 92% 12%,#fff0dc 0,transparent 30%),#f7faf9;color:var(--serp-ink)}
.serp-header{display:flex;align-items:center;justify-content:space-between;max-width:1120px;margin:auto;padding:22px 28px}.serp-header .brand{text-decoration:none}.serp-test-badge{border:1px solid #d6e3e5;border-radius:999px;padding:9px 13px;background:rgba(255,255,255,.8);color:#36515a;font-size:11px;font-weight:900;letter-spacing:.06em;text-decoration:none;text-transform:uppercase}
.serp-main{max-width:920px;margin:auto;padding:34px 28px 72px}.serp-intro{text-align:center}.serp-intro h1{margin:5px 0 12px;font-size:clamp(38px,7vw,68px);line-height:.98;letter-spacing:-.045em}.serp-intro>p:last-of-type{max-width:660px;margin:0 auto;color:var(--serp-muted);font-size:18px;line-height:1.55}
.serp-search{display:grid;grid-template-columns:minmax(0,1fr) 160px auto;gap:10px;align-items:end;margin:30px 0 34px;padding:14px;border:1px solid var(--serp-line);border-radius:20px;background:rgba(255,255,255,.86);box-shadow:0 14px 38px rgba(18,64,68,.08);text-align:left}.serp-search label span{display:block;margin:0 0 6px;color:#526770;font-size:11px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}.serp-search input{width:100%;height:46px;border:1px solid #c8d9dc;border-radius:12px;padding:0 13px;background:#fff;color:var(--serp-ink);font:700 15px/1 inherit;outline:none}.serp-search input:focus{border-color:var(--serp-teal);box-shadow:0 0 0 3px rgba(8,127,131,.12)}.serp-search button{height:46px;border:0;border-radius:12px;padding:0 18px;background:var(--serp-ink);color:#fff;font-weight:900;cursor:pointer}
.serp-results{display:grid;gap:13px}.serp-job{--card:#e9f8f3;--edge:#0a968d;display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:18px;align-items:center;min-height:128px;border:1px solid color-mix(in srgb,var(--edge) 28%,white);border-left:6px solid var(--edge);border-radius:20px;padding:21px 22px;background:linear-gradient(120deg,var(--card),#fff 78%);box-shadow:0 12px 30px rgba(20,56,63,.07);transition:transform .18s ease,box-shadow .18s ease}.serp-job:hover{transform:translateY(-2px);box-shadow:0 17px 38px rgba(20,56,63,.12)}.serp-job-2{--card:#fff1dc;--edge:#ed841d}.serp-job-3{--card:#f2eafe;--edge:#8c56ce}.serp-job-4{--card:#e7f2ff;--edge:#367fc3}.serp-job-5{--card:#fff0f0;--edge:#d65f68}.serp-job-6{--card:#eef6d9;--edge:#739b26}.serp-job-number{display:grid;place-items:center;width:52px;height:52px;border-radius:17px;background:var(--edge);color:#fff;font-size:17px;font-weight:950}.serp-job-label{color:var(--edge);font-size:10px;font-weight:950;letter-spacing:.12em;text-transform:uppercase}.serp-job h2{margin:4px 0 6px;font-size:21px;line-height:1.18;letter-spacing:-.02em}.serp-job p{margin:0;color:var(--serp-muted);font-size:13px}.serp-job p span{color:var(--edge)}.serp-job p b{display:inline-block;margin-left:8px;border-radius:999px;padding:4px 8px;background:rgba(255,255,255,.82);color:#344f58;font-size:11px}.serp-job>a{border-radius:12px;padding:12px 15px;background:var(--edge);color:#fff;text-decoration:none;font-size:13px;font-weight:900;white-space:nowrap}.serp-empty{border:1px dashed #bdcfd2;border-radius:20px;padding:38px;background:#fff;text-align:center}.serp-empty h2{margin:0 0 8px}.serp-empty p{margin:0;color:var(--serp-muted)}.serp-footer{padding:22px;text-align:center;color:#718187;font-size:12px}
@media(max-width:680px){.serp-header{padding:16px}.serp-header .brand small{display:none}.serp-main{padding:22px 14px 92px}.serp-intro{text-align:left}.serp-intro>p:last-of-type{font-size:16px}.serp-search{grid-template-columns:1fr}.serp-job{grid-template-columns:44px minmax(0,1fr);gap:12px;min-height:0;padding:17px 15px}.serp-job-number{width:42px;height:42px;border-radius:13px;font-size:14px}.serp-job h2{font-size:18px}.serp-job>a{grid-column:1/-1;text-align:center}.serp-test-badge{font-size:9px}}
