style: 全站使用背景分层替代装饰边框并统一直角

src/styles.css

@@ -80,7 +80,7 @@
     }
     .casting-stats div {
         padding: 10px 12px;
-        border-radius: 4px;
+        border-radius: 0;
         background: var(--app-subtle);
     }
     .casting-stats dt {
@@ -143,7 +143,7 @@
         padding: 9px 14px;
         min-height: 36px;
         border: 1px solid transparent;
-        border-radius: 5px;
+        border-radius: 0;
         font-size: 12px;
         font-weight: 500;
         white-space: nowrap;
@@ -154,19 +154,16 @@
     .button-primary {
         background: var(--app-accent);
         color: var(--app-on-accent);
-        border-color: var(--app-accent);
     }
     .button-primary:hover:not(:disabled) {
         background: var(--app-accent-hover);
     }
     .button-secondary {
-        background: var(--app-surface);
-        border-color: var(--app-border);
+        background: var(--app-control);
         color: var(--app-ink);
     }
     .button-secondary:hover:not(:disabled) {
-        background: var(--app-subtle);
-        border-color: var(--app-border);
+        background: var(--app-control-hover);
     }
 
     .text-button {
@@ -182,8 +179,18 @@
     }
     .panel {
         background: var(--app-surface);
-        border: 1px solid var(--color-line);
-        border-radius: 7px;
+        border-radius: 0;
+    }
+
+    /* 次级信息用低对比底色成组，避免用边框把工作台切成碎片。 */
+    .surface-inset {
+        background: var(--app-subtle);
+    }
+    .record-list > article {
+        padding: 20px;
+    }
+    .record-list > article:nth-child(even) {
+        background: var(--app-subtle);
     }
 
     .search-field {
@@ -191,8 +198,7 @@
         align-items: center;
         gap: 8px;
         background: var(--app-surface);
-        border: 1px solid var(--color-line);
-        border-radius: 5px;
+        border-radius: 0;
         padding: 7px 10px;
         color: var(--color-muted);
     }
@@ -204,8 +210,9 @@
         width: 145px;
         color: var(--color-ink);
     }
