:root{
  --bg:#0b0b0d;
  --panel:#141418;
  --card:#1c1c22;
  --stroke:#2a2a31;
  --text:#f4f4f2;
  --muted:#c9c9c4;
  --accent:#b31217;
  --accent2:#7f0d12;
  --tool-color:#b31217;
  --tool-bg:rgba(179,18,23,.10);
  --tool-bg-strong:rgba(179,18,23,.18);
  --tool-border:rgba(179,18,23,.45);
  --tool-shadow:rgba(179,18,23,.16);
  --shadow: 0 10px 30px rgba(0,0,0,.38);
  --r: 18px;

  --pp-step-1: #B8832F;
  --pp-step-2: #4E6F96;
  --pp-step-3: #3F7C70;
  --pp-step-4: #7A5A9A;

  --pp-step-1-soft: rgba(184,131,47,.22);
  --pp-step-2-soft: rgba(78,111,150,.22);
  --pp-step-3-soft: rgba(63,124,112,.22);
  --pp-step-4-soft: rgba(122,90,154,.22);
}

body[data-active-view="home"]{
  --tool-color:#b31217;
  --tool-bg:rgba(179,18,23,.10);
  --tool-bg-strong:rgba(179,18,23,.18);
  --tool-border:rgba(179,18,23,.45);
  --tool-shadow:rgba(179,18,23,.16);
}

body[data-active-view="start"]{
  --tool-color:#22c55e;
  --tool-bg:rgba(34,197,94,.10);
  --tool-bg-strong:rgba(34,197,94,.18);
  --tool-border:rgba(34,197,94,.45);
  --tool-shadow:rgba(34,197,94,.16);
}

body[data-active-view="storyboard"]{
  --tool-color:#facc15;
  --tool-bg:rgba(250,204,21,.10);
  --tool-bg-strong:rgba(250,204,21,.18);
  --tool-border:rgba(250,204,21,.45);
  --tool-shadow:rgba(250,204,21,.16);
}

body[data-active-view="lessons"]{
  --tool-color:#9ca3af;
  --tool-bg:rgba(156,163,175,.10);
  --tool-bg-strong:rgba(156,163,175,.16);
  --tool-border:rgba(156,163,175,.38);
  --tool-shadow:rgba(156,163,175,.13);
}

body[data-active-view="dictionary"]{
  --tool-color:#38bdf8;
  --tool-bg:rgba(56,189,248,.10);
  --tool-bg-strong:rgba(56,189,248,.18);
  --tool-border:rgba(56,189,248,.45);
  --tool-shadow:rgba(56,189,248,.16);
}

body[data-active-view="notebook"]{
  --tool-color:#a78bfa;
  --tool-bg:rgba(167,139,250,.10);
  --tool-bg-strong:rgba(167,139,250,.18);
  --tool-border:rgba(167,139,250,.45);
  --tool-shadow:rgba(167,139,250,.16);
}

body[data-active-view="shop"]{
  --tool-color:#9ca3af;
  --tool-bg:rgba(156,163,175,.10);
  --tool-bg-strong:rgba(156,163,175,.16);
  --tool-border:rgba(156,163,175,.38);
  --tool-shadow:rgba(156,163,175,.13);
}

*{ box-sizing:border-box; }
html,body{
  overflow-x: hidden;
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:
    radial-gradient(1200px 800px at 30% 0%, var(--tool-bg), transparent 60%),
    radial-gradient(900px 600px at 90% 20%, var(--tool-bg-strong), transparent 55%),
    var(--bg);
  color:var(--text);
  transition: background .25s ease;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-bottom:1px solid var(--stroke);
  background: rgba(11,11,13,.88);
  backdrop-filter: blur(10px);
}

.topbar__left, .topbar__right{ display:flex; gap:10px; align-items:center; }
.topbar__center{ display:flex; align-items:center; justify-content:center; gap:10px; min-width: 200px; }
.brand{
  height: 42px;
  width:auto;
  display:block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.34));
}
.brandFallback{ font-weight:800; letter-spacing:.4px; }

.layout{
  display:grid;
  grid-template-columns: 250px 1fr;
  gap: 14px;
  padding: 14px;
  transition: grid-template-columns .24s ease;
}

.menu{
  display:flex;
  flex-direction:column;
  background: rgba(20,20,24,.92);
  border:1px solid var(--stroke);
  border-radius: var(--r);
  padding: 14px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 72px;
  height: calc(100vh - 92px);
  overflow:hidden;
  transition: padding .22s ease, border-color .18s ease, box-shadow .18s ease;
}

.menu__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
  flex:0 0 auto;
}

.menu__header{
  position: relative;
  border-radius: 14px;
  padding: 4px 6px;
  margin: -4px -6px 10px;
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.menu__header:hover{
  background: rgba(28,28,34,.58);
  box-shadow: inset 0 0 0 1px rgba(179,18,23,.12);
}

.menu__header:active{
  background: rgba(28,28,34,.74);
}

.menu__header .menu__toggle{
  cursor: pointer;
}

.menu__title{
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  transition: opacity .18s ease, transform .18s ease, width .18s ease, margin .18s ease;
}

.menu__toggle{
  appearance:none;
  width: 36px;
  height: 36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 36px;
  border-radius: 12px;
  border:1px solid var(--stroke);
  background: rgba(28,28,34,.92);
  color: var(--text);
  cursor:pointer;
  transition: transform .12s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.menu__toggle:hover{
  transform: translateY(-1px);
  border-color: rgba(179,18,23,.35);
  box-shadow: 0 0 0 2px rgba(179,18,23,.10) inset;
}
.menu__toggle:focus-visible{
  outline:none;
  border-color: rgba(179,18,23,.60);
  box-shadow: 0 0 0 3px rgba(179,18,23,.16);
}
.menu__toggleIcon{
  font-size: 15px;
  line-height: 1;
  font-weight: 900;
}
.menu__toggleIcon--mobile{ display:none; }

.menu__body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  transition: opacity .18s ease, transform .18s ease, max-height .22s ease;
}

.menu__list{ display:flex; flex-direction:column; gap:10px; }
.menu__item{
  appearance:none;
  position:relative;
  border:1px solid var(--stroke);
  background: rgba(28,28,34,.92);
  color: var(--text);
  padding: 12px 12px 12px 34px;
  border-radius: 14px;
  text-align:left;
  cursor:pointer;
  transition: transform .08s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.menu__item::before{
  content:"";
  position:absolute;
  left:13px;
  top:50%;
  width:9px;
  height:9px;
  border-radius:999px;
  background: var(--item-color, var(--accent));
  transform:translateY(-50%);
  box-shadow:0 0 0 3px var(--item-shadow, rgba(179,18,23,.12));
}

.menu__item:hover{
  transform: translateY(-1px);
  border-color: var(--item-border, rgba(179,18,23,.35));
  background: var(--item-bg, rgba(28,28,34,.92));
}

.menu__item.is-active{
  border-color: var(--item-color, rgba(179,18,23,.70));
  background: var(--item-bg, rgba(28,28,34,.92));
  box-shadow:
    0 0 0 2px var(--item-shadow, rgba(179,18,23,.12)) inset,
    0 10px 24px rgba(0,0,0,.18);
}

.menu__item[data-view="home"]{
  --item-color:#b31217;
  --item-bg:rgba(179,18,23,.12);
  --item-border:rgba(179,18,23,.50);
  --item-shadow:rgba(179,18,23,.16);
}

.menu__item[data-view="start"]{
  --item-color:#22c55e;
  --item-bg:rgba(34,197,94,.12);
  --item-border:rgba(34,197,94,.50);
  --item-shadow:rgba(34,197,94,.16);
}

.menu__item[data-view="storyboard"]{
  --item-color:#facc15;
  --item-bg:rgba(250,204,21,.12);
  --item-border:rgba(250,204,21,.50);
  --item-shadow:rgba(250,204,21,.16);
}

.menu__item[data-view="lessons"]{
  --item-color:#9ca3af;
  --item-bg:rgba(156,163,175,.10);
  --item-border:rgba(156,163,175,.42);
  --item-shadow:rgba(156,163,175,.13);
}

.menu__item[data-view="dictionary"]{
  --item-color:#38bdf8;
  --item-bg:rgba(56,189,248,.12);
  --item-border:rgba(56,189,248,.50);
  --item-shadow:rgba(56,189,248,.16);
}

.menu__item[data-view="notebook"]{
  --item-color:#a78bfa;
  --item-bg:rgba(167,139,250,.12);
  --item-border:rgba(167,139,250,.50);
  --item-shadow:rgba(167,139,250,.16);
}

.menu__item[data-view="shop"]{
  --item-color:#9ca3af;
  --item-bg:rgba(156,163,175,.10);
  --item-border:rgba(156,163,175,.42);
  --item-shadow:rgba(156,163,175,.13);
}

.menu__footer{ margin-top: 14px; display:flex; flex-direction:column; gap:8px; }
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--stroke);
  background: rgba(28,28,34,.92);
  border-radius: 999px;
  padding: 8px 10px;
  width: fit-content;
}

body.menu-collapsed .layout{
  grid-template-columns: 64px 1fr;
}

body.menu-collapsed .menu{
  padding: 12px 8px;
  overflow: visible;
}

body.menu-collapsed .menu__header{
  justify-content:center;
  margin-bottom: 0;
}

body.menu-collapsed .menu__title{
  opacity: 0;
  width: 0;
  margin: 0;
  transform: translateX(-8px);
  pointer-events:none;
  overflow:hidden;
}

body.menu-collapsed .menu__toggle{
  margin-inline: auto;
}

body.menu-collapsed .menu__body{
  opacity: 0;
  max-height: 0;
  transform: translateX(-10px);
  pointer-events:none;
  overflow:hidden;
}

.content{
  min-height: calc(100vh - 92px);
}

.panel{
  display:none;
  background:
    linear-gradient(180deg, var(--tool-bg), transparent 220px),
    rgba(20,20,24,.92);
  border:1px solid var(--tool-border);
  border-radius: var(--r);
  padding: 16px;
  box-shadow:
    var(--shadow),
    0 0 0 1px var(--tool-shadow) inset;
}
.panel.is-active{ display:block; }

.panel__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.panel__actions{ display:flex; gap:10px; align-items:center; flex-wrap: wrap; }

h1{ margin: 6px 0 14px; font-size: 26px; }
h2{ margin:0; }
h3{ margin: 0 0 10px; }

.lead{ color: var(--muted); font-size: 16px; line-height: 1.55; margin-top: -6px; }

.cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.card{
  background: rgba(28,28,34,.92);
  border:1px solid var(--stroke);
  border-radius: var(--r);
  padding: 14px;
}

.grid2{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 12px;
}

@media (max-width: 960px){
  .layout{ grid-template-columns: 1fr; }
  body.menu-collapsed .layout{ grid-template-columns: 1fr; }

  .menu{
    position: relative;
    top: 0;
    height:auto;
    overflow:hidden;
  }

  .menu__toggleIcon--desktop{ display:none; }
  .menu__toggleIcon--mobile{ display:inline; }

  .menu__body{
    overflow:hidden;
    max-height: 1200px;
  }

  body.menu-collapsed .menu{
    padding-bottom: 12px;
  }

  body.menu-collapsed .menu__header{
    justify-content:space-between;
    margin-bottom: 0;
  }

  body.menu-collapsed .menu__title{
    opacity: 1;
    width: auto;
    transform: none;
    pointer-events:auto;
    overflow:visible;
  }

  body.menu-collapsed .menu__toggle{
    margin-inline: 0;
  }

  body.menu-collapsed .menu__body{
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events:none;
  }

  .grid2{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; }
}

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(28,28,34,.92);
  color: var(--text);
  text-decoration:none;
  cursor:pointer;
  transition: transform .08s ease, border-color .15s ease, background .15s ease;
  user-select:none;
}
.chip:hover{ transform: translateY(-1px); border-color: rgba(179,18,23,.35); }

.chip--icon{
  width: 42px;
  height: 42px;
  padding: 0;
}
.chip--icon img{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display:block;
}
.chip--button{ appearance:none; }
.chip--primary{
  border-color: rgba(179,18,23,.60);
  box-shadow: 0 0 0 2px rgba(179,18,23,.12) inset;
}

.input{
  width: min(520px, 90vw);
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(11,11,13,.62);
  color: var(--text);
  outline: none;
}
.input:focus{ border-color: rgba(179,18,23,.60); box-shadow: 0 0 0 3px rgba(179,18,23,.12); }

.formRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 10px 0;
}
.formRow label{ width: 90px; color: var(--muted); font-size: 14px; }
.formRow input[type="range"]{ width: 160px; }
.muted{ color: var(--muted); }

