/* ═══════════════════════════════════════════════════════════════
   AlphaHit Web App — Material Design 3 (dark-by-default)
   ═══════════════════════════════════════════════════════════════ */

/* ── Design Tokens ───────────────────────────────────────────── */
:root {
  color-scheme: dark light;
  /* Dark theme — Blue (default) */
  --md-primary:            #8AB4F8;
  --md-on-primary:         #0D2744;
  --md-primary-container:  #1A4B8C;
  --md-on-primary-container: #D4E4FF;

  --md-secondary:          #A8C7FA;
  --md-on-secondary:       #0D2744;
  --md-secondary-container:#1A3A6B;
  --md-on-secondary-container: #D4E4FF;

  --md-tertiary:           #7FCFCF;
  --md-on-tertiary:        #003737;

  --md-error:              #F2B8B5;
  --md-on-error:           #601410;

  --md-background:         #18191A;
  --md-on-background:      #E4E6EB;
  --md-surface:            #242526;
  --md-on-surface:         #E4E6EB;
  --md-surface-variant:    #3A3B3C;
  --md-on-surface-variant: #B0B3B8;

  --md-surface-container-lowest:  #18191A;
  --md-surface-container-low:     #242526;
  --md-surface-container:         #2F3031;
  --md-surface-container-high:    #3A3B3C;
  --md-surface-container-highest: #4E4F50;

  --md-outline:            #5A5C5E;
  --md-outline-variant:    #505253;

  /* Functional */
  --color-success:  #6DD58C;
  --color-warning:  #FFD700;
  --color-error:    #F2B8B5;
  --color-demo:     #FFB300;
  --color-ref:      #4CAF50;

  /* Typography */
  --font-family: 'Roboto', system-ui, sans-serif;
  --font-size-xs:   11px;
  --font-size-sm:   13px;
  --font-size-md:   14px;
  --font-size-base: 16px;
  --font-size-lg:   18px;
  --font-size-xl:   22px;
  --font-size-2xl:  28px;
  --font-size-3xl:  36px;

  /* Shape — умеренное скругление */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-full: 9999px;
  --radius-btn:  12px;   /* кнопки — не пилюля, но скруглены */
  --radius-card: 14px;   /* карточки */

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;  --sp-10: 40px;

  /* Layout */
  --top-bar-height:    56px;
  --bottom-nav-height: 44px;
  --side-nav-width:    260px;
  --content-max-width: 600px;

  /* Elevation */
  --shadow-1: 0 1px 4px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 3px 8px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.4);
  --shadow-3: 0 8px 24px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.4);

  /* Transitions */
  --transition: 200ms cubic-bezier(0.2, 0, 0, 1);
}

/* ── Scrollbar — адаптируется к теме ────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--md-outline) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--md-outline);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--md-on-surface-variant); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Light theme — Blue (default) */
[data-theme="light"] {
  --md-primary:              #1877F2;
  --md-on-primary:           #FFFFFF;
  --md-primary-container:    #D4E4FF;
  --md-on-primary-container: #0A2A5E;
  --md-secondary:            #42669A;
  --md-on-secondary:         #FFFFFF;
  --md-secondary-container:  #D4E4FF;
  --md-on-secondary-container: #0A2A5E;
  --md-tertiary:             #0288D1;
  --md-on-tertiary:          #FFFFFF;
  --md-error:                #B3261E;
  --md-on-error:             #FFFFFF;
  --md-background:           #F0F2F5;
  --md-on-background:        #1C1E21;
  --md-surface:              #FFFFFF;
  --md-on-surface:           #1C1E21;
  --md-surface-variant:      #E4E6EB;
  --md-on-surface-variant:   #606770;
  --md-surface-container-lowest:  #FFFFFF;
  --md-surface-container-low:     #FFFFFF;
  --md-surface-container:         #F0F2F5;
  --md-surface-container-high:    #E4E6EB;
  --md-surface-container-highest: #DADDE1;
  --md-outline:              #8A8D91;
  --md-outline-variant:      #CCD0D5;
  --color-success:  #2DA44E;
  --color-warning:  #E65100;
  --color-error:    #B3261E;
  --top-bar-color:           #000000;
  --shadow-1: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 2px 8px rgba(0,0,0,.1), 0 1px 4px rgba(0,0,0,.06);
  --shadow-3: 0 4px 16px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.06);
}

