:root {
  color-scheme: light dark;
  --bg: #f7f7f8;
  --panel: #ffffff;
  --border: #d8d8dd;
  --muted: #6e6e72;
  --text: #1a1a1f;
  --primary: #0a66c2;
  --primary-hover: #084a8e;
  --accent: #008c4a;
  --error: #b3261e;
  --error-bg: #fbe9e7;
  --radius: 8px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15161a;
    --panel: #1d1e22;
    --border: #2c2d33;
    --muted: #9a9aa3;
    --text: #f1f1f4;
    --error-bg: #3a1c19;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14.5px/1.45 -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
}
.app { max-width: 920px; margin: 0 auto; padding: 24px 20px 64px; }

.topbar {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.topbar h1 { font-size: 22px; margin: 0; }
.status { font-size: 13px; color: var(--muted); }
.status-ok { color: var(--accent); }
.status-pending { color: var(--muted); }
.status-error { color: var(--error); }

.engine-picker {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; font-size: 13px; color: var(--muted);
}
.engine-picker select {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 6px; font: inherit;
}

.tabs { display: flex; gap: 2px; margin: 14px 0 18px; border-bottom: 1px solid var(--border); }
.tab {
  background: transparent; border: 0; padding: 10px 16px; font: inherit; color: var(--text);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--primary); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 500; }

.panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 22px 28px;
}
section { margin-bottom: 22px; }
section h2 { font-size: 16px; margin: 0 0 10px; }
section.disabled { opacity: 0.45; pointer-events: none; }

.muted { color: var(--muted); }
.error {
  margin-top: 10px; padding: 10px 12px; border-radius: 6px;
  background: var(--error-bg); color: var(--error); font-size: 13.5px;
  white-space: pre-wrap; word-break: break-word;
}

.filedrop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 22px; border: 2px dashed var(--border); border-radius: var(--radius);
  cursor: pointer; user-select: none; transition: 120ms;
}
.filedrop:hover { border-color: var(--primary); }
.filedrop.over { border-color: var(--primary); background: rgba(10, 102, 194, 0.05); }
.filedrop.has-file { border-style: solid; border-color: var(--accent); }
.filedrop-label { font-weight: 500; }
.filedrop-file { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 13px; }

.password {
  display: block; margin-top: 10px; padding: 9px 12px; width: 100%;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  font: inherit;
}
.primary {
  margin-top: 10px; padding: 9px 16px; background: var(--primary); color: white; border: 0;
  border-radius: 6px; cursor: pointer; font: inherit; font-weight: 500;
}
.primary:hover:not(:disabled) { background: var(--primary-hover); }
.primary:disabled { background: var(--muted); cursor: not-allowed; opacity: 0.7; }
.primary.big { padding: 11px 22px; font-size: 15px; }
.link {
  background: transparent; border: 0; padding: 0; margin-left: 8px;
  color: var(--primary); cursor: pointer; font: inherit; text-decoration: underline;
}

.loaded { margin-top: 10px; font-size: 13.5px; }
.result { margin-top: 12px; }
.result a { color: var(--primary); font-weight: 500; }

