/* =============================================================================
   NexaNetwork Support System — Premium SaaS UI (v6 CLEAN)
   Ultra Clean • Professional • Modern • Responsive
============================================================================= */

/* ---------- Design Tokens ---------- */
:root{
  --bg0:#070A12;
  --bg1:#0B1020;
  --bg2:#101A33;

  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.09);
  --panel3: rgba(255,255,255,.12);

  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.16);

  --text:#ffffff;
  --muted: rgba(255,255,255,.74);
  --muted2: rgba(255,255,255,.54);
  --muted3: rgba(255,255,255,.36);

  --accent:#6D7BFF;
  --accent2:#9B5CFF;
  --good:#f80000;
  --warn:#ffcc66;
  --bad:#ff5b7b;

  --g: linear-gradient(135deg, var(--accent), var(--accent2));
  --gSoft: linear-gradient(180deg, rgba(109,123,255,.22), rgba(155,92,255,.08));
  --ring: 0 0 0 6px rgba(109,123,255,.16);

  --r12: 12px;
  --r16: 16px;
  --r20: 20px;
  --r24: 24px;
  --r28: 28px;

  --shadow: 0 28px 84px rgba(0,0,0,.58);
  --shadow2: 0 14px 36px rgba(0,0,0,.46);
  --shadow3: 0 8px 20px rgba(0,0,0,.34);

  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --t: 160ms cubic-bezier(.2,.8,.2,1);
  --t2: 260ms cubic-bezier(.2,.8,.2,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(900px 700px at 12% 12%, rgba(109,123,255,.18), transparent 55%),
    radial-gradient(900px 700px at 92% 22%, rgba(155,92,255,.14), transparent 55%),
    radial-gradient(900px 700px at 55% 95%, rgba(57,217,138,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-y: auto;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; }

::selection{ background: rgba(109,123,255,.35); }

/* ---------- Ambient Background ---------- */
.bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  overflow:hidden;
}
.bg::before{
  content:"";
  position:absolute;
  inset:-120px;
  background:
    radial-gradient(520px 520px at 18% 20%, rgba(109,123,255,.26), transparent 60%),
    radial-gradient(560px 560px at 86% 26%, rgba(155,92,255,.20), transparent 60%),
    radial-gradient(700px 700px at 50% 90%, rgba(57,217,138,.11), transparent 60%);
  filter: blur(18px);
  opacity:.95;
}
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity:.12;
}

/* ---------- Common Shell Panels ---------- */
.glass{
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border-radius: var(--r28);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  overflow:hidden;
  position:relative;
}
.glass::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 45%);
  pointer-events:none;
}
.glass > *{ position:relative; z-index:1; }

/* ============================================================================ */
/* LOGIN — v5 (legacy - optional) */
/* ============================================================================ */

.loginWrap{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 22px;
  overflow:auto;
}
.loginShell{
  width: min(1200px, 96vw);
  display:grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 18px;
  align-items: stretch;
}

/* Left info */
.loginInfo{
  padding: 26px;
  display:flex;
  flex-direction:column;
  min-height: 540px;
}

.brandRow{
  display:flex;
  align-items:center;
  gap: 14px;
}
.brandMark{
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--g);
  display:grid;
  place-items:center;
  font-size: 22px;
  font-weight: 1000;
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 52px rgba(109,123,255,.18);
}
.brandText .brandName{
  font-size: 18px;
  font-weight: 1000;
}
.brandText .brandSub{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted2);
  font-weight: 800;
}

.loginHero{
  margin-top: 18px;
}
.loginHero h1{
  font-size: 46px;
  font-weight: 1000;
  letter-spacing: -1px;
  line-height: 1.05;
  background: linear-gradient(135deg, #fff, rgba(255,255,255,.78));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.loginHero p{
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  max-width: 700px;
}

.infoGrid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.infoCard{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  border-radius: 20px;
  padding: 14px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  transition: var(--t2);
}
.infoCard:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
}
.infoIcon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(109,123,255,.14);
  border:1px solid rgba(109,123,255,.24);
  color: #dbe0ff;
  font-size: 18px;
}
.infoCard h4{
  font-size: 14px;
  font-weight: 1000;
}
.infoCard p{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted2);
  font-weight: 800;
  line-height: 1.55;
}

