/* ===================== KarmaFans · OnlyFans parody ===================== */
:root{
  --bg:#10141c;
  --bg-2:#161b25;
  --card:#1b2230;
  --line:rgba(255,255,255,.08);
  --ink:#eef2f8;
  --muted:#8b93a3;
  --of:#00aff0;            /* фирменный голубой */
  --of-2:#0a93d8;
  --of-deep:#0077c0;
  --green:#37d27a;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{ -webkit-tap-highlight-color:transparent; box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  position:fixed; inset:0;
  background:#06080c;
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  overflow:hidden; overscroll-behavior:none;
  display:flex; justify-content:center;
}
.phone{
  position:relative; width:min(440px,100vw); height:100%;
  overflow:hidden; background:var(--bg);
}
@media (min-width:470px){
  .phone{ box-shadow:0 0 0 1px var(--line), 0 30px 80px -20px rgba(0,0,0,.8); }
}

/* ── экраны ────────────────────────────────────────────────── */
#app{ position:absolute; inset:0; }
.screen{
  position:absolute; inset:0; display:flex; flex-direction:column;
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
.screen.active{ opacity:1; visibility:visible; }
.screen-scroll{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.center-screen{ align-items:center; justify-content:center; text-align:center; padding:24px; }
.content{ padding:6px 18px 30px; }

.enter{ opacity:0; transform:translateY(12px); }
.screen.active .enter{ animation:enterUp .5s var(--ease) forwards; }
@keyframes enterUp{ to{ opacity:1; transform:none; } }
.fade-up{ opacity:0; transform:translateY(8px); animation:fadeUp 1.1s var(--ease) forwards; }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }

.karma{ color:var(--ink); }
.fans{ color:var(--of); }

/* ── splash ────────────────────────────────────────────────── */
#splash{ z-index:30; align-items:center; justify-content:center; background:var(--bg); }
.splash-inner{ text-align:center; }
.s-logo{ font-weight:800; font-size:46px; letter-spacing:-1px; }
.s-sub{ font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-top:12px; }

/* ── профиль (экран 1) ─────────────────────────────────────── */
.profile{ padding-bottom:30px; }
.cover{
  position:relative; height:180px;
  background:url("/hero.png") center 50%/cover no-repeat;
}
.cover-fade{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(16,20,28,.15) 0%, rgba(16,20,28,0) 40%, var(--bg) 100%); }

.p-head{
  position:relative; margin-top:-46px; padding:0 18px;
  display:flex; align-items:flex-end; justify-content:space-between;
}
.avatar-ring{
  width:92px; height:92px; border-radius:50%; overflow:hidden;
  border:4px solid var(--bg); background:var(--card);
  box-shadow:0 6px 20px rgba(0,0,0,.5);
}
.p-avatar{ width:100%; height:100%; object-fit:cover; object-position:center 38%; }
.online{ font-size:12px; color:var(--green); font-weight:600; padding-bottom:6px; }

.p-id{ padding:12px 18px 0; }
.p-name{ font-size:22px; font-weight:800; display:flex; align-items:center; gap:7px; }
.verified{
  display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; border-radius:50%; background:var(--of);
  color:#fff; font-size:11px; font-weight:700; flex-shrink:0;
}
.p-handle{ font-size:14px; color:var(--muted); margin-top:3px; }

.p-stats{
  display:flex; gap:26px; padding:16px 18px; margin-top:14px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.stat{ display:flex; flex-direction:column; }
.stat b{ font-size:18px; font-weight:800; }
.stat span{ font-size:12px; color:var(--muted); margin-top:1px; }

.p-bio{ padding:16px 18px 0; font-size:15px; line-height:1.5; }
.p-hook{ padding:12px 18px 0; font-size:15px; font-weight:600; color:var(--of); }

.subscribe{
  display:block; width:calc(100% - 36px); margin:16px 18px 0;
  padding:16px; border-radius:14px; border:none; cursor:pointer;
  font-family:inherit; font-weight:800; font-size:16px; color:#fff; letter-spacing:.2px;
  background:linear-gradient(180deg, var(--of) 0%, var(--of-2) 100%);
  box-shadow:0 12px 30px -10px rgba(0,175,240,.7);
  transition:transform .15s var(--ease), box-shadow .25s, filter .2s;
  animation:subGlow 2.8s ease-in-out infinite;
}
.subscribe:active{ transform:scale(.985); filter:brightness(1.06); }
@keyframes subGlow{
  0%,100%{ box-shadow:0 12px 30px -12px rgba(0,175,240,.6); }
  50%{ box-shadow:0 16px 40px -10px rgba(0,175,240,.95), 0 0 22px -4px rgba(0,175,240,.5); }
}
.subscribe.solo{ animation:subSolo 1.9s ease-in-out infinite; }
@keyframes subSolo{
  0%,100%{ transform:scale(1.02); box-shadow:0 16px 40px -10px rgba(0,175,240,.9), 0 0 26px -2px rgba(0,175,240,.55); }
  50%{ transform:scale(1.05); box-shadow:0 22px 52px -8px rgba(0,175,240,1), 0 0 42px 0 rgba(0,175,240,.75); }
}
.sub-fine{ font-size:12px; color:var(--muted); text-align:center; margin:10px 18px 0; }

.viewer{ display:none; align-items:center; justify-content:center; gap:8px;
  margin:14px 18px 0; font-size:13px; color:var(--muted); }
.viewer-ava{ width:24px; height:24px; border-radius:50%; object-fit:cover; vertical-align:middle;
  border:1px solid var(--line); }

/* закрытый контент */
.locked{ padding:22px 18px 0; }
.locked-head{ display:flex; align-items:center; justify-content:space-between;
  font-size:13px; font-weight:600; color:var(--muted); margin-bottom:12px; }
.locked-lock{ color:var(--of); }
.locked-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.post-card{ position:relative; aspect-ratio:3/4; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); }
.post-thumb{ position:absolute; inset:0; background:url("/hero.png") center/cover;
  filter:blur(14px) brightness(.45) saturate(1.2); transform:scale(1.3); }
