/* YourMCBrowser — the warm woodland home for the original mascot.
   Presentation only: application visibility, state and controls stay in the
   existing stylesheets. Load this file after those stylesheets. */
:root {
  --night: #101d17;
  --moss: #94cf78;
  --moss-bright: #c5ee9b;
  --mist: #ecebde;
  --paper: #fff8e9;
  --ink: #20372b;
  --brand-forest: #101d17;
  --brand-panel: #1b2c22;
  --brand-panel-soft: #22362a;
  --brand-inset: #142219;
  --brand-cream: #fff6df;
  --brand-muted: #b7c2ac;
  --brand-border: #bddba52b;
  --brand-gold: #ffd16f;
  --brand-gold-light: #ffe29d;
  --brand-sky: #82d8eb;
}

body {
  background: var(--brand-forest);
  color: var(--brand-cream);
  -webkit-font-smoothing: antialiased;
}

::selection { background: #ffd16f; color: #20372b; }

.brand,
.directory-home .brand,
.server-detail-body .brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 12px;
  line-height: 1;
  letter-spacing: -.035em;
}

.brand-logo {
  display: block;
  width: 94px;
  height: 88px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 7px #0005);
}

.brand-name { color: var(--brand-cream); font: 800 17px/1.1 ui-sans-serif, system-ui, sans-serif; }
.brand-name span { color: var(--brand-gold); }
.brand:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: 5px; border-radius: 10px; }

.directory-home {
  --directory-background: var(--brand-forest);
  --directory-panel: var(--brand-panel);
  --directory-border: var(--brand-border);
  --directory-text: var(--brand-cream);
  --directory-muted: var(--brand-muted);
  --directory-accent: var(--moss-bright);
  --directory-width: 1160px;
  background: var(--brand-forest);
}

.directory-home .hero {
  min-height: 610px;
  background: var(--brand-forest);
}

