/* ── ReporTix — Professional Theme ────────────────────────── */

:root{
  --bg:#0a2e2a;
  --bg2:#1a4a44;
  --panel:#081a1a;
  --accent:#7FD3C6;
  --accent2:#5ec4b4;
  --text:#EDF8F5;
  --muted:rgba(237,248,245,.65);
  --stroke:rgba(127,211,198,.12);
  --stroke2:rgba(237,248,245,.08);
  --danger:#ff6a6a;
  --warn:#ffc86a;
  --ok:#28d6b8;
  --shadow: 0 24px 64px rgba(0,0,0,.4);
  --ease: .45s cubic-bezier(.22,.68,.18,1);
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Poppins', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ── Reset & Base ───────────────────────────────────────── */

*{box-sizing:border-box; margin:0; padding:0}
html{height:100%; scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
body{
  min-height:100%;
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
  opacity:0;
  transform:translateX(-20px);
}
body.page-enter{
  opacity:1;
  transform:translateX(0);
  transition:opacity var(--ease), transform var(--ease);
}
body.page-leave{
  opacity:0;
  transform:translateX(20px);
}

::selection{background:rgba(127,211,198,.25); color:var(--text)}
::-webkit-scrollbar{width:6px; height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(127,211,198,.18); border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(127,211,198,.30)}

/* ── Background Layers ──────────────────────────────────── */

.bgNoise{
  position:fixed; inset:0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.10'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
  opacity:.22;
  pointer-events:none;
  z-index:0;
}
.bgGlow{
  position:fixed; inset:-30%;
  background:
    radial-gradient(ellipse 900px 600px at 20% 15%, rgba(127,211,198,.13), transparent 60%),
    radial-gradient(ellipse 700px 500px at 80% 75%, rgba(94,196,180,.08), transparent 55%),
    radial-gradient(ellipse 500px 400px at 50% 40%, rgba(40,214,184,.05), transparent 50%);
  filter:blur(50px);
  pointer-events:none;
  z-index:0;
  animation:bgGlowShift 18s ease-in-out infinite alternate;
}
.bgOrbs{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.bgOrb{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:.6;
}
.bgOrb1{
  width:500px; height:500px;
  top:-10%; left:-5%;
  background:radial-gradient(circle, rgba(127,211,198,.12), transparent 70%);
  animation:orbFloat1 22s ease-in-out infinite;
}
.bgOrb2{
  width:400px; height:400px;
  bottom:10%; right:-8%;
  background:radial-gradient(circle, rgba(94,196,180,.10), transparent 70%);
  animation:orbFloat2 26s ease-in-out infinite;
}
.bgOrb3{
  width:300px; height:300px;
  top:40%; left:45%;
  background:radial-gradient(circle, rgba(40,214,184,.07), transparent 70%);
  animation:orbFloat3 20s ease-in-out infinite;
}
.bgGrid{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(rgba(127,211,198,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,211,198,.03) 1px, transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, black 20%, transparent 70%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, black 20%, transparent 70%);
}

/* ── Utilities ──────────────────────────────────────────── */

a{color:inherit; text-decoration:none}
.muted{color:var(--muted)}
.mono{font-family:var(--font-mono); font-size:.92em}
.soft{color:rgba(237,248,245,.82)}

.piece{opacity:0; transform:translateY(14px)}
.piece-in{opacity:1; transform:translateY(0)}

.svgIcon{
  width:20px; height:20px;
  display:inline-block;
  vertical-align:middle;
  color:rgba(127,211,198,.88);
  flex-shrink:0;
}
.cardIcon .svgIcon{width:24px; height:24px; color:rgba(127,211,198,.92)}
.sideIcon .svgIcon{width:18px; height:18px; color:rgba(237,248,245,.75)}
.searchIcon .svgIcon{width:18px; height:18px; color:rgba(237,248,245,.65)}
.navIcon{display:inline-flex; align-items:center; margin-right:6px}
.navIcon .svgIcon{width:16px; height:16px; color:rgba(237,248,245,.72)}

/* ── Glass Surface ──────────────────────────────────────── */

.glass{
  background:linear-gradient(135deg, rgba(10,30,30,.55) 0%, rgba(10,30,30,.30) 100%);
  border:1px solid rgba(127,211,198,.08);
  box-shadow:
    0 8px 32px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(237,248,245,.04),
    inset 0 -1px 0 rgba(0,0,0,.10);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);
  backdrop-filter:blur(24px) saturate(1.3);
}

/* ── Topbar ─────────────────────────────────────────────── */

.topbar{
  position:sticky; top:0; z-index:31;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
  padding:14px 28px;
  border-bottom:1px solid rgba(127,211,198,.06);
  background:linear-gradient(180deg, rgba(10,30,30,.72), rgba(10,30,30,.40));
  -webkit-backdrop-filter:blur(28px) saturate(1.4);
  backdrop-filter:blur(28px) saturate(1.4);
  box-shadow:0 4px 30px rgba(0,0,0,.15);
}
.brand{display:flex; align-items:center; gap:14px; min-width:240px}
.brandMark{
  width:38px; height:38px; border-radius:12px;
  border:1px solid rgba(127,211,198,.25);
  background:
    radial-gradient(circle at 35% 35%, rgba(127,211,198,.28), rgba(127,211,198,.03) 60%),
    linear-gradient(145deg, rgba(15,63,58,.9), rgba(10,30,30,.90));
  box-shadow:0 0 22px rgba(127,211,198,.15), inset 0 1px 0 rgba(237,248,245,.06);
  overflow:hidden;
  transition:box-shadow var(--ease), transform var(--ease);
}
.brand:hover .brandMark{transform:scale(1.05)}
.brand:hover .brandMark{box-shadow:0 0 28px rgba(127,211,198,.28)}
.brandLogo{width:100%; height:100%; object-fit:contain; display:block}
.brandText{display:flex; flex-direction:column; line-height:1.15}
.brandName{font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.3px}
.brandTagline{font-size:11px; color:rgba(237,248,245,.50); letter-spacing:.02em}

.nav{display:flex; gap:6px; flex-wrap:wrap}
.navLink{
  padding:8px 14px; border-radius:10px;
  border:1px solid transparent;
  color:rgba(237,248,245,.72);
  font-size:13px; font-weight:500;
  letter-spacing:.01em;
  transition:transform var(--ease), background var(--ease), border-color var(--ease), color var(--ease);
}
.navLink:hover{
  transform:translateY(-1px);
  background:rgba(127,211,198,.07);
  border-color:rgba(127,211,198,.14);
  color:var(--text);
}
.navLink.isActive{
  background:rgba(127,211,198,.10);
  border-color:rgba(127,211,198,.20);
  color:var(--text);
}

/* Nav dropdown (Reports & Tools) */
.navDropdown{
  position:relative;
  display:inline-block;
}
.navDropdownTrigger{
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
}
.navDropdownArrow{
  font-size:10px;
  opacity:.8;
  transition:transform 0.2s ease;
}
.navDropdown:hover .navDropdownArrow{
  transform:rotate(180deg);
}
/* غباش الصفحة بالكامل عند فتح القائمة (خارج الهيدر ليتغطى كل الصفحة) */
.navDropdownPageBackdrop{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100vw;
  height:100vh;
  min-width:100vw;
  min-height:100vh;
  z-index:29;
  -webkit-backdrop-filter:blur(24px);
  backdrop-filter:blur(24px);
  background:rgba(0,0,0,.32);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 0.25s ease, visibility 0.25s ease;
}
.navDropdownPageBackdrop.isOpen{
  opacity:1;
  visibility:visible;
}
.navDropdownPanel{
  position:absolute;
  top:100%;
  left:0;
  margin-top:6px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  overflow:visible;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index:30;
}
.navDropdown:hover .navDropdownPanel{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.navDropdownMenu{
  position:relative;
  z-index:1;
  min-width:180px;
  padding:8px;
  border-radius:12px;
  border:1px solid rgba(127,211,198,.18);
  background:linear-gradient(180deg, rgba(15,63,58,.95), rgba(10,30,30,.98));
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.navDropdownItem{
  display:block;
  padding:10px 14px;
  border-radius:8px;
  color:rgba(237,248,245,.80);
  font-size:13px;
  font-weight:500;
  text-decoration:none;
  transition:background 0.15s ease, color 0.15s ease;
}
.navDropdownItem:hover{
  background:rgba(127,211,198,.12);
  color:var(--text);
}
.navDropdownItem.isActive{
  background:rgba(127,211,198,.14);
  color:var(--text);
}
/* الصورة أمام القائمة — أنميشن ظهور عصري */
.navDropdownLogoWrap{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:0;
  margin-top:-60px;
  align-self:flex-end;
  pointer-events:none;
  opacity:0;
  transform:scale(0.82) translateY(20px);
  filter:blur(6px);
  transition:opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
    filter 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.navDropdown:hover .navDropdownLogoWrap{
  opacity:1;
  transform:scale(1) translateY(0);
  filter:blur(0);
  transition-delay:0.06s;
}
.navDropdownLogo{
  display:block;
  width:auto;
  max-width:160px;
  max-height:120px;
  height:auto;
  object-fit:contain;
  transform:translateX(50%) rotate(8deg);
}

.topbarRight{display:flex; align-items:center; gap:10px}
.userPill{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 14px 7px 8px;
  border-radius:var(--radius-pill);
  border:1px solid rgba(237,248,245,.10);
  background:rgba(10,30,30,.32);
  color:rgba(237,248,245,.80);
  font-size:13px;
}
.userAvatar{
  width:24px; height:24px;
  border-radius:var(--radius-pill);
  border:1.5px solid rgba(127,211,198,.25);
}

/* ── Buttons ────────────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:10px 18px;
  border-radius:var(--radius);
  border:1px solid rgba(237,248,245,.10);
  background:rgba(10,30,30,.38);
  color:var(--text);
  font-family:var(--font-body);
  font-size:13px; font-weight:500;
  cursor:pointer;
  transition:transform var(--ease), box-shadow var(--ease), background var(--ease), border-color var(--ease), filter var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btnAccent{
  background:linear-gradient(135deg, rgba(127,211,198,.95), rgba(94,196,180,.75));
  color:#06211f;
  font-weight:600;
  border-color:rgba(127,211,198,.40);
  box-shadow:0 4px 16px rgba(127,211,198,.20), 0 0 0 0 rgba(127,211,198,0);
  position:relative;
  overflow:hidden;
}
.btnAccent::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 50%);
  pointer-events:none;
}
.btnAccent:hover{filter:brightness(1.08); box-shadow:0 8px 32px rgba(127,211,198,.30), 0 0 0 4px rgba(127,211,198,.08)}
.btnGhost{
  background:rgba(127,211,198,.05);
  border-color:rgba(127,211,198,.14);
}
.btnGhost:hover{background:rgba(127,211,198,.10); border-color:rgba(127,211,198,.22)}
.btnTiny{padding:6px 12px; border-radius:10px; font-size:12px}
.iconBtn{
  background:transparent;
  border:1px solid rgba(237,248,245,.12);
  color:rgba(237,248,245,.85);
  border-radius:10px;
  padding:7px 10px;
  cursor:pointer;
  font-size:14px;
  transition:transform var(--ease), background var(--ease), border-color var(--ease);
}
.iconBtn:hover{transform:translateY(-1px); background:rgba(127,211,198,.06); border-color:rgba(127,211,198,.18)}

/* ── Main Container ─────────────────────────────────────── */

.main{max-width:1200px; margin:0 auto; padding:32px 28px 72px}

/* ── Hero ────────────────────────────────────────────────── */

.hero{padding-top:16px}
.heroInner{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:32px;
  padding:40px 36px;
  border-radius:24px;
  position:relative;
  overflow:hidden;
}
.heroInner::before{
  content:"";
  position:absolute;
  top:-50%; right:-20%;
  width:500px; height:500px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(127,211,198,.08), transparent 65%);
  filter:blur(60px);
  pointer-events:none;
}
.kicker{
  font-size:11px; font-weight:600;
  letter-spacing:.18em;
  color:rgba(127,211,198,.70);
  text-transform:uppercase;
}
.heroTitle{
  margin:14px 0 14px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(32px, 4.5vw, 50px);
  line-height:1.08;
  letter-spacing:-.02em;
}
.heroDesc{margin:0 0 20px; color:rgba(237,248,245,.72); max-width:56ch; line-height:1.7}
.heroCtas{display:flex; gap:12px; flex-wrap:wrap}
.heroBadges{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap}
.badge{
  display:flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:var(--radius-pill);
  background:linear-gradient(135deg, rgba(10,30,30,.38), rgba(10,30,30,.22));
  border:1px solid rgba(127,211,198,.08);
  color:rgba(237,248,245,.72);
  font-size:12px; font-weight:500;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:border-color var(--ease), transform var(--ease);
}
.badge:hover{border-color:rgba(127,211,198,.16); transform:translateY(-1px)}

.dot{width:8px; height:8px; border-radius:99px; display:inline-block; flex-shrink:0}
.dotActive{background:var(--ok); box-shadow:0 0 12px rgba(40,214,184,.30)}
.dotPending{background:var(--accent); box-shadow:0 0 10px rgba(127,211,198,.20)}
.dotArchived{background:rgba(237,248,245,.30)}

.heroRight{display:flex; flex-direction:column; gap:16px}
.logoCard{
  position:relative;
  border-radius:24px;
  padding:24px;
  border:1px solid rgba(127,211,198,.08);
  background:rgba(10,30,30,.45);
  overflow:hidden;
}
.logoCard::before{
  content:"";
  position:absolute; top:0; left:20%; right:20%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(127,211,198,.18), transparent);
}
.logoGlow{
  position:absolute; inset:-40%;
  background:
    radial-gradient(circle at 30% 30%, rgba(127,211,198,.14), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(94,196,180,.08), transparent 55%);
  filter:blur(30px);
  animation:logoGlowPulse 6s ease-in-out infinite alternate;
}
.logoImg{position:relative; width:100%; height:auto; display:block; filter:drop-shadow(0 20px 40px rgba(0,0,0,.50))}
.logoCaption{position:relative; margin-top:12px; color:rgba(237,248,245,.55); font-size:11px; letter-spacing:.10em; text-transform:uppercase}

.miniPanels{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.panel{border-radius:18px; padding:20px; position:relative; overflow:hidden}
.panel::before{
  content:"";
  position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(127,211,198,.10), transparent);
}
.panelTitle{font-weight:600; font-size:14px}
.panelMeta{margin-top:8px; font-size:12px; line-height:1.5}
.panelTitleRow{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px}

.pill{
  padding:5px 12px; border-radius:var(--radius-pill);
  border:1px solid rgba(237,248,245,.10);
  background:rgba(127,211,198,.05);
  font-size:11px; font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.pillOk{border-color:rgba(40,214,184,.20); background:rgba(40,214,184,.08); color:var(--ok)}
.pillWarn{border-color:rgba(255,200,106,.22); background:rgba(255,200,106,.08); color:var(--warn)}
.pillDanger{border-color:rgba(255,106,106,.20); background:rgba(255,106,106,.08); color:var(--danger)}

.meter{height:8px; border-radius:var(--radius-pill); background:rgba(237,248,245,.06); overflow:hidden; border:1px solid rgba(237,248,245,.04); position:relative}
.meterFill{
  height:100%;
  background:linear-gradient(90deg, rgba(94,196,180,.60), rgba(40,214,184,.88));
  box-shadow:0 0 14px rgba(127,211,198,.20);
  border-radius:var(--radius-pill);
  transition:width 1s var(--ease);
  position:relative;
}
.meterFill::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 60%, rgba(255,255,255,.15));
  border-radius:inherit;
}
.counter{font-size:28px; font-weight:600; margin-top:6px}

/* ── Sections ───────────────────────────────────────────── */

.section{margin-top:28px}
.sectionHead{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:18px}
.sectionTitle{font-family:var(--font-display); margin:0; font-size:22px; font-weight:700; letter-spacing:-.01em}
.sectionDesc{margin:0; color:var(--muted); font-size:13px}

/* ── Grid Layouts ───────────────────────────────────────── */

.grid4{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px}

/* ── Cards ──────────────────────────────────────────────── */

.card{
  border-radius:18px; padding:22px;
  position:relative; overflow:hidden;
  transition:transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(127,211,198,.15), transparent);
  opacity:0; transition:opacity var(--ease);
}
.card::after{
  content:"";
  position:absolute; inset:-40%;
  background:radial-gradient(circle at 30% 20%, rgba(127,211,198,.12), transparent 55%);
  opacity:0; transition:opacity var(--ease);
  pointer-events:none;
}
.card:hover{transform:translateY(-5px); border-color:rgba(127,211,198,.18); box-shadow:0 20px 60px rgba(0,0,0,.30), 0 0 0 1px rgba(127,211,198,.06)}
.card:hover::before, .card:hover::after{opacity:1}
.cardIcon{font-size:22px; margin-bottom:4px}
.cardTitle{margin-top:10px; font-weight:700; font-size:15px}
.cardDesc{margin-top:8px; color:rgba(237,248,245,.68); font-size:13px; line-height:1.6}
.cardHint{margin-top:14px; font-size:11px; color:rgba(127,211,198,.55); letter-spacing:.04em; text-transform:uppercase}

/* ── CTA Banner ─────────────────────────────────────────── */

.cta{
  border-radius:24px;
  padding:28px 32px;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  position:relative;
  overflow:hidden;
}
.cta::before{
  content:"";
  position:absolute; top:-50%; right:-10%;
  width:300px; height:300px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(127,211,198,.08), transparent 65%);
  filter:blur(40px);
  pointer-events:none;
}
.ctaTitle{font-family:var(--font-display); font-weight:700; font-size:19px}
.ctaDesc{margin-top:6px}
.ctaActions{display:flex; gap:10px; flex-wrap:wrap}

