/* Darken / lighten color tool. Needs /assets/css/modern-tool-cards.css (tokens + .cat-color accent). */
.lc, .lc *, .lc *::before, .lc *::after { box-sizing: border-box; }
.lc { display: grid; gap: 1.1rem; }
.lc-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); gap: 1.1rem; align-items: start; }
.lc-panel { min-width: 0; background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 20px; box-shadow: var(--tc-shadow); overflow: hidden; }
.lc-panel__head { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; padding: .9rem 1.25rem; background: var(--tc-surface); border-bottom: 1px solid var(--tc-border); }
.lc-panel__head h3 { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tc-muted); }
.lc-panel__head > i { color: var(--accent); font-size: 1.1rem; }
.lc-panel__head .lc-btn { margin-left: auto; }
.lc-body { display: grid; gap: .6rem; padding: 1.25rem; }
.lc-label { margin: 0; font-size: .8rem; font-weight: 700; color: var(--tc-muted); }
.lc-picker { width: 100%; height: 4.5rem; padding: 0; background: none; border: 1px solid var(--tc-border); border-radius: 14px; cursor: pointer; }
.lc-picker:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lc-input { width: 100%; min-width: 0; height: 2.75rem; padding: 0 .9rem; font: inherit; font-size: .92rem; color: var(--tc-text); background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 12px; }
.lc-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.lc-input.is-invalid { border-color: #dc2626; }
.lc-input[readonly] { background: var(--tc-surface); }
.lc-input--mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88rem; }
.lc-note { margin: 0; font-size: .82rem; font-weight: 600; color: #dc2626; }
.lc-note[hidden] { display: none; }
.lc-rgb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.lc-rgb > div { display: grid; gap: .3rem; min-width: 0; }
.lc-slider { display: flex; align-items: center; gap: 1rem; }
.lc-range { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); height: 2rem; }
.lc-amount { display: flex; align-items: center; gap: .35rem; flex: none; font-weight: 700; color: var(--tc-muted); }
.lc-amount .lc-input { width: 5.5rem; }
.lc-prevs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.lc-prev { display: grid; align-content: end; gap: .1rem; min-width: 0; height: 6.5rem; padding: .7rem .9rem; border: 1px solid var(--tc-border); border-radius: 14px; }
.lc-prev small { font-size: .75rem; font-weight: 700; opacity: .85; }
.lc-prev span { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95rem; font-weight: 700; }
.lc-hint { margin: 0; font-size: .8rem; color: var(--tc-muted); }
.lc-outs { gap: .7rem; }
.lc-out { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; }
.lc-out label { margin: 0; font-size: .8rem; font-weight: 700; color: var(--tc-muted); }
.lc-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 2.75rem; padding: 0 1rem; font-size: .86rem; font-weight: 600; color: var(--tc-text); background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 12px; cursor: pointer; }
.lc-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.lc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lc-btn:disabled { opacity: .75; cursor: default; }
.lc-btn--small { height: 2.4rem; font-size: .82rem; }
.lc-shades { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr)); gap: .5rem; }
.lc-shade { display: grid; align-content: end; justify-items: start; gap: .05rem; height: 5.2rem; padding: .5rem .6rem; font: inherit; text-align: left; border: 2px solid transparent; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); cursor: pointer; }
.lc-shade strong { font-size: .82rem; }
.lc-shade span { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; }
.lc-shade:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lc-shade.is-on { border-color: var(--tc-text); }
.lc-foot { margin: 0; display: flex; gap: .5rem; font-size: .84rem; color: var(--tc-muted); }
.lc-foot i { color: var(--accent); margin-top: .15rem; }