/* Cyori unified application skin
   Source of truth for visual direction across Dashboard/Music/Playlist/Premium/Settings/Payment.
   Keeps page data/JS behavior from the existing pages and changes only layout/visual shell. */

:root{
  --cy-bg:#0a0908;
  --cy-surface:rgba(13,12,10,.78);
  --cy-surface-strong:rgba(14,13,11,.92);
  --cy-surface-soft:rgba(22,20,16,.58);
  --cy-line:rgba(227,188,104,.24);
  --cy-line-soft:rgba(223,178,81,.16);
  --cy-text:#faf4e9;
  --cy-muted:#bdaf9f;
  --cy-purple:#dfb252;
  --cy-violet:#e1b65a;
  --cy-pink:#e0b455;
  --cy-cyan:#e1b75c;
  --cy-green:#38e3aa;
  --cy-radius:16px;
  --cy-shadow:0 22px 70px rgba(0,0,0,.34);
}

html{
  min-width:320px;
  min-height:100%;
  background:var(--cy-bg);
  overflow-x:hidden;
}

body:not([data-page="home"]){
  margin:0;
  min-width:320px;
  min-height:100svh;
  overflow-x:hidden;
  color:var(--cy-text);
  background:
    linear-gradient(90deg,rgba(9,8,7,.92) 0%,rgba(9,8,7,.70) 36%,rgba(9,8,7,.38) 70%,rgba(9,8,7,.56) 100%),
    url("../assets/home/background-desktop.webp") center top / cover fixed no-repeat,
    var(--cy-bg);
}

body:not([data-page="home"])::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 18%,rgba(225,182,90,.13),transparent 28%),
    radial-gradient(circle at 76% 15%,rgba(223,178,80,.12),transparent 32%),
    linear-gradient(180deg,rgba(9,8,7,.05),rgba(9,8,7,.56));
}

body:not([data-page="home"]) .app-shell,
body:not([data-page="home"]) .page-frame,
body:not([data-page="home"]) .premium-frame{
  background:transparent !important;
}

/* Shared glass surfaces */
body:not([data-page="home"]) .app-sidebar,
body:not([data-page="home"]) .sidebar{
  border-right:1px solid var(--cy-line) !important;
  background:
    linear-gradient(180deg,rgba(12,11,9,.91),rgba(10,9,8,.86)) !important;
  box-shadow:20px 0 60px rgba(0,0,0,.18);
  backdrop-filter:blur(24px) saturate(130%);
}

body:not([data-page="home"]) .app-top,
body:not([data-page="home"]) .app-topbar{
  position:sticky;
  top:0;
  z-index:35;
  min-height:58px;
  background:linear-gradient(180deg,rgba(10,9,8,.92),rgba(10,9,8,.62) 80%,transparent);
  backdrop-filter:blur(14px);
}

body:not([data-page="home"]) .dash-hero,
body:not([data-page="home"]) .metric-card,
body:not([data-page="home"]) .server-card,
body:not([data-page="home"]) .premium-side,
body:not([data-page="home"]) .price-card,
body:not([data-page="home"]) .music-searchbox,
body:not([data-page="home"]) .track-list,
body:not([data-page="home"]) .playlist-list,
body:not([data-page="home"]) .playlist-create,
body:not([data-page="home"]) .guild-banner,
body:not([data-page="home"]) .settings-panel,
body:not([data-page="home"]) .premium-active-mobile,
body:not([data-page="home"]) .mobile-player-card,
body:not([data-page="home"]) .card,
body:not([data-page="home"]) .panel{
  border-color:var(--cy-line) !important;
  background:
    linear-gradient(145deg,rgba(19,17,14,.86),rgba(12,11,9,.82)) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.025),
    0 18px 55px rgba(0,0,0,.18);
  backdrop-filter:blur(18px) saturate(125%);
}

