:root{
  /* Brand */
  --primary:#D97791; --primary-500:#F472B6; --primary-700:#8E3C55;
  --accent:#F9A8D4; --good:#16A34A; --warn:#F59E0B; --bad:#DC2626;

  /* Surfaces (لا أبيض إطلاقًا) */
  --bg:#FFF1F3;        /* الخلفية الأساسية */
  --bg-soft:#FFEFF2;   /* خلفية ناعمة */
  --paper:#FFE5EC;     /* طبقة الكروت الأساسية */
  --paper-2:#FFD9E1;   /* طبقة ثانوية */
  --paper-3:#FECDD6;   /* طبقة أغمق قليلًا */

  /* نص وحدود */
  --text:#2B2B2B; --muted:#595959; --border:#F4C9D4;

  /* نص فوق الأزرار الملوّنة (بديل للأبيض) */
  --on-primary:#FFE8F0; /* فاتح وردي، ليس أبيض */
  --on-strong:#FFE6ED;  /* أفتح قليلًا لا يزال غير #fff */

  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --container:1280px; --header-h:64px; --sidebar-w:320px;
  --focus:0 0 0 3px rgba(217,119,145,.35);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;text-size-adjust:100%}
body{
  margin:0;
  background:
    radial-gradient(1100px 520px at 85% -15%, rgba(249,168,212,.14), transparent 60%),
    linear-gradient(150deg,var(--bg) 0%, var(--bg-soft) 42%, var(--paper-3) 100%);
  color:var(--text);
  font-family:'Tajawal',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.7
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
:focus-visible{outline:2px solid transparent;box-shadow:var(--focus)}

.container{max-width:var(--container);margin-inline:auto;padding:16px 20px}
.card{
  background:linear-gradient(180deg, color-mix(in oklab, var(--paper) 94%, transparent), var(--paper-2));
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);color:var(--text)
}
.pad{padding:16px}
.muted{color:var(--muted)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.grid{display:grid;gap:12px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:980px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}
h1{font-size:clamp(22px,3.5vw,28px);margin:0;font-weight:800}
h2{font-size:clamp(18px,3vw,22px);margin:0 0 8px;font-weight:800}
h3{font-size:16px;margin:0 0 6px;font-weight:800}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer;
  border:1px solid var(--border);
  background:linear-gradient(180deg, var(--paper), var(--paper-2));
  color:var(--text)
}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{
  background:linear-gradient(135deg,var(--primary-700),var(--primary));
  border-color:transparent;color:var(--on-primary);box-shadow:var(--shadow)
}
.btn-ghost{
  background:linear-gradient(180deg, var(--paper), var(--paper-2));
  color:var(--primary-700);border:1px solid var(--border)
}
.btn-good{
  background:linear-gradient(135deg,#116339,#16A34A);
  border-color:transparent;color:var(--on-strong)
}
.btn-warn{
  background:linear-gradient(135deg,#B45309,#F59E0B);
  border-color:transparent;color:var(--on-strong)
}
.btn-bad{
  background:linear-gradient(135deg,#7F1D1D,#DC2626);
  border-color:transparent;color:var(--on-strong)
}
.btn-joker{
  background:linear-gradient(135deg,var(--accent),var(--primary));
  border-color:transparent;color:var(--on-primary);box-shadow:var(--shadow)
}
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  background:rgba(217,119,145,.12);color:var(--primary-700);font-weight:800
}

/* Header (بدون أبيض) */
header{
  position:sticky;top:0;z-index:1000;
  background:linear-gradient(180deg, var(--paper), var(--paper-2));
  border-bottom:1px solid var(--border);height:var(--header-h);color:var(--text);
  backdrop-filter:saturate(120%) blur(6px)
}
.topbar{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand .logo{
  display:inline-grid;place-items:center;width:36px;height:36px;border-radius:12px;
  background:linear-gradient(135deg,var(--primary),var(--primary-500));color:var(--on-primary);box-shadow:var(--shadow)
}
.top-actions{display:flex;align-items:center;gap:8px}
.ico-btn{
  width:40px;height:40px;border-radius:12px;border:1px solid var(--border);
  background:linear-gradient(180deg, var(--paper), var(--paper-2));
  display:grid;place-items:center;cursor:pointer;color:var(--text)
}
.user{display:flex;align-items:center;gap:8px}
.avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--paper-3)}

.shell{display:grid;grid-template-columns:1fr var(--sidebar-w);gap:16px}
@media (max-width:1180px){
  .shell{grid-template-columns:1fr}
  .side{order:-1}
}
.sticky-head{
  position:sticky;top:calc(var(--header-h) + 8px);z-index:10;
  background:linear-gradient(180deg, var(--paper), var(--paper-2));
  border:1px solid var(--border);border-radius:14px;padding:10px 12px
}

/* الغرف */
.rooms-wrap{margin:10px 0 6px}
.rooms{display:flex;gap:8px;overflow:auto;padding-bottom:4px}
.room-btn{
  position:relative;border:1px solid var(--border);
  background:linear-gradient(180deg, var(--paper), var(--paper-2));
  padding:8px 12px;border-radius:999px;font-weight:800;white-space:nowrap;cursor:pointer;color:var(--text)
}
.room-btn[aria-selected="true"]{
  background:linear-gradient(135deg,var(--primary-700),var(--primary));
  color:var(--on-primary);border-color:transparent
}

/* البريد */
.inbox{display:grid;grid-template-columns:260px 1fr;gap:12px}
@media (max-width:980px){
  .inbox{grid-template-columns:1fr}
}
.threads{max-height:520px;overflow:auto}
.thread{
  display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:12px;margin-bottom:8px;
  background:linear-gradient(180deg, var(--paper), var(--paper-2));cursor:pointer
}
.thread.active{box-shadow:var(--focus)}
.t-ava{width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--paper-3);position:relative}
.t-ava img{width:100%;height:100%;object-fit:cover;display:block}
.t-meta small{display:block;color:var(--muted)}
.chat{display:flex;flex-direction:column;gap:10px;height:520px}
.chat-head{display:flex;align-items:center;justify-content:space-between}
.chip{
  display:inline-flex;gap:6px;align-items:center;border:1px solid var(--border);padding:4px 10px;border-radius:999px;font-weight:800;
  background:linear-gradient(180deg, var(--paper), var(--paper-2))
}
.msgs{
  flex:1;overflow:auto;border:1px solid var(--border);border-radius:12px;padding:12px;
  background:linear-gradient(180deg, var(--paper), var(--paper-2))
}
.msg{
  max-width:min(74%,560px);padding:10px 12px;border-radius:12px;margin:6px 0;border:1px solid var(--border);
  background:linear-gradient(180deg, var(--bg-soft), var(--paper))
}
.msg.me{
  margin-inline-start:auto;
  background:linear-gradient(
    180deg,
    color-mix(in oklab, var(--primary) 18%, var(--paper)),
    color-mix(in oklab, var(--primary) 12%, var(--paper))
  );
  border-color:color-mix(in oklab, var(--primary) 35%, var(--border))
}
.msg.sys{border-style:dashed;opacity:.9}
.composer{display:flex;gap:8px}
.composer input{
  flex:1;border:1px solid var(--border);border-radius:12px;padding:12px;
  background:linear-gradient(180deg, var(--paper), var(--paper-2));color:var(--text);outline:none
}
.paywall{
  display:none;gap:10px;align-items:center;justify-content:space-between;border:1px dashed var(--border);
  background:linear-gradient(180deg, var(--bg-soft), var(--paper));border-radius:12px;padding:10px
}
.paywall[aria-hidden="false"]{display:flex}

