/* ========================================================
   3D Data Pipeline – Meshy-inspired Modern Dark Theme
   ======================================================== */

/* --- CSS Variables --- */
:root {
    --bg-base:      #09090b;
    --bg-darker:    #0c0c10;
    --bg-dark:      #111118;
    --bg-card:      #16161e;
    --bg-card-hover:#1c1c28;
    --bg-elevated:  #1e1e2a;
    --border:       #23232f;
    --border-hover: #363648;
    --border-glow:  rgba(124,58,237,.4);

    --purple:       #7c3aed;
    --purple-light: #a855f7;
    --purple-dim:   #6d28d9;
    --purple-dark:  #4c1d95;
    --purple-subtle:rgba(124,58,237,.08);
    --purple-glow:  rgba(124,58,237,.25);

    --cyan:         #06b6d4;
    --green:        #10b981;
    --green-dim:    #059669;
    --orange:       #f59e0b;
    --red:          #ef4444;
    --red-dim:      #7f1d1d;

    --text:         #d1d1db;
    --text-dim:     #6b6b80;
    --text-bright:  #f0f0f5;
    --text-muted:   #4a4a5a;

    --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    --font-main:    'Inter', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --radius:       10px;
    --radius-lg:    16px;
    --radius-xl:    20px;
    --shadow-sm:    0 1px 2px rgba(0,0,0,.3);
    --shadow-md:    0 4px 16px rgba(0,0,0,.4);
    --shadow-lg:    0 8px 32px rgba(0,0,0,.5);
    --shadow-glow:  0 0 30px rgba(124,58,237,.15);
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-main);
    background: var(--bg-base);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Gradient background overlay */
.bg-gradient {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(124,58,237,.12) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 110%, rgba(6,182,212,.06) 0%, transparent 50%);
}

/* Subtle grid */
.bg-grid {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(124,58,237,.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124,58,237,.015) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: .5;
}

/* --- Typography --- */
h1 {
    font-size: 1.3rem; font-weight: 700; letter-spacing: .04em;
    background: linear-gradient(135deg, #a855f7, #7c3aed, #06b6d4);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
h2 { font-size: 1.05rem; font-weight: 600; color: var(--text-bright); }
h3 { font-size: .92rem; font-weight: 600; color: var(--text); margin: 1rem 0 .5rem; }

/* --- Layout --- */
header, section, footer { position: relative; z-index: 1; }

.header {
    display: flex; align-items: center; justify-content: space-between;
    padding: .9rem 2rem;
    border-bottom: 1px solid var(--border);
    background: rgba(9,9,11,.85);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    position: sticky; top: 0; z-index: 100;
}
.header-brand { display: flex; align-items: center; gap: .8rem; }
.logo-cube { display: flex; align-items: center; }
.header-sub { font-size: .72rem; color: var(--text-dim); letter-spacing: .06em; }
.header-right { display: flex; align-items: center; gap: 1.5rem; }
.header-status { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-family: var(--font-mono); color: var(--text-dim); }
.status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--red); box-shadow: 0 0 6px var(--red);
    transition: all .3s;
}
.status-dot.online { background: var(--green); box-shadow: 0 0 8px var(--green); }

/* --- Sections --- */
.section {
    max-width: 1200px; margin: 1.8rem auto; padding: 0 1.5rem;
}
.section-title {
    display: flex; align-items: center; gap: .6rem;
    margin-bottom: 1rem; padding-bottom: .5rem;
    border-bottom: 1px solid var(--border);
}
.tag {
    font-family: var(--font-mono); font-size: .65rem; font-weight: 700;
    color: white; background: linear-gradient(135deg, var(--purple), var(--purple-light));
    padding: .15rem .5rem; border-radius: 6px;
}

