/* ============================================================
   tokens.css – Material Design 3 · Orzatty Play Store
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

/* ── Light Scheme ─────────────────────────────────────────── */
:root {
  --md-primary:                   hsl(210,80%,45%);
  --md-on-primary:                #fff;
  --md-primary-container:         hsl(210,80%,92%);
  --md-on-primary-container:      hsl(210,80%,12%);

  --md-secondary:                 hsl(190,65%,35%);
  --md-on-secondary:              #fff;
  --md-secondary-container:       hsl(190,65%,88%);
  --md-on-secondary-container:    hsl(190,65%,12%);

  --md-tertiary:                  hsl(265,55%,50%);
  --md-on-tertiary:               #fff;
  --md-tertiary-container:        hsl(265,55%,90%);
  --md-on-tertiary-container:     hsl(265,55%,12%);

  --md-error:                     hsl(0,70%,42%);
  --md-on-error:                  #fff;
  --md-error-container:           hsl(0,70%,90%);

  --md-background:                hsl(210,30%,98%);
  --md-on-background:             hsl(210,20%,10%);

  --md-surface:                   hsl(210,30%,98%);
  --md-on-surface:                hsl(210,20%,10%);
  --md-surface-variant:           hsl(210,20%,90%);
  --md-on-surface-variant:        hsl(210,15%,30%);

  --md-surface-container-lowest:  #fff;
  --md-surface-container-low:     hsl(210,25%,96%);
  --md-surface-container:         hsl(210,22%,92%);
  --md-surface-container-high:    hsl(210,18%,88%);
  --md-surface-container-highest: hsl(210,16%,84%);

  --md-outline:                   hsl(210,10%,60%);
  --md-outline-variant:           hsl(210,15%,82%);
  --md-scrim:                     rgba(0,0,0,.45);

  --md-inverse-surface:           hsl(210,15%,18%);
  --md-inverse-on-surface:        hsl(210,20%,92%);
  --md-inverse-primary:           hsl(210,80%,75%);

  /* ── Typography ──────────────────────────────────────────── */
  --font:           'Inter', sans-serif;
  --font-display:   57px; --lh-display: 64px;
  --font-headline:  32px; --lh-headline: 40px;
  --font-title-lg:  22px; --lh-title-lg: 28px;
  --font-title-md:  16px; --lh-title-md: 24px;
  --font-title-sm:  14px; --lh-title-sm: 20px;
  --font-body-lg:   16px; --lh-body-lg:  24px;
  --font-body-md:   14px; --lh-body-md:  20px;
  --font-body-sm:   12px; --lh-body-sm:  16px;
  --font-label-lg:  14px;
  --font-label-md:  12px;
  --font-label-sm:  11px;

  /* ── Shape ───────────────────────────────────────────────── */
  --shape-xs:   4px;
  --shape-sm:   8px;
  --shape-md:   12px;
  --shape-lg:   16px;
  --shape-xl:   28px;
  --shape-full: 999px;

  /* ── Elevation ───────────────────────────────────────────── */
  --elev-1: 0 1px 2px rgba(0,0,0,.10),0 1px 6px 2px rgba(0,0,0,.05);
  --elev-2: 0 1px 2px rgba(0,0,0,.12),0 2px 8px 2px rgba(0,0,0,.08);
  --elev-3: 0 4px 8px 3px rgba(0,0,0,.10),0 1px 3px rgba(0,0,0,.10);
  --elev-4: 0 6px 10px 4px rgba(0,0,0,.10),0 2px 3px rgba(0,0,0,.12);

  /* ── Spacing ─────────────────────────────────────────────── */
  --sp-2:4px; --sp-4:8px; --sp-6:12px; --sp-8:16px;
  --sp-10:20px; --sp-12:24px; --sp-16:32px; --sp-24:48px;

  /* ── Motion ──────────────────────────────────────────────── */
  --dur-short:  150ms;
  --dur-medium: 250ms;
  --dur-long:   400ms;
  --ease-std:   cubic-bezier(.2,0,0,1);
  --ease-dec:   cubic-bezier(0,0,0,1);

  /* Legacy aliases */
  --color-primary: var(--md-primary);
  --color-primary-variant: hsl(210,80%,35%);
  --color-secondary: var(--md-secondary);
  --color-background: var(--md-background);
  --color-surface: var(--md-surface);
  --color-error: var(--md-error);
  --font-family: var(--font);
  --elevation-1: var(--elev-1);
  --elevation-2: var(--elev-2);
  --spacing-xxs: var(--sp-2); --spacing-xs: var(--sp-4);
  --spacing-sm: var(--sp-6);  --spacing-md: var(--sp-8);
  --spacing-lg: var(--sp-12); --spacing-xl: var(--sp-16);
}

