:root { --bg:#f4f6fb; --surface:#fff; --surface-2:#f8f9fd; --ink:#171a2a; --muted:#7d8398; --line:#e9ebf3; --purple:#6c55e8; --purple-dark:#5540ca; --purple-soft:#f0edff; --green:#27a66f; --green-soft:#e4f8ef; --red:#e15c70; --red-soft:#ffedf0; --blue:#4b8ddf; --shadow:0 12px 32px rgba(39,44,75,.07); --mono:'DM Mono',Consolas,monospace; --sans:'Manrope','Noto Sans TC',system-ui,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:14px; }
button, textarea, input { font:inherit; }
button { cursor:pointer; }
.app-shell { max-width:1320px; margin:auto; padding:0 34px 36px; }
.topbar { height:82px; display:flex; align-items:center; gap:28px; border-bottom:1px solid var(--line); }
.brand { color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:11px; min-width:210px; }
.brand-mark { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:white; font-weight:800; font-size:19px; background:linear-gradient(140deg,#856ef5,#5b42d3); box-shadow:0 6px 14px #6c55e844; }
.brand strong { display:block; font-size:17px; letter-spacing:-.5px; line-height:18px; }.brand small { color:var(--muted); font:500 8px var(--mono); letter-spacing:1.3px; }
.topbar-note { margin:auto; color:#747b91; font-size:11px; letter-spacing:.2px; }.status-dot { display:inline-block; width:7px; height:7px; margin-right:6px; background:#32b77e; border-radius:50%; box-shadow:0 0 0 4px #32b77e22; }
.topbar-actions { display:flex; gap:8px; }.icon-button { border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--muted); width:33px; height:33px; }.icon-button:hover { color:var(--purple); border-color:#cabffc; }
.hero { display:flex; align-items:flex-end; justify-content:space-between; padding:52px 0 34px; }.eyebrow { margin:0 0 10px; color:var(--purple); font:500 10px var(--mono); letter-spacing:1.6px; }.eyebrow span { color:#a5a9ba; margin-left:10px; }.hero h1 { margin:0; font-size:38px; line-height:1.15; letter-spacing:-1.8px; }.hero-copy { color:var(--muted); margin:12px 0 0; font-size:14px; }.hero-badge { display:flex; align-items:center; gap:10px; padding:12px 15px; border:1px solid #d9e9e1; background:#f2fbf6; border-radius:12px; color:#33765c; }.hero-badge small,.hero-badge b { display:block; }.hero-badge b { font-size:11px; }.hero-badge small { color:#7c9b8e; margin-top:2px; font-size:10px; }.shield { font-size:26px; line-height:1; }
.card,.editor-card,.diff-card,.stat-card,.tip-card { background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:12px; }.toolbar { min-height:64px; display:flex; align-items:center; gap:20px; padding:10px 17px; }.mode-tabs { display:flex; gap:3px; }.mode-tab { border:0; color:#80869a; background:transparent; padding:10px 12px; border-radius:8px; font-size:12px; }.mode-tab span { margin-right:6px; color:#a0a5b7; font-family:var(--mono); }.mode-tab.active { color:var(--purple); background:var(--purple-soft); font-weight:700; }.mode-tab.active span { color:var(--purple); }.toolbar-divider { height:26px; width:1px; background:var(--line); }.check-control { display:flex; align-items:center; gap:7px; white-space:nowrap; color:#656c82; font-size:11px; cursor:pointer; }.check-control input { width:14px; height:14px; margin:0; accent-color:var(--purple); }.accent-check { color:var(--purple); }.toolbar-spacer { flex:1; }.text-button,.subtle-button { border:0; background:transparent; color:var(--purple); font-size:11px; font-weight:700; }.text-button:hover,.subtle-button:hover { color:var(--purple-dark); }.workspace-head { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:26px 4px 12px; }.file-heading { display:flex; align-items:center; gap:11px; }.modified-heading { justify-content:flex-end; text-align:right; }.file-dot { width:9px; height:9px; border-radius:50%; }.file-dot.original { background:#7a63ed; box-shadow:0 0 0 4px #7a63ed1e; }.file-dot.modified { background:#31ad77; box-shadow:0 0 0 4px #31ad771e; }.file-heading b,.file-heading small { display:block; }.file-heading b { font-size:12px; }.file-heading small { color:#9ba0b1; font-size:10px; margin-top:3px; }.workspace-actions { display:flex; gap:17px; }.danger-text { color:#c77a85; }.input-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.editor-card { min-width:0; overflow:hidden; transition:border-color .2s,box-shadow .2s; }.editor-card.dragging { border-color:var(--purple); box-shadow:0 0 0 3px #6c55e822; }.editor-toolbar,.editor-footer { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; background:var(--surface-2); }.editor-toolbar { border-bottom:1px solid var(--line); }.editor-footer { border-top:1px solid var(--line); color:#a2a6b6; font:10px var(--mono); }.editor-label { color:#9399aa; font:500 10px var(--mono); letter-spacing:1px; }.line-count { color:#b0b4c2; margin-left:7px; letter-spacing:0; }.file-button { color:var(--purple); font-size:10px; font-weight:700; cursor:pointer; }.file-button input { display:none; }.editor-card textarea { display:block; width:100%; height:220px; resize:vertical; padding:17px; border:0; outline:0; color:#3d4257; background:#fff; font:12px/1.75 var(--mono); tab-size:2; }.editor-card textarea::placeholder { color:#c3c6d1; }.action-row { display:flex; align-items:center; gap:14px; padding:17px 0 38px; }.primary-button { border:0; border-radius:8px; background:var(--purple); color:#fff; padding:12px 21px; font-size:12px; font-weight:700; box-shadow:0 7px 15px #6c55e82b; }.primary-button:hover { background:var(--purple-dark); transform:translateY(-1px); }.primary-button span { margin-right:7px; font-size:16px; }.action-hint { color:#a6aaba; font-size:10px; }.action-right { display:flex; gap:9px; margin-left:auto; }.outline-button { border:1px solid #dfe1eb; color:#70768b; border-radius:8px; padding:10px 13px; background:#fff; font-size:11px; }.outline-button:hover { color:var(--purple); border-color:#bfb5fb; }
.results-section { padding-top:2px; }.results-head { display:flex; align-items:flex-end; justify-content:space-between; padding:0 3px 16px; }.results-head h2 { margin:0; font-size:23px; letter-spacing:-.8px; }.results-head .eyebrow { margin-bottom:6px; }.result-tools { display:flex; align-items:center; gap:14px; }.view-toggle { padding:3px; border:1px solid var(--line); border-radius:8px; display:flex; gap:2px; }.view-button { border:0; border-radius:6px; padding:7px 10px; background:transparent; color:#989daf; font-size:10px; }.view-button.active { background:var(--ink); color:#fff; }.compact { font-size:10px; }.sync-button { border:0; background:transparent; color:#9a9fb0; font-size:10px; }.sync-button.active { color:var(--purple); }.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px; }.stat-card { display:flex; align-items:center; gap:11px; padding:14px 16px; box-shadow:none; }.stat-icon { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; font-weight:700; font-size:16px; }.stat-icon.purple { color:var(--purple); background:var(--purple-soft); }.stat-icon.green { color:var(--green); background:var(--green-soft); }.stat-icon.red { color:var(--red); background:var(--red-soft); }.stat-icon.blue { color:var(--blue); background:#e9f2ff; }.stat-card small,.stat-card strong { display:block; }.stat-card small { color:#a0a5b4; font-size:10px; }.stat-card strong { margin-top:3px; font-size:18px; letter-spacing:-.5px; }.diff-card { overflow:hidden; }.diff-toolbar { height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 15px; border-bottom:1px solid var(--line); color:#9ca1b2; font-size:10px; }.diff-nav { display:flex; align-items:center; gap:10px; }.diff-nav button { width:24px; height:24px; border:1px solid var(--line); background:#fff; color:#747a8f; border-radius:6px; }.diff-nav button:hover { border-color:#b9aff8; color:var(--purple); }.diff-output { min-height:260px; max-height:590px; overflow:auto; background:#fbfbfd; font:11px/1.75 var(--mono); }.empty-state { min-height:260px; display:grid; place-content:center; text-align:center; color:#abb0c0; }.empty-icon { width:40px; height:40px; margin:0 auto 12px; display:grid; place-items:center; color:#8876e8; background:var(--purple-soft); border-radius:12px; font-size:21px; }.empty-state h3 { margin:0; color:#777e94; font:700 13px var(--sans); }.empty-state p { margin:6px 0 0; font:11px var(--sans); }.diff-table { width:100%; border-collapse:collapse; table-layout:fixed; }.diff-table td { vertical-align:top; border-bottom:1px solid #f0f1f6; }.diff-table .line-no { width:42px; padding:6px 9px 6px 5px; color:#bfc2cc; text-align:right; user-select:none; background:#fafafe; }.diff-table .line-code { width:calc(50% - 42px); padding:6px 14px; white-space:pre-wrap; overflow-wrap:anywhere; }.diff-table .gutter { width:1px; background:#e6e8f0; padding:0; }.diff-table tr.add .right-code,.diff-table tr.add .right-no { background:var(--green-soft); }.diff-table tr.remove .left-code,.diff-table tr.remove .left-no { background:var(--red-soft); }.diff-table tr.change .left-code { background:#fff6f6; }.diff-table tr.change .right-code { background:#f0fcf6; }.diff-table tr.unchanged .line-code { color:#6f7588; }.diff-table tr.hidden-row { display:none; }.diff-table mark { padding:1px 2px; border-radius:3px; }.diff-table mark.removed { color:#c94f62; background:#ffcbd3; text-decoration:line-through; }.diff-table mark.added { color:#23855c; background:#bcefd6; }.unified-table .unified-no { width:94px; padding:6px 10px; color:#b8bdc9; text-align:right; white-space:nowrap; background:#fafafe; }.unified-table .unified-code { padding:6px 16px; white-space:pre-wrap; overflow-wrap:anywhere; }.unified-table tr.add .unified-code { color:#237951; background:var(--green-soft); }.unified-table tr.remove .unified-code { color:#bc485b; background:var(--red-soft); }.unified-table tr.change .unified-code { background:#fff8e8; }.merge-button { opacity:0; position:absolute; left:50%; z-index:2; transform:translateX(-50%); border:1px solid #d5cef9; background:#fff; color:var(--purple); border-radius:5px; height:22px; padding:0 6px; font-size:12px; box-shadow:0 3px 8px #5540ca22; }.diff-table tr { position:relative; }.diff-table tr:hover .merge-button { opacity:1; }.merge-button.right { left:auto; right:50%; transform:translateX(50%); }.tips-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:24px 0 30px; }.tip-card { display:flex; gap:12px; padding:16px; box-shadow:none; }.tip-number { color:#b8b2e8; font:500 11px var(--mono); }.tip-card b { font-size:11px; }.tip-card p { margin:6px 0 0; color:#9197a9; font-size:10px; line-height:1.6; }.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; pointer-events:none; padding:10px 16px; color:#fff; background:#24283a; border-radius:8px; box-shadow:0 8px 22px #24283a44; font-size:11px; transition:.25s; z-index:10; }.toast.show { opacity:1; transform:translate(-50%,0); }.help-dialog { width:min(420px,calc(100% - 36px)); border:1px solid var(--line); border-radius:14px; padding:28px; color:var(--ink); box-shadow:0 25px 70px #24283a33; }.help-dialog::backdrop { background:#20233944; backdrop-filter:blur(3px); }.dialog-close { position:absolute; top:12px; right:14px; border:0; background:transparent; color:#a0a5b5; font-size:24px; }.help-dialog h2 { margin:0 0 9px; font-size:24px; }.help-dialog>p:not(.eyebrow) { color:#7e8496; font-size:12px; line-height:1.7; }.guide-row { display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--line); }.guide-row>span { width:28px; height:28px; display:grid; place-items:center; color:var(--purple); background:var(--purple-soft); border-radius:7px; }.guide-row b,.guide-row small { display:block; }.guide-row b { font-size:11px; }.guide-row small { color:#969bad; font-size:10px; margin-top:3px; }footer { display:flex; justify-content:space-between; color:#b1b5c3; font:9px var(--mono); letter-spacing:.7px; border-top:1px solid var(--line); padding-top:18px; }
body.dark { --bg:#161827; --surface:#202235; --surface-2:#25283b; --ink:#f1f1f7; --muted:#9ea3bb; --line:#35384d; --purple-soft:#312c5a; --green-soft:#193d31; --red-soft:#472831; --blue:#76aef2; --shadow:0 12px 32px #090a1226; }.dark .editor-card textarea,.dark .diff-output { background:#1b1d2d; color:#d9dbea; }.dark .diff-table .line-no,.dark .unified-table .unified-no { background:#1f2133; }.dark .diff-table tr.unchanged .line-code { color:#a6abc0; }.dark .diff-nav button,.dark .outline-button,.dark .merge-button { background:var(--surface); color:#bec2d4; }.dark .view-button.active { background:#fff; color:#202235; }.dark .hero-badge { background:#18382d; border-color:#2b5b48; }.dark .hero-badge small { color:#8ebaa7; }
.diff-output.no-wrap .line-code,.diff-output.no-wrap .unified-code { white-space:pre; overflow-wrap:normal; }
@media (max-width:900px) { .app-shell { padding:0 18px 28px; }.topbar-note { display:none; }.hero { padding-top:35px; }.hero h1 { font-size:32px; }.toolbar { flex-wrap:wrap; gap:9px 14px; }.toolbar-divider { display:none; }.toolbar-spacer { display:none; }.input-grid,.tips-grid { grid-template-columns:1fr; }.workspace-head { grid-template-columns:1fr auto; }.modified-heading { grid-column:1/-1; justify-content:flex-start; text-align:left; }.result-tools { flex-wrap:wrap; justify-content:flex-end; gap:8px; }.stats-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .app-shell { padding:0 12px 24px; }.topbar { height:68px; }.hero { display:block; padding:34px 0 25px; }.hero-badge { display:inline-flex; margin-top:22px; }.hero h1 { font-size:29px; }.workspace-head { gap:10px; }.workspace-actions { gap:8px; }.subtle-button span { display:none; }.editor-card textarea { height:180px; }.action-row { flex-wrap:wrap; padding-bottom:27px; }.action-right { margin-left:0; width:100%; }.outline-button { flex:1; }.results-head { display:block; }.result-tools { justify-content:flex-start; margin-top:13px; }.stats-grid { gap:8px; }.stat-card { padding:11px; }.tips-grid { padding-top:18px; }footer { display:block; line-height:2; }.diff-table .line-code { padding:6px 8px; }.diff-table .line-no { width:33px; padding-right:5px; }.diff-table .line-code { width:calc(50% - 33px); } }

/* Review-focused diff treatment: keep row context, but mark only the changed glyphs. */
.diff-output { background:#f7f8fc; }
.diff-toolbar-left { display:flex; align-items:center; gap:18px; min-width:0; }
.diff-legend { display:flex; align-items:center; gap:9px; color:#9ca1b2; }
.legend-item { font-style:normal; font-size:9px; white-space:nowrap; }
.legend-item.deleted { color:var(--red); }
.legend-item.inserted { color:var(--green); }
.legend-item.glyph { color:#8b90a2; padding-left:9px; border-left:1px solid var(--line); }
.legend-item.method { color:#8b90a2; padding-left:9px; border-left:1px solid var(--line); }
.diff-table .line-no { position:relative; width:50px; padding-left:6px; padding-right:8px; font-size:10px; letter-spacing:-.2px; }
.diff-table .line-sign { display:inline-block; width:12px; margin-right:3px; font-weight:700; text-align:center; }
.diff-table tr.add .right-no .line-sign { color:var(--green); }
.diff-table tr.remove .left-no .line-sign { color:var(--red); }
.diff-table tr.change .left-no .line-sign { color:var(--red); }
.diff-table tr.change .right-no .line-sign { color:var(--green); }
.diff-table .gutter { position:relative; width:34px; min-width:34px; background:#f4f5fa; border-left:1px solid #e4e6ef; border-right:1px solid #e4e6ef; }
.diff-table tr.add .right-code,.diff-table tr.add .right-no { background:#e8f8f0; }
.diff-table tr.remove .left-code,.diff-table tr.remove .left-no { background:#ffedf0; }
.diff-table tr.change .left-code { background:#fff5f6; }
.diff-table tr.change .right-code { background:#effbf5; }
.diff-table tr:hover .line-no { color:#777d92; }
.diff-table tr.focused .line-no { color:var(--purple); background:var(--purple-soft); }
.diff-table tr.focused .line-code { box-shadow:inset 0 1px 0 #8d7af0, inset 0 -1px 0 #8d7af0; }
.diff-table mark { display:inline; padding:2px 2px 1px; border-radius:3px; font-weight:600; }
.diff-table mark.removed { color:#b84358; background:#ffc6d0; text-decoration:line-through; text-decoration-thickness:1px; }
.diff-table mark.added { color:#17754f; background:#b8efd2; box-shadow:0 0 0 1px #8eddb6; }
.merge-button { opacity:0; min-width:24px; padding:0; transition:opacity .15s, transform .15s; }
.diff-table tr:hover .merge-button,.diff-table tr.focused .merge-button { opacity:1; }
.diff-table tr.change .gutter { background:linear-gradient(90deg,#fff0f2 0 50%,#e9f9f1 50%); }
.unified-table .unified-code mark { font-weight:600; }
.unified-table tr.focused .unified-no { color:var(--purple); background:var(--purple-soft); }

@media (max-width:900px) {
  .toolbar { align-items:flex-start; }
  .mode-tabs { width:100%; }
  .mode-tab { flex:1; }
  .toolbar-divider { display:none; }
  .check-control { padding:4px 0; }
  .result-tools { max-width:100%; overflow-x:auto; padding-bottom:3px; }
}
@media (max-width:680px) {
  .app-shell { padding-left:14px; padding-right:14px; }
  .hero h1 { letter-spacing:-1.2px; }
  .input-grid { gap:10px; }
  .diff-output { max-height:520px; -webkit-overflow-scrolling:touch; }
  .split-output .diff-table { min-width:760px; }
  .split-output .diff-table .line-code { white-space:pre-wrap; overflow-wrap:anywhere; }
  .result-tools { justify-content:flex-start; }
  .diff-toolbar-left { gap:10px; }
  .diff-legend { display:none; }
  .view-toggle { flex:none; }
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:420px) {
  .topbar { gap:12px; }
  .brand { min-width:auto; }
  .brand small { display:none; }
  .topbar-actions { margin-left:auto; }
  .hero-copy { font-size:12px; line-height:1.7; }
  .workspace-head { padding-top:20px; }
  .file-heading small { max-width:135px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .action-hint { width:100%; }
  .results-head h2 { font-size:20px; }
  .stat-card small { font-size:9px; }
  .stat-card strong { font-size:16px; }
  .tip-card { padding:13px; }
}

/* Compact internal-tool layout */
.app-shell { max-width:1440px; padding-bottom:22px; }
.topbar { height:64px; }
.brand-mark { width:31px; height:31px; border-radius:8px; font-size:16px; }
.brand strong { font-size:15px; }
.brand small { font-size:8px; }
.topbar-note { margin-left:auto; margin-right:8px; }
.topbar-note a, footer a { color:var(--muted); text-decoration:none; }
.topbar-note a:hover, footer a:hover { color:var(--purple); }
.toolbar { margin-top:22px; box-shadow:none; }
.editor-toolbar { min-height:47px; }
.editor-label { display:flex; align-items:center; gap:6px; }
.editor-label .file-dot { flex:none; width:7px; height:7px; box-shadow:none; }
.editor-label small { color:#a2a6b5; font:10px var(--sans); max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-button { padding:6px 8px; border:1px solid #e0e2eb; border-radius:6px; }
.file-button:hover { border-color:#c4bafb; background:var(--purple-soft); }
.editor-card textarea { height:210px; }
.review-section { margin-top:17px; }
.review-tools { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:9px; }
.review-label { color:var(--ink); font-size:12px; font-weight:700; }
.review-label span { margin-left:9px; color:#9da2b3; font-size:10px; font-weight:400; }
.result-tools { gap:10px; }
.compact-action { padding:7px 10px; }
.diff-card { box-shadow:none; }
.diff-card .diff-toolbar { min-height:35px; height:35px; background:var(--surface-2); }
.diff-card .diff-toolbar-left { width:100%; }
.diff-output { max-height:560px; }
footer { padding-top:15px; font:10px var(--sans); letter-spacing:0; }

@media (max-width:900px) {
  .toolbar { margin-top:16px; }
  .review-tools { align-items:flex-start; flex-direction:column; }
  .result-tools { width:100%; overflow-x:auto; padding-bottom:1px; }
}
@media (max-width:560px) {
  .topbar-note { display:block; margin-left:auto; margin-right:0; font-size:10px; }
  .editor-card textarea { height:180px; }
  .review-tools { gap:8px; }
  .review-label span { display:block; margin:4px 0 0; }
}