@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=DM+Mono:wght@300;400;500&display=swap');
:root {
  --bg: #000; --bg-1: #0a0a0a; --bg-2: #111; --bg-3: #1a1a1a; --bg-4: #242424; --bg-5: #2e2e2e;
  --gray-d: #3d3d3d; --gray-m: #6b6b6b; --gray-l: #a0a0a0; --gray-p: #d0d0d0;
  --white: #fff; --white-05: rgba(255,255,255,.05); --white-08: rgba(255,255,255,.08);
  --white-15: rgba(255,255,255,.15); --white-25: rgba(255,255,255,.25);
  --white-50: rgba(255,255,255,.5); --white-60: rgba(255,255,255,.6);
  --font: 'Space Grotesk',sans-serif; --font-mono: 'DM Mono',monospace;
  --ease-out: cubic-bezier(.16,1,.3,1); --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 9999px;
  --primary: #fff; --text-primary: #fff; --text-secondary: #a0a0a0;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--gray-p);font-family:var(--font);font-size:15px;
  line-height:1.6;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased
}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--white-15);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--white-25)}


.loading-screen{
  position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;z-index:9999;
  transition:opacity .6s var(--ease-out),visibility .6s
}
.loading-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}
.loading-logo-wrap{position:relative;width:100px;height:100px;margin-bottom:2rem}
.loading-logo{width:100%;height:100%;border-radius:50%;border:1px solid var(--white-50);display:flex;align-items:center;justify-content:center;background:var(--bg-2);overflow:hidden}
.loading-logo img{width:75%;height:75%;object-fit:cover;border-radius:50%}
.loading-spinner{position:absolute;top:-8px;left:-8px;width:calc(100% + 16px);height:calc(100% + 16px);border-radius:50%;border:1px solid transparent;border-top-color:var(--white);border-right-color:var(--white-25);animation:spin 1.2s linear infinite}
.loading-spinner::before{content:'';position:absolute;inset:4px;border-radius:50%;border:1px solid transparent;border-bottom-color:var(--white-50);animation:spin 1.8s linear infinite reverse}
.loading-title{font-size:clamp(1.5rem,4vw,2.2rem);font-weight:700;letter-spacing:-.02em;opacity:0;animation:fadeUp .7s var(--ease-out) .3s forwards}
.loading-sub{font-size:.9rem;color:var(--gray-l);margin-top:.5rem;font-weight:300;opacity:0;animation:fadeUp .7s var(--ease-out) .5s forwards}
.loading-track{position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--white-08)}
.loading-fill{height:100%;background:var(--white);animation:loadBar 1.4s var(--ease-out) forwards}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes loadBar{from{width:0}to{width:100%}}


.main-layout{display:block;padding:2rem;max-width:960px;margin:0 auto}


.main-header{margin-bottom:2.5rem;text-align:center}
.main-title{font-size:clamp(1.4rem,3.5vw,2.2rem);font-weight:700;letter-spacing:-.02em;color:var(--white);margin-bottom:.4rem}
.main-title span{color:var(--gray-m);font-weight:400;font-size:.7em}
.main-header-sub{font-size:.8rem;color:var(--gray-m);font-family:var(--font-mono)}


.section-card{
  background:var(--bg-2);border:1px solid var(--white-08);border-radius:var(--radius-lg);
  padding:1.75rem;margin-bottom:1.5rem;transition:border-color .25s
}
.section-card:hover{border-color:var(--white-15)}
.section-title{
  font-size:.95rem;font-weight:600;color:var(--white);margin-bottom:1.25rem;
  display:flex;align-items:center;gap:.6rem;letter-spacing:-.01em
}
.section-title svg{flex-shrink:0;color:var(--gray-m)}


.form-group{margin-bottom:1.25rem}
label{
  display:block;font-size:.78rem;color:var(--gray-l);margin-bottom:.4rem;font-weight:500
}
input[type="text"],input[type="number"],select{
  width:100%;padding:.65rem .8rem;background:var(--bg-3);border:1px solid var(--white-08);
  border-radius:var(--radius-sm);color:var(--white);font-family:var(--font-mono);font-size:.82rem;
  outline:none;transition:border-color .2s;-webkit-appearance:none;appearance:none
}
input[type="text"]:focus,input[type="number"]:focus,select:focus{border-color:var(--white-25)}
select{cursor:pointer}
select option{background:var(--bg-2);color:var(--white)}

input[type="file"]{
  width:100%;padding:.6rem .8rem;background:var(--bg-3);border:1px dashed var(--white-15);
  border-radius:var(--radius-sm);color:var(--gray-m);font-family:var(--font-mono);font-size:.78rem;
  cursor:pointer;transition:border-color .2s
}
input[type="file"]:hover{border-color:var(--white-25)}


.identifier-input{display:flex;align-items:center;gap:.5rem}
.identifier-input span{color:var(--gray-m);font-family:var(--font-mono);font-size:.9rem;flex-shrink:0}
.namespace{flex:0 0 40%}
#itemIdentifier{flex:1;background:var(--bg-4);color:var(--gray-m);border-color:var(--white-05);cursor:not-allowed}


.image-preview{
  width:120px;height:120px;border:1px solid var(--white-08);border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;margin-top:.75rem;
  background:repeating-conic-gradient(var(--bg-2) 0% 25%,var(--bg-3) 0% 50%) 0 0 / 10px 10px;
  overflow:hidden
}
.image-preview p{font-size:.68rem;color:var(--gray-d);font-family:var(--font-mono);letter-spacing:.05em}
.image-preview img{max-width:100%;max-height:100%;object-fit:contain}


