/* Shared styles for Hash Lab, Timestamp Converter and CSV↔JSON Converter */
.hash-layout,
.time-layout {
    display:grid;
    grid-template-columns:minmax(0,1.04fr) minmax(340px,.96fr);
    gap:22px;
}

.hash-mode,
.csv-mode { margin-bottom:20px; }
.hash-source[hidden],
.time-result[hidden],
#hashResult[hidden],
#hashFileInfo[hidden],
#csvPreviewPanel[hidden] { display:none!important; }
.hash-source + .hash-source { margin-top:0; }
.hash-options {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:end;
    gap:12px;
    margin:18px 0;
}
.hash-options > .utility-field { display:flex; flex-direction:column; min-width:0; }
.hash-options > .utility-field + .utility-field { margin-top:0; }
.hash-options .utility-label { min-height:20px; }
.hash-options .utility-select { margin-top:auto; }
.hash-output { min-height:142px; resize:none; }

.data-dropzone {
    display:grid;
    place-items:center;
    width:100%;
    min-height:210px;
    padding:26px;
    border:1px dashed rgba(var(--tool-accent-rgb),.58);
    border-radius:20px;
    background:linear-gradient(145deg,rgba(var(--tool-accent-rgb),.09),transparent),var(--tool-surface);
    color:var(--tool-text);
    cursor:pointer;
    text-align:center;
    transition:border-color .18s ease, transform .18s ease, background .18s ease;
}
.data-dropzone:hover,
.data-dropzone.is-dragging { border-color:var(--tool-accent); background:rgba(var(--tool-accent-rgb),.12); transform:translateY(-1px); }
.data-dropzone__icon { display:grid; place-items:center; width:60px; height:60px; margin-bottom:14px; border-radius:18px; background:rgba(var(--tool-accent-rgb),.15); color:var(--tool-accent); font-size:30px; }
.data-dropzone strong { font-size:17px; }
.data-dropzone small { margin-top:7px; color:var(--tool-meta); }

.data-file-summary {
    display:flex;
    align-items:center;
    gap:13px;
    margin-top:14px;
    padding:13px;
    border:1px solid var(--tool-border);
    border-radius:15px;
    background:var(--tool-surface);
}
.data-file-summary__icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:rgba(var(--tool-accent-rgb),.12); color:var(--tool-accent); }
.data-file-summary>div { min-width:0; flex:1; }
.data-file-summary strong,.data-file-summary small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.data-file-summary strong { color:var(--tool-text); font-size:13px; }
.data-file-summary small { margin-top:4px; color:var(--tool-meta); font-size:11px; }
.data-file-summary button { width:34px; height:34px; border:1px solid var(--tool-border); border-radius:10px; background:transparent; color:var(--tool-muted); cursor:pointer; }
.data-file-summary button:hover { color:var(--tool-danger); border-color:rgba(239,68,68,.36); }

.data-empty-state { display:grid; place-items:center; min-height:350px; padding:28px; text-align:center; color:var(--tool-meta); }
.data-empty-state>span { display:grid; place-items:center; width:76px; height:76px; margin-bottom:16px; border-radius:24px; background:rgba(var(--tool-accent-rgb),.12); color:var(--tool-accent); font-size:32px; }
.data-empty-state strong { color:var(--tool-text); font-size:17px; }
.data-empty-state small { margin-top:7px; max-width:290px; line-height:1.55; }

