:root{
  --bg:#090a0a;
  --bg2:#0d0e0e;
  --panel:#101111;
  --panel-hover:#131414;
  --text:#f4f3ee;
  --muted:#9a9d99;
  --muted2:#696c69;
  --line:rgba(255,255,255,.105);
  --paper:#f1eee6;
  --paperText:#0b0b0b;
  --max:1240px;
  --radius:28px;
  --accent:#ff8a1f;
  --accent2:#ffad5a;
  --accentSoft:rgba(255,138,31,.13);
  --accentLine:rgba(255,138,31,.30);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  min-width:0;
  min-height:100vh;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 50% -10%,rgba(255,255,255,.055),transparent 30%),
    linear-gradient(180deg,#0a0b0b 0%,#080909 100%);
  color:var(--text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{color:inherit}
.shell{width:min(calc(100% - 44px),var(--max));margin-inline:auto}
.grain{
  position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

/* HEADER */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(9,10,10,.82);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.nav{
  min-height:72px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:28px;
}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  width:max-content;
  font-size:18px;font-weight:800;letter-spacing:-.03em;
}
.brand svg,.brand-logo{width:28px;height:28px;flex:none}
.brand-logo{display:block;object-fit:cover;border-radius:7px}
.nav-links{display:flex;gap:31px;align-items:center;color:#b8bbb7;font-size:14px}
.nav-links a{transition:color .18s ease}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-release{
  justify-self:end;
  color:#a4a6a2;
  font-size:10px;font-weight:800;letter-spacing:.16em;
  border:1px solid var(--line);
  padding:9px 12px;border-radius:999px;
}
.menu-button{
  display:none;
  justify-self:end;
  width:44px;height:44px;
  padding:10px;
  border:0;
  background:transparent;
  cursor:pointer;
}
.menu-button span{display:block;height:1px;background:#fff;margin:7px 0}
.mobile-nav{display:none}

/* TYPOGRAPHY / BUTTONS */
.mini-label,.hero-label{
  display:inline-block;
  color:#9ea19d;
  font-size:10px;font-weight:800;letter-spacing:.18em;
}
.hero-label{margin-bottom:24px}
.button{
  min-height:50px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 24px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:14px;font-weight:750;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.button:hover{transform:translateY(-2px)}
.button.light{background:#f3f1eb;color:#090909}
.button.light:hover{background:#fff}
.button.ghost{border-color:var(--line);background:rgba(255,255,255,.02)}
.button.ghost:hover{background:rgba(255,255,255,.06)}
.button.dark{background:#0b0b0b;color:#fff}
.button.outline-dark{border-color:rgba(0,0,0,.18);color:#0b0b0b}
.button.disabled{cursor:default;opacity:.74}
.button.disabled:hover{transform:none}
.text-link{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:28px;
  padding-bottom:4px;
  border-bottom:1px solid #565956;
  color:#ecece6;
  font-size:14px;font-weight:700;
}

/* HERO */
.hero{
  position:relative;
  padding:116px 0 88px;
  text-align:center;
}
.hero::before,.page-hero::before{
  content:"";
  position:absolute;left:50%;top:25px;
  width:min(760px,90vw);height:430px;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(255,255,255,.052),transparent 66%);
  pointer-events:none;
}
.hero h1,.page-hero h1{
  position:relative;
  max-width:1080px;
  margin:0 auto;
  font-size:clamp(62px,8.4vw,116px);
  line-height:.93;
  letter-spacing:-.067em;
  font-weight:850;
}
.hero h1 span,.page-hero h1 span{color:#737673}
.hero-copy,.page-hero p{
  position:relative;
  max-width:700px;
  margin:31px auto 0;
  color:#a1a4a0;
  font-size:17px;line-height:1.7;
}
.hero-actions{
  position:relative;
  display:flex;justify-content:center;gap:11px;flex-wrap:wrap;
  margin-top:34px;
}
.launch-strip{
  max-width:1000px;
  margin:77px auto 0;
  padding:25px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:200px 1fr;
  align-items:center;
  gap:28px;
  text-align:left;
}
.launch-strip div{display:flex;flex-direction:column;gap:8px}
.launch-strip strong{font-size:20px;letter-spacing:-.03em}
.launch-strip p{margin:0;color:#888b87;line-height:1.55;text-align:right}

/* SECTIONS */
.section{padding:104px 0}
.section-heading{max-width:800px}
.section-heading h2{
  margin:17px 0 0;
  font-size:clamp(46px,5.25vw,72px);
  line-height:.97;
  letter-spacing:-.06em;
}
.section-heading h2 span{color:#737673}
.section-heading p{
  max-width:650px;
  margin:25px 0 0;
  color:#929591;
  font-size:16px;line-height:1.7;
}
.feature-grid{
  margin-top:48px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.feature-card{
  min-height:300px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:29px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:26px;
  background:linear-gradient(145deg,#101111,#0c0d0d);
}
.feature-card.large{grid-column:1/-1;min-height:330px}
.card-number{
  width:39px;height:39px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  color:#858884;
  font-size:11px;
}
.feature-card h3{
  max-width:600px;
  margin:11px 0 13px;
  font-size:31px;line-height:1.05;letter-spacing:-.045em;
}
.feature-card p{
  max-width:620px;
  margin:0;
  color:#898c88;
  font-size:15px;line-height:1.65;
}
.section-action{margin-top:25px}

/* COMMAND PREVIEW */
.command-preview{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.012);
}
.command-preview-inner{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:start;
}
.preview-list{border-top:1px solid var(--line)}
.preview-list>div{
  min-height:78px;
  display:grid;
  grid-template-columns:190px 1fr;
  gap:18px;
  align-items:center;
  border-bottom:1px solid var(--line);
}
.preview-list code,.command-chips code{
  width:max-content;
  max-width:100%;
  padding:8px 10px;
  border-radius:8px;
  background:#121313;
  color:#eaeae5;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:12px;
  white-space:normal;
  overflow-wrap:anywhere;
}
.preview-list span{color:#898c88;font-size:13px;line-height:1.5}

/* FREE */
.free-section{padding:96px 0 118px}
.page-free{padding-top:0}
.free-card{
  position:relative;
  min-height:590px;
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:80px;
  align-items:center;
  overflow:hidden;
  padding:62px 58px;
  border-radius:34px;
  background:var(--paper);
  color:var(--paperText);
}
.free-card::after{
  content:"";
  position:absolute;right:-90px;top:-20px;
  width:570px;height:350px;
  border:1px solid rgba(0,0,0,.065);
  border-radius:999px;
  transform:rotate(-29deg);
  box-shadow:0 0 0 34px rgba(0,0,0,.015),0 0 0 72px rgba(0,0,0,.012);
}
.price-side,.free-copy{position:relative;z-index:1}
.price-side{align-self:end}
.small-copy{display:block;margin-bottom:15px;color:#5b5c58;font-size:12px}
.price-side strong{
  display:block;
  margin-bottom:14px;
  font-size:82px;line-height:.8;letter-spacing:-.078em;
}
.price-side .button{margin-top:9px}
.dark-label{color:#5d5b57}
.free-copy{align-self:start;padding-top:10px}
.free-copy h2{
  margin:20px 0;
  font-size:clamp(50px,5.5vw,79px);
  line-height:.97;letter-spacing:-.065em;
}
.free-copy p{max-width:650px;margin:0;color:#555650;line-height:1.68}

/* STATEMENT / CLOSING */
.statement{
  display:grid;
  grid-template-columns:210px 1fr;
  gap:46px;
  padding:70px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.statement p{
  margin:0;
  color:#929591;
  font-size:clamp(25px,3.2vw,43px);
  line-height:1.18;
  letter-spacing:-.043em;
}
.statement strong{color:#eeeeea}
.closing{padding:72px 0 110px}
.closing-card{
  padding:72px 60px;
  border-radius:32px;
  background:var(--paper);
  color:#111;
  text-align:center;
}
.closing-card h2{
  max-width:850px;
  margin:18px auto;
  font-size:clamp(50px,6vw,82px);
  line-height:.96;letter-spacing:-.062em;
}
.closing-card p{max-width:600px;margin:0 auto 28px;color:#5c5d59;line-height:1.65}
.closing-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}

/* PAGE HERO */
.page-hero{
  position:relative;
  padding:116px 0 85px;
  text-align:center;
}
.page-hero.compact{padding-bottom:60px}
.page-hero h1{margin-top:16px;font-size:clamp(58px,7.5vw,103px)}

/* FEATURES REFERENCE */
.feature-reference{padding-bottom:110px;border-top:1px solid var(--line)}
.feature-row{
  display:grid;
  grid-template-columns:70px 190px 1fr;
  gap:30px;
  padding:48px 0;
  border-bottom:1px solid var(--line);
}
.feature-index{color:#5f625f;font-size:11px}
.feature-name{font-size:14px;font-weight:750;color:#dcddd8}
.feature-detail h2{
  max-width:720px;
  margin:0;
  font-size:clamp(31px,4vw,53px);
  line-height:1.03;letter-spacing:-.052em;
}
.feature-detail p{
  max-width:770px;
  margin:20px 0 0;
  color:#929591;
  line-height:1.72;
}
.command-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px}

/* COMMANDS */
.commands-section{padding:0 0 115px}
.commands-toolbar{
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  align-items:center;
  padding:22px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.search-box{
  min-height:54px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 17px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#0d0e0e;
}
.search-icon{
  width:15px;height:15px;
  border:1.6px solid #7b7e7a;
  border-radius:50%;
  position:relative;flex:none;
}
.search-icon::after{
  content:"";
  position:absolute;
  width:6px;height:1.5px;
  background:#7b7e7a;
  right:-4px;bottom:-2px;
  transform:rotate(45deg);
  transform-origin:center;
}
.search-box input{
  width:100%;
  min-width:0;
  border:0;outline:0;
  background:transparent;
  color:#f1f1ec;
  font-size:15px;
}
.search-box input::placeholder{color:#616461}
.command-total{
  min-width:150px;
  display:flex;align-items:baseline;justify-content:flex-end;gap:7px;
}
.command-total strong{font-size:25px;letter-spacing:-.04em}
.command-total span{color:#767976;font-size:12px}

.filters{
  display:flex;
  gap:8px;
  padding:18px 0 14px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.filters::-webkit-scrollbar{display:none}
.filter{
  flex:0 0 auto;
  min-height:40px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:#979a96;
  cursor:pointer;
  font-size:12px;font-weight:700;
  white-space:nowrap;
}
.filter span{margin-left:5px;color:#5f625f}
.filter:hover{color:#fff}
.filter.active{background:#efede7;color:#0c0c0c;border-color:#efede7}
.filter.active span{color:#686863}

.results-line{
  min-height:42px;
  display:flex;align-items:center;justify-content:space-between;gap:15px;
  color:#707370;
  font-size:12px;
}
.clear-search{
  display:none;
  border:0;background:transparent;color:#b9bbb7;cursor:pointer;padding:8px 0;
}
.clear-search.visible{display:block}

.command-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.command-card{
  min-width:0;
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(145deg,#0f1010,#0c0d0d);
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.command-card:hover{
  border-color:rgba(255,255,255,.18);
  background:var(--panel-hover);
  transform:translateY(-1px);
}
.command-card.hidden{display:none}
.command-card-top{
  min-width:0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:15px;
}
.command-card code{
  min-width:0;
  color:#f0f0eb;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:14px;font-weight:700;
  overflow-wrap:anywhere;
}
.command-category{
  flex:0 0 auto;
  color:#666966;
  font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.command-card p{
  margin:15px 0 0;
  color:#858884;
  font-size:13px;line-height:1.62;
}
.command-params{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-top:16px;
}
.command-params span{
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:7px;
  color:#666966;
  font-family:"SFMono-Regular",Consolas,monospace;
  font-size:10px;
}
.no-results{
  display:none;
  min-height:240px;
  place-items:center;
  align-content:center;
  gap:7px;
  color:#777a77;
  text-align:center;
}
.no-results.visible{display:grid}
.no-results strong{color:#d8d9d4;font-size:18px}

/* FAQ */
.faq-section{padding-bottom:115px}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  min-height:77px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  list-style:none;
  cursor:pointer;
  font-size:18px;font-weight:700;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary span{
  flex:none;
  color:#757875;
  font-size:23px;font-weight:400;
  transition:transform .18s ease;
}
.faq-item[open] summary span{transform:rotate(45deg)}
.faq-item p{
  max-width:820px;
  margin:0;
  padding:0 0 28px;
  color:#8f928e;
  line-height:1.7;
}

/* FOOTER */
.footer{border-top:1px solid var(--line)}
.footer-inner{
  min-height:150px;
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:44px;
  align-items:center;
  padding-top:30px;padding-bottom:30px;
}
.footer-main p{margin:10px 0 0;color:#676a67;font-size:12px}
.footer-links{display:flex;gap:22px;color:#777a77;font-size:12px}
.footer-links a:hover{color:#fff}
.footer-meta{display:grid;gap:8px;text-align:right;color:#656865;font-size:11px}

/* REVEAL */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .58s ease,transform .58s ease;
}
.reveal.visible{opacity:1;transform:none}

/* TABLET */
@media (max-width:900px){
  .nav{grid-template-columns:1fr auto}
  .nav-links,.nav-release{display:none}
  .menu-button{display:block}
  .mobile-nav{
    position:fixed;
    left:0;right:0;top:72px;
    z-index:49;
    padding:14px 22px 22px;
    border-bottom:1px solid var(--line);
    background:#090a0a;
    box-shadow:0 24px 50px rgba(0,0,0,.35);
  }
  .mobile-nav.open{display:grid}
  .mobile-nav a{
    min-height:50px;
    display:flex;align-items:center;
    border-bottom:1px solid rgba(255,255,255,.06);
    color:#d6d7d2;
    font-size:15px;font-weight:650;
  }
  .mobile-release{padding-top:18px;color:#777a77;font-size:11px;letter-spacing:.08em}

  .hero{padding-top:86px}
  .hero h1{font-size:clamp(58px,13.5vw,90px)}
  .launch-strip{grid-template-columns:1fr;gap:14px}
  .launch-strip p{text-align:left}

  .feature-grid{grid-template-columns:1fr}
  .feature-card.large{grid-column:auto}
  .command-preview-inner{grid-template-columns:1fr;gap:45px}
  .preview-list>div{grid-template-columns:180px 1fr}

  .free-card{grid-template-columns:1fr;gap:58px;padding:49px 36px}
  .free-copy{order:1}
  .price-side{order:2}
  .statement{grid-template-columns:1fr;gap:15px}

  .feature-row{grid-template-columns:55px 150px 1fr;gap:22px}

  .command-grid{grid-template-columns:1fr}

  .footer-inner{grid-template-columns:1fr;gap:28px}
  .footer-meta{text-align:left}
}

/* PHONE */
@media (max-width:620px){
  .shell{width:min(calc(100% - 28px),var(--max))}
  .site-header,.nav{min-height:66px}
  .mobile-nav{top:66px}
  .brand{font-size:17px}
  .brand svg,.brand-logo{width:26px;height:26px}

  .hero{padding:68px 0 58px}
  .hero-label{margin-bottom:19px}
  .hero h1,.page-hero h1{
    font-size:clamp(49px,15vw,70px);
    line-height:.94;
    letter-spacing:-.06em;
  }
  .hero-copy,.page-hero p{
    margin-top:24px;
    font-size:15px;
    line-height:1.65;
  }
  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
    margin-top:28px;
  }
  .hero-actions .button{width:100%}
  .launch-strip{
    margin-top:52px;
    padding:21px 0;
  }

  .section{padding:76px 0}
  .section-heading h2{
    font-size:clamp(39px,12vw,52px);
    line-height:1;
  }
  .section-heading p{font-size:15px}

  .feature-grid{margin-top:35px}
  .feature-card{
    min-height:255px;
    padding:23px;
    border-radius:21px;
  }
  .feature-card.large{min-height:270px}
  .card-number{width:36px;height:36px}
  .feature-card h3{font-size:27px}

  .command-preview-inner{gap:32px}
  .preview-list>div{
    min-height:auto;
    grid-template-columns:1fr;
    gap:9px;
    padding:17px 0;
  }
  .preview-list code{font-size:12px}

  .free-section{padding:72px 0 82px}
  .free-card{
    min-height:auto;
    gap:48px;
    padding:38px 24px;
    border-radius:24px;
  }
  .price-side strong{font-size:68px}
  .price-side .button{width:100%}
  .free-copy h2{
    font-size:clamp(43px,13vw,58px);
    line-height:.99;
  }

  .statement{padding:52px 0}
  .statement p{
    font-size:clamp(25px,8vw,34px);
    line-height:1.2;
  }

  .closing{padding:48px 0 80px}
  .closing-card{
    padding:48px 22px;
    border-radius:24px;
  }
  .closing-card h2{font-size:clamp(42px,12vw,58px)}
  .closing-actions{display:grid}
  .closing-actions .button{width:100%}

  .page-hero{
    padding:76px 0 58px;
  }
  .page-hero.compact{padding-bottom:42px}

  .feature-reference{padding-bottom:80px}
  .feature-row{
    grid-template-columns:42px 1fr;
    gap:12px 15px;
    padding:35px 0;
  }
  .feature-name{padding-top:0}
  .feature-detail{grid-column:1/-1;padding-top:7px}
  .feature-detail h2{
    font-size:clamp(30px,9vw,42px);
  }
  .feature-detail p{font-size:14px}
  .command-chips{margin-top:20px}

  .commands-section{padding-bottom:82px}
  .commands-toolbar{
    grid-template-columns:1fr;
    gap:10px;
    padding-top:0;
    border-top:0;
  }
  .command-total{
    min-width:0;
    justify-content:flex-start;
    padding:5px 2px;
  }
  .filters{
    margin-right:-14px;
    padding-right:14px;
  }
  .results-line{min-height:46px}
  .command-card{
    padding:19px;
    border-radius:16px;
  }
  .command-card-top{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
  .command-category{justify-self:start}
  .command-card code{font-size:13px}

  .faq-section{padding-bottom:82px}
  .faq-item summary{
    min-height:72px;
    font-size:16px;
    line-height:1.35;
  }
  .faq-item p{font-size:14px}

  .footer-inner{padding-top:36px;padding-bottom:36px}
  .footer-links{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px 28px;
  }
}

/* VERY SMALL PHONES */
@media (max-width:360px){
  .shell{width:min(calc(100% - 22px),var(--max))}
  .hero h1,.page-hero h1{font-size:46px}
  .feature-card{padding:20px}
  .free-card{padding:32px 19px}
  .command-card{padding:17px}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
}


/* =========================================================
   DISCORD AUTH + REAL DASHBOARD
   ========================================================= */

.nav-auth{justify-self:end;display:flex;align-items:center}
.nav-login,.mobile-login{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  border:0;
  border-radius:999px;
  background:#f3f1eb;
  color:#0a0a0a;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}
.nav-login.loading{opacity:.7;cursor:wait}
.mobile-auth{padding-top:17px}
.mobile-login{width:100%;min-height:48px}

.header-user{
  display:flex;
  align-items:center;
  gap:9px;
  max-width:210px;
  padding:5px 11px 5px 5px;
  border:1px solid var(--line);
  border-radius:999px;
  color:#e9e9e4;
  font-size:12px;
  font-weight:700;
}
.header-user img,.header-avatar-fallback{
  width:30px;height:30px;
  flex:none;
  border-radius:50%;
  object-fit:cover;
  display:grid;
  place-items:center;
  background:#e8e6df;
  color:#0a0a0a;
  font-size:11px;
}
.header-user span:last-child{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.dashboard-header{position:sticky}
.dashboard-nav{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.dashboard-back{
  color:#969995;
  font-size:13px;
}
.dashboard-back:hover{color:#fff}

.dashboard-page,.server-page{
  min-height:calc(100vh - 72px);
  padding-top:64px;
  padding-bottom:100px;
}

.dashboard-state{
  min-height:520px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:15px;
  text-align:center;
}
.dashboard-state h1{
  margin:3px 0 0;
  font-size:clamp(45px,7vw,78px);
  line-height:.96;
  letter-spacing:-.06em;
}
.dashboard-state p{
  max-width:550px;
  margin:0 0 10px;
  color:#8f928e;
  line-height:1.65;
}
.loading-ring{
  width:30px;height:30px;
  border:2px solid rgba(255,255,255,.13);
  border-top-color:#efede7;
  border-radius:50%;
  animation:alebotSpin .8s linear infinite;
}
@keyframes alebotSpin{to{transform:rotate(360deg)}}

.auth-error{
  margin-bottom:18px;
  padding:14px 16px;
  border:1px solid rgba(255,130,130,.24);
  border-radius:14px;
  background:rgba(180,40,40,.08);
  color:#d8a0a0;
  font-size:13px;
  line-height:1.55;
}

.dashboard-hero{
  display:grid;
  grid-template-columns:1fr auto;
  gap:40px;
  align-items:end;
  padding-bottom:44px;
  border-bottom:1px solid var(--line);
}
.dashboard-hero h1{
  margin:13px 0 0;
  font-size:clamp(54px,7vw,92px);
  line-height:.94;
  letter-spacing:-.065em;
}
.dashboard-hero>div:first-child>p{
  margin:20px 0 0;
  color:#8f928e;
  line-height:1.6;
}

.dashboard-user-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  min-width:315px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:17px;
  background:#0e0f0f;
}
.dashboard-user-avatar{
  width:44px;height:44px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  background:#e9e7e0;
  color:#0b0b0b;
  font-weight:800;
}
.dashboard-user-avatar img{width:100%;height:100%;object-fit:cover}
.dashboard-user-card>div:nth-child(2){
  min-width:0;
  display:grid;
  gap:4px;
}
.dashboard-user-card span{
  color:#686b68;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.dashboard-user-card strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
}

.plain-button{
  border:0;
  background:transparent;
  color:#9b9e9a;
  cursor:pointer;
  padding:8px;
  font-size:12px;
}
.plain-button:hover{color:#fff}
.plain-button:disabled{opacity:.5;cursor:wait}

.server-toolbar{
  display:grid;
  grid-template-columns:minmax(0,520px) 1fr;
  gap:24px;
  align-items:center;
  padding:26px 0 18px;
}
.server-search{
  min-height:50px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#0d0e0e;
}
.server-search input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
}
.server-search input::placeholder{color:#5f625f}
.server-toolbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  color:#696c69;
  font-size:12px;
}

.guild-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.guild-card{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(145deg,#101111,#0c0d0d);
}
.guild-card-main{
  min-width:0;
  display:flex;
  align-items:center;
  gap:15px;
}
.guild-icon,.server-large-icon{
  flex:none;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#1a1b1b;
  color:#d9dad5;
  font-weight:800;
  letter-spacing:-.04em;
}
.guild-icon{
  width:52px;height:52px;
  border-radius:16px;
  font-size:13px;
}
.guild-icon img,.server-large-icon img{width:100%;height:100%;object-fit:cover}
.guild-copy{min-width:0}
.guild-title-line{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.guild-title-line h3{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin:0;
  font-size:16px;
  letter-spacing:-.025em;
}
.owner-pill{
  flex:none;
  padding:4px 6px;
  border:1px solid var(--line);
  border-radius:999px;
  color:#777a77;
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
}
.guild-copy p{
  margin:7px 0 0;
  color:#686b68;
  font-size:11px;
}
.guild-manage-button{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  color:#d8d9d4;
  font-size:11px;
  font-weight:750;
}
.guild-manage-button:hover{background:#f0eee8;color:#0b0b0b}
.dashboard-empty{
  grid-column:1/-1;
  min-height:240px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  border:1px dashed var(--line);
  border-radius:20px;
  color:#727572;
  text-align:center;
}
.dashboard-empty strong{color:#d7d8d3}

.server-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding-bottom:40px;
  border-bottom:1px solid var(--line);
}
.server-identity{
  display:flex;
  align-items:center;
  gap:20px;
}
.server-large-icon{
  width:72px;height:72px;
  border-radius:22px;
  font-size:17px;
}
.server-identity h1{
  margin:9px 0 0;
  font-size:clamp(38px,6vw,68px);
  line-height:.96;
  letter-spacing:-.06em;
}
.server-account{
  display:flex;
  align-items:center;
  gap:12px;
  color:#777a77;
  font-size:11px;
}
.server-account strong{color:#d6d7d2}

.connection-note{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:40px;
  margin:28px 0;
  padding:25px;
  border:1px solid var(--line);
  border-radius:19px;
  background:#0e0f0f;
}
.connection-note>div{display:grid;gap:8px}
.connection-note strong{font-size:17px;line-height:1.35}
.connection-note p{margin:0;color:#858884;line-height:1.65;font-size:13px}

.dashboard-module-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.dashboard-module{
  min-height:250px;
  display:flex;
  flex-direction:column;
  padding:23px;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(145deg,#101111,#0c0d0d);
}
.dashboard-module>span{
  color:#5f625f;
  font-size:10px;
}
.dashboard-module h2{
  margin:45px 0 10px;
  font-size:25px;
  letter-spacing:-.04em;
}
.dashboard-module p{
  margin:0;
  color:#858884;
  font-size:13px;
  line-height:1.6;
}
.module-status{
  margin-top:auto;
  padding-top:20px;
  color:#5f625f;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

@media(max-width:900px){
  .nav-auth{display:none}
  .dashboard-hero{grid-template-columns:1fr}
  .dashboard-user-card{min-width:0;max-width:420px}
  .server-toolbar{grid-template-columns:1fr}
  .server-toolbar-actions{justify-content:space-between}
  .guild-grid{grid-template-columns:1fr}
  .dashboard-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .connection-note{grid-template-columns:1fr}
}

@media(max-width:620px){
  .dashboard-nav{min-height:66px}
  .dashboard-page,.server-page{
    min-height:calc(100vh - 66px);
    padding-top:42px;
    padding-bottom:70px;
  }
  .dashboard-back{font-size:11px}
  .dashboard-state{min-height:430px}
  .dashboard-hero{padding-bottom:30px}
  .dashboard-hero h1{font-size:52px}
  .dashboard-user-card{
    grid-template-columns:auto minmax(0,1fr);
  }
  .dashboard-user-card .plain-button{
    grid-column:1/-1;
    justify-self:start;
    padding-left:0;
  }
  .server-toolbar{padding-top:20px}
  .server-toolbar-actions{gap:8px}
  .guild-card{
    align-items:flex-start;
    display:grid;
    grid-template-columns:1fr;
    gap:15px;
    padding:18px;
  }
  .guild-manage-button{
    width:100%;
    justify-content:center;
  }
  .server-topbar{
    align-items:flex-start;
    display:grid;
  }
  .server-account{
    width:100%;
    justify-content:space-between;
  }
  .server-large-icon{
    width:60px;height:60px;border-radius:18px;
  }
  .server-identity{align-items:center}
  .server-identity h1{font-size:40px}
  .dashboard-module-grid{grid-template-columns:1fr}
  .dashboard-module{min-height:220px}
}


/* Make view switching reliable in every browser */
[hidden]{display:none!important}


/* =========================================================
   SERVER DASHBOARD LAYOUT FIX
   ========================================================= */

.server-page{
  padding-top:48px;
}

.server-topbar{
  min-height:155px;
  padding:10px 0 42px;
}

.server-section-heading{
  display:grid;
  grid-template-columns:1fr auto;
  gap:30px;
  align-items:end;
  padding:42px 0 24px;
}

.server-section-heading h2{
  margin:10px 0 0;
  font-size:clamp(34px,4.6vw,58px);
  line-height:.98;
  letter-spacing:-.055em;
}

.server-section-heading>p{
  margin:0 0 5px;
  color:#777a77;
  font-size:13px;
}

.dashboard-module{
  color:inherit;
  text-decoration:none;
}

.dashboard-module:hover{
  border-color:rgba(255,255,255,.19);
  background:#121313;
  transform:translateY(-2px);
}

.module-link{
  margin-top:auto;
  padding-top:22px;
  color:#8c8f8b;
  font-size:11px;
  font-weight:700;
}

.module-link b{
  margin-left:6px;
  color:#d7d8d3;
}

@media(max-width:900px){
  .server-section-heading{
    grid-template-columns:1fr;
    gap:8px;
  }
}

@media(max-width:620px){
  .server-page{
    padding-top:28px;
  }

  .server-topbar{
    min-height:0;
    padding:0 0 28px;
  }

  .server-section-heading{
    padding:30px 0 19px;
  }

  .server-section-heading h2{
    font-size:38px;
  }
}


/* =========================================================
   LIVE MODERATION DASHBOARD
   ========================================================= */

.moderation-page{
  min-height:calc(100vh - 72px);
  padding-top:50px;
  padding-bottom:110px;
}

.settings-success{
  margin-bottom:16px;
  padding:13px 15px;
  border:1px solid rgba(120,220,150,.18);
  border-radius:13px;
  background:rgba(80,180,110,.08);
  color:#a8d8b4;
  font-size:13px;
}

.settings-page-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:30px;
  align-items:end;
  padding-bottom:38px;
  border-bottom:1px solid var(--line);
}

.settings-page-head h1{
  margin:11px 0 0;
  font-size:clamp(46px,6.5vw,82px);
  line-height:.95;
  letter-spacing:-.064em;
}

.settings-page-head p{
  margin:18px 0 0;
  color:#888b87;
  line-height:1.6;
}

.settings-actions{
  display:flex;
  gap:9px;
  align-items:center;
}

.settings-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
  padding-top:28px;
}

.settings-card{
  min-width:0;
  padding:25px;
  border:1px solid var(--line);
  border-radius:21px;
  background:linear-gradient(145deg,#101111,#0c0d0d);
}

.settings-card-heading{
  display:grid;
  grid-template-columns:40px 1fr;
  gap:13px;
  align-items:start;
  padding-bottom:27px;
}

.settings-number{
  width:36px;height:36px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  color:#686b68;
  font-size:10px;
}

.settings-card-heading h2{
  margin:0;
  font-size:23px;
  letter-spacing:-.04em;
}

.settings-card-heading p{
  margin:8px 0 0;
  color:#767976;
  font-size:12px;
  line-height:1.55;
}

.field{
  display:grid;
  gap:9px;
  margin-top:18px;
}

.field>span{
  color:#bfc1bd;
  font-size:12px;
  font-weight:700;
}

.field input,
.field select{
  width:100%;
  min-height:48px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:12px;
  outline:0;
  background:#0a0b0b;
  color:#ecece7;
}

.field select{
  cursor:pointer;
}

.field input:focus,
.field select:focus{
  border-color:rgba(255,255,255,.28);
}

.field small,
.field-help{
  margin:0;
  color:#606360;
  font-size:10px;
  line-height:1.5;
}

.toggle-row{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  align-items:center;
  min-height:74px;
  padding:16px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:15px;
  cursor:pointer;
}

.toggle-row>div{
  display:grid;
  gap:5px;
}

.toggle-row strong{
  font-size:13px;
}

.toggle-row>div>span{
  color:#696c69;
  font-size:11px;
  line-height:1.45;
}

.toggle-row input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.toggle-ui{
  position:relative;
  width:43px;height:24px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:#161717;
  transition:.18s ease;
}

.toggle-ui::after{
  content:"";
  position:absolute;
  width:18px;height:18px;
  left:2px;top:2px;
  border-radius:50%;
  background:#747774;
  transition:.18s ease;
}

.toggle-row input:checked + .toggle-ui{
  background:#efede7;
  border-color:#efede7;
}

.toggle-row input:checked + .toggle-ui::after{
  transform:translateX(19px);
  background:#0a0a0a;
}

.two-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
}

.role-check-list{
  max-height:260px;
  display:grid;
  gap:6px;
  overflow:auto;
  padding:8px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:14px;
  background:#0a0b0b;
}

.role-check{
  position:relative;
  min-height:39px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 9px;
  border-radius:9px;
  cursor:pointer;
}

.role-check:hover{
  background:rgba(255,255,255,.04);
}

.role-check input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.role-check-box{
  width:16px;height:16px;
  flex:none;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:5px;
}

.role-check input:checked + .role-check-box{
  background:#efede7;
  border-color:#efede7;
}

.role-check input:checked + .role-check-box::after{
  content:"";
  width:6px;height:3px;
  border-left:1.7px solid #0a0a0a;
  border-bottom:1.7px solid #0a0a0a;
  transform:rotate(-45deg) translateY(-1px);
}

.role-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#a8aaa6;
  font-size:11px;
}

.field-empty{
  padding:18px;
  color:#626562;
  font-size:11px;
  text-align:center;
}

.settings-bottom-bar{
  position:sticky;
  bottom:14px;
  z-index:15;
  min-height:69px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:22px;
  padding:10px 12px 10px 18px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(12,13,13,.92);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 18px 45px rgba(0,0,0,.28);
}

.settings-bottom-bar>span{
  color:#686b68;
  font-size:11px;
}

.settings-bottom-bar>span.dirty{
  color:#d2d3ce;
}

@media(max-width:900px){
  .settings-page-head{
    grid-template-columns:1fr;
  }

  .settings-actions{
    justify-content:flex-start;
  }

  .settings-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:620px){
  .moderation-page{
    min-height:calc(100vh - 66px);
    padding-top:31px;
    padding-bottom:85px;
  }

  .settings-page-head{
    padding-bottom:28px;
  }

  .settings-page-head h1{
    font-size:47px;
  }

  .settings-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .settings-actions .button{
    width:100%;
    padding-left:14px;
    padding-right:14px;
  }

  .settings-grid{
    padding-top:18px;
  }

  .settings-card{
    padding:20px;
    border-radius:18px;
  }

  .settings-card-heading{
    grid-template-columns:35px 1fr;
  }

  .two-fields{
    grid-template-columns:1fr;
  }

  .settings-bottom-bar{
    bottom:8px;
    margin-left:-3px;
    margin-right:-3px;
    padding-left:13px;
  }

  .settings-bottom-bar .button{
    min-height:45px;
    padding:0 15px;
  }
}


/* =========================================================
   LIVE TICKET DASHBOARD
   ========================================================= */
.ticket-design-card{grid-column:1/-1}.three-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.color-input-wrap{display:grid;grid-template-columns:52px 1fr;gap:8px}.color-input-wrap input[type="color"]{width:52px;height:46px;padding:4px;border:1px solid var(--line);border-radius:10px;background:#0d0e0e}.ticket-types-section{padding-top:58px}.ticket-types-head{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;padding-bottom:24px;border-bottom:1px solid var(--line)}.ticket-types-head h2{margin:9px 0 0;font-size:clamp(35px,4.8vw,58px);letter-spacing:-.055em}.ticket-types-head p{margin:15px 0 0;color:#858884}.ticket-type-list{display:grid;gap:12px;padding-top:18px}.ticket-type-editor{padding:23px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,#101111,#0c0d0d)}.ticket-type-editor-head{display:flex;justify-content:space-between;gap:20px;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--line)}.ticket-type-editor-head>div{display:grid;gap:7px}.ticket-type-editor-head strong{font-size:18px;letter-spacing:-.025em}.type-delete{border:0;background:transparent;color:#9c7373;cursor:pointer;font-size:12px}.ticket-type-form{display:grid;grid-template-columns:1fr 180px;gap:12px;padding-top:20px}.wide-field{grid-column:1/-1}.compact-toggle{margin-top:0}.ticket-types-empty{min-height:160px;display:grid;place-items:center;border:1px dashed var(--line);border-radius:18px;color:#6f726e;text-align:center}.field textarea{resize:vertical;min-height:96px}.field input,.field textarea,.field select{width:100%}.settings-card .field{margin-top:17px}
@media(max-width:900px){.three-fields{grid-template-columns:1fr}.ticket-types-head{grid-template-columns:1fr}.ticket-type-form{grid-template-columns:1fr}.wide-field{grid-column:auto}.ticket-design-card{grid-column:auto}}
@media(max-width:620px){.ticket-types-section{padding-top:40px}.ticket-type-editor{padding:18px}.ticket-type-editor-head{align-items:flex-start}.ticket-types-head .button{width:100%}}


/* =========================================================
   TICKET BUTTONS
   ========================================================= */

.ticket-button-example{
  margin:22px 0 18px;
  padding:19px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#0d0e0e;
}
.ticket-button-example>span,
.ticket-live-preview>span{
  display:block;
  margin-bottom:12px;
  color:#656865;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
}
.ticket-button-example>div{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.ticket-button-example button,
.ticket-button-preview{
  border:0;
  border-radius:7px;
  min-height:38px;
  padding:0 14px;
  color:#fff;
  font-size:12px;
  font-weight:700;
  pointer-events:none;
}
.ticket-button-example button{background:#da373c}
.ticket-button-example p{
  margin:12px 0 0;
  color:#777a77;
  font-size:11px;
}

.ticket-live-preview{
  display:flex;
  align-items:center;
  gap:13px;
  margin:18px 0 2px;
  padding:15px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:#0b0c0c;
}
.ticket-live-preview>span{
  margin:0;
  flex:none;
}
.ticket-button-preview.danger{background:#da373c}
.ticket-button-preview.primary{background:#5865f2}
.ticket-button-preview.success{background:#248046}
.ticket-button-preview.secondary{background:#4e5058}

.ticket-type-form small{
  display:block;
  margin-top:6px;
  color:#5f625f;
  font-size:10px;
  line-height:1.45;
}

@media(max-width:620px){
  .ticket-live-preview{
    display:grid;
    gap:9px;
  }
  .ticket-button-preview{
    width:100%;
  }
}


/* =========================================================
   FORM UI FIX — dark, rounded AleBot controls
   ========================================================= */

.field{
  display:block;
}

.field > span{
  display:block;
  margin-bottom:8px;
  color:#d8d9d4;
  font-size:12px;
  font-weight:700;
}

.field input,
.field select,
.field textarea,
#ticketContent input,
#ticketContent select,
#ticketContent textarea,
#moderationContent input,
#moderationContent select,
#moderationContent textarea{
  width:100%;
  min-width:0;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  outline:none;
  background:#0d0e0e;
  color:#f1f1ec;
  font:inherit;
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.field input,
.field select,
#ticketContent input,
#ticketContent select,
#moderationContent input,
#moderationContent select{
  min-height:46px;
  padding:0 13px;
}

.field textarea,
#ticketContent textarea,
#moderationContent textarea{
  padding:12px 13px;
  resize:vertical;
  line-height:1.55;
}

.field input::placeholder,
.field textarea::placeholder,
#ticketContent input::placeholder,
#ticketContent textarea::placeholder,
#moderationContent input::placeholder,
#moderationContent textarea::placeholder{
  color:#5f625f;
}

.field input:hover,
.field select:hover,
.field textarea:hover,
#ticketContent input:hover,
#ticketContent select:hover,
#ticketContent textarea:hover,
#moderationContent input:hover,
#moderationContent select:hover,
#moderationContent textarea:hover{
  border-color:rgba(255,255,255,.17);
  background:#101111;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
#ticketContent input:focus,
#ticketContent select:focus,
#ticketContent textarea:focus,
#moderationContent input:focus,
#moderationContent select:focus,
#moderationContent textarea:focus{
  border-color:rgba(255,255,255,.30);
  background:#111212;
  box-shadow:0 0 0 3px rgba(255,255,255,.04);
}

.field select,
#ticketContent select,
#moderationContent select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:38px;
  background-image:
    linear-gradient(45deg, transparent 50%, #777a77 50%),
    linear-gradient(135deg, #777a77 50%, transparent 50%);
  background-position:
    calc(100% - 17px) 50%,
    calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}

.field select option,
#ticketContent select option,
#moderationContent select option{
  background:#101111;
  color:#f1f1ec;
}

.field input[type="color"],
#ticketContent input[type="color"],
#moderationContent input[type="color"]{
  padding:5px;
  cursor:pointer;
}

.field input[type="checkbox"],
#ticketContent input[type="checkbox"],
#moderationContent input[type="checkbox"]{
  width:auto;
  min-height:0;
  accent-color:#f0eee8;
}

.role-check-item{
  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;
  background:#0d0e0e;
  transition:border-color .18s ease, background .18s ease;
}

.role-check-item:hover{
  border-color:rgba(255,255,255,.16);
  background:#101111;
}

.ticket-type-editor{
  border-radius:20px;
  background:linear-gradient(145deg,#101111,#0c0d0d);
}

.ticket-type-editor .field small{
  color:#666966;
}

@media(max-width:620px){
  .field input,
  .field select,
  #ticketContent input,
  #ticketContent select,
  #moderationContent input,
  #moderationContent select{
    min-height:48px;
    border-radius:11px;
  }

  .field textarea,
  #ticketContent textarea,
  #moderationContent textarea{
    border-radius:11px;
  }
}


/* =========================================================
   DOCS + INVITE
   ========================================================= */
.nav-links a.active{color:#f2f2ed}
.docs-hero p{max-width:720px;margin-left:auto;margin-right:auto}
.docs-shell{display:grid;grid-template-columns:230px minmax(0,1fr);gap:58px;padding-bottom:120px;align-items:start}
.docs-sidebar{position:sticky;top:100px;display:flex;flex-direction:column;gap:3px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.docs-sidebar strong{margin:16px 12px 7px;color:#626562;font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.docs-sidebar strong:first-child{margin-top:0}
.docs-sidebar a{padding:9px 12px;border-radius:9px;color:#969995;font-size:12px;transition:background .16s ease,color .16s ease}
.docs-sidebar a:hover{background:#101111;color:#f2f2ed}
.docs-content{min-width:0}
.docs-section{padding:54px 0;border-top:1px solid var(--line);scroll-margin-top:96px}
.docs-section:first-child{border-top:1px solid var(--line)}
.docs-section h2{max-width:820px;margin:13px 0 15px;font-size:clamp(33px,4.2vw,57px);line-height:1.02;letter-spacing:-.052em}
.docs-section>p{max-width:820px;margin:0;color:#8f928e;font-size:15px;line-height:1.72}
.docs-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:25px}
.docs-callouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:27px}
.docs-callouts>div{padding:19px;border:1px solid var(--line);border-radius:16px;background:#0e0f0f}
.docs-callouts strong{display:block;margin-bottom:8px;font-size:13px}
.docs-callouts span{display:block;color:#7e817d;font-size:12px;line-height:1.55}
.docs-callouts code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;color:#d7d8d3}
.docs-command-list{margin-top:28px;border-top:1px solid var(--line)}
.docs-command-row{display:grid;grid-template-columns:minmax(160px,230px) minmax(0,1fr) minmax(130px,220px);gap:20px;align-items:center;padding:15px 4px;border-bottom:1px solid var(--line)}
.docs-command-row code{width:max-content;max-width:100%;padding:7px 9px;border-radius:7px;background:#121313;color:#eeeeea;font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:11px;white-space:normal;overflow-wrap:anywhere}
.docs-command-row span{color:#a0a39f;font-size:12px;line-height:1.5}
.docs-command-row small{color:#5e615e;font-size:10px;line-height:1.45;overflow-wrap:anywhere}
.invite-page{min-height:calc(100vh - 90px);display:grid;place-items:center;padding-top:80px;padding-bottom:100px}
.invite-card{width:min(850px,100%);padding:62px;border:1px solid var(--line);border-radius:30px;background:linear-gradient(145deg,#101111,#0c0d0d);text-align:center}
.invite-card h1{margin:17px 0 19px;font-size:clamp(55px,7vw,92px);line-height:.96;letter-spacing:-.065em}
.invite-card h1 span{color:#707370}
.invite-card p{max-width:600px;margin:0 auto;color:#929591;line-height:1.68}
.invite-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:29px}
.invite-card small{display:block;margin-top:18px;color:#565956;font-size:10px}
@media(max-width:900px){.docs-shell{grid-template-columns:1fr;gap:16px}.docs-sidebar{position:static;display:flex;flex-direction:row;overflow-x:auto;gap:5px;padding:10px 0;scrollbar-width:none}.docs-sidebar::-webkit-scrollbar{display:none}.docs-sidebar strong{display:none}.docs-sidebar a{flex:0 0 auto;white-space:nowrap;border:1px solid var(--line)}.docs-callouts{grid-template-columns:1fr}.docs-command-row{grid-template-columns:1fr;gap:8px}.docs-command-row small{padding-bottom:2px}.invite-card{padding:42px 24px}}

/* =========================================================
   REAL ALEBOT LOGO FIX
   ========================================================= */
.brand-logo{
  object-fit:contain;
  object-position:center;
  border-radius:7px;
  background:#0a0b0c;
}

/* =========================================================
   ROLETOOLS DASHBOARD
   ========================================================= */
.roletools-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.roletools-card{
  min-width:0;
}

.roletools-inline-toggles,
.roletools-action-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.small-check{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;
  background:#0d0e0e;
  color:#b8bbb8;
  font-size:12px;
}

.small-check input{
  width:auto!important;
  min-height:0!important;
}

.roletools-edit-flags{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.danger-button{
  border:1px solid rgba(218,55,60,.4);
  background:rgba(218,55,60,.10);
  color:#ff8e92;
}

.danger-button:hover{
  background:rgba(218,55,60,.18);
  border-color:rgba(218,55,60,.55);
}

.role-search{
  width:100%;
  min-height:44px;
  margin-bottom:12px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  outline:none;
  background:#0d0e0e;
  color:#f1f1ec;
  font:inherit;
}

.role-browser{
  display:grid;
  gap:7px;
  max-height:360px;
  overflow:auto;
  padding-right:4px;
}

.role-browser-row{
  display:grid;
  grid-template-columns:12px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:11px;
  background:#0c0d0d;
}

.role-browser-row.locked{
  opacity:.58;
}

.role-browser-row div{
  min-width:0;
}

.role-browser-row strong,
.role-browser-row small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.role-browser-row strong{
  color:#e8e9e4;
  font-size:12px;
}

.role-browser-row small,
.role-browser-row>span:last-child{
  color:#676a67;
  font-size:9px;
}

.role-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--role-color,#777);
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}

.roletools-join-section,
.roletools-history-section{
  margin-top:24px;
}

.join-role-list{
  display:grid;
  gap:10px;
  margin-top:18px;
}

.join-role-row{
  display:grid;
  grid-template-columns:minmax(180px,1.4fr) minmax(180px,1fr) auto;
  align-items:end;
  gap:12px;
  padding:14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:#0d0e0e;
}

.join-role-row .field{
  margin:0;
}

.join-role-remove{
  min-height:46px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:11px;
  background:#111212;
  color:#8a8d89;
  cursor:pointer;
}

.join-role-remove:hover{
  color:#ef8a8e;
  border-color:rgba(218,55,60,.28);
}

.roletools-join-save{
  margin-top:14px;
}

.metadata-refresh{
  white-space:nowrap;
}

.roletools-history{
  display:grid;
  gap:8px;
  margin-top:18px;
}

.roletools-history-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px 14px;
  align-items:center;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:#0d0e0e;
}

.roletools-history-row strong,
.roletools-history-row small{
  display:block;
}

.roletools-history-row strong{
  color:#e4e5e0;
  font-size:12px;
}

.roletools-history-row small{
  margin-top:3px;
  color:#646764;
  font-size:9px;
}

.roletools-history-row p{
  grid-column:1/-1;
  margin:0;
  color:#d78083;
  font-size:10px;
}

.action-status{
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  color:#8b8e8a;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.action-status.done{
  color:#9fd7ad;
  border-color:rgba(74,170,98,.22);
  background:rgba(74,170,98,.07);
}

.action-status.error{
  color:#ef9a9d;
  border-color:rgba(218,55,60,.22);
  background:rgba(218,55,60,.07);
}

.action-status.running,
.action-status.queued{
  color:#c9c4a5;
}

@media(max-width:820px){
  .roletools-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:620px){
  .roletools-edit-flags,
  .join-role-row{
    grid-template-columns:1fr;
  }

  .join-role-remove{
    width:100%;
  }

  .roletools-action-row .button,
  .roletools-inline-toggles .small-check{
    flex:1 1 auto;
  }
}


/* =========================================================
   DASHBOARD UX v5
   ========================================================= */
.module-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}
.module-topline>span{margin:0!important}
.module-status{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 8px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  font-size:9px;
  font-style:normal;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.module-status.live{background:#efeee9;color:#121313}
.module-status.discord{background:#101111;color:#767976}
.dashboard-module-disabled{cursor:default;opacity:.68}
.dashboard-module-disabled:hover{transform:none;border-color:var(--line)}
.module-link.muted{color:#666966}
.dashboard-help-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:0 0 18px;
}
.dashboard-help-strip>div{
  min-width:0;
  padding:14px 15px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#0d0e0e;
}
.dashboard-help-strip strong{
  display:block;
  margin-bottom:5px;
  color:#e8e9e4;
  font-size:11px;
}
.dashboard-help-strip span{
  display:block;
  color:#737673;
  font-size:10px;
  line-height:1.55;
}
.dashboard-help-strip code{
  padding:2px 5px;
  border-radius:5px;
  background:#151616;
  color:#d6d7d2;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:9px;
}
.metadata-refresh{white-space:nowrap}
@media(max-width:900px){
  .dashboard-help-strip{grid-template-columns:1fr}
}


/* =========================================================
   ALEBOT FLAT DASHBOARD SETTINGS — FIXED
   Applied to Moderation, Tickets and RoleTools without
   changing the working JS / Supabase bindings.
   ========================================================= */

/* Page heads */
.settings-page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  padding:8px 0 28px;
  border-bottom:1px solid rgba(255,255,255,.085);
}

.settings-page-head h1{
  margin:8px 0 0;
  font-size:clamp(38px,5vw,58px);
  line-height:.98;
  letter-spacing:-.055em;
}

.settings-page-head p{
  max-width:620px;
  margin:11px 0 0;
  color:#70736f;
  font-size:12px;
  line-height:1.55;
}

.settings-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:none;
}

.settings-actions .button.ghost,
.metadata-refresh{
  border-color:transparent!important;
  background:transparent!important;
  padding-left:10px!important;
  padding-right:10px!important;
  color:#777b77!important;
  box-shadow:none!important;
}

.settings-actions .button.ghost:hover,
.metadata-refresh:hover{
  color:#f0f0eb!important;
}

/* Main settings are no longer a card grid */
.settings-grid,
.ticket-settings-grid,
.roletools-grid{
  display:block!important;
  margin-top:2px;
}

/* Every settings section becomes a flat two-column row */
.settings-card,
.roletools-card{
  display:grid!important;
  grid-template-columns:minmax(210px,.72fr) minmax(0,1.28fr)!important;
  gap:12px 48px!important;
  min-height:0!important;
  margin:0!important;
  padding:30px 0!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
}

.settings-grid>.settings-card:last-child,
.roletools-grid>.settings-card:last-child{
  border-bottom:0!important;
}

.settings-card-heading{
  grid-column:1!important;
  align-self:start;
  display:block!important;
  padding:3px 0 0!important;
  border:0!important;
}

.settings-card-heading .settings-number{
  display:none!important;
}

.settings-card-heading h2{
  margin:0!important;
  font-size:19px!important;
  letter-spacing:-.035em!important;
}

.settings-card-heading p{
  max-width:310px;
  margin:8px 0 0!important;
  color:#666a66!important;
  font-size:11px!important;
  line-height:1.55!important;
}

.settings-card > :not(.settings-card-heading),
.roletools-card > :not(.settings-card-heading){
  grid-column:2!important;
  min-width:0;
}

/* Inputs stay simple, not card-like */
.field{
  margin-top:0!important;
}

.field>span{
  color:#8a8e89!important;
  font-size:10px!important;
}

.field input,
.field select,
.field textarea,
.role-search{
  background:#090a0a!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:10px!important;
  box-shadow:none!important;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.role-search:focus{
  border-color:rgba(255,255,255,.24)!important;
  outline:none!important;
}

.field small,
.field-help{
  color:#555955!important;
}

/* Toggles should feel like rows, not nested boxes */
.toggle-row{
  min-height:58px!important;
  padding:3px 0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
}

.toggle-row>div>strong{
  font-size:12px;
}

.toggle-row>div>span{
  color:#626662!important;
  font-size:10px!important;
}

/* Role lists */
.role-check-list{
  max-height:245px;
  overflow:auto;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
}

.role-check,
.role-check-item{
  min-height:38px!important;
  padding:8px 2px!important;
  border-bottom:1px solid rgba(255,255,255,.05)!important;
  background:none!important;
}

.role-check:last-child,
.role-check-item:last-child{
  border-bottom:0!important;
}

/* Bottom save bars are plain dividers */
.settings-bottom-bar{
  min-height:54px!important;
  margin-top:8px!important;
  padding:16px 0 0!important;
  border:0!important;
  border-top:1px solid rgba(255,255,255,.075)!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
}

/* RoleTools help strip: text, not cards */
.dashboard-help-strip{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:26px!important;
  margin:0!important;
  padding:19px 0!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
}

.dashboard-help-strip>div{
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
}

.dashboard-help-strip strong{
  margin-bottom:5px!important;
  font-size:10px!important;
}

.dashboard-help-strip span{
  color:#606460!important;
  font-size:9px!important;
}

/* =========================================================
   TICKET BUTTONS — one clean split row per reason
   ========================================================= */

.ticket-types-section{
  padding-top:48px!important;
}

.ticket-types-head{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:26px!important;
  padding-bottom:20px!important;
  border-bottom:1px solid rgba(255,255,255,.085)!important;
}

.ticket-types-head h2{
  margin:8px 0 0!important;
  font-size:clamp(29px,4vw,46px)!important;
}

.ticket-types-head p{
  max-width:680px;
  margin:10px 0 0!important;
  color:#686c68!important;
  font-size:11px!important;
  line-height:1.55!important;
}

.ticket-types-head .button.ghost{
  border-color:transparent!important;
  background:transparent!important;
  color:#8a8d89!important;
  box-shadow:none!important;
}

.ticket-button-example{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  min-height:50px!important;
  margin:0!important;
  padding:14px 0!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.055)!important;
  border-radius:0!important;
  background:none!important;
}

.ticket-button-example>span{
  margin-right:4px!important;
  color:#555955!important;
  font-size:8px!important;
}

.ticket-button-example>div{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
}

.ticket-button-example>p{
  display:none!important;
}

.ticket-button-example button{
  padding:6px 8px!important;
  border-radius:7px!important;
  font-size:9px!important;
}

.ticket-type-list{
  display:block!important;
  padding-top:0!important;
}

.ticket-type-editor{
  display:grid!important;
  grid-template-columns:minmax(190px,.48fr) minmax(0,1.52fr)!important;
  gap:10px 38px!important;
  margin:0!important;
  padding:28px 0!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
}

.ticket-type-editor-head{
  grid-column:1!important;
  grid-row:1!important;
  align-self:start!important;
  display:grid!important;
  gap:10px!important;
  padding:2px 0 0!important;
  border:0!important;
}

.ticket-type-editor-head>div{
  display:grid!important;
  gap:6px!important;
}

.ticket-type-editor-head strong{
  font-size:15px!important;
  line-height:1.25!important;
}

.type-delete{
  justify-self:start!important;
  padding:0!important;
  color:#8d6262!important;
  font-size:9px!important;
}

.ticket-live-preview{
  grid-column:1!important;
  grid-row:2!important;
  align-self:start!important;
  display:grid!important;
  justify-items:start!important;
  gap:7px!important;
  padding:0!important;
  border:0!important;
  background:none!important;
}

.ticket-live-preview>span{
  color:#555955!important;
  font-size:8px!important;
}

.ticket-live-preview button{
  max-width:100%!important;
}

.ticket-type-form{
  grid-column:2!important;
  grid-row:1 / span 3!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 170px!important;
  gap:11px!important;
  padding:0!important;
}

.ticket-type-form .wide-field{
  grid-column:1/-1!important;
}

.ticket-type-form .toggle-row{
  border-top:1px solid rgba(255,255,255,.055)!important;
  padding-top:12px!important;
}

.ticket-types-empty{
  min-height:100px!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
  border-radius:0!important;
  color:#656965!important;
}

/* =========================================================
   ROLETOOLS lists / join roles / history — flat
   ========================================================= */

.role-browser{
  max-height:330px!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
}

.role-browser-row{
  min-height:47px!important;
  padding:8px 2px!important;
  border-bottom:1px solid rgba(255,255,255,.05)!important;
  background:none!important;
}

.role-browser-row:last-child{
  border-bottom:0!important;
}

.join-role-row{
  padding:14px 0!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;
  border-radius:0!important;
  background:none!important;
}

.roletools-history{
  border:0!important;
  border-radius:0!important;
  background:none!important;
}

.roletools-history-row{
  padding:13px 0!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;
  border-radius:0!important;
  background:none!important;
}

/* Responsive */
@media(max-width:900px){
  .settings-page-head{
    align-items:flex-start!important;
    flex-direction:column!important;
  }

  .settings-actions{
    width:100%!important;
  }

  .settings-card,
  .roletools-card{
    grid-template-columns:1fr!important;
    gap:17px!important;
    padding:25px 0!important;
  }

  .settings-card-heading,
  .settings-card > :not(.settings-card-heading),
  .roletools-card > :not(.settings-card-heading){
    grid-column:1!important;
  }

  .settings-card-heading p{
    max-width:none!important;
  }

  .ticket-type-editor{
    grid-template-columns:1fr!important;
    gap:15px!important;
  }

  .ticket-type-editor-head,
  .ticket-live-preview,
  .ticket-type-form{
    grid-column:1!important;
    grid-row:auto!important;
  }

  .dashboard-help-strip{
    grid-template-columns:1fr!important;
    gap:11px!important;
  }
}

@media(max-width:620px){
  .ticket-types-head{
    align-items:flex-start!important;
    flex-direction:column!important;
  }

  .ticket-type-form{
    grid-template-columns:1fr!important;
  }

  .ticket-type-form .wide-field{
    grid-column:1!important;
  }

  .two-fields,
  .three-fields,
  .roletools-edit-flags{
    grid-template-columns:1fr!important;
  }

  .settings-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
  }

  .settings-actions .button{
    width:100%!important;
  }
}


/* =========================================================
   REACTION ROLES — FLAT MULTI-SERVER DASHBOARD
   ========================================================= */
.rr-workspace{
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  gap:42px;
  padding-top:26px;
}
.rr-panel-sidebar{
  min-width:0;
  padding-right:26px;
  border-right:1px solid rgba(255,255,255,.075);
}
.rr-sidebar-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding-bottom:13px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.rr-sidebar-head>div{display:grid;gap:5px}
.rr-sidebar-head strong{font-size:13px}
.rr-text-action,
.rr-danger-action,
.rr-remove-option{
  border:0;
  background:transparent;
  padding:4px 0;
  font:inherit;
  font-size:9px;
  font-weight:750;
  cursor:pointer;
}
.rr-text-action{color:#858985}
.rr-text-action:hover{color:#f0f0eb}
.rr-danger-action,.rr-remove-option{color:#9b6c6c}
.rr-danger-action:hover,.rr-remove-option:hover{color:#d79595}
.rr-create-panel{
  display:grid;
  gap:10px;
  padding:17px 0 20px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.rr-create-panel[hidden]{display:none!important}
.rr-panel-list{display:grid}
.rr-panel-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:62px;
  padding:12px 2px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.055);
  background:transparent;
  color:#8b8e8a;
  text-align:left;
  cursor:pointer;
}
.rr-panel-row>span{min-width:0;display:grid;gap:4px}
.rr-panel-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#a9aca7;font-size:11px}
.rr-panel-row small{color:#555955;font-size:8px;text-transform:capitalize}
.rr-panel-row b{color:#454845;font-size:16px;font-weight:400}
.rr-panel-row:hover strong,.rr-panel-row.active strong{color:#f0f0eb}
.rr-panel-row.active{box-shadow:inset 2px 0 0 #e9e8e2;padding-left:10px}
.rr-list-empty{padding:20px 0;color:#555955;font-size:9px;line-height:1.5}
.rr-editor{min-width:0}
.rr-empty{padding:58px 0}
.rr-empty h2{margin:8px 0 6px;font-size:32px;letter-spacing:-.045em}
.rr-empty p{margin:0;color:#666a66;font-size:11px}
.rr-flat-section{
  display:grid;
  grid-template-columns:minmax(180px,.52fr) minmax(0,1.48fr);
  gap:40px;
  padding:30px 0;
  border-bottom:1px solid rgba(255,255,255,.075);
}
.rr-flat-section:first-child{padding-top:4px}
.rr-section-copy h2{margin:7px 0 0;font-size:18px;letter-spacing:-.035em}
.rr-section-copy p{max-width:260px;margin:8px 0 0;color:#626662;font-size:10px;line-height:1.55}
.rr-section-controls{min-width:0;display:grid;gap:12px}
.rr-inline-actions{display:flex;align-items:center;gap:15px;padding-top:2px}
.rr-three-fields{display:grid;grid-template-columns:.8fr 1fr .6fr;gap:10px}
.rr-option-list{display:grid}
.rr-option-row{
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  min-height:48px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.055);
}
.rr-option-emoji{font-size:15px;text-align:center}
.rr-option-row>div{display:grid;gap:3px}
.rr-option-row strong{font-size:10px}
.rr-option-row small{color:#565a56;font-size:8px;text-transform:capitalize}
.rr-add-option{display:grid;gap:10px;padding-top:13px}
.rr-publish-status{display:flex;align-items:baseline;gap:9px;min-height:24px}
.rr-publish-status strong{font-size:11px}
.rr-publish-status span{color:#666a66;font-size:9px}
.rr-recent-section{border-bottom:0}
@media(max-width:900px){
  .rr-workspace{grid-template-columns:1fr;gap:28px}
  .rr-panel-sidebar{padding-right:0;border-right:0;border-bottom:1px solid rgba(255,255,255,.075);padding-bottom:14px}
  .rr-panel-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
  .rr-flat-section{grid-template-columns:1fr;gap:17px;padding:25px 0}
  .rr-section-copy p{max-width:none}
}
@media(max-width:620px){
  .rr-panel-list{grid-template-columns:1fr}
  .rr-three-fields,.rr-create-panel .two-fields{grid-template-columns:1fr}
  .rr-inline-actions{align-items:stretch;flex-direction:column}
  .rr-inline-actions .button{width:100%}
}


/* =========================================================
   ALEBOT ORANGE BETA THEME
   ========================================================= */
body{
  background:
    radial-gradient(circle at 50% -12%,rgba(255,138,31,.07),transparent 31%),
    linear-gradient(180deg,#0b0a09 0%,#080808 100%);
}

::selection{
  background:rgba(255,138,31,.32);
  color:#fff;
}

.mini-label,.hero-label{
  color:var(--accent2);
}

.nav-links a:hover,
.nav-links a.active,
.text-link:hover{
  color:var(--accent2);
}

.button.light{
  background:var(--accent);
  color:#130b04;
}
.button.light:hover{
  background:var(--accent2);
}

.button.ghost:hover{
  border-color:var(--accentLine);
  background:var(--accentSoft);
}

.text-link{
  border-bottom-color:rgba(255,138,31,.55);
}

.hero::before,.page-hero::before{
  background:radial-gradient(circle,rgba(255,138,31,.14),transparent 67%);
}

.hero h1 span,.page-hero h1 span{
  color:#a46836;
}

.beta-script{
  position:relative;
  z-index:2;
  margin:0 auto 16px;
  color:var(--accent);
  font-family:"Segoe Script","Snell Roundhand","Brush Script MT","URW Chancery L",cursive;
  font-size:clamp(34px,4.3vw,58px);
  font-weight:500;
  line-height:1;
  letter-spacing:-.035em;
  transform:rotate(-2deg);
  text-shadow:0 0 30px rgba(255,138,31,.16);
}

.launch-strip{
  border-color:rgba(255,138,31,.20);
}

.preview-list code,
.command-chips code{
  border:1px solid rgba(255,138,31,.10);
}

.free-card{
  background:#f3e9dc;
}

.closing-card{
  box-shadow:0 28px 90px rgba(255,138,31,.06);
}

/* =========================================================
   DASHBOARD APPLICATION SHELL
   Inspired by professional control panels, while keeping
   AleBot's own visual identity.
   ========================================================= */
.dashboard-app{
  --sidebar:238px;
  background:#17191e;
  color:#f2f1ec;
}

.dashboard-app .grain{
  opacity:.022;
}

.dashboard-app .site-header{
  left:var(--sidebar);
  width:calc(100% - var(--sidebar));
  background:rgba(24,26,31,.92);
  border-color:rgba(255,255,255,.07);
}

.dashboard-app .dashboard-nav{
  width:100%;
  max-width:none;
  min-height:64px;
  padding:0 28px;
  margin:0;
  display:flex;
  justify-content:flex-end;
}

.dashboard-app .dashboard-header .brand{
  display:none;
}

.dashboard-app .dashboard-back{
  color:#a6a8ad;
  font-size:12px;
  font-weight:700;
}

.dashboard-app .dashboard-back:hover{
  color:var(--accent2);
}

.dashboard-app > main{
  width:auto!important;
  max-width:none!important;
  margin-left:var(--sidebar)!important;
  padding-left:34px!important;
  padding-right:34px!important;
}

.app-sidebar{
  position:fixed;
  inset:0 auto 0 0;
  z-index:70;
  width:var(--sidebar,238px);
  display:flex;
  flex-direction:column;
  overflow:auto;
  background:#111317;
  border-right:1px solid rgba(255,255,255,.075);
}

.app-sidebar-brand{
  min-height:64px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 18px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.app-sidebar-brand img{
  width:30px;
  height:30px;
  object-fit:cover;
  border-radius:8px;
}

.app-sidebar-brand>span{
  font-size:18px;
  font-weight:850;
  letter-spacing:-.035em;
}

.app-sidebar-brand em{
  margin-left:auto;
  padding:4px 6px;
  border:1px solid var(--accentLine);
  border-radius:6px;
  background:var(--accentSoft);
  color:var(--accent2);
  font-size:8px;
  font-style:normal;
  font-weight:900;
  letter-spacing:.08em;
}

.app-sidebar-section{
  padding:18px 10px 0;
}

.app-sidebar-secondary{
  margin-top:auto;
}

.app-sidebar-label{
  display:block;
  padding:0 10px 8px;
  color:#60636a;
  font-size:8px;
  font-weight:900;
  letter-spacing:.16em;
}

.app-nav-item{
  min-height:43px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 10px;
  margin:2px 0;
  border-radius:8px;
  color:#aaaeb4;
  font-size:12px;
  transition:background .16s ease,color .16s ease;
}

.app-nav-item:hover{
  background:rgba(255,255,255,.045);
  color:#fff;
}

.app-nav-item.active{
  background:var(--accentSoft);
  color:#fff4e8;
}

.app-nav-item.active::before{
  content:"";
  width:3px;
  height:20px;
  margin-left:-10px;
  margin-right:7px;
  border-radius:999px;
  background:var(--accent);
}

.app-nav-item.disabled{
  opacity:.45;
  pointer-events:none;
}

.app-nav-icon{
  width:18px;
  display:inline-grid;
  place-items:center;
  color:#777b82;
  font-size:13px;
}

.app-nav-item.active .app-nav-icon{
  color:var(--accent2);
}

.app-nav-item strong{
  font-weight:720;
}

.app-sidebar-foot{
  display:flex;
  align-items:center;
  gap:10px;
  margin:16px 12px 14px;
  padding:13px 12px;
  border-top:1px solid rgba(255,255,255,.07);
  color:#8d9096;
}

.beta-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 14px rgba(255,138,31,.55);
}

.app-sidebar-foot div{
  display:grid;
  gap:2px;
}

.app-sidebar-foot strong{
  color:#c7c8c5;
  font-size:10px;
}

.app-sidebar-foot small{
  color:#656970;
  font-size:8px;
}

/* Dashboard pages */
.dashboard-app .dashboard-page,
.dashboard-app .server-page,
.dashboard-app .moderation-page{
  padding-top:34px;
  padding-bottom:60px;
}

.dashboard-app .dashboard-state{
  min-height:340px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:12px;
  background:#1d2026;
}

.dashboard-app .dashboard-hero,
.dashboard-app .server-topbar{
  padding:0 0 24px;
  border-bottom:1px solid rgba(255,255,255,.075);
}

.dashboard-app .dashboard-hero h1,
.dashboard-app .server-topbar h1{
  font-size:clamp(38px,5vw,58px);
  letter-spacing:-.055em;
}

.dashboard-app .dashboard-user-card{
  border:0;
  background:transparent;
  padding:0;
}

.dashboard-app .dashboard-user-avatar,
.dashboard-app .server-large-icon{
  border-color:rgba(255,138,31,.26);
  background:#20232a;
}

.dashboard-app .plain-button:hover{
  color:var(--accent2);
}

/* Server selector */
.dashboard-app .server-toolbar{
  margin:22px 0 0;
  padding:0 0 16px;
  border-bottom:1px solid rgba(255,255,255,.075);
}

.dashboard-app .server-search{
  border-radius:8px;
  background:#20232a;
  border-color:rgba(255,255,255,.08);
}

.dashboard-app .guild-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 28px;
  margin-top:10px;
}

.dashboard-app .guild-card{
  min-height:94px;
  margin:0;
  padding:17px 0;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.075);
  border-radius:0;
  background:transparent;
}

.dashboard-app .guild-card:hover{
  transform:none;
  background:transparent;
}

.dashboard-app .guild-manage-button{
  border-color:rgba(255,138,31,.24);
  color:var(--accent2);
  background:var(--accentSoft);
}

.dashboard-app .owner-pill{
  border-color:rgba(255,138,31,.24);
  color:var(--accent2);
  background:var(--accentSoft);
}

/* Server overview */
.dashboard-app .server-section-heading{
  margin-top:32px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.075);
}

.dashboard-app .server-section-heading h2{
  font-size:32px;
}

.dashboard-app .dashboard-module-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 32px;
  margin-top:0;
}

.dashboard-app .dashboard-module{
  min-height:142px;
  padding:23px 2px 20px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.075);
  border-radius:0;
  background:transparent;
}

.dashboard-app .dashboard-module:hover{
  transform:none;
  background:rgba(255,255,255,.018);
}

.dashboard-app .module-topline{
  margin-bottom:12px;
}

.dashboard-app .module-topline>span{
  display:none;
}

.dashboard-app .module-status{
  min-height:22px;
  border-color:rgba(255,138,31,.22);
  background:var(--accentSoft);
  color:var(--accent2);
}

.dashboard-app .module-status.discord{
  border-color:rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
  color:#70737a;
}

.dashboard-app .dashboard-module h2{
  font-size:20px;
}

.dashboard-app .dashboard-module p{
  max-width:470px;
  color:#767a81;
}

.dashboard-app .module-link{
  color:var(--accent2);
}

/* =========================================================
   CLEAN SETTINGS SYSTEM — all live dashboard modules
   ========================================================= */
.dashboard-app .settings-page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  padding:3px 0 27px;
  border-bottom:1px solid rgba(255,255,255,.075);
}

.dashboard-app .settings-page-head h1{
  margin:7px 0 0;
  font-size:clamp(36px,4.5vw,54px);
  line-height:.98;
  letter-spacing:-.052em;
}

.dashboard-app .settings-page-head p{
  max-width:650px;
  margin:9px 0 0;
  color:#777a81;
}

.dashboard-app .settings-actions{
  display:flex;
  align-items:center;
  gap:7px;
}

.dashboard-app .settings-actions .button{
  min-height:39px;
  padding:0 14px;
  border-radius:8px;
  font-size:11px;
}

.dashboard-app .metadata-refresh,
.dashboard-app .settings-actions .button.ghost{
  border-color:rgba(255,255,255,.08);
  background:#20232a;
}

.dashboard-app .settings-grid,
.dashboard-app .roletools-grid{
  display:block;
  margin-top:0;
}

.dashboard-app .settings-card,
.dashboard-app .roletools-card{
  display:grid;
  grid-template-columns:minmax(210px,.72fr) minmax(0,1.28fr);
  gap:12px 46px;
  min-height:0;
  margin:0;
  padding:29px 0;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.07);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.dashboard-app .settings-card-heading{
  grid-column:1;
  align-self:start;
  display:block;
  padding:2px 0 0;
}

.dashboard-app .settings-card-heading .settings-number{
  display:none;
}

.dashboard-app .settings-card-heading h2{
  margin:0;
  font-size:18px;
  letter-spacing:-.025em;
}

.dashboard-app .settings-card-heading p{
  max-width:315px;
  margin:7px 0 0;
  color:#6f737a;
  font-size:10px;
  line-height:1.55;
}

.dashboard-app .settings-card > :not(.settings-card-heading),
.dashboard-app .roletools-card > :not(.settings-card-heading){
  grid-column:2;
  min-width:0;
}

.dashboard-app .field{
  margin-top:0;
}

.dashboard-app .field>span{
  color:#a0a3a8;
  font-size:10px;
}

.dashboard-app .field input,
.dashboard-app .field select,
.dashboard-app .field textarea,
.dashboard-app .role-search{
  min-height:43px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:7px;
  background:#20232a;
  color:#f1f0eb;
  box-shadow:none;
}

.dashboard-app .field textarea{
  min-height:82px;
}

.dashboard-app .field input:focus,
.dashboard-app .field select:focus,
.dashboard-app .field textarea:focus,
.dashboard-app .role-search:focus{
  border-color:rgba(255,138,31,.55);
  outline:none;
}

.dashboard-app .field small,
.dashboard-app .field-help{
  color:#5f636a;
}

.dashboard-app .toggle-row{
  min-height:56px;
  padding:2px 0;
  border:0;
  border-radius:0;
  background:transparent;
}

.dashboard-app .toggle-ui{
  background:#33363d;
}

.dashboard-app .toggle-row input:checked + .toggle-ui{
  background:var(--accent);
}

.dashboard-app .role-check-list{
  max-height:250px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}

.dashboard-app .role-check,
.dashboard-app .role-check-item{
  min-height:37px;
  padding:7px 2px;
  border-bottom:1px solid rgba(255,255,255,.045);
  background:transparent;
}

.dashboard-app .settings-bottom-bar{
  min-height:52px;
  margin-top:8px;
  padding:14px 0 0;
  border:0;
  border-top:1px solid rgba(255,255,255,.07);
  border-radius:0;
  background:transparent;
}

/* RoleTools helper area */
.dashboard-app .dashboard-help-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  margin:0;
  padding:17px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.dashboard-app .dashboard-help-strip>div{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}

/* Ticket types: full-width, readable editors */
.dashboard-app .ticket-types-section{
  padding-top:45px;
}

.dashboard-app .ticket-types-head{
  align-items:flex-end;
  padding-bottom:19px;
  border-bottom:1px solid rgba(255,255,255,.075);
}

.dashboard-app .ticket-types-head h2{
  font-size:clamp(28px,3.8vw,43px);
}

.dashboard-app .ticket-types-head p{
  max-width:760px;
  color:#70747b;
}

.dashboard-app .ticket-types-head .button.ghost{
  border-color:rgba(255,138,31,.20);
  background:var(--accentSoft);
  color:var(--accent2);
}

.dashboard-app .ticket-button-example{
  margin:0;
  padding:13px 0;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.055);
  border-radius:0;
  background:transparent;
}

.dashboard-app .ticket-type-list{
  display:block;
  padding:0;
}

.dashboard-app .ticket-type-editor{
  display:block;
  margin:0;
  padding:24px 0 28px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.075);
  border-radius:0;
  background:transparent;
}

.dashboard-app .ticket-type-editor-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 0 14px;
}

.dashboard-app .ticket-type-editor-head strong{
  font-size:15px;
}

.dashboard-app .ticket-live-preview{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 0 16px;
  border-bottom:1px solid rgba(255,255,255,.045);
}

.dashboard-app .ticket-type-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px 18px;
  padding-top:17px;
}

.dashboard-app .ticket-type-form .wide-field{
  grid-column:1/-1;
}

.dashboard-app .ticket-type-form .toggle-row{
  grid-column:1/-1;
  border-top:1px solid rgba(255,255,255,.045);
  padding-top:12px;
}

.dashboard-app .type-delete{
  color:#a76d68;
}

/* RoleTools */
.dashboard-app .role-browser{
  max-height:320px;
  border:0;
  border-radius:0;
  background:transparent;
}

.dashboard-app .role-browser-row,
.dashboard-app .join-role-row,
.dashboard-app .roletools-history-row{
  padding:11px 2px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.05);
  border-radius:0;
  background:transparent;
}

/* Reaction roles internal workspace */
.dashboard-app .rr-workspace{
  grid-template-columns:260px minmax(0,1fr);
  gap:0;
  margin-top:20px;
  border-top:1px solid rgba(255,255,255,.075);
}

.dashboard-app .rr-panel-sidebar{
  padding:22px 22px 22px 0;
  border:0;
  border-right:1px solid rgba(255,255,255,.075);
  border-radius:0;
  background:transparent;
}

.dashboard-app .rr-editor{
  padding-left:28px;
}

.dashboard-app .rr-flat-section{
  border-bottom-color:rgba(255,255,255,.065);
}

.dashboard-app .rr-panel-item,
.dashboard-app .rr-create-panel{
  border-radius:7px;
  background:#20232a;
  border-color:rgba(255,255,255,.075);
}

.dashboard-app .rr-panel-item.active{
  border-color:rgba(255,138,31,.35);
  background:var(--accentSoft);
}

.dashboard-app .rr-text-action{
  color:var(--accent2);
}

/* Error / success feedback */
.dashboard-app .auth-error{
  border-color:rgba(255,104,92,.28);
  background:rgba(255,104,92,.07);
}

.dashboard-app .settings-success{
  border-color:rgba(255,138,31,.27);
  background:rgba(255,138,31,.09);
  color:#ffd9b4;
}

/* =========================================================
   RESPONSIVE DASHBOARD
   ========================================================= */
@media(max-width:980px){
  .dashboard-app{
    --sidebar:0px;
  }

  .app-sidebar{
    display:none;
  }

  .dashboard-app .site-header{
    left:0;
    width:100%;
  }

  .dashboard-app > main{
    margin-left:0!important;
    padding-left:22px!important;
    padding-right:22px!important;
  }

  .dashboard-app .dashboard-module-grid,
  .dashboard-app .guild-grid{
    grid-template-columns:1fr;
  }

  .dashboard-app .settings-card,
  .dashboard-app .roletools-card{
    grid-template-columns:1fr;
    gap:16px;
    padding:24px 0;
  }

  .dashboard-app .settings-card-heading,
  .dashboard-app .settings-card > :not(.settings-card-heading),
  .dashboard-app .roletools-card > :not(.settings-card-heading){
    grid-column:1;
  }

  .dashboard-app .rr-workspace{
    grid-template-columns:1fr;
  }

  .dashboard-app .rr-panel-sidebar{
    padding-right:0;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.075);
  }

  .dashboard-app .rr-editor{
    padding-left:0;
  }
}

@media(max-width:680px){
  .dashboard-app .settings-page-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .dashboard-app .settings-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .dashboard-app .settings-actions .button:last-child{
    grid-column:1/-1;
  }

  .dashboard-app .ticket-type-form,
  .dashboard-app .two-fields,
  .dashboard-app .three-fields,
  .dashboard-app .roletools-edit-flags{
    grid-template-columns:1fr!important;
  }

  .dashboard-app .ticket-type-form .wide-field{
    grid-column:1;
  }

  .dashboard-app .dashboard-help-strip{
    grid-template-columns:1fr;
    gap:12px;
  }

  .beta-script{
    font-size:37px;
  }
}


/* =================================================================
   ALEBOT STUDIO DASHBOARD
   Same visual language as the public website:
   deep black, off-white typography, thin rules, orange as an accent.
   ================================================================= */

.dashboard-app{
  --dash-rail:220px;
  background:
    radial-gradient(circle at 78% 5%,rgba(255,138,31,.055),transparent 27%),
    linear-gradient(180deg,#0a0b0b 0%,#080909 100%) !important;
  color:var(--text);
}

/* Header is again a normal AleBot website header. */
.dashboard-app .site-header{
  position:sticky !important;
  left:auto !important;
  width:100% !important;
  top:0;
  background:rgba(9,10,10,.86) !important;
  border-bottom:1px solid var(--line) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.dashboard-app .dashboard-nav{
  width:min(calc(100% - 44px),var(--max)) !important;
  max-width:var(--max) !important;
  min-height:72px !important;
  margin-inline:auto !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  align-items:center !important;
  gap:24px !important;
}

.dashboard-app .dashboard-header .brand{
  display:inline-flex !important;
}

.dashboard-context{
  justify-self:center;
  display:inline-flex;
  align-items:center;
  min-height:31px;
  padding:0 11px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  color:#8d908c;
  background:rgba(255,255,255,.018);
  font-size:9px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.dashboard-app .dashboard-back{
  justify-self:end;
  color:#9da09c !important;
  font-size:11px !important;
  font-weight:750 !important;
  transition:color .16s ease;
}

.dashboard-app .dashboard-back:hover{
  color:var(--accent2) !important;
}

/* The sidebar and page now share ONE public-site shell. */
.dashboard-stage{
  display:grid;
  grid-template-columns:var(--dash-rail) minmax(0,1fr);
  align-items:start;
  gap:42px;
  padding-top:30px;
  padding-bottom:72px;
}

.dashboard-app .app-sidebar{
  position:sticky !important;
  inset:auto !important;
  top:102px !important;
  z-index:10 !important;
  width:auto !important;
  max-height:calc(100vh - 124px);
  overflow:auto;
  display:flex;
  flex-direction:column;
  padding:4px 26px 4px 0;
  background:transparent !important;
  border:0 !important;
  border-right:1px solid rgba(255,255,255,.075) !important;
}

.dashboard-app .app-sidebar-brand{
  min-height:auto !important;
  margin:0 0 24px;
  padding:0 10px 20px !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
}

.dashboard-app .app-sidebar-brand img{
  width:34px !important;
  height:34px !important;
  border-radius:9px !important;
}

.dashboard-app .app-sidebar-brand>span{
  font-size:17px !important;
  color:#f2f1ec;
}

.dashboard-app .app-sidebar-brand em{
  border-color:rgba(255,138,31,.24) !important;
  background:rgba(255,138,31,.07) !important;
  color:var(--accent2) !important;
}

.dashboard-app .app-sidebar-section{
  padding:0 0 22px !important;
}

.dashboard-app .app-sidebar-secondary{
  margin-top:12px !important;
}

.dashboard-app .app-sidebar-label{
  padding:0 10px 9px !important;
  color:#505350 !important;
  font-size:8px !important;
  letter-spacing:.16em !important;
}

.dashboard-app .app-nav-item{
  position:relative;
  min-height:42px !important;
  margin:1px 0 !important;
  padding:0 10px !important;
  border-radius:7px !important;
  color:#858984 !important;
  background:transparent !important;
  font-size:11px !important;
}

.dashboard-app .app-nav-item:hover{
  color:#e9eae4 !important;
  background:rgba(255,255,255,.025) !important;
}

.dashboard-app .app-nav-item.active{
  color:#f6eee5 !important;
  background:linear-gradient(90deg,rgba(255,138,31,.10),rgba(255,138,31,.025)) !important;
}

.dashboard-app .app-nav-item.active::before{
  content:"";
  position:absolute;
  left:0;
  width:2px !important;
  height:18px !important;
  margin:0 !important;
  border-radius:999px;
  background:var(--accent) !important;
}

.dashboard-app .app-nav-icon{
  width:17px !important;
  color:#666a66 !important;
}

.dashboard-app .app-nav-item.active .app-nav-icon{
  color:var(--accent2) !important;
}

.dashboard-app .app-sidebar-foot{
  margin:8px 0 0 !important;
  padding:18px 10px 0 !important;
  border-top:1px solid rgba(255,255,255,.06) !important;
}

.dashboard-app .beta-dot{
  background:var(--accent) !important;
}

/* Main dashboard has no arbitrary full-screen offset anymore. */
.dashboard-app .dashboard-page,
.dashboard-app .server-page,
.dashboard-app .moderation-page{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  min-width:0;
}

/* Shared loading / error states */
.dashboard-app .dashboard-state{
  min-height:330px !important;
  display:grid;
  place-items:center;
  align-content:center;
  gap:12px;
  border:1px solid rgba(255,255,255,.075) !important;
  border-radius:22px !important;
  background:
    radial-gradient(circle at 50% 20%,rgba(255,138,31,.055),transparent 48%),
    linear-gradient(145deg,#101111,#0c0d0d) !important;
}

.dashboard-app .loading-ring{
  border-color:rgba(255,255,255,.12) !important;
  border-top-color:var(--accent) !important;
}

/* Root dashboard hero */
.dashboard-app .dashboard-hero{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:end !important;
  gap:30px !important;
  padding:28px 0 30px !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}

.dashboard-app .dashboard-hero h1{
  margin:8px 0 0 !important;
  font-size:clamp(52px,6.1vw,82px) !important;
  line-height:.92 !important;
  letter-spacing:-.065em !important;
  font-weight:850 !important;
}

.dashboard-app .dashboard-hero p{
  max-width:630px;
  margin:18px 0 0 !important;
  color:#8d908c !important;
  font-size:14px !important;
  line-height:1.6 !important;
}

.dashboard-app .dashboard-user-card{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  align-items:center !important;
  gap:4px 11px !important;
  min-width:220px;
  padding:0 0 2px !important;
  border:0 !important;
  background:transparent !important;
}

.dashboard-app .dashboard-user-avatar{
  grid-row:1 / span 2;
  width:42px !important;
  height:42px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:50% !important;
  overflow:hidden;
  background:#111313 !important;
}

.dashboard-app .dashboard-user-card>div:nth-child(2){
  display:grid;
}

.dashboard-app .dashboard-user-card span{
  color:#5d615d !important;
  font-size:8px !important;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.dashboard-app .dashboard-user-card strong{
  font-size:12px !important;
}

.dashboard-app .dashboard-user-card .plain-button{
  grid-column:2;
  justify-self:start;
  padding:0 !important;
  color:#777b77 !important;
  font-size:9px !important;
}

/* Search + count */
.dashboard-app .server-toolbar{
  min-height:68px !important;
  display:grid !important;
  grid-template-columns:minmax(220px,420px) 1fr !important;
  align-items:center !important;
  gap:24px !important;
  margin:0 !important;
  padding:17px 0 !important;
  border-bottom:1px solid rgba(255,255,255,.07) !important;
}

.dashboard-app .server-search{
  min-height:42px !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:10px !important;
  background:#101111 !important;
}

.dashboard-app .server-search:focus-within{
  border-color:rgba(255,138,31,.35) !important;
}

.dashboard-app .server-search input{
  color:#e8e9e3 !important;
}

.dashboard-app .server-toolbar-actions{
  justify-self:end;
  color:#626662 !important;
  font-size:9px !important;
}

.dashboard-app .plain-button{
  color:#858984 !important;
}

.dashboard-app .plain-button:hover{
  color:var(--accent2) !important;
}

/* Servers: one clean full-width list instead of a sparse 2-col grid */
.dashboard-app .guild-grid{
  display:block !important;
  margin:0 !important;
}

.dashboard-app .guild-card{
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.075) !important;
  border-radius:0 !important;
  background:transparent !important;
}

.dashboard-app .guild-card-link{
  min-height:92px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:24px;
  padding:16px 8px 16px 0;
  transition:padding .16s ease,background .16s ease;
}

.dashboard-app .guild-card-link:hover{
  padding-left:8px;
  padding-right:2px;
  background:linear-gradient(90deg,rgba(255,138,31,.025),transparent 70%);
}

.dashboard-app .guild-card-main{
  display:flex;
  align-items:center;
  gap:15px;
  min-width:0;
}

.dashboard-app .guild-icon{
  width:54px !important;
  height:54px !important;
  flex:0 0 54px;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:15px !important;
  background:#101111 !important;
  overflow:hidden;
}

.dashboard-app .guild-copy{
  min-width:0;
}

.dashboard-app .guild-title-line{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}

.dashboard-app .guild-title-line h3{
  overflow:hidden;
  margin:0 !important;
  color:#f0f1eb;
  font-size:15px !important;
  font-weight:780 !important;
  letter-spacing:-.025em !important;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.dashboard-app .guild-copy p{
  margin:6px 0 0 !important;
  color:#666a66 !important;
  font-size:10px !important;
}

.dashboard-app .owner-pill,
.dashboard-app .access-pill{
  flex:none;
  min-height:20px;
  display:inline-flex;
  align-items:center;
  padding:0 7px;
  border:1px solid rgba(255,138,31,.20) !important;
  border-radius:999px;
  background:rgba(255,138,31,.07) !important;
  color:var(--accent2) !important;
  font-size:7px !important;
  font-weight:900;
  letter-spacing:.08em;
}

.dashboard-app .access-pill{
  border-color:rgba(255,255,255,.07) !important;
  background:rgba(255,255,255,.018) !important;
  color:#777b77 !important;
}

.dashboard-app .guild-row-arrow{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  color:#8e918d;
  transition:color .16s ease,border-color .16s ease,transform .16s ease;
}

.dashboard-app .guild-card-link:hover .guild-row-arrow{
  transform:translateX(2px);
  border-color:rgba(255,138,31,.28);
  color:var(--accent2);
}

.dashboard-app .guild-manage-button{
  display:none !important;
}

/* Server overview hero */
.dashboard-app .server-topbar{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:end !important;
  gap:28px !important;
  padding:28px 0 30px !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}

.dashboard-app .server-identity{
  align-items:center;
  gap:17px !important;
}

.dashboard-app .server-large-icon{
  width:68px !important;
  height:68px !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:18px !important;
  background:#101111 !important;
}

.dashboard-app .server-topbar h1{
  margin:7px 0 0 !important;
  font-size:clamp(42px,5vw,67px) !important;
  line-height:.94 !important;
  letter-spacing:-.06em !important;
}

.dashboard-app .server-account{
  color:#6e726e !important;
  font-size:9px !important;
}

.dashboard-app .server-section-heading{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(260px,430px) !important;
  align-items:end !important;
  gap:30px !important;
  margin:0 !important;
  padding:28px 0 17px !important;
  border-bottom:1px solid rgba(255,255,255,.075) !important;
}

.dashboard-app .server-section-heading h2{
  margin:7px 0 0 !important;
  font-size:31px !important;
  letter-spacing:-.045em !important;
}

.dashboard-app .server-section-heading>p{
  justify-self:end;
  margin:0 !important;
  color:#6c706c !important;
  font-size:10px !important;
  line-height:1.55 !important;
  text-align:right;
}

/* Module list is organized like settings/navigation, not dashboard cards */
.dashboard-app .dashboard-module-grid{
  display:block !important;
  margin:0 !important;
}

.dashboard-app .dashboard-module{
  min-height:0 !important;
  display:grid !important;
  grid-template-columns:160px minmax(0,1fr) auto !important;
  grid-template-rows:auto auto !important;
  align-items:center !important;
  gap:4px 28px !important;
  padding:19px 4px 19px 0 !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.07) !important;
  border-radius:0 !important;
  background:transparent !important;
  transition:padding .16s ease,background .16s ease !important;
}

.dashboard-app a.dashboard-module:hover{
  transform:none !important;
  padding-left:8px !important;
  background:linear-gradient(90deg,rgba(255,138,31,.025),transparent 68%) !important;
}

.dashboard-app .dashboard-module .module-topline{
  grid-column:1;
  grid-row:1 / span 2;
  justify-content:flex-start !important;
  margin:0 !important;
}

.dashboard-app .module-topline>span{
  display:none !important;
}

.dashboard-app .module-status{
  min-height:22px !important;
  padding:0 8px !important;
  border:1px solid rgba(255,138,31,.20) !important;
  border-radius:999px !important;
  background:rgba(255,138,31,.07) !important;
  color:var(--accent2) !important;
  font-size:7px !important;
}

.dashboard-app .module-status.discord{
  border-color:rgba(255,255,255,.07) !important;
  background:rgba(255,255,255,.018) !important;
  color:#6f736f !important;
}

.dashboard-app .dashboard-module h2{
  grid-column:2;
  grid-row:1;
  margin:0 !important;
  font-size:16px !important;
  letter-spacing:-.025em !important;
}

.dashboard-app .dashboard-module p{
  grid-column:2;
  grid-row:2;
  max-width:none !important;
  margin:3px 0 0 !important;
  color:#666a66 !important;
  font-size:10px !important;
}

.dashboard-app .module-link{
  grid-column:3;
  grid-row:1 / span 2;
  margin:0 !important;
  color:#838783 !important;
  font-size:9px !important;
}

.dashboard-app a.dashboard-module:hover .module-link{
  color:var(--accent2) !important;
}

/* Settings pages: editorial rows, same exact controls/IDs */
.dashboard-app .settings-page-head{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:end !important;
  gap:30px !important;
  padding:28px 0 27px !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}

.dashboard-app .settings-page-head h1{
  margin:7px 0 0 !important;
  font-size:clamp(42px,5vw,65px) !important;
  line-height:.94 !important;
  letter-spacing:-.06em !important;
}

.dashboard-app .settings-page-head p{
  max-width:620px !important;
  margin:12px 0 0 !important;
  color:#858985 !important;
  font-size:12px !important;
  line-height:1.55 !important;
}

.dashboard-app .settings-actions{
  display:flex !important;
  gap:7px !important;
}

.dashboard-app .settings-actions .button{
  min-height:40px !important;
  padding:0 13px !important;
  border-radius:999px !important;
  font-size:10px !important;
}

.dashboard-app .settings-actions .button.light{
  background:var(--accent) !important;
  color:#160b02 !important;
}

.dashboard-app .settings-actions .button.ghost,
.dashboard-app .metadata-refresh{
  border-color:rgba(255,255,255,.08) !important;
  background:rgba(255,255,255,.018) !important;
}

.dashboard-app .settings-grid,
.dashboard-app .roletools-grid{
  display:block !important;
  margin:0 !important;
}

.dashboard-app .settings-card,
.dashboard-app .roletools-card{
  display:grid !important;
  grid-template-columns:minmax(190px,.64fr) minmax(0,1.36fr) !important;
  gap:14px 46px !important;
  min-height:0 !important;
  margin:0 !important;
  padding:29px 0 !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.07) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.dashboard-app .settings-card-heading{
  grid-column:1 !important;
  align-self:start;
  padding:2px 0 0 !important;
}

.dashboard-app .settings-card-heading .settings-number{
  display:none !important;
}

.dashboard-app .settings-card-heading h2{
  margin:0 !important;
  font-size:17px !important;
  letter-spacing:-.03em !important;
}

.dashboard-app .settings-card-heading p{
  max-width:270px !important;
  margin:7px 0 0 !important;
  color:#616561 !important;
  font-size:9px !important;
  line-height:1.55 !important;
}

.dashboard-app .settings-card > :not(.settings-card-heading),
.dashboard-app .roletools-card > :not(.settings-card-heading){
  grid-column:2 !important;
}

.dashboard-app .field input,
.dashboard-app .field select,
.dashboard-app .field textarea,
.dashboard-app .role-search{
  background:#101111 !important;
  border:1px solid rgba(255,255,255,.085) !important;
  border-radius:10px !important;
  color:#ecece7 !important;
}

.dashboard-app .field input:focus,
.dashboard-app .field select:focus,
.dashboard-app .field textarea:focus,
.dashboard-app .role-search:focus{
  border-color:rgba(255,138,31,.38) !important;
}

.dashboard-app .toggle-row{
  min-height:55px !important;
  padding:2px 0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}

.dashboard-app .toggle-row input:checked + .toggle-ui{
  background:var(--accent) !important;
}

.dashboard-app .role-check-list{
  max-height:245px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}

.dashboard-app .role-check,
.dashboard-app .role-check-item{
  min-height:37px !important;
  padding:7px 2px !important;
  border-bottom:1px solid rgba(255,255,255,.045) !important;
  background:transparent !important;
}

.dashboard-app .settings-bottom-bar{
  min-height:53px !important;
  margin-top:8px !important;
  padding:14px 0 0 !important;
  border:0 !important;
  border-top:1px solid rgba(255,255,255,.07) !important;
  border-radius:0 !important;
  background:transparent !important;
}

/* Tickets: retain the working editor structure but make it spacious. */
.dashboard-app .ticket-types-section{
  padding-top:46px !important;
}

.dashboard-app .ticket-types-head{
  align-items:end !important;
  padding-bottom:18px !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}

.dashboard-app .ticket-types-head h2{
  margin:7px 0 0 !important;
  font-size:clamp(30px,4vw,45px) !important;
  letter-spacing:-.05em !important;
}

.dashboard-app .ticket-types-head p{
  max-width:680px !important;
  color:#6d716d !important;
}

.dashboard-app .ticket-button-example{
  margin:0 !important;
  padding:14px 0 !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.055) !important;
  border-radius:0 !important;
  background:transparent !important;
}

.dashboard-app .ticket-type-list{
  display:block !important;
  padding:0 !important;
}

.dashboard-app .ticket-type-editor{
  display:block !important;
  margin:0 !important;
  padding:25px 0 30px !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.075) !important;
  border-radius:0 !important;
  background:transparent !important;
}

.dashboard-app .ticket-type-editor-head{
  padding:0 0 15px !important;
}

.dashboard-app .ticket-live-preview{
  padding:0 0 16px !important;
  border-bottom:1px solid rgba(255,255,255,.045) !important;
}

.dashboard-app .ticket-type-form{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:13px 18px !important;
  padding-top:17px !important;
}

.dashboard-app .ticket-type-form .wide-field{
  grid-column:1/-1 !important;
}

.dashboard-app .ticket-type-form .toggle-row{
  grid-column:1/-1 !important;
}

/* RoleTools / RR keep working but now match the same rules. */
.dashboard-app .dashboard-help-strip{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:28px !important;
  margin:0 !important;
  padding:16px 0 !important;
  border-bottom:1px solid rgba(255,255,255,.07) !important;
}

.dashboard-app .dashboard-help-strip>div{
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}

.dashboard-app .role-browser,
.dashboard-app .roletools-history{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}

.dashboard-app .role-browser-row,
.dashboard-app .join-role-row,
.dashboard-app .roletools-history-row{
  padding:11px 2px !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.05) !important;
  border-radius:0 !important;
  background:transparent !important;
}

.dashboard-app .rr-workspace{
  grid-template-columns:240px minmax(0,1fr) !important;
  gap:0 !important;
  margin-top:18px !important;
  border-top:1px solid rgba(255,255,255,.07) !important;
}

.dashboard-app .rr-panel-sidebar{
  padding:22px 22px 22px 0 !important;
  border:0 !important;
  border-right:1px solid rgba(255,255,255,.07) !important;
  border-radius:0 !important;
  background:transparent !important;
}

.dashboard-app .rr-editor{
  padding-left:28px !important;
}

.dashboard-app .rr-panel-item,
.dashboard-app .rr-create-panel{
  border-color:rgba(255,255,255,.075) !important;
  border-radius:10px !important;
  background:#101111 !important;
}

.dashboard-app .rr-panel-item.active{
  border-color:rgba(255,138,31,.25) !important;
  background:rgba(255,138,31,.06) !important;
}

/* Feedback */
.dashboard-app .auth-error{
  border-color:rgba(255,93,82,.22) !important;
  background:rgba(255,93,82,.055) !important;
}

.dashboard-app .settings-success{
  border-color:rgba(255,138,31,.22) !important;
  background:rgba(255,138,31,.06) !important;
  color:#ffd2a8 !important;
}

/* Mobile: rail becomes a horizontal module bar instead of disappearing. */
@media(max-width:920px){
  .dashboard-stage{
    display:block;
    padding-top:18px;
  }

  .dashboard-app .app-sidebar{
    position:sticky !important;
    top:72px !important;
    z-index:35 !important;
    max-height:none !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:5px;
    overflow-x:auto !important;
    margin:0 0 22px;
    padding:10px 0 !important;
    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,.075) !important;
    background:rgba(9,10,10,.94) !important;
    scrollbar-width:none;
  }

  .dashboard-app .app-sidebar::-webkit-scrollbar{
    display:none;
  }

  .dashboard-app .app-sidebar-brand,
  .dashboard-app .app-sidebar-label,
  .dashboard-app .app-sidebar-foot{
    display:none !important;
  }

  .dashboard-app .app-sidebar-section{
    flex:none;
    display:flex;
    gap:4px;
    padding:0 !important;
  }

  .dashboard-app .app-sidebar-secondary{
    margin:0 !important;
  }

  .dashboard-app .app-nav-item{
    flex:none;
    min-height:36px !important;
    padding:0 11px !important;
    border:1px solid rgba(255,255,255,.06);
    border-radius:999px !important;
  }

  .dashboard-app .app-nav-item.active::before{
    display:none;
  }

  .dashboard-app .dashboard-hero,
  .dashboard-app .server-topbar,
  .dashboard-app .settings-page-head{
    grid-template-columns:1fr !important;
    align-items:start !important;
  }

  .dashboard-app .dashboard-user-card{
    justify-self:start;
  }

  .dashboard-app .server-section-heading{
    grid-template-columns:1fr !important;
  }

  .dashboard-app .server-section-heading>p{
    justify-self:start !important;
    text-align:left !important;
  }

  .dashboard-app .settings-card,
  .dashboard-app .roletools-card{
    grid-template-columns:1fr !important;
    gap:16px !important;
    padding:24px 0 !important;
  }

  .dashboard-app .settings-card-heading,
  .dashboard-app .settings-card > :not(.settings-card-heading),
  .dashboard-app .roletools-card > :not(.settings-card-heading){
    grid-column:1 !important;
  }

  .dashboard-app .rr-workspace{
    grid-template-columns:1fr !important;
  }

  .dashboard-app .rr-panel-sidebar{
    padding-right:0 !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(255,255,255,.07) !important;
  }

  .dashboard-app .rr-editor{
    padding-left:0 !important;
  }
}

@media(max-width:640px){
  .dashboard-app .dashboard-nav{
    grid-template-columns:1fr auto !important;
  }

  .dashboard-context{
    display:none;
  }

  .dashboard-app .dashboard-hero h1{
    font-size:52px !important;
  }

  .dashboard-app .server-toolbar{
    grid-template-columns:1fr !important;
  }

  .dashboard-app .server-toolbar-actions{
    justify-self:start;
  }

  .dashboard-app .dashboard-module{
    grid-template-columns:100px minmax(0,1fr) !important;
  }

  .dashboard-app .module-link{
    display:none !important;
  }

  .dashboard-app .ticket-type-form,
  .dashboard-app .two-fields,
  .dashboard-app .three-fields,
  .dashboard-app .roletools-edit-flags{
    grid-template-columns:1fr !important;
  }

  .dashboard-app .ticket-type-form .wide-field{
    grid-column:1 !important;
  }

  .dashboard-app .settings-actions{
    width:100%;
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .dashboard-app .settings-actions .button{
    width:100%;
  }

  .dashboard-app .dashboard-help-strip{
    grid-template-columns:1fr !important;
    gap:11px !important;
  }
}


/* ===================================================================
   ALEBOT FLOW DASHBOARD — FINAL OVERRIDES
   Research direction: quieter chrome, stronger hierarchy, consistent
   spacing, content-first navigation, custom rich selects.
   =================================================================== */

.dashboard-app{
  --flow-bg:#080909;
  --flow-surface:#0d0f0f;
  --flow-surface-2:#111313;
  --flow-surface-3:#161818;
  --flow-line:rgba(255,255,255,.075);
  --flow-line-strong:rgba(255,255,255,.12);
  --flow-text:#f5f3ec;
  --flow-muted:#858984;
  --flow-dim:#555a55;
  --flow-orange:#ff8617;
  --flow-orange-2:#ffad62;
  --flow-orange-soft:rgba(255,134,23,.095);
  background:
    radial-gradient(950px 520px at 74% -8%,rgba(255,134,23,.075),transparent 60%),
    radial-gradient(700px 480px at -10% 30%,rgba(255,255,255,.025),transparent 65%),
    var(--flow-bg)!important;
}

/* Header: minimal public-site chrome */
.dashboard-app .site-header{
  position:sticky!important;
  top:0!important;
  z-index:80!important;
  background:rgba(8,9,9,.82)!important;
  border-bottom:1px solid var(--flow-line)!important;
  backdrop-filter:blur(22px) saturate(130%);
  -webkit-backdrop-filter:blur(22px) saturate(130%);
}

.dashboard-app .dashboard-nav{
  min-height:68px!important;
}

.dashboard-app .brand{
  font-size:17px!important;
}

.dashboard-context{
  justify-self:center!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-height:32px!important;
  padding:0 11px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#5f645f!important;
  font-size:9px!important;
  font-weight:750!important;
  letter-spacing:.08em!important;
  text-transform:none!important;
}

.dashboard-context i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--flow-orange);
  box-shadow:0 0 14px rgba(255,134,23,.5);
}

.dashboard-context b{
  color:#999d98;
  font-weight:750;
}

.dashboard-context>span{
  color:#424642;
}

.dashboard-app .dashboard-back{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  color:#777c77!important;
}

.dashboard-app .dashboard-back::before{
  content:"←";
  color:#555a55;
}

/* Main shell: sidebar is navigation, not a second product. */
.dashboard-stage{
  grid-template-columns:188px minmax(0,1fr)!important;
  gap:54px!important;
  padding-top:34px!important;
}

.dashboard-app .app-sidebar{
  top:102px!important;
  padding:0 24px 10px 0!important;
  border-right:1px solid var(--flow-line)!important;
}

.dashboard-app .app-sidebar-brand{
  margin-bottom:22px!important;
  padding:0 8px 18px!important;
  border-bottom:1px solid var(--flow-line)!important;
}

.dashboard-app .app-sidebar-brand img{
  width:29px!important;
  height:29px!important;
  border-radius:8px!important;
}

.dashboard-app .app-sidebar-brand>span{
  color:#d9dad4!important;
  font-size:14px!important;
  font-weight:790!important;
}

.dashboard-app .app-sidebar-brand em{
  padding:3px 6px!important;
  border-radius:999px!important;
  font-size:7px!important;
}

.dashboard-app .app-sidebar-label{
  padding:0 8px 7px!important;
  color:#484d48!important;
  font-size:7px!important;
}

.dashboard-app .app-nav-item{
  min-height:38px!important;
  gap:9px!important;
  padding:0 8px!important;
  border-radius:7px!important;
  color:#7e837e!important;
  font-size:10.5px!important;
}

.dashboard-app .app-nav-item:hover{
  background:rgba(255,255,255,.025)!important;
  color:#d9dbd5!important;
}

.dashboard-app .app-nav-item.active{
  background:transparent!important;
  color:#f0eee8!important;
}

.dashboard-app .app-nav-item.active::before{
  left:-1px!important;
  width:2px!important;
  height:19px!important;
}

.dashboard-app .app-nav-icon{
  font-size:11px!important;
}

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

/* Hero sections: not giant, not card-like. */
.dashboard-app .dashboard-hero,
.dashboard-app .server-topbar,
.dashboard-app .settings-page-head{
  position:relative;
  overflow:visible;
  padding:26px 0 28px!important;
  border-bottom:1px solid var(--flow-line)!important;
}

.dashboard-app .dashboard-hero::after,
.dashboard-app .server-topbar::after,
.dashboard-app .settings-page-head::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:76px;
  height:1px;
  background:linear-gradient(90deg,var(--flow-orange),transparent);
}

.dashboard-app .dashboard-hero h1{
  font-size:clamp(47px,5vw,70px)!important;
}

.dashboard-app .server-topbar h1,
.dashboard-app .settings-page-head h1{
  font-size:clamp(38px,4.3vw,58px)!important;
}

.dashboard-app .dashboard-hero p,
.dashboard-app .settings-page-head p{
  color:#777c77!important;
  font-size:12px!important;
}

/* Account area */
.dashboard-app .dashboard-user-card{
  min-width:210px!important;
}

.dashboard-app .dashboard-user-avatar{
  width:38px!important;
  height:38px!important;
  border-color:rgba(255,255,255,.08)!important;
}

.dashboard-app .dashboard-user-card strong{
  color:#ebeae4;
}

/* Server search bar */
.dashboard-app .server-toolbar{
  grid-template-columns:minmax(220px,430px) 1fr!important;
  min-height:70px!important;
}

.dashboard-app .server-search{
  min-height:44px!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.025)!important;
  border-color:var(--flow-line)!important;
}

.dashboard-app .server-search:focus-within{
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(255,134,23,.26)!important;
  box-shadow:0 0 0 3px rgba(255,134,23,.035);
}

/* Server list: richer hover and more balanced density */
.dashboard-app .guild-card-link{
  min-height:88px!important;
  padding:15px 5px 15px 0!important;
}

.dashboard-app .guild-card-link:hover{
  padding-left:10px!important;
  background:
    linear-gradient(90deg,rgba(255,134,23,.045),rgba(255,134,23,.012) 38%,transparent 72%)!important;
}

.dashboard-app .guild-icon{
  width:50px!important;
  height:50px!important;
  flex-basis:50px!important;
  border-radius:14px!important;
  background:#111313!important;
}

.dashboard-app .guild-row-arrow{
  width:34px!important;
  height:34px!important;
  border-color:var(--flow-line)!important;
  background:rgba(255,255,255,.018);
}

/* Server module overview: clean index/list, no cards */
.dashboard-app .dashboard-module{
  grid-template-columns:118px minmax(0,1fr) 120px!important;
  padding:18px 4px 18px 0!important;
}

.dashboard-app .module-status{
  justify-self:start;
}

.dashboard-app .dashboard-module h2{
  font-size:15px!important;
}

.dashboard-app .dashboard-module p{
  color:#636863!important;
}

/* Settings: clean document structure with a calm control column. */
.dashboard-app .settings-card,
.dashboard-app .roletools-card{
  grid-template-columns:minmax(170px,.52fr) minmax(0,1.48fr)!important;
  gap:16px 54px!important;
  padding:31px 0!important;
}

.dashboard-app .settings-card-heading h2{
  font-size:16px!important;
}

.dashboard-app .settings-card-heading p{
  max-width:240px!important;
  color:#5f645f!important;
}

.dashboard-app .field{
  min-width:0;
}

.dashboard-app .field>span{
  display:block;
  margin-bottom:7px;
  color:#979b96!important;
  font-size:9px!important;
  font-weight:760;
}

.dashboard-app .field input,
.dashboard-app .field textarea,
.dashboard-app .role-search{
  min-height:44px!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.027)!important;
  border:1px solid var(--flow-line)!important;
  padding-left:13px!important;
  padding-right:13px!important;
}

.dashboard-app .field textarea{
  padding-top:11px!important;
}

.dashboard-app .field input:hover,
.dashboard-app .field textarea:hover,
.dashboard-app .role-search:hover{
  border-color:rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.035)!important;
}

.dashboard-app .field input:focus,
.dashboard-app .field textarea:focus,
.dashboard-app .role-search:focus{
  border-color:rgba(255,134,23,.32)!important;
  box-shadow:0 0 0 3px rgba(255,134,23,.045)!important;
}

/* Hide native select face; JS replaces it with a styled accessible face. */
.dashboard-app select.aleselect-native{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  padding:0!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  white-space:nowrap!important;
  border:0!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Custom select */
.aleselect{
  position:relative;
  width:100%;
  min-width:0;
}

.aleselect-trigger{
  width:100%;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 12px;
  border:1px solid var(--flow-line);
  border-radius:11px;
  background:rgba(255,255,255,.027);
  color:#e9e9e3;
  cursor:pointer;
  text-align:left;
  transition:border-color .14s ease,background .14s ease,box-shadow .14s ease;
}

.aleselect-trigger:hover{
  border-color:rgba(255,255,255,.13);
  background:rgba(255,255,255,.038);
}

.aleselect.open .aleselect-trigger,
.aleselect-trigger:focus-visible{
  outline:none;
  border-color:rgba(255,134,23,.34);
  box-shadow:0 0 0 3px rgba(255,134,23,.05);
}

.aleselect-value{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}

.aleselect-value-icon{
  width:24px;
  height:24px;
  flex:none;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.065);
  border-radius:7px;
  background:#0b0c0c;
  color:#777c77;
  font-size:10px;
  font-weight:850;
}

.aleselect-channel .aleselect-value-icon{
  color:var(--flow-orange-2);
}

.aleselect-role .aleselect-value-icon{
  color:#d8d9d3;
}

.aleselect-category .aleselect-value-icon{
  color:#b9bcb7;
}

.aleselect-value-text{
  overflow:hidden;
  color:#e5e6df;
  font-size:11px;
  font-weight:690;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.aleselect-chevron{
  width:20px;
  height:20px;
  flex:none;
  display:grid;
  place-items:center;
  color:#656a65;
  transition:transform .15s ease,color .15s ease;
}

.aleselect-chevron svg{
  width:10px;
  height:7px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.4;
}

.aleselect.open .aleselect-chevron{
  transform:rotate(180deg);
  color:var(--flow-orange-2);
}

.aleselect-menu{
  position:fixed;
  z-index:300;
  overflow:auto;
  padding:6px;
  border:1px solid rgba(255,255,255,.105);
  border-radius:13px;
  background:
    linear-gradient(180deg,rgba(19,21,21,.985),rgba(11,12,12,.995));
  box-shadow:
    0 20px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,134,23,.025);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  scrollbar-width:thin;
  scrollbar-color:#343834 transparent;
}

.aleselect-menu[hidden]{
  display:none!important;
}

.aleselect-option{
  width:100%;
  min-height:48px;
  display:grid;
  grid-template-columns:28px minmax(0,1fr) 22px;
  align-items:center;
  gap:10px;
  padding:6px 8px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#dfe0da;
  cursor:pointer;
  text-align:left;
}

.aleselect-option:hover,
.aleselect-option:focus-visible{
  outline:none;
  background:rgba(255,255,255,.045);
}

.aleselect-option.selected{
  background:rgba(255,134,23,.07);
}

.aleselect-option:disabled{
  opacity:.35;
  cursor:not-allowed;
}

.aleselect-option-icon{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px;
  background:#0b0c0c;
  color:#707570;
  font-size:10px;
  font-weight:850;
}

.aleselect-channel .aleselect-option-icon{
  color:var(--flow-orange-2);
}

.aleselect-option-copy{
  min-width:0;
  display:grid;
  gap:3px;
}

.aleselect-option-copy strong{
  overflow:hidden;
  font-size:10.5px;
  font-weight:720;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.aleselect-option-copy small{
  color:#555a55;
  font-size:8px;
  font-weight:560;
}

.aleselect-check{
  opacity:0;
  color:var(--flow-orange-2);
  font-size:11px;
  font-weight:900;
}

.aleselect-option.selected .aleselect-check{
  opacity:1;
}

/* Toggles */
.dashboard-app .toggle-row{
  min-height:58px!important;
}

.dashboard-app .toggle-row>div{
  display:grid;
  gap:4px;
}

.dashboard-app .toggle-row>div>strong{
  font-size:11px!important;
}

.dashboard-app .toggle-row>div>span{
  color:#5e635e!important;
  font-size:9px!important;
}

.dashboard-app .toggle-ui{
  width:38px!important;
  height:22px!important;
  background:#242727!important;
  border:1px solid var(--flow-line)!important;
}

.dashboard-app .toggle-row input:checked + .toggle-ui{
  background:var(--flow-orange)!important;
  border-color:var(--flow-orange)!important;
}

/* Buttons: quiet by default, orange only for primary action. */
.dashboard-app .button{
  min-height:42px!important;
  border-radius:10px!important;
  font-size:10px!important;
}

.dashboard-app .button.light{
  background:var(--flow-orange)!important;
  color:#150b03!important;
  box-shadow:0 7px 28px rgba(255,134,23,.10);
}

.dashboard-app .button.light:hover{
  background:#ff9a3d!important;
}

.dashboard-app .button.ghost{
  background:rgba(255,255,255,.022)!important;
  border-color:var(--flow-line)!important;
}

/* Role lists: scrolling list with one coherent surface, no white browser UI. */
.dashboard-app .role-check-list{
  max-height:260px!important;
  padding:4px 8px!important;
  border:1px solid var(--flow-line)!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.018)!important;
  scrollbar-width:thin;
  scrollbar-color:#333733 transparent;
}

.dashboard-app .role-check,
.dashboard-app .role-check-item{
  border-bottom-color:rgba(255,255,255,.045)!important;
}

.dashboard-app .role-check:hover,
.dashboard-app .role-check-item:hover{
  background:rgba(255,255,255,.02)!important;
}

/* Tickets: reduce "form explosion" and improve visual grouping without changing JS. */
.dashboard-app .ticket-types-section{
  margin-top:10px!important;
}

.dashboard-app .ticket-types-head{
  padding-top:34px!important;
}

.dashboard-app .ticket-type-editor{
  position:relative;
  padding:28px 0 32px!important;
}

.dashboard-app .ticket-type-editor::before{
  content:"";
  position:absolute;
  left:-14px;
  top:28px;
  bottom:32px;
  width:1px;
  background:linear-gradient(180deg,rgba(255,134,23,.42),transparent);
}

.dashboard-app .ticket-type-editor-head{
  margin-bottom:3px;
}

.dashboard-app .ticket-live-preview button{
  border-color:rgba(255,134,23,.18)!important;
  background:rgba(255,134,23,.055)!important;
}

.dashboard-app .ticket-type-form{
  gap:15px 20px!important;
}

/* Reaction Roles workspace: true split view */
.dashboard-app .rr-workspace{
  grid-template-columns:225px minmax(0,1fr)!important;
}

.dashboard-app .rr-panel-sidebar{
  padding-right:20px!important;
}

.dashboard-app .rr-panel-item,
.dashboard-app .rr-create-panel{
  border-radius:11px!important;
  background:rgba(255,255,255,.022)!important;
}

.dashboard-app .rr-panel-item:hover{
  border-color:rgba(255,255,255,.13)!important;
}

.dashboard-app .rr-panel-item.active{
  border-color:rgba(255,134,23,.24)!important;
  background:rgba(255,134,23,.055)!important;
}

/* Scrollbars across dashboard */
.dashboard-app *{
  scrollbar-width:thin;
  scrollbar-color:#323632 transparent;
}

.dashboard-app *::-webkit-scrollbar{
  width:8px;
  height:8px;
}

.dashboard-app *::-webkit-scrollbar-thumb{
  background:#303430;
  border:2px solid transparent;
  border-radius:999px;
  background-clip:padding-box;
}

.dashboard-app *::-webkit-scrollbar-track{
  background:transparent;
}

/* Responsive */
@media(max-width:960px){
  .dashboard-stage{
    gap:26px!important;
  }

  .dashboard-app .app-sidebar{
    background:rgba(8,9,9,.94)!important;
  }

  .dashboard-app .settings-card,
  .dashboard-app .roletools-card{
    grid-template-columns:1fr!important;
    gap:17px!important;
  }

  .dashboard-app .settings-card-heading,
  .dashboard-app .settings-card > :not(.settings-card-heading),
  .dashboard-app .roletools-card > :not(.settings-card-heading){
    grid-column:1!important;
  }
}

@media(max-width:680px){
  .dashboard-app .dashboard-nav{
    min-height:64px!important;
  }

  .dashboard-stage{
    padding-top:14px!important;
  }

  .dashboard-app .dashboard-hero h1{
    font-size:45px!important;
  }

  .dashboard-app .settings-page-head h1,
  .dashboard-app .server-topbar h1{
    font-size:39px!important;
  }

  .dashboard-app .dashboard-module{
    grid-template-columns:90px minmax(0,1fr)!important;
  }

  .aleselect-menu{
    left:12px!important;
    right:12px!important;
    width:auto!important;
    max-height:48vh!important;
  }
}


/* =========================================================
   BETA DASHBOARD PASSWORD GATE
   ========================================================= */

html.beta-locked,
html.beta-locked body{
  overflow:hidden!important;
}

html.beta-locked body.dashboard-app > :not(.beta-gate){
  visibility:hidden!important;
  pointer-events:none!important;
}

.beta-gate[hidden]{
  display:none!important;
}

.beta-gate{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:24px;
  background:
    radial-gradient(circle at 68% 18%,rgba(255,134,23,.11),transparent 28%),
    radial-gradient(circle at 24% 76%,rgba(255,255,255,.035),transparent 28%),
    #080909;
}

.beta-gate::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,transparent,black 20%,black 80%,transparent);
}

.beta-gate-orb{
  position:absolute;
  width:390px;
  height:390px;
  border-radius:50%;
  filter:blur(90px);
  opacity:.17;
  pointer-events:none;
}

.beta-gate-orb-a{
  top:-180px;
  right:-110px;
  background:#ff8617;
}

.beta-gate-orb-b{
  left:-210px;
  bottom:-190px;
  background:#bfc1bc;
  opacity:.06;
}

.beta-gate-panel{
  position:relative;
  z-index:2;
  width:min(100%,460px);
  padding:28px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px;
  background:
    linear-gradient(145deg,rgba(19,20,20,.96),rgba(11,12,12,.985));
  box-shadow:
    0 32px 100px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.beta-gate-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:22px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.beta-gate-brand img{
  width:34px;
  height:34px;
  object-fit:cover;
  border-radius:9px;
}

.beta-gate-brand span{
  color:#f2f1eb;
  font-size:17px;
  font-weight:850;
  letter-spacing:-.035em;
}

.beta-gate-brand em{
  margin-left:auto;
  min-height:22px;
  display:inline-flex;
  align-items:center;
  padding:0 8px;
  border:1px solid rgba(255,134,23,.24);
  border-radius:999px;
  background:rgba(255,134,23,.07);
  color:#ffad62;
  font-size:7px;
  font-style:normal;
  font-weight:900;
  letter-spacing:.10em;
}

.beta-gate-copy{
  padding:30px 0 24px;
}

.beta-gate-copy h1{
  margin:8px 0 0;
  color:#f5f3ec;
  font-size:clamp(36px,8vw,52px);
  line-height:.95;
  letter-spacing:-.06em;
}

.beta-gate-copy p{
  max-width:360px;
  margin:14px 0 0;
  color:#7c817c;
  font-size:11px;
  line-height:1.55;
}

.beta-gate-form{
  display:grid;
  gap:10px;
}

.beta-gate-form>label{
  color:#969a95;
  font-size:9px;
  font-weight:760;
}

.beta-gate-input{
  min-height:48px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  background:rgba(255,255,255,.026);
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}

.beta-gate-input:focus-within{
  border-color:rgba(255,134,23,.37);
  background:rgba(255,255,255,.034);
  box-shadow:0 0 0 3px rgba(255,134,23,.05);
}

.beta-gate-input input{
  width:100%;
  min-width:0;
  height:46px;
  padding:0 13px;
  border:0;
  outline:0;
  background:transparent;
  color:#efeee8;
  font:inherit;
  font-size:12px;
}

.beta-gate-input input::placeholder{
  color:#505550;
}

.beta-gate-input button{
  min-width:58px;
  height:32px;
  margin-right:7px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#747974;
  font:inherit;
  font-size:9px;
  font-weight:750;
  cursor:pointer;
}

.beta-gate-input button:hover{
  color:#f0efe9;
  background:rgba(255,255,255,.04);
}

.beta-gate-error{
  min-height:17px;
  color:#d88982;
  font-size:9px;
}

.beta-gate-submit{
  width:100%;
  min-height:46px!important;
  margin-top:2px;
}

.beta-gate-back{
  display:inline-flex;
  margin-top:22px;
  color:#666b66;
  font-size:9px;
}

.beta-gate-back:hover{
  color:#e7e7e1;
}

/* =========================================================
   CUSTOM SELECT / CHANNEL MENU — SCROLL FIX
   ========================================================= */

.aleselect-menu{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
  pointer-events:auto!important;
  scrollbar-gutter:stable;
}

.aleselect-menu .aleselect-option{
  pointer-events:auto!important;
  touch-action:manipulation;
}

.aleselect-menu::-webkit-scrollbar{
  width:9px;
}

.aleselect-menu::-webkit-scrollbar-track{
  background:transparent;
}

.aleselect-menu::-webkit-scrollbar-thumb{
  min-height:30px;
  border:2px solid transparent;
  border-radius:999px;
  background:#3a3e3a;
  background-clip:padding-box;
}

.aleselect-menu::-webkit-scrollbar-thumb:hover{
  background:#4a4f4a;
  background-clip:padding-box;
}

@media(max-width:600px){
  .beta-gate{
    padding:14px;
  }

  .beta-gate-panel{
    padding:22px;
    border-radius:20px;
  }
}


/* =========================================================
   WELCOME / GREETINGS DASHBOARD
   ========================================================= */

.greeting-dashboard-layout{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(300px,.62fr);
  gap:48px;
  align-items:start;
}

.greeting-settings-flow{
  min-width:0;
}

.greeting-flat-section{
  display:grid;
  grid-template-columns:minmax(160px,.48fr) minmax(0,1.52fr);
  gap:18px 48px;
  padding:31px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.greeting-section-copy{
  padding-top:3px;
}

.greeting-section-copy h2{
  margin:7px 0 0;
  color:#f0efe9;
  font-size:17px;
  letter-spacing:-.035em;
}

.greeting-section-copy p{
  max-width:250px;
  margin:8px 0 0;
  color:#5f645f;
  font-size:9px;
  line-height:1.55;
}

.greeting-section-controls{
  min-width:0;
  display:grid;
  gap:14px;
}

.greeting-toggle{
  border-bottom:1px solid rgba(255,255,255,.04)!important;
  padding-bottom:13px!important;
}

.greeting-number-input{
  position:relative;
}

.greeting-number-input input{
  padding-right:45px!important;
}

.greeting-number-input b{
  position:absolute;
  right:13px;
  top:50%;
  transform:translateY(-50%);
  color:#5d625d;
  font-size:9px;
  font-weight:750;
  pointer-events:none;
}

.greeting-color-control{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:8px;
}

.greeting-color-control input[type="color"]{
  width:48px;
  min-height:44px!important;
  padding:4px!important;
  cursor:pointer;
}

.template-tools{
  display:grid;
  gap:8px;
  padding-top:2px;
}

.template-tools>span{
  color:#696e69;
  font-size:8px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.template-tools>div{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.template-tools button{
  min-height:28px;
  padding:0 8px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:7px;
  background:rgba(255,255,255,.018);
  color:#858a85;
  font:inherit;
  font-size:8px;
  cursor:pointer;
}

.template-tools button:hover{
  border-color:rgba(255,134,23,.22);
  color:#ffad62;
  background:rgba(255,134,23,.045);
}

.greeting-role-list{
  max-height:240px!important;
}

.greeting-role-meta{
  margin-left:auto;
  color:#555a55;
  font-size:7px;
  text-transform:uppercase;
}

.greeting-save-bar{
  margin-top:0!important;
}

.greeting-preview-column{
  min-width:0;
  padding-top:31px;
}

.greeting-preview-sticky{
  position:sticky;
  top:102px;
}

.greeting-preview-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:13px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.greeting-preview-heading strong{
  color:#a3a7a2;
  font-size:9px;
}

.discord-welcome-preview{
  margin-top:14px;
  padding:15px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:15px;
  background:
    linear-gradient(145deg,#121414,#0e0f0f);
  box-shadow:0 20px 60px rgba(0,0,0,.23);
}

.discord-preview-author{
  display:flex;
  gap:10px;
  align-items:center;
}

.discord-preview-author img{
  width:36px;
  height:36px;
  border-radius:50%;
  object-fit:cover;
}

.discord-preview-author>div{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
}

.discord-preview-author strong{
  color:#f2f2ed;
  font-size:11px;
}

.discord-preview-author span{
  min-height:15px;
  display:inline-flex;
  align-items:center;
  padding:0 4px;
  border-radius:3px;
  background:#5865f2;
  color:white;
  font-size:6px;
  font-weight:800;
}

.discord-preview-author small{
  color:#555b57;
  font-size:7px;
}

.discord-preview-content{
  margin:8px 0 8px 46px;
  color:#c8cbc5;
  font-size:10px;
  line-height:1.55;
  overflow-wrap:anywhere;
}

.preview-empty-copy{
  color:#505550;
  font-style:italic;
}

.discord-preview-embed{
  --welcome-preview-color:#F2F2F2;
  position:relative;
  margin-left:46px;
  padding:12px 12px 10px 14px;
  border-radius:4px;
  background:#161818;
  overflow:hidden;
}

.discord-preview-embed::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:var(--welcome-preview-color);
}

.discord-preview-thumb{
  float:right;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  margin:0 0 8px 10px;
  border-radius:50%;
  background:#242727;
  color:#8c918c;
  font-size:12px;
  font-weight:850;
}

.discord-preview-embed h3{
  margin:0;
  color:#efeee8;
  font-size:11px;
  line-height:1.35;
}

.discord-preview-embed p{
  margin:6px 0 0;
  color:#b3b7b1;
  font-size:9px;
  line-height:1.55;
  overflow-wrap:anywhere;
}

.discord-preview-embed>img{
  width:100%;
  max-height:190px;
  object-fit:cover;
  margin-top:10px;
  border-radius:5px;
  background:#0b0c0c;
}

.discord-preview-footer{
  margin-top:9px;
  color:#747974;
  font-size:7px;
  line-height:1.4;
}

.greeting-preview-note{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:11px 1px 0;
  color:#515651;
  font-size:7px;
}

.greeting-preview-note strong{
  color:#727772;
  font-size:7px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.greeting-preview-note strong.enabled{
  color:#ffad62;
}

@media(max-width:1080px){
  .greeting-dashboard-layout{
    grid-template-columns:1fr;
    gap:0;
  }

  .greeting-preview-column{
    padding-top:8px;
  }

  .greeting-preview-sticky{
    position:static;
    max-width:620px;
  }
}

@media(max-width:720px){
  .greeting-flat-section{
    grid-template-columns:1fr;
    gap:17px;
    padding:25px 0;
  }

  .greeting-section-copy p{
    max-width:none;
  }

  .discord-preview-content,
  .discord-preview-embed{
    margin-left:0;
  }
}