:root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-card: #141414;
    --bg-hover: #1a1a1a;
    --green: #00ff41;
    --green-dark: #00cc33;
    --green-glow: rgba(0,255,65,0.3);
    --red: #ff0040;
    --orange: #ff6600;
    --cyan: #00ccff;
    --purple: #9900ff;
    --yellow: #ffcc00;
    --text: #c0c0c0;
    --text-bright: #ffffff;
    --text-dim: #8a8a8a;
    --border: #222222;
    --border-hover: #333333;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --font-display: 'Orbitron', sans-serif;
    --radius: 8px;
    --transition: all 0.3s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
    font-family: var(--font-mono);
    background: var(--bg-primary);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: 
        radial-gradient(ellipse at 20% 50%, rgba(0,255,65,0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(0,204,255,0.02) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(255,0,64,0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* SCROLLBAR */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--green-dark); border-radius: 3px; }

/* NAV */
.main-nav {
    position: fixed; top: 0; left: 0; right: 0;
    background: rgba(10,10,10,0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    z-index: 1000;
    padding: 0 20px;
}
.nav-container {
    max-width: 1400px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    height: 65px;
}
.nav-logo {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; font-family: var(--font-display);
}
.logo-icon { font-size: 24px; color: var(--green); filter: drop-shadow(0 0 10px var(--green-glow)); }
.logo-text { font-size: 20px; font-weight: 900; color: var(--text-bright); letter-spacing: 2px; }
.logo-accent { color: var(--green); }
.nav-links { display: flex; align-items: center; gap: 5px; }
.nav-link {
    color: var(--text); text-decoration: none; padding: 8px 14px;
    border-radius: var(--radius); font-size: 13px; font-weight: 500;
    transition: var(--transition); display: flex; align-items: center; gap: 6px;
}
.nav-link:hover { color: var(--green); background: rgba(0,255,65,0.05); }
.nav-link i { font-size: 12px; }
.btn-register {
    background: linear-gradient(135deg, var(--green-dark), var(--green));
    color: #000 !important; font-weight: 700;
}
.btn-register:hover { filter: brightness(1.2); transform: translateY(-1px); }
.admin-link { color: var(--yellow) !important; }
.cart-badge {
    background: var(--red); color: #fff; font-size: 10px;
    padding: 1px 6px; border-radius: 10px; font-weight: 700;
}
.nav-toggle { display: none; color: var(--green); font-size: 24px; cursor: pointer; }

/* MAIN */
.main-content { margin-top: 65px; min-height: calc(100vh - 130px); position: relative; z-index: 1; }

/* HERO */
.hero {
    padding: 80px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(0,255,65,0.03) 0%, transparent 50%);
    pointer-events: none;
}
.hero-title {
    font-family: var(--font-display);
    font-size: 3.5rem; font-weight: 900;
    color: var(--text-bright);
    margin-bottom: 15px;
    text-shadow: 0 0 40px var(--green-glow);
}
.hero-title .accent { color: var(--green); }
.hero-subtitle {
    font-size: 1.1rem; color: var(--text-dim);
    max-width: 600px; margin: 0 auto 30px;
}
.hero-prompt {
    font-size: 14px; color: var(--green); opacity: 0.7;
    margin-bottom: 30px;
}
.hero-stats {
    display: flex; justify-content: center; gap: 40px;
    margin-top: 40px; flex-wrap: wrap;
}
.stat-item { text-align: center; }
.stat-value {
    font-family: var(--font-display);
    font-size: 2rem; font-weight: 900; color: var(--green);
}
.stat-label { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }

/* BUTTONS */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px; border: none; border-radius: var(--radius);
    font-family: var(--font-mono); font-size: 14px; font-weight: 700;
    cursor: pointer; transition: var(--transition); text-decoration: none;
    text-transform: uppercase; letter-spacing: 1px;
}
.btn-primary {
    background: linear-gradient(135deg, var(--green-dark), var(--green));
    color: #000;
}
.btn-primary:hover { filter: brightness(1.2); transform: translateY(-2px); box-shadow: 0 5px 20px var(--green-glow); }
.btn-secondary { background: var(--bg-card); color: var(--green); border: 1px solid var(--green); }
.btn-secondary:hover { background: rgba(0,255,65,0.1); }
.btn-danger { background: var(--red); color: #fff; }
.btn-sm { padding: 8px 16px; font-size: 12px; }

/* SECTIONS */
.section { padding: 60px 20px; max-width: 1400px; margin: 0 auto; }
.section-title {
    font-family: var(--font-display);
    font-size: 1.8rem; font-weight: 700;
    color: var(--text-bright); margin-bottom: 10px;
}
.section-title .accent { color: var(--green); }
.section-subtitle { color: var(--text-dim); margin-bottom: 40px; font-size: 14px; }

/* GRID */
.grid-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; align-items: stretch; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 20px; }

/* CARDS */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 25px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--green), transparent);
    opacity: 0;
    transition: var(--transition);
}
.card:hover {
    border-color: var(--border-hover);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.card:hover::before { opacity: 1; }

/* PRODUCT CARD */
.product-card { padding: 0; display: flex; flex-direction: column; height: 100%; }
.product-img {
    width: 100%; height: 140px;
    background: var(--bg-secondary);
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    position: relative;
}
.product-img .featured-badge {
    position: absolute; top: 10px; right: 10px;
    background: var(--red); color: #fff;
    padding: 3px 10px; border-radius: 3px;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
}
.product-body {  padding: 20px; flex: 1; display: flex; flex-direction: column; justify-content: space-between;  display: flex; flex-direction: column; flex: 1; }
.product-category {
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 1px; margin-bottom: 8px;
}
.product-name {
    font-size: 16px; font-weight: 700;
    color: var(--text-bright); margin-bottom: 8px;
}
.product-name a { color: inherit; text-decoration: none; }
.product-name a:hover { color: var(--green); }
.product-desc {
    font-size: 13px; color: var(--text-dim);
    margin-bottom: 15px;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    flex-shrink: 0;
}
.product-meta {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 15px; border-top: 1px solid var(--border);
    margin-top: auto;
}
.product-price { font-family: var(--font-display); font-size: 18px; font-weight: 900; color: var(--green); display: flex; align-items: baseline; gap: 8px; flex-wrap: nowrap; min-height: 28px; align-items: center; }
.product-price .price-old, .product-price .old-price { font-size: 12px; color: var(--text-dim); text-decoration: line-through; font-family: var(--font-mono); font-weight: 400; white-space: nowrap; }
.product-price .price-current { font-size: inherit; font-weight: inherit; color: inherit; white-space: nowrap; }

/* CATEGORY CARD */
.cat-card {
    display: flex; align-items: center; gap: 20px;
    padding: 20px; text-decoration: none; color: inherit;
}
.cat-icon { font-size: 32px; width: 60px; text-align: center; }
.cat-info h3 { font-size: 15px; color: var(--text-bright); margin-bottom: 4px; }
.cat-info p { font-size: 12px; color: var(--text-dim); }
.cat-count {
    margin-left: auto;
    font-family: var(--font-display); font-size: 18px; font-weight: 700;
    color: var(--text-dim);
}

/* FORMS */
.form-group { margin-bottom: 20px; }
.form-group label {
    display: block; font-size: 12px; font-weight: 700;
    color: var(--text); margin-bottom: 8px;
    text-transform: uppercase; letter-spacing: 1px;
}
.form-control {
    width: 100%; padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-bright);
    font-family: var(--font-mono); font-size: 14px;
    transition: var(--transition);
}
.form-control:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px var(--green-glow);
}
textarea.form-control { min-height: 120px; resize: vertical; }
select.form-control { cursor: pointer; }

/* AUTH PAGES */
.auth-container {
    max-width: 440px; margin: 60px auto;
    padding: 0 20px;
}
.auth-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 40px;
}
.auth-box h1 {
    font-family: var(--font-display);
    font-size: 1.5rem; color: var(--text-bright);
    margin-bottom: 8px; text-align: center;
}
.auth-box .subtitle {
    text-align: center; color: var(--text-dim);
    font-size: 13px; margin-bottom: 30px;
}
.auth-footer {
    text-align: center; margin-top: 20px;
    font-size: 13px; color: var(--text-dim);
}
.auth-footer a { color: var(--green); text-decoration: none; }

/* TABLE */
.table-container { overflow-x: auto; }
table {
    width: 100%; border-collapse: collapse;
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
}
th {
    background: var(--bg-secondary);
    padding: 12px 16px; text-align: left;
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 1px; color: var(--text-dim);
    border-bottom: 1px solid var(--border);
}
td {
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    font-size: 13px;
}
tr:hover td { background: var(--bg-hover); }

/* ADMIN */
.admin-layout { display: flex; min-height: calc(100vh - 65px); }
.admin-sidebar {
    width: 250px; background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    padding: 20px 0; flex-shrink: 0;
}
.admin-sidebar a {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px; color: var(--text);
    text-decoration: none; font-size: 13px;
    transition: var(--transition);
}
.admin-sidebar a:hover, .admin-sidebar a.active {
    background: rgba(0,255,65,0.05);
    color: var(--green);
    border-right: 2px solid var(--green);
}
.admin-sidebar a i { width: 20px; text-align: center; }
.admin-content { flex: 1; padding: 30px; }
.admin-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 30px;
}
.admin-header h1 { font-family: var(--font-display); font-size: 1.5rem; color: var(--text-bright); }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 30px; }
.admin-stat-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
}
.admin-stat-card .value {
    font-family: var(--font-display);
    font-size: 2rem; font-weight: 900;
}
.admin-stat-card .label { font-size: 12px; color: var(--text-dim); text-transform: uppercase; }

/* PAGINATION */
.pagination { display: flex; justify-content: center; gap: 5px; margin-top: 40px; }
.pagination a, .pagination span {
    padding: 8px 14px; border-radius: var(--radius);
    font-size: 13px; text-decoration: none;
    border: 1px solid var(--border); color: var(--text);
    transition: var(--transition);
}
.pagination a:hover { border-color: var(--green); color: var(--green); }
.pagination .active { background: var(--green); color: #000; border-color: var(--green); font-weight: 700; }

/* SEARCH */
.search-bar {
    display: flex; gap: 10px; margin-bottom: 30px;
    max-width: 500px;
}
.search-bar input { flex: 1; }
.search-bar button { white-space: nowrap; }

/* FILTERS */
.filters {
    display: flex; gap: 10px; margin-bottom: 30px; flex-wrap: wrap;
}
.filter-btn {
    padding: 8px 16px; border-radius: 20px;
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text); font-family: var(--font-mono);
    font-size: 12px; cursor: pointer; transition: var(--transition);
    text-decoration: none;
}
.filter-btn:hover, .filter-btn.active {
    border-color: var(--green); color: var(--green);
    background: rgba(0,255,65,0.05);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .nav-links { display: none; position: absolute; top: 65px; left: 0; right: 0; background: var(--bg-primary); flex-direction: column; padding: 20px; border-bottom: 1px solid var(--border); }
    .nav-links.active { display: flex; }
    .nav-toggle { display: block; }
    .hero-title { font-size: 2rem; }
    .hero-stats { gap: 20px; }
    .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .admin-layout { flex-direction: column; }
    .admin-sidebar { width: 100%; }
}

/* ANIMATIONS */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn 0.5s ease; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.pulse { animation: pulse 2s infinite; }
@keyframes glitch {
    0% { text-shadow: 2px 0 var(--red), -2px 0 var(--cyan); }
    25% { text-shadow: -2px 0 var(--red), 2px 0 var(--cyan); }
    50% { text-shadow: 2px 2px var(--red), -2px -2px var(--cyan); }
    75% { text-shadow: -2px 2px var(--red), 2px -2px var(--cyan); }
    100% { text-shadow: 2px 0 var(--red), -2px 0 var(--cyan); }
}
.glitch:hover { animation: glitch 0.3s ease infinite; }

/* TERMINAL ENHANCED v3.0 */

.terminal-showcase { padding: 80px 20px; position: relative; overflow: hidden; }
.terminal-showcase::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-image: linear-gradient(rgba(0,255,65,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,65,0.03) 1px, transparent 1px);
    background-size: 50px 50px; animation: gridShift 20s linear infinite;
    pointer-events: none; z-index: 0;
}
@keyframes gridShift { 0%{transform:translate(0,0)} 100%{transform:translate(50px,50px)} }


.terminal-wrapper { max-width: 1000px; margin: 0 auto; position: relative; z-index: 1; }
.terminal-glow {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 90%; height: 90%;
    background: radial-gradient(ellipse, rgba(0,255,65,0.08) 0%, rgba(0,255,65,0.02) 40%, transparent 70%);
    pointer-events: none; z-index: 0; filter: blur(60px);
    animation: glowBreathe 4s ease-in-out infinite;
}
@keyframes glowBreathe {
    0%,100% { opacity: 0.6; transform: translate(-50%,-50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%,-50%) scale(1.05); }
}


.terminal-container {
    position: relative; z-index: 1; border: 1px solid rgba(0,255,65,0.25);
    border-radius: 14px; overflow: hidden; background: #0a0a0a;
    box-shadow: 0 0 0 1px rgba(0,255,65,0.08), 0 8px 32px rgba(0,0,0,0.5),
        0 2px 8px rgba(0,0,0,0.3), 0 0 120px rgba(0,255,65,0.04);
    transition: all 0.5s cubic-bezier(0.4,0,0.2,1);
    animation: termAppear 0.8s ease-out;
}
@keyframes termAppear { from{opacity:0;transform:translateY(30px) scale(0.98)} to{opacity:1;transform:translateY(0) scale(1)} }
.terminal-container:hover {
    border-color: rgba(0,255,65,0.4);
    box-shadow: 0 0 0 1px rgba(0,255,65,0.15), 0 8px 32px rgba(0,0,0,0.5),
        0 0 150px rgba(0,255,65,0.07), inset 0 0 100px rgba(0,255,65,0.015);
    transform: translateY(-2px);
}
.terminal-container::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
    pointer-events: none; z-index: 10; border-radius: 14px;
}


.terminal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px;
    background: linear-gradient(180deg, #1e1e1e 0%, #161616 100%);
    border-bottom: 1px solid rgba(0,255,65,0.12); user-select: none;
    position: relative;
}
.terminal-header::after {
    content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,255,65,0.2), transparent);
}
.terminal-buttons { display: flex; gap: 8px; align-items: center; }
.terminal-btn {
    width: 13px; height: 13px; border-radius: 50%; display: inline-block;
    transition: all 0.25s ease; cursor: pointer;
}
.btn-close { background: #ff5f57; box-shadow: 0 0 6px rgba(255,95,87,0.4); }
.btn-close:hover { background: #ff3b30; box-shadow: 0 0 12px rgba(255,59,48,0.5); }
.btn-minimize { background: #ffbd2e; box-shadow: 0 0 6px rgba(255,189,46,0.4); }
.btn-minimize:hover { background: #ff9500; box-shadow: 0 0 12px rgba(255,149,0,0.5); }
.btn-maximize { background: #28c840; box-shadow: 0 0 6px rgba(40,200,64,0.4); }
.btn-maximize:hover { background: #34c759; box-shadow: 0 0 12px rgba(52,199,89,0.5); }


.terminal-title {
    display: flex; align-items: center; gap: 8px; font-size: 12px;
    color: rgba(255,255,255,0.5); font-family: var(--font-mono);
    letter-spacing: 1px; text-transform: uppercase;
}
.terminal-title i { color: var(--green); font-size: 11px; filter: drop-shadow(0 0 4px rgba(0,255,65,0.3)); }
.terminal-controls { display: flex; align-items: center; gap: 8px; }
.terminal-status-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--green);
    box-shadow: 0 0 8px var(--green-glow); animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
    0%,100% { opacity: 1; box-shadow: 0 0 8px var(--green-glow); }
    50% { opacity: 0.6; box-shadow: 0 0 4px var(--green-glow); }
}
.terminal-status-text {
    font-size: 11px; color: rgba(255,255,255,0.35); font-family: var(--font-mono);
    letter-spacing: 0.5px;
}


#zion-terminal {
    height: 520px; background: #0d0d0d; position: relative;
    font-family: var(--font-mono); font-size: 14px; line-height: 1.7;
}
#zion-terminal::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.4) 100%);
    pointer-events: none; z-index: 5;
}
#zion-terminal .term-output {
    padding: 16px 20px; overflow-y: auto; flex: 1; min-height: 0;
    scrollbar-width: thin; scrollbar-color: rgba(0,255,65,0.2) transparent;
}
#zion-terminal .term-output::-webkit-scrollbar { width: 6px; }
#zion-terminal .term-output::-webkit-scrollbar-track { background: transparent; }
#zion-terminal .term-output::-webkit-scrollbar-thumb { background: rgba(0,255,65,0.2); border-radius: 3px; }
#zion-terminal .term-output::-webkit-scrollbar-thumb:hover { background: rgba(0,255,65,0.35); }


#zion-terminal .term-input-line {
    display: flex; align-items: center; padding: 8px 20px 12px;
    border-top: 1px solid rgba(0,255,65,0.06); background: rgba(0,0,0,0.3);
}
#zion-terminal .term-prompt {
    color: var(--green); font-weight: bold; margin-right: 8px;
    white-space: nowrap; text-shadow: 0 0 8px rgba(0,255,65,0.3);
}
#zion-terminal .term-input {
    flex: 1; background: none; border: none; color: #e0e0e0;
    font-family: inherit; font-size: inherit; outline: none; caret-color: var(--green);
}
#zion-terminal .term-input::placeholder { color: rgba(255,255,255,0.15); font-style: italic; }


.zt-line { padding: 2px 0; animation: lineAppear 0.15s ease-out; }
@keyframes lineAppear { from{opacity:0;transform:translateX(-5px)} to{opacity:1;transform:translateX(0)} }
.zt-line pre { margin: 0; white-space: pre-wrap; font-family: inherit; }
.zt-processing {
    display: inline-flex; align-items: center; gap: 8px; color: rgba(0,255,65,0.7);
    animation: processingPulse 1.5s ease-in-out infinite;
}
@keyframes processingPulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.zt-processing .spinner {
    display: inline-block; width: 12px; height: 12px;
    border: 2px solid rgba(0,255,65,0.2); border-top-color: var(--green);
    border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }


.terminal-statusbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 18px;
    background: linear-gradient(180deg, #141414 0%, #111 100%);
    border-top: 1px solid rgba(0,255,65,0.08);
    font-size: 11px; color: rgba(255,255,255,0.3);
    font-family: var(--font-mono);
}
.statusbar-left, .statusbar-right { display: flex; align-items: center; gap: 16px; }
.status-item { display: flex; align-items: center; gap: 5px; transition: color 0.3s; }
.status-item:hover { color: rgba(0,255,65,0.6); }
.status-item i { font-size: 10px; color: rgba(0,255,65,0.4); }
.status-item .status-val { color: rgba(0,255,65,0.5); font-weight: 600; }


.terminal-hints {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    margin-top: 20px; padding: 0 20px;
}
.hint-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 20px;
    background: rgba(0,255,65,0.04); border: 1px solid rgba(0,255,65,0.12);
    color: rgba(255,255,255,0.5); font-size: 12px; font-family: var(--font-mono);
    cursor: pointer; transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    backdrop-filter: blur(4px);
}
.hint-chip:hover {
    background: rgba(0,255,65,0.1); border-color: rgba(0,255,65,0.3);
    color: var(--green); transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,255,65,0.1);
}
.hint-chip i { font-size: 11px; color: rgba(0,255,65,0.4); transition: color 0.3s; }
.hint-chip:hover i { color: var(--green); }


@media (max-width: 768px) {
    .terminal-wrapper { margin: 0 10px; }
    .terminal-container { border-radius: 10px; }
    #zion-terminal { height: 420px; font-size: 13px; }
    .terminal-header { padding: 10px 14px; }
    .terminal-title span { display: none; }
    .terminal-title i { font-size: 14px; }
    .terminal-controls .terminal-status-text { display: none; }
    .terminal-statusbar { padding: 6px 14px; font-size: 10px; }
    .statusbar-left .status-item:nth-child(n+3) { display: none; }
    .terminal-hints { gap: 6px; }
    .hint-chip { padding: 6px 12px; font-size: 11px; }
}
@media (max-width: 480px) {
    #zion-terminal { height: 350px; font-size: 12px; line-height: 1.5; }
    #zion-terminal .term-output { padding: 12px 14px; }
    #zion-terminal .term-input-line { padding: 6px 14px 10px; }
    .terminal-showcase { padding: 40px 10px; }
    .hint-chip:nth-child(n+5) { display: none; }
}


.terminal-container.fullscreen {
    position: fixed !important; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999; border-radius: 0; max-width: none;
    animation: goFullscreen 0.4s ease-out;
}
.terminal-container.fullscreen #zion-terminal { height: calc(100vh - 90px); }
@keyframes goFullscreen { from{border-radius:14px} to{border-radius:0} }
.terminal-container.fullscreen .terminal-container::after { border-radius: 0; }


@keyframes statusPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--green-glow); }
    50% { opacity: 0.5; box-shadow: 0 0 4px var(--green-glow); }
}

.terminal-status-text {
    font-size: 10px;
    color: var(--green);
    font-family: var(--font-mono);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Terminal Body */
#zion-terminal {
    height: 520px;
    background: #0d0d0d;
    position: relative;
}

/* Scanline overlay effect */
#zion-terminal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,255,65,0.008) 2px,
        rgba(0,255,65,0.008) 4px
    );
    pointer-events: none;
    z-index: 10;
}

/* CRT flicker effect (subtle) */
#zion-terminal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        rgba(0,255,65,0.02) 50%,
        rgba(0,0,0,0.04) 50%
    );
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 10;
    animation: crtFlicker 0.1s infinite;
    opacity: 0.3;
}

@keyframes crtFlicker {
    0% { opacity: 0.27; }
    5% { opacity: 0.34; }
    10% { opacity: 0.28; }
    15% { opacity: 0.32; }
    20% { opacity: 0.29; }
    100% { opacity: 0.3; }
}

/* Custom scrollbar for terminal output */
#zion-terminal .term-output::-webkit-scrollbar {
    width: 6px;
}
#zion-terminal .term-output::-webkit-scrollbar-track {
    background: #0a0a0a;
}
#zion-terminal .term-output::-webkit-scrollbar-thumb {
    background: rgba(0,255,65,0.2);
    border-radius: 3px;
}
#zion-terminal .term-output::-webkit-scrollbar-thumb:hover {
    background: rgba(0,255,65,0.4);
}

/* Terminal Status Bar */
.terminal-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px;
    background: linear-gradient(180deg, #111 0%, #0e0e0e 100%);
    border-top: 1px solid rgba(0,255,65,0.08);
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-dim);
    user-select: none;
}

.statusbar-left, .statusbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.5px;
}

.status-item i {
    font-size: 9px;
    color: var(--green-dark);
}

.typing-indicator {
    color: var(--green);
    font-weight: 600;
    letter-spacing: 1px;
}

.typing-indicator.busy {
    color: var(--orange);
    animation: typingBlink 0.6s ease-in-out infinite;
}

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

/* Quick Command Hints */
.terminal-hints {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.hint-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(0,255,65,0.04);
    border: 1px solid rgba(0,255,65,0.1);
    border-radius: 20px;
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.25s ease;
    user-select: none;
}

.hint-chip:hover {
    background: rgba(0,255,65,0.1);
    border-color: rgba(0,255,65,0.3);
    color: var(--green);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,255,65,0.1);
}

.hint-chip i {
    font-size: 10px;
    color: var(--green-dark);
}

/* ==================== TERMINAL RESPONSIVE ==================== */
@media (max-width: 768px) {
    .terminal-wrapper {
        margin: 0 -10px;
    }
    .terminal-container {
        border-radius: 8px;
    }
    #zion-terminal {
        height: 400px;
    }
    .terminal-header {
        padding: 8px 12px;
    }
    .terminal-title span {
        display: none;
    }
    .terminal-title i {
        font-size: 14px;
    }
    .terminal-controls .terminal-status-text {
        display: none;
    }
    .terminal-statusbar {
        padding: 5px 10px;
        font-size: 9px;
    }
    .statusbar-left .status-item:nth-child(n+3) {
        display: none;
    }
    .terminal-hints {
        gap: 6px;
    }
    .hint-chip {
        padding: 5px 10px;
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    #zion-terminal {
        height: 350px;
    }
    .terminal-buttons .btn-minimize,
    .terminal-buttons .btn-maximize {
        display: none;
    }
    .terminal-hints {
        display: none;
    }
}

/* ==================== TERMINAL ANIMATIONS ==================== */
/* Boot sequence text animation */
@keyframes terminalBoot {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.terminal-boot-line {
    animation: terminalBoot 0.15s ease forwards;
    opacity: 0;
}

/* Cursor blink */
@keyframes cursorBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.term-cursor {
    display: inline-block;
    width: 8px;
    height: 15px;
    background: var(--green);
    animation: cursorBlink 1s step-end infinite;
    vertical-align: text-bottom;
    margin-left: 2px;
    box-shadow: 0 0 6px var(--green-glow);
}

/* Input line glow */
.term-input-line {
    position: relative;
}

.term-input-line::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,255,65,0.15), transparent);
}

/* ==================== BREADCRUMB ==================== */
.breadcrumb {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--text-dim);
    margin-bottom: 30px; flex-wrap: wrap;
}
.breadcrumb a { color: var(--text-dim); text-decoration: none; transition: var(--transition); }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb i { font-size: 8px; color: var(--text-dim); opacity: 0.5; }
.breadcrumb span { color: var(--text-bright); }

/* ==================== PRODUCT DETAIL ==================== */
.product-detail {
    display: grid; grid-template-columns: 400px 1fr; gap: 40px;
    margin-bottom: 50px;
}
.product-detail-left { display: flex; flex-direction: column; gap: 20px; }
.product-img-large {
    width: 100%; aspect-ratio: 1; border-radius: var(--radius);
    background: var(--bg-card); border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 80px; position: relative; overflow: hidden;
}
.product-img-large::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at center, rgba(0,255,65,0.05) 0%, transparent 70%);
}
.product-meta-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.meta-item {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 12px 15px;
}
.meta-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); }
.meta-value { font-size: 14px; color: var(--text-bright); font-weight: 500; margin-top: 4px; }
.product-detail-right { display: flex; flex-direction: column; gap: 20px; }
.product-detail-title {
    font-family: var(--font-display); font-size: 2rem; font-weight: 900;
    color: var(--text-bright); line-height: 1.2;
}
.product-detail-price { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.price-current { font-family: var(--font-display); font-weight: 900; color: var(--green); }
.product-detail-right .price-current { font-size: 2.5rem; }
.price-old { font-size: 1.2rem; color: var(--text-dim); text-decoration: line-through; }
.save-badge {
    background: rgba(255,0,64,0.15); color: var(--red); padding: 4px 12px;
    border-radius: 4px; font-size: 12px; font-weight: 700;
}
.product-detail-desc {
    font-size: 15px; color: var(--text); line-height: 1.8;
    padding: 20px; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius);
}
.product-detail-desc h3 { color: var(--text-bright); margin-bottom: 10px; font-size: 16px; }
.product-detail-desc ul { padding-left: 20px; }
.product-detail-desc li { margin-bottom: 5px; }
.product-actions { display: flex; gap: 15px; flex-wrap: wrap; }
.product-footer {  display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 15px; border-top: 1px solid var(--border); min-height: 50px;  margin-top: auto; }

/* ==================== FORMS ENHANCED ==================== */
.form-input, .form-control {
    width: 100%; padding: 12px 16px;
    background: var(--bg-primary); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text-bright);
    font-family: var(--font-mono); font-size: 14px;
    transition: var(--transition);
}
.form-input:focus, .form-control:focus {
    outline: none; border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,255,65,0.1);
}
textarea.form-input, textarea.form-control { min-height: 120px; resize: vertical; }
.form-group { margin-bottom: 20px; }
.form-group label, .label {
    display: block; font-size: 12px; text-transform: uppercase;
    letter-spacing: 1px; color: var(--text-dim); margin-bottom: 8px; font-weight: 600;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
select.form-input, select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 35px;
}

/* ==================== CART PAGE ==================== */
.cart-container { max-width: 900px; margin: 0 auto; }
.cart-item {
    display: grid; grid-template-columns: 60px 1fr auto auto;
    gap: 20px; align-items: center;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px; margin-bottom: 15px;
    transition: var(--transition);
}
.cart-item:hover { border-color: var(--border-hover); }
.cart-item-icon {
    width: 60px; height: 60px; border-radius: var(--radius);
    background: var(--bg-hover); display: flex; align-items: center;
    justify-content: center; font-size: 24px;
}
.cart-item-info h3 { font-size: 16px; color: var(--text-bright); margin-bottom: 4px; }
.cart-item-info p { font-size: 13px; color: var(--text-dim); }
.cart-item-qty { display: flex; align-items: center; gap: 10px; }
.cart-item-qty button {
    width: 30px; height: 30px; border-radius: 4px;
    background: var(--bg-hover); border: 1px solid var(--border);
    color: var(--text-bright); cursor: pointer; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
}
.cart-item-qty button:hover { border-color: var(--green); color: var(--green); }
.cart-item-qty span { font-weight: 700; color: var(--text-bright); min-width: 20px; text-align: center; }
.cart-item-price { font-family: var(--font-display); font-weight: 700; color: var(--green); font-size: 18px; }
.cart-item-remove { color: var(--text-dim); cursor: pointer; transition: var(--transition); font-size: 18px; }
.cart-item-remove:hover { color: var(--red); }
.cart-summary {
    background: var(--bg-card); border: 2px solid var(--green-dark);
    border-radius: var(--radius); padding: 30px; margin-top: 30px;
}
.cart-summary h3 { color: var(--text-bright); margin-bottom: 20px; font-family: var(--font-display); }
.cart-summary-row {
    display: flex; justify-content: space-between; padding: 10px 0;
    border-bottom: 1px solid var(--border); font-size: 14px;
}
.cart-summary-row:last-child { border-bottom: none; }
.cart-summary-row.total { font-size: 20px; font-weight: 900; color: var(--green); border-top: 2px solid var(--border); padding-top: 15px; margin-top: 10px; }
.cart-empty { text-align: center; padding: 80px 20px; }
.cart-empty i { font-size: 60px; color: var(--text-dim); margin-bottom: 20px; display: block; }
.cart-empty h2 { color: var(--text-bright); margin-bottom: 10px; }
.cart-empty p { color: var(--text-dim); margin-bottom: 30px; }
/* ==================== CHECKOUT ==================== */
.checkout-container { max-width: 700px; margin: 0 auto; }
.checkout-steps {
    display: flex; justify-content: center; gap: 30px;
    margin-bottom: 40px;
}
.checkout-step {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--text-dim);
}
.checkout-step.active { color: var(--green); }
.checkout-step .step-num {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--bg-card); border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
}
.checkout-step.active .step-num {
    border-color: var(--green); background: rgba(0,255,65,0.1); color: var(--green);
}
.checkout-step.done .step-num {
    border-color: var(--green); background: var(--green); color: #000;
}
.checkout-section {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 30px; margin-bottom: 20px;
}
.checkout-section h3 {
    font-family: var(--font-display); font-size: 1rem;
    color: var(--text-bright); margin-bottom: 20px;
    padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.order-review-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.order-review-item:last-child { border-bottom: none; }
.order-total {
    display: flex; justify-content: space-between;
    font-size: 20px; font-weight: 900; color: var(--green);
    padding-top: 15px; margin-top: 10px;
    border-top: 2px solid var(--green-dark);
}
.payment-methods { display: flex; gap: 15px; margin-bottom: 20px; }
.payment-method {
    flex: 1; padding: 20px; text-align: center;
    background: var(--bg-primary); border: 2px solid var(--border);
    border-radius: var(--radius); cursor: pointer; transition: var(--transition);
}
.payment-method:hover, .payment-method.selected {
    border-color: var(--green); background: rgba(0,255,65,0.05);
}
.payment-method i { font-size: 24px; display: block; margin-bottom: 8px; color: var(--text-bright); }
.payment-method span { font-size: 12px; color: var(--text-dim); }

/* ==================== PROFILE ==================== */
.profile-container { max-width: 900px; margin: 0 auto; }
.profile-header {
    display: flex; align-items: center; gap: 25px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 30px; margin-bottom: 30px;
}
.profile-avatar {
    width: 80px; height: 80px; border-radius: 50%;
    background: linear-gradient(135deg, var(--green-dark), var(--cyan));
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; font-weight: 900; color: #000;
    font-family: var(--font-display); flex-shrink: 0;
}
.profile-info h1 { font-family: var(--font-display); font-size: 1.5rem; color: var(--text-bright); }
.profile-info p { color: var(--text-dim); font-size: 13px; margin-top: 4px; }
.profile-info .role-badge {
    display: inline-block; padding: 2px 10px; border-radius: 4px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    margin-top: 8px;
}
.role-badge.admin { background: rgba(255,0,64,0.15); color: var(--red); }
.role-badge.user { background: rgba(0,204,255,0.15); color: var(--cyan); }
.profile-tabs {
    display: flex; gap: 5px; margin-bottom: 30px;
    border-bottom: 1px solid var(--border); padding-bottom: 0;
}
.profile-tab {
    padding: 12px 20px; font-size: 13px; color: var(--text-dim);
    text-decoration: none; border-bottom: 2px solid transparent;
    transition: var(--transition); cursor: pointer;
    background: none; border-top: none; border-left: none; border-right: none;
    font-family: var(--font-mono);
}
.profile-tab:hover { color: var(--text-bright); }
.profile-tab.active { color: var(--green); border-bottom-color: var(--green); }
.profile-section { display: none; }
.profile-section.active { display: block; }
.orders-list { display: flex; flex-direction: column; gap: 15px; }
.order-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
    display: grid; grid-template-columns: 1fr auto auto;
    gap: 20px; align-items: center;
}
.order-card .order-id { font-weight: 700; color: var(--green); font-size: 14px; }
.order-card .order-date { font-size: 12px; color: var(--text-dim); }
.order-card .order-status {
    padding: 4px 12px; border-radius: 4px; font-size: 11px;
    font-weight: 700; text-transform: uppercase;
}
.order-status.completed { background: rgba(0,255,65,0.15); color: var(--green); }
.order-status.pending { background: rgba(255,204,0,0.15); color: var(--yellow); }
.order-status.cancelled { background: rgba(255,0,64,0.15); color: var(--red); }
.order-card .order-total { font-family: var(--font-display); font-weight: 700; color: var(--text-bright); }

/* ==================== DIFFICULTY BADGE ==================== */
.difficulty-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 10px; border: 1px solid; border-radius: 4px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}

/* ==================== FLASH MESSAGES ==================== */
.flash-message {
    padding: 15px 20px; border-radius: var(--radius);
    margin-bottom: 20px; font-size: 14px;
    display: flex; align-items: center; gap: 10px;
    animation: fadeIn 0.3s ease;
}
.flash-message.success { background: rgba(0,255,65,0.1); border: 1px solid var(--green-dark); color: var(--green); }
.flash-message.error { background: rgba(255,0,64,0.1); border: 1px solid var(--red); color: var(--red); }
.flash-message.warning { background: rgba(255,204,0,0.1); border: 1px solid var(--yellow); color: var(--yellow); }
.flash-message.info { background: rgba(0,204,255,0.1); border: 1px solid var(--cyan); color: var(--cyan); }

/* ==================== SECTION HEADERS ==================== */
.section-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 30px;
}
.section-header h2 {
    font-family: var(--font-display); font-size: 1.5rem;
    color: var(--text-bright);
}
.section-header .view-all {
    color: var(--green); text-decoration: none; font-size: 13px;
    display: flex; align-items: center; gap: 5px;
}
.section-header .view-all:hover { text-decoration: underline; }

/* ==================== EMPTY STATE ==================== */
.empty-state {
    text-align: center; padding: 60px 20px;
    color: var(--text-dim);
}
.empty-state i { font-size: 48px; margin-bottom: 15px; display: block; opacity: 0.5; }
.empty-state h3 { color: var(--text-bright); margin-bottom: 8px; }
.empty-state p { margin-bottom: 20px; }

/* ==================== RELATED PRODUCTS ==================== */
.related-products { margin-top: 50px; }
.related-products h2 {
    font-family: var(--font-display); font-size: 1.3rem;
    color: var(--text-bright); margin-bottom: 25px;
}

/* ==================== TAGS ==================== */
.tag {
    display: inline-block; padding: 3px 10px;
    background: var(--bg-hover); border: 1px solid var(--border);
    border-radius: 4px; font-size: 11px; color: var(--text-dim);
    margin: 2px;
}
.tag:hover { border-color: var(--green); color: var(--green); }
.tags-list { display: flex; flex-wrap: wrap; gap: 5px; }

/* ==================== LOADING ==================== */
.loading-spinner {
    display: inline-block; width: 20px; height: 20px;
    border: 2px solid var(--border); border-top-color: var(--green);
    border-radius: 50%; animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==================== TOOLTIP ==================== */
.tooltip { position: relative; }
.tooltip::after {
    content: attr(data-tooltip); position: absolute;
    bottom: 100%; left: 50%; transform: translateX(-50%);
    background: var(--bg-card); border: 1px solid var(--border);
    padding: 5px 10px; border-radius: 4px; font-size: 11px;
    color: var(--text-bright); white-space: nowrap;
    opacity: 0; pointer-events: none; transition: var(--transition);
}
.tooltip:hover::after { opacity: 1; }

/* ==================== RESPONSIVE ADDITIONS ==================== */
@media (max-width: 768px) {
    .product-detail { grid-template-columns: 1fr; gap: 20px; }
    .product-img-large { max-width: 300px; margin: 0 auto; }
    .product-meta-grid { grid-template-columns: 1fr; }
    .cart-item { grid-template-columns: 1fr; text-align: center; gap: 10px; }
    .cart-item-qty { justify-content: center; }
    .checkout-steps { flex-direction: column; align-items: center; }
    .profile-header { flex-direction: column; text-align: center; }
    .profile-tabs { overflow-x: auto; }
    .order-card { grid-template-columns: 1fr; gap: 10px; }
    .form-row { grid-template-columns: 1fr; }
    .payment-methods { flex-direction: column; }
    .breadcrumb { font-size: 12px; }
    .price-current { font-size: 1.8rem; }
}
@media (max-width: 480px) {
    .product-detail-title { font-size: 1.5rem; }
    .product-actions { flex-direction: column; }
    .product-actions .btn { width: 100%; text-align: center; }
}

/* Product SVG Images */
.product-img img {
    max-width: 80px;
    max-height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(0, 255, 65, 0.3));
}
.product-img-large img {
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(0, 255, 65, 0.4));
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER STYLES
   ═══════════════════════════════════════════════════════════════ */
.main-footer {
    background: linear-gradient(180deg, var(--darker) 0%, #000 100%);
    border-top: 1px solid var(--green-dim);
    padding: 60px 0 0;
    margin-top: 80px;
    position: relative;
}
.main-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--green), transparent);
}
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
}
.footer-col h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--text);
}
.footer-col h4 {
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--green);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 255, 65, 0.15);
}
.footer-col p {
    color: var(--text-dim);
    line-height: 1.8;
    font-size: 0.9rem;
}
.footer-col a {
    display: block;
    color: var(--text-dim);
    text-decoration: none;
    padding: 6px 0;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}
.footer-col a:hover {
    color: var(--green);
    padding-left: 8px;
}
.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-dim);
    font-size: 18px;
    transition: all 0.3s ease;
    padding: 0;
}
.footer-social a:hover {
    color: var(--green);
    border-color: var(--green);
    background: rgba(0, 255, 65, 0.05);
    padding-left: 0;
    transform: translateY(-2px);
}
.footer-bottom {
    border-top: 1px solid var(--border);
    padding: 25px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}
.footer-bottom p {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin: 0;
}
.footer-glitch {
    font-family: 'Orbitron', monospace;
    color: var(--green-dim);
    font-size: 0.8rem;
    letter-spacing: 3px;
    opacity: 0.5;
}

/* Footer Responsive */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}
@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .main-footer {
        padding: 40px 0 0;
        margin-top: 40px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER (class="footer") — UNIFIED STYLES
   ═══════════════════════════════════════════════════════════════ */
.footer {
    background: linear-gradient(180deg, var(--darker) 0%, #000 100%);
    border-top: 1px solid var(--green-dim);
    padding: 60px 0 0;
    margin-top: 80px;
    position: relative;
}
.footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--green), transparent);
}
.footer .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
}
.footer .footer-col h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--text);
}
.footer .footer-col h4 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--green);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 255, 65, 0.15);
}
.footer .footer-link {
    display: block;
    color: var(--text-dim);
    text-decoration: none;
    padding: 5px 0;
    font-size: 0.9rem;
    transition: var(--transition);
}
.footer .footer-link:hover {
    color: var(--green);
    padding-left: 5px;
}
.footer .footer-bottom {
    border-top: 1px solid var(--border);
    padding: 25px 0;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.85rem;
}
@media (max-width: 768px) {
    .footer .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PRICE ALIGNMENT FIX — Consistent height for all product cards
   ═══════════════════════════════════════════════════════════════ */
.product-price {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    min-height: 28px;
}
.price-old {
    font-size: 13px;
    color: var(--text-dim);
    text-decoration: line-through;
    order: 1;
}
.price-current {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 900;
    color: var(--green);
    order: 2;
}
.product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid var(--border);
    min-height: 50px;
}

