/* ============================================================================
   LOADLINE LEADS
   Same brand as the Risk Atlas: white canvas, General Sans for everything said,
   Azeret Mono for everything measured, indigo for actions and "yours".
   ========================================================================= */

:root {
  --bg: #ffffff;
  --ink: #111114;
  --ink-2: #2a2a31;
  --muted: #5a5a63;
  --faint: #8a8a93;
  --ghost: #b2b2ba;
  --soft: #f5f5f7;
  --soft-2: #efeff2;
  --hair: rgba(17, 17, 20, .075);
  --hair-2: rgba(17, 17, 20, .13);
  --dark: #141820;
  --dark-2: #1d222c;

  --indigo: #5b4fe3;
  --indigo-2: #6f63ef;
  --indigo-dim: #eeedfd;
  --green: #3eaf5c;   --green-ink: #2f8a48;  --green-dim: #e9f6ec;
  --amber: #d99a1e;   --amber-ink: #a8730a;  --amber-dim: #fbf2df;
  --orange: #e0552b;  --orange-ink: #c2421b; --orange-dim: #fdece6;
  --red: #d0263e;     --red-ink: #b51d33;    --red-dim: #fbe7ea;
  --blue: #2f6fe4;    --blue-dim: #e8f0fd;

  --display: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
  --mono: 'Azeret Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --shadow-sm: 0 1px 2px rgba(17,17,20,.05), 0 2px 8px rgba(17,17,20,.05);
  --shadow: 0 1px 2px rgba(17,17,20,.04), 0 6px 22px rgba(17,17,20,.07);
  --shadow-lg: 0 2px 6px rgba(17,17,20,.04), 0 22px 60px rgba(17,17,20,.11);
  --ease: cubic-bezier(.16, 1, .3, 1);

  --iw: 420px;
  --gap: 16px;
  --top: 74px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 90px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--body); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
svg { display: block; }
kbd { font-family: var(--mono); font-size: 10.5px; color: var(--faint); border: 1px solid var(--hair-2); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; background: #fff; }
.micro { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
::selection { background: var(--indigo-dim); }

body::before {
  content: ''; position: fixed; left: 0; right: 0; top: 0; height: 96px; z-index: 5; pointer-events: none;
  background: linear-gradient(#fff 40%, rgba(255,255,255,.8) 70%, rgba(255,255,255,0));
}

/* ============================================================== top bar */

.topbar {
  position: fixed; top: 14px; left: var(--gap); right: var(--gap); z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  animation: drop .8s var(--ease) both;
}
.brand, .modes, .search-trigger { background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 0 0 1px var(--hair), var(--shadow-sm); border-radius: 999px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; text-decoration: none; flex: none; }
.brand__tile { width: 32px; height: 32px; border-radius: 10px; background: var(--indigo); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(91,79,227,.35), inset 0 1px 0 rgba(255,255,255,.18); }
.brand__word { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -.035em; line-height: 1; }
.brand__word span { color: var(--indigo); }
.brand__sep { width: 1px; height: 16px; background: var(--hair-2); }
.brand__product { font-size: 13.5px; font-weight: 500; color: var(--muted); }

.modes { position: relative; display: flex; padding: 4px; gap: 2px; }
.modes button { position: relative; z-index: 1; height: 32px; padding: 0 13px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--muted); display: flex; align-items: center; gap: 7px; transition: color .3s ease; white-space: nowrap; }
.modes button:hover { color: var(--ink); }
.modes button.is-on { color: #fff; }
.modes button em { font-style: normal; font-family: var(--mono); font-size: 10px; font-weight: 600; opacity: .6; }
.modes__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 60px; border-radius: 999px; background: var(--dark); box-shadow: 0 2px 8px rgba(20,24,32,.25); transition: left .45s var(--ease), width .45s var(--ease); }

.topbar__right { display: flex; align-items: center; gap: 8px; }
.search-trigger { height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 8px 0 14px; color: var(--faint); width: 270px; transition: box-shadow .2s ease; cursor: text; }
.search-trigger:focus-within { box-shadow: 0 0 0 1.5px var(--indigo), var(--shadow); }
.search-trigger svg { width: 16px; height: 16px; flex: none; }
.search-trigger input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 13px; color: var(--ink); }
.search-trigger input::placeholder { color: var(--faint); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 11px; font-size: 13px; font-weight: 600; letter-spacing: -.005em; transition: transform .15s var(--ease), box-shadow .2s ease, background .2s ease; white-space: nowrap; text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn svg { width: 16px; height: 16px; }
.btn--primary { background: var(--indigo); color: #fff; box-shadow: 0 4px 14px rgba(91,79,227,.32), inset 0 1px 0 rgba(255,255,255,.16); }
.btn--primary:hover { background: var(--indigo-2); }
.btn--dark { background: var(--dark); color: #fff; border-radius: 999px; height: 40px; }
.btn--dark:hover { background: var(--dark-2); }
.btn--line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair-2); }
.btn--line:hover { box-shadow: inset 0 0 0 1px rgba(17,17,20,.25), var(--shadow-sm); }
.btnrow { display: flex; gap: 8px; margin-top: 12px; }
.btnrow > .btn { flex: 1; }

/* ============================================================== page */

.page { padding: calc(var(--top) + 22px) calc(var(--iw) + var(--gap) * 2 + 8px) 40px 28px; max-width: 1900px; }
.hero { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 28px; align-items: end; animation: rise .7s var(--ease) .1s both; }
.eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--indigo); }
.title { margin: 0; font-family: var(--display); font-size: 30px; line-height: 1.12; font-weight: 600; letter-spacing: -.03em; }
.lede { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.lede b { color: var(--ink); font-weight: 600; }

.kpis { display: grid; grid-template-columns: repeat(6, auto); gap: 1px; background: var(--hair); border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--hair); }
.kpi { background: #fff; padding: 12px 18px 11px; display: flex; flex-direction: column; gap: 1px; min-width: 104px; }
.kpi b { font-family: var(--display); font-size: 26px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.kpi.is-yours b { color: var(--indigo); }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 26px 0 12px; animation: rise .7s var(--ease) .18s both; }
.filterbar { display: flex; gap: 6px; flex-wrap: wrap; }
.filterbar button { height: 28px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--muted); box-shadow: inset 0 0 0 1px var(--hair-2); transition: all .2s ease; display: inline-flex; align-items: center; gap: 6px; }
.filterbar button:hover { color: var(--ink); }
.filterbar button.is-on { background: var(--ink); color: #fff; box-shadow: none; }
.filterbar button em { font-style: normal; font-family: var(--mono); font-size: 10px; opacity: .6; }
.count { margin-left: auto; color: var(--muted); }

/* ============================================================== table */

.tablewrap { border-radius: 18px; box-shadow: 0 0 0 1px var(--hair), var(--shadow-sm); overflow-x: auto; background: #fff; animation: rise .7s var(--ease) .26s both; }
.leads { width: 100%; border-collapse: collapse; font-size: 13px; }
.leads th { position: sticky; top: 0; text-align: left; padding: 11px 14px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--soft); white-space: nowrap; }
.leads th[data-sort] { cursor: pointer; user-select: none; }
.leads th[data-sort]:hover { color: var(--ink); }
.leads th.is-sorted { color: var(--ink); }
.leads th.is-sorted::after { content: ' \2193'; }
.leads th.is-sorted.asc::after { content: ' \2191'; }
.leads td { padding: 11px 14px; border-top: 1px solid var(--hair); vertical-align: middle; }
.leads tbody tr { cursor: pointer; transition: background .15s ease; }
.leads tbody tr:hover { background: var(--soft); }
.leads tbody tr.is-sel { background: var(--indigo-dim); }
.leads tbody tr.is-sel td:first-child { box-shadow: inset 3px 0 0 var(--indigo); }
.leads tbody tr.st-notfit { opacity: .45; }

.score-chip { display: inline-grid; place-items: center; min-width: 38px; height: 24px; padding: 0 7px; border-radius: 8px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ci); background: var(--cd); font-variant-numeric: tabular-nums; }
.tone-green { --c: var(--green); --ci: var(--green-ink); --cd: var(--green-dim); }
.tone-amber { --c: var(--amber); --ci: var(--amber-ink); --cd: var(--amber-dim); }
.tone-orange { --c: var(--orange); --ci: var(--orange-ink); --cd: var(--orange-dim); }
.tone-red { --c: var(--red); --ci: var(--red-ink); --cd: var(--red-dim); }
.tone-indigo { --c: var(--indigo); --ci: var(--indigo); --cd: var(--indigo-dim); }
.tone-blue { --c: var(--blue); --ci: var(--blue); --cd: var(--blue-dim); }
.tone-grey { --c: var(--ghost); --ci: var(--muted); --cd: var(--soft); }

.co { min-width: 200px; max-width: 300px; }
.co b { display: block; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co .mono { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.who { min-width: 160px; max-width: 240px; }
.who b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who .none { color: var(--ghost); font-weight: 400; }

.chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--cd, var(--soft)); color: var(--ci, var(--muted)); }
.chip--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c, currentColor); }
.chip--mono { font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em; }
.chip--ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--muted); font-weight: 500; }
.chiprow { display: flex; flex-wrap: wrap; gap: 5px; }
td .chiprow { flex-wrap: nowrap; }

