/* ===== Kinetic Glass Components ===== */

/* Card */
.kg-card {
  background: var(--bg-surface); border-radius: var(--radius-xl);
  padding: 24px; box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  border: 1px solid var(--border-subtle);
}
.kg-card:hover { transform: scale(1.03); box-shadow: var(--shadow-lg); }
.kg-card.glass { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); }

/* Stat Card */
.stat-card { text-align: center; }
.stat-label { font-size: 0.68rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.stat-value { font-size: 2.4rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.04em; font-feature-settings: "tnum"; line-height: 1; }
.stat-sub { font-size: 0.72rem; color: var(--text-tertiary); margin-top: 4px; }

/* Accent Values */
.val-blue { color: var(--accent-blue); }
.val-teal { color: var(--accent-teal); }
.val-orange { color: var(--accent-orange); }
.val-red { color: var(--accent-red); }

/* Section Header */
.section-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-title { font-size: 0.75rem; font-weight: 700; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.04em; }

/* Status Dot */
.status-dot { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 20px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; }
.status-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.dot-blue { background: rgba(0,122,255,0.08); color: var(--accent-blue); }
.dot-blue::before { background: var(--accent-blue); animation: breathe 1.8s ease-in-out infinite; }
.dot-teal { background: rgba(0,199,190,0.08); color: var(--accent-teal); }
.dot-teal::before { background: var(--accent-teal); }
.dot-orange { background: rgba(255,149,0,0.08); color: var(--accent-orange); }
.dot-orange::before { background: var(--accent-orange); }
.dot-muted { background: rgba(0,0,0,0.04); color: var(--text-tertiary); }
.dot-muted::before { background: var(--text-tertiary); }
@keyframes breathe { 0%,100%{opacity:1;box-shadow:0 0 0 0 currentColor} 50%{opacity:0.5;box-shadow:0 0 0 3px transparent} }

/* Progress Bar */
.progress { width:100%;height:5px;background:rgba(0,0,0,0.06);border-radius:3px;overflow:hidden; }
.progress-fill { height:100%;border-radius:3px;transition:width 1s ease-in-out; }
.progress-fill.blue { background: linear-gradient(90deg,var(--accent-blue),#00D2FF); }
.progress-fill.teal { background: linear-gradient(90deg,var(--accent-teal),#00E5FF); }
.progress-fill.orange { background: linear-gradient(90deg,var(--accent-orange),var(--accent-red)); }

/* Tags */
.tag { display:inline-block;padding:2px 10px;border-radius:10px;font-size:0.66rem;font-weight:500;background:rgba(0,0,0,0.03);color:var(--text-secondary); }
.tag-blue { background:rgba(0,122,255,0.06);color:var(--accent-blue); }
.tag-teal { background:rgba(0,199,190,0.06);color:var(--accent-teal); }

/* Buttons */
.btn { padding:8px 18px;border-radius:var(--radius-sm);font-size:0.8rem;font-weight:600;transition:all 0.15s ease;display:inline-flex;align-items:center;gap:6px; }
.btn-ghost { color:var(--text-secondary);border:1px solid var(--border-subtle);background:var(--bg-surface); }
.btn-ghost:hover { color:var(--text-primary);border-color:rgba(0,0,0,0.15); }
.btn-blue { background:var(--accent-blue);color:#fff;box-shadow:var(--shadow-blue); }
.btn-blue:hover { background:#0066D6;box-shadow:0 6px 20px rgba(0,122,255,0.2); }
.btn-red { color:var(--accent-red);border:1px solid rgba(255,59,48,0.25); }
.btn-red:hover { background:rgba(255,59,48,0.06); }
.btn-green { background:#34C759;color:#fff; }
.btn-green:hover { background:#2DA44E; }

/* Insight Alert */
.insight { padding:14px 18px;border-radius:var(--radius-md);margin-bottom:12px;font-size:0.82rem;display:flex;align-items:flex-start;gap:10px;line-height:1.5; }
.insight-info { background:rgba(0,122,255,0.04);border-left:3px solid var(--accent-blue);color:var(--text-secondary); }
.insight-warn { background:rgba(255,149,0,0.04);border-left:3px solid var(--accent-orange);color:var(--text-secondary); }

/* Terminal */
.log-term {
  background:var(--bg-terminal);border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  padding:16px;font-family:var(--font-mono);font-size:0.72rem;line-height:1.8;
  max-height:240px;overflow-y:auto;color:var(--text-secondary);
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.04);
}
.log-info { color:var(--accent-blue); }
.log-warn { color:var(--accent-orange); }
.log-trace { color:var(--text-tertiary); }
.log-metric { color:var(--accent-purple); }
.log-time { color:var(--text-tertiary);margin-right:8px; }
.log-prompt { color:var(--accent-blue);font-weight:600; }

/* Pipeline */
.pipe-step { display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-subtle); }
.pipe-step:last-child{border-bottom:none;}
.pipe-icon { width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.72rem;flex-shrink:0; }
.pipe-icon.done{background:rgba(0,199,190,0.1);color:var(--accent-teal);}
.pipe-icon.active{background:rgba(0,122,255,0.1);color:var(--accent-blue);}
.pipe-icon.pending{background:rgba(0,0,0,0.03);color:var(--text-tertiary);}
.pipe-body{flex:1;min-width:0;}
.pipe-title{font-size:0.82rem;font-weight:600;color:var(--text-primary);margin-bottom:2px;}
.pipe-meta{font-size:0.7rem;color:var(--text-tertiary);}

/* FAB */
.fab { position:fixed;bottom:28px;right:28px;width:48px;height:48px;border-radius:50%;background:var(--accent-blue);color:#fff;font-size:1.3rem;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-blue);z-index:200;transition:transform 0.2s var(--ease-out),box-shadow 0.2s var(--ease-out); }
.fab:hover{transform:scale(1.06);box-shadow:0 8px 24px rgba(0,122,255,0.25);}

/* Skeleton */
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skeleton{background:linear-gradient(90deg,rgba(0,0,0,0.03) 25%,rgba(0,0,0,0.06) 37%,rgba(0,0,0,0.03) 63%);background-size:400% 100%;animation:shimmer 1.6s ease-in-out infinite;border-radius:6px;}
.skel-text{height:14px;margin-bottom:8px}.skel-text.short{width:60%}.skel-text.med{width:80%}
.skel-bar{height:5px;border-radius:3px;margin-bottom:8px}
.skel-card{padding:24px;background:var(--bg-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);}

/* Empty */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px;color:var(--text-tertiary);font-size:0.9rem;gap:8px}