/* ============================================================================
   Inner Circle, shared design system
   Mobile-first. Matches the ECC checkout aesthetic: Inter, clean white,
   deep blue, with Telegram-blue accents for join actions.
   ============================================================================ */
:root{
  /* Notion-inspired palette: warm neutral grays, blue accent, calm surfaces. */
  --bg:#FFFFFF; --bg2:#F7F7F5; --card:#FFFFFF;
  --border:#E9E9E7; --border2:#EFEFEE;
  --text:#37352F; --soft:#787774; --mid:#9B9A97; --faint:#C7C7C4;
  --blue:#2383E2; --blueHov:#1A75CF;
  --tg:#229ED9; --tgHov:#1B8ABE;
  --green:#448361; --greenBg:#EDF3EE; --greenBd:#CDE3D5;
  --amber:#B45309; --amberBg:#FBF3E4; --amberBd:#F1DFBB;
  --red:#D9534F; --redBg:#FBEEEE; --redBd:#F0C9C7;
  --ff:'Inter',system-ui,-apple-system,sans-serif;
  --shadow-sm:0 1px 2px rgba(15,15,15,.04);
  --shadow:0 4px 16px rgba(15,15,15,.06);
  --shadow-lg:0 12px 36px rgba(15,15,15,.10);
  --r:12px; --r-sm:8px; --r-lg:16px;
  --maxw:560px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{font-family:var(--ff);background:var(--bg2);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
button,input,select,textarea{font-family:inherit}
button{cursor:pointer;border:none;background:none;color:inherit;font-size:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ── App shell ─────────────────────────────────────────────── */
.app{max-width:var(--maxw);margin:0 auto;padding:0 1.1rem 3rem;min-height:100vh}

/* ── Top bar ───────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 0 .8rem;background:rgba(247,248,250,.85);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px)}
.brand{display:flex;align-items:center;gap:.6rem}
.brand-mark{width:34px;height:34px;border-radius:9px;background:var(--text);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:.95rem;letter-spacing:-.02em;flex-shrink:0;overflow:hidden}
.brand-mark img{width:100%;height:100%;object-fit:cover;display:block}
/* Transparent ECC logo, shown directly (no wrapper/chip). */
.brand-logo{height:26px;width:auto;display:block;flex-shrink:0}
.brand-name{font-size:1.02rem;font-weight:700;letter-spacing:-.02em}
/* profile avatar button (top-right) */
.avatar-btn{width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--soft);font-weight:700;font-size:.9rem;transition:border-color .15s,transform .08s;flex-shrink:0}
.avatar-btn:hover{border-color:var(--faint)}
.avatar-btn:active{transform:scale(.96)}
.avatar-btn img{width:100%;height:100%;object-fit:cover}

/* ── Headings ──────────────────────────────────────────────── */
.hero{padding:1.4rem 0 .4rem}
.hello{font-size:1.85rem;font-weight:800;letter-spacing:-.03em;line-height:1.12}
.hello .wave{display:inline-block;transform-origin:70% 70%;animation:wave 2.4s ease-in-out 1}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}}
.subtle{color:var(--soft);font-size:.95rem;line-height:1.55;margin-top:.35rem}

