/* === Reset === */
*,*::before,*::after{box-sizing:border-box;margin:0}

/* === Tokens (neutral dark default — overridden on country pages) === */
:root{
  --uc-bg:#0f0f13;--uc-surface:#1a1a24;--uc-text:#e8e8ec;
  --uc-muted-text:#9898a8;--uc-border:#2a2a38;--uc-accent:#6366f1;
  --uc-accent2:#8b5cf6;--uc-accent-text:#fff;--uc-link:#818cf8;
  --uc-focus-ring:#6366f1;
}

/* === Base === */
body{font-family:system-ui,-apple-system,sans-serif;background:var(--uc-bg);color:var(--uc-text);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--uc-link);text-decoration:none}
a:hover{text-decoration:underline}
code{background:var(--uc-surface);padding:.1em .35em;border-radius:4px;font-size:.875em}
.i{vertical-align:-.15em;fill:currentColor}

/* === Nav === */
.nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;max-width:960px;margin:0 auto}
.nav__logo{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.125rem;color:var(--uc-text)}
.nav__logo:hover{text-decoration:none}
.nav__links{display:flex;align-items:center;gap:1.5rem}
.nav__links a{color:var(--uc-muted-text);font-size:.875rem}
.nav__links a:hover{color:var(--uc-text);text-decoration:none}

/* === Language Dropdown === */
.lang-dd{position:relative}
.lang-dd__btn{display:inline-flex;align-items:center;gap:.3em;font-size:.8125rem;font-family:inherit;color:var(--uc-muted-text);background:transparent;border:1px solid var(--uc-border);border-radius:2rem;padding:.2em .6em;cursor:pointer;transition:all .2s}
.lang-dd__btn:hover{color:var(--uc-text);border-color:var(--uc-accent)}
.lang-dd__btn .i:last-child{transform:rotate(90deg);transition:transform .2s}
.lang-dd__menu.is-open~.lang-dd__btn .i:last-child,.lang-dd:has(.is-open) .lang-dd__btn .i:last-child{transform:rotate(270deg)}
.lang-dd__menu{position:absolute;right:0;top:calc(100% + .35rem);min-width:7rem;background:var(--uc-surface);border:1px solid var(--uc-border);border-radius:.5rem;box-shadow:0 4px 12px rgba(0,0,0,.3);padding:.25rem;z-index:10;opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .15s,transform .15s}
.lang-dd__menu.is-open{opacity:1;pointer-events:auto;transform:translateY(0)}
.lang-dd__item{display:block;padding:.3em .6em;font-size:.8125rem;color:var(--uc-text);border-radius:.25rem;text-decoration:none;transition:background .15s}
.lang-dd__item:hover{background:var(--uc-bg);text-decoration:none}
.lang-dd__item.is-active{color:var(--uc-accent);font-weight:600}

/* === Layout === */
main{max-width:960px;margin:0 auto;padding:0 1.5rem 3rem}
section{margin-bottom:2.5rem}
section h2{font-size:1.25rem;margin-bottom:1rem}

/* === Hero === */
.hero{text-align:center;margin-bottom:2rem}
.hero h1{font-size:2rem;margin-bottom:.5rem;color:var(--uc-accent)}
.hero__sub{color:var(--uc-muted-text);margin-bottom:2rem}

/* === Browser Preview === */
.preview{border-radius:12px;overflow:hidden;border:1px solid var(--uc-border);max-width:600px;margin:0 auto 1.5rem;text-align:left}
.preview__bar{background:var(--uc-bg);display:flex;align-items:center;padding:10px 14px;gap:10px;border-bottom:1px solid var(--uc-border)}
.preview__dots{display:flex;gap:6px;margin-right:4px}
.preview__dots i{display:block;width:10px;height:10px;border-radius:50%}
.preview__dots i:nth-child(1){background:#ff5f57}
.preview__dots i:nth-child(2){background:#febc2e}
.preview__dots i:nth-child(3){background:#28c840}
.preview__tab--active{background:var(--uc-surface);color:var(--uc-text);padding:4px 14px;border-radius:6px 6px 0 0;font-size:.8125rem}
.preview__tab--inactive{color:var(--uc-muted-text);font-size:.8125rem;padding:4px 10px}
.preview__toolbar{background:var(--uc-accent);padding:8px 14px}
.preview__url{background:rgba(255,255,255,.15);color:var(--uc-accent-text);padding:5px 14px;border-radius:20px;font-size:.8125rem;display:inline-block}
.preview__ntp{background:var(--uc-bg);padding:40px 24px;display:flex;flex-direction:column;align-items:center;gap:16px;min-height:160px}
.preview__flag{display:flex;border-radius:4px;overflow:hidden;width:100px;height:66px;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.preview__flag span{flex:1}
.preview__ntp-label{color:var(--uc-muted-text);font-size:.8125rem}

/* === Mode Switcher === */
.modes{display:flex;justify-content:center;gap:.5rem}
.mode-btn{background:var(--uc-surface);color:var(--uc-muted-text);border:1px solid var(--uc-border);padding:.375rem 1rem;border-radius:2rem;font-size:.875rem;cursor:pointer;transition:all .2s;font-family:inherit}
.mode-btn:hover{color:var(--uc-text);border-color:var(--uc-accent)}
.mode-btn.active{background:var(--uc-accent);color:var(--uc-accent-text);border-color:var(--uc-accent)}

/* === CTA Buttons === */
.cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin:2rem 0}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;border-radius:.5rem;font-size:.9375rem;font-weight:600;cursor:pointer;transition:opacity .2s;text-decoration:none;border:none;font-family:inherit;line-height:1.4}
.btn:hover{opacity:.85;text-decoration:none}
.btn--primary{background:var(--uc-accent);color:var(--uc-accent-text)}
.btn--secondary{background:var(--uc-surface);color:var(--uc-text);border:1px solid var(--uc-border)}
.btn--outline{background:transparent;color:var(--uc-link);border:1px solid var(--uc-border)}

/* === Swatches === */
.swatches{display:flex;gap:.5rem;margin-bottom:1.5rem}
.swatch{width:48px;height:48px;border-radius:8px;border:1px solid var(--uc-border)}

/* === Token Grid === */
.token-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}
.token-card{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:var(--uc-surface);border-radius:.5rem;border:1px solid var(--uc-border)}
.token-card__swatch{width:28px;height:28px;border-radius:6px;border:1px solid rgba(255,255,255,.1);flex-shrink:0}
.token-card__label{font-size:.8125rem;color:var(--uc-muted-text);font-family:ui-monospace,monospace}

/* === Compatibility === */
.compat-grid{display:flex;flex-wrap:wrap;gap:1rem}
.compat-item{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--uc-surface);border-radius:.5rem;border:1px solid var(--uc-border);font-size:.875rem}
.compat-item .i:last-child{color:#22c55e}

/* === Cards === */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem}
.card{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;background:var(--uc-surface);border-radius:.5rem;border:1px solid var(--uc-border);color:var(--uc-text);text-decoration:none;transition:border-color .2s}
.card:hover{border-color:var(--uc-accent);text-decoration:none}
.card__colors{display:flex;height:6px;border-radius:3px;overflow:hidden}
.card__colors i{flex:1;display:block}
.card__name{font-size:.875rem}

/* === FAQ === */
.faq details{border:1px solid var(--uc-border);border-radius:.5rem;margin-bottom:.5rem;background:var(--uc-surface)}
.faq summary{padding:.75rem 1rem;cursor:pointer;font-weight:500;color:var(--uc-text)}
.faq details p{padding:0 1rem .75rem;color:var(--uc-muted-text);font-size:.9375rem;line-height:1.6}

/* === Page Nav === */
.page-nav{display:flex;justify-content:space-between;padding-top:1.5rem;border-top:1px solid var(--uc-border);font-size:.9375rem}

/* === Footer === */
.footer{max-width:960px;margin:0 auto;padding:2rem 1.5rem;text-align:center;color:var(--uc-muted-text);font-size:.8125rem;border-top:1px solid var(--uc-border)}
.footer__sponsor{margin-top:.5rem;font-size:.75rem}
.footer__sponsor a{color:var(--uc-muted-text)}
.footer__sponsor .i{vertical-align:-.1em;margin:0 .15em}
.footer__sponsor a:hover{color:var(--uc-link);text-decoration:none}
.footer__links{margin-top:.5rem;font-size:.75rem}
.footer__links a{color:var(--uc-muted-text)}
.footer__links a:hover{color:var(--uc-link);text-decoration:none}

/* === Catalog / Region Grids === */
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.75rem}

/* === Homepage === */
.home-hero{text-align:center;padding:3rem 0}
.home-hero h1{font-size:2.5rem;margin-bottom:.75rem}
.home-hero p{color:var(--uc-muted-text);font-size:1.125rem}
.home-search{max-width:480px;margin:1.5rem auto 0;position:relative}
.home-search input{width:100%;padding:.75rem 1rem .75rem 2.5rem;border-radius:2rem;border:1px solid var(--uc-border);background:var(--uc-surface);color:var(--uc-text);font-size:1rem;font-family:inherit}
.home-search input::placeholder{color:var(--uc-muted-text)}
.home-search input:focus{outline:none;border-color:var(--uc-accent);box-shadow:0 0 0 3px rgba(99,102,241,.25)}
.home-search .i{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--uc-muted-text);pointer-events:none}
.search-results{position:absolute;top:100%;left:0;right:0;margin-top:.5rem;background:var(--uc-surface);border:1px solid var(--uc-border);border-radius:.75rem;overflow:hidden;z-index:10}
.search-results:empty{display:none}
.search-results a{display:block;padding:.5rem 1rem;color:var(--uc-text);font-size:.9375rem}
.search-results a:hover{background:var(--uc-bg);text-decoration:none}

