/* 0xChapo — Shared Design System */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0a0a0a; color: #e0e0e0; min-height: 100vh; }
a { color: inherit; text-decoration: none; }

/* Layout */
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.container-sm { max-width: 500px; margin: 0 auto; padding: 20px; }

/* Nav */
.nav { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #1a1a1a; margin-bottom: 30px; }
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-icon { width: 35px; height: 35px; background: linear-gradient(135deg, #1a1a2e, #16213e); border: 1px solid #4a4a6a; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.nav-title { color: #e0e0e0; font-size: 1.2em; letter-spacing: 2px; }
.nav-links { display: flex; gap: 20px; align-items: center; }
.nav-links a { color: #666; text-decoration: none; font-size: 14px; transition: color 0.2s; }
.nav-links a:hover { color: #e0e0e0; }
.nav-links a.active { color: #e0e0e0; }
.nav-user { display: flex; align-items: center; gap: 15px; }
.nav-plan { padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: bold; letter-spacing: 1px; }

/* Plan Badges */
.plan-free { background: #1a1a1a; color: #666; border: 1px solid #333; }
.plan-pro { background: #4a4a6a20; color: #8a8aba; border: 1px solid #4a4a6a; }
.plan-enterprise { background: #ffaa0020; color: #ffaa00; border: 1px solid #ffaa0040; }

/* Header */
.header { text-align: center; margin-bottom: 50px; }
.header-badge { display: inline-block; padding: 6px 16px; background: linear-gradient(135deg, #1a2a3e, #2a3a5e); border: 1px solid #3a5a8a; border-radius: 20px; font-size: 12px; font-weight: bold; color: #6a9aee; letter-spacing: 1px; margin-bottom: 20px; }
.header h1 { font-size: 2.5em; font-weight: 700; margin-bottom: 15px; background: linear-gradient(135deg, #fff, #8888aa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.header p { color: #666; font-size: 1.1em; max-width: 500px; margin: 0 auto; line-height: 1.6; }

/* Cards */
.card { background: #111118; border: 1px solid #1a1a1e; border-radius: 12px; padding: 25px; margin-bottom: 15px; transition: border-color 0.2s; }
.card:hover { border-color: #2a2a3e; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.card-title { color: #e0e0e0; font-size: 16px; font-weight: 600; }
.card-meta { color: #555; font-size: 13px; }
.card-flat { background: #111; border: 1px solid #1a1a1a; border-radius: 12px; padding: 25px; margin-bottom: 20px; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 30px; }
.stat { background: #111118; border: 1px solid #1a1a1e; border-radius: 12px; padding: 25px; transition: border-color 0.2s; }
.stat:hover { border-color: #2a2a3e; }
.stat-icon { font-size: 24px; margin-bottom: 12px; }
.stat-label { color: #555; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.stat-value { font-size: 2.2em; font-weight: 700; color: #fff; }
.stat-sub { color: #555; font-size: 12px; margin-top: 5px; }

/* Quick Actions */
.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 30px; }
.quick-action { background: #111118; border: 1px solid #1a1a1e; border-radius: 12px; padding: 20px; text-align: center; text-decoration: none; transition: all 0.2s; cursor: pointer; }
.quick-action:hover { border-color: #3a3a5e; background: #0f0f1e; transform: translateY(-2px); }
.quick-action-icon { font-size: 28px; margin-bottom: 10px; }
.quick-action-label { color: #888; font-size: 13px; font-weight: 500; }

/* Buttons */
.btn { display: inline-block; padding: 12px 24px; background: linear-gradient(135deg, #2a2a4e, #3a3a6e); color: #fff; text-decoration: none; border-radius: 10px; font-weight: 600; font-size: 14px; border: 1px solid #4a4a6a; cursor: pointer; transition: all 0.2s; text-align: center; }
.btn:hover { background: linear-gradient(135deg, #3a3a5e, #4a4a7e); border-color: #6a6a8a; transform: translateY(-1px); }
.btn-sm { padding: 8px 16px; font-size: 12px; }
.btn-primary { background: linear-gradient(135deg, #4a6aee, #6a8aee); border-color: #6a8aee; }
.btn-primary:hover { background: linear-gradient(135deg, #5a7afe, #7a9afe); border-color: #8aaafe; }
.btn-secondary { background: transparent; border-color: #2a2a3e; color: #888; }
.btn-secondary:hover { border-color: #4a4a5e; color: #aaa; }
.btn-danger { background: linear-gradient(135deg, #3a1a1a, #5a2a2a); border-color: #6a3a3a; color: #ff6666; }
.btn-danger:hover { background: linear-gradient(135deg, #4a2a2a, #6a3a3a); border-color: #8a4a4a; }
.btn-block { display: block; width: 100%; }
.btn:disabled, .current-plan { background: #1a1a1a !important; color: #444 !important; cursor: default !important; border-color: #2a2a2a !important; transform: none !important; }

/* Badges */
.badge { padding: 4px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge-green { background: #00ff8820; color: #00ff88; border: 1px solid #00ff8840; }
.badge-red { background: #ff444420; color: #ff6666; border: 1px solid #ff444440; }
.badge-yellow { background: #ffaa0020; color: #ffaa00; border: 1px solid #ffaa0040; }
.badge-blue { background: #4488ff20; color: #6699ff; border: 1px solid #4488ff40; }
.badge-gray { background: #1a1a1a; color: #666; border: 1px solid #333; }

/* Forms */
label { display: block; color: #666; margin-bottom: 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
input, select, textarea { width: 100%; padding: 12px 15px; background: #0f0f0f; border: 1px solid #1a1a1a; border-radius: 8px; color: #fff; font-size: 14px; transition: border-color 0.2s; font-family: inherit; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #4a4a6a; }
select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
textarea { min-height: 100px; resize: vertical; }
.form-row { display: flex; gap: 20px; margin-bottom: 15px; }
.form-group { flex: 1; }
.form-help { color: #444; font-size: 12px; margin-top: 5px; }

/* Tables */
table { width: 100%; border-collapse: collapse; }
th { padding: 12px 15px; text-align: left; color: #666; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 2px solid #1a1a1a; font-weight: 600; }
td { padding: 12px 15px; border-bottom: 1px solid #1a1a1a; font-size: 14px; color: #aaa; }
tr:hover { background: #111118; }

/* Flash Messages */
.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; }
.flash-success { background: #00ff8820; border: 1px solid #00ff8840; color: #00ff88; }
.flash-error { background: #ff444420; border: 1px solid #ff444440; color: #ff6666; }
.flash-info { background: #4488ff20; border: 1px solid #4488ff40; color: #6699ff; }

/* Section */
.section { margin-bottom: 30px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.section-title { color: #888; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }

/* Trial Banner */
.trial-banner { padding: 15px 20px; border-radius: 10px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
.trial-active { background: linear-gradient(135deg, #1a2a3e, #2a3a5e); border: 1px solid #3a5a8a; }
.trial-warning { background: linear-gradient(135deg, #3a2a1e, #5a4a2e); border: 1px solid #8a6a3a; }
.trial-text { font-size: 14px; }
.trial-text strong { color: #e0e0e0; }
.trial-text span { color: #888; }

/* Progress Bar */
.progress-bar { width: 100%; height: 6px; background: #1a1a1a; border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.progress-fill.green { background: linear-gradient(90deg, #00cc66, #00ff88); }
.progress-fill.yellow { background: linear-gradient(90deg, #ccaa00, #ffcc00); }
.progress-fill.red { background: linear-gradient(90deg, #cc4444, #ff6666); }

/* Empty State */
.empty { text-align: center; padding: 60px 20px; color: #444; }
.empty-icon { font-size: 48px; margin-bottom: 20px; opacity: 0.5; }
.empty-title { font-size: 18px; color: #666; margin-bottom: 10px; }
.empty-desc { color: #444; margin-bottom: 20px; }

/* Info Row */
.info-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #1a1a1a; }
.info-label { color: #666; }
.info-value { color: #e0e0e0; }

/* Divider */
.divider { height: 1px; background: #1a1a1a; margin: 30px 0; }

/* Responsive */
@media (max-width: 768px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
    .quick-actions { grid-template-columns: repeat(2, 1fr); }
    .form-row { flex-direction: column; gap: 10px; }
    .nav-links { display: none; }
    .nav { flex-wrap: wrap; gap: 10px; }
}