/* V25 account layer only. V21 styles.css is unchanged. */
.oq25-account-card{align-items:center}
.oq25-account-copy{display:grid;gap:5px;min-width:0}
.oq25-account-copy>strong{color:var(--theme-text,var(--text))}
.oq25-account-copy>p{margin:0;color:var(--theme-muted,var(--muted));font-size:11px;line-height:1.5}
.oq25-account-actions{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.oq25-sync-status{min-height:31px;padding:0 10px;border:1px solid var(--theme-border-soft,var(--line));border-radius:999px;display:inline-flex;align-items:center;gap:6px;background:var(--theme-panel-2,rgba(255,255,255,.025));color:var(--theme-muted,var(--muted));font-size:10px;font-weight:850;white-space:nowrap}
.oq25-sync-status:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.oq25-sync-status[data-state="synced"]{color:var(--theme-accent-strong,var(--gold-3))}
.oq25-sync-status[data-state="syncing"]:before{animation:oq25pulse 1s ease-in-out infinite}
.oq25-sync-status[data-state="error"]{color:#d68478}
@keyframes oq25pulse{50%{opacity:.25;transform:scale(.7)}}
.oq25-auth-card{width:min(600px,100%)}
.oq25-auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;margin:20px 0 16px;border:1px solid var(--theme-border-soft,var(--line));border-radius:14px;background:var(--theme-panel-2,rgba(255,255,255,.025))}
.oq25-auth-tab{min-height:41px;border:0;border-radius:10px;background:transparent;color:var(--theme-muted,var(--muted));font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.oq25-auth-tab.active{background:var(--theme-panel,var(--panel));color:var(--theme-text,var(--text));box-shadow:0 5px 15px rgba(0,0,0,.1)}
.oq25-auth-form{display:grid;gap:13px}.oq25-auth-field{display:grid;gap:7px}.oq25-auth-field>span{color:var(--theme-muted,var(--muted));font-size:10px;font-weight:850;letter-spacing:.04em}
.oq25-auth-field input{width:100%;min-height:47px;padding:0 12px;border:1px solid var(--theme-border,var(--line));border-radius:12px;background:var(--theme-input,#0d0c0a);color:var(--theme-input-text,var(--text));font:inherit;outline:none}
.oq25-auth-field input:focus{border-color:var(--theme-accent,var(--gold))}.oq25-auth-note{color:var(--theme-muted,var(--muted));font-size:9px;line-height:1.55}.oq25-auth-status{min-height:17px;color:var(--theme-muted,var(--muted));font-size:10px;font-weight:700;line-height:1.5}.oq25-auth-status[data-kind="error"]{color:#d68478}.oq25-auth-status[data-kind="success"]{color:var(--theme-accent-strong,var(--gold-3))}
.oq25-auth-link{justify-self:start;margin:0;padding:5px 0}.oq25-auth-heading{display:grid;gap:5px;margin:8px 0 16px}.oq25-auth-heading>strong{color:var(--theme-text,var(--text));font-size:20px}.oq25-auth-heading p{margin:0;color:var(--theme-muted,var(--muted));font-size:11px;line-height:1.55}.oq25-auth-privacy{margin-top:17px}
body[data-theme="light"] .oq25-auth-tabs{background:#f4f0e8}body[data-theme="light"] .oq25-auth-tab.active{background:#fff}
/* Make the existing V21 share sheet explicitly clickable above its overlay. */
.share-sheet-overlay{z-index:0!important}.share-sheet-card{z-index:1!important}.share-sheet-card button,.share-sheet-card a{position:relative;z-index:2;pointer-events:auto!important}
@media(max-width:760px){.oq25-account-card{align-items:stretch}.oq25-account-actions{width:100%;flex-wrap:wrap}.oq25-account-actions .compact-cta{flex:1;min-width:210px}}

.oq25-last-sync{
  display:block;
  margin-top:3px;
  color:var(--theme-muted,var(--muted));
  font-size:9px;
  line-height:1.45;
  font-weight:700;
}


/* V30 — quick theme picker + guest today-only progress */
.quick-theme-control{
  min-height:42px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--theme-border,var(--line));
  background:var(--theme-panel-2,#151412);
  color:var(--theme-text,#fff);
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.quick-theme-control:hover{
  background:var(--theme-hover,rgba(255,255,255,.05));
  border-color:var(--theme-accent,#d5b46b);
}
.quick-theme-icon{
  color:var(--theme-accent-strong,#f1d58d);
  font-size:14px;
  line-height:1;
}
#quickThemeSelect{
  appearance:auto;
  min-width:88px;
  border:0;
  outline:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
#quickThemeSelect option{
  background:var(--theme-panel,#151412);
  color:var(--theme-text,#fff);
}

.guest-sync-prompt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:13px 15px;
  border:1px solid var(--theme-border-soft,var(--line));
  border-radius:16px;
  background:var(--theme-soft,rgba(213,180,107,.07));
  color:var(--theme-text,var(--text));
}
.guest-sync-prompt[hidden]{display:none!important}
.guest-sync-prompt-copy{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.guest-sync-prompt-copy>div{
  display:grid;
  gap:2px;
}
.guest-sync-prompt-copy strong{
  font-size:11px;
  line-height:1.35;
}
.guest-sync-prompt-copy small{
  color:var(--theme-muted,var(--muted));
  font-size:9px;
  line-height:1.35;
}
.guest-sync-prompt-icon{
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:var(--theme-panel-2,rgba(255,255,255,.04));
  color:var(--theme-accent-strong,var(--gold-3));
  font-weight:900;
}
.guest-sync-prompt-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}
.guest-sync-dismiss{
  width:30px;
  height:30px;
  border-radius:50%;
  border:0;
  background:transparent;
  color:var(--theme-muted,var(--muted));
  font-size:18px;
  cursor:pointer;
}
.guest-sync-dismiss:hover{
  background:var(--theme-hover,rgba(255,255,255,.05));
  color:var(--theme-text,var(--text));
}

/* A signed-out visitor only sees TODAY metrics. Historical identity-based
   metrics become available after login. */
body[data-auth-state="guest"] .guest-historical-only{
  display:none!important;
}
body[data-auth-state="guest"] .guest-time-row>div:nth-child(n+2){
  display:none!important;
}
body[data-auth-state="guest"] .guest-time-row{
  grid-template-columns:minmax(0,1fr)!important;
}
body[data-auth-state="guest"] .tracking-hub-head::after{
  content:"Today on this device";
  margin-left:auto;
  color:var(--theme-muted,var(--muted));
  font-size:9px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
body[data-auth-state="guest"] .profile-share-actions .share-progress-btn{
  display:none!important;
}

body[data-theme="light"] .quick-theme-control{
  background:#fff;
}
body[data-theme="light"] #quickThemeSelect option{
  background:#fff;
  color:#211b14;
}

@media(max-width:820px){
  .quick-theme-control{flex:1;justify-content:center}
  #quickThemeSelect{min-width:0;width:100%}
}
@media(max-width:620px){
  .guest-sync-prompt{
    align-items:flex-start;
    flex-direction:column;
  }
  .guest-sync-prompt-actions{width:100%}
  .guest-sync-prompt-actions .soft-btn{flex:1}
}

body[data-auth-state="guest"] .profile-editor-card{
  display:none!important;
}


/* =========================================================
   V31 FINAL POLISH
   ========================================================= */

/* Exact three-zone desktop header:
   brand left / metrics geometrically centered / utilities right. */
.v5-topbar{
  grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr)!important;
  grid-template-areas:"brand stats utilities"!important;
  column-gap:22px!important;
}
.v5-topbar .brand{
  grid-area:brand;
  justify-self:start;
}
.v5-topbar .top-stats{
  grid-area:stats!important;
  justify-self:center!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(126px,1fr))!important;
  width:426px;
  gap:0!important;
}
.v5-topbar .top-stats .stat-pill{
  width:100%;
  min-width:0!important;
  justify-content:center!important;
  padding-left:12px!important;
  padding-right:12px!important;
}
.v5-topbar .site-utility-actions{
  grid-area:utilities!important;
  justify-self:end!important;
  grid-column:auto!important;
  grid-row:auto!important;
}

/* Premium custom theme button/popover — no native select chrome. */
.quick-theme-menu{
  position:relative;
  display:flex;
}
.quick-theme-button{
  min-width:116px;
}
.quick-theme-caret{
  margin-left:1px;
  color:var(--theme-muted,var(--muted));
  font-size:12px;
  transform:translateY(-1px);
}
.quick-theme-popover{
  position:absolute;
  top:calc(100% + 9px);
  right:0;
  z-index:120;
  width:188px;
  padding:7px;
  border:1px solid var(--theme-border,var(--line));
  border-radius:16px;
  background:color-mix(in srgb,var(--theme-panel) 97%,transparent);
  box-shadow:0 20px 52px rgba(0,0,0,.34);
  backdrop-filter:blur(18px);
}
.quick-theme-popover[hidden]{display:none!important}
.quick-theme-popover button{
  width:100%;
  min-height:42px;
  padding:0 10px;
  border:0;
  border-radius:11px;
  background:transparent!important;
  color:var(--theme-muted,var(--muted))!important;
  display:grid;
  grid-template-columns:18px 1fr 18px;
  align-items:center;
  gap:9px;
  text-align:left;
  font-size:11px;
  font-weight:800;
}
.quick-theme-popover button:hover{
  background:var(--theme-hover)!important;
  color:var(--theme-text)!important;
}
.quick-theme-popover button.active{
  background:var(--theme-soft)!important;
  color:var(--theme-text)!important;
}
.quick-theme-check{
  opacity:0;
  color:var(--theme-accent-strong,var(--gold-3));
  text-align:center;
}
.quick-theme-popover button.active .quick-theme-check{opacity:1}
.quick-theme-dot{
  width:13px;
  height:13px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.05);
}
.dot-kaaba{background:#0b0a08}
.dot-sunset{background:#6c3d26}
.dot-dark{background:#15171b}
.dot-light{background:#f3efe7;border-color:#d6d0c5}

/* Startup account prompt */
.guest-welcome-modal.open{display:grid}
.guest-welcome-card{
  width:min(510px,100%)!important;
  padding:29px!important;
  text-align:center;
}
.guest-welcome-mark{
  width:54px;
  height:54px;
  margin:0 auto 16px;
  display:grid;
  place-items:center;
  border-radius:17px;
  border:1px solid var(--theme-border);
  background:var(--theme-soft);
  color:var(--theme-accent-strong);
  font-size:21px;
}
.guest-welcome-copy h3{
  margin:7px 0 8px;
  color:var(--theme-text);
  font-size:25px;
  letter-spacing:-.025em;
}
.guest-welcome-copy p{
  max-width:420px;
  margin:0 auto;
  color:var(--theme-muted);
  font-size:11px;
  line-height:1.65;
}
.guest-welcome-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:22px;
}
.guest-welcome-primary{
  min-height:48px;
}
.guest-welcome-secondary{
  min-height:48px;
}
.guest-welcome-dismiss{
  grid-column:1/-1;
  justify-self:center;
  margin-top:4px;
}

/* Guests are completely untracked. No identity/history copy in Profile. */
body[data-auth-state="guest"] .profile-identity-copy>.eyebrow,
body[data-auth-state="guest"] .profile-handle,
body[data-auth-state="guest"] .profile-bio-display,
body[data-auth-state="guest"] #profileJoined{
  display:none!important;
}
body[data-auth-state="guest"] .profile-identity-copy h1{
  margin:0!important;
}
body[data-auth-state="guest"] .profile-editor-card{
  display:none!important;
}
body[data-auth-state="guest"] .share-progress-btn{
  display:none!important;
}

/* Remove V30's obsolete inline guest banner completely if cached markup survives. */
.guest-sync-prompt{display:none!important}

/* Logged-out header metrics remain visually present, but are always 0 / 0 / 00:00:00. */
body[data-auth-state="guest"] .top-stats{
  opacity:.78;
}

/* Responsive header keeps stats centered as a group. */
@media(max-width:1180px){
  .v5-topbar{
    grid-template-columns:1fr auto!important;
    grid-template-areas:
      "brand utilities"
      "stats stats"!important;
  }
  .v5-topbar .top-stats{
    width:426px;
    margin:0 auto;
  }
}
@media(max-width:820px){
  .v5-topbar{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "brand"
      "stats"
      "utilities"!important;
  }
  .v5-topbar .brand{justify-self:center}
  .v5-topbar .site-utility-actions{
    justify-self:center!important;
    width:auto!important;
    flex-wrap:wrap;
  }
  .v5-topbar .top-stats{
    width:min(100%,426px);
    overflow:visible!important;
    justify-self:center!important;
  }
}
@media(max-width:520px){
  .v5-topbar .top-stats{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    width:100%;
  }
  .v5-topbar .top-stats .stat-pill{
    gap:6px;
    padding:6px 4px!important;
  }
  .v5-topbar .top-stats .stat-stack strong{font-size:11px}
  .v5-topbar .top-stats .stat-stack span{font-size:8px}
  .gold-heart3d{transform:rotate(-45deg) scale(.78)}
  .guest-welcome-actions{grid-template-columns:1fr}
  .guest-welcome-dismiss{grid-column:auto}
}


/* V32 account identity fields */
.oq32-signup-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.oq32-username-wrap{
  display:flex;
  align-items:center;
  min-height:47px;
  padding-left:12px;
  border:1px solid var(--theme-border,var(--line));
  border-radius:12px;
  background:var(--theme-input,#0d0c0a);
  color:var(--theme-muted,var(--muted));
}
.oq32-username-wrap input{
  flex:1;
  min-width:0;
  min-height:45px;
  padding:0 12px 0 5px;
  border:0!important;
  background:transparent!important;
  color:var(--theme-input-text,var(--text));
  font:inherit;
  outline:0;
}
.oq32-username-wrap:focus-within{
  border-color:var(--theme-accent,var(--gold));
}
@media(max-width:620px){
  .oq32-signup-grid{grid-template-columns:1fr}
}


/* =========================================================
   V33 — SESSION-ONLY GUEST TRACKING + AUTH FIELD POLISH
   ========================================================= */

/* Auth fields: neutral at rest, one deliberate focus ring while typing. */
.oq25-auth-field input{
  border-color:rgba(255,255,255,.105)!important;
  background:rgba(255,255,255,.018)!important;
  box-shadow:none!important;
  outline:none!important;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.oq25-auth-field input:hover{
  border-color:rgba(255,255,255,.17)!important;
}
.oq25-auth-field input:focus,
.oq25-auth-field input:focus-visible{
  border-color:var(--theme-accent,var(--gold))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent,var(--gold)) 14%,transparent)!important;
  background:rgba(255,255,255,.026)!important;
}
.oq32-username-wrap{
  border-color:rgba(255,255,255,.105)!important;
  background:rgba(255,255,255,.018)!important;
  box-shadow:none!important;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.oq32-username-wrap:hover{
  border-color:rgba(255,255,255,.17)!important;
}
.oq32-username-wrap:focus-within{
  border-color:var(--theme-accent,var(--gold))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent,var(--gold)) 14%,transparent)!important;
  background:rgba(255,255,255,.026)!important;
}
.oq32-username-wrap input,
.oq32-username-wrap input:hover,
.oq32-username-wrap input:focus,
.oq32-username-wrap input:focus-visible{
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  outline:none!important;
}
body[data-theme="light"] .oq25-auth-field input,
body[data-theme="light"] .oq32-username-wrap{
  border-color:rgba(45,36,24,.15)!important;
  background:rgba(45,36,24,.018)!important;
}
body[data-theme="light"] .oq25-auth-field input:hover,
body[data-theme="light"] .oq32-username-wrap:hover{
  border-color:rgba(45,36,24,.24)!important;
}
body[data-theme="light"] .oq25-auth-field input:focus,
body[data-theme="light"] .oq25-auth-field input:focus-visible,
body[data-theme="light"] .oq32-username-wrap:focus-within{
  background:#fff!important;
}
.oq25-auth-field input:-webkit-autofill,
.oq25-auth-field input:-webkit-autofill:hover,
.oq25-auth-field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--theme-input-text,var(--text));
  caret-color:var(--theme-input-text,var(--text));
  transition:background-color 9999s ease-out 0s;
}

/* Always-visible logged-out status bubble. */
.guest-unsaved-bubble{
  position:fixed;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  z-index:84;
  min-width:128px;
  padding:10px 11px;
  border:1px solid var(--theme-border,var(--line));
  border-radius:16px;
  background:color-mix(in srgb,var(--theme-panel,var(--panel)) 94%,transparent);
  color:var(--theme-text,var(--text));
  box-shadow:0 14px 34px rgba(0,0,0,.25);
  backdrop-filter:blur(16px);
  display:grid;
  grid-template-columns:8px 1fr 14px;
  align-items:center;
  gap:8px;
  text-align:left;
  cursor:pointer;
}
.guest-unsaved-bubble[hidden]{display:none!important}
.guest-unsaved-bubble:hover{
  border-color:var(--theme-accent,var(--gold));
  background:color-mix(in srgb,var(--theme-panel,var(--panel)) 88%,var(--theme-accent,var(--gold)) 12%);
}
.guest-unsaved-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#d68a78;
  box-shadow:0 0 0 4px rgba(214,138,120,.10);
}
.guest-unsaved-copy{
  display:grid;
  gap:1px;
}
.guest-unsaved-copy strong{
  font-size:10px;
  line-height:1.2;
  letter-spacing:.02em;
}
.guest-unsaved-copy small{
  color:var(--theme-muted,var(--muted));
  font-size:8px;
  line-height:1.2;
  font-weight:700;
}
.guest-unsaved-arrow{
  color:var(--theme-accent-strong,var(--gold-3));
  font-size:12px;
  font-weight:900;
}

body[data-auth-state="guest"] .top-stats{
  opacity:1!important;
}

/* Signup remains balanced after removing the redundant Display name field. */
.oq32-signup-grid{
  grid-template-columns:1fr 1fr!important;
}
.oq32-signup-grid .oq25-auth-field small{
  color:var(--theme-muted,var(--muted));
  font-size:9px;
  line-height:1.4;
}

/* Guest metrics shown elsewhere are live-session values only. */
body[data-auth-state="guest"] .tracking-hub-head::after{
  content:"Session only • not saving"!important;
}

@media(max-width:820px){
  .guest-unsaved-bubble{
    top:auto;
    right:12px;
    bottom:82px;
    transform:none;
    min-width:122px;
  }
}
@media(max-width:620px){
  .oq32-signup-grid{grid-template-columns:1fr!important}
}


/* =========================================================
   V34 — AUTH INPUT BORDER FIX
   Username is now a single input, so no nested/double outline.
   ========================================================= */

.oq32-username-wrap{
  display:contents!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
}

/* All auth inputs share the exact same single-border geometry. */
.oq25-auth-field > input,
.oq34-username-input{
  box-sizing:border-box!important;
  width:100%!important;
  min-height:56px!important;
  padding:0 14px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:15px!important;
  background:rgba(4,4,3,.35)!important;
  color:var(--theme-input-text,var(--text))!important;
  outline:none!important;
  box-shadow:none!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}

/* No permanent gold glow. */
.oq25-auth-field > input:not(:focus),
.oq34-username-input:not(:focus){
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:none!important;
}

/* Exactly ONE focus border + subtle halo. */
.oq25-auth-field > input:focus,
.oq25-auth-field > input:focus-visible,
.oq34-username-input:focus,
.oq34-username-input:focus-visible{
  outline:none!important;
  border:1px solid var(--theme-accent,var(--gold))!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--theme-accent,var(--gold)) 12%,transparent)!important;
}

/* Prevent browser validation/autofill outlines from creating a second ring. */
.oq25-auth-field > input:invalid:not(:focus),
.oq34-username-input:invalid:not(:focus),
.oq25-auth-field > input:user-invalid,
.oq34-username-input:user-invalid{
  box-shadow:none!important;
}
.oq25-auth-field > input:-webkit-autofill,
.oq25-auth-field > input:-webkit-autofill:hover,
.oq25-auth-field > input:-webkit-autofill:focus,
.oq34-username-input:-webkit-autofill,
.oq34-username-input:-webkit-autofill:hover,
.oq34-username-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--theme-input-text,var(--text))!important;
  caret-color:var(--theme-input-text,var(--text))!important;
  border-radius:15px!important;
  box-shadow:0 0 0 1000px rgba(4,4,3,.35) inset!important;
}

/* Light theme equivalent. */
body[data-theme="light"] .oq25-auth-field > input,
body[data-theme="light"] .oq34-username-input{
  border-color:rgba(45,36,24,.16)!important;
  background:rgba(255,255,255,.78)!important;
}
body[data-theme="light"] .oq25-auth-field > input:focus,
body[data-theme="light"] .oq25-auth-field > input:focus-visible,
body[data-theme="light"] .oq34-username-input:focus,
body[data-theme="light"] .oq34-username-input:focus-visible{
  border-color:var(--theme-accent,var(--gold))!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--theme-accent,var(--gold)) 12%,transparent)!important;
  background:#fff!important;
}


