/* =========================
   css/screens.css  (全置換)
   - 画面中身の共通実装だけ
   - テクスチャ/配色の独自性は theme.css の変数で差し替える
   ========================= */

/* ========= Theme Texture Layer (implementation is HERE only) =========
   theme.css で以下をテーマごとに設定:
   --tex-global : 画面全体テクスチャ（none可）
   --tex-editor : 本文だけテクスチャ（none可）
*/
:root {
	--tex-global: none;
	--tex-editor: none;
}

/* global texture behind UI */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background: var(--tex-global);
}

/* raise main UI above texture */
.topbar,
.layout,
.status,
.ctxMenu,
.dlgBox {
	position: relative;
	z-index: 1;
}

/* ========= Topbar ========= */
.topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	background: var(--topbar);
	border-bottom: 1px solid var(--line);
	color: var(--bar-text);
}

.brand {
	display: flex;
	align-items: center;
	padding: 2px 6px;
	border-radius: 12px;
}
.brand .app {
	font-weight: 700;
	letter-spacing: 0.2px;
}

.menubar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
}
.topActions {
	min-width: 12px;
}

/* ========= Explorer ========= */
.filter {
	padding: 9px 12px;
}

.fileList {
	margin-top: 10px;
	border-radius: 12px;
	border: 1px solid var(--line-2);
	background: var(--panel2);
	overflow: auto;
	height: calc(100% - 54px);
	padding: 6px 0;
}

.row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px;
	border-radius: 10px;
	margin: 2px 6px;
	cursor: pointer;
	user-select: none;
	position: relative;
}

.row.active {
	background: var(--row-active-bg);
	border-color: var(--row-active-bd);
}

.icon {
	width: 26px;
	height: 22px;
	display: grid;
	place-items: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
	opacity: 0.95;
}

.name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dropTarget {
	outline: 2px solid var(--drop-outline);
	outline-offset: -2px;
}

/* current folder / root row (独立枠) */
.row.root {
	cursor: default;
	margin: 8px 8px 6px;
	padding: 10px 10px 10px 18px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: var(--panel2);
}
.row.root:hover {
	background: var(--panel2);
	border-color: var(--line);
}
.row.root .name {
	font-weight: 650;
}
.row.root::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 8px;
	bottom: 8px;
	width: 4px;
	border-radius: 99px;
	background: var(--accent);
	opacity: 0.75;
}

/* ========= Editor ========= */
.editorBody {
	padding: 0;
}

/* editor bar uses editor variables (theme.css decides values) */
.midbar,
.paneHead.midbar {
	background: var(--ed-bar-bg);
	border-bottom: 1px solid var(--ed-bar-line);
	color: var(--ed-bar-fg);
}
/* midbar内は継承で揺れないように固定 */
.pane.editor .paneHead.midbar,
.pane.editor .paneHead.midbar .btn,
.pane.editor .paneHead.midbar .pill,
.pane.editor .paneHead.midbar .toggleLine,
.pane.editor .paneHead.midbar .toggleLine span{
  color: var(--ed-bar-fg);
}


.midLeft,
.midRight {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* midbar buttons: stable border (theme variables) */
.pane.editor .paneHead.midbar .btn {
	border-color: var(--ed-btn-line);
}
.pane.editor .paneHead.midbar .btn:hover {
	border-color: var(--ed-btn-line-hover);
}
.pane.editor .paneHead.midbar .btn.ghost {
	background: var(--ed-btn-bg);
	border-color: var(--ed-btn-line);
}
.pane.editor .paneHead.midbar .btn.ghost:hover {
	background: var(--ed-btn-bg-hover);
	border-color: var(--ed-btn-line-hover);
}

.editorArea {
	width: 100%;
	height: 100%;
	resize: none;
	border: 0;
	outline: none;
	padding: 12px 14px 18px;
	background: var(--tex-editor), var(--ed-bg);
	color: var(--ed-fg);
	font-family: var(--editor-font);
	font-size: var(--editor-size);
	line-height: 28px;
	overflow: auto;
	caret-color: var(--ed-caret);
}

/* ========= Status ========= */
.status {
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 12px;
	border-top: 1px solid var(--line);
	background: var(--panel);
}

.stMsg {
	font-size: 12px;
	color: var(--muted);
}
.stMsg.ok {
	color: rgba(70, 190, 140, 0.9);
}
.stMsg.warn {
	color: rgba(230, 140, 90, 0.95);
}
.stPerm,
.stPos {
	font-size: 12px;
	color: var(--muted);
}

/* ========= Dialogs ========= */
.dlg::backdrop {
	background: rgba(0, 0, 0, 0.4);
}
.dlg{
  border: 0;
  padding: 0;
  background: transparent;
}
.dlgBox {
	width: min(520px, calc(100vw - 28px));
	border-radius: var(--radius);
	background: var(--panel);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-1);
	overflow: hidden;
	color: var(--text);
}

