/* 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-prev canvas{
  max-width:100%;max-height:74vh;height:auto;border-radius:4px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}