/* Frames Design — in-app overlay */
.tvf-wrap{
  position:fixed;inset:0;z-index:400;display:none;
  flex-direction:column;background:#05070E;color:#EDF0F6;
  font-family:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
}
.tvf-wrap.on{display:flex}
.tvf-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(16px,3vw,30px);border-bottom:1px solid rgba(150,168,204,.13);
  background:rgba(5,7,14,.9);
}
.tvf-top b{
  font-family:"Archivo",Arial,sans-serif;font-weight:800;font-size:15px;letter-spacing:-.01em;
  background:linear-gradient(96deg,#F8E2A8,#E3AE44 60%,#A8781F);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tvf-x{
  width:32px;height:32px;border-radius:9px;cursor:pointer;font-size:19px;line-height:1;
  background:#090E1B;border:1px solid rgba(150,168,204,.13);color:#C3CBDB;
}
.tvf-x:hover{border-color:#E3AE44;color:#F8E2A8}
.tvf-body{flex:1;overflow:auto;padding:clamp(16px,3vw,28px)}

/* ---- layout picker: A4 proportioned slides ---- */
.tvf-pickhead{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#7F8CA6;margin-bottom:12px;
}
.tvf-slider{
  display:flex;gap:14px;overflow-x:auto;padding:4px 2px 16px;
  scroll-snap-type:x proximity;
}
.tvf-slider::-webkit-scrollbar{height:6px}
.tvf-slider::-webkit-scrollbar-thumb{background:rgba(150,168,204,.22);border-radius:99px}
.tvf-card{
  flex:0 0 190px;scroll-snap-align:start;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;gap:9px;padding:12px;
  background:linear-gradient(180deg,#0E1527,#090E1B);
  border:1px solid rgba(150,168,204,.13);border-radius:13px;color:inherit;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.tvf-card:hover{border-color:rgba(227,174,68,.4);transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.tvf-a4{
  display:block;aspect-ratio:210/297;width:100%;border-radius:6px;position:relative;overflow:hidden;
  border:1px solid rgba(150,168,204,.18);
}
.tvf-a4.dark{background:radial-gradient(120% 60% at 78% 8%,rgba(227,174,68,.20),transparent 60%),#05070E}
.tvf-a4.ivory{background:#F3F1EB}
.tvf-a4in{
  position:absolute;inset:12% 10%;border-radius:4px;
  background:
    linear-gradient(rgba(150,168,204,.30) 0 0) 6% 30%/26% 3% no-repeat,
    linear-gradient(rgba(150,168,204,.30) 0 0) 6% 38%/20% 3% no-repeat,
    linear-gradient(rgba(150,168,204,.45) 0 0) 62% 22%/28% 16% no-repeat,
    linear-gradient(rgba(150,168,204,.45) 0 0) 52% 46%/28% 16% no-repeat,
    linear-gradient(rgba(150,168,204,.45) 0 0) 66% 70%/28% 16% no-repeat;
}
.tvf-card b{font-family:"Archivo",Arial,sans-serif;font-weight:600;font-size:13.5px}
.tvf-card small{color:#7F8CA6;font-size:11.5px;line-height:1.45}

/* ---- editor ---- */
.tvf-edit{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}
@media (max-width:900px){ .tvf-edit{grid-template-columns:1fr} }
.tvf-form{display:flex;flex-direction:column;gap:10px}
.tvf-back{
  align-self:flex-start;background:none;border:none;cursor:pointer;padding:0;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#E3AE44;
}
.tvf-back:hover{color:#F8E2A8}
.tvf-form h3{font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:19px;margin:2px 0 0}
.tvf-note{color:#7F8CA6;font-size:12.5px;margin:0 0 4px}
.tvf-f{display:flex;flex-direction:column;gap:5px}
.tvf-f span{
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#7F8CA6;
}
.tvf-f input,.tvf-f textarea,.tvf-f select{
  font-family:inherit;font-size:14px;color:#EDF0F6;background:#090E1B;
  border:1px solid rgba(150,168,204,.13);border-radius:9px;padding:10px 11px;width:100%;
}
.tvf-f textarea{min-height:78px;resize:vertical}
.tvf-f input:focus,.tvf-f textarea:focus,.tvf-f select:focus{border-color:#E3AE44;outline:none}
.tvf-drop{
  display:flex;flex-direction:column;gap:2px;cursor:pointer;text-align:center;
  border:1px dashed rgba(227,174,68,.4);border-radius:11px;padding:16px 12px;
  background:rgba(227,174,68,.05);transition:background .18s ease;
}
.tvf-drop:hover{background:rgba(227,174,68,.1)}
.tvf-drop b{font-weight:600;font-size:14px}
.tvf-drop small{color:#7F8CA6;font-size:11.5px}
.tvf-count{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;color:#57C99A;min-height:14px;
}
.tvf-dl{
  margin-top:6px;padding:13px 20px;border-radius:999px;border:none;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:14.5px;color:#241704;
  background:linear-gradient(180deg,#F8E2A8,#E3AE44);
  box-shadow:0 8px 26px rgba(227,174,68,.2);
}
.tvf-dl:hover{box-shadow:0 12px 34px rgba(227,174,68,.32)}
.tvf-prev{
  display:flex;justify-content:center;padding:10px;
  background:#070B15;border:1px solid rgba(150,168,204,.13);border-radius:13px;
}
.tvf-stage{position:relative;display:flex;max-width:100%}
.tvf-prev canvas{
  display:block;max-width:100%;max-height:74vh;height:auto;border-radius:4px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}

/* the calendar block — drag it anywhere, pull the corner to resize */
.tvf-calbox,.tvf-textbox{
  position:absolute;cursor:move;border-radius:5px;
  border:1px dashed rgba(227,174,68,.55);
  background:transparent;transition:background .15s ease,border-color .15s ease;
}
.tvf-calbox:hover,.tvf-calbox.dragging,
.tvf-textbox:hover,.tvf-textbox.dragging{
  border-color:#E3AE44;background:rgba(227,174,68,.08);
}
.tvf-calgrip{
  position:absolute;left:0;top:-19px;white-space:nowrap;opacity:0;
  font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:#E3AE44;transition:opacity .15s ease;
}
.tvf-calbox:hover .tvf-calgrip,.tvf-calbox.dragging .tvf-calgrip,
.tvf-textbox:hover .tvf-calgrip,.tvf-textbox.dragging .tvf-calgrip{opacity:1}
.tvf-calhandle{
  position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;border-radius:3px;
  background:linear-gradient(180deg,#F8E2A8,#E3AE44);cursor:nwse-resize;
  box-shadow:0 2px 8px rgba(0,0,0,.5);opacity:.55;transition:opacity .15s ease;
}
.tvf-calbox:hover .tvf-calhandle,.tvf-calbox.dragging .tvf-calhandle,
.tvf-textbox:hover .tvf-calhandle,.tvf-textbox.dragging .tvf-calhandle{opacity:1}
.tvf-range input[type=range]{
  -webkit-appearance:none;appearance:none;height:4px;padding:0;border:none;border-radius:99px;
  background:linear-gradient(90deg,#A8781F,#E3AE44,#F8E2A8);cursor:pointer;
}
.tvf-range input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:50%;cursor:pointer;
  background:#F8E2A8;box-shadow:0 2px 8px rgba(0,0,0,.55);
}

/* single page / photobook mode + page strip */
.tvf-pickhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tvf-mode{display:flex;gap:2px;padding:3px;border:1px solid rgba(150,168,204,.13);border-radius:999px;background:#090E1B}
.tvf-mode button{
  border:none;background:none;cursor:pointer;border-radius:999px;padding:7px 14px;
  font-family:"Instrument Sans",Arial,sans-serif;font-weight:600;font-size:12.5px;color:#7F8CA6;
  letter-spacing:normal;text-transform:none;
}
.tvf-mode button.on{background:linear-gradient(180deg,#F8E2A8,#E3AE44);color:#241704}
.tvf-pages{display:flex;gap:8px;overflow-x:auto;padding:0 0 14px}
.tvf-pg{
  flex:0 0 auto;cursor:pointer;display:flex;align-items:center;gap:8px;
  padding:8px 13px;border-radius:9px;font-family:inherit;font-size:12.5px;color:#C3CBDB;
  background:#090E1B;border:1px solid rgba(150,168,204,.13);
}
.tvf-pg:hover{border-color:rgba(227,174,68,.4);color:#F8E2A8}
.tvf-pg.on{border-color:#E3AE44;color:#F8E2A8}
.tvf-pgn{
  width:18px;height:18px;border-radius:5px;display:grid;place-items:center;
  background:rgba(227,174,68,.16);color:#F8E2A8;
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;
}
.tvf-add{color:#E3AE44;border-style:dashed}

/* emoji shortcuts */
.tvf-emo{display:flex;flex-direction:column;gap:7px}
.tvf-emo > span{
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#7F8CA6;
}
.tvf-emorow{display:flex;flex-wrap:wrap;gap:5px}
.tvf-emorow button{
  width:32px;height:32px;font-size:16px;line-height:1;cursor:pointer;
  border-radius:8px;background:#090E1B;border:1px solid rgba(150,168,204,.13);
}
.tvf-emorow button:hover{border-color:rgba(227,174,68,.5)}
.tvf-emorow button.on{border-color:#E3AE44;background:rgba(227,174,68,.14)}
.tvf-emoundo{
  align-self:flex-start;background:none;border:none;cursor:pointer;padding:0;
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#7F8CA6;
}
.tvf-emoundo:hover{color:#F8E2A8}


/* ---- uploaded photographs, down the left ---- */
.tvf-sec{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.tvf-sec > span{
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#7F8CA6;
}
.tvf-sec > small{color:#55607A;font-size:11px;line-height:1.4}
.tvf-tray{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
.tvf-thumb{
  position:relative;padding:0;cursor:pointer;aspect-ratio:1;overflow:hidden;
  border-radius:8px;background:#090E1B;border:1px solid rgba(150,168,204,.13);
  transition:border-color .15s ease,transform .15s ease;
}
.tvf-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tvf-thumb i{
  position:absolute;left:3px;top:3px;font-style:normal;
  font-family:"IBM Plex Mono",monospace;font-size:8.5px;color:#F8E2A8;
  background:rgba(5,7,14,.72);border-radius:4px;padding:1px 4px;
}
.tvf-thumb:hover{border-color:rgba(227,174,68,.5);transform:translateY(-1px)}
.tvf-thumb.on{border-color:#E3AE44;box-shadow:0 0 0 2px rgba(227,174,68,.25)}

/* ---- the frame you picked on the sheet ---- */
.tvf-selpanel{
  display:flex;flex-direction:column;gap:8px;padding:11px 12px;border-radius:11px;
  background:rgba(227,174,68,.06);border:1px solid rgba(227,174,68,.28);
}
.tvf-selpanel > b{font-family:"Archivo",Arial,sans-serif;font-weight:600;font-size:13px;color:#F8E2A8}
.tvf-selrow{display:flex;gap:6px;flex-wrap:wrap}
.tvf-mini{
  cursor:pointer;border-radius:999px;padding:7px 13px;font-family:inherit;font-weight:600;
  font-size:12px;color:#C3CBDB;background:#090E1B;border:1px solid rgba(150,168,204,.13);
}
.tvf-mini:hover{border-color:#E3AE44;color:#F8E2A8}
.tvf-selbox{
  position:absolute;pointer-events:none;border-radius:3px;
  border:2px solid #E3AE44;box-shadow:0 0 0 3px rgba(227,174,68,.18);
}
.tvf-selbox.inside{border-color:#57C99A;box-shadow:0 0 0 3px rgba(87,201,154,.22)}
.tvf-selbox > span{
  position:absolute;left:0;top:-17px;white-space:nowrap;
  font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#E3AE44;
}
.tvf-selbox.inside > span{color:#57C99A}
#tvfCanvas{touch-action:none}

/* ---- design categories ---- */
.tvf-cat{margin:0 0 6px}
.tvf-cathead{display:flex;flex-direction:column;gap:1px;margin:0 0 9px}
.tvf-cathead b{
  font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:15px;letter-spacing:-.01em;
  background:linear-gradient(96deg,#F8E2A8,#E3AE44 62%,#A8781F);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tvf-cathead small{color:#55607A;font-size:11.5px}
.tvf-soon{
  flex:0 0 190px;display:grid;place-items:center;text-align:center;padding:14px;
  border:1px dashed rgba(150,168,204,.2);border-radius:13px;color:#55607A;font-size:11.5px;
}

/* ---- colours + exports ---- */
.tvf-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tvf-cols input[type=color]{
  height:34px;padding:2px;cursor:pointer;background:#090E1B;
  border:1px solid rgba(150,168,204,.13);border-radius:9px;
}
.tvf-dls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.tvf-dls .tvf-dl{margin-top:0;padding:12px 10px;font-size:13.5px}
.tvf-dls .tvf-psd{
  color:#F8E2A8;background:transparent;border:1px solid rgba(227,174,68,.45);box-shadow:none;
}
.tvf-dls .tvf-psd:hover{background:rgba(227,174,68,.1);box-shadow:none}
.tvf-dls .tvf-psd[disabled]{opacity:.6;cursor:default}
.tvf-psdnote{margin:2px 0 0;font-size:11px;color:#55607A}