/* GoldKH design system (brand kit v3) - shared by the app and the front page.
   Every class and token is prefixed kh- so it never clashes with the app's own CSS.
   Load once:  <link rel="stylesheet" href="brand/brand.css">   (relative urls below resolve inside brand/)
   Tokens: --kh-red --kh-red-deep --kh-gold --kh-champagne --kh-ink --kh-gray --kh-success --kh-warning --kh-error,
           semantic --kh-bg --kh-surface --kh-text --kh-text-2 --kh-line (these flip in dark mode). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Moul&family=Noto+Sans+Khmer:wght@400;500;600;700&family=Noto+Serif+Khmer:wght@600;700&family=Playfair+Display:wght@600;700&display=swap');

:root {
  /* brand palette */
  --kh-red: #7A0000;            /* Royal Red, primary */
  --kh-red-bright: #B5121B;
  --kh-red-deep: #4A0E0E;       /* Burgundy, secondary */
  --kh-burgundy: #4A0E0E;
  --kh-gold: #D4AF37;           /* Gold, primary */
  --kh-gold-light: #F7E7A1;
  --kh-gold-dark: #9A7413;
  --kh-gold-ink: #6E5010;       /* gold-toned text on light backgrounds */
  --kh-champagne: #F8E6C9;      /* Champagne, background */
  --kh-cream: #FBF3E3;
  --kh-white: #FFFFFF;
  --kh-ink: #1A1A1A;            /* Charcoal, text */
  --kh-gray: #6B7280;           /* secondary text */
  --kh-success: #0A8F4F;
  --kh-warning: #F59E0B;
  --kh-error: #EF4444;
  --kh-info: #2563EB;           /* "in progress" chips only */

  /* gradients */
  --kh-gold-grad: linear-gradient(135deg, #F7E7A1 0%, #D4AF37 52%, #9A7413 100%);
  --kh-gold-grad-soft: linear-gradient(180deg, #FAEDB4 0%, #E9C95E 55%, #D4AF37 100%);
  --kh-gold-grad-text: linear-gradient(180deg, #FBEFB8 0%, #E6C458 48%, #B8892A 100%);
  --kh-red-grad: linear-gradient(180deg, #B5121B 0%, #7A0000 55%, #610303 100%);
  --kh-red-grad-deep: linear-gradient(160deg, #7A0000 0%, #5E0606 60%, #4A0E0E 100%);

  /* semantic (light) */
  --kh-bg: #FBF3E3;
  --kh-surface: #FFFDF9;
  --kh-surface-2: #FCF4E6;
  --kh-text: #1A1A1A;
  --kh-text-2: #6B7280;
  --kh-heading: #7A0000;
  --kh-line: rgba(122, 0, 0, .10);
  --kh-line-gold: rgba(212, 175, 55, .45);

  /* shape + depth */
  --kh-radius-sm: 8px;
  --kh-radius: 12px;
  --kh-radius-lg: 18px;
  --kh-radius-xl: 26px;
  --kh-radius-pill: 999px;
  --kh-shadow-sm: 0 1px 2px rgba(90, 0, 0, .06);
  --kh-shadow: 0 1px 2px rgba(90, 0, 0, .05), 0 8px 24px rgba(90, 0, 0, .08);
  --kh-shadow-lg: 0 2px 6px rgba(90, 0, 0, .06), 0 22px 50px rgba(90, 0, 0, .16);
  --kh-shadow-red: 0 6px 16px rgba(122, 0, 0, .28);
  --kh-shadow-gold: 0 6px 16px rgba(154, 116, 19, .26);
  --kh-focus: 0 0 0 3px rgba(212, 175, 55, .55);

  /* type */
  --kh-font-display: 'Playfair Display', 'Noto Serif Khmer', Georgia, 'Times New Roman', serif;
  --kh-font-ui: 'Inter', 'Noto Sans Khmer', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --kh-font-km: 'Noto Sans Khmer', 'Inter', system-ui, sans-serif;
  --kh-font-km-display: 'Noto Serif Khmer', 'Noto Sans Khmer', serif;
  --kh-font-moul: 'Moul', 'Noto Serif Khmer', serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --kh-bg: #140707;
    --kh-surface: #221010;
    --kh-surface-2: #2C1513;
    --kh-text: #F6EEE4;
    --kh-text-2: #BFAFA3;
    --kh-heading: #F3D98A;
    --kh-line: rgba(243, 217, 138, .14);
    --kh-line-gold: rgba(212, 175, 55, .38);
    --kh-gold-ink: #E9CF7A;
    --kh-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --kh-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .35);
    --kh-shadow-lg: 0 2px 6px rgba(0, 0, 0, .45), 0 24px 56px rgba(0, 0, 0, .5);
    --kh-shadow-red: 0 6px 18px rgba(0, 0, 0, .45);
    --kh-shadow-gold: 0 6px 18px rgba(0, 0, 0, .45);
  }
}

/* ------------------------------------------------------------ headings + text */
.kh-display, .kh-h1, .kh-h2, .kh-h3 { font-family: var(--kh-font-display); color: var(--kh-heading); margin: 0; font-weight: 700; letter-spacing: -.01em; }
.kh-display { font-size: clamp(38px, 6.4vw, 68px); line-height: 1.04; }
.kh-h1 { font-size: clamp(30px, 4.6vw, 44px); line-height: 1.1; }
.kh-h2 { font-size: clamp(23px, 3.2vw, 30px); line-height: 1.18; }
.kh-h3 { font-size: 19px; line-height: 1.25; font-weight: 600; }
.kh-eyebrow { font: 600 12px/1.4 var(--kh-font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--kh-red); }
.kh-tagline { font: 600 11px/1.4 var(--kh-font-ui); letter-spacing: .26em; text-transform: uppercase; color: var(--kh-gold-ink); }
.kh-lead { font: 400 17px/1.6 var(--kh-font-ui); color: var(--kh-text-2); }
.kh-muted { color: var(--kh-text-2); }
.kh-km { font-family: var(--kh-font-km); line-height: 1.7; }
.kh-km-heading { font-family: var(--kh-font-km-display); font-weight: 700; line-height: 1.5; color: var(--kh-heading); }
.kh-km-title { font-family: var(--kh-font-moul); font-weight: 400; line-height: 1.5; letter-spacing: 0; }   /* big decorative Khmer (price board) */
.kh-gold-text { background: var(--kh-gold-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.kh-num { font-variant-numeric: tabular-nums; }
/* Khmer never takes letter-spacing or capitals; Khmer headings use the Khmer serif and a taller line */
:lang(km) .kh-eyebrow, :lang(km) .kh-tagline, .km .kh-eyebrow, .km .kh-tagline,
.kh-eyebrow:lang(km), .kh-tagline:lang(km) { letter-spacing: 0; text-transform: none; font-family: var(--kh-font-km); }
:lang(km) .kh-display, :lang(km) .kh-h1, :lang(km) .kh-h2, :lang(km) .kh-h3,
.km .kh-display, .km .kh-h1, .km .kh-h2, .km .kh-h3 { font-family: var(--kh-font-km-display); line-height: 1.45; letter-spacing: 0; }
@media (prefers-color-scheme: dark) { .kh-eyebrow { color: var(--kh-gold); } }

/* ------------------------------------------------------------ buttons */
.kh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px;
  border: 1.5px solid transparent; border-radius: var(--kh-radius); font: 600 15px/1.2 var(--kh-font-ui); letter-spacing: .01em;
  text-decoration: none; cursor: pointer; white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, background-color .2s ease; }
.kh-btn:focus-visible { outline: none; box-shadow: var(--kh-focus); }
.kh-btn:active { transform: translateY(1px) scale(.99); }
.kh-btn:disabled, .kh-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; filter: grayscale(.2); }
.kh-btn-primary { background: var(--kh-red-grad); color: #FFFFFF; box-shadow: var(--kh-shadow-red), inset 0 1px 0 rgba(255, 255, 255, .18); }
.kh-btn-primary:hover { filter: brightness(1.08); }
.kh-btn-secondary { background: var(--kh-gold-grad-soft); color: #3B2A00; border-color: rgba(154, 116, 19, .35); box-shadow: var(--kh-shadow-gold), inset 0 1px 0 rgba(255, 255, 255, .55); }
.kh-btn-secondary:hover { filter: brightness(1.04) saturate(1.05); }
.kh-btn-outline { background: transparent; color: var(--kh-red); border-color: var(--kh-red); }
.kh-btn-outline:hover { background: rgba(122, 0, 0, .06); }
.kh-btn-ghost { background: rgba(26, 26, 26, .05); color: var(--kh-text); }
.kh-btn-ghost:hover { background: rgba(26, 26, 26, .09); }
.kh-btn-sm { min-height: 34px; padding: 6px 14px; font-size: 13px; border-radius: 10px; }
.kh-btn-lg { min-height: 52px; padding: 14px 26px; font-size: 16px; border-radius: 14px; }
.kh-btn-block { display: flex; width: 100%; }
.kh-btn-pill { border-radius: var(--kh-radius-pill); }
.kh-btn-arrow::after { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; margin-right: -4px;
  -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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6l6 6-6 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (prefers-color-scheme: dark) {
  .kh-btn-outline { color: var(--kh-gold-light); border-color: var(--kh-gold); }
  .kh-btn-outline:hover { background: rgba(212, 175, 55, .1); }
  .kh-btn-ghost { background: rgba(255, 255, 255, .07); color: var(--kh-text); }
  .kh-btn-ghost:hover { background: rgba(255, 255, 255, .12); }
}

/* ------------------------------------------------------------ status chips */
.kh-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: var(--kh-radius-pill);
  font: 600 12.5px/1.3 var(--kh-font-ui); border: 1px solid transparent; white-space: nowrap; background: var(--kh-surface-2); color: var(--kh-text-2); }
.kh-chip::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; border-radius: 50%; }
.kh-chip.success { color: #12803B; background: rgba(22, 163, 74, .10); border-color: rgba(22, 163, 74, .28); }
.kh-chip.pending { color: #A05F00; background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .34); }
.kh-chip.progress { color: #1D4FC4; background: rgba(37, 99, 235, .09); border-color: rgba(37, 99, 235, .26); }
.kh-chip.error { color: #C81E1E; background: rgba(239, 68, 68, .09); border-color: rgba(239, 68, 68, .28); }
.kh-chip.success::before, .kh-chip.pending::before, .kh-chip.progress::before, .kh-chip.error::before { border-radius: 0; }
.kh-chip.success::before { -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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.4l2.7 2.7L16.2 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.4l2.7 2.7L16.2 9.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.kh-chip.pending::before { -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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 2'/%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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") center / contain no-repeat; }
.kh-chip.progress::before { -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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.6v6.8l5.4-3.4z' fill='black'/%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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.6v6.8l5.4-3.4z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; }
.kh-chip.error::before { -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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.2 9.2l5.6 5.6M14.8 9.2l-5.6 5.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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.2 9.2l5.6 5.6M14.8 9.2l-5.6 5.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.kh-chip.gold { color: var(--kh-gold-ink); background: rgba(212, 175, 55, .14); border-color: rgba(212, 175, 55, .4); }
.kh-chip.gold::before { width: 7px; height: 7px; border-radius: 1px; transform: rotate(45deg); background: var(--kh-gold); }
@media (prefers-color-scheme: dark) {
  .kh-chip.success { color: #4ADE80; } .kh-chip.pending { color: #FBBF24; }
  .kh-chip.progress { color: #7EA8FF; } .kh-chip.error { color: #FF8A8A; }
}

/* ------------------------------------------------------------ divider: gold lines + kbach diamond */
.kh-divider { display: block; height: 24px; margin: 14px auto; border: 0; padding: 0; background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 0 100 40' width='100' height='40'%3E%3Cdefs%3E%3ClinearGradient id='khdc-rim' x1='0' y1='4' x2='0' y2='36' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23C69A33'/%3E%3Cstop offset='.55' stop-color='%239A7413'/%3E%3Cstop offset='1' stop-color='%236E5010'/%3E%3C/linearGradient%3E%3ClinearGradient id='khdc-face' x1='0' y1='4' x2='0' y2='36' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FFF4C8'/%3E%3Cstop offset='.3' stop-color='%23F0D57E'/%3E%3Cstop offset='.62' stop-color='%23D4AF37'/%3E%3Cstop offset='1' stop-color='%23A9811D'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill-rule='evenodd'%3E%3Cpath fill='url(%23khdc-rim)' d='M60,14.5 54.5,20 60,25.5 65.5,20ZM60,33 73,20 60,7 47,20ZM60,29.04 50.96,20 60,10.96 69.04,20ZM60,0.02 58.02,3.11 57.81,3.72 57.87,4.21 58.06,4.46 58.33,4.66 59.24,4.94 60.54,4.97 61.56,4.72 61.94,4.46 62.16,4.12 62.19,3.72 62.03,3.2ZM22.28,20 26.19,21.08 31.98,22.99 34.46,23.72 36.9,24.24 39.02,24.4 40.13,24.31 41.1,24.09 42.06,23.72 42.87,23.24 43.68,22.54 44.34,21.69 44.74,20.95 45,20 44.74,19.05 44.21,18.11 43.54,17.33 42.74,16.67 41.79,16.15 40.83,15.83 39.72,15.64 38.6,15.6 36.61,15.8 34.31,16.31 25.75,19.06ZM75.79,21.89 76.32,22.54 76.86,23.03 77.53,23.5 78.35,23.9 79.17,24.17 80.14,24.34 82.11,24.36 83.96,24.09 85.98,23.61 94.25,20.94 97.72,20 94.25,19.06 87.88,16.96 85.26,16.2 82.67,15.7 81.54,15.61 80.42,15.63 79.04,15.87 77.81,16.35 76.73,17.08 75.92,17.93 75.26,19.05 75,20 75.26,20.95ZM58.74,35.17 58.24,35.39 57.94,35.68 57.81,36.02 57.85,36.45 58.25,37.31 60,39.98 61.92,37.01 62.17,36.39 62.17,35.9 62.02,35.62 61.76,35.39 60.92,35.08 60,35ZM16.82,19.45 16.47,18.79 15.9,18.32 15.19,18.11 14.45,18.18 13.79,18.53 13.32,19.1 13.11,19.81 13.18,20.55 13.53,21.21 14.1,21.68 14.81,21.89 15.55,21.82 16.21,21.47 16.68,20.9 16.89,20.19ZM106.82,19.45 106.47,18.79 105.9,18.32 105.19,18.11 104.45,18.18 103.79,18.53 103.32,19.1 103.11,19.81 103.18,20.55 103.53,21.21 104.1,21.68 104.81,21.89 105.55,21.82 106.21,21.47 106.68,20.9 106.89,20.19Z'/%3E%3Cpath fill='url(%23khdc-face)' d='M60,15.49 55.49,20 60,24.51 64.51,20ZM60,32.01 72.01,20 60,7.99 47.99,20ZM60,30.03 49.97,20 60,9.97 70.03,20ZM76.36,21.48 76.83,22.05 77.42,22.58 78.01,22.97 78.73,23.3 80.22,23.65 82.05,23.66 83.82,23.41 86.08,22.85 94.96,20 87.52,17.58 85.08,16.88 82.59,16.39 81.52,16.31 80.48,16.33 79.34,16.51 78.25,16.91 77.3,17.51 76.6,18.21 76.02,19.09 75.72,20 75.91,20.67ZM58.95,35.84 58.52,36.07 58.56,36.38 58.92,37.06 60,38.67 61.22,36.84 61.44,36.38 61.49,36.09 61.12,35.86 60.48,35.73 59.52,35.73ZM60,1.33 58.61,3.49 58.5,3.9 58.74,4.08 59.52,4.27 60.48,4.27 61.12,4.14 61.49,3.92 61.44,3.62 61.22,3.16ZM25.04,20 34.49,23.01 36.87,23.53 38.88,23.7 39.9,23.63 40.78,23.46 41.63,23.15 42.34,22.75 43.05,22.17 43.64,21.48 44.09,20.67 44.28,20 44.09,19.33 43.64,18.52 43.05,17.83 42.34,17.25 41.63,16.85 40.78,16.54 39.9,16.37 38.88,16.3 36.87,16.47 34.49,16.99ZM106.15,19.65 105.93,19.24 105.57,18.94 105.12,18.81 104.65,18.85 104.24,19.07 103.94,19.43 103.81,19.88 103.85,20.35 104.07,20.76 104.43,21.06 104.88,21.19 105.35,21.15 105.76,20.93 106.06,20.57 106.19,20.12ZM16.15,19.65 15.93,19.24 15.57,18.94 15.12,18.81 14.65,18.85 14.24,19.07 13.94,19.43 13.81,19.88 13.85,20.35 14.07,20.76 14.43,21.06 14.88,21.19 15.35,21.15 15.76,20.93 16.06,20.57 16.19,20.12Z'/%3E%3C/g%3E%3C/svg%3E") center / 60px 24px no-repeat,
  linear-gradient(90deg, rgba(212, 175, 55, 0), var(--kh-gold)) left center / calc(50% - 34px) 1.5px no-repeat,
  linear-gradient(270deg, rgba(212, 175, 55, 0), var(--kh-gold)) right center / calc(50% - 34px) 1.5px no-repeat; }
.kh-divider-short { max-width: 260px; }

/* ------------------------------------------------------------ cards */
.kh-card { position: relative; background: var(--kh-surface); color: var(--kh-text); border: 1px solid var(--kh-line);
  border-radius: var(--kh-radius-lg); box-shadow: var(--kh-shadow); padding: 18px; }
.kh-card-gold { border-color: var(--kh-line-gold); }
.kh-card-red { background: var(--kh-red-grad-deep); color: #FFF4DE; border-color: rgba(212, 175, 55, .45); }
.kh-card-red .kh-h1, .kh-card-red .kh-h2, .kh-card-red .kh-h3, .kh-card-red .kh-display { color: var(--kh-gold-light); }
/* two kbach corners (top-left + bottom-right); size with --kh-corner */
.kh-card-ornate { --kh-corner: 64px; isolation: isolate; border-radius: var(--kh-radius-sm); border-color: var(--kh-line-gold);
  padding: calc(var(--kh-corner) * .55) calc(var(--kh-corner) * .5); }
.kh-card-ornate::before, .kh-card-ornate::after { content: ""; position: absolute; inset: 5px; pointer-events: none; z-index: -1;
  background: url(kbach-corner.svg) top left / var(--kh-corner) var(--kh-corner) no-repeat; }
.kh-card-ornate::after { transform: scale(-1, -1); }

/* ------------------------------------------------------------ backgrounds (vector art shows until the photo files exist) */
.kh-bg-red { background: var(--kh-red-grad-deep); color: #FFF4DE; }
.kh-bg-champagne { background: linear-gradient(180deg, #FCF3E2, #F8E6C9); }
.kh-hero-art { background: url(hero-angkor.jpg) center / cover no-repeat, url(angkor-sunset.svg) 72% 50% / cover no-repeat, var(--kh-champagne); }
@media (max-width: 700px) {
  .kh-hero-art { background: url(hero-angkor-mobile.jpg) center / cover no-repeat, url(angkor-sunset.svg) 86% 50% / cover no-repeat, var(--kh-champagne); }
}
.kh-silk-art { background: url(bracelet-silk.jpg) center / cover no-repeat, radial-gradient(120% 90% at 70% 30%, #B0141B 0%, #7A0000 45%, #4A0E0E 100%); }
.kh-board-art { background: url(board-bg-4x5.png) center / 100% 100% no-repeat, url(kbach-pattern.svg) 0 0 / 96px 96px, var(--kh-red-grad-deep); }
.kh-board-art.square { background: url(board-bg-1x1.png) center / 100% 100% no-repeat, url(kbach-pattern.svg) 0 0 / 96px 96px, var(--kh-red-grad-deep); }

/* ------------------------------------------------------------ small parts */
.kh-mark { display: inline-block; width: 1em; height: 1em; background: url(goldkh-lotus-256.png) center / contain no-repeat; vertical-align: -.12em; }
.kh-icon-badge { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: var(--kh-gold);
  background: radial-gradient(circle at 35% 30%, #B31A1F, #7A0000 55%, #4A0E0E); box-shadow: inset 0 0 0 1.5px rgba(212, 175, 55, .55), var(--kh-shadow-red); }
.kh-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #D61F26; color: #FFFFFF; font: 700 11px/1 var(--kh-font-ui); box-shadow: 0 0 0 2px var(--kh-surface); }
.kh-input { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--kh-radius); border: 1px solid var(--kh-line);
  background: var(--kh-surface); color: var(--kh-text); font: 400 15px/1.3 var(--kh-font-ui); }
.kh-input:focus { outline: none; border-color: var(--kh-gold); box-shadow: var(--kh-focus); }
.kh-input::placeholder { color: var(--kh-text-2); }