:root{
  --bg: #0b0d12;
  --panel: #111522;
  --panel-2: #0f1320;
  --border: rgba(255,255,255,.08);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);
  --muted-2: rgba(255,255,255,.5);
  --primary: #22C55E;
  --primary-2: #16A34A;
  --danger: #ED4245;
  --shadow: 0 12px 40px rgba(0,0,0,.35);
  --radius: 14px;
  --radius-sm: 10px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

*{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  margin: 0;
  font-family: var(--sans);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(34, 197, 94, .16), transparent 60%),
    radial-gradient(1200px 600px at 90% 10%, rgba(34, 197, 94, .10), transparent 55%),
    var(--bg);
  color: var(--text);
}

 body[data-state="entry"] .shell{ display: none; }
 body[data-state="app"] .entry{ display: none; }

code{ font-family: var(--mono); font-size: .95em; }

/* Layout ----------------------------------------------------------------- */

.shell{
  min-height: 100vh;
  display: flex;
}

 .entry{
   min-height: 100vh;
   display: grid;
   place-items: center;
   padding: 22px;
 }

 .entryCard{
   width: min(520px, 92vw);
   border-radius: calc(var(--radius) + 4px);
   border: 1px solid rgba(255,255,255,.10);
   background:
     radial-gradient(900px 540px at 50% -10%, rgba(34, 197, 94, .16), transparent 60%),
     linear-gradient(180deg, rgba(17,21,34,.86), rgba(15,19,32,.90));
   box-shadow: 0 22px 70px rgba(0,0,0,.55);
   padding: 26px 22px 20px;
   display: grid;
   justify-items: center;
   text-align: center;
 }

 .entryLogo{
   width: 96px;
   height: 96px;
   border-radius: 28px;
   border: 1px solid rgba(34, 197, 94, .28);
   box-shadow:
     0 18px 50px rgba(0,0,0,.55),
     0 0 0 6px rgba(34, 197, 94, .12);
   background-color: #000;
   background-size: cover;
   background-position: center;
   margin-bottom: 14px;
 }

 .entryName{
   font-size: 22px;
   font-weight: 800;
   letter-spacing: .3px;
   color: rgba(255,255,255,.95);
 }

 .entryBtn{
   margin-top: 16px;
   height: 44px;
   padding: 0 18px;
   border-radius: 999px;
 }

 .entryMeta{
   margin-top: 14px;
   width: 100%;
   border-top: 1px solid rgba(255,255,255,.08);
   padding-top: 12px;
   display: grid;
   gap: 8px;
 }

 .entryMetaLine{
   font-size: 12.5px;
   color: rgba(255,255,255,.62);
 }

 .entryMetaValue{
   color: rgba(255,255,255,.88);
   font-weight: 700;
 }

 .entryLink{
   margin-top: 4px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 34px;
   padding: 0 12px;
   border-radius: 999px;
   border: 1px solid rgba(34, 197, 94, .26);
   background: rgba(34, 197, 94, .08);
   color: rgba(255,255,255,.86);
   text-decoration: none;
   font-size: 12.5px;
 }

 .entryLink:hover{
   border-color: rgba(34, 197, 94, .40);
   background: rgba(34, 197, 94, .12);
 }

.sidebar{
  width: 270px;
  padding: 16px;
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(17,21,34,.92), rgba(15,19,32,.92));
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.sideBrand{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(0,0,0,.18);
  margin-bottom: 12px;
}

.sideTitle{
  font-weight: 700;
  font-size: 14px;
  line-height: 1.1;
}

.sideSub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.nav{
  display: grid;
  gap: 8px;
}

.navDivider{
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

.navBtn{
  text-align: left;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.9);
  cursor: pointer;
}

.navBtn:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}

.navBtnActive{
  background: rgba(34, 197, 94, .14);
  border-color: rgba(34, 197, 94, .28);
}

.navBtnPrimary{
  background: linear-gradient(145deg, rgba(34, 197, 94, .95), rgba(22, 163, 74, .95));
  border-color: rgba(34, 197, 94, .55);
  box-shadow: 0 10px 22px rgba(34, 197, 94, .18);
}

.navBtnPrimary:hover{
  border-color: rgba(34, 197, 94, .75);
  box-shadow: 0 12px 28px rgba(34, 197, 94, .22);
}

