/* ----------------------------------------------------------
   Dragon Ace Casino — Help Center
   Clean redesign · inspired by Apple / Google support
----------------------------------------------------------- */

:root {
  --bg: #0b0b0f;
  --bg-soft: #121218;
  --bg-muted: #181820;
  --surface: #16161d;
  --surface-2: #1d1d26;
  --surface-hover: #20202a;

  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.16);

  --text: #f5f5f7;
  --text-2: #d2d2d7;
  --text-dim: #98989f;
  --text-mute: #6e6e73;

  --gold: #d4af37;
  --gold-light: #ffd66b;
  --gold-deep: #9a6a1a;
  --accent: var(--gold);
  --accent-soft: rgba(212, 175, 55, 0.1);
  --accent-glow: rgba(255, 214, 107, 0.18);

  --link: #ffd66b;
  --link-hover: #ffe27a;

  --info: #6aa7ff;
  --warn: #e35d5d;
  --success: #3ecf8e;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.6);
  --gold-shadow: 0 8px 26px rgba(212, 175, 55, 0.22);

  --header-h: 76px;
  --maxw: 1180px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 480px at 14% -10%, rgba(212, 175, 55, 0.08), transparent 60%),
    radial-gradient(800px 460px at 100% 0%, rgba(212, 175, 55, 0.05), transparent 55%),
    radial-gradient(700px 400px at 50% 110%, rgba(212, 175, 55, 0.04), transparent 60%);
  z-index: 0;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px;
  position: relative;
  z-index: 1;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: #000;
  padding: 8px 12px;
  border-radius: 6px;
  z-index: 100;
  font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; }

/* -------------------- Header -------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 11, 15, 0.78);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--line);
  transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.site-header.scrolled {
  background: rgba(11, 11, 15, 0.95);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.45);
}

.header-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  height: var(--header-h);
}

.header-title {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.header-title:hover { opacity: 0.85; }
.header-title-text {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1;
  background: linear-gradient(135deg, #fff5d1 0%, #ffd66b 55%, #b8862b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  justify-self: start;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
}
.theme-toggle:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: var(--accent-soft);
}
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle .theme-icon { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-moon { display: block; }
:root:not([data-theme="light"]) .theme-toggle .theme-icon-sun { display: block; }

.lang-switch {
  display: flex;
  justify-self: end;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px;
}
.lang-switch button {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0;
  transition: all 0.15s;
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button.active {
  background: linear-gradient(135deg, #ffe27a 0%, #d4af37 60%, #9a6a1a 100%);
  color: #1a1200;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.header-contact {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe27a 0%, #d4af37 60%, #9a6a1a 100%);
  color: #1a1200;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: var(--gold-shadow);
  transition: transform 0.15s, box-shadow 0.15s;
}
.header-contact:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(212, 175, 55, 0.4);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-weight: 500;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn-ghost {
  border-color: var(--line-strong);
  color: var(--text);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); background: var(--accent-soft); }
.btn-primary {
  background: linear-gradient(135deg, #ffe27a 0%, #d4af37 60%, #9a6a1a 100%);
  color: #1a1200;
  border-color: transparent;
  box-shadow: var(--gold-shadow);
  font-weight: 700;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(212, 175, 55, 0.4); }


/* -------------------- Hero / Home -------------------- */
/* Home hero: full-width Dragon Ace Casino background image (Zendesk-style)
   with the search bar centered over it. */
/* Home hero: a centered Dragon Ace Casino banner (real <img>, so its 1920×500
   ratio is always preserved and never cropped) sharing the same centered
   container as the rest of the page. The search bar overlays its center on
   desktop and stacks below it on small screens. */
.hero {
  position: relative;
  padding: 40px 0 48px;
  border-bottom: 1px solid var(--line);
  z-index: 1;
}
.hero-inner {
  position: relative;
}
/* Banner is zoomed into the artwork's centre (the source has wide black
   margins) so the wordmark and skyline read large. background-size / position
   keep the framing identical at every width. */
.hero-banner {
  position: relative;
  aspect-ratio: 3 / 1;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  background-color: #000;
  background-image: url('../img/theme/home-hero.png');
  background-repeat: no-repeat;
  background-position: 50% 55%;
  background-size: 205% auto;
}
/* Search sits in the dark gap between the wordmark (above) and skyline (below) */
.search-wrap {
  position: absolute;
  top: 42%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  padding: 0 24px;
}
/* Gentle scrim only behind the search field, so the wordmark and artwork
   stay clear (kept tight to the bar's row, never reaching the text). */
.search-wrap::before {
  content: '';
  position: absolute;
  inset: -10px 0;
  background: radial-gradient(55% 110% at 50% 50%, rgba(0, 0, 0, 0.4), transparent 72%);
  pointer-events: none;
}

.search {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}
/* Lighter, smaller search field so it doesn't cover the wordmark above it */
.hero .search-box {
  padding: 5px 5px 5px 18px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}
