/* Tool drawers, user panel, token calculator */
hr.sep { border: 0; border-top: 1px solid var(--border); margin: var(--s5) 0; }
.drawer-body h4 { margin: var(--s4) 0 var(--s2); }
.drawer-body form > .row { margin-top: 4px; }
.tool-result h3 { font-size: var(--fs-lg); }
.graph-preview { background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px; display: flex; justify-content: center; }
.graph-preview svg { max-width: 100%; height: auto; }
fieldset.fileset { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 14px 12px; margin: 0; display: grid; gap: 8px; }
fieldset.fileset legend { font-size: var(--fs-sm); font-weight: 600; padding: 0 4px; }
.rule-card { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px 2px; margin-top: 8px; background: var(--surface-2); }
.rule-card select.input { width: auto; min-height: 32px; padding: 4px 8px; }
.rule-card .field { margin-bottom: 10px; }
table.mapping td { padding: 5px 8px; }
table.mapping .input { min-height: 32px; padding: 4px 8px; }
.draft-label { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--warn-bg); color: var(--warn-text); border: 1px dashed var(--warn-border); font-weight: 600; font-size: var(--fs-sm); }

/* user panel layout */
.subnav { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--border); margin-bottom: var(--s5); scrollbar-width: none; }
.subnav a { padding: 9px 12px; font-size: var(--fs-md); color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.subnav a:hover { color: var(--text); }
.subnav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--primary); font-weight: 600; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; font-size: var(--fs-md); }
.kv dt { color: var(--text-2); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.quota { display: grid; gap: 8px; }
.quota .nums { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--text-2); flex-wrap: wrap; gap: 8px; }
.quota .big { font-family: var(--font-head); font-size: var(--fs-2xl); font-weight: 600; color: var(--text); }
.split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.split > .panel + .panel { margin-top: 0; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }
.mode-bars { display: grid; gap: 10px; }
.mode-bars .r { display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) max-content; gap: 10px; align-items: center; font-size: var(--fs-sm); }
.mode-bars .bar { height: 10px; }
.secret { font-family: var(--font-mono); font-size: 13px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); overflow-wrap: anywhere; user-select: all; }
.opt-in { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s4); background: var(--surface-2); }
.opt-in p { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--text-2); }

/* token calculator */
.pieces { display: flex; flex-wrap: wrap; gap: 3px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); max-height: 220px; overflow: auto; }
.pieces span { padding: 4px 3px; border-radius: 3px; white-space: pre; }
.pieces span:nth-child(4n+1) { background: color-mix(in srgb, var(--chart-1) 22%, transparent); }
.pieces span:nth-child(4n+2) { background: color-mix(in srgb, var(--chart-2) 22%, transparent); }
.pieces span:nth-child(4n+3) { background: color-mix(in srgb, var(--chart-4) 22%, transparent); }
.pieces span:nth-child(4n) { background: color-mix(in srgb, var(--chart-3) 28%, transparent); }
.stackbar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--surface-3); }
.stackbar span { height: 100%; min-width: 2px; }
.stackbar span + span { box-shadow: inset 1px 0 0 var(--surface); }
.stackbar span.est { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.45) 0 4px, transparent 4px 8px) !important; }
.parts-list { display: grid; gap: 4px; margin-top: 12px; font-size: var(--fs-sm); }
.parts-list .r { display: grid; grid-template-columns: 14px minmax(0, 1fr) max-content; gap: 8px; align-items: center; padding: 3px 0; }
.parts-list i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.parts-list .est { font-size: 11px; color: var(--warn-text); background: var(--warn-bg); border-radius: 999px; padding: 0 6px; margin-left: 6px; }
.parts-list .r.total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; font-weight: 600; }

.issue-filters { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; margin: 14px 0 10px; align-items: center; }
.issue-filters select.input { width: auto; }
@media (max-width: 640px) { .issue-filters { grid-template-columns: minmax(0, 1fr); } .issue-filters select.input { width: 100%; } }