:root{
  --mi-notoken: 156,163,175;
  --mi-token: 255,140,66;
}

.mode-info-trigger{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;margin-top:10px;padding:10px 14px;
  border-radius:var(--radius-sm);border:1px dashed var(--border-light);
  background:rgba(255,255,255,.02);color:var(--muted-light);
  font-size:12.5px;font-weight:600;cursor:pointer;transition:.2s;
  font-family:inherit;
}
.mode-info-trigger .mode-info-cta{color:var(--accent2);font-weight:700}
.mode-info-trigger:hover{background:rgba(255,90,0,.06);border-color:var(--accent);color:var(--accent2)}

.mode-info-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);
  z-index:800;
}
.mode-info-overlay.show{display:block}

.mode-info-drawer{
  position:fixed;left:50%;bottom:0;top:0;
  width:min(900px,94vw);
  max-height:100vh;
  background:var(--bg);
  border:1px solid var(--border);border-bottom:none;
  border-radius:20px 20px 0 0;
  box-shadow:0 -12px 40px rgba(0,0,0,.45);
  z-index:801;
  transform:translate(-50%,100%);transition:transform .28s ease;
  display:flex;flex-direction:column;overflow-y:auto;

  scrollbar-width:thin;
  scrollbar-color:var(--accent) rgba(255,255,255,.04);
}

.mode-info-drawer::-webkit-scrollbar{width:8px}
.mode-info-drawer::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}
.mode-info-drawer::-webkit-scrollbar-thumb{background:var(--accent);border-radius:99px}
.mode-info-drawer::-webkit-scrollbar-thumb:hover{background:var(--accent2)}
.mode-info-drawer.show{transform:translate(-50%,0)}

.mode-info-header{
  display:flex;align-items:flex-start;gap:14px;padding:24px 28px 20px;
  border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--bg);z-index:2;
}
.mode-info-header i.book{color:var(--accent);font-size:22px;margin-top:3px}
.mode-info-header h3{font-size:19px;font-weight:800;margin:0}
.mode-info-subtitle{font-size:14px;color:var(--muted-light);margin-top:3px}
.mode-info-header .close-btn{
  margin-left:auto;background:none;border:none;color:var(--muted-light);
  font-size:18px;cursor:pointer;padding:6px;
}
.mode-info-header .close-btn:hover{color:var(--text)}

.mode-info-body{padding:10px 28px 32px}

.mode-info-group{margin-top:26px}
.mode-info-group:first-child{margin-top:14px}
.mode-info-group--notoken{--gc:var(--mi-notoken)}
.mode-info-group--token{--gc:var(--mi-token)}

.group-title{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-radius:12px;
  background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--border);
  font-weight:800;font-size:15.5px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--text);
  position:relative;
}
.group-title::before{
  content:"";
  position:absolute;left:0;top:8px;bottom:8px;width:3px;
  border-radius:0 3px 3px 0;
  background:rgb(var(--gc));
}
.group-title i{color:var(--accent2);font-size:16px}
.mode-info-group--notoken .group-title{color:var(--accent2)}
.mode-info-group--token .group-title{color:var(--accent2)}

.mode-info-entry{padding:20px 4px;border-bottom:1px solid var(--border)}
.mode-info-group .mode-info-entry:last-child{border-bottom:none;padding-bottom:0}
.mode-info-entry .entry-title{
  display:flex;align-items:center;gap:11px;font-weight:700;
  font-size:17px;color:var(--accent2);margin-bottom:10px;
}
.mode-info-entry p{font-size:15px;line-height:1.75;color:var(--muted-light);margin-bottom:10px}
.mode-info-entry code{
  font-size:14px;background:rgba(255,255,255,.06);
  padding:2px 6px;border-radius:4px;color:var(--accent2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.mode-info-entry .rec-box{
  background:rgba(255,140,66,.05);
  border-left:3px solid var(--accent2);
  border-radius:8px;padding:14px 16px;font-size:14.5px;
  line-height:1.7;color:var(--muted-light);margin-top:10px;
}
.mode-info-entry .rec-box strong{color:var(--text)}