/* — card — */
.card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-5) var(--sp-5) 0}
.card__title{font-size:var(--fs-14);font-weight:600;color:var(--text-primary);letter-spacing:var(--ls-tight)}
.card__desc{margin-block-start:var(--sp-1);font-size:var(--fs-12);color:var(--text-muted)}
.card__body{padding:var(--sp-5)}
.card__footer{padding:var(--sp-4) var(--sp-5);border-block-start:1px solid var(--border-subtle);background:var(--bg-raised);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.card--interactive{cursor:pointer;transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.card--interactive:hover{border-color:var(--border-strong);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.card--accent{border-color:var(--accent-border);box-shadow:var(--glow-accent)}
.card--flush .card__body{padding:0}

/* — stat / KPI tile — */
.stat{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5)}
.stat__label{font-size:var(--fs-12);font-weight:500;color:var(--text-muted);display:flex;align-items:center;gap:var(--sp-2)}
.stat__value{font-size:var(--fs-30);font-weight:600;line-height:1;letter-spacing:var(--ls-tighter);color:var(--text-primary)}
.stat__row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-3)}
.stat__meta{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-12);color:var(--text-muted)}
.delta{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-12);font-weight:600;font-variant-numeric:tabular-nums}
.delta--up{color:var(--success)}
.delta--down{color:var(--danger)}
.delta--flat{color:var(--text-muted)}
.delta svg{width:12px;height:12px}
[dir="rtl"] .delta svg{transform:scaleX(-1)}

/* — badge / status dot — */
.badge{display:inline-flex;align-items:center;gap:var(--sp-2);height:22px;padding-inline:var(--sp-2);border-radius:var(--r-xs);font-size:var(--fs-11);font-weight:500;line-height:1;border:1px solid transparent;white-space:nowrap}
.badge--success{background:var(--success-soft);color:var(--success);border-color:rgba(12,163,12,.28)}
.badge--warning{background:var(--warning-soft);color:var(--warning);border-color:rgba(250,178,25,.28)}
.badge--danger{background:var(--danger-soft);color:var(--danger);border-color:rgba(208,59,59,.28)}
.badge--info{background:var(--info-soft);color:var(--info);border-color:rgba(57,135,229,.28)}
.badge--accent{background:var(--accent-soft);color:var(--accent-hover);border-color:var(--accent-border)}
.badge--neutral{background:var(--bg-raised);color:var(--text-secondary);border-color:var(--border)}
.dot{width:6px;height:6px;border-radius:var(--r-full);background:currentColor;flex:none}
.dot--live{position:relative}
.dot--live::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;animation:pulse 1.8s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}

/* — tabs — */
.tabs__list{display:flex;align-items:center;gap:var(--sp-1);border-block-end:1px solid var(--border-subtle)}
.tabs__tab{position:relative;appearance:none;background:none;border:0;padding:var(--sp-3) var(--sp-3);font:inherit;font-size:var(--fs-13);font-weight:500;color:var(--text-muted);cursor:pointer;transition:color var(--dur-fast) var(--ease)}
.tabs__tab:hover{color:var(--text-secondary)}
.tabs__tab.is-active{color:var(--text-primary)}
.tabs__tab.is-active::after{content:"";position:absolute;inset-block-end:-1px;inset-inline:var(--sp-2);height:2px;background:var(--accent);border-radius:2px 2px 0 0}
.tabs__panel[hidden]{display:none}
.tabs--pill .tabs__list{border:0;background:var(--bg-raised);padding:3px;border-radius:var(--r-sm);gap:2px;display:inline-flex}
.tabs--pill .tabs__tab{padding:var(--sp-2) var(--sp-4);border-radius:var(--r-xs)}
.tabs--pill .tabs__tab.is-active{background:var(--bg-active);color:var(--text-primary)}
.tabs--pill .tabs__tab::after{display:none}