.canvasWrap{
  border-radius: 16px;
  border: 1px solid var(--stroke);
  overflow:hidden;
  background: #fff;
}
canvas{ display:block; width:100%; height:auto; background:#fff; }

.alphabet{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
}
.alphaBtn{
  border:1px solid var(--stroke);
  background: rgba(11,11,13,.48);
  color: var(--text);
  border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
}
.alphaBtn:hover{ border-color: rgba(179,18,23,.5); }

.dictResults{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.dictItem{
  border:1px solid var(--stroke);
  background: rgba(11,11,13,.48);
  border-radius: var(--r);
  padding: 12px;
}
.dictItem__term{ font-weight: 800; margin-bottom: 6px; }
.dictItem__def{ color: var(--muted); line-height: 1.5; }

.nbSummary{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px;
  margin: 6px 0 14px;
}

.nbSummaryItem{
  appearance:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:10px 12px;
  font-size:13px;
  line-height:1.2;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  cursor:pointer;
  transition: transform .08s ease, border-color .15s ease, box-shadow .15s ease, filter .15s ease;
}

.nbSummaryItem:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.nbSummaryItem:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.10);
}

.nbSummaryItem.is-active{
  border-color: rgba(255,255,255,.42);
  box-shadow: 0 0 0 2px rgba(255,255,255,.12) inset, 0 10px 22px rgba(0,0,0,.16);
}

.nbSummaryItem strong{
  font-size:12px;
  letter-spacing:.02em;
  pointer-events:none;
}

.nbSummaryItem span:last-child{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:28px;
  border-radius:999px;
  background: rgba(11,11,13,.28);
  border:1px solid rgba(255,255,255,.10);
  font-weight:800;
  pointer-events:none;
}

.nbSummaryItem--total{
  background: rgba(91,181,255,.16);
  border-color: rgba(91,181,255,.34);
  color:#dff2ff;
}

.nbSummaryItem--watched{
  background: rgba(70,180,120,.16);
  border-color: rgba(70,180,120,.34);
  color:#def9e8;
}

.nbSummaryItem--towatch{
  background: rgba(220,78,78,.16);
  border-color: rgba(220,78,78,.34);
  color:#ffe6e6;
}

.nbSummaryItem--favorite{
  background: rgba(246,201,69,.16);
  border-color: rgba(246,201,69,.38);
  color:#fff1bf;
}

.nbList{ display:flex; flex-direction:column; gap:10px; }
.nbItem{
  border:1px solid var(--stroke);
  background: rgba(11,11,13,.48);
  border-radius: var(--r);
  padding: 12px;
}
.nbItem--collapsible{
  padding: 0;
  overflow: hidden;
}
.nbItem__summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px;
  cursor:pointer;
  user-select:none;
}
.nbItem__summary::-webkit-details-marker{ display:none; }
.nbItem__summary:hover{ background: rgba(23,26,35,.35); }
.nbItem__summaryMain{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.nbTitleRow{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.nbFavoriteBtn{
  flex:0 0 auto;
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(28,28,34,.82);
  color: var(--muted);
  cursor:pointer;
  transition: transform .08s ease, border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}

.nbFavoriteBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(246,201,69,.55);
}

.nbFavoriteBtn:focus-visible{
  outline:none;
  border-color: rgba(246,201,69,.85);
  box-shadow: 0 0 0 3px rgba(246,201,69,.14);
}

.nbFavoriteBtn::before{
  content:"☆";
  font-size:18px;
  line-height:1;
}

.nbFavoriteBtn.is-active{
  color:#ffe27a;
  background: rgba(246,201,69,.16);
  border-color: rgba(246,201,69,.85);
  box-shadow: 0 0 0 2px rgba(246,201,69,.12) inset;
}

.nbFavoriteBtn.is-active::before{
  content:"★";
}

.nbItem__summaryStatus{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.nbItem__chevron{
  flex:0 0 auto;
  width:14px;
  height:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--muted);
  transition: transform .18s ease;
}
.nbItem__chevron::before{
  content:"▾";
  font-size:12px;
  line-height:1;
}
.details-open .nbItem__chevron,
.nbItem--collapsible[open] .nbItem__chevron{ transform: rotate(180deg); }
.nbItem__body{
  padding: 0 12px 12px;
  border-top: 1px dashed rgba(255,255,255,.06);
}
.nbItem__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  padding-top:12px;
}
.nbTitle{ font-weight: 800; }
.nbMeta{ color: var(--muted); font-size: 13px; margin-top: 6px; }
.nbActions{ display:flex; gap:8px; }

.btnSmall{
  border:1px solid var(--stroke);
  background: rgba(28,28,34,.92);
  color: var(--text);
  border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
}
.btnSmall:hover{ border-color: rgba(179,18,23,.35); }

.dialog{
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  background: rgba(20,20,24,.98);
  color: var(--text);
  padding: 0;
  width: min(560px, 92vw);
  box-shadow: var(--shadow);
}
.dialog::backdrop{ background: rgba(0,0,0,.55); }
.dialog__form{ padding: 16px; }
.dialog__actions{ display:flex; justify-content:flex-end; gap:10px; margin-top: 12px; }

.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding: 18px;
  z-index: 50;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.overlay__panel{
  width: min(860px, 96vw);
  max-height: calc(100vh - 36px);
  display:flex;
  flex-direction:column;
  background: rgba(20,20,24,.98);
  border:1px solid var(--stroke);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.overlay__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 14px;
  border-bottom:1px solid var(--stroke);
  flex: 0 0 auto;
}
.overlay__body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px;
  color: var(--muted);
  line-height: 1.6;
  -webkit-overflow-scrolling: touch;
}

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Mobile tweaks */
@media (max-width: 560px){
  .topbar{ padding: 10px 10px; }
  .topbar__center{ display:none; }
  .chip--icon{ width: 40px; height: 40px; }
  .chip--icon img{ width: 20px; height: 20px; }
  .menu__item{ padding: 11px 11px 11px 34px; }

  .overlay{
    padding: 10px;
  }

  .overlay__panel{
    width: min(100%, 96vw);
    max-height: calc(100vh - 20px);
  }
}

