html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { display: grid; grid-template-rows: 62px 50px 1fr 30px; background: var(--tailiq-canvas); color: var(--tailiq-text); font: 14px/1.4 var(--tailiq-font-sans); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }

.app-header { display: grid; grid-template-columns: 280px minmax(120px, 1fr) auto; align-items: center; gap: 20px; padding: 0 18px; background: var(--tailiq-surface); border-bottom: 1px solid var(--tailiq-border); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; }
.brand-copy strong, .brand-copy span { display: block; }
.brand-copy strong { font-size: 15px; letter-spacing: -.02em; }
.brand-copy span { margin-top: 1px; color: var(--tailiq-text-muted); font-size: 11px; }
.file-heading { min-width: 0; text-align: center; }
.file-heading strong, .file-heading span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-heading strong { font-size: 14px; }
.file-heading span { margin-top: 2px; color: var(--tailiq-text-muted); font-size: 11px; }
.header-actions, .toolbar-group, .empty-actions, .dialog-actions { display: flex; align-items: center; gap: 8px; }
.privacy-badge, .large-mode, .plan-chip, .plus-chip { padding: 4px 9px; border-radius: 999px; color: var(--tailiq-success); background: color-mix(in srgb, var(--tailiq-success) 11%, transparent); font-size: 11px; font-weight: 750; }
.plan-chip, .plus-chip { color: var(--tailiq-brand-700); background: var(--tailiq-brand-soft); }
.plan-chip.plus { color: white; background: var(--tailiq-brand-600); }

select, input[type="search"], textarea { border: 1px solid var(--tailiq-border); border-radius: var(--tailiq-radius-xs); color: var(--tailiq-text); background: var(--tailiq-surface); outline: none; }
select { height: 34px; padding: 0 9px; font-size: 13px; }
select:focus, input:focus, textarea:focus { border-color: var(--tailiq-brand-500); box-shadow: var(--tailiq-focus); }
.toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--tailiq-surface); border-bottom: 1px solid var(--tailiq-border); }
.toolbar-spacer { flex: 1; }
.btn { min-height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--tailiq-radius-xs); cursor: pointer; font-size: 13px; font-weight: 700; transition: background var(--tailiq-fast), border-color var(--tailiq-fast), color var(--tailiq-fast), transform var(--tailiq-fast); }
.btn:active { transform: translateY(1px); }
.btn.primary { color: white; background: var(--tailiq-lens-600); }
.btn.primary:hover { background: var(--tailiq-lens-700); }
.btn.secondary { border-color: var(--tailiq-border); background: var(--tailiq-surface); }
.btn.secondary:hover { border-color: var(--tailiq-border-strong); color: var(--tailiq-text); background: var(--tailiq-surface-hover); }
.btn:disabled, select:disabled, .search-nav:disabled, .search-help-toggle:disabled { cursor: not-allowed; opacity: .42; transform: none; }
.view-switch { display: flex; padding: 2px; border: 1px solid var(--tailiq-border); border-radius: 8px; background: var(--tailiq-canvas); }
.view-tab { height: 30px; min-width: 58px; padding: 0 10px; border: 0; border-radius: 6px; color: var(--tailiq-text-muted); background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; }
.view-tab.active { color: var(--tailiq-text); background: var(--tailiq-surface); box-shadow: inset 0 -2px var(--tailiq-lens-500), var(--tailiq-shadow-sm); }
.search-wrap { position: relative; width: clamp(210px, 29vw, 430px); }
.search-wrap input { width: 100%; height: 34px; padding: 0 112px 0 35px; }
#search-count { position: absolute; right: 56px; top: 8px; color: var(--tailiq-text-muted); font-size: 11px; pointer-events: none; }
.search-nav, .search-help-toggle { position: absolute; top: 4px; width: 24px; height: 26px; padding: 0; border: 0; border-radius: 5px; color: var(--tailiq-text-muted); background: transparent; cursor: pointer; }
.search-nav:hover, .search-help-toggle:hover, .search-help-toggle[aria-expanded="true"] { color: var(--tailiq-text); background: var(--tailiq-surface-hover); }
.search-help-toggle { left: 5px; z-index: 2; font-size: 12px; font-weight: 800; }
#previous-match { right: 29px; } #next-match { right: 4px; }
.search-help { position: absolute; top: 40px; left: 0; z-index: 30; display: grid; width: min(350px, calc(100vw - 28px)); gap: 5px; padding: 14px; border: 1px solid var(--tailiq-border); border-radius: var(--tailiq-radius-md); color: var(--tailiq-text); background: var(--tailiq-surface-raised); box-shadow: var(--tailiq-shadow-md); }
.search-help strong { font-size: 13px; }
.search-help-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plus-chip { padding: 2px 7px; font-size: 9px; }
.search-help p { margin: 0 0 5px; color: var(--tailiq-text-muted); font-size: 11px; }
.search-help button { display: grid; grid-template-columns: 75px 1fr; align-items: center; gap: 8px; min-height: 30px; padding: 3px 7px; border: 0; border-radius: 6px; color: var(--tailiq-text); text-align: left; background: transparent; cursor: pointer; }
.search-help button:hover { background: var(--tailiq-surface-hover); }
.search-help code { color: var(--tailiq-lens-700); font: 12px/1.3 var(--tailiq-font-mono); }
.search-help span { color: var(--tailiq-text-muted); font-size: 11px; }
.tree-controls { display: flex; align-items: center; gap: 8px; }

