/* === kasatry-glare-typography-refine === */
/* === Glare-like softer typography refinement === */

  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

  body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    font-weight: 500;
    letter-spacing: -0.01em;
  }

  .topbar h2 {
    font-size: 21px !important;
    font-weight: 760 !important;
    letter-spacing: -0.035em !important;
  }

  .topbar p {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #667085 !important;
  }

  .company-meta strong {
    font-size: 14px !important;
    font-weight: 750 !important;
    letter-spacing: -0.025em !important;
  }

  .company-meta small {
    font-size: 11.5px !important;
    font-weight: 600 !important;
  }

  .nav-btn {
    font-size: 13px !important;
    font-weight: 680 !important;
    letter-spacing: -0.015em !important;
  }

  .nav-btn .material-symbols-outlined {
    opacity: .88;
    font-size: 21px !important;
  }

  .glare-card {
    min-height: 106px !important;
    padding: 15px 17px !important;
    border-radius: 18px !important;
  }

  .glare-label {
    font-size: 12.5px !important;
    font-weight: 580 !important;
    color: #4B5563 !important;
    letter-spacing: -0.01em !important;
  }

  .glare-value {
    font-size: 24px !important;
    font-weight: 780 !important;
    letter-spacing: -0.045em !important;
    color: #05070D !important;
  }

  .glare-sub {
    font-size: 11.5px !important;
    font-weight: 550 !important;
    color: #667085 !important;
  }

  .glare-panel h3,
  .month-panel h3,
  .panel-head h3 {
    font-size: 19px !important;
    font-weight: 760 !important;
    letter-spacing: -0.035em !important;
  }

  .glare-panel p {
    font-size: 13px !important;
    font-weight: 500 !important;
  }

  .month-box strong {
    font-size: 15.5px !important;
    font-weight: 720 !important;
  }

  .month-box span {
    font-size: 13px !important;
    font-weight: 620 !important;
  }

  .badge,
  .select-lang {
    font-size: 13px !important;
    font-weight: 620 !important;
  }

  .logout {
    font-size: 13px !important;
    font-weight: 720 !important;
  }

  label {
    font-weight: 650 !important;
    font-size: 12.5px !important;
  }

  input,
  select,
  textarea {
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  th {
    font-size: 11.5px !important;
    font-weight: 700 !important;
  }

  td {
    font-size: 13.5px !important;
    font-weight: 500 !important;
  }

  .action-btn,
  .secondary-btn,
  .primary-btn {
    font-weight: 720 !important;
  }

  .package-summary-box span {
    font-weight: 600 !important;
  }

  .package-summary-box strong {
    font-weight: 760 !important;
  }

  .package-card strong {
    font-weight: 720 !important;
  }

  .package-card small {
    font-weight: 500 !important;
    color: #667085;
  }

  .package-status {
    font-weight: 700 !important;
  }


/* === kasatry-exact-glare-font === */
/* === Exact Glare-like system typography === */

  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }

  .topbar h2,
  .login-brand h1,
  .login-card h2 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
  }

  .topbar h2 {
    font-size: 22px !important;
  }

  .topbar p,
  .login-brand p,
  .login-sub,
  .glare-sub,
  .glare-panel p,
  .month-box span {
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }

  .company-meta strong,
  .nav-btn,
  .badge,
  .select-lang,
  .logout {
    font-weight: 600 !important;
    letter-spacing: 0 !important;
  }

  .company-meta small {
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }

  .glare-label {
    font-weight: 500 !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
  }

  .glare-value {
    font-weight: 700 !important;
    font-size: 25px !important;
    letter-spacing: -0.02em !important;
  }

  .glare-panel h3,
  .month-panel h3,
  .panel-head h3 {
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
  }

  label {
    font-weight: 600 !important;
  }

  input,
  select,
  textarea,
  td {
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }

  th {
    font-weight: 600 !important;
  }

  .action-btn,
  .secondary-btn,
  .primary-btn {
    font-weight: 600 !important;
    letter-spacing: 0 !important;
  }

  .package-summary-box strong,
  .package-card strong,
  .month-box strong {
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
  }

  .package-summary-box span,
  .package-card small {
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }

  .package-status {
    font-weight: 600 !important;
  }


