.extra-tool-panel{gap:22px}.extra-main-input{min-height:300px}.code-area{font-family:ui-monospace,SFMono-Regular,Consolas,monospace!important;font-size:.82rem!important}.control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.check-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.check-grid label,.check-label{min-height:48px;padding:11px 13px!important;display:flex!important;align-items:center!important;flex-direction:row!important;gap:9px!important;border:1px solid var(--border);border-radius:6px;background:var(--field);color:var(--text)!important}.check-grid input,.check-label input{width:18px!important;height:18px!important;min-height:0!important;accent-color:var(--red)}.option-row{display:flex;flex-wrap:wrap;gap:8px}.stat-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.stat-grid.compact{grid-template-columns:minmax(0,300px)}.stat-grid article{padding:18px 14px;display:flex;flex-direction:column;gap:4px;border:1px solid var(--border);border-radius:8px;background:var(--field)}.stat-grid strong{font-size:clamp(1.2rem,3vw,1.8rem);font-weight:550;overflow-wrap:anywhere}.stat-grid span{color:var(--muted);font-size:.68rem}.stat-grid article.pass{border-color:#286345}.stat-grid article.fail{border-color:#71373a}.extra-output{overflow:hidden;border:1px solid var(--border);border-radius:8px;background:var(--field)}.extra-output>div{padding:10px 12px 10px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.extra-output strong{font-size:.78rem;font-weight:550}.workspace .extra-output textarea{min-height:170px;border:0;border-radius:0;background:transparent;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.82rem}.extra-output pre{min-height:210px;margin:0;padding:18px;overflow:auto;color:var(--accent-soft);font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace}.workspace .small-copy{min-height:34px;padding:6px 10px;font-size:.68rem}.inline-message{padding:11px 13px;border:1px solid var(--border);border-radius:6px;color:var(--muted);background:var(--field)}.inline-message.success{border-color:#275d41;color:#91d8ae}.inline-message.error{border-color:#70383a;color:#f0a0a2}.range-control,.design-controls{padding:18px;display:flex;flex-direction:column;gap:16px;border:1px solid var(--border);border-radius:9px;background:var(--field)}.range-control label,.design-controls>label{display:grid;grid-template-columns:1fr auto;gap:8px}.range-control output,.design-controls output{color:var(--accent-soft);font-size:.72rem}.workspace :is(.range-control,.design-controls) input[type="range"]{grid-column:1/-1;height:6px;min-height:6px;padding:0;border:0;accent-color:var(--red)}.generated-line,.password-input{display:grid;grid-template-columns:minmax(0,1fr) auto}.workspace .generated-line input,.workspace .password-input input{border-radius:6px 0 0 6px}.workspace .generated-line button,.workspace .password-input button{min-width:50px;border-radius:0 6px 6px 0}.strength-meter{height:9px;overflow:hidden;border-radius:99px;background:var(--border)}.strength-meter i{display:block;width:0;height:100%;background:#ef4444;transition:width .2s ease}.strength-meter i[data-level="fair"]{background:#f59e0b}.strength-meter i[data-level="good"]{background:#84cc16}.strength-meter i[data-level="strong"]{background:#22c55e}.strength-summary{display:flex;align-items:center;justify-content:space-between}.strength-summary span{color:var(--muted);font-size:.78rem}.suggestion-list{margin:0;padding-left:20px;color:var(--muted);font-size:.8rem;line-height:1.8}.sub-panel{padding:18px;display:flex;flex-direction:column;gap:14px;border:1px solid var(--border);border-radius:8px;background:var(--field)}.result-list{display:flex;flex-direction:column;border-top:1px solid var(--border)}.result-list p{padding:10px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border)}.result-list span{color:var(--muted);font-size:.72rem}.result-list strong{font-size:.78rem;text-align:right;overflow-wrap:anywhere}.regex-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto 68px;align-items:center;border:1px solid var(--border);border-radius:7px;background:var(--field)}.workspace .regex-bar input{border:0;background:transparent}.regex-bar span{padding:0 8px;color:var(--accent-soft);font-family:monospace}.match-list,.diff-result{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:8px;background:#090909}.match-list>div,.diff-result>div{padding:8px 12px;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;border-bottom:1px solid var(--border);font-size:.75rem}.match-list code,.diff-result code{overflow-wrap:anywhere}.match-list small{color:var(--muted)}.diff-result>p{padding:12px 15px;color:var(--muted);border-bottom:1px solid var(--border)}.diff-result .added{background:#0e2419;color:#b6e8ca}.diff-result .removed{background:#2b1315;color:#f0b2b5}.diff-result .same{color:#777}.design-layout,.color-converter-layout{display:grid;grid-template-columns:minmax(300px,1.2fr) minmax(300px,.8fr);gap:20px}.design-preview,.shape-stage{min-height:460px;border:1px solid var(--border);border-radius:10px}.shape-stage{display:grid;place-items:center;background:radial-gradient(circle at center,var(--accent-surface),var(--background))}.radius-preview,.clip-preview{width:min(55%,240px);aspect-ratio:1;display:grid;place-items:center;color:white;background:linear-gradient(135deg,var(--red),var(--accent-soft));box-shadow:0 22px 50px #0008}.clip-preview{border-radius:0}.generated-button{font-weight:600}.color-converter-layout .design-preview{min-height:360px}.contrast-preview{min-height:240px;padding:30px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;border:1px solid var(--border);border-radius:10px;text-align:center}.contrast-preview strong{font-size:clamp(1.5rem,5vw,3rem)}.contrast-score{display:flex;align-items:end;justify-content:space-between}.contrast-score strong{font-size:clamp(2.5rem,7vw,5rem);font-weight:500;letter-spacing:-.06em}.contrast-score span{margin-bottom:12px;color:var(--muted)}.palette-grid{display:grid;grid-template-columns:repeat(5,1fr);overflow:hidden;border:1px solid var(--border);border-radius:10px}.workspace .palette-grid button{min-height:300px;padding:0;display:flex;flex-direction:column;border:0;border-radius:0;background:var(--swatch)}.palette-grid button span{flex:1}.palette-grid button strong{width:100%;padding:13px 6px;color:white;background:#090909aa;font-size:.72rem}.file-drop{min-height:210px;display:grid!important;place-items:center;align-content:center;gap:6px!important;border:1px dashed var(--accent-border);border-radius:10px;background:var(--accent-surface);cursor:pointer}.file-drop i{font-size:2rem;color:var(--accent-soft)}.file-drop strong{color:var(--text)}.file-drop span{color:var(--muted);font-size:.72rem}.file-drop input{position:absolute;opacity:0;pointer-events:none}.image-workspace{display:grid;grid-template-columns:minmax(300px,1.25fr) minmax(280px,.75fr);gap:20px}.image-workspace[hidden]{display:none}.image-workspace canvas{display:block;width:100%;max-height:520px;object-fit:contain;border:1px solid var(--border);border-radius:10px;background:repeating-conic-gradient(#171717 0 25%,#232323 0 50%) 50%/24px 24px}.calculator-result{min-height:190px;padding:30px;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid var(--accent-border);border-radius:10px;background:radial-gradient(circle at center,var(--accent-surface),var(--field))}.calculator-result>span{color:var(--accent-soft);font-size:.78rem}.calculator-result>strong{font-size:clamp(3rem,10vw,6rem);font-weight:500;letter-spacing:-.07em}.calculator-result>small{color:var(--muted);text-align:center}.unit-layout{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:14px}.workspace .unit-layout>button{width:48px;height:48px;padding:0;border-radius:50%}.unit-output{min-height:48px;padding:12px;display:block;border:1px solid var(--accent-border);border-radius:5px;color:var(--text);background:var(--accent-surface);font-size:1rem}.unit-layout label{display:grid;grid-template-columns:1fr;gap:8px}.unit-layout select{margin-top:6px}
@media(max-width:820px){.stat-grid{grid-template-columns:repeat(3,1fr)}.check-grid{grid-template-columns:1fr 1fr}.design-layout,.color-converter-layout,.image-workspace{grid-template-columns:1fr}.design-preview,.shape-stage{min-height:340px}.palette-grid{grid-template-columns:1fr}.workspace .palette-grid button{min-height:76px;flex-direction:row}.unit-layout{grid-template-columns:1fr}.workspace .unit-layout>button{justify-self:center;transform:rotate(90deg)}}
@media(max-width:560px){.control-grid,.columns{grid-template-columns:1fr}.stat-grid{grid-template-columns:1fr 1fr}.check-grid{grid-template-columns:1fr}.option-row{display:grid;grid-template-columns:1fr 1fr}.design-preview,.shape-stage{min-height:280px}.regex-bar{grid-template-columns:auto minmax(0,1fr) auto 58px}.contrast-score{align-items:start;flex-direction:column}.contrast-score span{margin:0}.image-workspace canvas{max-height:360px}}