/* ============================================================
   TaLi — Auth pages (register · verify · error)
   D-01 "Market Ledger" design system · warm paper, terracotta accent
   Fraunces + Hanken Grotesk · light is default, dark via [data-theme="dark"].
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..600;1,9..144,400..600&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  /* brand signature — terracotta is THE brand colour */
  --brand:#C2562F; --brand-dark:#A8401F; --brand-soft:rgba(194,86,47,.10);
  --accent:#C2562F; --accent-soft:#E7C9B6;
  --glow:rgba(194,86,47,.22);
  --mint:#E7C9B6;
  /* channel colours — CTA buttons only */
  --wa:#1FAA53; --wa-strong:#178B43; --tg:#2AABEE; --tg-strong:#1E90D4;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --fast:.2s cubic-bezier(.4,0,.2,1); --bounce:.5s cubic-bezier(.34,1.56,.64,1);

  /* LIGHT · warm paper (default) */
  --paper:#FBF7EF; --paper-2:#F3EADA; --ink:#241F1A; --ink-soft:#6B6258; --line:#E3D8C6;
  --bg:#FBF7EF; --bg2:#F3EADA;
  --card:#FFFFFF; --card-h:#FCFAF4;
  --bord:#E3D8C6; --bord2:#D8CBB4;
  --tp:#241F1A; --ts:#6B6258; --tm:#9A9080;
  --danger:#C0392B;
  --paper-glow:#FFF6E9;
  --shadow:0 30px 60px -38px rgba(60,40,20,.35);
}
:root[data-theme="dark"]{
  /* DARK · warm ink (paper-on-ink reverse) */
  --paper:#1A1611; --paper-2:#221C16; --ink:#F3EADA; --ink-soft:#B8AD9C; --line:#3A3127;
  --bg:#1A1611; --bg2:#221C16;
  --card:#221C16; --card-h:#2A2219;
  --bord:#3A3127; --bord2:#4A4030;
  --tp:#F3EADA; --ts:#B8AD9C; --tm:#857B6C;
  --danger:#E8705F;
  --paper-glow:transparent;
  --brand-soft:rgba(194,86,47,.16);
  --shadow:0 18px 44px rgba(0,0,0,.5);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;background:var(--bg);color:var(--tp);min-height:100vh;line-height:1.55;
  display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow-x:hidden;
  background-image:radial-gradient(1100px 480px at 80% -10%, var(--paper-glow) 0%, transparent 60%);
  transition:background .3s ease,color .3s ease}
a{color:inherit;text-decoration:none}

/* ambient glow */
body::before{content:'';position:fixed;inset:-50%;width:200%;height:200%;z-index:0;pointer-events:none;opacity:.55;
  background:radial-gradient(ellipse 600px 560px at 25% 15%,var(--glow),transparent 70%),
            radial-gradient(ellipse 520px 480px at 80% 80%,var(--glow),transparent 72%)}