/* Notebook mobile fix: niente scroll orizzontale, form compatto */
@media (max-width: 560px){
  .panel{ padding: 14px; }
  .card{ padding: 12px; }

  /* I formRow in colonna (label sopra, input sotto) */
  .formRow{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .formRow label{ width: auto; }

  /* Input sempre dentro la card */
  .input{
    width: 100%;
    max-width: 100%;
  }
  .formRow input[type="range"]{ width: 100%; }

  /* Nelle card del Taccuino: evita overflow tra testo e bottoni */
  .nbItem__summaryMain,
  .nbItem__top{
    flex-direction: column;
    align-items: stretch;
  }
  .nbTitleRow{
    justify-content: space-between;
  }
  .nbItem__summaryStatus{
    justify-content: flex-start;
  }
  .nbSummary{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .nbSectionHead{
    align-items: stretch;
  }

  .nbSearchWrap{
    width: 100%;
  }

  .nbSectionHeadActions,
  .nbActions{
    justify-content: flex-end;
  }
}



/* =========================
   Piano di Produzione (Step 1)
   ========================= */
.ppWizard[hidden]{ display:none !important; } /* extra safety */

.ppGridHome{ grid-template-columns: 1fr; }
.ppBullets{ margin: 8px 0 0 18px; color: var(--muted); line-height: 1.5; }

.ppProgress{
  border:1px solid rgba(255,255,255,.05);
  background: linear-gradient(180deg, rgba(15,15,20,.92), rgba(10,10,14,.84));
  border-radius: 999px;
  padding: 11px 12px;
  position: relative;
  overflow:hidden;
  margin: 8px 0 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.ppProgress__bar{
  position:absolute;
  inset:0;
  width: 25%;
  background: linear-gradient(90deg, rgba(184,131,47,.34), rgba(184,131,47,.16));
  transition: width .22s ease, background .22s ease, box-shadow .22s ease;
}
.ppProgress__labels{
  position: relative;
  display:flex;
  justify-content:space-between;
  gap: 10px;
}
.ppProgress__labels button{
  width: 30px;
  height: 30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: rgba(24,24,30,.96);
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
  padding: 0;
  cursor: pointer;
  appearance: none;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  transition: transform .12s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

.ppProgress__labels button[data-step="1"]{
  border-color: rgba(184,131,47,.58);
  box-shadow: inset 0 0 0 1px rgba(184,131,47,.10);
}
.ppProgress__labels button[data-step="2"]{
  border-color: rgba(78,111,150,.58);
  box-shadow: inset 0 0 0 1px rgba(78,111,150,.10);
}
.ppProgress__labels button[data-step="3"]{
  border-color: rgba(63,124,112,.58);
  box-shadow: inset 0 0 0 1px rgba(63,124,112,.10);
}
.ppProgress__labels button[data-step="4"]{
  border-color: rgba(122,90,154,.58);
  box-shadow: inset 0 0 0 1px rgba(122,90,154,.10);
}

.ppProgress__labels button:hover{
  transform: translateY(-1px);
  background: rgba(31,31,38,.98);
}
.ppProgress__labels button[data-step="1"]:hover{
  border-color: var(--pp-step-1);
  box-shadow: 0 0 0 3px var(--pp-step-1-soft);
}
.ppProgress__labels button[data-step="2"]:hover{
  border-color: var(--pp-step-2);
  box-shadow: 0 0 0 3px var(--pp-step-2-soft);
}
.ppProgress__labels button[data-step="3"]:hover{
  border-color: var(--pp-step-3);
  box-shadow: 0 0 0 3px var(--pp-step-3-soft);
}
.ppProgress__labels button[data-step="4"]:hover{
  border-color: var(--pp-step-4);
  box-shadow: 0 0 0 3px var(--pp-step-4-soft);
}

.ppProgress__labels button:focus-visible{
  outline: none;
}
.ppProgress__labels button[data-step="1"]:focus-visible{
  border-color: var(--pp-step-1);
  box-shadow: 0 0 0 3px var(--pp-step-1-soft);
}
.ppProgress__labels button[data-step="2"]:focus-visible{
  border-color: var(--pp-step-2);
  box-shadow: 0 0 0 3px var(--pp-step-2-soft);
}
.ppProgress__labels button[data-step="3"]:focus-visible{
  border-color: var(--pp-step-3);
  box-shadow: 0 0 0 3px var(--pp-step-3-soft);
}
.ppProgress__labels button[data-step="4"]:focus-visible{
  border-color: var(--pp-step-4);
  box-shadow: 0 0 0 3px var(--pp-step-4-soft);
}

.ppProgress__labels button.is-active{
  color: #ffffff;
}
.ppProgress__labels button[data-step="1"].is-active{
  border-color: var(--pp-step-1);
  background: linear-gradient(180deg, rgba(184,131,47,.28), rgba(24,24,30,.96));
  box-shadow: 0 0 0 3px var(--pp-step-1-soft), inset 0 0 18px rgba(184,131,47,.12);
}
.ppProgress__labels button[data-step="2"].is-active{
  border-color: var(--pp-step-2);
  background: linear-gradient(180deg, rgba(78,111,150,.28), rgba(24,24,30,.96));
  box-shadow: 0 0 0 3px var(--pp-step-2-soft), inset 0 0 18px rgba(78,111,150,.12);
}
.ppProgress__labels button[data-step="3"].is-active{
  border-color: var(--pp-step-3);
  background: linear-gradient(180deg, rgba(63,124,112,.28), rgba(24,24,30,.96));
  box-shadow: 0 0 0 3px var(--pp-step-3-soft), inset 0 0 18px rgba(63,124,112,.12);
}
.ppProgress__labels button[data-step="4"].is-active{
  border-color: var(--pp-step-4);
  background: linear-gradient(180deg, rgba(122,90,154,.28), rgba(24,24,30,.96));
  box-shadow: 0 0 0 3px var(--pp-step-4-soft), inset 0 0 18px rgba(122,90,154,.12);
}

.ppProgress:has(.ppProgress__labels button[data-step="1"].is-active) .ppProgress__bar{
  background: linear-gradient(90deg, rgba(184,131,47,.34), rgba(184,131,47,.16));
  box-shadow: 0 0 24px rgba(184,131,47,.18);
}
.ppProgress:has(.ppProgress__labels button[data-step="2"].is-active) .ppProgress__bar{
  background: linear-gradient(90deg, rgba(78,111,150,.34), rgba(78,111,150,.16));
  box-shadow: 0 0 24px rgba(78,111,150,.18);
}
.ppProgress:has(.ppProgress__labels button[data-step="3"].is-active) .ppProgress__bar{
  background: linear-gradient(90deg, rgba(63,124,112,.34), rgba(63,124,112,.16));
  box-shadow: 0 0 24px rgba(63,124,112,.18);
}
.ppProgress:has(.ppProgress__labels button[data-step="4"].is-active) .ppProgress__bar{
  background: linear-gradient(90deg, rgba(122,90,154,.34), rgba(122,90,154,.16));
  box-shadow: 0 0 24px rgba(122,90,154,.18);
}

.ppStepTitle{
  margin: 8px 0 12px;
  font-size: 18px;
  color: var(--text);
}

.ppGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items:start;
}

.ppForm .input{
  width: 100%;
  max-width: 100%;
}

.ppField{ margin: 12px 0; }
.ppField__top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.ppField__top label{
  color: var(--text);
  font-weight: 700;
}
.ppCount{
  color: var(--muted);
  font-size: 12px;
  border:1px solid var(--stroke);
  background: rgba(11,11,13,.48);
  border-radius: 999px;
  padding: 4px 8px;
}

.ppInline{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.ppCheck{
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--muted);
  user-select:none;
}
.ppCheck input{ transform: translateY(1px); }

.ppSelectWrap{ display:flex; flex-direction:column; gap:6px; min-width: 240px; }
.ppSelectLabel{ color: var(--muted); font-size: 13px; }

.ppAddRow{
  display:flex;
  gap: 10px;
  align-items:center;
}
.ppAddRow .input{ flex: 1; }
.ppAddRow--env .ppScene{ max-width: 120px; }

.ppAddRow--shooting{
  display:grid;
  grid-template-columns: 160px 160px minmax(180px, 1fr) auto;
  align-items:center;
}
.ppAddRow--shooting .input{
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.ppDateInput{
  min-width: 0;
}
.ppShootScenes{
  min-width: 0;
}

.ppList{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.ppRow{
  border:1px solid var(--stroke);
  background: rgba(11,11,13,.48);
  border-radius: 14px;
  padding: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.ppRow__main{
  display:flex;
  flex-direction:column;
  gap: 2px;
}
.ppRow__title{ color: var(--text); font-weight: 800; }
.ppRow__meta{ color: var(--muted); font-size: 12px; }

.ppRow__actions{ display:flex; gap: 6px; flex-wrap: wrap; }
.ppMini{
  border:1px solid var(--stroke);
  background: rgba(28,28,34,.92);
  color: var(--text);
  border-radius: 12px;
  padding: 7px 9px;
  cursor:pointer;
}
.ppMini:hover{ border-color: rgba(179,18,23,.35); }

.ppHr{
  border: none;
  border-top: 1px solid var(--stroke);
  margin: 14px 0;
}

.ppActions{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ppActions__right{ display:flex; gap: 10px; flex-wrap: wrap; }

.ppHint{ margin-top: 10px; }

/* Mobile: wizard più compatto */
@media (max-width: 960px){
  .ppGridHome{ grid-template-columns: 1fr; }
  .ppGrid{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  .ppAddRow{ flex-direction: column; align-items: stretch; }
  .ppAddRow--shooting{ grid-template-columns: 1fr; }
  .ppAddRow--env .ppScene{ max-width: 100%; }
  .ppActions{ flex-direction: column; align-items: stretch; }
  .ppActions__right{ width: 100%; justify-content: space-between; }
  .ppActions__right .chip{ flex: 1; }
}

/* Fix: rispetta l’attributo HTML hidden */
.overlay[hidden]{
  display: none !important;
}


/* ─────────────────────────────
   Piano di Produzione (Step wizard) – Step 2 additions
   ───────────────────────────── */

.ppStep{ display:none; }
.ppStep.is-active{ display:block; }

.ppCardHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}

.ppChecks{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ppGroup{
  border:1px solid var(--stroke);
  background: rgba(11,11,13,.48);
  border-radius: var(--r);
  padding: 12px;
}

.ppGroup__title{
  font-weight: 800;
  margin-bottom: 10px;
}

.ppCheck{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding: 6px 0;
}

.ppCheck input{
  margin-top: 2px;
  transform: scale(1.05);
}

.ppEquipment{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ppEqRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,255,255,.06);
}
.ppEqRow:last-child{ border-bottom: none; }

.ppEqName{ font-weight: 650; }
.ppEqCtrls{ display:flex; align-items:center; gap:8px; }
.ppQty{
  min-width: 34px;
  text-align:center;
  border:1px solid var(--stroke);
  background: rgba(28,28,34,.92);
  border-radius: 12px;
  padding: 6px 8px;
}

.ppTiny{ font-size: 13px; }

@media (max-width: 560px){
  .ppEqRow{
    align-items:flex-start;
    flex-direction:column;
  }
  .ppEqCtrls{
    width: 100%;
    justify-content:flex-end;
  }
}





/* =========================
   Piano di Produzione (Step 4) — Documento / Anteprima
   ========================= */

.ppStep4Wrap{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.ppDocPreview{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 14px;
  padding: 10px 0;
}

.ppDocPage{
  width: 820px;
  max-width: 92vw;
  aspect-ratio: 210 / 297;
  background: #ffffff;
  color: #111;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  overflow:hidden;
  cursor: zoom-in;
}

.ppDocPageInner{
  height: 100%;
  padding: 18px 20px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.ppDocHeader{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:start;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,.14);
}

.ppDocTitle{
  text-align:center;
  font-weight: 900;
  letter-spacing: .06em;
  font-size: 20px;
}

.ppDocMeta{
  margin-top: 6px;
  text-align:center;
  font-size: 11px;
  color: rgba(0,0,0,.60);
}

.ppDocLogo{
  width: 46px;
  height: 46px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  object-fit: cover;
  background: rgba(0,0,0,.04);
}

.ppDocSection{
  padding-top: 6px;
}

.ppDocSectionTitle{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,0,0,.72);
  margin-bottom: 6px;
}

.ppDocGrid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ppDocKV{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap: 8px;
  font-size: 12px;
  line-height: 1.35;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(0,0,0,.12);
}
.ppDocKV:last-child{ border-bottom:none; }
.ppDocK{ color: rgba(0,0,0,.55); font-weight: 700; }
.ppDocV{ color:#111; font-weight: 650; }

.ppDocBlock{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  padding: 10px;
  background: rgba(0,0,0,.03);
}

.ppDocBlockTitle{
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,0,0,.72);
  margin-bottom: 6px;
}

.ppDocText{
  font-size: 12px;
  line-height: 1.45;
  color:#111;
  white-space: pre-wrap;
}

.ppDocList{
  display:flex;
  flex-direction:column;
  gap: 4px;
  font-size: 12px;
  line-height: 1.35;
}

.ppDocListItem{
  display:flex;
  gap: 8px;
}
.ppDocListBullet{
  width: 10px;
  color: rgba(0,0,0,.55);
}

.ppDocFooter{
  margin-top:auto;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.14);
  display:flex;
  justify-content:space-between;
  font-size: 10px;
  color: rgba(0,0,0,.55);
}

/* Step 4 actions left group */
.ppActions__left{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Dialog viewer */
.ppDocDialog{
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  background: rgba(20,20,24,.98);
  color: var(--text);
  padding: 0;
  width: min(1100px, 96vw);
  box-shadow: var(--shadow);
}
.ppDocDialog::backdrop{ background: rgba(0,0,0,.65); }

.ppDocDialog__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom:1px solid var(--stroke);
}
.ppDocDialog__title{ font-weight: 900; }
.ppDocDialog__actions{ display:flex; gap: 8px; flex-wrap: wrap; }

.ppDocDialog__body{
  padding: 14px;
  max-height: min(80vh, 820px);
  overflow:auto;
}

.ppDocZoomArea{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 14px;
  transform-origin: top center;
}

@media (max-width: 560px){
  .ppDocPage{ border-radius: 12px; }
  .ppDocKV{ grid-template-columns: 110px 1fr; }
}


/* =========================
   Piano di Produzione — Elenco Produzioni (salvataggi)
   ========================= */

.ppPlansHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.ppPlansTools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.ppPlansTools .input{
  flex: 1;
  min-width: 220px;
}

.ppPlansToggle{
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--muted);
  user-select:none;
}

.ppPlansList{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 8px;
}

.ppPlanItem{
  border:1px solid var(--stroke);
  background: rgba(11,11,13,.48);
  border-radius: var(--r);
  padding: 12px;
}

.ppPlanTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 10px;
}

.ppPlanName{
  font-weight: 900;
}

.ppPlanMeta{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.ppPlanActions{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.ppStar{
  border:1px solid var(--stroke);
  background: rgba(28,28,34,.92);
  color: #111;
  border-radius: 12px;
  padding: 6px 10px;
  cursor:pointer;
  user-select:none;
  font-weight: 900;
}
.ppStar:hover{ border-color: rgba(179,18,23,.35); }

.ppStar.is-fav{
  background: #f6c945;
  border-color: rgba(246,201,69,.85);
  color: #111;
}

.ppPlanTag{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: rgba(28,28,34,.72);
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 560px){
  .ppPlanTop{ flex-direction: column; align-items: stretch; }
  .ppPlanActions{ justify-content: flex-start; }
}


/* ─────────────────────────────
   Step 2 — categorie apri/chiudi (fisarmonica)
   ───────────────────────────── */

.ppGroup{
  padding: 0;
  overflow: hidden;
}

.ppGroup__head{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align:left;
}
.ppGroup__head:hover{
  background: rgba(23,26,35,.35);
}

.ppGroup__right{
  display:flex;
  align-items:center;
  gap: 10px;
}

.ppGroup__count{
  min-width: 28px;
  height: 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(28,28,34,.92);
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}

.ppGroup__chev{
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
}

.ppGroup__body{
  padding: 0 12px 12px;
  border-top: 1px dashed rgba(255,255,255,.06);
}
.ppStep1Groups{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.ppGroup--step1 .ppGroup__body{
  padding: 12px;
}

.ppGroup--step1 .ppList[hidden]{
  display:none !important;
}

.ppStep3Groups{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.ppGroup--step3 .ppGroup__body{
  padding: 12px;
}

.ppGroup--step3 .ppList[hidden]{
  display:none !important;
}


/* Step 2 — input nome accanto ai ruoli (mostrato solo se selezionato) */
.ppCheck{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.ppCheck__label{
  flex: 1;
  min-width: 160px;
}

.ppNameInput{
  flex: 1;
  min-width: 220px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(28,28,34,.72);
  color: var(--text);
  outline: none;
}

.ppNameInput:focus{
  border-color: rgba(179,18,23,.35);
  box-shadow: 0 0 0 3px rgba(110,231,255,.08);
}


/* Step 1 — Personaggi: campo Attore */
.ppRow__main--wide{
  flex: 1;
  min-width: 220px;
}

.ppActorInput{
  margin-top: 8px;
  width: min(520px, 90vw);
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(28,28,34,.72);
  color: var(--text);
  outline: none;
}

.ppActorInput:focus{
  border-color: rgba(179,18,23,.35);
  box-shadow: 0 0 0 3px rgba(110,231,255,.08);
}

@media (max-width: 560px){
  .ppActorInput{ width: 100%; }
}


/* PdP — Dialog Salva (nome) */
.ppSaveActions{
  justify-content: flex-end;
  flex-wrap: wrap;
}

#ppSaveInfo{
  line-height: 1.5;
}


.storyboardGrid{
  align-items:start;
}

.storyboardShotsHeader,
.storyboardCanvasHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}

.storyboardShotActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.storyboardShotList{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
}

.storyboardShotBtn{
  width:100%;
  appearance:none;
  text-align:left;
  border:1px solid var(--stroke);
  background: rgba(11,11,13,.48);
  color:var(--text);
  border-radius:16px;
  padding:12px;
  cursor:pointer;
  transition: transform .08s ease, border-color .15s ease, background .15s ease;
}

.storyboardShotBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(179,18,23,.35);
}

.storyboardShotBtn.is-active{
  border-color: rgba(179,18,23,.70);
  box-shadow: 0 0 0 2px rgba(179,18,23,.12) inset;
  background: rgba(28,28,34,.92);
}

.storyboardShotBtn__title{
  display:block;
  font-weight:800;
  margin-bottom:4px;
}

.storyboardShotBtn__meta,
.storyboardMeta{
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}


.storyboardCanvasHeader__main{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
}

.storyboardShotNameField{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.storyboardShotNameField label{
  color:var(--muted);
  font-size:14px;
  font-weight:700;
  min-width:48px;
}

.storyboardShotNameField .input{
  width:min(420px, 100%);
  max-width:100%;
}

@media (max-width: 960px){
  .storyboardShotsHeader,
  .storyboardCanvasHeader{
    flex-direction:column;
    align-items:stretch;
  }
}


.storyboardPanelHeader{
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:nowrap;
  margin-bottom:16px;
}

.storyboardTitleRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
  flex:1 1 auto;
}

.storyboardTopActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
  min-width:0;
  margin-left:auto;
}

.storyboardTopActions .chip{
  white-space:nowrap;
}

.storyboardActionIconBtn{
  width:42px;
  height:42px;
  padding:0;
  flex:0 0 42px;
}

.storyboardActionIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
}

.storyboardActionIcon svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.storyboardActionIconBtn:hover .storyboardActionIcon svg,
.storyboardActionIconBtn:focus-visible .storyboardActionIcon svg{
  transform:scale(1.02);
}

.sbBtnLabel--mobile{
  display:none;
}

.storyboardCanvasCard{
  order:2;
}

.storyboardToolsCard{
  order:1;
}

.storyboardToolsDetails{
  border:1px solid var(--stroke);
  border-radius:16px;
  background: rgba(11,12,16,.24);
  overflow:visible;
}

.storyboardToolsSummary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  cursor:pointer;
  font-weight:800;
}

.storyboardToolsSummary::-webkit-details-marker{
  display:none;
}

.storyboardToolsBody{
  padding:0 14px 14px;
}


.storyboardNotesCard{
  margin-top:12px;
}

.storyboardNotesDetails{
  border:1px solid var(--stroke);
  border-radius:16px;
  background: rgba(11,12,16,.24);
  overflow:hidden;
}

.storyboardNotesSummary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  cursor:pointer;
  font-weight:800;
}

.storyboardNotesSummary::-webkit-details-marker{
  display:none;
}

.storyboardNotesBody{
  padding:0 14px 14px;
}

.storyboardNotesGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-bottom:12px;
}

.storyboardNotesStack{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.storyboardNotesField{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.storyboardNotesField label{
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}

.storyboardNotesField .input{
  width:100%;
  max-width:100%;
}

.storyboardNotesTextarea{
  resize:vertical;
  min-height:88px;
}

@media (max-width: 560px){
  .storyboardNotesGrid{
    grid-template-columns:1fr;
  }
}

.storyboardCanvasStage{
  position:relative;
}

.storyboardThirdsOverlay{
  position:absolute;
  inset:0;
  border-radius:16px;
  pointer-events:none;
  z-index:2;
  background-image:
    linear-gradient(to right,
      transparent calc(33.333% - 0.5px),
      rgba(17,17,17,.35) calc(33.333% - 0.5px),
      rgba(17,17,17,.35) calc(33.333% + 0.5px),
      transparent calc(33.333% + 0.5px),
      transparent calc(66.666% - 0.5px),
      rgba(17,17,17,.35) calc(66.666% - 0.5px),
      rgba(17,17,17,.35) calc(66.666% + 0.5px),
      transparent calc(66.666% + 0.5px)
    ),
    linear-gradient(to bottom,
      transparent calc(33.333% - 0.5px),
      rgba(17,17,17,.35) calc(33.333% - 0.5px),
      rgba(17,17,17,.35) calc(33.333% + 0.5px),
      transparent calc(33.333% + 0.5px),
      transparent calc(66.666% - 0.5px),
      rgba(17,17,17,.35) calc(66.666% - 0.5px),
      rgba(17,17,17,.35) calc(66.666% + 0.5px),
      transparent calc(66.666% + 0.5px)
    );
}

.storyboardToolsInline{
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px 0;
  flex-wrap:nowrap;
}

.storyboardToolsInline--compact{
  align-items:center;
}

.storyboardQuickTools{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex:1 1 auto;
  flex-wrap:wrap;
}

.storyboardQuickToolBtn{
  width:42px;
  height:42px;
  padding:0;
  flex:0 0 42px;
}

.storyboardQuickToolBtn__icon,
.storyboardToolControl__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
}

.storyboardQuickToolBtn__icon svg,
.storyboardToolControl__icon svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.storyboardToolOption.is-active,
.storyboardQuickToolBtn.is-active{
  border-color: rgba(179,18,23,.70);
  box-shadow: 0 0 0 2px rgba(179,18,23,.12) inset;
  background: rgba(127,13,18,.24);
}

.storyboardToolPopoverWrap{
  position:relative;
  min-width:0;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
}


.storyboardToolControl{
  min-height:42px;
  padding:9px 12px;
  gap:8px;
}

.storyboardToolControl__label{
  font-size:12px;
  color:var(--muted);
  line-height:1;
}

.storyboardToolControl__value{
  font-size:14px;
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.storyboardToolControl__value--size{
  min-width:2ch;
  text-align:center;
}

.storyboardToolControl--color{
  width:42px;
  height:42px;
  padding:0;
  border-radius:999px;
}

.storyboardColorSwatch{
  display:inline-flex;
  width:24px;
  height:24px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
  background:#111111;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
}

.storyboardToolControl--size{
  min-width:70px;
  justify-content:center;
}

.storyboardToolColorInput{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}

.storyboardToolPopover{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:5;
  border:1px solid var(--stroke);
  border-radius:16px;
  background:rgba(18,20,27,.98);
  box-shadow:var(--shadow);
}

.storyboardToolPopover[hidden]{
  display:none !important;
}

.storyboardToolPopover--menu{
  display:grid;
  gap:8px;
  min-width:180px;
  padding:10px;
}

.storyboardToolOption{
  width:100%;
  justify-content:flex-start;
}

.storyboardToolOption.is-active{
  border-color: rgba(179,18,23,.70);
  box-shadow: 0 0 0 2px rgba(179,18,23,.12) inset;
  background: rgba(127,13,18,.24);
}

.storyboardToolPopover--size{
  left:50%;
  transform:translateX(-50%);
  padding:12px 10px;
}

.storyboardToolRange{
  width:100%;
}

.storyboardToolRange--vertical{
  width:28px;
  height:132px;
  writing-mode: bt-lr;
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
}

.storyboardToolsGroups{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:12px 0 10px;
}

.storyboardGuideTools{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.storyboardGuideTools--actions{
  padding-top:2px;
}

.storyboardGuideBtn{
  min-height:40px;
}

.storyboardGuideBtn.is-active{
  border-color: rgba(179,18,23,.70);
  box-shadow: 0 0 0 2px rgba(179,18,23,.12) inset;
  background: rgba(127,13,18,.24);
}

.storyboardGuideBtn__icon{
  display:inline-flex;
  width:18px;
  height:18px;
}

.storyboardGuideBtn__icon svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.storyboardAspectWrap{
  position:relative;
}


.storyboardAspectMenu[hidden]{
  display:none !important;
}
.storyboardAspectMenu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:4;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-width:220px;
  padding:10px;
  border:1px solid var(--stroke);
  border-radius:16px;
  background: rgba(20,20,24,.98);
  box-shadow: var(--shadow);
}

.storyboardAspectOption{
  min-width:64px;
}

.storyboardAspectOption.is-active{
  border-color: rgba(179,18,23,.70);
  box-shadow: 0 0 0 2px rgba(179,18,23,.12) inset;
  background: rgba(127,13,18,.24);
}

.storyboardAspectOverlay{
  position:absolute;
  inset:0;
  border-radius:16px;
  pointer-events:none;
  z-index:3;
  overflow:hidden;
}

.storyboardAspectMask{
  position:absolute;
  background: rgba(0,0,0,.72);
}

.storyboardAspectMask--top{
  top:0;
  left:0;
  width:100%;
  height:var(--sb-mask-top, 0px);
}

.storyboardAspectMask--bottom{
  bottom:0;
  left:0;
  width:100%;
  height:var(--sb-mask-bottom, 0px);
}

.storyboardAspectMask--left{
  top:var(--sb-mask-top, 0px);
  bottom:var(--sb-mask-bottom, 0px);
  left:0;
  width:var(--sb-mask-left, 0px);
}

.storyboardAspectMask--right{
  top:var(--sb-mask-top, 0px);
  bottom:var(--sb-mask-bottom, 0px);
  right:0;
  width:var(--sb-mask-right, 0px);
}

@media (min-width: 961px){
  .storyboardCanvasCard{
    order:2;
  }

  .storyboardToolsCard{
    order:1;
  }

  .storyboardToolsDetails{
    border:none;
    border-radius:0;
    background:transparent;
    overflow:visible;
  }

  .storyboardToolsSummary{
    padding:0;
    margin:0 0 12px;
    cursor:default;
    pointer-events:none;
  }

  .storyboardToolsHint{
    display:none;
  }

  .storyboardToolsBody{
    padding:0;
  }
}

@media (max-width: 960px){
  .storyboardGrid{
    grid-template-columns:1fr;
  }

  .storyboardCanvasCard{
    order:1;
  }

  .storyboardToolsCard{
    order:2;
  }

  .storyboardTopActions{
    justify-content:flex-start;
  }

  .storyboardShotList{
    flex-direction:column;
    overflow-x:visible;
    padding-bottom:0;
    scroll-snap-type:none;
  }

  .storyboardShotBtn{
    min-width:0;
    width:100%;
    flex:none;
    scroll-snap-align:none;
  }
}

@media (max-width: 560px){
  .storyboardToolsInline{
    flex-wrap:wrap;
    gap:8px;
  }

  .storyboardQuickTools{
    order:1;
    flex:1 1 100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }


  .storyboardToolField--size input[type="range"]{
    min-width:0;
    width:100%;
  }

  .storyboardGuideBtn{
    width:auto;
  }

  .storyboardAspectMenu{
    left:auto;
    right:0;
    min-width:200px;
  }

  .storyboardPanelHeader{
    flex-wrap:wrap;
    align-items:center;
  }

  .storyboardPanelHeader h1{
    margin-bottom:4px;
  }

  .storyboardTopActions{
    margin-left:0;
    justify-content:flex-end;
    flex-wrap:wrap;
  }

  .storyboardTopActions .chip{
    width:42px;
    min-width:42px;
    padding:0;
  }

  .sbBtnLabel--desktop{
    display:none;
  }

  .sbBtnLabel--mobile{
    display:inline;
  }

  .storyboardShotActions{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    width:100%;
  }

  .storyboardShotActions .btnSmall{
    width:100%;
    min-width:0;
    padding:9px 8px;
    font-size:13px;
  }

  .storyboardShotList{
    margin-top:10px;
    gap:8px;
  }

  .storyboardShotBtn{
    min-width:0;
    width:100%;
    padding:10px;
  }

  .storyboardShotBtn__title{
    margin-bottom:2px;
    font-size:14px;
  }

  .storyboardShotBtn__meta,
  .storyboardMeta,
  .storyboardToolsHint{
    font-size:12px;
  }

  .storyboardShotNameField{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }

  .storyboardShotNameField label{
    min-width:0;
  }

  .storyboardShotNameField .input{
    width:100%;
  }

  .storyboardToolsSummary{
    padding:11px 12px;
  }

  .storyboardToolsBody{
    padding:0 12px 12px;
  }
}


.storyboardTitleRow h1{
  margin-bottom:0;
}

.storyboardLibraryDialog{
  width:min(780px, 94vw);
}

.storyboardLibraryHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.storyboardLibraryHint{
  margin:6px 0 0;
}

.storyboardLibraryTools{
  margin-bottom:12px;
}

.storyboardLibraryStatus{
  line-height:1.5;
}

.storyboardLibraryList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.storyboardLibraryItem{
  border:1px solid var(--stroke);
  background: rgba(11,11,13,.48);
  border-radius: var(--r);
  padding:12px;
}

.storyboardLibraryItemTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.storyboardLibraryName{
  font-weight:800;
}

.storyboardLibraryMeta{
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.storyboardLibraryActions,
.storyboardLibraryOrder{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.storyboardLibraryControls{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.storyboardSaveState{
  margin-top:8px;
  font-size:13px;
}

@media (max-width: 560px){
  .storyboardTitleRow{
    flex:1 1 100%;
    justify-content:flex-start;
  }

  .storyboardTitleRow #sbOpenLibrary{
    margin-left:0;
  }

  .storyboardLibraryHeader,
  .storyboardLibraryItemTop{
    flex-direction:column;
    align-items:stretch;
  }

  .storyboardLibraryControls{
    justify-content:flex-start;
  }
}


.storyboardGuideBtn.is-selected{
  border-color: rgba(179,18,23,.7);
  box-shadow: 0 0 0 2px rgba(179,18,23,.12) inset;
}

.canvasWrap{
  touch-action:none;
}


.storyboardGuideBtn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
}

.storyboardGuideBtn--danger.is-active,
.storyboardGuideBtn--danger:not(:disabled):hover{
  border-color: rgba(255,107,107,.65);
  box-shadow: 0 0 0 2px rgba(255,107,107,.12) inset;
}

.storyboardGuideBtn--neutral:not(:disabled):hover,
.storyboardGuideBtn--neutral.is-active{
  border-color: rgba(179,18,23,.65);
  box-shadow: 0 0 0 2px rgba(179,18,23,.12) inset;
}

.storyboardGuideBtn--warning:not(:disabled):hover,
.storyboardGuideBtn--warning.is-active{
  border-color: rgba(245,158,11,.65);
  box-shadow: 0 0 0 2px rgba(245,158,11,.14) inset;
}


.storyboardShapeMenuWrap{
  position:relative;
}

.storyboardLineOption.is-active,
.storyboardArrowOption.is-active,
.storyboardCircleOption.is-active{
  border-color: rgba(179,18,23,.70);
  box-shadow: 0 0 0 2px rgba(179,18,23,.12) inset;
  background: rgba(127,13,18,.24);
}

.storyboardGuideBtn--neutral:disabled{
  opacity:.45;
}

.storyboardShapeMenu[hidden]{
  display:none !important;
}

.storyboardCircleOption.is-active{
  border-color: rgba(179,18,23,.70);
  box-shadow: 0 0 0 2px rgba(179,18,23,.12) inset;
  background: rgba(127,13,18,.24);
}


.storyboardGuideBtn--text .storyboardGuideBtn__icon svg{
  stroke-width:2.1;
}


.storyboardTextToolbar{
  position:absolute;
  z-index:8;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--stroke);
  border-radius:14px;
  background:rgba(18,20,27,.96);
  box-shadow: var(--shadow);
  max-width:calc(100% - 16px);
}
.storyboardTextToolbar[hidden]{
  display:none !important;
}
.storyboardTextToolbar__size{
  width:72px;
  min-width:72px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(11,12,16,.55);
  color:var(--text);
}
.storyboardTextToolbar__select{
  min-width:116px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(11,12,16,.55);
  color:var(--text);
}
.storyboardTextToolbar__color{
  width:44px;
  min-width:44px;
  height:40px;
  padding:2px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(11,12,16,.55);
}
.storyboardTextToolbar__popoverWrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.storyboardTextToolbar__popover{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:2;
  border:1px solid var(--stroke);
  border-radius:14px;
  background:rgba(18,20,27,.98);
  box-shadow:var(--shadow);
}
.storyboardTextToolbar__popover[hidden]{
  display:none !important;
}
.storyboardTextToolbar__alignMenu{
  display:flex;
  gap:6px;
  padding:8px;
}
.storyboardTextToolbar__opacityPopover{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:10px 8px;
  left:50%;
  transform:translateX(-50%);
}
.storyboardTextToolbar__range{
  width:92px;
}
.storyboardTextToolbar__range--vertical{
  width:34px;
  height:120px;
  writing-mode: bt-lr;
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
}
.storyboardTextToolbar__opacityValue{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}
.storyboardTextToolbar__btn{
  min-width:40px;
  height:40px;
  padding:0 10px;
  font-weight:800;
}
.storyboardTextToolbar__alignToggle{
  padding:0 12px;
}
.storyboardTextToolbar__opacityToggle{
  min-width:58px;
  padding:0 10px;
  font-size:12px;
}
.storyboardAlignIcon{
  width:16px;
  height:14px;
  display:inline-flex;
  flex-direction:column;
  justify-content:space-between;
}
.storyboardAlignIcon span{
  display:block;
  height:2px;
  border-radius:999px;
  background:currentColor;
  width:100%;
}
.storyboardTextToolbar__btn[data-align="left"] .storyboardAlignIcon span:nth-child(1),
.storyboardTextToolbar__alignToggle[data-align="left"] .storyboardAlignIcon span:nth-child(1){ width:100%; margin-right:auto; }
.storyboardTextToolbar__btn[data-align="left"] .storyboardAlignIcon span:nth-child(2),
.storyboardTextToolbar__alignToggle[data-align="left"] .storyboardAlignIcon span:nth-child(2){ width:76%; margin-right:auto; }
.storyboardTextToolbar__btn[data-align="left"] .storyboardAlignIcon span:nth-child(3),
.storyboardTextToolbar__alignToggle[data-align="left"] .storyboardAlignIcon span:nth-child(3){ width:58%; margin-right:auto; }
.storyboardTextToolbar__btn[data-align="center"] .storyboardAlignIcon span:nth-child(1),
.storyboardTextToolbar__alignToggle[data-align="center"] .storyboardAlignIcon span:nth-child(1){ width:100%; margin-left:auto; margin-right:auto; }
.storyboardTextToolbar__btn[data-align="center"] .storyboardAlignIcon span:nth-child(2),
.storyboardTextToolbar__alignToggle[data-align="center"] .storyboardAlignIcon span:nth-child(2){ width:76%; margin-left:auto; margin-right:auto; }
.storyboardTextToolbar__btn[data-align="center"] .storyboardAlignIcon span:nth-child(3),
.storyboardTextToolbar__alignToggle[data-align="center"] .storyboardAlignIcon span:nth-child(3){ width:58%; margin-left:auto; margin-right:auto; }
.storyboardTextToolbar__btn[data-align="right"] .storyboardAlignIcon span:nth-child(1),
.storyboardTextToolbar__alignToggle[data-align="right"] .storyboardAlignIcon span:nth-child(1){ width:100%; margin-left:auto; }
.storyboardTextToolbar__btn[data-align="right"] .storyboardAlignIcon span:nth-child(2),
.storyboardTextToolbar__alignToggle[data-align="right"] .storyboardAlignIcon span:nth-child(2){ width:76%; margin-left:auto; }
.storyboardTextToolbar__btn[data-align="right"] .storyboardAlignIcon span:nth-child(3),
.storyboardTextToolbar__alignToggle[data-align="right"] .storyboardAlignIcon span:nth-child(3){ width:58%; margin-left:auto; }
.storyboardTextToolbar__btn--italic{ font-style:italic; }
.storyboardTextToolbar__btn--underline{ text-decoration:underline; }
.storyboardTextToolbar__btn.is-active{
  border-color: rgba(179,18,23,.70);
  box-shadow: 0 0 0 2px rgba(179,18,23,.12) inset;
}
@media (max-width: 560px){
  .storyboardTextToolbar{
    position: static;
    left: auto !important;
    top: auto !important;
    z-index: 4;
    gap:6px;
    padding:7px 8px;
    flex-wrap:wrap;
    width:100%;
    max-width:100%;
    margin:0 0 8px;
  }
  .storyboardTextToolbar__size{
    width:64px;
    min-width:64px;
  }
  .storyboardTextToolbar__select{
    min-width:98px;
  }
  .storyboardTextToolbar__opacityToggle{
    min-width:52px;
  }
  .storyboardTextToolbar__range--vertical{
    height:110px;
  }
  .storyboardTextToolbar__btn{
    min-width:36px;
    height:36px;
  }
}

#sbTextLabel.is-active{
  color: var(--text);
}


.storyboardTextToolbar__color--bg{
  position:relative;
}
.storyboardTextToolbar__color--bg::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.22);
  pointer-events:none;
}