/* =========================================================
   V35 — PROFILE / ACCOUNT SECURITY POLISH
   ========================================================= */

/* Profile hero + account card use the same horizontal rhythm. */
.profile-view .profile-hero{
  min-height:118px;
  padding:22px 24px!important;
}
.profile-view .profile-identity{
  min-width:0;
}
.profile-view .profile-share-actions{
  flex:0 0 220px;
  justify-content:flex-end!important;
}
.profile-view .profile-share-actions .share-site-btn{
  width:220px;
  min-height:48px!important;
  justify-content:center;
}
.profile-view .oq25-account-card{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center!important;
  gap:24px;
  min-height:92px;
  padding:18px 20px!important;
}
.profile-view .oq25-account-copy{
  align-content:center;
  max-width:600px;
}
.profile-view .oq25-account-actions{
  display:grid!important;
  grid-auto-flow:column;
  grid-auto-columns:max-content;
  align-items:center;
  justify-content:end;
  gap:10px!important;
}
.profile-view .oq25-sync-status,
.profile-view .oq25-account-actions button{
  min-height:44px!important;
}
.profile-view .oq25-sync-status{
  min-width:104px;
  justify-content:center;
  padding:0 13px;
}
.profile-view .oq35-account-main-btn{
  width:220px;
  justify-content:space-between;
}
.profile-view .oq35-security-btn{
  width:152px;
}
.profile-view .oq35-signout-btn{
  width:92px;
}
.profile-view .tab-reader-cta{
  margin-top:24px!important;
  padding-top:8px;
}
.profile-view .tab-continue-reading{
  width:320px;
  min-height:56px;
  border-radius:16px;
}