.trustRow{
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.trustPill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  font-size: 12px;
  font-weight: 1000;
  color: var(--muted);
}
.trustPill i{ opacity:.9; }
.trustPill.good{ border-color: rgba(57,217,138,.28); background: rgba(57,217,138,.08); color:#d9ffef; }
.trustPill.sec{ border-color: rgba(109,123,255,.28); background: rgba(109,123,255,.08); color:#dbe0ff; }
.trustPill.fast{ border-color: rgba(255,204,102,.28); background: rgba(255,204,102,.08); color:#ffefc7; }

/* Right login card */
.loginCard{
  padding: 26px;
  display:flex;
  flex-direction:column;
  min-height: 540px;
}
.loginCard .title{
  font-size: 20px;
  font-weight: 1000;
}
.loginCard .sub{
  margin-top: 10px;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.65;
}
.loginPanel{
  margin-top: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  border-radius: 22px;
  padding: 16px;
}
.loginBtn{
  width:100%;
  border-radius: 20px;
  padding: 16px 16px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(109,123,255,.28), rgba(155,92,255,.18));
  color:white;
  font-weight: 1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  transition: var(--t2);
  position:relative;
  overflow:hidden;
}
.loginBtn::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transition: .55s;
}
.loginBtn:hover::before{ left: 100%; }
.loginBtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 60px rgba(109,123,255,.18);
  border-color: rgba(109,123,255,.30);
}
.loginMini{
  margin-top: 14px;
  display:grid;
  gap: 10px;
  color: var(--muted2);
  font-weight: 800;
  font-size: 12px;
}
.loginMini span{
  display:flex;
  align-items:center;
  gap: 10px;
}
.loginFooter{
  margin-top:auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex;
  justify-content:space-between;
  gap: 10px;
  color: var(--muted3);
  font-weight: 900;
  font-size: 11px;
}

/* ============================================================================ */
/* LOGIN — v6 CLEAN FULLSCREEN 50/50 (USE THIS) */
/* HTML (recommended):
   <body class="login">
   <main class="loginPage">
     <div class="loginSplit">
       <section class="glass loginLeft"> ... </section>
       <section class="glass loginRight"><div class="loginBox"> ... </div></section>
     </div>
   </main>
============================================================================ */

body.login{
  overflow:hidden;
}

/* Fullscreen shell */
.loginPage{
  height:100vh;
  width:100vw;
  padding: 16px;
  display:flex;
  align-items:stretch;
  justify-content:center;
  overflow:hidden;
}
.loginSplit{
  width: min(1400px, 100%);
  height: 100%;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Panels */
.loginLeft,
.loginRight{
  margin-top: 15vh;
  height:70%;
  min-height:0;
  padding: 26px;
  display:flex;
  flex-direction:column;
}

/* LEFT (clean) */
.loginLeft{
  gap: 16px;
}
.loginBrand{
  display:flex;
  align-items:center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.loginBrand .brandMark{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: var(--g);
  display:grid;
  place-items:center;
  font-size: 20px;
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 52px rgba(109,123,255,.18);
}
.loginBrand .brandText .brandName{
  font-size: 16px;
  font-weight: 1000;
}
.loginBrand .brandText .brandSub{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted2);
  font-weight: 800;
}

.loginLeftHero{
  margin-top: 6px;
}
.loginLeftHero h1{
  font-size: 44px;
  font-weight: 1000;
  letter-spacing: -1px;
  line-height: 1.05;
  background: linear-gradient(135deg, #fff, rgba(255,255,255,.76));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.loginLeftHero p{
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.75;
  max-width: 620px;
}

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

.loginInfoCard{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  border-radius: 20px;
  padding: 14px;
  display:flex;
  align-items:flex-start;
  gap: 12px;
  transition: var(--t2);
}
.loginInfoCard:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
}
.loginInfoIcon{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(109,123,255,.14);
  border:1px solid rgba(109,123,255,.22);
  color:#dbe0ff;
  font-size: 16px;
  flex:0 0 auto;
}
.loginInfoCard .h{
  font-size: 13px;
  font-weight: 1000;
}
.loginInfoCard .s{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted2);
  font-weight: 850;
  line-height: 1.55;
}

