:root{
  --ink:#241E15;
  --ink-soft:#382D1D;
  --paper:#EDE4D3;
  --paper-card:#FBF8F1;
  --line:#DDCFAE;
  --stamp-sage:#6B7A5C;
  --stamp-brass:#AD8536;
  --stamp-red:#A63A2E;
  --gold:#BE9A4F;
  --gold-soft:rgba(190,154,79,0.14);
  --text:#241E15;
  --text-soft:#7C7157;
  --shadow-card:0 1px 2px rgba(36,30,21,0.04), 0 10px 28px -14px rgba(36,30,21,0.22);
  --font-display:'Zilla Slab', serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(190,154,79,0.10), transparent 60%),
    var(--paper);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.5;
}
.wrap{
  max-width:1080px;
  margin:0 auto;
  padding:32px 24px 64px;
}
header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 var(--gold-soft);
  padding-bottom:20px;
  margin-bottom:24px;
  gap:16px;
  flex-wrap:wrap;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--text-soft);
  margin:0 0 6px;
}
.wordmark{
  font-family:var(--font-display);
  font-weight:700;
  font-size:34px;
  color:var(--ink);
  margin:0;
  letter-spacing:0.5px;
}
.tagline{
  font-size:14px;
  color:var(--text-soft);
  margin:4px 0 0;
}
.header-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.dossier-tag{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:3px;
  padding:6px 10px;
  background:var(--paper-card);
  white-space:nowrap;
}
.trial-tag{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-soft);
  white-space:nowrap;
}
.trial-tag.low{color:var(--stamp-red); font-weight:600;}
.logout-link{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-soft);
  background:none;
  border:none;
  cursor:pointer;
  text-decoration:underline;
  padding:0;
}
.tabnav{
  display:flex;
  gap:6px;
  margin-bottom:24px;
  flex-wrap:wrap;
}
.tabnav-btn{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:11px 18px;
  border:1px solid var(--line);
  border-bottom:none;
  background:var(--paper-card);
  color:var(--text-soft);
  border-radius:3px 3px 0 0;
  cursor:pointer;
  box-shadow:inset 0 -3px 0 transparent;
}
.tabnav-btn.active{
  color:var(--ink);
  background:#FEFCF5;
  box-shadow:inset 0 -3px 0 var(--gold);
}
.panel{display:none;}
.panel.active{display:block;}
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:start;
}
@media (max-width:860px){
  .grid{grid-template-columns:1fr;}
}
.card{
  position:relative;
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:6px;
  padding:28px 24px 24px;
  margin-top:16px;
  box-shadow:var(--shadow-card);
}
.card.full{margin-top:16px;}
.tab{
  position:absolute;
  top:-16px;
  left:20px;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:7px 16px 5px;
  border-radius:3px 3px 0 0;
  clip-path:polygon(6% 0, 94% 0, 100% 100%, 0% 100%);
}
label{
  display:block;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text-soft);
  margin:18px 0 6px;
}
label.first{margin-top:0;}
input[type=text], input[type=date], input[type=number], input[type=password], select, textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:14px;
  color:var(--text);
  background:#FEFCF5;
  border:1px solid var(--line);
  border-radius:3px;
  padding:9px 10px;
}
textarea{resize:vertical;}
input:focus, button:focus, select:focus, .seg-btn:focus{
  outline:2px solid var(--stamp-brass);
  outline-offset:1px;
}
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.pieces-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.pieces-list li{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13.5px;
}
.pieces-list input[type=checkbox]{
  width:15px;height:15px;
  accent-color:var(--ink);
  flex-shrink:0;
}
.add-piece-row{
  display:flex;
  gap:8px;
  margin-top:10px;
}
.add-piece-row input{flex:1;}
.btn-small{
  font-family:var(--font-mono);
  font-size:12px;
  background:transparent;
  border:1px solid var(--ink);
  color:var(--ink);
  border-radius:3px;
  padding:0 14px;
  cursor:pointer;
}
.btn-small:hover{background:var(--ink);color:var(--paper);}
.seg{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.seg-btn{
  font-family:var(--font-mono);
  font-size:12px;
  padding:8px 13px;
  border:1px solid var(--line);
  background:#FEFCF5;
  color:var(--text);
  border-radius:3px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:7px;
}
.seg-btn .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--text-soft);
}
.seg-btn.active{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}
.seg-btn.active .dot{background:var(--paper);}
.generate-btn{
  width:100%;
  margin-top:24px;
  padding:13px;
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--ink);
  border-radius:3px;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
  transition:background 0.15s, border-color 0.15s;
}
.generate-btn:hover{background:var(--ink-soft); border-color:var(--gold);}
.generate-btn:disabled{opacity:0.55;cursor:default;}
.reset-link{
  display:block;
  text-align:center;
  margin-top:10px;
  font-size:12px;
  color:var(--text-soft);
  background:none;
  border:none;
  cursor:pointer;
  font-family:var(--font-body);
  text-decoration:underline;
}
.validation{
  font-size:12.5px;
  color:var(--stamp-red);
  margin-top:10px;
  display:none;
}
.empty-state{
  border:1px dashed var(--line);
  border-radius:4px;
  padding:48px 20px;
  text-align:center;
  color:var(--text-soft);
  font-size:13.5px;
  font-style:italic;
}
.result{
  display:none;
  position:relative;
}
.channel-badge{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text-soft);
  border:1px solid var(--line);
  border-radius:3px;
  padding:3px 8px;
  margin-bottom:12px;
}
.letter{
  background:#FEFCF5;
  border:1px solid var(--line);
  border-radius:4px;
  padding:22px 20px;
  box-shadow:0 2px 0 rgba(36,30,21,0.06);
}
.letter.sms{
  border-radius:16px;
  max-width:88%;
  background:#F0E7D3;
}
.subject{
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
  margin:0 0 12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.body-text{
  white-space:pre-wrap;
  font-size:14px;
  color:var(--text);
  margin:0;
}
.stamp{
  position:absolute;
  top:-14px;
  right:6px;
  padding:9px 12px;
  border:3px double var(--stamp-sage);
  color:var(--stamp-sage);
  font-family:var(--font-mono);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:1px;
  text-transform:uppercase;
  text-align:center;
  border-radius:4px;
  transform:rotate(-7deg);
  background:rgba(255,255,255,0.85);
  line-height:1.3;
}
.stamp.brass{border-color:var(--stamp-brass);color:var(--stamp-brass);}
.stamp.red{border-color:var(--stamp-red);color:var(--stamp-red);}
.copy-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:14px;
}
.copy-feedback{
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--stamp-sage);
  opacity:0;
  transition:opacity 0.2s;
}
.copy-feedback.show{opacity:1;}
.error{
  display:none;
  font-size:13px;
  color:var(--stamp-red);
  margin-top:14px;
}
.upgrade-box{
  margin-top:14px;
  padding:16px;
  border:1px solid var(--gold);
  background:var(--gold-soft);
  border-radius:4px;
}
.upgrade-box p{
  margin:0 0 10px;
  font-size:13px;
  color:var(--text);
}
.upgrade-box .btn-small{
  border-color:var(--gold);
  color:var(--ink);
  padding:8px 16px;
}
.upgrade-box .btn-small:hover{background:var(--gold); color:var(--ink);}
.score-pill{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1px;
  padding:7px 15px;
  border-radius:3px;
  font-weight:600;
  margin-bottom:14px;
}
.score-pill.sage{background:rgba(107,122,92,0.14); color:var(--stamp-sage);}
.score-pill.brass{background:rgba(173,133,54,0.15); color:var(--stamp-brass);}
.score-pill.red{background:rgba(166,58,46,0.13); color:var(--stamp-red);}
.dossiers-note{
  font-size:12.5px;
  color:var(--text-soft);
  margin:0 0 18px;
}
.dossier-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.dossier-row:last-child{border-bottom:none;}
.dossier-main{flex:1; min-width:0;}
.dossier-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:4px;
  flex-wrap:wrap;
}
.dossier-client{font-weight:600; font-size:14px;}
.badge-type{
  font-family:var(--font-mono);
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  padding:2px 7px;
  border-radius:3px;
  border:1px solid currentColor;
}
.badge-type.relance{color:var(--stamp-brass);}
.badge-type.lead{color:var(--stamp-sage);}
.dossier-meta{font-family:var(--font-mono); font-size:11px; color:var(--text-soft);}
.dossier-detail{
  font-size:12.5px;
  color:var(--text-soft);
  margin-top:4px;
  max-width:560px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dossier-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.status-select{
  width:auto;
  font-family:var(--font-mono);
  font-size:11px;
  border:1px solid var(--line);
  border-radius:3px;
  padding:6px 8px;
  background:#FEFCF5;
  color:var(--text);
}
.delete-btn{
  background:none;
  border:none;
  color:var(--text-soft);
  cursor:pointer;
  font-size:16px;
  line-height:1;
  padding:4px;
}
.delete-btn:hover{color:var(--stamp-red);}
.dossiers-empty{
  padding:40px 0;
  text-align:center;
  color:var(--text-soft);
  font-style:italic;
  font-size:13.5px;
}
.count-badge{
  font-family:var(--font-mono);
  font-size:10px;
  background:var(--ink);
  color:var(--paper);
  border-radius:10px;
  padding:1px 7px;
  margin-left:6px;
}
footer{
  margin-top:44px;
  text-align:center;
  font-size:12px;
  color:var(--text-soft);
}
footer a{
  color:var(--text-soft);
  text-decoration:underline;
}
footer a:hover{color:var(--ink);}

/* ---------- Login / landing pages ---------- */
.center-wrap{
  max-width:420px;
  margin:0 auto;
  padding:80px 24px;
  text-align:center;
}
.login-card{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:4px;
  padding:32px 28px;
  margin-top:32px;
  text-align:left;
}
.login-card .generate-btn{margin-top:20px;}