/* Generated by npm run build. Edit erp-ui/styles/, then rebuild. */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer components {
  .voucher .page-head {
    padding-bottom: var(--s-5);
  }
  .v-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .v-title .chip {
    height: 24px;
  }
  .v-state {
    margin-inline-start: auto;
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .v-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--s-5);
    align-items: start;
  }
  .v-main {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    min-width: 0;
  }
  .v-header {
    padding: var(--s-5);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
  .v-header .span-2 {
    grid-column: span 2;
  }
  .v-header .span-4 {
    grid-column: span 4;
  }
  .v-header .seg {
    width: 100%;
    height: 52px;
  }
  .v-header .seg-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .v-header .seg-wrap .field-label {
    font-size: 11px;
    --tw-leading: 1;
    line-height: 1;
    padding-inline-start: 2px;
  }
  .v-header .seg-wrap .seg {
    height: 38px;
  }
  .party-strip {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
  }
  .party-strip .pill {
    height: 24px;
    font-size: 12px;
    padding: 0 9px;
    background: var(--fill-2);
  }
  .party-strip .pill b {
    --tw-font-weight: 600;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .party-strip .pill.warn {
    background: var(--orange-tint);
    color: var(--orange-text);
  }
  .party-opt .name small {
    display: flex;
    gap: 8px;
  }
  .v-summary {
    position: sticky;
    top: calc(var(--toolbar-h) + 12px);
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .v-summary h3 {
    font: var(--headline);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .sum-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 30px;
    font: var(--callout);
    font-variant-numeric: tabular-nums;
  }
  .sum-row .k {
    color: var(--label-2);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .sum-row .v {
    --tw-font-weight: 500;
    font-weight: 500;
    white-space: nowrap;
  }
  .sum-row.sub .k {
    padding-inline-start: 12px;
    font-size: 13px;
  }
  .sum-row.sub .v {
    color: var(--label-2);
    font-size: 13px;
  }
  .sum-row .input-wrap {
    width: 132px;
    height: 30px;
    border-radius: 8px;
  }
  .sum-row .input-wrap input {
    font-size: 14px;
  }
  .sum-sep {
    height: 1px;
    background: var(--separator);
    margin: 8px 0;
  }
  .grand {
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--separator);
  }
  .grand .k {
    font: var(--caption);
    --tw-tracking: var(--caption-track);
    letter-spacing: var(--caption-track);
    text-transform: uppercase;
    color: var(--label-2);
  }
  .grand .t-display {
    margin-top: 4px;
    white-space: nowrap;
    font-size: clamp(30px, 3.1vw, 44px);
    --tw-leading: 1.1;
    line-height: 1.1;
  }
  .grand .t-display .cur {
    font-size: .5em;
    color: var(--label-2);
    vertical-align: .6em;
    margin-inline-end: 4px;
    --tw-font-weight: 600;
    font-weight: 600;
  }
  .grand .t-display .dec {
    font-size: .5em;
    color: var(--label-2);
  }
  .grand .words {
    font: var(--footnote);
    color: var(--label-2);
    margin-top: 6px;
  }
  .sum-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
  }
  .sum-meta .m {
    background: var(--fill-2);
    border-radius: 10px;
    padding: 8px 10px;
  }
  .sum-meta .m .k {
    font: 500 11px/1 var(--font-sans);
    color: var(--label-2);
    text-transform: uppercase;
    --tw-tracking: .3px;
    letter-spacing: .3px;
  }
  .sum-meta .m .v {
    font: 600 15px/1 var(--font-sans);
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
  }
  .balance-ind {
    border-radius: 12px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    transition: background var(--dur-2);
  }
  .balance-ind.ok {
    background: var(--green-tint);
    color: var(--green-text);
  }
  .balance-ind.bad {
    background: var(--red-tint);
    color: var(--red-text);
  }
  .balance-ind .icon-tile {
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }
  .balance-ind.ok .icon-tile {
    background: var(--green);
  }
  .balance-ind.bad .icon-tile {
    background: var(--red);
  }
  .balance-ind b {
    display: block;
    font: 600 15px/20px var(--font-sans);
  }
  .balance-ind span {
    font: var(--footnote);
  }
  .diff-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font: 600 13px/1 var(--font-sans);
    font-variant-numeric: tabular-nums;
  }
  .diff-pill.ok {
    background: var(--green-tint);
    color: var(--green-text);
  }
  .diff-pill.bad {
    background: var(--red);
    color: #fff;
  }
  .v-bottom {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: var(--s-6) calc(var(--gutter) * -1) -72px;
    padding: 12px var(--gutter);
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(var(--bg-rgb), .76);
    -webkit-backdrop-filter: var(--blur-regular);
    backdrop-filter: var(--blur-regular);
    border-top: 1px solid var(--separator);
  }
  .v-bottom .narr {
    flex: 1;
    min-width: 160px;
    max-width: 520px;
  }
  .v-bottom .attach {
    position: relative;
  }
  .v-bottom .attach .badge {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
  }
  .v-bottom .posted-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font: var(--footnote);
    color: var(--label-2);
  }
  .v-bottom .posted-info .icon-tile {
    width: 28px;
    height: 28px;
    border-radius: 50%;
  }
  .v-err-banner {
    margin-bottom: var(--s-4);
  }
  .v-locked .v-header .input, .v-locked .v-header .select, .v-locked .v-header .input-wrap {
    pointer-events: none;
    background: var(--fill-2);
  }
  .v-locked .v-header .seg {
    pointer-events: none;
    opacity: .7;
  }
  .watermark {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
    border: 4px solid var(--accent);
    color: var(--accent);
    font: 800 48px/1 var(--font-sans);
    --tw-tracking: 8px;
    letter-spacing: 8px;
    padding: 10px 22px;
    border-radius: 16px;
    opacity: .12;
    pointer-events: none;
    z-index: 1;
  }
  .v-locked .v-header .ff-meta {
    visibility: hidden;
  }
  .alloc-table {
    width: 100%;
    font-variant-numeric: tabular-nums;
  }
  .alloc-table th {
    font: var(--caption);
    --tw-tracking: var(--caption-track);
    letter-spacing: var(--caption-track);
    text-transform: uppercase;
    color: var(--label-2);
    text-align: start;
    padding: 0 8px 8px;
    border-bottom: 1px solid var(--separator);
  }
  .alloc-table th.num, .alloc-table td.num {
    text-align: end;
  }
  .alloc-table td {
    padding: 8px;
    border-bottom: 1px solid var(--separator);
    font: var(--callout);
    height: 52px;
  }
  .alloc-table tr.is-on td {
    background: var(--accent-tint);
  }
  .alloc-table td.nw {
    white-space: nowrap;
  }
  .alloc-table td .chip {
    margin-top: 4px;
  }
  .alloc-table td.due {
    --tw-leading: 1.2;
    line-height: 1.2;
  }
  .alloc-table .input-wrap {
    width: 112px;
    height: 32px;
    margin-inline-start: auto;
  }
  .alloc-wrap {
    overflow-x: auto;
    margin-inline: -4px;
    padding-inline: 4px;
  }
  .alloc-table th, .alloc-table td {
    padding-inline: 6px;
  }
  .alloc-sum {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
  }
  .alloc-sum .m {
    background: var(--fill-2);
    border-radius: 12px;
    padding: 12px;
  }
  .alloc-sum .m .k {
    font: var(--caption);
    --tw-tracking: var(--caption-track);
    letter-spacing: var(--caption-track);
    text-transform: uppercase;
    color: var(--label-2);
  }
  .alloc-sum .m .v {
    font: 700 20px/1.2 var(--font-sans);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
    --tw-tracking: -.01em;
    letter-spacing: -.01em;
  }
  .v-header {
    position: relative;
  }
  .v-party .ff .ff-meta {
    top: 9px;
  }
  .v-alloc-btn {
    width: 100%;
    height: 38px;
    justify-content: flex-start;
    gap: 8px;
  }
  .v-scan {
    width: 240px;
    height: 32px;
    border-radius: 8px;
  }
  .v-scan > input {
    font-size: 13px;
  }
  .sum-row .k .i {
    width: 14px;
    height: 14px;
    color: var(--label-3);
  }
  .sum-row .k .switch {
    margin-inline-end: 2px;
  }
  .v-summary h3 .chip {
    height: 22px;
  }
  .v-bottom .btn .kbd {
    margin-inline-start: 4px;
    height: 18px;
    font-size: 11px;
  }
  .v-bottom .btn-filled .kbd {
    background: rgba(255, 255, 255, .22);
    color: #fff;
    box-shadow: none;
    border-color: transparent;
  }
  .v-bottom .btn-tinted .kbd {
    background: rgba(var(--accent-rgb), .14);
    color: var(--accent);
  }
  .v-bottom .attach .badge[hidden] {
    display: none;
  }
  .v-drop {
    margin-top: 12px;
    padding: var(--s-5);
    cursor: pointer;
  }
  .v-drop .i {
    width: 24px;
    height: 24px;
  }
  .v-drop small {
    font: var(--caption);
  }
  .v-att-list .list-row {
    padding-block: 8px;
  }
  .alloc-table td .chip {
    margin-inline-start: 6px;
  }
  .alloc-table .check {
    margin: 0;
  }
  .v-locked .v-summary .input-wrap {
    background: var(--fill-2);
    pointer-events: none;
  }
  .v-locked .v-alloc-btn {
    pointer-events: none;
    opacity: .7;
  }
  @media (max-width: 1440px) {
    .v-hint {
      display: none;
    }
  }
  @media (max-width: 1280px) {
    .v-layout {
      grid-template-columns: minmax(0, 1fr) 300px;
    }
    .v-scan {
      width: 190px;
    }
  }
  @media (max-width: 1100px) {
    .v-layout {
      grid-template-columns: 1fr;
    }
    .v-summary {
      position: static;
    }
    .v-header {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .v-header .span-4 {
      grid-column: span 2;
    }
  }
  @media (max-width: 640px) {
    .v-header {
      grid-template-columns: 1fr;
    }
    .v-header .span-2, .v-header .span-4 {
      grid-column: span 1;
    }
    .v-bottom {
      flex-wrap: wrap;
    }
    .v-bottom .narr {
      max-width: none;
      flex-basis: 100%;
    }
  }
  .tbl-card {
    overflow: hidden;
  }
  .tbl-scroll {
    overflow-x: auto;
  }
  .tbl {
    width: 100%;
    font-variant-numeric: tabular-nums;
    font-feature-settings: var(--font-features);
  }
  .tbl th {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 38px;
    padding: 0 12px;
    text-align: start;
    white-space: nowrap;
    font: var(--caption);
    --tw-tracking: var(--caption-track);
    letter-spacing: var(--caption-track);
    text-transform: uppercase;
    color: var(--label-2);
    background: var(--surface);
    border-bottom: 1px solid var(--separator);
  }
  .tbl td {
    height: 56px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--separator);
    font: var(--callout);
    vertical-align: middle;
  }
  .tbl tbody tr:last-child td {
    border-bottom: 0;
  }
  .tbl th.num, .tbl td.num {
    text-align: end;
    white-space: nowrap;
  }
  .tbl th.ck, .tbl td.ck {
    width: 44px;
    padding-inline-end: 0;
  }
  .tbl th.act, .tbl td.act {
    width: 48px;
    text-align: end;
  }
  .tbl tbody tr {
    transition: background var(--dur-1);
  }
  .tbl tbody tr.link {
    cursor: pointer;
  }
  .tbl tbody tr:hover td {
    background: var(--fill-hover);
  }
  .tbl tbody tr.is-sel td {
    background: var(--accent-tint);
  }
  .tbl tfoot td {
    height: 44px;
    --tw-font-weight: 600;
    font-weight: 600;
    border-top: 1px solid var(--separator);
    border-bottom: 0;
    background: var(--surface-2);
  }
  .tbl td {
    white-space: nowrap;
  }
  .tbl td.wrap-ok {
    white-space: normal;
    min-width: 260px;
  }
  .tbl .sub {
    display: block;
    font: var(--footnote);
    color: var(--label-2);
    margin-top: 1px;
  }
  .tbl .nm {
    --tw-font-weight: 500;
    font-weight: 500;
  }
  .tbl.compact td {
    height: 44px;
  }
  :root[data-density="compact"] .tbl td {
    height: 42px;
    padding-block: 4px;
  }
  .tbl .input, .tbl .select, .tbl .input-wrap {
    height: 34px;
    border-radius: 8px;
    font-size: 14px;
  }
  .tbl .input-wrap > input {
    font-size: 14px;
  }
  .cell-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }
  .dr-cr {
    font: 600 11px/1 var(--font-sans);
    color: var(--label-3);
    margin-inline-start: 4px;
    --tw-tracking: .3px;
    letter-spacing: .3px;
  }
  .row-act {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-grid;
    place-items: center;
    color: var(--label-3);
  }
  .row-act:hover {
    background: var(--fill-1);
    color: var(--label-1);
  }
  .row-act .i {
    width: 16px;
    height: 16px;
  }
  .filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--separator);
  }
  .filters .search {
    width: 280px;
    height: 34px;
  }
  .filters .select {
    width: auto;
    height: 34px;
    font-size: 14px;
    padding-inline-start: 10px;
  }
  .filters .count {
    font: var(--footnote);
    color: var(--label-2);
    margin-inline-start: auto;
  }
  .pills {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block: 2px;
  }
  .pills::-webkit-scrollbar {
    display: none;
  }
  .pills .pill {
    flex: none;
  }
  .kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-4);
    margin-bottom: var(--s-5);
  }
  .kpi-strip .kpi {
    min-height: 0;
    padding: var(--s-4) var(--s-5);
  }
  .kpi-strip .kpi-value {
    font: 700 26px/32px var(--font-sans);
    --tw-tracking: -.02em;
    letter-spacing: -.02em;
    margin-top: 2px;
  }
  .kpi-strip .kpi-meta {
    margin-top: 2px;
  }
  .bulk-bar {
    position: fixed;
    z-index: 50;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 140%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 16px;
    border-radius: 16px;
    background: var(--mat-thick);
    -webkit-backdrop-filter: var(--blur-thick);
    backdrop-filter: var(--blur-thick);
    box-shadow: var(--shadow-lg), inset 0 0 0 .5px var(--mat-border);
    transition: transform 420ms var(--ease-spring);
    white-space: nowrap;
  }
  .bulk-bar.is-on {
    transform: translate(-50%, 0);
  }
  .bulk-bar .n {
    font: 600 14px/1 var(--font-sans);
    margin-inline-end: 8px;
    font-variant-numeric: tabular-nums;
  }
  .usage {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 150px;
  }
  .usage .progress {
    flex: 1;
  }
  .usage .progress > span.warn {
    background: var(--orange);
  }
  .usage .progress > span.bad {
    background: var(--red);
  }
  .usage b {
    font: 600 12px/1 var(--font-sans);
    color: var(--label-2);
    width: 36px;
    text-align: end;
    font-variant-numeric: tabular-nums;
  }
  .swatch {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex: none;
    display: grid;
    place-items: center;
    color: #fff;
    font: 700 14px/1 var(--font-sans);
    --tw-tracking: -.02em;
    letter-spacing: -.02em;
    background: linear-gradient(145deg, hsl(var(--h, 210) 75% 62%), hsl(var(--h, 210) 70% 46%));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  }
  .dash-head {
    display: flex;
    align-items: flex-end;
    gap: var(--s-4);
    flex-wrap: wrap;
    padding: 4px 0 var(--s-5);
  }
  .dash-head .date {
    font: 600 13px/18px var(--font-sans);
    --tw-tracking: .4px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--label-2);
  }
  .dash-head h1 {
    font: 700 40px/46px var(--font-sans);
    --tw-tracking: -0.028em;
    letter-spacing: -0.028em;
    margin-top: 2px;
  }
  .dash-head .sub {
    font: var(--callout);
    color: var(--label-2);
    margin-top: 4px;
  }
  .quick {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--s-3);
    margin-bottom: var(--s-5);
  }
  .quick a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    color: var(--label-1);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    font: 600 14px/18px var(--font-sans);
    transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-spring);
  }
  .quick a:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    text-decoration: none;
  }
  .quick a:active {
    transform: scale(.97);
  }
  .quick a small {
    display: block;
    font: var(--footnote);
    color: var(--label-2);
    --tw-font-weight: 400;
    font-weight: 400;
  }
  .quick .kbd {
    margin-inline-start: auto;
    display: none;
  }
  .quick a > span:nth-child(2) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  @media (min-width: 1600px) {
    .quick .kbd {
      display: inline-flex;
    }
  }
  .delta .tri {
    width: 8px;
    height: 8px;
    flex: none;
  }
  .bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--s-5);
  }
  .bento > * {
    grid-column: span 12;
    min-width: 0;
  }
  .bento .b-kpi {
    grid-column: span 4;
  }
  .bento .b-8 {
    grid-column: span 8;
  }
  .bento .b-7 {
    grid-column: span 7;
  }
  .bento .b-5 {
    grid-column: span 5;
  }
  .bento .b-4 {
    grid-column: span 4;
  }
  .bento .b-tall {
    grid-row: span 2;
  }
  .b-kpi.kpi {
    min-height: 172px;
  }
  .b-kpi .kpi-value {
    font-size: clamp(30px, 2.8vw, 40px);
    --tw-leading: 1.15;
    line-height: 1.15;
    margin-top: auto;
  }
  .b-kpi .spark {
    width: 112px;
    height: 40px;
    top: 20px;
  }
  .b-kpi .kpi-meta {
    margin-top: 4px;
  }
  .b-kpi.hero {
    background: linear-gradient(150deg, var(--accent) 0%, var(--accent) 45%, var(--accent) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 92%, #fff) 0%, var(--accent) 45%, color-mix(in srgb, var(--accent) 70%, #1d1d8f) 100%);
    }
    color: #fff;
  }
  .b-kpi.hero .kpi-label, .b-kpi.hero .kpi-meta, .b-kpi.hero .kpi-value .cur, .b-kpi.hero .kpi-value .dec {
    color: rgba(255,255,255,.82);
  }
  .b-kpi.hero .kpi-icon {
    background: rgba(255,255,255,.2) !important;
  }
  .b-kpi.hero .delta.up {
    background: rgba(255,255,255,.2);
    color: #fff;
  }
  .chart-box {
    padding: 8px var(--s-5) var(--s-5);
  }
  .chart-area {
    height: 300px;
  }
  .chart-bars {
    height: 236px;
  }
  .donut-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    align-items: stretch;
    padding: var(--s-5);
  }
  .donut-wrap .age-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
  }
  .age-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
  }
  .age-legend .r {
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: 2px 8px;
    align-items: center;
    font: var(--callout);
  }
  .age-legend .r i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
  }
  .age-legend .r span {
    color: var(--label-2);
    font: var(--footnote);
  }
  .age-legend .r b {
    grid-column: 2;
    --tw-font-weight: 600;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .age-legend .r small {
    grid-column: 2;
    font: var(--footnote);
    color: var(--label-3);
  }
  .tx-list .list-row .s {
    font-variant-numeric: tabular-nums;
  }
  .tx-list .amt small {
    display: block;
    margin-top: 3px;
    text-align: end;
  }
  .low-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    align-items: center;
    padding: 12px var(--s-5);
    border-top: 1px solid var(--separator);
  }
  .low-row:first-child {
    border-top: 0;
  }
  .low-row .t {
    font: 500 14px/19px var(--font-sans);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .low-row .progress {
    grid-column: 1 / -1;
    height: 5px;
  }
  .low-row .s {
    font: var(--footnote);
    color: var(--label-2);
    font-variant-numeric: tabular-nums;
  }
  @media (max-width: 1280px) {
    .quick {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (max-width: 1024px) {
    .bento .b-8, .bento .b-7 {
      grid-column: span 12;
    }
    .bento .b-4, .bento .b-5 {
      grid-column: span 6;
    }
    .bento .b-tall {
      grid-row: auto;
    }
    .b-kpi .spark {
      width: 84px;
    }
    .bento .b-low {
      grid-column: span 12;
    }
  }
  @media (max-width: 768px) {
    .bento .b-kpi, .bento .b-4, .bento .b-5 {
      grid-column: span 6;
    }
    .bento .b-wide-sm, .bento .b-low {
      grid-column: span 12;
    }
    .dash-head h1 {
      font: var(--title-1);
      --tw-tracking: var(--title-1-track);
      letter-spacing: var(--title-1-track);
    }
    .kpi-strip {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .filters .search {
      width: 100%;
    }
  }
  @media (max-width: 560px) {
    .bento .b-kpi, .bento .b-4, .bento .b-5 {
      grid-column: span 12;
    }
    .quick {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .quick .kbd {
      display: none;
    }
    .donut-wrap {
      grid-template-columns: 1fr;
    }
  }
  .prod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--s-4);
    padding: var(--s-5);
  }
  .prod-card {
    position: relative;
    border-radius: 14px;
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--separator);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-spring);
  }
  .prod-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover), inset 0 0 0 1px var(--separator);
  }
  .prod-card.is-sel {
    box-shadow: inset 0 0 0 2px var(--accent);
  }
  .prod-card .art {
    height: 128px;
    display: grid;
    place-items: center;
    color: #fff;
    font: 700 34px/1 var(--font-sans);
    --tw-tracking: -.03em;
    letter-spacing: -.03em;
    background: radial-gradient(120% 100% at 20% 0%, hsl(var(--h) 80% 70%), hsl(var(--h) 70% 45%));
  }
  .prod-card .art small {
    display: block;
    font: 600 11px/1 var(--font-sans);
    --tw-tracking: .6px;
    letter-spacing: .6px;
    text-transform: uppercase;
    opacity: .8;
    margin-top: 8px;
    text-align: center;
  }
  .prod-card .check {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
  }
  .prod-card .check input {
    background: rgba(255,255,255,.9);
  }
  .prod-card .gst {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    background: rgba(0,0,0,.28);
    color: #fff;
    font: 600 11px/1 var(--font-sans);
    padding: 5px 7px;
    border-radius: 6px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .prod-card .body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .prod-card .nm {
    font: 600 14px/19px var(--font-sans);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 38px;
  }
  .prod-card .meta {
    font: var(--footnote);
    color: var(--label-2);
  }
  .prod-card .foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
  }
  .prod-card .price {
    font: 700 17px/1 var(--font-sans);
    font-variant-numeric: tabular-nums;
    --tw-tracking: -.01em;
    letter-spacing: -.01em;
  }
  .prod-card .price s {
    font: 400 12px/1 var(--font-sans);
    color: var(--label-3);
    margin-inline-start: 4px;
  }
  .margin-txt {
    font: 600 12px/1 var(--font-sans);
    font-variant-numeric: tabular-nums;
  }
  @media (max-width: 1024px) {
    .hide-lg {
      display: none !important;
    }
  }
  .pn-layout {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) 312px;
    gap: var(--s-6);
    align-items: start;
  }
  .pn-nav {
    position: sticky;
    top: calc(var(--toolbar-h) + 12px);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .pn-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 10px;
    border-radius: 9px;
    color: var(--label-2);
    font: 500 14px/1 var(--font-sans);
    transition: background var(--dur-1), color var(--dur-1);
  }
  .pn-nav a .i {
    width: 17px;
    height: 17px;
  }
  .pn-nav a:hover {
    background: var(--fill-hover);
    color: var(--label-1);
    text-decoration: none;
  }
  .pn-nav a.is-on {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--shadow-card);
    --tw-font-weight: 600;
    font-weight: 600;
  }
  .pn-nav .prog {
    margin: 14px 10px 0;
    font: var(--footnote);
    color: var(--label-2);
  }
  .pn-nav .prog .progress {
    margin-top: 8px;
  }
  .pn-form {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-7);
  }
  .pn-sec {
    scroll-margin-top: calc(var(--toolbar-h) + 16px);
  }
  .pn-sec > h2 {
    font: var(--title-3);
    --tw-tracking: var(--title-3-track);
    letter-spacing: var(--title-3-track);
    margin: 0 0 10px var(--s-4);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .pn-sec > h2 .icon-tile {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }
  .pn-sec > h2 .icon-tile .i {
    width: 15px;
    height: 15px;
  }
  .pn-sec .group + .group-title {
    margin-top: var(--s-5);
  }
  .frow {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 56px;
    padding: 8px var(--s-4);
    position: relative;
  }
  .frow + .frow::before, .group > * + .frow::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: var(--s-4) 0;
    height: 1px;
    background: var(--separator);
  }
  .frow > .label {
    flex: 0 0 168px;
    font: var(--body);
  }
  .frow > .label small {
    display: block;
    font: var(--footnote);
    color: var(--label-2);
    margin-top: 2px;
  }
  .frow > .ctl {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .frow > .ctl > .input, .frow > .ctl > .input-wrap, .frow > .ctl > .select, .frow > .ctl > .combo {
    flex: 1 1 220px;
    max-width: 440px;
  }
  .frow > .ctl > .combo > .input {
    width: 100%;
  }
  .frow:has(> .ctl > .switch:only-child) > .label {
    flex: 1 1 auto;
  }
  .frow:has(> .ctl > .switch:only-child) > .ctl {
    flex: none;
  }
  .frow.block {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-block: 14px;
  }
  .frow.block > .label {
    flex: none;
  }
  .frow .input-wrap .btn-icon {
    color: var(--accent);
  }
  .name-input {
    border: 0;
    background: transparent;
    width: 100%;
    font: 700 28px/34px var(--font-sans);
    --tw-tracking: -0.022em;
    letter-spacing: -0.022em;
    padding: 6px 0;
  }
  .name-input::placeholder {
    color: var(--label-3);
  }
  .name-input:focus {
    outline: none;
    box-shadow: none;
  }
  .frow.name-row {
    padding-block: 14px 10px;
  }
  .price-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .price-cell {
    padding: 14px var(--s-4);
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--separator);
  }
  .price-cell:nth-child(-n+2) {
    border-top: 0;
  }
  .price-cell:nth-child(odd) {
    border-inline-end: 1px solid var(--separator);
  }
  .price-cell .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font: 500 13px/18px var(--font-sans);
    color: var(--label-2);
  }
  .price-cell .input-wrap {
    height: 44px;
  }
  .price-cell .input-wrap > input {
    font: 600 20px/1 var(--font-sans);
    --tw-tracking: -.01em;
    letter-spacing: -.01em;
  }
  .mchip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font: 600 12px/1 var(--font-sans);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: background var(--dur-2), color var(--dur-2);
  }
  .mchip.good {
    background: var(--green-tint);
    color: var(--green-text);
  }
  .mchip.ok {
    background: var(--orange-tint);
    color: var(--orange-text);
  }
  .mchip.bad {
    background: var(--red-tint);
    color: var(--red-text);
  }
  .mchip.none {
    background: var(--fill-1);
    color: var(--label-2);
  }
  .price-note {
    padding: 10px var(--s-4);
    border-top: 1px solid var(--separator);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    font: var(--footnote);
    color: var(--label-2);
  }
  .group .tbl th {
    background: var(--surface-2);
  }
  .group .tbl td, .group .tbl th {
    padding-inline: var(--s-4) 8px;
  }
  .group-add {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px var(--s-4);
    border-top: 1px solid var(--separator);
  }
  .attr {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 12px var(--s-4);
    border-top: 1px solid var(--separator);
  }
  .attr:first-child {
    border-top: 0;
  }
  .attr .input {
    height: 38px;
  }
  .chipfield {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-height: 38px;
    padding: 4px 6px;
    border-radius: var(--r-control);
    background: var(--fill-1);
    border: 1px solid transparent;
    cursor: text;
  }
  .chipfield:focus-within {
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
  }
  .chipfield input {
    flex: 1;
    min-width: 90px;
    border: 0;
    background: none;
    height: 28px;
    font: var(--callout);
  }
  .chipfield input:focus {
    outline: none;
    box-shadow: none;
  }
  .tchip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 4px 0 10px;
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-sm), inset 0 0 0 .5px var(--separator);
    font: 500 13px/1 var(--font-sans);
    animation: pop-in var(--dur-2) var(--ease-spring) both;
  }
  .tchip button {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--label-3);
  }
  .tchip button:hover {
    background: var(--fill-1);
    color: var(--label-1);
  }
  .tchip button .i {
    width: 12px;
    height: 12px;
    stroke-width: 2.2;
  }
  .tchip .sw {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 .5px rgba(0,0,0,.2);
  }
  .bulk-edit {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px var(--s-4);
    background: var(--surface-2);
    border-top: 1px solid var(--separator);
    border-bottom: 1px solid var(--separator);
    font: var(--footnote);
    color: var(--label-2);
  }
  .bulk-edit .input-wrap {
    width: 120px;
    height: 32px;
  }
  @media (max-width: 1600px) {
    #varTbl .bc {
      display: none;
    }
  }
  .group #varTbl td, .group #varTbl th {
    padding-inline: 10px 6px;
  }
  .group #varTbl th.ck, .group #varTbl td.ck {
    padding-inline-start: var(--s-4);
  }
  .group #varTbl td.act, .group #varTbl th.act {
    padding-inline-end: var(--s-4);
    width: auto;
  }
  .bulk-edit .select {
    width: auto;
    height: 32px;
    font-size: 13px;
  }
  .img-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 12px;
    padding: var(--s-4);
  }
  .img-card {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    cursor: grab;
    background: var(--fill-2);
    box-shadow: inset 0 0 0 1px var(--separator);
    transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2), opacity var(--dur-1);
  }
  .img-card:hover {
    transform: translateY(-2px);
  }
  .img-card img, .img-card .ph {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .img-card .ph {
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.9);
    background: radial-gradient(120% 100% at 30% 0%, hsl(var(--h) 70% 70%), hsl(var(--h) 60% 42%));
  }
  .img-card .ph .i {
    width: 36px;
    height: 36px;
    stroke-width: 1.2;
  }
  .img-card.is-primary {
    box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px var(--accent-tint);
  }
  .img-card.is-dragging {
    opacity: .4;
  }
  .img-card.is-over {
    transform: scale(1.04);
    box-shadow: 0 0 0 2px var(--accent);
  }
  .img-card .cap {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 18px 10px 8px;
    font: 500 12px/1.2 var(--font-sans);
    color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,.55));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .img-card .ib {
    position: absolute;
    top: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.35);
    color: #fff;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .img-card .ib .i {
    width: 15px;
    height: 15px;
  }
  .img-card .ib.star {
    inset-inline-start: 6px;
  }
  .img-card .ib.del {
    inset-inline-end: 6px;
    opacity: 0;
    transition: opacity var(--dur-1);
  }
  .img-card:hover .ib.del, .img-card:focus-within .ib.del {
    opacity: 1;
  }
  .img-card.is-primary .ib.star {
    background: var(--yellow);
    color: #3a2a00;
  }
  .img-card.is-primary .ib.star .i {
    fill: currentColor;
  }
  .pn-drop {
    margin: var(--s-4) var(--s-4) 0;
    padding: var(--s-6);
    cursor: pointer;
  }
  .pn-drop b {
    color: var(--accent);
    --tw-font-weight: 600;
    font-weight: 600;
  }
  .pn-preview {
    position: sticky;
    top: calc(var(--toolbar-h) + 12px);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
  }
  .pn-preview .card-pad {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .pn-preview h4 {
    font: var(--caption);
    --tw-tracking: var(--caption-track);
    letter-spacing: var(--caption-track);
    text-transform: uppercase;
    color: var(--label-3);
  }
  .pn-preview .pos-tile {
    width: 168px;
    margin: 0 auto;
    pointer-events: none;
  }
  .inv-line {
    width: 100%;
    font: var(--footnote);
    font-variant-numeric: tabular-nums;
  }
  .inv-line th {
    font: 600 10px/1 var(--font-sans);
    --tw-tracking: .4px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--label-3);
    text-align: start;
    padding: 0 4px 6px;
    border-bottom: 1px solid var(--separator);
  }
  .inv-line td {
    padding: 8px 4px;
    vertical-align: top;
  }
  .inv-line .num {
    text-align: end;
  }
  .inv-line .nm {
    --tw-font-weight: 600;
    font-weight: 600;
    color: var(--label-1);
  }
  .inv-line small {
    display: block;
    color: var(--label-2);
  }
  .pv-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .pv-facts div {
    background: var(--fill-2);
    border-radius: 10px;
    padding: 8px 10px;
    font: var(--footnote);
    color: var(--label-2);
  }
  .pv-facts b {
    display: block;
    color: var(--label-1);
    font: 600 15px/20px var(--font-sans);
    font-variant-numeric: tabular-nums;
  }
  .pn-save {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: var(--s-6) calc(var(--gutter) * -1) -72px;
    padding: 12px var(--gutter);
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(var(--bg-rgb), .76);
    -webkit-backdrop-filter: var(--blur-regular);
    backdrop-filter: var(--blur-regular);
    border-top: 1px solid var(--separator);
  }
  .pn-save .st {
    font: var(--footnote);
    color: var(--label-2);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-inline-end: auto;
  }
  .pn-save .btn .kbd {
    margin-inline-start: 4px;
    height: 18px;
  }
  .pn-save .btn-filled .kbd {
    background: rgba(255,255,255,.22);
    color: #fff;
    box-shadow: none;
  }
  .is-disabled-sec {
    opacity: .45;
    pointer-events: none;
  }
  @media (max-width: 1280px) {
    .pn-layout {
      grid-template-columns: 168px minmax(0, 1fr);
    }
    .pn-preview {
      grid-column: 2;
      position: static;
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (max-width: 1024px) {
    .pn-layout {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--s-4);
    }
    .pn-nav {
      flex-direction: row;
      overflow-x: auto;
      top: var(--toolbar-h);
      z-index: 10;
      padding: 6px;
      margin-inline: -6px;
      border-radius: 14px;
      background: rgba(var(--bg-rgb), .8);
      -webkit-backdrop-filter: var(--blur-regular);
      backdrop-filter: var(--blur-regular);
      scrollbar-width: none;
    }
    .pn-nav a {
      flex: none;
    }
    .pn-nav .prog {
      display: none;
    }
    .pn-preview {
      grid-column: 1;
    }
  }
  @media (max-width: 768px) {
    .frow {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
    }
    .frow > .label {
      flex: none;
    }
    .frow > .ctl > * {
      max-width: none !important;
    }
    .price-grid, .pn-preview {
      grid-template-columns: 1fr;
    }
    .price-cell {
      border-inline-end: 0 !important;
      border-top: 1px solid var(--separator) !important;
    }
    .price-cell:first-child {
      border-top: 0 !important;
    }
    .attr {
      grid-template-columns: 1fr;
    }
  }
  .frow.is-error .name-input::placeholder {
    color: var(--red-text);
  }
  .frow.is-error::after {
    content: "Required";
    font: var(--footnote);
    color: var(--red-text);
  }
  .party-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: var(--s-6);
    align-items: center;
    padding: var(--s-6);
    margin-bottom: var(--s-5);
  }
  .party-hero h1 {
    font: var(--title-1);
    --tw-tracking: var(--title-1-track);
    letter-spacing: var(--title-1-track);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .party-hero .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 8px;
    font: var(--footnote);
    color: var(--label-2);
  }
  .party-hero .meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .party-hero .meta .i {
    width: 14px;
    height: 14px;
  }
  .party-hero .actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
  }
  .party-bal {
    text-align: end;
    padding-inline: var(--s-5);
    border-inline-start: 1px solid var(--separator);
  }
  .party-bal .k {
    font: var(--caption);
    --tw-tracking: var(--caption-track);
    letter-spacing: var(--caption-track);
    text-transform: uppercase;
    color: var(--label-2);
  }
  .party-bal .v {
    font: 700 34px/40px var(--font-sans);
    --tw-tracking: -.02em;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    margin-top: 4px;
  }
  .party-bal .v .cur, .party-bal .v .dec {
    font-size: .5em;
    color: var(--label-2);
    --tw-font-weight: 600;
    font-weight: 600;
  }
  .party-bal .v .cur {
    vertical-align: .55em;
    margin-inline-end: 4px;
  }
  .party-bal .s {
    font: var(--footnote);
    color: var(--label-2);
    margin-top: 4px;
  }
  .gauge {
    position: relative;
    width: 132px;
    height: 132px;
    flex: none;
  }
  .gauge svg {
    width: 100%;
    height: 100%;
    transform: rotate(135deg);
  }
  .gauge .c {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
  }
  .gauge .c b {
    font: 700 24px/1 var(--font-sans);
    --tw-tracking: -.02em;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
  }
  .gauge .c small {
    font: var(--caption);
    color: var(--label-2);
    margin-top: 4px;
    display: block;
  }
  .gauge-wrap {
    text-align: center;
  }
  .gauge-wrap .s {
    font: var(--footnote);
    color: var(--label-2);
    margin-top: -8px;
    font-variant-numeric: tabular-nums;
  }
  .tab-card {
    overflow: hidden;
  }
  .tab-card .tabs {
    padding: 0 var(--s-4);
  }
  .tab-card [data-tab-panel] {
    min-height: 280px;
  }
  .age {
    font-variant-numeric: tabular-nums;
  }
  .contacts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--s-4);
    padding: var(--s-5);
  }
  .contact {
    padding: var(--s-4);
    border-radius: 14px;
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--separator);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .contact .top {
    display: flex;
    gap: 12px;
    align-items: center;
  }
  .contact .t {
    font: 600 15px/20px var(--font-sans);
  }
  .contact .s {
    font: var(--footnote);
    color: var(--label-2);
  }
  .contact a {
    display: flex;
    align-items: center;
    gap: 8px;
    font: var(--callout);
  }
  .contact a .i {
    width: 15px;
    height: 15px;
  }
  .notes {
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
  }
  .note-new {
    display: flex;
    gap: 10px;
    align-items: flex-start;
  }
  .note-new .textarea {
    min-height: 64px;
  }
  .note {
    display: flex;
    gap: 12px;
  }
  .note .bubble {
    flex: 1;
    background: var(--fill-2);
    border-radius: 4px 14px 14px 14px;
    padding: 10px 14px;
    font: var(--callout);
  }
  .note .bubble .h {
    font: var(--footnote);
    color: var(--label-2);
    margin-bottom: 4px;
    display: flex;
    gap: 8px;
  }
  .note .bubble .h b {
    color: var(--label-1);
    --tw-font-weight: 600;
    font-weight: 600;
  }
  .note.is-new .bubble {
    animation: pop-in var(--dur-3) var(--ease-spring) both;
  }
  @media (max-width: 1280px) {
    .party-hero {
      gap: var(--s-4);
      padding: var(--s-5);
    }
    .party-hero .avatar.xl {
      --size: 64px;
    }
    .party-bal {
      padding-inline: var(--s-4) 0;
    }
    .party-bal .v {
      font-size: 28px;
      --tw-leading: 34px;
      line-height: 34px;
    }
    .gauge {
      width: 108px;
      height: 108px;
    }
    .gauge .c b {
      font-size: 20px;
    }
  }
  @media (max-width: 768px) {
    .party-hero {
      grid-template-columns: auto 1fr;
    }
    .party-bal {
      grid-column: 1 / -1;
      text-align: start;
      border: 0;
      padding: 0;
    }
    .party-hero .gauge-wrap {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 12px;
      text-align: start;
    }
    .gauge-wrap .s {
      margin: 0;
    }
  }
  .coa-tbl td {
    height: 46px;
  }
  .coa-tbl td.nm {
    padding-inline-start: calc(8px + var(--lvl, 0) * 24px);
  }
  .coa-tbl .nm-in {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  .coa-tbl .tw {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    color: var(--label-2);
    flex: none;
    transition: transform var(--dur-2) var(--ease-spring), background var(--dur-1);
  }
  .coa-tbl .tw:hover {
    background: var(--fill-1);
  }
  .coa-tbl .tw .i {
    width: 14px;
    height: 14px;
    stroke-width: 2.2;
  }
  .coa-tbl tr[aria-expanded="true"] .tw {
    transform: rotate(90deg);
  }
  [dir="rtl"] .coa-tbl .tw {
    transform: scaleX(-1);
  }
  [dir="rtl"] .coa-tbl tr[aria-expanded="true"] .tw {
    transform: rotate(90deg);
  }
  .coa-tbl .tw-sp {
    width: 24px;
    flex: none;
  }
  .coa-tbl .gi {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    flex: none;
  }
  .coa-tbl .gi .i {
    width: 15px;
    height: 15px;
  }
  .coa-tbl tr.g td {
    --tw-font-weight: 600;
    font-weight: 600;
  }
  .coa-tbl tr.g[aria-level="1"] td {
    background: var(--surface-2);
    font-size: 15px;
    height: 50px;
  }
  .coa-tbl tr.l .nm-in span.n {
    --tw-font-weight: 400;
    font-weight: 400;
  }
  .coa-tbl .grip {
    width: 24px;
    height: 28px;
    display: grid;
    place-items: center;
    color: var(--label-3);
    cursor: grab;
    border-radius: 6px;
    opacity: .35;
    transition: opacity var(--dur-1);
  }
  .coa-tbl tr:hover .grip, .coa-tbl tr:focus-within .grip {
    opacity: 1;
  }
  .coa-tbl .grip .i {
    width: 15px;
    height: 15px;
  }
  .coa-tbl th.gp, .coa-tbl td.gp {
    width: 36px;
    padding-inline: 6px 0;
  }
  .coa-tbl tr.is-dragging td {
    opacity: .4;
  }
  .coa-tbl tr.drop-into td {
    background: var(--accent-tint) !important;
  }
  .coa-tbl tr.drop-before td {
    box-shadow: inset 0 2px 0 var(--accent);
  }
  .coa-tbl tr:focus-visible {
    outline: none;
  }
  .coa-tbl tr:focus-visible td {
    box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb), .5);
  }
  .coa-tbl tr.is-hit td {
    background: rgba(255, 204, 0, .14);
  }
  .coa-tbl .zero {
    color: var(--label-3);
  }
  .coa-tbl tr.is-new td {
    animation: coa-flash 1.6s var(--ease-out) both;
  }
  @keyframes coa-flash {
    from {
      background: var(--accent-tint-strong);
    }
  }
  body.pos {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: radial-gradient(90% 60% at 100% 0%, rgba(var(--accent-rgb), .16), transparent 60%), radial-gradient(70% 60% at 0% 100%, rgba(94, 92, 230, .12), transparent 60%), var(--bg);
  }
  .pos-top {
    height: 60px;
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border-bottom: 1px solid var(--separator);
  }
  .pos-top .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 700 17px/1 var(--font-sans);
    --tw-tracking: -.02em;
    letter-spacing: -.02em;
  }
  .pos-top .brand .logo {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #3D9BFF, #0060DF);
  }
  .pos-top .brand .logo .i {
    width: 16px;
    height: 16px;
    stroke-width: 2.2;
  }
  .pos-top .reg {
    font: var(--footnote);
    color: var(--label-2);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .pos-top .reg b {
    color: var(--label-1);
    --tw-font-weight: 600;
    font-weight: 600;
  }
  .pos-top .clock {
    margin-inline-start: auto;
    font: 600 15px/1 var(--font-sans);
    font-variant-numeric: tabular-nums;
  }
  .pos-top .btn {
    height: 40px;
  }
  .pos-top .btn-icon {
    width: 40px;
  }
  .pos-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
  }
  .pos-left {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 16px 0;
  }
  .pos-search {
    height: 56px;
    border-radius: 14px;
    padding: 0 16px;
    background: var(--fill-1);
  }
  .pos-search > input {
    font: 500 18px/1 var(--font-sans);
  }
  .pos-search .i {
    width: 20px;
    height: 20px;
  }
  .pos-cats {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    flex: none;
    padding-block: 2px;
  }
  .pos-cats::-webkit-scrollbar {
    display: none;
  }
  .pos-cats .pill {
    height: 40px;
    padding: 0 18px;
    font-size: 15px;
    flex: none;
  }
  .pos-tiles {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    align-content: start;
    padding: 2px 2px 16px;
  }
  .pos-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border-radius: 18px;
    text-align: start;
    background: var(--surface);
    box-shadow: var(--shadow-card);
    position: relative;
    transition: transform var(--dur-1) var(--ease-spring), box-shadow var(--dur-2);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .pos-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
  }
  .pos-tile:active {
    transform: scale(.97);
  }
  .pos-tile .art {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    font: 700 28px/1 var(--font-sans);
    --tw-tracking: -.03em;
    letter-spacing: -.03em;
    background: radial-gradient(120% 100% at 20% 0%, hsl(var(--h) 80% 68%), hsl(var(--h) 70% 42%));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  }
  .pos-tile .art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .pos-tile .nm {
    font: 600 14px/18px var(--font-sans);
    padding: 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 36px;
  }
  .pos-tile .ft {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    padding: 0 4px 4px;
  }
  .pos-tile .pr {
    font: 700 16px/1 var(--font-sans);
    font-variant-numeric: tabular-nums;
    --tw-tracking: -.01em;
    letter-spacing: -.01em;
    white-space: nowrap;
  }
  .pos-tile .stk {
    font: 500 12px/1 var(--font-sans);
    color: var(--label-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .pos-tile .stk.out {
    color: var(--red-text);
  }
  .pos-tile .qb {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border-radius: 13px;
    background: var(--accent);
    color: #fff;
    font: 700 13px/26px var(--font-sans);
    text-align: center;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), .5);
    animation: pop-in var(--dur-2) var(--ease-spring) both;
  }
  .pos-tile[disabled] {
    opacity: .45;
  }
  .pos-cart {
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-inline-start: 1px solid var(--separator);
    background: var(--mat-regular);
    -webkit-backdrop-filter: var(--blur-regular);
    backdrop-filter: var(--blur-regular);
    box-shadow: inset 1px 0 0 var(--mat-border);
  }
  .cart-head {
    padding: 14px 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-bottom: 1px solid var(--separator);
  }
  .cart-head .row1 {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .cart-head h2 {
    font: var(--title-3);
    --tw-tracking: var(--title-3-track);
    letter-spacing: var(--title-3-track);
    white-space: nowrap;
  }
  .cart-head .bill {
    white-space: nowrap;
    font: var(--footnote);
    color: var(--label-2);
    font-variant-numeric: tabular-nums;
  }
  .cust {
    height: 48px;
    border-radius: 12px;
  }
  .cust-on {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 6px 0 8px;
    border-radius: 12px;
    background: var(--accent-tint);
  }
  .cust-on .t {
    font: 600 14px/18px var(--font-sans);
  }
  .cust-on .s {
    font: var(--footnote);
    color: var(--label-2);
  }
  .cart-lines {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 8px;
  }
  .cl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
    padding: 10px 8px;
    border-radius: 12px;
    align-items: center;
    position: relative;
  }
  .cl + .cl::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 8px;
    height: 1px;
    background: var(--separator);
  }
  .cl.is-new {
    animation: pop-in var(--dur-3) var(--ease-spring) both;
  }
  .cl .nm {
    font: 600 14px/18px var(--font-sans);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cl .sub {
    font: var(--footnote);
    color: var(--label-2);
    font-variant-numeric: tabular-nums;
  }
  .cl .amt {
    font: 700 16px/1 var(--font-sans);
    font-variant-numeric: tabular-nums;
    text-align: end;
    white-space: nowrap;
  }
  .cl .ctl {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .cl .stepper {
    height: 40px;
    border-radius: 12px;
  }
  .cl .stepper button {
    width: 44px;
  }
  .cl .stepper input {
    width: 52px;
    font-size: 16px;
  }
  .cl .rm {
    margin-inline-start: auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--red-text);
  }
  .cl .rm:hover {
    background: var(--red-tint);
  }
  .cart-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    color: var(--label-2);
    padding: 24px;
  }
  .cart-empty .glyph {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: var(--fill-2);
    color: var(--label-3);
    margin-bottom: 6px;
  }
  .cart-empty .glyph .i {
    width: 34px;
    height: 34px;
    stroke-width: 1.2;
  }
  .cart-empty b {
    color: var(--label-1);
    font: var(--headline);
  }
  .cart-tot {
    padding: 10px 16px 0;
    border-top: 1px solid var(--separator);
  }
  .cart-tot .sum-row {
    min-height: 26px;
  }
  .cart-tot .sum-row.disc .v {
    color: var(--green-text);
  }
  .cart-acts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 10px 16px;
  }
  .cart-acts .btn {
    height: 52px;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    padding: 0 4px;
    border-radius: 12px;
  }
  .cart-acts .btn .i {
    width: 18px;
    height: 18px;
  }
  .cart-acts .btn .badge {
    position: absolute;
    top: 6px;
    inset-inline-end: 10px;
  }
  .pay-btn {
    margin: 0 16px 16px;
    height: 68px;
    border-radius: 18px;
    font: 700 20px/1 var(--font-sans);
    --tw-tracking: -.01em;
    letter-spacing: -.01em;
    justify-content: space-between;
    padding: 0 22px;
  }
  .pay-btn .amt {
    font-variant-numeric: tabular-nums;
    font-size: 24px;
  }
  .pay-btn .kbd {
    background: rgba(255,255,255,.2);
    color: #fff;
    box-shadow: none;
  }
  .pay-sheet {
    width: min(940px, 100vw) !important;
  }
  .pay-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-6);
  }
  .pay-grid .seg {
    width: 100%;
    --seg-h: 48px;
  }
  .pay-grid .seg button {
    font-size: 15px;
  }
  .entry {
    margin-top: 14px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--fill-2);
  }
  .entry .k {
    font: var(--footnote);
    color: var(--label-2);
  }
  .entry .v {
    font: 700 40px/48px var(--font-sans);
    --tw-tracking: -.02em;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .quick-cash {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 10px;
  }
  .quick-cash .btn {
    height: 44px;
    font-variant-numeric: tabular-nums;
  }
  .keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
  }
  .keypad button {
    height: 60px;
    border-radius: 14px;
    background: var(--fill-1);
    font: 600 24px/1 var(--font-sans);
    font-variant-numeric: tabular-nums;
    transition: transform var(--dur-1) var(--ease-spring), background var(--dur-1);
    touch-action: manipulation;
  }
  .keypad button:hover {
    background: var(--fill-hover);
  }
  .keypad button:active {
    transform: scale(.97);
    background: var(--fill-pressed);
  }
  .keypad button .i {
    width: 24px;
    height: 24px;
    margin: auto;
  }
  .due {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .due-card {
    border-radius: 16px;
    background: var(--fill-2);
    padding: 14px 16px;
  }
  .due-card .k {
    font: var(--caption);
    --tw-tracking: var(--caption-track);
    letter-spacing: var(--caption-track);
    text-transform: uppercase;
    color: var(--label-2);
  }
  .due-card .v {
    font: 700 28px/34px var(--font-sans);
    --tw-tracking: -.02em;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
    white-space: nowrap;
  }
  .due-card.change {
    background: var(--green-tint);
  }
  .due-card.change .k {
    color: var(--green-text);
  }
  .due-card.change .v {
    font: var(--display-num);
    font-size: 52px;
    --tw-leading: 60px;
    line-height: 60px;
    color: var(--green-text);
  }
  .due-card.rem .v {
    color: var(--orange-text);
  }
  .tender-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .tender-list .tl {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 6px 0 12px;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    font: 500 15px/1 var(--font-sans);
  }
  .tender-list .tl b {
    margin-inline-start: auto;
    font-variant-numeric: tabular-nums;
  }
  .tender-list .tl .i {
    width: 18px;
    height: 18px;
    color: var(--label-2);
  }
  .disc-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .disc-grid .chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .disc-grid .chips .btn {
    height: 48px;
    font-size: 16px;
  }
  .disc-grid .input-wrap {
    height: 56px;
    border-radius: 14px;
  }
  .disc-grid .input-wrap > input {
    font: 700 26px/1 var(--font-sans);
  }
  .recall-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    padding: 10px 12px;
    border-radius: 10px;
    width: 100%;
    text-align: start;
  }
  .recall-row:hover {
    background: var(--fill-hover);
  }
  .recall-row .t {
    font: 600 14px/18px var(--font-sans);
  }
  .recall-row .s {
    font: var(--footnote);
    color: var(--label-2);
  }
  .recall-row b {
    font-variant-numeric: tabular-nums;
    grid-row: span 2;
    align-self: center;
  }
  @media (max-width: 1280px) {
    .pos-body {
      grid-template-columns: minmax(0, 1fr) 380px;
    }
  }
  @media (max-width: 1024px) {
    .pos-body {
      grid-template-columns: minmax(0, 1fr) 360px;
    }
    .pos-tiles {
      grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
    }
    .pos-top .reg .hide-md {
      display: none;
    }
    #posItems {
      display: none;
    }
  }
  @media (max-width: 820px) {
    body.pos {
      height: auto;
      overflow: auto;
    }
    .pos-body {
      grid-template-columns: 1fr;
    }
    .pos-tiles {
      overflow: visible;
    }
    .pos-cart {
      border-inline-start: 0;
      border-top: 1px solid var(--separator);
      position: sticky;
      bottom: 0;
      max-height: 70vh;
    }
    .pay-grid {
      grid-template-columns: 1fr;
    }
    .pos-top .reg {
      display: none;
    }
  }
  @media (max-width: 390px) {
    .pos-tiles {
      grid-template-columns: repeat(2, 1fr);
    }
    .cart-acts .btn span {
      display: none;
    }
  }
  .st-content {
    max-width: 1280px;
  }
  .st-window {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    min-height: calc(100vh - var(--toolbar-h) - 48px);
    overflow: clip;
    padding: 0;
  }
  .st-side {
    background: var(--surface-2);
    border-inline-end: 1px solid var(--separator);
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .st-search {
    height: 32px;
    margin: 0 4px 10px;
  }
  .st-account {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 10px;
    color: var(--label-1);
    margin-bottom: 8px;
  }
  .st-account:hover {
    background: var(--fill-hover);
    text-decoration: none;
  }
  .st-account b {
    display: block;
    font: 600 14px/18px var(--font-sans);
  }
  .st-account small {
    display: block;
    font: var(--footnote);
    color: var(--label-2);
  }
  .st-cap {
    font: 600 11px/1 var(--font-sans);
    color: var(--label-3);
    text-transform: uppercase;
    --tw-tracking: .4px;
    letter-spacing: .4px;
    padding: 14px 10px 6px;
  }
  .st-item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 34px;
    padding: 0 8px;
    border-radius: 8px;
    color: var(--label-1);
    font: 500 14px/1 var(--font-sans);
    transition: background var(--dur-1);
  }
  .st-item .icon-tile {
    width: 24px;
    height: 24px;
    border-radius: 6px;
  }
  .st-item .icon-tile .i {
    width: 14px;
    height: 14px;
  }
  .st-item:hover {
    background: var(--fill-hover);
    text-decoration: none;
  }
  .st-item.is-on {
    background: var(--accent);
    color: var(--on-accent);
  }
  .st-item mark {
    background: rgba(var(--accent-rgb), .22);
    color: inherit;
    border-radius: 3px;
  }
  .st-item.is-on mark {
    background: rgba(255,255,255,.3);
  }
  .st-none {
    padding: 16px 10px;
    font: var(--footnote);
    color: var(--label-2);
  }
  .st-main {
    background: var(--surface-grouped);
    padding: 0 0 40px;
    min-width: 0;
  }
  :root:not([data-theme="dark"]) .st-main {
    background: #F5F5F7;
  }
  .st-head {
    position: sticky;
    top: var(--toolbar-h);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: var(--mat-regular);
    -webkit-backdrop-filter: var(--blur-regular);
    backdrop-filter: var(--blur-regular);
    border-bottom: 1px solid var(--separator);
  }
  .st-head h2 {
    font: var(--title-2);
    --tw-tracking: var(--title-2-track);
    letter-spacing: var(--title-2-track);
  }
  .st-head .icon-tile.lg {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }
  .st-back {
    display: none;
  }
  .st-body {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 32px 0;
    animation: st-in var(--dur-3) var(--ease-spring) both;
  }
  @keyframes st-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .st-body .group {
    margin-bottom: 8px;
  }
  .st-body .group-title {
    margin-top: 20px;
  }
  .st-body .group-foot {
    margin-bottom: 8px;
  }
  .st-body .group-row .st-in {
    width: min(320px, 55%);
    flex: none;
  }
  .st-body .group-row .st-in.input-wrap {
    height: var(--control-h);
  }
  .st-body .group-row.stack .st-in {
    width: 100%;
  }
  .st-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    margin-bottom: 8px;
  }
  .st-hero img {
    border-radius: 15px;
  }
  .st-hero b {
    display: block;
    font: var(--headline);
  }
  .st-hero small {
    display: block;
    font: var(--footnote);
    color: var(--label-2);
    margin-top: 2px;
  }
  .st-series td {
    height: 52px;
  }
  .st-prev {
    font-size: 12px;
    padding: 3px 7px;
    border-radius: 6px;
    background: var(--fill-1);
    color: var(--label-1);
    white-space: nowrap;
  }
  .st-perm-head {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 14px var(--s-4);
    border-bottom: 1px solid var(--separator);
    flex-wrap: wrap;
  }
  .st-perm-head .select {
    max-width: 280px;
  }
  .st-perm th.ck-col, .st-perm td.ck-col {
    text-align: center;
    width: 84px;
  }
  .st-perm th.ck-col {
    vertical-align: bottom;
    padding-block: 8px;
    height: auto;
  }
  .st-perm th.ck-col .check {
    display: flex;
    justify-content: center;
    margin-bottom: 4px;
  }
  .st-perm td.ck-col .check {
    justify-content: center;
  }
  .st-perm tbody tr:nth-child(even) td {
    background: var(--zebra);
  }
  .st-perm tbody tr:hover td {
    background: var(--fill-hover);
  }
  .st-themes {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
  }
  .st-theme {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font: 500 13px/1 var(--font-sans);
    color: var(--label-2);
  }
  .st-theme .win {
    position: relative;
    width: 116px;
    height: 76px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--separator-strong);
    transition: box-shadow var(--dur-1), transform var(--dur-1) var(--ease-spring);
  }
  .st-theme:active .win {
    transform: scale(.97);
  }
  .st-theme.is-on .win {
    box-shadow: 0 0 0 3px var(--accent);
  }
  .st-theme.is-on .n {
    color: var(--label-1);
    --tw-font-weight: 600;
    font-weight: 600;
  }
  .st-theme .win.light {
    background: #F5F5F7;
  }
  .st-theme .win.dark {
    background: #1C1C1E;
  }
  .st-theme .win.system {
    background: linear-gradient(90deg, #F5F5F7 50%, #1C1C1E 50%);
  }
  .st-theme .bar {
    position: absolute;
    inset: 0 0 auto;
    height: 12px;
    background: rgba(127,127,127,.18);
  }
  .st-theme .sb {
    position: absolute;
    top: 12px;
    bottom: 0;
    inset-inline-start: 0;
    width: 28px;
    background: rgba(127,127,127,.14);
  }
  .st-theme .cd {
    position: absolute;
    top: 20px;
    inset-inline-start: 36px;
    width: 70px;
    height: 20px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
  }
  .st-theme .win.dark .cd {
    background: #2C2C2E;
  }
  .st-theme .win.system .cd {
    background: linear-gradient(90deg, #fff 30px, #2C2C2E 30px);
  }
  .st-theme .cd.s {
    top: 46px;
    width: 44px;
    height: 10px;
    background: var(--accent);
  }
  .st-accents {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .st-accent {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
    position: relative;
    transition: transform var(--dur-1) var(--ease-spring);
  }
  .st-accent:hover {
    transform: scale(1.08);
  }
  .st-accent.is-on::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: #fff;
  }
  .st-accent.is-on {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c);
  }
  .st-tpls {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
  }
  .tpl-card {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    box-shadow: var(--shadow-card), 0 0 0 1px transparent;
  }
  .tpl-card.is-on {
    box-shadow: var(--shadow-card), 0 0 0 2.5px var(--accent);
  }
  .tpl-card .tpl-def {
    visibility: hidden;
  }
  .tpl-card.is-on .tpl-def {
    visibility: visible;
  }
  .tpl-meta b {
    display: block;
    font: 600 14px/18px var(--font-sans);
  }
  .tpl-meta small {
    display: block;
    font: var(--footnote);
    color: var(--label-2);
  }
  .tpl-prev {
    height: 112px;
    border-radius: 8px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--separator);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .tpl-prev i {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: #E5E5EA;
    width: 60%;
  }
  .tpl-prev i.w {
    width: 100%;
  }
  .tpl-prev i.t {
    margin-top: auto;
    width: 40%;
    align-self: flex-end;
    height: 10px;
    background: #1D1D1F;
  }
  .tpl-prev i:first-child {
    width: 30%;
    height: 8px;
    background: var(--accent);
  }
  .tpl-prev.th {
    width: 64px;
    margin: 0 auto;
    padding: 10px 8px;
  }
  .tpl-prev.th i {
    width: 100%;
  }
  .tpl-prev.th i:first-child {
    width: 60%;
    align-self: center;
  }
  @media (max-width: 1024px) {
    .st-window {
      grid-template-columns: 1fr;
    }
    .st-window .st-main {
      display: none;
    }
    .st-window.show-main .st-side {
      display: none;
    }
    .st-window.show-main .st-main {
      display: block;
    }
    .st-back {
      display: inline-flex;
    }
    .st-side {
      position: static;
      max-height: none;
    }
    .st-head {
      padding: 12px 16px;
    }
    .st-body {
      padding: 16px 16px 0;
    }
  }
  @media (max-width: 768px) {
    .st-body .group-row .st-in {
      width: 55%;
    }
  }
  @keyframes auth-in {
    from {
      opacity: 0;
      transform: scale(.96) translateY(8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  body.ix {
    background: var(--bg);
  }
  .ix-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 56px var(--gutter) 80px;
  }
  .ix-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 36px;
    flex-wrap: wrap;
  }
  .ix-hero img {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(10, 92, 230, .3);
  }
  .ix-hero h1 {
    font: 800 44px/1.05 var(--font-sans);
    --tw-tracking: -.04em;
    letter-spacing: -.04em;
  }
  .ix-hero p {
    font: var(--body);
    color: var(--label-2);
    margin-top: 6px;
    max-width: 620px;
  }
  .ix-hero .actions {
    margin-inline-start: auto;
    display: flex;
    gap: 8px;
  }
  .ix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
  }
  .ix-card {
    padding: 18px 18px 10px;
  }
  .ix-card h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font: var(--headline);
    margin-bottom: 8px;
  }
  .ix-card h2 .n {
    margin-inline-start: auto;
    font: var(--footnote);
    color: var(--label-3);
  }
  .ix-card ul {
    display: flex;
    flex-direction: column;
  }
  .ix-card li a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 6px 8px;
    margin: 0 -8px;
    border-radius: 8px;
    color: var(--label-1);
    font: var(--callout);
  }
  .ix-card li a:hover {
    background: var(--fill-hover);
    text-decoration: none;
  }
  .ix-card li a .i {
    width: 16px;
    height: 16px;
    color: var(--label-3);
    flex: none;
  }
  .ix-card li a small {
    margin-inline-start: auto;
    font: 500 11px/1 var(--font-mono);
    color: var(--label-3);
    white-space: nowrap;
  }
  .ix-card.wide {
    grid-column: 1 / -1;
  }
  .ix-card.wide ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    column-gap: 24px;
  }
  .ix-foot {
    margin-top: 40px;
    text-align: center;
    font: var(--footnote);
    color: var(--label-3);
  }
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
    }
  }
}