/*
 * Cyori Modern Black & Gold 2026
 * Unified presentation layer. Keep Discord OAuth, checkout, music and guild logic untouched.
 * Dark-first, restrained champagne accent, readable ivory content.
 */
:root{
  color-scheme:dark;
  --m-bg:#090a0a;
  --m-surface:#111312;
  --m-raised:#171918;
  --m-hover:#1d201d;
  --m-line:rgba(237,220,176,.105);
  --m-line-strong:rgba(229,195,118,.26);
  --m-ink:#f6f4ef;
  --m-muted:#a4a6a1;
  --m-subtle:#777b75;
  --m-gold:#d9b66f;
  --m-gold-bright:#f3d79a;
  --m-gold-dark:#b78a3e;
  --m-accent:linear-gradient(117deg,#f0d390,#d5aa5b);
  --m-font:"DM Sans","Noto Sans Thai",Inter,system-ui,-apple-system,sans-serif;
  --m-radius:18px;
  --m-shadow:0 24px 72px rgba(0,0,0,.24);
}
html{background:var(--m-bg)}
body{font-family:var(--m-font)}
:focus-visible{outline:2px solid var(--m-gold-bright)!important;outline-offset:3px}
::selection{background:#987639;color:#fff}

/* Shared typographic hierarchy */
.cy-home,.cx-app{color:var(--m-ink);background:var(--m-bg);font-family:var(--m-font)}
.cy-home p,.cx-app p{overflow-wrap:break-word}
.cy-home h1,.cy-home h2,.cy-home h3,.cx-app h1,.cx-app h2,.cx-app h3{
  font-family:var(--m-font);text-wrap:balance;
}
.cy-home a,.cx-app a,.cy-home button,.cx-app button{transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}

/* Public product shell */
.cy-home:not(.cy-invite) {
  background:
    radial-gradient(ellipse 44% 32% at 79% 15%,rgba(211,166,69,.065),transparent 100%),
    var(--m-bg);
}
.cy-home .ambient{display:none}
.cy-home .layout{width:min(1300px,calc(100% - 100px))}
.cy-home .cy-header{
  background:rgba(9,10,10,.83);
  border-bottom:1px solid var(--m-line);
  box-shadow:none;backdrop-filter:blur(22px) saturate(115%)
}
.cy-home .cy-nav{min-height:78px;gap:44px}
.cy-home .cy-brand{font-size:24px;letter-spacing:-1.4px;gap:10px}
.cy-home .cy-brand-icon{
  width:35px;height:35px;padding:3px;
  border:1px solid #524127;border-radius:11px;
  background:#1b1914;box-shadow:none
}
.cy-home .cy-brand-dot{color:var(--m-gold)}
.cy-home .cy-nav-links{gap:28px}
.cy-home .cy-nav-links a{
  color:#a8aaa4;font-size:12px;font-weight:650;
}
.cy-home .cy-nav-links a:hover,.cy-home .cy-nav-links a.current{color:var(--m-ink)}
.cy-home .cy-text-button{font-size:12px;color:#deded7}
.cy-home .cy-text-button:hover{color:var(--m-gold-bright)}
.cy-home .cy-button{font-size:13px;font-weight:750;border-radius:12px;letter-spacing:-.08px}
.cy-home .cy-button-primary{
  background:var(--m-accent);border:1px solid #e3bf77;
  box-shadow:0 4px 18px rgba(218,176,87,.09);
  color:#15140f!important
}
.cy-home .cy-button-primary:hover{background:linear-gradient(110deg,#fee3aa,#ddb76c);box-shadow:0 9px 28px rgba(218,176,87,.16)}
.cy-home .cy-button-outline{background:#161816;border-color:#383a33;color:var(--m-ink)}
.cy-home .cy-button-outline:hover{background:#1e221e;border-color:#70674d}
.cy-home .cy-button-small{min-height:41px;padding-inline:18px}
.cy-home .cy-button-large{min-height:55px;padding-inline:23px}

/* Focused editorial-style hero */
.cy-home .cy-hero{
  grid-template-columns:minmax(0,1.05fr) minmax(440px,.95fr);
  gap:50px;min-height:700px;
  padding-top:101px;padding-bottom:105px;
}
.cy-home .cy-hero-copy{max-width:670px}
.cy-home .cy-eyebrow{
  gap:11px;font-size:10px;font-weight:800;
  letter-spacing:1.3px;color:var(--m-gold);
}
.cy-home .cy-eyebrow-line{background:#5b513a}
.cy-home .cy-status-dot,.cx-app .cx-live span{background:#57c68e;box-shadow:0 0 0 4px rgba(87,198,142,.11)}
.cy-home .cy-hero h1{
  font-size:clamp(66px,6.45vw,105px);
  letter-spacing:-.083em;line-height:1.025;
  margin:27px 0 29px;font-weight:800;
}
.cy-home .cy-hero h1 span{
  background:linear-gradient(100deg,#f7e3b4 5%,#dbb266 65%,#b78a3e);
  -webkit-background-clip:text;background-clip:text;
  color:transparent!important;-webkit-text-fill-color:transparent
}
.cy-home .cy-hero-thai{
  font-size:clamp(21px,1.9vw,25px);
  font-weight:700;letter-spacing:-.7px;
  margin:0 0 9px;color:var(--m-ink)
}
.cy-home .cy-hero-description{
  max-width:520px;color:#a9aba6;
  line-height:1.9;font-size:14px
}
.cy-home .cy-hero-actions{gap:11px;margin-top:31px}
.cy-home .cy-hero-trust{
  color:#969991;font-size:11px;margin-top:28px;gap:14px
}
.cy-home .cy-trust-avatars{opacity:.76}
.cy-home .cy-trust-avatars i{background:#242520;border-color:#0a0a09;color:var(--m-gold-bright)}
.cy-home .cy-showcase{
  height:545px;transform:none;
  isolation:isolate;
}
.cy-home .cy-showcase-halo{
  background:radial-gradient(ellipse at 50% 50%,rgba(202,153,53,.13),rgba(202,153,53,.025) 40%,transparent 73%);
  filter:blur(30px);
}
.cy-home .cy-app-window{
  width:min(450px,96%);
  min-height:486px;transform:rotate(0deg);
  background:linear-gradient(145deg,#1c1d1a 0%,#121412 52%,#10110f 100%);
  border:1px solid rgba(219,194,143,.19);
  border-radius:23px;
  padding:22px;
  box-shadow:0 32px 85px rgba(0,0,0,.43),0 0 55px rgba(205,161,82,.04),inset 0 1px 0 rgba(255,255,255,.025)
}
.cy-home .cy-app-window-top{padding-bottom:5px}
.cy-home .cy-player-visual{
  height:225px;border-radius:15px;
  background:radial-gradient(circle at 49% 42%,#42351e 0%,#242117 34%,#161815 76%)
}
.cy-home .cy-disc-art{box-shadow:0 20px 38px rgba(0,0,0,.4),inset 0 0 0 2px rgba(255,255,255,.02)}
.cy-home .cy-disc-center{background:radial-gradient(circle,#66502a,#252319 64%,transparent 66%)}
.cy-home .cy-disc-center img{filter:none}
.cy-home .cy-window-track strong{font-size:18px;letter-spacing:-.5px;color:#f5f1e7}
.cy-home .cy-player-label{color:var(--m-gold);font-size:9px}
.cy-home .cy-player-bottom{border-color:rgba(227,202,156,.10)}
.cy-home .cy-player-chips span{border-color:#35352c;background:#1b1e1a;color:#a9ab9e}
.cy-home .cy-equalizer i{background:linear-gradient(#f0d28e,#a78042)}
.cy-home .cy-floating-note{color:var(--m-gold)}
.cy-home .cy-float-card{
  background:rgba(24,26,23,.95);
  border:1px solid rgba(234,211,159,.18);
  border-radius:13px;
  box-shadow:0 14px 30px rgba(0,0,0,.22);
  transform:none;
}
.cy-home .cy-float-left{bottom:36px;left:-8px}
.cy-home .cy-float-right{top:55px;right:-10px}
.cy-home .cy-float-icon{background:#2f291d;color:var(--m-gold-bright)}
.cy-home .cy-float-card small{color:#9da096}

/* Metrics: simplified editorial strip */
.cy-home .cy-social-proof{
  background:#101210;
  border-top:1px solid var(--m-line);
  border-bottom:1px solid var(--m-line)
}
.cy-home .cy-stats{padding-top:31px;padding-bottom:31px}
.cy-home .cy-stats>div{border-right:1px solid var(--m-line);padding:0 27px;gap:5px}
.cy-home .cy-stats strong{font-size:34px;color:#f6f3eb;letter-spacing:-1.7px}
.cy-home .cy-stats span{color:#949991;font-size:11px}
.cy-home .cy-stats-caption strong{font-size:13px;letter-spacing:0}
.cy-home .cy-stats-caption .cy-status-dot{margin-block:3px 4px}

/* Modern bento feature cards */
.cy-home .cy-section{padding-block:116px}
.cy-home .cy-section-intro{align-items:end;margin-bottom:37px}
.cy-home .cy-kicker{font-size:10px;color:var(--m-gold);letter-spacing:1.55px;gap:10px}
.cy-home .cy-kicker>span{background:var(--m-gold)}
.cy-home .cy-section-intro h2,.cy-home .cy-bottom-cta h2{
  font-size:clamp(38px,4.25vw,57px);
  letter-spacing:-2.25px;line-height:1.18;font-weight:800
}
.cy-home .cy-section-intro h2 em,.cy-home .cy-bottom-cta h2 em{color:#d9b56f}
.cy-home .cy-section-intro>p{font-size:13px;max-width:350px;line-height:1.85;color:#a2a69c}
.cy-home .cy-feature-grid{gap:15px;grid-template-columns:1.18fr 1fr 1fr}
.cy-home .cy-feature-card{
  min-height:315px;padding:30px;
  background:#141614;
  border:1px solid var(--m-line);
  border-radius:19px;
  box-shadow:none;
}
.cy-home .cy-feature-card:hover{
  transform:translateY(-3px);
  background:#181b18;border-color:rgba(226,186,104,.3);
}
.cy-home .cy-feature-featured{
  background:radial-gradient(ellipse at 80% 12%,rgba(189,143,55,.13),transparent 55%),#161714
}
.cy-home .cy-feature-num{font-size:10px;color:#a9a69a;letter-spacing:1px}
.cy-home .cy-feature-card h3{font-size:19px;letter-spacing:-.65px}
.cy-home .cy-feature-card p{color:#a0a59d;font-size:12px}
.cy-home .cy-feature-icon{
  background:#23231c;border:1px solid #444030;
  border-radius:15px;color:#e6c37d;
  width:61px;height:61px
}
.cy-home .cy-feature-orb{
  background:radial-gradient(circle,#3b3322,#24231b 65%,#171915 67%);
  box-shadow:none;width:93px;height:93px
}
.cy-home .cy-feature-orb span{color:#e6c584}
.cy-home .cy-inline-link{color:var(--m-gold-bright)}
.cy-home .cy-how{
  background:#101210;
  border-block:1px solid var(--m-line)
}
.cy-home .cy-step>span{color:#d2ae69}
.cy-home .cy-step-line{background:linear-gradient(90deg,#988057,#34332c)}
.cy-home .cy-step p{color:#a2a49e}
.cy-home .cy-bottom-cta-inner{
  background:linear-gradient(130deg,#1b1c18,#151715);
  border:1px solid rgba(231,194,116,.25);
  border-radius:25px;
  padding-block:79px 84px;
}
.cy-home .cy-cta-glow{
  background:radial-gradient(ellipse at 50% 0,rgba(224,178,87,.115),transparent 65%)
}
.cy-home .cy-bottom-cta p{color:#aeb0a6}
.cy-home .cy-footer{
  background:#0d0e0d;border-top:1px solid var(--m-line)
}
.cy-home .cy-footer nav a{color:#a1a59c}
.cy-home .cy-footer nav a:hover{color:var(--m-gold-bright)}

/* Invite uses the same product visual style */
.cy-invite{background:radial-gradient(ellipse at 50% 38%,rgba(211,165,74,.07),transparent 60%),var(--m-bg)!important}
.cy-invite .cy-invite-card{
  background:#141614;border:1px solid var(--m-line-strong);
  border-radius:24px;box-shadow:var(--m-shadow)
}
.cy-invite .cy-invite-emblem{background:#252218;border-color:#655334;box-shadow:none}
.cy-invite .cy-invite-card h1 span{color:var(--m-gold)}
.cy-invite .cy-invite-flow{border-color:var(--m-line)}
.cy-invite .cy-invite-loader span{background:var(--m-gold)}

/* Account / music / playlist workspace */
body.cx-app{background:var(--m-bg);color:var(--m-ink)}
.cx-app .cx-shell{grid-template-columns:245px minmax(0,1fr)}
.cx-app .cx-sidebar{
  background:#101210;
  border-right:1px solid var(--m-line);
  padding:30px 15px 22px
}
.cx-app .cx-logo{font-size:25px;letter-spacing:-1px;padding-bottom:41px}
.cx-app .cx-logo img{width:35px;height:35px;border-radius:10px;filter:none}
.cx-app .cx-logo-dot{color:var(--m-gold)}
.cx-app .cx-sidebar-group-label{
  color:#858a80;font-size:10px;letter-spacing:1.1px;font-weight:700
}
.cx-app .cx-sidebar-nav{gap:5px;margin-bottom:31px}
.cx-app .cx-sidebar-nav a{
  color:#a4a9a1;
  font-size:12px;font-weight:600;
  padding:13px 14px;
  border-radius:11px
}
.cx-app .cx-sidebar-nav a:hover{background:#1b1e1a;color:var(--m-ink)}
.cx-app .cx-sidebar-nav a.active{
  background:#29271f;
  border:1px solid rgba(220,180,93,.22);
  color:#efd9a9;box-shadow:none
}
.cx-app .cx-nav-icon{color:#c8ad77}
.cx-app .cx-sidebar-bottom{border-color:var(--m-line)}
.cx-app .cx-sidebar-user img{filter:none}
.cx-app .cx-main{
  background:radial-gradient(ellipse 52% 33% at 88% 1%,rgba(211,173,94,.027),transparent),var(--m-bg)
}
.cx-app .cx-topbar{
  height:76px;padding-inline:clamp(28px,4.1vw,76px);
  background:rgba(13,15,13,.89);
  border-bottom:1px solid var(--m-line);
}
.cx-app .cx-breadcrumb{letter-spacing:1.1px;font-size:10px;color:#888e84}
.cx-app .cx-breadcrumb b{color:#e5e4dc}
.cx-app .cx-header-login{font-size:12px;color:#d9dbd3}
.cx-app .cx-small-primary,.cx-app .cx-primary-action,.cx-app .cx-search-wrap button,.cx-app .cx-empty button{
  color:#171510!important;
  background:var(--m-accent);
  border:1px solid #ebc980;
  border-radius:11px;font-weight:750;
  box-shadow:none
}
.cx-app .cx-small-primary:hover,.cx-app .cx-primary-action:hover,.cx-app .cx-search-wrap button:hover{background:linear-gradient(110deg,#ffdfa0,#dcb76f)}
.cx-app .cx-content{
  padding:55px clamp(28px,4.1vw,76px) 38px;
  max-width:1660px
}
.cx-app .cx-section-kicker{color:var(--m-gold);letter-spacing:1.5px;font-size:10px}
.cx-app .cx-section-kicker span{background:var(--m-gold)}
.cx-app .cx-page-heading{margin:17px 0 35px}
.cx-app .cx-page-heading h1{
  font-size:clamp(32px,3vw,46px);
  font-weight:800;letter-spacing:-1.7px;
  line-height:1.22
}
.cx-app .cx-page-heading p{color:#a4a79e;font-size:13px}
.cx-app .cx-purple-dot{color:var(--m-gold)}
.cx-app .cx-summary-grid{gap:13px}
.cx-app .cx-summary-card{
  border:1px solid var(--m-line);
  background:#141614;
  border-radius:17px;
  min-height:163px;
  padding:23px 24px;
  box-shadow:none
}
.cx-app .cx-summary-card>strong{font-size:39px;color:#f5f0e5;letter-spacing:-1.65px}
.cx-app .cx-summary-top{color:#a4a89e;font-size:12px}
.cx-app .cx-summary-icon{background:#24251e;color:#d8b870}
.cx-app .cx-summary-card>small{color:#8c9188}
.cx-app .cx-dashboard-columns{gap:24px;margin-top:48px}
.cx-app .cx-list-heading h2{font-size:23px;letter-spacing:-.75px}
.cx-app .cx-section-hint{font-size:12px;color:#969c93}
.cx-app .cx-quiet-button{
  background:#181a17;border:1px solid #353830;
  color:#dfc28b;border-radius:10px
}
.cx-app .cx-quiet-button:hover{background:#22251f}
.cx-app .cx-server-item,.cx-app .cx-playlist-entry{
  background:#151815;
  border:1px solid var(--m-line);
  border-radius:15px
}
.cx-app .cx-server-item:hover,.cx-app .cx-playlist-entry[open]{border-color:rgba(224,189,113,.28)}
.cx-app .cx-server-avatar,.cx-app .cx-playlist-avatar{
  background:#29271f;color:var(--m-gold-bright)
}
.cx-app .cx-server-copy small,.cx-app .cx-playlist-entry-copy small{color:#a0a397}
.cx-app .cx-server-action{
  background:#2c281e;color:#f1d6a0!important;
  border:1px solid #594c31;border-radius:10px
}
.cx-app .cx-empty{
  border:1px dashed rgba(236,205,148,.19);
  background:#131512;
  border-radius:17px;
  min-height:225px;
}
.cx-app .cx-empty strong{font-size:15px;color:var(--m-ink)}
.cx-app .cx-empty p{color:#989f95}
.cx-app .cx-loading-ring{border-color:#37362c;border-top-color:var(--m-gold)}
.cx-app .cx-side-card{
  background:#151815;
  border:1px solid var(--m-line);
  border-radius:16px
}
.cx-app .cx-side-purple{
  background:radial-gradient(ellipse at 95% 0,rgba(215,172,88,.11),transparent 65%),#1b1c17;
  border-color:rgba(231,193,119,.2)
}
.cx-app .cx-side-graphic{color:#e1c17e;filter:none}
.cx-app .cx-side-card p{color:#abb0a6}
.cx-app .cx-side-card>a{color:var(--m-gold-bright)!important}
.cx-app .cx-quick-list a{color:var(--m-gold)}
.cx-app .cx-quick-list a span{color:#d5d7cd}
.cx-app .cx-content-footer{border-top-color:var(--m-line);color:#858c83}

/* Actual music and playlist functionality stays unchanged */
.cx-app .cx-music-hero{
  background:radial-gradient(ellipse at 96% 0,rgba(206,158,70,.11),transparent 62%),#171916;
  border:1px solid var(--m-line-strong);border-radius:19px;
}
.cx-app .cx-music-intro h2{font-size:35px}
.cx-app .cx-music-intro>p,.cx-app .cx-music-intro .cx-music-note{color:#a3a89e}
.cx-app .cx-search-wrap{
  background:#0d0f0d;border:1px solid #3d3e35;border-radius:12px
}
.cx-app .cx-search-wrap input{color:var(--m-ink)}
.cx-app .cx-record{box-shadow:0 0 0 8px rgba(209,171,95,.045);filter:saturate(.68)}
.cx-app .cx-track-list{
  background:#141614;border:1px solid var(--m-line);border-radius:16px
}
.cx-app .cx-track-list .track-row:hover{background:#1c211c!important}
.cx-app .cx-playlist-overview>div{
  background:#151815;border:1px solid var(--m-line);border-radius:15px
}
.cx-app .cx-playlist-info{
  background:radial-gradient(ellipse at 100% 0,rgba(227,185,100,.09),transparent 65%),#1b1c17!important;
  border:1px solid var(--m-line-strong)!important
}
.cx-app .cx-music-links a{
  background:#171917;border-color:var(--m-line);border-radius:12px
}
.cx-app .cx-music-links a:hover{border-color:var(--m-line-strong)}

/* Legacy settings/premium/payment interfaces: clean, flat and consistent */
body:not(.cy-home):not(.cx-app){
  color:var(--m-ink)!important;
  background:#090a09!important;font-family:var(--m-font)!important
}
body:not(.cy-home):not(.cx-app) .page-frame{
  width:min(100%,1800px);margin:0 auto;
  min-height:100vh;border:0;border-radius:0;box-shadow:none
}
body:not(.cy-home):not(.cx-app) .app-shell{background:#090a09!important}
body:not(.cy-home):not(.cx-app) .app-sidebar,
body:not(.cy-home):not(.cx-app) .sidebar{background:#101210!important;border-right:1px solid var(--m-line)!important;box-shadow:none!important}
body:not(.cy-home):not(.cx-app) .app-top,
body:not(.cy-home):not(.cx-app) .public-nav{
  background:rgba(13,15,13,.92)!important;border-bottom:1px solid var(--m-line)!important;
  box-shadow:none!important;backdrop-filter:blur(16px)
}
body:not(.cy-home):not(.cx-app) .dash-hero,
body:not(.cy-home):not(.cx-app) .metric-card,
body:not(.cy-home):not(.cx-app) .server-card,
body:not(.cy-home):not(.cx-app) .price-card,
body:not(.cy-home):not(.cx-app) .settings-panel,
body:not(.cy-home):not(.cx-app) .premium-side,
body:not(.cy-home):not(.cx-app) .guild-banner{
  background:#151815!important;
  border:1px solid var(--m-line)!important;
  box-shadow:none!important;border-radius:16px!important
}
body:not(.cy-home):not(.cx-app) .price-card.popular{border-color:var(--m-line-strong)!important}
body:not(.cy-home):not(.cx-app) .btn-primary,
body:not(.cy-home):not(.cx-app) .playlist-create{
  background:var(--m-accent)!important;
  color:#15140e!important;
  border:1px solid #dfb869!important;
  border-radius:11px!important;box-shadow:none!important
}
body:not(.cy-home):not(.cx-app) .btn-ghost{background:#181a17!important;border-color:#414339!important;color:#f0f0e9!important}
body:not(.cy-home):not(.cx-app) .btn:hover{transform:translateY(-1px)}
body:not(.cy-home):not(.cx-app) input,
body:not(.cy-home):not(.cx-app) select,
body:not(.cy-home):not(.cx-app) textarea{accent-color:var(--m-gold)}
body:not(.cy-home):not(.cx-app) .side-nav a.active,
body:not(.cy-home):not(.cx-app) .side-link.active{background:#27261e!important;color:#f0d69d!important}
body:not(.cy-home):not(.cx-app) .public-links a.active,
body:not(.cy-home):not(.cx-app) .nav-link.active{color:var(--m-gold)!important}
body:not(.cy-home):not(.cx-app) .bottom-nav{background:#101310!important;border-top:1px solid var(--m-line)!important}

/* Supporting pages retain authored content */
body:not(.cy-home):not(.cx-app) #header{
  background:rgba(11,13,11,.92)!important;
  border-bottom:1px solid var(--m-line)!important
}
body:not(.cy-home):not(.cx-app) :is(.card,.command-card,.plan-card,.feature-card,.profile-card,.doc-card,.glass-card){
  background:#151815!important;border:1px solid var(--m-line)!important;
  box-shadow:none!important;border-radius:16px!important
}
body:not(.cy-home):not(.cx-app) :is(.text-gradient,.gradient-text){
  background:linear-gradient(105deg,#f1dbad,#caa254)!important;
  background-clip:text!important;-webkit-background-clip:text!important;
  color:transparent!important
}

/* Responsive consistency */
@media(max-width:1180px){
  .cy-home .cy-hero{gap:20px;grid-template-columns:minmax(0,1fr) minmax(390px,.95fr)}
  .cy-home .cy-nav{gap:20px}
  .cy-home .cy-nav-links{gap:17px}
  .cx-app .cx-shell{grid-template-columns:215px minmax(0,1fr)}
  .cx-app .cx-content,.cx-app .cx-topbar{padding-inline:32px}
}
@media(max-width:960px){
  .cy-home .layout{width:min(760px,calc(100% - 44px))}
  .cy-home .cy-nav{min-height:72px}
  .cy-home .cy-nav-links{
    top:71px;gap:0;background:#151815;border-bottom:1px solid var(--m-line)
  }
  .cy-home .cy-nav-links.open{display:flex}
  .cy-home .cy-menu-toggle{border-color:#44443a}
  .cy-home .cy-hero{
    grid-template-columns:1fr;min-height:0;
    padding-top:82px;padding-bottom:64px;gap:22px
  }
  .cy-home .cy-hero-copy{max-width:740px;margin-inline:auto}
  .cy-home .cy-hero h1{font-size:clamp(61px,9vw,90px)}
  .cy-home .cy-showcase{height:550px;margin:auto}
  .cy-home .cy-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cy-home .cy-feature-featured{grid-column:1/-1}
  .cy-home .cy-section{padding-block:86px}
  .cx-app .cx-content{padding:38px 24px 30px}
  .cx-app .cx-dashboard-columns{grid-template-columns:1fr}
}
@media(max-width:650px){
  .cy-home .layout{width:calc(100% - 36px)}
  .cy-home .cy-nav{min-height:65px}
  .cy-home .cy-nav-links{top:64px}
  .cy-home .cy-hero{text-align:left;padding-top:63px;gap:2px}
  .cy-home .cy-eyebrow{justify-content:flex-start}
  .cy-home .cy-hero h1{font-size:clamp(53px,13.8vw,77px);letter-spacing:-.074em;margin:25px 0 24px}
  .cy-home .cy-hero-thai{font-size:20px}
  .cy-home .cy-hero-description{font-size:13px}
  .cy-home .cy-hero-actions{justify-content:stretch}
  .cy-home .cy-hero-actions .cy-button{width:100%}
  .cy-home .cy-hero-trust{justify-content:flex-start}
  .cy-home .cy-showcase{height:460px;transform:scale(.82);transform-origin:top center}
  .cy-home .cy-float-left{left:-10px}
  .cy-home .cy-float-right{right:-8px}
  .cy-home .cy-stats>div{border-right:0;border-bottom:1px solid var(--m-line);padding:9px 12px}
  .cy-home .cy-stats>div:nth-child(odd){padding-left:0}
  .cy-home .cy-stats>div:nth-child(n+3){border-bottom:0}
  .cy-home .cy-section{padding-block:70px}
  .cy-home .cy-section-intro h2,.cy-home .cy-bottom-cta h2{font-size:38px;letter-spacing:-1.4px}
  .cy-home .cy-feature-grid{grid-template-columns:1fr}
  .cy-home .cy-feature-featured{grid-column:auto}
  .cy-home .cy-feature-card{min-height:290px;padding:27px}
  .cy-home .cy-bottom-cta-inner{padding:58px 22px}
  .cx-app .cx-content{padding:36px 18px 25px}
  .cx-app .cx-topbar{padding-inline:18px}
  .cx-app .cx-page-heading h1{font-size:31px}
  .cx-app .cx-summary-card{min-height:145px;padding:18px 17px}
  .cx-app .cx-summary-card>strong{font-size:32px}
  .cx-app .cx-music-hero{padding:27px 22px}
  .cx-app .cx-music-intro h2{font-size:27px}
  .cx-app .cx-sidebar{display:none}
}
@media(max-width:380px){
  .cy-home .cy-showcase{transform:scale(.72);margin-bottom:-52px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* Final visual refinement: truly border-light navigation and analytics */
.cx-app .cx-sidebar-nav a:not(.active){
  border-color:transparent!important;
  background:transparent!important
}
.cx-app .cx-sidebar-nav a:not(.active):hover{
  background:#1b1f1b!important;color:#f0efe9!important
}
.cx-app .cx-summary-card,
.cx-app .cx-server-item,
.cx-app .cx-side-card,
.cx-app .cx-playlist-entry{border-color:#2b302b!important}
.cx-app .cx-summary-card:hover{border-color:#454738!important}
.cx-app .cx-side-purple{border-color:#51432e!important}

/* Settings is a real workspace, not an old cramped control panel */
@media(min-width:901px){
  body[data-page="settings"] .app-sidebar{width:245px!important;padding:29px 16px 22px!important}
  body[data-page="settings"] .app-content{margin-left:245px!important;padding:0 clamp(28px,4.1vw,75px) 48px!important}
}
body[data-page="settings"] .app-sidebar .logo{
  display:flex;gap:12px;align-items:center;padding:1px 13px 35px!important;
  font-size:24px!important;font-weight:800;letter-spacing:-1px
}
body[data-page="settings"] .app-sidebar .logo img{width:35px!important;height:35px!important;border-radius:10px!important}
body[data-page="settings"] .side-nav{gap:5px}
body[data-page="settings"] .side-nav .side-link{
  border:1px solid transparent!important;border-radius:11px!important;
  background:transparent!important;color:#a4a9a1!important;
  min-height:44px;height:auto;padding:11px 13px!important;font-size:12px!important;
  font-weight:600;line-height:1.5
}
body[data-page="settings"] .side-nav .side-link:hover{
  background:#1b1e1a!important;color:#f2f1eb!important
}
body[data-page="settings"] .side-nav .side-link.active{
  background:#29271f!important;color:#f3dba7!important;
  border-color:#4b422d!important
}
body[data-page="settings"] .side-ico{font-size:17px;color:#c4a96f}
body[data-page="settings"] .side-section-title{
  margin:24px 13px 12px!important;font-size:10px!important;
  letter-spacing:1px;color:#8d9287!important
}
body[data-page="settings"] .side-profile{
  padding:11px!important;background:#171916!important;
  border-color:#2d3129!important;border-radius:12px!important
}
body[data-page="settings"] .side-profile strong{font-size:12px!important}
body[data-page="settings"] .side-profile span{color:#a0a69c!important;font-size:10px!important}
body[data-page="settings"] .app-top{
  height:76px!important;
  border-bottom:1px solid var(--m-line)!important;
  padding:0 2px;margin-bottom:12px;
  background:transparent!important
}
body[data-page="settings"] .top-mini-links{gap:21px;font-size:12px!important;color:#a6aaa1}
body[data-page="settings"] .top-mini-links a:hover{color:#efdda8}
body[data-page="settings"] .app-top-actions{gap:10px}
body[data-page="settings"] .settings-page{
  max-width:1130px!important;
  padding:25px 0 80px!important;
  margin-inline:auto!important
}
body[data-page="settings"] .settings-page .page-title{
  font-size:clamp(30px,3vw,42px)!important;
  font-weight:800;letter-spacing:-1.5px;
  line-height:1.18;margin-bottom:27px;color:var(--m-ink)
}
body[data-page="settings"] .guild-banner{
  min-height:82px!important;
  border:1px solid #31352d!important;
  border-radius:14px!important;
  background:#171916!important;
  padding:15px 19px!important;
  grid-template-columns:50px 1fr minmax(200px,290px)!important;
  gap:16px!important
}
body[data-page="settings"] .guild-banner img{width:50px;height:50px;border-radius:12px}
body[data-page="settings"] .guild-banner strong{font-size:14px}
body[data-page="settings"] .guild-banner span{font-size:11px;color:#979f94;margin-top:5px}
body[data-page="settings"] .guild-banner select{
  min-height:43px;border:1px solid #363b32;
  background:#101310;color:#f2f0e9;
  border-radius:10px;font-size:12px;padding-inline:12px
}
body[data-page="settings"] .settings-tabs{
  margin:20px 0 17px!important;gap:5px!important;
  padding-bottom:10px;
  border-bottom:1px solid var(--m-line);
  flex-wrap:wrap
}
body[data-page="settings"] .settings-tab{
  font-size:12px!important;font-weight:650;
  height:41px!important;padding-inline:19px!important;
  color:#a3a89f!important;border-radius:10px!important
}
body[data-page="settings"] .settings-tab:hover{background:#1e221d!important;color:#eee9dd!important}
body[data-page="settings"] .settings-tab.active{
  background:#302c21!important;color:#f2d9a1!important;
  box-shadow:none!important
}
body[data-page="settings"] .settings-panel{
  background:#151815!important;border:1px solid #2e332d!important;
  border-radius:16px!important;padding:9px 23px!important;box-shadow:none!important
}
body[data-page="settings"] .setting-row{
  min-height:75px!important;gap:22px!important;
  border-bottom:1px solid rgba(227,224,210,.085)!important
}
body[data-page="settings"] .setting-copy strong{font-size:13px!important;font-weight:700;color:#f0efe9}
body[data-page="settings"] .setting-copy p{font-size:11px!important;line-height:1.65;color:#9ea39a;margin-top:5px}
body[data-page="settings"] .setting-control select,
body[data-page="settings"] .setting-control input{
  min-height:43px!important;
  background:#0e110e!important;color:#f3f0e8!important;
  border:1px solid #393e34!important;
  border-radius:10px!important;
  font-size:12px!important;
  padding:0 13px!important
}
body[data-page="settings"] .settings-save{margin-top:19px}
body[data-page="settings"] .settings-save button{min-height:44px!important;padding-inline:24px!important}
body[data-page="settings"] .switch{width:44px;height:24px;background:#343a32}
body[data-page="settings"] .switch::after{width:20px;height:20px;top:2px;left:2px}
body[data-page="settings"] .switch.on{background:#cfa856}
body[data-page="settings"] .switch.on::after{left:22px;background:#11140f}
@media(max-width:900px){
  body[data-page="settings"] .settings-page{padding:25px 5px 90px!important}
  body[data-page="settings"] .app-content{margin-left:0!important;padding:0 20px 32px!important}
}
@media(max-width:600px){
  body[data-page="settings"] .guild-banner{
    grid-template-columns:44px minmax(0,1fr)!important;gap:11px!important;
    padding:15px!important
  }
  body[data-page="settings"] .guild-banner select{grid-column:1/-1;min-width:0;width:100%}
  body[data-page="settings"] .settings-page .page-title{font-size:30px!important}
  body[data-page="settings"] .settings-panel{padding:7px 15px!important}
  body[data-page="settings"] .setting-row{grid-template-columns:minmax(0,1fr) auto!important;min-height:75px!important;gap:10px!important}
  body[data-page="settings"] .setting-control{min-width:145px}
  body[data-page="settings"] .app-top{height:62px!important}
}

/* Cyori Icons — real shared SVG paths, never Unicode/emoji glyphs. */
svg.cy-icon{
  display:inline-block;
  width:1.12em;height:1.12em;
  min-width:1em;min-height:1em;
  vertical-align:-.14em;
  flex:none;
  color:inherit;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  overflow:visible;
}
button .cy-icon,a .cy-icon{pointer-events:none}
.cy-home .cy-nav-actions a .cy-icon,.cy-home .cy-button .cy-icon{width:17px;height:17px}
.cy-home .cy-menu-toggle .cy-icon{width:20px;height:20px}
.cy-home .cy-arrow,.cy-home .cy-arrow .cy-icon{display:inline-flex;align-items:center;justify-content:center}
.cy-home .cy-arrow .cy-icon{width:17px;height:17px}
.cy-home .cy-discord-symbol .cy-icon{width:17px;height:17px}
.cy-home .cy-window-dots .cy-icon{width:17px;height:17px}
.cy-home .cy-trust-avatars .cy-icon{width:15px;height:15px}
.cy-home .cy-floating-note .cy-icon{width:25px;height:25px}
.cy-home .cy-player-bottom .cy-icon{width:14px;height:14px}
.cy-home .cy-player-bottom>span{display:inline-flex;align-items:center;gap:6px}
.cy-home .cy-float-icon .cy-icon{width:19px;height:19px}
.cy-home .cy-feature-orb .cy-icon{width:45px;height:45px}
.cy-home .cy-feature-icon .cy-icon{width:30px;height:30px}
.cy-home .cy-inline-link .cy-icon{width:14px;height:14px;margin-left:8px}
.cy-home .cy-inline-link{display:inline-flex;align-items:center}
.cy-home .cy-invite-flow .cy-icon{width:14px;height:14px}
.cx-app .cx-nav-icon .cy-icon{width:20px;height:20px;display:block}
.cx-app .cx-summary-icon .cy-icon{width:19px;height:19px}
.cx-app .cx-side-graphic .cy-icon{width:51px;height:51px}
.cx-app .cx-quick-list a>.cy-icon{width:18px;height:18px}
.cx-app .cx-quick-list a>.cy-icon:last-child{width:15px;height:15px;margin-left:auto}
.cx-app .cx-primary-action,.cx-app .cx-small-primary,.cx-app .cx-server-action{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.cx-app .cx-primary-action .cy-icon,.cx-app .cx-small-primary .cy-icon{width:16px;height:16px}
.cx-app .cx-server-action .cy-icon{width:15px;height:15px}
.cx-app .cx-server-action.off .cy-icon{width:15px;height:15px}
.cx-app .cx-back-link .cy-icon,.cx-app .cx-header-login .cy-icon{width:15px;height:15px}
.cx-app .cx-quiet-button .cy-icon{width:15px;height:15px;margin-right:5px}
.cx-app .cx-empty-glyph .cy-icon{width:28px;height:28px}
.cx-app .cx-playlist-avatar .cy-icon{width:25px;height:25px}
.cx-app .cx-playlist-chevron .cy-icon{width:19px;height:19px}
.cx-app .cx-playlist-entry[open] .cx-playlist-chevron .cy-icon{transform:rotate(180deg)}
.cx-app .cx-music-art>span .cy-icon{width:52px;height:52px}
.cx-app .cx-search-wrap>span .cy-icon{width:22px;height:22px}
.cx-app .cx-music-links a{display:flex;align-items:center;gap:10px}
.cx-app .cx-music-links a .cy-icon{width:17px;height:17px}
.cx-app .cx-music-links a .cy-icon:last-child{width:15px;height:15px;margin-left:auto}
.cx-app .cx-track-list .track-row .cy-icon{width:15px;height:15px}
.cx-app .cx-mobile-nav a>.cy-icon{width:22px;height:22px}
body[data-page="settings"] .side-ico .cy-icon,
body[data-page="payment"] .side-ico .cy-icon{width:18px;height:18px;display:block}
body:not(.cy-home):not(.cx-app) .bottom-nav .cy-icon{width:21px;height:21px}
body:not(.cy-home):not(.cx-app) .active-icon .cy-icon{width:18px;height:18px}
body:not(.cy-home):not(.cx-app) .searchbox .cy-icon{width:19px;height:19px}
body:not(.cy-home):not(.cx-app) .icon-btn .cy-icon{width:18px;height:18px}
body:not(.cy-home):not(.cx-app) .btn .cy-icon{width:15px;height:15px}
.cy-home .cy-equalizer-svg{display:block;width:100%;height:39px;margin:12px 0 7px;color:var(--m-gold);overflow:visible}
.cy-home .cy-equalizer-svg path{stroke:currentColor;stroke-width:2.5;stroke-linecap:round;fill:none}
@media(max-width:900px){
  .cx-app .cx-mobile-nav a{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px}
  .cx-app .cx-mobile-nav a .cy-icon{width:22px;height:22px}
}
@media(prefers-reduced-motion:reduce){
  .cx-app .cx-playlist-chevron .cy-icon{transition:none}
}

.cy-home .cy-disc-center .cy-icon{
  width:65px;height:65px;min-width:65px;min-height:65px;
  color:#f0ce80;stroke-width:1.55;
  filter:drop-shadow(0 0 10px rgba(231,181,74,.26))
}
.cy-home .cy-disc-center{display:flex;justify-content:center;align-items:center}

/* Prevent GPU filter compositing from painting opaque squares behind external SVG <use> instances. */
svg.cy-icon{background:transparent!important;border:0!important;box-shadow:none!important;filter:none!important}
.cy-home .cy-floating-note{filter:none!important}
.cy-home .cy-floating-note .cy-icon{color:#e1ba71;stroke:#e1ba71}
.cy-home .cy-disc-center .cy-icon{color:#f2d28a;stroke:#f2d28a}
.cy-home .cy-button-primary .cy-icon{color:#17120a;stroke:#17120a}

/* Keep animated record content above visual overlays. */
.cy-home .cy-disc-art{isolation:isolate}
.cy-home .cy-disc-ring{z-index:0;pointer-events:none}
.cy-home .cy-disc-center{position:relative;z-index:2;isolation:isolate}
.cy-home .cy-disc-center img{
  display:block!important;width:79px!important;height:79px!important;
  object-fit:contain!important;opacity:1!important;visibility:visible!important;
  position:relative;z-index:3;
  filter:none!important;transform:none!important
}