/* A scaled, non-interactive rendering of the Windows converter screen. */
.workspace-visual { position: relative; min-width: 0; container-type: inline-size; }
.workspace-glow {
  position: absolute;
  inset: 8% 5% -5% 7%;
  z-index: -1;
  border-radius: 48%;
  background: rgba(8, 120, 249, .15);
  filter: blur(60px);
}
.workspace-window {
  --workspace-line: #e3e7ef;
  --workspace-muted: #697d9e;
  position: relative;
  overflow: hidden;
  border: 1px solid #d3dde5;
  border-radius: 12px;
  color: #101c30;
  background: #eef3f4;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 1.6cqw;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  box-shadow: 0 35px 80px rgba(23, 54, 88, .18), 0 6px 22px rgba(23, 54, 88, .08);
  user-select: none;
}
.workspace-window svg {
  display: block;
  width: 1.3em;
  height: 1.3em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.workspace-titlebar {
  height: 3.15em;
  padding: 0 1em;
  display: flex;
  align-items: center;
  gap: .9em;
  border-bottom: 1px solid #dce3e7;
}
.workspace-titlebar > svg { color: #68767e; }
.workspace-titlebar strong { font-size: 1.18em; font-weight: 600; }
.workspace-account { margin-left: auto; display: flex; align-items: center; gap: 1em; }
.workspace-avatar { position: relative; color: #68767e; }
.workspace-avatar svg { width: 1.7em; height: 1.7em; }
.workspace-avatar::after { content: ""; position: absolute; right: -.05em; bottom: 0; width: .4em; height: .4em; border: .12em solid #eef3f4; border-radius: 50%; background: #37a56c; }
.workspace-plan { padding: .1em .85em; border: 1px solid #dec57e; border-radius: 2em; color: #433411; background: #eddaaa; font-size: .86em; }
.workspace-window-controls { display: flex; align-items: center; gap: 2.1em; margin-left: 1.5em; padding-left: 1.8em; border-left: 1px solid #e0e6e8; color: #68767e; }
.workspace-window-controls svg { width: 1.05em; height: 1.05em; }
.workspace-body { min-height: 34.5em; display: grid; grid-template-columns: 12em minmax(0, 1fr); }
.workspace-sidebar { padding: .75em .5em .7em; display: flex; flex-direction: column; gap: .2em; }
.workspace-nav-item { min-height: 2.9em; padding: .65em .7em; display: flex; align-items: center; gap: .8em; border-radius: .55em; white-space: nowrap; font-size: .93em; }
.workspace-nav-item svg { color: #69777d; }
.workspace-nav-item.active { background: #e1e7e9; }
.workspace-nav-item.workspace-settings { margin-top: auto; }
.workspace-main { min-width: 0; padding: 1.65em 1.35em 1.35em; display: flex; flex-direction: column; border-top-left-radius: 1em; background: #fff; }
.workspace-heading-row { display: flex; align-items: center; gap: .8em; }
.workspace-back { padding: .4em; border: 1px solid #dce4f1; border-radius: .6em; }
.workspace-back svg { width: 1.45em; height: 1.45em; }
.workspace-window h2 { margin: 0; color: #101c30; font-family: inherit; font-size: 1.68em; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.workspace-subtitle { margin: 1em 0 1.45em; color: var(--workspace-muted); font-size: .89em; }
.workspace-converter { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 14.1em; gap: 1.1em; }
.workspace-files,
.workspace-control-card { border: 1px solid var(--workspace-line); border-radius: 1.25em; background: #fcfdff; }
.workspace-files { min-width: 0; padding: 1.15em; display: flex; flex-direction: column; }
.workspace-files-toolbar { margin-bottom: 1em; display: flex; align-items: center; justify-content: space-between; gap: .5em; }
.workspace-files-toolbar strong { font-size: .95em; font-weight: 600; white-space: nowrap; }
.workspace-file-actions { display: flex; gap: .45em; }
.workspace-control { padding: .7em .8em; display: inline-flex; align-items: center; justify-content: center; gap: .45em; border: 1px solid var(--workspace-line); border-radius: .75em; background: #f3f5fa; font-size: .8em; white-space: nowrap; }
.workspace-control-primary { border-color: #216bf4; color: #fff; background: #216bf4; }
.workspace-control-clear { border-color: #ffcaca; color: #ef242d; background: #fff8f8; }
.workspace-file-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .88em; }
.workspace-file-table col:nth-child(2) { width: 3.7em; }
.workspace-file-table col:nth-child(3) { width: 4.4em; }
.workspace-file-table col:nth-child(4) { width: 2em; }
.workspace-file-table th { height: 3.1em; color: #5b6d8a; background: #f3f5fb; font-weight: 400; text-align: left; }
.workspace-file-table th:first-child { text-align: center; }
.workspace-file-table td { height: 3.65em; border-bottom: 1px solid #edf0f5; white-space: nowrap; }
.workspace-file-table td:first-child { padding-left: .65em; }
.workspace-file-size { color: #8993a5; }
.workspace-file-ready { color: #008a12; }
.workspace-file-remove { color: #ff3344; }
.workspace-file-remove svg { width: 1.2em; height: 1.2em; }
.workspace-files-footer { margin-top: auto; padding-top: 1.7em; display: flex; align-items: center; justify-content: space-between; gap: .8em; color: var(--workspace-muted); font-size: .72em; }
.workspace-files-footer span:first-child { white-space: nowrap; }
.workspace-controls { min-width: 0; display: flex; flex-direction: column; gap: 1.1em; }
.workspace-control-card { padding: 1.1em; }
.workspace-control-card strong { font-size: 1em; font-weight: 600; }
.workspace-directory { margin-top: .75em; display: flex; flex-wrap: wrap; gap: .65em; }
.workspace-directory-path { width: 100%; min-width: 0; padding: .8em; display: flex; align-items: center; gap: .7em; border: 1px solid #dce4f1; border-radius: .85em; background: #fff; font-size: .82em; }
.workspace-directory-path span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-directory > .workspace-control { margin-left: auto; }
.workspace-progress-heading { display: flex; align-items: center; justify-content: space-between; gap: .4em; }
.workspace-progress-heading span { color: var(--workspace-muted); font-size: .7em; white-space: nowrap; }
.workspace-progress-track { height: .7em; margin-top: .9em; border-radius: 1em; background: #e9edf3; }
.workspace-start { align-self: flex-end; width: 100%; padding: 1em .8em; border-radius: .95em; color: #fff; background: linear-gradient(180deg, #216ff5, #204bdd); font-size: 1.05em; text-align: center; }