/*
 * BeatHelper v17.6.5 — desktop readability + modal/profile polish
 * Visual-only layer (except CRM pagination JS fix in crm.js).
 * Canonical surface material stays aligned with the desktop side rail.
 */

:root{
  --bh-ui-surface:var(--bh-readable-surface,rgba(255,255,255,.05));
  --bh-ui-surface-2:var(--bh-readable-surface-2,rgba(255,255,255,.075));
  --bh-ui-nested:var(--bh-readable-nested,rgba(255,255,255,.04));
  --bh-ui-border:var(--bh-readable-border,rgba(255,255,255,.09));
  --bh-ui-text:#F3F6FB;
  --bh-ui-muted:#92A4BE;
  --bh-ui-dim:#71819A;
}

/* ---------------------------------------------------------
   1) Tool/CRM filter rows: keep the pills, remove the extra tray.
   --------------------------------------------------------- */
.screen[data-page="tools"] .tool-filter-row,
.screen[data-page="crm"] .crm-filters,
.screen[data-page="crm"] .crm-folders{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border-radius:0!important;
  padding:0!important;
}
.screen[data-page="tools"] .tool-filter-row{margin-top:14px!important}
.screen[data-page="crm"] .crm-filters{margin-top:14px!important}
.screen[data-page="crm"] .crm-folders{margin-top:20px!important}

/* ---------------------------------------------------------
   2) Back button: actual workspace back control, not only legacy .back.
   Grid must never be visible through it.
   --------------------------------------------------------- */
.screen .tool-workspace-back,
.screen .topbar .back{
  background:rgba(255,255,255,.075)!important;
  border:1px solid rgba(255,255,255,.11)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.035)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
}
.screen .tool-workspace-back:hover,
.screen .topbar .back:hover{background:rgba(255,255,255,.095)!important}
.screen .tool-workspace-back:active,
.screen .topbar .back:active{background:rgba(255,255,255,.11)!important}

/* ---------------------------------------------------------
   3) Remaining blue UI glyphs -> same neutral tone as the rail.
   Semantic colors (ONLINE, sale/deposit/reject, chart series, CTA) stay.
   --------------------------------------------------------- */
