:root{--bg: #1a1f2e;--bg-card: #212838;--bg-card-hover: #2a3145;--bg-hero: linear-gradient(135deg, rgba(10,186,181,0.92) 0%, rgba(8,160,156,0.95) 100%);--text: #e2e8f0;--text-muted: #94a3b8;--text-heading: #f1f5f9;--accent: var(--accent);--accent-light: #a29bfe;--accent-glow: rgba(108, 92, 231, 0.25);--green: #4ade80;--orange: #fb923c;--red: #f87171;--blue: #60a5fa;--yellow: #facc15;--border: rgba(108, 92, 231, 0.15);--border-light: rgba(148, 163, 184, 0.12);--radius: 12px;--radius-sm: 8px;--radius-lg: 16px;--shadow: 0 4px 24px rgba(0,0,0,0.25);--shadow-sm: 0 2px 8px rgba(0,0,0,0.15);--max-width: 1200px;--nav-height: 64px}*, *::before, *::after{box-sizing: border-box;margin: 0;padding: 0}html{scroll-behavior: smooth;font-size: 16px}body{font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;background: var(--bg);color: var(--text);line-height: 1.7;min-height: 100vh}h1, h2, h3, h4, h5{font-family: 'Quicksand', sans-serif;color: var(--text-heading);font-weight: 700;line-height: 1.3}h1{font-size: 2.5rem;letter-spacing: -0.02em}h2{font-size: 1.75rem}h3{font-size: 1.3rem}h4{font-size: 1.1rem}a{color: var(--accent-light);text-decoration: none;transition: color 0.2s}a:hover{color: #c4b5fd}code, .code{font-family: 'Fira Code', monospace;background: rgba(90,158,140,0.12);padding: 2px 8px;border-radius: 4px;font-size: 0.9em}.handwrite{font-family: 'Caveat', cursive;font-size: 1.3em;color: var(--accent-light)}.container{max-width: var(--max-width);margin: 0 auto;padding: 0 24px}header.site-header{position: sticky;top: 0;z-index: 1000;background: rgba(10, 186, 181, 0.92);backdrop-filter: blur(12px);border-bottom: 1px solid var(--border);height: var(--nav-height)}.header-inner{display: flex;align-items: center;justify-content: space-between;max-width: var(--max-width);margin: 0 auto;padding: 0 24px;height: 100%}.logo{font-family: 'Quicksand', sans-serif;font-weight: 800;font-size: 1.35rem;color: var(--text-heading);display: flex;align-items: center;gap: 8px;white-space: nowrap}.logo span{color: var(--accent-light)}nav.main-nav{display: flex;align-items: center;justify-content: center;flex: 1;gap: 4px}nav.main-nav a{color: var(--text-muted);padding: 7px 10px;border-radius: var(--radius-sm);font-size: 0.85rem;font-weight: 600;transition: all 0.2s;white-space: nowrap}nav.main-nav a:hover, nav.main-nav a.active{color: var(--text-heading);background: rgba(90,158,140,0.12)}.lang-select{position: relative}.lang-btn{background: rgba(108,92,231,0.1);border: 1px solid var(--border);color: var(--text);padding: 8px 12px;border-radius: var(--radius-sm);cursor: pointer;font-size: 0.88rem;font-weight: 600;display: flex;align-items: center;gap: 6px;transition: all 0.2s}.lang-btn:hover{background: rgba(108,92,231,0.2)}.lang-dropdown{display: none;position: absolute;top: 100%;right: 0;margin-top: 4px;background: var(--bg-card);border: 1px solid var(--border);border-radius: var(--radius-sm);min-width: 120px;box-shadow: var(--shadow);z-index: 1001}.lang-dropdown a{display: block;padding: 8px 16px;color: var(--text-muted);font-size: 0.88rem}.lang-dropdown a:hover{background: rgba(108,92,231,0.1);color: var(--text-heading)}.lang-dropdown.show{display: block}.lang-select:hover .lang-dropdown,.lang-select:focus-within .lang-dropdown{display: block}.hero{background: var(--bg-hero);padding: 80px 24px 60px;text-align: center;border-bottom: 1px solid var(--border);position: relative;overflow: hidden}.hero::before{content: '';position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: radial-gradient(ellipse at 30% 50%, rgba(108,92,231,0.06) 0%, transparent 60%), radial-gradient(ellipse at 70% 30%, rgba(96,165,250,0.04) 0%, transparent 50%);pointer-events: none}.hero h1{font-size: clamp(2rem, 5vw, 3.2rem);margin-bottom: 12px;position: relative}.hero .subtitle{color: var(--text-muted);font-size: 1.15rem;max-width: 700px;margin: 0 auto 32px;position: relative}.hero .subtitle strong{color: var(--accent-light)}.hero-cta{display: flex;gap: 12px;justify-content: center;flex-wrap: wrap;position: relative}.btn{display: inline-flex;align-items: center;gap: 8px;padding: 12px 24px;border-radius: var(--radius);font-weight: 700;font-size: 0.95rem;cursor: pointer;transition: all 0.25s;border: none;text-decoration: none}.btn-primary{background: var(--accent);color: #fff}.btn-primary:hover{background: #8b74f0;color: #fff;transform: translateY(-1px);box-shadow: 0 4px 16px var(--accent-glow)}.btn-outline{background: transparent;border: 1.5px solid var(--border);color: var(--text)}.btn-outline:hover{border-color: var(--accent-light);color: var(--accent-light)}.btn-ghost{background: transparent;color: var(--accent-light)}.btn-ghost:hover{background: rgba(108,92,231,0.08);color: #c4b5fd}.hero-stats{display: flex;justify-content: center;gap: 40px;margin-top: 40px;flex-wrap: wrap;position: relative}.hero-stat{text-align: center}.hero-stat .stat-num{font-family: 'Quicksand', sans-serif;font-size: 1.8rem;font-weight: 800;color: var(--accent-light)}.hero-stat .stat-label{font-size: 0.85rem;color: var(--text-muted);margin-top: 4px}.section{padding: 64px 0}.section-alt{background: rgba(33, 40, 56, 0.5)}.section-header{text-align: center;margin-bottom: 40px}.section-header h2{margin-bottom: 8px}.section-header p{color: var(--text-muted);max-width: 650px;margin: 0 auto;font-size: 1.05rem}.card-grid{display: grid;grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));gap: 16px}.card-grid-4{grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))}.card{background: var(--bg-card);border: 1px solid var(--border-light);border-radius: var(--radius);padding: 24px;transition: all 0.25s;text-decoration: none;color: var(--text);display: block}.card:hover{background: var(--bg-card-hover);border-color: var(--border);transform: translateY(-2px);box-shadow: var(--shadow-sm)}.card-icon{font-size: 2rem;margin-bottom: 12px;display: block}.card h4{margin-bottom: 6px}.card p{color: var(--text-muted);font-size: 0.92rem;line-height: 1.5}.card .card-badge{display: inline-block;background: rgba(108,92,231,0.15);color: var(--accent-light);padding: 2px 10px;border-radius: 20px;font-size: 0.8rem;font-weight: 600;margin-top: 8px}.priority-grid{display: grid;grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));gap: 12px}.priority-card{background: var(--bg-card);border: 1px solid var(--border-light);border-radius: var(--radius);padding: 20px;transition: all 0.25s;text-decoration: none;color: var(--text);display: flex;align-items: flex-start;gap: 14px}.priority-card:hover{background: var(--bg-card-hover);border-color: var(--border)}.priority-card .pc-icon{font-size: 1.8rem;flex-shrink: 0}.priority-card .pc-text h4{font-size: 1rem;margin-bottom: 2px}.priority-card .pc-text p{color: var(--text-muted);font-size: 0.85rem;line-height: 1.4}.data-table{width: 100%;border-collapse: collapse;background: var(--bg-card);border-radius: var(--radius);overflow: hidden;border: 1px solid var(--border-light)}.data-table thead{background: rgba(108,92,231,0.08)}.data-table th{padding: 12px 16px;text-align: left;font-weight: 700;font-size: 0.88rem;color: var(--text-muted);text-transform: uppercase;letter-spacing: 0.05em;border-bottom: 1px solid var(--border)}.data-table td{padding: 10px 16px;border-bottom: 1px solid var(--border-light);font-size: 0.92rem}.data-table tr:hover td{background: rgba(108,92,231,0.05)}.data-table tr:last-child td{border-bottom: none}.faq-list{display: flex;flex-direction: column;gap: 8px}.faq-item{background: var(--bg-card);border: 1px solid var(--border-light);border-radius: var(--radius-sm);overflow: hidden}.faq-q{width: 100%;background: none;border: none;color: var(--text);padding: 16px 20px;text-align: left;font-size: 1rem;font-weight: 600;cursor: pointer;display: flex;justify-content: space-between;align-items: center;font-family: 'Nunito', sans-serif}.faq-q:hover{background: rgba(108,92,231,0.05)}.faq-q .faq-icon{font-size: 1.3rem;transition: transform 0.3s;color: var(--accent-light)}.faq-a{padding: 0 20px 16px;color: var(--text-muted);font-size: 0.94rem;line-height: 1.7;display: none}.faq-item.open .faq-a{display: block}.faq-item.open .faq-icon{transform: rotate(45deg)}.code-list{display: flex;flex-direction: column;gap: 12px}.code-item{display: flex;align-items: center;justify-content: space-between;background: var(--bg-card);border: 1px solid var(--border-light);border-radius: var(--radius-sm);padding: 14px 18px;transition: all 0.2s}.code-item:hover{border-color: var(--border)}.code-text{font-family: 'Fira Code', monospace;font-size: 0.95rem;color: var(--green)}.code-reward{color: var(--text-muted);font-size: 0.88rem;margin-left: auto;margin-right: 12px}.copy-btn{background: rgba(90,158,140,0.12);border: 1px solid var(--border);color: var(--accent-light);padding: 6px 14px;border-radius: 6px;cursor: pointer;font-weight: 600;font-size: 0.85rem;transition: all 0.2s}.copy-btn:hover{background: var(--accent);color: #fff;border-color: var(--accent)}.copy-btn.copied{background: var(--green);color: #000;border-color: var(--green)}footer.site-footer{background: rgba(20, 25, 38, 0.8);border-top: 1px solid var(--border);padding: 48px 0 24px;margin-top: 48px}.footer-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));gap: 32px;margin-bottom: 32px}.footer-col h4{font-size: 0.95rem;margin-bottom: 12px;color: var(--text-heading);text-transform: uppercase;letter-spacing: 0.05em}.footer-col a{display: block;color: var(--text-muted);font-size: 0.9rem;padding: 4px 0}.footer-col a:hover{color: var(--accent-light)}.footer-bottom{border-top: 1px solid var(--border-light);padding-top: 20px;text-align: center;color: var(--text-muted);font-size: 0.85rem}.footer-bottom a{color: var(--accent-light)}.footer-bottom .disclaimer{margin-top: 8px;font-style: italic}#cookie-consent{position: fixed;bottom: 0;left: 0;right: 0;background: var(--bg-card);color: var(--text);padding: 14px 24px;display: flex;align-items: center;justify-content: space-between;z-index: 9999;border-top: 1px solid var(--border);font-size: 0.9rem;flex-wrap: wrap;gap: 12px}#cookie-consent a{color: var(--accent-light);text-decoration: underline}.hamburger{display: none;background: none;border: none;color: var(--text);font-size: 1.5rem;cursor: pointer;padding: 8px;line-height: 1;z-index: 1001}.hamburger:hover{color: var(--accent-light)}

.pal-card:hover{background:var(--bg-card-hover);border-color:var(--accent-light);transform:translateY(-2px);box-shadow:0 4px 16px var(--accent-glow)}
.pal-card-num{position:absolute;top:8px;right:10px;font-size:0.7rem;color:var(--text-muted);font-weight:600}
.pal-card-name{font-size:1.05rem;font-weight:700;margin:0 0 6px;color:var(--text-heading)}
.pal-card-stars{font-size:0.75rem;margin-bottom:6px;letter-spacing:1px}
.pal-card-stats{display:flex;gap:8px;margin-bottom:8px;font-size:0.72rem}
.pal-card-stats span{background:var(--bg);padding:2px 8px;border-radius:4px;color:var(--text-muted);font-weight:600}
.pal-card-work{font-size:0.7rem;color:var(--text-muted);line-height:1.3;margin-top:auto}
.pal-card.hidden{display:none}

/* Element badges in cards */











@media (max-width: 768px){
  
  
  .pal-card-name{font-size:0.95rem}
}
@media (max-width: 768px){h1{font-size: 1.6rem}h2{font-size: 1.25rem}.hero{padding: 40px 16px 28px}.hero-stats{gap: 16px}.hero-stats .stat-num{font-size: 1.3rem}.hero-stats .stat-label{font-size: 0.75rem}.hero-cta{flex-direction: column;align-items: center}.section{padding: 36px 0}.card-grid{grid-template-columns: 1fr}.priority-grid{grid-template-columns: 1fr}.container{padding: 0 16px}.header-inner{padding: 0 16px}.hamburger{display: block}.main-nav{position: fixed;top: 0;right: -280px;width: 260px;height: 100vh;background: var(--bg-card);flex-direction: column;padding: 80px 24px 24px;gap: 4px;transition: right 0.3s ease;z-index: 1000;box-shadow: -4px 0 24px rgba(0,0,0,0.3);overflow-y: auto}.main-nav.open{right: 0}.main-nav a{padding: 12px 16px;font-size: 1rem;border-radius: var(--radius-sm)}.nav-overlay{display: none;position: fixed;inset: 0;background: rgba(0,0,0,0.4);z-index: 999}.nav-overlay.show{display: block}.data-table{display: block;overflow-x: auto;white-space: nowrap;-webkit-overflow-scrolling: touch}.db-sidebar h4{font-size:1.1rem;margin-bottom:12px;color:var(--text-heading)}.db-sidebar label{display:block;font-size:0.82rem;color:var(--text-muted);margin:10px 0 4px}.db-sidebar select{width:100%;padding:8px 12px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;font-size:0.88rem}.db-sidebar .btn{width:100%;margin-top:12px}.footer-grid{grid-template-columns: 1fr 1fr;gap: 24px}.footer-bottom{flex-direction: column;text-align: center}}@media (max-width: 480px){.hero h1{font-size: 1.4rem}h2{font-size: 1.15rem}.hero{padding: 32px 12px 24px}.hero .subtitle{font-size: 0.95rem}.hero-stats{gap: 12px}.hero-stat .stat-num{font-size: 1.1rem}.card{padding: 16px}.card-icon{font-size: 1.5rem}.footer-grid{grid-template-columns: 1fr;gap: 20px;padding: 32px 0 16px}.main-nav{width: 240px;right: -260px}#cookie-consent{flex-direction: column;gap: 8px;padding: 12px 16px;font-size: 0.82rem}.logo{font-size: 1.1rem}.lang-btn{font-size: 0.8rem;padding: 6px 10px}.theme-btn{width: 24px;height: 24px}}.header-search{position: relative;margin-right: 8px}#site-search{width: 180px;padding: 6px 12px;background: var(--bg);border: 1px solid var(--border-light);color: var(--text);border-radius: var(--radius-sm);font-size: 0.88rem;font-family: inherit;transition: all 0.2s}#site-search:focus{border-color: var(--accent-light);width: 220px;outline: none}#site-search::placeholder{color: var(--text-muted);font-size: 0.82rem}.search-dropdown{display: none;position: absolute;top: 100%;left: 0;right: 0;margin-top: 2px;background: var(--bg-card);border: 1px solid var(--border);border-radius: var(--radius-sm);box-shadow: var(--shadow);z-index: 1002;max-height: 320px;overflow-y: auto}.search-dropdown a{display: block;padding: 8px 14px;color: var(--text);font-size: 0.88rem}.search-dropdown a:hover{background: rgba(108,92,231,0.1);color: var(--accent-light)}@media (max-width: 768px){.header-search{margin-right: 4px}#site-search{width: 120px;font-size: 0.8rem}#site-search:focus{width: 140px}}
.data-table th:nth-child(1){width: 36px;}
.data-table th:nth-child(2){width: 130px;}
.data-table th:nth-child(3){width: 80px;}
.data-table th:nth-child(4){width: 160px;}
.data-table th:nth-child(5){width: 60px;}
.data-table th:nth-child(6){width: 50px;}
.data-table th:nth-child(7){width: 50px;}
.data-table th:nth-child(8){width: 50px;}
.data-table th:nth-child(9){width: 120px;}
@media (max-width: 768px) {
  .data-table th:nth-child(2) { min-width: 100px; }
  .data-table td { padding: 8px 10px; font-size: 0.82rem; }
}

/* === Pals Page Layout === */
.db-layout{display:grid;grid-template-columns:250px 1fr;gap:24px;align-items:start}
.db-sidebar{position:sticky;top:80px}
.db-sidebar h4{font-size:1.1rem;margin:0 0 16px;color:var(--text-heading)}
.db-sidebar label{display:block;font-size:0.82rem;color:var(--text-muted);margin:12px 0 4px}
.db-sidebar select{width:100%;padding:8px 12px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;font-size:0.88rem}
.db-sidebar .btn{width:100%;margin-top:12px}
.db-main{overflow-x:auto}

/* Pal Card Grid */
.pal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;padding:0}
.pal-card{display:flex;flex-direction:column;position:relative;background:var(--bg-card);border:1px solid var(--border-light);border-radius:8px;padding:14px;text-decoration:none;color:var(--text);transition:all .2s}
.pal-card:hover{background:var(--bg-card-hover);border-color:var(--accent-light);transform:translateY(-2px);box-shadow:0 4px 16px var(--accent-glow)}
.pal-card-num{font-size:0.7rem;color:var(--text-muted);font-weight:600;margin-bottom:2px}
.pal-card-name{font-size:1rem;font-weight:700;margin:0 0 6px;color:var(--text-heading);word-break:break-word}
.pal-card-stars{font-size:0.75rem;margin-bottom:6px;letter-spacing:1px}
.pal-card-stats{display:flex;gap:6px;margin-bottom:8px;font-size:0.72rem}
.pal-card-stats span{background:var(--bg);padding:2px 6px;border-radius:4px;color:var(--text-muted);font-weight:600}
.pal-card-work{font-size:0.7rem;color:var(--text-muted);line-height:1.3;margin-top:auto}
.pal-card.hidden{display:none}

/* Element Badges */
.elem-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:0.7rem;font-weight:700;margin-bottom:6px;width:fit-content}
.elem-fire{background:rgba(239,68,68,0.2);color:#f87171}
.elem-water{background:rgba(59,130,246,0.2);color:#60a5fa}
.elem-grass{background:rgba(34,197,94,0.2);color:#4ade80}
.elem-electric{background:rgba(234,179,8,0.2);color:#facc15}
.elem-ice{background:rgba(125,211,252,0.2);color:#7dd3fc}
.elem-ground{background:rgba(168,85,24,0.2);color:#d97706}
.elem-dark{background:rgba(148,163,184,0.2);color:#94a3b8}
.elem-dragon{background:rgba(139,92,246,0.2);color:#a78bfa}
.elem-neutral{background:rgba(203,213,225,0.2);color:#cbd5e1}

@media (max-width: 768px){
  .db-layout{grid-template-columns:1fr}
  .db-sidebar{position:static}
  .pal-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
  .pal-card{padding:10px}
  .pal-card-name{font-size:0.9rem}
}

/* === Newsletter === */
.section-newsletter { padding: 48px 0; background: rgba(108,92,231,0.04); }
.newsletter-form { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.newsletter-form input[type="email"] {
  padding: 12px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  font-size: 0.95rem;
  min-width: 280px;
  font-family: inherit;
}
.newsletter-form input[type="email"]:focus {
  border-color: var(--accent-light);
  outline: none;
}

/* === Social Share === */
.social-share { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 16px 0; flex-wrap: wrap; }
.social-share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-sm);
  background: var(--bg-card); border: 1px solid var(--border-light);
  color: var(--text-muted); font-size: 0.88rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s; text-decoration: none;
}
.social-share-btn:hover { border-color: var(--accent-light); color: var(--accent-light); }


/* Gallery Page Styles */
.gallery-hero { text-align: center; padding: 60px 20px 40px; }
.gallery-hero h1 { font-size: 2.4rem; margin-bottom: 12px; }
.gallery-hero p { color: var(--text-muted); max-width: 600px; margin: 0 auto; }

/* Filter Bar */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 20px 0 30px; }
.filter-btn { padding: 6px 16px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted); cursor: pointer; font-size: 0.85rem; transition: all 0.2s; }
.filter-btn:hover, .filter-btn.active { border-color: var(--accent); color: var(--accent-light); background: var(--accent-glow); }

/* Pal Showcase Grid */
.showcase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin-bottom: 40px; }
.showcase-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; text-align: center; transition: all 0.3s; cursor: pointer; position: relative; overflow: hidden; }
.showcase-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); border-color: var(--accent); }
.showcase-card .pal-icon { font-size: 3rem; margin-bottom: 8px; display: block; }
.showcase-card .pal-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; color: var(--text-heading); }
.showcase-card .pal-type { font-size: 0.75rem; color: var(--text-muted); }
.showcase-card .rarity-badge { position: absolute; top: 8px; right: 8px; font-size: 0.7rem; padding: 2px 8px; border-radius: 10px; font-weight: 700; }
.rarity-S { background: linear-gradient(135deg, #ffd700, #ffaa00); color: #1a1510; }
.rarity-A { background: linear-gradient(135deg, #c0c0c0, #888); color: #1a1510; }
.rarity-B { background: linear-gradient(135deg, #cd7f32, #a0522d); color: #fff; }
.showcase-card .element-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 2px; }
.el-Fire { background: #f87171; } .el-Water { background: #67c8ff; } .el-Grass { background: #4ade80; }
.el-Electric { background: #facc15; } .el-Ice { background: #a5f3fc; } .el-Ground { background: #d4a373; }
.el-Dark { background: #6b21a8; } .el-Dragon { background: #7c3aed; } .el-Neutral { background: #94a3b8; }

/* Base Layout Gallery */
.layout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-bottom: 40px; }
.layout-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
.layout-card h3 { margin-bottom: 12px; font-size: 1.1rem; }
.layout-diagram { display: grid; gap: 4px; background: var(--bg); border-radius: 8px; padding: 12px; margin-bottom: 12px; min-height: 180px; }
.layout-diagram .cell { border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; color: #fff; min-height: 36px; }
.cell-palbox { background: #5a9e8c; } .cell-farm { background: #4ade80; color: #1a1510; }
.cell-mine { background: #d4a373; } .cell-storage { background: #818cf8; } .cell-craft { background: #f0b368; color: #1a1510; }
.cell-breed { background: #f472b6; } .cell-def { background: #f87171; }
.layout-card .layout-desc { font-size: 0.85rem; color: var(--text-muted); }

/* Community Links */
.community-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 40px; }
.community-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; text-align: center; transition: all 0.3s; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.community-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.community-card .comm-icon { font-size: 2rem; }
.community-card h4 { font-size: 1rem; color: var(--text-heading); }
.community-card p { font-size: 0.82rem; color: var(--text-muted); flex: 1; }
.community-card .comm-link { padding: 6px 18px; border: 1px solid var(--accent); border-radius: 20px; color: var(--accent-light); font-size: 0.85rem; text-decoration: none; transition: all 0.2s; }
.community-card .comm-link:hover { background: var(--accent); color: #fff; }

@media (max-width: 768px) {
  .showcase-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .layout-grid { grid-template-columns: 1fr; }
}


/* Blog listing */
.blog-list { display: flex; flex-direction: column; gap: 20px; max-width: 800px; margin: 0 auto; }
.blog-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 24px; transition: all 0.25s; text-decoration: none; color: var(--text); display: block; }
.blog-card:hover { background: var(--bg-card-hover); border-color: var(--border); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.blog-card h3 { font-size: 1.2rem; margin: 0 0 8px; color: var(--text-heading); }
.blog-card p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.5; margin: 0; }
.blog-date { font-size: 0.8rem; color: var(--accent-light); font-weight: 600; margin-top: 8px; }
.blog-card .read-more { display: inline-block; margin-top: 10px; color: var(--accent-light); font-weight: 600; font-size: 0.9rem; }
.blog-card .read-more:hover { text-decoration: underline; }