.hero .search-box svg { width: 18px; height: 18px; }
.hero .search-box input { font-size: 15px; padding: 11px 0; }
.hero .search-box button { padding: 9px 18px; font-size: 13px; }
.search-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 10px 10px 26px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  transition: all 0.2s var(--ease);
}
.search-box:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--accent-glow), var(--shadow-lg);
}
.search-box svg { color: var(--text-mute); flex-shrink: 0; width: 26px; height: 26px; }
.search-box input {
  flex: 1 1 0;
  min-width: 0;            /* allow the field to shrink so the button stays inside */
  background: transparent;
  border: 0;
  outline: 0;
  padding: 18px 0;
  font-size: 19px;
  color: var(--text);
  font-family: inherit;
  letter-spacing: -0.01em;
}
.search-box input::placeholder { color: var(--text-mute); }
.search-box button {
  flex-shrink: 0;
  padding: 14px 28px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe27a 0%, #d4af37 60%, #9a6a1a 100%);
  color: #1a1200;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  letter-spacing: 0.02em;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: var(--gold-shadow);
}
.search-box button:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(212, 175, 55, 0.4); }

.search-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-mute);
  align-items: center;
}
.search-tags > span { color: var(--text-mute); margin-right: 4px; }
.search-tags a {
  padding: 4px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text-2);
  transition: all 0.15s;
  font-size: 12px;
}
.search-tags a:hover { border-color: var(--line-strong); background: var(--bg-muted); }

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  max-height: 480px;
  overflow: auto;
  z-index: 20;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  text-align: left;
}
.search-results.open { opacity: 1; transform: none; pointer-events: auto; }
.search-results .empty { padding: 20px; text-align: center; color: var(--text-mute); font-size: 14px; }


/* -------------------- Search result rows (shared) -------------------- */
.search-result {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  color: inherit;
  transition: background 0.15s;
}
.search-result:hover { background: var(--surface-hover); }
.search-result + .search-result { border-top: 1px solid var(--line); }
.search-result .result-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.search-result .result-icon svg { width: 15px; height: 15px; }
.search-result .result-main { flex: 1; min-width: 0; }
.search-result .result-crumb {
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.2px;
  margin-bottom: 3px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.search-result .result-crumb .sep { color: var(--text-mute); opacity: 0.6; }
.search-result .result-title {
  font-weight: 500;
  font-size: 14px;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.4;
}
.search-result .result-snippet {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-result .result-arr {
  flex-shrink: 0;
  color: var(--text-mute);
  margin-top: 6px;
  transition: transform 0.15s, color 0.15s;
}
.search-result:hover .result-arr { color: var(--text); transform: translateX(3px); }

.search-result.compact { padding: 10px 12px; }
.search-result.compact .result-snippet { font-size: 12px; -webkit-line-clamp: 1; }
.search-result.compact + .search-result.compact { border-top: 1px solid var(--line); }

/* Search page list */
.search-result-list {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.search-result-list .search-result {
  border-radius: 0;
  padding: 18px 20px;
}
.search-result-list .search-result + .search-result { border-top: 1px solid var(--line); }
.search-result-list .search-result:hover { background: var(--surface-hover); }

/* Highlighted matches */
mark {
  background: rgba(255, 214, 107, 0.3);
  color: var(--gold-light);
  padding: 0 3px;
  border-radius: 3px;
  font-weight: 600;
}
.search-result .result-snippet mark { font-weight: 500; }

/* -------------------- Sections -------------------- */
section.block {
  padding: 64px 0;
  position: relative;
}
.block-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.block-head h2 {
  font-size: clamp(22px, 2.5vw, 28px);
  margin: 0 0 4px;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--text);
}
.block-head p {
  margin: 0;
  color: var(--text-dim);
  max-width: 560px;
  font-size: 14px;
}
.block-head .link {
  color: var(--link);
  font-weight: 500;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.15s;
}
.block-head .link:hover { gap: 8px; color: var(--link-hover); }

/* -------------------- Category Cards -------------------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
}
.cat-card {
  position: relative;
  padding: 64px 32px;
  min-height: 200px;
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--line);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: inherit;
  overflow: hidden;
  isolation: isolate;
  transition:
    border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.cat-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, transparent 40%, rgba(212, 175, 55, 0.4) 100%);
  border-radius: inherit;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s var(--ease);
}
.cat-card::after {
  content: '';
  position: absolute;
  bottom: 22px;
  left: 50%;
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 2px;
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.cat-card:hover {
  border-color: rgba(212, 175, 55, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5);
}
.cat-card:hover::before { opacity: 1; }
.cat-card:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.cat-card h3 {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.018em;
  line-height: 1.25;
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}
.cat-card:hover h3 { transform: translateY(-4px); color: var(--gold-light); }

/* -------------------- Popular Articles -------------------- */
.popular-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.art-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all 0.2s var(--ease);
  color: inherit;
}
.art-card:hover {
  border-color: rgba(212, 175, 55, 0.4);
  background: var(--surface-2);
  transform: translateY(-2px);
}
.art-card .art-ico {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--gold);
}
.art-card .art-ico svg { width: 16px; height: 16px; }
.art-card .art-body { flex: 1; min-width: 0; }
.art-card .art-title {
  font-weight: 500;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.005em;
}
.art-card .art-cat {
  font-size: 12px;
  color: var(--text-mute);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* -------------------- CTA / Contact Band -------------------- */
.cta-band {
  margin: 48px 0 80px;
  padding: 44px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(600px 300px at 10% 50%, rgba(212, 175, 55, 0.15), transparent 60%),
    linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.cta-band h3 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}
.cta-band p { margin: 0; color: var(--text-dim); max-width: 520px; font-size: 14px; }
.cta-band .cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* -------------------- Category / Section Page -------------------- */
.cat-page-hero {
  padding: 32px 0 40px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 36px;
  position: relative;
  z-index: 1;
}
.cat-page-hero h1 {
  font-size: clamp(28px, 3.6vw, 40px);
  margin: 0 0 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff5d1, #ffd66b 55%, #b8862b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cat-page-hero p {
  margin: 0;
  color: var(--text-dim);
  font-size: 16px;
  max-width: 640px;
}

.section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  padding-bottom: 80px;
  position: relative;
  z-index: 1;
}
.section-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 24px;
  min-height: 130px;
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  color: inherit;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.section-card:hover {
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  transform: translateY(-3px);
}
.section-card h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.012em;
  line-height: 1.3;
  transition: color 0.2s var(--ease);
}
.section-card:hover h3 { color: var(--gold-light); }