/* ═══ ZION INTERACTIVE TERMINAL ═══ */
.zt-wrap{background:#0a0a0f;border:1px solid var(--border);border-radius:8px;overflow:hidden;font-family:var(--font-mono);font-size:14px;max-width:900px;margin:0 auto;box-shadow:0 0 30px rgba(0,255,65,.08)}
.zt-bar{background:#1a1a2e;padding:8px 14px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border)}
.zt-dot{width:12px;height:12px;border-radius:50%;display:inline-block}
.zt-r{background:#ff5f56}.zt-y{background:#ffbd2e}.zt-g{background:#27c93f}
.zt-title{color:var(--text-dim);font-size:12px;margin-left:8px;flex:1}
.zt-badge{background:var(--green);color:#000;font-size:10px;font-weight:700;padding:2px 8px;border-radius:3px;text-transform:uppercase;letter-spacing:1px}
.zt-body{padding:16px;max-height:420px;overflow-y:auto;line-height:1.7;color:var(--text)}
.zt-body::-webkit-scrollbar{width:6px}.zt-body::-webkit-scrollbar-track{background:#0a0a0f}.zt-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.zt-line{white-space:pre-wrap;word-break:break-all;margin:1px 0}
.zt-input-row{display:flex;align-items:center;padding:8px 16px 12px;border-top:1px solid rgba(255,255,255,.05);background:#0d0d14}
.zt-prompt{color:var(--green);white-space:nowrap;font-size:14px}
.zt-in{background:transparent;border:none;color:var(--text-bright);font-family:var(--font-mono);font-size:14px;flex:1;outline:none;caret-color:var(--green);margin-left:4px}
.zt-in::placeholder{color:rgba(255,255,255,.2)}
.t-green{color:var(--green)}.t-red{color:var(--red)}.t-yellow{color:#ffbd2e}.t-blue{color:#5eead4}.t-dim{color:var(--text-dim)}.t-cmd{color:var(--green);font-weight:700}
.zt-typing{display:inline-block;animation:zt-blink 1s step-end infinite}
@keyframes zt-blink{50%{opacity:0}}


/* ============================================ */
/* TERMINAL RESPONSIVE - CONSOLIDATED           */
/* ============================================ */
@media (max-width: 1024px) {
    .terminal-showcase { padding: 60px 15px; }
    .terminal-wrapper { max-width: 100%; }
}
@media (max-width: 768px) {
    .terminal-showcase { padding: 40px 10px; }
    .terminal-wrapper { margin: 0 5px; border-radius: 10px; }
    .terminal-header { padding: 8px 12px; }
    .terminal-controls { display: none; }
    #zion-terminal { height: 350px; font-size: 12px; }
    .zt-statusbar { font-size: 10px; padding: 4px 8px; }
    .zt-in { font-size: 13px; }
    .hint-chip { font-size: 10px; padding: 3px 8px; }
    .hint-chip:nth-child(n+5) { display: none; }
    .section-title { font-size: 1.5rem; }
}
@media (max-width: 480px) {
    .terminal-showcase { padding: 20px 5px; }
    .terminal-wrapper { border-radius: 0; border-left: none; border-right: none; }
    .terminal-header { border-radius: 0; }
    #zion-terminal { height: 300px; font-size: 11px; }
    .terminal-title span { display: none; }
    .hint-chip:nth-child(n+3) { display: none; }
    .zt-body { max-height: 260px; }
}

/* ============================================================
   TERMINAL VISUAL ENHANCEMENT — ZION ELITE v2.0
   ============================================================ */

/* --- CRT Scanlines Overlay --- */
.terminal-container::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.08) 2px,
        rgba(0, 0, 0, 0.08) 4px
    );
    pointer-events: none;
    z-index: 10;
    border-radius: inherit;
}

/* --- Phosphor Glow on Terminal Text --- */
#zion-terminal .term-output {
    text-shadow: 0 0 2px rgba(0, 255, 65, 0.4),
                 0 0 8px rgba(0, 255, 65, 0.1);
}

/* --- Ambient Glow Around Terminal --- */
.terminal-container {
    box-shadow: 
        0 0 30px rgba(0, 255, 65, 0.08),
        0 0 60px rgba(0, 255, 65, 0.04),
        0 8px 32px rgba(0, 0, 0, 0.5),
        inset 0 0 80px rgba(0, 0, 0, 0.3);
}

.terminal-container:hover {
    box-shadow: 
        0 0 40px rgba(0, 255, 65, 0.12),
        0 0 80px rgba(0, 255, 65, 0.06),
        0 12px 40px rgba(0, 0, 0, 0.6),
        inset 0 0 80px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.5s ease;
}

/* --- Enhanced Terminal Header --- */
.terminal-header {
    background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%) !important;
    border-bottom: 1px solid rgba(0, 255, 65, 0.15) !important;
    position: relative;
}

.terminal-header::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(0, 255, 65, 0.4), 
        rgba(0, 255, 65, 0.6), 
        rgba(0, 255, 65, 0.4), 
        transparent);
}

/* --- Window Control Buttons Enhancement --- */
.terminal-btn {
    width: 13px !important;
    height: 13px !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
    position: relative;
}

.terminal-btn:hover {
    transform: scale(1.2);
    filter: brightness(1.3);
}

.btn-close {
    background: #ff5f57 !important;
    box-shadow: 0 0 6px rgba(255, 95, 87, 0.4);
}

.btn-minimize {
    background: #ffbd2e !important;
    box-shadow: 0 0 6px rgba(255, 189, 46, 0.4);
}

.btn-maximize {
    background: #28c840 !important;
    box-shadow: 0 0 6px rgba(40, 200, 64, 0.4);
}

/* --- Terminal Title Enhancement --- */
.terminal-title {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    color: rgba(0, 255, 65, 0.7) !important;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* --- Status Dot Pulse Animation --- */
.terminal-status-dot {
    animation: statusPulse 2s ease-in-out infinite !important;
}

@keyframes statusPulse {
    0%, 100% { 
        box-shadow: 0 0 4px rgba(0, 255, 65, 0.6);
        opacity: 1;
    }
    50% { 
        box-shadow: 0 0 12px rgba(0, 255, 65, 0.9), 0 0 20px rgba(0, 255, 65, 0.3);
        opacity: 0.8;
    }
}

/* --- Enhanced Prompt Styling --- */
#zion-terminal .term-prompt,
.zt-prompt {
    color: #00ff41 !important;
    text-shadow: 0 0 6px rgba(0, 255, 65, 0.5);
    font-weight: 700 !important;
}

/* --- Input Field Glow on Focus --- */
#zion-terminal .term-input:focus,
.zt-input:focus {
    text-shadow: 0 0 4px rgba(0, 255, 65, 0.3);
    caret-color: #00ff41;
}

/* --- Blinking Cursor Enhancement --- */
@keyframes cursorBlink {
    0%, 49% { border-right-color: #00ff41; }
    50%, 100% { border-right-color: transparent; }
}

#zion-terminal .term-input {
    border-right: 2px solid #00ff41;
    animation: cursorBlink 1s step-end infinite;
}

#zion-terminal .term-input:focus {
    border-right-color: transparent;
    animation: none;
}

/* --- Status Bar Enhancement --- */
.terminal-statusbar {
    background: linear-gradient(180deg, #0a0a14 0%, #0d0d18 100%) !important;
    border-top: 1px solid rgba(0, 255, 65, 0.1) !important;
    font-size: 11px !important;
}

.terminal-statusbar .status-item {
    color: rgba(0, 255, 65, 0.5) !important;
    transition: color 0.3s ease;
}

.terminal-statusbar .status-item:hover {
    color: rgba(0, 255, 65, 0.9) !important;
}

.terminal-statusbar .status-item i {
    color: rgba(0, 255, 65, 0.4);
    margin-right: 4px;
}

/* --- Hint Chips Enhancement --- */
.terminal-hints .hint-chip {
    background: rgba(0, 255, 65, 0.05) !important;
    border: 1px solid rgba(0, 255, 65, 0.15) !important;
    color: rgba(0, 255, 65, 0.6) !important;
    backdrop-filter: blur(4px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    padding: 6px 14px;
    border-radius: 20px;
}

.terminal-hints .hint-chip:hover {
    background: rgba(0, 255, 65, 0.12) !important;
    border-color: rgba(0, 255, 65, 0.4) !important;
    color: #00ff41 !important;
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.15);
    transform: translateY(-2px);
}

.terminal-hints .hint-chip i {
    color: rgba(0, 255, 65, 0.4);
    transition: color 0.3s ease;
}

.terminal-hints .hint-chip:hover i {
    color: #00ff41;
}

/* --- Section Title Enhancement --- */
.terminal-showcase .section-title {
    text-shadow: 0 0 20px rgba(0, 255, 65, 0.3),
                 0 0 40px rgba(0, 255, 65, 0.1);
}

/* --- Subtle Screen Flicker (very subtle) --- */
@keyframes subtleFlicker {
    0% { opacity: 1; }
    92% { opacity: 1; }
    93% { opacity: 0.97; }
    94% { opacity: 1; }
    96% { opacity: 0.98; }
    97% { opacity: 1; }
    100% { opacity: 1; }
}

.terminal-container {
    animation: subtleFlicker 8s infinite;
}

/* --- Output Line Fade-In --- */
#zion-terminal .term-output > div {
    animation: lineAppear 0.15s ease-out;
}

@keyframes lineAppear {
    from { 
        opacity: 0; 
        transform: translateX(-4px); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

/* --- Fullscreen Mode Enhancement --- */
.terminal-container.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.terminal-container.fullscreen .terminal-header {
    border-radius: 0 !important;
}

.terminal-container.fullscreen::after {
    border-radius: 0;
}

/* --- Scrollbar Enhancement (Firefox) --- */
#zion-terminal .term-output {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 255, 65, 0.2) transparent;
}

/* --- Loading Spinner for Server Commands --- */
@keyframes termSpin {
    to { transform: rotate(360deg); }
}

.term-loading::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(0, 255, 65, 0.2);
    border-top-color: #00ff41;
    border-radius: 50%;
    animation: termSpin 0.8s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

/* ============================================================
   TERMINAL SECTION HEADER — ELITE ENHANCEMENTS
   ============================================================ */
.terminal-section-header {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
}
.terminal-badge {
    display: inline-block;
    background: rgba(0,255,65,0.1);
    border: 1px solid rgba(0,255,65,0.3);
    color: #00ff41;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 3px;
    padding: 4px 16px;
    border-radius: 20px;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    animation: pulse 2s infinite;
}
.terminal-badge i {
    margin-right: 6px;
    font-size: 0.65rem;
}
.terminal-live-badge {
    display: inline-block;
    background: rgba(0,255,65,0.15);
    color: #00ff41;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 8px;
    margin-left: 8px;
    letter-spacing: 1px;
    animation: pulse 2s infinite;
}

/* Spinner for processing commands */
@keyframes zt-spin {
    to { transform: rotate(360deg); }
}
.zt-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0,255,65,0.2);
    border-top-color: #00ff41;
    border-radius: 50%;
    animation: zt-spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

/* Processing line animation */
.zt-processing-line {
    color: rgba(0,255,65,0.7);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
.zt-processing-line .dots::after {
    content: '';
    animation: zt-dots 1.5s steps(4, end) infinite;
}
@keyframes zt-dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: ''; }
}

/* Enhanced hint chips hover */
.hint-chip {
    transition: all 0.2s ease;
    cursor: pointer;
    user-select: none;
}
.hint-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,255,65,0.3);
    border-color: #00ff41;
    color: #00ff41;
    background: rgba(0,255,65,0.15);
}
.hint-chip:active {
    transform: translateY(0);
}
.hint-chip i {
    margin-right: 4px;
    font-size: 0.75em;
    opacity: 0.7;
}

/* Terminal container enhanced shadow */
.terminal-container {
    box-shadow: 
        0 0 0 1px rgba(0,255,65,0.1),
        0 8px 32px rgba(0,0,0,0.5),
        0 0 60px rgba(0,255,65,0.05),
        inset 0 1px 0 rgba(255,255,255,0.03);
}

/* Glow effect behind terminal */
.terminal-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(ellipse, rgba(0,255,65,0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
    filter: blur(40px);
}

/* Terminal wrapper needs relative positioning */
.terminal-wrapper {
    position: relative;
}

/* Statusbar polish */
.terminal-statusbar {
    border-top: 1px solid rgba(0,255,65,0.1);
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
}

/* Section subtitle code tag */
.section-subtitle code {
    background: rgba(0,255,65,0.1);
    color: #00ff41;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9em;
    border: 1px solid rgba(0,255,65,0.2);
}

/* ============================================
   TERMINAL FIX — DEFINITIVE OVERRIDE (2026-04-26)
   Ensures input visibility and proper layout
   ============================================ */
#zion-terminal {
    position: relative;
}
#zion-terminal::before {
    pointer-events: none !important;
    z-index: 1 !important;
}
#zion-terminal .term-output,
#zion-terminal #zt-output {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    position: relative;
    z-index: 2;
}
#zion-terminal .term-input-line,
#zion-terminal .terminal-input-line {
    display: flex !important;
    align-items: center !important;
    padding: 8px 16px 12px !important;
    background: rgba(0,0,0,0.3);
    border-top: 1px solid rgba(0,255,65,0.15);
    flex-shrink: 0 !important;
    position: relative;
    z-index: 10 !important;
}
#zion-terminal .term-input,
#zion-terminal #zt-input,
#zion-terminal .zt-input {
    flex: 1 !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    color: #e0e0e0 !important;
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    font-size: 14px !important;
    caret-color: #00ff41 !important;
    padding: 4px 0 !important;
    -webkit-appearance: none;
    appearance: none;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: 50px !important;
    height: auto !important;
}
#zion-terminal .term-input::placeholder,
#zion-terminal #zt-input::placeholder {
    color: rgba(255,255,255,0.2) !important;
    font-style: italic;
}
#zion-terminal .term-input:focus,
#zion-terminal #zt-input:focus {
    outline: none !important;
    box-shadow: none !important;
}
#zion-terminal .term-prompt,
#zion-terminal .terminal-prompt {
    color: #00ff41;
    white-space: nowrap;
    margin-right: 8px;
    flex-shrink: 0;
    font-size: 14px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.hint-chips {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 20px;
}
.hint-chip {
    cursor: pointer !important;
    pointer-events: auto !important;
    user-select: none;
    transition: all 0.2s ease;
}
.hint-chip:hover {
    transform: translateY(-1px);
    filter: brightness(1.3);
}

/* ═══ ZION TERMINAL OVERRIDE — FINAL AUTHORITY ═══ */
#zion-terminal {
    height: 520px !important;
    position: relative !important;
}
#zion-terminal::before {
    pointer-events: none !important;
    z-index: 1 !important;
}
#zion-terminal .term-output {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 16px 20px !important;
    display: block !important;
}
#zion-terminal .term-input-line {
    display: flex !important;
    align-items: center !important;
    padding: 8px 16px 12px !important;
    border-top: 1px solid rgba(0,255,65,0.15) !important;
    background: rgba(0,0,0,0.3) !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 10 !important;
}
#zion-terminal .term-prompt {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin-right: 10px !important;
    white-space: nowrap !important;
    color: #00ff41 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}
#zion-terminal .term-input {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #00ff41 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 14px !important;
    caret-color: #00ff41 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 20px !important;
    width: auto !important;
    position: relative !important;
    z-index: 11 !important;
}
#zion-terminal .term-input::placeholder {
    color: rgba(0,255,65,0.3) !important;
}
#zion-terminal .term-input:focus {
    outline: none !important;
    box-shadow: none !important;
}
.hint-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.hint-chip {
    cursor: pointer !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* ═══ END OVERRIDE ═══ */

/* === TERMINAL FIX DEFINITIVO — iteracion 38 === */
#zion-terminal {
    display: flex !important;
    flex-direction: column !important;
    height: 520px !important;
    background: #0a0a0f !important;
    position: relative !important;
    font-family: var(--font-mono) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    overflow: hidden !important;
}
#zion-terminal::before {
    pointer-events: none !important;
    z-index: 1 !important;
}
#zion-terminal .term-output,
#zion-terminal #zt-output {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 16px 20px !important;
    position: relative !important;
    z-index: 2 !important;
}
#zion-terminal .term-input-line {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    padding: 10px 20px 12px !important;
    border-top: 1px solid rgba(0,255,65,0.15) !important;
    background: rgba(0,0,0,0.5) !important;
    position: relative !important;
    z-index: 10 !important;
}
#zion-terminal .term-prompt {
    color: var(--green) !important;
    font-weight: bold !important;
    margin-right: 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
