@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&display=swap');

:root { font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif; color: #1c2736; background: #f5f7fb; font-synthesis: none; text-rendering: optimizeLegibility; --ink: #1c2736; --muted: #7d8998; --line: #e5e9ef; --orange: #f27a38; --blue: #5068ef; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f5f7fb; }
button, input { font: inherit; }
button:focus-visible, input:focus-visible, [role='button']:focus-visible { outline: 3px solid #8291ff; outline-offset: 2px; }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(28px, calc((100vw - 1240px) / 2)); background: rgba(255,255,255,.83); border-bottom: 1px solid #e9edf2; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 16px; font-weight: 700; letter-spacing: -.045em; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #f8a25a, #ee684b); box-shadow: 0 5px 14px #eb805540; }
.brand-mark svg { width: 22px; height: 22px; }
.brand-light { font-weight: 500; color: #667383; }
.topbar-note { display: inline-flex; align-items: center; gap: 8px; color: #697786; font-size: 12px; font-weight: 600; }
.status-dot, .file-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #40bd86; box-shadow: 0 0 0 3px #40bd861e; }
.layout { width: min(1240px, calc(100% - 56px)); margin: 0 auto; }
.hero { width: min(660px, 100%); margin: 75px auto 54px; text-align: center; }
.eyebrow, .how-heading { display: flex; align-items: center; justify-content: center; gap: 10px; color: #7a8797; font: 500 10px/1.4 'DM Mono', monospace; letter-spacing: .13em; }
.eyebrow-line { display: inline-block; width: 20px; height: 1px; background: #f39a6a; }
h1 { margin: 19px 0 15px; font-size: clamp(38px, 6.4vw, 58px); line-height: 1.08; letter-spacing: -.06em; font-weight: 600; color: #1b2736; }
h1 span { color: #64718a; }
.hero-copy { width: min(500px, 100%); margin: 0 auto 30px; color: #7a8797; font-size: 14px; line-height: 1.7; }
.drop-zone { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 190px; padding: 28px 20px 22px; background: #fff; border: 1px dashed #bfc8d7; border-radius: 15px; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; box-shadow: 0 5px 22px #22355408; }
.drop-zone:hover, .drop-zone.is-dragging { border-color: var(--orange); background: #fffaf6; }
.drop-zone.is-dragging { transform: scale(1.01); }
.upload-icon { width: 42px; height: 42px; margin-bottom: 11px; display: grid; place-items: center; color: #f0834d; background: #fff1e7; border-radius: 13px; }
.upload-icon svg { width: 24px; height: 24px; }
.drop-copy { display: flex; align-items: baseline; gap: 5px; font-size: 13px; }
.drop-copy strong { font-weight: 700; color: #263344; }
.drop-copy span { color: #8995a3; }
.browse-link { color: #5969dd !important; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.zip-badge { position: absolute; top: 18px; right: 18px; padding: 4px 7px; border: 1px solid #e8ebf2; border-radius: 5px; color: #8590a0; font: 500 9px 'DM Mono', monospace; letter-spacing: .08em; }
.drop-helper { margin-top: 12px; color: #a2acb8; font-size: 11px; }
.live-status { min-height: 22px; padding-top: 8px; color: #637085; font-size: 12px; }
.live-status[data-tone='error'] { color: #c4463b; }
.live-status[data-tone='success'] { color: #25825c; }
.privacy-note { display: flex; justify-content: center; gap: 9px; align-items: flex-start; width: min(490px, 100%); margin: 5px auto 0; color: #8a95a3; font-size: 11px; line-height: 1.55; text-align: left; }
.privacy-note strong { color: #657182; font-weight: 600; }
.lock-icon { flex: none; padding-top: 1px; color: #59a884; font-size: 10px; }
.workspace { overflow: hidden; margin: 0 0 73px; background: #fff; border: 1px solid #e4e8ef; border-radius: 14px; box-shadow: 0 9px 32px #27395609; }
.workspace-top { display: flex; align-items: center; justify-content: space-between; padding: 17px 22px; border-bottom: 1px solid #edf0f4; }
.archive-title-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.archive-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: #f0f2ff; color: #6877df; }
.archive-icon svg { width: 21px; height: 21px; }
.archive-name { max-width: 58vw; overflow: hidden; color: #2d394a; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.archive-subtitle { margin-top: 3px; color: #98a2ae; font-size: 11px; }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; color: #7f8a98; background: transparent; cursor: pointer; }
.icon-button:hover:not(:disabled) { background: #f3f5f8; color: #344255; }
.icon-button:disabled { opacity: .35; cursor: default; }
.icon-button svg { width: 19px; height: 19px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px 22px; border-bottom: 1px solid #edf0f4; }
.stat-card { min-width: 0; padding: 12px 15px; border: 1px solid #edf0f4; border-radius: 9px; background: #fcfcfd; }
.stat-label { display: block; margin-bottom: 7px; color: #9ba5b0; font: 500 9px 'DM Mono', monospace; letter-spacing: .08em; }
.stat-card strong { color: #334053; font-size: 16px; font-weight: 600; }
.explorer { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 415px; }
.file-panel { min-width: 0; display: flex; flex-direction: column; border-right: 1px solid #edf0f4; background: #fcfcfd; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 12px; }
.panel-heading > div { display: flex; align-items: center; gap: 8px; }
.panel-title { color: #3b4859; font-size: 12px; font-weight: 700; }
.count-pill { min-width: 20px; padding: 2px 6px; border-radius: 10px; background: #eef0fb; color: #6978d9; font: 500 10px 'DM Mono', monospace; text-align: center; }
.panel-kicker { color: #adb5bf; font: 500 8px 'DM Mono', monospace; letter-spacing: .07em; }
.file-search-wrap, .table-search-wrap { height: 33px; display: flex; align-items: center; gap: 7px; margin: 0 12px 11px; padding: 0 9px; border: 1px solid #e9edf2; border-radius: 7px; background: #fff; color: #98a3b1; }
.file-search-wrap svg, .table-search-wrap svg { width: 15px; height: 15px; flex: none; }
.file-search-wrap input, .table-search-wrap input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #344255; font-size: 11px; }
.file-search-wrap input::placeholder, .table-search-wrap input::placeholder { color: #adb6c1; }
.file-list { flex: 1; min-height: 160px; max-height: 314px; overflow: auto; padding: 0 7px 8px; }
.file-list-empty { padding: 41px 10px; color: #a2acb7; font-size: 11px; line-height: 1.65; text-align: center; }
.file-item { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px; border: 0; border-radius: 7px; background: transparent; color: #677487; text-align: left; cursor: pointer; }
.file-item:hover { background: #f1f3f9; }
.file-item.is-active { background: #f0f2ff; color: #4f60cc; }
.file-kind { width: 27px; height: 27px; flex: none; display: grid; place-items: center; border: 1px solid #e8ebf0; border-radius: 7px; background: #fff; color: #788697; font: 500 8px 'DM Mono', monospace; }
.file-item.is-active .file-kind { border-color: #dce0fb; color: #6271d6; }
.file-info { min-width: 0; flex: 1; }
.file-name { overflow: hidden; color: inherit; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { margin-top: 3px; color: #a5aeba; font: 9px 'DM Mono', monospace; }
.file-panel-footer { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-top: 1px solid #edf0f4; color: #9ca7b2; font-size: 10px; }
.file-panel-footer .file-dot { width: 6px; height: 6px; box-shadow: none; }
.data-panel { min-width: 0; display: flex; flex-direction: column; }
.data-toolbar { min-height: 56px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #edf0f4; }
.selected-file { display: flex; align-items: center; gap: 8px; overflow: hidden; color: #4b596a; font-size: 11px; font-weight: 600; }
.selected-file > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-icon { color: #7282dd; font-size: 16px; }
.table-search-wrap { width: 180px; flex: none; margin: 0; }
.table-search-wrap:focus-within, .file-search-wrap:focus-within { border-color: #aab5fb; box-shadow: 0 0 0 3px #6b7cfa12; }
.grid-wrap { flex: 1; min-height: 313px; overflow: auto; background: #fff; }
.data-grid { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; color: #49586a; font-size: 11px; }
.data-grid th { position: sticky; top: 0; z-index: 1; min-width: 110px; height: 36px; padding: 0 11px; border-right: 1px solid #edf0f4; border-bottom: 1px solid #e6eaf0; background: #f8f9fc; color: #667488; font-size: 10px; font-weight: 600; text-align: left; white-space: nowrap; }
.data-grid th button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.data-grid th button:hover { color: #4f60cc; }
.data-grid th.row-index-heading, .data-grid td.row-index { position: sticky; left: 0; z-index: 2; width: 42px; min-width: 42px; padding: 0 8px; border-right: 1px solid #edf0f4; background: #f8f9fc; color: #9ba6b3; font: 10px 'DM Mono', monospace; text-align: center; }
.data-grid th.row-index-heading { z-index: 3; }
.data-grid td { height: 34px; max-width: 420px; overflow: hidden; padding: 0 11px; border-right: 1px solid #f0f2f5; border-bottom: 1px solid #f0f2f5; color: #546275; text-overflow: ellipsis; white-space: nowrap; }
.data-grid td.row-index { height: 34px; }
.data-grid tbody tr:hover td { background-color: #fbfcff; }
.data-grid tbody tr:hover td.row-index { background: #f8f9fc; }
.empty-heading { color: #9aa5b2 !important; font-weight: 500 !important; }
.data-grid td.empty-state { height: 230px; padding: 20px; color: #9ca8b6; text-align: center; white-space: normal; }
.grid-footer { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 13px; border-top: 1px solid #edf0f4; color: #94a0ae; font: 9px 'DM Mono', monospace; }
.pagination { display: flex; align-items: center; gap: 8px; color: #738092; }
.page-button { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #e8ebf0; border-radius: 6px; background: #fff; color: #657286; font-size: 16px; cursor: pointer; }
.page-button:hover:not(:disabled) { background: #f3f5fb; }
.page-button:disabled { opacity: .4; cursor: default; }
.how-it-works { margin: 0 auto 75px; }
.how-heading { justify-content: flex-start; margin-bottom: 22px; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.how-card { min-height: 139px; padding: 18px 20px; border: 1px solid #e7ebf1; border-radius: 11px; background: #fff; }
.step-number { color: #ee8959; font: 500 10px 'DM Mono', monospace; }
.how-card h2 { margin: 12px 0 6px; color: #374456; font-size: 13px; font-weight: 700; }
.how-card p { max-width: 300px; margin: 0; color: #8c98a7; font-size: 11px; line-height: 1.6; }
.footer { height: 54px; display: flex; justify-content: space-between; align-items: center; padding: 0 max(28px, calc((100vw - 1240px) / 2)); border-top: 1px solid #e7ebf1; color: #a1abb6; font: 9px 'DM Mono', monospace; letter-spacing: .07em; }
.footer-divider { padding: 0 5px; color: #e9a174; }
.footer a { color: #7d8998; font: 500 10px 'DM Sans', sans-serif; letter-spacing: 0; text-decoration: none; }
.footer a:hover { color: #5667d8; }
@media (max-width: 760px) {
  .topbar { height: 62px; padding: 0 18px; }
  .layout { width: calc(100% - 32px); }
  .hero { margin: 48px auto 40px; }
  h1 { font-size: clamp(37px, 10vw, 54px); }
  .explorer { grid-template-columns: 1fr; }
  .file-panel { border-right: 0; border-bottom: 1px solid #edf0f4; }
  .file-list { max-height: 190px; }
  .file-list-empty { padding: 18px 10px; }
  .stat-row { gap: 7px; padding: 12px; }
  .stat-card { padding: 10px; }
  .stat-card strong { font-size: 14px; }
  .stat-label { font-size: 8px; }
  .how-grid { grid-template-columns: 1fr; gap: 9px; }
  .how-card { min-height: auto; padding: 15px 17px; }
  .how-card h2 { margin-top: 7px; }
  .workspace { margin-bottom: 52px; }
  .data-toolbar { align-items: flex-start; flex-direction: column; }
  .table-search-wrap { width: 100%; }
  .grid-wrap { min-height: 300px; }
  .footer { padding: 0 16px; }
}
@media (max-width: 420px) {
  .topbar-note { font-size: 10px; }
  .drop-copy { flex-direction: column; align-items: center; gap: 4px; }
  .drop-zone { min-height: 196px; }
  .workspace-top { padding: 14px; }
  .archive-name { max-width: 68vw; }
  .stat-card { padding: 9px 7px; }
  .stat-label { letter-spacing: .02em; }
}