body:not([data-page="home"]) .btn-primary,
body:not([data-page="home"]) .playlist-create{
  border-color:rgba(228,190,107,.75) !important;
  background:linear-gradient(100deg,#dcaa3f 0%,#e0b559 55%,#e0b456 100%) !important;
  color:#ffffff !important;
  box-shadow:0 9px 28px rgba(223,177,79,.20);
}

body:not([data-page="home"]) .btn-ghost,
body:not([data-page="home"]) .icon-btn,
body:not([data-page="home"]) .search-mini{
  border-color:rgba(225,183,93,.27) !important;
  background:rgba(13,12,10,.66) !important;
  color:#f2ece1 !important;
}

body:not([data-page="home"]) input,
body:not([data-page="home"]) select{
  border-color:rgba(223,179,83,.25) !important;
  background:rgba(13,12,10,.75) !important;
  color:#f9f3e8 !important;
}

/* Sidebar */
.side-link{
  border-radius:11px !important;
  color:#c3b5a5 !important;
}
.side-link:hover{
  background:rgba(220,171,64,.14) !important;
}
.side-link.active{
  border-color:rgba(227,186,100,.30) !important;
  background:linear-gradient(90deg,rgba(223,179,82,.38),rgba(223,179,82,.08)) !important;
  color:#ffffff !important;
}
.side-ico{color:#ece6db !important}
.side-profile{
  border-color:var(--cy-line) !important;
  background:rgba(15,13,11,.74) !important;
}

/* Desktop content proportions */
.app-content,
.app-main{
  position:relative;
  min-width:0;
}

.dashboard-wrap,
.music-page,
.settings-page,
.playlist-page{
  width:min(100%,1240px);
}

.page-title,
.playlist-head h1,
.pricing-head h1{
  color:#ffffff;
  letter-spacing:-.025em;
}

.page-title::after,
.playlist-head h1::after{
  content:"";
  display:block;
  width:44px;
  height:2px;
  margin-top:7px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--cy-pink),var(--cy-purple));
}

