Restructure frontend into templates/ and static/

- Move index.html → templates/index.html (Jinja2, uses url_for)
- Extract CSS → static/css/app.css
- Split JS into static/js/: utils.js, dashboard.js, shares.js,
  quotas.js, users.js, main.js
- Switch app.py from send_file to render_template

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

static/css/app.css

@@ -0,0 +1,64 @@
+:root {
+    --bg:      #0d1117;
+    --surf:    #161b22;
+    --surf2:   #21262d;
+    --border:  #30363d;
+    --text:    #e6edf3;
+    --muted:   #8b949e;
+    --accent:  #58a6ff;
+    --green:   #3fb950;
+    --red:     #f85149;
+    --yellow:  #d29922;
+}
+
+body {
+    background: var(--bg);
+    color: var(--text);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+/* Nav */
+.topbar { background: var(--surf); border-bottom: 1px solid var(--border); padding: .75rem 1.5rem; }
+.nav-tabs { border-color: var(--border); }
+.nav-tabs .nav-link { color: var(--muted); border-color: transparent; padding: .6rem 1rem; }
+.nav-tabs .nav-link:hover { color: var(--text); background: var(--surf2); border-color: var(--border); }
+.nav-tabs .nav-link.active { color: var(--text); background: var(--bg); border-color: var(--border) var(--border) var(--bg); }
+
+/* Cards */
+.card { background: var(--surf); border: 1px solid var(--border); border-radius: 8px; }
+.card-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .3rem; }
+
+/* Tables */
+.table { color: var(--text); }
+.table > :not(caption) > * > * { background: transparent; border-color: var(--border); padding: .65rem .85rem; }
+.table thead th { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 500; }
+.table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--surf2); }
+.table tbody tr:hover > * { background: #1c2128; }
+
+/* Forms */
+.form-control, .form-select { background: var(--surf2); border-color: var(--border); color: var(--text); }
+.form-control:focus, .form-select:focus { background: var(--surf2); border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 3px rgba(88,166,255,.15); }
+.form-control::placeholder { color: var(--muted); }
+.input-group-text { background: var(--surf2); border-color: var(--border); color: var(--muted); }
+
+/* Status dot */
+.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; flex-shrink: 0; }
+.dot-green { background: var(--green); box-shadow: 0 0 6px var(--green); }
+.dot-red   { background: var(--red);   box-shadow: 0 0 6px var(--red); }
+
+/* Progress */
+.progress { background: var(--surf2); border-radius: 4px; }
+
+/* Badges */
+.badge-smb { background: #1f3a5f; color: #58a6ff; font-size: .72rem; }
+.badge-nfs { background: #2d1f5f; color: #a78bfa; font-size: .72rem; }
+
+/* Modal */
+.modal-content { background: var(--surf); border: 1px solid var(--border); }
+.modal-header, .modal-footer { border-color: var(--border); }
+.btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); }
+
+/* Toast */
+#toastContainer { position: fixed; top: 1rem; right: 1rem; z-index: 1100; min-width: 260px; }
+
+code { color: var(--accent); background: var(--surf2); padding: .1em .35em; border-radius: 4px; font-size: .87em; }