@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";:root,[data-theme=light]{--bg-primary:#fff;--bg-secondary:#f8f9fc;--bg-tertiary:#f1f3f9;--bg-card:#fff;--bg-card-hover:#f8f9fc;--bg-overlay:#0006;--text-primary:#111827;--text-secondary:#6b7280;--text-tertiary:#9ca3af;--text-inverse:#fff;--accent:#4f46e5;--accent-light:#eef2ff;--accent-hover:#4338ca;--accent-subtle:#4f46e514;--success:#059669;--success-light:#ecfdf5;--warning:#d97706;--warning-light:#fffbeb;--error:#dc2626;--error-light:#fef2f2;--info:#2563eb;--info-light:#eff6ff;--border:#e5e7eb;--border-light:#f3f4f6;--border-focus:#4f46e5;--shadow-sm:0 1px 2px #0000000a;--shadow-md:0 4px 12px #0000000f;--shadow-lg:0 12px 40px #00000014;--shadow-xl:0 24px 60px #0000001f;--shadow-accent:0 4px 16px #4f46e533;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--transition:.2s cubic-bezier(.4, 0, .2, 1);--font:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--badge-bg:#ef4444;--badge-text:#fff;--nav-bg:#fff;--nav-border:#e5e7eb;--nav-active:#4f46e5;--nav-inactive:#9ca3af}[data-theme=dark]{--bg-primary:#0f1117;--bg-secondary:#1a1d2a;--bg-tertiary:#242736;--bg-card:#1a1d2a;--bg-card-hover:#242736;--bg-overlay:#0009;--text-primary:#f9fafb;--text-secondary:#9ca3af;--text-tertiary:#6b7280;--text-inverse:#111827;--accent:#818cf8;--accent-light:#818cf81f;--accent-hover:#6366f1;--accent-subtle:#818cf80f;--success:#34d399;--success-light:#34d3991a;--warning:#fbbf24;--warning-light:#fbbf241a;--error:#f87171;--error-light:#f871711a;--info:#60a5fa;--info-light:#60a5fa1a;--border:#2d3348;--border-light:#242736;--border-focus:#818cf8;--shadow-sm:0 1px 2px #0003;--shadow-md:0 4px 12px #0000004d;--shadow-lg:0 12px 40px #0006;--shadow-xl:0 24px 60px #00000080;--shadow-accent:0 4px 16px #818cf833;--nav-bg:#1a1d2a;--nav-border:#2d3348;--nav-active:#818cf8;--nav-inactive:#6b7280}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;font-size:16px}body{font-family:var(--font);background:var(--bg-secondary);color:var(--text-primary);min-height:100dvh;transition:background var(--transition), color var(--transition);line-height:1.6;overflow-x:hidden}a{color:inherit;text-decoration:none}button{cursor:pointer;background:0 0;border:none;font-family:inherit}input,select,textarea{font-family:inherit;font-size:inherit}img{max-width:100%;display:block}.app-shell{background:var(--bg-primary);flex-direction:column;width:100%;max-width:1400px;min-height:100dvh;margin:0 auto;display:flex;position:relative;box-shadow:0 0 40px #0000000d}.page-content{padding:16px 20px;padding-bottom:calc(90px + env(safe-area-inset-bottom));flex:1;overflow-y:auto}.bottom-nav{background:var(--nav-bg);border-top:1px solid var(--nav-border);width:100%;max-width:1400px;padding:8px 0;padding-bottom:max(8px, env(safe-area-inset-bottom));z-index:100;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.nav-item{border-radius:var(--radius-md);color:var(--nav-inactive);transition:all var(--transition);flex-direction:column;align-items:center;gap:2px;padding:4px 12px;font-size:11px;font-weight:500;display:flex}.nav-item.active{color:var(--nav-active)}.nav-item.active svg{transform:scale(1.1)}.nav-item svg{width:22px;height:22px;transition:transform var(--transition)}.page-header{justify-content:space-between;align-items:center;margin-bottom:8px;padding:16px 0;display:flex}.page-header h1{letter-spacing:-.5px;font-size:24px;font-weight:700}.page-header .subtitle{color:var(--text-secondary);margin-top:2px;font-size:14px}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);transition:all var(--transition);padding:16px}.card:hover{background:var(--bg-card-hover);box-shadow:var(--shadow-md)}.card-accent{border-left:3px solid var(--accent)}.btn{border-radius:var(--radius-md);transition:all var(--transition);white-space:nowrap;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:15px;font-weight:600;display:inline-flex}.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-accent)}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 6px 20px #4f46e54d}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{background:var(--bg-card-hover);border-color:var(--accent)}.btn-danger{background:var(--error);color:#fff}.btn-danger:hover{background:#b91c1c}.btn-full{width:100%}.btn-google{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border);box-shadow:var(--shadow-sm);padding:14px 24px;font-size:16px}.btn-google:hover{box-shadow:var(--shadow-md);border-color:var(--accent)}.btn-google svg,.btn-google img{width:20px;height:20px}.input-group{margin-bottom:16px}.input-group label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-size:13px;font-weight:600;display:block}.input{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);width:100%;color:var(--text-primary);transition:all var(--transition);outline:none;padding:12px 16px;font-size:15px}.input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-subtle)}.input::placeholder{color:var(--text-tertiary)}.banner{background:linear-gradient(135deg, var(--accent), #7c3aed);color:#fff;border-radius:var(--radius-lg);margin-bottom:20px;padding:20px;position:relative;overflow:hidden}.banner:before{content:"";background:#ffffff14;border-radius:50%;width:200px;height:200px;position:absolute;top:-50%;right:-30%}.banner h2{margin-bottom:4px;font-size:18px;font-weight:700;position:relative}.banner p{opacity:.9;font-size:14px;position:relative}.child-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);transition:all var(--transition);align-items:center;gap:14px;margin-bottom:12px;padding:16px;display:flex}.child-card:hover{box-shadow:var(--shadow-md);border-color:var(--accent)}.child-avatar{border-radius:var(--radius-full);background:var(--accent-light);width:48px;height:48px;color:var(--accent);flex-shrink:0;justify-content:center;align-items:center;font-size:20px;font-weight:700;display:flex}.child-info{flex:1;min-width:0}.child-info h3{white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:600;overflow:hidden}.child-info .school-name{color:var(--text-secondary);font-size:13px}.child-status{border-radius:var(--radius-full);padding:4px 10px;font-size:12px;font-weight:600}.child-status.validated{background:var(--success-light);color:var(--success)}.child-status.pending{background:var(--warning-light);color:var(--warning)}.attendance-item{border-bottom:1px solid var(--border-light);align-items:center;gap:12px;padding:14px 0;display:flex}.attendance-item:last-child{border-bottom:none}.attendance-icon{border-radius:var(--radius-md);flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.attendance-icon.scan-in{background:var(--success-light);color:var(--success)}.attendance-icon.scan-out{background:var(--info-light);color:var(--info)}.attendance-details{flex:1}.attendance-details .time{font-size:15px;font-weight:600}.attendance-details .label{color:var(--text-secondary);font-size:13px}.toast-container{z-index:9999;width:90%;max-width:420px;position:fixed;top:20px;left:50%;transform:translate(-50%)}.toast{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-xl);align-items:center;gap:12px;margin-bottom:8px;padding:16px;animation:.3s ease-out slideDown;display:flex}.toast.success{border-left:4px solid var(--success)}.toast.error{border-left:4px solid var(--error)}.toast.scan{border-left:4px solid var(--accent)}.toast-icon{border-radius:var(--radius-full);flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.toast-icon.scan{background:var(--accent-light);color:var(--accent)}.toast-icon.success{background:var(--success-light);color:var(--success)}.toast-content h4{font-size:14px;font-weight:600}.toast-content p{color:var(--text-secondary);font-size:13px}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.login-page{background:var(--bg-primary);text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100dvh;padding:40px 24px;display:flex}.login-logo{background:linear-gradient(135deg, var(--accent), #7c3aed);border-radius:var(--radius-xl);width:80px;height:80px;box-shadow:var(--shadow-accent);justify-content:center;align-items:center;margin-bottom:24px;display:flex}.login-logo svg{color:#fff;width:40px;height:40px}.login-title{letter-spacing:-.5px;margin-bottom:8px;font-size:28px;font-weight:800}.login-subtitle{color:var(--text-secondary);max-width:280px;margin-bottom:40px;font-size:15px}.login-divider{width:100%;max-width:320px;color:var(--text-tertiary);align-items:center;gap:12px;margin:24px 0;font-size:13px;display:flex}.login-divider:before,.login-divider:after{content:"";background:var(--border);flex:1;height:1px}.phone-link{color:var(--text-secondary);cursor:pointer;transition:color var(--transition);font-size:14px}.phone-link:hover{color:var(--accent)}.empty-state{text-align:center;padding:48px 24px}.empty-state .icon{background:var(--accent-light);width:64px;height:64px;color:var(--accent);border-radius:var(--radius-full);justify-content:center;align-items:center;margin:0 auto 16px;display:flex}.empty-state h3{margin-bottom:8px;font-size:17px;font-weight:600}.empty-state p{color:var(--text-secondary);max-width:260px;margin:0 auto;font-size:14px}.modal-overlay{background:var(--bg-overlay);z-index:200;justify-content:center;align-items:flex-end;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg-card);border-radius:var(--radius-xl) var(--radius-xl) 0 0;width:100%;max-width:480px;max-height:80vh;padding:24px;animation:.3s slideUp;overflow-y:auto}.modal-content h2{margin-bottom:16px;font-size:20px;font-weight:700}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:32px;height:32px;animation:.6s linear infinite spin}.loading-screen{background:var(--bg-primary);flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:100dvh;display:flex}.loading-screen p{color:var(--text-secondary);font-size:14px}@keyframes spin{to{transform:rotate(360deg)}}.qr-container{border-radius:var(--radius-lg);border:1px solid var(--border);background:#fff;flex-direction:column;align-items:center;gap:12px;padding:20px;display:flex}.qr-container canvas{border-radius:var(--radius-sm)}.qr-name{color:#111827;font-size:16px;font-weight:700}.settings-item{border-bottom:1px solid var(--border-light);justify-content:space-between;align-items:center;padding:16px 0;display:flex}.settings-item:last-child{border-bottom:none}.settings-item .left{align-items:center;gap:12px;display:flex}.settings-item .icon-box{border-radius:var(--radius-md);justify-content:center;align-items:center;width:36px;height:36px;display:flex}.settings-item .label{font-size:15px;font-weight:500}.settings-item .description{color:var(--text-secondary);font-size:12px}.toggle-switch{background:var(--border);border-radius:var(--radius-full);cursor:pointer;width:48px;height:26px;transition:background var(--transition);position:relative}.toggle-switch.active{background:var(--accent)}.toggle-switch:after{content:"";width:20px;height:20px;transition:transform var(--transition);box-shadow:var(--shadow-sm);background:#fff;border-radius:50%;position:absolute;top:3px;left:3px}.toggle-switch.active:after{transform:translate(22px)}.flex-center{justify-content:center;align-items:center;display:flex}.flex-between{justify-content:space-between;align-items:center;display:flex}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mb-16{margin-bottom:16px}.text-center{text-align:center}.text-sm{font-size:13px}.text-secondary{color:var(--text-secondary)}.font-semibold{font-weight:600}.ios-page{background:#f2f2f7;min-height:100vh}[data-theme=dark] .ios-page{background:#000}.ios-glass{-webkit-backdrop-filter:blur(25px);background:#ffffffb3}[data-theme=dark] .ios-glass{background:#1c1c1eb3}.ios-card{background:#fff;border-radius:24px;margin-bottom:16px;overflow:hidden;box-shadow:0 8px 32px #0000000a}[data-theme=dark] .ios-card{background:#1c1c1e}.ios-list-item{border-bottom:.5px solid #0000001a;align-items:center;padding:14px 20px;display:flex}[data-theme=dark] .ios-list-item{border-bottom:.5px solid #ffffff1a}.ios-list-item:last-child{border-bottom:none}.ios-title{letter-spacing:-1px;margin-bottom:24px;font-size:34px;font-weight:700}.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.hide-scrollbar::-webkit-scrollbar{display:none}