:root {
    --ckn-primary: #991b1b;
    --ckn-primary-dark: #7f1d1d;
    --ckn-primary-soft: #fef2f2;
    --ckn-sidebar: #f7f7f8;
    --ckn-border: #e5e7eb;
    --ckn-work-bg: #ffffff;
    --ckn-ink: #171717;
    --ckn-muted: #6b7280;
}

* {
    font-family: 'Prompt', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans Thai', sans-serif;
}

html { font-size: 15px; }
body { margin: 0; color: var(--ckn-ink); background: var(--ckn-sidebar); }

.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.auth-card { width: min(100%, 400px); background: #fff; border: 1px solid var(--ckn-border); border-radius: 12px; padding: 1.35rem; box-shadow: 0 12px 30px rgba(0, 0, 0, .06); }
.auth-card-wide { width: min(100%, 560px); }
.auth-brand { text-align: center; margin-bottom: 1rem; }
.auth-brand h1, .auth-result-card h1 { font-size: 1.15rem; font-weight: 600; margin: .5rem 0 .15rem; }
.auth-brand p, .auth-result-card p { color: var(--ckn-muted); font-size: .8rem; margin: 0; }
.auth-mark { width: 42px; height: 42px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--ckn-primary-soft); color: var(--ckn-primary); font-size: 1.25rem; }
/* Brand-logo variant: the artwork carries its own ground, so drop the icon tint and let it fill the box. */
.auth-mark-logo { background: none; }
.auth-mark-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.auth-form { display: flex; flex-direction: column; gap: .38rem; }
.auth-form label, .fld { color: var(--ckn-muted); font-size: .76rem; font-weight: 500; }
.auth-form .form-control { margin-bottom: .38rem; font-size: .88rem; }
.auth-submit { width: 100%; margin-top: .55rem; }
.auth-row { display: flex; align-items: center; gap: .5rem; font-size: .74rem; }
.auth-row-between { justify-content: space-between; }
.auth-links { text-align: center; color: var(--ckn-muted); font-size: .76rem; margin-top: .9rem; }
.auth-resend { text-align: center; }
.auth-resend .btn, .auth-magic { font-size: .75rem; text-decoration: none; }
.auth-divider { display: flex; align-items: center; gap: .65rem; color: var(--ckn-muted); font-size: .7rem; margin: .9rem 0 .65rem; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; background: var(--ckn-border); flex: 1; }
.auth-provider-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
/* The alternative sign-in routes under the password form — providers, then the emailed link.
   Stacked full-width rather than the two-column .auth-provider-grid above: the list is a
   variable length (two env providers plus however many IdPs the tenant registered), and an odd
   count leaves that grid with a half-width button on the last row. The first child drops the
   .auth-submit top margin the buttons carry, since the divider already provides the gap. */
.auth-alt { display: flex; flex-direction: column; }
.auth-alt > .auth-submit:first-child { margin-top: 0; }
.auth-magic { display: block; text-align: center; width: 100%; margin-top: .55rem; color: var(--ckn-primary); }
/* Consent: one granted capability per row, tick and sentence. A plain <ul> put the burden of
   "where does one item end" on the bullet, which is too small a mark for lines that wrap. */
.consent-scopes { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .5rem; }
.consent-scopes li { display: flex; gap: .5rem; align-items: flex-start; font-size: .8rem; line-height: 1.45; }
.consent-scopes .bi { color: var(--ckn-primary); margin-top: .1rem; flex: none; }
.consent-scope-label { display: block; color: var(--ckn-ink); }
/* The wire key, for the developer reading this screen rather than the person granting it —
   present but visibly secondary to the sentence it belongs to. */
.consent-scope-key { display: block; font-size: .68rem; color: var(--ckn-muted); }
/* The language switcher, at the foot of every translated auth card. Quiet by design: it is a
   setting, not a step in signing in, and the only person who needs it is the one already looking
   for it. The current language is a <span> rather than a link to the page it is already on. */
