/* v0.8.3 — Four-page interaction detail polish. Final system layer only. */
:root{--shape-pill:999px;--shape-overlay:34px;--shape-surface-l:28px;--shape-surface-m:22px;--shape-inset:18px;--shape-mini:14px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:32px;--ui-surface:rgba(255,255,255,.91);--ui-surface-strong:rgba(255,255,255,.97);--ui-inset:rgba(239,247,251,.82);--ui-line:rgba(143,170,190,.19);--ui-line-soft:rgba(143,170,190,.12)}
.content-card{border-radius:var(--shape-surface-l);background:var(--ui-surface);border:1px solid var(--ui-line-soft);box-shadow:0 8px 24px rgba(70,97,118,.055)}
.topbar{min-height:58px;border-radius:var(--shape-pill);padding:7px 8px}.icon-button{width:42px;height:42px;border-radius:50%}.topbar__title span{font-size:9.5px;letter-spacing:.055em}
.hero__actions .liquid--focus,.hero__actions .liquid--control{border-color:rgba(255,255,255,.27);box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 4px 11px rgba(15,72,106,.055)}.round-action{width:52px;height:52px}.primary-action{min-height:52px}
.metric-card{border-radius:20px}.metric-card small{line-height:1.35}.notice-card{border-radius:20px}.library-panel{border-radius:var(--shape-surface-l);padding:16px;margin-bottom:14px}.chapter-start{margin-top:24px!important}
.bottom-nav{min-height:68px;padding:6px;gap:3px;border-radius:var(--shape-pill)}.bottom-nav button{min-height:56px;border-radius:var(--shape-pill);gap:3px}.bottom-nav__indicator{top:8px;bottom:8px;width:calc(var(--lens-w) - 8px);transform:translate3d(calc(var(--lens-x) + 4px),0,0);border-radius:var(--shape-pill);border-color:rgba(255,255,255,.48);background:linear-gradient(145deg,rgba(255,255,255,.49),rgba(203,232,246,.18));box-shadow:0 3px 9px rgba(58,91,116,.042),inset 0 1px 0 rgba(255,255,255,.62)}.bottom-nav button.is-active{color:var(--accent-strong)}
.segmented,.scene-switch{position:relative;display:grid;gap:4px;padding:4px;border-radius:var(--shape-pill);overflow:hidden}.segmented{grid-template-columns:repeat(3,1fr)}.scene-switch{grid-template-columns:repeat(4,1fr);margin-bottom:16px}.segmented button,.scene-switch button{position:relative;z-index:1;min-height:40px;border-radius:var(--shape-pill);background:transparent;color:var(--ink-soft);font-size:12px}.segmented button.is-active,.scene-switch button.is-active{color:var(--ink);font-weight:720}.segmented__indicator,.scene-switch__indicator{top:4px;bottom:4px;border-radius:var(--shape-pill)}
.secondary-tabs,.quick-range-row,.badge-row{display:flex;flex-wrap:wrap;gap:8px}.secondary-tabs{margin-top:12px}.secondary-tabs button,.quick-range,.filter-chip,.badge{border-radius:var(--shape-pill)}.solid-button,.glass-button,.outline-button,.danger-button,.submit-button{border-radius:var(--shape-pill)}
.text-field,.select-wrap,.date-grid select{border-radius:var(--shape-inset);background:var(--ui-inset);border-color:var(--ui-line-soft)}.search-field{border-radius:var(--shape-pill);background:var(--ui-inset);border-color:var(--ui-line-soft)}textarea.text-field{min-height:104px;padding-top:13px}.upload-zone{border-radius:var(--shape-inset);border-color:rgba(92,184,232,.23)}
.scene-entry-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}.scene-entry{min-height:122px;padding:16px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:6px}.scene-entry__icon,.category-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:15px;color:var(--accent-strong);background:rgba(92,184,232,.12);border:1px solid rgba(92,184,232,.15)}.scene-entry b{font-size:15px}.scene-entry small{color:var(--ink-soft);font-size:11.2px;line-height:1.4}
.surface-preview-grid{display:grid;grid-template-columns:120px 1fr;gap:10px;margin-top:12px}.surface-preview-card{border-radius:20px;padding:14px;background:var(--ui-inset);border:1px solid var(--ui-line-soft)}.surface-preview-card b{font-size:13px}.surface-preview-card p{margin:5px 0 0;color:var(--ink-soft);font-size:11.2px;line-height:1.45}
.scene-panel{display:none}.scene-panel.is-active{display:block;animation:viewIn .28s ease}.scene-head{padding:3px 2px 14px;display:grid;gap:4px}.scene-head span{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--accent-strong);font-weight:760}.scene-head strong{font-size:22px}.scene-head small{font-size:12px;line-height:1.5;color:var(--ink-soft)}
.scene-stepper-row{min-height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ui-line-soft)}.scene-stepper-row span{display:grid;gap:4px}.scene-stepper-row b{font-size:14px}.scene-stepper-row small{font-size:11px;color:var(--ink-soft)}.report-total{display:flex;justify-content:space-between;align-items:center;padding:16px 0 2px}.report-total strong{font-size:22px;color:var(--accent-strong)}.submit-button{width:100%;min-height:58px;margin-top:14px;font-weight:760;color:white;background:linear-gradient(145deg,#64c1ed,#2e93d1)}
.analysis-breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.analysis-breakdown span{display:grid;gap:4px;padding:10px;border-radius:16px;background:var(--ui-inset)}.analysis-breakdown b{font-size:17px}.analysis-breakdown small{font-size:10px;color:var(--ink-soft)}.segment-bars{display:grid;gap:14px;margin-top:10px}.segment-bars article{display:grid;grid-template-columns:92px 1fr 36px;align-items:center;gap:8px}.segment-bars span,.segment-bars em{font-size:11px;color:var(--ink-soft)}.segment-bars em{text-align:right;font-style:normal;color:var(--ink);font-weight:700}.segment-bars i{height:7px;border-radius:var(--shape-pill);background:rgba(130,159,180,.15);overflow:hidden}.segment-bars b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--success))}.scene-rule-card{margin-top:14px;padding:16px}.scene-rule-card span{font-size:11px;color:var(--ink-soft)}.scene-rule-card strong{display:block;margin-top:4px;font-size:14px}.scene-rule-card p{margin:7px 0 0;color:var(--ink-soft);font-size:11.3px;line-height:1.5}
.bottom-sheet{border-radius:32px 32px 0 0;background:linear-gradient(145deg,rgba(248,252,253,.80),rgba(234,245,248,.55));border-color:rgba(255,255,255,.76)}.bottom-sheet .sheet-demo{border-radius:22px}.sheet-handle::before{width:38px}.confirm-dialog{width:min(calc(100% - 54px),390px);border-radius:28px;padding:22px}.dialog-icon{width:50px;height:50px}.dialog-actions button{min-height:46px}.toast{border-radius:var(--shape-pill)}
.inline-banner{border-radius:18px}.inline-banner span small{font-size:11.2px}.setting-row{min-height:70px}.choice-row{min-height:60px}.badge{font-size:10.4px}.list-row{min-height:62px}.list-copy small{line-height:1.45}
@media(max-width:759px){.app-shell{padding-left:18px;padding-right:18px}.topbar,.bottom-nav{width:calc(100% - 36px)}.hero__content{padding:22px}.library-roadmap{margin-bottom:6px}}
@media(min-width:1024px){:root{--shape-overlay:28px;--shape-surface-l:22px;--shape-surface-m:18px;--shape-inset:14px;--shape-mini:12px}.app-shell{max-width:1320px}.library-bottom-nav{border-radius:24px;padding:7px;gap:4px}.library-bottom-nav button{min-height:62px;border-radius:18px}.library-bottom-nav .bottom-nav__indicator{left:7px;right:7px;top:auto;bottom:auto;width:calc(100% - 14px)!important;height:calc(var(--lens-h) - 12px);transform:translate3d(0,calc(var(--lens-y) + 6px),0);border-radius:18px}.topbar{border-radius:24px}.scene-entry-grid{grid-template-columns:repeat(4,1fr)}.scene-stack{max-width:900px}.scene-switch{max-width:680px}.content-card{box-shadow:0 8px 22px rgba(70,97,118,.05)}}
/* Hidden overlays must not leak into full-page capture or receive pointer events. */
.bottom-sheet{visibility:hidden;opacity:0;pointer-events:none;transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .16s ease-out,visibility 0s linear .24s}
.bottom-sheet.is-open{visibility:visible;opacity:1;pointer-events:auto;transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .16s ease-out,visibility 0s linear 0s}
.confirm-dialog{visibility:hidden;transition:transform .20s cubic-bezier(.2,.8,.2,1),opacity .16s ease-out,visibility 0s linear .22s}
.confirm-dialog.is-open{visibility:visible;transition:transform .20s cubic-bezier(.2,.8,.2,1),opacity .16s ease-out,visibility 0s linear 0s}