.container{position:relative;z-index:1;width:100%;max-width:460px;padding:24px;
  animation:rise .6s cubic-bezier(.4,0,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}

/* icons */
.ic{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ic-sm{width:16px;height:16px}

/* theme toggle (fixed corner) */
.theme-btn{position:fixed;top:20px;right:20px;z-index:5;width:40px;height:40px;border-radius:11px;
  background:var(--card);border:1px solid var(--bord);color:var(--ts);display:grid;place-items:center;cursor:pointer;
  backdrop-filter:blur(12px);transition:var(--fast)}
.theme-btn:hover{color:var(--tp);border-color:var(--bord2)}
.theme-btn .ic{width:18px;height:18px}
/* toggle icon reflects the chosen preference (dark / light / system) */
.theme-btn .moon,.theme-btn .sun,.theme-btn .sys{display:none}
:root[data-theme-pref="dark"] .theme-btn .moon{display:block}
:root[data-theme-pref="light"] .theme-btn .sun{display:block}
:root[data-theme-pref="system"] .theme-btn .sys{display:block}
:root:not([data-theme-pref]) .theme-btn .moon{display:block}

/* glass card */
.acard{background:var(--card);backdrop-filter:blur(40px) saturate(1.4);-webkit-backdrop-filter:blur(40px) saturate(1.4);
  border:1px solid var(--bord);border-radius:var(--r-xl);padding:44px 38px;box-shadow:var(--shadow)}

/* brand */
.brand{text-align:center;margin-bottom:32px}
.mark{width:62px;height:62px;border-radius:18px;background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  display:inline-grid;place-items:center;box-shadow:0 8px 24px var(--glow);margin-bottom:18px}
.mark .ic{stroke:#fff;width:31px;height:31px}
.mark.lg{width:78px;height:78px;border-radius:22px}.mark.lg .ic{width:38px;height:38px}
.brand h1{font-size:1.7rem;font-weight:800;letter-spacing:-.03em}
.brand p{font-size:.92rem;color:var(--ts);margin-top:7px;line-height:1.5}

/* messages */
.amsg{padding:13px 16px;border-radius:var(--r-sm);font-size:.85rem;font-weight:500;margin-bottom:22px;
  display:flex;gap:10px;align-items:center;animation:fade .4s ease both}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.amsg .ic{width:19px;height:19px}
.amsg.ok{background:var(--brand-soft);border:1px solid rgba(194,86,47,.18);color:var(--brand)}
.amsg.err{background:rgba(192,57,43,.09);border:1px solid rgba(192,57,43,.2);color:var(--danger)}

/* fields */
.field{margin-bottom:20px}
.field-label{display:block;font-size:.78rem;font-weight:600;color:var(--ts);text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:10px}
.phone-group{display:flex;gap:10px}
.cc,.inp{background:var(--bg2);border:1.5px solid var(--bord);border-radius:var(--r-sm);
  font-family:inherit;font-size:.95rem;font-weight:500;color:var(--tp);transition:var(--fast)}
.cc{padding:14px 14px;min-width:104px;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9ab0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.inp{flex:1;width:100%;padding:14px 16px}
.inp::placeholder{color:var(--tm);font-weight:400}
.cc:focus,.inp:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--glow)}
.inp:hover:not(:focus){border-color:var(--bord2)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;font-family:inherit;
  font-weight:600;font-size:.95rem;padding:15px 24px;border:none;border-radius:12px;cursor:pointer;
  transition:var(--fast);position:relative;overflow:hidden}
.btn .ic{width:18px;height:18px}
.btn-p{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;box-shadow:0 4px 20px var(--glow)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(194,86,47,.45)}
.btn-p:active{transform:translateY(0)}
.btn-p:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-g{background:var(--card);border:1px solid var(--bord);color:var(--tp)}
.btn-g:hover{background:var(--card-h);border-color:var(--bord2)}

/* register channel chooser */
.channel-choice{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.channel-option{width:100%;display:flex;align-items:center;gap:13px;text-align:left;padding:15px;
  border:1px solid var(--bord);border-radius:var(--r-md);background:var(--card-h);color:var(--tp);
  transition:var(--fast)}
a.channel-option:hover,button.channel-option:hover{border-color:var(--bord2);transform:translateY(-1px)}
button.channel-option{font:inherit;cursor:pointer}
button.channel-option:focus-visible,a.channel-option:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--glow)}
.channel-option.is-selected{border-color:rgba(31,170,83,.45);background:rgba(31,170,83,.07)}
.channel-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;color:#fff}
.channel-icon .ic{width:20px;height:20px;fill:currentColor;stroke:none}
.channel-tg .channel-icon{background:var(--tg)}
.channel-wa .channel-icon{background:var(--wa)}
.channel-copy{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.channel-copy strong{font-size:.96rem;font-weight:700;color:var(--tp);line-height:1.25}
.channel-copy span{font-size:.84rem;color:var(--ts);line-height:1.35}
.channel-arrow{width:17px;height:17px;color:var(--tm)}
.js .phone-form.is-collapsed{display:none}
.phone-form{animation:fade .24s ease both}

/* spinner / loading */
.spinner{position:absolute;width:20px;height:20px;border:2.5px solid rgba(255,255,255,.25);border-top-color:#fff;
  border-radius:50%;animation:spin .65s linear infinite;display:none}
.btn.loading .spinner{display:block}
.btn.loading .btn-text,.btn.loading .ic{opacity:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* OTP inputs */
.otp-row{display:flex;gap:10px;justify-content:center;margin:8px 0 4px}
.otp-box{width:50px;height:60px;background:var(--bg2);border:1.5px solid var(--bord);border-radius:var(--r-sm);
  text-align:center;font-family:inherit;font-size:1.5rem;font-weight:700;color:var(--tp);caret-color:var(--brand);
  transition:var(--fast)}
.otp-box:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--glow);transform:translateY(-2px)}
.otp-box.filled{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}

/* access-code display (verify page) */
.code-row{display:flex;gap:10px;justify-content:center;margin:30px 0}
.code-digit{width:54px;height:68px;display:grid;place-items:center;background:var(--bg2);
  border:1.5px solid rgba(194,86,47,.28);border-radius:var(--r-sm);font-size:1.8rem;font-weight:800;color:var(--brand);
  text-shadow:0 0 20px var(--glow);animation:pop .5s var(--bounce) both}
.code-digit:nth-child(1){animation-delay:.05s}.code-digit:nth-child(2){animation-delay:.1s}
.code-digit:nth-child(3){animation-delay:.15s}.code-digit:nth-child(4){animation-delay:.2s}
.code-digit:nth-child(5){animation-delay:.25s}.code-digit:nth-child(6){animation-delay:.3s}
@keyframes pop{from{opacity:0;transform:scale(.5) translateY(10px)}to{opacity:1;transform:none}}
.copy-feedback{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:500;color:var(--brand);
  opacity:0;transition:var(--fast);margin-top:10px}
.copy-feedback.show{opacity:1}
.copy-feedback .ic{width:14px;height:14px}

/* steps (verify instructions) */
.steps-mini{margin-top:28px;padding-top:24px;border-top:1px solid var(--bord);display:flex;flex-direction:column;gap:14px}
.steps-mini .s{display:flex;gap:13px;align-items:flex-start;text-align:left}
.steps-mini .n{flex-shrink:0;width:27px;height:27px;border-radius:50%;background:var(--brand-soft);
  border:1px solid rgba(194,86,47,.2);color:var(--brand);display:grid;place-items:center;font-size:.74rem;font-weight:700}
.steps-mini .t{font-size:.88rem;color:var(--ts);line-height:1.55;padding-top:2px}
.steps-mini .t strong{color:var(--tp);font-weight:600}

/* misc auth bits */
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--tm);margin-bottom:18px;transition:var(--fast)}
.back-link:hover{color:var(--tp)}
.phone-info{text-align:center;margin-bottom:24px;font-size:.88rem;color:var(--ts)}
.phone-info strong{color:var(--tp);font-weight:600}
.resend{text-align:center;margin-top:16px}
.resend button{background:none;border:none;color:var(--tm);font-family:inherit;font-size:.82rem;cursor:pointer;
  padding:4px;transition:var(--fast)}
