Simplify compare panel layout

dist/assets/{index-Dskg7yOS.css → index-DJxLZWoU.css}

@@ -1 +1 @@
-:root{color-scheme:light;font-family:Space Grotesk,Avenir Next,Segoe UI,sans-serif;line-height:1.5;font-weight:400;--paper: #f4efe7;--ink: #182225;--muted: #627073;--panel: rgba(255, 251, 245, .84);--panel-strong: rgba(255, 251, 245, .94);--border: rgba(24, 34, 37, .12);--accent: #0e7490;--accent-strong: #0f5d72;--error: #b42318;background:radial-gradient(circle at top left,rgba(14,116,144,.16),transparent 32%),radial-gradient(circle at top right,rgba(224,122,95,.14),transparent 26%),linear-gradient(180deg,#f8f4ef,#efe6db);color:var(--ink)}*{box-sizing:border-box}html,body,#app{min-height:100%}body{margin:0}button,input{font:inherit}img{display:block;max-width:100%}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.shell{display:grid;height:100vh;min-height:100vh;grid-template-columns:minmax(320px,420px) minmax(0,1fr);gap:18px;padding:18px;overflow:hidden}.hero,.panel{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:var(--panel);border:1px solid var(--border);border-radius:28px;box-shadow:0 20px 80px #18222514}.hero{display:flex;flex-direction:column;gap:14px;min-height:0;overflow:auto;padding:20px}.eyebrow{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}.hero h1{margin:0;font-size:clamp(2.4rem,4vw,4.2rem);line-height:.96;letter-spacing:-.06em}.lede{margin:0;max-width:30rem;color:var(--muted)}.status-card{display:grid;gap:10px 20px;grid-template-columns:repeat(2,minmax(0,1fr));padding-block:10px 12px;border-block:1px solid var(--border)}.status-card>div:last-child{grid-column:1 / -1}.meta-card{display:grid;gap:2px;padding-top:10px;border-top:1px solid var(--border)}.label,.meta-title{margin:0 0 4px;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.value,.status-text,.meta-card p{margin:0}.model-picker{display:grid;gap:8px;padding-block:4px 10px}.model-select{width:100%;border:1px solid var(--border);border-radius:14px;background:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%23182225' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 16px center;background-repeat:no-repeat;background-size:14px 9px;color:var(--ink);padding:12px 44px 12px 14px;-moz-appearance:none;appearance:none;-webkit-appearance:none;outline:none}.model-meta{color:var(--muted);font-size:.9rem}.model-note{color:var(--muted);font-size:.82rem}.dropzone{display:grid;place-items:center;gap:8px;min-height:180px;padding:20px;border:1.5px dashed rgba(14,116,144,.34);border-radius:24px;background:linear-gradient(135deg,rgba(14,116,144,.08),transparent),var(--panel-strong);text-align:center;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.dropzone-active{border-color:#0e7490a8;box-shadow:0 14px 28px #0e74901f}.dropzone-title{margin:0;font-size:1.15rem;font-weight:700}.dropzone-copy{margin:0;color:var(--muted)}.actions{display:flex;gap:12px}.button{border:0;border-radius:999px;padding:14px 20px;font-weight:700;cursor:pointer;transition:transform .18s ease,opacity .18s ease,background .18s ease}.button:disabled{cursor:not-allowed;opacity:.5}.button:not(:disabled):hover{transform:translateY(-1px)}.button-primary{background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#fff}.button-secondary{background:#fff;border:1px solid var(--border);color:var(--ink)}.error-text{margin:0;color:var(--error)}.workspace{display:grid;min-height:0;grid-template-columns:minmax(0,1fr);gap:18px}.panel{display:flex;min-height:0;flex-direction:column;padding:14px}.panel-header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}.panel-header h2,.panel-header span{margin:0}.panel-header h2{font-size:1rem;text-transform:uppercase;letter-spacing:.08em}.panel-header span{color:var(--muted)}.stage{display:grid;flex:1;place-items:center;position:relative;overflow:hidden;min-height:360px;border-radius:20px;background:radial-gradient(circle at center,rgba(14,116,144,.08),transparent 56%),#ffffffb3}.checkerboard{background-color:#f7f7f7;background-image:linear-gradient(45deg,#e6e6e6 25%,transparent 25%),linear-gradient(-45deg,#e6e6e6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e6e6e6 75%),linear-gradient(-45deg,transparent 75%,#e6e6e6 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}.stage img{width:100%;height:100%;object-fit:contain}.compare-panel{height:100%;gap:12px}.compare-stage{min-height:0;cursor:col-resize;flex:1;-webkit-user-select:none;user-select:none}.compare-image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.compare-divider{position:absolute;inset-block:0;width:2px;background:linear-gradient(180deg,transparent,rgba(24,34,37,.8),transparent);box-shadow:0 0 0 1px #ffffff8c,0 0 18px #1822253d}.compare-handle{position:absolute;top:50%;left:50%;display:flex;gap:4px;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid rgba(24,34,37,.12);border-radius:999px;background:#fffbf5f0;box-shadow:0 12px 28px #18222529;transform:translate(-50%,-50%)}.compare-handle span{width:2px;height:14px;border-radius:999px;background:#182225b8}.stage-badge{position:absolute;top:16px;display:grid;gap:2px;padding:10px 12px;border:1px solid rgba(24,34,37,.1);border-radius:14px;background:#fffbf5e6;box-shadow:0 10px 22px #18222514;color:var(--muted);font-size:.88rem}.stage-badge-left{left:16px}.stage-badge-right{right:16px;text-align:right}.stage-badge-title{color:var(--ink);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.compare-footer{display:flex;flex-wrap:wrap;gap:10px}.compare-footer-group{display:flex;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--border);border-radius:999px;color:var(--muted)}.compare-key{color:var(--ink);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.empty{margin:0;max-width:16rem;text-align:center;color:var(--muted)}@media(max-width:1180px){.shell{height:auto;grid-template-columns:1fr;overflow:visible}.workspace{grid-template-columns:1fr}.stage{min-height:320px}.compare-stage{min-height:380px}.hero{overflow:visible}}
+:root{color-scheme:light;font-family:Space Grotesk,Avenir Next,Segoe UI,sans-serif;line-height:1.5;font-weight:400;--paper: #f4efe7;--ink: #182225;--muted: #627073;--panel: rgba(255, 251, 245, .84);--panel-strong: rgba(255, 251, 245, .94);--border: rgba(24, 34, 37, .12);--accent: #0e7490;--accent-strong: #0f5d72;--error: #b42318;background:radial-gradient(circle at top left,rgba(14,116,144,.16),transparent 32%),radial-gradient(circle at top right,rgba(224,122,95,.14),transparent 26%),linear-gradient(180deg,#f8f4ef,#efe6db);color:var(--ink)}*{box-sizing:border-box}html,body,#app{min-height:100%}body{margin:0}button,input{font:inherit}img{display:block;max-width:100%}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.shell{display:grid;height:100vh;min-height:100vh;grid-template-columns:minmax(320px,420px) minmax(0,1fr);gap:18px;padding:18px;overflow:hidden}.hero,.panel{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:var(--panel);border:1px solid var(--border);border-radius:28px;box-shadow:0 20px 80px #18222514}.hero{display:flex;flex-direction:column;gap:14px;min-height:0;overflow:auto;padding:20px}.eyebrow{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}.hero h1{margin:0;font-size:clamp(2.4rem,4vw,4.2rem);line-height:.96;letter-spacing:-.06em}.lede{margin:0;max-width:30rem;color:var(--muted)}.status-card{display:grid;gap:10px 20px;grid-template-columns:repeat(2,minmax(0,1fr));padding-block:10px 12px;border-block:1px solid var(--border)}.status-card>div:last-child{grid-column:1 / -1}.meta-card{display:grid;gap:2px;padding-top:10px;border-top:1px solid var(--border)}.label,.meta-title{margin:0 0 4px;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.value,.status-text,.meta-card p{margin:0}.model-picker{display:grid;gap:8px;padding-block:4px 10px}.model-select{width:100%;border:1px solid var(--border);border-radius:14px;background:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%23182225' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 16px center;background-repeat:no-repeat;background-size:14px 9px;color:var(--ink);padding:12px 44px 12px 14px;-moz-appearance:none;appearance:none;-webkit-appearance:none;outline:none}.model-meta{color:var(--muted);font-size:.9rem}.model-note{color:var(--muted);font-size:.82rem}.dropzone{display:grid;place-items:center;gap:8px;min-height:180px;padding:20px;border:1.5px dashed rgba(14,116,144,.34);border-radius:24px;background:linear-gradient(135deg,rgba(14,116,144,.08),transparent),var(--panel-strong);text-align:center;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.dropzone-active{border-color:#0e7490a8;box-shadow:0 14px 28px #0e74901f}.dropzone-title{margin:0;font-size:1.15rem;font-weight:700}.dropzone-copy{margin:0;color:var(--muted)}.actions{display:flex;gap:12px}.button{border:0;border-radius:999px;padding:14px 20px;font-weight:700;cursor:pointer;transition:transform .18s ease,opacity .18s ease,background .18s ease}.button:disabled{cursor:not-allowed;opacity:.5}.button:not(:disabled):hover{transform:translateY(-1px)}.button-primary{background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#fff}.button-secondary{background:#fff;border:1px solid var(--border);color:var(--ink)}.error-text{margin:0;color:var(--error)}.workspace{display:grid;min-height:0;grid-template-columns:minmax(0,1fr);gap:18px}.stage{display:grid;flex:1;place-items:center;position:relative;overflow:hidden;min-height:360px;border-radius:20px;background:radial-gradient(circle at center,rgba(14,116,144,.08),transparent 56%),#ffffffb3}.checkerboard{background-color:#f7f7f7;background-image:linear-gradient(45deg,#e6e6e6 25%,transparent 25%),linear-gradient(-45deg,#e6e6e6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e6e6e6 75%),linear-gradient(-45deg,transparent 75%,#e6e6e6 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}.stage img{width:100%;height:100%;object-fit:contain}.compare-panel{display:flex;min-height:0;flex-direction:column;height:100%;gap:12px}.compare-stage{min-height:0;cursor:col-resize;flex:1;-webkit-user-select:none;user-select:none}.compare-image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.compare-divider{position:absolute;inset-block:0;width:2px;background:linear-gradient(180deg,transparent,rgba(24,34,37,.8),transparent);box-shadow:0 0 0 1px #ffffff8c,0 0 18px #1822253d}.compare-handle{position:absolute;top:50%;left:50%;display:flex;gap:4px;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid rgba(24,34,37,.12);border-radius:999px;background:#fffbf5f0;box-shadow:0 12px 28px #18222529;transform:translate(-50%,-50%)}.compare-handle span{width:2px;height:14px;border-radius:999px;background:#182225b8}.stage-badge{position:absolute;top:16px;display:grid;gap:2px;padding:10px 12px;border:1px solid rgba(24,34,37,.1);border-radius:14px;background:#fffbf5e6;box-shadow:0 10px 22px #18222514;color:var(--muted);font-size:.88rem}.stage-badge-left{left:16px}.stage-badge-right{right:16px;text-align:right}.stage-badge-title{color:var(--ink);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.compare-footer{display:flex;flex-wrap:wrap;gap:10px;padding-top:4px}.compare-footer-group{display:flex;gap:8px;align-items:center;padding:0;color:var(--muted)}.compare-key{color:var(--ink);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.empty{margin:0;max-width:16rem;text-align:center;color:var(--muted)}@media(max-width:1180px){.shell{height:auto;grid-template-columns:1fr;overflow:visible}.workspace{grid-template-columns:1fr}.stage{min-height:320px}.compare-stage{min-height:380px}.hero{overflow:visible}}

dist/index.html

@@ -9,8 +9,8 @@
     />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>BRIA RMBG Web</title>
-    <script type="module" crossorigin src="/assets/index-pPuyuIrf.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Dskg7yOS.css">
+    <script type="module" crossorigin src="/assets/index-Dno3Xc4F.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DJxLZWoU.css">
   </head>
   <body>
     <div id="app"></div>

src/App.vue

@@ -859,12 +859,7 @@ function downloadResult(): void {
     </aside>
 
     <main class="workspace">
-      <section class="panel compare-panel">
-        <div class="panel-header">
-          <h2>Vertical Compare</h2>
-          <span v-if="sourceSummary">{{ sourceSummary.dimensions }}</span>
-        </div>
-
+      <section class="compare-panel">
         <div
           ref="compareStageRef"
           class="stage compare-stage checkerboard"

src/style.css

@@ -260,36 +260,6 @@ img {
   gap: 18px;
 }
 
-.panel {
-  display: flex;
-  min-height: 0;
-  flex-direction: column;
-  padding: 14px;
-}
-
-.panel-header {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 14px;
-}
-
-.panel-header h2,
-.panel-header span {
-  margin: 0;
-}
-
-.panel-header h2 {
-  font-size: 1rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.panel-header span {
-  color: var(--muted);
-}
-
 .stage {
   display: grid;
   flex: 1;
@@ -325,6 +295,9 @@ img {
 }
 
 .compare-panel {
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
   height: 100%;
   gap: 12px;
 }
@@ -412,15 +385,14 @@ img {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
+  padding-top: 4px;
 }
 
 .compare-footer-group {
   display: flex;
   gap: 8px;
   align-items: center;
-  padding: 8px 0;
-  border-top: 1px solid var(--border);
-  border-radius: 999px;
+  padding: 0;
   color: var(--muted);
 }