/* ═══════════════ GemWiki — Luxury Gem Theme ═══════════════ */
:root {
  --bg: #0d0d14;
  --bg-card: rgba(20,18,35,0.75);
  --bg-card-hover: rgba(30,25,50,0.85);
  --gold: #c9a84c;
  --gold-light: #e8d48b;
  --gold-glow: rgba(201,168,76,0.2);
  --accent: #c9a84c;
  --text: #e0dcd0;
  --text-dim: #8a8678;
  --text-bright: #f5f0e0;
  --border: rgba(201,168,76,0.1);
  --border-accent: rgba(201,168,76,0.3);
  --radius-xl: 20px; --radius-lg: 14px; --radius-md: 10px; --radius-sm: 6px;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.7;-webkit-font-smoothing:antialiased}
body{min-height:100vh;position:relative;overflow-x:hidden;max-width:100vw}
.s-grain{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;opacity:.03}

/* Header */
.s-banner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:rgba(13,13,20,.88);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;flex-wrap:wrap;gap:12px}
.s-logo{font-family:var(--font-heading);font-size:1.3rem;font-weight:700;color:var(--gold-light);text-decoration:none;letter-spacing:-.01em}
.s-logo:hover{color:var(--gold)}
.s-nav{display:flex;gap:20px;flex-wrap:wrap}
.s-nav a{color:var(--text-dim);text-decoration:none;font-size:.85rem;font-weight:500;transition:color .2s}
.s-nav a:hover{color:var(--gold-light)}
.s-lang-switch{background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);padding:5px 10px;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:.75rem;cursor:pointer}
.s-lang-switch:focus{outline:2px solid var(--gold)}

/* Hero */
.s-hero{text-align:center;padding:56px 24px 24px}
.s-hero h1{font-family:var(--font-heading);font-size:clamp(2rem,5vw,3.2rem);font-weight:800;background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold) 50%,#a08030 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px}
.s-subtitle{font-size:1.05rem;color:var(--text-dim);max-width:640px;margin:0 auto}

/* Badges */
.s-herobadges{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:0 24px 32px}
.s-badge{display:inline-block;padding:6px 16px;background:var(--bg-card);border:1px solid var(--border-accent);border-radius:999px;font-size:.78rem;font-weight:500;color:var(--gold-light);backdrop-filter:blur(10px)}

/* Search */
.hero-search{max-width:560px;margin:0 auto 40px;padding:0 24px}
.hero-search input{width:100%;padding:14px 20px;background:var(--bg-card);border:1px solid var(--border-accent);border-radius:var(--radius-lg);color:var(--text-bright);font-family:var(--font-body);font-size:.95rem;backdrop-filter:blur(20px);transition:all .3s}
.hero-search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 30px var(--gold-glow)}
.search-results{position:absolute;top:100%;left:24px;right:24px;background:rgba(15,15,25,.97);border:1px solid var(--border);border-radius:var(--radius-md);margin-top:6px;backdrop-filter:blur(30px);z-index:50;max-height:360px;overflow-y:auto;display:none}
.search-results.active{display:block}
.search-results a{display:block;padding:10px 16px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--border);font-size:.85rem;transition:background .15s}
.search-results a:hover{background:var(--gold-glow)}

/* Category Grid */
.cat-grid{padding:0 24px 48px}
.cat-grid h2,.featured h2{text-align:center;font-family:var(--font-heading);font-size:1.5rem;font-weight:700;margin-bottom:24px;color:var(--text-bright)}
.cat-grid-inner{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;max-width:1100px;margin:0 auto}
.cat-card{display:flex;flex-direction:column;align-items:center;padding:24px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);text-decoration:none;backdrop-filter:blur(15px);transition:all .3s;text-align:center}
.cat-card:hover{background:var(--bg-card-hover);border-color:var(--border-accent);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.3)}
.cat-emoji{font-size:2rem;margin-bottom:8px}
.cat-card h3{font-size:.92rem;font-weight:600;color:var(--text-bright);margin-bottom:4px}
.cat-count{font-size:.7rem;color:var(--gold-light);font-weight:500}

/* Gem Grid */
.featured{padding:0 24px 56px}
.gem-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;max-width:1100px;margin:0 auto}
.gem-card{display:flex;flex-direction:column;padding:18px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);text-decoration:none;backdrop-filter:blur(10px);transition:all .25s}
.gem-card:hover{background:var(--bg-card-hover);border-color:var(--border-accent);transform:translateY(-3px);box-shadow:0 8px 30px var(--gold-glow)}
.gem-emoji{font-size:1.5rem;margin-bottom:6px}
.gem-card h3{font-size:.9rem;font-weight:600;color:var(--text-bright);margin-bottom:4px}
.gem-hardness{font-size:.7rem;color:var(--gold-light)}

/* Info Bar */
.info-bar{display:flex;gap:14px;flex-wrap:wrap;padding:12px 24px;max-width:800px;margin:0 auto 20px;justify-content:center}
.info-bar span{font-size:.78rem;color:var(--text-dim);background:var(--bg-card);padding:4px 10px;border-radius:var(--radius-sm);border:1px solid var(--border)}

/* Gem Content */
.gem-content{max-width:800px;margin:0 auto;padding:0 24px 56px}
.dim-section{margin-bottom:28px;padding:24px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);backdrop-filter:blur(15px);transition:border-color .3s}
.dim-section:hover{border-color:var(--border-accent)}
.dim-section h3{font-family:var(--font-heading);font-size:1.05rem;font-weight:700;color:var(--gold-light);margin-bottom:12px}
.dim-section p{font-size:.9rem;color:var(--text);line-height:1.8}
.data-row{padding:6px 0;font-size:.85rem;border-bottom:1px solid var(--border);color:var(--text)}
.data-row strong{color:var(--gold-light);margin-right:8px}

/* Related */
.related-grid{display:flex;flex-wrap:wrap;gap:8px}
.related-tag{padding:6px 12px;background:rgba(201,168,76,.1);border:1px solid var(--border-accent);border-radius:999px;font-size:.78rem;color:var(--gold-light)}

/* Category list */
.cat-desc{text-align:center;color:var(--text-dim);padding:0 24px 20px;font-size:.85rem}
.cat-list .gem-card{text-align:center}

/* Footer */
.s-footer{text-align:center;padding:36px 24px;border-top:1px solid var(--border);margin-top:40px}
.footer-nav{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.footer-nav a{color:var(--text-dim);text-decoration:none;font-size:.78rem;transition:color .2s}
.footer-nav a:hover{color:var(--gold-light)}
.footer-copy{font-size:.65rem;color:var(--text-dim);opacity:.5}

/* Responsive */
@media(max-width:768px){
  .s-banner{padding:12px 16px;justify-content:center}
  .s-nav{gap:10px;justify-content:center}
  .s-nav a{font-size:.78rem}
  .s-hero{padding:36px 16px 20px}
  .cat-grid-inner{grid-template-columns:repeat(2,1fr);gap:8px}
  .gem-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .dim-section{padding:18px;margin-bottom:18px}
}

/* Homepage articles */
.hp-articles{max-width:800px;margin:48px auto 0;padding:0 24px;text-align:center}
.hp-article{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px 28px;margin-bottom:20px;backdrop-filter:blur(15px);transition:border-color .3s}
.hp-article:hover{border-color:var(--border-accent)}
.hp-article h2{font-family:var(--font-heading);font-size:1.2rem;font-weight:700;color:var(--gold-light);margin-bottom:14px;text-align:center}
.hp-article p{font-size:.88rem;color:var(--text);line-height:1.8;text-align:left;max-width:700px;margin:0 auto}