/* ===== Diff Checker Pages CSS (DifferencePilot) ===== */

/* Red file input button */
input[type="file"]::file-selector-button{background:#dc2626;color:#fff;border:1px solid #b91c1c;border-radius:8px;padding:6px 14px;font-weight:900;font-size:12px;cursor:pointer;transition:background .15s}
input[type="file"]::file-selector-button:hover{background:#ef4444}

/* Tool card & header */
.tool-card{background:#fff;border:1px solid #dbe3ef;border-radius:16px;box-shadow:0 8px 20px rgba(15,23,42,.08);overflow:hidden}
.tool-header{padding:14px;display:flex;justify-content:space-between;gap:12px;align-items:center;background:#f8fafc;border-bottom:1px solid #dbe3ef}
.tool-header h2,.result-header h2{margin:0;color:#172554}
.tool-header p{margin:4px 0 0;color:#64748b}
.tool-actions,.result-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Buttons (diff version) */
button{border:0;background:#2563eb;color:white;padding:10px 15px;border-radius:11px;font-weight:900;cursor:pointer;box-shadow:0 8px 18px rgba(37,99,235,.25)}
button:hover{background:#1d4ed8}
button.btn-light{background:#e5e7eb;color:#111827;box-shadow:none}
button.btn-light:hover{background:#d1d5db}

/* Options */
.options-card{display:flex;gap:14px;flex-wrap:wrap;padding:12px;border-bottom:1px solid #dbe3ef}
.options-card label{font-size:13px;font-weight:800;color:#334155}

/* Summary grid */
.summary-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:12px}
.summary-card{border:1px solid #dbe3ef;border-radius:14px;padding:12px;background:#fff}
.summary-card span{display:block;font-size:12px;color:#64748b;font-weight:900;margin-bottom:5px;text-transform:uppercase}
.summary-card b{font-size:24px}
.summary-card.added b{color:#16a34a}
.summary-card.removed b{color:#dc2626}
.summary-card.changed b{color:#ca8a04}
.summary-card.same b{color:#475569}

/* Editor grid */
.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 12px 12px}
.card-title{min-height:56px;padding:10px 12px;background:#f8fafc;border-bottom:1px solid #dbe3ef;display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-title strong{display:block;color:#334155}
.card-title small{display:block;color:#64748b;font-size:11px;margin-top:3px}
.card-title input{max-width:240px;font-size:12px}
textarea{width:100%;height:300px;resize:vertical;border:0;outline:none;padding:12px;font-size:14px;line-height:1.45;font-family:Consolas,Monaco,monospace}

/* Result card */
.result-actions{padding:0 12px 12px}
.result-card{margin:0 12px 12px;background:#fff;border:1px solid #dbe3ef;border-radius:16px;box-shadow:0 8px 20px rgba(15,23,42,.08);overflow:hidden}
.result-header{padding:12px;background:#f8fafc;border-bottom:1px solid #dbe3ef;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Legend */
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;font-weight:800;color:#475569}
.lg{display:inline-block;width:13px;height:13px;border-radius:4px;vertical-align:middle;margin-right:4px;border:1px solid #cbd5e1}
.lg.added{background:#dcfce7}
.lg.removed{background:#fee2e2}
.lg.changed{background:#fef3c7}
.lg.same{background:#f8fafc}
.status-pill{padding:5px 9px;background:#e5e7eb;color:#334155;border-radius:999px;font-size:12px;font-weight:900}

/* Difference table */
.difference-table-wrap{overflow:auto;max-height:520px}
.difference-table{width:100%;border-collapse:collapse;table-layout:fixed;font-family:Consolas,Monaco,monospace;font-size:13px}
.difference-table th{position:sticky;top:0;z-index:3;background:#334155;color:#fff;padding:8px;text-align:left;border:1px solid #475569}
.difference-table td{border:1px solid #e5e7eb;padding:7px 8px;vertical-align:top;white-space:pre-wrap;word-break:break-word}
.line-col{width:80px;text-align:center!important;font-weight:900}
td.line-col{background:#f8fafc;color:#64748b}
tr.added-row td.new-cell{background:#dcfce7}
tr.added-row td.old-cell,tr.removed-row td.new-cell{background:#f8fafc;color:#94a3b8}
tr.removed-row td.old-cell{background:#fee2e2}
tr.changed-row td.text-cell{background:#fef3c7}
.empty{padding:24px!important;text-align:center;font-family:Arial,Helvetica,sans-serif;color:#64748b}

/* Only-difference & diff items */
.only-difference{padding:12px;min-height:120px;max-height:480px;overflow:auto;font-family:Consolas,Monaco,monospace;font-size:13px;line-height:1.45}
.difference-item{border:1px solid #dbe3ef;border-radius:13px;overflow:hidden;margin-bottom:10px}
.difference-item-title{padding:8px 10px;background:#f8fafc;color:#334155;font-family:Arial,Helvetica,sans-serif;font-weight:900;font-size:12px;border-bottom:1px solid #dbe3ef}
.difference-line{padding:8px 10px;white-space:pre-wrap;word-break:break-word}
.difference-line.old{background:#fee2e2}
.difference-line.new{background:#dcfce7}
mark{background:#facc15;color:#111827;border-radius:4px;padding:0 2px}
.keyword-list{columns:2;gap:28px}

/* Responsive */
@media(max-width:900px){
  .tool-header{flex-direction:column;align-items:flex-start}
  .summary-grid{grid-template-columns:repeat(2,1fr)}
  .editor-grid{grid-template-columns:1fr}
  textarea{height:230px}
  .keyword-list{columns:1}
}
@media(max-width:520px){
  .summary-grid{grid-template-columns:1fr}
  .card-title{flex-direction:column;align-items:flex-start}
  .card-title input{max-width:100%}
}

/* ===== Image Difference Checker ===== */
.image-options-card{display:flex;gap:14px;flex-wrap:wrap;padding:12px;border-bottom:1px solid #dbe3ef;background:#fff}
.image-options-card label{display:flex;align-items:center;gap:8px;color:#334155;font-size:13px;font-weight:900}
.image-options-card input[type="range"]{width:160px}
.image-options-card select{height:36px;border:1px solid #cbd5e1;border-radius:10px;padding:0 10px;background:#fff;color:#111827;font-weight:800}
.image-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:12px}
.image-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 12px 12px}
.image-panel{background:#fff;border:1px solid #dbe3ef;border-radius:16px;overflow:hidden;box-shadow:0 8px 20px rgba(15,23,42,.08)}
.image-preview-box{
  min-height:260px;
  background:linear-gradient(45deg,#f8fafc 25%,transparent 25%),linear-gradient(-45deg,#f8fafc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f8fafc 75%),linear-gradient(-45deg,transparent 75%,#f8fafc 75%);
  background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0;
  display:flex;align-items:center;justify-content:center;padding:12px;position:relative
}
.image-preview-box img{max-width:100%;max-height:420px;object-fit:contain;display:none}
.image-placeholder{color:#64748b;font-weight:900;font-size:13px}
.image-result-card{margin-top:0}
.result-actions-inline{display:flex;gap:8px;flex-wrap:wrap}
.image-result-wrap{min-height:320px;padding:12px;background:#f8fafc;display:flex;align-items:center;justify-content:center;overflow:auto;position:relative}
#differenceCanvas{max-width:100%;height:auto;display:none;background:#fff;border:1px solid #dbe3ef;border-radius:12px;box-shadow:0 8px 20px rgba(15,23,42,.10)}

@media(max-width:900px){
  .image-summary-grid{grid-template-columns:repeat(2,1fr)}
  .image-grid{grid-template-columns:1fr}
  .image-options-card{align-items:flex-start;flex-direction:column}
}
@media(max-width:520px){
  .image-summary-grid{grid-template-columns:1fr}
  .image-preview-box{min-height:200px}
  .image-options-card input[type="range"]{width:120px}
}