/* Einstein look-alike shell — reverse-engineered from production screenshots
   (features/platform/central-address-book/media). Fluent UI v8 "Fabric" flavour.
   Orange #db8b0a = command/pane header bars; list rows 43px; Segoe UI 14px. */
:root{
  --ein-orange:#db8b0a; --ein-orange-dark:#b9760a; --ein-orange-light:#fdf2e0; --ein-orange-text:#a35d00;
  --ein-yellow:#f7d166;
  --ein-ink:#323130; --ein-ink-2:#605e5c; --ein-ink-3:#8a8886; --ein-ink-4:#a19f9d;
  --ein-line:#edebe9; --ein-line-2:#e1dfdd; --ein-line-3:#c8c6c4;
  --ein-bg:#ffffff; --ein-bg-2:#faf9f8; --ein-bg-3:#f3f2f1; --ein-selected:#e1dfdd; --ein-hover:#f3f2f1;
  --ein-blue:#0078d4; --ein-green:#107c10; --ein-green-bg:#dff6dd; --ein-red:#a4262c; --ein-red-bg:#fde7e9;
  --ein-amber:#8a5a00; --ein-amber-bg:#fff4ce; --ein-grey-bg:#f3f2f1; --ein-blue-bg:#deecf9;
  --ein-shadow:0 1.6px 3.6px rgba(0,0,0,.132),0 .3px .9px rgba(0,0,0,.108);
  --ein-font:"Segoe UI","Segoe UI Web (West European)",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:var(--ein-font);font-size:14px;color:var(--ein-ink);background:var(--ein-bg)}
a{color:var(--ein-blue);text-decoration:none}
button{font-family:inherit}
.app{display:flex;flex-direction:column;height:100vh;min-width:1280px;overflow:hidden}

/* ---- top bar ---- */
.topbar{height:40px;background:var(--ein-orange);display:flex;align-items:center;color:#fff;flex-shrink:0}
.topbar .logo{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.08)}
.topbar .logo svg{width:22px;height:22px}
.topbar .tenant{font-size:18px;font-weight:600;margin-left:14px;letter-spacing:.2px}
.topbar .spacer{flex:1}
.topbar .icons{display:flex;gap:14px;padding-right:12px}
.topbar .icons span{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;opacity:.95}
.topbar .icons svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.6}