/* ── Footer ─────────────────────────────────────────────── */

.footer{margin-top:40px; border-top:none; position:relative}
.footer::before{
  content:"";
  position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(127,211,198,.12), transparent);
}
.footerInner{
  max-width:1200px; margin:0 auto; padding:20px 28px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:12px; color:rgba(237,248,245,.45);
}
.footerBrand{
  font-size:1em; font-weight:700; letter-spacing:0.06em;
  color:transparent;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1.2px rgba(127,211,198,.6);
}

/* ── Dashboard Shell ────────────────────────────────────── */

.shell{display:grid; grid-template-columns:260px 1fr; gap:18px}
.sidebar{
  border-radius:20px; padding:20px;
  position:sticky; top:82px; height:fit-content;
  overflow:hidden;
}
.sidebar::before{
  content:"";
  position:absolute; top:0; left:15%; right:15%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(127,211,198,.12), transparent);
}
.sidebarTitle{font-size:10px; font-weight:700; letter-spacing:.14em; color:rgba(237,248,245,.48); margin-bottom:12px; text-transform:uppercase}
.sideLink{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:12px;
  border:1px solid transparent;
  color:rgba(237,248,245,.75);
  font-size:13px; font-weight:500;
  transition:background var(--ease), border-color var(--ease), transform var(--ease), color var(--ease);
}
.sideLink:hover{transform:translateY(-1px); background:rgba(127,211,198,.06); border-color:rgba(127,211,198,.14); color:var(--text)}
.sideLink.isActive{background:rgba(127,211,198,.10); border-color:rgba(127,211,198,.18); color:var(--text)}
.sideIcon{opacity:.80}
.sideDivider{height:1px; background:rgba(237,248,245,.07); margin:14px 0}
.sideMeta{display:flex; flex-direction:column; gap:10px}
.statusRow{display:flex; align-items:center; gap:10px; color:rgba(237,248,245,.72); font-size:13px}

.contentHead{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap}
.pageTitle{margin:0; font-family:var(--font-display); font-size:28px; font-weight:700; letter-spacing:-.01em}
.pageActions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* ── Widgets ────────────────────────────────────────────── */

