/* CSS to LESS converter. Needs /assets/css/modern-tool-cards.css (tokens + .cat-code accent). */
.cl, .cl *, .cl *::before, .cl *::after { box-sizing: border-box; }
.cl { display: grid; gap: 1.1rem; }
.cl [hidden] { display: none !important; }
.cl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cl-note { margin: 0; font-size: .85rem; font-weight: 600; color: #dc2626; }
.cl-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
@media (max-width: 900px) { .cl-cols { grid-template-columns: minmax(0, 1fr); } }

.cl-panel { position: relative; min-width: 0; background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 20px; box-shadow: var(--tc-shadow); overflow: hidden; }
.cl-head { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; padding: .85rem 1.25rem; background: var(--tc-surface); border-bottom: 1px solid var(--tc-border); }
.cl-head > i { color: var(--accent); font-size: 1.1rem; }
.cl-head h3 { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tc-muted); }
.cl-head h3 label { margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.cl-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; }
.cl-body { padding: 1rem 1.25rem; }
.cl-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.cl-field { display: flex; align-items: center; gap: .6rem; }
.cl-field label { margin: 0; font-size: .86rem; font-weight: 600; color: var(--tc-text); white-space: nowrap; }

.cl-input { min-width: 8rem; height: 2.4rem; padding: 0 .7rem; font: inherit; font-size: .88rem; color: var(--tc-text); background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 10px; }
.cl-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.cl-switch { position: relative; display: flex; align-items: center; gap: .7rem; margin: 0; cursor: pointer; }
.cl-switch input { position: absolute; width: 2.8rem; height: 1.55rem; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.cl-switch__track { position: relative; flex: none; width: 2.8rem; height: 1.55rem; background: var(--tc-border); border-radius: 999px; transition: background .2s; }
.cl-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.55rem - 6px); height: calc(1.55rem - 6px); background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.cl-switch input:checked + .cl-switch__track { background: var(--accent); }
.cl-switch input:checked + .cl-switch__track::after { transform: translateX(1.25rem); }
.cl-switch input:focus-visible + .cl-switch__track { outline: 2px solid var(--accent); outline-offset: 2px; }
.cl-switch__label { font-size: .9rem; font-weight: 600; color: var(--tc-text); }

.cl-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 2.2rem; padding: 0 .9rem; font: inherit; font-size: .82rem; font-weight: 600; color: var(--tc-text); background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 12px; cursor: pointer; margin: 0; }
.cl-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cl-btn:focus-visible, #cl-file:focus-visible + .cl-btn { outline: 2px solid var(--accent); outline-offset: 2px; }
.cl-btn:disabled { opacity: .45; cursor: not-allowed; }
.cl-btn--danger { color: #dc2626; }
.cl-btn--danger:hover:not(:disabled) { color: #fff; background: #dc2626; border-color: #dc2626; }

.cl-code { padding: 1rem; }
.cl-text, .cl-pre { display: block; width: 100%; height: 26rem; margin: 0; padding: 1rem; overflow: auto; font: .84rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 4; color: var(--tc-text); background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: 12px; }
.cl-text { resize: vertical; white-space: pre; }
.cl-text:focus-visible, .cl-pre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cl-pre code { display: block; font: inherit; white-space: pre; color: inherit; background: none; padding: 0; }
.cl-pre code:empty::before { content: attr(data-empty); color: var(--tc-muted); }
@media (max-width: 900px) { .cl-text, .cl-pre { height: 18rem; } }

.cl-notes { display: grid; gap: .4rem; padding: .8rem 1rem; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .5); border-radius: 12px; }
.cl-warn { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--tc-text); }
.cl-foot { margin: 0; display: flex; gap: .5rem; font-size: .84rem; color: var(--tc-muted); }
.cl-foot i { color: var(--accent); margin-top: .15rem; }