.loginLeftFooter{
  margin-top:auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.loginPill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  font-size: 12px;
  font-weight: 1000;
  color: var(--muted);
}
.loginPill.sec{ border-color: rgba(109,123,255,.28); background: rgba(109,123,255,.08); color:#dbe0ff; }
.loginPill.good{ border-color: rgba(57,217,138,.28); background: rgba(57,217,138,.08); color:#d9ffef; }

/* RIGHT (simple login only) */
.loginRight{
  justify-content:center;
}
.loginBox{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  border-radius: 26px;
  padding: 22px;
}
.loginBox .title{
  font-size: 20px;
  font-weight: 1000;
}
.loginBox .sub{
  margin-top: 10px;
  color: var(--muted);
  font-weight: 750;
  font-size: 13px;
  line-height: 1.7;
}

.loginBtnClean{
  margin-top: 16px;
  width:100%;
  border-radius: 20px;
  padding: 16px 16px;
  border:1px solid rgba(255,255,255,.12);
  background: var(--g);
  color:white;
  font-weight: 1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  transition: var(--t2);
  position:relative;
  overflow:hidden;
}
.loginBtnClean::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transition: .55s;
}
.loginBtnClean:hover::before{ left:100%; }
.loginBtnClean:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 60px rgba(109,123,255,.18);
}

.loginHints{
  margin-top: 14px;
  display:grid;
  gap: 10px;
  color: var(--muted2);
  font-weight: 850;
  font-size: 12px;
}
.loginHints span{
  display:flex;
  align-items:center;
  gap: 10px;
}

.loginRightFooter{
  margin-top: 14px;
  color: var(--muted3);
  font-weight: 900;
  font-size: 11px;
  display:flex;
  justify-content:space-between;
  gap: 10px;
}

/* ============================================================================ */
/* DASHBOARD — NEW */
/* ============================================================================ */

.app{
  height:100vh;
  display:grid;
  grid-template-columns: 300px 1fr;
  gap: 14px;
  padding: 14px;
}

