:root{color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;--fallback-bg:#f7f8fc;--fallback-text:#11131a;--fallback-card:#fff;--fallback-hint:#81899c;--app-bg:var(--tg-theme-bg-color,var(--fallback-bg));background:var(--app-bg);color:var(--tg-theme-text-color,var(--fallback-text));--brand-gold:#f2a51a;--brand-orange:#d97807;--brand-highlight:#ffc34d;--brand-ink:#4c230d;--blue:var(--brand-gold);--blue-text:var(--brand-ink);--card:var(--tg-theme-section-bg-color,var(--tg-theme-secondary-bg-color,var(--fallback-card)));--hint:var(--tg-theme-hint-color,var(--fallback-hint));--line:var(--tg-theme-section-separator-color,color-mix(in srgb,var(--hint) 22%,transparent));--inactive:color-mix(in srgb,var(--hint) 38%,transparent);--destructive:var(--tg-theme-destructive-text-color,#c93242)}
:root[data-theme=dark]{color-scheme:dark;--fallback-bg:#17212b;--fallback-text:#f5f5f5;--fallback-card:#232e3c;--fallback-hint:#9aa7b5;--brand-gold:#ffb52c;--brand-orange:#e7830a;--brand-highlight:#ffd16a}
:root[data-theme-override=light]{--app-bg:#f7f8fc;--card:#fff;--hint:#81899c;--line:color-mix(in srgb,var(--hint) 22%,transparent);color:#11131a}
:root[data-theme-override=dark]{--app-bg:#17212b;--card:#232e3c;--hint:#9aa7b5;--line:color-mix(in srgb,var(--hint) 22%,transparent);color:#f5f5f5}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -12%,color-mix(in srgb,var(--blue) 11%,transparent),transparent 38%),var(--app-bg)}button,input,textarea,select{font:inherit;color:inherit}.app-shell{width:min(100%,42rem);min-height:100vh;margin:auto;padding:max(1rem,env(safe-area-inset-top)) 1rem max(1.5rem,env(safe-area-inset-bottom))}.view{animation:view-in .22s ease both}@keyframes view-in{from{opacity:0;transform:translateY(7px)}}
.eyebrow{margin:0 0 .45rem;color:var(--blue);font-weight:800}h1{margin:0;font-size:clamp(1.75rem,7vw,2.35rem);line-height:1.08;letter-spacing:-.045em}.status{color:var(--hint);line-height:1.45;margin:.9rem 0 0}.loading-view{min-height:78vh;display:grid;place-content:center;justify-items:center;text-align:center}.brand-mark{width:4.5rem;height:4.5rem;display:grid;place-items:center;border-radius:1.45rem;margin-bottom:1rem;background:linear-gradient(145deg,var(--brand-highlight),var(--brand-orange));color:var(--brand-ink);font-size:2.2rem;font-weight:900;box-shadow:0 18px 45px color-mix(in srgb,var(--blue) 28%,transparent)}.loader{width:1.8rem;height:1.8rem;margin-top:1.5rem;border:3px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.home-header{padding:8vh .4rem 1.8rem}.blocked-view{min-height:78vh;display:grid;place-content:center;justify-items:center;text-align:center;padding:1rem}.blocked-view h1{max-width:20rem}.home-actions{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.home-action{aspect-ratio:1;border:0;border-radius:2rem;display:grid;place-items:center;cursor:pointer;box-shadow:0 20px 48px rgba(76,35,13,.16);transition:transform .16s}.home-action:active{transform:scale(.96)}.profile-action{background:linear-gradient(145deg,var(--brand-highlight),var(--brand-gold));color:var(--brand-ink)}.settings-action{background:linear-gradient(145deg,var(--brand-gold),var(--brand-orange));color:var(--brand-ink)}.home-action svg{width:52%;height:52%;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.action-labels{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.8rem;text-align:center;font-size:.88rem;font-weight:700;color:var(--hint)}
.screen-header{min-height:3.5rem;display:grid;grid-template-columns:5.5rem 1fr 5.5rem;align-items:center;margin-bottom:1.1rem}.screen-header h1{text-align:center;font-size:1.3rem;letter-spacing:-.025em;white-space:nowrap}.back-button,.header-save{border:0;background:transparent;padding:.7rem 0;cursor:pointer}.back-button{justify-self:start;font-size:2rem}.header-save{justify-self:end;color:var(--blue);font-weight:700}.status-card{margin:0 0 1rem;padding:.85rem 1rem;border-radius:1rem;background:color-mix(in srgb,var(--blue) 9%,var(--card));color:color-mix(in srgb,var(--blue) 70%,var(--tg-theme-text-color,var(--fallback-text)));line-height:1.4;font-size:.9rem}
.profile-form,.settings-form{display:grid;gap:1rem}.profile-card,.setting-card{border:1px solid var(--line);background:color-mix(in srgb,var(--card) 96%,transparent);box-shadow:0 12px 35px rgba(24,32,62,.055)}.profile-card{overflow:hidden;border-radius:1.6rem;padding-bottom:1rem}.media-grid{display:grid;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;background:linear-gradient(145deg,color-mix(in srgb,#956bff 22%,var(--card)),color-mix(in srgb,var(--blue) 15%,var(--card)))}.media-item{position:relative;min-height:15rem;scroll-snap-align:start}.media-item img{width:100%;height:15rem;display:block;object-fit:cover}.media-remove{position:absolute;top:.65rem;right:.65rem;width:2rem;height:2rem;border:0;border-radius:50%;background:rgba(16,18,25,.72);color:#fff;font-size:1.25rem}.media-empty{grid-column:1/-1;min-height:12rem;display:grid;place-content:center;text-align:center;color:var(--hint)}.media-upload{display:grid;justify-items:center;gap:.2rem;padding:.8rem;color:var(--blue);font-weight:750;cursor:pointer}.media-upload input{position:absolute;opacity:0;pointer-events:none}.media-upload small{color:var(--hint);font-weight:400}.identity-line{display:flex;align-items:baseline;gap:.15rem;padding:1rem 1rem 0;font-size:1.65rem;font-weight:800}.identity-line input,.city-field,.profile-section textarea{padding:0;border:0;outline:0;background:transparent}.identity-line input[name=name]{min-width:2rem;width:min(58%,12rem)}.identity-line input[name=age]{width:3.2rem}.identity-line input:not([readonly]),.city-field:not([readonly]),.profile-section textarea:not([readonly]){border-radius:.45rem;background:color-mix(in srgb,var(--blue) 10%,transparent);box-shadow:0 0 0 .3rem color-mix(in srgb,var(--blue) 10%,transparent)}.city-field{width:calc(100% - 2rem);margin:.25rem 1rem .75rem;color:var(--hint)}.gender-chip{display:inline-flex;align-items:center;gap:.45rem;margin:0 1rem 1rem;padding:.45rem .65rem;border-radius:999px;background:color-mix(in srgb,var(--blue) 9%,var(--card));font-size:.82rem;color:var(--hint)}.gender-chip select{appearance:none;border:0;background:transparent;color:var(--blue);font-weight:700}.profile-section{display:block;margin:0 1rem;padding:1rem 0;border-top:1px solid var(--line)}.profile-section span{display:block;margin-bottom:.45rem;color:var(--blue);font-weight:800;font-size:.82rem}.profile-section textarea{width:100%;min-height:3.4rem;resize:none;line-height:1.45}.edit-hint{margin:.65rem 1rem 0;color:var(--hint);font-size:.78rem}
.setting-card{position:relative;margin:0;padding:1.25rem;border-radius:1.35rem}fieldset.setting-card{min-width:0}.setting-card legend,.select-card>span:first-child{padding:0;font-size:1.08rem;font-weight:750}.setting-help{margin:.35rem 0 1rem;color:var(--hint);font-size:.88rem}.select-card{display:grid;grid-template-columns:1fr auto 1rem;align-items:center;min-height:5.5rem}.select-card select{position:absolute;inset:0;width:100%;opacity:0}.select-value{color:var(--hint)}.chevron{font-size:1.8rem;color:var(--hint)}.age-values{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.8rem}.age-values label{display:grid;gap:.25rem;padding:.75rem .9rem;border:1px solid var(--line);border-radius:1rem}.age-values label span{color:var(--hint);font-size:.8rem}.age-values input{width:100%;border:0;outline:0;padding:0;background:transparent;font-size:1.25rem}.dual-range{--range-min:0%;--range-max:100%;position:relative;height:2.1rem;margin:1.2rem .35rem 0}.range-track{position:absolute;top:50%;left:0;right:0;height:.26rem;transform:translateY(-50%);background:linear-gradient(to right,var(--inactive) 0 var(--range-min),var(--blue) var(--range-min) var(--range-max),var(--inactive) var(--range-max) 100%)}.dual-range input{position:absolute;inset:0;width:100%;margin:0;appearance:none;background:transparent;pointer-events:none}.dual-range input::-webkit-slider-runnable-track{height:.25rem;background:transparent}.dual-range input::-webkit-slider-thumb{width:1.35rem;height:1.35rem;margin-top:-.55rem;appearance:none;border:0;border-radius:50%;background:var(--blue);pointer-events:auto}.range-bounds{display:flex;justify-content:space-between;margin:0 .35rem;color:var(--hint);font-size:.8rem}.stars{display:flex;justify-content:space-between;gap:.55rem}.stars button{flex:1;border:0;padding:.3rem 0;background:transparent;color:var(--inactive);font-size:clamp(2.8rem,15vw,4.3rem);line-height:1;transition:.15s}.stars button.active{color:var(--blue)}.importance-labels{display:flex;justify-content:space-between;color:var(--hint);font-size:.78rem}.importance-labels button{border:0;background:transparent;color:inherit;padding:.25rem 0}.primary-button{width:100%;min-height:3.7rem;border:0;border-radius:1rem;padding:.9rem 1.2rem;background:linear-gradient(135deg,#2570f4,#3484ff);color:var(--blue-text);font-weight:780;box-shadow:0 12px 28px color-mix(in srgb,var(--blue) 24%,transparent)}.primary-button:disabled,.header-save:disabled{opacity:.6}.primary-button.saved{background:linear-gradient(135deg,#23a56a,#31c47c)}
.home-header{padding-top:6vh}.home-actions{grid-template-columns:1fr;gap:1rem}.home-action{width:100%;min-height:10rem;aspect-ratio:auto}.home-action svg{width:5.6rem;height:5.6rem}.screen-header{grid-template-columns:4rem minmax(0,1fr) 4.8rem}.screen-header h1{min-width:0;font-size:1.15rem}.header-save{font-size:.82rem}.profile-form,.settings-form,.profile-card,.setting-card{min-width:0}.media-upload{text-align:center}.media-upload:has(input:disabled){opacity:.55;pointer-events:none}.identity-line{gap:0}.identity-line span{margin-right:.24rem}.identity-line input[name=name]{max-width:70%;width:auto}.identity-line input[name=age]{width:3ch}
.toast{position:fixed;z-index:10;left:50%;bottom:max(1.2rem,env(safe-area-inset-bottom));max-width:calc(100% - 2rem);transform:translateX(-50%);margin:0;padding:.8rem 1rem;border-radius:999px;color:#fff;font-weight:700;font-size:.88rem;box-shadow:0 12px 30px rgba(0,0,0,.2)}.feedback-toast{background:#229b64}.error-toast{background:#c94848}@media(max-width:360px){.app-shell{padding-inline:.75rem}.screen-header{grid-template-columns:3.7rem minmax(0,1fr) 4.5rem}.screen-header h1{font-size:1.05rem}.setting-card{padding:1rem}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important}}

.theme-toggle-button {
  position: fixed;
  z-index: 9;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, calc((100vw - 42rem) / 2 + 1rem));
  width: 3.8rem;
  height: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0 0.18rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 90%, transparent);
  color: var(--hint);
  box-shadow: 0 8px 22px color-mix(in srgb, #000 15%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
}

.theme-toggle-thumb {
  position: absolute;
  z-index: 0;
  top: 0.18rem;
  left: 0.18rem;
  width: 1.62rem;
  height: 1.62rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 18%, var(--card));
  box-shadow: 0 2px 8px color-mix(in srgb, #000 16%, transparent);
  transition: transform 180ms ease;
}

:root[data-theme=dark] .theme-toggle-thumb {
  transform: translateX(1.62rem);
}

.theme-icon {
  position: relative;
  z-index: 1;
  width: 1rem;
  height: 1rem;
  justify-self: center;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color 180ms ease;
}

:root[data-theme=light] .theme-icon-sun,
:root[data-theme=dark] .theme-icon-moon {
  color: var(--blue);
}


.setting-card-title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 750;
  line-height: 1.25;
}

.importance-stepper {
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr) 2.7rem;
  align-items: center;
  gap: 0.8rem;
}

.importance-adjust {
  width: 2.7rem;
  height: 2.7rem;
  display: grid;
  place-items: center;
  padding: 0 0 0.08rem;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line));
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--blue) 8%, var(--card));
  color: var(--blue);
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
}

.importance-adjust:disabled {
  opacity: 0.35;
  cursor: default;
}

.importance-adjust:not(:disabled):active {
  transform: scale(0.94);
}

.importance-adjust:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: 2px;
}

.importance-progress {
  height: 2.7rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.18rem;
  padding: 0.25rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 32%, var(--line));
  border-radius: 0.8rem;
  background: transparent;
  box-shadow:
    inset 0 2px 5px color-mix(in srgb, #000 16%, transparent),
    0 0 0 1px color-mix(in srgb, var(--brand-highlight) 8%, transparent);
}

.importance-progress-chunk {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--hint) 15%, transparent);
  border-radius: 0.46rem;
  background: transparent;
  box-shadow: inset 0 1px 1px color-mix(in srgb, #fff 8%, transparent);
  transition: border-color 220ms ease, box-shadow 220ms ease;
}

.importance-progress-chunk::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    var(--brand-digits-texture),
    linear-gradient(135deg, var(--brand-highlight), var(--brand-gold));
  background-size: 7.5rem 3.75rem, auto;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms cubic-bezier(0.22, 0.75, 0.28, 1);
}

.importance-progress-chunk.active {
  border-color: color-mix(in srgb, var(--brand-orange) 30%, transparent);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.52),
    inset 0 -2px 4px color-mix(in srgb, var(--brand-orange) 28%, transparent),
    0 0 10px color-mix(in srgb, var(--brand-gold) 16%, transparent);
}

.importance-progress-chunk.active::before {
  transform: scaleX(1);
}

.primary-button:not(.saved) {
  background:
    var(--brand-digits-texture),
    linear-gradient(135deg, var(--brand-highlight), var(--brand-orange));
  background-size: 9rem 4.5rem, auto;
  color: var(--brand-ink);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brand-orange) 28%, transparent);
}

