/* SignControl brand and interaction layer. The reference layout stays intact. */
.reference-layout .app-shell .sc-intro-actions { flex-wrap: wrap; row-gap: 8px; }
.reference-layout .ref-finance-summary .ref-ring-center > strong { font-size: 14px; letter-spacing: -.4px; white-space: nowrap; }
.reference-layout .app-shell .sc-demo-launch { display: inline-flex; align-items: center; gap: 6px; border-color: #f2c1cd; background: #fff4f7; color: #c91c40; text-decoration: none; }
.reference-layout .app-shell .sc-demo-launch:hover { border-color: #e995ab; background: #ffe9ef; color: #b61639; }
.reference-layout .app-shell .demo-notice { flex-wrap: wrap; }
.reference-layout .app-shell .sc-demo-return { margin-left: auto; color: #c71e43; font-weight: 700; text-decoration: none; white-space: nowrap; }
.reference-layout .app-shell .sc-demo-return:hover { text-decoration: underline; }
.reference-layout[data-demo="true"]:is([data-view="overview"], [data-view="finance"]) .app-shell .page-heading { display: none; }
.reference-layout[data-demo="true"]:is([data-view="overview"], [data-view="finance"]) .app-shell .sc-period-control { width: 100%; margin-top: 0; margin-left: 0; justify-content: space-between; }
.reference-layout[data-demo="true"] .app-shell .sc-period-heading { display: flex; }
.reference-layout[data-demo="true"] .app-shell .sc-period-actions::before { content: none; }
@media (min-width: 761px) and (max-width: 1240px) {
  .reference-layout:is([data-view="overview"], [data-view="finance"]) .app-shell .sc-period-control { width: 100%; margin-top: 0; justify-content: flex-end; }
}
@media (max-width: 500px) {
  .reference-layout .app-shell .sc-demo-return { margin-top: 3px; margin-left: 20px; }
}
.reference-layout .app-shell {
  --sc-brand: #ed2547;
  --sc-brand-bright: #fa3557;
  --sc-brand-deep: #cb1738;
  --sc-brand-soft: #fff0f3;
  --ref-orange: #ed2547;
}
.reference-layout .app-shell .sidebar {
  background: radial-gradient(ellipse at -15% 0, #4b182520, transparent 55%), linear-gradient(165deg, #21191f, #141418 45%, #111216);
  border-right: 1px solid #ffffff04;
}
.reference-layout .app-shell .brand-mark img { filter: drop-shadow(0 0 8px #ed25472b); }
.reference-layout .app-shell .brand-copy strong { color: #fff; }
.reference-layout .app-shell .brand-copy strong > span { color: #ff657f; }
.reference-layout .app-shell .brand-copy small { color: #a08b95; }
.reference-layout .app-shell .side-nav { scrollbar-color: #653141 transparent; }
.reference-layout .app-shell .nav-label { color: #847681; }
.reference-layout .app-shell .nav-item {
  position: relative;
  isolation: isolate;
  color: #bdb8c2;
  transition: color .18s ease, background .18s ease, box-shadow .22s ease;
}
.reference-layout .app-shell .nav-item::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 1px solid transparent;
  border-radius: inherit;
  background: linear-gradient(95deg, #ed254721, #ed254704 85%);
  opacity: 0;
  content: "";
  pointer-events: none;
  transition: opacity .2s ease, border-color .2s ease;
}
.reference-layout .app-shell .nav-item .nav-icon { color: #948a99; transition: color .18s ease, transform .2s cubic-bezier(.2, .7, .2, 1), filter .2s ease; }
.reference-layout .app-shell .nav-item:hover {
  background: #31212c;
  color: #fff;
  box-shadow: inset 2px 0 #f54c6a, 0 2px 12px #ed25470b;
  transform: none;
}
.reference-layout .app-shell .nav-item:hover::after { border-color: #ed25471c; opacity: 1; }
.reference-layout .app-shell .nav-item:hover .nav-icon { color: #ff8da3; filter: drop-shadow(0 0 4px #ed25472c); transform: translateX(2px); }
.reference-layout .app-shell .nav-item.active {
  background: linear-gradient(105deg, #ed2547, #d71c41 68%, #c31c40);
  color: #fff;
  box-shadow: 0 3px 13px #ed25471f, inset 0 1px #ffffff16;
}
.reference-layout .app-shell .nav-item.active:hover { background: linear-gradient(105deg, #fa3557, #ed2547 68%, #d71e45); box-shadow: 0 4px 16px #ed254731, inset 0 1px #ffffff22; }
.reference-layout .app-shell .nav-item.active .nav-icon { color: #fff; }
.reference-layout .app-shell .nav-item.active::after { border-color: #ffffff10; background: linear-gradient(100deg, #ffffff08, transparent); opacity: 1; }
.reference-layout .app-shell .nav-item:focus-visible { outline: 2px solid #ff9ab0; outline-offset: 2px; color: #fff; }
.reference-layout .app-shell .nav-count { background: #492433; color: #d893a7; }
.reference-layout .app-shell .nav-item.active .nav-count { background: #ffffff26; color: #fff; }
.reference-layout .app-shell .sidebar-bottom { border-top-color: #302631; }
.reference-layout .app-shell .profile-avatar { border-color: #71404d; background: #4a2634; color: #f0a0b3; }
.reference-layout .app-shell .profile-copy strong { color: #d9c9d0; }
.reference-layout .app-shell .profile-copy small { color: #8b7c8d; }
.reference-layout .reference-support-icon { border-color: #65303f; background: #432131; color: #ee8ea5; }
.reference-layout .reference-support strong { color: #d8c7cf; }
.reference-layout .reference-support small { color: #95808e; }
.reference-layout .reference-support > span:last-child { color: #c4768e; transition: color .18s ease, transform .18s ease; }
.reference-layout .reference-support:hover strong { color: #ffb8c7; }
.reference-layout .reference-support:hover > span:last-child { color: #ff9bb2; transform: translate(1px, -1px); }

/* Brand accents, with chart and operational status colors preserved. */
.reference-layout .app-shell .topbar { border-bottom-color: #eee2e7; }
.reference-layout .app-shell .breadcrumbs > .sc-icon { color: #ad8c99; }
.reference-layout .app-shell .breadcrumbs strong { color: #5a4b54; }
.reference-layout .app-shell .sc-global-search > svg { color: #d392a3; }
.reference-layout .app-shell .sc-global-search > input { color: #7d6673; }
.reference-layout .app-shell .sc-global-search > kbd { color: #bfa8b2; }
.reference-layout .app-shell .sc-global-search:focus-within { background: #fffafd; box-shadow: 0 0 0 2px #ed25471a; }
.reference-layout .app-shell .topbar .icon-button { color: #a28c97; transition: color .18s ease, background .18s ease, transform .18s ease; }
.reference-layout .app-shell .topbar .icon-button:hover { background: #fff0f4; color: #d82b50; transform: translateY(-1px); }
.reference-layout .app-shell .topbar .icon-button:active { transform: translateY(0); }
.reference-layout .app-shell .top-avatar { background: #f7e8ed; box-shadow: 0 0 0 1px #efdde4; color: #b16d82; }
.reference-layout .app-shell .mobile-menu { border-color: #eadde3; color: #a17d8b; }
.reference-layout .app-shell .mobile-menu:hover { border-color: #e8bcc9; background: #fff1f5; color: #d52a50; }
.reference-layout .app-shell .demo-pill:not(.is-live) { border-color: #f1dce3; background: #fff8fa; color: #b28090; }
.reference-layout .app-shell .demo-pill:not(.is-live) > span { background: #dc8fa3; }
.reference-layout .app-shell .demo-notice { border-color: #eddee3; background: #fffafb; color: #a38792; }
.reference-layout .app-shell .demo-notice strong { color: #a7677a; }
.reference-layout .app-shell .demo-notice button { color: #ba98a6; }
.reference-layout .app-shell .sc-period-heading > strong,
.reference-layout .app-shell .sc-period-heading > svg { color: #ac8594; }
.reference-layout .app-shell .sc-period-actions > select.sc-period-preset,
.reference-layout .app-shell .sc-period-custom > summary { border-color: #eadde2; color: #a27c8c; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.reference-layout .app-shell .sc-period-actions > select.sc-period-preset:hover,
.reference-layout .app-shell .sc-period-custom > summary:hover { border-color: #e5bdca; background: #fffbfd; }
.reference-layout .app-shell .sc-period-custom > summary > svg { color: #c99bac; }
.reference-layout .app-shell .sc-period-custom[open] > summary { border-color: #de91a7; box-shadow: 0 0 0 2px #ed25470c; }
.reference-layout .app-shell .sc-period-custom > form { border-color: #e8d3dc; }
.reference-layout:is([data-view="overview"], [data-view="finance"]) .app-shell .sc-period-actions::before { color: #b18c9b; }
.reference-layout .app-shell .button-primary,
.reference-layout .modal-backdrop .button-primary {
  border-color: #e32043;
  background: linear-gradient(105deg, #fa3557, #e41f43);
  box-shadow: 0 4px 11px #ed25471a;
  transition: border-color .18s ease, background .18s ease, box-shadow .2s ease, transform .18s ease;
}
.reference-layout .app-shell .button-primary:hover,
.reference-layout .modal-backdrop .button-primary:hover { border-color: #cb1738; background: linear-gradient(105deg, #fa4664, #e72247); box-shadow: 0 6px 16px #ed25472b; transform: translateY(-1px); }
.reference-layout .app-shell .button-primary:active,
.reference-layout .modal-backdrop .button-primary:active { transform: translateY(0); box-shadow: 0 2px 7px #ed25471a; }
.reference-layout .app-shell .button-quiet { border-color: #e8dfe5; color: #947b8a; }
.reference-layout .app-shell .button-quiet:hover { border-color: #dfa8ba; background: #fffafd; color: #ce345a; box-shadow: 0 3px 9px #b6244d08; }
.reference-layout .ref-section-title { color: #ac7f90; }
.reference-layout .ref-section-title::before { background: #ed6586; }
.reference-layout .ref-section-title > .ref-inline-note { color: #ab909c; }
.reference-layout .ref-card,
.reference-layout .ref-panel { border-color: #e8e4e9; box-shadow: 0 2px 5px #2d173202; transition: border-color .2s ease, box-shadow .22s ease, transform .22s cubic-bezier(.2, .7, .2, 1); }
.reference-layout .ref-card::before,
.reference-layout .ref-panel::before { background: linear-gradient(90deg, #ed2547, #f25c7f 55%, #e79abb); }
.reference-layout .ref-card:hover { z-index: 2; border-color: #eac6d2; box-shadow: 0 6px 15px #59234109; transform: translateY(-2px); }
.reference-layout .ref-panel:hover { border-color: #e9d5df; box-shadow: 0 5px 14px #59234106; }
.reference-layout .ref-kpi-symbol:hover { border-color: #e895ad; color: #dd3159; background: #fff5f8; }
.reference-layout .ref-card.balance .ref-spark > path[stroke] { stroke: #ed4c70; }
.reference-layout .ref-card.balance .ref-spark > circle { fill: #ed4c70; }
.reference-layout .ref-card.balance .ref-spark stop { stop-color: #ed4c70; }
.reference-layout .ref-panel-header > a:hover,
.reference-layout .ref-panel-header > button:hover { color: #d23f64; }
.reference-layout .ref-panel-header > button { transition: color .18s ease; }
.reference-layout .ref-production-stat { transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.reference-layout .ref-production-stat:hover { border-color: #edd3de; background: #fffafd; box-shadow: 0 2px 6px #6d274006; }
.reference-layout button.ref-summary-row:hover { background: #fff9fb; }
.reference-layout .ref-top-customer { transition: background .18s ease; }
.reference-layout .ref-top-customer:hover { background: #fffafb; }
.reference-layout .app-shell .sc-financial-details .sc-panel { border-color: #e8e2e9; box-shadow: 0 2px 7px #45203b03; }
.reference-layout .app-shell .sc-financial-details .tab.active { color: #ce3d64; }
.reference-layout .app-shell .transactions-table tbody tr { transition: background .18s ease; }
.reference-layout .app-shell .transactions-table tbody tr:hover td { background: #fff9fc; }
.reference-layout .app-shell .transactions-table tbody tr:focus-within td { background: #fff5fa; }
.reference-layout .sc-module-toolbar,
.reference-layout .sc-module-summary > * { border-color: #e8dee5; box-shadow: 0 2px 6px #49213903; }
.reference-layout .sc-module-search { border-color: #e8dce3; color: #a07b8c; }
.reference-layout .sc-module-search > input { color: #886c7d; }
.reference-layout .sc-module-search:focus-within { border-color: #de9eb4; box-shadow: 0 0 0 2px #ed25470e; }
.reference-layout .sc-module-summary > * { border-top-color: #ef7797; }
.reference-layout .sc-module-summary small,
.reference-layout .sc-module-summary span { color: #a68b9b; }
.reference-layout .sc-module-summary strong { color: #775b70; }
.reference-layout .sc-module-actions > button { border-color: #e8d5df; color: #b76b8b; transition: color .18s ease, border-color .18s ease, background .18s ease; }
.reference-layout .sc-module-actions > button:hover { border-color: #dd9bb4; background: #fff4f8; color: #cf3c69; }
.reference-layout .sc-module-note { border-color: #efe0e8; background: #fffafc; color: #ae8c9d; }
.reference-layout .app-shell button:focus-visible,
.reference-layout .app-shell a:focus-visible,
.reference-layout .app-shell select:focus-visible,
.reference-layout .app-shell input:focus-visible,
.reference-layout .app-shell [tabindex]:focus-visible { outline-color: #e997b4; }
.reference-layout .modal-backdrop button:focus-visible { outline-color: #e997b4; }
.reference-layout .modal-backdrop .form-field input:focus,
.reference-layout .modal-backdrop .form-field select:focus,
.reference-layout .modal-backdrop .currency-input:focus-within { border-color: #e297b1; box-shadow: 0 0 0 3px #ed25470c; }
.reference-layout .app-shell .page-footer { color: #b09aa8; }
.reference-layout .app-shell .page-footer strong { color: #9c7a8d; }

/* A saved record gets a clear, calm confirmation at the center of the screen. */
.reference-layout .sc-success-dialog {
  width: min(390px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 40px);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 21px;
  background: transparent;
  color: #293a52;
  font-family: "DM Sans", sans-serif;
}
.reference-layout .sc-success-dialog:not([open]) { display: none; }
.reference-layout .sc-success-dialog[open] { display: block; animation: sc-success-enter .28s cubic-bezier(.2, .8, .2, 1) both; }
.reference-layout .sc-success-dialog::backdrop { background: #12141b75; backdrop-filter: blur(5px); animation: sc-success-backdrop .25s ease both; }
.reference-layout .sc-success-card { position: relative; max-height: calc(100dvh - 40px); padding: 29px 30px 25px; overflow-y: auto; border: 1px solid #fff; border-radius: 21px; background: radial-gradient(ellipse at 50% 0, #fff2f6, #fff 47%); box-shadow: 0 25px 95px #1412223d, 0 4px 15px #24112512; text-align: center; }
.reference-layout .sc-success-close { position: absolute; z-index: 3; top: 13px; right: 13px; display: grid; width: 29px; height: 29px; place-items: center; padding: 0; border: 1px solid #f1e9ef; border-radius: 50%; background: #ffffffc9; color: #b5a7b3; font: 20px/1 "DM Sans", sans-serif; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
.reference-layout .sc-success-close:hover { border-color: #efc8d6; background: #fff4f8; color: #ce4d75; transform: rotate(4deg); }
.reference-layout .sc-success-art { position: relative; display: grid; width: 150px; height: 128px; place-items: center; margin: 1px auto 14px; }
.reference-layout .sc-success-halo { position: absolute; inset: 0 11px; border: 1px solid #f5dce5; border-radius: 50%; background: radial-gradient(circle, #ffe0ea75 0, #ffecf440 49%, #fff4f800 74%); box-shadow: 0 0 0 12px #fff0f535; }
.reference-layout .sc-success-halo::before { position: absolute; inset: 12px; border: 1px dashed #efc1d1; border-radius: 50%; opacity: .5; content: ""; }
.reference-layout .sc-success-icon { position: relative; z-index: 1; width: 83px; height: 83px; overflow: visible; filter: drop-shadow(0 8px 12px #ed254728); }
.reference-layout .sc-success-icon > circle { fill: #ed2547; stroke: #ed2547; stroke-width: 0; }
.reference-layout .sc-success-check { fill: none; stroke: #fff; stroke-width: 4.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 0; }
.reference-layout .sc-success-dialog[open] .sc-success-icon { animation: sc-success-pop .46s .06s cubic-bezier(.2, .8, .2, 1) both; }
.reference-layout .sc-success-dialog[open] .sc-success-check { animation: sc-success-check .5s .2s ease both; }
.reference-layout .sc-success-dialog[open] .sc-success-halo { animation: sc-success-halo .55s .08s ease both; }
.reference-layout .sc-success-spark { position: absolute; z-index: 2; width: 5px; height: 5px; border-radius: 50%; background: #f5a2bb; box-shadow: 0 0 0 3px #fce1eb85; }
.reference-layout .sc-success-spark.spark-one { top: 20px; left: 23px; width: 4px; height: 4px; background: #ee87a7; }
.reference-layout .sc-success-spark.spark-two { top: 32px; right: 15px; width: 6px; height: 6px; }
.reference-layout .sc-success-spark.spark-three { right: 31px; bottom: 11px; width: 4px; height: 4px; background: #eab4c7; }
.reference-layout .sc-success-dialog[open] .sc-success-spark { animation: sc-success-spark .65s .14s ease both; }
.reference-layout .sc-success-eyebrow { display: block; margin: 0 0 8px; color: #d05e80; font-size: 9px; font-weight: 700; letter-spacing: 1.7px; line-height: 1.5; text-transform: uppercase; }
.reference-layout .sc-success-card h2 { margin: 0; overflow-wrap: anywhere; color: #35405a; font: 800 25px/1.3 Manrope, "DM Sans", sans-serif; letter-spacing: -.8px; }
.reference-layout .sc-success-card p { margin: 11px 0 25px; overflow-wrap: anywhere; color: #8a8fa2; font-size: 13px; line-height: 1.75; }
.reference-layout .sc-success-continue { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 12px 17px; border: 1px solid #e42649; border-radius: 10px; background: linear-gradient(105deg, #fa3557, #e41f43); box-shadow: 0 6px 16px #ed254721; color: #fff; font: 700 12px/1.5 "DM Sans", sans-serif; cursor: pointer; transition: border-color .18s ease, box-shadow .2s ease, background .18s ease, transform .18s ease; }
.reference-layout .sc-success-continue:hover { border-color: #cf1d40; background: linear-gradient(105deg, #fa4666, #e62048); box-shadow: 0 8px 20px #ed254730; transform: translateY(-1px); }
.reference-layout .sc-success-continue:active { transform: translateY(0); }
.reference-layout .sc-success-footnote { display: block; margin-top: 13px; color: #b4acbb; font-size: 9px; line-height: 1.7; }
.reference-layout .sc-success-card button:focus-visible { outline: 3px solid #ef9fbb; outline-offset: 4px; }
.reference-layout .sc-confirm-dialog { width: min(460px, calc(100vw - 32px)); margin: auto; }
.reference-layout .sc-confirm-symbol { display: grid; place-items: center; width: 70px; height: 70px; margin: 6px auto 22px; border: 1px solid #f4d3df; border-radius: 22px; background: #fff0f5; color: #e91b49; }
.reference-layout .sc-confirm-symbol svg { width: 33px; height: 33px; }
.reference-layout .sc-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reference-layout .sc-confirm-actions button { justify-content: center; min-height: 44px; font: 600 13px/1.5 "DM Sans", sans-serif; }
.reference-layout .sc-success-dialog.is-transient .sc-success-continue { display: none; }
.reference-layout .sc-success-dialog.is-transient .sc-success-card p { margin-bottom: 10px; }
.reference-layout .sc-saving-spinner { display: inline-block; width: 13px; height: 13px; flex: none; margin-right: 2px; border: 2px solid currentColor; border-right-color: transparent; border-bottom-color: transparent; border-radius: 50%; vertical-align: -2px; animation: sc-saving-rotate .7s linear infinite; }
.reference-layout button[aria-busy="true"] { cursor: wait; }
.reference-layout .app-shell button[aria-busy="true"],
.reference-layout .modal-backdrop button[aria-busy="true"] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

@keyframes sc-saving-rotate { to { transform: rotate(360deg); } }
@keyframes sc-success-enter { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sc-success-backdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes sc-success-check { from { stroke-dashoffset: 48; } to { stroke-dashoffset: 0; } }
@keyframes sc-success-pop { from { opacity: 0; transform: scale(.7); } 65% { opacity: 1; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
@keyframes sc-success-halo { from { opacity: 0; transform: scale(.78); } to { opacity: 1; transform: scale(1); } }
@keyframes sc-success-spark { from { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.2); } to { opacity: 1; transform: scale(1); } }

@media (hover: none) {
  .reference-layout .ref-card:hover { transform: none; }
  .reference-layout .app-shell .nav-item:hover .nav-icon { transform: none; }
}
@media (max-width: 500px) {
  .reference-layout .sc-success-dialog { width: min(360px, calc(100vw - 28px)); max-width: calc(100vw - 28px); }
  .reference-layout .sc-success-card { padding: 26px 23px 23px; border-radius: 18px; }
  .reference-layout .sc-success-art { height: 122px; margin-bottom: 13px; }
  .reference-layout .sc-success-card h2 { font-size: 23px; }
  .reference-layout .sc-success-card p { margin-bottom: 23px; font-size: 12px; }
  .reference-layout .sc-success-continue { min-height: 44px; }
  .reference-layout .sc-success-footnote { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .reference-layout .app-shell *,
  .reference-layout .app-shell *::before,
  .reference-layout .app-shell *::after,
  .reference-layout .modal-backdrop *,
  .reference-layout .modal-backdrop *::before,
  .reference-layout .modal-backdrop *::after,
  .reference-layout .sc-success-dialog,
  .reference-layout .sc-success-dialog::backdrop,
  .reference-layout .sc-success-card *,
  .reference-layout .sc-success-card *::before,
  .reference-layout .sc-saving-spinner { animation: none !important; transition: none !important; }
  .reference-layout .ref-card:hover,
  .reference-layout .app-shell .nav-item:hover .nav-icon,
  .reference-layout .sc-success-continue:hover,
  .reference-layout .sc-success-close:hover { transform: none; }
  .reference-layout .sc-success-check { stroke-dashoffset: 0; }
}