/* ── Skin: Purple ─────────────────────────────────────────── */
[data-skin="purple"] {
  --md-primary:            #B39DDB;
  --md-on-primary:         #1E0A45;
  --md-primary-container:  #4527A0;
  --md-on-primary-container: #EDE7F6;
  --md-secondary:          #CE93D8;
  --md-on-secondary:       #2C003E;
  --md-secondary-container:#4A148C;
  --md-on-secondary-container: #F3E5F5;
  --md-tertiary:           #80DEEA;
  --md-on-tertiary:        #003A40;
  --md-background:         #3a2f60;
  --md-on-background:      #EDE7F6;
  --md-surface:            #312858;
  --md-on-surface:         #EDE7F6;
  --md-surface-variant:    #3D3060;
  --md-on-surface-variant: #C5B8E8;
  --md-surface-container-lowest:  #120F28;
  --md-surface-container-low:     #201A3A;
  --md-surface-container:         #271F45;
  --md-surface-container-high:    #302850;
  --md-surface-container-highest: #3D3460;
  --md-outline:            #7B6FA5;
  --md-outline-variant:    #554880;
  --top-bar-bg:            rgba(32,26,60,0.88);
  --top-bar-border:        rgba(179,157,219,.12);

}
html[data-skin="purple"] {
  background: linear-gradient(135deg, #3a2f60 0%, #553f90 55%, #8860b8 100%);
}
[data-skin="purple"][data-theme="light"] {
  --md-primary:              #3700B3;
  --md-on-primary:           #FFFFFF;
  --md-primary-container:    #EDE7F6;
  --md-on-primary-container: #1A0045;
  --md-secondary:            #6A0080;
  --md-on-secondary:         #FFFFFF;
  --md-secondary-container:  #F3E5F5;
  --md-on-secondary-container: #300040;
  --md-background:           #d8d1ec;
  --md-on-background:        #1C1230;
  --md-surface:              #FFFFFF;
  --md-on-surface:           #1C1230;
  --md-surface-variant:      #E8E3F2;
  --md-on-surface-variant:   #5A5270;
  --md-surface-container-lowest:  #F8F5FF;
  --md-surface-container-low:     #FFFFFF;
  --md-surface-container:         #F4F0FC;
  --md-surface-container-high:    #ECE6F8;
  --md-surface-container-highest: #E2DAF4;
  --md-outline:              #7B6BA8;
  --md-outline-variant:      #B0A8D0;
  --top-bar-bg:              rgba(180,160,210,0.92);
  --top-bar-border:          rgba(100,70,160,.3);

}
html[data-skin="purple"][data-theme="light"] {
  background: linear-gradient(135deg, #8b95cb 0%, #9f8acc 100%);
}

/* ── Skin: Red (dark) ───────────────────────────────────────── */
[data-skin="red"] {
  --md-primary:            #FF4444;
  --md-on-primary:         #FFFFFF;
  --md-primary-container:  #D5052D;
  --md-on-primary-container: #FFD6D6;
  --md-secondary:          #FFAB91;
  --md-on-secondary:       #3E1A0A;
  --md-secondary-container:#BF360C;
  --md-on-secondary-container: #FFE0B2;
  --md-tertiary:           #FFD54F;
  --md-on-tertiary:        #3E2800;
  --md-error:              #F2B8B5;
  --md-on-error:           #601410;
  --md-background:         #1A0E0E;
  --md-on-background:      #F5DDDD;
  --md-surface:            #2C1616;
  --md-on-surface:         #F5DDDD;
  --md-surface-variant:    #3D2222;
  --md-on-surface-variant: #D4AAAA;
  --md-surface-container-lowest:  #120A0A;
  --md-surface-container-low:     #201212;
  --md-surface-container:         #2C1A1A;
  --md-surface-container-high:    #382222;
  --md-surface-container-highest: #4A2E2E;
  --md-outline:            #7A5555;
  --md-outline-variant:    #5A3838;
  --top-bar-bg:            rgba(44,22,22,0.96);
  --top-bar-border:        rgba(255,255,255,.1);
  --shadow-1: 0 1px 4px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 3px 8px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.5);
  --shadow-3: 0 8px 24px rgba(0,0,0,.6), 0 4px 8px rgba(0,0,0,.5);
}
html[data-skin="red"] {
  background: linear-gradient(135deg, #1A0E0E 0%, #3D1515 55%, #5C2020 100%);
}

/* ── Skin: Red (light) ─────────────────────────────────────── */
[data-skin="red"][data-theme="light"] {
  --md-primary:              #D5052D;
  --md-on-primary:           #FFFFFF;
  --md-primary-container:    #FFCDD2;
  --md-on-primary-container: #5A0A0A;
  --md-secondary:            #AD1457;
  --md-on-secondary:         #FFFFFF;
  --md-secondary-container:  #FCE4EC;
  --md-on-secondary-container: #4A0020;
  --md-tertiary:             #E65100;
  --md-on-tertiary:          #FFFFFF;
  --md-error:                #B3261E;
  --md-on-error:             #FFFFFF;
  --md-background:           #FBE9E7;
  --md-on-background:        #2C1210;
  --md-surface:              #FFFFFF;
  --md-on-surface:           #2C1210;
  --md-surface-variant:      #F5DDDD;
  --md-on-surface-variant:   #6D4040;
  --md-surface-container-lowest:  #FFFFFF;
  --md-surface-container-low:     #FFFFFF;
  --md-surface-container:         #FBE9E7;
  --md-surface-container-high:    #F5DDDD;
  --md-surface-container-highest: #EAC8C8;
  --md-outline:              #9E7070;
  --md-outline-variant:      #D4AAAA;
  --color-success: #2DA44E; --color-warning: #E65100; --color-error: #B3261E;
  --top-bar-bg:    rgba(235,200,200,0.92);
  --top-bar-border: rgba(198,40,40,.2);
  --shadow-1: 0 1px 3px rgba(100,20,20,.12), 0 1px 2px rgba(100,20,20,.08);
  --shadow-2: 0 2px 8px rgba(100,20,20,.12), 0 1px 4px rgba(100,20,20,.08);
  --shadow-3: 0 4px 16px rgba(100,20,20,.12), 0 2px 8px rgba(100,20,20,.08);
}
html[data-skin="red"][data-theme="light"] {
  background: linear-gradient(135deg, #F5C6C6 0%, #E8A5A5 100%);
}

/* ── Skin: Red — component overrides ───────────────────────── */
/* nav-item--active — цвет берётся из --md-primary автоматически */
[data-skin="red"][data-theme="light"] .icon-btn:hover { background: rgba(213,5,45,.08); }
[data-skin="red"][data-theme="light"] .btn--outlined { border-color: #D5052D; color: #D5052D; }
[data-skin="red"][data-theme="light"] .btn--outlined:hover { background: rgba(213,5,45,.08); }
[data-skin="red"][data-theme="light"] .side-nav { background: #FFFFFF; border-right: none; box-shadow: 3px 0 4px -1px rgba(0,0,0,.06); }
[data-skin="red"][data-theme="light"] .bottom-nav { background: #FFFFFF; border-top-color: #D4AAAA; }
[data-skin="red"][data-theme="light"] .top-player { background: rgba(255,255,255,0.96); }
[data-skin="red"][data-theme="light"] .field__input { background: #FFFFFF; border-color: #D4AAAA; color: #2C1210; }
[data-skin="red"][data-theme="light"] .chip--choice.selected { background: var(--md-primary-container); border-color: var(--md-primary); color: var(--md-on-primary-container); }
[data-skin="red"][data-theme="light"] .share-sheet__item:hover { background: rgba(198,40,40,.06); }

/* ── Skin: Green (dark) ────────────────────────────────────── */
[data-skin="green"] {
  --md-primary:            #4CAF50;
  --md-on-primary:         #FFFFFF;
  --md-primary-container:  #1B8A1F;
  --md-on-primary-container: #D4FFD4;
  --md-secondary:          #80CBC4;
  --md-on-secondary:       #0A3330;
  --md-secondary-container:#004D40;
  --md-on-secondary-container: #B2DFDB;
  --md-tertiary:           #FFF176;
  --md-on-tertiary:        #3E3800;
  --md-error:              #F2B8B5;
  --md-on-error:           #601410;
  --md-background:         #0E1A0E;
  --md-on-background:      #DDF0DD;
  --md-surface:            #162C16;
  --md-on-surface:         #DDF0DD;
  --md-surface-variant:    #223D22;
  --md-on-surface-variant: #AAD4AA;
  --md-surface-container-lowest:  #0A120A;
  --md-surface-container-low:     #122012;
  --md-surface-container:         #1A2C1A;
  --md-surface-container-high:    #223822;
  --md-surface-container-highest: #2E4A2E;
  --md-outline:            #557A55;
  --md-outline-variant:    #385A38;
  --top-bar-bg:            rgba(22,44,22,0.96);
  --top-bar-border:        rgba(255,255,255,.1);
  --shadow-1: 0 1px 4px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 3px 8px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.5);
  --shadow-3: 0 8px 24px rgba(0,0,0,.6), 0 4px 8px rgba(0,0,0,.5);
}
html[data-skin="green"] {
  background: linear-gradient(135deg, #0E1A0E 0%, #153D15 55%, #1E5C1E 100%);
}

/* ── Skin: Green (light) ───────────────────────────────────── */
[data-skin="green"][data-theme="light"] {
  --md-primary:              #1B8A1F;
  --md-on-primary:           #FFFFFF;
  --md-primary-container:    #C8E6C9;
  --md-on-primary-container: #0A3A0A;
  --md-secondary:            #00695C;
  --md-on-secondary:         #FFFFFF;
  --md-secondary-container:  #B2DFDB;
  --md-on-secondary-container: #002420;
  --md-tertiary:             #0288D1;
  --md-on-tertiary:          #FFFFFF;
  --md-error:                #B3261E;
  --md-on-error:             #FFFFFF;
  --md-background:           #E8F5E9;
  --md-on-background:        #1B2E1B;
  --md-surface:              #FFFFFF;
  --md-on-surface:           #1B2E1B;
  --md-surface-variant:      #DDF0DD;
  --md-on-surface-variant:   #406040;
  --md-surface-container-lowest:  #FFFFFF;
  --md-surface-container-low:     #FFFFFF;
  --md-surface-container:         #E8F5E9;
  --md-surface-container-high:    #DDF0DD;
  --md-surface-container-highest: #C8E6C9;
  --md-outline:              #70A070;
  --md-outline-variant:      #AAD4AA;
  --color-success: #2DA44E; --color-warning: #E65100; --color-error: #B3261E;
  --top-bar-bg:    rgba(200,230,200,0.92);
  --top-bar-border: rgba(46,125,50,.2);
  --shadow-1: 0 1px 3px rgba(20,60,20,.12), 0 1px 2px rgba(20,60,20,.08);
  --shadow-2: 0 2px 8px rgba(20,60,20,.12), 0 1px 4px rgba(20,60,20,.08);
  --shadow-3: 0 4px 16px rgba(20,60,20,.12), 0 2px 8px rgba(20,60,20,.08);
}
html[data-skin="green"][data-theme="light"] {
  background: linear-gradient(135deg, #C6E8C6 0%, #A5D4A5 100%);
}

/* ── Skin: Green — component overrides ─────────────────────── */
/* green nav-item--active — из --md-primary автоматически */
[data-skin="green"][data-theme="light"] .icon-btn:hover { background: rgba(27,138,31,.08); }
[data-skin="green"][data-theme="light"] .btn--outlined { border-color: #1B8A1F; color: #1B8A1F; }
[data-skin="green"][data-theme="light"] .btn--outlined:hover { background: rgba(27,138,31,.08); }
[data-skin="green"][data-theme="light"] .side-nav { background: #FFFFFF; border-right: none; box-shadow: 3px 0 4px -1px rgba(0,0,0,.06); }
[data-skin="green"][data-theme="light"] .bottom-nav { background: #FFFFFF; border-top-color: #AAD4AA; }
[data-skin="green"][data-theme="light"] .top-player { background: rgba(255,255,255,0.96); }
[data-skin="green"][data-theme="light"] .field__input { background: #FFFFFF; border-color: #AAD4AA; color: #1B2E1B; }
[data-skin="green"][data-theme="light"] .chip--choice.selected { background: var(--md-primary-container); border-color: var(--md-primary); color: var(--md-on-primary-container); }
[data-skin="green"][data-theme="light"] .share-sheet__item:hover { background: rgba(46,125,50,.06); }

/* ── Skin: Orange (dark) — Одноклассники ─────────────────── */
[data-skin="orange"] {
  --md-primary:            #FF8C00;
  --md-on-primary:         #2A1500;
  --md-primary-container:  #EE8208;
  --md-on-primary-container: #FFF0D6;
  --md-secondary:          #FFB347;
  --md-on-secondary:       #2E1E00;
  --md-secondary-container:#C45A00;
  --md-on-secondary-container: #FFD8A8;
  --md-tertiary:           #FFB74D;
  --md-on-tertiary:        #2A1500;
  --md-error:              #F2B8B5;
  --md-on-error:           #601410;
  --md-background:         #1C1104;
  --md-on-background:      #F5E6D0;
  --md-surface:            #2A1A08;
  --md-on-surface:         #F5E6D0;
  --md-surface-variant:    #3C2810;
  --md-on-surface-variant: #D4A060;
  --md-surface-container-lowest:  #140C02;
  --md-surface-container-low:     #221406;
  --md-surface-container:         #2E1E0A;
  --md-surface-container-high:    #3A2A14;
  --md-surface-container-highest: #6B5030;
  --md-outline:            #9A7040;
  --md-outline-variant:    #604020;
  --top-bar-bg:            rgba(60,30,0,0.95);
  --top-bar-border:        rgba(255,140,0,.3);
  --shadow-1: 0 1px 4px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 3px 8px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.5);
  --shadow-3: 0 8px 24px rgba(0,0,0,.6), 0 4px 8px rgba(0,0,0,.5);
}
html[data-skin="orange"] {
  background: linear-gradient(135deg, #1C1104 0%, #3A2000 55%, #5C3200 100%);
}

/* ── Skin: Orange (light) ────────────────────────────────── */
[data-skin="orange"][data-theme="light"] {
  --md-primary:              #EE8208;
  --md-on-primary:           #FFFFFF;
  --md-primary-container:    #FFE0B2;
  --md-on-primary-container: #3E1F00;
  --md-secondary:            #F57C00;
  --md-on-secondary:         #FFFFFF;
  --md-secondary-container:  #FFF3E0;
  --md-on-secondary-container: #3E2800;
  --md-tertiary:             #E68A00;
  --md-on-tertiary:          #FFFFFF;
  --md-error:                #B3261E;
  --md-on-error:             #FFFFFF;
  --md-background:           #FFF8F0;
  --md-on-background:        #0D0700;
  --md-surface:              #FFFFFF;
  --md-on-surface:           #0D0700;
  --md-surface-variant:      #FFE8CC;
  --md-on-surface-variant:   #331A00;
  --md-surface-container-lowest:  #FFFFFF;
  --md-surface-container-low:     #FFFFFF;
  --md-surface-container:         #FFF3E0;
  --md-surface-container-high:    #FFE0B2;
  --md-surface-container-highest: #FFD180;
  --md-outline:              #B07830;
  --md-outline-variant:      #D4A060;
  --color-success: #2DA44E; --color-warning: #E65100; --color-error: #B3261E;
  --top-bar-bg:    rgba(255,240,220,0.92);
  --top-bar-border: rgba(238,130,8,.25);
  --shadow-1: 0 1px 3px rgba(60,30,0,.12), 0 1px 2px rgba(60,30,0,.08);
  --shadow-2: 0 2px 8px rgba(60,30,0,.12), 0 1px 4px rgba(60,30,0,.08);
  --shadow-3: 0 4px 16px rgba(60,30,0,.12), 0 2px 8px rgba(60,30,0,.08);
}
html[data-skin="orange"][data-theme="light"] {
  background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
}

/* ── Skin: Orange — component overrides ──────────────────── */
/* Dark: side-nav и bottom-nav — как хедер, чуть светлее */
[data-skin="orange"] .side-nav {
  background: rgba(80,45,10,0.95) !important;
  border-right-color: rgba(255,160,40,.15);
}
[data-skin="orange"] .bottom-nav {
  background: rgba(80,45,10,0.95) !important;
  border-top-color: rgba(255,160,40,.15);
}
/* orange nav-item--active — из --md-primary автоматически */
[data-skin="orange"][data-theme="light"] .top-bar {
  background: #FFF0E0 !important;
  border-bottom-color: rgba(238,130,8,.15) !important;
}
[data-skin="orange"][data-theme="light"] .side-nav {
  background: #FFF4EA !important;
  border-right-color: rgba(238,130,8,.1);
}
[data-skin="orange"][data-theme="light"] .bottom-nav {
  background: #FFF4EA !important;
  border-top-color: rgba(238,130,8,.1);
}
[data-skin="orange"][data-theme="light"] .icon-btn:hover { background: rgba(238,130,8,.08); }
[data-skin="orange"][data-theme="light"] .btn--outlined { border-color: #EE8208; color: #EE8208; }
[data-skin="orange"][data-theme="light"] .btn--outlined:hover { background: rgba(238,130,8,.08); }
[data-skin="orange"][data-theme="light"] .bottom-nav { background: #FFF8F0; border-top-color: rgba(238,130,8,.15); }
[data-skin="orange"][data-theme="light"] .top-player { background: rgba(255,248,240,0.96); }
[data-skin="orange"][data-theme="light"] .field__input { background: #FFFFFF; border-color: #D4AA7A; color: #2E1B08; }
[data-skin="orange"][data-theme="light"] .chip--choice.selected { background: var(--md-primary-container); border-color: var(--md-primary); color: var(--md-on-primary-container); }
[data-skin="orange"][data-theme="light"] .share-sheet__item:hover { background: rgba(230,81,0,.06); }

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
button:focus-visible, .icon-btn:focus-visible, [onclick]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(208,188,255,.4);
  border-radius: 12px;
}
[data-post-player] {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  border: none;
  background: var(--md-surface-container);
  border-radius: 12px;
  padding: 6px 10px;
}
textarea {
  max-height: 50dvh;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

html {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--md-on-background);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background: #18191A;
  background-attachment: scroll;
}

html[data-theme="light"] {
  background: #F0F2F5;
  background-attachment: scroll;
}

body {
  position: relative;
  min-height: 100dvh;
  padding-top: var(--top-bar-height);
  padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  /* Solid fallback so transparent elements never show the WebView's native background */
  background-color: var(--md-background);
  /* Блокируем pull-to-refresh на мобильных (перетаскивание вниз не обновляет страницу) */
  overscroll-behavior-y: contain;
}
/* body.player-open padding-top is refined by JS; CSS provides fallback for desktop */
body.player-open { padding-top: calc(var(--top-bar-height) + 64px); }

a { color: var(--md-primary); text-decoration: none; }
a:hover { text-decoration: none; }
.app-logo:hover,
.nav-item:hover,
.home-action-btn:hover,
.quick-tile:hover,
.side-nav__item:hover { text-decoration: none; }

img { max-width: 100%; display: block; }

/* ── Top App Bar ────────────────────────────────────────────── */
.top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  isolation: isolate;
  height: var(--top-bar-height);
  background: var(--top-bar-bg, rgba(14,30,60,0.92));
  color: var(--top-bar-color, var(--md-primary));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-2);
  gap: var(--sp-2);
  z-index: 200;
  border-bottom: 1px solid var(--top-bar-border, rgba(138,180,248,.10));
}
.top-bar .icon-btn,
.top-bar .material-symbols-rounded,
.top-bar__avatar-icon { color: var(--top-bar-color, var(--md-primary)); }

.top-bar__leading { display: flex; align-items: center; }
.top-bar__title   {
  flex: 1; min-width: 0;
  font-size: var(--font-size-lg); font-weight: 500; padding-left: var(--sp-2);
  white-space: nowrap; overflow: hidden;
  /* Fade-затемнение справа — текст плавно исчезает перед кнопками */
  -webkit-mask-image: linear-gradient(to right, #000 70%, transparent 100%);
  mask-image: linear-gradient(to right, #000 70%, transparent 100%);
}
.top-bar__actions { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
@media (max-width: 767px) { .top-bar__actions { gap: 0; } .top-bar__actions .icon-btn + .icon-btn { margin-left: -6px; } }
body.force-mobile .top-bar__actions { gap: 0; }
body.force-mobile .top-bar__actions .icon-btn + .icon-btn { margin-left: -6px; }
/* ОК мини-приложение — нависающая кнопка ОК справа вверху (только мобильный) */
@media (max-width: 767px) {
  body.ok-miniapp .top-bar__actions { padding-right: 81px; gap: 0; }
  body.ok-miniapp .top-bar__actions .icon-btn + .icon-btn { margin-left: -6px; }
}
body.ok-miniapp.force-mobile .top-bar__actions { padding-right: 81px; gap: 0; }
body.ok-miniapp.force-mobile .top-bar__actions .icon-btn + .icon-btn { margin-left: -6px; }
/* VK мини-приложение — кнопка «...» справа вверху */
@media (max-width: 767px) {
  body.vk-miniapp .top-bar__actions { padding-right: 81px; gap: 0; }
  body.vk-miniapp .top-bar__actions .icon-btn + .icon-btn { margin-left: -6px; }
}
body.vk-miniapp.force-mobile .top-bar__actions { padding-right: 81px; gap: 0; }
body.vk-miniapp.force-mobile .top-bar__actions .icon-btn + .icon-btn { margin-left: -6px; }
.top-bar__avatar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  margin-left: var(--sp-1);
  transition: opacity var(--transition);
}
.top-bar__avatar-btn:hover { opacity: .8; }
.top-bar__avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.top-bar__avatar-icon {
  font-size: 38px;
  color: var(--md-on-surface-variant);
  line-height: 1;
}

.app-logo { display: flex; align-items: center; gap: var(--sp-2); padding-left: var(--sp-2); text-decoration: none; }

/* Centered logo in top-bar: absolute, independent of neighbour widths */
.app-logo--center {
  position: static;
  transform: none;
  padding-left: 0;
}
@media (min-width: 768px) {
  body:not(.force-mobile):not(.no-sidenav) .app-logo--center {
    position: absolute;
    left: calc(50% + var(--side-nav-width) / 2);
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
.app-logo .material-symbols-rounded { color: var(--md-primary); font-size: 28px; }
.app-logo__text { font-size: var(--font-size-lg); font-weight: 700; color: var(--md-primary); }
@media (max-width: 380px) { .app-logo__text { display: none; } }

/* ── Main Content ───────────────────────────────────────────── */
.main-content {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--sp-4);
}

/* ── Bottom Navigation ──────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  /* Total height = nav content + safe area */
  height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  background: var(--md-surface-container-highest);
  display: flex;
  align-items: stretch; /* items stretch to fill the content area only */
  border-top: 1px solid var(--md-outline-variant);
  box-shadow: 0 -2px 4px -1px rgba(0,0,0,.1);
  z-index: 200;
  /* padding-bottom carves out safe area from the content box → items never enter it */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--md-on-surface-variant);
  transition: color var(--transition);
  padding: 4px 0;
  cursor: pointer;
  text-decoration: none;
  position: relative;
}

.nav-item--active {
  color: var(--md-primary);
  background: color-mix(in srgb, var(--md-primary) 20%, transparent);
  border-radius: 12px;
}

.nav-item__icon { font-size: 20px; position: relative; line-height: 1; }
.nav-item__label { font-size: 10px; font-weight: 500; line-height: 1; }
.nav-item__avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

/* ── Side Navigation (desktop) ──────────────────────────────── */
.side-nav {
  display: none;
  position: fixed;
  top: var(--top-bar-height);
  left: 0;
  bottom: 0;
  width: var(--side-nav-width);
  background: rgba(28,22,52,0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-right: 1px solid rgba(180,150,255,.10);
  flex-direction: column;
  padding: var(--sp-4) 0;
  z-index: 100;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
/* Desktop: menu is part of the page — scrolls with content, stretches full height */
@media (min-width: 768px) {
  body:not(.force-mobile):not(.no-sidenav) .side-nav {
    position: absolute;
    top: var(--top-bar-height);
    bottom: 0;
    min-height: calc(100vh - var(--top-bar-height));
    overflow-y: visible;
    background: var(--md-surface-container-highest);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-right: none;
    box-shadow: 3px 0 4px -1px rgba(0,0,0,.1);
  }
}

.side-nav__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-5);
  margin-bottom: var(--sp-1);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--md-primary);
}

.side-nav__toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3) var(--sp-3);
  border-bottom: none;
  margin-bottom: var(--sp-2);
  position: relative;
}
.side-nav__toolbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 12px; right: 12px;
  height: 1px;
  background: var(--md-on-surface);
  opacity: .3;
}
.side-nav__toolbar .icon-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  color: var(--md-on-surface-variant);
  flex-shrink: 0;
}
.side-nav__toolbar .icon-btn:hover {
  background: rgba(255,255,255,.08);
  color: var(--md-on-surface);
}
.side-nav__items { flex: 1; padding: 0 var(--sp-3); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.side-nav__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px var(--sp-4);
  border-radius: var(--radius-full);
  color: var(--md-on-surface-variant);
  font-size: var(--font-size-md);
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
  margin-bottom: 2px;
  cursor: pointer;
  text-decoration: none;
}
.side-nav__item:hover { background: rgba(255,255,255,.08); color: var(--md-on-surface); text-decoration: none; }
.side-nav__item--active { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.side-nav__item--logout { color: var(--md-error); margin-top: var(--sp-2); }
.side-nav__footer { padding: var(--sp-3); padding-bottom: calc(var(--sp-3) + var(--bottom-nav-height)); }
@media (min-width: 768px) {
  .side-nav__footer { padding-bottom: var(--sp-3); }
  body:not(.force-mobile) .side-nav__items { flex: none; }
}
.side-nav__avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* Side-nav expandable group */
.side-nav__group { position: relative; }
.side-nav__subitems { display: none; flex-direction: column; padding-left: var(--sp-4); }
/* Только прямые subitems группы — не вложенных подгрупп */
.side-nav__group--open > .side-nav__subitems { display: flex; }
.side-nav__subitem { font-size: var(--font-size-sm, .85rem); padding: 5px var(--sp-4); margin-bottom: 2px; }
.side-nav__expand-icon { margin-left: auto; font-size: 20px; transition: transform 0.2s ease; }
.side-nav__group--open .side-nav__expand-icon { transform: rotate(180deg); }
.side-nav__badge { background: var(--md-error); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 10px; margin-left: auto; flex-shrink: 0; }
.side-nav__item--parent .side-nav__badge { margin-left: 0; margin-right: var(--sp-1); }

/* Mobile hamburger — only shown on mobile or force-mobile */
.mobile-menu-btn { display: inline-flex; }
@media (min-width: 768px) {
  body:not(.force-mobile) .mobile-menu-btn { display: none !important; }
}
body.force-mobile .mobile-menu-btn { display: inline-flex !important; }

/* Mobile side nav overlay */
.side-nav-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99;
  backdrop-filter: blur(2px);
}
.side-nav-overlay--open { display: block; }

/* Lock body scroll when mobile side-nav is open, but allow scrolling inside the nav */
body.sidenav-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  /* overscroll-behavior prevents pull-to-refresh while body is locked */
  overscroll-behavior: none;
  touch-action: none;
}
/* touch-action: none on overlay only — the nav itself keeps pan-y for scrolling */
body.sidenav-open .side-nav-overlay { touch-action: none; }
/* Allow touch scrolling inside the nav itself */
body.sidenav-open .side-nav { touch-action: pan-y; }

/* Side nav mobile drawer */
.side-nav {
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.2,0,0,1);
}
.side-nav--open { transform: translateX(0) !important; display: flex !important; }

/* Desktop: show side nav, adjust layout */
@media (min-width: 768px) {
  body { padding-bottom: 0; }
  body:not(.no-sidenav) { padding-left: var(--side-nav-width); }
  .bottom-nav { display: none; }
  body:not(.no-sidenav) .side-nav {
    display: flex;
    transform: translateX(0);
  }
  .desktop-only { display: inline-flex; }
  .mobile-menu-btn { display: none; }
}

/* Force mobile layout (toggle button) */
body.force-mobile { padding-left: 0 !important; padding-bottom: var(--bottom-nav-height) !important; }
body.force-mobile .side-nav { transform: translateX(-100%) !important; display: none !important; }
body.force-mobile .side-nav--open { display: flex !important; transform: translateX(0) !important; }
body.force-mobile .bottom-nav { display: flex !important; }
body.force-mobile .desktop-only { display: none !important; }
body.force-mobile .mobile-menu-btn { display: inline-flex !important; }

/* Force desktop layout (VK Mini App на десктопе — узкий iframe, но нужен десктопный вид) */
body.force-desktop { padding-bottom: 0 !important; }
body.force-desktop:not(.no-sidenav) { padding-left: var(--side-nav-width) !important; }
body.force-desktop:not(.no-sidenav) .side-nav {
  display: flex !important;
  position: absolute !important;
  top: var(--top-bar-height) !important;
  bottom: 0 !important;
  min-height: calc(100vh - var(--top-bar-height)) !important;
  overflow-y: visible !important;
  background: var(--md-surface-container-highest) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-right: none !important;
  box-shadow: 3px 0 4px -1px rgba(0,0,0,.1) !important;
  transform: translateX(0) !important;
}
body.force-desktop .bottom-nav { display: none !important; }
body.force-desktop .mobile-menu-btn { display: none !important; }
body.force-desktop .desktop-only { display: initial !important; }
body.force-desktop:not(.no-sidenav) .app-logo--center {
  position: absolute !important;
  left: calc(50% + var(--side-nav-width) / 2) !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}
body.force-desktop .side-nav__items { flex: none !important; }
body.force-desktop .side-nav__footer { padding-bottom: var(--sp-3) !important; }
body.force-desktop .top-player { left: var(--side-nav-width) !important; gap: 2px !important; }
body.force-desktop .top-player .icon-btn { width: 34px !important; height: 34px !important; }

/* Hide desktop-only on mobile */
.desktop-only { display: none; }


/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--md-surface-container-low);
  border-radius: var(--radius-card);
  padding: var(--sp-4);
  margin-bottom: var(--sp-2);
  box-shadow: var(--shadow-1);
}

[data-theme="light"] .card {
  background: #FFFFFF;
  box-shadow: 0 2px 12px rgba(50,30,100,.10), 0 1px 3px rgba(50,30,100,.06);
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 11px 24px;
  border-radius: var(--radius-btn);
  font-size: var(--font-size-md);
  font-weight: 500;
  font-family: var(--font-family);
  cursor: pointer;
  border: none;
  transition: background var(--transition), box-shadow var(--transition), opacity var(--transition), filter var(--transition);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.1px;
}

.btn--filled {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  box-shadow: 0 4px 14px rgba(102,126,234,0.35);
}
.btn--filled:hover { filter: brightness(1.1); box-shadow: 0 6px 20px rgba(102,126,234,0.45); text-decoration: none; color: #fff; }

.btn--gradient-reverse {
  background: linear-gradient(135deg, #764ba2, #667eea);
  color: #fff;
  box-shadow: 0 4px 14px rgba(118,75,162,0.35);
}
.btn--gradient-reverse:hover { filter: brightness(1.1); box-shadow: 0 6px 20px rgba(118,75,162,0.45); text-decoration: none; color: #fff; }

.btn--outlined {
  background: transparent;
  color: var(--md-primary);
  border: 1.5px solid var(--md-outline);
}
.btn--outlined:hover { background: rgba(208,188,255,.08); text-decoration: none; }

.btn--tonal {
  background: color-mix(in srgb, var(--md-primary) 15%, transparent);
  color: var(--md-primary);
}
.btn--tonal:hover { background: color-mix(in srgb, var(--md-primary) 25%, transparent); }

.btn--text {
  background: transparent;
  color: var(--md-primary);
  padding: 10px 16px;
}
.btn--text:hover { background: rgba(208,188,255,.08); text-decoration: none; }

.btn--full { width: 100%; }
.btn--large { padding: 14px 28px; font-size: var(--font-size-base); }
.btn--sm { padding: 6px 16px; font-size: var(--font-size-sm); }

.btn--tg { background: #229ED9; color: #fff; }
.btn--tg:hover { background: #1a8bc4; text-decoration: none; color: #fff; }

.btn:disabled { opacity: 0.38; cursor: not-allowed; }

/* ── Icon Button ────────────────────────────────────────────── */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  transition: background var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover { background: rgba(255,255,255,.1); }
.icon-btn .material-symbols-rounded { font-size: 22px; }

/* ── Fields ─────────────────────────────────────────────────── */
.field { margin-bottom: var(--sp-4); }

.field__label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--md-on-surface-variant);
  margin-bottom: var(--sp-1);
  font-weight: 500;
}

.field__wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.field__input {
  width: 100%;
  background: var(--md-surface-container-high);
  border: 1.5px solid var(--md-outline);
  border-radius: var(--radius-md);
  color: var(--md-on-surface);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  padding: 12px 16px;
  outline: none;
  transition: border-color var(--transition);
  -webkit-appearance: none;
}

.field__input:focus { border-color: var(--md-primary); }

.field__input::placeholder { color: var(--md-on-surface-variant); }

textarea.field__input {
  resize: vertical;
  padding: 12px 16px;
  min-height: 100px;
  max-height: 50dvh;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.field__textarea { padding: 12px 16px !important; }
.field__textarea--tall {
  min-height: 260px;
}

.field__icon {
  position: absolute;
  left: 12px;
  font-size: 20px;
  color: var(--md-on-surface-variant);
  pointer-events: none;
}
.field__icon--right {
  position: absolute;
  right: 4px;
  left: auto;
  pointer-events: all;
}
.field__icon--top { top: 8px; align-self: flex-start; }

.field__toggle { position: absolute; right: 4px; pointer-events: all; }
.field__hint { font-size: var(--font-size-xs); color: var(--md-on-surface-variant); margin-top: 4px; }

/* No left icon — compact inputs (no icon prefix) */
.field__wrap input.field__input { padding-left: 44px; }

/* ── Chips ───────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border: 1.5px solid var(--md-outline-variant);
  background: transparent;
  color: var(--md-on-surface-variant);
  cursor: default;
}

.chip--choice {
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  border: 1.5px solid var(--md-outline-variant);
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  font-family: var(--font-family);
}
.chip--choice:hover { background: var(--md-surface-container-highest); }
.chip--choice.selected {
  background: var(--md-secondary-container);
  border-color: var(--md-secondary);
  color: var(--md-on-secondary-container);
}

.chip--demo { background: rgba(255,179,0,.15); color: var(--color-demo); border-color: var(--color-demo); }
.chip--ref  { background: rgba(76,175,80,.15); color: var(--color-ref); border-color: var(--color-ref); }
.chip--info { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border: none; }
.chip--active { background: rgba(109,213,140,.15); color: var(--color-success); border-color: var(--color-success); }
.chip--inactive { background: rgba(242,184,181,.1); color: var(--color-error); border-color: var(--color-error); }
.chip--sm { font-size: 11px; padding: 3px 10px; }
.chip--custom { border-style: dashed; }

/* ── Mic recording animation ─────────────────────────────────── */
@keyframes mic-pulse {
  0%, 100% { color: var(--md-error); opacity: 1; }
  50%       { color: var(--md-error); opacity: 0.4; }
}
.mic--recording {
  animation: mic-pulse 1s ease-in-out infinite;
  color: var(--md-error) !important;
}

/* ── FAB Group ───────────────────────────────────────────────── */
.fab-group {
  position: fixed;
  bottom: calc(var(--bottom-nav-height) + var(--sp-4));
  right: var(--sp-4);
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  z-index: 150;
}

.fab {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s, box-shadow 0.2s;
  padding: 0;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #667eea, #764ba2);
}
.fab:hover { transform: scale(1.1) translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.4); text-decoration: none; }
.fab:active { transform: scale(0.95); }
.fab .material-symbols-rounded { font-size: 26px; color: #fff; }

.fab--alt { background: linear-gradient(135deg, #667eea, #764ba2); }

/* Tooltip (desktop only) */
.fab[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 64px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(30,20,60,0.9);
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.fab[data-tooltip]:hover::after { opacity: 1; }

/* Mobile scroll-to-top */
.scroll-top-mobile {
  display: none;
  position: fixed;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 16px);
  right: 12px;
  z-index: 151;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
/* Desktop scroll-to-top (fab, left of fab-group) */
.scroll-top-desktop {
  display: none;
  position: fixed;
  bottom: var(--sp-6);
  right: calc(var(--sp-4) + 56px + 16px);
  z-index: 151;
}
@media (max-width: 768px) {
  .scroll-top-desktop { display: none !important; }
}
@media (min-width: 769px) {
  body:not(.force-mobile) .scroll-top-mobile { display: none !important; }
  .fab-group { bottom: var(--sp-6); }
}
@media (max-width: 768px) {
  .fab[data-tooltip]::after { display: none; }
  .fab-group { display: none; }
}
body.force-mobile .fab-group { display: none !important; }
body.force-mobile .scroll-top-desktop { display: none !important; }

/* Кнопка чата внутри FAB-группы (скрыта по умолчанию, показывается через JS из конфига) */
.fab-chat-btn { text-decoration: none; }
.fab-chat-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--md-error);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  pointer-events: none;
}

/* ── Попап чата (десктоп) ──────────────────────────────────── */
.chat-popup {
  display: none;
  position: fixed;
  bottom: var(--sp-6);
  right: calc(var(--sp-4) + 56px + 16px);
  width: 360px;
  height: 520px;
  max-height: calc(100vh - var(--top-bar-height) - var(--sp-6) - var(--sp-2));
  background: var(--md-surface);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
  z-index: 300;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--md-outline-variant);
  min-height: 300px;
}
/* При открытом плеере — уменьшаем max-height на высоту плеера */
body.player-open .chat-popup {
  max-height: calc(100vh - var(--top-bar-height) - var(--top-player-h, 64px) - var(--sp-6) - var(--sp-2));
}
/* Ручка ресайза (верхняя граница попапа) */
.cp-resize-handle {
  height: 6px;
  cursor: ns-resize;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cp-resize-handle::after {
  content: '';
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: var(--md-outline-variant);
}
.cp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.cp-hdr-btn {
  border: none;
  background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .15s;
}
.cp-hdr-btn:hover { background: var(--md-surface-container-high); }
.cp-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Список диалогов */
.cp-section { padding: 10px 14px 4px; font-size: 10px; font-weight: 600; color: var(--md-on-surface-variant); text-transform: uppercase; letter-spacing: .5px; }
.cp-conv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background .15s;
}
.cp-conv-item:hover { background: var(--md-surface-container); }
.cp-conv-item:active { background: var(--md-surface-container-high); }
.cp-ava-wrap { position: relative; flex-shrink: 0; }
.cp-ava { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.cp-ava-ph { width: 38px; height: 38px; border-radius: 50%; background: var(--md-surface-container-high); display: flex; align-items: center; justify-content: center; }
.cp-online-dot { position: absolute; bottom: 0; right: 0; width: 8px; height: 8px; border-radius: 50%; background: #4caf50; border: 2px solid var(--md-surface); display: none; }
.cp-conv-body { flex: 1; min-width: 0; }
.cp-conv-top { display: flex; align-items: center; gap: 4px; }
.cp-conv-name { font-size: 12px; font-weight: 600; color: var(--md-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-conv-time { font-size: 9px; color: var(--md-on-surface-variant); margin-left: auto; flex-shrink: 0; }
.cp-conv-preview { font-size: 11px; color: var(--md-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.cp-badge { background: var(--md-primary); color: var(--md-on-primary); font-size: 9px; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; flex-shrink: 0; }

/* Комната чата в попапе */
.cp-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overscroll-behavior: contain;
  background: url('/static/img/fon01.jpg') repeat;
  background-size: 144px;
  background-color: var(--md-background);
  position: relative;
}
.cp-messages { clip-path: inset(0); }
.cp-messages::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--md-background);
  opacity: .6;
  pointer-events: none;
  z-index: 0;
}
.cp-messages > * { position: relative; z-index: 1; }
.cp-msg {
  max-width: 82%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.4;
  word-break: break-word;
}
.cp-msg--self { align-self: flex-end; background: var(--md-primary); color: var(--md-on-primary); border-bottom-right-radius: 4px; }
.cp-msg--partner { align-self: flex-start; background: color-mix(in srgb, var(--md-primary) 25%, var(--md-surface-container-high)); color: var(--md-on-surface); border-bottom-left-radius: 4px; }
.cp-msg__time { font-size: 9px; opacity: .6; margin-top: 2px; display: flex; align-items: center; gap: 3px; }
.cp-msg:has(.cp-reactions:not(:empty)) { margin-bottom: 14px; }
.cp-empty { flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; color: var(--md-on-surface-variant); }
.cp-load-more { text-align: center; padding: 6px; font-size: 10px; color: var(--md-primary); cursor: pointer; }
.cp-typing { padding: 0; font-size: 10px; color: var(--md-on-surface-variant); min-height: 0; flex-shrink: 0; position: relative; z-index: 2; }
.cp-typing:not(:empty) { padding: 2px 14px; }
.cp-input {
  display: flex;
  gap: 6px;
  padding: 6px 10px;
  border-top: 1px solid var(--md-outline-variant);
  background: var(--md-surface);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.cp-input input {
  flex: 1;
  border: 1px solid var(--md-outline-variant);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  outline: none;
}
.cp-input input:focus { border-color: var(--md-primary); }
.cp-input button {
  border: none;
  background: var(--md-primary);
  color: var(--md-on-primary);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

/* Скрыть попап на мобильных */
@media (max-width: 768px) { .chat-popup { display: none !important; } }
body.force-mobile .chat-popup { display: none !important; }

/* ── Flash / Snackbar ────────────────────────────────────────── */
.flash-container {
  position: fixed;
  top: calc(var(--top-bar-height) + var(--sp-2));
  left: 50%;
  transform: translateX(-50%);
  width: min(400px, calc(100vw - 2rem));
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.flash {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--md-surface-container-highest);
  color: var(--md-on-surface);
  box-shadow: var(--shadow-2);
  font-size: var(--font-size-sm);
}
.flash--error { background: var(--md-on-error); color: var(--md-error); }
.flash__icon { font-size: 20px; }
.flash__close { margin-left: auto; }

.snackbar {
  position: fixed;
  bottom: calc(var(--bottom-nav-height) + var(--sp-4));
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--md-surface-container-highest);
  color: var(--md-on-surface);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  white-space: pre-line;
  text-align: center;
}
.snackbar.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (min-width: 768px) {
  .snackbar { bottom: var(--sp-6); }
}

/* ── Bottom Sheet ────────────────────────────────────────────── */
.bottom-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--md-surface-container-low);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--sp-6) var(--sp-5);
  z-index: 500;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
  max-height: 80dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.bottom-sheet--open { transform: translateY(0); }
.bottom-sheet__handle {
  width: 32px; height: 4px;
  background: var(--md-outline);
  border-radius: 2px;
  margin: 0 auto var(--sp-5);
}
.bottom-sheet__title { font-size: var(--font-size-lg); font-weight: 600; margin-bottom: var(--sp-4); }
.bottom-sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 499;
}

/* ── Toggle ──────────────────────────────────────────────────── */
.toggle { position: relative; display: inline-block; width: 52px; height: 32px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle__slider {
  position: absolute;
  inset: 0;
  background: var(--md-surface-variant);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 0.2s;
}
.toggle__slider::before {
  content: '';
  position: absolute;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--md-outline);
  top: 4px; left: 4px;
  transition: transform 0.2s, background 0.2s;
}
.toggle input:checked + .toggle__slider { background: var(--md-primary-container); }
.toggle input:checked + .toggle__slider::before {
  transform: translateX(20px);
  background: var(--md-primary);
}

/* ── Loader ──────────────────────────────────────────────────── */
.loader-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-8) 0;
  color: #fff;
}

.loader-ring {
  width: 48px; height: 48px;
  border: 4px solid var(--md-surface-variant);
  border-top-color: var(--md-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }

/* ── Auth page ───────────────────────────────────────────────── */
/* Auth page inherits gradient from html element — no override needed */
.auth-page .main-content {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-4);
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-8);
}

.auth-container { width: 100%; max-width: 400px; }

.auth-card {
  padding: var(--sp-8) var(--sp-6);
  border-radius: var(--radius-xl);
}

.auth-card__logo {
  text-align: center;
  margin-bottom: var(--sp-8);
}
.auth-card__icon {
  font-size: 64px;
  color: var(--md-primary);
  display: block;
  margin-bottom: var(--sp-2);
}
.auth-card__title { font-size: var(--font-size-2xl); font-weight: 700; }
.auth-card__subtitle { color: var(--md-on-surface-variant); font-size: var(--font-size-sm); margin-top: var(--sp-1); }

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
  color: var(--md-on-surface-variant);
  font-size: var(--font-size-sm);
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1;
  height: 1px;
  background: var(--md-outline-variant);
}

.auth-footer {
  text-align: center;
  margin-top: var(--sp-5);
  font-size: var(--font-size-sm);
  color: var(--md-on-surface-variant);
}
.link { color: var(--md-primary); text-decoration: underline; }

/* ── Login posts ─────────────────────────────────────────────── */
.auth-posts {
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.auth-post {
  width: 100%;
  box-sizing: border-box;
  padding: var(--sp-5) var(--sp-5);
  border-radius: var(--radius-xl);
}
.auth-post__header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.auth-post__icon {
  color: var(--md-primary);
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}
.auth-post__title {
  font-weight: 600;
  font-size: var(--font-size-base);
  line-height: 1.4;
}
.auth-post__body {
  font-size: var(--font-size-sm);
  color: var(--md-on-surface-variant);
  line-height: 1.5;
  margin-bottom: var(--sp-3);
  white-space: pre-line;
}
.auth-post__tracks {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.lp-track {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--md-surface-container);
  border-radius: 12px;
  padding: var(--sp-2) var(--sp-3);
}
.lp-track__play .material-symbols-rounded {
  font-size: 32px;
  color: var(--md-primary);
  transition: opacity .15s;
}
.lp-track__info {
  flex: 1;
  min-width: 0;
}
.lp-track__title {
  font-size: var(--font-size-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.lp-track__progress {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.lp-track__seek {
  flex: 1;
  height: 3px;
  accent-color: var(--md-primary);
  cursor: pointer;
}
.lp-track__seek:disabled { opacity: .4; cursor: default; }
.lp-track__time {
  font-size: 11px;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
  flex-shrink: 0;
}

.auth-post__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.auth-post__buttons .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

/* ── Home page ───────────────────────────────────────────────── */
.page-home { padding-bottom: var(--sp-4); }

/* Home action buttons (Поделиться / Пополнить / Промокод) */
/* Quick nav icons row */
.home-sticky-bar {
  padding: var(--sp-2) var(--sp-3) 0;
  margin: calc(-1 * var(--sp-4) - 2px) calc(-1 * var(--sp-3)) 0;
}
@media (max-width: 767px) {
  .home-sticky-bar {
    padding-top: var(--sp-3);
    margin-bottom: calc(-1 * var(--sp-2));
  }
}
/* Анонимный режим — без отступов сверху (перед баром нет контента) */
.home-sticky-bar--anon { margin-top: calc(-1 * var(--sp-4)) !important; padding-top: 0 !important; }
@media (min-width: 768px) {
  .home-sticky-bar {
    position: sticky;
    top: var(--top-bar-height);
    z-index: 20;
    background: var(--md-background);
    box-shadow: 0 6px 6px -6px rgba(0,0,0,.3);
  }
  body.player-open .home-sticky-bar {
    top: calc(var(--top-bar-height) + var(--top-player-h, 64px));
  }
}
/* Blog body: override inline colors and restore block formatting from pasted content */
.blog-body, .blog-body * { color: var(--md-on-surface) !important; }
.blog-body { word-break: break-word; overflow-wrap: break-word; }
.blog-body p { display: block !important; margin: var(--sp-2) 0 !important; }
.blog-body br { display: block; content: ""; margin: var(--sp-1) 0; }
.blog-body h1 { display: block !important; margin: 48px 0 16px !important; font-size: 24px; font-weight: 600; }
.blog-body h2 { display: block !important; margin: 40px 0 16px !important; font-size: 22px; font-weight: 600; }
.blog-body h3 { display: block !important; margin: 32px 0 12px !important; font-size: 18px; font-weight: 600; }
.blog-body h4 { display: block !important; margin: 24px 0 8px !important; font-size: 16px; font-weight: 600; }
.blog-body h1:first-child, .blog-body h2:first-child, .blog-body h3:first-child, .blog-body h4:first-child { margin-top: 0 !important; }
.blog-body ul, .blog-body ol { display: block !important; padding-left: var(--sp-6) !important; margin: 0 0 16px !important; list-style-position: outside; }
.blog-body ul { list-style-type: disc !important; }
.blog-body ol { list-style-type: decimal !important; }
.blog-body li { display: list-item !important; margin: var(--sp-1) 0; }
.blog-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: var(--sp-2) 0; cursor: zoom-in; }
.blog-body a, .blog-body a * { color: var(--md-primary) !important; text-decoration: underline; }
.blog-body hr { border: none; border-top: 1px solid var(--md-outline-variant); margin: 32px 0; }
.blog-body .Markdown-Word { animation: none !important; }

.quick-nav-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--sp-2);
  position: relative;
}
.quick-nav-arrow {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: var(--md-surface-container-high);
  color: var(--md-on-surface-variant);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 1;
  transition: background .15s;
}
.quick-nav-arrow:hover { background: var(--md-surface-container-highest); }
.quick-nav-arrow .material-symbols-rounded { font-size: 20px; }
.quick-nav-row {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 2px 0 0;
  flex: 1;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.quick-nav-row::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .quick-nav-row { overflow-x: auto; }
}
.quick-nav-row.dragging { cursor: grabbing; }
.quick-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 64px;
  padding: var(--sp-2) var(--sp-1);
  border-radius: 12px;
  text-decoration: none;
  color: var(--md-on-surface-variant);
  font-size: 10px;
  text-align: center;
  flex-shrink: 0;
}
.quick-nav-item__icon { font-size: 24px; color: var(--md-primary); }
.quick-nav-item__badge {
  position: absolute; top: 2px; right: 6px;
  background: var(--md-error); color: #fff; font-size: 8px;
  min-width: 14px; height: 14px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.quick-nav-item:hover, .quick-nav-item:active { background: var(--md-surface-container); }

/* Karaoke strip on song cards */
.song-card__karaoke-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(135deg, rgba(208,188,255,.10), rgba(208,188,255,.04));
  border-top: 1px solid var(--md-outline-variant);
  font-size: 12px;
  font-weight: 500;
  color: var(--md-primary);
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.song-card__karaoke-strip:hover { background: linear-gradient(135deg, rgba(208,188,255,.18), rgba(208,188,255,.08)); }
.song-card__karaoke-strip[aria-expanded="true"] {
  border-radius: 0;
}
.song-card__karaoke-strip[aria-expanded="true"] .song-card__karaoke-chevron {
  transform: rotate(180deg);
}
.song-card__karaoke-player {
  width: 100%;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  border-top: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container);
  border-radius: 0 0 12px 12px;
}
.song-card__karaoke-player audio { display: none; }

.kr-track-group { display: flex; flex-direction: column; gap: 2px; }
.kr-track-inner { display: flex; align-items: center; gap: 6px; }
.kr-controls { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kr-download-btn { flex-shrink: 0; }
.kr-divider { height: 1px; background: var(--md-outline-variant); margin: 6px 0; }

/* Karaoke lyrics display */
.kr-lyrics {
  max-height: 200px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--md-surface-container-high) 40%, var(--md-surface));
  font-size: 15px;
  line-height: 1.8;
  font-weight: 700;
  color: var(--md-on-surface-variant);
  scroll-behavior: smooth;
  scrollbar-width: thin;
}
.kr-lyrics .kr-word { transition: color .3s, text-shadow .3s; border-radius: 2px; }
.kr-lyrics .kr-word--past { color: var(--md-on-surface); }
.kr-lyrics .kr-word--active { color: #ff2222; }
.kr-lyrics .kr-section {
  display: block;
  font-size: 11px;
  color: var(--md-primary);
  opacity: .6;
  margin: 8px 0 4px;
  font-weight: 600;
}

.kr-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.kr-row--vol { padding-left: 42px; }
.kr-label {
  font-size: 11px;
  font-weight: 600;
  min-width: 42px;
  color: var(--md-on-surface-variant);
}
.kr-track-group--minus .kr-label { color: #B388FF; }
.kr-track-group--vocals .kr-label { color: #4FC3F7; }

/* Seek бегунки — фиолетовый */
.kr-seek {
  flex: 1;
  min-width: 60px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--md-outline-variant);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.kr-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--md-primary);
  cursor: pointer;
}
.kr-seek::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--md-primary);
  border: none;
  cursor: pointer;
}

/* Volume бегунки — оранжевый, короче seek */
.kr-vol {
  flex: 1;
  max-width: 100px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--md-outline-variant);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.kr-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #FFB74D;
  cursor: pointer;
}
.kr-vol::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #FFB74D;
  border: none;
  cursor: pointer;
}
.kr-vol-icon { color: #FFB74D !important; }

.kr-time {
  font-size: 10px;
  min-width: 58px;
  color: var(--md-on-surface-variant);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Десктоп: seek и vol в одну строку */
@media (min-width: 501px) {
  .kr-controls { flex-direction: row; align-items: center; gap: 6px; flex-wrap: wrap; }
  .kr-row--vol { padding-left: 0; }
}

/* Мобильная: vol переносится, выровнен вправо */
@media (max-width: 500px) {
  .kr-row--vol { padding-left: 42px; justify-content: flex-end; }
}

/* Light theme: darker karaoke area */
[data-theme="light"] .song-card__karaoke-strip {
  background: linear-gradient(135deg, rgba(103,58,183,.12), rgba(103,58,183,.06));
}
[data-theme="light"] .song-card__karaoke-strip:hover {
  background: linear-gradient(135deg, rgba(103,58,183,.20), rgba(103,58,183,.10));
}
[data-theme="light"] .song-card__karaoke-player {
  background: rgba(103,58,183,.06);
}
[data-theme="light"] .song-card__karaoke-player audio {
  filter: contrast(1.15);
}
[data-theme="light"] .song-card__karaoke-player .btn--tonal {
  background: rgba(103,58,183,.14);
  color: #4a148c;
}

.home-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.home-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--sp-2) var(--sp-1);
  background: color-mix(in srgb, var(--md-primary) 15%, transparent);
  color: var(--md-primary);
  border-radius: var(--radius-card);
  border: 1px solid color-mix(in srgb, var(--md-primary) 40%, transparent);
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .5px;
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition);
  box-shadow: var(--shadow-1);
}
.home-action-btn:hover { background: color-mix(in srgb, var(--md-primary) 25%, transparent); text-decoration: none; color: var(--md-primary); }
.home-action-btn .material-symbols-rounded { font-size: 22px; color: var(--md-primary); }

