/* ============ تم — مولّد أغلفة التقارير ============ */

/* الهوية مأخوذة من شعار «تم»: برتقالي على أرضية فحمية، ورماديات باردة
   قليلاً تطابق فضّة الشعار. لا تغيّر هذه القيم إلا مع تغيّر الشعار نفسه. */
:root{
  --bg:#F4F4F5;
  --surface:#FFFFFF;
  --surface-2:#EAEBEC;
  --ink:#1B1E20;
  --ink-2:#43484B;
  --muted:#6E7477;
  --rule:#DBDDDE;
  --rule-2:#C3C7C9;
  --brand:#AC5214;          /* برتقالي الشعار معمّقاً ليتجاوز 4.5:1 نصّاً على الورق */
  --brand-soft:#FBEBDD;
  --danger:#9E362D;
  --radius:12px;
  --shadow:0 1px 2px rgba(20,24,26,.05), 0 10px 30px -20px rgba(20,24,26,.55);
  --font:"Segoe UI","Noto Sans Arabic","Dubai",Tahoma,system-ui,sans-serif;
}
:root[data-theme="dark"]{
  --bg:#1B1E1F;
  --surface:#242829;
  --surface-2:#2D3132;
  --ink:#ECEDEE;
  --ink-2:#C9CDCF;
  --muted:#949A9D;
  --rule:#383C3E;
  --rule-2:#4A4F51;
  --brand:#F3961D;
  --brand-soft:#3B2610;
  --danger:#E58176;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -20px rgba(0,0,0,.9);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit;}

/* ---------- الشريط العلوي ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;background:var(--surface);border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:10px;}
.mark{
  width:42px;height:42px;border-radius:11px;display:block;object-fit:cover;
  background:#343839;
}
.brand-text{display:flex;flex-direction:column;line-height:1.15;}
.brand-text b{font-size:1.05rem;}
.brand-text small{color:var(--muted);font-size:.76rem;}

.top-tools{display:flex;align-items:center;gap:8px;}
.ghost-btn{
  background:transparent;border:1px solid var(--rule);border-radius:10px;
  width:40px;height:40px;cursor:pointer;font-size:1.05rem;flex:none;
}
.ghost-btn:hover{background:var(--surface-2);}

.offline-badge{
  background:var(--surface-2);border:1px solid var(--rule-2);color:var(--muted);
  border-radius:999px;padding:4px 12px;font-size:.76rem;font-weight:700;white-space:nowrap;
}
.offline-badge[hidden]{display:none;}
#installBtn[hidden]{display:none;}

.hero-note{
  margin:10px auto 0;font-size:.86rem;color:var(--brand);font-weight:600;
}

/* ---------- الهيدر ---------- */
.hero{max-width:760px;margin:0 auto;padding:34px 20px 6px;text-align:center;}
.hero h1{
  font-size:clamp(1.6rem,4.6vw,2.5rem);line-height:1.3;margin:0 0 10px;
  font-weight:700;text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--brand);}
.hero p{margin:0;color:var(--ink-2);max-width:56ch;margin-inline:auto;}

/* ---------- التخطيط ---------- */
.app{
  max-width:1240px;margin:0 auto;padding:26px 16px 10px;
  display:grid;grid-template-columns:1fr;gap:22px;align-items:start;
}
@media (min-width:960px){
  .app{grid-template-columns:minmax(0,1fr) minmax(0,440px);}
  .preview{position:sticky;top:88px;}
}