/* Category page: sections expanded with all their articles (2nd depth) */
.cat-sections {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  z-index: 1;
}
.cat-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.cat-section-title {
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  transition: color 0.2s var(--ease);
}
.cat-section-title:hover { color: var(--gold-light); }

.section-card-meta {
  font-size: 12px;
  color: var(--text-mute);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}


.breadcrumb {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 13px;
  color: var(--text-mute);
  padding: 24px 0 0;
  position: relative;
  z-index: 1;
}
.breadcrumb a { color: var(--text-dim); transition: color 0.15s; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb .sep { color: var(--text-mute); opacity: 0.5; }
.breadcrumb .current { color: var(--text); }

.cat-hero {
  position: relative;
  padding: 32px 0 36px;
  border-bottom: 1px solid var(--line);
}
.cat-hero-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 40px;
  align-items: center;
}
.cat-hero h1 {
  font-size: clamp(30px, 4vw, 44px);
  margin: 0 0 12px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--text);
}
.cat-hero p { color: var(--text-dim); font-size: 16px; max-width: 580px; margin: 0; }
.cat-hero .stats {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.cat-hero .stat {
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.cat-hero .stat b {
  display: block;
  font-size: 20px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cat-hero .stat span {
  font-size: 12px;
  color: var(--text-mute);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.cat-hero-art {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cat-hero-art .hero-ico {
  font-size: 72px;
  color: var(--text-2);
}
.cat-hero-art .hero-ico svg { width: 88px; height: 88px; }

.cat-body {
  padding: 36px 0 80px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
}
.cat-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  align-self: start;
}
.cat-sidebar h4 {
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-mute);
  margin: 0 0 12px;
  font-weight: 600;
}
.cat-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cat-sidebar a {
  display: block;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-2);
  transition: all 0.12s;
  border-left: 2px solid transparent;
}
.cat-sidebar a:hover { color: var(--text); background: var(--bg-muted); }
.cat-sidebar a.active {
  color: var(--text);
  background: var(--bg-muted);
  font-weight: 500;
}

.section-block {
  margin-bottom: 44px;
}
.section-block h2 {
  font-size: 22px;
  margin: 0 0 6px;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--text);
}
.section-block .section-desc {
  color: var(--text-dim);
  margin: 0 0 18px;
  font-size: 14px;
}
.article-list {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.article-list .row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  transition: background 0.15s;
  border-top: 1px solid var(--line);
  color: inherit;
}
.article-list .row:first-child { border-top: 0; }
.article-list .row:hover { background: var(--surface-hover); }
.article-list .row .t {
  flex: 1;
  font-weight: 500;
  color: var(--text);
  font-size: 16px;
  letter-spacing: -0.005em;
  transition: color 0.15s;
}
.article-list .row:hover .t { color: var(--gold-light); }
.article-list .row .arr {
  color: var(--text-mute);
  transition: transform 0.2s, color 0.2s;
}
.article-list .row:hover .arr { color: var(--gold); transform: translateX(4px); }

/* -------------------- Article Page -------------------- */
.article-hero {
  padding: 28px 0 24px;
}
.article-hero .hero-eyebrow {
  display: inline-block;
  font-size: 12px;
  color: var(--link);
  font-weight: 500;
  margin-bottom: 8px;
  text-transform: none;
  letter-spacing: 0;
}
.article-hero h1 {
  font-size: clamp(28px, 3.6vw, 38px);
  margin: 8px 0 14px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  background: linear-gradient(135deg, #fff5d1, #ffd66b 60%, #b8862b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.article-hero .hero-eyebrow { color: var(--gold); }
.article-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--text-mute);
  font-size: 13px;
}
.article-meta span { display: inline-flex; align-items: center; gap: 6px; }
.article-meta .dot::before {
  content: '·';
  color: var(--text-mute);
  margin-right: 6px;
}

.article-body-grid {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 56px;
  padding-bottom: 80px;
}

/* Sidebar layout: sidebar + body, plus optional TOC on article pages */
.article-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 40px;
  padding-bottom: 80px;
  align-items: start;
}
.article-layout.has-toc {
  grid-template-columns: 260px minmax(0, 1fr) 220px;
  gap: 32px;
}
.article-layout.no-sidebar { grid-template-columns: minmax(0, 1fr); }
.article-layout.no-sidebar.has-toc { grid-template-columns: minmax(0, 1fr) 220px; }
.article-layout > .article-body { min-width: 0; }
.article-layout > .section-list-body { padding-top: 4px; }

