/* Shared wine shell for commands / status / servers / dashboard */

.page-wine {
  --bg: #160a10;
  --surface: #241018;
  --surface2: #2c141c;
  --surface3: #341820;
  --text: rgba(250, 242, 240, 0.94);
  --muted: rgba(250, 242, 240, 0.7);
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  --shadow-hover: 0 16px 36px rgba(139, 41, 66, 0.28);
  --wine-line: rgba(250, 242, 240, 0.14);
  --wine-rose: #f0b7c4;
  --wine-hot: #c43d5e;
  background: var(--bg);
  color: var(--text);
  font-family: Manrope, Roboto, "Segoe UI", system-ui, sans-serif;
}

.page-wine .app-preloader {
  background: #160a10;
}

.page-wine .app-preloader-title {
  color: rgba(250, 242, 240, 0.88);
}

.page-wine .main-wrapper,
.page-wine .status-shell,
.page-wine .dashboard-shell {
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(139, 41, 66, 0.2), transparent 55%),
    #160a10;
}

.page-wine .app-bar--public {
  background: rgba(22, 10, 16, 0.82);
  border-bottom: 1px solid var(--wine-line);
  box-shadow: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.page-wine .nav-link--public {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 999px;
}

.page-wine .nav-link--public.active {
  background: rgba(196, 61, 94, 0.28);
}

.page-wine .app-footer {
  background: #10060a;
  border-top: 1px solid var(--wine-line);
}

.page-wine .app-footer-brand,
.page-wine .app-footer-links a {
  color: rgba(250, 242, 240, 0.68);
}

.page-wine .app-footer-links a:hover {
  color: #fff;
}

.page-wine .page h1,
.page-wine .page-header h1,
.page-wine .dashboard-main h1,
.page-wine .dashboard-panel h1,
.page-wine .dashboard-panel > h1,
.page-wine .status-intro h1,
.page-wine .commands-page-header h1,
.page-wine .commands-category-head h2,
.page-wine .command-group-head h2,
.page-wine .setting-card h2,
.page-wine .chart-card h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  letter-spacing: -0.02em;
  color: #fff;
}

.page-wine .page-header h1,
.page-wine .commands-page-header h1,
.page-wine .status-intro h1,
.page-wine .dashboard-panel h1,
.page-wine .dashboard-panel > h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 600;
  color: #fff;
}

.page-wine .subtitle,
.page-wine .status-intro-line,
.page-wine .status-intro-sub,
.page-wine .dashboard-panel > .subtitle,
.page-wine .dashboard-main .subtitle {
  color: var(--muted);
}

.page-wine .page-servers .page-header::before,
.page-wine .commands-page-header::before {
  background: linear-gradient(180deg, var(--wine-hot), var(--primary-dark));
}

/* Cards / surfaces */
.page-wine .info-box,
.page-wine .chart-card,
.page-wine .commands-category-section,
.page-wine .commands-empty,
.page-wine .empty-state,
.page-wine .guild-card,
.page-wine .setting-card,
.page-wine .mod-filter-card,
.page-wine .module-nav-card,
.page-wine .command-group-card,
.page-wine .dashboard-main .setting-card {
  background:
    linear-gradient(165deg, rgba(196, 61, 94, 0.14), transparent 42%),
    #241018;
  border: 1px solid rgba(240, 183, 196, 0.2);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
  color: var(--text);
}

.page-wine .info-box {
  overflow: hidden;
}

.page-wine .info-box-icon {
  background: linear-gradient(160deg, var(--wine-hot), var(--primary));
}

/* Base style.css hardcodes dark rgba() on .info-box-text / .info-box-number
   (light-theme Material cards). Markup from commands-page.js + status.js uses
   .info-box-text / .info-box-number / .info-box-more-row — not title/value. */
.page-wine .info-box-content,
.page-wine .stat-card-body {
  color: rgba(250, 242, 240, 0.94);
}

.page-wine .info-box-text,
.page-wine .info-box-title,
.page-wine .stat-card-label {
  color: rgba(250, 242, 240, 0.74);
}

.page-wine .info-box-number,
.page-wine .info-box-value,
.page-wine .stat-card-value {
  color: #fff;
}

.page-wine .info-box-more-row,
.page-wine .stat-card-extra {
  color: rgba(250, 242, 240, 0.66);
}

.page-wine .info-badge {
  background: rgba(196, 61, 94, 0.85);
  color: #fff;
}