/* Dashboard inherits Home's cyber artwork language */
.dash-hero{
  min-height:230px !important;
  background:
    linear-gradient(90deg,rgba(12,11,9,.97) 0%,rgba(12,11,9,.78) 36%,rgba(12,11,9,.16) 70%),
    url("../assets/home/background-desktop.webp") center 36% / cover no-repeat !important;
  border-radius:18px !important;
}
.dash-hero>img{
  display:none !important;
}
.dash-hero::after{
  background:
    linear-gradient(90deg,rgba(12,11,9,.78),rgba(12,11,9,.23) 62%,transparent),
    radial-gradient(circle at 72% 42%,rgba(222,177,78,.15),transparent 30%) !important;
}
.dash-hero-copy{
  padding:54px 26px 24px !important;
}
.dash-hero-copy h1{
  font-size:clamp(1.8rem,3vw,2.55rem) !important;
}
.dash-hero-copy p{color:#cdbfae !important}
.metric-card,
.server-card,
.premium-side{
  border-radius:14px !important;
}
.metric-card strong{color:#ffffff}
.premium-side{
  background:
    radial-gradient(circle at 86% 10%,rgba(225,182,90,.22),transparent 38%),
    linear-gradient(155deg,rgba(28,25,19,.88),rgba(14,13,10,.90)) !important;
}

/* Music */
.music-searchbox{border-radius:12px !important}
.source-tab{
  border-color:rgba(223,178,82,.23) !important;
  background:rgba(13,12,10,.72) !important;
}
.source-tab.active{
  border-color:rgba(227,188,104,.55) !important;
  background:linear-gradient(90deg,rgba(224,180,85,.42),rgba(221,173,70,.12)) !important;
}
.track-list{
  overflow:hidden;
  border:1px solid var(--cy-line) !important;
  border-radius:16px;
}
.track-row{
  border-bottom-color:var(--cy-line-soft) !important;
}
.track-row:hover{background:rgba(221,172,67,.10) !important}
.track-play{border-radius:10px !important}

/* Playlist */
.playlist-page{
  max-width:920px !important;
}
.playlist-list{
  border-radius:16px !important;
  padding:6px 12px !important;
}
.playlist-row{
  border-bottom-color:var(--cy-line-soft) !important;
}
.playlist-create{
  border-radius:12px !important;
}

/* Settings */
.guild-banner,
.settings-panel{
  border-radius:16px !important;
}
.settings-tabs{
  gap:6px !important;
  padding:5px;
  border:1px solid var(--cy-line);
  border-radius:13px;
  background:rgba(13,11,10,.58);
  backdrop-filter:blur(14px);
}
.settings-tab{border-radius:9px !important}
.settings-tab.active{
  background:linear-gradient(90deg,rgba(224,180,85,.55),rgba(221,173,68,.24)) !important;
}
.setting-row{
  border-bottom-color:var(--cy-line-soft) !important;
}

/* Premium */
.premium-frame::before{
  background:
    radial-gradient(circle at 20% 16%,rgba(223,179,83,.10),transparent 25%),
    radial-gradient(circle at 76% 20%,rgba(224,180,86,.12),transparent 30%) !important;
}
.public-nav{
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid rgba(224,180,85,.15);
  background:rgba(10,9,8,.72);
  backdrop-filter:blur(18px);
}
.price-card{
  border-radius:16px !important;
}
.price-card.popular{
  border-color:rgba(225,182,90,.70) !important;
  box-shadow:0 0 0 1px rgba(224,180,86,.16),0 18px 56px rgba(222,174,73,.15) !important;
}
.popular-badge{
  background:linear-gradient(90deg,#e0b558,#dfb14f) !important;
}

/* Payment */
body[data-page="payment"] .dashboard-grid{
  gap:16px;
}
body[data-page="payment"] .card,
body[data-page="payment"] .panel{
  border-radius:18px !important;
}

/* Consistent mobile app shell */
@media(max-width:820px){
  body:not([data-page="home"]){
    background:
      linear-gradient(180deg,rgba(9,8,7,.44) 0%,rgba(9,8,7,.70) 42%,rgba(9,8,7,.90) 100%),
      url("../assets/home/background-mobile.webp") center top / cover fixed no-repeat,
      var(--cy-bg);
  }

  body:not([data-page="home"])::before{
    background:
      linear-gradient(180deg,rgba(9,8,7,.05),rgba(9,8,7,.48) 42%,rgba(9,8,7,.82)),
      radial-gradient(circle at 50% 16%,rgba(224,179,84,.13),transparent 35%);
  }

  .app-sidebar,
  .sidebar{
    display:none !important;
  }

  .app-content,
  .app-main{
    margin-left:0 !important;
    width:100% !important;
    padding:0 14px calc(88px + env(safe-area-inset-bottom)) !important;
  }

  .app-top,
  .app-topbar{
    height:58px !important;
    min-height:58px !important;
    padding-top:env(safe-area-inset-top);
    margin-inline:-14px;
    padding-inline:14px;
    background:linear-gradient(180deg,rgba(9,8,7,.90),rgba(9,8,7,.56),transparent) !important;
  }

  .top-mini-links,
  .app-top .search-wide,
  .app-topbar .searchbox{
    display:none !important;
  }

  .dashboard-wrap,
  .music-page,
  .settings-page,
  .playlist-page{
    width:100% !important;
    max-width:none !important;
    padding-bottom:10px !important;
  }

  .page-title,
  .playlist-head h1{
    font-size:1.2rem !important;
    margin-top:8px !important;
  }

  /* Dashboard */
  .dash-hero{
    min-height:235px !important;
    background:
      linear-gradient(180deg,rgba(11,10,8,.14),rgba(11,10,8,.44) 48%,rgba(11,10,8,.92) 100%),
      url("../assets/home/background-mobile.webp") center 32% / cover no-repeat !important;
  }
  .dash-hero::after{
    background:linear-gradient(180deg,transparent 0 30%,rgba(11,10,9,.45) 52%,rgba(11,10,9,.94) 100%) !important;
  }
  .dash-hero-copy{
    padding:112px 14px 14px !important;
  }
  .dash-hero-copy h1{font-size:1.5rem !important}
  .dash-hero-copy p{font-size:.74rem !important;line-height:1.5}
  .dash-hero-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }
  .dash-hero-actions .btn{min-width:0;padding:0 8px !important}
  .metric-grid{
    grid-template-columns:1fr 1fr !important;
    gap:9px !important;
  }
  .metric-card{min-height:88px !important}
  .server-grid{grid-template-columns:1fr !important}
  .dash-grid{display:block !important}
  .premium-side{margin-top:10px}

  /* Music: keep real functionality visible on mobile */
  body[data-page="music"] .music-search-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px;
  }
  body[data-page="music"] .source-tabs{
    display:flex !important;
    overflow-x:auto;
    flex-wrap:nowrap !important;
    scrollbar-width:none;
    padding-bottom:3px;
  }
  body[data-page="music"] .source-tabs::-webkit-scrollbar{display:none}
  body[data-page="music"] #music-results{
    display:block !important;
  }
  .mobile-player-card{
    display:block !important;
    border-radius:16px !important;
  }
  .mobile-player-art{
    height:min(58vw,260px) !important;
  }
  .track-row{
    grid-template-columns:32px 42px minmax(0,1fr) 42px 24px !important;
    gap:7px !important;
    padding-inline:6px !important;
  }
  .track-row .row-icon:nth-last-child(-n+2){display:none !important}

  /* Playlist */
  .playlist-page{padding-top:8px}
  .playlist-head{margin-bottom:12px !important}
  .playlist-row{
    min-height:68px !important;
  }

  /* Settings */
  .guild-banner{
    grid-template-columns:42px minmax(0,1fr) !important;
  }
  .guild-banner select{
    grid-column:1/-1 !important;
    width:100% !important;
    min-width:0 !important;
  }
  .settings-tabs{
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
    scrollbar-width:none;
  }
  .settings-tabs::-webkit-scrollbar{display:none}
  .settings-tab{flex:0 0 auto}
  .setting-row{
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding:13px 0;
  }
  .setting-control,
  .setting-control select,
  .setting-control input{
    width:100% !important;
    min-width:0 !important;
  }
  .switch{
    justify-self:start !important;
  }
  .settings-save .btn{width:100%}

  /* Premium: preserve package data instead of replacing it with a fake mobile-only page */
  .premium-main{
    padding:12px 14px calc(92px + env(safe-area-inset-bottom)) !important;
  }
  .premium-heading h1{font-size:1.65rem !important}
  body[data-page="premium"] .premium-heading p{
    display:block !important;
  }
  body[data-page="premium"] .billing-switch{
    display:inline-flex !important;
  }
  body[data-page="premium"] .pricing-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .premium-active-mobile{
    display:block !important;
    max-width:none !important;
    margin-bottom:12px !important;
  }
  .price-card{min-height:auto !important}

  .public-nav{
    height:58px !important;
    padding:0 14px !important;
  }
  .public-links{display:none !important}
  .public-actions .btn:first-child{display:none !important}
  .public-actions .btn{height:34px !important}

  /* Payment */
  body[data-page="payment"] .dashboard-grid{
    grid-template-columns:1fr !important;
    width:100% !important;
  }
  body[data-page="payment"] .pricing-head{
    padding:10px 2px 0;
  }
  body[data-page="payment"] .pricing-head h1{
    font-size:1.55rem !important;
  }

  /* Shared bottom tab bar */
  .bottom-nav{
    display:grid !important;
    position:fixed !important;
    left:10px !important;
    right:10px !important;
    bottom:max(8px,env(safe-area-inset-bottom)) !important;
    z-index:100 !important;
    height:64px !important;
    grid-template-columns:repeat(5,1fr) !important;
    border:1px solid rgba(228,191,110,.32) !important;
    border-radius:18px !important;
    background:rgba(12,11,9,.88) !important;
    box-shadow:0 18px 50px rgba(0,0,0,.42) !important;
    backdrop-filter:blur(22px) saturate(140%) !important;
  }
  .bottom-nav a{
    display:grid !important;
    place-items:center !important;
    align-content:center;
    gap:2px;
    color:#a39687 !important;
    font-size:.62rem !important;
  }
  .bottom-nav a.active{
    color:#ede7dc !important;
  }
  .bottom-nav a.active span{
    color:#e4bd69;
    text-shadow:0 0 16px rgba(225,182,91,.52);
  }
  .bottom-nav span{font-size:1.02rem !important}
}

