/*
 * Platform shell
 * Shared visual layer for landing, manage, and dashboard surfaces.
 * This sits above the token system and below feature-specific styling.
 */

body.platform-app,
body.platform-marketing {
  min-height: 100vh;
}

body.platform-app {
  --sq-bg-primary: #ffffff;
  --sq-bg-secondary: #f4f7fb;
  --sq-bg-tertiary: #ebf1f7;
  --sq-bg-hover: #edf3fb;
  --sq-bg-elevated: #ffffff;
  --sq-border-default: rgba(140, 159, 181, 0.24);
  --sq-border-hover: rgba(70, 94, 124, 0.3);
  --sq-text-primary: #132033;
  --sq-text-secondary: #5f6d80;
  --sq-text-tertiary: #8190a3;
  --sq-shadow-sm: 0 10px 30px rgba(19, 32, 51, 0.06);
  --sq-shadow-default: 0 18px 42px rgba(19, 32, 51, 0.08);
  --sq-shadow-md: 0 24px 58px rgba(19, 32, 51, 0.12);
  --sq-shadow-lg: 0 28px 72px rgba(19, 32, 51, 0.16);
  background:
    radial-gradient(circle at top left, rgba(0, 106, 255, 0.08), transparent 28%),
    radial-gradient(circle at top right, rgba(0, 168, 107, 0.09), transparent 24%),
    linear-gradient(180deg, #f7faff 0%, #eef3f8 48%, #f5f7fb 100%);
  color: var(--sq-text-primary);
}

body.platform-app.dark,
[data-theme="dark"] body.platform-app,
.dark body.platform-app {
  --sq-bg-primary: #111827;
  --sq-bg-secondary: #0b1220;
  --sq-bg-tertiary: #162132;
  --sq-bg-hover: #182334;
  --sq-bg-elevated: #162132;
  --sq-border-default: rgba(148, 163, 184, 0.16);
  --sq-border-hover: rgba(148, 163, 184, 0.28);
  --sq-text-primary: #f7fafc;
  --sq-text-secondary: #a6b3c4;
  --sq-text-tertiary: #7e8ba0;
  --sq-shadow-sm: 0 18px 36px rgba(2, 6, 23, 0.34);
  --sq-shadow-default: 0 22px 52px rgba(2, 6, 23, 0.44);
  --sq-shadow-md: 0 26px 64px rgba(2, 6, 23, 0.52);
  --sq-shadow-lg: 0 34px 84px rgba(2, 6, 23, 0.58);
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.18), transparent 26%),
    radial-gradient(circle at top right, rgba(16, 185, 129, 0.14), transparent 20%),
    linear-gradient(180deg, #08101c 0%, #0b1220 50%, #0f1728 100%);
}

body.platform-marketing {
  background: #081018;
  color: #f8fafc;
}

body.platform-marketing::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 15%, rgba(16, 185, 129, 0.18), transparent 24%),
    radial-gradient(circle at 84% 8%, rgba(59, 130, 246, 0.22), transparent 30%),
    radial-gradient(circle at 60% 70%, rgba(20, 184, 166, 0.12), transparent 26%);
  opacity: 0.95;
}

.platform-app .sq-card,
.platform-app .sq-payment-card,
.platform-app .sq-stat-card,
.platform-app .sq-modal,
.platform-app .sq-dropdown-menu {
  border-color: var(--sq-border-default);
  box-shadow: var(--sq-shadow-sm);
}

.platform-app .sq-card,
.platform-app .sq-stat-card {
  border-radius: 20px;
}

.platform-app .sq-card-interactive:hover,
.platform-app .sq-stat-card:hover {
  box-shadow: var(--sq-shadow-md);
  transform: translateY(-3px);
}

.platform-app .sq-btn {
  min-height: 42px;
  border-radius: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: none;
}

.platform-app .sq-btn-primary {
  background: linear-gradient(135deg, #006aff 0%, #1d4ed8 100%);
  box-shadow: 0 12px 24px rgba(0, 106, 255, 0.2);
}

.platform-app .sq-btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(0, 106, 255, 0.24);
}

.platform-app .sq-btn-secondary,
.platform-app .sq-btn-ghost {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
}

.platform-app .sq-input,
.platform-app .sq-select,
.platform-app .sq-textarea {
  min-height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
}

.platform-app.dark .sq-input,
.platform-app.dark .sq-select,
.platform-app.dark .sq-textarea,
[data-theme="dark"] body.platform-app .sq-input,
[data-theme="dark"] body.platform-app .sq-select,
[data-theme="dark"] body.platform-app .sq-textarea,
.dark body.platform-app .sq-input,
.dark body.platform-app .sq-select,
.dark body.platform-app .sq-textarea {
  background: rgba(17, 24, 39, 0.88);
}

.platform-app .sq-tabs {
  gap: 0.5rem;
  border-bottom: 0;
  padding: 0.35rem;
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(14px);
  border: 1px solid var(--sq-border-default);
  border-radius: 18px;
}