.page-wine .commands-stats-note,
.page-wine .chart-note {
  color: rgba(250, 242, 240, 0.58);
}

.page-wine .search-wrap .search,
.page-wine .search,
.page-wine .commands-search .search {
  background: rgba(250, 242, 240, 0.05);
  border: 1px solid rgba(240, 183, 196, 0.24);
  border-radius: 14px;
  color: #fff;
  box-shadow: none;
}

.page-wine .search::placeholder {
  color: rgba(250, 242, 240, 0.55);
}

.page-wine .search-icon {
  color: var(--wine-rose);
}

/* Commands — beat style.css light-theme rgba(0,0,0,…) on every dict/row token.
   Use explicit cream/white (not only var(--muted)) so contrast can't collapse
   if a parent redefines --muted/--text. */
.page-wine .commands-cat-link {
  color: rgba(250, 242, 240, 0.72);
  border-radius: 12px;
}

.page-wine .commands-cat-link:hover {
  background: rgba(196, 61, 94, 0.14);
  color: #fff;
}

.page-wine .commands-cat-link.active {
  background: rgba(196, 61, 94, 0.24);
  color: #fff;
  font-weight: 600;
}

.page-wine .commands-cat-count {
  background: rgba(250, 242, 240, 0.08);
  color: rgba(250, 242, 240, 0.58);
}

.page-wine .commands-cat-link.active .commands-cat-count {
  background: rgba(240, 183, 196, 0.18);
  color: var(--wine-rose);
}

.page-wine .commands-category-head {
  border-bottom-color: rgba(250, 242, 240, 0.1);
}

.page-wine .commands-category-section,
.page-wine .commands-category-section .commands-dict,
.page-wine .commands-category-section .commands-dict-row {
  color: rgba(250, 242, 240, 0.94);
}

.page-wine .commands-category-head h2,
.page-wine .commands-category-section .commands-category-head h2 {
  color: #fff;
}

.page-wine .commands-category-meta,
.page-wine .commands-category-section .commands-category-meta,
.page-wine .commands-dict-desc,
.page-wine .commands-category-section .commands-dict-desc,
.page-wine .commands-dict-usage,
.page-wine .commands-category-section .commands-dict-usage,
.page-wine .commands-dict-usage-label,
.page-wine .commands-category-section .commands-dict-usage-label,
.page-wine .command-row-desc,
.page-wine .command-row-usage,
.page-wine .command-row-channel-label,
.page-wine .command-table-head,
.page-wine .commands-empty,
.page-wine .commands-stats-note {
  color: rgba(250, 242, 240, 0.72);
}

.page-wine .commands-stats-note a {
  color: var(--wine-rose);
}

.page-wine .commands-stats-note a:hover {
  color: #fff;
}

.page-wine .commands-dict-row,
.page-wine .command-row {
  border-top-color: rgba(250, 242, 240, 0.08);
}

.page-wine .commands-dict-body {
  min-width: 0;
}

.page-wine .commands-dict-name,
.page-wine .commands-category-section .commands-dict-name,
.page-wine .command-row-name,
.page-wine .page-public code.commands-dict-name {
  color: #fff;
  background: rgba(196, 61, 94, 0.16);
  border: 1px solid rgba(240, 183, 196, 0.18);
}

.page-wine .page-public code:not(.commands-dict-name) {
  color: var(--wine-rose);
  background: rgba(196, 61, 94, 0.18);
}

.page-wine .command-group-head {
  background: rgba(196, 61, 94, 0.12);
  border-bottom-color: rgba(250, 242, 240, 0.1);
}

.page-wine .command-group-head h2 {
  color: var(--wine-rose);
}

@media (max-width: 860px) {
  .page-wine .commands-cat-link {
    background: rgba(250, 242, 240, 0.06);
    box-shadow: none;
  }

  .page-wine .commands-cat-link.active {
    background: rgba(196, 61, 94, 0.24);
  }
}

/* Status */
.page-wine .status-intro {
  margin-bottom: 1.5rem;
}

.page-wine .chart-card h3 {
  font-size: 1.15rem;
  font-weight: 600;
}

/* Servers — Juniper-style banner cards (wine) */
.page-wine .guild-card {
  background:
    linear-gradient(165deg, rgba(196, 61, 94, 0.16), transparent 45%),
    #241018;
}

.page-wine .guild-card--banner {
  background: #1c0c12;
  overflow: hidden;
}