.content{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(15,19,32,.55);
  backdrop-filter: blur(8px);
}

 .topbarLeft{
   display: flex;
   gap: 10px;
   align-items: center;
 }

.topbarText h1{
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

.topbarText p{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.topbarActions{
  display: flex;
  gap: 10px;
  align-items: center;
}

.btnPrimary{
  border-color: rgba(34, 197, 94, .55);
  background: linear-gradient(145deg, rgba(34, 197, 94, .95), rgba(22, 163, 74, .95));
  box-shadow: 0 10px 22px rgba(34, 197, 94, .18);
}

.btnPrimary:hover{
  border-color: rgba(34, 197, 94, .75);
  box-shadow: 0 12px 28px rgba(34, 197, 94, .22);
}

.main{
  padding: 16px 18px;
  display: grid;
  gap: 14px;
  max-width: 1100px;
  width: 100%;
}

/* Common UI --------------------------------------------------------------- */

.logo{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(34, 197, 94, .22);
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.28), transparent 60%),
    linear-gradient(145deg, var(--primary), var(--primary-2));
  box-shadow: 0 10px 24px rgba(34, 197, 94, .22);
}

 .brandLogo{
   background: url("https://cdn.discordapp.com/avatars/1443662170423558331/6e0af526a83bdc1523195c8a0867b8e7.webp?size=4096") center / cover no-repeat;
   background-color: #000;
 }

 .worldAvatar{
   background-size: cover;
   background-position: center;
 }

.panel{
  display: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(17,21,34,.92), rgba(15,19,32,.92));
  box-shadow: var(--shadow);
  padding: 16px;
}

.panelActive{
  display: block;
}

.panel h2{
  margin: 0 0 12px;
  font-size: 15px;
  color: rgba(255,255,255,.88);
}

/* Accueil ---------------------------------------------------------------- */

.hero{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.landingBackdrop{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: calc(var(--radius) + 2px);
  background: rgba(0,0,0,.14);
  padding: 18px;
}

.landingBackdrop::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(920px 520px at 18% 8%, rgba(34, 197, 94, .18), transparent 62%),
    radial-gradient(860px 520px at 86% 18%, rgba(34, 197, 94, .10), transparent 58%),
    radial-gradient(circle at 12% 34%, rgba(255,255,255,.14) 1px, transparent 2px),
    radial-gradient(circle at 26% 68%, rgba(255,255,255,.10) 1px, transparent 2px),
    radial-gradient(circle at 46% 22%, rgba(255,255,255,.09) 1px, transparent 2px),
    radial-gradient(circle at 62% 54%, rgba(255,255,255,.10) 1px, transparent 2px),
    radial-gradient(circle at 78% 30%, rgba(255,255,255,.09) 1px, transparent 2px),
    radial-gradient(circle at 90% 72%, rgba(255,255,255,.10) 1px, transparent 2px);
  opacity: .95;
  pointer-events: none;
}

.landingBackdrop::after{
  content: "";
  position: absolute;
  inset: -40px;
  background: radial-gradient(460px 280px at 74% 34%, rgba(34, 197, 94, .20), transparent 70%);
  filter: blur(22px);
  opacity: .7;
  pointer-events: none;
}

.landingBackdrop > *{ position: relative; z-index: 1; }

.landingNav{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.landingNavPill{
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.86);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
}

.landingNavPill:hover{
  border-color: rgba(34, 197, 94, .32);
  background: rgba(34, 197, 94, .08);
}

.landingHero{ gap: 18px; }
.landingLeft{ min-width: 0; }

.landingTitle{
  margin: 0;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -.4px;
}

.landingAccent{
  color: rgba(34, 197, 94, .95);
  text-shadow: 0 0 22px rgba(34, 197, 94, .22);
}

.landingLead{
  margin: 12px 0 0;
  color: rgba(255,255,255,.70);
  font-size: 14px;
  line-height: 1.6;
  max-width: 620px;
}

.landingActions{ margin-top: 16px; }

.landingStats{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.landingStat{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  border-radius: 999px;
  padding: 10px 12px;
  min-width: 140px;
}

.landingStatTop{
  font-size: 11px;
  color: rgba(255,255,255,.58);
  margin-bottom: 4px;
}

.landingStatBottom{
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.90);
}

.landingRight{
  display: grid;
  place-items: center;
}

