:root {
  --font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: Consolas, "Cascadia Mono", Menlo, "Roboto Mono", monospace;
  --text: #000;
  --gray: #6D6D6D;
  --link: #0000FF;
  --ok: #1E7B34;
  --warn: #B35C00;
  --error: #B22222;
  --field-line: #B4B4B4;
  --focus-line: #0067C0;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: #fff;
  color: var(--text);
  font: 13px/17px var(--font);
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  font-kerning: none;
  font-feature-settings: "kern" 0;
  user-select: none;
  -webkit-user-select: none;
}

#window { position: fixed; inset: 0; overflow: hidden; background: #fff; }
#backdrop { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#frame { position: absolute; inset: 0; padding: 5px; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; }

.text { display: block; height: 17px; line-height: 17px; white-space: nowrap; margin: 3px; padding: 0 3px; }
.dim { color: var(--gray); }

#titleBar {
  flex: none; height: 30px; display: grid; grid-template-columns: auto auto auto 1fr auto auto;
  align-items: center; padding-left: 10px;
}
#minimize { grid-column: 5; }
#close { grid-column: 6; }
.settingsButton {
  width: 28px; height: 22px; margin: 0 0 0 4px; padding: 0; border: 0; border-radius: 7px; position: relative;
  background: rgba(255, 255, 255, 0.6); cursor: pointer;
}
.settingsButton:hover { background: rgba(255, 255, 255, 0.85); }
.settingsButton:active { background: rgba(225, 225, 225, 0.9); }
.settingsButton i { position: absolute; left: 6px; top: 3px; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23202020' stroke-width='1.1' stroke-linejoin='round'%3E%3Cpath d='M6.48 3.03L6.68 1.23L9.32 1.23L9.52 3.03L10.44 3.41L11.86 2.28L13.72 4.14L12.59 5.56L12.97 6.48L14.77 6.68L14.77 9.32L12.97 9.52L12.59 10.44L13.72 11.86L11.86 13.72L10.44 12.59L9.52 12.97L9.32 14.77L6.68 14.77L6.48 12.97L5.56 12.59L4.14 13.72L2.28 11.86L3.41 10.44L3.03 9.52L1.23 9.32L1.23 6.68L3.03 6.48L3.41 5.56L2.28 4.14L4.14 2.28L5.56 3.41Z'/%3E%3Ccircle cx='8' cy='8' r='2.4'/%3E%3C/svg%3E") no-repeat; }
#appIcon { width: 18px; height: 18px; margin: 0 6px 0 0; image-rendering: auto; }
#titleText { color: #404040; justify-self: start; margin: 0 3px; }
.captionButton {
  width: 46px; height: 30px; border: 0; padding: 0; margin: 0; background: transparent; position: relative; color: #000;
}
.captionButton:hover { background: rgba(0, 0, 0, 0.216); }
.captionButton:active { background: rgba(0, 0, 0, 0.353); }
.captionButton.close:hover { background: #E81123; color: #fff; }
.captionButton.close:active { background: #F1707A; color: #fff; }
.minimizeGlyph { position: absolute; left: 18px; top: 14.5px; width: 10px; height: 1px; background: currentColor; }
.closeGlyph { position: absolute; left: 18px; top: 10px; width: 10px; height: 10px; }
.closeGlyph::before, .closeGlyph::after {
  content: ""; position: absolute; left: -2px; top: 4.5px; width: 14.14px; height: 1px; background: currentColor;
}
.closeGlyph::before { transform: rotate(45deg); }
.closeGlyph::after { transform: rotate(-45deg); }

#fieldsGrid {
  flex: none; display: grid; grid-template-columns: 72px minmax(0, 1fr) 188px;
  grid-template-rows: 31px 46px 25px 39px 27px 29px 39px auto;
  padding: 12px 12px 0; align-items: start;
}
#lowerGrid {
  flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 39px 24px 29px minmax(0, 1fr) 23px; padding: 12px; align-items: start;
}

.caption { grid-column: 1; justify-self: start; }
.subCaption { margin: 6px 3px 3px 18px; }

.row { display: flex; align-items: flex-start; margin: 0; justify-self: start; min-width: 0; }

.field {
  height: 25px; margin: 3px; padding: 4px 6px; background: #fff; position: relative;
  box-shadow: inset 0 0 0 1px var(--field-line); justify-self: stretch;
}
.field:focus-within { box-shadow: inset 0 0 0 1px var(--focus-line); }
.field.small { width: 84px; }
.field input {
  display: block; width: 100%; height: 17px; border: 0; padding: 0 0 0 1px; margin: 0; outline: 0;
  background: transparent; font: inherit; color: inherit; line-height: 17px;
}
.field input::placeholder { color: var(--gray); opacity: 1; }

#platform {
  margin: 3px; height: 23px; min-width: 96px; padding: 3px 8px; line-height: 17px; text-align: center;
  color: #fff; background: #696969; white-space: nowrap; justify-self: start;
}