:root {
  --brand-digits-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='72' viewBox='0 0 144 72'%3E%3Cg fill='%234c230d' fill-opacity='.14' font-family='ui-monospace,monospace' font-size='7'%3E%3Ctext x='7' y='8'%3E5%3Ctspan x='7' dy='9'%3E0%3C/tspan%3E%3Ctspan x='7' dy='9'%3E3%3C/tspan%3E%3Ctspan x='7' dy='9'%3E8%3C/tspan%3E%3Ctspan x='7' dy='9'%3E1%3C/tspan%3E%3C/text%3E%3Ctext x='31' y='-1'%3E8%3Ctspan x='31' dy='9'%3E6%3C/tspan%3E%3Ctspan x='31' dy='9'%3E3%3C/tspan%3E%3Ctspan x='31' dy='9'%3E0%3C/tspan%3E%3Ctspan x='31' dy='9'%3E9%3C/tspan%3E%3Ctspan x='31' dy='9'%3E2%3C/tspan%3E%3C/text%3E%3Ctext x='57' y='11'%3E3%3Ctspan x='57' dy='9'%3E1%3C/tspan%3E%3Ctspan x='57' dy='9'%3E7%3C/tspan%3E%3Ctspan x='57' dy='9'%3E0%3C/tspan%3E%3C/text%3E%3Ctext x='83' y='3'%3E6%3Ctspan x='83' dy='9'%3E0%3C/tspan%3E%3Ctspan x='83' dy='9'%3E8%3C/tspan%3E%3Ctspan x='83' dy='9'%3E5%3C/tspan%3E%3Ctspan x='83' dy='9'%3E3%3C/tspan%3E%3Ctspan x='83' dy='9'%3E9%3C/tspan%3E%3C/text%3E%3Ctext x='111' y='14'%3E9%3Ctspan x='111' dy='9'%3E2%3C/tspan%3E%3Ctspan x='111' dy='9'%3E4%3C/tspan%3E%3Ctspan x='111' dy='9'%3E0%3C/tspan%3E%3C/text%3E%3Ctext x='136' y='5'%3E1%3Ctspan x='136' dy='9'%3E8%3C/tspan%3E%3Ctspan x='136' dy='9'%3E5%3C/tspan%3E%3Ctspan x='136' dy='9'%3E7%3C/tspan%3E%3Ctspan x='136' dy='9'%3E3%3C/tspan%3E%3C/text%3E%3C/g%3E%3C/svg%3E");
}

