:root{
    --barber-bg:#0e0e0f;
    --barber-panel:#171719;
    --barber-panel-2:#1e1e21;
    --barber-text:#f5f5f4;
    --barber-muted:#a2a2a7;
    --barber-border:#2e2e33;
    --barber-accent:#d5b26f;
    --barber-accent-2:#f0d79d;
}
*{box-sizing:border-box}
html,body{width:100%;min-height:100%}
body.barber-login-page{
    margin:0;min-height:100dvh;overflow-x:hidden;color:var(--barber-text);
    background:
        radial-gradient(circle at 85% 8%,rgba(213,178,111,.12),transparent 28%),
        radial-gradient(circle at 0 85%,rgba(255,255,255,.05),transparent 30%),
        linear-gradient(180deg,#0d0d0e 0%,#121214 100%);
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.barber-login-shell{
    width:min(100%,520px);min-height:100dvh;margin:0 auto;padding:max(34px,env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
    display:flex;flex-direction:column;justify-content:center;gap:22px;
}
.barber-brand-area{display:flex;align-items:center;gap:15px;padding:0 5px}
.barber-brand-mark{
    width:60px;height:60px;flex:0 0 60px;border-radius:18px;display:grid;place-items:center;
    color:#111;background:linear-gradient(145deg,var(--barber-accent-2),var(--barber-accent));font-size:25px;font-weight:900;
    box-shadow:0 14px 34px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.45)
}
.barber-brand-copy{min-width:0}
.barber-eyebrow,.barber-card-kicker{display:block;color:var(--barber-accent);font-size:10px;font-weight:850;letter-spacing:1.65px}
.barber-brand-copy h1{margin:4px 0 0;font-size:31px;line-height:1.04;letter-spacing:-1px}
.barber-brand-copy p{margin:7px 0 0;color:var(--barber-muted);font-size:13.5px;line-height:1.4}
.barber-login-card{
    background:linear-gradient(180deg,rgba(30,30,33,.98),rgba(23,23,25,.98));border:1px solid var(--barber-border);border-radius:26px;padding:25px;
    box-shadow:0 24px 70px rgba(0,0,0,.34)
}
.barber-card-head{margin-bottom:21px}.barber-card-head h2{margin:7px 0 0;font-size:27px;letter-spacing:-.7px}.barber-card-head p{margin:7px 0 0;color:var(--barber-muted);font-size:13px}
.barber-login-form{display:grid;gap:16px}.barber-login-form label{display:grid;gap:7px}.barber-login-form label>span{font-size:13px;font-weight:700;color:#ddd}
.barber-input-wrap{position:relative}.barber-input-wrap input{
    width:100%;height:56px;border:1px solid #37373c;border-radius:15px;background:#111113;color:#fff;padding:0 90px 0 46px;font:inherit;font-size:15px;outline:none;-webkit-appearance:none;transition:.18s ease
}
.barber-input-wrap input[type=email]{padding-right:14px}.barber-input-wrap input:focus{border-color:var(--barber-accent);box-shadow:0 0 0 4px rgba(213,178,111,.10)}
.barber-input-wrap input::placeholder{color:#707076}.barber-input-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--barber-accent);font-weight:900;pointer-events:none}
.barber-password-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#bbb;font-size:12px;font-weight:750;padding:9px;cursor:pointer}
.barber-login-button{width:100%;height:56px;margin-top:2px;border:0;border-radius:15px;background:linear-gradient(135deg,var(--barber-accent-2),var(--barber-accent));color:#17130b;font-size:15px;font-weight:850;cursor:pointer;box-shadow:0 12px 26px rgba(0,0,0,.28)}
.barber-login-button:active{transform:translateY(1px)}
.barber-login-features{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;padding-top:17px;border-top:1px solid #2c2c30;color:#888890;font-size:11px;font-weight:700}.barber-login-features i{width:3px;height:3px;border-radius:50%;background:#5d5d63}
.barber-login-footer{display:grid;justify-items:center;gap:4px;text-align:center}.barber-login-footer strong{font-size:12px;color:#c9c9cc}.barber-login-footer span{font-size:11px;color:#73737a}
.barber-setup-notice{display:grid;gap:6px;margin:-2px 0 18px;padding:14px 15px;border:1px solid rgba(213,178,111,.34);border-radius:14px;background:rgba(213,178,111,.08)}
.barber-setup-notice strong{font-size:13px;color:var(--barber-accent-2)}.barber-setup-notice span{font-size:12px;color:#b8b8bd}.barber-setup-notice a{justify-self:start;margin-top:2px;color:var(--barber-accent-2);font-size:12px;font-weight:800;text-decoration:none}
.barber-login-page .alert{margin:0 0 16px}
@media(max-width:560px){.barber-login-shell{padding-left:16px;padding-right:16px;gap:18px}.barber-login-card{padding:22px 18px;border-radius:23px}.barber-brand-mark{width:54px;height:54px;flex-basis:54px}.barber-brand-copy h1{font-size:28px}}
@media(max-height:720px){.barber-login-shell{justify-content:flex-start;padding-top:max(20px,env(safe-area-inset-top));gap:14px}.barber-login-footer{display:none}}