/* ── Dark Scheme ──────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --md-primary:                   hsl(210,80%,72%);
    --md-on-primary:                hsl(210,80%,15%);
    --md-primary-container:         hsl(210,80%,25%);
    --md-on-primary-container:      hsl(210,80%,92%);

    --md-secondary:                 hsl(190,65%,65%);
    --md-on-secondary:              hsl(190,65%,10%);
    --md-secondary-container:       hsl(190,65%,22%);
    --md-on-secondary-container:    hsl(190,65%,88%);

    --md-tertiary:                  hsl(265,55%,75%);
    --md-on-tertiary:               hsl(265,55%,15%);
    --md-tertiary-container:        hsl(265,55%,25%);
    --md-on-tertiary-container:     hsl(265,55%,90%);

    --md-error:                     hsl(0,70%,72%);
    --md-on-error:                  hsl(0,70%,15%);
    --md-error-container:           hsl(0,70%,25%);

    --md-background:                hsl(210,18%,8%);
    --md-on-background:             hsl(210,20%,92%);
    --md-surface:                   hsl(210,18%,8%);
    --md-on-surface:                hsl(210,20%,92%);
    --md-surface-variant:           hsl(210,15%,22%);
    --md-on-surface-variant:        hsl(210,12%,72%);

    --md-surface-container-lowest:  hsl(210,18%,4%);
    --md-surface-container-low:     hsl(210,18%,10%);
    --md-surface-container:         hsl(210,18%,14%);
    --md-surface-container-high:    hsl(210,18%,18%);
    --md-surface-container-highest: hsl(210,18%,22%);

    --md-outline:                   hsl(210,10%,45%);
    --md-outline-variant:           hsl(210,15%,28%);
    --md-inverse-surface:           hsl(210,20%,88%);
    --md-inverse-on-surface:        hsl(210,15%,18%);
    --md-inverse-primary:           hsl(210,80%,40%);

    --color-primary: var(--md-primary);
    --color-primary-variant: hsl(210,80%,60%);
    --color-secondary: var(--md-secondary);
    --color-background: var(--md-background);
    --color-surface: var(--md-surface);
    --color-error: var(--md-error);
  }
}

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: var(--font);
  background: var(--md-background);
  color: var(--md-on-background);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body { min-height: 100vh; }

img { display: block; max-width: 100%; }
a   { color: var(--md-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ──────────────────────────────────────────────── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-8); }

.grid-apps {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
@media (min-width: 600px)  { .grid-apps { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
@media (min-width: 1024px) { .grid-apps { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }

/* ── Material Symbols ─────────────────────────────────────── */
.icon {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal;
  font-size: 24px; line-height: 1;
  letter-spacing: normal; text-transform: none;
  white-space: nowrap; word-wrap: normal;
  direction: ltr; -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  user-select: none;
}
.icon--filled { font-variation-settings: 'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24; }

/* ── Top App Bar ──────────────────────────────────────────── */
.top-bar {
  position: sticky; top: 0; z-index: 100;
  background: var(--md-surface-container-low);
  box-shadow: var(--elev-2);
  height: 64px;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-8);
  transition: background var(--dur-medium) var(--ease-std);
}
.top-bar__logo {
  display: flex; align-items: center; gap: var(--sp-4);
  flex-shrink: 0; text-decoration: none;
}
.top-bar__logo img { width: 32px; height: 32px; border-radius: var(--shape-sm); }
.top-bar__wordmark {
  font-size: var(--font-title-lg); font-weight: 700;
  color: var(--md-primary); letter-spacing: -.3px;
  display: none;
}
@media (min-width: 480px) { .top-bar__wordmark { display: block; } }

.top-bar__search {
  flex: 1; max-width: 480px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--sp-4);
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--shape-full);
  padding: 0 var(--sp-6);
  height: 44px;
  transition: box-shadow var(--dur-short) var(--ease-std),
              border-color var(--dur-short) var(--ease-std);
}
.top-bar__search:focus-within {
  box-shadow: var(--elev-1);
  border-color: var(--md-primary);
}
.top-bar__search input {
  flex: 1; border: none; background: transparent;
  font: var(--font-body-lg)/var(--lh-body-lg) var(--font);
  color: var(--md-on-surface); outline: none;
}
.top-bar__search input::placeholder { color: var(--md-on-surface-variant); }

.top-bar__actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }

/* ── Buttons ─────────────────────────────────────────────── */
button { font-family: var(--font); cursor: pointer; border: none; }

.btn-filled {
  background: var(--md-primary); color: var(--md-on-primary);
  border-radius: var(--shape-full);
  padding: 0 var(--sp-8); height: 40px;
  font-size: var(--font-label-lg); font-weight: 600;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  transition: box-shadow var(--dur-short) var(--ease-std),
              background var(--dur-short) var(--ease-std);
  white-space: nowrap;
}
.btn-filled:hover { background: hsl(210,80%,40%); box-shadow: var(--elev-1); }
.btn-filled:active { box-shadow: none; }

.btn-tonal {
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
  border-radius: var(--shape-full);
  padding: 0 var(--sp-8); height: 40px;
  font-size: var(--font-label-lg); font-weight: 600;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  transition: box-shadow var(--dur-short) var(--ease-std);
  white-space: nowrap;
}
.btn-tonal:hover { box-shadow: var(--elev-1); }

.btn-text {
  background: transparent; color: var(--md-primary);
  border-radius: var(--shape-full);
  padding: 0 var(--sp-6); height: 40px;
  font-size: var(--font-label-lg); font-weight: 600;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  transition: background var(--dur-short) var(--ease-std);
}
.btn-text:hover { background: hsl(210,80%,45%,.08); }

.btn-icon {
  background: transparent; border-radius: var(--shape-full);
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--md-on-surface-variant);
  transition: background var(--dur-short) var(--ease-std);
}
.btn-icon:hover { background: var(--md-surface-variant); }

/* ── Chips ───────────────────────────────────────────────── */
.chip-bar {
  display: flex; gap: var(--sp-2); overflow-x: auto;
  padding: var(--sp-4) var(--sp-8);
  scrollbar-width: none;
  background: var(--md-surface-container-low);
  border-bottom: 1px solid var(--md-outline-variant);
}
.chip-bar::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-6); height: 32px;
  border-radius: var(--shape-full);
  border: 1px solid var(--md-outline-variant);
  background: transparent;
  font-size: var(--font-label-lg); font-weight: 500;
  color: var(--md-on-surface-variant);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: background var(--dur-short) var(--ease-std),
              border-color var(--dur-short) var(--ease-std),
              color var(--dur-short) var(--ease-std);
}
.chip:hover { background: var(--md-surface-variant); }
.chip.active {
  background: var(--md-secondary-container);
  border-color: transparent;
  color: var(--md-on-secondary-container);
  font-weight: 600;
}
.chip .icon { font-size: 18px; }

/* ── App Card ────────────────────────────────────────────── */
.card {
  background: var(--md-surface-container-low);
  border-radius: var(--shape-lg);
  box-shadow: var(--elev-1);
  overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column;
  transition: box-shadow var(--dur-medium) var(--ease-std),
              transform var(--dur-medium) var(--ease-std);
}
.card:hover { box-shadow: var(--elev-3); transform: translateY(-2px); }
.card:active { transform: translateY(0); }

.card__icon {
  width: 100%; aspect-ratio: 1;
  object-fit: cover; object-position: center;
  background: var(--md-surface-container);
}
.card__icon--placeholder {
  width: 100%; aspect-ratio: 1;
  background: linear-gradient(135deg,
    var(--md-primary-container),
    var(--md-secondary-container));
  display: flex; align-items: center; justify-content: center;
}
.card__icon--placeholder .icon { font-size: 56px; color: var(--md-primary); }

.card__body { padding: var(--sp-6); flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); }
.card__title {
  font-size: var(--font-body-lg); font-weight: 600;
  color: var(--md-on-surface);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card__dev {
  font-size: var(--font-body-sm); color: var(--md-on-surface-variant);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card__meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.card__rating { display: flex; align-items: center; gap: 2px; font-size: var(--font-body-sm); color: var(--md-on-surface-variant); }
.card__rating .icon { font-size: 14px; color: hsl(40,90%,50%); font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 14; }
.card__price { font-size: var(--font-label-lg); font-weight: 600; color: var(--md-primary); }
.card__price--free { color: var(--md-secondary); }

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg,
    var(--md-surface-container) 25%,
    var(--md-surface-container-high) 50%,
    var(--md-surface-container) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
  border-radius: var(--shape-sm);
}
@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ── Hero Banner ─────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--md-primary-container), var(--md-secondary-container));
  padding: var(--sp-12) var(--sp-8);
  display: flex; align-items: center; gap: var(--sp-12);
  overflow: hidden; position: relative;
  min-height: 200px;
}
.hero__content { flex: 1; z-index: 1; }
.hero__badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--md-primary); color: var(--md-on-primary);
  border-radius: var(--shape-full); padding: 2px var(--sp-6);
  font-size: var(--font-label-md); font-weight: 600; margin-bottom: var(--sp-4);
}
.hero__title { font-size: var(--font-headline); font-weight: 700; line-height: var(--lh-headline); color: var(--md-on-primary-container); }
.hero__sub   { font-size: var(--font-body-lg); color: var(--md-on-primary-container); opacity: .8; margin: var(--sp-4) 0 var(--sp-8); }
.hero__img   { width: 140px; height: 140px; border-radius: var(--shape-lg); object-fit: cover; box-shadow: var(--elev-4); flex-shrink: 0; }