.page-wine .guild-card--banner .guild-card-body {
  background:
    linear-gradient(180deg, rgba(196, 61, 94, 0.12), transparent 70%),
    #241018;
  border-top: 1px solid rgba(240, 183, 196, 0.12);
}

.page-wine .guild-card:hover {
  border-color: rgba(240, 183, 196, 0.42);
  box-shadow: 0 16px 36px rgba(139, 41, 66, 0.28);
}

.page-wine .guild-banner-shade {
  background:
    linear-gradient(180deg, rgba(22, 10, 16, 0.18) 0%, rgba(22, 10, 16, 0.55) 100%),
    linear-gradient(90deg, rgba(80, 20, 40, 0.32) 0%, transparent 50%);
}

.page-wine .guild-banner-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
}

.page-wine .guild-card--banner .guild-avatar {
  border-color: #241018;
  background: #341820;
}

.page-wine .guild-name,
.page-wine .guild-action-hint {
  color: #fff;
}

.page-wine .guild-badge--ok {
  background: rgba(67, 160, 71, 0.18);
  color: #9be7a0;
}

.page-wine .guild-badge--off {
  background: rgba(250, 242, 240, 0.08);
  color: var(--muted);
}

.page-wine .guild-card--installed .guild-chevron {
  background: rgba(196, 61, 94, 0.22);
  color: var(--wine-rose);
}

.page-wine .guild-card--installed:hover .guild-chevron {
  background: var(--wine-hot);
  color: #fff;
}

.page-wine .guild-invite-btn {
  background: linear-gradient(160deg, var(--wine-hot), var(--primary));
  border: none;
  color: #fff;
  box-shadow: 0 6px 16px rgba(139, 41, 66, 0.35);
}

.page-wine .guild-invite-btn:hover {
  filter: brightness(1.08);
  color: #fff;
}

.page-wine .guild-count-pill {
  background: rgba(196, 61, 94, 0.22);
  color: var(--wine-rose);
  border: 1px solid rgba(240, 183, 196, 0.25);
}

.page-wine .skeleton-card--guild {
  background: linear-gradient(
    90deg,
    #241018 0%,
    #341820 50%,
    #241018 100%
  );
  background-size: 200% 100%;
}

@media (max-width: 480px) {
  .page-wine .guild-banner {
    height: 96px;
  }

  .page-wine .guild-banner-name {
    font-size: 1.12rem;
  }

  .page-wine .guild-card--banner .guild-card-body {
    padding: 1.25rem 0.9rem 0.9rem;
    gap: 0.65rem;
  }

  .page-wine .guild-card--banner .guild-avatar {
    width: 50px;
    height: 50px;
    left: 0.85rem;
  }

  .page-wine .guild-card--banner .guild-info {
    padding-left: 3.85rem;
  }
}

/* Dashboard shell */
.page-wine.dashboard-page .dashboard-topbar {
  background: rgba(22, 10, 16, 0.9);
  border-bottom: 1px solid var(--wine-line);
  box-shadow: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.page-wine .dashboard-sidebar {
  background: #1a0c12;
  border-right: 1px solid var(--wine-line);
}

.page-wine .dashboard-sidebar-label {
  color: rgba(240, 183, 196, 0.58);
  letter-spacing: 0.14em;
}

.page-wine .nav-item-row,
.page-wine .nav-item-row:hover,
.page-wine .nav-item-row.active {
  color: var(--muted);
}

.page-wine .nav-item-row {
  border-radius: 12px;
}

.page-wine .nav-item-row:hover {
  background: rgba(196, 61, 94, 0.12);
  color: #fff;
}

.page-wine .nav-item-row.active {
  background: rgba(196, 61, 94, 0.22);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--wine-hot);
}

.page-wine .nav-item-desc,
.page-wine .nav-item-row.active .nav-item-desc {
  color: rgba(250, 242, 240, 0.52);
}

/* Beat style.css icon colors that hardcode rgba(0,0,0,…) */
.page-wine .nav-item-icon-wrap,
.page-wine .nav-item-row .nav-item-icon-wrap {
  color: rgba(240, 183, 196, 0.72);
}

/* Tiles only on parent rows (child wraps are 20px, no fixed height) */
.page-wine .nav-item-row:not(.nav-item-row--child) .nav-item-icon-wrap {
  background: rgba(250, 242, 240, 0.06);
  box-shadow: none;
}

.page-wine .nav-item-row:hover .nav-item-icon-wrap {
  color: var(--wine-rose);
}

.page-wine .nav-item-row:not(.nav-item-row--child):hover .nav-item-icon-wrap {
  background: rgba(196, 61, 94, 0.18);
}