/* Article sidebar */
.article-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  align-self: start;
  max-height: calc(100vh - var(--header-h) - 48px);
  display: flex;
  flex-direction: column;
}
.sb-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  text-align: left;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.sb-toggle:hover { background: var(--surface-hover); border-color: var(--line-strong); }
.sb-toggle-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  flex: 0 0 auto;
}
.sb-body {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 16px 14px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.sb-header {
  padding: 0 4px 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sb-back {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s var(--ease);
}
.sb-back:hover { color: var(--gold-light); }
.sb-cat {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  line-height: 1.35;
  letter-spacing: -0.01em;
  transition: color 0.15s var(--ease);
}
.sb-cat:hover { color: var(--gold-light); }
.sb-nav { display: flex; flex-direction: column; gap: 14px; }
.sb-section {}
.sb-section-title {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  padding: 4px 8px;
  margin-bottom: 4px;
  border-radius: 6px;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.sb-section-title:hover { color: var(--gold-light); background: var(--accent-soft); }
.sb-section.is-active .sb-section-title { color: var(--gold-light); }
.sb-articles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-left: 1px solid var(--line);
  margin-left: 8px;
  padding-left: 8px;
}
.sb-art {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.45;
  text-decoration: none;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.sb-art:hover { background: var(--surface-hover); color: var(--text); }
.sb-art.active {
  background: var(--accent-soft);
  color: var(--gold-light);
  font-weight: 600;
}

/* Prev / Next navigation at end of article body */
.prev-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 40px 0 0;
}
.pn-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.pn-card:hover {
  background: var(--surface-hover);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}
.pn-card.pn-next { text-align: right; }
.pn-dir {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  font-weight: 600;
}
.pn-dir::before { content: '← '; }
.pn-next .pn-dir::before { content: ''; }
.pn-next .pn-dir::after { content: ' →'; }
.pn-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pn-empty { display: none; }
.prev-next:has(.pn-empty:first-child) { grid-template-columns: 1fr; justify-items: end; }
.prev-next:has(.pn-empty:last-child) { grid-template-columns: 1fr; justify-items: start; }
.article-body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-2);
  position: relative;
  z-index: 1;
}
.article-body > * { margin: 0 0 16px; }
.article-body h2 {
  font-size: 22px;
  margin: 36px 0 12px;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--text);
}
.article-body h3 {
  font-size: 18px;
  margin: 26px 0 10px;
  color: var(--gold-light);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.article-body h4 {
  font-size: 16px;
  margin: 22px 0 8px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.article-body strong { color: var(--text); font-weight: 600; }
.article-body a { color: var(--gold-light); }
.article-body a:hover { color: var(--gold); text-decoration: underline; }
.article-body figure {
  margin: 18px 0;
}
.article-body figure figcaption {
  font-size: 13px;
  color: var(--text-mute);
  margin-top: 8px;
  text-align: center;
}
.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  margin: 8px 0;
}
.article-body img[width][height] {
  aspect-ratio: attr(width) / attr(height);
}
/* Zendesk wysiwyg-image-resized respects inline width:N% — keep its aspect-ratio */
.article-body img.wysiwyg-image-resized {
  display: inline-block;
}
.article-body .wysiwyg-text-align-center,
.article-body p[style*="text-align: center"],
.article-body p[style*="text-align:center"] {
  text-align: center;
}
.article-body u { text-decoration: underline; }
.article-body p { color: var(--text-2); }
.article-body ul, .article-body ol { padding-left: 22px; color: var(--text-2); }
.article-body li { margin-bottom: 6px; }
.article-body strong { color: var(--text); font-weight: 600; }
.article-body a { color: var(--link); }
.article-body a:hover { color: var(--link-hover); text-decoration: underline; }
.article-body blockquote {
  margin: 20px 0;
  padding: 14px 20px;
  border-left: 3px solid var(--gold);
  background: var(--accent-soft);
  border-radius: 0 8px 8px 0;
  color: var(--text-2);
  font-style: normal;
}
.article-body code {
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  color: var(--gold-light);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 14px;
}
.article-body th, .article-body td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.article-body th {
  background: var(--surface-2);
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 13px;
  text-transform: uppercase;
}
.article-body tr:last-child td { border-bottom: 0; }

.callout {
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.callout .ci {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--surface-2);
}
.callout .ci svg { width: 16px; height: 16px; }
.callout.info .ci { background: rgba(106, 167, 255, 0.15); color: var(--info); }
.callout.warn .ci { background: rgba(227, 93, 93, 0.15); color: var(--warn); }
.callout.tip  .ci { background: rgba(212, 175, 55, 0.15); color: var(--gold-light); }
.callout b { color: var(--text); display: block; margin-bottom: 2px; font-weight: 600; }

.aside-toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  align-self: start;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.aside-toc h4 {
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-mute);
  margin: 0 0 12px;
  font-weight: 600;
}
.aside-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}
.aside-toc a {
  color: var(--text-dim);
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s;
  display: block;
}
.aside-toc a:hover { color: var(--gold-light); background: var(--accent-soft); }