.orbWrap{
  width: min(320px, 72vw);
  height: min(320px, 72vw);
  position: relative;
  display: grid;
  place-items: center;
}

.orbRing{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, .22);
  box-shadow: 0 0 22px rgba(34, 197, 94, .10);
}

.orbRing1{ --orbScale: 1; --orbOffset: 0deg; animation: orbSpin 18s linear infinite; opacity: .75; }
.orbRing2{ --orbScale: .78; --orbOffset: 16deg; animation: orbSpin 14s linear infinite reverse; opacity: .60; }
.orbRing3{ --orbScale: .56; --orbOffset: -8deg; animation: orbSpin 10s linear infinite; opacity: .50; }

.orbCore{
  width: 156px;
  height: 156px;
  border-radius: 999px;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(100% 100% at 50% 60%, rgba(34, 197, 94, .16), transparent 70%),
    rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  display: grid;
  place-items: center;
  box-shadow: 0 18px 46px rgba(0,0,0,.45);
}

.orbAvatar{
  width: 86px;
  height: 86px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
}

@keyframes orbSpin{
  from{ transform: rotate(var(--orbOffset, 0deg)) scale(var(--orbScale, 1)); }
  to{ transform: rotate(calc(var(--orbOffset, 0deg) + 360deg)) scale(var(--orbScale, 1)); }
}

@media (min-width: 900px){
  .landingHero{ grid-template-columns: 1.15fr .85fr; align-items: center; }
  .landingTitle{ font-size: 40px; }
}

.pill{
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, .22);
  background: rgba(34, 197, 94, .10);
  color: rgba(255,255,255,.88);
  font-size: 12px;
  margin-bottom: 10px;
}

.heroTitle{
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
}