/* Signed-out profile keeps a calm, deliberate hierarchy. */
body[data-auth-state="guest"] .profile-view .oq25-account-card{
  grid-template-columns:minmax(0,1fr) 334px;
}
body[data-auth-state="guest"] .profile-view .oq25-account-actions{
  grid-template-columns:104px 220px;
  grid-auto-flow:initial;
}
body[data-auth-state="guest"] .profile-view .oq25-account-actions .oq25-sync-status{
  width:104px;
}
body[data-auth-state="guest"] .profile-view .oq35-account-main-btn{
  width:220px;
}

/* Security form spacing is intentionally even and predictable. */
.oq35-password-submit{
  margin-top:2px;
}
.oq35-forgot-current{
  justify-self:center!important;
  margin-top:-2px!important;
}
#oq35ChangePasswordPanel .oq25-auth-heading{
  margin-top:4px;
}
#oq35ChangePasswordPanel .oq25-auth-form{
  gap:14px;
}

/* Keep all auth primary actions the same geometry. */
.oq25-auth-form > .feedback-submit-btn{
  width:100%;
  min-height:52px;
  border-radius:15px!important;
}

/* Avoid awkward button widths at medium/small sizes. */
@media(max-width:900px){
  .profile-view .oq25-account-card{
    grid-template-columns:1fr!important;
    align-items:stretch!important;
  }
  .profile-view .oq25-account-actions{
    width:100%;
    grid-auto-flow:column;
    justify-content:start;
  }
  body[data-auth-state="guest"] .profile-view .oq25-account-actions{
    grid-template-columns:104px minmax(220px,1fr);
  }
  body[data-auth-state="guest"] .profile-view .oq35-account-main-btn{
    width:100%;
  }
}
@media(max-width:760px){
  .profile-view .profile-share-actions{
    flex:1 1 auto;
    width:100%;
  }
  .profile-view .profile-share-actions .share-site-btn{
    width:100%;
  }
  .profile-view .oq25-account-actions,
  body[data-auth-state="guest"] .profile-view .oq25-account-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-auto-flow:row!important;
  }
  .profile-view .oq25-sync-status,
  .profile-view .oq25-account-actions button,
  .profile-view .oq35-account-main-btn,
  .profile-view .oq35-security-btn,
  .profile-view .oq35-signout-btn,
  body[data-auth-state="guest"] .profile-view .oq35-account-main-btn{
    width:100%!important;
    min-width:0!important;
  }
  .profile-view .tab-continue-reading{
    width:100%;
  }
}


/* =========================================================
   V36 — AUTH GRID ALIGNMENT + LEFT "NOT SAVING" STATUS
   ========================================================= */

/* Name and Username use identical three-row geometry:
   label / input / note. This removes the baseline mismatch. */
.oq36-identity-grid{
  align-items:start!important;
}
.oq36-paired-field{
  display:grid!important;
  grid-template-rows:18px 56px 18px!important;
  gap:7px!important;
  align-content:start!important;
}
.oq36-paired-field > span{
  align-self:end;
  line-height:1!important;
}
.oq36-paired-field > input{
  height:56px!important;
  min-height:56px!important;
  margin:0!important;
  align-self:start!important;
}
.oq36-paired-field > small{
  min-height:18px!important;
  margin:0!important;
  display:flex;
  align-items:flex-start;
  line-height:1.35!important;
}
.oq36-field-spacer{
  visibility:hidden!important;
  user-select:none!important;
}

/* Larger, unmistakable guest status on the LEFT side.
   Keeping it away from Settings controls and scrollbars. */
.guest-unsaved-bubble{
  left:18px!important;
  right:auto!important;
  top:50%!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  z-index:92!important;
  min-width:188px!important;
  padding:14px 15px!important;
  border-radius:18px!important;
  grid-template-columns:10px 1fr 18px!important;
  gap:11px!important;
  box-shadow:0 18px 46px rgba(0,0,0,.30)!important;
}
.guest-unsaved-dot{
  width:9px!important;
  height:9px!important;
  box-shadow:0 0 0 5px rgba(214,138,120,.11)!important;
}
.guest-unsaved-copy{
  gap:3px!important;
}
.guest-unsaved-copy strong{
  font-size:13px!important;
  line-height:1.15!important;
  letter-spacing:.01em!important;
}
.guest-unsaved-copy small{
  font-size:10px!important;
  line-height:1.2!important;
}
.guest-unsaved-arrow{
  font-size:15px!important;
}
.guest-unsaved-bubble:hover{
  transform:translateY(-50%) translateX(2px)!important;
}

/* The bubble must remain readable over every app surface. */
body[data-theme="light"] .guest-unsaved-bubble{
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 18px 46px rgba(53,42,28,.16)!important;
}

/* Prevent the fixed badge from covering narrow app content. */
@media(max-width:1180px){
  .guest-unsaved-bubble{
    left:12px!important;
    min-width:172px!important;
  }
}
@media(max-width:860px){
  .guest-unsaved-bubble{
    left:12px!important;
    top:auto!important;
    bottom:84px!important;
    transform:none!important;
    min-width:164px!important;
    padding:12px 13px!important;
  }
  .guest-unsaved-bubble:hover{
    transform:translateY(-2px)!important;
  }
}
@media(max-width:620px){
  .oq36-paired-field{
    grid-template-rows:18px 56px auto!important;
  }
  .oq36-field-spacer{
    display:none!important;
  }
  .guest-unsaved-bubble{
    min-width:152px!important;
  }
}

/* Account/auth controls stay mathematically consistent. */
.oq25-auth-tab,
.oq25-auth-form > .feedback-submit-btn,
.oq35-account-main-btn,
.oq35-security-btn,
.oq35-signout-btn{
  box-sizing:border-box!important;
}


/* =========================================================
   V37 — PROFILE FLOW + CLEAN SECURITY LAYOUT
   ========================================================= */

/* Logged-in flow becomes:
   hero -> edit profile -> security -> continue reading.
   The cloud-sync strip is guest-only. */
#oq25AccountCard[hidden],
#oq37SecurityCard[hidden]{
  display:none!important;
}

body[data-auth-state="signed-in"] .profile-view .profile-editor-card{
  margin-top:14px!important;
}

body[data-auth-state="signed-in"] .profile-view .tab-reader-cta{
  margin-top:22px!important;
}

/* ---------------------------------------------------------
   Startup account recommendation: shorter, calmer, equal.
   --------------------------------------------------------- */
