/* Family Memories Studio */
.studio-logo{background:linear-gradient(145deg,#db2777,#7c3aed)}
.studio-logo::after{box-shadow:0 13px 0 -1px #fff}

.field{display:grid;gap:5px;margin-bottom:13px;font-size:13px}
.field>span{color:var(--muted);font-size:12.5px}
.field>span small{font-size:11px;opacity:.8}
.field input,.field select,.field textarea{
  font:inherit;color:var(--text);background:var(--surface-2);
  border:1px solid var(--line);border-radius:9px;padding:9px 11px;width:100%;
  resize:vertical;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#db2777;outline:none}

.setup-grid{display:grid;gap:16px;grid-template-columns:minmax(300px,1fr) minmax(320px,1.2fr);align-items:start}
@media (max-width:860px){.setup-grid{grid-template-columns:1fr}}

.template-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.tpl-chip{
  cursor:pointer;border:2px solid var(--line);border-radius:10px;overflow:hidden;
  background:var(--surface);padding:0;font:inherit;text-align:center;
}
.tpl-chip.is-active{border-color:#db2777}
.tpl-swatch{height:40px;display:flex}
.tpl-swatch i{flex:1}
.tpl-chip span{display:block;font-size:11px;padding:5px 3px;color:var(--muted)}
.tpl-chip.is-active span{color:var(--text);font-weight:600}

.dz-compact{padding:26px 18px;border-radius:14px}
.dz-compact h2{font-size:17px}
.dz-compact .dz-icon{font-size:30px;margin-bottom:4px}

.photo-strip{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;
  margin-top:12px;max-height:240px;overflow-y:auto;padding:2px;
}
.photo-strip .thumb{
  position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;border:1px solid var(--line);
}
.photo-strip .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.photo-strip .thumb .score{
  position:absolute;left:3px;bottom:3px;font-size:9.5px;font-weight:700;
  background:rgba(2,6,23,.72);color:#fff;border-radius:5px;padding:1px 5px;
}
.photo-strip .thumb.is-best .score{background:#059669}
.photo-strip .thumb.is-cut{opacity:.38}
.photo-strip .thumb .del{
  position:absolute;right:2px;top:2px;width:18px;height:18px;border:0;border-radius:50%;
  background:rgba(2,6,23,.65);color:#fff;font-size:10px;line-height:1;cursor:pointer;
}
.analysis-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:13px;color:var(--muted)}
.btn-build{width:100%;margin-top:14px;padding:13px;font-size:15px}
.btn-build:disabled{opacity:.5;cursor:not-allowed}

/* editor */
.studio-grid{
  display:grid;gap:14px;align-items:start;
  grid-template-columns:150px minmax(320px,1fr) 290px;
}
@media (max-width:1020px){.studio-grid{grid-template-columns:120px 1fr}.side-panel{grid-column:1/-1}}
@media (max-width:680px){.studio-grid{grid-template-columns:1fr}.pages-panel{order:2}}

.page-list{display:grid;gap:8px;max-height:70vh;overflow-y:auto}
.page-thumb{
  cursor:pointer;border:2px solid var(--line);border-radius:9px;overflow:hidden;
  background:#fff;padding:0;position:relative;
}
.page-thumb.is-active{border-color:#db2777}
.page-thumb canvas{width:100%;display:block}
.page-thumb .pt-label{
  position:absolute;left:4px;bottom:4px;font-size:9.5px;font-weight:700;
  background:rgba(2,6,23,.7);color:#fff;border-radius:5px;padding:1px 6px;
}
.page-thumb .pt-del{
  position:absolute;right:3px;top:3px;width:18px;height:18px;border:0;border-radius:50%;
  background:rgba(2,6,23,.65);color:#fff;font-size:10px;line-height:1;cursor:pointer;display:none;
}
.page-thumb:hover .pt-del{display:block}

.album-wrap{display:flex;justify-content:center}
#pageCanvas{
  width:100%;max-width:560px;aspect-ratio:1;height:auto;border-radius:6px;
  box-shadow:0 12px 34px rgba(15,23,42,.18);cursor:pointer;touch-action:none;
}
.canvas-actions{display:flex;gap:6px;flex-wrap:wrap}

.slot-tools{border:1px dashed var(--line);border-radius:12px;padding:12px;margin-bottom:14px}
.btn-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.btn-row .btn{flex:1;white-space:nowrap}

.picker-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:7px;
  max-height:52vh;overflow-y:auto;margin-top:8px;
}
.picker-grid button{
  padding:0;border:2px solid transparent;border-radius:9px;overflow:hidden;cursor:pointer;
  background:none;aspect-ratio:1;
}
.picker-grid button:hover{border-color:#db2777}
.picker-grid img{width:100%;height:100%;object-fit:cover;display:block}

.project-list{display:grid;gap:8px;margin-top:10px;max-height:46vh;overflow-y:auto}
.project-row{
  display:flex;align-items:center;gap:11px;padding:10px;border:1px solid var(--line);
  border-radius:11px;background:var(--surface-2);
}
.project-row img{width:52px;height:52px;object-fit:cover;border-radius:7px}
.project-row .pr-meta{flex:1;min-width:0}
.project-row .pr-meta b{font-size:13.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-row .pr-meta small{color:var(--muted);font-size:11.5px}
.project-row .btn{padding:6px 11px;font-size:12.5px}
.project-empty{color:var(--muted);font-size:13px;text-align:center;padding:18px 0}