:root{
  color-scheme:dark;
  --bg:#050713;
  --bg2:#070b17;
  --panel:#0a0f1d;
  --panel2:#0e1424;
  --panel3:#12192b;
  --line:#1e2a40;
  --line-soft:rgba(130,148,180,.14);
  --purple:#8b5cf6;
  --purple2:#b45cff;
  --pink:#ff4fb8;
  --cyan:#45d6ff;
  --green:#2ee6a6;
  --text:#f7f6ff;
  --muted:#979caf;
  --muted2:#707789;
  --radius:12px;
  --sidebar:198px;
  --shadow:0 24px 64px rgba(0,0,0,.40);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,"Noto Sans Thai","Segoe UI",system-ui,-apple-system,sans-serif}
body{overflow-x:hidden}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
::selection{background:rgba(155,83,255,.45)}
.hidden{display:none!important}
.muted{color:var(--muted)}
.spacer{flex:1}
.page-frame{
  width:calc(100vw - 8px);
  margin:4px auto;
  min-height:calc(100vh - 8px);
  border:1px solid #28324a;
  border-radius:12px;
  overflow:hidden;
  background:#070a14;
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  position:relative;
}
.btn{
  height:42px;
  padding:0 20px;
  border-radius:9px;
  border:1px solid #303750;
  color:#f8f7ff;
  background:#0b101d;
  font-weight:700;
  font-size:.84rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  transition:.18s ease;
}
.btn:hover{transform:translateY(-1px);border-color:#7453d4}
.btn-primary{
  background:linear-gradient(135deg,#7a40ff 0%,#a84cff 55%,#d24ed2 100%);
  border-color:#a36cff;
  box-shadow:0 10px 28px rgba(132,59,255,.33),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:rgba(9,12,24,.74)}
.btn-sm{height:34px;padding:0 13px;border-radius:8px;font-size:.76rem}
.icon-btn{
  width:36px;height:36px;border:0;border-radius:9px;background:transparent;color:#d8d9e2;
  display:grid;place-items:center;font-size:1rem
}
.icon-btn:hover{background:#111727}
.logo{
  display:flex;align-items:center;gap:9px;font-weight:900;font-size:1.28rem;letter-spacing:-.025em
}
.logo img{width:31px;height:31px;border-radius:9px;object-fit:cover}

/* public navigation */
.public-nav{
  height:58px;
  display:flex;align-items:center;
  padding:0 20px;
  position:relative;
  z-index:20;
}
.public-links{
  margin-left:auto;margin-right:auto;
  display:flex;align-items:center;gap:28px;
  color:#c4c6d1;font-size:.78rem;
}
.public-links a{padding:19px 0 15px;border-bottom:2px solid transparent}
.public-links a:hover,.public-links a.active{color:#fff;border-color:#a45bff}
.public-actions{display:flex;align-items:center;gap:9px}
.public-actions .btn{height:34px;padding:0 15px;font-size:.75rem}

/* HOME */
.home-frame{
  background:
    radial-gradient(circle at 63% 31%,rgba(118,55,228,.22),transparent 29%),
    radial-gradient(circle at 18% 95%,rgba(33,108,255,.21),transparent 26%),
    linear-gradient(120deg,#070914 0%,#060813 43%,#0b0a22 73%,#070913 100%);
}
.home-frame::before{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(128deg,transparent 59%,rgba(99,76,255,.11) 60%,transparent 62%),
    linear-gradient(140deg,transparent 69%,rgba(23,128,255,.12) 70%,transparent 72%),
    linear-gradient(25deg,rgba(57,105,255,.14),transparent 22%);
  pointer-events:none;
}
.home-main{
  min-height:calc(100vh - 76px);
  display:grid;
  grid-template-columns:minmax(520px,43%) minmax(0,57%);
  position:relative;
}
.home-copy{
  z-index:4;
  padding:62px 0 46px 46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:650px;
}
.home-copy h1{
  margin:0 0 2px;
  font-size:clamp(4rem,5.2vw,5.15rem);
  line-height:.92;
  letter-spacing:-.055em;
  text-shadow:0 0 22px rgba(164,94,255,.22);
}
.home-copy h2{
  margin:7px 0 11px;
  font-size:clamp(1.85rem,2.35vw,2.45rem);
  line-height:1.14;
  letter-spacing:-.035em;
}
.home-copy h2 span{
  background:linear-gradient(90deg,#fff 0%,#dda5ff 52%,#ff75d8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.home-copy p{
  margin:0;
  max-width:585px;
  color:#c4c7d3;
  font-size:1rem;
  line-height:1.58;
}
.home-actions{display:flex;gap:14px;margin-top:26px}
.home-actions .btn{height:45px;min-width:145px}
.home-stats{
  margin-top:31px;
  display:grid;
  grid-template-columns:repeat(4,minmax(90px,1fr));
  gap:24px;
  width:min(625px,100%);
}
.home-stat strong{display:block;font-size:1.55rem;letter-spacing:-.03em}
.home-stat span{display:block;color:#9095a7;font-size:.72rem;margin-top:3px}
.home-art{
  position:relative;
  min-height:610px;
  overflow:hidden;
}
.home-art img.hero-character{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:52% 45%;
  filter:saturate(1.08) contrast(1.04);
  opacity:.98;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.72) 15%,#000 36%,#000 100%);
}
.home-art::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(5,7,19,.66) 0%,transparent 29%),
    linear-gradient(180deg,rgba(5,7,19,.08),transparent 70%,rgba(5,7,19,.36));
  pointer-events:none;
}
.handwritten{
  position:absolute;
  right:5.4%;
  bottom:30%;
  z-index:5;
  color:#ff72d7;
  font-size:1.9rem;
  line-height:1.05;
  transform:rotate(-7deg);
  text-shadow:0 0 18px rgba(255,91,214,.50);
  font-style:italic;
  font-weight:500;
}
.now-card{
  position:absolute;
  right:2.3%;
  bottom:14px;
  z-index:7;
  width:min(560px,41vw);
  min-width:430px;
  padding:13px 15px 11px;
  border-radius:13px;
  border:1px solid rgba(155,105,255,.48);
  background:rgba(8,11,24,.86);
  backdrop-filter:blur(17px);
  box-shadow:0 18px 42px rgba(0,0,0,.42);
}
.now-top{display:grid;grid-template-columns:54px 1fr auto;gap:11px;align-items:center}
.now-cover{width:54px;height:54px;border-radius:7px;object-fit:cover}
.now-meta small{display:block;color:#7f8495;font-size:.62rem;margin-bottom:3px}
.now-meta strong{display:block;font-size:.86rem}
.now-meta span{display:block;color:#aeb0bf;font-size:.68rem;margin-top:3px}
.wave{display:flex;height:30px;align-items:end;gap:2px}
.wave i{width:2px;border-radius:3px;background:linear-gradient(#cb83ff,#ff59c5);height:var(--h)}
.now-progress{height:3px;background:#202437;border-radius:99px;margin:10px 0 9px;overflow:hidden}
.now-progress i{display:block;width:48%;height:100%;background:linear-gradient(90deg,#8f55ff,#ff54c2)}
.now-controls{display:flex;align-items:center;justify-content:space-between;color:#e7e6ee;font-size:.78rem}
.now-controls .main{width:26px;height:26px;border-radius:50%;background:#f7f5ff;color:#0b0d15;display:grid;place-items:center;font-size:.7rem}

/* APP SHELL */
.app-shell{min-height:100vh;background:#050813}
.app-sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--sidebar);
  padding:18px 14px 16px;
  border-right:1px solid #131d2d;
  background:linear-gradient(180deg,#070b16 0%,#070a13 100%);
  z-index:40;
  display:flex;flex-direction:column;
}
.app-sidebar .logo{font-size:1rem;padding:0 4px 18px}
.app-sidebar .logo img{width:28px;height:28px}
.side-nav{display:flex;flex-direction:column;gap:4px}
.side-link{
  height:38px;padding:0 10px;border-radius:7px;
  display:flex;align-items:center;gap:10px;
  color:#a9afbd;font-size:.76rem;
  border:1px solid transparent;
}
.side-link:hover{background:#0c1221;color:#fff}
.side-link.active{
  color:#fff;
  background:linear-gradient(90deg,rgba(91,51,196,.36),rgba(91,51,196,.10));
  border-color:rgba(119,83,218,.12);
}
.side-ico{width:19px;color:#d2c1ff;text-align:center}
.side-section-title{font-size:.67rem;color:#d9dbe3;margin:24px 7px 8px;font-weight:700}
.side-profile{
  margin-top:auto;
  padding:7px;
  border-radius:7px;
  border:1px solid #20283b;
  background:#090e1b;
  display:flex;align-items:center;gap:8px;
}
.side-profile img{width:30px;height:30px;border-radius:7px;object-fit:cover}
.side-profile strong{display:block;font-size:.68rem}
.side-profile span{display:block;font-size:.61rem;color:#a56fff;margin-top:2px}
.app-content{margin-left:var(--sidebar);min-height:100vh;padding:0 18px 22px}
.app-top{
  height:56px;
  display:flex;align-items:center;gap:14px;
}
.app-top .search-mini{
  width:34px;height:34px;border-radius:8px;border:1px solid #151f31;background:#070c16;color:#a8adba;display:grid;place-items:center
}
.app-top .search-wide{
  width:min(430px,38vw);height:34px;
  border:1px solid #192438;border-radius:7px;background:#080d18;
  display:flex;align-items:center;padding:0 11px;gap:8px;color:#727b8d
}
.app-top .search-wide input{background:none;border:0;outline:0;color:#fff;width:100%;font-size:.74rem}
.app-top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.app-top-actions img{width:31px;height:31px;border-radius:50%;object-fit:cover}
.top-mini-links{display:flex;gap:18px;font-size:.67rem;color:#9197a6}
.top-mini-links a:hover{color:#fff}

/* DASHBOARD */
.dashboard-wrap{max-width:1240px;margin:0 auto}
.dash-hero{
  position:relative;
  overflow:hidden;
  min-height:210px;
  border:1px solid #232d44;
  border-radius:11px;
  background:#0a0e1b;
}
.dash-hero img{
  position:absolute;inset:0 0 0 auto;
  width:70%;height:100%;object-fit:cover;object-position:52% 43%;
  opacity:.96;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.88) 24%,#000 45%);
}
.dash-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#090e1b 0%,rgba(9,14,27,.96) 27%,rgba(9,14,27,.22) 65%,rgba(9,14,27,.04) 100%)}
.dash-hero-copy{position:relative;z-index:3;padding:46px 20px 18px 26px;max-width:570px}
.dash-hero-copy .eyebrow{font-size:1.05rem;margin-bottom:2px}
.dash-hero-copy h1{font-size:2rem;margin:0 0 3px;letter-spacing:-.04em}
.dash-hero-copy p{font-size:.75rem;color:#adb2bf;margin:0 0 20px}
.dash-hero-actions{display:flex;gap:9px;flex-wrap:wrap}
.dash-hero-actions .btn{height:37px;font-size:.72rem;padding:0 17px}
.dash-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 290px;
  gap:12px;
  margin-top:12px;
}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.metric-card{
  min-height:79px;padding:14px 14px 11px;border-radius:9px;
  border:1px solid #202a3d;background:linear-gradient(145deg,#0b101e,#0a0f1a)
}
.metric-card span{display:block;color:#9196a7;font-size:.66rem}
.metric-card strong{display:block;font-size:1.38rem;margin-top:6px;letter-spacing:-.03em}
.metric-card small{float:right;margin-top:-18px;color:#3ff0b6;font-size:.61rem}
.dash-section-title{font-size:.92rem;margin:16px 0 8px;font-weight:800}
.server-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.server-card{
  min-height:77px;padding:11px;border-radius:9px;border:1px solid #1d283b;background:#0b111e;
  display:flex;align-items:center;gap:9px
}
.server-icon{width:40px;height:40px;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,#6d46ff,#2d5ee9);display:grid;place-items:center;font-weight:900}
.server-icon img{width:100%;height:100%;object-fit:cover}
.server-card strong{display:block;font-size:.7rem}
.server-card span{display:block;color:#8990a0;font-size:.61rem;margin-top:2px}
.server-card .join{display:block;color:#28dda4;font-size:.60rem;margin-top:9px}
.premium-side{
  border-radius:10px;border:1px solid rgba(207,78,255,.48);
  background:
    radial-gradient(circle at 86% 9%,rgba(228,74,255,.18),transparent 35%),
    linear-gradient(155deg,#140e28,#0a0e1a);
  padding:17px 15px;
  min-height:168px;
}
.premium-side .crown{font-size:1.4rem;color:#ee89ff}
.premium-side h3{display:inline;margin-left:8px;font-size:.9rem;color:#ff93de}
.premium-side p{font-size:.69rem;color:#a7abba;margin:4px 0 14px}
.premium-side ul{list-style:none;padding:0;margin:0 0 13px}
.premium-side li{font-size:.68rem;color:#d3d5df;margin:8px 0}
.premium-side li::before{content:"✓";color:#ff55cf;margin-right:7px}
.premium-side .btn{width:100%;height:36px;font-size:.7rem}

/* PREMIUM PUBLIC */
.premium-frame{
  background:
    radial-gradient(circle at 48% 24%,rgba(75,54,188,.12),transparent 32%),
    linear-gradient(180deg,#060914,#070a15 72%,#050713 100%);
}
.premium-frame::before{
  content:"";position:absolute;inset:58px 0 0;
  background:
    linear-gradient(155deg,transparent 0 12%,rgba(50,75,222,.12) 12.5% 13%,transparent 13.5% 100%),
    linear-gradient(25deg,rgba(49,77,218,.14),transparent 23%),
    linear-gradient(335deg,rgba(129,44,201,.12),transparent 22%);
  pointer-events:none;
}
.premium-main{position:relative;z-index:2;padding:13px 14px 26px}
.premium-heading{text-align:center;margin:5px 0 13px}
.premium-heading h1{margin:0;font-size:2rem;letter-spacing:-.04em}
.premium-heading p{margin:5px 0 10px;color:#c2c5d0;font-size:.76rem}
.billing-switch{
  display:inline-flex;padding:3px;border-radius:8px;background:#0a0e1a;border:1px solid #222b40;gap:3px
}
.billing-switch button{height:28px;padding:0 13px;border:0;border-radius:6px;background:transparent;color:#c6c9d4;font-size:.68rem}
.billing-switch button.active{background:#17112f;color:#ff8cdb;border:1px solid rgba(255,91,204,.28)}
.pricing-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;
  max-width:1180px;margin:0 auto;
}
.price-card{
  position:relative;display:flex;flex-direction:column;
  min-height:300px;padding:18px 12px 11px;
  border:1px solid #2a3146;border-radius:8px;
  background:linear-gradient(180deg,#0d1120,#090d17);
}
.price-card.popular{
  border-color:#ff4fba;
  box-shadow:0 0 0 1px rgba(255,79,186,.22),0 12px 36px rgba(255,42,176,.13)
}
.popular-badge{
  position:absolute;left:0;right:0;top:0;height:23px;border-radius:7px 7px 0 0;
  display:grid;place-items:center;
  background:linear-gradient(90deg,#8954ff,#ff46b7);
  font-size:.62rem;font-weight:800
}
.price-card.popular{padding-top:34px}
.price-card h3{margin:0 0 2px;font-size:.95rem}
.price-card .price{font-size:1.55rem;font-weight:900;letter-spacing:-.04em;margin-bottom:2px}
.price-card .save{font-size:.60rem;color:#ff75c9;min-height:17px}
.price-card ul{list-style:none;padding:0;margin:14px 0 11px;flex:1}
.price-card li{font-size:.65rem;color:#c8cbd5;margin:8px 0}
.price-card li::before{content:"✓";margin-right:6px;color:#c89aff}
.price-card .btn{height:34px;font-size:.67rem;width:100%}

/* MUSIC */
.music-page{max-width:1080px;margin:0 auto;padding-bottom:24px}
.page-title{font-size:1.12rem;margin:4px 0 14px}
.music-search-row{display:grid;grid-template-columns:1fr auto;gap:8px}
.music-searchbox{
  height:42px;border:1px solid #263047;background:#0b101d;border-radius:7px;
  display:flex;align-items:center;gap:9px;padding:0 12px;color:#7f8799
}
.music-searchbox input{border:0;outline:0;background:none;color:#fff;flex:1;font-size:.76rem}
.source-tabs{display:flex;gap:7px;margin:10px 0 8px;flex-wrap:wrap}
.source-tab{
  height:30px;padding:0 11px;border-radius:7px;border:1px solid #202a3d;background:#0b101d;color:#c4c7d0;
  font-size:.64rem;display:inline-flex;align-items:center;gap:6px
}
.source-tab.active{background:linear-gradient(90deg,rgba(110,70,236,.40),rgba(110,70,236,.16));border-color:#5e46b8;color:#fff}
.track-list{border-top:1px solid #131e30}
.track-row{
  min-height:58px;display:grid;grid-template-columns:34px 42px minmax(0,1fr) 54px 28px 28px 24px;
  gap:9px;align-items:center;padding:6px 8px;border-bottom:1px solid #101927;
}
.track-row:hover{background:#080d18}
.track-play{width:31px;height:31px;border-radius:7px;border:0;background:#10182a;color:#f5f3ff;display:grid;place-items:center}
.track-row:first-child .track-play{background:linear-gradient(135deg,#8d4cff,#df4bd3)}
.track-thumb{width:42px;height:42px;border-radius:7px;object-fit:cover;background:linear-gradient(135deg,#563dc8,#d14a9d)}
.track-row strong{display:block;font-size:.72rem}
.track-row span{display:block;color:#8d93a3;font-size:.61rem;margin-top:2px}
.track-time{font-size:.65rem;color:#c1c4cf}
.row-icon{font-size:.76rem;color:#bbc0cc;text-align:center}
.playlist-mobile-preview{display:none}

/* SETTINGS */
.settings-page{max-width:1040px;margin:0 auto;padding-bottom:24px}
.guild-banner{
  min-height:58px;border:1px solid #1e293c;background:#0b111f;border-radius:8px;
  display:grid;grid-template-columns:43px 1fr auto;gap:10px;align-items:center;padding:8px 11px
}
.guild-banner img{width:42px;height:42px;border-radius:9px;object-fit:cover}
.guild-banner strong{display:block;font-size:.74rem}
.guild-banner span{display:block;color:#949aab;font-size:.62rem;margin-top:2px}
.guild-banner select{height:32px;min-width:200px;border:1px solid #263146;background:#0b101d;color:#e9e9f1;border-radius:7px;padding:0 8px;font-size:.68rem}
.settings-tabs{display:flex;gap:3px;margin:8px 0 9px}
.settings-tab{
  height:31px;padding:0 14px;border:0;border-radius:7px;background:transparent;color:#b4b8c4;font-size:.68rem
}
.settings-tab.active{background:linear-gradient(90deg,rgba(102,65,219,.50),rgba(102,65,219,.26));color:#fff}
.settings-panel{
  border:1px solid #1d283b;background:#0a101d;border-radius:8px;padding:13px 15px
}
.setting-row{
  min-height:58px;display:grid;grid-template-columns:1fr minmax(170px,300px);gap:18px;align-items:center;border-bottom:1px solid #141e2f
}
.setting-row:last-child{border-bottom:0}
.setting-copy strong{display:block;font-size:.72rem}
.setting-copy p{margin:3px 0 0;color:#8d94a5;font-size:.62rem}
.setting-control select,.setting-control input{
  width:100%;height:34px;border-radius:6px;border:1px solid #273249;background:#0b111e;color:#eef0f4;padding:0 10px;font-size:.68rem
}
.switch{
  justify-self:end;
  width:38px;height:20px;border:0;border-radius:99px;background:#292e3d;position:relative
}
.switch::after{
  content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#e8e7ee;transition:.18s
}
.switch.on{background:linear-gradient(90deg,#7852ff,#ec48bd)}
.switch.on::after{left:20px;background:#fff}
.settings-save{display:flex;justify-content:flex-end;margin-top:10px}

/* mobile */
.bottom-nav{display:none}
.mobile-only{display:none}
@media(min-width:681px) and (max-width:900px){
  .page-frame{width:calc(100vw - 6px);margin:3px auto;min-height:calc(100vh - 6px);border-radius:9px}
  .public-nav{height:49px;padding:0 16px}
  .logo{font-size:1rem;gap:7px}
  .logo img{width:25px;height:25px;border-radius:8px}
  .public-links{gap:20px;font-size:.61rem}
  .public-links a{padding:16px 0 13px}
  .public-actions{gap:7px}
  .public-actions .btn{height:30px;padding:0 13px;font-size:.61rem;border-radius:7px}
  .home-main{grid-template-columns:43% 57%;min-height:calc(100vh - 55px)}
  .home-copy{padding:39px 0 26px 43px;max-width:none}
  .home-copy h1{font-size:3.05rem;line-height:.92;margin-bottom:2px}
  .home-copy h2{font-size:1.52rem;line-height:1.1;margin:6px 0 8px;white-space:nowrap}
  .home-copy p{font-size:.76rem;line-height:1.52;max-width:325px}
  .home-actions{gap:12px;margin-top:20px}
  .home-actions .btn{height:40px;min-width:145px;padding:0 15px;font-size:.67rem;border-radius:8px}
  .home-stats{margin-top:26px;width:355px;gap:17px;grid-template-columns:repeat(4,1fr)}
  .home-stat strong{font-size:1.18rem}
  .home-stat span{font-size:.52rem;margin-top:2px;white-space:nowrap}
  .home-art{min-height:365px}
  .home-art img.hero-character{object-position:51% 44%}
  .handwritten{right:5%;bottom:31%;font-size:1.34rem}
  .now-card{right:3.3%;bottom:11px;width:292px;min-width:292px;padding:9px 11px 8px;border-radius:10px}
  .now-top{grid-template-columns:44px 1fr auto;gap:8px}
  .now-cover{width:44px;height:44px;border-radius:6px}
  .now-meta small{font-size:.50rem;margin-bottom:2px}
  .now-meta strong{font-size:.68rem}
  .now-meta span{font-size:.54rem;margin-top:2px}
  .wave{height:22px;gap:1px}
  .wave i{width:1.5px}
  .now-progress{height:2px;margin:7px 0 7px}
  .now-controls{font-size:.63rem}
  .now-controls .main{width:22px;height:22px;font-size:.58rem}
}

@media(max-width:950px){
  :root{--sidebar:74px}
  .app-sidebar{padding:15px 9px}
  .app-sidebar .logo span,.side-link .label,.side-profile div,.side-section-title{display:none}
  .app-sidebar .logo{justify-content:center}
  .side-link{justify-content:center;padding:0}.side-ico{width:auto;font-size:1rem}
  .app-content{padding-left:12px;padding-right:12px}
  .dash-grid{grid-template-columns:1fr}
  .premium-side{min-height:auto}
  .pricing-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:680px){
  .page-frame{width:100%;margin:0;border:0;border-radius:0;min-height:100dvh}
  .public-nav{height:54px;padding:0 14px}
  .public-links{display:none}
  .public-actions .btn:first-child{display:none}
  .public-actions .btn{height:32px;padding:0 12px}
  .logo{font-size:1.05rem}.logo img{width:28px;height:28px}
  .home-main{display:block;min-height:calc(100dvh - 54px)}
  .home-copy{padding:56px 18px 0;max-width:none;position:relative;z-index:8}
  .home-copy h1{font-size:2.3rem;margin-bottom:8px}
  .home-copy h2{font-size:1.55rem;line-height:1.08;max-width:300px}
  .home-copy p{font-size:.82rem;max-width:320px}
  .home-actions{margin-top:20px;gap:9px}
  .home-actions .btn{height:39px;min-width:0;padding:0 17px;font-size:.72rem}
  .home-stats{display:none}
  .home-art{position:absolute;left:0;right:0;bottom:0;height:48%;min-height:340px}
  .home-art img.hero-character{object-position:57% 45%;mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 100%)}
  .home-art::after{background:linear-gradient(180deg,#050713 0%,rgba(5,7,19,.30) 24%,transparent 50%,rgba(5,7,19,.20) 100%)}
  .handwritten,.now-card{display:none}

  .app-sidebar{display:none}
  .app-content{margin-left:0;padding:0 11px 80px}
  .app-top{height:52px}
  .top-mini-links,.app-top .search-wide{display:none}
  .dashboard-wrap,.music-page,.settings-page{width:100%;max-width:none}
  .dash-hero{min-height:265px}
  .dash-hero img{width:100%;height:100%;object-position:57% 43%;mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 100%)}
  .dash-hero::after{background:linear-gradient(180deg,rgba(7,11,23,.18),rgba(7,11,23,.12) 42%,rgba(7,11,23,.94) 78%,#070b17)}
  .dash-hero-copy{padding:152px 15px 12px;max-width:none}
  .dash-hero-copy .eyebrow{font-size:.78rem}
  .dash-hero-copy h1{font-size:1.38rem}
  .dash-hero-copy p{font-size:.64rem}
  .dash-hero-actions{display:grid;grid-template-columns:1fr 1fr}
  .dash-hero-actions .btn{padding:0 8px}
  .metric-grid{grid-template-columns:1fr 1fr}
  .server-grid{grid-template-columns:1fr}
  .dash-grid{display:block}.premium-side{margin-top:11px}

  .premium-main{padding:12px 12px 78px}
  .premium-heading h1{font-size:1.45rem}
  .pricing-grid{grid-template-columns:1fr}
  .price-card{min-height:auto;padding:15px 14px}
  .price-card ul{margin:10px 0}
  .price-card.popular{padding-top:32px}

  .music-page{padding-bottom:86px}
  .track-row{grid-template-columns:32px 42px 1fr 42px 26px;gap:7px}
  .track-row .row-icon:nth-last-child(-n+2){display:none}
  .track-row{min-height:60px}
  .playlist-mobile-preview{
    display:block;margin-top:12px;border:1px solid #1d283b;border-radius:10px;background:#0a101d;padding:10px
  }
  .playlist-mobile-preview h3{font-size:.83rem;margin:0 0 8px}
  .playlist-mobile-item{display:flex;align-items:center;gap:10px;padding:9px 3px;border-bottom:1px solid #141e2f}
  .playlist-mobile-item:last-child{border-bottom:0}
  .playlist-mobile-item .server-icon{width:38px;height:38px}
  .playlist-mobile-item strong{font-size:.69rem}.playlist-mobile-item span{font-size:.60rem;color:#8c93a3;display:block}

  .guild-banner{grid-template-columns:42px 1fr}
  .guild-banner select{grid-column:1/-1;width:100%}
  .setting-row{grid-template-columns:1fr auto;gap:8px;min-height:62px}
  .setting-control select,.setting-control input{min-width:160px}
  .settings-tabs{overflow:auto}

  .bottom-nav{
    position:fixed;left:8px;right:8px;bottom:8px;z-index:80;
    height:58px;border:1px solid #27334b;border-radius:15px;
    background:rgba(8,12,22,.95);backdrop-filter:blur(16px);
    display:grid;grid-template-columns:repeat(5,1fr);
    box-shadow:0 16px 46px rgba(0,0,0,.50)
  }
  .bottom-nav a{display:grid;place-items:center;color:#888fa0;font-size:.62rem}
  .bottom-nav a.active{color:#ceacff}
  .bottom-nav span{font-size:.95rem}
  .mobile-only{display:block}
}
.toast{
  position:fixed;right:16px;bottom:16px;z-index:200;
  background:#0d1423;border:1px solid #38415a;color:#fff;
  padding:10px 13px;border-radius:9px;font-size:.73rem;opacity:0;transform:translateY(10px);transition:.2s
}
.toast.show{opacity:1;transform:none}
.mobile-player-card,.premium-active-mobile{display:none}
@media(max-width:680px){
  .mobile-player-card{
    display:block;
    margin:2px 0 11px;
    border:1px solid #29344b;
    border-radius:12px;
    background:linear-gradient(180deg,#0b1120,#080d18);
    padding:10px;
  }
  .mobile-player-head{display:flex;align-items:center;gap:8px;margin-bottom:9px}
  .mobile-player-head img{width:28px;height:28px;border-radius:7px;object-fit:cover}
  .mobile-player-head strong{font-size:.67rem}.mobile-player-head span{font-size:.58rem;color:#8e95a4;display:block}
  .mobile-player-art{position:relative;height:250px;border-radius:10px;overflow:hidden;background:#0c1020}
  .mobile-player-art>img{width:100%;height:100%;object-fit:cover;object-position:55% 40%}
  .mobile-player-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(6,8,17,.92))}
  .mobile-player-info{position:absolute;left:12px;right:12px;bottom:11px;z-index:2}
  .mobile-player-info small{font-size:.58rem;color:#aaaebe}.mobile-player-info strong{display:block;font-size:.9rem;margin-top:2px}
  .mobile-player-progress{height:3px;background:#252b3b;border-radius:99px;margin:9px 0}.mobile-player-progress i{display:block;width:47%;height:100%;background:linear-gradient(90deg,#7e55ff,#f14dc1)}
  .mobile-player-controls{display:flex;justify-content:space-around;align-items:center;font-size:.78rem}.mobile-player-controls .play{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#090b17;border:2px solid #c7a7ff;color:#fff;font-size:1rem}
  body[data-page="music"] .music-search-row,body[data-page="music"] .source-tabs,body[data-page="music"] #music-results{display:none}
  .premium-active-mobile{
    display:block;
    margin:8px auto 0;
    max-width:370px;
    border:1px solid #2b3550;
    border-radius:12px;
    background:linear-gradient(180deg,#0b1222,#080d18);
    padding:15px;
  }
  .premium-active-mobile .active-badge{display:flex;align-items:center;gap:8px;color:#fff;font-weight:800;font-size:.9rem}
  .premium-active-mobile .active-icon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#2fd6b0,#24bc9b)}
  .premium-active-mobile .expiry{font-size:.61rem;color:#959bac;margin:5px 0 13px}
  .premium-active-mobile ul{list-style:none;padding:0;margin:0 0 14px}.premium-active-mobile li{font-size:.68rem;color:#d0d3dc;margin:9px 0}.premium-active-mobile li::before{content:"✓";color:#29e0a9;margin-right:7px}
  .premium-active-mobile .btn{width:100%}
  body[data-page="premium"] .premium-heading{margin-top:2px}
  body[data-page="premium"] .premium-heading p,body[data-page="premium"] .billing-switch,body[data-page="premium"] .pricing-grid{display:none}
}

/* ==========================================================================
   HOME LOCK — pixel-positioned against the approved 743×420 reference
   ========================================================================== */
body.home-lock{
  margin:0;
  min-height:100dvh;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#02040b;
}
.home-shot{
  width:min(100vw,calc(100dvh * 1.769047619));
  aspect-ratio:743/420;
  position:relative;
  overflow:hidden;
  container-type:inline-size;
  border:1px solid rgba(119,139,183,.56);
  border-radius:1.05cqw;
  background:#050714;
  box-shadow:0 0 0 1px rgba(29,40,68,.22),0 28px 80px rgba(0,0,0,.52);
}
.home-shot-art{
  position:absolute;
  inset:0;
  background-image:url("../assets/rlaj.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  filter:saturate(1.12) contrast(1.07) brightness(.91);
  transform:scale(1.012);
}
.home-shot-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(4,7,19,.98) 0%,rgba(4,7,19,.92) 29%,rgba(5,7,20,.54) 46%,rgba(5,7,20,.05) 67%,rgba(5,7,20,.08) 100%),
    linear-gradient(180deg,rgba(4,6,17,.46) 0%,transparent 20%,transparent 70%,rgba(4,6,18,.40) 100%),
    radial-gradient(circle at 19% 27%,rgba(71,69,219,.12),transparent 28%),
    radial-gradient(circle at 72% 28%,rgba(179,60,241,.13),transparent 23%);
}
.home-shot-lines{
  position:absolute;inset:0;
  opacity:.52;
  background:
    linear-gradient(131deg,transparent 0 10%,rgba(31,82,255,.20) 10.3% 10.45%,transparent 10.8% 100%),
    linear-gradient(137deg,transparent 0 61%,rgba(143,44,255,.16) 61.15% 61.35%,transparent 61.6% 100%),
    linear-gradient(24deg,transparent 0 13%,rgba(23,76,255,.18) 13.2% 13.5%,transparent 13.8% 100%);
  pointer-events:none;
}
.shot-nav{
  position:absolute;
  left:2.55%;right:2.55%;top:2.6%;
  height:8.9%;
  z-index:20;
  display:flex;align-items:center;
}
.shot-logo{
  display:flex;align-items:center;gap:.82cqw;
  color:#fff;
}
.shot-logo img{
  width:3.25cqw;height:3.25cqw;border-radius:50%;
  object-fit:cover;
  filter:drop-shadow(0 0 .9cqw rgba(221,75,255,.64));
}
.shot-logo strong{
  font-size:2.02cqw;
  font-weight:850;
  letter-spacing:-.04em;
}
.shot-links{
  position:absolute;
  left:23.3%;top:0;
  height:100%;
  display:flex;align-items:center;gap:2.55cqw;
}
.shot-links a{
  height:100%;
  display:flex;align-items:center;
  color:#d3d3dd;
  font-size:.92cqw;
  font-weight:550;
  border-bottom:.14cqw solid transparent;
  transition:.15s ease;
}
.shot-links a:hover,.shot-links a.active{
  color:#fff;
  border-bottom-color:rgba(167,76,255,.62);
}
.shot-nav-actions{
  margin-left:auto;
  display:flex;align-items:center;gap:.88cqw;
}
.shot-nav-btn{
  min-width:9.55cqw;
  height:4.18cqw;
  padding:0 1.35cqw;
  border-radius:.72cqw;
  display:flex;align-items:center;justify-content:center;
  font-size:.94cqw;
  font-weight:750;
  color:#fff;
}
.shot-nav-btn.login{
  border:.12cqw solid rgba(116,84,211,.74);
  background:rgba(6,8,20,.52);
}
.shot-nav-btn.start{
  border:.12cqw solid rgba(182,118,255,.58);
  background:linear-gradient(135deg,#7951ff 0%,#a76bff 100%);
  box-shadow:0 .6cqw 1.7cqw rgba(115,57,255,.30),inset 0 .08cqw 0 rgba(255,255,255,.24);
}
.shot-copy{
  position:absolute;
  z-index:15;
  left:6.1%;
  top:22.2%;
  width:47%;
}
.shot-copy h1{
  margin:0;
  font-size:6.35cqw;
  line-height:.86;
  font-weight:900;
  letter-spacing:-.062em;
  color:#f7f5ff;
  text-shadow:0 0 2.15cqw rgba(185,122,255,.36);
}
.shot-copy h2{
  margin:1.04cqw 0 .78cqw;
  font-size:3.14cqw;
  line-height:1.04;
  letter-spacing:-.045em;
  font-weight:900;
  white-space:nowrap;
}
.shot-copy h2 span{
  background:linear-gradient(90deg,#f5f3ff 0%,#e6b2ff 35%,#ef79e8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.shot-copy p{
  margin:0;
  color:#d2d0dd;
  font-size:1.44cqw;
  line-height:1.53;
  font-weight:450;
}
.shot-cta{
  margin-top:2.36cqw;
  display:flex;gap:1.55cqw;
}
.shot-main-btn{
  height:5.28cqw;
  min-width:15.62cqw;
  padding:0 2.15cqw;
  border-radius:.84cqw;
  display:flex;align-items:center;justify-content:center;gap:1.15cqw;
  font-size:1.18cqw;
  font-weight:800;
  color:#fff;
}
.shot-main-btn.primary{
  background:linear-gradient(135deg,#a013ff 0%,#7c47ff 58%,#9e5cff 100%);
  border:.12cqw solid rgba(179,98,255,.60);
  box-shadow:0 .65cqw 2.2cqw rgba(122,39,255,.36),inset 0 .08cqw 0 rgba(255,255,255,.24);
}
.shot-main-btn.primary b{
  font-size:1.75cqw;
  font-weight:500;
}
.shot-main-btn.secondary{
  min-width:14.05cqw;
  border:.12cqw solid rgba(114,94,197,.65);
  background:rgba(8,10,22,.58);
  backdrop-filter:blur(.7cqw);
}
.circle-icon{font-size:1.48cqw}
.shot-stats{
  position:absolute;
  left:6.25%;
  bottom:19.2%;
  width:45.7%;
  z-index:15;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2.05cqw;
}
.shot-stats>div{min-width:0}
.shot-stats strong{
  display:block;
  color:#fff;
  font-size:2.18cqw;
  font-weight:850;
  letter-spacing:-.03em;
  line-height:1;
}
.shot-stats span{
  display:block;
  margin-top:.72cqw;
  color:#aeb1bf;
  font-size:.79cqw;
  white-space:nowrap;
}
.shot-handwriting{
  position:absolute;
  z-index:13;
  right:5.05%;
  top:50.1%;
  color:#ff74dd;
  font-size:2.15cqw;
  line-height:.96;
  font-weight:500;
  font-style:italic;
  transform:rotate(-6deg);
  text-shadow:0 0 1.35cqw rgba(255,76,208,.52);
  text-align:center;
}
.shot-player{
  position:absolute;
  z-index:18;
  left:56.35%;
  bottom:3.15%;
  width:39.5%;
  height:27.15%;
  padding:1.35cqw 1.43cqw 1.05cqw;
  border:.11cqw solid rgba(145,107,236,.74);
  border-radius:1.08cqw;
  background:linear-gradient(145deg,rgba(9,12,27,.90),rgba(7,9,22,.82));
  backdrop-filter:blur(1.35cqw);
  box-shadow:0 1.45cqw 4cqw rgba(0,0,0,.42),inset 0 .08cqw 0 rgba(255,255,255,.04);
}
.shot-player-top{
  height:45%;
  display:grid;
  grid-template-columns:5.42cqw 1fr 10.1cqw .8cqw;
  align-items:center;
  gap:.86cqw;
}
.shot-cover{
  width:5.42cqw;height:5.42cqw;border-radius:.56cqw;object-fit:cover;
}
.shot-song small{
  display:block;color:#9d9cac;font-size:.64cqw;margin-bottom:.26cqw;
}
.shot-song strong{
  display:block;color:#fff;font-size:1.06cqw;line-height:1.05;
}
.shot-song span{
  display:block;color:#c0c0ce;font-size:.72cqw;margin-top:.32cqw;
}
.shot-wave{
  height:4.45cqw;
  display:flex;align-items:end;justify-content:flex-end;gap:.13cqw;
  opacity:.92;
}
.shot-wave i{
  display:block;
  width:.13cqw;
  min-width:1px;
  height:var(--h);
  border-radius:1px;
  background:linear-gradient(180deg,#dc81ff 0%,#f24fc5 100%);
  box-shadow:0 0 .38cqw rgba(221,91,255,.28);
}
.shot-pop{
  align-self:start;
  justify-self:end;
  color:#dcdde7;
  font-size:1.04cqw;
}
.shot-progress{
  height:.31cqw;
  min-height:2px;
  margin:.96cqw 0 .86cqw;
  border-radius:99px;
  background:#2b2f48;
  overflow:hidden;
}
.shot-progress i{
  display:block;width:44%;height:100%;
  background:linear-gradient(90deg,#ec60da,#9d5cff);
}
.shot-controls{
  display:flex;align-items:center;justify-content:space-between;
  height:3.15cqw;
}
.shot-controls button{
  border:0;background:transparent;color:#f1f1f6;
  font-size:1.24cqw;
  line-height:1;
  padding:0;
}
.shot-controls .pause{
  width:2.85cqw;height:2.85cqw;border-radius:50%;
  display:grid;place-items:center;
  background:#f6f4ff;color:#0a0c15;
  font-size:.95cqw;font-weight:900;
}
@media(max-width:680px){
  body.home-lock{overflow:auto;place-items:start center}
  .home-shot{
    width:100vw;
    height:100dvh;
    aspect-ratio:auto;
    border:0;border-radius:0;
  }
  .home-shot-art{background-position:58% center;background-size:auto 100%}
  .home-shot-shade{
    background:
      linear-gradient(180deg,rgba(4,6,17,.80) 0%,rgba(4,6,17,.68) 39%,rgba(4,6,17,.18) 62%,rgba(4,6,17,.26) 100%),
      linear-gradient(90deg,rgba(4,6,17,.82),transparent 80%);
  }
  .shot-links{display:none}
  .shot-nav{left:4%;right:4%;top:2%;height:7%}
  .shot-logo img{width:8.5cqw;height:8.5cqw}
  .shot-logo strong{font-size:5.8cqw}
  .shot-nav-btn{height:9cqw;min-width:22cqw;font-size:3.1cqw;border-radius:2.2cqw}
  .shot-nav-btn.login{display:none}
  .shot-copy{left:6%;top:17%;width:88%}
  .shot-copy h1{font-size:12.7cqw}
  .shot-copy h2{font-size:7.3cqw;white-space:normal;max-width:85%}
  .shot-copy p{font-size:4cqw;line-height:1.5;max-width:82%}
  .shot-copy p br{display:none}
  .shot-cta{margin-top:5.7cqw;gap:2.5cqw}
  .shot-main-btn{height:12cqw;font-size:3.5cqw;border-radius:2.3cqw;padding:0 5cqw;min-width:0}
  .shot-main-btn.secondary{min-width:0}
  .shot-stats,.shot-handwriting,.shot-player{display:none}
}