.post-thumb.t1{ background-position:20% 30%; }
.post-thumb.t2{ background-position:60% 50%; }
.post-thumb.t3{ background-position:40% 80%; }
.post-veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.6)); }
.post-lock{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:22px; opacity:.9; }
.post-cap{ position:absolute; left:0; right:0; bottom:0; padding:7px 8px;
  font-size:10.5px; line-height:1.2; color:#dfe4ec; text-align:center; }
.locked-note{ font-size:12px; color:var(--muted); text-align:center; margin-top:14px; }

/* ── кнопка «Не сейчас» ─────────────────────────────────────── */
/* по умолчанию — крупная второстепенная кнопка прямо под «Подписаться» */
.btn-no{
  display:block; width:calc(100% - 36px); margin:10px 18px 0;
  padding:15px; border-radius:14px; text-align:center;
  background:transparent; border:1px solid rgba(255,255,255,.14); color:var(--muted);
  font-family:inherit; font-weight:700; font-size:15px; cursor:pointer;
  transition:transform .35s var(--ease), opacity .4s, left .35s var(--ease), top .35s var(--ease);
  transform-origin:center;
}
/* как только пытается убежать — превращается в плавающую пилюлю */
.btn-no.fleeing{
  position:absolute; z-index:7; width:auto; margin:0;
  padding:14px 24px; border-radius:999px; font-size:15px;
  background:rgba(27,34,48,.92); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 30px -8px rgba(0,0,0,.6);
}

/* ── appbar / progress / footbar ───────────────────────────── */
.appbar{
  flex-shrink:0; display:grid; grid-template-columns:44px 1fr 44px; align-items:center;
  padding:calc(8px + env(safe-area-inset-top,0px)) 10px 8px;
  background:var(--bg);
}
.bar-brand{ text-align:center; font-weight:800; font-size:18px; letter-spacing:-.3px; }
.bar-spacer{ width:44px; }
.backbtn{ width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  font-size:26px; color:var(--ink); opacity:.7; background:none; border:none; cursor:pointer;
  transition:opacity .2s, transform .2s; }
.backbtn:active{ transform:translateX(-3px); opacity:1; }
.progress{ height:3px; background:var(--line); flex-shrink:0; }
.progress i{ display:block; height:100%; background:var(--of); border-radius:0 3px 3px 0;
  transition:width .4s var(--ease); box-shadow:0 0 10px rgba(0,175,240,.6); }

.footbar{ flex-shrink:0; padding:12px 18px calc(16px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to top, var(--bg) 60%, transparent); }
.err{ display:none; color:#ff8a8a; font-size:14px; text-align:center; margin:0 0 10px; }

.cta{
  width:100%; padding:16px; border-radius:14px; border:none; cursor:pointer;
  font-family:inherit; font-weight:800; font-size:16px; color:#fff;
  background:linear-gradient(180deg, var(--of) 0%, var(--of-2) 100%);
  box-shadow:0 12px 30px -12px rgba(0,175,240,.7);
  transition:transform .15s var(--ease), filter .2s, opacity .25s;
}
.cta:active{ transform:scale(.985); filter:brightness(1.06); }
.cta:disabled{ background:#222a38; color:#5b6373; box-shadow:none; cursor:not-allowed; }

/* ── заголовки ─────────────────────────────────────────────── */
.kicker{ display:inline-block; font-size:12px; font-weight:600; color:var(--of); letter-spacing:.4px; }
.screen-title{ font-size:28px; font-weight:800; line-height:1.1; margin:8px 0 18px; letter-spacing:-.5px; }
.sub-line{ font-size:14px; color:var(--muted); margin:8px 0 20px; }
.big-title{ font-size:30px; font-weight:800; margin:0; letter-spacing:-.5px; }
.muted{ font-size:16px; color:var(--muted); line-height:1.5; margin-top:14px; }

/* ── календарь ─────────────────────────────────────────────── */
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:7px; margin-top:18px; }
.cal-grid:first-of-type{ margin-top:22px; } #cal-grid{ margin-top:7px; }
.cal-dow{ font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted);
  text-align:center; padding-bottom:4px; }
.cal-cell{ aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  border-radius:12px; font-size:15px; font-weight:600; cursor:pointer; color:var(--ink);
  background:var(--card); border:1px solid transparent;
  transition:background .2s, border-color .2s, color .2s, transform .12s; }
.cal-cell.weekend{ background:#202836; }
.cal-cell.empty{ background:none; cursor:default; }
.cal-cell.disabled{ opacity:.3; cursor:not-allowed; color:#5b6373; }
.cal-cell.selected{ background:var(--of); color:#fff; border-color:var(--of);
  box-shadow:0 0 18px -3px rgba(0,175,240,.7); }
.cal-cell:not(.disabled):not(.empty):active{ transform:scale(.92); }

/* ── слоты ─────────────────────────────────────────────────── */
.slot-wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.slot{ padding:15px 0; text-align:center; border-radius:12px; font-size:17px; font-weight:600;
  cursor:pointer; color:var(--ink); background:var(--card); border:1px solid var(--line);
  transition:background .2s, border-color .2s, transform .12s; }
.slot.selected{ background:var(--of); border-color:var(--of); color:#fff;
  box-shadow:0 0 18px -4px rgba(0,175,240,.7); }
.slot:active{ transform:scale(.95); }

/* ── кухни ─────────────────────────────────────────────────── */
.cuisines{ display:flex; flex-direction:column; gap:10px; }
.cuisine{ position:relative; padding:15px 16px; border-radius:14px; cursor:pointer;
  background:var(--card); border:1px solid var(--line);
  transition:transform .2s var(--ease), border-color .2s, background .2s, opacity .2s; }
.cuisine:active{ transform:scale(.99); }
.cuisine .c-name{ font-size:18px; font-weight:700; }
.cuisine .c-desc{ font-size:13.5px; color:var(--muted); margin-top:3px; }
.cuisine .c-badge{ font-size:11px; color:var(--of); font-weight:600; margin-top:8px; display:inline-block; }
.cuisine.host{ border-color:rgba(0,175,240,.4); }
.cuisine.selected{ border-color:var(--of); background:#16222e;
  box-shadow:0 0 22px -8px rgba(0,175,240,.6); }
.cuisines.has-selection .cuisine:not(.selected){ opacity:.45; }

/* ── чипы / textarea ───────────────────────────────────────── */
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{ padding:10px 15px; border-radius:999px; cursor:pointer; font-size:14px; font-weight:600;
  color:var(--ink); background:var(--card); border:1px solid var(--line);
  transition:background .2s, border-color .2s, transform .12s; }
.chip:active{ transform:scale(.95); }
.chip.selected{ background:var(--of); border-color:var(--of); color:#fff; }
textarea{ width:100%; margin-top:16px; padding:14px; border-radius:14px; resize:none;
  background:var(--card); border:1px solid var(--line); color:var(--ink);
  font-family:inherit; font-size:15px; line-height:1.5; outline:none; transition:border-color .2s; }
textarea:focus{ border-color:var(--of); }
.char-count{ font-size:11px; color:var(--muted); text-align:right; margin-top:6px; }

/* ── сводка ────────────────────────────────────────────────── */
.summary{ border-radius:16px; overflow:hidden; background:var(--card); border:1px solid var(--line); }
.summary .s-row{ padding:14px 18px; border-bottom:1px solid var(--line); }
.summary .s-row:last-child{ border-bottom:none; }
.summary .s-label{ font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--of); font-weight:600; }
.summary .s-val{ font-size:17px; margin-top:4px; font-weight:600; }

/* ── stub / success ────────────────────────────────────────── */
.stub,.success{ display:flex; flex-direction:column; align-items:center; }
.big-emoji{ font-size:54px; margin-bottom:14px; }
.closehint{ font-size:13px; color:var(--muted); margin-top:40px; cursor:pointer; }
.blur-in{ filter:blur(8px); opacity:0; animation:blurIn .9s var(--ease) forwards; }
@keyframes blurIn{ to{ filter:blur(0); opacity:1; } }
.check-circle{ width:78px; height:78px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:40px; font-weight:800; color:#fff; margin-bottom:22px;
  background:linear-gradient(180deg,var(--of),var(--of-2));
  box-shadow:0 0 40px -6px rgba(0,175,240,.8); animation:popIn .5s var(--ease) forwards, subGlow 2.6s ease-in-out infinite .5s; }
@keyframes popIn{ from{ transform:scale(.4); opacity:0; } to{ transform:scale(1); opacity:1; } }