/* Promo inline panel */
.promo-panel {
  background: var(--md-surface-container);
  border-radius: var(--radius-card);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  display: none;
}
.promo-panel--open { display: block; }
.promo-panel__row { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }

.balance-card {
  background: linear-gradient(135deg, var(--md-primary-container), var(--md-secondary-container));
  text-align: center;
  padding: var(--sp-3);
}
.balance-card__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  color: var(--md-on-primary-container);
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: var(--sp-2);
  opacity: 0.85;
  pointer-events: none; /* badge sits outside this element now */
}
.visibility-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px 2px 4px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  opacity: 0.9;
}
.visibility-badge .material-symbols-rounded { font-size: 14px; }
.visibility-badge--all { background: rgba(46,160,67,.25); color: #4caf50; }
.visibility-badge--auth { background: rgba(255,193,7,.2); color: #ffc107; }
.visibility-badge--none { background: rgba(255,255,255,.1); color: var(--md-on-surface-variant); }
.vis-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--md-surface-container-highest);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  z-index: 600;
  min-width: 160px;
  overflow: hidden;
}
.vis-menu__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-3) var(--sp-3);
  background: none;
  border: none;
  color: var(--md-on-surface);
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-align: left;
}
.vis-menu__item:hover { background: var(--md-surface-variant); }
.vis-menu__item .material-symbols-rounded { font-size: 18px; color: var(--md-on-surface-variant); }

