:root{
  --navy:#132038;
  --navy-2:#1C2F51;
  --navy-3:#26406B;
  --amber:#E8912D;
  --amber-dark:#B96F1B;
  --cream:#F6F3EC;
  --cream-2:#EDE8DC;
  --paper:#FFFFFF;
  --ink:#1C2333;
  --ink-soft:#5B6478;
  --ink-faint:#98A0B3;
  --line:#E1DCCE;
  --green:#2E8B57;
  --green-bg:#E4F2E9;
  --rust:#C0642E;
  --rust-bg:#FBEBE0;
  --red:#C0392B;
  --shadow: 0 1px 2px rgba(19,32,56,0.06), 0 6px 20px rgba(19,32,56,0.08);
  --maxw: 1180px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Tajawal', 'Segoe UI', sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }

/* ===== header ===== */
.site-header{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40;
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand img{ width:42px; height:42px; border-radius:10px; }
.brand-text{ font-weight:900; font-size:18px; color:var(--navy); }
.brand-text span{ color:var(--amber-dark); }

.site-nav{ display:flex; align-items:center; gap:6px; }
.site-nav a{
  font-size:14px; font-weight:700; color:var(--ink-soft); padding:9px 14px; border-radius:10px;
}
.site-nav a:hover, .site-nav a.active{ color:var(--navy); background:var(--cream-2); }
.nav-cta{ display:flex; align-items:center; gap:8px; }

.nav-toggle{ display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:var(--paper); font-size:18px; color:var(--navy); cursor:pointer; }

/* ===== buttons ===== */
.btn{
  font-family:inherit; font-size:14px; font-weight:700; border-radius:11px; border:1px solid var(--line);
  background:var(--paper); color:var(--navy); padding:11px 20px; cursor:pointer; text-align:center;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:transform .12s ease, opacity .12s ease;
}
.btn:hover{ opacity:0.88; }
.btn:active{ transform:scale(0.98); }
.btn-primary{ background:var(--navy); color:var(--amber); border-color:var(--navy); }
.btn-amber{ background:var(--amber); color:var(--navy); border-color:var(--amber); }
.btn-block{ width:100%; }
.btn-lg{ padding:14px 26px; font-size:15px; border-radius:13px; }
.btn[disabled]{ opacity:0.6; cursor:not-allowed; }

/* ===== top banner image ===== */
.banner-wrap{ width:100%; line-height:0; background:var(--cream); }
.hero-banner-img{ width:100%; height:auto; display:block; }

/* ===== hero ===== */
.hero{ background:var(--cream); padding:52px 0 60px; }
.hero .wrap{ display:flex; }
.hero-copy{ max-width:680px; }
.hero h1{ font-size:36px; font-weight:900; line-height:1.3; margin-bottom:16px; color:var(--navy); text-align:center; }
.hero-brand{ display:block; text-align:center; font-family:'Michroma', 'Tajawal', sans-serif; color:#01133C; font-size:38px; font-weight:400; letter-spacing:0.08em; margin-bottom:14px; }
.hero-brand-accent{ color:#0040F8; }
.hero p{ font-size:16px; color:var(--ink-soft); max-width:520px; margin-bottom:28px; line-height:1.8; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:28px; margin-top:36px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-size:24px; font-weight:900; color:var(--navy); }
.hero-stat span{ font-size:12.5px; color:var(--ink-soft); }

/* ===== sections ===== */
.section{ padding:56px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
.section-head h2{ font-size:26px; font-weight:900; color:var(--navy); }
.section-head p{ font-size:14px; color:var(--ink-soft); margin-top:4px; }
.eyebrow{ font-family:inherit; font-size:13.5px; letter-spacing:0.02em; color:var(--amber-dark); font-weight:800; margin-bottom:8px; }
.eyebrow-lg{ font-size:18.5px; letter-spacing:0.03em; }

.feature-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.feature-card{ background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:26px; box-shadow:var(--shadow); }
.feature-ico{ width:46px; height:46px; border-radius:12px; background:var(--cream-2); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px; }
.feature-card h3{ font-size:16px; font-weight:800; color:var(--navy); margin-bottom:6px; }
.feature-card p{ font-size:13.5px; color:var(--ink-soft); line-height:1.75; }

/* ===== equipment grid ===== */
.equip-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
.equip-card{
  background:var(--paper); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease; display:flex; flex-direction:column;
}
.equip-card:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(19,32,56,0.14); }
.equip-thumb{ height:150px; background:var(--cream-2); display:flex; align-items:center; justify-content:center; font-size:34px; color:var(--navy-3); background-size:cover; background-position:center; position:relative; }
.equip-badge{ position:absolute; top:10px; right:10px; font-size:12px; font-weight:800; padding:4px 11px; border-radius:20px; }
.badge-rent{ background:var(--green-bg); color:var(--green); }
.badge-sale{ background:var(--rust-bg); color:var(--rust); }
.equip-body{ padding:14px; flex:1; display:flex; flex-direction:column; gap:5px; }
.equip-title{ font-size:14px; font-weight:800; color:var(--navy); }
.equip-loc{ font-size:12px; color:var(--ink-soft); }
.equip-price{ font-size:15px; font-weight:900; color:var(--navy); margin-top:auto; padding-top:8px; }
.equip-empty{ grid-column:1 / -1; text-align:center; padding:60px 20px; color:var(--ink-soft); font-size:14px; }
.equip-skel{ background:linear-gradient(90deg, var(--cream-2) 25%, var(--line) 37%, var(--cream-2) 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; border-radius:16px; height:270px; }
@keyframes shimmer{ 0%{background-position:100% 0;} 100%{background-position:0 0;} }

/* ===== filters (listings page) ===== */
.filter-bar{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:24px; box-shadow:var(--shadow); }
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.filter-row input[type=text], .filter-row select{
  padding:11px 14px; border-radius:11px; border:1px solid var(--line); background:var(--cream);
  font-family:inherit; font-size:13.5px; color:var(--ink); min-width:160px;
}
.filter-row input[type=text]{ flex:1; min-width:220px; }
.chip-row{ display:flex; gap:8px; overflow-x:auto; margin-top:12px; padding-bottom:2px; }
.chip{ white-space:nowrap; font-size:13px; font-weight:700; padding:8px 16px; border-radius:20px; background:var(--cream); border:1px solid var(--line); color:var(--ink-soft); cursor:pointer; flex-shrink:0; }
.chip.on{ background:var(--navy); color:var(--amber); border-color:var(--navy); }

.pagination{ display:flex; justify-content:center; gap:8px; margin-top:32px; }
.pagination button{ width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--paper); color:var(--navy); font-weight:700; cursor:pointer; }
.pagination button.on{ background:var(--navy); color:var(--amber); border-color:var(--navy); }
.pagination button[disabled]{ opacity:0.4; cursor:not-allowed; }

/* ===== detail page ===== */
.detail-wrap{ display:grid; grid-template-columns:1.3fr 0.9fr; gap:32px; align-items:start; }
.detail-thumb{ height:380px; border-radius:20px; background:var(--cream-2); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; font-size:56px; color:var(--navy-3); border:1px solid var(--line); }
.detail-title{ font-size:24px; font-weight:900; color:var(--navy); margin:20px 0 8px; }
.detail-meta{ display:flex; gap:14px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.detail-price{ font-size:22px; font-weight:900; color:var(--navy); margin-bottom:16px; }
.detail-desc{ font-size:14.5px; color:var(--ink-soft); line-height:1.9; }
.owner-card{ background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:var(--shadow); }
.owner-row{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.avatar{ width:46px; height:46px; border-radius:50%; background:var(--navy); display:flex; align-items:center; justify-content:center; color:var(--amber); font-weight:800; font-size:15px; flex-shrink:0; background-size:cover; background-position:center; }
.owner-name{ font-weight:800; color:var(--navy); font-size:14.5px; }
.owner-sub{ font-size:12px; color:var(--ink-soft); }
.badge-verified{ background:var(--green-bg); color:var(--green); font-size:11.5px; font-weight:800; padding:3px 9px; border-radius:20px; display:inline-block; margin-top:4px; }
.info-box{ background:var(--cream-2); color:var(--ink-soft); border-radius:14px; padding:14px 16px; font-size:12.5px; line-height:1.8; margin-top:16px; }

/* ===== forms (login/register) ===== */
.auth-wrap{ max-width:460px; margin:0 auto; padding:64px 0; }
.auth-card{ background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:36px 32px; box-shadow:var(--shadow); }
.auth-card h1{ font-size:22px; font-weight:900; color:var(--navy); margin-bottom:6px; text-align:center; }
.auth-card .subtitle{ font-size:13px; color:var(--ink-soft); text-align:center; margin-bottom:26px; }
.field-label{ font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:6px; display:block; }
.field-gap{ margin-bottom:16px; }
select, textarea, input[type=text], input[type=email], input[type=password], input[type=tel]{
  width:100%; padding:12px 14px; border-radius:11px; border:1px solid var(--line);
  background:var(--cream); font-family:inherit; font-size:13.5px; color:var(--ink);
}
select:focus, textarea:focus, input:focus{ outline:2px solid var(--amber); outline-offset:1px; }
textarea{ min-height:80px; resize:vertical; }
.type-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; }
.type-card{ border:1.5px solid var(--line); border-radius:11px; padding:10px 12px; font-size:12.5px; font-weight:700; color:var(--ink-soft); cursor:pointer; text-align:center; background:var(--cream); }
.type-card.on{ border-color:var(--amber); color:var(--navy); background:var(--paper); }
.auth-foot{ text-align:center; font-size:13px; color:var(--ink-soft); margin-top:18px; }
.auth-foot a{ color:var(--amber-dark); font-weight:700; }
.form-msg{ font-size:13px; border-radius:11px; padding:11px 14px; margin-bottom:16px; display:none; }
.form-msg.show{ display:block; }
.form-msg.error{ background:var(--rust-bg); color:var(--rust); }
.form-msg.success{ background:var(--green-bg); color:var(--green); }

/* ===== stats strip ===== */
.stats-strip{ background:var(--navy); border-radius:24px; padding:40px 32px; display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; text-align:center; }
.stats-strip .stat b{ display:block; font-size:32px; font-weight:900; color:var(--amber); }
.stats-strip .stat span{ font-size:12.5px; color:rgba(255,255,255,0.7); margin-top:4px; display:block; }

/* ===== jobs ===== */
.job-card{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow); }
.job-title{ font-weight:800; color:var(--navy); font-size:14px; margin:8px 0 4px; }
.job-meta{ font-size:12px; color:var(--ink-soft); }

/* ===== how it works ===== */
.steps-row{ display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; }
.step-card{ text-align:center; }
.step-num{ width:40px; height:40px; border-radius:50%; background:var(--navy); color:var(--amber); font-weight:900; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.step-card h3{ font-size:13.5px; font-weight:800; color:var(--navy); margin-bottom:4px; }
.step-card p{ font-size:12px; color:var(--ink-soft); line-height:1.6; }

/* ===== split CTA (device owners / companies) ===== */
.split-cta{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.split-cta-card{ background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:32px; box-shadow:var(--shadow); }
.split-cta-card h3{ font-size:19px; font-weight:900; color:var(--navy); margin-bottom:10px; }
.split-cta-card p{ font-size:13.5px; color:var(--ink-soft); line-height:1.8; margin-bottom:18px; }

/* ===== device check/report section ===== */
.device-check-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.device-check-card{ background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:28px; box-shadow:var(--shadow); }
.device-check-card h3{ font-size:16px; font-weight:900; color:var(--navy); margin-bottom:8px; }
.device-check-card p{ font-size:13px; color:var(--ink-soft); margin-bottom:16px; line-height:1.7; }

/* ===== FAQ ===== */
.faq-item{ background:var(--paper); border:1px solid var(--line); border-radius:14px; margin-bottom:10px; overflow:hidden; }
.faq-q{ padding:16px 18px; font-weight:800; color:var(--navy); font-size:14px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.faq-q .chev{ transition:transform .2s ease; color:var(--amber-dark); }
.faq-item.open .faq-q .chev{ transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-item.open .faq-a{ max-height:200px; }
.faq-a-inner{ padding:0 18px 16px; font-size:13px; color:var(--ink-soft); line-height:1.8; }

/* ===== app CTA banner ===== */
.cta-banner{ background:var(--navy); color:#fff; border-radius:22px; padding:44px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cta-banner h2{ font-size:22px; font-weight:900; margin-bottom:8px; }
.cta-banner p{ font-size:13.5px; color:rgba(255,255,255,0.72); max-width:420px; }

/* ===== footer ===== */
.site-footer{ background:var(--navy); color:rgba(255,255,255,0.7); padding:48px 0 24px; margin-top:40px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:32px; margin-bottom:32px; }
.footer-social{ display:flex; flex-direction:column; gap:2px; margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,0.12); }
.footer-social a{ display:flex; align-items:center; gap:8px; }
.footer-social svg{ width:16px; height:16px; flex-shrink:0; opacity:0.85; }
.footer-qr-row{ display:flex; gap:16px; }
.footer-qr-item{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.footer-qr-item img{ width:64px; height:64px; border-radius:6px; background:#fff; padding:4px; }
.footer-qr-item span{ font-size:12.5px; color:rgba(255,255,255,0.6); }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.footer-brand img{ width:34px; height:34px; border-radius:8px; }
.footer-brand span{ font-weight:900; color:#fff; font-size:16px; }
.footer-grid p{ font-size:12.5px; line-height:1.8; max-width:280px; }
.footer-col h4{ font-size:13px; font-weight:800; color:#fff; margin-bottom:12px; }
.footer-col a{ display:block; font-size:12.5px; padding:5px 0; color:rgba(255,255,255,0.65); }
.footer-col a:hover{ color:var(--amber); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.12); padding-top:18px; font-size:13px; text-align:center; color:rgba(255,255,255,0.5); }

/* ===== toast ===== */
#toast{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--navy); color:#fff; padding:12px 22px; border-radius:30px; font-size:13px; font-weight:700;
  opacity:0; transition:all .25s ease; pointer-events:none; white-space:nowrap; z-index:100; box-shadow:var(--shadow);
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ===== responsive ===== */
@media (max-width:960px){
  .site-nav{ display:none; }
  .nav-toggle{ display:flex; align-items:center; justify-content:center; }
  .feature-grid{ grid-template-columns:repeat(2, 1fr); }
  .equip-grid{ grid-template-columns:repeat(3, 1fr); }
  .detail-wrap{ grid-template-columns:1fr; }
  .stats-strip{ grid-template-columns:repeat(2, 1fr); }
  .steps-row{ grid-template-columns:repeat(3, 1fr); }
  .split-cta, .device-check-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:24px; }
  .hero .wrap{ flex-direction:column; text-align:center; }
  .hero p{ margin-left:auto; margin-right:auto; }
  .hero-actions, .hero-stats{ justify-content:center; }
}
@media (max-width:640px){
  .hero h1{ font-size:28px; }
  .feature-grid{ grid-template-columns:1fr; }
  .equip-grid{ grid-template-columns:repeat(2, 1fr); }
  .section{ padding:40px 0; }
  .stats-strip{ grid-template-columns:1fr 1fr; padding:28px 20px; }
  .steps-row{ grid-template-columns:1fr; }
  .auth-card{ padding:26px 20px; }
  .cta-banner{ padding:28px; text-align:center; justify-content:center; }
  .dash-card{ padding:22px; }
  .my-listing-row{ flex-wrap:wrap; }
  .my-listing-actions{ width:100%; justify-content:flex-end; }
}
@media (max-width:420px){
  .equip-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .equip-thumb{ height:110px; }
}

/* ===== profile / listing-form / my-listings (phase 2) ===== */
.dash-wrap{ max-width:720px; margin:0 auto; padding:48px 0 64px; }
.dash-card{ background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:32px; box-shadow:var(--shadow); }
.dash-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
.dash-head h1{ font-size:20px; font-weight:900; color:var(--navy); }

.avatar-upload{ display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.avatar-upload .avatar{ width:72px; height:72px; font-size:22px; cursor:pointer; }
.avatar-upload label{ font-size:12.5px; font-weight:700; color:var(--amber-dark); cursor:pointer; }
.avatar-upload input[type=file]{ display:none; }

.meta-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
.pill{ font-size:13px; font-weight:800; padding:5px 12px; border-radius:20px; background:var(--cream-2); color:var(--ink-soft); }
.pill-pending{ background:#FCEFD8; color:var(--amber-dark); }
.pill-approved{ background:var(--green-bg); color:var(--green); }
.pill-rejected{ background:var(--rust-bg); color:var(--rust); }

.photo-slots{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:8px; }
.photo-slot{
  aspect-ratio:1; border-radius:12px; border:1.5px dashed var(--ink-faint); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px; font-size:12.5px; color:var(--ink-soft); background:var(--cream);
  cursor:pointer; position:relative; overflow:hidden; background-size:cover; background-position:center;
}
.photo-slot.done{ border:1px solid var(--green); }
.photo-slot input[type=file]{ display:none; }
.photo-slot .remove-photo{ position:absolute; top:4px; left:4px; width:20px; height:20px; border-radius:50%; background:rgba(19,32,56,0.7); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; }

.type-toggle{ display:flex; gap:8px; margin-bottom:16px; }
.type-toggle .chip{ flex:1; text-align:center; }

.doc-row{ display:flex; align-items:center; gap:12px; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:8px; cursor:pointer; }
.doc-row:hover{ border-color:var(--amber); }
.doc-row .doc-ico{ font-size:18px; flex-shrink:0; }
.doc-row .doc-info{ flex:1; min-width:0; }
.doc-row .doc-title{ font-size:12.5px; font-weight:700; color:var(--navy); }
.doc-row .doc-sub{ font-size:12px; color:var(--ink-faint); margin-top:1px; }
.doc-row .doc-status{ font-size:16px; flex-shrink:0; }

.tag-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--cream-2); border:1px solid var(--line); border-radius:20px; padding:6px 6px 6px 12px; font-size:12px; font-weight:700; color:var(--navy); }
.tag-chip button{ width:18px; height:18px; border-radius:50%; background:var(--ink-faint); color:#fff; font-size:10px; display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; flex-shrink:0; }

.my-listing-row{ display:flex; gap:14px; align-items:center; background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:14px; margin-bottom:12px; box-shadow:var(--shadow); }
.my-listing-thumb{ width:64px; height:64px; border-radius:10px; background:var(--cream-2); background-size:cover; background-position:center; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:20px; }
.my-listing-info{ flex:1; min-width:0; }
.my-listing-title{ font-weight:800; color:var(--navy); font-size:14px; }
.my-listing-sub{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
.my-listing-actions{ display:flex; gap:8px; flex-shrink:0; }
.my-listing-actions .btn{ padding:8px 12px; font-size:12.5px; }

/* ===== inbox / notifications rows (phase 3) ===== */
.convo-row, .notif-row{ display:flex; align-items:center; gap:12px; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:10px; box-shadow:var(--shadow); cursor:pointer; }
.convo-row:hover, .notif-row:hover{ border-color:var(--amber); }
.convo-info, .notif-info{ flex:1; min-width:0; }
.convo-name{ font-weight:800; color:var(--navy); font-size:14px; }
.convo-preview{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notif-row.unread{ border-color:var(--amber); background:#FFFBF3; }
.notif-title{ font-weight:800; color:var(--navy); font-size:13.5px; }
.notif-body{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.notif-time{ font-size:12.5px; color:var(--ink-faint); flex-shrink:0; }

/* ===== star picker (phase 4 — reviews) ===== */
.star-picker{ display:flex; gap:4px; font-size:26px; line-height:1; margin-bottom:14px; }
.star-picker span{ cursor:pointer; color:var(--ink-faint); transition:color .1s; }
.star-stars{ color:var(--amber-dark); font-size:13px; letter-spacing:1px; }

/* ===== فيديو تعريفي ===== */
.video-showcase{ display:flex; gap:44px; align-items:center; flex-wrap:wrap; }
.video-showcase-text{ flex:1; min-width:260px; }
.video-showcase-text h2{ margin:6px 0 12px; }
.video-showcase-text p{ font-size:15px; color:var(--ink-soft); line-height:1.85; max-width:480px; }
.video-frame{ width:260px; flex-shrink:0; border-radius:26px; overflow:hidden; box-shadow:var(--shadow); border:7px solid var(--navy); background:#000; margin:0 auto; }
.video-frame video{ display:block; width:100%; height:auto; }
@media (max-width:640px){ .video-showcase{ text-align:center; justify-content:center; } .video-showcase-text p{ margin-left:auto; margin-right:auto; } }
.unread-dot{ width:9px; height:9px; border-radius:50%; background:var(--amber-dark); flex-shrink:0; }

/* ===== chat thread (phase 3) ===== */
.chat-card{ background:var(--paper); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); display:flex; flex-direction:column; height:70vh; max-height:640px; }
.chat-head{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); }
.chat-messages{ flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:8px; }
.msg{ max-width:72%; padding:10px 14px; border-radius:16px; font-size:13.5px; line-height:1.6; }
.msg.in{ align-self:flex-start; background:var(--cream-2); color:var(--ink); border-bottom-left-radius:4px; }
.msg.out{ align-self:flex-end; background:var(--navy); color:#fff; border-bottom-right-radius:4px; }
.msg img{ border-radius:10px; max-width:220px; margin-bottom:4px; display:block; }
.msg-time{ font-size:11.5px; color:var(--ink-faint); margin-top:4px; display:block; }
.msg.out .msg-time{ color:rgba(255,255,255,0.6); }
.chat-input-row{ display:flex; gap:8px; align-items:center; padding:12px 16px; border-top:1px solid var(--line); }
.chat-input-row input[type=text]{ flex:1; border-radius:20px; }
.chat-attach-btn{ width:40px; height:40px; border-radius:50%; background:var(--cream-2); border:1px solid var(--line); color:var(--navy); font-size:16px; cursor:pointer; flex-shrink:0; }
.chat-attach-btn input{ display:none; }
.chat-send-btn{ width:40px; height:40px; border-radius:50%; background:var(--navy); color:var(--amber); border:none; font-size:15px; cursor:pointer; flex-shrink:0; }

/* mobile nav drawer */
.mobile-nav{ display:none; flex-direction:column; background:var(--paper); border-top:1px solid var(--line); padding:8px 20px 16px; }
.mobile-nav.open{ display:flex; }
.mobile-nav a{ padding:12px 0; font-size:14.5px; font-weight:700; color:var(--ink-soft); border-bottom:1px solid var(--line); }
.mobile-nav a:last-child{ border-bottom:none; }