.storyboardTextToolbar__sizeWrap{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.storyboardTextToolbar__sizeStep{
  display:none;
  min-width:34px;
  width:34px;
  height:34px;
  padding:0;
  font-size:20px;
  line-height:1;
}
.storyboardTextToolbar__size{
  width:72px;
  min-width:72px;
  text-align:center;
}

@media (max-width: 560px){
  .storyboardTextToolbar__sizeWrap{
    display:grid;
    grid-template-columns:36px minmax(52px,auto) 36px;
    align-items:center;
    gap:6px;
  }
  .storyboardTextToolbar__sizeStep{
    display:inline-flex;
  }
  .storyboardTextToolbar__size{
    width:100%;
    min-width:0;
    text-align:center;
    -moz-appearance:textfield;
  }
  .storyboardTextToolbar__size::-webkit-outer-spin-button,
  .storyboardTextToolbar__size::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
  }
}

.storyboardToolControl--size,
.storyboardToolControl--color{
  text-align:left;
}

@media (max-width: 720px){
  .storyboardToolsInline--compact{
    gap:8px;
  }
  .storyboardQuickTools{
    gap:6px;
  }
  .storyboardQuickToolBtn,
  .storyboardToolControl--color{
    width:40px;
    height:40px;
    flex-basis:40px;
  }
  .storyboardToolControl{
    min-height:40px;
    padding:8px 10px;
  }
  .storyboardToolControl__value{
    font-size:13px;
  }
  .storyboardToolControl--size{
    min-width:64px;
  }
}