.resend button:hover:not(:disabled){color:var(--brand)}
.resend button:disabled{cursor:not-allowed;opacity:.5}
.foot-note{text-align:center;margin-top:24px;font-size:.82rem;color:var(--tm);display:flex;align-items:center;justify-content:center;gap:7px}
.foot-note .ic{width:14px;height:14px;color:var(--brand)}

/* error page */
.center{text-align:center}
.err-icon{width:80px;height:80px;border-radius:50%;background:rgba(192,57,43,.09);border:1px solid rgba(192,57,43,.18);
  display:inline-grid;place-items:center;margin-bottom:22px;animation:shake .6s ease both}
.err-icon .ic{width:38px;height:38px;color:var(--danger)}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.err-msg{font-size:1rem;color:var(--ts);line-height:1.6;margin-bottom:26px}
.wa-hint{display:inline-flex;align-items:center;gap:9px;background:var(--brand-soft);border:1px solid rgba(194,86,47,.16);
  border-radius:var(--r-sm);padding:13px 18px;font-size:.85rem;color:var(--ts);margin-bottom:22px}
.wa-hint .ic{width:18px;height:18px;color:var(--brand)}
.wa-hint code{background:rgba(194,86,47,.16);color:var(--brand);padding:3px 9px;border-radius:6px;font-weight:700}

@media(max-width:520px){
  .container{padding:16px}
  .acard{padding:34px 20px;border-radius:var(--r-lg)}
  .otp-box{width:40px;height:52px;font-size:1.2rem}
  .otp-row{gap:8px}
  .code-digit{width:42px;height:56px;font-size:1.4rem}
  .code-row{gap:8px}
  .cc{min-width:92px}
}

@media(max-width:390px){
  .acard{padding:30px 16px}
  .otp-box{width:34px;height:46px;font-size:1.1rem}
  .otp-row{gap:6px}
  .code-digit{width:36px;height:50px;font-size:1.3rem}
  .code-row{gap:6px}
  .phone-group{gap:6px}
  .cc{min-width:86px;padding:14px 10px;padding-right:24px;font-size:.88rem}
}
::selection{background:rgba(194,86,47,.3);color:#fff}

/* ============================================================
   D-01 brand layer (WP-06) — wordmark, display type, channel CTAs
   ============================================================ */
.brand h1,h1,h2,h3{font-family:var(--display);letter-spacing:-.02em}
/* the typeset wordmark IS the mark: TaLi. with a terracotta dot + ledger-rule */
.wordmark{font-family:var(--display);font-weight:600;font-size:1.5rem;letter-spacing:-.01em;
  color:var(--ink);position:relative;display:inline-block;line-height:1;padding-bottom:6px}
.wordmark .dot{color:var(--brand)}
.wordmark::after{content:"";position:absolute;left:1px;right:14px;bottom:2px;height:2px;
  background:var(--brand);opacity:.5;border-radius:2px}
.wordmark.lg{font-size:2.1rem}.wordmark.sm{font-size:1.18rem}
.ledger-rule{height:2px;border:0;border-radius:2px;background:var(--brand);opacity:.5;margin:0}
/* channel CTA buttons — the ONLY place WhatsApp green / Telegram blue appear */
.btn-wa{background:var(--wa);color:#fff;border:none}
.btn-wa:hover{background:var(--wa-strong);color:#fff;box-shadow:0 8px 24px rgba(31,170,83,.32)}
.btn-tg{background:var(--tg);color:#fff;border:none}
.btn-tg:hover{background:var(--tg-strong);color:#fff;box-shadow:0 8px 24px rgba(42,171,238,.32)}
/* channel brand glyphs are filled (the rest of the icon set is stroked) */
.btn-wa .ic,.btn-tg .ic{fill:currentColor;stroke:none}
/* stacked channel CTAs on the register "done" step */
.cta-stack{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.cta-stack .foot-note{margin-top:6px}