.related {
  margin-top: 40px;
}
.related h3 {
  font-size: 20px;
  margin: 0 0 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gold-light);
}

/* -------------------- Contact page -------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 28px 0 56px;
  position: relative;
  z-index: 1;
}
.contact-card {
  padding: 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--line);
  transition: all 0.25s var(--ease);
}
.contact-card:hover {
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.contact-card .cc-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.contact-card .cc-icon svg { width: 20px; height: 20px; }
.contact-card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.contact-card p { margin: 0 0 16px; color: var(--text-dim); font-size: 13px; line-height: 1.55; }

form.contact-form {
  display: grid;
  gap: 16px;
  max-width: 720px;
}
.field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: 0;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  outline: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* -------------------- Footer -------------------- */
.site-footer {
  position: relative;
  z-index: 1;
  margin-top: 80px;
  padding-top: 56px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.4));
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  max-width: 720px;
  margin: 0 auto;
}
.footer-col h4 {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
  font-weight: 600;
}
.footer-col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.footer-col a {
  color: var(--text-dim);
  font-size: 13px;
  transition: color 0.15s;
}
.footer-col a:hover { color: var(--gold-light); }
.footer-note {
  margin: 14px 0 0;
  color: var(--text-mute);
  font-size: 12px;
  max-width: 360px;
  line-height: 1.55;
}
.brand-foot .brand-name { font-size: 14px; }
.brand-foot .brand-sub { font-size: 11px; }
.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 22px 28px;
  border-top: 1px solid var(--line);
  color: var(--text-mute);
  font-size: 12px;
  gap: 8px;
}
.footer-bottom .rating {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  max-width: 720px;
  line-height: 1.55;
}

