@import "https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap";:root{color:#dce8ff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg:#0b1220;--panel:#111827;--border:#ffffff14;--accent:#22d3ee;--text:#e6edff;--muted:#9eb2d2;background-color:#0b1220;font-family:Vazirmatn,Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:500;line-height:1.5}*,:before,:after{box-sizing:border-box}body{background:var(--bg);min-height:100vh;margin:0}#root{min-height:100vh}button,select,input{font:inherit}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:999px}::-webkit-scrollbar-track{background:0 0}@keyframes floatPulse{0%{opacity:.75;transform:translateY(0)}50%{opacity:1;transform:translateY(-6px)}to{opacity:.75;transform:translateY(0)}}@keyframes spinSlow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.app-shell{min-height:100vh;color:var(--text);background:radial-gradient(circle at 20% 20%,#22d3ee1a,transparent 35%),radial-gradient(circle at 80% 0%,#7c3aed14,transparent 35%),var(--bg);padding:28px 18px 48px;position:relative}.orbs{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.orb{filter:blur(70px);opacity:.45;width:320px;height:320px;animation:8s ease-in-out infinite floatPulse;position:absolute}.orb--cyan{background:#22d3ee;top:-80px;right:-60px}.orb--purple{background:#7c3aed;animation-delay:1.5s;bottom:-120px;left:-80px}.hero{z-index:2;border:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:linear-gradient(135deg,#1c263fcc,#121e34e6);border-radius:22px;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:18px;display:grid;position:relative;box-shadow:0 15px 50px #00000059}.hero__icon{color:#0b1220;background:linear-gradient(135deg,#22d3ee,#7c3aed);border-radius:14px;place-items:center;width:46px;height:46px;display:grid;box-shadow:0 10px 35px #22d3ee40}.hero__text h1{margin:4px 0 6px;font-size:clamp(1.2rem,1.8vw,1.6rem);line-height:1.4}.hero__text .muted{max-width:520px}.hero__badge{justify-content:flex-end;display:flex}.eyebrow{letter-spacing:.08em;color:var(--accent);margin:0;font-size:12px;font-weight:600}.muted{color:var(--muted);margin:0}.muted.tiny{font-size:12px}.chip{border:1px solid var(--border);color:var(--text);background:#ffffff0a;border-radius:999px;align-items:center;gap:8px;padding:10px 14px;font-weight:600;display:inline-flex}.chip--success{color:#5ef0d6;background:#2dd4bf1f;border-color:#2dd4bf59}.layout{z-index:2;gap:18px;margin-top:18px;display:grid;position:relative}@media (min-width:960px){.layout{grid-template-columns:1.1fr .9fr;align-items:start}}.panel{border:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#111827cc;border-radius:22px;padding:18px;box-shadow:0 20px 60px #00000073}.panel__head,.panel__subhead{justify-content:space-between;align-items:center;gap:12px;display:flex}.panel__head h2{margin:6px 0 4px;font-size:1.1rem}.field{flex-direction:column;gap:8px;margin:16px 0 12px;display:flex}.field label{color:var(--text);font-weight:600}.select-box{border:1px solid var(--border);background:#ffffff08;border-radius:14px;align-items:center;gap:12px;padding:12px 14px;transition:border .2s,transform .2s;display:flex;position:relative}.select-box:hover{border-color:#22d3ee99;transform:translateY(-1px)}.select-box select{width:100%;color:var(--text);appearance:none;background:0 0;border:none;outline:none;font-size:15px}.student-list{flex-direction:column;gap:12px;margin-top:10px;display:flex}.loading,.empty{border:1px dashed var(--border);text-align:center;color:var(--muted);background:#ffffff05;border-radius:16px;place-items:center;gap:10px;padding:22px;display:grid}.loading .spin{animation:1.2s linear infinite spinSlow}.student-cards{gap:10px;max-height:60vh;padding-inline:4px;display:grid;overflow:auto}.student-card{border:1px solid var(--border);color:var(--text);cursor:pointer;background:#ffffff08;border-radius:16px;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 14px;transition:border .2s,transform .18s,background .2s;display:grid}.student-card strong{font-size:15px}.student-card:hover{background:linear-gradient(120deg,#22d3ee14,#ffffff05);border-color:#22d3ee99;transform:translateY(-1px)}.student-card--done{background:linear-gradient(120deg,#2dd4bf1f,#ffffff05);border-color:#2dd4bf66}.avatar{width:42px;height:42px;color:var(--accent);border:1px solid var(--border);background:#ffffff0d;border-radius:50%;place-items:center;display:grid}.avatar--lg{color:#7c9bfd;background:radial-gradient(circle at 30% 30%,#7c3aed59,#111827cc);width:64px;height:64px}.accent{color:#5ef0d6}.recorder{min-height:380px}.recorder-card{flex-direction:column;gap:18px;display:flex}.recorder-card__header{justify-content:space-between;align-items:center;display:flex}.student-info{align-items:center;gap:14px;display:flex}.visualizer{border:1px solid var(--border);background:linear-gradient(135deg,#7c3aed14,#22d3ee14);border-radius:16px;min-height:140px;position:relative;overflow:hidden}.visualizer canvas{opacity:.65;width:100%;height:100%}.timer{color:#22d3ee;text-shadow:0 8px 20px #22d3ee4d;place-items:center;font-family:DM Mono,Cascadia Code,monospace;font-size:32px;font-weight:700;display:grid;position:absolute;inset:0}.actions{justify-content:center;display:flex}.actions__row{grid-template-columns:1fr 1.4fr;gap:10px;width:100%;display:grid}.record-btn,.stop-btn,.primary-btn,.ghost-btn{cursor:pointer;border:none;outline:none;justify-content:center;align-items:center;gap:10px;font-weight:700;transition:transform .16s,box-shadow .16s,background .2s;display:inline-flex}.record-btn{color:#fff;background:linear-gradient(135deg,#f43f5e,#ef4444);border-radius:999px;width:160px;padding:14px;position:relative;overflow:hidden;box-shadow:0 15px 35px #ef444459}.record-btn .pulse{border:1px solid #ef444459;border-radius:999px;animation:2s infinite floatPulse;position:absolute;inset:-8px}.record-btn:hover,.primary-btn:hover,.stop-btn:hover,.ghost-btn:hover{transform:translateY(-1px)}.stop-btn{color:#ff8a8a;background:#ef44441a;border:1px solid #ef444459;border-radius:12px;width:140px;padding:12px}.primary-btn{color:#0b1220;background:linear-gradient(135deg,#22d3ee,#7c3aed);border-radius:12px;padding:12px;box-shadow:0 15px 40px #22d3ee59}.primary-btn:disabled{opacity:.65;cursor:not-allowed;box-shadow:none;transform:none}.ghost-btn{color:var(--text);border:1px solid var(--border);background:#ffffff0a;border-radius:12px;padding:10px 14px}.audio-players{gap:10px;display:grid}.player{border:1px solid var(--border);background:#ffffff05;border-radius:14px;padding:10px 12px}.player.secondary{background:#7c3aed14;border-color:#7c3aed59}.player__title{color:var(--text);align-items:center;gap:8px;margin-bottom:6px;font-weight:700;display:inline-flex}.player audio{width:100%}.recorder-empty{min-height:320px}.toast{z-index:50;border:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:999px;align-items:center;gap:10px;padding:12px 16px;display:inline-flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 10px 35px #0000004d}.toast span{font-weight:600}.toast--success{color:#5ef0d6;background:#2dd4bf26;border-color:#2dd4bf59}.toast--error{color:#feb2b2;background:#f8717126;border-color:#f8717159}@media (max-width:640px){.hero{text-align:right;grid-template-columns:1fr}.hero__badge{justify-content:flex-start}.panel__head{flex-direction:column;align-items:flex-start}.record-btn,.stop-btn{width:100%}.actions__row{grid-template-columns:1fr}}