/* ========== DotaChamp — standalone CSS ========== */
:root{
  --background: oklch(0.16 0.015 265);
  --foreground: oklch(0.95 0.005 250);
  --card:       oklch(0.21 0.018 265);
  --muted:      oklch(0.24 0.018 265);
  --muted-fg:   oklch(0.65 0.02 260);
  --border:     oklch(0.30 0.02 265 / 0.6);

  --primary:       oklch(0.58 0.18 25);
  --primary-glow:  oklch(0.68 0.22 22);
  --accent:        oklch(0.60 0.22 320);
  --gold:          oklch(0.78 0.13 80);
  --success:       oklch(0.70 0.17 145);

  --radius: .5rem;
  --shadow-card: 0 1px 0 oklch(1 0 0 / .04) inset, 0 20px 40px -20px oklch(0 0 0 / .6);
  --shadow-glow-magenta: 0 0 24px oklch(0.60 0.22 320 / .45), 0 0 60px oklch(0.60 0.22 320 / .25);
}

*{box-sizing:border-box;border-color:var(--border)}
html,body{
  margin:0;padding:0;
  background:
    radial-gradient(ellipse 900px 700px at 8% 80%,  oklch(0.65 0.16 185 / 0.22), transparent),
    radial-gradient(ellipse 700px 600px at 92% 78%, oklch(0.52 0.20 290 / 0.20), transparent),
    var(--background);
  color:var(--foreground);
}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","cv11";
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}

.container{max-width:min(1720px, 96vw);margin:0 auto;padding:0 1rem}
@media(min-width:640px){.container{padding:0 1.5rem}}

.icon-sm{width:14px;height:14px;flex-shrink:0}
.accent-red{color:var(--primary)}
.accent-magenta{color:var(--accent)}

/* ===== Header ===== */
.site-header{
  position:sticky;top:0;z-index:40;
  border-bottom:1px solid var(--border);
  background:oklch(0.16 0.015 265 / .8);
  backdrop-filter:blur(16px);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:.6rem}
.brand-badge{
  width:32px;height:32px;display:grid;place-items:center;border-radius:6px;
  background:linear-gradient(135deg,var(--primary),oklch(0.58 0.18 25 / .6));
  box-shadow:0 0 18px oklch(0.58 0.18 25 / .5);
  color:#fff;
}
.brand-text{font-weight:900;letter-spacing:.18em}
.nav-desktop{display:none;gap:.25rem;align-items:center}
@media(min-width:768px){.nav-desktop{display:flex}}
.nav-link{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem .75rem;border-radius:6px;font-size:.875rem;font-weight:500;
  color:var(--muted-fg);transition:.2s;
}
.nav-link:hover{background:oklch(0.24 0.018 265 / .5);color:var(--foreground)}
.nav-link-active{color:var(--foreground)!important;background:oklch(0.24 0.018 265 / .4)}

.avatar-btn{
  width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--border);border-radius:6px;background:oklch(0.21 0.018 265 / .6);
  transition:.2s;
}
.avatar-btn:hover{background:var(--card)}
.avatar{
  width:24px;height:24px;display:grid;place-items:center;border-radius:3px;
  background:linear-gradient(135deg,oklch(0.58 0.18 25 / .8),oklch(0.58 0.18 25 / .4));
  font-size:10px;font-weight:700;color:#fff;
}

/* ===== Hero ===== */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;z-index:-1}
.hero-overlay{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom, oklch(0.16 0.015 265 / .6), oklch(0.16 0.015 265 / .7), var(--background));
}
.hero-glow{
  position:absolute;left:0;right:0;top:0;height:256px;z-index:-1;
  background:radial-gradient(ellipse at top, oklch(0.58 0.18 25 / .25), transparent 60%);
}
.hero-content{display:flex;flex-direction:column;align-items:center;text-align:center;padding:5rem 1rem}
@media(min-width:640px){.hero-content{padding:7rem 1.5rem 5rem}}
.shield-logo{width:160px;height:auto;filter:drop-shadow(0 8px 24px oklch(0.58 0.18 25 / .45))}
.hero-title{
  margin:1.5rem 0 0;font-size:3rem;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1;
}
@media(min-width:640px){.hero-title{font-size:4.5rem}}
.text-glow-crimson{
  text-shadow:0 0 20px oklch(0.68 0.22 22 / .55), 0 0 40px oklch(0.58 0.18 25 / .4);
}
.hero-eyebrow{margin:.5rem 0 0;font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.55em;color:var(--muted-fg)}
.hero-sub{margin-top:2rem;max-width:42rem;font-size:1rem;line-height:1.65;color:var(--muted-fg)}
@media(min-width:640px){.hero-sub{font-size:1.125rem}}

