@import url("./tokens.css");
@import url("./controls.css");
@import url("./toasts.css");

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--brand-surface); color: var(--brand-ink); font-family: system-ui, sans-serif; line-height: 1.65; }
.brand-header { padding: 22px 28px; background: var(--brand-primary); color: white; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.brand-header a { color: white; font-weight: 650; }
.security-panel { max-width: 720px; margin: 40px auto; padding: 32px; border: 1px solid var(--brand-border); border-radius: 14px; background: white; }
h1 { line-height: 1.2; letter-spacing: -0.03em; }
a { color: var(--brand-primary); }
button, .btn, input[type="submit"] { display: inline-block; border: 1px solid var(--brand-primary); border-radius: 8px; padding: 11px 18px; background: var(--brand-primary); color: white; font: inherit; text-decoration: none; cursor: pointer; margin: 6px 6px 6px 0; }
button:hover, .btn:hover { background: var(--brand-primary-hover); color: white; }
.btn-secondary, .btn-link { background: transparent; color: var(--brand-primary); }
.btn-secondary:hover, .btn-link:hover { background: var(--brand-outline-hover); color: var(--brand-primary); }
.btn-danger { background: #a52c21; border-color: #a52c21; }
.btn-danger:hover { background: #802018; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.form-actions .btn { margin: 0; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
input:not([type="hidden"]):not([type="checkbox"]):not([type="submit"]), select { display: block; width: 100%; padding: 12px; border: 1px solid #aebfb2; border-radius: 8px; font: inherit; }
label { display: inline-block; margin: 8px 0; }
table { width: 100%; }
th, td { padding: 8px; text-align: left; }
.errorlist, .alert-danger { color: #a52c21; }
img { max-width: 100%; }
code { overflow-wrap: anywhere; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--brand-focus); outline-offset: 3px; }
@media (max-width: 760px) { .security-panel { margin: 20px 12px; padding: 22px; } }