:root{
  --slate:#22303c;
  --slate-2:#2d3f4f;
  --steel:#eef2f5;
  --paper:#f7f9fb;
  --amber:#e08a2b;
  --amber-deep:#bd6f1c;
  --ink:#1a232c;
  --ink-soft:#586674;
  --line:#dde5eb;
  --good:#2f7d52;
  --good-soft:#e3f2ea;
  --shadow:0 26px 60px -40px rgba(34,48,60,.5);
  --shadow-sm:0 14px 32px -24px rgba(34,48,60,.5);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}

/* login gate */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--slate);position:relative;overflow:hidden}
.gate::before{content:"";position:absolute;inset:0;background-image:url(img/build-hero.jpg);background-size:cover;background-position:center;opacity:.22}
.gate::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(34,48,60,.92),rgba(34,48,60,.72))}
.gate-card{position:relative;z-index:2;background:#fff;border-radius:16px;box-shadow:var(--shadow);width:100%;max-width:420px;padding:40px 38px}
.gate-brand{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.gate-brand .mark{width:38px;height:38px}
.gate-brand b{font-size:1.4rem;letter-spacing:-.02em}
.gate-brand small{display:block;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--amber-deep);font-weight:700}
.gate h1{font-size:1.5rem;margin:18px 0 6px;letter-spacing:-.02em}
.gate p{color:var(--ink-soft);font-size:.92rem;margin-bottom:22px}
.role-pick{display:grid;gap:12px}
.role-btn{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--paper);text-align:left;transition:.2s;width:100%}
.role-btn:hover{border-color:var(--amber);background:#fff;box-shadow:var(--shadow-sm)}
.role-btn .ic{width:42px;height:42px;border-radius:10px;background:var(--slate);display:flex;align-items:center;justify-content:center;flex:0 0 42px}
.role-btn.builder .ic{background:var(--amber)}
.role-btn .t b{display:block;font-size:1rem}
.role-btn .t span{font-size:.82rem;color:var(--ink-soft)}
.gate-note{margin-top:20px;font-size:.78rem;color:var(--ink-soft);text-align:center}

/* app shell */
.app{display:none;min-height:100vh}
.app.on{display:block}
.topbar{background:var(--slate);color:#fff;position:sticky;top:0;z-index:40}
.topbar-in{max-width:1180px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:700}
.topbar .brand .mark{width:30px;height:30px}
.who{display:flex;align-items:center;gap:14px;font-size:.86rem}
.who .badge{background:rgba(255,255,255,.12);padding:6px 12px;border-radius:30px;font-size:.76rem;letter-spacing:.04em}
.who .badge.builder{background:var(--amber);color:#241503}
.who button{background:none;border:1px solid rgba(255,255,255,.24);color:#fff;padding:7px 14px;border-radius:7px;font-size:.8rem;transition:.2s}
.who button:hover{background:rgba(255,255,255,.1)}

.shell{max-width:1180px;margin:0 auto;padding:28px 24px 60px;display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start}

.card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);overflow:hidden}
.card .hd{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.card .hd h2{font-size:1.1rem;letter-spacing:-.01em}
.card .hd .sub{font-size:.8rem;color:var(--ink-soft)}
.card .bd{padding:24px}

/* project header */
.proj{background:linear-gradient(135deg,var(--slate),var(--slate-2));color:#fff;border-radius:14px;padding:26px 28px;margin-bottom:24px;position:relative;overflow:hidden}
.proj::before{content:"";position:absolute;inset:0;background-image:url(tex/concrete-wall.png);opacity:.12}
.proj-in{position:relative;z-index:2}
.proj h1{font-size:1.6rem;letter-spacing:-.02em}
.proj .addr{color:rgba(255,255,255,.7);font-size:.92rem;margin-top:2px}
.progress{margin-top:20px}
.progress-top{display:flex;justify-content:space-between;font-size:.82rem;margin-bottom:8px}
.progress-top b{font-size:1.1rem}
.progress .track{height:10px;background:rgba(255,255,255,.15);border-radius:6px;overflow:hidden}
.progress .fill{height:100%;background:linear-gradient(90deg,var(--amber),#f0a94e);border-radius:6px;transition:width .8s ease}

/* timeline */
.timeline{list-style:none}
.tl{display:grid;grid-template-columns:34px 1fr;gap:16px;padding-bottom:22px;position:relative}
.tl::before{content:"";position:absolute;left:16px;top:30px;bottom:-6px;width:2px;background:var(--line)}
.tl:last-child::before{display:none}
.tl .dot{width:34px;height:34px;border-radius:50%;background:var(--steel);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;z-index:2}
.tl.done .dot{background:var(--good-soft);border-color:var(--good)}
.tl.active .dot{background:var(--amber);border-color:var(--amber-deep)}
.tl .tl-b h4{font-size:1rem}
.tl .tl-b .when{font-size:.78rem;color:var(--ink-soft)}
.tl .tl-b p{font-size:.88rem;color:var(--ink-soft);margin-top:3px}
.tl-photos{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.tl-photos img{width:88px;height:64px;object-fit:cover;border-radius:7px;border:1px solid var(--line)}
.tag{display:inline-block;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:3px 9px;border-radius:20px;margin-left:8px;vertical-align:middle}
.tag.done{background:var(--good-soft);color:var(--good)}
.tag.active{background:#fbecd6;color:var(--amber-deep)}
.tag.up{background:var(--steel);color:var(--ink-soft)}

/* messages */
.msgs{display:flex;flex-direction:column;gap:14px;max-height:340px;overflow-y:auto;padding-right:4px}
.msg{max-width:82%;padding:11px 15px;border-radius:12px;font-size:.9rem;position:relative}
.msg .m-who{font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;font-weight:700;opacity:.7;margin-bottom:3px}
.msg .m-when{font-size:.68rem;color:var(--ink-soft);margin-top:5px}
.msg.them{background:var(--steel);align-self:flex-start;border-bottom-left-radius:3px}
.msg.me{background:var(--slate);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
.msg.me .m-when{color:rgba(255,255,255,.6)}
.msg-form{display:flex;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.msg-form input{flex:1;padding:11px 14px;border:1px solid var(--line);border-radius:9px;font-size:.92rem}
.msg-form input:focus{outline:none;border-color:var(--amber)}
.msg-form button{background:var(--amber);color:#241503;border:none;padding:11px 18px;border-radius:9px;font-weight:600}
.msg-form button:hover{background:var(--amber-deep);color:#fff}

/* documents */
.doc{display:flex;align-items:center;gap:13px;padding:13px 0;border-top:1px solid var(--line)}
.doc:first-child{border-top:none}
.doc .di{width:38px;height:38px;border-radius:8px;background:var(--steel);display:flex;align-items:center;justify-content:center;flex:0 0 38px}
.doc .dn{flex:1;min-width:0}
.doc .dn b{display:block;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc .dn span{font-size:.75rem;color:var(--ink-soft)}
.doc a{color:var(--amber-deep);font-size:.8rem;font-weight:600}
.doc a:hover{text-decoration:underline}
.upload{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.upload label{display:block;padding:14px;border:1.5px dashed var(--line);border-radius:10px;text-align:center;color:var(--ink-soft);font-size:.86rem;cursor:pointer;transition:.2s}
.upload label:hover{border-color:var(--amber);color:var(--amber-deep)}
.upload input{display:none}

.side{display:grid;gap:24px}

@media(max-width:900px){
  .shell{grid-template-columns:1fr}
}
@media(max-width:520px){
  .gate-card{padding:30px 24px}
  .who .badge{display:none}
  .shell{padding:18px 16px 40px}
}