/* ── Homepage widgets ─────────────────────────────────────────── */
.homepage-widgets { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.homepage-widget { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); }
.homepage-widget__icon { font-size: 28px; color: var(--md-primary); flex-shrink: 0; }
.homepage-widget__body { flex: 1; min-width: 0; }
.homepage-widget__title { font-size: var(--font-size-sm); font-weight: 600; }
.homepage-widget__sub { font-size: 12px; color: var(--md-on-surface-variant); margin-top: 2px; }
.balance-card__amount {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--md-on-primary-container);
  line-height: 1;
}
.balance-card__detail {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  flex-wrap: wrap;
}

.cta-btn {
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-size: var(--font-size-lg);
  font-weight: 700;
  padding: 12px;
  border-radius: var(--radius-xl);
  text-align: center;
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}
.cta-btn:hover { filter: brightness(0.9); text-decoration: none; color: var(--md-on-primary); }

.quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-1);
  margin-bottom: var(--sp-2);
}

.quick-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--sp-2);
  cursor: pointer;
  transition: background var(--transition);
  text-decoration: none;
  color: var(--md-on-surface);
}
.quick-tile:hover { background: var(--md-surface-container-high); text-decoration: none; }
.quick-tile__icon { font-size: 28px; color: var(--md-primary); }
.quick-tile__label { font-size: var(--font-size-sm); font-weight: 500; }

