WebUI: MD3 projects/proxy pages, sidebar links, CSS animations

- Add projects + proxy nav items to sidebar
- Rewrite projects.html with MD3 cards + tabs + mgmt-cards
- Rewrite proxy.html with MD3 form + mgmt-cards
- CSS: button ripple, card elevation, page fade, tab slide, input glow, nav dot, status pulse, log entry fade, shimmer, scrollbar, badge bounce, card hover mouse-glow (428 lines)

static/web_panel/css/style.css

@@ -331,3 +331,98 @@ h3{font-size:1rem;font-weight:500;letter-spacing:.15px}
   font-size:20px;transition:.2s;
 }
 .theme-toggle:hover{background:rgba(208,188,255,.08)}
+
+/* ═══════════════════════════════════════════
+   MD3 Animations & Micro-interactions
+   ═══════════════════════════════════════════ */
+
+/* ── Button Ripple ── */
+.btn{position:relative;overflow:hidden;transform:translateZ(0)}
+.btn::after{
+  content:"";position:absolute;inset:0;background:radial-gradient(circle at center,currentColor 10%,transparent 10%);
+  background-size:0 0;background-repeat:no-repeat;opacity:0;transition:background-size .4s,opacity .3s;
+}
+.btn:active::after{background-size:300% 300%;opacity:.12;transition:0s}
+
+/* ── Card Elevation Transition ── */
+.card,.stat-card,.mgmt-card,.side-card{
+  transition:box-shadow .3s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1),background .3s;
+}
+.card:hover,.stat-card:hover,.mgmt-card:hover{transform:translateY(-1px)}
+.card:active{transform:translateY(0)}
+
+/* ── Page Transition Fade ── */
+.page-container{animation:pageIn .25s cubic-bezier(.4,0,.2,1)}
+@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
+
+/* ── Tab Indicator Slide ── */
+.tab{position:relative;transition:color .2s,background .25s}
+.tab.active::after{
+  content:"";position:absolute;bottom:0;left:25%;right:25%;height:2px;
+  background:var(--primary);border-radius:2px 2px 0 0;
+  animation:tabSlide .3s cubic-bezier(.4,0,.2,1)
+}
+@keyframes tabSlide{from{transform:scaleX(0)}to{transform:scaleX(1)}}
+
+/* ── Input Focus Glow ── */
+.input{transition:border-color .25s,box-shadow .25s,background .25s}
+.input:focus{animation:inputGlow .6s ease-out}
+@keyframes inputGlow{0%{box-shadow:0 0 0 0 rgba(208,188,255,.4)}100%{box-shadow:0 0 0 4px rgba(208,188,255,0)}}
+
+/* ── Sidebar Collapse ── */
+.sidebar{transition:width .3s cubic-bezier(.4,0,.2,1)}
+.nav-item .nav-label{transition:opacity .25s,width .3s;opacity:1}
+.app-frame.collapsed .nav-label{opacity:0;width:0}
+
+/* ── Nav Item Active Dot ── */
+.nav-item.active::before{
+  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
+  width:3px;height:20px;background:var(--primary);border-radius:0 3px 3px 0;
+  animation:navDotIn .3s cubic-bezier(.4,0,.2,1)
+}
+@keyframes navDotIn{from{height:0;opacity:0}to{height:20px;opacity:1}}
+
+/* ── Status Dot Pulse ── */
+.status-running{animation:statusPulse 2s ease-in-out infinite}
+@keyframes statusPulse{0%,100%{box-shadow:0 0 4px rgba(158,206,106,.4)}50%{box-shadow:0 0 12px rgba(158,206,106,.7)}}
+
+/* ── Loading Skeleton Shimmer ── */
+.skeleton{background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-elevated) 50%,var(--bg-card) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--shape-xs);height:1rem}
+@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
+
+/* ── Progress Bar ── */
+.progress-bar{transition:width .3s cubic-bezier(.4,0,.2,1),opacity .2s}
+
+/* ── Badge Bounce ── */
+@keyframes badgeIn{0%{transform:scale(0);opacity:0}60%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}
+.badge{animation:badgeIn .3s cubic-bezier(.4,0,.2,1)}
+
+/* ── FAB Float ── */
+.fab{transition:box-shadow .3s,transform .2s cubic-bezier(.4,0,.2,1),filter .2s}
+.fab:hover{transform:scale(1.05)}
+
+/* ── Log Entry Fade ── */
+.log-entry{animation:logIn .2s ease-out}
+@keyframes logIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
+
+/* ── Toggle Theme Button Spin ── */
+.theme-toggle{transition:transform .3s cubic-bezier(.4,0,.2,1)}
+.theme-toggle:hover{transform:rotate(30deg)}
+
+/* ── Scrollbar MD3 Style ── */
+::-webkit-scrollbar{width:6px}
+::-webkit-scrollbar-track{background:transparent}
+::-webkit-scrollbar-thumb{background:var(--outline);border-radius:3px}
+::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}
+
+/* ── Ripple on Management Cards ── */
+.mgmt-card,.plugin-card{position:relative;overflow:hidden}
+.mgmt-card::before,.plugin-card::before{
+  content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(208,188,255,.1) 0%,transparent 60%);
+  opacity:0;transition:opacity .3s
+}
+.mgmt-card:hover::before,.plugin-card:hover::before{opacity:1}
+
+/* ── Menu reveal animation for login error ── */
+.err-msg{transition:opacity .3s}
+</style>