.storyboardDecoupageCard{
  margin-top:12px;
}

.storyboardDecoupageDetails{
  border:1px solid var(--stroke);
  border-radius:16px;
  background: rgba(11,12,16,.24);
  overflow:hidden;
}

.storyboardDecoupageSummary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  cursor:pointer;
  font-weight:800;
}

.storyboardDecoupageSummary::-webkit-details-marker{
  display:none;
}

.storyboardDecoupageBody{
  padding:0 14px 14px;
}

.storyboardDecoupageLayout{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  align-items:start;
  margin-bottom:10px;
}

.storyboardDecoupageTools{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.storyboardDecoupageTools .storyboardGuideBtn{
  min-width:54px;
}

.storyboardDecoupageStage{
  min-width:0;
}

.storyboardDecoupageWrap{
  max-width: min(100%, 640px);
  aspect-ratio:1 / 1;
}

.storyboardDecoupageWrap canvas{
  width:100%;
  height:100%;
  aspect-ratio:1 / 1;
}

@media (max-width: 720px){
  .storyboardDecoupageLayout{
    grid-template-columns:1fr;
  }
  .storyboardDecoupageTools{
    flex-direction:row;
    flex-wrap:wrap;
  }
  .storyboardDecoupageTools .storyboardGuideBtn{
    min-width:46px;
  }
}


.storyboardCanvasCard,
.storyboardDecoupageCard,
.storyboardSurfaceCard{
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.storyboardCanvasCard.is-active-surface,
.storyboardDecoupageCard.is-active-surface,
.storyboardSurfaceCard.is-active-surface{
  border-color: rgba(110,231,255,.78);
  box-shadow: 0 0 0 2px rgba(110,231,255,.14) inset, var(--shadow);
}

.storyboardCanvasCard.is-active-surface .storyboardCanvasHeader h3,
.storyboardDecoupageCard.is-active-surface summary,
.storyboardSurfaceCard.is-active-surface summary{
  color: var(--accent);
}


.storyboardDecQuickWrap{
  position:relative;
}

.storyboardDecQuickBtn{
  min-width:54px;
  font-weight:800;
  letter-spacing:.03em;
}

.storyboardDecQuickMenu{
  min-width:196px;
  max-width:220px;
}

.storyboardDecLetterOption:hover,
.storyboardDecLetterOption:focus-visible,
.storyboardDecNumberOption:hover,
.storyboardDecNumberOption:focus-visible{
  border-color: rgba(179,18,23,.70);
  box-shadow: 0 0 0 2px rgba(179,18,23,.12) inset;
  background: rgba(127,13,18,.24);
}

@media (max-width: 720px){
  .storyboardDecQuickMenu{
    left:0;
    right:auto;
    min-width:180px;
  }
}


/* =========================
   Storyboard — layout desktop più ampio
   ========================= */
.panel--storyboard{
  padding-inline: 22px;
}

.panel--storyboard .storyboardSceneCard,
.panel--storyboard .storyboardMainColumn,
.panel--storyboard .storyboardToolsCard,
.panel--storyboard .storyboardDecoupageCard,
.panel--storyboard .storyboardCanvasCard,
.panel--storyboard .storyboardNotesCard,
.panel--storyboard .storyboardShotsCard{
  width: 100%;
  max-width: 100%;
}

.panel--storyboard .storyboardGrid{
  grid-template-columns: minmax(0, 1fr);
}

.panel--storyboard .storyboardMainColumn{
  width: 100%;
  min-width: 0;
}

.panel--storyboard .storyboardSceneField .input,
.panel--storyboard .storyboardShotNameField .input,
.panel--storyboard .storyboardNotesField .input,
.panel--storyboard .storyboardNotesTextarea{
  width: 100%;
  max-width: 100%;
}

.panel--storyboard .storyboardCanvasCard .canvasWrap,
.panel--storyboard .storyboardDecoupageWrap{
  width: 100%;
  max-width: 100%;
}

@media (min-width: 961px){
  .panel--storyboard{
    padding-inline: 24px;
  }

  .panel--storyboard .storyboardSceneCard,
  .panel--storyboard .storyboardMainColumn{
    max-width: none;
  }

  .panel--storyboard .storyboardCanvasStage,
  .panel--storyboard .storyboardNotesBody,
  .panel--storyboard .storyboardToolsBody,
  .panel--storyboard .storyboardDecoupageBody{
    width: 100%;
  }

  .panel--storyboard .storyboardDecoupageWrap{
    max-width: min(100%, 880px);
  }
}

@media (max-width: 960px){
  .panel--storyboard{
    padding-inline: 16px;
  }
}


@media (max-width: 560px){
  .storyboardTopActions{
    justify-content:flex-end;
  }
}


/* Storyboard tools — correzione centratura icone + colore */
.storyboardQuickToolBtn,
.storyboardToolControl--color{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.storyboardQuickToolBtn{
  text-align:center;
}

.storyboardQuickToolBtn__icon,
.storyboardToolControl__icon,
.storyboardToolControl--color .storyboardColorSwatch{
  margin:0;
  flex:0 0 auto;
}

.storyboardQuickToolBtn__icon,
.storyboardToolControl__icon{
  width:20px;
  height:20px;
}

.storyboardQuickToolBtn .storyboardQuickToolBtn__icon,
.storyboardQuickToolBtn .storyboardQuickToolBtn__icon svg{
  display:block;
}

.storyboardQuickToolBtn .storyboardQuickToolBtn__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.storyboardToolPopoverWrap--color{
  position:relative;
}

.storyboardToolControl--color{
  position:relative;
  overflow:visible;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.storyboardToolControl--color::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:inherit;
  pointer-events:none;
}

.storyboardColorSwatch{
  width:22px;
  height:22px;
}

@media (max-width: 720px){
  .storyboardQuickToolBtn,
  .storyboardToolControl--color{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}

/* Storyboard tools — colore e spessore accanto ai quick tools */
.storyboardQuickTools .storyboardToolPopoverWrap--color,
.storyboardQuickTools .storyboardToolPopoverWrap--size{
  margin-left:0;
}

.storyboardQuickTools .storyboardToolPopoverWrap--size .storyboardToolPopover--size{
  left:50%;
  right:auto;
  transform:translateX(-50%);
}

@media (max-width: 720px){
  .storyboardQuickTools{
    gap:6px;
  }
}


/* --- Storyboard icon fixes after SDAC polish --- */
.storyboardTopActions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.storyboardActionIconBtn{
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  padding:0;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  flex:0 0 auto;
}

.storyboardActionIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  line-height:0;
  flex:0 0 18px;
}

.storyboardActionIcon svg{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
}

.storyboardActionIconBtn .sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.storyboardQuickTools{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.storyboardQuickToolBtn,
.storyboardToolControl--color,
.storyboardToolControl--size{
  width:42px;
  min-width:42px;
  height:42px;
  min-height:42px;
  padding:0;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.storyboardQuickToolBtn__icon,
.storyboardToolControl__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  line-height:0;
  flex:0 0 18px;
}

.storyboardQuickToolBtn__icon svg,
.storyboardToolControl__icon svg{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
}

.storyboardToolControl--color{
  position:relative;
}

.storyboardToolControl--color .storyboardColorSwatch{
  width:20px;
  height:20px;
}

.storyboardToolControl--size{
  gap:4px;
}

.storyboardToolControl__value--size{
  min-width:auto;
  font-size:13px;
  line-height:1;
}

@media (max-width: 560px){
  .storyboardTopActions{
    display:flex;
    justify-content:flex-start;
    gap:8px;
  }

  .storyboardActionIconBtn{
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
  }

  .storyboardQuickToolBtn,
  .storyboardToolControl--color,
  .storyboardToolControl--size{
    width:40px;
    min-width:40px;
    height:40px;
    min-height:40px;
  }
}


.card--install{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap: 10px;
}

.card--install .panel__actions{
  margin-top: 6px;
}

#btnInstallApp[disabled]{
  opacity: .72;
  cursor: default;
}

/* =========================
   Taccuino film — condivisione e liste ricevute
   ========================= */

.nbTopActions{
  justify-content:flex-end;
}

.nbNotebookCard{
  overflow: hidden;
}

.nbSectionHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

.nbSectionHeadActions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nbSearchWrap{
  width: min(420px, 100%);
}

.nbSearchInput{
  width: 100%;
  max-width: 100%;
}


.nbInfoText{
  margin:12px 0 0;
  line-height:1.55;
}

.nbBadges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}

.nbBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(28,28,34,.72);
  color: var(--muted);
  font-size:12px;
  line-height:1;
}

.nbBadge--official{
  border-color: rgba(179,18,23,.42);
  color: var(--text);
}

.nbSource{
  margin-top:8px;
}

.nbMeta--statusRow{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.nbStatusBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:12px;
  font-weight:800;
  line-height:1;
  letter-spacing:.01em;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}

.nbStatusBadge--watched{
  color:#d8fce4;
  background:rgba(34,197,94,.22);
  border-color:rgba(74,222,128,.34);
}

.nbStatusBadge--towatch{
  color:#ffe2e2;
  background:rgba(239,68,68,.20);
  border-color:rgba(248,113,113,.34);
}

.nbDialogWide{
  width:min(860px, 94vw);
}

.nbDialogHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.nbDialogHeadActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nbDialogSummary{
  line-height:1.55;
  margin-bottom:12px;
}

.nbDialogCard{
  margin-top:8px;
}

.nbDialogPreviewTitle{
  font-weight:800;
  margin-bottom:6px;
}

.nbDialogActionsWrap{
  flex-wrap:wrap;
}

.nbReceivedList,
.nbPreviewItems{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.nbReceivedItem,
.nbPreviewItem{
  border:1px solid var(--stroke);
  background: rgba(11,11,13,.48);
  border-radius: var(--r);
  padding:12px;
}

.nbReceivedItem__top,
.nbPreviewItem__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.nbReceivedItem__meta,
.nbPreviewItem__meta{
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
  margin-top:6px;
}

.nbReceivedItem__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nbPreviewItem__title,
.nbReceivedItem__title{
  font-weight:800;
}

.nbPreviewNote{
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

@media (max-width: 560px){
  .nbTopActions{
    justify-content:flex-start;
  }

  .nbDialogHead,
  .nbReceivedItem__top,
  .nbPreviewItem__top{
    flex-direction:column;
    align-items:stretch;
  }

  .nbDialogHeadActions,
  .nbReceivedItem__actions{
    justify-content:flex-start;
  }
}
.nbReceivedList{
  max-height:min(58vh, 520px);
  overflow:auto;
  padding-right:4px;
}

.nbPreviewItems{
  max-height:min(62vh, 560px);
  overflow:auto;
  padding-right:4px;
}


/* =========================
   Piano di Produzione — Step colorati (delicati)
   ========================= */
.panel[data-panel="start"] .ppStep{
  --pp-step-border-local: rgba(255,255,255,.08);
  --pp-step-bg-local: rgba(28,28,34,.92);
  --pp-step-bg-strong-local: rgba(28,28,34,.96);
  --pp-step-title-local: var(--text);
}

.panel[data-panel="start"] .ppStep[data-step="1"]{
  --pp-step-border-local: rgba(184,131,47,.30);
  --pp-step-bg-local: rgba(184,131,47,.10);
  --pp-step-bg-strong-local: rgba(184,131,47,.13);
  --pp-step-title-local: #f2dfc2;
}

.panel[data-panel="start"] .ppStep[data-step="2"]{
  --pp-step-border-local: rgba(78,111,150,.30);
  --pp-step-bg-local: rgba(78,111,150,.10);
  --pp-step-bg-strong-local: rgba(78,111,150,.13);
  --pp-step-title-local: #dbe8f8;
}

.panel[data-panel="start"] .ppStep[data-step="3"]{
  --pp-step-border-local: rgba(63,124,112,.30);
  --pp-step-bg-local: rgba(63,124,112,.10);
  --pp-step-bg-strong-local: rgba(63,124,112,.13);
  --pp-step-title-local: #d9f1eb;
}

.panel[data-panel="start"] .ppStep[data-step="4"]{
  --pp-step-border-local: rgba(122,90,154,.30);
  --pp-step-bg-local: rgba(122,90,154,.10);
  --pp-step-bg-strong-local: rgba(122,90,154,.13);
  --pp-step-title-local: #eadcf9;
}

.panel[data-panel="start"] .ppStep .ppStepTitle{
  color: var(--pp-step-title-local);
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}

.panel[data-panel="start"] .ppStep .card,
.panel[data-panel="start"] .ppStep .ppGroup,
.panel[data-panel="start"] .ppStep .ppStep4Wrap{
  border-color: var(--pp-step-border-local);
  background:
    linear-gradient(180deg, var(--pp-step-bg-local), rgba(28,28,34,.94) 72%),
    rgba(28,28,34,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 12px 28px rgba(0,0,0,.16);
}

.panel[data-panel="start"] .ppStep .ppGroup__head:hover{
  background: var(--pp-step-bg-local);
}

.panel[data-panel="start"] .ppStep .ppGroup__count,
.panel[data-panel="start"] .ppStep .ppCount{
  border-color: var(--pp-step-border-local);
  background: var(--pp-step-bg-strong-local);
}

.panel[data-panel="start"] .ppStep .ppMini:hover,
.panel[data-panel="start"] .ppStep .btnSmall:hover{
  border-color: var(--pp-step-border-local);
  box-shadow: 0 0 0 2px var(--pp-step-bg-local) inset;
}

.panel[data-panel="start"] .ppStep[data-step="4"] .ppStep4Wrap{
  padding: 14px;
  border-radius: var(--r);
}

.panel[data-panel="start"] .ppStep[data-step="4"] .ppDocPreview{
  padding: 8px 0 2px;
}

@media (max-width: 560px){
  .panel[data-panel="start"] .ppStep .card,
  .panel[data-panel="start"] .ppStep .ppGroup,
  .panel[data-panel="start"] .ppStep .ppStep4Wrap{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.03),
      0 8px 20px rgba(0,0,0,.14);
  }
}

/* =========================
   Piano di Produzione — Pulsanti step colorati
   ========================= */
.panel[data-panel="start"] .ppStep .chip{
  transition: transform .08s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
}

.panel[data-panel="start"] .ppStep[data-step="1"] #ppNext{
  border-color: rgba(184,131,47,.52);
  background: linear-gradient(180deg, rgba(184,131,47,.24), rgba(28,28,34,.92));
  box-shadow: 0 0 0 2px rgba(184,131,47,.12) inset;
  color: #f7ead1;
}
.panel[data-panel="start"] .ppStep[data-step="1"] #ppNext:hover,
.panel[data-panel="start"] .ppStep[data-step="1"] #ppNext:focus-visible{
  border-color: var(--pp-step-1);
  box-shadow: 0 0 0 3px var(--pp-step-1-soft), 0 0 0 2px rgba(184,131,47,.12) inset;
}

.panel[data-panel="start"] .ppStep[data-step="2"] #ppPrev2,
.panel[data-panel="start"] .ppStep[data-step="2"] #ppNext2{
  border-color: rgba(78,111,150,.52);
  background: linear-gradient(180deg, rgba(78,111,150,.22), rgba(28,28,34,.92));
  box-shadow: 0 0 0 2px rgba(78,111,150,.12) inset;
  color: #e4eefb;
}
.panel[data-panel="start"] .ppStep[data-step="2"] #ppPrev2:hover,
.panel[data-panel="start"] .ppStep[data-step="2"] #ppPrev2:focus-visible,
.panel[data-panel="start"] .ppStep[data-step="2"] #ppNext2:hover,
.panel[data-panel="start"] .ppStep[data-step="2"] #ppNext2:focus-visible{
  border-color: var(--pp-step-2);
  box-shadow: 0 0 0 3px var(--pp-step-2-soft), 0 0 0 2px rgba(78,111,150,.12) inset;
}