/* ========= Keymap (compact like Live2D) ========= */

.kmTable{
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel2);
}
.kmTable:empty::before{
	content: "割り当てがありません。";
	color: var(--muted);
	font-size: 12px;
}

/* item */
.kmItem{
	border: 1px solid var(--line-2);
	border-radius: 10px;
	background: var(--panel);
	overflow: hidden;
}
.kmItem.open{
	border-color: var(--line);
}

/* head (single-row) */
.kmHead{
	display: grid;
	grid-template-columns: 1fr auto 46px;
	align-items: center;
	gap: 10px;
  padding: 10px 12px;
	cursor: pointer;
}
.kmName{
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--text);
	font-weight: 650;
}
.kmKeyPill{
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 999px;
	border: 1px solid var(--line-2);
	background: var(--field2);
	color: var(--text);
	user-select: none;
}

/* toggle (switch-like) */
.kmToggle{
	width: 46px;
	height: 26px;
	border-radius: 999px;
	border: 1px solid var(--line-2);
	background: var(--field);
	position: relative;
	cursor: pointer;
}
.kmToggle::after{
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--panel2);
	border: 1px solid var(--line-2);
	transition: transform var(--t-mid) var(--ease);
}
.kmToggle[aria-expanded="true"]{
	border-color: var(--accent);
}
.kmToggle[aria-expanded="true"]::after{
	transform: translateX(20px);
	border-color: var(--accent);
}

/* body (expanded editor) */
.kmBody{
	border-top: 1px solid var(--line-2);
  padding: 12px;
  gap: 12px;
	display: grid;
}
.kmBody.hidden{ display: none; }

.kmField{ display: grid; gap: 6px; }
.kmLabel{
	font-size: 12px;
	color: var(--muted);
}
/* keymap inputs/selects (dlgKeymap only) */
#dlgKeymap input[type="text"],
#dlgKeymap select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--field);
  color: var(--text);
  outline: none;
  cursor: pointer;
	caret-color: var(--text);
}

#dlgKeymap input[type="text"]::placeholder{
  color: color-mix(in srgb, var(--muted) 80%, transparent);
}

#dlgKeymap input[type="text"]:focus,
#dlgKeymap select:focus{
  border-color: var(--focus-ring);
  background: var(--field2);
}


.kmActionLine{
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 10px;
}
@media (max-width: 720px){
	.kmHead{ grid-template-columns: 1fr auto 46px; }
	.kmActionLine{ grid-template-columns: 1fr; }
}

/* key row in expanded */
.kmKeyRow{
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 8px;
	align-items: center;
}
.kmKeyDisplay{
	padding: 8px 10px;
	border-radius: 10px;
	border: 1px solid var(--line);
	background: var(--panel2);
	color: var(--text);
	user-select: none;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.kmKeyDisplay.capturing,
.kmKeyDisplay.flash{
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* inputs in keymap dialog only */
/* ========= Keymap dialog layout (Cubism-like) ========= */
/* dlgBoxは「上：ヘッダ / 下：2カラム」にする */
#dlgKeymap .dlgBox{
  width: min(980px, calc(100vw - 28px));
  height: min(82vh, 900px);

  display: grid;
  grid-template-rows: auto 1fr;                 /* ← 重要 */
  grid-template-columns: 1fr 260px;             /* 左/右 */
  gap: 14px;

  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  color: var(--text);
  align-items: stretch;
}

/* ヘッダがあるなら上段に固定して2カラムを跨がせる */
#dlgKeymap .dlgHead{
  grid-row: 1;
  grid-column: 1 / -1;
  margin: 0;
}

