assets/frosted.css

/* Screenshot-led console: settings left, image right, examples/results below.
   paper.css supplies shared evidence geometry and interaction primitives. */
:root{
  --purple:#7954ae;--purple-deep:#60418c;--lime:#257a4d;
  --ink:#202127;--muted:#636570;--line:rgba(47,47,65,.1);
  --paper:#f5f6f9;--lavender:#efebf6;--canvas:#f0eff5;
  --surface:#fdfdfe;--selection:#f1ecf8;--action-hover:#1d653e;
  --glass:rgba(250,252,255,.58);--glass-strong:rgba(255,255,255,.8);
  --ease:cubic-bezier(.22,1,.36,1);
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Manrope,"PingFang SC","Microsoft YaHei",sans-serif;
}
.gradio-container{padding-top:28px!important}
.studio-header{padding:4px 2px 26px;align-items:center}
.studio-header h1{font-family:var(--ui);font-size:30px;font-weight:650;line-height:1.25;letter-spacing:-.025em;color:var(--ink);margin:0}
.studio-header p{font-family:var(--ui);font-size:14px;color:var(--muted);margin:8px 0 0}
.header-note{display:flex;gap:8px;font-family:var(--ui)}
.header-note>span{background:rgba(255,255,255,.8);border:0;border-radius:20px;color:var(--muted);font-size:12px;font-weight:400;padding:8px 13px}
#console{display:flex!important;flex-direction:column!important;gap:20px!important;border:0;border-radius:0;overflow:visible;background:transparent;box-shadow:none}
#workspace-top{display:flex!important;flex-wrap:nowrap!important;gap:0!important;align-items:stretch;border-radius:24px;background:linear-gradient(125deg,#ece6f5 0%,#f1f3f7 44%,#eaf0e8 100%);box-shadow:0 18px 48px rgba(42,46,73,.07),inset 0 1px 0 #fff;overflow:visible}
#controls{position:relative!important;top:auto;z-index:12;flex:0 0 28.5%!important;min-width:290px!important;gap:20px!important;margin:0!important;padding:36px!important;border-radius:24px 0 0 24px;background:rgba(255,255,255,.67);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);box-shadow:inset 1px 1px 0 rgba(255,255,255,.94)}
#controls>*{flex-grow:0!important}.control-brand{padding-bottom:12px}
.xpeng-logo{width:174px;height:auto;margin:0 0 26px!important;border-radius:5px}
.control-brand h2{font-family:var(--ui);font-size:34px;font-weight:650;line-height:1.18;letter-spacing:-.035em;color:var(--ink);margin:0 0 13px}
.control-brand p{font-family:var(--ui);font-size:14px;font-weight:400;line-height:1.8;color:var(--muted);max-width:22ch;margin:0}
#control-fields{flex-wrap:nowrap!important;gap:14px!important;align-items:stretch}
#media-type{flex:0 0 86px!important;min-width:86px!important}
.media-field>span{display:block;font-family:var(--ui);font-size:12px;color:var(--muted);margin-bottom:8px}
.media-field>div{display:flex;align-items:center;justify-content:center;gap:7px;background:#e8efea;min-height:46px;border-radius:12px;font-family:var(--ui);font-size:13px;font-weight:600;color:#275c3e}
.media-field svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.5}
#route-select,#case-select{min-width:0!important;background:transparent!important;border:0!important;padding:0!important;overflow:visible!important}
#route-select{flex:1 1 0!important}
#route-select label,#case-select label{display:block!important;min-height:0!important;padding:0!important;margin:0!important;font-family:var(--ui)!important;font-size:12px!important;font-weight:400!important;color:var(--muted)!important;background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important}
#route-select label>span,#case-select label>span{display:block;margin-bottom:8px!important;font-size:12px!important;color:var(--muted)!important}
#route-select .wrap,#case-select .wrap{display:flex!important;position:relative;flex-wrap:nowrap!important;gap:4px!important;min-height:46px!important;border:1px solid rgba(87,83,105,.15)!important;border-radius:12px!important;padding:10px 12px!important;background:rgba(255,255,255,.74)!important;box-shadow:inset 0 1px 0 #fff;overflow:visible!important;isolation:auto}
#route-select input,#case-select input{position:static!important;flex:1 1 0!important;min-width:0!important;width:100%!important;height:auto!important;opacity:1!important;margin:0!important;padding:0!important;color:var(--ink)!important;font-family:var(--ui)!important;font-size:14px!important;font-weight:500!important}
#route-select .icon-wrap,#case-select .icon-wrap{flex:0 0 18px!important;width:18px!important;height:18px!important}
#route-select svg,#case-select svg,#advanced-options>.label-wrap svg{width:16px!important;height:16px!important}
/* Never resurrect Gradio's hidden progress layers with a material selector. */
#console .wrap.hide{display:none!important}
#route-select .wrap:focus-within,#case-select .wrap:focus-within{border-color:var(--purple)!important}
#route-select ul,#case-select ul{z-index:60!important;background:#fdfdfe!important;color:var(--ink)!important;box-shadow:0 12px 28px rgba(35,29,51,.14);border-radius:12px!important}
#route-select li,#case-select li{font-size:14px!important}
#upload-button{width:100%!important;flex:0 0 auto!important;min-width:0!important;min-height:46px!important;border:0!important;border-radius:12px!important;padding:12px 16px!important;background:var(--glass)!important;color:var(--purple-deep)!important;font-family:var(--ui)!important;font-size:14px!important;font-weight:500!important;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:inset 0 1px 0 #fff,0 3px 10px rgba(48,42,71,.055)!important}
#upload-button:hover{background:rgba(255,255,255,.9)!important}
#advanced-options{border:0!important;border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;background:transparent!important;padding:6px 0!important}
#advanced-options>.label-wrap{font-family:var(--ui)!important;font-size:13px!important;font-weight:400!important;min-height:40px!important;color:var(--muted)!important}
.runtime-options{display:grid;grid-template-columns:auto 1fr;gap:10px;font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--muted);padding:10px 0}
.runtime-options b{text-align:right;overflow-wrap:anywhere;color:var(--ink);font-weight:500}.runtime-options small{grid-column:1/-1;font-size:12px;line-height:1.7}
#service-panel{padding-top:12px!important;border-top:1px solid var(--line);gap:7px!important}
.api-status,.api-status span{font-family:var(--ui);font-weight:400;font-size:12px;line-height:1.65;color:var(--muted)}
.api-status.online{color:#306443}.api-status.offline{color:#a63b42}
#health-button{font-family:var(--ui)!important;font-size:12px!important;font-weight:400!important;min-height:36px!important}
#run-button{margin-top:auto!important;flex:0 0 auto!important;width:100%!important;min-width:0!important;min-height:50px!important;border-radius:25px!important;background:var(--lime)!important;color:#fff!important;font-family:var(--ui)!important;font-size:15px!important;font-weight:600!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 7px 18px rgba(37,122,77,.15)!important}
#run-button:hover:not(:disabled){background:var(--action-hover)!important}#run-button:disabled{background:var(--lavender)!important;color:var(--purple-deep)!important;box-shadow:none!important}#run-button.is-waiting{color:transparent!important}
#visual-stage{position:relative;isolation:isolate;flex:1 1 0!important;min-width:0!important;gap:0!important;padding:0!important;overflow:hidden;border-radius:0 24px 24px 0;background:var(--canvas)}
.scene-atmosphere{position:absolute;inset:-40px;width:auto!important;z-index:-1;pointer-events:none;background-position:center;background-size:cover;filter:blur(34px) saturate(.85);opacity:.2}
#stage-toolbar{position:relative!important;top:auto;left:auto;width:100%;z-index:8;display:flex;flex-wrap:nowrap!important;align-items:center;justify-content:space-between;gap:16px!important;min-height:76px;padding:20px 28px 12px!important;background:transparent!important;pointer-events:auto}
#view-toggle{flex:0 0 auto!important;width:fit-content!important;min-width:0!important;pointer-events:auto}
#view-toggle .wrap{padding:5px!important;gap:3px!important;background:var(--glass)!important;border-radius:23px!important;backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);box-shadow:inset 0 1.5px 1px rgba(255,255,255,.98),inset 0 -1px 1px rgba(255,255,255,.55),0 5px 16px rgba(39,43,64,.085)}
#view-toggle label{border-radius:20px!important;min-height:34px!important;padding:8px 13px!important;font-family:var(--ui)!important;font-size:12px!important;font-weight:500!important;color:#24242b!important}
#view-toggle label:hover{background:rgba(255,255,255,.38)!important}
#view-toggle label:has(input:checked){color:var(--purple-deep)!important;font-weight:600!important}
#view-toggle .active-tab-indicator{border-radius:20px;background:rgba(255,255,255,.83);box-shadow:0 2px 6px rgba(39,43,64,.07),inset 0 1px 0 #fff;transition-duration:300ms}
#stage-status{flex:1 1 0!important;width:auto!important;min-width:0!important;min-height:0!important;max-width:47%;padding:0!important}
.stage-status{display:flex;gap:7px;padding:8px 11px;border-radius:14px;background:rgba(255,255,255,.7);font-family:var(--ui);font-size:12px;font-weight:400;line-height:1.6;color:#326144;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.stage-status span{color:inherit}.stage-status i{margin-top:6px}
.stage-status.reference,.stage-status.busy{color:var(--purple-deep)}.stage-status.error{color:#a63b42}.wait-clock{font-family:var(--ui);font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}
#canvas-viewport{padding:12px 40px 54px!important;background:transparent!important;isolation:auto}
#stage-image{height:440px!important;transition-duration:380ms}
#stage-image img{border-radius:9px;box-shadow:0 10px 24px rgba(35,35,47,.09)}#stage-image .buttons{top:8px!important}
.canvas-tools{min-height:54px;padding:8px 28px;font-family:var(--ui);font-size:12px;font-weight:400;color:#282830}
.image-dimensions{padding:6px 10px;background:rgba(255,255,255,.64);border-radius:16px}
.zoom-tools{padding:4px 8px;border-radius:23px;background:var(--glass);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);box-shadow:inset 0 1.5px 1px #fff,inset 0 -1px 1px rgba(255,255,255,.55),0 5px 16px rgba(39,43,64,.085)}
.zoom-tools button{width:32px;height:32px;border-radius:50%;color:#24242b}.zoom-tools button:hover{background:rgba(255,255,255,.6)}
.zoom-value{font-family:var(--ui);font-size:12px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}.tool-divider{background:var(--line)}
#query-row{position:relative;z-index:2;display:block!important;padding:14px 40px 28px!important;background:transparent!important;border:0!important}
#query-dock{max-width:760px;margin:0 auto!important;padding:14px 18px!important;border:0!important;border-radius:15px!important;background:rgba(255,255,255,.75)!important;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:inset 0 1px 1px #fff,0 6px 22px rgba(39,43,64,.075)!important}
#query-dock label>span{font-family:var(--ui)!important;font-size:12px!important;font-weight:500!important;color:var(--purple-deep)!important;margin-bottom:6px!important}
#query-dock textarea{font-family:var(--ui)!important;font-size:14px!important;line-height:1.65!important;font-weight:400!important;color:var(--ink)!important}
#query-dock:focus-within{outline:2px solid rgba(121,84,174,.5);outline-offset:2px}
#review-row{display:flex!important;flex-wrap:nowrap!important;gap:20px!important;align-items:stretch}
#sandbox-panel{flex:0 0 38%!important;min-width:0!important;padding:24px!important;gap:17px!important;background:rgba(255,255,255,.86);border-radius:20px;box-shadow:0 8px 24px rgba(42,46,73,.045)}
.film-heading{align-items:center;font-family:var(--ui);font-size:14px;font-weight:500;color:var(--ink)}.film-heading h2{font-family:var(--ui);font-size:16px;font-weight:600;margin:0!important}.film-heading small{font-family:var(--ui);font-size:12px;font-weight:400;color:var(--muted)}
#case-gallery{height:170px!important}
#case-gallery .grid-container{gap:10px!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
#case-gallery .thumbnail-item{min-width:0!important}
#case-gallery .thumbnail-item{height:154px!important;flex-direction:column!important;align-items:stretch;gap:6px;border-radius:12px!important;background:#fff!important;border-color:rgba(70,64,88,.12)!important;padding:5px!important}
#case-gallery .thumbnail-item img{width:100%!important;height:112px!important;flex:1 1 0!important;min-height:0!important;border-radius:8px!important}
#case-gallery .caption-label{max-width:100%!important;text-align:center!important;font-family:var(--ui)!important;font-size:12px!important;line-height:1.5!important;font-weight:500!important;color:#52525f!important;padding:3px!important}
#case-gallery .thumbnail-item:hover{border-color:#a797bc!important;background:#faf8fd!important}
#case-gallery .thumbnail-item.selected{background:var(--selection)!important;border:2px solid var(--purple)!important;padding:4px!important}
#source-details{margin-top:auto;border:0!important;border-top:1px solid var(--line)!important;padding:10px 0 0!important}
#source-details .label-wrap{font-family:var(--ui)!important;font-size:12px!important;font-weight:400!important;min-height:36px!important}
.source-meta{font-family:var(--ui);font-size:12px;font-weight:400;line-height:1.7}.source-meta>span,.source-meta small{font-size:12px}
#review-summary{flex:1 1 0!important;min-width:0!important;padding:0!important;background:var(--surface);border-radius:20px;box-shadow:0 8px 24px rgba(42,46,73,.045)}
#result-columns{display:flex!important;flex-wrap:nowrap!important;gap:0!important;align-items:stretch}
#metrics-panel{flex:0 0 41%!important;min-width:0!important;padding:24px!important;border:0!important;gap:20px!important}
.inspector-subheading{font-family:var(--ui)!important;font-size:16px!important;font-weight:600!important;color:var(--ink)!important;line-height:1.4}
.metrics-list{font-family:var(--ui);font-size:12px;font-weight:400}.metrics-list>div{padding:8px 0;gap:14px}.metrics-list dd{font-family:var(--ui);font-size:12px;font-weight:500;line-height:1.6;color:#41424c}
#sidebar{flex:1 1 0!important;min-width:0!important;width:auto;padding:24px!important;border:0;border-left:1px solid var(--line);background:transparent;gap:20px!important}
.inspector-heading h2{font-family:var(--ui)!important;font-size:16px!important;font-weight:600!important;color:var(--ink)!important}
.inspector-heading{align-items:baseline;flex-wrap:wrap;gap:7px}.live-mark{font-family:var(--ui);font-size:12px;font-weight:400;line-height:1.6;color:var(--muted)}
#targets-panel{flex:1 1 auto!important}
.empty-targets{min-height:174px}.empty-targets svg{width:32px;height:32px;color:#8a7f9c}.empty-targets>b{font-family:var(--ui);font-size:14px;font-weight:500;color:#4a4655}.empty-targets>small{font-family:var(--ui);font-size:12px;font-weight:400;line-height:1.8}
.targets-summary{font-family:var(--ui);font-size:12px;font-weight:400}.targets-summary b{font-family:var(--ui);font-size:19px;font-weight:600}.targets-summary>span{font-size:11px}
.target-chips{max-height:240px;display:flex;flex-direction:column}
.target-chip{min-height:36px!important;padding:8px 10px!important;border-radius:8px!important;font-family:var(--ui)!important;font-size:13px!important;font-weight:400!important;color:#53535d!important}
.target-chip:hover{background:#f5f2fa!important}.target-chip[aria-pressed=true]{background:var(--selection)!important;color:var(--purple-deep)!important}.target-chip b{font-family:var(--ui);font-size:12px;font-weight:500}
.focus-help,.targets-caption{font-family:var(--ui);font-size:12px;font-weight:400;line-height:1.7}.clear-focus{font-family:var(--ui);font-size:12px;font-weight:500}
.detail-heading{font-family:var(--ui);font-size:13px;font-weight:500}.detail-heading small{font-family:var(--ui);font-size:12px;font-weight:400}.detail-image{height:150px;border-radius:9px}.detail-coordinates{font-size:12px;line-height:1.6}
.focus-dimmer{fill:#1c1c28;opacity:.42;animation-duration:260ms}.focus-outline{animation-duration:360ms}.evidence-detail{animation-duration:300ms}
.focus-caption{top:auto;bottom:12px;left:12px;max-width:calc(100% - 24px);padding:5px 6px 5px 13px;border-radius:12px;background:var(--glass-strong);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 4px 14px rgba(20,20,32,.1),inset 0 1px 0 #fff;color:var(--ink);font-family:var(--ui);font-size:13px;font-weight:500}
.focus-caption button{background:rgba(220,220,230,.55);color:#55555e;border-radius:7px}
.glass-control{position:relative;--glint-x:35%}
.glass-control::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(ellipse at var(--glint-x) 0%,rgba(255,255,255,.66),transparent 65%);transition:opacity 200ms var(--ease)}
.glass-control:hover::after{opacity:.8}.glass-control:active::after{opacity:1}
#prompt-console,#output-console{margin-top:6px;border-bottom-color:var(--line)!important;padding:5px 3px!important}
#prompt-console>.label-wrap,#output-console>.label-wrap{font-family:var(--ui)!important;font-size:13px!important;font-weight:400!important;min-height:40px;color:var(--muted)!important}
.console-note,.studio-footer{font-family:var(--ui);font-size:12px;font-weight:400;line-height:1.7;color:var(--muted)}.studio-footer{padding:12px 2px}
@keyframes focus-dim{from{opacity:0}to{opacity:.42}}
@media(min-width:1500px){#controls{padding:42px!important}#stage-image{height:500px!important}#canvas-viewport{padding:14px 54px 56px!important}#query-row{padding:16px 54px 32px!important}#sidebar{flex:1 1 0!important;min-width:0!important;padding:28px!important}#metrics-panel{padding:28px!important}}
@media(max-width:1100px){#controls{flex-basis:30%!important;min-width:260px!important;padding:26px!important}.control-brand h2{font-size:30px}.xpeng-logo{width:150px}.control-brand p{font-size:13px}#control-fields{gap:10px!important}#media-type{flex-basis:74px!important;min-width:74px!important}#stage-toolbar{padding:16px 18px 10px!important;gap:10px!important;flex-wrap:wrap!important}#stage-status{max-width:100%;flex-basis:100%!important}.stage-status{width:fit-content;padding:5px 10px}#canvas-viewport{padding:12px 24px 54px!important}#stage-image{height:390px!important}#query-row{padding:12px 24px 24px!important}#sandbox-panel{padding:20px!important}#metrics-panel{flex-basis:42%!important;padding:20px!important}#sidebar{flex:1 1 0!important;min-width:0!important;padding:20px!important}#case-gallery .thumbnail-item{height:144px!important}}
@media(max-width:760px){
  .studio-header{padding:4px 2px 18px}.studio-header h1{font-size:25px}.studio-header p{font-size:13px;margin-top:6px}.header-note{display:none}
  #console{gap:16px!important}#workspace-top{flex-direction:column!important;border-radius:20px}
  #controls{flex:0 0 auto!important;min-width:0!important;padding:24px!important;border-radius:20px 20px 0 0;gap:16px!important}
  .control-brand{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding-bottom:4px}.xpeng-logo{width:108px;margin:0!important}.control-brand h2{font-size:25px;margin:0}.control-brand p{display:none}
  #control-fields{gap:14px!important}#media-type{flex-basis:92px!important;min-width:92px!important}
  #run-button{min-height:48px!important;height:auto!important;margin-top:0!important;font-size:14px!important;min-width:0!important;flex:0 0 auto!important}
  #visual-stage{flex:0 0 auto!important;border-radius:0 0 20px 20px}#stage-toolbar{padding:16px 16px 8px!important;gap:10px!important;min-height:0}
  #stage-status{max-width:none;flex-basis:100%!important}.stage-status{font-size:12px}
  #view-toggle label{padding:8px 12px!important;font-size:12px!important;min-height:36px!important}
  #canvas-viewport{padding:10px 16px 58px!important}#stage-image{height:300px!important}
  .canvas-tools{padding:9px 16px;min-height:58px;font-size:12px}.zoom-tools button{width:34px;height:34px}
  #query-row{padding:10px 16px 22px!important}#query-dock{padding:13px 15px!important}
  #review-row{flex-direction:column!important;gap:16px!important}#sandbox-panel{flex:0 0 auto!important;width:100%;padding:22px 18px!important}
  #case-gallery{height:150px!important}#case-gallery .thumbnail-item{height:136px!important}.film-heading small{font-size:12px;max-width:none}
  #review-summary{width:100%}#result-columns{flex-direction:column!important}
  #metrics-panel{flex:0 0 auto!important;width:100%;padding:24px!important;gap:14px!important}.metrics-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}.metrics-list>div{gap:4px;padding:4px 0}
  #sidebar{flex:0 0 auto!important;width:100%;padding:24px!important;border-left:0;border-top:1px solid var(--line);gap:16px!important}
  .target-chips{display:grid;grid-template-columns:1fr 1fr;max-height:250px}.target-chip{min-height:42px!important}
  .empty-targets{min-height:174px}.detail-image{height:170px}.evidence-detail{max-width:none}
  #source-details .label-wrap{min-height:40px!important}.studio-footer{gap:5px;padding:12px 2px;line-height:1.7}
}
@media(max-width:430px){#stage-image{height:262px!important}.canvas-tools .image-dimensions{font-size:12px}.control-brand{gap:12px}.control-brand h2{font-size:24px}.xpeng-logo{width:102px}.film-heading h2{font-size:15px}}
@media(prefers-reduced-transparency:reduce){#controls,#view-toggle .wrap,#upload-button,#query-dock,.zoom-tools,.focus-caption,.stage-status{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#fafafc!important}.scene-atmosphere{opacity:0}.glass-control::after{display:none}}
@media(prefers-contrast:more){#controls,#view-toggle .wrap,#upload-button,#query-dock,.zoom-tools,.focus-caption,.stage-status{background:#fff!important;outline:1px solid #53535e}.scene-atmosphere{opacity:.1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:0ms!important}}