.diff-layout .workspace-panel { min-width: 0; }
.diff-input-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.diff-input-card { display: grid; gap: 10px; min-width: 0; }.input-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.diff-textarea { min-height: 320px; resize: vertical; font-family: Consolas, Monaco, "Courier New", monospace; font-size: 14px; line-height: 1.55; white-space: pre; }.input-limit-help { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.option-list { display: grid; gap: 10px; }.option-toggle { display: flex; align-items: flex-start; gap: 12px; min-height: 58px; padding: 13px 14px; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; background: rgba(255,255,255,0.035); color: #e7edf3; cursor: pointer; }.option-toggle input { width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--accent); }.option-toggle span { display: grid; gap: 3px; }.option-toggle strong { font-size: 14px; }.option-toggle small { color: var(--muted); font-size: 12px; line-height: 1.4; }.compact-note { padding: 15px; }.compact-note p { margin: 5px 0 0; }
.diff-legend { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 14px; }.legend-item { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 7px 10px; border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; color: #e7edf3; font-size: 13px; font-weight: 700; }.legend-added { border-color: rgba(122,208,58,0.48); background: rgba(122,208,58,0.12); }.legend-removed { border-color: rgba(255,107,87,0.52); background: rgba(255,107,87,0.12); }.legend-changed { border-color: rgba(255,191,63,0.54); background: rgba(245,163,0,0.12); }.legend-same { color: var(--muted); }
.diff-output { overflow: auto; max-height: 720px; border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; background: rgba(3,3,3,0.46); }.diff-empty-state { margin: 0; padding: 28px; color: var(--muted); }.diff-side-grid { min-width: 760px; display: grid; grid-template-columns: 1fr 1fr; }.diff-side-heading { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.09); color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }.diff-side-row { display: contents; }
.diff-cell, .diff-unified-row { display: grid; grid-template-columns: minmax(58px,auto) minmax(74px,auto) minmax(0,1fr); min-height: 31px; border-bottom: 1px solid rgba(255,255,255,0.045); font-family: Consolas, Monaco, "Courier New", monospace; font-size: 13px; line-height: 1.55; white-space: pre; }.diff-cell { border-right: 1px solid rgba(255,255,255,0.07); }.diff-side-grid > .diff-cell:nth-child(2n) { border-right: 0; }.diff-line-number, .diff-marker { padding: 6px 9px; color: #8d97a3; text-align: right; user-select: none; }.diff-marker { min-width: 74px; color: #dce3ea; font-family: Arial, sans-serif; font-size: 11px; font-weight: 800; text-align: left; white-space: normal; }.diff-line-content { min-width: 0; padding: 6px 12px; overflow-wrap: anywhere; }.diff-cell.is-added, .diff-unified-row.is-added { background: rgba(122,208,58,0.16); box-shadow: inset 3px 0 0 #7ad03a; }.diff-cell.is-removed, .diff-unified-row.is-removed { background: rgba(255,107,87,0.16); box-shadow: inset 3px 0 0 #ff6b57; }.diff-cell.is-changed, .diff-unified-row.is-changed { background: rgba(245,163,0,0.14); box-shadow: inset 3px 0 0 #ffbf3f; }.diff-cell.is-empty { background: rgba(255,255,255,0.015); color: #68727d; }.diff-unified { min-width: 620px; }.diff-unified-row { grid-template-columns: minmax(58px,auto) minmax(100px,auto) minmax(0,1fr); }.diff-no-change { padding: 28px; color: #dff7c6; background: rgba(122,208,58,0.1); font-weight: 700; }
.diff-guide-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin: 28px 0; }.diff-guide-panel, .diff-faq-section { padding: 24px; border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; background: rgba(255,255,255,0.035); }.diff-guide-panel h2, .diff-faq-section h2 { margin: 7px 0 13px; font-size: 23px; }.diff-guide-panel p, .diff-faq-section p { color: #c5ced8; line-height: 1.7; }.diff-guide-panel p:last-child { margin-bottom: 0; }.diff-faq-section { margin: 28px 0; }.faq-list { display: grid; gap: 10px; }.faq-list details { border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; background: rgba(0,0,0,0.16); }.faq-list summary { padding: 15px 17px; color: #f2f5f8; font-weight: 700; cursor: pointer; }.faq-list p { margin: 0; padding: 0 17px 16px; }
.more-tools-section { position: relative; z-index: 1; max-width: 1120px; margin: 38px auto 0; text-align: center; }.more-tools-title-image { display: block; width: min(340px,76vw); margin: 0 auto 22px; filter: drop-shadow(0 0 16px rgba(245,163,0,0.08)) drop-shadow(0 0 32px rgba(245,163,0,0.04)); }.more-tools-carousel { display: grid; grid-template-columns: 52px minmax(0,1fr) 52px; align-items: center; gap: 14px; }.more-tools-viewport { min-width: 0; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }.more-tools-viewport::-webkit-scrollbar { display: none; }.more-tools-viewport:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 5px; border-radius: 24px; }.more-tools-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 44px) / 3); gap: 22px; }.more-tool-card { display: grid; align-content: space-between; gap: 20px; min-height: 190px; padding: 22px 20px; border: 1px solid rgba(255,255,255,0.1); border-radius: 22px; background: linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.025)),linear-gradient(135deg,rgba(255,163,0,0.04),rgba(255,255,255,0.02)); box-shadow: 0 18px 48px rgba(0,0,0,0.24),inset 0 1px 0 rgba(255,255,255,0.03); text-align: left; scroll-snap-align: start; }.more-tool-card h2 { margin: 0; color: #fff; font-size: clamp(20px,2vw,25px); line-height: 1.08; }.more-tool-link { width: fit-content; min-height: 46px; padding: 12px 18px; }.carousel-arrow { display: grid; place-items: center; width: 52px; height: 52px; padding: 0 0 4px; border: 1px solid rgba(255,255,255,0.12); border-radius: 17px; color: #101216; background: linear-gradient(135deg,var(--accent-2),var(--accent)); box-shadow: 0 12px 30px rgba(245,163,0,0.18); font: inherit; font-size: 42px; line-height: 1; cursor: pointer; }.carousel-arrow:hover:not(:disabled), .carousel-arrow:focus-visible:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(245,163,0,0.28); }.carousel-arrow:disabled { opacity: 0.28; cursor: default; box-shadow: none; }
@media (max-width: 960px) { .more-tools-carousel { grid-template-columns: 42px minmax(0,1fr) 42px; gap: 8px; }.more-tools-track { grid-auto-columns: 100%; gap: 14px; }.carousel-arrow { width: 42px; height: 48px; border-radius: 14px; font-size: 36px; } }
@media (max-width: 720px) { .diff-input-grid, .diff-guide-grid { grid-template-columns: 1fr; }.input-title-row { align-items: flex-start; flex-direction: column; }.diff-textarea { min-height: 240px; }.diff-guide-panel, .diff-faq-section { padding: 20px 18px; }.diff-output { border-radius: 14px; } }