/* Animator visual parity with Easy/Expert Mode. UI only: image pixels remain untouched. */
:root{color-scheme:dark;background:#080e23;color:#eef5ff}
body{background:radial-gradient(ellipse at 42% -190px,#163f81 0,transparent 600px),
radial-gradient(ellipse at 95% 35%,#3a1e6947 0,transparent 390px),#080e23;
font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.top{position:relative;background:linear-gradient(125deg,#102546,#121c39);
border-bottom:1px solid #335b8c;box-shadow:0 9px 30px #03081866;
display:grid;grid-template-columns:minmax(215px,1fr) auto minmax(145px,1fr);
gap:18px;padding:14px clamp(12px,2vw,28px)}
.brand{min-width:0;gap:12px}
.brand-home{flex:none;display:grid;place-items:center}
.brand-logo{width:52px;height:52px;object-fit:contain;border-radius:11px;
background:#0c1d3c;border:1px solid #385e8f}
.brand-name{display:block;min-width:0}
.brand-name strong{display:block;white-space:nowrap;font-size:clamp(16px,1.45vw,22px);
font-weight:800;letter-spacing:-.35px;color:#eaf9ff}
.brand-name small{display:block;letter-spacing:1.3px;font-size:10px;color:#68cbff}
.top nav{justify-content:center;align-items:center;gap:8px;min-width:0}
.top nav a{padding:10px 12px;white-space:nowrap;background:#172c50;
border:1px solid #3b6096;border-radius:10px;color:#cce6ff;font-weight:750;font-size:12px}
.top nav a.active{background:#146ba5;border-color:#4ee0ff}
.top nav a:hover{background:#235184;border-color:#70cfff}
.lang-choice{justify-self:end;align-self:center;display:flex;align-items:center;gap:7px;
margin:0;padding:5px 9px;background:#13284a;border:1px solid #426caa;
border-radius:10px;color:#85dfff}
.lang-choice select{margin:0;min-width:116px;max-width:160px;padding:7px 9px;
background:#0a1732;border:1px solid #4773b0;border-radius:8px;
color:#ecf8ff;font-size:13px}
.lang-globe{font-size:19px;line-height:1}
.studio{gap:15px;padding:16px;grid-template-columns:minmax(245px,280px) minmax(360px,1fr) minmax(245px,280px)}
.panel{background:linear-gradient(152deg,#152547f7,#111b37f7);border:1px solid #304f7d;
border-radius:16px;padding:17px;box-shadow:0 9px 30px #000a229e}
.left h2,.right h2,.bar h2{color:#90dfff;font-weight:780;letter-spacing:-.2px}
.left h2,.right h2{border-bottom:1px solid #35547d;padding-bottom:8px}
button,select,input{background:#0b1730;border:1px solid #4065a0;color:#e7f4ff;border-radius:9px}
button{display:inline-flex;align-items:center;justify-content:center;gap:6px;
min-height:39px;font-weight:690;background:#223c65;touch-action:manipulation}
button:hover{background:#2c5181;border-color:#66b7ff}
button.primary{background:linear-gradient(110deg,#0caacb,#2979e9 65%,#7f4cd9);
border-color:#3ecbfa;color:#fff}
button.primary:hover{filter:brightness(1.13)}
button:focus-visible,input:focus-visible,select:focus-visible,.top a:focus-visible,.frame:focus-visible{
outline:2px solid #45e0ff;outline-offset:2px}
input[type=checkbox],input[type=range]{accent-color:#1bd0ff}
.drop{background:#0e2343;border:2px dashed #4277a9;color:#bbd9f5;border-radius:12px}
.drop span{color:#6edcff}
.drop.external-drop,.drop.dragging{background:#1a4260;border-color:#39daef}
.previews{gap:15px}
.preview{background:linear-gradient(145deg,#132950,#132040);padding:15px}
.previewbar b{color:#edf8ff}
.previewbar small{color:#abc4e3}
.preview canvas{border-radius:10px;border:1px solid #3a638f}
.preview #result{cursor:grab;touch-action:none;user-select:none;outline-offset:3px}
.preview #result.dragging-character{cursor:grabbing;box-shadow:0 0 0 2px #38dffe,0 0 22px #13c4e75f}
.drag-hint{font-size:11px;color:#9cbedf;line-height:1.55;text-align:center}
.timeline{border:1px solid #396b9e}
.frame{background:#142e51;border:2px solid #3e608b;border-radius:10px;touch-action:pan-x}
.frame.selected{border-color:#14d9ff;box-shadow:0 0 0 2px #13aee83e,inset 0 0 13px #1583c52c}
.frame.selected::after{content:"✓";position:absolute;top:2px;right:3px;background:#1ba9da;
color:#fff;border-radius:5px;min-width:18px;min-height:18px;font-weight:800}
.frame.long-select{box-shadow:0 0 0 3px #59e6d0}
.frame.playing{box-shadow:0 0 0 2px #60efa9}
#multiSelectToggle[aria-pressed=true]{background:#176c75;color:#fff;border-color:#4adacb}
.selection-count{background:#103f5a;color:#a7fff0;padding:4px 8px;border-radius:7px;white-space:nowrap}
.ui-icon{width:17px;height:17px;flex:none;vertical-align:middle}
.transport .ui-icon{width:19px;height:19px}
.transport button{min-width:40px}
#status{background:#113849;color:#b5ffe9;border:1px solid #1d677a}
pre{background:#0d1c35;padding:10px;border-radius:9px}
@media(max-width:1260px){
 .top{grid-template-columns:minmax(190px,1fr) auto auto;gap:12px}
 .top nav a{padding:9px}
}
@media(max-width:1190px){
 .studio{grid-template-columns:minmax(220px,270px) minmax(0,1fr)}
 .right{grid-column:1/-1}
}
@media(max-width:850px){
 .top{grid-template-columns:1fr auto;gap:10px}
 .top nav{grid-column:1/-1;grid-row:2;justify-content:stretch;gap:6px}
 .top nav a{flex:1;text-align:center}
 .lang-choice{grid-column:2;grid-row:1}
 .studio{padding:10px}
}
@media(max-width:720px){
 .studio{grid-template-columns:1fr}
 .left,.right{grid-column:auto}
 .top{padding:10px}
 .brand-logo{height:43px;width:43px}
 .brand-name strong{font-size:15px}
 .brand-name small{font-size:8px;letter-spacing:.7px}
 .lang-choice{padding:3px;gap:3px}
 .lang-choice select{min-width:94px;max-width:112px;font-size:11px}
 .top nav a{font-size:11px;padding:10px 5px}
 .previews{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .preview{padding:7px;gap:8px}
 .previewbar small{font-size:9px}
 .drag-hint{font-size:10px}
 .bar h2{font-size:14px}
 .bar .buttons{gap:5px}
 .bar button{padding:7px;font-size:11px}
}
@media(max-width:400px){
 .brand-name strong{font-size:13px}
 .brand-logo{width:38px;height:38px}
 .top nav a{font-size:10px}
 .lang-choice select{min-width:84px;max-width:100px}
}
@media(prefers-reduced-motion:reduce){button{transition:none}}

/* Non-destructive, per-frame transform inspector. */
.animator-transform-panel{margin:12px 0 9px;padding:12px 14px;border:1px solid #386796;border-radius:11px;background:linear-gradient(112deg,#122b4b,#11213e)}
.transform-section-label{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:7px;margin-bottom:10px;font-size:13px;font-weight:800;color:#8be0ff}
.transform-section-label small{font-size:10px;font-weight:500;color:#a3bad9}
.transform-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:11px}
.transform-fields label{margin:0;min-width:0}
.transform-fields input[type=number]{width:100%;min-width:0}
.transform-fields label.check{align-self:center;justify-content:flex-start;white-space:normal}
.transform-align-buttons{margin-top:10px}
.transform-align-buttons button{min-height:34px;font-size:12px}
@media(max-width:700px){.transform-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Workflow tools - compact in both desktop WebView2 and browser */
.workflow-panel{margin:16px 0;padding:13px;border:1px solid #45658d;border-radius:11px;background:#172b4b}
.workflow-panel .buttons{display:flex;flex-wrap:wrap;gap:6px;margin:7px 0}
.workflow-panel button{font-size:12px;white-space:normal}
.workflow-panel h2{margin:0 0 8px}
.workflow-panel .note{overflow-wrap:anywhere}

/* Keep HTML/OS drags out of the frame timeline; reordering uses pointer events. */
#frames .frame,#frames .frame *{user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
#frames .frame{cursor:grab}

/* Visible runtime version to detect stale WebView2 / browser caches. */
.animator-build-label{display:inline-block;margin-left:7px;font-size:10px;color:#8af1db;font-weight:600;letter-spacing:.025em;white-space:nowrap}

/* Precise frame insertion cue (not a frame selection outline). */
#frames .frame{position:relative}
#frames .frame.insert-before::before,#frames .frame.insert-after::after{
 content:"";position:absolute;z-index:30;top:-10px;bottom:-10px;width:4px;
 border-radius:5px;background:#48e6fa;pointer-events:none;
 box-shadow:0 0 0 2px #112c4d,0 0 13px 3px rgba(72,230,250,.7)
}
#frames .frame.insert-before::before{left:-9px}
#frames .frame.insert-after::after{right:-9px}
.external-frame-import-setting{display:flex;align-items:center;gap:9px;margin:9px 0 5px;
 border:1px solid #446e91;border-radius:8px;padding:7px 11px;flex-wrap:wrap;font-size:12px}
.external-frame-import-setting small{color:#89b6ce}
#frames.allow-external-import{outline:1px dashed #55c99d;outline-offset:3px}
.scale-lock-setting{align-self:center;min-width:200px;gap:7px}