.widgets{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-top:16px}
.widget{border-radius:18px; padding:20px; position:relative; overflow:hidden}
.widget::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent 10%, rgba(127,211,198,.20), transparent 90%);
}
.widgetLabel{color:rgba(237,248,245,.55); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase}
.widgetValue{font-size:30px; font-weight:700; margin-top:8px; letter-spacing:-.02em}
.widgetHint{margin-top:10px; font-size:12px}

/* ── Timeline ───────────────────────────────────────────── */

.timeline{display:flex; flex-direction:column; gap:14px}
.timelineItem{display:flex; gap:14px}
.timelineDot{
  width:10px; height:10px; border-radius:99px;
  background:var(--accent2);
  margin-top:6px; flex-shrink:0;
  box-shadow:0 0 12px rgba(127,211,198,.22);
  position:relative;
}
.timelineDot::after{
  content:"";
  position:absolute;
  top:100%; left:50%;
  width:1px; height:calc(100% + 14px);
  background:linear-gradient(180deg, rgba(127,211,198,.15), transparent);
  transform:translateX(-50%);
}
.timelineItem:last-child .timelineDot::after{display:none}
.timelineText{color:rgba(237,248,245,.82); font-size:13px}
.timelineTime{font-size:11px; margin-top:4px}

/* ── Heatmap ────────────────────────────────────────────── */

.heatmapLegend{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  font-size:11px;
}
.heatLegendCell{
  width:14px;
  height:14px;
  border-radius:4px;
  border:1px solid rgba(237,248,245,.08);
}
.heatLegendCell[data-level="0"]{background:rgba(237,248,245,.06)}
.heatLegendCell[data-level="1"]{background:rgba(127,211,198,.2)}
.heatLegendCell[data-level="2"]{background:rgba(127,211,198,.45)}
.heatLegendCell[data-level="3"]{background:rgba(127,211,198,.75)}

.heatmap{display:grid; grid-template-columns:repeat(14, 1fr); gap:4px; margin-top:8px}
.heatCell{
  position:relative;
  aspect-ratio:1;
  border-radius:6px;
  background:rgba(237,248,245,.06);
  border:1px solid rgba(237,248,245,.04);
  transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
  cursor:pointer;
}
.heatCell[data-level="0"]{background:rgba(237,248,245,.06)}
.heatCell[data-level="1"]{background:rgba(127,211,198,.2); border-color:rgba(127,211,198,.12)}
.heatCell[data-level="2"]{background:rgba(127,211,198,.45); border-color:rgba(127,211,198,.2)}
.heatCell[data-level="3"]{background:rgba(127,211,198,.7); border-color:rgba(127,211,198,.35)}
.heatCell:hover{
  transform:translateY(-2px) scale(1.12);
  box-shadow:0 6px 18px rgba(0,0,0,.22), 0 0 12px rgba(127,211,198,.15);
}
.heatCell .heatCellTooltip{
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  padding:6px 10px;
  border-radius:8px;
  background:rgba(10,30,30,.95);
  border:1px solid rgba(127,211,198,.2);
  font-size:11px;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s ease, visibility .15s ease, transform .15s ease;
  z-index:5;
}
.heatCell:hover .heatCellTooltip,
.heatCell:focus .heatCellTooltip{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(-4px);
}

/* ── Reports Table ──────────────────────────────────────── */

.tableCard{border-radius:20px; padding:20px; position:relative; overflow:hidden}
.tableCard::before{
  content:"";
  position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(127,211,198,.10), transparent);
}
.tableHead{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px}
.tableTitle{font-weight:700; font-size:15px}
.tableFilters{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:var(--radius-pill);
  border:1px solid rgba(237,248,245,.10);
  background:rgba(10,30,30,.28);
  color:rgba(237,248,245,.72);
  font-size:12px; font-weight:500;
  cursor:pointer;
  transition:transform var(--ease), background var(--ease), border-color var(--ease), color var(--ease);
}
.chip:hover{transform:translateY(-1px); background:rgba(127,211,198,.07); border-color:rgba(127,211,198,.16); color:var(--text)}
.chip.isActive{background:rgba(127,211,198,.10); border-color:rgba(127,211,198,.20); color:var(--text); font-weight:600}
.chip.chipAction{
  background:rgba(94,196,180,.06);
  border-color:rgba(94,196,180,.12);
  color:rgba(94,196,180,.9);
}
.chip.chipAction:hover{
  background:rgba(94,196,180,.10);
  border-color:rgba(94,196,180,.20);
  color:var(--accent2);
}

.filterDivider{
  width:1px;
  height:20px;
  background:rgba(237,248,245,.08);
  margin:0 4px;
}

.tableWrap{overflow:auto; border-radius:14px; border:1px solid rgba(127,211,198,.06)}
.table{width:100%; border-collapse:separate; border-spacing:0; min-width:1120px}
.table thead th{
  position:sticky; top:0;
  background:rgba(10,30,30,.75);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  text-align:left;
  padding:12px 14px;
  font-size:11px; font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(237,248,245,.50);
  border-bottom:1px solid rgba(237,248,245,.08);
}
.table tbody td{
  padding:12px 14px;
  border-bottom:1px solid rgba(237,248,245,.05);
  vertical-align:top;
  font-size:13px;
}
.row{transition:background var(--ease), box-shadow var(--ease)}
.row:hover{background:rgba(127,211,198,.04); box-shadow:inset 3px 0 0 rgba(127,211,198,.25)}
.rowTitle{font-weight:600; font-size:13px}
.rowSub{margin-top:3px; font-size:12px; line-height:1.4}
.tags{display:flex; gap:6px; flex-wrap:wrap}
.tag{
  padding:4px 10px; border-radius:var(--radius-pill);
  background:rgba(127,211,198,.05);
  border:1px solid rgba(127,211,198,.12);
  font-size:11px;
  color:rgba(237,248,245,.75);
}
.status{display:inline-flex; align-items:center; gap:8px}

.search{position:relative}
.searchInput{
  width:260px;
  padding:10px 38px 10px 14px;
  border-radius:12px;
  border:1px solid rgba(127,211,198,.08);
  background:linear-gradient(135deg, rgba(10,30,30,.38), rgba(10,30,30,.25));
  color:var(--text);
  font-family:var(--font-body);
  font-size:13px;
  outline:none;
  transition:border-color var(--ease), box-shadow var(--ease), background var(--ease);
}
.searchInput::placeholder{color:rgba(237,248,245,.30)}
.searchInput:focus{border-color:rgba(127,211,198,.25); box-shadow:0 0 0 3px rgba(127,211,198,.06); background:rgba(10,30,30,.40)}
.searchIcon{position:absolute; right:12px; top:50%; transform:translateY(-50%); opacity:.6}

/* ── Insights Visuals ───────────────────────────────────── */

.aiBox{display:flex; flex-direction:column; gap:12px}
.aiLead{font-size:15px; line-height:1.6; color:rgba(237,248,245,.88)}
.graph{
  position:relative;
  height:260px;
  border-radius:18px;
  border:1px solid rgba(127,211,198,.06);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(127,211,198,.04), transparent 70%),
    rgba(10,30,30,.28);
  overflow:hidden;
}
.graph::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(127,211,198,.04) 1px, transparent 1px);
  background-size:30px 30px;
  opacity:.5;
  pointer-events:none;
}
.node{
  position:absolute;
  width:68px; height:68px;
  border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(127,211,198,.16);
  background:linear-gradient(135deg, rgba(127,211,198,.08), rgba(127,211,198,.02));
  box-shadow:0 12px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(237,248,245,.04);
  font-size:11px; font-weight:700;
  letter-spacing:.05em;
  color:rgba(237,248,245,.85);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  animation:float 4.5s ease-in-out infinite;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.node:hover{border-color:rgba(127,211,198,.30); box-shadow:0 12px 36px rgba(0,0,0,.28), 0 0 20px rgba(127,211,198,.12)}
.nodeMain{left:50%; top:50%; transform:translate(-50%,-50%); width:84px; height:84px; font-size:14px; font-weight:700; border-color:rgba(127,211,198,.25); background:linear-gradient(135deg, rgba(127,211,198,.12), rgba(127,211,198,.04))}
.nodeA{left:14%; top:28%}
.nodeB{left:72%; top:18%; animation-delay:.5s}
.nodeC{left:78%; top:66%; animation-delay:1s}
.nodeD{left:18%; top:68%; animation-delay:1.5s}
.edge{
  position:absolute;
  height:1px;
  background:linear-gradient(90deg, rgba(127,211,198,.0), rgba(127,211,198,.22), rgba(127,211,198,.0));
  opacity:.7;
}
.edge::after{
  content:"";
  position:absolute; inset:0;
  background:inherit;
  filter:blur(4px);
}
.e1{left:26%; top:42%; width:42%; transform:rotate(10deg)}
.e2{left:44%; top:28%; width:34%; transform:rotate(-8deg)}
.e3{left:46%; top:62%; width:36%; transform:rotate(12deg)}
.e4{left:26%; top:62%; width:34%; transform:rotate(-16deg)}

.chart{
  height:260px; border-radius:18px;
  border:1px solid rgba(127,211,198,.06);
  background:rgba(10,30,30,.28);
  display:flex; align-items:flex-end; padding:20px 18px 18px;
  position:relative;
}
.chart::before{
  content:"";
  position:absolute; left:18px; right:18px; bottom:18px;
  height:1px;
  background:linear-gradient(90deg, rgba(127,211,198,.10), rgba(127,211,198,.05));
}
.bars{display:flex; gap:10px; align-items:flex-end; width:100%}
.bar{
  width:100%;
  border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg, rgba(127,211,198,.82), rgba(94,196,180,.20));
  border:1px solid rgba(127,211,198,.14);
  transform:translateY(12px);
  opacity:0;
  animation:rise .7s var(--ease) forwards;
  transition:filter .25s ease, box-shadow .25s ease, transform .25s ease;
  position:relative;
}
.bar::after{
  content:"";
  position:absolute; top:0; left:0; right:0; height:40%;
  background:linear-gradient(180deg, rgba(255,255,255,.08), transparent);
  border-radius:inherit;
  pointer-events:none;
}
.bar:nth-child(2){animation-delay:.06s}
.bar:nth-child(3){animation-delay:.12s}
.bar:nth-child(4){animation-delay:.18s}
.bar:nth-child(5){animation-delay:.24s}
.bar:nth-child(6){animation-delay:.30s}
.bar:nth-child(7){animation-delay:.36s}
.bar:nth-child(8){animation-delay:.42s}
.bar:hover{filter:brightness(1.12); box-shadow:0 0 24px rgba(127,211,198,.20); transform:translateY(-2px)}

/* ── Insights Stats Row ─────────────────────────────────── */
.insightStats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  margin-top:18px;
  margin-bottom:18px;
}
@media(max-width:768px){.insightStats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.insightStats{grid-template-columns:1fr}}
.iStatCard{
  padding:20px 18px;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  gap:4px;
  border:1px solid rgba(127,211,198,.08);
  transition:border-color .3s ease, transform .25s ease;
}
.iStatCard:hover{border-color:rgba(127,211,198,.18); transform:translateY(-2px)}
.iStatLabel{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(237,248,245,.45)}
.iStatValue{font-size:32px; font-weight:800; letter-spacing:-.02em; color:rgba(237,248,245,.92); line-height:1.1}
.iStatSub{font-size:12px}
.iStatDanger{color:rgba(255,106,106,.90)}
.iStatOk{color:rgba(127,211,198,.90)}
.iStatWarn{color:rgba(255,200,106,.90)}

/* ── AI Meta Row ────────────────────────────────────────── */
.aiMetaRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(127,211,198,.06);
}
.aiMetaChip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:10px;
  background:rgba(127,211,198,.04);
  border:1px solid rgba(127,211,198,.08);
  font-size:12px;
}

/* ── Trend Chart ────────────────────────────────────────── */
.trendChart{
  position:relative;
  height:220px;
  border-radius:18px;
  border:1px solid rgba(127,211,198,.06);
  background:rgba(10,30,30,.28);
  padding:16px 18px 32px 48px;
  display:flex;
  flex-direction:column;
}
.trendGrid{
  position:absolute;
  inset:16px 18px 32px 48px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  pointer-events:none;
}
.trendGridLine{
  width:100%;
  height:1px;
  background:linear-gradient(90deg, rgba(127,211,198,.08), rgba(127,211,198,.03));
  position:relative;
}
.trendGridLabel{
  position:absolute;
  left:-40px;
  top:-7px;
  font-size:10px;
  width:34px;
  text-align:right;
}
.trendBars{
  flex:1;
  display:flex;
  align-items:flex-end;
  gap:6px;
  position:relative;
  z-index:1;
}
.tBar{
  flex:1;
  min-width:0;
  border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg, rgba(127,211,198,.85), rgba(94,196,180,.25));
  border:1px solid rgba(127,211,198,.16);
  position:relative;
  opacity:0;
  transform:translateY(10px);
  animation:rise .6s var(--ease, cubic-bezier(.4,0,.2,1)) forwards;
  transition:filter .25s ease, box-shadow .25s ease, transform .25s ease;
  cursor:pointer;
}
.tBar:hover{
  filter:brightness(1.15);
  box-shadow:0 0 20px rgba(127,211,198,.22);
  transform:translateY(-3px) !important;
}
.tBar::after{
  content:"";
  position:absolute; top:0; left:0; right:0; height:40%;
  background:linear-gradient(180deg, rgba(255,255,255,.10), transparent);
  border-radius:inherit;
  pointer-events:none;
}
.tBarTip{
  position:absolute;
  top:-22px;
  left:50%;
  transform:translateX(-50%);
  font-size:10px;
  color:rgba(237,248,245,.70);
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
  white-space:nowrap;
}
.tBar:hover .tBarTip{opacity:1}
.trendLabels{
  display:flex;
  gap:6px;
  position:absolute;
  bottom:8px;
  left:48px;
  right:18px;
}
.tLabel{
  flex:1;
  text-align:center;
  font-size:9px;
  min-width:0;
}

/* ── Risk Clusters (Cards) ──────────────────────────────── */
.riskClusters{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:4px 0;
}
.riskCard{
  padding:14px 16px;
  border-radius:14px;
  background:rgba(10,30,30,.32);
  border:1px solid rgba(127,211,198,.06);
  transition:border-color .3s ease;
}
.riskCard:hover{border-color:rgba(127,211,198,.14)}
.riskCardHead{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.riskDot{
  width:10px;
  height:10px;
  border-radius:50%;
  flex-shrink:0;
}
.riskDotHigh{background:rgba(255,106,106,.80); box-shadow:0 0 8px rgba(255,106,106,.30)}
.riskDotMed{background:rgba(255,200,106,.80); box-shadow:0 0 8px rgba(255,200,106,.30)}
.riskDotLow{background:rgba(127,211,198,.80); box-shadow:0 0 8px rgba(127,211,198,.30)}
.riskLabel{flex:1; font-size:13px; font-weight:600; color:rgba(237,248,245,.80)}
.riskCount{font-size:18px; font-weight:800; color:rgba(237,248,245,.90)}
.riskProgressWrap{
  width:100%;
  height:6px;
  border-radius:6px;
  background:rgba(127,211,198,.06);
  overflow:hidden;
}
.riskProgress{
  height:100%;
  border-radius:6px;
  transition:width .8s cubic-bezier(.4,0,.2,1);
  min-width:2px;
}
.riskProgressHigh{background:linear-gradient(90deg, rgba(255,106,106,.70), rgba(255,106,106,.40))}
.riskProgressMed{background:linear-gradient(90deg, rgba(255,200,106,.70), rgba(255,200,106,.40))}
.riskProgressLow{background:linear-gradient(90deg, rgba(127,211,198,.70), rgba(127,211,198,.40))}
.riskPercent{font-size:11px; margin-top:6px; text-align:right}

/* ── Network Graph (Updated) ────────────────────────────── */
.edgeSvg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
}
.edgeLine{
  stroke:rgba(127,211,198,.18);
  stroke-width:1.2;
  stroke-dasharray:6 4;
  animation:dashMove 12s linear infinite;
}
.edgePulse{fill:rgba(127,211,198,.50)}
@keyframes dashMove{to{stroke-dashoffset:-120}}
.node{z-index:1}
.nodeIcon{margin-bottom:2px; opacity:.7}
.nodeText{font-size:10px; letter-spacing:.06em}
.nodeBadge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:20px;
  height:20px;
  border-radius:10px;
  background:rgba(127,211,198,.20);
  border:1px solid rgba(127,211,198,.30);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  font-weight:700;
  color:rgba(237,248,245,.90);
  padding:0 5px;
}
.nodeMain .nodeBadge{
  background:rgba(127,211,198,.30);
  border-color:rgba(127,211,198,.45);
  font-size:11px;
  min-width:24px;
  height:24px;
}
.nodeMain{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
}
.topUsersRow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(127,211,198,.06);
}
.topUserChip{
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:8px;
  background:rgba(127,211,198,.04);
  border:1px solid rgba(127,211,198,.08);
  font-size:11px;
  color:rgba(237,248,245,.75);
}

.clusters{
  position:relative; height:260px;
  border-radius:18px;
  border:1px solid rgba(127,211,198,.06);
  background:rgba(10,30,30,.28);
  overflow:hidden;
}
.clusters::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(127,211,198,.03), transparent 60%);
  pointer-events:none;
}
.cluster{
  position:absolute;
  border-radius:var(--radius-pill);
  filter:blur(22px);
  opacity:.75;
  animation:pulse 3.5s ease-in-out infinite;
}
.c1{width:160px; height:160px; left:14%; top:18%; background:rgba(255,106,106,.10)}
.c2{width:220px; height:220px; left:44%; top:30%; background:rgba(127,211,198,.12); animation-delay:.7s}
.c3{width:150px; height:150px; left:68%; top:10%; background:rgba(255,200,106,.08); animation-delay:1.4s}

/* ── Token Generator Page ───────────────────────────────── */
.tgStatsBar{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin:18px 0 22px;
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
}
@media(max-width:600px){.tgStatsBar{grid-template-columns:1fr}}
.tgStatItem{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(127,211,198,.08);
  font-size:12px;
}
.tgStatItem svg{color:rgba(127,211,198,.50); flex-shrink:0}
.tgStatVal{color:rgba(237,248,245,.88); font-weight:700; margin-left:auto; font-size:13px}
.tgStatOk{color:rgba(127,211,198,.90)}

.tgSteps{margin-bottom:24px}

.tgMainCard{margin-bottom:16px}
.tgAltCard{
  border:1px solid rgba(127,211,198,.06);
  opacity:.85;
  transition:opacity .3s ease;
}
.tgAltCard:hover{opacity:1}

.tgDesc{
  font-size:13px;
  line-height:1.6;
  margin:12px 0 16px;
}
.tgConfigNotice{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:12px;
  background:rgba(255,200,106,.04);
  border:1px solid rgba(255,200,106,.12);
  font-size:12px;
  color:rgba(237,248,245,.70);
  margin-bottom:18px;
}
.tgConfigNotice svg{color:rgba(255,200,106,.60); flex-shrink:0}
.tgLink{color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(127,211,198,.20)}
.tgLink:hover{border-color:var(--accent)}

.tgFormRow{
  display:flex;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
}
.tgField{flex:0 0 140px}
.tgInput{
  text-align:center;
  font-size:16px;
  font-weight:700;
  letter-spacing:.04em;
}
.tgBtnGroup{
  display:flex;
  gap:10px;
  flex:1;
  justify-content:flex-end;
  align-items:flex-end;
  padding-bottom:22px;
}
.tgRunBtn{
  display:flex;
  align-items:center;
  gap:8px;
}
.tgTerminal{margin-top:18px}

