@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700;800&display=swap');
:root{--g:#063D29;--g2:#0A5C3C;--g3:#12834F;--gl:#D6F0E3;--gxl:#EEF9F4;--am:#E9A00E;--aml:#FBF0D0;--tx:#0F1A14;--sb:#4A6356;--mu:#8CA89A;--bd:#D8EAE2;--bg:#F4FAF7;--wh:#fff;--er:#C0392B;--erl:#FDEDEB;--r:12px;--r-lg:20px;--rp:100px;--ease:cubic-bezier(0.4,0,0.2,1);--spring:cubic-bezier(0.34,1.56,0.64,1);--sh:0 8px 40px rgba(6,61,41,0.10);--fn:'DM Sans',-apple-system,sans-serif}
*{box-sizing:border-box}
@keyframes dl-spin{to{transform:rotate(360deg)}}
@keyframes dl-fadein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes dl-pop{from{transform:scale(0.8);opacity:0}to{transform:scale(1);opacity:1}}

/* WRAP */
.dl-auth-wrap{max-width:480px;margin:2rem auto;font-family:var(--fn);animation:dl-fadein .4s var(--ease)}
.dl-auth-brand{text-align:center;margin-bottom:28px}
.dl-auth-logo{max-height:48px;margin-bottom:8px}
.dl-auth-logo-text{font-size:24px;font-weight:800;color:var(--g);letter-spacing:-.02em}
.dl-auth-tagline{font-size:13px;color:var(--mu);margin:4px 0 0}

/* TABS */
.dl-auth-tabs{background:var(--wh);border:1px solid var(--bd);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden}
.dl-auth-tab-bar{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--bd)}
.dl-auth-tab-btn{padding:14px;background:none;border:none;font-size:14px;font-weight:600;font-family:var(--fn);color:var(--mu);cursor:pointer;transition:all .2s;border-bottom:2px solid transparent;margin-bottom:-1px}
.dl-auth-tab-btn.active{color:var(--g);border-bottom-color:var(--am);background:var(--gxl)}
.dl-auth-tab-panel{display:none}.dl-auth-tab-panel.active{display:block}

/* FORM */
.dl-auth-form{padding:28px 30px;display:flex;flex-direction:column;gap:0}
.dl-form-head{margin-bottom:24px}
.dl-form-head h2{font-size:22px;font-weight:700;color:var(--tx);margin:0 0 5px;letter-spacing:-.02em}
.dl-form-head p{font-size:13px;color:var(--mu);margin:0}

/* FIELDS */
.dl-field{margin-bottom:16px}
.dl-field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--sb);margin-bottom:6px}
.dl-field input[type="text"],.dl-field input[type="email"],.dl-field input[type="password"]{width:100%;padding:12px 14px;border:1.5px solid var(--bd);border-radius:var(--r);background:var(--bg);font-size:15px;font-family:var(--fn);color:var(--tx);transition:all .2s}
.dl-field input:hover{border-color:#A8CEBB;background:var(--wh)}
.dl-field input:focus{outline:none;border-color:var(--g3);background:var(--wh);box-shadow:0 0 0 4px rgba(18,131,79,.09)}
.dl-field input.dl-error{border-color:var(--er);background:var(--erl)}

/* PASS WRAP */
.dl-pass-wrap{position:relative}
.dl-pass-wrap input{padding-right:46px}
.dl-pass-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--mu);padding:4px;transition:color .2s}
.dl-pass-toggle:hover{color:var(--g)}

/* STRENGTH BAR */
.dl-strength-bar{height:4px;background:var(--bd);border-radius:2px;margin-bottom:4px;overflow:hidden}
.dl-strength-fill{height:100%;border-radius:2px;transition:width .3s,background .3s;width:0}
.dl-strength-label{font-size:11px;color:var(--mu);margin-bottom:12px;display:block}

