:root{--bg:#050808;--panel:#0b1011cc;--line:#18363a;--text:#edf7f8;--muted:#91a5ad;--cyan:#05d9ff;--gold:#ffd35c;--green:#1ed760;--danger:#ff4d6d;--card:#0e1517}*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:#020506;color:var(--text);min-height:100vh;overflow:hidden}.bg{position:fixed;inset:0;background:radial-gradient(circle at 20% 10%,#132f46 0,#071113 25%,transparent 48%),radial-gradient(circle at 80% 20%,#421449 0,#07090b 30%,transparent 48%),linear-gradient(135deg,#010202,#071012 55%,#010202);z-index:-2}.bg:after{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(to bottom,#000,transparent 80%)}button,.discord{border:1px solid #2f5b61;background:#101719;color:#fff;border-radius:8px;padding:10px 14px;font-weight:700;cursor:pointer;text-decoration:none;transition:.15s}button:hover,.discord:hover{border-color:var(--cyan);box-shadow:0 0 16px #05d9ff44}.primary{background:linear-gradient(135deg,#0077ff,#00d5ff);border-color:#27ddff;color:white}.discord{background:linear-gradient(135deg,#5865f2,#9146ff)}.topbar{height:86px;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:1px solid var(--line);background:#050808d9;backdrop-filter:blur(10px)}.brand{display:flex;gap:14px;align-items:center}.logo{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-weight:900;font-size:23px;background:linear-gradient(135deg,#00d5ff,#7b2cff 55%,#ffd35c);box-shadow:0 0 28px #00d5ff55}.brand h1{margin:0;color:var(--gold);font-size:28px;text-shadow:0 0 16px #ffd35c55}.brand p{margin:3px 0 0;color:var(--muted)}.actions{display:flex;gap:10px;align-items:center}.layout{height:calc(100vh - 126px);display:grid;grid-template-columns:330px 390px 1fr;gap:16px;padding:16px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 0 34px #0009,inset 0 0 0 1px #ffffff05;padding:14px;min-height:0}.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.panel-title span{font-weight:900;font-size:20px}.panel-title small{color:var(--muted)}.file-drop{display:block;border:1px dashed #285962;border-radius:12px;padding:12px;margin-bottom:12px;background:#061012;cursor:pointer}.file-drop input{display:none}.file-drop span{display:block;color:var(--cyan);font-weight:800}.file-drop small{color:var(--muted)}select,input,textarea{width:100%;background:#080d0f;border:1px solid #263d42;border-radius:8px;color:#fff;padding:10px;outline:none}select:focus,input:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 2px #05d9ff22}.search{position:relative;margin:10px 0}.search span{position:absolute;right:12px;top:9px;color:var(--muted)}.item-list{height:calc(100vh - 295px);overflow:auto;border:1px solid #162b30;border-radius:12px;background:#050808}.item-row{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;padding:9px;border-bottom:1px solid #102227;cursor:pointer}.item-row:hover,.item-row.active{background:#07343b}.mini-icon,.item-icon{background:radial-gradient(circle at 30% 20%,#fff8,#00d5ff55 20%,#0f1720 60%);border:1px solid #2c6370;border-radius:10px;display:grid;place-items:center;color:#ffd35c;text-shadow:0 0 10px #ffd35c;font-weight:900}.mini-icon{width:36px;height:36px}.item-row b{display:block;font-size:13px}.item-row small{color:var(--muted)}.item-preview{height:230px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border:1px solid #193239;border-radius:14px;background:linear-gradient(145deg,#071113,#020404);margin-bottom:14px}.item-icon{width:105px;height:105px;font-size:54px;margin-bottom:12px}.item-preview h2{margin:0 0 6px}.item-preview p{margin:0;color:var(--muted);max-width:300px}.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.editor-grid label{font-size:12px;color:var(--muted);font-weight:700}.editor-grid label:nth-child(2){grid-column:1/3}.checks{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0;color:var(--muted)}.checks input{width:auto}.wide{width:100%;font-size:15px}.shop-panel{display:flex;flex-direction:column}.shop-head{display:flex;justify-content:space-between;gap:14px}.tabs{display:flex;gap:8px;flex-wrap:wrap}.tabs button{padding:8px 12px}.tabs button.active{background:#081f23;border-color:var(--cyan);color:#fff}.currency-tabs{display:flex;gap:8px;align-items:flex-start}.currency-tabs button.active{border-color:var(--gold);color:var(--gold)}.shop-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:14px;margin-top:14px;min-height:0}.slot{border:1px solid #22383e;border-radius:14px;background:linear-gradient(145deg,#081012,#030505);padding:12px;position:relative;overflow:hidden;cursor:pointer}.slot:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 15%,#05d9ff18,transparent 45%);opacity:.8}.slot.active{border-color:var(--cyan);box-shadow:0 0 22px #05d9ff33}.slot .mini-icon{width:58px;height:58px;margin-bottom:8px;font-size:26px}.slot b{position:relative;display:block}.slot small{position:relative;color:var(--muted);display:block;margin-top:3px}.slot .remove{position:absolute;right:8px;top:8px;color:#ff8ca0;border-color:#5a2630;padding:4px 8px;z-index:2}.empty-slot{display:grid;place-items:center;color:#52666d;border:1px dashed #20383f;border-radius:14px;background:#050808}.pager{text-align:center;padding-top:10px}.pager button{padding:8px 14px;margin:0 8px}footer{height:40px;display:flex;gap:18px;align-items:center;justify-content:center;color:var(--muted);background:#030606;border-top:1px solid var(--line)}footer b{color:var(--gold)}dialog{border:1px solid var(--line);background:#0b1011;color:#fff;border-radius:16px;box-shadow:0 0 80px #000}dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}.modal{width:500px;padding:18px}.modal label{display:block;margin:10px 0;color:var(--muted)}.modal input{margin-top:6px}.modal menu{display:flex;justify-content:flex-end;gap:10px;padding:0;margin-top:18px}@media(max-width:1200px){body{overflow:auto}.layout{height:auto;grid-template-columns:1fr}.item-list{height:300px}.shop-grid{grid-template-columns:repeat(2,1fr);height:700px}.topbar{height:auto;align-items:flex-start}.actions{flex-wrap:wrap;justify-content:flex-end}}
.cat-tools{display:flex;gap:8px;margin:0 0 8px}.cat-tools button{padding:7px 10px;font-size:12px}.mini-icon img,.item-icon img{max-width:92%;max-height:92%;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 0 8px #00d5ff88)}.slot .mini-icon img{max-width:100%;max-height:100%}.editor-grid small{display:block;color:#6f8b93;font-size:10px;margin-top:4px}.currency-tabs button:nth-child(2).active{border-color:#7dfcff;color:#7dfcff}.shop-head{align-items:flex-start}.slot{min-height:155px}.item-row .mini-icon{overflow:hidden}.item-icon{overflow:hidden}.tabs button{background:linear-gradient(180deg,#111a1d,#071013)}.tabs button.active{box-shadow:0 0 18px #05d9ff3d inset,0 0 16px #05d9ff2d}.panel{backdrop-filter:blur(12px)}


/* GiGiFasT Music Button */
.music-btn{
  border:1px solid rgba(255,215,120,.35);
  background:linear-gradient(135deg,rgba(255,205,95,.16),rgba(255,255,255,.06));
  color:#ffe7a6;
  border-radius:12px;
  padding:10px 14px;
  font-weight:800;
  letter-spacing:.2px;
  cursor:pointer;
  box-shadow:0 0 18px rgba(255,196,77,.12), inset 0 0 0 1px rgba(255,255,255,.04);
}
.music-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 0 24px rgba(255,196,77,.22), inset 0 0 0 1px rgba(255,255,255,.08);
}
.music-btn.music-on{
  color:#fff4c9;
  border-color:rgba(255,215,120,.65);
  background:linear-gradient(135deg,rgba(255,205,95,.28),rgba(255,255,255,.08));
}


/* GiGiFasT Language Selector */
.lang-select{
  border:1px solid rgba(120,180,255,.32);
  background:linear-gradient(135deg,rgba(54,105,180,.22),rgba(255,255,255,.06));
  color:#eaf4ff;
  border-radius:12px;
  padding:10px 12px;
  font-weight:800;
  outline:none;
  cursor:pointer;
  box-shadow:0 0 18px rgba(78,140,255,.10), inset 0 0 0 1px rgba(255,255,255,.04);
}
.lang-select:hover{
  transform:translateY(-1px);
  box-shadow:0 0 24px rgba(78,140,255,.20), inset 0 0 0 1px rgba(255,255,255,.08);
}
.lang-select option{
  background:#101828;
  color:#eaf4ff;
}


/* Premium GiGiFasT logo + animated Discord button */
.logo.pro-logo{
  position:relative;
  width:62px;
  height:62px;
  border-radius:18px;
  overflow:hidden;
  isolation:isolate;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.45), transparent 18%),
    radial-gradient(circle at 70% 75%, rgba(255,211,92,.35), transparent 24%),
    linear-gradient(135deg,#04e4ff 0%,#7b2cff 45%,#ff3cc7 72%,#ffd35c 100%);
  border:1px solid rgba(255,255,255,.26);
  box-shadow:
    0 0 22px rgba(5,217,255,.48),
    0 0 36px rgba(145,70,255,.32),
    inset 0 0 18px rgba(255,255,255,.16);
}
.logo.pro-logo::before{
  content:"";
  position:absolute;
  inset:-45%;
  background:conic-gradient(from 90deg, transparent, rgba(255,255,255,.55), transparent 34%);
  animation:logoSpin 4.8s linear infinite;
  z-index:-1;
}
.logo.pro-logo::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 0 18px rgba(0,0,0,.38);
}
.logo-orb{
  position:absolute;
  width:46px;
  height:46px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.45), rgba(0,213,255,.18) 32%, rgba(0,0,0,.16) 70%);
  filter:blur(.1px);
}
.logo-sword{
  position:absolute;
  font-size:28px;
  transform:rotate(-18deg);
  text-shadow:0 0 12px rgba(255,255,255,.75),0 0 20px rgba(255,211,92,.65);
  z-index:2;
}
.logo-gf{
  position:absolute;
  right:7px;
  bottom:5px;
  font-size:13px;
  font-weight:1000;
  color:#fff;
  letter-spacing:.5px;
  text-shadow:0 0 8px rgba(0,0,0,.95),0 0 12px rgba(255,255,255,.55);
  z-index:3;
}
@keyframes logoSpin{
  to{transform:rotate(360deg)}
}

.discord{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#5865f2,#7b2cff 55%,#c026d3);
  border-color:rgba(255,255,255,.20);
  box-shadow:0 0 18px rgba(88,101,242,.34), inset 0 0 0 1px rgba(255,255,255,.08);
  animation:discordPulse 1.55s ease-in-out infinite;
}
.discord::before{
  content:"";
  position:absolute;
  inset:0;
  left:-120%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);
  animation:discordShine 2.4s ease-in-out infinite;
}
.discord:hover{
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 0 28px rgba(88,101,242,.68),0 0 42px rgba(192,38,211,.34);
}
@keyframes discordPulse{
  0%,100%{box-shadow:0 0 14px rgba(88,101,242,.35),0 0 0 rgba(88,101,242,0)}
  50%{box-shadow:0 0 26px rgba(88,101,242,.82),0 0 38px rgba(192,38,211,.34)}
}
@keyframes discordShine{
  0%{left:-130%}
  55%,100%{left:130%}
}


/* Keep action buttons readable on smaller widths */
#btnImport,#btnExport,#btnSaveLocal,#btnLoadLocal{
  min-width:74px;
  height:46px;
  padding:8px 12px;
}
@media (max-width:1400px){
  .actions{
    grid-template-columns:minmax(260px,1fr) minmax(240px,340px) auto auto auto auto auto;
  }
  .discord{min-width:145px !important;font-size:14px;padding:10px 16px !important;}
  .music-btn{min-width:104px !important;padding:8px 12px !important;}
}





/* Clean professional topbar layout - no xShop export/settings changed */
.topbar{
  height:86px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  padding:14px 24px !important;
  overflow:visible !important;
}
.brand{
  flex:0 0 360px !important;
  min-width:360px !important;
}
.actions{
  flex:1 1 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  min-width:0 !important;
  overflow:visible !important;
}
.lang-select{
  flex:0 1 300px !important;
  width:300px !important;
  min-width:230px !important;
  max-width:300px !important;
  height:46px !important;
  border-radius:14px !important;
  padding:0 14px !important;
  background:#101c2b !important;
  border:1px solid rgba(5,217,255,.65) !important;
  color:#fff !important;
  font-weight:900 !important;
  box-shadow:0 0 16px rgba(5,217,255,.16) !important;
}
.music-btn{
  flex:0 0 118px !important;
  width:118px !important;
  min-width:118px !important;
  height:50px !important;
  padding:8px 12px !important;
  white-space:nowrap !important;
  border-radius:14px !important;
  text-align:center !important;
  line-height:1.1 !important;
}
.discord{
  flex:0 0 170px !important;
  width:170px !important;
  min-width:170px !important;
  height:50px !important;
  padding:10px 14px !important;
  white-space:nowrap !important;
  border-radius:14px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:15px !important;
  font-weight:1000 !important;
  letter-spacing:.3px !important;
  color:#fff !important;
  overflow:hidden !important;
  animation:discordPulseStrong 1.1s ease-in-out infinite !important;
}
#btnImport,#btnExport,#btnSaveLocal,#btnLoadLocal{
  flex:0 0 auto !important;
  min-width:76px !important;
  height:46px !important;
  padding:8px 12px !important;
  font-size:13px !important;
  border-radius:10px !important;
}
.discord::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:16px;
  border:2px solid rgba(255,255,255,.24);
  animation:discordRing 1.1s ease-in-out infinite;
  pointer-events:none;
}
@keyframes discordPulseStrong{
  0%,100%{transform:scale(1);box-shadow:0 0 16px rgba(88,101,242,.55), inset 0 0 0 1px rgba(255,255,255,.08)}
  50%{transform:scale(1.035);box-shadow:0 0 30px rgba(88,101,242,.95),0 0 48px rgba(255,211,92,.34), inset 0 0 0 1px rgba(255,255,255,.22)}
}
@keyframes discordRing{
  0%,100%{opacity:.25; transform:scale(1)}
  50%{opacity:.85; transform:scale(1.06)}
}
@media (max-width:1500px){
  .brand{flex-basis:330px !important;min-width:330px !important;}
  .lang-select{flex-basis:240px !important;width:240px !important;min-width:210px !important;}
  .music-btn{flex-basis:104px !important;width:104px !important;min-width:104px !important;font-size:12px !important;}
  .discord{flex-basis:145px !important;width:145px !important;min-width:145px !important;font-size:13px !important;}
  #btnImport,#btnExport,#btnSaveLocal,#btnLoadLocal{min-width:66px !important;font-size:12px !important;padding:7px 9px !important;}
}
