/* Hederin login page styles */
:root{
    --hub-bg:#070b12; --hub-bg2:#0a1018;
    --panel:rgba(18,26,38,.55); --panel-brd:rgba(70,110,100,.18);
    --g:#2E8B7A; --g2:#3FBF9A; --g-soft:#8fe0c9;
    --txt:#dCEbE6; --muted:#7e94a0; --line:rgba(120,150,145,.14);
    --inp-bg:rgba(8,12,18,.6); --ph:#5d6f78; --label:#aebfb9;
}
html.theme-light{
    --hub-bg:#f4f8f7; --hub-bg2:#ffffff;
    --panel:rgba(255,255,255,.72); --panel-brd:rgba(9,101,92,.16);
    --g:#0f6f5f; --g2:#149a7f; --g-soft:#0d5c50;
    --txt:#12312c; --muted:#5b6f6b; --line:rgba(9,101,92,.14);
    --inp-bg:rgba(255,255,255,.85); --ph:#93a5a1; --label:#3c5551;
}
*{box-sizing:border-box; font-family:'Diodrum Fa','YekanBakh', Tahoma,sans-serif;}
/* delicate leaf flourish hanging from the top of the page */
body::before{content:""; position:fixed; top:0; left:50%; transform:translateX(-50%);
    width:min(680px,92vw); height:340px;
    background:url("../images/leaf-half.png?v=3") top center/contain no-repeat;
    opacity:.30; pointer-events:none; z-index:0;}
/* leaf flourishes in the empty bottom corners */
body::after{content:""; position:fixed; bottom:0; left:0; width:210px; height:212px;
    background:url("../images/leaf-quarter.png?v=3") center/contain no-repeat;
    transform:scaleY(-1); opacity:.26; pointer-events:none; z-index:0;}
html.theme-light body::before, html.theme-light body::after{opacity:.5;}
body{margin:0; background:
    radial-gradient(1200px 700px at 70% 15%, rgba(46,139,122,.12), transparent 60%),
    radial-gradient(900px 600px at 30% 90%, rgba(63,191,154,.07), transparent 55%),
    linear-gradient(180deg,var(--hub-bg2),var(--hub-bg));
    color:var(--txt); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
    transition:background .4s ease, color .4s ease;}
a{text-decoration:none; color:inherit;}

.auth-wrap{width:100%; max-width:440px; position:relative; z-index:1;}

/* ===== theme toggle ===== */
.theme-toggle{position:fixed; top:18px; left:18px; z-index:5; width:42px; height:42px;
    border-radius:50%; border:1px solid var(--panel-brd); background:var(--panel);
    color:var(--txt); cursor:pointer; font-size:18px; backdrop-filter:blur(8px);
    display:flex; align-items:center; justify-content:center; transition:.2s;}
.theme-toggle:hover{border-color:var(--g2); color:var(--g2);}
.theme-toggle .icon-sun{display:none;}
html.theme-light .theme-toggle .icon-sun{display:inline;}
html.theme-light .theme-toggle .icon-moon{display:none;}

/* ===== form card ===== */
.auth-card{background:var(--panel); border:1px solid var(--panel-brd); border-radius:22px;
    padding:34px 32px; backdrop-filter:blur(10px);
    box-shadow:0 24px 70px rgba(0,0,0,.18);}
html.theme-light .auth-card{box-shadow:0 24px 60px rgba(9,101,92,.10);}
.brand{display:flex; justify-content:center; margin-bottom:20px;}
.brand .brand-logo{height:118px; width:auto;
    filter:drop-shadow(0 12px 36px rgba(46,139,122,.42));}
.brand .logo-light{display:none;}
html.theme-light .brand .logo-dark{display:none;}
html.theme-light .brand .logo-light{display:block;}
.auth-h{font-size:23px; font-weight:800; margin:0 0 6px;}
.auth-sub{font-size:13.5px; color:var(--muted); margin:0 0 24px;}

.alert{border-radius:12px; padding:11px 14px; font-size:13px; margin-bottom:16px; border:1px solid;}
.alert-danger{background:rgba(220,80,80,.10); border-color:rgba(220,80,80,.35); color:#f3b7b7;}
html.theme-light .alert-danger{color:#a5372c;}
.alert-info{background:rgba(46,139,122,.10); border-color:var(--panel-brd); color:var(--g-soft);}
.alert-success{background:rgba(63,191,154,.10); border-color:rgba(63,191,154,.35); color:var(--g-soft);}

.field{margin-bottom:18px;}
.field label{display:block; font-size:13px; font-weight:600; color:var(--label); margin-bottom:7px;}
.inp{position:relative;}
.inp input{width:100%; padding:13px 15px; border-radius:13px; font-size:14px;
    background:var(--inp-bg); border:1px solid var(--line); color:var(--txt); transition:.2s;}
.inp input::placeholder{color:var(--ph);}
.inp input:focus{outline:none; border-color:var(--g2); box-shadow:0 0 0 3px rgba(63,191,154,.14);}
.eye{position:absolute; left:10px; top:50%; transform:translateY(-50%); cursor:pointer;
    background:none; border:none; color:var(--muted); font-size:17px;}
.eye:hover{color:var(--g-soft);}

/* remember me */
.remember{display:flex; align-items:center; gap:9px; margin:2px 0 16px; cursor:pointer;
    font-size:13px; color:var(--muted); user-select:none;}
.remember input{position:absolute; opacity:0; pointer-events:none;}
.remember .box{width:19px; height:19px; border-radius:6px; border:1.5px solid var(--line);
    background:var(--inp-bg); display:inline-flex; align-items:center; justify-content:center;
    transition:.15s; flex:0 0 auto;}
.remember .box i{font-size:12px; color:#fff; opacity:0; transform:scale(.5); transition:.15s;}
.remember input:checked + .box{background:linear-gradient(135deg,var(--g),var(--g2)); border-color:var(--g2);}
.remember input:checked + .box i{opacity:1; transform:scale(1);}
.remember input:focus-visible + .box{box-shadow:0 0 0 3px rgba(63,191,154,.2);}
.remember:hover{color:var(--txt);}

.btn-go{width:100%; padding:14px; border:none; border-radius:13px; cursor:pointer;
    background:linear-gradient(135deg,var(--g),var(--g2)); color:#fff; font-size:15px; font-weight:700;
    box-shadow:0 10px 26px rgba(46,139,122,.35); transition:.2s; margin-top:4px;}
.btn-go:hover{filter:brightness(1.08); transform:translateY(-1px);}
.btn-go:focus-visible{outline:3px solid rgba(63,191,154,.4); outline-offset:2px;}
.auth-foot{text-align:center; margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
    font-size:13.5px; color:var(--muted);}
.auth-foot a{color:var(--g2); font-weight:700;}
.auth-foot a:hover{color:var(--txt);}

@media (prefers-reduced-motion: reduce){
    *{transition:none!important; animation:none!important;}
}
@media (max-width:480px){
    .auth-card{padding:26px 20px;}
    .brand .brand-logo{height:96px;}
}