/* Luna-chan Shared UI · public site-aligned crimson/rose visual system
   Used by both /dashboard and /manage. Extends existing layouts without
   changing application logic or route behavior. */
:root{
  color-scheme:dark;
  --bg:#08090e;
  --surface:#12131c;
  --surface2:#191a26;
  --line:#292331;
  --text:#f9f3f6;
  --muted:#a69ba7;
  --light:#c9bec9;
  --purple:#e778ad;
  --pink:#ff8c9d;
  --red:#f44764;
  --mint:#58d9a2;
  --accent:#f44764;
  --accent-2:#b168ea;
  --accent-gradient:linear-gradient(115deg,#ff5774 0%,#ff8c9d 48%,#c68cff 100%);
  --soft-border:rgba(255,255,255,.085);
  font-family:'Kanit',system-ui,-apple-system,sans-serif
}
html{scroll-padding-top:94px}
[hidden]{display:none!important}
body{
  color:var(--text);
  line-height:1.65;
  background:
    radial-gradient(ellipse 780px 470px at 55% -170px,rgba(193,44,83,.16),transparent 76%),
    radial-gradient(ellipse 600px 700px at 110% 44%,rgba(109,42,143,.064),transparent 75%),
    var(--bg);
  -webkit-font-smoothing:antialiased
}
button,input,select{font-family:inherit}
button,a,select,input{transition:background-color .18s,border-color .18s,color .18s,box-shadow .18s}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-color:#ff7994}
::selection{background:rgba(244,71,100,.32);color:#fff}
.ui-icon{display:inline-block;width:19px;height:19px;flex:0 0 auto;fill:none;stroke:currentColor;vertical-align:middle}
.ui-icon use{pointer-events:none}
.sidebar{
  background:linear-gradient(164deg,#17131b 0%,#111019 41%,#0d0e14 100%);
  border-right:1px solid var(--soft-border);
  padding:30px 18px 19px
}
.brand{padding:2px 10px 43px;gap:12px}
.brand-icon{background:linear-gradient(140deg,#3b2636,#19131d);border:1px solid rgba(244,71,100,.28);border-radius:15px;box-shadow:0 8px 24px rgba(157,38,74,.12)}
.brand-icon img{object-fit:cover;padding:4px;border-radius:14px}
.brand-text>span{color:var(--red)}
.brand-text small{color:#a79ca8;letter-spacing:1.7px;font-size:9px}
.group-title{color:#877787;font-size:10px;letter-spacing:1.9px}
.side-nav{gap:5px}
.side-nav a{
  color:#b7a9b9;
  font-weight:400;
  border:1px solid transparent;
  border-radius:11px;
  min-height:45px;
  gap:12px
}
.side-nav a:hover{background:rgba(255,255,255,.042);color:#fff}
.side-nav a.active{
  border-color:rgba(255,126,159,.22);
  background:linear-gradient(95deg,rgba(244,71,100,.18),rgba(177,104,234,.075));
  color:#fff;
  box-shadow:inset 3px 0 0 var(--red)
}
.nav-icon{
  display:inline-grid;place-items:center;min-width:22px;height:24px;
  color:#d18fab;font:inherit
}
.nav-icon .ui-icon{width:19px;height:19px}
.side-nav a.active .nav-icon{color:#ff8ca8}
.arrow{display:inline-grid;place-items:center;color:#947f96}
.arrow .ui-icon{width:15px;height:15px}
.nav-count{background:rgba(244,71,100,.14);color:#ffd0df;border:1px solid rgba(244,71,100,.18)}
.side-footer{
  background:rgba(255,255,255,.025);
  border:1px solid var(--soft-border);
  border-radius:13px;
  padding:14px 13px
}
.side-footer-dot{background:#55d8a1;box-shadow:0 0 0 4px rgba(85,216,161,.075)}
.shell{min-width:0}
.topbar{
  height:77px;
  border-color:var(--soft-border);
  background:rgba(8,9,14,.88);
  box-shadow:0 8px 18px rgba(0,0,0,.1);
  -webkit-backdrop-filter:blur(24px);
  backdrop-filter:blur(24px)
}
.crumb span{color:#92828f}
.crumb b{color:#655a6b}
.crumb strong{color:#fff;font-weight:500}
.top-actions{gap:10px}
.refresh,.invite,.login-link,.save-btn,.control,.signout{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  line-height:1.3
}
.refresh{
  background:rgba(255,255,255,.025);
  border:1px solid #493943;
  border-radius:10px;
  color:#f2e8ed;
  padding:10px 14px
}
.refresh:hover{background:#28212c;border-color:#7e495e}
.refresh .ui-icon,.invite .ui-icon,.control .ui-icon,.save-btn .ui-icon{width:16px;height:16px}
.invite,.save-btn,.login-link{
  background:linear-gradient(115deg,#c62c4b 0%,#a42156 65%,#873e9e 100%);
  border:1px solid rgba(252,147,171,.18);
  color:#fff;
  font-weight:600;
  box-shadow:0 9px 24px rgba(192,42,71,.16)
}
.invite:hover,.save-btn:hover,.login-link:hover{
  background:linear-gradient(115deg,#dd3558 0%,#b72b66 65%,#994ab1 100%);
  box-shadow:0 12px 26px rgba(192,42,71,.22)
}
.invite{border-radius:10px}
.menu-btn .ui-icon{width:19px;height:19px}
main{width:min(1335px,100%);padding:43px 38px 32px}
.intro{margin-bottom:30px}
.eyebrow,.overline{color:#ff95ad;letter-spacing:1.65px}
.eyebrow-line{background:#f45c7b}
.version{color:#7de2b5;border-color:#3b6251}
.intro h1{font-size:clamp(30px,3vw,43px);font-weight:700;letter-spacing:-.7px}
.intro h1 span{
  color:transparent;
  background:var(--accent-gradient);
  -webkit-background-clip:text;background-clip:text
}
.intro p,.command-title p{color:#a99eae;line-height:1.75}
.connection-pill{
  border-color:#375747;
  background:rgba(34,139,99,.075);
  color:#a2e4c5;
  border-radius:100px
}
.pulse{background:#52dba4;box-shadow:0 0 0 4px rgba(82,219,164,.08)}
.connection-pill.offline{border-color:#70404c;background:rgba(217,63,97,.085);color:#ffb2bd}
.metrics{gap:16px}
.metric{
  background:linear-gradient(155deg,rgba(30,26,36,.98),rgba(18,19,28,.99));
  border:1px solid rgba(250,143,167,.11);
  border-radius:19px;
  padding:22px 22px 23px;
  box-shadow:0 12px 30px rgba(0,0,0,.09);
  transition:transform .2s,border-color .2s
}
.metric:hover{transform:translateY(-2px);border-color:rgba(255,117,152,.34)}
.metric::after{
  background:linear-gradient(90deg,transparent,rgba(251,104,140,.26),transparent)
}
.metric-label{color:#c8b8c6}
.metric-label .glyph{
  display:grid;place-items:center;
  background:rgba(244,71,100,.115);
  color:#ff8ea7;
  width:39px;height:39px;border-radius:12px;margin-right:1px
}
.metric-label .glyph .ui-icon{width:21px;height:21px}
.metric strong{font-size:clamp(30px,3vw,39px);color:#fff;margin-top:14px}
.metric-mark{color:#715964}
.main-grid{gap:18px}
.panel,.form-shell{
  background:linear-gradient(155deg,#191821,#12131c 85%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:19px;
  box-shadow:0 16px 40px rgba(0,0,0,.095)
}
.panel{padding:24px}
.panel h2,.command-section h2{font-weight:600}
.panel-heading{margin-bottom:22px}
.section-icon{
  display:grid;place-items:center;
  border:1px solid rgba(244,71,100,.13);
  background:rgba(244,71,100,.1);
  border-radius:12px;
  width:41px;height:41px;
  color:#f78ea9
}
.section-icon .ui-icon{width:21px;height:21px}
.health-row,.detail-row,.bot-profile{border-color:var(--soft-border)}
.health-row{min-height:76px}
.service-icon{border-radius:12px}
.service-icon.discord{background:rgba(88,101,242,.15);color:#9ca7ff}
.service-icon.music{background:rgba(244,71,100,.12);color:#f68ba2}
.service-icon.api{background:rgba(87,204,155,.12);color:#80dfb8}
.service-icon .ui-icon{width:22px;height:22px}
.service-name strong{color:#f7f0f6}
.service-name span{color:#a499a6}
.service-state{border-color:#325543;background:rgba(45,137,96,.115);color:#a4e8ca}
.service-state.down{border-color:#7a424d;background:rgba(190,56,85,.12);color:#ffb2c1}
.service-state.pending{border-color:#574b5a;background:#25212e;color:#c6b6c4}
.panel-bottom{border-color:var(--soft-border)}
.bot-profile img{background:linear-gradient(135deg,#4a2844,#1f1622)}
.bot-online{background:rgba(71,196,135,.11);color:#8de1b1}
.info-banner{
  background:rgba(177,104,234,.055);
  border:1px solid rgba(177,104,234,.2);
  border-radius:11px
}
.info-banner .ui-icon{width:19px;height:19px;color:#d0a4e8}
.info-banner p{color:#c0aebe}
.command-title h2{font-weight:650}
.total{background:rgba(244,71,100,.12);border:1px solid rgba(244,71,100,.18);color:#ffbed1}
.text-link{color:#ff9daf;display:inline-flex;gap:5px;align-items:center}
.text-link .ui-icon{width:15px;height:15px}
.search>span{display:inline-grid;place-items:center}
.search>.ui-icon{position:absolute;left:15px;top:12px;width:19px;height:19px;color:#be91a5}
.search input,.filters select{
  border-color:#40313e;background:#15151e;color:#fff
}
.search input:focus,.filters select:focus{border-color:#f47794}
.command-card{
  background:linear-gradient(155deg,#1b1924,#14151e);
  border-color:rgba(255,255,255,.08);
  border-radius:14px;
  padding:17px 17px 16px;
  transition:transform .18s,border-color .18s
}
.command-card:hover{transform:translateY(-2px);border-color:rgba(255,137,163,.33);background:#201a26}
.command-card h3{color:#ffb9ce;font-size:13px}
.command-card p{color:#b9aeba;font-size:12px}
.category-tag{border-color:#573948;background:rgba(244,71,100,.11);color:#edb0c6}
.command-bottom{color:#9f93a3}
.page-foot{border-color:var(--soft-border);line-height:1.65;color:#968896}

/* Server picker: never allow long Discord names or IDs to escape cards. */
.guild-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,275px),1fr));gap:14px;align-items:stretch}
.guild-option{min-width:0;width:100%;max-width:100%;overflow:hidden;align-items:center;min-height:76px;padding:14px 16px;gap:12px}
.guild-option>img{width:45px;height:45px;flex:0 0 45px;object-fit:cover}
.guild-option>div{min-width:0;flex:1 1 0;max-width:100%;overflow:hidden}
.guild-option strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;white-space:normal;overflow-wrap:anywhere;word-break:break-word;line-height:1.4;font-size:13px;max-width:100%}
.guild-option small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.65;font:10px 'Outfit','Kanit',sans-serif;letter-spacing:.08px}
.guild-top{min-width:0;flex-wrap:wrap;gap:10px}
.guild-top>div{min-width:0;flex:1 1 220px}
.server-title,.selected-guild,.selected-guild>div,.setting-field,.service-name,.bot-profile>div{min-width:0}
.selected-guild>div{flex:1 1 0;overflow:hidden}
.selected-guild h2{overflow-wrap:anywhere;word-break:break-word;line-height:1.3}
.selected-guild span{overflow-wrap:anywhere}
.whitelist-item{min-width:0;gap:10px}
.whitelist-item strong{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.queue-item strong{overflow-wrap:anywhere;word-break:break-word}
@media(max-width:600px){.guild-grid{grid-template-columns:minmax(0,1fr)}.guild-option{min-height:73px}.selected-guild{gap:12px}.selected-guild h2{font-size:19px}}

/* Per-server manager — coordinated with the dashboard and site. */
.auth-view{background:linear-gradient(140deg,#211921,#13131e);border-color:rgba(255,109,148,.22);box-shadow:0 22px 68px #0002}
.auth-mark{
  display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(244,71,100,.17),rgba(177,104,234,.11));
  border:1px solid rgba(244,71,100,.28);
  color:#ff9db8
}
.auth-mark .ui-icon{width:36px;height:36px}
.auth-view h2{color:#fff}
.auth-view p{color:#afa0b0}
.auth-note{color:#9f8fa1}
.sidebar-account{background:#17141d;border:1px solid #332431;border-radius:10px;padding:12px}
.signout{border-color:#6e465b;color:#f8b5c8}
.signout .ui-icon{width:15px;height:15px}
.notice{border-color:#754455;background:rgba(190,53,85,.14);color:#ffc3d3}
.notice.ok{border-color:#3f6f56;background:rgba(45,137,96,.13);color:#a8ebc8}
.guild-option{
  background:linear-gradient(150deg,#1b1822,#14151d);
  border-color:rgba(255,255,255,.085);
  border-radius:14px
}
.guild-option:hover,.guild-option.active{
  background:linear-gradient(100deg,rgba(244,71,100,.14),rgba(177,104,234,.065));
  border-color:rgba(244,71,100,.48)
}
.guild-option img{background:#2c1e2e}
.server-title{background:linear-gradient(90deg,#231a25,#16151f);border-color:rgba(244,71,100,.23);border-radius:16px}
.selected-guild h2{color:#fff}
.tab-nav{border-color:#43303c;gap:4px}
.tab-nav button{border-bottom-width:2px;color:#aa9ea9;padding:12px 19px;border-radius:7px 7px 0 0}
.tab-nav button.active{border-bottom-color:#f44764;color:#ffc3d2;background:linear-gradient(0deg,rgba(244,71,100,.075),transparent)}
.tab-nav button:hover{color:#fff;background:rgba(255,255,255,.03)}
.form-shell{background:linear-gradient(165deg,#191720,#11131c);border-color:rgba(255,255,255,.09)}
.setting-field{
  background:rgba(255,255,255,.021);
  border:1px solid rgba(255,255,255,.085);
  border-radius:12px
}
.setting-field:hover{border-color:rgba(255,139,160,.2)}
.setting-label{color:#f4e8ee}
.setting-field small{color:#958795}
.setting-field input:not([type=checkbox]),.setting-field select,
.playform input,.playform select,.whitelist-form input,.whitelist-form select{
  background:#100f17;border:1px solid #463443;color:#f7eef4
}
.setting-field input:focus,.setting-field select:focus{border-color:#f47794}
.switchfield input{background:#54434d;border:1px solid rgba(255,255,255,.08)}
.switchfield input:checked{background:linear-gradient(90deg,#ce3355,#db6282)}
.submit-row{border-color:var(--soft-border)}
.control{border-color:#674050;background:#2b1f2e;color:#f6dfe8}
.control:hover{background:#482739;border-color:#96516d}
.control.danger{background:#391d29;border-color:#86425c;color:#ffb8c6}
.now-playing{
  border-color:rgba(244,71,100,.26);
  background:linear-gradient(112deg,rgba(128,30,60,.29),rgba(37,22,44,.55))
}
.album{background:linear-gradient(150deg,#993149,#5a2b60);color:#fff;border:1px solid #b9587d}
.album .ui-icon{width:37px;height:37px}
.queue-header{color:#f0adc1}
.queue-item span{color:#e88caa}
.queue-item{border-color:var(--soft-border)}
.whitelist-item{border-color:var(--soft-border)}
.whitelist-item small{color:#f18ba7}
.preset-row{border-color:rgba(244,71,100,.25);background:rgba(244,71,100,.065)}
.preset-row label{color:#fad9e3}
.preset-row select{border-color:#844559;color:#f9e3ed;background:#16111b}
.login-link{border-radius:11px}
@media(max-width:1180px){
  main{padding-left:29px;padding-right:29px}
  .metric strong{font-size:34px}
}
@media(max-width:850px){
  .topbar{height:70px}
  .sidebar{box-shadow:10px 0 50px rgba(0,0,0,.44)}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center}
}
@media(max-width:600px){
  main{padding:28px 17px 24px}
  .metric{padding:16px 14px 18px}
  .metric-label{display:flex;align-items:flex-start;flex-direction:column;gap:8px}
  .metric strong{font-size:31px}
  .panel{padding:20px 18px}
  .topbar{height:66px}
  .intro{margin-bottom:22px}
  .intro h1{font-size:30px}
  .auth-view{margin:30px auto;padding:32px 20px}
  .service-name span{font-size:10px}
  .form-shell{padding:19px 17px}
  .player-actions .control{flex:1 1 45%}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}