/* ---------- Nailverse design tokens: use these instead of raw values ---------- */
:root{
  --pink:#FF3D94; --pink-2:#FF6FAE; --pink-soft:rgba(255,61,148,.14); --pink-grad:linear-gradient(135deg,#FF3D94,#FF6FAE);
  --live:#FF2D55; --red:#FF453A; --red-text:#FF6961; --green:#34C759; --gold:#FFD60A; --orange:#FF9F0A;
  --bg:#0A0A0B; --card:#141416; --card-2:#18181B; --line:#232326; --line-2:#2A2A2E;
  --fg:#FFFFFF; --fg2:#A9A9B0; --fg3:#8B8B92; --fg4:#5A5A60;
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-pill:100px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --gutter:18px;
  --btn-h:48px; --icon-sm:16px; --icon-md:22px; --stroke:2px;
}
/* Shared Nailverse UI: the round glass back button (same as the map) + keep content below the iPhone status bar */
.nv-back{box-sizing:border-box;width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;
  background:rgba(20,20,24,0.78);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border:1px solid rgba(255,255,255,0.08);-webkit-tap-highlight-color:transparent;}
.nv-back:active{transform:scale(0.94);}
.nv-back svg{width:20px;height:20px;display:block;}
.nv-pad{box-sizing:border-box;padding-top:env(safe-area-inset-top);}

/* Page changes move like Instagram on iPhone: the new screen slides in from the right over the old one,
   the old one drifts left and dims; going back does the reverse. The bottom tab bar stays still. (iOS 18.2+; instant elsewhere) */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: .36s; animation-timing-function: cubic-bezier(.32,.72,0,1); }
::view-transition-old(root) { animation: nvPushOld .36s cubic-bezier(.32,.72,0,1) both; }
::view-transition-new(root) { animation: nvPushNew .36s cubic-bezier(.32,.72,0,1) both; box-shadow: -10px 0 30px rgba(0,0,0,.45); }
@keyframes nvPushOld { to { transform: translateX(-28%); filter: brightness(.55); } }
@keyframes nvPushNew { from { transform: translateX(100%); } }
html:active-view-transition-type(back)::view-transition-old(root) { animation-name: nvPopOld; z-index: 2; box-shadow: -10px 0 30px rgba(0,0,0,.45); }
html:active-view-transition-type(back)::view-transition-new(root) { animation-name: nvPopNew; z-index: 1; box-shadow: none; }
@keyframes nvPopOld { to { transform: translateX(100%); } }
@keyframes nvPopNew { from { transform: translateX(-28%); filter: brightness(.55); } }
.nvtb, nav.tabbar { view-transition-name: nvtabbar; }
::view-transition-group(nvtabbar), ::view-transition-old(nvtabbar), ::view-transition-new(nvtabbar) { animation: none; }
html:active-view-transition body { opacity: 1 !important; }
html { background: #0A0A0B; }

/* Loader: the Nailverse logo (white bird on a pink circle) breathes softly (no spinning). It fades in only after 250ms,
   so fast loads never flash a loader at all. */
.nv-loader { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 80px; opacity: 0; animation: nv-fade-in .25s ease .25s forwards; perspective: 400px; }
.nv-logo-spin { width: 44px; height: 44px; animation: nv-pulse 1.6s ease-in-out infinite; filter: drop-shadow(0 6px 18px rgba(255,61,148,.45)); }
.nv-logo-spin svg { width: 100%; height: 100%; display: block; }
@keyframes nv-pulse { 0%, 100% { transform: scale(.92); opacity: .7; } 50% { transform: scale(1); opacity: 1; } }
@keyframes nv-fade-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nv-logo-spin { animation-duration: 2.4s; } ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(root) { animation: none; } }

