@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap');

:root {
  --color0: #ffffff;
  --color1: #5c2d82;
  --color2: #7b4a9e;
  --color3: #3d1a5c;
  --color4: #e91e63;
  --color5: #ff6b35;
  --color6: #222222;
  --color7: #666666;
  --color8: #999999;
  --color9: #ffffff;
  --color10: #f5f5f5;
  --color11: #2d2d2d;
  --color12: #e0e0e0;
  --color13: #eeeeee;
  --color14: #4caf50;
  --color15: #ff9800;
  --color16: #f44336;
  --color17: #cccccc;

  --radiusS: 4px;
  --radiusM: 8px;
  --radiusL: 12px;
  --radiusXL: 24px;
  --radiusF: 50%;

  --shadowS: 0 -8px 25px rgba(0,0,0,0.1)
  --shadowM: 0 4px 12px rgba(0,0,0,0.15);
  --shadowL: 0 8px 24px rgba(0,0,0,0.2);
  --shadowBlur: 0 0 24px rgba(0,0,0,0.1); 

  --tranF: 0.2s ease;
  --tranM: 0.3s ease;
  --tranS: 0.4s ease;
}

[data-theme="dark"] {
  --color0: #ffffff;
  --color1: #9b6dcc;
  --color2: #b794d6;
  --color3: #7c4daf;
  --color4: #f06292;
  --color5: #ff8a65;
  --color6: #e8e8e8;
  --color7: #b0b0b0;
  --color8: #808080;
  --color9: #1a1a1a;
  --color10: #252525;
  --color11: #121212;
  --color12: #3a3a3a;
  --color13: #2d2d2d;
  --color17: #444444;


  --shadowS: 0 1px 3px rgba(0,0,0,0.3);
  --shadowM: 0 4px 12px rgba(0,0,0,0.4);
  --shadowL: 0 8px 24px rgba(0,0,0,0.5);
}

[data-theme="dark"] a:hover { color: var(--color2); }
[data-theme="dark"] .btn { color: #fff; }
[data-theme="dark"] .btn:hover { color: #fff; }

html, body, div, p, span, h1, h2, h3, h4, h5, h6, img, ul, ol, dl, li, dt, dd, blockquote, pre, form, fieldset, label, input, table, th, td, a, figure, figcaption, header, footer, main, section, article, aside, nav, time { margin: 0; padding: 0; border: 0; vertical-align: baseline; line-height: 1.5; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--color9); color: var(--color6); font-family: 'Inter', Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.5; min-height: 100vh; }
ul, ol { list-style: none; }
a { color: var(--color1); text-decoration: none; transition: color var(--tranF); }
a:hover { color: var(--color3); text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.3; color: var(--color6); }
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
p { margin: 0 0 15px; }
strong, b { font-weight: 700; }

section {clear: both; float: none; display: block; margin: 0 0 60px 0;}


.wrap { width: calc(100% - 40px); max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; }
.pageBody { min-height: calc(100vh - 60px); padding: 100px 0 60px; }
.after::after { content: ""; display: block; clear: both; }

header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: transform var(--tranM); }
header.hidden { transform: translateY(-100%); }
nav.topMenu { background: var(--color3); height: 60px; box-shadow: var(--shadowM); }
nav.topMenu .wrap { height: 100%; }
#logo { display: block; float: left; height: 42px; padding: 9px 0; }
#logo img { height: 40px; width: auto; display: block;}
#mainNav { float: left; margin: 0 0 0 40px; text-align: center; width: calc(100% - 270px);}
#mainNav li { display: inline-block; }
#mainNav li a { display: block; padding: 0 20px; color: var(--color0); font-weight: 500; line-height: 60px; transition: background var(--tranF); }
#mainNav li a:hover {  background: var(--color1); text-decoration: none; }
#mainNav li.active a { background: var(--color1); }
#userNav { float: right; padding: 12px 0; }
#userNav .iconBtn { display: inline-block; width: 36px; height: 36px; line-height: 36px; opacity: 0.8; text-align: center; color: var(--color0); background: transparent; border: none; border-radius: var(--radiusF); margin: 0 0 0 5px; padding: 0; cursor: pointer; transition: background var(--tranF); }
#userNav .iconBtn:hover, #userNav .iconBtn:active { text-decoration: none; opacity: 1;}
#userNav .iconBtn .material-symbols-outlined { font-size: 22px; line-height: 36px; }
.menuToggle { position: absolute;  right: 10px; display: none; float: right; width: 44px; height: 44px; margin: 8px 0; padding: 0; background: transparent; border: none; color: var(--color0); cursor: pointer; border-radius: var(--radiusM); }
.menuToggle:hover { background: var(--color1); }
.menuToggle .material-symbols-outlined { font-size: 28px; line-height: 44px;  color: var(--color0);}

footer { background: var(--color11); padding: 30px 0; color: var(--color9); }
footer .wrap { display: block; }
#footerCredits { float: left; font-size: 14px; color: var(--color8); }
#footerNav { float: right; }
#footerNav a { color: var(--color8); font-size: 14px; margin: 0 0 0 25px; }
#footerNav a:hover { color: var(--color9); text-decoration: none; }

