.hash-page { --hash-blue:#9ac7ff; --hash-gold:#efd38d; }
.hash-intro { max-width:900px; }
.truth-card, .hash-workspace { border:1px solid var(--line); border-radius:var(--radius); background:rgba(16,23,19,.88); box-shadow:var(--shadow); }
.truth-card { display:grid; grid-template-columns:72px minmax(0,1fr); gap:24px; padding:clamp(24px,4vw,42px); border-color:rgba(198,223,136,.27); background:linear-gradient(145deg,rgba(198,223,136,.075),rgba(16,23,19,.92)); }
.truth-icon { width:64px; height:64px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:20px; color:var(--accent); }
.truth-icon svg { width:38px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.truth-card h2 { max-width:850px; margin:6px 0 13px; font-size:clamp(1.8rem,4vw,3.2rem); line-height:1.03; letter-spacing:-.045em; }
.truth-card > div > p:not(.tool-format) { max-width:900px; color:var(--muted); }
.truth-card strong { color:var(--text); }
.truth-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:24px; }
.truth-grid article { padding:17px; border:1px solid var(--line); border-radius:15px; background:rgba(0,0,0,.15); }
.truth-grid strong, .truth-grid span { display:block; }
.truth-grid span { margin-top:5px; color:var(--muted); font-size:.8rem; }
.hash-workspace { margin-top:18px; padding:clamp(20px,4vw,38px); }
.workspace-header, .result-area-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.workspace-header h2, .result-area-header h3 { margin:4px 0 0; font-size:clamp(1.7rem,3vw,2.7rem); letter-spacing:-.04em; }
.clear-workspace { display:inline-flex; align-items:center; }
.mode-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:28px 0 24px; padding:5px; border:1px solid var(--line); border-radius:16px; background:rgba(0,0,0,.2); }
.mode-tab { min-height:50px; border:0; border-radius:11px; background:transparent; color:var(--muted); cursor:pointer; font-weight:780; }
.mode-tab:hover { color:var(--text); }
.mode-tab[aria-selected="true"] { background:var(--panel-2); color:var(--text); box-shadow:0 8px 24px rgba(0,0,0,.22); }
.mode-panel[hidden] { display:none; }
.panel-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:16px; align-items:stretch; }
.drop-zone { position:relative; min-height:290px; display:grid; place-items:center; align-content:center; padding:28px; border:1.5px dashed rgba(198,223,136,.34); border-radius:20px; background:rgba(198,223,136,.025); text-align:center; cursor:pointer; transition:border-color .2s ease,background .2s ease,transform .2s ease; }
.drop-zone:hover, .drop-zone:focus-visible, .drop-zone.is-dragging { border-color:var(--accent); background:rgba(198,223,136,.065); transform:translateY(-2px); outline:none; }
.drop-zone input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.drop-visual { width:68px; height:68px; display:grid; place-items:center; margin-bottom:17px; border-radius:20px; background:rgba(198,223,136,.08); color:var(--accent); }
.drop-visual svg { width:34px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.drop-zone strong, .drop-zone span, .drop-zone small { display:block; }
.drop-zone strong { font-size:1.08rem; }
.drop-zone > span:not(.drop-visual):not(.compare-letter) { margin-top:5px; color:var(--muted); }
.drop-zone small { margin-top:11px; color:var(--soft); }
.compact-drop { min-height:230px; }
.algorithm-card, .verify-form { padding:24px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.025); }
.algorithm-card h3 { margin:5px 0 18px; }
.algorithm-options { display:grid; gap:8px; }
.algorithm-options label { display:flex; gap:11px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:13px; cursor:pointer; background:rgba(0,0,0,.12); }
.algorithm-options label:has(input:checked) { border-color:rgba(198,223,136,.3); background:rgba(198,223,136,.055); }
.algorithm-options input { accent-color:var(--accent); width:18px; height:18px; }
.algorithm-options strong, .algorithm-options small { display:block; }
.algorithm-options small { color:var(--muted); }
.legacy-option { border-color:rgba(239,211,141,.14) !important; }
.legacy-note { margin:14px 0 0; color:var(--soft); font-size:.76rem; }
.selected-files { margin-top:16px; display:grid; gap:8px; }
.selected-files[hidden] { display:none; }
.selected-file { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.02); }
.file-index { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:rgba(198,223,136,.08); color:var(--accent); font-weight:800; font-size:.75rem; }
.file-copy { min-width:0; }
.file-copy strong, .file-copy span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-copy span { color:var(--muted); font-size:.76rem; }
.remove-one { width:34px; height:34px; border:0; border-radius:50%; background:transparent; color:var(--muted); cursor:pointer; font-size:1.1rem; }
.remove-one:hover { color:var(--text); background:rgba(255,255,255,.05); }
.panel-actions { display:flex; gap:10px; margin-top:18px; }
.panel-actions .primary-button { flex:1; }
.cancel-button { width:auto; }
.progress-panel { margin-top:16px; padding:16px; border:1px solid var(--line); border-radius:15px; background:rgba(0,0,0,.17); }
.progress-panel[hidden] { display:none; }
.progress-copy { display:flex; justify-content:space-between; gap:14px; margin-bottom:10px; font-size:.84rem; }
.progress-copy span { color:var(--muted); }
.result-area { margin-top:20px; padding-top:20px; border-top:1px solid var(--line); }
.result-area[hidden] { display:none; }
.export-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.export-actions .secondary-button { min-height:42px; padding-inline:13px; font-size:.78rem; }
.result-list { display:grid; gap:12px; margin-top:17px; }
.hash-result-card { overflow:hidden; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.02); }
.hash-result-card.duplicate { border-color:rgba(154,199,255,.32); }
.hash-result-head { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; padding:18px; border-bottom:1px solid var(--line); }
.hash-result-head strong, .hash-result-head span { display:block; }
.hash-result-head strong { overflow-wrap:anywhere; }
.hash-result-head span { margin-top:4px; color:var(--muted); font-size:.76rem; }
.result-badges { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.result-badge { padding:.34rem .55rem; border-radius:999px; color:var(--muted); background:rgba(255,255,255,.05); font-size:.66rem; font-weight:780; }
.result-badge.duplicate { color:var(--hash-blue); background:rgba(154,199,255,.09); }
.hash-rows { display:grid; }
.hash-row { display:grid; grid-template-columns:90px minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line); }
.hash-row:last-child { border-bottom:0; }
.hash-label strong, .hash-label small { display:block; }
.hash-label small { color:var(--warning); font-size:.64rem; }
.hash-value { color:var(--text); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.78rem; overflow-wrap:anywhere; }
.copy-hash { min-height:36px; padding:0 11px; border:1px solid var(--line-strong); border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; font-weight:750; font-size:.72rem; }
.copy-hash:hover { color:var(--text); background:rgba(255,255,255,.04); }
.verify-grid { grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr); }
.verify-form { display:flex; flex-direction:column; }
.verify-form > label, .field-row label, .compare-controls label { display:block; margin-bottom:8px; color:#d7ded9; font-size:.8rem; font-weight:720; }
textarea, select { width:100%; border:1px solid var(--line-strong); border-radius:12px; background:#0b100d; color:var(--text); outline:none; }
textarea { min-height:130px; resize:vertical; padding:13px; font:inherit; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
select { min-height:48px; padding:0 38px 0 13px; }
textarea:focus, select:focus { border-color:var(--accent-deep); box-shadow:0 0 0 3px rgba(198,223,136,.08); }
.field-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(190px,.65fr); gap:12px; margin-top:13px; }
.detected-box { display:flex; flex-direction:column; justify-content:center; padding:11px 14px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025); }
.detected-box span { color:var(--muted); font-size:.7rem; }
.detected-box strong { margin-top:3px; }
.verification-result, .comparison-result { margin-top:18px; padding:22px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.025); }
.verification-result[hidden], .comparison-result[hidden] { display:none; }
.verdict { display:grid; grid-template-columns:52px minmax(0,1fr); gap:15px; align-items:center; }
.verdict-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:50%; font-size:1.4rem; }
.verdict.match .verdict-icon { color:var(--success); background:rgba(169,220,145,.1); }
.verdict.mismatch .verdict-icon { color:var(--danger); background:rgba(255,155,143,.1); }
.verdict h3 { margin:0; font-size:1.45rem; }
.verdict p { margin:4px 0 0; color:var(--muted); }
.verification-detail { display:grid; gap:9px; margin-top:18px; }
.verification-line { padding:12px; border:1px solid var(--line); border-radius:12px; }
.verification-line span, .verification-line code { display:block; }
.verification-line span { color:var(--muted); font-size:.72rem; }
.verification-line code { margin-top:4px; overflow-wrap:anywhere; color:var(--text); }
.compare-grid { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:14px; align-items:center; }
.compare-symbol { color:var(--accent); font-size:2rem; }
.compare-letter { width:52px; height:52px; display:grid !important; place-items:center; margin-bottom:14px !important; border-radius:16px; color:var(--accent) !important; background:rgba(198,223,136,.08); font-size:1.3rem; font-weight:850; }
.compare-controls { max-width:360px; margin-top:15px; }
.compare-files { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.compare-file-card { padding:15px; border:1px solid var(--line); border-radius:14px; min-width:0; }
.compare-file-card strong, .compare-file-card span, .compare-file-card code { display:block; }
.compare-file-card strong { overflow-wrap:anywhere; }
.compare-file-card span { margin-top:4px; color:var(--muted); font-size:.76rem; }
.compare-file-card code { margin-top:12px; overflow-wrap:anywhere; color:var(--text); font-size:.73rem; }
.message { margin-top:16px; padding:13px 15px; border-radius:12px; font-size:.84rem; }
.message[hidden] { display:none; }
.message.error { border:1px solid rgba(255,155,143,.3); background:rgba(255,155,143,.08); color:#ffc4bc; }
.message.warning { border:1px solid rgba(239,211,141,.28); background:rgba(239,211,141,.07); color:#f7df9e; }
.message.success { border:1px solid rgba(169,220,145,.28); background:rgba(169,220,145,.07); color:#c2edaf; }
@media (max-width:860px) { .panel-grid, .verify-grid { grid-template-columns:1fr; } .truth-grid { grid-template-columns:1fr 1fr; } .workspace-header, .result-area-header { flex-direction:column; } .export-actions { justify-content:flex-start; } }
@media (max-width:650px) { .truth-card { grid-template-columns:1fr; } .truth-grid, .mode-tabs, .field-row { grid-template-columns:1fr; } .mode-tabs { padding:6px; } .compare-grid { grid-template-columns:1fr; } .compare-symbol { transform:rotate(90deg); justify-self:center; } .compare-files { grid-template-columns:1fr; } .hash-row { grid-template-columns:1fr; } .copy-hash { justify-self:start; } .panel-actions, .export-actions { flex-direction:column; } .cancel-button, .export-actions .secondary-button { width:100%; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }