/* APP */
.app{
  display:block;
  min-height:100vh;
}
.main{padding: 18px 22px 34px; max-width: none; margin: 0;}

/* SIDEBAR */
.sidebar{
  padding: 18px 16px;
  border-right: 1px solid var(--stroke2);
  background:
    linear-gradient(180deg, rgba(10,10,10,.96), rgba(6,6,6,.96));
  position: relative;
}
.sidebar:after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, var(--bevel-top), transparent 18%),
    linear-gradient(0deg, var(--bevel-bot), transparent 22%);
  opacity:.9;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 10px 10px 16px;
  border-bottom: 1px solid var(--stroke2);
}
.brand-logo{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius: var(--r3);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.02);
  font-weight:950;
  letter-spacing:.6px;
}
.brand-logo.big{width:52px;height:52px}
.brand-name{font-weight:950;letter-spacing:2px;font-size:12px}
.brand-sub{color:var(--muted);font-size:11px;letter-spacing:.8px;margin-top:2px}

.nav{padding: 14px 6px; display:flex; flex-direction:column; gap:8px}
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding: 12px 12px;
  border-radius: var(--r3);
  border:1px solid transparent;
  color: var(--muted);
  transition: .15s;
  background: transparent;
  position: relative;
}
.nav-item:hover{
  color: var(--text);
  border-color: var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.20));
  box-shadow: 0 10px 24px rgba(0,0,0,.55);
  transform: translateY(-1px);
}
.nav-item.active{
  color: var(--text);
  border-color: rgba(198,0,0,.55);
  background:
    linear-gradient(180deg, rgba(198,0,0,.14), rgba(0,0,0,.22));
  box-shadow: none, 0 12px 26px rgba(0,0,0,.6);
}
.nav-item:after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 22%),
    linear-gradient(0deg, rgba(0,0,0,.65), transparent 30%);
  opacity:.85;
}
.ni-dot{width:7px;height:7px;background:var(--stroke);border-radius:2px}
.nav-item:hover{
  color: var(--text);
  border-color: var(--stroke);
  background: rgba(255,255,255,.02);
}
.nav-item.active{
  color: var(--text);
  border-color: rgba(198,0,0,.55);
  background: rgba(255,255,255,.02);
}
.nav-item.active .ni-dot{background: var(--red)}
.sidebar-foot{margin-top: 14px; padding: 10px 8px}
.pill{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: var(--r3);
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.35);
  color: var(--muted);
}
.pill-dot{width:8px;height:8px;background:var(--red);border-radius:2px}
.pill-tag{
  margin-left:auto;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  color: var(--text);
  font-weight:900;
  font-size:11px;
}

/* TOPBAR */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px;
  border-radius: var(--r);
  border:1px solid var(--stroke2);
  background:
    linear-gradient(180deg, rgba(18,18,18,.92), rgba(7,7,7,.92));
  box-shadow: var(--shadow2);
  position: sticky;
  top: 12px;
  z-index: 10;
  transform: translateZ(0);
}
.topbar:before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 22%),
    linear-gradient(0deg, rgba(0,0,0,.7), transparent 26%);
  opacity:.85;
}
.crumb{display:flex; align-items:center; gap:10px}
.crumb-ico{
  width:30px;height:30px;
  display:grid;place-items:center;
  border-radius: var(--r3);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.crumb-text{font-weight:950;letter-spacing:.6px}

.top-right{display:flex; align-items:center; gap:10px}
.iconbtn{
  width:38px;height:38px;
  border-radius: var(--r3);
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.35);
  color: var(--text);
  cursor:pointer;
}
.iconbtn:hover{border-color: rgba(198,0,0,.55)}
.user{display:flex; align-items:center; gap:10px; padding: 6px 6px 6px 8px; border-radius: var(--r3); border:1px solid var(--stroke2); background: rgba(0,0,0,.25)}
.avatar{width:34px;height:34px; display:grid;place-items:center; border-radius: var(--r3); border:1px solid rgba(198,0,0,.5); background: rgba(255,255,255,.02); font-weight:950}
.umeta{line-height:1.05}
.uname{font-weight:950;font-size:13px}
.urole{color:var(--muted);font-size:11px}

/* CHIPS + BTNS */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.25);
  color: var(--text);
  font-weight:850;
  font-size:12px;
  cursor:pointer;
}
.chip:hover{border-color: rgba(198,0,0,.55)}
.chip.danger{border-color: rgba(198,0,0,.70); background: rgba(198,0,0,.12); box-shadow: 0 0 0 1px rgba(198,0,0,.35)}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: var(--r3);
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.25);
  color: var(--text);
  font-weight:950;
  letter-spacing:.2px;
  cursor:pointer;
}
.btn:hover{border-color: rgba(198,0,0,.55)}
.btn.primary{
  border-color: rgba(198,0,0,.80);
  background: linear-gradient(180deg, rgba(255,26,26,.28), rgba(198,0,0,.16));
  
  box-shadow: 0 0 0 1px rgba(255,20,20,.28), 0 10px 22px rgba(0,0,0,.55);
}
.btn.primary:hover{background: linear-gradient(180deg, rgba(255,26,26,.34), rgba(198,0,0,.20)); transform: translateY(-1px)}
.btn.ghost{background: transparent}
.wfull{width:100%}

/* MENUS */
.lang{position:relative}
.menu{
  display:none;
  position:absolute; right:0; top:44px;
  min-width: 160px;
  border:1px solid var(--stroke);
  background: #0c0c0c;
  border-radius: var(--r3);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.menu.open{display:block}
.menu a{display:block;padding:10px 12px;color:var(--muted);border-bottom:1px solid var(--stroke2)}
.menu a:hover{color:var(--text);background: rgba(255,255,255,.02)}
.menu a:last-child{border-bottom:0}

/* CARDS */
.card{
  border-radius: var(--r);
  border:1px solid var(--stroke2);
  background:
    linear-gradient(180deg, rgba(16,16,16,.96), rgba(6,6,6,.96));
  box-shadow: var(--shadow2);
  position: relative;
  overflow: hidden;
}
.card:before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 20%),
    linear-gradient(0deg, rgba(0,0,0,.72), transparent 28%);
  opacity:.9;
}
.card:after{
  content:"";
  position:absolute; left:14px; right:14px; top:10px; height:1px;
  background: linear-gradient(90deg, rgba(255,20,20,0), rgba(255,20,20,.55), rgba(255,20,20,0));
  opacity:.55;
}
.card-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--stroke2);
}
.card-title{font-weight:950;letter-spacing:.4px}
.card-sub{color:var(--muted);font-size:12px;margin-top:2px}
.card-body{padding: 16px}

/* HERO */
.hero{
  display:flex; align-items:center; justify-content:space-between;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--r);
  border:1px solid var(--stroke2);
  background: linear-gradient(180deg, rgba(18,18,18,.72), rgba(10,10,10,.72));
}
.h-title{font-weight:950;letter-spacing:.4px}
.h-sub{color:var(--muted);font-size:12px;margin-top:2px}
.hero-right{display:flex; gap:10px}

/* GRID */
.grid2{display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px}
.pack-row{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-top: 14px}
.pack{overflow:hidden}
.pack-top{display:flex; align-items:center; justify-content:space-between; padding: 14px 14px 0}
.brand-circle{width:34px;height:34px;border-radius: 999px;border:1px solid var(--stroke);display:grid;place-items:center;background: rgba(255,255,255,.02);color:var(--muted);font-weight:950}
.pack-brand{display:flex;gap:10px;align-items:center}
.pack-brand-name{font-weight:950}
.pack-brand-sub{color:var(--muted);font-size:11px;margin-top:2px}
.tag{padding: 7px 10px;border-radius:999px;border:1px solid rgba(198,0,0,.5);background: rgba(255,255,255,.02);font-size:11px;font-weight:900}
.pack-body{padding: 10px 14px 16px; text-align:center}
.pack-box{height:98px;border-radius: var(--r3);border:1px solid var(--stroke);background: radial-gradient(220px 120px at 50% 0%, rgba(198,0,0,.14), transparent 60%), rgba(255,255,255,.02); margin: 10px auto 10px; width: 120px}
.pack-name{font-weight:950}
.pack-days{color:var(--muted);font-size:12px;margin-top:6px}