.btn { display: inline-block; padding: 10px 20px; background: var(--color1); color: var(--color9); font-family: 'Inter', Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; text-decoration: none; border: 1px solid var(--color1); border-radius: var(--radiusXL); cursor: pointer; transition: background var(--tranF), border-color var(--tranF); }
.btn:hover { background: var(--color3); border-color: var(--color3); color: var(--color9); text-decoration: none; }
.btnSecondary { background: var(--color4); border-color: var(--color4); }
.btnSecondary:hover { background: #c2185b; border-color: #c2185b; }
.btnOutline { background: transparent; border: 1px solid var(--color1); color: var(--color1); }
.btnOutline:hover { background: var(--color1); border-color: var(--color1); color: var(--color9); }
.btnSm { padding: 6px 12px; font-size: 12px; }
.btnLg { padding: 14px 28px; font-size: 16px; }
.btnDisabled { opacity: 0.4; cursor: not-allowed; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], textarea, select { width: 100%; padding: 12px 16px; background: var(--color9); border: 1px solid var(--color12); border-radius: var(--radiusM); font-family: 'Inter', Arial, Helvetica, sans-serif; font-size: 15px; color: var(--color6); transition: border-color var(--tranF), box-shadow var(--tranF); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color1); box-shadow: 0 0 0 3px rgba(92, 45, 130, 0.15); }
input:disabled, textarea:disabled { background: var(--color12); color: var(--color11); cursor: not-allowed; }
select:focus, select:focus-visible { outline: none; }
input:focus-visible, textarea:focus-visible { outline: none; }
select { appearance: none; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23666" d="M6 8L1 3h10z"/></svg>'); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
label { display: block; margin: 0 0 6px; font-weight: 500; font-size: 14px; color: var(--color7); }
input.fieldInvalid, textarea.fieldInvalid, select.fieldInvalid { border-color: var(--color16) !important; background: rgba(244, 67, 54, 0.03) !important; }
input.fieldInvalid:focus, textarea.fieldInvalid:focus, select.fieldInvalid:focus { border-color: var(--color16) !important; box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.15)  !important; }
input[type="checkbox"].fieldInvalid { outline: 2px solid var(--color16) !important; outline-offset: -1px; }
.fieldError { display: block; font-size: 12px; color: var(--color16); margin: 6px 0 0; min-height: 0; }

.searchBox { background: var(--color10); padding: 20px; border-radius: var(--radiusL); margin: 0 0 30px; }
.searchBox .searchForm { display: block; }
.searchBox .formRow { margin: 0 0 15px; }
.searchBox .formRow:last-child { margin: 0; }
.searchBox .formInline { display: block; }
.searchBox .formInline input, .searchBox .formInline select { width: calc(25% - 15px); float: left; margin: 0 15px 0 0; }
.searchBox .formInline .btn { width: 25%; float: left; padding: 12px 0; }
.searchBox .formInline::after { content: ""; display: block; clear: both; }

.avatar { width: 50px; height: 50px; border-radius: var(--radiusF); overflow: hidden; background: var(--color10); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatarSm { width: 36px; height: 36px; }
.avatarMd { width: 80px; height: 80px; }
.avatarLg { width: 120px; height: 120px; }
.avatarXl { width: 180px; height: 180px; }
.avatarWrap { position: relative; display: inline-block; }
.badgePro { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); background: var(--color4); color: var(--color9); font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: var(--radiusS); text-transform: uppercase; }
.badgeStar { position: absolute; top: 0; right: 0; width: 32px; height: 32px; background: var(--color1); border-radius: var(--radiusF); display: flex; align-items: center; justify-content: center; }
.badgeStar .material-symbols-outlined { color: #ffc107; font-size: 20px; }

.tag { display: inline-block; height: 28px; padding: 0 12px; font-size: 12px; font-weight: 600; line-height: 26px; border: 1px solid transparent; border-radius: var(--radiusS); margin: 0 6px 6px 0; text-transform: uppercase; vertical-align: middle; }
.tagPrimary { background: var(--color1); border-color: var(--color1); color: var(--color9); }
.tagOutline { background: transparent; border-color: var(--color12); color: var(--color7); }
.tagSm { height: 22px; padding: 0 8px; font-size: 10px; line-height: 20px; }
.tagList { margin: 10px 0; }
a.tag { transition: background var(--tranF), border-color var(--tranF); }
a.tag.tagOutline:hover { background: var(--color1); border-color: var(--color1); color: var(--color9); text-decoration: none; }

.genreColumns { margin: 0 0 40px; }
.genreColumn { margin: 0 0 30px; }
.genreColumn h3 { font-size: 18px; margin: 0 0 15px; padding: 0 0 8px; border-bottom: 2px solid var(--color1); color: var(--color1); }
.genreColumn ul { columns: 4; column-gap: 30px; }
.genreColumn ul li { margin: 0 0 8px; break-inside: avoid; }
.genreColumn ul li a { color: var(--color6); font-size: 14px; }
.genreColumn ul li a:hover { color: var(--color1); }



.styleDescription { background: var(--color10); padding: 25px; border-radius: var(--radiusL); margin: 0 0 40px; line-height: 1.8; }
.styleDescription p:last-child { margin: 0; }

.profileHeader { padding: 30px 0; }
.profileHeader .wrap { display: block; }
.profileAvatar { float: left; margin: 0 30px 0 0; }
.profileInfo { overflow: hidden; }
.profileName { font-size: 36px; font-weight: 900; margin: 0 0 5px; color: var(--color6); }
.profileName .genderIcon { color: var(--color4); font-size: 24px; vertical-align: middle; margin: 0 5px; }
.profileName .likesCount { color: var(--color4); font-size: 18px; font-weight: 600; vertical-align: middle; }
.profileName .likesCount .material-symbols-outlined { font-size: 18px; vertical-align: text-bottom; }
.profileTags { margin: 15px 0 10px; }
.profileGenres { margin: 10px 0; }
.profileBio { margin: 25px 0; line-height: 1.7; color: var(--color6); }
.profileBio strong { color: var(--color6); }

.offerCard { background: var(--color10); border-radius: var(--radiusL); overflow: hidden; margin: 0 0 20px; }
.offerCard .cardHeader { background: linear-gradient(135deg, var(--color1) 0%, var(--color3) 100%); padding: 15px 20px; color: var(--color9); position: relative; }
.offerCard .cardHeader::after { content: ""; display: block; clear: both; }
.offerCard .cardTitle { float: left; font-size: 16px; font-weight: 600; color: var(--color9); max-width: calc(100% - 180px); }
.offerCard .cardLocation { float: right; color: var(--color9); font-size: 14px; }
.offerCard .cardLocation a { color: var(--color9); text-decoration: underline; }
.offerCard .cardBody { padding: 20px; }
.offerCard .cardBody p { margin: 0 0 15px; line-height: 1.6; }
.offerCard .cardBody h4 { margin: 20px 0 10px; font-size: 15px; font-weight: 700; }
.offerCard .cardBody ul { margin: 0 0 15px; padding: 0 0 0 20px; }
.offerCard .cardBody ul li { position: relative; padding: 0 0 0 15px; margin: 0 0 6px; line-height: 1.5; }
.offerCard .cardBody ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: var(--color1); border-radius: var(--radiusF); }
.offerCard .cardFooter { padding: 15px 20px; border-top: 1px solid var(--color12); background: var(--color9); }
.offerCard .cardFooter::after { content: ""; display: block; clear: both; }
.offerCard .cardMeta { float: left; font-size: 13px; color: var(--color1); line-height: 36px; }
.offerCard .cardActions { float: right; }