.profile-action {
  background:
    var(--brand-digits-texture),
    linear-gradient(145deg, var(--brand-highlight), var(--brand-gold));
  background-size: 12rem 6rem, auto;
}

.settings-action {
  background:
    var(--brand-digits-texture),
    linear-gradient(145deg, var(--brand-gold), var(--brand-orange));
  background-position: 2rem -0.5rem, center;
  background-size: 12rem 6rem, auto;
}

.gender-picker {
  padding: 0;
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.gender-picker.open {
  border-color: color-mix(in srgb, var(--brand-gold) 52%, var(--line));
  box-shadow: 0 14px 36px color-mix(in srgb, var(--brand-orange) 12%, transparent);
}

.gender-picker-trigger {
  width: 100%;
  min-height: 5.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 1.35rem;
  align-items: center;
  gap: 0.65rem;
  padding: 1.25rem;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.gender-picker-trigger:focus-visible,
.gender-picker-options button:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: -3px;
}

.gender-picker-title {
  font-size: 1.08rem;
  font-weight: 750;
}

.gender-picker-value {
  color: var(--hint);
}

.gender-picker-chevron {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: var(--hint);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease;
}

.gender-picker.open .gender-picker-chevron {
  transform: rotate(180deg);
}

.gender-picker.open .gender-picker-trigger {
  grid-template-columns: minmax(0, 1fr) 1.35rem;
}

.gender-picker.open .gender-picker-value {
  display: none;
}

.gender-picker-options {
  padding: 0 0.75rem 0.75rem;
  border-top: 1px solid var(--line);
}

.gender-picker-options button {
  width: 100%;
  min-height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.9rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.gender-picker-options button:last-child {
  border-bottom: 0;
}

.gender-picker-options button[aria-selected="true"] {
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--brand-gold) 15%, var(--card));
  color: var(--brand-orange);
  font-weight: 750;
}

