/* GoCanada inventory: translucent surfaces over a warm and cool ambient canvas. */
:root {
  color-scheme: light;
  --ink: #1d2435;
  --muted: #566175;
  --quiet: #606b80;
  --red: #b72942;
  --red-deep: #9a1931;
  --red-pale: #fce7eb;
  --blue-pale: #e9efff;
  --line: #29395224;
  --line-soft: #29395216;
  --white-edge: #ffffffed;
  --glass: linear-gradient(150deg, #ffffffed 0%, #ffffffac 65%, #faffffd9 100%);
  --glass-shadow: 0 1px 2px #242a4210, 0 12px 35px -24px #26284853, inset 0 1px 1px #ffffff;
  --focus: #a2213d;
  --radius: 23px;
  --control: 12px;
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; min-height: 100%; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font: 400 15px/1.5 var(--font);
  background:
    radial-gradient(ellipse at 2% 9%, #fad1da 0%, transparent 39%),
    radial-gradient(ellipse at 99% 4%, #d4e2ff 0%, transparent 41%),
    radial-gradient(ellipse at 91% 97%, #d9e3ff 0%, transparent 44%),
    linear-gradient(144deg, #fcf5f5 4%, #f3f4fa 48%, #f8f9fc 91%);
  background-attachment: fixed;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .58; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
a { color: var(--red-deep); text-underline-offset: .18em; }
img, svg { vertical-align: middle; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { line-height: 1.17; font-weight: 730; letter-spacing: -.024em; }
h1 { font-size: clamp(1.95rem, 4vw, 3.05rem); letter-spacing: -.055em; }
h2 { font-size: clamp(1.14rem, 2vw, 1.36rem); }
h3 { font-size: 1.04rem; }
p + p { margin-top: .72em; }
small, .small { font-size: .81rem; }
hr { border: 0; border-top: 1px solid var(--line-soft); margin: 1.2rem 0; }
.muted, .secondary, .subtle { color: var(--muted); }
.preserve-lines { overflow-wrap: anywhere; }
.text-danger { color: #a12439; }
.text-success { color: #21604a; }
.text-nowrap { white-space: nowrap; }
.mono, code, .asset-code { font-family: var(--mono); font-size: .88em; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  inset: 10px auto auto 10px;
  z-index: 100;
  padding: .62rem 1rem;
  border-radius: 12px;
  color: white;
  background: var(--red-deep);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon, .button svg, .nav-item svg, .nav-link svg {
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
}

.app-shell {
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
  align-items: start;
  gap: clamp(18px, 2.4vw, 36px);
  width: min(100%, 1680px);
  margin: 0 auto;
  padding: clamp(16px, 2.3vw, 36px);
}
.sidebar {
  position: sticky;
  top: clamp(16px, 2.3vw, 36px);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: calc(100vh - clamp(32px, 4.6vw, 72px));
  max-height: calc(100dvh - clamp(32px, 4.6vw, 72px));
  overflow: auto;
  padding: 17px 13px;
  border: 1px solid var(--white-edge);
  border-radius: 29px;
  background: linear-gradient(158deg, #ffffffdc, #fff7f7af 55%, #ffffffaa);
  box-shadow: 0 19px 56px -34px #58223366, inset 0 1px 1px #fff, inset 0 -1px 0 #ffffff67;
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
  scrollbar-width: thin;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.sidebar .brand { padding: 6px 8px 19px; margin-bottom: 13px; border-bottom: 1px solid var(--line-soft); }
.brand-mark, .brand-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 43px;
  height: 43px;
  border: 1px solid #ffffff72;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(150deg, #e85565, #b72440 72%, #a71a35);
  box-shadow: 0 5px 13px #a2263e3b, inset 0 1px 1px #ffffff6b;
  font-size: 1.1rem;
  font-weight: 750;
}
.brand-mark :is(img, svg), .brand-icon :is(img, svg) { width: 76%; max-height: 76%; object-fit: contain; }
.brand-logo, .logo-img { width: min(148px, 100%); max-height: 57px; object-fit: contain; object-position: left; }
.brand-mark .logo-img, .brand-icon .logo-img { width: 76%; max-height: 76%; object-position: center; }
.brand-name, .brand strong { display: block; font-size: 1.05rem; font-weight: 760; letter-spacing: -.03em; }
.brand small, .brand-label, .brand-subtitle { display: block; color: var(--muted); font-size: .76rem; }
.sidebar nav, .sidebar-nav { display: grid; align-content: start; gap: 4px; }
.nav-label {
  margin: 14px 10px 3px;
  color: var(--quiet);
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.nav-item, .nav-link, .sidebar nav > a {
  display: flex;
  align-items: center;
  gap: .69rem;
  min-height: 43px;
  padding: .55rem .72rem;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #465166;
  background: transparent;
  text-decoration: none;
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.nav-item:hover, .nav-link:hover, .sidebar nav > a:hover {
  color: var(--ink);
  background: #ffffff9c;
  border-color: #fff;
}
.nav-item.active, .nav-link.active, .sidebar nav > a.active, .sidebar nav > a[aria-current="page"],
.nav-item[aria-current="page"], .nav-link[aria-current="page"] {
  color: #8f1830;
  border-color: #ffffffd9;
  background: linear-gradient(125deg, #fbe1e8, #fff6f6 88%);
  box-shadow: 0 3px 9px #a82a4420, inset 0 1px 1px #fff;
}
.nav-icon {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  color: inherit;
  font-size: .69rem;
  font-weight: 780;
  letter-spacing: -.02em;
}
.sidebar-footer, .sidebar-bottom { display: grid; gap: 8px; margin-top: auto; padding: 19px 5px 0; }
.sidebar-footer {
  display: flex;
  align-items: center;
  gap: .46rem;
  color: var(--muted);
  font-size: .75rem;
}
.sidebar-footer .status-dot, .auth-note .status-dot { color: #2f7d61; }
.sidebar-footer form, .sidebar-bottom form { margin: 0; }
.account-card, .account {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  padding: .55rem .6rem;
  border: 1px solid var(--white-edge);
  border-radius: 12px;
  background: #ffffff82;
}
.account-card > div, .account > div { min-width: 0; }
.account-card :is(strong, small), .account :is(strong, small) { display: block; overflow-wrap: anywhere; }
.avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #913047;
  background: #f8dee4;
  font-size: .76rem;
  font-weight: 760;
}

.workspace { min-width: 0; width: 100%; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 48px;
  padding: .1rem .08rem .75rem;
  color: var(--muted);
  font-size: .86rem;
}
.topbar strong { color: var(--ink); }
.profile-link {
  display: flex;
  align-items: center;
  gap: .55rem;
  max-width: 280px;
  padding: .36rem .65rem;
  border: 1px solid #fff;
  border-radius: 12px;
  color: var(--ink);
  background: #ffffffa6;
  font-weight: 680;
  line-height: 1.23;
  text-decoration: none;
}
.profile-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-link small { display: block; color: var(--muted); font-size: .71rem; font-weight: 480; }
.profile-link:hover { background: #fff; }
.topbar-date, .topbar-context, .breadcrumbs, .cluster, .inline, .actions, .button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .57rem;
}
.topbar-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.main-content, .page-content { display: grid; align-content: start; gap: 19px; min-width: 0; }
.page-heading, .page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .95rem 1.3rem;
  margin: .1rem 0 .3rem;
}
.page-heading p, .page-header p { color: var(--muted); max-width: 68ch; margin-top: .46rem; }
.page-heading h1, .page-header h1 { overflow-wrap: anywhere; }
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 1.45rem;
  min-width: 0;
  padding: clamp(17px, 3.1vw, 43px);
  border: 1px solid var(--white-edge);
  border-radius: clamp(20px, 2.9vw, 33px);
  background:
    radial-gradient(ellipse at 9% 17%, #ffffffed, #ffffff15 69%),
    linear-gradient(118deg, #fff9fad8, #f5e3ef9a 45%, #e7ecffae 88%);
  box-shadow: 0 13px 45px -33px #472f606b, inset 0 1px 1px #fff;
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  backdrop-filter: blur(22px) saturate(135%);
}
.hero h1 { font-size: clamp(2rem, 4.25vw, 3.4rem); }
.hero p { max-width: 65ch; margin-top: .5rem; color: var(--muted); }
.hero .eyebrow { margin-top: 0; color: var(--red-deep); }
.hero-dashboard {
  background:
    radial-gradient(ellipse at 9% 17%, #ffffffed, #ffffff15 69%),
    linear-gradient(119deg, #ffe8edb8, #f8e5ee8e 47%, #d6e3ffa9 96%);
}
.subnav { display: flex; align-items: center; flex-wrap: wrap; gap: .38rem; }
.subnav a {
  padding: .4rem .64rem;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}
.subnav a:hover, .subnav a[aria-current="page"], .subnav a.active {
  border-color: #fff;
  color: var(--red-deep);
  background: #ffffffae;
}
.page-actions, .header-actions, .heading-actions, .form-actions, .signature-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .56rem;
}
.form-actions { margin-top: .9rem; }
.eyebrow, .section-label {
  color: var(--red-deep);
  font-weight: 750;
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.eyebrow + h1 { margin-top: .26rem; }

.grid, .grid-2, .grid-3, .grid-4, .overview-grid, .stat-grid, .stats-grid, .metrics-grid, .cards-grid, .detail-grid {
  display: grid;
  min-width: 0;
  gap: clamp(12px, 1.55vw, 21px);
  align-items: start;
}
.grid-2, .overview-grid, .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4, .stat-grid, .stats-grid, .metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards-grid { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.stat-grid, .stats-grid, .metrics-grid { align-items: stretch; }
.stack { display: grid; align-content: start; gap: .85rem; min-width: 0; }
.section-stack { display: grid; align-content: start; gap: 19px; min-width: 0; }
.panel, .glass, .glass-panel, .card, .glass-card, .stat-card, .metric-card, .auth-card, .document, .receipt-paper, .qr-card {
  min-width: 0;
  border: 1px solid var(--white-edge);
  border-radius: var(--radius);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(17px) saturate(125%);
  backdrop-filter: blur(17px) saturate(125%);
}
.panel, .glass, .glass-panel, .card, .glass-card, .qr-card { padding: clamp(14px, 2vw, 25px); }
.panel-heading, .panel-header, .card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem 1.1rem;
  margin: 0 0 .9rem;
}
.panel-heading p, .panel-header p, .card-header p { color: var(--muted); font-size: .86rem; margin-top: .33rem; }
.panel-footer, .card-footer { margin: 1rem 0 0; padding: .8rem 0 0; border-top: 1px solid var(--line-soft); }
.panel p + h3 { margin: 1rem 0 .42rem; }
.history-row { display: grid; gap: .22rem; padding: .74rem 0; overflow-wrap: anywhere; }
.history-row + .history-row { border-top: 1px solid var(--line-soft); }
.history-row p { color: var(--muted); font-size: .88rem; }
.stat-card, .metric-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: .38rem;
  min-height: 128px;
  padding: clamp(13px, 1.7vw, 22px);
  overflow: hidden;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  isolation: isolate;
}
.stat-card::before, .metric-card::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 100% 0%, var(--stat-ambient, #f3ccda9c), transparent 69%);
  content: "";
}
.stat-card:nth-child(4n+2), .metric-card:nth-child(4n+2) { --stat-ambient: #c8e0faaf; }
.stat-card:nth-child(4n+3), .metric-card:nth-child(4n+3) { --stat-ambient: #f9ddbcbb; }
.stat-card:nth-child(4n+4), .metric-card:nth-child(4n+4) { --stat-ambient: #d5d4f8b8; }
.stat-card.tone-blue { --stat-ambient: #c8e0fab8; }
.stat-card.tone-green { --stat-ambient: #bdebdac2; }
.stat-card.tone-amber { --stat-ambient: #f9ddbcbb; }
.stat-card.tone-violet { --stat-ambient: #d5d4f8b8; }
.stat-card.tone-red { --stat-ambient: #f3ccdab8; }
.stat-label, .metric-label, .kpi-label { color: var(--muted); font-size: .8rem; font-weight: 680; }
.stat-value, .metric-value, .kpi-value, .stat-card > strong, .metric-card > strong {
  display: block;
  color: var(--ink);
  font-size: clamp(1.85rem, 3.15vw, 2.7rem);
  font-weight: 740;
  line-height: 1.03;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}
.stat-note, .metric-note, .kpi-note, .stat-card small, .metric-card small { color: var(--muted); font-size: .77rem; }
.stat-icon, .metric-icon, .panel-icon, .item-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 35px;
  height: 35px;
  border: 1px solid #ffffffcb;
  border-radius: 11px;
  color: var(--red-deep);
  background: #ffffffa8;
}
.stat-icon :is(svg, .icon), .metric-icon :is(svg, .icon), .panel-icon :is(svg, .icon) { width: 17px; height: 17px; }
.list-rows, .rows { display: grid; gap: 0; }
.list-row, .summary-row, .category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  min-width: 0;
  padding: .65rem 0;
}
:is(.list-row, .summary-row, .category-row) + :is(.list-row, .summary-row, .category-row) { border-top: 1px solid var(--line-soft); }
.list-row strong, .summary-row strong, .category-row strong { font-variant-numeric: tabular-nums; }
.progress, .bar-track, .category-bar {
  min-width: 20px;
  height: 7px;
  border-radius: 99px;
  background: #e8e8f0;
  overflow: hidden;
}
.progress > span, .bar-fill, .category-bar > :is(i, span) {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d85167, #ed8b9d);
}
.category-row .category-bar { flex: 1 1 85px; max-width: 44%; }
.assignment-count {
  display: inline-grid;
  place-items: center;
  min-width: 29px;
  min-height: 29px;
  padding: .16rem .43rem;
  border-radius: 9px;
  color: #8e2238;
  background: #f7e3ea;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
}

.button, .btn, input[type="submit"] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .44rem;
  min-height: 40px;
  padding: .54rem .9rem;
  border: 1px solid var(--white-edge);
  border-radius: var(--control);
  color: #30394e;
  background: linear-gradient(180deg, #fff, #f3f5fbe8);
  box-shadow: 0 2px 5px #2c385220, inset 0 1px 0 #ffffffc7;
  font-size: .86rem;
  line-height: 1.22;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.button:hover, .btn:hover, input[type="submit"]:hover { box-shadow: 0 4px 12px #30374b28, inset 0 1px 0 #ffffffc7; transform: translateY(-1px); }
.button:active, .btn:active, input[type="submit"]:active { transform: none; }
.button-primary, .btn-primary, .button.primary, .btn.primary, input[type="submit"] {
  border-color: #962037;
  color: #fff;
  background: linear-gradient(160deg, #cd3d55, #ab233d 67%, #a61f37);
  box-shadow: 0 3px 9px #b2274540, inset 0 1px 1px #ffffff43;
}
.button-primary:hover, .btn-primary:hover, .button.primary:hover, .btn.primary:hover, input[type="submit"]:hover {
  color: #fff;
  box-shadow: 0 5px 14px #b2274552, inset 0 1px 1px #ffffff43;
}
.button-secondary, .btn-secondary { border-color: #bac2d277; }
.button-quiet, .btn-quiet, .button-ghost, .btn-ghost {
  color: #6f243a;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.button-quiet:hover, .btn-quiet:hover, .button-ghost:hover, .btn-ghost:hover { background: #f8e7ee; box-shadow: none; }
.button-danger, .btn-danger { color: #972238; border-color: #e8aabb; background: linear-gradient(180deg, #fff7f8, #fce8eb); }
.button-sm, .btn-sm { min-height: 33px; padding: .36rem .58rem; font-size: .78rem; }
.button-block, .btn-block { width: 100%; }
.button-link, .text-link, .text-button { color: var(--red-deep); font-weight: 680; }

.form-grid, .filter-grid, .filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .77rem .92rem;
  align-items: end;
}
.filter-grid, .filters { grid-template-columns: repeat(auto-fit, minmax(min(135px, 100%), 1fr)); }
.subscription-filters { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.subscription-filters .filter-actions { align-self: end; }
.quick-capture-details > summary { cursor: pointer; }
.quick-capture-details[open] > summary { margin-bottom: .8rem; }
.filters { margin-bottom: .8rem; }
.filter-grid .search, .filters .search, .search-field { min-width: 0; }
.field, .form-field, label.field, label.form-field { display: grid; align-content: start; gap: .33rem; min-width: 0; }
.field-wide, .field-full, .full-width, .span-all { grid-column: 1 / -1; }
label, legend { color: #39445b; font-size: .83rem; font-weight: 690; }
label > :is(input, select, textarea) { display: block; }
label input[type="checkbox"], label input[type="radio"] { display: inline-block; }
.field small, .form-field small, .field-hint, .help { color: var(--muted); font-size: .75rem; font-weight: 400; }
input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="hidden"]),
textarea, select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 41px;
  padding: .53rem .65rem;
  border: 1px solid #939fb769;
  border-radius: var(--control);
  color: var(--ink);
  background: #ffffffe2;
  box-shadow: inset 0 1px 1px #2c385213;
  font-size: .9rem;
  font-weight: 450;
  line-height: 1.35;
}
input::placeholder, textarea::placeholder { color: #647186; opacity: 1; }
input:read-only, input:disabled, textarea:disabled, select:disabled { background-color: #f1f2f8; }
input:focus, textarea:focus, select:focus { border-color: #a23650; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--red-deep); width: 1rem; height: 1rem; margin: 0; vertical-align: middle; }
input[type="date"] { color-scheme: light; }
select[multiple] { min-height: 120px; }
textarea { min-height: 92px; resize: vertical; }
.check, .checkbox, .checkbox-label, .consent {
  display: flex;
  align-items: flex-start;
  gap: .57rem;
  font-size: .86rem;
  font-weight: 560;
}
:is(.check, .checkbox, .checkbox-label, .consent) input[type="checkbox"] { flex: 0 0 auto; margin-top: .16em; }
fieldset {
  min-width: 0;
  margin: 0;
  padding: .75rem .85rem .85rem;
  border: 1px solid var(--line);
  border-radius: 15px;
}
legend { padding-inline: .24rem; }
.form-section + .form-section { padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--line-soft); }
.form-section > h2, .form-section > h3 { margin-bottom: .7rem; }

.table-scroll, .table-wrap, .table-responsive { min-width: 0; max-width: 100%; overflow-x: auto; border-radius: 13px; }
table { width: 100%; border-spacing: 0; color: var(--ink); text-align: left; font-size: .87rem; line-height: 1.35; }
table caption { padding: 0 0 .52rem; color: var(--muted); text-align: left; }
th, td { padding: .7rem .62rem; vertical-align: middle; }
th {
  border-bottom: 1px solid var(--line);
  color: #4b5870;
  background: #eff1fa94;
  font-size: .73rem;
  font-weight: 730;
  white-space: nowrap;
}
tbody td { border-bottom: 1px solid var(--line-soft); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #ffffff90; }
td strong, .cell-main { color: var(--ink); font-weight: 710; }
td small, .cell-secondary { display: block; margin-top: .14rem; color: var(--muted); font-size: .75rem; }
td a:not(.button, .btn) { color: #7e2339; font-weight: 680; }
.cell-actions, .row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .36rem; }
.number, .money, .date { font-variant-numeric: tabular-nums; }
.text-right { text-align: right; }
.table-meta { color: var(--muted); font-size: .78rem; padding: .3rem 0 .6rem; }

.badge, .pill, .status {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  max-width: 100%;
  padding: .24rem .53rem;
  border: 1px solid #58677c24;
  border-radius: 999px;
  color: #465469;
  background: #edf0f8;
  font-size: .72rem;
  font-weight: 720;
  line-height: 1.2;
  vertical-align: middle;
}
.badge-success, .pill-success, .badge.success, .status.success, .badge.green { border-color: #3d7e6d33; color: #1f5d49; background: #e3f6ed; }
.badge-warning, .pill-warning, .badge.warning, .status.warning, .badge.amber { border-color: #996e2b33; color: #74480b; background: #fff2d7; }
.badge-danger, .pill-danger, .badge.danger, .status.danger, .badge.red { border-color: #a1364c35; color: #942038; background: #fde8ee; }
.badge-info, .pill-info, .badge.info, .status.info, .badge.blue { border-color: #395d9b36; color: #315389; background: #e8f0ff; }
.badge-neutral, .pill-neutral, .badge.neutral { color: #465469; background: #edf0f8; }
.status-dot { display: inline-block; width: .48rem; height: .48rem; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
.notice, .alert, .flash {
  padding: .7rem .86rem;
  border: 1px solid #7a8fb444;
  border-radius: 13px;
  color: #344e76;
  background: #eff5ffee;
  font-size: .88rem;
}
.notice-success, .alert-success, .flash-success, .notice.success { border-color: #65a58c77; color: #235747; background: #e8f9f0ee; }
.notice-error, .alert-error, .flash-error, .notice.error, .notice-danger, .alert-danger { border-color: #d0829277; color: #8e2238; background: #fff0f3ee; }
.notice-warning, .alert-warning, .flash-warning { border-color: #d2a45a77; color: #725118; background: #fff5deee; }
.empty-state, .empty { padding: clamp(18px, 4vw, 38px) 13px; color: var(--muted); text-align: center; }
.empty-state h3, .empty h3, .empty-state strong, .empty strong { color: var(--ink); }
.empty-state p, .empty p { margin: .38rem auto 0; max-width: 56ch; }
.empty-state .button, .empty .button { margin-top: .8rem; }
.empty-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0 auto .58rem;
  border: 1px solid #ffffffed;
  border-radius: 12px;
  color: #5f6984;
  background: linear-gradient(155deg, #f3f0f8, #e9eef9);
}
.empty-icon svg { width: 18px; height: 18px; }

.auth-page {
  display: grid;
  place-items: center;
  padding: clamp(13px, 4vw, 50px);
}
.auth-card {
  display: grid;
  gap: 17px;
  width: min(100%, 510px);
  padding: clamp(17px, 5vw, 42px);
  border-radius: 30px;
  box-shadow: 0 20px 70px -33px #44324b61, inset 0 1px 1px #fff;
}
.auth-card.wide, .sign-card, .auth-card.sign-card { width: min(100%, 720px); }
.auth-header { display: grid; justify-items: start; gap: .5rem; }
.auth-header h1, .auth-card h1 { font-size: clamp(1.8rem, 4.5vw, 2.4rem); }
.auth-header p { color: var(--muted); }
.auth-card form { display: grid; gap: .82rem; }
.auth-card form > label:not(.field, .form-field, .checkbox, .consent) { display: grid; gap: .31rem; }
.auth-card .brand { margin-bottom: .18rem; }
.auth-brand { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.auth-brand .logo-img { max-width: 125px; max-height: 54px; }

.document, .receipt-paper { padding: clamp(16px, 3vw, 36px); }
.document > :is(h1, h2) + p, .receipt-paper > :is(h1, h2) + p { margin-top: .5rem; }
.report-header, .receipt-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: .7rem 1.1rem;
  padding-bottom: .85rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.report-header p { margin-top: .38rem; color: var(--muted); }
.document .kpi-value { font-size: clamp(1.5rem, 2.5vw, 2rem); overflow-wrap: anywhere; }
.document section > h3 { margin-bottom: .55rem; }
.receipt-header { align-items: center; }
.receipt-header p {
  flex-basis: 100%;
  color: var(--red-deep);
  font-size: .76rem;
  font-weight: 720;
  letter-spacing: .045em;
}
.receipt-header h2 { font-size: clamp(1.22rem, 3vw, 1.72rem); }
.document blockquote, .receipt-paper blockquote {
  margin: .7rem 0;
  padding: .65rem .83rem;
  border-left: 3px solid #c94b65;
  border-radius: 0 10px 10px 0;
  color: #452d3d;
  background: #faeaf0c9;
}
.receipt-note { color: var(--muted); font-size: .86rem; overflow-wrap: anywhere; }
.receipt-signature { margin-top: .88rem; padding-top: .75rem; border-top: 1px solid var(--line-soft); }
.receipt-hash { display: block; color: var(--muted); }
.receipt-hash code { display: block; overflow-wrap: anywhere; }
.receipt-content, .document-content { color: #384155; }
.receipt-content > :is(p, ul, ol), .document-content > :is(p, ul, ol) { margin-top: .58rem; }
.receipt-content ul, .document-content ul { padding-left: 1.15rem; }
.qr-card {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: .74rem;
  overflow-wrap: anywhere;
}
.qr-card :is(svg, img, canvas), .qr-image, .qr-canvas :is(svg, img, canvas) { width: min(100%, 220px); height: auto; padding: 8px; border: 1px solid #1d24351c; border-radius: 12px; background: white; }
.qr-canvas { display: grid; justify-items: start; width: 100%; }
.qr-layout {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(130px, 192px) minmax(0, 1fr);
  gap: clamp(.85rem, 2.8vw, 1.45rem);
  width: 100%;
}
.qr-card p { color: var(--muted); }
.signature-pad, .signature-canvas {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 120px;
  border: 1px dashed #7a839c;
  border-radius: 14px;
  background: #fff;
}
canvas.signature-pad, .signature-canvas, .signature-pad canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 2;
  touch-action: none;
  cursor: crosshair;
}
.signature-pad:not(canvas) canvas { border: 0; border-radius: inherit; }
.signature-actions { margin-top: .45rem; }
.signature-image { display: block; width: auto; max-width: min(100%, 350px); max-height: 135px; object-fit: contain; border-bottom: 1px solid var(--line); }
.receipt-signature .signature-image { margin-top: .34rem; }
dl { margin: 0; }
dt { color: var(--muted); font-size: .77rem; font-weight: 650; }
dd { margin: .14rem 0 .64rem; overflow-wrap: anywhere; }
.document .detail-grid, .receipt-paper .detail-grid { margin-top: .7rem; }
.print-only { display: none; }

@media (max-width: 1140px) {
  .app-shell { grid-template-columns: 202px minmax(0, 1fr); }
  .stat-grid, .stats-grid, .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  .subscription-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-shell { display: block; padding: 12px; }
  .sidebar {
    top: 0;
    z-index: 4;
    min-height: auto;
    max-height: none;
    padding: 10px 10px 9px;
    margin-bottom: 17px;
    border-radius: 19px;
    overflow: visible;
  }
  .sidebar .brand { padding: 0 2px 8px; margin: 0 0 6px; }
  .sidebar .brand-mark, .sidebar .brand-icon { width: 35px; height: 35px; border-radius: 12px; }
  .sidebar nav, .sidebar-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    padding: 2px 1px 3px;
    scrollbar-width: thin;
  }
  .nav-item, .nav-link, .sidebar nav > a { min-height: 36px; padding: .4rem .56rem; gap: .35rem; font-size: .79rem; }
  .sidebar .nav-label { display: none; }
  .sidebar-footer, .sidebar-bottom { margin: 4px 0 0; padding: 0; }
  .sidebar-footer .account-card, .sidebar-bottom .account-card { display: none; }
  .sidebar-footer .button, .sidebar-bottom .button { min-height: 32px; padding: .31rem .48rem; }
  .topbar { padding: .04rem 0 .52rem; min-height: 37px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body { background-attachment: scroll; }
  .sidebar { position: static; }
  .topbar { font-size: .78rem; }
  .profile-link { max-width: 185px; }
  .main-content, .page-content, .section-stack { gap: 13px; }
  .grid-2, .grid-3, .overview-grid, .detail-grid, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .qr-layout { grid-template-columns: minmax(0, 1fr); }
  .page-heading, .page-header { align-items: flex-start; }
  .panel, .glass, .glass-panel, .card, .glass-card, .stat-card, .metric-card { border-radius: 17px; }
  .filter-grid, .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subscription-filters .filter-actions { grid-column: 1 / -1; }
  .filter-grid .search, .filters .search { grid-column: 1 / -1; }
  th, td { padding: .59rem .48rem; }
  .button, .btn { min-height: 42px; }
  .button-sm, .btn-sm { min-height: 37px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print {
  @page { margin: 15mm; }
  html, body { min-width: 0; min-height: 0; color: #111; background: #fff !important; font-size: 11pt; }
  .app-shell, .workspace, .main-content, .page-content, .auth-page, .auth-card { display: block; width: auto; max-width: none; padding: 0; margin: 0; }
  .panel, .glass, .glass-panel, .card, .glass-card, .stat-card, .metric-card, .auth-card, .document, .receipt-paper, .hero {
    border-color: #ccc;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .auth-card, .document, .receipt-paper { padding: 0; border: 0; }
  .main-content > *, .page-content > * { margin-bottom: 12px; }
  .sidebar, .topbar, .page-actions, .header-actions, .heading-actions, .button, .btn, .skip-link,
  .no-print, .table-tools, .filters, .filter-grid, .row-actions, .cell-actions, .signature-actions { display: none !important; }
  .print-only { display: revert; }
  .table-scroll, .table-wrap, .table-responsive { overflow: visible; }
  table, tr { break-inside: auto; }
  td, th, .signature-image { break-inside: avoid; }
  a { color: inherit; }
}