/* المودالات والفوتر (بدون أبيض) */
.modal{position:fixed;inset:0;display:none;z-index:9999}
.modal[data-open="true"]{display:block}
.backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px)}
.sheet{
  position:relative;margin:clamp(14px,8vh,36px) auto 0;max-width:min(96vw,620px);
  background:linear-gradient(180deg, var(--paper), var(--paper-2));
  border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:18px
}
.x{
  position:absolute;inset-inline-start:10px;top:10px;border:1px solid var(--border);
  background:linear-gradient(180deg, var(--paper), var(--paper-2));border-radius:10px;padding:6px 10px;cursor:pointer;color:var(--muted);font-weight:800
}
.sheet.pricing{
  max-width:min(98vw,1100px);padding:22px;max-height:92vh;overflow:auto;-webkit-overflow-scrolling:touch
}
#pricing h2{margin:0 0 8px;font-size:clamp(20px,3vw,26px)}
.pricing-wrap{display:grid;gap:14px}
.pricing-wrap .card{
  position:relative;border-radius:16px;padding:14px;border:1px solid var(--border);
  background:linear-gradient(180deg, var(--paper), var(--paper-2));
  display:flex;flex-direction:column;min-height:420px;padding-bottom:92px
}
.price{font-weight:800;font-size:26px;margin:6px 0}
.price small{font-size:13px;color:var(--muted)}
.features{margin:0 0 14px;padding-inline-start:18px;color:var(--muted)}
.features li{margin:6px 0}
.cta{
  display:inline-flex;align-items:center;justify-content:center;position:absolute;inset-inline:14px;bottom:14px;padding:12px 14px;border-radius:14px;font-weight:800;font-size:16px;box-shadow:var(--shadow);
  background:linear-gradient(135deg,var(--primary-700),var(--primary));color:var(--on-primary);border:0
}
.dealbar{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,var(--primary),var(--accent));color:var(--on-primary);
  font-weight:800;border-radius:14px;padding:10px 14px;margin-bottom:12px;box-shadow:var(--shadow)
}

