.performance-page { display:grid; align-content:start; gap:28px; width:100%; max-width:1440px; margin:0 auto; padding:8px 0 36px; color:var(--on-surface); }
.performance-intro { display:grid; gap:22px; }
.performance-heading { display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.performance-heading h1 { margin:12px 0 7px; font:700 clamp(26px,2.3vw,36px)/1.2 var(--font-headline,serif); letter-spacing:-.03em; }
.performance-heading p { color:var(--on-surface-variant,var(--neutral-500)); font-size:14px; line-height:1.55; }
.performance-visit { display:flex; align-items:center; gap:7px; padding:9px 12px; border:1px solid var(--outline-variant); border-radius:10px; color:var(--on-surface-variant,var(--neutral-500)); font-size:12px; white-space:nowrap; }
.performance-visit .material-symbols-outlined { font-size:17px; }
.performance-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.performance-metric { min-width:0; display:flex; flex-direction:column; gap:8px; min-height:155px; padding:19px 20px; border:1px solid var(--outline-variant); border-radius:16px; background:var(--surface-container-lowest,var(--surface)); box-shadow:0 4px 18px rgba(21,16,59,.03); }
.performance-metric__top { display:flex; align-items:center; gap:9px; }
.performance-metric__icon { display:grid; place-items:center; width:35px; height:35px; border-radius:10px; font-size:20px !important; background:var(--surface-container); color:var(--primary); }
.performance-metric--blue .performance-metric__icon { color:#4673cc; background:#e9efff; }
.performance-metric--orange .performance-metric__icon { color:#ac671e; background:#fff1dc; }
.performance-metric--green .performance-metric__icon { color:#237d64; background:#e4f5ed; }
.performance-metric__label { font-size:12px; font-weight:700; line-height:1.3; }
.performance-metric__value { font:700 29px/1.1 var(--font-headline,serif); letter-spacing:-.03em; margin-top:5px; }
.performance-metric__detail { color:var(--on-surface-variant,var(--neutral-500)); font-size:12px; line-height:1.4; }
.performance-intro > .z-card { border-color:var(--outline-variant); background:var(--surface-container-low,var(--surface)); }
.performance-intro > .z-card .z-card__content { padding:16px 20px; }
.performance-callout { display:flex; align-items:center; gap:14px; }
.performance-callout > .material-symbols-outlined { display:grid; place-items:center; flex:0 0 42px; height:42px; border-radius:12px; color:var(--primary); background:var(--surface-container); }
.performance-callout__title { font-size:14px; font-weight:700; margin-bottom:3px; }
.performance-callout p { color:var(--on-surface-variant,var(--neutral-500)); font-size:12px; line-height:1.5; }
.performance-bottom { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr); align-items:start; gap:16px; }
.performance-bottom > .z-card { min-width:0; height:100%; }
.performance-bottom .z-card__header { padding-bottom:8px; }
.performance-execution { display:grid; gap:18px; }
.performance-action-form { display:flex; gap:9px; }
.performance-action-input { min-width:0; flex:1; height:42px; border:1px solid var(--outline-variant); border-radius:9px; padding:0 13px; background:var(--surface); color:var(--on-surface); font-size:13px; }
.performance-action-input::placeholder { color:var(--on-surface-variant,var(--neutral-500)); opacity:.8; }
.performance-action-input:focus-visible { outline:2px solid var(--primary); outline-offset:1px; }
.performance-action-form button { white-space:nowrap; }
.performance-feedback { min-height:1em; font-size:12px; color:var(--primary); }
.performance-actions__header { display:flex; justify-content:space-between; gap:8px; border-bottom:1px solid var(--outline-variant); padding-bottom:10px; font-size:11px; font-weight:700; letter-spacing:.04em; }
.performance-actions__count { color:var(--on-surface-variant,var(--neutral-500)); letter-spacing:0; font-weight:500; }
.performance-actions { display:grid; gap:4px; }
.performance-empty { padding:18px 0; color:var(--on-surface-variant,var(--neutral-500)); font-size:13px; line-height:1.5; }
.performance-action-row { display:flex; align-items:start; gap:10px; padding:11px 0; border-bottom:1px solid var(--outline-variant); }
.performance-action-row > .material-symbols-outlined { font-size:19px; color:var(--primary); }
.performance-action-row > div { display:grid; gap:4px; min-width:0; }
.performance-action-row__title { font-size:13px; overflow-wrap:anywhere; }
.performance-action-row__date { font-size:11px; color:var(--on-surface-variant,var(--neutral-500)); }
.performance-meetings { display:grid; }
.performance-meeting { display:flex; align-items:start; gap:10px; padding:13px 0; border-bottom:1px solid var(--outline-variant); }
.performance-meeting > .material-symbols-outlined { color:var(--primary); font-size:19px; }
.performance-meeting__title { font-size:13px; font-weight:700; }
.performance-meeting p { margin-top:4px; font-size:12px; color:var(--on-surface-variant,var(--neutral-500)); }
@media(max-width:1120px) { .performance-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .performance-bottom { grid-template-columns:1fr; } .performance-heading h1 { font-size:27px; } }
@media(max-width:480px) { .performance-page { gap:20px; } .performance-metrics { gap:8px; } .performance-metric { min-height:130px; padding:13px; } .performance-metric__value { font-size:23px; } .performance-metric__label { font-size:11px; } .performance-action-form { flex-direction:column; } .performance-action-form button { width:100%; } }
.dark .performance-metric--blue .performance-metric__icon, .dark .performance-metric--orange .performance-metric__icon, .dark .performance-metric--green .performance-metric__icon { background:var(--surface-container); color:var(--primary); }