.gender-picker-options button[aria-selected="true"]::after {
  content: "✓";
  color: var(--brand-orange);
  font-weight: 900;
}

.theme-toggle-button:active {
  transform: scale(0.96);
}

.review-status {
  margin-top: 1.15rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 28%, var(--line));
  border-radius: 1.15rem;
  background: color-mix(in srgb, var(--brand-gold) 6%, var(--card));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--brand-orange) 8%, transparent);
}

.review-status-heading {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2rem;
}

.review-status-heading strong {
  font-size: 1rem;
  line-height: 1.25;
}

.review-status-icon {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--brand-gold) 14%, var(--card));
  color: var(--brand-orange);
  font-size: 1.4rem;
  font-weight: 950;
  line-height: 1;
}

.review-status-approved .review-status-icon {
  color: var(--brand-orange);
  box-shadow: 0 0 18px color-mix(in srgb, var(--brand-gold) 24%, transparent);
}

.review-status-rejected {
  border-color: color-mix(in srgb, var(--destructive) 30%, var(--line));
  background: color-mix(in srgb, var(--destructive) 5%, var(--card));
}

.review-status-rejected .review-status-icon {
  background: color-mix(in srgb, var(--destructive) 12%, var(--card));
  color: var(--destructive);
}

.review-progress {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.85rem;
}

.review-progress-stage {
  display: grid;
  gap: 0.38rem;
  min-width: 0;
}

