body, html { background: var(--mv-bg) !important;}

html body footer.site-footer,
html body.has-fixed-footer footer.site-footer {
    position: relative !important;
    z-index: 2 !important; background: var(--mv-bg);}

.space-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, var(--mv-bg) 0%, var(--mv-bg) 30%, var(--mv-bg) 60%, var(--mv-bg) 100%); overflow: hidden;}
.space-bg .star { position: absolute; border-radius: 50%; background: var(--mv-text);}
.space-bg .star--sm { width: 1px; height: 1px; opacity: 0.35; animation: nTwinkle 3s ease-in-out infinite;}
.space-bg .star--md { width: 1.5px; height: 1.5px; opacity: 0.55; animation: nTwinkle 4s ease-in-out infinite;}
.space-bg .star--lg { width: 2.5px; height: 2.5px; opacity: 0.8; animation: nTwinkle 5s ease-in-out infinite; box-shadow: 0 0 6px rgba(150,220,255,0.7);}
@keyframes nTwinkle { 0%,100%{opacity: 0.15;transform: scale(0.8);} 50%{opacity: 1;transform: scale(1.3);} }
.space-bg .nebula { position: absolute; border-radius: 50%; filter: blur(60px); animation: nNebula 20s ease-in-out infinite;}
@keyframes nNebula { 0%,100%{transform: scale(1);opacity: 0.8;} 50%{transform: scale(1.15);opacity: 1;} }

.page-wrapper { position: relative; z-index: 1;}

.nut-hero { position: relative; padding: 60px 0 20px; margin-bottom: 20px; text-align: center;}
.nut-hero-title { font-size: clamp(2.8rem, 5vw, 4.2rem); font-weight: 900; margin-bottom: 16px; color: var(--mv-accent);}
.nut-hero-sub { font-size: 1.05rem; color: var(--mv-accent); margin-bottom: 0;}

.nut-search { position: relative; max-width: 600px; margin: 40px auto 50px;}
.nut-search-box { position: relative; background: rgba(12,20,38,0.7); border: 1.5px solid rgba(110,193,255,0.2); border-radius: 30px; padding: 12px 22px; display: flex; align-items: center; gap: 12px; transition: all 0.3s;}
.nut-search-box:focus-within { border-color: rgba(110,193,255,0.5); box-shadow: var(--mv-glow);}
.nut-search-box i { font-size: 1.1rem; color: var(--mv-accent);}
.nut-search-input { flex: 1; background: transparent; border: none; color: var(--text); font-size: 0.95rem; outline: none; -webkit-appearance: none; appearance: none;}
/* Fara "patrat" interior la focus: inelul global :focus-visible (base.css) e mutat pe
   pilula intreaga prin .nut-search-box:focus-within; input-ul ramane curat. */
.nut-search-input:focus,
.nut-search-input:focus-visible {
    outline: none !important; outline-offset: 0 !important; box-shadow: none !important;}
.nut-search-input::-webkit-search-cancel-button,
.nut-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none;}
.nut-search-input::placeholder { color: var(--mv-accent);}

.grid-panel { background: rgba(10,18,35,0.5); border: 1px solid rgba(110,193,255,0.1); border-radius: 28px; padding: 36px 28px;}
.nut-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;}
@media (max-width: 1100px) { .nut-grid { grid-template-columns: 1fr; gap: 20px;} }

.nut-card { position: relative; display: flex; flex-direction: column; background: rgba(8,14,30,0.95); border: 1px solid rgba(110,193,255,0.18); border-radius: 22px; overflow: hidden; text-decoration: none; color: inherit; cursor: pointer; transition: transform 0.35s cubic-bezier(0.23,1,0.32,1), box-shadow 0.35s ease, border-color 0.35s ease; min-height: 260px;}

.nc-stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;}

.nut-card-main { position: relative; z-index: 1; display: flex; gap: 24px; padding: 22px 24px 0; flex: 1; align-items: flex-end;}

.nut-card-photo-wrap { flex-shrink: 0; position: relative; width: 180px; height: 220px;}
.nut-card-photo-frame { width: 100%; height: 100%; border-radius: 16px 16px 0 0; overflow: hidden; border: none; position: relative;}
.nut-card-photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.5s cubic-bezier(0.23,1,0.32,1), filter 0.4s ease; filter: brightness(0.95) saturate(0.9);}
.nut-card:hover .nut-card-photo { filter: brightness(1) saturate(1);}
.nut-card-vcount { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); padding: 4px 14px; background: rgba(6,12,28,0.88); border: 1px solid rgba(110,193,255,0.3); border-radius: 8px; font-size: 0.75rem; font-weight: 700; color: var(--mv-accent); z-index: 4; white-space: nowrap;}

.nut-card-specs { flex: 1; display: flex; flex-direction: column; min-width: 0; padding-top: 4px; padding-bottom: 14px; align-self: flex-start;}
.nut-card-specs-title { font-size: 1.35rem; font-weight: 800; margin-bottom: 16px; color: var(--text);}
.nut-card-spec-list { display: flex; flex-direction: column; gap: 10px;}
.nut-card-spec-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: rgba(110,193,255,0.06); border: 1px solid rgba(110,193,255,0.2); border-radius: 14px; transition: all 0.3s ease;}
.nut-card:hover .nut-card-spec-item { border-color: rgba(110,193,255,0.35); background: rgba(110,193,255,0.1);}
.nut-card-spec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); flex-shrink: 0; color: var(--mv-text-inverse);}
.nut-card-spec-item span:last-child { flex: 1; font-size: 0.95rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.nut-card-footer { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 14px 24px; border-top: 1px solid rgba(110,193,255,0.12); background: rgba(0,0,0,0.15);}
.nut-card-name { font-weight: 800; font-size: 1.1rem; color: var(--text); flex-shrink: 1; min-width: 0;}
.nut-card-cert { position: absolute; top: 14px; right: 14px; z-index: 6; display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 700; color: var(--primary);}
.nut-card-cert-check { width: 20px; height: 20px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; color: var(--mv-text-inverse); font-weight: 900;}
.nut-card-book { margin-left: auto; flex-shrink: 0; padding: 10px 24px; background: var(--mv-accent); color: var(--mv-text-inverse); border: none; border-radius: 14px; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.23,1,0.32,1); position: relative; overflow: hidden;}
.nut-card-book::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: var(--mv-elev-4); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.4s ease, height 0.4s ease;}
.nut-card-book:hover::before { width: 160px; height: 160px;}
.nut-card-book:hover {}

.nut-loading { text-align: center; padding: 40px;}
.nut-spinner { width: 36px; height: 36px; border: 3px solid rgba(110,193,255,0.15); border-top-color: rgba(110,193,255,0.7); border-radius: 50%; animation: nutSpin 0.8s linear infinite; margin: 0 auto 16px;}
@keyframes nutSpin { to { transform: rotate(360deg);} }

@media (max-width: 700px) {
    .nut-card-main { flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 16px;}
    .nut-card-photo-frame { width: 120px; height: 150px;}
    .nut-card-footer { flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px 16px;}
    .nut-card-book { margin-left: 0;}
    .grid-panel { padding: 20px 14px; border-radius: 20px;}
    .nut-hero-title { font-size: 2rem;}
}