:root {
    --diana-primary: #8B7EC8;
    --diana-primary-soft: rgba(139, 126, 200, 0.08);
    --diana-primary-text: #6B5CA5;
    --diana-accent: #C490D1;
    --diana-bg: #F8F7FC;
    --diana-surface: rgba(255, 255, 255, 0.65);
    --diana-surface-solid: #FFFFFF;
    --diana-text: #2D2A3E;
    --diana-text-sec: #8E8A9E;
    --diana-text-muted: #B5B1C4;
    --diana-border: rgba(139, 126, 200, 0.07);
    --diana-border-active: rgba(139, 126, 200, 0.18);
    --diana-green: #6DD4A0;
    --diana-green-soft: rgba(109, 212, 160, 0.08);
    --diana-amber: #E8A769;
    --diana-amber-soft: rgba(232, 167, 105, 0.08);
    --diana-blue: #6BA3E8;
    --diana-red: #E07575;
    --diana-radius: 14px;
    --diana-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Outfit', -apple-system, sans-serif;
    background: var(--diana-bg);
    color: var(--diana-text);
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(139,126,200,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(196,144,209,0.04) 0%, transparent 50%);
}

/* ── Ant Design overrides ── */
.ant-layout { background: transparent !important; }
.ant-layout-sider { background: rgba(255,255,255,0.45) !important; backdrop-filter: blur(40px); border-right: 1px solid var(--diana-border) !important; }
.ant-menu { background: transparent !important; border: none !important; font-family: 'Outfit', sans-serif !important; }
.ant-menu-item { border-radius: 8px !important; margin: 2px 8px !important; color: var(--diana-text-sec) !important; }
.ant-menu-item:hover { background: var(--diana-primary-soft) !important; color: var(--diana-text) !important; }
.ant-menu-item-selected { background: var(--diana-primary-soft) !important; color: var(--diana-primary-text) !important; font-weight: 500 !important; }
.ant-menu-item-selected::after { display: none !important; }
.ant-card { border-radius: var(--diana-radius) !important; border: 1px solid var(--diana-border) !important; box-shadow: none !important; }
.ant-card:hover { border-color: var(--diana-border-active) !important; }
.ant-tag { border-radius: 6px !important; border: none !important; font-family: 'Outfit', sans-serif !important; font-size: 11px !important; }
.ant-btn-primary { background: linear-gradient(135deg, var(--diana-primary), #9B8ED8) !important; border: none !important; box-shadow: 0 2px 10px rgba(139,126,200,0.2) !important; }
.ant-btn-primary:hover { box-shadow: 0 4px 16px rgba(139,126,200,0.3) !important; transform: translateY(-1px); }
.ant-badge-status-success { background: var(--diana-green) !important; }
.ant-badge-status-warning { background: var(--diana-amber) !important; }
.ant-badge-status-processing { background: var(--diana-primary) !important; }

/* ── Layout ── */
.diana-app { min-height: 100vh; position: relative; z-index: 1; }
.diana-logo { display: flex; align-items: center; gap: 10px; padding: 20px 20px 28px; }
.diana-logo-mark { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--diana-primary), var(--diana-accent)); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(139,126,200,0.25); color: white; font-weight: 700; font-size: 14px; }
.diana-logo-text { font-size: 18px; font-weight: 600; letter-spacing: -0.3px; }
.diana-content { padding: 24px 28px; overflow-y: auto; height: calc(100vh - 0px); }
.diana-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.diana-topbar-title { font-size: 15px; font-weight: 500; letter-spacing: -0.2px; }
.diana-topbar-sub { font-size: 12.5px; color: var(--diana-text-muted); margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--diana-border); }

/* ── Status dots ── */
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-dot.green { background: var(--diana-green); box-shadow: 0 0 6px rgba(109,212,160,0.4); }
.status-dot.amber { background: var(--diana-amber); }
.status-dot.red { background: var(--diana-red); }
.status-dot.pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp 0.4s var(--diana-ease) both; }

/* ── Feature board ── */
.board { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 16px; }
.board-column { min-width: 240px; flex: 1; }
.board-column-header { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.8px; color: var(--diana-text-muted); padding: 0 4px 12px; display: flex; justify-content: space-between; }
.board-column-count { background: var(--diana-primary-soft); color: var(--diana-primary-text); border-radius: 10px; padding: 1px 8px; font-size: 11px; }
.feature-card { padding: 14px 16px; margin-bottom: 8px; border-radius: 12px; background: var(--diana-surface-solid); border: 1px solid var(--diana-border); cursor: pointer; transition: all 0.25s var(--diana-ease); }
.feature-card:hover { border-color: var(--diana-border-active); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(139,126,200,0.06); }
.feature-card-title { font-size: 13.5px; font-weight: 500; margin-bottom: 4px; }
.feature-card-desc { font-size: 12px; color: var(--diana-text-sec); line-height: 1.4; }
.feature-card-tags { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.feature-tag { font-size: 10px; padding: 2px 8px; border-radius: 5px; font-weight: 500; }
.feature-tag.api { background: var(--diana-green-soft); color: #3D8B5E; }
.feature-tag.ui { background: rgba(107,163,232,0.08); color: #4A7BB8; }
.feature-tag.db { background: var(--diana-amber-soft); color: #B07D3A; }
.feature-tag.auth { background: var(--diana-primary-soft); color: var(--diana-primary-text); }
.feature-tag.payments { background: rgba(224,117,117,0.08); color: #C25555; }

/* ── Members ── */
.member-card { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 12px; background: var(--diana-surface-solid); border: 1px solid var(--diana-border); margin-bottom: 8px; transition: all 0.25s var(--diana-ease); }
.member-card:hover { border-color: var(--diana-border-active); }
.member-avatar { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; color: white; position: relative; }
.member-info { flex: 1; }
.member-name { font-size: 14px; font-weight: 500; }
.member-email { font-size: 12px; color: var(--diana-text-muted); }
.role-badge { font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 7px; }
.role-badge.owner { background: var(--diana-primary-soft); color: var(--diana-primary-text); }
.role-badge.engineer { background: var(--diana-green-soft); color: #3D8B5E; }
.role-badge.copilot { background: linear-gradient(135deg, rgba(139,126,200,0.1), rgba(196,144,209,0.08)); color: var(--diana-primary-text); }

/* ── Environment cards ── */
.env-card { padding: 20px; border-radius: var(--diana-radius); background: var(--diana-surface-solid); border: 1px solid var(--diana-border); }
.env-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.env-card-title { font-size: 14px; font-weight: 500; }
.env-card-url { font-size: 12px; color: var(--diana-primary-text); font-family: 'JetBrains Mono', monospace; }