/* TABLE */
.table{width:100%; border-collapse: collapse}
.table th,.table td{padding: 12px 12px;border-bottom:1px solid var(--stroke2); font-size:13px}
.table th{color:var(--muted); font-weight:900; letter-spacing:.3px; text-align:left}
.table tr:hover td{background: rgba(198,0,0,.06)}
.table.compact th,.table.compact td{padding: 10px 10px}
.badge{
  display:inline-flex; align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.25);
  font-weight:900;
  font-size:11px;
}
.status{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight:950;
  font-size:11px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.25);
}
.status.ok{border-color: rgba(198,0,0,.55); background: rgba(255,255,255,.02)}
.divider{height:1px;background: var(--stroke2); margin: 16px 0}

/* FILTERS */
.filters{margin-top: 14px}
.filter-row{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px}
.select label{display:block; color:var(--muted); font-size:12px; margin-bottom:8px; font-weight:850}
.select select,.select input,.select textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: var(--r3);
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.25);
  color: var(--text);
  outline:none;
}
.select textarea{resize: vertical}
.select select:focus,.select input:focus,.select textarea:focus{border-color: rgba(198,0,0,.55)}

/* DROPZONE */
.drop{
  height: 360px;
  border-radius: var(--r);
  border: 2px dashed rgba(198,0,0,.45);
  background:
    radial-gradient(560px 280px at 50% 10%, rgba(198,0,0,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.30));
  display:grid; place-items:center;
  cursor:pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  position: relative;
  overflow:hidden;
}
.drop:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 22%),
    linear-gradient(0deg, rgba(0,0,0,.72), transparent 30%);
  opacity:.9;
}
.drop.drag{border-color: rgba(255,26,26,.75)}
.drop-inner{text-align:center}
.drop-ico{
  width:56px;height:56px;
  display:grid; place-items:center;
  border-radius: var(--r3);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  margin: 0 auto 10px;
  font-size:22px;
}
.drop-title{font-weight:950}
.drop-sub{color:var(--muted);font-size:12px;margin-top:6px}
.filebtn{user-select:none}

/* MODS */
.section-title{font-weight:950; margin: 8px 0 10px; color: var(--text)}
.section-title.mt{margin-top: 16px}
.mods{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px}
.mod{
  border-radius: var(--r3);
  border:1px solid var(--stroke2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.26));
  color: var(--text);
  padding: 12px 12px;
  text-align:left;
  cursor:pointer;
  transition: .15s;
  min-height: 66px;
  position: relative;
  overflow:hidden;
}
.mod:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(420px 160px at 20% 0%, rgba(198,0,0,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 22%),
    linear-gradient(0deg, rgba(0,0,0,.70), transparent 32%);
  opacity:.9;
}
.mod:hover{border-color: rgba(198,0,0,.55); box-shadow: 0 12px 24px rgba(0,0,0,.6); transform: translateY(-1px)}
.mod.selected{
  border-color: rgba(198,0,0,.90);
  background: linear-gradient(180deg, rgba(198,0,0,.18), rgba(0,0,0,.30));
  box-shadow: none, 0 16px 30px rgba(0,0,0,.65);
}
.mod .mod-ico{
  width:28px;height:28px;border-radius:8px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  margin-bottom:10px;
  font-size:14px;
  position: relative;
  z-index: 1;
}
.mod-name{position:relative; z-index:1}
.mod:hover{border-color: rgba(198,0,0,.55)}
.mod.selected{
  border-color: rgba(198,0,0,.85);
  background: rgba(255,255,255,.02);
}
.mod-name{font-weight:900;font-size:12px}

/* SELECTED */
.selected{margin-top: 14px; padding-top: 14px; border-top:1px solid var(--stroke2)}
.selected-title{color:var(--muted);font-weight:900;font-size:12px;margin-bottom:10px}
.selected-list{display:flex; flex-wrap:wrap; gap:8px}
.actionbar{display:flex; align-items:center; gap:10px}

/* KV */
.kv{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px}
.kv-item{padding: 12px; border:1px solid var(--stroke2); border-radius: var(--r3); background: rgba(0,0,0,.20); display:flex; justify-content:space-between; gap:10px}
.k{color:var(--muted); font-weight:900; font-size:12px}
.v{font-weight:900}
.two{display:grid; grid-template-columns: 1fr 1fr; gap: 12px}
.filecard{padding: 12px; border:1px solid var(--stroke2); border-radius: var(--r3); background: rgba(0,0,0,.20)}
.fileline{display:flex; justify-content:space-between; gap:10px; padding: 6px 0}
.form{max-width: 700px}

/* AUTH */
.authbg{background: radial-gradient(900px 520px at 20% 0%, rgba(198,0,0,.24), transparent 55%), var(--bg)}
.auth-wrap{min-height:100vh; display:grid; place-items:center; padding: 22px}
.auth-card{
  width: min(460px, 92vw);
  border-radius: var(--r);
  border:1px solid var(--stroke2);
  background: linear-gradient(180deg, rgba(18,18,18,.92), rgba(10,10,10,.92));
  box-shadow: var(--shadow);
  padding: 18px;
}
.auth-brand{display:flex; gap:12px; align-items:center; padding: 10px 10px 16px; border-bottom:1px solid var(--stroke2)}
.auth-title{font-weight:950;letter-spacing:2px}
.auth-sub{color:var(--muted);font-size:12px;margin-top:4px}
.auth-form{padding: 14px 10px 6px}
.auth-form label{display:block;color:var(--muted);font-size:12px;margin:10px 0 8px;font-weight:900}
.auth-form input{
  width:100%;
  padding: 12px 12px;
  border-radius: var(--r3);
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.25);
  color: var(--text);
  outline:none;
}
.auth-form input:focus{border-color: rgba(198,0,0,.55)}
.auth-foot{color:var(--muted);font-size:12px;padding: 10px}
.alert{margin: 12px 10px 0; padding: 10px 12px; border-radius: var(--r3); border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); font-weight:900}

/* RESPONSIVE */
@media (max-width: 1200px){
  .pack-row{grid-template-columns: repeat(2, minmax(0,1fr))}
  .mods{grid-template-columns: repeat(2, minmax(0,1fr))}
}
@media (max-width: 980px){
  .app{grid-template-columns: 86px 1fr}
  .brand-text,.ni-label,.sidebar-foot{display:none}
  .nav-item{justify-content:center}
  .grid2{grid-template-columns: 1fr}
  .filter-row{grid-template-columns: 1fr}
  .kv{grid-template-columns: 1fr}
  .two{grid-template-columns: 1fr}
}

/* DASHBOARD (Welcome + Tiles like reference) */
.welcome{
  text-align:center;
  padding: 18px 10px 8px;
  margin-top: 8px;
}
.welcome-title{
  font-size: 34px;
  font-weight: 950;
  letter-spacing: .6px;
  text-shadow: 0 18px 55px rgba(0,0,0,.85);
}
.welcome-sub{
  margin-top: 8px;
  color: var(--muted);
  font-weight: 850;
  letter-spacing: .2px;
}

