/* CODD Login Design 1.8 — isolated styles; no global app changes. */
:root{font-family:Inter,"Segoe UI",system-ui,Arial,sans-serif;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;min-width:320px}
.login-layout{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,59.5fr) minmax(420px,40.5fr)}
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;min-height:745px;overflow:hidden;padding:46px clamp(36px,5vw,68px) 33px;color:#f6fbff;background:#061b32}
.hero-photo,.hero-shade{position:absolute;inset:0;z-index:-2;pointer-events:none}
.hero-photo{background-image:url('https://upload.wikimedia.org/wikipedia/commons/1/1b/Tashkent_City_at_Night.jpg'),url('/static/codd-login-city.svg');background-position:center 63%,center; background-size:cover;filter:saturate(.82)}
.hero-shade{z-index:-1;background:linear-gradient(90deg,rgba(3,22,41,.96) 0%,rgba(4,27,49,.90) 41%,rgba(4,36,57,.47) 100%),linear-gradient(180deg,rgba(2,26,45,.64) 0%,rgba(0,19,35,.15) 48%,rgba(2,16,30,.55) 100%)}
.orbit{position:absolute;border-radius:50%;width:840px;height:700px;border:1px solid rgba(49,202,216,.18);pointer-events:none;z-index:-1}
.orbit-one{top:18%;left:-44%;transform:rotate(-18deg)}.orbit-two{width:1160px;height:800px;bottom:-90%;left:-16%;transform:rotate(-9deg)}
.hero-brand{display:flex;gap:15px;align-items:center}
.hero-brand-mark{border:1px solid #12abb0;color:#34dcdb;background:linear-gradient(150deg,#117b92,#063d5b);border-radius:15px;width:54px;height:54px;display:grid;place-items:center;box-shadow:0 10px 24px #00223f80}
.hero-brand-name strong{display:block;font-size:25px;letter-spacing:.01em;font-weight:850;line-height:1.2}
.hero-brand-name small{display:block;color:#b5d0de;font-size:11px;font-weight:700;letter-spacing:2.8px;margin-top:3px}
.hero-body{max-width:660px;margin:34px 0 25px}
.eyebrow{font-size:11px;letter-spacing:3.3px;font-weight:800;color:#2fe0d9;display:flex;align-items:center;gap:17px;margin:0 0 18px}
.short-line{display:inline-block;width:36px;height:2px;background:#24d6d3;flex:0 0 auto}
.hero h1{font-size:clamp(31px,3.05vw,48px);line-height:1.2;letter-spacing:.5px;font-weight:830;margin:0 0 4px;text-shadow:0 3px 14px rgba(0,0,0,.1)}
.hero h2{font-size:clamp(25px,2.55vw,39px);line-height:1.18;letter-spacing:.5px;font-weight:650;color:#19d0ce;margin:0 0 25px}
.hero-description{font-size:16px;line-height:1.8;color:#e3eef5;max-width:470px;margin:0 0 27px}
.hero-modules{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;max-width:720px}
.hero-module{min-height:96px;padding:11px 4px;border:1px solid #37687a77;border-radius:13px;display:flex;flex-direction:column;gap:11px;align-items:center;justify-content:center;text-align:center;background:rgba(4,42,64,.74);backdrop-filter:blur(8px);font-size:11px;font-weight:650;line-height:1.3;color:#f5f9fd;min-width:0}
.module-icon{font-size:24px;font-weight:800;line-height:1;color:#2bced2}
.module-icon.red{color:#ff6476}.module-icon.orange{color:#f1b655}.module-icon.cyan{color:#28d5dc}
.hero-footer{font-size:10px;font-weight:800;letter-spacing:2px;color:#cad8e7;display:flex;flex-direction:column;gap:14px}
.photo-credit{position:absolute;bottom:15px;right:24px;color:#a4bfd4;text-decoration:none;opacity:.62;font-size:9px;max-width:200px;text-align:right}.photo-credit:hover{opacity:1;text-decoration:underline}
.login-right{background:linear-gradient(135deg,#f7fbfe 0%,#f2f8fc 70%,#eaf6fa 100%);position:relative;display:flex;align-items:center;justify-content:center;padding:34px 25px;min-width:0;overflow:hidden}
.login-right:before,.login-right:after{content:'';position:absolute;border-radius:50%;pointer-events:none;border:1px solid #b9dfeb70}
.login-right:before{width:630px;height:630px;top:-480px;right:-290px}
.login-right:after{width:840px;height:840px;bottom:-695px;left:-380px}
.decor{position:absolute;right:-12px;bottom:0;width:31%;min-width:200px;max-height:87%;pointer-events:none;opacity:.7}
.login-card{background:rgba(255,255,255,.97);border:1px solid #e4edf4;border-radius:20px;box-shadow:0 28px 65px rgba(35,73,107,.10);width:min(100%,385px);padding:35px 33px 30px;z-index:2;color:#0b2841}
.form-eyebrow{font-size:11px;font-weight:850;letter-spacing:2.7px;color:#08b6b0;margin-bottom:13px}
.login-card h2{font-size:31px;font-weight:840;margin:0 0 9px;letter-spacing:-.5px;line-height:1.1;color:#0b253a}
.login-intro{color:#8498ad;line-height:1.5;margin:0 0 30px;font-size:13px}
.login-card label{display:block;font-size:13px;font-weight:750;color:#48647d;margin:0 0 8px}
.field-wrap{height:47px;margin-bottom:21px;border-radius:11px;border:1px solid #d9e5ed;background:linear-gradient(#f8fafc,#f4f7fa);display:flex;align-items:center;gap:9px;padding:0 13px;box-shadow:inset 0 1px 3px #153c4c08}
.field-wrap:focus-within{border-color:#0db9b4;box-shadow:0 0 0 3px #10c4b41c}
.field-wrap>svg{width:19px;height:19px;stroke:#9cb1c4;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.field-wrap input{width:100%;height:100%;border:0;outline:0;background:transparent;color:#15314a;font-size:14px;min-width:0;font-family:inherit}
.field-wrap input::placeholder{color:#a0b3c4}
.password-toggle{background:transparent;border:0;cursor:pointer;color:#91a8b9;padding:5px;display:grid;place-items:center;flex:0 0 auto}
.password-toggle svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.password-toggle:hover{color:#098f90}.password-toggle:focus-visible{outline:2px solid #11b4a6;border-radius:5px}
.login-error{color:#a82039;background:#fff1f2;border:1px solid #fecdd3;border-radius:10px;padding:11px;font-size:12px;line-height:1.5;margin-bottom:15px}
.login-error[hidden]{display:none}
.sign-in{margin-top:9px;height:49px;width:100%;border:0;border-radius:11px;background:linear-gradient(110deg,#0db7ae,#078f89);color:white;font-family:inherit;font-size:16px;font-weight:820;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;box-shadow:0 11px 23px rgba(0,145,134,.16)}
.sign-in span:last-child{position:absolute;right:22px;font-size:24px;font-weight:450}.sign-in:hover{filter:brightness(1.04)}.sign-in:disabled{opacity:.7;cursor:wait}
.login-security{margin-top:33px;border-top:1px solid #e1eaf0;padding-top:22px;display:flex;align-items:center;justify-content:center;gap:12px;color:#95a8bb}.login-security svg{width:18px;height:18px;flex:none}.login-security p{font-size:11px;line-height:1.6;margin:0}
.mobile-footer{display:none}
@media(max-width:1300px){.hero{padding-left:37px;padding-right:34px}.hero h1{font-size:clamp(30px,3.1vw,43px)}.hero h2{font-size:clamp(24px,2.6vw,34px)}.hero-module{font-size:10px}.login-card{padding:31px 29px}}
@media(max-width:1050px){.login-layout{grid-template-columns:53fr 47fr}.hero{padding:31px 27px;min-height:730px}.hero h1{font-size:31px}.hero h2{font-size:25px}.hero-description{font-size:14px}.hero-modules{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-module{min-height:71px;flex-direction:row;gap:7px;padding:7px}.module-icon{font-size:20px}.hero-footer{font-size:9px}.photo-credit{right:10px;bottom:6px;font-size:8px}}
@media(max-width:800px){.login-layout{display:block}.hero{min-height:auto;padding:24px 22px 21px}.hero-brand-mark{width:43px;height:43px}.hero-brand-name strong{font-size:21px}.hero-brand-name small{font-size:8px}.hero-body{margin:24px 0 14px}.hero h1{font-size:clamp(23px,5.8vw,37px)}.hero h2{font-size:clamp(21px,5.5vw,31px)}.hero-description{font-size:13px;max-width:570px;line-height:1.65;margin-bottom:16px}.hero-modules{grid-template-columns:repeat(3,1fr)}.hero-module{min-height:63px}.hero-footer,.photo-credit{display:none}.login-right{padding:22px 15px 35px;min-height:380px}.login-card{max-width:465px}.mobile-footer{display:block;position:absolute;bottom:5px;font-size:8px;color:#8fa7b9;letter-spacing:.5px;text-align:center;padding:0 16px}}
@media(max-width:450px){.hero{padding:21px 15px}.hero h1{font-size:23px}.hero h2{font-size:22px}.eyebrow{font-size:9px;letter-spacing:1.7px}.hero-description{font-size:12px}.hero-module{font-size:9px;min-height:54px}.module-icon{font-size:18px}.login-card{padding:25px 21px}.login-card h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){.sign-in{transition:none}}