/* === kasatry-final-glare-polish === */
/* === Final Glare polish === */

  body {
    background:
      radial-gradient(circle at 7% 0%, rgba(201,170,104,.08), transparent 28%),
      radial-gradient(circle at 94% 0%, rgba(12,99,214,.045), transparent 26%),
      #F5F1EA !important;
  }

  .sidebar {
    box-shadow: 14px 0 36px rgba(15,23,42,.10);
  }

  .company-card {
    margin: 16px 16px 14px !important;
    padding: 14px !important;
    border-radius: 22px !important;
  }

  .company-logo {
    width: 54px !important;
    height: 54px !important;
    border-radius: 17px !important;
  }

  .company-meta strong {
    font-size: 14px !important;
    line-height: 1.15 !important;
  }

  .company-meta small {
    margin-top: 5px !important;
    font-size: 12px !important;
    color: rgba(255,255,255,.68) !important;
  }

  .sidebar-toggle {
    height: 36px !important;
    margin: 0 16px 12px !important;
    width: calc(100% - 32px) !important;
    border-radius: 13px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
  }

  .nav {
    padding: 0 16px 18px !important;
    gap: 6px !important;
  }

  .nav-btn {
    min-height: 44px !important;
    border-radius: 14px !important;
    padding: 0 13px !important;
    font-size: 13px !important;
  }

  .nav-btn .left {
    gap: 10px !important;
  }

  .nav-btn .material-symbols-outlined {
    font-size: 21px !important;
    width: 22px !important;
  }

  .topbar {
    height: 68px !important;
    padding: 0 22px !important;
    background: rgba(255,255,255,.78) !important;
    border-bottom: 1px solid rgba(222,214,203,.86) !important;
  }

  .content {
    padding: 17px 20px 25px !important;
  }

  .glare-cards {
    gap: 13px !important;
  }

  .glare-card {
    min-height: 104px !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
    border-color: rgba(210,199,184,.88) !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(255,255,255,.9), transparent 28%),
      rgba(255,255,255,.96) !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.045) !important;
  }

  .glare-card::after {
    width: 78px !important;
    height: 78px !important;
    right: -41px !important;
    top: -41px !important;
    opacity: .52 !important;
  }

  .glare-label {
    margin-bottom: 7px !important;
    color: #4F5663 !important;
  }

  .glare-value {
    font-size: 24px !important;
    line-height: 1.08 !important;
  }

  .glare-sub {
    margin-top: 6px !important;
  }

  .glare-chart-grid {
    gap: 14px !important;
  }

  .glare-panel,
  .month-panel,
  .panel {
    border-radius: 19px !important;
    border-color: rgba(210,199,184,.88) !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.045) !important;
  }

  .glare-panel {
    min-height: 315px !important;
    padding: 17px !important;
  }

  .chart-box {
    height: 248px !important;
  }

  .line-placeholder {
    height: 248px !important;
    border-radius: 15px !important;
    background-size: 74px 50px !important;
    color: #6B7280 !important;
    font-weight: 500 !important;
  }

  .month-panel {
    padding: 17px !important;
  }

  .month-box {
    border-radius: 16px !important;
    padding: 15px 17px !important;
    background: linear-gradient(180deg, #FFFFFF, #FBFAF8) !important;
  }

  .panel-head {
    padding: 16px 17px !important;
  }

  .panel-body {
    padding: 17px !important;
  }

  input,
  select,
  textarea {
    min-height: 46px !important;
    border-radius: 14px !important;
    background: #F8FAFC !important;
  }

  .action-btn {
    min-height: 46px !important;
    border-radius: 14px !important;
  }

  .secondary-btn,
  .logout,
  .badge,
  .select-lang {
    height: 42px !important;
    border-radius: 13px !important;
  }

  .table-wrap {
    border-radius: 16px !important;
  }

  th {
    padding: 11px 12px !important;
    background: #FAFAF9 !important;
  }

  td {
    padding: 11px 12px !important;
  }

  .package-card {
    border-radius: 19px !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.04) !important;
  }

  .package-icon {
    border-radius: 14px !important;
  }

  .app.sidebar-collapsed .company-card {
    margin: 14px 10px 12px !important;
    padding: 10px !important;
  }

  .app.sidebar-collapsed .company-logo {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
  }

  .app.sidebar-collapsed .sidebar-toggle {
    width: calc(100% - 20px) !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  .app.sidebar-collapsed .nav {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }


/* === kasatry-empty-module-premium-polish === */
/* === Premium empty module / package polish === */

  .placeholder {
    min-height: 260px !important;
    border: 1px dashed rgba(148, 163, 184, .46) !important;
    background:
      radial-gradient(circle at 100% 0%, var(--secondary-soft), transparent 34%),
      radial-gradient(circle at 0% 0%, var(--primary-soft), transparent 34%),
      linear-gradient(180deg, #FFFFFF, #FBFAF7) !important;
    color: #667085 !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
  }

  .placeholder::before {
    content: "apps";
    font-family: "Material Symbols Outlined";
    display: block;
    font-size: 46px;
    color: var(--primary);
    opacity: .78;
    margin-bottom: 12px;
    font-feature-settings: "liga";
  }

  .package-summary-strip {
    gap: 13px !important;
  }

  .package-summary-box {
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 100% 0%, var(--primary-soft), transparent 38%),
      #FFFFFF !important;
    border-color: rgba(210,199,184,.88) !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.04) !important;
  }

  .package-summary-box span {
    color: #667085 !important;
    font-size: 12px !important;
  }

  .package-summary-box strong {
    font-size: 21px !important;
    color: #111827 !important;
  }

  .package-grid {
    gap: 13px !important;
  }

  .package-card {
    background:
      linear-gradient(180deg, #FFFFFF, #FBFAF8) !important;
    border-color: rgba(210,199,184,.86) !important;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  }

  .package-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(15,23,42,.065) !important;
    border-color: rgba(180,160,125,.65) !important;
  }

  .package-card.locked {
    background:
      linear-gradient(180deg, #FFFFFF, #F8FAFC) !important;
    opacity: .74 !important;
  }

  .package-icon {
    width: 40px !important;
    height: 40px !important;
    box-shadow: 0 10px 18px var(--primary-soft);
  }

  .package-card strong {
    font-size: 14px !important;
    display: block;
    margin-bottom: 3px;
  }

  .package-card small {
    font-size: 12px !important;
    line-height: 1.35;
  }

  .package-status {
    height: 30px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
  }

  .nav-btn[title] {
    position: relative;
  }

  .app.sidebar-collapsed .nav-btn:hover::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: #111827;
    color: white;
    font-size: 12px;
    font-weight: 500;
    padding: 8px 10px;
    border-radius: 10px;
    box-shadow: 0 12px 26px rgba(15,23,42,.18);
    z-index: 999;
  }

  .app.sidebar-collapsed .nav-btn:hover::before {
    content: "";
    position: absolute;
    left: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px 6px 6px 0;
    border-style: solid;
    border-color: transparent #111827 transparent transparent;
    z-index: 999;
  }

  .module-soon-card {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
  }

  .module-soon-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    color: white;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow: 0 18px 34px var(--primary-soft);
  }

  .module-soon-icon .material-symbols-outlined {
    font-size: 36px;
  }

  .module-soon-card h3 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #111827;
  }

  .module-soon-card p {
    margin: 0 auto;
    max-width: 540px;
    color: #667085;
    line-height: 1.65;
  }


