:root{
  --bg: #0B2A22;
  --bg-deep: #071D17;
  --panel: #0F332A;
  --panel-hi: #12392F;
  --gold: #C9A227;
  --gold-soft: #E8C765;
  --gold-dim: rgba(201,162,39,0.30);
  --ivory: #F3ECD9;
  --ivory-dim: #B9CFC5;
  --muted: #7FA096;
  --border: rgba(201,162,39,0.22);
  --danger: #C0523F;

  --parchment: #F8F0DC;
  --parchment-edge: #ECDCAF;
  --ink: #2A1B10;
  --ink-dim: #6E5A3E;

  --radius: 12px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(circle at 88% -5%, rgba(201,162,39,0.10), transparent 42%),
    radial-gradient(circle at -5% 105%, rgba(201,162,39,0.07), transparent 45%),
    var(--bg);
  color:var(--ivory);
  font-family:'Cairo', sans-serif;
  min-height:100vh;
}
::selection{ background:var(--gold); color:var(--bg-deep); }
:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:2px; border-radius:4px; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

.app{
  display:grid;
  grid-template-columns: 300px 1fr;
  min-height:100vh;
}

/* ---- Sidebar ---- */
.sidebar{
  background:
    linear-gradient(180deg, rgba(201,162,39,0.05), transparent 120px),
    var(--bg-deep);
  border-inline-start:1px solid var(--border);
  padding:26px 18px 40px;
  overflow-y:auto;
  max-height:100vh;
  position:sticky;
  top:0;
  scrollbar-width:thin;
  scrollbar-color:var(--gold-dim) transparent;
}
.sidebar::-webkit-scrollbar{ width:6px; }
.sidebar::-webkit-scrollbar-thumb{ background:var(--gold-dim); border-radius:6px; }

.brand{ display:flex; align-items:flex-start; gap:11px; margin-bottom:20px; }
.brand svg{ flex-shrink:0; margin-top:2px; filter:drop-shadow(0 0 6px rgba(201,162,39,0.35)); }
.brand-text h1{ font-size:17.5px; letter-spacing:.01em; margin:0 0 4px; color:var(--gold-soft); font-weight:700; }
.brand-sub{ font-size:12px; color:var(--muted); margin:0; line-height:1.55; }

.sidebar-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 13px; margin-bottom:18px;
  background:rgba(201,162,39,0.07);
  border:1px solid var(--border);
  border-radius:10px;
  font-size:12.5px;
}
.counter{ display:flex; align-items:baseline; gap:4px; color:var(--ivory-dim); }
.counter strong{ color:var(--gold-soft); font-size:15px; font-weight:700; }
.link-btn{
  background:none; border:none; padding:0; margin:0;
  color:var(--gold-soft); font-size:12px; font-weight:600;
  cursor:pointer; text-decoration:underline; text-underline-offset:3px;
  display:inline-flex; align-items:center; gap:4px;
  transition:color .15s ease;
}
.link-btn:hover{ color:var(--gold); }
.link-btn .ic{ font-size:13px; }

.rule-group{
  margin-bottom:9px; border-radius:10px; overflow:hidden;
  background:rgba(255,255,255,0.015);
  border:1px solid transparent;
}
.rule-group[open]{ border-color:var(--border); }
.rule-group summary{
  display:flex; align-items:center; gap:9px;
  list-style:none; cursor:pointer; user-select:none;
  padding:10px 8px;
  font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
  transition:color .15s ease;
}
.rule-group summary:hover{ color:var(--ivory-dim); }
.rule-group summary::-webkit-details-marker{ display:none; }
.rule-group summary .chevron{
  transition:transform .2s var(--ease); font-size:10px; color:var(--gold); flex-shrink:0;
  display:inline-block;
}
.rule-group:not([open]) summary .chevron{ transform:rotate(-90deg); }
.group-name{ flex:1; }
.group-toggle{
  font-family:'Cairo', sans-serif; font-size:10.5px; font-weight:600;
  padding:3px 10px; border-radius:20px; border:1px solid var(--border);
  background:transparent; color:var(--ivory-dim); cursor:pointer;
  text-transform:none; letter-spacing:normal; transition:all .15s ease;
  flex-shrink:0;
}
.group-toggle:hover{ background:var(--gold); color:var(--bg-deep); border-color:var(--gold); }

.rule-rows{ padding:2px 4px 8px; }
.rule-row{
  display:flex; align-items:center; gap:10px; padding:7px 8px;
  border-radius:8px; cursor:pointer; transition:background .15s ease;
}
.rule-row:hover{ background:rgba(201,162,39,0.09); }
.rule-row input[type="checkbox"]{ width:15px; height:15px; accent-color:var(--gold); flex-shrink:0; cursor:pointer; }
.rule-row input[type="color"]{
  width:24px; height:24px; border:2px solid var(--border); border-radius:7px;
  padding:0; background:none; cursor:pointer; flex-shrink:0;
}
.rule-label{ display:flex; flex-direction:column; line-height:1.3; font-size:13px; color:var(--ivory-dim); }
.rule-label small{ font-family:'Amiri', serif; color:var(--muted); font-size:13.5px; }

/* ---- Main ---- */
.workspace{ display:flex; flex-direction:column; min-height:100vh; }
.topbar{
  padding:24px 34px; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(201,162,39,0.06), transparent);
}
.topbar h2{ margin:0 0 6px; font-size:21px; color:var(--gold-soft); letter-spacing:.005em; font-weight:700; }
.topbar p{ margin:0; color:var(--muted); font-size:13.5px; line-height:1.65; max-width:62ch; }
.ornament-strip{
  height:7px;
  background-image: repeating-linear-gradient(135deg, var(--gold) 0 6px, transparent 6px 14px);
  opacity:.32;
}

.panels{ flex:1; display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:20px; background:var(--bg); }
.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  display:flex; flex-direction:column; min-height:0;
  overflow:hidden;
  animation:rise .5s var(--ease) both;
}
.panel:nth-child(2){ animation-delay:.06s; }
@keyframes rise{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }

.panel-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 18px; border-bottom:1px solid var(--border);
  background:var(--panel-hi);
}
.panel-header h3{ margin:0; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.actions{ display:flex; gap:8px; }

button{
  font-family:'Cairo', sans-serif; font-size:12.5px; font-weight:600;
  padding:8px 15px; border-radius:8px; border:1px solid var(--border);
  background:transparent; color:var(--ivory); cursor:pointer; transition: all .15s ease;
  display:inline-flex; align-items:center; gap:6px;
}
button .ic{ font-size:13px; line-height:1; }
button:hover{ background:var(--gold); color:var(--bg-deep); border-color:var(--gold); }
button:active{ transform:translateY(1px); }
button.primary{ background:var(--gold); color:var(--bg-deep); }
button.primary:hover{ background:var(--gold-soft); }
#clearBtn:hover{ background:var(--danger); border-color:var(--danger); color:var(--ivory); }

/* Parchment reading surfaces — the illuminated page */
.parchment-wrap{
  flex:1; position:relative; margin:16px; border-radius:9px; min-height:0; display:flex;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,0.5), transparent 40%),
    linear-gradient(160deg, var(--parchment), var(--parchment-edge));
  box-shadow: inset 0 0 0 1px rgba(201,162,39,0.55), 0 8px 24px rgba(0,0,0,0.28);
}
.parchment-wrap::before,
.parchment-wrap::after,
.parchment-wrap .corner-tl,
.parchment-wrap .corner-br{
  content:''; position:absolute; width:26px; height:26px; pointer-events:none;
  border:2px solid var(--gold);
  opacity:.75;
}
.parchment-wrap::before{ top:8px; inset-inline-start:8px; border-inline-end:none; border-bottom:none; border-radius:9px 0 0 0; }
.parchment-wrap::after{ bottom:8px; inset-inline-end:8px; border-inline-start:none; border-top:none; border-radius:0 0 9px 0; }