.offerList { margin: 0 0 30px; }
.offerListItem { display: flex; align-items: flex-start; gap: 15px; background: var(--color9); border: 1px solid var(--color13); border-radius: var(--radiusM); padding: 15px; margin: 0 0 15px; transition: box-shadow var(--tranF); }
.offerListItem:hover { box-shadow: var(--shadowM); }
.offerListItem .itemStatus { flex: 0 0 12px; width: 12px; height: 12px; border-radius: var(--radiusF); margin-top: 5px; }
.offerListItem .itemStatus.active { background: var(--color14); }
.offerListItem .itemStatus.inactive { background: var(--color16); }
.offerListItem .itemAvatar { flex: 0 0 auto; }
.offerListItem .itemContent { flex: 1; min-width: 0; }
.offerListItem .itemTitle { font-size: 17px; font-weight: 600; margin: 0 0 5px; }
.offerListItem .itemTitle a { color: var(--color6); }
.offerListItem .itemTitle a:hover { color: var(--color1); text-decoration: none; }
.offerListItem .itemMeta { font-size: 13px; color: var(--color8); margin: 0 0 8px; }
.offerListItem .itemMeta span { margin: 0 12px 0 0; }
.offerListItem .itemMeta .material-symbols-outlined { font-size: 14px; vertical-align: text-bottom; margin: 0 3px 0 0; }
.offerListItem .itemTags { margin: 8px 0 0; }

.artistGrid { display: flex; flex-wrap: wrap; gap: 20px; margin: 0 0 30px; }
.artistTile { flex: 0 0 calc(25% - 15px); background: var(--color9); border: 1px solid var(--color13); border-radius: var(--radiusL); padding: 15px 15px 0; text-align: center; transition: box-shadow var(--tranF), transform var(--tranF); }
.artistTile:hover { box-shadow: var(--shadowM); transform: translateY(-3px); border: 1px solid var(--color17);}
.artistTile .tileAvatar { width: 140px; height: 140px; margin: 0 auto 15px; border-radius: var(--radiusF); overflow: hidden; background: var(--color10); }
.artistTile .tileAvatar img { width: 100%; height: 100%; object-fit: cover; }
.artistTile .tileName { font-size: 16px; font-weight: 600; margin: 0 0 5px; }
.artistTile .tileName a { color: var(--color6); }
.artistTile .tileName a:hover { color: var(--color1); text-decoration: none; }
.artistTile .tileRole { font-size: 13px; color: var(--color8); margin: 0 0 10px; }
.artistTile .tileLocation { font-size: 12px; color: var(--color7); }
.artistTile .tileLocation .material-symbols-outlined { font-size: 14px; vertical-align: text-bottom; }
.artistTile.isPro { border-color: var(--color4); border-width: 2px; position: relative; }
.artistTile.isPro::before { content: "PRO"; position: absolute; top: 10px; right: 10px; background: var(--color4); color: var(--color9); font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--radiusS); }

.offerListItem.isHighlighted { border-color: var(--color4); border-width: 2px; background: linear-gradient(135deg, rgba(233,30,99,0.03) 0%, rgba(233,30,99,0.08) 100%); position: relative; }
.offerListItem.isHighlighted::before { content: "WYRÓŻNIONE"; position: absolute; top: -1px; right: 15px; background: var(--color4); color: var(--color9); font-size: 9px; font-weight: 700; padding: 3px 10px; border-radius: 0 0 var(--radiusS) var(--radiusS); }

