/* Cobra Bot page layout. Colours, type and shape come only from the jinteki.win design
   system tokens (tokens.css) and components (bundle.css); no raw colour values here. */

body { margin: 0; background: var(--bg); }
.cb-wrap { padding: var(--space-5) 16px; box-sizing: border-box; }
.cb-header { margin-bottom: var(--space-4); }
.cb-header .btn { text-decoration: none; display: inline-block; }
.cb-topline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cb-topline .jw-controls { flex-wrap: wrap; }
.cb-wrap a:not(.btn) { color: var(--accent); }
.cb-panels { display: flex; flex-direction: column; gap: var(--space-4); }
.cb-note { color: var(--dim); margin: 0 0 var(--space-3); max-width: 80ch; }
.cb-panels code { font-family: var(--font-mono); font-size: 0.92em; color: var(--text); overflow-wrap: anywhere; }
.cb-commands { margin: 0 0 var(--space-3); }
.cb-commands dt { margin-top: var(--space-3); }
.cb-commands dt:first-child { margin-top: 0; }
.cb-commands dd { margin: var(--space-1) 0 0; color: var(--dim); max-width: 80ch; }
.cb-list { margin: 0 0 var(--space-3); padding-left: 1.2em; color: var(--dim); max-width: 80ch; }
.cb-list li + li { margin-top: var(--space-1); }
.cb-list strong { color: var(--text); }
.cb-figure { margin: 0; }
.cb-figure img { display: block; width: 100%; max-width: 712px; height: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.cb-figure figcaption { margin-top: var(--space-2); color: var(--dim); font-size: 13px; }
.cb-footer { margin-top: var(--space-5); }