:root {
  --topbar-h: 58px;
  --sidebar-w: 264px;
  --bg-topbar: rgba(3, 10, 18, 0.82);
  --bg-sidebar: rgba(5, 15, 26, 0.76);
  --bg-content: #020913;
  --bg-card: rgba(8, 23, 39, 0.82);
  --bg-input: rgba(255, 255, 255, 0.035);
  --bg-hover: rgba(25, 227, 255, 0.08);
  --bg-active: rgba(25, 227, 255, 0.12);
  --surface: rgba(7, 20, 34, 0.72);
  --surface-strong: rgba(8, 23, 39, 0.92);
  --text: #eef9ff;
  --text-muted: #98b4c9;
  --text-label: #b0f4ff;
  --text-link: #19e3ff;
  --border: rgba(124, 215, 255, 0.14);
  --border-dark: rgba(124, 215, 255, 0.08);
  --border-bright: rgba(124, 215, 255, 0.32);
  --teal: #19e3ff;
  --teal-hover: #86f6ff;
  --teal-dim: rgba(25, 227, 255, 0.1);
  --teal-glow: rgba(25, 227, 255, 0.26);
  --blue: #4f8cff;
  --green: #2ce6a7;
  --yellow: #ffbf52;
  --red: #ff6f91;
  --gradient-teal: linear-gradient(135deg, #19e3ff 0%, #4f8cff 100%);
  --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  --gradient-sidebar: linear-gradient(180deg, rgba(8, 23, 39, 0.82), rgba(2, 9, 19, 0.9));
  --radius: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-card: 0 28px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-btn: 0 18px 38px rgba(25, 227, 255, 0.22);
  --shadow-modal: 0 30px 90px rgba(0, 0, 0, 0.62);
}

html,
body {
  min-height: 100%;
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  color: var(--text);
  background: #020913;
}

body {
  isolation: isolate;
  background:
    radial-gradient(circle at 10% 14%, rgba(25, 227, 255, 0.14), transparent 24%),
    radial-gradient(circle at 86% 18%, rgba(79, 140, 255, 0.18), transparent 24%),
    radial-gradient(circle at 70% 82%, rgba(17, 80, 152, 0.16), transparent 24%),
    linear-gradient(180deg, #071624 0%, #020913 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent 88%);
  z-index: -2;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 0%, rgba(2, 9, 19, 0.76) 100%);
  z-index: -1;
}

#select-page,
#dashboard,
#tides-nav-bar,
#tides-splash {
  position: relative;
  z-index: 1;
}

#dashboard {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 14%, rgba(25, 227, 255, 0.1), transparent 24%),
    radial-gradient(circle at 86% 18%, rgba(79, 140, 255, 0.12), transparent 24%),
    linear-gradient(180deg, #071624 0%, #020913 100%);
}

#tides-splash {
  position: fixed;
  z-index: 99999;
  background: #070a12;
}

.ts-bg-grid {
  background-image: radial-gradient(rgba(36,160,160,0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
}

.login-title,
.ss-card-title,
.page-title,
.stat-value,
.card-title,
.modal-title,
h1,
h2,
h3 {
  font-family: Sora, "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  letter-spacing: 0;
}

.topbar {
  height: var(--topbar-h);
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.dash-body {
  min-height: calc(100vh - var(--topbar-h));
  background:
    radial-gradient(circle at 72% 20%, rgba(79, 140, 255, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(7, 22, 36, 0.5), rgba(2, 9, 19, 0.96));
}

.dash-inner {
  background: transparent;
}

.sidebar {
  background: var(--gradient-sidebar);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(18px);
  box-shadow: 18px 0 52px rgba(0, 0, 0, 0.2);
}

.sidebar-top,
.sidebar-footer {
  border-color: var(--border);
}

.nav-section-label {
  color: rgba(176, 244, 255, 0.42);
  letter-spacing: 0.16em;
}

.nav-item {
  color: #83a8c4;
  border-radius: 0 16px 16px 0;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.nav-item:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  transform: translateX(2px);
}

.nav-item.active {
  color: var(--teal);
  background: linear-gradient(90deg, rgba(25, 227, 255, 0.14), rgba(79, 140, 255, 0.04));
  border-left-color: var(--teal);
}

.sidebar-home-btn,
.sidebar-fetch-btn,
.topbar-user,
.server-chip,
.btn,
.btn-small,
.btn-primary,
.btn-secondary,
.btn-discord,
button {
  border-radius: 999px;
}

.sidebar-home-btn,
.sidebar-fetch-btn,
.server-chip,
.topbar-user,
.ss-user-pill {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border);
  color: var(--text);
}

.sidebar-fetch-btn:hover,
.server-chip:hover,
.topbar-user:hover {
  border-color: var(--border-bright);
  box-shadow: 0 14px 32px rgba(6, 15, 26, 0.3);
}

.dash-main {
  background: transparent;
  min-height: calc(100vh - var(--topbar-h));
}

.page-header-text h2,
.page-title,
.card-title,
.stat-value {
  color: var(--text);
}

.page-header-text p,
.card-description,
.stat-label,
.setting-description {
  color: #a8c4d8;
}

.page {
  max-width: 1120px;
}

.page-header,
.section-header {
  border-bottom-color: var(--border);
}

.page-icon,
.section-icon,
.form-icon,
.stat-icon,
.card-icon,
.module-icon {
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(25, 227, 255, 0.13), rgba(79, 140, 255, 0.08));
  border: 1px solid rgba(124, 215, 255, 0.16);
  color: var(--teal);
}

.card,
.settings-card,
.stat-card,
.module-card,
.feat-top-card,
.feat-row,
.panel,
.setting-card,
.case-card,
.ticket-card,
.template-card,
.rr-panel-card,
.giveaway-card,
.leaderboard-row,
.command-card,
.cmd-card,
.form-card,
.modal,
.ss-center-card,
.login-box {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(18px);
}

.card::after,
.settings-card::after,
.stat-card::after,
.module-card::after,
.feat-top-card::after,
.feat-row::after,
.panel::after,
.setting-card::after,
.case-card::after,
.ticket-card::after,
.template-card::after,
.rr-panel-card::after,
.giveaway-card::after,
.command-card::after,
.cmd-card::after,
.ss-center-card::after,
.login-box::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 30%);
}

.feature-list,
.feat-top-grid,
.stats-grid,
.module-grid,
.settings-grid,
.form-grid {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.feature-list::after,
.feat-top-grid::after,
.stats-grid::after,
.module-grid::after,
.settings-grid::after,
.form-grid::after {
  display: none !important;
}

.stat-card,
.module-card,
.feat-top-card,
.feat-row,
.setting-card,
.case-card,
.ticket-card,
.template-card,
.command-card {
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.stat-card:hover,
.module-card:hover,
.feat-top-card:hover,
.feat-row:hover,
.setting-card:hover,
.case-card:hover,
.ticket-card:hover,
.template-card:hover,
.command-card:hover {
  transform: translateY(-3px);
  border-color: rgba(145, 235, 255, 0.25);
  box-shadow: 0 30px 78px rgba(0, 0, 0, 0.34);
}

.dash-main .feat-top-grid,
.dash-main .feature-list,
.dash-main .stats-grid,
.dash-main .module-grid {
  opacity: 1 !important;
}

.dash-main .feat-top-card,
.dash-main .feat-row,
.dash-main .stat-card,
.dash-main .module-card,
.dash-main .settings-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(8, 24, 40, 0.86) !important;
  border-color: rgba(124, 215, 255, 0.16) !important;
}

.dash-main .feat-row-title,
.dash-main .feat-top-card h3,
.dash-main .stat-value,
.dash-main .page-header-text h2 {
  color: #f1fbff !important;
  opacity: 1 !important;
}

.dash-main .feat-row-desc,
.dash-main .feat-top-card p,
.dash-main .stat-label,
.dash-main .page-header-text p {
  color: #9fbed3 !important;
  opacity: 1 !important;
}

.dash-main .feat-row-icon,
.dash-main .page-header-icon,
.dash-main .stat-icon {
  background: rgba(25, 227, 255, 0.1) !important;
  border: 1px solid rgba(124, 215, 255, 0.16) !important;
  color: var(--teal) !important;
}

input,
textarea,
select,
.input,
.select,
.picker-add-btn,
.picker-chip,
.search-input {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(124, 215, 255, 0.14);
  border-radius: 18px;
  color: var(--text);
}

input:focus,
textarea:focus,
select:focus,
.search-input:focus {
  border-color: rgba(122, 235, 255, 0.38);
  box-shadow: 0 0 0 4px rgba(25, 227, 255, 0.08);
}

.btn-primary,
.btn-discord,
.primary-btn,
button.primary {
  background: var(--gradient-teal);
  color: #03111a;
  border-color: rgba(122, 231, 255, 0.28);
  box-shadow: var(--shadow-btn);
  font-weight: 800;
}

.btn-secondary,
.btn,
.btn-small {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
}

.toggle,
.sidebar-mod-toggle,
.switch,
.toggle-switch {
  background: transparent;
  border-color: transparent;
}

.toggle-switch {
  width: 42px !important;
  height: 24px !important;
}

.toggle-slider {
  border-radius: 999px !important;
  background: rgba(16, 39, 62, 0.88) !important;
  border: 1px solid rgba(124, 215, 255, 0.13) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28);
}