.heroText{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.heroActions{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.heroCards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.miniCard{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(0,0,0,.16);
  padding: 12px;
}

.miniTitle{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.miniText{
  font-size: 13px;
  color: rgba(255,255,255,.9);
}

@media (min-width: 900px){
  .hero{ grid-template-columns: 1.2fr .8fr; align-items: start; }
}

.discordShowcase{
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  background: rgba(0,0,0,.16);
  padding: 14px;
}

@media (min-width: 900px){
  .discordShowcase{ grid-column: 1 / -1; }
}

.discordMessage{
  display: flex;
  gap: 12px;
}

.discordAvatar{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(145deg, rgba(34, 197, 94, .95), rgba(22, 163, 74, .95));
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.30);
  flex: 0 0 auto;
}

 .statusAvatar{
   background-image: url("https://cdn.discordapp.com/avatars/1443662170423558331/6e0af526a83bdc1523195c8a0867b8e7.webp?size=4096");
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
 }

 .discordAvatar.statusAvatar{
   border: none;
 }

.discordMsgBody{ min-width: 0; flex: 1; }

.discordAuthorRow{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  margin-bottom: 8px;
}

.discordTime{
  margin-left: auto;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

.discordAuthor{
  font-weight: 700;
  font-size: 14px;
  color: rgba(255,255,255,.92);
}

.discordBotTag{
  height: 18px;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid rgba(34, 197, 94, .22);
  background: rgba(34, 197, 94, .10);
  color: rgba(255,255,255,.86);
  font-size: 11px;
  line-height: 18px;
}

.discordEmbed{
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(17, 21, 34, .72);
}

.discordEmbedBar{
  width: 4px;
  background: linear-gradient(180deg, rgba(34, 197, 94, .95), rgba(22, 163, 74, .95));
}

.discordEmbedBody{ padding: 12px 12px 12px 14px; min-width: 0; }

.discordEmbedTitle{
  font-weight: 800;
  font-size: 14px;
  color: rgba(255,255,255,.95);
  letter-spacing: .2px;
}

.discordEmbedDesc{
  margin-top: 8px;
  color: rgba(255,255,255,.74);
  font-size: 13px;
  line-height: 1.45;
}

.discordFields{
  margin-top: 12px;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

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

@media (min-width: 560px){
  .discordFields{ grid-template-columns: 1fr 1fr; }
  .discordFields3{ grid-template-columns: 1fr 1fr 1fr; }
}

.discordEmbedFooter{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 12px;
  color: rgba(255,255,255,.60);
}

 #statusSystemBlock.statusDisabled{
   opacity: .55;
   filter: saturate(.7);
 }

.discordFieldName{
  font-size: 12px;
  color: rgba(255,255,255,.60);
  margin-bottom: 4px;
}

.discordFieldValue{
  font-size: 13px;
  color: rgba(255,255,255,.88);
  font-weight: 600;
}

.discordButtons{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

 .ticketPreviewButtons{
   margin-top: 10px;
 }

 .ticketPreviewButtons .discordButton{
   cursor: default;
 }

 .ticketPreviewSelect{
   position: relative;
 }

 .ticketPreviewMenu{
   position: absolute;
   left: 0;
   top: calc(100% + 8px);
   min-width: 220px;
   z-index: 80;
 }

 .ticketPreviewMenu .selectOption{
   height: auto;
   padding: 8px 12px;
   align-items: flex-start;
   flex-direction: column;
   gap: 4px;
 }

 .ticketPreviewOptionLabel{
   font-size: 13px;
   color: rgba(255,255,255,.90);
 }

 .ticketPreviewOptionDesc{
   font-size: 12px;
   color: rgba(255,255,255,.62);
 }

 #ticketPreviewText{
   white-space: pre-wrap;
 }

 .ticketPreviewAction.ticketPreviewIsSelect::after{
   content: "▾";
   margin-left: 8px;
   opacity: .85;
 }

.discordButton{
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.90);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.discordButton:hover{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

.discordButtonPrimary{
  border-color: rgba(34, 197, 94, .55);
  background: linear-gradient(145deg, rgba(34, 197, 94, .95), rgba(22, 163, 74, .95));
  box-shadow: 0 10px 22px rgba(34, 197, 94, .16);
}

.discordButtonPrimary:hover{
  border-color: rgba(34, 197, 94, .75);
  box-shadow: 0 12px 28px rgba(34, 197, 94, .20);
}

.grid2{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.grid3{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 720px){
  .main{ padding: 18px 22px; }
  .grid2{ grid-template-columns: 1fr 1fr; }
  .grid3{ grid-template-columns: 1fr 1fr 1fr; }
}

.field{ margin-bottom: 12px; }

 .fieldChecks{
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   gap: 8px;
   margin-top: 18px;
 }

.field label:not(.check){
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

 .labelRow{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   margin-bottom: 6px;
 }

 .labelRow label{ margin: 0; }

 .miniPills{
   display: inline-flex;
   gap: 8px;
   flex-wrap: wrap;
 }

 .miniPill{
   height: 26px;
   padding: 0 10px;
   border-radius: 999px;
   border: 1px solid rgba(34, 197, 94, .22);
   background: rgba(34, 197, 94, .08);
   color: rgba(255,255,255,.86);
   font-family: var(--mono);
   font-size: 12px;
   cursor: pointer;
 }

 .miniPillSoft{
   border-color: rgba(255,255,255,.12);
   background: rgba(0,0,0,.18);
 }

 .miniPill:hover{
   border-color: rgba(34, 197, 94, .34);
   background: rgba(34, 197, 94, .12);
 }

 .miniIconBtn{
   width: 26px;
   height: 26px;
   border-radius: 10px;
   border: 1px solid rgba(34, 197, 94, .22);
   background: rgba(0,0,0,.22);
   color: rgba(34, 197, 94, .95);
   cursor: pointer;
   line-height: 24px;
   font-size: 16px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0;
 }

 .miniIconBtn:hover{
   border-color: rgba(34, 197, 94, .38);
   background: rgba(34, 197, 94, .08);
 }

 .popoutPreview{
   margin-top: 10px;
   border-radius: 16px;
   border: 1px solid rgba(255,255,255,.12);
   background: rgba(17, 21, 34, .78);
   box-shadow: 0 18px 60px rgba(0,0,0,.55);
   overflow: hidden;
   max-width: 520px;
 }

 .popoutBanner{
   height: 86px;
   position: relative;
   background:
     radial-gradient(900px 240px at 20% 0%, rgba(34, 197, 94, .18), transparent 55%),
     radial-gradient(800px 260px at 80% 40%, rgba(34, 197, 94, .10), transparent 60%),
     rgba(0,0,0,.40);
 }

 .popoutBannerText{
   position: absolute;
   left: 110px;
   top: 18px;
   right: 16px;
   font-family: var(--mono);
   font-size: 22px;
   letter-spacing: .2px;
   color: rgba(34, 197, 94, .92);
   text-shadow: 0 0 22px rgba(34, 197, 94, .18);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .popoutBody{
   padding: 10px 12px 12px;
   display: flex;
   gap: 12px;
 }

 .popoutAvatarWrap{
   width: 86px;
   position: relative;
   flex: 0 0 auto;
   margin-top: -34px;
 }

 .popoutAvatar{
   width: 76px;
   height: 76px;
   border-radius: 999px;
   border: 5px solid rgba(17, 21, 34, .95);
   background-color: #000;
   box-shadow: 0 18px 46px rgba(0,0,0,.55);
 }

 .popoutDot{
   position: absolute;
   right: 7px;
   bottom: 6px;
   width: 14px;
   height: 14px;
   border-radius: 999px;
   border: 4px solid rgba(17, 21, 34, .95);
   background: rgba(34, 197, 94, .95);
 }

 .popoutDotIdle{ background: rgba(250, 166, 26, .95); }
 .popoutDotDnd{ background: rgba(237, 66, 69, .95); }
 .popoutDotInvisible{ background: rgba(150, 150, 150, .95); }

 .popoutInfo{ min-width: 0; flex: 1; }

 .popoutNameRow{
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 2px;
 }

 .popoutName{
   font-weight: 800;
   font-size: 18px;
   color: rgba(255,255,255,.95);
 }

 .popoutTag{
   height: 18px;
   padding: 0 7px;
   border-radius: 6px;
   background: rgba(88, 101, 242, .95);
   color: rgba(255,255,255,.95);
   font-size: 11px;
   line-height: 18px;
   font-weight: 800;
 }

 .popoutStatus{
   margin-top: 6px;
   color: rgba(255,255,255,.70);
   font-size: 12.5px;
 }

 .popoutActivity{
   margin-top: 6px;
   color: rgba(255,255,255,.86);
   font-size: 13px;
 }

 .popoutMessage{
   margin-top: 10px;
   border-top: 1px solid rgba(255,255,255,.08);
   padding-top: 10px;
   color: rgba(255,255,255,.70);
   font-size: 13px;
   line-height: 1.45;
   white-space: pre-wrap;
 }

 .chipRow{
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   padding: 10px;
   border-radius: var(--radius);
   border: 1px solid var(--border);
   background: rgba(0,0,0,.20);
   min-height: 44px;
 }

 .chip{
   display: inline-flex;
   align-items: center;
   gap: 8px;
   height: 30px;
   padding: 0 10px;
   border-radius: 999px;
   border: 1px solid rgba(34, 197, 94, .22);
   background: rgba(34, 197, 94, .08);
   color: rgba(255,255,255,.88);
   font-family: var(--mono);
   font-size: 12px;
 }

 .chipRemove{
   width: 18px;
   height: 18px;
   border-radius: 6px;
   border: 1px solid rgba(255,255,255,.14);
   background: rgba(0,0,0,.22);
   color: rgba(255,255,255,.80);
   cursor: pointer;
   line-height: 16px;
   padding: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }

 .chipRemove:hover{
   border-color: rgba(255,255,255,.22);
   background: rgba(255,255,255,.06);
 }

 .ownerEditor{
   margin-top: 8px;
   display: flex;
   gap: 8px;
   align-items: center;
 }

 #ticketOptionsEditor{
   flex-wrap: wrap;
 }

 .ownerInput{
   flex: 1;
   min-width: 180px;
   height: 34px;
   border-radius: 12px;
   border: 1px solid rgba(255,255,255,.10);
   background: rgba(0,0,0,.22);
   color: rgba(255,255,255,.92);
   padding: 0 10px;
   outline: none;
 }

 .ownerInput:focus{
   border-color: rgba(34, 197, 94, .55);
   box-shadow: 0 0 0 4px rgba(34, 197, 94, .10);
 }

 .miniOkBtn,
 .miniCancelBtn{
   height: 34px;
   padding: 0 10px;
   border-radius: 12px;
   border: 1px solid rgba(255,255,255,.10);
   background: rgba(0,0,0,.22);
   color: rgba(255,255,255,.86);
   cursor: pointer;
 }

 .miniOkBtn{
   border-color: rgba(34, 197, 94, .30);
   background: rgba(34, 197, 94, .10);
   color: rgba(34, 197, 94, .95);
 }

 .miniOkBtn:hover{
   border-color: rgba(34, 197, 94, .45);
   background: rgba(34, 197, 94, .14);
 }

 .miniCancelBtn:hover{
   border-color: rgba(255,255,255,.18);
   background: rgba(255,255,255,.06);
 }

.field input[type="text"],
.field input[type="password"]{
  width: 100%;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(0,0,0,.20);
  color: var(--text);
  padding: 0 12px;
  outline: none;
}

.field input[type="number"],
.field select{
  width: 100%;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(0,0,0,.20);
  color: var(--text);
  padding: 0 10px;
  outline: none;
}

 .field input:disabled,
 .field select:disabled,
 .textarea:disabled{
   opacity: .55;
   cursor: not-allowed;
 }

 .selectBtn:disabled{
   opacity: .55;
   cursor: not-allowed;
 }

 .select{
   position: relative;
   width: 100%;
 }

 .selectBtn{
   width: 100%;
   height: 40px;
   border-radius: var(--radius-sm);
   border: 1px solid rgba(255,255,255,.10);
   background:
     radial-gradient(900px 240px at 20% 0%, rgba(34, 197, 94, .10), transparent 60%),
     rgba(0,0,0,.22);
   color: rgba(255,255,255,.92);
   padding: 0 40px 0 12px;
   text-align: left;
   cursor: pointer;
   position: relative;
   display: flex;
   align-items: center;
   line-height: 1;
 }

 .selectBtn::after{
   content: "▾";
   position: absolute;
   right: 12px;
   top: 50%;
   transform: translateY(-50%);
   color: rgba(34, 197, 94, .92);
   font-size: 14px;
 }

 .selectBtn:hover{
   border-color: rgba(34, 197, 94, .28);
   box-shadow: 0 0 0 4px rgba(34, 197, 94, .10);
 }

 .selectMenu{
   position: absolute;
   top: calc(100% + 8px);
   left: 0;
   right: 0;
   border-radius: 14px;
   border: 1px solid rgba(255,255,255,.12);
   background: linear-gradient(180deg, rgba(17,21,34,.98), rgba(15,19,32,.98));
   box-shadow: 0 18px 50px rgba(0,0,0,.55);
   padding: 6px;
   z-index: 60;
 }

 .selectOption{
   width: 100%;
   height: 38px;
   border-radius: 12px;
   border: 1px solid transparent;
   background: transparent;
   color: rgba(255,255,255,.90);
   cursor: pointer;
   text-align: left;
   padding: 0 12px;
   display: flex;
   align-items: center;
   line-height: 1;
 }

 .selectOption:hover{
   background: rgba(34, 197, 94, .10);
   border-color: rgba(34, 197, 94, .20);
 }

 .selectOptionActive{
   background: rgba(34, 197, 94, .14);
   border-color: rgba(34, 197, 94, .26);
 }

.textarea{
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(0,0,0,.20);
  color: var(--text);
  padding: 12px;
  outline: none;
  resize: vertical;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
}

.textarea:focus{
  border-color: rgba(34, 197, 94, .6);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .12);
}

.field input[type="text"]:focus,
.field input[type="password"]:focus{
  border-color: rgba(34, 197, 94, .6);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .12);
}

.hint{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted-2);
}

.colorRow{
  display: flex;
  gap: 10px;
  align-items: center;
}

input[type="color"]{
  width: 44px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0;
  background: rgba(0,0,0,.20);
  -webkit-appearance: none;
  appearance: none;
  overflow: hidden;
}

 input[type="color"]::-webkit-color-swatch-wrapper{
   padding: 0;
 }

 input[type="color"]::-webkit-color-swatch{
   border: 0;
   border-radius: calc(var(--radius-sm) - 2px);
 }

 input[type="color"]::-moz-color-swatch{
   border: 0;
   border-radius: calc(var(--radius-sm) - 2px);
 }

#embedColorHex{
  flex: 1;
}

.divider{
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}

.fieldset{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 12px 10px;
}

 .statusActivationFieldset{
   border: none;
   padding: 0;
 }

 .statusActivationFieldset .legendRow{
   margin-bottom: 0;
 }

.legendRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.legend{
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.check{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,.88);
  padding: 8px 6px;
  border-radius: 10px;
  line-height: 1.15;
}

.check:hover{
  background: rgba(255,255,255,.03);
}

.check span{ line-height: 1.15; }

.check input{
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.24);
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.check input::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(145deg, rgba(34, 197, 94, .95), rgba(22, 163, 74, .95));
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .12);
  transform: scale(0);
  transition: transform .14s ease;
}

