/* ─── Impact Data brand tokens ─────────────────────────────────────── */
:root {
  --id-cyan:     #15bad2;
  --id-navy:     #11283c;
  --id-yellow:   #f9c646;
  --id-cream:    #f8f5f4;
  --id-body:     #163b64;
  --id-success:  #04a97e;
  --id-danger:   #ed2f3b;
  --id-border:   #dde3e9;
  --id-muted:    #6b7c93;
  --id-surface:  #ffffff;
  --radius:      4px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08);
  --shadow-md:   0 4px 12px rgba(0,0,0,.10);
}

/* ─── Reset & base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--id-body);
  background: var(--id-cream);
  margin: 0;
}

a { color: var(--id-cyan); text-decoration: none; }
a:hover { color: var(--id-navy); }

h1, h2, h3, h4, h5 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--id-navy);
  line-height: 1.25;
}

.container { max-width: 980px; margin: 0 auto; padding: 0 1.5rem; }

/* ─── Flash messages ────────────────────────────────────────────────── */
.flash { padding: .75rem 1.25rem; border-radius: var(--radius); margin-bottom: 1.25rem; font-size: .9rem; font-weight: 500; }
.flash--notice { background: #e6f9f5; color: #056647; border: 1px solid #b3e8d8; }
.flash--alert  { background: #fdecea; color: #9b1c1c; border: 1px solid #f7c5c0; }

/* ─── Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: .45rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--id-border);
  background: var(--id-surface);
  color: var(--id-navy);
  text-decoration: none;
  cursor: pointer;
  font-size: .8rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.btn:hover { background: var(--id-cream); color: var(--id-navy); }

.btn-primary   { background: var(--id-cyan);   color: #fff; border-color: var(--id-cyan); }
.btn-primary:hover { background: #11a8be; border-color: #11a8be; color: #fff; }

.btn-secondary { background: var(--id-navy);   color: #fff; border-color: var(--id-navy); }
.btn-secondary:hover { background: #0d1e2d; border-color: #0d1e2d; color: #fff; }

.btn-warning   { background: var(--id-yellow); color: var(--id-navy); border-color: var(--id-yellow); font-weight: 600; }
.btn-warning:hover { background: #e8b630; border-color: #e8b630; color: var(--id-navy); }

.btn-danger    { background: var(--id-danger);  color: #fff; border-color: var(--id-danger); }
.btn-danger:hover { background: #c4222e; border-color: #c4222e; color: #fff; }

.btn-large     { padding: .7rem 2rem; font-size: 1rem; }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn + .btn    { margin-left: .5rem; }

/* ─── Forms ─────────────────────────────────────────────────────────── */
.field, .field-row { margin-bottom: 1.1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field-row--3col { grid-template-columns: 2fr 1fr 1fr; }
.field-row--name  { grid-template-columns: 7rem 1fr 1fr; }

label { display: block; font-weight: 600; font-size: .8rem; color: var(--id-navy); margin-bottom: .3rem; letter-spacing: .01em; }
label.required::after { content: " *"; color: var(--id-danger); }
.required-mark { color: var(--id-danger); }

input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number],
input[type=password], select, textarea {
  width: 100%;
  padding: .55rem .75rem;
  border: 1px solid var(--id-border);
  border-radius: var(--radius);
  font-size: .95rem;
  font-family: 'Poppins', sans-serif;
  color: var(--id-body);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus,
input[type=url]:focus, input[type=number]:focus, input[type=password]:focus,
select:focus, textarea:focus {
  outline: none;
  border-color: var(--id-cyan);
  box-shadow: 0 0 0 3px rgba(21,186,210,.2);
}

.form-section { background: var(--id-surface); padding: 1.75rem; border-radius: 6px; margin-bottom: 1.5rem; border: 1px solid var(--id-border); box-shadow: var(--shadow-sm); }
.form-section h3 { margin-top: 0; font-size: 1rem; color: var(--id-cyan); border-bottom: 2px solid var(--id-cream); padding-bottom: .5rem; margin-bottom: 1rem; }
.form-actions { margin-top: 1.75rem; }
.form-errors { background: #fdecea; border: 1px solid #f7c5c0; color: #9b1c1c; padding: 1rem 1.25rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: .9rem; }
.field-hint { display: block; font-size: .77rem; color: var(--id-muted); margin-top: .25rem; }
.field--readonly { background: #e8ecf0 !important; color: var(--id-muted); cursor: default; border-color: var(--id-border) !important; }

/* ─── ABN autocomplete dropdown ──────────────────────────────────────── */
.abn-field-wrapper { position: relative; }
.abn-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--id-border); border-radius: var(--radius); list-style: none; margin: 2px 0 0; padding: 0; z-index: 200; max-height: 240px; overflow-y: auto; box-shadow: var(--shadow-md); }
.abn-dropdown li { padding: .55rem .85rem; cursor: pointer; font-size: .85rem; border-bottom: 1px solid var(--id-cream); color: var(--id-body); }
.abn-dropdown li:last-child { border-bottom: none; }
.abn-dropdown li:hover { background: #e8f9fb; color: var(--id-navy); }

/* ─── Tables ─────────────────────────────────────────────────────────── */
.admin-table { width: 100%; border-collapse: collapse; background: var(--id-surface); border-radius: 6px; overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--id-border); }
.admin-table th, .admin-table td { padding: .7rem 1rem; text-align: left; border-bottom: 1px solid var(--id-border); font-size: .85rem; }
.admin-table th { background: var(--id-navy); color: #fff; font-weight: 600; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: #f0fbfd; }
.table-actions { display: flex; gap: .5rem; align-items: center; }

.sender-id-summary { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-direction: column; gap: .6rem; }
.sender-id-summary li { display: flex; align-items: baseline; gap: .75rem; }
.sender-id-summary li code { font-size: .95rem; flex-shrink: 0; }
.sender-id-summary__use-cases { font-size: .88rem; color: var(--id-muted); }

/* ─── Status badges ──────────────────────────────────────────────────── */
.status-badge { display: inline-block; padding: .2rem .7rem; border-radius: 20px; font-size: .72rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
/* Account statuses */
.status-badge--pending               { background: #e8edf2; color: #5a6a7a; }
.status-badge--talkbox_synced        { background: #fef3d0; color: #7a5800; }
.status-badge--form_link_clicked     { background: #fde8c8; color: #7a4000; }
.status-badge--form_submitted        { background: #d6f5f9; color: #0b6875; }
.status-badge--submitted_to_acma     { background: #d0e8ff; color: #0b4075; }
.status-badge--all_senders_approved  { background: #d0f5ea; color: #066647; }
.status-badge--some_senders_approved { background: #e5f5d0; color: #3a6600; }
.status-badge--all_senders_rejected  { background: #fde9e9; color: #8b1c1c; }
.status-badge--error                 { background: #fde9e9; color: #8b1c1c; }
/* SenderIdApplication statuses */
.status-badge--registered         { background: #d0f5ea; color: #066647; }
.status-badge--rejected           { background: #fde9e9; color: #8b1c1c; }
.status-badge--disabled_by_client { background: #e8edf2; color: #5a6a7a; }
.status-badge--error              { background: #fde9e9; color: #8b1c1c; }
.status-badge--pending            { background: #e8edf2; color: #5a6a7a; }
.status-badge--submitted          { background: #d6f5f9; color: #0b6875; }
/* ─── Account status bar ─────────────────────────────────────────────── */
.account-status-bar { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 1rem; padding: 1rem 0 1.5rem; }
.account-status-bar__primary { display: flex; flex-direction: column; gap: .4rem; }
.inline-copy-wrapper { display: inline-flex; align-items: center; gap: .4rem; }
.inline-copy-btn { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .5rem; border: 1px solid var(--id-border); border-radius: 5px; background: var(--id-surface); color: var(--id-muted); font-family: inherit; font-size: .75rem; font-weight: 500; cursor: pointer; transition: color .15s, border-color .15s, background .15s; vertical-align: middle; }
.inline-copy-btn:hover { color: var(--id-cyan); border-color: var(--id-cyan); background: #f0fbfd; }
.inline-copy-btn .copy-btn__icon--check { display: none; color: #22a06b; }
.inline-copy-btn.copy-btn--copied .copy-btn__icon--copy { display: none; }
.inline-copy-btn.copy-btn--copied .copy-btn__icon--check { display: inline-block; }

/* User roles */
.status-badge--staff              { background: #d6f5f9; color: #0b6875; }
.status-badge--admin              { background: #fef3d0; color: #7a5800; }

/* ─── Admin nav ──────────────────────────────────────────────────────── */
.admin-nav {
  background: var(--id-navy);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 2rem;
  gap: 2.5rem;
  height: 60px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.admin-nav__brand { display: flex; flex-direction: column; justify-content: center; line-height: 1.1; border-right: 1px solid rgba(255,255,255,.15); padding-right: 2rem; }
.admin-nav__brand-name    { font-weight: 700; font-size: 1rem; color: var(--id-cyan); letter-spacing: -.01em; }
.admin-nav__brand-product { font-size: .65rem; color: rgba(255,255,255,.55); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }

.admin-nav__links { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; flex: 1; }
.admin-nav__links a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 500;
  padding: .35rem .85rem;
  border-radius: var(--radius);
  transition: background .15s, color .15s;
}
.admin-nav__links a:hover { color: #fff; background: rgba(255,255,255,.1); }
.admin-nav__links a.active, .admin-nav__links a[aria-current] { color: var(--id-navy); background: var(--id-yellow); font-weight: 600; }

.admin-nav__user { font-size: .78rem; color: rgba(255,255,255,.55); white-space: nowrap; }
.admin-nav__user a { color: rgba(255,255,255,.55); }
.admin-nav__user a:hover { color: #fff; }

.admin-main { padding: 2rem 2.5rem; }

/* ─── Dashboard stat cards ───────────────────────────────────────────── */
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
.stat-card { background: var(--id-surface); border-radius: 6px; padding: 1.5rem; border: 1px solid var(--id-border); text-align: center; box-shadow: var(--shadow-sm); transition: box-shadow .15s; }
.stat-card:hover { box-shadow: var(--shadow-md); }
.stat-card--action { border-top: 3px solid var(--id-cyan); }
.stat-card--alert  { border-top: 3px solid var(--id-danger); }
.stat-card__number { font-size: 2.5rem; font-weight: 700; line-height: 1; color: var(--id-navy); }
.stat-card--action .stat-card__number { color: var(--id-cyan); }
.stat-card--alert  .stat-card__number { color: var(--id-danger); }
.stat-card__label  { color: var(--id-muted); font-size: .78rem; margin-top: .35rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.stat-card__link   { display: block; margin-top: .6rem; font-size: .8rem; color: var(--id-cyan); font-weight: 500; }

/* ─── Page header ────────────────────────────────────────────────────── */
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.75rem; }
.page-header h2 { margin: 0; font-size: 1.4rem; }
.page-header__actions { display: flex; gap: .5rem; align-items: center; }

/* ─── Filter tabs ────────────────────────────────────────────────────── */
.filter-bar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.1rem; }
.filter-bar__label { font-size: .85rem; font-weight: 500; color: var(--id-muted); white-space: nowrap; }
.filter-select { padding: .4rem 2rem .4rem .75rem; border: 1px solid var(--id-border); border-radius: 6px; background: var(--id-surface); color: var(--id-body); font-family: inherit; font-size: .85rem; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7a8d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .65rem center; width: auto; }
.filter-select:focus { outline: none; border-color: var(--id-cyan); box-shadow: 0 0 0 3px rgba(21,186,210,.15); }
.results-count { font-size: .8rem; color: var(--id-muted); text-align: right; margin: 0 0 .5rem; }
.filter-clear { font-size: .85rem; color: var(--id-muted); text-decoration: underline; white-space: nowrap; align-self: center; }
.filter-clear:hover { color: var(--id-danger); }
.filter-search-form { margin-left: auto; display: flex; }
.filter-search-input { padding: .4rem .75rem; border: 1px solid var(--id-border); border-radius: 6px; background: var(--id-surface); color: var(--id-body); font-family: inherit; font-size: .85rem; width: 18rem; }
.filter-search-input:focus { outline: none; border-color: var(--id-cyan); box-shadow: 0 0 0 3px rgba(21,186,210,.15); }
mark.search-highlight { background: #fff176; color: inherit; padding: 0 1px; border-radius: 2px; }

/* ─── Detail layout ──────────────────────────────────────────────────── */
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.detail-grid > * { min-width: 0; }
.detail-section { background: var(--id-surface); border-radius: 6px; padding: 1.5rem; border: 1px solid var(--id-border); box-shadow: var(--shadow-sm); margin-bottom: 1.5rem; }
.detail-section h3 { margin-top: 0; font-size: .9rem; color: var(--id-cyan); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--id-border); padding-bottom: .5rem; margin-bottom: 1rem; }
dl { margin: 0; }
dt { font-size: .68rem; color: var(--id-muted); margin-top: .75rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 500; }
dt:first-child { margin-top: 0; }
dd { margin: .1rem 0 0; font-size: .95rem; font-weight: 600; color: var(--id-navy); word-break: break-word; overflow-wrap: anywhere; }
.detail-section p { overflow-wrap: anywhere; word-break: break-all; }
.code-block-wrapper { position: relative; margin: 1rem 0 0; }
.code-block { background: #f4f6f8; border: 1px solid var(--id-border); border-radius: 6px; padding: 1.25rem 1.5rem; font-family: ui-monospace, monospace; font-size: .82rem; line-height: 1.6; overflow-x: auto; white-space: pre; color: var(--id-navy); margin: 0; }
.copy-btn { position: absolute; top: .6rem; right: .6rem; display: flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border: 1px solid var(--id-border); border-radius: 5px; background: var(--id-surface); color: var(--id-muted); font-family: inherit; font-size: .75rem; font-weight: 500; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.copy-btn:hover { color: var(--id-cyan); border-color: var(--id-cyan); background: #f0fbfd; }
.copy-btn__icon--check { display: none; color: #22a06b; }
.copy-btn__label--copied { display: none; color: #22a06b; }
.copy-btn--copied .copy-btn__icon--copy { display: none; }
.copy-btn--copied .copy-btn__icon--check { display: block; }
.copy-btn--copied .copy-btn__label { display: none; }
.copy-btn--copied .copy-btn__label--copied { display: inline; }

/* ─── Notes ──────────────────────────────────────────────────────────── */
.note { background: var(--id-surface); border: 1px solid var(--id-border); border-radius: 6px; padding: 1rem 1.25rem; margin-bottom: .75rem; }
.note--error  { border-left: 4px solid var(--id-danger); }
.note--system { border-left: 4px solid var(--id-muted); background: var(--id-cream); }
.note__meta { font-size: .77rem; color: var(--id-muted); margin-bottom: .4rem; }
.note__type { background: var(--id-cream); padding: .1rem .45rem; border-radius: 3px; margin-left: .25rem; }
.note__body { white-space: pre-wrap; font-size: .9rem; }

/* ─── Customer-facing layout ─────────────────────────────────────────── */
.customer-layout { background: var(--id-cream); }
.customer-layout .site-header { background: var(--id-navy); color: #fff; padding: 1rem 0; margin-bottom: 2.5rem; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.site-logo { margin: 0; display: flex; flex-direction: column; line-height: 1.1; }
.site-logo__brand   { font-size: 1.1rem; font-weight: 700; color: var(--id-cyan); }
.site-logo__product { font-size: .65rem; color: rgba(255,255,255,.55); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
.customer-layout .site-footer { margin-top: 3rem; padding: 1.5rem 0; border-top: 1px solid var(--id-border); color: var(--id-muted); font-size: .82rem; text-align: center; }

.registration-form h2 { margin-top: 0; }
.sender-id-row { background: var(--id-surface); border: 1px solid var(--id-border); border-radius: 6px; padding: 1.1rem; margin-bottom: .75rem; box-shadow: var(--shadow-sm); }
.sender-id-row__header { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.sender-id-code { background: var(--id-cream); padding: .2rem .55rem; border-radius: 3px; font-family: monospace; font-size: .95em; color: var(--id-navy); border: 1px solid var(--id-border); }
.sender-id-row__details--disabled { opacity: .45; pointer-events: none; }
.sender-id-row--disabled .sender-id-code { opacity: .45; }

/* Toggle switch */
.toggle-switch { display: inline-flex; align-items: center; gap: .65rem; cursor: pointer; user-select: none; }
.toggle-switch__input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-switch__track { position: relative; width: 2.75rem; height: 1.5rem; border-radius: 1rem; background: #cbd5e0; transition: background .2s; flex-shrink: 0; }
.toggle-switch__thumb { position: absolute; top: .2rem; left: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.toggle-switch__input:checked + .toggle-switch__track { background: var(--id-cyan); }
.toggle-switch__input:checked + .toggle-switch__track .toggle-switch__thumb { transform: translateX(1.25rem); }
.checkbox-label { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .5rem; font-weight: normal; font-size: .9rem; }
fieldset { border: 1px solid var(--id-border); border-radius: var(--radius); padding: .85rem 1rem; margin-bottom: .75rem; }
legend { font-size: .82rem; font-weight: 600; padding: 0 .3rem; color: var(--id-navy); }
.registration-status { background: var(--id-surface); border-radius: 6px; padding: 2rem; border: 1px solid var(--id-border); box-shadow: var(--shadow-sm); }

/* ─── Version diff ───────────────────────────────────────────────────── */
.diff-legend { margin-bottom: 1rem; font-size: .82rem; color: var(--id-muted); display: flex; align-items: center; gap: .25rem; }
.diff-before-swatch, .diff-after-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.diff-before-swatch { background: #fde9e9; }
.diff-after-swatch  { background: #d0f5ea; margin-left: .5rem; }
.diff-table { width: 100%; border-collapse: collapse; }
.diff-table th, .diff-table td { padding: .5rem .85rem; text-align: left; border-bottom: 1px solid var(--id-border); font-size: .85rem; vertical-align: top; }
.diff-table th { font-weight: 600; color: #fff; background: var(--id-navy); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.diff-field-col { width: 22%; }
.diff-table th:not(.diff-field-col), .diff-table td:not(.diff-field-name) { width: 39%; }
.diff-field-name { font-weight: 500; color: var(--id-body); }
.diff-row--changed .diff-field-name { color: var(--id-navy); font-weight: 600; }
.diff-cell--before { background: #fde9e9; }
.diff-cell--after  { background: #d0f5ea; }

/* ─── Upload spinner ─────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(21,186,210,.3); border-top-color: var(--id-cyan); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; margin-right: .25rem; }
.upload-status { font-size: .82rem; color: var(--id-muted); vertical-align: middle; margin-left: .75rem; }
.import-actions { margin-top: .6rem; display: flex; align-items: center; }

/* ─── Login card ─────────────────────────────────────────────────────── */
.login-card { background: var(--id-surface); border: 1px solid var(--id-border); border-radius: 8px; padding: 2.5rem; max-width: 420px; margin: 3rem auto; box-shadow: var(--shadow-md); }
.login-card h2 { margin-top: 0; margin-bottom: 1.5rem; font-size: 1.4rem; }
.login-card .form-actions { margin-top: 1.5rem; }
.login-card .btn-large { width: 100%; text-align: center; }

/* ─── Pagination ─────────────────────────────────────────────────────── */
nav.pagy { display: flex; align-items: center; gap: .35rem; margin-top: 1.25rem; flex-wrap: wrap; }
nav.pagy a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.1rem; height: 2.1rem; padding: 0 .6rem; border: 1px solid var(--id-border); border-radius: 5px; font-size: .82rem; font-weight: 500; text-decoration: none; color: var(--id-body); background: var(--id-surface); transition: border-color .15s, background .15s, color .15s; }
nav.pagy a:not([aria-disabled]):hover { border-color: var(--id-cyan); color: var(--id-cyan); background: #f0fbfd; }
nav.pagy a[aria-current="page"] { background: var(--id-cyan); border-color: var(--id-cyan); color: #fff; cursor: default; }
nav.pagy a[aria-disabled="true"]:not([aria-current]) { color: var(--id-muted); cursor: default; }
nav.pagy a[role="separator"] { border-color: transparent; background: transparent; color: var(--id-muted); cursor: default; min-width: 1.5rem; }

/* ─── Misc ───────────────────────────────────────────────────────────── */
.text-muted { color: var(--id-muted); }
.notice-warning { background: #fef3d0; border: 1px solid var(--id-yellow); padding: .75rem 1rem; border-radius: var(--radius); font-size: .9rem; }
.notice-info    { background: #e8f4fd; border: 1px solid #90caf9; padding: .75rem 1rem; border-radius: var(--radius); font-size: .9rem; }

/* Field group */
.field-group { background: var(--id-cream); border: 1px solid var(--id-border); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }
.field-group__heading { margin: 0 0 .35rem; font-size: .9rem; font-weight: 600; color: var(--id-cyan); }
.field-group .field:last-child { margin-bottom: 0; }

/* Help icon & dialog */
.help-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--id-cyan); color: #fff; font-size: .7rem; font-weight: bold; border: none; cursor: pointer; vertical-align: middle; margin-left: .3rem; line-height: 1; }
.help-icon:hover { background: var(--id-navy); }
.help-dialog { border: 1px solid var(--id-border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 0; max-width: 36rem; width: 90vw; }
.help-dialog::backdrop { background: rgba(0,0,0,.35); }
.help-dialog__content { padding: 1.25rem; }
.help-dialog__content h4 { margin: 0 0 .6rem; color: var(--id-navy); }
.help-dialog__content p { margin: 0 0 .75rem; font-size: .9rem; }
.help-dialog__content ul { margin: 0 0 1rem; padding-left: 1.25rem; font-size: .9rem; }
.help-dialog__content li { margin-bottom: .25rem; }
.import-panel { background: var(--id-surface); border: 1px solid var(--id-border); border-radius: 6px; padding: 1.1rem; margin-bottom: 1rem; box-shadow: var(--shadow-sm); }
.export-actions { display: flex; gap: .5rem; margin: 1.5rem 0; }
code { background: var(--id-cream); padding: .15rem .45rem; border-radius: 3px; font-family: monospace; font-size: .88em; color: var(--id-navy); border: 1px solid var(--id-border); }

pre { background: var(--id-navy); color: #e8f1f8; border-radius: 6px; padding: 1.5rem; overflow-x: auto; font-size: .88rem; line-height: 1.7; box-shadow: var(--shadow-md); }
pre code { background: transparent; border: none; color: inherit; padding: 0; font-size: inherit; }

/* ─── ACMA API Log timeline ──────────────────────────────────────────── */
.acma-log-timeline { display: flex; flex-direction: column; gap: 1rem; }
.acma-log-entry { background: var(--id-surface); border: 1px solid var(--id-border); border-radius: 6px; padding: 1.1rem 1.25rem; border-left: 4px solid var(--id-border); box-shadow: var(--shadow-sm); }
.acma-log-entry--success { border-left-color: #22c55e; }
.acma-log-entry--failure { border-left-color: var(--id-danger); }
.acma-log-entry__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .5rem; }
.acma-log-entry__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.acma-log-entry__timestamp { font-size: .8rem; white-space: nowrap; }
.acma-log-direction { display: inline-block; padding: .15rem .55rem; border-radius: 20px; font-size: .72rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.acma-log-direction--outbound { background: #d6f5f9; color: #0b6875; }
.acma-log-direction--inbound  { background: #ede9fe; color: #5b21b6; }
.acma-log-step { font-weight: 600; font-size: .88rem; }
.acma-log-sender-id { font-size: .82rem; color: var(--id-muted); }
.acma-log-entry__request-line { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; font-size: .82rem; }
.acma-log-method { font-weight: 700; font-family: monospace; color: var(--id-navy); }
.acma-log-url { word-break: break-all; }
.acma-log-status { font-weight: 600; font-size: .78rem; padding: .15rem .5rem; border-radius: 4px; }
.acma-log-status--ok    { background: #d0f5ea; color: #066647; }
.acma-log-status--error { background: #fde9e9; color: #8b1c1c; }
.acma-log-entry__narrative { margin: 0 0 .75rem; font-size: .88rem; }
.acma-log-entry__bodies { display: flex; flex-direction: column; gap: .5rem; }
.acma-log-body summary { cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--id-muted); user-select: none; }
.acma-log-body summary:hover { color: var(--id-cyan); }
.acma-log-body pre { margin: .4rem 0 0; font-size: .78rem; padding: .8rem 1rem; }