/* ============================================================
   Nexora-style design system
   - Pure white canvas, sharp 1px black borders, no radius, no gradients
   - Inter for body, SF Mono for technical kickers
   - Tight headline tracking (-0.06em), enormous sizes
   - Signature accents: --nx-green (#0169fe) + --nx-blue (#0757f8)
   - "Skyline blocks" decoration in the dark band
   ============================================================ */

:root{
  --nx-ink:#111;
  --nx-bg:#fff;
  --nx-soft:#f6f6f6;
  --nx-line:#111;
  --nx-line-soft:#ddd;
  --nx-muted:#555;
  --nx-muted-2:#777;
  --nx-dark:#070b21;
  --nx-black:#080808;
  --nx-blue:#0757f8;
  --nx-blue-strong:#0554f8;
  --nx-green:#0169fe;
  --nx-err:#b00020;
  --nx-ok:#0a8f38;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%;margin:0}
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--nx-ink);
  background:var(--nx-bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p{margin:0}
button,input,textarea,select{font:inherit;color:inherit}

/* mono kicker block (■ 01 / DROP YOUR HTML) used for section labels */
.nx-mono{
  font-family:"SF Mono","SFMono-Regular","Roboto Mono","Courier New",monospace;
  letter-spacing:.04em;
}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"SF Mono","SFMono-Regular","Roboto Mono","Courier New",monospace;
  font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--nx-muted);
}
.kicker::before{
  content:"";width:11px;height:11px;display:inline-block;
  background:var(--nx-green);
}
.kicker.blue::before{background:var(--nx-blue)}
.kicker.ink::before{background:var(--nx-ink)}

/* ===== Top bar ===== */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 36px;border-bottom:1px solid var(--nx-line);
  background:var(--nx-bg);
  position:sticky;top:0;z-index:10;
}
.brand{display:flex;align-items:center;gap:14px}
.logo{
  width:34px;height:34px;background:var(--nx-ink);
  display:grid;place-items:center;color:#fff;font:700 14px/1 "SF Mono",monospace;
}
.brand h1{
  font-size:15px;font-weight:700;letter-spacing:-.01em;
}
.brand p{font-size:11px;color:var(--nx-muted);text-transform:uppercase;letter-spacing:.12em;margin-top:2px}

.actions{display:flex;gap:8px;align-items:stretch}
.page-size{
  display:flex;align-items:center;gap:10px;
  font-family:"SF Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--nx-muted);
  background:var(--nx-bg);border:1px solid var(--nx-line);
  padding:0 14px;height:42px;
}
.page-size select{
  background:transparent;border:0;outline:0;font-size:13px;
  color:var(--nx-ink);text-transform:none;letter-spacing:0;
  font-family:Inter,sans-serif;font-weight:600;
}
.mode-toggle{cursor:pointer}
.mode-toggle input{accent-color:var(--nx-green);margin:0}

/* ===== Layout ===== */
.layout{
  display:grid;grid-template-columns:minmax(380px,460px) 1fr;gap:0;
  height:calc(100vh - 77px);
}
.input-pane{
  background:var(--nx-bg);border-right:1px solid var(--nx-line);
  display:flex;flex-direction:column;overflow-y:auto;padding:32px 28px 0;
}
.preview-pane{
  background:var(--nx-soft);
  display:flex;flex-direction:column;overflow:hidden;
}

/* ===== Section heads ===== */
.section{padding:0 0 28px}
.section + .section{border-top:1px solid var(--nx-line);padding-top:28px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px}
.section-head h2{
  font-size:30px;line-height:.95;letter-spacing:-.04em;font-weight:800;
  margin-top:8px;
}
.pane-actions{display:flex;gap:8px}

