:root{--g:#1ea446;--gd:#0d6b34;--gdd:#0b4f2a;--b:#1b6fe8;--bd:#0b4fc0;--ink:#12305a;--muted:#5b6b82;--line:#dbe6f3;--field:#fbfdff}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--ink);min-height:100vh;min-height:100dvh;overflow-x:hidden;
background:radial-gradient(700px 400px at 5% 0,#d9f0c2,transparent 70%),radial-gradient(900px 500px at 60% 10%,#d4e9fb,transparent 70%),linear-gradient(120deg,#eef9e4,#e7f2fd 55%,#f6faff)}
a{color:var(--b);text-decoration:none;font-weight:600}a:hover{text-decoration:underline}
:focus-visible{outline:3px solid #8db8ff;outline-offset:2px}
svg{max-width:100%}

.page{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);gap:clamp(16px,2vw,32px);max-width:1680px;margin:0 auto;min-height:100vh;min-height:100dvh}

/* ============ LEFT: marketplace ============ */
.mk{display:flex;flex-direction:column;padding:clamp(16px,2vw,30px) clamp(14px,2vw,34px) 0;gap:clamp(12px,1.4vw,20px)}
.mk-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;flex-direction:column}
.wm{display:flex;align-items:flex-end;gap:8px}
.wm svg.leafmark{width:clamp(44px,5vw,70px);height:auto;flex:none}
.wm b{font-size:clamp(46px,6vw,92px);line-height:.9;font-weight:800;font-style:italic;letter-spacing:-3px;display:block;
background:linear-gradient(90deg,var(--g) 10%,var(--b) 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.wm .on{font-size:clamp(20px,2.4vw,36px);font-weight:800;font-style:italic;color:var(--g);margin:0 0 6px -4px}
.slogan{font-style:italic;font-weight:600;color:var(--gd);font-size:clamp(14px,1.5vw,20px);margin-top:6px}
.mk-mid{display:flex;align-items:center;gap:clamp(8px,1.5vw,24px)}
.bn{font:italic 600 clamp(18px,2vw,30px)/1.15 "Segoe Script","Brush Script MT",cursive;color:var(--gd);text-align:center}
.pbadge{position:relative;transform:rotate(-9deg);font-weight:900;font-style:italic;text-transform:uppercase;line-height:1}
.pbadge span{display:block;padding:8px 14px;border-radius:8px;box-shadow:0 6px 12px rgba(0,0,0,.2)}
.pb1{background:linear-gradient(#f13a2c,#c4151c);color:#fff;font-size:clamp(14px,1.5vw,22px)}
.pb1 small{display:block;color:#ffd84a;font-size:.6em;text-align:center}
.pb2{background:linear-gradient(#ffd84a,#f3a900);color:#b3120f;font-size:clamp(14px,1.5vw,22px);margin-top:-2px;margin-left:8px}
.pct{position:absolute;right:-14px;bottom:-14px;width:40px;height:40px;border-radius:50%;background:#e8281f;color:#fff;font-style:normal;display:grid;place-items:center;font-size:22px;font-weight:900;border:3px solid #fff}

.mfeats{display:grid;grid-template-columns:repeat(5,1fr);text-align:center}
.mf{padding:2px 6px;border-right:1px solid rgba(13,107,52,.2);font-weight:700;font-size:clamp(12px,1.2vw,16px);line-height:1.2}
.mf:last-child{border:0}
.mf small{display:block;font-weight:400;color:var(--muted);font-size:.78em;margin-top:3px}
.ico{width:clamp(44px,4.4vw,62px);height:clamp(44px,4.4vw,62px);border-radius:50%;margin:0 auto 8px;display:grid;place-items:center;color:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.7),0 6px 14px rgba(0,0,0,.15)}
.ico svg{width:50%;height:50%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.c1{background:#1fa653}.c2{background:#1d78f0}.c3{background:#7c3aed}.c4{background:#f59e0b}.c5{background:#0f9b8e}

.search{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 6px 6px 16px;box-shadow:0 6px 16px rgba(30,80,160,.08)}
.search svg{width:22px;height:22px;stroke:#5d708c;fill:none;stroke-width:2;flex:none}
.search input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16px;padding:10px;color:var(--ink)}
.search input:focus{outline:none}
.search button{border:0;background:var(--b);color:#fff;font:inherit;font-weight:700;padding:11px 22px;border-radius:8px;cursor:pointer}
.search button:hover{background:var(--bd)}

.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,14px)}
.cat{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 8px 10px;border-radius:12px;color:var(--ink);box-shadow:0 4px 10px rgba(20,60,120,.08);border:1px solid rgba(255,255,255,.8)}
.cat:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 8px 16px rgba(20,60,120,.14)}
.cat .pic{font-size:clamp(34px,4vw,54px);line-height:1.1;height:clamp(46px,5vw,64px);display:grid;place-items:center}
.cat strong{font-size:clamp(13px,1.3vw,17px);margin-top:4px}
.cat small{color:var(--muted);font-size:clamp(10px,.9vw,12px);margin-top:2px}
.t1{background:#fdf1e2}.t2{background:#e9f6e6}.t3{background:#eceefb}.t4{background:#f9e8f3}.t5{background:#fdeee6}.t6{background:#e4f6f6}.t7{background:#fbe6ef}.t8{background:#e6f1fb}

.offer{display:grid;grid-template-columns:1.05fr 1.2fr 1.1fr;align-items:stretch;border-radius:14px;overflow:hidden;min-height:clamp(96px,10vw,130px);box-shadow:0 8px 18px rgba(0,0,0,.14);
background:linear-gradient(90deg,#d3101c 0 34%,#ffc928 34% 66%,#0f5c2e 66%)}
.offer>div{display:flex;flex-direction:column;justify-content:center;padding:10px clamp(10px,1.6vw,22px)}
.o1{color:#fff;font:italic 800 clamp(18px,2.2vw,32px)/1 "Segoe Script","Brush Script MT",cursive}
.o1 em{font-style:normal;font-size:1.5em}
.o2{color:#c70f14}
.o2 span{font:italic 700 clamp(14px,1.5vw,20px) "Segoe Script",cursive;color:#7a3a00}
.o2 b{font-size:clamp(34px,4.4vw,64px);font-weight:900;line-height:1;font-style:italic;color:#d4141c}
.o2 i{display:inline-block;background:#d4141c;color:#fff;font-style:normal;font-weight:800;font-size:clamp(9px,.9vw,12px);padding:3px 10px;border-radius:4px;margin-top:4px;align-self:flex-start}
.o3{color:#fff;font:italic 700 clamp(14px,1.6vw,22px)/1.2 "Segoe Script",cursive;text-align:center}
.o3 .food{font-size:clamp(20px,2.4vw,34px);margin-top:4px}

.mtrust{display:grid;grid-template-columns:repeat(4,1fr);background:linear-gradient(90deg,#0f6b34,#0b5a2e);color:#fff;border-radius:22px 22px 0 0;padding:clamp(14px,1.6vw,24px) clamp(10px,1.4vw,26px);margin-top:auto;
margin-left:calc(-1*clamp(14px,2vw,34px));margin-right:calc(-1*clamp(0px,.4vw,6px))}
.mtrust div{display:flex;align-items:center;gap:10px;font-size:clamp(12px,1.15vw,16px);line-height:1.25;padding:0 10px;border-right:1px solid rgba(255,255,255,.2)}
.mtrust div:last-child{border:0}
.mtrust svg{width:clamp(28px,2.8vw,38px);height:auto;flex:none;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ============ RIGHT: login ============ */
.side{display:flex;flex-direction:column;padding:clamp(10px,1.4vw,20px) clamp(14px,2vw,34px) 0 0}
.lang{display:flex;justify-content:flex-end;padding:6px 10px 12px}
.lang label{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
.lang svg{width:22px;height:22px;stroke:var(--b);fill:none;stroke-width:2}
.lang select{border:0;background:transparent;font:inherit;color:var(--ink);cursor:pointer}
.card{background:rgba(255,255,255,.96);border-radius:28px;padding:clamp(20px,2.4vw,34px) clamp(16px,2.6vw,38px) clamp(20px,2vw,28px);box-shadow:0 20px 50px rgba(30,80,160,.15);border:1px solid #eef3fb}
.clogo{display:flex;flex-direction:column;align-items:center}
.clogo .wm b{font-size:clamp(46px,5vw,70px)}
.clogo .wm .on{font-size:clamp(18px,1.8vw,26px)}
.clogo .wm svg.leafmark{width:clamp(36px,3.6vw,50px)}
.tagl{text-align:center;color:var(--bd);font-size:14px;margin-top:6px}
.card h2{text-align:center;font-size:clamp(26px,2.6vw,36px);font-weight:800;margin-top:clamp(14px,2vw,26px)}
.hint{text-align:center;color:var(--muted);font-size:clamp(15px,1.4vw,19px);margin:6px 0 22px}
.tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);margin-bottom:24px}
.tabs.one{grid-template-columns:1fr}
.tabs a{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 8px;color:var(--ink);font-weight:600;font-size:clamp(15px,1.4vw,18px);border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a svg{width:24px;height:24px;fill:currentColor;flex:none}
.tabs a:hover{text-decoration:none;background:#f3f8ff}
.tabs a[aria-current="page"]{color:var(--b);border-color:var(--b)}
.field{position:relative}
.field svg.lead{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:22px;height:22px;fill:#5d708c}
.field input{width:100%;min-height:50px;border:1px solid var(--line);border-radius:10px;background:var(--field);padding:0 52px 0 54px;font:inherit;font-size:16px;color:var(--ink)}
.field input::placeholder{color:#64748b}
.field input:focus{outline:none;border-color:var(--b);box-shadow:0 0 0 3px rgba(27,111,232,.15)}
.eg{font-size:14px;color:var(--muted);margin:6px 0 18px 6px}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:none;cursor:pointer;display:grid;place-items:center;border-radius:8px}
.eye svg{width:22px;height:22px;fill:none;stroke:#5d708c;stroke-width:2}
.row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin:16px 0 18px;font-size:15px}
.row label{display:flex;align-items:center;gap:10px;font-weight:600;cursor:pointer}
.row input{width:20px;height:20px;accent-color:var(--b)}
.btn{width:100%;min-height:54px;border-radius:10px;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;font:inherit;font-size:20px;font-weight:600}
.btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.btn.primary{background:linear-gradient(#1d78f5,#0a50c6);color:#fff;box-shadow:0 8px 18px rgba(27,111,232,.3)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.google{background:#fff;color:var(--bd);border:1px solid var(--line);font-size:18px}
.btn.google:hover{background:#f6faff;text-decoration:none}
.btn.google svg{stroke:none}
.or{display:flex;align-items:center;gap:14px;color:var(--muted);font-weight:600;font-size:14px;margin:18px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.reg{text-align:center;margin:18px 0;color:#41536d;font-size:16px}
.help{display:flex;align-items:center;gap:14px;background:#eef4fd;border-radius:12px;padding:16px 18px}
.help>svg{width:42px;height:42px;fill:none;stroke:var(--b);stroke-width:2;flex:none}
.help strong{display:block;color:var(--bd);font-size:19px}
.help small{color:var(--muted);font-size:14px}
.help .btn-s{margin-left:auto;background:var(--b);color:#fff;padding:11px 14px;border-radius:7px;font-size:14px;white-space:nowrap}
.help .btn-s:hover{text-decoration:none;background:var(--bd)}
.err,.ok{border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:15px}
.err{background:#fdecec;color:#a11d1d;border:1px solid #f4c1c1}
.ok{background:#e8f7ee;color:#14693a;border:1px solid #b9e4c9}
footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:20px 8px 18px;color:#4b5d78;font-size:13px;margin-top:auto}
footer a{color:#4b5d78;font-weight:500;margin:0 8px}
footer nav a:first-child{margin-left:0}

/* ============ responsive ============ */
@media(max-width:1280px){.mfeats .mf small{display:none}.cat small{display:none}}
@media(max-width:1100px){
  .page{grid-template-columns:minmax(0,560px);justify-content:center;gap:0}
  .mk{display:none}
  .side{padding:12px 16px 0}
  footer{justify-content:center;text-align:center}
}
@media(max-width:700px){
  .page{grid-template-columns:minmax(0,1fr)}
  .side{padding:8px 12px 0}
  .card{border-radius:22px;box-shadow:0 12px 30px rgba(30,80,160,.12)}
  .lang{padding:4px 6px 10px}
  .btn{font-size:18px}.btn.google{font-size:16px}
  .help{flex-wrap:wrap}
  .help .btn-s{margin-left:0;width:100%;text-align:center}
  footer{flex-direction:column;align-items:center;font-size:12px}
  footer a{margin:0 6px}
}
@media(max-width:380px){.card{padding:18px 12px}.tabs a{font-size:14px;gap:6px}.tabs a svg{width:20px;height:20px}.row{font-size:14px}}
@media(max-height:520px) and (orientation:landscape){.card{padding:16px}}
@supports(padding:max(0px)){
  footer{padding-bottom:max(18px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}