/* === kasatry-invoice-upload-polish === */
/* === Glare-style invoice upload area === */

  .invoice-upload-card {
    border: 1px solid rgba(210,199,184,.88);
    border-radius: 20px;
    background:
      radial-gradient(circle at 100% 0%, var(--secondary-soft), transparent 36%),
      radial-gradient(circle at 0% 0%, var(--primary-soft), transparent 34%),
      linear-gradient(180deg, #FFFFFF, #FBFAF7);
    box-shadow: 0 10px 24px rgba(15,23,42,.045);
    padding: 18px;
    margin-bottom: 16px;
  }

  .invoice-upload-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
  }

  .invoice-upload-title {
    display: flex;
    align-items: center;
    gap: 11px;
  }

  .invoice-upload-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    box-shadow: 0 14px 26px var(--primary-soft);
  }

  .invoice-upload-icon .material-symbols-outlined {
    font-size: 24px;
  }

  .invoice-upload-title h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #111827;
  }

  .invoice-upload-title p {
    margin: 4px 0 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.45;
  }

  .invoice-upload-badge {
    height: 32px;
    padding: 0 11px;
    border-radius: 999px;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    color: #64748B;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
  }

  .invoice-dropzone {
    min-height: 148px;
    border-radius: 18px;
    border: 1.5px dashed rgba(148,163,184,.62);
    background: rgba(255,255,255,.72);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 22px;
    transition: .15s ease;
    position: relative;
    overflow: hidden;
  }

  .invoice-dropzone:hover,
  .invoice-dropzone.dragover {
    border-color: var(--primary);
    background: #FFFFFF;
    box-shadow: 0 0 0 4px var(--primary-soft);
  }

  .invoice-dropzone input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
  }

  .invoice-dropzone-inner {
    pointer-events: none;
  }

  .invoice-dropzone-inner .material-symbols-outlined {
    font-size: 42px;
    color: var(--primary);
    opacity: .84;
    margin-bottom: 8px;
  }

  .invoice-dropzone-inner strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
  }

  .invoice-dropzone-inner span {
    display: block;
    color: #667085;
    font-size: 13px;
    line-height: 1.45;
  }

  .invoice-file-list {
    display: none;
    margin-top: 12px;
    border-radius: 16px;
    border: 1px solid #E5E7EB;
    background: #FFFFFF;
    overflow: hidden;
  }

  .invoice-file-list.active {
    display: block;
  }

  .invoice-file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    border-top: 1px solid #EEF2F7;
    color: #334155;
    font-size: 13px;
  }

  .invoice-file-row:first-child {
    border-top: 0;
  }

  .invoice-file-row .left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .invoice-file-row .material-symbols-outlined {
    font-size: 20px;
    color: var(--primary);
  }

  .invoice-file-row strong {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .invoice-file-row small {
    color: #667085;
    white-space: nowrap;
  }

  .invoice-upload-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
  }

  .invoice-upload-note {
    margin-right: auto;
    color: #667085;
    font-size: 12.5px;
    line-height: 1.45;
  }

  .invoice-upload-process {
    min-height: 44px;
    border-radius: 14px;
    padding: 0 16px;
    color: white;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    font-weight: 600;
  }

  .invoice-upload-clear {
    min-height: 44px;
    border-radius: 14px;
    padding: 0 14px;
    background: #F8FAFC;
    color: #475569;
    border: 1px solid #E2E8F0;
    font-weight: 500;
  }

  .manual-invoice-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 14px;
    color: #667085;
    font-size: 12.5px;
    font-weight: 500;
  }

  .manual-invoice-divider::before,
  .manual-invoice-divider::after {
    content: "";
    height: 1px;
    background: #E5E7EB;
    flex: 1;
  }

  @media (max-width: 720px) {
    .invoice-upload-head,
    .invoice-upload-actions {
      align-items: stretch;
      flex-direction: column;
    }

    .invoice-upload-note {
      margin-right: 0;
    }
  }