.toggle-slider::before {
  width: 18px !important;
  height: 18px !important;
  left: 2px !important;
  top: 2px !important;
  background: #f1fbff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
}

.toggle-switch input:checked + .toggle-slider {
  background: linear-gradient(135deg, #19e3ff, #2ce6a7) !important;
  border-color: rgba(134, 246, 255, 0.42) !important;
  box-shadow: 0 0 0 3px rgba(25, 227, 255, 0.08);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px) !important;
}

.sidebar-mod-toggle {
  background: rgba(16, 39, 62, 0.88) !important;
  border: 1px solid rgba(124, 215, 255, 0.13) !important;
}

.sidebar-mod-toggle.active,
.sidebar-mod-toggle.on {
  background: linear-gradient(135deg, #19e3ff, #2ce6a7) !important;
}

.badge,
.pill,
.tag,
.status-pill,
.nav-badge {
  border-radius: 999px;
  background: rgba(25, 227, 255, 0.1);
  border: 1px solid rgba(124, 215, 255, 0.16);
  color: #aaf5ff;
}

.modal-overlay {
  background: rgba(1, 8, 16, 0.66);
  backdrop-filter: blur(14px);
  z-index: 9000;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9001;
  width: min(90vw, 760px);
  max-height: 88vh;
  overflow: hidden;
  transform: translate(-50%, -50%);
  flex-direction: column;
}

.toast {
  background: rgba(7, 20, 34, 0.95);
  border: 1px solid rgba(124, 215, 255, 0.16);
  border-radius: 18px;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.28);
}

.log-search-wrap,
.tpl-search-wrap,
.dc-search-wrap,
.picker-search {
  position: relative;
}

.log-search-icon,
.tpl-search-icon,
.dc-search-icon {
  z-index: 2;
  color: #9fbed3 !important;
}

.log-search-input,
.tpl-search-wrap input,
input.dc-search-input,
.picker-search input,
.rr-ep-search,
.search-input {
  min-height: 38px;
  line-height: 20px;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(124, 215, 255, 0.14) !important;
}

.log-search-input {
  padding-left: 38px !important;
}

.tpl-search-wrap input {
  padding-left: 36px !important;
}

input.dc-search-input {
  padding-left: 38px !important;
}

.picker-search input {
  padding-left: 14px !important;
}