footer{
  margin-top:18px;border-top:1px solid var(--border);
  background:linear-gradient(180deg,var(--paper-2),var(--bg))
}
.foot{max-width:var(--container);margin:auto;padding:14px 20px;text-align:center}
.foot small{color:var(--muted)}

/* Onboarding — بيانات العريس */
.onboarding-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.70);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10000;
}
.onboarding-backdrop[hidden]{display:none}
.onboarding-modal{
  background:linear-gradient(180deg,var(--paper),var(--paper-2));
  color:var(--text);
  max-width:900px;
  width:100%;
  max-height:92vh;
  overflow-y:auto;
  border-radius:20px;
  box-shadow:0 24px 80px rgba(15,23,42,0.30);
  padding:20px 20px 18px;
}
.onboarding-header h2{
  font-size:clamp(20px,3vw,24px);
  margin:0 0 4px;
  font-weight:800;
}
.onboarding-subtitle{
  font-size:0.9rem;
  color:var(--muted);
  margin:0;
  font-weight:700;
}
.onboarding-form{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.onb-grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
@media (max-width:768px){
  .onboarding-modal{
    max-height:100vh;
    border-radius:0;
  }
  .onb-grid-2{
    grid-template-columns:1fr;
  }
}
.onb-field{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.onb-label,
.onb-field span.field-label{
  font-size:0.9rem;
  font-weight:700;
}
.onb-req{color:#DC2626}
.onb-field input,
.onb-field select,
.onb-field textarea{
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
  font-family:inherit;
  font-size:0.9rem;
  background:linear-gradient(180deg,var(--paper),var(--paper-2));
  color:var(--text);
}
.onb-field textarea{resize:vertical}
.onb-inline-options{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  font-size:0.9rem;
}
.onboarding-footer{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
}
.onboarding-footer .hint{
  font-size:0.8rem;
  color:var(--muted);
  font-weight:700;
}