html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: #eef2f5;
  color: #162033;
  font-family: "Noto Sans Arabic", Tahoma, sans-serif;
}
button, textarea, input { font: inherit; }
textarea { resize: vertical; }
.app-shell {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background:
    radial-gradient(circle at 9% 0%, rgba(20, 184, 166, .10), transparent 28rem),
    radial-gradient(circle at 94% 20%, rgba(245, 158, 11, .08), transparent 24rem),
    linear-gradient(135deg, #f7f9fb 0%, #eef2f5 100%);
}
.app-shell::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; background-image: radial-gradient(#9aa7b5 .7px, transparent .7px); background-size: 22px 22px; mask-image: linear-gradient(to bottom, black, transparent 65%); }
.app-shell > div { position: relative; }
.field:focus-within { box-shadow: 0 0 0 4px rgba(20, 184, 166, .11); }
.result-text { white-space: pre-wrap; }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 2rem; }
.result-panel { min-width: 0; border-right: 1px solid #e8edf1; padding-right: 2rem; }
.result-box { transition: border-color .25s ease, background .25s ease; }
.result-panel.has-result .result-box { border-color: #bce7df; background: #f1fbf9; }
.primary-action { position: relative; overflow: hidden; }
.primary-action::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.16), transparent 65%); transform: translateX(120%); transition: transform .6s ease; }
.primary-action:hover::after { transform: translateX(-120%); }
.copy-action svg, .primary-action svg { stroke-width: 2.2; }
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "+"; display: inline-flex; margin-left: .5rem; align-items: center; justify-content: center; height: 1.25rem; width: 1.25rem; border-radius: .35rem; background: #e5e7eb; color: #64748b; }
details[open] summary::before { content: "-"; background: #ccfbf1; color: #0f766e; }
@media (prefers-reduced-motion: no-preference) {
  .enter { animation: enter .55s ease both; }
  .enter-delay { animation: enter .55s .1s ease both; }
  @keyframes enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 767px) {
  .workspace-grid { grid-template-columns: 1fr; gap: 2rem; }
  .result-panel { border-right: 0; border-top: 1px solid #e8edf1; padding-right: 0; padding-top: 2rem; }
}