/* v37 pagina de start: un ecran de telefon, fara scroll. */
.onbpage .gtop,.onbpage .gback{display:none!important}
html:has(.onbpage),.onbpage{background:#f6f4f2!important;overflow:hidden}
.onb[data-g='']{background:linear-gradient(180deg,#faf8f6,#efebe7)}
.onbpage main{max-width:460px;margin:0 auto}
.onb{--acc:#1e1f22;--soft:#ecebea;height:100dvh;display:flex;flex-direction:column;gap:12px;padding:calc(env(safe-area-inset-top) + 18px) 16px calc(env(safe-area-inset-bottom) + 14px);box-sizing:border-box;transition:background .6s ease}
.onb[data-g=w]{--acc:#b8527e;--soft:#f6dbe6;background:linear-gradient(180deg,#fbeef3 0%,#f7e1ea 100%)}
.onb[data-g=m]{--acc:#3d72ad;--soft:#dbe7f5;background:linear-gradient(180deg,#eef4fb 0%,#e0ebf7 100%)}
.ohd h1{font:700 27px/1.15 Inter,system-ui,sans-serif;letter-spacing:-.02em;margin:0;color:#1b1c20;min-height:31px}
.ohd .caret{display:inline-block;width:3px;height:24px;margin-left:3px;vertical-align:-3px;background:var(--acc);border-radius:2px;animation:oblink 1s steps(1) infinite}
.ohd p{margin:6px 0 0;font:500 14px/1.35 Inter,sans-serif;color:rgba(27,28,32,.6)}
@keyframes oblink{50%{opacity:0}}
/* Pas 1: gen */
.ogender{flex:1;min-height:0;display:flex;gap:12px}
.ocard{flex:1;position:relative;border:0;padding:0;border-radius:24px;overflow:hidden;background:#ddd;cursor:pointer;
  box-shadow:0 14px 34px rgba(0,0,0,.12);opacity:0;transform:translateY(24px) scale(.97);animation:oin .7s cubic-bezier(.2,.8,.2,1) var(--d) forwards;transition:transform .25s}
.ocard:active{transform:scale(.97)}
.ocard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:okb 9s ease-in-out infinite alternate}
.ocard b{position:absolute;left:0;right:0;bottom:0;padding:44px 14px 16px;font:700 20px Inter,sans-serif;color:#fff;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.ocard b::after{content:'→';float:right;transition:transform .25s}
.ocard:hover b::after{transform:translateX(4px)}
.ocard.go{animation:ogo .45s ease forwards}
@keyframes oin{to{opacity:1;transform:none}}
@keyframes okb{to{transform:scale(1.06)}}
@keyframes ogo{to{transform:scale(1.04);opacity:0}}
/* Pas 2: marimi pe model */
.ofit{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:50% 1fr;gap:10px;animation:oin .55s ease forwards;opacity:0;transform:translateY(16px)}
.omodel{position:relative;border-radius:22px;overflow:hidden;background:var(--soft);box-shadow:0 10px 30px rgba(0,0,0,.10)}
.omodel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.glow{position:absolute;left:14%;right:14%;top:var(--t,20%);height:var(--h,20%);border-radius:40%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 40%,transparent),transparent);
  box-shadow:0 0 0 2px color-mix(in srgb,#fff 70%,transparent) inset,0 0 28px 6px color-mix(in srgb,var(--acc) 45%,transparent);
  mix-blend-mode:multiply;transition:top .55s cubic-bezier(.2,.8,.2,1),height .55s cubic-bezier(.2,.8,.2,1),opacity .3s;animation:opulse 1.6s ease-in-out infinite}
.glow.off{opacity:0}
@keyframes opulse{50%{box-shadow:0 0 0 2px #fff inset,0 0 40px 12px color-mix(in srgb,var(--acc) 55%,transparent)}}
.otag{position:absolute;left:50%;top:calc(var(--t,20%) + var(--h,20%) / 2);transform:translate(-50%,calc(-50% - 18px));background:#fff;color:var(--acc);font:700 12px Inter,sans-serif;padding:5px 10px;border-radius:99px;box-shadow:0 4px 14px rgba(0,0,0,.15);transition:top .55s cubic-bezier(.2,.8,.2,1);white-space:nowrap}
.otag:empty{display:none}
.osizes{position:relative;min-height:0}
/* v38: fiecare rand sta pe aceeasi axa cu partea corpului de pe model (top calculat in onb.js). */
.orow{position:absolute;left:0;right:0;top:0;transform:translateY(var(--y,0));transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s,box-shadow .3s}
.oaxis{position:absolute;left:25%;width:calc(25% + 10px);top:0;height:0;border-top:2px dashed var(--acc);opacity:.85;pointer-events:none;transform:translateY(var(--ay,0));transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
.oaxis::before{content:'';position:absolute;left:-5px;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 25%,transparent)}
.oaxis.off{opacity:0}
.orow{background:rgba(255,255,255,.78);backdrop-filter:blur(10px);border-radius:16px;padding:9px 9px 9px;transition:opacity .3s,box-shadow .3s}
.orow.on{box-shadow:0 0 0 2px var(--acc),0 8px 20px rgba(0,0,0,.08)}
.orow.lock{opacity:.42}
.orow.lock .ortl{pointer-events:none}
.ortl{display:grid;grid-template-columns:1fr auto;width:100%;border:0;background:none;padding:0;text-align:left;cursor:pointer;color:#1b1c20}
.ortl b{font:700 15px Inter,sans-serif}
.ortl small{grid-column:1;font:500 11px Inter,sans-serif;color:rgba(27,28,32,.5)}
.ortl em{grid-row:1/3;grid-column:2;align-self:center;font:700 13px Inter,sans-serif;font-style:normal;color:var(--acc)}
.ochips{display:none;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.orow.on .ochips{display:grid;animation:oin .35s ease forwards;opacity:0;transform:translateY(6px)}
.ochips button{height:38px;border-radius:11px;border:1px solid rgba(27,28,32,.12);background:#fff;font:600 14px Inter,sans-serif;color:#1b1c20;cursor:pointer;transition:transform .15s,background .2s,color .2s}
.ochips button:active{transform:scale(.92)}
.ochips button.sel{background:var(--acc);border-color:var(--acc);color:#fff;animation:opop .3s ease}
@keyframes opop{40%{transform:scale(1.12)}}
/* Jos: termeni + buton */
.ofoot{display:flex;flex-direction:column;gap:10px;animation:oin .55s ease .1s forwards;opacity:0}
/* v50: termenii = card mare, apasabil oriunde; casuta mare animata + mana care arata unde sa apesi */
.otc{display:flex;flex-direction:column;gap:4px}
.oterms{position:relative;display:flex;gap:12px;align-items:center;min-height:60px;padding:10px 14px;border-radius:16px;background:#fff;border:2px solid rgba(27,28,32,.12);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .3s,border-color .3s,background .3s,transform .15s}
.oterms:active{transform:scale(.98)}
.oterms input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.oterms span{display:flex;flex-direction:column;gap:2px;flex:1}
.oterms b{font:700 15px/1.25 Inter,sans-serif;color:#1b1c20}
.oterms small{font:500 12px Inter,sans-serif;color:rgba(27,28,32,.55)}
.obox{flex:none;width:32px;height:32px;border-radius:10px;border:2.5px solid var(--acc);background:#fff;display:grid;place-items:center;transition:background .25s,transform .25s}
.obox::after{content:'';width:9px;height:16px;border:solid #fff;border-width:0 3.5px 3.5px 0;transform:rotate(45deg) scale(0);margin-top:-4px;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.oterms.done{border-color:var(--acc);background:rgba(255,255,255,.95)}
.oterms.done .obox{background:var(--acc);animation:opop .35s ease}
.oterms.done .obox::after{transform:rotate(45deg) scale(1)}
.oterms.done small{color:var(--acc)}
.oterms.dim{opacity:.45}
.oterms.ask{border-color:var(--acc);animation:oring 1.6s ease-in-out infinite}
.ohand{display:none;font-style:normal;font-size:24px;line-height:1}
.oterms.ask .ohand{display:block;animation:ohand 1s ease-in-out infinite}
.oread{align-self:center;font:600 12px Inter,sans-serif;color:var(--acc);text-decoration:underline;padding:6px 10px}
@keyframes oring{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 45%,transparent)}50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--acc) 0%,transparent)}}
@keyframes ohand{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.oterms.shake{animation:onudge .45s ease 1!important}
.orow.shake{animation:oflash .4s ease 2!important}
@keyframes oflash{50%{box-shadow:0 0 0 4px var(--acc)}}
/* pasul curent: randul de completat pulseaza usor */
.orow.next:not(.lock){box-shadow:0 0 0 2px var(--acc);animation:oring 1.8s ease-in-out infinite}
@keyframes onudge{30%{transform:translateX(-4px)}70%{transform:translateX(4px)}}
.obtns{display:flex;gap:10px}
.oback{width:52px;height:52px;border-radius:16px;border:0;background:rgba(255,255,255,.8);display:grid;place-items:center;cursor:pointer}
.oback svg{width:22px;height:22px;stroke:#1b1c20;fill:none;stroke-width:2}
.ogo{flex:1;height:52px;border-radius:16px;border:0;background:var(--acc);color:#fff;font:700 16px Inter,sans-serif;cursor:pointer;transition:opacity .3s,transform .15s;position:relative;overflow:hidden}
.ogo:disabled,.ogo.off{opacity:.5;font-size:15px}
.ogo:not(:disabled):not(.off)::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);animation:oshine 2.2s ease-in-out infinite}
.ogo:not(.off):active{transform:scale(.97)}
@keyframes oshine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.odots{display:flex;justify-content:center;gap:6px}
.odots i{width:7px;height:7px;border-radius:9px;background:rgba(27,28,32,.15);transition:all .3s}
.odots i.ok{background:var(--acc);width:18px}
.onb.leave{animation:ogo .4s ease forwards}
@media (max-height:640px){.ohd h1{font-size:22px}.ochips button{height:32px}.ohd p{display:none}}
@media (prefers-reduced-motion:reduce){.onb *,.onb{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}}
/* v39: profilul de marimi (/marimi) */
.oedit .ohd h1{font-size:25px}
.otabs{display:flex;gap:6px;align-items:center}
.otabs>button,.ogsw button{border:0;border-radius:99px;padding:8px 13px;font:600 13px Inter,sans-serif;background:rgba(255,255,255,.7);color:#1b1c20;cursor:pointer;transition:background .2s,color .2s}
.otabs>button.on{background:#1b1c20;color:#fff}
.ogsw{margin-left:auto;display:flex;background:rgba(255,255,255,.7);border-radius:99px;padding:3px}
.ogsw button{padding:6px 10px;background:none;font-size:12px}
.ogsw button.on{background:var(--acc);color:#fff}
.ocmr{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 6px;padding:7px 9px;cursor:text}
.ocmr b{font:700 13px Inter,sans-serif;color:#1b1c20}
.ocmr small{grid-column:1/3;font:500 10.5px Inter,sans-serif;color:rgba(27,28,32,.5);display:none}
.ocmr.on small{display:block}
.ocmr span{display:flex;align-items:center;gap:3px}
.ocmr input{width:54px;height:32px;border:1px solid rgba(27,28,32,.14);border-radius:9px;text-align:center;font:700 15px Inter,sans-serif;color:var(--acc);background:#fff;-moz-appearance:textfield}
.ocmr input::-webkit-outer-spin-button,.ocmr input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ocmr input:focus{outline:2px solid var(--acc);outline-offset:1px}
.ocmr i{font:600 11px Inter,sans-serif;font-style:normal;color:rgba(27,28,32,.5);width:20px}
.oreco{display:flex;align-items:center;gap:10px;width:100%;border:0;border-radius:14px;padding:11px 12px;background:#fff;box-shadow:0 0 0 2px var(--acc);cursor:pointer;text-align:left;animation:oin .4s ease forwards}
.oreco span{flex:1;font:600 13px/1.3 Inter,sans-serif;color:#1b1c20}
.oreco b{font:700 13px Inter,sans-serif;color:#fff;background:var(--acc);padding:7px 12px;border-radius:99px}
.oreco.done{box-shadow:none}.oreco.done b{background:none;color:var(--acc)}
.oedit .oback{text-decoration:none}

/* v43: pasul Varsta (dupa gen) si randul Varsta din /marimi */
.oage{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:10px}
.oage button{display:flex;align-items:baseline;justify-content:space-between;border:0;border-radius:18px;padding:18px 20px;background:#fff;color:#1e1f22;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.07);font:700 20px Inter,sans-serif;opacity:0;transform:translateY(12px);animation:oin .45s ease forwards;animation-delay:var(--d,0s)}
.oage button small{font:500 14px Inter,sans-serif;color:#777}
.oage button:active,.oage button.sel{background:var(--acc);color:#fff}
.oage button.sel small{color:#fff}
.oagepick{display:flex;align-items:center;gap:6px;overflow-x:auto;padding:2px 0}
.oagepick span{font:600 13px Inter,sans-serif;color:#555;margin-right:2px}
.oagepick button{flex:none;border:0;border-radius:99px;padding:8px 11px;background:#fff;font:600 13px Inter,sans-serif;color:#1e1f22;cursor:pointer}
.oagepick button.sel{background:var(--acc);color:#fff}
.oage[hidden]{display:none}
/* v47: iPhone mareste pagina la focus pe campuri sub 16px si strica asezarea randurilor pe model. */
input,select,textarea{font-size:16px!important}

.ofoot{padding:14px 16px calc(env(safe-area-inset-bottom) + 16px);font:400 11px/1.5 Inter,system-ui,sans-serif;color:#77736f;text-align:center;background:#efebe7}
.ofoot a{color:inherit;text-decoration:underline}