/* === 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;
}
*{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:26px;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: 16px;
  justify-content: center;
  align-items: center;
  margin: 18px 0;
}
.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}
  .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: 1;
  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: 1;
}

.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;
}

.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;
}

@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;
    gap: 10px;
  }
}