.dashboard-flex-wrap{display:flex;gap:1rem;flex-wrap:wrap;justify-content:stretch}.dashboard-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}@media(max-width:900px){.container{padding:.5rem}.dashboard-card-grid{grid-template-columns:1fr}}@media(max-width:600px){.container{padding:.25rem}.dashboard-card-grid{grid-template-columns:1fr}.card{padding:.75rem;margin-bottom:.75rem}}.navbar-brand{display:flex;align-items:center}.hamburger-btn{display:none;background:none;border:none;color:#fff;cursor:pointer;padding:.5rem;margin-right:2rem;border-radius:4px;transition:background-color .2s}.hamburger-btn:hover{background-color:#ffffff1a}.navbar-menu{display:flex;align-items:left;gap:1rem;flex-wrap:wrap;justify-content:flex-start}.navbar-links{display:flex;gap:.5rem;padding-right:1rem;flex-wrap:wrap;justify-content:flex-start}@media(min-width:769px){.navbar .container{flex-direction:row;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:0}.navbar .container>div{flex-direction:row;gap:1rem;margin-right:35px;align-items:center;flex-wrap:nowrap;width:auto}.navbar-link{display:inline-block;width:auto;padding:.75rem;text-align:center;font-size:1rem;white-space:nowrap;overflow-wrap:anywhere}}.navbar-user{display:flex;align-items:center;gap:.3rem;padding-right:3rem}@media(max-width:768px){.navbar{position:relative}.hamburger-btn{display:block;margin-left:auto}.navbar-menu{position:absolute;top:100%;left:0;right:0;background:#202c20;backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);border-bottom:1px solid rgba(255,255,255,.18);box-shadow:0 4px 24px #20386414;flex-direction:column;padding:1rem;flex-wrap:wrap;align-items:flex-start;transform:translateY(-100%);opacity:0;visibility:hidden;transition:all .3s ease;z-index:999}.navbar-menu.open{transform:translateY(0);flex-direction:column;width:100%;color:#fff;background:#202c2067;opacity:1;visibility:visible;gap:.25rem;flex-wrap:wrap;align-items:flex-start}.navbar-menu.open .navbar-links{flex-direction:column;width:100%;gap:0}.navbar-menu.open .navbar-link{display:block;overflow-wrap:anywhere;width:100%;padding:.75rem 0;text-align:left;font-size:1.1rem;border-bottom:1px solid rgba(255,255,255,.1)}.navbar-menu.open .navbar-link:last-child{border-bottom:none}.navbar-menu.open .navbar-user{flex-direction:column;width:100%;gap:.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1)}.navbar-menu.open .navbar.scrolled .navbar-menu{background:#000000e6}}.form-input{width:100%!important;box-sizing:border-box}body{margin:0;font-family:system-ui,Arial,sans-serif;background:#f4f4f4;color:#222;padding-top:4rem}.navbar{position:fixed;top:0;left:0;width:100%;background:#202c20;backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);border-bottom:1px solid rgba(255,255,255,.18);box-shadow:0 4px 24px #20386414;color:#fff;padding:1rem;display:flex;justify-content:space-between;align-items:center;z-index:1000;transition:background .3s ease}.navbar.scrolled{background:#000c}.navbar a{color:#fff;text-decoration:none;margin:0 .5rem;font-weight:700;position:relative;transition:color .2s}.navbar a:after{content:"";display:block;width:0;height:2px;background:#fff;transition:width .3s;position:absolute;left:0;bottom:-2px}.navbar a:hover{color:#207985}.navbar a:hover:after{width:100%}.footer{background:#000;color:#fff;padding:1rem;text-align:center;margin-top:2rem}.container{max-width:1200px;margin:0 auto;padding:1rem}.social-icons{transition:transform .2s,box-shadow .2s;border-radius:50%;padding:.3rem;display:inline-flex;align-items:center;justify-content:center;background:#ffffffea;box-shadow:0 2px 8px #00000014}.social-icons:hover{transform:scale(1.15);box-shadow:0 4px 16px #00000026;background:#0b804954}.logo{display:flex}.card{background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000000d;padding:1rem;margin-bottom:1rem}.card:hover{box-shadow:0 4px 16px rgba(0,0,0,.1.5);transition:.5s ease-in-out;transform:translateY(-5px)}.btn{background:#207985;text-decoration:none;color:#fff;border:none;border-radius:6px;padding:.5rem 1rem;font-weight:700;cursor:pointer;transition:background .2s}.btn:hover{background:#1741a3;text-decoration:none}.create-acc-btn:hover{background:linear-gradient(to right,#86a3e0,#1d4ed8);text-decoration:none}.contact-btn{background:#2a8a4d;text-decoration:none;color:#fff;border:none;border-radius:6px;padding:.5rem 1rem;font-weight:700;cursor:pointer;transition:background .2s}.animate-on-scroll{opacity:0;transform:translateY(50px);transition:opacity .6s ease,transform .6s ease}.animate-on-scroll.animate{opacity:1;transform:translateY(0)}.lesson-history{position:relative}.timeline-item{margin-bottom:2rem;padding:1.5rem;background:linear-gradient(135deg,#f8fafc,#e2e8f0);border-radius:12px;border-left:4px solid #207985;box-shadow:0 2px 10px #0000000d;transition:transform .3s ease,box-shadow .3s ease}.timeline-item:hover{transform:translateY(-2px);box-shadow:0 4px 20px #0000001a}.timeline-item h3{color:#1e40af;margin-bottom:1rem;font-size:1.2rem;display:flex;align-items:center;gap:.5rem}.fun-fact,.historical-note{background:linear-gradient(135deg,#fef3c7,#fde68a);padding:1rem;border-radius:8px;margin:1rem 0;border-left:4px solid #f59e0b;font-style:italic}.innovation-highlight{background:linear-gradient(135deg,#dbeafe,#bfdbfe);padding:1rem;border-radius:8px;margin:1rem 0;border-left:4px solid #3b82f6}.code-example,.code-nightmare{background:#1e293b;color:#e2e8f0;padding:1rem;border-radius:8px;margin:1rem 0;overflow-x:auto}.code-example pre,.code-nightmare pre{margin:0;font-family:Courier New,monospace}.code-nightmare .caption{color:#ef4444;font-weight:700;margin-top:.5rem}.browser-war{display:flex;align-items:center;gap:1rem;justify-content:center;margin:1rem 0;flex-wrap:wrap}.browser-icon{background:#dc2626;color:#fff;padding:.5rem 1rem;border-radius:20px;font-weight:700}.loser{color:#dc2626;font-weight:700}.evolution-demo{display:flex;gap:2rem;justify-content:center;margin:1rem 0;flex-wrap:wrap}.css-box{padding:1rem 2rem;background:#e2e8f0;border-radius:8px;font-weight:700;transition:all .3s ease}.css-box.animated{background:linear-gradient(135deg,#207985,#1d4ed8);color:#fff;animation:pulse 2s infinite}.timeline-wow{background:linear-gradient(135deg,#fecaca,#f87171);padding:1rem;border-radius:8px;margin:1rem 0;border-left:4px solid #ef4444}.lang-comparison{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center;margin:1rem 0}.lang-box{background:#1e293b;color:#e2e8f0;padding:1rem;border-radius:8px}.lang-box h4{margin:0 0 .5rem;color:#3b82f6}.lang-box code{font-family:Courier New,monospace;font-size:.9rem}.vs{font-weight:700;font-size:1.2rem;color:#6b7280}.caption{text-align:center;color:#6b7280;font-style:italic;margin-top:.5rem}.standardization-demo{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}.recipe-box,.chef-box{background:linear-gradient(135deg,#dcfce7,#bbf7d0);padding:1rem;border-radius:8px;text-align:center;border:2px solid #22c55e}.evolution-showcase{display:flex;justify-content:space-between;gap:.5rem;margin:1rem 0;flex-wrap:wrap}.evolution-stage{display:flex;flex-direction:column;align-items:center;background:linear-gradient(135deg,#e0e7ff,#c7d2fe);padding:.75rem;border-radius:8px;min-width:120px;border:2px solid #6366f1}.stage{background:#6366f1;color:#fff;padding:.25rem .5rem;border-radius:12px;font-weight:700;font-size:.8rem;margin-bottom:.5rem}.problem-demo{margin:1rem 0}.dom-comparison{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.old-way,.new-way{padding:1rem;border-radius:8px;text-align:center}.lego-analogy{display:flex;gap:.5rem;justify-content:center;margin:1rem 0;flex-wrap:wrap}.lego-piece{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff;padding:.75rem 1rem;border-radius:8px;font-weight:700;box-shadow:0 2px 8px #0003;transition:transform .3s ease}.lego-piece:hover{transform:translateY(-3px) rotate(5deg)}.virtual-dom-demo{display:flex;align-items:center;justify-content:center;gap:2rem;margin:1rem 0;flex-wrap:wrap}.dom-layer{display:flex;flex-direction:column;align-items:center;gap:1rem}.label{background:#374151;color:#fff;padding:.5rem 1rem;border-radius:20px;font-size:.9rem}.virtual-content,.real-content{display:flex;gap:1rem}.content-box{background:#e5e7eb;padding:.75rem 1rem;border-radius:6px;min-width:100px;text-align:center}.content-box.updated{background:#22c55e;color:#fff;animation:highlight .5s ease}.arrow{font-size:2rem;color:#6366f1}.adoption-timeline{display:flex;justify-content:space-between;margin:1rem 0;gap:.5rem;flex-wrap:wrap}.adoption-point{background:linear-gradient(135deg,#a855f7,#7c3aed);color:#fff;padding:.5rem .75rem;border-radius:6px;font-size:.8rem;text-align:center;min-width:100px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes highlight{0%{background:#fbbf24;transform:scale(1.1)}to{background:#22c55e;transform:scale(1)}}@media(max-width:768px){.lang-comparison{grid-template-columns:1fr;gap:.5rem}.dom-comparison{grid-template-columns:1fr}.evolution-showcase,.adoption-timeline,.browser-war{flex-direction:column}}.avatar{width:45px;height:45px;border-radius:50%;background-color:#207985;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer;transition:background-color .2s}.avatar:hover{background-color:#1741a3}.float-demo,.flexbox-demo,.grid-demo{margin:1rem 0}.float-box{padding:.5rem 1rem;background:#6366f1;color:#fff;border-radius:4px;margin:.5rem}.float-box.left{float:left;margin-right:1rem}.float-box.right{float:right;margin-left:1rem}.flex-container{display:flex;justify-content:space-between;align-items:center;background:#f3f4f6;padding:1rem;border-radius:8px;flex-wrap:wrap;gap:.5rem}.flex-item{background:#10b981;color:#fff;padding:.75rem 1rem;border-radius:6px;font-weight:700;min-width:60px;text-align:center}.grid-container{display:grid;grid-template-areas:"header header header" "sidebar main aside" "footer footer footer";gap:.5rem;background:#f3f4f6;padding:1rem;border-radius:8px;min-height:200px}.grid-item{padding:.75rem;border-radius:6px;text-align:center;font-weight:700;color:#fff}.header{grid-area:header;background:#ef4444}.sidebar{grid-area:sidebar;background:#8b5cf6}.main{grid-area:main;background:#10b981}.aside{grid-area:aside;background:#f59e0b}.footer{grid-area:footer;background:#6366f1}.callback-hell{background:#7f1d1d;color:#fecaca;padding:1rem;border-radius:8px;margin:1rem 0;border-left:4px solid #ef4444}.es6-comparison{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}.old-way,.new-way{padding:1rem;border-radius:8px}.old-way{background:linear-gradient(135deg,#fee2e2,#fecaca);border:2px solid #ef4444}.new-way{background:linear-gradient(135deg,#dcfce7,#bbf7d0);border:2px solid #22c55e}.async-demo{margin:1rem 0}.async-comparison{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.promise-way,.async-await-way{padding:1rem;border-radius:8px}.promise-way{background:linear-gradient(135deg,#fef3c7,#fde68a);border:2px solid #f59e0b}.async-await-way{background:linear-gradient(135deg,#dbeafe,#bfdbfe);border:2px solid #3b82f6}.modern-features{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:1rem 0}.feature{background:linear-gradient(135deg,#e0e7ff,#c7d2fe);padding:.75rem;border-radius:6px;border:2px solid #6366f1;font-size:.9rem}.feature code{background:#6366f11a;padding:.25rem .5rem;border-radius:4px;color:#4338ca}.react-evolution{display:flex;align-items:center;justify-content:center;gap:1rem;margin:1rem 0;flex-wrap:wrap}.stage{background:linear-gradient(135deg,#dcfce7,#bbf7d0);padding:1rem;border-radius:8px;border:2px solid #22c55e;text-align:center;min-width:200px}.hooks-demo{margin:1rem 0}.hook-example{background:#1e293b;color:#e2e8f0;padding:1rem;border-radius:8px;font-family:Courier New,monospace}.performance-demo{margin:1rem 0}.optimization-types{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem}.opt-type{background:linear-gradient(135deg,#fef3c7,#fde68a);padding:.75rem;border-radius:6px;border:2px solid #f59e0b;text-align:center;font-size:.9rem}.ecosystem-showcase{margin:1rem 0}.tech-stack{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}.stack-item{background:linear-gradient(135deg,#a855f7,#7c3aed);color:#fff;padding:.5rem .75rem;border-radius:6px;font-weight:700;text-align:center;flex:1;min-width:80px}.server-architecture{display:flex;align-items:center;justify-content:center;gap:1rem;margin:1rem 0;flex-wrap:wrap}.server-box,.html-box,.browser-box{padding:1rem;border-radius:8px;font-weight:700;text-align:center;min-width:100px}.server-box{background:linear-gradient(135deg,#1e40af,#3730a3);color:#fff}.html-box{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff}.browser-box{background:linear-gradient(135deg,#059669,#047857);color:#fff}.ajax-demo{margin:1rem 0}.ajax-comparison{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.old-web,.new-web{padding:1rem;border-radius:8px;text-align:center}.old-web{background:linear-gradient(135deg,#fee2e2,#fecaca);border:2px solid #ef4444}.new-web{background:linear-gradient(135deg,#dcfce7,#bbf7d0);border:2px solid #22c55e}.api-showcase{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;margin:1rem 0}.api-provider{background:linear-gradient(135deg,#e0e7ff,#c7d2fe);padding:.75rem;border-radius:6px;border:2px solid #6366f1;text-align:center;font-size:.9rem}.modern-backend{margin:1rem 0}.backend-stack{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;margin-bottom:1rem}.service{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:.75rem;border-radius:6px;text-align:center;font-weight:700}.database-evolution{display:flex;justify-content:space-between;gap:1rem;margin:1rem 0;flex-wrap:wrap}.era{background:linear-gradient(135deg,#dbeafe,#bfdbfe);padding:1rem;border-radius:8px;border:2px solid #3b82f6;text-align:center;flex:1;min-width:120px}.sql-demo{margin:1rem 0}.sql-example{background:#1e293b;color:#e2e8f0;padding:1rem;border-radius:8px}.sql-example pre{margin:0;font-family:Courier New,monospace;font-size:.9rem}.database-types{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:1rem 0}.db-type{background:linear-gradient(135deg,#dcfce7,#bbf7d0);padding:.75rem;border-radius:6px;border:2px solid #22c55e;text-align:center;font-size:.9rem}.modern-database{margin:1rem 0}.cloud-features{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap}.cloud-features .feature{background:linear-gradient(135deg,#a855f7,#7c3aed);color:#fff;padding:.5rem .75rem;border-radius:6px;font-weight:700;text-align:center;flex:1;min-width:80px;font-size:.9rem}.security-evolution{display:flex;justify-content:space-between;gap:1rem;margin:1rem 0;flex-wrap:wrap}.era Innocence{background:linear-gradient(135deg,#dcfce7,#bbf7d0);border:2px solid #22c55e}.era Warning{background:linear-gradient(135deg,#fef3c7,#fde68a);border:2px solid #f59e0b}.era Defense{background:linear-gradient(135deg,#dbeafe,#bfdbfe);border:2px solid #3b82f6}.injection-demo{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}.vulnerable-code,.safe-code{padding:1rem;border-radius:8px}.vulnerable-code{background:linear-gradient(135deg,#fee2e2,#fecaca);border:2px solid #ef4444}.safe-code{background:linear-gradient(135deg,#dcfce7,#bbf7d0);border:2px solid #22c55e}.auth-evolution{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:.5rem;margin:1rem 0}.auth-method{background:linear-gradient(135deg,#e0e7ff,#c7d2fe);padding:.75rem;border-radius:6px;border:2px solid #6366f1;text-align:center;font-size:.9rem}.security-layers{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:.5rem;margin:1rem 0}.security-layer{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:.75rem;border-radius:6px;text-align:center;font-weight:700;font-size:.9rem}@media(max-width:768px){.es6-comparison,.async-comparison,.modern-features{grid-template-columns:1fr}.react-evolution{flex-direction:column}.optimization-types,.tech-stack{grid-template-columns:1fr}.database-evolution{flex-direction:column}.database-types,.cloud-features{grid-template-columns:1fr}.security-evolution{flex-direction:column}.injection-demo{grid-template-columns:1fr}.auth-evolution,.security-layers{grid-template-columns:1fr 1fr}}.lesson-history{display:flex;flex-direction:column;gap:1.5rem;width:100%;max-width:700px;margin:0 auto 2rem;padding:1rem;box-sizing:border-box}.timeline-item{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000f;padding:1.2rem 1rem;margin-bottom:1rem;transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden}.animate-on-scroll{opacity:0;transform:translateY(40px);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)}.animate-on-scroll.visible{opacity:1;transform:none}@media(max-width:600px){.lesson-history{padding:.5rem;max-width:100vw;gap:1rem}.timeline-item{padding:.8rem .5rem;font-size:.98rem}}.overview{width:100%;max-width:700px;margin:0 auto 2rem;padding:1rem;box-sizing:border-box;background:#f9f9f9;border-radius:10px;font-size:1.08rem}@media(max-width:600px){.overview{padding:.5rem;max-width:100vw;font-size:.97rem}}