/* Account / login screen — uses the app's theme variables so day and night modes both work */
.header.has-auth{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);}
.auth-open-btn{
  border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.18);color:var(--hdr-text);
  font:600 calc(12px * var(--ipad-scale))/1 var(--font);padding:5px 12px;border-radius:var(--radius-pill);
  cursor:pointer;max-width:45vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.auth-open-btn .auth-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:-1px;border:1px solid rgba(255,255,255,.8);}

.auth-overlay{position:fixed;inset:0;z-index:1000;background:var(--page);color:var(--text);display:none;flex-direction:column;
  padding-top:var(--safe-top);padding-bottom:var(--safe-bottom);padding-left:var(--safe-left);padding-right:var(--safe-right);}
.auth-overlay.open{display:flex;}
.auth-bar{display:flex;align-items:center;gap:var(--space-2);padding:10px var(--space-4);background:var(--hdr-bg);color:var(--hdr-text);flex-shrink:0;}
.auth-bar h2{flex:1;text-align:center;font-size:calc(15px * var(--ipad-scale));font-weight:600;}
.auth-bar button{border:none;background:transparent;color:var(--hdr-text);font:600 calc(14px * var(--ipad-scale))/1 var(--font);cursor:pointer;padding:6px 4px;min-width:56px;}
.auth-bar .auth-bar-spacer{min-width:56px;}
.auth-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:var(--space-5) var(--space-4) var(--space-8);}
.auth-card{max-width:420px;margin:0 auto;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);}
.auth-card + .auth-card{margin-top:var(--space-4);}
.auth-title{font-size:calc(20px * var(--ipad-scale));font-weight:700;color:var(--card-title);}
.auth-sub{font-size:calc(13px * var(--ipad-scale));color:var(--text-muted);line-height:1.45;}
.auth-tabs{display:flex;background:var(--sec-bg);border-radius:var(--radius-pill);padding:3px;gap:3px;}
.auth-tabs button{flex:1;border:none;background:transparent;color:var(--sec-text);font:600 calc(14px * var(--ipad-scale))/1 var(--font);padding:10px;border-radius:var(--radius-pill);cursor:pointer;}
.auth-tabs button.active{background:var(--pill-act-bg);color:var(--pill-act-text);}
.auth-field{display:flex;flex-direction:column;gap:5px;}
.auth-field label{font-size:calc(12px * var(--ipad-scale));font-weight:600;color:var(--text-muted);}
.auth-input-wrap{position:relative;display:flex;}
.auth-input{width:100%;min-height:46px;padding:10px 12px;font:16px var(--font);color:var(--text);background:var(--surface);border:1.5px solid var(--border-md);border-radius:var(--radius-sm);outline:none;}
.auth-input:focus{border-color:var(--pill-act-border);box-shadow:0 0 0 3px var(--sec-bg);}
.auth-input.bad{border-color:var(--red-border);}
.auth-input.has-toggle{padding-right:64px;}
.auth-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--sec-text);font:600 12px var(--font);padding:8px;cursor:pointer;}
.auth-code{letter-spacing:.35em;text-align:center;font-size:22px;font-weight:700;}
.auth-hint{font-size:calc(11px * var(--ipad-scale));color:var(--text-hint);}
.auth-btn{min-height:46px;border-radius:var(--radius-pill);border:1.5px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-text);font:600 calc(15px * var(--ipad-scale))/1 var(--font);padding:12px 20px;cursor:pointer;transition:transform .15s var(--ease-spring);}
.auth-btn:active{transform:scale(.97);}
.auth-btn.primary{background:var(--pill-act-bg);border-color:var(--pill-act-border);color:var(--pill-act-text);}
.auth-btn.danger{color:var(--red-text);border-color:var(--red-border);background:var(--red-bg);}
.auth-btn[disabled]{opacity:.55;cursor:default;}
.auth-btn.google{display:flex;align-items:center;justify-content:center;gap:10px;}
.auth-link{border:none;background:transparent;color:var(--sec-text);font:600 calc(13px * var(--ipad-scale))/1.3 var(--font);cursor:pointer;padding:6px 2px;text-decoration:underline;align-self:flex-start;}
.auth-link[disabled]{opacity:.5;text-decoration:none;cursor:default;}
.auth-or{display:flex;align-items:center;gap:var(--space-3);color:var(--text-hint);font-size:12px;}
.auth-or::before,.auth-or::after{content:'';flex:1;height:1px;background:var(--line);}
.auth-msg{font-size:calc(13px * var(--ipad-scale));line-height:1.4;padding:9px 12px;border-radius:var(--radius-sm);display:none;}
.auth-msg.show{display:block;}
.auth-msg.err{background:var(--red-bg);color:var(--red-text);border:1px solid var(--red-border);}
.auth-msg.ok{background:var(--green-bg);color:var(--green-text);border:1px solid var(--green-border);}
.auth-row{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;}
.auth-spread{justify-content:space-between;}

.kid-list{display:flex;flex-direction:column;gap:var(--space-2);}
.kid-item{display:flex;align-items:center;gap:var(--space-3);padding:10px var(--space-3);border:1.5px solid var(--card-border);border-radius:var(--radius-sm);background:var(--surface);}
.kid-item.active{border-color:var(--pill-act-border);background:var(--sec-bg);}
.kid-swatch{width:30px;height:30px;border-radius:50%;flex-shrink:0;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border-md);}
.kid-name{flex:1;font-weight:600;font-size:calc(15px * var(--ipad-scale));min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kid-tag{font-size:11px;font-weight:700;color:var(--pill-act-text);background:var(--pill-act-bg);border-radius:var(--radius-pill);padding:3px 8px;}
.kid-mini{border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-text);font:600 12px var(--font);border-radius:var(--radius-pill);padding:6px 10px;cursor:pointer;}
.kid-mini.danger{color:var(--red-text);border-color:var(--red-border);}
.swatches{display:flex;gap:var(--space-2);flex-wrap:wrap;}
.swatch{width:36px;height:36px;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 1px var(--border-md);cursor:pointer;padding:0;}
.swatch[aria-checked="true"]{box-shadow:0 0 0 3px var(--tab-line);}
.auth-spinner{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:authSpin .7s linear infinite;vertical-align:-2px;margin-right:6px;}
@keyframes authSpin{to{transform:rotate(360deg)}}

/* Locked (paid) content */
.fam-pill.locked{opacity:.6;}
.fam-pill.locked::after{content:'\1F512';font-size:.65em;margin-left:3px;}
.story-card.is-locked{opacity:.8;}
.story-card.is-locked .story-thumb{position:relative;background:var(--sec-bg);}
.story-card.is-locked .story-thumb::after{content:'\1F512';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:34px;}

/* "Are you sure?" pop-up (delete account) */
.auth-modal{position:absolute;inset:0;z-index:5;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:var(--space-4);}
.auth-modal .auth-card{width:100%;box-shadow:0 8px 32px rgba(0,0,0,.35);}