.review-progress-bar {
  position: relative;
  height: 0.68rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--hint) 28%, transparent);
  border-radius: 999px;
  background: transparent;
}

.review-progress-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-highlight), var(--brand-orange));
  transform: scaleX(0);
  transform-origin: left center;
}

.review-progress-stage.complete .review-progress-bar::before,
.review-progress-stage.rejected .review-progress-bar::before {
  transform: scaleX(1);
}

.review-progress-stage.active .review-progress-bar::before {
  width: 58%;
  transform: translateX(-115%);
  animation: review-progress-flow 1.25s ease-in-out infinite;
}

.review-progress-stage.rejected .review-progress-bar {
  border-color: color-mix(in srgb, var(--destructive) 45%, transparent);
}

.review-progress-stage.rejected .review-progress-bar::before {
  background: var(--destructive);
}

.review-progress-stage small {
  display: block;
  width: 100%;
  overflow: hidden;
  color: var(--hint);
  font-size: 0.72rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-progress-stage.complete small,
.review-progress-stage.active small {
  color: color-mix(in srgb, var(--brand-orange) 72%, var(--hint));
}

.review-progress-stage.rejected small {
  color: var(--destructive);
}

.review-status-note {
  margin: 0.8rem 0 0;
  color: var(--hint);
  font-size: 0.8rem;
  line-height: 1.35;
}

@keyframes review-progress-flow {
  0% { transform: translateX(-115%); }
  100% { transform: translateX(195%); }
}

.primary-button.saved {
  background: linear-gradient(135deg, var(--brand-highlight), var(--brand-gold));
  color: var(--brand-ink);
}

.toast {
  --toast-color: var(--brand-gold);
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  max-width: none;
  pointer-events: none;
  margin: 0;
  padding: 2rem;
  border-radius: 0;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--toast-color) 30%, transparent), transparent 38%),
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--toast-color) 25%, transparent), transparent 38%),
    radial-gradient(circle at 0 100%, color-mix(in srgb, var(--toast-color) 25%, transparent), transparent 38%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--toast-color) 30%, transparent), transparent 38%);
  color: var(--tg-theme-text-color, var(--fallback-text));
  font-size: clamp(1.3rem, 6vw, 2rem);
  font-weight: 850;
  line-height: 1.16;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 2px 18px color-mix(in srgb, var(--app-bg) 88%, transparent);
  box-shadow: none;
  opacity: 0;
  transform: none;
}

.feedback-toast {
  --toast-color: var(--brand-gold);
  background-color: transparent;
}

.error-toast {
  --toast-color: var(--destructive);
  background-color: transparent;
}

.toast-visible {
  animation: toast-flash 2.2s ease both;
}

@keyframes toast-flash {
  0% { opacity: 0; transform: scale(0.96); }
  14%, 72% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.015); }
}

.statistics-action {
  background:
    var(--brand-digits-texture),
    linear-gradient(145deg, var(--brand-orange), var(--brand-highlight));
  background-size: 10rem 5rem, auto;
  color: var(--brand-ink);
}

.statistics-action svg rect {
  fill: color-mix(in srgb, var(--brand-ink) 13%, transparent);
}

.statistics-header {
  margin: 0 0 1.25rem;
  padding: 0 0.35rem;
}

.statistics-loading {
  min-height: 16rem;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.85rem;
  color: var(--hint);
}

.statistics-loading .loader {
  margin: 0;
}

.statistics-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.statistics-summary-card,
.statistics-chart-card {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 96%, transparent);
  box-shadow: 0 12px 35px color-mix(in srgb, #000 7%, transparent);
}

.statistics-summary-card {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 0.28rem;
  padding: 0.9rem 0.35rem;
  overflow: hidden;
  border-radius: 1.2rem;
  text-align: center;
}

.statistics-summary-card svg {
  width: 1.45rem;
  height: 1.45rem;
  margin-bottom: 0.15rem;
  fill: none;
  stroke: var(--brand-orange);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.statistics-summary-card strong {
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(1.25rem, 6vw, 1.75rem);
  line-height: 1;
  text-overflow: ellipsis;
}

.statistics-summary-card span {
  color: var(--hint);
  font-size: clamp(0.68rem, 2.8vw, 0.8rem);
}

.statistics-chart-card {
  padding: 1.15rem 1rem 1rem;
  border-radius: 1.5rem;
}

.statistics-chart-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.2rem;
}

.statistics-chart-heading .eyebrow {
  margin-bottom: 0.18rem;
  font-size: 0.76rem;
}

.statistics-chart-heading h2 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.2;
}

.statistics-chart-heading > strong {
  flex: none;
  color: var(--hint);
  font-size: 0.78rem;
  font-weight: 700;
}

.statistics-chart {
  position: relative;
  height: 13rem;
  padding: 0.55rem 0.35rem 0.35rem;
  border-bottom: 1px solid var(--line);
}

