/* PanelDino — Auth stylesheet (login & register) */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0f0f10;--bg-1:#17171a;--bg-2:#1e1e22;--bg-3:#26262b;--bg-4:#2f2f36;
  --border:#35353d;--border-2:#45454f;
  --text:#ededf0;--text-2:#b8b8c2;--text-3:#7a7a86;
  --accent:#a3d9a5;--accent-2:#7bb87d;--accent-glow:rgba(163,217,165,.14);
  --danger:#ef4444;--warn:#f59e0b;--info:#60a5fa;
  --radius-sm:8px;--radius:12px;--radius-lg:16px;
  --transition:180ms cubic-bezier(.4,0,.2,1);
}
body{
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  background:var(--bg);color:var(--text);min-height:100vh;
  display:flex;flex-direction:column;font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 20% 20%,rgba(123,184,125,.05) 0%,transparent 45%),
    radial-gradient(circle at 80% 80%,rgba(96,165,250,.04) 0%,transparent 45%);
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.icon{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.18em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

.auth-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px}
.box{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px 32px;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.back{display:inline-flex;align-items:center;gap:6px;margin-bottom:18px;color:var(--text-3);font-size:.85rem}
.back:hover{color:var(--text);text-decoration:none}
.back .icon{width:14px;height:14px}
.logo{display:block;width:80px;height:80px;border-radius:18px;object-fit:cover;border:2px solid var(--border);margin:0 auto 18px}
h1{text-align:center;font-size:1.35rem;font-weight:700;margin-bottom:6px;display:flex;align-items:center;justify-content:center;gap:9px;letter-spacing:-.3px}
h1 .icon{color:var(--accent);width:22px;height:22px}
.sub{text-align:center;color:var(--text-3);font-size:.88rem;margin-bottom:24px}

label{display:block;font-size:.82rem;color:var(--text-2);margin-bottom:6px;font-weight:600}
label .opt{color:var(--text-3);font-weight:400}

.field{position:relative;margin-bottom:16px}
.field>.icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-3);pointer-events:none;transition:.2s}
.field input{width:100%;padding:12px 14px 12px 38px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.92rem;font-family:inherit;transition:var(--transition)}
.field input:focus{outline:none;border-color:var(--accent-2);box-shadow:0 0 0 3px var(--accent-glow)}
.field:focus-within>.icon{color:var(--accent-2)}

.hint{font-size:.76rem;color:var(--text-3);margin-top:-10px;margin-bottom:16px;line-height:1.5}

.pw-meter{height:5px;border-radius:4px;background:var(--bg-3);overflow:hidden;margin:-10px 0 16px}
.pw-meter span{display:block;height:100%;width:0;transition:.3s;background:var(--danger)}

.btn{width:100%;padding:12px;border-radius:var(--radius-sm);border:1px solid var(--accent-2);background:var(--accent-2);color:#0f1a0f;font-size:.95rem;font-weight:700;cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit}
.btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn .icon{width:16px;height:16px}

.msg{padding:11px 14px;border-radius:var(--radius-sm);font-size:.86rem;margin-bottom:16px;display:none;align-items:center;gap:9px;line-height:1.5}
.msg .icon{width:16px;height:16px;flex-shrink:0;margin-top:1px}
.msg.err{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);color:#fca5a5;display:flex}
.msg.ok{background:rgba(163,217,165,.12);border:1px solid rgba(163,217,165,.35);color:var(--accent);display:flex}

.footer-link{text-align:center;margin-top:22px;color:var(--text-3);font-size:.88rem}
.footer-link a{color:var(--accent);font-weight:600}

.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:600px){.box{padding:28px 22px}}