/* ---------- one interaction feedback everywhere (low priority, custom styles still win) ---------- */
:where(button, a, [role="button"], .tab, .chip):active{opacity:.72;transition:opacity .06s;}
:where(button, a, [role="button"]){-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
:where(button:disabled, button[disabled], [aria-disabled="true"]){opacity:.45;cursor:not-allowed;pointer-events:none;}

/* never flash white between pages or on refresh */
html{background:#0A0A0B;}

/* New Post opens like an iPhone sheet: slides up from the bottom over the page you were on, and slides back down when you leave.
   iOS 18.2+ uses view transitions (types "up" / "down", set in create-post.html); older iPhones animate it in JS (create-post.html). */
html:active-view-transition-type(up)::view-transition-old(root) { animation: nvSheetUnder .42s cubic-bezier(.32,.72,0,1) both; z-index: 1; }
html:active-view-transition-type(up)::view-transition-new(root) { animation: nvSheetUp .42s cubic-bezier(.32,.72,0,1) both; z-index: 2; box-shadow: 0 -12px 40px rgba(0,0,0,.5); }
html:active-view-transition-type(up)::view-transition-old(nvtabbar) { animation: nvFadeAway .2s ease both; }
html:active-view-transition-type(down)::view-transition-old(root) { animation: nvSheetDown .34s cubic-bezier(.32,.72,0,1) both; z-index: 2; box-shadow: 0 -12px 40px rgba(0,0,0,.5); }
html:active-view-transition-type(down)::view-transition-new(root) { animation: nvSheetOver .34s cubic-bezier(.32,.72,0,1) both; z-index: 1; }
html:active-view-transition-type(down)::view-transition-new(nvtabbar) { animation: nvFadeIn .2s ease .14s both; }
@keyframes nvSheetUp { from { transform: translateY(100%); } }
/* swipe up to book: the bottom button bar rides up with the page as its own piece, so it lands exactly in place
   (inside the page snapshot it ended a little low on iPhone and jumped up when the slide finished) */
html:active-view-transition-type(up) .nv-upbar { view-transition-name: nvupbar; }
html:active-view-transition-type(up)::view-transition-group(nvupbar) { animation: none; }
html:active-view-transition-type(up)::view-transition-new(nvupbar) { animation: nvBarUp .42s cubic-bezier(.32,.72,0,1) both; }
@keyframes nvBarUp { from { transform: translateY(100vh); } }
@keyframes nvSheetDown { to { transform: translateY(100%); } }
@keyframes nvSheetUnder { to { transform: scale(.94); filter: brightness(.5); } }
@keyframes nvSheetOver { from { transform: scale(.94); filter: brightness(.5); } }
@keyframes nvFadeAway { to { opacity: 0; } }
@keyframes nvFadeIn { from { opacity: 0; } }
html.nv-sheet-pre .nv-pad { transform: translateY(100%); }

/* Tab bar switches (Home, Saved, Contacts, Profile…): the new screen fades in and lifts 10px while the tab bar stays still.
   iOS 18.2+: view-transition type "tab" (crossfade). */
@keyframes nvTabIn { from { opacity: 0; transform: translateY(10px); } }
/* 2026-10-08: like Instagram, bottom-bar tabs switch instantly (no fade, no slide); the user asked for Instagram's exact tab feel */
html:active-view-transition-type(tab)::view-transition-old(root), html:active-view-transition-type(tab)::view-transition-new(root) { animation: none; box-shadow: none; }
/* (older iPhones: no tab fade. Tried it, the old page can't stay on screen there, so a fade only made taps feel slower.) */

/* one font everywhere: buttons and text boxes don't inherit it on their own */
body,button,input,textarea,select{font-family:"Plus Jakarta Sans",-apple-system,system-ui,sans-serif;}

/* no text selection / copy anywhere in the app (long-press showed blue selection handles on menus and profiles);
   typing boxes stay normal so people can still type, select and paste */
html, body, body * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable], [contenteditable] * { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* NEON FLOW: the light that runs around an edge (same motion as the new-appointment pop-up).
   Add class="nv-flow" to anything with a border-radius; set --nvf to change the color (default pink). */
@property --nvf-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes nvFlowSpin { to { --nvf-ang: 360deg; } }
.nv-flow { position: relative; }
.nv-flow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.7px; pointer-events: none; z-index: 5;
  background: conic-gradient(from var(--nvf-ang), var(--nvf, #FF3D94), rgba(10,10,11,0) 30%, var(--nvf, #FF3D94) 55%, rgba(10,10,11,0) 80%, var(--nvf, #FF3D94));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: nvFlowSpin 2.4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .nv-flow::after { animation: none; } }