:root{
      --bg-main:#020617;
      --bg-tree:#0f172a;
      --panel:#0b1222;
      --glass: rgba(15, 23, 42, 0.78);
      --glass2: rgba(10, 12, 22, 0.70);
      --border: rgba(255,255,255,0.10);
      --text:#f1f5f9;
    }
    body{
      margin:0;
      background: var(--bg-main);
      color: var(--text);
      overflow:hidden;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }
    .glass-header{ background: var(--glass); border-bottom: 1px solid var(--border); backdrop-filter: blur(14px); }
    .glass-aside { background: var(--glass2); border-left: 1px solid var(--border); backdrop-filter: blur(14px); }
    .glass-card  { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 28px; backdrop-filter: blur(10px); }
    .bg-tree     { background: var(--bg-tree); }

    .input-field{
      width:100%;
      background: rgba(0,0,0,0.35);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 16px;
      padding: 10px 12px;
      font-size: 12px;
      font-weight: 800;
      color: var(--text);
      outline:none;
    }
    .input-field:focus{
      border-color: rgba(59,130,246,0.55);
      box-shadow: 0 0 0 3px rgba(59,130,246,0.20);
    }

    .custom-scrollbar::-webkit-scrollbar{ width: 10px; height: 10px;}
    .custom-scrollbar::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.10); border-radius: 999px; }
    .custom-scrollbar::-webkit-scrollbar-track{ background: rgba(255,255,255,0.02); }

    .tree-line-v{ position:absolute; left: 14px; top: 0; bottom: 0; width:2px; background: rgba(255,255,255,0.08); }
    .tree-line-h{ position:absolute; left: 14px; top: 28px; width: 18px; height:2px; background: rgba(255,255,255,0.08); }

    .rank-mem { background: #ffffff; color: #000; }
    .rank-l1  { background: #facc15; color: #000; }
    .rank-l2  { background: #22c55e; color: #fff; }
    .rank-l3  { background: #3b82f6; color: #fff; }
    .rank-l4  { background: #a855f7; color: #fff; }
    .rank-l5  { background: #ec4899; color: #fff; }
    .rank-l6  { background: #4338ca; color: #fff; }
    .rank-l7  { background: #ec4899; color: #fff; }
    .rank-l8  { background: #fb7185; color: #fff; }
    .rank-l9  { background: #ef4444; color: #fff; }
    .rank-l10 {
      background: linear-gradient(135deg, #facc15, #ca8a04);
      color: #000;
      box-shadow: 0 0 0 2px rgba(250,204,21,0.35), 0 0 24px rgba(250,204,21,0.30);
    }
  
    /* Mobile helpers */
    .mobile-pan { touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    .sheet-scroll{ overflow-y:auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; }