Add tabbed navigation and update styles for content panels

webui/style.css

@@ -58,6 +58,34 @@ button {
   padding: 24px;
 }
 
+.content-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.content-tab {
+  border: 1px solid var(--line);
+  background: var(--panel);
+  color: var(--text);
+  padding: 10px 14px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.content-tab.active {
+  background: var(--accent-strong);
+  border-color: var(--accent-strong);
+}
+
+.tab-panel {
+  display: none;
+}
+
+.tab-panel.active {
+  display: block;
+}
+
 .brand-block h1,
 .viewer-sidebar-head h1,
 .viewer-header h2,
@@ -165,6 +193,61 @@ button {
   gap: 12px;
 }
 
+.switch {
+  position: relative;
+  display: inline-flex;
+  width: 46px;
+  min-width: 46px;
+  height: 28px;
+}
+
+.switch input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  margin: 0;
+  cursor: pointer;
+}
+
+.switch-slider {
+  position: absolute;
+  inset: 0;
+  border-radius: 999px;
+  background: #0d141c;
+  border: 1px solid var(--line);
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.switch-slider::before {
+  content: "";
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #c9d4df;
+  transition: transform 0.2s ease, background-color 0.2s ease;
+}
+
+.switch input:checked + .switch-slider {
+  background: var(--accent-strong);
+  border-color: var(--accent-strong);
+}
+
+.switch input:checked + .switch-slider::before {
+  transform: translateX(18px);
+  background: white;
+}
+
+.switch input:focus-visible + .switch-slider {
+  outline: 2px solid rgba(83, 167, 255, 0.45);
+  outline-offset: 2px;
+}
+
 .panel {
   padding: 18px;
   margin-bottom: 16px;