/* Result boxes */
.tgResultBox{
  margin-top:16px;
  padding:16px;
  border-radius:14px;
  border:1px solid rgba(127,211,198,.10);
  background:rgba(10,30,30,.30);
  font-size:13px;
}
.tgResultSuccess{
  background:rgba(40,214,184,.06);
  border-color:rgba(40,214,184,.20);
}
.tgResultError{
  background:rgba(255,106,106,.06);
  border-color:rgba(255,106,106,.20);
}
.tgResultHead{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:14px;
  color:rgba(237,248,245,.90);
  margin-bottom:12px;
}
.tgResultSuccess .tgResultHead svg{color:var(--ok)}
.tgResultError .tgResultHead svg{color:var(--danger)}
.tgAccCard{
  padding:12px 14px;
  border-radius:10px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(127,211,198,.06);
  margin-bottom:10px;
}
.tgAccCard:last-child{margin-bottom:0}
.tgAccRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:5px 0;
  font-size:12px;
  border-bottom:1px solid rgba(127,211,198,.04);
}
.tgAccRow:last-child{border-bottom:none}
.tgAccRow .mono{
  max-width:65%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:rgba(237,248,245,.85);
}

/* Instructions steps */
.tgInstructions{
  display:flex;
  flex-direction:column;
  gap:0;
  margin:16px 0;
}
.tgInstrStep{
  display:flex;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid rgba(127,211,198,.06);
  align-items:flex-start;
}
.tgInstrStep:last-child{border-bottom:none}
.tgInstrNum{
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(127,211,198,.08);
  border:1.5px solid rgba(127,211,198,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  color:var(--accent);
  flex-shrink:0;
}
.tgInstrContent{flex:1}
.tgInstrTitle{
  font-size:14px;
  font-weight:700;
  color:rgba(237,248,245,.88);
  margin-bottom:4px;
}
.tgInstrContent code{
  background:rgba(127,211,198,.08);
  padding:2px 7px;
  border-radius:5px;
  font-size:12px;
  color:var(--accent);
}

/* File grid */
.tgFileGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:16px 0;
}
@media(max-width:500px){.tgFileGrid{grid-template-columns:1fr}}
.tgFileItem{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:12px;
  background:rgba(127,211,198,.03);
  border:1px solid rgba(127,211,198,.06);
  transition:border-color .25s ease, background .25s ease;
}
.tgFileItem:hover{
  border-color:rgba(127,211,198,.16);
  background:rgba(127,211,198,.06);
}
.tgFileIcon{
  color:rgba(127,211,198,.45);
  flex-shrink:0;
}
.tgFileName{
  font-size:13px;
  font-weight:600;
  color:rgba(237,248,245,.85);
}
.tgFileMeta{font-size:11px}
.tgFolderPath{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:10px;
  background:rgba(127,211,198,.04);
  border:1px solid rgba(127,211,198,.06);
  font-size:12px;
  margin-bottom:18px;
}
.tgFolderPath svg{color:rgba(127,211,198,.40); flex-shrink:0}

.pillAccent{
  background:rgba(127,211,198,.15);
  border-color:rgba(127,211,198,.30);
  color:var(--accent);
}

/* ── Modal ──────────────────────────────────────────────── */

.modal{
  position:fixed; top:0; left:0; width:100%; height:100%;
  display:none;
  align-items:center; justify-content:center;
  padding:24px;
  z-index:9999;
}
.modal.isOpen{display:flex}
.modalBackdrop{position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.65); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); z-index:0}
.modalPanel{
  position:relative;
  z-index:1;
  width:min(720px, 100%);
  border-radius:22px;
  border:1px solid rgba(127,211,198,.10);
  background:linear-gradient(145deg, rgba(10,30,30,.92), rgba(10,30,30,.80));
  -webkit-backdrop-filter:blur(28px) saturate(1.3);
  backdrop-filter:blur(28px) saturate(1.3);
  box-shadow:0 32px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(127,211,198,.04);
  transform:translateY(14px) scale(.97);
  opacity:0;
  animation:pop .35s var(--ease) forwards;
}
.modalPanel::before{
  content:"";
  position:absolute; top:0; left:15%; right:15%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(127,211,198,.18), transparent);
}
.modalHeader{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid rgba(237,248,245,.08)}
.modalTitle{font-weight:700; font-size:15px}
.modalBody{padding:20px}
.modalFooter{padding:14px 20px; border-top:1px solid rgba(237,248,245,.08); display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap}

.kv{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px}
.kvRow{display:flex; justify-content:space-between; gap:10px; padding:11px 16px; border-radius:14px; background:linear-gradient(135deg, rgba(127,211,198,.04), rgba(127,211,198,.01)); border:1px solid rgba(127,211,198,.06)}
.divider{height:1px; background:rgba(237,248,245,.07); margin:14px 0}
.reportSummary{margin-top:8px; color:rgba(237,248,245,.78); line-height:1.6}

/* ── Animations ─────────────────────────────────────────── */

@keyframes pop{to{transform:translateY(0) scale(1); opacity:1}}
@keyframes float{0%,100%{transform:translate(0,0)} 50%{transform:translate(0,-7px)}}
@keyframes pulse{0%,100%{transform:scale(1); opacity:.80} 50%{transform:scale(1.06); opacity:.95}}
@keyframes rise{to{transform:translateY(0); opacity:1}}
@keyframes bgGlowShift{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(3%,-3%) scale(1.05)}
}
@keyframes orbFloat1{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(8%,12%) scale(1.1)}
  66%{transform:translate(-5%,6%) scale(.95)}
}
@keyframes orbFloat2{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(-10%,-8%) scale(1.08)}
  66%{transform:translate(6%,-4%) scale(.96)}
}
@keyframes orbFloat3{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(12%,-10%) scale(1.12)}
}
@keyframes logoGlowPulse{
  0%{opacity:.7; filter:blur(30px)}
  100%{opacity:1; filter:blur(35px)}
}

/* ── Table Footer & Modal Extras ─────────────────────────── */

.tableFooter{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:14px 4px 0; flex-wrap:wrap;
  font-size:12px;
}
.discordIdTag{
  font-size:10px; letter-spacing:.02em;
  max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  display:inline-block;
}
.channelTag{
  padding:3px 10px; border-radius:var(--radius-pill);
  background:rgba(94,196,180,.06);
  border:1px solid rgba(94,196,180,.12);
  font-size:11px;
  color:var(--accent2);
}
.modalStatusRow{display:flex; gap:8px; flex-wrap:wrap}
.modalSectionLabel{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px}
.modalActions{display:flex; gap:8px; flex-wrap:wrap}

/* ── User Lookup ────────────────────────────────────────── */

.userLookupCard{border-radius:20px; padding:22px; position:relative; overflow:hidden}
.userLookupCard::before{
  content:"";
  position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(127,211,198,.12), transparent);
}
.lookupForm{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap}
.lookupInputWrap{display:flex; flex-direction:column; gap:6px; flex:1; min-width:220px}
.lookupLabel{font-size:10px; font-weight:700; letter-spacing:.12em; color:rgba(237,248,245,.48)}
.lookupInput{width:100%}
.lookupResult{margin-top:4px}
.lookupResultUser{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  margin-bottom:12px;
  border-radius:12px;
  background:rgba(127,211,198,.05);
  border:1px solid rgba(127,211,198,.1);
}
.lookupAvatar{
  width:44px;
  height:44px;
  border-radius:50%;
  border:2px solid rgba(127,211,198,.2);
  object-fit:cover;
}
.lookupResultUserInfo{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.lookupResultUserInfo .mono:first-child{font-weight:600; font-size:14px}
.lookupResultUserInfo .muted{font-size:11px}

/* ── Sidebar User Card ──────────────────────────────────── */

.sideUserCard{
  display:flex; align-items:center; gap:12px;
  padding:12px; border-radius:14px;
  background:rgba(127,211,198,.04);
  border:1px solid rgba(127,211,198,.08);
  margin-bottom:6px;
}
.sideUserAvatar{width:36px; height:36px; border-radius:50%; border:2px solid rgba(127,211,198,.20)}
.sideUserInfo{display:flex; flex-direction:column; overflow:hidden}
.sideUserName{font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sideUserId{font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ── Feature List ───────────────────────────────────────── */

.featureList{list-style:none; display:flex; flex-direction:column; gap:10px}
.featureList li{
  padding:10px 14px; border-radius:12px;
  background:rgba(127,211,198,.03);
  border:1px solid rgba(127,211,198,.06);
  font-size:13px; line-height:1.5;
}
.featureList li::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent2); margin-right:10px; vertical-align:middle}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width:1080px){
  .heroInner{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr 1fr}
  .widgets{grid-template-columns:1fr 1fr}
}

@media (max-width:768px){
  .topbar{padding:12px 16px; gap:12px}
  .brand{min-width:auto}
  .main{padding:20px 16px 48px}
  .grid2{grid-template-columns:1fr}
  .shell{grid-template-columns:1fr}
  .sidebar{position:relative; top:auto}
  .heroInner{padding:24px 20px}
  .cta{flex-direction:column; text-align:center}
  .ctaActions{justify-content:center}
  .footerInner{justify-content:center; text-align:center}
}