textarea#inputText{
  flex:1; resize:none; border:none; outline:none; background:transparent; color:var(--ink);
  font-family:'Amiri', serif; font-size:25px; line-height:2.15; padding:26px 30px; direction:rtl;
}
textarea#inputText::placeholder{ color:var(--ink-dim); font-family:'Cairo', sans-serif; font-size:13.5px; }
.result-output{
  flex:1; overflow-y:auto; padding:26px 30px; font-family:'Amiri', serif;
  font-size:25px; line-height:2.15; direction:rtl; white-space:pre-wrap; color:var(--ink);
}
.result-output .placeholder{ font-family:'Cairo', sans-serif; font-size:13.5px; color:var(--ink-dim); }
.result-output::-webkit-scrollbar, textarea#inputText::-webkit-scrollbar{ width:7px; }
.result-output::-webkit-scrollbar-thumb{ background:rgba(201,162,39,0.45); border-radius:6px; }

.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--gold); color:var(--bg-deep); padding:11px 22px; border-radius:9px;
  font-size:13px; font-weight:700; opacity:0; pointer-events:none; transition:all .25s var(--ease); z-index:50;
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width: 900px){
  .app{ grid-template-columns:1fr; }
  .sidebar{ position:relative; max-height:none; }
  .panels{ grid-template-columns:1fr; padding:14px; gap:14px; }
  textarea#inputText, .result-output{ font-size:22px; padding:20px; }
}

/* ---- Print / Save-as-PDF ----
   Uses the browser's own text engine (correct Arabic shaping & diacritic
   placement) instead of an html2canvas snapshot, which mispositions
   combining marks and causes overlapping glyphs.
   Elements are removed with display:none (not just hidden) so they don't
   reserve empty page space and cause blank leading pages. */
@media print{
  @page{ margin:16mm; }
  html, body{ height:auto; background:#fff; }
  .sidebar, .topbar, .ornament-strip, .toast,
  .panel:first-of-type, .panel-header{ display:none !important; }

  .app{ display:block; min-height:0; }
  .workspace{ display:block; min-height:0; }
  .panels{ display:block; padding:0; gap:0; background:#fff; }
  .panel{ display:block; border:none; border-radius:0; }
  .parchment-wrap{
    margin:0; border-radius:0; box-shadow:none; background:#fff; display:block;
  }
  .parchment-wrap::before, .parchment-wrap::after{ display:none; }
  .result-output{
    overflow:visible; height:auto; padding:0;
    font-size:20pt; line-height:2.1; color:#1a1a1a; white-space:pre-wrap;
  }
}

/* ---- Paste-help modal ---- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(5,15,12,0.72);
  display:none; align-items:center; justify-content:center;
  padding:24px; z-index:100;
  animation:fadeIn .18s ease;
}
.modal-overlay.show{ display:flex; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

.modal-box{
  position:relative;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  max-width:560px; width:100%;
  max-height:88vh; overflow-y:auto;
  padding:26px 26px 24px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  animation:rise .25s var(--ease) both;
}
.modal-box h3{ margin:0 0 12px; font-size:16.5px; color:var(--gold-soft); font-weight:700; }
.modal-box p{ margin:0 0 16px; font-size:13.5px; line-height:1.85; color:var(--ivory-dim); }
.modal-box .modal-note{ font-size:12.5px; color:var(--muted); }
.modal-img{
  width:100%; border-radius:9px; border:1px solid var(--border);
  margin-bottom:16px; display:block;
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
}
.modal-close{
  position:absolute; top:14px; inset-inline-end:14px;
  width:28px; height:28px; border-radius:50%;
  border:1px solid var(--border); background:transparent; color:var(--ivory-dim);
  font-size:13px; padding:0; display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{ background:var(--danger); border-color:var(--danger); color:var(--ivory); }
.modal-check{
  display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ivory-dim);
  cursor:pointer; user-select:none;
}
.modal-check input{ accent-color:var(--gold); width:14px; height:14px; }