/* MECE AI scoped styles */
.project-scope.mece-ai .mece-input { margin: 20px 0; }
.project-scope.mece-ai .mece-label { display:block; font-weight:600; margin-bottom:8px; }
.project-scope.mece-ai .mece-textarea { width:100%; padding:12px; border:1px solid #ddd; border-radius:8px; font-size:16px; }
.project-scope.mece-ai .mece-actions { margin-top:10px; }
.project-scope.mece-anything .mece-btn { padding:10px 16px; border:none; border-radius:8px; cursor:pointer; }
.project-scope.mece-anything .mece-btn.primary { background:#667eea; color:#fff; }
.project-scope.mece-anything .mece-hint { color:#666; font-size:12px; margin-top:6px; }
.project-scope.mece-anything .mece-proposals { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:12px; margin-top:16px; }
.project-scope.mece-anything .proposal-card { border:1px solid #eee; border-radius:10px; padding:12px; background:#fff; }
.project-scope.mece-anything .proposal-title { font-weight:700; margin:0 0 6px; }
.project-scope.mece-anything .proposal-desc { color:#555; font-size:14px; margin-bottom:8px; }
.project-scope.mece-anything .proposal-items { display:flex; flex-wrap:wrap; gap:6px; }
.project-scope.mece-anything .proposal-item { background:#f5f6ff; border:1px solid #e1e5ff; border-radius:6px; padding:4px 8px; font-size:12px; }
.project-scope.mece-anything .proposal-recommended { color:#0a7; font-weight:600; font-size:12px; }
.project-scope.mece-anything .mece-tree { position:relative; margin-top:20px; min-height:120px; border:1px dashed #ddd; border-radius:8px; padding:10px; overflow:auto; color:#e5e7eb; }
.project-scope.mece-anything .mece-edges { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.project-scope.mece-anything .mece-root { list-style:none; margin:0; padding:20px 8px; display:flex; flex-wrap:wrap; gap:12px; }
.project-scope.mece-anything .mece-node { background:#0f172a; border:1px solid #2a3346; border-radius:8px; padding:10px 12px; box-shadow:0 1px 2px rgba(0,0,0,0.35); font-size:14px; color:#e2e8f0; }

/* New tree layout */
.project-scope.mece-anything .mece-tree-root { padding:12px 8px 24px; }
.project-scope.mece-anything .mece-node { position:relative; min-width:200px; max-width:360px; }
.project-scope.mece-anything .mece-node__header { display:flex; align-items:center; gap:8px; font-weight:600; margin-bottom:6px; }
.project-scope.mece-anything .mece-node__title, 
.project-scope.mece-anything .mece-row__title { writing-mode:horizontal-tb; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#e2e8f0; }
.project-scope.mece-anything .mece-node__header * { line-height:1.4; }
.project-scope.mece-anything .mece-node__header .mece-node__title { max-width:70%; }
.project-scope.mece-anything .mece-node__classify { margin-left:auto; font-size:12px; padding:6px 10px; border:1px solid #334155; background:#1f2937; color:#e2e8f0; border-radius:6px; cursor:pointer; writing-mode:initial; }
.project-scope.mece-anything .mece-node__classify:hover { background:#273244; }
.project-scope.mece-anything .mece-node__sections { display:grid; grid-template-columns:1fr; gap:6px; }
.project-scope.mece-anything .mece-node__cats { border:1px dashed #334155; border-radius:6px; padding:8px; background:#0b1220; }
.project-scope.mece-anything .mece-node__cats-title { font-size:12px; color:#9aa8bd; margin-bottom:4px; }
.project-scope.mece-anything .mece-node__cats-list { display:flex; flex-wrap:wrap; gap:6px; }
.project-scope.mece-anything .mece-node__cat { background:#22314d; color:#e2e8f0; padding:3px 8px; border-radius:999px; font-size:12px; }
.project-scope.mece-anything .mece-node__reason { border:1px dashed #334155; border-radius:6px; padding:8px; background:#0b1220; color:#cbd5e1; font-size:13px; word-break:keep-all; overflow-wrap:anywhere; }
.project-scope.mece-anything .mece-node__reason-title { font-size:12px; color:#64748b; margin-top:6px; margin-bottom:4px; }
.project-scope.mece-anything .mece-node__children { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-top:10px; padding-top:6px; }
.project-scope.mece-anything .mece-node__proposals { margin-top:8px; display:grid; gap:6px; }
.project-scope.mece-anything .mece-node__proposal { border:1px solid #e7e7ef; border-radius:6px; padding:6px; background:#fff; cursor:pointer; }
.project-scope.mece-anything .mece-node__proposal:hover { background:#f6f8ff; }
.project-scope.mece-anything .mece-node__proposal-title { font-weight:600; font-size:13px; margin-bottom:2px; }
.project-scope.mece-anything .mece-node__proposal-desc { font-size:12px; color:#64748b; }

/* Proposal rows (T1/T2/T3) */
.project-scope.mece-anything .mece-proposals { margin-top:12px; display:block; }
.project-scope.mece-anything .mece-row { position:relative; margin:8px 0 18px; padding:10px 8px 14px; border:1px dashed #334155; border-radius:8px; background:rgba(15,23,42,0.6); color:#e2e8f0; }
.project-scope.mece-anything .mece-row__header { display:flex; align-items:center; gap:10px; margin:4px 6px 8px; }
.project-scope.mece-anything .mece-row__title { font-weight:700; }
.project-scope.mece-anything .mece-row__desc { font-size:12px; color:#cbd5e1; max-width:65%; white-space:normal; word-break:keep-all; overflow-wrap:anywhere; }
.project-scope.mece-anything .mece-row__nodes { display:flex; flex-wrap:wrap; gap:12px; }
.project-scope.mece-anything .mece-row__nodes .mece-node { flex:1 1 280px; max-width:360px; }

.project-scope.mece-anything .mece-row.is-collapsed .mece-row__nodes { display:none; }
.project-scope.mece-anything .mece-row.is-collapsed { padding:8px 10px; }
.project-scope.mece-anything .mece-row.is-collapsed .mece-row__desc { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:calc(100% - 220px); }

/* Tiered view */
.project-scope.mece-anything .mece-tiers { display:flex; flex-direction:column; gap:14px; margin-top:14px; }
.project-scope.mece-anything .mece-tier { padding:10px; border-radius:10px; border:1px dashed #334155; background:rgba(15,23,42,0.5); }
.project-scope.mece-anything .mece-tier__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.project-scope.mece-anything .mece-tier__label { font-weight:700; color:#e2e8f0; }
.project-scope.mece-anything .mece-tier__nodes { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; align-items:start; }
.project-scope.mece-anything .mece-tier__nodes .mece-node { width:100%; max-width:none; }
.project-scope.mece-anything .mece-node.is-collapsed .mece-node__sections { display:none; }
.project-scope.mece-anything .mece-node.is-collapsed { padding:8px 10px; }
.project-scope.mece-anything .mece-node.is-selected { outline:1px solid #60a5fa; box-shadow:0 0 0 2px rgba(96,165,250,0.2) inset; }

/* Tier color themes */
.project-scope.mece-anything .mece-tier-1 { --tier-bg:#0f172a; --tier-border:#334155; --chip:#22314d; }
.project-scope.mece-anything .mece-tier-2 { --tier-bg:#111827; --tier-border:#3b4457; --chip:#2a3652; }
.project-scope.mece-anything .mece-tier-3 { --tier-bg:#0b1526; --tier-border:#2f3a4f; --chip:#263655; }
.project-scope.mece-anything .mece-tier-4 { --tier-bg:#121826; --tier-border:#3a4256; --chip:#2c3a58; }
.project-scope.mece-anything .mece-tier-5 { --tier-bg:#151a29; --tier-border:#424a5e; --chip:#324060; }
.project-scope.mece-anything .mece-tier-1 .mece-node,
.project-scope.mece-anything .mece-tier-2 .mece-node,
.project-scope.mece-anything .mece-tier-3 .mece-node,
.project-scope.mece-anything .mece-tier-4 .mece-node,
.project-scope.mece-anything .mece-tier-5 .mece-node { background:var(--tier-bg); border-color:var(--tier-border); }
.project-scope.mece-anything .mece-tier-1 .mece-node__cat,
.project-scope.mece-anything .mece-tier-2 .mece-node__cat,
.project-scope.mece-anything .mece-tier-3 .mece-node__cat,
.project-scope.mece-anything .mece-tier-4 .mece-node__cat,
.project-scope.mece-anything .mece-tier-5 .mece-node__cat { background:var(--chip); }
/* Mind map canvas */
.project-scope.mece-anything .mm-container { position:relative; height:600px; min-height:480px; border:1px solid #1f2a3a; border-radius:10px; background:linear-gradient(180deg, rgba(8,12,20,0.75), rgba(10,16,28,0.85)); box-shadow: inset 0 0 30px rgba(0,0,0,0.35); margin-bottom: 40px; }
.project-scope.mece-anything .mm-edges { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.project-scope.mece-anything .mm-nodes { position:relative; width:2400px; height:1800px; }
.project-scope.mece-anything .mm-node { position:absolute; background:#0f172a; color:#e2e8f0; border:1px solid #2a3346; border-radius:8px; padding:12px 14px; padding-right:48px; min-width:320px; max-width:520px; box-shadow:0 2px 6px rgba(0,0,0,.3); overflow:visible; }
.project-scope.mece-anything .mm-node__title { font-weight:700; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.project-scope.mece-anything .mm-node__meta { font-size:12px; color:#9aa8bd; }
.project-scope.mece-anything .mm-node__controls { margin-top:6px; display:flex; align-items:center; gap:10px; flex-wrap:nowrap; white-space:nowrap; }
.project-scope.mece-anything .mm-node__controls .mm-select { min-width:200px; }
.project-scope.mece-anything .mm-node__controls .mece-btn { padding:6px 12px; }
/* Floating apply button: half inside, half outside on right border midpoint */
.project-scope.mece-anything .mm-apply-floating { position:absolute; top:50%; right:-14px; transform:translateY(-50%); z-index:22; border-radius:999px; }
.project-scope.mece-anything .mm-edge-label { font-size:12px; fill:#cbd5e1; }
.project-scope.mece-anything .mm-toolbar { display:flex; gap:8px; margin-top:8px; }
.project-scope.mece-anything .mm-toolbar .mm-select { background:#111827; color:#e2e8f0; border:1px solid #334155; border-radius:6px; padding:6px 8px; }
/* mm panning and fullscreen */
.project-scope.mece-anything .mm-container.is-fullscreen { position:fixed; left:8px; right:8px; top:calc(var(--header-height, 70px) + 8px); height:calc(100vh - var(--header-height, 70px) - 16px); z-index:1000; margin:0; border:0; border-radius:10px; background:rgba(6,12,20,0.9); padding:8px; }
.project-scope.mece-anything .mm-fs-btn { position:absolute; top:8px; right:8px; z-index:20; background:#0b1220; color:#e2e8f0; border:1px solid #334155; border-radius:6px; padding:6px 10px; cursor:pointer; }
.project-scope.mece-anything .mm-label { font-size:12px; color:#9aa8bd; }
/* zoom controls bottom-left */
.project-scope.mece-anything .mm-zoom { position:absolute; left:12px; bottom:12px; z-index:20; display:flex; flex-direction:column; gap:10px; }
.project-scope.mece-anything .mm-zoom__toggle { width:38px; height:38px; border-radius:999px; background:#0b1220; color:#e2e8f0; border:1px solid #334155; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,.3); }
.project-scope.mece-anything .mm-zoom__stack { display:flex; flex-direction:column; align-items:center; gap:8px; background:#0b1220; border:1px solid #334155; border-radius:18px; padding:10px 12px; box-shadow:0 6px 14px rgba(0,0,0,.35); }
.project-scope.mece-anything .mm-zoom__btn { width:24px; height:24px; line-height:24px; text-align:center; border:none; border-radius:6px; background:transparent; color:#e2e8f0; cursor:pointer; font-weight:700; }
.project-scope.mece-anything .mm-node__controls { margin-top:6px; display:flex; align-items:center; gap:6px; flex-wrap:nowrap; }
.project-scope.mece-anything .mm-nodes, .project-scope.mece-anything .mm-edges { transform-origin: 0 0; will-change: transform; }
.project-scope.mece-anything .mm-container, 
.project-scope.mece-anything .mm-node { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* floating menu for node criteria */
.project-scope.mece-anything .mm-menu { position:absolute; z-index:5; background:#0b1220; border:1px solid #334155; border-radius:8px; padding:8px; box-shadow:0 6px 16px rgba(0,0,0,.45); display:flex; align-items:center; }
.project-scope.mece-anything .mm-select { background:#0b1220; color:#e2e8f0; border:1px solid #334155; border-radius:6px; padding:6px 8px; }
/* ===== HOLOGRAPHIC PROJECTS PAGE STYLES ===== */

/* CSS Variables for Holographic Theme */
:root {
    --hologram-primary: #00ffff;
    --hologram-secondary: #ff00ff;
    --hologram-accent: #ffff00;
    --hologram-bg: rgba(0, 0, 0, 0.9);
    --hologram-border: rgba(0, 255, 255, 0.3);
    --hologram-glow: rgba(0, 255, 255, 0.2);
    --hologram-text: #ffffff;
    --hologram-text-secondary: #cccccc;
}

/* ===== HOLOGRAPHIC HEADER ===== */
.projects-header {
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.95) 0%, 
        rgba(20, 20, 20, 0.9) 50%, 
        rgba(0, 0, 0, 0.95) 100%);
    position: relative;
    overflow: hidden;
    min-height: 40vh;
    display: flex;
    align-items: center;
}

.projects-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(0, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 0, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(255, 255, 0, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

.projects-header .container {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.page-title {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    background: linear-gradient(45deg, 
        var(--hologram-primary), 
        var(--hologram-secondary), 
        var(--hologram-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
    position: relative;
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
}

.page-title::before {
    content: 'PROJECT_LOG_';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    color: #ff0000;
    font-family: 'Courier New', monospace;
    opacity: 0.8;
    letter-spacing: 3px;
}

.page-description {
    font-size: 1.2rem;
    color: var(--hologram-text-secondary);
    font-family: 'Courier New', monospace;
    opacity: 0.9;
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* ===== FILTER SECTION ===== */
.projects-filter {
    padding: 2rem 0;
    border-bottom: 1px solid var(--hologram-border);
    position: static; /* disable sticky header */
}

.projects-filter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        var(--hologram-primary), 
        var(--hologram-secondary), 
        transparent);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.filter-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.filter-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hologram-primary);
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    white-space: nowrap;
    opacity: 0.9;
}

.filter-select,
.filter-input {
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--hologram-border);
    color: var(--hologram-text);
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
}

.filter-select:focus,
.filter-input:focus {
    outline: none;
    border-color: var(--hologram-primary);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.9);
}

.filter-select:hover,
.filter-input:hover {
    color: var(--hologram-primary);
    border-color: var(--hologram-primary);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

.filter-input {
    min-width: 200px;
}

.filter-input::placeholder {
    color: var(--hologram-text-secondary);
    opacity: 0.6;
}

/* ===== PROJECTS GRID ===== */
.projects-list {
    padding: 3rem 0;
    background: var(--hologram-bg);
    min-height: 60vh;
    position: relative;
}

/* ===== PROJECTS CAROUSEL (3D) ===== */
.projects-carousel { padding: 3rem 0; background: var(--hologram-bg); }
.projects-carousel .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.carousel-stage { position: relative; height: 640px; perspective: 1200px; display: flex; align-items: center; justify-content: center; }
.carousel-card { position: absolute; width: 360px; height: 560px; background: rgba(0,0,0,0.7); border:1px solid var(--hologram-border); border-radius: 14px; overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); will-change: transform, opacity; transition: transform 420ms cubic-bezier(.22,.61,.36,1), opacity 420ms cubic-bezier(.22,.61,.36,1), filter 420ms, box-shadow 240ms ease, border-color 240ms ease; display:flex; flex-direction:column; }
.carousel-card__head { display:flex; justify-content:space-between; align-items:flex-start; padding:12px 14px; font-family:'Courier New', monospace; }
.carousel-card__num { color: var(--hologram-accent); font-weight:700; font-size:12px; }
.carousel-card__badges { display:flex; gap:6px; align-items:center; }
.carousel-card__badge { padding: 2px 8px; border-radius: 999px; border:1px solid var(--hologram-border); font-size: 11px; color: var(--hologram-text-secondary); background: rgba(0,0,0,0.5); text-transform: uppercase; letter-spacing: 0.5px; }
.carousel-card__badge.status-active { background: rgba(0, 255, 0, 0.15); color: #00ff00; border-color: rgba(0,255,0,0.3); }
.carousel-card__badge.status-beta { background: rgba(255, 255, 0, 0.15); color: #ffff00; border-color: rgba(255,255,0,0.3); }
.carousel-card__badge.status-experimental { background: rgba(255, 0, 255, 0.15); color: #ff00ff; border-color: rgba(255,0,255,0.3); }
.carousel-card__badge.status-completed { background: rgba(0, 255, 255, 0.15); color: #00ffff; border-color: rgba(0,255,255,0.3); }
.carousel-card__title { margin:12px 14px 10px; color: var(--hologram-primary); font-size:22px; font-weight:800; line-height:1.35; display:-webkit-box; line-clamp:2; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:56px; }
.carousel-card__thumb { position:relative; margin:0 14px; height:220px; border:1px solid var(--hologram-border); border-radius:10px; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; }
.carousel-card__thumb img { width:100%; height:100%; object-fit:contain; image-rendering:auto; }
.carousel-card__desc { margin:12px 14px; color: var(--hologram-text-secondary); font-size:13.5px; line-height:1.55; display:-webkit-box; line-clamp:3; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:64px; }
.carousel-card__tags { margin:0 14px auto; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.carousel-card__tag { background: rgba(0, 255, 255, 0.1); color: var(--hologram-primary); padding: 4px 10px; border-radius: 999px; border:1px solid rgba(0,255,255,0.2); font-size:12px; }
.carousel-card__cta { margin:14px; }
.carousel-card__cta a { display:block; width:100%; text-align:center; padding:10px 14px; border-radius:10px; background: linear-gradient(135deg, var(--hologram-primary), var(--hologram-secondary)); color:#000; font-weight:700; text-decoration:none; box-shadow:0 2px 10px rgba(0,255,255,0.2); }
.carousel-card__cta a[aria-disabled="true"] { pointer-events:none; opacity:.5; filter:grayscale(0.6); }

/* Positions and states */
.carousel-card.is-center { transform: translateX(0) rotateY(0deg) scale(1.0); opacity:1; z-index:3; filter:none; }
.carousel-card.is-left { transform: translateX(-300px) rotateY(-12deg) scale(0.9); opacity:0.75; z-index:2; filter: blur(2px); pointer-events:auto; }
.carousel-card.is-right { transform: translateX(300px) rotateY(12deg) scale(0.9); opacity:0.75; z-index:2; filter: blur(2px); pointer-events:auto; }
.carousel-card.is-hidden { opacity:0; pointer-events:none; transform: translateX(0) scale(0.8); z-index:1; }

.carousel-controls { display:flex; align-items:center; justify-content:space-between; max-width:720px; margin:14px auto 0; gap:10px; }
.carousel-btn { background:transparent; border:1px solid var(--hologram-border); color:var(--hologram-text); width:44px; height:44px; border-radius:999px; cursor:pointer; transition:all .2s; }
.carousel-btn:hover { border-color: var(--hologram-primary); box-shadow:0 0 12px rgba(0,255,255,0.25); }

.carousel-dots { display:flex; gap:10px; justify-content:center; margin-top:16px; }
.carousel-dot { width:10px; height:10px; border-radius:999px; background: rgba(255,255,255,0.35); border:1px solid var(--hologram-border); cursor:pointer; transition:transform .2s, background-color .2s; }
.carousel-dot.is-active { background: var(--hologram-primary); transform: scale(1.25); }

@media (max-width: 900px){
  .carousel-card { width: 320px; height: 520px; }
  .carousel-card.is-left { transform: translateX(-240px) rotateY(-12deg) scale(0.9); }
  .carousel-card.is-right { transform: translateX(240px) rotateY(12deg) scale(0.9); }
}

@media (prefers-reduced-motion: reduce){
  .carousel-card{ transition: none; }
}

/* Subtle hover effects */
.carousel-card.is-center:hover,
.carousel-card.is-center:focus-within { 
  transform: translateX(0) rotateY(0deg) scale(1.02);
  border-color: var(--hologram-primary);
  box-shadow: 0 10px 28px rgba(0,255,255,0.18);
}

.carousel-card.is-left:hover,
.carousel-card.is-right:hover { 
  border-color: var(--hologram-primary);
  box-shadow: 0 6px 18px rgba(0,255,255,0.12);
}

@media (prefers-reduced-motion: reduce){
  .carousel-card.is-center:hover,
  .carousel-card.is-center:focus-within { transform: translateX(0) rotateY(0deg) scale(1.0); }
}

.projects-list::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        var(--hologram-accent), 
        var(--hologram-primary), 
        transparent);
    animation: shimmer 4s ease-in-out infinite reverse;
}

.projects-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding: 0 1rem;
}

/* ===== PROJECT ITEMS ===== */
.project-item {
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--hologram-border);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    gap: 2rem;
    align-items: center;
}

.project-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        var(--hologram-primary), 
        var(--hologram-secondary), 
        var(--hologram-accent));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-item:hover {
    transform: translateX(8px);
    border-color: var(--hologram-primary);
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.2);
}

.project-item:hover::before {
    opacity: 1;
}

/* ===== PROJECT THUMBNAIL ===== */
.project-thumbnail {
    position: relative;
    flex-shrink: 0;
    width: 120px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--hologram-border);
}

.project-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

.project-item:hover .project-image {
    transform: scale(1.05);
}

.project-overlay {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.project-overlay .project-status {
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Courier New', monospace;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ===== PROJECT CONTENT ===== */
.project-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.project-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.project-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--hologram-primary);
    margin: 0;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
    line-height: 1.3;
    flex: 1;
}

.project-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.project-category {
    background: rgba(0, 255, 255, 0.1);
    color: var(--hologram-primary);
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    border: 1px solid rgba(0, 255, 255, 0.2);
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.project-status-badge {
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Courier New', monospace;
}

.project-description {
    color: var(--hologram-text-secondary);
    line-height: 1.5;
    margin: 0;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
    flex: 1;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.project-tag {
    background: rgba(0, 255, 255, 0.1);
    color: var(--hologram-primary);
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 500;
    border: 1px solid rgba(0, 255, 255, 0.2);
    font-family: 'Courier New', monospace;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
}

.project-tag:hover {
    background: rgba(0, 255, 255, 0.2);
    border-color: var(--hologram-primary);
}

.project-actions {
    display: flex;
    justify-content: flex-end;
}

.project-link {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: linear-gradient(135deg, 
        var(--hologram-primary), 
        var(--hologram-secondary));
    color: var(--hologram-bg);
    text-decoration: none;
    border-radius: 20px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 255, 255, 0.3);
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.8rem;
}

.project-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 255, 255, 0.4);
    color: var(--hologram-bg);
    text-decoration: none;
}

/* ===== STATUS COLORS ===== */
.status-active {
    background: rgba(0, 255, 0, 0.15);
    color: #00ff00;
    border: 1px solid rgba(0, 255, 0, 0.3);
}

.status-beta {
    background: rgba(255, 255, 0, 0.15);
    color: #ffff00;
    border: 1px solid rgba(255, 255, 0, 0.3);
}

.status-experimental {
    background: rgba(255, 0, 255, 0.15);
    color: #ff00ff;
    border: 1px solid rgba(255, 0, 255, 0.3);
}

.status-completed {
    background: rgba(0, 255, 255, 0.15);
    color: #00ffff;
    border: 1px solid rgba(0, 255, 255, 0.3);
}

/* ===== LOADING STATE ===== */
.projects-loading {
    text-align: center;
    padding: 3rem;
    color: var(--hologram-text-secondary);
    font-size: 1.1rem;
    font-family: 'Courier New', monospace;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.project-item {
    animation: fadeInUp 0.6s ease-out;
    opacity: 1;
    visibility: visible;
}

.project-item:nth-child(1) { animation-delay: 0.1s; }
.project-item:nth-child(2) { animation-delay: 0.2s; }
.project-item:nth-child(3) { animation-delay: 0.3s; }
.project-item:nth-child(4) { animation-delay: 0.4s; }
.project-item:nth-child(5) { animation-delay: 0.5s; }
.project-item:nth-child(6) { animation-delay: 0.6s; }

/* 검색 결과 없음 메시지 */
.no-results {
    text-align: center;
    padding: 3rem;
    color: var(--hologram-text-secondary);
    font-size: 1.1rem;
    font-family: 'Courier New', monospace;
    opacity: 0.8;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .page-title {
        font-size: 2.5rem;
    }
    
    .filter-controls {
        flex-direction: column;
        gap: 1rem;
    }
    
    .filter-group {
        min-width: auto;
        width: 100%;
    }
    
    .filter-input {
        min-width: auto;
    }
    
    .projects-grid {
        gap: 1rem;
        padding: 0 1rem;
    }
    
    .project-item {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }
    
    .project-thumbnail {
        width: 100%;
        height: 120px;
    }
    
    .project-header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    
    .project-title {
        font-size: 1.2rem;
    }
    
    .project-meta {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 480px) {
    .projects-header {
        min-height: 30vh;
        padding: 2rem 0;
    }
    
    .page-title {
        font-size: 2rem;
    }
    
    .page-description {
        font-size: 1rem;
    }
    
    .filter-controls {
        flex-direction: column;
    }
    
    .filter-tab {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }
    
    .project-item {
        padding: 1rem;
    }
    
    .project-title {
        font-size: 1.1rem;
    }
    
    .project-thumbnail {
        height: 100px;
    }
    
    .project-tags {
        gap: 0.3rem;
    }
    
    .project-tag {
        font-size: 0.65rem;
        padding: 0.15rem 0.4rem;
    }
}
.project-scope.mece-anything .mm-node.is-collapsed .mm-node__meta,
.project-scope.mece-anything .mm-node.is-collapsed .mm-node__controls { display:none; }

/* Single-SVG Mind Map styles */
.project-scope.mece-ai .mm-container,
.project-scope.mece-ai #mm-svg,
.project-scope.mece-ai .mm-node-svg,
.project-scope.mece-ai .mm-link { display:none !important; }
/* cleanup debug overrides */

/* ensure container has consistent size */
.project-scope.mece-anything .mm-container { height: 600px; }