/* ==========================================================================
   Venus AI — assets/brand.css
   طبقة الهوية الموحّدة: تُحمَّل آخر شيء في كل الصفحات الداخلية (التطبيق،
   الدخول/التسجيل، لوحة التحكم) لتطابق الصفحة الرئيسية (home.css):
   أسود #000002 · أخضر #7BC202 · IBM Plex Sans Arabic · الشعار الرسمي ·
   حواف مستديرة ناعمة بدل الزوايا المشطوفة · بلا خلفية ماتريكس.

   الهوية داكنة فقط، فالوضع الفاتح يأخذ نفس المفاتيح عمدًا.
   ========================================================================== */

/* ── 01 Tokens ─────────────────────────────────────────────────────────── */
@media screen{
:root,:root[data-theme="dark"],:root[data-theme="light"]{
  --bg:#000002; --surf:#0B0C0A; --surf-2:#121410; --panel:rgba(11,12,10,.92);
  --ink:#F1F3EC; --ink-1:#DDE0D6; --ink-2:#C9CCC3; --ink-3:#8F958A;
  --ac:#7BC202; --ac-hi:#8FD41A; --ac-lo:#B7EA5A; --ac-2:#86CC10; --ac-3:#5E9602; --ac-4:#487302;
  --ac-txt:#B7EA5A; --ac-txt2:#D6F4A2; --on-ac:#000002;
  --shadow:rgba(0,0,0,.9); --nav-bg:rgba(0,0,2,.82);
  --grid:rgba(123,194,2,.06); --grid-strong:rgba(123,194,2,.11);
  --good:#7BC202; --warn:#E0B44F; --bad:#F2685E; --teal:#3FD5C0;

  --line:rgba(241,243,236,.09);
  --line-2:rgba(241,243,236,.14);
  --card:rgba(241,243,236,.03);
  --card-2:rgba(241,243,236,.05);
  --hair:rgba(241,243,236,.1);

  --sans:"IBM Plex Sans Arabic","Noto Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif;
  --display:var(--sans);
  --ease:cubic-bezier(.22,.7,.2,1);

  /* الحواف: نفس أنصاف أقطار الصفحة الرئيسية */
  --r:12px; --r-sm:10px; --r-lg:16px;
  --r-slab:14px; --r-in:10px;

  --dv-6:#8F958A;
  color-scheme:dark;
}
}
.auth-main,.page{--mono:var(--sans)}

html,body{background:var(--bg)}
body{color:var(--ink); font-family:var(--sans)}
h1,h2,h3,h4{font-family:var(--sans); letter-spacing:0}
h1,h2{font-weight:600}
.page-head h1,.auth-body h1{letter-spacing:-.005em}
::selection{background:rgba(123,194,2,.35); color:var(--ink)}
:focus-visible{outline:2px solid var(--ac); outline-offset:3px}

/* ── 02 الخلفية: بلا ماتريكس/هالفتون، توهّج هادئ كالصفحة الرئيسية ───── */
.matrix-bg,.halftone{display:none!important}
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60vmax 45vmax at 85% -10%, rgba(123,194,2,.075), transparent 70%),
    radial-gradient(55vmax 40vmax at 0% 110%, rgba(241,243,236,.035), transparent 70%);
}
[dir="ltr"] body::before{transform:scaleX(-1)}

/* ── 03 الشعار الرسمي ──────────────────────────────────────────────────── */
.vlogo{
  display:block; height:30px; aspect-ratio:156/34;
  background:url("/assets/venus-logo.svg?v=20260924") center/contain no-repeat;
}
.logo-pill.brand-logo{
  display:inline-flex; align-items:center; padding:0; gap:0;
  background:none; color:inherit; border-radius:0;
}
.logo-pill.brand-logo:hover{transform:none; opacity:.85}
.brand .vlogo{height:28px}
.adm-login-brand .vlogo{height:32px}
@media (max-width:640px){.vlogo{height:24px}}

/* ── 04 الحواف: الزوايا المشطوفة ← مستطيلات مستديرة ─────────────────────
   نفس بنية الطبقتين (الخلفية = لون الحدّ، ::before = الحشو) لكن بقصّ دائري. */
