#smith-panel#smith-panel{box-sizing:border-box;width:min(680px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:12px;border:2px solid var(--ui-panel-smith-line);border-radius:16px;background:var(--ui-panel-smith-bg);color:var(--ui-panel-smith-fg);overflow:hidden;font:inherit}
#smith-panel#smith-panel[open]{display:flex;flex-direction:column;gap:6px}
#smith-panel#smith-panel::backdrop{background:var(--ui-panel-smith-backdrop)}
/* The pack skin includes dialog buttons. Scope the overrides to smith so its
   border image cannot cover the selected tab fill or enlarge row actions. */
html body #smith-panel#smith-panel button{box-sizing:border-box;min-height:44px;border:1px solid var(--ui-panel-smith-line);border-image:none;border-radius:9px;background:var(--ui-panel-smith-idle-bg);color:var(--ui-panel-smith-fg);padding:6px 10px;font:inherit;line-height:1.2;text-shadow:none;white-space:nowrap;touch-action:manipulation}
html body #smith-panel#smith-panel button:focus-visible{outline:3px solid var(--ui-panel-smith-active-bg);outline-offset:2px}
#smith-panel#smith-panel .smith-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}
#smith-panel#smith-panel .smith-heading h2{margin:0;font-size:20px}
#smith-panel#smith-panel .smith-tabs{display:flex;gap:8px;flex-shrink:0}
#smith-panel#smith-panel .smith-tabs button{flex:1}
html body #smith-panel#smith-panel .smith-tabs button[aria-pressed="true"]{background:var(--ui-panel-smith-active-bg);color:var(--ui-panel-smith-active-fg);border-color:var(--ui-panel-smith-active-bg);font-weight:800}
#smith-panel#smith-panel .smith-body{overflow:auto;min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#smith-panel#smith-panel .smith-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--ui-panel-smith-line)}
#smith-panel#smith-panel .smith-row>.item-icon{width:32px;height:32px;box-shadow:none;background-color:var(--ui-panel-clear)}
#smith-panel#smith-panel .smith-copy{min-width:0;font-size:13px;line-height:16px;word-break:keep-all;overflow-wrap:break-word}
#smith-panel#smith-panel .smith-copy strong{display:block;font-size:14px;line-height:18px}
#smith-panel#smith-panel .smith-copy p{margin:0;line-height:16px}
#smith-panel#smith-panel .smith-cost{display:flex;flex-wrap:wrap;column-gap:7px;font-size:12px}
#smith-panel#smith-panel .smith-cost span{white-space:nowrap}
#smith-panel#smith-panel .smith-cost span+span::before{content:'· ';color:var(--ui-panel-smith-muted)}
#smith-panel#smith-panel .smith-comparison{display:flex;flex-wrap:wrap;column-gap:8px;font-size:12px}
#smith-panel#smith-panel .smith-comparison p{white-space:nowrap}
#smith-panel#smith-panel .smith-level,#smith-panel#smith-panel .smith-balance,#smith-panel#smith-panel .smith-help{color:var(--ui-panel-smith-muted)}
#smith-panel#smith-panel .smith-balance,#smith-panel#smith-panel .smith-help,#smith-panel#smith-panel .smith-result,#smith-panel#smith-panel .smith-error{margin:0 0 4px;line-height:1.3;font-size:13px}
#smith-panel#smith-panel .smith-actions{display:flex;gap:5px}
#smith-panel#smith-panel .smith-comparison .gain{color:var(--ui-panel-smith-gain)}
#smith-panel#smith-panel .smith-comparison .loss,#smith-panel#smith-panel .smith-error,#smith-panel#smith-panel .smith-shortage{color:var(--ui-panel-smith-danger)}
#smith-panel#smith-panel .smith-reason{font-size:12px}
#smith-panel#smith-panel .smith-more{position:sticky;bottom:0;margin:0;padding:2px 0;background:var(--ui-panel-smith-bg);color:var(--ui-panel-smith-muted);font-size:12px;line-height:16px;text-align:center;border-top:1px solid var(--ui-panel-smith-line);pointer-events:none}
#smith-panel#smith-panel .smith-more[hidden]{display:none}
@media(max-width:480px){#smith-panel#smith-panel{padding:10px}#smith-panel#smith-panel .smith-row{gap:6px}#smith-panel#smith-panel .smith-actions{flex-direction:column}html body #smith-panel#smith-panel .smith-actions button{font-size:12px;padding:4px 7px}#smith-panel#smith-panel .smith-cost{column-gap:5px}}
@media(max-height:500px){#smith-panel#smith-panel{padding:8px;max-height:calc(100dvh - 16px)}#smith-panel#smith-panel[open]{gap:4px}#smith-panel#smith-panel .smith-heading h2{font-size:18px}#smith-panel#smith-panel .smith-row{padding:3px 0}}
