/* Simu & Sisi data room — SharePoint-style document library, Kwanza green. Light only. */
:root {
  --suite: #0E2A1B;
  --suite-2: #163D28;
  --brand: #2F7A3B;
  --brand-dark: #24612E;
  --brand-ink: #1E5427;
  --accent: #74C044;
  --tint: #EEF6EA;
  --tint-2: #E2F0DA;
  --sel: #E6F2DF;
  --bg: #FAF9F8;
  --white: #FFFFFF;
  --line: #EDEBE9;
  --line-2: #E1DFDD;
  --ink: #242424;
  --ink-2: #484644;
  --muted: #605E5C;
  --faint: #8A8886;
  --hover: #F3F2F1;
  --danger: #C4314B;
  --warn: #8A5A00;
  --warn-bg: #FFF4CE;
  --radius: 6px;
  --shadow-1: 0 1.6px 3.6px rgba(0,0,0,.11), 0 .3px .9px rgba(0,0,0,.09);
  --shadow-2: 0 6.4px 14.4px rgba(0,0,0,.13), 0 1.2px 3.6px rgba(0,0,0,.10);
  --shadow-3: 0 25.6px 57.6px rgba(0,0,0,.22), 0 4.8px 14.4px rgba(0,0,0,.18);
  --font: "Segoe UI Variable Text", "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); font-size: 14px; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
svg { flex: none; }
.ico { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hide { display: none !important; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ---------- suite bar */
.suite { position: sticky; top: 0; z-index: 30; height: 48px; background: var(--suite); color: #fff; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 0; }
.suite .burger { display: none; }
.suite .brand { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; color: #fff; font-weight: 600; font-size: 16px; letter-spacing: .1px; white-space: nowrap; }
.suite .brand:hover { text-decoration: none; background: rgba(255,255,255,.07); }
.suite .brand img { height: 26px; }
.suite .brand small { font-weight: 400; opacity: .7; font-size: 14px; margin-left: 2px; }
.search { flex: 1; display: flex; justify-content: center; min-width: 0; }
.search form { width: 100%; max-width: 560px; position: relative; }
.search input { width: 100%; height: 32px; border: 0; border-radius: 4px; padding: 0 12px 0 36px; background: #fff; color: var(--ink); font-size: 14px; }
.search input::placeholder { color: var(--muted); }
.search .ico { position: absolute; left: 11px; top: 8px; color: var(--brand); }
.suite .tools { display: flex; align-items: center; gap: 4px; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: transparent; color: inherit; border-radius: 4px; cursor: pointer; }
.iconbtn:hover { background: rgba(0,0,0,.06); }
.suite .iconbtn:hover { background: rgba(255,255,255,.1); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; background: var(--brand); flex: none; letter-spacing: .3px; }
.avatar.lg { width: 48px; height: 48px; font-size: 16px; }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.me { border: 0; background: transparent; padding: 4px; border-radius: 50%; cursor: pointer; }
.me .avatar { background: #3F8F4A; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }

/* ---------- site header */
.site { background: var(--white); border-bottom: 1px solid var(--line); padding: 18px 28px 16px; display: flex; align-items: center; gap: 16px; }
.site .tile { width: 56px; height: 56px; border-radius: 8px; background: linear-gradient(135deg, #F2F8EE, #DDEFD2); display: flex; align-items: center; justify-content: center; flex: none; }
.site .tile img { height: 34px; }
.site h1 { font-size: 24px; font-weight: 600; margin: 0; line-height: 1.2; }
.site .sub { color: var(--muted); font-size: 13px; margin-top: 3px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.site .sub .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); }
.site .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 9px; border-radius: 12px; background: var(--hover); color: var(--ink-2); white-space: nowrap; }
.pill.green { background: var(--tint-2); color: var(--brand-ink); }
.pill.amber { background: var(--warn-bg); color: var(--warn); }
.pill.red { background: #FDE7EA; color: var(--danger); }
.pill.grey { background: #F0F0F0; color: var(--muted); }

/* ---------- frame */
.frame { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: calc(100vh - 48px - 91px); }
.frame.with-pane { grid-template-columns: 228px minmax(0, 1fr) 340px; }
.nav { background: var(--white); border-right: 1px solid var(--line); padding: 12px 0; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 0 20px; height: 40px; color: var(--ink); position: relative; font-size: 14px; }
.nav a:hover { background: var(--hover); text-decoration: none; }
.nav a.on { background: var(--tint); font-weight: 600; color: var(--brand-ink); }
.nav a.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; background: var(--brand); }
.nav .ico { width: 18px; height: 18px; color: var(--brand); }
.nav .sep { height: 1px; background: var(--line); margin: 10px 20px; }
.nav .lbl { font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 20px 4px; text-transform: uppercase; letter-spacing: .4px; }
.nav .foot { padding: 16px 20px; font-size: 12px; color: var(--faint); line-height: 1.5; }
.main { min-width: 0; background: var(--white); }

/* ---------- command bar */
.cmdbar { position: sticky; top: 48px; z-index: 20; display: flex; align-items: center; gap: 2px; height: 44px; padding: 0 16px; background: var(--white); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.cmdbar::-webkit-scrollbar { display: none; }
.cmd { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 0; border-radius: 4px; background: transparent; cursor: pointer; white-space: nowrap; color: var(--ink); font-size: 14px; }
.cmd:hover { background: var(--hover); }
.cmd:disabled { color: #C8C6C4; cursor: default; background: transparent; }
.cmd .ico { color: var(--brand); width: 16px; height: 16px; }
.cmd:disabled .ico { color: #C8C6C4; }
.cmd.primary { background: var(--brand); color: #fff; padding: 0 14px; margin-right: 6px; }
.cmd.primary .ico { color: #fff; }
.cmd.primary:hover { background: var(--brand-dark); }
.cmdbar .grow { flex: 1; }
.cmdbar .vsep { width: 1px; height: 22px; background: var(--line-2); margin: 0 6px; }
.selinfo { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; height: 32px; border-radius: 16px; background: var(--tint); color: var(--brand-ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
.selinfo button { border: 0; background: none; cursor: pointer; padding: 2px; display: inline-flex; color: inherit; }

/* ---------- library */
.lib { padding: 0 28px 48px; }
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 22px 0 14px; font-size: 20px; font-weight: 600; }
.crumbs a, .crumbs span { color: var(--ink); padding: 2px 6px; border-radius: 4px; }
.crumbs a { color: var(--muted); font-weight: 400; }
.crumbs a:hover { background: var(--hover); text-decoration: none; color: var(--ink); }
.crumbs .ico { color: var(--faint); width: 14px; height: 14px; }
.lib-note { margin: -6px 0 14px 6px; color: var(--muted); font-size: 13px; }
table.files { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.files th { text-align: left; font-weight: 600; font-size: 12px; color: var(--muted); height: 42px; padding: 0 10px; border-bottom: 1px solid var(--line); white-space: nowrap; user-select: none; }
table.files th.sortable { cursor: pointer; }
table.files th.sortable:hover { background: var(--hover); color: var(--ink); }
table.files th .ico { width: 12px; height: 12px; vertical-align: -1px; margin-left: 4px; }
table.files td { height: 44px; padding: 0 10px; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); font-size: 13px; }
table.files tr.row { cursor: default; }
table.files tr.row:hover td { background: var(--hover); }
table.files tr.row.sel td { background: var(--sel); }
table.files .c-chk { width: 44px; padding: 0 0 0 8px; }
table.files .c-ico { width: 40px; padding: 0 4px; }
table.files .c-mod { width: 150px; }
table.files .c-by { width: 170px; }
table.files .c-size { width: 110px; }
table.files .c-more { width: 44px; padding: 0; }
.chk { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #8A8886; display: inline-flex; align-items: center; justify-content: center; background: #fff; cursor: pointer; opacity: 0; transition: opacity .1s; }
.chk .ico { width: 12px; height: 12px; stroke-width: 2.4; color: #fff; opacity: 0; }
tr.row:hover .chk, .chk.all, .anysel .chk { opacity: 1; }
tr.row.sel .chk, .chk.on { opacity: 1; background: var(--brand); border-color: var(--brand); }
tr.row.sel .chk .ico, .chk.on .ico { opacity: 1; }
.nm { display: flex; align-items: center; min-width: 0; gap: 8px; }
.nm a, .nm button.link { color: var(--ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm a:hover, .nm button.link:hover { color: var(--brand-ink); text-decoration: underline; }
button.link { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; }
.nm .tag { font-size: 11px; color: var(--muted); background: var(--hover); padding: 1px 7px; border-radius: 9px; flex: none; }
.more { width: 32px; height: 32px; border: 0; border-radius: 4px; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0; color: var(--ink-2); }
tr.row:hover .more, .more:focus { opacity: 1; }
.more:hover { background: var(--line-2); }
.fi { width: 28px; height: 28px; display: block; }
.empty { text-align: center; padding: 72px 20px; color: var(--muted); }
.empty svg { width: 120px; height: 96px; margin-bottom: 14px; }
.empty h3 { margin: 0 0 6px; color: var(--ink); font-size: 18px; font-weight: 600; }

/* tiles view */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; padding-top: 6px; }
.tile-card { position: relative; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 18px 14px 14px; cursor: pointer; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 184px; transition: box-shadow .12s, border-color .12s; }
.tile-card:hover { box-shadow: var(--shadow-2); border-color: transparent; }
.tile-card.sel { border-color: var(--brand); background: var(--sel); }
.tile-card .big { width: 72px; height: 72px; margin: 4px 0 14px; }
.tile-card .t { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.tile-card .m { font-size: 12px; color: var(--muted); margin-top: 6px; }
.tile-card .chk { position: absolute; top: 10px; left: 10px; }
.tile-card:hover .chk { opacity: 1; }

/* ---------- details pane */
.pane { background: #fff; border-left: 1px solid var(--line); position: sticky; top: 48px; height: calc(100vh - 48px); overflow-y: auto; }
.pane-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 16px 14px 20px; border-bottom: 1px solid var(--line); }
.pane-head .fi { width: 40px; height: 40px; }
.pane-head h3 { font-size: 16px; margin: 0; font-weight: 600; word-break: break-word; line-height: 1.35; flex: 1; }
.pane-sec { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.pane-sec h4 { font-size: 14px; margin: 0 0 12px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.props { display: grid; grid-template-columns: 96px 1fr; gap: 9px 10px; font-size: 13px; }
.props dt { color: var(--muted); }
.props dd { margin: 0; color: var(--ink); word-break: break-word; }
.people-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.people-row .who { flex: 1; min-width: 0; }
.people-row .who b { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-row .who span { color: var(--muted); font-size: 12px; }
.act { position: relative; padding: 0 0 12px 18px; font-size: 13px; }
.act::before { content: ""; position: absolute; left: 4px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.act::after { content: ""; position: absolute; left: 7px; top: 16px; bottom: 0; width: 1px; background: var(--line-2); }
.act:last-child::after { display: none; }
.act small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.ver { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; border-bottom: 1px dashed var(--line); }
.ver:last-child { border-bottom: 0; }
.ver .v { flex: 1; min-width: 0; }
.ver .v b { font-weight: 600; display: block; }
.ver .v span { color: var(--muted); font-size: 12px; }

/* ---------- buttons, inputs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px; padding: 0 16px; border-radius: 4px; border: 1px solid #8A8886; background: #fff; color: var(--ink); cursor: pointer; font-weight: 600; font-size: 14px; white-space: nowrap; }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn.danger { color: var(--danger); border-color: #E8A2AD; }
.btn.danger:hover { background: #FDF3F4; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--brand-ink); padding: 0 8px; }
.btn.ghost:hover { background: var(--tint); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn .ico { width: 15px; height: 15px; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink); }
.field .hint { font-size: 12px; color: var(--muted); }
.in { height: 34px; border: 1px solid #8A8886; border-radius: 4px; padding: 0 10px; background: #fff; width: 100%; }
.in:hover { border-color: var(--ink); }
.in:focus { outline: 0; border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
textarea.in { height: auto; min-height: 84px; padding: 8px 10px; resize: vertical; line-height: 1.45; }
select.in { padding-right: 28px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; user-select: none; margin: 4px 0 14px; }
.toggle input { display: none; }
.toggle .sw { width: 40px; height: 20px; border-radius: 10px; border: 1px solid #605E5C; position: relative; background: #fff; flex: none; transition: background .12s; }
.toggle .sw::after { content: ""; position: absolute; left: 4px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #323130; transition: left .12s; }
.toggle input:checked + .sw { background: var(--brand); border-color: var(--brand); }
.toggle input:checked + .sw::after { left: 24px; background: #fff; }

/* ---------- menus, dialogs, panels */
.menu { position: fixed; z-index: 90; min-width: 200px; background: #fff; border-radius: 6px; box-shadow: var(--shadow-2); padding: 4px 0; }
.menu button { display: flex; align-items: center; gap: 12px; width: 100%; height: 36px; padding: 0 16px 0 12px; border: 0; background: transparent; cursor: pointer; text-align: left; font-size: 14px; color: var(--ink); white-space: nowrap; }
.menu button:hover { background: var(--hover); }
.menu button .ico { color: var(--brand); }
.menu button.danger, .menu button.danger .ico { color: var(--danger); }
.menu .msep { height: 1px; background: var(--line); margin: 4px 0; }
.menu .mhead { padding: 12px 16px; display: flex; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu .mhead b { display: block; font-size: 14px; }
.menu .mhead span { font-size: 12px; color: var(--muted); }
.scrim { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade .12s; }
.scrim.clear { background: transparent; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(12px); opacity: 0; } }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
.dialog { background: #fff; border-radius: 8px; box-shadow: var(--shadow-3); width: 100%; max-width: 480px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; animation: rise .16s; }
.dialog.wide { max-width: 600px; }
.dialog header { display: flex; align-items: flex-start; gap: 12px; padding: 22px 24px 8px; }
.dialog header h2 { font-size: 20px; font-weight: 600; margin: 0; flex: 1; line-height: 1.3; word-break: break-word; }
.dialog .body { padding: 8px 24px 8px; overflow-y: auto; }
.dialog footer { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px 22px; }
.dialog p { line-height: 1.5; margin: 0 0 12px; color: var(--ink-2); }
.sidepanel { position: fixed; z-index: 85; top: 0; right: 0; bottom: 0; width: 100%; max-width: 480px; background: #fff; box-shadow: var(--shadow-3); display: flex; flex-direction: column; animation: slide .18s; }
.sidepanel header { display: flex; align-items: center; padding: 20px 20px 12px 28px; }
.sidepanel header h2 { flex: 1; font-size: 20px; margin: 0; font-weight: 600; }
.sidepanel .body { flex: 1; overflow-y: auto; padding: 6px 28px 20px; }
.sidepanel footer { display: flex; gap: 8px; padding: 16px 28px; border-top: 1px solid var(--line); }
.callout { background: var(--tint); border-radius: 6px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--ink-2); margin-bottom: 14px; }
.callout.warn { background: var(--warn-bg); color: #5C3B00; }
.linkbox { display: flex; gap: 6px; margin: 6px 0 12px; }
.linkbox input { flex: 1; font-size: 12px; font-family: ui-monospace, Menlo, monospace; background: var(--hover); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px 6px; border: 1px solid #8A8886; border-radius: 4px; min-height: 38px; align-items: center; cursor: text; position: relative; }
.chips:focus-within { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.chips input { border: 0; outline: 0; flex: 1; min-width: 160px; height: 26px; padding: 0 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px 0 2px; border-radius: 13px; background: var(--hover); font-size: 13px; }
.chip.new { background: var(--warn-bg); }
.chip button { border: 0; background: none; cursor: pointer; padding: 2px; display: inline-flex; border-radius: 50%; }
.chip button:hover { background: rgba(0,0,0,.08); }
.suggest { position: absolute; left: -1px; right: -1px; top: calc(100% + 4px); background: #fff; box-shadow: var(--shadow-2); border-radius: 6px; z-index: 5; max-height: 240px; overflow-y: auto; padding: 4px 0; }
.suggest button { display: flex; width: 100%; gap: 10px; align-items: center; padding: 7px 12px; border: 0; background: none; text-align: left; cursor: pointer; font-size: 13px; }
.suggest button:hover, .suggest button.on { background: var(--hover); }
.suggest b { display: block; font-weight: 600; }
.suggest span { color: var(--muted); font-size: 12px; }
.tree { border: 1px solid var(--line-2); border-radius: 6px; max-height: 300px; overflow-y: auto; padding: 4px 0; }
.tree label, .tree button { display: flex; align-items: center; gap: 8px; padding: 5px 10px; font-size: 13px; cursor: pointer; width: 100%; border: 0; background: none; text-align: left; }
.tree label:hover, .tree button:hover { background: var(--hover); }
.tree button.on { background: var(--sel); font-weight: 600; }
.tree input { accent-color: var(--brand); width: 15px; height: 15px; margin: 0; }
.tree .fo { width: 18px; height: 18px; }

/* ---------- toasts, uploads */
#toasts { position: fixed; z-index: 100; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: #323130; color: #fff; padding: 11px 18px; border-radius: 6px; box-shadow: var(--shadow-2); font-size: 14px; animation: rise .16s; max-width: 90vw; display: flex; gap: 10px; align-items: center; }
.toast.err { background: var(--danger); }
.toast .ico { color: var(--accent); }
.uploads { position: fixed; z-index: 70; right: 20px; bottom: 20px; width: 360px; max-width: calc(100vw - 32px); background: #fff; border-radius: 8px; box-shadow: var(--shadow-3); overflow: hidden; animation: rise .16s; }
.uploads header { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 16px; font-weight: 600; border-bottom: 1px solid var(--line); }
.uploads .list { max-height: 260px; overflow-y: auto; }
.up { display: flex; gap: 10px; align-items: center; padding: 9px 16px; font-size: 13px; }
.up .fi { width: 22px; height: 22px; }
.up .n { flex: 1; min-width: 0; }
.up .n div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { height: 3px; border-radius: 2px; background: var(--line); margin-top: 5px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--brand); width: 0; transition: width .2s; }
.up .ok { color: var(--brand); }
.up .bad { color: var(--danger); font-size: 12px; }
.dropzone { position: fixed; inset: 0; z-index: 60; background: rgba(47,122,59,.12); border: 3px dashed var(--brand); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.dropzone div { background: #fff; padding: 18px 26px; border-radius: 8px; box-shadow: var(--shadow-2); font-size: 16px; font-weight: 600; color: var(--brand-ink); display: flex; gap: 10px; align-items: center; }

/* ---------- home */
.home { padding: 24px 28px 56px; max-width: 1240px; }
.hero { position: relative; overflow: hidden; border-radius: 10px; background: linear-gradient(118deg, #0E2A1B 0%, #1B4A2E 52%, #2F7A3B 100%); color: #fff; padding: 34px 36px 32px; min-height: 210px; }
.hero h2 { font-size: 28px; font-weight: 700; margin: 0 0 10px; letter-spacing: -.2px; max-width: 640px; line-height: 1.2; }
.hero p { margin: 0; max-width: 600px; line-height: 1.55; font-size: 15px; color: rgba(255,255,255,.88); }
.hero .stats { display: flex; gap: 28px; margin-top: 24px; flex-wrap: wrap; }
.hero .stats div { font-size: 12px; color: rgba(255,255,255,.72); text-transform: uppercase; letter-spacing: .5px; }
.hero .stats b { display: block; font-size: 22px; color: #fff; text-transform: none; letter-spacing: 0; font-weight: 600; margin-bottom: 2px; }
.hero svg.art { position: absolute; right: -10px; bottom: -6px; width: 470px; height: 230px; opacity: .9; pointer-events: none; }
.projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.proj { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; display: flex; gap: 16px; align-items: flex-start; box-shadow: var(--shadow-1); }
.proj .mw { flex: none; width: 68px; height: 68px; border-radius: 10px; background: var(--tint); color: var(--brand-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; line-height: 1; }
.proj .mw small { font-size: 11px; font-weight: 600; margin-top: 4px; color: var(--brand); }
.proj h3 { margin: 2px 0 6px; font-size: 17px; font-weight: 600; }
.proj p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.sec-title { display: flex; align-items: center; justify-content: space-between; margin: 32px 0 12px; }
.sec-title h3 { font-size: 18px; font-weight: 600; margin: 0; }
.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.qcard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); transition: box-shadow .12s, border-color .12s; min-width: 0; }
.qcard:hover { text-decoration: none; box-shadow: var(--shadow-2); border-color: transparent; }
.qcard .fo { width: 36px; height: 36px; }
.qcard b { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qcard span { font-size: 12px; color: var(--muted); }
.qcard > div { min-width: 0; }
.twocol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.flist { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.frow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; min-width: 0; }
.frow:last-child { border-bottom: 0; }
.frow:hover { background: var(--hover); }
.frow .fi { width: 26px; height: 26px; }
.frow .t { flex: 1; min-width: 0; }
.frow .t b { display: block; font-weight: 400; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.frow .t span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.frow .d { font-size: 12px; color: var(--muted); white-space: nowrap; }
.frow .snip { display: block; font-size: 12px; color: var(--ink-2); margin-top: 3px; white-space: normal; line-height: 1.45; }
.frow .snip mark { background: #FFF1A8; color: inherit; padding: 0 1px; }
.nothing { padding: 22px 16px; color: var(--muted); font-size: 13px; text-align: center; }

/* ---------- viewer */
.viewer { position: fixed; inset: 0; z-index: 75; background: #E9E8E6; display: flex; flex-direction: column; animation: fade .12s; }
.vbar { height: 52px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: #fff; border-bottom: 1px solid var(--line-2); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.vbar .vt { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; font-weight: 600; font-size: 15px; }
.vbar .vt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vbar .vt .fi { width: 24px; height: 24px; }
.vbar .vmid { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.vbar .vmid .iconbtn { width: 32px; height: 32px; }
.vbody { flex: 1; overflow: auto; position: relative; }
.pages { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 12px 60px; }
.pages canvas { background: #fff; box-shadow: var(--shadow-1); max-width: none; display: block; }
.pg { position: relative; background: #fff; box-shadow: var(--shadow-1); }
.vcenter { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; padding: 24px; color: var(--ink-2); }
.vcenter .fi { width: 88px; height: 88px; margin-bottom: 18px; }
.vcenter h3 { margin: 0 0 6px; font-size: 18px; color: var(--ink); }
.vcenter p { margin: 0 0 18px; color: var(--muted); max-width: 420px; line-height: 1.5; }
.spin { width: 30px; height: 30px; border: 3px solid var(--tint-2); border-top-color: var(--brand); border-radius: 50%; animation: sp .8s linear infinite; margin-bottom: 14px; }
@keyframes sp { to { transform: rotate(360deg); } }
.vimg { max-width: calc(100% - 48px); max-height: calc(100% - 48px); box-shadow: var(--shadow-2); background: #fff; }
.vtext { background: #fff; margin: 22px auto; max-width: 900px; padding: 28px 32px; white-space: pre-wrap; font-family: ui-monospace, Menlo, monospace; font-size: 13px; box-shadow: var(--shadow-1); }
.vnav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 64px; border: 0; border-radius: 6px; background: rgba(255,255,255,.92); box-shadow: var(--shadow-2); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; }
.vnav:hover { background: #fff; }
.vnav.l { left: 14px; } .vnav.r { right: 14px; }
.vnav .ico { width: 20px; height: 20px; }
.watermark { position: absolute; inset: 0; pointer-events: none; z-index: 2; background-repeat: repeat; opacity: .5; }
/* sheet */
.sheet { display: flex; flex-direction: column; height: 100%; background: #fff; }
.sheet .grid { flex: 1; overflow: auto; position: relative; }
.sheet table { border-collapse: separate; border-spacing: 0; font-size: 12px; font-family: Calibri, "Segoe UI", Arial, sans-serif; }
.sheet th, .sheet td { border-right: 1px solid #E1E1E1; border-bottom: 1px solid #E1E1E1; padding: 2px 6px; height: 21px; white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.sheet thead th { position: sticky; top: 0; background: #F3F2F1; font-weight: 400; color: #616161; text-align: center; z-index: 2; min-width: 72px; }
.sheet tbody th { position: sticky; left: 0; background: #F3F2F1; font-weight: 400; color: #616161; text-align: center; min-width: 42px; z-index: 1; }
.sheet thead th:first-child { left: 0; z-index: 3; }
.sheet td.n { text-align: right; font-variant-numeric: tabular-nums; }
.sheet .tabs { flex: none; display: flex; gap: 0; border-top: 1px solid var(--line-2); background: #F3F2F1; overflow-x: auto; padding: 0 8px; }
.sheet .tabs button { border: 0; background: none; padding: 8px 16px; font-size: 13px; cursor: pointer; white-space: nowrap; border-bottom: 3px solid transparent; color: var(--ink-2); }
.sheet .tabs button.on { background: #fff; color: var(--brand-ink); font-weight: 600; border-bottom-color: var(--brand); }
.sheet .note { padding: 6px 12px; font-size: 12px; color: var(--muted); background: #FAFAFA; border-bottom: 1px solid var(--line); }

/* ---------- admin */
.adm { padding: 24px 28px 56px; max-width: 1280px; }
.adm h2 { font-size: 24px; margin: 0 0 4px; font-weight: 600; }
.adm .lead { color: var(--muted); margin: 0 0 20px; }
.tabsbar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; overflow-x: auto; }
.tabsbar a { padding: 10px 12px; color: var(--ink-2); font-weight: 400; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabsbar a:hover { text-decoration: none; color: var(--ink); background: var(--hover); }
.tabsbar a.on { font-weight: 600; color: var(--ink); border-bottom-color: var(--brand); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 26px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; box-shadow: var(--shadow-1); }
.stat span { font-size: 12px; color: var(--muted); }
.stat b { display: block; font-size: 26px; font-weight: 600; margin-top: 6px; color: var(--ink); }
.stat i { font-style: normal; font-size: 12px; color: var(--brand); }
.box { background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-1); overflow: hidden; }
.box > h3 { font-size: 15px; font-weight: 600; margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--line); }
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; background: #FCFCFB; }
table.grid td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.grid tr:last-child td { border-bottom: 0; }
table.grid tr:hover td { background: #FBFBFA; }
.person { display: flex; gap: 10px; align-items: center; min-width: 0; }
.person b { display: block; font-weight: 600; }
.person span { color: var(--muted); font-size: 12px; }
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .in { width: auto; min-width: 200px; }
.toolbar .grow { flex: 1; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; }
.seg button { border: 0; background: #fff; padding: 0 14px; height: 32px; cursor: pointer; font-size: 13px; border-right: 1px solid var(--line-2); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--tint); color: var(--brand-ink); font-weight: 600; }
.scroll-x { overflow-x: auto; }

/* ---------- sign in */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr); background: #fff; }
.auth .art { position: relative; overflow: hidden; background: linear-gradient(150deg, #0B2316 0%, #17402A 55%, #2B6E37 100%); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
.auth .art .mark { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 17px; }
.auth .art .mark img { height: 36px; }
.auth .art h1 { font-size: 40px; line-height: 1.12; margin: 0 0 14px; font-weight: 700; letter-spacing: -.5px; max-width: 520px; position: relative; z-index: 1; }
.auth .art p { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.82); max-width: 470px; margin: 0; position: relative; z-index: 1; }
.auth .art svg { position: absolute; right: -40px; bottom: 60px; width: 640px; height: 320px; opacity: .55; }
.auth .art .foot { font-size: 12px; color: rgba(255,255,255,.55); position: relative; z-index: 1; }
.auth .form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth .card { width: 100%; max-width: 380px; }
.auth .card img.m { height: 40px; margin-bottom: 22px; }
.auth .card h2 { font-size: 26px; margin: 0 0 6px; font-weight: 600; }
.auth .card .lead { color: var(--muted); margin: 0 0 26px; line-height: 1.5; }
.auth .card .in { height: 40px; font-size: 15px; }
.auth .card .btn { height: 40px; width: 100%; font-size: 15px; margin-top: 6px; }
.auth .msg { color: var(--danger); font-size: 13px; min-height: 18px; margin: 4px 0 6px; }
.auth .small { font-size: 12px; color: var(--muted); margin-top: 22px; line-height: 1.5; display: flex; gap: 8px; align-items: flex-start; }
.auth .small .ico { color: var(--brand); margin-top: 1px; }

/* ---------- responsive */
@media (max-width: 1100px) {
  .frame.with-pane { grid-template-columns: 228px minmax(0, 1fr); }
  .frame.with-pane .pane { position: fixed; right: 0; top: 48px; bottom: 0; width: 340px; max-width: 100vw; height: auto; z-index: 40; box-shadow: var(--shadow-3); }
  table.files .c-by { display: none; }
}
@media (max-width: 860px) {
  .frame, .frame.with-pane { grid-template-columns: minmax(0, 1fr); }
  .nav { display: none; }
  .nav.open { display: block; position: fixed; z-index: 45; top: 48px; left: 0; bottom: 0; width: 260px; box-shadow: var(--shadow-3); }
  .suite .burger { display: inline-flex; margin-left: 4px; }
  .suite .brand { padding: 0 8px 0 4px; }
  .suite .brand small { display: none; }
  .site { padding: 14px 16px; }
  .site .tile { width: 44px; height: 44px; }
  .site .tile img { height: 26px; }
  .site h1 { font-size: 19px; }
  .site .right { display: none; }
  .lib, .home, .adm { padding-left: 16px; padding-right: 16px; }
  .cmdbar { padding: 0 8px; }
  table.files .c-mod, table.files .c-size { display: none; }
  .projects, .twocol { grid-template-columns: minmax(0, 1fr); }
  .hero { padding: 26px 22px; }
  .hero h2 { font-size: 22px; }
  .hero svg.art { opacity: .25; }
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth .art { display: none; }
  .vbar .vmid .pgno, .cmd .lbl { display: none; }
  .vnav { display: none; }
}
@media (max-width: 560px) {
  .search form { max-width: none; }
  .suite .brand span { display: none; }
  .crumbs { font-size: 17px; }
  .row2 { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================ 12 Nov 2026: sharing by email, sign-in by code, settings, dashboard */
.grow { flex: 1; }
.right { margin-left: auto; }
.muted12 { font-size: 12px; color: var(--muted); line-height: 1.5; }
.muted13 { font-size: 13px; color: var(--muted); line-height: 1.5; }
.faint { color: var(--faint); }
.opt { font-weight: 400; color: var(--faint); font-size: 12px; margin-left: 4px; }
.in.sm { height: 28px; font-size: 13px; padding: 0 6px; width: auto; }
textarea.in { height: auto; padding: 8px 10px; line-height: 1.45; resize: vertical; font: inherit; }
.msg.ok { color: var(--brand-ink); }
.in.code { font-size: 26px !important; letter-spacing: 8px; text-align: center; font-weight: 600; height: 52px !important; font-variant-numeric: tabular-nums; }
.auth .small a { font-weight: 600; }

/* share dialog */
.dialog.wide { max-width: 640px; }
.dialog footer .grow { flex: 1; }
.sharerow { display: flex; gap: 12px; align-items: flex-start; }
.sharerow .field { margin-bottom: 4px; }
.sharerow .field.grow { flex: 1; min-width: 0; }
.sharerow select.in { width: 250px; height: 38px; }
.acc { border: 1px solid var(--line); border-radius: 6px; padding: 4px 12px; max-height: 190px; overflow-y: auto; }
.acc .people-row { border-bottom: 1px solid var(--line); padding: 8px 0; }
.acc .people-row:last-child { border-bottom: 0; }
.acc .fo { width: 22px; height: 22px; flex: none; }
#hasaccess .muted12 { margin-top: 8px; }
@media (max-width: 600px) { .sharerow { flex-direction: column; } .sharerow select.in { width: 100%; } }

/* sharing overview */
.shitem { display: flex; gap: 10px; align-items: center; color: var(--ink); min-width: 220px; }
.shitem .fi { width: 24px; height: 24px; flex: none; }
.shitem span { display: flex; flex-direction: column; min-width: 0; }
.shitem small { color: var(--muted); font-size: 12px; }

/* settings */
.setgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 20px; align-items: start; }
.box.pad { padding: 20px 22px 22px; overflow: visible; }
.box.pad > h3 { border: 0; padding: 0; margin: 0 0 16px; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.box.pad h4 { font-size: 13px; margin: 20px 0 8px; }
.testrow { display: flex; gap: 10px; align-items: flex-end; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.testrow .field { margin-bottom: 0; }
table.grid.mini th, table.grid.mini td { padding: 7px 8px; }

/* viewer with ONLYOFFICE */
.vbody.office { overflow: hidden; background: #fff; }
.vbody.office #oo, .vbody.office iframe { width: 100%; height: 100%; border: 0; display: block; }
.vbar .pill .ico { width: 14px; height: 14px; }

/* dashboard */
.dash { padding: 24px 28px 64px; max-width: 1400px; display: flex; flex-direction: column; gap: 20px; }
.dhead { display: flex; align-items: flex-start; gap: 16px; }
.dhead > div { flex: 1; }
.dhead h2 { font-size: 26px; font-weight: 600; margin: 0 0 4px; }
.dhead p { margin: 0; color: var(--muted); }
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; box-shadow: var(--shadow-1); border-top: 3px solid var(--brand); }
.kpi.warn { border-top-color: var(--danger); }
.kpi span { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.kpi b { display: block; font-size: 27px; font-weight: 700; margin: 6px 0 2px; line-height: 1.1; }
.kpi i { font-style: normal; font-size: 12px; color: var(--muted); }
.kpi.warn i { color: var(--danger); font-weight: 600; }
.dash .box > h3 { display: flex; align-items: center; gap: 10px; }
.h3note { font-weight: 400; font-size: 12px; color: var(--muted); }
.dash .seg.right, .dash .btn.right { margin-left: auto; }
.dproj header { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.dproj .mw { flex: none; width: 60px; height: 60px; border-radius: 10px; background: var(--tint); color: var(--brand-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; line-height: 1; }
.dproj .mw small { font-size: 10px; font-weight: 600; margin-top: 3px; color: var(--brand); }
.dproj h3 { margin: 0 0 3px; font-size: 17px; font-weight: 600; }
.dproj header p { margin: 0; font-size: 12.5px; color: var(--muted); }
.dp-top { display: flex; align-items: center; gap: 26px; padding: 18px 22px 8px; }
.donut { width: 138px; height: 138px; flex: none; }
.legend { list-style: none; margin: 0; padding: 0; flex: 1; font-size: 13px; }
.legend li { display: flex; align-items: center; gap: 9px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.legend li i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.legend li b { margin-left: auto; font-weight: 600; }
.legend li.tot { border-bottom: 0; color: var(--muted); }
.areas { padding: 8px 22px 18px; }
.area { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 54px; gap: 12px; align-items: center; padding: 6px 0; font-size: 13px; }
.area .an { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area .ac { text-align: right; color: var(--muted); font-size: 12px; white-space: nowrap; }
.stack { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: #F3F2F1; }
.stack i { display: block; height: 100%; }
.tlwrap { padding: 8px 14px 4px; overflow-x: auto; }
.tl { width: 100%; min-width: 860px; height: auto; display: block; }
.dcols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.dside { display: flex; flex-direction: column; gap: 20px; }
.marea h4 { display: flex; align-items: baseline; gap: 10px; font-size: 12px; font-weight: 600; margin: 0; padding: 12px 18px 6px; color: var(--brand-ink); text-transform: uppercase; letter-spacing: .4px; background: #FBFCFA; border-top: 1px solid var(--line); }
.marea:first-child h4 { border-top: 0; }
.marea h4 span { margin-left: auto; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }
.mrow { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto 150px 22px; gap: 12px; align-items: center; width: 100%; text-align: left; background: #fff; border: 0; border-top: 1px solid var(--line); padding: 9px 18px; cursor: pointer; font: inherit; color: inherit; }
.mrow:hover { background: #FAFAF9; }
.chipst { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--ink-2); }
.chipst::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.mt b { font-weight: 600; font-size: 13.5px; display: block; }
.mt small { display: block; font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.md { font-size: 12.5px; color: var(--ink-2); text-align: right; }
.mdoc .ico { width: 16px; height: 16px; color: var(--brand); }
.conf { padding: 4px 0; }
.crow { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; border: 0; background: none; padding: 9px 18px; cursor: pointer; font: inherit; color: inherit; border-top: 1px solid var(--line); }
.crow:first-child { border-top: 0; }
.crow:hover { background: #FAFAF9; }
.crow .ico { width: 16px; height: 16px; color: var(--warn); margin-top: 2px; flex: none; }
.crow b { font-weight: 600; font-size: 13px; display: block; }
.crow small { font-size: 12px; color: var(--muted); line-height: 1.45; }
.fbars { padding: 12px 18px 14px; }
.fbar { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 30px; gap: 10px; align-items: center; padding: 5px 0; font-size: 12.5px; color: var(--ink); }
.fbar:hover { text-decoration: none; color: var(--brand-ink); }
.fbar .fn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbar .fb { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: #F3F2F1; }
.fbar .fb i { display: block; height: 100%; }
.fbar b { text-align: right; font-weight: 600; }
.fkey { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 10px; }
.fkey i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.aprog { padding: 14px 18px 4px; }
table.acts td.an { color: var(--muted); width: 34px; }
table.acts tr.isdone td:nth-child(2) { color: var(--muted); text-decoration: line-through; }
table.acts td.late { color: var(--danger); font-weight: 600; }
.ast { width: 100% !important; font-weight: 600; }
.ast.done { background: var(--tint-2); border-color: #B7D9A8; color: var(--brand-ink); }
.ast.doing { background: #FFF4CE; border-color: #EBD27A; color: #5C3B00; }
.stpick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stpick input { display: none; }
.stpick span { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: 6px; padding: 9px 12px; cursor: pointer; font-size: 13px; }
.stpick span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.stpick input:checked + span { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--tint); font-weight: 600; }
/* presentation view: only the dashboard, bigger */
body.present .suite, body.present .site, body.present .nav, body.present [data-act="present"] { display: none !important; }
body.present .frame { grid-template-columns: minmax(0, 1fr); }
body.present .dash { max-width: none; padding: 28px 40px 60px; font-size: 15px; }
body.present .main { background: #FAF9F8; }
@media (max-width: 1180px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dcols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .dash { padding: 16px 14px 48px; } .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash .twocol { grid-template-columns: minmax(0, 1fr); } .dp-top { flex-direction: column; align-items: stretch; } .donut { align-self: center; }
  .mrow { grid-template-columns: minmax(0, 1fr) auto; } .mrow .chipst { grid-column: 1 / -1; } .mrow .md { text-align: left; grid-column: 1 / -1; } .mrow .mdoc { display: none; } .setgrid { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================ 13 Nov 2026: less green.
   Surfaces are white and light grey. Green stays only on the main button, the active marker, the logo and "Achieved". */
:root { --tint: #F3F4F6; --tint-2: #E8EAED; --sel: #EDF1F6; }
.suite { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line-2); }
.suite .brand { color: var(--ink); }
.suite .brand:hover, .suite .iconbtn:hover { background: var(--hover); }
.suite .brand small { color: var(--muted); opacity: 1; }
.search input { background: #F3F4F6; border: 1px solid transparent; }
.search input:focus { background: #fff; border-color: #8A8886; outline: 0; }
.search .ico { color: var(--muted); }
.me .avatar { background: #3B4A5A; box-shadow: none; }
.site .tile { background: #F3F4F6; }
.nav a.on { color: var(--ink); }
.nav .ico { color: var(--ink-2); }
.nav a.on .ico { color: var(--brand); }
.selinfo, .seg button.on { color: var(--ink); }
.seg button.on { background: #E8EAED; }
.pill.green, .ast.done { background: #E6F2DF; color: #1E5427; }
.btn.ghost:hover { background: var(--hover); }
.act::before { background: #A0A7B0; }
.hero { background: #fff; color: var(--ink); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); }
.hero p { color: var(--ink-2); }
.hero .stats div { color: var(--muted); }
.hero .stats b { color: var(--ink); }
.hero svg.art { stroke: #C5CBD3; opacity: 1; }
.proj .mw, .dproj .mw { background: #F3F4F6; color: var(--ink); }
.proj .mw small, .dproj .mw small { color: var(--muted); }
.auth .art { background: #F5F6F7; color: var(--ink); border-right: 1px solid var(--line-2); }
.auth .art p { color: var(--ink-2); }
.auth .art .foot { color: var(--muted); }
.auth .art svg { stroke: #BFC6CE; opacity: .9; }
.kpi { border-top-color: #D5D9DE; }
.marea h4 { color: var(--ink-2); background: #FAFAFA; }
a { color: #1F4E79; }
.nav a, .fbar, .shitem, .qcard, .btn, .tabsbar a { color: inherit; }
.nav a { color: var(--ink); }
.tabsbar a { color: var(--ink-2); }

.mrow { grid-template-columns: 128px minmax(0, 1fr) auto minmax(64px, 132px) 22px; }
.md { line-height: 1.35; }