:root { color-scheme: dark; --night:#120E24; --paper:#FFF8EC; --ink:#1B1530; --saffron:#F5B83D; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--night); color: var(--paper); font-family: "Readex Pro", system-ui, Tahoma, sans-serif; min-height: 100dvh; -webkit-font-smoothing: antialiased; }
html[lang="ar"] body { line-height: 1.7; }
:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; border-radius: 12px; }
.glass { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.paper { background: var(--paper); color: var(--ink); border-radius: 28px; box-shadow: 0 30px 60px -20px rgba(4,2,16,.65), 0 2px 0 rgba(255,255,255,.6) inset;
  background-image: radial-gradient(120% 80% at 100% 0%, rgba(245,184,61,.10), transparent 60%), radial-gradient(90% 70% at 0% 100%, rgba(156,140,255,.08), transparent 60%); }
.field { width: 100%; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); padding: 0 16px; height: 56px; font-size: 17px; color: var(--paper); }
textarea.field { height: auto; padding: 12px 16px; }
select.field option { background: #1D1836; }
.field::placeholder { color: rgba(255,248,236,.35); } .field:focus { border-color: var(--saffron); outline: none; background: rgba(255,255,255,.09); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; border-radius: 18px; transition: transform .15s, background .15s, opacity .15s; user-select: none; cursor: pointer; text-align: center; }
.btn:active { transform: scale(.98); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn-primary { background: var(--saffron); color: var(--ink); box-shadow: 0 0 0 1px rgba(245,184,61,.35), 0 12px 40px -8px rgba(245,184,61,.45); } .btn-primary:hover { background: #F9D27F; }
.btn-glass { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--paper); } .btn-glass:hover { background: rgba(255,255,255,.12); }
.btn-danger { background: rgba(232,69,95,.18); color: #F48A9B; }
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 12px; font-size: 14px; font-weight: 500; }
.notice { border-radius: 16px; padding: 12px 16px; }
.notice-error { border: 1px solid rgba(232,69,95,.4); background: rgba(232,69,95,.1); color: #F48A9B; }
.notice-ok { border: 1px solid rgba(47,191,155,.4); background: rgba(47,191,155,.1); color: #7FDCC4; }
.notice-info { border: 1px solid rgba(156,140,255,.35); background: rgba(156,140,255,.1); color: #D5CEFF; }
.blob { position: fixed; border-radius: 999px; filter: blur(90px); opacity: .45; pointer-events: none; z-index: 0; animation: drift 22s ease-in-out infinite; }
@keyframes drift { 0%,100% { transform: translate3d(0,0,0) scale(1) } 50% { transform: translate3d(4%,-3%,0) scale(1.08) } }
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(.97) } to { opacity: 1; transform: none } }
@keyframes pop { 0% { transform: scale(.5); opacity: 0 } 70% { transform: scale(1.08); opacity: 1 } 100% { transform: scale(1) } }
@keyframes deal { from { opacity: 0; transform: translateY(40px) rotate(-4deg) scale(.94) } to { opacity: 1; transform: translateY(0) rotate(-1.5deg) scale(1) } }
@keyframes toss { to { opacity: 0; transform: translateX(140px) rotate(18deg) } }
@keyframes shake { 0%,100% { transform: none } 25% { transform: translateX(-8px) } 75% { transform: translateX(8px) } }
@keyframes spin { to { transform: rotate(360deg) } }
.rise { animation: rise .5s cubic-bezier(.2,.9,.3,1.1) both } .pop { animation: pop .5s cubic-bezier(.2,.9,.3,1.2) both }
.deal { animation: deal .7s cubic-bezier(.2,.9,.3,1.1) both } .toss { animation: toss .45s ease-in both } .shake { animation: shake .35s }
.spinner { width: 28px; height: 28px; border-radius: 999px; border: 3px solid rgba(245,184,61,.3); border-top-color: var(--saffron); animation: spin .9s linear infinite; }
#wheel { transition: transform 4.2s cubic-bezier(.12,.75,.12,1); }
details > summary::-webkit-details-marker { display: none; }
.hide { display: none !important; }
.skeleton { background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 20px; }
@keyframes shimmer { to { background-position: -200% 0 } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } #wheel { transition-duration: .35s !important; } }