#zion-terminal .term-input,
#zion-terminal #zt-input {
    flex: 1 1 auto !important;
    background: none !important;
    border: none !important;
    color: #e0e0e0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    outline: none !important;
    caret-color: var(--green) !important;
    min-width: 0 !important;
    padding: 4px 0 !important;
}
#zion-terminal .term-input:focus,
#zion-terminal #zt-input:focus {
    outline: none !important;
    box-shadow: none !important;
}
.terminal-hints {
    position: relative !important;
    z-index: 10 !important;
}
.hint-chip {
    cursor: pointer !important;
    pointer-events: auto !important;
}
/* === FIN TERMINAL FIX === */
html,body{overflow-anchor:none!important}

/* ═══ DROPDOWN NAVIGATION ═══ */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { cursor: pointer; }
.nav-dropdown-menu {
    display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: rgba(15,15,20,0.98); backdrop-filter: blur(20px);
    border: 1px solid var(--border); border-radius: 12px;
    min-width: 240px; padding: 8px; z-index: 1001;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 30px rgba(0,255,65,0.05);
}
.nav-dropdown-menu::before {
    content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 12px; height: 12px; background: rgba(15,15,20,0.98);
    border-left: 1px solid var(--border); border-top: 1px solid var(--border);
}
.dropdown-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    color: var(--text); text-decoration: none; border-radius: 8px;
    font-size: 13px; transition: var(--transition); position: relative;
}
.dropdown-item:hover { background: rgba(0,255,65,0.08); color: var(--green); }
.dropdown-item i { width: 18px; text-align: center; font-size: 13px; color: var(--green); opacity: 0.7; }
.dropdown-item:hover i { opacity: 1; }
.dropdown-desc {
    display: block; font-size: 11px; color: var(--text-dim); margin-left: auto; font-weight: 400;
}
.dropdown-divider { height: 1px; background: var(--border); margin: 6px 8px; }
.admin-item { color: var(--yellow) !important; }
.admin-item i { color: var(--yellow) !important; }
.nav-separator { width: 1px; height: 24px; background: var(--border); margin: 0 8px; }
.nav-dropdown.open > .nav-dropdown-toggle { color: var(--green); background: rgba(0,255,65,0.05); }

/* Dropdown responsive */
@media (max-width: 768px) {
    .nav-dropdown-menu {
        position: static; transform: none; background: rgba(0,255,65,0.03);
        border: none; box-shadow: none; margin: 4px 0 4px 20px; min-width: auto;
        border-left: 2px solid var(--green-dark); border-radius: 0 8px 8px 0;
    }
    .nav-dropdown-menu::before { display: none; }
    .nav-separator { width: 100%; height: 1px; margin: 8px 0; }
    .dropdown-desc { display: none; }
}

/* ═══ SECTION VARIANTS ═══ */
.section-alt { background: rgba(0,255,65,0.015); border-top: 1px solid rgba(0,255,65,0.05); border-bottom: 1px solid rgba(0,255,65,0.05); }

/* ═══ CTA SECTION ═══ */
.cta-section {
    text-align: center; padding: 80px 20px;
    background: linear-gradient(180deg, transparent, rgba(0,255,65,0.03), transparent);
    border-top: 1px solid var(--border);
}
.cta-title { font-family: var(--font-display); font-size: 2rem; color: var(--text-bright); margin-bottom: 16px; }
.cta-text { color: var(--text-dim); font-size: 1.1rem; margin-bottom: 30px; max-width: 600px; margin-left: auto; margin-right: auto; }

/* ═══ HERO ENHANCEMENTS ═══ */
.hero-actions { display: flex; gap: 16px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.btn-lg { padding: 14px 32px; font-size: 15px; font-weight: 700; }
.hero-stats {
    display: flex; justify-content: center; gap: 50px; margin-top: 50px;
    padding-top: 30px; border-top: 1px solid rgba(0,255,65,0.1);
}
.stat-item { text-align: center; }
.stat-value {
    font-family: var(--font-display); font-size: 2.2rem; font-weight: 900;
    color: var(--green); text-shadow: 0 0 20px var(--green-glow);
}
.stat-label { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 2px; margin-top: 4px; }

/* ═══ SECTION CTAs ═══ */
.section-cta { text-align: center; margin-top: 40px; }

/* ═══ TERMINAL SHOWCASE ═══ */
.terminal-showcase { padding: 60px 20px; }
.terminal-section-header { text-align: center; margin-bottom: 30px; }
.terminal-wrapper { max-width: 900px; margin: 0 auto; }

/* ═══ PRODUCT CARD ENHANCEMENTS ═══ */
.card-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: 1px solid var(--border); }
.card-body { padding: 16px; flex: 1; }
.card-header { padding: 12px 16px 0; }
.product-card { display: flex; flex-direction: column; transition: var(--transition); }
.product-card:hover { transform: translateY(-4px); border-color: rgba(0,255,65,0.2); box-shadow: 0 10px 40px rgba(0,0,0,0.3), 0 0 20px rgba(0,255,65,0.05); }
.card-desc { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.card-category { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.card-title a { color: var(--text-bright); text-decoration: none; }
.card-title a:hover { color: var(--green); }
.card-price { font-weight: 700; font-size: 1.1rem; color: var(--green); }

/* ═══ CATEGORY CARDS ═══ */
.category-card {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 30px 20px; background: rgba(255,255,255,0.02);
    border: 1px solid var(--border); border-radius: 14px;
    text-decoration: none; transition: var(--transition); text-align: center;
}
.category-card:hover { background: rgba(0,255,65,0.05); border-color: rgba(0,255,65,0.2); transform: translateY(-4px); }
.cat-icon { font-size: 24px; }
.cat-name { color: var(--text-bright); font-size: 14px; font-weight: 600; }
.cat-count { font-size: 12px; color: var(--text-dim); }

/* ═══ CATALOG FILTERS (inline layout) ═══ */
.catalog-controls { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; padding: 20px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 12px; }
.filter-group { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 160px; }
.filter-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); }
.filter-select { background: var(--bg-primary); color: var(--text-bright); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-family: var(--font-mono); font-size: 13px; cursor: pointer; transition: var(--transition); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300ff41' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.filter-select:hover, .filter-select:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 2px rgba(0,255,65,0.1); }
.filter-select option { background: var(--bg-primary); color: var(--text-bright); }
.filter-actions { display: flex; align-items: flex-end; gap: 8px; }
.filter-btn-apply { background: var(--green); color: var(--bg-primary); border: none; border-radius: 8px; padding: 10px 20px; font-family: var(--font-mono); font-size: 13px; font-weight: 700; cursor: pointer; transition: var(--transition); white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.filter-btn-apply:hover { filter: brightness(1.2); transform: translateY(-1px); }
.filter-btn-reset { background: transparent; color: var(--text-dim); border: 1px solid var(--border); border-radius: 8px; padding: 10px 16px; font-family: var(--font-mono); font-size: 13px; cursor: pointer; transition: var(--transition); text-decoration: none; display: flex; align-items: center; gap: 6px; }
.filter-btn-reset:hover { color: var(--text-bright); border-color: var(--text-dim); }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.active-filter-tag { background: rgba(0,255,65,0.1); color: var(--green); border: 1px solid rgba(0,255,65,0.2); border-radius: 20px; padding: 4px 12px; font-size: 12px; font-family: var(--font-mono); display: flex; align-items: center; gap: 6px; }
.results-info { font-size: 13px; color: var(--text-dim); margin-bottom: 16px; font-family: var(--font-mono); }
.view-toggle { display: flex; gap: 4px; }
.view-btn { background: transparent; border: 1px solid var(--border); color: var(--text-dim); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; transition: var(--transition); }
.view-btn:hover, .view-btn.active { background: rgba(0,255,65,0.1); color: var(--green); border-color: var(--green); }