:root {
  --ink:#183b36;
  --muted:#64736f;
  --green:#164d43;
  --line:#dce4df;
  --bg:#f4f6f2;
  --orange:#bd6734
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.5 system-ui,-apple-system,Segoe UI,sans-serif
}
a {
  color:var(--green);
  text-underline-offset:3px
}
button,input,select {
  font:inherit
}
button,.button {
  border:1px solid var(--green);
  border-radius:8px;
  background:var(--green);
  color:#fff;
  padding:11px 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  cursor:pointer;
  font-weight:650;
  min-height:44px
}
.secondary {
  background:white;
  color:var(--green)
}
button:hover,.button:hover {
  filter:brightness(.92)
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #d68b42;
  outline-offset:3px
}
.skip {
  position:absolute;
  left:12px;
  top:-100px;
  background:#fff;
  padding:10px;
  z-index:10
}
.skip:focus {
  top:10px
}
.shell {
  display:grid;
  grid-template-columns:236px minmax(0,1fr);
  min-height:100vh
}
.sidebar {
  background:#fff;
  border-right:1px solid var(--line);
  padding:30px 20px;
  display:flex;
  flex-direction:column;
  gap:23px
}
.platform {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  line-height:1.15;
  font-size:18px
}
.brand-mark {
  width:43px;
  height:43px;
  background:var(--green);
  color:white;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:750;
  font-size:18px;
  letter-spacing:-1px
}
.business {
  padding:17px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.business strong {
  display:block;
  margin-top:5px;
  overflow-wrap:anywhere
}
.eyebrow {
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.12em;
  font-weight:750;
  color:var(--muted);
  margin:0 0 7px
}
.sidebar nav {
  display:flex;
  flex-direction:column;
  gap:4px
}
.sidebar nav a {
  color:#4d615b;
  padding:10px;
  border-radius:7px;
  text-decoration:none;
  font-size:13px
}
.sidebar nav a[aria-current] {
  background:#e7f0e9;
  color:var(--green);
  font-weight:750;
  border-left:3px solid var(--green)
}
.nav-note {
  font-size:9px;
  float:right;
  margin-top:3px;
  color:#6f7773
}
.sidebar-note {
  margin-top:auto;
  font-size:12px;
  color:var(--muted)
}
.sidebar-note span {
  font-size:10px
}
.logout {
  background:#fff;
  color:var(--green);
  width:100%;
  border-color:var(--line)
}
main {
  padding:35px 38px;
  min-width:0;
  max-width:1550px;
  width:100%
}
.page-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:25px
}
h1 {
  font-size:30px;
  line-height:1.15;
  letter-spacing:-.025em;
  margin:0 0 10px
}
h2 {
  font-size:17px;
  line-height:1.3;
  margin:0 0 16px
}
h3 {
  font-size:16px
}
p {
  margin:0 0 16px
}
.muted {
  color:var(--muted)
}
.small {
  font-size:12px
}
.badge,.tag {
  background:#ecede2;
  border:1px solid #dbe0cb;
  color:#5b623f;
  border-radius:20px;
  padding:5px 10px;
  font-size:10px;
  white-space:nowrap
}
.date-bar {
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:17px 20px;
  margin-bottom:24px
}
.date-bar>div {
  margin-right:auto
}
.date-bar label {
  font-weight:700;
  margin:0
}
.date-bar span {
  display:block;
  margin-top:3px
}
.date-bar input {
  width:auto
}
.metrics {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin-bottom:10px
}
.metrics article {
  background:#fff;
  border:1px solid var(--line);
  padding:18px;
  border-radius:12px
}
.metrics article>span {
  font-size:12px;
  color:var(--muted)
}
.metrics strong {
  display:block;
  font-size:clamp(19px,1.6vw,26px);
  letter-spacing:-.03em;
  margin:11px 0 5px;
  overflow-wrap:anywhere
}
.metrics small {
  font-size:10px;
  color:var(--muted)
}
.metrics .net {
  background:var(--green);
  color:#fff;
  border-color:var(--green)
}
.metrics .net span,.metrics .net small {
  color:#d0e2d8
}
.quick-actions {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:25px 0
}
.quick-actions .button {
  font-size:12px;
  padding:9px 13px
}
.planned-action {
  display:inline-flex;
  gap:6px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:7px;
  padding:9px 11px;
  font-size:11px;
  color:#64736f
}
.planned-action small {
  font-size:8px;
  background:#e4e9e1;
  border-radius:3px;
  padding:2px 4px
}
.panel-grid {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:18px
}
.panel {
  background:#fff;
  border:1px solid var(--line);
  padding:24px;
  border-radius:12px;
  min-width:0
}
.panel-heading {
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px
}
.panel-heading h2 {
  margin:0
}
.panel-heading+.panel {
  margin-top:18px
}
.empty {
  padding:20px 10px 25px;
  text-align:center
}
.empty-symbol {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#eef2e9;
  font-size:25px;
  color:#6c876c
}
.empty h3 {
  margin:13px 0 6px
}
.empty p,.empty-copy {
  color:var(--muted);
  font-size:13px
}
.empty a {
  font-size:12px;
  font-weight:650
}
.empty-copy {
  padding:35px 0
}
.planned .tag {
  float:right
}
.planned h2 {
  padding-right:62px
}
.planned p {
  font-size:13px;
  margin-bottom:0
}
.story-row,.record {
  display:flex;
  gap:12px;
  align-items:center;
  padding:15px 0;
  border-bottom:1px solid var(--line)
}
.story-row div,.record div {
  flex:1;
  min-width:0;
  overflow-wrap:anywhere
}
.story-row p,.record p {
  margin:3px 0 0
}
.story-row b,.record b {
  font-size:13px
}
.event-dot {
  width:8px;
  height:8px;
  background:#bd6734;
  border-radius:50%;
  flex-shrink:0
}
.breakdown-row {
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--line);
  padding:13px 0;
  font-size:13px
}
footer {
  font-size:11px;
  color:var(--muted);
  margin-top:32px
}
label {
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  font-weight:650;
  margin-bottom:16px
}
input,select {
  width:100%;
  padding:11px 12px;
  border:1px solid #bdcac2;
  border-radius:6px;
  background:#fff;
  color:var(--ink);
  min-height:44px
}
input[type=hidden] {
  display:none
}
.form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 20px
}
.wide {
  grid-column:1/-1
}
.capture-form {
  margin:22px 0;
  scroll-margin:20px
}
fieldset {
  border:1px solid var(--line);
  border-radius:8px;
  padding:18px;
  margin:8px 0 22px;
  min-width:0
}
legend {
  font-weight:650;
  font-size:13px;
  padding:0 6px
}
.catalog-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) 110px 160px;
  gap:20px;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding:12px 0
}
.catalog-row small {
  display:block;
  color:var(--muted);
  font-size:10px
}
.catalog-row label {
  margin:0
}
.notice,.errors {
  padding:16px 20px;
  border-radius:8px;
  margin-bottom:20px;
  font-size:13px
}
.notice {
  background:#e5f1e4;
  border:1px solid #b4d2b2
}
.errors {
  background:#fff0e9;
  color:#843b20;
  border:1px solid #ecc1ab
}
.errors ul {
  margin-bottom:0
}
.login-wrap {
  max-width:480px;
  margin:7vh auto;
  padding:28px
}
.login-wrap .brand-mark {
  margin-bottom:24px
}
.login-wrap h1 {
  font-size:35px
}
.login-wrap .panel {
  margin:25px 0
}
.login-wrap button {
  width:100%
}
dl {
  display:grid;
  grid-template-columns:130px 1fr;
  gap:15px;
  font-size:14px
}
dt {
  color:var(--muted)
}
dd {
  margin:0;
  overflow-wrap:anywhere
}
@media(max-width:1150px) {
  main {
    padding:26px 22px
  }
  .shell {
    grid-template-columns:205px minmax(0,1fr)
  }
  .sidebar {
    padding:25px 14px
  }
  .metrics {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .date-bar {
    flex-wrap:wrap
  }
  .date-bar>div {
    flex-basis:100%
  }
}
@media(max-width:750px) {
  .shell {
    display:block
  }
  .sidebar {
    padding:18px;
    border-right:0;
    border-bottom:1px solid var(--line);
    gap:14px
  }
  .platform {
    font-size:16px
  }
  .platform br {
    display:none
  }
  .platform strong {
    margin-left:5px
  }
  .business {
    padding:0;
    border:0;
    position:absolute;
    right:18px;
    top:23px;
    max-width:48%;
    text-align:right
  }
  .business .eyebrow {
    font-size:8px
  }
  .business strong {
    font-size:12px
  }
  .sidebar nav {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:5px
  }
  .sidebar nav a {
    font-size:11px;
    padding:7px 9px;
    border:1px solid var(--line)
  }
  .nav-note {
    float:none;
    margin-left:5px;
    font-size:8px
  }
  .sidebar-note {
    display:none
  }
  .sidebar form {
    align-self:flex-end
  }
  .logout {
    padding:4px 12px;
    font-size:11px;
    min-height:36px
  }
  main {
    padding:24px 16px
  }
  .page-header {
    margin-bottom:20px
  }
  h1 {
    font-size:27px
  }
  .page-header .muted {
    font-size:12px
  }
  .badge {
    font-size:8px
  }
  .date-bar {
    padding:14px;
    gap:8px
  }
  .date-bar input {
    flex:1;
    min-width:0
  }
  .date-bar button,.date-bar .button {
    font-size:12px;
    padding:10px
  }
  .metrics {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .metrics .net {
    grid-column:1/-1;
    grid-row:2
  }
  .metrics article {
    padding:16px
  }
  .metrics strong {
    font-size:23px
  }
  .panel-grid {
    grid-template-columns:1fr
  }
  .panel {
    padding:20px
  }
  .quick-actions {
    gap:7px
  }
  .form-grid {
    grid-template-columns:1fr
  }
  .catalog-row {
    grid-template-columns:1fr 1fr;
    gap:10px
  }
  .catalog-row>span {
    grid-column:1/-1
  }
  .catalog-row label {
    font-size:11px
  }
  .panel-heading {
    flex-wrap:wrap
  }
  .record,.story-row {
    align-items:flex-start
  }
  .record b,.story-row b {
    font-size:12px;
    white-space:nowrap
  }
  .login-wrap {
    margin-top:3vh
  }
  footer {
    font-size:10px
  }
}

/* Owner workspace visual system */
:root {
  --ink:#122d2b;
  --muted:#60736e;
  --green:#075c43;
  --green-dark:#064a37;
  --green-soft:#eaf4ee;
  --line:#dce8e2;
  --bg:#f7faf8;
  --orange:#ef7d21;
  --shadow:0 8px 24px rgba(12,64,48,.07);
}
body { background:var(--bg); color:var(--ink); }
a { color:var(--green); }
.shell { grid-template-columns:260px minmax(0,1fr); }
.sidebar { padding:26px 18px 20px; border-right:1px solid var(--line); box-shadow:4px 0 18px rgba(12,64,48,.03); }
.tenant-brand { gap:12px; padding:4px 10px 16px; }
.tenant-brand-copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
.tenant-brand-copy strong { font-size:17px; line-height:1.2; overflow-wrap:anywhere; }
.tenant-brand-copy small { font-size:10px; color:var(--muted); }
.tenant-logo { width:44px; height:44px; border-radius:13px; object-fit:cover; border:1px solid var(--line); }
.brand-mark { background:var(--green); border-radius:14px; }
.business { padding:15px 10px; }
.sidebar nav { gap:5px; }
.sidebar nav a { display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:10px; color:#49645c; font-size:13px; transition:background .15s ease,color .15s ease; }
.sidebar nav a:hover { background:var(--green-soft); color:var(--green); }
.sidebar nav a[aria-current] { background:var(--green); color:#fff; border-left:0; box-shadow:0 5px 12px rgba(7,92,67,.18); }
.nav-icon { width:20px; text-align:center; font-size:16px; font-weight:700; opacity:.86; }
.sidebar nav a[aria-current] .nav-icon { color:#fff; opacity:1; }
main { max-width:1600px; padding:34px 42px 42px; }
.page-header { margin-bottom:22px; }
.page-header h1 { font-size:32px; }
.badge { background:var(--green-soft); border-color:#cfe5d8; color:var(--green); }
.date-bar, .panel, .metrics article { border-color:var(--line); border-radius:16px; box-shadow:var(--shadow); }
.date-bar { padding:15px 18px; }
button,.button { background:var(--green); border-color:var(--green); border-radius:10px; }
button:hover,.button:hover { filter:none; background:var(--green-dark); }
.secondary { color:var(--green); background:#fff; }
.secondary:hover { background:var(--green-soft); }
.dashboard-hero { display:flex; justify-content:space-between; align-items:center; min-height:132px; margin-bottom:16px; padding:24px 30px; border-radius:18px; background:linear-gradient(110deg,#e9f4ed 0%,#f5f8f5 72%); overflow:hidden; }
.dashboard-hero h2 { font-size:28px; margin:0 0 6px; letter-spacing:-.03em; }
.dashboard-hero p:last-child { margin:0; color:var(--muted); }
.hero-mark { color:var(--orange); font-size:88px; line-height:1; transform:rotate(14deg); opacity:.8; margin-right:20px; }
.metrics { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:13px; }
.metrics article { padding:18px 19px; background:#fff; }
.metrics article:nth-child(4n+1), .metrics article:nth-child(4n+2), .metrics article:nth-child(4n+4) { background:#fbfdfb; }
.metrics .net { background:var(--green); }
.metrics strong { font-size:25px; }
.quick-actions { margin:22px 0 26px; gap:10px; }
.quick-actions .button { box-shadow:0 3px 8px rgba(7,92,67,.12); }
.panel { padding:22px; }
.panel-grid { gap:18px; }
.panel-heading a { color:var(--orange); font-weight:700; }
.event-dot { background:var(--orange); }
.notice { border-radius:12px; }
input,select,textarea { border-color:#cbdad2; border-radius:9px; }
input:focus,select:focus,textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(7,92,67,.12); }
fieldset { border-color:var(--line); border-radius:12px; }
@media(max-width:1150px) { main { padding:26px 24px; } .shell { grid-template-columns:225px minmax(0,1fr); } .metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:750px) { main { padding:20px 15px 30px; } .sidebar { box-shadow:none; } .tenant-brand { padding-bottom:7px; } .dashboard-hero { min-height:118px; padding:19px; } .dashboard-hero h2 { font-size:23px; } .hero-mark { font-size:58px; margin-right:0; } .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .metrics .net { grid-column:auto; grid-row:auto; } .metrics article { padding:14px; } }
.dashboard-hero { position:relative; isolation:isolate; }
.dashboard-hero::after { content:""; position:absolute; right:0; bottom:0; width:min(58%,620px); height:100%; background:url('/images/dashboard-silhouette.svg') right bottom / contain no-repeat; pointer-events:none; z-index:-1; }
.dashboard-hero > div, .dashboard-hero .hero-mark { position:relative; z-index:1; }
@media(max-width:750px) { .dashboard-hero::after { width:82%; opacity:.75; } }