.page-wine .nav-item-row.active .nav-item-icon-wrap {
  color: #fff;
}

.page-wine .nav-item-row.active:not(.nav-item-row--child) .nav-item-icon-wrap {
  background: linear-gradient(135deg, var(--wine-hot), var(--primary));
  box-shadow: none;
}

/* Stroke-only Feather-style icons (fill="none" in markup). Forcing
   fill:currentColor filled closed paths and looked glitchy/blobbed. */
.page-wine .nav-item-icon,
.page-wine .nav-item-icon-wrap svg,
.page-wine .nav-item-chevron svg {
  color: inherit;
  fill: none;
  stroke: currentColor;
}

.page-wine .nav-item-chevron,
.page-wine .nav-item-chevron:hover {
  color: rgba(240, 183, 196, 0.65);
}

.page-wine .nav-item-chevron:hover {
  color: var(--wine-rose);
  background: rgba(196, 61, 94, 0.14);
}

.page-wine .nav-item-children {
  border-left-color: rgba(240, 183, 196, 0.18);
}

.page-wine .dashboard-main {
  color: var(--text);
}

/* Settings — beat style.css redesign (.dashboard-main .setting-*) black text */
.page-wine .setting-card h2,
.page-wine .setting-subhead,
.page-wine .setting-card-subtitle,
.page-wine .dashboard-main .setting-card > h2,
.page-wine .dashboard-main .setting-card h2 {
  color: #fff;
  border-bottom-color: rgba(250, 242, 240, 0.1);
}

