/* === SPECTRE/SPECR v5 (DE) === */
:root{
  --bg:#0b0c0e; --panel:#131416; --panel-2:#17181b; --text:#e8e8ea; --muted:#a6a6a9;
  --accent:#d1312f; --accent-2:#ffffff; --radius:22px; --shadow:0 18px 40px rgba(0,0,0,.45);
  --pad:clamp(70px,12.5vw,70px);
  --header-height:80px;
  --fg-3:#666;
}
*{box-sizing:border-box}
html{
  scroll-padding-top:calc(var(--header-height) + 20px);
}
html,body{background:var(--bg);color:var(--text);margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.65}
.container{width:min(1200px,92vw);margin:0 auto}
.site-header.solid.fancy{position:sticky;top:0;z-index:120;background:#0f1013;border-bottom:1px solid #1f2024;box-shadow:0 10px 34px rgba(0,0,0,.5)}
.header-inner{display:grid;grid-template-columns:1fr auto auto;gap:22px;align-items:center;padding:5px 0;min-height:80px}
.brand{display:inline-flex;gap:10px;align-items:center;text-decoration:none;color:var(--text)}
.brand-mark{height:90px;width:auto;background:transparent;border-radius:0;display:inline-block;object-fit:contain}
.brand-name{font-weight:900;letter-spacing:.8px}
.brand-tag{color:var(--muted);font-weight:700;margin-left:6px}
.nav-primary ul{list-style:none;display:flex;gap:20px;margin:0;padding:0;align-items:center}
.nav-primary li{display:flex;align-items:center}
.nav-primary a{color:var(--muted);text-decoration:none;font-weight:600;position:relative;transition:color .2s ease}
.nav-primary a::after{content:"";position:absolute;left:50%;bottom:-6px;width:0;height:2px;background:var(--accent);transition:width .2s ease,left .2s ease}
.nav-primary a:hover{color:var(--accent-2)}
.nav-primary a:hover::after{width:70%;left:15%}
.nav-toggle{display:none;background:none;border:1px solid #2a2b2e;color:var(--text);padding:6px 10px;border-radius:8px}
.nav-primary .nav-tools,
.nav-primary .nav-login{display:flex;align-items:center}
.nav-primary .pill{min-width:120px;font-size:14px;font-weight:600;color:var(--text);max-height: 37px;}
.dropdown{position:relative}
.nav-secondary{display:flex;gap:12px;align-items:center}
.drop-toggle{padding:8px 14px;border-radius:999px;border:1px solid #2a2b2e;background:transparent;color:var(--text);cursor:pointer;transition:border-color .2s ease;font-size:14px;font-weight:600}
.drop-toggle:hover{border-color:var(--accent)}
.pill{padding:8px 14px;border-radius:999px;border:1px solid #2a2b2e;background:transparent;color:var(--text);text-decoration:none;cursor:pointer;transition:border-color .2s ease,color .2s ease;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}
.pill:hover{border-color:var(--accent);color:var(--accent)}
.drop-menu{position:absolute;right:0;top:calc(100% + 8px);background:#0f1012;border:1px solid #2a2b2e;border-radius:12px;display:none;min-width:180px;box-shadow:var(--shadow);padding:6px}
.drop-menu a{display:block;padding:8px 10px;text-decoration:none;color:var(--text);border-radius:8px;transition:color .15s ease, background .15s ease}
.drop-menu a:hover{background:#16171a;color:var(--accent)}
.header-accent{height:2px;background:linear-gradient(90deg,transparent,rgba(209,49,47,.8),transparent);}
.section{padding:var(--pad) 0;position:relative;background:transparent;scroll-margin-top:calc(var(--header-height) - 30px)}
.divider{display:grid;place-items:center;padding:5px 0}
.divider::before{content:"";width:36%;max-width:420px;height:1px;background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.8) 50%,transparent 100%)}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:34px;align-items:center}

/* Video background for hero section */
.hero{
  position:relative;
  overflow:hidden;
}
.hero-video-bg{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
  opacity:0.55; /* darken for readability */
  pointer-events:none;
}
.eyebrow{color:var(--accent-2);letter-spacing:2px;font-weight:800;opacity:.9}
h1{font-size:clamp(32px,5vw,66px);margin:10px 0 12px}
h1 span{color:var(--accent)}

h2{
  font-size:clamp(28px,4.5vw,52px);
  margin:0 0 20px;
  background:linear-gradient(90deg, #d1312f, #ff6b6b, #ffa500, #ff6b6b, #d1312f);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gradient-shift 4s ease-in-out infinite;
  text-align:center;
}

@keyframes gradient-shift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.typewriter{min-height:28px;color:var(--accent);font-weight:800;letter-spacing:.6px}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;padding:14px 18px;border-radius:14px;box-shadow:var(--shadow);font-weight:800;transition:transform .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;border:1px solid #2a2b2e;color:var(--text)}

/* Discord CTA button: use the official Discord blue for contrast */
.btn.discord{
  background:#5865F2;
  border:1px solid #5865F2;
  color:#fff;
}
.btn.discord:hover{
  /* keep the hover effect consistent with other buttons */
  transform:translateY(-2px);
}
/* RSI Org Profile button: use gold/orange for RSI brand */
.btn.rsi{
  background:#f5a623;
  border:1px solid #f5a623;
  color:#0b0c0e;
  font-weight:800;
}
.btn.rsi:hover{
  transform:translateY(-2px);
}
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid #242528;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:34px}
.bullets,.checklist{padding-left:18px}
.muted{color:var(--muted)}
.float-scroll{position:fixed;right:18px;bottom:18px;z-index:140;width:auto;min-width:120px;height:46px;padding:0 16px;border-radius:999px;border:1px solid #2a2b2e;background:#0f1012;color:#fff;box-shadow:var(--shadow);cursor:pointer;display:flex;align-items:center;gap:10px;transition:all .25s ease}
.float-scroll .icon{width:18px;height:18px;fill:#fff;display:block}
.float-scroll .icon-up{display:none}
.float-scroll.compact{min-width:46px;width:46px;height:46px;padding:0;justify-content:center}
.float-scroll.compact .label{display:none}
.float-scroll.compact .icon-down{display:none}
.float-scroll.compact .icon-up{display:block}
.scroller{display:grid;grid-auto-flow:column;grid-auto-columns:min(88vw,520px);gap:16px;overflow:auto;padding:6px;scroll-snap-type:x mandatory}
.scroller::-webkit-scrollbar{height:10px}
.scroller::-webkit-scrollbar-thumb{background:#2a2b2e;border-radius:99px}
.wheel-x:hover{scroll-behavior:auto}
.explain-card{scroll-snap-align:start;border:1px solid #242528;border-radius:18px;background:#141516;padding:14px;min-height:240px;display:grid;grid-template-rows:140px auto auto;gap:8px}
.explain-card img{width:100%;height:140px;object-fit:cover;border-radius:12px}
.explain-card h4{margin:0}
.slider{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid #242528;background:#121315}
.slides{display:flex;transition:transform .5s ease}
.slides>img,.slides>.op-slide{width:100%}
.slides img{width:100%;max-height:460px;object-fit:cover;display:block;user-select:none}
.slide-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(15,16,18,.8);border:1px solid #2a2b2e;color:#fff;padding:10px 12px;border-radius:12px;cursor:pointer}
.slide-btn.prev{left:12px}.slide-btn.next{right:12px}
.dots{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:8px}
.dots button{width:10px;height:10px;border-radius:999px;border:1px solid #2a2b2e;background:#0e0f11;cursor:pointer}
.dots button.active{background:var(--accent);border-color:var(--accent)}
.op-slide{position:relative;display:grid;grid-template-rows:auto auto}
.op-slide img{width:100%;height:420px;object-fit:cover;display:block}
.op-caption{padding:16px;background:#141516;border-top:1px solid #242528}
.op-caption h3{margin:0 0 6px}
.op-caption p{margin:0;color:var(--muted)}
.timeline{position:relative;margin-top:24px}
.timeline.alt-lr::before{
  /* Hide the old centre dashed line; the new line is inserted via .timeline-line */
  display: none;
}
.timeline-item{
  position:relative;
  /* reduce width so that there is space around the centre dashed line */
  width:calc(50% - 40px);
  padding:16px 22px;
  border:1px solid #242528;
  border-radius:14px;
  background:#121316;
  box-shadow:var(--shadow);
  opacity:0;
  transform:translateY(24px);
}
.timeline-item h4{margin:0 0 6px}
.timeline-item p{margin:0;color:var(--muted)}
.timeline-item.left{
  left:0;
  /* no horizontal translation here; reveal script overrides vertical transform */
}
.timeline-item.right{
  /* position the right item beyond the centre dashed line to leave a gap */
  left:calc(50% + 40px);
}
.timeline-dot{position:absolute;top:20px;left:50%;transform:translate(-50%,-50%);width:14px;height:14px;background:var(--accent);border-radius:999px;box-shadow:0 0 0 4px #17181b}
.timeline-end{position:absolute;left:50%;bottom:0;transform:translate(-50%, 50%);width:22px;height:22px;border-radius:999px;border:2px solid #fff;box-shadow:0 0 0 5px #101113, inset 0 0 0 2px var(--accent)}
.team-pyramid{display:grid;gap:36px;position:relative}
.tier{display:flex;justify-content:center;gap:22px;position:relative}
.member{display:grid;justify-items:center;gap:10px;position:relative}
.member img{width:98px;height:98px;border-radius:999px;object-fit:cover;border:2px solid #2a2b2e;background:#111}
.member span{font-size:13px;color:var(--muted)}
.tier .node{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:999px;background:#d3d3d5;border:2px solid #2a2b2e}
.tier.lead .node{display:none}
.team-pyramid.dots::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:repeating-linear-gradient(180deg, #2a2b2e 0 8px, transparent 8px 16px);transform:translateX(-1px);opacity:.6}
.site-footer.solid.fancy{background:#0f1013;border-top:1px solid #1f2024;box-shadow:0 -10px 34px rgba(0,0,0,.5)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0;flex-wrap:wrap}
.footer-nav{display:flex;gap:18px;flex-wrap:wrap}
.footer-nav a{color:var(--muted);text-decoration:none;transition:color .2s ease}
.footer-nav a:hover{color:var(--accent)}
.site-footer p{margin:6px 0 0}

/* === Custom layout for operations grid === */
.ops-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
}
.op-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid #242528;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.op-card img{
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
}
.op-content{
  padding:16px;
  flex-grow:1;
}
.op-content h3{
  margin:0 0 6px;
}
.op-content p{
  margin:0;
  color:var(--muted);
}
.level-badge{
  position:absolute;
  top:12px;
  right:12px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:#fff;
}
.level-1 .level-badge{background:#3772ff;} /* blue */
.level-2 .level-badge{background:#f5a623;} /* orange */
.level-3 .level-badge{background:var(--accent);} /* red */

/* === Gallery grid styling === */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
}
.gallery-grid figure{
  display:flex;
  flex-direction:column;
  height:320px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid #242528;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.gallery-grid figure img{
  width:100%;
  height:70%;
  object-fit:cover;
  display:block;
}
.gallery-grid figure figcaption{
  flex-grow:1;
  padding:12px;
  font-size:14px;
  color:var(--muted);
}

/* === Discord tabs styling === */
.discord-tabs{
  margin-top:24px;
}
.discord-tabs .tab-list{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-bottom:20px;
}
.discord-tabs .tab{
  padding:8px 18px;
  border:1px solid #242528;
  border-radius:999px;
  background:#141516;
  color:var(--muted);
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.discord-tabs .tab.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.discord-tabs .tab-panels{
  position:relative;
}
.discord-tabs .tab-panel{
  display:none;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid #242528;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  display:grid;
  grid-template-rows:200px auto auto;
  gap:12px;
}
.discord-tabs .tab-panel.active{
  display:grid;
}
.discord-tabs .tab-panel img{
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:12px;
}
.discord-tabs .tab-panel h4{
  margin:0;
}
.discord-tabs .tab-panel p{
  margin:0;
  color:var(--muted);
}

/* === Discord Rotator (single field + vertical dots) === */
.discord-rotator{
  display:grid;
  grid-template-columns:40px 1fr;
  gap:18px;
  align-items:center;
}
.discord-frame{
  position:relative;
  border:1px solid #242528;
  border-radius:18px;
  overflow:hidden;
  background:#141516;
}
.discord-frame img{
  display:block;
  width:100%;
  height:360px;
  object-fit:cover;
  user-select:none;
  transition:opacity .2s ease;
}
.discord-caption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(0deg, rgba(0,0,0,.70), transparent);
  padding:14px 16px;
}
.discord-caption h3{
  margin:0 0 4px;
}
.discord-caption .tw{
  min-height:20px;
  color:var(--accent);
  font-weight:800;
  letter-spacing:.4px;
}
.discord-dots{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
}
.discord-dots button{
  width:10px;
  height:18px;
  border-radius:999px;
  border:1px solid #2a2b2e;
  background:#0f1012;
  cursor:pointer;
  opacity:.7;
  transition:opacity .15s ease, height .15s ease;
}
.discord-dots button.active{
  background:var(--accent);
  border-color:var(--accent);
  opacity:1;
  height:28px;
}
@media(max-width:720px){
  .discord-rotator{grid-template-columns:28px 1fr;}
  .discord-frame img{height:280px;}
}

/* === Gallery Rotator (similar to Discord) === */
.gallery-rotator{
  display:grid;
  grid-template-columns:40px 1fr;
  gap:18px;
  align-items:center;
}
.gallery-frame{
  position:relative;
  border:1px solid #242528;
  border-radius:18px;
  overflow:hidden;
  background:#141516;
}
.gallery-frame img{
  display:block;
  width:100%;
  height:420px;
  object-fit:cover;
  transition:opacity .2s ease;
}
.gallery-caption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,.7);
  padding:14px 16px;
}
.gallery-caption p{
  margin:0;
  /* Make captions stand out in red as requested */
  color:var(--accent);
}
.gallery-dots{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
}
.gallery-dots button{
  width:10px;
  height:18px;
  border-radius:999px;
  border:1px solid #2a2b2e;
  background:#0f1012;
  cursor:pointer;
  opacity:.7;
  transition:opacity .15s ease, height .15s ease;
}
.gallery-dots button.active{
  background:var(--accent);
  border-color:var(--accent);
  opacity:1;
  height:28px;
}
@media(max-width:720px){
  .gallery-rotator{grid-template-columns:28px 1fr;}
  .gallery-frame img{height:320px;}
}

/* === Large Ops Grid with categories === */
.ops-grid.big{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:28px;
}
@media(max-width:940px){
  .ops-grid.big{grid-template-columns:1fr;}
}
.ops-grid.big .op-card .front,
.ops-grid.big .op-card .back{
  min-height:520px;
}
.ops-grid.big .op-card .front img{
  height:360px;
}
.ops-grid.big .op-card .back{
  padding:20px;
}
/* Category badge colors */
.cat-combat{
  background:#2b1f26;
  border-color:#6f2235;
  color:#ff849b;
}
.cat-resource{
  background:#1f2b23;
  border-color:#2c6f49;
  color:#8cf0b7;
}
.cat-support{
  background:#1f262b;
  border-color:#2b5c6f;
  color:#86d6ff;
}
.cat-base{
  background:#2b281f;
  border-color:#6f612c;
  color:#f0dc8c;
}

/* === Flip-Cards === */
.op-card{
  perspective:1200px;
  cursor:pointer;
  outline:none;
}

/* === Discord Tutorial Grid === */
.discord-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:20px;
  margin-top:24px;
}
.discord-card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid #242528;
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.discord-card img{
  width:100%;
  height:140px;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:12px;
}
.discord-card h3{
  margin:0 0 6px;
}
.discord-card p{
  margin:0 0 8px;
  color:var(--muted);
}
.discord-cta{
  margin-top:20px;
  text-align:center;
}

/* === Testimonials Slider (horizontal sliding cards) === */
.testimonial-slider{
  position:relative;
  width:100%;
  height:320px;
  overflow:hidden;
  perspective:1200px;
  margin-top:24px;
}
.testimonial-slider .review-track{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.test-card{
  position:absolute;
  width:320px;
  max-width:90vw;
  padding:20px;
  border-radius:18px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid #242528;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  align-items:center;
  transition:transform .5s ease, opacity .5s ease;
}
.test-card .profile{
  width:64px;
  height:64px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #2a2b2e;
  margin-bottom:8px;
}
.test-card .stars{
  font-size:1.1rem;
  color:var(--accent);
  margin-bottom:6px;
  letter-spacing:2px;
}
.test-card .text{
  color:var(--muted);
  font-size:0.92rem;
  text-align:center;
  margin-bottom:8px;
}
.test-card .name{
  margin-top:auto;
  font-weight:700;
  color:var(--accent-2);
}
.team-pyramid .member {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.team-pyramid .member img {
  width: 72px;
  height: 72px;
  border-radius: 9999px;
  object-fit: cover;
  border: 2px solid #2a2b2e;
}
.team-pyramid .member-role {
  margin-top: 6px;
  font-size: 0.92rem;
  opacity: 0.85;
}
.team-pyramid .member-name {
  margin-top: 2px;
  font-size: 0.85rem;
  opacity: 0.7;
}
.team-pyramid .tier {
  position: relative;
  display: flex;
  gap: 60px;
  justify-content: center;
  align-items: center;
  margin: 18px 0;
}
/* Center single members in their tier */
.team-pyramid .tier .member:only-child {
  margin: 0 auto;
}
/* Ensure moderator tier has equal spacing */
.team-pyramid .tier.mod {
  gap: 80px;
}
.team-graph {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.op-card .flip{
  position:relative;
  transform-style:preserve-3d;
  transition:transform .55s ease;
}
.op-card .front,
.op-card .back{
  position:relative;
  backface-visibility:hidden;
  border:1px solid #242528;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  min-height:280px;
  display:flex;
  flex-direction:column;
}
.op-card .front img{
  width:100%;
  height:200px;
  object-fit:cover;
}
.op-card .op-body{
  padding:16px;
  flex-grow:1;
}
.op-card .op-body h3{
  margin:0 0 6px;
}
.op-card .op-body p{
  margin:0;
  color:var(--muted);
}
.op-card .back{
  position:absolute;
  inset:0;
  transform:rotateY(180deg);
  padding:16px;
}
.op-card .back h3{
  margin:0 0 6px;
}
.op-card .back .tw{
  min-height:20px;
  color:var(--accent);
  font-weight:800;
  letter-spacing:.4px;
}
.op-card.flipped .flip{
  transform:rotateY(180deg);
}
.op-card:focus-visible{
  box-shadow:0 0 0 3px rgba(209,49,47,.5);
  border-radius:18px;
}
.badge{
  position:absolute;
  top:12px;
  right:12px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:#fff;
  background:var(--accent);
}

/* Override default badge colours when category classes are present. Because
   the `.badge` rule appears after the category definitions above, the
   background set here will ordinarily override those definitions. To ensure
   our category colours apply, we define more specific selectors that
   include both classes. */
.badge.cat-combat{
  background:#2b1f26;
  border-color:#6f2235;
  color:#ff849b;
}
.badge.cat-resource{
  background:#1f2b23;
  border-color:#2c6f49;
  color:#8cf0b7;
}
.badge.cat-support{
  background:#1f262b;
  border-color:#2b5c6f;
  color:#86d6ff;
}
.badge.cat-base{
  background:#2b281f;
  border-color:#6f612c;
  color:#f0dc8c;
}

/* === Striped parallax background for sections === */
/* === Default striped background (deprecated in favour of bg-level-X) === */
.bg-striped{
  background-image: repeating-linear-gradient(135deg,
      rgba(12,12,14,.6) 0 6px,
      rgba(8,8,10,.6) 6px 12px);
  background-attachment: fixed;
}

/* === Section background variations for parallax effect === */
/* All parallax backgrounds use the same dark diagonal stripes for a consistent look. */
.bg-level-1,
.bg-level-2,
.bg-level-3,
.bg-level-4,
.bg-level-5,
.bg-level-6,
.bg-level-7,
.bg-level-8{
  background-image: repeating-linear-gradient(135deg,
      rgba(12,12,14,.6) 0 6px,
      rgba(8,8,10,.6) 6px 12px);
  background-attachment: fixed;
  background-size: cover;
}

/* === Testimonials (Feedback) section === */

/* === Testimonial rotator (a single bar with sliding reviews) === */
.testimonial-rotator{
  display:grid;
  grid-template-columns:40px 1fr;
  gap:18px;
  align-items:center;
}
.testimonial-dots{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
}
.testimonial-dots button{
  width:10px;
  height:18px;
  border-radius:999px;
  border:1px solid #2a2b2e;
  background:#0f1012;
  cursor:pointer;
  opacity:.7;
  transition:opacity .15s ease, height .15s ease;
}
.testimonial-dots button.active{
  background:var(--accent);
  border-color:var(--accent);
  opacity:1;
  height:28px;
}
.testimonial-frame{
  position:relative;
  border:1px solid #242528;
  border-radius:18px;
  overflow:hidden;
  background:#141516;
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-height:140px;
}
.testimonial-stars{
  font-size:1.2rem;
  color:var(--accent);
  margin-bottom:8px;
  letter-spacing:2px;
}
.testimonial-frame p{
  margin:0;
  text-align:center;
  color:var(--muted);
}

@media(max-width:720px){
  .testimonial-rotator{
    grid-template-columns:28px 1fr;
  }
}

/* === New Timeline enhancements === */
/* The vertical dashed line that grows on scroll */
.timeline-line{
  position:absolute;
  left:50%;
  top:0;
  width:2px;
  background:repeating-linear-gradient(180deg,#2a2b2e 0 8px,transparent 8px 16px);
  transform:translateX(-1px);
  height:0;
  transition:height 1s ease-out;
  z-index:0;
}
/* Each timeline item container */
.timeline-item{
  position:relative;
  width:calc(50% - 40px);
  margin:16px 0;
  border:1px solid #242528;
  border-radius:14px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  box-shadow:var(--shadow);
  padding:16px 22px;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}
.timeline-item.visible{
  opacity:1;
  transform:translateY(0);
}
.timeline-item.left{
  left:0;
}
.timeline-item.right{
  left:calc(50% + 40px);
}
.timeline-item h4{
  margin:0 0 6px;
}
.timeline-item p{
  margin:0;
  color:var(--muted);
}
/* Icon wrapper in timeline items */
.timeline-icon{
  display:flex;
  align-items:center;
  margin-bottom:6px;
}
.timeline-icon svg{
  width:20px;
  height:20px;
  fill:var(--accent);
  margin-right:6px;
}
[data-animate]{will-change:transform,opacity;opacity:0;transform:translateY(40px) scale(.97)}
.reveal{animation:rise .7s ease-out forwards}
@keyframes rise{from{opacity:0;transform:translateY(40px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:980px){
  .grid-2{grid-template-columns:1fr}
  .hero-inner{grid-template-columns:1fr}
}
@media(max-width:720px){
  .header-inner{grid-template-columns:1fr auto}
  .nav-secondary{flex-direction:column;gap:8px}
  .nav-primary ul{display:none;position:absolute;right:12px;top:56px;background:#0f1012;border:1px solid #2a2b2e;padding:10px;border-radius:12px;box-shadow:var(--shadow);flex-direction:column}
  .nav-primary li{margin:6px 0}
  .nav-primary .nav-tools,
  .nav-primary .nav-login{width:100%;justify-content:stretch}
  .nav-primary .nav-tools .dropdown{width:100%}
  .nav-primary .nav-tools .pill,
  .nav-primary .nav-login .pill{width:100%;text-align:center}
  .nav-toggle{display:inline-block}
  /* Add extra spacing between tools dropdown and login button on mobile */
  .nav-primary .nav-tools{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #2a2b2e}
  /* Make tools dropdown full width and more visible on mobile */
  .nav-primary .drop-menu{position:static;min-width:100%;margin-top:8px;background:#16171a}
  /* Increase padding for better readability on mobile */
  .nav-primary .drop-menu a{padding:12px 14px;font-size:15px}
  .timeline.alt-lr::before{left:12px;transform:none}
  .timeline-item{width:auto;margin-left:28px}
  .timeline-item.right{left:auto}
  .timeline-dot{left:12px;transform:translate(-50%,-50%)}
}

/* === Overrides and enhancements for uniform dark backgrounds and hero/card/testimonial positioning (v6.7 update) === */
.bg-level-1,
.bg-level-2,
.bg-level-3,
.bg-level-4,
.bg-level-5,
.bg-level-6,
.bg-level-7,
.bg-level-8,
.bg-striped {
  background: var(--bg) !important;
  background-image: none !important;
  background-attachment: scroll !important;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
  z-index: 0;
}

.hero .hero-inner {
  display: flex !important;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 140px);
  position: relative;
  z-index: 2;
}

.hero-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  background: linear-gradient(180deg,var(--panel),var(--panel-2));
  border: 1px solid #242528;
  box-shadow: var(--shadow);
  border-radius: 22px;
  overflow: hidden;
  max-width: 980px;
  width: 100%;
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 40px 100%, 0 calc(100% - 40px));
}

.hero-left,
.hero-right {
  flex: 1 1 50%;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-left .hero-title {
  font-size: clamp(36px, 6vw, 72px);
  margin: 0;
}

.hero-left .hero-sub {
  font-size: clamp(18px, 3vw, 32px);
  font-weight: 600;
  margin: 4px 0 16px;
  color: var(--muted);
}

.hero-divider {
  width: 1px;
  background: rgba(255,255,255,0.25);
  margin-top: 24px;
  margin-bottom: 24px;
}

.hero-right .hero-intro {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
}

.hero-right .cta-row {
  margin-top: auto;
  display: flex;
  gap: 16px;
}

.test-card {
  position: absolute;
  width: 320px;
  max-width: 90vw;
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(180deg,var(--panel),var(--panel-2));
  border: 1px solid #242528;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform .5s ease, opacity .5s ease;
}

.test-card .profile {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #2a2b2e;
  z-index: 2;
}

.test-card .review-body {
  width: 100%;
  margin-top: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.test-card .review-body .stars {
  font-size: 1.1rem;
  color: var(--accent);
  margin-bottom: 6px;
  letter-spacing: 2px;
}

.test-card .review-body .text {
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 8px;
}

.test-card .review-body .name {
  font-weight: 700;
  color: var(--accent-2);
}


/* === Discord features styling (v6.8 update) === */
.discord-features {
  display: grid;
  /* Make the cards longer: increase minimum width and gap */
  /* Max 2 columns: use auto-fit but limit to 2 with max constraint */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 32px;
  max-width: 100%;
}

@supports not (grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr))) {
  .discord-features {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}

@media (min-width: 920px) {
  .discord-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

.discord-feature {
  position: relative;
  display: flex;
  align-items: stretch;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid #242528;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow);

  /* 1:1 aspect ratio with max height */
  aspect-ratio: 1 / 1;
  max-height: 350px;
  width: 100%;
}

.discord-feature::after {
  /* cut the bottom-right corner to create a beveled facet */
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 60px;
  height: 60px;
  background: var(--bg);
  transform: translate(30px, -30px) rotate(-45deg);
  pointer-events: none;
}

.feature-text {
  flex: 1 1 60%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(15,16,18,0.5);
}

.feature-text h3 {
  margin: 0 0 8px;
}

.feature-text p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.feature-image {
  flex: 1 1 40%;
  position: relative;
}

.feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media(max-width: 860px) {
  .discord-feature {
    flex-direction: column;
  }
  .feature-text,
  .feature-image {
    flex: 1 1 auto;
  }
  .feature-text {
    order: 2;
  }
  .feature-image img {
    max-height: 125px;
  }
}

/* Make header and footer slightly transparent */
.site-header.solid.fancy {
  background: rgba(15,16,19,0.85);
}
.site-footer.solid.fancy {
  background: rgba(15,16,19,0.85);
}

/* Review CTA styling below testimonials */
.review-cta{
  margin-top:0px;
  text-align:center;
}
.review-cta .btn{
  font-size:1rem;
  padding:14px 24px;
}

/* === User Info Tool Styles === */
#userinfo-content {
  padding: 60px 20px;
  max-width: 1000px;
  margin: 0 auto;
  min-height: 80vh;
}

/* Loading state */
.userinfo-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  gap: 20px;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--panel-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.userinfo-loading p {
  color: var(--muted);
  font-size: 16px;
}

/* Error state */
.userinfo-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  text-align: center;
  padding: 40px;
}

.error-icon {
  width: 64px;
  height: 64px;
  color: var(--accent);
  margin-bottom: 20px;
}

.userinfo-error h3 {
  color: var(--accent);
  margin: 0 0 10px;
  font-size: 24px;
}

.userinfo-error p {
  color: var(--muted);
  margin: 0;
  max-width: 500px;
}

/* Main display */
.userinfo-display {
  display: grid;
  gap: 30px;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Header card with profile */
.userinfo-header-card {
  background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%);
  border-radius: var(--radius);
  padding: 35px;
  border: 1px solid #2a2b2e;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.userinfo-header-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), #ff6b6b, var(--accent));
  background-size: 200% auto;
  animation: gradient-shift 3s ease-in-out infinite;
}

.userinfo-profile {
  display: flex;
  align-items: center;
  gap: 25px;
}

.userinfo-avatar,
.userinfo-avatar-placeholder {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid var(--accent);
  box-shadow: 0 8px 20px rgba(209, 49, 47, 0.3);
  flex-shrink: 0;
}

.userinfo-avatar-placeholder {
  background: linear-gradient(135deg, var(--accent), #ff6b6b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  font-weight: 800;
  color: white;
}

.userinfo-profile-details {
  flex: 1;
}

.userinfo-username {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 800;
  background: linear-gradient(90deg, var(--text), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.userinfo-discord-id {
  margin: 0;
  color: var(--muted);
  font-family: 'Courier New', monospace;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Section cards */
.userinfo-section-card {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border-radius: var(--radius);
  padding: 30px;
  border: 1px solid #2a2b2e;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.userinfo-section-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
}

.userinfo-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid #2a2b2e;
}

.section-icon {
  width: 28px;
  height: 28px;
  color: var(--accent);
  flex-shrink: 0;
}

.userinfo-section-header h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
}

/* Permissions grid */
.permissions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.permission-badge {
  background: var(--panel-2);
  border: 1px solid #2a2b2e;
  border-radius: 10px;
  padding: 12px 16px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-align: center;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.permission-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(209, 49, 47, 0.1), transparent);
  transition: left 0.5s ease;
}

.permission-badge:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(209, 49, 47, 0.2);
}

.permission-badge:hover::before {
  left: 100%;
}

/* Guilds container */
.guilds-container {
  display: grid;
  gap: 20px;
}

.guild-card {
  background: var(--panel-2);
  border: 1px solid #2a2b2e;
  border-radius: 16px;
  padding: 20px;
  transition: all 0.2s ease;
}

.guild-card:hover {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--panel-2), #17181b);
}

.guild-name {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-2);
  display: flex;
  align-items: center;
  gap: 10px;
}

.guild-name::before {
  content: '▸';
  color: var(--accent);
  font-size: 24px;
}

.guild-id {
  margin: 0 0 15px;
  color: var(--muted);
  font-size: 13px;
}

.guild-id code {
  background: var(--panel);
  padding: 4px 8px;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  color: var(--accent);
}

.guild-roles-header {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.role-badge {
  background: var(--panel);
  border: 1px solid #2a2b2e;
  border-radius: 8px;
  padding: 8px 12px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: var(--accent);
  text-align: center;
  transition: all 0.2s ease;
}

.role-badge .role-id-hint {
  font-size: 10px;
  color: var(--muted);
  margin-left: 6px;
  opacity: 0.7;
}

.role-badge:hover {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--panel), var(--panel-2));
  transform: scale(1.05);
}

.role-badge:hover .role-id-hint {
  opacity: 1;
}

/* Info note */
.userinfo-note {
  color: var(--muted);
  font-style: italic;
  margin: 0;
  padding: 15px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  text-align: center;
}

/* Responsive design */
@media (max-width: 768px) {
  #userinfo-content {
    padding: 30px 15px;
  }
  
  .userinfo-header-card {
    padding: 25px;
  }
  
  .userinfo-profile {
    flex-direction: column;
    text-align: center;
  }
  
  .userinfo-username {
    font-size: 24px;
  }
  
  .userinfo-avatar,
  .userinfo-avatar-placeholder {
    width: 80px;
    height: 80px;
  }
  
  .userinfo-section-card {
    padding: 20px;
  }
  
  .permissions-grid,
  .roles-grid {
    grid-template-columns: 1fr;
  }
  
  .userinfo-discord-id {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* === Voice Time Stats Tool Styles === */
.voicetime-display {
  max-width: 1400px;
  margin: 0 auto;
  padding: 30px 20px;
}

.voicetime-header {
  text-align: center;
  margin-bottom: 30px;
}

.voicetime-header h2 {
  margin-bottom: 10px;
}

.voicetime-description {
  color: var(--muted);
  font-size: 16px;
}

.voicetime-search {
  margin-bottom: 25px;
  display: flex;
  justify-content: center;
}

.search-input {
  width: 100%;
  max-width: 500px;
  padding: 12px 20px;
  background: var(--panel);
  border: 1px solid #2a2b2e;
  border-radius: 12px;
  color: var(--text);
  font-size: 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(209, 49, 47, 0.1);
}

.search-input::placeholder {
  color: var(--muted);
}

.voicetime-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: var(--panel);
  border: 1px solid #2a2b2e;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

#voicetime-table-container {
  overflow-x: auto;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid #2a2b2e;
}

.voicetime-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.voicetime-table thead {
  background: var(--panel-2);
  border-bottom: 2px solid #2a2b2e;
}

.voicetime-table th {
  padding: 15px 20px;
  text-align: left;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
}

.voicetime-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.voicetime-table th.sortable:hover {
  background: rgba(209, 49, 47, 0.1);
  color: var(--accent);
}

.voicetime-table th.sorted-asc,
.voicetime-table th.sorted-desc {
  color: var(--accent);
}

.sort-indicator {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  opacity: 0.6;
}

.voicetime-table th.sortable:hover .sort-indicator {
  opacity: 1;
}

.voicetime-table tbody tr {
  border-bottom: 1px solid #1f2024;
  transition: background 0.2s ease;
}

.voicetime-table tbody tr:hover {
  background: var(--panel-2);
}

.voicetime-table tbody tr:last-child {
  border-bottom: none;
}

.voicetime-table td {
  padding: 15px 20px;
  color: var(--text);
}

.user-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar-small {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #2a2b2e;
  object-fit: cover;
}

.user-avatar-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
  border: 2px solid #2a2b2e;
}

.username {
  font-weight: 600;
}

.voice-time-cell {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  color: var(--accent);
}


.date-cell {
  color: var(--muted);
  font-size: 14px;
}

.no-data {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-style: italic;
}

/* === Admin Tool Styles === */
.admin-tool {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.admin-header {
  margin-bottom: 30px;
  text-align: center;
}

.admin-header h2 {
  margin: 0 0 10px;
}

.guild-info {
  color: var(--muted);
  font-size: 14px;
}

/* Admin Tabs */
.admin-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 2px solid #2a2b2e;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--panel-2);
}

.admin-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  position: relative;
  bottom: -2px;
}

.admin-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
}

.admin-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: rgba(209, 49, 47, 0.05);
}

.tab-icon {
  font-size: 18px;
  line-height: 1;
}

.tab-label {
  font-weight: 600;
}

.tab-badge {
  background: var(--panel-2);
  color: var(--text);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  min-width: 24px;
  text-align: center;
}

.admin-tab.active .tab-badge {
  background: var(--accent);
  color: white;
}

.admin-tab-content {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-description {
  color: var(--muted);
  font-size: 14px;
  margin: -5px 0 20px;
  font-style: italic;
}

.section-header-with-actions {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 20px;
}

.section-header-with-actions h3 {
  margin: 0 0 10px;
}

.btn-danger {
  background: #dc3545;
  color: white;
  border: 1px solid #dc3545;
}

.btn-danger:hover {
  background: #c82333;
  border-color: #bd2130;
  transform: translateY(-2px);
}

.guild-info code {
  background: var(--panel-2);
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--accent);
}

.guild-id-small,
.role-id-small {
  background: var(--panel-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--muted);
  margin-left: 8px;
}

.admin-section {
  background: var(--panel);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.admin-section h3 {
  margin: 0 0 15px;
  color: var(--text);
}

.permissions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.permission-group {
  background: var(--panel-2);
  border-radius: 8px;
  padding: 15px;
}

.permission-group h4 {
  margin: 0 0 10px;
  color: var(--accent);
  text-transform: capitalize;
  font-size: 16px;
}

.permission-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.permission-group li {
  padding: 4px 0;
}

.permission-group code {
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text);
}

.role-mappings-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.role-mapping-card {
  background: var(--panel-2);
  border-radius: 8px;
  padding: 15px;
  border: 1px solid #2a2b2e;
  transition: border-color 0.2s ease;
}

.role-mapping-card:hover {
  border-color: var(--accent);
}

.role-mapping-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.role-id {
  font-weight: 600;
}

.role-id code {
  background: var(--bg);
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--accent);
  margin-left: 5px;
}

.role-mapping-actions {
  display: flex;
  gap: 8px;
}

.btn-icon {
  background: transparent;
  border: 1px solid #2a2b2e;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 16px;
}

.btn-icon:hover {
  border-color: var(--accent);
  background: var(--accent);
}

.role-mapping-permissions {
  padding-top: 10px;
  border-top: 1px solid #2a2b2e;
}

.role-mapping-permissions ul {
  list-style: none;
  padding: 5px 0 0;
  margin: 5px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.role-mapping-permissions li {
  display: inline-block;
}

.role-mapping-permissions code {
  background: var(--bg);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--text);
  border: 1px solid #2a2b2e;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-style: italic;
}

.text-muted {
  color: var(--muted);
  font-style: italic;
}

/* Name Mappings Styles */
.name-mappings-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  margin-bottom: 15px;
}

.name-mapping-panel {
  background: var(--panel-2);
  border-radius: 8px;
  padding: 15px;
  border: 1px solid #2a2b2e;
}

.name-mapping-panel h4 {
  margin: 0 0 15px;
  color: var(--accent);
  font-size: 16px;
}

.name-mappings-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
  min-height: 100px;
}

.name-mapping-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
  border: 1px solid #2a2b2e;
  border-radius: 6px;
  padding: 10px 12px;
  transition: border-color 0.2s ease;
}

.name-mapping-item:hover {
  border-color: var(--accent);
}

.name-mapping-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.name-mapping-info strong {
  color: var(--text);
  font-size: 14px;
}

.name-mapping-info code {
  background: var(--panel-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--muted);
  display: inline-block;
}

.name-mapping-info small {
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}

.name-mapping-actions {
  display: flex;
  gap: 5px;
}

.btn-sm {
  font-size: 13px;
  padding: 8px 12px;
}

.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid #2a2b2e;
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.2s ease;
}

.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* Modal Styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.modal-content {
  background: var(--panel);
  border-radius: 12px;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #2a2b2e;
}

.modal-header h3 {
  margin: 0;
  color: var(--text);
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.2s ease;
}

.modal-close:hover {
  color: var(--accent);
}

.modal-body {
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text);
}

.form-group input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid #2a2b2e;
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.form-group input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}

.form-group input[type="text"]:read-only {
  background: var(--panel-2);
  color: var(--muted);
  cursor: not-allowed;
}

.form-group small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.permissions-checkboxes {
  background: var(--bg);
  border: 1px solid #2a2b2e;
  border-radius: 8px;
  padding: 15px;
  max-height: 400px;
  overflow-y: auto;
}

.permission-checkbox-group {
  margin-bottom: 15px;
}

.permission-checkbox-group:last-child {
  margin-bottom: 0;
}

.permission-checkbox-group h5 {
  margin: 0 0 8px;
  color: var(--accent);
  text-transform: capitalize;
  font-size: 14px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  padding: 6px 0;
  cursor: pointer;
  transition: color 0.2s ease;
}

.checkbox-label:hover {
  color: var(--accent);
}

.checkbox-label input[type="checkbox"] {
  margin-right: 10px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.checkbox-label span {
  font-size: 13px;
  font-family: 'Courier New', monospace;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #2a2b2e;
}

.btn-secondary {
  background: transparent;
  border: 1px solid #2a2b2e;
  color: var(--text);
}

.btn-secondary:hover {
  border-color: var(--muted);
  background: var(--panel-2);
}

.error-message,
.success-message {
  margin-top: 20px;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 600;
}

.error-message {
  background: rgba(209, 49, 47, 0.1);
  color: #ff6b6b;
  border: 1px solid rgba(209, 49, 47, 0.3);
}

.success-message {
  background: rgba(0, 200, 83, 0.1);
  color: #00c853;
  border: 1px solid rgba(0, 200, 83, 0.3);
}

.icon {
  margin-right: 5px;
}

/* Users List Styles */
.users-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding: 15px;
  background: var(--panel-2);
  border-radius: 8px;
}

.stat-item {
  color: var(--muted);
  font-size: 14px;
}

.stat-item strong {
  color: var(--text);
  font-size: 18px;
  margin-left: 5px;
}

.users-list {
  margin-top: 15px;
}

.users-table-container {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid #2a2b2e;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel-2);
}

.users-table thead {
  background: var(--bg);
}

.users-table th {
  padding: 12px 15px;
  text-align: left;
  font-weight: 600;
  color: var(--text);
  border-bottom: 2px solid #2a2b2e;
  white-space: nowrap;
}

.users-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.users-table th.sortable:hover {
  background: rgba(209, 49, 47, 0.1);
  color: var(--accent);
}

.users-table th.sortable .sort-icon {
  opacity: 0.5;
  font-size: 14px;
  margin-left: 4px;
}

.users-table th.sortable:hover .sort-icon {
  opacity: 1;
}

.users-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #2a2b2e;
  color: var(--text);
}

.users-table tr:last-child td {
  border-bottom: none;
}

.users-table tbody tr {
  transition: background 0.2s ease;
}

.users-table tbody tr:hover {
  background: var(--bg);
}

.user-avatar {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #2a2b2e;
  display: block;
}

.user-discord-id {
  background: var(--bg);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--muted);
  font-family: 'Courier New', monospace;
}

.user-guilds {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-guild-item {
  background: var(--bg);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--text);
  display: inline-block;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.status-active {
  background: rgba(0, 200, 83, 0.15);
  color: #00c853;
  border: 1px solid rgba(0, 200, 83, 0.3);
}

.status-inactive {
  background: rgba(150, 150, 150, 0.15);
  color: #999;
  border: 1px solid rgba(150, 150, 150, 0.3);
}

@media (max-width: 768px) {
  .voicetime-display {
    padding: 20px 10px;
  }
  
  .voicetime-stats {
    grid-template-columns: 1fr;
  }
  
  .voicetime-table {
    font-size: 13px;
  }
  
  .voicetime-table th,
  .voicetime-table td {
    padding: 10px 12px;
  }
  
  .user-avatar-small,
  .user-avatar-placeholder {
    width: 30px;
    height: 30px;
  }
  
  .stat-value {
    font-size: 24px;
  }

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

  .modal-content {
    width: 95%;
  }

  .role-mapping-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .users-table {
    font-size: 12px;
  }

  .users-table th,
  .users-table td {
    padding: 8px 10px;
  }

  .user-avatar {
    width: 36px;
    height: 36px;
  }

  .users-stats {
    flex-direction: column;
    gap: 10px;
  }

  .name-mappings-container {
    grid-template-columns: 1fr;
  }

  .admin-tabs {
    gap: 4px;
  }

  .admin-tab {
    padding: 10px 14px;
    font-size: 13px;
  }

  .tab-icon {
    font-size: 16px;
  }

  .tab-label {
    display: none;
  }

  .tab-badge {
    font-size: 11px;
    padding: 2px 6px;
  }

  .section-header-with-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .section-header-with-actions button {
    width: 100%;
  }
    gap: 10px;
  }
}