/* === kasatry-customer-copy-polish === */
.invoice-upload-title p,
  .invoice-dropzone-inner span,
  .invoice-upload-note,
  .placeholder p,
  .module-soon-card p {
    color: #667085 !important;
    font-weight: 400 !important;
  }


/* === kasatry-pdf-upload-results-style === */
.invoice-upload-result-box {
    margin-top: 13px;
    display: none;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #E5E7EB;
    background: #FFFFFF;
  }

  .invoice-upload-result-box.active {
    display: block;
  }

  .invoice-upload-result-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-top: 1px solid #EEF2F7;
  }

  .invoice-upload-result-row:first-child {
    border-top: 0;
  }

  .invoice-upload-result-row strong {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #111827;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .invoice-upload-result-row small {
    display: block;
    margin-top: 3px;
    color: #667085;
    font-size: 12px;
  }

  .invoice-upload-result-badge {
    height: 30px;
    border-radius: 999px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
  }

  .invoice-upload-result-badge.ok {
    background: #DCFCE7;
    color: #166534;
  }

  .invoice-upload-result-badge.fail {
    background: #FEE2E2;
    color: #991B1B;
  }

  .invoice-upload-process.loading {
    opacity: .72;
    pointer-events: none;
  }


/* === kasatry-invoice-detail-modal-style === */
.kasatry-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(10px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
  }

  .kasatry-modal-backdrop.active {
    display: flex;
  }

  .kasatry-modal {
    width: min(1120px, 100%);
    max-height: 88vh;
    overflow: auto;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(210,199,184,.92);
    box-shadow: 0 30px 90px rgba(15,23,42,.28);
  }

  .kasatry-modal-head {
    padding: 18px 20px;
    border-bottom: 1px solid #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    position: sticky;
    top: 0;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(14px);
    z-index: 2;
  }

  .kasatry-modal-head h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .kasatry-modal-close {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: #F1F5F9;
    color: #334155;
    display: grid;
    place-items: center;
  }

  .kasatry-modal-body {
    padding: 18px 20px 20px;
  }

  .invoice-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
  }

  .invoice-detail-box {
    border: 1px solid rgba(210,199,184,.88);
    border-radius: 18px;
    padding: 14px;
    background: linear-gradient(180deg, #FFFFFF, #FBFAF8);
  }

  .invoice-detail-box span {
    display: block;
    color: #667085;
    font-size: 12px;
    margin-bottom: 6px;
  }

  .invoice-detail-box strong {
    display: block;
    color: #111827;
    font-size: 16px;
    font-weight: 700;
  }

  .invoice-detail-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-bottom: 16px;
  }

  .invoice-detail-table {
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    overflow: auto;
  }

  .invoice-detail-table table {
    min-width: 900px;
  }

  .detail-btn,
  .reparse-btn {
    min-height: 34px;
    border-radius: 12px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    background: #EEF5FF;
    color: var(--primary-dark);
    border: 1px solid #D7E7FF;
  }

  .reparse-btn {
    background: #FFFBEB;
    color: #92400E;
    border-color: #FDE68A;
  }

  .invoice-action-stack {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }

  @media (max-width: 900px) {
    .invoice-detail-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 560px) {
    .invoice-detail-grid {
      grid-template-columns: 1fr;
    }
  }