@media(max-width:480px){
  .app-content,
  .app-main{padding-inline:12px !important}
  .app-top,
  .app-topbar{
    margin-inline:-12px;
    padding-inline:12px;
  }
  .dash-hero-actions{grid-template-columns:1fr !important}
  .metric-grid{grid-template-columns:1fr 1fr !important}
  .source-tab{flex:0 0 auto}
}

/* Shared responsive finish: preserve each page's existing content and controls. */
:root{
  --line:var(--cy-line);
  --danger:#e3bb66;
}
.app-shell,
.page-frame{
  position:relative;
  z-index:1;
  background:transparent !important;
}
body:not([data-page="home"])::before{
  z-index:0;
  pointer-events:none;
}
.app-content,
.app-main{
  min-width:0;
  color:var(--cy-text);
}

/* The checkout was built on a separate legacy shell; align it with the app pages. */
body[data-page="payment"] .app-shell{min-height:100svh}
body[data-page="payment"] .sidebar{
  position:fixed;
  inset:0 auto 0 0;
  z-index:40;
  display:flex;
  flex-direction:column;
  width:var(--sidebar,198px);
  min-width:0;
  padding:18px 14px 16px;
  border-right:1px solid var(--cy-line);
  background:linear-gradient(180deg,rgba(12,11,9,.94),rgba(10,9,8,.88));
  box-shadow:20px 0 60px rgba(0,0,0,.18);
  backdrop-filter:blur(24px) saturate(130%);
}
body[data-page="payment"] .sidebar .brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 4px 18px;
  font-size:1rem;
}
body[data-page="payment"] .sidebar .brand img{
  width:28px;
  height:28px;
  border-radius:50%;
  object-fit:cover;
}
body[data-page="payment"] .sidebar .side-nav{display:flex;flex-direction:column;gap:4px}
body[data-page="payment"] .sidebar .side-link{height:40px}
body[data-page="payment"] .sidebar-bottom{margin-top:auto}
body[data-page="payment"] .profile-mini{
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 7px;
  border:1px solid var(--cy-line);
  border-radius:12px;
  background:rgba(15,13,11,.74);
}
body[data-page="payment"] .profile-mini img{
  width:32px;
  height:32px;
  border-radius:50%;
  object-fit:cover;
}
body[data-page="payment"] .profile-mini strong,
body[data-page="payment"] .profile-mini span{display:block;min-width:0;overflow-wrap:anywhere}
body[data-page="payment"] .profile-mini strong{font-size:.68rem}
body[data-page="payment"] .profile-mini span{margin-top:2px;color:var(--cy-muted);font-size:.61rem}
body[data-page="payment"] .app-main{
  width:auto;
  min-height:100svh;
  margin-left:var(--sidebar,198px);
  padding:0 24px 32px;
}
body[data-page="payment"] .app-topbar{
  position:sticky;
  top:0;
  z-index:35;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:66px;
  margin:0 -24px 20px;
  padding:8px 24px;
  border-bottom:1px solid rgba(227,188,104,.13);
  background:linear-gradient(180deg,rgba(10,9,8,.94),rgba(10,9,8,.72));
  backdrop-filter:blur(16px);
}
body[data-page="payment"] .searchbox{
  display:flex;
  align-items:center;
  gap:10px;
  width:min(430px,52vw);
  height:38px;
  padding:0 12px;
  border:1px solid var(--cy-line-soft);
  border-radius:11px;
  background:rgba(13,12,10,.66);
  color:#ede7dc;
}
body[data-page="payment"] .searchbox input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent !important;
  color:#f2ece1 !important;
  font-size:.76rem;
}
body[data-page="payment"] .topbar-actions{display:flex;align-items:center;margin-left:auto}
body[data-page="payment"] .user-chip{
  display:flex;
  align-items:center;
  gap:9px;
  max-width:100%;
  height:42px;
  padding:4px 10px 4px 5px;
  text-align:left;
}
body[data-page="payment"] .user-chip img{width:30px;height:30px;border-radius:50%;object-fit:cover}
body[data-page="payment"] .user-chip strong,
body[data-page="payment"] .user-chip span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-page="payment"] .user-chip strong{font-size:.68rem}
body[data-page="payment"] .user-chip span{margin-top:2px;color:var(--cy-muted);font-size:.6rem}
body[data-page="payment"] .mobile-nav-toggle{display:none}
body[data-page="payment"] .pricing-head{
  width:min(100%,1000px);
  margin:0 auto 18px;
}
body[data-page="payment"] .section-kicker{
  color:#e8c780;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
body[data-page="payment"] .pricing-head h1{
  margin:7px 0 5px;
  color:#ffffff;
  font-size:clamp(1.65rem,3vw,2.25rem);
  letter-spacing:-.035em;
}
body[data-page="payment"] .pricing-head p{max-width:700px;line-height:1.65}
body[data-page="payment"] .dashboard-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  align-items:start;
  gap:16px;
}
body[data-page="payment"] .card,
body[data-page="payment"] .panel{
  min-width:0;
  padding:20px;
}
body[data-page="payment"] .panel-title{
  margin-bottom:14px;
  color:#f7f1e6;
  font-size:.8rem;
  font-weight:700;
}
body[data-page="payment"] .activity-list{display:grid;gap:8px}
body[data-page="payment"] .activity-row{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:10px 0;
  border-bottom:1px solid var(--cy-line-soft);
}
body[data-page="payment"] .activity-row:last-child{border-bottom:0}
body[data-page="payment"] .activity-row>div:nth-child(2){min-width:0}
body[data-page="payment"] .activity-row strong,
body[data-page="payment"] .activity-row span{display:block}
body[data-page="payment"] .activity-row strong{font-size:.72rem}
body[data-page="payment"] .activity-row span{margin-top:3px;color:var(--cy-muted);font-size:.64rem;line-height:1.5;overflow-wrap:anywhere}
body[data-page="payment"] .activity-row time{color:#eae4d9;font-size:.58rem}
body[data-page="payment"] .bubble{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border:1px solid var(--cy-line);
  border-radius:10px;
  background:rgba(225,182,90,.15);
  color:#f4eee3;
  font-size:.75rem;
  font-weight:700;
}
body[data-page="payment"] .premium-box h3{margin:0;color:#ffffff;font-size:1.05rem}
body[data-page="payment"] .premium-box p{margin:9px 0 0}
body[data-page="payment"] .premium-box .btn{display:flex;min-height:42px}

/* Shared mobile layout */
@media(max-width:820px){
  body:not([data-page="home"]){
    min-width:320px;
    background:var(--cy-bg) !important;
  }
  body:not([data-page="home"])::before{
    position:fixed;
    inset:0;
    z-index:0;
    background:
      linear-gradient(180deg,rgba(9,8,7,.30) 0%,rgba(9,8,7,.68) 43%,rgba(9,8,7,.92) 100%),
      url("../assets/home/background-mobile.webp") center top / cover no-repeat,
      var(--cy-bg);
  }
  .app-content,
  .app-main{
    width:100% !important;
    min-width:0;
    margin:0 !important;
    padding:0 14px calc(104px + env(safe-area-inset-bottom)) !important;
  }
  .app-top,
  .app-topbar{
    min-height:calc(62px + env(safe-area-inset-top)) !important;
    height:auto !important;
    margin:0 -14px 10px !important;
    padding:calc(8px + env(safe-area-inset-top)) 14px 8px !important;
  }
  .top-mini-links,
  .app-top .search-wide,
  .app-topbar .searchbox{display:none !important}
  .app-top-actions,
  .topbar-actions{gap:7px;min-width:0}
  .app-top-actions .btn,
  .topbar-actions .btn{height:34px;padding-inline:10px;font-size:.66rem}
  .dashboard-wrap,
  .music-page,
  .settings-page,
  .playlist-page{
    width:100% !important;
    max-width:none !important;
    min-width:0;
    padding-bottom:10px !important;
  }
  .dashboard-wrap,
  .music-page,
  .settings-page,
  .playlist-page,
  .pricing-head,
  .dashboard-grid{margin-inline:auto}
  .server-card{min-width:0;align-items:center}
  .server-card>div:not(.server-icon){min-width:0;flex:1;overflow-wrap:anywhere}
  .server-card strong,
  .server-card span,
  .server-card .join{overflow-wrap:anywhere}
  .track-list,
  .playlist-list,
  .settings-panel,
  .guild-banner,
  .metric-card,
  .price-card{min-width:0}
  .bottom-nav{
    left:10px !important;
    right:10px !important;
    bottom:max(8px,env(safe-area-inset-bottom)) !important;
    z-index:100 !important;
    height:64px !important;
    padding:4px 2px;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  }
  .bottom-nav a{min-width:0;text-align:center}
  .bottom-nav small{font-size:.59rem}
  body[data-page="payment"] .sidebar{display:none !important}
  body[data-page="payment"] .app-main{margin:0 !important}
  body[data-page="payment"] .app-topbar{justify-content:space-between}
  body[data-page="payment"] .mobile-nav-toggle{
    display:grid !important;
    flex:0 0 36px;
    width:36px;
    height:36px;
    border:1px solid rgba(225,183,93,.27);
    border-radius:10px;
    background:rgba(13,12,10,.72);
    color:#f6f0e5;
  }
  body[data-page="payment"] .topbar-actions{margin-left:auto}
  body[data-page="payment"] .user-chip{width:40px;min-width:40px;padding:4px}
  body[data-page="payment"] .user-chip div{display:none}
  body[data-page="payment"] .pricing-head{padding:8px 2px 0}
  body[data-page="payment"] .pricing-head h1{font-size:1.5rem}
  body[data-page="payment"] .dashboard-grid{
    grid-template-columns:minmax(0,1fr);
    width:100%;
  }
  body[data-page="payment"] .card,
  body[data-page="payment"] .panel{padding:16px}
  body[data-page="payment"] .activity-row{grid-template-columns:32px minmax(0,1fr) auto;gap:8px}
}
@media(max-width:480px){
  .app-content,
  .app-main{padding-inline:12px !important}
  .app-top,
  .app-topbar{margin-inline:-12px !important;padding-inline:12px !important}
  .bottom-nav{left:8px !important;right:8px !important}
}
@media(min-width:821px) and (max-width:950px){
  body[data-page="payment"] .sidebar{padding-inline:8px}
  body[data-page="payment"] .sidebar .brand{justify-content:center}
  body[data-page="payment"] .sidebar .brand span,
  body[data-page="payment"] .sidebar .side-link .label,
  body[data-page="payment"] .sidebar .profile-mini>div{display:none}
  body[data-page="payment"] .sidebar .side-link{justify-content:center;padding-inline:0}
  body[data-page="payment"] .sidebar .side-ico{width:auto}
}