.tiles{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.tile{
  position:relative;
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 18px 18px;
  border-radius: var(--r);
  border: 1px solid var(--stroke2);
  background:
    linear-gradient(180deg, rgba(16,16,16,.96), rgba(6,6,6,.96));
  box-shadow: var(--shadow2);
  overflow:hidden;
  min-height: 104px;
}
.tile:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 260px at 18% 0%, rgba(198,0,0,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 22%),
    linear-gradient(0deg, rgba(0,0,0,.72), transparent 30%);
  opacity:.92;
}
.tile:hover{
  border-color: rgba(198,0,0,.45);
  transform: translateY(-2px);
  box-shadow: none, 0 18px 48px rgba(0,0,0,.75);
}
.tile.active{
  border-color: rgba(198,0,0,.55);
  box-shadow: none, 0 18px 48px rgba(0,0,0,.78);
}
.tile-ico{
  width:56px;height:56px;
  display:grid;place-items:center;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.30);
  font-size: 20px;
  position:relative;
  z-index:1;
}
.tile-ico.red{
  border-color: rgba(198,0,0,.55);
  background: rgba(255,255,255,.02);
  box-shadow: 0 0 0 1px rgba(198,0,0,.35), 0 0 22px rgba(198,0,0,.18);
}
.tile-text{position:relative; z-index:1}
.tile-title{
  font-weight: 950;
  letter-spacing:.3px;
  font-size: 16px;
}
.tile-title.big{font-size:18px}
.tile-sub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.tile-go{
  margin-left:auto;
  position:relative;
  z-index:1;
  color: rgba(255,255,255,.70);
  font-size: 22px;
  font-weight: 950;
}

.info-card{
  margin-top: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  padding: 18px;
  border-radius: var(--r);
  border: 1px solid var(--stroke2);
  background:
    linear-gradient(180deg, rgba(16,16,16,.96), rgba(6,6,6,.96));
  box-shadow: var(--shadow2);
  position:relative;
  overflow:hidden;
}
.info-card:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 300px at 20% 0%, rgba(198,0,0,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 22%),
    linear-gradient(0deg, rgba(0,0,0,.72), transparent 30%);
  opacity:.92;
}
.info-left{
  display:flex; align-items:center; gap: 14px;
  position:relative; z-index:1;
  min-width: 320px;
}
.info-ico{
  width:56px;height:56px;
  display:grid;place-items:center;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.30);
  font-size: 20px;
}
.info-ico.red{
  border-color: rgba(198,0,0,.55);
  background: rgba(255,255,255,.02);
  box-shadow: 0 0 0 1px rgba(198,0,0,.35), 0 0 22px rgba(198,0,0,.18);
}
.info-title{font-weight:950;font-size:18px}
.info-sub{color:var(--muted);font-size:12px;margin-top:6px;font-weight:850}
.info-right{position:relative; z-index:1; flex:1}
.kv2{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.kv2-item{
  padding: 12px 12px;
  border-radius: var(--r3);
  border: 1px solid var(--stroke2);
  background: rgba(0,0,0,.22);
  position:relative;
  overflow:hidden;
}
.kv2-item:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 26%),
    linear-gradient(0deg, rgba(0,0,0,.68), transparent 34%);
  opacity:.9;
}
.kv2-item .k{position:relative; z-index:1; color:var(--muted); font-weight:900; font-size:12px}
.kv2-item .v{position:relative; z-index:1; font-weight:950; margin-top:6px; font-size:13px}
.footer-note{
  margin-top: 18px;
  text-align:center;
  color: rgba(255,255,255,.35);
  font-size: 12px;
  font-weight: 800;
}
@media (max-width: 1200px){
  .tiles{grid-template-columns: repeat(2, minmax(0,1fr))}
  .kv2{grid-template-columns: repeat(2, minmax(0,1fr))}
}
@media (max-width: 900px){
  .tiles{grid-template-columns: 1fr}
  .info-card{flex-direction:column; align-items:flex-start}
  .kv2{grid-template-columns: 1fr}
}


/* DASH V4: user info on top, update strip 2-col, square menu grid */
.usercard{
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--r);
  border:1px solid var(--stroke2);
  background: linear-gradient(180deg, rgba(16,16,16,.96), rgba(6,6,6,.96));
  box-shadow: var(--shadow2);
  position:relative;
  overflow:hidden;
}
.usercard:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 320px at 20% 0%, rgba(198,0,0,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 22%),
    linear-gradient(0deg, rgba(0,0,0,.72), transparent 30%);
  opacity:.92;
}
.usercard-left{
  display:flex; align-items:center; gap:12px;
  position:relative; z-index:1;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--stroke2);
  margin-bottom: 12px;
}
.plug-ico{
  width:52px;height:52px;
  border-radius: 14px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  box-shadow: none;
  font-size:20px;
}
.usercard-title{font-weight:950;font-size:18px}
.usercard-sub{color:var(--muted);font-size:12px;margin-top:6px;font-weight:850}

.usergrid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 14px;
}
.ug{
  padding: 12px 12px;
  border-radius: var(--r3);
  border:1px solid var(--stroke2);
  background: rgba(0,0,0,.22);
  position:relative;
  overflow:hidden;
}
.ug:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 26%),
    linear-gradient(0deg, rgba(0,0,0,.70), transparent 34%);
  opacity:.9;
}
.ug .k{position:relative; z-index:1; color:var(--muted); font-weight:900; font-size:11px}
.ug .v{position:relative; z-index:1; font-weight:950; margin-top:6px; font-size:13px}

/* update strip */
.updates{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.upcard{
  padding: 16px;
  border-radius: var(--r);
  border:1px solid var(--stroke2);
  background: linear-gradient(180deg, rgba(16,16,16,.96), rgba(6,6,6,.96));
  box-shadow: var(--shadow2);
  position:relative;
  overflow:hidden;
}
.upcard:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(700px 280px at 18% 0%, rgba(198,0,0,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 22%),
    linear-gradient(0deg, rgba(0,0,0,.72), transparent 30%);
  opacity:.92;
}
.uphead{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between}
.uptitle{font-weight:950; letter-spacing:.4px}
.upbadge{
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  font-size:11px;
  font-weight:950;
}
.uplogo{
  width:64px;height:64px;
  margin-top: 14px;
  border-radius: 16px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  box-shadow: none;
  font-size:24px;
  position:relative; z-index:1;
}
.upmeta{
  position:relative; z-index:1;
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.upmeta div{
  padding: 10px 10px;
  border-radius: var(--r3);
  border:1px solid var(--stroke2);
  background: rgba(0,0,0,.18);
}
.upmeta span{display:block; font-size:11px; margin-bottom:6px}
.upmeta b{display:block; font-size:13px}
.upcard .chip{position:relative; z-index:1; margin-top: 12px}

/* menu grid: square cards */
.menugrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 20px;
}
.mcard{
  padding: 14px 14px;
  border-radius: var(--r);
  border:1px solid var(--stroke2);
  background: linear-gradient(180deg, rgba(16,16,16,.96), rgba(6,6,6,.96));
  box-shadow: var(--shadow2);
  position:relative;
  overflow:hidden;
  min-height: 140px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.mcard:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 220px at 18% 0%, rgba(198,0,0,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 22%),
    linear-gradient(0deg, rgba(0,0,0,.72), transparent 30%);
  opacity:.92;
}
.mcard:hover{
  transform: translateY(-2px);
  border-color: rgba(198,0,0,.45);
  box-shadow: none, 0 18px 48px rgba(0,0,0,.75);
}
.mico{
  width:48px;height:48px;
  border-radius: 14px;
  display:grid;place-items:center;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.30);
  font-size:18px;
  position:relative; z-index:1;
}
.mico.red{
  border-color: rgba(198,0,0,.55);
  background: rgba(255,255,255,.02);
  box-shadow: none;
}
.mtxt{position:relative; z-index:1}
.mtitle{font-weight:950; letter-spacing:.2px}
.msub{margin-top:6px; color:var(--muted); font-size:12px; font-weight:850}