.region-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:1.5rem 0}
.region-chip{padding:.375rem 1rem;border-radius:2rem;background:var(--uc-surface);border:1px solid var(--uc-border);color:var(--uc-muted-text);font-size:.875rem}
.region-chip:hover{color:var(--uc-text);border-color:var(--uc-accent);text-decoration:none}

.section-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem}
.section-header h2{margin-bottom:0}
.section-header a{font-size:.875rem}

/* === Region === */
.region-hero{margin-bottom:2rem}
.region-hero h1{font-size:2rem;margin-bottom:.5rem}
.region-hero p{color:var(--uc-muted-text)}

/* === Steps === */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;text-align:center}
.step{padding:1.5rem 1rem;background:var(--uc-surface);border:1px solid var(--uc-border);border-radius:.75rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.step__num{display:inline-flex;width:2.5rem;height:2.5rem;align-items:center;justify-content:center;border-radius:50%;background:var(--uc-accent);color:var(--uc-accent-text);font-weight:700;font-size:1rem;position:relative}
.step__num span{transition:opacity .2s}
.step__num .i{position:absolute;inset:0;margin:auto;opacity:0;transition:opacity .2s}
.step:hover .step__num span{opacity:0}
.step:hover .step__num .i{opacity:1}
.step h3{font-size:1rem;margin:0}
.step p{font-size:.875rem;color:var(--uc-muted-text);margin:0;line-height:1.5}

/* === Hero Flag === */
.hero__flag{display:inline-block;width:1.2em;height:.8em;vertical-align:-.05em;border-radius:2px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.hero__flag svg{display:block;width:100%;height:100%}

/* === Extension Promo === */
.ext-promo__card{background:var(--uc-surface);border:1px solid var(--uc-border);border-radius:.75rem;padding:1.5rem;display:flex;gap:1.5rem;align-items:flex-start}
.ext-promo__text h2{font-size:1.125rem;margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem}
.ext-promo__text p{color:var(--uc-muted-text);font-size:.9375rem;margin-bottom:.75rem}
.ext-promo__text ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.35rem}
.ext-promo__text li{font-size:.875rem;color:var(--uc-text);display:flex;align-items:center;gap:.4rem}
.ext-promo__text li .i{color:var(--uc-accent);flex-shrink:0}
.ext-promo__actions{display:flex;flex-direction:column;gap:.5rem;flex-shrink:0}
.btn--soon{opacity:.6;cursor:default;font-size:.8125rem}
.btn--soon:hover{opacity:.6}

/* === Extension Install CTA (homepage) === */
.ext-install__card{background:var(--uc-surface);border:1px solid var(--uc-border);border-radius:.75rem;padding:1.5rem;display:flex;gap:1.5rem;align-items:center;justify-content:space-between}
.ext-install__text h2{font-size:1.125rem;margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem}
.ext-install__text p{color:var(--uc-muted-text);font-size:.9375rem;margin:0}
.ext-install__actions{display:flex;gap:.5rem;flex-shrink:0}

/* === SEO About === */
.about-seo details{border:1px solid var(--uc-border);border-radius:.5rem;background:var(--uc-surface)}
.about-seo summary{padding:.75rem 1rem;cursor:pointer;list-style:none}
.about-seo summary::-webkit-details-marker{display:none}
.about-seo summary h2{font-size:1.125rem;margin:0;display:inline}
.about-seo__body{padding:0 1rem 1rem;color:var(--uc-muted-text);font-size:.9375rem;line-height:1.7}
.about-seo__body p{margin-bottom:.75rem}
.about-seo__body p:last-child{margin-bottom:0}

/* === Breadcrumbs === */
.breadcrumb{font-size:.8125rem;color:var(--uc-muted-text);margin-bottom:1.5rem}
.breadcrumb a{color:var(--uc-muted-text)}
.breadcrumb a:hover{color:var(--uc-link)}
.breadcrumb span{margin:0 .25rem}

/* === Responsive === */
@media(max-width:640px){
  .hero h1,.home-hero h1{font-size:1.5rem}
  .home-hero h1{font-size:1.75rem}
  .cta{flex-direction:column;align-items:stretch}
  .cta .btn{justify-content:center}
  .preview{margin-left:-.5rem;margin-right:-.5rem;border-radius:8px}
  .token-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .page-nav{flex-direction:column;gap:.75rem}
  .steps{grid-template-columns:1fr}
  .ext-promo__card{flex-direction:column}
  .ext-promo__actions{flex-direction:row;flex-wrap:wrap}
  .ext-install__card{flex-direction:column;align-items:stretch}
  .ext-install__actions{flex-wrap:wrap}
}