.cli-top, .cli-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
                      gap:var(--s3) var(--s5); align-items:stretch; }
.cli-grid { margin-top:var(--s5);
            transition:grid-template-columns .45s ease, column-gap .45s ease; }


.cli-endpoint { display:flex; flex-direction:column; gap:var(--s2); min-width:0; }

.ep-bars { display:flex; flex-direction:column; gap:5px; list-style:none; margin:0; padding:0; }
.ep-bars li { --tone-rgb:var(--acc-rgb); display:flex; align-items:baseline; gap:var(--s2);
              border-left:2px solid rgb(var(--tone-rgb)); padding:3px var(--s3);
              background:linear-gradient(90deg, rgba(var(--tone-rgb),.18), transparent 90%);
              font:var(--fs-micro)/1.3 var(--mono); color:var(--muted); min-width:0; }
.ep-bars li[data-tone="yellow"] { --tone-rgb:var(--yellow-rgb); }
.ep-bars li[data-tone="uncensored"] { --tone-rgb:var(--uncensored-rgb); }
.ep-bars b { flex:none; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
             color:rgb(var(--tone-rgb)); }
.ep-field { display:grid; gap:var(--s1); min-width:0; }
.ep-label { font:600 var(--fs-micro)/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
            color:var(--faint); }
.ep-url-row { display:flex; align-items:center; gap:var(--s2); margin:0;
              border-left:2px solid var(--acc); padding:4px 0 4px var(--s3); min-width:0; }
.ep-url { font:500 var(--fs-code)/1.4 var(--mono); color:var(--text); background:none; padding:0;
          word-break:break-all; min-width:0; }
.ep-copy { flex:none; background:none; border:0; padding:4px; cursor:pointer; color:var(--faint);
           line-height:0; font:600 var(--fs-micro)/1 var(--mono); white-space:nowrap; }
.ep-copy:hover { color:var(--text); }
.ep-copy svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.4; }
.ep-copy.copied { color:var(--acc); }
.cli-endpoint .cli-prices { width:100%; }

.cli-grid > .term { grid-column:1; grid-row:1; }
.cli-grid > .cli-box { grid-column:2; grid-row:1; }
.term { border:var(--bd) solid var(--line2); box-shadow:var(--shadow);
        background:var(--panel-code); overflow:hidden; }
.term-bar { display:flex; align-items:center; gap:var(--s2);
            padding:var(--s2) var(--s3); border-bottom:1px solid var(--line);
            background:rgba(var(--bg2-rgb),.6); }
.term-bar .dot { width:10px; height:10px; border-radius:50%; background:var(--grey); flex:none; }
.term-bar .term-title { margin-left:var(--s2); font:var(--fs-micro) var(--mono); color:var(--faint);
                        min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.term-body { padding:var(--s4); font:var(--fs-code)/1.85 var(--mono); min-height:260px; }
.term-vid { display:block; width:100%; height:auto; cursor:zoom-in; }

.term-bar .term-note { margin-left:auto; flex:none; font:var(--fs-micro) var(--ui);
                       color:var(--faint); white-space:nowrap; }
.tl { white-space:pre-wrap; word-break:break-word; }
.tl.cmd { color:var(--text); }
.tl.cmd::before { content:"$ "; color:var(--acc); }
.tl.out { color:var(--muted); }
.tl.ok { color:var(--acc); }
.tl.ok::before { content:"✓ "; }
.tl.ai { color:var(--violet); }
.tl.ai::before { content:"● "; }

.tl.caret::after { content:""; display:inline-block; width:9px; height:1.05em;
                   vertical-align:-.18em; background:var(--acc); }

.cli-box { display:flex; flex-direction:column; gap:var(--s4); min-width:0;
           border:var(--bd) solid var(--line2); box-shadow:var(--shadow);
           background:var(--panel-solid); padding:var(--s5);
           overflow:hidden; transition:opacity .3s ease; }

.cli-box-title { margin:0; font:600 calc(var(--fs-display) * .72)/1.12 var(--ui); letter-spacing:-.02em;
                 color:var(--text); padding-bottom:var(--s4); border-bottom:1px solid var(--line2); }
.cli-feats { list-style:none; margin:0; padding:0; display:grid; gap:var(--s3);
             font:var(--fs-ui)/1.5 var(--ui); color:var(--muted); }
.cli-feats li { padding-left:var(--s5); position:relative; }
.cli-feats li::before { content:""; position:absolute; left:0; top:.6em;
                        width:11px; height:2px; background:var(--acc); }
.cli-actions { margin-top:auto; display:grid; justify-items:center; gap:var(--s3); }
.cli-actions .btn { width:100%; }
.cli-src { display:inline-flex; align-items:center; gap:var(--s2); text-decoration:none;
           font:600 var(--fs-micro)/1 var(--mono); letter-spacing:.04em; color:var(--muted); }
.cli-src:hover { color:var(--text); }
.cli-src svg { width:14px; height:14px; flex:none; }

@media (max-width:1079px) {
  .cli-top, .cli-grid { grid-template-columns:minmax(0,1fr); }
  .cli-grid > .term, .cli-grid > .cli-box { grid-column:auto; grid-row:auto; }
}

@media (min-width:1080px) { .cli-box { contain:size; } }

@media (hover:hover) and (min-width:1080px) {
  .cli-grid:has(.term-vid:hover) { grid-template-columns:minmax(0,1fr) minmax(0,0fr); column-gap:0; }
  .cli-grid:has(.term-vid:hover) .cli-box { opacity:0; box-shadow:none; }
}