/* responsiveness */
@media (max-width: 1400px){
  .menugrid{grid-template-columns: repeat(3, minmax(0,1fr))}
  .usergrid{grid-template-columns: repeat(3, minmax(0,1fr))}
}
@media (max-width: 980px){
  .updates{grid-template-columns: 1fr}
  .menugrid{grid-template-columns: repeat(2, minmax(0,1fr))}
  .usergrid{grid-template-columns: repeat(2, minmax(0,1fr))}
}
@media (max-width: 620px){
  .menugrid{grid-template-columns: 1fr}
  .usergrid{grid-template-columns: 1fr}
}

.sidebar{display:none !important}


/* TOPBAR WIDE + CENTER NAV */
.topbar-wide{
  position: sticky;
  top: 12px;
  z-index: 20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  /* Full-width within content column (prevents page-level horizontal scroll) */
  width: 100%;
}
.tb-left{display:flex; align-items:center; gap:12px; flex-shrink:0}
.logo{display:flex; align-items:center; gap:10px; padding: 8px 10px; border-radius: var(--r3); border:1px solid var(--stroke2); background: rgba(0,0,0,.20)}
.logo:hover{border-color: rgba(198,0,0,.45); box-shadow: none}
.logo-mark{
  width:44px;height:44px; display:grid; place-items:center;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  box-shadow: none;
  font-weight: 950;
  letter-spacing:.6px;
}
.logo-text{display:flex; flex-direction:column; line-height:1.05}
.logo-title{font-weight:950; letter-spacing:2px; font-size:12px}
.logo-sub{color:var(--muted); font-weight:850; font-size:11px; margin-top:3px}

.tb-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  flex: 1;
  /* Always keep top menu in a single horizontal line */
  overflow-x:auto;
  white-space:nowrap;
  -webkit-overflow-scrolling: touch;
}
.tb-nav::-webkit-scrollbar{height:0}
.tb-link{
  padding: 10px 12px;
  border-radius: 999px;
  border:1px solid var(--stroke2);
  background: rgba(0,0,0,.20);
  color: var(--muted);
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .2px;
}
.tb-link:hover{color:var(--text); border-color: rgba(198,0,0,.45); box-shadow: 0 0 0 1px rgba(198,0,0,.25)}
.tb-link.active{
  color:var(--text);
  border-color: rgba(198,0,0,.65);
  background: rgba(255,255,255,.02);
  box-shadow: none;
}
.tb-right{display:flex; align-items:center; gap:10px; flex-shrink:0}

/* PACK PILLS (moved to topbar right) */
.tb-packs{display:flex; align-items:center; gap:8px; flex-shrink:0}
.tb-packs{flex-wrap:nowrap; white-space:nowrap;}
.pack-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding: 4px 6px;
  border-radius: 999px;
  border:1px solid var(--stroke2);
  background: rgba(0,0,0,.20);
  color: var(--muted);
  font-weight: 950;
  font-size: 9px;
  letter-spacing: .4px;
}
.pack-dot{width:6px;height:6px;border-radius:999px;background: rgba(0,255,140,.95);box-shadow: 0 0 0 3px rgba(0,255,140,.10);}

/* Make the topbar span edge-to-edge inside the padded main container */
.ux-content main.main.full .topbar-wide{
  margin-left: -18px;
  margin-right: -18px;
  border-radius: 0;
  top: 0;
}
.ux-content main.main.full .topbar-wide .logo{margin-left: 18px;}
.ux-content main.main.full .topbar-wide .tb-right{margin-right: 18px;}

/* CENTER MENU GRID */
.center-wrap{margin-top: 16px}
.center-title{
  text-align:center;
  font-size: 30px;
  font-weight: 950;
  letter-spacing:.6px;
  text-shadow: 0 18px 55px rgba(0,0,0,.85);
}
.center-sub{
  text-align:center;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 850;
}
.menugrid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
}
@media (max-width: 980px){
  .menugrid{grid-template-columns: repeat(2, minmax(0,1fr))}
}
@media (max-width: 620px){
  .menugrid{grid-template-columns: 1fr}
}

/* UPDATE FEED (flow) */
.updates{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 980px){
  .updates{grid-template-columns: 1fr}
}
.upcard .feed{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  max-height: 250px;
  overflow:auto;
  padding-right: 4px;
}
.feed-item{
  border-radius: var(--r3);
  border:1px solid var(--stroke2);
  background: rgba(0,0,0,.18);
  padding: 10px 10px;
  position: relative;
  overflow:hidden;
}
.feed-item:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 28%),
    linear-gradient(0deg, rgba(0,0,0,.70), transparent 36%);
  opacity:.9;
}
.feed-row{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-weight: 950;
}
.feed-row .left{display:flex; align-items:center; gap:10px}
.feed-ico{
  width:34px;height:34px;border-radius: 12px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.feed-sub{
  position:relative; z-index:1;
  margin-top: 8px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}
.feed-sub b{color: var(--text); font-size: 12px}

/* USER INFO moved bottom */
.usercard{margin-top: 18px}

.welcome-under{margin-top: 10px; padding: 10px 0 0}
.updates.bottom{margin-top: 18px}
.main.full{width:100%}

.logo-img{height:46px; width:auto; display:block}
.welcome-top{margin-top: 16px; text-align:center}

.menu-icon{width:24px;height:24px;object-fit:contain;opacity:.95}

/* HOVER-ONLY RED ACCENTS */
.mcard:hover,
.upcard:hover,
.usercard:hover{
  border-color: rgba(255,20,20,.45);
  box-shadow: 0 0 0 1px rgba(255,20,20,.35), 0 18px 46px rgba(0,0,0,.75);
}

.mcard:hover .mico,
.upcard:hover .upbadge,
.usercard:hover .plug-ico{
  border-color: rgba(255,20,20,.55);
  background: rgba(255,20,20,.08);
}

.tb-link:hover,
.tb-link.active{
  border-color: rgba(255,20,20,.45);
  color: #fff;
}

.btn.primary:hover{
  box-shadow: 0 0 0 1px rgba(255,20,20,.45), 0 16px 36px rgba(0,0,0,.75);
}


/* V11: red menu lines + cyber background */
.mcard{
  border-color: rgba(255,20,20,.22) !important;
}
.mcard:after{
  content:"";
  position:absolute;
  left:14px; right:14px; top:10px; height:1px;
  background: linear-gradient(90deg, rgba(255,20,20,0), rgba(255,20,20,.75), rgba(255,20,20,0));
  opacity:.75;
}
.mcard:hover{
  border-color: rgba(255,20,20,.45) !important;
}

.upcard{
  border-color: rgba(255,255,255,.10) !important;
}
.usercard{
  border-color: rgba(255,255,255,.10) !important;
}

/* keep 3D but subtle */
.mcard, .upcard, .usercard{
  box-shadow: 0 10px 22px rgba(0,0,0,.58) !important;
}
.mcard:hover, .upcard:hover, .usercard:hover{
  box-shadow: 0 0 0 1px rgba(255,20,20,.28), 0 18px 46px rgba(0,0,0,.75) !important;
}

/* V12 – reference-like polish */
.mcard, .upcard, .usercard{
  background: linear-gradient(145deg, rgba(18,20,24,.96), rgba(8,10,14,.98));
  border-radius: 18px;
}
.mcard:hover{
  transform: translateY(-2px);
}

/* V13 – spacing & breathing room */
.section{margin-bottom:42px;}
.section-title{margin-bottom:22px;}

.menugrid{
  gap:32px !important;
  margin-top:24px;
}

.mcard, .upcard, .usercard{
  padding:26px 28px;
}

.usergrid{
  gap:24px !important;
  margin-top:20px;
}

.updates{
  gap:28px !important;
  margin-top:26px;
}

.header-block{
  margin-bottom:38px;
}

.footer{
  margin-top:60px;
}

.logo img{
  width: 72px;
  height: auto;
  animation: logoPulse 3.5s ease-in-out infinite;
  transform-origin: center;
}

@keyframes logoPulse{
  0%{ transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,20,20,0)); }
  50%{ transform: scale(1.08); filter: drop-shadow(0 0 12px rgba(255,20,20,.35)); }
  100%{ transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,20,20,0)); }
}

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

