:root { --ink:#071523; --accent:#ff4f64; --line:#dde2e7; --display:"Manrope","Avenir Next","Segoe UI",sans-serif; --body:"DM Sans","Segoe UI",sans-serif; color-scheme:light; }
*,*::before,*::after{box-sizing:border-box} html,body{min-height:100%;margin:0} body{color:#172536;background:#f5f6f8;font-family:var(--body);-webkit-font-smoothing:antialiased} button,input{font:inherit} a{color:inherit;text-decoration:none}.login-shell{display:grid;grid-template-columns:minmax(540px,1.15fr) minmax(430px,.85fr);min-height:100svh}.login-story{position:relative;display:flex;overflow:hidden;padding:42px clamp(32px,5vw,76px);flex-direction:column;color:#fff;background:radial-gradient(circle at 70% 40%,rgba(38,88,129,.33),transparent 33%),linear-gradient(145deg,#071523,#0c2034)}.login-story::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,black,transparent)}.login-brand{position:relative;z-index:2;display:flex;width:max-content;align-items:center;gap:10px;font-family:var(--display);font-weight:700}.login-brand img{width:40px;height:40px;object-fit:contain;border-radius:10px}.story-copy{position:relative;z-index:2;max-width:660px;margin-top:clamp(65px,10vh,120px)}.story-copy>p,.login-label{margin:0 0 20px;color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.story-copy h1{margin:0 0 24px;font-family:var(--display);font-size:clamp(49px,5.3vw,86px);font-weight:650;letter-spacing:-.065em;line-height:.94}.story-copy>span{display:block;max-width:540px;color:#97a9b8;font-size:17px;line-height:1.6}.login-story>small{position:relative;z-index:2;margin-top:auto;color:#667e92;font-size:10px}.studio-preview{position:relative;z-index:2;display:grid;grid-template-columns:34px 105px 1fr 110px;width:min(700px,100%);height:260px;margin:55px 0;border:1px solid rgba(255,255,255,.13);border-radius:13px;background:#dfe4e8;box-shadow:0 40px 90px rgba(0,0,0,.3);transform:perspective(1100px)rotateX(4deg)rotateY(-6deg)rotateZ(-1deg);transform-origin:left center}.preview-rail{display:flex;padding:9px 5px;align-items:center;flex-direction:column;gap:10px;border-radius:12px 0 0 12px;background:#111c29}.preview-rail i{width:15px;height:15px;border-radius:4px;background:rgba(255,255,255,.12)}.preview-rail i:first-child{background:var(--accent)}.preview-layers{padding:14px 10px;border-right:1px solid #d0d6dc;background:#fff}.preview-layers span{display:block;height:20px;margin-bottom:6px;border-radius:4px;background:#f0f2f4}.preview-layers span:nth-child(2){background:#ece9ff}.preview-canvas{position:relative;overflow:hidden;margin:10px;border:1px solid #cbd2d9;border-radius:4px;color:#fff;background:#071523}.preview-nav{height:18px;border-bottom:1px solid rgba(255,255,255,.1)}.preview-canvas strong{position:absolute;top:54px;left:22px;z-index:2;font-family:var(--display);font-size:18px;letter-spacing:-.05em;line-height:1.05}.preview-canvas img{position:absolute;right:-8px;bottom:-20px;width:55%;filter:drop-shadow(0 10px 30px rgba(0,0,0,.3))}.preview-button{position:absolute;top:110px;left:22px;width:55px;height:16px;border-radius:4px;background:var(--accent)}.preview-inspector{padding:14px 10px;border-left:1px solid #d0d6dc;background:#fff}.preview-inspector span{display:block;height:8px;margin-bottom:10px;border-radius:3px;background:#e3e7eb}.preview-inspector span:nth-child(even){height:28px}.login-panel{position:relative;display:grid;place-items:center;padding:60px 8vw;background:#f5f6f8}.back-link{position:absolute;top:36px;right:42px;color:#778391;font-size:11px}.back-link:hover{color:#172536}.login-card{width:min(420px,100%)}.login-label{margin-bottom:16px}.login-card h2{margin:0 0 13px;font-family:var(--display);font-size:34px;letter-spacing:-.045em;line-height:1.05}.login-card>p:not(.login-label){margin:0 0 38px;color:#788491;font-size:13px;line-height:1.6}.login-card label{display:block;margin-bottom:18px;color:#566373;font-size:10px;font-weight:700}.login-card input{width:100%;height:48px;margin-top:7px;padding:0 13px;border:1px solid var(--line);border-radius:9px;outline:none;color:#172536;background:#fff;font-size:13px;box-shadow:0 1px 0 rgba(255,255,255,.8)}.login-card input:focus{border-color:#aaa1ff;box-shadow:0 0 0 4px rgba(108,92,231,.08)}.password-field{position:relative}.password-field input{padding-right:62px}.password-field button{position:absolute;right:7px;bottom:7px;height:34px;padding:0 8px;border:0;border-radius:6px;color:#7b8793;background:#f2f4f6;font-size:9px;font-weight:700;cursor:pointer}.login-button{display:flex;width:100%;height:50px;align-items:center;justify-content:space-between;margin-top:27px;padding:0 16px;border:0;border-radius:10px;color:#fff;background:#172536;box-shadow:0 15px 36px rgba(23,37,54,.18);font-size:12px;font-weight:700;cursor:pointer}.login-button:hover{background:#26384a}.login-button:disabled{opacity:.6;cursor:progress}.login-button i{display:grid;width:25px;height:25px;place-items:center;border-radius:7px;background:var(--accent);font-style:normal}.login-message{min-height:20px;margin:12px 0 0;color:#bd2e47;font-size:10px}.secure-note{display:flex;align-items:center;gap:9px;margin-top:34px;padding-top:20px;border-top:1px solid var(--line);color:#8a95a1}.secure-note span{color:#20a875;font-size:8px}.secure-note p{margin:0;font-size:9px}.login-card input::placeholder{color:#a3abb4}@media(max-width:940px){.login-shell{grid-template-columns:1fr}.login-story{min-height:640px}.login-panel{min-height:720px}.back-link{top:25px;right:25px}}@media(max-width:600px){.login-story{min-height:580px;padding:28px 20px}.story-copy{margin-top:70px}.story-copy h1{font-size:50px}.story-copy>span{font-size:15px}.studio-preview{grid-template-columns:28px 74px 1fr 74px;height:190px;margin-top:40px}.preview-canvas strong{top:42px;left:14px;font-size:12px}.preview-button{top:86px;left:14px}.login-panel{min-height:650px;padding:80px 20px 50px}.login-card h2{font-size:30px}}