.ck-banner, .ck-scrim, .ck-settings {
  --surface: #fff; --surface-2: #FCFAF5; --ink: #2A2620;
  --ink-soft: #4A453B; --muted: #756E60; --faint: #787267;
  --line: #E6DECE; --line-2: #DDD3BF; --gold-ink: #8C6A36;
  --radius: 14px; --bg: #FBF8F2;
  --shadow-lg: 0 8px 24px -8px rgba(42,38,32,.16), 0 40px 80px -32px rgba(42,38,32,.22);
  color: var(--ink-soft); font-family: ui-sans-serif, system-ui, sans-serif;
  line-height: 1.6; box-sizing: border-box;
}
.ck-banner *, .ck-scrim * { box-sizing: border-box; }
.ck-banner h2, .ck-modal h2 { font-weight: 600; line-height: 1.08; letter-spacing: -.018em; margin: 0; }
.ck-banner button, .ck-modal button { font-family: inherit; }
.ck-banner .btn, .ck-modal .btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px; border: 1px solid var(--line-2); border-radius: 10px;
  font-size: 14px; font-weight: 600; line-height: 1.25; cursor: pointer;
  background: transparent; color: var(--ink);
}
.ck-banner .btn--teal, .ck-modal .btn--teal { background: #1B4D54; color: var(--bg); border-color: #1B4D54; }
.ck-banner .btn--teal:hover, .ck-modal .btn--teal:hover { background: #164147; }
.ck-banner .btn--ghost:hover, .ck-modal .btn--ghost:hover { background: rgba(42,38,32,.03); border-color: var(--ink); }
.ck-modal a { color: var(--gold-ink); }
.ck-banner button:focus-visible, .ck-modal button:focus-visible, .ck-settings:focus-visible {
  outline: 2px solid #1B4D54; outline-offset: 3px;
}
.ck-app #root { height: calc(100% - 54px); }
.ck-settings {
  position: fixed; inset-inline-start: 10px; bottom: 10px; z-index: 80;
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface);
  padding: 6px 10px; font-size: 12px; cursor: pointer;
}
.ck-banner {
  position: fixed; inset-inline: 16px; bottom: 16px; z-index: 90; max-width: 440px;
  margin-inline: auto; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 20px; font-size: 14px; color: var(--ink-soft);
}@media (min-width: 720px) { .ck-banner { inset-inline: auto; inset-inline-end: 24px; }}

.ck-banner h2 { font-size: 16px; color: var(--ink); margin-bottom: 6px; }
.ck-banner p { margin: 0 0 14px; line-height: 1.5; }
.ck-banner a { color: var(--gold-ink); }
.ck-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ck-scrim { position: fixed; inset: 0; z-index: 2147483000; background: rgba(33,30,24,.5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.ck-modal { position: relative; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; padding: 26px; }
.ck-close { position: absolute; top: 12px; inset-inline-end: 14px; width: 32px; height: 32px; border: 0; background: none; cursor: pointer; font-size: 24px; line-height: 1; color: var(--muted); border-radius: 8px; }
.ck-close:hover { color: var(--ink); background: var(--surface-2); }
.ck-modal h2 { font-size: 20px; color: var(--ink); margin-bottom: 6px; }
.ck-modal > p { font-size: 14px; margin-bottom: 18px; }
.ck-cat { border-top: 1px solid var(--line); padding: 16px 0; display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; }
.ck-cat__name { font-weight: 700; color: var(--ink); font-size: 15px; }
.ck-cat__desc { font-size: 13px; margin-top: 3px; }
.ck-tech-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.ck-tech { border-inline-start: 2px solid var(--line-2); padding-inline-start: 10px; }
.ck-tech__name { font-size: 12.5px; font-weight: 600; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ck-tech__meta { font-size: 12px; color: var(--muted); margin-top: 1px; }
.ck-tech__empty { font-size: 12px; color: var(--faint); font-style: italic; }
.ck-switch { flex: none; position: relative; width: 44px; height: 24px; border-radius: 12px; border: 0; background: var(--line-2); cursor: pointer; transition: background .15s; }
.ck-switch[aria-checked="true"] { background: #1B4D54; }
.ck-switch[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ck-switch::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.ck-switch[aria-checked="true"]::after { transform: translateX(20px); }
[dir="rtl"] .ck-switch[aria-checked="true"]::after { transform: translateX(-20px); }
.ck-modal__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 22px; }