.statistics-chart-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.statistics-chart-guide {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.statistics-chart-area {
  fill: color-mix(in srgb, var(--brand-gold) 12%, transparent);
}

.statistics-chart-line {
  fill: none;
  stroke: var(--brand-orange);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: statistics-line-draw 620ms cubic-bezier(0.22, 0.75, 0.28, 1) forwards;
}

.statistics-chart-point {
  fill: var(--brand-gold);
  stroke: var(--card);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 180ms ease, fill 180ms ease;
}

.statistics-chart-point-target {
  pointer-events: none;
}

.statistics-chart-point-target.active .statistics-chart-point {
  fill: var(--brand-highlight);
  transform: scale(2);
}

.statistics-chart-day-hits {
  position: absolute;
  z-index: 1;
  inset: 0.55rem 0.35rem 0.35rem;
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
}

.statistics-chart-day-hit {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.statistics-chart-day-hit:focus-visible {
  outline: none;
  box-shadow: inset 0 -2px var(--brand-orange);
}

@keyframes statistics-line-draw {
  to { stroke-dashoffset: 0; }
}

.statistics-chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.45rem;
  color: var(--hint);
  font-size: 0.7rem;
}

.statistics-chart-selection {
  position: absolute;
  z-index: 2;
  width: max-content;
  max-width: min(13rem, 74vw);
  margin: 0;
  padding: 0.42rem 0.62rem;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 55%, var(--line));
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--card) 94%, var(--brand-gold));
  box-shadow: 0 0.45rem 1.2rem color-mix(in srgb, var(--brand-ink) 18%, transparent);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 750;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 0.65rem)) scale(0.94);
  transition: opacity 160ms ease, transform 160ms ease;
}