.logo img{
  width:92px;
}

/* prevent any white card fallback */
.mcard, .upcard, .usercard, .section{
  background-color: transparent !important;
}

.logo{
  width:180px;
  height:40px;
  background: transparent;
}

/* V18 – V6 logo visible */
.logo{background: transparent !important; border:0 !important; padding:0 !important; box-shadow:none !important}
.v6-logo{
  display:flex !important;
  align-items:center;
  gap:10px;
  height:44px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,20,20,.28);
  background: linear-gradient(180deg, rgba(14,14,16,.70), rgba(6,6,8,.92));
  box-shadow: 0 12px 28px rgba(0,0,0,.55);
}
.v6-mark{
  font-weight: 950;
  letter-spacing: 2.4px;
  font-size: 13px;
  color: #fff;
  line-height: 1;
}
.v6-sub{
  font-weight: 900;
  font-size: 11px;
  color: rgba(255,255,255,.55);
  letter-spacing: 1.6px;
  line-height: 1;
  padding-left: 10px;
  border-left: 1px solid rgba(255,20,20,.22);
}
.v6-logo:hover{
  border-color: rgba(255,20,20,.42);
  box-shadow: 0 0 0 1px rgba(255,20,20,.22), 0 14px 34px rgba(0,0,0,.70);
}


/* V19 – EXACT V6 LOGO AREA */
/* APP */
.app{
  display:block;
  min-height:100vh;
}
.main{padding: 18px 22px 34px; max-width: none; margin: 0;}

/* SIDEBAR */
.sidebar{
  padding: 18px 16px;
  border-right: 1px solid var(--stroke2);
  background:
    linear-gradient(180deg, rgba(10,10,10,.96), rgba(6,6,6,.96));
  position: relative;
}
.sidebar:after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, var(--bevel-top), transparent 18%),
    linear-gradient(0deg, var(--bevel-bot), transparent 22%);
  opacity:.9;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 10px 10px 16px;
  border-bottom: 1px solid var(--stroke2);
}
.brand-logo{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius: var(--r3);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.02);
  font-weight:950;
  letter-spacing:.6px;
}
.brand-logo.big{width:52px;height:52px}
.brand-name{font-weight:950;letter-spacing:2px;font-size:12px}
.brand-sub{color:var(--muted);font-size:11px;letter-spacing:.8px;margin-top:2px}

.nav{padding: 14px 6px; display:flex; flex-direction:column; gap:8px}
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding: 12px 12px;
  border-radius: var(--r3);
  border:1px solid transparent;
  color: var(--muted);
  transition: .15s;
  background: transparent;
  position: relative;
}
.nav-item:hover{
  color: var(--text);
  border-color: var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.20));
  box-shadow: 0 10px 24px rgba(0,0,0,.55);
  transform: translateY(-1px);
}
.nav-item.active{
  color: var(--text);
  border-color: rgba(198,0,0,.55);
  background:
    linear-gradient(180deg, rgba(198,0,0,.14), rgba(0,0,0,.22));
  box-shadow: var(--glowred), 0 12px 26px rgba(0,0,0,.6);
}
.nav-item:after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 22%),
    linear-gradient(0deg, rgba(0,0,0,.65), transparent 30%);
  opacity:.85;
}
.ni-dot{width:7px;height:7px;background:var(--stroke);border-radius:2px}
.nav-item:hover{
  color: var(--text);
  border-color: var(--stroke);
  background: rgba(255,255,255,.02);
}
.nav-item.active{
  color: var(--text);
  border-color: rgba(198,0,0,.55);
  background: rgba(198,0,0,.08);
}
.nav-item.active .ni-dot{background: var(--red)}
.sidebar-foot{margin-top: 14px; padding: 10px 8px}
.pill{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: var(--r3);
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.35);
  color: var(--muted);
}
.pill-dot{width:8px;height:8px;background:var(--red);border-radius:2px}
.pill-tag{
  margin-left:auto;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(198,0,0,.55);
  background: rgba(198,0,0,.10);
  color: var(--text);
  font-weight:900;
  font-size:11px;
}

/* TOPBAR */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px;
  border-radius: var(--r);
  border:1px solid var(--stroke2);
  background:
    linear-gradient(180deg, rgba(18,18,18,.92), rgba(7,7,7,.92));
  box-shadow: var(--shadow2);
  position: sticky;
  top: 12px;
  z-index: 10;
  transform: translateZ(0);
}
.topbar:before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 22%),
    linear-gradient(0deg, rgba(0,0,0,.7), transparent 26%);
  opacity:.85;
}
.crumb{display:flex; align-items:center; gap:10px}
.crumb-ico{
  width:30px;height:30px;
  display:grid;place-items:center;
  border-radius: var(--r3);
  border:1px solid rgba(198,0,0,.45);
  background: rgba(198,0,0,.08);
}
.crumb-text{font-weight:950;letter-spacing:.6px}

.top-right{display:flex; align-items:center; gap:10px}
.iconbtn{
  width:38px;height:38px;
  border-radius: var(--r3);
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.35);
  color: var(--text);
  cursor:pointer;
}
.iconbtn:hover{border-color: rgba(198,0,0,.55)}
.user{display:flex; align-items:center; gap:10px; padding: 6px 6px 6px 8px; border-radius: var(--r3); border:1px solid var(--stroke2); background: rgba(0,0,0,.25)}
.avatar{width:34px;height:34px; display:grid;place-items:center; border-radius: var(--r3); border:1px solid rgba(198,0,0,.5); background: rgba(198,0,0,.08); font-weight:950}
.umeta{line-height:1.05}
.uname{font-weight:950;font-size:13px}
.urole{color:var(--muted);font-size:11px}

/* CHIPS + BTNS */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.25);
  color: var(--text);
  font-weight:850;
  font-size:12px;
  cursor:pointer;
}
.chip:hover{border-color: rgba(198,0,0,.55)}
.chip.danger{border-color: rgba(198,0,0,.70); background: rgba(198,0,0,.12); box-shadow: 0 0 0 1px rgba(198,0,0,.35)}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: var(--r3);
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.25);
  color: var(--text);
  font-weight:950;
  letter-spacing:.2px;
  cursor:pointer;
}
.btn:hover{border-color: rgba(198,0,0,.55)}
.btn.primary{
  border-color: rgba(198,0,0,.80);
  background: linear-gradient(180deg, rgba(255,26,26,.28), rgba(198,0,0,.16));
  box-shadow: var(--glowred);
}
.btn.primary:hover{background: linear-gradient(180deg, rgba(255,26,26,.34), rgba(198,0,0,.20)); transform: translateY(-1px)}
.btn.ghost{background: transparent}
.wfull{width:100%}

