.tp2ls-page { margin:0; min-height:100vh; display:flex; flex-direction:column; background:#f5f7fa; color:#263142; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; font-size:14px; line-height:1.5; letter-spacing:0; }
.tp2ls-page *, .tp2ls-page *::before, .tp2ls-page *::after { box-sizing:border-box; }
.tp2ls-page [hidden], .tp2ls-page .hidden { display:none!important; }
.tp2ls-page a { color:inherit; text-decoration:none; }
.tp2ls-page button, .tp2ls-page input, .tp2ls-page select { font:inherit; letter-spacing:0; }
.tp2ls-page button { cursor:pointer; }
.tp2ls-page button:disabled { cursor:not-allowed; opacity:.42; }
.tp2ls-page button:focus-visible, .tp2ls-page select:focus-visible, .tp2ls-page input:focus-visible, .tp2ls-page summary:focus-visible, .tp-drop:focus-visible { outline:2px solid #2a6fff; outline-offset:3px; }
.tp2ls-page > div:first-child { display:none; }
.tp2ls-page > nav { width:100%; max-width:1280px; height:80px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.tp2ls-page > nav > div:first-child a { display:flex; align-items:center; gap:12px; font-size:23px; font-weight:700; white-space:nowrap; }
.tp2ls-page > nav img { width:32px; height:32px; object-fit:contain; }
.tp2ls-page > nav > div:nth-child(2) { display:flex!important; align-items:center; gap:28px; font-weight:500; }
.tp2ls-page > nav > div:last-child { display:none; }
.tp2ls-page > nav a:hover { color:#2a6fff; }
.tp2ls-page #mobile-menu-btn { border:0; background:transparent; padding:8px; }
.tp2ls-page #mobile-menu-btn svg { width:24px; height:24px; }
.tp2ls-page #mobile-menu { position:absolute; top:80px; left:0; right:0; z-index:20; background:white; border-bottom:1px solid #dce2ea; }
.tp2ls-page #mobile-menu > div { display:grid; padding:20px 24px; gap:16px; }
.tp2ls-page > footer { margin-top:auto; text-align:center; padding:28px 16px; color:#8b94a2; font-size:12px; }
.tp2ls-page > footer p { margin:5px 0; }
.tp-workspace { width:calc(100% - 48px); max-width:1232px; margin:20px auto 40px; }
.tp-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; }
.tp-eyebrow { color:#b1373f; font-size:11px; font-weight:700; margin-bottom:6px; }
.tp-heading h1 { margin:0; font-size:32px; line-height:1.2; font-weight:700; color:#202734; }
.tp-arrow { margin:0 4px; color:#a0aaba; font-weight:400; }
.tp-heading-meta { display:grid; justify-items:end; gap:7px; min-width:0; }
.tp-usage { color:#768297; font-size:12px; overflow-wrap:anywhere; }
.tp-usage strong { color:#485972; font-weight:600; font-variant-numeric:tabular-nums; }
.tp-usage[data-status="unavailable"] { color:#949daa; }
.tp-local { display:flex; align-items:center; gap:8px; color:#167354; font-size:12px; white-space:nowrap; }
.tp-local svg { width:17px; height:17px; }
.tp-input-band { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); background:#fff; border-top:1px solid #dde3eb; border-bottom:1px solid #dde3eb; }
.tp-import { padding:24px 28px 20px; border-right:1px solid #e6eaf0; }
.tp-settings { padding:24px 28px 20px; min-width:0; }
.tp-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.tp-section-heading h2, .tp-preview-heading h2 { margin:0; font-size:15px; font-weight:650; }
.tp-engine, .tp-muted { color:#8b94a2; font-size:11px; }
.tp-engine.ready { color:#167354; }
.tp-engine.error { color:#ba3949; }
.tp-drop { position:relative; min-height:192px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; border:1px dashed #c4cfdf; border-radius:6px; background:#fafcff; cursor:pointer; transition:border-color .15s,background .15s; }
.tp-drop:hover, .tp-drop.dragging { border-color:#2a6fff; background:#f1f6ff; }
.tp-drop.disabled { pointer-events:none; opacity:.55; }
.tp-drop input { position:absolute; width:1px; height:1px; opacity:0; }
.tp-drop-icon { width:40px; height:40px; color:#2a6fff; display:flex; align-items:center; justify-content:center; }
.tp-drop-icon svg { width:32px; height:32px; stroke-width:1.5; }
.tp-drop strong { font-size:15px; font-weight:600; }
.tp-file-types { color:#6e7e96; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:12px; }
.tp-file-types span { margin:0 8px; color:#b3bdcb; }
.tp-drop-limit { font-size:11px; color:#949daa; text-align:center; padding:0 10px; }
.tp-import-meta { display:flex; align-items:center; justify-content:space-between; margin-top:8px; color:#768297; font-size:12px; }
.tp-icon-button { width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 32px; border:1px solid transparent; border-radius:5px; background:transparent; color:#69778c; padding:0; }
.tp-icon-button:hover:not(:disabled) { color:#2a6fff; background:#edf3ff; border-color:#dce7fc; }
.tp-icon-button svg { width:16px; height:16px; }
.tp-advanced { border-top:1px solid #eef1f5; margin-top:10px; padding-top:12px; }
.tp-advanced summary, .tp-boundaries summary { cursor:pointer; color:#66748a; font-size:12px; width:fit-content; }
.tp-encoding-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; margin-top:14px; }
.tp-encoding-fields label { display:grid; gap:6px; color:#657188; font-size:12px; }
.tp2ls-page select, .tp-axis-count { border:1px solid #dbe2ec; background:#fff; border-radius:5px; min-height:34px; padding:5px 9px; color:#3c4a60; max-width:100%; }
.tp-encoding-note { grid-column:1/-1; font-size:11px; color:#909baa; }
.tp-config-empty { min-height:212px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; color:#94a0b1; font-size:12px; }
.tp-config-empty svg { width:28px; height:28px; stroke-width:1.5; }
.tp-axis-group { padding:14px 0; border-bottom:1px solid #edf0f5; }
.tp-axis-group:first-child { padding-top:0; }
.tp-axis-group:last-child { border-bottom:0; }
.tp-axis-title { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:10px; }
.tp-axis-title strong { flex:none; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:13px; }
.tp-axis-title span { min-width:0; text-align:right; color:#8a95a4; font-size:11px; overflow-wrap:anywhere; }
.tp-axis-controls { display:grid; grid-template-columns:minmax(0,1fr) 110px; gap:12px; }
.tp-axis-controls label { display:grid; gap:5px; color:#758298; font-size:11px; }
.tp-axis-controls select, .tp-axis-count { width:100%; min-width:0; }
.tp-axis-body { color:#63728a; font-size:12px; margin-top:12px; }
.tp-axis-units { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 16px; margin-top:12px; }
.tp-axis-units label { display:grid; min-width:0; gap:5px; padding:3px 0; color:#63728a; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:12px; }
.tp-axis-units select { min-width:0; width:100%; min-height:32px; padding:3px 5px; font-size:12px; }
.tp-confirm { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:12px; color:#58687f; cursor:pointer; }
.tp-confirm input { flex:none; accent-color:#2a6fff; width:15px; height:15px; margin:0; }
.tp-axis-warning { color:#bc6540; font-size:11px; margin:8px 0 0; }
.tp-actions { position:relative; padding:20px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.tp-action-buttons { display:flex; gap:10px; flex-wrap:wrap; }
.tp-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:8px 16px; border:1px solid #dbe2ec; border-radius:6px; background:#fff; color:#485972; font-size:12px; font-weight:600; }
.tp-button svg { width:16px; height:16px; }
.tp-button:hover:not(:disabled) { background:#f8faff; border-color:#b7c9e6; }
.tp-primary { background:#2a6fff; border-color:#2a6fff; color:#fff; }
.tp-primary:hover:not(:disabled) { background:#185de8; border-color:#185de8; }
.tp-summary { display:flex; gap:18px; font-size:12px; color:#8c98a8; }
.tp-summary b { font-weight:600; margin-left:4px; }
#tp-success { color:#168161; } #tp-pending { color:#b77d27; } #tp-failed { color:#c04050; }
.tp-progress { width:100%; display:flex; align-items:center; gap:9px; color:#66758c; font-size:12px; min-width:0; }
.tp-progress-text { overflow-wrap:anywhere; }
#tp-progress-text { overflow-wrap:anywhere; min-width:0; }
.tp-spinner { width:13px; height:13px; border:2px solid #d7e3fb; border-top-color:#2a6fff; border-radius:50%; animation:tp-spin .75s linear infinite; flex:none; }
@keyframes tp-spin { to { transform:rotate(360deg); } }
.tp-results { display:grid; grid-template-columns:360px minmax(0,1fr); border-top:1px solid #dce3ed; border-bottom:1px solid #dce3ed; background:#fff; min-height:530px; }
.tp-file-panel { padding:20px 0 0; min-width:0; border-right:1px solid #e2e8f0; }
.tp-file-panel > .tp-section-heading { padding:0 18px; }
.tp-file-panel .tp-section-heading select { min-height:28px; font-size:11px; padding:3px 6px; }
.tp-count { color:#909bab; font-size:11px; margin-left:5px; font-weight:400; }
.tp-search { display:flex; gap:8px; align-items:center; margin:0 18px 15px; border:1px solid #e2e8f1; border-radius:5px; padding:7px 10px; }
.tp-search svg { width:14px; height:14px; color:#a0aabc; flex:none; }
.tp-search input { width:100%; min-width:0; border:0; background:transparent; padding:0; outline:none; font-size:12px; color:#506078; }
.tp-file-list { max-height:442px; overflow:auto; }
.tp-file-row { display:flex; align-items:flex-start; gap:6px; padding:13px 12px 13px 18px; border-top:1px solid #f0f3f7; position:relative; }
.tp-file-row.selected { background:#f1f6ff; }
.tp-file-row.selected::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#2a6fff; }
.tp-file-select { min-width:0; flex:1; padding:0; border:0; text-align:left; background:none; color:inherit; }
.tp-file-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.tp-file-name { font-weight:500; font-size:12px; overflow-wrap:anywhere; min-width:0; }
.tp-file-state { flex:none; font-size:10px; font-weight:500; white-space:nowrap; padding:2px 5px; border-radius:3px; background:#edf0f5; color:#8592a5; }
.tp-file-state.success { background:#e8f6ef; color:#167b58; }
.tp-file-state.needsAxes { background:#fff4df; color:#ad7521; }
.tp-file-state.error { background:#fcecef; color:#ba3d4e; }
.tp-file-meta { display:block; margin-top:6px; color:#94a0af; font-size:10px; }
.tp-row-commands { display:flex; flex:none; gap:1px; }
.tp-row-commands .tp-icon-button { width:25px; height:25px; flex-basis:25px; }
.tp-row-commands svg { width:13px; height:13px; }
.tp-list-empty { min-height:280px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; color:#a0aaba; font-size:12px; }
.tp-list-empty svg { width:27px; height:27px; stroke-width:1.5; }
.tp-preview-panel { min-width:0; display:flex; flex-direction:column; }
.tp-preview-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px 5px; }
.tp-preview-title { display:flex; align-items:center; gap:9px; min-width:0; }
.tp-preview-title h2 { overflow-wrap:anywhere; }
.tp-type { font-size:10px; color:#7b8799; padding:2px 5px; background:#f1f3f6; border-radius:3px; flex:none; }
.tp-preview-commands { display:flex; gap:4px; flex:none; }
.tp-program-meta { color:#8d99a9; font-size:11px; padding:0 20px 16px; overflow-wrap:anywhere; }
.tp-preview-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid #edf1f6; padding:0 14px 0 20px; }
.tp-tabs { display:flex; gap:18px; min-width:0; }
.tp-tabs button { border:0; border-bottom:2px solid transparent; background:none; color:#8793a5; padding:12px 0 10px; font-size:12px; white-space:nowrap; }
.tp-tabs button[aria-selected="true"] { color:#2a6fff; border-bottom-color:#2a6fff; font-weight:600; }
.tp-pagination { display:flex; align-items:center; gap:3px; flex:none; color:#94a0b2; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:10px; }
.tp-pagination .tp-icon-button { width:25px; flex-basis:25px; }
.tp-preview-content { height:365px; min-height:365px; overflow:auto; background:#20252e; color:#dde4ee; }
.tp-preview-empty { height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; color:#818c9d; font-size:12px; padding:24px; text-align:center; overflow-wrap:anywhere; }
.tp-preview-empty svg { width:28px; height:28px; stroke-width:1.5; }
.tp-code-wrap { display:flex; min-width:100%; width:fit-content; padding:17px 0; }
.tp-code-wrap pre { font:12px/21px ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; letter-spacing:0; margin:0; white-space:pre; tab-size:4; }
#tp-line-numbers { padding:0 12px 0 16px; text-align:right; color:#667385; min-width:52px; border-right:1px solid #343c48; user-select:none; }
#tp-code { padding:0 20px 0 16px; }
.tp-preview-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 20px; color:#8793a3; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:10px; margin-top:auto; }
.tp-safety { display:flex; align-items:flex-start; gap:10px; margin:20px 0 12px; color:#947245; font-size:11px; }
.tp-safety svg { width:15px; height:15px; flex:none; margin-top:2px; }
.tp-safety p { margin:0; }
.tp-boundaries p { color:#8c96a5; font-size:11px; line-height:1.8; max-width:850px; }
.tp-notices { display:flex; flex-direction:column; gap:6px; margin-top:15px; padding:12px 14px; background:#fff1f3; color:#ad4051; font-size:12px; border-left:3px solid #dc7183; overflow-wrap:anywhere; }
.tp-notice-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tp-toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%); max-width:calc(100vw - 32px); padding:10px 18px; background:#283141; color:#fff; border-radius:6px; box-shadow:0 5px 20px #20273420; font-size:12px; z-index:50; overflow-wrap:anywhere; }
@media (max-width:1050px) { .tp2ls-page > nav > div:nth-child(2) { gap:16px; font-size:12px; } .tp-results { grid-template-columns:310px minmax(0,1fr); } .tp-import,.tp-settings { padding:20px; } }
@media (min-width:781px) { .tp2ls-page #mobile-menu { display:none!important; } }
@media (max-width:780px) { .tp2ls-page > nav > div:nth-child(2) { display:none!important; } .tp2ls-page > nav > div:last-child { display:block; } .tp-workspace { width:calc(100% - 32px); margin-top:12px; } .tp2ls-page > nav { padding:0 16px; } .tp-heading h1 { font-size:27px; } .tp-heading { gap:12px; margin-bottom:20px; flex-wrap:wrap; } .tp-input-band { grid-template-columns:1fr; } .tp-import { border-right:0; border-bottom:1px solid #e6eaf0; } .tp-config-empty { min-height:70px; flex-direction:row; } .tp-results { grid-template-columns:1fr; } .tp-file-panel { border-right:0; border-bottom:1px solid #e2e8f0; } .tp-file-list { max-height:245px; } .tp-list-empty { min-height:120px; } .tp-preview-content { height:350px; min-height:350px; } .tp-summary { gap:14px; } }
@media (max-width:400px) { .tp-import,.tp-settings { padding:18px 14px; } .tp-heading h1 { font-size:25px; } .tp-tabs { gap:12px; } .tp-preview-toolbar { padding-left:14px; padding-right:8px; gap:5px; } .tp-tabs button { font-size:11px; } .tp-button { padding:8px 12px; } .tp-axis-controls { grid-template-columns:minmax(0,1fr) 90px; } .tp-preview-heading { padding-left:14px; padding-right:14px; } .tp-axis-units { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (prefers-reduced-motion:reduce) { .tp-spinner { animation:none; } .tp-drop { transition:none; } }