-    .search-field:focus-within {
-        border-color: var(--color-accent);
+    .search-field:has(> input):focus-within {
+        outline: 2px solid var(--color-accent);
+        outline-offset: 2px;
     }
     .table-scroll {
         overflow: hidden;
@@ -218,22 +225,23 @@
     }
     .project-table th {
         padding: 13px 20px;
-        background: var(--app-surface);
+        background: var(--app-control);
         color: var(--color-muted);
         font-size: 10px;
         font-weight: 500;
-        border-bottom: 1px solid var(--color-line);
         white-space: nowrap;
     }
     .project-table td {
         padding: 21px 20px;
-        border-bottom: 1px solid var(--app-subtle);
     }
     .project-table tr:last-child td {
         border-bottom: none;
     }
-    .project-table tbody tr:hover {
-        background: var(--app-surface);
+    .project-table tbody tr:nth-child(even) td {
+        background: var(--app-subtle);
+    }
+    .project-table tbody tr:hover td {
+        background: var(--app-selected);
     }
 
     .production-controls {
@@ -256,8 +264,7 @@
         width: 36px;
         height: 36px;
         flex-shrink: 0;
-        border: 1px solid var(--app-border);
-        border-radius: 5px;
+        border-radius: 0;
         background: var(--app-subtle);
         color: var(--app-ink);
     }
@@ -269,7 +276,7 @@
     .production-stats div,
     .production-status-grid div {
         padding: 10px;
-        border-radius: 4px;
+        border-radius: 0;
         background: var(--app-subtle);
     }
     .production-stats dt,
@@ -297,13 +304,11 @@
     .production-shot-list {
         max-height: 760px;
         overflow: hidden;
-        border-right: 1px solid var(--color-line);
         background: var(--app-surface);
         padding-block: 8px;
     }
     .production-stage {
         padding: 20px 0;
-        border-top: 1px solid var(--color-line);
     }
     .production-stage:first-of-type {
         border-top: none;
@@ -321,9 +326,8 @@
     }
     .keyframe-card {
         overflow: hidden;
-        border: 1px solid var(--color-line);
-        border-radius: 5px;
-        background: var(--app-surface);
+        border-radius: 0;
+        background: var(--app-subtle);
     }
     .keyframe-card .asset-image {
         aspect-ratio: 16 / 9;
@@ -332,9 +336,8 @@
     .video-record {
         display: flex;
         overflow: hidden;
-        border: 1px solid var(--color-line);
-        border-radius: 5px;
-        background: var(--app-surface);
+        border-radius: 0;
+        background: var(--app-subtle);
     }
     .production-video {
         width: min(44%, 390px);
@@ -361,7 +364,6 @@
             max-height: none;
             overflow: hidden;
             border-right: none;
-            border-bottom: 1px solid var(--color-line);
         }
         .production-status-grid,
         .keyframe-grid {
@@ -389,7 +391,6 @@
         justify-content: flex-end;
         gap: 10px;
         padding-top: 20px;
-        border-top: 1px solid var(--color-line);
     }
     .field-label {
         display: block;
@@ -400,10 +401,9 @@
     }
     .input {
         width: 100%;
-        background: var(--app-surface);
+        background: var(--app-control);
         color: var(--color-ink);
-        border: 1px solid var(--app-border);
-        border-radius: 5px;
+        border-radius: 0;
         padding: 9px 11px;
         font-size: 12px;
         line-height: 1.7;
@@ -417,8 +417,7 @@
     }
     .alert {
         padding: 12px 15px;
-        border: 1px solid var(--app-border);
-        border-radius: 5px;
+        border-radius: 0;
         background: var(--app-subtle);
         color: var(--app-ink);
         font-size: 12px;
@@ -426,9 +425,8 @@
         overflow-wrap: anywhere;
     }
     .alert-error {
-        border-color: var(--app-border);
         background: var(--app-subtle);
-        color: var(--app-ink);
+        color: var(--app-danger);
     }
 
     .stage-strip {
@@ -460,8 +458,7 @@
     }
     .history-panel {
         padding: 23px 21px;
-        background: var(--app-surface);
-        border-left: 1px solid var(--color-line);
+        background: var(--app-subtle);
     }
 
     .form-image-grid {
@@ -521,7 +518,6 @@
         gap: 20px;
         padding-top: 20px;
         margin-top: 20px;
-        border-top: 1px solid var(--color-line);
     }
     .generation-row > div:last-child {
         flex-shrink: 0;
@@ -534,7 +530,6 @@
     .shot-list {
         max-height: 1000px;
         overflow: hidden;
-        border-right: 1px solid var(--color-line);
         background: var(--app-surface);
         padding: 0 8px 20px;
     }
@@ -544,8 +539,8 @@
         gap: 14px;
     }
     .reference-card {
-        border: 1px solid var(--color-line);
-        border-radius: 4px;
+        background: var(--app-subtle);
+        border-radius: 0;
         overflow: hidden;
     }
     .reference-placeholder {
@@ -558,7 +553,7 @@
     }
     .storyboard-json {
         padding: 16px;
-        border-radius: 4px;
+        border-radius: 0;
         background: var(--app-subtle);
         font:
             11px/1.9 ui-monospace,
@@ -570,7 +565,6 @@
         line-height: 1.9;
         padding: 17px 0 22px;
         margin-bottom: 23px;
-        border-bottom: 1px solid var(--color-line);
     }
     .script-body {
         white-space: pre-wrap;
@@ -582,7 +576,6 @@
     .script-notes {
         margin-top: 36px;
         padding-top: 20px;
-        border-top: 1px solid var(--color-line);
         font-size: 12px;
     }
     .script-notes dt {
@@ -614,7 +607,7 @@
         overflow-wrap: anywhere;
         padding: 16px;
         background: var(--app-subtle);
-        border-radius: 4px;
+        border-radius: 0;
         font:
             11px/1.9 ui-monospace,
             monospace;
@@ -629,34 +622,32 @@
 
     .group-preview {
         margin-top: 24px;
-        border-top: 1px solid var(--color-line);
         padding-top: 20px;
     }
     .group-chip {
         display: flex;
         align-items: center;
         gap: 10px;
-        border: 1px solid var(--app-subtle);
-        background: var(--app-surface);
-        border-radius: 4px;
+        background: var(--app-subtle);
+        border-radius: 0;
         padding: 8px 11px;
         font-size: 11px;
     }
     .recovery-strip {
+        background: var(--app-subtle);
         display: flex;
         justify-content: space-between;
         flex-wrap: wrap;
         align-items: center;
         gap: 15px;
         padding: 17px;
-        border: 1px dashed var(--app-border);
-        border-radius: 5px;
+        border-radius: 0;
     }
     .subject-ref {
         display: inline-flex;
         background: var(--app-subtle);
         padding: 3px 6px;
-        border-radius: 3px;
+        border-radius: 0;
         color: var(--app-ink);
         font-size: 10px;
     }
@@ -677,7 +668,6 @@
     .beat-section {
         margin-top: 25px;
         padding-top: 23px;
-        border-top: 1px solid var(--color-line);
     }
     .beat-heading {
         display: flex;
@@ -694,9 +684,8 @@
         display: flex;
         gap: 17px;
         padding: 17px;
-        border: 1px solid var(--app-subtle);
-        border-radius: 5px;
-        background: var(--app-surface);
+        border-radius: 0;
+        background: var(--app-subtle);
     }
     .shot-label {
         flex-shrink: 0;
@@ -737,7 +726,6 @@
     }
     .history-panel {
         border-left: 0;
-        border-top: 1px solid var(--color-line);
     }
 
     .breakdown-config {
@@ -760,7 +748,6 @@
     .shot-list {
         max-height: 240px;
         border-right: 0;
-        border-bottom: 1px solid var(--color-line);
     }
 
     .page-container {