.guest-welcome-card{
  width:min(470px,calc(100vw - 32px))!important;
  padding:28px!important;
  border-radius:24px!important;
}
.guest-welcome-mark{
  width:46px!important;
  height:46px!important;
  margin-bottom:13px!important;
  border-radius:14px!important;
  font-size:17px!important;
}
.guest-welcome-copy h3{
  margin:5px 0 6px!important;
  font-size:27px!important;
  line-height:1.08!important;
}
.guest-welcome-copy p{
  max-width:340px!important;
  font-size:11px!important;
  line-height:1.5!important;
}
.guest-welcome-actions{
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  margin-top:20px!important;
}
.guest-welcome-choice{
  min-height:50px;
  padding:0 16px;
  border:1px solid var(--theme-border,var(--line));
  border-radius:14px;
  background:var(--theme-panel-2,var(--panel-2));
  color:var(--theme-text,var(--text));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font:inherit;
  font-size:11px;
  font-weight:850;
  cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.guest-welcome-choice:hover{
  transform:translateY(-1px);
  border-color:var(--theme-accent,var(--gold));
}
.guest-welcome-choice.primary{
  border-color:transparent;
  background:var(--theme-accent,var(--gold));
  color:var(--theme-on-accent,#17130d);
}
.guest-welcome-dismiss{
  grid-column:1/-1;
  justify-self:center;
  min-height:32px;
  padding:0 12px;
  border:0;
  background:transparent;
  color:var(--theme-muted,var(--muted));
  font:inherit;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}
.guest-welcome-dismiss:hover{
  color:var(--theme-text,var(--text));
}

/* ---------------------------------------------------------
   Signed-in account security.
   --------------------------------------------------------- */
.oq37-security-card{
  margin-top:14px;
  padding:22px!important;
  display:grid;
  gap:18px;
}
.oq37-security-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
}
.oq37-security-head h2{
  margin:4px 0 0;
  color:var(--theme-text,var(--text));
  font-size:18px;
  line-height:1.15;
  letter-spacing:-.02em;
}
.oq37-security-email{
  max-width:44%;
  color:var(--theme-muted,var(--muted));
  font-size:9px;
  font-weight:750;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.oq37-security-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  align-items:stretch;
}
.oq37-security-panel{
  min-width:0;
  padding:17px;
  border:1px solid var(--theme-border-soft,var(--line));
  border-radius:17px;
  background:var(--theme-panel-2,var(--panel-2));
  display:grid;
  grid-template-rows:auto auto auto auto minmax(24px,auto) 48px;
  gap:11px;
}
.oq37-panel-title{
  display:grid;
  gap:3px;
  min-height:42px;
}
.oq37-panel-title strong{
  color:var(--theme-text,var(--text));
  font-size:13px;
  line-height:1.2;
}
.oq37-panel-title span{
  color:var(--theme-muted,var(--muted));
  font-size:9px;
  line-height:1.4;
}

.oq37-security-field{
  display:grid;
  gap:6px;
}
.oq37-security-field > span{
  color:var(--theme-muted,var(--muted));
  font-size:9px;
  line-height:1;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.oq37-security-field input{
  box-sizing:border-box;
  width:100%;
  min-height:46px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.105);
  border-radius:12px;
  outline:0;
  box-shadow:none;
  background:rgba(255,255,255,.018);
  color:var(--theme-text,var(--text));
  font:inherit;
  font-size:11px;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.oq37-security-field input:focus{
  border-color:var(--theme-accent,var(--gold));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--theme-accent,var(--gold)) 12%,transparent);
  background:rgba(255,255,255,.026);
}
.oq37-recovery-space{
  min-height:57px;
}
.oq37-security-action{
  min-height:48px;
  padding:0 15px;
  border:1px solid var(--theme-border,var(--line));
  border-radius:13px;
  background:transparent;
  color:var(--theme-text,var(--text));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font:inherit;
  font-size:10px;
  font-weight:850;
  cursor:pointer;
}
.oq37-security-action:hover{
  border-color:var(--theme-accent,var(--gold));
  background:var(--theme-hover,rgba(255,255,255,.04));
}
.oq37-security-action.primary{
  border-color:transparent;
  background:var(--theme-accent,var(--gold));
  color:var(--theme-on-accent,#17130d);
}

.oq37-signout-row{
  padding-top:15px;
  border-top:1px solid var(--theme-border-soft,var(--line));
}
.oq37-signout-btn{
  width:100%;
  min-height:46px;
  border:1px solid var(--theme-border,var(--line));
  border-radius:13px;
  background:transparent;
  color:var(--theme-muted,var(--muted));
  font:inherit;
  font-size:10px;
  font-weight:850;
  cursor:pointer;
}
.oq37-signout-btn:hover{
  border-color:rgba(214,138,120,.58);
  background:rgba(214,138,120,.07);
  color:var(--theme-text,var(--text));
}

body[data-theme="light"] .oq37-security-field input{
  border-color:rgba(45,36,24,.14);
  background:rgba(45,36,24,.018);
}
body[data-theme="light"] .oq37-security-field input:focus{
  background:#fff;
}

@media(max-width:820px){
  .oq37-security-grid{
    grid-template-columns:1fr;
  }
  .oq37-recovery-space{
    display:none;
  }
  .oq37-security-panel{
    grid-template-rows:auto;
  }
}
@media(max-width:560px){
  .guest-welcome-actions{
    grid-template-columns:1fr!important;
  }
  .guest-welcome-dismiss{
    grid-column:auto;
  }
  .oq37-security-head{
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }
  .oq37-security-email{
    max-width:100%;
  }
}


/* =========================================================
   V38 — SECURITY IS PROFILE-ONLY + FULL-WIDTH STACK
   ========================================================= */

/* Security section is full width directly below the profile editor. */
.profile-view .oq37-security-card{
  width:100%;
  margin-top:14px!important;
  padding:22px!important;
  box-sizing:border-box;
}

.oq38-security-stack{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.oq37-security-panel{
  width:100%;
  box-sizing:border-box;
}

/* Longer password fields: three equal full-row columns. */
.oq38-change-panel{
  display:grid!important;
  grid-template-rows:auto auto auto auto!important;
  gap:14px!important;
}
.oq38-password-fields{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.oq38-password-fields .oq37-security-field input{
  min-height:52px!important;
}

/* Password action is substantial but does not span absurdly wide. */
.oq38-update-password-btn{
  width:min(280px,100%);
  min-height:50px!important;
  justify-self:end;
}

/* Forgot password lives UNDER change-password, not beside it. */
.oq38-recovery-panel{
  display:grid!important;
  grid-template-rows:auto auto auto!important;
  gap:12px!important;
}
.oq38-recovery-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 190px;
  gap:12px;
  align-items:end;
}
.oq38-recovery-row .oq37-security-field input{
  min-height:52px!important;
}
.oq38-reset-link-btn{
  width:100%;
  min-height:52px!important;
}

/* Sign out remains the very last action. */
.oq37-signout-row{
  margin-top:2px;
}
.oq37-signout-btn{
  min-height:50px!important;
}

/* =========================================================
   ALWAYS-VISIBLE LEFT SYNC STATUS
   ========================================================= */
.guest-unsaved-bubble{
  display:grid!important;
}
.guest-unsaved-bubble[data-state="synced"]{
  border-color:color-mix(in srgb,#69b889 42%,var(--theme-border,var(--line)))!important;
}
.guest-unsaved-bubble[data-state="synced"] .guest-unsaved-dot{
  background:#69b889!important;
  box-shadow:0 0 0 5px rgba(105,184,137,.12)!important;
}
.guest-unsaved-bubble[data-state="syncing"] .guest-unsaved-dot{
  background:var(--theme-accent-strong,var(--gold-3))!important;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--theme-accent,var(--gold)) 13%,transparent)!important;
}
.guest-unsaved-bubble[data-state="error"] .guest-unsaved-dot{
  background:#d68a78!important;
}
.guest-unsaved-bubble[data-state="guest"] .guest-unsaved-dot{
  background:#d68a78!important;
}

/* No security card can appear in Home even if stale markup ever survives. */
.dashboard-view .oq37-security-card{
  display:none!important;
}

@media(max-width:960px){
  .oq38-password-fields{
    grid-template-columns:1fr;
  }
  .oq38-update-password-btn{
    width:100%;
  }
  .oq38-recovery-row{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   V39 — ACCOUNT SECURITY SCALE + RECOVERY POLISH
   ========================================================= */

.profile-view .oq37-security-card{
  padding:30px 32px 28px!important;
  border-radius:22px!important;
  gap:24px!important;
}

.oq37-security-head{
  align-items:flex-start!important;
}
.oq37-security-head .eyebrow{
  font-size:10px!important;
  letter-spacing:.11em!important;
}
.oq37-security-head h2{
  margin:7px 0 6px!important;
  font-size:27px!important;
  line-height:1.05!important;
  letter-spacing:-.035em!important;
}
.oq37-security-head p{
  margin:0;
  color:var(--theme-muted,var(--muted));
  font-size:12px;
  line-height:1.55;
}
.oq37-security-email{
  display:none!important;
}

.oq38-security-stack{
  gap:18px!important;
}

.oq37-security-panel{
  padding:24px 26px!important;
  border-radius:19px!important;
  background:color-mix(in srgb,var(--theme-panel-2,var(--panel-2)) 92%,transparent)!important;
}

.oq37-panel-title{
  min-height:0!important;
  gap:6px!important;
  margin-bottom:3px;
}
.oq37-panel-title strong{
  font-size:18px!important;
  line-height:1.15!important;
  letter-spacing:-.015em!important;
}
.oq37-panel-title span{
  font-size:11px!important;
  line-height:1.5!important;
}

.oq38-change-panel{
  gap:18px!important;
}

.oq38-password-fields{
  gap:16px!important;
}

.oq37-security-field{
  gap:9px!important;
}
.oq37-security-field > span{
  font-size:10px!important;
  letter-spacing:.065em!important;
}
.oq37-security-field input{
  min-height:58px!important;
  padding:0 17px!important;
  border-radius:14px!important;
  font-size:13px!important;
  font-weight:650!important;
}

.oq38-update-password-btn{
  width:min(330px,100%)!important;
  min-height:56px!important;
  padding:0 20px!important;
  border-radius:14px!important;
  font-size:12px!important;
}

.oq38-recovery-panel{
  gap:17px!important;
}
.oq38-recovery-row{
  grid-template-columns:minmax(0,1fr) 230px!important;
  gap:16px!important;
}
.oq38-reset-link-btn{
  min-height:58px!important;
  padding:0 18px!important;
  border-radius:14px!important;
  font-size:12px!important;
}

.oq25-auth-status{
  min-height:20px;
  font-size:10px!important;
  line-height:1.4!important;
}

.oq37-signout-row{
  padding-top:20px!important;
  margin-top:0!important;
}
.oq37-signout-btn{
  min-height:56px!important;
  border-radius:14px!important;
  font-size:12px!important;
  letter-spacing:.01em;
}

/* Recovery modal gets the same substantial scale as signup/login. */
#oq25RecoveryPanel .oq25-auth-heading strong{
  font-size:22px!important;
}
#oq25RecoveryPanel .oq25-auth-heading p{
  font-size:11px!important;
  line-height:1.55!important;
}
#oq25RecoveryPanel .oq25-auth-field input{
  min-height:56px!important;
}