/* --- Pipeline Visualisation --- */
.pipeline-canvas {
    width: 100%; min-height: 160px; border-radius: var(--radius-lg);
    background: var(--bg-card); border: 1px solid var(--border);
    padding: 1.5rem; overflow-x: auto;
    box-shadow: var(--shadow-sm);
}
.pipeline-flow {
    display: flex; align-items: center; justify-content: center;
    gap: 0; min-width: 700px; flex-wrap: nowrap;
}
.pipe-node {
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    padding: .8rem 1.2rem; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--bg-dark);
    transition: all .4s; min-width: 100px; text-align: center;
    position: relative;
}
.pipe-node:hover { border-color: var(--purple); box-shadow: 0 0 20px rgba(124,58,237,.15); }
.pipe-node.active { border-color: var(--purple); box-shadow: 0 0 24px rgba(124,58,237,.3); animation: nodePulse 1.5s infinite; }
.pipe-node.done { border-color: var(--green-dim); }
.pipe-node.error { border-color: var(--red); }
@keyframes nodePulse { 0%,100% { box-shadow: 0 0 12px rgba(124,58,237,.2); } 50% { box-shadow: 0 0 28px rgba(124,58,237,.5); } }
.pipe-icon { font-size: 1.5rem; }
.pipe-label { font-size: .72rem; font-family: var(--font-mono); color: var(--text-dim); }
.pipe-count { font-size: .85rem; font-weight: 700; color: var(--purple-light); font-family: var(--font-mono); }
.pipe-arrow {
    font-size: 1.1rem; color: var(--text-muted); margin: 0 .2rem;
    animation: arrowFlow 2s infinite;
}
@keyframes arrowFlow { 0%,100% { opacity: .3; } 50% { opacity: 1; color: var(--purple); } }
.pipe-arrow.flowing { animation-duration: .6s; }

/* --- Controls --- */
.control-panel {
    display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
    padding: 1.4rem; border-radius: var(--radius-lg);
    background: var(--bg-card); border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.control-group { display: flex; flex-direction: column; gap: .35rem; }
.control-group label { font-size: .72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; font-weight: 500; }
.control-group select,
.control-group input {
    padding: .55rem .85rem; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--bg-dark);
    color: var(--text); font-size: .85rem; font-family: var(--font-mono);
    outline: none; transition: all .25s;
}
.control-group select:focus,
.control-group input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(124,58,237,.15); }

.control-buttons { display: flex; gap: .6rem; align-items: flex-end; }

.btn-primary {
    display: flex; align-items: center; gap: .45rem;
    padding: .55rem 1.4rem; border-radius: var(--radius);
    border: none;
    background: linear-gradient(135deg, var(--purple), var(--purple-light));
    color: white; font-size: .88rem; font-weight: 600;
    cursor: pointer; transition: all .3s; font-family: var(--font-main);
    box-shadow: 0 2px 12px rgba(124,58,237,.3);
}
.btn-primary:hover {
    box-shadow: 0 4px 20px rgba(124,58,237,.5); transform: translateY(-1px);
}
.btn-primary:disabled {
    opacity: .5; cursor: not-allowed; box-shadow: none; transform: none;
}
.btn-primary svg { width: 14px; height: 14px; }

.btn-danger {
    display: flex; align-items: center; gap: .45rem;
    padding: .55rem 1.4rem; border-radius: var(--radius);
    border: 1px solid var(--red);
    background: transparent;
    color: var(--red); font-size: .88rem; font-weight: 600;
    cursor: pointer; transition: all .3s; font-family: var(--font-main);
}
.btn-danger:hover {
    background: rgba(239,68,68,.1); box-shadow: 0 0 16px rgba(239,68,68,.2);
}
.btn-danger svg { width: 14px; height: 14px; }

/* --- Log --- */
.log-container {
    max-height: 320px; overflow-y: auto; padding: .8rem 1rem;
    border-radius: var(--radius-lg); background: var(--bg-card);
    border: 1px solid var(--border); font-family: var(--font-mono);
    font-size: .76rem; line-height: 1.8;
    box-shadow: var(--shadow-sm);
}
.log-container::-webkit-scrollbar { width: 5px; }
.log-container::-webkit-scrollbar-track { background: transparent; }
.log-container::-webkit-scrollbar-thumb { background: var(--purple-dark); border-radius: 3px; }
.log-line { padding: .12rem 0; border-bottom: 1px solid rgba(255,255,255,.015); display: flex; gap: .8rem; }
.log-time { color: var(--text-muted); min-width: 80px; }
.log-stage {
    font-weight: 600; min-width: 70px; text-transform: uppercase;
}
.log-stage.crawl { color: var(--cyan); }
.log-stage.download { color: var(--orange); }
.log-stage.clean { color: var(--green); }
.log-stage.complete { color: var(--purple-light); }
.log-stage.error { color: var(--red); }
.log-msg { color: var(--text); flex: 1; }

/* --- Stats --- */
.stats-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}
.stat-card {
    padding: 1.4rem; border-radius: var(--radius-lg);
    background: var(--bg-card); border: 1px solid var(--border);
    text-align: center; transition: all .3s;
    box-shadow: var(--shadow-sm);
}
.stat-card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-card.accent { border-color: rgba(16,185,129,.25); }
.stat-card.accent .stat-value { color: var(--green); }
.stat-card.danger { border-color: rgba(239,68,68,.2); }
.stat-icon { font-size: 1.3rem; margin-bottom: .3rem; }
.stat-value { font-size: 2.2rem; font-weight: 800; color: var(--purple-light); font-family: var(--font-mono); }
.stat-card.danger .stat-value { color: var(--red); }
.stat-label { font-size: .78rem; color: var(--text-dim); margin-top: .25rem; }

