/* Additions for the live app (login, forms, modals). Palette tokens come from app.css. */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 0}
.login-card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 14px 40px rgba(20,28,56,.16)}
.login-top{background:var(--hero1);padding:22px 24px;border-bottom:4px solid var(--accent)}
.login-top .logo-chip img{height:44px}
.login-body{padding:22px 24px 26px;display:grid;gap:14px}
.login-body h1{font-size:22px;font-weight:800;color:var(--brand)}
.login-body p{margin:0;color:var(--muted)}
.field{display:grid;gap:4px}
.field label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.field input,.field select,.field textarea{width:100%}
.err{background:var(--bad-bg);color:var(--bad);border-radius:8px;padding:8px 12px;font-size:13px}
.ok{background:var(--good-bg);color:var(--good);border-radius:8px;padding:8px 12px;font-size:13px}
.btn.wide{width:100%;padding:10px 14px}
.btn:disabled{opacity:.55;cursor:default}
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px}
.modal-box{position:relative;z-index:51;width:min(560px,100%);max-height:calc(100vh - 32px);overflow-y:auto;background:var(--surface);border-radius:14px;border:1px solid var(--line);padding:20px;display:grid;gap:12px}
.modal-box h3{font-size:18px;color:var(--brand)}
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;word-break:break-all;background:var(--surface2);border-radius:8px;padding:8px 10px}
.drw .hd{display:flex;gap:8px;justify-content:space-between;align-items:start}
.help{color:var(--muted);font-size:12px;margin:0}
.who2{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hbar .btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
.hbar .btn:hover{background:rgba(255,255,255,.2)}
.hbar select{background:rgba(255,255,255,.95);color:#1b2238}
.drop{border:2px dashed var(--line);border-radius:10px;padding:14px;text-align:center;color:var(--muted)}
.cl-card{display:grid;gap:8px}
.cl-card+.cl-card{margin-top:12px}
.kv2{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--muted);font-size:13px}
.kv2 b{color:var(--fg)}
.mini{font-size:12px;color:var(--muted)}
a.lnk{color:var(--brand);font-weight:600}
@media(max-width:600px){.hero h2,.hero p{padding-right:0}.hero .roof{display:none}}
input[type=email],input[type=password],input[type=file]{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:0;max-width:100%;color:var(--fg)}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}
select{color:var(--fg)}