/* ============================================================
   TOOL BUTTONS
   ============================================================ */
.tool-btn{
  padding:7px var(--s-3);
  font-size:12.5px;font-weight:600;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text-2);
  border-radius:var(--r-sm);
  transition:background var(--t-1), border-color var(--t-1), color var(--t-1);
  display:inline-flex;align-items:center;gap:6px;
}
.tool-btn:hover{background:var(--hover);color:var(--text);border-color:var(--border-2)}
.tool-btn svg{width:13px;height:13px;display:block;flex:0 0 auto}
.tool-btn.copied{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}

/* ============================================================
   NET STATUS
   ============================================================ */
.net-status{
  position:fixed;bottom:var(--s-4);left:var(--s-4);
  z-index:var(--z-net);
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:var(--s-2) var(--s-3);
  font-size:12px;font-weight:600;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  color:var(--text-2);
  opacity:0;transform:translateY(6px);
  transition:opacity var(--t-2), transform var(--t-2);
  pointer-events:none;
  box-shadow:var(--shadow-1);
}
.net-status.show{opacity:1;transform:translateY(0)}
.net-status .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.net-status.offline{color:var(--danger);border-color:var(--danger)}
.net-status.offline .dot{background:var(--danger)}

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-to-top{
  position:fixed;right:22px;bottom:22px;
  z-index:var(--z-top);
  width:44px;height:44px;
  border-radius:50%;
  background:var(--accent);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--t-2), visibility var(--t-2),
             transform var(--t-2), background var(--t-1);
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:var(--accent-hover)}
.back-to-top svg{width:20px;height:20px;display:block}

/* ============================================================
   TOOLTIP
   ============================================================ */
.custom-tip{
  position:fixed;z-index:var(--z-ctx);
  max-width:280px;
  padding:10px var(--s-3);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-2);
  font-size:12.5px;line-height:1.5;
  color:var(--text);
  opacity:0;transform:translateY(-4px);
  transition:opacity .15s, transform .15s;
  pointer-events:none;
  top:-9999px;left:-9999px;
}
.custom-tip.show{opacity:1;transform:translateY(0)}
.custom-tip .tip-title{
  font-weight:700;font-size:13px;color:var(--text);margin-bottom:3px;
}
.custom-tip .tip-desc{color:var(--text-2)}

/* ============================================================
   INFO MODAL
   ============================================================ */
.info-modal{
  position:fixed;inset:0;z-index:var(--z-modal);
  background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;
  padding:var(--s-5);
  opacity:0;visibility:hidden;
  transition:opacity var(--t-2), visibility var(--t-2);
}
.info-modal.open{opacity:1;visibility:visible}
.info-modal-card{
  width:100%;max-width:400px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:22px 22px 18px;
  text-align:center;
  transform:scale(.96);
  transition:transform var(--t-2);
  box-shadow:var(--shadow-3);
}
.info-modal.open .info-modal-card{transform:scale(1)}
.info-modal-icon{
  width:48px;height:48px;margin:0 auto var(--s-3);
  border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);
}
.info-modal-icon svg{width:26px;height:26px;display:block}
.info-modal-title{
  font-size:16px;font-weight:700;margin:0 0 var(--s-2);
  color:var(--text);letter-spacing:-.01em;
}
.info-modal-text{
  font-size:13.5px;line-height:1.55;color:var(--text-2);
  margin:0 0 var(--s-4);
  overflow-wrap:anywhere;
}
.info-modal-close{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px var(--s-5);
  font-size:13.5px;font-weight:600;
  background:var(--accent);color:#fff;
  border-radius:var(--r-sm);
  border:1px solid var(--accent);
  transition:background var(--t-1), border-color var(--t-1);
}
.info-modal-close:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.info-modal-close svg{width:13px;height:13px;display:block;flex:0 0 auto}

/* ============================================================
   RAW VIEW
   ============================================================ */
.raw-back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--text-2);
  margin-bottom:var(--s-5);
  padding:5px 10px;
  border-radius:var(--r-sm);
  transition:background var(--t-1), color var(--t-1);
}
.raw-back:hover{background:var(--hover);color:var(--text);text-decoration:none}
.raw-back svg{width:14px;height:14px;display:block;flex:0 0 auto}
.raw-toolbar{display:flex;gap:var(--s-2);margin:var(--s-4) 0}
.raw-pre{
  padding:var(--s-4) var(--s-5);
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  font-family:var(--font-mono);
  font-size:13px;line-height:1.6;color:var(--text);
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* ============================================================
   CUSTOM CONTEXT MENU
   ============================================================ */
.ctx-menu{
  position:fixed;
  z-index:var(--z-ctx);
  min-width:190px;
  padding:var(--s-1);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-2);
  display:none;
  flex-direction:column;
  gap:1px;
  font-size:13px;
  color:var(--text);
  user-select:none;
  -webkit-user-select:none;
}
.ctx-menu.open{display:flex}
.ctx-item{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;
  color:var(--text);
  border-radius:var(--r-sm);
  cursor:pointer;
  text-align:left;
  transition:background .1s;
  white-space:nowrap;
  width:100%;
}
.ctx-item:hover{background:var(--hover)}
.ctx-item:disabled{opacity:.35;cursor:default;background:none}
.ctx-item svg{width:14px;height:14px;display:block;color:var(--text-3);flex:0 0 auto}
.ctx-item kbd{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--text-3);
  background:var(--surface-2);
  border:1px solid var(--border);
  padding:1px 5px;
  border-radius:var(--r-xs);
  line-height:1.3;
}
.ctx-sep{height:1px;background:var(--border);margin:var(--s-1) 2px}