/* =====================================================================
   Skin Studio - re-skin
   ---------------------------------------------------------------------
   The studio's layout is carried over from the original build and works
   well, so this file only changes how it looks: it swaps the flat panels
   for the site's frosted glass, matches the buttons and inputs to the
   rest of NexusHub, and lets the starfield show through.

   Nothing here changes behaviour. Every id and class the app relies on
   is untouched.
   ===================================================================== */

:root {
  --panel:   rgba(3, 3, 6, .62);
  --panel-2: rgba(255, 255, 255, .025);
  --panel-3: rgba(255, 255, 255, .035);
  --line:        rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .16);
  --muted:   #a1a1aa;
  --muted-2: #71717a;
  --radius: 24px;
  --nx-grad: linear-gradient(145deg, #a855f7, #6366f1 55%, #3b82f6);
}

/* The shared header paints the background, so the page sits on top of it. */
body { background: transparent !important; }
.page { background: transparent !important; }

/* ---------- Panels ---------- */
/* The 3D stage is deliberately left out of this: a backdrop filter makes
   the browser composite that layer differently and the WebGL character
   can stop drawing. */
.app-shell,
.workspace,
.skin-rail,
.inspector,
.editor-section,
.modal {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.app-shell, .workspace {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--panel);
  box-shadow: 0 32px 90px rgba(0, 0, 0, .42);
}
.skin-rail, .inspector, .editor-section {
  border-radius: 20px;
  background: rgba(7, 8, 11, .55);
}
.stage-pane { border-radius: 20px; }

/* ---------- Headings ---------- */
.app-shell h1, .app-shell h2, .modal h2 {
  font-family: Montserrat, Inter, sans-serif;
  letter-spacing: .02em;
}

/* ---------- Buttons ---------- */
button:not(.swatch):not(.hub-mobile-discord) {
  border-radius: 12px;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .18s ease;
}
button:not(.swatch):active { transform: scale(.97); }

.btn-primary,
.primary,
button.primary {
  border: 1px solid transparent !important;
  background: var(--nx-grad) !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 14px 34px rgba(99, 102, 241, .3);
}
.btn-primary:hover, .primary:hover, button.primary:hover { filter: brightness(1.08); }

.btn-ghost, .ghost, button.ghost, .btn-soft {
  border: 1px solid var(--line-strong) !important;
  background: rgba(255, 255, 255, .03) !important;
  color: #d4d4d8 !important;
}
.btn-ghost:hover, .ghost:hover, button.ghost:hover, .btn-soft:hover {
  border-color: rgba(96, 165, 250, .55) !important;
  background: rgba(59, 130, 246, .08) !important;
  color: #fff !important;
}

/* ---------- Inputs ---------- */
input[type="text"], input[type="number"], input[type="search"], select, textarea {
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  color: #fff;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="search"]:focus,
select:focus, textarea:focus {
  outline: none;
  border-color: rgba(96, 165, 250, .7);
  background: rgba(59, 130, 246, .05);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .14);
}

/* ---------- The skin library down the side ---------- */
.skin-card, .skin-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.skin-card:hover, .skin-item:hover {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, .45);
  background: rgba(59, 130, 246, .06);
}
.skin-card.is-active, .skin-item.is-active,
.skin-card[aria-current="true"], .skin-item[aria-current="true"] {
  border-color: rgba(168, 85, 247, .6);
  background: rgba(168, 85, 247, .1);
}

/* ---------- Drop target ---------- */
.dropzone, .drop-area, .upload-area, [data-dropzone] {
  border: 1px dashed rgba(96, 165, 250, .42);
  border-radius: 18px;
  background: rgba(59, 130, 246, .025);
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.dropzone:hover, .drop-area:hover, .upload-area:hover,
.dropzone.is-over, .drop-area.is-over, .upload-area.is-over, .is-dragover {
  border-color: rgba(96, 165, 250, .9);
  background: rgba(59, 130, 246, .07);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, .18), 0 18px 48px rgba(59, 130, 246, .14);
}

/* ---------- Tabs and segmented controls ---------- */
.tab.is-active, [role="tab"][aria-selected="true"], .seg button[aria-pressed="true"] {
  border-color: transparent;
  background: var(--nx-grad);
  color: #fff;
  box-shadow: 0 10px 26px rgba(99, 102, 241, .28);
}

/* ---------- Modals ---------- */
.modal-backdrop { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); background: rgba(3, 3, 6, .72); }
.modal {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(8, 8, 13, .95);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .6);
}

/* ---------- The pixel editor ---------- */
.editor-canvas-wrap, .editor-3d-panel {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(0, 0, 0, .35);
}
.swatch { border-radius: 8px; transition: transform .15s ease, box-shadow .15s ease; }
.swatch:hover { transform: scale(1.12); }
.swatch.is-active, .swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(168, 85, 247, .6); }

/* ---------- Scrollbars, to match the rest of the site ---------- */
.skin-rail::-webkit-scrollbar, .inspector::-webkit-scrollbar { width: 7px; }
.skin-rail::-webkit-scrollbar-thumb, .inspector::-webkit-scrollbar-thumb {
  border-radius: 10px; background: rgba(255, 255, 255, .12);
}

/* ---------- Phones ---------- */
@media (max-width: 720px) {
  .app-shell, .workspace { border-radius: 20px; }
  .skin-rail, .stage-pane, .inspector, .editor-section { border-radius: 16px; }
  /* Buttons need to be thumb-sized. */
  .app-shell button:not(.swatch) { min-height: 42px; }
}