@media (max-width:520px){
  .topbar{flex-wrap:wrap}
  .nav{width:100%; justify-content:center}
  .topbarRight{width:100%; justify-content:center; flex-wrap:wrap}
  .grid4{grid-template-columns:1fr}
  .widgets{grid-template-columns:1fr}
  .searchInput{width:100%}
  .heroTitle{font-size:28px}
  .miniPanels{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .lookupForm{flex-direction:column}
  .lookupInputWrap{min-width:100%}
  
  /* Mobile table adjustments */
  .userCell{gap:8px}
  .avatarContainer{width:28px; height:28px}
  .discordAvatar, .noUserAvatar{width:28px; height:28px}
  .userCellId{font-size:10px; max-width:100px}
  .userCellHint{display:none}
  .timeCell{text-align:center}
  .timeCellSub{font-size:9px}
  .tableFooter{flex-direction:column; gap:8px; text-align:center}
  .footerLeft{flex-direction:column; gap:4px}
}

/* ── Forms ──────────────────────────────────────────────── */

.reportForm{max-width:680px; margin:0 auto}
.formSection{display:flex; flex-direction:column; gap:12px}

/* ── Submit Steps ──────────────────────────────────────── */

.submitSteps{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin-bottom:28px;
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
}
.submitStep{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  border-radius:var(--radius);
  background:rgba(127,211,198,.04);
  border:1px solid rgba(127,211,198,.08);
  transition:all .3s var(--ease);
  opacity:.5;
}
.submitStep.isActive{
  opacity:1;
  background:rgba(127,211,198,.10);
  border-color:rgba(127,211,198,.25);
  box-shadow:0 0 20px rgba(127,211,198,.08);
}
.submitStep.isDone{
  opacity:.75;
  background:rgba(40,214,184,.08);
  border-color:rgba(40,214,184,.20);
}
.submitStepNum{
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(127,211,198,.12);
  border:1.5px solid rgba(127,211,198,.20);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  color:var(--accent);
  flex-shrink:0;
  transition:all .3s var(--ease);
}
.submitStep.isActive .submitStepNum{
  background:var(--accent);
  color:var(--bg);
  border-color:var(--accent);
}
.submitStep.isDone .submitStepNum{
  background:var(--ok);
  color:var(--bg);
  border-color:var(--ok);
}
.submitStepText{
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
}
.submitStepLine{
  width:40px;
  height:2px;
  background:rgba(127,211,198,.12);
  flex-shrink:0;
}

.submitStepPanel{
  max-width:680px;
  margin:0 auto;
  animation:stepFadeIn .35s ease;
}
@keyframes stepFadeIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── Review Grid ───────────────────────────────────────── */

.reviewGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:18px;
}
.reviewItem{
  padding:14px 16px;
  border-radius:12px;
  background:rgba(127,211,198,.04);
  border:1px solid rgba(127,211,198,.08);
}
.reviewItemFull{
  grid-column:1 / -1;
  padding:14px 16px;
  border-radius:12px;
  background:rgba(127,211,198,.04);
  border:1px solid rgba(127,211,198,.08);
}
.reviewLabel{
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.reviewValue{
  font-size:14px;
  font-weight:500;
  word-break:break-word;
}
.reviewDesc{
  white-space:pre-wrap;
  line-height:1.6;
  max-height:120px;
  overflow-y:auto;
}

.submitNotice{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:14px 16px;
  border-radius:12px;
  background:rgba(127,211,198,.04);
  border:1px solid rgba(127,211,198,.08);
  margin-bottom:18px;
  font-size:13px;
  line-height:1.5;
}
.submitNotice svg{
  flex-shrink:0;
  margin-top:2px;
  color:var(--accent);
}

.fieldCharCount{
  font-size:11px;
  text-align:right;
}

/* ── Mass Report Terminal ───────────────────────────── */

.massTerminal{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(127,211,198,.10);
  margin-bottom:18px;
}
.termHeader{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 16px;
  background:rgba(0,0,0,.35);
  border-bottom:1px solid rgba(127,211,198,.08);
}
.termDots{display:flex;gap:6px}
.termDot{width:10px;height:10px;border-radius:50%}
.termDotRed{background:#ff5f57}
.termDotYellow{background:#ffbd2e}
.termDotGreen{background:#28c840}
.termTitle{flex:1;font-size:11px;color:var(--muted);text-align:center}
.termStatus{
  font-size:10px;
  letter-spacing:.1em;
  font-weight:700;
  padding:3px 10px;
  border-radius:var(--radius-pill);
  background:rgba(127,211,198,.10);
  color:var(--accent);
}
.termRunning{
  background:rgba(255,189,46,.12);
  color:#ffbd2e;
  animation:termPulse 1.5s ease-in-out infinite;
}
.termDone{background:rgba(40,214,184,.12);color:var(--ok)}
.termFailed{background:rgba(255,106,106,.12);color:var(--danger)}

@keyframes termPulse{
  0%,100%{opacity:1}
  50%{opacity:.5}
}

.termBody{
  background:rgba(0,0,0,.50);
  padding:16px;
  max-height:350px;
  overflow-y:auto;
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.8;
}
.termLine{
  white-space:pre-wrap;
  word-break:break-all;
}
.termSystem{color:var(--muted)}
.termInfo{color:var(--accent)}
.termSuccess{color:var(--ok)}
.termError{color:var(--danger)}
.termWarn{color:var(--warn)}
.termDefault{color:var(--text);opacity:.85}

/* ── Summary Bar ───────────────────────────────────── */

.massSummaryBar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-bottom:18px;
}
.summaryItem{
  text-align:center;
  padding:12px 8px;
  border-radius:12px;
  border:1px solid;
}
.summarySuccess{background:rgba(40,214,184,.08);border-color:rgba(40,214,184,.18)}
.summaryFailed{background:rgba(255,106,106,.08);border-color:rgba(255,106,106,.18)}
.summaryRate{background:rgba(255,200,106,.08);border-color:rgba(255,200,106,.18)}
.summaryTotal{background:rgba(127,211,198,.06);border-color:rgba(127,211,198,.12)}
.summaryValue{font-size:20px;font-weight:700}
.summarySuccess .summaryValue{color:var(--ok)}
.summaryFailed .summaryValue{color:var(--danger)}
.summaryRate .summaryValue{color:var(--warn)}
.summaryTotal .summaryValue{color:var(--accent)}
.summaryLabel{font-size:10px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.08em;font-weight:600}

@media (max-width:520px){
  .massSummaryBar{grid-template-columns:repeat(2,1fr)}
}

/* ── Mode Switcher ──────────────────────────────────── */

.modeSwitcher{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-bottom:28px;
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
  background:rgba(127,211,198,.04);
  border:1px solid rgba(127,211,198,.08);
  border-radius:var(--radius);
  padding:5px;
}
.modeBtn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 20px;
  border:none;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:all .3s var(--ease);
}
.modeBtn:hover{
  color:var(--text);
  background:rgba(127,211,198,.06);
}
.modeBtn.isActive{
  background:rgba(127,211,198,.12);
  color:var(--accent);
  box-shadow:0 2px 12px rgba(127,211,198,.10);
  border:1px solid rgba(127,211,198,.18);
}
.modeBtn svg{
  flex-shrink:0;
  opacity:.7;
  transition:opacity .3s var(--ease);
}
.modeBtn.isActive svg{
  opacity:1;
}

@media (max-width:520px){
  .submitSteps{flex-wrap:wrap; gap:8px; justify-content:center}
  .submitStepLine{display:none}
  .submitStep{padding:8px 14px}
  .reviewGrid{grid-template-columns:1fr}
  .modeSwitcher{flex-direction:column}
}
.field{display:flex; flex-direction:column; gap:6px}
.fieldLabel{
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  color:rgba(237,248,245,.82);
}
.fieldInput{
  padding:12px 14px;
  border-radius:var(--radius);
  border:1px solid var(--stroke2);
  background:rgba(8,26,26,.35);
  color:var(--text);
  font-family:var(--font-body);
  font-size:14px;
  outline:none;
  transition:border-color var(--ease), box-shadow var(--ease), background var(--ease);
}
.fieldInput:focus{
  border-color:rgba(127,211,198,.25);
  box-shadow:0 0 0 3px rgba(127,211,198,.08);
  background:rgba(8,26,26,.45);
}
.fieldInput::placeholder{color:rgba(237,248,245,.45)}
.fieldTextarea{resize:vertical; min-height:80px; font-family:var(--font-body)}
.fieldHint{font-size:11px}

/* Custom Select / Dropdown Styling */
.customSelect{
  position:relative;
  width:100%;
}
.customSelect-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-radius:var(--radius);
  border:1px solid var(--stroke2);
  background:rgba(8,26,26,.35);
  color:var(--text);
  font-family:var(--font-body);
  font-size:14px;
  cursor:pointer;
  transition:border-color var(--ease), background var(--ease);
  -webkit-user-select:none;
  user-select:none;
}
.customSelect-trigger:hover{
  border-color:rgba(127,211,198,.3);
  background:rgba(8,26,26,.5);
}
.customSelect.isOpen .customSelect-trigger{
  border-color:rgba(127,211,198,.4);
  background:rgba(8,26,26,.55);
  border-radius:var(--radius) var(--radius) 0 0;
}
.customSelect-arrow{
  width:10px;
  height:10px;
  transition:transform 0.2s ease;
}
.customSelect.isOpen .customSelect-arrow{
  transform:rotate(180deg);
}
.customSelect-dropdown{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:rgba(13,32,32,.98);
  border:1px solid rgba(127,211,198,.25);
  border-top:none;
  border-radius:0 0 var(--radius) var(--radius);
  max-height:200px;
  overflow-y:auto;
  z-index:1000;
  display:none;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.customSelect.isOpen .customSelect-dropdown{
  display:block;
  animation:dropdownFadeIn 0.15s ease;
}
@keyframes dropdownFadeIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
.customSelect-option{
  padding:11px 14px;
  cursor:pointer;
  transition:background 0.15s ease, color 0.15s ease;
  color:var(--text);
  font-size:14px;
  border-bottom:1px solid rgba(127,211,198,.08);
}
.customSelect-option:last-child{
  border-bottom:none;
}
.customSelect-option:hover{
  background:rgba(127,211,198,.12);
  color:var(--accent);
}
.customSelect-option.isSelected{
  background:rgba(127,211,198,.18);
  color:var(--accent);
  font-weight:500;
}
.customSelect-option.isSelected::before{
  content:'';
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--accent);
  border-radius:50%;
  margin-right:8px;
}
/* Scrollbar for dropdown */
.customSelect-dropdown::-webkit-scrollbar{width:6px}
.customSelect-dropdown::-webkit-scrollbar-track{background:rgba(0,0,0,.2);border-radius:3px}
.customSelect-dropdown::-webkit-scrollbar-thumb{background:rgba(127,211,198,.3);border-radius:3px}
.customSelect-dropdown::-webkit-scrollbar-thumb:hover{background:rgba(127,211,198,.5)}

/* Hide original select when custom is active */
select.fieldInput.hasCustom{
  display:none;
}

.formActions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:16px;
  flex-wrap:wrap;
}