.directory-home .hero-image { object-position: center 48%; }
.directory-home .hero-shade {
  background: linear-gradient(90deg, #101d17ed 0%, #101d17dc 29%, #101d179e 53%, #17281937 76%, #17281915), linear-gradient(180deg, #14241aa8, transparent 35%, #101d1799 94%);
}
.directory-home .hero::before { background: none; }
.directory-home .hero::after { height: 150px; background: linear-gradient(transparent, var(--brand-forest)); }

.directory-home .hero header {
  position: relative;
  z-index: 6;
  height: 104px;
  border-bottom-color: #fff1cd25;
}

.directory-home #siteNav { gap: 26px; }
.directory-home #siteNav a { color: #edeeda; font-size: 13px; font-weight: 650; }
.directory-home #siteNav a:hover { color: var(--brand-gold-light); }
.nav-login,
.directory-home .nav-login {
  border: 1px solid #f6e7ba49;
  border-radius: 12px;
  color: var(--brand-cream);
  background: #fff3cb10;
  box-shadow: inset 0 1px #fff9df0a;
}
.directory-home .nav-login:hover { background: #fff3cb21; border-color: #ffd16f85; }

.directory-home .hero-content {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  align-items: center;
  gap: 30px;
  padding: 36px 0 78px;
}
.hero-copy-group { min-width: 0; position: relative; z-index: 1; }
.hero-brand-art {
  display: block;
  width: min(100%, 408px);
  height: auto;
  max-height: 440px;
  object-fit: contain;
  justify-self: center;
  align-self: center;
  filter: drop-shadow(0 22px 26px #07140975) drop-shadow(0 0 38px #ffe5a325);
  transform: rotate(-2deg);
  user-select: none;
}

.directory-home .hero-directory-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 18px;
  border: 1px solid #f2ce7d42;
  border-radius: 999px;
  background: #102419b0;
  color: #f9dda0;
  font-size: 10px;
  letter-spacing: .12em;
  box-shadow: inset 0 1px #fff2ce0b;
}
.directory-home .hero-directory-kicker i { margin-right: 0; background: var(--brand-gold); border-radius: 2px; }
.directory-home .hero-server-logo {
  max-width: 650px;
  color: var(--brand-cream);
  font-size: clamp(44px, 4.7vw, 65px);
  font-weight: 850;
  letter-spacing: -.052em;
  line-height: 1.045;
  text-wrap: balance;
  text-shadow: 0 3px 22px #08150ab0;
}
.directory-home .hero-server-logo strong { color: var(--brand-gold); }
.directory-home .hero-site-name {
  display: block;
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1.12;
  letter-spacing: -.055em;
}
.directory-home .hero-server-logo > .hero-browser-purpose {
  display: block;
  margin-top: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  -webkit-text-stroke: 0;
  text-shadow: inherit;
}
.directory-home .hero .hero-copy {
  max-width: 560px;
  margin: 22px 0 25px;
  color: #dce4cd;
  font-size: 16px;
  line-height: 1.7;
}
.directory-home .hero-actions { flex-wrap: wrap; gap: 12px 20px; }
.directory-home .hero-guide-link { color: #e5ebd6; font-size: 12px; }
.directory-home .hero-guide-link:hover { color: var(--brand-gold-light); }
.directory-home .hero-banner-link {
  border-color: #86d4da50;
  border-radius: 11px;
  background: #152c2899;
  color: #b3e9ed;
  font-size: 12px;
}
.directory-home .hero-banner-link:hover { border-color: #9fdce6; background: #1d3b32; color: #d5f7f4; }
.directory-home .hero-meta { flex-wrap: wrap; gap: 10px 19px; margin-top: 24px; color: #d3ddc4; font-size: 11px; }
.directory-home .hero-meta span::before { color: var(--brand-gold); }
.site-launch-note { border-color: #e1d29b35; border-radius: 12px; background: #14271dcc; color: #cdd9bc; padding: 5px 12px; font-size: 11px; }
.site-launch-badge { color: var(--brand-gold); }
.site-launch-note a { color: #efeed9; }

.button,
.nav-cta { border-radius: 11px; }
.primary,
.directory-home .button.primary,
.directory-home .directory-controls .discover-bar button,
.server-detail-body .server-detail-vote-button {
  border: 1px solid #ffe3a2;
  border-radius: 11px;
  background: linear-gradient(180deg, #ffdb87, #f4bc53);
  color: #28321b;
  box-shadow: 0 3px 0 #a36d2b, 0 8px 18px #0002, inset 0 1px #fff4d9b3;
  font-weight: 800;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.primary:hover,
.directory-home .button.primary:hover,
.directory-home .directory-controls .discover-bar button:hover,
.server-detail-body .server-detail-vote-button:hover {
  background: linear-gradient(180deg, #ffe7a4, #ffd078);
  box-shadow: 0 3px 0 #a36d2b, 0 10px 23px #0003, inset 0 1px #fff8e5;
  transform: translateY(-1px);
}
.button.primary:active { transform: translateY(1px); box-shadow: 0 1px 0 #a36d2b; }
.button:disabled { transform: none; }
.secondary { border-color: var(--brand-border); border-radius: 11px; background: #1b2f23; color: var(--brand-cream); }

.directory-home .servers {
  background: radial-gradient(ellipse at 95% 20%, #243d233e, transparent 58%), var(--brand-forest);
  padding-bottom: 74px;
}
.directory-home .directory-controls {
  margin-top: -30px;
  padding: 25px;
  border: 1px solid #d3e3a940;
  border-radius: 22px;
  background: linear-gradient(145deg, #253a2df5, #1a2b21fa);
  box-shadow: 0 18px 50px #07120d4d, inset 0 1px #fff5d013;
}
.directory-home .directory-heading { margin-bottom: 20px; }
.directory-home .directory-heading h2 { color: var(--brand-cream); font-weight: 750; font-size: 26px; letter-spacing: -.035em; }
.directory-home .directory-heading-actions > span { color: #bdcbae; }
.directory-home .directory-controls .discover-bar {
  border-color: #bfce9250;
  border-radius: 13px;
  background: #132219;
  box-shadow: inset 0 2px 6px #0002;
}
.directory-home .discover-bar:focus-within { border-color: var(--brand-gold); box-shadow: 0 0 0 3px #ffd16f18; }
.directory-home .discover-bar label { color: #ced9bd; }
.directory-home .directory-search-icon { color: var(--brand-gold); }
.directory-home .discover-bar input { color: var(--brand-cream); }
.directory-home .discover-bar input::placeholder { color: #9cad91; }
.directory-home .directory-control-label strong { color: #c1ceb3; }
.directory-home .directory-controls .filters button,
.directory-home .directory-controls .mode-filter-toggle,
.directory-home .directory-controls .mode-filter-options button {
  border-color: #bbd79b35;
  border-radius: 10px !important;
  background: #16281d;
  color: #d5dfc5;
}
.directory-home .directory-controls .filters button:hover,
.directory-home .directory-controls .mode-filter-options button:hover { border-color: #c5ee9b80; background: #2a4028; }
.directory-home .directory-controls .filters button.active,
.directory-home .directory-controls .mode-filter-options button.active {
  border-color: #c5ee9b7d;
  background: #c5ee9b;
  color: #213519;
  box-shadow: inset 0 1px #f1ffdc;
}
.directory-home .directory-controls .mode-filter-toggle { border-color: #c5ee9b65; color: #e5f1d2; }
.directory-home .directory-controls .mode-filter-options {
  border-color: #d0e4b64a;
  border-radius: 15px;
  background: #213528;
  box-shadow: 0 20px 50px #05100cb3, inset 0 1px #fff3cb0d;
}
.directory-home .directory-controls .mode-filter-options h3 { color: #d3dfc3; }
.directory-home .directory-controls .mode-all-option small { color: inherit; }
.directory-home .server-card {
  border-color: #b2c99330;
  border-radius: 18px;
  background: linear-gradient(125deg, #203328, #192a20);
  box-shadow: 0 8px 28px #08120c38, inset 0 1px #fff5de0a;
  color: var(--brand-cream);
}
.directory-home .server-card:hover,
.directory-home .server-card:focus-within { border-color: #e0c97978; box-shadow: 0 12px 32px #06140c4d; }
.directory-home .server-card h3 { color: #fff3d8; }
.directory-home .server-card h3 a:hover { color: var(--brand-gold); }
.directory-home .server-card .server-rank { color: var(--brand-gold); }
.directory-home .server-card .tag { border-color: #9ed69c35; background: #7fba8310; color: #d1e6c1; border-radius: 7px; }
.directory-home .server-card .mode-tags span { border-color: #c8d5b12b; border-radius: 6px; background: #10221999; color: #bacdb1; }
.directory-home .server-summary-link { color: #9ce2e9; }
.directory-home .server-summary-link:hover { background: #80d5e010; color: #c9f3f4; }
.directory-home .server-card-info { border-top-color: #c8d5b123; }
.directory-home .server-primary-address { border-color: #c8d5b126; border-radius: 10px; background: #101f16b3; }
.directory-home .server-primary-address > span { color: #a8bc9a; }
.directory-home .server-primary-address code { color: #e4eacb; }
.directory-home .server-card .copy-server-ip { border-color: #9cdad94a; border-radius: 8px; background: #8dd3de0c; color: #a6e4e7; }
.directory-home .server-card .copy-server-ip:hover:not(:disabled) { border-color: #a6e4e7; background: #8dd3de20; }
.directory-home .server-vote-button { border-color: #e4c87566; border-radius: 9px; background: #ffd16f16; color: #ffe1a1; }
.directory-home .server-vote-button:hover { background: #ffd16f28; border-color: #f8d98c; }
.directory-home .server-banner-link.is-placeholder .server-banner-placeholder {
  border-color: #abc58d42;
  border-radius: 11px;
  background: radial-gradient(ellipse at 85% 10%, #405b2d55, transparent 65%), linear-gradient(115deg, #293f2a, #172b1f);
}
.directory-home .server-banner-placeholder b { color: #fff1d1; }
.directory-home .server-banner-placeholder small { color: #c6d8ac; }
.directory-home .server-card-visual { border-radius: 11px; }
.directory-home .server-page-button { border-color: #c7d2a945; border-radius: 10px; background: #253a2b; color: #ecedd3; }
.directory-home .server-page-button:hover:not(:disabled) { border-color: #ffd16f8c; background: #31462f; }
.directory-home .empty { border-color: #c4d8a845; border-radius: 18px; background: #21362899; color: #bac8ac; }
.directory-home .empty strong { color: var(--brand-cream); }
.directory-home .listing-note { color: #a8b79c; }

.ymb-save-server,
.ymb-saved-open { border-color: #d6ce9461; border-radius: 10px; background: #edcf8710; color: #e5e3c4; }
.ymb-save-server:hover:not(:disabled),
.ymb-saved-open:hover:not(:disabled) { border-color: #ffd16f91; background: #ffd16f1c; }
.ymb-saved-dialog { border-color: #c4d7a33b; background: #1b2e22; color: var(--brand-cream); }
.ymb-saved-dialog-heading h2 { color: var(--brand-cream); }
.ymb-saved-item { border-color: #c4d7a330; background: #14231a; }
.ymb-saved-dialog button { border-color: #d2d8af49; border-radius: 10px; background: #c7d7950c; color: #e5e8ce; }
.ymb-saved-toast { border-color: #e4cc8490; background: #213725; color: #ffedc3; border-radius: 13px; }

.directory-home .intro {
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid #e3d7b6;
  padding-top: 78px;
  padding-bottom: 78px;
}
.directory-home .intro h2 { color: #253c2b; font-weight: 800; }
.directory-home .intro .kicker { color: #69814c; }
.directory-home .intro .kicker i { background: #7da955; }
.directory-home .intro-copy p { color: #61705a; }
.directory-home .intro-copy a { color: #3f6d46; }
.directory-home .steps { background: #122219; }
.directory-home .steps li > span { width: 40px; height: 40px; padding: 8px 0; border: 1px solid #d1c27d35; border-radius: 11px; background: #e8cd8b0c; text-align: center; color: var(--brand-gold); font-size: 17px; }
.directory-home .steps li b { color: var(--brand-cream); }
.directory-home .join { background: radial-gradient(ellipse at 85% 10%, #44663842, transparent 62%), #263b28; }
.directory-home .banner-promo { background: #17291e; }
.directory-home .banner-promo-sample { border-color: #d4d18b52; border-radius: 16px; box-shadow: 0 12px 35px #07120b66; }
.seo-home-top,
.seo-home-faq { color: var(--brand-cream); }
.seo-faq-grid article,
.seo-ranking-card,
.seo-category-card { background: linear-gradient(135deg, #213529, #19291f); border-color: var(--brand-border); border-radius: 16px; }
.seo-faq-grid h3 { color: #fff0d4; }
.seo-faq-grid p,
.seo-home-top > p,
.seo-home-faq > p { color: var(--brand-muted); }
.seo-home-top a,
.seo-home-faq a { color: #d9e8b0; }
.new-this-week { border-color: #d0d8983f; border-radius: 17px; background: #253928; }
.new-this-week-grid article { background: #16271bbb; border-color: var(--brand-border); border-radius: 10px; }

footer,
.dashboard-footer,
.legal-footer { background: #0d1913; color: #a2b194; border-color: var(--brand-border); }
footer .brand-logo { width: 94px; height: 90px; }
.footer-links a:hover,
.dashboard-footer a:hover,
.legal-footer a:hover { color: var(--brand-gold-light); }

/* Shared pages keep their original structure and responsive control layouts. */
.dashboard-body,
.legal-body,
.guide-body,
.reset-body,
.banner-page {
  background: radial-gradient(ellipse 900px 540px at 88% 0, #425c2930, transparent 75%), var(--brand-forest);
  color: var(--brand-cream);
}
.dashboard-header,
.legal-header,
.banner-header {
  min-height: 104px;
  height: 104px;
  border-bottom: 1px solid #cad6a128;
  background: #0e1c16cc;
}
.dashboard-header nav a,
.dashboard-header nav button { color: #e0e8ce; }
.dashboard-header nav button { border-color: #cfdaa33e; border-radius: 10px; }
.legal-header > a:last-child,
.banner-back { color: #d2ddc0; }
.dashboard-welcome h1,
.account-settings-welcome h1,
.legal-main h1,
.guide-main > h1,
.banner-intro h1 { color: var(--brand-cream); }
.dashboard-welcome { border-bottom-color: var(--brand-border); }
.dashboard-action-choices > button,
.dashboard-form-card,
.dashboard-listings,
.account-settings-card,
.admin-audit-card,
.status-checker-panel,
.guide-card,
.legal-summary li,
.contact-form {
  background: linear-gradient(145deg, #22372a, #182b20);
  border-color: var(--brand-border);
  border-radius: 17px;
  box-shadow: 0 12px 36px #06140b24, inset 0 1px #fff3c90b;
}
.dashboard-action-choices > button:hover,
.dashboard-action-choices > button[aria-pressed="true"] { background: linear-gradient(145deg, #30472c, #213524); border-color: #e3cc797a; }
.dashboard-action-choices > button > span { border-color: #ffd16f55; border-radius: 10px; background: #ffd16f10; color: var(--brand-gold); box-shadow: none; }
.dashboard-form-card .form-section { background: #14251b; border-radius: 12px; box-shadow: inset 0 0 0 1px #c3d4a826; }
.dashboard-form-card input,
.dashboard-form-card select,
.dashboard-form-card textarea,
.status-check-form-grid input,
.status-check-form-grid select { border-color: #c7d7a846; border-radius: 9px; background: #102017; color: #f3f0db; outline-color: var(--brand-gold); }
.dashboard-form-card .form-section input,
.dashboard-form-card .form-section select { min-height: 46px; }
.dashboard-form-card .agreement,
.dashboard-form-card .mode-picker label,
.votifier-setup-guide { border-color: var(--brand-border); border-radius: 10px; background: #102017; }
.dashboard-form-card .mode-picker label:has(input:checked) { background: #34502d; border-color: #c5ee9b88; }
.dashboard-form-card .votifier-settings { background: linear-gradient(145deg, #283f25, #152a1c 75%); }
.dashboard-form-card .dashboard-submit { box-shadow: 0 3px 0 #a36d2b, 0 8px 18px #0002; }
.server-capacity-status { border-radius: 13px; }
.account-settings-icon { border-radius: 12px; }
.legal-main h2,
.guide-main h2,
.guide-main h3 { color: #f8efd6; }
.legal-main p,
.legal-main li,
.guide-main p,
.guide-main li { color: #bfcbb3; }
.legal-main a,
.guide-main a:not(.button) { color: #d7eaa8; }
.legal-summary strong { color: #e7edc9; }
.legal-summary span { color: #b4c2a6; }
.status-check-form-grid label { color: #e8edcf; }
.status-check-result { border-top-color: var(--brand-border); }
.status-check-facts dt { color: #b8c9a6; }
.status-check-facts dd { color: #f3f0d9; }

/* Cream forms remain cream, including readable autofill and close controls. */
dialog,
.reset-card,
.verify-card { border: 1px solid #e4d5ac; border-radius: 20px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 90px #010a08a6, inset 0 1px #fff; }
dialog::backdrop { background: #06150fca; backdrop-filter: blur(7px); }
dialog input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]),
dialog select,
dialog textarea,
.reset-card input[type="text"],
.reset-card input[type="password"] { border-color: #c3c7a8; border-radius: 9px; background: #fffdf7; color: var(--ink); -webkit-text-fill-color: var(--ink); outline-color: #aa7c37; }
dialog .button.secondary { border-color: #b9c19a; background: #e9edd9; color: #40532f; }
dialog .close { border-radius: 9px; color: #5c674e; min-width: 38px; min-height: 38px; }
.reset-shell > .brand { margin-bottom: 24px; }
.verify-body { background: radial-gradient(ellipse at 50% 30%, #48683260, transparent 60%), var(--brand-forest); }
.ymb-saved-dialog { border-color: #c4d7a33b; background: #1b2e22; color: var(--brand-cream); }
.ymb-promotion-dialog { border-color: var(--brand-border); background: var(--brand-panel); color: var(--brand-cream); }

/* Original banner animations and export rendering are untouched. */
.banner-page .banner-intro { background: radial-gradient(ellipse at 80% 0, #b7a14520, transparent 65%); }
.banner-page .banner-studio { border-color: #d0d39c3a; border-radius: 20px; box-shadow: 0 20px 65px #05140b60; }
.banner-page .banner-controls { background: linear-gradient(150deg, #fff9ed, #f1efd9); border-color: #d8d9b7; }
.banner-page .banner-preview-area { background: radial-gradient(ellipse at 100% 0, #58672a40, transparent 65%), linear-gradient(150deg, #213b2b, #14271d); }
.banner-editor-nav a { border-color: #ccd7a142; border-radius: 10px; background: #203527; color: #e4e9cd; }
.banner-editor-nav a:hover { border-color: #eed38770; color: #ffe5b2; }
.banner-template-card { border-color: #c4d7a138; border-radius: 12px; background: linear-gradient(145deg, #243d2c, #172b20); }
.banner-template-card[aria-current="true"] { border-color: #ffd16f; background: linear-gradient(145deg, #3a4828, #25381f); box-shadow: 0 0 0 3px #ffd16f20, 0 12px 28px #020f0899; }
.banner-template-card[aria-current="true"] .banner-template-thumb { box-shadow: 0 0 0 2px #ffd16f, 0 0 18px #ffd16f25; }
.banner-template-selected { background: var(--brand-gold); color: #28341d; box-shadow: none; }
.banner-template-card[aria-current="true"] .banner-template-card-copy > span:first-child { border-color: #ffe6a0; background: var(--brand-gold); color: #28341d; box-shadow: none; }
.banner-page .banner-name-control > input,
.banner-page .banner-word-control input { border-radius: 9px; border-color: #a7b28d; background: #fffdf7; }

/* Server profiles share the woodland palette without moving their data. */
.server-detail-body {
  --profile-bg: var(--brand-forest);
  --profile-panel: var(--brand-panel);
  --profile-border: var(--brand-border);
  --profile-text: var(--brand-cream);
  --profile-muted: var(--brand-muted);
  --profile-accent: var(--moss-bright);
  background: var(--brand-forest);
}
.server-detail-body::before { height: 580px; background: linear-gradient(#18301999, var(--brand-forest)), url('/warm-world-background.webp') center 40% / cover no-repeat; opacity: .5; }
.server-detail-body .server-detail-header { min-height: 110px; height: auto; padding: 10px 0; border-color: var(--brand-border); }
.server-detail-body .server-detail-hero { border-color: #d0d8a33d; border-radius: 18px; background: #1d3024; box-shadow: 0 18px 50px #06130b4d; }
.profile-banner-frame { border-radius: 17px 17px 0 0; background: #102218; border-color: var(--brand-border); }
.server-detail-body .server-detail-banner { background: #122419; }
.server-detail-body .server-detail-banner.server-banner-placeholder {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  min-height: 98px;
  background: repeating-linear-gradient(0deg, #f1e6b703 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, #f1e6b703 0 1px, transparent 1px 24px), radial-gradient(ellipse at 85% 10%, #6c823743, transparent 70%), linear-gradient(115deg, #304932, #1c3023);
}
.server-detail-body .server-banner-placeholder b { max-width: 100%; font: 800 clamp(18px, 2.6vw, 30px)/1.2 ui-sans-serif, system-ui, sans-serif; color: #fff0ce; letter-spacing: -.035em; text-shadow: none; }
.server-detail-body .server-banner-placeholder small { margin: 0; color: #c6d6aa; font-size: 10px; line-height: 1.3; letter-spacing: .16em; text-shadow: none; }
.server-detail-body .server-detail-status,
.server-detail-body .server-detail-address,
.server-detail-body .server-detail-meta span,
.profile-share-fallback input,
.profile-share-fallback textarea,
.profile-quick-actions > button { background: #13251b; border-color: #cbd9a62e; border-radius: 10px; color: #e0e9cd; }
.server-detail-body .server-detail-panel { border-radius: 16px; box-shadow: inset 0 1px #fff6db07; }
.server-detail-body .server-detail-vote-bar { border-color: #f4d07830; background: linear-gradient(110deg, #ffd16f0c, #ffd16f02); }
.server-detail-body .server-detail-vote-button span,
.server-detail-body .server-detail-vote-button b { color: #28321b; }
.server-detail-body .server-detail-titlebar .server-edition-strip span,
.server-detail-body .server-detail-tags span { border-color: #c0d7a02e; border-radius: 7px; background: #b5d5980b; color: #d6e6c8; }
.profile-section-nav a { border-color: var(--brand-border); border-radius: 10px; background: #1c3023; color: #cbd9bc; }
.profile-section-nav a:first-child { border-color: #d9c27a66; background: #ffd16f10; color: #f4dda5; }
.profile-panel-symbol { border-color: #dfcf8340; border-radius: 8px; background: #e5cb8009; color: var(--brand-gold); }
.server-detail-body .server-detail-description { color: #d2ddc2; }
.server-detail-body .server-detail-facts dt { color: #adbd9a; }
.server-detail-body .server-detail-facts dd { color: #e3eace; }
.server-detail-body .server-detail-address code { color: #f2e9b6; }
.server-detail-body .server-detail-address .copy-server-ip { border-color: #8cdae050; border-radius: 8px; background: #87d8e310; color: #a9e7ee; }
.server-detail-body .server-detail-address .copy-server-ip:hover { border-color: #a9e7ee; background: #87d8e320; }
.server-detail-body .server-detail-join { border-color: #c6d59840; background: linear-gradient(130deg, #e0bc6608, transparent 75%), var(--brand-panel); }
.profile-snapshot-note,
.profile-panel-intro,
.profile-status-caveat,
.profile-community-label { color: #b3c2a4; }
.profile-snapshot-note time { color: #d7dfc4; }
.server-detail-body .server-related-grid article { background: #172a1f; border-color: var(--brand-border); border-radius: 12px; }
.server-detail-body .server-detail-footer { background: none; color: #9caf91; }
.server-detail-body .server-detail-footer a { color: #c1ceb0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.directory-home a:focus-visible,
.directory-home button:focus-visible,
.server-detail-body a:focus-visible,
.server-detail-body button:focus-visible { outline-color: var(--brand-gold); }

@media (min-width: 761px) and (max-width: 1000px) {
  .directory-home .hero-content { grid-template-columns: minmax(0, 1.15fr) minmax(240px, .85fr); gap: 20px; }
  .directory-home .hero-server-logo { font-size: 48px; }
  .directory-home #siteNav { gap: 14px; }
  .hero-brand-art { width: min(100%, 340px); }
}

@media (max-width: 760px) {
  .brand { gap: 9px; }
  .brand-logo { width: 78px; height: 76px; }
  .brand-name { font-size: 15px; }
  .directory-home .hero { min-height: 0; }
  .directory-home .hero header { height: 90px; width: calc(100% - 40px); }
  .directory-home .hero-image { object-position: 65% top; }
  .directory-home .hero-shade { background: linear-gradient(180deg, #102118ad, #101d17b0 40%, #101d17f5), linear-gradient(90deg, #101d1780, #101d1750); }
  .directory-home .hero-content { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 22px 0 58px; }
  .hero-brand-art { grid-row: 1; width: min(55vw, 235px); max-height: 235px; transform: rotate(-2deg); margin: -5px auto 0; filter: drop-shadow(0 12px 18px #07140975); }
  .directory-home .hero-directory-kicker { margin-bottom: 14px; font-size: 9px; }
  .directory-home .hero-server-logo { max-width: 540px; font-size: clamp(36px, 7.4vw, 51px); line-height: 1.08; }
  .directory-home .hero .hero-copy { max-width: 590px; margin: 18px 0 22px; font-size: 15px; line-height: 1.65; }
  .directory-home .hero-actions { gap: 10px 16px; }
  .directory-home .hero-meta { gap: 10px 17px; margin-top: 22px; }
  .site-launch-note { font-size: 10px; margin-top: 18px; }
  .directory-home .menu-toggle { border-color: #f0e3bb4d; background: #183123dc; border-radius: 11px; }
  .directory-home #siteNav { top: 82px; z-index: 8; gap: 0; padding: 8px; max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain; border-color: #ded69d45; border-radius: 14px; background: #1c3023f5; box-shadow: 0 18px 45px #010c0990; }
  .directory-home #siteNav a { border-radius: 8px; }
  .directory-home #siteNav a:hover { background: #f2e1ad0b; }
  .directory-home .directory-controls { margin-top: -22px; padding: 20px; border-radius: 18px; }
  .directory-home .directory-heading h2 { font-size: 24px; }
  .directory-home .intro { padding-top: 52px; padding-bottom: 52px; }
  .directory-home .server-card { border-radius: 16px; }
  .directory-home .server-banner-link.is-placeholder .server-banner-placeholder { min-height: 64px; padding: 10px 12px; gap: 5px; }
  .directory-home .server-banner-placeholder b { font-size: 15px; line-height: 1.25; }
  .directory-home .server-banner-placeholder small { font-size: 10px; line-height: 1.2; }
  .dashboard-header,
  .legal-header,
  .banner-header { min-height: 92px; height: auto; padding-top: 7px; padding-bottom: 7px; }
  .dashboard-header nav { flex-wrap: wrap; }
  .legal-header { gap: 18px; }
  .legal-header > a:last-child,
  .banner-back { font-size: 12px; max-width: 50%; text-align: right; line-height: 1.5; }
  .server-detail-body .server-detail-header { min-height: 94px; padding-top: 7px; padding-bottom: 7px; }
  .server-detail-body .server-detail-header .profile-back-link { font-size: 12px; }
  .banner-page .banner-studio { border-radius: 16px; }
  footer .brand-logo { width: 88px; height: 82px; }
}

@media (max-width: 430px) {
  .brand-logo { width: 74px; height: 72px; }
  .brand-name { font-size: 13px; }
  .directory-home .hero-content { width: calc(100% - 36px); gap: 15px; padding-top: 14px; }
  .hero-brand-art { width: 176px; max-height: 184px; }
  .directory-home .hero-server-logo { font-size: clamp(33px, 9vw, 38px); letter-spacing: -.046em; }
  .directory-home .hero .hero-copy { font-size: 14px; }
  .directory-home .hero-meta { font-size: 10px; gap: 8px 12px; }
  .directory-home .hero-actions { gap: 10px 14px; }
  .directory-home .hero-guide-link,
  .directory-home .hero-banner-link { font-size: 11px; }
  .directory-home .directory-controls { padding: 17px; border-radius: 16px; }
  .directory-home .directory-heading h2 { font-size: 22px; }
  .directory-home .directory-controls .discover-bar button { border-radius: 9px; }
  .directory-home .directory-controls .filters button { border-radius: 8px !important; }
  .directory-home .server-card { padding: 17px; }
  .dashboard-header { padding-top: 5px; padding-bottom: 11px; }
  .dashboard-header nav { gap: 11px; }
  .dashboard-header .brand-logo { width: 84px; height: 80px; }
  .server-detail-body .server-detail-header { gap: 8px 14px; }
  dialog { border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-brand-art,
  .button,
  .directory-home .server-card,
  .banner-template-card { transition: none; animation: none; }
  .primary:hover,
  .directory-home .button.primary:hover,
  .server-detail-body .server-detail-vote-button:hover { transform: none; }
}

/* Voting stays moss green throughout the directory, profile and vote dialog. */
.directory-home .server-vote-button,
.server-detail-body .server-detail-vote-button,
#confirmVote {
  border-color: #dcf4bd;
  background: linear-gradient(180deg, #c5ee9b, #9bd272);
  color: #1c321b;
  box-shadow: 0 3px 0 #527c39, 0 8px 18px #0002, inset 0 1px #effcddb3;
}
.directory-home .server-vote-button:hover:not(:disabled),
.server-detail-body .server-detail-vote-button:hover,
#confirmVote:hover:not(:disabled) {
  border-color: #e5facd;
  background: linear-gradient(180deg, #dcf6bc, #b8e58d);
  color: #1c321b;
  box-shadow: 0 3px 0 #527c39, 0 10px 23px #0003, inset 0 1px #f4ffe8;
}
.directory-home .server-vote-button:active:not(:disabled),
.server-detail-body .server-detail-vote-button:active,
#confirmVote:active:not(:disabled) {
  box-shadow: 0 1px 0 #527c39;
}
.directory-home .server-vote-button:focus-visible,
.server-detail-body .server-detail-vote-button:focus-visible,
#confirmVote:focus-visible { outline-color: #94cf78; }
.server-detail-body .server-detail-vote-button span,
.server-detail-body .server-detail-vote-button b { color: #1c321b; }
.server-detail-body .server-detail-vote-bar {
  border-color: #c5ee9b30;
  background: linear-gradient(110deg, #c5ee9b0c, #c5ee9b02);
}
#voteDialogTitle { color: #355f2d; }

/* The shared header uses a bold, readable YourMCBrowser wordmark. */
.brand > span.brand-wordmark,
.server-detail-body .brand > span.brand-wordmark {
  display: block;
  color: var(--brand-cream);
  font: 900 28px/1.05 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.045em;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .directory-home .menu-toggle {
    display: block;
    order: 3;
    margin-left: 12px;
    border-color: #f0e3bb4d;
    background: #183123dc;
    border-radius: 11px;
  }
  .directory-home #siteNav {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% - 8px);
    z-index: 8;
    width: min(300px, calc(100vw - 40px));
    padding: 8px;
    max-height: calc(100dvh - 104px);
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 0;
    border: 1px solid #ded69d45;
    border-radius: 14px;
    background: #1c3023f5;
    box-shadow: 0 18px 45px #010c0990;
  }
  .directory-home #siteNav.open { display: grid; }
  .directory-home #siteNav a,
  .directory-home #siteNav .nav-login,
  .directory-home #siteNav .nav-cta {
    display: block;
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    text-align: left;
  }
  .directory-home #siteNav a:hover { background: #f2e1ad0b; }
}

@media (max-width: 760px) {
  .brand > span.brand-wordmark,
  .server-detail-body .brand > span.brand-wordmark { font-size: 23px; }
  .legal-header { flex-wrap: wrap; gap: 10px 12px; }
}

@media (max-width: 430px) {
  .brand > span.brand-wordmark,
  .server-detail-body .brand > span.brand-wordmark { font-size: 21px; }
  .legal-header .brand > span.brand-wordmark { font-size: 20px; }
}

/* Header lettering follows the original blue/gold logo, without the mascot. */
.brand > img.brand-lettering,
.server-detail-body .brand > img.brand-lettering {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 3px 5px #0004);
}

@media (max-width: 760px) {
  .brand > img.brand-lettering,
  .server-detail-body .brand > img.brand-lettering { width: 205px; }
}

@media (max-width: 430px) {
  .brand > img.brand-lettering { width: 195px; }
  .server-detail-body .brand > img.brand-lettering { width: 175px; }
}

/* A warm yellow profile vote button with bold green lettering. */
.server-detail-body .server-detail-vote-button {
  border-color: #ffe3a2;
  background: linear-gradient(180deg, #ffdb87, #f4bc53);
  color: #24572a;
  font-weight: 900;
  box-shadow: 0 3px 0 #a36d2b, 0 8px 18px #0002, inset 0 1px #fff4d9b3;
}
.server-detail-body .server-detail-vote-button span {
  color: #24572a;
  font: 900 14px/1.3 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.server-detail-body .server-detail-vote-button b {
  color: #24572a;
  font-weight: 900;
}
.server-detail-body .server-detail-vote-button:hover {
  border-color: #fff0c5;
  background: linear-gradient(180deg, #ffe7a4, #ffd078);
  color: #24572a;
  box-shadow: 0 3px 0 #a36d2b, 0 10px 23px #0003, inset 0 1px #fff8e5;
}
.server-detail-body .server-detail-vote-button:active {
  background: linear-gradient(180deg, #f4c367, #efb951);
  box-shadow: 0 1px 0 #a36d2b;
}
.server-detail-body .server-detail-vote-button:focus-visible {
  outline: 3px solid #ffdb87;
  outline-offset: 4px;
}

@media (max-width: 360px) {
  .server-detail-body .server-detail-vote-button {
    padding-inline: 14px;
    gap: 10px;
  }
}

/* The real top three keep their warm podium colours when the list is filtered. */
.directory-home .server-card[data-rank="1"] {
  --podium-border: #c99a47;
  --podium-highlight: #f0ca7b;
  --podium-glow: #d9ad5526;
  --podium-badge: linear-gradient(180deg, #ffe19b, #edbd64);
  background: linear-gradient(125deg, #483922, #2b2f20 66%, #223126);
}
.directory-home .server-card[data-rank="2"] {
  --podium-border: #c7baa2;
  --podium-highlight: #f0e4c9;
  --podium-glow: #dfd0ab1c;
  --podium-badge: linear-gradient(180deg, #fff0d1, #d3c1a2);
  background: linear-gradient(125deg, #34392d, #273329 66%, #1c2e24);
}
.directory-home .server-card[data-rank="3"] {
  --podium-border: #c58959;
  --podium-highlight: #efbd94;
  --podium-glow: #d9915b20;
  --podium-badge: linear-gradient(180deg, #f2c49b, #cf9569);
  background: linear-gradient(125deg, #443329, #2d2b22 66%, #223126);
}
.directory-home .server-card:is([data-rank="1"], [data-rank="2"], [data-rank="3"]) {
  border-color: var(--podium-border);
  box-shadow: 0 10px 30px #08120c45, 0 0 24px var(--podium-glow), inset 0 1px #fff4da14;
}
.directory-home .server-card:is([data-rank="1"], [data-rank="2"], [data-rank="3"]):hover,
.directory-home .server-card:is([data-rank="1"], [data-rank="2"], [data-rank="3"]):focus-within {
  border-color: var(--podium-highlight);
  box-shadow: 0 12px 32px #06140c55, 0 0 28px var(--podium-glow), inset 0 1px #fff4da20;
}
.directory-home .server-card:is([data-rank="1"], [data-rank="2"], [data-rank="3"]) .server-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 32px;
  padding: 7px 9px;
  border: 1px solid #fff2d380;
  border-radius: 9px;
  background: var(--podium-badge);
  color: #302718;
  font: 900 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -.025em;
  text-shadow: none;
  box-shadow: 0 2px 0 #1117095e, inset 0 1px #fff8e573;
}

/* Equal-chance discovery alongside the existing vote-ranked directory. */
.directory-home .directory-heading-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
}
.directory-home .directory-heading-buttons .ymb-saved-open {
  min-height: 44px;
  padding: 9px 12px;
  font-size: 12px;
}
.directory-home .directory-surprise-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid #f9db8c;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffdb87, #f4bc53);
  color: #24572a;
  box-shadow: 0 3px 0 #71501d66, inset 0 1px #fff8de99;
  font: 800 13px/1.3 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: background .16s ease, box-shadow .16s ease;
}
.directory-home .directory-surprise-button svg { flex: none; }
.directory-home .directory-surprise-button:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffe7a4, #ffd078);
  box-shadow: 0 3px 0 #71501d66, 0 0 16px #ffd16f20, inset 0 1px #fff8de99;
}
.directory-home .directory-surprise-button:active:not(:disabled) {
  background: linear-gradient(180deg, #f4c367, #efb951);
  box-shadow: 0 1px 0 #71501d66, inset 0 2px 4px #71501d1c;
}
.directory-home .directory-surprise-button:focus-visible {
  outline: 3px solid #ffe7a4;
  outline-offset: 4px;
}
.directory-home .directory-surprise-button:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}
.directory-home .directory-surprise-status {
  max-width: 340px;
  margin: 0;
  color: #bdcbae;
  font-size: 11px;
  line-height: 1.5;
  text-align: right;
}
@media (max-width: 760px) {
  .directory-home .directory-heading-actions { gap: 8px; }
  .directory-home .directory-heading-actions > span { width: 100%; }
  .directory-home .directory-heading-buttons { width: 100%; justify-content: flex-start; }
  .directory-home .directory-surprise-status { max-width: 100%; text-align: left; }
}
@media (max-width: 430px) {
  .directory-home .directory-heading-buttons > button { flex: 1 1 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .directory-home .directory-surprise-button { transition: none; }
}

/* Keep branding in place and display server artwork at the full card width. */
.brand,
.brand-lettering,
.brand-logo,
.hero-brand-art { -webkit-user-drag: none; }

.server-card .server-banner-link:not(.is-placeholder),
.directory-home .server-banner-link:not(.is-placeholder) {
  width: 100%;
  max-width: none;
  justify-self: stretch;
  margin-inline: auto;
}
.server-card .server-banner-link:not(.is-placeholder) > img.server-listing-banner,
.directory-home .server-card img.server-listing-banner,
.server-detail-body .profile-banner-frame > img.server-detail-banner,
.seo-ranking-banner > img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 468 / 60;
  margin-inline: auto;
  object-fit: contain;
  image-rendering: auto;
}
.server-detail-body .profile-banner-frame {
  background: linear-gradient(115deg, #263a29, #13241a 55%, #243526);
}

/* A subtle edge boost preserves the uploaded artwork, including animated GIFs. */
.directory-home .server-card img.server-listing-banner,
.server-detail-body .profile-banner-frame > img.server-detail-banner {
  filter: url("/banner-quality.svg#banner-detail");
}

.directory-home .crafty-home-invitation {
  margin: 12px 0 0;
  padding: 10px 14px;
  border: 1px solid #ffd16f35;
  border-radius: 12px;
  background: linear-gradient(110deg, #ffd16f0c, #79b26209);
}
.directory-home .crafty-home-invitation img {
  flex: none;
  width: 44px;
  height: 44px;
  object-fit: contain;
  -webkit-user-drag: none;
}
.directory-home .crafty-home-invitation p { flex: 1; }
.directory-home .crafty-home-invitation a { font-weight: 800; }
/* A calm, readable identity when an owner has not uploaded a banner yet. */
.directory-home .server-banner-link.is-placeholder .server-banner-placeholder,
.server-detail-body .server-detail-banner.server-banner-placeholder,
.dashboard-body .owner-server-banner.server-banner-placeholder {
  --banner-glow: #d9a457;
  --banner-base: #254e3c;
  display: grid;
  position: relative;
  isolation: isolate;
  place-content: center;
  justify-items: center;
  width: 100%;
  min-height: 92px;
  height: auto;
  aspect-ratio: auto;
  gap: 0;
  padding: 16px 22px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 130%, color-mix(in srgb, var(--banner-glow) 38%, transparent), transparent 72%), linear-gradient(120deg, var(--banner-base), #152a22);
  color: #fff7e2;
  text-align: center;
}
.server-banner-placeholder[data-banner-theme="1"] { --banner-base: #513829 !important; --banner-glow: #e9ae71 !important; }
.server-banner-placeholder[data-banner-theme="2"] { --banner-base: #364538 !important; --banner-glow: #d4c87d !important; }
.directory-home .server-banner-link.is-placeholder .server-banner-placeholder::before,
.server-detail-body .server-detail-banner.server-banner-placeholder::before {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #fff5d608 1px, transparent 1px), linear-gradient(#fff5d608 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(90deg, #0008, transparent 35% 65%, #0008);
}
.directory-home .server-banner-link.is-placeholder .server-banner-placeholder::after,
.server-detail-body .server-detail-banner.server-banner-placeholder::after {
  display: block;
  content: "";
  position: absolute;
  z-index: -1;
  width: 7px;
  height: 7px;
  top: 22%;
  right: 9%;
  background: #efd49366;
  box-shadow: -22px 19px #efd49322, 12px 35px #efd49333;
  transform: rotate(45deg);
}
.directory-home .server-banner-placeholder b,
.server-detail-body .server-banner-placeholder b,
.dashboard-body .server-banner-placeholder b {
  max-width: 100%;
  overflow: visible;
  color: #fff7e2;
  font: 850 clamp(23px, 2.5vw, 32px)/1.15 system-ui, sans-serif;
  letter-spacing: -.025em;
  white-space: normal;
  overflow-wrap: anywhere;
  text-transform: none;
  text-shadow: 0 2px 8px #0006;
}
.directory-home .server-banner-placeholder small,
.server-detail-body .server-banner-placeholder small { display: none; }

/* Compact navigation stays the same while account access loads. */
.directory-home .hero header { gap: 14px; height: 88px; }
.directory-home .hero header > .brand { min-width: 0; max-width: min(340px, calc(100% - 156px)); flex-shrink: 1; margin-right: auto; }
.directory-home .hero header > .nav-login { order: 2; flex: none; width: 112px; box-sizing: border-box; min-height: 44px; padding: 10px 16px; white-space: nowrap; }
.directory-home .menu-toggle { display: block; order: 3; flex: none; width: 44px; height: 44px; margin-left: 0; border-radius: 11px; background: #183123dc; }
.menu-toggle[hidden], .ymb-menu-toggle[hidden] { display: none !important; }
.directory-home .hero header #siteNav { display: none; position: absolute; top: calc(100% - 6px); right: 0; width: min(300px, calc(100vw - 40px)); padding: 12px; border: 1px solid #eed3a342; border-radius: 12px; background: #1b3027f7; box-shadow: 0 15px 35px #0004; max-height: calc(100dvh - 100px); overflow-y: auto; }
.directory-home .hero header #siteNav.open { display: grid; gap: 4px; }
.directory-home .hero header #siteNav a { display: block; width: 100%; min-height: 44px; padding: 12px; text-align: left; }
.directory-home .hero { min-height: 480px; }
.directory-home .hero-content { padding: 28px 0 44px; }
.directory-home .hero .hero-copy { max-width: 550px; }
.directory-about { width: min(1160px, calc(100% - 48px)); margin: 24px auto; border: 1px solid #e9d29b38; border-radius: 14px; background: #192f23; color: #fff7e2; }
.directory-about > summary { cursor: pointer; padding: 20px 24px; font: 750 17px/1.5 system-ui, sans-serif; }
.directory-about > summary span { display: inline-block; margin-left: 16px; font: 400 13px/1.5 system-ui, sans-serif; color: #c6cfbd; }
.directory-about > summary:focus-visible { outline: 3px solid #ffd16f; outline-offset: 4px; border-radius: 12px; }
.directory-home .directory-about-content > section { width: 100%; margin-left: 0; margin-right: 0; border-radius: 0; }
.directory-about-content { overflow: hidden; border-radius: 0 0 14px 14px; }

.nav-account-primary { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 112px; box-sizing: border-box; min-height: 44px; padding: 10px 16px; border: 1px solid #f6e7ba65; border-radius: 11px; background: #17352a; color: #fff7e2; font: 750 13px/1.4 system-ui, sans-serif; text-decoration: none; white-space: nowrap; }
.nav-account-primary:hover { background: #2b4836; border-color: #ffd16f; }
.nav-account-primary:focus-visible, .ymb-menu-toggle:focus-visible { outline: 3px solid #ffd16f; outline-offset: 4px; }
.ymb-header-actions { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.ymb-menu-toggle { display: grid; place-content: center; gap: 5px; width: 44px; height: 44px; border: 1px solid #f6e7ba65; border-radius: 11px; background: #17352a; cursor: pointer; }
.ymb-menu-toggle span { display: block; width: 19px; height: 2px; background: #fff7e2; }
.ymb-site-menu { position: absolute; z-index: 30; right: 20px; top: calc(100% - 4px); display: grid; gap: 3px; width: min(280px, calc(100vw - 40px)); padding: 12px; border: 1px solid #e9d29b60; border-radius: 12px; background: #1b3027; box-shadow: 0 15px 35px #0004; }
.ymb-site-menu[hidden] { display: none !important; }
.ymb-site-menu a { display: block; min-height: 44px; padding: 12px; color: #fff7e2; font: 650 13px/1.5 system-ui, sans-serif; text-decoration: none; }
.ymb-site-menu a:hover { background: #ffffff0b; border-radius: 7px; }
.ymb-shared-header { position: relative; flex-wrap: wrap; gap: 12px; }
.ymb-shared-header > .brand { flex-shrink: 1; min-width: 0; }
@media (max-width: 760px) {
  .directory-home .hero header { height: 76px; gap: 8px; }
  .directory-home .hero-brand-art { display: none; }
  .directory-home .hero header > .brand { max-width: calc(100% - 150px); }
  .directory-home .hero { min-height: 0; }
  .directory-home .hero-content { padding: 26px 0 38px; }
  .directory-home .hero header > .nav-login { padding: 10px 12px; font-size: 12px; }
  .directory-about { width: calc(100% - 32px); }
  .directory-about > summary { padding: 18px; font-size: 15px; }
  .directory-about > summary span { display: block; margin-left: 18px; margin-top: 4px; font-size: 12px; }
  .ymb-shared-header > .brand { max-width: calc(100% - 156px); }
  .ymb-shared-header > .ymb-header-actions { order: 1; }
  .ymb-shared-header > :not(.brand):not(.ymb-header-actions):not(.ymb-site-menu) { order: 2; }
  .ymb-shared-header .nav-account-primary { padding: 10px 12px; font-size: 12px; }
}

.dashboard-body [hidden] { display: none !important; }
.dashboard-view-nav { display:flex; align-items:center; gap:12px; margin-bottom:24px; color:#cddac0; font:650 14px/1.5 system-ui,sans-serif; }
.dashboard-view-nav button { border:1px solid #e4d3a34d; border-radius:9px; padding:11px 15px; min-height:44px; background:#223b2b; color:#fff1ca; font:inherit; cursor:pointer; }
.dashboard-body .dashboard-list-heading { flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.dashboard-body .dashboard-list-heading > div { flex:1 1 200px; }
.dashboard-body .dashboard-list-heading p { color:#bac8b1; line-height:1.6; }
.dashboard-body .owner-server-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:24px; }
.dashboard-body .owner-server-card { display:grid; gap:17px; min-width:0; padding:22px; border:1px solid #bbca9d40; border-radius:16px; background:linear-gradient(135deg,#253e2b,#172c20); box-shadow:0 7px 24px #0002; }
.dashboard-body .owner-server-card h3 { margin:10px 0; font-size:23px; line-height:1.25; color:#fff6dc; overflow-wrap:anywhere; }
.dashboard-body .owner-server-card .ownership-status { padding:17px; border:1px solid #d7bd7950; border-radius:12px; background:#fff0c30a; color:#fff2cc; }
.dashboard-body .ownership-status.unverified > strong { display:block; font-size:15px; color:#ffedbd; }
.dashboard-body .ownership-status > span { display:block; margin:9px 0 12px; font-size:13px; line-height:1.65; color:#c6d1ba; }
.dashboard-body .ownership-status .verify-owner-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 16px; border-radius:9px; border:1px solid #dfc18a !important; background:#f3d79b !important; color:#34472d !important; font:750 13px/1.4 system-ui,sans-serif; cursor:pointer; }
.dashboard-body .owner-server-details { padding:0 0 12px; border-bottom:1px solid #bed0a52e; }
.dashboard-body .owner-server-details > summary { min-height:44px; padding:11px 0; font:650 13px/1.6 system-ui,sans-serif; color:#d7e2cb; cursor:pointer; }
.dashboard-body .owner-server-details dl { margin-top:14px; }
.dashboard-body .owner-server-details .test-votifier-button { margin-top:10px; min-height:44px; padding:11px 15px; border:1px solid #bbca9d60; border-radius:9px; background:#273e2b; color:#edf4df; cursor:pointer; }
.dashboard-body .owner-server-details .test-votifier-button small { display:block; margin-top:4px; color:#baceb0; }
.dashboard-body .owner-server-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:0; }
.dashboard-body .owner-server-actions > button,.dashboard-body .owner-server-actions > a { min-height:44px; margin:0; }
.dashboard-body .owner-server-more { margin-left:auto; }
.dashboard-body .owner-server-more summary { min-height:44px; padding:11px 8px; color:#b7c6ac; font:550 12px/1.6 system-ui,sans-serif; cursor:pointer; }
.dashboard-body .owner-server-more .delete-server-button { margin-top:6px; min-height:44px; }
@media(max-width:780px){.dashboard-body .owner-server-list{grid-template-columns:minmax(0,1fr)}.dashboard-body .owner-server-card{padding:18px}.dashboard-view-nav{gap:9px;font-size:12px}}

.dashboard-body .owner-server-list:has(> .owner-server-card:only-child){grid-template-columns:minmax(0,1fr);max-width:840px;margin-left:auto;margin-right:auto}.dashboard-body .owner-server-banner{width:100%;max-width:100%;height:auto;margin:0;border-radius:9px}

.dashboard-body .owner-server-actions > button:not(.delete-server-button),.dashboard-body .owner-server-actions > a,.dashboard-body .dashboard-list-heading > button{border:1px solid #9cac7c60;border-radius:9px;background:#2c4834;color:#f4f0d8;font:650 13px/1.4 system-ui,sans-serif;padding:11px 14px;cursor:pointer}.dashboard-body .owner-server-actions > button:hover,.dashboard-body .owner-server-actions > a:hover{background:#36593e;border-color:#d9bc77}

/* Keep the navigation and refresh hint stable while account data arrives. */
.directory-home .hero header>.brand{max-width:min(340px,calc(100% - 276px))}
.directory-home .directory-surprise-status{width:min(340px,100%);min-height:33px}
@media(max-width:760px){
  .directory-home .hero header>.brand{max-width:calc(100% - 220px)}
  .directory-home .directory-surprise-status{width:100%}
}

/* Popular countries share the same disclosure on the directory and profile menus. */
.ymb-site-menu { max-height: calc(100dvh - 108px); overflow-y: auto; overscroll-behavior: contain; }
.ymb-popular-servers { min-width: 0; border-bottom: 1px solid #eed3a329; padding-bottom: 4px; }
.ymb-popular-servers > summary { min-height: 44px; padding: 12px; border-radius: 8px; cursor: pointer; color: #ffe29d; font: 750 13px/1.5 system-ui, sans-serif; }
.ymb-popular-servers > summary:hover { background: #ffffff0b; }
.ymb-popular-servers > summary:focus-visible, .ymb-country-links a:focus-visible { outline: 2px solid #ffd16f; outline-offset: -2px; }
.directory-home .hero header #siteNav .ymb-country-links a, .ymb-site-menu .ymb-country-links a { display: flex; align-items: center; gap: 10px; padding-left: 22px; }
.ymb-country-links .country-flag { flex: none; object-fit: cover; }

.country-search { margin: 0 0 24px; max-width: 480px; }
.country-search label { display: block; margin-bottom: 8px; color: #fff7e2; font-weight: 700; }
.country-search input { width: 100%; min-height: 44px; padding: 12px; border: 1px solid #e9d29b60; border-radius: 9px; background: #152a20; color: #fff7e2; font: inherit; }
.country-search input:focus-visible { outline: 2px solid #ffd16f; outline-offset: 2px; }
.country-choice strong { display: flex; align-items: center; gap: 10px; }
.country-choice[hidden], .country-group[hidden], #countrySearchEmpty[hidden] { display: none !important; }

/* Translated account controls and forms must fit without hiding their text. */
.directory-home .directory-controls .filters button { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.directory-home .hero header > .nav-login { white-space: normal; overflow-wrap: anywhere; }
.directory-home .banner-promo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.directory-home .banner-promo > div { min-width: 0; overflow-wrap: anywhere; }
.directory-home .banner-promo-sample { flex-wrap: wrap; }
.banner-template-card-copy > span:last-child { flex: 1 1 0; }
.banner-template-card-copy small { white-space: normal; overflow-wrap: anywhere; }
.dashboard-body .dashboard-header {
  height: auto;
  min-height: 78px;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 16px;
}
.dashboard-body .dashboard-header > .brand { min-width: 0; max-width: 100%; }
.dashboard-body .dashboard-header > nav {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.dashboard-body .dashboard-header nav .premium-account-button { position: static; }
.dashboard-body :is(.dashboard-action-choices > button, .dashboard-form-card fieldset, .form-grid > *, .owner-server-card dl > div, .dashboard-section-heading > div) {
  min-width: 0;
  max-width: 100%;
}
.dashboard-body :is(.dashboard-action-choices strong, .dashboard-action-choices small, .dashboard-form-card label, .dashboard-form-card legend, .owner-server-card dd, .form-roadmap strong, .form-roadmap small) {
  overflow-wrap: anywhere;
}
.dashboard-body .form-roadmap small { overflow: visible; text-overflow: clip; font-size: 11px; line-height: 1.5; }
.dashboard-body .form-roadmap strong { font-size: 12px; line-height: 1.5; }
.dashboard-body .owner-server-card .server-address-list > div { grid-template-columns: 55px minmax(0, 1fr); align-items: start; }
.dashboard-body .owner-server-card .server-address-list code { white-space: normal; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; line-height: 1.6; }
.dashboard-body :is(button, .button, .owner-public-profile),
.account-settings-body :is(button, .button),
dialog :is(button, .button) { max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
dialog.server-delete-dialog form { min-width: 0; max-width: 100%; grid-template-columns: minmax(0, 1fr); }
dialog.server-delete-dialog :is(h2, p, label, strong, code) { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.dashboard-body :is(.dialog-actions, .owner-server-actions, .dashboard-view-nav) { flex-wrap: wrap; }
.dashboard-body .form-section > legend > span:not(.legend-icon) { min-width: 0; }
@media (max-width: 760px) {
  .directory-home .banner-promo { grid-template-columns: minmax(0, 1fr); }
  dialog.server-delete-dialog h2 { font-size: clamp(24px, 6vw, 32px); line-height: 1.2; }
  .dashboard-body .dashboard-header { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px; }
  .dashboard-body .dashboard-header > .brand { justify-self: center; }
  .dashboard-body .dashboard-header > nav { display: flex; justify-content: center; width: 100%; margin: 0; gap: 10px; }
  .dashboard-body .dashboard-header nav :is(a, button) { min-width: 0; min-height: 44px; justify-content: center; text-align: center; line-height: 1.5; overflow-wrap: anywhere; }
  .dashboard-body .dashboard-header nav .premium-account-button { width: 44px; padding: 8px; }
  .dashboard-body .form-roadmap { align-items: stretch; }
  .dashboard-body .form-roadmap li { align-items: start; }
  .dashboard-body .form-roadmap small { font-size: 11px; }
  .dashboard-body .owner-server-card dl { grid-template-columns: minmax(0, 1fr); }
  .dashboard-body .owner-server-actions > :is(button, a) { flex: 1 1 150px; justify-content: center; text-align: center; }
  .dashboard-body .owner-server-more { margin-left: 0; }
  :is(.dashboard-form-card, .account-settings-body, dialog) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) { min-width: 0; max-width: 100%; font-size: 16px; }
}
@media (max-width: 480px) {
  .dashboard-body .dashboard-header nav a.mobile-visible-nav { flex: 1 1 100%; }
}