html { color-scheme: light; }
html.dark { color-scheme: dark; }
body { font-family: 'Cairo', system-ui, sans-serif; }

/* Form controls: one place for light/dark styling */
input:not([type='checkbox']):not([type='radio']):not([type='color']):not([type='file']),
select,
textarea {
  background-color: #fff;
  border: 1px solid #e5e7eb;
  color: #111827;
}
.dark input:not([type='checkbox']):not([type='radio']):not([type='color']):not([type='file']),
.dark select,
.dark textarea {
  background-color: #111827;
  border-color: #374151;
  color: #f3f4f6;
}
.dark input::placeholder,
.dark textarea::placeholder { color: #6b7280; }
.dark input[type='file'] { color: #d1d5db; }

/* Landing page decorations */
.blob { filter: blur(70px); opacity: 0.45; }
.dark .blob { opacity: 0.25; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.float { animation: float 5s ease-in-out infinite; }
.float-delay { animation: float 6s ease-in-out 1s infinite; }
@media (prefers-reduced-motion: reduce) { .float, .float-delay { animation: none; } }

/* Hero typewriter caret */
.caret { display: inline-block; width: 3px; height: 0.9em; margin-inline-start: 0.12em; vertical-align: -0.08em; border-radius: 2px; background: #f97316; animation: caret-blink 1s steps(1) infinite; }
.caret.typing { animation: none; }
@keyframes caret-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }

/* Dashboard artwork studio: checkerboard behind the preview (shows transparent corners) */
.art-checker { background-color: #f3f4f6; background-image: repeating-conic-gradient(#e5e7eb 0 25%, transparent 0 50%); background-size: 24px 24px; }
.dark .art-checker { background-color: #111827; background-image: repeating-conic-gradient(#1f2937 0 25%, transparent 0 50%); }
.art-seg { display: block; text-align: center; padding: 0.375rem 0.25rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; color: #6b7280; }
.art-seg:has(input:checked) { background: #fff; color: #ea580c; box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }
.dark .art-seg { color: #9ca3af; }
.dark .art-seg:has(input:checked) { background: #030712; color: #fb923c; }

/* Dashboard Settings tab */
.set-link { display: flex; align-items: center; gap: 0.6rem; white-space: nowrap; padding: 0.6rem 0.85rem; border-radius: 0.75rem; font-weight: 600; font-size: 0.925rem; color: #4b5563; text-align: start; }
.set-link:hover { background: #f9fafb; }
.set-link.active { background: #fff7ed; color: #c2410c; }
.dark .set-link { color: #d1d5db; }
.dark .set-link:hover { background: #1f2937; }
.dark .set-link.active { background: rgb(249 115 22 / 0.12); color: #fb923c; }
.set-panel { background: #fff; border: 1px solid #f3f4f6; border-radius: 1rem; overflow: hidden; }
.dark .set-panel { background: #111827; border-color: #1f2937; }
.set-head { padding: 1.25rem 1.5rem; border-bottom: 1px solid #f3f4f6; }
.dark .set-head { border-color: #1f2937; }
.set-head h3 { font-size: 1.125rem; font-weight: 800; }
.set-head p { font-size: 0.875rem; color: #6b7280; margin-top: 0.15rem; }
.dark .set-head p { color: #9ca3af; }
.set-body { padding: 1.5rem; }
.set-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.5rem; background: #f9fafb; border-top: 1px solid #f3f4f6; }
.dark .set-foot { background: rgb(31 41 55 / 0.5); border-color: #1f2937; }
.set-save { background: #f97316; color: #fff; border-radius: 0.75rem; padding: 0.55rem 1.4rem; font-weight: 700; margin-inline-start: auto; }
.set-save:hover { background: #ea580c; }
.set-label { display: block; font-size: 0.875rem; font-weight: 700; }
.set-hint { display: block; font-size: 0.75rem; color: #6b7280; margin-top: 0.3rem; }
.dark .set-hint { color: #9ca3af; }
.set-input { margin-top: 0.35rem; width: 100%; border-radius: 0.75rem; padding: 0.55rem 0.8rem; }
.set-msg { font-size: 0.875rem; }
.set-choice { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.8rem 0.5rem; border: 2px solid #e5e7eb; border-radius: 0.9rem; cursor: pointer; font-size: 0.8rem; color: #6b7280; transition: border-color 0.15s, background 0.15s; }
.set-choice b { color: #111827; }
.set-choice:hover { border-color: #fdba74; }
.set-choice:has(input:checked) { border-color: #f97316; background: #fff7ed; }
.set-choice:has(input:focus-visible) { outline: 2px solid #f97316; outline-offset: 2px; }
.dark .set-choice { border-color: #374151; color: #9ca3af; }
.dark .set-choice b { color: #f3f4f6; }
.dark .set-choice:has(input:checked) { border-color: #f97316; background: rgb(249 115 22 / 0.1); }
.set-switch { position: relative; display: inline-block; width: 2.75rem; height: 1.5rem; cursor: pointer; }
.set-switch span { position: absolute; inset: 0; border-radius: 9999px; background: #d1d5db; transition: background 0.2s; }
.set-switch span::after { content: ''; position: absolute; top: 0.2rem; inset-inline-start: 0.2rem; width: 1.1rem; height: 1.1rem; border-radius: 9999px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.2); transition: transform 0.2s; }
.set-switch input:checked + span { background: #f97316; }
.set-switch input:checked + span::after { transform: translateX(1.25rem); }
[dir='rtl'] .set-switch input:checked + span::after { transform: translateX(-1.25rem); }
.set-switch input:focus-visible + span { outline: 2px solid #f97316; outline-offset: 2px; }
.dark .set-switch span { background: #4b5563; }