.cost-month-label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 700; }
.cost-month-label > span { flex: none; }
.thai-month-picker { display: grid; grid-template-columns: minmax(130px,1.4fr) minmax(82px,.7fr); gap: 8px; width: 100%; }
.thai-month-picker.compact { width: 250px; }
.thai-month-picker select { min-width: 0; width: 100%; height: 44px; border: 1px solid rgba(191,211,198,.72); border-radius: 11px; padding: 0 34px 0 12px; background-color: rgba(255,255,255,.72); color: var(--ink); font: 700 13px inherit; outline-color: var(--green); cursor: pointer; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.thai-month-picker.compact select { height: 40px; font-size: 12px; }
.thai-month-picker select:focus { border-color: #61a37e; box-shadow: 0 0 0 3px rgba(71,148,104,.12); }
.cost-definition-note { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.72); border-radius: 12px; background: rgba(231,247,237,.63); color: #527064; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cost-definition-note > span { display: grid; width: 22px; height: 22px; flex: none; place-items: center; border-radius: 50%; background: #d9eee1; color: var(--green); font-family: Georgia, serif; font-weight: 700; }
.cost-definition-note p { margin: 0; font-size: 11px; line-height: 1.55; }
.cost-kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.cost-kpi { min-width: 0; padding: 16px; border: 1px solid rgba(255,255,255,.76); border-radius: 15px; background: rgba(255,255,255,.68); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(18px) saturate(135%); backdrop-filter: blur(18px) saturate(135%); }
.cost-kpi > span, .cost-kpi small { display: block; color: var(--muted); font-size: 10px; }
.cost-kpi strong { display: block; overflow: hidden; margin: 9px 0 6px; font-size: clamp(19px, 2vw, 25px); line-height: 1.05; letter-spacing: -.5px; text-overflow: ellipsis; white-space: nowrap; }
.cost-kpi.revenue strong, .cost-kpi.gross strong { color: var(--green); }
.cost-kpi.variable strong { color: #c77822; }
.cost-kpi.fixed strong { color: #8068d6; }
.cost-kpi.profit { background: linear-gradient(145deg, rgba(20,103,69,.93), rgba(33,126,85,.88)); color: #fff; }
.cost-kpi.profit > span, .cost-kpi.profit small { color: #d2eadb; }
.cost-kpi.profit.negative { background: linear-gradient(145deg, rgba(160,65,55,.93), rgba(194,83,66,.88)); }
.cost-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .75fr); gap: 16px; align-items: start; }
.cost-card { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.76); border-radius: 16px; background: rgba(255,255,255,.68); box-shadow: 0 18px 48px rgba(30,68,49,.11), inset 0 1px rgba(255,255,255,.72); -webkit-backdrop-filter: blur(18px) saturate(135%); backdrop-filter: blur(18px) saturate(135%); }
.cost-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px; border-bottom: 1px solid rgba(217,228,220,.75); }
.cost-card-header h2 { margin: 0 0 4px; font-size: 15px; }
.cost-card-header p { margin: 0; color: var(--muted); font-size: 10px; }
.cost-formula { flex: none; padding: 6px 9px; border-radius: 99px; background: #eaf4ed; color: var(--green); font-size: 9px; font-weight: 700; }
.variable-cost-list, .fixed-cost-list { display: grid; }
.cost-list-head, .variable-cost-row { display: grid; grid-template-columns: minmax(150px,1.5fr) 100px 70px 100px 105px 70px; gap: 10px; align-items: center; padding: 11px 17px; }
.cost-list-head { background: rgba(248,251,248,.65); color: var(--muted); font-size: 9px; font-weight: 700; }
.variable-cost-row { min-height: 68px; border-top: 1px solid rgba(226,234,228,.8); }
.cost-product { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cost-product > span { display: grid; width: 38px; height: 38px; flex: none; place-items: center; border-radius: 10px; background: #f1f7ee; font-size: 22px; }
.cost-product strong, .cost-product small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cost-product strong { font-size: 11px; }
.cost-product small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.unit-cost-input { width: 100%; min-width: 0; height: 38px; border: 1px solid #dbe6de; border-radius: 9px; padding: 0 9px; background: rgba(255,255,255,.72); color: var(--ink); text-align: right; font: 700 12px inherit; outline-color: var(--green); }
.cost-number { text-align: right; font-size: 11px; font-weight: 700; white-space: nowrap; }
.cost-number small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; font-weight: 500; }
.cost-number.profit { color: var(--green); }
.cost-number.profit.negative { color: #c64e42; }
.save-unit-cost { min-height: 36px; border: 1px solid #cde1d4; border-radius: 9px; background: rgba(255,255,255,.7); color: var(--green); font: 700 10px inherit; cursor: pointer; }
.save-unit-cost:hover { background: #edf7f1; }
.fixed-cost-item { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 10px; align-items: center; padding: 14px 17px; border-top: 1px solid rgba(226,234,228,.8); }
.fixed-cost-item:first-child { border-top: 0; }
.fixed-cost-item strong, .fixed-cost-item small { display: block; }
.fixed-cost-item strong { font-size: 11px; }
.fixed-cost-item small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.fixed-cost-amount { text-align: right; color: #5f4db0; font-size: 12px; font-weight: 800; white-space: nowrap; }
.delete-cost { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 9px; background: #f5eeed; color: #b14b41; font-size: 18px; cursor: pointer; }
.fixed-total { display: flex; align-items: center; justify-content: space-between; padding: 15px 17px; border-top: 1px solid #dce6df; background: rgba(244,248,245,.7); }
.fixed-total span { color: var(--muted); font-size: 11px; font-weight: 700; }
.fixed-total strong { font-size: 16px; }
.fixed-cost-modal { width: min(520px, calc(100vw - 24px)); }
.fixed-cost-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 13px; }
.month-picker-field { grid-column: 1 / -1; }
.recurring-check { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 16px; padding: 12px; border: 1px solid #dfe9e2; border-radius: 11px; background: rgba(239,247,242,.7); cursor: pointer; }
.recurring-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--green); }
.recurring-check b, .recurring-check small { display: block; }
.recurring-check b { font-size: 12px; }
.recurring-check small { margin-top: 2px; color: var(--muted); font-size: 9px; }

@media (max-width: 1180px) {
  .cost-kpi-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .cost-kpi.profit { grid-column: span 2; }
  .cost-layout { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 820px) {
  .cost-list-head { display: none; }
  .variable-cost-list { gap: 10px; padding: 10px; }
  .variable-cost-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; padding: 13px; border: 1px solid rgba(222,231,224,.85); border-radius: 12px; background: rgba(255,255,255,.48); }
  .cost-product { grid-column: 1 / -1; }
  .variable-cost-row > [data-label]::before { content: attr(data-label); display: block; margin-bottom: 5px; color: var(--muted); text-align: left; font-size: 8px; font-weight: 600; }
  .variable-cost-row .save-unit-cost { min-height: 44px; align-self: end; }
  .cost-number { text-align: left; }
}
@media (max-width: 600px) {
  .cost-head .head-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; width: 100%; }
  .cost-head .view-branch-control { grid-column: 1 / -1; }
  .cost-month-label { grid-column: 1 / -1; width: 100%; }
  .thai-month-picker.compact { flex: 1; width: auto; }
  .cost-head #addFixedCostButton { grid-column: 2; margin-left: 0; }
  .cost-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .cost-kpi { padding: 13px; }
  .cost-kpi.profit { grid-column: 1 / -1; }
  .cost-definition-note { align-items: flex-start; }
  .cost-card-header { flex-direction: column; padding: 15px; }
  .fixed-cost-form-grid { grid-template-columns: minmax(0,1fr); }
  .month-picker-field { grid-column: auto; }
  .thai-month-picker { grid-template-columns: minmax(0,1.35fr) minmax(82px,.65fr); }
}
@media (prefers-reduced-transparency: reduce) {
  .cost-kpi, .cost-card { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}