.text-case-tool-page { background: radial-gradient(circle at 47% 10%, rgba(85, 74, 181, .2), transparent 28%), radial-gradient(circle at 87% 48%, rgba(46, 83, 172, .14), transparent 30%), linear-gradient(180deg, #020615, #05091b 72%, #071028); }
.text-case-page-icon { color: #d4d6ea; border-color: rgba(160, 154, 220, .38); background: linear-gradient(145deg, rgba(121, 111, 196, .24), rgba(39, 36, 91, .42)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 36px rgba(118, 105, 216, .13); font-size: 31px; font-weight: 750; }.text-case-page-hero .eyebrow { color: #aaa0ef; }
.text-case-workspace { padding: 25px; border: 1px solid rgba(103, 118, 166, .24); border-radius: 18px; background: linear-gradient(145deg, rgba(18, 28, 53, .95), rgba(6, 14, 33, .97)); box-shadow: 0 25px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025); }.text-case-field { display: grid; gap: 8px; }.text-case-label-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; }.text-case-label-row label { color: #d8dbe9; font-size: 13px; font-weight: 650; }.text-case-label-row span { color: #7f869d; font-size: 11px; }.text-area-shell { position: relative; }.text-area-shell textarea { width: 100%; min-height: 154px; padding: 14px 49px 14px 15px; resize: vertical; color: #f3f5ff; border: 1px solid #35415f; border-radius: 10px; outline: 0; background: #091228; font: 13px/1.65 Inter, ui-sans-serif, system-ui, sans-serif; }.text-area-shell textarea::placeholder { color: #6f768b; }.text-area-shell textarea:focus { border-color: #8777db; box-shadow: 0 0 0 3px rgba(135, 119, 219, .1); }.text-area-shell button { width: 34px; height: 34px; position: absolute; right: 9px; bottom: 9px; display: grid; place-items: center; color: #c8ccde; border: 1px solid rgba(112, 125, 165, .32); border-radius: 8px; background: rgba(18, 29, 55, .9); cursor: pointer; }.text-area-shell button:hover { color: white; border-color: rgba(143, 128, 224, .6); }
.conversion-actions { margin: 17px 0 23px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }.conversion-actions button { min-height: 41px; padding: 8px 10px; color: #c8cce0; border: 1px solid rgba(117, 128, 174, .38); border-radius: 8px; background: rgba(13, 23, 48, .78); font-size: 11px; font-weight: 650; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }.conversion-actions button:hover { transform: translateY(-1px); color: white; border-color: rgba(139, 122, 230, .68); }.conversion-actions button.active { color: white; border-color: #8472e4; background: linear-gradient(135deg, #7654df, #5269d9); box-shadow: 0 8px 21px rgba(94, 77, 206, .2); }.conversion-actions .clear-converter-button { color: #d0d4e2; border-color: rgba(132, 143, 171, .35); background: rgba(77, 86, 110, .55); }.converted-text-field { padding-top: 22px; border-top: 1px solid rgba(100, 114, 160, .16); }.output-shell textarea { background: rgba(5, 12, 29, .7); }.text-case-status { min-height: 24px; margin: 0; padding-top: 9px; color: #a99cf0; font-size: 11px; }.text-case-information article > span { color: #a99cf0; font-size: 18px; font-weight: 700; }
@media (max-width: 860px) {
  .conversion-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .text-case-workspace { padding: 18px; }
  .text-case-label-row { align-items: flex-start; flex-direction: column; gap: 5px; }
  .conversion-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .conversion-actions button { min-width: 0; overflow-wrap: anywhere; }
  .conversion-actions .clear-converter-button { grid-column: 1 / -1; }
  .text-area-shell textarea { min-height: 140px; }
}