/* ============ أبعاد · Ab'aad — styles (brand: the green compass-A logo on a white tile, over deep green) ============ */
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/IBMPlexSansArabic-Regular.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/IBMPlexSansArabic-Medium.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/IBMPlexSansArabic-Bold.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/IBMPlexMono-Medium-Latin1.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/IBMPlexMono-SemiBold-Latin1.woff2") format("woff2")}

:root{
  color-scheme: light;
  /* brand — sampled from the logo: deep green ground #173825, mark greens #2E6441 / #143622, white tile */
  --brand:#2E6441; --brand-soft:#E0ECE2; --brand-deep:#173825; --brand-deeper:#0E2618;
  --paper:#EEF2EC; --card:#FFFFFF; --card-2:#F4F7F2; --ink:#14231A; --muted:#58695D; --line:#D6DFD4;
  --blue:#1F6673; --blue-soft:#DCECEE;          /* engineer + information: blueprint teal */
  --clay:#8C5A1C; --clay-soft:#F2E5D1;          /* contractor: compass brass */
  --green:#2E6441; --green-soft:#E0ECE2;        /* owner: the brand green */
  --ok:#2F7A4B; --ok-soft:#DDEFE3;
  --warn:#946612; --warn-soft:#F5E7C9;
  --danger:#A63A2C; --danger-soft:#F5DCD6;
  --gold:#86661B; --gold-soft:#F3E7C6;
  --on-accent:#FFFFFF;
  --accent:var(--brand); --accent-soft:var(--brand-soft); --accent-ink:var(--on-accent); --accent-deep:#2E6441;
  --shadow: 0 1px 2px rgba(14,38,24,.06), 0 8px 24px -12px rgba(14,38,24,.22);
  --shadow-lg: 0 18px 44px -16px rgba(14,38,24,.34);
  --flip:1;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --brand:#86C99A; --brand-soft:#163323;
    --paper:#0C1611; --card:#132019; --card-2:#18281F; --ink:#E4EEE6; --muted:#93A89A; --line:#24372B;
    --blue:#7FC4CC; --blue-soft:#153136; --clay:#E1AE6B; --clay-soft:#33271A;
    --green:#86C99A; --green-soft:#163323; --ok:#86C99A; --ok-soft:#163323;
    --warn:#E2BC63; --warn-soft:#332911; --danger:#E58F7F; --danger-soft:#331D18;
    --gold:#E2C066; --gold-soft:#332911;
    --on-accent:#0C1611;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 26px -12px rgba(0,0,0,.55);
    --shadow-lg: 0 20px 50px -18px rgba(0,0,0,.65);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --brand:#86C99A; --brand-soft:#163323;
  --paper:#0C1611; --card:#132019; --card-2:#18281F; --ink:#E4EEE6; --muted:#93A89A; --line:#24372B;
  --blue:#7FC4CC; --blue-soft:#153136; --clay:#E1AE6B; --clay-soft:#33271A;
  --green:#86C99A; --green-soft:#163323; --ok:#86C99A; --ok-soft:#163323;
  --warn:#E2BC63; --warn-soft:#332911; --danger:#E58F7F; --danger-soft:#331D18;
  --gold:#E2C066; --gold-soft:#332911;
  --on-accent:#0C1611;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 26px -12px rgba(0,0,0,.55);
  --shadow-lg: 0 20px 50px -18px rgba(0,0,0,.65);
}
/* each role keeps its own accent, all drawn from the logo's world */
:root[data-role="eng"]{ --accent:var(--blue); --accent-soft:var(--blue-soft); --accent-deep:#1F6673; }
:root[data-role="con"]{ --accent:var(--clay); --accent-soft:var(--clay-soft); --accent-deep:#8C5A1C; }
:root[data-role="own"]{ --accent:var(--green); --accent-soft:var(--green-soft); --accent-deep:#2E6441; }
:root[dir="ltr"]{ --flip:-1; }

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.7 "IBM Plex Sans Arabic",Tahoma,"Segoe UI",system-ui,sans-serif;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4{font-family:inherit;margin:0;text-wrap:balance;line-height:1.35}
.num{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
a.link{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
::selection{background:var(--accent-soft)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

.screen{padding-inline:16px;min-height:100%}
.flipx{transform:scaleX(var(--flip))}

/* language chip */
.langsw{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);inset-inline-end:16px;z-index:5;display:flex;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:3px;backdrop-filter:blur(6px)}
.langsw button{border:0;background:none;padding:6px 12px;border-radius:999px;font-size:12px;color:#E7EDF2;opacity:.75}
.langsw button[aria-pressed="true"]{background:rgba(255,255,255,.94);color:#173825;opacity:1;font-weight:700}
.langsw.light{position:static;display:inline-flex;background:var(--card-2);border-color:var(--line)}
.langsw.light button{color:var(--ink)}
.langsw.light button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}

/* ---------- SPLASH (mirrors the logo: white tile + wordmark over deep green with drafting lines) ---------- */
#screen-splash{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:100vh;min-height:100dvh;padding-block:calc(env(safe-area-inset-top,0px) + 56px) calc(env(safe-area-inset-bottom,0px) + 28px);
  background:
    url("../icons/lines-tr.svg") right -26px top -14px / 360px auto no-repeat,
    url("../icons/lines-bl.svg") left -24px bottom -18px / 300px auto no-repeat,
    radial-gradient(110% 60% at 88% -6%, #2A5C3C 0%, transparent 62%),
    radial-gradient(90% 55% at 0% 104%, #123A24 0%, transparent 62%),
    linear-gradient(180deg,#173825 0%,#11301E 58%,#0B2415 100%);
  color:#F2F7F3;gap:18px;position:relative;overflow:hidden}
#screen-splash > *{position:relative;z-index:1}
#screen-splash > .langsw{position:absolute}
.splash-mark{width:118px;height:118px;border-radius:26px;box-shadow:0 22px 44px -16px rgba(0,0,0,.6);animation:draw-in .5s ease both}
.splash-mark img{width:100%;height:100%;display:block}
@keyframes draw-in{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
.splash-brand{display:flex;flex-direction:column;align-items:center;gap:4px;margin:2px 0 0}
.splash-brand .wordmark{height:50px;width:auto;display:block}
.splash-brand .ar{font-size:19px;font-weight:700;color:#D5E6D9;line-height:1.3}
#screen-splash p.tag{margin:0;color:#C2D5C7;font-size:14.5px;max-width:310px;line-height:1.75}
.splash-tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:330px}
.splash-tags span{font-size:11.5px;color:#DCEADF;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:5px 11px;border-radius:999px}
.btn-cta{margin-top:6px;background:#FFFFFF;color:#173825;border:0;border-radius:14px;padding:15px 42px;font-size:15px;font-weight:700;box-shadow:0 14px 34px -10px rgba(0,0,0,.55);min-width:230px}
.btn-ghost-dark{background:rgba(255,255,255,.06);color:#E6F0E8;border:1px solid rgba(255,255,255,.24);border-radius:14px;padding:13px 30px;font-size:14px;font-weight:600;min-width:230px}
.splash-install{display:inline-flex;align-items:center;gap:8px;margin-top:12px;background:none;border:0;color:#D6E7DA;font-size:13.5px;text-decoration:underline;text-underline-offset:4px}
.splash-install svg{stroke:currentColor}
.install-steps{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:10px;font-size:14px}
.splash-foot{font-size:11.5px;color:#9DB6A4;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.splash-foot a{text-decoration:underline;text-underline-offset:3px}
.splash-note{font-size:12px;color:#B5CBBB;max-width:300px;line-height:1.6;margin:0}

/* ---------- AUTH / ROLE ---------- */
#screen-auth,#screen-role{padding-top:calc(env(safe-area-inset-top,0px) + 22px);padding-bottom:40px;max-width:440px;margin:0 auto}
.auth-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.back-btn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center;flex:none}
.back-btn svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.8;transform:scaleX(var(--flip))}
#screen-auth h1,#screen-role h1{font-size:23px;margin-bottom:6px}
.lead{color:var(--muted);font-size:13.8px;margin:2px 0 0;line-height:1.7}
#screen-auth .lead,#screen-role .lead{margin-bottom:22px}
.seg{display:flex;background:var(--card-2);border-radius:12px;padding:3px;gap:2px;margin-bottom:14px;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:1;border:0;background:none;padding:9px 10px;border-radius:9px;font-size:12.8px;color:var(--muted);white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);font-weight:700;box-shadow:var(--shadow)}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.field label .opt{opacity:.75;font-size:11.5px}
.box{display:flex;align-items:center;gap:9px;border:1.5px solid var(--line);background:var(--card);border-radius:12px;padding:0 13px}
.box svg{width:17px;height:17px;stroke:var(--muted);fill:none;stroke-width:1.7;flex:none}
.box input,.box select,.box textarea{flex:1;border:0;background:none;padding:12px 0;outline:0;font-size:14.5px;min-width:0;width:100%}
.box textarea{resize:vertical;min-height:84px;line-height:1.6}
.box select{appearance:none;-webkit-appearance:none}
.box:focus-within{border-color:var(--accent)}
.box .suffix{font-size:12px;color:var(--muted);flex:none}
.box .eye{border:0;background:none;padding:6px;display:flex}
.hint{font-size:11.8px;color:var(--muted);margin-top:5px;line-height:1.55}
.grid-f{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.budget-hint{display:flex;gap:6px;align-items:flex-start;margin:-8px 0 14px}
.budget-hint svg{flex:none;margin-top:2px;color:var(--ok, currentColor)}
.btn-block{width:100%;background:var(--accent);color:var(--accent-ink);border:0;border-radius:13px;padding:14px;font-size:15px;font-weight:700;margin-top:4px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;gap:8px}
.btn-block[disabled]{opacity:.55;pointer-events:none}
.btn-block.secondary{background:var(--card);color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn-google{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:1.5px solid var(--line);background:var(--card);border-radius:13px;padding:13px;font-size:14.5px;font-weight:600;box-shadow:var(--shadow)}
.btn-google svg{width:19px;height:19px;flex:none}
.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:20px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.status-line{font-size:12.8px;margin-top:10px;font-weight:600;line-height:1.6}
.status-line.err{color:var(--danger)} .status-line.ok{color:var(--ok)}
.textbtn{background:none;border:0;color:var(--accent);font-weight:600;padding:0;font-size:13px}
.auth-note{font-size:11.8px;color:var(--muted);text-align:center;margin-top:16px;line-height:1.7}

.role-card{display:flex;align-items:center;gap:15px;background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:16px;margin-bottom:12px;box-shadow:var(--shadow);text-align:start;width:100%}
.role-card:active{transform:scale(.985)}
.role-card .ic{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;flex:none}
.role-card .ic svg{width:27px;height:27px;stroke:currentColor;fill:none;stroke-width:1.6}
.role-card .t{flex:1;min-width:0}
.role-card .t b{display:block;font-size:15.5px;margin-bottom:3px}
.role-card .t span{display:block;color:var(--muted);font-size:12.5px;line-height:1.6}
.role-card .go{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.8;flex:none;transform:scaleX(var(--flip))}
.role-eng .ic{background:var(--blue-soft);color:var(--blue)}
.role-con .ic{background:var(--clay-soft);color:var(--clay)}
.role-own .ic{background:var(--green-soft);color:var(--green)}

/* ---------- APP SHELL ---------- */
#screen-app{padding-inline:0;padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
.shell{max-width:680px;margin:0 auto}
.topbar{position:sticky;top:0;z-index:20;background:var(--paper);padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 10px;border-bottom:1px solid var(--line)}
.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.mark{width:34px;height:34px;flex:none;border-radius:9px;display:block;box-shadow:0 0 0 1px rgba(14,38,24,.1),0 2px 6px -2px rgba(14,38,24,.25)}
.brand .t{min-width:0}
.brand b{font-size:16.5px;display:block;line-height:1.2}
.role-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--accent);font-weight:600;margin-top:1px;white-space:nowrap}
.role-tag i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.demo-tag{font-size:10.5px;font-weight:700;color:var(--gold);background:var(--gold-soft);border-radius:999px;padding:1px 8px;margin-inline-start:4px}
.topbar-r{display:flex;align-items:center;gap:6px}
.iconbtn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center;flex:none;position:relative}
.iconbtn svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.7}
.iconbtn .dot{position:absolute;top:6px;inset-inline-end:6px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:2px solid var(--card)}
.mini-lang{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;height:36px}
.mini-lang button{padding:0 10px;background:var(--card);border:0;font-size:11.5px;color:var(--muted)}
.mini-lang button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);font-weight:700}

.view{padding:16px 16px 0}
.sec-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:26px 0 12px}
.sec-title:first-child{margin-top:0}
.sec-title h2{font-size:16.5px;font-weight:700}
.sec-title .more{font-size:13px;color:var(--accent);background:none;border:0;padding:0;font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:4px}
.sec-title .more svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.subhead{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.subhead h2{font-size:17px;flex:1;min-width:0}
.ai-badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;background:var(--gold-soft);color:var(--gold);padding:2px 8px;border-radius:999px;font-weight:700;vertical-align:middle;white-space:nowrap}
.ai-badge svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.2}
.sample-badge{display:inline-flex;font-size:10.5px;background:var(--card-2);color:var(--muted);border:1px dashed var(--line);padding:1px 8px;border-radius:999px;font-weight:700;white-space:nowrap;vertical-align:middle}

.hero{border-radius:20px;padding:20px;margin-bottom:6px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow-lg);
  background:
    url("../icons/lines-tr.svg") right -20px top -12px / 250px auto no-repeat,
    radial-gradient(110% 130% at 100% 0%, var(--hero-a) 0%, transparent 60%),
    linear-gradient(160deg,#1C4A2E 0%,#133421 58%,#0C2517 100%)}
.hero > *{position:relative;z-index:1}
.hero .k{font-size:12px;opacity:.85}
.hero h3{font-size:19px;margin:4px 0 14px;max-width:92%}
.hero .hstats{display:flex;gap:22px;flex-wrap:wrap}
.hero .hstats div b{display:block;font-size:19px}
.hero .hstats div span{font-size:11px;opacity:.82}
.hero .hbtn{margin-top:16px;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.96);color:#173825;border:0;border-radius:11px;padding:10px 16px;font-size:13px;font-weight:700}
.hero .hbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.action{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow);text-align:start;display:flex;flex-direction:column;gap:8px;min-height:104px;position:relative}
.action .ic{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.action .ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.action b{font-size:13.5px;font-weight:600;line-height:1.4}
.action span{font-size:11.5px;color:var(--muted);line-height:1.45}
.action .chip{position:absolute;top:10px;inset-inline-end:10px;background:var(--gold-soft);color:var(--gold);border-radius:999px;padding:2px 8px;font-size:10px;font-weight:700}

.rows{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.row{display:flex;align-items:center;gap:11px;padding:13px 14px;border-top:1px solid var(--line);width:100%;background:none;border-inline:0;border-bottom:0;text-align:start}
.row:first-child{border-top:0}
button.row:active,.row.tap:active{background:var(--card-2)}
.row .ic{width:36px;height:36px;border-radius:11px;background:var(--card-2);display:flex;align-items:center;justify-content:center;flex:none;color:var(--ink)}
.row .ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7}
.row .body{flex:1;min-width:0}
.row .body b{display:block;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.row .body span{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;overflow-wrap:anywhere}
.row .chev{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:1.7;flex:none;transform:scaleX(var(--flip))}
.row.danger .body b{color:var(--danger)}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:3px 9px;border-radius:999px;font-weight:600;white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.danger{background:var(--danger-soft);color:var(--danger)} .pill.accent{background:var(--accent-soft);color:var(--accent)}
.pill.clay{background:var(--clay-soft);color:var(--clay)} .pill.gold{background:var(--gold-soft);color:var(--gold)}
.pill.muted{background:var(--card-2);color:var(--muted)}

.banner{display:flex;gap:11px;background:var(--warn-soft);border-radius:16px;padding:13px 14px;margin-bottom:14px}
.banner svg{width:19px;height:19px;stroke:var(--warn);fill:none;stroke-width:1.8;flex:none;margin-top:2px}
.banner b{display:block;font-size:13.5px;color:var(--warn);margin-bottom:2px}
.banner p{margin:0;font-size:12.6px;color:var(--ink);line-height:1.65;opacity:.88}
.banner.gold{background:var(--gold-soft)} .banner.gold svg{stroke:var(--gold)} .banner.gold b{color:var(--gold)}
.banner.info{background:var(--blue-soft)} .banner.info svg{stroke:var(--blue)} .banner.info b{color:var(--blue)}
.banner.ok{background:var(--ok-soft)} .banner.ok svg{stroke:var(--ok)} .banner.ok b{color:var(--ok)}
.banner.danger{background:var(--danger-soft)} .banner.danger svg{stroke:var(--danger)} .banner.danger b{color:var(--danger)}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow);margin-bottom:10px}
.card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.card h3{font-size:15px;font-weight:700;overflow-wrap:anywhere}
.card p{margin:6px 0 0;font-size:12.8px;color:var(--muted);line-height:1.65;overflow-wrap:anywhere}
.card .meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:12px;color:var(--muted)}
.card .meta span{display:inline-flex;align-items:center;gap:5px}
.card .meta svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8}
.card .actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.card.tap{cursor:pointer}
.card.win{border-color:var(--ok);box-shadow:0 0 0 3px var(--ok-soft),var(--shadow)}
.card.dim{opacity:.62}
.btn{border:1px solid var(--line);background:var(--card-2);border-radius:10px;padding:9px 14px;font-size:12.8px;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.gold{background:var(--gold);color:#241C05;border-color:var(--gold)}
.btn.danger{color:var(--danger);background:var(--danger-soft);border-color:transparent}
.btn.ghost{background:transparent}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9}
.btn[disabled]{opacity:.5;pointer-events:none}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.fact{background:var(--card-2);border-radius:12px;padding:10px}
.fact b{display:block;font-size:15px}
.fact span{display:block;font-size:11px;color:var(--muted);margin-top:2px;line-height:1.35}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 10px;box-shadow:var(--shadow)}
.stat b{display:block;font-size:18px}
.stat span{display:block;color:var(--muted);font-size:11.5px;margin-top:3px;line-height:1.4}

/* bid comparison */
.cmp{margin:4px 0 12px}
.cmp-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:12.3px}
.cmp-row .n{width:34%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-row .bar{flex:1;height:10px;background:var(--card-2);border-radius:6px;overflow:hidden}
.cmp-row .bar i{display:block;height:100%;background:var(--accent);border-radius:6px}
.cmp-row.low .bar i{background:var(--ok)}
.cmp-row .v{width:84px;text-align:end;flex:none}

/* sum card */
.sum-card{background:var(--ink);color:var(--paper);border-radius:18px;padding:18px;margin-bottom:14px}
:root[data-theme="dark"] .sum-card{background:var(--card-2);color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sum-card{background:var(--card-2);color:var(--ink)}}
.sum-card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.sum-card .top b{font-size:14px;font-weight:600}
.sum-card .top span{font-size:12px;opacity:.75}
.confbar{display:flex;height:9px;border-radius:5px;overflow:hidden;margin:14px 0 8px;background:rgba(120,120,120,.22)}
.confbar i{display:block;height:100%}
.confbar .h{background:#4FAE85}.confbar .m{background:#D9A94B}.confbar .r{background:#DE7B69}
.conf-legend{display:flex;gap:14px;font-size:11.5px;opacity:.88;flex-wrap:wrap}
.conf-legend span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:5px;vertical-align:1px}
.conf-legend .h::before{background:#4FAE85}.conf-legend .m::before{background:#D9A94B}.conf-legend .r::before{background:#DE7B69}

.cat{background:var(--card);border:1px solid var(--line);border-radius:16px;margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow)}
.cat-h{display:flex;align-items:center;gap:11px;padding:13px 14px;cursor:pointer;width:100%;background:none;border:0;text-align:start}
.cat-h .ic{width:32px;height:32px;border-radius:9px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.cat-h .ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.cat-h .t{flex:1;min-width:0}
.cat-h .t b{display:block;font-size:13.8px;font-weight:600}
.cat-h .t span{font-size:12px;color:var(--muted)}
.cat-h .amt{text-align:end}
.cat-h .amt b{display:block;font-size:13.5px}
.cat-h .amt span{font-size:11px;color:var(--muted)}
.cat-h .car{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.8;transition:transform .18s;flex:none}
.cat.open .car{transform:rotate(180deg)}
.cat-items{border-top:1px solid var(--line)}
.item{padding:11px 14px;border-top:1px solid var(--line)}
.item:first-child{border-top:0}
.item .it{display:flex;justify-content:space-between;gap:10px;font-size:13.3px;margin-bottom:5px}
.item .qty{font-size:12.3px;color:var(--muted)}

/* table */
.tbl-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:14px}
table.tbl{width:100%;border-collapse:collapse;font-size:12.8px}
.tbl th,.tbl td{padding:9px 12px;border-top:1px solid var(--line);text-align:start;white-space:nowrap}
.tbl th{background:var(--card-2);font-weight:600;color:var(--muted);font-size:11.8px;border-top:0}

/* people */
.person{display:flex;gap:12px;padding:14px;border-top:1px solid var(--line);align-items:flex-start}
.person:first-child{border-top:0}
.person .av{width:46px;height:46px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700}
.person .b{flex:1;min-width:0}
.person .b .r1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.person .b b{font-size:14px;overflow-wrap:anywhere}
.person .b .role{font-size:12px;color:var(--muted);margin-top:2px}
.person .tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.person .tags span{font-size:10.8px;background:var(--card-2);border:1px solid var(--line);padding:2px 8px;border-radius:999px;color:var(--muted)}
.person .acts{display:flex;flex-direction:column;gap:6px;flex:none}
.circle-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--card-2);display:flex;align-items:center;justify-content:center}
.circle-btn svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.7}
.circle-btn.wa{background:var(--ok-soft);border-color:transparent}
.circle-btn.wa svg{stroke:var(--ok)}

/* timeline / stages */
.stage{display:flex;align-items:center;gap:12px;padding:11px 14px;border-top:1px solid var(--line);width:100%;background:none;border-inline:0;border-bottom:0;text-align:start}
.stage:first-child{border-top:0}
.stage .box-ck{width:22px;height:22px;border-radius:7px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none;background:var(--card)}
.stage .box-ck svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:3;opacity:0}
.stage[aria-checked="true"] .box-ck{background:var(--ok);border-color:var(--ok)}
.stage[aria-checked="true"] .box-ck svg{opacity:1}
.stage[aria-checked="true"] b{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.stage b{font-size:13.6px;font-weight:600}
.progress{height:8px;border-radius:5px;background:var(--card-2);overflow:hidden;margin:8px 0 2px}
.progress i{display:block;height:100%;background:var(--ok);transition:width .3s}

/* prices */
.price-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line)}
.price-row:first-child{border-top:0}
.price-row .ic{width:34px;height:34px;border-radius:10px;background:var(--card-2);display:flex;align-items:center;justify-content:center;flex:none}
.price-row .ic svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.7}
.price-row .t{flex:1;min-width:0}
.price-row .t b{display:block;font-size:13.6px;font-weight:600}
.price-row .t .src{font-size:11.8px;color:var(--muted);display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:2px}
.price-row .t .src.v{color:var(--ok)}
.price-row .t .src .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.price-row .p{text-align:end;flex:none}
.price-row .p b{display:block;font-size:14.5px}
.price-row .p span{font-size:11px;color:var(--muted)}
.chg{font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:6px;margin-top:3px;display:inline-block}
.chg.up{color:var(--danger);background:var(--danger-soft)} .chg.down{color:var(--ok);background:var(--ok-soft)}
.edit-mini{border:1px solid var(--line);background:var(--card-2);border-radius:8px;padding:4px 8px;font-size:11px;margin-top:4px}

