Update

1 files changed, 514 insertions, 512 deletions

diff --git a/static/styles.css b/static/styles.css
index ca6468f..0092e12 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -1,915 +1,917 @@
 :root {
-  /* Light theme (default) */
-  --color-neutral-background: #f7f7f7;
-  --color-neutral-background-selected: #e6e6e6;
-  --color-neutral-foreground: #242424;
-  --color-neutral-foreground-subtle: #616161;
-  --color-surface: #ffffff;
-  --border-color: #e1e1e1;
-  --shadow-color: rgba(0,0,0,0.12);
-
-  /* Brand colors remain the same */
-  --color-brand-background: #0078d4;
-  --color-brand-background-hover: #106ebe;
-  --color-brand-foreground: #0078d4;
-  --color-brand-foreground-hover: #004578;
-  --color-status-success: #107c10;
-  --color-status-warning: #d83b01;
-  --color-status-error: #d13438;
-  --color-status-info: #0078d4;
-
-  /* Shadows */
-  --shadow-2: 0 0 2px var(--shadow-color), 0 2px 4px var(--shadow-color);
-  --shadow-4: 0 0 2px var(--shadow-color), 0 4px 8px var(--shadow-color);
-  --shadow-8: 0 0 2px var(--shadow-color), 0 8px 16px var(--shadow-color);
-
-  /* Typography */
-  --font-weight-regular: 400;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-
-  /* Spacing */
-  --spacing-xs: 4px;
-  --spacing-s: 8px;
-  --spacing-m: 12px;
-  --spacing-l: 16px;
-  --spacing-xl: 20px;
-  --spacing-xxl: 24px;
-
-  /* Border Radius */
-  --border-radius-medium: 4px;
-  --border-radius-large: 8px;
+	/* Light theme (default) */
+	--color-neutral-background: #f7f7f7;
+	--color-neutral-background-selected: #e6e6e6;
+	--color-neutral-foreground: #242424;
+	--color-neutral-foreground-subtle: #616161;
+	--color-surface: #ffffff;
+	--border-color: #e1e1e1;
+	--shadow-color: rgba(0, 0, 0, 0.12);
+
+	/* Brand colors remain the same */
+	--color-brand-background: #0078d4;
+	--color-brand-background-hover: #106ebe;
+	--color-brand-foreground: #0078d4;
+	--color-brand-foreground-hover: #004578;
+	--color-status-success: #107c10;
+	--color-status-warning: #d83b01;
+	--color-status-error: #d13438;
+	--color-status-info: #0078d4;
+
+	/* Shadows */
+	--shadow-2: 0 0 2px var(--shadow-color), 0 2px 4px var(--shadow-color);
+	--shadow-4: 0 0 2px var(--shadow-color), 0 4px 8px var(--shadow-color);
+	--shadow-8: 0 0 2px var(--shadow-color), 0 8px 16px var(--shadow-color);
+
+	/* Typography */
+	--font-weight-regular: 400;
+	--font-weight-semibold: 600;
+	--font-weight-bold: 700;
+
+	/* Spacing */
+	--spacing-xs: 4px;
+	--spacing-s: 8px;
+	--spacing-m: 12px;
+	--spacing-l: 16px;
+	--spacing-xl: 20px;
+	--spacing-xxl: 24px;
+
+	/* Border Radius */
+	--border-radius-medium: 4px;
+	--border-radius-large: 8px;
 }
 
 [data-theme="dark"] {
-  --color-neutral-background: #1f1f1f;
-  --color-neutral-background-selected: #2d2d2d;
-  --color-neutral-foreground: #ffffff;
-  --color-neutral-foreground-subtle: #a0a0a0;
-  --color-surface: #2d2d2d;
-  --border-color: #404040;
-  --shadow-color: rgba(0,0,0,0.3);
+	--color-neutral-background: #1f1f1f;
+	--color-neutral-background-selected: #2d2d2d;
+	--color-neutral-foreground: #ffffff;
+	--color-neutral-foreground-subtle: #a0a0a0;
+	--color-surface: #2d2d2d;
+	--border-color: #404040;
+	--shadow-color: rgba(0, 0, 0, 0.3);
 }
 
 /* Update all color references to use theme variables */
 body {
-  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
-  margin: 0;
-  background-color: var(--color-neutral-background);
-  color: var(--color-neutral-foreground);
-  line-height: 1.4;
-  transition: background-color 0.3s ease, color 0.3s ease;
+	font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
+	margin: 0;
+	background-color: var(--color-neutral-background);
+	color: var(--color-neutral-foreground);
+	line-height: 1.4;
+	transition:
+		background-color 0.3s ease,
+		color 0.3s ease;
 }
 
 header {
-  background: var(--color-surface);
-  padding: var(--spacing-l) var(--spacing-xl);
-  border-bottom: 1px solid var(--border-color);
-  box-shadow: var(--shadow-2);
+	background: var(--color-surface);
+	padding: var(--spacing-l) var(--spacing-xl);
+	border-bottom: 1px solid var(--border-color);
+	box-shadow: var(--shadow-2);
 }
 
 /* Add theme toggle button */
 .theme-toggle {
-  position: absolute;
-  top: var(--spacing-l);
-  right: var(--spacing-xl);
-  background: none;
-  border: none;
-  font-size: 20px;
-  cursor: pointer;
-  padding: var(--spacing-s);
-  border-radius: var(--border-radius-medium);
-  transition: background-color 0.2s ease;
+	position: absolute;
+	top: var(--spacing-l);
+	right: var(--spacing-xl);
+	background: none;
+	border: none;
+	font-size: 20px;
+	cursor: pointer;
+	padding: var(--spacing-s);
+	border-radius: var(--border-radius-medium);
+	transition: background-color 0.2s ease;
 }
 
 .theme-toggle:hover {
-  background-color: var(--color-neutral-background-selected);
+	background-color: var(--color-neutral-background-selected);
 }
 
 * {
-  box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 header h2 {
-  margin: 0 0 var(--spacing-xs) 0;
-  font-weight: var(--font-weight-semibold);
-  font-size: 24px;
-  color: var(--color-neutral-foreground);
+	margin: 0 0 var(--spacing-xs) 0;
+	font-weight: var(--font-weight-semibold);
+	font-size: 24px;
+	color: var(--color-neutral-foreground);
 }
 
 .subtitle {
-  font-size: 14px;
-  color: var(--color-neutral-foreground-subtle);
-  margin: 0;
+	font-size: 14px;
+	color: var(--color-neutral-foreground-subtle);
+	margin: 0;
 }
 
 /* Main Layout */
 main {
-  display: flex;
-  min-height: calc(100vh - 80px);
+	display: flex;
+	min-height: calc(100vh - 80px);
 }
 
 /* Navigation */
 nav {
-  width: 260px;
-  background: var(--color-surface);
-  border-right: 1px solid var(--border-color);
-  padding: var(--spacing-l);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
+	width: 260px;
+	background: var(--color-surface);
+	border-right: 1px solid var(--border-color);
+	padding: var(--spacing-l);
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-xs);
 }
 
 .nav-button {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-s);
