assets/native.css

/* Native Gradio layout. Extra styles only support canvas interactions. */
#console{gap:20px!important}#workspace-top{gap:24px!important;align-items:flex-start!important}
#controls{flex:0 0 300px!important;min-width:0!important;gap:16px!important}
#control-fields{flex-direction:column!important}#control-fields>.form{width:100%!important}
.media-field{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:13px}
.media-field>div{display:flex;gap:6px}.media-option{display:inline-flex;align-items:center;justify-content:center;min-width:54px;padding:7px 11px;border-radius:6px;font-size:13px;font-family:inherit;border:1px solid #d1d5db}
.media-option.is-active{border-color:#2563eb;background:#eff6ff;color:#1d4ed8}.media-option:disabled{background:#f3f4f6;color:#9ca3af;cursor:not-allowed}
#visual-stage{min-width:0!important;gap:12px!important}.task-guide strong{font-size:19px}.task-guide p{font-size:14px;line-height:1.6;margin:8px 0}.task-guide small{font-size:12px;color:#64748b}
#stage-toolbar{min-height:24px;align-items:center;gap:0!important}.stage-status{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.stage-status i,.api-status i{width:7px;height:7px;border-radius:50%;background:#16a34a;flex-shrink:0}.stage-status.error i,.api-status.offline i{background:#dc2626}.stage-status.busy i{background:#2563eb;animation:pulse 1s ease-in-out infinite}.wait-clock{margin-left:auto;font-size:12px;font-variant-numeric:tabular-nums}
#stage-toolbar.client-pending #stage-status{display:none!important}.client-notice{flex:1}
#canvas-viewport{position:relative;gap:8px!important;overflow:hidden!important;padding:0!important;border:0!important}
#stage-image{position:relative!important;transform-origin:center;transition:transform 160ms ease;overflow:visible!important;touch-action:pan-y}
#stage-image img{object-fit:contain!important}#stage-image .icon-button-wrapper{display:none!important}
#canvas-viewport.is-zoomed #stage-image{touch-action:none;cursor:grab}#canvas-viewport.is-panning #stage-image{cursor:grabbing;transition:none!important}
.canvas-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:#64748b;padding:3px 0}
.zoom-tools{display:flex;align-items:center;gap:3px;border:1px solid #d1d5db;border-radius:6px;padding:3px;background:white}
.zoom-tools button,.canvas-download{width:31px;height:31px;border:0;border-radius:4px;background:white;display:grid;place-items:center;color:#475569;cursor:pointer}
.zoom-tools button:hover,.canvas-download:hover{background:#f1f5f9}.zoom-tools button:disabled{opacity:.35;cursor:default}.zoom-tools svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.zoom-value{min-width:42px;text-align:center;font-size:12px}.tool-divider{width:1px;height:18px;background:#e2e8f0;margin:0 4px}
#query-row{gap:6px!important;flex-direction:column!important}#query-dock{width:100%;flex:0 0 auto!important}.query-hint{color:#64748b;font-size:11px;margin:0}
#targets-panel{gap:8px!important;min-width:0!important}.empty-targets{display:flex;flex-direction:column;gap:5px;color:#64748b;font-size:12px}.empty-targets svg{display:none}.empty-targets b{font-size:13px;color:#475569}
.targets-summary{display:flex;gap:8px;align-items:baseline;font-size:13px;color:#475569}.targets-summary>span{margin-left:auto;font-size:12px;color:#64748b}.targets-summary b{font-size:18px}
.target-chips{display:flex;flex-wrap:wrap;gap:7px;max-height:220px;overflow:auto;padding:3px}
.target-chip{display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;background:white;color:#334155;font:13px inherit;cursor:pointer}
.target-chip i{width:7px;height:7px;border-radius:2px;background:var(--category-color);flex-shrink:0}.target-chip span{overflow-wrap:anywhere}.target-chip b{font-size:11px;color:#64748b}.target-chip:hover{background:#f8fafc}.target-chip[aria-pressed=true]{border-color:#2563eb;background:#eff6ff}.target-chip:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.focus-help{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#64748b;font-size:12px}.clear-focus{background:none;border:0;color:#2563eb;font:inherit;cursor:pointer;text-decoration:underline}.clear-focus[hidden],.evidence-detail[hidden]{display:none!important}.targets-caption{display:none}
.focus-layer,.focus-pixels{position:absolute;pointer-events:none}.focus-pixels{z-index:4}.focus-layer{z-index:5;overflow:visible}.focus-dimmer{fill:#0f172a;opacity:.22}.focus-outline{fill:none;stroke-width:2.5;vector-effect:non-scaling-stroke}.focus-halo{fill:none;stroke:white;stroke-width:5;vector-effect:non-scaling-stroke}
.focus-caption{display:flex;align-items:center;gap:7px;position:relative;z-index:6;padding:7px 9px;border:1px solid #dbeafe;border-radius:6px;background:#eff6ff;color:#1e40af;font-size:12px}
.focus-caption span{flex:1;overflow-wrap:anywhere}.focus-caption button{width:30px;height:30px;border:0;border-radius:4px;background:#dbeafe;color:#1e40af;display:grid;place-items:center;cursor:pointer}
#review-row{gap:24px!important}#review-summary{min-width:0!important}#result-columns{gap:20px!important}#metrics-panel,#sidebar{min-width:0!important;gap:10px!important}
.film-heading h2,.inspector-heading h2{font-size:17px;margin:0 0 8px}.film-heading small,.live-mark{font-size:12px;color:#64748b}
.metrics-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin:0;font-size:13px}.metrics-list>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.metrics-list dt{color:#64748b}.metrics-list dd{margin:0;color:#334155;overflow-wrap:anywhere;text-align:right}
#sidebar:not(:has(.evidence-detail:not([hidden]))){display:none!important}.detail-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;margin-bottom:8px}.detail-heading small{color:#64748b;font-size:11px}.detail-image{height:190px;background-color:#f1f5f9;background-repeat:no-repeat;border-radius:6px}.detail-coordinates{font-size:11px;color:#64748b;margin-top:6px;overflow-wrap:anywhere}
.api-status{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13px}.api-status small{flex-basis:100%;font-size:12px;color:#64748b;line-height:1.6}.connection-detail{font-size:12px;color:#64748b}.connection-detail code{display:block;font-size:11px;overflow-wrap:anywhere}
.runtime-options,.source-meta{display:grid;gap:8px;font-size:12px;color:#64748b}.source-meta b,.runtime-options b{color:#334155}.console-note{font-size:12px;color:#64748b}
.studio-footer{display:flex;justify-content:space-between;gap:15px;padding-top:12px;font-size:11px;color:#64748b}.studio-footer i{font-style:normal;margin-left:12px;color:#94a3b8}
#mobile-run-button{display:none!important}#console[aria-busy=true] #canvas-viewport{cursor:progress}
@keyframes pulse{50%{opacity:.3}}
@media(max-width:760px){#workspace-top,#review-row,#result-columns{flex-direction:column!important}#controls{width:100%;flex:0 0 auto!important}#visual-stage{width:100%}#controls>h3{margin:0}#stage-image{height:330px!important}#run-button{display:none!important}#mobile-run-button{display:flex!important;margin-top:8px!important;width:100%!important}#review-summary,#sandbox-panel{width:100%!important;flex:0 0 auto!important}.studio-footer{flex-direction:column;gap:5px}.metrics-list{font-size:12px}.canvas-tools{font-size:10px}.image-dimensions{white-space:nowrap}#service-panel{gap:6px!important}.target-chip{font-size:12px}.task-guide strong{font-size:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}