/* MENUS */
.lang{position:relative}
.menu{
  display:none;
  position:absolute; right:0; top:44px;
  min-width: 160px;
  border:1px solid var(--stroke);
  background: #0c0c0c;
  border-radius: var(--r3);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.menu.open{display:block}
.menu a{display:block;padding:10px 12px;color:var(--muted);border-bottom:1px solid var(--stroke2)}
.menu a:hover{color:var(--text);background: rgba(198,0,0,.10)}
.menu a:last-child{border-bottom:0}

/* CARDS */
.card{
  border-radius: var(--r);
  border:1px solid var(--stroke2);
  background:
    linear-gradient(180deg, rgba(16,16,16,.96), rgba(6,6,6,.96));
  box-shadow: var(--shadow2);
  position: relative;
  overflow: hidden;
}
.card:before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 20%),
    linear-gradient(0deg, rgba(0,0,0,.72), transparent 28%);
  opacity:.9;
}
.card:after{
  content:"";
  position:absolute; left:0; top:0; right:0; height:2px;
  background: linear-gradient(90deg, rgba(198,0,0,.0), rgba(198,0,0,.65), rgba(198,0,0,.0));
  opacity:.9;
}
.card-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--stroke2);
}
.card-title{font-weight:950;letter-spacing:.4px}
.card-sub{color:var(--muted);font-size:12px;margin-top:2px}
.card-body{padding: 16px}

/* HERO */
.hero{
  display:flex; align-items:center; justify-content:space-between;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--r);
  border:1px solid var(--stroke2);
  background: linear-gradient(180deg, rgba(18,18,18,.72), rgba(10,10,10,.72));
}
.h-title{font-weight:950;letter-spacing:.4px}
.h-sub{color:var(--muted);font-size:12px;margin-top:2px}
.hero-right{display:flex; gap:10px}

/* GRID */
.grid2{display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px}
.pack-row{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-top: 14px}
.pack{overflow:hidden}
.pack-top{display:flex; align-items:center; justify-content:space-between; padding: 14px 14px 0}
.brand-circle{width:34px;height:34px;border-radius: 999px;border:1px solid var(--stroke);display:grid;place-items:center;background: rgba(255,255,255,.02);color:var(--muted);font-weight:950}
.pack-brand{display:flex;gap:10px;align-items:center}
.pack-brand-name{font-weight:950}
.pack-brand-sub{color:var(--muted);font-size:11px;margin-top:2px}
.tag{padding: 7px 10px;border-radius:999px;border:1px solid rgba(198,0,0,.5);background: rgba(198,0,0,.10);font-size:11px;font-weight:900}
.pack-body{padding: 10px 14px 16px; text-align:center}
.pack-box{height:98px;border-radius: var(--r3);border:1px solid var(--stroke);background: radial-gradient(220px 120px at 50% 0%, rgba(198,0,0,.14), transparent 60%), rgba(255,255,255,.02); margin: 10px auto 10px; width: 120px}
.pack-name{font-weight:950}
.pack-days{color:var(--muted);font-size:12px;margin-top:6px}

/* TABLE */
.table{width:100%; border-collapse: collapse}
.table th,.table td{padding: 12px 12px;border-bottom:1px solid var(--stroke2); font-size:13px}
.table th{color:var(--muted); font-weight:900; letter-spacing:.3px; text-align:left}
.table tr:hover td{background: rgba(198,0,0,.06)}
.table.compact th,.table.compact td{padding: 10px 10px}
.badge{
  display:inline-flex; align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.25);
  font-weight:900;
  font-size:11px;
}
.status{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight:950;
  font-size:11px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.25);
}
.status.ok{border-color: rgba(198,0,0,.55); background: rgba(198,0,0,.10)}
.divider{height:1px;background: var(--stroke2); margin: 16px 0}

/* FILTERS */
.filters{margin-top: 14px}
.filter-row{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px}
.select label{display:block; color:var(--muted); font-size:12px; margin-bottom:8px; font-weight:850}
.select select,.select input,.select textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: var(--r3);
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.25);
  color: var(--text);
  outline:none;
}
.select textarea{resize: vertical}
.select select:focus,.select input:focus,.select textarea:focus{border-color: rgba(198,0,0,.55)}

/* DROPZONE */
.drop{
  height: 360px;
  border-radius: var(--r);
  border: 2px dashed rgba(198,0,0,.45);
  background:
    radial-gradient(560px 280px at 50% 10%, rgba(198,0,0,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.30));
  display:grid; place-items:center;
  cursor:pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  position: relative;
  overflow:hidden;
}
.drop:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 22%),
    linear-gradient(0deg, rgba(0,0,0,.72), transparent 30%);
  opacity:.9;
}
.drop.drag{border-color: rgba(255,26,26,.75)}
.drop-inner{text-align:center}
.drop-ico{
  width:56px;height:56px;
  display:grid; place-items:center;
  border-radius: var(--r3);
  border:1px solid rgba(198,0,0,.45);
  background: rgba(198,0,0,.08);
  margin: 0 auto 10px;
  font-size:22px;
}
.drop-title{font-weight:950}
.drop-sub{color:var(--muted);font-size:12px;margin-top:6px}
.filebtn{user-select:none}

/* MODS */
.section-title{font-weight:950; margin: 8px 0 10px; color: var(--text)}
.section-title.mt{margin-top: 16px}
.mods{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px}
.mod{
  border-radius: var(--r3);
  border:1px solid var(--stroke2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.26));
  color: var(--text);
  padding: 12px 12px;
  text-align:left;
  cursor:pointer;
  transition: .15s;
  min-height: 66px;
  position: relative;
  overflow:hidden;
}
.mod:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(420px 160px at 20% 0%, rgba(198,0,0,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 22%),
    linear-gradient(0deg, rgba(0,0,0,.70), transparent 32%);
  opacity:.9;
}
.mod:hover{border-color: rgba(198,0,0,.55); box-shadow: 0 12px 24px rgba(0,0,0,.6); transform: translateY(-1px)}
.mod.selected{
  border-color: rgba(198,0,0,.90);
  background: linear-gradient(180deg, rgba(198,0,0,.18), rgba(0,0,0,.30));
  box-shadow: var(--glowred), 0 16px 30px rgba(0,0,0,.65);
}
.mod .mod-ico{
  width:28px;height:28px;border-radius:8px;
  display:grid;place-items:center;
  border:1px solid rgba(198,0,0,.45);
  background: rgba(198,0,0,.08);
  margin-bottom:10px;
  font-size:14px;
  position: relative;
  z-index: 1;
}
.mod-name{position:relative; z-index:1}
.mod:hover{border-color: rgba(198,0,0,.55)}
.mod.selected{
  border-color: rgba(198,0,0,.85);
  background: rgba(198,0,0,.10);
}
.mod-name{font-weight:900;font-size:12px}

/* SELECTED */
.selected{margin-top: 14px; padding-top: 14px; border-top:1px solid var(--stroke2)}
.selected-title{color:var(--muted);font-weight:900;font-size:12px;margin-bottom:10px}
.selected-list{display:flex; flex-wrap:wrap; gap:8px}
.actionbar{display:flex; align-items:center; gap:10px}

/* KV */
.kv{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px}
.kv-item{padding: 12px; border:1px solid var(--stroke2); border-radius: var(--r3); background: rgba(0,0,0,.20); display:flex; justify-content:space-between; gap:10px}
.k{color:var(--muted); font-weight:900; font-size:12px}
.v{font-weight:900}
.two{display:grid; grid-template-columns: 1fr 1fr; gap: 12px}
.filecard{padding: 12px; border:1px solid var(--stroke2); border-radius: var(--r3); background: rgba(0,0,0,.20)}
.fileline{display:flex; justify-content:space-between; gap:10px; padding: 6px 0}
.form{max-width: 700px}