.welcome-card { color: var(--md-on-surface-variant); font-size: var(--font-size-sm); line-height: 1.6; padding: var(--sp-3); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.welcome-card__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.welcome-card__text { flex: 1; min-width: 0; margin: 0; }

/* ── Settings (profile, payments) ────────────────────────────── */
.settings-section { margin-bottom: var(--sp-4); }
.settings-section__title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--md-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--sp-2);
  padding: 0 var(--sp-1);
}

.settings-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  cursor: pointer;
  transition: background var(--transition);
  text-decoration: none;
  color: var(--md-on-surface);
  margin-bottom: var(--sp-2);
}
.settings-item:hover { background: var(--md-surface-container-high); }
.settings-item--link { cursor: pointer; }
.settings-item--danger { color: var(--md-error); }
.settings-item__icon { font-size: 24px; color: var(--md-primary); flex-shrink: 0; }
.settings-item--danger .settings-item__icon { color: var(--md-error); }
.settings-item__content { flex: 1; }
.settings-item__label { font-size: var(--font-size-md); font-weight: 500; }
.settings-item__value { font-size: var(--font-size-sm); color: var(--md-on-surface-variant); margin-top: 2px; }
.settings-item__arrow { color: var(--md-on-surface-variant); font-size: 20px; }

/* ── Profile ─────────────────────────────────────────────────── */
.profile-header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.profile-avatar {
  position: relative;
  width: 72px; height: 72px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  overflow: hidden;
  background: var(--md-surface-container-highest);
  display: flex; align-items: center; justify-content: center;
}
.profile-avatar .material-symbols-rounded { font-size: 64px; color: var(--md-primary); }
.profile-avatar__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s;
  border-radius: 50%;
  color: #fff;
}
.profile-avatar__overlay .material-symbols-rounded { font-size: 24px; }
.profile-avatar:hover .profile-avatar__overlay { opacity: 1; }
.profile-header__name { font-size: var(--font-size-lg); font-weight: 700; }
.profile-header__username { font-size: var(--font-size-sm); color: var(--md-on-surface-variant); }
.profile-header__balance { font-size: var(--font-size-sm); color: var(--md-primary); margin-top: var(--sp-1); }