/* ===== Section / Toolbar ===== */
.section{padding-top:1rem}
.toolbar{display:flex;flex-direction:column;gap:1rem}
@media(min-width:640px){.toolbar{flex-direction:row;align-items:center;justify-content:space-between}}
.filters{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem 1rem;border:1px solid var(--border);border-radius:999px;
  background:oklch(0.21 0.018 265 / .4);color:var(--muted-fg);
  font-size:.75rem;font-weight:600;letter-spacing:.02em;transition:.2s;
}
.chip:hover{border-color:oklch(0.58 0.18 25 / .3);color:var(--foreground)}
.chip.is-active{
  border-color:oklch(0.58 0.18 25 / .6);
  background:oklch(0.58 0.18 25 / .15);
  color:var(--foreground);
  box-shadow:0 0 18px oklch(0.58 0.18 25 / .35);
}

.btn-primary{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.25rem;border-radius:8px;
  border:1px solid oklch(0.60 0.22 320 / .6);
  background:linear-gradient(135deg, oklch(0.60 0.22 320 / .25), oklch(0.60 0.22 320 / .1));
  color:var(--foreground);font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  transition:.2s;
}
.btn-primary:hover{background:linear-gradient(135deg, oklch(0.60 0.22 320 / .4), oklch(0.60 0.22 320 / .15))}
.ring-glow-magenta{box-shadow:var(--shadow-glow-magenta)}

/* ===== Grid + Card ===== */
.grid{margin-top:2rem;display:grid;grid-template-columns:1fr;gap:1.25rem;padding-bottom:6rem}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}

.card{
  position:relative;overflow:hidden;border:1px solid var(--border);
  border-radius:12px;background:oklch(0.21 0.018 265 / .8);
  padding:1.25rem;box-shadow:var(--shadow-card);
  transition:.2s;
}
.card:hover{border-color:oklch(0.58 0.18 25 / .4);background:var(--card)}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:1rem}
.game-row{display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:oklch(0.95 0.005 250 / .85)}
.game-ico{
  width:28px;height:28px;display:grid;place-items:center;
  border:1px solid var(--border);border-radius:6px;background:oklch(0.16 0.015 265 / .6);
  color:oklch(0.95 0.005 250 / .7);
}
.card h3{margin:0;font-size:1.125rem;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.card .desc{margin:.4rem 0 0;font-size:.875rem;color:var(--muted-fg);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-fg);margin-top:1.25rem}
.card-meta strong{color:var(--foreground);font-weight:600}
.progress{margin-top:.5rem;height:3px;width:100%;background:oklch(0.24 0.018 265 / .6);border-radius:999px;overflow:hidden}
.progress > div{
  height:100%;border-radius:999px;
  background:linear-gradient(to right,var(--primary),var(--primary-glow));
  box-shadow:0 0 10px oklch(0.68 0.22 22 / .6);
}

/* Status badges */
.badge{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.25rem .5rem;border-radius:6px;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  border:1px solid var(--border);
}
.badge.finished{border-color:oklch(0.58 0.18 25 / .4);background:oklch(0.58 0.18 25 / .1);color:var(--primary)}
.badge.registration{border-color:oklch(0.78 0.13 80 / .5);background:oklch(0.78 0.13 80 / .1);color:var(--gold);box-shadow:0 0 18px oklch(0.78 0.13 80 / .25)}
.badge.live{border-color:oklch(0.70 0.17 145 / .5);background:oklch(0.70 0.17 145 / .1);color:var(--success)}
.badge.soon{background:oklch(0.24 0.018 265 / .5);color:var(--muted-fg)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--border);background:oklch(0.16 0.015 265 / .6)}
.footer-inner{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:.75rem;padding:2rem 1rem;font-size:.75rem;color:var(--muted-fg)}
@media(min-width:640px){.footer-inner{flex-direction:row;padding:2rem 1.5rem}}
.footer-brand{font-weight:600;letter-spacing:.12em;margin:0}
.footer-links{display:flex;gap:1.5rem;text-transform:uppercase;letter-spacing:.1em}
.footer-links a:hover{color:var(--foreground)}