/* ---- project strip ---- */
.projstrip{height:40px;background:#fcfcfc;border-bottom:1px solid var(--ein-line);display:flex;align-items:center;padding-left:12px;gap:22px;flex-shrink:0}
.projstrip .pin{width:18px;height:18px;color:var(--ein-orange)}
.projstrip .proj{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ein-ink);cursor:pointer;padding:4px 2px;border-bottom:2px solid transparent}
.projstrip .proj.active{border-bottom-color:var(--ein-orange);font-weight:600}
.projstrip .folder{width:14px;height:11px;background:var(--ein-yellow);border-radius:1px;position:relative}
.projstrip .folder:before{content:"";position:absolute;left:0;top:-3px;width:6px;height:3px;background:#e9bb3a;border-radius:1px 1px 0 0}

/* ---- module tabs ---- */
.modtabs{height:44px;background:#fff;border-bottom:1px solid var(--ein-line);display:flex;align-items:flex-end;padding-left:184px;gap:8px;flex-shrink:0;overflow:hidden;white-space:nowrap}
.modtabs .tab{display:inline-flex;align-items:center;gap:6px;padding:0 10px 9px;color:var(--ein-ink);font-size:14px;border-bottom:3px solid transparent;cursor:pointer}
.modtabs .tab .ic{width:14px;height:14px;color:var(--ein-orange)}
.modtabs .tab.active{border-bottom-color:var(--ein-orange);font-weight:600}

/* ---- body: nav + panes ---- */
.body{display:flex;flex:1;min-height:0}
.leftnav{width:215px;background:#fafafa;border-right:1px solid var(--ein-line);flex-shrink:0;padding:8px 0}
.leftnav .burger{width:18px;height:2px;background:var(--ein-ink);margin:8px 10px 20px;box-shadow:0 5px 0 var(--ein-ink),0 -5px 0 var(--ein-ink)}
.leftnav .modname{padding:0 10px 22px;font-size:14px;color:var(--ein-ink)}
.leftnav .item{display:flex;align-items:center;gap:10px;padding:8px 10px;color:var(--ein-ink);cursor:pointer;font-size:14px}
.leftnav .item .ic{width:16px;height:16px;color:var(--ein-orange)}
.leftnav .item.active{font-weight:600;background:#f0efee}
.leftnav .item:hover{background:#f0efee}
.leftnav .group{padding:14px 10px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--ein-ink-3)}

.panes{display:flex;flex:1;min-width:0}
.pane{display:flex;flex-direction:column;min-width:0;background:#fff}
.pane.list{width:48%;border-right:1px solid var(--ein-line)}
.pane.list.narrow{width:34%}
.pane.list.full{width:100%}
.pane.doc{flex:1}
.pane.doc.hidden{display:none}
.pane-title{height:22px;background:var(--ein-orange);color:#fff;font-size:12px;display:flex;align-items:center;padding:0 8px;flex-shrink:0}
.pane-title .x{margin-left:auto;font-size:14px;cursor:pointer;opacity:.9}
.cmdbar{height:44px;display:flex;align-items:center;gap:18px;padding:0 10px;border-bottom:1px solid var(--ein-line);flex-shrink:0;background:#fff}
.cmdbar .cmd{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ein-ink);cursor:pointer;padding:6px 4px;border-radius:2px}
.cmdbar .cmd:hover{background:var(--ein-hover)}
.cmdbar .cmd .ic{width:16px;height:16px;color:var(--ein-orange)}
.cmdbar .cmd.disabled{color:var(--ein-ink-4);cursor:default}
.cmdbar .cmd.disabled .ic{color:var(--ein-ink-4)}
.cmdbar .cmd.primary{background:var(--ein-orange);color:#fff;padding:6px 14px;font-weight:600}
.cmdbar .cmd.primary .ic{color:#fff}
.cmdbar .right{margin-left:auto;display:flex;gap:14px;align-items:center}
.pane-scroll{flex:1;overflow:auto;min-height:0}
.filterbar{display:flex;gap:12px;padding:10px 12px;border-bottom:1px solid var(--ein-line);background:#fff;align-items:flex-end;flex-wrap:wrap}
.filterbar .field{min-width:160px}
.filterbar .field.w{min-width:220px}

/* ---- DetailsList ---- */
table.dl{width:100%;border-collapse:collapse;font-size:14px}
table.dl th{position:sticky;top:0;background:#fff;z-index:1;text-align:left;font-weight:600;height:42px;padding:0 8px;border-bottom:1px solid var(--ein-line);white-space:nowrap;color:var(--ein-ink)}
table.dl th .sort{color:var(--ein-ink-3);font-size:11px;margin-left:3px}
table.dl td{height:43px;padding:0 8px;border-bottom:1px solid var(--ein-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px;vertical-align:middle}
table.dl tr.filters td{height:52px;border-bottom:1px solid var(--ein-line)}
table.dl tr.filters input,table.dl tr.filters select{width:100%;height:32px;border:1px solid var(--ein-ink-3);border-radius:2px;padding:0 8px;font:inherit;background:#fff}
table.dl tr.filters input:focus{outline:none;border-color:var(--ein-orange)}
table.dl tbody tr:hover td{background:var(--ein-hover)}
table.dl tbody tr.selected td{background:var(--ein-selected);font-weight:600}
table.dl .sel{width:40px;text-align:center}
table.dl .radio{display:inline-block;width:18px;height:18px;border:1px solid var(--ein-ink-3);border-radius:50%;background:#fff;vertical-align:middle}
table.dl tr.selected .radio{border-color:var(--ein-orange);background:var(--ein-orange);position:relative}
table.dl tr.selected .radio:after{content:"✓";color:#fff;font-size:12px;position:absolute;left:3px;top:-1px}
table.dl .chk{display:inline-block;width:18px;height:18px;border:1px solid var(--ein-ink-3);border-radius:2px;background:#fff;vertical-align:middle;position:relative}
table.dl .chk.on{border-color:var(--ein-orange);background:var(--ein-orange)}
table.dl .chk.on:after{content:"✓";color:#fff;font-size:12px;position:absolute;left:3px;top:-1px}
table.dl .num{text-align:right;font-variant-numeric:tabular-nums}
table.dl .muted{color:var(--ein-ink-3)}
table.dl tr.group td{background:var(--ein-bg-2);font-weight:600;height:36px}
table.dl tr.total td{font-weight:600;background:#fff;border-top:2px solid var(--ein-line-3)}
table.dl td.editable{background:#fffdf5;border-left:1px dashed var(--ein-line-3)}
table.dl input.cell{width:90px;height:28px;border:1px solid var(--ein-ink-3);border-radius:2px;padding:0 6px;font:inherit;text-align:right}

/* ---- document pane ---- */
.doc-content{padding:22px 28px 40px;max-width:none}
.doc-content.wide{max-width:none}
.doc-head{display:flex;align-items:baseline;gap:22px;margin:4px 0 4px 26px}
.doc-head h1{font-size:22px;font-weight:600;margin:0;color:var(--ein-ink)}
.doc-head .sep{color:var(--ein-ink-3)}
.doc-sub{margin:0 0 20px 26px;font-size:13px;color:var(--ein-ink-2);display:flex;gap:26px}
.section{margin:0 0 18px}
.section>h2{font-size:14px;font-weight:600;margin:0 0 12px;color:var(--ein-ink)}
.card{border:1px solid var(--ein-line);border-radius:2px;background:#fff;box-shadow:var(--ein-shadow);padding:16px 18px;margin:0 0 16px;overflow-x:auto}
.card h2{font-size:14px;font-weight:600;margin:0 0 14px}
.card h3{font-size:14px;font-weight:600;margin:14px 0 8px;display:flex;align-items:center}
.card h3 .actions{margin-left:auto;display:flex;gap:16px;font-weight:400}
.card h3 .actions a,.actions a{color:var(--ein-ink);display:inline-flex;align-items:center;gap:5px;font-size:14px;cursor:pointer}
.actions a .ic{width:14px;height:14px;color:var(--ein-orange)}
.actions a.disabled{color:var(--ein-ink-4)}
.actions a.disabled .ic{color:var(--ein-ink-4)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px 22px}
.grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:14px 22px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label{font-weight:600;font-size:14px;color:var(--ein-ink)}
.field label .req{color:var(--ein-red);margin-left:3px}
.field .in{height:32px;border:1px solid var(--ein-ink-3);border-radius:2px;padding:0 8px;display:flex;align-items:center;font-size:14px;background:#fff;color:var(--ein-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.field .in.ro{background:var(--ein-bg-3);border-color:var(--ein-line-2);color:var(--ein-ink-2)}
.field .in.dd:after{content:"⌄";margin-left:auto;color:var(--ein-ink-2);font-size:16px;line-height:0;padding-bottom:6px}
.field .in.dt:after{content:"📅";margin-left:auto;font-size:12px;opacity:.7}
.field .in .chip{display:inline-flex;align-items:center;gap:6px;background:var(--ein-bg-3);border-radius:2px;padding:2px 6px 2px 2px;font-size:13px}
.field .in .chip .av{width:22px;height:22px;border-radius:50%;background:var(--ein-blue);color:#fff;font-size:11px;display:inline-flex;align-items:center;justify-content:center;font-weight:600}
.field .in .chip .rm{color:var(--ein-ink-2);font-size:12px}
.field .ta{min-height:64px;border:1px solid var(--ein-ink-3);border-radius:2px;padding:6px 8px;font-size:14px;background:#fff;color:var(--ein-ink)}
.field .hint{font-size:12px;color:var(--ein-ink-3)}
.field .in.num{justify-content:flex-end;font-variant-numeric:tabular-nums}
.toggle{display:inline-flex;align-items:center;gap:8px;font-size:14px}
.toggle .sw{width:40px;height:20px;border-radius:10px;background:var(--ein-orange);position:relative}
.toggle .sw:after{content:"";position:absolute;right:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff}
.toggle .sw.off{background:#fff;border:1px solid var(--ein-ink-3)}
.toggle .sw.off:after{right:auto;left:3px;top:2px;background:var(--ein-ink-2)}

/* section tables (inside cards) */
table.st{width:100%;border-collapse:collapse;font-size:14px;margin-top:4px}
table.st th{text-align:left;font-weight:600;padding:8px 8px;border-bottom:1px solid var(--ein-line);white-space:nowrap}
table.st td{padding:9px 8px;border-bottom:1px solid var(--ein-line);vertical-align:top}
table.st td:first-child{white-space:nowrap}
table.st td .code{white-space:nowrap}
table.st tr:last-child td{border-bottom:none}
table.st .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.st .muted{color:var(--ein-ink-3)}
table.st tr.sub td{background:var(--ein-bg-2);font-size:13px;color:var(--ein-ink-2)}
table.st tr.sub td:first-child{padding-left:28px}
table.st tr.total td{font-weight:600;border-top:2px solid var(--ein-line-3)}
table.st tr.grp td{background:var(--ein-bg-3);font-weight:600}
table.st .sel{width:30px}
table.st .radio{display:inline-block;width:18px;height:18px;border:1px solid var(--ein-ink-3);border-radius:50%;background:#fff;vertical-align:middle}
table.st .chk{display:inline-block;width:18px;height:18px;border:1px solid var(--ein-ink-3);border-radius:2px;background:#fff;vertical-align:middle;position:relative}
table.st .chk.on{border-color:var(--ein-orange);background:var(--ein-orange)}
table.st .chk.on:after{content:"✓";color:#fff;font-size:12px;position:absolute;left:3px;top:-1px}
table.st .chk.dis{background:var(--ein-bg-3);border-color:var(--ein-line-2)}
table.st input.cell,table.st .cell{display:inline-block;width:84px;height:28px;border:1px solid var(--ein-ink-3);border-radius:2px;padding:4px 6px;font:inherit;text-align:right;background:#fff}
table.st .code{font-family:Consolas,"Courier New",monospace;font-size:13px}
table.st .code.dim{color:var(--ein-ink-3)}

/* status pills */
.pill{display:inline-block;padding:2px 8px;border-radius:2px;font-size:12px;font-weight:600;white-space:nowrap;line-height:16px}
.pill.grey{background:var(--ein-grey-bg);color:var(--ein-ink-2)}
.pill.blue{background:var(--ein-blue-bg);color:#004578}
.pill.green{background:var(--ein-green-bg);color:var(--ein-green)}
.pill.amber{background:var(--ein-amber-bg);color:var(--ein-amber)}
.pill.red{background:var(--ein-red-bg);color:var(--ein-red)}
.pill.orange{background:var(--ein-orange-light);color:var(--ein-orange-text)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.dot.green{background:var(--ein-green)}.dot.amber{background:#c19c00}.dot.red{background:var(--ein-red)}.dot.grey{background:var(--ein-ink-4)}.dot.blue{background:var(--ein-blue)}

/* message bars */
.msg{display:flex;gap:10px;align-items:flex-start;padding:8px 12px;border-radius:2px;font-size:13px;margin:0 0 14px;background:var(--ein-bg-3);color:var(--ein-ink)}
.msg .i{font-weight:700;width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;margin-top:1px}
.msg.warn{background:var(--ein-amber-bg)}.msg.warn .i{background:#c19c00;color:#fff}
.msg.err{background:var(--ein-red-bg)}.msg.err .i{background:var(--ein-red);color:#fff}
.msg.ok{background:var(--ein-green-bg)}.msg.ok .i{background:var(--ein-green);color:#fff}
.msg.info{background:var(--ein-blue-bg)}.msg.info .i{background:var(--ein-blue);color:#fff}

/* bookmark pane */
.bookmark{width:210px;border-left:1px solid var(--ein-line);padding:18px 16px;flex-shrink:0;background:#fff}
.bookmark h4{margin:0 0 14px;font-size:18px;font-weight:600;display:flex}
.bookmark h4 .x{margin-left:auto;color:var(--ein-orange);font-weight:400;cursor:pointer}
.bookmark a{display:block;color:var(--ein-ink);font-size:14px;margin:0 0 12px;line-height:19px}
.bookmark a.active{text-decoration:underline;color:var(--ein-orange-text)}
.doc-wrap{display:flex;flex:1;min-height:0}
.doc-wrap .pane-scroll{flex:1}

/* pivot (tabs inside a doc) */
.pivot{display:flex;gap:4px;border-bottom:1px solid var(--ein-line);margin:0 0 16px}
.pivot span{padding:8px 12px;cursor:pointer;color:var(--ein-ink);border-bottom:2px solid transparent;font-size:14px}
.pivot span.active{border-bottom-color:var(--ein-orange);font-weight:600}
.pivot span .cnt{background:var(--ein-bg-3);border-radius:8px;padding:0 6px;font-size:11px;margin-left:6px;color:var(--ein-ink-2)}

/* KPI tiles */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 16px}
.kpi{border:1px solid var(--ein-line);border-radius:2px;padding:10px 12px;background:#fff}
.kpi .l{font-size:12px;color:var(--ein-ink-2)}
.kpi .v{font-size:20px;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums}
.kpi .s{font-size:12px;color:var(--ein-ink-3)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 16px;border:1px solid var(--ein-ink-3);border-radius:2px;background:#fff;font-size:14px;font-weight:600;color:var(--ein-ink);cursor:pointer}
.btn.primary{background:var(--ein-orange);border-color:var(--ein-orange);color:#fff}
.btn.disabled{color:var(--ein-ink-4);border-color:var(--ein-line-2);background:var(--ein-bg-3);cursor:default}
.btn.sm{height:26px;padding:0 10px;font-size:13px;font-weight:400}
.btnrow{display:flex;gap:10px;margin-top:10px}

/* evidence: comments + photos */
.comment{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--ein-line)}
.comment .av{width:32px;height:32px;border-radius:50%;background:#7160e8;color:#fff;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px}
.comment .av.b{background:#038387}.comment .av.c{background:#ca5010}.comment .av.d{background:#4f6bed}
.comment .who{font-weight:600;font-size:13px}.comment .when{color:var(--ein-ink-3);font-size:12px;margin-left:8px}
.comment .txt{margin-top:3px;font-size:14px}
.comment .tag{margin-left:8px}
.photos{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:8px}
.photos.c8{grid-template-columns:repeat(8,1fr)}
.photo{aspect-ratio:4/3;border-radius:2px;position:relative;overflow:hidden;border:1px solid var(--ein-line);background:#cfd8dc}
.photo .cap{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;font-size:10px;padding:2px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.photo .chk{position:absolute;top:4px;left:4px;width:16px;height:16px;border:1px solid #fff;border-radius:2px;background:rgba(255,255,255,.7)}
.photo .chk.on{background:var(--ein-orange);border-color:var(--ein-orange)}
.photo .chk.on:after{content:"✓";color:#fff;font-size:11px;position:absolute;left:2px;top:-2px}
.photo.g1{background:linear-gradient(160deg,#8d9aa5,#5c6b76 60%,#3f4b54)}
.photo.g2{background:linear-gradient(160deg,#b8a98a,#8b7a5a 55%,#5b4f3a)}
.photo.g3{background:linear-gradient(160deg,#9fb3a8,#65807a 60%,#3d534e)}
.photo.g4{background:linear-gradient(160deg,#a8a8a8,#6e6e6e 60%,#404040)}
.photo.g5{background:linear-gradient(160deg,#c7b59c,#9c8867 55%,#6a5a40)}
.photo.g6{background:linear-gradient(160deg,#8fa2b6,#5e7186 60%,#36434f)}
.photo:before{content:"";position:absolute;left:12%;right:12%;bottom:28%;height:3px;background:rgba(255,255,255,.18);transform:rotate(-8deg)}
.photo.pbs{outline:2px solid var(--ein-blue);outline-offset:-2px}

/* tree (PBS/PMOL) */
.tree .n{display:flex;align-items:center;gap:8px;padding:9px 10px;border-bottom:1px solid var(--ein-line);cursor:pointer;white-space:nowrap}
.tree .n:hover{background:var(--ein-hover)}
.tree .n.sel{background:var(--ein-selected);font-weight:600}
.tree .n.l2{padding-left:34px}
.tree .n .tw{width:12px;color:var(--ein-ink-3);font-size:11px}
.tree .n .ic{width:15px;height:15px;color:var(--ein-orange);flex-shrink:0}
.tree .n .sub{color:var(--ein-ink-3);font-size:12px;font-weight:400}
.tree .n .r{margin-left:auto;display:flex;gap:6px;align-items:center}

/* mockup annotation callouts (hidden by print) */
.note{position:fixed;right:14px;bottom:14px;max-width:340px;background:#fffbe6;border:1px solid #e6d27a;border-radius:3px;padding:8px 12px;font-size:12px;color:#5c4b00;box-shadow:var(--ein-shadow);z-index:50}
.note b{display:block;margin-bottom:3px}
.note .close{position:absolute;right:6px;top:3px;cursor:pointer;color:#8a5a00}
.screen-nav{position:fixed;left:14px;bottom:14px;background:#323130;color:#fff;border-radius:3px;padding:6px 10px;font-size:12px;z-index:50;display:flex;gap:10px;align-items:center;box-shadow:var(--ein-shadow)}
.screen-nav a{color:#ffd27a;font-weight:600}
.screen-nav a:hover{text-decoration:underline}
@media print{.note,.screen-nav{display:none}}

/* dialog */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:40}
.dialog{background:#fff;width:560px;border-radius:2px;box-shadow:0 8px 24px rgba(0,0,0,.3);padding:20px 24px}
.dialog h2{font-size:20px;font-weight:600;margin:0 0 14px}
.dialog .foot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}