/* ── Section header ──────────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--sp-2) 0 var(--sp-2);
}
.section-header__title { font-size: var(--font-size-md); font-weight: 700; color: var(--md-on-surface); border: 1px solid var(--md-outline-variant); border-radius: 20px; padding: 4px 14px; }
.section-header__link { font-size: var(--font-size-sm); color: var(--md-primary); font-weight: 600; border: 1px solid var(--md-outline-variant); border-radius: 20px; padding: 4px 14px; text-decoration: none; }

/* ── Top Player (My Tracks permanent bar) ────────────────────── */
.top-player {
  position: fixed;
  top: var(--top-bar-height);
  left: 0; right: 0;
  height: 64px;
  background: var(--md-surface-container-highest);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-3);
  z-index: 180;
  border-bottom: 1px solid var(--md-outline-variant);
  box-shadow: 0 2px 4px -1px rgba(0,0,0,.1);
}
/* Радио-режим — скрываем перемотку, repeat, shuffle */
.top-player--radio #prevTrackBtn,
.top-player--radio #nextTrackBtn,
.top-player--radio #repeatBtn,
.top-player--radio #shuffleBtn,
.top-player--radio #gQueueBtn { display: none !important; }
.top-player--radio .top-player__seek { pointer-events: none; opacity: 0.3; }

.top-player__cover {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #3D2060, #2D1F5E);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.top-player__cover img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.top-player__cover .material-symbols-rounded { font-size: 20px; color: rgba(255,255,255,.7); }
@media (min-width: 768px) {
  body:not(.force-mobile) .top-player { left: var(--side-nav-width); gap: 2px; }
  body:not(.force-mobile) .top-player .icon-btn { width: 34px; height: 34px; }
}
.top-player__info { flex: 1; min-width: 0; }
.top-player__title {
  font-size: 12px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--md-on-surface-variant);
  margin-bottom: 7px;
}
.top-player__title--active { color: var(--md-on-surface); }
.top-player__seek { display: block; width: 100%; accent-color: var(--md-primary); height: 3px; margin: 7px 0; }
.top-player__seek:disabled { opacity: 0; pointer-events: none; }
.top-player__time { font-size: 10px; color: var(--md-on-surface-variant); margin-top: 7px; }
.song-card__title--rejected { color: #f44336 !important; }
.page-songs { padding-top: var(--sp-2); }
/* Mobile player: seekbar below buttons, close instead of stop */
#topStopBtn { display: none; }
@media (max-width: 767px) {
  body:not(.force-desktop) .top-player {
    flex-wrap: wrap;
    height: auto;
    padding: 4px 8px 6px;
    gap: 0;
  }
  body:not(.force-desktop) .top-player .icon-btn {
    flex: 1;
    min-width: 0;
    width: auto;
    padding: 0;
  }
  body:not(.force-desktop) .top-player__cover {
    width: 36px;
    height: 36px;
    margin-right: 4px;
  }
  body:not(.force-desktop) .top-player__info {
    order: 10;
    width: 100%;
    min-width: 100%;
    padding-top: 2px;
  }
  body:not(.force-desktop) #topCloseBtn { display: flex; }
  /* Fallback for mobile two-row player before JS measurement */
  body:not(.force-desktop).player-open { padding-top: calc(var(--top-bar-height) + 80px); }
  body:not(.force-desktop).player-open .side-nav { top: calc(var(--top-bar-height) + 80px); }
}

/* ── Chat layout (support, user chat) ─────────────────────────── */
/* Chat: fixed overlay filling between top-bar/player and bottom edge. */
.chat-wrap {
  position: fixed;
  left: 50%; right: 0; bottom: 0;
  top: var(--top-bar-height);
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--content-max-width);
  display: flex; flex-direction: column; overflow: hidden;
  z-index: 201; /* above bottom-nav (200) */
  background: var(--md-background);
}
/* Мобильный/force-mobile: чат над нижним меню */
@media (max-width: 768px) {
  .chat-wrap { bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px)); }
}
body.force-mobile .chat-wrap { bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px)); }
body.player-open .chat-wrap {
  top: calc(var(--top-bar-height) + var(--top-player-h, 64px));
}
@media (min-width: 768px) {
  body:not(.force-mobile):not(.no-sidenav) .chat-wrap { left: calc(var(--side-nav-width) + (100% - var(--side-nav-width)) / 2); }
}

