:root {
  --ocean-aqua: #14D4C4;
  --ocean-aqua-deep: #087A73;
  --ocean-sky: #007BFF;
  --ocean-blue: #007BFF;
  --ocean-ink: #0B1D36;
  --ocean-slate: #687280;
  --ocean-cloud: #f1f5f9;
  --ocean-white: #FFFFFF;
  --ocean-line: #e2e8f0;
  --ocean-soft-aqua: #E9FCFA;
  --ocean-danger: #c83f4d;
  --ocean-warning: #a86e00;
  --pickleup-lime: #D7FF3B;
  --ocean-gradient: linear-gradient(135deg, var(--ocean-blue) 0%, var(--ocean-aqua) 100%);
  --ocean-shadow-sm: 0 4px 16px rgba(11, 29, 54, .07);
  --ocean-shadow-md: 0 14px 38px rgba(11, 29, 54, .12);
  --ocean-shadow-float: 0 20px 56px rgba(11, 29, 54, .18);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-control: 12px;
  --radius-card: 18px;
  --radius-hero: 26px;
  --touch-target: 48px;
  --font-heading: Poppins, "Avenir Next", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Compatibility aliases keep existing screens functional until their approved phase. */
  --green: var(--ocean-aqua);
  --lime: var(--ocean-sky);
  --ink: var(--ocean-ink);
  --muted: var(--ocean-slate);
  --paper: var(--ocean-cloud);
  --white: var(--ocean-white);
  --line: var(--ocean-line);
  --danger: var(--ocean-danger);
  --shadow: var(--ocean-shadow-sm);
}

* { box-sizing: border-box; }
html { background: #eaf6f8; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 8% 0%, rgba(0, 123, 255, .16), transparent 27rem),
    radial-gradient(circle at 100% 18%, rgba(20, 212, 196, .12), transparent 30rem),
    #f7fbfc;
  color: var(--ocean-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(0, 123, 255, .7);
  outline-offset: 2px;
}

.app-shell {
  width: min(100%, 680px);
  min-height: 100dvh;
  margin: 0 auto;
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 0 80px rgba(11, 29, 54, .07);
}
.topbar {
  position: relative;
  z-index: 12;
  height: 64px;
  padding: 12px var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, .82);
  border-bottom: 1px solid rgba(226, 232, 240, .72);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ocean-ink); text-decoration: none; }
.brand-mark { width: 34px; height: 34px; display: block; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(11, 29, 54, .2)); }
.brand-lockup-image { width: 124px; height: 32px; display: block; object-fit: contain; object-position: left center; }
.brand-wordmark-image { width: 124px; height: 36px; display: block; object-fit: contain; object-position: left center; }
.brand-word { font-family: var(--font-heading); font-size: 20px; font-weight: 800; letter-spacing: -.035em; }
.brand-word em { color: var(--pickleup-lime); font-style: normal; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.icon-link, .icon-button {
  position: relative;
  width: var(--touch-target);
  height: var(--touch-target);
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--ocean-ink);
  text-decoration: none;
}
.icon-link:hover { background: var(--ocean-soft-aqua); color: var(--ocean-aqua-deep); }
.ui-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.content { padding: 8px var(--space-5) 36px; }

h1, h2, h3 { font-family: var(--font-heading); }
.hero { padding: 28px 4px; }
.hero.compact { padding-top: 14px; }
.hero h1, .page-heading h1, .profile-head h1, .empty h1 {
  margin: 7px 0 10px;
  font-size: clamp(30px, 8vw, 44px);
  line-height: 1.06;
  letter-spacing: -.04em;
}
.hero p, .page-heading p, .empty p { color: var(--ocean-slate); font-size: 16px; line-height: 1.5; }
.eyebrow { color: var(--ocean-aqua-deep); font-size: 11px; font-weight: 800; letter-spacing: .14em; }