.spinner{
  width:16px;
  height:16px;
  border:2px solid rgba(255,255,255,.2);
  border-top:2px solid currentColor;
  border-radius:50%;
  animation:spin .8s linear infinite;
}

.successMessage{text-align:center; padding:10px 0}
.successMessage .mono{font-size:18px; margin-bottom:10px; color:var(--accent)}

@keyframes spin{0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)}}

/* ── Auth Required Page ─────────────────────────────────── */

.authNotice{
  max-width:500px;
  margin:60px auto;
  text-align:center;
  padding:40px 30px;
  border-radius:var(--radius-lg);
}
.authIcon{
  font-size:48px;
  margin-bottom:20px;
  opacity:.8;
}
.authTitle{
  margin-bottom:16px;
  font-family:var(--font-display);
  font-size:24px;
  font-weight:700;
}
.authDesc{
  margin-bottom:24px;
  color:var(--muted);
  line-height:1.6;
}
.authActions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.authError{
  padding:12px 16px;
  border-radius:var(--radius);
  background:rgba(255,106,106,.08);
  border:1px solid rgba(255,106,106,.15);
  color:rgba(255,106,106,.9);
  font-size:13px;
  margin-bottom:16px;
}

/* ── Modal & Icon Enhancements ─────────────────────────── */

.modalTitleIcon{
  display:inline-block;
  margin-right:8px;
  vertical-align:middle;
}
.modalTitleIcon .svgIcon{
  width:20px;
  height:20px;
  color:var(--accent);
}

.authIcon .svgIcon{
  width:48px;
  height:48px;
  color:var(--accent);
  opacity:.8;
}

.iconBtn .svgIcon{
  width:16px;
  height:16px;
  color:rgba(237,248,245,.75);
  transition:color var(--ease);
}
.iconBtn:hover .svgIcon{
  color:var(--accent);
}

/* Additional icon contexts */
.btnText + .spinner{margin-left:8px}
.modalTitle .svgIcon{margin-right:6px}

/* ── Discord User Cells ────────────────────────────────── */

.userCell{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 0;
}

.avatarContainer{
  position:relative;
  width:32px;
  height:32px;
  flex-shrink:0;
}

.discordAvatar{
  width:100%;
  height:100%;
  border-radius:8px;
  border:1px solid rgba(127,211,198,.15);
  background:rgba(127,211,198,.05);
  transition:transform var(--ease), border-color var(--ease), box-shadow var(--ease);
  object-fit:cover;
}

.discordAvatar.fallback{
  opacity:.7;
}
.discordAvatar.realAvatar{
  opacity:1;
}

.avatarPlaceholder{
  position:absolute;
  inset:0;
  border-radius:8px;
  background:linear-gradient(135deg, rgba(127,211,198,.08), rgba(94,196,180,.06));
  border:1px solid rgba(127,211,198,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(127,211,198,.6);
  font-size:12px;
  font-weight:700;
  z-index:-1;
  transition:z-index .3s, opacity .3s;
}

.avatarPlaceholder:before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:6px;
  background:radial-gradient(circle at 30% 30%, rgba(127,211,198,.12), transparent 60%);
}