/* ── Share sheet ──────────────────────────────────────────────── */
.share-sheet {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,.5);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.share-sheet--open { opacity: 1; pointer-events: auto; overscroll-behavior: none; touch-action: none; }
body.sheet-open { overflow: hidden; position: fixed; width: 100%; }
.share-sheet__content {
  background: var(--md-surface-container-high);
  border-radius: 20px 20px 0 0;
  padding: 8px 0 env(safe-area-inset-bottom, 16px);
  width: 100%; max-width: 500px;
  transform: translateY(100%);
  transition: transform .25s ease;
  overscroll-behavior: contain;
}
.share-sheet--open .share-sheet__content { transform: translateY(0); }
.share-sheet__title {
  font-size: 13px; font-weight: 500;
  padding: 8px 20px 12px;
  color: var(--md-on-surface-variant);
  border-bottom: 1px solid var(--md-outline-variant);
  margin-bottom: 4px;
}
.share-sheet__item {
  display: flex; align-items: center; gap: 16px;
  width: 100%; padding: 12px 20px;
  background: none; border: none; cursor: pointer;
  color: var(--md-on-surface); font-size: 15px; text-align: left;
}
.share-sheet__item:hover { background: var(--md-surface-container-highest); }
.share-sheet__item .material-symbols-rounded { font-size: 22px; color: var(--md-on-surface-variant); }
.share-sheet__item svg { fill: var(--md-on-surface-variant); }
/* VK/Telegram — скрываем на тач-устройствах (телефоны, планшеты) */
@media (hover: none) and (pointer: coarse) {
  .share-sheet__desktop-only { display: none !important; }
}
/* Дополнительно: скрываем на узких экранах */
@media (max-width: 767px) {
  .share-sheet__desktop-only { display: none !important; }
}
.share-sheet__item--cancel {
  color: var(--md-on-surface-variant);
  margin-top: 4px;
  border-top: 1px solid var(--md-outline-variant);
}
/* На маленьких экранах уменьшаем отступы чтобы все пункты влезли */
@media (max-height: 700px) {
  .share-sheet__item { padding: 8px 20px; gap: 12px; font-size: 14px; }
  .share-sheet__title { padding: 6px 20px 8px; }
  .share-sheet__item--cancel { margin-top: 2px; }
}
@media (max-height: 550px) {
  .share-sheet__item { padding: 6px 16px; gap: 10px; font-size: 13px; }
  .share-sheet__title { padding: 4px 16px 6px; font-size: 12px; }
}

/* ── Privacy sheet ────────────────────────────────────────────── */
.privacy-section { padding: 10px 20px 4px; }
.privacy-section__label { font-size: 12px; font-weight: 600; color: var(--md-on-surface-variant); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.privacy-radio { display: flex; gap: 5px; flex-wrap: wrap; }
.privacy-radio__btn {
  flex: 1 1 auto; min-width: 56px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 3px; border-radius: var(--radius-md); border: 1.5px solid var(--md-outline-variant);
  background: none; color: var(--md-on-surface-variant); font-size: 10px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.privacy-radio__btn .material-symbols-rounded { font-size: 18px; }
.privacy-radio__btn--active { border-color: var(--md-primary); background: rgba(208,188,255,.15); color: var(--md-primary); }

/* ── Queue drawer ─────────────────────────────────────────────── */
.queue-drawer {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,.5);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.queue-drawer--open { opacity: 1; pointer-events: auto; }
.queue-drawer__content {
  background: var(--md-surface-container-high);
  border-radius: 20px 20px 0 0;
  width: 100%; max-width: 500px;
  max-height: 70vh;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform .25s ease;
  padding-bottom: env(safe-area-inset-bottom, 8px);
}
.queue-drawer--open .queue-drawer__content { transform: translateY(0); }
.queue-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--md-outline-variant);
  flex-shrink: 0;
}
.queue-drawer__title { font-size: 15px; font-weight: 500; color: var(--md-on-surface); }
.queue-drawer__list { overflow-y: auto; flex: 1; }
.queue-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; cursor: pointer;
  border-bottom: 1px solid var(--md-outline-variant);
}
.queue-item:hover { background: var(--md-surface-container-highest); }
.queue-item--active { background: var(--md-surface-container-highest); }
.queue-item__icon { font-size: 20px; color: var(--md-on-surface-variant); flex-shrink: 0; }
.queue-item--active .queue-item__icon { color: var(--md-primary); }
.queue-item__info { display: flex; flex-direction: column; min-width: 0; }
.queue-item__title { font-size: 14px; color: var(--md-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queue-item__meta { font-size: 11px; color: var(--md-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.queue-item--active .queue-item__title { color: var(--md-primary); font-weight: 500; }
.queue-item--active .queue-item__meta { color: var(--md-primary); opacity: 0.7; }

/* ── Lyrics sheet ─────────────────────────────────────────────── */
.lyrics-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}
/* ── Lyrics actions (inside bottom sheet) ────────────────────── */
.lyrics-actions {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.lyrics-actions .btn { gap: 4px; }
.lyrics-actions .material-symbols-rounded { font-size: 16px; }

.songs-loading { color: var(--md-on-surface-variant); font-size: var(--font-size-sm); padding: var(--sp-3) 0; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-4) 0 var(--sp-6);
}
.pagination__info { font-size: var(--font-size-sm); color: var(--md-on-surface-variant); min-width: 48px; text-align: center; }

/* ── Songs list ──────────────────────────────────────────────── */
.songs-list { padding-bottom: 72px; }

.song-card {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0;
  margin-bottom: var(--sp-2);
  overflow: hidden;
  min-height: 80px;
}
.song-card__main { display: contents; }
.song-card__cover {
  width: 80px;
  flex-shrink: 0;
  align-self: stretch;
  background: linear-gradient(135deg, #3D2060, #2D1F5E);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  border-radius: var(--radius-card) 0 0 var(--radius-card);
}
.song-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.song-card__note-icon { font-size: 28px; color: rgba(255,255,255,0.7); position: relative; z-index: 1; }
.song-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.song-card__info { flex: 1; min-width: 0; padding: var(--sp-1) var(--sp-3); }
.song-card__title { font-weight: 600; font-size: var(--font-size-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-card__meta { font-size: 11px; color: var(--md-on-surface-variant); }
.song-card__date { font-size: 11px; color: var(--md-on-surface-variant); }
.song-card__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-1);
  border-top: 1px solid var(--md-outline-variant);
  padding: var(--sp-1) var(--sp-2);
}
.song-card__actions .icon-btn {
  flex: 1;
  border-radius: var(--radius-sm);
  height: 30px;
  color: var(--md-on-surface-variant);
}
.song-card__actions .icon-btn .material-symbols-rounded { font-size: 18px; }
.song-card__actions .icon-btn:first-child { color: var(--md-primary); }

/* ── Player bar ──────────────────────────────────────────────── */
.player-bar {
  position: fixed;
  bottom: var(--bottom-nav-height);
  left: 0; right: 0;
  background: var(--md-surface-container-highest);
  padding: var(--sp-2) var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  z-index: 190;
  border-top: 1px solid var(--md-outline-variant);
}
.player-bar__info { flex: 1; min-width: 0; }
.player-bar__title { font-size: var(--font-size-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-bar__time { font-size: 10px; color: var(--md-on-surface-variant); margin-top: 2px; }
.player-bar__seek {
  width: 100%;
  margin-top: var(--sp-1);
  accent-color: var(--md-primary);
  cursor: pointer;
}

/* ── Карточка трека — прогресс и подсветка ───────────────────── */
.song-card--playing {
  border: 1.5px solid var(--md-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-primary) 20%, transparent);
}
.song-card.drag-over {
  border: 2px dashed var(--md-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-primary) 25%, transparent);
}
.drag-handle { cursor: grab; color: var(--md-on-surface-variant); }
.song-card__progress {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-3) var(--sp-2);
}
.song-card--playing .song-card__progress { display: flex; }
.song-card__seek-inner {
  flex: 1;
  height: 3px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--md-outline-variant);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  accent-color: var(--md-primary);
}
.song-card__time {
  font-size: 10px;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
  min-width: 72px;
  text-align: right;
}

/* FAB поднимается над плеером */
body.player-visible .fab-group {
  bottom: calc(var(--bottom-nav-height) + 56px + var(--sp-4)) !important;
}

@media (min-width: 768px) {
  .player-bar { bottom: 0; left: var(--side-nav-width); }
  body.player-visible .fab-group { bottom: calc(56px + var(--sp-4)) !important; }
}

/* ── Payments ────────────────────────────────────────────────── */
.section-title { font-size: var(--font-size-base); font-weight: 600; margin-bottom: var(--sp-3); }

.packages-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.package-card {
  position: relative;
  text-align: center;
  padding: var(--sp-5) var(--sp-3);
  cursor: pointer;
  transition: background var(--transition);
}
.package-card:hover { background: var(--md-surface-container-high); }
.package-card--featured { background: var(--md-primary-container); }
.package-card--featured:hover { filter: brightness(0.9); }
.package-card__badge {
  position: absolute;
  top: -8px; right: -8px;
  background: var(--md-tertiary);
  color: var(--md-on-tertiary);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.package-card__count { font-size: var(--font-size-3xl); font-weight: 800; color: var(--md-primary); }
.package-card__label { font-size: var(--font-size-sm); color: var(--md-on-surface-variant); }
.package-card__price { font-size: var(--font-size-lg); font-weight: 700; margin: var(--sp-2) 0; }

.promo-section { margin-bottom: var(--sp-4); }
.promo-section__title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--font-size-md); font-weight: 600; margin-bottom: var(--sp-3); }
.promo-input-row { display: flex; gap: var(--sp-2); }
.promo-input-row .field__input { flex: 1; padding-left: 16px; }

.payments-list { margin-bottom: var(--sp-4); }
.payment-item { display: flex; align-items: center; gap: var(--sp-3); }
.payment-item__icon { font-size: 24px; color: var(--md-primary); }
.payment-item__info { flex: 1; }
.payment-item__songs { font-weight: 600; }
.payment-item__date { font-size: var(--font-size-xs); color: var(--md-on-surface-variant); }
.payment-item__amount { font-weight: 700; color: var(--md-primary); }

/* ── Referral ────────────────────────────────────────────────── */
.referral-hero { text-align: center; padding: var(--sp-6); margin-bottom: var(--sp-4); }
.referral-hero__icon { font-size: 48px; color: var(--md-primary); display: block; margin: 0 auto var(--sp-3); }
.referral-hero__title { font-size: var(--font-size-xl); font-weight: 700; margin-bottom: var(--sp-2); }
.referral-hero__desc { color: var(--md-on-surface-variant); font-size: var(--font-size-sm); line-height: 1.6; }

.referral-code-card { text-align: center; padding: var(--sp-6); margin-bottom: var(--sp-4); }
.referral-code-card__label { font-size: var(--font-size-sm); color: var(--md-on-surface-variant); margin-bottom: var(--sp-2); }
.referral-code-card__code { font-size: var(--font-size-2xl); font-weight: 800; letter-spacing: 4px; color: var(--md-primary); margin-bottom: var(--sp-4); }
.referral-code-card__actions { display: flex; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; }

.referral-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.stat-card { text-align: center; padding: var(--sp-5); }
.stat-card__value { font-size: var(--font-size-2xl); font-weight: 800; color: var(--md-primary); }
.stat-card__label { font-size: var(--font-size-sm); color: var(--md-on-surface-variant); }

.reward-levels { padding: var(--sp-5); }
.reward-levels__title { font-size: var(--font-size-md); font-weight: 600; margin-bottom: var(--sp-4); }
.reward-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--md-outline-variant); }
.reward-row:last-child { border-bottom: none; }
.reward-row__icon { color: var(--md-primary); font-size: 20px; }
.reward-row__name { flex: 1; font-size: var(--font-size-sm); }
.reward-row__pct { font-weight: 700; color: var(--md-primary); }