-  padding: var(--spacing-m) var(--spacing-l);
-  background: none;
-  border: 1px solid transparent;
-  border-radius: var(--border-radius-medium);
-  font-family: inherit;
-  font-size: 14px;
-  font-weight: var(--font-weight-regular);
-  color: var(--color-neutral-foreground);
-  cursor: pointer;
-  transition: all 0.1s ease;
-  text-align: left;
-  text-decoration: none;
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-s);
+	padding: var(--spacing-m) var(--spacing-l);
+	background: none;
+	border: 1px solid transparent;
+	border-radius: var(--border-radius-medium);
+	font-family: inherit;
+	font-size: 14px;
+	font-weight: var(--font-weight-regular);
+	color: var(--color-neutral-foreground);
+	cursor: pointer;
+	transition: all 0.1s ease;
+	text-align: left;
+	text-decoration: none;
 }
 
 .nav-button:hover {
-  background-color: var(--color-neutral-background-selected);
-  border-color: var(--border-color);
+	background-color: var(--color-neutral-background-selected);
+	border-color: var(--border-color);
 }
 
 .nav-button.active {
-  background-color: var(--color-brand-background);
-  color: white;
-  font-weight: var(--font-weight-semibold);
-  border-color: var(--color-brand-background);
+	background-color: var(--color-brand-background);
+	color: white;
+	font-weight: var(--font-weight-semibold);
+	border-color: var(--color-brand-background);
 }
 
 .nav-button.accent {
-  background-color: var(--color-brand-background);
-  color: white;
-  font-weight: var(--font-weight-semibold);
-  margin-top: var(--spacing-xl);
-  border-color: var(--color-brand-background);
+	background-color: var(--color-brand-background);
+	color: white;
+	font-weight: var(--font-weight-semibold);
+	margin-top: var(--spacing-xl);
+	border-color: var(--color-brand-background);
 }
 
 .nav-button.accent:hover {
-  background-color: var(--color-brand-background-hover);
-  border-color: var(--color-brand-background-hover);
+	background-color: var(--color-brand-background-hover);
+	border-color: var(--color-brand-background-hover);
 }
 
 .nav-button.warning {
-  background-color: var(--color-status-warning);
-  color: white;
-  border-color: var(--color-status-warning);
+	background-color: var(--color-status-warning);
+	color: white;
+	border-color: var(--color-status-warning);
 }
 
 .nav-button.warning:hover {
-  background-color: #c13501;
-  border-color: #c13501;
+	background-color: #c13501;
+	border-color: #c13501;
 }
 
 /* Tips Section */
 .tips-section {
-  margin-top: auto;
-  padding-top: var(--spacing-xl);
-  border-top: 1px solid var(--border-color);
+	margin-top: auto;
+	padding-top: var(--spacing-xl);
+	border-top: 1px solid var(--border-color);
 }
 
 .tips-title {
-  font-weight: var(--font-weight-semibold);
-  font-size: 14px;
-  margin-bottom: var(--spacing-s);
-  color: var(--color-neutral-foreground);
+	font-weight: var(--font-weight-semibold);
+	font-size: 14px;
+	margin-bottom: var(--spacing-s);
+	color: var(--color-neutral-foreground);
 }
 
 .tips-list {
-  margin: 0;
-  padding-left: var(--spacing-l);
-  font-size: 13px;
-  color: var(--color-neutral-foreground-subtle);
-  line-height: 1.5;
+	margin: 0;
+	padding-left: var(--spacing-l);
+	font-size: 13px;
+	color: var(--color-neutral-foreground-subtle);
+	line-height: 1.5;
 }
 
 .tips-list li {
-  margin-bottom: var(--spacing-xs);
+	margin-bottom: var(--spacing-xs);
 }
 
 /* Content Area */
 section {
-  flex: 1;
-  padding: var(--spacing-xl);
-  overflow: auto;
-  display: none;
+	flex: 1;
+	padding: var(--spacing-xl);
+	overflow: auto;
+	display: none;
 }
 
 section.active {
-  display: block;
+	display: block;
 }
 
 .card {
-  background: var(--color-surface);
-  border-radius: var(--border-radius-large);
-  padding: var(--spacing-xl);
-  margin-bottom: var(--spacing-l);
-  box-shadow: var(--shadow-2);
-  border: 1px solid var(--border-color);
+	background: var(--color-surface);
+	border-radius: var(--border-radius-large);
+	padding: var(--spacing-xl);
+	margin-bottom: var(--spacing-l);
+	box-shadow: var(--shadow-2);
+	border: 1px solid var(--border-color);
 }
 
 .card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: var(--spacing-l);
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	margin-bottom: var(--spacing-l);
 }
 
 .card-title {
-  margin: 0;
-  font-weight: var(--font-weight-semibold);
-  font-size: 20px;
-  color: var(--color-neutral-foreground);
+	margin: 0;
+	font-weight: var(--font-weight-semibold);
+	font-size: 20px;
+	color: var(--color-neutral-foreground);
 }
 
 .card-description {
-  margin: var(--spacing-xs) 0 0 0;
-  font-size: 14px;
-  color: var(--color-neutral-foreground-subtle);
+	margin: var(--spacing-xs) 0 0 0;
+	font-size: 14px;
+	color: var(--color-neutral-foreground-subtle);
 }
 
 /* Buttons */
 .button {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-s);
-  padding: var(--spacing-m) var(--spacing-l);
-  background: var(--color-brand-background);
-  color: white;
-  border: none;
-  border-radius: var(--border-radius-medium);
-  font-family: inherit;
-  font-size: 14px;
-  font-weight: var(--font-weight-semibold);
-  cursor: pointer;
-  transition: background-color 0.1s ease;
-  text-decoration: none;
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-s);
+	padding: var(--spacing-m) var(--spacing-l);
+	background: var(--color-brand-background);
+	color: white;
+	border: none;
+	border-radius: var(--border-radius-medium);
+	font-family: inherit;
+	font-size: 14px;
+	font-weight: var(--font-weight-semibold);
+	cursor: pointer;
+	transition: background-color 0.1s ease;
+	text-decoration: none;
 }
 
 .button:hover {
-  background-color: var(--color-brand-background-hover);
+	background-color: var(--color-brand-background-hover);
 }
 
 .button.secondary {
-  background: transparent;
-  color: var(--color-brand-foreground);
-  border: 1px solid var(--color-brand-foreground);
+	background: transparent;
+	color: var(--color-brand-foreground);
+	border: 1px solid var(--color-brand-foreground);
 }
 
 .button.secondary:hover {
-  background-color: var(--color-neutral-background);
+	background-color: var(--color-neutral-background);
 }
 
 .button.warning {
-  background: var(--color-status-warning);
+	background: var(--color-status-warning);
 }
 
 .button.warning:hover {
-  background-color: #c13501;
+	background-color: #c13501;
 }
 
 /* Interface Grid */
 .interface-grid {
-  display: grid;
-  gap: var(--spacing-l);
-  margin-top: var(--spacing-l);
+	display: grid;
+	gap: var(--spacing-l);
+	margin-top: var(--spacing-l);
 }
 
 .interface-card {
-  background: var(--color-surface);
-  border-radius: var(--border-radius-large);
-  padding: var(--spacing-xl);
-  box-shadow: var(--shadow-2);
-  border: 1px solid var(--border-color);
-  border-left: 4px solid var(--color-brand-background);
+	background: var(--color-surface);
+	border-radius: var(--border-radius-large);
+	padding: var(--spacing-xl);
+	box-shadow: var(--shadow-2);
+	border: 1px solid var(--border-color);
+	border-left: 4px solid var(--color-brand-background);
 }
 
 .interface-card.wan {
-  border-left-color: var(--color-status-warning);
+	border-left-color: var(--color-status-warning);
 }
 
 .interface-card.lan {
-  border-left-color: var(--color-status-success);
+	border-left-color: var(--color-status-success);
 }
 
 .interface-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: var(--spacing-l);
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	margin-bottom: var(--spacing-l);
 }
 
 .interface-name {
-  font-weight: var(--font-weight-semibold);
-  font-size: 18px;
-  margin: 0;
-  color: var(--color-neutral-foreground);
+	font-weight: var(--font-weight-semibold);
+	font-size: 18px;
+	margin: 0;
+	color: var(--color-neutral-foreground);
 }
 
 .interface-type {
-  display: inline-block;
-  padding: var(--spacing-xs) var(--spacing-s);
-  background: var(--color-neutral-background);
-  border-radius: var(--border-radius-medium);
-  font-size: 12px;
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-neutral-foreground-subtle);
-  margin-left: var(--spacing-s);
+	display: inline-block;
+	padding: var(--spacing-xs) var(--spacing-s);
+	background: var(--color-neutral-background);
+	border-radius: var(--border-radius-medium);
+	font-size: 12px;
+	font-weight: var(--font-weight-semibold);
+	color: var(--color-neutral-foreground-subtle);
+	margin-left: var(--spacing-s);
 }
 
 .interface-details {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: var(--spacing-l);
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+	gap: var(--spacing-l);
 }
 
 .detail-group h4 {
-  margin: 0 0 var(--spacing-xs) 0;
-  font-size: 14px;
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-neutral-foreground);
+	margin: 0 0 var(--spacing-xs) 0;
+	font-size: 14px;
+	font-weight: var(--font-weight-semibold);
+	color: var(--color-neutral-foreground);
 }
 
 .detail-value {
-  font-size: 14px;
-  color: var(--color-neutral-foreground-subtle);
-  line-height: 1.5;
+	font-size: 14px;
+	color: var(--color-neutral-foreground-subtle);
+	line-height: 1.5;
 }
 
 .state-badge {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: 10px;
-  font-size: 12px;
-  font-weight: var(--font-weight-semibold);
+	display: inline-block;
+	padding: 2px 8px;
+	border-radius: 10px;
+	font-size: 12px;
+	font-weight: var(--font-weight-semibold);
 }
 
 .state-up {
-  background: #dff6dd;
-  color: var(--color-status-success);
+	background: #dff6dd;
+	color: var(--color-status-success);
 }
 
 .state-down {
-  background: #f4d5d5;
-  color: var(--color-status-error);
+	background: #f4d5d5;
+	color: var(--color-status-error);
 }
 
 /* Forms */
 /* Forms */
 .form-group {
-  margin-bottom: var(--spacing-l);
+	margin-bottom: var(--spacing-l);
 }
 
 .form-label {
-  display: block;
-  margin-bottom: var(--spacing-s);
-  font-weight: var(--font-weight-semibold);
-  font-size: 14px;
-  color: var(--color-neutral-foreground);
+	display: block;
+	margin-bottom: var(--spacing-s);
+	font-weight: var(--font-weight-semibold);
+	font-size: 14px;
+	color: var(--color-neutral-foreground);
 }
 
 .select {
-  width: 100%;
-  padding: var(--spacing-m);
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius-medium);
-  font-family: inherit;
-  font-size: 14px;
-  background: var(--color-surface);
-  color: var(--color-neutral-foreground);
-  transition: border-color 0.1s ease;
+	width: 100%;
+	padding: var(--spacing-m);
+	border: 1px solid var(--border-color);
+	border-radius: var(--border-radius-medium);
+	font-family: inherit;
+	font-size: 14px;
+	background: var(--color-surface);
+	color: var(--color-neutral-foreground);
+	transition: border-color 0.1s ease;
 }
 
 .select:focus {
-  outline: none;
-  border-color: var(--color-brand-background);
+	outline: none;
+	border-color: var(--color-brand-background);
 }
 
 .textarea {
-  width: 100%;
-  height: 360px;
-  padding: var(--spacing-m);
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius-medium);
-  font-family: 'Consolas', 'Monaco', monospace;
-  font-size: 13px;
-  line-height: 1.5;
-  resize: vertical;
-  background: var(--color-surface);
-  color: var(--color-neutral-foreground);
-  transition: border-color 0.1s ease;
+	width: 100%;
+	height: 360px;
+	padding: var(--spacing-m);
+	border: 1px solid var(--border-color);
+	border-radius: var(--border-radius-medium);
+	font-family: "Consolas", "Monaco", monospace;
+	font-size: 13px;
+	line-height: 1.5;
+	resize: vertical;
+	background: var(--color-surface);
+	color: var(--color-neutral-foreground);
+	transition: border-color 0.1s ease;
 }
 
 .textarea:focus {
-  outline: none;
-  border-color: var(--color-brand-background);
+	outline: none;
+	border-color: var(--color-brand-background);
 }
 
 .checkbox-group {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-s);