/* report */
.rep-line{display:flex;justify-content:space-between;gap:10px;padding:8px 0;font-size:13.3px;border-top:1px solid var(--line)}
.rep-line:first-child{border-top:0}
.rep-total{display:flex;justify-content:space-between;padding:10px 0 2px;font-weight:700;font-size:15.5px;border-top:1.5px solid var(--ink)}
.slider-row{display:flex;align-items:center;gap:10px;margin:10px 0;font-size:12.8px}
.slider-row input[type=range]{flex:1;accent-color:var(--accent)}
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;font-size:13px;cursor:pointer}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .tr{width:40px;height:24px;border-radius:12px;background:var(--line);position:relative;transition:background .2s;flex:none}
.switch .tr::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked + .tr{background:var(--accent)}
.switch input:checked + .tr::after{transform:translateX(calc(16px * var(--flip) * -1))}
:root[dir="ltr"] .switch input:checked + .tr::after{transform:translateX(16px)}
.switch input:focus-visible + .tr{outline:2px solid var(--accent);outline-offset:2px}

/* profile */
.profile-head{display:flex;align-items:center;gap:14px;padding:8px 2px 20px}
.profile-head .av{width:62px;height:62px;border-radius:18px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;flex:none}
.profile-head b{display:block;font-size:16.5px;overflow-wrap:anywhere}
.profile-head .sub{font-size:12.3px;color:var(--muted);overflow-wrap:anywhere}
.role-badge{display:inline-flex;align-items:center;gap:6px;margin-top:5px;font-size:12px;background:var(--accent-soft);color:var(--accent);padding:3px 10px;border-radius:999px;font-weight:600}
.role-badge svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9}
.groupgap{margin-top:14px}
.foot-note{text-align:center;font-size:11.5px;color:var(--muted);margin:22px 0 8px;line-height:1.7}