/* ── Cards ─────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:1.15rem}
.card + .card{margin-top:.9rem}
.section-title{font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mid);margin:1.7rem .15rem .7rem}

/* ── Buttons ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
  padding:.9rem 1.1rem;border-radius:var(--r-sm);font-size:.95rem;font-weight:600;
  transition:background .15s,transform .08s,opacity .15s,box-shadow .15s}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed}
/* Primary action button = Notion blue (same as the login CTA). */
.btn-dark{background:var(--blue);color:#fff}
.btn-dark:hover:not(:disabled){background:var(--blueHov)}
.btn-tg{background:var(--tg);color:#fff;box-shadow:0 4px 14px rgba(34,158,217,.28)}
.btn-tg:hover:not(:disabled){background:var(--tgHov)}
.btn-ghost{background:var(--bg);color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover:not(:disabled){border-color:var(--faint);background:#fff}
.btn-danger{background:var(--redBg);color:var(--red);border:1px solid var(--redBd)}
.btn-danger:hover:not(:disabled){background:#FEE2E2}
.btn-sm{padding:.6rem .85rem;font-size:.86rem;width:auto}
.btn svg{width:18px;height:18px;flex-shrink:0}
.tg-glyph{width:20px;height:20px;flex-shrink:0}

/* ── Telegram connect card ─────────────────────────────────── */
.tg-connect{background:linear-gradient(135deg,#e8f6fd 0%,#f3fbff 60%,#ffffff 100%);border:1px solid #cfeafa}
.tg-connect .tg-icon{width:48px;height:48px;border-radius:12px;background:var(--tg);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(34,158,217,.35);flex-shrink:0}
.tg-connect .tg-icon svg{width:28px;height:28px;color:#fff}
.tg-connected-row{display:flex;align-items:center;gap:.8rem}
.tg-connected-row .tgp{width:46px;height:46px;border-radius:50%;overflow:hidden;background:var(--bg);border:1px solid var(--border);flex-shrink:0}
.tg-connected-row .tgp img{width:100%;height:100%;object-fit:cover}

/* Telegram connection row (layout adopted from the ECC web app; our colors) */
.con-card{padding:1rem 1.1rem}
.con-row{display:flex;align-items:center;gap:.85rem}
.con-ic{width:44px;height:44px;border-radius:12px;background:var(--tg);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;box-shadow:0 6px 18px rgba(34,158,217,.3)}
.con-ic > svg{width:24px;height:24px}
.con-badge{position:absolute;right:-4px;bottom:-4px;width:22px;height:22px;border-radius:50%;overflow:hidden;border:3px solid var(--card);background:var(--bg2)}
.con-badge img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* blur-up: tiny inline placeholder is blurred; full image fades in + un-blurs on load */
.con-badge .ph{filter:blur(4px);transform:scale(1.2)}
.con-badge .full{opacity:0;filter:blur(4px);transition:opacity .45s ease,filter .45s ease}
.con-badge .full.loaded{opacity:1;filter:blur(0)}
.con-body{flex:1;min-width:0}
.con-name{font-size:.95rem;font-weight:700;letter-spacing:-.01em}
.con-status{font-size:.8rem;color:var(--mid);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.con-status.ok{color:var(--green);font-weight:600}
.con-btn{flex-shrink:0;padding:.6rem 1.15rem;border-radius:9px;font-size:.86rem;font-weight:600;
  transition:background .15s,border-color .15s,color .15s,opacity .15s;border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-width:94px}
.con-btn.prim{background:var(--tg);color:#fff}
.con-btn.prim:hover:not(:disabled){background:var(--tgHov)}
.con-btn.sec{background:var(--bg);color:var(--soft);border-color:var(--border)}
.con-btn.sec:hover:not(:disabled){border-color:var(--faint);color:var(--text)}
.con-btn:disabled{opacity:.6;cursor:not-allowed}
.con-btn .spinner{border-color:rgba(255,255,255,.4);border-top-color:#fff}

/* ── Chat list rows ────────────────────────────────────────── */
.chat-row{display:flex;align-items:center;gap:.85rem;padding:.9rem;border:1px solid var(--border);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s}
.chat-row + .chat-row{margin-top:.6rem}
.chat-row:hover{border-color:var(--faint);box-shadow:var(--shadow)}
.chat-ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;background:var(--bg2);border:1px solid var(--border2)}
.chat-meta{flex:1;min-width:0}
.chat-title{font-weight:650;font-size:.98rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-desc{color:var(--soft);font-size:.84rem;margin-top:.12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-action{flex-shrink:0}

/* ── Badges ────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .6rem;border-radius:100px;font-size:.76rem;font-weight:650;line-height:1}
.badge-in{background:var(--greenBg);color:var(--green);border:1px solid var(--greenBd)}
.badge-out{background:var(--bg2);color:var(--soft);border:1px solid var(--border)}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ── Rows / list items (profile page) ──────────────────────── */
.row{display:flex;align-items:center;gap:.85rem;padding:.95rem 0;border-bottom:1px solid var(--border2)}
.row:last-child{border-bottom:none}
.row-ic{width:38px;height:38px;border-radius:10px;background:var(--bg2);display:flex;align-items:center;justify-content:center;color:var(--soft);flex-shrink:0}
.row-ic svg{width:19px;height:19px}
.row-main{flex:1;min-width:0}
.row-label{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mid)}
.row-value{font-size:.95rem;font-weight:550;margin-top:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-chevron{color:var(--faint);flex-shrink:0}
.row-chevron svg{width:18px;height:18px}

/* ── Subscription summary ──────────────────────────────────── */
.sub-amount{font-size:2rem;font-weight:800;letter-spacing:-.03em}
.sub-amount .per{font-size:.95rem;font-weight:500;color:var(--soft)}
.kv{display:flex;justify-content:space-between;align-items:baseline;padding:.55rem 0;font-size:.9rem}
.kv .k{color:var(--soft)} .kv .v{font-weight:600}

/* ── Auth pages (login / set-password), Notion-style ──────────
   Clean white full-screen, one centered narrow column, NO boxed card.
   Deliberately its own scale/tokens (6px radius, Notion blue), kept
   separate from the app design system on purpose. */
.nlogin{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#fff;padding:2rem 1.25rem calc(2.2rem + env(safe-area-inset-bottom))}
.nlogin-inner{width:100%;max-width:300px}
.nlogin-brand{display:flex;align-items:center;justify-content:center;gap:.55rem;margin-bottom:1.7rem}
.nlogin-brand img{height:26px;width:auto;display:block}
.nlogin-brand span{font-size:1rem;font-weight:700;letter-spacing:-.02em;color:#1a1a19}
.nlogin h1{font-size:1.4rem;font-weight:700;letter-spacing:-.022em;text-align:center;color:#1a1a19;line-height:1.2}
.nlogin .sub{font-size:.88rem;color:#787774;text-align:center;margin:.45rem 0 0;line-height:1.5}
.nlogin form{margin-top:1.7rem}
.nlogin label{display:block;font-size:.8rem;font-weight:500;color:#37352f;margin-bottom:.4rem}
/* Inputs + buttons match the app design system (10px radius, navy focus,
   black primary button) while keeping this page's clean centered layout. */
.nlogin input{width:100%;height:46px;padding:0 .9rem;font-size:.95rem;color:var(--text);background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r-sm);transition:box-shadow .15s,border-color .15s;-webkit-appearance:none}
.nlogin input::placeholder{color:var(--mid)}
.nlogin input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(11,34,115,.1)}
.nlogin .nbtn{width:100%;height:46px;margin-top:1.1rem;border-radius:var(--r-sm);background:var(--blue);color:#fff;
  font-size:.95rem;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  transition:background .15s,transform .08s,opacity .15s}
.nlogin .nbtn:hover:not(:disabled){background:var(--blueHov)}
.nlogin .nbtn:active:not(:disabled){transform:translateY(1px)}
.nlogin .nbtn:disabled{opacity:.55;cursor:not-allowed}
.nlogin .nlink{color:var(--blue);font-weight:600;font-size:.82rem;background:none;border:none;cursor:pointer;padding:0}
.nlogin .nlink:hover{text-decoration:underline}
.nlogin .rowbetween{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.4rem}
.nlogin .rowbetween label{margin-bottom:0}
/* the "logged-in-as" identity chip shown on the password step */
.nlogin .identity{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.7rem .8rem;
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg2);margin-bottom:1.1rem}
.nlogin .identity .who{font-size:.88rem;color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nlogin .foot{text-align:center;font-size:.86rem;color:var(--soft);margin-top:1.5rem;line-height:1.6}
.nlogin .foot a{color:var(--blue);text-decoration:none;font-weight:600}
.nlogin .foot a:hover{text-decoration:underline}
.nlogin .alert{margin:1.1rem 0 0}
.nlogin .spinner{border-color:rgba(255,255,255,.4);border-top-color:#fff}
.nlogin .step[hidden]{display:none}

/* ── Form fields (profile edit / retention) ────────────────── */
.field{margin-bottom:.9rem}
.field:last-child{margin-bottom:0}
.field > label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mid);margin-bottom:.4rem}
.field input,.field textarea{width:100%;padding:.8rem .9rem;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg);font-size:.95rem;color:var(--text);transition:border-color .15s,box-shadow .15s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(11,34,115,.1)}
.field textarea{resize:vertical;min-height:88px;line-height:1.5}
.field .hint{font-size:.78rem;color:var(--soft);margin-top:.4rem;line-height:1.5}

/* ── Avatar editor (profile header) ────────────────────────── */
.profile-head{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.6rem 0 .6rem}
.profile-avatar{width:82px;height:82px;border-radius:50%;overflow:hidden;background:var(--bg2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--soft);font-weight:800;font-size:1.7rem;letter-spacing:-.02em}
.profile-avatar img{width:100%;height:100%;object-fit:cover}
.profile-name{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;margin-top:.85rem}
.profile-email{color:var(--soft);font-size:.9rem;margin-top:.2rem}

/* ── Retention option list (cancel flow) ───────────────────── */
.opt{display:flex;align-items:center;gap:.75rem;padding:.85rem .95rem;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg);margin-top:.6rem;cursor:pointer;transition:border-color .15s,background .15s;font-size:.94rem;font-weight:500}
.opt:hover{border-color:var(--faint)}
.opt.sel{border-color:var(--blue);background:rgba(11,34,115,.04);font-weight:600}
.opt .opt-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s}
.opt.sel .opt-check{border-color:var(--blue);background:var(--blue)}
.opt.sel .opt-check::after{content:'';width:7px;height:7px;border-radius:50%;background:#fff}

/* ── Retention "you'll lose" list ──────────────────────────── */
.lose-list{list-style:none;margin:.4rem 0 0}
.lose-list li{display:flex;align-items:flex-start;gap:.6rem;padding:.55rem 0;font-size:.94rem;color:var(--text);line-height:1.45}
.lose-list li svg{width:19px;height:19px;color:var(--red);flex-shrink:0;margin-top:.05rem}
.sheet-actions{display:flex;gap:.7rem;margin-top:1.3rem}
.sheet-actions .btn{width:auto;flex:1}

/* ── Alerts / toasts ───────────────────────────────────────── */
.alert{padding:.8rem .95rem;border-radius:var(--r-sm);font-size:.86rem;font-weight:500;margin:.6rem 0;line-height:1.5;display:none}
.alert.show{display:block}
.alert.err{background:var(--redBg);color:#B91C1C;border:1px solid var(--redBd)}
.alert.ok{background:var(--greenBg);color:#15803D;border:1px solid var(--greenBd)}

/* ── Toasts (transient popup notifications, bottom-center) ──── */
.toast-wrap{position:fixed;left:0;right:0;bottom:calc(1.1rem + env(safe-area-inset-bottom));z-index:200;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:0 1rem;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:.6rem;max-width:min(420px,92vw);
  padding:.75rem .95rem;border-radius:12px;background:var(--text);color:#fff;box-shadow:var(--shadow-lg);
  font-size:.9rem;font-weight:500;line-height:1.35;cursor:pointer;
  opacity:0;transform:translateY(14px) scale(.98);transition:opacity .25s ease,transform .28s cubic-bezier(.32,.72,0,1)}
.toast.show{opacity:1;transform:translateY(0) scale(1)}
.toast.hide{opacity:0;transform:translateY(14px) scale(.98)}
.toast-ic{display:flex;flex-shrink:0}
.toast-ic svg{width:18px;height:18px}
.toast-ok .toast-ic{color:#4ade80}
.toast-err .toast-ic{color:#f87171}
.toast-info .toast-ic{color:#93c5fd}
.toast-msg{min-width:0}

/* ── Skeleton ──────────────────────────────────────────────── */
.sk{background:linear-gradient(90deg,var(--border2) 0%,var(--bg2) 50%,var(--border2) 100%);background-size:200% 100%;animation:sk 1.2s ease-in-out infinite;border-radius:8px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Spinner ───────────────────────────────────────────────── */
.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Sheet / modal ─────────────────────────────────────────── */
.sheet-backdrop{position:fixed;inset:0;background:rgba(13,15,20,.42);backdrop-filter:blur(2px);z-index:50;opacity:0;pointer-events:none;transition:opacity .22s}
.sheet-backdrop.show{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:51;background:var(--card);border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:1.4rem 1.2rem calc(1.4rem + env(safe-area-inset-bottom));max-width:var(--maxw);margin:0 auto;
  box-shadow:var(--shadow-lg);transform:translateY(100%);transition:transform .28s cubic-bezier(.32,.72,0,1)}
.sheet.show{transform:translateY(0)}
.sheet-grip{width:38px;height:4px;border-radius:100px;background:var(--border);margin:0 auto 1rem}
.sheet h2{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.4rem}
.sheet p{color:var(--soft);font-size:.92rem;line-height:1.6}

/* ── Misc ──────────────────────────────────────────────────── */
.stack > * + *{margin-top:.7rem}
.muted{color:var(--mid);font-size:.8rem}
.center{text-align:center}
.hidden{display:none!important}

@media(min-width:600px){
  .app{padding-top:.2rem}
}