@import url('./tokens.css');
@import url('./base.css');
@import url('./components.css');

.ptt-auth-body { min-height:100vh; background:#f7f8fa; color:var(--ptt-text); display:grid; place-items:center; padding:32px 18px; }
.ptt-auth-shell { width:min(440px,100%); display:grid; gap:18px; }
.ptt-auth-brand { display:flex; align-items:center; gap:11px; }
.ptt-auth-brand strong { display:block; font-size:15px; letter-spacing:-.02em; }
.ptt-auth-brand span { display:block; color:var(--ptt-muted); font-size:10px; margin-top:2px; }
.ptt-auth-logo { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:#111827; color:#fff; font-weight:800; }
.ptt-auth-card { background:#fff; border:1px solid var(--ptt-border); border-radius:14px; box-shadow:0 14px 40px rgba(15,23,42,.06); padding:26px; }
.ptt-auth-kicker { display:block; color:var(--ptt-primary); font-size:9px; font-weight:800; letter-spacing:.1em; margin-bottom:8px; }
.ptt-auth-card h1 { margin:0; font-size:22px; letter-spacing:-.03em; }
.ptt-auth-card__head p { margin:8px 0 0; color:var(--ptt-muted); font-size:11px; line-height:1.6; }
.ptt-auth-form { margin-top:22px; display:grid; gap:14px; }
.ptt-auth-field { display:grid; gap:6px; }
.ptt-auth-field span { font-size:10px; font-weight:700; }
.ptt-auth-field input { width:100%; height:42px; border:1px solid var(--ptt-border-strong); border-radius:8px; padding:0 12px; outline:none; background:#fff; color:var(--ptt-text); font:inherit; }
.ptt-auth-field input:focus { border-color:var(--ptt-primary); box-shadow:0 0 0 3px var(--ptt-primary-soft); }
.ptt-auth-submit { height:42px; border:0; border-radius:8px; background:var(--ptt-primary); color:#fff; font-weight:700; cursor:pointer; }
.ptt-auth-submit:hover { background:var(--ptt-primary-hover); }
.ptt-auth-alert { margin-top:16px; display:grid; gap:3px; padding:11px 12px; border:1px solid var(--ptt-critical-border); background:var(--ptt-critical-soft); border-radius:8px; color:var(--ptt-critical); }
.ptt-auth-alert strong { font-size:10px; }.ptt-auth-alert span{font-size:10px;color:var(--ptt-text-secondary)}
.ptt-auth-security { margin-top:18px; padding-top:15px; border-top:1px solid var(--ptt-border); display:flex; flex-wrap:wrap; gap:6px; }
.ptt-auth-security span { padding:4px 6px; background:var(--ptt-bg-muted); border-radius:5px; color:var(--ptt-muted); font-size:8px; font-weight:700; }
.ptt-auth-foot { display:flex; justify-content:space-between; color:var(--ptt-faint); font-size:9px; padding-inline:2px; }

.ptt-auth-language { margin-top:14px; display:flex; justify-content:flex-end; gap:4px; }
.ptt-auth-language a { min-width:34px; padding:5px 8px; border:1px solid var(--ptt-border); border-radius:6px; color:var(--ptt-muted); text-align:center; font-size:9px; font-weight:800; background:var(--ptt-bg-subtle); }
.ptt-auth-language a:hover { color:var(--ptt-text); border-color:var(--ptt-border-strong); }
.ptt-auth-language a.is-active { color:var(--ptt-primary); border-color:color-mix(in srgb,var(--ptt-primary) 30%,var(--ptt-border)); background:var(--ptt-primary-soft); }