.heroBanner {	background: linear-gradient(125deg, var(--color1) 0%, #0a0020 100%);	padding: 80px 0;text-align: center;	color: var(--color9);	margin: -40px 0 40px;}
.heroBanner h1 { font-size: 42px; font-weight: 900; color: var(--color9); margin: 0 0 15px; }
.heroBanner p { font-size: 18px; color: rgba(255,255,255,0.85); margin: 0 0 30px; }
.heroBanner .heroSearch { max-width: 600px; margin: 0 auto; }
.heroBanner .heroSearch input[type="search"] { width: calc(100% - 130px); float: left; border: none; padding: 12px 20px; font-size: 16px; border-radius: var(--radiusXL) 0 0 var(--radiusXL); }
.heroBanner .heroSearch .btn { float: left; padding: 15px 30px; border-radius: 0 var(--radiusXL) var(--radiusXL) 0; background: var(--color4); border-color: var(--color4); }
.heroBanner .heroSearch .btn:hover { background: #c2185b; border-color: #c2185b; }
.heroBanner .heroSearch::after { content: ""; display: block; clear: both; }
.heroBanner .heroSearch input[type="search"] { opacity: 0.9; transition: opacity var(--tranF); }
.heroBanner .heroSearch input[type="search"]:focus { opacity: 1; box-shadow: none; }

.sectionTitle { font-size: 24px; font-weight: 700; margin: 0 0 25px; padding: 0 0 10px; border-bottom: 3px solid var(--color1); }

.pagination { text-align: center; margin: 30px 0; }
.pagination a, .pagination span { display: inline-block; min-width: 36px; height: 36px; line-height: 36px; padding: 0 10px; margin: 0 3px; background: var(--color10); color: var(--color6); font-size: 14px; font-weight: 500; border-radius: var(--radiusF); transition: background var(--tranF); }
.pagination a:hover { background: var(--color1); color: var(--color9); text-decoration: none; }
.pagination span.current { background: var(--color1); color: var(--color9); }
.pagination span.dots { background: transparent; }

#scrollUp { position: fixed; right: 20px; bottom: 20px; width: 46px; height: 46px; background: var(--color4); color: var(--color9); border-radius: var(--radiusF); text-align: center; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity var(--tranM), visibility var(--tranM), background var(--tranF); box-shadow: var(--shadowM); z-index: 90; }
#scrollUp:hover { background: var(--color3); }
#scrollUp.visible { opacity: 1; visibility: visible; }
#scrollUp .material-symbols-outlined { font-size: 28px; line-height: 46px; }

.textCenter { text-align: center; }
.textLeft { text-align: left; }
.textRight { text-align: right; }
.mb0 { margin-bottom: 0; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mt0 { margin-top: 0; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }

#userNav { width: 90px; float: right; padding: 12px 0; position: relative; }
.userDropdown { position: absolute; top: 100%; right: 0; width: 220px; background: var(--color9); border-radius: var(--radiusM); box-shadow: var(--shadowL); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity var(--tranF), visibility var(--tranF), transform var(--tranF); z-index: 110; }
.userDropdown.active { opacity: 1; visibility: visible; transform: translateY(0); }
.userDropdown ul li a { display: block; padding: 12px 16px; color: var(--color6); font-size: 14px; border-bottom: 1px solid var(--color13); transition: background var(--tranF); }
.userDropdown ul li a:hover { background: var(--color10); text-decoration: none; }
.userDropdown ul li a .material-symbols-outlined { font-size: 18px; vertical-align: middle; margin: 0 10px 0 0; color: var(--color1); }
.userDropdown ul li:last-child a { border-bottom: none; border-radius: var(--radiusM); }
.userDropdown ul li a[href="/wyloguj.php"] { color: var(--color16); }
.userDropdown ul li a[href="/wyloguj.php"] .material-symbols-outlined { color: var(--color16); }

.accountLayout { display: flex; gap: 30px; }
.accountSidebar { flex: 0 0 240px; }
.accountContent { flex: 1; min-width: 0; }
.accountNav { background: var(--color9); border: 1px solid var(--color13); border-radius: var(--radiusL); overflow: hidden; position: sticky; top: 80px; }
.accountNav ul li a { display: block; padding: 14px 20px; color: var(--color6); font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--color13); transition: background var(--tranF), color var(--tranF); }
.accountNav ul li a:hover { background: var(--color10); text-decoration: none; }
.accountNav ul li a .material-symbols-outlined { font-size: 20px; vertical-align: middle; margin: 0 12px 0 0; color: var(--color8); }
.accountNav ul li.active a { background: var(--color1); color: var(--color9); }
.accountNav ul li.active a .material-symbols-outlined { color: var(--color9); }
.accountNav ul li:last-child a { border-bottom: none; color: var(--color16); }
.accountNav ul li:last-child a .material-symbols-outlined { color: var(--color16); }
.accountNav ul li:last-child.active a { background: var(--color16); color: var(--color9); }

.accountBox { background: var(--color9); border: 1px solid var(--color13); border-radius: var(--radiusL); padding: 25px; margin: 0 0 25px; }
.accountBox h2 { font-size: 20px; margin: 0 0 20px; padding: 0 0 15px; border-bottom: 2px solid var(--color1); }
.formGroup { margin: 0 0 40px; }
.formGroup:last-child { margin: 0; }
.formGroup label { margin: 0 0 8px; }
.formRow { display: flex; gap: 20px; }
.formRow .formGroup { flex: 1; }
.formHint { font-size: 12px; color: var(--color8); margin: 8px 0; }
.lengthCount { color: var(--color8); }
.lengthCountNum { font-weight: 600; }
.lengthCountNum.lengthExceeded { color: var(--color16); }
.formActions { margin: 25px 0 0; padding: 20px 0 0; border-top: 1px solid var(--color13); display: flex; align-items: center; gap: 12px; }
.formActions .btn:last-child { margin-left: auto; }
textarea { min-height: 120px; resize: vertical; }
input[type="file"] { padding: 10px 0; border: none; background: transparent; }
input[type="date"] { padding: 10px 16px; }

.datePickerWrap { position: relative; }
.datePickerDisplay { width: 100%; padding: 12px 16px; background: var(--color9); border: 1px solid var(--color12); border-radius: var(--radiusM); font-family: 'Inter', Arial, Helvetica, sans-serif; font-size: 15px; color: var(--color6); cursor: pointer; transition: border-color var(--tranF); }
.datePickerDisplay:hover { border-color: var(--color1); }
.datePicker { position: absolute; top: 100%; left: 0; width: 280px; background: var(--color9); border: 1px solid var(--color12); border-radius: var(--radiusM); box-shadow: var(--shadowL); padding: 15px; z-index: 100; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity var(--tranF), visibility var(--tranF), transform var(--tranF); }
.datePicker.active { opacity: 1; visibility: visible; transform: translateY(5px); }
.dpHeader { display: flex; align-items: center; justify-content: space-between; margin: 0 0 15px; }
.dpHeader button { width: 32px; height: 32px; border: none; background: var(--color10); border-radius: var(--radiusF); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--tranF); }
.dpHeader button:hover { background: var(--color1); color: var(--color9); }
.dpHeader button .material-symbols-outlined { font-size: 20px; }
.dpTitle { font-weight: 600; font-size: 15px; color: var(--color6); }
.dpYearBtn { color: var(--color1); cursor: pointer; }
.dpYearBtn:hover { text-decoration: underline; }
.dpHeaderYear { justify-content: center; }
.dpDays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dpDayName { text-align: center; font-size: 11px; font-weight: 600; color: var(--color8); padding: 5px 0; text-transform: uppercase; }
.dpDay { text-align: center; padding: 8px 0; font-size: 13px; border-radius: var(--radiusS); cursor: pointer; transition: background var(--tranF), color var(--tranF); }
.dpDay:hover { background: var(--color10); }
.dpDay.dpOther { color: var(--color8); cursor: default; }
.dpDay.dpOther:hover { background: transparent; }
.dpDay.dpToday { font-weight: 700; color: var(--color1); }
.dpDay.dpSelected { background: var(--color1); color: var(--color9); }
.dpDay.dpSelected:hover { background: var(--color3); }
.dpDay.dpDisabled { color: var(--color8); cursor: default; opacity: 0.45; }
.dpDay.dpDisabled:hover { background: transparent; }
.dpYears { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-height: 200px; overflow-y: auto; }
.dpYearItem { text-align: center; padding: 7px 4px; font-size: 13px; border-radius: var(--radiusS); cursor: pointer; transition: background var(--tranF), color var(--tranF); }
.dpYearItem:hover { background: var(--color10); }
.dpYearItem.dpYearSelected { background: var(--color1); color: var(--color9); font-weight: 600; }
.dpYearItem.dpYearSelected:hover { background: var(--color3); }
.dpYearItem.dpDisabled { color: var(--color8); cursor: default; opacity: 0.45; }
.dpYearItem.dpDisabled:hover { background: transparent; }

.radioGroup {	display: flex;	align-items: center;	gap: 10px;	margin: 20px 0 12px 20px;}
.radioGroup input[type="radio"] { width: 18px; height: 18px; accent-color: var(--color1); cursor: pointer; }
.radioGroup label { margin: 0; font-weight: 400; cursor: pointer; font-size: 14px; }
.radioGroup.disabled { opacity: 0.5; }
.radioGroup.disabled label { cursor: not-allowed; }

.avatarUpload { display: flex; align-items: center; gap: 20px; margin: 0 0 20px; }
.avatarUpload .avatar { flex-shrink: 0; }
.avatarUpload .uploadBtn { display: inline-block; padding: 8px 16px; background: var(--color10); color: var(--color6); font-size: 13px; font-weight: 500; border-radius: var(--radiusM); cursor: pointer; transition: background var(--tranF); }
.avatarUpload .uploadBtn:hover { background: var(--color12); }
.avatarUpload input[type="file"] { display: none; }

.checkboxGroup { display: flex; align-items: center; gap: 10px; margin: 0 0 15px; }
.checkboxGroup input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color1); }
.checkboxGroup label { margin: 0; font-weight: 400; cursor: pointer; }

