@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{--ink:#17343a;--teal:#0c4a55;--mint:#d8e9df;--coral:#e88165;--paper:#fbfaf6}
body.login-page{padding:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:15px;min-height:100vh}
.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(380px,0.92fr) 1.08fr}
.brand-panel{position:relative;overflow:hidden;background:var(--teal);color:#fff;padding:54px clamp(40px,7vw,108px);display:flex;flex-direction:column;justify-content:center}
.brand-mark{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.38);border-radius:50%;font:800 14px 'Manrope',sans-serif;letter-spacing:-1px;color:#f2c577;flex:0 0 auto}
.brand-panel>.brand-mark{margin-bottom:74px}
.eyebrow{font:700 10px 'DM Sans',sans-serif;letter-spacing:2px;color:#adcac2;margin:0 0 22px}
.brand-panel h1,.form-wrap h2,.dashboard-content h1{font-family:'Manrope',sans-serif;font-weight:600;letter-spacing:-2px}
.brand-panel h1{font-size:clamp(42px,5vw,68px);line-height:1.1;margin:0 0 24px;position:relative;z-index:1}
.brand-panel h1 em{font-style:normal;color:#e8c57f}
.brand-copy{max-width:380px;color:#c4dad3;line-height:1.8;font-size:15px;position:relative;z-index:1}
.brand-bottom{position:absolute;bottom:46px;left:clamp(40px,7vw,108px);font-size:9px;font-weight:700;letter-spacing:1.7px;color:#a9c6bd}
.live-dot{display:inline-block;width:7px;height:7px;background:#e8c57f;border-radius:50%;margin-right:9px;box-shadow:0 0 0 4px rgba(232,197,127,.15)}
.watermark{position:absolute;right:-22px;bottom:-190px;font-size:440px;line-height:1;color:rgba(255,255,255,.035);transform:rotate(-20deg);pointer-events:none}
.form-panel{display:flex;align-items:center;justify-content:center;padding:64px 34px}
.form-wrap{width:min(100%,410px)}
.form-eyebrow{color:#8d9f95;margin-bottom:14px}
.form-wrap h2{font-size:36px;margin:0 0 8px;letter-spacing:-1.5px}
.form-intro{color:#788681;line-height:1.65;margin:0 0 34px;font-size:14px}
.form-label{font-size:12px;font-weight:700;color:#355057;margin-bottom:9px}
.input-wrap{position:relative;display:flex;align-items:center}
.input-icon{position:absolute;left:15px;z-index:2;color:#879991;font-size:18px;line-height:1}
.input-wrap .form-control{height:52px;padding:0 65px 0 44px;border:1px solid #dce3dc;border-radius:8px;background:#fff;font-size:13px;box-shadow:none}
.input-wrap .form-control:focus{border-color:#4f8b7c;box-shadow:0 0 0 3px rgba(79,139,124,.12)}
.input-wrap .form-control::placeholder{color:#a5b0ab}
.password-toggle{position:absolute;right:13px;border:0;background:none;color:#4f756b;font-weight:700;font-size:11px}
.login-button{height:52px;margin-top:20px;border:0;border-radius:8px;background:var(--teal);color:#fff;font-weight:700;font-size:13px;letter-spacing:.2px;transition:background .2s,transform .2s}
.login-button:hover:not(:disabled){background:#176774;color:#fff;transform:translateY(-1px)}
.login-button:disabled{background:#66868a;color:white}
.login-button span span{margin-left:8px;font-size:17px}
.security-note{margin:24px 0 0;color:#87948e;font-size:11px}.security-note span{margin-right:7px;color:#4f8b7c}
.form-wrap footer{margin-top:68px;padding-top:18px;border-top:1px solid #e8eae3;color:#a1aaa3;font-size:10px}
.form-wrap .alert{font-size:12px;border-radius:8px}
.mobile-mark{display:none}
.dashboard-page{padding:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;min-height:100vh}
.dashboard-nav{height:76px;background:var(--teal);padding:0 clamp(22px,7vw,100px);display:flex;align-items:center;justify-content:space-between;color:#fff}
.dashboard-brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-size:11px;font-weight:700;letter-spacing:1px}
.logout-button{border:1px solid rgba(255,255,255,.4);border-radius:6px;background:transparent;color:white;padding:9px 15px;font-size:12px;font-weight:600}
.logout-button:hover{background:rgba(255,255,255,.1)}
.dashboard-content{max-width:950px;margin:90px auto;padding:0 24px}
.dashboard-content h1{font-size:clamp(34px,5vw,54px);margin:0 0 12px}
.dashboard-lead{color:#74817b;margin-bottom:48px}
.welcome-card{position:relative;background:#e7efe8;border-radius:14px;padding:34px;max-width:600px;overflow:hidden}
.card-number,.coming-soon{font-size:9px;font-weight:700;letter-spacing:1.5px;color:#628176}
.welcome-card h2{font:600 22px 'Manrope',sans-serif;margin:24px 0 8px}
.welcome-card p{font-size:13px;color:#677970;max-width:390px;line-height:1.7}
.coming-soon{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:8px 10px;background:#d3e4d8;border-radius:4px}
.coming-soon b{display:inline-flex;align-items:center}
.coming-soon svg{display:block;width:15px;height:15px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){.login-shell{grid-template-columns:1fr}.brand-panel{display:none}.form-panel{padding:38px 24px;min-height:100vh}.form-wrap{max-width:420px}.mobile-mark{display:flex;align-items:center;gap:12px;margin-bottom:64px;font-size:10px;font-weight:700;letter-spacing:1.3px}.mobile-mark .brand-mark{background:var(--teal);color:#f2c577}.form-wrap footer{margin-top:52px}.dashboard-content{margin:60px auto}.dashboard-nav{height:66px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}