.fee-page-header{align-items:flex-start}
.fee-page-actions{display:flex;flex-wrap:wrap;gap:10px}

.fee-filter-bar{border:1px solid #e5e7eb;border-radius:16px;background:#fff;padding:14px 16px}
.fee-filter-field{min-width:260px}

.fee-summary-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(440px,.95fr);gap:16px;border-radius:22px;padding:22px;background:linear-gradient(135deg,#111827 0%,#1f2937 58%,#312e81 100%);box-shadow:0 18px 42px rgba(15,23,42,.14);color:#fff;overflow:hidden;position:relative}
.fee-summary-hero:after{content:"";position:absolute;width:260px;height:260px;border-radius:999px;right:-110px;top:-140px;background:rgba(255,255,255,.06)}
.fee-summary-main{padding:8px 8px 8px 4px;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center}
.fee-summary-label{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#c7d2fe;margin-bottom:8px}
.fee-summary-value{font-size:clamp(2rem,3.1vw,3.4rem);line-height:1.05;letter-spacing:-.045em;margin-bottom:10px}
.fee-summary-note{max-width:560px;color:#cbd5e1;margin:0;line-height:1.55}
.fee-summary-breakdown{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;z-index:1}
.fee-mini-card{border:1px solid rgba(255,255,255,.13);border-radius:16px;padding:16px;background:rgba(255,255,255,.07);backdrop-filter:blur(8px);display:flex;flex-direction:column;justify-content:center;min-height:104px}
.fee-mini-card span{font-size:.78rem;color:#cbd5e1;margin-bottom:7px}
.fee-mini-card strong{font-size:1.18rem;line-height:1.2}
.fee-mini-card small{color:#c7d2fe;margin-top:7px;font-size:.72rem}
.fee-mini-card-primary{grid-column:1/-1;background:#fff;color:#111827;border-color:#fff}
.fee-mini-card-primary span{color:#64748b}
.fee-mini-card-primary strong{font-size:1.45rem}
.fee-mini-card-primary small{color:#64748b}

.fee-alert{border-radius:14px}
.fee-simple-table th{white-space:nowrap;color:#64748b;font-size:.75rem;text-transform:uppercase;letter-spacing:.035em;border-bottom-color:#e5e7eb}
.fee-simple-table td{vertical-align:middle;border-bottom-color:#eef2f7}
.fee-simple-table tbody tr:last-child td{border-bottom:0}
.fee-estimate-amount{color:#312e81;white-space:nowrap}
.fee-available-text{display:inline-flex;padding:7px 10px;border-radius:10px;background:#ecfdf5;color:#047857;font-weight:800;white-space:nowrap}
.fee-card-footer{border-top:1px solid #eef2f7;margin:8px -20px -20px;padding:14px 20px;text-align:right}
.fee-card-footer a{font-size:.84rem;font-weight:700;text-decoration:none}

.fee-status{display:inline-flex;align-items:center;border-radius:999px;padding:5px 10px;font-size:.73rem;font-weight:800;white-space:nowrap}
.fee-status-earned{background:#dcfce7;color:#166534}
.fee-status-provisional{background:#eef2ff;color:#4338ca}
.fee-status-cancelled{background:#fee2e2;color:#991b1b}
.fee-status-approved{background:#dcfce7;color:#166534}
.fee-status-pending{background:#fef3c7;color:#92400e}
.fee-status-rejected{background:#fee2e2;color:#991b1b}
.fee-status-draft{background:#e2e8f0;color:#334155}

.fee-expense-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.fee-expense-form-card{min-width:0}
.fee-expense-help{border:1px solid #e5e7eb;border-radius:18px;background:linear-gradient(145deg,#fff,#f8fafc);padding:22px;position:sticky;top:88px}
.fee-help-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#ede9fe;color:#5b21b6;margin-bottom:16px}
.fee-expense-help h3{font-size:1.05rem;margin:0 0 8px}
.fee-expense-help p{font-size:.86rem;color:#64748b;line-height:1.55;margin-bottom:16px}
.fee-help-list{display:flex;flex-wrap:wrap;gap:8px}
.fee-help-list span{font-size:.75rem;border:1px solid #e5e7eb;border-radius:999px;background:#fff;padding:7px 10px;color:#475569}
.fee-advanced-options{border:1px solid #e5e7eb;border-radius:12px;background:#f8fafc;padding:12px 14px}
.fee-advanced-options summary{cursor:pointer;font-weight:750;color:#334155}
.fee-advanced-content{display:flex;flex-wrap:wrap;gap:20px;padding-top:12px}
.fee-inline-filter{min-width:220px}
.fee-note-neutral{color:#0369a1;margin-top:3px}
.fee-approval-actions{display:flex;justify-content:flex-end;gap:6px;white-space:nowrap}

.fee-settings-group{padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid #eef2f7}
.fee-settings-heading{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.fee-settings-heading>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#eef2ff;color:#4338ca;font-size:.72rem;font-weight:900;flex:0 0 auto}
.fee-settings-heading h2{font-size:1.02rem;margin:1px 0 3px}
.fee-settings-heading p{color:#64748b;font-size:.82rem;margin:0}
.fee-setting-check{border:1px solid #e5e7eb;border-radius:14px;padding:14px 14px 14px 40px;background:#fff}
.fee-setting-check label{display:flex;flex-direction:column;gap:3px}
.fee-setting-check small{color:#64748b}
.fee-settings-advanced{border:1px solid #e5e7eb;border-radius:14px;background:#f8fafc;padding:14px 16px}
.fee-settings-advanced summary{cursor:pointer;font-weight:800;color:#334155}
.fee-settings-advanced[open] summary{margin-bottom:10px}
.fee-preview-card{height:100%;border:1px solid #e5e7eb;border-radius:18px;background:linear-gradient(145deg,#111827,#312e81);color:#fff;padding:24px;position:sticky;top:88px}
.fee-preview-card h2{font-size:1.25rem;margin:8px 0 4px}
.fee-preview-card p,.fee-preview-card small{color:#cbd5e1}
.fee-preview-sales-value{display:block;font-size:1.35rem;margin:14px 0 18px}
.fee-preview-result{border:1px solid rgba(255,255,255,.16);border-radius:15px;background:rgba(255,255,255,.08);padding:16px;margin-bottom:12px}
.fee-preview-result span{display:block;color:#c7d2fe;font-size:.78rem;margin-bottom:6px}
.fee-preview-result strong{font-size:1.6rem}

.fee-quotation-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;border:1px solid #e0e7ff;border-radius:18px;background:linear-gradient(135deg,#f8fafc,#eef2ff);padding:20px 22px}
.fee-quotation-copy h2{font-size:1.15rem;margin:5px 0 5px}
.fee-quotation-copy p{color:#64748b;margin:0;line-height:1.5}
.fee-quotation-value{display:flex;flex-direction:column;align-items:flex-end;gap:7px;min-width:220px}
.fee-quotation-value>strong{font-size:1.75rem;letter-spacing:-.035em;color:#312e81}
.fee-quotation-value>a{font-size:.78rem;font-weight:800;text-decoration:none}

/* Backward-compatible KPI classes used by payment/other internal screens. */
.fee-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.fee-kpi{border:1px solid #e5e7eb;border-radius:16px;padding:18px;background:#fff}
.fee-kpi small{display:block;color:#64748b;margin-bottom:7px}
.fee-kpi strong{font-size:1.28rem}
.fee-kpi.primary{background:#111827;color:#fff}
.fee-kpi.primary small{color:#cbd5e1}
.fee-formula-card{border:1px solid #e5e7eb;border-radius:18px;background:linear-gradient(135deg,#fff,#f8fafc);padding:22px}
.fee-formula-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:stretch}
.fee-formula-step{border:1px solid #e5e7eb;border-radius:14px;padding:15px;background:#fff}
.fee-formula-step small{display:block;color:#64748b;margin-bottom:6px}
.fee-formula-step strong{font-size:1.05rem}

@media(max-width:1100px){
  .fee-summary-hero{grid-template-columns:1fr}
  .fee-expense-layout{grid-template-columns:1fr}
  .fee-expense-help{position:static;display:none}
}
@media(max-width:900px){
  .fee-kpi-grid,.fee-formula-flow{grid-template-columns:1fr 1fr}
  .fee-quotation-card{grid-template-columns:1fr}
  .fee-quotation-value{align-items:flex-start;min-width:0}
}
@media(max-width:640px){
  .fee-page-actions{width:100%}
  .fee-page-actions .btn{flex:1 1 auto}
  .fee-filter-field{min-width:100%;width:100%}
  .fee-summary-hero{padding:18px;border-radius:18px}
  .fee-summary-breakdown{grid-template-columns:1fr}
  .fee-mini-card-primary{grid-column:auto}
  .fee-summary-value{font-size:2.05rem}
  .fee-kpi-grid,.fee-formula-flow{grid-template-columns:1fr}
  .fee-inline-filter{min-width:0;width:100%}
  .section-card-header{gap:12px;align-items:flex-start;flex-direction:column}
  .fee-approval-actions{justify-content:flex-start}
}