-  margin: var(--spacing-l) 0;
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-s);
+	margin: var(--spacing-l) 0;
 }
 
 .checkbox {
-  width: 16px;
-  height: 16px;
-  margin: 0;
+	width: 16px;
+	height: 16px;
+	margin: 0;
 }
 
 .checkbox-label {
-  font-size: 14px;
-  color: var(--color-neutral-foreground);
-  margin: 0;
+	font-size: 14px;
+	color: var(--color-neutral-foreground);
+	margin: 0;
 }
 
 /* Validation Results */
 .validation-result {
-  padding: var(--spacing-m);
-  border-radius: var(--border-radius-medium);
-  font-size: 14px;
-  margin-top: var(--spacing-m);
+	padding: var(--spacing-m);
+	border-radius: var(--border-radius-medium);
+	font-size: 14px;
+	margin-top: var(--spacing-m);
 }
 
 .validation-success {
-  background: #dff6dd;
-  color: var(--color-status-success);
-  border: 1px solid #107c10;
+	background: #dff6dd;
+	color: var(--color-status-success);
+	border: 1px solid #107c10;
 }
 
 .validation-error {
-  background: #f4d5d5;
-  color: var(--color-status-error);
-  border: 1px solid var(--color-status-error);
+	background: #f4d5d5;
+	color: var(--color-status-error);
+	border: 1px solid var(--color-status-error);
 }
 
 /* Logs */
 .logs-container {
-  background: #1e1e1e;
-  color: #d4d4d4;
-  padding: var(--spacing-l);
-  border-radius: var(--border-radius-medium);
-  font-family: 'Consolas', 'Monaco', monospace;
-  font-size: 13px;
-  line-height: 1.5;
-  overflow: auto;
-  max-height: 600px;
-  white-space: pre-wrap;
+	background: #1e1e1e;
+	color: #d4d4d4;
+	padding: var(--spacing-l);
+	border-radius: var(--border-radius-medium);
+	font-family: "Consolas", "Monaco", monospace;
+	font-size: 13px;
+	line-height: 1.5;
+	overflow: auto;
+	max-height: 600px;
+	white-space: pre-wrap;
 }
 
 /* Command Results */
 .command-result {
-  padding: var(--spacing-m);
-  border-radius: var(--border-radius-medium);
-  background: var(--color-neutral-background);
-  font-size: 14px;
-  margin-top: var(--spacing-m);
+	padding: var(--spacing-m);
+	border-radius: var(--border-radius-medium);
+	background: var(--color-neutral-background);
+	font-size: 14px;
+	margin-top: var(--spacing-m);
 }
 
 /* Tips Section */
 .tips-section {
-  margin-top: auto;
-  padding-top: var(--spacing-xl);
-  border-top: 1px solid #e1e1e1;
+	margin-top: auto;
+	padding-top: var(--spacing-xl);
+	border-top: 1px solid #e1e1e1;
 }
 
 .tips-title {
-  font-weight: var(--font-weight-semibold);
-  font-size: 14px;
-  margin-bottom: var(--spacing-s);
-  color: var(--color-neutral-foreground);
+	font-weight: var(--font-weight-semibold);
+	font-size: 14px;
+	margin-bottom: var(--spacing-s);
+	color: var(--color-neutral-foreground);
 }
 
 .tips-list {
-  margin: 0;
-  padding-left: var(--spacing-l);
-  font-size: 13px;
-  color: var(--color-neutral-foreground-subtle);
-  line-height: 1.5;
+	margin: 0;
+	padding-left: var(--spacing-l);
+	font-size: 13px;
+	color: var(--color-neutral-foreground-subtle);
+	line-height: 1.5;
 }
 
 .tips-list li {
-  margin-bottom: var(--spacing-xs);
+	margin-bottom: var(--spacing-xs);
 }
 
 /* Responsive */
 @media (max-width: 768px) {
-  main {
-    flex-direction: column;
-  }
+	main {
+		flex-direction: column;
+	}
 
-  nav {
-    width: 100%;
-    flex-direction: row;
-    overflow-x: auto;
-    padding: var(--spacing-m);
-  }
+	nav {
+		width: 100%;
+		flex-direction: row;
+		overflow-x: auto;
+		padding: var(--spacing-m);
+	}
 
-  .nav-button {
-    white-space: nowrap;
-  }
+	.nav-button {
+		white-space: nowrap;
+	}
 
-  .interface-details {
-    grid-template-columns: 1fr;
-  }
+	.interface-details {
+		grid-template-columns: 1fr;
+	}
 
-  .card-header {
-    flex-direction: column;
-    gap: var(--spacing-m);
-  }
+	.card-header {
+		flex-direction: column;
+		gap: var(--spacing-m);
+	}
 }
 
 /* Interface Tabs */
 /* Interface Tabs */
 .interface-tabs-container {
-    display: flex;
-    gap: var(--spacing-xs);
-    margin-bottom: var(--spacing-l);
-    flex-wrap: wrap;
+	display: flex;
+	gap: var(--spacing-xs);
+	margin-bottom: var(--spacing-l);
+	flex-wrap: wrap;
 }
 
 .interface-tab {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-s);
-    padding: var(--spacing-m) var(--spacing-l);
-    background: var(--color-neutral-background);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-medium);
-    font-family: inherit;
-    font-size: 14px;
-    font-weight: var(--font-weight-regular);
-    color: var(--color-neutral-foreground);
-    cursor: pointer;
-    transition: all 0.1s ease;
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-s);
+	padding: var(--spacing-m) var(--spacing-l);
+	background: var(--color-neutral-background);
+	border: 1px solid var(--border-color);
+	border-radius: var(--border-radius-medium);
+	font-family: inherit;
+	font-size: 14px;
+	font-weight: var(--font-weight-regular);
+	color: var(--color-neutral-foreground);
+	cursor: pointer;
+	transition: all 0.1s ease;
 }
 
 .interface-tab:hover {
-    background: var(--color-neutral-background-selected);
-    border-color: var(--color-brand-background);
+	background: var(--color-neutral-background-selected);
+	border-color: var(--color-brand-background);
 }
 
 .interface-tab.active {
-    background: var(--color-brand-background);
-    color: white;
-    border-color: var(--color-brand-background);
+	background: var(--color-brand-background);
+	color: white;
+	border-color: var(--color-brand-background);
 }
 
 .interface-state {
-    font-size: 12px;
-    padding: 2px 6px;
-    border-radius: 10px;
-    background: var(--color-neutral-foreground-subtle);
-    color: white;
+	font-size: 12px;
+	padding: 2px 6px;
+	border-radius: 10px;
+	background: var(--color-neutral-foreground-subtle);
+	color: white;
 }
 
 .interface-tab.active .interface-state {
-    background: rgba(255, 255, 255, 0.3);
+	background: rgba(255, 255, 255, 0.3);
 }
 
 /* Interface Details */
 .interface-detail-grid {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-s);