.components-editor{background:var(--bg-3);border:1px solid var(--white-08);border-radius:var(--radius-sm);padding:1.25rem;margin-bottom:1.25rem}
.component{
  display:flex;align-items:center;justify-content:space-between;padding:.7rem 0;
  border-bottom:1px solid var(--white-05);gap:.75rem
}
.component:last-child{border-bottom:none}
.component label{display:flex;align-items:center;gap:.55rem;cursor:pointer;margin-bottom:0;font-size:.78rem;color:var(--gray-p);flex-grow:1}

input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;border:2px solid var(--white-25);
  border-radius:3px;background:transparent;cursor:pointer;flex-shrink:0;position:relative;transition:border-color .15s,background .15s
}
input[type="checkbox"]:checked{background:var(--white);border-color:var(--white)}
input[type="checkbox"]:checked::after{
  content:'';position:absolute;top:1px;left:4px;width:4px;height:8px;
  border-right:2px solid #000;border-bottom:2px solid #000;transform:rotate(45deg)
}

.component input[type="number"],.component select{width:auto;min-width:80px;max-width:140px;flex-shrink:0}


.lore-item{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.lore-item input[type="text"]{flex:1}
.lore-btn{
  display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .8rem;
  background:var(--white-08);border:1px solid var(--white-08);border-radius:var(--radius-sm);
  color:var(--gray-l);font-family:var(--font);font-size:.72rem;cursor:pointer;transition:background .2s,color .2s;white-space:nowrap
}
.lore-btn:hover{background:var(--white-15);color:var(--white)}
.remove-lore{color:var(--gray-m)}.remove-lore:hover{color:var(--gray-p);border-color:var(--white-15)}
#addLore{margin-top:.5rem}


.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1.25rem;
  background:var(--bg-2);border:1px solid var(--white-15);border-radius:var(--radius-sm);
  color:var(--white);font-family:var(--font);font-size:.82rem;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;text-align:center
}
.btn:hover{background:var(--bg-3);border-color:var(--white-25)}
.btn-primary{border-color:var(--white);color:var(--white);background:var(--bg-2)}
.btn-primary:hover{background:var(--white);color:#000;border-color:var(--white)}
.btn-sm{padding:.45rem .8rem;font-size:.72rem}
#addItem{width:100%;margin-top:.25rem}
#downloadAll{max-width:360px;margin:0 auto;padding:.9rem 1.5rem;font-size:.9rem}


.items-list{min-height:120px}
.item-card{
  display:flex;align-items:center;gap:1rem;padding:.8rem;border:1px solid var(--white-08);
  border-radius:var(--radius-sm);margin-bottom:.5rem;background:var(--bg-2);
  transition:border-color .2s,background .2s
}
.item-card:hover{border-color:var(--white-15);background:var(--bg-3)}
.item-card:last-child{margin-bottom:0}
.item-card .item-preview{width:48px;height:48px;flex-shrink:0;border:1px solid var(--white-08);border-radius:var(--radius-sm);overflow:hidden;background:repeating-conic-gradient(var(--bg-2) 0% 25%,var(--bg-3) 0% 50%) 0 0 / 8px 8px;display:flex;align-items:center;justify-content:center}
.item-card .item-preview img{width:100%;height:100%;object-fit:contain}
.item-card .item-info{flex:1;min-width:0}
.item-card .item-info h4{font-size:.82rem;font-weight:600;color:var(--white);border:none;padding:0;margin-bottom:.2rem}
.item-card .item-info p{font-size:.72rem;color:var(--gray-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-card .item-actions{display:flex;gap:.4rem;flex-shrink:0}


.manifest-section{
  background:var(--bg-3);border:1px solid var(--white-08);border-radius:var(--radius-sm);
  padding:1.15rem;margin-bottom:.75rem;transition:border-color .2s
}
.manifest-section:hover{border-color:var(--white-15)}
.manifest-section:last-child{margin-bottom:0}
.manifest-section h4{font-size:.78rem;font-weight:600;color:var(--gray-l);margin-bottom:.8rem;padding-bottom:.4rem;border-bottom:1px solid var(--white-05)}


.download-section{text-align:center;margin-top:1.5rem;padding:2rem;border:1px solid var(--white-08);border-radius:var(--radius-lg);background:var(--bg-2)}
.download-label{font-size:.75rem;color:var(--gray-m);margin-bottom:1rem;display:block;font-family:var(--font-mono)}


.notification{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:9000;transform:translateX(calc(100% + 2.5rem));
  opacity:0;transition:transform .35s var(--ease-out),opacity .35s
}
.notification.show{transform:translateX(0);opacity:1}
.notification.hidden{display:none}
.notification-content{
  background:var(--bg-2);border:1px solid var(--white-15);border-left:3px solid var(--white);
  border-radius:var(--radius-sm);color:var(--white);padding:.75rem 1rem;display:flex;
  align-items:center;justify-content:space-between;gap:.75rem;min-width:260px;max-width:380px;
  font-size:.82rem
}
.notification.error .notification-content{border-left-color:var(--gray-d)}
.notification.warning .notification-content{border-left-color:var(--gray-m)}
#close-notification{
  background:none;border:none;color:var(--gray-m);cursor:pointer;padding:0;
  display:flex;align-items:center;transition:color .15s;line-height:1
}
#close-notification:hover{color:var(--white)}


@media(max-width:640px){
  .main-layout{padding:1rem}
  .section-card{padding:1.15rem}
  .item-card{flex-wrap:wrap}
  .item-card .item-actions{width:100%}
  .item-card .item-actions .btn{flex:1;text-align:center}
  .component{flex-direction:column;align-items:flex-start}
  .component input[type="number"],.component select{width:100%;max-width:100%}
  .notification{bottom:.75rem;right:.75rem}
  .notification-content{min-width:auto;max-width:calc(100vw - 1.5rem);font-size:.78rem}
}