.text-case-converter .case-options{border-radius:14px;padding:24px;margin-bottom:16px;background:var(--teb-surface);border:1px solid var(--teb-hairline);box-shadow:var(--teb-shadow-card)}.text-case-converter .case-options .case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-top:16px}.text-case-converter .case-options .case-grid .case-option{background:var(--teb-canvas);border:1px solid var(--teb-hairline);border-radius:8px;padding:16px;cursor:pointer;transition:border-color .15s ease,background .15s ease;text-align:left}.text-case-converter .case-options .case-grid .case-option:hover,.text-case-converter .case-options .case-grid .case-option.active{border-color:var(--teb-primary);background:var(--teb-primary-tint)}.text-case-converter .case-options .case-grid .case-option .case-label{font-size:14px;font-weight:600;color:var(--teb-ink);margin-bottom:4px}.text-case-converter .case-options .case-grid .case-option .case-description{font-size:12px;color:var(--teb-ink-muted)}.text-case-converter .input-section,.text-case-converter .output-section{background:var(--teb-surface);border-radius:14px;padding:24px;margin-bottom:16px;border:1px solid var(--teb-hairline);box-shadow:var(--teb-shadow-card)}.text-case-converter .input-section .input-header,.text-case-converter .output-section .input-header,.text-case-converter .input-section .output-header,.text-case-converter .output-section .output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.text-case-converter .text-input{width:100%;min-height:200px;padding:12px 14px;border:1px solid var(--teb-hairline);border-radius:8px;font-family:var(--teb-font-mono);font-size:13px;line-height:1.55;resize:vertical;transition:border-color .15s ease;background:var(--teb-canvas);color:var(--teb-ink)}.text-case-converter .text-input:focus{outline:none;border-color:var(--teb-primary);box-shadow:var(--teb-ring)}.text-case-converter .text-input::placeholder{color:var(--teb-ink-faint)}.text-case-converter .input-stats,.text-case-converter .output-stats{display:flex;gap:16px;margin-top:12px;flex-wrap:wrap}.text-case-converter .input-stats .stat,.text-case-converter .output-stats .stat{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--teb-ink-muted)}.text-case-converter .input-stats .stat svg,.text-case-converter .output-stats .stat svg{color:var(--teb-primary)}.text-case-converter .output-container{background:var(--teb-canvas);border-radius:8px;padding:16px;margin-bottom:16px;border:1px solid var(--teb-hairline)}.text-case-converter .output-container .output-text{font-family:var(--teb-font-mono);font-size:13px;line-height:1.55;color:var(--teb-ink);white-space:pre-wrap;word-wrap:break-word}.text-case-converter .examples-section{background:var(--teb-surface);border-radius:14px;padding:24px;border:1px solid var(--teb-hairline);box-shadow:var(--teb-shadow-card)}.text-case-converter .examples-section .examples-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:16px}.text-case-converter .examples-section .examples-grid .example{background:var(--teb-canvas);border-radius:8px;padding:16px;border:1px solid var(--teb-hairline);transition:transform .15s ease,border-color .15s ease}.text-case-converter .examples-section .examples-grid .example:hover{transform:translateY(-1px);border-color:var(--teb-primary)}.text-case-converter .examples-section .examples-grid .example .example-input,.text-case-converter .examples-section .examples-grid .example .example-output{font-family:var(--teb-font-mono);font-size:12px;margin-bottom:6px}.text-case-converter .examples-section .examples-grid .example .example-input{color:var(--teb-ink-muted)}.text-case-converter .examples-section .examples-grid .example .example-output{font-weight:600;color:var(--teb-ink)}.text-case-converter .examples-section .examples-grid .example .example-case{font-size:11px;color:var(--teb-primary);font-weight:500}@media (max-width: 768px){.text-case-converter .case-grid{grid-template-columns:1fr}.text-case-converter .input-header,.text-case-converter .output-header{flex-direction:column;gap:12px;align-items:stretch}.text-case-converter .examples-grid{grid-template-columns:1fr}}