:root{--bg1:#fff8fd;--bg2:#eef7ff;--panel:#fff;--text:#2f2342;--muted:#6d5d85;--pink:#ff4fa3;--purple:#8a5cff;--blue:#4db6ff;--mint:#6ee7c8;--yellow:#ffd95e;--border:#eadcf7;--shadow:0 10px 30px #7448ad1f;--radius:22px;--font:Verdana,Geneva,Tahoma,sans-serif}*{box-sizing:border-box}html,body{font-family:var(--font);color:var(--text);background:radial-gradient(circle at top left,#ffe5f3 0%,transparent 35%),radial-gradient(circle at top right,#dff3ff 0%,transparent 35%),linear-gradient(180deg,var(--bg1),var(--bg2));min-height:100%;margin:0;padding:0}button,input{font:inherit}.page{max-width:1100px;margin:0 auto;padding:32px 20px 60px}.hero{text-align:center;margin-bottom:28px}.hero-badge{background:linear-gradient(90deg,var(--pink),var(--purple));color:#fff;box-shadow:var(--shadow);border-radius:999px;margin-bottom:16px;padding:8px 16px;font-size:.95rem;font-weight:700;display:inline-block}.hero h1{margin:0;font-size:clamp(2rem,5vw,3.3rem);line-height:1.1}.hero-text{max-width:760px;color:var(--muted);margin:14px auto 0;font-size:1.1rem;line-height:1.6}.panel{border:2px solid var(--border);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffe6;border-radius:28px;padding:28px}.label{margin-bottom:8px;font-weight:700;display:block}.input{border:2px solid var(--border);background:#fff;border-radius:16px;outline:none;width:100%;margin-bottom:24px;padding:14px 16px}.input:focus{border-color:var(--purple);box-shadow:0 0 0 4px #8a5cff1f}h2{margin-top:26px;margin-bottom:14px;font-size:1.35rem}.subject-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;display:grid}.subject-card{cursor:pointer;min-height:120px;box-shadow:var(--shadow);border:2px solid #0000;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:20px 16px;font-weight:700;transition:transform .15s,border-color .15s,box-shadow .15s;display:flex}.subject-card:hover,.assignment-card:hover,.mode-card:hover,.generate-button:hover{transform:translateY(-2px)}.subject-card.active,.assignment-card.selected,.mode-card.selected{border-color:var(--purple);box-shadow:0 0 0 5px #8a5cff1f}.geo{background:linear-gradient(135deg,#d7fff2,#ecfff8)}.math{background:linear-gradient(135deg,#e5e7ff,#f3f4ff)}.english{background:linear-gradient(135deg,#ffe8c7,#fff7ea)}.emoji{font-size:2rem}.assignment-list{gap:12px;display:grid}.assignment-card{text-align:left;border:2px solid var(--border);cursor:pointer;color:var(--text);background:#fff;border-radius:18px;padding:16px}.mode-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;display:grid}.mode-card{border:2px solid var(--border);text-align:left;cursor:pointer;background:#fff;border-radius:20px;flex-direction:column;gap:10px;min-height:130px;padding:18px;display:flex}.mode-card strong{font-size:1.05rem}.mode-card span{color:var(--muted);line-height:1.5}.info-box{background:linear-gradient(135deg,#fff1c7,#fff7df);border:2px solid #ffe08a;border-radius:20px;margin-top:24px;padding:18px}.info-box h3{margin-top:0;margin-bottom:8px}.info-box p{margin:0;line-height:1.6}.error{color:#b42318;background:#ffe4e1;border:1px solid #ffb4ac;border-radius:14px;margin-top:18px;padding:12px 14px}.generate-button{color:#fff;cursor:pointer;background:linear-gradient(90deg,var(--pink),var(--purple),var(--blue));width:100%;box-shadow:var(--shadow);border:none;border-radius:18px;margin-top:24px;padding:18px 20px;font-size:1.1rem;font-weight:700}.generate-button:disabled{opacity:.7;cursor:wait}.overlay-backdrop{z-index:1000;background:#22163273;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.overlay-card{border:2px solid var(--border);width:min(560px,100%);box-shadow:var(--shadow);background:#fff;border-radius:22px;padding:24px}.overlay-card h3{margin-top:0;margin-bottom:10px;font-size:1.35rem}.overlay-card p{color:var(--muted);margin:0;line-height:1.6}.overlay-close{color:#fff;cursor:pointer;background:linear-gradient(90deg,var(--pink),var(--purple));border:none;border-radius:14px;margin-top:18px;padding:12px 16px;font-weight:700}@media (max-width:700px){.panel{padding:20px}.hero-text{font-size:1rem}}