/*
 * GlimWorld platform visual refresh
 * Clean white surfaces, clear orange accents, and restrained depth.
 * Keep the 3D viewport, editor canvases, and game artwork on their own themes.
 */
:root {
  --gw-border: #e2e5ea;
  --gw-muted: #626a75;
  --gw-shadow: 0 2px 5px rgba(25, 32, 42, .025), 0 8px 20px rgba(25, 32, 42, .04);
  --gw-shadow-lg: 0 8px 22px rgba(25, 32, 42, .08), 0 14px 30px rgba(25, 32, 42, .06);
  --gw-surface: #fff;
  --gw-panel: #fff;
  --gw-ink: #20242b;
  --gw-accent: #f2741b;
  --gw-accent-soft: #fff1e7;
  --ac: #f2741b;
  --ac2: #ff9b52;
  --soft: #fff1e7;
  --gw-r: 12px;
  --gw-font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gw-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body:not(.dark) {
  --bg: #fff;
  --card: #fff;
  --text: #20242b;
  --gw-shell-surface: #fff;
  --gw-shell-panel: #fff;
  --gw-shell-ink: #20242b;
  --gw-shell-muted: #626a75;
  --gw-shell-border: #e2e5ea;
  --gw-shell-accent: #f2741b;
  --gw-shell-accent-soft: #fff1e7;
  --gw-shell-shadow: 0 8px 20px rgba(25, 43, 68, .045);
}

body.dark {
  --bg: #0f1115;
  --card: #181a1e;
  --text: #f2f3f5;
  --gw-border: #333840;
  --gw-muted: #b3bac4;
  --gw-surface: #0f1115;
  --gw-panel: #181a1e;
  --gw-ink: #f2f3f5;
  --gw-accent: #ff9a52;
  --gw-accent-soft: #292c31;
  --ac: #ff9a52;
  --ac2: #f2741b;
  --soft: #292c31;
  --gw-shell-surface: #0f1115;
  --gw-shell-panel: #181a1e;
  --gw-shell-ink: #f2f3f5;
  --gw-shell-muted: #b3bac4;
  --gw-shell-border: #333840;
  --gw-shell-accent: #ff9a52;
  --gw-shell-accent-soft: #292c31;
  --gw-shell-shadow: 0 8px 22px rgba(0, 0, 0, .25);
}

html,
body {
  font-family: var(--gw-font-ui);
}

body:not(.dark),
body:not(.dark) #main-content {
  background: var(--gw-surface);
}

body.dark,
body.dark #main-content {
  background: #0f1115;
  background-image: none;
}

.gw-topbar {
  background: rgba(255, 255, 255, .98);
  border-bottom: 1px solid #e2e5ea;
  box-shadow: 0 2px 8px rgba(25, 32, 42, .04);
}

.gw-topbar::after {
  height: 2px;
  background: #f2741b;
}

.gw-topbar .navbar-logo {
  border: 1px solid #e2e5ea;
  border-radius: 11px;
  box-shadow: none;
}

.gw-primary-nav-item,
.gw-primary-nav-more > summary {
  border-radius: 11px;
  font-weight: 650;
}

.gw-primary-nav-item:hover,
.gw-primary-nav-more > summary:hover {
  color: #bc4e08;
  background: #fff5ed;
  border-color: #ffe1ca;
}

.gw-primary-nav-item.active,
.gw-primary-nav-item.is-active,
.gw-primary-nav-item[aria-current="page"],
.gw-primary-nav-item[aria-selected="true"] {
  color: #c9510a;
  background: #fff1e7;
  border-color: #ffddc3;
  box-shadow: none;
}

.gw-topbar .auth-btn,
#authModal #authSubmitBtn {
  border-color: #e86512;
  border-radius: 11px;
  background: #f2741b;
  color: #fff;
  box-shadow: 0 4px 11px rgba(242, 116, 27, .18);
}

.gw-topbar .auth-btn:hover,
#authModal #authSubmitBtn:hover {
  background: #db5d0c;
}

.gw-tb-search input,
.view input:not([type="checkbox"]):not([type="radio"]),
.view select,
.view textarea {
  border-color: var(--gw-border);
  border-radius: 11px;
}

.gw-tb-search input:focus,
.view input:focus,
.view select:focus,
.view textarea:focus {
  border-color: var(--gw-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gw-accent) 17%, transparent);
}

.view .section-title,
.view .gw-section-head h2 {
  color: var(--gw-ink);
}

.view .gw-section-head {
  border-bottom-color: var(--gw-border);
}

.view .gw-section-head::before {
  background: var(--gw-accent);
}

.gw-sidebar {
  background: #fff;
  border-right-color: #e2e5ea;
}

.gw-side-label {
  color: #626a75;
  font-weight: 800;
}

.gw-sidebar .nav-btn {
  border-radius: 11px;
  color: #20242b;
  font-weight: 650;
}

.gw-sidebar .nav-btn:hover {
  color: #bc4e08;
  background: #fff5ed;
}

.gw-sidebar .nav-btn.active {
  color: #c9510a;
  background: #fff1e7;
  box-shadow: inset 0 0 0 1px #ffddc3;
}

.gw-sidebar .nav-btn.active::before {
  background: #f2741b;
}

/* Keep navigation readable when the user chooses the dark theme. */
body.dark .gw-sidebar {
  background: #111;
  border-right-color: #333;
}

body.dark .gw-side-label {
  color: #b3bac4;
}

body.dark .gw-sidebar .nav-btn {
  color: #f2f3f5;
}

body.dark .gw-sidebar .nav-btn .svg-icon {
  color: #d1d5db;
}

body.dark .gw-sidebar .nav-btn:hover {
  color: #ffb27e;
  background: #292c31;
}

body.dark .gw-sidebar .nav-btn.active {
  color: #ffb27e;
  background: #292c31;
  box-shadow: inset 0 0 0 1px #f2741b;
}

body.dark .gw-sidebar .nav-btn.active .svg-icon {
  color: #ffb27e;
}

/* Home actions use flat, consistent buttons instead of glossy pill effects. */
#view-home .gw-hero-ctas .hero-cta {
  min-height: 44px;
  padding: 10px 15px;
  border-radius: 9px;
  box-shadow: none;
  font-weight: 650;
}

#view-home .gw-hero-ctas .hero-cta::before {
  content: none;
}

#view-home .gw-hero-ctas .studio-btn.primary {
  border: 1px solid #a94300;
  background: #a94300;
  color: #fff;
}

#view-home .gw-hero-ctas .studio-btn.primary:hover {
  border-color: #873600;
  background: #873600;
}

#view-home .gw-hero-ctas .gw-ghost-btn {
  border: 1px solid #e2e5ea;
  background: #fff;
  color: #20242b;
}

#view-home .gw-hero-ctas .gw-ghost-btn:hover {
  border-color: #f2741b;
  background: #fff7f1;
  color: #9b4000;
}

body.dark #view-home .gw-hero {
  border-color: #333;
  background: #0d0d0e;
  box-shadow: none;
}

body.dark #view-home .gw-hero-ctas .studio-btn.primary {
  border-color: #a94300;
  background: #a94300;
  color: #fff;
}

body.dark #view-home .gw-hero-ctas .gw-ghost-btn {
  border-color: #3a3e45;
  background: #181a1e;
  color: #f2f3f5;
}

body.dark #view-home .gw-hero-ctas .gw-ghost-btn:hover {
  border-color: #ff9a52;
  background: #292c31;
  color: #ffc397;
}

.gw-world-card,
.gw-friend-card,
.gw-lesson-card,
.gw-shop-card,
.gw-qa-card,
.library-card,
.edu-card,
.shop-item,
.st66-card,
.admin-stat-card,
.admin-list-item,
.studio-panel,
.gw-panel {
  border-color: var(--gw-border);
  border-radius: 15px;
  box-shadow: var(--gw-shadow);
}

.gw-world-card:hover,
.gw-friend-card:hover,
.gw-lesson-card:hover,
.gw-shop-card:hover,
.gw-qa-card:hover,
.library-card:hover,
.edu-card:hover,
.shop-item:hover,
.st66-card:hover {
  border-color: color-mix(in srgb, var(--gw-accent) 35%, var(--gw-border));
  box-shadow: var(--gw-shadow-lg);
}

.gw-see-all,
.library-card-actions a,
.view a:not(.studio-btn):not(.gw-primary-nav-item) {
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  text-underline-offset: 3px;
}

body.dark .gw-topbar {
  background: rgba(15, 17, 21, .97);
  border-color: #333840;
  box-shadow: 0 3px 16px rgba(0, 0, 0, .45);
}

body.dark .gw-topbar::after {
  background: #ff9a52;
}

body.dark .gw-primary-nav-item:hover,
body.dark .gw-primary-nav-more > summary:hover {
  color: #ffb27e;
  background: #292c31;
  border-color: #f2741b;
}

body.dark .gw-primary-nav-item.active,
body.dark .gw-primary-nav-item.is-active,
body.dark .gw-primary-nav-item[aria-current="page"],
body.dark .gw-primary-nav-item[aria-selected="true"] {
  color: #ffad70;
  background: #292c31;
  border-color: #f2741b;
}

body.dark .gw-topbar .auth-btn,
body.dark #authModal #authSubmitBtn {
  background: #e87524;
  color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  .gw-world-card,
  .gw-friend-card,
  .gw-lesson-card,
  .gw-shop-card,
  .gw-qa-card,
  .library-card,
  .edu-card,
  .shop-item,
  .st66-card {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }

  .gw-world-card:hover,
  .gw-friend-card:hover,
  .gw-lesson-card:hover,
  .gw-shop-card:hover,
  .gw-qa-card:hover,
  .library-card:hover,
  .edu-card:hover,
  .shop-item:hover,
  .st66-card:hover {
    transform: translateY(-2px);
  }
}

@media (max-width: 600px) {
  .gw-topbar {
    box-shadow: 0 2px 12px rgba(25, 32, 42, .06);
  }
}

/* Clean white platform surfaces with orange accents; world artwork stays independent. */
:root {
  --gw-border: #e2e5ea;
  --gw-muted: #626a75;
  --gw-surface: #fff;
  --gw-panel: #fff;
  --gw-ink: #20242b;
  --gw-accent: #f2741b;
  --gw-accent-soft: #fff1e7;
  --gw-scrollbar-thumb: #c5cbd3;
  --gw-scrollbar-thumb-hover: #f2741b;
  --ac: #f2741b;
  --ac2: #ff9b52;
  --soft: #fff1e7;
  --gw-r: 12px;
}

body:not(.dark) {
  --bg: #fff;
  --text: #20242b;
  --gw-shell-surface: #fff;
  --gw-shell-panel: #fff;
  --gw-shell-ink: #20242b;
  --gw-shell-muted: #626a75;
  --gw-shell-border: #e2e5ea;
  --gw-shell-accent: #f2741b;
  --gw-shell-accent-soft: #fff1e7;
  --gw-shell-shadow: 0 6px 18px rgba(25, 43, 68, .05);
}

body.dark {
  --bg: #0f1115;
  --text: #f2f3f5;
  --gw-border: #333840;
  --gw-muted: #b3bac4;
  --gw-surface: #0f1115;
  --gw-panel: #181a1e;
  --gw-ink: #f2f3f5;
  --gw-accent: #ff9a52;
  --gw-accent-soft: #292c31;
  --gw-scrollbar-thumb: #53606f;
  --gw-scrollbar-thumb-hover: #ff9a52;
  --ac: #ff9a52;
  --ac2: #f2741b;
  --soft: #292c31;
  --gw-shell-surface: #0f1115;
  --gw-shell-panel: #181a1e;
  --gw-shell-ink: #f2f3f5;
  --gw-shell-muted: #b3bac4;
  --gw-shell-border: #333840;
  --gw-shell-accent: #ff9a52;
  --gw-shell-accent-soft: #292c31;
  --gw-shell-shadow: 0 8px 22px rgba(0, 0, 0, .25);
}

#main-content {
  background: var(--gw-surface);
  background-image: none;
}

.gw-topbar {
  background: var(--gw-panel);
  border-color: var(--gw-border);
  box-shadow: 0 1px 3px rgba(25, 43, 68, .05);
}

.gw-topbar::after {
  height: 2px;
  background: var(--gw-accent);
}

.gw-topbar .navbar-logo {
  border-color: var(--gw-border);
  box-shadow: none;
}

.gw-primary-nav-item,
.gw-primary-nav-more > summary {
  border-radius: 8px;
}

.gw-primary-nav-item:hover,
.gw-primary-nav-more > summary:hover,
.gw-primary-nav-item.active,
.gw-primary-nav-item.is-active,
.gw-primary-nav-item[aria-current="page"],
.gw-primary-nav-item[aria-selected="true"] {
  color: var(--gw-accent);
  background: var(--gw-accent-soft);
  border-color: color-mix(in srgb, var(--gw-accent) 25%, var(--gw-border));
  box-shadow: none;
}

.gw-topbar .auth-btn,
#authModal #authSubmitBtn {
  border: 1px solid var(--gw-accent);
  border-radius: 8px;
  background: var(--gw-accent);
  color: #fff;
  box-shadow: none;
}

.gw-topbar .auth-btn:hover,
#authModal #authSubmitBtn:hover {
  background: #d85f0b;
}

.gw-sidebar {
  background: var(--gw-panel);
  border-color: var(--gw-border);
  box-shadow: none;
}

.gw-side-label {
  color: var(--gw-muted);
  letter-spacing: .09em;
}

.gw-sidebar .nav-btn {
  border-radius: 8px;
  color: var(--gw-ink);
}

.gw-sidebar .nav-btn:hover,
.gw-sidebar .nav-btn.active {
  color: var(--gw-accent);
  background: var(--gw-accent-soft);
}

.gw-sidebar .nav-btn.active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gw-accent) 25%, var(--gw-border));
}

.gw-sidebar .nav-btn.active::before {
  background: var(--gw-accent);
}

.view .section-title,
.view .gw-section-head h2 {
  color: var(--gw-ink);
}

.view .gw-section-head {
  border-bottom-color: var(--gw-border);
}

.view .gw-section-head::before {
  background: var(--gw-accent);
}

.gw-tb-search input,
.view input:not([type="checkbox"]):not([type="radio"]),
.view select,
.view textarea {
  border-color: var(--gw-border);
  border-radius: 8px;
}

.gw-tb-search input:focus,
.view input:focus,
.view select:focus,
.view textarea:focus {
  border-color: var(--gw-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gw-accent) 16%, transparent);
}

.gw-world-card,
.gw-friend-card,
.gw-lesson-card,
.gw-shop-card,
.gw-qa-card,
.library-card,
.edu-card,
.shop-item,
.st66-card,
.admin-stat-card,
.admin-list-item,
.studio-panel,
.gw-panel {
  border-color: var(--gw-border);
  border-radius: 12px;
  box-shadow: none;
}

.gw-world-card:hover,
.gw-friend-card:hover,
.gw-lesson-card:hover,
.gw-shop-card:hover,
.gw-qa-card:hover,
.library-card:hover,
.edu-card:hover,
.shop-item:hover,
.st66-card:hover {
  border-color: color-mix(in srgb, var(--gw-accent) 45%, var(--gw-border));
  box-shadow: 0 4px 12px rgba(25, 43, 68, .07);
}

#view-home .gw-hero {
  border: 1px solid var(--gw-border);
  border-left: 3px solid var(--gw-accent);
  border-radius: 12px;
  background: var(--gw-panel);
  box-shadow: none;
}

#view-home .gw-hero-ctas .hero-cta {
  border-radius: 8px;
  box-shadow: none;
}

#view-home .gw-hero-ctas .hero-cta::before {
  content: none;
}

#view-home .gw-hero-ctas .studio-btn.primary {
  border-color: var(--gw-accent);
  background: var(--gw-accent);
  color: #fff;
}

#view-home .gw-hero-ctas .studio-btn.primary:hover {
  border-color: #d85f0b;
  background: #d85f0b;
}

#view-home .gw-hero-ctas .gw-ghost-btn {
  border-color: var(--gw-border);
  background: var(--gw-panel);
  color: var(--gw-ink);
}

#view-home .gw-hero-ctas .gw-ghost-btn:hover {
  border-color: var(--gw-accent);
  background: var(--gw-accent-soft);
  color: var(--gw-accent);
}

body.dark .gw-topbar,
body.dark .gw-sidebar {
  background: var(--gw-panel);
  border-color: var(--gw-border);
  box-shadow: none;
}

body.dark .gw-topbar::after {
  background: #ff9a52;
}

body.dark .gw-primary-nav-item:hover,
body.dark .gw-primary-nav-more > summary:hover,
body.dark .gw-primary-nav-item.active,
body.dark .gw-primary-nav-item.is-active,
body.dark .gw-primary-nav-item[aria-current="page"],
body.dark .gw-primary-nav-item[aria-selected="true"] {
  color: #ffb27e;
  background: #292c31;
  border-color: #f2741b;
  box-shadow: none;
}

body.dark .gw-sidebar .nav-btn {
  color: #eef4ff;
}

body.dark .gw-side-label {
  color: #a0afc3;
}

body.dark .gw-sidebar .nav-btn:hover,
body.dark .gw-sidebar .nav-btn.active {
  color: #ffb27e;
  background: #292c31;
}

body.dark .gw-sidebar .nav-btn.active {
  box-shadow: inset 0 0 0 1px #f2741b;
}

body.dark .gw-sidebar .nav-btn .svg-icon {
  color: currentColor;
}

body.dark .gw-topbar .auth-btn,
body.dark #authModal #authSubmitBtn {
  border-color: var(--gw-accent);
  background: var(--gw-accent);
  color: #fff;
}

body.dark #view-home .gw-hero-ctas .studio-btn.primary {
  border-color: var(--gw-accent);
  background: var(--gw-accent);
  color: #fff;
}

body.dark #view-home .gw-hero-ctas .gw-ghost-btn {
  border-color: #3a3e45;
  background: #181a1e;
  color: #f2f3f5;
}

body.dark #view-home .gw-hero-ctas .gw-ghost-btn:hover {
  border-color: #ff9a52;
  background: #292c31;
  color: #ffc397;
}