select,
.form-control,
.tpl-use-select,
.tpl-use-input,
.tpl-item-card-row input[type="text"],
.tpl-item-card-row select,
.dc-filter-sel {
  min-height: 38px;
  border-radius: 16px !important;
  background-color: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(124, 215, 255, 0.14) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

select,
.tpl-use-select,
.tpl-item-card-row select,
.dc-filter-sel {
  appearance: none;
  padding-right: 38px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #9fbed3 50%),
    linear-gradient(135deg, #9fbed3 50%, transparent 50%) !important;
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50% !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}

select:hover,
.form-control:hover,
.tpl-use-select:hover,
.tpl-use-input:hover,
.dc-filter-sel:hover {
  border-color: rgba(124, 215, 255, 0.24) !important;
}

select:focus,
.form-control:focus,
.tpl-use-select:focus,
.tpl-use-input:focus,
.dc-filter-sel:focus {
  outline: none !important;
  border-color: rgba(122, 235, 255, 0.42) !important;
  box-shadow: 0 0 0 4px rgba(25, 227, 255, 0.08) !important;
}

select option {
  background: #0b1828 !important;
  color: #eef9ff !important;
}

select option:checked {
  background: linear-gradient(135deg, #106984, #124a72) !important;
  color: #ffffff !important;
}

.role-chip,
.prefix-chip,
.tag,
.log-ch-chip,
.picker-chip,
.tpl-var-item code,
.badge,
.pill {
  border-radius: 999px !important;
  background: rgba(25, 227, 255, 0.1) !important;
  border: 1px solid rgba(124, 215, 255, 0.16) !important;
  color: #d8f7ff !important;
}

.role-chip button,
.role-chip .chip-x,
.prefix-chip-del,
.picker-chip-x,
.log-ch-chip-x,
.tpl-grid-del,
.tpl-folder-del-btn,
.tpl-list-item-actions button,
.modal-close,
.picker-modal-close,
.tpl-modal-x,
.tpl-ec-remove,
.tpl-ec-field-del,
.tpl-item-del-btn {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(124, 215, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: #9fbed3 !important;
  line-height: 1 !important;
  padding: 0 !important;
}

.role-chip button:hover,
.role-chip .chip-x:hover,
.prefix-chip-del:hover,
.picker-chip-x:hover,
.log-ch-chip-x:hover,
.tpl-grid-del:hover,
.tpl-folder-del-btn:hover,
.tpl-list-item-actions button:hover,
.modal-close:hover,
.picker-modal-close:hover,
.tpl-modal-x:hover,
.tpl-ec-remove:hover,
.tpl-ec-field-del:hover,
.tpl-item-del-btn:hover {
  border-color: rgba(255, 111, 145, 0.34) !important;
  background: rgba(255, 111, 145, 0.12) !important;
  color: #ffc7d4 !important;
}

.tpl-grid-item,
.tpl-folder-row,
.tpl-list-item,
.tpl-item-card,
.tpl-embed-card,
.tpl-var-item,
.rc-condition-card,
.log-categories-list,
.data-table,
.table-wrap {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.014)),
    rgba(8, 24, 40, 0.82) !important;
  border-color: rgba(124, 215, 255, 0.14) !important;
  border-radius: 18px !important;
}

.tpl-tab.active,
.tpl-sub-tab.active,
.tpl-folder-dp-item.active,
.tpl-sched-day-btn.active {
  color: var(--teal) !important;
  border-color: rgba(25, 227, 255, 0.55) !important;
}

.tpl-action-btn--blue,
.btn-group .btn.active {
  background: var(--gradient-teal) !important;
  color: #03111a !important;
}

.tpl-grid-item-icon,
.feature-icon,
.badge-type.mute {
  color: var(--teal) !important;
  background: rgba(25, 227, 255, 0.1) !important;
  border-color: rgba(124, 215, 255, 0.16) !important;
}

input[type="checkbox"] {
  accent-color: #19e3ff;
}

.ss-bg .ss-orb,
.ss-orb,
.bg-orb {
  display: none !important;
}

.login-page,
#servers-card {
  background:
    radial-gradient(circle at 18% 18%, rgba(25, 227, 255, 0.14), transparent 25%),
    radial-gradient(circle at 82% 18%, rgba(79, 140, 255, 0.18), transparent 26%),
    linear-gradient(180deg, #071624, #020913);
}

.server-card {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border);
}

.server-card:hover {
  border-color: var(--border-bright);
  transform: translateY(-2px);
}

@media (max-width: 760px) {
  .topbar {
    height: auto;
    min-height: var(--topbar-h);
  }

  .page {
    max-width: none;
  }
}