/* Owner Dashboard home + Owner Reviews (owner-home.js), from Moataz's approved 2026-11-07 mockup. Scoped to .oh-*.
   Palette: deep navy #10283D, header/sidebar #08243A, primary navy #203D4E, gold #C7A250, gold gradient #E0B755 → #B98412,
   page #F5F7F9, cards #FFFFFF, text #172536, muted #64748B, borders #E0E5EB, success #16A34A, warning #F3B544. */
.oh-view{--oh-deep:var(--os-ink,#10283D);--oh-head:var(--os-header,#08243A);--oh-navy:var(--os-navy,#203D4E);--oh-gold:var(--os-gold,#C7A250);--oh-gold-grad:var(--os-gold-grad,linear-gradient(135deg,#E0B755 0%,#B98412 100%));
  --oh-bg:var(--os-bg,#F5F7F9);--oh-card:var(--os-card,#FFFFFF);--oh-ink:#172536;--oh-muted:var(--os-muted,#64748B);--oh-line:var(--os-line,#E0E5EB);--oh-ok:#16A34A;--oh-warn:#F3B544;--oh-bad:#DC2626;
  --oh-shadow:0 12px 32px -20px rgba(16,40,61,.38),0 2px 6px -2px rgba(16,40,61,.06);--oh-navy-grad:linear-gradient(160deg,#143149 0%,#0B2438 100%);
  background:var(--oh-bg);color:var(--oh-ink)}
html[lang="ar"] .oh-view,html[dir="rtl"] .oh-view{font-family:Cairo,'Segoe UI',Tahoma,sans-serif}
.oh-view .oh-ic{width:22px;height:22px;flex:none}
.oh-view .oh-ic-sm{width:16px;height:16px}
.oh-view .oh-ic-lg{width:40px;height:40px}
.oh-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.oh-page{padding:0 20px 28px 32px;min-width:0}
html[dir="ltr"] .oh-page{padding:0 32px 28px 20px}
.oh-card{background:var(--oh-card);border:1px solid var(--oh-line);border-radius:18px;box-shadow:var(--oh-shadow);min-width:0}
.oh-muted{color:var(--oh-muted)}
.oh-view h1,.oh-view h2,.oh-view h3{color:inherit;margin:0;letter-spacing:0;font-family:Inter,'Segoe UI',system-ui,sans-serif}
html[lang="ar"] .oh-view h1,html[lang="ar"] .oh-view h2,html[lang="ar"] .oh-view h3,html[dir="rtl"] .oh-view h1,html[dir="rtl"] .oh-view h2,html[dir="rtl"] .oh-view h3{font-family:Cairo,'Segoe UI',Tahoma,sans-serif}
.oh-state{padding:28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:-40px;position:relative;z-index:2}
.oh-foot{margin:14px 4px 0;font-size:.82rem;color:var(--oh-muted)}

/* ---------- hero: the sunset villa banner cut from Moataz's approved mockup (his own artwork, text removed) ---------- */
.oh-hero{position:relative;margin:0 -20px 0 -32px;height:232px;display:flex;align-items:flex-start;padding:24px 34px 0;overflow:hidden;
  background:var(--oh-bg) url('/img/owner/dashboard-hero-rtl.webp') left top/100% auto no-repeat}
html[dir="ltr"] .oh-hero{background-image:url('/img/owner/dashboard-hero-ltr.webp');background-position:right top}
.oh-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(8,36,58,.45) 0%,rgba(8,36,58,.25) 38%,rgba(8,36,58,0) 60%)}
html[dir="ltr"] .oh-hero::before{background:linear-gradient(90deg,rgba(8,36,58,.45) 0%,rgba(8,36,58,.25) 38%,rgba(8,36,58,0) 60%)}
.oh-hero::after{content:"";position:absolute;inset:118px 0 0;background:linear-gradient(180deg,rgba(245,247,249,0),var(--oh-bg) 22px)}
.oh-hero-text{position:relative;z-index:1;color:#fff;max-width:780px;text-shadow:0 2px 10px rgba(4,24,42,.45)}
.oh-view .oh-hero h1{color:#fff;display:flex;align-items:center;gap:14px;font-size:2.15rem;line-height:1.25;font-weight:800}
.oh-hero-ic{color:var(--oh-gold);display:inline-flex}
.oh-hero-ic .oh-ic{width:46px;height:46px;stroke-width:2}
.oh-hero p{margin:8px 0 0;font-size:1.12rem;color:rgba(255,255,255,.92);font-weight:500}

/* ---------- four money cards ---------- */
.oh-kpis{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-top:-96px}
.oh-kpi-link{cursor:pointer;transition:box-shadow .18s ease,transform .18s ease}
.oh-kpi-link:hover{box-shadow:0 14px 30px -14px rgba(16,40,61,.45);transform:translateY(-1px)}
.oh-kpi-go{position:absolute;inset:0;z-index:1;border-radius:inherit}
.oh-kpi-go:focus-visible{outline:2px solid var(--oh-gold,#C7A250);outline-offset:2px}
.oh-kpi .oh-parts{z-index:3}
.oh-kpi{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 22px;min-height:118px}
.oh-kpi-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.oh-kpi h2{font-size:1.06rem;font-weight:700;color:var(--oh-deep)}
.oh-amt{font-size:clamp(1.15rem,1.5vw,1.62rem);font-weight:800;color:var(--oh-deep);line-height:1.2;white-space:nowrap}
.oh-amt-2{font-size:1.05rem;font-weight:700;opacity:.85}
.oh-amt-empty{font-size:1rem;font-weight:600;color:var(--oh-muted);white-space:normal}
.oh-sub{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;color:var(--oh-muted);font-weight:600}
.oh-trend.up{color:var(--oh-ok)} .oh-trend.down{color:var(--oh-bad)} .oh-trend.down .oh-ic{transform:rotate(180deg)}
.oh-gi{flex:none;display:grid;place-items:center;width:clamp(44px,3.6vw,60px);height:clamp(44px,3.6vw,60px)}
.oh-gi .oh-ic{width:100%;height:100%;stroke-width:1.6}
.oh-gold{background:var(--oh-gold-grad);border-color:transparent;color:#fff;box-shadow:0 18px 30px -18px rgba(185,132,18,.95)}
.oh-gold h2,.oh-gold .oh-amt{color:#fff}
.oh-gold .oh-amt-empty{color:rgba(255,255,255,.9)}
.oh-gi-w .oh-ic{color:#fff}
.oh-chip{align-self:flex-start;margin-top:4px;display:inline-flex;padding:3px 16px;border-radius:999px;background:#FFF5DF;color:#5B4205;font-weight:800;font-size:.86rem;border:1px solid rgba(255,255,255,.7)}
.oh-parts{position:absolute;top:10px;inset-inline-end:10px;font-size:.8rem}
.oh-parts summary{list-style:none;cursor:pointer;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.8);color:#fff;font-weight:800;font-style:italic;font-family:Georgia,serif}
.oh-parts summary::-webkit-details-marker{display:none}
.oh-parts div{position:absolute;top:30px;inset-inline-end:0;z-index:10;min-width:220px;display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:12px;background:var(--oh-deep);color:#fff;box-shadow:0 16px 30px -12px rgba(16,40,61,.6)}
.oh-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:6px;background:#fff}
.oh-dot-pendingS{background:#FFE7A3}.oh-dot-held{background:#FCA5A5}.oh-dot-refunded{background:#CBD5E1}.oh-dot-scheduled{background:#BFDBFE}

/* ---------- main grid: sources | chart | side stack ; tasks | properties | side ---------- */
/* Column widths measured on the approved mockup (1672px): tasks 338 | +55 for the sources card | chart 585 | side 343;
   row 2 lets My properties reach under the sources card, as in the mockup. */
.oh-grid{display:grid;grid-template-columns:minmax(0,338fr) minmax(0,55fr) minmax(0,585fr) minmax(0,343fr);grid-template-areas:"src src chart side" "tasks props props side";column-gap:15px;row-gap:16px;margin-top:22px;align-items:stretch}
.oh-src{grid-area:src}.oh-chart{grid-area:chart}.oh-side{grid-area:side}.oh-tasks{grid-area:tasks}.oh-props{grid-area:props}
.oh-src,.oh-chart,.oh-tasks,.oh-props{padding:14px 18px}
.oh-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.oh-head h2{display:flex;align-items:center;gap:10px;font-size:1.18rem;font-weight:800;color:var(--oh-deep)}
.oh-view .oh-head .oh-gi{width:30px;height:30px}.oh-head .oh-gi .oh-ic{stroke-width:1.9}
.oh-side{display:flex;flex-direction:column;gap:14px;min-width:0}

/* buttons */
.oh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border-radius:999px;font-weight:800;font-size:.98rem;text-decoration:none;cursor:pointer;border:1px solid transparent;font-family:inherit;line-height:1.1}
.oh-btn-sm{min-height:40px;padding:0 18px;font-size:.92rem}
.oh-btn-gold{background:var(--oh-gold-grad);color:#fff;box-shadow:0 10px 20px -12px rgba(185,132,18,.9)}
.oh-btn-gold:hover{filter:brightness(1.05)}
.oh-btn-white{background:#fff;color:var(--oh-deep);width:100%}
.oh-btn-white:hover{background:#FFF5DF}
.oh-btn-line{background:#fff;color:var(--oh-deep);border-color:var(--oh-line)}
.oh-btn-line:hover{border-color:var(--oh-gold)}
.oh-btn-text{background:transparent;color:var(--oh-muted);padding-inline:8px}
.oh-btn:focus-visible,.oh-view a:focus-visible,.oh-view select:focus-visible,.oh-bar:focus-visible,.oh-dots:focus-visible{outline:3px solid #3289C7;outline-offset:2px}
.oh-more{display:inline-block;margin-top:10px;color:#8A6510;font-weight:700;font-size:.9rem;text-decoration:none}
.oh-more:hover{text-decoration:underline}

/* select */
.oh-select{position:relative;display:inline-flex;align-items:center}
.oh-select select,.oh-filters select{appearance:none;-webkit-appearance:none;border:1px solid var(--oh-line);background:#fff;border-radius:999px;min-height:40px;padding:0 16px;padding-inline-end:38px;font:inherit;font-weight:700;font-size:.9rem;color:var(--oh-deep);cursor:pointer}
.oh-select .oh-ic{position:absolute;inset-inline-end:14px;pointer-events:none;color:var(--oh-deep)}

/* ---------- monthly bars ---------- */
.oh-chart{position:relative}
.oh-bars-wrap+.oh-bars-wrap{margin-top:14px}
.oh-cur{font-weight:800;font-size:.85rem;color:var(--oh-muted);margin-bottom:4px}
.oh-bars{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;height:140px;direction:ltr} /* months run left to right in both languages, as in the mockup */
.oh-yaxis{position:relative;height:calc(100% - 28px);font-size:.78rem;color:var(--oh-muted);font-weight:600}
.oh-yaxis span{position:absolute;inset-inline-end:0;bottom:var(--y);transform:translateY(50%)}
.oh-plot{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:10px;align-items:end;height:100%;
  background:repeating-linear-gradient(to top,var(--oh-line) 0 1px,transparent 1px 25%) 0 0/100% calc(100% - 28px) no-repeat;padding-bottom:28px}
.oh-bar-col{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.oh-bar{position:relative;width:min(70%,58px);height:var(--h);min-height:0;border:0;padding:0;border-radius:6px 6px 0 0;cursor:pointer;
  background:linear-gradient(180deg,#F6D98C 0%,#E0B755 45%,#C49326 100%);box-shadow:inset 0 -6px 10px -6px rgba(140,98,10,.6)}
.oh-bar:last-child{background:linear-gradient(180deg,#E7BE55 0%,#C7962E 50%,#A87A10 100%)}
.oh-bar-col:last-child .oh-bar{background:linear-gradient(180deg,#E3B544 0%,#C08A1B 55%,#9C6F0A 100%)}
.oh-bar em{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:4px;font-style:normal;font-weight:800;font-size:.86rem;color:var(--oh-deep);white-space:nowrap}
/* a tall bar's figure sits just inside its top, so it never rises into the card header or over the period menu */
.oh-bar-in em{bottom:auto;top:4px;margin-bottom:0}
.oh-bar-lbl{position:absolute;bottom:-26px;font-size:.84rem;font-weight:600;color:var(--oh-deep);white-space:nowrap}
.oh-tip{position:absolute;transform:translate(-50%,-100%);background:var(--oh-deep);color:#fff;font-size:.82rem;font-weight:700;padding:6px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;z-index:5;direction:ltr}
.oh-empty-chart{height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;color:var(--oh-muted);border:1px dashed var(--oh-line);border-radius:14px;padding:16px}
.oh-empty-chart p{margin:0;max-width:340px}

/* ---------- sources donut ---------- */
.oh-donut-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.oh-donut{--stops:var(--oh-gold) 0 100%;width:150px;height:150px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--stops));box-shadow:inset 0 0 0 1px rgba(16,40,61,.06)}
.oh-donut-empty{background:conic-gradient(#E5E9EF 0 100%)}
.oh-donut-c{width:108px;height:108px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 2px 10px -4px rgba(16,40,61,.2)}
.oh-donut-c b{font-size:1.05rem;color:var(--oh-deep);font-weight:800;line-height:1.2}
.oh-donut-c .oh-donut-amt{font-size:1.32rem}
.oh-donut-c span{font-size:.78rem;color:var(--oh-muted);font-weight:600}
.oh-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;flex:1;min-width:140px}
.oh-legend li{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--oh-deep)}
.oh-legend i{width:14px;height:14px;border-radius:50%;flex:none}
.oh-legend span{flex:1}
.oh-note{margin:8px 0 0;font-size:.74rem;color:var(--oh-muted);line-height:1.45}

/* ---------- navy cards (status, performance) ---------- */
.oh-navy{background:var(--oh-navy-grad);border-color:#163A55;color:#fff;padding:16px 20px}
.oh-navy h2{font-size:1.22rem;font-weight:800;color:#fff}
.oh-navy p{color:rgba(255,255,255,.88);margin:8px 0 0;font-size:.92rem;line-height:1.55}
.oh-navy-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.oh-pill{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 18px;border-radius:999px;font-weight:800;font-size:1.02rem}
.oh-pill-verified{background:linear-gradient(180deg,#22C55E,#16A34A);color:#fff}
.oh-pill-pending{background:var(--oh-warn);color:#3B2A00}
.oh-pill-not_verified{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3)}
.oh-pill-action_required{background:#FEE2E2;color:#991B1B}
.oh-shield{width:68px;height:68px;flex:none;display:grid;place-items:center;border-radius:22px;
  background:radial-gradient(circle at 35% 30%,#F8DE95 0%,#E0B755 45%,#B98412 100%);color:#5B3B00;box-shadow:0 10px 24px -10px rgba(224,183,85,.8)}
.oh-shield .oh-ic{width:46px;height:46px;stroke-width:2.2}
.oh-shield-not_verified,.oh-shield-action_required{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}
.oh-link-w{display:inline-block;margin-top:10px;color:#F1D58A;font-weight:700;font-size:.9rem}
.oh-perf-row{display:flex;align-items:flex-start;gap:16px}
.oh-perf-row>div{flex:1;min-width:0;text-align:center}
.oh-trophy{width:72px;height:72px;flex:none;display:grid;place-items:center}
.oh-trophy .oh-ic{width:68px;height:68px;stroke-width:1.6}
.oh-perf .oh-btn-white{margin-top:12px}
.oh-score{font-size:1.4rem!important;font-weight:800;color:#fff!important;margin:6px 0 0!important}
.oh-based{margin:2px 0 0!important}
.oh-perf-empty{display:flex;flex-direction:column;gap:4px}
.oh-perf-empty b{color:#fff;font-size:1.08rem}
.oh-stars{display:inline-flex;gap:4px;margin-top:10px;direction:ltr}
.oh-star{position:relative;width:20px;height:20px;display:inline-block}
.oh-star svg{position:absolute;inset:0;width:100%;height:100%}
.oh-star-bg{color:#CBD5E1;fill:#CBD5E1;stroke:none}
.oh-navy .oh-star-bg{color:rgba(255,255,255,.25);fill:rgba(255,255,255,.25)}
.oh-star-fg{color:#F3B544;fill:#F3B544;stroke:#E0A325;clip-path:inset(0 calc(100% - var(--f)) 0 0)}
.oh-star-lg{width:30px;height:30px}

/* ---------- membership ---------- */
.oh-member{padding:10px 20px}
.oh-member-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.oh-member h2{font-size:1.18rem;font-weight:800;color:var(--oh-deep)}
.oh-member .oh-muted{margin:4px 0 0;font-weight:600}
.oh-days{margin:4px 0 0;color:var(--oh-deep)}
.oh-days b{font-size:1.55rem;font-weight:800;line-height:1.1}
.oh-days span{color:#B98412;font-weight:800;font-size:1.15rem}
.oh-basis{margin:2px 0 0;font-size:.72rem;color:var(--oh-muted)}

/* ---------- properties ---------- */
.oh-prop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.oh-prop{border:1px solid var(--oh-line);border-radius:14px;overflow:visible;background:#fff;display:flex;flex-direction:column;box-shadow:0 6px 16px -14px rgba(16,40,61,.5)}
.oh-prop-img{position:relative;display:block;aspect-ratio:2/1;border-radius:14px 14px 0 0;overflow:hidden;background:linear-gradient(135deg,#0B2D46,#203D4E)}
.oh-prop-img img{width:100%;height:100%;object-fit:cover;display:block}
.oh-noimg{position:absolute;inset:0 0 34px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:rgba(255,255,255,.75);font-size:.78rem}
.oh-pst{position:absolute;bottom:8px;inset-inline-start:10px;padding:3px 14px;border-radius:999px;font-size:.82rem;font-weight:800;color:#fff;background:var(--oh-ok)}
.oh-pst-paused,.oh-pst-draft{background:#475569}
.oh-pst-pending{background:var(--oh-warn);color:#3B2A00}
.oh-pst-suspended{background:var(--oh-bad)}
.oh-prop-body{padding:10px 12px 4px}
.oh-prop-body h3{font-size:1rem;font-weight:800;line-height:1.35}
.oh-prop-body h3 a{color:var(--oh-deep);text-decoration:none}
.oh-prop-body h3 a:hover{text-decoration:underline}
.oh-prop-body p{display:flex;align-items:center;gap:5px;margin:4px 0 0;font-size:.88rem}
.oh-prop-foot{margin-top:auto;display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;padding:6px 6px 8px 10px;font-size:.86rem;font-weight:700;color:var(--oh-deep)}
.oh-prop-foot>span{white-space:nowrap}
.oh-rate,.oh-bk{display:inline-flex;align-items:center;gap:4px}
.oh-ic-star{color:#F3B544;fill:#F3B544}
.oh-menu{position:relative;margin-inline-start:auto}
.oh-dots{width:40px;height:40px;border-radius:10px;border:0;background:transparent;color:var(--oh-deep);display:grid;place-items:center;cursor:pointer}
.oh-dots:hover{background:var(--oh-bg)}
.oh-menu-list{position:absolute;bottom:100%;inset-inline-end:0;z-index:20;min-width:200px;background:#fff;border:1px solid var(--oh-line);border-radius:12px;box-shadow:0 18px 40px -16px rgba(16,40,61,.4);padding:6px;display:flex;flex-direction:column}
.oh-menu-list[hidden]{display:none}
.oh-menu-list a{padding:10px 12px;border-radius:8px;color:var(--oh-deep);text-decoration:none;font-weight:600;white-space:nowrap}
.oh-menu-list a:hover,.oh-menu-list a:focus{background:#FFF5DF}
.oh-empty{padding:18px;text-align:center;border:1px dashed var(--oh-line);border-radius:14px}
.oh-empty p{margin:4px 0}

/* ---------- required tasks ---------- */
.oh-task-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.oh-task{display:flex;align-items:center;gap:12px;padding:6px 6px;border-bottom:1px solid var(--oh-line);color:var(--oh-deep);text-decoration:none;min-height:50px}
.oh-task-list li:last-child .oh-task{border-bottom:0}
.oh-task:hover{background:#FAFBFC}
.oh-task-ic{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;background:#94A3B8}
.oh-task-ic .oh-ic{width:18px;height:18px;stroke-width:2.6}
.oh-task-done .oh-task-ic{background:var(--oh-ok)}
.oh-task-pending .oh-task-ic{background:var(--oh-warn);color:#3B2A00}
.oh-task-action .oh-task-ic{background:var(--oh-bad)}
.oh-task-todo .oh-task-ic{background:#fff;color:#B98412;border:2px solid #E0B755}
.oh-task-txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.oh-task-txt b{font-weight:800;font-size:.96rem}
.oh-task-st{font-size:.85rem;font-weight:700}
.oh-task-done .oh-task-st{color:var(--oh-ok)}
.oh-task-pending .oh-task-st{color:#A16207}
.oh-task-action .oh-task-st{color:var(--oh-bad)}
.oh-task-todo .oh-task-st{align-self:flex-start;background:#FDF0C8;color:#7A5300;padding:1px 14px;border-radius:999px}
.oh-task-go{color:var(--oh-deep);display:inline-flex}
.oh-alldone{margin:0 0 6px}

/* ---------- reviews page ---------- */
.oh-rv-layout{position:relative;z-index:2;display:grid;grid-template-columns:330px minmax(0,1fr);gap:18px;margin-top:-92px;align-items:start}
.oh-rv-sum{text-align:center;position:sticky;top:90px}
.oh-rv-sum .oh-btn-white{margin-top:16px}
.oh-rv-rules{font-size:.8rem!important;color:rgba(255,255,255,.72)!important}
.oh-dist{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;direction:ltr}
.oh-dist li{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700}
.oh-dist-bar{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden}
.oh-dist-bar i{display:block;height:100%;background:var(--oh-gold-grad)}
.oh-rv-list{padding:18px 20px}
.oh-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.oh-filters label{position:relative}
.oh-check{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;min-height:40px;cursor:pointer}
.oh-check input{width:18px;height:18px;accent-color:#B98412}
.oh-rv-items{list-style:none;margin:0;padding:0}
.oh-rv{padding:16px 2px;border-top:1px solid var(--oh-line)}
.oh-rv-top{display:flex;align-items:center;gap:12px}
.oh-rv-who{flex:1;display:flex;flex-direction:column;min-width:0}
.oh-rv-who b{font-weight:800;color:var(--oh-deep)}
.oh-rv-who span{font-size:.85rem}
.oh-rv-who a{color:inherit}
.oh-rv-stars .oh-stars{margin-top:0}
.oh-rv-text{margin:10px 0 0;line-height:1.65;white-space:pre-line}
.oh-rv-cats{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 0;font-size:.82rem;color:var(--oh-muted)}
.oh-rv-cats b{color:var(--oh-deep)}
.oh-resp{margin-top:12px;padding:12px 14px;border-radius:12px;background:#F8FAFC;border-inline-start:3px solid var(--oh-gold)}
.oh-resp b{display:flex;align-items:center;gap:6px;color:var(--oh-deep)}
.oh-resp p{margin:6px 0 4px;white-space:pre-line}
.oh-resp span{font-size:.8rem}
.oh-rv-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.oh-reply{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.oh-reply label{font-weight:800}
.oh-reply textarea,.oh-report textarea,.oh-report select{width:100%;border:1px solid var(--oh-line);border-radius:12px;padding:10px 12px;font:inherit;resize:vertical;background:#fff;color:var(--oh-ink)}
.oh-reply-btns{display:flex;gap:8px;flex-wrap:wrap}
.oh-err{color:var(--oh-bad);margin:0;font-weight:600}
.oh-more-btn{margin-top:12px}
.oh-av{width:var(--s);height:var(--s);border-radius:50%;overflow:hidden;flex:none;display:grid;place-items:center;background:#E8EEF4;color:var(--oh-deep);font-weight:800}
.oh-av img{width:100%;height:100%;object-fit:cover;display:block}
.oh-av-init{background:linear-gradient(135deg,#203D4E,#10283D);color:#F1D58A}
.oh-dialog{border:0;border-radius:18px;padding:22px;max-width:min(440px,calc(100vw - 32px));width:100%;box-shadow:0 30px 60px -20px rgba(16,40,61,.5)}
.oh-dialog::backdrop{background:rgba(8,36,58,.55)}
.oh-report{display:flex;flex-direction:column;gap:12px}
.oh-report label{display:flex;flex-direction:column;gap:6px;font-weight:700}

/* ---------- responsive ---------- */
@media (max-width:1280px){
  .oh-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oh-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"chart chart" "src side" "tasks side" "props props"}
}
@media (max-width:1024px){
  .oh-hero{height:200px;padding:20px 22px 0;background-size:cover;background-position:left center}
  html[dir="ltr"] .oh-hero{background-position:right center}
  .oh-hero::after{inset:auto 0 0;height:70px;background:linear-gradient(180deg,rgba(245,247,249,0),var(--oh-bg))}
  .oh-hero::before{background:linear-gradient(270deg,rgba(8,36,58,.75),rgba(8,36,58,.35) 60%,rgba(8,36,58,.1))}
  html[dir="ltr"] .oh-hero::before{background:linear-gradient(90deg,rgba(8,36,58,.75),rgba(8,36,58,.35) 60%,rgba(8,36,58,.1))}
  .oh-view .oh-hero h1{font-size:1.7rem}
  .oh-kpis{margin-top:-70px}
  .oh-rv-layout{grid-template-columns:1fr;margin-top:-70px}
  .oh-rv-sum{position:static}
}
@media (max-width:760px){
  .oh-page,html[dir="ltr"] .oh-page{padding:0 16px 24px}
  .oh-hero{margin:0 -16px;height:184px;padding:16px 18px 0}
  .oh-view .oh-hero h1{font-size:1.38rem;gap:10px}
  .oh-hero-ic .oh-ic{width:34px;height:34px}
  .oh-hero p{font-size:.95rem}
  .oh-kpis{grid-template-columns:1fr 1fr;gap:12px;margin-top:-62px}
  .oh-kpi{flex-direction:column-reverse;align-items:flex-start;padding:14px;min-height:0;gap:6px}
  .oh-kpi h2{font-size:.92rem}
  .oh-amt{font-size:1.12rem}
  .oh-gi{width:38px;height:38px}
  .oh-grid{grid-template-columns:1fr;grid-template-areas:"side" "chart" "src" "tasks" "props";gap:14px}
  .oh-prop-grid{grid-template-columns:1fr}
  .oh-bars{height:190px}
  .oh-plot{gap:6px}
  .oh-bar em{font-size:.72rem}
  .oh-bar-lbl{font-size:.72rem}
  .oh-donut-row{justify-content:center}
}
@media (max-width:380px){ .oh-kpis{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .oh-view *{transition:none!important} }

.oh-more-head{margin-top:0;font-size:.85rem}
.oh-kpi-txt{padding-inline-end:4px}
@media (min-width:761px){ html[dir="ltr"] .oh-hero{margin:0 -32px 0 -20px} }
/* compact task rows (mockup: four rows in 287px) */
.oh-task-txt{gap:0;line-height:1.35}
.oh-task-txt b{font-size:.94rem}
.oh-task-st{font-size:.8rem}
.oh-task-todo .oh-task-st{padding:0 12px;line-height:1.5}
/* side stack heights from the mockup: status 145, membership 116, ratings fills to the bottom of row 2 */
@media (min-width:1281px){
  .oh-side{gap:16px}
  .oh-status{min-height:145px}
  .oh-member{padding:8px 20px}
  .oh-member .oh-muted{margin-top:2px}
  .oh-days{margin-top:0}
  .oh-days b{font-size:1.45rem}
  .oh-member .oh-gi{width:46px;height:46px}
  .oh-perf{flex:1}
}

/* 2026-11-07 final polish: type sizes measured on the approved 1672px mockup (desktop only) */
@media (min-width:1025px){
  .oh-kpi h2{font-size:1.12rem;font-weight:800}
  .oh-amt{font-size:clamp(1.25rem,1.72vw,1.9rem)}
  .oh-head h2,.oh-member h2{font-size:1.28rem}
  .oh-navy h2{font-size:1.3rem}
  .oh-bar em{font-size:.98rem}
  .oh-bar-lbl{font-size:.92rem}
  .oh-yaxis{font-size:.86rem}
  .oh-legend li{font-size:1rem}
  .oh-donut-c .oh-donut-amt{font-size:1.45rem}
  .oh-score{font-size:1.6rem!important}
  .oh-prop-body h3{font-size:1.04rem}
}

/* phone: compact property rows (fixed 96px photo, details beside it) and room above the bottom bar + assistant button */
@media (max-width:760px){
  .oh-page,html[dir="ltr"] .oh-page{padding-bottom:84px}
  .oh-prop-grid{gap:10px}
  .oh-prop{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:1fr auto;min-height:96px}
  .oh-prop-img{grid-row:1 / span 2;aspect-ratio:auto;height:100%;min-height:96px;border-radius:0;border-start-start-radius:13px;border-end-start-radius:13px}
  .oh-pst{font-size:.7rem;padding:1px 9px;bottom:6px;inset-inline-start:6px}
  .oh-noimg{inset:0}
  .oh-noimg small{display:none}
  .oh-prop-body{padding:8px 10px 0}
  .oh-prop-body h3{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .oh-prop-body p{font-size:.82rem;margin-top:2px}
  .oh-prop-foot{padding:2px 4px 6px 10px;font-size:.82rem}
}
/* phone: less scrolling without smaller text: the card icon moves into the corner instead of taking its own row */
@media (max-width:760px){
  .oh-kpi{padding:12px 12px 12px;gap:4px}
  .oh-kpi .oh-gi{position:absolute;top:10px;inset-inline-end:10px;width:30px;height:30px}
  .oh-kpi h2{padding-inline-end:34px;min-height:30px;display:flex;align-items:center}
  /* the balance "i" sits beside the corner icon, never under it */
  .oh-kpi .oh-parts{top:13px;inset-inline-end:46px;z-index:3}
  .oh-kpi:has(.oh-parts) h2{padding-inline-end:64px}
  .oh-grid{gap:12px}
  .oh-bars{height:170px}
  .oh-chip{white-space:nowrap;padding-inline:12px}
}
/* phone, 2026-11-07 final: about 12% shorter (padding, chart and donut heights, row heights); text sizes unchanged */
@media (max-width:760px){
  .oh-hero{height:176px;padding-top:12px}
  .oh-kpis{margin-top:-44px}
  .oh-navy{padding:12px 16px}
  .oh-navy p{margin-top:6px;line-height:1.45}
  .oh-member{padding:8px 16px}
  .oh-perf .oh-btn-white{margin-top:8px;min-height:42px}
  .oh-stars{margin-top:6px}
  .oh-src,.oh-chart,.oh-tasks,.oh-props{padding:12px 14px}
  .oh-head{margin-bottom:6px}
  .oh-bars{height:150px}
  .oh-donut{width:124px;height:124px}
  .oh-donut-c{width:90px;height:90px}
  .oh-donut-c .oh-donut-amt{font-size:1.12rem}
  .oh-task{min-height:44px;padding:4px}
  .oh-prop{min-height:84px}
  .oh-prop-img{min-height:84px}
  .oh-prop-body{padding:6px 10px 0}
  .oh-prop-body h3{line-height:1.25}
  .oh-prop-foot{padding:0 4px 4px 10px}
  .oh-kpi{padding:10px 12px}
  .oh-chip{margin-top:2px}
  .oh-score{margin-top:2px!important}
  .oh-basis{line-height:1.3}
  .oh-member-row{gap:8px}
  .oh-days{margin-top:2px}
  .oh-task{min-height:42px}
  .oh-legend{gap:8px}
  .oh-grid{gap:10px}
  .oh-kpis{gap:10px}
  .oh-bars{height:124px}
  .oh-star-lg{width:26px;height:26px}
  .oh-perf-row{gap:10px}
  .oh-note{margin-top:4px;line-height:1.35}
  .oh-donut-row{gap:12px}
  .oh-status{min-height:0}
  .oh-donut{width:128px;height:128px}
  .oh-donut-c{width:100px;height:100px}
  .oh-task{padding:2px 4px}
  .oh-perf .oh-btn-white{min-height:40px}
  .oh-prop-grid{gap:8px}
  .oh-side{gap:10px}
}
.oh-stale{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 16px;margin:-40px 0 54px;border-color:#F3B544;background:#FFF8E6}
.oh-stale p{margin:0;font-weight:700;color:#5B4205}