.card, .menu-card {
  margin: 14px 0;
  padding: 20px;
  background: var(--ocean-white);
  border: 1px solid var(--ocean-line);
  border-radius: var(--radius-card);
  box-shadow: var(--ocean-shadow-sm);
}
.form-stack { display: grid; gap: 15px; }
.form-stack > div { display: grid; gap: 6px; }
.form-stack label { font-size: 13px; font-weight: 700; }
.form-stack input, .form-stack select, .form-stack textarea {
  width: 100%; min-height: 50px; padding: 13px 14px;
  border: 1px solid var(--ocean-line); border-radius: var(--radius-control);
  background: var(--ocean-white); color: var(--ocean-ink);
}
.form-stack input:focus, .form-stack select:focus, .form-stack textarea:focus { border-color: var(--ocean-aqua); }
.form-stack .helptext { color: var(--ocean-slate); font-size: 12px; }
.errorlist { margin: 0; padding: 10px 14px; list-style: none; border-radius: var(--radius-control); background: #fff0f1; color: var(--ocean-danger); font-size: 14px; }

.button {
  min-height: 50px; padding: 13px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--radius-control); font-weight: 750; text-decoration: none; cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease, background .1s ease;
}
.button:active { transform: scale(.98); }
.button.primary { background: var(--ocean-gradient); color: #fff; box-shadow: 0 8px 20px rgba(20, 212, 196, .2); }
.button.secondary { background: #fff; border-color: var(--ocean-aqua); color: var(--ocean-aqua-deep); }
.button.logout { width: 100%; margin-top: 18px; background: #fff1f2; color: var(--ocean-danger); }
.text-link, .center a, .page-heading a { display: inline-block; margin-top: 14px; color: var(--ocean-aqua-deep); font-weight: 700; text-decoration: none; }
.center { color: var(--ocean-slate); text-align: center; }

.flash-stack { position: relative; z-index: 20; padding: 0 var(--space-5); }
.flash { margin: 5px 0; padding: 12px 14px; border: 1px solid #bcece7; border-radius: var(--radius-control); background: #ecfbf9; color: #06756f; }
.flash.error { border-color: #ffd1d6; background: #fff0f1; color: var(--ocean-danger); }
.progress { height: 6px; margin-bottom: 28px; overflow: hidden; border-radius: 99px; background: #dfeef2; }
.progress span { display: block; width: 72%; height: 100%; border-radius: inherit; background: var(--ocean-gradient); }
.badge, .primary-chip {
  display: inline-flex; align-items: center; min-height: 25px; padding: 5px 9px;
  border-radius: 999px; background: var(--ocean-soft-aqua); color: var(--ocean-aqua-deep); font-size: 11px; font-weight: 750; text-decoration: none;
}
.badge.warning { background: #fff7dc; color: var(--ocean-warning); }

.page-heading { margin: 10px 2px 20px; }
.page-heading h1 { font-size: 36px; }
.profile-head { display: flex; align-items: center; gap: 17px; margin: 8px 2px 20px; }
.profile-head h1 { font-size: 35px; }
.profile-head p { margin: 0 0 8px; color: var(--ocean-slate); }
.avatar { width: 100px; height: 100px; border-radius: 32px; object-fit: cover; }
.avatar.placeholder { display: flex; align-items: center; justify-content: center; background: var(--ocean-gradient); color: #fff; font-size: 32px; font-weight: 800; }
.action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.card h2 { margin: 0 0 16px; font-size: 20px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.detail-grid span { color: var(--ocean-slate); font-size: 12px; }
.detail-grid strong { display: block; margin-top: 4px; color: var(--ocean-ink); font-size: 14px; }
.bio { padding-top: 16px; border-top: 1px solid var(--ocean-line); line-height: 1.55; }
.section-title, .list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-title span, .muted { color: var(--ocean-slate); font-size: 12px; }
.photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.photo-tile { position: relative; padding: 8px; border-radius: 16px; background: var(--ocean-cloud); }
.photo-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 11px; }
.photo-tile button, .danger { padding: 8px; border: 0; background: transparent; color: var(--ocean-aqua-deep); font-weight: 700; cursor: pointer; }
.photo-tile .danger, .danger { color: var(--ocean-danger); }
.photo-empty { grid-column: 1/-1; padding: 30px; border: 2px dashed var(--ocean-line); border-radius: 16px; color: var(--ocean-slate); text-align: center; }
.inline-form { display: grid; gap: 10px; margin-top: 15px; }
.list-row { padding: 13px 0; border-bottom: 1px solid var(--ocean-line); }
.list-row p { margin: 4px 0; color: var(--ocean-slate); font-size: 13px; }
.nested { margin-top: 18px; padding-top: 4px; }
.menu-card { padding: 0; overflow: hidden; }
.menu-card a { display: flex; justify-content: space-between; padding: 19px 20px; border-bottom: 1px solid var(--ocean-line); color: var(--ocean-ink); font-weight: 700; text-decoration: none; }
.menu-card a:last-child { border: 0; }
.empty { min-height: 65vh; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.status-icon { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 24px; background: var(--ocean-soft-aqua); color: var(--ocean-aqua); font-size: 30px; font-weight: 800; }
.empty .button { min-width: 220px; margin-top: 10px; }
.prefs { padding: 4px 20px; }
.pref-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--ocean-line); }
.pref-row:last-child { border: 0; }
.pref-row label { color: var(--ocean-slate); font-size: 12px; }
.premium-paywall-shell{max-width:620px;background:linear-gradient(180deg,#eefafa,#fff)}.premium-paywall{width:min(100%,460px);margin:0 auto;padding:36px 18px 130px;text-align:center}.premium-paywall h1{margin:8px 0;font-size:clamp(38px,11vw,52px);line-height:1;letter-spacing:-.055em}.premium-paywall>p{color:var(--ocean-slate);line-height:1.55}.premium-paywall ul{margin:22px 0;padding:18px 22px;display:grid;gap:13px;border:1px solid var(--ocean-line);border-radius:20px;background:#fff;text-align:left;box-shadow:var(--ocean-shadow-sm);list-style:none}.premium-paywall li::before{content:"✓";margin-right:10px;color:var(--ocean-aqua-deep);font-weight:900}.premium-paywall .button{width:100%;margin-top:10px}.trial-ended{margin:18px 0 5px!important;color:var(--ocean-aqua-deep)!important;font-weight:850}.premium-free-note{font-size:13px}.premium-paywall .premium-welcome-icon svg{fill:none;stroke:currentColor;stroke-width:2}
.premium-status-card{margin-bottom:15px;padding:18px;background:linear-gradient(135deg,#effbfa,#fff)}.premium-status-card h2{margin:5px 0 4px;font-size:22px}.premium-status-card p{margin:0;color:var(--ocean-aqua-deep);font-weight:800}.premium-status-card small{display:block;margin-top:7px;color:var(--ocean-slate)}.premium-welcome-shell{max-width:620px;background:linear-gradient(180deg,#eafafa,#fff)}.premium-welcome-shell .topbar,.premium-welcome-shell .bottom-nav{display:none}.premium-welcome-shell .content{min-height:100dvh;display:flex}.premium-welcome{width:min(100%,460px);margin:auto;padding:32px 18px;text-align:center}.premium-welcome-icon{width:78px;height:78px;margin:0 auto 20px;display:grid;place-items:center;border-radius:25px;background:var(--ocean-gradient);color:#fff;box-shadow:var(--ocean-shadow-md)}.premium-welcome-icon .ui-icon{width:39px;height:39px;fill:currentColor;stroke:none}.premium-welcome h1{margin:8px 0 7px;font-size:clamp(34px,10vw,48px);line-height:1.04;letter-spacing:-.05em}.premium-welcome h2{margin:0;color:var(--ocean-aqua-deep);font-size:20px}.premium-welcome>p{margin:16px auto;color:var(--ocean-slate);line-height:1.5}.premium-welcome ul{margin:20px 0;padding:18px 22px;display:grid;gap:12px;border:1px solid var(--ocean-line);border-radius:20px;background:#fff;text-align:left;box-shadow:var(--ocean-shadow-sm);list-style:none}.premium-welcome li::before{content:"✓";margin-right:10px;color:var(--ocean-aqua-deep);font-weight:900}.premium-no-charge{display:block;margin:18px 0}.premium-welcome .button{width:100%}

@media (min-width: 700px) {
  body { padding: 24px; }
  .app-shell { min-height: calc(100dvh - 48px); overflow: hidden; border: 1px solid rgba(226, 232, 240, .8); border-radius: 34px; }
  .bottom-nav { bottom: 24px; border-radius: 0 0 34px 34px; }
  .content { padding-right: 30px; padding-left: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.settings-help-label{display:flex;align-items:center;gap:10px}.settings-help-label .ui-icon{width:20px;height:20px;color:var(--ocean-aqua-deep)}
.support-page-heading{position:relative;margin:2px 0 28px;padding:72px 24px 25px;overflow:hidden;border:1px solid #bdebe8;border-radius:26px;background:linear-gradient(145deg,#e7fbf9 0%,#f7ffff 55%,#eaf3ff 100%);text-align:center}.support-page-heading::after{content:"";position:absolute;right:-45px;top:-55px;width:150px;height:150px;border-radius:50%;background:rgba(20,212,196,.12)}.support-back{position:absolute;z-index:1;top:17px;left:19px;color:var(--ocean-aqua-deep);font-size:16px;font-weight:800;text-decoration:none}.support-heading-icon{width:62px;height:62px;margin:0 auto 14px;display:grid;place-items:center;border-radius:21px;background:var(--ocean-gradient);color:#fff;box-shadow:0 12px 26px rgba(0,123,255,.18)}.support-heading-icon .ui-icon{width:31px;height:31px}.support-page-heading h1{margin:0;color:var(--ocean-ink);font-size:31px;letter-spacing:-.035em}.support-page-heading p{max-width:310px;margin:8px auto 0;color:var(--ocean-slate);font-size:14px;line-height:1.5}
.support-section-heading{margin:0 3px 10px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.support-section-heading small{color:var(--ocean-slate);font-size:11px;text-align:right}.support-menu,.support-policy-card{width:100%;overflow:hidden;display:flex!important;flex-direction:column!important;align-items:stretch;border:1px solid var(--ocean-line);border-radius:22px;background:#fff;box-shadow:var(--ocean-shadow-sm)}.support-row{width:100%;min-height:84px;padding:15px 16px;display:grid!important;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:13px;border-top:1px solid var(--ocean-line);color:var(--ocean-ink);text-decoration:none;transition:background .15s ease}.support-row:first-child{border-top:0}.support-row:active,.support-policy-card a:active{background:var(--ocean-cloud)}.support-copy{min-width:0}.support-row strong,.support-policy-card strong{display:block;color:var(--ocean-ink);font-size:15px;line-height:1.2}.support-row small,.support-policy-card small{display:block;margin-top:5px;color:var(--ocean-slate);font-size:12px;line-height:1.4}.support-row>b,.support-policy-card b{color:#91a4b5;font-size:24px;font-weight:500}.support-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:var(--ocean-soft-aqua);color:var(--ocean-aqua-deep)}.support-icon .ui-icon{width:23px;height:23px}.support-row-problem .support-icon{background:#fff5dc;color:#a66b00}.support-row-safety .support-icon{background:#eaf3ff;color:#1769c2}.support-row-privacy .support-icon{background:#f1edff;color:#6b53b5}.support-documents-heading{margin-top:28px}.support-policy-card a{width:100%;min-height:70px;padding:14px 17px;display:flex!important;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--ocean-line);color:var(--ocean-ink);text-decoration:none}.support-policy-card a:last-child{border-bottom:0}.support-policy-card a>span{min-width:0}.support-footer-note{margin:20px 0 4px;color:var(--ocean-slate);font-size:11px;text-align:center}
.premium-coming-soon{display:block;margin:2px 0 12px;color:var(--ocean-aqua-deep);font-size:18px}
.ready-filter-row{display:flex;gap:8px;align-items:center;margin:-4px 0 12px}.ready-filter-row a{text-decoration:none}.player-chip.ready-status,.ready-filter-row .active{background:#d7ff3b;color:#0b1d36}.player-chip.active-status{background:#e5fbf8;color:#087f77}.form-stack small{display:block;margin-top:6px;color:var(--ocean-slate)}

/* Help & Support follows the same clean PiklUp card language as Settings. */
.support-page-heading {
  margin: 8px 0 30px;
  padding: 70px 22px 28px;
  border: 0;
  border-radius: var(--radius-hero);
  background:
    radial-gradient(circle at 88% 12%, rgba(20, 212, 196, .24), transparent 34%),
    linear-gradient(145deg, #0B1D36 0%, #12345f 100%);
  box-shadow: var(--ocean-shadow-md);
  color: #fff;
}
.support-page-heading::after { display: none; }
.support-back { top: 18px; left: 20px; color: #fff; opacity: .9; }
.support-heading-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 17px;
  background: rgba(255,255,255,.1);
  box-shadow: none;
  backdrop-filter: blur(10px);
}
.support-heading-icon .ui-icon { width: 27px; height: 27px; }
.support-page-heading h1 { color: #fff; font-size: 30px; }
.support-page-heading p { color: rgba(255,255,255,.76); }
.support-section-heading { margin: 0 2px 12px; align-items: center; }
.support-section-heading small { display: none; }
.support-section-heading .eyebrow { color: #526276; }
.support-menu {
  gap: 10px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.support-row {
  min-height: 76px;
  padding: 14px 15px;
  grid-template-columns: 44px minmax(0,1fr) 18px;
  border: 1px solid var(--ocean-line) !important;
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: 0 5px 15px rgba(11,29,54,.055);
}
.support-row:active { transform: scale(.99); background: #f8fbfc; }
.support-icon,
.support-row-problem .support-icon,
.support-row-safety .support-icon,
.support-row-privacy .support-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(0,123,255,.1), rgba(20,212,196,.14));
  color: var(--ocean-blue);
}
.support-row strong { font-family: var(--font-heading); font-size: 14px; letter-spacing: -.01em; }
.support-row small { margin-top: 3px; font-size: 11px; }
.support-row > b { color: var(--ocean-blue); font-size: 20px; }
.support-documents-heading { margin-top: 31px; }
.support-policy-card {
  border-radius: var(--radius-card);
  box-shadow: 0 5px 15px rgba(11,29,54,.055);
}
.support-policy-card a { min-height: 66px; padding: 13px 16px; }
.support-policy-card strong { font-family: var(--font-heading); font-size: 14px; letter-spacing: -.01em; }
.support-policy-card small { margin-top: 3px; font-size: 11px; }
.support-policy-card b { color: var(--ocean-blue); font-size: 20px; }
.support-footer-note { margin-top: 22px; color: #8793a2; }