.panel[data-panel="start"] .ppStep[data-step="3"] #ppPrev3,
.panel[data-panel="start"] .ppStep[data-step="3"] #ppNext3{
  border-color: rgba(63,124,112,.52);
  background: linear-gradient(180deg, rgba(63,124,112,.22), rgba(28,28,34,.92));
  box-shadow: 0 0 0 2px rgba(63,124,112,.12) inset;
  color: #e2f4ef;
}
.panel[data-panel="start"] .ppStep[data-step="3"] #ppPrev3:hover,
.panel[data-panel="start"] .ppStep[data-step="3"] #ppPrev3:focus-visible,
.panel[data-panel="start"] .ppStep[data-step="3"] #ppNext3:hover,
.panel[data-panel="start"] .ppStep[data-step="3"] #ppNext3:focus-visible{
  border-color: var(--pp-step-3);
  box-shadow: 0 0 0 3px var(--pp-step-3-soft), 0 0 0 2px rgba(63,124,112,.12) inset;
}

.panel[data-panel="start"] .ppStep[data-step="4"] #ppPrev4{
  border-color: rgba(122,90,154,.52);
  background: linear-gradient(180deg, rgba(122,90,154,.22), rgba(28,28,34,.92));
  box-shadow: 0 0 0 2px rgba(122,90,154,.12) inset;
  color: #efe4fb;
}
.panel[data-panel="start"] .ppStep[data-step="4"] #ppPrev4:hover,
.panel[data-panel="start"] .ppStep[data-step="4"] #ppPrev4:focus-visible{
  border-color: var(--pp-step-4);
  box-shadow: 0 0 0 3px var(--pp-step-4-soft), 0 0 0 2px rgba(122,90,154,.12) inset;
}


/* =========================
   Abbonamento / Checkout
   ========================= */

.badge--premium{
  border-color: rgba(246,201,69,.55);
  box-shadow: 0 0 0 2px rgba(246,201,69,.12) inset;
}

.badge--pending{
  border-color: rgba(91,181,255,.48);
  box-shadow: 0 0 0 2px rgba(91,181,255,.10) inset;
}

.badge--owner{
  border-color: rgba(168,132,255,.55);
  box-shadow: 0 0 0 2px rgba(168,132,255,.12) inset;
}

.overlay__panel--wide{
  width: min(980px, 96vw);
}

.overlay__panel--subscribe{
  background:
    linear-gradient(180deg, rgba(20,20,24,.98), rgba(16,16,20,.98)),
    radial-gradient(900px 450px at 10% 0%, rgba(179,18,23,.10), transparent 58%);
}

.subscribeFlow{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.subHero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:16px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  background: linear-gradient(180deg, rgba(179,18,23,.10), rgba(20,20,24,.12));
}

.subHero h3{
  margin: 4px 0 8px;
  font-size: 24px;
}

.subHero p{
  margin:0;
  color: var(--muted);
  line-height:1.6;
}

.subHero__eyebrow{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#f1d3d4;
}

.subHero__cta{
  flex:0 0 auto;
}

.subNotice{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:12px 14px;
  line-height:1.5;
}

.subNotice--feature{
  background: rgba(91,181,255,.12);
  border-color: rgba(91,181,255,.24);
}

.subPlansGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}

.subCard{
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:16px;
  background: rgba(11,11,13,.44);
}

.subCard h4{
  margin:10px 0 12px;
}

.subCard__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.03em;
  border:1px solid rgba(255,255,255,.10);
}

.subCard--free{
  background: linear-gradient(180deg, rgba(91,181,255,.10), rgba(11,11,13,.44));
  border-color: rgba(91,181,255,.22);
}
.subCard--free .subCard__badge{
  background: rgba(91,181,255,.16);
  border-color: rgba(91,181,255,.26);
  color:#dff2ff;
}

.subCard--premium{
  background: linear-gradient(180deg, rgba(246,201,69,.10), rgba(11,11,13,.44));
  border-color: rgba(246,201,69,.24);
}
.subCard--premium .subCard__badge{
  background: rgba(246,201,69,.16);
  border-color: rgba(246,201,69,.30);
  color:#fff1bf;
}