.screen[data-page="home"] .home-recent-grid .row .icon,
.screen[data-page="crm"] .crm-avatar,
.screen[data-page="crm"] .crm-folder-tag svg,
.screen[data-page="tools"] .tool-list-arrow,
.screen[data-page="workspace"] .tool-settings-arrow,
.screen[data-page="profile"] .profile-chevron{
  color:var(--bh-rail-icon,#92A4BE)!important;
}
.screen[data-page="home"] .home-recent-grid .row .icon{
  background:var(--bh-rail-icon-bg,rgba(255,255,255,.04))!important;
  border:1px solid var(--bh-rail-icon-border,rgba(255,255,255,.09))!important;
}
.screen[data-page="home"] .home-recent-icon-glyph,
.screen[data-page="home"] .home-recent-icon-glyph svg,
.screen[data-page="home"] .home-recent-icon-text{
  color:inherit!important;
  stroke:currentColor!important;
}
.screen[data-page="home"] .home-recent-icon-glyph svg{width:18px!important;height:18px!important;fill:none!important}
.screen[data-page="crm"] .crm-avatar{
  background:var(--bh-rail-icon-bg,rgba(255,255,255,.04))!important;
  border-color:var(--bh-rail-icon-border,rgba(255,255,255,.09))!important;
}

/* ---------------------------------------------------------
   4) New neutral modal language: CRM artist/create/folder + profile sheets.
   --------------------------------------------------------- */
.crm-modal,
.profile-sheet{
  border:1px solid rgba(255,255,255,.105)!important;
  background:rgba(9,13,21,.985)!important;
  box-shadow:0 28px 90px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.crm-modal-head,
.profile-sheet-head{
  background:rgba(13,18,28,.97)!important;
  border-bottom-color:rgba(255,255,255,.075)!important;
  backdrop-filter:blur(22px)!important;
  -webkit-backdrop-filter:blur(22px)!important;
}
.crm-modal-actions,
.profile-sheet-actions{
  background:rgba(9,13,21,.965)!important;
  border-top-color:rgba(255,255,255,.075)!important;
  backdrop-filter:blur(22px)!important;
  -webkit-backdrop-filter:blur(22px)!important;
}
.crm-section,
.profile-setting-group{
  background:rgba(255,255,255,.037)!important;
  border:1px solid rgba(255,255,255,.085)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.crm-field input,
.crm-field textarea,
.crm-field select,
.profile-option,
.profile-choice,
.profile-file-preview{
  background:rgba(255,255,255,.045)!important;
  border-color:rgba(255,255,255,.095)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important;
}
.crm-field input:focus,
.crm-field textarea:focus,
.crm-field select:focus{
  border-color:rgba(125,165,255,.38)!important;
  box-shadow:0 0 0 3px rgba(47,107,255,.075)!important;
}
.crm-close,.profile-sheet-close{
  background:rgba(255,255,255,.065)!important;
  border-color:rgba(255,255,255,.105)!important;
}
.crm-save,.profile-sheet-save{
  min-height:46px!important;
  border-color:rgba(125,165,255,.28)!important;
  background:rgba(47,107,255,.16)!important;
}

/* Language sheet: one clean selector card, no Russian-doll boxes. */
.profile-sheet-panel[data-profile-panel="language"] .profile-setting-group{
  padding:8px!important;
  background:rgba(255,255,255,.025)!important;
}
.profile-sheet-panel[data-profile-panel="language"] .profile-option-list{gap:8px!important}
.profile-sheet-panel[data-profile-panel="language"] .profile-option{
  min-height:56px!important;
  border-radius:14px!important;
  padding:11px 14px!important;
}
.profile-sheet-panel[data-profile-panel="language"] .profile-option-flag{
  width:32px!important;height:32px!important;flex-basis:32px!important;
}
.profile-sheet-panel[data-profile-panel="language"] .profile-option-title{font-size:12px!important}

/* Downloader sheet: clearer groups + readable choices. */
.profile-sheet-panel[data-profile-panel="downloader"]{gap:12px!important}
.profile-sheet-panel[data-profile-panel="downloader"] .profile-setting-group{padding:14px!important;border-radius:18px!important}
.profile-sheet-panel[data-profile-panel="downloader"] .profile-choice-grid{gap:9px!important}
.profile-sheet-panel[data-profile-panel="downloader"] .profile-choice{height:42px!important;border-radius:12px!important;font-size:10px!important}
.profile-sheet-panel[data-profile-panel="downloader"] .profile-file-preview{margin-top:12px!important;border-radius:14px!important}
.profile-sheet-panel[data-profile-panel="downloader"] .profile-file-preview-row{padding:12px!important}
.profile-sheet-panel[data-profile-panel="downloader"] .profile-file-preview-name{font-size:10px!important}

/* ---------------------------------------------------------
   5) Profile hero redesign: larger, calmer, rail-family surface.
   --------------------------------------------------------- */
.screen[data-page="profile"] .profile-hero{
  background:var(--bh-ui-surface)!important;
  border:1px solid var(--bh-ui-border)!important;
  box-shadow:0 18px 46px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.025)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
.screen[data-page="profile"] .profile-hero::before{
  right:-54px!important;top:-70px!important;width:190px!important;height:190px!important;
  border-color:rgba(255,255,255,.055)!important;
  box-shadow:0 0 0 32px rgba(255,255,255,.018)!important;
}
.screen[data-page="profile"] .profile-avatar-large{
  background-color:rgba(255,255,255,.065)!important;
  border-color:rgba(255,255,255,.12)!important;
  color:#F4F7FC!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 30px rgba(0,0,0,.24)!important;
}
.screen[data-page="profile"] .profile-kicker{color:var(--bh-ui-muted)!important}
.screen[data-page="profile"] .profile-handle{color:#A1AFC2!important}

/* ---------------------------------------------------------
   6) Desktop text/icon readability pass.
   --------------------------------------------------------- */
@media(min-width:768px){
  /* Main analytics: readable from normal desktop distance. */
  .screen[data-page="home"] .user-summary-cell{padding:18px 16px!important}
  .screen[data-page="home"] .user-summary-cell b{font-size:23px!important}
  .screen[data-page="home"] .user-summary-cell span{font-size:9.5px!important;line-height:1.35!important}
  .screen[data-page="home"] .user-stat-group{padding:18px!important}
  .screen[data-page="home"] .user-stat-group-head{padding:6px 4px 11px!important}
  .screen[data-page="home"] .user-stat-group-head strong{font-size:10px!important}
  .screen[data-page="home"] .user-stat-group-head span{font-size:9px!important}
  .screen[data-page="home"] .user-stat-list{padding:0!important}
  .screen[data-page="home"] .user-stat-row{
    grid-template-columns:48px minmax(0,1fr) auto!important;
    column-gap:14px!important;row-gap:10px!important;
    min-height:76px!important;padding:13px 4px 14px!important;
  }
  .screen[data-page="home"] .user-stat-icon{width:44px!important;height:44px!important;border-radius:13px!important}
  .screen[data-page="home"] .user-stat-icon svg{width:19px!important;height:19px!important}
  .screen[data-page="home"] .user-stat-title{font-size:14px!important}
  .screen[data-page="home"] .user-stat-meta{font-size:9.5px!important;margin-top:4px!important}
  .screen[data-page="home"] .user-stat-value b{font-size:18px!important}
  .screen[data-page="home"] .user-stat-value span{font-size:8.5px!important;margin-top:4px!important}
  .screen[data-page="home"] .user-stat-progress{height:4px!important}

  /* Tools catalogue. */
  .screen[data-page="tools"] .tools-list-title{font-size:20px!important}
  .screen[data-page="tools"] .tools-list-count{font-size:11px!important}
  .screen[data-page="tools"] .tools-category-title strong{font-size:11px!important}
  .screen[data-page="tools"] .tools-category-count{font-size:11px!important}
  .screen[data-page="tools"] .tool-list-item{grid-template-columns:56px minmax(0,1fr) 26px!important;padding:19px!important;gap:16px!important}
  .screen[data-page="tools"] .tool-list-icon{width:54px!important;height:54px!important;border-radius:16px!important}
  .screen[data-page="tools"] .tool-list-icon svg{width:23px!important;height:23px!important}
  .screen[data-page="tools"] .tool-list-title{font-size:16px!important}
  .screen[data-page="tools"] .tool-list-desc{font-size:11.5px!important;line-height:1.5!important}
  .screen[data-page="tools"] .tool-list-tag{font-size:8.5px!important;padding:4px 8px!important}
  .screen[data-page="tools"] .tool-list-foot{font-size:9px!important}
  .screen[data-page="tools"] .tool-filter{font-size:10.5px!important;height:38px!important}

  /* CRM menus/cards/pagination. */
  .screen[data-page="crm"] .crm-filter{font-size:10px!important;height:38px!important}
  .screen[data-page="crm"] .crm-folder-chip,
  .screen[data-page="crm"] .crm-folder-main{font-size:9.5px!important}
  .screen[data-page="crm"] .crm-folders-title{font-size:9.5px!important}
  .screen[data-page="crm"] .crm-folders-note,
  .screen[data-page="crm"] .crm-folders-manage{font-size:8.5px!important}
  .screen[data-page="crm"] .crm-avatar{width:54px!important;height:54px!important;font-size:15px!important}
  .screen[data-page="crm"] .crm-artist-name{font-size:15px!important}
  .screen[data-page="crm"] .crm-artist-type{font-size:10px!important}
  .screen[data-page="crm"] .crm-contact{font-size:8.5px!important;padding:4px 7px!important}
  .screen[data-page="crm"] .crm-status{font-size:8px!important;padding:5px 8px!important}
  .screen[data-page="crm"] .crm-page{height:34px!important;min-width:34px!important;font-size:10px!important;padding:0 11px!important}

  /* General profile menu readability. */
  .screen[data-page="profile"] .profile-hero{
    grid-template-columns:86px minmax(0,1fr)!important;
    gap:22px!important;padding:24px!important;min-height:154px!important;border-radius:22px!important;
  }
  .screen[data-page="profile"] .profile-avatar-large{width:82px!important;height:82px!important;border-radius:22px!important;font-size:24px!important}
  .screen[data-page="profile"] .profile-kicker{font-size:9.5px!important}
  .screen[data-page="profile"] .profile-name{font-size:27px!important;margin-top:6px!important}
  .screen[data-page="profile"] .profile-handle{font-size:11px!important;margin-top:5px!important}
  .screen[data-page="profile"] .profile-section-head{font-size:11px!important}
  .screen[data-page="profile"] .profile-item{min-height:78px!important;padding:16px 17px!important;grid-template-columns:48px minmax(0,1fr) auto!important}
  .screen[data-page="profile"] .profile-item-icon{width:46px!important;height:46px!important;border-radius:14px!important}
  .screen[data-page="profile"] .profile-item-icon svg{width:20px!important;height:20px!important}
  .screen[data-page="profile"] .profile-item-title{font-size:14.5px!important}
  .screen[data-page="profile"] .profile-item-side{font-size:10.5px!important}
  .screen[data-page="profile"] .profile-value{font-size:10.5px!important}

  /* CRM artist/create/folder redesign on desktop. */
  .crm-overlay{align-items:center!important;padding:28px!important}
  .crm-modal{width:min(820px,calc(100vw - 64px))!important;max-width:820px!important;max-height:calc(100dvh - 56px)!important;border-radius:26px!important}
  .crm-folder-modal{width:min(600px,calc(100vw - 64px))!important;max-width:600px!important}
  .crm-modal-head{padding:20px 22px 18px!important}
  .crm-modal-kicker{font-size:9px!important}
  .crm-modal-title{font-size:22px!important;margin-top:5px!important}
  .crm-modal-sub{font-size:10px!important}
  .crm-close{width:38px!important;height:38px!important;border-radius:12px!important}
  .crm-form{padding:18px!important;gap:12px!important}
  .crm-section{padding:16px!important;border-radius:18px!important}
  .crm-section-title{font-size:10px!important}
  .crm-section-copy,.crm-folder-help{font-size:9px!important}
  .crm-field{margin-bottom:12px!important}
  .crm-field>span,.crm-status-label{font-size:9.5px!important;margin-bottom:7px!important}
  .crm-field input,.crm-field select{height:48px!important;font-size:12.5px!important;border-radius:14px!important;padding:0 14px!important}
  .crm-field textarea{font-size:12.5px!important;min-height:124px!important;border-radius:14px!important;padding:14px!important}
  .crm-status-option{height:34px!important;font-size:9px!important;padding:0 12px!important}
  .crm-history h3{font-size:10px!important}
  .crm-history-title{font-size:10.5px!important}
  .crm-history-meta{font-size:8.5px!important}
  .crm-modal-actions{padding:13px 18px 16px!important}
  .crm-save,.crm-delete{height:46px!important;font-size:10.5px!important;border-radius:13px!important}

  /* Profile settings sheets redesign. */
  .profile-settings-overlay{align-items:center!important;padding:28px!important}
  .profile-sheet{width:min(760px,calc(100vw - 64px))!important;max-width:760px!important;max-height:calc(100dvh - 56px)!important;border-radius:26px!important}
  .profile-sheet-head{padding:20px 22px 18px!important}
  .profile-sheet-kicker{font-size:9px!important}
  .profile-sheet-title{font-size:22px!important}
  .profile-sheet-close{width:38px!important;height:38px!important;border-radius:12px!important}
  .profile-sheet-body{padding:18px!important;gap:12px!important}
  .profile-setting-label{font-size:9.5px!important;margin-bottom:10px!important}
  .profile-sheet-actions{padding:13px 18px 16px!important}
  .profile-sheet-save{height:46px!important;font-size:10.5px!important;border-radius:13px!important}
}

@media(min-width:1100px){
  .screen .nav-i{font-size:11px!important}
  .screen .nav-i svg,.screen .nav-i .crm-glyph{width:26px!important;height:26px!important;flex-basis:26px!important}
  .screen[data-page="home"] .user-stat-title{font-size:14.5px!important}
  .screen[data-page="tools"] .tool-list-title{font-size:16.5px!important}
  .screen[data-page="tools"] .tool-list-desc{font-size:12px!important}
}

/* Mobile keeps the new material language without desktop inflation. */
@media(max-width:767px){
  .crm-modal,.profile-sheet{background:rgba(9,13,21,.995)!important}
  .screen .tool-workspace-back,.screen .topbar .back{background:rgba(255,255,255,.085)!important}
}