/* ============================================================
   LingMirror AI — design system  (paper-white + violet)
   One bold thing: the morphing AI lifeform. Everything else is calm.
   Legacy class names (.nav .hero .card .btn .grid .section ...) are
   re-skinned here so older pages inherit the new look automatically.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --paper:#FBFAF7;
  --surface:#FFFFFF;
  --ink:#10141C;
  --ink-2:#2A303C;
  --slate:#5B6472;
  --faint:#8A8F9C;
  --line:#ECE9E1;
  --line-2:#E2DED4;
  --iris:#6D5EF8;
  --iris-d:#574AD6;
  --iris-soft:#EEEBFE;
  --save:#0F9F6B;
  --save-soft:#E5F6EF;
  --warn:#C9612E;
  --bad:#D6455B;
  --ok:#0F9F6B;
  --spirit-1:#7A5CFF;
  --spirit-2:#36C9E7;
  --spirit-3:#9BE15D;
  --shadow-sm:0 1px 2px rgba(16,20,28,.06), 0 2px 6px rgba(16,20,28,.05);
  --shadow-md:0 8px 24px rgba(16,20,28,.08), 0 2px 6px rgba(16,20,28,.05);
  --shadow-lg:0 24px 60px rgba(16,20,28,.12);
  --r-card:20px; --r-btn:12px; --r-pill:999px;
  --max:1180px;
  --display:'Bricolage Grotesque',ui-sans-serif,system-ui,Segoe UI,Arial;
  --body:'Inter',ui-sans-serif,system-ui,Segoe UI,Arial;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
::selection{background:var(--iris-soft)}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; line-height:1.05; letter-spacing:-.02em; margin:0}
p{margin:0}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:14px 24px;
  background:rgba(251,250,247,.82); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.nav .inner{max-width:var(--max); margin:0 auto; width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px}
.brand{display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-.02em; color:var(--ink)}
.brand .mark{width:26px; height:26px; flex:0 0 auto}
.navlinks{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.navlinks a{padding:8px 12px; border-radius:10px; color:var(--slate); font-weight:500; font-size:14.5px; transition:.15s}
.navlinks a:hover{color:var(--ink); background:var(--iris-soft)}

/* ---------- buttons ---------- */
.btn,.button,button{
  font-family:var(--body); font-weight:600; font-size:15px;
  border:0; border-radius:var(--r-btn); padding:12px 18px; cursor:pointer;
  background:var(--iris); color:#fff; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .12s ease, box-shadow .15s ease, background .15s ease;
  box-shadow:0 6px 18px rgba(109,94,248,.28);
}
.btn:hover,button:hover{background:var(--iris-d); transform:translateY(-1px); box-shadow:0 10px 26px rgba(109,94,248,.36)}
.btn:active,button:active{transform:translateY(0)}
.btn.secondary,.btn.ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line-2); box-shadow:var(--shadow-sm)}
.btn.secondary:hover,.btn.ghost:hover{background:#fff; border-color:#d6d1c5; transform:translateY(-1px); box-shadow:var(--shadow-md)}
.btn.lg{padding:15px 24px; font-size:16px; border-radius:14px}
.btn.sm{padding:9px 13px; font-size:13.5px}
.btn.block{width:100%}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none!important}
.linklike{color:var(--iris); font-weight:600; cursor:pointer}
.linklike:hover{text-decoration:underline}

/* ---------- chips / pills / badges ---------- */
.pill{display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:var(--surface); color:var(--slate); font-size:13px; font-weight:500; margin:3px}
.pill .dot{width:7px; height:7px; border-radius:50%; background:var(--save)}
.badge{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600}
.badge.save{background:var(--save-soft); color:var(--save)}
.badge.iris{background:var(--iris-soft); color:var(--iris-d)}
.eyebrow{font-family:var(--mono); text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:700; color:var(--iris-d)}

/* ---------- sections ---------- */
.section{padding:84px 0}
.section.tight{padding:56px 0}
.section .wrap > .head{max-width:660px; margin-bottom:40px}
.section h2{font-size:clamp(28px,4vw,42px)}
.section .sub{color:var(--slate); font-size:18px; margin-top:14px}
.center{text-align:center} .center .head{margin-left:auto;margin-right:auto}
.muted{color:var(--slate)}
.lead{font-size:20px; color:var(--ink-2); line-height:1.6}
.zh{color:var(--slate)} /* legacy bilingual sublines, kept subtle */