.check input:checked{
  border-color: rgba(34, 197, 94, .45);
  background: rgba(34, 197, 94, .12);
}

.check input:checked::before{ transform: scale(1); }

.check input:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
}

.note{
  font-size: 13px;
  color: var(--muted);
  background: rgba(34, 197, 94, .08);
  border: 1px solid rgba(34, 197, 94, .18);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.error{
  margin-top: 8px;
  font-size: 13px;
  color: rgba(237, 66, 69, .95);
}

.authError {
  margin-top: 12px;
  width: min(520px, 92vw);
  border-radius: 12px;
  border: 1px solid rgba(237, 66, 69, .28);
  background: rgba(237, 66, 69, .10);
  color: rgba(255,255,255,.92);
  padding: 10px 12px;
  font-size: 13px;
  text-align: center;
}

.authUser {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  font-size: 13px;
  color: rgba(255,255,255,.9);
  line-height: 1.15;
}

.authUser img {
  width: 22px;
  height: 22px;
  border-radius: 999px;
}

.hidden{
  display: none;
}

.btn{
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.20);
  color: var(--text);
  cursor: pointer;
}

.btn:hover{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}

.btn:disabled{
  opacity: .55;
  cursor: not-allowed;
}

.btn:active{ transform: translateY(1px); }