.selectedTags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.selectedTags:empty { display: none; }
.selectedTags .tag { margin: 0; cursor: grab; padding-right: 8px; }
.selectedTags .tag .tagRemove { margin-left: 6px; cursor: pointer; font-weight: 700; font-size: 14px; line-height: 26px; opacity: 1; vertical-align: top; }
.selectedTags .tag .tagDrag { font-size: 16px; line-height: 26px; vertical-align: top; margin-right: 4px; opacity: 0.6; cursor: grab; }
.selectedTags .tag:active { cursor: grabbing; }
.selectedTags .tag:nth-child(-n+3), .selectedTags .tag:nth-child(-n+3) { background: var(--color4); border-color: var(--color4); }
.selectedTags .tag.dragging { opacity: 0.4; }
.tagPlaceholder { border: 2px dashed var(--color7); border-radius: var(--radiusM); background: var(--color10); }
.selectPicker { position: relative; }
.selectPicker input { width: 100%; padding: 12px 40px 12px 15px; border: 1px solid var(--color12); border-radius: var(--radiusM); font-size: 14px; background: var(--color9); cursor: pointer; }
.selectPicker input:focus { outline: none; border-color: var(--color1); }
.selectPicker .selectArrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--color8); pointer-events: none; transition: transform var(--tranF); }
.selectPicker.active .selectArrow { transform: translateY(-50%) rotate(180deg); }
.selectPicker .pickerDropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--color9); border: 1px solid var(--color12); border-radius: var(--radiusM); margin-top: 4px; max-height: 280px; overflow-y: auto; z-index: 100; display: none; box-shadow: var(--shadowM); }
.selectPicker.active .pickerDropdown { display: block; }
.selectPicker .pickerGroup { padding: 10px 15px 5px; font-size: 12px; font-weight: 700; color: var(--color8); text-transform: uppercase; letter-spacing: 0.5px; }
.selectPicker .pickerItem { padding: 8px 15px 8px 25px; font-size: 14px; color: var(--color6); cursor: pointer; }
.selectPicker .pickerItem:hover { background: var(--color10); color: var(--color1); }

