Mihomo improved

handlers/api.go

@@ -46,8 +46,11 @@ func HandleInterfaces(w http.ResponseWriter, r *http.Request) {
 	type iface struct {
 		*network.InterfaceStats
 		Pending bool   `json:"pending"`
+		Label   string `json:"label,omitempty"`
 	}
 
+	appCfg, _ := config.Load()
+
 	result := make([]iface, 0, len(names))
 	existingNames := map[string]bool{}
 	for _, name := range names {
@@ -59,8 +62,14 @@ func HandleInterfaces(w http.ResponseWriter, r *http.Request) {
 		if cfg, ok := fileCfg[name]; ok {
 			s.Mode = cfg.Mode
 		}
-		_, hasPending := network.GetPendingConfig(name), network.GetPendingConfig(name) != nil
+		hasPending := network.GetPendingConfig(name) != nil
-		result = append(result, iface{s, hasPending})
+		label := ""
+		if appCfg != nil && appCfg.Interfaces != nil {
+			if ic, ok := appCfg.Interfaces[name]; ok {
+				label = ic.Label
+			}
+		}
+		result = append(result, iface{s, hasPending, label})
 	}
 
 	// Also include pending VLAN configs not yet present in the system.
@@ -79,7 +88,13 @@ func HandleInterfaces(w http.ResponseWriter, r *http.Request) {
 			s.IPv4Mask = cfg.Netmask
 			s.Gateway = cfg.Gateway
 		}
-		result = append(result, iface{s, true})
+		label := cfg.Label
+		if label == "" && appCfg != nil && appCfg.Interfaces != nil {
+			if ic, ok := appCfg.Interfaces[name]; ok {
+				label = ic.Label
+			}
+		}
+		result = append(result, iface{s, true, label})
 	}
 
 	ok(w, result)
@@ -149,8 +164,18 @@ func HandleConfig(w http.ResponseWriter, r *http.Request) {
 
 	switch r.Method {
 	case http.MethodGet:
+		appCfg, _ := config.Load()
+		label := ""
+		if appCfg != nil && appCfg.Interfaces != nil {
+			if ic, ok2 := appCfg.Interfaces[name]; ok2 {
+				label = ic.Label
+			}
+		}
 		if cfg := network.GetPendingConfig(name); cfg != nil {
-			ok(w, map[string]interface{}{"config": cfg, "pending": true})
+			if cfg.Label != "" {
+				label = cfg.Label
+			}
+			ok(w, map[string]interface{}{"config": cfg, "pending": true, "label": label})
 			return
 		}
 		fileCfg, err := network.ParseConfig()
@@ -159,11 +184,12 @@ func HandleConfig(w http.ResponseWriter, r *http.Request) {
 			return
 		}
 		if cfg, exists := fileCfg[name]; exists {
-			ok(w, map[string]interface{}{"config": cfg, "pending": false})
+			ok(w, map[string]interface{}{"config": cfg, "pending": false, "label": label})
 		} else {
 			ok(w, map[string]interface{}{
 				"config":  &network.InterfaceConfig{Name: name, Auto: true, Mode: "dhcp", Extra: map[string]string{}},
 				"pending": false,
+				"label":   label,
 			})
 		}
 
@@ -188,6 +214,7 @@ func HandleConfig(w http.ResponseWriter, r *http.Request) {
 			appCfg.Interfaces = map[string]*config.InterfaceConfig{}
 		}
 		appCfg.Interfaces[name] = &config.InterfaceConfig{
+			Label:   cfg.Label,
 			Auto:    cfg.Auto,
 			Mode:    cfg.Mode,
 			Address: cfg.Address,

handlers/mihomo_proxy.go

@@ -0,0 +1,217 @@
+package handlers
+
+import (
+	"io"
+	"log"
+	"net"
+	"net/http"
+	"net/url"
+	"strings"
+
+	"alpine-router/mihomo"
+)
+
+func getMihomoAPIBase() string {
+	cfg, err := mihomo.LoadConfig()
+	if err != nil {
+		return "http://127.0.0.1:9090"
+	}
+	ec, _ := cfg["external-controller"].(string)
+	if ec == "" {
+		ec = "0.0.0.0:9090"
+	}
+	if strings.HasPrefix(ec, "0.0.0.0:") || strings.HasPrefix(ec, ":") {
+		ec = "127.0.0.1" + strings.TrimPrefix(ec, "0.0.0.0")
+	}
+	if !strings.HasPrefix(ec, "http") {
+		ec = "http://" + ec
+	}
+	return ec
+}
+
+func getMihomoSecret() string {
+	cfg, err := mihomo.LoadConfig()
+	if err != nil {
+		return ""
+	}
+	s, _ := cfg["secret"].(string)
+	return s
+}
+
+func getMihomoHostPort() (string, string) {
+	u, err := url.Parse(getMihomoAPIBase())
+	if err != nil {
+		return "127.0.0.1", "9090"
+	}
+	host := u.Hostname()
+	if host == "0.0.0.0" || host == "" {
+		host = "127.0.0.1"
+	}
+	port := u.Port()
+	if port == "" {
+		if u.Scheme == "https" {
+			port = "443"
+		} else {
+			port = "80"
+		}
+	}
+	return host, port
+}
+
+func HandleMihomoAPIProxy(w http.ResponseWriter, r *http.Request) {
+	base := getMihomoAPIBase()
+	secret := getMihomoSecret()
+
+	suffix := strings.TrimPrefix(r.URL.Path, "/api/mihomo/api/")
+	target, err := url.Parse(base + "/" + suffix)
+	if err != nil {
+		fail(w, http.StatusInternalServerError, "parse mihomo url: "+err.Error())
+		return
+	}
+
+	q := r.URL.Query()
+	if r.Method == http.MethodGet {
+		q.Set("nonce", "1")
+	}
+	target.RawQuery = q.Encode()
+
+	proxyReq, err := http.NewRequest(r.Method, target.String(), r.Body)
+	if err != nil {
+		fail(w, http.StatusInternalServerError, "create proxy request: "+err.Error())
+		return
+	}
+
+	for k, vv := range r.Header {
+		if strings.EqualFold(k, "Authorization") {
+			continue
+		}
+		for _, v := range vv {
+			proxyReq.Header.Add(k, v)
+		}
+	}
+	if secret != "" {
+		proxyReq.Header.Set("Authorization", "Bearer "+secret)
+	}
+
+	client := &http.Client{}
+	resp, err := client.Do(proxyReq)
+	if err != nil {
+		fail(w, http.StatusBadGateway, "mihomo api unreachable: "+err.Error())
+		return
+	}
+	defer resp.Body.Close()
+
+	for k, vv := range resp.Header {
+		if strings.EqualFold(k, "Content-Length") {
+			continue
+		}
+		for _, v := range vv {
+			w.Header().Add(k, v)
+		}
+	}
+
+	w.WriteHeader(resp.StatusCode)
+	_, err = io.Copy(w, resp.Body)
+	if err != nil {
+		log.Printf("proxy copy error: %v", err)
+	}
+}
+
+func HandleMihomoWSProxy(w http.ResponseWriter, r *http.Request) {
+	secret := getMihomoSecret()
+	host, port := getMihomoHostPort()
+
+	suffix := strings.TrimPrefix(r.URL.Path, "/api/mihomo/ws/")
+	path := "/" + suffix
+	if r.URL.RawQuery != "" {
+		path += "?" + r.URL.RawQuery
+	}
+
+	hj, ok := w.(http.Hijacker)
+	if !ok {
+		fail(w, http.StatusInternalServerError, "websocket hijack not supported")
+		return
+	}
+
+	clientConn, _, err := hj.Hijack()
+	if err != nil {
+		fail(w, http.StatusInternalServerError, "hijack failed: "+err.Error())
+		return
+	}
+
+	remoteConn, err := net.Dial("tcp", net.JoinHostPort(host, port))
+	if err != nil {
+		fail(w, http.StatusBadGateway, "mihomo ws connect failed: "+err.Error())
+		clientConn.Close()
+		return
+	}
+
+	upgradeReq := "GET " + path + " HTTP/1.1\r\n"
+	upgradeReq += "Host: " + host + ":" + port + "\r\n"
+	upgradeReq += "Upgrade: websocket\r\n"
+	upgradeReq += "Connection: Upgrade\r\n"
+	upgradeReq += "Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==\r\n"
+	upgradeReq += "Sec-WebSocket-Version: 13\r\n"
+	if secret != "" {
+		upgradeReq += "Authorization: Bearer " + secret + "\r\n"
+	}
+	for k, vv := range r.Header {
+		if strings.EqualFold(k, "Upgrade") || strings.EqualFold(k, "Connection") ||
+			strings.EqualFold(k, "Sec-Websocket-Key") || strings.EqualFold(k, "Sec-Websocket-Version") ||
+			strings.EqualFold(k, "Sec-Websocket-Extensions") || strings.EqualFold(k, "Sec-Websocket-Protocol") ||
+			strings.EqualFold(k, "Authorization") {
+			continue
+		}
+		for _, v := range vv {
+			upgradeReq += k + ": " + v + "\r\n"
+		}
+	}
+	for k, v := range r.Header {
+		if strings.EqualFold(k, "Sec-WebSocket-Protocol") {
+			upgradeReq += "Sec-WebSocket-Protocol: " + strings.Join(v, ", ") + "\r\n"
+		}
+		if strings.EqualFold(k, "Sec-WebSocket-Extensions") {
+			upgradeReq += "Sec-WebSocket-Extensions: " + strings.Join(v, ", ") + "\r\n"
+		}
+	}
+	upgradeReq += "\r\n"
+
+	_, err = remoteConn.Write([]byte(upgradeReq))
+	if err != nil {
+		clientConn.Close()
+		remoteConn.Close()
+		return
+	}
+
+	buf := make([]byte, 4096)
+	n, err := remoteConn.Read(buf)
+	if err != nil {
+		clientConn.Close()
+		remoteConn.Close()
+		return
+	}
+
+	respStr := string(buf[:n])
+	if !strings.Contains(respStr, "101") {
+		clientConn.Write(buf[:n])
+		clientConn.Close()
+		remoteConn.Close()
+		return
+	}
+
+	headerEnd := strings.Index(respStr, "\r\n\r\n")
+	if headerEnd >= 0 {
+		clientConn.Write(buf[:n])
+	} else {
+		clientConn.Write(buf[:n])
+	}
+
+	go func() {
+		io.Copy(remoteConn, clientConn)
+		remoteConn.Close()
+	}()
+	go func() {
+		io.Copy(clientConn, remoteConn)
+		clientConn.Close()
+	}()
+}

main.go

@@ -104,6 +104,8 @@ func main() {
 	mux.HandleFunc("/api/mihomo/config.yaml", handlers.HandleMihomoConfigYAML)
 	mux.HandleFunc("/api/mihomo/logs", handlers.HandleMihomoLogs)
 	mux.HandleFunc("/api/mihomo/upload-core", handlers.HandleMihomoUploadCore)
+	mux.HandleFunc("/api/mihomo/api/", handlers.HandleMihomoAPIProxy)
+	mux.HandleFunc("/api/mihomo/ws/", handlers.HandleMihomoWSProxy)
 
 	sub, err := fs.Sub(publicFS, "public")
 	if err != nil {

public/app.js

@@ -64,6 +64,25 @@ function modeLabel(m) {
   return { dhcp: 'DHCP', static: 'Static', loopback: 'Loopback', manual: 'Manual' }[m] || (m || '?');
 }
 
+// ── SVG icons ────────────────────────────────────────────────────────────────
+
+const ICON = {
+  pencil: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15">
+    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+  </svg>`,
+  restart: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15">
+    <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
+    <path d="M3 3v5h5"/>
+  </svg>`,
+  trash: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
+    <path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"/>
+  </svg>`,
+  plus: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13">
+    <path d="M12 5v14M5 12h14"/>
+  </svg>`,
+};
+
 // ── Render ───────────────────────────────────────────────────────────────────
 
 function renderAll() {
@@ -99,6 +118,8 @@ function buildCard(iface, vlans) {
   const hasPending = state.pending.includes(iface.name);
   const sc = stateClass(iface.state);
   const isLo = iface.name === 'lo' || iface.mode === 'loopback';
+  const isUp = iface.state === 'up';
+  const label = iface.label || '';
 
   const card = document.createElement('div');
   card.className = 'iface-card' + (hasPending ? ' has-pending' : '');
@@ -108,23 +129,24 @@ function buildCard(iface, vlans) {
     `<div class="info-row"><span class="info-label">IPv6</span><span class="info-val">${a}</span></div>`
   ).join('');
 
+  const nameBlock = label
+    ? `<div class="card-name-stack">
+        <span class="card-label-text">${label}</span>
+        <span class="card-iface-sub">${iface.name}</span>
+       </div>`
+    : `<span class="card-iface-name">${iface.name}</span>`;
+
   card.innerHTML = `
     <div class="card-header">
       <div class="card-name">
         <span class="state-dot ${sc}"></span>
-        <span>${iface.name}</span>
+        ${nameBlock}
         ${hasPending ? '<span class="pending-badge">несохранено</span>' : ''}
       </div>
-      <div style="display:flex;gap:6px;align-items:center">
       <span class="mode-badge ${iface.mode || 'unknown'}">${modeLabel(iface.mode)}</span>
     </div>
-    </div>
 
     <div class="card-info">
-      <div class="info-row">
-        <span class="info-label">Статус</span>
-        <span class="info-val">${iface.state || 'unknown'}</span>
-      </div>
       <div class="info-row">
         <span class="info-label">IPv4</span>
         <span class="info-val">${iface.ipv4
@@ -136,14 +158,13 @@ function buildCard(iface, vlans) {
         <span class="info-label">Шлюз</span>
         <span class="info-val">${iface.gateway || '<span class="none">&mdash;</span>'}</span>
       </div>
-
       <div class="traffic-row">
         <div class="traffic-item">
-          <span class="traffic-label">RX</span>
+          <span class="traffic-label">↓ RX</span>
           <span class="traffic-val">${fmtBytes(iface.rx_bytes)}</span>
         </div>
         <div class="traffic-item">
-          <span class="traffic-label">TX</span>
+          <span class="traffic-label">↑ TX</span>
           <span class="traffic-val">${fmtBytes(iface.tx_bytes)}</span>
         </div>
         <div class="traffic-item">
@@ -154,10 +175,15 @@ function buildCard(iface, vlans) {
     </div>
 
     <div class="card-actions">
-      <button class="btn btn-success btn-sm" data-action="up"      data-iface="${iface.name}">ON</button>
+      ${!isLo ? `
-      <button class="btn btn-danger  btn-sm" data-action="down"    data-iface="${iface.name}">OFF</button>
+      <label class="toggle-label iface-power-toggle" title="${isUp ? 'Выключить интерфейс' : 'Включить интерфейс'}">
-      <button class="btn btn-ghost   btn-sm" data-action="restart" data-iface="${iface.name}">RESTART</button>
+        <input type="checkbox" ${isUp ? 'checked' : ''} data-action="toggle" data-iface="${iface.name}">
-      <button class="btn btn-primary btn-sm" data-action="config"  data-iface="${iface.name}" style="margin-left:auto">CONFIG</button>
+        <span class="toggle-slider"></span>
+        <span class="iface-toggle-label">${isUp ? 'Вкл' : 'Выкл'}</span>
+      </label>
+      <button class="btn-icon" data-action="restart" data-iface="${iface.name}" title="Перезапустить">${ICON.restart}</button>
+      ` : ''}
+      <button class="btn-icon btn-icon-accent" data-action="config" data-iface="${iface.name}" title="Настроить" style="margin-left:auto">${ICON.pencil}</button>
     </div>
 
     ${!isLo ? buildVLANSection(iface.name, vlans) : ''}
@@ -170,6 +196,8 @@ function buildVLANSection(parentName, vlans) {
   const rows = vlans.map(v => {
     const sc = stateClass(v.state);
     const hasPending = state.pending.includes(v.name);
+    const isUp = v.state === 'up';
+    const label = v.label || '';
     const ip = v.ipv4
       ? v.ipv4 + (v.ipv4_mask ? ' / ' + v.ipv4_mask : '')
       : '<span class="none">&mdash;</span>';
@@ -177,17 +205,21 @@ function buildVLANSection(parentName, vlans) {
       <div class="vlan-row" data-name="${v.name}">
         <div class="vlan-row-left">
           <span class="state-dot ${sc}" style="width:8px;height:8px"></span>
-          <span class="vlan-iface-name">${v.name}</span>
+          ${label
+            ? `<div class="vlan-name-stack"><span class="vlan-label-text">${label}</span><span class="vlan-iface-name">${v.name}</span></div>`
+            : `<span class="vlan-iface-name">${v.name}</span>`}
           <span class="vlan-id-tag">VLAN ${vlanId(v.name)}</span>
           <span class="mode-badge ${v.mode || 'unknown'}">${modeLabel(v.mode)}</span>
           ${hasPending ? '<span class="pending-badge">несохранено</span>' : ''}
         </div>
         <div class="vlan-row-info">${ip}</div>
         <div class="vlan-row-actions">
-          <button class="btn btn-success btn-xs" data-action="up"     data-iface="${v.name}">ON</button>
+          <label class="toggle-label" title="${isUp ? 'Выключить' : 'Включить'}">
-          <button class="btn btn-danger  btn-xs" data-action="down"   data-iface="${v.name}">OFF</button>
+            <input type="checkbox" ${isUp ? 'checked' : ''} data-action="toggle" data-iface="${v.name}">
-          <button class="btn btn-primary btn-xs" data-action="config" data-iface="${v.name}">CONFIG</button>
+            <span class="toggle-slider toggle-sm"></span>
-          <button class="btn btn-danger  btn-xs" data-action="delete" data-iface="${v.name}" title="Удалить VLAN">✕</button>
+          </label>
+          <button class="btn-icon" data-action="config" data-iface="${v.name}" title="Настроить">${ICON.pencil}</button>
+          <button class="btn-icon btn-icon-danger" data-action="delete" data-iface="${v.name}" title="Удалить VLAN">${ICON.trash}</button>
         </div>
       </div>`;
   }).join('');
@@ -199,8 +231,8 @@ function buildVLANSection(parentName, vlans) {
   return `
     <div class="vlan-section">
       <div class="vlan-header">
-        <span class="vlan-title">Теговые VLAN</span>
+        <span class="vlan-title">VLAN</span>
-        <button class="btn btn-ghost btn-xs" data-action="addvlan" data-iface="${parentName}">+ Добавить</button>
+        <button class="btn btn-ghost btn-xs" data-action="addvlan" data-iface="${parentName}">${ICON.plus} Добавить</button>
       </div>
       <div class="vlan-list">
         ${rows}
@@ -251,17 +283,13 @@ async function doAction(name, action) {
     return;
   }
 
-  const btn = document.querySelector(`[data-action="${action}"][data-iface="${name}"]`);
-  if (btn) { btn.disabled = true; btn.textContent = '...'; }
-
   try {
     await post(`/api/interfaces/${name}/${action}`);
     showToast(`${name}: ${action} выполнено`, 'success');
     await loadAll();
   } catch (e) {
     showToast(`${name} ${action}: ${e.message}`, 'error');
-  } finally {
+    await loadAll(); // refresh to restore correct toggle state
-    if (btn) btn.disabled = false;
   }
 }
 
@@ -285,12 +313,12 @@ async function openConfig(name) {
   }
 
   try {
-    const [{ config, pending }, natData] = await Promise.all([
+    const [configData, natData] = await Promise.all([
       get(`/api/config/${name}`),
       get('/api/nat').catch(() => null),
     ]);
     if (natData) state.nat = natData;
-    fillForm(config, pending, name);
+    fillForm(configData.config, configData.pending, name, configData.label || '');
     document.getElementById('modal').classList.remove('hidden');
   } catch (e) {
     showToast('Ошибка загрузки конфига: ' + e.message, 'error');
@@ -313,11 +341,12 @@ async function openNewVLAN(parentName) {
     if (natData) state.nat = natData;
   } catch (_) {}
 
-  fillForm({ auto: true, mode: 'static' }, false, '');
+  fillForm({ auto: true, mode: 'static' }, false, '', '');
   document.getElementById('modal').classList.remove('hidden');
 }
 
-function fillForm(cfg, pending, name) {
+function fillForm(cfg, pending, name, label = '') {
+  document.getElementById('cfgLabel').value   = label;
   document.getElementById('cfgAuto').checked    = !!cfg.auto;
   document.getElementById('cfgAddress').value   = cfg.address || '';
   document.getElementById('cfgNetmask').value   = cfg.netmask || '';
@@ -327,7 +356,6 @@ function fillForm(cfg, pending, name) {
   const mode = cfg.mode === 'static' ? 'static' : 'dhcp';
   setMode(mode);
 
-  // Mark pending visually
   if (pending && name) {
     document.getElementById('modalTitle').textContent = `Настройка: ${name} (несохранённые изменения)`;
   }
@@ -390,6 +418,7 @@ async function saveConfig() {
   const mode = currentMode();
   const cfg = {
     name,
+    label:   document.getElementById('cfgLabel').value.trim(),
     auto:    document.getElementById('cfgAuto').checked,
     mode,
     address: document.getElementById('cfgAddress').value.trim(),
@@ -451,7 +480,6 @@ async function discardAll() {
   }
   state.pending = [];
   renderPendingBanner();
-  renderAll();
   showToast('Изменения отменены', 'info');
   await loadAll();
 }
@@ -471,15 +499,17 @@ function showToast(msg, type = 'info') {
 // ── Event wiring ──────────────────────────────────────────────────────────────
 
 document.getElementById('refreshBtn').addEventListener('click', loadAll);
-
 document.getElementById('applyBtn').addEventListener('click', applyAll);
 document.getElementById('discardAllBtn').addEventListener('click', discardAll);
 
-// Card action buttons (delegated)
+// Card button clicks (delegated)
 document.getElementById('ifaceGrid').addEventListener('click', e => {
   const btn = e.target.closest('[data-action]');
   if (!btn) return;
+  // Don't handle toggle inputs here (handled by 'change' below)
+  if (btn.tagName === 'INPUT' && btn.type === 'checkbox') return;
   const { action, iface } = btn.dataset;
+  if (!action || !iface) return;
   if (action === 'config') {
     openConfig(iface);
   } else if (action === 'addvlan') {
@@ -489,6 +519,13 @@ document.getElementById('ifaceGrid').addEventListener('click', e => {
   }
 });
 
+// Toggle switch (on/off) — delegated change event
+document.getElementById('ifaceGrid').addEventListener('change', e => {
+  const input = e.target.closest('input[data-action="toggle"]');
+  if (!input) return;
+  doAction(input.dataset.iface, input.checked ? 'up' : 'down');
+});
+
 // Modal close
 document.getElementById('closeModal').addEventListener('click', closeModal);
 document.getElementById('cancelConfigBtn').addEventListener('click', closeModal);

public/index.html

@@ -106,6 +106,11 @@
         <div class="form-divider"></div>
       </div>
 
+      <div class="form-row">
+        <label for="cfgLabel">Название (метка)</label>
+        <input type="text" id="cfgLabel" placeholder="Например: WAN, LAN, Гости…" style="font-family:inherit">
+      </div>
+
       <div class="form-row">
         <label class="checkbox-label">
           <input type="checkbox" id="cfgAuto">

public/style.css

@@ -1411,6 +1411,133 @@ select {
   .form-grid-2 { grid-template-columns: 1fr; }
 }
 
+/* ── Icon-only action buttons ── */
+.btn-icon-accent {
+  color: var(--accent);
+}
+.btn-icon-accent:hover {
+  color: var(--accent-h);
+  background: rgba(0, 212, 255, 0.1);
+  text-shadow: 0 0 8px var(--accent-glow);
+}
+.btn-icon-danger {
+  color: var(--muted);
+}
+.btn-icon-danger:hover {
+  color: var(--danger);
+  background: rgba(255, 51, 102, 0.1);
+}
+
+/* ── Card power toggle ── */
+.iface-power-toggle {
+  gap: 8px;
+}
+.iface-toggle-label {
+  font-size: .78rem;
+  font-weight: 600;
+  color: var(--text-dim);
+  min-width: 28px;
+}
+
+/* ── Small toggle (VLAN rows) ── */
+.toggle-sm {
+  width: 30px !important;
+  height: 17px !important;
+  border-radius: 9px !important;
+}
+.toggle-sm::after {
+  width: 11px !important;
+  height: 11px !important;
+}
+.toggle-label input:checked + .toggle-sm::after {
+  transform: translateX(13px) !important;
+}
+
+/* ── Card name with label ── */
+.card-name-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.card-label-text {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--text);
+}
+.card-iface-sub {
+  font-size: .72rem;
+  color: var(--muted);
+  font-family: "JetBrains Mono", "Fira Code", monospace;
+}
+.card-iface-name {
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+/* ── VLAN label in row ── */
+.vlan-name-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.vlan-label-text {
+  font-size: .82rem;
+  font-weight: 700;
+  color: var(--text);
+}
+.vlan-iface-name {
+  font-size: .72rem;
+  color: var(--muted);
+  font-family: "JetBrains Mono", "Fira Code", monospace;
+}
+
+/* ── Proxy form helpers ── */
+.field-select {
+  background: var(--bg-deep);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  padding: 9px 12px;
+  font-size: .9rem;
+  width: 100%;
+}
+.mono-ta {
+  background: var(--bg-deep);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  padding: 9px 12px;
+  font-size: .85rem;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  width: 100%;
+  resize: vertical;
+}
+.settings-section-title {
+  color: var(--accent);
+  font-size: .85rem;
+  font-weight: 700;
+  letter-spacing: .05em;
+  text-transform: uppercase;
+  margin-bottom: 12px;
+}
+.pf-section-title {
+  font-size: .8rem;
+  font-weight: 700;
+  color: var(--accent);
+  letter-spacing: .05em;
+  text-transform: uppercase;
+  margin-bottom: 10px;
+  margin-top: 4px;
+}
+.pf-subsection-title {
+  font-size: .78rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  letter-spacing: .04em;
+  margin-bottom: 8px;
+  margin-top: 2px;
+}
+
 /* ── Scanline overlay (subtle futuristic effect) ── */
 body::after {
   content: '';
@@ -1426,3 +1553,267 @@ body::after {
     rgba(0, 212, 255, 0.008) 4px
   );
 }
+
+/* ── Dashboard ── */
+.dash-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+@media (max-width: 768px) {
+  .dash-grid { grid-template-columns: 1fr; }
+}
+.dash-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 18px;
+  backdrop-filter: blur(10px);
+}
+.dash-card-title {
+  font-size: .85rem;
+  font-weight: 700;
+  color: var(--accent);
+  letter-spacing: .05em;
+  text-transform: uppercase;
+  margin-bottom: 14px;
+}
+.dash-traffic-card {
+  border-color: rgba(0, 212, 255, 0.15);
+}
+.dash-traffic-row {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 8px;
+}
+.dash-traffic-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+}
+.dash-traffic-label {
+  font-size: .72rem;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: .06em;
+}
+.dash-traffic-val {
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 1.1rem;
+  color: var(--accent);
+  text-shadow: 0 0 8px rgba(0, 212, 255, 0.15);
+  font-variant-numeric: tabular-nums;
+}
+.dash-traffic-total {
+  font-size: .95rem;
+  color: var(--text-dim);
+  text-shadow: none;
+}
+.dash-mem-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border);
+  margin-top: 4px;
+}
+.dash-mode-switch {
+  display: flex;
+  background: var(--bg-deep);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 3px;
+  gap: 2px;
+}
+.dash-mode-switch .seg-btn {
+  flex: 1;
+  padding: 8px 12px;
+  border: none;
+  border-radius: calc(var(--radius-sm) - 2px);
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: .85rem;
+  font-weight: 600;
+  transition: all .2s ease;
+}
+.dash-mode-switch .seg-btn.active {
+  background: linear-gradient(135deg, #0090b3, #00d4ff);
+  color: #fff;
+  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.2);
+}
+.dash-mode-switch .seg-btn:not(.active):hover { background: var(--surface-3); color: var(--text); }
+
+.dash-info-row {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.dash-section {
+  margin-bottom: 20px;
+}
+.dash-section-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.dash-section-header h3 {
+  font-size: 1rem;
+  font-weight: 700;
+  background: linear-gradient(135deg, var(--text), var(--accent));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.dash-group-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.dash-group-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  backdrop-filter: blur(10px);
+  transition: all .3s ease;
+}
+.dash-group-card:hover {
+  border-color: var(--border-hi);
+  box-shadow: var(--glow-sm);
+}
+.dash-group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+}
+.dash-group-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.dash-group-name {
+  font-weight: 700;
+  font-size: .95rem;
+  color: var(--text);
+}
+.dash-proxy-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 6px;
+  padding: 10px 14px;
+}
+.dash-proxy-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: var(--radius-sm);
+  background: var(--surface-2);
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all .15s ease;
+  font-size: .82rem;
+}
+.dash-proxy-item:hover {
+  border-color: var(--border-hi);
+  background: var(--surface-3);
+  transform: translateY(-1px);
+}
+.dash-proxy-item.dash-proxy-active {
+  border-color: rgba(0, 255, 136, 0.4);
+  background: rgba(0, 255, 136, 0.06);
+}
+.dash-proxy-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text);
+  font-weight: 600;
+}
+.dash-proxy-type {
+  font-size: .68rem;
+  color: var(--muted);
+}
+.dash-delay {
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: .78rem;
+  font-weight: 600;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.dash-delay-good { color: var(--success); }
+.dash-delay-medium { color: var(--warning); }
+.dash-delay-slow { color: var(--danger); }
+.dash-delay-unknown { color: var(--muted); }
+
+.dash-conn-count {
+  font-size: .78rem;
+  font-weight: 700;
+  color: var(--accent);
+  background: rgba(0, 212, 255, 0.1);
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-variant-numeric: tabular-nums;
+}
+.dash-conn-table-wrap {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow-x: auto;
+  backdrop-filter: blur(10px);
+}
+.dash-conn-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: .82rem;
+}
+.dash-conn-table thead {
+  background: rgba(0, 212, 255, 0.03);
+  border-bottom: 1px solid var(--border);
+}
+.dash-conn-table th {
+  text-align: left;
+  padding: 10px 12px;
+  font-size: .72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .06em;
+  color: var(--muted);
+  white-space: nowrap;
+}
+.dash-conn-table td {
+  padding: 8px 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+  vertical-align: middle;
+}
+.dash-conn-table tbody tr:hover { background: rgba(0, 212, 255, 0.03); }
+.dash-conn-host {
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  color: var(--text);
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dash-conn-chain {
+  color: var(--text-dim);
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dash-conn-traffic {
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  color: var(--text-dim);
+  font-size: .78rem;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}