:root{--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;background-color:#faf7f2;color:#2f2e2c;margin:0;padding:0}.brand-serif,h1,h2,h3,h4,h5,h6{font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,Georgia,serif}.fade-in{animation:fadeIn .3s ease forwards}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.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}:focus-visible{outline:2px solid #b33a3a;outline-offset:2px}.modal-overlay.hidden{display:none!important}.ee-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:10px 20px;border-radius:40px;background:#2f2e2c;color:#fff;font-size:.875rem;z-index:9999;opacity:0;transition:opacity .25s;pointer-events:none}.ee-toast.is-visible{opacity:1}.category-badge,.category-tag{--category-color:#7d6b5d;--category-soft:#f4f0eb;--category-text:#ffffff;--category-border:#cfc3b8}.category-badge[data-category=all],.category-tag[data-category=all]{--category-color:#b33a3a;--category-soft:#f9eaea;--category-text:#ffffff;--category-border:#d98f8f}.category-badge[data-category=Doujinshi],.category-tag[data-category=Doujinshi]{--category-color:#e86f6f;--category-soft:#fceded;--category-text:#ffffff;--category-border:#f0a7a7}.category-badge[data-category=Manga],.category-tag[data-category=Manga]{--category-color:#f09f6f;--category-soft:#fff1e8;--category-text:#4b2d1d;--category-border:#f4bd9b}.category-badge[data-category="Artist CG"],.category-tag[data-category="Artist CG"]{--category-color:#f5c06f;--category-soft:#fff7e6;--category-text:#4a3513;--category-border:#f7d59f}.category-badge[data-category="Game CG"],.category-tag[data-category="Game CG"]{--category-color:#9fcf6f;--category-soft:#f0f8e8;--category-text:#294414;--category-border:#bfdf9e}.category-badge[data-category=Western],.category-tag[data-category=Western]{--category-color:#6fcfa5;--category-soft:#eaf8f2;--category-text:#173f31;--category-border:#9fe0c5}.category-badge[data-category=Non-H],.category-tag[data-category=Non-H]{--category-color:#6fb8cf;--category-soft:#eaf5f8;--category-text:#173945;--category-border:#9ed0df}.category-badge[data-category="Image Set"],.category-tag[data-category="Image Set"]{--category-color:#6f8fcf;--category-soft:#edf1fa;--category-text:#ffffff;--category-border:#9eb3df}.category-badge[data-category=Cosplay],.category-tag[data-category=Cosplay]{--category-color:#9f6fcf;--category-soft:#f3edfa;--category-text:#ffffff;--category-border:#bea0df}.category-badge[data-category="Asian Porn"],.category-tag[data-category="Asian Porn"]{--category-color:#cf6f9f;--category-soft:#faedf4;--category-text:#ffffff;--category-border:#dfa0bf}.category-badge[data-category=Misc],.category-tag[data-category=Misc]{--category-color:#cf9f6f;--category-soft:#f8f1ea;--category-text:#49321d;--category-border:#dfbf9f}.category-tag{position:relative;background-color:var(--category-soft);color:var(--category-color);border:1px solid var(--category-border);border-radius:9999px!important;box-shadow:0 1px 2px rgba(47,46,44,.04);cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}.category-tag:hover:not(.active){transform:translateY(-1px);box-shadow:0 3px 8px rgba(47,46,44,.1)}.category-tag.active{background-color:var(--category-color);color:var(--category-text);border-color:var(--category-color);font-weight:700;box-shadow:0 0 0 2px #faf7f2,0 0 0 4px var(--category-color),0 4px 10px rgba(47,46,44,.16);transform:translateY(-1px)}.category-tag.active::before{content:"✓";margin-right:.35rem;font-size:.72rem;font-weight:800}.category-tag:focus-visible{outline:3px solid rgba(179,58,58,.25);outline-offset:2px}.category-badge{display:inline-flex;align-items:center;width:fit-content;max-width:100%;background-color:var(--category-color);color:var(--category-text);border:1px solid var(--category-color);border-radius:9999px!important;padding:.18rem .55rem;font-size:.65rem;font-weight:600;line-height:1.2;white-space:nowrap}.category-card{transition:opacity .2s ease,transform .2s ease,box-shadow .2s ease}.sort-btn{background-color:#fff;color:#7d6b5d;border:1px solid #e8e0d5;border-radius:8px;font-weight:500;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}.sort-btn:hover:not(.active){background-color:#f5f0ea;color:#2f2e2c;transform:translateY(-1px)}.sort-btn.active{background-color:#b33a3a;color:#fff;border-color:#b33a3a;font-weight:700;box-shadow:0 2px 7px rgba(179,58,58,.22)}.sort-btn.active::before{content:"✓";margin-right:.3rem;font-size:.72rem}.sort-btn:focus-visible{outline:3px solid rgba(179,58,58,.25);outline-offset:2px}.pagination .active{background-color:#b33a3a;color:#fff;border-color:#b33a3a}.pagination a,.pagination button,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;border:1px solid #e8e0d5;background-color:#fff;border-radius:6px;transition:all .2s;padding-left:.75rem;padding-right:.75rem}.pagination a:hover,.pagination button:hover:not(:disabled){background-color:#e8e0d5}.pagination button:disabled{opacity:.5;cursor:not-allowed}.page-jump-input{width:60px;text-align:center;border:1px solid #e8e0d5;border-radius:6px;padding:.3rem}

/* ========================================================
   HEADER & NAVIGATION REDESIGN (DESKTOP & MOBILE)
   ======================================================== */
.eb-header { border-bottom: 1px solid #e8e0d5; background-color: #faf7f2; position: relative; z-index: 50; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
.eb-header-inner { max-width: 1400px; margin-left: auto; margin-right: auto; padding: 0 1rem; }
@media (min-width: 640px) { .eb-header-inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .eb-header-inner { padding: 0 2rem; } }
.eb-header-row { display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding: 0.5rem 0; gap: 0.75rem; }
.eb-brand-link { display: flex; align-items: baseline; text-decoration: none; flex-shrink: 0; color: #2f2e2c; transition: color 0.15s ease; }
.eb-brand-link:hover { color: #b33a3a; }
.eb-brand-title { font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, Georgia, serif; font-size: 1.5rem; font-weight: 800; letter-spacing: 0.025em; line-height: 1.2; }
@media (min-width: 768px) { .eb-brand-title { font-size: 1.75rem; } }
.eb-brand-sub { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 0.75rem; font-weight: 400; color: #8a7a6e; margin-left: 0.5rem; display: none; white-space: nowrap; }
@media (min-width: 1200px) { .eb-brand-sub { display: inline-block; } }
.eb-desktop-nav { display: none; align-items: center; flex: 1; margin: 0 0.5rem 0 1rem; }
@media (min-width: 960px) { .eb-desktop-nav { display: flex; } }
.eb-nav-list { display: flex; align-items: center; gap: 0.2rem; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; }
@media (min-width: 1200px) { .eb-nav-list { gap: 0.45rem; } }
.eb-nav-item { display: flex; align-items: center; }
.eb-nav-link { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.6rem; border-radius: 6px; font-size: 0.875rem; font-weight: 600; color: #3d332a; text-decoration: none; white-space: nowrap; transition: all 0.15s ease; }
@media (min-width: 1200px) { .eb-nav-link { padding: 0.5rem 0.8rem; font-size: 0.9rem; gap: 0.4rem; } }
.eb-nav-link svg { width: 15px !important; height: 15px !important; color: #8a7a6e; transition: color 0.15s ease; flex-shrink: 0; }
.eb-nav-link:hover { color: #b33a3a; background-color: rgba(0, 0, 0, 0.04); }
.eb-nav-link:hover svg { color: #b33a3a; }
.eb-nav-link.active { color: #b33a3a; background-color: rgba(179, 58, 58, 0.08); font-weight: 700; }
.eb-nav-link.active svg { color: #b33a3a; }
.eb-nav-divider { width: 1px; height: 18px; background-color: #dfd6cb; margin: 0 0.35rem; flex-shrink: 0; }
@media (min-width: 1200px) { .eb-nav-divider { margin: 0 0.6rem; } }
.eb-auth-group { display: flex; align-items: center; gap: 0.45rem; margin-left: auto; flex-shrink: 0; }
.eb-auth-login-link { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.42rem 0.8rem; border: 1px solid #dcd4c8; background-color: #faf7f2; border-radius: 6px; font-size: 0.8125rem; font-weight: 600; color: #4a3b32; text-decoration: none; white-space: nowrap; transition: all 0.15s ease; }
.eb-auth-login-link svg { width: 14px !important; height: 14px !important; color: #7d6b5d; flex-shrink: 0; }
.eb-auth-login-link:hover { color: #b33a3a; border-color: #b33a3a; background-color: #f7f1e9; }
.eb-auth-login-link:hover svg { color: #b33a3a; }
.eb-auth-register-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.42rem 0.9rem; border: 1px solid #b33a3a; border-radius: 6px; font-size: 0.8125rem; font-weight: 700; color: #ffffff !important; background-color: #b33a3a; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 3px rgba(179, 58, 58, 0.3); transition: all 0.15s ease; }
.eb-auth-register-btn svg { width: 14px !important; height: 14px !important; color: #ffffff; flex-shrink: 0; }
.eb-auth-register-btn:hover { background-color: #992f2f; border-color: #992f2f; box-shadow: 0 2px 6px rgba(179, 58, 58, 0.4); transform: translateY(-0.5px); }
.eb-auth-user-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.42rem 0.85rem; border-radius: 6px; font-size: 0.8125rem; font-weight: 600; color: #3d332a; background-color: #f2ece4; border: 1px solid #e2d9cd; text-decoration: none; white-space: nowrap; transition: all 0.15s ease; }
.eb-auth-user-btn svg { width: 14px !important; height: 14px !important; color: #b33a3a; flex-shrink: 0; }
.eb-auth-user-btn:hover { background-color: #ede4d9; color: #b33a3a; }
.eb-auth-logout-btn { background: none; border: none; padding: 0.42rem 0.6rem; font-size: 0.8125rem; color: #7d6b5d; cursor: pointer; white-space: nowrap; transition: color 0.15s ease; }
.eb-auth-logout-btn:hover { color: #b33a3a; }
.eb-mobile-trigger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 1.5rem; line-height: 1; color: #2f2e2c; background: #faf7f2; border: 1px solid #e8e0d5; border-radius: 8px; cursor: pointer; transition: all 0.15s ease; }
.eb-mobile-trigger:hover { background-color: #f2ece4; color: #b33a3a; }
@media (min-width: 960px) { .eb-mobile-trigger { display: none !important; } .mobile-menu, #mobile-menu { display: none !important; } }
#mobile-menu { display: none; border-top: 1px solid #e8e0d5; background-color: #faf7f2; padding: 0.85rem 0 1.25rem; }
#mobile-menu.active, #mobile-menu.is-open { display: block !important; }
.eb-mobile-card { display: flex; flex-direction: column; gap: 0.85rem; }
.eb-mobile-primary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.eb-mobile-primary-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.65rem 0.75rem; border-radius: 8px; background-color: #ffffff; border: 1px solid #e8e0d5; font-size: 0.875rem; font-weight: 600; color: #2f2e2c; text-decoration: none; transition: all 0.15s ease; }
.eb-mobile-primary-btn svg { width: 16px !important; height: 16px !important; color: #8a7a6e; flex-shrink: 0; }
.eb-mobile-primary-btn:hover, .eb-mobile-primary-btn.active { border-color: #b33a3a; color: #b33a3a; background-color: rgba(179, 58, 58, 0.04); }
.eb-mobile-primary-btn.active svg { color: #b33a3a; }
.eb-mobile-section-divider { border-top: 1px solid #ede5da; padding-top: 0.75rem; }
.eb-mobile-dir-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; padding: 0 4px; }
.eb-mobile-dir-title { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #8a7a6e; }
.eb-mobile-dir-title svg { width: 13px !important; height: 13px !important; color: #a19082; }
.eb-mobile-dir-sub { font-size: 10px; color: #a99c90; }
.eb-mobile-dir-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
@media (min-width: 480px) { .eb-mobile-dir-grid { grid-template-columns: repeat(6, 1fr); } }
.eb-mobile-dir-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.6rem 0.35rem; border-radius: 8px; background-color: #ffffff; border: 1px solid #e8e0d5; text-decoration: none; color: #4a3b32; font-size: 0.8125rem; font-weight: 600; gap: 0.35rem; transition: all 0.15s ease; }
.eb-mobile-dir-tile svg { width: 18px !important; height: 18px !important; color: #8a7a6e; transition: color 0.15s ease; }
.eb-mobile-dir-tile:hover { border-color: #b33a3a; color: #b33a3a; }
.eb-mobile-dir-tile:hover svg { color: #b33a3a; }
.eb-mobile-dir-tile.active { border-color: #b33a3a; color: #b33a3a; font-weight: 700; background-color: rgba(179, 58, 58, 0.06); }
.eb-mobile-dir-tile.active svg { color: #b33a3a; }
.eb-mobile-auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.eb-mobile-login-btn { display: flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.65rem 0.75rem; border-radius: 8px; background-color: #ffffff; border: 1px solid #e8e0d5; font-size: 0.8125rem; font-weight: 600; color: #4a3b32; text-decoration: none; transition: all 0.15s ease; }
.eb-mobile-login-btn svg { width: 14px !important; height: 14px !important; color: #7d6b5d; }
.eb-mobile-login-btn:hover { border-color: #b33a3a; color: #b33a3a; }
.eb-mobile-register-btn { display: flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.65rem 0.75rem; border-radius: 8px; background-color: #b33a3a; border: 1px solid #b33a3a; font-size: 0.8125rem; font-weight: 700; color: #ffffff !important; text-decoration: none; box-shadow: 0 1px 3px rgba(179, 58, 58, 0.3); transition: all 0.15s ease; }
.eb-mobile-register-btn svg { width: 14px !important; height: 14px !important; color: #ffffff; }
.eb-mobile-register-btn:hover { background-color: #992f2f; }
.eb-mobile-user-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.eb-mobile-user-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.65rem 0.75rem; border-radius: 8px; background-color: #ffffff; border: 1px solid #e8e0d5; font-size: 0.8125rem; font-weight: 600; color: #2f2e2c; text-decoration: none; transition: all 0.15s ease; }
.eb-mobile-user-btn svg { width: 14px !important; height: 14px !important; color: #b33a3a; }
.eb-mobile-logout-btn { padding: 0.65rem 0.85rem; border-radius: 8px; font-size: 0.75rem; color: #7d6b5d; background: none; border: 1px solid transparent; cursor: pointer; transition: all 0.15s ease; }
.eb-mobile-logout-btn:hover { color: #b33a3a; border-color: #e8e0d5; background-color: #faf7f2; }

/* ==========================================================================
   DIRECTORY PAGES (Tags, Artists, Characters, Parodies, Groups, Languages)
   ========================================================================== */
.directory-main-container { width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; padding: 1.25rem 1rem 2.5rem; box-sizing: border-box; }
@media (min-width: 640px) { .directory-main-container { padding: 1.5rem 1.5rem 3rem; } }
@media (min-width: 1024px) { .directory-main-container { padding: 1.75rem 2rem 3.5rem; } }
.breadcrumb-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.8125rem; color: #7d6b5d; margin-bottom: 1.25rem; }
.breadcrumb-nav a { color: #7d6b5d; text-decoration: none; transition: color 0.15s ease; }
.breadcrumb-nav a:hover { color: #b33a3a; }
.breadcrumb-nav .separator { color: #c0b5aa; font-size: 0.75rem; }
.breadcrumb-nav .current { color: #2f2e2c; font-weight: 600; }
.page-hero-card { background: #ffffff; border: 1px solid #e8e0d5; border-radius: 14px; padding: 1.5rem 1.75rem; margin-bottom: 1.25rem; box-shadow: 0 2px 6px rgba(0,0,0,0.03); }
.page-hero-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-bottom: 0.85rem; border-bottom: 1px solid #f2ede6; }
.hero-title-group { display: flex; align-items: center; gap: 0.85rem; }
.hero-icon-bubble { width: 48px; height: 48px; border-radius: 12px; background: #faf7f2; border: 1px solid #e8e0d5; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #b33a3a; flex-shrink: 0; box-shadow: inset 0 1px 2px rgba(0,0,0,0.04); }
.hero-title { font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, Georgia, serif; font-size: 1.65rem; font-weight: 800; color: #2f2e2c; margin: 0; line-height: 1.2; letter-spacing: 0.02em; }
.hero-counter-badge { display: inline-flex; align-items: center; gap: 0.45rem; background: #f4ece4; color: #b33a3a; border: 1px solid #e8dfd5; font-size: 0.8125rem; font-weight: 600; padding: 0.35rem 0.9rem; border-radius: 9999px; white-space: nowrap; flex-shrink: 0; }
.hero-counter-badge svg { width: 14px !important; height: 14px !important; color: #b33a3a; flex-shrink: 0; }
.hero-description { color: #7d6b5d; font-size: 0.875rem; margin: 0.75rem 0 0 0; line-height: 1.6; }
.filter-panel { background: #ffffff; border: 1px solid #e8e0d5; border-radius: 14px; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; box-shadow: 0 2px 6px rgba(0,0,0,0.03); }
.filter-top-row { display: flex; align-items: center; gap: 0.65rem; width: 100%; }
.search-input-wrap { position: relative; flex: 1; min-width: 0; }
.search-input-wrap .search-prefix { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #9b8f84; font-size: 0.9rem; pointer-events: none; }
.search-input-wrap input.form-control { width: 100%; height: 42px; box-sizing: border-box; background-color: #faf7f2; border: 1px solid #e8e0d5; color: #2f2e2c; border-radius: 8px; padding: 0.5rem 2.4rem 0.5rem 2.4rem; font-size: 0.9rem; font-family: inherit; transition: all 0.2s ease; }
.search-input-wrap input.form-control:focus { outline: none; border-color: #b33a3a; background-color: #ffffff; box-shadow: 0 0 0 3px rgba(179,58,58,0.15); }
.clear-search-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #9b8f84; cursor: pointer; font-size: 0.875rem; padding: 4px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: color 0.15s ease; }
.clear-search-btn:hover { color: #b33a3a; }
.btn-search-submit { height: 42px; padding: 0 1.25rem; background-color: #b33a3a; color: #ffffff; font-size: 0.875rem; font-weight: 700; border: none; border-radius: 8px; display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; white-space: nowrap; flex-shrink: 0; box-shadow: 0 1px 3px rgba(179,58,58,0.3); transition: all 0.15s ease; }
.btn-search-submit:hover { background-color: #992f2f; box-shadow: 0 2px 6px rgba(179,58,58,0.4); transform: translateY(-0.5px); }
.filter-bottom-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid #f2ede6; }
.initial-filter-section { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.initial-filter-label { font-size: 0.8125rem; font-weight: 600; color: #7d6b5d; margin-right: 0.2rem; }
.initial-buttons-group { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.btn-initial { display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem 0.65rem; border-radius: 6px; font-size: 0.8125rem; font-weight: 500; background-color: #f4ece4; color: #7d6b5d; text-decoration: none; border: 1px solid transparent; transition: all 0.15s ease; white-space: nowrap; }
.btn-initial:hover { background-color: #e8dfd5; color: #2f2e2c; }
.btn-initial.active { background-color: #b33a3a; color: #ffffff; font-weight: 700; box-shadow: 0 1px 3px rgba(179,58,58,0.3); }
.sort-control-group { display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0; margin-left: auto; }
.sort-label { font-size: 0.8125rem; font-weight: 600; color: #7d6b5d; }
.sort-select { height: 36px; padding: 0.35rem 1.8rem 0.35rem 0.75rem; background-color: #faf7f2; border: 1px solid #e8e0d5; border-radius: 6px; font-size: 0.8125rem; font-weight: 500; color: #2f2e2c; cursor: pointer; transition: all 0.15s ease; appearance: auto; }
.sort-select:focus { outline: none; border-color: #b33a3a; background-color: #ffffff; }
.filter-chips-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed #e8e0d5; flex-wrap: wrap; font-size: 0.8125rem; }
.filter-tag-chip { display: inline-flex; align-items: center; padding: 0.25rem 0.65rem; border-radius: 9999px; background-color: #f2ece4; color: #4a3b32; font-weight: 600; border: 1px solid #e2d9cd; }
.btn-clear-filters { color: #b33a3a; font-weight: 600; text-decoration: none; margin-left: 0.25rem; transition: all 0.15s ease; }
.btn-clear-filters:hover { text-decoration: underline; color: #992f2f; }
.results-meta-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.85rem; font-size: 0.8125rem; color: #7d6b5d; padding: 0 0.25rem; }
.results-meta-row strong { color: #2f2e2c; }
.directory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 2rem; }
@media (min-width: 1280px) { .directory-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
@media (max-width: 900px) { .directory-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (max-width: 560px) { .directory-grid { grid-template-columns: 1fr; gap: 8px; } }
.directory-card { display: flex; justify-content: space-between; align-items: center; background: #ffffff; border: 1px solid #e8e0d5; border-radius: 10px; padding: 0.8rem 1rem; text-decoration: none; transition: all 0.18s ease; gap: 0.75rem; min-height: 60px; box-sizing: border-box; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
.directory-card:hover { border-color: #b33a3a; box-shadow: 0 4px 12px rgba(179, 58, 58, 0.1); transform: translateY(-1.5px); }
.card-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.card-name { color: #2f2e2c; font-weight: 600; font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.15s ease; }
.directory-card:hover .card-name { color: #b33a3a; }
.card-alias { color: #8a7a6e; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.card-meta { display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0; }
.count-pill { background: #f4ece4; color: #b33a3a; border: 1px solid #e8dfd5; border-radius: 9999px; padding: 0.22rem 0.6rem; font-size: 0.78125rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; transition: all 0.15s ease; }
.count-pill svg { width: 12px !important; height: 12px !important; color: inherit; flex-shrink: 0; }
.directory-card:hover .count-pill { background: #b33a3a; color: #ffffff; border-color: #b33a3a; }
.card-arrow { width: 14px !important; height: 14px !important; color: #c0b5aa; transition: all 0.15s ease; flex-shrink: 0; }
.directory-card:hover .card-arrow { color: #b33a3a; transform: translateX(2px); }
.empty-state-box { background: #ffffff; border: 1px solid #e8e0d5; border-radius: 14px; padding: 3rem 1.5rem; text-align: center; margin-bottom: 2rem; color: #7d6b5d; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
.empty-icon-wrap { font-size: 2.5rem; margin-bottom: 0.75rem; }
.empty-title { font-size: 1.15rem; font-weight: 700; color: #2f2e2c; margin: 0 0 0.5rem 0; }
.empty-desc { font-size: 0.875rem; max-width: 480px; margin: 0 auto 1.25rem auto; line-height: 1.6; }
.btn-empty-reset { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 1.25rem; background-color: #b33a3a; color: #ffffff !important; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; text-decoration: none; box-shadow: 0 1px 3px rgba(179,58,58,0.3); transition: all 0.15s ease; }
.btn-empty-reset:hover { background-color: #992f2f; }
.directory-help-box { background: #fcf8f2; border: 1px solid #e8e0d5; border-radius: 10px; padding: 1rem 1.25rem; margin-top: 1.5rem; margin-bottom: 2rem; display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.85rem; color: #7d6b5d; line-height: 1.6; }
.directory-help-box svg { width: 18px !important; height: 18px !important; color: #b33a3a; flex-shrink: 0; margin-top: 2px; }
.directory-help-box p { margin: 0; }
@media (max-width: 768px) {
    .page-hero-card { padding: 1.15rem 1rem; }
    .hero-title { font-size: 1.35rem; }
    .hero-counter-badge { font-size: 0.78125rem; padding: 0.3rem 0.75rem; }
    .filter-panel { padding: 1rem 0.85rem; }
    .filter-bottom-row { flex-direction: column; align-items: stretch; gap: 0.75rem; }
    .initial-filter-section { flex-direction: column; align-items: flex-start; gap: 0.45rem; width: 100%; }
    .initial-buttons-group { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; width: 100%; }
    .btn-initial { width: 100%; padding: 0.4rem 0; text-align: center; box-sizing: border-box; }
    .sort-control-group { width: 100%; justify-content: space-between; margin-left: 0; padding-top: 0.65rem; border-top: 1px dashed #e8e0d5; }
    .sort-select { flex: 1; max-width: 220px; }
}
@media (max-width: 480px) {
    .btn-search-text { display: none; }
    .btn-search-submit { padding: 0 0.85rem; }
}