/* ── PAGE HEADER (compact, no big hero - this page IS the tool) ── */
.page-header{
  padding:2rem 0 1.5rem;
  border-bottom:1px solid var(--paper-3);
  background:var(--paper-2);
}
.page-header-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 2.5rem;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
}
.page-header-eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:0.7rem;
}
.page-header-eyebrow-line{width:24px;height:1px;background:var(--blue)}
.eyebrow-label{font-size:0.7rem;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--blue)}
.page-header h1{
  font-family:var(--serif);
  font-weight:900;
  font-size:clamp(1.8rem,2.5vw,2.4rem);
  line-height:1.05;
  letter-spacing:-0.02em;
  color:var(--heading);
}
.page-header h1 em{font-style:italic;color:var(--blue)}
.page-header-sub{
  font-size:0.88rem;
  color:var(--ink-2);
  margin-top:0.5rem;
  max-width:480px;
  line-height:1.7;
}
.page-header-meta{
  display:flex;
  align-items:center;
  gap:1.5rem;
  flex-wrap:wrap;
  flex-shrink:0;
}
.meta-badge{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:0.75rem;
  color:var(--ink-2);
  white-space:nowrap;
}
.meta-badge svg{width:13px;height:13px;color:var(--forest);flex-shrink:0}

/* ── WORKSPACE ── */
.workspace{
  padding:1.5rem 0 0;
  background:var(--paper-2);
}
.workspace-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 2.5rem;
}

/* TOOLBAR (settings + action button) */
.toolbar{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:0.75rem 0 1rem;
  flex-wrap:wrap;
  justify-content:space-between;
}
.toolbar-left{
  display:flex;
  align-items:center;
  gap:0.75rem;
  flex-wrap:wrap;
}
.toolbar-right{
  display:flex;
  align-items:center;
  gap:0.75rem;
}

/* Settings controls in toolbar */
.setting-group{
  display:flex;
  align-items:center;
  gap:8px;
}
.setting-label{
  font-size:0.78rem;
  font-weight:500;
  color:var(--ink-2);
  white-space:nowrap;
}
.setting-select{
  font-family:var(--sans);
  font-size:0.8rem;
  padding:6px 28px 6px 10px;
  border:1px solid var(--paper-3);
  border-radius:var(--r);
  background:var(--paper);
  color:var(--ink);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8fa8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
  cursor:pointer;
  transition:border-color 0.15s;
}
.setting-select:focus{outline:none;border-color:var(--blue)}

/* Landscape toggle */
.landscape-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
}
.landscape-toggle input[type=checkbox]{
  appearance:none;
  width:32px;height:18px;
  border-radius:9px;
  background:var(--paper-3);
  border:1px solid var(--ink-4);
  position:relative;
  cursor:pointer;
  transition:all 0.2s;
  flex-shrink:0;
}
.landscape-toggle input[type=checkbox]::after{
  content:'';
  position:absolute;
  left:2px;top:50%;
  transform:translateY(-50%);
  width:12px;height:12px;
  border-radius:50%;
  background:var(--ink-3);
  transition:all 0.2s;
}
.landscape-toggle input[type=checkbox]:checked{
  background:var(--blue);
  border-color:var(--blue);
}
.landscape-toggle input[type=checkbox]:checked::after{
  left:16px;
  background:#fff;
}
.landscape-toggle-label{font-size:0.78rem;font-weight:500;color:var(--ink-2)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-weight:500;font-size:0.875rem;padding:10px 22px;border-radius:var(--r);cursor:pointer;transition:all 0.18s ease;border:1px solid transparent;letter-spacing:0.01em;text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover:not(:disabled){background:var(--blue-2);transform:translateY(-1px)}
.btn-primary:disabled{background:var(--ink-4);border-color:var(--ink-4);cursor:not-allowed}
.btn-outline{background:var(--paper);color:var(--ink);border-color:var(--paper-3)}
.btn-outline:hover{border-color:var(--ink-3)}
.btn-ghost{background:transparent;color:var(--ink-2);border-color:transparent;padding:8px 12px}
.btn-ghost:hover{color:var(--ink);background:var(--paper-3)}
.btn-blue{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-blue:hover{background:var(--blue-2);transform:translateY(-1px)}
.btn-lg{font-size:1rem;padding:13px 28px}
.btn svg{width:15px;height:15px;flex-shrink:0}

/* SPLIT PANE */
.split-pane{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  min-height:0;
}
.pane{
  background:var(--paper);
  border:1px solid var(--paper-3);
  border-radius:var(--r-lg);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:0;
}
.pane-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0.7rem 1rem;
  border-bottom:1px solid var(--paper-3);
  background:var(--paper-2);
  flex-shrink:0;
}
.pane-title{
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--heading);
}
.pane-body{
  flex:1;
  min-height:0;
  position:relative;
  overflow:hidden;
}