.auth-lang { text-align: center; margin-top: 1rem; font-size: .74rem; color: var(--ckn-muted); }
.auth-lang a { color: var(--ckn-muted); text-decoration: none; }
.auth-lang a:hover { color: var(--ckn-primary); text-decoration: underline; }
.auth-lang-current { color: var(--ckn-ink); font-weight: 500; }
.auth-lang-sep { margin: 0 .35rem; opacity: .5; }
.auth-result-card { text-align: center; }
.auth-code { letter-spacing: .18em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.secret-box { border: 1px dashed var(--ckn-border); border-radius: 8px; background: var(--ckn-sidebar); padding: .65rem; margin-top: .8rem; text-align: center; overflow-wrap: anywhere; }
.auth-uri { color: var(--ckn-muted); font-size: .72rem; margin-top: .5rem; }
.auth-uri code { display: block; overflow-wrap: anywhere; margin-top: .35rem; }
.recovery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; padding: .8rem; border: 1px solid var(--ckn-border); border-radius: 8px; background: var(--ckn-sidebar); }
.recovery-grid code { text-align: center; color: var(--ckn-ink); }
.logout-frames { width: 1px; height: 1px; overflow: hidden; position: absolute; left: -10000px; }
.logout-frames iframe { width: 1px; height: 1px; border: 0; }
.account-choice { display: flex; align-items: center; gap: .7rem; border: 1px solid var(--ckn-border); border-radius: 8px; padding: .7rem; background: var(--ckn-sidebar); }
.account-choice strong, .account-choice span { display: block; }
.account-choice strong { font-size: .85rem; }
.account-choice span { color: var(--ckn-muted); font-size: .73rem; }
.oauth-logo { max-width: 160px; height: 32px; object-fit: contain; }

.btn-primary { background-color: var(--ckn-primary); border-color: var(--ckn-primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--ckn-primary-dark); border-color: var(--ckn-primary-dark); color: #fff;
}
.btn-primary:focus { box-shadow: 0 0 0 .2rem rgba(153, 27, 27, .3); }
.form-control:focus { border-color: var(--ckn-primary); box-shadow: 0 0 0 .2rem rgba(153, 27, 27, .12); }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 7px; border: 1px solid transparent;
    background: transparent; color: var(--ckn-primary); cursor: pointer;
    font-size: 1rem; line-height: 1; text-decoration: none;
}
.icon-btn:hover { background: var(--ckn-primary-soft); color: var(--ckn-primary-dark); }

.identity-page {
    width: min(920px, calc(100% - 2rem)); margin: 0 auto; padding: 1.4rem 0 2rem;
}
.agents-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.agents-title { font-size: 1.15rem; font-weight: 600; margin: 0; }
.agents-sub { font-size: .82rem; color: var(--ckn-muted); margin: .15rem 0 0; }
.profile-head-actions { display: flex; align-items: center; gap: .15rem; }

.login-error, .login-notice {
    border-radius: 8px; padding: .5rem .7rem; font-size: .8rem; margin-bottom: .8rem;
}
.login-error { background: var(--ckn-primary-soft); color: var(--ckn-primary-dark); border: 1px solid #fecaca; }
.login-notice { background: #fff; color: var(--ckn-ink); border: 1px solid var(--ckn-border); border-left: 3px solid var(--ckn-primary); }

.profile-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, .8fr); gap: 1rem; align-items: start; }
.profile-card, .profile-section {
    border: 1px solid var(--ckn-border); border-radius: 12px; background: #fff; padding: 1rem;
}
.profile-summary { display: flex; align-items: center; gap: .7rem; padding-bottom: .9rem; margin-bottom: .8rem; border-bottom: 1px solid var(--ckn-border); }
.profile-avatar {
    width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px;
    background: #e5e7eb; color: #374151; font-weight: 600;
    display: flex; align-items: center; justify-content: center; font-size: .8rem;
}
.profile-who { min-width: 0; line-height: 1.25; }
.profile-name { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-email { color: var(--ckn-muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.agent-form { display: flex; flex-direction: column; gap: .6rem; }
.agent-form .fld { display: flex; flex-direction: column; gap: .2rem; font-size: .76rem; color: var(--ckn-muted); }
.agent-form .fld .form-control { font-size: .85rem; }
.agent-form .fld .form-control[readonly] { background: var(--ckn-sidebar); color: var(--ckn-muted); }
.fld-hint { font-weight: 400; color: var(--ckn-muted); font-size: .72rem; }
.agent-form .form-actions { display: flex; gap: .5rem; margin-top: .55rem; }
.profile-subform { border-top: 1px solid var(--ckn-border); margin-top: 1rem; padding-top: 1rem; }
.profile-password-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.profile-password-grid .form-actions { margin: 0; }
.profile-provider-list { display: flex; flex-direction: column; margin-top: .7rem; }
.profile-provider-list > div { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem 0; border-top: 1px solid var(--ckn-border); font-size: .82rem; }
.admin-workspace-bar { display: grid; grid-template-columns: auto minmax(180px, 320px) auto; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--ckn-border); border-radius: 10px; padding: .65rem .8rem; margin-bottom: 1rem; font-size: .76rem; color: var(--ckn-muted); }
.admin-grid { display: grid; gap: .8rem; }
.admin-panel { padding: 0; overflow: hidden; }
.admin-panel > summary { list-style: none; display: flex; align-items: center; gap: .45rem; cursor: pointer; padding: .8rem 1rem; font-size: .88rem; font-weight: 600; }
.admin-panel > summary::-webkit-details-marker { display: none; }
.admin-panel > summary .bi { color: var(--ckn-primary); }
.admin-panel[open] > summary { border-bottom: 1px solid var(--ckn-border); }
.admin-inline-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; align-items: center; padding: .75rem; background: var(--ckn-sidebar); }
.admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.admin-panel > .agent-form { padding: .8rem; }
.admin-list { display: flex; flex-direction: column; }
.admin-list > div { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .65rem .8rem; border-top: 1px solid var(--ckn-border); }
.admin-list > div:first-child { border-top: 0; }
.admin-list strong, .admin-list span { display: block; }
.admin-list strong { font-size: .82rem; }
.admin-list span { font-size: .71rem; color: var(--ckn-muted); }
.admin-list .pill { display: inline-flex; }
.admin-role-add { display: flex; align-items: center; gap: .4rem; min-width: 260px; }
.admin-check { display: flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--ckn-muted); }