/* Let the card breathe on desktop instead of looking like a tiny widget. */
@media(min-width:961px){
  .profile-view .oq37-security-card{
    min-height:500px;
  }
}
@media(max-width:960px){
  .profile-view .oq37-security-card{
    padding:24px!important;
  }
  .oq38-recovery-row{
    grid-template-columns:1fr!important;
  }
  .oq38-reset-link-btn,
  .oq38-update-password-btn{
    width:100%!important;
  }
}


/* =========================================================
   V40 — FIREBASE AUTH
   ========================================================= */
.oq40-auth-divider{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  color:var(--theme-muted,var(--muted));
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.oq40-auth-divider::before,.oq40-auth-divider::after{
  content:"";
  height:1px;
  background:var(--theme-border-soft,var(--line));
}
.oq40-google-btn{
  width:100%;
  min-height:52px;
  padding:0 16px;
  border:1px solid var(--theme-border,var(--line));
  border-radius:15px;
  background:var(--theme-panel-2,var(--panel-2));
  color:var(--theme-text,var(--text));
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  font:inherit;
  font-size:11px;
  font-weight:850;
  cursor:pointer;
  transition:border-color .15s ease,transform .15s ease,background .15s ease;
}
.oq40-google-btn:hover{
  transform:translateY(-1px);
  border-color:var(--theme-accent,var(--gold));
  background:var(--theme-hover,rgba(255,255,255,.04));
}
.oq40-google-mark{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:#4285f4;
  font-family:Arial,sans-serif;
  font-size:13px;
  font-weight:900;
}
.oq37-security-panel[hidden]{display:none!important}


/* =========================================================
   V41 — FIREBASE ACCOUNT SHELL + CLEAN GUEST PROFILE
   ========================================================= */

/* Logged-out Profile is not a fake local account. Keep the hero calm and
   intentionally sparse until a real Firebase user exists. */
body[data-auth-state="guest"] .profile-hero{
  min-height:112px!important;
  padding:22px 24px!important;
}
body[data-auth-state="guest"] .profile-identity{
  align-items:center!important;
  gap:16px!important;
}
body[data-auth-state="guest"] .profile-identity-copy{
  display:flex!important;
  align-items:center!important;
  min-height:64px;
}
body[data-auth-state="guest"] .profile-identity-copy>.eyebrow,
body[data-auth-state="guest"] .profile-handle,
body[data-auth-state="guest"] .profile-bio-display,
body[data-auth-state="guest"] #profileJoined{
  display:none!important;
}
body[data-auth-state="guest"] .profile-identity-copy h1{
  margin:0!important;
  font-size:30px!important;
  line-height:1!important;
  letter-spacing:-.035em!important;
}
body[data-auth-state="guest"] .profile-editor-card,
body[data-auth-state="guest"] .oq37-security-card,
body[data-auth-state="guest"] .share-progress-btn{
  display:none!important;
}

/* Guest account card is the only account-related block beneath the hero. */
body[data-auth-state="guest"] .profile-view .oq25-account-card{
  margin-top:14px!important;
  min-height:104px!important;
  padding:20px 22px!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  border-radius:18px!important;
}
body[data-auth-state="guest"] .profile-view .oq25-account-copy{
  display:grid;
  gap:5px;
}
body[data-auth-state="guest"] .profile-view .oq25-account-copy>strong{
  font-size:16px!important;
  line-height:1.25!important;
  letter-spacing:-.015em;
}
body[data-auth-state="guest"] .profile-view .oq25-account-actions{
  display:grid!important;
  grid-template-columns:112px 230px!important;
  gap:10px!important;
  align-items:center;
}
body[data-auth-state="guest"] .profile-view .oq25-sync-status,
body[data-auth-state="guest"] .profile-view .oq35-account-main-btn{
  min-height:48px!important;
}
body[data-auth-state="guest"] .profile-view .oq25-sync-status{
  width:112px!important;
  min-width:112px!important;
  justify-content:center!important;
}
body[data-auth-state="guest"] .profile-view .oq35-account-main-btn{
  width:230px!important;
}

