@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Inter:wght@300;400;500;600;700&display=swap');

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

:root{
--bg:#07080b;
--bg2:#0e1017;
--bg3:#151922;
--card:#14181f;
--border:#1e2533;
--text:#d6dbe5;
--text2:#6b7488;
--accent:#00d4ff;
--accent2:#7b2ff7;
--gold:#f0b90b;
--red:#ff3355;
--green:#00e676;
--orange:#ff9100;
}

body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}

.stars{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
.star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;animation:twinkle var(--d,3s) ease-in-out infinite alternate;opacity:var(--o,0.5)}
@keyframes twinkle{0%{opacity:0.2;transform:scale(0.8)}100%{opacity:1;transform:scale(1.2)}}

/* Header */
header{background:linear-gradient(180deg,#0c0f1a 0%,rgba(12,15,26,0.95) 60%,transparent);border-bottom:1px solid var(--border);padding:0.8rem 2rem;position:sticky;top:0;z-index:100;backdrop-filter:blur(24px)}
.header-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
header h1{font-family:'Orbitron',monospace;font-size:1.2rem;font-weight:700}
header h1 a{color:inherit;text-decoration:none}
.logo-text{background:linear-gradient(135deg,var(--accent),#4dabf7,var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.header-right{display:flex;align-items:center;gap:0.8rem}
.btn-header{padding:0.4rem 0.9rem;border:1px solid var(--border);border-radius:8px;font-size:0.78rem;color:var(--text2);text-decoration:none;transition:all 0.2s}
.btn-header:hover{color:var(--accent);border-color:var(--accent);background:rgba(0,212,255,0.05)}

/* Hero */
.hero{min-height:75vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem;position:relative;z-index:1}
.hero-content{max-width:720px}
.hero-badge{display:inline-block;padding:0.35rem 1rem;border-radius:20px;font-size:0.7rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;border:1px solid var(--accent);color:var(--accent);margin-bottom:1.5rem}
.hero-title{font-family:'Orbitron',monospace;font-size:3.5rem;font-weight:900;line-height:1.1;margin-bottom:1rem}
.gradient-text{background:linear-gradient(135deg,var(--accent),#4dabf7,var(--accent2),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-subtitle{font-size:1.05rem;color:var(--text2);line-height:1.6;margin-bottom:2rem}
.hero-search{max-width:480px;margin:0 auto 2rem;position:relative}
.hero-search input{width:100%;padding:0.85rem 1.2rem 0.85rem 3rem;background:rgba(20,24,31,0.7);border:1px solid var(--border);border-radius:12px;color:var(--text);font-size:0.95rem;transition:all 0.3s;backdrop-filter:blur(12px)}
.hero-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(0,212,255,0.1),0 0 30px rgba(0,212,255,0.05)}
.hero-search-btn{position:absolute;left:0.6rem;top:50%;transform:translateY(-50%);background:none;border:none;font-size:1.2rem;cursor:pointer;opacity:0.5;transition:opacity 0.2s}
.hero-search input:focus + .hero-search-btn{opacity:1}

.hero-stats{display:flex;gap:2.5rem;justify-content:center;flex-wrap:wrap}
.hero-stat{display:flex;flex-direction:column;align-items:center}
.hero-stat-val{font-family:'Orbitron',monospace;font-size:1.6rem;font-weight:700;color:var(--accent)}
.hero-stat-lbl{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--text2);margin-top:0.2rem}

/* Sections */
.container{max-width:1400px;margin:0 auto;padding:1.5rem 2rem;position:relative;z-index:1}
.section{padding:3rem 0;position:relative;z-index:1}
.section-dark{background:rgba(12,15,26,0.5);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem}
.section-header h2{font-family:'Orbitron',monospace;font-size:1.1rem;font-weight:600}
.see-all{font-size:0.8rem;color:var(--accent);text-decoration:none}
.see-all:hover{text-decoration:underline}

/* Featured */
.featured-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}
.featured-card{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;transition:all 0.3s ease;transform:translateY(0)}
.featured-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 8px 32px rgba(0,212,255,0.12)}
.fc-img{height:170px;overflow:hidden;position:relative;background:linear-gradient(135deg,#0f121a,#1a1f2e)}
.fc-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease}
.featured-card:hover .fc-img img{transform:scale(1.05)}
.fc-type{position:absolute;top:0.5rem;left:0.5rem;padding:0.2rem 0.6rem;border-radius:4px;font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:#fff}
.fc-body{padding:0.7rem 1rem}
.fc-body h3{font-size:0.95rem;font-weight:600}
.fc-maker{font-size:0.7rem;color:var(--text2);margin-top:1px}
.fc-stats{display:flex;gap:1rem;margin-top:0.4rem;font-size:0.8rem;color:var(--text2)}
.fc-stats span{display:flex;align-items:center;gap:0.3rem}

/* Makers */
.makers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0.8rem}
.maker-card{background:rgba(20,24,31,0.5);border:1px solid var(--border);border-left:3px solid var(--maker-color,#9e9e9e);border-radius:8px;padding:0.8rem 1rem;transition:all 0.2s}
.maker-card:hover{background:rgba(20,24,31,0.8);border-color:var(--maker-color,#9e9e9e)}
.maker-name{font-weight:600;font-size:0.85rem}
.maker-count{font-size:0.7rem;color:var(--text2);margin-top:0.2rem}

/* Filters */
.stats{display:flex;gap:2rem;flex-wrap:wrap;margin-bottom:1.5rem;padding:0.9rem 1.5rem;background:rgba(20,24,31,0.6);border:1px solid var(--border);border-radius:12px;backdrop-filter:blur(8px)}
.stat-item{display:flex;flex-direction:column;flex:1;min-width:100px}
.stat-item .label{font-size:0.65rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--text2)}
.stat-item .value{font-size:1.1rem;font-weight:700;color:var(--accent);margin-top:2px}
.filters{display:flex;gap:0.7rem;flex-wrap:wrap;margin-bottom:1.5rem;align-items:center}
.search-box{flex:1;min-width:180px;position:relative}
.search-box input{width:100%;padding:0.6rem 1rem 0.6rem 2.3rem;background:rgba(20,24,31,0.6);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:0.85rem;transition:all 0.2s;backdrop-filter:blur(8px)}
.search-box input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,212,255,0.1)}
.search-box::before{content:'🔍';position:absolute;left:0.7rem;top:50%;transform:translateY(-50%);font-size:0.8rem;opacity:0.4}
select{padding:0.6rem 0.8rem;background:rgba(20,24,31,0.6);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:0.8rem;cursor:pointer;backdrop-filter:blur(8px);-webkit-appearance:none;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='%236b7488' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:28px}
select:focus{outline:none;border-color:var(--accent)}
.view-toggle{display:flex;gap:2px;background:rgba(20,24,31,0.6);border:1px solid var(--border);border-radius:8px;padding:3px}
.view-btn{padding:0.4rem 0.7rem;border:none;background:transparent;color:var(--text2);cursor:pointer;border-radius:5px;font-size:0.85rem;transition:all 0.2s;line-height:1}
.view-btn.active{background:var(--accent);color:#000}
.view-btn:hover:not(.active){color:var(--text)}

/* Grid */
.ship-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.ship-card{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:all 0.3s ease;cursor:pointer;position:relative;transform:translateY(0);text-decoration:none;color:inherit}
.ship-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 8px 32px rgba(0,212,255,0.15)}
.ship-card .img-wrap{width:100%;height:160px;overflow:hidden;position:relative;background:linear-gradient(135deg,#0f121a,#1a1f2e)}
.ship-card .img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease}
.ship-card:hover .img-wrap img{transform:scale(1.05)}
.ship-card .img-wrap .no-img{display:flex;align-items:center;justify-content:center;height:100%;font-size:3rem;opacity:0.15}
.ship-card .card-body{padding:0.8rem 1rem}
.ship-card .card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:0.4rem}
.ship-card .ship-name{font-weight:600;font-size:0.95rem}
.ship-card .ship-maker{font-size:0.7rem;color:var(--text2);margin-top:1px}
.ship-card .price{font-weight:700;font-size:0.85rem;color:var(--gold);white-space:nowrap}
.live-badge{display:inline-block;padding:0.05rem 0.3rem;border-radius:2px;font-size:0.45rem;font-weight:700;letter-spacing:0.06em;background:rgba(0,230,118,0.12);color:#00e676;vertical-align:middle;margin-left:0.2rem;line-height:1.2}
.ship-card .card-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.4rem;margin-top:0.5rem;padding-top:0.5rem;border-top:1px solid var(--border)}
.ship-card .card-stat{text-align:center}
.ship-card .card-stat .val{font-weight:600;font-size:0.85rem}
.ship-card .card-stat .lbl{font-size:0.6rem;text-transform:uppercase;letter-spacing:0.04em;color:var(--text2);margin-top:1px}
.ship-card .card-footer{padding:0.4rem 1rem 0.7rem;display:flex;gap:0.4rem}
.ship-card .card-footer .tag{font-size:0.6rem}

/* Table */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px;background:rgba(20,24,31,0.6);backdrop-filter:blur(8px)}
table{width:100%;border-collapse:collapse;font-size:0.82rem}
thead{background:rgba(21,25,34,0.8)}
th{padding:0.8rem 0.8rem;text-align:left;font-weight:600;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--text2);cursor:pointer;user-select:none;white-space:nowrap;border-bottom:1px solid var(--border)}
th:hover{color:var(--accent)}
th .sort-icon{display:inline-block;margin-left:0.3rem;opacity:0.3;font-size:0.6rem}
th.sorted .sort-icon{opacity:1;color:var(--accent)}
td{padding:0.65rem 0.8rem;border-bottom:1px solid var(--border);vertical-align:middle}
tr:hover{background:rgba(0,212,255,0.02)}
tr:last-child td{border-bottom:none}
.tag{display:inline-block;padding:0.15rem 0.5rem;border-radius:4px;font-size:0.65rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em}
.price-val{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.scu-val{font-weight:600;color:var(--gold)}
.scu-0{color:var(--text2)}

/* Empty */
.empty-state{text-align:center;padding:3rem 2rem;color:var(--text2)}
.empty-state .big-icon{font-size:3rem;margin-bottom:0.5rem}

/* Footer */
footer{text-align:center;padding:1.5rem;color:var(--text2);font-size:0.75rem;border-top:1px solid var(--border);margin-top:2rem;position:relative;z-index:1}

/* No image fallback */
.no-img{display:flex;align-items:center;justify-content:center;height:100%;min-height:160px;font-size:3rem;opacity:0.15;color:var(--text)}

/* Responsive */
@media(max-width:768px){
.hero-title{font-size:2rem}
.hero-subtitle{font-size:0.9rem}
.hero-stats{gap:1.2rem}
.hero-stat-val{font-size:1.2rem}
header{padding:0.6rem 1rem}
header h1{font-size:0.95rem}
.container{padding:1rem}
.stats{gap:0.8rem;padding:0.7rem 1rem}
.stat-item .value{font-size:0.95rem}
.filters{gap:0.5rem}
.search-box{min-width:100%}
select{min-width:100%}
.view-toggle{margin-left:auto}
.ship-grid{grid-template-columns:1fr}
.featured-grid{grid-template-columns:1fr}
.makers-grid{grid-template-columns:1fr 1fr}
.section{padding:2rem 0}
}