feat: integrate XSLT Tools with toolbox portal

src/styles.css

@@ -35,69 +35,28 @@ kbd {
     monospace;
 }
 
-.app-root {
-  min-height: 100vh;
+.xslt-app-shell {
+  color-scheme: light;
+  --toolbox-background: #f3f4f6;
+  --toolbox-surface: #ffffff;
+  --toolbox-text: #111827;
+  --toolbox-muted: #6b7280;
+  --toolbox-border: #d1d5db;
+  --toolbox-accent: #2563eb;
+  --toolbox-accent-contrast: #ffffff;
 }
 
-.app-header {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  background: #111827;
-  color: #e5e7eb;
-  padding: 0.65rem 1rem;
-  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.4);
-}
-
-.app-header-content {
+.xslt-app-shell > .toolbox-shell__main {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-}
-
-.app-header-title {
-  display: flex;
-  align-items: center;
-  gap: 0.65rem;
-}
-
-.app-logo {
-  font-size: 1.35rem;
-}
-
-.app-header h1 {
-  font-size: 1.05rem;
-  margin: 0;
-}
-
-.app-header small {
-  color: #9ca3af;
-  font-size: 0.8rem;
-}
-
-.app-header-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.app-version {
-  border-radius: 999px;
-  background: #374151;
-  color: #d1d5db;
-  padding: 0.4rem 0.7rem;
-  font-size: 0.85rem;
-  font-weight: 600;
-  line-height: 1;
-  white-space: nowrap;
+  flex-direction: column;
+  gap: 0.75rem;
 }
 
 .app-help-button {
-  border: 1px solid #4b5563;
+  border: 1px solid var(--toolbox-border);
   border-radius: 999px;
   background: transparent;
-  color: #e5e7eb;
+  color: var(--toolbox-text);
   padding: 0.35rem 0.65rem;
   font-size: 0.85rem;
   font-weight: 600;
@@ -107,17 +66,10 @@ kbd {
 
 .app-help-button:hover,
 .app-help-button:focus-visible {
-  background: #374151;
+  background: var(--toolbox-background);
   outline: none;
 }
 
-.app-main {
-  padding: 0.75rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
 .card {
   width: 100%;
   background: #ffffff;
@@ -207,6 +159,26 @@ kbd {
   font-size: 0.85rem;
 }
 
+.stylesheet-trust-status {
+  padding: 0.65rem 0.75rem;
+  border: 1px solid;
+  border-radius: 0.55rem;
+  font-size: 0.82rem;
+  line-height: 1.45;
+}
+
+.stylesheet-trust-status.is-untrusted {
+  border-color: #fca5a5;
+  background: #fff1f2;
+  color: #881337;
+}
+
+.stylesheet-trust-status.is-trusted {
+  border-color: #86efac;
+  background: #f0fdf4;
+  color: #14532d;
+}
+
 .toggle-option {
   display: inline-flex;
   align-items: center;