:root {
  color-scheme: light;
  --ink: #14211d;
  --muted: #66736e;
  --line: #dce4e0;
  --canvas: #f3f6f4;
  --surface: #ffffff;
  --forest: #142923;
  --green: #2f6f5e;
  --mint: #dcece6;
  --gold: #d5a73b;
  --red: #b4232f;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); }
.toast-region { position: fixed; inset: 2.2rem 1rem auto auto; z-index: 200; display: grid; gap: .5rem; width: min(24rem, calc(100vw - 2rem)); }
.toast { padding: .8rem 1rem; border: 1px solid #b9d9cc; border-radius: .7rem; color: #174d3e; background: #e4f4ee; box-shadow: 0 12px 35px #14292324; font-size: .85rem; font-weight: 700; }
a { color: inherit; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.environment-bar { position: fixed; inset: 0 0 auto; z-index: 100; height: 24px; display: grid; place-items: center; color: #fff; background: #b91c1c; font-size: .72rem; font-weight: 900; letter-spacing: .18em; }
body:not([data-environment="production"]) .app-shell, body:not([data-environment="production"]) .login-shell { padding-top: 24px; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 1.5rem 1rem 1rem; color: #eaf2ef; background: var(--forest); }
body:not([data-environment="production"]) .sidebar { top: 24px; height: calc(100vh - 24px); }
.brand { display: flex; align-items: center; gap: .8rem; font-weight: 750; letter-spacing: -.02em; }
.brand-mark { display: grid; width: 2.55rem; height: 2.55rem; place-items: center; border: 1px solid #618077; border-radius: .7rem; color: #fff; background: #24483e; font-weight: 900; letter-spacing: -.06em; }
.sidebar nav { display: grid; gap: .25rem; margin-top: 2.5rem; }
.sidebar nav a { display: flex; align-items: center; justify-content: space-between; padding: .72rem .8rem; border-radius: .65rem; color: #aec0ba; text-decoration: none; font-size: .92rem; }
.sidebar nav a:hover, .sidebar nav a.active { color: #fff; background: #ffffff14; }
.sidebar nav kbd { color: #779088; background: none; }
.sidebar-groups { display: grid; gap: .72rem; margin: 2rem .8rem; color: #93a8a1; font-size: .82rem; }
.sidebar-groups p { margin: 0 0 .15rem; color: #d9e5e1; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.user-card { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; margin-top: auto; padding: .8rem; border-top: 1px solid #ffffff18; }
.user-card strong, .user-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card strong { font-size: .83rem; }.user-card small { margin-top: .15rem; color: #8ca098; font-size: .72rem; }
.avatar { display: inline-grid; width: 2.35rem; height: 2.35rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: .78rem; font-weight: 800; }
.icon-button, .menu-button { border: 0; color: inherit; background: transparent; cursor: pointer; }
.workspace { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; min-height: 72px; padding: .8rem clamp(1rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line); background: #f3f6f4e8; backdrop-filter: blur(14px); }
body:not([data-environment="production"]) .topbar { top: 24px; }
.menu-button { display: none; font-size: 1.4rem; }
.global-search { display: flex; width: min(34rem, 100%); align-items: center; gap: .65rem; padding: .65rem .85rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--surface); }
.global-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; }
.global-search kbd { color: var(--muted); font-size: .72rem; }
.topbar > .primary-button { margin-left: auto; }
.content { max-width: 1500px; margin: 0 auto; padding: clamp(1.4rem, 4vw, 3rem); }
.page-heading, .customer-header { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.page-heading h1, .customer-header h1 { margin: .15rem 0 .4rem; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -.055em; }
.page-heading p, .customer-header p { margin: 0; color: var(--muted); }
.eyebrow { margin: 0; color: var(--green) !important; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.primary-button, .secondary-button, .text-button { display: inline-flex; align-items: center; justify-content: center; border-radius: .65rem; padding: .7rem 1rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.primary-button { border: 1px solid var(--forest); color: #fff; background: var(--forest); }.primary-button:hover { background: #27463e; }
.secondary-button { border: 1px solid var(--line); color: var(--ink); background: var(--surface); }.secondary-button:hover { border-color: #aebdb7; }
.text-button { border: 0; padding-inline: 0; color: var(--green); background: transparent; }
.text-button:disabled { color: #9aa7a2; cursor: not-allowed; }.compact { padding: .55rem .8rem; font-size: .84rem; }.text-link { color: var(--green); font-weight: 700; text-decoration: none; }
.panel { border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); box-shadow: 0 10px 35px rgb(20 41 35 / 4%); }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.metric-grid article { position: relative; overflow: hidden; padding: 1.25rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.metric-grid article::after { position: absolute; inset: auto -2rem -3rem auto; width: 7rem; height: 7rem; border-radius: 50%; background: var(--mint); content: ""; opacity: .7; }
.metric-grid article.attention::after { background: #f9e9bc; }
.metric-grid span, .metric-grid small, .metric-grid strong { position: relative; z-index: 1; display: block; }.metric-grid span { color: var(--muted); font-size: .82rem; }.metric-grid strong { margin: .7rem 0 .15rem; font-size: 2rem; letter-spacing: -.05em; }.metric-grid small { color: #87938e; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr); gap: 1rem; }.dashboard-grid .wide { grid-row: span 2; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.3rem; border-bottom: 1px solid var(--line); }.panel-heading h2 { margin: .15rem 0 0; font-size: 1.15rem; letter-spacing: -.025em; }.panel-heading > a { color: var(--green); font-size: .82rem; font-weight: 700; text-decoration: none; }
.status-pill { display: inline-flex; width: fit-content; align-items: center; border-radius: 999px; padding: .27rem .5rem; color: #4d5c56; background: #edf1ef; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }.status-pill.active, .status-pill.secure { color: #1f6854; background: #dcf1e9; }.status-pill.review, .status-pill.prepared, .status-pill.open { color: #8a6011; background: #fff0c7; }.status-pill.overdue { color: var(--red); background: #fde4e6; }.status-pill.planned { color: #56627d; background: #e8ebf3; }
.data-list { display: grid; }.data-row { display: grid; grid-template-columns: auto minmax(0, 1.3fr) minmax(130px, .7fr) auto; gap: 1rem; align-items: center; padding: 1rem 1.3rem; border-bottom: 1px solid #e9eeeb; color: inherit; text-decoration: none; }.data-row:last-child { border-bottom: 0; }.data-row:hover { background: #f8faf9; }.data-row strong, .data-row small { display: block; }.data-row small { margin-top: .2rem; color: var(--muted); font-size: .78rem; }.row-icon { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: .6rem; color: var(--green); background: var(--mint); font-weight: 900; }.row-action { color: var(--green); font-size: .8rem; font-weight: 800; text-decoration: none; }
.compact-list { display: grid; }.compact-list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.2rem; border-bottom: 1px solid #e9eeeb; text-decoration: none; }.compact-list a:last-child { border: 0; }.compact-list strong, .compact-list small { display: block; }.compact-list small { color: var(--muted); font-size: .72rem; }.compact-list a > span:last-child { text-align: right; }
.timeline { padding: .8rem 1.2rem 1.1rem; }.timeline > div { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; padding: .55rem 0; }.timeline-dot { width: .55rem; height: .55rem; margin-top: .3rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--mint); }.timeline p { margin: 0; }.timeline strong, .timeline small { display: block; }.timeline strong { font-size: .8rem; }.timeline small { margin-top: .15rem; color: var(--muted); font-size: .72rem; }
.filter-panel { margin-bottom: 1rem; padding: 1rem; }.filter-form { display: flex; align-items: center; gap: .8rem; }.search-field { display: flex; min-width: 240px; flex: 1; align-items: center; gap: .6rem; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: .65rem; }.search-field input { width: 100%; border: 0; outline: 0; }
.table-panel { overflow: hidden; }.responsive-table { overflow-x: auto; }table { width: 100%; border-collapse: collapse; }th, td { padding: .9rem 1rem; border-bottom: 1px solid #e9eeeb; text-align: left; vertical-align: middle; }th { color: var(--muted); background: #f8faf9; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }td { font-size: .86rem; }td small { display: block; margin-top: .2rem; color: var(--muted); }.customer-name { display: flex; align-items: center; gap: .7rem; text-decoration: none; }.customer-name strong, .customer-name small { display: block; }.avatar.company { border-radius: .65rem; color: var(--green); background: var(--mint); }.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }
.form-panel { margin-top: 1rem; }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1.2rem 1.3rem; }.stack-form { display: grid; gap: 1rem; }.form-grid label, .stack-form label, .address-card label { display: grid; gap: .4rem; color: var(--muted); font-size: .78rem; font-weight: 700; }.form-grid input, .form-grid select, .stack-form input, .address-card input { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: .6rem; padding: .6rem .7rem; color: var(--ink); background: #fff; outline: none; }.form-grid input:focus, .form-grid select:focus, .stack-form input:focus, .address-card input:focus { border-color: var(--green); box-shadow: 0 0 0 3px #2f6f5e18; }.span-2 { grid-column: span 2; }.form-actions { display: flex; justify-content: flex-end; }
.customer-header { align-items: center; }.customer-identity { display: flex; align-items: center; gap: 1rem; }.customer-avatar { width: 4.3rem; height: 4.3rem; border-radius: 1.1rem; font-size: 1.1rem; }.header-actions { display: flex; align-items: center; gap: .7rem; }.tabbar { position: sticky; top: 72px; z-index: 10; display: flex; gap: .3rem; margin: 0 0 1rem; padding: .5rem; overflow-x: auto; border: 1px solid var(--line); border-radius: .85rem; background: #ffffffed; backdrop-filter: blur(12px); }.tabbar a { padding: .55rem .7rem; border-radius: .55rem; color: var(--muted); font-size: .8rem; font-weight: 700; text-decoration: none; white-space: nowrap; }.tabbar a:hover { color: var(--ink); background: var(--canvas); }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }.summary-card { padding: 1.2rem; }.summary-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0 0; }.summary-card dl div { border-top: 1px solid var(--line); padding-top: .7rem; }.summary-card dt { color: var(--muted); font-size: .72rem; }.summary-card dd { margin: .3rem 0 0; font-weight: 700; }.mini-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin-top: 1rem; }.mini-metrics span { color: var(--muted); font-size: .72rem; }.mini-metrics strong { display: block; margin-bottom: .15rem; color: var(--ink); font-size: 1.45rem; }
.section-panel { margin-top: 1rem; scroll-margin-top: 10rem; }.address-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 1.2rem; }.address-card { display: grid; gap: .75rem; padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; }.address-card h3 { margin: 0; font-size: .95rem; }.field-pair { display: grid; grid-template-columns: .6fr 1.4fr; gap: .6rem; }.asset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; padding: 1.2rem; }.asset-grid article { padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; }.asset-grid h3 { margin: .45rem 0 .25rem; }.asset-grid p { margin: 0; color: var(--muted); font-size: .8rem; }.asset-grid footer { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; }.asset-kind { color: var(--green); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.inline-create { border-top: 1px solid var(--line); }.inline-create summary { padding: 1rem 1.3rem; color: var(--green); font-size: .82rem; font-weight: 800; cursor: pointer; }
.integration-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }.integration-card { padding: 1.2rem; }.integration-card header, .integration-card footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.integration-mark { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border-radius: .7rem; color: var(--green); background: var(--mint); font-weight: 900; }.integration-card h2 { margin: 1.2rem 0 .2rem; font-size: 1.05rem; }.integration-card p { margin: 0; color: var(--muted); }.integration-card footer { margin-top: 1.3rem; border-top: 1px solid var(--line); padding-top: .8rem; color: var(--muted); font-size: .72rem; }.architecture-note { margin-top: 1rem; padding: 1.4rem; }.architecture-note h2 { max-width: 720px; margin: .45rem 0; font-size: 1.55rem; }.architecture-note p:last-child { max-width: 850px; color: var(--muted); line-height: 1.65; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 520px) minmax(0, 1fr); background: var(--surface); }.login-panel { align-self: center; display: grid; gap: 2rem; padding: clamp(2rem, 7vw, 5rem); }.login-brand { margin-bottom: 1rem; }.login-panel h1 { margin: .2rem 0 .5rem; font-size: clamp(2.2rem, 5vw, 3.5rem); letter-spacing: -.06em; }.muted { color: var(--muted); }.login-aside { display: flex; flex-direction: column; justify-content: end; padding: clamp(2rem, 7vw, 5rem); color: #eef6f3; background: linear-gradient(140deg, #142923, #285549); }.login-aside p { max-width: 680px; margin: 0; font-size: clamp(2rem, 5vw, 4.7rem); font-weight: 750; line-height: 1.03; letter-spacing: -.065em; }.login-aside ul { display: flex; flex-wrap: wrap; gap: 1.7rem; margin: 3rem 0 0; padding: 0; list-style: none; color: #bad0c9; }.alert { padding: .8rem 1rem; border-radius: .65rem; font-size: .85rem; }.alert.error { color: #8f1d27; background: #fde8ea; }.alert.info { color: #265d4e; background: var(--mint); }.separator { position: relative; border-top: 1px solid var(--line); text-align: center; }.separator span { position: relative; top: -.75rem; padding: 0 .7rem; color: var(--muted); background: #fff; font-size: .75rem; }.empty-state { padding: 1.4rem; color: var(--muted); text-align: center; }
@media (max-width: 1100px) { .metric-grid { grid-template-columns: repeat(2, 1fr); }.address-grid, .asset-grid, .integration-grid { grid-template-columns: repeat(2, 1fr); }.login-shell { grid-template-columns: minmax(320px, 480px) 1fr; }.login-aside p { font-size: 2.7rem; } }
@media (max-width: 800px) { .app-shell { display: block; }.sidebar { position: fixed; inset: 24px auto 0 0; z-index: 50; width: min(86vw, 290px); height: calc(100vh - 24px); transform: translateX(-105%); transition: transform .2s ease; box-shadow: 20px 0 50px #0004; }.sidebar.open { transform: translateX(0); }.menu-button { display: inline-block; }.topbar { top: 24px; }.topbar .global-search kbd, .topbar > .primary-button { display: none; }.page-heading, .customer-header { align-items: flex-start; flex-direction: column; }.dashboard-grid, .detail-grid { grid-template-columns: 1fr; }.dashboard-grid .wide { grid-row: auto; }.address-grid, .asset-grid, .integration-grid { grid-template-columns: 1fr; }.login-shell { display: block; }.login-aside { display: none; }.login-panel { max-width: 560px; min-height: calc(100vh - 24px); margin: auto; }.tabbar { top: 96px; }.data-row { grid-template-columns: auto 1fr auto; }.data-row > :nth-child(3) { grid-column: 2 / -1; }.mini-metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .content { padding: 1.2rem .8rem 3rem; }.topbar { padding-inline: .8rem; }.metric-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }.metric-grid article { padding: 1rem; }.metric-grid strong { font-size: 1.6rem; }.metric-grid small { font-size: .68rem; }.form-grid { grid-template-columns: 1fr; }.span-2 { grid-column: auto; }.filter-form { align-items: stretch; flex-direction: column; }.page-heading .primary-button, .page-heading .secondary-button { width: 100%; }.summary-card dl { grid-template-columns: 1fr; }.customer-identity { align-items: flex-start; }.customer-avatar { width: 3rem; height: 3rem; border-radius: .8rem; }.header-actions { width: 100%; justify-content: space-between; } }