.statistics-chart-selection.visible {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 0.65rem)) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle-thumb,
  .theme-icon,
  .importance-progress-chunk,
  .importance-progress-chunk::before,
  .statistics-chart-point {
    transition: none;
  }

  .statistics-chart-line {
    stroke-dashoffset: 0;
    animation: none;
  }

  .review-progress-stage.active .review-progress-bar::before {
    width: 100%;
    transform: scaleX(0.58);
    animation: none;
  }

  .toast-visible {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.group-source-search { width:100%; min-height:2.8rem; padding:.65rem .85rem; margin:.25rem 0 .8rem; border:1px solid var(--line); border-radius:.85rem; background:var(--card); color:var(--text); }
 .group-visibility-table { width:100%; margin:16px 0; }
.group-visibility-head,.group-visibility-row { display:grid; grid-template-columns:minmax(0,1fr) 48px 60px 28px; gap:7px; align-items:center; }
.group-visibility-head { padding:0 10px 8px; font-size:.7rem; font-weight:700; color:var(--hint); text-align:center; }
.group-visibility-rows { display:grid; gap:7px; }
.group-visibility-row { padding:9px 10px; min-height:76px; border:1px solid var(--line); border-radius:1rem; background:color-mix(in srgb,var(--card) 88%,transparent); }
.source-name { display:flex; gap:9px; align-items:center; width:100%; min-width:0; min-height:48px; border:0; padding:0; background:transparent; color:inherit; text-align:left; }
.source-icon { flex:none; display:grid; place-items:center; width:34px; height:34px; border:1px solid color-mix(in srgb,var(--hint) 36%,var(--line)); border-radius:50%; background:color-mix(in srgb,var(--hint) 6%,transparent); color:var(--brand-gold); }
.source-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.source-identity { display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; }
.source-title { font-size:.88rem; font-weight:750; line-height:1.22; overflow-wrap:anywhere; }
.source-type { display:inline-block; max-width:100%; padding:.12rem .4rem; border:1px solid var(--line); border-radius:1rem; color:var(--hint); background:color-mix(in srgb,var(--hint) 8%,transparent); font-size:.6rem; line-height:1.3; }
.source-inactive .source-title,.source-inactive .source-icon { color:var(--hint); }
.source-switch { display:flex; justify-content:center; align-items:center; width:100%; min-height:44px; padding:0; border:1px solid color-mix(in srgb,var(--hint) 30%,var(--line)); border-radius:.7rem; background:transparent; color:var(--brand-orange); font-size:1.6rem; font-weight:750; }
.source-switch[aria-pressed="true"] { color:var(--brand-ink); background:linear-gradient(120deg,var(--brand-highlight),var(--brand-orange)); border-color:var(--brand-gold); box-shadow:0 0 12px color-mix(in srgb,var(--brand-gold) 14%,transparent); }
.source-switch:disabled { opacity:.35; cursor:default; }
.source-remove { display:flex; justify-content:center; align-items:center; width:28px; min-height:44px; border:0; padding:0; background:transparent; color:var(--hint); }
.source-remove svg { width:21px; height:21px; }
.source-remove:disabled { opacity:.35; cursor:wait; }
#group-unavailable summary { cursor:pointer; color:var(--hint); }
.unavailable-source { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.unavailable-source span { flex:1; min-width:0; overflow-wrap:anywhere; }
.unavailable-source .source-remove { width:auto; flex-shrink:0; padding:8px; }
.source-switch:focus-visible,.source-name:focus-visible,.source-remove:focus-visible { outline:2px solid var(--brand-orange); outline-offset:2px; }
.group-search-box { position:relative; }
.group-search-box > svg { position:absolute; left:.85rem; top:50%; transform:translateY(-50%); width:20px; height:20px; fill:none; stroke:var(--hint); stroke-width:1.7; pointer-events:none; }
.group-search-box .group-source-search { padding-left:2.6rem; }
@media(min-width:560px) {
 .group-visibility-head,.group-visibility-row { grid-template-columns:minmax(0,1fr) 76px 90px 36px; gap:14px; }
 .source-icon { width:46px; height:46px; }.source-icon svg{width:28px;height:28px;}
 .source-title { font-size:1rem; }.source-type{font-size:.7rem;}.source-switch{min-height:48px;}
}
.group-source-buttons { display:grid; gap:12px; margin-top:10px; }

/* Persistent navigation and the first stage of the Mini App redesign. */
.app-shell { padding-bottom:calc(7rem + env(safe-area-inset-bottom)); }
.app-header { display:grid; grid-template-columns:minmax(0,1fr) auto 42px; gap:10px; align-items:center; margin:.1rem 0 1.3rem; }
.app-brand { font-size:1.3rem; letter-spacing:-.035em; white-space:nowrap; }
.profile-status-pill { max-width:45vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:.55rem .7rem; border:1px solid color-mix(in srgb,var(--brand-gold) 35%,transparent); border-radius:2rem; background:color-mix(in srgb,var(--brand-gold) 10%,transparent); color:var(--brand-gold); font-size:.75rem; font-weight:750; }
.profile-status-pill[data-status="rejected"] { color:var(--destructive); border-color:var(--destructive); }
.app-header .theme-toggle-button { position:static; width:42px; height:42px; min-width:0; padding:8px; display:grid; place-items:center; border-radius:50%; }
.app-header .theme-icon { width:25px; height:25px; color:var(--brand-gold); grid-area:1/1; }
html[data-theme="dark"] .theme-icon-sun,html[data-theme="light"] .theme-icon-moon { display:none; }
.tab-dock { position:fixed; z-index:20; bottom:max(.6rem,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:min(calc(100% - 1rem),41rem); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:.35rem; border:1px solid var(--line); border-radius:2rem; background:color-mix(in srgb,var(--card) 96%,transparent); backdrop-filter:blur(20px); box-shadow:0 8px 35px #0003; }
.tab-dock button { display:flex; flex-direction:column; gap:.3rem; justify-content:center; align-items:center; min-height:4.7rem; padding:.5rem .1rem; border:0; border-radius:1.5rem; background:transparent; color:var(--hint); font-size:.76rem; font-weight:600; }
.tab-dock button[aria-current="page"] { background:color-mix(in srgb,var(--brand-gold) 17%,transparent); color:var(--brand-gold); }
.tab-dock svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.tab-dock button:focus-visible { outline:2px solid var(--brand-gold); }
.gender-segments { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:.65rem; }
.gender-segments button { min-height:3rem; border:1px solid var(--line); border-radius:.85rem; background:transparent; color:var(--hint); font-size:.9rem; }
.gender-segments button[aria-pressed="true"] { color:var(--brand-ink); background:linear-gradient(120deg,var(--brand-highlight),var(--brand-orange)); border-color:var(--brand-gold); font-weight:750; box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-gold) 18%,transparent); }
.importance-heading { display:flex; align-items:center; gap:.8rem; }
.importance-heading svg { flex:none; width:32px; height:36px; fill:none; stroke:var(--brand-gold); stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round; }
.importance-heading .setting-help { margin:.25rem 0 .75rem; font-size:.83rem; }
.importance-heading .setting-card-title { font-size:1rem; }
.importance-range { --importance-fill:0%; display:block; appearance:none; width:100%; height:1.3rem; padding:0; margin:.5rem 0 1rem; border:1px solid var(--brand-orange); border-radius:1rem; background:linear-gradient(to right,var(--brand-highlight) 0,var(--brand-gold) var(--importance-fill),color-mix(in srgb,var(--card) 70%,#000) var(--importance-fill)); cursor:pointer; }
.importance-range::-webkit-slider-thumb { appearance:none; width:2.15rem; height:2.15rem; border-radius:50%; border:3px solid var(--brand-highlight); background:var(--brand-gold); box-shadow:0 0 12px color-mix(in srgb,var(--brand-gold) 50%,transparent); }
.importance-range::-moz-range-thumb { width:1.8rem; height:1.8rem; border-radius:50%; border:3px solid var(--brand-highlight); background:var(--brand-gold); box-shadow:0 0 12px color-mix(in srgb,var(--brand-gold) 50%,transparent); }
.importance-range:focus-visible { outline:2px solid var(--brand-gold); outline-offset:5px; }
.importance-scale { display:grid; grid-template-columns:repeat(4,1fr); align-items:start; gap:4px; color:var(--hint); font-size:.67rem; text-align:center; }
.importance-scale span:first-child { text-align:left; }.importance-scale span:last-child { text-align:right; }
.preferences-heading { margin:1.2rem 0 2rem; }.preferences-heading h1 { font-size:2rem; }
.preference-links { display:grid; gap:4px; }
.preference-row { position:relative; display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:.9rem; min-height:5.3rem; padding:1rem; border:1px solid var(--line); border-radius:1.15rem; background:color-mix(in srgb,var(--card) 85%,transparent); color:inherit; text-decoration:none; font-size:1rem; }
.preference-row svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.theme-preference { grid-template-columns:30px minmax(0,1fr) auto 10px; }
.preference-value { color:var(--hint); font-size:.8rem; }.preference-chevron { color:var(--hint); font-size:1.8rem; }
.theme-preference select { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }
.statistics-header { padding:0; margin:1.2rem 0 1.4rem; }.statistics-header h1 { font-size:2rem; }
.statistics-chart-heading { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.statistics-chart-heading select { max-width:100%; border:1px solid var(--line); border-radius:.65rem; padding:.4rem .5rem; background:var(--card); color:var(--hint); font-size:.75rem; }
.statistics-chart-heading h2 { margin:0; }.statistics-chart { touch-action:none; user-select:none; cursor:crosshair; }
@media(max-width:360px) { .app-brand{font-size:1.1rem}.app-header{gap:6px}.profile-status-pill{font-size:.67rem;padding:.5rem}.theme-preference{gap:.55rem}.tab-dock button{font-size:.68rem} }
.gender-picker { padding:1.25rem; }
.statistics-chart-header { display:block; }
.statistics-chart-heading { flex-wrap:nowrap; justify-content:space-between; }
.statistics-chart-heading h2 { font-size:1rem; }
.statistics-chart-heading select { flex:none; width:9.3rem; font-size:.68rem; }
.statistics-chart-header > strong { display:block; margin-top:.5rem; color:var(--hint); font-size:.8rem; }
.statistics-chart-svg[data-dense="true"] .statistics-chart-point-target:not(.active):not(:last-child) { opacity:0; }

/* In-app choices, editable interval endpoints, and edge-to-edge navigation. */
.tab-dock { bottom:0; left:0; right:0; transform:none; width:100%; border-radius:1.35rem 1.35rem 0 0; border-inline:0; border-bottom:0; padding:.35rem max(.35rem,calc((100vw - 42rem) / 2)) calc(.35rem + env(safe-area-inset-bottom)); }
.app-choice { position:relative; min-width:0; }
.app-choice-trigger { display:flex; align-items:center; justify-content:space-between; gap:.55rem; width:100%; min-height:36px; border:1px solid var(--line); border-radius:.65rem; padding:.4rem .55rem; background:var(--card); color:var(--hint); font-size:.68rem; }
.statistics-chart-heading .app-choice { flex:none; width:9.3rem; }
.app-choice-options { position:absolute; top:calc(100% + .4rem); right:0; z-index:35; min-width:100%; padding:.3rem; border:1px solid var(--line); border-radius:.9rem; background:var(--card); box-shadow:0 12px 32px #0004; }
.app-choice-options button { display:block; width:100%; min-height:44px; padding:.65rem .85rem; border:0; border-radius:.6rem; white-space:nowrap; text-align:left; background:transparent; color:inherit; font-size:.85rem; }
.app-choice-options button[aria-selected="true"] { color:var(--brand-gold); background:color-mix(in srgb,var(--brand-gold) 14%,transparent); font-weight:700; }
.app-choice-options button:focus-visible,.app-choice-trigger:focus-visible { outline:2px solid var(--brand-gold); outline-offset:-2px; }
.appearance-choice .app-choice-options { left:0; right:0; }
.theme-preference { width:100%; text-align:left; cursor:pointer; }
.profile-gender-segments { display:grid; grid-template-columns:repeat(2,1fr); gap:3px; padding:3px; border:1px solid var(--line); border-radius:.65rem; }
.profile-gender-segments button { min-width:3.4rem; min-height:2.1rem; padding:.25rem .5rem; border:0; border-radius:.45rem; background:transparent; color:var(--hint); font-size:.85rem; }
.profile-gender-segments button[aria-pressed="true"] { background:var(--brand-gold); color:var(--brand-ink); font-weight:750; }
.age-interval-values { display:flex; justify-content:space-between; gap:1rem; margin-top:.65rem; }
.age-interval-value { width:4.3rem; min-height:44px; padding:.15rem .4rem; border:1px solid color-mix(in srgb,var(--brand-gold) 42%,var(--line)); border-radius:.48rem; background:transparent; color:var(--hint); font-size:1.4rem; font-weight:650; appearance:textfield; }
.age-interval-value:last-child { text-align:right; }
.age-interval-value::-webkit-inner-spin-button,.age-interval-value::-webkit-outer-spin-button { appearance:none; margin:0; }
.age-interval-value:focus { outline:1px solid var(--brand-gold); color:inherit; }
.source-name mark { color:var(--brand-ink); background:var(--brand-highlight); border-radius:.2rem; padding:0 .06rem; }
html.theme-changing,html.theme-changing body,html.theme-changing .setting-card,html.theme-changing .profile-card,html.theme-changing .tab-dock,html.theme-changing button,html.theme-changing input,html.theme-changing .preference-row,html.theme-changing .app-choice-options { transition:background-color .32s ease,color .32s ease,border-color .32s ease; }
::view-transition-old(root) { animation:theme-fade-out .28s ease both; }
::view-transition-new(root) { animation:theme-fade-in .28s ease both; }
@keyframes theme-fade-out { to{opacity:0;} }
@keyframes theme-fade-in { from{opacity:0;} }
@media(prefers-reduced-motion:reduce) { ::view-transition-old(root),::view-transition-new(root){animation:none;}html.theme-changing *{transition:none!important;} }