.offerListItem.isExpired { background: var(--color10); }
.offerListItem.isFinished { background: var(--color10); }
.offerListItem .itemActions { position: absolute; bottom: 15px; right: 15px; display: flex; gap: 10px; }
.accountPage .offerListItem { position: relative; padding-bottom: 50px; }
.btnGhost { background: none; border: none; padding: 5px 10px; font-size: 13px; color: var(--color6); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.btnGhost:hover { color: var(--color1); }
.btnGhost .material-symbols-outlined { font-size: 16px; }
.btnGhost.btnDanger { color: var(--color16); }
.btnGhost.btnDanger:hover { color: var(--color15); }

.messagesList { margin: 0; }
.messageItem { display: flex; align-items: center; gap: 15px; padding: 15px; background: var(--color9); border: 1px solid var(--color13); border-radius: var(--radiusM); margin: 0 0 12px; cursor: pointer; transition: box-shadow var(--tranF), background var(--tranF); }
.messageItem:hover { box-shadow: var(--shadowS); background: var(--color10); }
.messageItem.unread { border-left: 3px solid var(--color1); }
.messageItem .msgAvatar { flex: 0 0 50px; }
.messageItem .msgContent { flex: 1; min-width: 0; }
.messageItem .msgHeader { display: flex; justify-content: space-between; margin: 0 0 4px; }
.messageItem .msgName { font-weight: 600; }
.messageItem .msgName .userBadge { display: inline-block; padding: 2px 6px; border-radius: var(--radiusS); font-size: 9px; font-weight: 700; margin-left: 8px; vertical-align: middle; }
.messageItem .msgName .userBadge.plus { background: var(--color2); color: var(--color9); }
.messageItem .msgName .userBadge.pro { background: var(--color4); color: var(--color9); }
.messageItem .msgName .userBadge.vip { background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%); color: var(--color11); }
.messageItem .msgTime { font-size: 12px; color: var(--color8); }
.messageItem .msgPreview { font-size: 14px; color: var(--color7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.messageItem.unread .msgPreview { color: var(--color6); font-weight: 500; }
.messageItem .msgActions { position: absolute; bottom: 15px; right: 15px; display: flex; gap: 10px; }
.accountPage .messageItem { position: relative; padding-bottom: 50px; }

.chatThread { border: 1px solid var(--color13); border-radius: var(--radiusL); overflow: hidden; }
.chatHeader { background: var(--color10); padding: 15px 20px; border-bottom: 1px solid var(--color13); display: flex; align-items: center; gap: 15px; }
.chatHeader .avatar { flex-shrink: 0; }
.chatHeader h3 { margin: 0; font-size: 16px; }
.chatMessages { height: 60vh; overflow-y: auto; padding: 20px; background: var(--color9); }
.chatBubble { max-width: 70%; margin: 0 0 15px; padding: 12px 16px; border-radius: var(--radiusL); line-height: 1.5; }
.chatBubble.received { background: var(--color10); margin-right: auto; border-bottom-left-radius: var(--radiusS); }
.chatBubble.sent { background: var(--color1); color: var(--color9); margin-left: auto; border-bottom-right-radius: var(--radiusS); }
.chatBubble .bubbleTime { font-size: 11px; opacity: 0.7; margin: 6px 0 0; }
.chatSpacer { height: 50px; }
.chatForm { padding: 15px 20px; background: var(--color10); border-top: 1px solid var(--color13); display: flex; gap: 10px; }
.chatForm input { flex: 1; }
.chatForm .btn { padding: 12px 20px; }

.paymentsTable { width: 100%; border-collapse: collapse; }
.paymentsTable th, .paymentsTable td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--color13); }
.paymentsTable th { background: var(--color10); font-weight: 600; font-size: 13px; text-transform: uppercase; color: var(--color7); }
.paymentsTable td { font-size: 14px; }
.paymentsTable .statusBadge { display: inline-block; padding: 4px 10px; border-radius: var(--radiusS); font-size: 11px; font-weight: 600; text-transform: uppercase; }
.paymentsTable .statusBadge.paid { background: rgba(76, 175, 80, 0.15); color: var(--color14); }
.paymentsTable .statusBadge.pending { background: rgba(255, 152, 0, 0.15); color: var(--color15); }
.paymentsTable .planBadge { display: inline-block; padding: 3px 8px; border-radius: var(--radiusS); font-size: 11px; font-weight: 700; }
.paymentsTable .planBadge.plus { background: var(--color2); color: var(--color9); }
.paymentsTable .planBadge.pro { background: var(--color4); color: var(--color9); }
.paymentsTable .planBadge.vip { background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%); color: var(--color11); }