/* AUTH */
.authbg{background: radial-gradient(900px 520px at 20% 0%, rgba(198,0,0,.24), transparent 55%), var(--bg)}
.auth-wrap{min-height:100vh; display:grid; place-items:center; padding: 22px}
.auth-card{
  width: min(460px, 92vw);
  border-radius: var(--r);
  border:1px solid var(--stroke2);
  background: linear-gradient(180deg, rgba(18,18,18,.92), rgba(10,10,10,.92));
  box-shadow: var(--shadow);
  padding: 18px;
}
.auth-brand{display:flex; gap:12px; align-items:center; padding: 10px 10px 16px; border-bottom:1px solid var(--stroke2)}
.auth-title{font-weight:950;letter-spacing:2px}
.auth-sub{color:var(--muted);font-size:12px;margin-top:4px}
.auth-form{padding: 14px 10px 6px}
.auth-form label{display:block;color:var(--muted);font-size:12px;margin:10px 0 8px;font-weight:900}
.auth-form input{
  width:100%;
  padding: 12px 12px;
  border-radius: var(--r3);
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.25);
  color: var(--text);
  outline:none;
}
.auth-form input:focus{border-color: rgba(198,0,0,.55)}
.auth-foot{color:var(--muted);font-size:12px;padding: 10px}
.alert{margin: 12px 10px 0; padding: 10px 12px; border-radius: var(--r3); border:1px solid rgba(198,0,0,.55); background: rgba(198,0,0,.10); font-weight:900}

/* RESPONSIVE */
@media (max-width: 1200px){
  .pack-row{grid-template-columns: repeat(2, minmax(0,1fr))}
  .mods{grid-template-columns: repeat(2, minmax(0,1fr))}
}
@media (max-width: 980px){
  .app{grid-template-columns: 86px 1fr}
  .brand-text,.ni-label,.sidebar-foot{display:none}
  .nav-item{justify-content:center}
  .grid2{grid-template-columns: 1fr}
  .filter-row{grid-template-columns: 1fr}
  .kv{grid-template-columns: 1fr}
  .two{grid-template-columns: 1fr}
}

/* DASHBOARD (Welcome + Tiles like reference) */
.welcome{
  text-align:center;
  padding: 18px 10px 8px;
  margin-top: 8px;
}
.welcome-title{
  font-size: 34px;
  font-weight: 950;
  letter-spacing: .6px;
  text-shadow: 0 18px 55px rgba(0,0,0,.85);
}
.welcome-sub{
  margin-top: 8px;
  color: var(--muted);
  font-weight: 850;
  letter-spacing: .2px;
}

.tiles{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.tile{
  position:relative;
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 18px 18px;
  border-radius: var(--r);
  border: 1px solid var(--stroke2);
  background:
    linear-gradient(180deg, rgba(16,16,16,.96), rgba(6,6,6,.96));
  box-shadow: var(--shadow2);
  overflow:hidden;
  min-height: 104px;
}
.tile:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 260px at 18% 0%, rgba(198,0,0,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 22%),
    linear-gradient(0deg, rgba(0,0,0,.72), transparent 30%);
  opacity:.92;
}
.tile:hover{
  border-color: rgba(198,0,0,.45);
  transform: translateY(-2px);
  box-shadow: var(--glowred), 0 18px 48px rgba(0,0,0,.75);
}
.tile.active{
  border-color: rgba(198,0,0,.55);
  box-shadow: var(--glowred), 0 18px 48px rgba(0,0,0,.78);
}
.tile-ico{
  width:56px;height:56px;
  display:grid;place-items:center;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.30);
  font-size: 20px;
  position:relative;
  z-index:1;
}
.tile-ico.red{
  border-color: rgba(198,0,0,.55);
  background: rgba(198,0,0,.10);
  box-shadow: 0 0 0 1px rgba(198,0,0,.35), 0 0 22px rgba(198,0,0,.18);
}
.tile-text{position:relative; z-index:1}
.tile-title{
  font-weight: 950;
  letter-spacing:.3px;
  font-size: 16px;
}
.tile-title.big{font-size:18px}
.tile-sub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.tile-go{
  margin-left:auto;
  position:relative;
  z-index:1;
  color: rgba(255,255,255,.70);
  font-size: 22px;
  font-weight: 950;
}

.info-card{
  margin-top: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  padding: 18px;
  border-radius: var(--r);
  border: 1px solid var(--stroke2);
  background:
    linear-gradient(180deg, rgba(16,16,16,.96), rgba(6,6,6,.96));
  box-shadow: var(--shadow2);
  position:relative;
  overflow:hidden;
}
.info-card:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 300px at 20% 0%, rgba(198,0,0,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 22%),
    linear-gradient(0deg, rgba(0,0,0,.72), transparent 30%);
  opacity:.92;
}
.info-left{
  display:flex; align-items:center; gap: 14px;
  position:relative; z-index:1;
  min-width: 320px;
}
.info-ico{
  width:56px;height:56px;
  display:grid;place-items:center;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.30);
  font-size: 20px;
}
.info-ico.red{
  border-color: rgba(198,0,0,.55);
  background: rgba(198,0,0,.10);
  box-shadow: 0 0 0 1px rgba(198,0,0,.35), 0 0 22px rgba(198,0,0,.18);
}
.info-title{font-weight:950;font-size:18px}
.info-sub{color:var(--muted);font-size:12px;margin-top:6px;font-weight:850}
.info-right{position:relative; z-index:1; flex:1}
.kv2{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.kv2-item{
  padding: 12px 12px;
  border-radius: var(--r3);
  border: 1px solid var(--stroke2);
  background: rgba(0,0,0,.22);
  position:relative;
  overflow:hidden;
}
.kv2-item:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 26%),
    linear-gradient(0deg, rgba(0,0,0,.68), transparent 34%);
  opacity:.9;
}
.kv2-item .k{position:relative; z-index:1; color:var(--muted); font-weight:900; font-size:12px}
.kv2-item .v{position:relative; z-index:1; font-weight:950; margin-top:6px; font-size:13px}
.footer-note{
  margin-top: 18px;
  text-align:center;
  color: rgba(255,255,255,.35);
  font-size: 12px;
  font-weight: 800;
}
@media (max-width: 1200px){
  .tiles{grid-template-columns: repeat(2, minmax(0,1fr))}
  .kv2{grid-template-columns: repeat(2, minmax(0,1fr))}
}
@media (max-width: 900px){
  .tiles{grid-template-columns: 1fr}
  .info-card{flex-direction:column; align-items:flex-start}
  .kv2{grid-template-columns: 1fr}
}


/* DASH V4: user info on top, update strip 2-col, square menu grid */
.usercard{
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--r);
  border:1px solid var(--stroke2);
  background: linear-gradient(180deg, rgba(16,16,16,.96), rgba(6,6,6,.96));
  box-shadow: var(--shadow2);
  position:relative;
  overflow:hidden;
}
.usercard:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 320px at 20% 0%, rgba(198,0,0,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 22%),
    linear-gradient(0deg, rgba(0,0,0,.72), transparent 30%);
  opacity:.92;
}
.usercard-left{
  display:flex; align-items:center; gap:12px;
  position:relative; z-index:1;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--stroke2);
  margin-bottom: 12px;
}
.plug-ico{
  width:52px;height:52px;
  border-radius: 14px;
  display:grid;place-items:center;
  border:1px solid rgba(198,0,0,.55);
  background: rgba(198,0,0,.10);
  box-shadow: var(--glowred);
  font-size:20px;
}
.usercard-title{font-weight:950;font-size:18px}
.usercard-sub{color:var(--muted);font-size:12px;margin-top:6px;font-weight:850}

