:root{
  --bg:#ffffff; --panel:#ffffff; --panel2:#f4f4f5; --line:#e4e4e7;
  --txt:#18181b; --muted:#71717a; --accent:#18181b; --accent2:#3f3f46;
  --ok:#18181b; --warn:#52525b; --bad:#27272a; --info:#3f3f46;
  --radius:10px; --shadow:0 4px 18px rgba(0,0,0,.08);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}
h1{font-size:22px;margin:0 0 4px}
h2{font-size:16px}
.muted{color:var(--muted)}

/* ---------- login ---------- */
.login-page{display:grid;place-items:center;min-height:100vh;background:#fafafa}
.login-card{background:var(--panel);padding:32px;border:1px solid var(--line);
  border-radius:var(--radius);width:340px;box-shadow:var(--shadow)}
.login-card h1{font-size:24px;letter-spacing:.5px}
.login-card h1 span{display:block;font-size:12px;color:var(--muted);letter-spacing:3px;text-transform:uppercase}
.login-card label{display:block;margin:14px 0 0;font-size:12px;color:var(--muted)}
.login-card input{width:100%;margin-top:6px;padding:11px 12px;background:#fff;
  border:1px solid var(--line);border-radius:8px;color:var(--txt)}
.login-card input:focus{outline:none;border-color:var(--accent)}
.login-card button{margin-top:20px;width:100%;padding:12px;border:0;border-radius:8px;
  background:var(--accent);color:#fff;font-weight:600;cursor:pointer}
.login-card button:hover{background:#000}
.alert{background:#f4f4f5;border:1px solid var(--line);color:var(--txt);
  padding:9px 12px;border-radius:8px;margin-top:14px;font-size:13px}

/* ---------- topbar ---------- */
.topbar{display:flex;align-items:center;gap:24px;padding:0 20px;height:58px;
  background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{font-weight:800;letter-spacing:.5px}
.brand span{color:var(--muted);font-weight:600;margin-left:6px;font-size:11px;
  letter-spacing:2px;text-transform:uppercase}
.phases{display:flex;gap:8px;margin-left:auto}
.phase{font-size:12px;padding:6px 12px;border-radius:20px;border:1px solid var(--line);color:var(--muted)}
.phase.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.phase.locked{opacity:.6}
.user{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:13px}
.badge{font-size:10px;text-transform:uppercase;letter-spacing:1px;padding:3px 8px;border-radius:6px;
  border:1px solid var(--line);color:var(--muted)}
.badge.admin{background:var(--accent);color:#fff;border-color:var(--accent)}
.badge.client{background:#f4f4f5;color:var(--txt)}
.logout{color:var(--muted);border:1px solid var(--line);padding:5px 10px;border-radius:7px}
.logout:hover{color:var(--txt);border-color:var(--accent)}

/* ---------- layout ---------- */
.layout{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 58px)}
.sidebar{background:#fafafa;border-right:1px solid var(--line);padding:14px 10px;
  position:sticky;top:58px;height:calc(100vh - 58px);
  display:flex;flex-direction:column}
.nav-scroll{flex:1;overflow:auto}
.logout-bottom{margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  color:var(--muted);font-size:13px;text-align:left}
.logout-bottom:hover{color:var(--txt);border-color:var(--accent);background:#fff}
.nav-label{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);
  margin:16px 10px 6px}
.nav-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;color:var(--muted)}
.nav-item:hover{background:#fff;color:var(--txt)}
.nav-item.active{background:#fff;color:var(--txt);box-shadow:inset 2px 0 0 var(--accent)}
.nav-item .ic{font-size:10px;opacity:.6}
.nav-name{flex:1;font-size:13px}
.nav-pct{font-size:11px;color:var(--muted)}
.nav-pct.partial{color:var(--txt)} .nav-pct.done{color:var(--txt);font-weight:700}
.content{padding:26px 30px;max-width:1100px}
.page-head{margin-bottom:20px}
.section-title{margin:28px 0 12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-size:12px}

/* ---------- overall ---------- */
.overall{display:flex;align-items:center;gap:30px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px}
.overall-ring{--pct:0;position:relative;width:120px;height:120px;border-radius:50%;
  display:grid;place-items:center;flex:0 0 auto;
  background:conic-gradient(var(--accent) calc(var(--pct)*1%),var(--panel2) 0)}
.overall-ring::after{content:"";position:absolute;width:92px;height:92px;border-radius:50%;
  background:var(--panel);z-index:0}
.overall-ring span{position:relative;z-index:1;font-size:24px;font-weight:800;color:var(--txt)}
.overall-stats{display:flex;gap:26px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column}
.stat b{font-size:24px} .stat span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;transition:.15s}
.card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px)}
.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.card-name{font-weight:600} .card-pct{color:var(--txt);font-weight:700}
.card-sub{font-size:12px;color:var(--muted);margin-top:8px}
.bar{height:7px;background:var(--panel2);border-radius:20px;overflow:hidden}
.bar.small{height:6px;width:120px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:20px}

/* ---------- activity / tables ---------- */
.activity{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.act-row{display:flex;gap:14px;padding:11px 16px;border-bottom:1px solid var(--line);font-size:13px}
.act-row:last-child{border-bottom:0}
.act-when{color:var(--muted);width:80px} .act-who{color:var(--txt);font-weight:600;width:140px}
.act-what{color:var(--muted)}
.grid{width:100%;border-collapse:collapse;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.grid th,.grid td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px}
.grid th{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-size:11px;background:#fafafa}
.grid tr:last-child td{border-bottom:0}
.grid .old{color:var(--muted)} .grid .new{color:var(--txt)}
.tag{font-size:11px;background:#fafafa;border:1px solid var(--line);padding:2px 8px;border-radius:6px;color:var(--muted)}
.notice{background:#fafafa;border:1px solid var(--line);color:var(--txt);
  padding:13px 16px;border-radius:10px;margin-bottom:18px;font-size:13px}
.notice.mini{padding:9px 12px;margin:8px 0 0;font-size:12px;border-left:3px solid var(--accent)}

/* collapsible Notes block */
.notes-collapse{margin-top:50px;position:relative}
.notes-collapse::before{content:"";position:absolute;left:0;right:0;top:-25px;border-top:1px solid var(--line)}
.notes-collapse > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;margin:0}
.notes-collapse > summary::-webkit-details-marker{display:none}
.notes-collapse > summary::marker{content:''}
.notes-collapse > summary::before{content:'▾';color:var(--txt);font-size:20px;line-height:1;transition:transform .15s ease}
.notes-collapse[open] > summary::before{transform:rotate(-180deg)}
.notes-collapse > summary .qlabel{flex:0 1 auto;font-weight:600}
.appfoot{padding:16px 30px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}

/* ---------- editor ---------- */
.flash{background:#f4f4f5;border:1px solid var(--line);border-left:3px solid var(--accent);
  padding:10px 14px;border-radius:8px;margin-bottom:16px;font-size:13px}
.editor.with-list{display:grid;grid-template-columns:220px 1fr;gap:22px;align-items:start}
.entlist{position:sticky;top:74px;max-height:calc(100vh - 100px);overflow:auto;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:8px}
.entfilter{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:7px;margin-bottom:6px}
.entitem{display:block;padding:8px 10px;border-radius:7px;color:var(--muted)}
.entitem:hover{background:#fafafa;color:var(--txt)}
.entitem.active{background:#fafafa;color:var(--txt);box-shadow:inset 2px 0 0 var(--accent)}
.entname{display:block;font-size:13px;font-weight:600;color:inherit}
.entsub{display:block;font-size:11px;color:var(--muted)}

.qform{display:flex;flex-direction:column;gap:14px}
.qrow{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.qhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qlabel{font-weight:600;flex:1}
.req{color:var(--bad);margin-left:3px}
.qtools{display:flex;gap:6px;margin-left:auto}
.qtool{border:1px solid var(--line);background:#fff;border-radius:7px;padding:3px 9px;
  font-size:12px;color:var(--muted);cursor:pointer}
.qtool:hover{color:var(--txt);border-color:var(--accent)}
.qhelp{font-size:12px;color:var(--muted);margin:6px 0 0}
.qinput{margin-top:10px}
.qinput input[type=text],.qinput input[type=url],.qinput input[type=number],
.qinput textarea,.qinput select{width:100%;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:var(--txt);font-family:inherit;font-size:14px}
.qinput input:focus,.qinput textarea:focus,.qinput select:focus{outline:none;border-color:var(--accent)}
.qinput textarea{resize:vertical}

.nav-label.group{color:var(--txt);font-weight:700;border-top:1px solid var(--line);padding-top:12px;margin-top:14px}

/* help button + modal */
.help-btn{margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:7px;
  padding:3px 10px;font-size:12px;color:var(--muted);cursor:pointer}
.help-btn:hover{color:var(--txt);border-color:var(--accent)}
.dl-btn{margin-left:8px;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:7px;
  padding:3px 10px;font-size:12px;text-decoration:none}
.dl-btn:hover{background:#000}
.help-modal{position:fixed;inset:0;background:rgba(15,18,24,.72);backdrop-filter:blur(3px);
  z-index:200;display:grid;place-items:center;padding:32px;animation:help-fade .14s ease}
@keyframes help-fade{from{opacity:0}to{opacity:1}}
.help-box{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  max-width:min(92vw,1100px);max-height:90vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.45)}
.help-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 18px;border-bottom:1px solid var(--line);background:#fafafa}
.help-title{font-weight:700;font-size:15px}
.help-title small{display:block;font-weight:500;font-size:11px;color:var(--muted);margin-top:2px}
.help-close{border:1px solid var(--line);background:#fff;width:30px;height:30px;border-radius:8px;
  cursor:pointer;font-size:14px;color:var(--muted);display:grid;place-items:center;flex:0 0 auto}
.help-close:hover{color:var(--txt);border-color:var(--accent)}
.help-body{padding:18px;overflow:auto;display:grid;place-items:center;background:#f4f4f5}
.help-body img{max-width:100%;max-height:calc(90vh - 130px);width:auto;height:auto;border-radius:8px;
  display:block;box-shadow:0 2px 12px rgba(0,0,0,.18);background:#fff}
.help-empty{padding:48px 32px;color:var(--muted);text-align:center}

/* gallery by categories */
.gallery .gal-cat{border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px;background:#fafafa}
.gal-cat-head{display:flex;gap:8px;margin-bottom:10px}
.gal-cat-name{flex:1;padding:9px 11px;border:1px solid var(--line);border-radius:7px;font-weight:600;background:#fff}
.gal-cat-del{width:34px;border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer;color:var(--muted)}
.gal-cat-del:hover{color:var(--bad);border-color:var(--bad)}
.dropzone{display:block;border:2px dashed var(--line);border-radius:8px;padding:18px;text-align:center;
  color:var(--muted);cursor:pointer;background:#fff;font-size:13px}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);color:var(--txt)}
.gal-images{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.gal-img{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:7px;padding:6px 8px}
.gal-thumb{font-size:16px;flex:0 0 auto}
.gal-thumb-img{width:42px;height:42px;object-fit:cover;border-radius:6px;border:1px solid var(--line);cursor:zoom-in;flex:0 0 auto}
.gal-thumb-img:hover{border-color:var(--accent)}
.gal-file{font-size:12px;color:var(--muted);width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 0 auto}
.gal-name{flex:1;padding:6px 9px;border:1px solid var(--line);border-radius:6px}
.gal-or{margin-top:10px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
.gal-or input{flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:7px}
.add-gal-cat{border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:7px;padding:9px 14px;cursor:pointer;font-size:13px}

/* fonts field — Google Font option */
.orgf{margin:11px 0 7px;font-size:13px;color:var(--muted)}
.orgf a{color:var(--txt);font-weight:600;text-decoration:underline}
.reco{display:inline-block;margin-left:6px;font-size:10px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;background:var(--accent);color:#fff;padding:2px 8px;border-radius:20px}

/* yesno radios + Other input */
.radio{display:inline-flex;align-items:center;gap:6px;margin-right:18px;font-size:14px}
.other-input{margin-top:8px}

/* form-fields table (Forms) */
.ffgrid{width:100%;border-collapse:collapse}
.ffgrid th,.ffgrid td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);font-size:13px}
.ffgrid th{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-size:11px}
.ffgrid th:nth-child(2),.ffgrid th:nth-child(3),
.ffgrid td:nth-child(2),.ffgrid td:nth-child(3){text-align:center;width:90px}
.ff-custom{font-size:10px;background:#f4f4f5;border:1px solid var(--line);border-radius:5px;
  padding:1px 6px;color:var(--muted);margin-left:6px}
.ff-del{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;margin-left:8px}
.ff-del:hover{color:var(--bad)}

/* repeatable people (Users) */
.person-row{display:grid;grid-template-columns:1fr 1fr 1fr 1.3fr auto;gap:8px;margin-bottom:8px;align-items:center}
.person-row input{padding:8px 10px;border:1px solid var(--line);border-radius:7px}
.add-person,.add-ms{border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:7px;
  padding:8px 12px;cursor:pointer;font-size:13px;margin-top:4px}
.row-del{border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:7px;width:32px;height:32px;cursor:pointer}
.row-del:hover{color:var(--bad);border-color:var(--bad)}

/* milestones (payment plan) */
.msgrid{width:100%;border-collapse:collapse;margin-bottom:8px}
.msgrid th,.msgrid td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}
.msgrid th{color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.5px}
.msgrid input{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:6px}

/* change logs — colourful feed */
.logfeed{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.logrow{display:grid;grid-template-columns:118px 120px 150px minmax(0,1.1fr) minmax(0,1.4fr);gap:14px;
  align-items:center;padding:13px 18px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:13px}
.logrow:last-child{border-bottom:0}
.logrow:hover{background:#fafafa}
.log-act{justify-self:start;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:4px 11px;border-radius:20px}
.act-update{background:#e7f0ff;color:#1d4ed8}
.act-approve{background:#e6f7ee;color:#15803d}
.act-needs_clarification{background:#fff4e0;color:#b45309}
.act-upload{background:#f1e9ff;color:#7c3aed}
.act-comment{background:#eef2f6;color:#475569}
.log-when{color:var(--muted)}
.log-who{font-weight:600}
.log-where,.log-change{overflow:hidden;text-overflow:ellipsis}
.log-where{color:var(--muted)} .log-where b{color:var(--txt)}
.log-change .new{color:#15803d;font-weight:600} .log-change .arrow{color:var(--muted);margin:0 4px}

/* entity-level approve bar */
.entity-approve{display:flex;align-items:center;gap:12px;background:#fafafa;border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 16px;margin-top:6px}
.entity-approve .ea-label{font-weight:600}
.entity-approve .ea-spacer{flex:1}

/* field-group tabs (e.g. Projects) */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.tab{background:transparent;border:0;border-bottom:2px solid transparent;padding:10px 16px;cursor:pointer;
  color:var(--muted);font-size:13px;font-weight:600}
.tab:hover{color:var(--txt)}
.tab.active{color:var(--txt);border-bottom-color:var(--accent)}
.tab .tabcount{display:inline-block;margin-left:7px;font-size:10px;background:var(--muted);color:#fff;
  border-radius:10px;padding:1px 6px;vertical-align:middle}
.tab.active .tabcount,.tab .tabcount.zero{background:var(--accent)}
.tab .tabcount.zero{background:#c7c7cc}
.tabpanel{display:none;flex-direction:column;gap:14px}
.tabpanel.active{display:flex}

/* Maps two-step category selector */
.cat-selector-row{background:#fafafa;border:1px solid var(--line);border-left:3px solid var(--accent)}
.cat-selector .chk{background:#fff}

/* status pills */
.st{font-size:11px;padding:3px 9px;border-radius:20px;border:1px solid var(--line);white-space:nowrap}
.st-not_started{color:var(--muted)}
.st-in_progress{color:var(--txt);border-color:var(--txt)}
.st-submitted{background:#18181b;color:#fff;border-color:#18181b}
.st-approved{background:#fff;color:var(--txt);border:1px solid var(--txt);box-shadow:inset 0 0 0 1px var(--txt)}
.st-needs_clarification{background:#f4f4f5;color:var(--txt);border:1px dashed var(--txt)}

/* switch / checkbox */
.switch{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.checklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;padding:5px 8px;border:1px solid var(--line);
  border-radius:7px;background:#fafafa}
.addrow{display:flex;gap:8px;margin-top:10px}
.addrow .add-landmark{flex:1}
.add-btn,.add-cat-btn,.add-lm-btn,.cmt-add button{border:1px solid var(--accent);background:var(--accent);
  color:#fff;border-radius:7px;padding:8px 12px;cursor:pointer;font-size:13px;white-space:nowrap}
.addrow input[disabled],.chk input[disabled]{opacity:.5}
button[disabled]{opacity:.4;cursor:not-allowed}

/* file + drive */
.filecur{font-size:13px;margin-bottom:8px}
.fdrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fdrow .or{color:var(--muted);font-size:12px}
.fdrow input[type=url]{flex:1;min-width:160px}

/* AI */
.ai-bar{display:flex;gap:6px;margin-top:8px}
.ai-btn{border:1px solid var(--line);background:#fff;border-radius:7px;padding:5px 10px;
  font-size:12px;color:var(--muted);cursor:pointer}
.ai-btn:hover{border-color:var(--accent);color:var(--txt)}

/* comments */
.cmt-drawer{margin-top:12px;border-top:1px dashed var(--line);padding-top:12px}
.cmt{background:#fafafa;border:1px solid var(--line);border-radius:8px;padding:8px 11px;margin-bottom:8px;font-size:13px}
.cmt-add{display:flex;gap:8px}
.cmt-add input{flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:7px}
.small{font-size:12px}

/* admin status */
.adminbar{display:flex;gap:8px;margin-top:12px;border-top:1px dashed var(--line);padding-top:12px}
.st-btn{border:1px solid var(--line);background:#fff;border-radius:7px;padding:6px 12px;cursor:pointer;font-size:12px}
.st-btn:hover{border-color:var(--accent)}
.st-btn.ok:hover{background:#18181b;color:#fff}

/* footer actions */
.formfoot{display:flex;gap:10px;justify-content:flex-end;margin-top:6px;position:sticky;bottom:0;
  background:linear-gradient(transparent,var(--bg) 40%);padding:14px 0}
.btn{border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:8px;
  padding:11px 20px;cursor:pointer;font-weight:600;font-size:14px}
.btn.ghost{background:#fff;color:var(--txt)}
.btn:hover{background:#000}.btn.ghost:hover{background:#fafafa}

/* history timeline */
.timeline{display:flex;flex-direction:column;gap:12px}
.tl-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.tl-meta{display:flex;gap:10px;align-items:center;margin-bottom:10px;font-size:13px}
.diff{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch}
.diff-col{border:1px solid var(--line);border-radius:8px;padding:10px;font-size:13px;background:#fafafa}
.diff-col.new{background:#fff}
.diff-lab{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:5px}
.diff-arrow{display:grid;place-items:center;color:var(--muted)}

@media(max-width:760px){.layout{grid-template-columns:1fr}.sidebar{position:static;height:auto}
  .editor.with-list{grid-template-columns:1fr}.entlist{position:static;max-height:none}
  .diff{grid-template-columns:1fr}.diff-arrow{transform:rotate(90deg)}}