.btn-primary{
  border-color: rgba(34, 197, 94, .55);
  background: linear-gradient(145deg, rgba(34, 197, 94, .95), rgba(22, 163, 74, .95));
  box-shadow: 0 10px 22px rgba(34, 197, 94, .18);
}

.btn-primary:hover{
  border-color: rgba(34, 197, 94, .75);
  box-shadow: 0 12px 28px rgba(34, 197, 94, .22);
}

.previewHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.pre{
  margin: 0;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(0,0,0,.26);
  padding: 14px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  overflow: auto;
  min-height: 420px;
}

.toast{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.86);
  min-height: 18px;
}

.footer{
  margin-top: auto;
  padding: 14px 18px;
  color: rgba(255,255,255,.45);
  font-size: 12px;
  border-top: 1px solid var(--border);
}

.iconBtn{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.9);
  cursor: pointer;
}

.iconBtn:hover{
  background: rgba(255,255,255,.06);
}

 .iconBtnHome{
   border-radius: 14px;
   border-color: rgba(34, 197, 94, .22);
   background:
     radial-gradient(80% 80% at 30% 20%, rgba(34, 197, 94, .14), transparent 62%),
     rgba(0,0,0,.22);
   color: rgba(34, 197, 94, .92);
   box-shadow:
     0 10px 26px rgba(0,0,0,.38),
     0 0 0 4px rgba(34, 197, 94, .10);
   transition: transform .12s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
 }

 .iconBtnHome:hover{
   border-color: rgba(34, 197, 94, .34);
   background:
     radial-gradient(80% 80% at 30% 20%, rgba(34, 197, 94, .20), transparent 64%),
     rgba(0,0,0,.24);
   box-shadow:
     0 12px 30px rgba(0,0,0,.42),
     0 0 0 5px rgba(34, 197, 94, .12);
 }

 .iconBtnHome:active{
   transform: translateY(1px);
 }

.toastRow{ margin-top: 10px; }

/* Toggle ----------------------------------------------------------------- */

.toggle{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.toggle input{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.toggleUi{
  width: 44px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.26);
  display: inline-block;
  position: relative;
  transition: background .16s ease, border-color .16s ease;
}

.toggleUi::after{
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  transition: transform .16s ease;
}

.toggle input:checked + .toggleUi{
  background: rgba(34, 197, 94, .22);
  border-color: rgba(34, 197, 94, .40);
}

.toggle input:checked + .toggleUi::after{
  transform: translateX(18px);
}

/* Responsive sidebar ------------------------------------------------------ */

@media (max-width: 980px){
  .sidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    transform: translateX(-102%);
    transition: transform .18s ease;
    z-index: 50;
  }

  .sidebarOpen{
    transform: translateX(0);
  }
}