.drawer-backdrop{
      position:fixed; inset:0;
      background: rgba(15,23,42,.35);
      opacity:0;
      pointer-events:none;
      transition: opacity .18s ease;
    }
    html[data-theme="dark"] .drawer-backdrop{ background: rgba(0,0,0,.55); }

    .drawer{
      position:fixed;
      top:0; right:-420px;
      width: 420px;
      height: 100vh;
      background: var(--panel);
      border-left:1px solid var(--border);
      box-shadow: var(--shadow);
      transition: right .22s ease;
      display:flex;
      flex-direction:column;
    }
    @media (max-width: 520px){
      .drawer{ width: 100%; }
    }

    .drawer.open{ right:0; }
    .drawer-backdrop.open{
      opacity:1;
      pointer-events:auto;
    }

    .drawer-h{
      padding:14px 16px;
      border-bottom:1px solid var(--border);
      display:flex; align-items:center; justify-content:space-between;
      gap:10px;
      background: linear-gradient(180deg, rgba(99,91,255,.10), transparent 70%);
    }
    .drawer-h strong{ font-size:13px; }
    .drawer-b{
      padding:14px 16px;
      overflow:auto;
      display:flex;
      flex-direction:column;
      gap:12px;
    }

    .data{
      display:grid;
      grid-template-columns: 130px 1fr;
      gap:10px;
      padding:10px 12px;
      border:1px solid var(--border);
      border-radius: 14px;
      background: var(--panel-2);
    }
    
    .key .label{ font-size:12px; color:var(--muted); }
    .value .wrapper{ font-size:13px; color:var(--text); word-break:break-word; }

    .drawer-actions{
      margin-top:auto;
      padding:12px 16px 16px;
      border-top:1px solid var(--border);
      display:flex;
      gap:10px;
    }