:root{
  --bg:#0b0b0f;--panel:#12131a;--border:#2a2c38;--text:#e9eef5;
  --muted:#a7b0c0;--accent1:#ffd54a;--accent2:#e53935;--white: #ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;scroll-behavior:smooth;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial}
a{color:var(--text)}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.nav{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.6);backdrop-filter: blur(8px);border-bottom:1px solid #ffffff1a}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;gap:10px;align-items:center}
.brand img{width:40px;height:40px;object-fit:contain}
.brand h1{font-size:16px;margin:0;line-height:1}
.brand small{display:block;color:var(--muted)}
.menu a{padding:8px 10px;border-radius:12px;text-decoration:none;color:#e6e6e6}
.menu a:hover{background:#ffffff14}
.btn{display:inline-block;padding:12px 16px;border-radius:16px;font-weight:600;text-decoration:none}
.btn-primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#000}
.btn-ghost{border:1px solid #ffffff2a}
.hero{position:relative;overflow:hidden}
.hero .inner{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;padding:48px 0}
@media(max-width:900px){.hero .inner{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:24px;box-shadow:0 10px 30px #00000040}
h2{margin:0 0 8px}
.eyebrow{color:var(--muted);text-transform:uppercase;font-size:12px;letter-spacing:.15em;margin-bottom:6px}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}
.pill{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;border:1px solid #ffffff22;background:#ffffff08;color:#cdd6e4;font-size:12px;margin-right:6px}
.hero-card{aspect-ratio:3/4;border-radius:24px;background:#000 url('assets/card-back.png') center/cover;border:1px solid #ffffff1a;box-shadow:0 15px 40px #00000080}
.section{margin:56px 0}
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1000px){.card-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.card-grid{grid-template-columns:repeat(2,1fr)}}
.card-tile{border:1px solid #ffffff1a;border-radius:16px;overflow:hidden;background:#ffffff08}
.card-preview{display:block;width:100%;padding:0;border:0;background:#000;cursor:zoom-in;color:inherit}
.card-thumb{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:#000}
.card-info{padding:8px 10px;font-size:12px;color:#cbd5e1;display:flex;justify-content:space-between;gap:6px}
.controls{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:10px;margin:20px 0 12px}
.control{display:flex;flex-direction:column;gap:6px}
.control label{color:var(--muted);font-size:12px;font-weight:600}
.controls input,.controls select{background:#ffffff0a;border:1px solid #ffffff1a;color:#fff;padding:10px;border-radius:12px}
.controls input:focus,.controls select:focus,.btn:focus-visible,.card-preview:focus-visible,.modal-close:focus-visible{outline:3px solid var(--accent1);outline-offset:2px}
.library-intro{color:var(--muted);margin-bottom:0}
.library-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0}
.results-count{margin:0;font-weight:600}
.btn-secondary{border:1px solid #ffffff2a;background:#ffffff0a;color:var(--text);cursor:pointer}
.load-more-wrap{text-align:center;margin-top:20px}
.load-more-wrap .btn{border:0;cursor:pointer}
.library-state{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 16px;border:1px dashed var(--border);border-radius:16px}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:#000c}
.modal[hidden]{display:none}
.modal-panel{position:relative;width:min(92vw,460px);max-height:92vh;overflow:auto;padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--panel);box-shadow:0 20px 60px #000}
.modal-panel img{display:block;width:100%;max-height:72vh;object-fit:contain;border-radius:12px;background:#000}
.modal-panel h2{margin:14px 0 4px}
.modal-details{margin:0;color:var(--muted)}
.modal-close{position:absolute;top:8px;right:8px;z-index:1;width:44px;height:44px;border:1px solid #ffffff42;border-radius:50%;background:#090a0ee6;color:#fff;font-size:28px;line-height:1;cursor:pointer}
body.modal-open{overflow:hidden}
.footer{border-top:1px solid #ffffff19;margin-top:56px;padding:24px 0;color:#98a3b5;text-align:center;font-size:12px}
.notice{color:#9bb1c9;font-size:12px;margin-top:8px}
.hero-logo-left {
  display: block;
  margin: 0 0 16px 0;   
  width: 100%;          
  max-width: 520px;     
  height: auto;
}

@media (min-width: 900px) {
  .hero-logo-left {
    max-width: 620px;   
  }
}
.hero .inner > div:first-child p {
  margin-top: 8px;    
  margin-bottom: 16px; 
  line-height: 1.5;   
}

.hero .inner > div:first-child .btn {
  margin-top: 8px;    
}
.tagline {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 500;
  margin: -20px 0 12px 0; 
  color: var(--muted);
}
select {
  background-color: #0b0b0f;
  color: #fff;        
  border: 1px solid #ffffff1a;
}
@media(max-width:760px){
  .nav-inner{align-items:flex-start;gap:10px}.menu{display:flex;overflow-x:auto;max-width:52vw}.menu a{white-space:nowrap}
  .controls{grid-template-columns:repeat(2,1fr)}.control-search{grid-column:1/-1}
}
@media(max-width:480px){
  .brand small{display:none}.brand h1{font-size:14px}.menu{max-width:45vw}.section.card{padding:18px}
  .controls{grid-template-columns:1fr}.control-search{grid-column:auto}.controls input,.controls select{min-height:44px;width:100%}
  .library-toolbar{align-items:stretch;flex-direction:column}.library-toolbar .btn{width:100%;text-align:center}
}

select option {
  background-color: #0b0b0f; 
  color: #fff;          
}
select {
  border-radius: 12px;
  padding: 10px;
}