:root{
  --bg:#0f1724; --card:#0b1220; --accent:#7c5cff; --muted:#98a0b3; --glass: rgba(255,255,255,0.03);
  --success:#2dd4bf; --danger:#ff6b6b; --card-radius:14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:linear-gradient(180deg,var(--bg),#041024);color:#e6eef8;padding:28px}
header{display:flex;gap:16px;align-items:center;max-width:none;margin:0 0 18px 0;padding-left:28px}
.logo{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#00d4ff);display:grid;place-items:center;font-weight:700;color:#022;box-shadow:0 6px 30px rgba(0,0,0,0.6)}
h1{margin:0;font-size:20px}
p.lead{margin:0;color:var(--muted);font-size:13px}

/* New header / nav / site layout styles for index redesign */
.site-header{margin:0 0 18px 0}
.site-header .wrap{max-width:1200px;margin:0 auto;padding:8px 20px}
.site-header h1{margin:0;font-size:20px}
.site-header p.lead{margin:0;color:var(--muted);font-size:13px}

nav a.ghost{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:8px;border:1px solid transparent}
nav a.ghost:hover{background:rgba(255,255,255,0.02);color:#fff;border-color:rgba(255,255,255,0.03)}

.site-main{max-width:1200px;margin:0 auto;padding:8px 20px}

/* Ensure when .wrap is used together with .site-main (pages like profile)
   the layout is centered and constrained to a reasonable max-width.
   This overrides the generic .wrap width/margin for the main content area only. */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  justify-content: center; /* center tracks so the whole grid appears centered */
  margin: 0 auto;
  width: 100%;
}

/* Target only the profile page main container so index.html and other pages
   using .wrap are not affected. */
#profileMain{
  width: auto;
  max-width: 1200px;
  margin: 0 auto;
}

/* Header user menu (top-right profile avatar + dropdown) */
.top-profile{position:relative;display:inline-flex;align-items:center;gap:8px}
.profile-avatar{width:40px;height:40px;border-radius:999px;overflow:hidden;display:inline-block;cursor:pointer;border:2px solid rgba(255,255,255,0.04);background:linear-gradient(135deg,var(--accent),#00d4ff);display:grid;place-items:center;color:#022;font-weight:700}
.profile-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.profile-menu{position:absolute;right:0;top:calc(100% + 8px);background:rgba(18,22,28,0.98);border:1px solid rgba(255,255,255,0.03);border-radius:8px;padding:8px;box-shadow:0 8px 30px rgba(0,0,0,0.5);min-width:160px;display:none;z-index:120}
.profile-menu.show{display:block}
.profile-menu a, .profile-menu button{display:block;padding:8px 10px;border-radius:6px;color:inherit;text-decoration:none;background:transparent;border:0;text-align:left;width:100%}
.profile-menu a:hover, .profile-menu button:hover{background:rgba(255,255,255,0.02)}


/* layout */
.wrap{max-width:none;margin:0;display:grid;grid-template-columns:360px 1fr;gap:18px;width:50vw;min-width:320px}

.panel{background:rgba(18,22,28,0.92);padding:20px;border-radius:var(--card-radius);box-shadow:0 10px 40px rgba(3,6,18,0.6)}
form.row{display:flex;flex-direction:column;gap:12px}

#previewContainer {
  margin-top: 8px;
  padding: 10px 0 0 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#previewContainer .player {
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 10px;
  margin: 0;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

#previewContainer .player-progress-wrap {
  width: 100%;
}

#previewContainer .player-vol input[type=range] {
  width: 100%;
  max-width: 120px;
}
label{font-size:13px;color:var(--muted)}
input[type=text], input[type=number]{width:100%;padding:12px;border-radius:12px;border:0;background:var(--glass);color:inherit;outline:2px solid transparent}
/* Prevent search input from collapsing when other controls appear nearby */
.search-input{flex:1;min-width:220px;padding:8px;border-radius:8px;border:1px solid #222;background:#181e2a;color:#e6eef8}
.controls{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
button{border:0;padding:11px 14px;border-radius:10px;background:linear-gradient(180deg,var(--accent),#5ea2ff);color:#022;font-weight:600;cursor:pointer;min-width:96px}
button.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted)}
.small{padding:8px 10px;font-size:13px}
.small + .small { margin-left: 12px; }

/* list + items */
.list{display:grid;gap:12px}
.item{display:flex;gap:16px;align-items:center;padding:16px;border-radius:12px;background:rgba(18,22,28,0.92);border:1px solid rgba(255,255,255,0.02);min-height:72px}
.meta{flex:1;min-width:0}
.title{font-weight:700;margin:0;font-size:15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}
/* Ensure title anchors don't use browser default link colors (blue/purple) */
a.title, a.title:link, a.title:visited, a.title:hover, a.title:active {
  color: inherit;
  text-decoration: none;
}
.subtitle{font-size:13px;color:var(--muted);margin-top:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}
.actions{display:flex;gap:12px;align-items:center}

/* When an item has an active inline player, hide only ghost-style external controls to avoid duplication. 
   Keep other action buttons (e.g., Copy ID) visible. */
.item.player-active .actions > .small.ghost {
  /* visually hide ghost-style external controls that are direct children of
     the actions container (external controls) when a player is active.
     Keep player-internal controls (inside .player) visible. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

/* Explicitly keep player-internal controls visible even when the item is marked
   as player-active. This prevents the -10/+10 buttons (which are 'small ghost'
   inside .player) from becoming invisible. */
.item.player-active .player .small.ghost {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Custom audio player styles (global defaults) */
.player{display:flex;align-items:center;gap:20px;background:rgba(255,255,255,0.02);padding:10px;border-radius:12px;backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.02)}
.player-play{min-width:110px;padding:10px 12px;border-radius:10px}

/* Ensure the main play button retains its original sizing even though .player .small is compact */
.player .player-play { min-width:110px; padding:10px 12px; font-size:14px; }
.player-progress-wrap{flex:1;display:flex;align-items:center;gap:12px}
.player-progress{height:10px;background:rgba(255,255,255,0.03);border-radius:8px;position:relative;flex:1;cursor:pointer;overflow:hidden}
.player-progress-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--accent),#00d4ff);border-radius:8px;transition:width 180ms ease}
.player-time{font-size:13px;color:var(--muted);min-width:72px;text-align:center}
.player-vol input[type=range]{width:96px}

/* Transport grouping (keeps back/play/forward together) */
.player-controls{display:flex;justify-content:flex-start;align-items:center;gap:10px}

/* Slightly more compact back/forward buttons inside the inline player */
.player .small {
  padding:6px 8px;
  min-width:64px;
  font-size:13px;
}

/* Give titles a bit more horizontal room by allowing actions to wrap on small screens */
.item .actions{flex-shrink:0}

/* Make absolutely sure the primary play button keeps its intended size (override compact small rule) */
.player button.player-play,
.player .player-play {
  min-width:110px !important;
  padding:10px 12px !important;
  font-size:14px !important;
}

/* status badges */
.status{font-size:12px;padding:6px 10px;border-radius:999px;min-width:100px;text-align:center}
.ok{background:rgba(45,212,191,0.08);color:var(--success);border:1px solid rgba(45,212,191,0.08)}
.bad{background:rgba(255,107,107,0.08);color:var(--danger);border:1px solid rgba(255,107,107,0.06)}
.game-specific{background:rgba(255,165,0,0.08);color:#ff9f1c;border:1px solid rgba(255,165,0,0.06)}

.copy-id{min-width:100px}
.muted-note{color:var(--muted);font-size:13px;margin-top:12px}

/* Auth card styling */
.card{background:rgba(18,22,28,0.92);padding:20px;border-radius:16px;box-shadow:0 8px 40px rgba(3,6,18,0.6);max-width:480px;margin:24px auto;color:inherit}
.card h2{margin:0 0 6px 0}
.card .lead{color:var(--muted);margin-bottom:12px}
.card input[type=text], .card input[type=password], .card input[type=email], .card textarea{width:100%;padding:12px;border-radius:10px;border:0;background:var(--glass);color:inherit;outline:2px solid transparent}
.card label{font-weight:600}
.card button{min-width:120px}
.auth-actions{display:flex;gap:12px;align-items:center;margin-top:12px}

/* Minor tweak to make panels take full width on small screens */
@media (max-width:1100px){
  .wrap{width:92vw}
}

footer{max-width:none;margin:18px 0 0 0;padding-left:28px;color:var(--muted);font-size:13px}

/* small screen tweaks */
@media (max-width:900px){
  .wrap{grid-template-columns:1fr}
  .item{flex-direction:column;align-items:stretch;gap:12px}
  /* Keep player controls horizontal on small screens: back | play | forward */
  .player{flex-direction:column;align-items:stretch;gap:10px}
  .player-play{min-width:90px;width:auto}
  .player-controls{display:flex;justify-content:center;align-items:center;gap:8px}
  .player-progress-wrap{flex-basis:100%;flex-grow:1;min-width:140px;margin-top:6px}
  .player-time{text-align:right;min-width:60px}
}

/* handy micro-interactions */
.item:hover{transform:translateY(-4px);transition:transform 180ms ease}
button, .player-play, .item{transition:all 160ms ease}

/* Tag component styles */
.tags-root{display:block}
.tags-token-wrap{display:flex;flex-wrap:wrap;gap:8px;padding:8px;border-radius:8px;background:var(--glass)}
.tags-input{border:0;background:transparent;color:inherit;min-width:120px;padding:6px;outline:0}
.tag-token{background:rgba(255,255,255,0.03);padding:6px 8px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;justify-content:center;max-width:220px}
.tag-token .tag-text{display:inline-block;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.tag-remove{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:0 6px;margin-left:4px}
.tags-drop{position:relative;border:1px solid rgba(255,255,255,0.02);margin-top:6px;border-radius:8px;background:rgba(0,0,0,0.25);max-height:160px;overflow:auto}
.tags-drop.hidden{display:none}
.tags-checklist .tags-row{padding:8px;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,0.02)}
.tags-presets{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.muted{padding:8px;color:var(--muted)}

/* developer notes:
 - tweak --card-radius and padding values to change 'airy' feeling across the app
 - increase .item min-height or .player gap for even more breathing room
*/