/* === kasatry-editable-invoice-modal-style === */
.edit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
  }

  .edit-grid .field {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .editable-items-table input,
  .editable-items-table select {
    min-height: 36px !important;
    border-radius: 10px !important;
    padding: 0 9px !important;
    font-size: 13px !important;
  }

  .editable-items-table .product-input {
    min-width: 340px;
  }

  .invoice-save-btn {
    min-height: 38px;
    border-radius: 13px;
    padding: 0 14px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-weight: 600;
  }

  .invoice-add-row-btn {
    min-height: 38px;
    border-radius: 13px;
    padding: 0 14px;
    background: #EEF5FF;
    color: var(--primary-dark);
    border: 1px solid #D7E7FF;
    font-weight: 600;
  }

  @media (max-width: 900px) {
    .edit-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 560px) {
    .edit-grid {
      grid-template-columns: 1fr;
    }
  }


/* === kasatry-product-performance-style === */
.product-performance-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 16px;
  }

  .product-performance-card {
    border: 1px solid rgba(210,199,184,.88);
    border-radius: 18px;
    background:
      radial-gradient(circle at 100% 0%, var(--primary-soft), transparent 38%),
      linear-gradient(180deg, #FFFFFF, #FBFAF8);
    box-shadow: 0 8px 20px rgba(15,23,42,.04);
    padding: 15px;
    position: relative;
    overflow: hidden;
  }

  .product-performance-card span {
    display: block;
    color: #667085;
    font-size: 12px;
    margin-bottom: 7px;
  }

  .product-performance-card strong {
    display: block;
    font-size: 21px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.02em;
    line-height: 1.15;
  }

  .product-performance-card small {
    display: block;
    margin-top: 6px;
    color: #667085;
    font-size: 12px;
    line-height: 1.35;
  }

  .product-table-product {
    max-width: 440px;
  }

  .product-table-product strong {
    display: block;
    color: #111827;
    font-weight: 600;
    line-height: 1.35;
  }

  .product-table-product small {
    display: block;
    color: #667085;
    margin-top: 3px;
  }

  .confidence-pill {
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    background: #EEF5FF;
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 600;
  }

  .product-performance-empty {
    min-height: 260px;
    display: grid;
    place-items: center;
    text-align: center;
    color: #667085;
    border-radius: 18px;
    border: 1px dashed rgba(148,163,184,.46);
    background:
      radial-gradient(circle at 100% 0%, var(--secondary-soft), transparent 34%),
      radial-gradient(circle at 0% 0%, var(--primary-soft), transparent 34%),
      #FFFFFF;
    padding: 24px;
  }

  .product-performance-empty .material-symbols-outlined {
    font-size: 48px;
    color: var(--primary);
    margin-bottom: 10px;
  }

  .product-performance-empty strong {
    display: block;
    color: #111827;
    font-size: 18px;
    margin-bottom: 6px;
  }

  @media (max-width: 1400px) {
    .product-performance-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 760px) {
    .product-performance-grid {
      grid-template-columns: 1fr;
    }
  }


/* === kasatry-order-stats-style === */
.order-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 16px;
  }

  .order-stat-card {
    border: 1px solid rgba(210,199,184,.88);
    border-radius: 18px;
    background:
      radial-gradient(circle at 100% 0%, var(--primary-soft), transparent 38%),
      linear-gradient(180deg, #FFFFFF, #FBFAF8);
    box-shadow: 0 8px 20px rgba(15,23,42,.04);
    padding: 15px;
  }

  .order-stat-card span {
    display: block;
    color: #667085;
    font-size: 12px;
    margin-bottom: 7px;
  }

  .order-stat-card strong {
    display: block;
    font-size: 21px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.02em;
  }

  .order-type-pill {
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
  }

  .order-type-pill.export {
    background: #ECFDF5;
    color: #047857;
  }

  .order-type-pill.domestic {
    background: #EEF5FF;
    color: var(--primary-dark);
  }

  .order-type-pill.unknown {
    background: #F8FAFC;
    color: #64748B;
  }

  .order-no-cell strong {
    display: block;
    color: #111827;
    font-weight: 600;
  }

  .order-no-cell small {
    display: block;
    color: #667085;
    margin-top: 3px;
  }

  .order-warning {
    color: #B45309;
    font-weight: 600;
  }

  @media (max-width: 1500px) {
    .order-stats-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 760px) {
    .order-stats-grid {
      grid-template-columns: 1fr;
    }
  }


/* === kasatry-products-master-style === */
.products-master-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
  }

  .products-master-left,
  .products-master-right {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  .products-master-search {
    min-width: 260px;
  }

  .product-upload-label {
    min-height: 40px;
    border-radius: 13px;
    padding: 0 14px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }

  .product-thumb {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid #E5E7EB;
    background: #F8FAFC;
  }

  .product-name-cell strong {
    display: block;
    color: #111827;
    font-weight: 650;
    line-height: 1.35;
  }

  .product-name-cell small {
    display: block;
    color: #667085;
    margin-top: 4px;
  }

  .product-link-btn {
    min-height: 32px;
    border-radius: 11px;
    padding: 0 10px;
    background: #EEF5FF;
    color: var(--primary-dark);
    border: 1px solid #D7E7FF;
    font-size: 12px;
    font-weight: 600;
  }

  .product-import-result {
    margin-bottom: 12px;
    display: none;
    border-radius: 14px;
    padding: 12px 14px;
    background: #ECFDF5;
    color: #047857;
    border: 1px solid #A7F3D0;
    font-size: 13px;
    font-weight: 600;
  }

  @media (max-width: 760px) {
    .products-master-left,
    .products-master-right,
    .products-master-search {
      width: 100%;
    }
  }


/* === kasatry-unmatched-products-style === */
.unmatched-panel {
    margin-bottom: 16px;
    border: 1px solid rgba(245, 158, 11, .28);
    border-radius: 20px;
    background:
      radial-gradient(circle at 100% 0%, rgba(245,158,11,.12), transparent 32%),
      #FFFBEB;
    overflow: hidden;
  }

  .unmatched-panel-head {
    padding: 15px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(245,158,11,.22);
  }

  .unmatched-panel-head h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #92400E;
    font-size: 16px;
  }

  .unmatched-panel-body {
    padding: 14px 16px 16px;
  }

  .unmatched-card {
    background: #fff;
    border: 1px solid rgba(245,158,11,.24);
    border-radius: 16px;
    padding: 13px;
    margin-bottom: 10px;
  }

  .unmatched-card strong {
    display: block;
    color: #111827;
    line-height: 1.35;
    margin-bottom: 6px;
  }

  .unmatched-card small {
    display: block;
    color: #667085;
    margin-bottom: 10px;
  }

  .unmatched-actions {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    gap: 8px;
    align-items: center;
  }

  .unmatched-actions select,
  .unmatched-actions input {
    min-height: 38px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }

  .unmatched-mini-btn {
    min-height: 38px;
    border-radius: 12px;
    padding: 0 12px;
    background: #EEF5FF;
    color: var(--primary-dark);
    border: 1px solid #D7E7FF;
    font-weight: 650;
    font-size: 12px;
  }

  .unmatched-create-btn {
    background: #ECFDF5;
    color: #047857;
    border-color: #A7F3D0;
  }

  @media (max-width: 760px) {
    .unmatched-actions {
      grid-template-columns: 1fr;
    }
  }


