utehy-nlu/ScriptCorrector
0
1*,2*::before,3*::after {4 box-sizing: border-box;5 margin: 0;6 padding: 0;7}8 9body {10 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;11 background: #0f1117;12 color: #e2e8f0;13 min-height: 100vh;14 display: flex;15 flex-direction: column;16}17 18/* ── Shared button styles ── */19.btn {20 padding: 9px 18px;21 border-radius: 6px;22 border: none;23 cursor: pointer;24 font-size: 14px;25 font-weight: 500;26 transition:27 opacity 0.15s,28 background 0.15s;29}30.btn:disabled {31 opacity: 0.45;32 cursor: not-allowed;33}34.btn-primary {35 background: #3b82f6;36 color: #fff;37}38.btn-primary:hover:not(:disabled) {39 background: #2563eb;40}41.btn-ghost {42 background: #1a1f2e;43 color: #94a3b8;44 border: 1px solid #2d3448;45}46.btn-ghost:hover:not(:disabled) {47 background: #232a3d;48}49 50/* ════════════════════════════════════════51 MAIN APP52════════════════════════════════════════ */53#appScreen {54 display: flex;55 flex-direction: column;56 flex: 1;57}58 59header {60 padding: 12px 20px;61 border-bottom: 1px solid #1e2330;62 display: flex;63 align-items: center;64 gap: 12px;65}66header h1 {67 font-size: 16px;68 font-weight: 600;69 color: #f8fafc;70}71header .tag {72 font-size: 11px;73 background: #1e3a5f;74 color: #60a5fa;75 padding: 2px 8px;76 border-radius: 999px;77}78 79.main {80 flex: 1;81 display: grid;82 grid-template-columns: auto 1fr;83 grid-template-rows: auto 1fr;84 height: calc(100vh - 49px);85}86 87/* ── Status bar ── */88.status-bar {89 grid-column: 1 / -1;90 padding: 5px 20px;91 font-size: 12px;92 color: #64748b;93 background: #0f1117;94 border-bottom: 1px solid #1a1f2e;95 min-height: 26px;96 display: flex;97 align-items: center;98 gap: 7px;99}100.status-bar .dot {101 width: 6px;102 height: 6px;103 border-radius: 50%;104 background: #334155;105 flex-shrink: 0;106}107.status-bar.done .dot {108 background: #22c55e;109}110.status-bar.error .dot {111 background: #ef4444;112}113 114@keyframes spin {115 to {116 transform: rotate(360deg);117 }118}119 120/* ── Panels ── */121.panel-video {122 width: calc((100vh - 49px - 26px - 59px) * 9 / 16);123 min-width: 180px;124 max-width: 340px;125 border-right: 1px solid #1e2330;126 display: flex;127 flex-direction: column;128 overflow: hidden;129}130 131.panel-label {132 padding: 8px 16px;133 font-size: 10px;134 font-weight: 600;135 text-transform: uppercase;136 letter-spacing: 0.08em;137 color: #475569;138 border-bottom: 1px solid #1a1f2e;139 background: #131720;140}141 142.video-container {143 flex: 1;144 background: #080a10;145 overflow: hidden;146 display: flex;147 align-items: center;148 justify-content: center;149}150.video-container iframe {151 width: 100%;152 height: 100%;153 border: none;154 display: block;155}156 157.video-placeholder {158 display: flex;159 flex-direction: column;160 align-items: center;161 gap: 10px;162 color: #2d3748;163}164.video-placeholder svg {165 width: 48px;166 height: 48px;167 opacity: 0.35;168}169.video-placeholder p {170 font-size: 12px;171}172 173.video-meta {174 padding: 8px 16px;175 font-size: 11px;176 color: #64748b;177 border-top: 1px solid #1a1f2e;178 background: #0f1117;179 min-height: 32px;180 white-space: nowrap;181 overflow: hidden;182 text-overflow: ellipsis;183}184 185.panel-right {186 display: flex;187 flex-direction: column;188 overflow: hidden;189 min-height: 0;190}191 192.panel-transcript {193 display: flex;194 flex-direction: column;195 overflow: hidden;196 flex: 0 0 325px;197 border-bottom: 1px solid #1e2330;198}199 200.transcript-toolbar {201 padding: 7px 16px;202 background: #131720;203 border-bottom: 1px solid #1a1f2e;204 display: flex;205 align-items: center;206 justify-content: space-between;207 gap: 8px;208 flex-shrink: 0;209}210.transcript-toolbar .left {211 font-size: 10px;212 font-weight: 600;213 text-transform: uppercase;214 letter-spacing: 0.08em;215 color: #475569;216}217.transcript-toolbar .right {218 display: flex;219 gap: 5px;220 align-items: center;221}222.char-count {223 font-size: 11px;224 color: #475569;225 padding: 3px 6px;226}227 228textarea {229 flex: 1;230 resize: none;231 background: #0f1117;232 border: none;233 outline: none;234 color: #e2e8f0;235 font-family:236 "Be Vietnam Pro",237 -apple-system,238 BlinkMacSystemFont,239 "Segoe UI",240 sans-serif;241 font-size: 17px;242 line-height: 1.85;243 padding: 20px 24px;244 letter-spacing: 0.01em;245}246textarea::placeholder {247 color: #2d3748;248}249 250/* ── References ── */251.ref-zone {252 padding: 8px 16px 10px;253 background: #0f1117;254 border-bottom: 1px solid #1a1f2e;255 flex-shrink: 0;256}257.ref-label {258 font-size: 10px;259 font-weight: 600;260 text-transform: uppercase;261 letter-spacing: 0.08em;262 color: #475569;263 margin-bottom: 6px;264}265.ref-pills {266 display: flex;267 flex-wrap: wrap;268 gap: 5px;269 margin-bottom: 6px;270 min-height: 0;271}272.ref-pill {273 display: inline-flex;274 align-items: center;275 gap: 4px;276 background: #1e2d45;277 color: #93c5fd;278 font-size: 11px;279 padding: 3px 8px;280 border-radius: 999px;281}282.ref-pill-text {283 cursor: pointer;284}285.ref-pill-text:hover {286 text-decoration: underline;287 text-underline-offset: 2px;288}289.ref-pill-edit {290 background: #0f1117;291 border: 1px solid #3b82f6;292 border-radius: 3px;293 color: #e2e8f0;294 font-size: 11px;295 padding: 1px 5px;296 outline: none;297 min-width: 120px;298}299.ref-pill button {300 background: none;301 border: none;302 cursor: pointer;303 color: #60a5fa;304 font-size: 12px;305 line-height: 1;306 padding: 0 1px;307 opacity: 0.6;308}309.ref-pill button:hover {310 opacity: 1;311 color: #ef4444;312}313.ref-input-row {314 display: flex;315 gap: 6px;316}317.ref-input-row input {318 flex: 1;319 background: #1a1f2e;320 border: 1px solid #2d3448;321 border-radius: 5px;322 padding: 5px 10px;323 color: #e2e8f0;324 font-size: 12px;325 outline: none;326}327.ref-input-row input:focus {328 border-color: #3b82f6;329}330.ref-input-row input::placeholder {331 color: #334155;332}333.ref-input-row button {334 background: #1a2540;335 border: 1px solid #2d3860;336 color: #60a5fa;337 border-radius: 5px;338 padding: 4px 10px;339 font-size: 12px;340 cursor: pointer;341}342.ref-input-row button:hover {343 background: #1e3060;344}345 346/* ── Dataset table ── */347.panel-dataset {348 flex: 1;349 display: flex;350 flex-direction: column;351 overflow: hidden;352 min-height: 0;353}354 355.dataset-toolbar {356 padding: 7px 16px;357 background: #131720;358 border-bottom: 1px solid #1a1f2e;359 display: flex;360 align-items: center;361 justify-content: space-between;362 flex-shrink: 0;363}364.dataset-toolbar .left {365 font-size: 10px;366 font-weight: 600;367 text-transform: uppercase;368 letter-spacing: 0.08em;369 color: #475569;370 display: flex;371 align-items: center;372 gap: 8px;373}374.dataset-count {375 font-size: 11px;376 color: #334155;377 font-weight: 400;378 text-transform: none;379 letter-spacing: 0;380}381.autosave-indicator {382 font-size: 10px;383 color: #334155;384}385.autosave-indicator.saved {386 color: #22c55e;387}388 389.dataset-table-wrap {390 flex: 1;391 overflow-y: auto;392 overflow-x: auto;393}394.dataset-table-wrap::-webkit-scrollbar {395 width: 4px;396 height: 4px;397}398.dataset-table-wrap::-webkit-scrollbar-track {399 background: #0f1117;400}401.dataset-table-wrap::-webkit-scrollbar-thumb {402 background: #2d3448;403 border-radius: 2px;404}405 406table {407 width: 100%;408 border-collapse: collapse;409 font-size: 12px;410}411thead th {412 position: sticky;413 top: 0;414 background: #131720;415 padding: 7px 12px;416 text-align: left;417 font-size: 10px;418 font-weight: 600;419 text-transform: uppercase;420 letter-spacing: 0.06em;421 color: #475569;422 border-bottom: 1px solid #1e2330;423 white-space: nowrap;424}425tbody tr {426 border-bottom: 1px solid #1a1f2e;427 cursor: pointer;428 transition: background 0.1s;429}430tbody tr:hover {431 background: #131720;432}433tbody tr.active {434 background: #1a2540;435}436tbody td {437 padding: 7px 12px;438 color: #94a3b8;439 vertical-align: middle;440}441tbody td.td-num {442 color: #475569;443 width: 32px;444 text-align: center;445}446tbody td.td-title {447 color: #cbd5e1;448 max-width: 180px;449 white-space: nowrap;450 overflow: hidden;451 text-overflow: ellipsis;452}453tbody td.td-script {454 max-width: 200px;455 white-space: nowrap;456 overflow: hidden;457 text-overflow: ellipsis;458 color: #64748b;459}460tbody td.td-refs {461 max-width: 160px;462 white-space: nowrap;463 overflow: hidden;464 text-overflow: ellipsis;465 color: #475569;466 font-size: 11px;467}468tbody td.td-actions {469 width: 60px;470 white-space: nowrap;471}472.td-actions button {473 background: none;474 border: none;475 cursor: pointer;476 padding: 2px 5px;477 color: #475569;478 font-size: 12px;479 border-radius: 4px;480}481.td-actions button:hover {482 color: #ef4444;483 background: #1f1a1a;484}485.empty-state {486 padding: 24px;487 text-align: center;488 color: #334155;489 font-size: 12px;490}491 492/* ── Status badges ── */493.status-badge {494 display: inline-block;495 font-size: 10px;496 font-weight: 600;497 padding: 2px 7px;498 border-radius: 999px;499 text-transform: uppercase;500 letter-spacing: 0.05em;501 white-space: nowrap;502}503.status-none { background: #1a1f2e; color: #475569; border: 1px solid #2d3448; }504.status-extracted { background: #1e2d45; color: #60a5fa; border: 1px solid #2d4a7a; }505.status-verified { background: #14532d; color: #86efac; border: 1px solid #166534; }506 507/* ── Pagination ── */508.pagination-bar {509 display: flex;510 align-items: center;511 justify-content: center;512 gap: 3px;513 padding: 8px 12px;514 background: #0f1117;515 border-top: 1px solid #1a1f2e;516 flex-shrink: 0;517}518.pg-btn {519 background: #1a1f2e;520 border: 1px solid #2d3448;521 color: #64748b;522 font-size: 12px;523 padding: 3px 8px;524 border-radius: 4px;525 cursor: pointer;526 min-width: 28px;527 line-height: 1.4;528}529.pg-btn:hover:not(:disabled) {530 background: #232a3d;531 color: #94a3b8;532}533.pg-btn:disabled {534 opacity: 0.35;535 cursor: not-allowed;536}537.pg-btn.pg-active {538 background: #3b82f6;539 border-color: #3b82f6;540 color: #fff;541}542.pg-ellipsis {543 color: #475569;544 font-size: 12px;545 padding: 0 2px;546}547