/* ---------- اللوحة ---------- */
.panel{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
.tabs{display:flex;border-bottom:1px solid var(--rule);background:var(--surface-2);}
.tab{
  flex:1;padding:13px 8px;background:transparent;border:0;cursor:pointer;
  font-weight:600;color:var(--muted);border-bottom:2px solid transparent;
}
.tab.is-on{color:var(--brand);border-bottom-color:var(--brand);background:var(--surface);}
.tabpane{display:none;padding:18px;}
.tabpane.is-on{display:block;}

fieldset{border:0;margin:0 0 20px;padding:0;}
fieldset:last-of-type{margin-bottom:6px;}
legend{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-bottom:10px;padding:0;
}

.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.field > span{font-size:.86rem;font-weight:600;color:var(--ink-2);}
.field > span small{font-weight:400;color:var(--muted);}
.field input,.field select,.field textarea{
  width:100%;padding:10px 12px;border:1px solid var(--rule-2);border-radius:9px;
  background:var(--bg);transition:border-color .12s,box-shadow .12s;
}
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .field textarea{background:#0E1815;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);
}
.field textarea{resize:vertical;min-height:46px;}
input[type="color"]{height:44px;padding:4px;cursor:pointer;}

.row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.row .grow{grid-column:span 1;}
.row .narrow{max-width:100%;}
@media (max-width:420px){ .row{grid-template-columns:1fr;} }

.inline-checks{display:flex;gap:18px;flex-wrap:wrap;margin:-2px 0 8px;}
.inline-checks .check{margin-bottom:0;font-size:.87rem;}
.check{display:flex;align-items:center;gap:9px;margin-bottom:9px;cursor:pointer;font-size:.93rem;}
.check input{width:18px;height:18px;accent-color:var(--brand);cursor:pointer;}

.seg{
  display:flex;gap:0;border:1px solid var(--rule-2);border-radius:10px;
  overflow:hidden;margin-bottom:18px;
}
.seg-btn{
  flex:1;padding:10px;background:var(--bg);border:0;cursor:pointer;font-weight:600;
  color:var(--muted);
}
.seg-btn.is-on{background:var(--brand);color:#fff;}
:root[data-theme="dark"] .seg-btn.is-on{color:#1B1E1F;}

.filerow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

/* ---------- الشعارات ---------- */
.logo-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.logo-list:empty{display:none;}
.logo-row{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--rule);border-radius:10px;padding:8px 10px;background:var(--bg);
}
.logo-pv{
  width:46px;height:46px;object-fit:contain;flex:none;border-radius:7px;padding:3px;
  border:1px solid var(--rule-2);
  /* رقعة شطرنجية تُظهر الشفافية بعد التفريغ */
  background-image:
    linear-gradient(45deg,#c9cdcf 25%,transparent 25%,transparent 75%,#c9cdcf 75%),
    linear-gradient(45deg,#c9cdcf 25%,transparent 25%,transparent 75%,#c9cdcf 75%);
  background-size:12px 12px;background-position:0 0,6px 6px;background-color:#fff;
}
.logo-mid{display:flex;align-items:center;gap:9px;flex:1;flex-wrap:wrap;min-width:0;}
.logo-slot{
  padding:6px 9px;border:1px solid var(--rule-2);border-radius:8px;background:var(--surface);
  font-size:.85rem;font-weight:600;flex:none;
}
.logo-cut{display:flex;align-items:center;gap:6px;font-size:.83rem;cursor:pointer;white-space:nowrap;}
.logo-cut input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer;}
.logo-tol{flex:1;min-width:80px;accent-color:var(--brand);cursor:pointer;}
.logo-tol[hidden]{display:none;}
.logo-row .del{
  background:none;border:0;color:var(--muted);cursor:pointer;font-size:1.05rem;
  padding:2px 6px;border-radius:6px;flex:none;
}
.logo-row .del:hover{color:var(--danger);background:var(--surface-2);}
#logoBtn:disabled{opacity:.5;cursor:not-allowed;}

.hint{font-size:.84rem;color:var(--muted);margin:8px 0 0;}

.lead{
  background:var(--brand-soft);border-inline-start:3px solid var(--brand);
  padding:13px 15px;margin:0 0 20px;font-size:.92rem;line-height:1.75;color:var(--ink-2);
}
.lead b{color:var(--ink);display:block;margin-bottom:3px;}

.outline-list{
  margin:0;padding-inline-start:24px;font-size:.9rem;color:var(--ink-2);
  display:flex;flex-direction:column;gap:3px;
}
.outline-list li::marker{color:var(--muted);font-variant-numeric:tabular-nums;}
.outline-list li.auto{color:var(--brand);font-weight:600;}

.primary-btn.wide{width:100%;flex:none;margin-top:4px;}
.primary-btn:disabled{opacity:.6;cursor:progress;}

/* ---------- الأنماط والألوان ---------- */
.count{font-weight:400;color:var(--muted);letter-spacing:0;text-transform:none;font-size:.72rem;}

.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px;}
.chip{
  border:1px solid var(--rule-2);background:var(--bg);color:var(--muted);
  border-radius:999px;padding:6px 14px;font-size:.83rem;font-weight:600;cursor:pointer;
  transition:border-color .12s,color .12s,background .12s;
}
.chip:hover{border-color:var(--brand);color:var(--brand);}
.chip.is-on{background:var(--brand);border-color:var(--brand);color:#fff;}
:root[data-theme="dark"] .chip.is-on{color:#1B1E1F;}

.styles{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:10px;
  max-height:392px;overflow-y:auto;padding:2px 2px 4px;
  scrollbar-width:thin;
}
.styles::-webkit-scrollbar{width:8px;}
.styles::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:8px;}
.style-btn{
  border:1px solid var(--rule-2);background:var(--bg);border-radius:10px;padding:7px;
  cursor:pointer;display:flex;flex-direction:column;gap:6px;align-items:center;
  font-size:.78rem;font-weight:600;color:var(--ink-2);transition:border-color .12s,box-shadow .12s;
}
.style-btn:hover{border-color:var(--brand);}
.style-btn canvas{width:100%;height:auto;border-radius:5px;display:block;background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.12);}
.style-btn.is-on{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);color:var(--brand);}
.style-btn[hidden]{display:none;}

/* ---------- شريط التصميم فوق المعاينة ---------- */
.stylebar{
  display:flex;align-items:center;gap:6px;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:6px 8px;box-shadow:var(--shadow);
}
.sb-name{
  flex:1;text-align:center;font-weight:700;font-size:.92rem;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sb-nav,.sb-ico{
  background:transparent;border:1px solid transparent;border-radius:8px;cursor:pointer;
  color:var(--muted);display:grid;place-items:center;flex:none;
}
.sb-nav{width:36px;height:36px;font-size:1.5rem;line-height:1;padding-bottom:3px;}
.sb-ico{width:34px;height:34px;font-size:1.02rem;}
.sb-nav:hover,.sb-ico:hover{background:var(--surface-2);color:var(--brand);}
.sb-ico.is-on{color:#D9A441;}
.sb-tools{display:flex;gap:2px;flex:none;}

/* ---------- تكبير المعاينة ---------- */
.zoom{
  position:fixed;inset:0;z-index:80;background:rgba(8,16,14,.9);
  display:grid;place-items:center;padding:22px;cursor:zoom-out;
  backdrop-filter:blur(3px);
}
.zoom[hidden]{display:none;}
.zoom img{
  max-width:100%;max-height:calc(100vh - 84px);width:auto;height:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.6);border-radius:3px;background:#fff;
}
.zoom-hint{
  position:absolute;bottom:20px;inset-inline:0;text-align:center;
  color:rgba(255,255,255,.7);font-size:.84rem;
}

.swatches{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:12px;}
.sw{
  width:38px;height:38px;border-radius:9px;border:2px solid transparent;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.sw.is-on{border-color:var(--ink);}

/* ---------- المعاينة ---------- */
.preview{display:flex;flex-direction:column;gap:14px;}
.canvas-wrap{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:14px;box-shadow:var(--shadow);
}
#cover{
  width:100%;height:auto;display:block;border-radius:4px;
  box-shadow:0 2px 14px rgba(0,0,0,.14);background:#fff;
}
.actions{display:flex;gap:9px;flex-wrap:wrap;}
.micro{font-size:.8rem;color:var(--muted);margin:0;text-align:center;}

/* على الهاتف: المعاينة فوق النموذج وتبقى ملتصقة أثناء الكتابة
   حتى يرى الطالب الغلاف يتغيّر مع كل حرف. */
@media (max-width:959px){
  .preview{
    order:-1;position:sticky;top:67px;z-index:6;
    background:var(--bg);padding-bottom:10px;gap:10px;
  }
  .canvas-wrap{display:grid;place-items:center;padding:9px;}
  #cover{max-height:30vh;width:auto;cursor:zoom-in;}
  .stylebar{padding:4px 6px;}
  .sb-name{font-size:.86rem;}
  .styles{max-height:none;overflow:visible;}
  .actions{gap:7px;}
  .actions .primary-btn,.actions .soft-btn{padding:10px 13px;font-size:.9rem;}
  .actions .primary-btn{flex:1 1 130px;}
  .preview .micro{display:none;}
}

.primary-btn,.soft-btn{
  padding:12px 18px;border-radius:10px;cursor:pointer;font-weight:700;
  border:1px solid transparent;text-decoration:none;display:inline-flex;
  align-items:center;justify-content:center;gap:7px;
}
.primary-btn{background:var(--brand);color:#fff;flex:1 1 190px;}
:root[data-theme="dark"] .primary-btn{color:#1B1E1F;}
.primary-btn:hover{filter:brightness(1.07);}
.soft-btn{background:var(--surface-2);color:var(--ink);border-color:var(--rule-2);}
.soft-btn:hover{background:var(--rule);}
.soft-btn.sm{padding:8px 14px;font-size:.88rem;font-weight:600;}
.link-btn{
  background:none;border:0;color:var(--brand);cursor:pointer;font-weight:600;
  padding:4px 0;text-decoration:underline;
}
.link-btn.danger{color:var(--danger);}

/* ---------- المحفوظات ---------- */
.saved-list{display:flex;flex-direction:column;gap:9px;margin-bottom:12px;}
.saved-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--rule);border-radius:10px;padding:10px 12px;background:var(--bg);
  cursor:pointer;text-align:start;width:100%;
}
.saved-item:hover{border-color:var(--brand);}
.saved-open{background:none;border:0;text-align:start;flex:1;cursor:pointer;padding:0;}
.saved-item b{display:block;font-size:.94rem;}
.saved-item small{color:var(--muted);font-size:.79rem;}
.saved-item .del{
  background:none;border:0;color:var(--muted);cursor:pointer;font-size:1.05rem;
  padding:2px 6px;border-radius:6px;flex:none;
}
.saved-item .del:hover{color:var(--danger);background:var(--surface-2);}
.empty{color:var(--muted);font-size:.9rem;text-align:center;padding:20px 0;}

/* ---------- الدعوة والتذييل ---------- */
.cta{max-width:1240px;margin:26px auto 0;padding:0 16px;}
.cta-card{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:26px 22px;box-shadow:var(--shadow);text-align:center;
}
.cta-card h2{margin:0 0 8px;font-size:1.35rem;text-wrap:balance;}
.cta-card p{margin:0 auto 18px;color:var(--ink-2);max-width:60ch;}
.cta-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.cta-row .primary-btn,.cta-row .soft-btn{flex:0 1 auto;}

.foot{
  max-width:1240px;margin:34px auto 0;padding:20px 16px 40px;
  color:var(--muted);font-size:.84rem;display:flex;gap:8px;
  justify-content:center;flex-wrap:wrap;border-top:1px solid var(--rule);
}
.dot{opacity:.5;}

.toast{
  position:fixed;inset-inline:0;bottom:22px;margin-inline:auto;width:max-content;
  max-width:88vw;background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:10px;
  font-weight:600;font-size:.92rem;z-index:60;opacity:0;transform:translateY(10px);
  transition:opacity .2s,transform .2s;pointer-events:none;
}
.toast.is-on{opacity:1;transform:translateY(0);}

:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{transition:none !important;}}