/* CatalystRM Security — login screens (wp-login.php) and the Security / Login Security pages. */

/* ---------- login page ---------- */
.login .cgsec-pk { margin-top: 16px; }
.cgsec-or { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: #8c8f94; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.cgsec-or::before, .cgsec-or::after { content: ''; flex: 1; border-top: 1px solid #dcdcde; }
.cgsec-wide { width: 100%; justify-content: center; text-align: center; }
.login .cgsec-pk-btn { display: flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 600; }
.cgsec-status { min-height: 1.2em; margin: 8px 0 0; font-size: 13px; color: #50575e; }
.cgsec-status.is-bad { color: #b32d2e; font-weight: 600; }
.cgsec-screen .cgsec-title { margin: 0 0 14px; font-size: 20px; font-weight: 700; color: #1d2327; }
.cgsec-screen form, .cgsec-screen .message { margin-top: 0; }
.login .cgsec-screen form { padding: 20px 22px; }
.cgsec-who { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; background: #fff; border: 1px solid #dcdcde; border-radius: 8px; }
.cgsec-who img { border-radius: 50%; }
.cgsec-who small { display: block; color: #646970; }
.cgsec-lead { margin: 0 0 14px !important; color: #3c434a; line-height: 1.5; }
.login .cgsec-code { font-size: 22px; letter-spacing: .25em; text-align: center; font-variant-numeric: tabular-nums; }
.cgsec-trust { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; font-size: 13px; }
.cgsec-alts { display: flex; flex-direction: column; gap: 6px; margin: 16px 0 0; padding: 14px 16px; background: #fff; border: 1px solid #dcdcde; border-radius: 8px; font-size: 13px; }
.cgsec-alts span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8c8f94; }
.cgsec-alts a { text-decoration: none; }
.cgsec-back { margin: 16px 0 0; font-size: 13px; text-align: center; }
.cgsec-back a { text-decoration: none; color: #50575e; }
.cgsec-choices { display: grid; gap: 10px; }
.cgsec-choice { display: block; width: 100%; padding: 14px 16px; text-align: left; background: #fff; border: 1px solid #c3c4c7; border-radius: 10px; cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s; }
.cgsec-choice:hover, .cgsec-choice:focus { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; outline: none; }
.cgsec-choice b { display: block; font-size: 14px; color: #1d2327; }
.cgsec-choice small { display: block; margin-top: 3px; color: #646970; line-height: 1.4; }
.cgsec-qr { display: flex; justify-content: center; margin: 4px 0 12px; }
.cgsec-qr svg { width: 180px; height: 180px; padding: 10px; background: #fff; border: 1px solid #dcdcde; border-radius: 8px; }
.cgsec-key { text-align: center; }
.cgsec-key code { font-size: 15px; letter-spacing: .1em; padding: 6px 10px; display: inline-block; }
.cgsec-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 0 0 12px; padding: 12px 16px 12px 36px; background: #f6f7f7; border: 1px dashed #c3c4c7; border-radius: 8px; }
.cgsec-codes code { background: none; font-size: 14px; letter-spacing: .06em; }
.cgsec-codebtns { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; }
.cgsec-second { margin: 22px 0 16px; padding: 12px 14px; border: 1px solid #f0b849; border-left-width: 4px; border-radius: 8px; background: #fcf9e8; color: #50575e; }
.cgsec-second strong { display: block; margin-bottom: 4px; color: #8a5a00; }
.cgsec-second p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }
.cgsec-second__btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cgsec-second__btns form { margin: 0; }
@media print { body * { visibility: hidden; } .cgsec-codes, .cgsec-codes * { visibility: visible; } .cgsec-codes { position: absolute; left: 0; top: 0; } }

/* ---------- admin: shared tokens ---------- */
.cgsec, .cgsec-profilebox { --s-surface: var(--surface, #fff); --s-surface-2: var(--surface-2, #f6f7f7); --s-border: var(--border, #dcdcde); --s-ink: var(--ink, #1d2327); --s-ink-2: var(--ink-2, #50575e); --s-ink-3: var(--ink-3, #8c8f94); --s-accent: var(--accent, #c4622b); --s-bad: var(--bad, #b32d2e); --s-good: var(--good, #2c6b50);
	--dk-accent: var(--accent, #c4622b); --dk-blue: #3b7dc4; --dk-good: var(--good, #2c6b50); --dk-warn: var(--warn, #b7791f); --dk-bad: var(--bad, #b32d2e); --dk-muted: var(--ink-3, #8b96a8); }
.cgsec { max-width: 1500px; color: var(--s-ink); }
.cgsec .dk-tiles, .cgsec .dk-grid { max-width: none; }
.cgsec .dk-tiles { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 0 0 18px; }
.cgsec .dk-grid { gap: 16px; }
.cgsec .dk-card { padding: 16px 18px 18px; }
.cgsec-subnav { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 20px; border-bottom: 1px solid var(--s-border); }
.cgsec-subnav a { padding: 8px 13px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; margin-bottom: -1px; text-decoration: none; color: var(--s-ink-2); font-weight: 500; }
.cgsec-subnav a:hover { color: var(--s-ink); background: var(--s-surface-2); }
.cgsec-subnav a.is-active { background: var(--s-surface); color: var(--s-ink); border-color: var(--s-border); font-weight: 600; box-shadow: inset 0 2px 0 var(--s-accent); }
.cgsec-subnav__settings { margin-left: auto; }
.cgsec-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px 24px; margin: 0 0 18px; }
.cgsec-head h2 { margin: 0; font-size: 22px; font-weight: 800; }
.cgsec-head p { margin: 5px 0 0; max-width: 80ch; font-size: 13.5px; line-height: 1.5; color: var(--s-ink-2); }
.cgsec-head__act { display: flex; flex-wrap: wrap; gap: 8px; }
.cgsec-crumb { margin: 0 0 12px; font-size: 13px; color: var(--s-ink-3); }
.cgsec-crumb a { text-decoration: none; }
.cgsec-flash { padding: 10px 14px; border-radius: 8px; margin: 0 0 16px; border: 1px solid; font-weight: 500; }
.cgsec-flash.is-ok { background: #e3f1ea; border-color: #b8dcc8; color: #22573f; }
.cgsec-flash.is-err { background: #f9e2e1; border-color: #efbcb9; color: #8a1f1b; }
.cgsec-conflicts { margin: 0 0 18px; padding: 14px 18px; background: #fdf6e7; border: 1px solid #f0d9a7; border-left: 4px solid #b7791f; border-radius: 10px; }
.cgsec-conflicts h3 { margin: 0 0 6px; font-size: 14px; }
.cgsec-conflicts ul { margin: 0 0 10px 18px; list-style: disc; font-size: 13px; line-height: 1.5; }
.cgsec-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.cgsec-muted, .cgsec-sub { color: var(--s-ink-3); font-size: 12.5px; }
.cgsec-sub { display: block; margin-top: 2px; }
.cgsec-danger { color: var(--s-bad) !important; border-color: color-mix(in srgb, var(--s-bad) 45%, transparent) !important; }

/* ---------- account panel ---------- */
.cgsec-hero { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 18px; align-items: center; margin: 0 0 18px; padding: 18px 20px; background: var(--s-surface); border: 1px solid var(--s-border); border-radius: 14px; }
.cgsec-hero__who { display: flex; align-items: center; gap: 14px; }
.cgsec-hero__who img { border-radius: 50%; }
.cgsec-hero__who h2 { margin: 0; font-size: 19px; font-weight: 800; }
.cgsec-hero__who p { margin: 3px 0 0; color: var(--s-ink-3); font-size: 13px; }
.cgsec-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cgsec-hero__stats > div { padding: 10px 14px; background: var(--s-surface-2); border-radius: 10px; }
.cgsec-hero__stats span { display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--s-ink-3); }
.cgsec-hero__stats b { font-size: 20px; }
.cgsec-hero__stats small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--s-ink-2); }
.cgsec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cgsec-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cgsec-card { background: var(--s-surface); border: 1px solid var(--s-border); border-radius: 12px; padding: 16px 18px 18px; min-width: 0; }
.cgsec-card--wide { grid-column: 1 / -1; }
.cgsec-card--admin { border-left: 4px solid var(--dk-warn); }
.cgsec-card > header { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.cgsec-card > header h3 { margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--s-ink-2); }
.cgsec-card > header a { margin-left: auto; font-size: 12.5px; text-decoration: none; font-weight: 600; }
.cgsec-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.cgsec-tag.is-good { background: color-mix(in srgb, var(--dk-good) 14%, transparent); color: var(--dk-good); }
.cgsec-hint { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--s-ink-2); }
.cgsec-empty { margin: 4px 0 10px; color: var(--s-ink-3); font-size: 13px; }
.cgsec-warn { color: var(--dk-warn); font-weight: 600; font-size: 13px; }
.cgsec-list { list-style: none; margin: 0 0 12px; padding: 0; }
.cgsec-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--s-border) 60%, transparent); }
.cgsec-list li:first-child { border-top: 0; }
.cgsec-list li.is-off { opacity: .6; }
.cgsec-ico { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--s-surface-2); font-size: 18px; }
.cgsec-list--tight .cgsec-ico { width: 30px; height: 30px; font-size: 15px; }
.cgsec-list__main { flex: 1; min-width: 0; }
.cgsec-list__main small { display: block; margin-top: 2px; color: var(--s-ink-3); font-size: 12px; }
.cgsec-list__act { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.cgsec-rename input[type=text] { width: 150px; height: 30px; min-height: 30px; font-size: 12.5px; }
.cgsec-pw { width: 140px; height: 30px; min-height: 30px; font-size: 12.5px; }
.cgsec-add { padding: 14px; background: var(--s-surface-2); border-radius: 10px; }
.cgsec-add__name { width: 100%; max-width: 420px; height: 34px; margin: 0 0 10px; }
.cgsec-add__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.cgsec-add__btns .button { min-height: 34px; }
.cgsec-keytip { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--s-ink-3); }
.cgsec-totp { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.cgsec-totp .cgsec-qr { margin: 0; }
.cgsec-totp .cgsec-qr svg { width: 150px; height: 150px; }
.cgsec-totp .cgsec-key { text-align: left; }
.cgsec-totp input[name=code] { width: 120px; letter-spacing: .15em; }
.cgsec-account .cgsec-codes { max-width: 380px; }
.cgsec-tools { display: grid; gap: 12px; }
.cgsec-tools form { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; }
.cgsec-tools small { color: var(--s-ink-3); font-size: 12.5px; line-height: 1.4; }
.cgsec-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cgsec-table td, .cgsec-table th { padding: 8px 10px; border-top: 1px solid color-mix(in srgb, var(--s-border) 60%, transparent); text-align: left; vertical-align: middle; }
.cgsec-table th { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--s-ink-3); background: var(--s-surface-2); border-top: 0; }
.cgsec-table .is-nowrap { white-space: nowrap; }
.cgsec-table .is-act { text-align: right; white-space: nowrap; width: 1%; }
.cgsec-table--list { background: var(--s-surface); border: 1px solid var(--s-border); border-radius: 12px; overflow: hidden; }
.cgsec-table--list td:first-child, .cgsec-table--list th:first-child { padding-left: 16px; }
.cgsec-table .cgcrm-pill { margin: 1px 3px 1px 0; }
.cgsec-scroll { overflow-x: auto; margin: 0 0 12px; }
.cgsec-person { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.cgsec-person img { border-radius: 50%; }
.cgsec-person small { display: block; color: var(--s-ink-3); font-size: 12px; }
.cgsec-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; margin: 0 0 16px; padding: 14px 16px; background: var(--s-surface); border: 1px solid var(--s-border); border-radius: 12px; }
.cgsec-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--s-ink-3); }
.cgsec-filters input, .cgsec-filters select { width: 190px; height: 34px; min-height: 34px; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--s-ink); }
.cgsec-filters .button { height: 34px; }
.cgsec-count, .cgsec-pager { display: flex; gap: 10px; font-size: 13px; color: var(--s-ink-3); }
.cgsec-policy { list-style: none; margin: 0; padding: 0; }
.cgsec-policy li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid color-mix(in srgb, var(--s-border) 60%, transparent); font-size: 13px; }
.cgsec-policy li:first-child { border-top: 0; }
.cgsec-policy b { text-align: right; }
.cgsec-banner a { font-weight: 600; }
.cgsec-profilebox { max-width: 720px; padding: 4px 18px 6px; background: #fff; border: 1px solid #dcdcde; border-left: 4px solid #c4622b; border-radius: 6px; }

/* ---------- password & access (0.27.0) ---------- */
.cgsec--embedded { max-width: none; margin-top: 12px; }
.cgsec-pwshow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 10px 12px; background: #fdf6e7; border: 1px dashed #e0b85a; border-radius: 8px; font-size: 13px; }
.cgsec-pwshow code { font-size: 15px; letter-spacing: .04em; padding: 4px 8px; background: #fff; border-radius: 6px; }
.cgsec-pwgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; align-items: center; width: 100%; }
.cgsec-pwgrid input { width: 100%; height: 34px; }
.cgsec-pwform { display: block; }
.cgsec-pwform small { display: block; margin-top: 6px; }
.cgsec-pwset { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cgsec-pwset input { width: 280px; max-width: 100%; height: 30px; min-height: 30px; font-size: 13px; }
.cgsec-tools--pw form { grid-template-columns: 270px minmax(0, 1fr); align-items: start; }
.cgsec-tools--pw form > .button { width: 100%; justify-content: center; text-align: center; white-space: normal; min-height: 32px; line-height: 1.25; padding-top: 5px; padding-bottom: 5px; }
.cgsec-pwbody { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cgsec-pwbody > small:first-child { padding-top: 7px; }
.cgsec-pwbody input[type=text] { width: 100%; max-width: 440px; height: 32px; min-height: 32px; font-size: 13px; }
.cgsec-tools--pw small label { white-space: nowrap; }
@media (max-width: 800px) { .cgsec-pwgrid { grid-template-columns: minmax(0, 1fr); } .cgsec-tools--pw form { grid-template-columns: minmax(0, 1fr); } .cgsec-pwbody > small:first-child { padding-top: 0; } }

/* ---------- settings ---------- */
.cgsec--settings { max-width: none; }
.cgsec-settingsbar { margin: 0 0 16px; padding: 10px 14px; background: var(--s-surface-2); border-radius: 10px; font-size: 13px; color: var(--s-ink-2); }
.cgsec-check { display: block; margin: 0 0 12px; padding-left: 24px; text-indent: -24px; line-height: 1.45; }
.cgsec-check input { margin: 0 8px 0 0; vertical-align: -2px; }
.cgsec-check small { display: block; text-indent: 0; margin-top: 2px; color: var(--s-ink-3); font-size: 12.5px; }
.cgsec-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 12px 0; }
.cgsec-num span, .cgsec-area span { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--s-ink-2); }
.cgsec-num input { width: 100%; height: 34px; }
.cgsec-area { display: block; margin: 12px 0; }
.cgsec-area textarea, .cgsec-area select { width: 100%; max-width: none; }
.cgsec-area small { display: block; margin-top: 4px; color: var(--s-ink-3); }
.cgsec-roles td { padding: 6px 8px; }
.cgsec-roles select { width: 100%; max-width: 300px; }
.cgsec-note { margin-top: 14px; padding: 10px 12px; background: var(--s-surface-2); border-radius: 8px; font-size: 12.5px; line-height: 1.5; color: var(--s-ink-2); }

@media (max-width: 1000px) {
	.cgsec-hero { grid-template-columns: minmax(0, 1fr); }
	.cgsec-grid, .cgsec .dk-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.cgsec-hero__stats { grid-template-columns: minmax(0, 1fr); }
	.cgsec-totp { grid-template-columns: minmax(0, 1fr); }
	.cgsec-list li { flex-wrap: wrap; }
	.cgsec-list__act { width: 100%; justify-content: flex-start; }
	.cgsec-filters label, .cgsec-filters input, .cgsec-filters select { width: 100%; }
}

/* 0.30.0 — split IP / account limits, whole-site bans */
.cgsec-card .cgsec-nums { align-items: end; } /* inputs line up when one label wraps */
.cgsec-sub { margin: 16px 0 2px; font-size: 13px; font-weight: 700; color: var(--s-ink); }
.cgsec-card .cgsec-nums + .cgsec-sub { margin-top: 6px; }
.cgsec-area small { display: block; margin-top: 4px; color: var(--s-ink-3); font-size: 12.5px; }
.cgsec-pill { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 9px; background: var(--s-surface-2); border: 1px solid var(--s-border); font-size: 11px; font-weight: 700; color: var(--s-ink-2); vertical-align: 1px; }
.cgsec-banform { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(130px, .8fr) minmax(110px, .6fr) minmax(180px, 1.4fr) auto; gap: 10px 12px; align-items: end; margin: 16px 0 0; padding: 14px; border: 1px solid var(--s-border); border-radius: 10px; background: var(--s-surface-2); }
.cgsec-banform label span { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--s-ink-2); }
.cgsec-banform input, .cgsec-banform select { width: 100%; max-width: none; height: 34px; }
.cgsec-banform .button { height: 34px; }
.cgsec-table--list td.is-act .cgsec-inline + .cgsec-inline { margin-left: 6px; }
@media (max-width: 900px) { .cgsec-banform { grid-template-columns: 1fr 1fr; } .cgsec-banform__why { grid-column: 1 / -1; } }

/* Passwordless: "store on the key" choice when adding a security key (0.42.0) */
.cgsec-disc { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 13px; }
.cgsec-disc small { color: var(--c-ink-2, #667); }