/* INPUT TABS */
.input-tabs{
  display:flex;
  gap:0;
}
.input-tab{
  font-family:var(--sans);
  font-size:0.75rem;
  font-weight:500;
  padding:4px 12px;
  border:1px solid var(--paper-3);
  background:var(--paper);
  color:var(--ink-3);
  cursor:pointer;
  transition:all 0.15s;
  letter-spacing:0.02em;
}
.input-tab:first-child{border-radius:var(--r) 0 0 var(--r)}
.input-tab:last-child{border-radius:0 var(--r) var(--r) 0;border-left:none}
.input-tab.active{background:var(--blue);color:#fff;border-color:var(--blue)}

/* URL INPUT PANE (replaces the HTML editor) */
.url-pane-body{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  padding:1.75rem 1.5rem;
  background:var(--paper);
}
.url-pane-meta{
  font-size:0.7rem;
  color:var(--ink-3);
  display:flex;
  align-items:center;
  gap:6px;
}
.url-pane-meta.valid{color:var(--forest)}
.url-pane-meta.invalid{color:var(--rose)}
.url-pane-meta svg{width:12px;height:12px;flex-shrink:0}

.url-field-wrap{display:flex;flex-direction:column;gap:0.55rem}
.url-field-label{
  font-size:0.78rem;
  font-weight:500;
  color:var(--ink-2);
}

.url-input-row{
  position:relative;
  display:flex;
  align-items:stretch;
  background:var(--paper);
  border:1px solid var(--paper-3);
  border-radius:var(--r);
  transition:border-color 0.15s, box-shadow 0.15s;
}
.url-input-row:focus-within{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(47,74,199,0.08);
}
.url-input-row.invalid{
  border-color:var(--rose);
}
.url-input-row.invalid:focus-within{
  box-shadow:0 0 0 3px rgba(196,67,79,0.08);
}
.url-input-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 0 0 12px;
  color:var(--ink-3);
}
.url-input-icon svg{width:18px;height:18px}
.url-input{
  flex:1;
  font-family:var(--mono);
  font-size:0.92rem;
  padding:14px 8px 14px 12px;
  border:none;
  background:transparent;
  color:var(--ink);
  outline:none;
  min-width:0;
  letter-spacing:0.01em;
}
.url-input::placeholder{color:var(--ink-4);font-family:var(--sans);letter-spacing:normal}
.url-clear-btn{
  background:none;
  border:none;
  color:var(--ink-3);
  cursor:pointer;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:0 var(--r) var(--r) 0;
  transition:color 0.15s;
}
.url-clear-btn:hover{color:var(--rose)}

.url-field-help{
  font-size:0.78rem;
  color:var(--ink-3);
  line-height:1.6;
}

/* QR CONFIG PANE */
.qr-pane-body{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  padding:1.5rem 1.5rem;
  background:var(--paper);
}

.qr-field{display:flex;flex-direction:column;gap:0.55rem}
.qr-field-label{
  font-size:0.78rem;
  font-weight:500;
  color:var(--ink-2);
  display:flex;
  align-items:center;
  gap:8px;
}
.qr-field-required{
  font-size:0.65rem;
  color:var(--rose);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.qr-field-help{
  font-size:0.75rem;
  color:var(--ink-3);
  line-height:1.55;
}

.qr-content-input{
  font-family:var(--mono);
  font-size:0.88rem;
  padding:12px 14px;
  border:1px solid var(--paper-3);
  border-radius:var(--r);
  background:var(--paper);
  color:var(--ink);
  resize:vertical;
  min-height:80px;
  line-height:1.55;
  transition:border-color 0.15s, box-shadow 0.15s;
  outline:none;
  width:100%;
  letter-spacing:0.01em;
}
.qr-content-input:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(47,74,199,0.08);
}
.qr-content-input::placeholder{color:var(--ink-4);font-family:var(--sans);letter-spacing:normal}

/* COLOR PICKER */
.qr-color-row{
  display:flex;
  align-items:center;
  gap:0.85rem;
  flex-wrap:wrap;
}
.qr-color-picker-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 12px 5px 5px;
  border:1px solid var(--paper-3);
  border-radius:var(--r);
  background:var(--paper);
}
.qr-color-picker{
  /* Native color input but minimal chrome */
  width:32px;height:32px;
  border:none;
  border-radius:3px;
  padding:0;
  cursor:pointer;
  background:none;
}
.qr-color-picker::-webkit-color-swatch-wrapper{padding:0;border-radius:3px}
.qr-color-picker::-webkit-color-swatch{border:1px solid var(--paper-3);border-radius:3px}
.qr-color-picker::-moz-color-swatch{border:1px solid var(--paper-3);border-radius:3px}
.qr-color-value{
  font-family:var(--mono);
  font-size:0.82rem;
  color:var(--ink-2);
  text-transform:uppercase;
  letter-spacing:0.04em;
}