/* ── Section ─────────────────────────────────────────────── */
.section { padding: var(--sp-12) 0; }
.section__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-8); }
.section__title { font-size: var(--font-title-lg); font-weight: 700; color: var(--md-on-surface); }

/* ── Modal ───────────────────────────────────────────────── */
.modal-scrim {
  position: fixed; inset: 0; z-index: 200;
  background: var(--md-scrim);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-medium) var(--ease-std);
}
@media (min-width: 600px) { .modal-scrim { align-items: center; } }
.modal-scrim.open { opacity: 1; pointer-events: all; }

.modal {
  background: var(--md-surface-container-low);
  border-radius: var(--shape-xl) var(--shape-xl) 0 0;
  width: 100%; max-width: 560px; max-height: 92vh;
  overflow-y: auto; padding: var(--sp-8);
  transform: translateY(100%);
  transition: transform var(--dur-long) var(--ease-dec);
}
@media (min-width: 600px) {
  .modal { border-radius: var(--shape-xl); max-height: 85vh; transform: scale(.92); }
}
.modal-scrim.open .modal { transform: none; }

.modal__handle {
  width: 32px; height: 4px; border-radius: 2px;
  background: var(--md-outline-variant); margin: 0 auto var(--sp-8);
  display: block;
}
@media (min-width: 600px) { .modal__handle { display: none; } }

.modal__header { display: flex; align-items: flex-start; gap: var(--sp-6); margin-bottom: var(--sp-8); }
.modal__icon { width: 80px; height: 80px; border-radius: var(--shape-lg); object-fit: cover; flex-shrink: 0; }
.modal__info { flex: 1; }
.modal__app-title { font-size: var(--font-title-lg); font-weight: 700; }
.modal__developer { font-size: var(--font-body-md); color: var(--md-on-surface-variant); margin-top: 2px; }
.modal__stats { display: flex; gap: var(--sp-8); margin-top: var(--sp-4); }
.modal__stat { text-align: center; }
.modal__stat-value { font-size: var(--font-title-md); font-weight: 700; color: var(--md-on-surface); }
.modal__stat-label { font-size: var(--font-label-sm); color: var(--md-on-surface-variant); }

.modal__screenshots {
  display: flex; gap: var(--sp-4); overflow-x: auto;
  scrollbar-width: none; margin-bottom: var(--sp-8);
}
.modal__screenshots::-webkit-scrollbar { display: none; }
.modal__screenshot { width: 120px; height: 200px; object-fit: cover; border-radius: var(--shape-md); flex-shrink: 0; }

.modal__desc { font-size: var(--font-body-md); color: var(--md-on-surface-variant); line-height: var(--lh-body-md); margin-bottom: var(--sp-8); }

.modal__footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--sp-8); border-top: 1px solid var(--md-outline-variant);
}
.modal__price { font-size: var(--font-title-lg); font-weight: 700; color: var(--md-primary); }
.modal__price--free { color: var(--md-secondary); }

/* ── Toast ───────────────────────────────────────────────── */
.toast-area { position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: var(--sp-4); align-items: center; pointer-events: none; }
.toast {
  background: var(--md-inverse-surface); color: var(--md-inverse-on-surface);
  border-radius: var(--shape-sm); padding: var(--sp-4) var(--sp-8);
  font-size: var(--font-body-md); box-shadow: var(--elev-3);
  animation: toast-in var(--dur-medium) var(--ease-dec),
             toast-out var(--dur-medium) var(--ease-std) 2.8s forwards;
  pointer-events: all;
}
@keyframes toast-in  { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes toast-out { from { opacity:1; } to { opacity:0; } }

/* ── Empty / Error States ────────────────────────────────── */
.state-empty {
  text-align: center; padding: var(--sp-24) var(--sp-8);
  color: var(--md-on-surface-variant);
}
.state-empty .icon { font-size: 64px; margin-bottom: var(--sp-6); color: var(--md-outline); }
.state-empty h3 { font-size: var(--font-title-lg); margin-bottom: var(--sp-4); color: var(--md-on-surface); }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--md-outline-variant); border-radius: 3px; }