/* ============================================================
   KillerRocks - Full Standalone Stylesheet
   Self-hosted. No Tailwind, no external CDN, no third party.
   ============================================================ */

/* ── 1. FONTS ─────────────────────────────────────────────── */
@font-face { font-family:'Rajdhani'; font-style:normal; font-weight:500; font-display:swap; src:url('/static/fonts/rajdhani-500.woff2') format('woff2'); }
@font-face { font-family:'Rajdhani'; font-style:normal; font-weight:600; font-display:swap; src:url('/static/fonts/rajdhani-600.woff2') format('woff2'); }
@font-face { font-family:'Rajdhani'; font-style:normal; font-weight:700; font-display:swap; src:url('/static/fonts/rajdhani-700.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/static/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('/static/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('/static/fonts/inter-600.woff2') format('woff2'); }

/* ── 2. CSS VARIABLES ─────────────────────────────────────── */
:root {
  --kr-black:      #000000;   /* pure black - text, headings */
  --kr-dark:       #F2F2F2;   /* light gray - alternate section backgrounds */
  --kr-card:       #FFFFFF;   /* card background - white */
  --kr-border:     #DDDDDD;   /* borders - light gray */
  --kr-gold:       #D4AF37;   /* real amber gold accent */
  --kr-gold-dark:  #B8960C;   /* deeper gold for borders/hover */
  --kr-gold-light: #F5D060;   /* lighter gold for hover highlights */
  --kr-gold-text:  #B8860B;   /* dark amber - readable on white bg */
  --kr-red:        #CC0000;   /* errors only */
  --kr-crystal:    #444444;   /* rank display */
  --kr-purple:     #550077;   /* rank display */
  --kr-green:      #1a7a3a;   /* rank display */
}

/* ── 3. BASE RESET ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: #FFFFFF;
  color: #0A0A0A;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── LIGHT-THEME TEXT OVERRIDE ─────────────────────────────
   Templates written for dark theme use text-white for headings.
   On the white background those map to near-black.
   Buttons / chips / badges that intentionally show white text
   handle their own color with !important so they override this. */
.text-white { color: #0A0A0A !important; }
/* Restore white text inside explicitly dark sections          */
.kr-footer .text-white,
.kr-dark-section .text-white { color: #FFFFFF !important; }
.kr-footer .text-gray-400,
.kr-footer .text-gray-500,
.kr-footer .section-subtitle { color: #AAAAAA !important; }
.kr-footer .footer-link { color: #888888 !important; }
.kr-footer .footer-link:hover { color: #FFFFFF !important; }
/* Buttons always keep their own explicit text color           */
.btn-gold,
.btn-gold:hover,
.btn-red,
.btn-red:hover { color: inherit; }   /* overridden by .btn-* rule below */
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; }

/* ── 4. DISPLAY ───────────────────────────────────────────── */
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.block       { display: block; }
.inline-block{ display: inline-block; }
.inline      { display: inline; }
.grid        { display: grid; }
.hidden      { display: none !important; }
.table       { display: table; }
.table-cell  { display: table-cell; }

/* ── 5. FLEX ──────────────────────────────────────────────── */
.flex-col     { flex-direction: column; }
.flex-row     { flex-direction: row; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1 1 0%; }
.flex-none    { flex: none; }
.shrink-0     { flex-shrink: 0; }
.items-start  { align-items: flex-start; }
.items-center { align-items: center; }
.items-end    { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.self-center { align-self: center; }
.self-start  { align-self: flex-start; }

/* ── 6. GRID ──────────────────────────────────────────────── */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }

/* Gaps */
.gap-0   { gap: 0; }
.gap-1   { gap: 0.25rem; }
.gap-1\.5{ gap: 0.375rem; }
.gap-2   { gap: 0.5rem; }
.gap-3   { gap: 0.75rem; }
.gap-4   { gap: 1rem; }
.gap-5   { gap: 1.25rem; }
.gap-6   { gap: 1.5rem; }
.gap-8   { gap: 2rem; }
.gap-10  { gap: 2.5rem; }
.gap-12  { gap: 3rem; }

/* ── 7. WIDTHS ────────────────────────────────────────────── */
.w-full { width: 100%; }
.w-px   { width: 1px; }
.w-1    { width: 0.25rem; }
.w-1\.5 { width: 0.375rem; }
.w-2    { width: 0.5rem; }
.w-3    { width: 0.75rem; }
.w-4    { width: 1rem; }
.w-5    { width: 1.25rem; }
.w-6    { width: 1.5rem; }
.w-7    { width: 1.75rem; }
.w-8    { width: 2rem; }
.w-10   { width: 2.5rem; }
.w-12   { width: 3rem; }
.w-14   { width: 3.5rem; }
.w-16   { width: 4rem; }
.w-20   { width: 5rem; }
.w-24   { width: 6rem; }
.w-40   { width: 10rem; }
.w-44   { width: 11rem; }
.w-48   { width: 12rem; }
.w-52   { width: 13rem; }
.w-56   { width: 14rem; }
.w-64   { width: 16rem; }
.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.333%; }
.w-2\/3 { width: 66.667%; }

.min-w-0   { min-width: 0; }
.min-w-40  { min-width: 10rem; }
.min-w-48  { min-width: 12rem; }
.min-w-max { min-width: max-content; }
.max-w-xs  { max-width: 20rem; }
.max-w-sm  { max-width: 24rem; }
.max-w-md  { max-width: 28rem; }
.max-w-lg  { max-width: 32rem; }
.max-w-xl  { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 58rem; }
.max-w-6xl { max-width: 60rem; }
.max-w-7xl { max-width: 64rem; }
.max-w-full{ max-width: 100%; }

/* ── 8. HEIGHTS ───────────────────────────────────────────── */
.h-px    { height: 1px; }
.h-1     { height: 0.25rem; }
.h-1\.5  { height: 0.375rem; }
.h-2     { height: 0.5rem; }
.h-3     { height: 0.75rem; }
.h-4     { height: 1rem; }
.h-5     { height: 1.25rem; }
.h-6     { height: 1.5rem; }
.h-7     { height: 1.75rem; }
.h-8     { height: 2rem; }
.h-10    { height: 2.5rem; }
.h-12    { height: 3rem; }
.h-14    { height: 3.5rem; }
.h-16    { height: 4rem; }
.h-20    { height: 5rem; }
.h-24    { height: 6rem; }
.h-32    { height: 8rem; }
.h-48    { height: 12rem; }
.h-64    { height: 16rem; }
.h-80    { height: 20rem; }
.h-96    { height: 24rem; }
.h-full  { height: 100%; }
.min-h-screen { min-height: 100vh; }
.min-h-96     { min-height: 24rem; }
.max-h-full   { max-height: 100%; }
.aspect-square { aspect-ratio: 1 / 1; }
.h-\[calc\(100vh-4rem\)\] { height: calc(100vh - 4rem); }

/* ── 9. SPACING - PADDING ─────────────────────────────────── */
.p-2  { padding: 0.5rem; }
.p-3  { padding: 0.75rem; }
.p-4  { padding: 1rem; }
.p-5  { padding: 1.25rem; }
.p-6  { padding: 1.5rem; }
.p-8  { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.p-12 { padding: 3rem; }
.p-16 { padding: 4rem; }

.px-1    { padding-left:0.25rem; padding-right:0.25rem; }
.px-1\.5 { padding-left:0.375rem; padding-right:0.375rem; }
.px-2    { padding-left:0.5rem; padding-right:0.5rem; }
.px-3    { padding-left:0.75rem; padding-right:0.75rem; }
.px-4    { padding-left:1rem; padding-right:1rem; }
.px-5    { padding-left:1.25rem; padding-right:1.25rem; }
.px-6    { padding-left:1.5rem; padding-right:1.5rem; }
.px-8    { padding-left:2rem; padding-right:2rem; }

.py-0\.5 { padding-top:0.125rem; padding-bottom:0.125rem; }
.py-1    { padding-top:0.25rem; padding-bottom:0.25rem; }
.py-1\.5 { padding-top:0.375rem; padding-bottom:0.375rem; }
.py-2    { padding-top:0.5rem; padding-bottom:0.5rem; }
.py-2\.5 { padding-top:0.625rem; padding-bottom:0.625rem; }
.py-3    { padding-top:0.75rem; padding-bottom:0.75rem; }
.py-4    { padding-top:1rem; padding-bottom:1rem; }
.py-6    { padding-top:1.5rem; padding-bottom:1.5rem; }
.py-8    { padding-top:2rem; padding-bottom:2rem; }
.py-10   { padding-top:2.5rem; padding-bottom:2.5rem; }
.py-12   { padding-top:3rem; padding-bottom:3rem; }
.py-16   { padding-top:4rem; padding-bottom:4rem; }
.py-20   { padding-top:5rem; padding-bottom:5rem; }

.pt-1 { padding-top:0.25rem; }
.pt-2 { padding-top:0.5rem; }
.pt-3 { padding-top:0.75rem; }
.pt-4 { padding-top:1rem; }
.pt-6 { padding-top:1.5rem; }
.pt-8 { padding-top:2rem; }
.pb-1 { padding-bottom:0.25rem; }
.pb-2 { padding-bottom:0.5rem; }
.pb-4 { padding-bottom:1rem; }
.pb-6 { padding-bottom:1.5rem; }
.pb-8 { padding-bottom:2rem; }
.pb-12{ padding-bottom:3rem; }
.pl-4 { padding-left:1rem; }
.pl-6 { padding-left:1.5rem; }
.pl-8 { padding-left:2rem; }
.pl-10{ padding-left:2.5rem; }
.pr-2 { padding-right:0.5rem; }

/* ── 10. SPACING - MARGIN ─────────────────────────────────── */
.mx-auto { margin-left:auto; margin-right:auto; }
.mx-3    { margin-left:0.75rem; margin-right:0.75rem; }
.my-4    { margin-top:1rem; margin-bottom:1rem; }

.mt-0   { margin-top:0; }
.mt-0\.5{ margin-top:0.125rem; }
.mt-1   { margin-top:0.25rem; }
.mt-1\.5{ margin-top:0.375rem; }
.mt-2   { margin-top:0.5rem; }
.mt-3   { margin-top:0.75rem; }
.mt-4   { margin-top:1rem; }
.mt-5   { margin-top:1.25rem; }
.mt-6   { margin-top:1.5rem; }
.mt-8   { margin-top:2rem; }
.mt-10  { margin-top:2.5rem; }
.mt-12  { margin-top:3rem; }
.mt-16  { margin-top:4rem; }

.mb-0   { margin-bottom:0; }
.mb-0\.5{ margin-bottom:0.125rem; }
.mb-1   { margin-bottom:0.25rem; }
.mb-1\.5{ margin-bottom:0.375rem; }
.mb-2   { margin-bottom:0.5rem; }
.mb-3   { margin-bottom:0.75rem; }
.mb-4   { margin-bottom:1rem; }
.mb-5   { margin-bottom:1.25rem; }
.mb-6   { margin-bottom:1.5rem; }
.mb-8   { margin-bottom:2rem; }
.mb-10  { margin-bottom:2.5rem; }
.mb-12  { margin-bottom:3rem; }

.ml-1    { margin-left:0.25rem; }
.ml-2    { margin-left:0.5rem; }
.ml-3    { margin-left:0.75rem; }
.ml-auto { margin-left:auto; }
.mr-1    { margin-right:0.25rem; }
.mr-2    { margin-right:0.5rem; }
.mr-3    { margin-right:0.75rem; }
.mr-4    { margin-right:1rem; }

/* ── 11. SPACE-Y (stacked children) ──────────────────────── */
.space-y-0\.5 > * + * { margin-top:0.125rem; }
.space-y-1    > * + * { margin-top:0.25rem; }
.space-y-2    > * + * { margin-top:0.5rem; }
.space-y-3    > * + * { margin-top:0.75rem; }
.space-y-4    > * + * { margin-top:1rem; }
.space-y-5    > * + * { margin-top:1.25rem; }
.space-y-6    > * + * { margin-top:1.5rem; }
.space-y-8    > * + * { margin-top:2rem; }

/* ── 12. TYPOGRAPHY ───────────────────────────────────────── */
.font-display { font-family:'Impact','Arial Black','Rajdhani',sans-serif; }
.font-body    { font-family:'Inter',system-ui,-apple-system,sans-serif; }
.font-mono    { font-family:'Courier New',monospace; }

.font-normal   { font-weight:400; }
.font-medium   { font-weight:500; }
.font-semibold { font-weight:600; }
.font-bold     { font-weight:700; }

.text-xs   { font-size:0.75rem;  line-height:1rem; }
.text-sm   { font-size:0.875rem; line-height:1.25rem; }
.text-base { font-size:1rem;     line-height:1.5rem; }
.text-lg   { font-size:1.125rem; line-height:1.75rem; }
.text-xl   { font-size:1.25rem;  line-height:1.75rem; }
.text-2xl  { font-size:1.5rem;   line-height:2rem; }
.text-3xl  { font-size:1.875rem; line-height:2.25rem; }
.text-4xl  { font-size:2.25rem;  line-height:2.5rem; }
.text-5xl  { font-size:3rem;     line-height:1; }
.text-6xl  { font-size:3.75rem;  line-height:1; }
.text-8xl  { font-size:6rem;     line-height:1; }

.tracking-tight   { letter-spacing:-0.05em; }
.tracking-normal  { letter-spacing:0; }
.tracking-wide    { letter-spacing:0.025em; }
.tracking-wider   { letter-spacing:0.05em; }
.tracking-widest  { letter-spacing:0.1em; }

.leading-none    { line-height:1; }
.leading-tight   { line-height:1.25; }
.leading-snug    { line-height:1.375; }
.leading-normal  { line-height:1.5; }
.leading-relaxed { line-height:1.625; }
.leading-loose   { line-height:2; }

.text-left   { text-align:left; }
.text-center { text-align:center; }
.text-right  { text-align:right; }

.uppercase   { text-transform:uppercase; }
.lowercase   { text-transform:lowercase; }
.capitalize  { text-transform:capitalize; }

.truncate    { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.whitespace-pre-wrap { white-space:pre-wrap; }
.whitespace-nowrap   { white-space:nowrap; }
.line-through  { text-decoration:line-through; }
.underline     { text-decoration:underline; }
.italic        { font-style:italic; }
.uppercase     { text-transform:uppercase; }

.line-clamp-2 {
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

.list-disc   { list-style-type:disc; }
.list-none    { list-style-type:none; }
.list-disc    { list-style-type:disc; }
.list-decimal { list-style-type:decimal; }
.list-inside  { list-style-position:inside; }
.list-outside { list-style-position:outside; }

/* ── 13. TEXT COLORS ──────────────────────────────────────── */
/* Note: text-white is overridden in base reset above (→ near-black on white bg) */
.text-black   { color:#000000; }
.text-gray-100{ color:#1A1A1A; }
.text-gray-200{ color:#2C2C2C; }
.text-gray-300{ color:#444444; }
.text-gray-400{ color:#666666; }
.text-gray-500{ color:#888888; }
.text-gray-600{ color:#AAAAAA; }

/* Gold text - dark amber so it reads clearly on white background */
.text-kr-gold   { color:#B8860B; }
.text-kr-red    { color:var(--kr-red); }
.text-kr-crystal{ color:#444444; }
.text-kr-border { color:var(--kr-border); }

.text-kr-red\/30 { color:rgba(180,0,0,0.3); }

/* Semantic colors - muted on light bg */
.text-emerald-300 { color:#1a7a3a; }
.text-emerald-400 { color:#1a7a3a; }
.text-red-300     { color:#CC0000; }
.text-red-400     { color:#CC0000; }
.text-red-500     { color:#CC0000; }
.text-amber-200   { color:#555500; }
.text-amber-300   { color:#555500; }
.text-amber-400   { color:#555500; }
.text-blue-300    { color:#003399; }
.text-blue-400    { color:#003399; }
.text-purple-300  { color:#550077; }
.text-purple-400  { color:#550077; }
.text-yellow-300  { color:#555500; }
.text-yellow-400  { color:#555500; }
.text-orange-400  { color:#883300; }
.text-teal-400    { color:#005555; }

/* ── 14. BACKGROUNDS ──────────────────────────────────────── */
.bg-kr-black { background-color:#000000; }
.bg-kr-dark  { background-color:#F2F2F2; }
.bg-kr-card  { background-color:#FFFFFF; }
.bg-kr-border{ background-color:#DDDDDD; }
.bg-kr-gold  { background-color:#D4AF37; }   /* real amber gold */
.bg-kr-red   { background-color:var(--kr-red); }
.bg-transparent { background-color:transparent; }
.bg-black    { background-color:#000; }
.bg-gray-800 { background-color:#EEEEEE; }
.bg-gray-900 { background-color:#F5F5F5; }
.bg-emerald-400  { background-color:#1a7a3a; }

/* Color palette bgs - neutralised for light theme */
.bg-emerald-900  { background-color:#e8f5ee; }
.bg-red-900      { background-color:#fdf0f0; }
.bg-red-950      { background-color:#fff0f0; }
.bg-amber-900    { background-color:#fdf8e8; }
.bg-amber-950    { background-color:#fffcf0; }
.bg-blue-900     { background-color:#eef3ff; }
.bg-blue-950     { background-color:#f0f4ff; }
.bg-purple-900   { background-color:#f8f0ff; }
.bg-yellow-900   { background-color:#fdfcee; }
.bg-green-900    { background-color:#eef8f0; }
.bg-orange-900   { background-color:#fdf4ee; }

/* Opacity/alpha backgrounds */
.bg-black\/90        { background-color:rgba(0,0,0,0.9); }
.bg-kr-gold\/5       { background-color:rgba(212,175,55,0.05); }
.bg-kr-gold\/10      { background-color:rgba(212,175,55,0.10); }
.bg-kr-gold\/20      { background-color:rgba(212,175,55,0.20); }
.bg-kr-border\/20    { background-color:rgba(0,0,0,0.05); }
.bg-kr-border\/30    { background-color:rgba(0,0,0,0.08); }
.bg-emerald-900\/20  { background-color:rgba(26,122,58,0.08); }
.bg-amber-900\/20    { background-color:rgba(0,0,0,0.04); }
.bg-amber-900\/30    { background-color:rgba(0,0,0,0.06); }
.bg-blue-900\/30     { background-color:rgba(0,51,153,0.07); }
.bg-red-900\/30      { background-color:rgba(204,0,0,0.07); }
.bg-orange-900\/30   { background-color:rgba(136,51,0,0.07); }
.bg-yellow-900\/30   { background-color:rgba(85,85,0,0.07); }
.bg-yellow-900\/50   { background-color:rgba(85,85,0,0.1); }
.bg-purple-900\/20   { background-color:rgba(85,0,119,0.06); }

/* Gradient helpers */
.bg-gradient-to-br { background-image:linear-gradient(to bottom right, var(--tw-gradient-stops,#111111,#080808)); }
.bg-gradient-to-r  { background-image:linear-gradient(to right, var(--tw-gradient-stops,#111111,#080808)); }
.from-kr-dark   { --tw-gradient-stops:var(--kr-dark),transparent; }
.from-kr-border { --tw-gradient-stops:var(--kr-border),transparent; }
.to-black       { --tw-gradient-stops:var(--tw-gradient-from,transparent),#000; }
.to-kr-dark     { --tw-gradient-stops:var(--tw-gradient-from,transparent),var(--kr-dark); }

/* ── 15. BORDERS ──────────────────────────────────────────── */
.border   { border:1px solid var(--kr-border); }
.border-0 { border:0; }
.border-2 { border:2px solid var(--kr-border); }
.border-t { border-top:1px solid var(--kr-border); }
.border-b { border-bottom:1px solid var(--kr-border); }
.border-l { border-left:1px solid var(--kr-border); }
.border-r { border-right:1px solid var(--kr-border); }
.border-y { border-top:1px solid var(--kr-border); border-bottom:1px solid var(--kr-border); }
.border-l-4 { border-left:4px solid var(--kr-border); }

.border-kr-border { border-color:var(--kr-border); }
.border-kr-gold   { border-color:#D4AF37; }   /* real gold border */
.border-kr-red    { border-color:var(--kr-red); }

.border-solid  { border-style:solid; }
.border-dashed { border-style:dashed; }
.border-dotted { border-style:dotted; }

.border-kr-gold\/20 { border-color:rgba(0,0,0,0.15); }
.border-kr-gold\/30 { border-color:rgba(0,0,0,0.2); }

/* Semantic border colors - adapted for light theme */
.border-emerald-700  { border-color:#1a7a3a; }
.border-emerald-800  { border-color:#155f2e; }
.border-emerald-800\/40 { border-color:rgba(26,122,58,0.4); }
.border-red-700      { border-color:#CC0000; }
.border-red-800      { border-color:#AA0000; }
.border-red-900      { border-color:#880000; }
.border-amber-600    { border-color:#888800; }
.border-amber-700    { border-color:#666600; }
.border-blue-700     { border-color:#003399; }
.border-blue-800     { border-color:#002266; }
.border-blue-900     { border-color:#001144; }
.border-purple-600   { border-color:#550077; }
.border-purple-700   { border-color:#440066; }
.border-purple-800   { border-color:#330055; }
.border-purple-900   { border-color:#220044; }
.border-yellow-700   { border-color:#666600; }
.border-yellow-800   { border-color:#555500; }
.border-gray-600     { border-color:#AAAAAA; }
.border-gray-700     { border-color:#CCCCCC; }
.border-gray-800     { border-color:#DDDDDD; }
.border-teal-800     { border-color:#005555; }

/* Divide */
.divide-y        > * + * { border-top:1px solid; }
.divide-kr-border> * + * { border-color:var(--kr-border); }
.divide-y.divide-kr-border > * + * { border-top:1px solid var(--kr-border); }

/* Border radius */
.rounded     { border-radius:0.25rem; }
.rounded-sm  { border-radius:0.125rem; }
.rounded-md  { border-radius:0.375rem; }
.rounded-lg  { border-radius:0.5rem; }
.rounded-xl  { border-radius:0.75rem; }
.rounded-2xl { border-radius:1rem; }
.rounded-full{ border-radius:9999px; }
.rounded-none{ border-radius:0; }

/* ── 16. SHADOWS & OVERFLOW ───────────────────────────────── */
.shadow    { box-shadow:0 1px 3px rgba(0,0,0,.3); }
.shadow-md { box-shadow:0 4px 6px rgba(0,0,0,.4); }
.shadow-lg { box-shadow:0 8px 15px rgba(0,0,0,.5); }
.shadow-xl { box-shadow:0 20px 25px rgba(0,0,0,.6); }

.overflow-hidden   { overflow:hidden; }
.overflow-auto     { overflow:auto; }
.overflow-x-auto   { overflow-x:auto; }
.overflow-x-hidden { overflow-x:hidden; }
.overflow-y-auto   { overflow-y:auto; }

/* ── 17. POSITION ─────────────────────────────────────────── */
.relative { position:relative; }
.absolute { position:absolute; }
.fixed    { position:fixed; }
.sticky   { position:sticky; }
.inset-0  { top:0; right:0; bottom:0; left:0; }

.top-0    { top:0; }
.top-1    { top:0.25rem; }
.top-2    { top:0.5rem; }
.top-4    { top:1rem; }
.top-16   { top:4rem; }
.top-20   { top:5rem; }
.top-full { top:100%; }
.top-1\/2 { top:50%; }
.right-0  { right:0; }
.right-1  { right:0.25rem; }
.right-2  { right:0.5rem; }
.right-4  { right:1rem; }
.left-0   { left:0; }
.bottom-0 { bottom:0; }

.z-10 { z-index:10; }
.z-20 { z-index:20; }
.z-30 { z-index:30; }
.z-40 { z-index:40; }
.z-50 { z-index:50; }

.-translate-y-1\/2 { transform:translateY(-50%); }

/* ── 18. OPACITY, CURSOR, TRANSITION ──────────────────────── */
.opacity-0  { opacity:0; }
.opacity-50 { opacity:0.5; }
.opacity-60 { opacity:0.6; }
.opacity-80 { opacity:0.8; }
.opacity-100{ opacity:1; }

.cursor-pointer     { cursor:pointer; }
.cursor-not-allowed { cursor:not-allowed; }
.cursor-default     { cursor:default; }

.transition-all      { transition:all 0.15s ease; }
.transition-colors   { transition:color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
.transition-opacity  { transition:opacity 0.15s ease; }
.transition-transform{ transition:transform 0.15s ease; }

/* Resize */
.resize-y    { resize:vertical; }
.resize-none { resize:none; }

/* Object fit */
.object-cover   { object-fit:cover; }
.object-contain { object-fit:contain; }

/* Screen reader only */
.sr-only {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border-width:0;
}

/* Pointer events */
.pointer-events-none { pointer-events:none; }

/* ── 19. HOVER UTILITIES ──────────────────────────────────── */
/* text-white on hover → stays dark on light bg, white on dark bg context */
.hover\:text-white:hover         { color:#0A0A0A; }
.hover\:text-black:hover         { color:#000000; }
/* Gold hover text - real amber so it's visible on white */
.hover\:text-kr-gold:hover       { color:#B8860B; }
.hover\:text-kr-gold-light:hover { color:#D4AF37; }
.hover\:text-gray-300:hover      { color:#444444; }
.hover\:text-emerald-400:hover   { color:#1a7a3a; }
.hover\:underline:hover          { text-decoration:underline; }
.hover\:opacity-80:hover         { opacity:0.8; }
.hover\:opacity-100:hover        { opacity:1; }
.hover\:bg-kr-border:hover       { background-color:#EEEEEE; }
/* Gold hover bg - subtle warm tint instead of solid black */
.hover\:bg-kr-gold:hover         { background-color:#D4AF37; }
.hover\:bg-red-700:hover         { background-color:#AA0000; }
.hover\:bg-purple-900:hover      { background-color:#EEEEEE; }
.hover\:bg-purple-900\/30:hover  { background-color:rgba(0,0,0,0.05); }
.hover\:bg-emerald-900\/30:hover { background-color:rgba(26,122,58,0.08); }
.hover\:bg-kr-border\/20:hover   { background-color:rgba(0,0,0,0.04); }
.hover\:bg-kr-border\/30:hover   { background-color:rgba(0,0,0,0.06); }
/* Gold border on hover - real gold not black */
.hover\:border-kr-gold:hover     { border-color:#D4AF37; }
.hover\:border-gray-400:hover    { border-color:#888888; }
.hover\:border-purple-700:hover  { border-color:#7C3AED; }
.hover\:file\:bg-kr-gold-light:hover::file-selector-button {
  background-color:#F5D060 !important;
  color:#1a1000 !important;
}

/* Group hover - white text becomes dark on light bg, gold accent stays gold */
.group:hover .group-hover\:text-kr-gold  { color:#B8860B; }
.group:hover .group-hover\:text-white    { color:#0A0A0A; }
.group:hover .group-hover\:text-purple-400 { color:#7C3AED; }
.group:hover .group-hover\:opacity-90    { opacity:0.9; }

/* Focus */
.focus\:outline-none:focus  { outline:none; }
.focus\:border-kr-gold:focus{ border-color:#D4AF37; }

/* Has checked (native CSS) */
.has-\[\:checked\]\:bg-kr-gold\/10:has(:checked) { background-color:rgba(212,175,55,0.1); }
.has-\[\:checked\]\:border-kr-gold:has(:checked) { border-color:#D4AF37; }

/* ── 20. FILE INPUT BUTTON ─────────────────────────────────── */
.file\:mr-3::file-selector-button  { margin-right:0.75rem; }
.file\:mr-4::file-selector-button  { margin-right:1rem; }
.file\:py-1\.5::file-selector-button { padding-top:0.375rem; padding-bottom:0.375rem; }
.file\:py-2::file-selector-button  { padding-top:0.5rem; padding-bottom:0.5rem; }
.file\:px-3::file-selector-button  { padding-left:0.75rem; padding-right:0.75rem; }
.file\:px-4::file-selector-button  { padding-left:1rem; padding-right:1rem; }
.file\:rounded::file-selector-button { border-radius:0.25rem; }
.file\:border-0::file-selector-button { border:0; }
/* FIXED: was var(--kr-gold)=#000000 on light theme → black on black = invisible.
   Now explicitly #D4AF37 (real gold) so text is readable. */
.file\:bg-kr-gold::file-selector-button {
  background-color: #D4AF37 !important;
  color: #3a2a00 !important;
}
.file\:text-black::file-selector-button { color:#3a2a00 !important; }
.file\:text-xs::file-selector-button    { font-size:0.75rem; }
.file\:font-semibold::file-selector-button { font-weight:700; cursor:pointer; }
.hover\:file\:bg-kr-gold-light:hover::file-selector-button {
  background-color: #F5D060 !important;
  color: #3a2a00 !important;
}

/* ── 21. PLACEHOLDER ──────────────────────────────────────── */
.placeholder-gray-500::placeholder { color:#555555; }

/* ── 22. ANIMATE (pulse for skeleton) ────────────────────── */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.animate-pulse { animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite; }

/* ── 23. NAV COMPONENTS ───────────────────────────────────── */
.nav-link {
  display:inline-block;
  padding:0.375rem 0.4rem;
  font-family:'Impact','Arial Black','Rajdhani',sans-serif;
  font-size:0.75rem;
  font-weight:900;
  letter-spacing:0.03em;
  color:#555555;
  border-radius:0;
  transition:color 0.15s;
  white-space:nowrap;
}
.nav-link:hover { color:#000000; }

.mobile-nav-link {
  display:block;
  padding:0.625rem 0.75rem;
  font-size:0.875rem;
  font-weight:500;
  color:#444444;
  border-bottom:1px solid #EEEEEE;
  transition:color 0.15s, background-color 0.15s;
}
.mobile-nav-link:hover { color:#000000; background-color:#F5F5F5; }

.dropdown-item {
  display:block;
  padding:0.5rem 1rem;
  font-size:0.875rem;
  color:#444444;
  transition:color 0.15s, background-color 0.15s;
}
.dropdown-item:hover { background-color:#F5F5F5; color:#000000; }

/* ── Desktop dropdown overflow cap ───────────────────────── */
#kr-shop-menu,
#kr-comm-menu,
#kr-games-menu,
#kr-support-menu {
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── Mobile nav backdrop ─────────────────────────────────── */
#kr-mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  top: 64px;
  background: rgba(0,0,0,0.45);
  z-index: 198;
}
#kr-mobile-backdrop.open { display: block; }

/* ── 24. BUTTONS ──────────────────────────────────────────── */

/* Primary action - real amber gold, dark text so it's always readable */
.btn-gold {
  display:inline-block;
  background-color:#D4AF37 !important;
  color:#1a1000 !important;
  font-weight:700;
  font-family:'Rajdhani','Arial Black',sans-serif;
  letter-spacing:0.06em;
  font-size:0.9rem;
  padding:0.5rem 1.25rem;
  border-radius:4px;
  transition:background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
  cursor:pointer;
  border:2px solid #B8960C !important;
  text-align:center;
  box-shadow:0 1px 4px rgba(184,150,12,0.25);
}
.btn-gold:hover {
  background-color:#F5D060 !important;
  border-color:#D4AF37 !important;
  box-shadow:0 2px 8px rgba(184,150,12,0.35);
  color:#1a1000 !important;
}

/* Danger / destructive */
.btn-red {
  display:inline-block;
  background-color:var(--kr-red) !important;
  color:#FFFFFF !important;
  font-weight:700;
  padding:0.5rem 1rem;
  border-radius:4px;
  transition:background-color 0.15s;
  cursor:pointer;
  border:2px solid var(--kr-red) !important;
  text-align:center;
}
.btn-red:hover { background-color:#AA0000 !important; border-color:#AA0000 !important; color:#FFFFFF !important; }

/* Secondary / outlined - black border, black text, subtle hover */
.btn-outline {
  display:inline-block;
  border:2px solid #333333 !important;
  color:#1a1a1a !important;
  padding:0.5rem 1rem;
  border-radius:4px;
  transition:background-color 0.15s, border-color 0.15s, color 0.15s;
  cursor:pointer;
  background:#FFFFFF !important;
  text-align:center;
  font-weight:600;
}
.btn-outline:hover {
  background-color:#1a1a1a !important;
  border-color:#1a1a1a !important;
  color:#FFFFFF !important;
}

.btn-sm { padding:0.25rem 0.75rem !important; font-size:0.75rem !important; }

/* Touch devices get a real tap target regardless of the compact visual size —
   coarse-pointer targets touchscreens specifically, leaving mouse users' dense
   desktop layout untouched. */
@media (pointer:coarse) {
  .btn-sm {
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .file\:py-1\.5::file-selector-button, .file\:py-2::file-selector-button {
    min-height:40px;
  }
  /* Hover-revealed controls (message inbox pin/mute/archive/delete, select
     checkbox) are invisible on touch devices since there's no real :hover —
     always show them here instead of gating on group-hover. */
  .conv-touch-visible {
    opacity: 1 !important;
  }
}

/* ── 25. CARDS ────────────────────────────────────────────── */
.card {
  background-color:#FFFFFF;
  border:1px solid #DDDDDD;
  border-radius:0;
  overflow:hidden;
}
.card-hover {
  background-color:#FFFFFF;
  border:1px solid #DDDDDD;
  border-radius:0;
  overflow:hidden;
  cursor:pointer;
  transition:border-color 0.15s, box-shadow 0.15s;
}
.card-hover:hover { border-color:#D4AF37; box-shadow:0 2px 10px rgba(212,175,55,0.15); }

/* ── 26. FLASH MESSAGES ───────────────────────────────────── */
.flash-success { background-color:#f0fdf4; border:1px solid #1a7a3a; color:#155f2e; }
.flash-error   { background-color:#fff0f0; border:1px solid #CC0000; color:#880000; }
.flash-warning { background-color:#fdfcee; border:1px solid #888800; color:#555500; }
.flash-info    { background-color:#f0f4ff; border:1px solid #003399; color:#001155; }

/* ── 27. FORMS ────────────────────────────────────────────── */
.form-label {
  display:block;
  font-size:0.875rem;
  font-weight:600;
  color:#0A0A0A;
  margin-bottom:0.25rem;
}
.form-input {
  width:100%;
  background-color:#FFFFFF;
  border:1px solid #AAAAAA;
  border-radius:0;
  padding:0.5rem 0.75rem;
  color:#0A0A0A;
  outline:none;
  transition:border-color 0.15s;
}
.form-input:focus    { border-color:#D4AF37; box-shadow:0 0 0 2px rgba(212,175,55,0.15); }
.form-input::placeholder { color:#AAAAAA; }

.form-select {
  width:100%;
  background-color:#FFFFFF;
  border:1px solid #AAAAAA;
  border-radius:0;
  padding:0.5rem 0.75rem;
  color:#0A0A0A;
  outline:none;
  transition:border-color 0.15s;
  appearance:none;
}
.form-select:focus { border-color:#D4AF37; box-shadow:0 0 0 2px rgba(212,175,55,0.15); }

.form-textarea {
  width:100%;
  background-color:#FFFFFF;
  border:1px solid #AAAAAA;
  border-radius:0;
  padding:0.5rem 0.75rem;
  color:#0A0A0A;
  outline:none;
  resize:vertical;
  min-height:100px;
  transition:border-color 0.15s;
}
.form-textarea:focus { border-color:#D4AF37; box-shadow:0 0 0 2px rgba(212,175,55,0.15); }
.form-textarea::placeholder { color:#AAAAAA; }

/* ── 28. BADGES ───────────────────────────────────────────── */
.rank-badge {
  display:inline-block;
  max-width:100%;
  padding:2px 9px;
  border-radius:3px;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.06em;
  font-family:'Rajdhani','Inter',system-ui,sans-serif;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:middle;
  /* Background uses the rank color at ~12% opacity so text pops on white */
  /* Color and border are set via inline style in templates */
}
/* Gold verified checkmark badge - like Twitter verified but gold */
.verified-tick {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:17px;
  height:17px;
  border-radius:50%;
  background:linear-gradient(135deg,#D4AF37 0%,#F5D060 50%,#B8960C 100%);
  color:#FFFFFF;
  font-size:9px;
  font-weight:900;
  line-height:1;
  vertical-align:middle;
  margin-left:3px;
  box-shadow:0 1px 3px rgba(180,140,0,0.5);
  flex-shrink:0;
}
/* Larger variant for profile pages */
.verified-tick-lg {
  width:22px;
  height:22px;
  font-size:12px;
  margin-left:4px;
}

/* ── MODERATOR BADGE - blue checkmark ─────────────────────── */
.mod-tick {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:17px; height:17px;
  border-radius:50%;
  background:linear-gradient(135deg,#1DA1F2 0%,#0d8fd9 100%);
  color:#FFFFFF;
  font-size:9px; font-weight:900; line-height:1;
  vertical-align:middle; margin-left:3px;
  box-shadow:0 1px 3px rgba(29,161,242,0.45);
  flex-shrink:0;
}
.mod-tick-lg { width:22px; height:22px; font-size:12px; margin-left:4px; }

/* ── ADMIN SKULL BADGE ──────────────────────────────────────── */
/* Wrapper: stacks the skull SVG above the ADMIN label          */
.admin-badge {
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  margin-left:4px;
  vertical-align:middle;
  flex-shrink:0;
}
.admin-badge svg {
  display:block;
  filter:drop-shadow(0 1px 3px rgba(212,175,55,0.6));
}
.admin-badge-label {
  font-size:6.5px;
  font-weight:900;
  letter-spacing:0.12em;
  color:#CC0000;
  line-height:1;
  font-family:inherit;
}

/* Larger variant for profile headers */
.admin-badge-lg svg   { width:30px; height:36px; }
.admin-badge-lg .admin-badge-label { font-size:8px; letter-spacing:0.14em; }

/* Staff badge - same skull but no ADMIN label (regular staff) */
.staff-badge { display:inline-flex; align-items:center; margin-left:4px; vertical-align:middle; flex-shrink:0; }
.staff-badge svg { display:block; filter:drop-shadow(0 1px 3px rgba(212,175,55,0.5)); }

/* ── Forum Gold (FG) wallet / balance display ───────────── */
.fg-badge {
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:linear-gradient(135deg,#D4AF37,#F5D060);
  color:#5a3e00;
  font-weight:700;
  font-size:0.75rem;
  padding:2px 8px;
  border-radius:3px;
  white-space:nowrap;
}
.fg-badge-lg {
  font-size:1rem;
  padding:4px 12px;
}
.fg-icon::before { content:'⬡'; font-size:0.85em; }

/* ── Inline FG balance - shown under usernames in forum/hub ─── */
/* Only rendered when balance > 0. Zero-balance users see nothing. */
.fg-inline {
  display:inline-flex;
  align-items:center;
  gap:2px;
  font-size:10px;
  font-weight:700;
  color:#8B6800;
  background:#FFF9E6;
  border:1px solid #F5D060;
  border-radius:2px;
  padding:1px 5px;
  white-space:nowrap;
  letter-spacing:0.02em;
}
.fg-inline-hex { font-size:9px; }

/* ── Rank badge - strong color on white bg ─────────────────── */
/* We override the old rgba() background in templates via the rank_color */
.rank-badge-strong {
  display:inline-block;
  padding:2px 9px;
  border-radius:3px;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.06em;
  font-family:'Rajdhani','Inter',system-ui,sans-serif;
  white-space:nowrap;
}

/* Gold coin animation for wallet page */
@keyframes fg-coin-spin {
  0%   { transform:rotateY(0deg); }
  50%  { transform:rotateY(90deg); }
  100% { transform:rotateY(0deg); }
}
.fg-coin-spin { animation:fg-coin-spin 2s ease-in-out infinite; }

/* Listing type badges - clean black & white */
.badge-sell      { display:inline-block; background:#000000; color:#FFFFFF; font-size:0.7rem; padding:0.1rem 0.5rem; font-weight:700; letter-spacing:0.06em; }
.badge-trade     { display:inline-block; background:#FFFFFF; color:#000000; font-size:0.7rem; padding:0.1rem 0.5rem; font-weight:700; letter-spacing:0.06em; border:1px solid #000000; }
.badge-buy       { display:inline-block; background:#FFFFFF; color:#000000; font-size:0.7rem; padding:0.1rem 0.5rem; font-weight:700; letter-spacing:0.06em; border:1px solid #000000; }
.badge-sold      { display:inline-block; background:#EEEEEE; color:#888888; font-size:0.7rem; padding:0.1rem 0.5rem; font-weight:700; letter-spacing:0.06em; border:1px solid #CCCCCC; }
.badge-exclusive { display:inline-block; background:#000000; color:#FFFFFF; font-size:0.7rem; padding:0.1rem 0.5rem; font-weight:700; letter-spacing:0.06em; }

/* Forum post types - clean B&W */
.post-type-IDENTIFICATION { display:inline-block; background:#EEEEEE; color:#333333; font-size:0.7rem; padding:0.1rem 0.5rem; font-weight:700; letter-spacing:0.06em; border:1px solid #CCCCCC; }
.post-type-DISCUSSION     { display:inline-block; background:#EEEEEE; color:#666666; font-size:0.7rem; padding:0.1rem 0.5rem; font-weight:700; letter-spacing:0.06em; border:1px solid #CCCCCC; }
.post-type-TIP            { display:inline-block; background:#000000; color:#FFFFFF; font-size:0.7rem; padding:0.1rem 0.5rem; font-weight:700; letter-spacing:0.06em; }
.post-type-QUESTION       { display:inline-block; background:#EEEEEE; color:#666666; font-size:0.7rem; padding:0.1rem 0.5rem; font-weight:700; letter-spacing:0.06em; border:1px solid #CCCCCC; }

/* Status badges - clean B&W */
.status-ACTIVE    { display:inline-block; background:#000000; color:#FFFFFF; font-size:0.7rem; padding:0.1rem 0.5rem; font-weight:700; letter-spacing:0.06em; }
.status-PAUSED    { display:inline-block; background:#EEEEEE; color:#666666; font-size:0.7rem; padding:0.1rem 0.5rem; font-weight:700; letter-spacing:0.06em; border:1px solid #CCCCCC; }
.status-SOLD      { display:inline-block; background:#EEEEEE; color:#888888; font-size:0.7rem; padding:0.1rem 0.5rem; font-weight:700; letter-spacing:0.06em; border:1px solid #CCCCCC; }
.status-FLAGGED   { display:inline-block; background:#fff0f0; color:#CC0000; font-size:0.7rem; padding:0.1rem 0.5rem; font-weight:700; letter-spacing:0.06em; border:1px solid #CC0000; }
.status-PENDING   { display:inline-block; background:#EEEEEE; color:#666666; font-size:0.7rem; padding:0.1rem 0.5rem; font-weight:700; letter-spacing:0.06em; border:1px solid #CCCCCC; }
.status-COMPLETED { display:inline-block; background:#000000; color:#FFFFFF; font-size:0.7rem; padding:0.1rem 0.5rem; font-weight:700; letter-spacing:0.06em; }
.status-OPEN      { display:inline-block; background:#FFFFFF; color:#000000; font-size:0.7rem; padding:0.1rem 0.5rem; font-weight:700; letter-spacing:0.06em; border:1px solid #000000; }

/* Urgency badges - clean B&W */
.urgency-STANDARD { display:inline-block; background:#EEEEEE; color:#666666; font-size:0.7rem; padding:0.1rem 0.5rem; font-weight:700; letter-spacing:0.06em; border:1px solid #CCCCCC; }
.urgency-PRIORITY { display:inline-block; background:#000000; color:#FFFFFF; font-size:0.7rem; padding:0.1rem 0.5rem; font-weight:700; letter-spacing:0.06em; }
.urgency-RUSH     { display:inline-block; background:#CC0000; color:#FFFFFF; font-size:0.7rem; padding:0.1rem 0.5rem; font-weight:700; letter-spacing:0.06em; }

/* ── 29. LISTING IMAGES ───────────────────────────────────── */
/* ── Image containers - always fill their box, never distort ── */
.listing-img    { width:100%; height:12rem; object-fit:cover; background-color:#EEEEEE; display:block; }
.listing-img-sm { width:100%; height:8rem;  object-fit:cover; background-color:#EEEEEE; display:block; }

/* Marketplace thumbnail in list row - fixed 96×96 */
.mp-thumb {
  width:6rem; height:6rem; flex-shrink:0;
  border-radius:0.375rem; overflow:hidden;
  background:#EEEEEE;
}
.mp-thumb img {
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* Marketplace detail - main hero image, responsive height */
.mp-hero-img {
  width:100%; aspect-ratio:4/3;
  object-fit:cover; display:block;
  background:#EEEEEE;
  max-height:28rem; /* never taller than 448px */
}

/* Gallery thumbnails strip */
.mp-gallery-thumb {
  width:5rem; height:5rem; flex-shrink:0;
  border-radius:0.375rem; overflow:hidden; cursor:pointer;
}
.mp-gallery-thumb img {
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* Profile listings - compact row image */
.profile-listing-thumb {
  width:3.5rem; height:3.5rem; flex-shrink:0;
  border-radius:0.375rem; overflow:hidden;
  background:#EEEEEE;
}
.profile-listing-thumb img {
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* Store card image */
.store-card-img {
  width:100%; aspect-ratio:1/1;
  object-fit:cover; display:block;
  background:#EEEEEE;
}
.price-tag      { font-family:'Impact','Arial Black',sans-serif; font-size:1.125rem; font-weight:700; color:#000000; }
.price-original { font-size:0.875rem; color:#AAAAAA; text-decoration:line-through; }

/* ── 30. SECTION HEADINGS ─────────────────────────────────── */
.section-title    { font-family:'Impact','Arial Black','Rajdhani',sans-serif; font-size:1.5rem; font-weight:900; letter-spacing:0.05em; text-transform:uppercase; color:#000000; }
.section-subtitle { color:#666666; font-size:0.875rem; margin-top:0.25rem; }

/* ── 31. FOOTER (dark - kr-footer class applied in template) ─ */
.footer-heading { font-family:'Impact','Arial Black',sans-serif; font-weight:900; color:#FFFFFF; margin-bottom:0.75rem; letter-spacing:0.08em; font-size:0.8rem; text-transform:uppercase; }
.footer-link    { display:block; color:#888888; font-size:0.875rem; margin-bottom:0.375rem; transition:color 0.15s; }
.footer-link:hover { color:#FFFFFF; }

/* ── 32. ADMIN ────────────────────────────────────────────── */
.admin-nav-link {
  display:flex;
  align-items:center;
  gap:0.75rem;
  padding:0.625rem 1rem;
  font-size:0.875rem;
  color:#444444;
  border-radius:0;
  transition:background-color 0.15s, color 0.15s;
}
.admin-nav-link:hover  { background-color:#F5F5F5; color:#000000; }
/* Active admin sidebar item - gold left-bar accent with clear white text */
.admin-nav-link.active {
  background-color:#1a1a1a;
  color:#FFFFFF !important;
  font-weight:700;
  border-left:3px solid #D4AF37;
  padding-left:calc(1rem - 3px);
}

.stat-card {
  background-color:var(--kr-card);
  border:1px solid var(--kr-border);
  border-radius:0.5rem;
  padding:1.25rem;
}

/* ── 33. HERO ─────────────────────────────────────────────── */
.hero-section {
  background:#FFFFFF;
  border-bottom:2px solid #000000;
  padding-top:5rem;
  padding-bottom:5rem;
}
.hero-title {
  font-family:'Impact','Arial Black','Rajdhani',sans-serif;
  font-weight:900;
  font-size:clamp(2.5rem,6vw,5rem);
  line-height:1.0;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:#000000;
}
.gold-gradient {
  color:#000000;
  font-style:italic;
}

/* ── 34. IMAGE GALLERY ────────────────────────────────────── */
.img-gallery {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(120px,1fr));
  gap:8px;
}
.img-gallery img { width:100%; height:100px; object-fit:cover; border-radius:6px; cursor:pointer; }

/* ── 35. PAGINATION ───────────────────────────────────────── */
.page-link {
  display:inline-block;
  padding:0.375rem 0.75rem;
  font-size:0.875rem;
  border:1px solid #CCCCCC;
  color:#666666;
  border-radius:0;
  transition:border-color 0.15s, color 0.15s, background-color 0.15s;
}
.page-link:hover { border-color:#333333; color:#000000; background:#F5F5F5; }
.page-link.active { background-color:#1a1a1a; color:#FFFFFF !important; border-color:#1a1a1a; font-weight:700; }

/* ── 36. BUMP TIMER ───────────────────────────────────────── */
.bump-timer { font-size:0.75rem; color:#555555; font-family:'Courier New',monospace; }

/* ── 36b. HUB UTILITY ────────────────────────────────────── */
/* Post title link: dark text that highlights black on hover   */
.hub-post-link {
  color:#0A0A0A;
  font-weight:600;
  display:block;
  text-decoration:none;
  transition:color 0.15s ease;
  margin-bottom:0.25rem;
}
.hub-post-link:hover { color:#000000; text-decoration:underline; }

/* Chip / pill filter tabs
   Active  = dark background, WHITE text (high contrast, clearly selected)
   Inactive = white background, grey text                                 */
.chip-active {
  background:#1a1a1a !important;
  color:#FFFFFF !important;           /* white text - user-requested */
  border:1px solid #000000 !important;
  font-weight:700 !important;
  box-shadow:0 1px 4px rgba(0,0,0,0.18);
}
/* Small gold accent indicator on active chip */
.chip-active::after {
  content:'';
  display:inline-block;
  width:5px; height:5px;
  border-radius:50%;
  background:#D4AF37;
  margin-left:5px;
  vertical-align:middle;
}
.chip-inactive {
  background:#F5F5F5;
  color:#555555 !important;           /* grey text - user-requested */
  border:1px solid #DDDDDD;
  font-weight:500;
}
.chip-inactive:hover {
  border-color:#D4AF37;
  color:#333333 !important;
  background:#FFFDF0;
}

/* ── 37. HUB POST TYPE BADGES - pure B&W ─────────────────── */
.hub-type-FIND      { display:inline-block; background:#000000; color:#FFFFFF; padding:2px 8px; font-weight:700; font-size:0.7rem; letter-spacing:0.08em; }
.hub-type-TRADE     { display:inline-block; background:#FFFFFF; color:#000000; padding:2px 8px; font-weight:700; font-size:0.7rem; letter-spacing:0.08em; border:1px solid #000000; }
.hub-type-SHOWCASE  { display:inline-block; background:#000000; color:#FFFFFF; padding:2px 8px; font-weight:700; font-size:0.7rem; letter-spacing:0.08em; }
.hub-type-WANT      { display:inline-block; background:#EEEEEE; color:#666666; padding:2px 8px; font-weight:700; font-size:0.7rem; letter-spacing:0.08em; border:1px solid #CCCCCC; }
.hub-type-QUESTION  { display:inline-block; background:#EEEEEE; color:#666666; padding:2px 8px; font-weight:700; font-size:0.7rem; letter-spacing:0.08em; border:1px solid #CCCCCC; }

/* ── 38. CERTIFICATE ──────────────────────────────────────── */
.certificate-card {
  background:#FFFFFF;
  border:2px solid #000000;
  border-radius:0;
  padding:32px;
  position:relative;
}
.certificate-card::before {
  content:'KILLERROCKS CERTIFIED';
  position:absolute;
  top:12px; right:16px;
  font-size:9px; letter-spacing:3px;
  color:#000000; opacity:0.5;
  font-family:'Impact','Arial Black',sans-serif;
}

/* ── 38. PROSE ────────────────────────────────────────────── */
.prose-kr { color:#333333; line-height:1.625; }
.prose-kr p { margin-bottom:0.75rem; }
.prose-kr strong { color:#000000; font-weight:600; }

/* ═══════════════════════════════════════════════════════════════
   38b. GEM BADGE SYSTEM - Crystals (donations) + Diamonds (sales)
   ═══════════════════════════════════════════════════════════════ */

/* ── Container row: horizontal overlap layout ──────────────── */
.gem-row {
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
  gap:0;
  line-height:1;
}
/* Each gem overlaps its left neighbor */
.gem-row > .gem-crystal,
.gem-row > .gem-diamond {
  margin-right:-3px;
  position:relative;
  z-index:calc(1 + var(--gem-z, 0));
  transition:transform 0.15s, filter 0.15s;
}
.gem-row > .gem-crystal:last-child,
.gem-row > .gem-diamond:last-child { margin-right:0; }
.gem-row > .gem-crystal:hover,
.gem-row > .gem-diamond:hover {
  transform:translateY(-2px) scale(1.15);
  z-index:10;
}

/* ── Base crystal shape (donation badge) ─────────────────────
   Classic gem/diamond cut: wide shoulders, pointed bottom.
   --gem-fill : main body color
   --gem-hi   : upper-face highlight color
   --gem-glow : drop-shadow color
   --gem-z    : stacking z-offset (0 = first crystal)            */
.gem-crystal {
  display:inline-block;
  width:11px;
  height:14px;
  position:relative;
  flex-shrink:0;
}
.gem-crystal::before {
  content:'';
  position:absolute;
  inset:0;
  background:var(--gem-fill, #D6EAF8);
  clip-path:polygon(50% 0%, 100% 32%, 65% 100%, 35% 100%, 0% 32%);
  filter:drop-shadow(0 0 2px var(--gem-glow, #90C9EE));
}
/* Upper facet highlight */
.gem-crystal::after {
  content:'';
  position:absolute;
  top:0; left:15%; right:15%; bottom:55%;
  background:var(--gem-hi, rgba(255,255,255,0.6));
  clip-path:polygon(50% 0%, 100% 100%, 0% 100%);
  opacity:0.55;
}

/* ── Base diamond shape (seller badge) ───────────────────────
   Classic 4-point rotated square - always ice-blue, no CSS vars needed. */
.gem-diamond {
  display:inline-block;
  width:12px;
  height:12px;
  position:relative;
  flex-shrink:0;
}
.gem-diamond::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#C8F0FF 0%,#7FD4EE 45%,#3AAED8 55%,#B9F2FF 100%);
  clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  filter:drop-shadow(0 0 3px rgba(0,200,240,0.7));
}
.gem-diamond::after {
  content:'';
  position:absolute;
  top:5%; left:5%; right:55%; bottom:55%;
  background:rgba(255,255,255,0.5);
  clip-path:polygon(50% 0%, 100% 100%, 0% 100%);
}

/* ════════════════════════════════════════════════════════════
   CRYSTAL ANIMATION TIERS - escalating intensity per tier
   ════════════════════════════════════════════════════════════ */

/* ── Tier 0 Clear - soft ambient pulse ───────────────────── */
@keyframes kr-gem-soft {
  0%,100% { filter:drop-shadow(0 0 1px var(--gem-glow,#90C9EE)); }
  50%      { filter:drop-shadow(0 0 4px var(--gem-glow,#90C9EE)) brightness(1.1); }
}
.gem-anim-soft .gem-crystal::before { animation:kr-gem-soft 3s ease-in-out infinite; }

/* ── Tier 1-2 Amethyst / Sapphire - regular pulse ────────── */
@keyframes kr-gem-pulse {
  0%,100% { filter:drop-shadow(0 0 2px var(--gem-glow)); }
  50%      { filter:drop-shadow(0 0 6px var(--gem-glow)) brightness(1.2); }
}
.gem-anim-pulse .gem-crystal::before { animation:kr-gem-pulse 2.5s ease-in-out infinite; }

/* ── Tier 3-4 Aqua / Emerald - shimmer sweep ─────────────── */
@keyframes kr-gem-shimmer {
  0%   { filter:drop-shadow(0 0 2px var(--gem-glow)); transform:scale(1); }
  40%  { filter:drop-shadow(0 0 8px var(--gem-glow)) brightness(1.3); transform:scale(1.04); }
  100% { filter:drop-shadow(0 0 2px var(--gem-glow)); transform:scale(1); }
}
.gem-anim-shimmer .gem-crystal::before { animation:kr-gem-shimmer 2s ease-in-out infinite; }

/* ── Tier 5-6 Gold / Ruby - strong glow pulse ────────────── */
@keyframes kr-gem-glow {
  0%,100% { filter:drop-shadow(0 0 3px var(--gem-glow)) brightness(1); }
  30%     { filter:drop-shadow(0 0 10px var(--gem-glow)) brightness(1.4); }
  60%     { filter:drop-shadow(0 0 5px var(--gem-glow)) brightness(1.2); }
}
.gem-anim-glow .gem-crystal::before { animation:kr-gem-glow 1.8s ease-in-out infinite; }

/* ── Tier 7 Fire Opal - flickering fire effect ───────────── */
@keyframes kr-gem-fire {
  0%   { filter:drop-shadow(0 0 3px var(--gem-glow)) brightness(1);   transform:scale(1)    rotate(0deg);   }
  20%  { filter:drop-shadow(0 0 8px var(--gem-glow)) brightness(1.5); transform:scale(1.05) rotate(-1deg);  }
  40%  { filter:drop-shadow(0 0 5px var(--gem-glow)) brightness(1.2); transform:scale(1.02) rotate(1deg);   }
  60%  { filter:drop-shadow(0 0 12px var(--gem-glow)) brightness(1.6);transform:scale(1.07) rotate(-0.5deg);}
  80%  { filter:drop-shadow(0 0 6px var(--gem-glow)) brightness(1.3); transform:scale(1.03) rotate(0.5deg); }
  100% { filter:drop-shadow(0 0 3px var(--gem-glow)) brightness(1);   transform:scale(1)    rotate(0deg);   }
}
.gem-anim-fire .gem-crystal::before { animation:kr-gem-fire 1.4s ease-in-out infinite; }

/* ── Tier 8 Rose Diamond - sparkle + bounce ──────────────── */
@keyframes kr-gem-sparkle {
  0%,100% { filter:drop-shadow(0 0 4px var(--gem-glow)); transform:scale(1)    translateY(0); }
  25%     { filter:drop-shadow(0 0 3px var(--gem-glow)); transform:scale(0.97) translateY(1px); }
  50%     { filter:drop-shadow(0 0 12px var(--gem-glow)) brightness(1.6) contrast(1.1);
            transform:scale(1.1) translateY(-2px); }
  75%     { filter:drop-shadow(0 0 5px var(--gem-glow)); transform:scale(1.02) translateY(0); }
}
.gem-anim-sparkle .gem-crystal::before { animation:kr-gem-sparkle 1.2s ease-in-out infinite; }

/* ── Tier 9 Prismatic - full rainbow hue rotation ────────── */
@keyframes kr-gem-rainbow {
  0%   { filter:drop-shadow(0 0 6px #ff6b6b) hue-rotate(0deg)   brightness(1.3); }
  16%  { filter:drop-shadow(0 0 8px #ffa500) hue-rotate(60deg)  brightness(1.4); }
  33%  { filter:drop-shadow(0 0 8px #ffff00) hue-rotate(120deg) brightness(1.5); }
  50%  { filter:drop-shadow(0 0 10px #00ff88) hue-rotate(180deg) brightness(1.5); }
  66%  { filter:drop-shadow(0 0 8px #00bfff) hue-rotate(240deg) brightness(1.4); }
  83%  { filter:drop-shadow(0 0 8px #bf00ff) hue-rotate(300deg) brightness(1.4); }
  100% { filter:drop-shadow(0 0 6px #ff6b6b) hue-rotate(360deg) brightness(1.3); }
}
/* Prismatic crystal gets a special gradient base + rainbow animation */
.gem-prismatic::before {
  background:linear-gradient(135deg,
    #ff9a9e 0%,#fad0c4 15%,#ffecd2 30%,
    #a1c4fd 45%,#c2e9fb 60%,
    #d4fc79 75%,#96e6a1 90%,#ff9a9e 100%) !important;
  background-size:300% 300% !important;
  animation:kr-gem-rainbow 1s linear infinite, kr-prismatic-shift 3s ease-in-out infinite !important;
}
@keyframes kr-prismatic-shift {
  0%,100% { background-position:0% 50%; }
  50%     { background-position:100% 50%; }
}
.gem-anim-rainbow .gem-crystal::before { animation:kr-gem-rainbow 1s linear infinite; }

/* ── Tier 9 Peridot Emerald - radiating lime-yellow glow (MAX tier) ── */
@keyframes kr-gem-emerald {
  0%   { filter:drop-shadow(0 0 3px #D4FF00) drop-shadow(0 0 6px rgba(212,255,0,0.4))
                brightness(1.05); transform:scale(1); }
  25%  { filter:drop-shadow(0 0 2px #D4FF00) drop-shadow(0 0 4px rgba(212,255,0,0.25))
                brightness(1); transform:scale(0.98); }
  55%  { filter:drop-shadow(0 0 7px #D4FF00) drop-shadow(0 0 14px rgba(212,255,0,0.65))
                drop-shadow(0 0 22px rgba(212,255,0,0.35)) brightness(1.45);
         transform:scale(1.06); }
  80%  { filter:drop-shadow(0 0 5px #D4FF00) drop-shadow(0 0 10px rgba(212,255,0,0.5))
                brightness(1.25); transform:scale(1.03); }
  100% { filter:drop-shadow(0 0 3px #D4FF00) drop-shadow(0 0 6px rgba(212,255,0,0.4))
                brightness(1.05); transform:scale(1); }
}
/* Peridot emerald: lime-to-yellow-green gradient + pulsing lime-yellow aura */
.gem-anim-emerald .gem-crystal::before {
  background:linear-gradient(135deg,
    #39D353 0%, #50C878 35%, #AAFFAA 55%, #50C878 75%, #27AE60 100%) !important;
  animation:kr-gem-emerald 1.6s ease-in-out infinite !important;
}

/* ── Diamond animation (always on for all sellers with diamonds) */
@keyframes kr-diamond-shine {
  0%,100% { filter:drop-shadow(0 0 2px rgba(0,200,240,0.5)); }
  50%     { filter:drop-shadow(0 0 6px rgba(0,200,240,0.9)) brightness(1.2); }
}
.diamond-row .gem-diamond::before { animation:kr-diamond-shine 2.5s ease-in-out infinite; }

/* ── Larger size for profile pages ────────────────────────── */
.gem-lg .gem-crystal { width:15px; height:19px; }
.gem-lg .gem-diamond { width:16px; height:16px; }
.gem-lg .gem-row > .gem-crystal,
.gem-lg .gem-row > .gem-diamond { margin-right:-4px; }

/* ─────────────────────────────────────────── end gem system ─ */

/* ══════════════════════════════════════════════════════════════
   FOUNDER / SUPER_ADMIN BADGE
   Legendary pulsing gold skull with 5-color crystal crown
   ══════════════════════════════════════════════════════════════ */
.founder-badge {
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  margin-left:4px;
  vertical-align:middle;
  flex-shrink:0;
  animation:kr-founder-aura 2s ease-in-out infinite;
}
.founder-badge svg {
  display:block;
  overflow:visible; /* allow glow to spill outside svg bounds */
}
.founder-badge-label {
  font-size:6.5px;
  font-weight:900;
  letter-spacing:0.16em;
  color:#D4AF37;
  line-height:1;
  font-family:inherit;
  text-shadow:0 0 5px rgba(212,175,55,0.9);
}
@keyframes kr-founder-aura {
  0%,100% {
    filter:drop-shadow(0 0 3px rgba(212,175,55,0.8))
           drop-shadow(0 0 7px rgba(212,175,55,0.4));
  }
  50% {
    filter:drop-shadow(0 0 6px rgba(212,175,55,1))
           drop-shadow(0 0 14px rgba(212,175,55,0.65))
           drop-shadow(0 0 22px rgba(212,175,55,0.3));
  }
}
/* Larger variant for profile headers */
.founder-badge-lg svg   { width:42px !important; height:56px !important; }
.founder-badge-lg .founder-badge-label { font-size:9px; letter-spacing:0.18em; }

/* ── Dropdown z-index hardening (prevents any page content clipping) ── */
#kr-user-menu,
#kr-cat-menu {
  z-index:200 !important;
  position:absolute !important;
}
.prose-kr p { margin-bottom:0.75rem; }
.prose-kr strong { color:#000000; font-weight:600; }

/* ── 42. PROMOTED LISTINGS ────────────────────────────────── */

/* Section header */
.paid-listings-header {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; margin-bottom:12px;
  background:linear-gradient(90deg,#FFF9E6 0%,#FFFFF8 100%);
  border:1.5px solid #D4AF37; border-radius:8px;
}
.paid-listings-header-icon {
  font-size:18px; color:#B8860B; flex-shrink:0;
}
.paid-listings-header-text {
  font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700;
  color:#8B6800; letter-spacing:0.06em; text-transform:uppercase;
}
.paid-listings-header-sub {
  font-size:11px; color:#AAAAAA; margin-left:auto;
}

/* Individual promoted listing card */
.listing-promoted {
  position:relative; border:2px solid #D4AF37 !important;
  background:linear-gradient(180deg,#FFFDF0 0%,#FFFFFF 40%) !important;
  box-shadow:0 2px 12px rgba(212,175,55,0.18) !important;
}
.listing-promoted::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:3px; background:linear-gradient(90deg,#D4AF37,#F5D060,#D4AF37);
  border-radius:6px 6px 0 0;
}
.promo-tag {
  display:inline-flex; align-items:center; gap:3px;
  background:#D4AF37; color:#3a2a00;
  font-size:9px; font-weight:800; letter-spacing:0.12em;
  text-transform:uppercase; padding:2px 7px; border-radius:3px;
  box-shadow:0 1px 4px rgba(184,134,11,0.35);
}
.promo-bold   { font-weight:800 !important; }
.promo-italic { font-style:italic !important; }
.promo-red    { color:#CC0000 !important; }

/* ── 43. EXPIRY INDICATOR ─────────────────────────────────── */
.expiry-bar {
  display:flex; align-items:center; gap:6px;
  font-size:11px; color:#888888; padding:6px 0; flex-wrap:wrap;
}
.expiry-bar-fill {
  flex:1; min-width:80px; height:4px; background:#EEEEEE; border-radius:2px; overflow:hidden;
}
.expiry-bar-fill-inner {
  height:100%; border-radius:2px;
  transition:width 0.4s ease;
}
.expiry-warning { color:#CC6600 !important; font-weight:600; }
.expiry-critical { color:#CC0000 !important; font-weight:700; }
.expiry-expired-banner {
  background:#FFF5F5; border:1.5px solid #FFAAAA; border-radius:6px;
  padding:10px 14px; color:#990000; font-size:13px; font-weight:600;
  display:flex; align-items:center; gap:8px;
}

/* Bump history feed */
.bump-feed { list-style:none; }
.bump-feed-item {
  display:flex; gap:10px; align-items:flex-start;
  padding:8px 0; border-bottom:1px solid #F0F0F0;
}
.bump-feed-item:last-child { border-bottom:none; }
.bump-feed-icon {
  width:24px; height:24px; border-radius:50%;
  background:#FFF9E6; border:1.5px solid #D4AF37;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; flex-shrink:0; margin-top:1px;
}
.bump-feed-msg { font-size:13px; color:#333333; flex:1; }
.bump-feed-meta { font-size:11px; color:#AAAAAA; white-space:nowrap; }

/* ── 44. SHIPPING BADGES ──────────────────────────────────── */
.shipping-badge {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600; padding:3px 8px;
  border-radius:4px; border:1px solid;
}
.shipping-free     { color:#1a6b2a; background:#EAF7EE; border-color:#A8D8B0; }
.shipping-buyer    { color:#334E7C; background:#EEF2FF; border-color:#B0C4EE; }
.shipping-local    { color:#7B4700; background:#FFF4E6; border-color:#F0C888; }
.shipping-negotiate{ color:#555555; background:#F5F5F5; border-color:#CCCCCC; }

/* promote button */
.btn-promote {
  display:inline-flex; align-items:center; gap:5px;
  background:linear-gradient(135deg,#D4AF37 0%,#F5D060 100%);
  color:#3a2a00; font-weight:700; font-size:13px;
  padding:7px 14px; border-radius:5px; border:1.5px solid #B8960C;
  cursor:pointer; transition:filter 0.15s;
  text-decoration:none;
}
.btn-promote:hover { filter:brightness(1.08); }

/* ── 39. MISC ─────────────────────────────────────────────── */
.no-print { }  /* identity – used with @media print below */

/* ── 40. SCROLLBAR ────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:#EEEEEE; }
::-webkit-scrollbar-thumb { background:#AAAAAA; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#000000; }

/* ── 41. PRINT ────────────────────────────────────────────── */
@media print {
  nav, footer, .no-print { display:none !important; }
  .certificate-card { border:2px solid var(--kr-gold) !important; }
  .print\:block { display:block !important; }
}

/* ─────────────────────────────────────────────────────────────
   42. RESPONSIVE BREAKPOINTS
   ───────────────────────────────────────────────────────────── */

/* sm - 640px */
@media (min-width:640px) {
  /* !important overrides .hidden { display:none !important } */
  .sm\:block          { display:block !important; }
  .sm\:flex           { display:flex  !important; }
  .sm\:inline-block   { display:inline-block !important; }
  .sm\:hidden         { display:none  !important; }
  .sm\:grid-cols-2    { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sm\:grid-cols-3    { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sm\:grid-cols-4    { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .sm\:table-cell     { display:table-cell !important; }
}

/* md - 768px */
@media (min-width:768px) {
  .md\:flex-row        { flex-direction:row; }
  .md\:flex-col        { flex-direction:column; }
  .md\:flex            { display:flex  !important; }
  .md\:block           { display:block !important; }
  .md\:inline-block    { display:inline-block !important; }
  .md\:hidden          { display:none  !important; }
  .md\:grid-cols-2     { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .md\:grid-cols-3     { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .md\:grid-cols-4     { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .md\:grid-cols-6     { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .md\:col-span-2      { grid-column:span 2; }
  .md\:table-cell      { display:table-cell; }
  .md\:text-5xl        { font-size:3rem; line-height:1; }
  .md\:w-48            { width:12rem; }
  .md\:w-56            { width:14rem; }
  .md\:w-64            { width:16rem; }
  .md\:w-72            { width:18rem; }
  .md\:w-80            { width:20rem; }
  .md\:w-full          { width:100%; }
  .md\:max-w-xl        { max-width:36rem; }
  .md\:max-w-2xl       { max-width:42rem; }
  .md\:px-6            { padding-left:1.5rem; padding-right:1.5rem; }
  .md\:px-8            { padding-left:2rem;   padding-right:2rem; }
  .md\:py-6            { padding-top:1.5rem;  padding-bottom:1.5rem; }
  .section-title       { font-size:1.875rem; }
}

/* lg - 1024px */
@media (min-width:1024px) {
  /* !important overrides .hidden { display:none !important } */
  .lg\:flex            { display:flex  !important; }
  .lg\:block           { display:block !important; }
  .lg\:inline-block    { display:inline-block !important; }
  .lg\:hidden          { display:none  !important; }
  .lg\:flex-row        { flex-direction:row; }
  .lg\:grid-cols-2     { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lg\:grid-cols-3     { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lg\:grid-cols-4     { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .lg\:grid-cols-5     { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .lg\:col-span-2      { grid-column:span 2; }
  .lg\:table-cell      { display:table-cell; }
  .lg\:w-56            { width:14rem; }
}

/* xl - 1280px */
@media (min-width:1280px) {
  .xl\:grid-cols-4     { grid-template-columns:repeat(4,minmax(0,1fr)); }
}