:root .card,:root .stat,:root .row-card,
:root .service,:root .plan,:root .log-panel,:root .cta-box,:root .auth-panel,:root .method{
  --rr:16px;
  --shape-out:inset(0 round var(--rr));
  --shape-in:inset(0 round calc(var(--rr) - 1px));
}
:root .stat,:root .row-card,:root .method{--rr:14px}
:root .auth-panel{--rr:20px}
.card::after,.stat::after,.row-card::after,
.service::after,.plan::after,.log-panel::after,.cta-box::after,.auth-panel::after{display:none}

/* لون الحدّ هادئ كخطوط الصفحة الرئيسية، ويخضرّ عند التحويم */
.card,.stat,.row-card{background:var(--line)}
.card::before,.stat::before,.row-card::before{background:var(--surf)}
.stat:hover,.stat.on,.row-card:hover{background:rgba(123,194,2,.45)}
.stat:hover::before,.row-card:hover::before{background:#0E120A}
.stat.on::before{background:#0E120A}

.auth-panel{background:rgba(123,194,2,.28)}
.auth-panel::before{background:rgba(11,12,10,.94)}
.method{background:var(--line-2)}
.method::before{background:var(--surf)}
.method:hover{background:rgba(123,194,2,.5)}
.method:hover::before{background:#0E120A}

/* لوحة التحكم: اللوحات وبطاقة الدخول بقصّ دائري بدل المضلّع */
:root .panel,:root [dir] .panel{clip-path:inset(0 round 16px); background:var(--line)}
:root .panel::before,:root [dir] .panel::before{clip-path:inset(0 round 15px); background:var(--surf)}
:root .adm-login-card,:root [dir] .adm-login-card{clip-path:inset(0 round 20px); background:rgba(123,194,2,.28)}
:root .adm-login-card::before,:root [dir] .adm-login-card::before{clip-path:inset(0 round 19px); background:rgba(11,12,10,.96)}

/* ── 05 الأزرار: بنفس شكل .btn-primary / .btn-ghost في الصفحة الرئيسية ── */
:root .btn,:root .btn-primary,:root .btn-ghost,:root .cta-btn,:root .cta-mail,
:root .plan-cta,:root .nav-cta,:root .auth-submit,:root .plan-badge{
  clip-path:none; border-radius:12px;
}
.btn{
  height:46px; padding:0 22px; border:1px solid rgba(183,234,90,.45);
  background:var(--ac); color:var(--on-ac);
  font-family:var(--sans); font-size:14.5px; font-weight:600;
  letter-spacing:0; text-transform:none;
  box-shadow:0 8px 26px -14px rgba(123,194,2,.55);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.btn:hover:not(:disabled){background:#86CC10; filter:none; transform:translateY(-1px); box-shadow:0 14px 34px -14px rgba(123,194,2,.7)}
.btn:active:not(:disabled){transform:scale(.98); background:#72B402}
.btn.secondary{background:rgba(123,194,2,.04); color:var(--ink); border-color:rgba(123,194,2,.42); box-shadow:none}
.btn.secondary:hover:not(:disabled){background:rgba(123,194,2,.09); border-color:rgba(123,194,2,.8); box-shadow:0 0 0 3px rgba(123,194,2,.07)}
.btn.ghost{background:transparent; color:var(--ink-2); border-color:transparent; box-shadow:none}
.btn.ghost:hover:not(:disabled){background:rgba(241,243,236,.05); color:var(--ink); box-shadow:none}
.btn.sm{height:38px; padding:0 16px; font-size:13.5px; border-radius:10px}
.btn.good{background:var(--ac); color:var(--on-ac)}

.btn-primary,.auth-submit,.cta-btn{
  background:var(--ac); color:var(--on-ac); border:1px solid rgba(183,234,90,.45);
  filter:none; box-shadow:0 8px 26px -14px rgba(123,194,2,.55);
}
.btn-primary:hover,.auth-submit:hover:not(:disabled),.cta-btn:hover{
  background:#86CC10; color:var(--on-ac); filter:none; box-shadow:0 14px 34px -14px rgba(123,194,2,.7);
}
.btn-ghost,.cta-mail{background:rgba(123,194,2,.04); border:1px solid rgba(123,194,2,.42); color:var(--ink)}
.btn-ghost::before,.cta-mail::before{display:none}
.btn-ghost:hover,.cta-mail:hover{background:rgba(123,194,2,.09); border-color:rgba(123,194,2,.8)}

/* ── 06 شريط التنقل: نسخة من .nav في home.css ─────────────────────────────
   الشعار · تبويبات في المنتصف بخط سفلي أخضر للنشط · لغة ورابط وزر أساسي بحدّ أخضر.
   لاصق أعلى الصفحة؛ site.js يضيف .solid عند التمرير و.open لقائمة الجوال. */
.snav{
  position:sticky; top:0; z-index:40;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
  padding:calc(env(safe-area-inset-top,0px) + 20px) clamp(20px,4vw,56px) 20px;
  background:linear-gradient(to bottom,rgba(0,0,2,.85),rgba(0,0,2,0));
  transition:background-color .4s var(--ease),padding .4s var(--ease),box-shadow .4s var(--ease);
}
.snav.solid{
  padding-block:calc(env(safe-area-inset-top,0px) + 12px) 12px;
  background:rgba(0,0,2,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(241,243,236,.05);
}
.sn-brand{justify-self:start; display:flex; align-items:center}
.sn-brand .vlogo{height:34px; transition:height .4s var(--ease)}
.snav.solid .sn-brand .vlogo{height:30px}

.sn-tabs{display:flex; align-items:center; gap:2px}
.sn-tab{
  position:relative; font-size:.94rem; color:var(--ink-2); padding:9px 14px; border-radius:10px; white-space:nowrap;
  transition:color .3s var(--ease),background-color .3s var(--ease);
}
.sn-tab::after{
  content:""; position:absolute; inset-inline:14px; bottom:3px; height:1.5px; border-radius:2px;
  background:var(--ac); transform:scaleX(0); opacity:.85; transition:transform .45s var(--ease);
}
.sn-tab:hover{color:var(--ink); background:rgba(241,243,236,.04)}
.sn-tab.is-active{color:var(--ink)}
.sn-tab.is-active::after{transform:scaleX(1)}
.sn-tab-extra{display:none}

.sn-actions{justify-self:end; display:flex; align-items:center; gap:8px}
.sn-lang{
  display:inline-grid; place-items:center; font:inherit; font-size:.8rem; font-weight:600; letter-spacing:.08em; line-height:1;
  min-width:40px; height:38px; padding:0 10px; border-radius:10px;
  border:1px solid var(--line); background:none; color:var(--ink-2); cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease),transform .3s var(--ease);
}
.sn-lang:hover{color:var(--ink); border-color:rgba(123,194,2,.45); background:rgba(123,194,2,.05)}
.sn-lang:active{transform:scale(.96); transition-duration:.12s}
.sn-link{font-size:.9375rem; color:var(--ink-2); padding:10px 14px; border-radius:10px; transition:color .2s}
.sn-link:hover{color:var(--ink)}
.sn-cta{
  font-size:.9375rem; font-weight:500; white-space:nowrap; padding:9px 16px; border-radius:10px;
  border:1px solid rgba(123,194,2,.45); color:var(--ink); -webkit-tap-highlight-color:transparent;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.sn-cta:hover{background:rgba(123,194,2,.1); border-color:var(--ac); color:var(--ink)}
.sn-cta:active{transform:scale(.97); background:rgba(123,194,2,.16); transition-duration:.12s}

.sn-menu{
  display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--line); background:none; cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.sn-menu i{display:block; width:16px; height:1.5px; border-radius:2px; background:var(--ink); transition:transform .35s var(--ease)}
.snav.open .sn-menu i:first-child{transform:translateY(3.25px) rotate(45deg)}
.snav.open .sn-menu i:last-child{transform:translateY(-3.25px) rotate(-45deg)}

@media (hover:none){
  .sn-lang:hover{color:var(--ink-2); border-color:var(--line); background:none}
  .sn-cta:hover{background:none; border-color:rgba(123,194,2,.45)}
}
@media (min-width:900px) and (max-width:1060px){.sn-tab{padding:9px 10px; font-size:.9rem}.sn-tab::after{inset-inline:10px}}
@media (max-width:899px){
  .snav{grid-template-columns:1fr auto; padding-block:calc(env(safe-area-inset-top,0px) + 16px) 16px}
  .sn-brand .vlogo,.snav.solid .sn-brand .vlogo{height:28px}
  .sn-menu{display:inline-flex}
  .sn-link{display:none}
  .sn-tabs{
    position:fixed; top:calc(env(safe-area-inset-top,0px) + 76px); inset-inline:16px; z-index:41;
    flex-direction:column; align-items:stretch; gap:2px; padding:8px;
    border-radius:14px; border:1px solid var(--line); background:rgba(0,0,2,.95);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s;
  }
  .snav.open .sn-tabs{opacity:1; visibility:visible; transform:none; transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .sn-tab{padding:13px 14px; font-size:1rem}
  .sn-tab::after{inset-inline:14px auto; width:18px; bottom:8px}
  .sn-tab-extra{display:block; border-top:1px solid var(--line); border-radius:0 0 10px 10px; margin-top:4px; color:var(--ink-3)}
}
@media (max-width:420px){
  .sn-actions{gap:6px}
  .sn-lang{min-width:36px; height:36px; padding:0 8px}
  .sn-cta{padding:8px 11px; font-size:.82rem}
  .sn-brand .vlogo,.snav.solid .sn-brand .vlogo{height:24px}
}

/* زر التحويل تحت تنبيه "مسجّل بالفعل / غير موجود": نفس .btn-ghost في الصفحة الرئيسية */
.auth-switch{margin:12px 0 0}
.auth-switch-btn{
  display:flex; align-items:center; justify-content:center; width:100%; height:50px; padding:0 18px;
  border-radius:12px; border:1px solid rgba(123,194,2,.55); background:rgba(123,194,2,.06);
  color:var(--ink); font:inherit; font-size:15px; font-weight:600; cursor:pointer;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.auth-switch-btn:hover{background:rgba(123,194,2,.12); border-color:var(--ac); color:var(--ink)}
.auth-switch-btn:active{transform:scale(.98)}

/* صفحات الدخول: الشريط صار في التدفّق بدل الثابت، فلا حاجة للفراغ العلوي الكبير */
.auth-main{padding-top:36px; min-height:calc(100vh - 90px)}

/* ── 06b الخلفية المتحركة (site.js يرسم شبكة نقاط على canvas.sn-bg) ────── */
.sn-bg{
  position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
  opacity:0; transition:opacity 1.6s var(--ease);
}
.sn-bg.on{opacity:1}
/* التوهّج الثابت "يتنفّس" بالشفافية فقط. تحريكه أو تكبيره بـtransform كان يدفعه خارج
   الشاشة، وSafari على iPhone يحسب ذلك عرضًا زائدًا فتنزاح الصفحة كلها يسارًا.
   الانجراف نفسه صار داخل canvas (site.js) حيث لا يؤثّر على أبعاد الصفحة. */
body::before{animation:sn-breathe 9s ease-in-out infinite alternate}
@keyframes sn-breathe{from{opacity:.7}to{opacity:1}}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}

/* حزام أمان: لا تمرير أفقي أبدًا. clip (لا hidden) حتى لا يصير body حاوية تمرير
   فيتعطّل الشريط اللاصق. */
html,body{overflow-x:clip}
/* رابط "تخطَّ إلى المحتوى" يختبئ فوق الصفحة بدل -9999px على الجانب */
.skip{inset-inline-start:16px!important; top:-80px; transition:top .2s var(--ease)}
.skip:focus{top:16px}
@media print{.snav,.sn-bg{display:none!important}}

/* ── 07 الحقول والعناصر الصغيرة ───────────────────────────────────────── */
.field-input,.phone-cc,.otp input,.input,.textarea,.select,
input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="search"],input[type="number"],textarea,select{
  border-radius:12px;
}
/* للحقول حلقة تركيز خاصة بها، فلا حاجة لإطار المتصفح فوقها */
.input:focus-visible,.textarea:focus-visible,.field-input:focus-visible,.otp input:focus-visible,.phone-cc:focus-visible{outline:none}
.field-label,.auth-kicker,.auth-back,.auth-or,.auth-head-title,.auth-step-count{letter-spacing:0; text-transform:none; font-size:12.5px}
.micro{text-transform:none; font-size:12px}

/* العربية خط متّصل: أي تباعد أحرف (حتى ±.005em) يجعل Safari يفصل الحروف عن بعضها.
   فلا تباعد في الصفحات العربية إطلاقًا، ويبقى للجزر الإنجليزية/LTR تباعدها. */
html[lang="ar"] body *:not([lang="en"]):not([dir="ltr"]){letter-spacing:0!important}
.step-pill{letter-spacing:0; text-transform:none; font-size:12.5px; border-radius:99px}
.chip,.pill{border-radius:99px}

/* ── 09 الخطوة التالية: مناقشة واتساب + حجز اجتماع (ReportPage) ─────────── */
.next-step{border-radius:18px}
.next-price{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin-top:16px}
.next-price .doc-closing-price{margin:0}
.next-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:16px}
.next-card{display:flex; flex-direction:column; gap:8px; padding:18px; border:1px solid var(--line-2); border-radius:14px; background:var(--surf)}
.next-card.is-booked{border-color:rgba(123,194,2,.45)}
.next-ico{display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:rgba(123,194,2,.1); color:var(--ac)}
.next-ico svg{width:20px; height:20px}
.next-card h3{margin:4px 0 0; font-size:16px}
.next-card p{margin:0; font-size:14px; line-height:1.7; color:var(--ink-2)}
.next-btn{margin-top:auto; align-self:flex-start}
.meet-booked{display:flex; flex-direction:column; gap:4px}
.meet-booked b{font-size:16px; color:var(--ink)}
.meet-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}

.meet-panel{margin-top:16px; padding:18px; border:1px solid rgba(123,194,2,.35); border-radius:14px; background:var(--surf)}
.meet-panel[hidden]{display:none}
.meet-cols{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:22px}
.meet-days{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 6px; margin:8px 0 16px; scroll-snap-type:x proximity}
.meet-times{display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; margin-top:8px}
.meet-chip{
  font:inherit; font-size:14px; color:var(--ink); background:transparent; cursor:pointer; white-space:nowrap;
  padding:9px 12px; border:1px solid var(--line-2); border-radius:10px; scroll-snap-align:start;
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.meet-chip:hover{border-color:rgba(123,194,2,.55)}
.meet-chip.on{border-color:var(--ac); background:rgba(123,194,2,.12); box-shadow:inset 0 0 0 1px var(--ac)}
.meet-chip.day{display:flex; flex-direction:column; align-items:center; gap:2px; min-width:96px}
.meet-chip.day small{font-size:11.5px; color:var(--ink-3)}
.meet-contact{display:flex; flex-direction:column; gap:10px}
.meet-f .micro{display:block; margin-bottom:5px}
.meet-f .input,.meet-f .textarea{width:100%}
.meet-f .textarea{min-height:64px}
.meet-err{margin:12px 0 0; font-size:13.5px; color:var(--bad)}
.meet-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:14px}
@media (max-width:760px){
  .next-grid,.meet-cols{grid-template-columns:1fr}
  .next-btn{align-self:stretch}
}
@media print{.next-grid .btn,.meet-row,.meet-panel{display:none!important}}

/* ── 08 التقرير ───────────────────────────────────────────────────────── */
@media screen{
  .doc{border-radius:18px}
  .doc-brand{align-items:center}
  .doc-brand b{display:none}          /* الشعار يحلّ محلّ الاسم على الشاشة */
  .doc-logo{height:26px}
}

@media print{
  body::before{display:none}
  .doc-logo{display:none}             /* حروف الشعار فاتحة لا تظهر على الورق الأبيض */
}

/* لوحة التحكم: خلية مرحلة العميل في جدول المشاريع (شارة + موعد الاجتماع + قرار إن وُجد) */
.cell-stage{display:flex; flex-direction:column; align-items:flex-start; gap:4px}
.cell-stage .micro{display:inline-flex; align-items:center; gap:4px; color:var(--ink-2)}
.cell-stage .micro svg{width:12px; height:12px}