/* dlgFootはボタンを右に移したので“ここでは消す” */
#dlgKeymap .dlgFoot{
  display: none;
}

/* 左カラム（一覧＋詳細） */
#dlgKeymap .kmMain{
  grid-row: 2;
  grid-column: 1;
  min-width: 0;
  min-height: 0;         /* ← 重要：スクロール発生させる */
  overflow: hidden;      /* 左全体がはみ出さないように */
  display: grid;
}

/* 左カラムのスクロール領域は dlgBody */
#dlgKeymap .dlgBody{
  min-height: 0;         /* ← 重要 */
  overflow: auto;        /* ← 重要 */
  padding: 0;
}

/* 右カラム（操作パネル：上から開始＆見分けつく背景） */
#dlgKeymap .kmSide{
  grid-row: 2;
  grid-column: 2;

  min-width: 0;
  min-height: 0;
  align-self: stretch;

  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: 12px;
  border-left: 1px solid var(--line-2);
  background: var(--panel2);         /* ← 背景が無い問題を潰す */
  border-radius: 12px;
}

/* セクション */
#dlgKeymap .kmSideSec{ display: grid; gap: 8px; }
#dlgKeymap .kmSideTitle{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .02em;
}

/* ボタン群：上から積む */
#dlgKeymap .kmSideBtns{
  display: grid;
  gap: 8px;
}

/* 右パネルの注記 */
#dlgKeymap .kmSideNote{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* 右パネルのボタンが「中央寄り」に見えるのを避ける */
#dlgKeymap .kmSide .btn{
  justify-content: center;
}

/* footer actions inside item */
.kmFoot{
	display: flex;
	justify-content: flex-end;
}
.btn.danger{
	border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2));
}

/* ===== Keymap dialog fade (open/close) ===== */
body[data-anim="on"] #dlgKeymap .dlgBox{
  transition: opacity 160ms var(--ease), transform 200ms var(--ease);
}
body[data-anim="on"] #dlgKeymap::backdrop{
  background: rgba(0,0,0,0);
  transition: background 160ms var(--ease);
}

#dlgKeymap[open] .dlgBox{
  opacity: 1;
  transform: none;
}
body[data-anim="on"] #dlgKeymap[open]::backdrop{
  background: rgba(0,0,0,0.4);
}

/* close animation (JSで.closing付与) */
body[data-anim="on"] #dlgKeymap.closing .dlgBox{
  opacity: 0;
  transform: translateY(8px);
}
body[data-anim="on"] #dlgKeymap.closing::backdrop{
  background: rgba(0,0,0,0);
}


/* ========= Context menu ========= */
.ctxMenu {
	position: fixed;
	z-index: 100;
	min-width: 190px;
	border-radius: var(--radius);
	background: var(--panel);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-1);
	padding: 8px;
}
.ctxMenu.hidden {
	display: none;
}
.ctxItem {
	width: 100%;
	text-align: left;
	border: 1px solid transparent;
	background: transparent;
	color: var(--text);
	padding: 7px 10px;
	border-radius: 12px;
	cursor: pointer;
}
.ctxItem:hover {
	background: var(--btn);
	border-color: var(--line-2);
}
.ctxItem.disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
.ctxItem.danger {
	color: var(--danger);
}

/* ===== file tree icon: 枠なし・読みやすく ===== */

#fileList {
	font-size: 14px;
	line-height: 1.35;
}

#fileList .row {
	min-height: 30px;
	padding-top: 6px;
	padding-bottom: 6px;
}

/* 枠(背景/ボーダー)を全部やめる。幅だけ固定して揃える */
#fileList .row .icon {
	flex: 0 0 22px;
	width: 22px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	margin-right: 8px;

	background: transparent;
	border: none;
	box-shadow: none;

	/* 見えづらいのを上げる */
	font-size: 16px; /* 絵文字/アイコンを大きく */
	line-height: 1;
	opacity: 0.92; /* 薄いのを濃く */
	color: var(--text); /* 可能なら文字色を強く */

	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.55),
		0 0 1px rgba(0, 0, 0, 0.55);
}

/* hoverで変な枠が出ないように */
#fileList .row:hover .icon {
	background: transparent;
	border: none;
	box-shadow: none;
	opacity: 1;
}