.breakdown-container {
    margin-top: 1.5rem; padding: 1.2rem;
    background: var(--bg-card); border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}
.breakdown-bar-row {
    display: flex; align-items: center; gap: .6rem; margin: .4rem 0;
}
.breakdown-bar-label { font-size: .72rem; color: var(--text-dim); min-width: 160px; font-family: var(--font-mono); }
.breakdown-bar {
    flex: 1; height: 16px; border-radius: 8px; background: var(--bg-dark); overflow: hidden;
}
.breakdown-bar-fill {
    height: 100%; border-radius: 8px;
    background: linear-gradient(90deg, var(--purple), var(--red));
    transition: width .6s ease;
}
.breakdown-bar-count { font-size: .72rem; color: var(--text); font-family: var(--font-mono); min-width: 30px; text-align: right; }

/* --- Gallery --- */
.gallery-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}
.model-card {
    padding: 1.2rem; border-radius: var(--radius-lg);
    background: var(--bg-card); border: 1px solid var(--border);
    cursor: pointer; transition: all .3s;
    box-shadow: var(--shadow-sm);
}
.model-card:hover {
    border-color: var(--purple); transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(124,58,237,.12);
}
.model-card-icon { font-size: 2.5rem; text-align: center; margin: .5rem 0; }
.model-card-name { font-weight: 600; font-size: .9rem; color: var(--text-bright); margin-bottom: .4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-card-meta { font-size: .72rem; color: var(--text-dim); font-family: var(--font-mono); line-height: 1.8; }
.model-card-meta span { color: var(--purple-light); }

.empty-hint { color: var(--text-dim); font-style: italic; text-align: center; padding: 2rem 0; grid-column: 1/-1; }

/* --- Data Table --- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.data-table {
    width: 100%; border-collapse: collapse;
    font-size: .78rem; font-family: var(--font-mono);
}
.data-table th {
    background: var(--bg-card); color: var(--purple-light);
    padding: .7rem 1rem; text-align: left; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em; font-size: .7rem;
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0;
}
.data-table td {
    padding: .6rem 1rem; border-bottom: 1px solid rgba(255,255,255,.02);
    color: var(--text);
}
.data-table tr:hover td { background: rgba(124,58,237,.03); }
.reason-tag {
    display: inline-block; padding: .15rem .5rem; border-radius: 6px;
    font-size: .68rem; font-weight: 600;
    background: var(--red-dim); color: var(--red);
}

/* --- Viewer Modal --- */
.viewer-modal {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,.92); backdrop-filter: blur(16px);
    display: flex; flex-direction: column;
}
.viewer-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: .8rem 1.5rem; border-bottom: 1px solid var(--border);
}
.viewer-header span { font-weight: 600; color: var(--purple-light); font-size: 1rem; }
.btn-close {
    background: none; border: 1px solid var(--border); color: var(--text);
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
    font-size: 1rem; display: flex; align-items: center; justify-content: center;
    transition: all .2s;
}
.btn-close:hover { border-color: var(--red); color: var(--red); }
.viewer-canvas-wrap { flex: 1; position: relative; overflow: hidden; }
.viewer-canvas-wrap canvas { width: 100% !important; height: 100% !important; display: block; }
.viewer-info {
    padding: .6rem 1.5rem; border-top: 1px solid var(--border);
    font-family: var(--font-mono); font-size: .76rem; color: var(--text-dim);
    display: flex; gap: 2rem; flex-wrap: wrap;
}
.viewer-info b { color: var(--purple-light); }

/* --- Footer --- */
.footer {
    text-align: center; padding: 1.5rem; font-size: .72rem;
    color: var(--text-muted); border-top: 1px solid var(--border);
    margin-top: 3rem;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .header { flex-direction: column; gap: .5rem; padding: .8rem 1rem; }
    h1 { font-size: 1.1rem; }
    .section { padding: 0 .8rem; }
    .control-panel { flex-direction: column; }
    .control-buttons { width: 100%; }
    .btn-primary, .btn-danger { flex: 1; justify-content: center; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid { grid-template-columns: 1fr; }
    .pipeline-flow { min-width: 500px; }
}