.qr-swatches{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.qr-swatch{
  width:28px;height:28px;
  border-radius:50%;
  border:2px solid var(--paper);
  cursor:pointer;
  padding:0;
  transition:all 0.15s;
  box-shadow:0 0 0 1px var(--paper-3);
  position:relative;
}
.qr-swatch:hover{transform:scale(1.1)}
.qr-swatch.active{box-shadow:0 0 0 2px var(--blue)}
.qr-swatch.active::after{
  content:'';
  position:absolute;
  inset:50% 50% auto auto;
  width:6px;height:6px;
  background:#fff;
  border-radius:50%;
  transform:translate(50%, -50%);
  box-shadow:0 0 0 1px rgba(0,0,0,0.2);
}

/* LOGO TABS */
.qr-logo-tabs{
  display:flex;
  gap:0;
  margin-bottom:0.4rem;
}
.qr-logo-tab{
  font-family:var(--sans);
  font-size:0.75rem;
  font-weight:500;
  padding:5px 14px;
  border:1px solid var(--paper-3);
  background:var(--paper);
  color:var(--ink-3);
  cursor:pointer;
  transition:all 0.15s;
  letter-spacing:0.02em;
}
.qr-logo-tab:first-child{border-radius:var(--r) 0 0 var(--r)}
.qr-logo-tab:last-child{border-radius:0 var(--r) var(--r) 0;border-left:none}
.qr-logo-tab:not(:first-child):not(:last-child){border-left:none}
.qr-logo-tab.active{background:var(--blue);color:#fff;border-color:var(--blue)}

.qr-logo-panel{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}

.qr-logo-dropzone{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:1.5rem 1rem;
  border:2px dashed var(--paper-3);
  border-radius:var(--r-lg);
  cursor:pointer;
  transition:all 0.15s;
  background:var(--paper-2);
}
.qr-logo-dropzone:hover,.qr-logo-dropzone.drag-over{
  border-color:var(--blue);
  background:var(--blue-pale);
}
.qr-logo-dropzone svg{
  width:32px;height:32px;
  color:var(--ink-3);
}
.qr-logo-dropzone-title{font-size:0.9rem;font-weight:500;color:var(--ink)}
.qr-logo-dropzone-sub{font-size:0.75rem;color:var(--ink-3);text-align:center}
.qr-logo-dropzone-sub strong{color:var(--blue);font-weight:500}

.qr-logo-preview{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0.75rem 0.9rem;
  background:var(--paper-2);
  border:1px solid var(--paper-3);
  border-radius:var(--r);
}
.qr-logo-preview img{
  width:40px;height:40px;
  object-fit:contain;
  background:#fff;
  border:1px solid var(--paper-3);
  border-radius:3px;
  padding:2px;
  flex-shrink:0;
}
.qr-logo-preview-info{flex:1;min-width:0}
.qr-logo-preview-name{
  font-size:0.85rem;
  font-weight:500;
  color:var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.qr-logo-preview-meta{font-size:0.72rem;color:var(--ink-3)}
.qr-logo-clear{
  background:none;
  border:none;
  color:var(--ink-3);
  cursor:pointer;
  padding:6px;
  border-radius:var(--r);
  transition:all 0.15s;
}
.qr-logo-clear:hover{color:var(--rose);background:var(--rose-pale)}

/* QR PREVIEW PANE */
.qr-preview-inner{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.75rem;
  background:#6b7280;
  overflow:auto;
}
.qr-preview-card{
  width:100%;
  max-width:380px;
  aspect-ratio:1/1;
  background:#fff;
  border-radius:var(--r-lg);
  box-shadow:0 4px 24px rgba(0,0,0,0.25);
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.qr-preview-card img{
  width:88%;
  height:88%;
  object-fit:contain;
}

/* TOOLBAR TAGLINE */
.toolbar-tagline{
  font-size:0.78rem;
  color:var(--ink-3);
  font-style:italic;
}

/* CHAR COUNT */
.editor-footer{
  padding:0.4rem 1rem;
  border-top:1px solid var(--paper-3);
  background:var(--paper-2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-shrink:0;
}
.char-count{font-size:0.72rem;color:var(--ink-4);font-variant-numeric:tabular-nums}
.char-count.warn{color:var(--amber)}

/* FILE UPLOAD WITHIN EDITOR PANE */
.upload-area{
  display:none;
  height:100%;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:2rem;
}
.upload-area.active{display:flex}
.upload-dropzone{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  flex:1;
  border:2px dashed var(--paper-3);
  border-radius:var(--r-lg);
  cursor:pointer;
  transition:all 0.15s;
  background:var(--paper-2);
  gap:0.75rem;
  padding:2rem 1rem;
}
.upload-dropzone:hover,.upload-dropzone.drag-over{border-color:var(--blue);background:var(--blue-pale)}
.upload-dropzone svg{width:40px;height:40px;color:var(--ink-3)}
.upload-dropzone-title{font-size:0.95rem;font-weight:500;color:var(--ink)}
.upload-dropzone-sub{font-size:0.78rem;color:var(--ink-3);text-align:center}
.upload-dropzone-sub strong{color:var(--blue);font-weight:500}
.upload-pill{
  display:none;
  width:100%;
  align-items:center;
  gap:10px;
  padding:0.75rem 1rem;
  background:var(--blue-pale);
  border:1px solid var(--paper-3);
  border-radius:var(--r);
  margin-top:0.75rem;
}
.upload-pill.active{display:flex}
.upload-pill-icon{
  width:32px;height:32px;
  border-radius:var(--r);
  background:var(--blue);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:0.65rem;font-weight:700;
  flex-shrink:0;
}
.upload-pill-info{flex:1;min-width:0}
.upload-pill-name{font-size:0.85rem;font-weight:500;color:var(--heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-pill-meta{font-size:0.72rem;color:var(--ink-3)}
.upload-pill-clear{background:none;border:none;color:var(--ink-3);cursor:pointer;padding:4px;border-radius:var(--r);transition:all 0.15s}
.upload-pill-clear:hover{color:var(--rose);background:var(--rose-pale)}

/* PREVIEW PANE */
.preview-inner{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:1.25rem;
  background:#6b7280;
  overflow:auto;
  gap:0;
}
/* A4 document shadow */
.preview-sheet{
  width:100%;
  max-width:620px;
  background:#fff;
  box-shadow:0 4px 24px rgba(0,0,0,0.25);
  border-radius:1px;
  overflow:hidden;
  position:relative;
  flex-shrink:0;
  /* A4 aspect ratio: 1:1.414 */
  aspect-ratio:1/1.414;
  transition:all 0.2s;
}
.preview-sheet.landscape{aspect-ratio:1.414/1}
.preview-sheet iframe{
  width:100%;
  height:100%;
  border:none;
  display:block;
}
/* PDF embed inside the preview sheet */
.preview-sheet embed{
  width:100%;
  height:100%;
  border:none;
  display:block;
}
.preview-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1rem;
  color:var(--ink-3);
  padding:2rem;
}
.preview-placeholder svg{width:48px;height:48px;opacity:0.4}
.preview-placeholder p{font-size:0.88rem;text-align:center;line-height:1.6;max-width:240px}
.preview-placeholder p strong{font-weight:600;color:var(--ink-2)}

/* Hint text in preview footer (left side) */
.preview-foot-hint{
  font-size:0.72rem;
  color:var(--ink-3);
  display:flex;
  align-items:center;
  gap:6px;
  min-height:18px;
}
.preview-foot-hint.warn{color:var(--amber)}
.preview-foot-hint svg{width:12px;height:12px;flex-shrink:0}

/* Preview toolbar at bottom of preview pane */
.preview-footer{
  padding:0.5rem 1rem;
  border-top:1px solid var(--paper-3);
  background:var(--paper-2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-shrink:0;
  gap:8px;
}
.preview-status{
  font-size:0.72rem;
  color:var(--ink-3);
  display:flex;
  align-items:center;
  gap:6px;
}
.preview-status .dot{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--ink-4);
  flex-shrink:0;
}
.preview-status .dot.loading{background:var(--amber);animation:pulse 0.8s infinite}
.preview-status .dot.ready{background:var(--forest)}
.preview-status .dot.stale{background:var(--amber)}
.preview-status .dot.error{background:var(--rose)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* LOADING SPINNER over preview */
.preview-loading{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(2px);
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:0.75rem;
  z-index:5;
}
.preview-loading.active{display:flex}
.spinner{
  width:32px;height:32px;
  border:3px solid var(--paper-3);
  border-top-color:var(--blue);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner-text{font-size:0.82rem;color:var(--ink-2);font-weight:500}


/* ── RESPONSIVE ── */
@media(max-width:900px){
  .nav-links{display:none}
  .nav-menu-btn{display:block}
  .inner,.nav-inner,.breadcrumb-inner,.workspace-inner,.page-header-inner{padding:0 1.5rem}
  .split-pane{grid-template-columns:1fr;min-height:auto}
  .html-editor{min-height:300px}
  .preview-inner{min-height:340px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2.5rem}
  .info-strip-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .footer-grid{grid-template-columns:1fr}
  .toolbar{flex-direction:column;align-items:stretch}
  .toolbar-left,.toolbar-right{justify-content:flex-start}
}