/* ═══════════════════════════════════════════
   Welcome Screen — Unified Light Theme
   Matches login.html + admin.html design system
   ═══════════════════════════════════════════ */

:root {
    --wlc-bg: #F8FAFC;
    --wlc-bg2: #FFFFFF;
    --wlc-bg3: #F1F5F9;
    --wlc-bg4: #E2E8F0;
    --wlc-border: #E2E8F0;
    --wlc-border2: #CBD5E1;
    --wlc-text: #0F172A;
    --wlc-text2: #334155;
    --wlc-text3: #64748B;
    --wlc-text4: #94A3B8;
    --wlc-accent: #2563EB;
    --wlc-accent2: #1D4ED8;
    --wlc-accent-light: #EFF6FF;
    --wlc-accent-subtle: #DBEAFE;
    --wlc-green: #10B981;
    --wlc-green-light: #D1FAE5;
    --wlc-blue: #0EA5E9;
    --wlc-blue-light: #E0F2FE;
    --wlc-red: #EF4444;
    --wlc-orange: #F59E0B;
    --wlc-purple: #7C3AED;
    --wlc-purple-light: #EDE9FE;
    --wlc-radius: 12px;
    --wlc-radius-sm: 8px;
    --wlc-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --wlc-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --wlc-shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --wlc-transition: 0.2s cubic-bezier(0.4,0,0.2,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--wlc-bg);
    color: var(--wlc-text);
    min-height: 100vh;
    overflow-y: auto;
    -webkit-font-smoothing: antialiased;
}

