:root {
  --background: 204 100% 97%;
  --foreground: 222 28% 18%;
  --primary: 207 87% 70%;
  --primary-foreground: 0 0% 100%;
  --secondary: 343 100% 88%;
  --secondary-foreground: 222 28% 18%;
  --muted: 213 55% 92%;
  --muted-foreground: 222 12% 43%;
  --destructive: 8 62% 52%;
  --destructive-foreground: 0 0% 100%;
  --border: 213 45% 86%;
  --card: 0 0% 100%;
  --shadow-sm: 0 4px 12px hsl(222 28% 18% / 0.07);
  --shadow-md: 0 12px 30px hsl(222 28% 18% / 0.11);
  --shadow-lg: 0 24px 70px hsl(222 28% 18% / 0.16);
  --transition-fast: 160ms ease;
  --transition-smooth: 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
}

.dark {
  --background: 222 28% 10%;
  --foreground: 204 100% 97%;
  --primary: 207 78% 72%;
  --primary-foreground: 222 28% 10%;
  --secondary: 343 64% 72%;
  --secondary-foreground: 222 28% 10%;
  --muted: 222 18% 18%;
  --muted-foreground: 213 28% 76%;
  --destructive: 8 58% 58%;
  --destructive-foreground: 0 0% 100%;
  --border: 222 18% 25%;
  --card: 222 28% 13%;
}

* { box-sizing: border-box; }
html, body, #root { min-height: 100%; }

body {
  margin: 0;
  font-family: ui-rounded, "SF Pro Rounded", "SF Pro Display", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: hsl(var(--foreground));
  background:
    radial-gradient(circle at 20% 10%, hsl(var(--primary) / 0.34), transparent 32%),
    radial-gradient(circle at 82% 18%, hsl(var(--secondary) / 0.46), transparent 30%),
    linear-gradient(145deg, hsl(0 0% 100%), hsl(var(--background)));
}

button, a { -webkit-tap-highlight-color: transparent; }

.watch-shell {
  width: min(100vw, 430px);
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  place-items: center;
  padding: 22px 14px;
}

.watch-case {
  width: 232px;
  height: 284px;
  border-radius: 54px;
  padding: 12px;
  background: linear-gradient(145deg, hsl(222 15% 13%), hsl(222 18% 4%));
  box-shadow: var(--shadow-lg), inset 0 0 0 1px hsl(0 0% 100% / 0.08);
  position: relative;
}

.watch-case::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 88px;
  width: 6px;
  height: 48px;
  border-radius: 999px;
  background: hsl(222 10% 16%);
  box-shadow: inset 1px 0 1px hsl(0 0% 100% / 0.14);
}

.watch-screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 43px;
  background:
    radial-gradient(circle at 12% 0%, hsl(var(--primary) / 0.22), transparent 24%),
    radial-gradient(circle at 88% 8%, hsl(var(--secondary) / 0.38), transparent 22%),
    linear-gradient(180deg, hsl(0 0% 100%), hsl(var(--background)));
  border: 1px solid hsl(0 0% 100% / 0.7);
  box-shadow: inset 0 0 0 1px hsl(var(--border) / 0.38);
}

.screen-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 14px 13px 18px;
}
.screen-scroll::-webkit-scrollbar { display: none; }

.home-sky {
  background:
    radial-gradient(ellipse at 18% 5%, hsl(0 0% 100% / 0.82), transparent 22%),
    radial-gradient(ellipse at 80% 13%, hsl(var(--secondary) / 0.42), transparent 18%),
    linear-gradient(180deg, hsl(var(--primary) / 0.24), transparent 42%);
}

.brand-mark { margin: 1px 0 9px; text-align: center; color: hsl(var(--foreground)); }
.brand-mark span { display: block; font-size: 13px; font-weight: 900; letter-spacing: 0.42em; line-height: 1; }
.brand-mark small { display: block; margin-top: 5px; font-size: 6px; font-weight: 800; letter-spacing: 0.28em; color: hsl(var(--muted-foreground)); }

.tap-card { transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); }
.tap-card:active { transform: scale(0.965); }
.focus-ring:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 3px; }

.product-bottle {
  --liquid: hsl(43 82% 70% / 0.72);
  --pack: hsl(0 0% 100%);
  position: relative;
  display: grid;
  place-items: end center;
  filter: drop-shadow(0 14px 16px hsl(222 28% 18% / 0.13));
}
.product-bottle-large { width: 104px; height: 124px; }
.product-bottle-small { width: 48px; height: 58px; }
.product-bottle-small .bottle-label, .product-bottle-small .tube-label { display: none; }
.product-bottle-small .bottle-cap { width: 28px; height: 11px; top: 13px; }
.product-bottle-small .bottle-dropper { width: 15px; height: 22px; top: 0; }
.product-bottle-small .bottle-glass { width: 38px; height: 39px; border-radius: 10px; }