/* BUTTONS */
.dl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:var(--rp);font-size:14px;font-weight:700;font-family:var(--fn);cursor:pointer;transition:all .22s var(--ease);border:none;text-decoration:none;letter-spacing:.01em}
.dl-btn-primary{background:linear-gradient(135deg,var(--g),var(--g2));color:#fff;box-shadow:0 4px 16px rgba(6,61,41,.22)}
.dl-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(6,61,41,.3)}
.dl-btn-full{width:100%;margin-top:8px}
.dl-btn-google{background:var(--wh);color:var(--tx);border:1.5px solid var(--bd);width:100%;margin-bottom:8px}
.dl-btn-google:hover{border-color:var(--g);background:var(--gxl)}
.dl-btn-ghost{background:transparent;color:var(--sb);border:1.5px solid var(--bd)}
.dl-btn-ghost:hover{border-color:var(--tx);color:var(--tx)}
.dl-btn-half{flex:1}
.dl-google-cards{display:flex;gap:8px;margin-bottom:8px}

/* DIVIDER */
.dl-divider{display:flex;align-items:center;gap:12px;margin:12px 0;color:var(--mu);font-size:12px}
.dl-divider::before,.dl-divider::after{content:'';flex:1;height:1px;background:var(--bd)}

/* ACCOUNT TYPE CARDS */
.dl-account-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.dl-account-card{cursor:pointer}
.dl-account-card input[type="radio"]{position:absolute;opacity:0}
.dl-card-inner{display:flex;align-items:flex-start;gap:10px;padding:14px;border:1.5px solid var(--bd);border-radius:var(--r);background:var(--bg);transition:all .2s;position:relative}
.dl-card-icon{font-size:24px;flex-shrink:0}
.dl-card-content h4{font-size:13px;font-weight:700;color:var(--tx);margin:0 0 3px}
.dl-card-content p{font-size:11px;color:var(--mu);margin:0}
.dl-card-check{position:absolute;top:8px;right:8px;width:20px;height:20px;background:var(--g);border-radius:50%;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s var(--spring)}
.dl-account-card input:checked+.dl-card-inner{border-color:var(--g);background:var(--gxl);box-shadow:0 0 0 3px rgba(6,61,41,.08)}
.dl-account-card input:checked+.dl-card-inner .dl-card-check{opacity:1}
.dl-card-inner:hover{border-color:var(--g3)}

/* MISC */
.dl-forgot-link{font-size:12px;color:var(--g3);text-align:right;display:block;margin-bottom:4px;text-decoration:none}
.dl-forgot-link:hover{text-decoration:underline}
.dl-terms-note{font-size:11px;color:var(--mu);text-align:center;margin-top:12px}
.dl-terms-note a{color:var(--g3)}
.dl-auth-error{background:var(--erl);border:1px solid rgba(192,57,43,.2);border-radius:var(--r);padding:10px 14px;color:var(--er);font-size:13px;font-weight:500;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.dl-auth-error::before{content:'⚠';font-size:15px}

/* LOGGED IN STATE */
.dl-auth-panel.dl-auth-logged-in{background:var(--wh);border:1px solid var(--bd);border-radius:var(--r-lg);padding:36px 28px;text-align:center;box-shadow:var(--sh);max-width:480px;margin:2rem auto;font-family:var(--fn)}
.dl-auth-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--g),var(--g3));color:#fff;font-size:26px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;text-transform:uppercase}
.dl-auth-logged-in h3{font-size:20px;font-weight:700;color:var(--tx);margin:0 0 10px}
.dl-auth-role-pill{display:inline-block;padding:4px 14px;border-radius:var(--rp);font-size:12px;font-weight:700;margin-bottom:18px}
.dl-auth-role-pill.brand{background:var(--aml);color:#7A4F00}
.dl-auth-role-pill.creator{background:var(--gl);color:var(--g)}
.dl-auth-logged-in .dl-btn{display:block;margin:8px auto;max-width:240px}

/* SUCCESS SCREEN */
.dl-auth-success{background:var(--wh);border:1px solid var(--bd);border-radius:var(--r-lg);padding:48px 36px;text-align:center;box-shadow:var(--sh);animation:dl-fadein .5s var(--ease)}
.dl-success-icon{font-size:48px;margin-bottom:16px;animation:dl-pop .5s var(--spring)}
.dl-auth-success h3{font-size:20px;font-weight:700;color:var(--tx);margin:0 0 10px}
.dl-auth-success p{font-size:14px;color:var(--mu);margin:0 0 20px}

@media(max-width:520px){
.dl-auth-form{padding:20px 18px}
.dl-auth-wrap{margin:1rem 12px}
.dl-account-cards{grid-template-columns:1fr}
.dl-google-cards{flex-direction:column}
}