*{box-sizing:border-box}
:root{
  --bg:#fafafa;--card:#fff;--border:#dbdbdb;--text:#262626;
  --muted:#737373;--blue:#168de2;--blue2:#0b74c4
}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
button,input{font:inherit}
a{text-decoration:none}
.page{min-height:88vh;display:flex;align-items:center;justify-content:center;gap:44px;padding:45px 20px 25px}
.phone-preview{width:390px;display:flex;justify-content:center}
.phone{position:relative;width:295px;height:590px;border:10px solid #111;border-radius:42px;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.18);padding:34px 15px 18px;overflow:hidden}
.notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:22px;background:#111;border-radius:0 0 14px 14px}
.story-row{display:flex;gap:11px;padding:10px 2px 17px}
.story-row span{width:43px;height:43px;border-radius:50%;background:linear-gradient(135deg,#ffcf67,#db3f86,#5450d7);border:3px solid white;outline:2px solid #db3f86}
.mock-post{border:1px solid #eee;border-radius:12px;overflow:hidden}
.mock-head{height:54px;display:flex;align-items:center;gap:10px;padding:10px}
.mock-head i{display:block;width:32px;height:32px;border-radius:50%;background:#ddd}
.mock-head b{width:95px;height:9px;border-radius:6px;background:#ddd}
.mock-photo{height:300px;background:linear-gradient(145deg,#cce9ff,#f8d4ea 55%,#f6d17c)}
.mock-lines{padding:16px}
.mock-lines em{display:block;height:8px;background:#ddd;border-radius:6px;margin-bottom:9px}
.mock-lines em:nth-child(2){width:76%}.mock-lines em:nth-child(3){width:48%}
.auth-area{width:100%;max-width:350px;text-align:center}
.demo-banner{margin-bottom:10px;padding:8px 10px;border:1px solid #f2c14e;border-radius:7px;background:#fff7d6;color:#6f5712;font-size:12px;font-weight:700}
.card{background:var(--card);border:1px solid var(--border);padding:34px 40px 22px}
.brand{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 30px;color:var(--text);font-size:34px;font-weight:700;letter-spacing:-1px}
.logo-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#ffb84d,#d73b88,#4c57d4);color:#fff;font-size:24px}
.floating-field{position:relative;margin-bottom:7px}
.floating-field input{width:100%;height:42px;padding:14px 10px 5px;border:1px solid var(--border);border-radius:4px;background:#fafafa;outline:none;font-size:13px}
.floating-field input:focus{border-color:#999;background:#fff}
.floating-field label{position:absolute;right:10px;top:13px;color:#777;font-size:12px;pointer-events:none;transition:.15s}
.floating-field input:focus+label,.floating-field input:not(:placeholder-shown)+label{top:5px;font-size:9px}
.password-wrap input{padding-left:58px}
.password-wrap button{position:absolute;left:6px;top:8px;border:0;background:transparent;color:#262626;font-weight:700;font-size:12px;cursor:pointer}
.login-btn{width:100%;height:34px;margin-top:9px;border:0;border-radius:8px;background:var(--blue);color:#fff;font-weight:700;cursor:pointer}
.login-btn:hover{background:var(--blue2)}
.message{min-height:18px;margin:8px 0 0;font-size:12px;color:#d03b48}
.divider{display:flex;align-items:center;gap:14px;margin:20px 0}
.divider span{height:1px;flex:1;background:var(--border)}
.divider b{font-size:12px;color:var(--muted)}
.social-btn{border:0;background:transparent;color:#2d5e91;font-weight:700;cursor:pointer}
.social-icon{display:inline-grid;place-items:center;width:19px;height:19px;margin-left:5px;border-radius:3px;background:#2d5e91;color:#fff}
.forgot{display:block;margin-top:18px;color:#174a75;font-size:12px}
.signup{margin-top:10px;padding:22px 16px;font-size:14px}
.signup a{color:var(--blue);font-weight:700}
.download-title{font-size:14px}
.stores{display:flex;justify-content:center;gap:8px}
.stores button{height:40px;padding:0 17px;border:0;border-radius:6px;background:#111;color:white;cursor:pointer}
footer{padding:16px 20px 28px;text-align:center;color:var(--muted);font-size:12px}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:17px}
footer a{color:var(--muted)}
@media(max-width:850px){.phone-preview{display:none}.page{padding-top:28px}}
@media(max-width:450px){
  body{background:#fff}.page{min-height:auto;padding:0;display:block}
  .auth-area{max-width:none}.demo-banner{border-radius:0;margin:0}
  .card{border:0;padding:34px 32px 20px}.signup{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
}