/* ファイル名の視認性 */
#fileList .row .name {
	font-size: 14px;
	color: var(--text);
}

/* ルート（現在フォルダ）だけ少し強調したいなら（要らなきゃ消せ） */
#fileList .row.root .name {
	font-weight: 800;
}

/* root(現在フォルダ)で空ならズレるので visibility で隠す（枠無しだから自然） */
#fileList .row.root .icon {
	visibility: hidden;
}

/* ===== Side tabs (Outline / Find) : ADD ===== */
.sideTabs {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.tabBtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 12px;
	border: 1px solid var(--line-2);
	background: var(--btn);
	color: var(--text);
	font: inherit;
	cursor: pointer;
	white-space: nowrap;
	transition:
		background var(--t-mid) var(--ease),
		border-color var(--t-mid) var(--ease);
}
.tabBtn:hover {
	background: var(--btn2);
	border-color: var(--line);
}
.tabBtn.isActive {
	background: var(--menu-open-bg, var(--btn2));
	border-color: var(--menu-open-bd, var(--line));
}

/* tab panels */
.sidePanel {
	display: none;
	height: 100%;
	min-height: 0;
}
.sidePanel.isActive {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* inner head inside tab */
.sideHead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 12px;
	background: var(--panel2);
	border-bottom: 1px solid var(--line-2);
}
.sideHeadTitle {
	font-weight: 800;
	color: var(--text);
	white-space: nowrap;
}
.sideHeadTools {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* outline list (既存があっても上書き最小) */
#outline.outlineList {
	min-height: 0;
	flex: 1;
	overflow: auto;
	padding: 10px;
}

/* find/replace sizing */
.findForm {
	padding: 12px;
	border-bottom: 1px solid var(--line-2);
}
.findRow {
	display: grid;
	grid-template-columns: 62px 1fr;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.findLbl {
	font-size: 12px;
	color: var(--muted);
	white-space: nowrap;
}
.findInput {
	width: 100%;
	padding: 9px 10px;
	font-size: 14px;
	border-radius: 12px;
	border: 1px solid var(--line-2);
	background: var(--field);
	color: var(--text);
	outline: none;
}
.findInput:focus {
	background: var(--field2);
	border-color: var(--focus-ring);
}
.findBtns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}
.findHint {
	margin-top: 8px;
	font-size: 12px;
	color: var(--muted);
	min-height: 18px;
}
.findOpt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--muted);
	user-select: none;
}
.findResultsWrap {
	min-height: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.findResultsHead {
	padding: 6px 12px;
	font-size: 12px;
	color: var(--muted);
	background: var(--panel2);
	border-bottom: 1px solid var(--line-2);
}
.findResults {
	min-height: 0;
	flex: 1;
	overflow: auto;
	padding: 10px;
}

/* search result row readable */
.srRow {
	width: 100%;
	text-align: left;
	background: transparent;
	color: var(--text);
	padding: 9px 10px;
	border-radius: 12px;
	cursor: pointer;
	margin: 4px 4px;
	font-size: 13px;
	line-height: 1.5;
	white-space: normal;
	word-break: break-word;
	border: 1px solid transparent;
}
.srRow:hover {
	background: var(--btn);
	border-color: var(--line-2);
}
.srRow.active {
	background: var(--row-active-bg, var(--btn2));
	border-color: var(--row-active-bd, var(--line));
}

/* midbar ghost border regression guard */
#midbar .btn.ghost {
	background: var(--btn);
	border-color: var(--line-2);
}
#midbar .btn.ghost:hover {
	background: var(--btn2);
	border-color: var(--line);
}

@media (max-width: 980px) {
	.tabBtn {
		padding: 6px 8px;
	}
	.findRow {
		grid-template-columns: 54px 1fr;
	}
}

/* 検索パネルの横スクロールを殺す */
#panelFind,
#panelFind .findResultsWrap,
#panelFind .findResults{
  overflow-x: hidden;
}

/* 結果行が横に伸びないようにする（長い英数字/URL対策） */
#panelFind .srRow{
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* グリッド子要素が縮められず横にはみ出すのを防ぐ */
#panelFind .findRow > *{
  min-width: 0;
}
#panelFind .findInput{
  min-width: 0;
}