-    font-family: 'Monaco', 'Consolas', monospace;
-    font-size: 13px;
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-s);
+	font-family: "Monaco", "Consolas", monospace;
+	font-size: 13px;
 }
 
 .detail-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: var(--spacing-l);
-    padding: var(--spacing-xs) 0;
-    border-bottom: 1px solid #f0f0f0;
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	gap: var(--spacing-l);
+	padding: var(--spacing-xs) 0;
+	border-bottom: 1px solid #f0f0f0;
 }
 
 .detail-row:last-child {
-    border-bottom: none;
+	border-bottom: none;
 }
 
 .detail-label {
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-neutral-foreground);
-    min-width: 200px;
-    flex-shrink: 0;
+	font-weight: var(--font-weight-semibold);
+	color: var(--color-neutral-foreground);
+	min-width: 200px;
+	flex-shrink: 0;
 }
 
 .detail-value {
-    color: var(--color-neutral-foreground-subtle);
-    text-align: right;
-    flex: 1;
-    word-break: break-word;
+	color: var(--color-neutral-foreground-subtle);
+	text-align: right;
+	flex: 1;
+	word-break: break-word;
 }
 
 /* Address and list items */
 .address-item,
 .dns-item,
 .lease-item {
-    margin-bottom: 2px;
-    padding: 1px 0;
+	margin-bottom: 2px;
+	padding: 1px 0;
 }
 
 .address-item:last-child,
 .dns-item:last-child,
 .lease-item:last-child {
-    margin-bottom: 0;
+	margin-bottom: 0;
 }
 
 /* State badges in details */
 .detail-value.state-up {
-    color: var(--color-status-success);
-    font-weight: var(--font-weight-semibold);
+	color: var(--color-status-success);
+	font-weight: var(--font-weight-semibold);
 }
 
 .detail-value.state-down {
-    color: var(--color-status-error);
-    font-weight: var(--font-weight-semibold);
+	color: var(--color-status-error);
+	font-weight: var(--font-weight-semibold);
 }
 
 /* Error and empty states */
 .error-message {
-    padding: var(--spacing-l);
-    background: var(--color-status-error);
-    color: white;
-    border-radius: var(--border-radius-medium);
-    text-align: center;
+	padding: var(--spacing-l);
+	background: var(--color-status-error);
+	color: white;
+	border-radius: var(--border-radius-medium);
+	text-align: center;
 }
 
 .no-interfaces {
-    padding: var(--spacing-xl);
-    text-align: center;
-    color: var(--color-neutral-foreground-subtle);
-    font-style: italic;
+	padding: var(--spacing-xl);
+	text-align: center;
+	color: var(--color-neutral-foreground-subtle);
+	font-style: italic;
 }
 
 /* Validation states */
 .validation-pending {
-    color: var(--color-neutral-foreground-subtle);
+	color: var(--color-neutral-foreground-subtle);
 }
 
 .validation-success {
-    color: var(--color-status-success);
-    font-weight: var(--font-weight-semibold);
+	color: var(--color-status-success);
+	font-weight: var(--font-weight-semibold);
 }
 
 .validation-error {
-    color: var(--color-status-error);
-    font-weight: var(--font-weight-semibold);
+	color: var(--color-status-error);
+	font-weight: var(--font-weight-semibold);
 }
 
 .validation-result {
-    padding: var(--spacing-m);
-    border-radius: var(--border-radius-medium);
-    font-size: 14px;
-    margin-top: var(--spacing-m);
+	padding: var(--spacing-m);
+	border-radius: var(--border-radius-medium);
+	font-size: 14px;
+	margin-top: var(--spacing-m);
 }
 
 .validation-success {
-    background: var(--color-status-success);
-    color: white;
-    border: 1px solid var(--color-status-success);
+	background: var(--color-status-success);
+	color: white;
+	border: 1px solid var(--color-status-success);
 }
 
 .validation-error {
-    background: var(--color-status-error);
-    color: white;
-    border: 1px solid var(--color-status-error);
+	background: var(--color-status-error);
+	color: white;
+	border: 1px solid var(--color-status-error);
 }
 
 /* Responsive improvements */
 @media (max-width: 768px) {
-    .detail-row {
-        flex-direction: column;
-        gap: var(--spacing-xs);
-        align-items: stretch;
-    }
+	.detail-row {
+		flex-direction: column;
+		gap: var(--spacing-xs);
+		align-items: stretch;
+	}
 
-    .detail-label {
-        min-width: auto;
-        font-size: 12px;
-    }
+	.detail-label {
+		min-width: auto;
+		font-size: 12px;
+	}
 
-    .detail-value {
-        text-align: left;
-    }
+	.detail-value {
+		text-align: left;
+	}
 
-    .interface-tabs-container {
-        flex-direction: column;
-    }
+	.interface-tabs-container {
+		flex-direction: column;
+	}
 
-    .interface-tab {
-        justify-content: space-between;
-    }
+	.interface-tab {
+		justify-content: space-between;
+	}
 }
 
 .interface-detail-grid {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: var(--spacing-s) var(--spacing-l);
-    font-family: 'Monaco', 'Consolas', monospace;
-    font-size: 13px;
-    align-items: start;
+	display: grid;
+	grid-template-columns: auto 1fr;
+	gap: var(--spacing-s) var(--spacing-l);
+	font-family: "Monaco", "Consolas", monospace;
+	font-size: 13px;
+	align-items: start;
 }
 
 .detail-row {
-    display: contents;
+	display: contents;
 }
 
 .detail-label {
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-neutral-foreground);
-    text-align: right;
-    padding: var(--spacing-xs) 0;
-    border-bottom: 1px solid var(--border-color);
+	font-weight: var(--font-weight-semibold);
+	color: var(--color-neutral-foreground);
+	text-align: right;
+	padding: var(--spacing-xs) 0;
+	border-bottom: 1px solid var(--border-color);
 }
 
 .detail-value {
-    color: var(--color-neutral-foreground-subtle);
-    text-align: left;
-    padding: var(--spacing-xs) 0;
-    border-bottom: 1px solid var(--border-color);
-    word-break: break-word;
+	color: var(--color-neutral-foreground-subtle);
+	text-align: left;
+	padding: var(--spacing-xs) 0;
+	border-bottom: 1px solid var(--border-color);
+	word-break: break-word;
 }
 
 .detail-row:last-child .detail-label,
 .detail-row:last-child .detail-value {
-    border-bottom: none;
+	border-bottom: none;
 }
 
 /* Abbreviation styling */
 abbr {
-    text-decoration: underline dotted;
-    cursor: help;
+	text-decoration: underline dotted;
+	cursor: help;
 }
 
 /* Address and list items */
 .address-item,
 .dns-item,
 .lease-item {
-    margin-bottom: 2px;
-    padding: 1px 0;
+	margin-bottom: 2px;
+	padding: 1px 0;
 }
 
 .address-item:last-child,
 .dns-item:last-child,
 .lease-item:last-child {
-    margin-bottom: 0;
+	margin-bottom: 0;
 }
 
 /* Structured Editor Styles */
 .structured-editor {
-    margin-top: var(--spacing-l);
+	margin-top: var(--spacing-l);
 }
 
 .editor-sections {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-l);
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-l);
 }
 
 /* Editor Mode Toggle */
 .editor-mode-toggle {
-    display: flex;
-    gap: var(--spacing-s);
-    margin-bottom: var(--spacing-l);
-    padding-bottom: var(--spacing-l);
-    border-bottom: 1px solid var(--border-color);
+	display: flex;
+	gap: var(--spacing-s);
+	margin-bottom: var(--spacing-l);
+	padding-bottom: var(--spacing-l);
+	border-bottom: 1px solid var(--border-color);
 }
 
 .editor-mode-toggle .button.small {
-    flex: 1;
-    padding: var(--spacing-m) var(--spacing-l);
+	flex: 1;
+	padding: var(--spacing-m) var(--spacing-l);
 }
 
 .editor-mode-toggle .button.small.active {
-    background-color: var(--color-brand-background);
-    color: white;
-    border-color: var(--color-brand-background);
+	background-color: var(--color-brand-background);
+	color: white;
+	border-color: var(--color-brand-background);
 }
 
 .config-actions {
-    display: flex;
-    gap: var(--spacing-s);
-    align-items: center;
-    margin-top: var(--spacing-l);
-    padding-top: var(--spacing-l);
-    border-top: 1px solid var(--border-color);
+	display: flex;
+	gap: var(--spacing-s);
+	align-items: center;
+	margin-top: var(--spacing-l);
+	padding-top: var(--spacing-l);
+	border-top: 1px solid var(--border-color);
 }
 
 .config-section {
-    background: var(--color-surface);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-medium);
-    padding: var(--spacing-l);
+	background: var(--color-surface);
+	border: 1px solid var(--border-color);
+	border-radius: var(--border-radius-medium);
+	padding: var(--spacing-l);
 }
 
 .config-section h4 {
-    margin: 0 0 var(--spacing-m) 0;
-    color: var(--color-brand-foreground);
-    font-family: monospace;
+	margin: 0 0 var(--spacing-m) 0;
+	color: var(--color-brand-foreground);
+	font-family: monospace;
 }
 
 .config-table {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: var(--spacing-s) var(--spacing-m);
-    align-items: center;
+	display: grid;
+	grid-template-columns: auto 1fr;
+	gap: var(--spacing-s) var(--spacing-m);
+	align-items: center;
 }
 
 .config-row {
-    display: contents;
+	display: contents;
 }
 
 .config-label {
-    text-align: right;
-    font-weight: var(--font-weight-semibold);
-    font-size: 13px;
-    color: var(--color-neutral-foreground);
+	text-align: right;
+	font-weight: var(--font-weight-semibold);
+	font-size: 13px;
+	color: var(--color-neutral-foreground);
 }
 
 .config-input,
 .config-select {
-    padding: var(--spacing-s);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-medium);
-    background: var(--color-surface);
-    color: var(--color-neutral-foreground);
-    font-family: inherit;
-    font-size: 13px;
+	padding: var(--spacing-s);
+	border: 1px solid var(--border-color);
+	border-radius: var(--border-radius-medium);
+	background: var(--color-surface);
+	color: var(--color-neutral-foreground);
+	font-family: inherit;
+	font-size: 13px;
 }
 
 .config-input:focus,
 .config-select:focus {
-    outline: none;
-    border-color: var(--color-brand-background);
+	outline: none;
+	border-color: var(--color-brand-background);
 }
 
 .button.small {
-    padding: var(--spacing-xs) var(--spacing-s);
-    font-size: 12px;
-    grid-column: 1 / -1;
-    justify-self: end;
-    margin-top: var(--spacing-s);
+	padding: var(--spacing-xs) var(--spacing-s);
+	font-size: 12px;
+	grid-column: 1 / -1;
+	justify-self: end;
+	margin-top: var(--spacing-s);
 }
 
 .editor-actions {
-    display: flex;
-    gap: var(--spacing-s);
-    margin-top: var(--spacing-l);
-    padding-top: var(--spacing-l);
-    border-top: 1px solid var(--border-color);
+	display: flex;
+	gap: var(--spacing-s);
+	margin-top: var(--spacing-l);
+	padding-top: var(--spacing-l);
+	border-top: 1px solid var(--border-color);
 }
 
 /* Structured Editor Enhancements */
 .no-items {
-    color: var(--color-neutral-foreground-subtle);
-    font-style: italic;
-    text-align: center;
-    padding: var(--spacing-m);
+	color: var(--color-neutral-foreground-subtle);
+	font-style: italic;
+	text-align: center;
+	padding: var(--spacing-m);
 }
 
 .config-section {
-    background: var(--color-surface);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-medium);
-    padding: var(--spacing-l);
-    transition: border-color 0.2s ease;
+	background: var(--color-surface);
+	border: 1px solid var(--border-color);
+	border-radius: var(--border-radius-medium);
+	padding: var(--spacing-l);
+	transition: border-color 0.2s ease;
 }
 
 .config-section:hover {
-    border-color: var(--color-brand-background);
+	border-color: var(--color-brand-background);
 }
 
 .config-section h4 {
-    margin: 0 0 var(--spacing-m) 0;
-    color: var(--color-brand-foreground);
-    font-family: monospace;
-    border-bottom: 1px solid var(--border-color);
-    padding-bottom: var(--spacing-s);
+	margin: 0 0 var(--spacing-m) 0;
+	color: var(--color-brand-foreground);
+	font-family: monospace;
+	border-bottom: 1px solid var(--border-color);
+	padding-bottom: var(--spacing-s);
 }
 
 .button.warning {
-    background: var(--color-status-warning);
-    border-color: var(--color-status-warning);
+	background: var(--color-status-warning);
+	border-color: var(--color-status-warning);
 }
 
 .button.warning:hover {
-    background: #c13501;
-    border-color: #c13501;
+	background: #c13501;
+	border-color: #c13501;
 }