.cf-shell {
  --cf-bg: #f3f6fa; --cf-panel: #fff; --cf-text: #182438; --cf-muted: #495a72;
  --cf-line: #d6dfeb; --cf-accent: #175a9e; --cf-danger: #a52732;
  box-sizing: border-box; max-width: 65rem; margin: clamp(.75rem, 3vw, 2.5rem) auto;
  padding: clamp(.65rem, 3vw, 1.75rem); border-radius: 1rem;
  background: var(--cf-bg); color: var(--cf-text); font: 1rem/1.6 system-ui, sans-serif;
}
.cf-shell *, .cf-shell *::before, .cf-shell *::after { box-sizing: border-box; }
.cf-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .65rem 1rem; margin-bottom: 1rem; }
.cf-shell h1, .cf-shell h2 { margin: 0; line-height: 1.3; overflow-wrap: anywhere; }
.cf-shell h1 { font-size: clamp(1.45rem, 4vw, 2rem); }
.cf-shell h2 { font-size: 1.3rem; margin-bottom: .85rem; }
.cf-shell nav { display: flex; flex-wrap: wrap; gap: .5rem; }
.cf-shell a { color: var(--cf-accent); }
.cf-shell nav a, .cf-shell button, .cf-button {
  display: inline-block; padding: .4rem .8rem; border: 1px solid var(--cf-line);
  border-radius: .45rem; background: var(--cf-panel); color: var(--cf-accent);
  text-decoration: none; font: inherit; cursor: pointer;
}
.cf-shell .cf-primary { background: var(--cf-accent); color: white; border-color: var(--cf-accent); }
.cf-shell .cf-danger { background: var(--cf-danger); color: white; border-color: var(--cf-danger); }
.cf-shell :focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
.cf-panel { background: var(--cf-panel); border: 1px solid var(--cf-line); border-radius: .75rem; padding: clamp(.7rem, 3vw, 1.5rem); }
.cf-notice { background: var(--cf-panel); border-left: .25rem solid var(--cf-accent); padding: .55rem .85rem; }
.cf-shell label, .cf-label { display: block; font-weight: 650; margin: .75rem 0 .3rem; }
.cf-shell input:not([type=hidden]), .cf-shell select, .cf-shell textarea {
  display: block; width: 100%; padding: .5rem; margin-bottom: .9rem; border: 1px solid var(--cf-line);
  border-radius: .4rem; color: var(--cf-text); background: var(--cf-panel); font: inherit;
}
.cf-shell input[type=password] { max-width: 12rem; }
.cf-editor { margin-bottom: 1rem; }
.cf-body { font-size: 120%; border-block: 1px solid var(--cf-line); margin: 1rem 0; padding: .8rem 0; overflow-wrap: anywhere; }
.cf-body img { max-width: 100%; height: auto; }
.cf-table-wrap { overflow-x: auto; margin-bottom: .75rem; }
.cf-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 1.26em; }
.cf-table th, .cf-table td { padding: .6rem .5rem; border-bottom: 1px solid var(--cf-line); }
.cf-table th { background: var(--cf-bg); }
.cf-table td:first-child { overflow-wrap: anywhere; }
.cf-table small { display: block; color: var(--cf-muted); }
.cf-row-actions { white-space: nowrap; }
.cf-empty { font-size: 1.26em; color: var(--cf-muted); padding: 1rem 0; }
@media (prefers-color-scheme: dark) {
  .cf-shell {
    --cf-bg: #152133; --cf-panel: #1d2b3f; --cf-text: #ebf2fc; --cf-muted: #bfcee2;
    --cf-line: #435673; --cf-accent: #9bcaff; --cf-danger: #a52732;
  }
  .cf-shell .cf-primary { color: #102037; }
}