.page-wine .dashboard-main .setting-card {
  background:
    linear-gradient(165deg, rgba(196, 61, 94, 0.14), transparent 42%),
    #241018;
  border-color: rgba(240, 183, 196, 0.2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.page-wine .dashboard-main .setting-card:hover {
  border-color: rgba(240, 183, 196, 0.35);
  box-shadow: 0 14px 34px rgba(139, 41, 66, 0.18);
}

.page-wine .setting-card--soon,
.page-wine .setting-hint,
.page-wine .dashboard-main .setting-hint,
.page-wine .dashboard-main .field-hint,
.page-wine .field-hint {
  color: var(--muted);
}

.page-wine .setting-card label:not(.checkbox-row),
.page-wine .setting-field-label,
.page-wine .module-nav-desc,
.page-wine .dashboard-main .setting-card label:not(.checkbox-row),
.page-wine .dashboard-main .setting-field-label {
  color: var(--muted);
}

.page-wine .setting-card label.checkbox-row,
.page-wine .module-nav-card-top strong,
.page-wine .dashboard-main .setting-card label.checkbox-row,
.page-wine .dashboard-main .setting-card label.checkbox-row .checkbox-row-text {
  color: #fff;
}

.page-wine .dashboard-main .setting-card label.checkbox-row:hover {
  background: rgba(196, 61, 94, 0.12);
}

.page-wine .dashboard-main .field-hint code,
.page-wine .dashboard-main .setting-hint code,
.page-wine .dashboard-main .checkbox-row-text code,
.page-wine .checkbox-row-text code {
  background: rgba(196, 61, 94, 0.18);
  color: var(--wine-rose);
}

.page-wine .setting-card input[type="text"],
.page-wine .setting-card input[type="number"],
.page-wine .setting-card input[type="url"],
.page-wine .setting-card textarea,
.page-wine .setting-card select,
.page-wine .mod-filter-fields input[type="text"],
.page-wine .mod-filter-fields input[type="number"],
.page-wine .mod-filter-fields select,
.page-wine .mod-filter-fields textarea,
.page-wine .command-row-channel input,
.page-wine .dashboard-main .setting-card input[type="text"],
.page-wine .dashboard-main .setting-card input[type="number"],
.page-wine .dashboard-main .setting-card input[type="url"],
.page-wine .dashboard-main .setting-card textarea,
.page-wine .dashboard-main .setting-card select,
.page-wine .color-picker-hex,
.page-wine .color-picker-rgb input {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(240, 183, 196, 0.2);
  color: #fff;
  border-radius: 10px;
  box-shadow: none;
}

.page-wine .dashboard-main .setting-card input[type="text"]:hover,
.page-wine .dashboard-main .setting-card input[type="number"]:hover,
.page-wine .dashboard-main .setting-card input[type="url"]:hover,
.page-wine .dashboard-main .setting-card textarea:hover,
.page-wine .dashboard-main .setting-card select:hover {
  border-color: rgba(240, 183, 196, 0.35);
}

.page-wine .setting-card input:focus,
.page-wine .setting-card textarea:focus,
.page-wine .setting-card select:focus,
.page-wine .dashboard-main .setting-card input[type="text"]:focus,
.page-wine .dashboard-main .setting-card input[type="number"]:focus,
.page-wine .dashboard-main .setting-card input[type="url"]:focus,
.page-wine .dashboard-main .setting-card textarea:focus,
.page-wine .dashboard-main .setting-card select:focus {
  border-color: rgba(240, 183, 196, 0.45);
  outline: none;
  box-shadow: 0 0 0 3px rgba(196, 61, 94, 0.2);
  background: rgba(0, 0, 0, 0.28);
}

.page-wine .dashboard-main .setting-card input::placeholder,
.page-wine .dashboard-main .setting-card textarea::placeholder,
.page-wine .setting-card input::placeholder,
.page-wine .setting-card textarea::placeholder {
  color: rgba(250, 242, 240, 0.42);
}

.page-wine .dashboard-main .setting-card select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23f0b7c4' d='M1.4.4 6 5l4.6-4.6L12 2l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 11px;
}

.page-wine .dashboard-main .setting-card label.checkbox-row input[type="checkbox"] {
  background: rgba(250, 242, 240, 0.22);
}

.page-wine .color-picker-rgb label,
.page-wine .color-picker-swatch {
  color: var(--muted);
  border-color: rgba(240, 183, 196, 0.22);
}

.page-wine .mod-filter-head h3 {
  color: #fff;
}

.page-wine .mod-filter-head p,
.page-wine .mod-filter-fields label:not(.checkbox-row) {
  color: var(--muted);
}

.page-wine .module-nav-heading {
  color: #fff;
}

.page-wine .module-nav-status--on {
  background: rgba(76, 175, 80, 0.18);
  color: #9be7a0;
}

.page-wine .module-nav-status--off {
  background: rgba(250, 242, 240, 0.08);
  color: var(--muted);
}

/* Ranking / rewards panels that still hardcode black */
.page-wine .ranking-members-status,
.page-wine .ranking-members-table th,
.page-wine .ranking-member-name,
.page-wine .ranking-member-sub,
.page-wine .ranking-col-num,
.page-wine .ranking-members-page-label {
  color: var(--muted);
}

.page-wine .ranking-member-name,
.page-wine .ranking-col-xp {
  color: #fff;
}

.page-wine .ranking-members-table thead {
  background: rgba(250, 242, 240, 0.04);
}

.page-wine .ranking-members-table th,
.page-wine .ranking-members-table td,
.page-wine .ranking-members-pagination {
  border-color: rgba(250, 242, 240, 0.1);
}

.page-wine .ranking-members-table th.is-sorted {
  color: var(--wine-rose);
}

/* Rewards tables (light-UI hardcoded black) */
.page-wine .rewards-ui .level-rewards-table th,
.page-wine .rewards-ui .level-rewards-table td,
.page-wine .rewards-ui .level-reward-muted,
.page-wine .rewards-ui .field-hint,
.page-wine .rewards-ui .btn-ghost {
  color: var(--muted);
  border-color: rgba(240, 183, 196, 0.18);
}

.page-wine .rewards-ui .level-rewards-table td,
.page-wine .rewards-ui .field-hint strong {
  color: #fff;
}

.page-wine .rewards-ui .level-rewards-table td strong,
.page-wine .rewards-ui .level-reward-chip {
  color: var(--wine-rose);
  background: rgba(196, 61, 94, 0.16);
  border-color: rgba(240, 183, 196, 0.2);
}

.page-wine .rewards-ui .btn-ghost {
  background: transparent;
  color: #fff;
}

.page-wine .rewards-ui .btn-ghost:hover {
  background: rgba(196, 61, 94, 0.14);
  color: #fff;
  border-color: rgba(240, 183, 196, 0.35);
}

.page-wine .alert-error {
  background: rgba(239, 83, 80, 0.12);
  border: 1px solid rgba(239, 83, 80, 0.35);
  color: #ffb4b0;
}

.page-wine .btn-ghost {
  border-color: rgba(250, 242, 240, 0.22);
  color: #fff;
}

.page-wine .btn-ghost:hover {
  background: rgba(250, 242, 240, 0.08);
  color: #fff;
}

@media (max-width: 640px) {
  .page-wine .nav-label {
    display: none;
  }
}