.hash-result-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-bottom:18px; }
.hash-result-meta span { min-width:0; padding:12px; border:1px solid var(--tool-border); border-radius:14px; background:var(--tool-surface); }
.hash-result-meta small,.hash-result-meta strong { display:block; }
.hash-result-meta small { color:var(--tool-meta); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.hash-result-meta strong { margin-top:5px; color:var(--tool-text); font-size:13px; overflow:hidden; text-overflow:ellipsis; }
.hash-match { margin-top:12px; padding:13px 14px; border-radius:14px; font-size:13px; font-weight:800; }
.hash-match.is-match { color:#6ee7b7; border:1px solid rgba(16,185,129,.35); background:rgba(16,185,129,.10); }
.hash-match.is-mismatch { color:#fca5a5; border:1px solid rgba(239,68,68,.35); background:rgba(239,68,68,.10); }

.data-security-note { display:flex; align-items:flex-start; gap:10px; margin-top:18px; padding:13px 14px; border:1px solid rgba(var(--tool-accent-rgb),.20); border-radius:14px; background:rgba(var(--tool-accent-rgb),.06); }
.data-security-note>span { flex:0 0 auto; color:var(--tool-accent); }
.data-security-note p { margin:0; color:var(--tool-meta); font-size:11px; line-height:1.55; }

.time-now-card {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;
    gap:22px;
    margin-bottom:22px;
    padding:22px;
    border:1px solid rgba(var(--tool-accent-rgb),.30);
    border-radius:20px;
    background:linear-gradient(135deg,rgba(var(--tool-accent-rgb),.10),transparent),var(--tool-surface-soft);
}
.time-now-card span,.time-now-card small { display:block; color:var(--tool-meta); }
.time-now-card>div>strong { display:block; margin:5px 0; color:var(--tool-text); font:800 clamp(25px,3.2vw,40px)/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.time-now-card__clock { text-align:right; }
.time-now-card__clock strong { font-size:20px!important; }
.time-mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.time-result { margin-top:20px; }
.time-result__primary { padding:18px; border:1px solid rgba(var(--tool-accent-rgb),.28); border-radius:17px; background:rgba(var(--tool-accent-rgb),.08); }
.time-result__primary span,.time-result__primary small { display:block; color:var(--tool-meta); }
.time-result__primary strong { display:block; margin:8px 0; color:var(--tool-text); font-size:22px; line-height:1.35; }
.time-result__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0; }
.time-result__grid>div { min-width:0; padding:12px; border:1px solid var(--tool-border); border-radius:13px; background:var(--tool-surface); }
.time-result__grid dt { color:var(--tool-meta); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.time-result__grid dd { margin:6px 0 0; color:var(--tool-text); font:650 12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere; }

.csv-toolbar { display:grid; grid-template-columns:minmax(190px,1.15fr) repeat(3,minmax(150px,.85fr)); align-items:end; gap:12px; margin:18px 0 22px; }
.csv-toolbar .utility-check label { min-height:50px; }
.csv-editor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.csv-editor-panel .utility-textarea { min-height:390px; }
.csv-preview-panel { margin-top:22px; }
.csv-preview-badge { display:inline-flex; padding:7px 10px; border:1px solid var(--tool-border); border-radius:999px; color:var(--tool-meta); font-size:11px; font-weight:800; }
.csv-table-wrap { overflow:auto; max-height:430px; border:1px solid var(--tool-border); border-radius:15px; }
.csv-preview-table { width:100%; border-collapse:collapse; min-width:620px; color:var(--tool-text); font-size:12px; }
.csv-preview-table th,.csv-preview-table td { padding:10px 12px; border-right:1px solid var(--tool-border); border-bottom:1px solid var(--tool-border); text-align:left; vertical-align:top; white-space:pre-wrap; overflow-wrap:anywhere; }
.csv-preview-table th { position:sticky; top:0; z-index:1; background:var(--tool-surface-raised); color:var(--tool-accent); font-size:10px; text-transform:uppercase; letter-spacing:.07em; }
.csv-preview-table tr:last-child td { border-bottom:0; }
.csv-preview-table th:last-child,.csv-preview-table td:last-child { border-right:0; }
.csv-preview-table tbody tr:hover td { background:rgba(var(--tool-accent-rgb),.04); }

@media (max-width:980px) {
    .hash-layout,.time-layout,.csv-editor-grid { grid-template-columns:1fr; }
    .csv-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .data-empty-state { min-height:220px; }
}
@media (max-width:680px) {
    .hash-options,.hash-result-meta,.time-result__grid,.csv-toolbar { grid-template-columns:1fr; }
    .time-now-card { grid-template-columns:1fr; gap:14px; }
    .time-now-card__clock { text-align:left; }
    .time-now-card .utility-btn { width:100%; }
    .csv-editor-panel .utility-textarea { min-height:270px; }
    .data-dropzone { min-height:180px; }
}