/* スクショ演出スタジオ — local creative workspace */
:root{color-scheme:light;--paper:#f8f7f4;--surface:#fff;--soft:#eeeee8;--line:#dedfd6;--ink:#303b37;--muted:#68736c;--accent:#a94e3c;--accent-soft:#f5e7e1;--gold:#b59a60;--font:'Yu Gothic UI','Hiragino Sans',Meiryo,sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:var(--paper);color:var(--ink);font:13px/1.65 var(--font);-webkit-font-smoothing:antialiased}button,input,select{font:inherit;color:inherit}button,select{cursor:pointer}button,select,input{outline-offset:3px}:focus-visible{outline:2px solid var(--accent)}button:disabled{opacity:.4;cursor:not-allowed}h1,h2,h3,p{margin:0}[hidden],.hidden{display:none!important}button{transition:background .16s,border-color .16s,box-shadow .16s}a{color:var(--accent)}::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-thumb{background:#c6cbc1;border-radius:10px;border:2px solid var(--paper)}
.app-shell{height:100dvh;display:flex;flex-direction:column}.btn{display:inline-flex;justify-content:center;align-items:center;gap:7px;min-height:37px;border:1px solid var(--line);border-radius:7px;background:#fff;padding:7px 13px;font-size:12px;font-weight:500;white-space:nowrap}.btn:hover{background:#f1f1eb;border-color:#b6beb2}.btn-primary,.btn-export-accent{color:#fff;background:var(--accent);border-color:var(--accent)}.btn-primary:hover,.btn-export-accent:hover{background:#8e3e2f;border-color:#8e3e2f}.btn-ghost{background:transparent;border-color:transparent}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#8d9e78;flex-shrink:0}
.workspace{display:grid;grid-template-columns:280px minmax(0,1fr) 330px;min-height:0;flex:1}.panel{overflow:auto;min-height:0;background:var(--paper);scrollbar-gutter:stable}.panel-left{border-right:1px solid var(--line)}.panel-right{border-left:1px solid var(--line);scroll-padding-top:56px}.panel-section{padding:22px 19px;border-bottom:1px solid var(--line)}.section-header{display:flex;align-items:center;gap:9px;margin-bottom:16px}.section-step{display:inline-grid;place-items:center;width:23px;height:23px;border:1px solid #ddc9bf;border-radius:6px;color:var(--accent);font:11px Georgia,serif;flex-shrink:0}.section-title{font-size:13px;font-weight:600}.section-note{color:var(--muted);font-size:11px;line-height:1.85;margin:-5px 0 17px}.source-card{padding:13px;border:1px dashed #bcc3b6;border-radius:9px;background:#f0f1e9;display:flex;flex-direction:column;gap:4px}.eyebrow{font-size:9px;letter-spacing:.18em;color:var(--muted);font-weight:600}.source-card strong{font-weight:600;font-size:12px;overflow-wrap:anywhere}#sourceDimensions,.source-card small{font-size:10px;color:var(--muted)}.btn-source{width:100%;margin-top:8px;justify-content:space-between;padding:7px 10px}.sample-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:start;gap:8px 12px;margin:11px 0 22px}.btn-link{padding:0;border:0;background:transparent;color:var(--accent);font-size:11px;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.control-group{margin:0 0 19px;min-width:0}.control-label{display:block;font-size:11px;font-weight:500;margin-bottom:7px}.control-select,.control-input,.anno-item-controls select{width:100%;min-width:0;border:1px solid var(--line);border-radius:6px;background:#fff;padding:8px 9px;font-size:11px;line-height:1.6}select:hover,input[type=text]:hover{border-color:#aab6a4}.resolution-readout{font-size:10px;color:var(--muted);margin-top:5px;font-variant-numeric:tabular-nums}.segmented-control{display:flex;gap:3px;padding:3px;background:#eaece4;border:1px solid var(--line);border-radius:7px}.seg-btn{flex:1;padding:6px 3px;font-size:11px;background:transparent;border:1px solid transparent;border-radius:5px;color:var(--muted)}.seg-btn.active{border-color:#d8dcd1;background:#fff;color:var(--ink);box-shadow:0 1px 4px #29372d0d}.slider-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;font-size:11px}.slider-val{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
input[type=range]{--progress:50%;appearance:none;width:100%;height:22px;margin:0;background:transparent;cursor:pointer;min-width:0}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:8px;background:linear-gradient(to right,var(--gold) var(--progress),#dde1d5 var(--progress))}input[type=range]::-webkit-slider-thumb{appearance:none;width:15px;height:15px;margin-top:-5.5px;border:2px solid var(--gold);border-radius:50%;background:#fff;box-shadow:0 1px 3px #29362b25}input[type=range]::-moz-range-track{height:4px;border-radius:8px;background:#dde1d5}input[type=range]::-moz-range-progress{background:var(--gold);height:4px}input[type=range]::-moz-range-thumb{width:12px;height:12px;border:2px solid var(--gold);border-radius:50%;background:#fff}input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px}.dual-slider-row,.control-row-2col,.citation-subcontrols{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0}.control-row-2col .slider-header{display:block}.control-row-2col .slider-val{display:block;margin-top:3px}.citation-subcontrols{grid-template-columns:1fr;gap:6px;margin-top:7px}.inline-control{display:flex;justify-content:space-between;align-items:center;font-size:12px}.color-picker{width:40px;height:32px;padding:2px;background:#fff;border:1px solid var(--line);border-radius:5px}.phase-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px}.dot-intro{background:#8c9b84}.dot-popup{background:#b48567}.dot-action{background:#bda456}.dot-outro{background:#849d9d}
.center-stage{min-width:0;min-height:0;overflow:auto;padding:25px 26px 19px;background:#eeeee9}.stage-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:22px}.stage-heading h1{font-size:21px;font-weight:600;letter-spacing:.06em;margin-top:5px}.stage-heading p{color:var(--muted);font-size:11px;margin-top:6px}.demo-tag{font-size:10px;border:1px solid #d8dbd0;padding:5px 10px;border-radius:5px;color:var(--muted);white-space:nowrap}.tool-ribbon{margin-bottom:16px}.tool-mode-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.tool-mode-btn{display:flex;align-items:center;gap:10px;text-align:left;padding:12px 13px;border:1px solid #d4d9cc;border-radius:8px;background:#f8f8f5;min-width:0}.tool-mode-btn:hover{border-color:#a5b19d;background:#fff}.tool-mode-btn.active{border-color:var(--accent);background:#fcf6f1;box-shadow:0 0 0 1px #a94e3c09}.tool-mode-btn.active .tool-icon{color:var(--accent)}.tool-icon{font:24px Georgia,serif;color:#73816a}.tool-btn-text{min-width:0}.tool-btn-text strong{display:block;font-size:12px;font-weight:600}.tool-btn-text small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.tool-suboptions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}.subopt-panel{display:flex;flex-wrap:wrap;align-items:center;gap:9px 14px;flex:1}.subopt-item{display:flex;align-items:center;gap:6px;min-width:0}.subopt-item label{font-size:10px;color:var(--muted);white-space:nowrap}.subopt-item select{width:auto;max-width:200px;padding:5px 7px;font-size:10px}.subopt-item input[type=range]{width:62px}.subopt-val{font-size:10px;font-variant-numeric:tabular-nums}.subopt-hint{width:100%;font-size:10px;color:var(--muted)}.guide-toggle-wrap{margin-left:auto}.checkbox-label{display:inline-flex;align-items:center;gap:5px;font-size:10px;white-space:nowrap;cursor:pointer}
.preview-shell{background:#252e2a;border:1px solid #35413a;border-radius:11px;overflow:hidden;box-shadow:0 8px 18px #303b3712}.preview-toolbar,.preview-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;color:#c2cbbd;font-size:10px}.preview-toolbar{border-bottom:1px solid #3d483f}.preview-toolbar>span:first-child{display:flex;gap:7px;align-items:center}.preview-toolbar .status-dot{background:#cbcf9e}.canvas-viewport{position:relative;padding:21px;display:grid;place-items:center;background:radial-gradient(ellipse at top,#3c463d,#242c28);min-width:0}.canvas-container{width:100%;display:grid;place-items:center;min-width:0}#previewCanvas{display:block;max-width:100%;height:auto;max-height:58dvh;object-fit:contain;box-shadow:0 8px 20px #1119;cursor:crosshair;touch-action:none}.preview-footer{border-top:1px solid #3d483f;font-size:9px;color:#b2bfb1}.drop-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#253c32e8;color:#fff;z-index:20;pointer-events:none}.drop-overlay-box{padding:28px;text-align:center;border:1px dashed #aebb9e;border-radius:12px;margin:16px}.drop-icon{font-size:35px}.drop-overlay p{margin-top:10px}
.timeline-bar{margin-top:15px;display:flex;flex-wrap:wrap;align-items:center;gap:13px;padding:12px 14px;background:#f8f8f4;border:1px solid #d9ddd1;border-radius:9px}.playback-controls{display:flex;align-items:center;gap:5px}.btn-icon{width:28px;height:30px;border:0;border-radius:6px;background:transparent;color:var(--muted)}.btn-icon:hover{background:#e7e9df}.btn-play{background:#39463c;color:#fff;border:0;border-radius:6px;min-height:31px;padding:5px 10px;font-size:11px}.btn-play:hover{background:#53634e}.loop-toggle{margin-left:5px}.timeline-track-area{flex:1;min-width:150px}.phase-bar{display:flex;height:17px;overflow:hidden;border-radius:4px}.phase-seg{overflow:hidden;white-space:nowrap;text-align:center;font-size:8px;color:#fff}.seg-intro{background:#76886c}.seg-popup{background:#ac7b5d}.seg-action{background:#a18b4d}.seg-outro{background:#6c8784}.timeline-scrubber{display:block;height:18px!important}.timecode-box{color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}.timecode-sep{margin:0 3px}.progress-pct{display:none}.workflow-note{display:flex;align-items:center;justify-content:center;gap:9px;font-size:11px;margin:29px 0 14px;color:#53604e}.workflow-number{font:italic 13px Georgia,serif;color:#967751}.workflow-arrow{color:#a4ae9e;margin:0 8px}.stage-shortcuts{text-align:center;color:var(--muted);font-size:10px}.stage-shortcuts span{margin:0 8px}kbd{font:9px var(--font);background:#f8f8f4;border:1px solid #dadfd0;border-radius:3px;padding:2px 4px}
.inspector-tabs{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:13px 19px 0;position:sticky;top:0;z-index:2;background:var(--paper);border-bottom:1px solid var(--line)}.inspector-tabs button{border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);padding:11px 5px;font-size:12px}.inspector-tabs button[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent)}.count-pill{margin-left:auto;color:var(--muted);background:#e8ebe3;border-radius:5px;font-size:10px;padding:1px 7px}.edit-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:18px}.edit-actions .btn{font-size:10px;padding:6px;min-height:32px}.annotation-list{display:grid;gap:10px}.anno-item{padding:12px;border:1px solid var(--line);border-radius:9px;background:#fff;min-width:0;cursor:pointer}.anno-item.selected{border-color:var(--accent);background:#fdf9f5;box-shadow:0 0 0 1px #a94e3c0c}.anno-item-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:11px}.anno-select{border:0;background:transparent;display:flex;align-items:center;gap:6px;padding:0;text-align:left}.anno-index{color:var(--muted);font-size:10px}.anno-badge{font-size:10px;font-weight:600;border-radius:4px;padding:2px 6px}.badge-popup{background:#e9ede3;color:#576b4a}.badge-highlight{background:#f5edcb;color:#856c2c}.badge-redact{background:#eeebf1;color:#786381}.anno-coords{display:none}.anno-actions{margin-left:auto;display:flex;gap:2px}.btn-mini{border:0;border-radius:4px;width:23px;height:25px;background:transparent;color:var(--muted);font-size:12px}.btn-mini:hover{background:#eceee6}.btn-mini-danger:hover{background:#f7e2dd;color:#9b4032}.anno-item-controls{display:grid;grid-template-columns:1fr;gap:8px}.anno-field{display:grid;grid-template-columns:44px minmax(0,1fr);gap:5px;align-items:center;font-size:10px;color:var(--muted)}.anno-item-controls select{padding:6px 7px;font-size:11px;color:var(--ink)}.empty-list-state{padding:23px 14px;text-align:center;color:var(--muted);border:1px dashed #c7cebf;border-radius:9px;font-size:12px;line-height:1.9}.inspector-foot{padding:20px;color:var(--muted);font-size:11px}.inspector-foot p{margin-bottom:15px}.btn-danger-ghost{color:#9c5548;background:transparent;border-color:#e2d3cb;font-size:11px}.btn-danger-ghost:hover{background:#f5e7e1;border-color:#cbb0a6}
.export-cards{display:grid;gap:13px}.export-card{background:#fff;border:1px solid var(--line);border-radius:9px;padding:14px}.export-card-head{margin-bottom:10px}.export-card-head h3{font-size:12px;font-weight:600;margin-top:6px}.export-tag{font-size:9px;border-radius:4px;padding:2px 6px;background:#eceee6;color:#67745e}.tag-trpg{background:#f5e7e1;color:var(--accent)}.export-desc{font-size:11px;color:var(--muted);margin-bottom:14px;line-height:1.9;overflow-wrap:anywhere}.export-desc code{font-size:10px}.btn-export,.btn-export-secondary{width:100%;font-size:11px}.btn-export-secondary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-export-secondary:hover{background:#8e3e2f;border-color:#8e3e2f}.apng-settings-row{display:grid;gap:6px;font-size:11px;margin:12px 0}.apng-size-box{padding:10px;background:#f1f3ec;border-radius:6px;margin:12px 0}.apng-size-info{display:flex;flex-direction:column;gap:2px;font-size:10px;color:var(--muted)}.size-value{font-size:12px;color:var(--ink);font-weight:500}.apng-badge-row{display:flex;flex-wrap:wrap;gap:5px 10px;align-items:center;margin-top:7px}.size-badge{font-size:9px}.badge-ok{color:#526c43}.badge-warn{color:#965a32}.export-status{border:1px solid #b6c3a9;background:#eff3e9;padding:12px;border-radius:8px;margin-bottom:15px;font-size:11px}.export-status-row{display:flex;justify-content:space-between;gap:8px}.progress-bar-bg{background:#d9e1ce;height:4px;border-radius:3px;margin-top:9px;overflow:hidden}.progress-bar-fill{height:100%;width:0;background:#74875e;transition:width .15s}
.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);padding:12px 20px;background:#303d33;color:#fff;box-shadow:0 8px 24px #17242130;border-radius:9px;font-size:12px;z-index:30}dialog{width:740px;max-width:calc(100% - 32px);max-height:calc(100dvh - 40px);padding:0;background:var(--paper);color:var(--ink);border:1px solid #dddcd4;border-radius:15px;box-shadow:0 28px 80px #17242144}dialog::backdrop{background:#28322c77;backdrop-filter:blur(4px)}.dialog-head{padding:25px 28px 20px;display:flex;justify-content:space-between;gap:12px}.dialog-head h2{font-size:23px;margin-top:7px;font-weight:600}.guide-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 28px}.guide-steps article{background:#fff;border:1px solid var(--line);border-radius:9px;padding:18px}.guide-steps article>span{font-size:10px;color:var(--accent);letter-spacing:.08em}.guide-steps h3{font-size:13px;margin:12px 0 7px}.guide-steps p{font-size:12px;color:var(--muted);line-height:1.9}.guide-note{padding:20px 28px;font-size:12px;color:var(--muted)}.dialog-foot{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:20px 28px;border-top:1px solid var(--line);background:#efefe8;font-size:11px;color:var(--muted)}
@media(min-width:1750px){.workspace{grid-template-columns:300px minmax(0,1fr) 350px}.center-stage{padding:30px 36px}}
@media(max-width:1300px){.workspace{grid-template-columns:246px minmax(0,1fr) 296px}.center-stage{padding:22px 18px}.panel-section{padding:19px 15px}.tool-mode-btn{padding:10px 8px;gap:7px}.tool-btn-text small{display:none}.tool-icon{font-size:21px}.stage-heading h1{font-size:18px}.demo-tag{display:none}.canvas-viewport{padding:14px}.workflow-note{gap:6px;font-size:10px}.workflow-arrow{margin:0 3px}.timecode-box{margin-left:auto}.preview-footer span:last-child{display:none}}
@media(max-width:1050px){.app-shell{height:auto;min-height:100dvh}.workspace{grid-template-columns:250px minmax(0,1fr);flex:auto}.panel-left{grid-row:1 / 3}.panel-right{grid-column:2;border-top:1px solid var(--line);border-left:0}.center-stage{overflow:visible}.panel{overflow:visible}.annotation-list,.export-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.inspector-tabs{position:static}}
@media(max-width:700px){.workspace{display:flex;flex-direction:column}.center-stage{order:-1;padding:22px 15px}.panel-left{border:0}.panel-right{border-top:1px solid var(--line)}.stage-heading{margin-bottom:18px}.stage-heading h1{font-size:19px}.tool-btn-text strong{font-size:11px}.tool-mode-btn{gap:5px;padding:10px 7px}.tool-icon{font-size:20px}.subopt-item select{max-width:190px}.subopt-panel{gap:9px}.canvas-viewport{padding:10px}.preview-footer{font-size:8px}.timeline-bar{padding:10px;gap:9px}.timeline-track-area{min-width:100%;order:2}.workflow-note{gap:6px}.stage-shortcuts{display:none}.panel-section{padding:22px 20px}.annotation-list,.export-cards{grid-template-columns:1fr}.citation-subcontrols{grid-template-columns:2fr 1fr}.guide-steps{grid-template-columns:1fr}.dialog-head h2{font-size:18px}.dialog-foot{flex-wrap:wrap}.dialog-foot .btn{width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}
/* Keep playback visible while the canvas fits the remaining desktop workspace. */
.center-stage{display:flex;flex-direction:column}.stage-heading,.tool-ribbon,.timeline-bar,.workflow-note,.stage-shortcuts{flex-shrink:0}.preview-shell{display:flex;flex-direction:column;flex:1;min-height:230px}.preview-toolbar,.preview-footer{flex-shrink:0}.canvas-viewport{flex:1;min-height:150px;padding:0}.canvas-container{position:absolute;inset:18px;width:auto;display:grid;place-items:center}#previewCanvas{max-height:none;max-width:100%;object-fit:fill}.stage-heading{margin-bottom:18px}.stage-heading h1{margin-top:3px}.stage-heading p{margin-top:4px}.workflow-note{margin-top:20px;margin-bottom:10px}
@media(max-width:1050px){.preview-shell{flex:none}.canvas-viewport{height:360px;flex:none}}
@media(max-width:700px){.canvas-viewport{height:240px}.canvas-container{inset:10px}.preview-shell{min-height:0}.workflow-note{margin-bottom:0}}

/* Actions live with their work area instead of a global header. */
.toast { pointer-events: none; }
.stage-heading { margin-bottom: 12px; }
.stage-help { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 15px; font-size: 11px; color: var(--muted); }
.canvas-container { inset: 10px; }
.stage-help .btn-link { white-space: nowrap; }
.local-status { display: flex; align-items: center; gap: 7px; margin: -8px 0 20px; color: var(--muted); font-size: 10px; }
.workflow-export { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px; margin: -4px -6px; background: transparent; border: 0; border-radius: 4px; color: var(--accent); font-size: inherit; white-space: nowrap; }
.workflow-export:hover { background: var(--accent-soft); }
#tabExport { color: var(--accent); }
#tabExport > span { margin-right: 5px; }
@media (max-width: 700px) {
  .stage-help { gap: 6px 12px; }
  .workflow-export { gap: 5px; }
}
/* Charcoal tool panels frame the light editing workspace. */
.panel{
  color-scheme:dark;
  --paper:#303338;
  --surface:#3b3f46;
  --line:#555b64;
  --ink:#f0f2f5;
  --muted:#c1c7d0;
  --accent:#f0b49d;
  --accent-soft:#4a3d38;
  --gold:#d0b475;
  color:var(--ink);
  background:var(--paper);
  scrollbar-color:#747d89 var(--paper);
}
.panel ::-webkit-scrollbar-thumb,.panel::-webkit-scrollbar-thumb{background:#747d89;border-color:var(--paper)}
.panel .section-step{border-color:#8b6c60;background:#3c3533}
.panel .source-card{background:#393d44;border-color:#707985}
.panel .btn{background:#454b54;border-color:#68717d;color:var(--ink)}
.panel .btn:hover{background:#535b66;border-color:#929ca9}
.panel .control-select,.panel .control-input,.panel .anno-item-controls select,.panel .color-picker{background:#262a30;border-color:#626b78;color:var(--ink)}
.panel select:hover,.panel input[type=text]:hover{border-color:#9aa6b5}
.panel input::placeholder{color:#b6bec9;opacity:1}
.panel :focus-visible{outline-color:#f0c49f}
.panel .segmented-control{background:#25292e;border-color:#555d68}
.panel .seg-btn:hover{background:#414750;color:#fff}
.panel .seg-btn.active{background:#dce1e7;border-color:#dce1e7;color:#262a30;box-shadow:none}
.panel input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--gold) var(--progress),#5d6673 var(--progress))}
.panel input[type=range]::-webkit-slider-thumb{background:#f4e8c9;box-shadow:0 1px 3px #0005}
.panel input[type=range]::-moz-range-track{background:#5d6673}
.panel input[type=range]::-moz-range-thumb{background:#f4e8c9}
.panel .status-dot{background:#b8c6a1}
.panel .count-pill{background:#474d56;color:#e1e6ed}
.panel .anno-item,.panel .export-card{background:var(--surface)}
.panel .anno-item.selected{background:#41464e;border-color:var(--accent);box-shadow:none}
.panel .badge-popup{background:#405044;color:#d9e8cf}
.panel .badge-highlight{background:#564c31;color:#f6dfa2}
.panel .badge-redact{background:#504658;color:#e6d6f0}
.panel .btn-mini:hover{background:#59616e;color:#fff}
.panel .btn-mini-danger:hover{background:#68463f;color:#ffe2da}
.panel .empty-list-state{border-color:#7b8592}
.panel .btn-danger-ghost{background:transparent;border-color:#85645f;color:#f2b7ab}
.panel .btn-danger-ghost:hover{background:#563e3b;border-color:#cb968b}
.panel .export-tag{background:#475344;color:#dbe7d2}
.panel .tag-trpg{background:#594439;color:#f4c9ae}
.panel .apng-size-box{background:#2a2e34}
.panel .badge-ok{color:#bed8a6}
.panel .badge-warn{color:#f2cc91}
.panel .export-status{background:#384536;border-color:#829578}
.panel .progress-bar-bg{background:#59654f}
.panel .progress-bar-fill{background:#c2d5ac}
.panel .btn-export-accent,.panel .btn-export-secondary{background:#a94e3c;border-color:#dc9b87;color:#fff}
.panel .btn-export-accent:hover,.panel .btn-export-secondary:hover{background:#ba5b47;border-color:#f0b49d}

/* Editor-only camera. The export canvas and annotation coordinates stay unchanged. */
.redact-parameters{display:grid;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.redact-parameter{display:block;min-width:0}.redact-parameter .slider-header{margin-bottom:1px;font-size:11px}
.redact-parameter small,.redact-parameter-note{display:block;color:var(--muted);font-size:10px;line-height:1.7}
#defaultRedactParameters{flex:1 0 100%;min-width:0}
#defaultRedactParameters .redact-parameters{margin-top:0;padding-top:0;border:0;grid-template-columns:minmax(120px,240px) 1fr;align-items:center;gap:12px}
.panel-legal{padding:18px 19px 24px;border-top:1px solid var(--line);color:var(--muted);font-size:10px;line-height:1.8}
.panel-legal nav{display:flex;flex-wrap:wrap;gap:7px 12px;margin-top:9px}
.panel-legal button,.guide-legal-links button{padding:0;background:none;border:0;color:var(--accent);text-decoration:underline;text-underline-offset:3px;font-size:11px}
.panel-legal a{font-size:11px}.guide-legal-links{display:flex;flex-wrap:wrap;gap:9px 18px;padding:0 28px 22px;font-size:11px}
.legal-dialog[open]{display:flex;flex-direction:column;overflow:hidden;width:800px}
.legal-dialog .dialog-head,.legal-dialog .dialog-foot,.legal-tabs{flex-shrink:0}
.legal-tabs{display:flex;gap:8px;padding:0 28px 16px;border-bottom:1px solid var(--line)}
.legal-tabs button{flex:1;min-width:0;padding:9px 5px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--muted);font-size:12px}
.legal-tabs button[aria-selected=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.legal-body{padding:22px 28px;overflow:auto;min-height:0;font-size:12px;line-height:1.95;overflow-wrap:anywhere}
.legal-lead{font-size:13px;color:var(--ink)}.legal-date{font-size:10px;color:var(--muted);margin-top:8px}
.legal-body section{margin-top:24px}.legal-body h3{font-size:13px;margin-bottom:9px}.legal-body p+p{margin-top:10px}
.legal-body ul{padding-left:20px}.legal-body li+li{margin-top:6px}.legal-body a{text-underline-offset:3px}
@media(max-width:700px){.legal-tabs{padding:0 16px 12px;gap:5px}.legal-tabs button{font-size:11px}.legal-body{padding:18px}.legal-dialog .dialog-head{padding:20px 18px 16px}#defaultRedactParameters .redact-parameters{grid-template-columns:1fr;gap:3px}}

.view-controls{display:flex;align-items:center;flex-wrap:wrap;gap:5px;justify-content:flex-end}
.preview-toolbar{flex-wrap:wrap;gap:8px;padding:9px 12px}
.view-controls button,.view-controls select{min-height:29px;padding:4px 8px;border:1px solid #59675a;border-radius:5px;background:#344138;color:#e3e9df;font-size:10px}
.view-controls button:hover{background:#455444}.view-controls button[aria-pressed=true]{background:#dde6cf;color:#2b3a2c;border-color:#dce8ca}
.view-controls button:disabled{opacity:.4}.view-controls select{min-width:66px}
.canvas-container{overflow:hidden;display:block;touch-action:none}
#previewCanvas{position:absolute;max-width:none;max-height:none;user-select:none}
#zoomRegionBox{position:absolute;border:1px solid #e9eeb9;background:#d6e49b26;box-shadow:0 0 0 1px #26392e;pointer-events:none;z-index:2}
.preview-shell[data-view-mode=pan] #previewCanvas{cursor:grab!important}.preview-shell[data-dragging=true] #previewCanvas{cursor:grabbing!important}
.preview-shell[data-view-mode=region] #previewCanvas{cursor:zoom-in!important}
body.editor-expanded{overflow:hidden}
.editor-expanded .center-stage{position:fixed;inset:0;z-index:20;padding:14px 20px;overflow:auto;background:var(--soft)}
.editor-expanded .stage-heading,.editor-expanded .workflow-note,.editor-expanded .stage-shortcuts{display:none}
.editor-expanded .tool-ribbon{margin-bottom:10px}.editor-expanded .preview-shell{flex:1;min-height:200px}
.editor-expanded .canvas-viewport{height:auto;flex:1}
.editor-expanded .timeline-bar{margin-top:10px}
@media(max-width:700px){.preview-toolbar{padding:8px}.view-controls{justify-content:flex-start;gap:4px}.view-controls button,.view-controls select{padding:5px 7px;font-size:10px}.preview-footer{flex-wrap:wrap}.editor-expanded .center-stage{padding:10px}.editor-expanded .preview-shell{min-height:160px}}

/* APNG live verification preview */
.apng-verify-box {
  margin-top: 10px;
  padding: 8px;
  background: #20242a;
  border: 1px solid #555e6b;
  border-radius: 6px;
}
.apng-verify-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 10px;
  color: var(--muted);
}
#apngVerifyImg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 160px;
  object-fit: contain;
  border-radius: 4px;
  background: #14171c;
}
/* anno card drag reorder */
.anno-drag-handle{display:inline-flex;align-items:center;justify-content:center;width:16px;height:22px;margin-left:-4px;color:var(--muted);font-size:12px;letter-spacing:-3px;touch-action:none;user-select:none;border-radius:4px;cursor:grab}.anno-drag-handle:hover{background:#ffffff14;color:var(--ink)}.anno-item-top{cursor:grab;user-select:none}.anno-item-top .anno-actions{cursor:default}.annotation-list.is-reordering,.annotation-list.is-reordering *{cursor:grabbing!important;user-select:none}.anno-item.dragging{opacity:.45}.anno-drop-indicator{height:3px;margin:-6.5px 0;border-radius:2px;background:var(--accent);box-shadow:0 0 6px var(--accent);pointer-events:none}

/* playback-linked active card glow */
.panel .anno-item.is-playing-active{border-color:var(--accent);animation:annoPlayPulse 1s ease-in-out infinite}
@keyframes annoPlayPulse{0%,100%{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent),0 0 4px 0 color-mix(in srgb,var(--accent) 18%,transparent)}50%{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent),0 0 14px 2px color-mix(in srgb,var(--accent) 45%,transparent)}}
@media (prefers-reduced-motion:reduce){.panel .anno-item.is-playing-active{animation:none;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),0 0 10px 1px color-mix(in srgb,var(--accent) 35%,transparent)}}

/* Simultaneous timing sync with previous annotation */
.anno-sync-row{display:flex;align-items:center;margin-top:9px;padding-top:7px;border-top:1px dashed #d5d9cf;font-size:10px;color:var(--muted)}
.anno-sync-row .checkbox-label{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--muted);user-select:none}
.anno-sync-row .checkbox-label:hover{color:var(--ink)}
.anno-sync-badge{display:inline-flex;align-items:center;font-size:9px;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);border-radius:3px;padding:1px 5px;font-weight:600;margin-left:4px}
.panel .anno-sync-row{border-top-color:#485260}
.panel .anno-sync-row .checkbox-label{color:#b0bac7}
.panel .anno-sync-row .checkbox-label:hover{color:#fff}


/* Lite / Pro Edition UI & Upgrade Modal */
.pro-upgrade-dialog {
  width: 680px;
}
.pro-upgrade-body {
  padding: 4px 28px 22px;
  display: grid;
  gap: 16px;
}
.pro-feature-Triggered {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid #e4c5b8;
  padding: 8px 12px;
  border-radius: 7px;
}
.pro-handover-card {
  background: #fff;
  border: 2px solid var(--gold);
  border-radius: 10px;
  padding: 16px 18px;
  display: grid;
  gap: 8px;
}
.pro-handover-card strong {
  font-size: 13px;
  color: var(--ink);
}
.pro-handover-card p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.75;
}
.btn-save-handover {
  margin-top: 4px;
  width: 100%;
  font-weight: 600;
  border-color: var(--gold);
  background: #faf6eb;
}
.btn-save-handover:hover {
  background: #f3ebd6;
}
.pro-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pro-benefits-grid article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
}
.pro-benefits-grid h3 {
  font-size: 12px;
  margin-bottom: 6px;
  color: var(--ink);
}
.pro-benefits-grid p {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
}
.pro-dialog-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.pro-dialog-actions a.btn {
  text-decoration: none;
}
.lite-badge-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  border-radius: 4px;
  background: #5a4638;
  color: #f7d694;
  border: 1px solid #8c6f4e;
}
.lite-booth-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 5px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.lite-booth-cta:hover {
  background: #8e3e2f;
}
@media (max-width: 700px) {
  .pro-upgrade-body {
    padding: 4px 18px 18px;
  }
  .pro-benefits-grid {
    grid-template-columns: 1fr;
  }
  .pro-dialog-actions {
    width: 100%;
    flex-direction: column;
  }
}