/* ---------- cards / grid ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.card,.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:24px; box-shadow:var(--shadow-sm); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card.hover:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--line-2)}
.card h3{font-size:19px; margin-bottom:6px}
.card .ic{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--iris-soft); color:var(--iris-d); margin-bottom:14px}
.card .ic svg{width:22px; height:22px}

/* ---------- hero ---------- */
.hero{padding:64px 0 40px}
.hero .grid2{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
.hero h1{font-size:clamp(38px,5.4vw,64px); font-weight:800}
.hero h1 .g{background:linear-gradient(100deg,var(--spirit-1),var(--spirit-2) 55%,var(--spirit-3)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .lead{margin:22px 0 8px; max-width:560px}
.hero .cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.trust{display:flex; gap:8px; flex-wrap:wrap; margin-top:22px}

/* ---------- the AI lifeform (signature) ---------- */
.spirit-stage{position:relative; min-height:420px; display:grid; place-items:center; isolation:isolate}
.spirit{
  position:relative; width:300px; height:300px; cursor:pointer; touch-action:manipulation;
  filter:drop-shadow(0 30px 60px rgba(109,94,248,.28));
}
.spirit .body{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 120% at 30% 25%, rgba(255,255,255,.9), transparent 40%),
    conic-gradient(from 0deg, var(--spirit-1), var(--spirit-2), var(--spirit-3), var(--spirit-1));
  border-radius:54% 46% 58% 42% / 52% 56% 44% 48%;
  animation:morph 9s ease-in-out infinite, spin 22s linear infinite, hue 16s linear infinite;
  mix-blend-mode:normal;
}
.spirit .gloss{
  position:absolute; inset:14% 40% 55% 16%;
  background:radial-gradient(closest-side, rgba(255,255,255,.85), transparent);
  border-radius:50%; filter:blur(4px);
}
.spirit .ring{
  position:absolute; inset:-26px; border-radius:50%;
  border:1px dashed rgba(109,94,248,.35); animation:spin 40s linear infinite reverse;
}
.spirit.poke .body{animation:morph 9s ease-in-out infinite, spin 22s linear infinite, hue 16s linear infinite, squish .5s ease}
.spirit-speech{
  position:absolute; left:50%; bottom:6%; transform:translateX(-50%);
  background:var(--surface); border:1px solid var(--line-2); box-shadow:var(--shadow-md);
  padding:9px 14px; border-radius:14px; font-size:13.5px; color:var(--ink-2); white-space:nowrap;
  opacity:0; transition:opacity .25s ease, transform .25s ease; pointer-events:none; max-width:80vw;
}
.spirit-speech.show{opacity:1; transform:translate(-50%,-6px)}
@keyframes morph{
  0%,100%{border-radius:54% 46% 58% 42% / 52% 56% 44% 48%}
  33%{border-radius:42% 58% 40% 60% / 60% 42% 58% 40%}
  66%{border-radius:60% 40% 52% 48% / 44% 60% 40% 56%}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes hue{to{filter:hue-rotate(360deg)}}
@keyframes squish{0%{transform:scale(1)}40%{transform:scale(.9,1.08)}100%{transform:scale(1)}}

/* ---------- inputs ---------- */
label{display:block; font-size:13.5px; font-weight:600; color:var(--ink-2); margin:14px 0 6px}
.input,input,textarea,select{
  width:100%; font-family:var(--body); font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-2); border-radius:12px; padding:12px 14px;
  transition:border-color .15s, box-shadow .15s; outline:none;
}
input::placeholder,textarea::placeholder{color:var(--faint)}
.input:focus,input:focus,textarea:focus,select:focus{border-color:var(--iris); box-shadow:0 0 0 4px var(--iris-soft)}
textarea{min-height:130px; resize:vertical; line-height:1.5}
.field{margin-bottom:4px}

/* ---------- stat / numbers ---------- */
.stat{font-family:var(--display); font-size:30px; font-weight:800; letter-spacing:-.02em}
.num{font-family:var(--mono); font-weight:700}
.price-big{font-family:var(--mono); font-size:clamp(40px,7vw,64px); font-weight:700; color:var(--iris-d); line-height:1}

/* ---------- result / output ---------- */
.result{white-space:pre-wrap; background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:16px; min-height:84px; font-size:14.5px; color:var(--ink-2); line-height:1.6}

/* ---------- pricing ---------- */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; align-items:stretch}
.plan{display:flex; flex-direction:column; position:relative}
.plan.feature{border:1.5px solid var(--iris); box-shadow:var(--shadow-md)}
.plan .flag{position:absolute; top:-12px; left:24px}
.plan .name{font-family:var(--display); font-weight:700; font-size:18px}
.plan .price{font-family:var(--mono); font-weight:700; font-size:34px; margin:10px 0 2px}
.plan .price small{font-size:14px; color:var(--slate); font-weight:400}
.plan ul{list-style:none; padding:0; margin:16px 0; display:grid; gap:9px}
.plan li{display:flex; gap:9px; align-items:flex-start; font-size:14px; color:var(--ink-2)}
.plan li svg{flex:0 0 auto; width:17px; height:17px; color:var(--save); margin-top:2px}
.plan .foot{margin-top:auto}

/* ---------- estimator ---------- */
.estimator{display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:center}
.seg{display:inline-flex; padding:4px; gap:4px; background:var(--paper); border:1px solid var(--line-2); border-radius:12px}
.seg button{background:transparent; color:var(--slate); box-shadow:none; padding:9px 14px; border-radius:9px; font-size:14px}
.seg button:hover{background:transparent; color:var(--ink); transform:none}
.seg button.on{background:var(--surface); color:var(--iris-d); box-shadow:var(--shadow-sm)}
input[type=range]{-webkit-appearance:none; appearance:none; height:6px; padding:0; background:var(--line-2); border:0; border-radius:999px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--iris); border:3px solid #fff; box-shadow:var(--shadow-sm); cursor:pointer}
input[type=range]::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:var(--iris); border:3px solid #fff; cursor:pointer}
.est-out{text-align:center; background:linear-gradient(180deg,var(--iris-soft),#fff); border:1px solid var(--line-2); border-radius:18px; padding:26px}
.est-out .lbl{font-size:13px; color:var(--slate); margin-bottom:6px}

/* ---------- steps ---------- */
.steps{counter-reset:s; display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.step{position:relative; padding-top:8px}
.step .n{font-family:var(--mono); font-weight:700; color:var(--iris); font-size:14px}
.step h3{margin:6px 0 6px; font-size:19px}

/* ---------- table ---------- */
table{width:100%; border-collapse:collapse; font-size:14.5px}
th,td{text-align:left; padding:12px 10px; border-bottom:1px solid var(--line)}
th{color:var(--slate); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.04em}
tbody tr:hover{background:var(--paper)}

/* ---------- toast ---------- */
#lm-toasts{position:fixed; right:18px; bottom:18px; z-index:80; display:flex; flex-direction:column; gap:10px; align-items:flex-end}
.toast{background:var(--ink); color:#fff; padding:12px 16px; border-radius:12px; font-size:14px; box-shadow:var(--shadow-lg);
  display:flex; gap:10px; align-items:center; max-width:340px; animation:toastin .2s ease; }
.toast.ok{background:#0E7A53} .toast.bad{background:#B23A4E} .toast.info{background:var(--iris-d)}
@keyframes toastin{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ---------- persistent user bar (bottom-right) ---------- */
#lm-userbar{position:fixed; right:18px; bottom:18px; z-index:60;
  background:var(--surface); border:1px solid var(--line-2); border-radius:16px; box-shadow:var(--shadow-lg);
  padding:12px 14px; display:none; gap:14px; align-items:center; max-width:min(92vw,420px)}
#lm-userbar.show{display:flex}
#lm-userbar .av{width:36px; height:36px; border-radius:10px; flex:0 0 auto; background:
  conic-gradient(from 0deg,var(--spirit-1),var(--spirit-2),var(--spirit-3),var(--spirit-1)); }
#lm-userbar .who{font-size:13px; line-height:1.3; min-width:0}
#lm-userbar .who b{display:block; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:150px}
#lm-userbar .bal{font-family:var(--mono); font-weight:700; color:var(--iris-d)}
#lm-userbar .ub-actions{display:flex; gap:6px; margin-left:auto}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line); padding:54px 0; color:var(--slate); font-size:14px; margin-top:40px; background:var(--surface)}
.footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px}
.footer a{color:var(--slate)} .footer a:hover{color:var(--ink)}
.footer h4{font-family:var(--body); font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); margin-bottom:12px}
.footer .lnk{display:block; padding:4px 0}
.footer .legal{margin-top:34px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--faint)}

/* ---------- auth split ---------- */
.auth{min-height:calc(100vh - 60px); display:grid; grid-template-columns:1fr 1fr}
.auth .side{background:linear-gradient(160deg,#0E1330,#1A1147 70%,#241060); color:#fff; padding:56px; display:flex; flex-direction:column; justify-content:space-between}
.auth .side h2{color:#fff; font-size:34px}
.auth .form{display:grid; place-items:center; padding:40px 24px}
.auth .form .box{width:100%; max-width:380px}
.gbtn{width:100%; background:#fff; color:var(--ink); border:1px solid var(--line-2); box-shadow:var(--shadow-sm); font-weight:600}
.gbtn:hover{background:#fff; border-color:#d6d1c5}
.sep{display:flex; align-items:center; gap:12px; color:var(--faint); font-size:13px; margin:18px 0}
.sep::before,.sep::after{content:''; flex:1; height:1px; background:var(--line)}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* ---------- utility ---------- */
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.between{justify-content:space-between}
.stack{display:grid; gap:12px}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.danger{color:var(--bad)} .ok{color:var(--ok)}
.hide{display:none!important}
.spin{animation:spin .8s linear infinite; display:inline-block}

/* ---------- responsive ---------- */
@media(max-width:920px){
  .hero .grid2{grid-template-columns:1fr; gap:8px}
  .spirit-stage{min-height:320px; order:-1}
  .spirit{width:230px; height:230px}
  .estimator{grid-template-columns:1fr}
  .grid.cols-3,.grid.cols-4{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .auth{grid-template-columns:1fr} .auth .side{display:none}
  .footer .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  .section{padding:56px 0}
  .navlinks{display:none}
  .grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .footer .cols{grid-template-columns:1fr}
  #lm-userbar .ub-actions .btn span{display:none}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; scroll-behavior:auto!important}
  .reveal{opacity:1; transform:none}
  .spirit .body{animation:none!important}
}