/* at-projects.css — extracted from ai-tracker/projects.html inline <style> (Phase 2) */

        /* Project list cards */
        /* Projects list — one full-width row per project, matching keyword-tracking's density */
        .projects-grid { display:flex; flex-direction:column; gap:10px; margin-top:20px; }

        .project-card {
            background:rgba(255,255,255,0.02);
            border:1px solid rgba(255,255,255,0.06);
            border-radius:14px;
            padding:14px 18px;
            cursor:pointer;
            transition:all 0.18s;
            position:relative;
            display:flex;
            align-items:center;
            gap:16px;
            flex-wrap:wrap;
        }
        .project-card:hover {
            border-color:rgba(var(--primary-rgb), 0.3);
            background:rgba(var(--primary-rgb), 0.04);
        }
        .project-card-body {
            flex:1;
            min-width:0;
            display:flex;
            align-items:center;
            gap:16px;
            flex-wrap:wrap;
        }
        .project-card-name {
            font-family:var(--font-heading);
            font-size: var(--fs-base);
            font-weight: 500;
            color:var(--text-main);
            word-break:break-word;
        }
        .project-card-domain {
            font-size: var(--fs-xs);
            color:var(--primary-text);
            font-family:var(--font-body);
        }
        .project-card-meta {
            font-size: var(--fs-xs);
            color:var(--text-dim);
            display:flex;
            gap:10px;
            flex-wrap:wrap;
        }
        .project-card-meta span { display:inline-flex; align-items:center; gap:4px; }
        .project-card-last {
            font-size: var(--fs-xs);
            color:var(--text-dim);
            white-space:nowrap;
        }
        .project-card-actions {
            display:flex;
            align-items:center;
            gap:8px;
            flex-shrink:0;
        }
        .project-card-open {
            font-size: var(--fs-xs);
            color:var(--primary-text);
            font-weight:500;
            white-space:nowrap;
        }
        .project-card-delete {
            background:rgba(255,255,255,0.03);
            border:1px solid rgba(var(--danger-rgb), 0.15);
            color:var(--danger);
            padding:5px 12px;
            border-radius:6px;
            cursor:pointer;
            font-size: var(--fs-xs);
            font-family:var(--font-body);
            transition:all 0.15s;
            opacity:0.55;
            white-space:nowrap;
        }
        .project-card-delete:hover { opacity:1; background:rgba(var(--danger-rgb), 0.1); border-color:rgba(var(--danger-rgb), 0.3); }

        /* Empty state */
        .empty-state { text-align:center; padding:60px 20px; color:var(--text-dim); }
        .empty-state-icon { font-size:2.2rem; margin-bottom:12px; opacity:0.4; }
        .empty-state-title { font-size:1.15rem; color:var(--text-secondary); margin-bottom:8px; font-weight:500; }
        .empty-state-sub { font-size: var(--fs-sm); color:var(--text-dim); max-width:400px; margin:0 auto 18px; line-height:1.5; }

        /* New project button */
        .create-btn {
            background:linear-gradient(135deg, var(--primary-text), var(--primary));
            color:white;
            border:none;
            padding:10px 20px;
            border-radius:10px;
            font-family:var(--font-body);
            font-size: var(--fs-sm);
            font-weight:600;
            cursor:pointer;
            transition:all 0.2s;
            box-shadow:0 2px 8px rgba(var(--primary-rgb), 0.25);
        }
        .create-btn:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(var(--primary-rgb), 0.35); }
        .create-btn:active { transform:translateY(0); }

        /* Page header — centered hero style to match other tracker pages */
        .page-header { display:flex; flex-direction:column; align-items:center; text-align:center; gap:32px; margin-bottom:40px; }
        .page-title-block h1 { font-family:var(--font-heading); font-size:2.4rem; font-weight:700; color:var(--text-main); margin:0 0 10px; line-height:1.15; }
        .page-title-block p { font-size: var(--fs-base); color:var(--text-secondary); margin:0; max-width:560px; }
        @media (max-width: 640px) {
            .page-title-block h1 { font-size:1.8rem; }
            .page-title-block p { font-size: var(--fs-sm); }
        }

        /* Loading skeleton */
        .skeleton {
            background:linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02) 75%);
            background-size:200% 100%;
            animation:shimmer 1.5s infinite;
            border-radius:14px;
            height:56px;
        }
        @keyframes shimmer { 0% {background-position:200% 0} 100% {background-position:-200% 0} }

        /* Create modal */
        .modal-backdrop {
            position:fixed; inset:0; background:rgba(10,10,18,0.85);
            display:none; align-items:flex-start; justify-content:center;
            z-index:1000; padding:40px 16px; overflow-y:auto;
        }
        .modal-backdrop.active { display:flex; }
        .modal-panel {
            background:var(--bg-surface-2);
            border:1px solid rgba(255,255,255,0.08);
            border-radius:16px;
            padding:24px;
            max-width:540px;
            width:100%;
            box-shadow:0 20px 60px rgba(0,0,0,0.5);
        }
        .modal-title { font-family:var(--font-heading); font-size:1.3rem; font-weight:600; color:var(--text-main); margin:0 0 16px; }
        .modal-field { margin-bottom:14px; }
        .modal-field label { display:block; font-size: var(--fs-xs); color:var(--text-secondary); margin-bottom:6px; font-weight:500; text-transform:uppercase; letter-spacing:0.3px; }
        .modal-field input, .modal-field textarea, .modal-field select {
            width:100%;
            background:rgba(255,255,255,0.03);
            border:1px solid rgba(255,255,255,0.1);
            border-radius:8px;
            padding:10px 12px;
            color:var(--text-main);
            font-family:var(--font-body);
            font-size: var(--fs-sm);
            box-sizing:border-box;
            outline:none;
        }
        .modal-field textarea { min-height:90px; resize:vertical; font-family:var(--font-body); line-height:1.6; }
        .modal-field input:focus, .modal-field textarea:focus, .modal-field select:focus { border-color:var(--primary-text); }

        .modal-field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

        .modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
        .modal-btn {
            padding:9px 18px; border-radius:8px; font-family:var(--font-body);
            font-size: var(--fs-sm); font-weight:500; cursor:pointer; border:none; transition:all 0.15s;
        }
        .modal-btn.cancel { background:rgba(255,255,255,0.04); color:var(--text-secondary); border:1px solid rgba(255,255,255,0.08); }
        .modal-btn.cancel:hover { background:rgba(255,255,255,0.07); }
        .modal-btn.primary { background:linear-gradient(135deg, var(--primary-text), var(--primary)); color:white; }
        .modal-btn.primary:hover { filter:brightness(1.1); }
        .modal-btn:disabled { opacity:0.5; cursor:not-allowed; }

        .modal-src-grid { display:flex; gap:6px; flex-wrap:wrap; }
        .modal-src-btn {
            padding:6px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.08);
            background:rgba(255,255,255,0.03); color:var(--text-dim); font-size: var(--fs-xs); cursor:pointer;
            font-weight:500; transition:all 0.15s;
        }
        .modal-src-btn.active { border-color:rgba(var(--primary-rgb), 0.5); background:rgba(var(--primary-rgb), 0.12); color:var(--primary-text); }

        .modal-error { background:rgba(var(--danger-rgb), 0.1); border:1px solid rgba(var(--danger-rgb), 0.3); color:var(--danger); padding:10px 12px; border-radius:8px; font-size: var(--fs-sm); margin-bottom:12px; display:none; }
        .modal-error.active { display:block; }

        /* Subtle trend arrows (placeholder until we wire real data) */
        .trend-up { color:var(--success); }
        .trend-down { color:var(--danger); }
        .trend-flat { color:var(--text-dim); }