/* =====================================================================
   STUDIO comune agli strumentiCSS (BasilicaTema) 
   smartphoneSupporto: barra degli strumentiorizz.Scorrimento, target di toccoGrande , 
   canvas touch-action:none. 
   ===================================================================== */
.tool{display:flex; flex-direction:column; height:100%; min-height:0;}
.tool-bar{
  flex:0 0 auto; display:flex; align-items:center; gap:6px;
  padding:5px 6px; background:var(--panel-2); border-bottom:1px solid var(--line);
  overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap;
}
.tool-bar::-webkit-scrollbar{height:6px;}
.tool-bar::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px;}
.tool-main{flex:1 1 auto; min-height:0; display:flex;}

.gx-btn{
  background:#fff; color:var(--ink); border:1px solid var(--line);
  border-radius:6px; min-width:34px; height:32px; padding:0 8px;
  font-size:12px; cursor:pointer; display:inline-flex; align-items:center; gap:4px;
}
.gx-btn:hover{border-color:var(--gold); color:var(--crimson);}
.gx-btn.on{background:linear-gradient(180deg,var(--crimson-lt),var(--crimson)); color:#fff; border-color:var(--crimson-deep);}
.gx-sep{width:1px; height:22px; background:var(--line); flex:0 0 auto;}
.gx-label{font-size:11px; color:var(--muted); flex:0 0 auto;}
.gx-num{font:11px/1 "Courier New",monospace; color:var(--crimson); min-width:30px; text-align:right;}
.gx-range{width:90px; accent-color:var(--crimson); vertical-align:middle;}
.gx-color{width:32px; height:32px; padding:0; border:1px solid var(--line); border-radius:6px; background:#fff; cursor:pointer;}
.gx-select{background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:6px; height:32px; font-size:12px; padding:0 6px;}

/* base canvas (su morbida pergamena Bianco percarta) */
.gx-stage{
  flex:1 1 auto; position:relative; min-height:0; overflow:hidden;
  background:radial-gradient(circle at 50% 38%, #fbf6ec, #efe3cf 75%);
  touch-action:none; cursor:crosshair;
}
.gx-paper{
  position:absolute; left:50%; top:50%; transform-origin:0 0;
  background:var(--paper);
  box-shadow:0 6px 26px rgba(0,0,0,.28), 0 0 0 1px rgba(138,21,56,.08);
}
.gx-paper canvas{position:absolute; inset:0; display:block;}

/* Livellopannello */
.gx-layers{
  position:absolute; right:8px; top:8px; width:170px; max-height:60%;
  background:rgba(253,250,243,.96); border:1px solid var(--line); border-radius:8px;
  display:flex; flex-direction:column; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,.18); z-index:5;
}
.gx-layers h4{margin:0; padding:6px 8px; font-size:11px; color:var(--crimson); background:var(--panel-2); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between;}
.gx-layer-list{list-style:none; margin:0; padding:4px; overflow:auto; flex:1 1 auto;}
.gx-layer{display:flex; align-items:center; gap:6px; padding:5px 6px; border-radius:6px; font-size:12px; cursor:pointer; border:1px solid transparent;}
.gx-layer.active{background:rgba(138,21,56,.10); border-color:var(--crimson);}
.gx-layer .vis{cursor:pointer; width:18px; text-align:center; opacity:.85;}
.gx-layer .nm{flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.gx-layer .order{display:flex; flex-direction:column;}
.gx-layer .order button{background:none; border:0; color:var(--muted); cursor:pointer; line-height:.8; font-size:10px;}
.gx-layer .order button:hover{color:var(--crimson);}

.gx-zoomhud{position:absolute; left:8px; bottom:8px; z-index:5; display:flex; align-items:center; gap:4px; background:rgba(253,250,243,.95); border:1px solid var(--line); border-radius:8px; padding:3px; box-shadow:0 2px 10px rgba(0,0,0,.15);}
.gx-empty{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:12px; text-align:center; padding:20px; pointer-events:none;}

@media (max-width:720px){
  .gx-layers{width:150px; max-height:48%;}
  .gx-range{width:72px;}
  .gx-btn{height:36px; min-width:38px;}
  .gx-color{width:36px; height:36px;}
  .gx-select{height:36px;}
}

/* ---------------------------------------------------------------------
   editor: pannello parametri
   --------------------------------------------------------------------- */
.ed-param{
  position:absolute; right:8px; top:8px; width:210px; max-height:88%;
  overflow:auto; z-index:5; background:rgba(253,250,243,.97);
  border:1px solid var(--line); border-radius:8px; padding:8px; box-shadow:0 4px 16px rgba(0,0,0,.18);
}
.ed-ptitle{font-size:12px; color:var(--crimson); font-weight:700; margin-bottom:6px; border-bottom:1px solid var(--line); padding-bottom:4px;}
.ed-sub{font-size:10px; color:var(--muted); margin:8px 0 2px; letter-spacing:.05em;}
.ed-hint{font-size:11px; color:var(--muted); padding:6px;}
.ed-row{display:flex; align-items:center; gap:6px; margin:4px 0; font-size:11px; color:var(--ink);}
.ed-row>span{flex:0 0 52px; color:var(--muted);}
.ed-row input[type="range"]{flex:1 1 auto; min-width:0; accent-color:var(--crimson);}
.ed-row .gx-num{flex:0 0 34px;}
.ed-row .gx-color{flex:0 0 auto;}
@media (max-width:720px){ .ed-param{width:180px;} .ed-row>span{flex-basis:46px;} }

/* ---------------------------------------------------------------------
   Gestione audio (15chrack + libreria)
   --------------------------------------------------------------------- */
.au-main{display:flex; gap:6px; min-height:0;}
.au-rack{flex:1 1 auto; overflow:auto; padding:6px; display:flex; flex-direction:column; gap:6px;}
.au-lib{flex:0 0 230px; display:flex; flex-direction:column; border-left:1px solid var(--line); min-height:0;}
.au-lib h4{margin:0; padding:6px 8px; font-size:11px; color:var(--crimson); background:var(--panel-2); border-bottom:1px solid var(--line);}
.au-lib-list{flex:1 1 auto; overflow:auto; padding:4px;}
.au-lib-item{display:flex; align-items:center; gap:5px; padding:4px; border-radius:6px;}
.au-lib-item:hover{background:rgba(138,21,56,.05);}
.au-libname{flex:1 1 auto; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.au-size{font:10px/1 "Courier New",monospace; color:var(--muted);}
.au-mini{height:26px; min-width:26px; padding:0 6px; font-size:11px;}
.au-assign{color:var(--crimson); border-color:var(--gold);}
.au-empty{color:var(--muted); font-size:11px; padding:14px; text-align:center;}
.au-ch{background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:6px 8px;}
.au-ch-head{display:flex; align-items:center; gap:6px;}
.au-chno{font:700 11px/1 "Courier New",monospace; color:#fff; background:var(--crimson); border-radius:4px; padding:3px 5px;}
.au-kind{height:26px; font-size:11px;}
.au-name{flex:1 1 auto; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink);}
.au-ch-ctrl{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:6px;}
.au-ch-ctrl label{display:flex; align-items:center; gap:5px; font-size:11px; color:var(--muted);}
.au-ch-ctrl input[type="range"]{width:90px; accent-color:var(--crimson);}
.au-ch-ctrl .gx-num{color:var(--crimson); min-width:30px;}
.au-loop input,.au-target select{accent-color:var(--crimson);}
@media (max-width:720px){
  .au-main{flex-direction:column;}
  .au-lib{flex-basis:auto; max-height:38%; border-left:0; border-top:1px solid var(--line);}
  .au-ch-ctrl input[type="range"]{width:120px;}
  .au-mini{height:32px; min-width:32px;}
}

/* =====================================================================
   visualizzatore (Lettura / Anteprima) =Didascalie nei margini+15chRiproduci (BasilicaTema) 
   sopra/sotto = orizzontale, sinistraDestra=Verticalescrittura. Bianco Margininella banda Nerocaratteri. manga e : altro con 
   mai sovrapposto.
   ===================================================================== */
.mv-root{display:flex; flex-direction:column; height:100%; min-height:0; background:#fbf6ec;}
.mv-stage{position:relative; flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; padding:clamp(8px,2vw,28px); overflow:hidden;}

/* Marginisuperficie con banda (3×3griglia) */
.mv-area{
  --band-h:clamp(40px,13vh,130px);
  --band-w:clamp(58px,16vw,190px);
  --bt:0px; --bb:0px; --bl:0px; --br:0px;
  width:100%; height:100%; display:grid;
  grid-template-columns:var(--bl) minmax(0,1fr) var(--br);
  grid-template-rows:var(--bt) minmax(0,1fr) var(--bb);
  grid-template-areas:"tp tp tp" "lf mg rt" "bm bm bm";
  background:#fff;
  box-shadow:0 10px 36px rgba(0,0,0,.20), 0 0 0 1px rgba(138,21,56,.06);
}
.mv-band{display:flex; align-items:center; justify-content:center; gap:10px; padding:6px; overflow:hidden;}
.band-top{grid-area:tp; flex-direction:row;}
.band-bottom{grid-area:bm; flex-direction:row;}
.band-left{grid-area:lf; flex-direction:column;}
.band-right{grid-area:rt; flex-direction:column;}
.mv-paper{grid-area:mg; display:flex; align-items:center; justify-content:center; overflow:hidden; min-width:0; min-height:0; background:#fff;}
/* ★A4adattato mantenendo il rapporto (Verticalesenza stiramento): rapporto nativo +maxper vincoli contain */
.mv-paper canvas{max-width:100%; max-height:100%; width:auto; height:auto; display:block;}

/* didascalie: Nerocaratteri · escevento di Serif */
.mv-cap{
  color:#000;
  font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  line-height:1.7; letter-spacing:.04em; text-align:center;
  opacity:0; transition:opacity .55s ease, transform .55s ease, filter .55s ease;
}
.mv-cap.size-s{font-size:clamp(13px,2.4vw,18px);}
.mv-cap.size-m{font-size:clamp(15px,3.0vw,24px);}
.mv-cap.size-l{font-size:clamp(18px,4.0vw,32px);}
.mv-cap.vertical{writing-mode:vertical-rl; text-orientation:upright; line-height:1.5;}
.mv-cap.on{opacity:1;}
.mv-cap.anim-slide{transform:translateY(14px);} .mv-cap.anim-slide.on{transform:translateY(0);}
.mv-cap.anim-dissolve{filter:blur(8px);} .mv-cap.anim-dissolve.on{filter:blur(0);}
.mv-cap.peek{opacity:.32;}
.mv-cap.peek.anim-slide{transform:none;} .mv-cap.peek.anim-dissolve{filter:none;}

/* «Inizia»Sovrapponi */
.mv-start{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:rgba(247,241,230,.86); z-index:10;}
.mv-startbtn{font-size:18px; padding:14px 30px; border-radius:10px; cursor:pointer; color:#fff; border:1px solid var(--crimson-deep); background:linear-gradient(180deg,var(--crimson-lt),var(--crimson)); box-shadow:0 4px 14px rgba(138,21,56,.3);}
.mv-starttip{color:var(--muted); font-size:12px;}
.mv-swipehint{position:absolute; left:0; right:0; bottom:6px; text-align:center; font-size:11px; color:var(--muted); pointer-events:none; opacity:.7;}

/* Azionibarra (Destra→sinistra: Avanti=sinistra, Indietro=Destra) */
.mv-controls{flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:8px; padding:8px; background:#f3e9d8; border-top:1px solid var(--line);}
.mv-btn{background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:9px 15px; font-size:13px; cursor:pointer;}
.mv-btn:hover{border-color:var(--gold); color:var(--crimson);}
.mv-pageno{font:12px/1 "Courier New",monospace; color:var(--muted); min-width:64px; text-align:center;}

/* edit: Modificapannello */
.mv-author{flex:0 0 auto; max-height:44%; overflow:auto; border-top:1px solid var(--line); background:var(--panel); padding:8px;}
.mv-author-bar{display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap;}
.mv-author-bar b{color:var(--crimson); font-size:12px;}
.mv-author-tip{font-size:10px; color:var(--muted);}
.mv-caplist{display:flex; flex-direction:column; gap:6px;}
.mv-capedit{background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:6px;}
.mv-capedit-row{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:3px 0;}
.mv-capedit textarea{width:100%; background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:6px; font-size:13px; padding:5px; resize:vertical; font-family:inherit;}
.mv-capedit select,.mv-capedit input[type="number"]{background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:6px; height:28px; font-size:11px; padding:0 4px;}
.mv-capedit input[type="number"]{width:62px;}
.mv-capedit input[type="color"]{width:34px; height:28px; padding:0; border:1px solid var(--line); border-radius:6px; background:#fff; cursor:pointer;}
.mv-capedit label{font-size:11px; color:var(--muted); display:flex; align-items:center; gap:4px;}

@media (max-width:720px){
  .mv-stage{padding:8px;}
  .mv-author{max-height:50%;}
  .mv-btn{padding:11px 16px;}
}

/* Articoli ufficiali cornice quando incorporato */
.manga-embed{margin:18px 0;}

/* ===================================================================
   aggiuntaUI: Livello · pannello / Effetti di BiancoNerotoggle / episodioSuonocue
   =================================================================== */
.gx-laypanel{border-top:1px solid var(--line); padding:6px 8px; display:flex; flex-direction:column; gap:5px; background:var(--panel-2);}
.gx-laypanel:empty{display:none;}
.lp-row{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted);}
.lp-row>span{flex:0 0 42px;}
.lp-row input[type="range"]{flex:1 1 auto; min-width:0; accent-color:var(--crimson);}
.lp-row .gx-select{flex:1 1 auto;}
.ed-bw{padding:0 8px;}
.au-tip{font-size:10px; color:var(--muted);}
.au-range{display:flex; align-items:center; gap:4px; font-size:11px; color:var(--ink);}
.au-pg{width:54px; height:28px; text-align:center; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); font-size:12px;}
.au-se-delay input{width:54px; height:28px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); text-align:center;}

/* ===================================================================
   reso elegante & ibisPaintventosmartphonepiùconversione
   =================================================================== */
.gx-btn, .tb, .layout-btn, .mv-btn, .gx-select, .proj-select, .pane-tool{
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s;
}
.gx-btn:active, .tb:active, .mv-btn:active{ transform:translateY(1px); }
.gx-btn.on{ box-shadow:0 1px 6px rgba(138,21,56,.28); }
.tool-bar{ backdrop-filter:saturate(1.05); }
.gx-stage{ border-radius:0 0 8px 8px; }

@media (max-width:820px){
  /* smartphone: 1pannelloTotaleSchermo=vento a disegno a raccoltaMedio */
  :root{ --bar-h:auto; }
  .studio-bar{ flex-wrap:wrap; height:auto; padding:6px 8px; gap:6px; row-gap:6px; }
  .bar-left,.bar-right{ gap:6px; }
  .brand{ font-size:13px; }
  .bar-center{ order:3; width:100%; justify-content:center; }
  .workspace{ padding:0; gap:0; }
  .workspace[data-layout]{ grid-template-columns:1fr !important; grid-template-rows:1fr !important; }
  .workspace .pane:not([data-pane="A"]){ display:none !important; }
  .pane{ border-radius:0; border-left:0; border-right:0; box-shadow:none; }
  .pane-head{ padding:8px 10px; gap:10px; }
  .pane-tag{ display:none; } /* Tag omesso, semplice */
  .pane-tool{ flex:1 1 auto; max-width:none; height:40px; font-size:14px; border-radius:10px; }

  /* target touch Grande , tondo , dito con e */
  .gx-btn{ height:42px; min-width:42px; border-radius:11px; font-size:13px; }
  .gx-select{ height:42px; border-radius:11px; font-size:13px; }
  .gx-color{ width:42px; height:42px; border-radius:11px; }
  .gx-range{ width:96px; height:30px; }
  .tool-bar{ padding:7px 8px; gap:8px; position:sticky; top:0; z-index:6;
             background:linear-gradient(180deg,#fffdf8,#f3e9d8); box-shadow:0 2px 6px rgba(0,0,0,.10); }
  .gx-layers{ width:46%; max-width:210px; max-height:54%; border-radius:12px; }
  .gx-zoomhud .gx-btn{ height:40px; }
  .ed-param{ width:62%; max-width:240px; }

  /* visualizzatoreAzionibarra a portata di polliceDimensione a */
  .mv-controls{ padding:10px; gap:10px; }
  .mv-btn{ padding:13px 18px; font-size:14px; border-radius:12px; }
  .mv-author{ max-height:52%; }

  /* Audio: Verticaleimpilato e ampio */
  .au-ch-ctrl{ gap:10px 12px; }
  .au-ch-ctrl input[type="range"]{ width:100%; }
}

/* estremoPiccololarghezza */
@media (max-width:440px){
  .gx-layers{ width:54%; }
  .brand span.sub{ display:none; }
}