*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0A0A0A;--card-bg:#050505;--surface:#0D0D0D;--text:#ffffff;--text-secondary:#94A3B8;--text-muted:#64748B;--accent:#3b82f6;--accent-glow:rgba(59,130,246,0.15);--border:rgba(255,255,255,0.05);--border-hover:rgba(255,255,255,0.1);--radius:1.5rem;--radius-sm:0.75rem;--font-sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--font-mono:'JetBrains Mono','Fira Code','Consolas',monospace}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text-secondary);font-family:var(--font-sans);min-height:100vh;display:flex;flex-direction:column;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit}
img{max-width:100%;height:auto}
::selection{background:rgba(59,130,246,0.3)}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:3px}
.container{max-width:1280px;margin:0 auto;padding:0 1.5rem}
.bento{border:1px solid var(--border);border-radius:var(--radius);background:var(--card-bg);box-shadow:0 15px 30px rgba(0,0,0,0.4);position:relative;overflow:hidden}
.bento:hover{border-color:var(--border-hover)}
.glow{position:absolute;top:0;right:0;width:20rem;height:20rem;background:var(--accent-glow);border-radius:50%;filter:blur(90px);pointer-events:none}
.text-accent{color:var(--accent)}
.text-glow{text-shadow:0 0 20px rgba(59,130,246,0.3)}
.btn-accent{display:inline-flex;align-items:center;gap:0.5rem;padding:0.625rem 1.25rem;border-radius:9999px;border:1px solid rgba(59,130,246,0.3);color:var(--accent);font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;background:rgba(59,130,246,0.05);transition:all 0.2s;white-space:nowrap}
.btn-accent:hover{background:rgba(59,130,246,0.1);transform:scale(1.05)}
.btn-ghost{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;border-radius:9999px;color:rgba(255,255,255,0.6);font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;transition:all 0.2s;white-space:nowrap}
.btn-ghost:hover{color:rgba(255,255,255,0.9);background:rgba(255,255,255,0.05)}
.control-btn{display:flex;align-items:center;gap:0.375rem;padding:0.25rem 0.625rem;border-radius:0.25rem;font-size:0.75rem;color:var(--text-secondary);transition:all 0.15s;white-space:nowrap}
.control-btn:hover{color:var(--text);background:rgba(255,255,255,0.05)}
.control-btn.active{background:rgba(59,130,246,0.15);color:var(--accent);border:1px solid rgba(59,130,246,0.3)}
.nav-link{padding:0.5rem 0;font-size:0.6875rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:rgba(255,255,255,0.6);transition:color 0.15s;white-space:nowrap}
.nav-link:hover{color:var(--text)}
.tab-btn{padding:0.75rem 1.25rem;font-weight:600;font-size:0.75rem;letter-spacing:0.05em;text-transform:uppercase;border-bottom:2px solid transparent;transition:all 0.15s;color:var(--text-muted);white-space:nowrap}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{border-bottom-color:var(--accent);color:var(--accent)}
.card-btn{display:flex;flex-direction:column;align-items:center;gap:0.5rem;padding:1rem;background:var(--card-bg);border:1px solid var(--border);border-radius:1rem;transition:all 0.2s;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;cursor:pointer;color:var(--text-secondary)}
.card-btn:hover{border-color:rgba(59,130,246,0.4);background:rgba(8,8,8,1)}
.card-btn svg{color:var(--text-muted);transition:color 0.2s}
.card-btn:hover svg{color:var(--accent)}
.badge{display:inline-flex;align-items:center;padding:0.25rem 0.75rem;border-radius:9999px;font-size:0.75rem;font-family:var(--font-mono);border:1px solid;white-space:nowrap}
.badge-default{background:var(--card-bg);border-color:var(--border);color:var(--text-secondary)}
.badge-accent{background:rgba(59,130,246,0.1);border-color:rgba(59,130,246,0.2);color:var(--accent)}
.badge-warning{background:rgba(234,179,8,0.1);border-color:rgba(234,179,8,0.2);color:#eab308}
.progress-ring{width:100%;height:100%;transform:rotate(-90deg)}
.progress-ring-bg{stroke:rgba(255,255,255,0.02);fill:transparent}
.progress-ring-fill{stroke:var(--accent);fill:transparent;stroke-linecap:round;transition:stroke-dashoffset 1s ease-out}
.milestone-dot{width:1rem;height:1rem;border-radius:50%;border:1px solid var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:0.5rem;color:var(--text-muted);flex-shrink:0;margin-top:0.125rem}
.milestone-dot.completed{border-color:var(--accent);background:rgba(59,130,246,0.2)}
.milestone-dot.completed svg{color:var(--accent)}
.form-input{width:100%;padding:0.75rem 1rem;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:0.9rem;transition:border-color 0.2s}
.form-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,0.15)}
.form-input::placeholder{color:var(--text-muted)}