#cookiesStatus { margin: 6px 3px; height: auto; white-space: normal; justify-self: stretch; grid-row: 2; letter-spacing: 0.1px; }
#cookiesStatus.ok { color: var(--ok); }
#cookiesStatus.warn { color: var(--warn); }
#cookiesHelp { margin: 0 3px 8px; align-self: start; justify-self: start; }
#qualityHint { margin: 2px 3px 6px; height: auto; white-space: normal; justify-self: stretch; letter-spacing: 0.1px; }
#status { margin: 6px 3px; overflow: hidden; text-overflow: clip; }
#status.ok { color: var(--ok); }
#status.warn { color: var(--warn); }
#status.error { color: var(--error); }

.link { color: var(--link); text-decoration: underline; cursor: pointer; justify-self: start; }
#engine { margin: 3px 0 3px 3px; }
#update, #errorLogLink { margin: 3px 3px 3px 12px; }

.btn {
  position: relative; height: 33px; margin: 3px; padding: 0; border: 0; background: transparent;
  font: inherit; color: #000; line-height: 17px; flex: none; cursor: default;
}
.btn::before {
  content: ""; position: absolute; inset: 1px; border-radius: 4px; background: #FDFDFD;
  border: 1px solid #D0D0D0; border-bottom-color: #BABABA; z-index: -1;
}
.btn { z-index: 0; }
.btn:hover:not(:disabled)::before { background: #F6F6F6; }
.btn:active:not(:disabled)::before { background: #F5F5F5; border-color: #E5E5E5; }
.btn:disabled { color: #A0A0A0; }
.btn:disabled::before { background: #F9F9F9; border-color: #E5E5E5; }
.btn.flat::before { inset: 0; border-radius: 0; border: 0; background: var(--flat); }
.btn.flat { color: #fff; }
.btn.flat:hover:not(:disabled)::before { background: var(--flat-hover); }
.btn.flat:active:not(:disabled)::before { background: var(--flat-down); }
#cookiesPick { width: 91px; }
#cookiesClear { width: 85px; }
#outPick { width: 89px; justify-self: start; }
#chapters { width: 99px; }
#download { width: 117px; }
#cancel { width: 76px; }
#showFile { width: 122px; }

.radio, .check {
  position: relative; height: 21px; line-height: 21px; padding-left: 17px; cursor: default; flex: none;
}
.radio input, .check input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.radio i, .check i { position: absolute; left: 0; top: 4px; width: 13px; height: 13px; }
.radio i { border-radius: 50%; border: 1px solid #5D5D5D; background: #F3F3F3; }
.radio input:checked + i { border: 0; background: #005FB8; }
.radio input:checked + i::after {
  content: ""; position: absolute; left: 4px; top: 4px; width: 5px; height: 5px; border-radius: 50%; background: #fff;
}
.check i { border: 1px solid #333; border-radius: 2px; background: #F4F4F4; }
.check input:checked + i { background: #005FB8; border-color: #005FB8; }
.check input:checked + i::after {
  content: ""; position: absolute; left: 3.5px; top: 1px; width: 3px; height: 7px;
  border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
#video { width: 98px; }
#m4a { width: 97px; }
#mp3 { width: 98px; }
#cover { width: 121px; margin-left: 24px; }

.combo { position: relative; height: 25px; margin: 3px; background: #fff; flex: none; }
#qualityCombo { width: 190px; }
#subtitlesCombo { width: 150px; }
.combo select {
  appearance: none; -webkit-appearance: none; position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; outline: 0; background: transparent; font: inherit; color: inherit; padding: 0 18px 0 3px; margin: 0; border-radius: 0;
}
.combo::after {
  content: ""; position: absolute; right: 1px; top: 1px; width: 15px; height: 23px; background: #F0F0F0 no-repeat center/5px 3px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='3'%3E%3Cpath d='M0 0h5L2.5 3z'/%3E%3C/svg%3E");
  pointer-events: none;
}
.combo:has(select:disabled) { color: var(--gray); background: #F0F0F0; }

#progress {
  position: relative; height: 18px; margin: 3px; border: 1px solid #BCBCBC; border-bottom-color: #D4D4D4;
  background: #E6E6E6; overflow: hidden;
}
#progress .fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(to bottom, #0F7B0F 0, #0F7B0F 10px, #1A811A 11px, #4F9E4F 13px, #58A358 14px, #58A358 100%);
}
#progress .marquee { display: none; position: absolute; top: 0; bottom: 0; width: 30%; left: -30%;
  background: linear-gradient(to bottom, #0F7B0F 0, #0F7B0F 10px, #1A811A 11px, #4F9E4F 13px, #58A358 14px, #58A358 100%);
}
#progress.indeterminate .fill { display: none; }
#progress.indeterminate .marquee { display: block; animation: marquee 2s linear infinite; }
@keyframes marquee { from { left: -30%; } to { left: 100%; } }

#logBox { margin: 3px; padding: 4px 2px 4px 6px; min-height: 0; height: calc(100% - 6px); position: relative; }
#log {
  position: relative; height: 100%; overflow: hidden; outline: 0;
  font: 12px/14px var(--mono); letter-spacing: 0.402px; color: #000; user-select: text; -webkit-user-select: text; cursor: text;
}
#log .clip { position: absolute; left: 4px; right: 12px; top: 4px; bottom: 0; overflow: hidden; }
#log .rows { white-space: pre; }
#log .thumb { position: absolute; right: 3px; width: 5px; border-radius: 2.5px; background: rgba(0, 0, 0, 0.373); display: none; }
#log .thumb:hover { width: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.588); }

#messageBox, .modal { position: fixed; inset: 0; z-index: 10; }
#lookDialog { position: fixed; inset: 0; z-index: 9; pointer-events: none; }
#lookDialog .dlg { pointer-events: auto; }

.dlg {
  position: absolute; background: #F0F0F0; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 8px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.26), 0 2px 8px rgba(0, 0, 0, 0.12);
}
.dlgTitle { position: absolute; left: 0; right: 0; top: 0; height: 30px; background: #F3F3F3; }
.dlgCaption { position: absolute; left: 8px; top: 6px; font-size: 12px; line-height: 16px; white-space: nowrap; }
.dlgTitle .captionButton { position: absolute; right: 0; top: 0; }
.captionButton.small { width: 34px; }
.captionButton.small .closeGlyph { left: 13px; }
.dlgClient { position: absolute; left: 0; top: 30px; }
.dlgText { position: absolute; display: block; padding: 0 3px; line-height: 17px; }
.dlgClient .btn { position: absolute; top: 435px; margin: 0; }
.btn.default::before { border-color: #0078D4; border-bottom-color: #006BBE; }
.btn.default:disabled::before { border-color: #E5E5E5; }
.grip {
  position: absolute; left: 670px; top: 470px; width: 8px; height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='%23BFBFBF'%3E%3Cpath d='M6 0h2v2H6zM3 3h2v2H3zM6 3h2v2H6zM0 6h2v2H0zM3 6h2v2H3zM6 6h2v2H6z'/%3E%3C/svg%3E");
}

#pickHeading { left: 12px; top: 9px; max-width: 640px; white-space: normal; letter-spacing: 0.1px; }
#pickSummary { left: 12px; top: 406px; height: 17px; white-space: nowrap; }
#pickList { position: absolute; left: 12px; top: 49px; width: 656px; height: 346px; border: 1px solid #828790; background: #fff; outline: 0; }
.pickHeader { position: absolute; left: 1px; top: 1px; width: 652px; height: 24px; display: flex; }
.pickHeader span { flex: none; height: 24px; line-height: 24px; padding-left: 6px; box-shadow: inset -1px 0 #E5E5E5; white-space: nowrap; overflow: hidden; }
.pickRows { position: absolute; left: 1px; top: 25px; width: 652px; height: 318px; overflow-x: hidden; overflow-y: auto; }
.pickRow { position: relative; display: flex; height: 21px; line-height: 21px; padding-left: 20px; white-space: nowrap; }
.pickRow span { flex: none; padding-left: 6px; overflow: hidden; text-overflow: ellipsis; }
.pickRow span:nth-of-type(1) { padding-left: 2px; }
.pickRow.sel { background: linear-gradient(to right, transparent 20px, #F0F0F0 20px); }
#pickList:focus .pickRow.sel { background: linear-gradient(to right, transparent 20px, #0078D4 20px); color: #fff; }
.pickBox {
  position: absolute; left: 4px; top: 4px; width: 13px; height: 13px; border: 1px solid #626262; border-radius: 2.5px; background: #F3F3F3;
}
.pickRow.checked .pickBox {
  border-color: #005FB8; background: #005FB8 no-repeat 0 0 / 11px 11px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M2.5 5.5 4.5 7.5 8.5 3.5' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
}

.td { background: #F0F0F0; font-size: 12px; line-height: 15px; }
.tdMain { position: absolute; left: 0; top: 0; width: 100%; background: #fff; border-bottom: 1px solid #EDEDED; box-shadow: 0 1px #E9E9E9; }
.tdInfo {
  position: absolute; left: 10px; top: 10px; width: 32px; height: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233D9BE9'/%3E%3Cstop offset='1' stop-color='%230A5FBF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='16' cy='16' r='15.5' fill='url(%23g)'/%3E%3Ccircle cx='16' cy='9' r='2' fill='%23fff'/%3E%3Crect x='14.5' y='13' width='3' height='12' rx='1' fill='%23fff'/%3E%3C/svg%3E");
}
.tdHeading { position: absolute; left: 52px; top: 10px; font-size: 16px; line-height: 21px; color: #003399; white-space: nowrap; }
.tdText { position: absolute; left: 52px; top: 46px; width: 296px; white-space: normal; }
.tdText a { color: #0066CC; text-decoration: underline; cursor: pointer; }
.dlgClient .tdBtn { top: 161px; height: 22px; font-size: 12px; line-height: 15px; }
.tdBtn::before { inset: 0; }

#lookWindow .dlgTitle { cursor: default; touch-action: none; }
.lookCombo {
  position: absolute; width: 160px; height: 25px; background: #FDFDFD; border: 1px solid #D2D2D2; border-top-color: #DFDFDF; border-bottom-color: #D8D8D8; border-radius: 3px;
}
.lookCombo::after {
  content: ""; position: absolute; right: 4px; top: 10px; width: 8px; height: 5px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M.5.5 4 4 7.5.5' fill='none' stroke='%23606060' stroke-width='1'/%3E%3C/svg%3E");
}
.lookCombo select {
  appearance: none; -webkit-appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; outline: 0; margin: 0;
  background: transparent; font: inherit; color: #000; padding: 0 20px 0 3px; border-radius: 3px;
}
.lookCombo:hover { background: #F6F6F6; }
.track { position: absolute; left: 122px; width: 260px; height: 32px; outline: 0; touch-action: none; }
.track .rail {
  position: absolute; left: 8px; top: 8px; width: 244px; height: 5px; border-left: 1px solid #D6D6D6; border-right: 1px solid #D6D6D6;
  background: linear-gradient(#E1E1E1 0 1px, #E0E1E1 1px 2px, #E7EAEA 2px 3px, #DEDFDF 3px 4px, #E5E5E5 4px 5px);
}
.track .tick { position: absolute; top: 22px; width: 1px; height: 5px; background: linear-gradient(#D7D7D7 0 1px, #C4C4C4 1px 4px, #DDDDDD 4px 5px); }
.track .thumb {
  position: absolute; top: 2px; width: 11px; height: 21px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='21'%3E%3Cpath d='M0 .6Q0 0 .6 0h9.8q.6 0 .6.6V14l-5.5 6L0 14z' fill='%230078D7'/%3E%3C/svg%3E");
}
.track:hover .thumb, .track.dragging .thumb {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='21'%3E%3Cpath d='M0 .6Q0 0 .6 0h9.8q.6 0 .6.6V14l-5.5 6L0 14z' fill='%23171717'/%3E%3C/svg%3E");
}
.track.dragging .thumb {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='21'%3E%3Cpath d='M0 .6Q0 0 .6 0h9.8q.6 0 .6.6V14l-5.5 6L0 14z' fill='%23CCCCCC'/%3E%3C/svg%3E");
}

#lowerGrid.noLog { flex: none; grid-template-rows: 39px 24px 29px 23px; }

@media (max-width: 639px) {
  #minimize, #close { visibility: hidden; }
  #fieldsGrid { grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto; padding: 12px 12px 6px; }
  #cookiesStatus, #cookiesHelp, #qualityHint, [data-n=folderCap], #outDirBox, #outPick, [data-n=engineRow] { display: none !important; }
  [data-n=linkCap] { grid-row: 1 !important; grid-column: 1 !important; }
  #urlBox { grid-row: 1 !important; grid-column: 2 !important; }
  #platform { grid-row: 2 !important; grid-column: 2 !important; }
  [data-n=cookiesCap] { grid-row: 3 !important; grid-column: 1 !important; margin-top: 11px !important; }
  [data-n=cookiesRow] { grid-row: 3 !important; grid-column: 2 !important; margin-top: 0 !important; }
  [data-n=modeCap] { grid-row: 4 !important; grid-column: 1 !important; }
  [data-n=modeRow] { grid-row: 4 !important; grid-column: 2 !important; flex-wrap: wrap; }
  #cover { margin-left: 0; }
  [data-n=qualityCap] { grid-row: 5 !important; grid-column: 1 !important; }
  [data-n=qualityRow] { display: contents; }
  #qualityCombo { grid-row: 5; grid-column: 2; width: calc(100% - 6px); }
  .subCaption { grid-row: 6; grid-column: 1; margin: 6px 3px 3px; justify-self: start; }
  #subtitlesCombo { grid-row: 6; grid-column: 2; width: calc(100% - 6px); }
  [data-n=fragmentCap] { grid-row: 7 !important; grid-column: 1 !important; }
  [data-n=fragmentRow] { grid-row: 7 !important; grid-column: 2 !important; flex-wrap: wrap; }
  .field.small { width: 70px; }
  #lowerGrid { flex: 1 0 auto; grid-template-rows: auto 24px auto minmax(120px, 1fr); }
  #lowerGrid.noLog { flex: none; grid-template-rows: auto 24px auto; }
  [data-n=actions] { flex-wrap: wrap; }
  #status { white-space: normal; height: auto; }
  #lookWindow { width: calc(100% - 16px) !important; }
  #lookClient { width: 100% !important; }
  #lookClient .track { left: 112px; width: auto; right: 56px; }
  #lookClient .dlgText[id] { left: auto !important; right: 6px; min-width: 44px; }
  #lookReset { left: auto !important; right: 94px; }
  #lookClose { left: auto !important; right: 13px; }
  .track .rail { width: auto; right: 8px; }
}

@media (max-width: 699px) {
  #pickWindow { left: 8px !important; top: 8px !important; width: calc(100% - 16px) !important; height: calc(100% - 16px) !important; }
  #pickWindow .dlgClient {
    width: auto !important; height: auto !important; right: 0; bottom: 0; display: grid; padding: 9px 9px 9px;
    grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr) auto auto auto; gap: 6px;
  }
  #pickWindow .dlgClient > * { position: static; grid-column: 1 / -1; }
  #pickHeading { max-width: none; }
  #pickList { position: relative !important; left: 0; top: 0; width: auto; height: auto; min-height: 120px; }
  .pickHeader, .pickRows { width: calc(100% - 2px); }
  .pickRows { height: calc(100% - 26px); }
  .pickHeader span:nth-child(3), .pickRow span:nth-of-type(3) { display: none; }
  .pickHeader span:nth-child(2), .pickRow span:nth-of-type(2) { flex: 1 1 auto; width: auto !important; min-width: 0; }
  #pickSummary { height: auto; white-space: normal; }
  #pickWindow .btn { position: relative; top: 0; left: 0 !important; right: 0 !important; width: auto !important; grid-column: auto; }
  #pickWindow .grip { display: none; }
}

html.fullscreen #frame {
  padding: var(--tg-safe-area-inset-top, 0px) calc(5px + var(--tg-safe-area-inset-right, 0px)) calc(5px + var(--tg-safe-area-inset-bottom, 0px)) calc(5px + var(--tg-safe-area-inset-left, 0px));
}
html.fullscreen #titleBar { display: flex; justify-content: center; align-items: center; height: var(--tg-content-safe-area-inset-top, 30px); min-height: 30px; padding: 0; }
html.fullscreen #minimize, html.fullscreen #close { display: none; }