.modern-component-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition-base);display:flex;flex-direction:column}.modern-component-card--default{box-shadow:var(--shadow-sm)}.modern-component-card--glass{background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-md)}.modern-component-card--gradient{box-shadow:var(--shadow-md)}.modern-component-card--gradient:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient-primary)}.modern-component-card--elevated{box-shadow:var(--shadow-lg);background:var(--surface-raised);border-color:var(--border-strong)}.modern-component-card--flat{box-shadow:none;border:none;background:transparent}.modern-component-card--sm{padding:var(--space-3)}.modern-component-card--md{padding:var(--space-4)}.modern-component-card--lg{padding:var(--space-6)}.modern-component-card--hoverable:hover{box-shadow:var(--shadow-lg);border-color:var(--border-strong)}.modern-component-card--hoverable.modern-component-card--elevated:hover{box-shadow:var(--shadow-xl)}.modern-component-card--clickable{cursor:pointer}.modern-component-card--clickable:active{transform:scale(.99)}.modern-component-card__header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--space-3);gap:var(--space-3)}.modern-component-card__header-content{display:flex;align-items:flex-start;gap:var(--space-2);flex:1}.modern-component-card__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-md);background:var(--primary-light);color:var(--primary);font-size:16px;flex-shrink:0}.modern-component-card__titles{flex:1}.modern-component-card__title{font-size:14px;font-weight:var(--font-semibold);color:var(--text-primary);line-height:1.4}.modern-component-card__subtitle{font-size:11px;color:var(--text-muted);margin-top:var(--space-1);line-height:1.5}.modern-component-card__extra{flex-shrink:0}.modern-component-card__content{color:var(--text-secondary);line-height:1.6;flex-grow:1}@media(max-width:768px){.modern-component-card--sm{padding:var(--space-2)}.modern-component-card--md{padding:var(--space-3)}.modern-component-card--lg{padding:var(--space-4)}.modern-component-card__header{margin-bottom:var(--space-2);gap:var(--space-2);flex-wrap:wrap}.modern-component-card__header-content{gap:var(--space-2)}.modern-component-card__icon{width:28px;height:28px;font-size:14px}.modern-component-card__title{font-size:13px}.modern-component-card__subtitle{font-size:10px}}@media(max-width:480px){.modern-component-card--sm{padding:var(--space-1)}.modern-component-card--md{padding:var(--space-2)}.modern-component-card__title{font-size:12px}.modern-component-card__icon{width:24px;height:24px;font-size:12px}}.kpi-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-3);box-shadow:var(--shadow-sm);transition:all var(--transition-base);overflow:hidden;display:flex;flex-direction:column;min-height:50px}.kpi-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-primary);transition:height var(--transition-base)}.kpi-card:hover{box-shadow:var(--shadow-lg);border-color:var(--border-strong)}.kpi-card:hover:before{height:4px}.kpi-card--gradient{color:#fff;border:none;background:var(--gradient-primary)}.kpi-card--gradient:before{display:none}.kpi-card--gradient .kpi-card__title,.kpi-card--gradient .kpi-card__value,.kpi-card--gradient .kpi-card__subtitle{color:#fff}.kpi-card--gradient .kpi-card__icon{background:#fff3;color:#fff}.kpi-card--minimal{border:none;box-shadow:none;background:transparent}.kpi-card--minimal:before{display:none}.kpi-card--minimal:hover{background:var(--surface-hover);box-shadow:var(--shadow-sm)}.kpi-card--clickable{cursor:pointer}.kpi-card--clickable:active{transform:scale(.98)}.kpi-card__header{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)}.kpi-card__icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);background:var(--primary-light);color:var(--primary);font-size:18px;flex-shrink:0}.kpi-card__title{font-size:11px;font-weight:var(--font-medium);color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;flex:1}.kpi-card__value{font-size:24px;font-weight:var(--font-bold);color:var(--text-primary);line-height:1.2;margin-bottom:var(--space-2);flex-grow:1;display:flex;align-items:center}.kpi-card--gradient .kpi-card__value{color:#fff}.kpi-card__footer{display:flex;align-items:center;gap:var(--space-2)}.kpi-card__trend{display:flex;align-items:center;gap:var(--space-1);font-size:11px;font-weight:var(--font-medium)}.kpi-card__trend-value{font-weight:var(--font-semibold)}.kpi-card__trend-label{color:var(--text-muted);font-weight:var(--font-normal)}.kpi-card--gradient .kpi-card__trend-label{color:#fffc}.kpi-card__subtitle{font-size:11px;color:var(--text-muted);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.kpi-card__loading{display:flex;flex-direction:column}@media(max-width:768px){.kpi-card{padding:var(--space-3);margin-bottom:12px}.kpi-card__value{font-size:20px}.kpi-card__icon{width:32px;height:32px;font-size:16px}.kpi-card__header{gap:var(--space-2);margin-bottom:var(--space-2)}.kpi-card__title{font-size:10px;letter-spacing:.3px}.kpi-card__footer{gap:var(--space-1)}.kpi-card__trend{font-size:10px;gap:4px}.kpi-card__subtitle{font-size:10px}}@media(max-width:480px){.kpi-card{padding:var(--space-2)}.kpi-card__value{font-size:18px}.kpi-card__icon{width:28px;height:28px;font-size:14px}.kpi-card__title{font-size:9px}}