:root { color-scheme: dark; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #101319; color: #f0f1ee; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .42; }
.app-shell { max-width: 1450px; margin: 0 auto; padding: 42px 36px 64px; }
.page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 32px; }
.eyebrow { margin: 0 0 12px; color: #b5c5a6; font-size: 11px; font-weight: 800; letter-spacing: .22em; }
h1 { margin: 0; font-size: clamp(30px, 3.3vw, 46px); letter-spacing: -.05em; line-height: 1.08; }
h1 span { color: #bce795; }
.subtitle { margin: 13px 0 0; color: #a3aab5; font-size: 14px; }
.header-badge { white-space: nowrap; margin-top: 4px; padding: 10px 13px; border: 1px solid #343d39; border-radius: 8px; color: #c7d2c0; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.header-badge span { margin-left: 8px; color: #a8d988; }
.workspace { display: grid; grid-template-columns: 248px minmax(360px, 1fr) 344px; gap: 16px; align-items: start; }
.panel { background: #1a1e25; border: 1px solid #2c323b; border-radius: 14px; box-shadow: 0 16px 45px #0002; }
.state-panel, .upload-panel { padding: 22px; }
.preview-panel { padding: 22px 24px 20px; }
.section-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
.section-heading h2 { margin: 0; font-size: 16px; line-height: 1.25; }
.section-heading p { margin: 5px 0 0; font-size: 12px; color: #89929e; line-height: 1.45; }
.section-heading .official-durations { color: #a9c9a0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; line-height: 1.5; }
.step-number { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid #435944; border-radius: 6px; color: #bce795; font-size: 11px; font-weight: 800; }
.state-list { display: grid; gap: 5px; }
.state-button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; padding: 10px 11px; color: #d4d9dc; text-align: left; }
.state-button:hover { background: #252b32; }
.state-button.active { background: #2a392b; border-color: #4a6b43; color: #d7f4be; }
.state-button .state-name { font-size: 13px; font-weight: 650; }
.state-button .state-detail { color: #7e8993; font-size: 11px; }
.state-button.active .state-detail { color: #a5c598; }
.state-button.loaded .state-name::before { content: "●"; margin-right: 7px; color: #aee58f; font-size: 8px; vertical-align: 2px; }
.spec-note { display: flex; flex-direction: column; gap: 5px; margin-top: 22px; padding: 15px; border: 1px solid #313c34; border-radius: 9px; background: #202a24; }
.spec-note strong { color: #a9d78e; font-size: 11px; letter-spacing: .04em; }
.spec-note span { font-size: 16px; font-weight: 750; }
.spec-note small { color: #95a49a; font-size: 11px; }
.preview-heading { align-items: center; margin-bottom: 18px; }
.preview-heading > div { flex: 1; }
.source-badge { flex: none; padding: 7px 9px; border-radius: 6px; background: #30343a; color: #aab0b7; font-size: 11px; font-weight: 700; }
.source-badge.ready { background: #29402e; color: #beeaa6; }
.edit-crop-button { flex: none; padding: 7px 9px; border: 1px solid #526452; border-radius: 6px; background: #26332b; color: #c9ebaF; font-size: 11px; font-weight: 700; }
.edit-crop-button[hidden] { display: none; }
.stage { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 482px; padding: 12px 0 13px; border: 1px solid #343b45; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #333b45 0%, #222831 58%, #1d232b 100%); overflow: hidden; }
.stage-ruler { display: flex; justify-content: space-between; width: min(100%, 384px); color: #65717b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .08em; }
.top-ruler { margin-bottom: 6px; }
.bottom-ruler { margin-top: 6px; }
.canvas-wrap { position: relative; width: min(100%, 384px); aspect-ratio: 192 / 208; background-color: #252c34; background-image: linear-gradient(45deg, #2d353e 25%, transparent 25%), linear-gradient(-45deg, #2d353e 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #2d353e 75%), linear-gradient(-45deg, transparent 75%, #2d353e 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; }
canvas { display: block; width: 100%; height: 100%; }
.empty-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 25px; text-align: center; background: #222831d6; }
.empty-state[hidden] { display: none; }
.empty-icon { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 9px; border: 1px solid #4d5f4d; border-radius: 18px; color: #bce795; font-size: 30px; }
.empty-state strong { font-size: 14px; }
.empty-state span { color: #929da6; font-size: 12px; line-height: 1.5; }
.transport { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; }
.transport-main { display: flex; align-items: center; gap: 7px; }
.icon-button, .play-button { height: 36px; border: 1px solid #3b444d; border-radius: 7px; background: #29313a; color: #edf2ed; }
.icon-button { width: 36px; padding: 0; font-size: 25px; line-height: 0; }
.play-button { min-width: 70px; padding: 0 13px; background: #bce795; border-color: #bce795; color: #182217; font-size: 12px; font-weight: 800; }
.frame-counter { margin-left: 9px; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #d7dfdc; }
.speed-control { display: flex; align-items: center; gap: 9px; white-space: nowrap; color: #9ca6ae; font-size: 11px; }
.speed-input-wrap { display: flex; align-items: center; height: 36px; border: 1px solid #3b444d; border-radius: 7px; padding: 0 8px; background: #242b33; color: #a8d98a; font-weight: 700; }
.speed-input-wrap input { width: 42px; border: 0; outline: 0; background: transparent; color: #e6f4df; text-align: right; font-size: 13px; font-weight: 750; }
.frame-seek { width: 100%; height: 18px; margin: 17px 0 4px; accent-color: #bce795; cursor: pointer; }
.timing-row { display: flex; justify-content: space-between; gap: 12px; color: #89939e; font-size: 11px; }
.drop-zone { display: flex; flex-direction: column; align-items: center; padding: 28px 14px 24px; border: 1px dashed #596a58; border-radius: 10px; background: #222c26; text-align: center; }
.drop-zone.drag-over { background: #304332; border-color: #bce795; }
.upload-symbol { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 12px; background: #375039; color: #c8eeae; font-size: 25px; font-weight: 600; }
.drop-zone strong { font-size: 13px; }
.drop-zone p { margin: 7px 0 18px; color: #99a99b; font-size: 11px; line-height: 1.45; }
.file-button, .atlas-button { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; font-weight: 750; }
.file-button, .atlas-button { position: relative; overflow: hidden; }
.file-button input, .atlas-button input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-button { height: 36px; padding: 0 15px; border-radius: 7px; background: #bce795; color: #1d2b1c; }
.source-option { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 15px; color: #c6d0c7; font-size: 11px; font-weight: 650; }
.source-option input, .source-option select { width: 92px; height: 32px; padding: 0 8px; border: 1px solid #48564d; border-radius: 6px; outline: 0; background: #252e29; color: #e0efdc; text-align: center; font-size: 12px; }
.source-option select { width: 112px; }
.option-note { margin: 6px 0 0; color: #87978a; font-size: 10px; line-height: 1.45; }
.atlas-upload { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 19px 0 0; }
.atlas-upload strong { font-size: 12px; }
.atlas-upload p { margin: 5px 0 0; max-width: 190px; color: #89969c; font-size: 10px; line-height: 1.45; }
.atlas-button { flex: none; height: 31px; padding: 0 9px; border: 1px solid #566459; border-radius: 6px; color: #bce795; }
.message { min-height: 36px; margin: 20px 0 0; padding: 9px 10px; border-radius: 6px; background: #252e2b; color: #b7cbb6; font-size: 11px; line-height: 1.45; }
.message.error { background: #3a292a; color: #f4b8b8; }
.help-text { margin-top: 18px; padding-top: 12px; border-top: 1px solid #303840; }
.help-text p { margin: 9px 0; color: #929da6; font-size: 11px; line-height: 1.55; }
.help-text strong { color: #c8d0d2; }
.help-text .help-caveat { color: #809087; }
.crop-dialog { width: min(940px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 22px; border: 1px solid #566859; border-radius: 15px; background: #1a1f25; color: #f0f1ee; box-shadow: 0 24px 90px #000a; overflow: auto; }
.crop-dialog::backdrop { background: #080e12c9; }
.crop-header { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 17px; }
.crop-header .eyebrow { margin-bottom: 7px; }
.crop-header h2 { margin: 0; font-size: 22px; }
.crop-header p:last-child { margin: 7px 0 0; color: #a0aaa9; font-size: 12px; line-height: 1.45; }
.crop-close { flex: none; width: 30px; height: 30px; border: 1px solid #414b4b; border-radius: 6px; background: #292f36; color: #dce4e0; font-size: 22px; line-height: 1; }
.crop-body { display: grid; grid-template-columns: minmax(0, 640px) 220px; gap: 18px; align-items: start; }
.crop-canvas-shell { width: 100%; border: 1px solid #4e5b5a; border-radius: 9px; background: #222b32; overflow: hidden; }
#crop-canvas { width: 100%; height: auto; aspect-ratio: 640 / 560; touch-action: none; cursor: grab; }
#crop-canvas.dragging { cursor: grabbing; }
.crop-controls { padding: 6px 0; }
.crop-frame-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.crop-frame-nav button { width: 34px; height: 34px; border: 1px solid #4a5a50; border-radius: 6px; background: #29352d; color: #d6edc8; font-size: 23px; line-height: 0; }
.crop-frame-nav strong { white-space: nowrap; font-size: 12px; }
.crop-source-size { margin: 12px 0 21px; color: #899b91; font-size: 11px; }
.crop-zoom-label { display: flex; justify-content: space-between; margin-bottom: 7px; color: #c5d5c7; font-size: 12px; font-weight: 700; }
.crop-zoom-label output { color: #bce795; }
#crop-zoom { width: 100%; accent-color: #bce795; }
.crop-apply-all { width: 100%; min-height: 36px; margin-top: 22px; padding: 7px; border: 1px solid #526452; border-radius: 6px; background: #26332b; color: #c9e9b7; font-size: 11px; font-weight: 700; }
.crop-hint { color: #8d9a91; font-size: 11px; line-height: 1.5; }
.crop-footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 17px; padding-top: 16px; border-top: 1px solid #35403d; }
.crop-footer button { height: 36px; min-width: 76px; border-radius: 7px; padding: 0 13px; font-size: 12px; font-weight: 750; }
.crop-cancel { border: 1px solid #505c59; background: #283139; color: #dbe2df; }
.crop-confirm { border: 1px solid #bce795; background: #bce795; color: #1a2a18; }
@media (max-width: 1190px) { .workspace { grid-template-columns: 230px minmax(380px, 1fr); } .upload-panel { grid-column: 1 / -1; } .upload-panel .drop-zone { max-width: 540px; } }
@media (max-width: 740px) { .app-shell { padding: 26px 15px 40px; } .page-header { margin-bottom: 24px; } .header-badge { display: none; } .workspace { grid-template-columns: 1fr; } .state-panel, .upload-panel { padding: 19px; } .state-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .state-button { min-height: 56px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 7px; } .state-button .state-name { font-size: 11px; } .state-button .state-detail { font-size: 10px; } .spec-note { margin-top: 15px; } .preview-panel { padding: 19px 15px; } .stage { min-height: 0; } .transport { flex-wrap: wrap; } .speed-control { margin-left: auto; } }
@media (max-width: 850px) { .crop-body { grid-template-columns: 1fr; } .crop-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 16px; } .crop-source-size { margin: 8px 0; } .crop-apply-all { margin-top: 5px; } .crop-hint { margin: 5px 0 0; } }