/* — table — */
.table-wrap{width:100%;overflow-x:auto}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-13)}
.table thead th{position:sticky;inset-block-start:0;z-index:1;background:var(--bg-raised);color:var(--text-muted);font-size:var(--fs-11);font-weight:600;letter-spacing:var(--ls-wide);text-transform:uppercase;text-align:start;padding:var(--sp-3) var(--sp-4);border-block-end:1px solid var(--border-subtle);white-space:nowrap}
.table tbody td{padding:var(--sp-3) var(--sp-4);border-block-end:1px solid var(--border-subtle);color:var(--text-secondary);vertical-align:middle}
.table tbody tr:last-child td{border-block-end:0}
.table tbody tr{transition:background-color var(--dur-fast) var(--ease)}
.table tbody tr:hover{background:var(--bg-hover)}
.table .num{text-align:end;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.table .strong{color:var(--text-primary);font-weight:500}
.table--compact tbody td,
.table--compact thead th{padding:var(--sp-2) var(--sp-3)}
.th-sort{display:inline-flex;align-items:center;gap:var(--sp-1);cursor:pointer;color:inherit;background:none;border:0;font:inherit;letter-spacing:inherit;text-transform:inherit}
.th-sort:hover{color:var(--text-secondary)}
.th-sort svg{width:12px;height:12px;opacity:.4}
.th-sort.is-sorted svg{opacity:1;color:var(--accent)}

/* — avatar — */
.avatar{width:28px;height:28px;border-radius:var(--r-full);background:var(--bg-active);color:var(--text-primary);display:inline-grid;place-items:center;font-size:var(--fs-11);font-weight:600;flex:none;box-shadow:var(--ring-inset);overflow:hidden;user-select:none}
.avatar--sm{width:22px;height:22px;font-size:var(--fs-11)}
.avatar--lg{width:40px;height:40px;font-size:var(--fs-14)}
.avatar--accent{background:var(--accent-soft);color:var(--accent-hover)}
.avatar-group{display:inline-flex}
.avatar-group .avatar + .avatar{margin-inline-start:-8px;box-shadow:0 0 0 2px var(--bg-surface)}

/* — tooltip (attribute driven) — */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;inset-block-end:calc(100% + 8px);inset-inline-start:50%;transform:translateX(-50%) translateY(4px);background:var(--bg-overlay);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-md);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-12);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);z-index:100}
[data-tip]:hover::after,
[data-tip]:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}

/* — progress / meter — */
.progress{height:6px;background:var(--bg-active);border-radius:var(--r-full);overflow:hidden}
.progress__bar{height:100%;background:var(--accent);border-radius:inherit;transition:width var(--dur-slow) var(--ease)}
.progress--success .progress__bar{background:var(--success)}
.progress--warning .progress__bar{background:var(--warning)}
.progress--danger .progress__bar{background:var(--danger)}
.progress--lg{height:10px}

/* — skeleton — */
.skeleton{background:linear-gradient(90deg,var(--bg-raised) 0%,var(--bg-active) 50%,var(--bg-raised) 100%);background-size:200% 100%;animation:shimmer 1.4s linear infinite;border-radius:var(--r-sm);height:12px}
@keyframes shimmer{to{background-position:-200% 0}}
.skeleton--text{height:10px;margin-block:6px}
.skeleton--circle{border-radius:var(--r-full)}

/* — alert — */
.alert{display:flex;gap:var(--sp-3);padding:var(--sp-4);border-radius:var(--r-md);border:1px solid var(--border);background:var(--bg-raised);font-size:var(--fs-13);color:var(--text-secondary)}
.alert__icon{width:16px;height:16px;flex:none;margin-block-start:2px}
.alert__title{color:var(--text-primary);font-weight:600;font-size:var(--fs-13);margin-block-end:2px}
.alert--info{background:var(--info-soft);border-color:var(--info)}
.alert--info .alert__icon{color:var(--info)}
.alert--success{background:var(--success-soft);border-color:var(--success)}
.alert--success .alert__icon{color:var(--success)}
.alert--warning{background:var(--warning-soft);border-color:var(--warning)}
.alert--warning .alert__icon{color:var(--warning)}
.alert--danger{background:var(--danger-soft);border-color:var(--danger)}
.alert--danger .alert__icon{color:var(--danger)}
.alert__close{margin-inline-start:auto;background:none;border:0;color:var(--text-muted);cursor:pointer;padding:0;line-height:0}

/* — separator & section head — */
.sep{height:1px;background:var(--border-subtle);border:0}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);margin-block-end:var(--sp-4)}
.section-head h3{font-size:var(--fs-16);font-weight:600;letter-spacing:var(--ls-tight)}