/* ============================================================
   Yours — Global App Stylesheet
   ------------------------------------------------------------
   Injected into every page for a consistent, mobile-first,
   professional look. This file ships BEFORE each page's own
   <style> blocks, so page-specific styles always take priority
   and existing layouts are preserved (only enhanced).
   ============================================================ */

:root {
  --app-bg: #121212;
  --app-surface: #1e1e1e;
  --app-surface-2: #262626;
  --app-text: #f5f5f7;
  --app-text-muted: #9a9a9e;
  --app-border: rgba(255, 255, 255, 0.08);
  --app-accent: #ff4d6d;
  --app-accent-2: #ff5c35;
  --app-gradient: linear-gradient(135deg, #c3244c 0%, #f02a53 50%, #ff3e86 100%);
  --app-radius: 24px;
  --app-radius-sm: 16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

html {
  background: #000;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-color: #121212;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Kill the 300ms tap delay and grey tap flash on touch devices */
button,
a,
input,
textarea,
select,
label {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

img {
  -webkit-user-drag: none;
  user-select: none;
}

:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---- App phone frame ----
   Constrains the whole app to a mobile-width column and centers
   it on larger screens, with a subtle device-style border. */
.app-page {
  max-width: 430px;
  margin-inline: auto;
  min-height: 100dvh;
  position: relative;
}

@media (min-width: 640px) {
  body.app-page {
    border-inline: 1px solid var(--app-border);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.65);
  }
  /* Floating bottom pill navs stay pinned to the viewport and are
     centered to match the phone-frame column. (A transform on body
     would detach `position: fixed` from the viewport and make the
     nav scroll away with content — avoid that.) */
  body.app-page nav.fixed {
    left: 50% !important;
    right: auto !important;
    width: calc(100% - 2rem) !important;
    max-width: 398px !important;
    transform: translateX(-50%) !important;
  }
}

/* Slim, dark scrollbars inside the app column */
.app-page::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.app-page::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}
.app-page::-webkit-scrollbar-track {
  background: transparent;
}

/* ---- Shared utilities (used across many pages) ---- */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.text-gradient {
  background-image: var(--app-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.glass-panel {
  background: rgba(32, 31, 31, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--app-border);
}

/* ---- Safe areas (notched devices) ---- */
.pt-safe {
  padding-top: var(--safe-top);
}
.pb-safe {
  padding-bottom: var(--safe-bottom);
}

/* Floating bottom bars: keep them clear of the home indicator */
nav.fixed {
  margin-bottom: var(--safe-bottom);
}