/* === kasatry-marketplace-settings-style === */
.settings-section-card {
    border: 1px solid rgba(210,199,184,.88);
    border-radius: 20px;
    background: #fff;
    padding: 16px;
    margin-bottom: 16px;
  }

  .settings-section-card h3 {
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #111827;
    font-size: 17px;
  }

  .marketplace-form-grid {
    display: grid;
    grid-template-columns: 1fr 180px 130px auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 14px;
  }

  .marketplace-form-grid .field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .marketplace-form-grid label {
    font-size: 12px;
    color: #667085;
  }

  .marketplace-pill {
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
  }

  @media (max-width: 900px) {
    .marketplace-form-grid {
      grid-template-columns: 1fr;
    }
  }


/* === kasatry-invoices-marketplace-style === */
.marketplace-list-pill {
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    background: #FFF7ED;
    color: #C2410C;
    border: 1px solid #FED7AA;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
  }

  .marketplace-list-pill.empty {
    background: #F8FAFC;
    color: #64748B;
    border-color: #E2E8F0;
  }


/* === kasatry-settings-accordion-style === */
.settings-accordion-card {
    border: 1px solid rgba(210,199,184,.88);
    border-radius: 20px;
    background: #fff;
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(15,23,42,.035);
  }

  .settings-accordion-head {
    width: 100%;
    min-height: 58px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background:
      radial-gradient(circle at 100% 0%, var(--primary-soft), transparent 32%),
      #fff;
    cursor: pointer;
    border: 0;
    color: #111827;
    text-align: left;
  }

  .settings-accordion-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 750;
    letter-spacing: -0.01em;
  }

  .settings-accordion-title .material-symbols-outlined {
    color: var(--primary);
  }

  .settings-accordion-chevron {
    color: #64748B;
    transition: transform .18s ease;
  }

  .settings-accordion-card.closed .settings-accordion-chevron {
    transform: rotate(-90deg);
  }

  .settings-accordion-body {
    padding: 16px;
    border-top: 1px solid #E5E7EB;
  }

  .settings-accordion-card.closed .settings-accordion-body {
    display: none;
  }

  .settings-accordion-note {
    color: #667085;
    font-size: 13px;
    line-height: 1.5;
    margin: -4px 0 14px;
  }

  .settings-placeholder-card {
    border: 1px dashed rgba(148,163,184,.55);
    border-radius: 16px;
    padding: 14px;
    color: #667085;
    background: #F8FAFC;
    font-size: 13px;
  }


/* === kasatry-order-import-style === */
.order-import-box {
    border: 1px solid rgba(210,199,184,.88);
    border-radius: 18px;
    background:
      radial-gradient(circle at 100% 0%, var(--primary-soft), transparent 34%),
      #fff;
    padding: 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
  }

  .order-import-box strong {
    display: block;
    color: #111827;
    margin-bottom: 4px;
  }

  .order-import-box small {
    display: block;
    color: #667085;
  }

  .order-upload-label {
    min-height: 40px;
    border-radius: 13px;
    padding: 0 14px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-weight: 650;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }

  .comparison-pill {
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
  }

  .comparison-pill.matched {
    background: #ECFDF5;
    color: #047857;
  }

  .comparison-pill.amount_diff {
    background: #FEF3C7;
    color: #B45309;
  }

  .comparison-pill.not_found,
  .comparison-pill.missing_order {
    background: #FEF2F2;
    color: #B91C1C;
  }


/* === kasatry-invoice-upload-compact-style === */
#kasatryUploadResultBox {
    max-height: 260px;
    overflow: auto;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    background: #fff;
    padding: 10px;
    margin-top: 12px;
    display: none;
  }

  #kasatryUploadResultBox.active {
    display: block;
  }

  #kasatryUploadResultBox .upload-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px 6px;
    border-bottom: 1px solid #F1F5F9;
    font-size: 12.5px;
    color: #334155;
  }

  #kasatryUploadResultBox .upload-row:last-child {
    border-bottom: 0;
  }

  #kasatryUploadResultBox .upload-status {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
  }

  #kasatryUploadResultBox .upload-status.ok {
    background: #ECFDF5;
    color: #047857;
  }

  #kasatryUploadResultBox .upload-status.warn {
    background: #FEF3C7;
    color: #B45309;
  }

  #kasatryUploadResultBox .upload-status.err {
    background: #FEF2F2;
    color: #B91C1C;
  }

  .marketplace-list-pill {
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    background: #FFF7ED;
    color: #C2410C;
    border: 1px solid #FED7AA;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
  }

  .marketplace-list-pill.empty {
    background: #F8FAFC;
    color: #64748B;
    border-color: #E2E8F0;
  }


