:root{--bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);--card-bg: rgba(255, 255, 255, .85);--text-main: #2d3436;--text-secondary: #636e72;--color-a: #0984e3;--color-b: #a29bfe;--color-b-alt: #84fb95;--color-c: #f1c40f;--color-d: #e67e22;--color-f: #e74c3c;--shadow: 0 10px 30px rgba(0, 0, 0, .1);--transition: all .4s cubic-bezier(.175, .885, .32, 1.275)}body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg-gradient);min-height:100vh;display:flex;flex-direction:column;align-items:center;color:var(--text-main);overflow-x:hidden}.view{width:100%;max-width:1400px;padding:40px 20px;display:flex;flex-direction:column;gap:40px;transition:var(--transition)}.view.hidden{display:none}#login-view{max-width:500px;justify-content:center;min-height:80vh}.login-container{display:flex;flex-direction:column;gap:20px;background:var(--card-bg);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);padding:40px;border-radius:32px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.4)}input[type=tel]{padding:25px;border:3px solid #ecf0f1;border-radius:20px;font-size:2rem;text-align:center;letter-spacing:15px;font-weight:800;outline:none;color:var(--text-main);transition:var(--transition)}input[type=tel]::placeholder{letter-spacing:normal;font-weight:500;font-size:1.2rem;color:var(--text-secondary);opacity:.5}input[type=tel]:focus{border-color:var(--color-a);box-shadow:0 0 20px #0984e333}.primary-btn{background:linear-gradient(135deg,#0984e3,#6c5ce7);color:#fff;border:none;padding:22px;border-radius:20px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:var(--transition);box-shadow:0 10px 20px #6c5ce74d}.primary-btn:hover{transform:translateY(-3px);box-shadow:0 15px 25px #6c5ce766}.primary-btn:active{transform:translateY(0)}.error-msg{color:var(--color-f);text-align:center;font-weight:600;animation:shake .5s ease-in-out}.error-msg.hidden{display:none}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}header{text-align:center;margin-bottom:20px}header h1{font-size:3.5rem;font-weight:800;margin:0;background:linear-gradient(to right,#0984e3,#74b9ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-1px}header p{font-size:1.2rem;color:var(--text-secondary);font-weight:500}.students-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:30px;width:100%}@media(min-width:700px){.students-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1100px){.students-grid{grid-template-columns:repeat(3,1fr)}}.student-card{background:var(--card-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:24px;padding:30px;box-shadow:var(--shadow);display:flex;justify-content:space-between;align-items:center;transition:var(--transition);border:1px solid rgba(255,255,255,.3);position:relative;overflow:hidden}.student-card:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 20px 40px #00000026}.student-info{display:flex;flex-direction:column;gap:4px}.student-name{font-size:2rem;font-weight:700;color:var(--text-main)}.student-status{font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary)}.grade-display{display:flex;align-items:center;gap:15px}.grade-letter{font-size:3.5rem;font-weight:900;line-height:1;transition:var(--transition)}.grade-emoji{font-size:3rem;transition:var(--transition)}.card-a{border-left:12px solid var(--color-a)}.card-b{border-left:12px solid #55efc4}.card-c{border-left:12px solid var(--color-c)}.card-d{border-left:12px solid var(--color-d)}.card-f{border-left:12px solid var(--color-f)}.text-a{color:var(--color-a)}.text-b{color:#00b894}.text-c{color:var(--color-c)}.text-d{color:var(--color-d)}.text-f{color:var(--color-f)}@keyframes pop-in{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.student-card{animation:pop-in .6s cubic-bezier(.23,1,.32,1) both}.grade-changed{animation:pulse .5s ease-in-out}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.bg-circle{position:fixed;z-index:-1;border-radius:50%;filter:blur(80px);opacity:.4}.circle-1{width:400px;height:400px;background:#0984e3;top:-100px;left:-100px}.circle-2{width:500px;height:500px;background:#00d2d3;bottom:-150px;right:-150px}footer{margin-top:60px;display:flex;justify-content:center;gap:20px;padding-bottom:40px}.admin-btn{background:#fff;border:2px solid #a29bfe;color:#a29bfe;padding:12px 24px;border-radius:50px;font-weight:700;font-size:1rem;cursor:pointer;transition:var(--transition);opacity:.6;text-decoration:none;display:inline-block}.admin-btn:hover{opacity:1;background:#a29bfe;color:#fff;transform:translateY(-2px);box-shadow:0 4px 15px #a29bfe66}.admin-btn:active{transform:translateY(0)}#modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:99999;cursor:default}