.formats { display: grid; grid-template-columns: 1fr; gap: 10px; }
.formats fieldset { border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px; margin: 0; }
.formats legend { padding: 0 6px; font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.formats select {
  padding: 6px 10px; font: inherit; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
}
.radio { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
.radio input { accent-color: var(--primary); }

.signer-card {
  margin-top: 16px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg);
}
.signers-count { margin-top: 16px; font-size: 13px; color: var(--muted); }
.signer-card h3 { margin: 0 0 12px; font-size: 15px; }
.signer-card dl { margin: 0; display: grid; gap: 6px; }
.signer-card .row { display: grid; grid-template-columns: 160px 1fr; gap: 12px; }
.signer-card dt { color: var(--muted); font-size: 13px; }
.signer-card dd { margin: 0; font-size: 13.5px; word-break: break-word; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.signer-card .badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.signer-card .badge-ok    { color: #1c7c39; background: #e6f4ea; border-color: #b7dfc4; }
.signer-card .badge-bad   { color: #a51c2c; background: #fcebec; border-color: #efbcc1; }
.signer-card .badge-warn  { color: #8a4500; background: #fff1e0; border-color: #f0caa1; }
.signer-card .badge-muted { color: var(--muted); background: transparent; border-color: var(--border); }
.signer-card .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.cert-section { padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); margin-bottom: 12px; }
.cert-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cert-section-title { margin: 14px 0 8px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.cert-chain { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.cert-chain h4 { margin: 0 0 10px; font-size: 13px; color: var(--muted); font-weight: 500; }
.cert-chain ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13px; }
.cert-chain li { padding-left: 4px; }
.cert-chain .chain-link {
  background: transparent; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  width: 100%;
}
.cert-chain .chain-link:hover .chain-name { text-decoration: underline; color: var(--primary); }
.cert-chain .chain-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cert-chain .chain-name { font-weight: 500; }
.cert-chain .chain-meta { font-size: 12px; margin-top: 2px; }
.cert-chain .chain-meta > span { margin-right: 2px; }
@media (prefers-color-scheme: dark) {
  .signer-card .badge-ok    { color: #62d089; background: #14331f; border-color: #1f5733; }
  .signer-card .badge-bad   { color: #ee8a8f; background: #3b1517; border-color: #6a2126; }
  .signer-card .badge-warn  { color: #f0b066; background: #3a2710; border-color: #6a4319; }
}

.recipients { padding-left: 20px; margin: 8px 0 0; }
.recipients li { margin-bottom: 4px; }

.progress {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); font-size: 13.5px; color: var(--muted);
}
.spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--border); border-top-color: var(--primary);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.topbar-action {
  margin-left: auto;
  padding: 5px 10px;
  background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-size: 13px; cursor: pointer;
  max-width: 280px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  align-self: center;
}
.topbar-action:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.topbar-action.loaded { border-color: var(--accent); color: var(--accent); }
.topbar-action.loaded:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); opacity: 0.85; }
.topbar-action:disabled { opacity: 0.6; cursor: not-allowed; }

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
}
.modal-dialog {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
.modal-dialog-wide { width: min(760px, 100%); }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.modal-header h2 { margin: 0; font-size: 16px; }
.modal-close {
  background: transparent; border: 0; padding: 4px 10px;
  color: var(--muted); cursor: pointer; font-size: 22px; line-height: 1;
  border-radius: 4px;
}
.modal-close:hover:not(:disabled) { color: var(--text); background: var(--bg); }
.modal-close:disabled { opacity: 0.4; cursor: not-allowed; }
.modal-body { padding: 18px; overflow-y: auto; }
.modal-body section { margin-bottom: 0; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--border);
}
.modal-current-key {
  margin-bottom: 14px; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  font-size: 13.5px;
}
.modal-current-key strong { font-weight: 500; }
.modal-current-key .row { display: block; }
.modal-current-key .row + .row { margin-top: 4px; }
.modal-current-key .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }

.ca-picker { display: block; margin-top: 10px; }
.ca-picker > span {
  display: block; margin-bottom: 4px;
  font-size: 13px; color: var(--muted);
}
.ca-picker > select {
  display: block; width: 100%; padding: 9px 12px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; font: inherit;
}
.ca-picker > select:disabled { opacity: 0.7; cursor: not-allowed; }

.modal-footer .danger {
  margin-right: auto;
  padding: 9px 14px;
  background: transparent; color: var(--error);
  border: 1px solid var(--error); border-radius: 6px;
  font: inherit; cursor: pointer;
}
.modal-footer .danger:hover:not(:disabled) { background: var(--error-bg); }
.modal-footer .danger:disabled { opacity: 0.6; cursor: not-allowed; }

.modal-footer .secondary {
  padding: 9px 14px;
  background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  font: inherit; cursor: pointer;
}
.modal-footer .secondary:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.modal-footer .secondary:disabled { opacity: 0.6; cursor: not-allowed; }

.save-password {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; font-size: 13.5px;
  cursor: pointer; user-select: none;
}
.save-password input[type="checkbox"] { margin: 0; accent-color: var(--primary); }
.save-password span { color: var(--text); }

@media (max-width: 540px) {
  .topbar-action { max-width: 140px; }
}

.expected-sender {
  margin: 12px 0; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); font-size: 13.5px;
}
.expected-sender > summary {
  cursor: pointer; user-select: none;
  font-size: 13.5px; color: var(--muted);
}
.expected-sender[open] > summary { margin-bottom: 10px; color: var(--text); }
.expected-sender .row { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.expected-sender label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: var(--muted);
}
.expected-sender input[type="text"] {
  padding: 7px 10px; font: inherit;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
}
.expected-sender input[type="text"]:focus { border-color: var(--primary); outline: none; }
.expected-sender .cert-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 12.5px;
}
.expected-sender .cert-chip button {
  background: transparent; border: 0; color: var(--muted);
  cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px;
}
.expected-sender .cert-chip button:hover { color: var(--error); }

.banner {
  margin: 12px 0; padding: 10px 14px;
  border: 1px solid transparent; border-radius: 6px;
  font-size: 13.5px; font-weight: 500;
}
.banner-ok   { color: #1c7c39; background: #e6f4ea; border-color: #b7dfc4; }
.banner-warn { color: #8a4500; background: #fff1e0; border-color: #f0caa1; }
.banner-bad  { color: #a51c2c; background: #fcebec; border-color: #efbcc1; }
@media (prefers-color-scheme: dark) {
  .banner-ok   { color: #62d089; background: #14331f; border-color: #1f5733; }
  .banner-warn { color: #f0b066; background: #3a2710; border-color: #6a4319; }
  .banner-bad  { color: #ee8a8f; background: #3b1517; border-color: #6a2126; }
}