/* tabs */
nav.tabs{position:fixed;inset-inline:0;bottom:0;z-index:30;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs-row{max-width:680px;margin:0 auto;display:flex}
.tabs-row button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;padding:9px 2px 8px;color:var(--muted);font-size:10.5px;position:relative}
.tabs-row button svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7}
.tabs-row button[aria-selected="true"]{color:var(--accent)}
.tabs-row button[aria-selected="true"] svg{stroke-width:2.1}
.tabs-row .tdot{position:absolute;top:6px;inset-inline-end:calc(50% - 16px);width:7px;height:7px;border-radius:50%;background:var(--danger)}

/* AI FAB + chat */
.ai-fab{position:fixed;bottom:calc(78px + env(safe-area-inset-bottom,0px));inset-inline-end:16px;z-index:32;width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--accent-deep),#0E2618);color:#fff;border:0;box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center}
.ai-fab svg{width:23px;height:23px;stroke:#fff;fill:none;stroke-width:1.8}
.chat-list{display:flex;flex-direction:column;gap:10px;padding:6px 2px 14px;max-height:52vh;overflow-y:auto}
.msg{max-width:84%;padding:10px 13px;border-radius:14px;font-size:13.6px;line-height:1.65;overflow-wrap:anywhere}
.msg.me{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-end-end-radius:4px}
.msg.them{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-end-start-radius:4px}
.msg .who{display:block;font-size:11px;opacity:.75;margin-bottom:2px}
.msg .when{display:block;font-size:10.5px;opacity:.65;margin-top:3px}
.msg.ai{align-self:stretch;max-width:100%;background:var(--gold-soft);color:var(--ink);border:1px dashed var(--gold)}
.msg.ai ul{margin:6px 0;padding-inline-start:18px}
.chat-input{display:flex;gap:8px;align-items:flex-end;border-top:1px solid var(--line);padding-top:12px}
.chat-input textarea{flex:1;border:1.5px solid var(--line);background:var(--card);border-radius:12px;padding:10px 13px;outline:0;resize:none;max-height:120px;min-height:44px;line-height:1.5}
.chat-input textarea:focus{border-color:var(--accent)}
.chat-send{width:44px;height:44px;border-radius:11px;background:var(--accent);color:var(--accent-ink);border:0;display:flex;align-items:center;justify-content:center;flex:none}
.chat-send svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;transform:scaleX(var(--flip))}
.chat-send[disabled]{opacity:.5}
.thinking{display:flex;gap:4px;padding:6px 0}
.thinking i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1.1s infinite ease-in-out}
.thinking i:nth-child(2){animation-delay:.15s}.thinking i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.suggest{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 10px}
.suggest button{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 12px;font-size:12px}

/* upload */
.upload-zone{border:1.5px dashed var(--line);border-radius:16px;padding:22px 16px;text-align:center;background:var(--card);width:100%;display:block}
.upload-zone svg{width:30px;height:30px;stroke:var(--accent);fill:none;stroke-width:1.6;margin-bottom:8px}
.upload-zone b{display:block;font-size:14px;margin-bottom:3px}
.upload-zone span{font-size:12px;color:var(--muted)}
.upload-zone.drag{border-color:var(--accent);background:var(--accent-soft)}
.sample-btn{width:100%;margin-top:10px;justify-content:flex-start;text-align:start;padding:10px 14px;gap:10px;background:transparent}
.sample-btn svg{flex:none;color:var(--accent)}
.sample-btn span{display:flex;flex-direction:column;gap:1px;min-width:0}
.sample-btn small{font-weight:400;font-size:11.5px;color:var(--muted);line-height:1.5}
.sample-btn[hidden]{display:none}
.progress-track{height:7px;border-radius:4px;background:var(--card-2);overflow:hidden;margin-top:14px}
.progress-fill{height:100%;background:var(--accent);width:6%;transition:width .3s}

/* flags list */
.flag{display:flex;gap:10px;padding:11px 14px;border-top:1px solid var(--line);font-size:12.8px;line-height:1.6}
.flag:first-child{border-top:0}
.flag .fi{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none}
.flag .fi svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.flag.danger .fi{background:var(--danger-soft);color:var(--danger)}
.flag.warn .fi{background:var(--warn-soft);color:var(--warn)}
.flag.info .fi{background:var(--blue-soft);color:var(--blue)}
.flag b{display:block;font-size:13px}

