:root{--blue:#6e83f5;--green:#33e2bd;--purple:#bd6bee;--dark:#2d3365;--bg:#0b0d1e;--surface:#2d33652e;--surface-hover:#2d336547;--border:#6e83f529;--border-bright:#6e83f552;--text:#8b9ec8;--text-h:#e4e8f8;--gradient:linear-gradient(135deg, #6e83f5 0%, #bd6bee 100%);--glow-blue:0 0 40px #6e83f573;--glow-purple:0 0 40px #bd6bee59;--glow-green:0 0 24px #33e2bd80;--sans:"Cairo", "Space Grotesk", system-ui, -apple-system, sans-serif;--mono:"Cairo", "Space Grotesk", ui-monospace, Consolas, monospace;--heading:"Cairo", "Space Grotesk", system-ui, sans-serif;--radius:18px;--radius-sm:10px;--shadow:0 25px 60px #000000b3;--shadow-sm:0 8px 24px #00000073;font:16px/1.55 var(--sans);letter-spacing:.01em;color:var(--text);background:var(--bg);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background:var(--bg);margin:0}#root{box-sizing:border-box;text-align:left;flex-direction:column;width:100%;max-width:1100px;min-height:100svh;margin:0 auto;display:flex}h1,h2{font-family:var(--heading);color:var(--text-h);margin:0;font-weight:700}p{margin:0}.app[lang=ar]{--sans:"Cairo", system-ui, sans-serif;--mono:"Cairo", system-ui, sans-serif;--heading:"Cairo", system-ui, sans-serif;letter-spacing:0}.app[lang=en]{--sans:"Space Grotesk", system-ui, sans-serif;--mono:"Space Grotesk", ui-monospace, monospace;--heading:"Space Grotesk", system-ui, sans-serif}.app{background:var(--bg);min-height:100svh;font-family:var(--sans);flex-direction:column;display:flex;position:relative;overflow-x:hidden}.app:before,.app:after{content:"";pointer-events:none;z-index:0;border-radius:50%;position:fixed}.app:before{background:radial-gradient(circle,#6e83f51c 0%,#0000 65%);width:850px;height:850px;top:-320px;left:-280px}.app:after{background:radial-gradient(circle,#bd6bee17 0%,#0000 65%);width:700px;height:700px;bottom:-220px;right:-220px}.app-header{z-index:1;border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(24px);background:#0b0d1eb3;padding:18px 40px;position:relative}@media (width<=640px){.app-header{padding:14px 20px}}.app-header__inner{align-items:center;gap:16px;display:flex}.app-header__logo{filter:brightness(0)invert();opacity:.92;flex-shrink:0;width:auto;height:36px;display:block}@media (width<=640px){.app-header__logo{height:26px}}.app-header__divider{background:var(--border);flex-shrink:0;width:1px;height:32px}.app-header__lang{font-size:13px;font-weight:600;font-family:var(--sans);border:1px solid var(--border);color:var(--text-h);cursor:pointer;background:#6e83f512;border-radius:999px;align-items:center;gap:6px;margin-inline-start:auto;padding:6px 14px;transition:background .15s,border-color .15s,transform .18s cubic-bezier(.34,1.56,.64,1);display:inline-flex}.app-header__lang:hover{border-color:var(--border-bright);background:#6e83f526;transform:scale(1.05)}.app-header__lang:active{transform:scale(.96)}.app-header__text{flex-direction:column;display:flex}.app-header__title{letter-spacing:-.2px;background:var(--gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:18px;font-weight:700;line-height:1.2}@media (width<=640px){.app-header__title{font-size:15px}}.app-header__subtitle{color:var(--text);opacity:.55;letter-spacing:.02em;margin-top:2px;font-size:11px}.app-main{z-index:1;flex-direction:column;flex:1;gap:40px;padding:40px;display:flex;position:relative}@media (width<=640px){.app-main{gap:28px;padding:24px 16px}}.panel{background:var(--surface);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--radius);position:relative;overflow:hidden}.panel:before{content:"";background:var(--gradient);opacity:.8;height:1px;position:absolute;top:0;left:0;right:0}.panel__header{padding:24px 28px 0}@media (width<=640px){.panel__header{padding:20px 18px 0}}.panel__title{color:var(--text-h);align-items:center;gap:8px;margin:0 0 6px;font-size:15px;font-weight:600;display:flex}.panel__title-icon{font-size:15px}.panel__desc{color:var(--text);opacity:.75;font-size:13px}.panel__body{flex-direction:column;gap:14px;padding:16px 28px 28px;display:flex}@media (width<=640px){.panel__body{padding:14px 18px 20px}}.textarea{box-sizing:border-box;width:100%;font-family:var(--mono);color:var(--text-h);border:1px solid var(--border);resize:vertical;background:#05071480;border-radius:12px;outline:none;padding:14px 16px;font-size:13px;line-height:1.7;transition:border-color .25s,box-shadow .25s}.textarea:focus{border-color:#6e83f599;box-shadow:0 0 0 3px #6e83f51a,0 0 24px #6e83f514}.textarea::placeholder{color:var(--text);opacity:.25}.btn{font-size:13px;font-weight:600;font-family:var(--sans);border-radius:var(--radius-sm);cursor:pointer;letter-spacing:.01em;white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:7px;padding:10px 20px;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,background .15s,border-color .15s,opacity .15s;display:inline-flex}.btn:hover{transform:scale(1.05)translateY(-1px)}.btn:active{transition-duration:80ms;transform:scale(.96)translateY(0)}.btn:disabled{opacity:.25;cursor:not-allowed;transform:none!important}.btn:focus-visible{outline-offset:3px;outline:2px solid #6e83f5b3}.btn--generate{background:var(--gradient);color:#fff;align-self:flex-start;padding:12px 26px;font-size:14px;position:relative;overflow:hidden}.btn--generate:after{content:"";background:#fff0;transition:background .2s;position:absolute;inset:0}.btn--generate:hover:not(:disabled){box-shadow:0 6px 24px #6e83f580,0 2px 8px #bd6bee4d}.btn--generate:hover:not(:disabled):after{background:#ffffff1a}.btn--primary{background:var(--gradient);color:#fff;padding:8px 14px;font-size:12px}.btn--primary:hover{box-shadow:0 4px 18px #6e83f573}.btn--ghost{color:var(--text);border-color:var(--border);background:#6e83f50f;padding:8px 14px;font-size:12px}.btn--ghost:hover{color:var(--text-h);border-color:var(--border-bright);background:#6e83f51f}.btn--shuffle{color:var(--text-h);border-color:var(--border);background:#6e83f512}.btn--shuffle:hover{border-color:var(--border-bright);background:#6e83f521;box-shadow:0 4px 20px #6e83f533}.shuffle-icon{display:inline-block}.btn--shuffling .shuffle-icon{animation:.55s cubic-bezier(.4,0,.2,1) spin}@keyframes spin{0%{transform:rotate(0)scale(1)}50%{transform:rotate(200deg)scale(1.2)}to{transform:rotate(360deg)scale(1)}}.cards-section__header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-bottom:24px;display:flex}.cards-section__meta{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.cards-section__title{color:var(--text-h);font-size:16px;font-weight:600}.progress-pill{border:1px solid var(--border);background:#6e83f512;border-radius:999px;align-items:center;min-width:115px;height:26px;display:inline-flex;position:relative;overflow:hidden}.progress-pill__fill{background:linear-gradient(90deg,#6e83f561 0%,#bd6bee61 100%);border-radius:999px;transition:width .5s cubic-bezier(.4,0,.2,1);position:absolute;inset:0}.progress-pill__text{z-index:1;color:var(--text-h);white-space:nowrap;letter-spacing:.03em;padding:0 12px;font-size:11px;font-weight:600;position:relative}.banner{border-radius:12px;margin-bottom:24px;padding:14px 20px;font-size:14px;font-weight:500}.banner--success{color:#33e2bd;background:#33e2bd1a;border:1px solid #33e2bd47;box-shadow:0 0 24px #33e2bd12}.cards-grid{grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:22px;display:grid}@media (width<=480px){.cards-grid{grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:14px}}.card-wrapper{flex-direction:column;align-items:center;gap:10px;display:flex}.card-scene{aspect-ratio:3/4;perspective:1100px;width:100%;transition:transform .28s cubic-bezier(.34,1.56,.64,1),filter .28s;position:relative}.card-wrapper:not(.card-wrapper--taken) .card-scene:not(:has(.card--flipped)):hover{filter:drop-shadow(0 0 14px #6e83f599)drop-shadow(0 0 28px #bd6bee4d);transform:translateY(-7px)scale(1.03)}.card{cursor:pointer;width:100%;height:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;will-change:transform;border-radius:16px;transition:transform .65s cubic-bezier(.4,0,.2,1);position:relative}.card:focus-visible{outline-offset:4px;outline:2px solid #6e83f5b3}.card--flipped{cursor:default;transform:rotateY(180deg)}.card--taken{cursor:default}.card__face{backface-visibility:hidden;will-change:transform;box-sizing:border-box;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0;overflow:hidden}.card__face--front{background:linear-gradient(145deg,#080b22 0%,#101640 55%,#090c24 100%);border:1px solid #6e83f540;transform:rotateY(0)}.card__face--front:before{content:"";background:var(--gradient);opacity:.09;border-radius:16px;position:absolute;inset:0}.card__face--front:after{content:"";background:linear-gradient(108deg,#0000 38%,#6e83f512 50%,#0000 62%);width:55%;height:100%;animation:5s ease-in-out infinite shimmer;position:absolute;top:0;left:0;transform:translate(-200%)}.card--taken .card__face--front{filter:saturate(0)brightness(.4);border-color:#ffffff0a}.card--taken .card__face--front:after{display:none}@keyframes shimmer{0%,20%{transform:translate(-200%)}75%,to{transform:translate(380%)}}.card__face--back{-webkit-backdrop-filter:blur(20px);background:#080a1af0;border:1px solid #6e83f559;gap:8px;transform:rotateY(180deg);box-shadow:inset 0 0 40px #6e83f50d,inset 0 0 80px #bd6bee0a}.card__question{-webkit-user-select:none;user-select:none;background:var(--gradient);-webkit-text-fill-color:transparent;z-index:1;-webkit-background-clip:text;background-clip:text;font-size:72px;font-weight:800;line-height:1;animation:3s ease-in-out infinite questionPulse;position:relative}@keyframes questionPulse{0%,to{opacity:1;filter:brightness();transform:scale(1)}50%{opacity:.7;filter:brightness(1.25);transform:scale(.91)}}.card__name{text-align:center;word-break:break-word;z-index:1;background:linear-gradient(135deg,#e4e8f8 0%,#8b9ec8 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:15px;font-weight:700;line-height:1.45;position:relative}.card__note-preview{color:var(--text);text-align:center;opacity:.75;word-break:break-word;-webkit-line-clamp:3;z-index:1;-webkit-box-orient:vertical;margin:0;padding:0 4px;font-size:11px;font-style:italic;line-height:1.5;display:-webkit-box;position:relative;overflow:hidden}.card__note-dot{bottom:10px;background:var(--green);z-index:2;border-radius:50%;width:7px;height:7px;position:absolute;inset-inline-end:10px;box-shadow:0 0 6px #33e2bdb3}.card-note-wrap{flex-direction:column;gap:4px;width:100%;display:flex}.card-note-label{color:var(--text);opacity:.7;letter-spacing:.03em;font-size:11px;font-weight:600}.card-note-input{box-sizing:border-box;width:100%;font-family:var(--sans);color:var(--text-h);border:1px solid var(--border);resize:none;background:#00000059;border-radius:8px;outline:none;padding:8px 10px;font-size:12px;line-height:1.55;transition:border-color .2s,box-shadow .2s}.card-note-input:focus{border-color:#6e83f58c;box-shadow:0 0 0 2px #6e83f51a}.card-note-input::placeholder{color:var(--text);opacity:.3}.card-taken-note{color:var(--text);opacity:.65;text-align:center;word-break:break-word;margin:0;font-size:11px;font-style:italic;line-height:1.5}.card__badge{background:var(--green);color:#0b0d1e;z-index:10;width:26px;height:26px;box-shadow:var(--glow-green), 0 2px 8px #00000080;border-radius:50%;justify-content:center;align-items:center;font-size:13px;font-weight:800;animation:.35s cubic-bezier(.34,1.56,.64,1) badgePop;display:flex;position:absolute;top:9px;right:9px}@keyframes badgePop{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.card-actions{flex-direction:column;gap:6px;width:100%;animation:.22s fadeUp;display:flex}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.card-taken-label{letter-spacing:.1em;text-transform:uppercase;color:var(--green);opacity:.9;text-align:center;padding:2px 0;font-size:10px;font-weight:700}.empty-state{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;padding:80px 20px;display:flex}.empty-state__icon{opacity:.18;filter:grayscale();font-size:54px;line-height:1}.empty-state__text{text-align:center;max-width:320px;color:var(--text);opacity:.6;font-size:15px;line-height:1.65}.empty-state__text strong{color:var(--text-h);opacity:1;font-weight:600}