.dangerZone { background: rgba(244, 67, 54, 0.05); border: 1px solid rgba(244, 67, 54, 0.2); border-radius: var(--radiusL); padding: 20px; margin: 25px 0 0; }
.dangerZone h4 { color: var(--color16); margin: 0 0 10px; }
.dangerZone p { font-size: 14px; color: var(--color7); margin: 0 0 15px; }
.dangerZone .btn { background: var(--color16); border-color: var(--color16); }
.dangerZone .btn:hover { background: #c62828; border-color: #c62828; }

.roleOptions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.roleOption { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 24px; background: var(--color10); border: 2px solid var(--color13); border-radius: var(--radiusL); font-family: 'Inter', Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 600; color: var(--color6); cursor: pointer; transition: background var(--tranF), border-color var(--tranF), color var(--tranF); }
.roleOption:hover { background: var(--color9); border-color: var(--color1); color: var(--color1); }
.roleOption.active { background: var(--color1); border-color: var(--color1); color: var(--color9); }
.roleOption .material-symbols-outlined { font-size: 28px; }

.authWrap { display: flex; justify-content: center; align-items: flex-start; padding: 40px 20px; }
.authBox { width: 100%; max-width: 440px; background: var(--color9); border: 1px solid var(--color13); border-radius: var(--radiusL); padding: 40px; box-shadow: var(--shadowBlur); }
.authBox h1 { font-size: 26px; margin: 0 0 8px; text-align: center; }
.authSubtitle { text-align: center; color: var(--color7); font-size: 15px; margin: 0 0 30px; }
.authBox .formGroup { margin: 0 0 20px; }
.authBox .formActions { margin: 25px 0 0; padding: 0; border-top: none; }
.btnFull { display: block; width: 100%; text-align: center; }
.authLinks { text-align: center; margin: 25px 0 0; padding: 20px 0 0; border-top: 1px solid var(--color13); }
.authLinks p { font-size: 14px; color: var(--color7); margin: 0 0 8px; }
.authLinks p:last-child { margin: 0; }

#ajaxLoaderOverlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(255, 255, 255, 0.8); align-items: center; justify-content: center; }
#ajaxLoaderOverlay.is-visible { display: flex; }
[data-theme="dark"] #ajaxLoaderOverlay { background: rgba(0, 0, 0, 0.8); }

.onboardingWrap { padding: 40px 0 80px; }
.onboardingWrap .wrap { max-width: 760px; }
.onboardingProgress { display: flex; align-items: center; justify-content: center; margin-bottom: 48px; gap: 0; }
.onboardingProgressStep { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 70px; }
.onboardingProgressNum { width: 40px; height: 40px; border-radius: var(--radiusF); border: 2px solid var(--color12); background: var(--color9); color: var(--color8); font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: center; transition: background var(--tranF), border-color var(--tranF), color var(--tranF); }
.onboardingProgressLabel { font-size: 12px; color: var(--color8); white-space: nowrap; transition: color var(--tranF); }
.onboardingProgressStep.active .onboardingProgressNum { background: var(--color1); border-color: var(--color1); color: #fff; }
.onboardingProgressStep.active .onboardingProgressLabel { color: var(--color1); font-weight: 600; }
.onboardingProgressStep.completed .onboardingProgressNum { background: var(--color14); border-color: var(--color14); color: #fff; }
.onboardingProgressStep.completed .onboardingProgressLabel { color: var(--color14); }
.onboardingProgressLine { flex: 1; height: 2px; background: var(--color12); margin: 0 12px; margin-bottom: 26px; }
.formActionsNav { display: flex; gap: 12px; align-items: center; }
.formActionsNav .btnGhost { margin-right: auto; background: var(--color9); border: 1px solid var(--color12); color: var(--color6); padding: 10px 20px; font-size: 14px; font-weight: 600; text-transform: uppercase; border-radius: var(--radiusXL); font-family: 'Inter', Arial, Helvetica, sans-serif; }
.formActionsNav .btnGhost:hover { background: var(--color3); border-color: var(--color3); color: #fff; }
.onboardingSkipLinks { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 20px; }
.onboardingSkipLinks a { font-size: 13px; color: var(--color7); text-decoration: underline; text-underline-offset: 3px; }
.onboardingSkipLinks a:hover { color: var(--color6); }
.onboardingStepHeader { margin-bottom: 32px; }
.onboardingStepHeader h1, .onboardingStepHeader h2 { margin-bottom: 10px; }
.onboardingIntro { color: var(--color7); font-size: 15px; line-height: 1.6; }
.onboardingRoles { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 16px; }
.onboardingRole { flex: 1 1 180px; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 20px 24px; border: 2px solid var(--color12); border-radius: var(--radiusL); background: var(--color9); cursor: pointer; text-align: center; position: relative; transition: border-color var(--tranF), background var(--tranF), box-shadow var(--tranF); user-select: none; }
.onboardingRole:hover { border-color: var(--color2); box-shadow: var(--shadowM); }
.onboardingRole.active { border-color: var(--color1); background: rgba(92, 45, 130, 0.06); box-shadow: 0 0 0 3px rgba(92, 45, 130, 0.15); }
.onboardingRole img { width: 90px; height: 90px; object-fit: contain; }
.onboardingRole span:not(.onboardingRoleCheck) { font-size: 14px; font-weight: 500; color: var(--color6); line-height: 1.4; }
.onboardingRole.active span:not(.onboardingRoleCheck) { color: var(--color1); }
.onboardingRoleCheck { position: absolute; top: 10px; right: 10px; font-size: 32px !important; color: var(--color1); display: none !important; }
.onboardingRole.active .onboardingRoleCheck { display: block !important; }
[data-theme="dark"] .onboardingRole.active { background: rgba(155, 109, 204, 0.12); }
[data-theme="dark"] .onboardingRole img { filter: brightness(0) invert(1); }
.onboardingStep label.fieldError { color: var(--color16) !important; }
.onboardingThanksBox { text-align: center; padding: 60px 20px; }
.onboardingThanksIcon { font-size: 72px; color: var(--color14); display: block; margin-bottom: 20px; }
.onboardingThanksBox h2 { margin-bottom: 16px; }
.onboardingThanksBox p { color: var(--color7); font-size: 15px; line-height: 1.6; max-width: 500px; margin: 0 auto 12px; }



@media only screen and (max-width: 1024px) {
  .wrap { width: 100%; padding: 0 15px; }
  #mainNav { border-radius: 0 0 var(--radiusM) var(--radiusM);  display: none;position: absolute;	top: 60px;right: 0;	background: var(--color3);	box-shadow: var(--shadowM);	width: 320px;	float: none;margin: 0;}
  #mainNav.active { display: block; }
  #mainNav li { display: block; }
  #mainNav li a { padding: 15px 20px; line-height: 1.4; border-top: 1px solid rgba(255,255,255,0.1); }
  .menuToggle { display: block; }
  #userNav { margin-right: 50px; }
  .accountSidebar { display: none; }
  .artistTile { flex: 0 0 calc(33.333% - 14px); }
  .genreColumn { flex: 0 0 calc(50% - 15px); }
  .profileName { font-size: 28px; }
  .heroBanner h1 { font-size: 32px; }
}

@media only screen and (max-width: 768px) {
  .artistTile { flex: 0 0 calc(50% - 10px); }
  .genreColumn { flex: 0 0 100%; }
  .accountLayout { flex-direction: column; gap: 20px; }
  .accountSidebar { flex: none; }
  .accountNav { position: static; }
  .formRow { flex-direction: column; gap: 0; }
  .chatBubble { max-width: 85%; }
  .paymentsTable { font-size: 13px; }
  .paymentsTable th, .paymentsTable td { padding: 10px 8px; }
  .searchBox .formInline input, .searchBox .formInline select { width: 100%; float: none; margin: 0 0 10px; }
  .searchBox .formInline .btn { width: 100%; float: none; }
  .profileAvatar { float: none; margin: 0 auto 20px; text-align: center; }
  .profileInfo { text-align: center; }
  .profileName { font-size: 24px; }
  footer .wrap { text-align: center; }
  #footerCredits, #footerNav { float: none; margin: 10px 0; }
  #footerNav a { margin: 0 12px; }
  .offerCard .cardTitle { float: none; max-width: 100%; margin: 0 0 8px; }
  .offerCard .cardLocation { float: none; }
  .heroBanner { padding: 40px 0; padding-top: 120px; }
  .heroBanner h1 { font-size: 26px; }
  .heroBanner p { font-size: 16px; }
  .heroBanner .heroSearch input[type="search"] { width: 100%; float: none; border-radius: var(--radiusXL); margin: 0 0 10px; }
  .heroBanner .heroSearch .btn { width: 100%; float: none; border-radius: var(--radiusXL); }
  .authBox { padding: 30px 20px; }
  .onboardingWrap { padding: 24px 0 60px; }
  .onboardingRoles { gap: 12px; }
  .onboardingRole { flex: 1 1 140px; padding: 20px 14px; }
  .onboardingRole img { width: 70px; height: 70px; }
  .onboardingProgress { margin-bottom: 32px; }
  .onboardingProgressLine { margin: 0 6px; margin-bottom: 26px; }  
}

@media only screen and (max-width: 480px) {
  .onboardingRoles { flex-direction: column; }
  .onboardingRole { flex-direction: row; text-align: left; padding: 16px; gap: 16px; }
  .onboardingRole img { width: 52px; height: 52px; flex-shrink: 0; }
  .onboardingProgressLabel { display: none; }
  .onboardingProgressLine { margin-bottom: 12px; }
}