/* ===== Auth pages ===== */
.auth-page{display:flex;justify-content:center;padding:3rem 1rem 5rem}
.auth-wrap{width:100%;max-width:400px}
.auth-wrap--wide{max-width:440px}

.auth-heading{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin:0 0 .5rem;text-align:center}
.auth-sub{color:var(--muted-fg);font-size:.875rem;margin:0;text-align:center}
.auth-header{margin-bottom:2rem}

.auth-steam{
  display:flex;align-items:center;justify-content:center;gap:.75rem;
  width:100%;padding:.875rem 1.25rem;
  background:#1b2838;border:1px solid rgba(102,192,244,.15);border-radius:var(--radius);
  color:#fff;font-size:.9rem;font-weight:600;text-decoration:none;
  transition:background .15s,border-color .15s;
  margin-bottom:1.5rem;
}
.auth-steam:hover{background:#2a475e;border-color:rgba(102,192,244,.35);color:#fff}

.auth-divider{position:relative;text-align:center;margin-bottom:1.5rem}
.auth-divider-line{height:1px;background:var(--border)}
.auth-divider-label{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  padding:0 .75rem;background:var(--background);
  color:var(--muted-fg);font-size:.75rem;font-weight:500;letter-spacing:.06em;white-space:nowrap;
}

.auth-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem;
  box-shadow:var(--shadow-card);
}

.auth-alert{
  background:rgba(201,64,64,.12);border:1px solid rgba(201,64,64,.3);
  border-radius:6px;padding:.625rem .875rem;font-size:.8rem;color:#e07070;margin-bottom:1rem;
}

