:root{--bg-color:#f8fafc;--text-dark:#0f172a;--text-muted:#64748b;--primary:#2563eb;--primary-hover:#1d4ed8;--card-bg:#fff;--border-color:#e2e8f0;--danger:#ef4444;--danger-hover:#b91c1c;--success:#10b981;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--shadow-hover:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-dark);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}.app-wrapper{flex-direction:column;min-height:100vh;display:flex}.container{width:100%;max-width:1100px;margin:0 auto;padding:0 20px}.hero{color:#fff;text-align:center;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);margin-bottom:50px;padding:80px 20px;position:relative;overflow:hidden}.hero:after{content:"";z-index:1;background:url("data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"2\" cy=\"2\" r=\"1\" fill=\"rgba(255,255,255,0.05)\"/></svg>");position:absolute;inset:0}.hero-content{z-index:2;animation:.6s ease-out fadeInDown;position:relative}.hero h1{letter-spacing:-.025em;margin-bottom:15px;font-size:3rem;font-weight:700}.hero p.subtitle{color:#cbd5e1;max-width:600px;margin:0 auto;font-size:1.125rem;font-weight:300}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.card-section{padding-bottom:80px}.card-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:30px;display:grid}.empty-state{text-align:center;color:var(--text-muted);background:var(--card-bg);border:1px dashed var(--border-color);border-radius:var(--radius-lg);grid-column:1/-1;padding:40px}.card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);flex-direction:column;padding:24px;transition:all .3s cubic-bezier(.4,0,.2,1);animation:.5s ease-out forwards fadeInUp;display:flex;position:relative;overflow:hidden}.card:hover{box-shadow:var(--shadow-hover);border-color:#bfdbfe;transform:translateY(-5px)}.card:before{content:"";background:var(--primary);opacity:0;width:100%;height:4px;transition:opacity .3s;position:absolute;top:0;left:0}.card:hover:before{opacity:1}.card-icon{color:var(--primary);margin-bottom:16px}.card-title{color:var(--text-dark);margin-bottom:12px;font-size:1.25rem;font-weight:600;line-height:1.3}.card-desc{color:var(--text-muted);flex-grow:1;margin-bottom:24px;font-size:.95rem}.card-link{background-color:var(--text-dark);color:#fff;border-radius:var(--radius-md);justify-content:center;align-items:center;gap:8px;width:max-content;padding:10px 16px;font-size:.875rem;font-weight:500;transition:background-color .2s,transform .1s;display:inline-flex}.card-link:hover{background-color:#000;transform:scale(1.02)}.card-link:active{transform:scale(.98)}.admin-wrapper{background-color:var(--bg-color);min-height:100vh;padding:60px 20px}.admin-container{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);max-width:600px;box-shadow:var(--shadow-lg);margin:0 auto;padding:40px;animation:.4s ease-out fadeInUp}.admin-header-title{margin-bottom:8px;font-size:1.5rem;font-weight:600}.admin-subtitle{color:var(--text-muted);margin-bottom:24px;font-size:.9rem}.form-group{margin-bottom:20px}.form-group label{color:var(--text-dark);margin-bottom:8px;font-size:.875rem;font-weight:600;display:block}.form-group input,.form-group textarea{border:1px solid var(--border-color);border-radius:var(--radius-md);background:#f8fafc;width:100%;padding:12px 14px;font-family:inherit;font-size:.95rem;transition:all .2s}.form-group input:focus,.form-group textarea:focus{border-color:var(--primary);background:#fff;outline:none;box-shadow:0 0 0 3px #2563eb1a}textarea{resize:vertical}.btn-primary{background-color:var(--primary);color:#fff;border-radius:var(--radius-md);cursor:pointer;border:none;justify-content:center;align-items:center;gap:8px;width:100%;padding:12px 24px;font-size:.95rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-primary:hover{background-color:var(--primary-hover);box-shadow:0 4px 6px -1px #2563eb33}.btn-primary:active{transform:translateY(1px)}.error-text{color:var(--danger);margin-top:10px;font-size:.875rem;font-weight:500;display:none}.success-text{color:var(--success);border-radius:var(--radius-md);text-align:center;background:#ecfdf5;border:1px solid #a7f3d0;margin-top:12px;padding:10px;font-size:.875rem;font-weight:500;display:none}.back-link{color:var(--text-muted);align-items:center;gap:6px;margin-bottom:24px;font-size:.9rem;font-weight:500;transition:color .2s;display:inline-flex}.back-link:hover{color:var(--text-dark)}.admin-course-list{flex-direction:column;gap:12px;display:flex}.admin-course-item{border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:#fff;justify-content:space-between;align-items:center;padding:16px;transition:border-color .2s;display:flex}.admin-course-item:hover{border-color:#cbd5e1}.admin-course-item-info{flex-grow:1;margin-right:20px;overflow:hidden}.admin-course-item-title{color:var(--text-dark);white-space:nowrap;text-overflow:ellipsis;margin-bottom:4px;font-size:.95rem;font-weight:600;overflow:hidden}.admin-course-item-url{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;overflow:hidden}.btn-delete{color:var(--text-muted);border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;background-color:#0000;justify-content:center;align-items:center;padding:8px 12px;font-size:.85rem;font-weight:500;transition:all .2s;display:inline-flex}.btn-delete:hover{color:var(--danger);background-color:#fef2f2;border-color:#fca5a5}.divider{background-color:var(--border-color);height:1px;margin:30px 0}.footer{text-align:center;color:var(--text-muted);margin-top:auto;padding:40px 20px;font-size:.875rem}@media (width<=640px){.hero{padding:60px 20px}.hero h1{font-size:2rem}.hero p.subtitle{font-size:1rem}.admin-container{padding:24px}}