/* v0.8.3 — Interaction detail polish. Repair semantics, native controls and spacing. */
.library-bottom-nav{grid-template-columns:repeat(4,minmax(0,1fr))}
.library-bottom-nav button{min-width:0}
.icon-button-row{gap:10px;margin-top:13px}
.mini-icon-button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.72);background:linear-gradient(145deg,rgba(255,255,255,.58),rgba(221,239,248,.22));box-shadow:inset 0 1px 0 rgba(255,255,255,.84),0 6px 14px rgba(52,91,118,.07);backdrop-filter:blur(18px) saturate(118%);-webkit-backdrop-filter:blur(18px) saturate(118%)}
.mini-icon-button::before{opacity:.34}.mini-icon-button::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 7px 8px 16px rgba(255,255,255,.11),inset -7px -6px 14px rgba(47,136,197,.045)}
.clearable-field,.date-field-shell{position:relative;width:100%}
.clearable-field>.text-field{padding-right:42px}
.search-field.clearable-field{position:relative;padding-right:40px}
.search-field input{font-size:14px;line-height:1.45;letter-spacing:.005em}
.search-field input::placeholder{font-size:13.5px;color:var(--ink-faint)}
.field-clear,.date-clear{position:absolute;right:8px;top:50%;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--ink-soft);background:rgba(126,154,174,.10);border:1px solid rgba(126,154,174,.08);transform:translateY(-50%);opacity:1;transition:opacity .16s ease-out,background .16s ease-out,transform .12s ease-out}
.clearable-field--textarea .field-clear{top:11px;transform:none}
.field-clear svg,.date-clear svg{width:14px;height:14px;stroke-width:2}
.field-clear:active,.date-clear:active{transform:translateY(-50%) scale(.92)}
.clearable-field--textarea .field-clear:active{transform:scale(.92)}
.clearable-field:not(.has-value)>.field-clear,.date-field-shell:not(.has-value)>.date-clear{opacity:0;pointer-events:none}
.date-grid{gap:10px;margin-top:15px}
.date-grid label span{font-size:10.8px}
.date-field-shell input[type="date"]{width:100%;min-height:46px;padding:0 36px 0 11px;border:1px solid var(--ui-line-soft);border-radius:var(--shape-inset);outline:none;background:var(--ui-inset);color:var(--ink);font-size:12.5px;font-family:inherit;color-scheme:light}
.date-field-shell input[type="date"]:focus{border-color:rgba(92,184,232,.43);box-shadow:0 0 0 4px rgba(92,184,232,.085)}
.date-field-shell input[type="date"]::-webkit-calendar-picker-indicator{margin-right:18px;opacity:.58}
.upload-zone{margin-top:15px;transition:border-color .18s ease-out,background .18s ease-out,box-shadow .18s ease-out}
.upload-zone.has-file{border-style:solid;border-color:rgba(63,138,90,.30);background:linear-gradient(145deg,rgba(63,138,90,.10),rgba(255,255,255,.58))}
.inline-banner-stack{display:grid;gap:10px;margin-top:12px}
.inline-banner{min-height:58px;padding:12px 13px;border-radius:18px}
.inline-banner span small{margin-top:4px;line-height:1.5}
.choice-row>i{width:22px;height:22px;border-radius:7px}
.radio-group label{min-height:36px;padding:0 11px}
.radio-group i{width:15px;height:15px}
.form-showcase .field-label,.scene-panel .field-label{margin-top:15px;margin-bottom:7px;font-size:12px;font-weight:750}
.form-showcase .field-label:first-of-type,.scene-panel .field-label:first-of-type{margin-top:0}
.text-field{font-size:14px;line-height:1.45}
textarea.text-field{padding-top:13px;padding-bottom:13px}
.select-wrap select{font-size:13.5px}
.chapter-start{margin-top:26px!important}
@media(max-width:759px){.bottom-nav__indicator{width:calc(var(--lens-w) - 10px);transform:translate3d(calc(var(--lens-x) + 5px),0,0)}.bottom-nav button span{font-size:10px}.search-field{min-height:50px}.search-field input{font-size:14.5px}.text-field{font-size:14px}.date-field-shell input[type="date"]{font-size:12px}.inline-banner-stack{gap:9px}}

