/* ===== HOME PAGE STYLES — Phase 2 ===== */

.home-main { padding-top: 64px; }

.hero { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center; max-width: 1400px; margin: 0 auto; padding: 100px var(--space-2xl) 80px; min-height: 90vh; }
.hero-badge { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 3px; color: var(--accent); margin-bottom: var(--space-lg); }
.hero-title { font-family: var(--font-display); font-weight: 900; font-size: 3.8rem; line-height: 1.1; margin-bottom: var(--space-xl); }
.hero-title .accent { background: linear-gradient(135deg, var(--accent), #00ffcc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-subtitle { font-size: 1.05rem; color: var(--text-secondary); line-height: 1.7; max-width: 480px; margin-bottom: var(--space-2xl); }
.hero-actions { display: flex; gap: var(--space-md); }

/* Terminal */
.terminal { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(0,212,170,0.05); }
.terminal-header { display: flex; align-items: center; gap: var(--space-md); padding: 12px 16px; background: var(--bg-tertiary); border-bottom: 1px solid var(--border); }
.terminal-dots { display: flex; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.red { background: #ff5f57; } .dot.yellow { background: #ffbd2e; } .dot.green { background: #28ca41; }
.terminal-title { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }
.terminal-body { padding: 20px; font-family: var(--font-mono); font-size: 0.85rem; line-height: 2; }
.term-line { opacity: 0; animation: termType 0.4s var(--ease) var(--delay) forwards; }
@keyframes termType { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
.prompt { color: var(--accent); } .ok { color: #28ca41; } .val { color: var(--info); }
.cursor-blink { color: var(--accent); animation: blink 1s step-end infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Stats */
.stats { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; padding: var(--space-2xl) var(--space-2xl); }
.stats-header { text-align: center; margin-bottom: var(--space-2xl); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-2xl); text-align: center; transition: all 0.3s var(--ease); }
.stat-card:hover { border-color: var(--border-accent); background: var(--bg-card-hover); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.stat-icon { font-size: 2rem; margin-bottom: var(--space-md); }
.stat-number { font-family: var(--font-mono); font-size: 2.5rem; font-weight: 700; color: var(--accent); margin-bottom: var(--space-xs); }
.stat-label { font-size: 0.85rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; }

/* Activity */
.activity-section { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; padding: var(--space-xl) var(--space-2xl) var(--space-3xl); }
.activity-header { margin-bottom: var(--space-xl); }
.activity-feed { display: flex; flex-direction: column; gap: var(--space-sm); max-height: 520px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--border-accent) transparent; }
.activity-feed::-webkit-scrollbar { width: 6px; }
.activity-feed::-webkit-scrollbar-track { background: transparent; }
.activity-feed::-webkit-scrollbar-thumb { background: var(--border-accent); border-radius: 3px; }

.activity-item { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); transition: all 0.2s; }
.activity-item:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }
.activity-item.activity-delete { border-left: 3px solid rgba(255,68,102,0.4); }
.activity-icon { font-size: 1.1rem; flex-shrink: 0; width: 28px; text-align: center; }
.activity-content { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.activity-action { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.activity-detail { font-size: 0.85rem; color: var(--text-secondary); }
.activity-user { font-size: 0.78rem; color: var(--text-muted); font-style: italic; }
.activity-time { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }

@media (max-width: 1024px) { .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 100px; } .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .hero-title { font-size: 2.5rem; } .stats-grid { grid-template-columns: 1fr 1fr; } .activity-time { display: none; } }
@media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } }