/**
<<<<<<< HEAD
 * yourplaylist.css — YourPlaylist brand theme
 * Warm Black #252429 | Warm White #f4f5de | Poppin Purple #a670ff
 * Groovin Green #31a796 | Rockin Red #fc125a | Typeface: Poppins
 */
:root {
  --yp-black:      #252429;
  --yp-black-deep: #1a191e;
  --yp-black-card: #1e1d22;
  --yp-white:      #f4f5de;
  --yp-purple:     #a670ff;
  --yp-purple-dim: #c9a8ff;
  --yp-purple-bg:  rgba(166,112,255,0.12);
  --yp-purple-bg2: rgba(166,112,255,0.22);
  --yp-green:      #31a796;
  --yp-green-bg:   rgba(49,167,150,0.12);
  --yp-red:        #fc125a;
  --yp-red-bg:     rgba(252,18,90,0.12);
  --yp-border:     rgba(244,245,222,0.10);
  --yp-border2:    rgba(244,245,222,0.20);
  --yp-muted:      rgba(244,245,222,0.45);
  --yp-mid:        rgba(244,245,222,0.70);
  --yp-font:       'Poppins', Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; }
body {
  font-family: var(--yp-font) !important;
  background: var(--yp-black) !important;
=======
 * yourplaylist.css
 * YourPlaylist brand theme — all styles in one file for reliability.
 *
 * Brand Toolkit exact values:
 *   Warm Black    #252429
 *   Warm White    #f4f5de
 *   Poppin Purple #a670ff
 *   Groovin Green #31a796
 *   Rockin Red    #fc125a
 */

/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
  --yp-black:       #252429;
  --yp-black-deep:  #1a191e;
  --yp-black-card:  #1e1d22;
  --yp-white:       #f4f5de;
  --yp-purple:      #a670ff;
  --yp-purple-dim:  #c9a8ff;
  --yp-purple-bg:   rgba(166,112,255,0.12);
  --yp-purple-bg2:  rgba(166,112,255,0.22);
  --yp-green:       #31a796;
  --yp-green-bg:    rgba(49,167,150,0.12);
  --yp-red:         #fc125a;
  --yp-red-bg:      rgba(252,18,90,0.12);
  --yp-border:      rgba(244,245,222,0.10);
  --yp-border2:     rgba(244,245,222,0.20);
  --yp-muted:       rgba(244,245,222,0.45);
  --yp-mid:         rgba(244,245,222,0.70);
  --yp-font:        'Poppins', Arial, sans-serif;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Body ───────────────────────────────────────────────────────────────── */
body {
  font-family: var(--yp-font) !important;
  background-color: var(--yp-black) !important;
>>>>>>> 1a6a68ff667e75902a7afa6e138f31cfa4bf4a6d
  color: var(--yp-mid) !important;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
<<<<<<< HEAD
a { color: var(--yp-purple); text-decoration: none; }
a:hover { color: var(--yp-purple-dim); }
h1,h2,h3,h4,h5,h6 {
  font-family: var(--yp-font) !important;
  font-weight: 800; font-style: italic; color: var(--yp-white);
}

/* ── Header ─────────────────────────────────────────────────────────── */
header[role="banner"],
.layout-container > header {
  background: var(--yp-black-deep) !important;
  border-bottom: 1px solid var(--yp-border);
  min-height: 60px;
  padding: 0 28px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: nowrap;
}

/* Branding block — logo + site name */
.block-system-branding-block {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.block-system-branding-block .site-logo img {
  height: 40px;
  width: auto;
}
.block-system-branding-block .site-name a {
  font-family: var(--yp-font) !important;
  font-weight: 800;
  font-style: italic;
  font-size: 16px;
  color: var(--yp-white) !important;
  white-space: nowrap;
}

/* Page title block — hide from header */
.region-header .block-page-title-block { display: none; }

/* ── Navigation ─────────────────────────────────────────────────────── */
.block-menu,
.block--menu {
  display: flex;
  align-items: center;
}
nav ul, .block-menu ul, .menu {
=======

/* ── Links ──────────────────────────────────────────────────────────────── */
a { color: var(--yp-purple); text-decoration: none; }
a:hover { color: var(--yp-purple-dim); }

/* ── Headings ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--yp-font) !important;
  font-weight: 800;
  font-style: italic;
  color: var(--yp-white);
}

/* ── Layout wrapper ─────────────────────────────────────────────────────── */
.layout-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--yp-black);
}

/* ── Header / topbar ────────────────────────────────────────────────────── */
.layout-container > header,
header[role="banner"] {
  background: var(--yp-black-deep) !important;
  border-bottom: 1px solid var(--yp-border);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  flex-shrink: 0;
}

/* Site logo */
.site-logo img { height: 40px; width: auto; }

/* Site branding block */
.block-system-branding-block {
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-name a {
  font-family: var(--yp-font) !important;
  font-weight: 800;
  font-style: italic;
  font-size: 18px;
  color: var(--yp-white) !important;
  text-decoration: none;
}

/* ── Navigation menus ───────────────────────────────────────────────────── */
nav[role="navigation"] ul,
.block-menu ul,
.region-primary-menu ul {
>>>>>>> 1a6a68ff667e75902a7afa6e138f31cfa4bf4a6d
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
<<<<<<< HEAD
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}
nav ul li a, .block-menu ul li a, .menu li a {
  display: block;
  padding: 8px 12px;
=======
  gap: 4px;
}
nav[role="navigation"] ul li a,
.block-menu ul li a,
.region-primary-menu ul li a {
  display: block;
  padding: 8px 14px;
>>>>>>> 1a6a68ff667e75902a7afa6e138f31cfa4bf4a6d
  font-family: var(--yp-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--yp-muted);
  border-radius: 6px;
  transition: all 0.12s;
<<<<<<< HEAD
  white-space: nowrap;
}
nav ul li a:hover, .block-menu ul li a:hover {
  color: var(--yp-white);
  background: rgba(244,245,222,0.06);
}
nav ul li.is-active > a,
nav ul li a.is-active,
.menu-item--active-trail > a {
=======
  text-decoration: none;
}
nav[role="navigation"] ul li a:hover,
.block-menu ul li a:hover,
.region-primary-menu ul li a:hover {
  color: var(--yp-white);
  background: rgba(244,245,222,0.06);
}
nav[role="navigation"] ul li.is-active > a,
nav[role="navigation"] ul li a.is-active,
.block-menu ul li.is-active > a {
>>>>>>> 1a6a68ff667e75902a7afa6e138f31cfa4bf4a6d
  color: var(--yp-purple);
  background: var(--yp-purple-bg);
}

<<<<<<< HEAD
/* ── Main content ────────────────────────────────────────────────────── */
main[role="main"],
.layout-main-wrapper,
.layout-container > main {
  padding: 32px 40px;
  min-height: 70vh;
}
=======
/* ── User account links ─────────────────────────────────────────────────── */
.block-system-menu-block--account ul {
  display: flex;
  align-items: center;
  gap: 8px;
}
.block-system-menu-block--account ul li a {
  font-family: var(--yp-font);
  font-size: 12px;
  font-weight: 600;
  color: var(--yp-muted);
  padding: 6px 12px;
  border: 1px solid var(--yp-border2);
  border-radius: 6px;
  transition: all 0.12s;
}
.block-system-menu-block--account ul li a:hover {
  color: var(--yp-white);
  border-color: var(--yp-purple);
}

/* ── Main content area ──────────────────────────────────────────────────── */
.layout-container > main,
main[role="main"],
.layout-main-wrapper {
  flex: 1;
  padding: 32px 40px;
  background: var(--yp-black);
  color: var(--yp-mid);
}

/* ── Content region ─────────────────────────────────────────────────────── */
.region-content { max-width: 1200px; }

/* ── Page title ─────────────────────────────────────────────────────────── */
>>>>>>> 1a6a68ff667e75902a7afa6e138f31cfa4bf4a6d
.page-title,
h1.page-title,
.block-page-title-block h1 {
  font-family: var(--yp-font) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  font-style: italic !important;
  color: var(--yp-white) !important;
<<<<<<< HEAD
  margin-bottom: 8px !important;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
footer[role="contentinfo"],
=======
  margin-bottom: 4px !important;
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.layout-sidebar-first,
.region-sidebar-first {
  width: 200px;
  flex-shrink: 0;
  background: var(--yp-black-card);
  border-right: 1px solid var(--yp-border);
  padding: 16px 0;
}

/* When sidebar is present, main + sidebar sit side by side */
.layout-container .layout-main-wrapper {
  display: flex;
  flex: 1;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.yp-card {
  background: var(--yp-black-card);
  border: 1px solid var(--yp-border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.yp-btn,
.button,
input[type="submit"],
button[type="submit"] {
  font-family: var(--yp-font) !important;
  font-weight: 600;
  font-size: 12px;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--yp-border2);
  background: rgba(244,245,222,0.06);
  color: var(--yp-mid);
  cursor: pointer;
  transition: all 0.12s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.yp-btn:hover, .button:hover,
input[type="submit"]:hover, button[type="submit"]:hover {
  background: rgba(244,245,222,0.10);
  color: var(--yp-white);
}
.yp-btn--purple, .button--primary,
input[type="submit"].button--primary {
  background: var(--yp-purple) !important;
  color: #fff !important;
  border-color: var(--yp-purple) !important;
}
.yp-btn--purple:hover, .button--primary:hover {
  background: #b888ff !important;
}

/* ── Form elements ──────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
select,
textarea {
  font-family: var(--yp-font) !important;
  background: #17161b !important;
  border: 1px solid var(--yp-border2) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  color: var(--yp-white) !important;
  outline: none !important;
  width: 100%;
  transition: border-color 0.15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--yp-purple) !important;
}
select option { background: #252429; color: var(--yp-white); }

label {
  font-family: var(--yp-font);
  font-size: 11px;
  font-weight: 700;
  color: var(--yp-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 4px;
}

fieldset {
  border: 1px solid var(--yp-border);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
  background: var(--yp-black-card);
}
legend {
  font-family: var(--yp-font);
  font-size: 11px;
  font-weight: 700;
  color: var(--yp-purple);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0 8px;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--yp-font);
  font-size: 12px;
}
thead th {
  padding: 8px 12px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  color: var(--yp-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--yp-border);
  background: transparent;
}
tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(244,245,222,0.05);
  color: var(--yp-mid);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(244,245,222,0.02); }

/* ── Badges / status ────────────────────────────────────────────────────── */
.yp-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--yp-font);
}
.yp-badge--green  { background: var(--yp-green-bg);  color: var(--yp-green); }
.yp-badge--purple { background: var(--yp-purple-bg); color: var(--yp-purple-dim); }
.yp-badge--red    { background: var(--yp-red-bg);    color: var(--yp-red); }
.yp-badge--amber  { background: rgba(245,166,35,0.12); color: #f5a623; }
.yp-badge--gray   { background: rgba(244,245,222,0.08); color: var(--yp-muted); }

/* ── Messages ───────────────────────────────────────────────────────────── */
.messages--status,
.messages--warning,
.messages--error {
  font-family: var(--yp-font);
  font-size: 13px;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  border: 1px solid;
}
.messages--status  { background: var(--yp-green-bg);  border-color: var(--yp-green);  color: var(--yp-green); }
.messages--warning { background: rgba(245,166,35,0.10); border-color: #f5a623; color: #f5a623; }
.messages--error   { background: var(--yp-red-bg);    border-color: var(--yp-red);    color: var(--yp-red); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer,
>>>>>>> 1a6a68ff667e75902a7afa6e138f31cfa4bf4a6d
.layout-container > footer {
  background: var(--yp-black-deep) !important;
  border-top: 1px solid var(--yp-border);
  padding: 16px 40px;
  font-family: var(--yp-font);
  font-size: 11px;
  color: var(--yp-muted);
  text-align: center;
}

<<<<<<< HEAD
/* ── Buttons ─────────────────────────────────────────────────────────── */
.button, input[type="submit"], button[type="submit"] {
  font-family: var(--yp-font) !important;
  font-weight: 600; font-size: 12px;
  padding: 8px 16px; border-radius: 6px;
  border: 1px solid var(--yp-border2);
  background: rgba(244,245,222,0.06);
  color: var(--yp-mid) !important;
  cursor: pointer; transition: all 0.12s;
}
.button:hover { background: rgba(244,245,222,0.10); color: var(--yp-white) !important; }
.button--primary { background: var(--yp-purple) !important; color: #fff !important; border-color: var(--yp-purple) !important; }
.button--primary:hover { background: #b888ff !important; }

/* ── Forms ────────────────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"],
input[type="password"], select, textarea {
  font-family: var(--yp-font) !important;
  background: #17161b !important;
  border: 1px solid var(--yp-border2) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  color: var(--yp-white) !important;
  width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--yp-purple) !important; outline: none !important; }
label { font-family: var(--yp-font); font-size: 11px; font-weight: 700; color: var(--yp-muted); text-transform: uppercase; letter-spacing: 0.08em; display: block; margin-bottom: 4px; }
fieldset { border: 1px solid var(--yp-border); border-radius: 10px; padding: 16px 20px; margin-bottom: 16px; background: var(--yp-black-card); }
legend { font-family: var(--yp-font); font-size: 11px; font-weight: 700; color: var(--yp-purple); text-transform: uppercase; padding: 0 8px; }

/* ── Tables ────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-family: var(--yp-font); font-size: 12px; }
thead th { padding: 8px 12px; text-align: left; font-size: 10px; font-weight: 700; color: var(--yp-muted); text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1px solid var(--yp-border); }
tbody td { padding: 10px 12px; border-bottom: 1px solid rgba(244,245,222,0.05); color: var(--yp-mid); }
tbody tr:last-child td { border-bottom: none; }

/* ── Messages ─────────────────────────────────────────────────────────── */
.messages--status  { background: var(--yp-green-bg) !important; border-color: var(--yp-green) !important; color: var(--yp-green) !important; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.messages--warning { background: rgba(245,166,35,0.10) !important; border-color: #f5a623 !important; color: #f5a623 !important; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.messages--error   { background: var(--yp-red-bg) !important; border-color: var(--yp-red) !important; color: var(--yp-red) !important; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }

/* ── Cards / YP components ─────────────────────────────────────────────── */
.yp-card { background: var(--yp-black-card); border: 1px solid var(--yp-border); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.yp-badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10px; font-weight: 700; }
.yp-badge--green  { background: var(--yp-green-bg);  color: var(--yp-green); }
.yp-badge--purple { background: var(--yp-purple-bg); color: var(--yp-purple-dim); }
.yp-badge--red    { background: var(--yp-red-bg);    color: var(--yp-red); }
.yp-badge--amber  { background: rgba(245,166,35,0.12); color: #f5a623; }
.yp-badge--gray   { background: rgba(244,245,222,0.08); color: var(--yp-muted); }

/* ── Scrollbar ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--yp-black-deep); }
::-webkit-scrollbar-thumb { background: rgba(244,245,222,0.15); border-radius: 3px; }
:focus-visible { outline: 2px solid var(--yp-purple); outline-offset: 2px; }

/* Header children — force horizontal layout */
header[role="banner"] > div,
header[role="banner"] > nav {
  display: flex !important;
  align-items: center;
}
header[role="banner"] > div:first-child { flex-shrink: 0; }
header[role="banner"] > nav { flex: 1; }
header[role="banner"] > div:last-child { flex-shrink: 0; margin-left: auto; }
header[role="banner"] ul { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 2px; padding: 0; margin: 0; list-style: none; }

/* Logo sizing */
header[role="banner"] .site-logo,
header[role="banner"] img { height:42px; width:auto; display:block; }

/* Push nav away from logo */
header[role="banner"] > div:first-child { min-width:180px; }

/* Account menu in secondary region */
.region-secondary-menu ul { display:flex; align-items:center; gap:4px; }
.region-secondary-menu ul li a {
  padding:6px 12px; border:1px solid var(--yp-border2);
  border-radius:6px; font-size:12px; font-weight:600;
  color:var(--yp-muted); transition:all 0.12s;
}
.region-secondary-menu ul li a:hover { color:var(--yp-white); border-color:var(--yp-purple); }

/* Fix logo size */
.site-logo img,
header[role="banner"] img {
  height: 40px !important;
  width: auto !important;
  max-height: 40px !important;
}

/* Force logo to header height */
header[role="banner"] .site-logo img,
header[role="banner"] a img,
.block-system-branding-block img {
  height: 36px !important;
  width: auto !important;
  max-width: 200px !important;
  display: block !important;
}

/* Hide breadcrumb on front page */
.path-frontpage .region-breadcrumb { display: none; }

/* Login / account links styled as button */
.block--menu--account ul {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.block--menu--account ul li a {
  padding: 7px 16px;
  border: 1px solid var(--yp-purple);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--yp-purple);
  transition: all 0.12s;
  white-space: nowrap;
}
.block--menu--account ul li a:hover {
  background: var(--yp-purple);
  color: #fff;
}

/* ── Login page ──────────────────────────────────────────────────── */
.path-user-login main,
.path-user-login #main-content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 32px 20px;
}
.path-user-login .block-system-main-block,
.path-user-login form {
  width: 100%;
  max-width: 400px;
}
.path-user-login h1.page-title {
  text-align: center;
  margin-bottom: 28px;
}
.path-user-login .form-item {
  margin-bottom: 16px;
}
.path-user-login input[type="text"],
.path-user-login input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  background: #17161b;
  border: 1px solid var(--yp-border2);
  border-radius: 8px;
  color: var(--yp-white);
  font-size: 14px;
  font-family: var(--yp-font);
}
.path-user-login input[type="text"]:focus,
.path-user-login input[type="password"]:focus {
  border-color: var(--yp-purple);
  outline: none;
}
.path-user-login .form-actions {
  margin-top: 20px;
}
.path-user-login input[type="submit"] {
  width: 100%;
  padding: 12px;
  background: var(--yp-purple);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--yp-font);
  cursor: pointer;
  transition: background 0.15s;
}
.path-user-login input[type="submit"]:hover {
  background: #b888ff;
}
/* Wrap in a card */
.path-user-login .block-system-main-block {
  background: var(--yp-black-card);
  border: 1px solid var(--yp-border);
  border-radius: 14px;
  padding: 36px 32px;
}
/* Hide breadcrumb on login */
.path-user-login .region-breadcrumb { display: none; }

/* ── Account menu (top right) ───────────────────────────────────── */
.yp-account-menu ul,
.region-secondary-menu ul {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.yp-account-menu ul li a,
.region-secondary-menu ul li a {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--yp-font);
  color: var(--yp-muted);
  border: 1px solid var(--yp-border2);
  transition: all 0.12s;
  white-space: nowrap;
  text-decoration: none;
}
.yp-account-menu ul li a:hover,
.region-secondary-menu ul li a:hover {
  color: var(--yp-white);
  border-color: var(--yp-purple);
  background: var(--yp-purple-bg);
}
/* Style logout as a filled button */
.yp-account-menu ul li a[href*="logout"],
.region-secondary-menu ul li a[href*="logout"] {
  background: var(--yp-purple);
  border-color: var(--yp-purple);
  color: #fff;
}
.yp-account-menu ul li a[href*="logout"]:hover,
.region-secondary-menu ul li a[href*="logout"]:hover {
  background: #b888ff;
}
=======
/* ── Scrollbar styling ──────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--yp-black-deep); }
::-webkit-scrollbar-thumb { background: rgba(244,245,222,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(244,245,222,0.25); }

/* ── Focus rings ────────────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--yp-purple); outline-offset: 2px; }
>>>>>>> 1a6a68ff667e75902a7afa6e138f31cfa4bf4a6d

/* Hide contextual admin links */
.contextual { display: none !important; }

/* Create/edit company form — constrain width */
.path-portal-company-create main > .block-system-main-block,
.path-portal-company-edit main > .block-system-main-block,
form#company-details-form {
  max-width: 700px;
}

/* ── Customer list action buttons ── */
td a + a {
  margin-left: 8px !important;
}

/* ── Provisioning wizard step indicator ─────────────────────────────────── */
.yp-wizard-steps { display:flex;align-items:center;gap:4px;margin-bottom:32px;background:rgba(244,245,222,0.04);border:1px solid rgba(244,245,222,0.1);border-radius:12px;padding:5px }
.yp-wizard-step { display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:8px;flex:1;justify-content:center;border:1px solid transparent;transition:all 0.15s }
.yp-wizard-step--done { background:rgba(49,167,150,0.15);border-color:rgba(49,167,150,0.2) }
.yp-wizard-step--active { background:#a670ff;border-color:rgba(166,112,255,0.4) }
.yp-wizard-step__num { width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;background:rgba(244,245,222,0.08);color:rgba(244,245,222,0.35) }
.yp-wizard-step--done .yp-wizard-step__num { background:rgba(49,167,150,0.4);color:#31a796 }
.yp-wizard-step--active .yp-wizard-step__num { background:rgba(255,255,255,0.2);color:#fff }
.yp-wizard-step__label { font-size:11px;font-weight:500;color:rgba(244,245,222,0.35);font-family:Poppins,sans-serif;white-space:nowrap }
.yp-wizard-step--done .yp-wizard-step__label { color:#31a796 }
.yp-wizard-step--active .yp-wizard-step__label { color:#fff;font-weight:700 }

/* ── Provisioning wizard tier cards ─────────────────────────────────────── */
.yp-tier-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:16px }
.yp-tier-card { cursor:pointer;display:block }
.yp-tier-card input[type=radio] { position:absolute;opacity:0;pointer-events:none }
.yp-tier-card__inner { border:1px solid rgba(244,245,222,0.1);border-radius:12px;padding:20px;background:var(--yp-black-card);transition:all 0.15s }
.yp-tier-card input:checked ~ .yp-tier-card__inner,
.yp-tier-card__inner--selected { border:2px solid #a670ff !important;background:rgba(166,112,255,0.08) !important }
.yp-tier-card__name { font-size:16px;font-weight:700;color:#f4f5de;font-family:Poppins,sans-serif;margin-bottom:4px }
.yp-tier-card__price { font-size:22px;font-weight:800;color:#a670ff;font-family:Poppins,sans-serif;margin-bottom:8px }
.yp-tier-card__price span { font-size:12px;font-weight:400;color:rgba(244,245,222,0.45) }
.yp-tier-card__zones { font-size:11px;color:rgba(244,245,222,0.45);margin-bottom:12px;font-family:Poppins,sans-serif }
.yp-tier-card__feature { font-size:11px;color:rgba(244,245,222,0.6);padding:2px 0;font-family:Poppins,sans-serif }
.yp-tier-card__selected { margin-top:12px;font-size:11px;font-weight:700;color:#a670ff;font-family:Poppins,sans-serif }

/* ── Subscription suspend/unsuspend buttons ─────────────────────────────── */
.yp-btn-suspend { display:inline-flex;align-items:center;padding:7px 14px;background:rgba(252,18,90,0.12);border:1px solid rgba(252,18,90,0.3);border-radius:6px;font-size:11px;font-weight:600;color:#fc125a;text-decoration:none;font-family:Poppins,sans-serif }
.yp-btn-suspend:hover { background:rgba(252,18,90,0.22) }
.yp-btn-unsuspend { display:inline-flex;align-items:center;padding:7px 14px;background:rgba(49,167,150,0.12);border:1px solid rgba(49,167,150,0.3);border-radius:6px;font-size:11px;font-weight:600;color:#31a796;text-decoration:none;font-family:Poppins,sans-serif }
.yp-btn-unsuspend:hover { background:rgba(49,167,150,0.22) }

/* ── Reseller Stripe Settings — readable text on dark background ── */
.ypl-billing-reseller-stripe-settings,
.ypl-billing-reseller-stripe-settings p,
.ypl-billing-reseller-stripe-settings strong,
.ypl-billing-reseller-stripe-settings small,
.ypl-billing-reseller-stripe-settings code,
.ypl-billing-reseller-stripe-settings label,
.ypl-billing-reseller-stripe-settings legend,
.ypl-billing-reseller-stripe-settings .description,
.ypl-billing-reseller-stripe-settings .form-item,
.ypl-billing-reseller-stripe-settings .fieldset-legend,
form#ypl-billing-reseller-stripe-settings,
form#ypl-billing-reseller-stripe-settings *,
form#ypl-billing-reseller-stripe-settings label,
form#ypl-billing-reseller-stripe-settings legend,
form#ypl-billing-reseller-stripe-settings .description,
form#ypl-billing-reseller-stripe-settings .fieldset-legend {
  color: var(--yp-white) !important;
}
form#ypl-billing-reseller-stripe-settings .description,
.ypl-billing-reseller-stripe-settings small {
  color: var(--yp-muted) !important;
}
form#ypl-billing-reseller-stripe-settings code,
.ypl-billing-reseller-stripe-settings code {
  color: var(--yp-purple) !important;
  background: var(--yp-black-deep);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Playlist track artwork thumbnails */
img.yp-track-art,
span.yp-track-art-placeholder {
  width: 75px !important;
  height: 75px !important;
  border-radius: 4px;
  display: block;
  object-fit: cover;
}
span.yp-track-art-placeholder {
  background: var(--yp-border);
}