/* ===== Buttons ===== */
.btn{
  appearance:none;cursor:pointer;
  border:1px solid var(--nx-line);background:var(--nx-bg);color:var(--nx-ink);
  padding:0 18px;height:46px;
  font:700 12px/1 "SF Mono",monospace;text-transform:uppercase;letter-spacing:.08em;
  display:inline-flex;align-items:center;gap:10px;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.btn:hover{background:var(--nx-ink);color:#fff}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--nx-bg)}
.btn.ghost:hover{background:var(--nx-blue);color:#fff;border-color:var(--nx-blue)}

/* Pixel-perfect / IDML / built-in PDF — outline-style cards */
.btn.card{
  flex-direction:column;align-items:flex-start;justify-content:center;
  height:auto;padding:18px 18px;gap:6px;
  text-transform:none;letter-spacing:0;font-family:Inter,sans-serif;font-weight:700;
  flex:1;
}
.btn.card .btn-title{font-size:15px;letter-spacing:-.01em}
.btn.card .btn-sub{
  font-size:11px;color:var(--nx-muted-2);font-weight:500;
  font-family:"SF Mono",monospace;text-transform:uppercase;letter-spacing:.06em;
}
.btn.card:hover{background:var(--nx-blue);color:#fff;border-color:var(--nx-blue);transform:translateY(-2px)}
.btn.card:hover .btn-sub{color:rgba(255,255,255,.78)}

/* The big one: native print = "Perfect PDF" */
.btn.perfect{
  width:100%;height:auto;padding:22px 22px;
  background:var(--nx-ink);color:#fff;border-color:var(--nx-ink);
  flex-direction:column;align-items:flex-start;gap:10px;
  text-transform:none;letter-spacing:0;font-family:Inter,sans-serif;
  position:relative;
}
.btn.perfect::after{
  content:"↗";position:absolute;right:22px;top:22px;font-size:22px;color:var(--nx-green);
}
.btn.perfect .btn-title{font-size:22px;font-weight:800;letter-spacing:-.03em}
.btn.perfect .btn-sub{
  font-size:11px;color:rgba(255,255,255,.62);font-weight:500;
  font-family:"SF Mono",monospace;text-transform:uppercase;letter-spacing:.06em;
}
.btn.perfect:hover{background:var(--nx-blue);border-color:var(--nx-blue)}
.btn.perfect:hover::after{color:#fff}

.export-row{display:flex;gap:0;margin-top:0}
.export-row .btn.card{border-left:0}
.export-row .btn.card:first-child{border-left:1px solid var(--nx-line)}

/* ===== Textarea ===== */
#htmlInput{
  width:100%;min-height:240px;flex:1;
  background:var(--nx-soft);border:1px solid var(--nx-line);
  color:var(--nx-ink);padding:16px;
  font:13px/1.55 "SF Mono","SFMono-Regular","Roboto Mono",monospace;
  resize:none;outline:none;
}
#htmlInput:focus{border-color:var(--nx-blue);background:#fff}

/* ===== Status ===== */
.status{
  margin-top:14px;padding:14px 16px;
  border:1px solid var(--nx-line);background:var(--nx-bg);
  font:13px/1.5 Inter,sans-serif;color:var(--nx-muted);
  min-height:48px;
}
.status.ok{border-color:var(--nx-green);color:var(--nx-ok)}
.status.err{border-color:var(--nx-err);color:var(--nx-err)}
.status.work{border-color:var(--nx-blue);color:var(--nx-blue)}
.status::before{
  content:"// ";font-family:"SF Mono",monospace;color:var(--nx-muted-2);
}

/* ===== Preview pane ===== */
.preview-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;border-bottom:1px solid var(--nx-line);background:var(--nx-bg);
}
.preview-head h2{font-size:14px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.preview-head h2::before{
  content:"";width:11px;height:11px;background:var(--nx-blue);display:inline-block;
}
.page-info{
  font-family:"SF Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--nx-muted-2);
}
.preview-wrap{
  flex:1;overflow:auto;padding:36px;display:flex;justify-content:center;align-items:flex-start;
  background:
    linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px),
    var(--nx-soft);
  background-size:36px 36px;
}
#preview{
  width:794px;min-height:1123px;background:#fff;border:1px solid var(--nx-line);border-radius:0;
  box-shadow:0 28px 80px rgba(0,0,0,.08);
}

/* ===== Skyline blocks (signature decoration in input pane) ===== */
.skyline{
  display:flex;align-items:flex-end;height:48px;margin-top:auto;
  padding-top:24px;border-top:1px solid var(--nx-line);gap:6px;
}
.skyline span{
  display:block;width:10px;background:var(--nx-ink);
}
.skyline span:nth-child(1){height:16px}
.skyline span:nth-child(2){height:36px}
.skyline span:nth-child(3){height:22px}
.skyline span:nth-child(4){height:44px;background:var(--nx-blue)}
.skyline span:nth-child(5){height:18px}
.skyline span:nth-child(6){height:30px}
.skyline span:nth-child(7){height:40px}
.skyline span:nth-child(8){height:14px;background:var(--nx-green)}
.skyline-meta{
  margin-left:auto;align-self:center;
  font:11px/1 "SF Mono",monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--nx-muted-2);
}

@media (max-width:980px){
  .layout{grid-template-columns:1fr;height:auto}
  #preview{width:100%}
}