.platform-app .sq-tab {
  border-radius: 14px;
  margin-bottom: 0;
  border-bottom: 0;
  color: var(--sq-text-secondary);
}

.platform-app .sq-tab.active,
.platform-app .sq-tab[aria-selected="true"] {
  color: var(--sq-text-primary);
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(19, 32, 51, 0.08);
}

.platform-app.dark .sq-tab.active,
[data-theme="dark"] body.platform-app .sq-tab.active,
.dark body.platform-app .sq-tab.active,
.platform-app.dark .sq-tab[aria-selected="true"],
[data-theme="dark"] body.platform-app .sq-tab[aria-selected="true"],
.dark body.platform-app .sq-tab[aria-selected="true"] {
  background: #162132;
}

.platform-app .sq-table th {
  background: rgba(244, 247, 251, 0.92);
}

.platform-app .sq-table tbody tr {
  transition: background-color 150ms ease, transform 150ms ease;
}

.platform-app .sq-table tbody tr:hover {
  background: rgba(237, 243, 251, 0.88);
}

.platform-app .uber-sidebar,
.platform-app .uber-sidebar-bottom {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.platform-app.dark .uber-sidebar,
.platform-app.dark .uber-sidebar-bottom,
[data-theme="dark"] body.platform-app .uber-sidebar,
[data-theme="dark"] body.platform-app .uber-sidebar-bottom,
.dark body.platform-app .uber-sidebar,
.dark body.platform-app .uber-sidebar-bottom {
  background: rgba(11, 18, 32, 0.82);
}

.platform-app .uber-sidebar {
  border-right: 1px solid var(--sq-border-default);
  box-shadow: 14px 0 30px rgba(19, 32, 51, 0.06);
}

.platform-app .uber-sidebar-item,
.platform-app .sidebar-category-header,
.platform-app .uber-sidebar-bottom button,
.platform-app .uber-sidebar-bottom a {
  border-radius: 14px;
}

.platform-app .uber-sidebar-item.active {
  background: linear-gradient(135deg, #006aff 0%, #1d4ed8 100%);
  box-shadow: 0 10px 20px rgba(0, 106, 255, 0.2);
}

.platform-app .uber-main-content {
  background: transparent;
}

.platform-app .nav-desktop,
.platform-app nav.sticky,
.platform-app nav.bg-white {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--sq-border-default) !important;
}

.platform-app.dark .nav-desktop,
.platform-app.dark nav.sticky,
.platform-app.dark nav.bg-white,
[data-theme="dark"] body.platform-app .nav-desktop,
[data-theme="dark"] body.platform-app nav.sticky,
[data-theme="dark"] body.platform-app nav.bg-white,
.dark body.platform-app .nav-desktop,
.dark body.platform-app nav.sticky,
.dark body.platform-app nav.bg-white {
  background: rgba(11, 18, 32, 0.8) !important;
}

.platform-marketing .hero-pattern {
  position: relative;
  background:
    radial-gradient(circle at top left, rgba(16, 185, 129, 0.2), transparent 26%),
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.26), transparent 28%),
    linear-gradient(180deg, #061018 0%, #0a1724 38%, #0d1825 100%);
}

.platform-marketing .glass-dark,
.platform-marketing .feature-card,
.platform-marketing .bucket-card,
.platform-marketing .course-card-carousel {
  background: linear-gradient(180deg, rgba(14, 23, 37, 0.9) 0%, rgba(10, 17, 27, 0.92) 100%);
  border-color: rgba(148, 163, 184, 0.12);
  box-shadow: 0 18px 42px rgba(2, 6, 23, 0.24);
}

.platform-marketing .feature-card:hover,
.platform-marketing .bucket-card:hover,
.platform-marketing .course-card-carousel:hover {
  border-color: rgba(52, 211, 153, 0.34);
  box-shadow: 0 24px 54px rgba(2, 6, 23, 0.34);
}

.platform-marketing .btn-primary,
.platform-marketing a.btn-primary {
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(16, 185, 129, 0.22);
}

.platform-marketing .hero-pattern h1,
.platform-marketing section h2 {
  letter-spacing: -0.04em;
}

.platform-marketing .hero-pattern p,
.platform-marketing section p {
  color: rgba(226, 232, 240, 0.86);
}

.platform-marketing .section-dark,
.platform-marketing .section-darker {
  background:
    linear-gradient(180deg, rgba(6, 16, 24, 0.92) 0%, rgba(10, 23, 36, 0.96) 100%);
}

.platform-marketing .logo-item,
.platform-marketing .course-card-carousel {
  border-radius: 18px;
}

@media (max-width: 1023px) {
  .platform-app .uber-sidebar {
    width: min(280px, calc(100vw - 2rem));
    border-radius: 0 24px 24px 0;
  }

  .platform-app .uber-main-content {
    padding-top: 1rem;
  }
}