/* Left account status is always obvious. */
.guest-unsaved-bubble{
  min-width:194px!important;
}
.guest-unsaved-bubble[data-state="guest"] .guest-unsaved-copy strong{
  font-size:13px!important;
}
.guest-unsaved-bubble[data-state="guest"] .guest-unsaved-copy small{
  font-size:10px!important;
}

/* Keep the Share OurQuran icon breathing instead of looking squeezed. */
.profile-share-actions .share-site-btn{
  gap:11px!important;
}
.profile-share-actions .share-btn-icon{
  flex:0 0 34px!important;
  width:34px!important;
  height:34px!important;
}
.profile-share-actions .share-btn-icon svg{
  width:17px!important;
  height:17px!important;
}

/* Firebase auth shell should look like a real provider-backed account UI. */
.oq40-google-btn{
  min-height:56px!important;
  border-radius:14px!important;
  font-size:12px!important;
}
.oq40-google-mark{
  width:26px!important;
  height:26px!important;
}

@media(max-width:760px){
  body[data-auth-state="guest"] .profile-view .oq25-account-card{
    grid-template-columns:1fr!important;
  }
  body[data-auth-state="guest"] .profile-view .oq25-account-actions{
    grid-template-columns:1fr!important;
  }
  body[data-auth-state="guest"] .profile-view .oq25-sync-status,
  body[data-auth-state="guest"] .profile-view .oq35-account-main-btn{
    width:100%!important;
    min-width:0!important;
  }
}


/* =========================================================
   V42 — PROFILE SAVE + CALM SYNC + COMPACT PROFILE FOOTER
   ========================================================= */

/* Keep the left sync badge stable. Routine autosaves no longer change its
   geometry/text state, and hover does not nudge the badge sideways. */
.guest-unsaved-bubble,
.guest-unsaved-bubble:hover{
  transform:translateY(-50%)!important;
}
@media(max-width:860px){
  .guest-unsaved-bubble,
  .guest-unsaved-bubble:hover{
    transform:none!important;
  }
}

/* The profile footer is now a deliberate compact stack rather than a large
   empty tail. */
.profile-view .oq37-security-card{
  min-height:0!important;
}
.profile-saved-progress{
  width:min(760px,100%);
  margin:18px auto 0;
  padding:18px 20px;
  border:1px solid var(--theme-border,var(--line));
  border-radius:18px;
  background:var(--theme-panel,var(--panel));
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  box-sizing:border-box;
}
.profile-saved-progress-copy{
  min-width:0;
}
.profile-saved-progress-copy strong{
  display:block;
  font-size:13px;
  line-height:1.25;
}
.profile-saved-progress-copy p{
  margin:5px 0 0;
  color:var(--theme-muted,var(--muted));
  font-size:10px;
  line-height:1.55;
  max-width:560px;
}
.profile-reset-local-btn{
  width:auto!important;
  min-width:158px;
  min-height:44px;
  margin:0!important;
  white-space:nowrap;
}
.profile-view .tab-reader-cta{
  margin:16px auto 0!important;
  padding:0 0 6px!important;
  justify-content:center!important;
}
.profile-view .tab-continue-reading{
  width:min(320px,100%)!important;
  min-height:52px!important;
}
.profile-wrap{
  margin-bottom:28px!important;
}
@media(max-width:760px){
  .profile-saved-progress{
    grid-template-columns:1fr;
    text-align:center;
    padding:17px;
  }
  .profile-saved-progress-copy p{margin-left:auto;margin-right:auto;}
  .profile-reset-local-btn{width:100%!important;}
}

/* =========================================================
   V43 — GUEST PROFILE SPACING + TRUE CLOUD HYDRATION
   ========================================================= */

/* Desktop guest profile: use one clean rhythm across hero, account card,
   saved-progress card, and CTA. Nothing is squeezed into tiny columns. */
body[data-auth-state="guest"] .profile-wrap{
  width:min(1120px,calc(100% - 48px))!important;
}
body[data-auth-state="guest"] .profile-view .profile-hero,
body[data-auth-state="guest"] .profile-view .oq25-account-card,
body[data-auth-state="guest"] .profile-saved-progress{
  width:100%!important;
  box-sizing:border-box!important;
}
body[data-auth-state="guest"] .profile-view .oq25-account-card{
  min-height:132px!important;
  padding:24px 26px!important;
  grid-template-columns:minmax(0,1fr) minmax(280px,320px)!important;
  gap:34px!important;
  align-items:center!important;
}
body[data-auth-state="guest"] .profile-view .oq25-account-copy{
  gap:7px!important;
  max-width:620px!important;
}
body[data-auth-state="guest"] .profile-view .oq25-account-copy>strong{
  font-size:17px!important;
  line-height:1.3!important;
}
body[data-auth-state="guest"] .profile-view .oq25-account-actions{
  width:100%!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-auto-flow:row!important;
  gap:10px!important;
  justify-self:end!important;
}
body[data-auth-state="guest"] .profile-view .oq25-sync-status{
  width:100%!important;
  min-width:0!important;
  min-height:40px!important;
  justify-content:center!important;
  box-sizing:border-box!important;
}
body[data-auth-state="guest"] .profile-view .oq35-account-main-btn{
  width:100%!important;
  min-width:0!important;
  min-height:54px!important;
  padding:0 18px!important;
  border-radius:15px!important;
}

/* Saved-progress card aligns to the same outer edges instead of floating as a
   narrow island beneath the account card. */
body[data-auth-state="guest"] .profile-saved-progress{
  margin:16px 0 0!important;
  padding:21px 24px!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:28px!important;
}
body[data-auth-state="guest"] .profile-saved-progress-copy{
  max-width:690px;
}
body[data-auth-state="guest"] .profile-saved-progress-copy strong{
  font-size:14px!important;
}
body[data-auth-state="guest"] .profile-saved-progress-copy p{
  margin-top:6px!important;
  font-size:11px!important;
  line-height:1.55!important;
}
body[data-auth-state="guest"] .profile-reset-local-btn{
  min-width:190px!important;
  min-height:46px!important;
  border-radius:13px!important;
}
body[data-auth-state="guest"] .profile-view .tab-reader-cta{
  margin:16px auto 0!important;
  padding:0 0 8px!important;
}
body[data-auth-state="guest"] .profile-view .tab-continue-reading{
  width:min(340px,100%)!important;
  min-height:54px!important;
  border-radius:15px!important;
}

@media(max-width:900px){
  body[data-auth-state="guest"] .profile-wrap{
    width:min(760px,calc(100% - 28px))!important;
  }
  body[data-auth-state="guest"] .profile-view .oq25-account-card{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
  body[data-auth-state="guest"] .profile-view .oq25-account-actions{
    max-width:none!important;
  }
}
@media(max-width:620px){
  body[data-auth-state="guest"] .profile-wrap{
    width:calc(100% - 20px)!important;
  }
  body[data-auth-state="guest"] .profile-view .oq25-account-card,
  body[data-auth-state="guest"] .profile-saved-progress{
    padding:18px!important;
  }
  body[data-auth-state="guest"] .profile-saved-progress{
    grid-template-columns:1fr!important;
    gap:14px!important;
    text-align:left!important;
  }
  body[data-auth-state="guest"] .profile-reset-local-btn{
    width:100%!important;
  }
}

/* =========================================================
   V44 — PROFILE ACCOUNT ACTIONS + SECURITY ALIGNMENT
   ========================================================= */

/* Security is content-sized now; the old forced desktop height created the
   large empty slab visible on Google accounts. */
.profile-view .oq37-security-card{
  min-height:0!important;
}

/* Keep the security heading visually anchored and centered instead of hanging
   on the left while the rest of the card is empty. */
.profile-view .oq37-security-head{
  width:100%;
  justify-content:center!important;
  align-items:center!important;
  text-align:center!important;
}
.profile-view .oq37-security-head>div{
  width:min(680px,100%);
  margin:0 auto;
}
.profile-view .oq37-security-head .eyebrow,
.profile-view .oq37-security-head h2,
.profile-view .oq37-security-head p{
  text-align:center!important;
}
.profile-view .oq37-security-email{
  display:none!important;
}

/* Google accounts do not need an empty form container. */
.profile-view .oq37-security-card[data-account-kind="google"]{
  padding:28px 32px!important;
  gap:0!important;
}
.profile-view .oq37-security-card[data-account-kind="google"] .oq38-security-stack{
  display:none!important;
}

/* Signed in: the footer is deliberately only two equal account actions.
   Reset sits left, Sign out sits right; there is no explanatory filler text. */
body[data-auth-state="signed-in"] .profile-saved-progress{
  width:min(760px,100%)!important;
  margin:18px auto 0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  display:block!important;
}
body[data-auth-state="signed-in"] .profile-saved-progress-copy{
  display:none!important;
}
.profile-account-action-buttons{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
.profile-account-action-buttons .profile-reset-local-btn,
.profile-account-action-buttons .profile-signout-btn{
  width:100%!important;
  min-width:0!important;
  min-height:54px!important;
  margin:0!important;
  border-radius:15px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  font-size:12px!important;
  font-weight:850!important;
  box-sizing:border-box!important;
}
.profile-account-action-buttons .profile-signout-btn{
  color:var(--theme-text,var(--text))!important;
}

/* Guest view keeps the useful saved-progress explanation and shows only the
   local reset action; the hidden Sign out button does not reserve space. */
body[data-auth-state="guest"] .profile-account-action-buttons{
  display:block;
}
body[data-auth-state="guest"] .profile-signout-btn{
  display:none!important;
}

@media(max-width:620px){
  .profile-account-action-buttons{
    grid-template-columns:1fr;
  }
  .profile-view .oq37-security-card[data-account-kind="google"]{
    padding:24px 20px!important;
  }
}


/* =========================================================
   V45 — PROFILE BALANCE + BASMALAH/AUDIO READER STRUCTURE
   ========================================================= */

/* Profile: center the account-security block itself, not merely its text. */
.profile-view #oq37SecurityCard{
  width:min(980px,100%)!important;
  margin:22px auto 0!important;
  padding:30px 34px!important;
  display:grid!important;
  justify-items:center!important;
  text-align:center!important;
  box-sizing:border-box!important;
}
.profile-view #oq37SecurityCard[hidden]{display:none!important;}
.profile-view #oq37SecurityCard .oq37-security-head{
  width:100%!important;
  display:grid!important;
  place-items:center!important;
  justify-content:center!important;
  align-items:center!important;
  text-align:center!important;
  gap:8px!important;
}
.profile-view #oq37SecurityCard .oq37-security-head>div{
  width:100%!important;
  max-width:720px!important;
  margin:0 auto!important;
  display:grid!important;
  justify-items:center!important;
  text-align:center!important;
}
.profile-view #oq37SecurityCard .oq37-security-head .eyebrow,
.profile-view #oq37SecurityCard .oq37-security-head h2,
.profile-view #oq37SecurityCard .oq37-security-head p{
  width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}
.profile-view #oq37SecurityCard .oq37-security-head h2{margin-top:6px!important;}
.profile-view #oq37SecurityCard .oq37-security-head p{margin-top:8px!important;}
.profile-view #oq37SecurityCard[data-account-kind="google"] .oq38-security-stack{display:none!important;}

/* Account actions: no filler copy, just balanced controls. */
.profile-view .profile-actions-only{
  width:min(760px,100%)!important;
  margin:18px auto 0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.profile-view .profile-actions-only .profile-account-action-buttons{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
}
.profile-view .profile-actions-only .profile-reset-local-btn,
.profile-view .profile-actions-only .profile-signout-btn{
  min-height:58px!important;
  width:100%!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:16px!important;
  text-align:center!important;
}
body[data-auth-state="guest"] .profile-actions-only .profile-account-action-buttons{
  grid-template-columns:minmax(0,1fr)!important;
  max-width:380px!important;
  margin:0 auto!important;
}
body[data-auth-state="guest"] .profile-actions-only .profile-signout-btn{display:none!important;}

/* Reader: basmalah is visually separate from ayah 1 for every applicable surah. */
.mushaf-arabic-stack{
  min-width:0;
  display:grid;
  justify-items:center;
  align-items:center;
}
.reader-bismillah{
  width:100%;
  margin:2px auto 6px;
  padding:0 12px 14px;
  border-bottom:1px solid color-mix(in srgb,var(--theme-border,var(--line)) 72%,transparent);
  color:var(--theme-accent-strong,var(--gold-3));
  font-family:"Noto Naskh Arabic","Scheherazade New",Amiri,serif;
  font-size:clamp(25px,2.5vw,36px);
  line-height:1.8;
  font-weight:500;
  text-align:center;
  box-sizing:border-box;
}
.reader-bismillah[hidden]{display:none!important;}

@media(max-width:620px){
  .profile-view #oq37SecurityCard{padding:24px 20px!important;}
  .profile-view .profile-actions-only .profile-account-action-buttons{grid-template-columns:1fr!important;}
  .reader-bismillah{font-size:24px;}
}

/* =========================================================
   V46 — FINAL PROFILE ALIGNMENT / RED-MARKED CLEANUP
   ========================================================= */
.profile-view #profileJoined{display:none!important;}
.profile-view .profile-share-actions .share-progress-btn{display:none!important;}
.profile-view .profile-share-actions{align-items:center!important;justify-content:flex-end!important;}

/* Flattened markup + flex centering prevents inherited grid/flex rules from
   pulling the security copy to the left on wide screens. */
.profile-view #oq37SecurityCard{
  width:min(1120px,100%)!important;
  margin:18px auto 0!important;
  padding:30px 34px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
.profile-view #oq37SecurityCard[hidden]{display:none!important;}
.profile-view #oq37SecurityCard .oq37-security-head{
  width:min(760px,100%)!important;
  margin:0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  text-align:center!important;
}
.profile-view #oq37SecurityCard .oq37-security-head>.eyebrow,
.profile-view #oq37SecurityCard .oq37-security-head>h2,
.profile-view #oq37SecurityCard .oq37-security-head>p{
  width:auto!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
  align-self:center!important;
}
.profile-view #oq37SecurityCard .oq37-security-head>h2{margin-top:7px!important;margin-bottom:0!important;}
.profile-view #oq37SecurityCard .oq37-security-head>p{margin-top:9px!important;margin-bottom:0!important;}
.profile-view #oq37SecurityCard[data-account-kind="google"]{min-height:0!important;}
.profile-view #oq37SecurityCard[data-account-kind="google"] .oq38-security-stack{display:none!important;}

@media(max-width:820px){
  .profile-view .profile-share-actions{justify-content:flex-start!important;}
  .profile-view #oq37SecurityCard{padding:26px 22px!important;}
}

/* V51: synced Hasanaat periods are account-only. */
html:not([data-auth-state="signed-in"]) .continue-hasanaat-tracker,
body:not([data-auth-state="signed-in"]) .continue-hasanaat-tracker{display:none!important;}
body[data-auth-state="signed-in"] .continue-hasanaat-tracker{display:block!important;}