*{box-sizing:border-box} :root{font-family:"Segoe UI",Tahoma,Arial,sans-serif;--bg:#ddd3cc;--panel:#e6ddd7;--card:#f1e9e4;--ink:#2b1e22;--muted:#7c696e;--line:#d1c2bb;--rose:#ad717b;--wine:#211317}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)} body{min-height:100vh}
button,input{font:inherit}.shell{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.visual{position:relative;overflow:hidden;padding:42px 52px;color:#fff8f4;background:radial-gradient(circle at 30% 28%,rgba(173,113,123,.25),transparent 28%),linear-gradient(145deg,#120a0d,#211216 55%,#2b1a1f);display:flex;flex-direction:column;justify-content:space-between}
.visual:before,.visual:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%}.visual:before{width:430px;height:430px;right:-170px;top:-160px}.visual:after{width:300px;height:300px;left:-140px;bottom:-120px}
.brand{display:flex;align-items:center;gap:12px}.mark{width:42px;height:42px;border:1px solid rgba(255,255,255,.32);border-radius:50%;display:grid;place-items:center;font-family:Georgia,serif;font-size:24px}.brand b{display:block;font-size:12px;letter-spacing:.18em}.brand small{display:block;font-size:8px;letter-spacing:.26em;opacity:.6;margin-top:3px}
.visual-copy{max-width:650px;margin:auto 0}.eyebrow{font-size:13px;font-weight:700;opacity:.78}.visual-copy h1{font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:clamp(42px,4.7vw,76px);line-height:1.08;margin:18px 0 20px}.visual-copy p{font-size:16px;line-height:1.8;color:#cabdc0}
.chips{display:flex;gap:10px}.chips span{border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:7px 11px;font-size:9px;color:#cdbfc2}
.form-panel{background:radial-gradient(circle at 15% 15%,rgba(255,255,255,.3),transparent 26%),linear-gradient(145deg,#e6dcd5,#d8cbc3);padding:28px 34px;display:flex;flex-direction:column}
.topbar{display:flex;justify-content:space-between;align-items:center;direction:ltr}.topbar button{width:44px;height:38px;border:1px solid var(--line);border-radius:12px;background:#eee6e1;cursor:pointer;font-weight:800}.topbar a{text-decoration:none;color:#6f5d61;font-size:13px;font-weight:700}
.card{width:min(520px,100%);margin:auto;padding:38px 40px;background:rgba(241,233,228,.82);border:1px solid rgba(255,255,255,.45);border-radius:28px;box-shadow:0 26px 70px rgba(53,32,38,.12);backdrop-filter:blur(16px)}
.rose{color:#9a606a;opacity:1}.card h2{font-size:40px;margin:10px 0 8px}.intro{color:var(--muted);line-height:1.8;margin:0 0 28px}
form{display:grid;gap:18px}label>span{display:block;font-size:12px;font-weight:800;margin-bottom:8px;color:#5d4a4f}.field{height:54px;border:1px solid var(--line);background:#f6efeb;border-radius:15px;display:flex;align-items:center;padding:0 14px}.field:focus-within{border-color:var(--rose);box-shadow:0 0 0 4px rgba(173,113,123,.1)}.field input{border:0;outline:0;background:transparent;width:100%;color:var(--ink)}.field button{border:0;background:transparent;color:#998389;cursor:pointer}
.meta{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:11px;color:#8b777c}.remember{display:flex;align-items:center;gap:8px;cursor:pointer}.remember span{margin:0;color:#67555a}.remember input{accent-color:#925761}
.submit{height:56px;border:0;border-radius:16px;background:var(--wine);color:#fff7f3;display:flex;justify-content:center;align-items:center;gap:16px;font-weight:800;cursor:pointer}.submit:hover{background:#2e1c21}
.error{padding:11px 13px;border:1px solid #dfb8b9;background:#efd7d6;color:#823d45;border-radius:12px;font-size:12px}
.demo{margin-top:22px;border:1px dashed #c7b5ae;background:#ede4de;padding:14px 16px;border-radius:15px;display:flex;justify-content:space-between;align-items:center}.demo span{display:block;font-size:10px;color:#846f74;margin-bottom:4px}.demo strong{font-family:Consolas,monospace;font-size:13px}.demo em{font-style:normal;font-size:10px;background:#e4ced0;color:#87545c;padding:6px 9px;border-radius:999px;font-weight:800}.note{font-size:10px;line-height:1.7;color:#958287;margin:15px 4px 0}
html[dir=ltr] .card,html[dir=ltr] .form-panel{text-align:left} html[dir=rtl] .card,html[dir=rtl] .form-panel{text-align:right}
@media(max-width:980px){.shell{grid-template-columns:1fr}.visual{display:none}.form-panel{min-height:100vh;padding:18px}.card{margin:auto;padding:30px 24px;border-radius:22px}}
@media(max-width:520px){.card h2{font-size:32px}.meta{align-items:flex-start;flex-direction:column}}