.auth-label{
  display:block;font-size:.7rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted-fg);margin-bottom:.4rem;
}
.auth-hint{font-size:.72rem;color:var(--muted-fg);margin-top:.3rem}
.auth-field-error{font-size:.75rem;color:#e06060;margin-top:.2rem}

.auth-input{
  width:100%;padding:.625rem .75rem;
  background:var(--muted);border:1px solid var(--border);border-radius:6px;
  color:var(--foreground);font-size:.875rem;font-family:inherit;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.auth-input:focus{
  border-color:rgba(201,64,64,.6);
  box-shadow:0 0 0 3px rgba(201,64,64,.12);
}
.auth-input--error{border-color:rgba(201,64,64,.6)}

.auth-checkbox-row{display:flex;align-items:center;gap:.5rem;margin-bottom:1.25rem}
.auth-checkbox-row input[type=checkbox]{width:15px;height:15px;accent-color:var(--primary);cursor:pointer}
.auth-checkbox-label{font-size:.8rem;color:var(--muted-fg);cursor:pointer;user-select:none}

.auth-submit{
  width:100%;padding:.75rem;
  background:linear-gradient(135deg,var(--primary),oklch(0.52 0.18 25));
  border:none;border-radius:6px;
  color:#fff;font-size:.875rem;font-weight:600;letter-spacing:.02em;
  cursor:pointer;font-family:inherit;
  transition:opacity .15s,transform .1s;
}
.auth-submit:hover{opacity:.88}
.auth-submit:active{transform:scale(.99)}

.auth-footer-text{text-align:center;margin-top:1.25rem;font-size:.8rem;color:var(--muted-fg)}
.auth-footer-text a{color:var(--primary);font-weight:500}

.auth-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  background:var(--background);border-radius:8px;padding:2px;margin-bottom:1.25rem;
}
.auth-tab{
  padding:.5rem;border-radius:6px;font-size:.8rem;font-weight:600;
  background:transparent;color:var(--muted-fg);border:1px solid transparent;
  transition:background .15s,color .15s,border-color .15s;cursor:pointer;font-family:inherit;
}
.auth-tab.active{background:var(--card);color:var(--foreground);border-color:var(--border)}

/* ===== Bracket (epic-bracket style) ===== */
.br-wrap{
  --br-winner:   oklch(78% .19 165);
  --br-winner-fg:oklch(12% .03 270);
  --br-loser-fg: oklch(50% .02 260);
  --br-gold:     oklch(82% .16 85);
  --br-accent:   oklch(72% .22 320);
  --br-fg:       oklch(97% .01 240);
  --br-card:     oklch(19% .03 270);
  --br-deep:     oklch(9%  .022 270);
  --br-muted:    oklch(23% .03 270);
  --br-muted-fg: oklch(65% .03 260);
  --br-border:   oklch(30% .04 270);
  --br-grad-primary: linear-gradient(135deg, oklch(78% .19 165), oklch(72% .22 200));
  --br-grad-accent:  linear-gradient(135deg, oklch(72% .22 320), oklch(60% .25 280));
  --br-grad-gold:    linear-gradient(135deg, oklch(85% .17 85),  oklch(72% .2  55));
  --br-glow-primary: 0 0 24px oklch(78% .19 165 / .45);
  --br-glow-accent:  0 0 24px oklch(72% .22 320 / .40);
  --br-glow-gold:    0 0 28px oklch(82% .16 85  / .45);
}

/* Bracket fills the full width of the (now wide) shared container. */
.bracket-wide{
  width:100%;
}

.br-scroll{
  overflow-x:auto;
  border-radius:1rem;
  border:1px solid var(--br-border);
  background:oklch(19% .03 270 / .30);
  padding:2rem;
  backdrop-filter:blur(12px);
}

.br-row{
  display:flex;
  align-items:flex-start;
  gap:0;
  min-width:max-content;
}

.br-col{
  display:flex;
  flex-direction:column;
  gap:1rem;
  min-width:280px;
}

.br-connector{
  display:flex;
  flex-direction:column;
  flex-shrink:0;
}

.br-matches{
  display:flex;
  flex-direction:column;
}

/* Round header */
.br-header-wrap{display:flex;justify-content:center}
.br-header{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:8px;padding:6px 16px;
  font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.2em;
  color:oklch(12% .03 270);
}
.br-header--primary{background:var(--br-grad-primary);box-shadow:var(--br-glow-primary)}
.br-header--accent {background:var(--br-grad-accent); box-shadow:var(--br-glow-accent)}
.br-header--gold   {background:var(--br-grad-gold);   box-shadow:var(--br-glow-gold)}

/* Match card — fixed 132px height so SVG connectors stay aligned */
.br-card{
  position:relative;
  width:280px;height:132px;
  overflow:hidden;
  border-radius:12px;
  border:1px solid var(--br-border);
  background:var(--br-card);
  backdrop-filter:blur(8px);
  transition:transform .3s, border-color .3s, box-shadow .3s;
  flex-shrink:0;
  display:flex;flex-direction:column;
}
.br-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in oklab, var(--br-winner) 55%, transparent);
  box-shadow:var(--br-glow-primary);
}
.br-card--final{
  border-color:color-mix(in oklab, var(--br-gold) 60%, transparent)!important;
  box-shadow:var(--br-glow-gold)!important;
}
.br-card--active{
  border-color:color-mix(in oklab, var(--br-winner) 55%, transparent)!important;
  box-shadow:var(--br-glow-primary)!important;
}
.br-card--dispute{
  border-color:color-mix(in oklab, var(--br-accent) 60%, transparent)!important;
  box-shadow:var(--br-glow-accent)!important;
}

.br-card-stripe{
  position:absolute;top:0;left:0;right:0;height:2px;flex-shrink:0;
}

.br-card-head{
  height:32px;flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;
  border-bottom:1px solid var(--br-border);
  background:color-mix(in oklab, var(--br-deep) 50%, transparent);
}
.br-match-id{
  font-family:monospace;font-size:10px;letter-spacing:.18em;color:var(--br-muted-fg);
}
.br-match-status{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
}
.br-status--done   {color:var(--br-winner)}
.br-status--live   {color:var(--br-winner)}
.br-status--dispute{color:var(--br-accent)}
.br-status--pending{color:var(--br-muted-fg)}