.reach { display: flex; gap: 5px; }
.reach i { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--soft); color: var(--ghost); }
.reach i.on { background: var(--indigo-dim); color: var(--indigo); }
.reach svg { width: 13px; height: 13px; }

.empty { padding: 40px; text-align: center; color: var(--muted); margin: 0; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin-top: 14px; padding: 0 4px; font-family: var(--mono); font-size: 10px; letter-spacing: .02em; color: var(--faint); }
.foot span { display: inline-flex; align-items: center; gap: 6px; }
.dot-ok { width: 6px; height: 6px; border-radius: 50%; background: var(--green); display: inline-block; }

/* ============================================================== inspector */

.inspector {
  position: fixed; z-index: 20; top: var(--top); right: var(--gap); bottom: var(--gap); width: var(--iw);
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(255,255,255,.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 22px; box-shadow: 0 0 0 1px var(--hair), var(--shadow-lg);
  animation: slidein 1s var(--ease) .3s both;
}
.inspector__close { display: none; position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; place-items: center; background: var(--soft); }
.inspector__close svg { width: 16px; height: 16px; }
.inspector__body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 22px 20px 28px; scrollbar-width: thin; scrollbar-color: rgba(17,17,20,.14) transparent; }
.view > * { animation: rise .5s var(--ease) both; }
.view > :nth-child(2) { animation-delay: 40ms; } .view > :nth-child(3) { animation-delay: 80ms; } .view > :nth-child(4) { animation-delay: 120ms; }
.view > :nth-child(5) { animation-delay: 160ms; } .view > :nth-child(n+6) { animation-delay: 200ms; }
.view.is-still > * { animation: none; }

.ptitle { margin: 0; font-family: var(--display); font-size: 22px; line-height: 1.18; font-weight: 600; letter-spacing: -.028em; overflow-wrap: anywhere; }
.sub { margin: 5px 0 0; font-size: 13px; color: var(--muted); }
.section { margin-top: 22px; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.section__head .micro { color: var(--muted); }
.linkbtn { font-size: 12px; font-weight: 500; color: var(--indigo); cursor: pointer; text-decoration: none; }
.linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }

.scorehead { display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: center; margin-top: 16px; }
.ring { position: relative; width: 92px; height: 92px; }
.ring svg { width: 92px; height: 92px; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: var(--soft-2); stroke-width: 7; }
.ring__val { fill: none; stroke: var(--c); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease); }
.ring__n { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; }
.ring__n b { font-family: var(--display); font-size: 30px; font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.ring__n span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-top: 3px; }
.scorehead__meta { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.scorehead__meta p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.statusrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 4px; border-radius: 13px; background: var(--soft); }
.statusrow button { height: 30px; border-radius: 9px; font-size: 11.5px; font-weight: 500; color: var(--muted); white-space: nowrap; transition: all .2s ease; }
.statusrow button:hover { color: var(--ink); }
.statusrow button.is-on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(17,17,20,.08), 0 2px 8px rgba(17,17,20,.06); }

.metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--hair); border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px var(--hair); }
.metric { background: #fff; padding: 10px 12px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.metric span { font-size: 11px; color: var(--muted); }
.metric b { font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.about { font-size: 13px; line-height: 1.6; color: var(--ink-2); margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.note { padding: 11px 13px; border-radius: 12px; background: var(--indigo-dim); font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

.people { display: flex; flex-direction: column; }
.person { display: grid; grid-template-columns: 34px 1fr auto; gap: 11px; align-items: center; padding: 9px 8px; margin: 0 -8px; border-radius: 12px; cursor: pointer; transition: background .2s ease; }
.person + .person { box-shadow: 0 -1px 0 var(--hair); }
.person:hover { background: var(--soft); box-shadow: none; }
.person.is-pick { background: var(--indigo-dim); box-shadow: none; }
.person__av { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--soft); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.person.is-pick .person__av { background: var(--indigo); color: #fff; }
.person__main { min-width: 0; }
.person__main b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person__main span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person__main a { color: var(--indigo); text-decoration: none; }
.person__end { display: flex; align-items: center; gap: 6px; }
.iconlink { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--ink-2); }
.iconlink:hover { color: var(--indigo); box-shadow: inset 0 0 0 1px var(--indigo); }
.iconlink svg { width: 13px; height: 13px; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 12.5px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; }
.kv dd a { color: var(--indigo); text-decoration: none; }
.kv dd a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kv dd.mono { font-family: var(--mono); font-size: 11.5px; }

.draft { width: 100%; min-height: 300px; resize: vertical; border: 0; outline: 0; border-radius: 14px; padding: 14px; background: var(--soft); font: inherit; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.draft:focus { box-shadow: inset 0 0 0 1.5px var(--indigo); background: #fff; }
.hint { margin: 8px 0 0; font-size: 11.5px; color: var(--faint); line-height: 1.5; }

.toasts { position: fixed; z-index: 60; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { padding: 9px 16px; border-radius: 999px; background: var(--dark); color: #fff; font-size: 13px; font-weight: 500; box-shadow: 0 12px 34px rgba(20,24,32,.3); animation: rise .4s var(--ease) both; }
.scrim { display: none; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes drop { from { opacity: 0; transform: translateY(-10px); } }
@keyframes slidein { from { opacity: 0; transform: translateX(28px); } }

/* ============================================================== smaller screens */

@media (max-width: 1500px) {
  .kpis { grid-template-columns: repeat(6, 1fr); }
  .hero { grid-template-columns: 1fr; align-items: start; }
  .col-signals { display: none; }
}
@media (max-width: 1180px) {
  .page { padding-right: 28px; }
  .inspector { transform: translateX(calc(100% + 40px)); transition: transform .5s var(--ease); animation: none; z-index: 50; width: min(var(--iw), calc(100vw - 24px)); top: 12px; right: 12px; bottom: 12px; }
  .inspector__close { display: grid; }
  body.has-open .inspector { transform: none; }
  body.has-open .scrim { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(20,24,32,.28); }
}
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; position: absolute; }
  .modes { order: 3; width: 100%; overflow-x: auto; }
  .search-trigger { width: 100%; flex: 1; }
  .topbar__right { flex: 1; }
  .brand__sep, .brand__product, .search-trigger kbd { display: none; }
  .page { padding: 150px 16px 32px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .title { font-size: 25px; }
  .col-reach { display: none; }
  .count { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ============================================================== CRM additions */

[hidden] { display: none !important; }
input, select, textarea { font: inherit; color: inherit; }
.userform { margin: 0; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; color: #fff; background: var(--dark); box-shadow: var(--shadow-sm); }
.avatar:hover { background: var(--indigo); }
.kpi { min-width: 96px; }
.kpi.is-warn b { color: var(--orange-ink); }
.toast.is-bad { background: var(--red); }

.leads td.num b { display: block; font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.leads td.num span { display: block; font-family: var(--mono); font-size: 10px; color: var(--faint); white-space: nowrap; }
.leads tbody tr.st-lost { opacity: .45; }
.leads tbody tr.st-won td.num b { color: var(--green-ink); }
.co i.mono { font-style: normal; }
.who i.q { font-style: normal; font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--amber-ink); background: var(--amber-dim); border-radius: 999px; padding: 0 5px; }
.next { display: inline-flex; flex-direction: column; font-size: 12px; color: var(--muted); max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next b { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink); }
.next.is-due b { color: var(--orange-ink); }
.next.none { color: var(--ghost); }
.more { display: block; width: 100%; padding: 13px; border-top: 1px solid var(--hair); font-size: 12.5px; font-weight: 600; color: var(--indigo); }
.more:hover { background: var(--soft); }
.mono { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }

/* pipeline */
.board { display: grid; grid-template-columns: repeat(8, minmax(190px, 1fr)); gap: 10px; margin-top: 26px; overflow-x: auto; padding-bottom: 8px; align-items: start; animation: rise .6s var(--ease) both; }
.col { border-radius: 16px; background: var(--soft); padding: 10px; min-height: 180px; transition: box-shadow .2s ease, background .2s ease; }
.col.is-over { background: var(--indigo-dim); box-shadow: inset 0 0 0 1.5px var(--indigo); }
.col__head { display: flex; justify-content: space-between; align-items: center; }
.col__sum { margin: 10px 2px 10px; }
.col__sum b { display: block; font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.col__sum span { font-size: 11.5px; color: var(--muted); }
.col__cards { display: flex; flex-direction: column; gap: 6px; }
.col__more { margin: 6px 2px 2px; font-size: 11.5px; color: var(--faint); text-align: center; }
.kcard { border-radius: 12px; background: #fff; padding: 10px 11px; box-shadow: 0 0 0 1px var(--hair), 0 1px 2px rgba(17,17,20,.04); cursor: grab; transition: box-shadow .2s ease, transform .2s var(--ease); }
.kcard:hover { box-shadow: 0 0 0 1px var(--hair-2), var(--shadow-sm); transform: translateY(-1px); }
.kcard.is-sel { box-shadow: 0 0 0 1.5px var(--indigo), 0 6px 18px rgba(91,79,227,.14); }
.kcard.is-drag { opacity: .4; }
.kcard.is-due { box-shadow: 0 0 0 1px rgba(224,85,43,.4); }
.kcard > b { display: block; font-size: 13px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kcard > span { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kcard__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.kcard .score-chip { height: 21px; font-size: 11px; }

/* value model page */
.modelgrid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 16px; margin-top: 26px; align-items: start; animation: rise .6s var(--ease) both; }
.modelform { display: flex; flex-direction: column; gap: 12px; }
.card { border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--hair); padding: 16px 18px; }
.card h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; letter-spacing: -.015em; }
.mrow { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 7px 0; border-top: 1px solid var(--hair); font-size: 13px; color: var(--ink-2); }
.mrow:first-of-type { border-top: 0; }
.mrow .chg { font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--indigo); background: var(--indigo-dim); border-radius: 999px; padding: 1px 6px; }
.minput { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 9px; border-radius: 9px; background: var(--soft); width: 122px; }
.minput:focus-within { background: #fff; box-shadow: inset 0 0 0 1.5px var(--indigo); }
.minput i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--faint); min-width: 8px; }
.minput input { width: 100%; min-width: 0; border: 0; outline: 0; background: none; text-align: right; font-family: var(--mono); font-size: 12px; font-weight: 600; -moz-appearance: textfield; appearance: textfield; }
.minput input::-webkit-outer-spin-button, .minput input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.modelpreview { position: sticky; top: 90px; }
.pv { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair); border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px var(--hair); margin-top: 10px; }
.pv--3 { grid-template-columns: 1fr 1fr 1fr; }
.pv div { background: #fff; padding: 11px 13px; }
.pv b { display: block; font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -.035em; }
.pv span { font-size: 11.5px; color: var(--muted); }
.pv em { font-style: normal; font-family: var(--mono); font-size: 10.5px; font-weight: 600; margin-left: 4px; }
.pv em.up { color: var(--green-ink); } .pv em.down { color: var(--orange-ink); }
.pv__ex { margin: 18px 0 10px; }

/* inspector: value */
.worth { margin-top: 16px; border-radius: 18px; padding: 15px 16px 13px; background: var(--dark); color: #fff; position: relative; overflow: hidden; }
.worth::before { content: ''; position: absolute; inset: -40% -20% auto auto; width: 260px; height: 260px; background: radial-gradient(circle, rgba(111,99,239,.38), transparent 62%); pointer-events: none; }
.worth__grid { position: relative; display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: 8px; }
.worth__grid div { display: flex; flex-direction: column; gap: 1px; }
.worth__grid span { font-size: 11.5px; color: rgba(255,255,255,.6); }
.worth__grid b { font-family: var(--display); font-size: 25px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.worth__grid sup { font-size: 13px; color: #b9b2ff; }
.worth__note { position: relative; margin: 10px 0 0; font-size: 11.5px; color: rgba(255,255,255,.6); }
.fold { margin-top: 10px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--hair-2); padding: 0 14px; }
.fold summary { cursor: pointer; padding: 11px 0; font-size: 12.5px; font-weight: 600; color: var(--indigo); list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: '+'; float: right; font-family: var(--mono); color: var(--faint); }
.fold[open] summary::after { content: '-'; }
.fold[open] { padding-bottom: 14px; }
.fold__h { display: block; margin: 16px 0 4px; color: var(--muted); }
.calc dt { color: var(--muted); } .calc dd { color: var(--ink); font-weight: 600; }
.calc dt:last-of-type, .calc dd:last-of-type { padding-top: 8px; border-top: 1px solid var(--hair); color: var(--ink); font-weight: 600; }
.why { margin-top: 10px; }
.chip.is-off { opacity: .55; text-decoration: line-through; }

.stagegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 13px; background: var(--soft); }
.stagegrid button { height: 30px; border-radius: 9px; font-size: 11.5px; font-weight: 500; color: var(--muted); white-space: nowrap; transition: all .2s ease; }
.stagegrid button:hover { color: var(--ink); }
.stagegrid button.is-on { background: #fff; color: var(--ci, var(--ink)); font-weight: 600; box-shadow: 0 1px 2px rgba(17,17,20,.08), 0 2px 8px rgba(17,17,20,.06); }

.inline { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; flex-wrap: wrap; }
.section > .inline { margin-top: 0; }
.inline label, .stack label, .field { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--muted); min-width: 0; }
.inline label.grow { flex: 1 1 140px; }
.inline input, .stack input, .field input, .noteform textarea, .noteform select { height: 36px; border: 0; outline: 0; border-radius: 10px; padding: 0 11px; background: var(--soft); font-size: 13px; color: var(--ink); width: 100%; min-width: 0; }
.inline input[type=number] { width: 120px; font-family: var(--mono); font-size: 12px; }
.inline input[type=date] { width: 138px; font-family: var(--mono); font-size: 11.5px; }
.inline input:focus, .stack input:focus, .field input:focus, .noteform textarea:focus, .noteform select:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--indigo); }
.inline .btn, .noteform .btn { height: 36px; padding: 0 13px; }
.stack { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; padding: 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--hair-2); }
.noteform textarea { height: 76px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.noteform .btnrow { margin-top: 8px; }
.noteform select { flex: 0 0 150px; }
.btnrow .btn { padding: 0 10px; }

.person { grid-template-columns: 34px 1fr auto; cursor: default; }
.person.is-wrong { opacity: .45; }
.person.is-wrong .person__main b { text-decoration: line-through; }
.person__end { gap: 4px; }
button.iconlink { width: 26px; height: 26px; color: var(--ghost); }
a.iconlink { width: 26px; height: 26px; }
button.iconlink.is-yes { color: #fff; background: var(--green); box-shadow: none; }
button.iconlink.is-no { color: #fff; background: var(--red); box-shadow: none; }
button.iconlink.is-star { color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }

.acts { margin-top: 14px; display: flex; flex-direction: column; }
.act { display: grid; grid-template-columns: 10px 1fr; gap: 12px; padding: 8px 0; }
.act > i { width: 8px; height: 8px; border-radius: 50%; background: var(--ghost); margin-top: 6px; box-shadow: 0 0 0 3px var(--soft); }
.act--note > i, .act--call > i, .act--meeting > i { background: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-dim); }
.act--email > i, .act--linkedin > i { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-dim); }
.act--stage > i { background: var(--blue); box-shadow: 0 0 0 3px var(--blue-dim); }
.act b { font-size: 12.5px; font-weight: 600; margin-right: 8px; }
.act p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; max-height: 132px; overflow-y: auto; }

/* sign in */
body.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--soft); }
body.login::before { display: none; }
.login__card { width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--hair), var(--shadow-lg); }
.login__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.login__error { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--red-dim); color: var(--red-ink); font-size: 12.5px; font-weight: 500; }
.field input { height: 42px; }
.login__card .btn { height: 44px; margin-top: 4px; }

@media (max-width: 1500px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1180px) { .modelgrid { grid-template-columns: 1fr; } .modelpreview { position: static; } }
@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .board { grid-template-columns: repeat(8, 220px); }
  #exportBtn { display: none; }
  .mrow { grid-template-columns: 1fr; gap: 6px; }
}

/* ============================================================== Active and Status views */

body[data-view="active"] .inspector, body[data-view="status"] .inspector, body[data-view="inbox"] .inspector { display: none; }
body[data-view="active"] .page, body[data-view="status"] .page, body[data-view="inbox"] .page { padding-right: 28px; }
.modes { overflow-x: auto; scrollbar-width: none; }

.focus { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr); gap: 16px; margin-top: 26px; align-items: start; animation: rise .6s var(--ease) both; }
.focus__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.focus__name { margin: 14px 0 0; font-family: var(--display); font-size: 34px; line-height: 1.1; font-weight: 600; letter-spacing: -.035em; overflow-wrap: anywhere; }
.focus__main { padding: 22px 24px 24px; }
.focus__side { display: flex; flex-direction: column; gap: 16px; }
.focus__side .draft { min-height: 340px; }
.focus__empty { margin-top: 26px; padding: 40px; text-align: center; }
.focus .chiprow a.chip, .focus .chiprow button.chip { text-decoration: none; cursor: pointer; height: 28px; padding: 0 12px; }
.focus .btnrow .btn { text-decoration: none; }
.uprow { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; width: 100%; padding: 9px 8px; margin: 0 -8px; width: calc(100% + 16px); border-radius: 12px; text-align: left; transition: background .2s ease; }
.uprow + .uprow { box-shadow: 0 -1px 0 var(--hair); }
.uprow:hover { background: var(--soft); box-shadow: none; }
.uprow__main { min-width: 0; }
.uprow__main b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uprow__main span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nowstrip { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; animation: rise .6s var(--ease) both; }
.nowlist { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nowlist li { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: baseline; font-size: 13.5px; }
.nowlist li::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--indigo); transform: rotate(45deg); align-self: center; margin-left: 3px; }
.nowlist b { font-weight: 600; letter-spacing: -.01em; }
.nowlist span { font-family: var(--mono); font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.track { margin-top: 26px; animation: rise .6s var(--ease) both; }
.track__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.track__head h3 { margin: 0; font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -.025em; }
.track__head progress { flex: 1; max-width: 220px; height: 6px; border: 0; border-radius: 99px; overflow: hidden; background: var(--soft-2); appearance: none; -webkit-appearance: none; }
.track__head progress::-webkit-progress-bar { background: var(--soft-2); }
.track__head progress::-webkit-progress-value { background: var(--green); border-radius: 99px; }
.track__head progress::-moz-progress-bar { background: var(--green); border-radius: 99px; }
.track__head .linkbtn { margin-left: auto; }
.track__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; }
.tcol { border-radius: 16px; background: var(--soft); padding: 10px; display: flex; flex-direction: column; gap: 6px; min-height: 86px; }
.tcol__h { margin: 0 0 4px; }
.tcol__none { margin: 4px 4px; color: var(--ghost); font-size: 12px; }
.rmitem { display: block; width: 100%; text-align: left; border-radius: 12px; background: #fff; padding: 10px 12px; box-shadow: 0 0 0 1px var(--hair), 0 1px 2px rgba(17,17,20,.04); transition: box-shadow .2s ease, transform .2s var(--ease); }
.rmitem:hover { box-shadow: 0 0 0 1px var(--indigo), var(--shadow-sm); transform: translateY(-1px); }
.rmitem b { display: block; font-size: 13px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.rmitem span { display: block; font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 3px; }
.rmitem i { display: inline-block; font-style: normal; margin-top: 6px; }
.rmitem.rm-done b { color: var(--muted); }
.rmitem.rm-done b::before { content: '\2713  '; color: var(--green-ink); }
.rmform { background: #fff; margin-top: 0; }
.track > .rmform, .rm-add + .rmform { margin-bottom: 10px; max-width: 640px; }
.rmform select { height: 36px; border: 0; outline: 0; border-radius: 10px; padding: 0 9px; background: var(--soft); font-size: 13px; }
.rmform .inline { margin-top: 0; }
.rm-del { color: var(--red-ink); }
.rm-add { margin-top: 26px; max-width: 320px; }

@media (max-width: 1180px) { .focus { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .nowstrip { grid-template-columns: 1fr; }
  .track__cols { grid-template-columns: 1fr; }
  .focus__name { font-size: 26px; }
  .focus__main { padding: 18px; }
  .track__head { flex-wrap: wrap; }
}

/* ---- sign-in: identity file step ---- */
.login__steps { display: flex; gap: 14px; margin: 0 0 4px; }
.login__steps span.is-on { color: var(--indigo); }
.login__steps span.is-done { color: var(--green-ink); }
.login__hint { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.login__hint a { color: var(--indigo); font-weight: 600; text-underline-offset: 3px; }
.field input.login__file { padding: 9px 10px; font-size: 12.5px; height: auto; cursor: pointer; }
.login__file::file-selector-button { font: inherit; font-weight: 600; font-size: 12px; margin-right: 10px; padding: 6px 12px; border: 0; border-radius: 8px; background: var(--ink); color: #fff; cursor: pointer; }

/* ============================================================== Inbox */

body[data-view="inbox"] .hero, body[data-view="inbox"] .foot, body[data-view="inbox"] #exportBtn { display: none; }
body[data-view="inbox"] .page { padding-bottom: 20px; max-width: none; }
.modes button em:empty { display: none; }
#inboxBadge { background: var(--indigo); color: #fff; opacity: 1; padding: 1px 6px; border-radius: 999px; }

.mail { display: grid; grid-template-columns: 216px minmax(300px, 400px) minmax(0, 1fr); gap: 16px; height: calc(100vh - var(--top) - 44px); min-height: 460px; animation: rise .6s var(--ease) both; }
.mail__rail, .mail__list, .mail__read { background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px var(--hair), var(--shadow-sm); min-height: 0; min-width: 0; }
.mail__rail { padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.mail__compose { width: 100%; height: 42px; }
.mbox { display: flex; flex-direction: column; gap: 2px; }
.mbox__name { margin: 0 0 4px; padding: 0 10px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .04em; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbox__err { margin: 0 0 4px; padding: 8px 10px; border-radius: 10px; background: var(--red-dim); color: var(--red-ink); font-size: 11.5px; line-height: 1.45; }
.mbox .hint { padding: 0 10px; }
.mfolder { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 34px; padding: 0 10px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--muted); text-align: left; transition: background .15s ease, color .15s ease; }
.mfolder span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mfolder:hover { background: var(--soft); color: var(--ink); }
.mfolder.is-on { background: var(--indigo-dim); color: var(--indigo); font-weight: 600; }
.mfolder em { font-style: normal; font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: #fff; background: var(--indigo); padding: 1px 7px; border-radius: 999px; }
.msend { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--soft); font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; }
.msend--bad { background: var(--red-dim); color: var(--red-ink); }
.msend__acts { display: flex; gap: 12px; margin-top: 4px; }

.mail__list { display: flex; flex-direction: column; overflow: hidden; }
.mail__head { padding: 16px 18px 12px; border-bottom: 1px solid var(--hair); }
.mail__title { margin: 0 0 2px; font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -.025em; }
.mail__head .micro { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail__rows { flex: 1; overflow-y: auto; }
.mail__rows .more { width: 100%; }
.mail__empty { margin: 0; padding: 32px 18px; font-size: 13px; color: var(--faint); text-align: center; }
.mrow { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--hair); transition: background .15s ease; }
.mrow:hover { background: var(--soft); }
.mrow.is-sel { background: var(--indigo-dim); box-shadow: inset 3px 0 0 var(--indigo); }
.mrow__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mrow__top b { font-size: 13px; font-weight: 500; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow__top .mono { font-family: var(--mono); font-size: 10.5px; color: var(--faint); flex: none; }
.mrow__subj { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow__re { font-style: normal; font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--green-ink); background: var(--green-dim); padding: 1px 5px; border-radius: 5px; margin-right: 6px; }
.mrow__snip { font-size: 12px; line-height: 1.45; color: var(--faint); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.mrow__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.mrow.is-unread .mrow__top b, .mrow.is-unread .mrow__subj { font-weight: 700; color: var(--ink); }
.mrow.is-unread .mrow__top b::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--indigo); margin-right: 7px; vertical-align: 1px; }

.mail__read { overflow: hidden; display: flex; flex-direction: column; }
.mail__blank { margin: auto; padding: 32px; max-width: 420px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mail__blank .btn { margin-top: 14px; }
.mread, .mcomp { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.mread__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--hair); }
.mread__bar .btn { height: 34px; padding: 0 13px; }
.mread__bar .mail__title { margin: 0 0 0 4px; }
.mread__gap { flex: 1; }
.mread__back { display: none; }
.mread__del:hover { color: var(--red-ink); box-shadow: inset 0 0 0 1px var(--red); }
.mread__head { padding: 18px 22px 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; border-bottom: 1px solid var(--hair); }
.mread__head .kv { margin: 0; width: 100%; }
.mread__head .kv dd { overflow-wrap: anywhere; }
.mread__head button.chip { cursor: pointer; }
.mread__subj { margin: 0; font-family: var(--display); font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -.025em; overflow-wrap: anywhere; }
.mread__files { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 22px; border-bottom: 1px solid var(--hair); }
.mfile { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 34px; padding: 0 12px; border-radius: 10px; background: var(--soft); font-size: 12.5px; font-weight: 500; text-decoration: none; }
.mfile:hover { background: var(--soft-2); }
.mfile svg { width: 14px; height: 14px; flex: none; color: var(--faint); }
.mfile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mfile em { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--faint); flex: none; }
.mread__note { margin: 0; padding: 8px 22px; font-size: 11.5px; color: var(--faint); background: var(--soft); }
.mread__frame { flex: 1; width: 100%; min-height: 0; border: 0; background: #fff; }
.mread__text { flex: 1; margin: 0; padding: 20px 22px; overflow: auto; font-family: var(--body); font-size: 13.5px; line-height: 1.65; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.mcomp__row { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--hair); font-size: 12px; color: var(--faint); }
.mcomp__row input, .mcomp__row select { height: 42px; border: 0; outline: 0; background: none; font: inherit; font-size: 13.5px; color: var(--ink); min-width: 0; width: 100%; }
.mcomp__row:focus-within { box-shadow: inset 3px 0 0 var(--indigo); }
.mcomp__body { flex: 1; min-height: 160px; border: 0; outline: 0; resize: none; padding: 18px 22px; font: inherit; font-size: 13.5px; line-height: 1.65; color: var(--ink); }
.mcomp .hint { margin: 0; padding: 10px 22px 14px; border-top: 1px solid var(--hair); }
.act--reply > i { background: var(--green); box-shadow: 0 0 0 3px var(--green-dim); }

@media (max-width: 1100px) {
  .mail { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .mail__rail { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .mail__compose { width: auto; }
  .mbox { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .mbox__name { width: 100%; }
  .mail__list { max-height: none; }
  .mail__read { display: none; min-height: 70vh; }
  .mail.has-msg .mail__read { display: flex; }
  .mail.has-msg .mail__list, .mail.has-msg .mail__rail { display: none; }
  .mread__back { display: inline-flex; }
  .mread__frame { min-height: 60vh; }
}