body{margin:0;font-family:Inter,sans-serif;background:linear-gradient(135deg,#0f172a,#1e293b);color:#fff}.navbar{display:flex;justify-content:space-between;padding:20px 40px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;border-bottom:1px solid rgba(255,255,255,.1)}.logo{font-size:22px;font-weight:700}.nav-links a{margin-left:20px;color:#fff;text-decoration:none;transition:.3s}.nav-links a:hover{color:#60a5fa}.home{height:90vh;display:flex;align-items:center;justify-content:center;text-align:center}.hero-title{font-size:52px;animation:fadeUp 1s ease}.hero-text{opacity:.8;margin-top:10px;margin-bottom:25px}.primary-btn{background:linear-gradient(135deg,#3b82f6,#6366f1);border:none;padding:14px 32px;font-size:16px;font-weight:600;color:#fff;border-radius:10px;cursor:pointer;position:relative;overflow:hidden;transition:all .35s ease}.primary-btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 30px #6366f180}.primary-btn:active{transform:scale(.96)}.primary-btn:after{content:"";position:absolute;width:120%;height:120%;background:radial-gradient(circle,rgba(255,255,255,.3),transparent);top:-50%;left:-50%;opacity:0;transition:opacity .3s}.primary-btn:hover:after{opacity:1}.dashboard{padding:40px;max-width:1400px;margin:auto}.dashboard-grid{margin-top:25px;display:grid;grid-template-columns:2fr 1fr;gap:25px}.card{background:#ffffff0d;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:12px;padding:20px;border:1px solid rgba(255,255,255,.1)}.component{padding:12px 14px;margin-top:10px;border-radius:8px;cursor:pointer;background:#ffffff0a;transition:background .3s,transform .2s,box-shadow .3s}.component:hover{background:#ffffff1a;transform:translate(5px)}.component.active{background:linear-gradient(135deg,#3b82f6,#6366f1);color:#fff;font-weight:600;box-shadow:0 6px 18px #3b82f699;transform:scale(1.02);border:1px solid rgba(255,255,255,.2)}.viewer-controls{margin-bottom:12px;display:flex;gap:10px;align-items:center}.viewer-controls button{margin-right:10px;padding:8px 16px;border:none;border-radius:6px;background:#1f2937;color:#fff;cursor:pointer;transition:.25s}.viewer-controls button:hover{background:#3b82f6;transform:translateY(-2px)}.upload-box{animation:fadeUp .5s ease;border:2px dashed rgba(255,255,255,.2);border-radius:12px;padding:30px;text-align:center;transition:.3s;background:#ffffff08;margin-bottom:20px}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.upload-box.drag{border-color:#3b82f6;background:#3b82f61a}.upload-text{margin-bottom:15px;opacity:.8}.upload-btn{padding:12px 26px;border:none;border-radius:8px;font-weight:600;cursor:pointer;background:linear-gradient(135deg,#3b82f6,#6366f1);color:#fff;transition:all .3s}.upload-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #3b82f666}.preview img{margin-top:10px;width:200px;border-radius:8px}.zoom-btn{padding:8px 14px;border:none;border-radius:6px;background-color:#0355a1;color:#fff;font-size:large;border:solid white;cursor:pointer;transition:.25s}.zoom-btn:hover{background:#3b82f6;transform:translateY(-2px)}.zoom-reset{padding:8px 16px;border:none;border-radius:8px;background:#334155;font-size:large;border:solid white;color:#fff;cursor:pointer;transition:.3s}.zoom-reset:hover{background:#3b82f6}.diagram-viewer{height:100%}.component-list{height:500px;overflow-y:auto}.component-list::-webkit-scrollbar{width:6px}.component-list::-webkit-scrollbar-thumb{background:#3b82f6;border-radius:10px}@keyframes fadeUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media(max-width:900px){.dashboard{padding:20px}.dashboard-grid{grid-template-columns:1fr}.diagram-container{height:400px}}.card{animation:fadeUp .6s ease}.diagram-container{height:500px;overflow:hidden;border-radius:10px;display:flex;justify-content:center;align-items:center;background:#ffffff08;border:1px solid rgba(255,255,255,.08)}.diagram-img{max-width:100%;cursor:grab}.diagram-img:active{cursor:grabbing}.card{background:#ffffff0d;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:12px;padding:20px;border:1px solid rgba(255,255,255,.1);animation:fadeUp .6s ease;transition:.3s}.card:hover{transform:translateY(-3px);box-shadow:0 10px 30px #0006}.home{height:90vh;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}.bg-animation{position:absolute;width:200%;height:200%;background:radial-gradient(circle at 30% 30%,rgba(59,130,246,.3),transparent 40%),radial-gradient(circle at 70% 70%,rgba(99,102,241,.3),transparent 40%);animation:moveBackground 15s infinite linear;z-index:0}@keyframes moveBackground{0%{transform:translate(0)}50%{transform:translate(-10%,-10%)}to{transform:translate(0)}}.hero{position:relative;z-index:2;max-width:700px}.hero-text{opacity:.85;margin-top:15px;margin-bottom:30px;font-size:18px}.circle{position:absolute;border-radius:50%;filter:blur(80px);opacity:.6}.circle1{width:300px;height:300px;background:#3b82f6;top:10%;left:15%;animation:float 12s infinite ease-in-out}.circle2{width:300px;height:300px;background:#6366f1;bottom:10%;right:15%;animation:float 15s infinite ease-in-out}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-40px)}to{transform:translateY(0)}}