.noUserAvatar{
  width:32px;
  height:32px;
  border-radius:8px;
  background:rgba(237,248,245,.08);
  border:1px solid rgba(237,248,245,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(237,248,245,.4);
  font-size:16px;
  font-weight:600;
}

.userCellText{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.userCellId{
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:color var(--ease);
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

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

.userCellHint{
  font-size:10px;
}

.timeCell{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.timeCellMain{
  font-size:12px;
  font-weight:500;
}
.timeCellSub{
  font-size:10px;
}

/* ── Modal Discord User Section ───────────────────────── */

.modalUserSection{
  margin:14px 0;
  padding:18px;
  border-radius:14px;
  background:rgba(127,211,198,.04);
  border:1px solid rgba(127,211,198,.10);
  position:relative;
  overflow:hidden;
}

.modalUserSection:before{
  content:"";
  position:absolute;
  top:0; left:20%; right:20%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(127,211,198,.15), transparent);
}

.modalUserHeader{
  display:flex;
  align-items:center;
  gap:16px;
}

.modalAvatarContainer{
  position:relative;
  width:56px;
  height:56px;
  flex-shrink:0;
}

.modalUserAvatar{
  width:100%;
  height:100%;
  border-radius:14px;
  border:1px solid rgba(127,211,198,.25);
  background:rgba(127,211,198,.06);
  object-fit:cover;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}

.modalAvatarPlaceholder{
  position:absolute;
  inset:0;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(127,211,198,.10), rgba(94,196,180,.08));
  border:1px solid rgba(127,211,198,.15);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(127,211,198,.7);
  font-size:24px;
  z-index:1;
}

.modalUserInfo{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}

.modalUserLabel{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:600;
}

.modalUserId{
  font-size:16px;
  font-weight:700;
  color:var(--accent);
  text-shadow:0 0 10px rgba(127,211,198,.15);
}

.modalUserActions{
  display:flex;
  gap:8px;
  margin-top:6px;
}

.modalUserActions .btn{
  padding:4px 8px;
  font-size:11px;
}

.modalAvatarIcon{
  filter:drop-shadow(0 0 6px rgba(127,211,198,.2));
}

/* ── User ID Click Effects ─────────────────────────────── */

.userCellId{
  position:relative;
}

.userCellId:active{
  transform:scale(0.98);
}

.userCellId:hover:after{
  content:"📋 Click to copy";
  position:absolute;
  bottom:-24px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(8,26,26,.95);
  color:var(--accent);
  padding:6px 10px;
  border-radius:6px;
  font-size:10px;
  white-space:nowrap;
  border:1px solid rgba(127,211,198,.20);
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  z-index:15;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

/* ── Loading States ────────────────────────────────────── */

.discordAvatar[src=""]{
  opacity:0;
}

.discordAvatar{
  image-rendering: -webkit-optimize-contrast;
}

/* ── Live Indicator & Table Footer ────────────────────── */

.tableFooter{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 0 8px;
  border-top:1px solid rgba(237,248,245,.06);
  margin-top:8px;
  flex-wrap:wrap;
  gap:12px;
}

.footerLeft{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.liveIndicator{
  display:flex;
  align-items:center;
  gap:8px;
}
.liveDot{
  width:8px;
  height:8px;
  background:var(--ok);
  border-radius:50%;
  animation:livePulse 2s ease-in-out infinite;
  box-shadow:0 0 8px rgba(40,214,184,.3);
}

@keyframes livePulse{
  0%,100%{opacity:1; transform:scale(1)}
  50%{opacity:.6; transform:scale(1.2)}
}

/* ── Enhanced Row Hover ────────────────────────────────── */

.row:hover .avatarContainer{
  transform:translateY(-1px);
}

.row:hover .discordAvatar{
  border-color:rgba(127,211,198,.30);
  box-shadow:0 4px 12px rgba(0,0,0,.2), 0 0 0 2px rgba(127,211,198,.08);
  transform:scale(1.08);
}

.row:hover .noUserAvatar{
  border-color:rgba(237,248,245,.20);
  background:rgba(237,248,245,.12);
}

.row:hover .userCellId{
  color:var(--accent);
  text-shadow:0 0 8px rgba(127,211,198,.2);
}

.row:hover .timeCellMain{
  color:var(--text);
}

.row:hover .userCellHint{
  color:rgba(127,211,198,.8);
}

/* ── Toast Notifications ───────────────────────────────── */

.toast{
  font-family:var(--font-body);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}

/* ── Responsive Table Improvements ─────────────────────── */

@media (max-width:768px){
  .table{min-width:900px}
  .userCellHint{display:none}
  .timeCellSub{display:none}
}

/* ── Profile Page ──────────────────────────────────────── */

.profileCard{
  display:flex;
  align-items:center;
  gap:20px;
  padding:20px 0;
}
.profileAvatarWrap{
  position:relative;
  flex-shrink:0;
}
.profileAvatar{
  width:80px;
  height:80px;
  border-radius:20px;
  border:2px solid rgba(127,211,198,.25);
  object-fit:cover;
}
.profileAvatarPlaceholder{
  width:80px;
  height:80px;
  border-radius:20px;
  background:linear-gradient(135deg, rgba(127,211,198,.15), rgba(94,196,180,.10));
  border:2px solid rgba(127,211,198,.20);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  font-weight:700;
  color:var(--accent);
}
.profileOnline{
  position:absolute;
  bottom:2px;
  right:2px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--ok);
  border:3px solid var(--panel);
  box-shadow:0 0 8px rgba(40,214,184,.4);
}
.profileInfo{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.profileName{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:700;
}
.profileId{font-size:12px}
.profileEmail{font-size:12px}

.profileStats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  padding-top:16px;
  border-top:1px solid var(--stroke);
}
.profileStat{text-align:center}
.profileStatValue{font-size:22px;font-weight:700}
.profileStatLabel{font-size:11px;margin-top:2px}

.webhookActions{
  display:flex;
  gap:10px;
  margin-top:16px;
  flex-wrap:wrap;
}
.webhookResult{
  margin-top:14px;
  padding:12px 16px;
  border-radius:var(--radius);
  border:1px solid;
  font-size:13px;
}
.btnDanger{
  background:rgba(255,106,106,.12);
  border:1px solid rgba(255,106,106,.20);
  color:var(--danger);
  padding:10px 18px;
  border-radius:var(--radius);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background var(--ease),border-color var(--ease);
}
.btnDanger:hover{
  background:rgba(255,106,106,.20);
  border-color:rgba(255,106,106,.35);
}

/* Generated tokens list (profile) */
.tokenPanel{ grid-column:1/-1; }
.tokenList{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.tokenCard{
  padding:0;
  border-radius:var(--radius);
  border:1px solid var(--panelBorder);
  overflow:hidden;
  transition:border-color .2s;
}
.tokenCard:hover{ border-color:rgba(127,211,198,.35); }
.tokenCardHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px;
  border-bottom:1px solid var(--panelBorder);
  background:rgba(255,255,255,.02);
}
.tokenTypeBadge{
  font-size:10px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  padding:3px 10px;
  border-radius:20px;
}
.tokenBadgeDiscord{
  background:rgba(88,101,242,.18);
  color:#7983f5;
}
.tokenBadgeApi{
  background:rgba(255,183,77,.15);
  color:#ffb74d;
}
.tokenCardBody{ padding:14px 16px; }
.tokenRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.tokenRow:last-child{ margin-bottom:0; }
.tokenRowHighlight{
  margin-top:4px;
  padding-top:10px;
  border-top:1px solid var(--panelBorder);
}
.tokenLbl{
  min-width:90px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.tokenVal{
  flex:1;
  font-size:13px;
  word-break:break-all;
}
.tokenEmpty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:28px 16px;
  text-align:center;
  font-size:13px;
}
.tokenEmpty a{ color:var(--accent); }
.btnSm{
  padding:6px 12px;
  font-size:12px;
}
.btnXs{
  padding:3px 8px;
  font-size:11px;
  border-radius:6px;
  line-height:1.4;
}
.btnIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  padding:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
  color:var(--muted);
  flex-shrink:0;
}
.btnIcon:hover{
  transform:scale(1.1);
}
.btnIcon:active{
  transform:scale(.95);
}
.btnIconDanger{ border-color:rgba(255,106,106,.2); color:var(--danger); }
.btnIconDanger:hover{ background:rgba(255,106,106,.15); border-color:rgba(255,106,106,.35); }
.btnIconSuccess{ border-color:rgba(40,214,184,.2); color:var(--ok); }
.btnIconSuccess:hover{ background:rgba(40,214,184,.15); border-color:rgba(40,214,184,.35); }
.btnIconAccent{ border-color:rgba(127,211,198,.2); color:var(--accent); }
.btnIconAccent:hover{ background:rgba(127,211,198,.15); border-color:rgba(127,211,198,.35); }
.btnIconWarn{ border-color:rgba(255,200,106,.2); color:var(--warn); }
.btnIconWarn:hover{ background:rgba(255,200,106,.15); border-color:rgba(255,200,106,.35); }

@media (max-width:520px){
  .profileStats{grid-template-columns:repeat(2,1fr)}
  .profileCard{flex-direction:column;text-align:center}
}

/* ── Browser Frame (Token Generator) ─────────────────── */

.browserFrame{
  margin-top:16px;
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  background:var(--panel);
  overflow:hidden;
  animation:fadeSlideUp .4s var(--ease);
}
.browserBar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  background:rgba(0,0,0,.25);
  border-bottom:1px solid var(--stroke);
}
.browserDots{display:flex;gap:6px}
.browserDot{width:10px;height:10px;border-radius:50%}
.browserDotRed{background:#ff5f57}
.browserDotYellow{background:#febc2e}
.browserDotGreen{background:#28c840}
.browserUrl{
  flex:1;
  padding:4px 10px;
  border-radius:6px;
  background:rgba(255,255,255,.06);
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.browserScreen{
  position:relative;
  aspect-ratio:16/9;
  background:#1a1a2e;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  cursor:crosshair;
  outline:none;
  -webkit-user-select:none;
  user-select:none;
}
.browserScreen:focus{box-shadow:inset 0 0 0 2px var(--accent)}
.browserScreen img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:none;
  pointer-events:none;
}
.browserPlaceholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:13px;
}
.browserLogWrap{
  border-top:1px solid var(--stroke);
}
.browserLogToggle{
  padding:8px 14px;
  font-size:12px;
  color:var(--muted);
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
  list-style:none;
}
.browserLogToggle::-webkit-details-marker{display:none}
.browserLogToggle::before{
  content:"▸ ";
  display:inline-block;
  transition:transform .2s;
}
details[open]>.browserLogToggle::before{
  transform:rotate(90deg);
}
.browserLog{
  max-height:200px;
  overflow-y:auto;
  padding:8px 14px 12px;
  background:rgba(0,0,0,.2);
  color:var(--muted);
  font-size:12px;
  font-family:var(--font-mono);
}

/* ── Browser + Captcha Row Layout ────────────────────── */

.browserRow{
  display:flex;
  gap:16px;
  margin-top:16px;
  align-items:flex-start;
}
.browserFrameMain{
  flex:1;
  min-width:0;
  margin-top:0;
}
.captchaCard{
  display:flex;
  flex-direction:column;
  width:380px;
  flex-shrink:0;
  border:1px solid rgba(127,211,198,.2);
  border-radius:var(--radius);
  background:var(--panel);
  overflow:hidden;
  animation:fadeSlideUp .4s var(--ease);
}
.captchaBar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  background:rgba(0,0,0,.25);
  border-bottom:1px solid var(--stroke);
  color:var(--text);
  font-size:13px;
  font-weight:600;
}
.captchaTitle{flex:1}
.captchaBadge{
  padding:2px 8px;
  border-radius:var(--radius-pill);
  font-size:10px;
  font-weight:700;
  letter-spacing:.5px;
  background:rgba(255,255,255,.08);
  color:var(--muted);
}
.captchaBadgeActive{
  background:rgba(255,200,106,.15);
  color:var(--warn);
  animation:pulse 1.5s infinite;
}
.captchaBadgeSolved{
  background:rgba(40,214,184,.15);
  color:var(--ok);
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.captchaScreen{
  position:relative;
  aspect-ratio:1/1;
  background:#1a1a2e;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  cursor:crosshair;
  outline:none;
  -webkit-user-select:none;
  user-select:none;
}
.captchaScreen:focus{box-shadow:inset 0 0 0 2px var(--warn)}
.captchaScreen img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:none;
  pointer-events:none;
}
.captchaHint{
  padding:8px 14px;
  font-size:11px;
  text-align:center;
  border-top:1px solid var(--stroke);
  color:var(--muted);
}

@media (max-width:900px){
  .browserRow{flex-direction:column}
  .captchaCard{width:100%}
}

/* ── Admin Page ──────────────────────────────────────── */

.adminSection{
  margin-bottom:2rem;
}
.adminSectionTitle{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:1rem;
  padding-left:2px;
}
.adminSectionTitle svg{
  opacity:.7;
  flex-shrink:0;
}
.adminDivider{
  height:1px;
  background:linear-gradient(90deg, rgba(127,211,198,.15), rgba(127,211,198,.04) 80%, transparent);
  margin:0.5rem 0 2rem;
}
.adminPanel{
  margin-bottom:1rem;
}
.adminPanel:last-child{
  margin-bottom:0;
}
.panelTitle svg{
  vertical-align:-2px;
  margin-right:4px;
  opacity:.55;
}
.adminUserAvatar{
  width:32px;
  height:32px;
  border-radius:50%;
  object-fit:cover;
  vertical-align:middle;
}
.adminUserActions{
  display:flex;
  flex-wrap:wrap;
  gap:0.35rem;
  align-items:center;
}
.adminTable tbody tr{
  transition:background .15s ease;
}
.adminTable tbody tr:hover{
  background:rgba(127,211,198,.04);
}

@media (max-width:768px){
  .adminSection .grid2{
    grid-template-columns:1fr;
  }
}

/* ── Pricing Section ──────────────────────────────────────── */

.pricingSection{
  padding:4rem 2rem;
  max-width:1100px;
  margin:0 auto;
}
.pricingGrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
  margin-top:2rem;
}
@media (max-width:900px){
  .pricingGrid{ grid-template-columns:1fr; max-width:400px; margin-left:auto; margin-right:auto; }
}
.pricingCard{
  position:relative;
  padding:2rem 1.5rem;
  border-radius:var(--radius-lg);
  border:1px solid var(--stroke);
  background:rgba(8,26,26,.65);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition:transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.pricingCard:hover{
  transform:translateY(-6px);
  border-color:rgba(127,211,198,.25);
  box-shadow:0 16px 48px rgba(0,0,0,.3);
}
.pricingFeatured{
  border-color:var(--accent);
  box-shadow:0 0 40px rgba(127,211,198,.12);
}
.pricingFeatured:hover{
  border-color:var(--accent2);
  box-shadow:0 0 60px rgba(127,211,198,.18);
}
.pricingBadge{
  position:absolute;
  top:-12px;
  background:var(--accent);
  color:var(--panel);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:3px 14px;
  border-radius:var(--radius-pill);
}
.pricingName{
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:600;
  margin-bottom:.5rem;
  color:var(--text);
}
.pricingPrice{
  font-family:var(--font-display);
  font-size:2.5rem;
  font-weight:700;
  color:var(--accent);
  line-height:1.1;
  margin-bottom:1.25rem;
}
.pricingPeriod{
  font-size:.9rem;
  font-weight:400;
  color:var(--muted);
}
.pricingFeatures{
  list-style:none;
  padding:0;
  margin:0 0 1.5rem 0;
  width:100%;
  text-align:left;
}
.pricingFeatures li{
  padding:.45rem 0;
  font-size:.875rem;
  color:var(--muted);
  border-bottom:1px solid rgba(255,255,255,.04);
  padding-left:1.25rem;
  position:relative;
}
.pricingFeatures li::before{
  content:'\2713';
  position:absolute;
  left:0;
  color:var(--accent);
  font-weight:700;
}
.pricingFeatures li:last-child{ border-bottom:none; }
.pricingBtn{
  margin-top:auto;
  width:100%;
  justify-content:center;
}
.pricingOldPrice{
  font-size:1.1rem;
  font-weight:400;
  color:var(--muted);
  text-decoration:line-through;
  margin-right:0.5rem;
  opacity:.7;
}
.pricingDiscountBadge{
  position:absolute;
  top:-12px;
  right:12px;
  background:var(--danger);
  color:#fff;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:3px 10px;
  border-radius:var(--radius-pill);
}