:root{
  --bg:#f7f8fa;
  --card:#ffffff;
  --ink:#17191c;
  --muted:#6a6f76;
  --border:#e5e8ec;
  --primary:#2d5ac6;
  --primary-200:#9cb2f2;
  --primary-300:#6f8fe8;
  --shadow:0 1px 3px rgba(0,0,0,.05);
  --shadow-strong:0 2px 8px rgba(0,0,0,.06);
  --radius:18px;
  --bottom-nav-height:68px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.45 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

.app{
  max-width:430px; /* common mobile width */
  margin:0 auto;
  background:#fff;
  height:100vh; /* fallback */
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden; /* scroll only main content */
  border-left:1px solid var(--border);
  border-right:1px solid var(--border);
}

/* Prefer dynamic viewport units on modern mobile browsers */
@supports (height: 100dvh) {
  .app { height:100dvh; min-height:100dvh; }
}

/* Status bar mimic */
.status-bar{
  height:36px;
  background:#f3f5f7;
  color:#2c2f33;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;
  font-size:13px;
}
.status-bar .sb-icons{display:flex;align-items:center;gap:8px}
.icon-signal{width:18px;height:10px;border:2px solid #2c2f33;border-top:none;border-right:none;transform:skewX(-12deg)}
.icon-battery{width:24px;height:12px;border:2px solid #2c2f33;position:relative;border-radius:3px}
.icon-battery:after{content:"";position:absolute;right:-4px;top:3px;width:3px;height:6px;background:#2c2f33;border-radius:1px}

/* Consistent app bar */
.appbar{position:relative;display:grid;grid-template-columns:56px 1fr auto;align-items:center;padding:8px 14px;height:60px;background:#fff;border-bottom:1px solid var(--border)}
.appbar .title{justify-self:center;font-size:18px;font-weight:700;letter-spacing:-.1px}
.appbar .spacer{width:34px;height:34px}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:none;background:transparent;color:#111;text-decoration:none;font-size:20px;line-height:1;border-radius:12px;touch-action:manipulation}
.nav-icon:hover{background:#f3f5f7}
.nav-icon:active{background:#eceff3}
.btn{
  cursor:pointer;
  border:0;
  outline:0;
  border-radius:12px;
  padding:14px 18px;
  font-weight:650;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  color:inherit;
  line-height:1;
  box-sizing:border-box;
  -webkit-appearance:none;
  appearance:none;
}
.btn.small{padding:10px 12px;border-radius:10px}
.btn.ghost{background:#fafbfc;border:1px solid #d9dee5;box-shadow:var(--shadow)}
.btn.outline{background:#fff;border:1.5px solid #c9cfd6}
.btn.outline:hover{box-shadow:0 2px 10px rgba(0,0,0,.08)}
.add-btn{justify-self:end;display:flex;gap:8px;align-items:center}
.add-btn .plus{font-size:18px}

/* Tooltip */
.tooltip{position:absolute;right:12px;top:64px}
.tooltip .tooltip-body{
  background:#fff6c2; /* softer yellow */
  color:#3b3a17;
  padding:12px 14px;
  border-radius:10px;
  box-shadow:var(--shadow);
  font-size:14px;
  position:relative;
}
.tooltip .tooltip-body:after{
  content:"";position:absolute;right:26px;top:-8px;width:14px;height:14px;background:#fff3ac;transform:rotate(45deg);box-shadow:-2px -2px 6px rgba(0,0,0,.03)
}

.content{
  padding:12px 14px calc(var(--bottom-nav-height) + 28px);
  background:var(--bg);
  flex:1 1 auto;
  overflow:auto;
  -webkit-overflow-scrolling:touch
}

.card{background:var(--card);border-radius:22px;padding:16px;margin:12px 6px;box-shadow:var(--shadow);border:1px solid #edf0f3}
.card-ghost{background:#f4f6f8;border:1px solid #e8edf3}
.card-head{display:flex;justify-content:space-between;align-items:start}
.eyebrow{font-size:14px;color:#6b7280;margin-bottom:8px}
.big-amount{font-size:20px;color:#1b1d21}
.big-amount strong{font-size:34px;font-weight:700;letter-spacing:-.2px}
.icon-btn{min-width:34px;height:34px;border-radius:50%;border:1px solid #bfc7d1;background:#fff;color:#6b7280;box-shadow:var(--shadow)}

/* Pills */
.pills{display:flex;gap:12px;margin:12px 2px 6px;flex-wrap:wrap}
.pill{border:1.5px solid #d3d9e0;background:#fff;border-radius:999px;padding:10px 14px;color:#4b5563;font-weight:600}
.pill.active{background:#e9edf3;color:#222;border-color:#cfd6dd}

/* Chart */
.chart{display:flex;gap:18px;align-items:flex-end;height:120px;padding:18px 6px 28px}
.bar{--h:50%;width:48px;height:calc(var(--h));background:#dfe5f5;border-radius:14px;display:flex;align-items:flex-end;justify-content:center;position:relative}
.bar span{position:absolute;bottom:-20px;color:#8b94a1;font-weight:600}
.bar.highlight{background:#b9c7f2}
.bar.strong{background:var(--primary)}

/* Next 6 months card */
.card .btn.ghost{margin-top:16px;border:1px solid #cdd4db;background:#fff}

/* Section head */
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.section-head h2{font-size:18px;margin:0;color:#111418;font-weight:750;letter-spacing:-.1px}

/* Transactions */
.tx-list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.tx{display:flex;align-items:center;justify-content:space-between;padding:10px 6px;border-bottom:1px solid #eff2f5}
.tx:last-child{border-bottom:none}
.tx-title{font-weight:700;font-size:17px;color:#2c3036}
.tx-meta{color:#757b84;font-size:13px;margin-top:4px}
.tx-amount{font-weight:750;white-space:nowrap;font-size:18px}

/* Bottom navigation */
.bottom-nav{
  position:fixed;
  left:0; right:0; bottom:0;
  height:var(--bottom-nav-height);
  background:#fff;
  border-top:1px solid var(--border);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:center;
  justify-items:center;
  box-shadow:0 -4px 12px rgba(0,0,0,.05);
  z-index:1000;
  padding-bottom:env(safe-area-inset-bottom);
  background-clip:padding-box;
}
.tab{background:none;border:0;padding:6px;border-radius:12px;opacity:.6}
.tab.active{opacity:1}
.tab svg{fill:none;stroke:#858b93}
.tab.active svg{fill:none;stroke:#5a6068}

/* Utilities */
@media (min-width:431px){
  .status-bar{border-left:1px solid var(--border);border-right:1px solid var(--border)}
}

/* ---------- Projects list (screen 2) ---------- */
.search-wrap{position:relative;margin:6px 6px 10px}
.search-wrap input{width:100%;border:2px solid #d3d9e0;border-radius:16px;padding:14px 16px 14px 44px;font-size:18px;outline:0}
.search-wrap .search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#7a8088;width:22px;height:22px}
.search-wrap .search-icon svg{width:22px;height:22px}

.chips{display:flex;gap:12px;flex-wrap:wrap;margin:8px 6px 10px}
.chip{border:1.5px solid #e1e6ed;background:#fafbfc;color:#383d44;border-radius:999px;padding:10px 14px;font-weight:600}
.chip.active{background:#fff;border-color:#cfd6dd}

.actions-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin:10px 6px}
.act-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;border:2px solid #d2d9e1;border-radius:18px;padding:12px 10px;font-weight:650;text-decoration:none;color:inherit;cursor:pointer}

.list{display:flex;flex-direction:column;gap:16px;margin-top:6px}
.project-card{position:relative;display:grid;grid-template-columns:100px 1fr;gap:14px;background:#fff;border-radius:18px;padding:14px;border:1px solid #e9edf2;box-shadow:var(--shadow)}
.project-card .card-link{position:absolute;inset:0;z-index:1;border-radius:18px}
.project-card header{position:relative;z-index:2}
.project-card .star{position:relative;z-index:3}
.thumb{width:100px;height:100px;border-radius:16px;overflow:hidden}
.placeholder{background:#e9edf3;}
.placeholder.b{background:#eceff3}
.placeholder.c{background:#eceff3}
.project-card .meta header{display:flex;justify-content:space-between;align-items:flex-start}
.project-card h3{margin:0;font-size:20px}
.project-card .dev{color:#6b7280;font-weight:650;margin-top:6px}
.project-card .price-row{display:flex;justify-content:space-between;align-items:center;margin:8px 0}
.project-card .price{font-weight:650}
.project-card .sold{color:#6b7280;font-weight:650}
.project-card .progress{height:10px;background:#eceff4;border-radius:10px;overflow:hidden}
.project-card .progress span{display:block;height:100%;width:var(--pct,50%);background:#2e58c7}
.star{border:0;background:none;font-size:22px;line-height:1;color:#b9c0c9}
.star.on, .star:hover{color:#f5bf1f}
.badge{display:inline-block;background:#f5f6f8;border:1px solid #e3e6ea;padding:6px 10px;border-radius:999px;font-weight:650;color:#5b616a;font-size:13px;margin-top:8px}

/* ---------- Details (screen 3) ---------- */
.hero-card{position:relative;border-radius:18px;overflow:hidden;margin:12px 6px;box-shadow:var(--shadow-strong)}
.hero-img{height:200px}
.hero-card .hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.25),rgba(0,0,0,.5));display:flex;flex-direction:column;justify-content:space-between;padding:16px}
.hero-card .dev{color:#fff;font-weight:800;font-size:18px;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.hero-card .proj{color:#fff;font-weight:800;font-size:24px;text-shadow:0 1px 2px rgba(0,0,0,.4)}

.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:10px 6px}
.info .label{color:#6b7280;font-weight:700}
.info .value{font-weight:750;font-size:18px;margin-top:6px}

.inventory{margin:6px 6px 2px}
.progress-line{position:relative;height:12px;background:#eff2f6;border-radius:999px;overflow:hidden;border:1px solid #e2e7ee}
.progress-line .fill{position:absolute;left:0;top:0;bottom:0;width:var(--pct,50%);background:#3f3f46}
.inv-labels{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.muted{color:#6b7280}
.align-right{text-align:right}

.stack-actions{display:flex;flex-direction:column;gap:12px;margin:14px 6px}
.btn.block{width:100%}
.btn.block.xl{padding:16px 20px;font-size:18px}

.stat-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin:8px 6px}
.stat-card{background:#fff;border:1px solid #e6ebf1;border-radius:14px;padding:12px;box-shadow:var(--shadow)}
.stat-card .icon{font-size:20px}
.stat-card .title{font-weight:750;margin:6px 0}
.stat-card .desc{color:#6b7280;font-size:13px}

.h-scroll{display:flex;gap:14px;overflow-x:auto;padding:6px 6px 6px 6px;scroll-snap-type:x proximity}
.gallery .img-card{width:270px;height:220px;border-radius:16px;flex:0 0 auto;scroll-snap-align:start;background:#eceff3}

.units .unit-card{min-width:270px;background:#fff;border:1px solid #e6ebf1;border-radius:16px;box-shadow:var(--shadow);padding:12px}
.unit-img{height:200px;border-radius:12px;background:#eef1f0}
.unit-img.floorplan{background:#eef1f0}
.unit-img.floorplan.alt{background:#eef1f0}
.unit-tags{display:flex;gap:8px;margin:10px 0}
.unit-price{font-weight:800;margin-bottom:6px}
.unit-meta{color:#6b7280}

/* ---------- Request Advance (screen) ---------- */
.advance .section-title{font-size:20px;margin:12px 10px 4px;color:#1b1d21}
.deal-card{background:#fff;border:1px solid #e6ebf1;border-radius:18px;margin:12px 6px;padding:14px;box-shadow:var(--shadow)}
.deal-head{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.deal-title{font-size:22px;font-weight:800;margin:0}
.deal-sub{color:#6b7280;font-weight:600;margin-top:4px}
.deal-rows{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.deal-rows .row{display:flex;justify-content:space-between;align-items:center;color:#3a3f45}
.deal-rows .row strong{font-weight:800}
.deal-rows .row.total strong{color:#111}
.deal-rows .docs{color:#6b7280}

/* iOS-like switch */
.switch{position:relative;display:inline-block;width:48px;height:28px}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;cursor:pointer;inset:0;background:#e5e7eb;border:2px solid #d1d5db;border-radius:999px;transition:background .2s,border-color .2s}
.switch .slider:after{content:"";position:absolute;height:20px;width:20px;left:3px;top:50%;transform:translateY(-50%);background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.switch input:checked + .slider{background:#2e58c7;border-color:#2e58c7}
.switch input:checked + .slider:after{transform:translate(21px,-50%)}

.summary{background:#fff;border:1px solid #e6ebf1;border-radius:18px;margin:4px 6px 16px;padding:14px;box-shadow:var(--shadow)}
.summary .row{display:flex;justify-content:space-between;align-items:center;margin:8px 2px}
.summary .row strong{font-weight:800}
.summary .row.total strong{color:#111}

.bottom-cta{position:relative;margin:8px 6px calc(var(--bottom-nav-height) - 20px)}

/* ---------- Forms & Docs & Status ---------- */
.form{padding:6px}
.field{display:flex;flex-direction:column;margin:10px 6px}
.field label{font-weight:700;margin-bottom:8px}
.field input,.field select{border:1.8px solid #e1e6ed;border-radius:14px;padding:14px 14px;font-size:16px;outline:0;width:100%}
.input-split{position:relative;display:block}
.input-split input{width:100%;padding-right:64px}
.input-split .addon{position:absolute;right:12px;top:50%;transform:translateY(-50%);border:0;border-radius:0;padding:0;background:transparent;color:#6b7280;font-weight:700}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 6px}
.grid-2 .field{margin:0}
@media (max-width: 390px){
  .grid-2{grid-template-columns:1fr}
}
.help{color:#6b7280;font-size:12px;margin-top:6px}

.info-banner{display:flex;gap:10px;align-items:flex-start;background:#f3f5f7;border:1px solid #e5e7eb;color:#333;border-radius:14px;margin:12px 6px;padding:12px}
.info-banner .lock{font-size:18px;line-height:1}

.doc-item{display:grid;grid-template-columns:64px 1fr;gap:14px;margin:12px 6px;background:#fff;border:1px solid #e6ebf1;border-radius:16px;padding:12px;box-shadow:var(--shadow)}
.doc-icon{width:64px;height:64px;border-radius:14px;background:#f0f2f5;display:flex;align-items:center;justify-content:center;font-size:28px}
.doc-icon svg{width:28px;height:28px;stroke:#3b3f45}
.doc-item.pending{border-color:#f3d6d6;background:#fff}
.doc-item.pending .doc-icon{background:#fff5f5}
.status-badge{display:inline-block;background:#fff5f5;border:1px solid #f3cfcf;color:#9f1239;border-radius:999px;padding:4px 8px;font-size:12px;margin-top:6px}
.doc-title{font-weight:800}
.doc-title .ok{color:#16a34a}
.doc-desc{color:#6b7280}
.progress.small{height:10px;background:#eceff4;border-radius:999px;overflow:hidden;border:1px solid #e2e7ee;margin:8px 0;width:180px}
.progress.small span{display:block;height:100%;width:var(--pct,50%);background:#2e58c7}

.center-large{text-align:center;margin-top:6px}
.circle-ok{width:56px;height:56px;border-radius:50%;background:#2e58c7;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:28px;margin:12px auto;box-shadow:0 2px 8px rgba(46,88,199,.25)}
.hero-title{margin:4px 0 2px;font-size:22px}

.info-card{background:#fff;border:1px solid #e6ebf1;border-radius:18px;margin:12px 6px;padding:12px;box-shadow:var(--shadow)}
.kv{display:flex;justify-content:space-between;gap:12px;margin:8px 2px}
.kv span{color:#6b7280}
.kv strong{font-weight:800}

/* Small helper note */
.note{font-size:12px}

/* -------- Profile -------- */
.row-flex{display:flex;align-items:center;gap:12px}
.grow{flex:1 1 auto}
.h6{font-size:18px}
.avatar{width:54px;height:54px;flex:0 0 54px;aspect-ratio:1/1;border-radius:50%;border:2px solid #cfd6dd;display:flex;align-items:center;justify-content:center;color:#2e3a45;font-weight:800;background:#f7f9fc}
.status-row{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.pill{display:inline-block;border-radius:999px;padding:6px 10px;font-weight:700;border:1px solid #e4e9ef;background:#f6f8fb;color:#46505a;font-size:12px}
.pill.success{background:#eaf9f1;border-color:#c9f0db;color:#116a3b}
.checklist{list-style:none;margin:10px 2px 0;padding:0;display:flex;flex-direction:column;gap:8px}
.checklist li{display:flex;justify-content:space-between;align-items:center;color:#3b4250}
.checklist li.ok span{color:#16a34a}
.checklist li.warn{color:#6b7280}
.progress.lg{position:relative;height:14px;background:#e6ebf1;border-radius:999px;overflow:hidden;border:1px solid #dde3ea;margin:8px 2px 6px}
.progress.lg span{position:absolute;left:0;top:0;bottom:0;width:var(--pct,50%);background:#2e58c7}
.pref-row{display:flex;align-items:center;justify-content:space-between;padding:8px 2px}

/* -------- Auth & Intro -------- */
.hero-block{margin:8px 6px}
.big-title{font-size:28px;font-weight:800;letter-spacing:-.2px;margin:0 0 6px}
.lead{color:#6b7280}
.phone-input{display:grid;grid-template-columns:120px 1fr;gap:10px}
.phone-input{width:100%}
.phone-input select,.phone-input input{border:1.8px solid #e1e6ed;border-radius:14px;padding:14px 14px;font-size:18px;outline:0;background:#fff;width:100%;min-width:0}
.bullet-list{list-style:none;margin:16px 10px;padding:0;display:flex;flex-direction:column;gap:10px;color:#3b4250}
.bullet-list li::before{content:"✓";display:inline-block;margin-right:10px;color:#2e58c7;font-weight:800}
.check-cards{list-style:none;margin:8px 6px;padding:0;display:flex;flex-direction:column;gap:14px}
.check-cards li{background:#fff;border:1px solid #e6ebf1;border-radius:14px;padding:12px;box-shadow:var(--shadow)}
.content.centered{display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 60px);padding-top:0;padding-bottom:0}
.centered .hero-block{text-align:center}
.steps{list-style:none;margin:8px 12px;padding:0;display:flex;flex-direction:column;gap:16px}
.steps li{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:flex-start}
.steps .num{width:32px;height:32px;border-radius:50%;background:#e9efff;color:#2e58c7;display:flex;align-items:center;justify-content:center;font-weight:800}
.steps .text{color:#3b4250}
.match-card .avatar{width:48px;height:48px}

/* -------- Receipts spacing -------- */
.receipt{padding:12px 0;border-top:1px solid #edf0f3}
.receipt:first-of-type{border-top:none}

/* -------- Payment Plans polish -------- */
.plan-card{display:grid;grid-template-columns:28px 1fr;gap:10px}
.plan-card .icon{width:28px;height:28px;border-radius:6px;background:#e9efff;display:flex;align-items:center;justify-content:center;color:#2e58c7;font-weight:800}
.plan-steps{margin:6px 2px 0;padding-left:16px;color:#3b4250}
.plan-steps li{margin:6px 0}
.bank-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.bank-item{display:flex;align-items:center;justify-content:space-between}
.bank-item .left{display:flex;align-items:center;gap:10px}
.bank-logo{width:36px;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px}
.bank-logo.enbd{background:#0033a1}
.bank-logo.adcb{background:#d71920}
.bank-item .name{font-weight:700}

/* Map pins polish */
.map .label{border:1px solid #d9dee5;padding:6px 8px;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.08);background:#fff;color:#2e58c7}
.map .pin:hover .label{border-color:#b9c0c9}

.v-steps{position:relative;margin:12px 6px 20px}
.v-steps:before{content:"";position:absolute;left:18px;top:6px;bottom:6px;width:2px;background:#e5e7eb}
.v-steps .step{position:relative;display:flex;align-items:center;gap:12px;margin:16px 0;padding-left:36px}
.v-steps .dot{position:absolute;left:18px;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:#d1d5db;box-shadow:0 0 0 2px #fff}
.v-steps .step.done .dot{background:#16a34a}
.v-steps .step.active .dot{background:#2e58c7}
.v-steps .label{color:#3b4250}

.kv-list{background:#fff;border:1px solid #e6ebf1;border-radius:18px;margin:12px 6px;padding:12px;box-shadow:var(--shadow)}

/* Request Status visuals */
.progress-steps{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.progress-steps .step{display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:center}
.progress-steps .dot{width:12px;height:12px;border-radius:50%;background:#cbd5e1;display:inline-block}
.progress-steps .dot.on{background:#2e58c7}
.progress-steps .bar{--w:30%;height:10px;border-radius:999px;background:#e5e7eb;position:relative;overflow:hidden}
.progress-steps .bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);background:#9cb2f2}
.progress-steps .bar.on::after{background:#2e58c7}
.progress-steps .label{color:#4b5563;font-weight:650}
/* Headings */
.section-title{margin:14px 8px 8px;font-size:18px;font-weight:750;color:#111418}
.section-subtitle{margin:4px 8px 8px;font-size:14px;color:#6b7280}

/* Clickable list items */
.link{color:inherit;text-decoration:none}
.thumb-link{display:block}