/* RPE 11 — App Styles */

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BLOCK 1 — Main Styles (index.html line 43)                                */
/* ═══════════════════════════════════════════════════════════════════════════ */

  /* ── Native app payment hiding ── */
  body.native-app .native-hide { display: none !important; }
  /* ── Lifetime-free user payment hiding (grandfathered cohort, see lifetime-free-for-current-users memory) ── */
  body.free-user .free-hide { display: none !important; }
  /* Inverse: surfaces shown ONLY to free users (e.g. "Lifetime free access" replacement copy) */
  .free-show { display: none; }
  body.free-user .free-show { display: revert; }
  /* ── App shell / mobile essentials ── */
  * { box-sizing: border-box; }
  html, body {
    overscroll-behavior: none;       /* prevents pull-to-refresh & bounce */
    -webkit-text-size-adjust: 100%;  /* prevent iOS font inflation */
    text-size-adjust: 100%;
    height: 100%;
    overflow: hidden;                /* prevent body scroll behind fixed container */
  }
  body {
    -webkit-tap-highlight-color: transparent; /* no flash on tap */
    -webkit-touch-callout: none;              /* no long-press callout on links */
  }
  button, a, [onclick] {
    touch-action: manipulation;  /* removes 300ms tap delay */
    cursor: pointer;
  }
  input, textarea, select {
    -webkit-appearance: none;
    appearance: none;
  }
  /* ── Input readability: light bg + black text on all fillable fields ── */
  input:not(.otp-input):not([class*="bg-transparent"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  textarea:not([class*="bg-transparent"]),
  select {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: rgba(0,0,0,0.12) !important;
  }
  input:not(.otp-input):not([type="range"]):not([type="checkbox"]):not([type="radio"])::placeholder,
  textarea::placeholder {
    color: rgba(15,23,42,0.38) !important;
    opacity: 1;
  }
  input:not(.otp-input):not([class*="bg-transparent"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]):focus,
  textarea:not([class*="bg-transparent"]):focus,
  select:focus {
    background-color: #ffffff !important;
    border-color: #4edea3 !important;
  }
  /* Bottom nav — use absolute (not fixed) inside the fixed container
     to avoid nested-fixed compositing desync on iOS Safari */
  .solo-bottom-nav {
    position: absolute !important;
  }
  /* iOS / notched-device safe-area inset variables.
     Centralised so every scrollable container, sheet, modal, and bottom-anchored
     button row uses the same value. Falls back to 0 on devices without insets,
     so this is a no-op outside iOS notched devices. */
  :root {
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top:    env(safe-area-inset-top,    0px);
  }
  /* Compensate main content so it isn't hidden behind taller nav OR home indicator */
  .pb-safe     { padding-bottom: calc(4rem + var(--safe-bottom)); }
  .pb-safe-min { padding-bottom: var(--safe-bottom); }
  .pt-safe     { padding-top:    var(--safe-top); }
  /* Expands a control's tap area to ≥44px without changing its visual size.
     Apply to small toggle/icon buttons that render at <44px height. */
  .tap-extend { position: relative; }
  .tap-extend::before {
    content: '';
    position: absolute;
    inset: -8px;
  }
  /* ── end app shell ── */
  .kinetic-bg {
    background-color: #0b1326;
    background-image: radial-gradient(circle at 2px 2px, rgba(78,222,163,0.05) 1px, transparent 0);
    background-size: 40px 40px;
  }
  .glass-panel {
    background: rgba(19,27,46,0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(60,74,66,0.25);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  .btn-gradient { background: linear-gradient(135deg, #10b981 0%, #4edea3 100%); }
  .btn-gradient:hover { filter: brightness(1.08); }
  .btn-gradient:active { transform: scale(0.98); }
  .sunken-input { background-color: #f1f5f9 !important; border: 1px solid rgba(0,0,0,0.1) !important; color: #0f172a !important; transition: all 0.2s ease; }
  .sunken-input:focus { border-color: #4edea3 !important; box-shadow: 0 0 0 3px rgba(78,222,163,0.15); outline: none; background-color: #ffffff !important; }
  .sunken-input::placeholder { color: rgba(15,23,42,0.38) !important; opacity: 1; }
  .app-sidebar { background: #0b1326; border-right: 1px solid rgba(60,74,66,0.15); transition: transform 0.25s ease; }
  @media (max-width: 767px) {
    .app-sidebar { transform: translateX(-100%); }
    .app-sidebar.sidebar-open { transform: translateX(0); z-index: 110; }
  }
  .sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:105; }
  .sidebar-backdrop.active { display:block; }
  .kinetic-glow { box-shadow: 0 0 15px rgba(78,222,163,0.1); }
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(78,222,163,0.2); border-radius: 2px; }
  .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; font-size: 20px; }
  .fill-icon { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
  [data-screen] { display: none; }
  [data-screen].active { display: flex; }
  [data-retired-screen] { display: none !important; }
  /* Outer screens (rendered directly under <body>, which is overflow:hidden)
     must manage their own scroll, otherwise tall content is unreachable on mobile.
     padding-top on the safe-area inset keeps the nav (logo + hamburger) clear of
     the iOS notch / Dynamic Island. */
  [data-screen="landing"].active {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top:    var(--safe-top);
    padding-bottom: var(--safe-bottom);
  }
  [data-screen="coach-onboarding-1"].active,
  [data-screen="coach-onboarding-2"].active,
  [data-screen="coach-onboarding-3"].active,
  [data-screen="coach-onboarding-4"].active { display: flex; }

/* ═══════════════════════════════════════════════════════════════════════════ */

  [data-screen="admin"].active { display: flex; }
  [data-screen="marketplace-signup"].active { display: flex; }
  /* Admin tabs */
  .admin-tab { color: rgba(218,226,253,0.4); border-bottom: 2px solid transparent; }
  .admin-tab.active-tab { color: #f87171; border-bottom: 2px solid #f87171; }
  /* Admin fix buttons */
  .admin-fix-btn:hover { background: rgba(78,222,163,0.08) !important; border-color: rgba(78,222,163,0.2) !important; }
  /* Override global input styles inside admin panel */
  [data-screen="admin"] input,
  [data-screen="admin"] textarea,
  #admin-login-overlay input {
    background-color: rgba(0,0,0,0.3) !important;
    color: #dae2fd !important;
    border-color: rgba(255,255,255,0.1) !important;
  }
  [data-screen="admin"] input::placeholder,
  [data-screen="admin"] textarea::placeholder,
  #admin-login-overlay input::placeholder { color: rgba(218,226,253,0.3) !important; }

  .step-bar { height: 3px; border-radius: 999px; }
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  input[type=number] { -moz-appearance: textfield; }
  .specialty-card.selected { border-color: #4edea3; background: rgba(78,222,163,0.08); }
  .specialty-card.selected .specialty-check { opacity: 1; }
  .specialty-check { opacity: 0; transition: opacity 0.15s; }
  .slide-in { animation: slideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  @keyframes slideIn { from { opacity:0; transform:translateY(12px) scale(0.98);} to {opacity:1; transform:translateY(0) scale(1);} }

  /* Staggered card entry — apply .stagger-in on parent, .stagger-item on children */
  .stagger-item { opacity: 0; transform: translateY(16px); animation: staggerUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  .stagger-item:nth-child(1) { animation-delay: 0.04s; }
  .stagger-item:nth-child(2) { animation-delay: 0.08s; }
  .stagger-item:nth-child(3) { animation-delay: 0.12s; }
  .stagger-item:nth-child(4) { animation-delay: 0.16s; }
  .stagger-item:nth-child(5) { animation-delay: 0.20s; }
  .stagger-item:nth-child(6) { animation-delay: 0.24s; }
  .stagger-item:nth-child(7) { animation-delay: 0.28s; }
  .stagger-item:nth-child(8) { animation-delay: 0.32s; }
  @keyframes staggerUp { from { opacity:0; transform:translateY(16px);} to {opacity:1; transform:translateY(0);} }

  /* Skeleton shimmer loader */
  .skeleton { background: linear-gradient(90deg, rgba(78,222,163,0.04) 25%, rgba(78,222,163,0.08) 50%, rgba(78,222,163,0.04) 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 8px; }
  @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

  /* Gauge fill animation */
  .gauge-ring { transition: stroke-dashoffset 0.8s cubic-bezier(0.22, 1, 0.36, 1); }

  /* SVG chart bar grow-up */
  .chart-bar { animation: barGrow 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; transform-origin: bottom; }
  @keyframes barGrow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 0.85; } }

  /* SVG chart line draw */
  .chart-line { animation: lineDraw 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  @keyframes lineDraw { from { stroke-dashoffset: var(--line-len); } to { stroke-dashoffset: 0; } }

  /* SVG chart dot pop */
  .chart-dot { opacity: 0; animation: dotPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
  @keyframes dotPop { from { opacity:0; r:0; } to { opacity:1; r:3; } }

  /* SVG area fade */
  .chart-area { opacity: 0; animation: areaFade 0.6s ease 0.3s forwards; }
  @keyframes areaFade { from { opacity:0; } to { opacity:0.08; } }

  /* Score bar fill */
  .score-bar-fill { animation: barFill 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards; width: 0; }
  @keyframes barFill { to { width: var(--fill-pct); } }

  /* Counter pop for numbers */
  .counter-pop { animation: counterPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
  @keyframes counterPop { 0% { transform: scale(0.5); opacity: 0; } 70% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }

  .progress-bar { transition: width 0.4s ease; }
  ::-webkit-scrollbar { width: 4px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(78,222,163,0.2); border-radius: 2px; }
  .otp-input { width: 48px; height: 56px; text-align: center; font-size: 1.5rem; font-family: 'Lexend', sans-serif; font-weight: 700; color: #4edea3; background: #060e20; border: none; border-bottom: 2px solid #3c4a42; border-radius: 6px 6px 0 0; outline: none; transition: border-color 0.15s; }
  .otp-input:focus { border-bottom-color: #4edea3; }
  .tab-btn.active { color: #4edea3; border-bottom: 2px solid #4edea3; }
  .tab-btn { color: #bbcabf; border-bottom: 2px solid transparent; padding-bottom: 6px; transition: all 0.15s; font-family: 'Lexend'; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.05em; cursor: pointer; }

  /* ═══════════════════════════════════════════════════════════════ */
  /* V2 SOLO ATHLETE STYLES                                        */
  /* ═══════════════════════════════════════════════════════════════ */

  /* Solo V2 container — position:fixed + JS-calculated height for iOS.
     --app-height is set by JS to window.innerHeight and updates on resize.
     This prevents touch target desync when the iOS address bar collapses. */
  :root { --app-height: 100dvh; }
  #solo-v2-container, #coached-v2-container, #coach-v2-container { display:none; overflow:hidden; flex-direction:row; }
  #solo-v2-container.active, #coached-v2-container.active, #coach-v2-container.active { display:flex; position:fixed; top:0; left:0; right:0; height:var(--app-height); }
  #solo-v2-container [data-screen], #coached-v2-container [data-screen], #coach-v2-container [data-screen] { display:none; }
  #solo-v2-container [data-screen].active, #coached-v2-container [data-screen].active, #coach-v2-container [data-screen].active { display:flex; flex-direction:row; flex:1; overflow:hidden; min-width:0; }

  /* Hero numbers — tabular for alignment */
  .hero-num { font-variant-numeric:tabular-nums; }

  /* Tap card — interactive card hover/press */
  .tap-card { transition:transform .15s,box-shadow .15s,border-color .15s; cursor:pointer; }
  .tap-card:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,0,0,0.2); border-color:rgba(78,222,163,0.25)!important; }
  .tap-card.active-card { border-color:rgba(78,222,163,0.5)!important; box-shadow:0 0 0 1px rgba(78,222,163,0.3); }

  /* Solo sidebar nav links */
  .solo-nav-link { transition:background .15s,color .15s; }
  .solo-nav-link:hover { background:rgba(78,222,163,0.06); color:#dae2fd; }
  .solo-nav-link.active { background:linear-gradient(90deg,rgba(78,222,163,0.12) 0%,transparent 100%); color:#4edea3; border-left:2px solid #4edea3; }

  /* SVG ring stroke animation */
  .ring-stroke { transition:stroke-dashoffset .8s cubic-bezier(0.22,1,0.36,1); }

  /* Bottom sheet — slide-up overlay */
  .solo-sheet-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:200; display:none; align-items:flex-end; }
  .solo-sheet-overlay.open { display:flex; }
  .solo-sheet-body { background:#0b1326; border-top:1px solid rgba(78,222,163,0.1); border-radius:1.5rem 1.5rem 0 0; width:100%; max-height:80dvh; overflow-y:auto; padding-bottom:var(--safe-bottom); transform:translateY(100%); transition:transform .3s cubic-bezier(0.22,1,0.36,1); }
  .solo-sheet-overlay.open .solo-sheet-body { transform:translateY(0); }
  .sheet-handle { width:36px; height:4px; border-radius:2px; background:rgba(218,226,253,0.2); margin:10px auto 6px; }

  /* Modal overlay — centered modal */
  .solo-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.85); backdrop-filter:blur(12px); z-index:2000; display:none; align-items:flex-end; justify-content:center; }
  .solo-modal-overlay.open { display:flex; }
  @media(min-width:640px) { .solo-modal-overlay { align-items:center; padding:1rem; } }
  .solo-modal-body { background:#0b1326; border:1px solid rgba(78,222,163,0.1); border-radius:1.5rem 1.5rem 0 0; width:100%; max-height:95dvh; overflow-y:auto; padding-bottom:var(--safe-bottom); }
  @media(min-width:640px) { .solo-modal-body { border-radius:1.5rem; max-width:680px; max-height:90dvh; } }

  /* Responsive sidebar / header / right-panel / bottom-nav */
  @media(max-width:767px) {
    .solo-sidebar-desktop { display:none!important; }
    .solo-header-desktop { display:none!important; }
    .solo-header-mobile { display:block!important; }
    .solo-right-panel { display:none!important; }
    .solo-bottom-nav { display:flex!important; }
    .solo-mobile-body-regions { display:block!important; }
    .solo-desktop-body-silhouette { display:none!important; }
    .solo-desktop-body-toggle { display:none!important; }
    /* Extra bottom padding on mobile so content scrolls past bottom nav AND the home indicator */
    #solo-v2-container main > div, #coached-v2-container main > div, #coach-v2-container main > div { padding-bottom: calc(10rem + var(--safe-bottom))!important; }
  }
  @media(min-width:768px) {
    .solo-header-mobile { display:none!important; }
    .solo-bottom-nav { display:none!important; }
    .solo-sidebar-desktop { display:flex!important; }
    .solo-header-desktop { display:flex!important; }
  }
  @media(min-width:1024px) {
    .solo-right-panel { display:flex!important; width:420px; min-width:420px; max-width:420px; flex-direction:column; height:100%; overflow:hidden; }
    .solo-mobile-body-regions { display:none!important; }
    .solo-desktop-body-silhouette { display:block!important; }
    .solo-desktop-body-toggle { display:flex!important; }
  }

  /* Responsive grid for home cards — Tailwind md: prefix not in pre-built CSS */
  @media(min-width:768px) {
    .home-cards-grid, .home-marketplace-grid { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
    .home-cards-grid > *, .home-marketplace-grid > * { margin-top:0!important; margin-bottom:0!important; }
  }

  /* Chat bubble styles */
  .chat-bubble-coach{background:#171f33;border-radius:1.25rem 1.25rem 1.25rem 0.25rem}
  .chat-bubble-athlete{background:rgba(78,222,163,0.12);border-radius:1.25rem 1.25rem 0.25rem 1.25rem}

  /* Mobile header safe area */
  .solo-header-mobile {
    padding-top: max(1.75rem, env(safe-area-inset-top, 1.75rem)) !important;
    padding-bottom: 1rem !important;
  }
  .hdr-row { display:flex; align-items:flex-end; justify-content:space-between; gap:0.75rem; }
  .hdr-left { flex:1; min-width:0; }
  .hdr-back { display:inline-flex; align-items:center; gap:0.25rem; font-size:0.8125rem; font-weight:600; color:rgba(187,202,191,0.8); margin-bottom:0.625rem; cursor:pointer; background:none; border:none; padding:0.375rem 0.5rem 0.375rem 0; min-height:2.75rem; }
  .hdr-back:hover, .hdr-back:active { color:#4edea3; }
  .hdr-title-row { display:flex; align-items:center; gap:0.75rem; }
  .hdr-title-icon { width:2.75rem; height:2.75rem; border-radius:1rem; background:rgba(78,222,163,0.1); border:1px solid rgba(78,222,163,0.2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .hdr-btns { display:flex; align-items:center; gap:0.5rem; flex-shrink:0; }
  .hdr-btn { width:2.25rem; height:2.25rem; border-radius:9999px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid rgba(60,74,66,0.2); background:#222a3d; color:rgba(187,202,191,1); }
  .hdr-btn:hover { color:#4edea3; border-color:rgba(78,222,163,0.4); }
  .hdr-avatar { width:2.25rem; height:2.25rem; border-radius:9999px; background:rgba(78,222,163,0.15); border:1px solid rgba(78,222,163,0.2); display:flex; align-items:center; justify-content:center; color:#4edea3; font-family:'Lexend',sans-serif; font-weight:900; font-size:0.75rem; flex-shrink:0; }

  /* Tool tab (bar loader, RPE calc) */
  .tool-tab { transition:all .15s; }
  .tool-tab.active { color:#4edea3; border-bottom:2px solid #4edea3; }
  .tool-tab:not(.active) { color:rgba(218,226,253,0.4); border-bottom:2px solid transparent; }
  .tool-tab:not(.active):hover { color:rgba(218,226,253,0.7); }

  /* RPE cell editable */
  .rpe-cell { transition:background .1s; }
  .rpe-cell:hover { outline:1px solid #4edea3; z-index:1; }
  .rpe-cell input { width:100%; text-align:center; background:transparent; border:none; outline:none; color:inherit; font:inherit; }

  /* Heatmap */
  .heatmap-cell { width:14px; height:14px; border-radius:3px; }
  .heatmap-day { width:12px; height:12px; border-radius:3px; transition:transform .1s; }
  .heatmap-day:hover { transform:scale(1.5); z-index:1; }

  /* Setting row hover */
  .setting-row { transition:background .15s; }
  .setting-row:hover { background:rgba(78,222,163,0.04); }

  /* Timer modal */
  .tmr-mode-tab { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#171f33; border:1px solid rgba(60,74,66,0.2); color:rgba(187,202,191,0.6); cursor:pointer; transition:all .15s; flex-shrink:0; }
  .tmr-mode-tab:hover { color:#dae2fd; border-color:rgba(78,222,163,0.3); }
  .tmr-mode-tab.active { background:linear-gradient(135deg,#10b981,#4edea3); color:#003824; border-color:transparent; }
  .tmr-phase-label { font-family:'Lexend',sans-serif; font-weight:900; font-size:0.875rem; text-transform:uppercase; letter-spacing:0.1em; }
  .tmr-adj-btn { width:32px; height:32px; border-radius:8px; background:#171f33; border:1px solid rgba(60,74,66,0.2); color:rgba(187,202,191,0.8); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; font-weight:700; }
  .tmr-adj-btn:hover { color:#4edea3; border-color:rgba(78,222,163,0.4); }

  /* Nutrition score gauge */
  .nut-score-ring { transition:stroke-dashoffset .8s cubic-bezier(0.22,1,0.36,1); }
  .nut-bar { height:6px; border-radius:3px; background:rgba(78,222,163,0.1); overflow:hidden; }
  .nut-bar-fill { height:100%; border-radius:3px; transition:width .6s cubic-bezier(0.22,1,0.36,1); }

  /* Bar loader */
  .bar-shaft { background:linear-gradient(180deg,#b8b8b8 0%,#888 25%,#666 50%,#888 75%,#b8b8b8 100%); border-radius:3px; position:relative; }
  .bar-shaft::after { content:''; position:absolute; inset:2px 20%; background:repeating-linear-gradient(90deg,transparent 0px,transparent 3px,rgba(0,0,0,0.12) 3px,rgba(0,0,0,0.12) 4px); border-radius:2px; }
  .bar-sleeve { background:linear-gradient(180deg,#a0a0a0 0%,#707070 30%,#585858 50%,#707070 70%,#a0a0a0 100%); border-radius:4px; }
  .bar-endcap { background:linear-gradient(180deg,#c0c0c0 0%,#808080 50%,#c0c0c0 100%); border-radius:4px; }
  .bar-collar { background:linear-gradient(180deg,#383838 0%,#555 50%,#383838 100%); border-radius:2px; border:1px solid #222; }
  .plate { display:flex; align-items:center; justify-content:center; border-radius:4px; font-weight:900; font-size:9px; letter-spacing:0.5px; text-shadow:0 1px 2px rgba(0,0,0,0.5); position:relative; flex-shrink:0; }
  .plate::before { content:''; position:absolute; inset:0; border-radius:4px; border-top:1px solid rgba(255,255,255,0.2); border-left:1px solid rgba(255,255,255,0.1); border-bottom:1px solid rgba(0,0,0,0.3); border-right:1px solid rgba(0,0,0,0.2); }
  .plate-bumper { border-radius:6px; } .plate-bumper::before { border-radius:6px; }
  .plate-iron { border-radius:3px; } .plate-iron::before { border-radius:3px; }

  /* Photo crop modal */
  .crop-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.92); backdrop-filter:blur(16px); z-index:3000; display:none; align-items:center; justify-content:center; flex-direction:column; }
  .crop-overlay.open { display:flex; }
  .crop-modal { background:#0b1326; border:1px solid rgba(78,222,163,0.15); border-radius:1.5rem; width:100%; max-width:440px; overflow:hidden; }
  .crop-viewport { position:relative; width:320px; height:320px; margin:0 auto; overflow:hidden; background:#060e20; border-radius:12px; }
  .crop-viewport img { position:absolute; top:50%; left:50%; transform-origin:center center; max-width:none; max-height:none; pointer-events:none; }
  .crop-frame { position:absolute; top:50%; left:50%; width:280px; height:280px; margin-top:-140px; margin-left:-140px; border:2px solid #fff; border-radius:4px; box-shadow:0 0 0 9999px rgba(0,0,0,0.55); pointer-events:none; z-index:2; }
  .crop-slider { -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:2px; background:rgba(78,222,163,0.15); outline:none; }
  .crop-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,#10b981,#4edea3); cursor:pointer; border:2px solid #0b1326; box-shadow:0 0 6px rgba(78,222,163,0.4); }
  .crop-slider::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,#10b981,#4edea3); cursor:pointer; border:2px solid #0b1326; }
  .crop-rotate-btn { width:40px; height:40px; border-radius:12px; background:#171f33; border:1px solid rgba(60,74,66,0.3); color:rgba(187,202,191,0.8); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .15s; }
  .crop-rotate-btn:hover { color:#4edea3; border-color:rgba(78,222,163,0.4); }

  /* Streak & milestone */
  .streak-card { background:linear-gradient(135deg,rgba(251,146,60,0.08) 0%,rgba(78,222,163,0.06) 100%); }
  .streak-fire { animation:fireGlow 2s ease-in-out infinite; }
  @keyframes fireGlow { 0%,100%{filter:drop-shadow(0 0 4px rgba(251,146,60,0.4))} 50%{filter:drop-shadow(0 0 8px rgba(251,146,60,0.7))} }
  .milestone-badge { transition:transform .2s,box-shadow .2s; }
  .milestone-badge:hover { transform:scale(1.04); box-shadow:0 8px 24px rgba(0,0,0,0.3); }
  .milestone-badge.locked { opacity:0.5; filter:grayscale(0.6); }
  .milestone-popup-overlay { position:fixed; inset:0; z-index:3000; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.85); backdrop-filter:blur(16px); }
  .milestone-popup-overlay.open { display:flex; }
  .milestone-popup-body { position:relative; width:100%; max-width:400px; text-align:center; padding:3rem 2rem 2rem; overflow:hidden; }
  .milestone-confetti { position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(78,222,163,0.15) 0%,rgba(251,146,60,0.1) 40%,transparent 70%); pointer-events:none; }
  .milestone-confetti::before { content:''; position:absolute; inset:0; background:conic-gradient(from 0deg at 50% 50%,rgba(78,222,163,0.08) 0deg,rgba(251,146,60,0.06) 60deg,rgba(96,165,250,0.06) 120deg,rgba(251,146,60,0.08) 180deg,rgba(78,222,163,0.06) 240deg,rgba(168,85,247,0.06) 300deg,rgba(78,222,163,0.08) 360deg); animation:confettiSpin 8s linear infinite; }
  @keyframes confettiSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
  .milestone-icon-ring { width:100px; height:100px; border-radius:50%; background:linear-gradient(135deg,#10b981,#4edea3); display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem; box-shadow:0 0 40px rgba(78,222,163,0.3),0 0 80px rgba(78,222,163,0.15); animation:iconPulse 2s ease-in-out infinite; }
  @keyframes iconPulse { 0%,100%{box-shadow:0 0 40px rgba(78,222,163,0.3),0 0 80px rgba(78,222,163,0.15)} 50%{box-shadow:0 0 60px rgba(78,222,163,0.5),0 0 120px rgba(78,222,163,0.25)} }

  /* PR report card */
  .pr-report-card { background:linear-gradient(135deg,rgba(78,222,163,0.04) 0%,rgba(78,222,163,0.01) 100%); }

  /* Block modals (payment/suspended/overdue) */
  .block-modal-overlay { position:fixed; inset:0; background:rgba(6,14,32,0.97); backdrop-filter:blur(20px); z-index:50000; display:none; align-items:center; justify-content:center; flex-direction:column; }
  .block-modal-overlay.open { display:flex; }
  .block-modal-card { background:#0b1326; border:1px solid rgba(255,180,171,0.15); border-radius:1.5rem; width:100%; max-width:440px; padding:3rem 2rem 2rem; text-align:center; position:relative; overflow:hidden; }
  .block-modal-card.error-theme { border-color:rgba(239,68,68,0.3); box-shadow:0 0 60px rgba(239,68,68,0.08),0 0 120px rgba(239,68,68,0.04); }
  .block-modal-card.warning-theme { border-color:rgba(245,158,11,0.3); box-shadow:0 0 60px rgba(245,158,11,0.08); }
  .block-modal-icon-ring { width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem; }
  .block-modal-icon-ring.error { background:rgba(239,68,68,0.12); border:2px solid rgba(239,68,68,0.3); }
  .block-modal-icon-ring.warning { background:rgba(245,158,11,0.12); border:2px solid rgba(245,158,11,0.3); }
  .block-pulse { animation:blockPulse 2s ease-in-out infinite; }
  @keyframes blockPulse { 0%,100%{box-shadow:0 0 20px rgba(239,68,68,0.15)} 50%{box-shadow:0 0 40px rgba(239,68,68,0.3)} }

  /* Onboarding flow */
  .aob-overlay { position:fixed; inset:0; background:rgba(6,14,32,0.98); backdrop-filter:blur(20px); z-index:40000; display:none; align-items:center; justify-content:center; flex-direction:column; overflow-y:auto; }
  .aob-overlay.open { display:flex; }
  .aob-card { background:#0b1326; border:1px solid rgba(78,222,163,0.15); border-radius:1.5rem; width:100%; max-width:520px; padding:2.5rem 2rem 2rem; position:relative; overflow:hidden; max-height:90vh; overflow-y:auto; }
  .aob-step-dots { display:flex; gap:6px; justify-content:center; margin-bottom:1.5rem; }
  .aob-dot { width:8px; height:8px; border-radius:50%; background:rgba(218,226,253,0.15); transition:all .3s; }
  .aob-dot.active { background:#4edea3; box-shadow:0 0 8px rgba(78,222,163,0.4); }
  .aob-dot.done { background:rgba(78,222,163,0.4); }
  .aob-opt-card { background:#171f33; border:1px solid rgba(60,74,66,0.3); border-radius:1rem; padding:1rem; cursor:pointer; transition:all .15s; text-align:center; }
  .aob-opt-card:hover { border-color:rgba(78,222,163,0.3); background:#1a2238; }
  .aob-opt-card.selected { border-color:#4edea3; background:rgba(78,222,163,0.08); box-shadow:0 0 0 1px rgba(78,222,163,0.3); }
  .aob-tag { display:inline-flex; align-items:center; gap:4px; background:rgba(78,222,163,0.1); border:1px solid rgba(78,222,163,0.2); border-radius:999px; padding:4px 10px 4px 12px; font-size:12px; font-weight:600; color:#4edea3; }
  .aob-tag button { background:none; border:none; color:rgba(78,222,163,0.6); cursor:pointer; padding:0; line-height:1; }
  .aob-tag button:hover { color:#4edea3; }
  .aob-body-btn { background:#171f33; border:1px solid rgba(60,74,66,0.3); border-radius:0.75rem; padding:0.625rem 1rem; cursor:pointer; transition:all .15s; display:flex; align-items:center; justify-content:space-between; }
  .aob-body-btn:hover { border-color:rgba(78,222,163,0.3); }
  .aob-body-btn.selected { border-color:#f59e0b; background:rgba(245,158,11,0.06); }
  .aob-confetti-bg { position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(78,222,163,0.12) 0%,rgba(251,146,60,0.08) 40%,transparent 70%); pointer-events:none; }
  .aob-confetti-bg::before { content:''; position:absolute; inset:0; background:conic-gradient(from 0deg at 50% 50%,rgba(78,222,163,0.06) 0deg,rgba(251,146,60,0.04) 60deg,rgba(96,165,250,0.04) 120deg,rgba(251,146,60,0.06) 180deg,rgba(78,222,163,0.04) 240deg,rgba(168,85,247,0.04) 300deg,rgba(78,222,163,0.06) 360deg); animation:confettiSpin 8s linear infinite; }

  /* Morning brief card */
  .morning-brief-card { background:linear-gradient(135deg,rgba(78,222,163,0.04) 0%,rgba(96,165,250,0.03) 100%); border:1px solid rgba(78,222,163,0.12); border-radius:1.25rem; overflow:hidden; }

  /* Coached home — acknowledge glow + badge dot */
  .cah-ack-glow { box-shadow: 0 0 0 0 rgba(78,222,163,0.4); animation: cahAckPulse 2.6s infinite; }
  @keyframes cahAckPulse { 0%{box-shadow:0 0 0 0 rgba(78,222,163,0.45)} 70%{box-shadow:0 0 0 10px rgba(78,222,163,0)} 100%{box-shadow:0 0 0 0 rgba(78,222,163,0)} }
  .cah-badge-dot { width:8px; height:8px; border-radius:999px; background:#ffb4ab; box-shadow:0 0 0 2px var(--tw-shadow-color, #131b2e); }


/* ═══════════════════════════════════════════════════════════════════════════ */
/* BLOCK 2 — Barcode Scan Animation (index.html line 49,532)                 */
/* ═══════════════════════════════════════════════════════════════════════════ */

@keyframes scanLine { 0%,100%{top:15%} 50%{top:85%} }


/* ═══════════════════════════════════════════════════════════════════════════ */
/* BLOCK 3 — Tutorial Animations (index.html line 50,876)                    */
/* ═══════════════════════════════════════════════════════════════════════════ */

@keyframes foodScanBar { 0% { width: 0%; } 50% { width: 70%; } 100% { width: 95%; } }
@keyframes tut-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes tut-pulse { 0%, 100% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.55), 0 0 0 0 rgba(78,222,163,0.4); border-color: rgba(78,222,163,0.6); } 50% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.55), 0 0 20px 4px rgba(78,222,163,0.2); border-color: rgba(78,222,163,0.9); } }
#tut-spotlight { animation: tut-pulse 2s ease-in-out infinite; }