update at 2026-06-04 14:09:16

app/static/style.css

@@ -73,6 +73,30 @@ p {
   color: var(--red);
 }
 
+.topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.button-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 36px;
+  padding: 8px 14px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  color: var(--text);
+  text-decoration: none;
+  background: var(--panel);
+}
+
+.button-link:hover {
+  border-color: var(--green);
+  color: var(--green);
+}
+
 .layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 360px;
@@ -92,33 +116,6 @@ p {
   overflow: hidden;
 }
 
-.pipeline {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 14px;
-  border-bottom: 1px solid var(--line);
-  overflow-x: auto;
-}
-
-.stage {
-  flex: 0 0 auto;
-  padding: 9px 12px;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  color: var(--muted);
-  background: var(--panel-2);
-}
-
-.stage.active {
-  border-color: rgba(46, 232, 135, 0.5);
-  color: var(--green);
-}
-
-.arrow {
-  color: var(--muted);
-}
-
 .video-wrap {
   display: grid;
   place-items: center;
@@ -126,7 +123,8 @@ p {
   background: #05070b;
 }
 
-#video {
+#video,
+.grid-video {
   display: block;
   width: 100%;
   height: auto;
@@ -134,6 +132,36 @@ p {
   object-fit: contain;
 }
 
+.video-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+  padding: 14px;
+  background: #05070b;
+}
+
+.video-grid-item {
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: var(--panel-2);
+}
+
+.video-grid-title {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.video-grid-wrap {
+  min-height: 240px;
+}
+
+.grid-video {
+  max-height: calc((100vh - 260px) / 2);
+}
+
 .side-card {
   display: flex;
   flex-direction: column;
@@ -166,13 +194,19 @@ p {
   background: var(--panel-2);
 }
 
+.detections-panel {
+  padding: 16px;
+  border-top: 1px solid var(--line);
+}
+
 .detections {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 10px;
 }
 
 .detections.empty {
+  display: block;
   color: var(--muted);
 }
 
@@ -197,6 +231,133 @@ p {
   font-size: 12px;
 }
 
+.tokenizer-page .tokenizer-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+  grid-template-areas: "flow side";
+  align-items: start;
+  width: 100%;
+  gap: 18px;
+  padding: 18px;
+}
+
+.tokenizer-page .tokenizer-side {
+  display: grid;
+  grid-area: side;
+  min-width: 0;
+  gap: 18px;
+}
+
+.tokenizer-page .tokenizer-flow-card {
+  grid-area: flow;
+  min-width: 0;
+  min-height: calc(100vh - 122px);
+}
+
+.tokenizer-page .tokenizer-side .detections {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.tokenizer-card {
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  padding: 18px;
+  background: rgba(21, 27, 38, 0.9);
+  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
+}
+
+.pipeline-steps {
+  display: grid;
+  gap: 10px;
+}
+
+.pipeline-step {
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--panel-2);
+}
+
+.step-index {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  color: #06100b;
+  font-weight: 700;
+  background: var(--green);
+}
+
+.step-title {
+  margin-bottom: 5px;
+  font-weight: 700;
+}
+
+.step-value,
+.token-summary,
+.selected-token {
+  color: var(--muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 13px;
+  word-break: break-all;
+}
+
+.token-sequence {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: 8px;
+  margin-top: 14px;
+}
+
+.token-cell {
+  min-height: 50px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  color: var(--text);
+  cursor: pointer;
+  background: var(--panel-2);
+}
+
+.token-cell span,
+.token-cell small {
+  display: block;
+}
+
+.token-cell small {
+  margin-top: 3px;
+  color: var(--muted);
+}
+
+.token-cell.selected,
+.token-cell:hover {
+  border-color: var(--green);
+  color: var(--green);
+}
+
+.token-detail-title {
+  margin-bottom: 10px;
+  color: var(--green);
+  font-weight: 700;
+}
+
+.token-vector {
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--panel-2);
+}
+
+@media (max-width: 1280px) {
+  .detections {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
 @media (max-width: 980px) {
   .layout {
     grid-template-columns: 1fr;
@@ -206,4 +367,18 @@ p {
     align-items: flex-start;
     flex-direction: column;
   }
+
+  .detections {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .video-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .detections {
+    grid-template-columns: 1fr;
+  }
 }