/* Base: reset, tokens, global layout, utilities */
/* 1. Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  background: var(--app-bg);
  color: var(--text-color);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: pan-y;
  -webkit-text-size-adjust: 100%;
  padding-top: 0 !important;
}

body {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
  min-height: 100dvh;
  padding-bottom: 0 !important;
}

/* 2. Tokens */
:root {
  --tg-top: 0px;
  --tg-right: 0px;
  --tg-bottom: 0px;
  --tg-left: 0px;
  --bg-color: #F7FBFF;
  --tg-header-color: color-mix(in srgb, var(--bg-color) 92%, var(--accent-color) 8%);
  --text-color: #0B1220;
  --accent-color: #4F8DFF;
  --accent-text: #fff;
  --brand-cyan: #2EE9D1;
  --brand-blue: #4F8DFF;
  --brand-purple: #8B5CF6;
  --accent-grad: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-blue) 55%, var(--brand-purple) 100%);
  --nav-surface: rgba(255,255,255,.75);
  --nav-border: rgba(0,0,0,.08);
  --nav-shadow: 0 8px 28px rgba(0,0,0,.12);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-top-gap: 0px;
  --kb-offset: 0px;
  --player-h: 0px;
  --glass-blur: 4px;
  --island-bg: rgba(255,255,255,.40);
  --island-border: rgba(0,0,0,.08);
  --island-blur: 4px;
  --topbar-1: rgba(255,255,255,.92);
  --topbar-2: rgba(255,255,255,.60);
  --bg-gradient-bottom: color-mix(in srgb, var(--bg-color) 92%, var(--accent-color) 8%);
  --bg-solid-stop: calc(var(--tg-top, 0px) + 96px);
  --bg-fade-stop:  calc(var(--tg-top, 0px) + 240px);
  --bg-gradient-mid: color-mix(in srgb, var(--tg-header-color) 70%, var(--bg-gradient-bottom) 30%);
  --app-bg: linear-gradient(180deg,
    var(--tg-header-color) 0px,
    var(--tg-header-color) var(--bg-solid-stop),
    var(--bg-gradient-mid) var(--bg-fade-stop),
    var(--bg-gradient-bottom) 100%);
  --tg-header-sheet-light:   #8A9EA3;
  --tg-header-sheet-dark:    #171C30;
  --tg-header-overlay-light: #626D6F;
  --tg-header-overlay-dark:  #101322;
  --page-pad-x: 16px;

    --radius-xs: 10px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 18px;
  --space-7: 20px;
  --space-8: 24px;

  --row-h: 56px;
  --icon-sm: 18px;
  --icon-md: 20px;
  --icon-lg: 22px;
  --avatar-sm: 36px;
  --thumb-sm: 52px;

  --font-title-lg: 26px;
  --font-title-md: 22px;
  --font-body-lg: 17px;
  --font-body-md: 16px;
  --font-body-sm: 14px;
  --font-caption: 12px;

  --surface-1: var(--tg-secondary-bg-color, rgba(255,255,255,.88));
  --surface-2: color-mix(in srgb, var(--tg-secondary-bg-color, #f5f5f5) 85%, transparent);
  --stroke-soft: rgba(60,60,67,.12);
  --stroke-soft-dark: rgba(84,84,88,.35);
}

@media (prefers-color-scheme: dark){
  :root{
    --island-bg: rgba(30,30,30,.40);
    --island-border: rgba(255,255,255,.08);
    --topbar-1: rgba(30,30,30,.92);
    --topbar-2: rgba(30,30,30,.58);
    --nav-surface: rgba(30,30,30,.72);
    --nav-border: rgba(255,255,255,.08);
    --nav-shadow: 0 8px 28px rgba(0,0,0,.6);
    --tg-header-color: color-mix(in srgb, var(--bg-color) 92%, var(--accent-color) 8%);
  }
}

body[data-theme="system"] {
  --bg-color: var(--tg-bg-color, #f1f1f5);
  --text-color: var(--tg-text-color, #000);
  --app-bg: linear-gradient(180deg, var(--tg-bg-color, #f1f1f5) 0%, var(--tg-bg-color, #f1f1f5) 100%);
  --tg-header-color: var(--tg-bg-color, #f1f1f5);
  --bg-gradient-bottom: var(--tg-bg-color, #f1f1f5);
  --bg-gradient-mid: var(--tg-bg-color, #f1f1f5);
}

body.dark[data-theme="system"] {
  --app-bg: linear-gradient(180deg, var(--tg-bg-color, #0f1117) 0%, var(--tg-bg-color, #0f1117) 100%);
}

/* 3. Global layout */
.screen{
  height: 100svh;
  min-height: 100svh;
  box-sizing: border-box;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding-top: 0;
  padding-bottom: 0;
}

/* 4. Utilities */
.hidden { display: none !important; }

#home-screen{
  display: flex;
  flex-direction: column;
  height: 100svh;
  overflow: hidden;
  padding: 0 var(--page-pad-x) 16px;
  padding-bottom: 0;
}

#home-results-mount{
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#home-results{
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 12px;
  padding-bottom: calc(12px + var(--tg-bottom, 0px) + var(--player-h, 0px));
  --home-islands-h: 56px;
  padding-top: calc(4px + var(--home-islands-h));
  margin-top: calc(-1 * var(--home-islands-h));
  scroll-padding-top: calc(4px + var(--home-islands-h));
}

#home-results::-webkit-scrollbar,
#search-results::-webkit-scrollbar,
.settings-body::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}