.profile-card-title { display: flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 600; margin: 0; }
.profile-card-title .bi { color: var(--ckn-primary); }
.profile-details { margin: .7rem 0 0; }
.profile-details > div { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem 0; border-top: 1px solid var(--ckn-border); }
.profile-details dt { color: var(--ckn-muted); font-size: .76rem; font-weight: 500; }
.profile-details dd { margin: 0; }
.profile-card-hint { color: var(--ckn-muted); font-size: .72rem; line-height: 1.45; margin: .7rem 0 0; }

.pill { font-size: .68rem; font-weight: 600; border-radius: 20px; padding: .1rem .5rem; display: inline-flex; align-items: center; white-space: nowrap; }
.pill-on { color: var(--ckn-primary); background: var(--ckn-primary-soft); border: 1px solid rgba(153, 27, 27, .3); }
.pill-off { color: var(--ckn-muted); background: #f3f4f6; border: 1px solid var(--ckn-border); }

.profile-section { margin-top: 1rem; padding: 0; overflow: hidden; }
.profile-section-head { display: flex; align-items: flex-start; justify-content: space-between; padding: .85rem 1rem; }
.agents-table-wrap { overflow-x: auto; border-top: 1px solid var(--ckn-border); background: #fff; }
.agents-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.agents-table thead th {
    text-align: left; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ckn-muted); font-weight: 600; padding: .55rem .75rem; white-space: nowrap;
    border-bottom: 1px solid var(--ckn-border); background: var(--ckn-sidebar);
}
.agents-table tbody td { padding: .55rem .75rem; border-bottom: 1px solid var(--ckn-border); vertical-align: middle; }
.agents-table tbody tr:last-child td { border-bottom: none; }
.agents-table tbody tr:hover { background: #fafafa; }
.agents-empty-row td { text-align: center; color: var(--ckn-muted); padding: 1.3rem; }
.agent-name { font-weight: 600; font-size: .88rem; }
.profile-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; color: var(--ckn-muted); }

@media (max-width: 680px) {
    .profile-grid { grid-template-columns: 1fr; }
    .identity-page { width: min(100% - 1rem, 920px); padding-top: .8rem; }
    .agents-head { flex-wrap: wrap; gap: .5rem; }
    .profile-password-grid { grid-template-columns: 1fr; }
    .auth-provider-grid, .recovery-grid { grid-template-columns: 1fr; }
    .admin-workspace-bar, .admin-inline-form, .admin-form-grid { grid-template-columns: 1fr; }
    .admin-list > div { align-items: flex-start; flex-direction: column; }
    .admin-role-add { min-width: 0; width: 100%; }
}

/* ---- submit in flight (default.js) ----
   The button's own icon becomes the spinner rather than a spinner being added beside it: the
   label must not shift as it appears, and a form that is already the width of the card has no
   room to grow. Buttons with no icon simply dim, which is still a change the eye catches. */
.btn.is-busy { pointer-events: none; opacity: .78; }
.btn.is-busy > i::before { content: ""; }
.btn.is-busy > i {
  display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: ckn-busy-spin .6s linear infinite;
}
@keyframes ckn-busy-spin { to { transform: rotate(360deg); } }