/* Sidebar */
.sidebar{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.sbTop{
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  gap: 12px;
}
.sbLogo{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: var(--g);
  display:grid;
  place-items:center;
  font-weight: 1000;
  border:2px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 52px rgba(109,123,255,.16);
}
.sbTitle{
  min-width:0;
}
.sbTitle .h{
  font-size: 14px;
  font-weight: 1000;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sbTitle .s{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted2);
  font-weight: 800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sbUser{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  gap: 12px;
}
.avatar{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: var(--g);
  display:grid;
  place-items:center;
  font-weight: 1000;
  border:2px solid rgba(255,255,255,.16);
  position:relative;
  flex:0 0 auto;
}
.avatar .dot{
  position:absolute;
  right:-3px;
  bottom:-3px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--good);
  border: 3px solid var(--bg1);
  box-shadow: 0 0 0 4px rgba(57,217,138,.14);
}
.userMeta{ flex:1; min-width:0; }
.userMeta .name{
  font-size: 13px;
  font-weight: 1000;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.userMeta .tag{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.roleBadge{
  margin-top: 8px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing:.6px;
  text-transform: uppercase;
}
.roleBadge.admin{ border-color: rgba(255,91,123,.35); background: rgba(255,91,123,.10); color:#ffd3dd; }
.roleBadge.support{ border-color: rgba(109,123,255,.35); background: rgba(109,123,255,.10); color:#dbe0ff; }
.roleBadge.user{ border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: var(--muted); }

.logoutBtn{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.25);
  display:grid;
  place-items:center;
  color: var(--muted);
  transition: var(--t2);
}
.logoutBtn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,91,123,.45);
  color: #ff98ac;
  background: rgba(255,91,123,.12);
}

/* Nav */
.sbNav{
  padding: 12px;
  display:grid;
  gap: 10px;
}
.navItem{
  width:100%;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  border-radius: 18px;
  padding: 12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  transition: var(--t2);
  text-align:left;
}
.navItem:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
}
.navItem.active{
  border-color: transparent;
  background: var(--gSoft);
  box-shadow: var(--shadow3);
}
.navLeft{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width:0;
}
.navIcon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: var(--muted);
}
.navText{
  min-width:0;
  color: White;
}
.navText .h{
  font-size: 13px;
  font-weight: 1000;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.navText .s{
  margin-top: 3px;
  font-size: 11px;
  color: White;
  font-weight: 900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.navCount{
  min-width: 42px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  display:grid;
  place-items:center;
  font-size: 12px;
  font-weight: 1000;
  color: var(--text);
}
.navCount.warn{ border-color: rgba(255,204,102,.30); background: rgba(255,204,102,.10); color:#ffefc7; }
.navCount.good{ border-color: rgba(57,217,138,.28); background: rgba(57,217,138,.08); color:#d9ffef; }
.navCount.accent{ border-color: rgba(109,123,255,.30); background: rgba(109,123,255,.10); color:#dbe0ff; }

/* Search */
.sbSearch{
  margin: 4px 12px 12px;
  display:flex;
  align-items:center;
  gap: 10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.24);
  padding: 10px 12px;
  border-radius: 18px;
  transition: var(--t2);
}
.sbSearch:focus-within{
  border-color: rgba(109,123,255,.55);
  box-shadow: var(--ring);
}
.sbSearch i{ color: var(--muted2); width: 18px; text-align:center; }
.sbSearch input{
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.sbSearch input::placeholder{ color: var(--muted3); }

.sbClear{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: var(--muted2);
  transition: var(--t);
}
.sbClear:hover{
  background: rgba(255,255,255,.11);
  border-color: rgba(109,123,255,.30);
  color: var(--text);
}

/* Sidebar bottom CTA */
.sbBottom{
  margin-top:auto;
  padding: 14px 12px 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.10);
  display:grid;
  gap: 10px;
}
.primaryBtn{
  width:100%;
  border:0;
  border-radius: 18px;
  padding: 14px 14px;
  background: var(--g);
  color:white;
  font-weight: 1000;
  font-size: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  transition: var(--t2);
}
.primaryBtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(109,123,255,.18);
}

.hintRow{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  font-size: 11px;
  font-weight: 900;
  color: var(--muted3);
}
.hintRow span{
  display:flex;
  align-items:center;
  gap: 8px;
  white-space:nowrap;
}

/* Main */
.main{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.topbar{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.topLeft{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width:0;
}
.pageTitle{
  font-size: 15px;
  font-weight: 1000;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pageSub{
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted2);
  font-weight: 800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.topActions{ display:flex; gap: 10px; }
.iconBtn{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: var(--text);
  display:grid;
  place-items:center;
  transition: var(--t2);
}
.iconBtn:hover:not(:disabled){
  transform: translateY(-2px);
  background: rgba(255,255,255,.06);
}
.iconBtn:disabled{ opacity:.45; cursor:not-allowed; }
.iconBtn.claim{ border-color: rgba(109,123,255,.35); background: rgba(109,123,255,.10); }
.iconBtn.close{ border-color: rgba(255,91,123,.35); background: rgba(255,91,123,.10); }
.iconBtn.reopen{ border-color: rgba(57,217,138,.30); background: rgba(57,217,138,.08); }

.backBtn{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: var(--muted);
  display:grid;
  place-items:center;
  transition: var(--t2);
}
.backBtn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.06);
  color: var(--text);
}

.content{
  flex:1;
  min-height:0;
  padding: 14px;
  overflow:hidden;
}

.view{
  height:100%;
  min-height:0;
  display:none;
}
.view.show{ display:block; }

/* Tickets full-screen */
.ticketGrid{
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.filtersRow{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.filtersRow select{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: var(--text);
  padding: 10px 12px;
  outline:0;
  font-size: 12px;
  font-weight: 900;
}
.filtersRow select:focus{
  border-color: rgba(109,123,255,.55);
  box-shadow: var(--ring);
}

.ticketList{
  flex:1;
  min-height:0;
  overflow:auto;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  border-radius: 22px;
  padding: 10px;
}
.ticketList::-webkit-scrollbar{ width: 8px; }
.ticketList::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 999px; }
.ticketList::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); border-radius: 999px; }

.ticketItem{
  width:99.2%;
  display:grid;
  grid-template-columns: 10px 52px 1fr auto;
  gap: 12px;
  align-items:center;
  text-align:left;
  padding: 14px;
  margin: 10px 6px;
  border-radius: 20px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.26);
  transition: var(--t2);
  position:relative;
}
.ticketItem:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  box-shadow: var(--shadow3);
}

.tbar{
  width:10px;
  height: 52px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
}
.tbar.open{ background: var(--accent); box-shadow: 0 0 0 5px rgba(109,123,255,.14); }
.tbar.claimed{ background: var(--warn); box-shadow: 0 0 0 5px rgba(255,204,102,.10); }
.tbar.closed{ background: var(--good); box-shadow: 0 0 0 5px rgba(57,217,138,.10); }

.tiAva{
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: var(--g);
  border: 2px solid rgba(255,255,255,.16);
  display:grid;
  place-items:center;
  font-weight: 1000;
  font-size: 18px;
}
.tiBody{ min-width:0; }
.tiTitle{
  color: white;
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
  font-size: 14px;
  font-weight: 1000;
}
.tiSub{
  margin-top: 6px;
  color: var(--muted2);
  font-size: 13px;
  line-height: 1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.tiMetaRow{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.badge,.tag{
  font-size: 11px;
  font-weight: 1000;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  letter-spacing: .3px;
}
.badge.open{ border-color: rgba(109,123,255,.30); color:#dbe0ff; background: rgba(109,123,255,.10); }
.badge.claimed{ border-color: rgba(255,204,102,.35); color:#ffefc7; background: rgba(255,204,102,.10); }
.badge.closed{ border-color: rgba(57,217,138,.30); color:#d9ffef; background: rgba(57,217,138,.08); }

.tag.pCritical{ border-color: rgba(255,91,123,.40); background: rgba(255,91,123,.10); color:#ffd1db; }
.tag.pHigh{ border-color: rgba(255,204,102,.40); background: rgba(255,204,102,.10); color:#ffefc7; }
.tag.pNormal{ border-color: rgba(109,123,255,.35); background: rgba(109,123,255,.10); color:#dbe0ff; }
.tag.pLow{ border-color: rgba(57,217,138,.28); background: rgba(57,217,138,.08); color:#d9ffef; }

.tiTime{
  font-size: 12px;
  font-weight: 900;
  color: var(--muted3);
  white-space: nowrap;
  padding-right: 4px;
}

.unseen{
  position:absolute;
  top: 14px;
  right: 14px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--warn);
  box-shadow: 0 0 0 6px rgba(255,204,102,.12);
  animation: pulse 1.4s infinite;
}
@keyframes pulse{
  0%,100%{ opacity:.95; }
  50%{ opacity:.45; }
}

/* Ticket view (chat) */
.ticketView{
  height:100%;
  min-height:0;
  display:grid;
  grid-template-columns: 1fr 360px;
  gap: 14px;
}

.chatBox, .sideBox{
  height:92%;
  min-height:0;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  border-radius: 22px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.chatMessages, .uploads{
  flex:1;
  min-height:0;
  overflow:auto;
  padding: 16px;
}
.chatMessages::-webkit-scrollbar,
.uploads::-webkit-scrollbar{ width: 8px; }
.chatMessages::-webkit-scrollbar-thumb,
.uploads::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 999px; }
.chatMessages::-webkit-scrollbar-track,
.uploads::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); border-radius: 999px; }

.ticketPills{
  margin-bottom: 1%;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.10);
}
.pillRow{ display:flex; flex-wrap:wrap; gap: 10px; }
.pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  font-size: 12px;
  font-weight: 1000;
  color: var(--muted);
}
.pill i{ opacity:.9; }

.pill.status[data-status="open"]{ border-color: rgba(109,123,255,.30); background: rgba(109,123,255,.10); color:#dbe0ff; }
.pill.status[data-status="claimed"]{ border-color: rgba(255,204,102,.35); background: rgba(255,204,102,.10); color:#ffefc7; }
.pill.status[data-status="closed"]{ border-color: rgba(57,217,138,.30); background: rgba(57,217,138,.08); color:#d9ffef; }

.pill.prio[data-priority="Urgent"]{ border-color: rgba(255,91,123,.40); background: rgba(255,91,123,.10); color:#ffd1db; }
.pill.prio[data-priority="High"]{ border-color: rgba(255,204,102,.40); background: rgba(255,204,102,.10); color:#ffefc7; }
.pill.prio[data-priority="Normal"]{ border-color: rgba(109,123,255,.35); background: rgba(109,123,255,.10); color:#dbe0ff; }
.pill.prio[data-priority="Low"]{ border-color: rgba(57,217,138,.28); background: rgba(57,217,138,.08); color:#d9ffef; }

.msg{ display:flex; margin: 12px 0; }
.msg.team{ justify-content:flex-start; }
.msg.user{ justify-content:flex-end; }

.bubble{
  max-width: 78%;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  padding: 12px 14px;
  box-shadow: 0 8px 18px rgba(0,0,0,.20);
}
.msg.team .bubble{
  background: rgba(109,123,255,.10);
  border-color: rgba(109,123,255,.22);
  border-top-left-radius: 8px;
}
.msg.user .bubble{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  border-top-right-radius: 8px;
}

.msgTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.who{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 12px;
  font-weight: 1000;
}
.time{
  font-size: 11px;
  color: var(--muted3);
  font-weight: 900;
  white-space: nowrap;
}
.text{
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  color: var(--text);
}

.discord-role{
  font-size: 10px;
  font-weight: 1000;
  padding: 4px 8px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  text-transform: uppercase;
}
.role-admin{ border-color: rgba(255,91,123,.38); background: rgba(255,91,123,.12); color:#ffd3dd; }
.role-moderator{ border-color: rgba(57,217,138,.34); background: rgba(57,217,138,.10); color:#d9ffef; }
.role-support{ border-color: rgba(109,123,255,.36); background: rgba(109,123,255,.10); color:#dbe0ff; }
.role-member{ border-color: rgba(255,204,102,.36); background: rgba(255,204,102,.10); color:#ffefc7; }

/* Upload list */
.sideTop{
  padding: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.sideTop .h{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 1000;
  font-size: 13px;
}
.sideTop .c{
  font-size: 12px;
  color: var(--muted3);
  font-weight: 900;
}

.upItem{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  margin-bottom: 10px;
  transition: var(--t2);
}
.upItem:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.08);
  border-color: rgba(109,123,255,.28);
}
.upIcon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: var(--g);
  display:grid;
  place-items:center;
  font-size: 18px;
}
.upName{
  font-size: 13px;
  font-weight: 1000;
  max-width: 260px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.upSub{
  margin-top: 4px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  font-size: 11px;
  color: var(--muted3);
  font-weight: 900;
}

/* Composer */
.composer{
  padding: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.10);
  display:flex;
  gap: 12px;
  align-items:flex-end;
}
.leftTools{ display:flex; gap: 10px; }
.toolBtn{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: var(--muted2);
  display:grid;
  place-items:center;
  transition: var(--t2);
}
.toolBtn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.06);
  border-color: rgba(109,123,255,.32);
  color: var(--text);
}

.inputWrap{
  flex:1;
  border-radius: 20px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding: 12px 14px 10px;
}
.inputWrap:focus-within{
  border-color: rgba(109,123,255,.55);
  box-shadow: var(--ring);
}
textarea{
  width:100%;
  border:0;
  outline:0;
  background: transparent;
  color: var(--text);
  resize:none;
  min-height: 26px;
  max-height: 190px;
  font-size: 13px;
  line-height: 1.7;
}
textarea::placeholder{ color: var(--muted3); }
.counter{
  margin-top: 8px;
  text-align:right;
  font-size: 11px;
  color: var(--muted3);
  font-weight: 1000;
}
.sendBtn{
  width: 50px;
  height: 50px;
  border-radius: 18px;
  border:0;
  background: var(--g);
  color:white;
  display:grid;
  place-items:center;
  margin-bottom: 1%;
  transition: var(--t2);
}
.sendBtn:hover:not(:disabled){
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(109,123,255,.18);
}
.sendBtn:disabled{ opacity:.5; cursor:not-allowed; }

/* Welcome blocks */
.empty{
  height:100%;
  min-height: 320px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap: 10px;
  text-align:center;
  padding: 22px;
  color: var(--muted2);
}
.empty h3{
  color: var(--text);
  font-weight: 1000;
  font-size: 18px;
}
.empty p{
  max-width: 580px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted2);
}

/* Modal + Toast */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 1000;
}
.modal.show{ display:flex; }
.modalOverlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(14px);
}
.modalCard{
  width: min(780px, 96vw);
  border-radius: 28px;
  border:1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.modalCard::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(109,123,255,.16), rgba(155,92,255,.08));
  pointer-events:none;
}
.modalTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.modalTitle{
  font-size: 18px;
  font-weight: 1000;
}
.modalSubtitle{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted2);
  font-weight: 800;
  max-width: 640px;
}
.modalClose{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.24);
  color: var(--muted);
  transition: var(--t2);
}
.modalClose:hover{
  transform: rotate(10deg);
  border-color: rgba(255,91,123,.40);
  background: rgba(255,91,123,.10);
  color:#ffd3dd;
}
.form{ padding: 20px; }
.formRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.formGroup{ margin-top: 14px; }
.formGroup label{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 12px;
  font-weight: 1000;
  color: var(--muted);
  margin-bottom: 10px;
}
.selectInput,
.textInput,
.textareaInput{
  width:100%;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.26);
  color: var(--text);
  padding: 12px 14px;
  outline:0;
  font-size: 13px;
  font-weight: 800;
}
.selectInput:focus,
.textInput:focus,
.textareaInput:focus{
  border-color: rgba(109,123,255,.55);
  box-shadow: var(--ring);
}
.textareaInput{
  min-height: 140px;
  resize: vertical;
}
.createBtn{
  width:100%;
  margin-top: 16px;
  border:0;
  border-radius: 18px;
  padding: 14px;
  background: var(--g);
  color:white;
  font-weight: 1000;
  font-size: 15px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  transition: var(--t2);
}
.createBtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(109,123,255,.18);
}

.toast{
  position:fixed;
  left:50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(16px);
  padding: 12px 16px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow2);
  opacity:0;
  pointer-events:none;
  transition: var(--t2);
  font-weight: 1000;
  font-size: 12px;
  z-index:1001;
}
.toast.show{
  opacity:1;
  transform: translateX(-50%) translateY(0);
  pointer-events:auto;
}
.toast.success{ border-color: rgba(57,217,138,.35); }
.toast.error{ border-color: rgba(255,91,123,.35); }
.toast.warning{ border-color: rgba(255,204,102,.35); }

.loading{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.95);
  animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* Emoji Picker */
.emojiPicker{
  width: 340px;
  max-height: 380px;
  border-radius: 20px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(16px);
  overflow:hidden;
  box-shadow: var(--shadow2);
  position: fixed;
  right: 20px;
  bottom: 96px;
  z-index: 999;
}
.emojiHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-weight: 1000;
}
.emojiClose{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  color: var(--text);
  transition: var(--t);
}
.emojiClose:hover{ background: rgba(255,255,255,.12); }
.emojiGrid{
  padding: 12px;
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  overflow:auto;
  max-height: 320px;
}
.emojiBtn{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  border-radius: 14px;
  cursor:pointer;
  padding: 10px 0;
  font-size: 18px;
  transition: var(--t);
}
.emojiBtn:hover{
  background: rgba(255,255,255,.12);
  transform: scale(1.06);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  body{ overflow:auto; }
  body.login{ overflow:auto; }
  .loginSplit{ grid-template-columns: 1fr; height:auto; }
  .loginPage{ height:auto; }
  .loginShell{ grid-template-columns: 1fr; max-width: 760px; }
  .app{ grid-template-columns: 1fr; height:auto; min-height:100vh; }
  .ticketView{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  .app{ padding: 12px; gap: 12px; }
  .glass{ border-radius: 22px; }
  .formRow{ grid-template-columns: 1fr; }
  .loginHero h1{ font-size: 34px; }
  .infoGrid{ grid-template-columns: 1fr; }
  .loginLeftHero h1{ font-size: 34px; }
  .loginInfoGrid{ grid-template-columns: 1fr; }
}