.br-live-dot{
  width:6px;height:6px;border-radius:50%;background:var(--br-winner);flex-shrink:0;
  animation:br-pulse 1.5s ease-in-out infinite;
}
@keyframes br-pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* Teams */
.br-teams{flex:1;display:flex;flex-direction:column;border-bottom:1px solid var(--br-border)}
.br-team{
  flex:1;display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;gap:12px;transition:background .2s;
}
.br-team+.br-team{border-top:1px solid var(--br-border)}
.br-team--winner{background:color-mix(in oklab, var(--br-winner) 14%, transparent)}

.br-team-left{display:flex;align-items:center;gap:12px;min-width:0}
.br-tag{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:28px;border-radius:6px;
  font-size:10px;font-weight:700;letter-spacing:.08em;flex-shrink:0;
  background:var(--br-muted);color:var(--br-muted-fg);
}
.br-tag--winner{
  background:var(--br-winner);color:var(--br-winner-fg);
  box-shadow:var(--br-glow-primary);
}
.br-team-name{
  font-size:14px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--br-loser-fg);
}
.br-team-name--winner{color:var(--br-fg)}
.br-score{
  font-size:18px;font-weight:900;font-variant-numeric:tabular-nums;
  flex-shrink:0;color:var(--br-loser-fg);min-width:20px;text-align:right;
}
.br-score--winner{color:var(--br-winner)}

/* Card footer */
.br-card-foot{
  height:32px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:oklch(9% .022 270 / .4);
}
.br-view-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:600;letter-spacing:.05em;
  color:var(--br-muted-fg);text-decoration:none;transition:color .2s;
}
.br-view-link:hover{color:var(--br-winner);text-decoration:none}
.br-view-link--dispute{color:var(--br-accent)}
.br-view-link--dispute:hover{color:var(--br-accent);filter:brightness(1.2)}
.br-view-link--muted{cursor:default}

/* Champion box */
.br-champion{
  border-radius:12px;
  border:1px solid color-mix(in oklab, var(--br-gold) 50%, transparent);
  background:color-mix(in oklab, var(--br-gold) 8%, transparent);
  padding:16px;text-align:center;margin-top:24px;
}
.br-champion-icon{
  width:40px;height:40px;border-radius:50%;
  background:var(--br-grad-gold);box-shadow:var(--br-glow-gold);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 8px;color:oklch(15% .03 60);
}
.br-champion-label{font-size:10px;text-transform:uppercase;letter-spacing:.25em;color:var(--br-muted-fg)}
.br-champion-name{font-size:16px;font-weight:900;margin-top:4px;color:var(--br-fg)}

/* Empty state */
.br-empty{text-align:center;padding:3rem 1rem;color:var(--br-muted-fg)}
.br-empty-title{font-weight:600;margin-bottom:4px;color:var(--br-fg);font-size:1rem}
.br-empty-sub{font-size:.875rem;margin:0}

/* ===== Tournament detail page ===== */
.tourn-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.tourn-title{font-size:2rem;font-weight:900;letter-spacing:-.02em;line-height:1.15;margin:0}
@media(min-width:640px){.tourn-title{font-size:2.5rem}}

.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:2rem}
@media(min-width:640px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem 1.25rem;box-shadow:var(--shadow-card)}
.stat-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-fg);margin-bottom:.4rem}
.stat-value{font-size:1.35rem;font-weight:800;letter-spacing:-.01em;color:var(--foreground)}

.teams-section{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-card)}
.teams-section-head{display:flex;align-items:center;gap:.5rem;padding:.875rem 1.25rem;border-bottom:1px solid var(--border);font-weight:600;font-size:.875rem}
.teams-section-body{padding:1.25rem}
.teams-grid{display:grid;grid-template-columns:1fr;gap:.625rem}
@media(min-width:560px){.teams-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.teams-grid{grid-template-columns:repeat(3,1fr)}}
.team-item{border:1px solid var(--border);border-radius:8px;padding:.875rem 1rem;background:oklch(0.18 0.018 265 / .5);transition:border-color .2s,background .2s}
.team-item:hover{border-color:oklch(0.58 0.18 25 / .3);background:oklch(0.21 0.018 265 / .7)}