/* Mobile Animator: a real editor workspace, not vertically stacked desktop panels. */
.mobile-animator-app {
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  overscroll-behavior:none;
}
.mobile-animator-app .top {
  flex:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 9px;
  padding:calc(4px + env(safe-area-inset-top,0px)) 11px 5px;
  box-shadow:none;
}
.mobile-animator-app .brand { min-width:0;flex:1 1 55%;gap:7px; }
.mobile-animator-app .brand-logo { width:30px;height:30px;border-radius:7px; }
.mobile-animator-app .brand-name strong {font-size:13px;line-height:1.15;}
.mobile-animator-app .brand-name small {font-size:8px;letter-spacing:.55px;}
.mobile-animator-app .lang-choice { padding:1px 5px;gap:3px; }
.mobile-animator-app .lang-globe {display:none}
.mobile-animator-app .lang-choice select {font-size:12px;min-width:56px;max-width:80px;padding:4px 3px;}
.mobile-animator-app .top nav {flex:1 1 100%;display:grid;grid-template-columns:1fr 1fr;gap:5px;order:3;}
.mobile-animator-app .top nav a {min-height:31px;padding:4px 7px;font-size:11px;border-radius:7px;}
.mobile-animator-app #animatorToExpert {display:none!important}
.mobile-animator-app .studio {
  flex:1;
  min-height:0;
  height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:0;
  padding:0;
  overflow:hidden;
}
.mobile-animator-app .mobile-stage {
  min-height:0;
  max-height:43dvh;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:5px;
  padding:5px 10px 4px;
  background:linear-gradient(180deg,#0f2344,#101a35);
  border-bottom:1px solid #2f527b;
  overflow-y:auto;
}
.mobile-animator-app .mobile-stage-head {
  display:flex;align-items:center;justify-content:space-between;
  min-height:22px;gap:8px;
}
.mobile-animator-app .mobile-stage-head strong {
  color:#b8e6ff;font-size:11px;font-weight:800;letter-spacing:.2px;
}
.mobile-animator-app .mobile-compare {
  padding:3px 9px;min-height:25px;font-size:11px;
  background:#1b3a60;border-color:#416b91;
}
.mobile-animator-app .mobile-compare[aria-pressed="true"] {background:#0e647e;border-color:#55d8ed;}
.mobile-animator-app .previews {
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:5px;min-height:0;
}
.mobile-animator-app .previews .preview {
  padding:2px 7px 3px;gap:3px;
  border:0;box-shadow:none;background:transparent;
}
.mobile-animator-app .previews .preview:has(#original) {display:none}
.mobile-animator-app .show-original .previews {grid-template-columns:repeat(2,minmax(0,1fr));}
.mobile-animator-app .show-original .previews .preview:has(#original) {display:flex}
.mobile-animator-app .previewbar {
  display:flex;align-items:center;justify-content:space-between;
  gap:4px;align-self:stretch;
}
.mobile-animator-app .previewbar b {font-size:10px}
.mobile-animator-app .previewbar small {display:none}
.mobile-animator-app .preview canvas {
  width:auto!important;
  max-width:100%;
  height:auto!important;
  max-height:clamp(110px,22dvh,192px);
  aspect-ratio:1/1;
  object-fit:contain;
  margin:0 auto;
  border-radius:7px;
}
.mobile-animator-app .show-original .preview canvas {max-height:clamp(90px,17dvh,150px);}
.mobile-animator-app .transport {
  padding:0;box-shadow:none;border:0;
  background:transparent;display:flex;
  flex-direction:row;align-items:center;justify-content:center;
  min-height:35px;gap:3px;
}
.mobile-animator-app .transport .buttons {
  display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;
  gap:4px;width:100%;
}
.mobile-animator-app .transport .buttons button {
  flex:0 1 44px;
  min-width:34px;
  min-height:34px;
  max-height:35px;
  padding:4px 7px;
  border-radius:9px;
}
.mobile-animator-app .transport .buttons button svg {height:17px;width:17px}
.mobile-animator-app .mobile-status-row {
  padding:0 2px;color:#7edac9;
  min-height:16px;cursor:pointer;overflow:hidden;
}
.mobile-animator-app .mobile-status-row #status {
  display:block;
  width:100%;padding:0;
  background:none;border:0;border-radius:0;box-shadow:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:10px;line-height:15px;
}
.mobile-animator-app .mobile-status-row.is-expanded #status {white-space:normal;overflow:visible}
.mobile-animator-app .mobile-pane-host {
  min-height:0;min-width:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  background:#0c1730;
  padding:9px 10px 12px;
}
.mobile-animator-app .mobile-tool-pane[hidden] {display:none!important}
.mobile-animator-app .mobile-tool-pane {display:flex;flex-direction:column;gap:10px;min-width:0}
.mobile-animator-app .mobile-tool-pane h2 {
  font-size:13px;line-height:1.3;margin:4px 0 7px;
  padding-bottom:5px;color:#8fddff;
  border-bottom:1px solid #284b74;
}
.mobile-animator-app .mobile-form-panel,
.mobile-animator-app .mobile-tool-pane > .panel {
  min-width:0;
  border:1px solid #294772;border-radius:10px;
  padding:10px;box-shadow:none;
  background:linear-gradient(155deg,#13284a,#101c39);
}
.mobile-animator-app .mobile-form-panel {
  display:flex;flex-direction:column;gap:9px;
}
.mobile-animator-app .mobile-tool-pane .bar {
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.mobile-animator-app .mobile-tool-pane .bar h2 {padding:0;margin:0;font-size:13px;border:0;}
.mobile-animator-app .mobile-tool-pane .buttons {gap:6px;}
.mobile-animator-app .mobile-tool-pane button {
  font-size:12px;
  padding:7px 8px;
  min-height:35px;
  border-radius:8px;
}
.mobile-animator-app .mobile-tool-pane button .ui-icon {width:17px;height:17px;}
.mobile-animator-app .mobile-tool-pane label {font-size:12px;color:#bfdbf5}
.mobile-animator-app .mobile-tool-pane input,
.mobile-animator-app .mobile-tool-pane select {font-size:15px}
.mobile-animator-app .mobile-tool-pane input[type=number],
.mobile-animator-app .mobile-tool-pane input:not([type=checkbox]):not([type=range]):not([type=color]):not([type=file]),
.mobile-animator-app .mobile-tool-pane select {padding:7px;min-height:36px;}
.mobile-animator-app .mobile-tool-pane .timeline {
  min-height:0;
  padding:10px;
}
.mobile-animator-app .timeline .bar {display:block}
.mobile-animator-app .timeline .bar h2 {display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-bottom:7px}
.mobile-animator-app .timeline .bar .buttons {
  display:flex;flex-wrap:nowrap;overflow-x:auto;
  padding-bottom:5px;scrollbar-width:thin;
}
.mobile-animator-app .timeline .bar .buttons button {flex:none;min-width:38px}
.mobile-animator-app .timeline .bar .buttons .btn-word {font-size:11px}
.mobile-animator-app .frames {
  min-height:92px;
  padding:7px 2px 9px;
  gap:7px;scroll-snap-type:x proximity;
}
.mobile-animator-app .frame {
  flex:0 0 74px;width:74px;
  padding:4px;scroll-snap-align:start;
}
.mobile-animator-app .frame img {width:61px;height:61px}
.mobile-animator-app .grid6 {grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.mobile-animator-app #groups {min-height:70px;max-height:96px}
.mobile-animator-app .mobile-form-panel > .buttons.vertical {display:grid;grid-template-columns:1fr 1fr;gap:7px}
.mobile-animator-app .mobile-form-panel > .buttons.vertical button {
  width:100%;min-width:0;min-height:48px;justify-content:flex-start;
  text-align:left;white-space:normal;line-height:1.3;
}
.mobile-animator-app .mobile-form-panel > .buttons.vertical .btn-word {font-size:11px}
.mobile-animator-app .mobile-form-panel .drop {min-height:95px;padding:10px}
.mobile-animator-app .mobile-workspace-tabs {
  min-width:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;
  padding:5px 5px calc(4px + env(safe-area-inset-bottom,0px));
  background:#101d3b;border-top:1px solid #355b90;
  box-shadow:0 -5px 18px #02071985;
}
.mobile-animator-app .mobile-tool-tab {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:0;min-height:48px;gap:1px;
  border:1px solid transparent;border-radius:9px;
  font-size:10px;font-weight:750;color:#8cafd5;
  padding:2px 0;background:transparent;
}
.mobile-animator-app .mobile-tab-symbol {
  font-size:21px;line-height:21px;
  color:inherit;font-weight:600;
}
.mobile-animator-app .mobile-tool-tab[aria-selected="true"] {
  color:#bdf6ff;background:#154872;border-color:#2ea4c6;
}
.mobile-animator-app .mobile-tool-tab:focus-visible {outline:2px solid #54dfff;outline-offset:-2px;}
@media(max-height:720px) {
  .mobile-animator-app .mobile-stage {max-height:39dvh;}
  .mobile-animator-app .preview canvas {max-height:clamp(100px,18dvh,150px);}
  .mobile-animator-app .mobile-tool-tab {min-height:42px}
}
@media(max-width:350px) {
  .mobile-animator-app .mobile-tab-symbol {font-size:18px}
  .mobile-animator-app .mobile-workspace-tabs {padding-left:3px;padding-right:3px}
  .mobile-animator-app .transport .buttons {gap:1px}
  .mobile-animator-app .transport .buttons button {min-width:30px}
}

/* Honor native hidden controls despite the desktop button display rules. */
.mobile-animator-app [hidden] { display:none!important; }


/* Compact mobile studio: only relevant controls and content are shown. */
.mobile-animator-app .transport #first,
.mobile-animator-app .transport #last,
.mobile-animator-app .transport #stop { display:none!important; }
.mobile-animator-app .transport .transport-word { display:none!important; }
.mobile-animator-app .transport .buttons { gap:10px; }
.mobile-animator-app .transport .buttons button {
  flex:0 0 46px; min-width:44px; min-height:42px; max-height:44px;
}
.mobile-animator-app .transport .buttons #play { flex-basis:58px; }
.mobile-animator-app .transport #playMode { display:none; }
.mobile-animator-app .mobile-empty-import {
  width:100%; min-height:44px; font-size:13px; font-weight:800;
  border:1px solid #48bedb; border-radius:10px;
  background:linear-gradient(120deg,#13749a,#2252a2);
  color:#fff;
}
.mobile-animator-app .mobile-empty-import[hidden],
.mobile-animator-app .mobile-empty-frames[hidden] {display:none!important;}
.mobile-animator-app.is-empty .mobile-stage {
  max-height:none; flex:none; gap:8px; padding:9px 12px 12px;
}
.mobile-animator-app.is-empty .mobile-stage .previews,
.mobile-animator-app.is-empty .mobile-stage .transport,
.mobile-animator-app.is-empty .mobile-stage .mobile-status-row,
.mobile-animator-app.is-empty .mobile-stage .mobile-compare {display:none!important;}
.mobile-animator-app.is-empty .mobile-tool-pane[data-tool=frames] .timeline,
.mobile-animator-app.is-empty .mobile-tool-pane[data-tool=frames] > .note {display:none!important;}
.mobile-animator-app .mobile-empty-frames {padding:14px 6px;text-align:center;}
.mobile-animator-app .mobile-empty-frames-button {
  background:#174f77;border:1px solid #3c89bc;color:#e7f8ff;
  min-height:44px;padding:9px 16px;
}
.mobile-animator-app .mobile-quick-frame-actions {display:flex;gap:6px;flex-wrap:wrap;margin:5px 0}
.mobile-animator-app .mobile-quick-frame-actions button {min-height:38px;}
.mobile-animator-app .mobile-extra-frame-tools {
  border:1px solid #315d83;border-radius:9px;
  padding:7px 9px;margin-bottom:9px;
}
.mobile-animator-app .mobile-extra-frame-tools summary {
  color:#a1d7f1;font-size:12px;cursor:pointer;min-height:26px;list-style-position:inside;
}
.mobile-animator-app .mobile-extra-frame-tools .buttons {
  padding-top:7px;display:flex;flex-wrap:wrap;gap:6px!important;
}
.mobile-animator-app .mobile-extra-frame-tools .buttons button {min-width:40px;}
.mobile-animator-app .drag-hint,
.mobile-animator-app #timelineDropHelp {display:none!important;}
.mobile-animator-app #selectedCount[hidden] {display:none!important;}
.mobile-animator-app .mobile-tool-pane[data-tool=animate] #playMode {display:block!important;min-height:40px;}
.mobile-animator-app .mobile-stage .previewbar small {display:none;}
.mobile-animator-app .mobile-workspace-tabs {padding-bottom:calc(2px + env(safe-area-inset-bottom,0px));}
@media(max-height:760px) {
  .mobile-animator-app .mobile-stage {max-height:34dvh;}
  .mobile-animator-app .preview canvas {max-height:clamp(90px,17dvh,140px);}
}

/* v3: one actionable import, compact but visible preview in the empty state. */
.mobile-animator-app .mobile-tab-symbol {
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
}
.mobile-animator-app .mobile-tab-symbol svg {
  display:block; width:20px; height:20px; stroke:currentColor;
}
.mobile-animator-app.is-empty .mobile-stage {
  display:flex; flex-direction:column; gap:4px;
  min-height:0; max-height:245px; padding:7px 12px 9px;
  overflow:hidden;
}
.mobile-animator-app.is-empty .mobile-stage .previews {display:grid!important;}
.mobile-animator-app.is-empty .mobile-stage .previews .preview:has(#result) {display:flex!important;}
.mobile-animator-app.is-empty .mobile-stage .previewbar {display:none!important;}
.mobile-animator-app.is-empty .mobile-stage .preview canvas {
  width:min(100%,145px)!important;
  height:auto!important; max-height:clamp(90px,15dvh,137px);
}
.mobile-animator-app.is-empty .mobile-stage .mobile-stage-head {display:flex;}
.mobile-animator-app.is-empty .mobile-stage .mobile-empty-import {
  max-width:300px; align-self:center; min-height:40px; padding:7px 12px;
}
.mobile-animator-app.is-empty .mobile-tool-pane[data-tool=frames] {
  min-height:100%; justify-content:center;
}
.mobile-animator-app .mobile-empty-frames {
  margin:auto 0; padding:20px 12px 26px; text-align:center;
  border:1px solid #294b72; border-radius:14px;
  background:linear-gradient(160deg,#12284b,#111c36);
}
.mobile-animator-app .mobile-empty-frames-title {
  display:block; font-size:15px; color:#d3eaff; margin-bottom:7px;
}
.mobile-animator-app .mobile-empty-frames-note {
  font-size:12px; line-height:1.55; margin:0 auto;
  max-width:290px; color:#9bb9db;
}
.mobile-animator-app .mobile-empty-frames-button {display:none!important;}
.mobile-animator-app .mobile-stage .mobile-empty-import {font-size:13px;}
.mobile-animator-app .mobile-workspace-tabs button {text-overflow:ellipsis;overflow:hidden;}
@media(max-height:700px){
 .mobile-animator-app.is-empty .mobile-stage{max-height:203px;}
 .mobile-animator-app.is-empty .mobile-stage .preview canvas{max-height:105px;}
}