/* -------------------- 404 -------------------- */
.not-found {
  padding: 100px 0 120px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.not-found .big {
  font-size: clamp(90px, 13vw, 160px);
  line-height: 1;
  margin: 0 0 14px;
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #fff5d1, #ffd66b 55%, #9a6a1a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.not-found h2 { font-size: 26px; margin: 0 0 10px; font-weight: 700; letter-spacing: -0.015em; color: var(--text); }
.not-found p { color: var(--text-dim); margin: 0 0 28px; font-size: 15px; }

/* -------------------- Animations -------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.view > * { animation: fadeUp 0.35s var(--ease) both; }
.cat-card, .art-card { animation: fadeUp 0.35s var(--ease) both; }
.cat-card:nth-child(2) { animation-delay: 0.04s; }
.cat-card:nth-child(3) { animation-delay: 0.08s; }
.cat-card:nth-child(4) { animation-delay: 0.12s; }
.cat-card:nth-child(5) { animation-delay: 0.16s; }
.cat-card:nth-child(6) { animation-delay: 0.2s; }

/* -------------------- Responsive -------------------- */

/* Tablet — under 960px */
/* Header stacks into two rows on tablets / narrow laptops so the
   centered title never overlaps the language switcher + contact button */
@media (max-width: 1080px) {
  :root { --header-h: 116px; }
  .header-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: auto;
    padding: 14px 0;
  }
  .header-actions { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 960px) {
  .cat-body { grid-template-columns: 1fr; gap: 24px; }
  .cat-sidebar { position: static; }
  .article-body-grid { grid-template-columns: 1fr; gap: 24px; }
  .aside-toc { position: static; order: -1; }
  .cat-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .cat-hero-art { display: none; }
  .cta-band { padding: 32px; }

  /* Sidebar collapses to top of content; TOC appears above body */
  .article-layout,
  .article-layout.has-toc { grid-template-columns: 1fr; gap: 18px; }
  .article-sidebar {
    position: static;
    max-height: none;
    order: -2;
  }
  .article-layout > .aside-toc { order: -1; }
  .sb-toggle { display: inline-flex; }
  .sb-body {
    display: none;
    margin-top: 8px;
  }
  .article-sidebar.is-open .sb-body { display: block; }
  .prev-next { grid-template-columns: 1fr; }
  .pn-card.pn-next { text-align: left; }
}

/* ---- Compact header ----
   Large phone / small tablet — header compacts into two rows.
   Row 1: theme toggle (left) + title (centred) + contact icon (right)
   Row 2: language pills, full width
   Keeps the sticky header short so more body content is visible.

   TWO conditions, because a phone in LANDSCAPE is ~930px wide and would
   otherwise fall back to the 1080px block's tall stacked header:
     1. max-width: 720px                        → portrait phones
     2. max-width: 1080px and max-height: 500px → landscape phones
   The height cap keeps tablets out (iPad landscape is 1024x768) while
   catching every phone laid on its side (largest is ~956x440).

   Header rules ONLY. The width-only 720px block below still owns the body
   layout (1-column category grid, stacked search, …) — a 930px landscape
   screen has room for the wide layout and must not inherit those. */
@media (max-width: 720px), (max-width: 1080px) and (max-height: 500px) {
  :root { --header-h: 84px; }

  .header-row {
    display: grid;
    /* Fixed, identical side columns. The centre column is therefore always
       on the true horizontal centre — the title cannot drift when the
       language changes (`Contact Support` vs `联系客服` vs `サポートに連絡`).
       This only holds because the contact button is icon-only here; see
       .header-contact below. */
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    grid-template-areas:
      "toggle title contact"
      "lang   lang  lang";
    align-items: center;
    gap: 8px;
    height: auto;
    padding: 8px 0;
  }
  /* Unwrap .header-actions so the toggle and the contact button can sit on
     opposite edges with the title truly centred between them. */
  .header-actions { display: contents; }
  .theme-toggle {
    grid-area: toggle;
    justify-self: start;
    width: 30px;
    height: 30px;
  }
  .theme-toggle svg { width: 16px; height: 16px; }
  /* Icon-only contact button on mobile: its label is language-dependent and
     would otherwise change the header's column widths (and shove the title
     off-centre). Collapsing the label to font-size:0 and drawing an envelope
     via a mask keeps the button a fixed 30px circle in every language.
     The text node stays in the DOM, so the accessible name is unaffected.

     NOTE the `.header-row button…` selector: `button.header-contact` further
     down this file sets the `font` shorthand to `inherit`, which outranks a
     plain `.header-contact { font-size }` rule. Without the extra specificity
     the label would not collapse. */
  .header-row button.header-contact {
    grid-area: contact;
    justify-self: end;
    width: 30px;
    height: 30px;
    padding: 0;
    justify-content: center;
    font-size: 0;
    box-shadow: none;
  }
  .header-row button.header-contact::before {
    content: "";
    width: 16px;
    height: 16px;
    background-color: #1a1200;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .header-title {
    grid-area: title;
    justify-self: center;
    position: static;
    transform: none;
    white-space: normal;
    text-align: center;
    min-width: 0;
  }
  .header-title-text { font-size: clamp(14px, 4vw, 18px); line-height: 1.2; }
  .lang-switch {
    grid-area: lang;
    justify-self: center;
    padding: 2px;
  }
  .lang-switch button { padding: 5px 11px; font-size: 11.5px; font-weight: 600; }
}

/* Body layout for narrow screens — width-only on purpose (see note above). */
@media (max-width: 720px) {
  .container { padding: 0 18px; }

  /* One category card per row on mobile */
  .cat-grid { grid-template-columns: 1fr; gap: 16px; }
  .cat-card { padding: 40px 24px; min-height: 140px; }

  .hero { padding: 28px 0 32px; }
  /* Stack the search below the banner so nothing overlaps on small screens */
  .search-wrap {
    position: static;
    inset: auto;
    transform: none;
    display: block;
    padding: 0;
    margin-top: 18px;
  }
  .search-wrap::before { display: none; }
  /* Restore a comfortable, full-size search bar when stacked on mobile
     (override the smaller desktop-overlay sizing). */
  .hero .search { max-width: none; }
  .hero .search-box {
    padding: 6px;
    gap: 10px;
    box-shadow: var(--shadow);
    align-items: stretch;          /* let the button match the bar height */
  }
  .hero .search-box svg { width: 22px; height: 22px; align-self: center; margin-left: 14px; }
  .hero .search-box input { font-size: 16px; padding: 13px 0; }
  /* Button fills the bar height for a balanced pill-in-pill look */
  .hero .search-box button {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    font-size: 14px;
  }

  section.block { padding: 36px 0; }

  .cat-grid { grid-template-columns: 1fr; gap: 12px; }
  .cat-card { padding: 36px 18px; min-height: 120px; border-radius: 18px; }
  .cat-card h3 { font-size: clamp(17px, 4.6vw, 21px); }

  .section-grid { grid-template-columns: 1fr; gap: 12px; }
  .section-card { padding: 22px 20px; min-height: auto; border-radius: 14px; }
  .section-card h3 { font-size: 17px; }

  .article-list .row { padding: 16px 18px; gap: 10px; }
  .article-list .row .t { font-size: 14.5px; }

  .breadcrumb { font-size: 12px; padding: 18px 0 0; flex-wrap: wrap; row-gap: 4px; }
  .cat-page-hero { padding: 22px 0 28px; margin-bottom: 28px; }
  .cat-page-hero h1 { font-size: clamp(24px, 6.5vw, 32px); }
  .cat-page-hero p { font-size: 14px; }

  .article-hero { padding: 22px 0 18px; }
  .article-hero h1 { font-size: clamp(22px, 6vw, 28px); }
  .article-meta { font-size: 12px; gap: 10px; }

  .article-body { font-size: 15px; line-height: 1.7; }
  .article-body h2 { font-size: 20px; margin-top: 28px; }
  .article-body h3 { font-size: 16px; margin-top: 22px; }
  .article-body h4 { font-size: 15px; }
  .article-body table { font-size: 12.5px; display: block; overflow-x: auto; }
  .article-body th, .article-body td { padding: 10px 12px; }
  .article-body img { border-radius: 8px; }
  .article-body blockquote { padding: 12px 16px; }

  .field-row { grid-template-columns: 1fr; }
  .cta-band { padding: 28px; flex-direction: column; align-items: stretch; text-align: center; }
  .cta-band .cta-actions { justify-content: center; }
  .contact-grid { grid-template-columns: 1fr; gap: 12px; }
  .contact-card { padding: 22px; }

  .search-result { padding: 12px 14px; gap: 10px; }
  .search-result .result-title { font-size: 14px; }
  .search-result .result-snippet { font-size: 12px; }
  .search-result-list .search-result { padding: 14px 16px; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 32px; text-align: center; }
  .footer-col ul { align-items: center; }
  .site-footer { margin-top: 56px; padding-top: 44px; }

  .not-found { padding: 64px 0 80px; }
}

/* Small phone — under 480px */
@media (max-width: 480px) {
  :root { --header-h: 76px; }

  .container { padding: 0 14px; }

  .header-row { grid-template-columns: 28px minmax(0, 1fr) 28px; padding: 7px 0; gap: 7px 6px; }
  .header-title-text { font-size: clamp(13px, 3.9vw, 16px); }
  .lang-switch button { padding: 4px 8px; font-size: 11px; letter-spacing: 0; }
  .header-row button.header-contact { width: 28px; height: 28px; }
  .header-row button.header-contact::before { width: 15px; height: 15px; }
  .theme-toggle { width: 28px; height: 28px; }
  .theme-toggle svg { width: 14px; height: 14px; }

  .hero { padding: 20px 0 26px; }
  .hero-banner { border-radius: 12px; }
  .search-wrap { margin-top: 14px; }
  .hero .search-box { padding: 5px; gap: 8px; }
  .hero .search-box svg { width: 20px; height: 20px; margin-left: 12px; }
  .hero .search-box input { font-size: 16px; padding: 12px 0; }
  .hero .search-box button { padding: 0 18px; font-size: 13px; }

  section.block { padding: 28px 0; }

  .cat-grid { grid-template-columns: 1fr; gap: 10px; }
  .cat-card { padding: 28px 14px; min-height: 100px; border-radius: 16px; }
  .cat-card h3 { font-size: 16px; }
  .cat-card::after { width: 22px; bottom: 16px; }

  .section-card { padding: 18px 16px; }
  .section-card h3 { font-size: 16px; }

  .article-list .row { padding: 14px 14px; }
  .article-list .row .t { font-size: 14px; }

  .article-body { font-size: 14.5px; }
  .article-body h2 { font-size: 18px; }
  .article-body h3 { font-size: 15.5px; }

  .cta-band { padding: 22px; }
  .contact-card { padding: 18px; }
  .field input, .field select, .field textarea { padding: 11px 13px; font-size: 14px; }

  .footer-bottom { padding: 18px 16px 22px; font-size: 11px; }
  .footer-bottom .rating { font-size: 11.5px; line-height: 1.5; }

  .not-found .big { font-size: clamp(70px, 22vw, 110px); }
  .not-found h2 { font-size: 20px; }
}

/* Tiny phones — under 360px (very narrow) */
@media (max-width: 360px) {
  .lang-switch button { padding: 4px 6px; font-size: 10.5px; }
  .header-title-text { font-size: 13px; }
  .cat-grid { grid-template-columns: 1fr; }
  .cat-card { padding: 32px 18px; min-height: 90px; }
}

/* -------------------- Light theme -------------------- */
:root[data-theme="light"] {
  --bg: #f5f5f7;
  --bg-soft: #ececf0;
  --bg-muted: #e3e3e8;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --surface-hover: #ececf0;

  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.16);

  --text: #1d1d1f;
  --text-2: #3a3a3d;
  --text-dim: #6e6e73;
  --text-mute: #86868b;

  --gold: #b8862b;
  --gold-light: #b8862b;
  --gold-deep: #6b4a13;
  --accent-soft: rgba(212, 175, 55, 0.14);
  --accent-glow: rgba(184, 134, 43, 0.22);

  --link: #b8862b;
  --link-hover: #9a6a1a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.14);
  --gold-shadow: 0 8px 26px rgba(212, 175, 55, 0.28);
}

:root[data-theme="light"] body::before {
  background:
    radial-gradient(900px 480px at 14% -10%, rgba(212, 175, 55, 0.10), transparent 60%),
    radial-gradient(800px 460px at 100% 0%, rgba(212, 175, 55, 0.06), transparent 55%),
    radial-gradient(700px 400px at 50% 110%, rgba(212, 175, 55, 0.05), transparent 60%);
}

:root[data-theme="light"] .site-header {
  background: rgba(255, 255, 255, 0.78);
  border-bottom-color: var(--line);
}
:root[data-theme="light"] .site-header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .lang-switch,
:root[data-theme="light"] .theme-toggle {
  background: rgba(0, 0, 0, 0.04);
}
:root[data-theme="light"] .theme-toggle:hover {
  background: var(--accent-soft);
}

:root[data-theme="light"] .header-title-text,
:root[data-theme="light"] .cat-page-hero h1,
:root[data-theme="light"] .article-hero h1,
:root[data-theme="light"] .not-found .big {
  background: linear-gradient(135deg, #b8862b 0%, #9a6a1a 55%, #6b4a13 100%);
  -webkit-background-clip: text;
  background-clip: text;
}


:root[data-theme="light"] .search-tags a {
  background: var(--surface);
}
:root[data-theme="light"] .search-results {
  background: var(--surface);
}

:root[data-theme="light"] .cat-card:hover {
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.12);
}
:root[data-theme="light"] .section-card:hover {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.10);
}

:root[data-theme="light"] mark {
  background: rgba(212, 175, 55, 0.28);
  color: #6b4a13;
}

:root[data-theme="light"] .article-body code {
  color: var(--gold-deep);
}

:root[data-theme="light"] .site-footer {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.04));
}

/* ---------- Contact modal ---------- */
button.header-contact {
  font: inherit;
  cursor: pointer;
  border: none;
}

body.modal-open { overflow: hidden; }

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.contact-modal[hidden] { display: none; }

.contact-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.18s var(--ease);
}
.contact-modal.is-open .contact-modal-backdrop { opacity: 1; }

.contact-modal-panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 32px 28px 24px;
  text-align: center;
  transform: translateY(12px) scale(0.98);
  opacity: 0;
  transition: transform 0.22s var(--ease), opacity 0.18s var(--ease);
}
.contact-modal.is-open .contact-modal-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.contact-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.contact-modal-close:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.contact-modal-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.contact-modal-panel h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.contact-modal-lead {
  margin: 0 0 20px;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.55;
}

.contact-modal-email {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--bg-muted);
  border: 1px solid var(--line);
  margin-bottom: 20px;
}
.contact-modal-email-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
}
.contact-modal-email a {
  color: var(--link);
  font-weight: 600;
  word-break: break-all;
  cursor: pointer;
}
.contact-modal-email a:hover { color: var(--link-hover); text-decoration: underline; }

/* Toast (e.g. "Copied to clipboard") */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 16px);
  z-index: 1000;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.app-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.contact-modal-compose {
  margin: 0 0 18px;
}
.contact-modal-compose-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.contact-modal-compose-hint {
  font-size: 12px;
  color: var(--text-mute);
  margin-bottom: 10px;
}
.contact-modal-providers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.contact-modal-provider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  background: var(--surface-hover, rgba(255,255,255,0.04));
  color: var(--text);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.1s var(--ease);
  font-family: inherit;
  text-align: center;
}
.contact-modal-provider:hover {
  background: var(--surface);
  border-color: var(--line-strong);
}
.contact-modal-provider:active { transform: translateY(1px); }
.contact-modal-provider .provider-ico {
  width: 16px;
  height: 16px;
  display: inline-flex;
  flex: 0 0 auto;
}
:root[data-theme="light"] .contact-modal-provider {
  background: rgba(0,0,0,0.03);
}
:root[data-theme="light"] .contact-modal-provider:hover {
  background: rgba(0,0,0,0.06);
}

.contact-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.contact-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.1s var(--ease);
  font-family: inherit;
  min-width: 130px;
}
.contact-modal-btn.primary {
  background: var(--gold);
  color: #1a1206;
  box-shadow: var(--gold-shadow);
}
.contact-modal-btn.primary:hover {
  background: var(--gold-light);
}
.contact-modal-btn.ghost {
  background: transparent;
  color: var(--text-2);
  border-color: var(--line-strong);
}
.contact-modal-btn.ghost:hover {
  background: var(--surface-hover);
  color: var(--text);
}
.contact-modal-btn:active { transform: translateY(1px); }

:root[data-theme="light"] .contact-modal-backdrop {
  background: rgba(20, 20, 25, 0.45);
}
:root[data-theme="light"] .contact-modal-panel {
  background: #ffffff;
}
:root[data-theme="light"] .contact-modal-email {
  background: rgba(0, 0, 0, 0.03);
}
:root[data-theme="light"] .contact-modal-btn.primary {
  color: #ffffff;
}