/* Palworld-inspired visual theme for PalAtlas. */
:root {
  --bg: #081b2a;
  --surface: #102d3d;
  --surface-2: #153d4c;
  --ink: #e8f3f2;
  --muted: #9bb8c0;
  --primary: #15dce4;
  --primary-dark: #0d8f9e;
  --mint: #55d98e;
  --yellow: #f4cf58;
  --red: #ff8d37;
  --line: #2b5d6d;
  --shadow-card: 0 8px 24px #020b1466;
  --shadow-float: 0 16px 38px #020b1499;
}

.app { background: var(--bg); color: var(--ink); }
.app > .sidebar { background: #0d3542; color: #e8f3f2; }
.app > .sidebar .brand { color: #e8f3f2; }
.app > .sidebar .brand span span { color: #15dce4; }
.app > .sidebar .nav { color: #b9d2d7; }
.app > .sidebar .nav:hover,
.app > .sidebar .nav.active { background: #164c5b !important; color: #15dce4; box-shadow: inset 0 -2px #15dce4 !important; }
.app > main > header { background: #0d2634ed; }
.app .kicker,
.app .source { color: #ff9d35; }
.app .rarity-pill { color: #c765ff; }
.app .panel,
.app .toolbar,
.app .card,
.app .row,
.app .stat,
.app .result,
.app .pal-card,
.app .structure-card { background: var(--surface); }
.app .search,
.app .select { background: #0e2939; color: var(--ink); }
.app .search:focus,
.app .select:focus { border-color: var(--mint); box-shadow: 0 0 0 3px #4c9d8d26; }
.app .tag,
.app .passive { background: #164c5b; color: #79edf0; }
.app .passive { background: #553a25; color: #ffb45e; }
.app .orb,
.app .pal-art { background: linear-gradient(145deg, #173f51, #124b4c) !important; }
.app .mapgenie-toolbar { background: #153d4c; }
.app .mapgenie-map { background: #0b2b38; }
.app .mapgenie-marker { background: #ff9d35; }
.app .mapgenie-marker.visited { background: #55d98e; }
.app .trainer-v2-card { border-color: #287d88; background: linear-gradient(145deg, #123b4d, #15515b); color: #e8f3f2; }
.app .trainer-v2-header { background: linear-gradient(135deg, #0f5368, #118d91); }
.app .trainer-v2-stats { background: #24707b; }
.app .trainer-v2-stats > div { background: #164657; }
.app .trainer-v2-section { border-color: #287d88; }
.app .trainer-v2-team > div,
.app .trainer-v2-slot { background: #12394a; border-color: #287d88; }
.app .trainer-v2-footer { background: #17606a; color: #d9f5ed; }

.dark .app,
.dark .app > .sidebar,
.dark .app > main > header {
  --bg: #10272f;
  --surface: #193b43;
  --surface-2: #214d51;
  --ink: #f3f0e4;
  --muted: #9bb8b5;
  --line: #376269;
  --primary: #75bdb0;
  --primary-dark: #4a9187;
  --mint: #65b99d;
  --yellow: #e2bd69;
  --shadow-card: 0 8px 24px #06191e55;
  --shadow-float: 0 16px 38px #06191e88;
}
.dark .app > main > header { background: #10272fed; }
.dark .app > .sidebar { background: #0d303b; }
.dark .app > .sidebar .nav:hover,
.dark .app > .sidebar .nav.active { background: #e9eee3 !important; color: #173b45; }
.dark .app .search,
.dark .app .select { background: #15333b; color: var(--ink); }
.dark .app .trainer-v2-card { background: linear-gradient(145deg, #1d464d, #214f58); color: var(--ink); }

/* Keep dark mode in the Palworld ocean range instead of near-black. */
body.dark,
body.dark .app,
body.dark .app > main,
body.dark .app #root { background: #081b2a !important; }
body.dark .app > main > header { background: #0d2634ed !important; color: #e8f3f2; }
body.dark .app .crumb,
body.dark .app .crumb strong { color: #9bb8c0; }
body.dark .app .panel,
body.dark .app .toolbar { background: #102d3d !important; border-color: #2b5d6d; }
body.dark .app .profile-facts span { background: #153d4c; border-color: #287d88; }
body.dark .app .hero p,
body.dark .app .sub { color: #9bb8c0; }
body.dark .app .section-heading h2,
body.dark .app .section-heading h3,
body.dark .app .panel h2,
body.dark .app .panel h3 { color: #f4efdf; }
body.dark .app .trainer-v2-card { background: linear-gradient(145deg, #123b4d, #15515b); border-color: #15dce4; }

/* Flat, readable finish: no glow, blur, gradients or decorative motion. */
:root {
  --bg: #f7faf8;
  --surface: #ffffff;
  --surface-2: #edf4f2;
  --ink: #163841;
  --muted: #6d858b;
  --line: #d2e1de;
  --shadow-card: none;
  --shadow-float: none;
}
body, .app, .app > main { background: var(--bg) !important; color: var(--ink); }
.app > .sidebar { background: #0e3b48; }
.app > main > header { background: #ffffff !important; border-color: var(--line); }
.app .panel, .app .toolbar, .app .card, .app .row, .app .stat,
.app .result, .app .pal-card, .app .structure-card { box-shadow: none !important; }
.app .panel, .app .toolbar { background: var(--surface) !important; }
.app .trainer-v2-card, .app .trainer-v2-header { background-image: none; }
.app .trainer-v2-card { background: #eaf4f2; box-shadow: none; }
.app .trainer-v2-header { background: #176578; }
.app .pal-art, .app .orb { background: #e5f1ee !important; }
.app .tag, .app button.tag, .app .source-link { box-shadow: none; transition: none; }
.app .card:hover, .app .pal-card:hover, .app .alt-card:hover,
.app .alt-quick:hover { transform: none; box-shadow: none; }
.app > .sidebar, .app > main > header { backdrop-filter: none; }

body.dark, body.dark .app, body.dark .app > main, body.dark .app #root {
  --bg: #173b46;
  --surface: #214f5a;
  --surface-2: #285d66;
  --ink: #eff8f4;
  --muted: #b1ccc9;
  --line: #4b8284;
  background: #173b46 !important;
}
body.dark .app > .sidebar { background: #0d3440; }
body.dark .app > main > header { background: #edf3ef !important; color: #163841; }
body.dark .app .panel, body.dark .app .toolbar { background: #214f5a !important; }
body.dark .app .trainer-v2-card { background: #1d4b56; }
body.dark .app .trainer-v2-team > div, body.dark .app .trainer-v2-slot { background: #285d66; }

/* Final layout polish for the desktop shell and controls. */
.app > .sidebar {
  min-height: 72px;
  height: 72px;
  padding: 10px clamp(18px, 4vw, 54px);
  gap: 22px;
  flex-direction: row !important;
  justify-content: flex-start !important;
}
.app > .sidebar .brand {
  width: auto;
  margin: 0;
  font-size: 22px;
  letter-spacing: -.6px;
}
.app > .sidebar nav { display: flex !important; min-width: 0; visibility: visible !important; opacity: 1 !important; }
.app > .sidebar nav .nav { display: flex !important; visibility: visible !important; opacity: 1 !important; }
.app > .sidebar .nav {
  border: 0 !important;
  font-size: 13px;
  transition: background .18s ease, color .18s ease;
}
.app > main > header { top: 72px; height: 64px; }
.app #root { padding-top: 38px; }
.app .tag,
.app button.tag,
.app .source-link {
  border: 1px solid #287d88;
  border-radius: 6px !important;
  background: #164c5b;
  color: #baf4f2;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  box-shadow: 0 1px 0 #fff8 inset;
}
.app .tag:hover,
.app button.tag:hover,
.app .source-link:hover { border-color: #15dce4; background: #1b6572; color: #ffffff; }
.app .home-subsections { gap: 8px; margin-bottom: 18px; }
.app .home-subsections .tag.active { background: #205f73; border-color: #205f73; color: #f7f3e7; }
.app .panel { border-top: 2px solid #2d6e78; }
.app .profile-header { padding-bottom: 4px; }
.app .profile-avatar { background: #15586b; color: #f4cf58; }
.app .profile-facts span { background: #193b43; border-color: #376269; }
.app .section-heading h2,
.app .section-heading h3 { color: var(--ink); }
.app .trainer-v2-card { border-width: 1px; border-top: 3px solid #d8ad55; box-shadow: 0 14px 34px #173b4522; }

body.dark { background: #10272f; color: #f3f0e4; }
.dark .app { background: #10272f; }
.dark .app > main { background: #10272f; }
.dark .app .panel,
.dark .app .toolbar,
.dark .app .card,
.dark .app .row,
.dark .app .stat,
.dark .app .result,
.dark .app .pal-card,
.dark .app .structure-card { background: #193b43; border-color: #376269; }
.dark .app .tag,
.dark .app button.tag { background: #164c5b; border-color: #287d88; color: #baf4f2; }
.dark .app .tag:hover,
.dark .app button.tag:hover { background: #1b6572; border-color: #15dce4; color: #fff; }
.dark .app .profile-facts span { background: #15333b; }
.dark .app .trainer-v2-stats > div { background: #24545a; }
.dark .app .trainer-v2-team > div,
.dark .app .trainer-v2-slot { background: #193b43; border-color: #4b827d; }

@media(max-width:800px) {
  .app > .sidebar { height: auto; min-height: 68px; }
  .app > main > header { top: 108px; }
}

/* Final flat palette: readable and deliberately free of glow or text effects. */
*, *::before, *::after { text-shadow: none !important; }
body, .app, .app > main, .app #root {
  background: #f8fbfa !important;
  color: #163841 !important;
}
.app > .sidebar { background: #0e3b48 !important; }
.app > main > header {
  background: #ffffff !important;
  border-color: #d2e1de !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.app .panel, .app .toolbar, .app .card, .app .row, .app .stat,
.app .result, .app .pal-card, .app .structure-card {
  background: #ffffff !important;
  border-color: #d2e1de !important;
  box-shadow: none !important;
}
.app .tag, .app button.tag, .app .source-link {
  background: #176578 !important;
  border-color: #176578 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transition: none !important;
}
.app .card:hover, .app .pal-card:hover, .app .alt-card:hover,
.app .alt-quick:hover { transform: none !important; box-shadow: none !important; }
.app .trainer-v2-card { background: #eaf4f2 !important; box-shadow: none !important; }
.app .trainer-v2-header { background: #176578 !important; background-image: none !important; }
body.dark, body.dark .app, body.dark .app > main, body.dark .app #root {
  background: #173b46 !important;
  color: #eff8f4 !important;
}
body.dark .app > .sidebar { background: #0d3440 !important; }
body.dark .app > main > header { background: #edf3ef !important; color: #163841 !important; }
body.dark .app .panel, body.dark .app .toolbar, body.dark .app .card,
body.dark .app .row, body.dark .app .stat, body.dark .app .result,
body.dark .app .pal-card, body.dark .app .structure-card {
  background: #214f5a !important;
  border-color: #4b8284 !important;
}
body.dark .app .trainer-v2-card { background: #1d4b56 !important; }
body.dark .app .trainer-v2-team > div, body.dark .app .trainer-v2-slot {
  background: #285d66 !important;
  border-color: #4b8284 !important;
}

/* Readability pass: restrained gold accent and larger supporting text. */
.app { font-family: "Trebuchet MS", "Segoe UI", sans-serif !important; }
.app .kicker, .app .eyebrow, .app .label, .app .catalog-card-kicker,
.app .trainer-eyebrow, .app .section-heading .sub strong {
  color: #d3bd79 !important;
}
.app p.sub, .app .sub, .app .catalog-card p, .app .catalog-card-meta,
.app .check-row small, .app .about-list span, .app .profile-facts span {
  font-size: 13px !important;
  line-height: 1.45 !important;
}
.app h1 { letter-spacing: -1.2px !important; }
.app h2, .app h3 { letter-spacing: -.35px !important; }
.app .catalog-card-art { background: #193b43 !important; }
.app .catalog-card-art img { width: 86% !important; height: 86% !important; object-fit: contain !important; }
.app .catalog-thumb { width: 46px !important; height: 46px !important; object-fit: contain !important; margin-left: auto !important; }
.app .about-links { display: flex; flex-wrap: wrap; gap: 8px; }
.app .mapgenie-marker { background: #287d88 !important; }
.app .mapgenie-marker-materials { background: #6f7b4d !important; }
.app .mapgenie-marker-collectibles { background: #8a6b3f !important; }
.app .mapgenie-marker-npcs { background: #725c8d !important; }
.app .mapgenie-marker-pals { background: #4d7ca4 !important; }
.app .mapgenie-panel:fullscreen { width: 100vw !important; height: 100vh !important; padding: 0 !important; background: #10272f; }
.app .mapgenie-panel:fullscreen .mapgenie-map { width: 100vw !important; height: 100vh !important; min-height: 0; }
.app .mapgenie-map { min-height: 620px !important; height: min(78vh, 820px) !important; background: #0b1720 !important; }
.app .mapgenie-map .maplibregl-canvas { width: 100% !important; height: 100% !important; }
.app .mapgenie-overlay { position: absolute; z-index: 10; top: 14px; left: 14px; right: 14px; display: flex; gap: 8px; align-items: center; padding: 10px; border: 1px solid #d2e1de; border-radius: 8px; background: #f8fbfaeF; box-shadow: 0 2px 8px #06191e44; }
.app .mapgenie-overlay .search { flex: 1; min-width: 180px; }
.app .mapgenie-loading { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; color: #b1ccc9; background: #0b1720; }
.app .mapgenie-sidebar { position: absolute; z-index: 20; inset: 0 auto 0 0; width: 340px; overflow-y: auto; padding: 14px; background: #0d2432f5; border-right: 1px solid #3b7180; color: #eaf5f2; }
.app .mapgenie-sidebar h2 { margin: 0 0 12px; color: #f1f7ef; font-size: 20px; }
.app .mapgenie-world-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 10px; }
.app .mapgenie-world-tabs button, .app .mapgenie-filter-group { border: 1px solid #28516a; border-radius: 7px; background: #102b3d; color: #d9e9e8; }
.app .mapgenie-world-tabs button { padding: 9px 6px; font-weight: 800; }
.app .mapgenie-world-tabs button.active { background: #1a6078; border-color: #38b4bd; }
.app .mapgenie-sidebar .search { width: 100%; margin-bottom: 10px; background: #102b3d; color: #f1f7ef; border-color: #376d7a; }
.app .mapgenie-filter-groups { display: grid; gap: 7px; }
.app .mapgenie-filter-group { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 11px 12px; text-align: left; font-weight: 800; }
.app .mapgenie-filter-group b { color: #9ed5d5; margin-right: 5px; }
.app .mapgenie-filter-group small { color: #91b2bd; font-size: 18px; }
.app .mapgenie-filter-group.active { background: #1a6078; border-color: #31c6cb; color: #fff; }
.app .mapgenie-sidebar-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.app .mapgenie-sidebar-actions .tag { font-size: 11px; }
.app .mapgenie-map > .maplibregl-map { margin-left: 340px; }
.app .mapgenie-map .maplibregl-canvas-container, .app .mapgenie-map .maplibregl-control-container { margin-left: 340px; }
.app .mapgenie-panel:fullscreen .mapgenie-sidebar { width: 360px; }
.app .mapgenie-panel:fullscreen .mapgenie-map > .maplibregl-map { margin-left: 360px; }
.app .mapgenie-panel:fullscreen .mapgenie-map .maplibregl-canvas-container, .app .mapgenie-panel:fullscreen .mapgenie-map .maplibregl-control-container { margin-left: 360px; }
.app .mapgenie-map .maplibregl-canvas-container, .app .mapgenie-map .maplibregl-control-container, .app .mapgenie-panel:fullscreen .mapgenie-map .maplibregl-canvas-container, .app .mapgenie-panel:fullscreen .mapgenie-map .maplibregl-control-container { margin-left: 0 !important; }
.app .breeding-route-card, .app .breeding-route-card b, .app .breeding-route-card strong { color: #eff8f4 !important; }
.app .breeding-route-card > small { color: #b9d8d5 !important; }
.app .breeding-routes-panel { margin-top: 16px; }
.app .breeding-route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.app .breeding-route-card { padding: 14px; border: 1px solid #4b8284; border-radius: 8px; background: #214f5a; }
.app .breeding-route-pals { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; text-align: center; }
.app .breeding-route-pals > div { min-width: 0; }
.app .breeding-route-pals img { width: 72px; height: 72px; object-fit: contain; display: block; margin: 0 auto 5px; }
.app .breeding-route-pals b { display: block; font-size: 13px; }
.app .breeding-route-card > small { display: block; margin-top: 12px; color: #b1ccc9; font-size: 12px; }
@media(max-width:800px) { .app .mapgenie-overlay { flex-wrap: wrap; } .app .mapgenie-overlay .search { flex-basis: 100%; } .app .breeding-route-grid { grid-template-columns: 1fr; } }

/* Flat final pass: readable surfaces, no glow, blur, gradients or text effects. */
*, *::before, *::after { text-shadow: none !important; }
body, .app, .app > main, .app #root {
  background: #f8fbfa !important;
  color: #163841 !important;
}
.app > .sidebar { background: #0e3b48 !important; }
.app > main > header {
  background: #ffffff !important;
  border-color: #d2e1de !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.app .panel, .app .toolbar, .app .card, .app .row, .app .stat,
.app .result, .app .pal-card, .app .structure-card {
  background: #ffffff !important;
  border-color: #d2e1de !important;
  box-shadow: none !important;
}
.app .tag, .app button.tag, .app .source-link {
  background: #176578 !important;
  border-color: #176578 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transition: none !important;
}
.app .card:hover, .app .pal-card:hover, .app .alt-card:hover,
.app .alt-quick:hover { transform: none !important; box-shadow: none !important; }
.app .trainer-v2-card { background: #eaf4f2 !important; box-shadow: none !important; }
.app .trainer-v2-header { background: #176578 !important; background-image: none !important; }

body.dark, body.dark .app, body.dark .app > main, body.dark .app #root {
  background: #173b46 !important;
  color: #eff8f4 !important;
}
body.dark .app > .sidebar { background: #0d3440 !important; }
body.dark .app > main > header { background: #edf3ef !important; color: #163841 !important; }
body.dark .app .panel, body.dark .app .toolbar, body.dark .app .card,
body.dark .app .row, body.dark .app .stat, body.dark .app .result,
body.dark .app .pal-card, body.dark .app .structure-card {
  background: #214f5a !important;
  border-color: #4b8284 !important;
}
body.dark .app .trainer-v2-card { background: #1d4b56 !important; }
body.dark .app .trainer-v2-team > div, body.dark .app .trainer-v2-slot {
  background: #285d66 !important;
  border-color: #4b8284 !important;
}