.badge-page { position: relative; z-index: 1; }
.badge-hero { padding: clamp(132px, 16vw, 210px) 0 clamp(64px, 9vw, 110px); overflow: hidden; }
.badge-hero::before { content:""; position:absolute; width:min(720px,90vw); height:min(720px,90vw); right:-16%; top:-18%; border-radius:50%; background:radial-gradient(circle,rgba(118,87,255,.24),rgba(0,184,212,.08) 42%,transparent 70%); filter:blur(12px); pointer-events:none; }
.badge-hero-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr); gap:clamp(36px,8vw,100px); align-items:center; }
.badge-back { color:var(--muted); font-size:.86rem; font-weight:700; width:max-content; transition:color .25s,transform .25s; }
.badge-back:hover { color:var(--text); transform:translateX(-4px); }
.badge-gradient-text { color:transparent; background:linear-gradient(120deg,#f22ed0,#8758ff 48%,#2f8fff); background-clip:text; -webkit-background-clip:text; }
.badge-local-note { display:flex; gap:9px; align-items:center; color:var(--muted); font-size:.8rem; }
.badge-local-note::before { content:"⌾"; color:var(--accent); font-size:1.15rem; }
.badge-progress-orbit { justify-self:center; width:clamp(190px,25vw,292px); aspect-ratio:1; border-radius:38%; display:grid; place-content:center; text-align:center; position:relative; background:radial-gradient(circle at 40% 35%,rgba(118,87,255,.34),rgba(10,10,22,.94) 64%); border:2px solid transparent; background-clip:padding-box; box-shadow:0 0 0 2px #a83cff,0 0 42px rgba(118,87,255,.35),inset 0 0 55px rgba(47,143,255,.15); transform:rotate(5deg); }
.badge-progress-orbit::after { content:""; position:absolute; inset:12%; border:1px solid rgba(255,255,255,.14); border-radius:50%; }
.badge-progress-orbit span { font:700 clamp(3.2rem,7vw,5.8rem)/.9 var(--font-display); letter-spacing:-.06em; }
.badge-progress-orbit small { margin-top:14px; color:#b9aaff; letter-spacing:.34em; font-weight:800; }
.badge-workspace { padding:0 0 clamp(90px,12vw,150px); }
.badge-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:var(--line); box-shadow:var(--shadow); }
.badge-summary > div:not(.badge-progress-track) { display:flex; flex-direction:column; align-items:center; padding:22px 12px; background:color-mix(in srgb,var(--ink-2) 92%,transparent); }
.badge-summary strong { font-size:clamp(1.45rem,3vw,2.1rem); line-height:1; }
.badge-summary span:not(#progress-bar) { color:var(--muted); font-size:.75rem; margin-top:7px; }
.badge-progress-track { grid-column:1/-1; height:5px; background:var(--ink-3); }
.badge-progress-track span { display:block; height:100%; width:0; background:linear-gradient(90deg,#ef2ed1,#7657ff,#2f8fff); box-shadow:0 0 15px rgba(118,87,255,.7); transition:width .5s var(--ease); }
.badge-controls { position:sticky; top:70px; z-index:20; display:grid; grid-template-columns:minmax(200px,1.6fr) repeat(2,minmax(150px,.7fr)) auto; gap:10px; padding:14px; margin:24px 0; border:1px solid var(--line); border-radius:20px; background:color-mix(in srgb,var(--glass) 94%,transparent); backdrop-filter:blur(20px) saturate(150%); box-shadow:0 18px 50px -32px rgba(0,0,0,.8); }
.badge-search { display:flex; align-items:center; gap:10px; padding:0 14px; min-height:46px; border:1px solid var(--line); border-radius:13px; background:var(--ink-2); color:var(--muted); }
.badge-search input { width:100%; border:0; outline:0; background:transparent; color:var(--text); }
.badge-controls select { min-height:46px; padding:0 36px 0 13px; border:1px solid var(--line); border-radius:13px; background:var(--ink-2); color:var(--text); }
.badge-status-filter { display:flex; padding:4px; border:1px solid var(--line); border-radius:13px; background:var(--ink-2); }
.badge-status-filter button { border:0; border-radius:9px; padding:0 13px; background:transparent; color:var(--muted); cursor:pointer; font-size:.78rem; font-weight:750; }
.badge-status-filter button[aria-pressed="true"] { color:#fff; background:var(--qwizzy); box-shadow:0 5px 14px rgba(118,87,255,.28); }
.badge-results-meta { margin:0 2px 14px; color:var(--muted); font-size:.83rem; }
.web-badge-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.web-badge-card { --badge-hue:265; position:relative; display:flex; flex-direction:column; min-height:216px; padding:20px; overflow:hidden; border:1px solid hsl(var(--badge-hue) 70% 66% / .45); border-radius:22px; background:linear-gradient(145deg,hsl(var(--badge-hue) 62% 20% / .88),hsl(calc(var(--badge-hue) + 30) 75% 42% / .9)); box-shadow:0 18px 35px -26px hsl(var(--badge-hue) 90% 60% / .7); color:#fff; transition:transform .35s var(--ease),opacity .3s,border-color .3s; }
.web-badge-card::after { content:""; position:absolute; width:120px; height:260px; right:-70px; top:-70px; transform:rotate(35deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.17),transparent); pointer-events:none; }
.web-badge-card:hover { transform:translateY(-4px); border-color:hsl(var(--badge-hue) 90% 78% / .8); }
.web-badge-card.is-done { opacity:.68; }
.web-badge-card.is-done .badge-card-check { background:#fff; color:#171422; }
.badge-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.badge-card-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:rgba(255,255,255,.14); font-size:1.3rem; }
.badge-card-check { position:relative; z-index:2; width:38px; height:38px; border:1px solid rgba(255,255,255,.48); border-radius:50%; background:rgba(3,3,12,.18); color:transparent; cursor:pointer; font-size:1.15rem; transition:.25s; }
.badge-card-check:hover { transform:scale(1.08); border-color:#fff; }
.badge-card-value { display:block; margin-top:22px; font-size:clamp(1.7rem,3vw,2.35rem); line-height:1; font-weight:900; }
.badge-card-title { margin:10px 0 4px; font:600 1.08rem/1.2 var(--font-display); }
.badge-card-description { color:rgba(255,255,255,.78); font-size:.75rem; line-height:1.4; }
.badge-card-foot { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:8px; margin-top:auto; padding-top:14px; font-size:.64rem; text-transform:uppercase; letter-spacing:.1em; font-weight:800; color:rgba(255,255,255,.65); }
.badge-catalog-number { justify-self:center; color:rgba(255,255,255,.78); font-variant-numeric:tabular-nums; white-space:nowrap; }
.badge-empty { min-height:260px; display:grid; place-content:center; text-align:center; gap:6px; color:var(--muted); }
.badge-empty[hidden] { display:none; }
.badge-load-more { display:flex; margin:28px auto 0; }

@media (max-width:980px) { .web-badge-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.badge-controls{grid-template-columns:1fr 1fr}.badge-search{grid-column:1/-1}.badge-status-filter{min-height:46px} }
@media (max-width:700px) { .badge-hero-grid{grid-template-columns:1fr}.badge-progress-orbit{display:none}.badge-summary{grid-template-columns:repeat(3,1fr)}.badge-controls{position:static;grid-template-columns:1fr}.badge-search{grid-column:auto}.web-badge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.web-badge-card{min-height:205px;padding:16px} }
@media (max-width:430px) { .web-badge-grid{grid-template-columns:1fr}.web-badge-card{min-height:190px}.badge-summary > div:not(.badge-progress-track){padding:17px 6px}.badge-controls{padding:10px}.badge-status-filter button{flex:1} }
@media (prefers-reduced-motion:reduce) { .web-badge-card,.badge-progress-track span{transition:none} }