/* ── Header ── */
.wlc-header {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 32px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--wlc-border);
}
.wlc-header-left, .wlc-header-right { display: flex; align-items: center; gap: 12px; }
.wlc-logo {
    display: flex; align-items: center; gap: 10px;
    font-size: 15px; font-weight: 700; color: var(--wlc-text);
    letter-spacing: -0.3px;
}
.wlc-logo svg { color: var(--wlc-accent); }
.wlc-user-info {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 12px 4px 4px;
    background: var(--wlc-bg3);
    border-radius: 20px;
    border: 1px solid var(--wlc-border);
    font-size: 13px; color: var(--wlc-text2);
}
.wlc-user-avatar {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2563EB, #1D4ED8);
    border-radius: 50%;
    font-size: 12px; font-weight: 600; color: white;
}
.wlc-tier-badge {
    padding: 2px 8px; border-radius: 10px;
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    background: var(--wlc-bg4); color: var(--wlc-text3);
}
.wlc-tier-badge.tier-free { background: var(--wlc-bg4); color: var(--wlc-text3); }
.wlc-tier-badge.tier-starter { background: #FEF3C7; color: #B45309; }
.wlc-tier-badge.tier-pro { background: var(--wlc-purple-light); color: var(--wlc-purple); }
.wlc-tier-badge.tier-enterprise { background: var(--wlc-green-light); color: var(--wlc-green); }
.wlc-btn-icon {
    background: none; border: 1px solid var(--wlc-border); color: var(--wlc-text4);
    width: 36px; height: 36px; border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: var(--wlc-transition);
}
.wlc-btn-icon:hover { border-color: var(--wlc-red); color: var(--wlc-red); background: #FEF2F2; }

/* ── Main ── */
.wlc-main { max-width: 1200px; margin: 0 auto; padding: 40px 32px 80px; }

/* ── Hero ── */
.wlc-hero { margin-bottom: 32px; }
.wlc-hero h1 {
    font-size: 28px; font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--wlc-text);
    margin-bottom: 4px;
}
.wlc-subtitle { color: var(--wlc-text3); font-size: 14px; }

/* ── Quick Actions ── */
.wlc-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 40px; }
.wlc-action-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 28px 20px;
    background: var(--wlc-bg2);
    border: 1px solid var(--wlc-border);
    border-radius: var(--wlc-radius);
    cursor: pointer; transition: var(--wlc-transition);
    color: var(--wlc-text); text-align: center;
    box-shadow: var(--wlc-shadow-sm);
}
.wlc-action-card:hover {
    border-color: var(--wlc-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37,99,235,0.1);
}
.wlc-action-icon {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    background: var(--wlc-accent-light);
    border-radius: 12px; margin-bottom: 14px;
    color: var(--wlc-accent);
    transition: var(--wlc-transition);
}
.wlc-action-card:hover .wlc-action-icon { background: var(--wlc-accent-subtle); transform: scale(1.05); }
.wlc-icon-blue { background: var(--wlc-blue-light); color: var(--wlc-blue); }
.wlc-action-card:hover .wlc-icon-blue { background: #B5E3F9; }
.wlc-icon-green { background: var(--wlc-green-light); color: var(--wlc-green); }
.wlc-action-card:hover .wlc-icon-green { background: #A7F3D0; }
.wlc-action-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 4px; color: var(--wlc-text); }
.wlc-action-card p { font-size: 12px; color: var(--wlc-text4); }

/* ── Sections ── */
.wlc-section { margin-bottom: 36px; }
.wlc-section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.wlc-section-header h2 {
    font-size: 15px; font-weight: 700; color: var(--wlc-text);
    display: flex; align-items: center; gap: 8px;
    letter-spacing: -0.3px;
}
.wlc-section-header h2 svg { color: var(--wlc-text4); }
.wlc-count {
    background: var(--wlc-accent-light); color: var(--wlc-accent);
    padding: 1px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 600;
}
.wlc-section-actions { display: flex; align-items: center; gap: 8px; }
.wlc-select {
    background: var(--wlc-bg2); border: 1px solid var(--wlc-border); color: var(--wlc-text2);
    padding: 6px 10px; border-radius: 6px; font-size: 12px; cursor: pointer;
    font-family: inherit;
}
.wlc-select:focus { outline: none; border-color: var(--wlc-accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.wlc-view-toggle { display: flex; border: 1px solid var(--wlc-border); border-radius: 6px; overflow: hidden; }
.wlc-view-btn {
    background: var(--wlc-bg2); border: none; color: var(--wlc-text4);
    padding: 6px 8px; cursor: pointer; display: flex;
    transition: var(--wlc-transition);
}
.wlc-view-btn:hover { color: var(--wlc-text2); }
.wlc-view-btn.active { background: var(--wlc-accent); color: white; }

/* ── Project Grid ── */
.wlc-projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.wlc-projects-grid.wlc-list-view {
    grid-template-columns: 1fr;
    gap: 4px;
}
.wlc-project-card {
    position: relative;
    background: var(--wlc-bg2);
    border: 1px solid var(--wlc-border);
    border-radius: var(--wlc-radius);
    overflow: hidden;
    cursor: pointer;
    transition: var(--wlc-transition);
    outline: none;
    box-shadow: var(--wlc-shadow-sm);
}
.wlc-project-card:hover, .wlc-project-card:focus-visible {
    border-color: var(--wlc-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37,99,235,0.08);
}
.wlc-card-thumb {
    width: 100%; aspect-ratio: 16/10;
    background: var(--wlc-bg3);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.wlc-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wlc-card-placeholder { color: var(--wlc-text4); opacity: 0.35; }
.wlc-card-info { padding: 12px 14px 10px; }
.wlc-card-info h4 {
    font-size: 13px; font-weight: 600; color: var(--wlc-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 4px;
}
.wlc-card-meta {
    display: flex; align-items: center; gap: 4px;
    font-size: 11px; color: var(--wlc-text4);
}
.wlc-source-badge { font-size: 12px; margin-left: auto; }
.wlc-card-actions {
    position: absolute; top: 8px; right: 8px;
    display: flex; gap: 4px; opacity: 0;
    transition: var(--wlc-transition);
}
.wlc-project-card:hover .wlc-card-actions { opacity: 1; }
.wlc-card-del {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.9); backdrop-filter: blur(8px);
    border: 1px solid var(--wlc-border); border-radius: 6px;
    color: var(--wlc-text4); cursor: pointer;
    transition: var(--wlc-transition);
}
.wlc-card-del:hover { color: var(--wlc-red); border-color: #FECACA; background: #FEF2F2; }

/* ── List View Overrides ── */
.wlc-list-view .wlc-project-card {
    display: flex; align-items: center; border-radius: var(--wlc-radius-sm);
}
.wlc-list-view .wlc-card-thumb {
    width: 64px; min-width: 64px; aspect-ratio: 1;
    border-radius: var(--wlc-radius-sm) 0 0 var(--wlc-radius-sm);
}
.wlc-list-view .wlc-card-info { flex: 1; padding: 8px 14px; }
.wlc-list-view .wlc-card-actions { position: static; opacity: 1; padding-right: 12px; }

/* ── Plan Bar ── */
.wlc-plan-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px;
    background: var(--wlc-bg2);
    border: 1px solid var(--wlc-border);
    border-radius: var(--wlc-radius);
    box-shadow: var(--wlc-shadow-sm);
}
.wlc-plan-info { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.wlc-plan-label { color: var(--wlc-text3); }
.wlc-plan-name { font-weight: 700; color: var(--wlc-accent); }
.wlc-plan-detail { color: var(--wlc-text4); font-size: 12px; }
.wlc-upgrade-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 9px 22px; border-radius: 10px;
    background: var(--wlc-accent); 
    border: none; color: white;
    font-size: 13px; font-weight: 700; cursor: pointer;
    font-family: inherit;
    transition: var(--wlc-transition);
}
.wlc-upgrade-btn:hover { background: var(--wlc-accent2); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.3); }

/* ── Loading ── */
.wlc-loading { display: flex; flex-direction: column; align-items: center; padding: 40px; gap: 12px; grid-column: 1 / -1; }
.wlc-spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--wlc-border);
    border-top-color: var(--wlc-accent);
    border-radius: 50%;
    animation: wlc-spin 0.8s linear infinite;
}
@keyframes wlc-spin { to { transform: rotate(360deg); } }
.wlc-loading p { color: var(--wlc-text4); font-size: 13px; }
.wlc-empty { color: var(--wlc-text4); font-size: 13px; padding: 24px; text-align: center; grid-column: 1 / -1; }

/* ── Modal ── */
.wlc-modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15,23,42,0.4); backdrop-filter: blur(6px);
}
.wlc-modal {
    background: var(--wlc-bg2);
    border: 1px solid var(--wlc-border);
    border-radius: var(--wlc-radius);
    padding: 28px;
    width: 420px; max-width: 90vw;
    box-shadow: var(--wlc-shadow-lg);
}
.wlc-modal h3 { font-size: 18px; font-weight: 700; margin-bottom: 20px; color: var(--wlc-text); }
.wlc-form-group { margin-bottom: 24px; }
.wlc-form-group label { display: block; font-size: 13px; color: var(--wlc-text3); margin-bottom: 6px; font-weight: 600; }
.wlc-form-group input {
    width: 100%; padding: 12px 16px;
    background: var(--wlc-bg2); border: 1px solid var(--wlc-border);
    border-radius: 10px; color: var(--wlc-text);
    font-size: 14px; font-family: inherit;
    transition: var(--wlc-transition);
}
.wlc-form-group input::placeholder { color: var(--wlc-text4); }
.wlc-form-group input:focus { outline: none; border-color: var(--wlc-accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.wlc-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.wlc-btn {
    padding: 10px 22px; border-radius: 10px; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: var(--wlc-transition); border: none; font-family: inherit;
}
.wlc-btn-primary { background: var(--wlc-accent); color: white; }
.wlc-btn-primary:hover { background: var(--wlc-accent2); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.3); }
.wlc-btn-secondary { background: var(--wlc-bg3); color: var(--wlc-text2); border: 1px solid var(--wlc-border); }
.wlc-btn-secondary:hover { border-color: var(--wlc-border2); background: var(--wlc-bg4); }

/* ── Responsive ── */
@media (max-width: 768px) {
    .wlc-header { padding: 10px 16px; }
    .wlc-main { padding: 24px 16px 60px; }
    .wlc-actions { grid-template-columns: 1fr; }
    .wlc-hero h1 { font-size: 22px; }
    .wlc-projects-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .wlc-plan-bar { flex-direction: column; gap: 12px; text-align: center; }
}