/* midbar内：ラベル/中身/checkbox 全部ポインタに統一 */
#midbar .toggleLine,
#midbar .toggleLine *{
  cursor: pointer;
}
#midbar .toggleLine input[type="checkbox"]{
  cursor: pointer;
}

/* ===== Sidebar tabs: ボタン感を消して“タブ”に寄せる ===== */
#outlinePane .paneHead{
  padding-bottom: 0; /* タブを下に揃える */
}

#outlinePane .sideTabs{
  gap: 0;
  border-bottom: 1px solid var(--line-2);
  width: 100%;
}

/* 既存.tabBtnをタブ形状に上書き */
#outlinePane .tabBtn{
  border: 0;
  border-radius: 12px 12px 0 0;
  background: transparent;
  padding: 9px 12px;
  margin: 0 2px -1px 0; /* 下線に被せる */
  color: var(--muted);
  position: relative;
}

/* hover：薄い面でタブっぽく */
#outlinePane .tabBtn:hover{
  background: var(--btn);
  color: var(--text);
}

/* active：面＋下線を“つながる”感じに */
#outlinePane .tabBtn.isActive{
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-bottom-color: var(--panel); /* 下線と一体化 */
}

/* activeの下にアクセント線（タブ感） */
#outlinePane .tabBtn.isActive::after{
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 2px;
  border-radius: 99px;
  background: var(--accent);
  opacity: .9;
}

/* ピルはタブ内で目立ちすぎないように */
#outlinePane .tabBtn .pill{
  transform: translateY(-1px);
  opacity: .85;
}

/* タブの下の中身が“枠の中”に見えるように */
#outlinePane .paneBody{
  border-top: 0;
}

/* タブが詰まる時は横スクロールさせない（折り返し禁止） */
#outlinePane .sideTabs{
  overflow: hidden;
}
#outlinePane .tabBtn{
  white-space: nowrap;
}

/* ========= Global base (dialog text fixes) ========= */
body{
	background: var(--bg);
	color: var(--text);
	font-family: var(--ui-font);
}

/* keymap dialog: make sure labels are readable on all themes */
.kmTitle{ font-weight: 800; color: var(--text); }
.kmActions{ display:flex; align-items:center; gap:8px; }
.kmKeyInput{ width: 180px; }

/* ===== Format panel ===== */
#panelFormat .fmtBody{
  padding: 12px;
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 14px;
}

#panelFormat .fmtGroup{
  display: grid;
  gap: 8px;
}

#panelFormat .fmtTitle{
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .02em;
}

#panelFormat .fmtBtns{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#panelFormat .fmtBtns .btn{
  height: var(--bar-btn-h);
  padding: 0 var(--bar-btn-px);
}

/* ===== Variant Fix (表記ゆれ統一) ===== */
#panelFormat .fmtRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

#panelFormat .vfRules{
  display:grid;
  gap:8px;
}

#panelFormat .vfRule{
  display:grid;
  grid-template-columns: 28px 1fr 1.5fr 64px;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border:1px solid var(--line-2);
  border-radius:12px;
  background:var(--panel);
}

#panelFormat .vfRule input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:var(--accent);
}

#panelFormat .vfInput{
  width:100%;
  padding:8px 10px;
  font-size:13px;
  border-radius:12px;
  border:1px solid var(--line-2);
  background:var(--field);
  color:var(--text);
  outline:none;
}

#panelFormat .vfInput:focus{
  background:var(--field2);
  border-color:var(--focus-ring);
}

#panelFormat .vfSuggestWrap{
  border:1px solid var(--line-2);
  border-radius:12px;
  overflow:hidden;
  background:var(--panel);
}

#panelFormat .vfSuggestHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 10px;
  font-size:12px;
  color:var(--muted);
  background:var(--panel2);
  border-bottom:1px solid var(--line-2);
}

#panelFormat .vfSuggestList{
  padding:10px;
  display:grid;
  gap:8px;
  max-height:220px;
  overflow:auto;
}

#panelFormat .vfSug{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border:1px solid var(--line-2);
  border-radius:12px;
  background:var(--panel2);
}

#panelFormat .vfSug small{
  color:var(--muted);
}