.usergrid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 10px;
}
.ug{
  padding: 12px 12px;
  border-radius: var(--r3);
  border:1px solid var(--stroke2);
  background: rgba(0,0,0,.22);
  position:relative;
  overflow:hidden;
}
.ug:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 26%),
    linear-gradient(0deg, rgba(0,0,0,.70), transparent 34%);
  opacity:.9;
}
.ug .k{position:relative; z-index:1; color:var(--muted); font-weight:900; font-size:11px}
.ug .v{position:relative; z-index:1; font-weight:950; margin-top:6px; font-size:13px}

/* update strip */
.updates{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.upcard{
  padding: 16px;
  border-radius: var(--r);
  border:1px solid var(--stroke2);
  background: linear-gradient(180deg, rgba(16,16,16,.96), rgba(6,6,6,.96));
  box-shadow: var(--shadow2);
  position:relative;
  overflow:hidden;
}
.upcard:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(700px 280px at 18% 0%, rgba(198,0,0,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 22%),
    linear-gradient(0deg, rgba(0,0,0,.72), transparent 30%);
  opacity:.92;
}
.uphead{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between}
.uptitle{font-weight:950; letter-spacing:.4px}
.upbadge{
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(198,0,0,.55);
  background: rgba(198,0,0,.10);
  font-size:11px;
  font-weight:950;
}
.uplogo{
  width:64px;height:64px;
  margin-top: 14px;
  border-radius: 16px;
  display:grid;place-items:center;
  border:1px solid rgba(198,0,0,.45);
  background: rgba(0,0,0,.25);
  box-shadow: var(--glowred);
  font-size:24px;
  position:relative; z-index:1;
}
.upmeta{
  position:relative; z-index:1;
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.upmeta div{
  padding: 10px 10px;
  border-radius: var(--r3);
  border:1px solid var(--stroke2);
  background: rgba(0,0,0,.18);
}
.upmeta span{display:block; font-size:11px; margin-bottom:6px}
.upmeta b{display:block; font-size:13px}
.upcard .chip{position:relative; z-index:1; margin-top: 12px}

/* menu grid: square cards */
.menugrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 12px;
}
.mcard{
  padding: 14px 14px;
  border-radius: var(--r);
  border:1px solid var(--stroke2);
  background: linear-gradient(180deg, rgba(16,16,16,.96), rgba(6,6,6,.96));
  box-shadow: var(--shadow2);
  position:relative;
  overflow:hidden;
  min-height: 140px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.mcard:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 220px at 18% 0%, rgba(198,0,0,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 22%),
    linear-gradient(0deg, rgba(0,0,0,.72), transparent 30%);
  opacity:.92;
}
.mcard:hover{
  transform: translateY(-2px);
  border-color: rgba(198,0,0,.45);
  box-shadow: var(--glowred), 0 18px 48px rgba(0,0,0,.75);
}
.mico{
  width:48px;height:48px;
  border-radius: 14px;
  display:grid;place-items:center;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.30);
  font-size:18px;
  position:relative; z-index:1;
}
.mico.red{
  border-color: rgba(198,0,0,.55);
  background: rgba(198,0,0,.10);
  box-shadow: var(--glowred);
}
.mtxt{position:relative; z-index:1}
.mtitle{font-weight:950; letter-spacing:.2px}
.msub{margin-top:6px; color:var(--muted); font-size:12px; font-weight:850}

/* responsiveness */
@media (max-width: 1400px){
  .menugrid{grid-template-columns: repeat(3, minmax(0,1fr))}
  .usergrid{grid-template-columns: repeat(3, minmax(0,1fr))}
}
@media (max-width: 980px){
  .updates{grid-template-columns: 1fr}
  .menugrid{grid-template-columns: repeat(2, minmax(0,1fr))}
  .usergrid{grid-template-columns: repeat(2, minmax(0,1fr))}
}
@media (max-width: 620px){
  .menugrid{grid-template-columns: 1fr}
  .usergrid{grid-template-columns: 1fr}
}

.sidebar{display:none !important}


/* TOPBAR WIDE + CENTER NAV */
.topbar-wide{
  position: sticky;
  top: 12px;
  z-index: 20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.tb-left{display:flex; align-items:center; gap:12px}
.logo{display:flex; align-items:center; gap:10px; padding: 8px 10px; border-radius: var(--r3); border:1px solid var(--stroke2); background: rgba(0,0,0,.20)}
.logo:hover{border-color: rgba(198,0,0,.45); box-shadow: var(--glowred)}
.logo-mark{
  width:44px;height:44px; display:grid; place-items:center;
  border-radius: 14px;
  border:1px solid rgba(198,0,0,.55);
  background: rgba(198,0,0,.10);
  box-shadow: var(--glowred);
  font-weight: 950;
  letter-spacing:.6px;
}
.logo-text{display:flex; flex-direction:column; line-height:1.05}
.logo-title{font-weight:950; letter-spacing:2px; font-size:12px}
.logo-sub{color:var(--muted); font-weight:850; font-size:11px; margin-top:3px}

.tb-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  flex: 1;
}
.tb-link{
  padding: 10px 12px;
  border-radius: 999px;
  border:1px solid var(--stroke2);
  background: rgba(0,0,0,.20);
  color: var(--muted);
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .2px;
}
.tb-link:hover{color:var(--text); border-color: rgba(198,0,0,.45); box-shadow: 0 0 0 1px rgba(198,0,0,.25)}
.tb-link.active{
  color:var(--text);
  border-color: rgba(198,0,0,.65);
  background: rgba(198,0,0,.10);
  box-shadow: var(--glowred);
}
.tb-right{display:flex; align-items:center; gap:10px}

/* CENTER MENU GRID */
.center-wrap{margin-top: 16px}
.center-title{
  text-align:center;
  font-size: 30px;
  font-weight: 950;
  letter-spacing:.6px;
  text-shadow: 0 18px 55px rgba(0,0,0,.85);
}
.center-sub{
  text-align:center;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 850;
}
.menugrid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
@media (max-width: 980px){
  .menugrid{grid-template-columns: repeat(2, minmax(0,1fr))}
}
@media (max-width: 620px){
  .menugrid{grid-template-columns: 1fr}
}

/* UPDATE FEED (flow) */
.updates{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 980px){
  .updates{grid-template-columns: 1fr}
}
.upcard .feed{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  max-height: 250px;
  overflow:auto;
  padding-right: 4px;
}
.feed-item{
  border-radius: var(--r3);
  border:1px solid var(--stroke2);
  background: rgba(0,0,0,.18);
  padding: 10px 10px;
  position: relative;
  overflow:hidden;
}
.feed-item:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 28%),
    linear-gradient(0deg, rgba(0,0,0,.70), transparent 36%);
  opacity:.9;
}
.feed-row{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-weight: 950;
}
.feed-row .left{display:flex; align-items:center; gap:10px}
.feed-ico{
  width:34px;height:34px;border-radius: 12px;
  display:grid; place-items:center;
  border:1px solid rgba(198,0,0,.45);
  background: rgba(198,0,0,.08);
}
.feed-sub{
  position:relative; z-index:1;
  margin-top: 8px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}
.feed-sub b{color: var(--text); font-size: 12px}

/* USER INFO moved bottom */
.usercard{margin-top: 18px}

.welcome-under{margin-top: 10px; padding: 10px 0 0}
.updates.bottom{margin-top: 18px}
.main.full{width:100%}

/* Language selector */
.lang-select{
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: #fff;
  padding: 0 10px;
  margin-left: 10px;
  margin-right: 10px;
  outline: none;
}
.lang-select:focus{
  border-color: rgba(255,43,43,.6);
}