/* UX Piano Black + White + Thin Red – 1769857826 */
:root{
  --bg0:#050506;
  --bg1:#0a0b0d;
  --glass1: rgba(255,255,255,.05);
  --glass2: rgba(255,255,255,.025);
  --stroke: rgba(255,255,255,.085);
  --stroke2: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.60);
  --red:#ff2a2a;
  --redLine: rgba(255,42,42,.18);
  --redGlow: rgba(255,42,42,.12);
  --shadow: 0 18px 60px rgba(0,0,0,.78);
  --shadow2: 0 10px 26px rgba(0,0,0,.60);
  --r:22px;
  --r2:16px;
}
html,body{height:100%;}
body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 50% -10%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
}
/* App layout */
.ux-app{display:grid; grid-template-columns: 300px 1fr; height:100vh; overflow:hidden;}
.ux-side{
  background: rgba(0,0,0,.55);
  border-right:1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(16px);
  padding: 18px 14px;
  display:flex; flex-direction:column; gap:14px;
}
.ux-brand{
  display:flex; align-items:center; gap:12px;
  padding:14px 14px;
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--glass1), var(--glass2));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow2);
}
.ux-mark{
  width:52px;height:52px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  font-weight:950; letter-spacing:1px;
  background: rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.10);
}
.ux-bt{font-weight:950; letter-spacing:.6px;}
.ux-bs{opacity:.62; font-size:12px; margin-top:2px;}
.ux-usercard{
  padding:14px 14px;
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--glass1), var(--glass2));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow2);
}
.ux-user-title{font-weight:950; letter-spacing:.4px; margin-bottom:10px;}
.ux-usergrid{display:grid; gap:10px;}
.ux-usergrid .ug{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.08);
}
.ux-usergrid .k{color: var(--muted); font-size:12px;}
.ux-usergrid .v{font-weight:950; font-size:12.5px;}
.ug-limit{border-color: var(--redLine); box-shadow: 0 0 0 1px rgba(255,42,42,.08);}
.ux-nav{display:flex; flex-direction:column; gap:10px; margin-top:4px;}
.ux-item{
  display:flex; align-items:center; gap:10px;
  padding:12px 12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.86);
}
.ux-item .dot{width:8px;height:8px;border-radius:99px;background: rgba(255,255,255,.35);}
.ux-item:hover{
  border-color: rgba(255,255,255,.14);
  box-shadow: var(--shadow2);
  transform: translateY(-1px);
}
.ux-item.on{
  border-color: var(--redLine);
  box-shadow: 0 0 0 1px var(--redLine), var(--shadow2);
}
.ux-item.on .dot{background: rgba(255,42,42,.75); box-shadow: 0 0 0 4px rgba(255,42,42,.12);}
.ux-foot{margin-top:auto; height:44px; position:relative;}
.ux-redline{
  position:absolute; left:12px; right:12px; bottom:10px; height:1px;
  background: linear-gradient(90deg, transparent, var(--redLine), transparent);
}
/* Content */
.ux-content{height:100vh; overflow:hidden;}
.ux-content main.main.full{height:100%; overflow:auto; padding: 16px 18px 18px !important;}
.ux-content main.main.full::-webkit-scrollbar{width:10px;}
.ux-content main.main.full::-webkit-scrollbar-thumb{background: rgba(255,255,255,.10); border-radius:999px;}
/* Make cards more 3D but clean */
.card, .panel, .dtc-table, .hud-box, .mcard, .upcard{
  background: linear-gradient(180deg, var(--glass1), var(--glass2)) !important;
  border:1px solid rgba(255,255,255,.085) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow2) !important;
}
.card:hover, .mcard:hover, .upcard:hover{
  box-shadow: var(--shadow) !important;
}
/* Inputs & buttons */
input, select, textarea{
  background: rgba(0,0,0,.45) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color: var(--text) !important;
  border-radius: var(--r2) !important;
}
input:focus, select:focus, textarea:focus{
  border-color: var(--redLine) !important;
  box-shadow: 0 0 0 3px rgba(255,42,42,.10) !important;
  outline:none !important;
}
.btn-primary, .savebtn{
  background: rgba(255,255,255,.92) !important;
  color:#0b0c0f !important;
  border:1px solid rgba(255,255,255,.20) !important;
  border-radius: var(--r2) !important;
  font-weight:950 !important;
}
/* Responsive */
@media(max-width:1100px){
  .ux-app{grid-template-columns: 92px 1fr;}
  .ux-btxt, .ux-usercard, .ux-item .txt{display:none;}
  .ux-side{padding: 14px 10px;}
}


/* ARGE block */
.ux-arge{
  padding:14px 14px;
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--glass1), var(--glass2));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow2);
}
.ux-arge-h{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px;}
.ux-arge-title{font-weight:950; letter-spacing:.4px;}
.ux-arge-sub{color: var(--muted); font-size:12px;}
.ux-arge-list{display:flex; flex-direction:column; gap:10px;}
.ux-arge-item{
  display:grid;
  grid-template-columns: 72px 1fr;
  gap:12px;
  padding:12px;
  border-radius: 18px;
  background: rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.08);
}
.ux-arge-img{
  width:72px; height:72px;
  border-radius: 20px;
  background:
    radial-gradient(60px 40px at 30% 30%, rgba(255,255,255,.10), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 30px rgba(0,0,0,.55);
}
.ux-arge-meta{display:grid; gap:8px;}
.ux-arge-row{display:flex; justify-content:space-between; gap:10px; padding:8px 10px; border-radius: 14px; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);}
.ux-arge-row .k{color: var(--muted); font-size:12px;}
.ux-arge-row .v{font-weight:950; font-size:12.5px;}
.ux-arge-empty{color: var(--muted); font-size:12px; padding:8px 2px;}