/* 3D — stone-white walls, dark green glass and a sand plot, on the brand's deep green stage */
.stage3d{background:url("../icons/lines-tr.svg") right -30px top -16px / 260px auto no-repeat,radial-gradient(120% 100% at 50% -6%, #2A5C3C, #0B1D12 72%);border-radius:20px;padding:22px 10px 16px;position:relative;overflow:hidden;min-height:310px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cube-wrap{perspective:1100px;width:280px;height:270px;touch-action:none;cursor:grab;max-width:100%}
.cube-wrap:active{cursor:grabbing}
.cube{width:280px;height:270px;position:relative;transform-style:preserve-3d}
.face{position:absolute;background:linear-gradient(180deg,#F3F0E8,#DCD6C8);border:1px solid rgba(20,35,26,.10);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face.win::before{content:"";position:absolute;inset:18% 9% 16%;background-image:repeating-linear-gradient(90deg, #2B4C3C 0 9%, transparent 9% 22%);opacity:.78}
.face.side{background:linear-gradient(180deg,#E5E0D4,#C9C2B2)}
.face.slab{background:linear-gradient(180deg,#D6CFBF,#B9B19F);border-color:rgba(0,0,0,.08)}
.face.parapet{background:linear-gradient(180deg,#ECE7DB,#D2CBBB)}
.face.roofcap{background:linear-gradient(160deg,#DCD6C8,#BFB8A7)}
.face.ground{background:repeating-linear-gradient(0deg,rgba(90,70,30,.10) 0 1px,transparent 1px 20px),repeating-linear-gradient(90deg,rgba(90,70,30,.10) 0 1px,transparent 1px 20px),linear-gradient(135deg,#D8C69E,#C2AE84)}
.face.wallring{background:linear-gradient(180deg,#E8DEC8,#CBBE9F);opacity:.95;backface-visibility:visible;-webkit-backface-visibility:visible}
.face.tree{background:radial-gradient(circle at 40% 35%,#6FA262,#2F5A30);border-radius:50%;border:none}
.face.car{background:linear-gradient(90deg,#8C5A1C,#5A3A12);border-radius:3px;border:none}
.cam-row{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.cam-row button{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#E6F0E8;border-radius:999px;padding:6px 14px;font-size:12px}
.cam-row button[aria-pressed="true"]{background:rgba(255,255,255,.94);color:#173825;font-weight:700;border-color:transparent}
.d3-legend{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px;font-size:11.5px;color:#C9DBCD}
.d3-legend b{color:#fff}
.hint3d{text-align:center;color:var(--muted);font-size:11.8px;margin-top:10px;line-height:1.6}

/* sheet */
.sheet-bg{position:fixed;inset:0;background:rgba(8,12,10,.5);z-index:40;display:flex;align-items:flex-end;padding-top:40px;animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{background:var(--paper);width:100%;max-width:680px;margin:0 auto;border-radius:22px 22px 0 0;max-height:92vh;max-height:92dvh;overflow-y:auto;padding:16px 16px calc(24px + env(safe-area-inset-bottom,0px));box-shadow:0 -14px 46px rgba(0,0,0,.3);position:relative;animation:up .22s ease}
@keyframes up{from{transform:translateY(24px)}to{transform:none}}
.sheet-handle{width:38px;height:4px;background:var(--line);border-radius:3px;margin:0 auto 14px}
.sheet h3{font-size:17px;margin-bottom:4px;padding-inline-end:40px}
.sheet .close{position:absolute;inset-inline-end:14px;top:14px;width:34px;height:34px;border-radius:9px;background:var(--card-2);border:0;display:flex;align-items:center;justify-content:center}
.sheet .close svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.8}

/* report / block / terms */
.chat-head{display:flex;align-items:center;gap:8px;padding-inline-end:44px;margin-bottom:4px}
.chat-head h3{flex:1;min-width:0;margin:0;padding-inline-end:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn.icon-only{padding:8px 10px;gap:0;color:var(--muted)}
.circle-btn.more{color:var(--muted)}
.terms-check{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 0 14px;font-size:13px;line-height:1.75;cursor:pointer}
.terms-check input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--accent)}
.terms-check.err{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
.radio-row{cursor:pointer}
.radio-row input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--accent)}
.radio-row:has(input:checked){background:var(--accent-soft)}
.report-target{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.report-target b{font-size:13.5px;overflow-wrap:anywhere}

/* toast */
#toastHost{position:fixed;inset-inline:0;bottom:calc(150px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding-inline:16px}
.toast{background:#0E2618;color:#F2F7F3;border-radius:12px;padding:10px 16px;font-size:13px;box-shadow:var(--shadow-lg);max-width:420px;animation:up .2s ease;pointer-events:auto}
.toast.err{background:#5C1F17}
.toast.ok{background:#1F4D30}

.empty{text-align:center;padding:34px 20px;color:var(--muted)}
.empty svg{width:40px;height:40px;stroke:var(--muted);fill:none;stroke-width:1.4;margin-bottom:10px}
.empty b{display:block;color:var(--ink);margin-bottom:4px;font-size:14px}
.empty p{margin:0 auto;font-size:13px;line-height:1.6;max-width:320px}
.empty .actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}

.skel{height:14px;border-radius:7px;background:linear-gradient(90deg,var(--card-2),var(--line),var(--card-2));background-size:200% 100%;animation:sk 1.2s infinite linear;margin:8px 0}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
.loading-card{padding:16px}

.kv{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:13px}
.kv:first-child{border-top:0}
.kv span:first-child{color:var(--muted)}

@media (max-width:360px){
  .grid2{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
  .grid-f{grid-template-columns:1fr}
}