.product-tone-blue { --liquid: hsl(201 85% 80% / 0.72); --pack: hsl(205 100% 96%); }
.product-tone-pink { --liquid: hsl(343 100% 88% / 0.78); --pack: hsl(343 100% 97%); }
.product-tone-cream { --liquid: hsl(0 0% 100% / 0.9); --pack: hsl(0 0% 100%); }
.product-tone-green, .product-tone-sage { --liquid: hsl(160 36% 78% / 0.72); --pack: hsl(160 60% 96%); }
.product-tone-amber { --liquid: hsl(42 88% 66% / 0.76); --pack: hsl(0 0% 100%); }

.bottle-dropper { position: absolute; top: 0; width: 28px; height: 46px; border-radius: 999px 999px 8px 8px; background: linear-gradient(90deg, hsl(0 0% 88%), hsl(0 0% 100%), hsl(0 0% 82%)); z-index: 1; }
.bottle-cap { position: absolute; top: 38px; width: 58px; height: 23px; border-radius: 9px 9px 4px 4px; background: linear-gradient(90deg, hsl(0 0% 84%), hsl(0 0% 100%), hsl(0 0% 78%)); box-shadow: inset 0 -2px 3px hsl(0 0% 0% / 0.08); z-index: 3; }
.bottle-glass { position: relative; width: 78px; height: 78px; overflow: hidden; border-radius: 16px 16px 14px 14px; background: linear-gradient(90deg, hsl(0 0% 100% / 0.2), hsl(0 0% 100% / 0.05)); border: 1px solid hsl(35 38% 36% / 0.18); box-shadow: inset 0 0 0 2px hsl(0 0% 100% / 0.25); }
.bottle-liquid { position: absolute; inset: 0; background: linear-gradient(90deg, hsl(0 0% 100% / 0.42), var(--liquid) 28%, var(--liquid) 72%, hsl(32 42% 34% / 0.14)); }
.bottle-label { position: absolute; left: 12px; right: 12px; top: 20px; min-height: 38px; display: flex; flex-direction: column; justify-content: center; border-radius: 2px; background: hsl(0 0% 100% / 0.94); color: hsl(222 28% 18%); text-align: center; padding: 4px 2px; line-height: 1; }
.bottle-label .label-origin { font-size: 4px; letter-spacing: 0.28em; font-weight: 900; }
.bottle-label strong { margin-top: 2px; font-size: 8px; letter-spacing: 0.16em; font-weight: 900; }
.bottle-label span:last-child { margin-top: 3px; font-size: 4px; letter-spacing: 0.18em; font-weight: 800; }

.product-package-tube .bottle-dropper { display: none; }
.product-package-tube .bottle-cap { top: auto; bottom: 0; width: 58px; height: 20px; border-radius: 5px 5px 12px 12px; background: linear-gradient(90deg, hsl(var(--secondary) / 0.72), hsl(0 0% 100% / 0.82), hsl(var(--primary) / 0.36)); }
.product-package-tube .bottle-glass { width: 78px; height: 108px; margin-bottom: 12px; border-radius: 8px 8px 18px 18px / 8px 8px 24px 24px; background: linear-gradient(90deg, hsl(0 0% 82% / 0.2), var(--pack), hsl(0 0% 84% / 0.2)); border-color: hsl(var(--border) / 0.5); }
.product-package-tube .bottle-liquid { background: linear-gradient(90deg, hsl(0 0% 100% / 0.2), var(--pack), hsl(var(--primary) / 0.08)); }
.product-package-tube .tube-label { position: absolute; left: 13px; right: 13px; top: 26px; min-height: 48px; background: hsl(0 0% 100% / 0.88); color: hsl(var(--foreground)); text-align: center; display: flex; flex-direction: column; justify-content: center; line-height: 1; }
.product-package-tube .tube-label span { font-size: 4px; font-weight: 900; letter-spacing: 0.25em; }
.product-package-tube .tube-label strong { margin: 3px 0; font-size: 8px; font-weight: 900; letter-spacing: 0.16em; }
.product-bottle-small.product-package-tube .bottle-cap { width: 32px; height: 10px; }
.product-bottle-small.product-package-tube .bottle-glass { width: 38px; height: 49px; margin-bottom: 6px; border-radius: 5px 5px 10px 10px; }

@media (min-width: 640px) {
  .watch-shell { padding: 34px; }
  .watch-case { transform: scale(1.08); }
}