.subCard--lessons{
  background: linear-gradient(180deg, rgba(122,90,154,.12), rgba(11,11,13,.44));
  border-color: rgba(122,90,154,.24);
}
.subCard--lessons .subCard__badge{
  background: rgba(122,90,154,.18);
  border-color: rgba(122,90,154,.30);
  color:#ead9ff;
}

.subList{
  margin:0;
  padding-left:18px;
  color: var(--muted);
  line-height:1.55;
}

.subList li + li{
  margin-top:7px;
}

.subSignupCard{
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:16px;
  background: rgba(11,11,13,.40);
}

.subSignupCard__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:12px;
}

.subSignupCard__head h4{
  margin:0 0 6px;
}

.subSignupCard__head p{
  margin:0;
  line-height:1.55;
}

.subStatusBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:120px;
  min-height:34px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(28,28,34,.92);
  font-weight:800;
}

.subAuthGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}

.subForm--compact{
  gap:12px;
}

.subAccountGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-bottom:14px;
}

.subAccountItem{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(28,28,34,.56);
}

.subAccountItem span{
  color: var(--muted);
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.subAccountItem strong{
  font-size:15px;
  line-height:1.4;
}

.subChoiceCard.is-disabled{
  opacity:.56;
  cursor:not-allowed;
  transform:none !important;
}

.subChoiceCard.is-disabled:hover{
  border-color: rgba(255,255,255,.08);
}

@media (max-width: 960px){
  .subAuthGrid,
  .subAccountGrid{
    grid-template-columns: 1fr;
  }
}

.subForm{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.subFormGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}

.subField{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.subField span{
  color: var(--muted);
  font-size:13px;
  font-weight:700;
}

.subField .input{
  width:100%;
  max-width:100%;
}

.subChoiceGroup{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.subChoiceGroup__label{
  color: var(--muted);
  font-size:13px;
  font-weight:700;
}

.subChoiceRow{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}

.subChoiceCard{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(28,28,34,.72);
  cursor:pointer;
  transition: transform .08s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.subChoiceCard:hover{
  transform: translateY(-1px);
  border-color: rgba(179,18,23,.35);
}

.subChoiceCard input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.subChoiceCard.is-selected{
  border-color: rgba(179,18,23,.55);
  background: rgba(127,13,18,.16);
  box-shadow: 0 0 0 2px rgba(179,18,23,.12) inset;
}

.subChoiceCard__main{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.subChoiceCard__main strong{
  font-size:14px;
}

.subChoiceCard__main small{
  color: var(--muted);
  line-height:1.4;
}

.subChoiceCard__tag{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 8px;
  border-radius:999px;
  background: rgba(246,201,69,.12);
  border:1px solid rgba(246,201,69,.24);
  color:#fff1bf;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.subActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.subNoteList{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 14px;
  border-radius:16px;
  border:1px dashed rgba(255,255,255,.10);
  background: rgba(20,20,24,.35);
}

.subNoteList p{
  margin:0;
  line-height:1.55;
}

.subInlineMessage{
  min-height:54px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(28,28,34,.72);
  padding:12px 14px;
  line-height:1.5;
}

.subInlineMessage.is-info{
  background: rgba(91,181,255,.12);
  border-color: rgba(91,181,255,.22);
}

.subInlineMessage.is-success{
  background: rgba(70,180,120,.12);
  border-color: rgba(70,180,120,.22);
}

.subInlineMessage.is-warning{
  background: rgba(246,201,69,.12);
  border-color: rgba(246,201,69,.22);
}

.subInlineMessage.is-error{
  background: rgba(220,78,78,.12);
  border-color: rgba(220,78,78,.24);
}

@media (max-width: 960px){
  .subPlansGrid,
  .subFormGrid,
  .subChoiceRow{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px){
  .subHero,
  .subSignupCard__head{
    flex-direction:column;
    align-items:stretch;
  }

  .subHero__cta,
  .subStatusBadge{
    align-self:flex-start;
  }
}


.subPlansGrid--settings{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.subFormGrid--owner{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 780px){
  .subPlansGrid--settings{
    grid-template-columns: 1fr;
  }
  .subFormGrid--owner{
    grid-template-columns: 1fr;
  }
}


/* =========================
   Topbar — account collegato compatto
   ========================= */
.topbar__right{
  min-width: 0;
  flex-wrap: nowrap;
}

.topbarAccount{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 42px;
  max-width: 180px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(28,28,34,.92);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  transition: transform .14s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.topbarAccount[hidden]{
  display:none !important;
}

.topbarAccount--disconnected{
  color: var(--muted);
  background: rgba(28,28,34,.72);
  border-color: rgba(255,255,255,.08);
}

.topbarAccount:hover{
  background: rgba(36,36,44,.96);
  border-color: rgba(255,255,255,.16);
}

.topbarAccount:active{
  transform: translateY(1px);
}

.topbarAccount:focus-visible{
  outline:none;
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 0 3px rgba(179,18,23,.22);
}


@media (max-width: 720px){
  .topbar__right{
    gap: 8px;
  }

  .topbarAccount{
    max-width: 120px;
    min-height: 40px;
    padding: 0 10px;
    font-size: 12px;
  }
}

@media (max-width: 560px){
  .topbarAccount{
    max-width: 96px;
    min-height: 40px;
    padding: 0 9px;
    font-size: 12px;
  }
}

@media (max-width: 560px){
  .topbar{ padding: 10px 10px; }
  .topbar__center{ display:none; }
}

.panel.is-active h1{
  text-shadow:0 0 22px var(--tool-shadow);
}

.panel.is-active h1::after{
  content:"";
  display:block;
  width:46px;
  height:3px;
  margin-top:8px;
  border-radius:999px;
  background:var(--tool-color);
  box-shadow:0 0 16px var(--tool-shadow);
}

/* =========================
   Mobile topbar — logo visibile e icone più leggibili
   ========================= */
@media (max-width: 560px){
  .topbar{
    position: sticky;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    padding: 8px 10px;
  }

  .topbar__left,
  .topbar__right{
    gap: 8px;
    align-items: center;
  }

  .topbar__center{
    display: flex !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
    justify-content: center;
    min-width: 0;
    z-index: 1;
    pointer-events: none;
  }

  .brand{
    height: 40px;
    width: auto;
    max-width: 40px;
    object-fit: contain;
  }

  .chip--icon{
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }

  .chip--icon img{
    width: 30px;
    height: 30px;
  }

  .topbar__left,
  .topbar__right{
    position: relative;
    z-index: 2;
  }
}

/* =========================
   SDAC APP - POLISH DESIGN 2026
   =========================
   Override finale non distruttivo: si puo' rimuovere tutto questo blocco
   per tornare allo stile precedente senza toccare la logica dell'app.
*/

:root{
  --bg-deep:#08080a;
  --panel-glass:rgba(20,20,24,.88);
  --card-glass:rgba(28,28,34,.80);
  --card-hover:rgba(35,35,43,.94);
  --text-soft:#ededeb;
  --gold:#d9a441;
  --danger:#ef4444;
  --cinema-glow:0 18px 45px rgba(0,0,0,.34);
  --soft-inner:inset 0 1px 0 rgba(255,255,255,.045);
  --focus-ring:0 0 0 3px var(--tool-shadow);
  --r-sm:12px;
  --r-md:16px;
  --r-lg:22px;
}

html,body{
  background:
    radial-gradient(1000px 700px at 20% -10%, var(--tool-bg-strong), transparent 58%),
    radial-gradient(900px 620px at 95% 12%, rgba(255,255,255,.035), transparent 52%),
    linear-gradient(180deg, var(--bg-deep), var(--bg));
}

body{
  position:relative;
  min-height:100vh;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.017) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(circle at 50% 10%, black, transparent 78%);
}

.topbar,
.layout,
.overlay,
.dialog,
.ppDocDialog{
  position:relative;
}

.layout{
  z-index:1;
  gap:16px;
}

.topbar{
  z-index:20;
  padding:10px 16px;
  border-bottom:1px solid rgba(255,255,255,.075);
  background:
    linear-gradient(180deg, rgba(18,18,22,.94), rgba(10,10,12,.86));
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  backdrop-filter:blur(14px);
}

.brand{
  height:38px;
  border-radius:12px;
  filter:
    drop-shadow(0 6px 14px rgba(0,0,0,.36))
    drop-shadow(0 0 16px var(--tool-shadow));
}

.topbarAccount,
.chip,
.btnSmall,
.ppMini,
.alphaBtn,
.menu__toggle,
.storyboardQuickToolBtn,
.storyboardActionIconBtn,
.storyboardGuideBtn,
.storyboardToolControl,
.storyboardAspectOption,
.storyboardToolOption,
.storyboardTextToolbar__btn{
  box-shadow:var(--soft-inner);
}

.topbarAccount:hover,
.chip:hover,
.btnSmall:hover,
.ppMini:hover,
.alphaBtn:hover,
.menu__toggle:hover,
.storyboardQuickToolBtn:hover,
.storyboardActionIconBtn:hover,
.storyboardGuideBtn:not(:disabled):hover,
.storyboardToolControl:hover,
.storyboardAspectOption:hover,
.storyboardToolOption:hover,
.storyboardTextToolbar__btn:hover{
  border-color:var(--tool-border);
  background:var(--tool-bg);
  box-shadow:
    var(--soft-inner),
    0 0 0 2px var(--tool-shadow) inset;
}

.chip:focus-visible,
.btnSmall:focus-visible,
.ppMini:focus-visible,
.alphaBtn:focus-visible,
.menu__toggle:focus-visible,
.input:focus-visible,
.topbarAccount:focus-visible,
.ppNameInput:focus-visible,
.ppActorInput:focus-visible,
.storyboardTextToolbar__size:focus-visible,
.storyboardTextToolbar__select:focus-visible{
  outline:none;
  border-color:var(--tool-color);
  box-shadow:var(--focus-ring), var(--soft-inner);
}

.chip--primary{
  border-color:var(--tool-border);
  background:
    linear-gradient(180deg, var(--tool-bg-strong), rgba(28,28,34,.92));
  box-shadow:
    0 0 0 2px var(--tool-shadow) inset,
    0 10px 24px rgba(0,0,0,.18);
}

.menu{
  background:
    linear-gradient(180deg, rgba(24,24,29,.93), rgba(13,13,16,.93));
  border-color:rgba(255,255,255,.075);
  box-shadow:
    0 18px 42px rgba(0,0,0,.30),
    var(--soft-inner);
}

.menu__header:hover{
  background:rgba(28,28,34,.62);
  box-shadow:inset 0 0 0 1px var(--tool-shadow);
}

.menu__title{
  font-size:12px;
  letter-spacing:.16em;
}

.menu__item{
  min-height:46px;
  padding:12px 12px 12px 40px;
  border-color:rgba(255,255,255,.075);
  background:rgba(255,255,255,.035);
  font-weight:750;
}

.menu__item::before{
  left:15px;
  width:12px;
  height:12px;
  box-shadow:
    0 0 0 4px var(--item-shadow, rgba(179,18,23,.12)),
    0 0 18px var(--item-shadow, rgba(179,18,23,.16));
}

.menu__item:hover{
  background:
    linear-gradient(180deg, var(--item-bg, rgba(28,28,34,.92)), rgba(28,28,34,.78));
}

.menu__item.is-active{
  transform:translateY(-1px);
  background:
    linear-gradient(180deg, var(--item-bg, rgba(28,28,34,.92)), rgba(28,28,34,.88));
}

.badge,
.nbBadge,
.ppPlanTag,
.subStatusBadge{
  border-color:rgba(255,255,255,.09);
  background:rgba(28,28,34,.70);
  box-shadow:var(--soft-inner);
}

.panel{
  background:
    linear-gradient(180deg, var(--tool-bg), transparent 260px),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    var(--panel-glass);
  border-color:var(--tool-border);
  border-radius:24px;
  box-shadow:
    0 22px 60px rgba(0,0,0,.32),
    0 0 0 1px var(--tool-shadow) inset;
}

.panel__header{
  padding-bottom:12px;
  margin-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.065);
}

h1{
  font-size:clamp(25px, 3vw, 34px);
  letter-spacing:-.03em;
}

.lead{
  max-width:760px;
  font-size:17px;
  color:#d8d8d4;
}

.card,
.ppGroup,
.nbItem,
.dictItem,
.ppRow,
.ppPlanItem,
.storyboardLibraryItem,
.nbReceivedItem,
.nbPreviewItem,
.subCard,
.subSignupCard,
.subChoiceCard,
.subInlineMessage{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    var(--card-glass);
  border-color:rgba(255,255,255,.075);
  box-shadow:
    0 14px 34px rgba(0,0,0,.20),
    var(--soft-inner);
}

.card{
  border-radius:var(--r-lg);
  transition:
    transform .14s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg, transparent, var(--tool-color), transparent);
  opacity:.45;
  pointer-events:none;
}

.card:hover{
  transform:translateY(-2px);
  border-color:var(--tool-border);
  background:
    linear-gradient(180deg, var(--tool-bg), rgba(255,255,255,.02)),
    var(--card-hover);
  box-shadow:
    0 18px 44px rgba(0,0,0,.26),
    0 0 0 1px var(--tool-shadow) inset;
}

.card h3{
  font-size:17px;
  letter-spacing:.01em;
}

.card p,
.dictItem__def,
.nbMeta,
.storyboardMeta,
.storyboardShotBtn__meta,
.storyboardLibraryMeta,
.ppRow__meta,
.ppPlanMeta{
  color:var(--muted);
  line-height:1.55;
}

.input,
.ppNameInput,
.ppActorInput,
.storyboardTextToolbar__size,
.storyboardTextToolbar__select,
.storyboardTextToolbar__color{
  border-color:rgba(255,255,255,.08);
  background:rgba(5,5,8,.42);
  box-shadow:var(--soft-inner);
}

.input::placeholder,
.ppNameInput::placeholder,
.ppActorInput::placeholder{
  color:rgba(201,201,196,.58);
}

.input:focus,
.ppNameInput:focus,
.ppActorInput:focus,
.storyboardTextToolbar__size:focus,
.storyboardTextToolbar__select:focus{
  border-color:var(--tool-color);
  box-shadow:
    0 0 0 3px var(--tool-shadow),
    var(--soft-inner);
}

.panel[data-panel="home"] .cards{
  grid-template-columns:repeat(3, minmax(0,1fr));
  margin-top:18px;
}

.panel[data-panel="home"] .card{
  min-height:150px;
}

.panel[data-panel="home"] .card h3{
  font-size:18px;
}

.panel[data-panel="home"] .card:first-child{
  grid-column:span 2;
  background:
    radial-gradient(600px 220px at 20% 0%, rgba(179,18,23,.18), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    var(--card-glass);
}

.panel[data-panel="lessons"],
.panel[data-panel="shop"]{
  min-height:420px;
}

.panel[data-panel="lessons"] > .muted,
.panel[data-panel="shop"] > .muted{
  max-width:620px;
  padding:18px;
  border:1px dashed var(--tool-border);
  border-radius:var(--r-lg);
  background:var(--tool-bg);
  line-height:1.6;
}

.panel[data-panel="lessons"] > .muted::before,
.panel[data-panel="shop"] > .muted::before{
  content:"In arrivo";
  display:inline-flex;
  margin-right:10px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid var(--tool-border);
  color:var(--text);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.storyboardCanvasCard,
.storyboardToolsCard,
.storyboardNotesCard,
.storyboardDecoupageCard,
.storyboardShotsCard,
.storyboardSceneCard,
.storyboardSurfaceCard{
  border-radius:22px;
}

.storyboardCanvasCard{
  background:
    radial-gradient(700px 260px at 50% 0%, rgba(250,204,21,.10), transparent 62%),
    rgba(28,28,34,.84);
}

.canvasWrap{
  border-radius:18px;
  border-color:rgba(255,255,255,.11);
  box-shadow:
    0 18px 44px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.04) inset;
}

.storyboardCanvasStage{
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
}

.storyboardQuickToolBtn,
.storyboardToolControl--color,
.storyboardToolControl--size,
.storyboardActionIconBtn,
.storyboardGuideBtn,
.storyboardAspectOption,
.storyboardToolOption,
.storyboardTextToolbar__btn{
  border-color:rgba(255,255,255,.08);
  background:rgba(5,5,8,.36);
}

.storyboardToolOption.is-active,
.storyboardQuickToolBtn.is-active,
.storyboardGuideBtn.is-active,
.storyboardGuideBtn.is-selected,
.storyboardAspectOption.is-active,
.storyboardLineOption.is-active,
.storyboardArrowOption.is-active,
.storyboardCircleOption.is-active,
.storyboardTextToolbar__btn.is-active{
  border-color:var(--tool-color);
  background:var(--tool-bg-strong);
  box-shadow:
    0 0 0 2px var(--tool-shadow) inset,
    0 10px 22px rgba(0,0,0,.18);
}

.storyboardToolsDetails,
.storyboardNotesDetails,
.storyboardDecoupageDetails{
  border-color:rgba(255,255,255,.08);
  background:rgba(5,5,8,.24);
}

.storyboardToolsSummary,
.storyboardNotesSummary,
.storyboardDecoupageSummary,
.ppGroup__head,
.nbItem__summary{
  transition:background .16s ease, color .16s ease;
}

.storyboardToolsSummary:hover,
.storyboardNotesSummary:hover,
.storyboardDecoupageSummary:hover,
.ppGroup__head:hover,
.nbItem__summary:hover{
  background:var(--tool-bg);
}

.storyboardShotBtn{
  border-color:rgba(255,255,255,.075);
  background:rgba(5,5,8,.34);
  box-shadow:var(--soft-inner);
}

.storyboardShotBtn:hover,
.storyboardShotBtn.is-active{
  border-color:var(--tool-border);
  background:var(--tool-bg);
  box-shadow:
    0 0 0 2px var(--tool-shadow) inset,
    0 10px 22px rgba(0,0,0,.16);
}

.storyboardTextToolbar,
.storyboardToolPopover,
.storyboardAspectMenu,
.storyboardTextToolbar__popover{
  border-color:rgba(255,255,255,.09);
  background:rgba(18,20,27,.98);
  box-shadow:
    0 18px 44px rgba(0,0,0,.32),
    var(--soft-inner);
}

.dialog,
.overlay__panel,
.ppDocDialog{
  border-color:rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.010)),
    rgba(20,20,24,.98);
  box-shadow:
    0 24px 70px rgba(0,0,0,.42),
    var(--soft-inner);
}

.overlay__header,
.ppDocDialog__top{
  border-bottom-color:rgba(255,255,255,.075);
}

.ppDocPage{
  box-shadow:
    0 22px 54px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.10);
}

.nbSummaryItem,
.ppProgress,
.ppQty,
.ppCount,
.ppGroup__count{
  box-shadow:var(--soft-inner);
}

.nbSummaryItem:hover,
.ppPlanItem:hover,
.nbItem:hover,
.dictItem:hover{
  border-color:var(--tool-border);
  box-shadow:
    0 14px 34px rgba(0,0,0,.20),
    0 0 0 1px var(--tool-shadow) inset;
}

@media (max-width:960px){
  .panel[data-panel="home"] .cards{
    grid-template-columns:1fr;
  }

  .panel[data-panel="home"] .card:first-child{
    grid-column:auto;
  }
}

@media (max-width:560px){
  .layout{
    padding:10px;
    gap:10px;
  }

  .panel{
    border-radius:20px;
    padding:14px;
  }

  .topbar{
    min-height:60px;
    padding:8px 10px;
  }

  .brand{
    height:38px;
    max-width:38px;
  }

  .menu{
    border-radius:18px;
  }

  .menu__item{
    min-height:44px;
  }

  h1{
    font-size:24px;
  }

  .lead{
    font-size:15px;
  }

  .card{
    border-radius:18px;
  }

  .panel[data-panel="lessons"] > .muted,
  .panel[data-panel="shop"] > .muted{
    padding:14px;
  }
}

/* =========================
   SDAC APP - HOME DASHBOARD 2026
   ========================= */
.panel[data-panel="home"] .lead{
  max-width: 840px;
}

.homeDashboard{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(320px, .85fr);
  gap:14px;
  align-items:start;
  margin-top:18px;
}

.homeRecentCard{
  grid-column:1 / -1;
  padding:18px;
  background:
    radial-gradient(760px 260px at 8% 0%, var(--tool-bg-strong), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.018)),
    rgba(28,28,34,.88);
}

.homeCardHead,
.homeSectionTitleRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}

.homeCardHead h3,
.homeSectionTitleRow h2{
  margin:0 0 5px;
}

.homeCardHead p,
.homeSectionTitleRow p{
  margin:0;
  line-height:1.5;
}

.homeRefreshBtn{
  flex:0 0 auto;
}

.homeRecentList{
  display:grid;
  gap:10px;
}

.homeRecentItem{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:12px;
  width:100%;
  padding:12px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:16px;
  background:
    linear-gradient(90deg, var(--home-item-bg, rgba(179,18,23,.10)), rgba(11,11,13,.30) 72%),
    rgba(11,11,13,.42);
  box-shadow: inset 4px 0 0 var(--home-item-color, var(--accent));
}

.homeRecentIcon{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px solid var(--home-item-border, rgba(179,18,23,.36));
  background:var(--home-item-bg, rgba(179,18,23,.12));
  color:var(--text);
  font-weight:900;
  box-shadow:0 0 0 3px var(--home-item-shadow, rgba(179,18,23,.12));
}

.homeRecentMain{
  min-width:0;
}

.homeRecentTitle{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text);
  font-weight:900;
}

.homeRecentMeta{
  margin-top:4px;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}

.homeRecentActions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.homeRecentItem--production{
  --home-item-color:#22c55e;
  --home-item-bg:rgba(34,197,94,.12);
  --home-item-border:rgba(34,197,94,.42);
  --home-item-shadow:rgba(34,197,94,.13);
}

.homeRecentItem--storyboard{
  --home-item-color:#facc15;
  --home-item-bg:rgba(250,204,21,.12);
  --home-item-border:rgba(250,204,21,.42);
  --home-item-shadow:rgba(250,204,21,.13);
}

.homeRecentItem--notebook{
  --home-item-color:#a78bfa;
  --home-item-bg:rgba(167,139,250,.12);
  --home-item-border:rgba(167,139,250,.42);
  --home-item-shadow:rgba(167,139,250,.13);
}

.homeEmptyState{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:18px;
  border:1px dashed var(--tool-border);
  border-radius:18px;
  background:var(--tool-bg);
  color:var(--muted);
}

.homeEmptyState strong{
  color:var(--text);
  font-size:16px;
}

.homeEmptyActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:4px;
}

.homeQuickArea{
  grid-column:1 / -1;
}

.homeToolGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.homeToolCard{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-height:132px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  text-align:left;
  color:var(--text);
  cursor:pointer;
  border-color:var(--home-tool-border, rgba(255,255,255,.08));
  background:
    linear-gradient(180deg, var(--home-tool-bg, rgba(255,255,255,.035)), rgba(28,28,34,.88)),
    rgba(28,28,34,.92);
}

.homeToolCard:hover,
.homeToolCard:focus-visible{
  transform:translateY(-2px);
  border-color:var(--home-tool-color, var(--tool-color));
  box-shadow:
    0 18px 44px rgba(0,0,0,.24),
    0 0 0 2px var(--home-tool-shadow, var(--tool-shadow)) inset;
}

.homeToolCard:focus-visible{
  outline:none;
}

.homeToolIcon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  border:1px solid var(--home-tool-border, rgba(255,255,255,.08));
  background:var(--home-tool-bg, rgba(255,255,255,.05));
  color:var(--text);
  font-weight:900;
  letter-spacing:-.03em;
  box-shadow:0 0 0 4px var(--home-tool-shadow, rgba(255,255,255,.04));
}

.homeToolText{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.homeToolText strong{
  font-size:16px;
  line-height:1.2;
}

.homeToolText small{
  color:var(--muted);
  line-height:1.45;
  font-size:13px;
}

.homeToolCard--production{
  --home-tool-color:#22c55e;
  --home-tool-bg:rgba(34,197,94,.12);
  --home-tool-border:rgba(34,197,94,.42);
  --home-tool-shadow:rgba(34,197,94,.13);
}

.homeToolCard--storyboard{
  --home-tool-color:#facc15;
  --home-tool-bg:rgba(250,204,21,.12);
  --home-tool-border:rgba(250,204,21,.42);
  --home-tool-shadow:rgba(250,204,21,.13);
}

.homeToolCard--dictionary{
  --home-tool-color:#38bdf8;
  --home-tool-bg:rgba(56,189,248,.12);
  --home-tool-border:rgba(56,189,248,.42);
  --home-tool-shadow:rgba(56,189,248,.13);
}

.homeToolCard--notebook{
  --home-tool-color:#a78bfa;
  --home-tool-bg:rgba(167,139,250,.12);
  --home-tool-border:rgba(167,139,250,.42);
  --home-tool-shadow:rgba(167,139,250,.13);
}

.homeToolCard--lessons,
.homeToolCard--shop{
  --home-tool-color:#9ca3af;
  --home-tool-bg:rgba(156,163,175,.10);
  --home-tool-border:rgba(156,163,175,.34);
  --home-tool-shadow:rgba(156,163,175,.10);
}

.homeInstallCard{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:auto;
}

.homeInstallCard h3,
.homeInstallCard p{
  margin-top:0;
}

.homeInstallCard p{
  margin-bottom:0;
}

@media (max-width: 960px){
  .homeDashboard{
    grid-template-columns:1fr;
  }

  .homeToolGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px){
  .homeCardHead,
  .homeSectionTitleRow,
  .homeInstallCard{
    flex-direction:column;
    align-items:stretch;
  }

  .homeToolGrid{
    grid-template-columns:1fr;
  }

  .homeRecentItem{
    grid-template-columns:auto minmax(0, 1fr);
  }

  .homeRecentActions{
    grid-column:1 / -1;
    justify-content:flex-start;
  }

  .homeRecentActions .chip,
  .homeEmptyActions .chip,
  .homeInstallCard .chip{
    width:100%;
  }
}