/* ── Tool intro banner ── */
.va-tool-page{background:#f4f6f9;min-height:calc(100vh - 200px)}
.va-tool-intro{background:linear-gradient(135deg,#06111f 0%,#0b1e35 60%,#112240 100%);position:relative;overflow:hidden;border-bottom:2px solid #d4930a}
.va-tool-intro::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 80% 50%,rgba(26,95,180,.18) 0%,transparent 70%)}
.va-tool-intro-inner{max-width:960px;margin:0 auto;padding:32px 24px 26px;position:relative;text-align:center}
.va-tool-title{font-size:clamp(22px,4.5vw,36px);font-weight:900;color:#fff;line-height:1.2;margin-bottom:8px}
.va-tool-subtitle{font-size:14px;color:rgba(255,255,255,.65);line-height:1.65;max-width:560px;margin:0 auto}
.va-tool-badges{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;justify-content:center}
.va-tool-badges .vbadge{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.8);padding:5px 12px;border-radius:20px;font-size:11px;display:flex;align-items:center;gap:5px}
.va-tool-shell{padding-top:0}

:root{
  --ink:#0d1117;--ink2:#1a2332;
  --paper:#f8f6f1;--paper2:#f0ede4;
  --blue:#1a3a6b;--blue2:#1e4a8a;
  --gold:#b8940a;--gold2:#d4ac1a;--gold3:#f5d060;
  --teal:#0a5c52;--teal2:#0d7a6e;
  --red:#8b1a1a;--red2:#b91c1c;
  --green:#14532d;--green2:#166534;
  --border:#d8d0c0;--muted:#7a7060;
  --white:#ffffff;--bg:#f4f1ea;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Cairo',sans-serif;background:var(--bg);color:var(--ink);direction:rtl;min-height:100vh}

/* ── HEADER ── */
.header{
  background:var(--ink);
  border-bottom:3px solid var(--gold2);
  position:relative;overflow:hidden;
}
.header::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(26,58,107,.3) 0%,transparent 60%);
}
.header-inner{max-width:960px;margin:0 auto;padding:28px 24px 22px;position:relative}
.brand{display:flex;align-items:center;gap:11px;margin-bottom:20px}
.brand-mark{
  width:38px;height:38px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-family:'Libre Baskerville',serif;font-size:15px;font-weight:700;color:var(--ink);
}
.brand-name{font-size:15px;font-weight:700;color:#fff;letter-spacing:.4px}
.brand-name span{color:var(--gold3)}
.header-layout{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.header h1{font-family:'Amiri',serif;font-size:clamp(24px,4.5vw,38px);font-weight:700;color:#fff;line-height:1.2;margin-bottom:8px;letter-spacing:.5px}
.header h1 em{color:var(--gold3);font-style:normal}
.header p{font-size:13px;color:rgba(255,255,255,.6);line-height:1.65;max-width:520px}
.header-doc{
  width:72px;height:90px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(184,148,10,.3);
  border-radius:6px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;flex-shrink:0;
}
.header-doc .doc-icon{font-size:28px}
.header-doc .doc-label{font-size:8px;color:rgba(255,255,255,.4);letter-spacing:1.5px;text-align:center}
.badges{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap}
.badge{border:1px solid rgba(184,148,10,.25);color:rgba(255,255,255,.7);padding:4px 11px;border-radius:3px;font-size:10px;letter-spacing:.4px;background:rgba(184,148,10,.06)}

/* ── PROGRESS ── */
.prog-strip{background:rgba(0,0,0,.25);border-top:1px solid rgba(184,148,10,.12);padding:0 24px}
.prog-inner{max-width:960px;margin:0 auto;display:flex;align-items:center;padding:10px 0}
.pstep{display:flex;align-items:center;gap:6px;flex:1;opacity:.4;transition:opacity .3s}
.pstep.active{opacity:1}
.pstep.done{opacity:.7}
.pstep-dot{width:26px;height:26px;border-radius:50%;border:2px solid rgba(184,148,10,.35);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:rgba(255,255,255,.45);flex-shrink:0;transition:all .3s}
.pstep.active .pstep-dot{background:var(--gold2);border-color:var(--gold2);color:var(--ink)}
.pstep.done .pstep-dot{background:var(--teal2);border-color:var(--teal2);color:#fff}
.pstep-lbl{font-size:10px;color:rgba(255,255,255,.4);white-space:nowrap}
.pstep.active .pstep-lbl{color:var(--gold3);font-weight:700}
.pstep.done .pstep-lbl{color:rgba(255,255,255,.65)}
.pline{flex:1;height:1px;background:rgba(255,255,255,.08);margin:0 6px}

/* ── MAIN ── */
.main{max-width:960px;margin:0 auto;padding:26px 24px 80px}

/* ── CARD ── */
.card{background:var(--white);border-radius:12px;border:1px solid var(--border);box-shadow:0 2px 18px rgba(0,0,0,.06);margin-bottom:14px;overflow:hidden}
.card-hd{padding:16px 22px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:11px;background:linear-gradient(135deg,#fafaf8,var(--paper))}
.card-ic{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.ic-blue{background:#eef3fa;border:1px solid #c0d0e8}
.ic-gold{background:#fdf8ec;border:1px solid #e8d898}
.ic-teal{background:#eef8f6;border:1px solid #a0d8d0}
.ic-red{background:#fdf0f0;border:1px solid #e8c0c0}
.ic-green{background:#f0fdf4;border:1px solid #a0e0b0}
.card-title{font-size:14px;font-weight:700;color:var(--ink)}
.card-sub{font-size:11px;color:var(--muted);margin-top:1px}
.card-body{padding:18px 22px}

/* ── FORM ── */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px}
@media(max-width:580px){.grid2,.grid3{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:11px;font-weight:700;color:var(--ink);letter-spacing:.3px}
.req{color:var(--red2)}
.field select,.field input,.field textarea{
  padding:9px 12px;border:1.5px solid var(--border);border-radius:8px;
  font-family:'Cairo',sans-serif;font-size:13px;color:var(--ink);
  background:#fff;outline:none;transition:border .2s,box-shadow .2s;direction:rtl;
}
.field select:focus,.field input:focus,.field textarea:focus{border-color:var(--gold2);box-shadow:0 0 0 3px rgba(184,148,10,.1)}
.field select.err,.field input.err{border-color:var(--red2)}
.field textarea{resize:vertical;min-height:80px;line-height:1.6}

/* ── CHIPS ── */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{padding:6px 14px;border-radius:5px;border:1.5px solid var(--border);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;background:#fff;color:var(--ink);user-select:none}
.chip:hover{border-color:var(--gold2);color:var(--gold)}
.chip.sel{background:var(--ink);border-color:var(--ink);color:var(--gold3)}

/* ── TONE SELECTOR ── */
.tone-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:500px){.tone-cards{grid-template-columns:1fr}}
.tone-card{border:2px solid var(--border);border-radius:10px;padding:13px;cursor:pointer;transition:all .25s;text-align:center;background:#fff}
.tone-card:hover{border-color:var(--gold2);background:#fdf8ec}
.tone-card.sel{border-color:var(--ink);background:var(--ink);color:#fff}
.tone-icon{font-size:22px;margin-bottom:5px}
.tone-name{font-size:13px;font-weight:800;margin-bottom:2px}
.tone-desc{font-size:10px;opacity:.65;line-height:1.4}

/* ── BUTTONS ── */
.btn{padding:11px 22px;border-radius:8px;border:none;font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:7px}
.btn-primary{background:var(--ink);color:var(--gold3);letter-spacing:.4px}
.btn-primary:hover{background:#1a2535;transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.2)}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--ink);font-weight:800}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(184,148,10,.3)}
.btn-gold:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-outline{background:transparent;color:var(--ink);border:2px solid var(--border)}
.btn-outline:hover{border-color:var(--gold2);color:var(--gold)}
.btn-teal{background:linear-gradient(135deg,var(--teal),var(--teal2));color:#fff}
.btn-teal:hover{transform:translateY(-1px)}
.btn-row{display:flex;gap:9px;justify-content:flex-end;margin-top:6px;flex-wrap:wrap}

/* ── LOADING ── */
.loading-screen{display:none;text-align:center;padding:50px 24px}
.loading-screen.active{display:block}
.quill-anim{font-size:48px;animation:quillwrite 1.5s ease-in-out infinite}
@keyframes quillwrite{0%,100%{transform:rotate(-10deg) translateY(0)}50%{transform:rotate(10deg) translateY(-8px)}}
.loading-title{font-family:'Amiri',serif;font-size:22px;color:var(--ink);margin:16px 0 6px;letter-spacing:.5px}
.loading-sub{font-size:13px;color:var(--muted);line-height:1.6}
.loading-steps{display:flex;flex-direction:column;gap:8px;max-width:280px;margin:18px auto 0}
.lst{display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:7px;background:#fff;border:1px solid var(--border);font-size:12px;color:var(--muted);transition:all .4s}
.lst.done{color:var(--teal2);border-color:#a7f3d0;background:#f0fdf8}
.lst.active{color:var(--gold);border-color:#e8d898;background:#fdf8ec}
.lst-dot{width:8px;height:8px;border-radius:50%;background:var(--border);flex-shrink:0}
.lst.done .lst-dot{background:var(--teal2)}
.lst.active .lst-dot{background:var(--gold2);animation:pulse .9s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ── EDITOR SECTION ── */
#editorSection{display:none}
.editor-toolbar{
  background:var(--ink);border-radius:10px 10px 0 0;
  padding:12px 18px;display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px;
}
.toolbar-title{font-size:13px;font-weight:700;color:var(--gold3);display:flex;align-items:center;gap:7px}
.toolbar-actions{display:flex;gap:7px;flex-wrap:wrap}
.toolbar-btn{
  padding:6px 14px;border-radius:6px;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);
  font-family:'Cairo',sans-serif;font-size:11px;font-weight:700;
  cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:5px;
}
.toolbar-btn:hover{background:rgba(255,255,255,.15);color:#fff}
.toolbar-btn.primary-tb{background:var(--gold2);color:var(--ink);border-color:var(--gold2)}
.toolbar-btn.primary-tb:hover{background:var(--gold3)}

.letter-editor-wrap{
  background:#fff;border:1px solid var(--border);border-top:none;
  border-radius:0 0 10px 10px;overflow:hidden;
}
.letter-meta-bar{
  background:#f8f6f1;border-bottom:1px solid var(--border);
  padding:10px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.lmb-item{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px}
.lmb-item strong{color:var(--ink)}
.letter-editor{
  min-height:500px;padding:32px 36px;
  font-family:'Libre Baskerville',Georgia,serif;
  font-size:13px;line-height:1.85;color:var(--ink);
  outline:none;
  /* Force LTR — the parent theme is RTL so without !important the editor
     inherits direction:rtl and English letters jumble. unicode-bidi:plaintext
     also prevents the browser from auto-mirroring punctuation. */
  direction:ltr !important;
  text-align:left !important;
  unicode-bidi:plaintext;
  white-space:pre-wrap;word-wrap:break-word;
  cursor:text;
}
.letter-editor *{
  /* Ensure every child inside contenteditable stays LTR even when the AI
     occasionally inserts a non-Latin character. */
  direction:ltr !important;
  text-align:left !important;
  unicode-bidi:plaintext;
}
.letter-editor:focus{outline:none}
.letter-editor[contenteditable]:empty:before{
  content:attr(data-placeholder);color:#aaa;font-style:italic;
}
.word-count-bar{
  background:#f8f6f1;border-top:1px solid var(--border);
  padding:8px 18px;display:flex;align-items:center;justify-content:space-between;
}
.wc-text{font-size:11px;color:var(--muted)}
.wc-badge{font-size:10px;font-weight:700;padding:3px 9px;border-radius:4px}
.wc-good{background:#f0fdf4;color:var(--green)}
.wc-short{background:#fffbeb;color:var(--gold)}
.wc-long{background:#fef2f2;color:var(--red2)}

/* ── QUALITY CHECK ── */
.quality-panel{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:16px 20px;margin-top:14px}
.qp-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:12px;display:flex;align-items:center;gap:7px}
.qp-items{display:flex;flex-direction:column;gap:7px}
.qp-item{display:flex;align-items:center;gap:9px;font-size:12px;padding:6px 0;border-bottom:1px solid #f3f0e8}
.qp-item:last-child{border-bottom:none}
.qp-icon{font-size:14px;flex-shrink:0}
.qp-label{flex:1;color:var(--ink2)}
.qp-status{font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;flex-shrink:0}
.qs-ok{background:#f0fdf4;color:var(--green)}
.qs-warn{background:#fffbeb;color:var(--gold)}
.qs-fail{background:#fef2f2;color:var(--red2)}

/* ── SECTION ── */
.form-section{display:none}
.form-section.active{display:block}
.sec-title{font-family:'Amiri',serif;font-size:24px;font-weight:700;color:var(--ink);margin-bottom:4px;letter-spacing:.5px}
.sec-sub{font-size:13px;color:var(--muted);margin-bottom:20px;line-height:1.6}

/* ── SAVE INDICATOR ── */
.save-ind{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--gold3);padding:7px 16px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.4px;opacity:0;transition:opacity .3s;pointer-events:none;z-index:99;border:1px solid rgba(184,148,10,.25)}
.save-ind.show{opacity:1}

/* ── INFO NOTE ── */
.info-note{background:#fdf8ec;border:1px solid #e8d898;border-radius:7px;padding:10px 14px;font-size:12px;color:var(--gold);display:flex;align-items:flex-start;gap:7px;margin-bottom:16px}

/* ── LETTER PREVIEW IN PDF ── */
.letter-preview-box{
  background:linear-gradient(135deg,#fdfbf7,var(--paper));
  border:1px solid var(--border);border-radius:10px;
  padding:20px;margin-top:14px;
}
.lpb-title{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:12px;text-transform:uppercase;letter-spacing:.8px}
.lpb-content{
  font-family:'Libre Baskerville',Georgia,serif;
  font-size:12px;line-height:1.8;color:var(--ink);
  direction:ltr;text-align:left;white-space:pre-wrap;
  max-height:200px;overflow:hidden;position:relative;
}
.lpb-content::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:50px;
  background:linear-gradient(transparent,#fdfbf7);
}