/* ===============================
   THEME / BASE
   =============================== */
@font-face{
  font-family:"OlivettiLettera22";
  src:url("static/fonts/OlivettiLettera22Typewriter.ttf") format("truetype");
  font-display:swap;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

:root{
  --btn-height:60px;

  --bg:        #061517;
  --charcoal:  #111112;
  --charcoal-soft:#1a1a1c;

  --teal:      #0e6467;
  --teal-dark: #044043;

  --ink:       #f4ede4;
  --muted:     #dacec0;

  --accent:    #8f1010;
  --accent-dark:#550606;

  --border:    rgba(0,0,0,.85);
  --field:     rgba(255,255,255,.06);

  --shadow-hard: 18px 18px 0 rgba(0,0,0,.85);
  --shadow-mid:  10px 10px 0 rgba(0,0,0,.80);
  --shadow-btn:   6px  6px 0 rgba(0,0,0,.85);

  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;

  --pad-x: 2rem;
  --pad-y: 1.75rem;
  --gap: 1.5rem;
}

body{
  margin:0;
  color:var(--ink);
  font:15px/1.5 "Inter","Helvetica Neue",Arial,sans-serif;
  background-color:var(--bg);
  min-height:100%;
  overflow-x:hidden;
  position:relative;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:linear-gradient(180deg,#0f6a6f 0%,#082f32 55%,#0a0a0c 100%);
  background-size:cover;
  z-index:-2;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  background-image:url("static/img/concrete-wall.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  mix-blend-mode:multiply;
  opacity:.35;
  pointer-events:none;
  z-index:-1;
}

h1,h2,h3{ margin:0 0 .5rem 0; }
h1{ font-size:1.1rem; letter-spacing:.04em; }
h2{ font-size:.98rem; color:#d7e3ff; }
h3{ font-size:.92rem; color:#cddbff; margin-top:.6rem; }

.muted{ color:var(--muted); font-size:.9rem; }
.hidden{ display:none !important; }

a{ color:var(--accent); }
a:hover{ color:#ff9b80; }

/* ===============================
   HEADER / FOOTER
   =============================== */
.app-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;

  padding:1.4rem var(--pad-x);
  background:var(--teal);
  border-bottom:4px solid var(--accent);
  box-shadow:0 18px 0 rgba(0,0,0,.9);
  position:relative;
  z-index:5;
}

.app-header::after{
  content:"";
  position:absolute;
  left:var(--pad-x);
  right:var(--pad-x);
  bottom:-10px;
  height:4px;
  background:var(--accent);
  box-shadow:0 6px 0 rgba(0,0,0,.8);
}

.brand{
  display:flex;
  align-items:center;
  gap:1.1rem;
  min-width:0;
}

.brand-mark{
  width:78px;
  height:78px;
  object-fit:contain;
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.55));
  flex:0 0 auto;
}

.brand-copy{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  min-width:0;
}

.eyebrow{
  margin:0;
  text-transform:uppercase;
  font-size:.7rem;
  letter-spacing:.32rem;
  color:#f6f2ea;
  opacity:.65;
}

.app-title{
  font-family:"OlivettiLettera22","Space Mono","IBM Plex Mono",monospace;
  font-size:3rem;
  letter-spacing:.22rem;
  text-transform:uppercase;
  color:#f6f2ea;
  line-height:1.05;
  word-break:break-word;
}

.tagline{
  margin:0;
  color:#f0d8c2;
  font-size:.95rem;
  text-transform:uppercase;
  letter-spacing:.16rem;
}

.header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:1rem;

  margin-left:auto;
  padding:.6rem 1rem;
  border-radius:24px;
  background:rgba(6,21,23,.92);
  backdrop-filter:blur(6px);
  box-shadow:0 15px 25px rgba(0,0,0,.35);
}

.header-actions button,
.header-actions .ghost-btn{
  background:#ece4d7;
  color:#111;
  border:3px solid #000;
  border-radius:12px;
  padding:.55rem 1rem;
  min-height:var(--btn-height);
  min-width:0; /* allow shrink */
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:.55rem;

  text-transform:uppercase;
  letter-spacing:.2rem;
  font-weight:700;

  box-shadow:var(--shadow-btn);
  cursor:pointer;
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.header-actions button:hover,
.header-actions .ghost-btn:hover{ filter:brightness(1.08); transform:translateY(-2px); }

.header-actions button:active,
.header-actions .ghost-btn:active{ transform:translateY(1px); }

.header-actions button img,
.header-actions .ghost-btn img{
  width:22px;
  height:22px;
  display:block;
  border-radius:4px;
  object-fit:cover;
  filter:invert(8%) sepia(68%) saturate(1170%) hue-rotate(334deg) brightness(73%) contrast(97%);
}

.header-actions button.primary{
  background:#0e6467;
  color:#f4ede4;
}

.header-actions .ghost-btn{
  background:#8f1010;
  color:#f9ece4;
}

.header-actions .ghost-btn input[type="file"]{ cursor:pointer; }

#btnExportPDF{
  background:linear-gradient(180deg,#0d9488,#0a5f5a);
  border-color:#1c302f;
  color:#f4ede4;
}
#btnDownloadProject{
  background:linear-gradient(180deg,#f4e1c6,#d4b37e);
  color:#2b190b;
  border-color:#ad8852;
}
label[for="btnLoadProject"].ghost-btn{
  background:linear-gradient(180deg,#f9f2ec,#ebe0d6);
  color:#3b2a1f;
  border-color:#d2bba6;
}
#btnResetProject{
  background:linear-gradient(180deg,#b01619,#6f080a);
  color:#ffe7e4;
  border-color:#5a0505;
}

.app-footer{
  background:var(--charcoal);
  border-top:4px solid var(--accent);
  padding:1.5rem var(--pad-x);
  box-shadow:0 -18px 0 rgba(0,0,0,.8);

  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:1.5rem;
  align-items:center;
}

.footer-left{
  min-width:0;
  justify-self:start;
  display:flex;
  align-items:center;
  color:var(--ink);
}
.footer-left span{ line-height:1.5; }
.footer-left a{ color:var(--accent); text-decoration:none; }
.footer-left a:hover{ text-decoration:underline; }

.footer-cta{
  justify-self:center;
  width:clamp(240px, 28vw, 360px);
  text-align:center;

  display:flex;
  flex-direction:column;
  gap:.15rem;
  align-items:center;
  justify-content:center;

  background:linear-gradient(120deg,#8f1010,#0e6467);
  border:3px solid #000;
  border-radius:999px;
  padding:.8rem 2rem;
  color:var(--ink);
  text-decoration:none;

  box-shadow:8px 8px 0 rgba(0,0,0,.85);
  transition:transform .2s ease, filter .2s ease;
  font-size:.95rem;
  font-weight:600;
  line-height:1.4;
}
.footer-cta:hover{ filter:brightness(1.08); transform:translateY(-2px); }

.footer-logo{
  justify-self:end;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:.4rem;
  border-radius:50%;
  transition:transform .2s ease, box-shadow .2s ease;
}
.footer-logo:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(0,0,0,.4);
}

/* ===============================
   MAIN LAYOUT
   =============================== */
.app{
  display:grid;
  gap:var(--gap);
  padding:var(--pad-y) var(--pad-x);
  min-height:calc(100vh - 160px);

  /* Flexible desktop grid that can shrink */
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);

  background:linear-gradient(180deg,rgba(0,0,0,.05),transparent);
}

/* ===============================
   SIDEBAR
   =============================== */
.sidebar{
  align-self:start;
  min-width:0;
}

.sidebar-inner{
  background:var(--charcoal-soft);
  border:4px solid #050505;
  border-radius:var(--radius-md);
  padding:1.1rem;
  box-shadow:var(--shadow-hard);

  overflow-y:auto;
  overflow-x:hidden;

  display:flex;
  flex-direction:column;
  gap:1rem;
}

.sidebar section{ margin:0; }

.panel{
  background:linear-gradient(180deg,#0e6467,#0b3c3e);
  border:3px solid #050505;
  border-radius:16px;
  padding:1rem;
  box-shadow:var(--shadow-mid);
  display:flex;
  flex-direction:column;
  gap:.65rem;
  position:relative;
}

.panel.panel-teal{
  background:linear-gradient(180deg,#0e6467,#0b3c3e);
}
.panel.panel-red{
  background:linear-gradient(180deg,#7d0c0d,#400506);
}

.sidebar h2{
  margin:0 0 .55rem 0;
  font-size:1rem;
  letter-spacing:.2rem;
  color:#f6f2ea;
}
.sidebar h3{
  margin:.65rem 0 .4rem 0;
  letter-spacing:.12rem;
  text-transform:uppercase;
  color:#f6f2ea;
}

/* sticky ONLY on wide screens */
@media (min-width: 1201px){
  .sidebar{
    position:sticky;
    top:1rem;
    height:calc(100vh - 2rem);
  }
  .sidebar-inner{
    height:100%;
  }
}

/* ===============================
   FORMS / CONTROLS
   =============================== */
label{
  display:flex;
  align-items:center;
  gap:.45rem;
  margin:.35rem 0;
  white-space:normal;
  color:var(--ink);
}

label > input,
label > select,
label > textarea{
  flex:1 1 auto;
  min-width:0;

  background:var(--field);
  color:var(--ink);
  border:1px solid rgba(255,255,255,.08);
  border-radius:.55rem;
  padding:.4rem .6rem;
  min-height:34px;
  font-size:13px;

  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

textarea{ width:100%; resize:vertical; }

input[type="number"]{ max-width:90px; }

input[type="color"]{
  width:38px;
  min-width:38px;
  height:32px;
  padding:0;
  border-radius:.35rem;
  border:1px solid rgba(255,255,255,.1);
  background:var(--charcoal);
}

label:not(.grow):has(> input[type="checkbox"]){
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
  border-radius:.65rem;
  padding:.3rem .5rem;
  gap:.45rem;
  flex:0 0 auto;
}
label.grow:has(> input[type="checkbox"]){
  background:transparent;
  border:0;
  padding:0;
}

/* Buttons (general) */
button{
  background:linear-gradient(180deg,var(--accent),var(--accent-dark));
  color:var(--ink);
  border:3px solid #000;
  border-radius:18px;
  padding:.6rem 1rem;
  font-size:.85rem;

  cursor:pointer;
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;

  text-transform:uppercase;
  letter-spacing:.18rem;

  box-shadow:var(--shadow-btn);
  min-height:var(--btn-height);
}

button:hover{ filter:brightness(1.08); transform:translateY(-2px); }
button:active{ transform:translateY(1px); }

button img, .ghost-btn img{
  width:18px;
  height:18px;
  border-radius:4px;
  object-fit:cover;
}

button.primary{
  border-color:#fce0cf;
  box-shadow:0 25px 35px rgba(0,0,0,.4);
}

button.danger, .ghost-btn.danger{
  border-color:#f07b64;
  color:#ffd4d4;
}

input[type="range"]{ accent-color:var(--accent); }

.ghost-btn{
  background-color:transparent;
  border:3px dashed rgba(255,255,255,.55);
  color:var(--ink);
  border-radius:18px;
  padding:.52rem 1rem;
  cursor:pointer;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;

  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.18rem;

  box-shadow:8px 8px 0 rgba(0,0,0,.8);
  min-height:var(--btn-height);
}
.ghost-btn.danger{
  border-style:solid;
  background:rgba(197,59,50,.15);
}

.file-btn{
  position:relative;
  overflow:hidden;

  padding:.6rem 1rem;
  border-radius:18px;

  background:linear-gradient(180deg,#26272c,#18181b);
  border:3px solid #000;
  color:var(--ink);

  text-transform:uppercase;
  letter-spacing:.18rem;
  font-size:.85rem;

  box-shadow:var(--shadow-btn);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;

  min-height:var(--btn-height);
}
.file-btn:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.file-btn input[type="file"]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

/* Panels swap button themes (your original behaviour) */
.panel-red button,
.panel-red .ghost-btn,
.panel-red .file-btn{
  background:linear-gradient(180deg,#0b8c89,#05615f);
  color:var(--ink);
}
.panel-teal button,
.panel-teal .ghost-btn,
.panel-teal .file-btn{
  background:linear-gradient(180deg,var(--accent),var(--accent-dark));
  color:var(--ink);
}

.panel-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.panel-actions > *{
  flex:1 1 calc(50% - .5rem);
  width:auto;
}

.icon-btn span{ white-space:nowrap; }

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

/* rows + grids */
.row{ display:flex; align-items:center; gap:.5rem; flex-wrap:nowrap; }
.row1{ display:none; align-items:center; gap:.5rem; flex-wrap:nowrap; }

.row > label{ min-width:0; }
.row > label.grow{ flex:1 1 0; }

.grid-1{ display:grid; gap:.5rem; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; grid-auto-rows:minmax(var(--btn-height),auto); }
.grid-3{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; grid-auto-rows:minmax(var(--btn-height),auto); }
.grid-4{ display:grid; grid-template-columns:1fr; gap:.5rem; grid-auto-rows:minmax(var(--btn-height),auto); }
.grow{ flex:1 1 0; min-width:0; }

.grid-2,
.grid-3,
.grid-4{ align-items:start; }

.grid-2 > *,
.grid-3 > *,
.grid-4 > *{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  font-size:.85rem;
  letter-spacing:.18rem;
  padding:.6rem 1rem;
  min-height:var(--btn-height);
  gap:.5rem;
}

.panel-actions.grid-2 > *{
  justify-content:center;
  text-align:center;
}

/* keep “Units / DPI” tidy (HTML has inline width on DPI label) */
.sidebar .row:first-of-type label[style*="width"] input{ width:100%; }

/* hide unused UI */
.tabs.small{ display:none !important; }
label:has(#bgImgFront),
label:has(#bgImgBack){ display:none !important; }

/* Pickr */
.pickr .pcr-button{
  width:60px !important;
  height:60px !important;
  aspect-ratio:1/1;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
}

/* Inline editor */
.canvas-inline-editor{
  position:absolute;
  min-width:80px;
  min-height:40px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--inline-text-color,#111);
  box-shadow:none;
  display:none;
  white-space:pre-wrap;
  line-height:1.4;
  z-index:8;
  transform-origin:center center;
  pointer-events:none;
  caret-color:var(--inline-caret,#111);
  user-select:text;
}
.canvas-inline-editor:focus{ outline:none; }
.canvas-inline-editor.active{ pointer-events:auto; }
.canvas-inline-editor::selection,
.canvas-inline-editor *::selection{ background:rgba(60,160,255,.35); }

/* ===============================
   CANVAS / EDITOR
   =============================== */
.stage{
  display:flex;
  flex-direction:column;
  gap:1rem;
  min-width:0;
}

.canvas-tabs{
  display:flex;
  gap:.6rem;
  align-items:center;
  flex-wrap:wrap;
}

.canvas-tab{
  background:linear-gradient(180deg,#1d1f24,#131417);
  border:1px solid rgba(255,255,255,.05);
  border-radius:12px;
  padding:.4rem;

  display:flex;
  flex-direction:column;
  align-items:center;

  box-shadow:0 12px 24px rgba(0,0,0,.35);
}
.canvas-tab.active{ outline:1px solid var(--accent); }

.canvas-tab img{
  width:64px;
  height:40px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.15);
  border-radius:6px;
  display:block;
}

.tip-tray{
  display:flex;
  gap:.75rem;
  margin:.5rem 0 1rem;
  flex-wrap:wrap;
}

.hint-tip{
  position:relative;
  font-size:.85rem;
  letter-spacing:.08rem;
  text-transform:uppercase;
  color:#f0d8c2;
  border-bottom:1px dashed rgba(240,216,194,.4);
  cursor:help;
  padding-bottom:2px;
}

.hint-tip::after{
  content:attr(data-tip);
  position:absolute;
  left:0;
  bottom:calc(100% + 4px);

  background:#11161d;
  color:#f4ede4;
  padding:.45rem .6rem;
  border-radius:8px;

  min-width:220px;
  max-width:340px;

  opacity:0;
  pointer-events:none;
  transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  z-index:25;
}

.hint-tip:hover::after,
.hint-tip:focus-visible::after{
  opacity:1;
  transform:translateY(0);
}

.tiny-toolbar-host{
  width:100%;
  margin-bottom:1rem;
  position:sticky;
  top:0;
  z-index:20;
  display:block;
}
.tiny-toolbar-host:empty{ display:none; }
.tiny-toolbar-host .tox-tinymce{ width:100% !important; }

/* hide promo */
.tox .tox-promotion + .tox-menubar{ grid-column:none !important; }
.tox-promotion,
.tox-promotion-link{ display:none !important; }

.canvas-wrap{
  background:linear-gradient(180deg,rgba(17,18,20,.95),rgba(9,9,11,.9));
  border:4px solid #050505;
  border-radius:var(--radius-lg);
  padding:1.4rem;

  display:flex;
  justify-content:center;
  align-items:center;

  box-shadow:var(--shadow-hard);

  /* key for small screens */
  overflow:auto;
}

.canvas-holder{ position:relative; }

canvas{
  background:#fff;
  border-radius:10px;
  box-shadow:0 25px 50px rgba(0,0,0,.4);
  display:block;

  /* scale visually on small screens */
  max-width:100%;
  height:auto;
}

.overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
}

.banner{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:600;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px);
  border-radius:8px;
}

/* selection handles */
.sel-outline{ position:absolute; border:1.5px dashed rgba(110,168,254,.9); pointer-events:none; }
.handle{
  position:absolute;
  width:12px;
  height:12px;
  border:2px solid #fff;
  background:#6ea8fe;
  box-shadow:0 0 0 1px #000;
  border-radius:2px;
  pointer-events:auto;
}
.handle[data-role="rot"]{ background:#ffcd57; }

/* helper boxes */
.subbox{
  border:1px dashed #33405d;
  border-radius:.6rem;
  padding:.6rem;
  margin:.5rem 0;
}

/* ===============================
   3D PREVIEW
   =============================== */
.preview3d{
  background:linear-gradient(180deg,#141518,#0c0d0f);
  border:4px solid #050505;
  border-radius:var(--radius-lg);
  padding:1.4rem;

  max-width:95%;
  min-width:min(100%, 560px);
  align-self:center;

  box-shadow:var(--shadow-hard);
}

.viewport{
  width:100%;
  height:360px;
  border-radius:14px;
  background:radial-gradient(600px 300px at 50% 30%, rgba(197,59,50,.15), transparent 65%);
  perspective:1000px;
  overflow:hidden;

  display:flex;
  justify-content:center;
  align-items:center;
}
.viewport.large{ height:520px; }

.card3d{
  position:relative;
  transform-style:preserve-3d;
  cursor:grab;
  transition:transform .1s linear;
}
.card3d.grabbing{ cursor:grabbing; }

.face{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  background-size:cover;
  background-position:center;
  border:1px solid #1f2533;
  border-radius:4px;
}
.edge{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:#fff;
}
.paper-ov{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:.35;
  mix-blend-mode:multiply;
  pointer-events:none;
  border-radius:inherit;
}

/* ===============================
   PRINT PREVIEW (A4)
   =============================== */
.print-preview-wrap{
  margin-top:10px;
  border:4px solid #050505;
  border-radius:22px;
  overflow:hidden;
  background:#151517;

  display:flex;
  flex-direction:column;
  align-items:center;

  padding-bottom:10px;
  box-shadow:var(--shadow-mid);
}

.print-preview-wrap > .title{
  width:100%;
  padding:10px 12px;
  color:#f6f2ea;
  font-weight:600;
  background:#1f1f21;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.print-preview-wrap iframe{
  width:210mm;
  max-width:100%;
  aspect-ratio:210 / 297;
  height:auto;
  background:#fff;
  border:0;
  display:block;
}

/* ===============================
   SCROLLBARS
   =============================== */
.sidebar-inner::-webkit-scrollbar{ width:10px; }
.sidebar-inner::-webkit-scrollbar-thumb{
  background:#1f2533;
  border:2px solid #151821;
  border-radius:10px;
}
.sidebar-inner::-webkit-scrollbar-track{ background:#0f1115; }

/* ===============================
   RESPONSIVE
   =============================== */
/* Collapse earlier for tablets */
@media (max-width: 1200px){
  :root{
    --pad-x: 1rem;
    --pad-y: 1rem;
  }

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

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

/* Buttons become a 2-column grid on medium screens */
@media (max-width: 980px){
  .header-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.75rem;
  }

  .header-actions button,
  .header-actions .ghost-btn{
    width:100%;
    justify-content:center;
  }

  .viewport.large{ height:420px; }
}

/* Single column buttons on very small screens */
@media (max-width: 520px){
  .app-header{ padding:1rem; }
  .app-footer{ padding:1rem; }

  .app-title{ font-size:2rem; }

  .header-actions{
    grid-template-columns:1fr;
  }

  .sidebar .row{ flex-wrap:wrap; }
  .grid-2, .grid-3{ grid-template-columns:1fr; }

  .canvas-wrap{ padding:1rem; }
}

/* Footer stack */
@media (max-width: 780px){
  .app-footer{
    grid-template-columns:1fr;
    text-align:center;
  }
  .footer-left{ justify-self:center; justify-content:center; }
  .footer-cta{ width:100%; }
  .footer-logo{ justify-self:center; justify-content:center; }
}