/* === kasatry-pdf-selection-compact-final === */
.pdf-selected-compact {
    max-height: 180px;
    overflow: auto;
    border: 1px solid #E5E7EB;
    background: #fff;
    border-radius: 16px;
    padding: 10px;
    margin-top: 10px;
    font-size: 12.5px;
    color: #334155;
  }

  .pdf-selected-compact strong {
    display: block;
    color: #111827;
    margin-bottom: 6px;
  }

  .pdf-selected-compact div {
    padding: 5px 0;
    border-bottom: 1px solid #F1F5F9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pdf-selected-compact div:last-child {
    border-bottom: 0;
  }

  .invoice-selected-files,
  .selected-files,
  .upload-file-list,
  .invoice-upload-file-list,
  #selectedFiles,
  #invoiceFileList,
  #selectedInvoiceFiles,
  [data-selected-files] {
    max-height: 180px !important;
    overflow: auto !important;
  }


/* === kasatry-remove-duplicate-pdf-list-final === */
.pdf-selected-compact {
    display: none !important;
  }

  #kasatryUploadResultBox {
    max-height: 240px !important;
    overflow: auto !important;
  }

  .invoice-selected-files,
  .selected-files,
  .upload-file-list,
  .invoice-upload-file-list,
  #selectedFiles,
  #invoiceFileList,
  #selectedInvoiceFiles,
  [data-selected-files] {
    max-height: 190px !important;
    overflow: auto !important;
  }


/* === kasatry-list-filter-style-final === */
.kasatry-filter-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: end;
    padding: 12px;
    margin: 0 0 14px;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    background: #F8FAFC;
  }

  .kasatry-filter-bar label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    color: #64748B;
    min-width: 140px;
  }

  .kasatry-filter-bar input,
  .kasatry-filter-bar select {
    height: 38px;
    border: 1px solid #D0D5DD;
    border-radius: 12px;
    padding: 0 10px;
    background: #fff;
    color: #111827;
  }


/* === kasatry-product-hover-sort-final === */
.kasatry-product-sortbar {
    display: flex;
    gap: 10px;
    align-items: end;
    flex-wrap: wrap;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    background: #F8FAFC;
  }

  .kasatry-product-sortbar label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    color: #64748B;
  }

  .kasatry-product-sortbar select {
    height: 38px;
    border: 1px solid #D0D5DD;
    border-radius: 12px;
    padding: 0 10px;
    background: #fff;
  }

  .product-thumb-hover,
  .product-thumb,
  .product-image-thumb,
  td img {
    position: relative;
  }

  td img:hover {
    transform: scale(1.03);
  }

  .kasatry-hover-preview {
    position: fixed;
    z-index: 999999;
    width: 260px;
    max-height: 260px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(15,23,42,.22);
    padding: 8px;
    pointer-events: none;
    display: none;
  }


/* === kasatry-pp-single-sort-cleanup-final === */
#ppPolishedFilter,
  .pp-polished-filter-wrap,
  #productPerfSortbarFinal,
  .kasatry-product-sortbar:not(#ppSingleSortBox) {
    display: none !important;
  }

  #ppSingleSortBox {
    display: flex;
    justify-content: flex-start;
    margin: 0 0 14px;
  }

  #ppSingleSortBox .pp-single-sort-inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid #E5E7EB;
    border-radius: 15px;
    background: #F8FAFC;
  }

  #ppSingleSortBox label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 11px;
    color: #64748B;
  }

  #ppSingleSortBox select {
    height: 38px;
    min-width: 230px;
    border: 1px solid #D0D5DD;
    border-radius: 12px;
    background: #fff;
    padding: 0 10px;
    color: #111827;
    font-size: 13px;
  }


/* === kasatry-expense-dropzone-final-style === */
.expense-dropzone {
    min-height: 210px;
    border: 1.5px dashed #94A3B8;
    border-radius: 22px;
    background:
      radial-gradient(circle at 50% 0%, rgba(212,175,55,.12), transparent 38%),
      #fff;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 24px;
    margin-bottom: 14px;
    cursor: pointer;
    transition: .18s ease;
  }

  .expense-dropzone.dragover {
    border-color: var(--primary);
    background: #FFFBEB;
  }

  .expense-dropzone .material-symbols-outlined {
    font-size: 38px;
    color: #7C8798;
  }

  .expense-dropzone strong {
    display: block;
    margin-top: 10px;
    color: #111827;
  }

  .expense-dropzone small {
    display: block;
    margin-top: 6px;
    color: #667085;
  }

  .expense-selected-list,
  .expense-upload-results {
    max-height: 190px;
    overflow: auto;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    background: #fff;
    padding: 10px;
    margin-bottom: 12px;
  }

  .expense-selected-list div,
  .expense-upload-results div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 7px 4px;
    border-bottom: 1px solid #F1F5F9;
    font-size: 12.5px;
    color: #334155;
  }

  .expense-selected-list div:last-child,
  .expense-upload-results div:last-child {
    border-bottom: 0;
  }

  .expense-upload-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 14px;
  }


