/* Story SKL Studio 0.2 — palco livre e linha do tempo */
:root { --studio-bg:#151627; --studio-border:#504863; --studio-glow:#eb99c6; }
.shell:has(.studio-shell){max-width:1720px;padding-left:2.5%;padding-right:2.5%;}
.studio-shell{margin-top:16px;}
.studio-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:15px 0 20px;padding-bottom:20px;border-bottom:1px solid #ffffff24}
.studio-header h1{font-size:clamp(28px,3vw,42px);margin:6px 0}
.studio-header p{font-size:13px;color:var(--muted);margin:0;max-width:620px}
.gradient{color:#efa7d5}
.studio-chapterbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 16px}
.studio-chapterbar form{display:flex;align-items:end;gap:10px}.studio-chapterbar .field{margin:0}.studio-chapterbar input{min-height:38px;width:300px}
.studio-workspace{display:grid;grid-template-columns:minmax(175px,218px) minmax(420px,1fr) minmax(235px,275px);gap:15px;align-items:start}
.studio-sidebar,.studio-main,.studio-inspector{min-width:0;border:1px solid #514560;background:linear-gradient(135deg,#252037,#1a1a2b);border-radius:18px;box-shadow:0 16px 45px #0805133b}
.studio-sidebar{padding:14px;max-height:calc(100vh - 125px);overflow:auto;position:sticky;top:16px}
.studio-sidehead{display:flex;align-items:center;justify-content:space-between;padding:10px 3px;gap:7px}.studio-sidehead strong{font-size:13px}.studio-sidehead small{padding:4px;background:#a97b9b24;border-radius:9px;font-size:11px;color:#dbbbce}
.studio-scenes{display:grid;gap:9px}.studio-scene{border:1px solid #ffffff13;border-radius:12px;background:#ffffff08;padding:8px}.studio-scene.selected{border-color:#e4a7d0;background:#bd8bb923}
.scene-name{width:100%;display:flex;gap:10px;align-items:start;text-align:left;background:none;border:0;color:var(--text);padding:3px;min-width:0}.scene-name>span:last-child{min-width:0;flex:1}.scene-name strong{display:block;font-size:12px}.scene-name small{font-size:10px;display:block;color:#b4a9c7;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.scene-index{font-size:10px;font-weight:700;background:#eab0d127;border-radius:7px;padding:5px}
.scene-ops{display:flex;justify-content:flex-end;margin-top:4px;gap:2px}.scene-ops button{border:0;background:#ffffff0a;color:#d5c3dd;border-radius:5px;min-width:27px;min-height:24px}.scene-ops button:hover{background:#f0a8cc33}
.studio-layer-list{display:grid;gap:7px}.layer-row{min-width:0;width:100%;display:flex;align-items:center;gap:9px;text-align:left;background:#ffffff07;border:1px solid #ffffff18;border-radius:10px;padding:9px;color:var(--text)}.layer-row.selected{background:#c88ca225;border-color:#e3a3d0}.layer-eye{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:#e9a6d024;color:#ffd4ed}.layer-title{font-weight:700;font-size:11px;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis}.layer-title small{display:block;color:var(--muted);font-size:10px;font-weight:400;margin-top:2px}.layer-thumb{width:30px;height:38px;object-fit:contain;border-radius:6px;background:#50485f}
.studio-add{margin-top:12px;display:grid;gap:6px}.studio-add .btn{text-align:left;width:100%;justify-content:start}
.studio-main{padding:14px}.studio-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.tool-group{display:flex;gap:4px;flex-wrap:wrap}.tool-pill{border:1px solid #665774;color:#cbbfd4;background:#ffffff08;border-radius:8px;padding:8px 9px;font-size:11px;font-weight:700}.tool-pill.active{background:#e8abd022;color:#f7c9e6;border-color:#f0b3d4}
.stage-surround{padding:11px;border:1px solid #ffffff18;background:linear-gradient(130deg,#101020,#262237);border-radius:16px}
.vn-stage{position:relative;width:100%;aspect-ratio:16/9;background:#201d30;overflow:hidden;isolation:isolate;container-type:inline-size;user-select:none}
.stage-editable{border-radius:10px;cursor:crosshair;touch-action:none;box-shadow:0 14px 60px #0009;outline:1px solid #b59bbb40}
.vn-backdrop{position:absolute;inset:0;background-repeat:no-repeat;background-size:cover;background-position:center;transform-origin:center;pointer-events:none;z-index:0}
.vn-grid-overlay{pointer-events:none;position:absolute;inset:0;z-index:280;background-image:linear-gradient(90deg,#ffffff10 1px,transparent 1px),linear-gradient(#ffffff10 1px,transparent 1px);background-size:10% 10%;box-shadow:inset 0 0 0 1px #ffffff44}
.vn-actor{position:absolute;transform-origin:center center;pointer-events:none;will-change:transform,left,top,opacity;}
.vn-actor-image{width:100%;height:auto;display:block;pointer-events:none;user-select:none;filter:drop-shadow(0px 5px 6px #0006)}
.vn-placeholder{min-height:12cqw;display:grid;place-items:center;background:#bc84a166;border:1px dashed #ffcde8;border-radius:10px;color:#fff;font-size:2cqw}
.vn-actor.actor-editable{pointer-events:auto;cursor:grab;touch-action:none;outline:1px dashed #d7bde36e;outline-offset:3px}
.vn-actor.actor-editable:active{cursor:grabbing}
.vn-actor.actor-selected{outline:2px solid #ffd2e9;outline-offset:4px;filter:drop-shadow(0 0 10px #eaa4c666)}
.actor-caption{position:absolute;bottom:100%;left:0;white-space:nowrap;background:#211b31de;color:#ffe5f2;border:1px solid #f7bfe1c7;font-size:11px;padding:4px 7px;border-radius:7px;max-width:140px;text-overflow:ellipsis;overflow:hidden}
.vn-dialogue{position:absolute;z-index:290;min-height:11%;padding:2.4cqw 2.5cqw 1.6cqw;transform:translate(-50%,-50%);background:linear-gradient(110deg,#151225ee,#241d37ec);border:1px solid #f6bad6a3;border-radius:1.8cqw;box-shadow:0 9px 42px #100819ac;backdrop-filter:blur(10px);color:#f9ecf7}
.vn-dialogue.dialogue-editable{cursor:move;touch-action:none;outline:1px dashed #fff8}
.vn-speaker{position:absolute;left:2.4cqw;top:-2.25cqw;max-width:70%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding:.8cqw 2cqw;border-radius:.9cqw;background:linear-gradient(110deg,#f5c0dc,#bb98e2);color:#291b32;font-weight:850;font-size:1.5cqw;line-height:1.3}
.vn-text{font-size:1.75cqw;line-height:1.38;white-space:pre-wrap;max-height:19cqw;overflow-y:auto;overflow-wrap:anywhere}
.vn-reader-choices{display:grid;gap:.8cqw;margin-top:1.2cqw}.vn-choice{font-size:1.5cqw;color:#fff;border:1px solid #efb6d9b3;background:#80608355;border-radius:1cqw;padding:.8cqw 1cqw;cursor:pointer}.vn-choice:hover{background:#a65a92}
.studio-timeline{margin-top:13px;padding:16px;border-radius:13px;border:1px solid #ffffff1f;background:#151526}.timeline-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.timeline-head strong{font-size:13px}.timeline-head>span{color:#f6bfdc;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}.timeline-head input{background:#0d0c18;border:1px solid #615575;color:#fff;border-radius:6px;width:62px;padding:5px;text-align:center}
.timeline-ruler{display:flex;justify-content:space-between;font-size:10px;color:#9c91ac;margin:12px 0 0}.timeline-control{position:relative;min-height:27px;display:grid;align-items:center;margin:0 9px}.timeline-control input{width:100%;height:18px;accent-color:#f3a6d3;margin:0;position:relative;z-index:2;cursor:grab}.timeline-control input:active{cursor:grabbing}
#timelineMarks{position:absolute;inset:0 8px;z-index:1;pointer-events:none}.key-marker{position:absolute;top:4px;width:9px;height:9px;background:#ffd2e3;border:1px solid #a36f97;transform:translateX(-50%) rotate(45deg);box-shadow:0 0 7px #efacd48a}
.timeline-buttons{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}.studio-animations{margin:14px 0 3px;padding:13px;border:1px solid #ffffff1c;background:#ffffff06;border-radius:12px}.studio-animations .buttonrow{margin-top:9px;flex-wrap:wrap;gap:6px}
.studio-form{margin:17px 0 0;padding:15px;border:1px solid #ffffff17;background:#ffffff04;border-radius:13px}.studio-form .field textarea{min-height:74px}.studio-form .form-row{grid-template-columns:minmax(140px,.55fr) minmax(200px,1fr)}.studio-form .sectionbar h3{font-size:15px}.studio-form .choices-list{margin-bottom:16px}
.studio-inspector{padding:17px;position:sticky;top:16px;max-height:calc(100vh - 125px);overflow:auto}.studio-inspector h3{font:italic 23px Georgia,serif;margin:0 0 10px}.inspector-empty{text-align:center;margin:70px 0;color:#aea4bf}.inspector-empty>span{font-size:48px;color:#dda1cf}.inspector-empty p{font-size:12px}
.inspector-head{display:flex;justify-content:space-between;align-items:start;gap:5px;margin-bottom:14px}.inspector-head h3{margin:3px 0;font-size:20px}.inspector-head .btn{flex-shrink:0}.inspector-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px}.num-field{margin:0 0 7px}.num-field input{padding:7px 9px;min-height:39px;font-size:13px}.inspector-fields .field span{font-size:10px;line-height:1.3;min-height:13px}.inspector-actions{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0}.studio-inspector>.field{margin:0 0 15px}.studio-inspector .toggle{font-size:12px}
.reader{display:flex;justify-content:center;align-items:center;background:#0d0b14;overflow:hidden}.reader-letterbox{width:min(100vw,177.77778vh);max-height:100vh;aspect-ratio:16/9;z-index:0;position:relative}.reader-letterbox .vn-stage{width:100%;height:100%;aspect-ratio:16/9}.stage-playback{animation:scene-appear .36s ease both}@keyframes scene-appear{from{opacity:0}to{opacity:1}}
.reader-click{inset:0;z-index:250;cursor:default}.reader-top{z-index:330;top:18px}.reader-footer{position:fixed;z-index:330;bottom:12px;left:4%;right:4%;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}.reader-footer>*{pointer-events:auto}.reader-footer>span{font-size:11px;color:#fff;background:#21182cad;border-radius:10px;padding:8px 12px}.reader-footer .btn{box-shadow:0 5px 20px #0009}
.reader .vn-dialogue{z-index:290}.reader-empty{z-index:340;background:radial-gradient(circle at 50% 40%,#463150,#14111d);}
@media(max-width:1180px){.studio-workspace{grid-template-columns:190px minmax(375px,1fr)}.studio-inspector{position:static;grid-column:2;max-height:none}.studio-sidebar{grid-row:span 2}.studio-inspector .inspector-fields{grid-template-columns:repeat(3,1fr)}}
@media(max-width:850px){.studio-workspace{grid-template-columns:1fr}.studio-sidebar,.studio-inspector{position:static;max-height:none;grid-column:auto}.studio-sidebar{grid-row:auto}.studio-chapterbar{flex-wrap:wrap}.studio-chapterbar input{width:min(60vw,300px)}.studio-header{align-items:start}.studio-header .btn{margin-top:10px}.studio-form .form-row{grid-template-columns:1fr}.studio-inspector .inspector-fields{grid-template-columns:repeat(2,1fr)}}