/* uv-tool-demo.css — reusable self-playing "app preview" for UV tool heroes.
   Motion-safe: all animation scoped under .uvd (not .uvd-static). Colors from UV palette. */
.uvd{--uvd-liberty:#4B52A3;--uvd-liberty2:#6f77c9;--uvd-ink:#1A1A1A;--uvd-muted:#5E646E;
  --uvd-line:#E6E0D4;--uvd-ok:#1f9d6b;--uvd-warn:#c47d12;--uvd-stop:#c0392b;
  font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  max-width:560px;margin:24px auto 0}
.uvd-window{background:#fff;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.18);
  box-shadow:0 26px 64px -22px rgba(10,14,40,.6),0 4px 14px rgba(10,14,40,.28)}
.uvd-bar{display:flex;align-items:center;gap:9px;padding:10px 14px;background:#f3f2ee;border-bottom:1px solid #e6e0d4}
.uvd-dots{display:flex;gap:6px}
.uvd-dot{width:11px;height:11px;border-radius:50%}
.uvd-dot.r{background:#ff5f57}.uvd-dot.y{background:#febc2e}.uvd-dot.g{background:#28c840}
.uvd-title{font-size:12px;font-weight:600;color:#5E646E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uvd-body{padding:15px 18px 13px}
.uvd-sample{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:#8a4b16;background:#fff8f3;border:1px solid #f3d9bf;border-radius:20px;padding:2px 9px;margin-bottom:11px}
.uvd-scenes{position:relative;min-height:252px}
.uvd-scene{display:none}
.uvd-scene.on{display:block}
.uvd:not(.uvd-static) .uvd-scene.on{animation:uvd-fin .45s ease both}
@keyframes uvd-fin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
/* profile */
.uvd-field{margin-bottom:10px}
.uvd-flabel{font-size:11px;font-weight:600;color:#5E646E;margin-bottom:4px}
.uvd-input{border:1px solid #E6E0D4;border-radius:7px;padding:8px 11px;font-size:13px;min-height:35px;
  color:#1A1A1A;background:#fff;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.uvd-caret{display:inline-block;width:1px;height:15px;background:#4B52A3;margin-left:1px;vertical-align:middle}
.uvd:not(.uvd-static) .uvd-caret.blink{animation:uvd-blink 1s step-end infinite}
@keyframes uvd-blink{50%{opacity:0}}
.uvd-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 11px;
  border-radius:20px;background:#eef0f8;color:#4B52A3;border:1px solid #d5d9ee}
.uvd-chip.sel{background:#4B52A3;color:#fff;border-color:#4B52A3}
/* running */
.uvd-run-label{font-size:12.5px;color:#33384a;margin:14px 0 10px}
.uvd-prog{height:9px;background:#eceaf4;border-radius:20px;overflow:hidden}
.uvd-prog-fill{height:100%;width:0;background:linear-gradient(90deg,#4B52A3,#6f77c9);border-radius:20px}
.uvd-prog-pct{font-size:11px;color:#4B52A3;font-weight:700;margin-top:7px;text-align:right}
/* sections */
.uvd-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 11px;
  border:1px solid #E6E0D4;border-left:3px solid #E6E0D4;border-radius:8px;margin-bottom:6px}
.uvd:not(.uvd-static) .uvd-row{opacity:0;transform:translateY(6px)}
.uvd:not(.uvd-static) .uvd-row.in{opacity:1;transform:none;transition:opacity .35s ease,transform .35s ease}
.uvd-row.ok{border-left-color:#1f9d6b}
.uvd-row.warn{border-left-color:#c47d12}
.uvd-rname{font-size:12.5px;font-weight:600;color:#1A1A1A}
.uvd-rrule{font-size:11px;color:#5E646E;margin-top:1px}
.uvd-rchip{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap}
.uvd:not(.uvd-static) .uvd-rchip{opacity:0;transition:opacity .3s ease}
.uvd:not(.uvd-static) .uvd-rchip.show{opacity:1}
.uvd-rchip.ok{background:#e7f6ef;color:#1f9d6b}
.uvd-rchip.warn{background:#fdf4e3;color:#c47d12}
/* result */
.uvd-result{display:flex;gap:16px;align-items:center;padding:6px 0 2px}
.uvd-dial{flex:0 0 auto;width:118px;text-align:center;border:1px solid #E6E0D4;border-radius:12px;padding:14px 8px}
.uvd-score{font-size:38px;font-weight:800;line-height:1;color:#c47d12}
.uvd-score span{font-size:16px;font-weight:700;color:#8a7a52}
.uvd-band{font-size:12px;font-weight:700;color:#c47d12;margin-top:5px}
.uvd-take{font-size:13px;color:#33384a;line-height:1.5}
.uvd-take b{color:#c47d12}
/* controls + caption */
.uvd-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px;
  padding-top:10px;border-top:1px solid #f0ede5}
.uvd-steps{display:flex;gap:6px}
.uvd-step{width:22px;height:4px;border-radius:20px;background:#e0ddd3}
.uvd-step.on{background:#4B52A3}
.uvd-btn{font:inherit;font-size:12px;font-weight:600;color:#4B52A3;background:#fff;border:1px solid #d5d9ee;
  border-radius:20px;padding:5px 13px;cursor:pointer}
.uvd-btn:hover{border-color:#4B52A3}
.uvd-cap{max-width:560px;margin:13px auto 0;text-align:center;font-size:12.5px;color:rgba(255,255,255,.86);line-height:1.55}
.uvd-jump{display:inline-block;margin-top:5px;font-size:12.5px;font-weight:600;color:#E4C06B;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;background:none;border:none;font-family:inherit}
@media(max-width:560px){.uvd-result{flex-direction:column;align-items:stretch}.uvd-dial{width:auto}}

/* ===== extensions: tabbed demos, table scene, big-number verdict ===== */
/* tabs (sit on the navy showcase panel) */
.uvd-tabset{width:100%}
.uvd-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 16px;max-width:560px}
.uvd-tab{font:inherit;font-size:13px;font-weight:700;letter-spacing:.01em;color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);border-radius:100px;
  padding:9px 16px;min-height:38px;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.uvd-tab:hover{border-color:rgba(255,255,255,.55)}
.uvd-tab.on{background:#FAF8F3;color:#2C3168;border-color:#FAF8F3}
.uvd-tab:focus-visible{outline:2px solid #F5885C;outline-offset:2px}
.uvd-panel[hidden]{display:none}
/* table scene (deadline calendar) */
.uvd-table{border:1px solid #E6E0D4;border-radius:9px;overflow:hidden;font-variant-numeric:tabular-nums}
.uvd-thead,.uvd-trow{display:grid;grid-template-columns:1fr 1.15fr 1.15fr auto;gap:8px;align-items:center;padding:7px 11px}
.uvd-table.cols-3 .uvd-thead,.uvd-table.cols-3 .uvd-trow{grid-template-columns:1.4fr 1fr auto}
.uvd-thead{background:#f3f2ee;border-bottom:1px solid #E6E0D4;font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#5E646E}
.uvd-trow{border-bottom:1px solid #f0ede5;font-size:12.5px;color:#1A1A1A;border-left:3px solid transparent}
.uvd-trow:last-child{border-bottom:none}
.uvd-trow .uvd-tcell:first-child{font-weight:700}
.uvd-trow.ok{border-left-color:#1f9d6b}
.uvd-trow.warn{border-left-color:#c47d12}
.uvd-trow.stop{border-left-color:#c0392b;background:#fdf7f6}
.uvd:not(.uvd-static) .uvd-trow{opacity:0;transform:translateY(6px)}
.uvd:not(.uvd-static) .uvd-trow.in{opacity:1;transform:none;transition:opacity .35s ease,transform .35s ease}
.uvd-rchip.stop{background:#fdecea;color:#c0392b}
/* big-number verdict scene (runway, countdowns) */
.uvd-big{align-items:center}
.uvd-bn{flex:0 0 auto;min-width:118px;text-align:center;border:1px solid #E6E0D4;border-radius:12px;padding:16px 14px}
.uvd-bn-val{display:block;font-size:40px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.uvd-bn-val.ok{color:#1f9d6b}.uvd-bn-val.warn{color:#c47d12}.uvd-bn-val.stop{color:#c0392b}
.uvd-bn-unit{display:block;font-size:11.5px;font-weight:600;color:#5E646E;margin-top:5px;line-height:1.35}
.uvd-bn-side{flex:1;min-width:0}
.uvd-verdict{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  padding:4px 11px;border-radius:20px;margin-bottom:8px}
.uvd-verdict.ok{background:#e7f6ef;color:#1f9d6b}
.uvd-verdict.warn{background:#fdf4e3;color:#c47d12}
.uvd-verdict.stop{background:#fdecea;color:#c0392b}
.uvd-btn:focus-visible,.uvd-jump:focus-visible{outline:2px solid #F5885C;outline-offset:2px}
@media(max-width:560px){
  .uvd-thead,.uvd-trow{grid-template-columns:1fr 1fr auto;gap:6px}
  .uvd-thead div:nth-child(2),.uvd-trow .uvd-tcell:nth-child(2){display:none}
  .uvd-big{flex-direction:column;align-items:stretch}
  .uvd-bn{min-width:0}
}