/* ── Admin ───────────────────────────────────────────────────── */
.admin-stats-row { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); }

.promo-table { margin-bottom: var(--sp-4); }
.promo-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); flex-wrap: wrap; }
.promo-row--inactive { opacity: 0.5; }
.promo-row__code { font-weight: 700; font-size: var(--font-size-md); min-width: 100px; }
.promo-row__detail { flex: 1; font-size: var(--font-size-sm); color: var(--md-on-surface-variant); }

/* ── Generating page ─────────────────────────────────────────── */
.generating-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60dvh;
  gap: var(--sp-4);
  text-align: center;
}
.generating-page__title { font-size: var(--font-size-2xl); font-weight: 700; }
.generating-page__subtitle { color: var(--md-on-surface-variant); font-size: var(--font-size-sm); }
.generating-page__note { color: var(--md-on-surface-variant); font-size: var(--font-size-xs); line-height: 1.8; }

.progress-wrap {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.progress-bar-outer { width: 100%; height: 8px; background: var(--md-surface-variant); border-radius: 4px; overflow: hidden; }
.progress-bar-inner { height: 100%; background: var(--md-primary); border-radius: 4px; transition: width 1s ease; }
.progress-pct { font-size: var(--font-size-sm); color: var(--md-on-surface-variant); }

/* Wave animation */
.wave-bars { display: flex; align-items: flex-end; gap: 4px; height: 60px; }
.wave-bar {
  width: 8px;
  border-radius: 4px;
  background: var(--md-primary);
  animation: wave 1.2s ease-in-out infinite;
}
.wave-bar:nth-child(1) { animation-delay: 0s; }
.wave-bar:nth-child(2) { animation-delay: 0.1s; }
.wave-bar:nth-child(3) { animation-delay: 0.2s; }
.wave-bar:nth-child(4) { animation-delay: 0.3s; }
.wave-bar:nth-child(5) { animation-delay: 0.4s; }
@keyframes wave {
  0%, 100% { height: 12px; }
  50% { height: 56px; }
}

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-10) var(--sp-4);
  text-align: center;
  color: var(--md-on-surface-variant);
}
.empty-state__icon { font-size: 72px; color: var(--md-outline); }

/* ── Material Symbols font settings ─────────────────────────── */
.material-symbols-rounded {
  font-size: 24px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

/* ── Responsive tweaks ───────────────────────────────────────── */
@media (max-width: 767px) {
  .main-content { padding: var(--sp-3); }
  .packages-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .packages-grid { grid-template-columns: repeat(4, 1fr); }
  .quick-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Wizard-specific (in wizard.css, but keep basics here) ───── */
.wizard-progress {
  position: fixed;
  top: var(--top-bar-height);
  left: 0; right: 0;
  height: 4px;
  background: var(--md-surface-variant);
  z-index: 99;
}
.wizard-progress__bar {
  height: 100%;
  background: var(--md-primary);
  transition: width 0.4s cubic-bezier(0.2, 0, 0, 1);
}
.wizard-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  position: relative;
}
.wizard-step-label {
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 4px 14px;
  border-radius: var(--radius-btn);
}
.wizard-cancel-btn {
  position: absolute;
  right: 0;
  color: var(--md-on-surface-variant);
  font-size: var(--font-size-xs);
  display: flex; align-items: center; gap: 2px;
}
.wizard-cancel-btn .material-symbols-rounded { font-size: 16px; }

/* Cancel confirm dialog */
.wizard-confirm-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 500;
}
.wizard-confirm-dialog {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--md-surface-container-highest);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  z-index: 501;
  min-width: 280px;
  max-width: 340px;
  box-shadow: var(--shadow-3);
  text-align: center;
}
.wizard-confirm-dialog__text { font-size: var(--font-size-md); margin-bottom: var(--sp-4); line-height: 1.5; }
.wizard-confirm-dialog__text small { color: var(--md-on-surface-variant); font-size: var(--font-size-sm); }
.wizard-confirm-dialog__actions { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }

.wizard-container { padding-top: var(--sp-2); }

.wizard-step__title { font-size: var(--font-size-xl); font-weight: 700; margin-bottom: var(--sp-2); }
.wizard-step__subtitle { font-size: var(--font-size-sm); color: var(--md-on-surface); margin-bottom: var(--sp-4); line-height: 1.5; }

.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.chip-grid--wrap { max-height: 50dvh; overflow-y: auto; }

.voice-cards, .quality-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.voice-card, .quality-card {
  width: 100%;
  padding: var(--sp-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-md);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  justify-content: flex-start;
}
.quality-card__label { line-height: 1.4; }

.text-choice-btns { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }

.custom-input-wrap { margin-bottom: var(--sp-3); animation: fadeIn 0.2s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

.wizard-nav {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  flex-wrap: wrap;
}
.wizard-nav .btn--filled { flex: 1; min-width: 100px; }

.summary-card { padding: var(--sp-4); margin-bottom: var(--sp-5); }
.summary-row { display: flex; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--md-outline-variant); }
.summary-row:last-child { border-bottom: none; }
.summary-label { color: var(--md-on-surface-variant); font-size: var(--font-size-sm); min-width: 80px; }
.summary-value { font-weight: 500; font-size: var(--font-size-sm); flex: 1; }

/* No bottom nav on wizard page */
body.no-bottom-nav { padding-bottom: 0; }
body.no-bottom-nav .bottom-nav { display: none; }

/* ── Light theme overrides ───────────────────────────────────── */
[data-theme="light"] .top-bar {
  background: var(--top-bar-bg, rgba(140,175,230,0.92));
  color: var(--top-bar-color, var(--md-primary));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--top-bar-border, rgba(138,180,248,.25));
  box-shadow: 0 1px 6px rgba(0,0,0,.1);
}
[data-theme="light"] .side-nav {
  background: var(--md-surface-container-highest);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-right: none;
  box-shadow: 3px 0 4px -1px rgba(0,0,0,.08);
}
[data-theme="light"] .bottom-nav {
  background: var(--md-surface-container-highest);
  border-top-color: var(--md-outline-variant);
}
[data-theme="light"] .nav-item--active {
  background: color-mix(in srgb, var(--md-primary) 15%, transparent);
  color: var(--md-primary);
}
[data-theme="light"] .side-nav__item:hover {
  background: rgba(94,53,177,.08);
  color: var(--md-on-surface);
}
[data-theme="light"] .icon-btn:hover { background: rgba(94,53,177,.08); }
[data-theme="light"] .btn--filled:hover { filter: brightness(0.90); }
[data-theme="light"] .btn--outlined {
  border-color: var(--md-primary);
  color: var(--md-primary);
}
[data-theme="light"] .btn--outlined:hover { background: rgba(94,53,177,.08); }
[data-theme="light"] .btn--tonal {
  background: color-mix(in srgb, var(--md-primary) 12%, transparent);
  color: var(--md-primary);
  border: 1px solid color-mix(in srgb, var(--md-primary) 20%, transparent);
}
[data-theme="light"] .btn--tonal:hover {
  background: color-mix(in srgb, var(--md-primary) 20%, transparent);
}
[data-theme="light"] .share-sheet__item {
  color: var(--md-on-surface);
}
[data-theme="light"] .share-sheet__item:hover {
  background: rgba(103,58,183,.06);
}
[data-theme="light"] input[type="radio"],
[data-theme="light"] input[type="checkbox"] {
  color-scheme: light;
}
[data-theme="light"] .field__input {
  background: #FFFFFF;
  border-color: var(--md-outline);
  color: var(--md-on-surface);
}
[data-theme="light"] .main-content { background: transparent; }
[data-theme="light"] .flash-container .flash {
  box-shadow: 0 4px 20px rgba(50,30,100,.15);
}
[data-theme="light"] .chip--choice {
  border-color: var(--md-outline);
  color: var(--md-on-surface);
}
[data-theme="light"] .chip--choice.selected {
  background: var(--md-secondary-container);
  border-color: var(--md-secondary);
  color: var(--md-on-secondary-container);
}
[data-theme="light"] .top-player {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
}

/* ── Skin picker ───────────────────────────────────────────── */
.skin-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--radius-md);
  border: 2px solid var(--md-outline-variant); background: none;
  color: var(--md-on-surface); cursor: pointer; transition: border-color .15s, background .15s;
  min-width: 72px;
}
.skin-swatch:hover { background: rgba(128,128,128,.08); }
.skin-swatch--active { border-color: var(--md-primary); background: rgba(128,128,128,.08); }
.skin-swatch__color {
  width: 36px; height: 36px; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.skin-swatch__label { font-size: 11px; font-weight: 500; color: #FFFFFF; }
[data-theme="light"] .skin-swatch__label { color: #1C1E21; }

/* ── Lyrics bottom sheet ─────────────────────────────────────── */
.lyrics-text {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--md-on-surface);
  margin-top: var(--sp-2);
  max-height: 60dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── Cover lightbox ──────────────────────────────────────────── */
.song-card__cover--clickable { cursor: zoom-in; }

.cover-modal {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.88);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  animation: fadeIn 0.18s ease;
}
.cover-modal__content {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-4); max-width: min(90vw, 480px);
}
.cover-modal__img {
  width: 100%; border-radius: var(--radius-card);
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
  object-fit: cover;
}
.cover-modal__info {
  background: var(--md-surface-container-high);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  width: 100%;
  text-align: center;
}
.cover-modal__actions {
  display: flex; gap: var(--sp-3);
}

/* ── Public track page ───────────────────────────────────────── */
.track-page {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-4) calc(var(--sp-8) + 60px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.track-page__cover-wrap {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.track-page__cover {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #3D2060, #2D1F5E);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.track-page__cover-icon { font-size: 64px; color: rgba(255,255,255,0.4); }
.track-page__cover-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}
.track-page__card {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.track-page__title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--md-on-surface);
}
.track-page__meta {
  font-size: var(--font-size-sm);
  color: var(--md-on-surface-variant);
  margin-top: 2px;
}
.track-page__progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.track-page__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.track-play-btn .material-symbols-rounded { font-size: 36px !important; color: var(--md-primary); }
.track-page__promo {
  padding: var(--sp-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.track-page__promo-icon { font-size: 36px; color: var(--md-primary); }
.track-page__promo-text {
  font-size: var(--font-size-sm);
  color: var(--md-on-surface-variant);
  line-height: 1.5;
  margin: 0;
}
.track-page__artist {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--md-on-surface);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  letter-spacing: 0.01em;
}
.track-page__artist .material-symbols-rounded {
  font-size: 22px !important;
  color: var(--md-primary);
}

/* ── Кнопки действий в профиле пользователя ── */
/* Десктоп: кнопки друзья + написать в ряд */
.profile-actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}
/* Мобильный: кнопки в колонку (каждая на своей строке) */
@media (max-width: 479px) {
  .profile-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .profile-actions .btn {
    width: 100%;
    justify-content: center;
  }
}