.app-page-head {
  min-height: 78px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 26px;
  margin-bottom: 16px;
}
.app-page-head h1 { margin: 5px 0 0; color: var(--app-ink); font-size: clamp(25px, 2.2vw, 34px); line-height: 1.16; letter-spacing: -.035em; }
.app-page-head p { max-width: 720px; margin: 7px 0 0; color: var(--app-muted); font-size: 12px; }
.app-page-head__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 5px; }
.app-panel { border: 1px solid var(--app-line); border-radius: var(--app-radius-lg); background: #fff; box-shadow: 0 5px 18px rgba(73, 51, 34, .035); }
.app-panel__head { min-height: 68px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 15px 17px; border-bottom: 1px solid var(--app-line-soft); }
.app-panel__head h2 { margin: 4px 0 0; color: var(--app-ink); font-size: 16px; }.app-panel__head p { margin: 4px 0 0; color: var(--app-muted); font-size: 10px; }
.app-text-action { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--app-brand-dark); font-size: 11px; font-weight: 800; text-decoration: none; cursor: pointer; }
.app-metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 13px; }
.app-metric { position: relative; min-height: 88px; overflow: hidden; padding: 14px 16px; border: 1px solid var(--app-line); border-radius: var(--app-radius-md); background: #fff; }
.app-metric::after { content: ""; position: absolute; right: -20px; bottom: -28px; width: 70px; height: 70px; border-radius: 50%; background: #fff0e5; }
.app-metric > * { position: relative; z-index: 1; display: block; }.app-metric span { color: #6e6056; font-size: 10px; font-weight: 650; }.app-metric strong { margin-top: 8px; color: var(--app-ink); font-size: 25px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }.app-metric small { margin-top: 7px; color: var(--app-muted); font-size: 9px; }
.app-metric--green strong { color: var(--app-success); }.app-metric--green::after { background: #e9f8f2; }
.app-metric--yellow strong, .app-metric--amber strong { color: var(--app-warning); }.app-metric--yellow::after, .app-metric--amber::after { background: #fff7db; }
.app-metric--red strong { color: var(--app-danger); }.app-metric--red::after { background: #fff0ef; }
.app-metric--blue strong { color: var(--app-info); }.app-metric--blue::after { background: #edf4ff; }
.app-split { display: grid; gap: 13px; align-items: start; }.app-split--60-40 { grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr); }.app-split--66-34 { grid-template-columns: minmax(0, 1.9fr) minmax(320px, 1fr); }.app-split--70-30 { grid-template-columns: minmax(0, 2.3fr) minmax(300px, 1fr); }

@media (max-width: 1100px) {
  .app-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-split--60-40, .app-split--66-34, .app-split--70-30 { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .app-page-head { min-height: 0; flex-direction: column; gap: 12px; }.app-page-head__actions { width: 100%; justify-content: stretch; }.app-page-head__actions .ui-button { flex: 1; }
  .app-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.app-metric { min-height: 82px; }
}