/* v0.8.3 responsive route repair: new four-page routes must own explicit spans. */
@media (min-width:760px) and (max-width:1023px){
  [data-view="components"]>.page-title,
  [data-view="components"]>.library-section,
  [data-view="interaction"]>.page-title,
  [data-view="scenes"]>.page-title,
  [data-view="scenes"]>.scene-switch,
  [data-view="scenes"]>.scene-stack{grid-column:1 / -1}
  [data-view="components"]>.library-panel,
  [data-view="interaction"]>.library-panel,
  [data-view="interaction"]>.settings-list{margin-bottom:0}
}
@media (min-width:1024px){
  .library-bottom-nav{grid-template-columns:1fr;grid-template-rows:repeat(4,62px)}
  [data-view="components"]>.page-title,
  [data-view="components"]>.library-section,
  [data-view="interaction"]>.page-title,
  [data-view="scenes"]>.page-title,
  [data-view="scenes"]>.scene-switch,
  [data-view="scenes"]>.scene-stack{grid-column:1 / -1}
  [data-view="components"]>.library-section{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  [data-view="components"]>.library-section>.library-section__head{grid-column:1 / -1}
  [data-view="components"]>.library-section>.specimen-row{min-height:104px;margin-bottom:0}
  [data-view="components"]>.library-panel,
  [data-view="interaction"]>.library-panel,
  [data-view="interaction"]>.settings-list{grid-column:span 6;margin-bottom:0}
  [data-view="scenes"]>.scene-stack{width:min(100%,960px)}
}

/* v0.8.4 upload control cleanup: a single App-style entry, no exposed native control. */
#demoFileInput{display:none!important}
.upload-zone{position:relative;padding-right:54px}
.upload-zone__copy{min-width:0;display:block}
.upload-zone__copy b,.upload-zone__copy small{display:block}
.upload-zone.has-file .upload-zone__copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-zone__clear{position:absolute;right:14px;top:50%;width:34px;height:34px;transform:translateY(-50%);display:grid;place-items:center;border-radius:999px;color:var(--ink-soft);background:rgba(255,255,255,.52);border:1px solid rgba(255,255,255,.64);box-shadow:0 7px 18px rgba(34,91,119,.08);transition:transform .16s ease-out,background .16s ease-out,opacity .16s ease-out}
.upload-zone__clear svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.upload-zone__clear:active{transform:translateY(-50%) scale(.94)}
.upload-zone__clear[hidden]{display:none!important}

/* v0.8.5 freeze candidate: explicit navigation contract. */
.library-bottom-nav{grid-template-columns:repeat(4,minmax(0,1fr))}
.library-bottom-nav button{min-width:0}
@media (min-width:1024px){
  .library-bottom-nav{grid-template-columns:1fr;grid-template-rows:repeat(4,62px)}
}