.app-main { position: relative; min-height: 0; }
.state-card { position: absolute; inset: 50% auto auto 50%; width: min(610px, calc(100% - 40px)); padding: 38px; transform: translate(-50%, -50%); border: 1px solid var(--tailiq-border); border-radius: var(--tailiq-radius-lg); text-align: center; background: var(--tailiq-surface); box-shadow: var(--tailiq-shadow-md); }
.state-card h1, .state-card h2 { margin: 16px 0 8px; font-size: 21px; letter-spacing: -.025em; }
.state-card p { max-width: 480px; margin: 0 auto 19px; color: var(--tailiq-text-muted); line-height: 1.65; }
.state-card small { display: block; margin-top: 13px; color: var(--tailiq-text-muted); }
.empty-logo { width: 72px; height: 72px; border-radius: 20px; box-shadow: 0 10px 28px color-mix(in srgb, var(--tailiq-lens-600) 22%, transparent); }
.empty-actions { justify-content: center; }
.trust-row { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.trust-row span { padding: 5px 9px; border-radius: 999px; color: var(--tailiq-text-muted); background: var(--tailiq-canvas); font-size: 11px; }
.drop-overlay { display: none; }
body.dragging .drop-overlay { position: fixed; inset: 14px; z-index: 20; display: grid; place-items: center; border: 3px dashed var(--tailiq-lens-500); border-radius: var(--tailiq-radius-lg); color: var(--tailiq-lens-700); background: color-mix(in srgb, var(--tailiq-lens-soft) 94%, transparent); font-size: 22px; font-weight: 750; pointer-events: none; }
.spinner { width: 42px; height: 42px; margin: auto; border: 4px solid var(--tailiq-lens-soft); border-top-color: var(--tailiq-lens-600); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress-track { height: 7px; overflow: hidden; margin: 18px 0 12px; border-radius: 999px; background: var(--tailiq-border); }
#progress-fill { width: 0; height: 100%; background: var(--tailiq-lens-500); transition: width .15s linear; }
.error-card { border-top: 4px solid var(--tailiq-danger); }
.error-icon { width: 42px; height: 42px; display: grid; place-items: center; margin: auto; border-radius: 50%; color: var(--tailiq-danger); background: color-mix(in srgb, var(--tailiq-danger) 11%, transparent); font-size: 24px; font-weight: 800; }
#upgrade-large-file { margin-left: 7px; }

.workspace { display: grid; grid-template-columns: minmax(480px, 1fr) 310px; height: 100%; min-height: 0; }
.content-panel { min-width: 0; min-height: 0; border-right: 1px solid var(--tailiq-border); background: var(--tailiq-surface); }
.data-view, #tree { height: 100%; }
#source-view:not(.hidden) { position: relative; display: grid; grid-template-rows: 39px minmax(0, 1fr); height: 100%; }
.source-toolbar { display: flex; align-items: center; gap: 12px; padding: 5px 10px; border-bottom: 1px solid var(--tailiq-border); background: var(--tailiq-canvas); }
.source-mode-switch { display: flex; flex: 0 0 auto; padding: 2px; border: 1px solid var(--tailiq-border); border-radius: 7px; background: var(--tailiq-surface); }
.source-mode { height: 29px; padding: 0 10px; border: 0; border-radius: 5px; color: var(--tailiq-text-muted); background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; }
.source-mode.active { color: var(--tailiq-lens-700); background: var(--tailiq-lens-soft); }
#source-mode-hint { overflow: hidden; color: var(--tailiq-text-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
#source { min-height: 0; }
.tree-viewport, .source-viewport { position: relative; overflow: auto; contain: strict; }
.tree-viewport { overflow-x: hidden; }
.tree-spacer, .source-spacer { width: 1px; opacity: 0; }
.tree-layer, .source-layer { position: absolute; inset: 0 0 auto 0; }
.tree-row, .source-row { display: flex; align-items: center; height: 30px; border-bottom: 1px solid color-mix(in srgb, var(--tailiq-border) 48%, transparent); font-family: var(--tailiq-font-mono); white-space: pre; }
.tree-row { box-sizing: border-box; width: 100%; min-width: 0; gap: 6px; padding-right: 14px; overflow: hidden; cursor: default; }
.source-row { min-width: max-content; }
.tree-row:hover, .source-row:hover { background: var(--tailiq-surface-hover); }
.tree-row.selected, .tree-row.match-current, .source-row.match-current { background: var(--tailiq-lens-soft); }
.tree-toggle { width: 18px; height: 22px; display: grid; place-items: center; flex: 0 0 18px; padding: 0; border: 0; color: var(--tailiq-text-muted); background: transparent; cursor: pointer; }
.node-kind { width: 22px; flex: 0 0 22px; color: var(--tailiq-lens-600); font-size: 11px; font-weight: 800; }
.kind-attribute { color: var(--tailiq-code-number); } .kind-text, .kind-value { color: var(--tailiq-code-string); }
.node-label { flex: 0 0 auto; font-size: 13px; font-weight: 650; }
.node-value { min-width: 0; flex: 1 1 auto; overflow: hidden; color: var(--tailiq-text-muted); font-size: 13px; text-overflow: ellipsis; }
.source-row { line-height: 30px; }
.line-number { width: 64px; flex: 0 0 64px; padding-right: 14px; color: var(--tailiq-text-faint); border-right: 1px solid var(--tailiq-border); text-align: right; user-select: none; }
.line-code { padding: 0 18px; font-size: 13px; }
.token-key, .token-attr { color: var(--tailiq-code-key); } .token-string { color: var(--tailiq-code-string); } .token-number { color: var(--tailiq-code-number); } .token-tag { color: var(--tailiq-code-tag); } .token-comment { color: var(--tailiq-text-faint); font-style: italic; }
.source-note { position: absolute; inset: 50% auto auto 50%; display: grid; width: min(440px, calc(100% - 40px)); gap: 8px; padding: 24px; transform: translate(-50%, -50%); border: 1px solid var(--tailiq-border); border-radius: var(--tailiq-radius-md); color: var(--tailiq-text-muted); text-align: center; background: var(--tailiq-surface-raised); box-shadow: var(--tailiq-shadow-sm); }
.source-note strong { color: var(--tailiq-text); }
.source-note-actions { display: flex; justify-content: center; gap: 8px; margin-top: 7px; }

.detail-panel { min-height: 0; overflow: auto; padding: 16px; background: var(--tailiq-canvas); }
.detail-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.detail-heading h2 { margin: 0; font-size: 13px; }
.large-mode { color: var(--tailiq-warning); background: color-mix(in srgb, var(--tailiq-warning) 12%, transparent); }
.detail-empty { color: var(--tailiq-text-muted); font-size: 13px; line-height: 1.6; }
.detail-field { margin-bottom: 14px; }
.detail-field span { display: block; margin-bottom: 4px; color: var(--tailiq-text-muted); font-size: 11px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.detail-field code { display: block; overflow-wrap: anywhere; padding: 9px; border: 1px solid var(--tailiq-border); border-radius: var(--tailiq-radius-xs); background: var(--tailiq-surface); font: 12px/1.5 var(--tailiq-font-mono); }
.detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.detail-actions .btn { padding: 0 7px; }
.detail-actions .btn:disabled { cursor: not-allowed; opacity: .45; }

.status-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 14px; color: var(--tailiq-text-muted); border-top: 1px solid var(--tailiq-border); background: var(--tailiq-surface); font-size: 11px; }
.status-bar div { display: flex; gap: 14px; }
#status-text { color: var(--tailiq-text-muted); }

.paste-dialog { width: min(680px, calc(100% - 32px)); padding: 0; border: 1px solid var(--tailiq-border); border-radius: var(--tailiq-radius-lg); color: var(--tailiq-text); background: var(--tailiq-surface); box-shadow: 0 28px 90px rgba(15, 23, 42, .3); }
.paste-dialog::backdrop { background: rgba(12, 17, 29, .5); backdrop-filter: blur(2px); }
.paste-dialog form { padding: 22px; }
.dialog-heading { display: flex; align-items: start; justify-content: space-between; }
.dialog-heading h2 { margin: 2px 0 14px; font-size: 20px; }
.eyebrow { color: var(--tailiq-lens-700); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.icon-button { width: 30px; height: 30px; border: 0; border-radius: var(--tailiq-radius-xs); color: var(--tailiq-text-muted); background: transparent; cursor: pointer; font-size: 22px; }
.icon-button:hover { background: var(--tailiq-surface-hover); }
.icon-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.paste-dialog textarea { width: 100%; height: min(42vh, 360px); resize: vertical; padding: 13px; font: 12px/1.55 var(--tailiq-font-mono); }
.dialog-actions { justify-content: flex-end; margin-top: 14px; }

:focus-visible { outline: none; box-shadow: var(--tailiq-focus); }
@media (max-width: 1080px) { #expand-depth, #expand-selected, #download-minify { display: none; } .search-wrap { width: 260px; } }
@media (max-width: 800px) { .app-header { grid-template-columns: 1fr auto; } .file-heading, .privacy-badge { display: none; } .workspace { grid-template-columns: 1fr; } .detail-panel { display: none; } .toolbar-spacer, #collapse-all, #download-format { display: none; } .search-wrap { flex: 1; width: auto; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }