:root{--bg:#090c18;--panel:#14182a;--panel-secondary:#1d2238;--incoming-bubble:#232941;--outgoing-bubble:#8552d8;--text:#f7f3ff;--muted:#aaa6ba;--accent:#e45da7;--danger:#ff6680;--success:#62d9a2;--pattern-opacity:.07}
*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}html,body{height:100%;margin:0;overflow:hidden}html{font-size:18px}body{font-family:Inter,ui-rounded,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text);font-size:1rem}button,input,select{font:inherit}button{color:inherit}.app{height:100%;background:radial-gradient(circle at 15% 15%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 35%),var(--bg)}.loader{position:fixed;inset:0;display:grid;place-content:center;text-align:center;background:#090c18;z-index:100}.loader-heart{font-size:54px;color:#e45da7;animation:pulse 1s infinite}.loader p{font-weight:800;font-size:1.15rem}.screen{height:100%;max-width:1100px;margin:auto;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:12px;padding:18px 22px}.topbar h1{font-size:clamp(26px,4vw,38px);margin:0;flex:1}.subtle{color:var(--muted)}.content{flex:1;min-height:0;overflow:auto;padding:0 22px 100px;scrollbar-width:none}.content::-webkit-scrollbar,.messages::-webkit-scrollbar{display:none}.story-list{display:grid;gap:14px}.story-card{border:1px solid color-mix(in srgb,var(--text) 10%,transparent);background:linear-gradient(135deg,var(--panel),var(--panel-secondary));border-radius:24px;padding:17px;display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;cursor:pointer;box-shadow:0 12px 32px #0004}.avatar,.photo-placeholder{display:grid;place-items:center;background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 45%,#252342));font-weight:900}.avatar{position:relative;width:64px;height:64px;overflow:hidden;border-radius:50%;font-size:26px}.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s ease}.avatar.has-image img{opacity:1}.avatar-compact{width:46px;height:46px;font-size:17px}.story-meta h2{font-size:21px;margin:0 0 5px}.story-meta p{margin:0;color:var(--muted);font-size:16px;line-height:1.4}.story-progress{margin-top:9px;height:5px;background:#ffffff12;border-radius:5px;overflow:hidden}.story-progress i{display:block;height:100%;background:var(--accent)}.badge{font-size:14px;border-radius:999px;padding:7px 10px;background:#ffffff12}.bottom-nav{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,1100px);display:grid;grid-template-columns:repeat(4,1fr);background:color-mix(in srgb,var(--panel) 92%,transparent);border-top:1px solid #ffffff12;padding:8px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom));backdrop-filter:blur(18px)}.nav-btn{border:0;background:transparent;padding:9px 5px;color:var(--muted);display:grid;gap:3px;place-items:center;font-size:14px;cursor:pointer}.nav-btn.active{color:var(--accent)}.nav-icon{font-size:24px}.chat-screen{max-width:680px;background:color-mix(in srgb,var(--panel) 45%,transparent);position:relative}.chat-head{padding:10px 14px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #ffffff10;background:var(--panel)}.back,.icon-btn{width:48px;height:48px;border:0;border-radius:14px;background:#ffffff0c;cursor:pointer}.chat-person{flex:1}.chat-person strong,.chat-person small{display:block}.chat-person strong{font-size:19px}.chat-person small{color:var(--success);font-size:15px}.messages{flex:1;overflow:auto;padding:18px 14px 28px;display:flex;flex-direction:column;gap:9px}.bubble{max-width:82%;padding:12px 15px;border-radius:18px;line-height:1.45;font-size:17px;animation:rise .25s ease;box-shadow:0 7px 17px #0002}.incoming{align-self:flex-start;background:var(--incoming-bubble);border-bottom-left-radius:6px}.outgoing{align-self:flex-end;background:var(--outgoing-bubble);border-bottom-right-radius:6px}.system{align-self:center;color:var(--muted);font-size:15px;text-align:center}.photo-card{align-self:flex-start;width:min(82%,330px);border-radius:20px;overflow:hidden;background:var(--panel-secondary);animation:rise .3s ease}.photo-placeholder{aspect-ratio:4/3;font-size:42px}.photo-card p{margin:0;padding:11px 14px;color:var(--muted);font-size:15px}.typing{align-self:flex-start;background:var(--incoming-bubble);padding:12px 16px;border-radius:18px}.typing i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted);margin:0 2px;animation:dots 1s infinite}.typing i:nth-child(2){animation-delay:.16s}.typing i:nth-child(3){animation-delay:.32s}.choices{padding:12px 14px calc(12px + env(safe-area-inset-bottom));display:grid;gap:9px;background:var(--panel);border-top:1px solid #ffffff10}.choice-btn,.primary,.danger-btn{border:0;border-radius:16px;min-height:56px;padding:14px 18px;font-size:17px;line-height:1.35;font-weight:750;cursor:pointer}.choice-btn,.primary{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#7155df));box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 25%,transparent)}.choice-btn:disabled{opacity:.5}.danger-btn{background:color-mix(in srgb,var(--danger) 20%,var(--panel));color:var(--danger)}.section-title{margin:20px 0 12px;font-size:24px}.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.gallery-item{border:0;padding:0;border-radius:17px;overflow:hidden;background:var(--panel);cursor:pointer;position:relative;aspect-ratio:3/4}.gallery-item .photo-placeholder{height:100%;aspect-ratio:auto}.gallery-item.locked:after{content:'🔒';position:absolute;inset:0;display:grid;place-items:center;background:#050611d9;font-size:30px}.theme-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.theme-card{border:2px solid transparent;border-radius:20px;padding:18px;background:var(--panel);cursor:pointer;text-align:left;font-size:18px}.theme-card.selected{border-color:var(--accent)}.theme-swatch{height:70px;border-radius:14px;margin-bottom:12px}.reward-ad-label{margin:10px 0 0;padding:9px 11px;border-radius:12px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--text);font-size:15px;line-height:1.35;font-weight:750}.settings-card{background:var(--panel);border-radius:20px;padding:18px;margin-bottom:12px}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:15px 0;font-size:18px}.setting-row select,.setting-row input{accent-color:var(--accent)}.modal-wrap{position:fixed;inset:0;background:#000b;display:grid;place-items:center;padding:18px;z-index:50}.modal{width:min(480px,100%);max-height:90vh;overflow:auto;background:var(--panel);border:1px solid #ffffff16;border-radius:26px;padding:26px;text-align:center;font-size:18px;box-shadow:0 25px 80px #0008}.modal h2{margin-top:0;font-size:28px}.modal-actions{display:grid;gap:10px;margin-top:18px}.viewer{position:fixed;inset:0;background:#05050bf2;z-index:60;display:grid;grid-template-columns:55px 1fr 55px;align-items:center}.viewer-main{text-align:center;font-size:18px}.viewer .photo-placeholder{width:min(72vw,600px);height:min(72vh,750px);margin:auto;border-radius:22px}.viewer button{border:0;background:#ffffff12;border-radius:50%;width:50px;height:50px;margin:auto;cursor:pointer;font-size:25px}.viewer-close{position:absolute;right:18px;top:18px}.debug{position:fixed;top:4px;right:4px;background:#000c;color:#7dffb5;padding:6px 9px;border-radius:7px;font:15px monospace;z-index:99}@keyframes pulse{50%{transform:scale(1.18)}}@keyframes dots{50%{opacity:.25;transform:translateY(-3px)}}@keyframes rise{from{opacity:0;transform:translateY(7px)}}button:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 65%,white);outline-offset:3px}

body[data-theme="pink"]{--bg:#211021;--panel:#32182f;--panel-secondary:#47213e;--incoming-bubble:#4a2945;--outgoing-bubble:#d84e91;--accent:#ff72b5}
body[data-theme="neon"]{--bg:#060814;--panel:#101426;--panel-secondary:#17213b;--incoming-bubble:#17213b;--outgoing-bubble:#663cff;--accent:#18e6db}
body[data-theme="alternative"]{--bg:#090909;--panel:#171313;--panel-secondary:#251717;--incoming-bubble:#292020;--outgoing-bubble:#a51f35;--accent:#e33750}
body[data-theme="mint"]{--bg:#0e1c1c;--panel:#17302e;--panel-secondary:#1d403c;--incoming-bubble:#24504a;--outgoing-bubble:#298b79;--accent:#63ddbd}
body[data-theme="beige"]{--bg:#211b17;--panel:#332a23;--panel-secondary:#493b31;--incoming-bubble:#514137;--outgoing-bubble:#9c674b;--accent:#e0a276}

@media(max-width:650px){.screen{max-width:none}.topbar{padding:14px}.content{padding-left:14px;padding-right:14px}.story-card{grid-template-columns:54px 1fr auto;padding:13px}.avatar{width:54px;height:54px}.gallery-grid{grid-template-columns:repeat(2,1fr)}.theme-grid{grid-template-columns:1fr}.chat-screen{width:100%}.bubble{max-width:88%}}
@media(min-width:900px){.bottom-nav{border:1px solid #ffffff12;border-radius:20px 20px 0 0}.story-list{grid-template-columns:repeat(2,1fr)}}

.photo-placeholder{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 45%,#252342));
}

.photo-placeholder img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#090a12;
  opacity:1;
}

.photo-placeholder.has-photo img{opacity:1}

.gallery-item.locked .photo-placeholder{
  background:#070812;
  color:transparent;
}

.gallery-item.locked::after{
  background:#070812;
  opacity:1;
}

.photo-card{
  display:block;
  flex:0 0 auto;
  width:min(78%,310px);
  min-width:220px;
  padding:0;
  border:0;
  color:inherit;
  text-align:left;
  cursor:zoom-in;
}

.photo-card .photo-placeholder{
  display:block;
  width:100%;
  height:min(52vh,410px);
  min-height:320px;
  aspect-ratio:auto;
}

.photo-preview-wrap{
  position:fixed;
  inset:0;
  z-index:70;
  display:grid;
  place-items:center;
  padding:18px;
  background:#0009;
  backdrop-filter:blur(4px);
}

.photo-preview{
  position:relative;
  width:min(86vw,430px);
  max-height:68vh;
  overflow:hidden;
  border:1px solid #ffffff20;
  border-radius:24px;
  background:var(--panel);
  box-shadow:0 24px 80px #000a;
}

.photo-preview-image{
  display:block;
  width:100%;
  max-height:56vh;
  object-fit:contain;
  background:#090a12;
}

.photo-preview-caption{
  margin:0;
  padding:12px 52px 14px 16px;
  color:var(--muted);
  font-size:15px;
  line-height:1.35;
}

.photo-preview-close{
  position:absolute;
  z-index:2;
  top:10px;
  right:10px;
  width:42px;
  height:42px;
  border:1px solid #ffffff25;
  border-radius:50%;
  background:#080910d9;
  color:#fff;
  font-size:27px;
  line-height:1;
  cursor:pointer;
}

@media(max-width:650px){
  .photo-card{width:min(82%,290px)}
  .photo-card .photo-placeholder{height:min(50vh,390px);min-height:300px}
  .photo-preview{width:min(88vw,410px);max-height:66vh}
  .photo-preview-image{max-height:54vh}
}

.age-notice {
  align-self: center;
  width: min(94%, 560px);
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  color: var(--muted);
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
}

.loader {
  gap: 18px;
}

.loader-bar {
  width: min(230px, 58vw);
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #ffffff14;
  box-shadow: inset 0 1px 2px #0006;
}

.loader-bar i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d84e91, #f276bd);
  box-shadow: 0 0 14px #e45da799;
  transform-origin: left;
  animation: loader-progress 1.15s ease-in-out infinite;
}

@keyframes loader-progress {
  0%, 100% { transform: scaleX(.14); }
  50% { transform: scaleX(.86); }
}