/* === kasatry-product-performance-link-button-style === */
.go-product-btn {
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid #DBEAFE;
    background: #EFF6FF;
    color: #1D4ED8;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
  }

  .go-product-btn:hover {
    background: #DBEAFE;
  }

  .go-product-btn.empty {
    background: #F8FAFC;
    border-color: #E2E8F0;
    color: #94A3B8;
    pointer-events: none;
  }

  .product-table-product small a {
    display: none !important;
  }


/* === kasatry-product-performance-polished-filter === */
.pp-polished-filter-wrap {
    display: flex;
    justify-content: flex-end;
    margin: 6px 0 14px;
  }

  .pp-polished-filter {
    display: flex;
    align-items: end;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 100%;
    padding: 8px;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    background: rgba(248,250,252,.92);
  }

  .pp-polished-filter label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: #64748B;
  }

  .pp-polished-filter select,
  .pp-polished-filter input {
    height: 34px;
    min-width: 118px;
    border: 1px solid #D0D5DD;
    border-radius: 11px;
    background: #fff;
    padding: 0 9px;
    color: #111827;
    font-size: 12px;
  }

  .pp-polished-filter input[type="search"] {
    min-width: 190px;
  }

  .pp-polished-filter button {
    height: 34px;
    border-radius: 11px;
    padding: 0 12px;
    font-size: 12px;
  }

  @media (max-width: 900px) {
    .pp-polished-filter-wrap {
      justify-content: stretch;
    }

    .pp-polished-filter {
      width: 100%;
    }

    .pp-polished-filter label,
    .pp-polished-filter select,
    .pp-polished-filter input {
      flex: 1;
      min-width: 140px;
    }
  }


/* === kasatry-dashboard-glare-clean-final === */
#dashboardPage {
    padding: 0 !important;
  }

  .glare-clean-dashboard {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .glare-clean-cards {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 2px;
  }

  .glare-clean-card {
    background: #fff;
    border: 1px solid #ded2c0;
    border-radius: 18px;
    padding: 18px 20px;
    min-height: 112px;
    box-shadow: 0 12px 28px rgba(30, 20, 10, .05);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .glare-clean-card span {
    color: #6b7280;
    font-size: 13px;
    margin-bottom: 10px;
    display: block;
  }

  .glare-clean-card strong {
    color: #060606;
    font-size: 25px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -.03em;
    display: block;
  }

  .glare-clean-card small {
    color: #667085;
    font-size: 12px;
    margin-top: 8px;
    line-height: 1.3;
    display: block;
  }

  .glare-clean-chart-row {
    display: grid;
    grid-template-columns: 430px minmax(0, 1fr);
    gap: 14px;
  }

  .glare-clean-panel {
    background: #fff;
    border: 1px solid #ded2c0;
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 12px 28px rgba(30, 20, 10, .05);
  }

  .glare-clean-panel h3 {
    margin: 0 0 6px;
    color: #050505;
    font-size: 16px;
    font-weight: 900;
  }

  .glare-clean-panel p {
    margin: 0 0 10px;
    color: #667085;
    font-size: 12px;
  }

  .glare-clean-chart-box {
    height: 260px;
    position: relative;
  }

  .glare-clean-chart-box canvas {
    width: 100% !important;
    height: 260px !important;
  }

  .glare-clean-monthly {
    background: #fff;
    border: 1px solid #ded2c0;
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 12px 28px rgba(30, 20, 10, .05);
  }

  .glare-clean-monthly > h3 {
    margin: 0 0 14px;
    color: #050505;
    font-size: 17px;
    font-weight: 900;
  }

  .glare-clean-month-box {
    border: 1px solid #e3d6c5;
    border-radius: 16px;
    background: #fffdf9;
    padding: 14px 16px;
    margin-bottom: 14px;
  }

  .glare-clean-month-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e3d6c5;
  }

  .glare-clean-month-head h4 {
    margin: 0;
    color: #b8862b;
    font-size: 16px;
    font-weight: 900;
  }

  .glare-clean-month-head small {
    color: #667085;
    font-size: 11px;
  }

  .glare-clean-metric-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 10px;
  }

  .glare-clean-metric {
    background: #fff;
    border: 1px solid #e5d7c6;
    border-radius: 13px;
    padding: 12px;
    min-height: 78px;
  }

  .glare-clean-metric span {
    display: block;
    color: #667085;
    font-size: 10px;
    margin-bottom: 6px;
  }

  .glare-clean-metric strong {
    display: block;
    color: #050505;
    font-size: 18px;
    line-height: 1.1;
    font-weight: 900;
  }

  .glare-clean-metric small {
    display: block;
    color: #667085;
    font-size: 9.5px;
    margin-top: 6px;
    line-height: 1.25;
  }

  @media (max-width: 1500px) {
    .glare-clean-cards {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .glare-clean-metric-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 1100px) {
    .glare-clean-chart-row {
      grid-template-columns: 1fr;
    }

    .glare-clean-cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 700px) {
    .glare-clean-cards,
    .glare-clean-metric-grid {
      grid-template-columns: 1fr;
    }
  }