update at 2026-02-13 08:27:51

src/styles.css

@@ -299,8 +299,12 @@ body {
   padding: 8px;
 }
 
-.block-panel h2,
-.preview-head h2 {
+.target-panel {
+  flex: 1;
+  min-height: 0;
+}
+
+.block-panel h2 {
   margin: 0;
   font-size: 24px;
   font-weight: 400;
@@ -395,18 +399,22 @@ body {
   text-overflow: ellipsis;
 }
 
+.total-row .column-label {
+  color: var(--text-4);
+}
+
 .select-btn {
   border: 0;
   background: transparent;
   cursor: pointer;
   padding: 0;
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
 }
 
 .select-btn img {
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
 }
 
 .preview-panel {
@@ -420,38 +428,46 @@ body {
   justify-content: space-between;
   gap: 12px;
   align-items: center;
-  margin-bottom: 6px;
+  min-height: 60px;
+  margin-bottom: 8px;
+}
+
+.preview-head h2 {
+  margin: 0;
+  width: 223px;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1;
 }
 
 .preview-controls {
   display: flex;
   align-items: center;
-  gap: 8px;
-}
-
-.preview-controls label {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  color: var(--text-4);
-  font-size: 12px;
+  gap: 24px;
 }
 
 .preview-controls .slider-label {
+  display: inline-flex;
   align-items: center;
-  color: #000;
-  font-size: 14px;
+  gap: 6px;
+  width: 148px;
 }
 
 .slider-track-wrap {
   position: relative;
-  width: 130px;
-  height: 18px;
+  width: 122px;
+  height: 24px;
+}
+
+.slider-icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
 }
 
 .slider-input {
   width: 100%;
-  height: 18px;
+  height: 24px;
   margin: 0;
   background: transparent;
   -webkit-appearance: none;
@@ -463,10 +479,10 @@ body {
   border-radius: 999px;
   background: linear-gradient(
     to right,
-    #8552a1 0,
-    #8552a1 var(--slider-percent, 0%),
-    #d9d9d9 var(--slider-percent, 0%),
-    #d9d9d9 100%
+    var(--primary-6) 0,
+    var(--primary-6) var(--slider-percent, 0%),
+    var(--fill-3) var(--slider-percent, 0%),
+    var(--fill-3) 100%
   );
 }
 
@@ -476,29 +492,31 @@ body {
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--fill-3);
   background: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
   margin-top: -7px;
 }
 
 .slider-input::-moz-range-track {
   height: 4px;
   border-radius: 999px;
-  background: #d9d9d9;
+  background: var(--fill-3);
 }
 
 .slider-input::-moz-range-thumb {
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--fill-3);
   background: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
 }
 
 .slider-input::-moz-range-progress {
   height: 4px;
   border-radius: 999px;
-  background: #8552a1;
+  background: var(--primary-6);
 }
 
 .slider-value {
@@ -512,8 +530,61 @@ body {
   pointer-events: none;
 }
 
-.preview-controls select {
-  accent-color: var(--primary-7);
+.direction-control {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+}
+
+.direction-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #000;
+  line-height: 1;
+}
+
+.direction-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  width: 80px;
+  height: 24px;
+  padding: 2px;
+  border-radius: 999px;
+  background: var(--fill-3);
+  justify-content: space-between;
+}
+
+.direction-switch-text {
+  font-size: 14px;
+  line-height: 1;
+  padding: 0 4px;
+  color: var(--text-4);
+}
+
+.direction-switch-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #fff;
+  border: 1px solid var(--fill-3);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+}
+
+.direction-switch.on {
+  background: var(--primary-6);
+}
+
+.direction-switch.on .direction-switch-text {
+  color: #fff;
+}
+
+.direction-switch:not(.on) {
+  flex-direction: row-reverse;
 }
 
 .example-line {
@@ -581,6 +652,22 @@ body {
     min-height: 360px;
   }
 
+  .preview-head {
+    min-height: auto;
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .preview-head h2 {
+    width: auto;
+    font-size: 28px;
+  }
+
+  .preview-controls {
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+
   .footer {
     font-size: 14px;
   }
@@ -609,11 +696,14 @@ body {
     min-width: 220px;
   }
 
-  .block-panel h2,
-  .preview-head h2 {
+  .block-panel h2 {
     font-size: 20px;
   }
 
+  .preview-head h2 {
+    font-size: 24px;
+  }
+
   .field-title-wrap h3 {
     font-size: 16px;
   }