/* PT Uploader / Light UI v2 — design tokens */
:root {
  color-scheme: light;
  --bg: #f6f8fc; --surface: #fff; --soft: #f9fbfe; --soft-blue: #edf5ff;
  --text: #14213d; --text2: #364766; --muted: #8190a8;
  --border: #e6ecf3; --border-strong: #d6e0ec;
  --blue: #2678fa; --blue-hover: #1462e9; --blue-dark: #155ed3;
  --green: #18a56c; --amber: #c88718; --red: #e34f61; --purple: #8557e6;
  --cyan: #0aa5b8;
  --shadow: 0 3px 18px rgba(33,60,103,.035); --radius: 13px;
  font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 160, 190, 0.4) transparent;
}
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(140, 160, 190, 0.35);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(120, 140, 175, 0.6);
}
html { min-width: 320px; background: var(--bg) }
body { margin: 0; color: var(--text); font-size: 13px; line-height: 1.52 }
button, select, input, textarea { font: inherit }
button { cursor: pointer }
[hidden] { display: none !important }
a { color: var(--blue-dark); text-decoration: none }
a:hover { text-decoration: underline }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #93bdff80; outline-offset: 2px }
svg { display: inline-block; vertical-align: middle; flex: none }
.app-shell { height: 100dvh; min-height: 620px; display: flex; flex-direction: column; padding: 11px 11px 0 }
.app-header { height: 70px; min-height: 70px; width: 100%; display: flex; align-items: center; gap: 20px; padding: 0 21px;
  border: 1px solid var(--border); background: var(--surface); border-radius: 13px; box-shadow: var(--shadow); z-index: 3 }
.header-brand { display: flex; align-items: center; gap: 12px; min-width: 236px }
.brand-logo { height: 46px; width: 46px; border-radius: 12px; box-shadow: 0 4px 10px #2b76ff24 }
.brand-copy { display: grid; gap: 0; line-height: 1.3; white-space: nowrap }
.brand-copy strong { font-size: 19px; font-weight: 760; letter-spacing: -.6px }
.brand-copy span { font-size: 11px; color: #8190aa }
.header-spacer { flex: 1 }
.system-pills { display: flex; align-items: center; gap: 8px; min-width: 0 }
.system-pill { display: inline-flex; align-items: center; gap: 7px; border-radius: 100px; padding: 7px 11px; font-size: 11px; font-weight: 640; white-space: nowrap }
.system-pill.success { color: #138652; background: #e7f9ee }
.system-pill.warn { color: #b67b12; background: #fff5dc }
.system-pill.info { color: #226ade; background: #e8f1ff }
.system-pill.neutral { color: #5f6d84; background: #f0f3f8 }
.dot { height: 7px; width: 7px; border-radius: 50%; display: inline-block; background: currentColor; flex: none }
.header-actions { display: flex; align-items: center; gap: 8px }
.button { border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid #dce5f0; background: #fff; color: #263653; padding: 9px 13px; min-height: 36px; font-size: 12px; font-weight: 630; transition: .15s ease; text-decoration: none; white-space: nowrap }
.button:hover { background: #f5f8ff; border-color: #c2d6f5; text-decoration: none }
.button:disabled { opacity: .47; cursor: not-allowed; box-shadow: none }
.button.primary { color: white; border-color: #2878f5; background: linear-gradient(135deg,#408ffc,#1769ef); box-shadow: 0 3px 8px #2878f52d }
.button.primary:hover:not(:disabled) { background: linear-gradient(135deg,#3284fa,#115be4); box-shadow: 0 4px 14px #2878f540 }
.button.tiny { padding: 5px 8px; min-height: 30px; font-size: 11px }
.button.ghost { border-color: transparent; background: transparent; color: #6a7e99 }
.button.ghost:hover { color: var(--blue-dark); background: #f2f7ff }
.button.block { width: 100% }
.workspace { display: grid; grid-template-columns: 204px minmax(0,1fr); min-height: 0; flex: 1; margin-top: 8px; background: #fff;
  border-radius: 13px 13px 0 0; border: 1px solid var(--border); border-bottom: 0; overflow: hidden }
.workspace.has-detail { grid-template-columns: 204px minmax(0,1fr) 386px }
.sidebar { border-right: 1px solid var(--border); background: linear-gradient(180deg,#fbfcff 0%,#f9fbff 100%); padding: 27px 13px 18px; display: flex; flex-direction: column; min-width: 0 }
.nav-label { color: #98a4b6; font-size: 10px; font-weight: 750; letter-spacing: 1.3px; margin: 0 12px 12px }
.nav-secondary { margin-top: 32px }
.sidebar-nav { display: grid; gap: 4px }
.nav-link { width: 100%; border: 0; text-align: left; background: transparent; border-radius: 9px; min-height: 40px;
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; color: #51617b; font-size: 12px; font-weight: 580 }
.nav-link svg { stroke-width: 1.9 }
.nav-link:hover { background: #f0f5ff; color: #1d63d0 }
.nav-link.active { color: #1b66dc; background: #e9f2ff; font-weight: 700 }
.nav-count { color: #92a1b7; margin-left: auto; font-size: 11px; font-weight: 600 }
.nav-link.active .nav-count { color: #3c83e8 }
.sidebar-bottom { margin-top: auto; padding: 15px 11px 2px; border-top: 1px solid #e6edf5; display: flex; align-items: flex-start; gap: 9px }
.service-indicator { height: 8px; width: 8px; background: #28b67a; border-radius: 50%; margin-top: 5px; box-shadow: 0 0 0 4px #dff7e9 }
.sidebar-bottom div { display: grid; gap: 2px }
.sidebar-bottom strong { font-size: 11px; font-weight: 620; color: #365473 }
.sidebar-bottom span:last-child { font-size: 10px; color: #9ba6b8 }
.main { overflow-y: auto; overflow-x: hidden; min-width: 0; padding: 24px 23px 28px; background: #fff }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 21px }
.eyebrow { color: #377ff3; font-size: 10px; font-weight: 790; letter-spacing: 1.65px; text-transform: uppercase }
h1 { font-size: 24px; font-weight: 760; line-height: 1.32; margin: 6px 0 6px; letter-spacing: -.65px }
.page-heading p { color: #8997ac; font-size: 12px; margin: 0 }
.heading-meta { display: flex; align-items: center; gap: 6px; white-space: nowrap; color: #9eabc0; font-size: 11px; padding-bottom: 4px }
.blue-dot { color: #357cf6 }
.metrics { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; margin-bottom: 20px }
.metric { border: 1px solid var(--border); border-radius: 11px; background: #fff; display: flex; flex-direction: column; min-width: 0;
  min-height: 125px; padding: 14px 15px 12px; box-shadow: var(--shadow) }
.metric-icon { display: grid; place-items: center; height: 31px; width: 31px; border-radius: 10px; margin-bottom: 8px }
.metric-icon svg { width: 17px; height: 17px }
.tint-blue { color: #3383f3; background: #eef5ff }
.tint-cyan { color: #028fa6; background: #e2f8fc }
.tint-amber { color: #e19a27; background: #fff5e2 }
.tint-green { color: #19ad77; background: #e6f9ef }
.tint-purple { color: #8e64eb; background: #f1edff }
.tint-red { color: #e65c67; background: #fff0f0 }
.metric strong { font-size: 24px; font-weight: 770; line-height: 1.18; font-variant-numeric: tabular-nums; letter-spacing: -.7px }
.metric-label { font-size: 11px; color: #8998b1; margin-top: 4px }
.panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden }
.section-heading { padding: 18px 18px 14px; display: flex; justify-content: space-between; align-items: flex-start }
.section-heading h2 { margin: 0; font-size: 15px; font-weight: 720; letter-spacing: -.1px; display: flex; align-items: center; gap: 9px }
.count-chip { font-size: 10px; padding: 1px 7px; border-radius: 50px; color: #4877b0; background: #edf4ff }
.section-heading p { margin: 5px 0 0; font-size: 11px; color: #97a4b8 }
.toolbar { display: flex; gap: 8px; align-items: center; padding: 0 17px 15px }
.search-field { flex: 1; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border-strong);
  min-width: 110px; background: white; height: 35px; border-radius: 8px; padding: 0 11px; color: #889ab2 }
.search-field input { flex: 1; border: 0; outline: none; width: 100%; color: var(--text); min-width: 0; font-size: 12px; background: transparent }
.search-field:focus-within { border-color: #80b2ff; box-shadow: 0 0 0 2px #c2ddff66 }
input::placeholder,textarea::placeholder { color: #aab5c6 }
select { min-height: 35px; padding: 0 27px 0 10px; background: white; border: 1px solid var(--border-strong); color: #52617b; border-radius: 8px; outline: none; font-size: 11px }
.table-scroll { overflow-x: auto }
.jobs-table { border-collapse: collapse; width: 100%; font-size: 12px }
.jobs-table th { text-align: left; padding: 10px 15px; font-size: 10.5px; font-weight: 630; color: #8090a8; background: #f9fbfd;
  white-space: nowrap; border-top: 1px solid #edf1f6; border-bottom: 1px solid #edf1f6 }
.jobs-table td { border-top: 1px solid #edf1f6; padding: 10px 15px; height: 63px; vertical-align: middle }
.jobs-table tbody tr { transition: background .13s }
.jobs-table tbody tr:hover { background: #fafcff }
.jobs-table tbody tr.selected { background: #eff6ff }
.jobs-table tbody tr.selected:hover { background: #eaf3ff }
.jobs-table .foldercell { min-width: 220px; width: 53% }
.folder-line { display: flex; align-items: center; min-width: 0; gap: 11px }
.file-icon { height: 32px; width: 32px; border-radius: 8px; flex: none; display: grid; place-items: center; background: #fff5e1; color: #e2a323 }
.file-icon svg { width: 20px; height: 20px }
.folder-copy { display: flex; flex-direction: column; min-width: 0; gap: 2px }
.folder-name { font-size: 11.5px; color: #1c2a43; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 370px }
.folder-path { font-size: 10px; color: #97a4b9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 350px }
.kind { border-radius: 20px; padding: 5px 9px; font-size: 10px; display: inline-block; font-weight: 650; white-space: nowrap }
.kind.movie { color: #3a7fe6; background: #eaf3ff }
.kind.tv { color: #8552e1; background: #f1ebff }
.kind.other { color: #60758f; background: #f0f3f7 }
.status { font-size: 10px; font-weight: 650; display: inline-flex; align-items: center; gap: 6px; border-radius: 50px; padding: 5px 10px; white-space: nowrap }
.status::before { content: ""; height: 6px; width: 6px; border-radius: 50%; background: currentColor }
.status.review,.status.stabilizing,.status.queued,.status.interrupted { background: #fff4e2; color: #b78019 }
.status.ready,.status.seeding { background: #e6f8ee; color: #16a36a }
.status.processing,.status.uploading_images,.status.publishing,.status.checking,.status.seeding_request { background: #e8f2ff; color: #2879e6 }
.status.error,.status.upload_unknown { background: #fff0f0; color: #dc5463 }
.status.published_unseeded { background: #fff4e4; color: #c07f18 }
.status.cleaned { background:#eef2f7; color:#5f7089 }
.action-head { text-align: right !important }
.actions-cell { text-align: right; white-space: nowrap }
.actions-cell .icon-button + .icon-button { margin-left: 5px }
.remove-button { color: #cc5b66 !important }
.remove-button:hover { color: #a32e3f !important; background: #fff1f3 !important; border-color: #f0b4be !important }
.icon-button { background: #fff; border: 1px solid var(--border); color: #6b7b96; border-radius: 8px; width: 30px; height: 30px; display: inline-grid; place-items: center }
.icon-button:hover { color: var(--blue-dark); border-color: #b5d4ff; background: #f4f9ff }
.icon-button svg { height: 15px; width: 15px }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 65px 20px 73px; text-align: center; gap: 9px }
.empty-glyph { height: 55px; width: 55px; border-radius: 16px; display: grid; place-items: center; background: #eef5ff; color: #4e98f5; margin-bottom: 4px }
.empty-glyph svg { width: 28px; height: 28px }
.empty strong { font-size: 14px }
.empty p { margin: 0 0 12px; color: var(--muted); font-size: 11px; max-width: 330px }
.secondary-panel { padding-bottom: 8px }
.settings-list,.activity-list { padding: 0 20px 15px }
.settings-line { display: flex; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px solid #edf1f6; font-size: 12px }
.settings-line .key { color: #8391a7 }
.settings-line .value { font-weight: 590; color: #304263; text-align: right; max-width: 70%; overflow-wrap: anywhere }
.settings-line .value.warn { color: #ba811e }
.activity-row { border-top: 1px solid #edf1f6; padding: 12px 0; font-size: 12px; color: #526681 }
.activity-row time { display: inline-block; font-size: 10px; width: 115px; color: #9ba9bc }
.footnote { color: #a7b2c2; font-size: 10px; text-align: center; padding-top: 17px; line-height: 1.8 }
.detail-mask { display: none }
.detail-panel { border-left: 1px solid var(--border); background: #fff; min-width: 0; display: flex; flex-direction: column; overflow: hidden }
.detail-header { display: flex; gap: 10px; align-items: center; padding: 19px 16px 9px; min-width: 0 }
.detail-folder { background: #fff4df; color: #e6a520; border-radius: 10px; display: grid; place-items: center; width: 37px; height: 37px }
.detail-folder svg { width: 23px; height: 23px }
.detail-head-copy { min-width: 0; flex: 1 }
.detail-head-copy h2 { margin: 0; color: #1c2b45; font-size: 12px; font-weight: 710; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.detail-head-copy p { margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #9aa6b7; font-size: 10px }
.detail-topline { display: flex; align-items: center; gap: 8px; padding: 0 16px 13px; color: #95a3b9; font-size: 10px }
.detail-tabs { display: flex; border-top: 1px solid #eef1f6; border-bottom: 1px solid #eef1f6; margin: 0 13px; background: #fff }
.tab { border: 0; background: transparent; color: #7e8da5; font-size: 11px; font-weight: 600; flex: 1; padding: 12px 6px; border-bottom: 2px solid transparent }
.tab.active { color: var(--blue); border-bottom-color: var(--blue) }
.tab:hover { color: #2678fa; background: #fbfdff }
.drawer-body { padding: 15px 14px 28px; flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin }
.detail-section { border: 1px solid #e7edf5; border-radius: 10px; padding: 12px; margin-bottom: 11px; background: #fff }
.detail-section-title { font-weight: 720; font-size: 11.5px; margin: 0 0 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px }
.detail-section-title small { color: #a5b1c1; font-size: 10px; font-weight: 500 }
.detail-section-title .button { margin-left: auto }
.info-grid { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 7px 10px; font-size: 11px; line-height: 1.38 }
.info-grid dt { color: #93a1b7 }
.info-grid dd { color: #40506b; margin: 0; min-width: 0; overflow-wrap: anywhere }
.info-grid dd strong { font-weight: 630; color: #1e3252 }
.detail-help { color: #8593a8; font-size: 11px; line-height: 1.55; margin: 2px 0 11px }
.muted { color: #96a4b9; font-size: 11px }
.detail-copy { overflow-wrap: anywhere; color: #637490; font-size: 11px; white-space: pre-wrap; }
.screenshot-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px }
.screenshot-grid a { display: block }
.screenshot-grid img { width: 100%; aspect-ratio: 16/9; display: block; background: #f0f3f8; border-radius: 5px; border: 1px solid var(--border); object-fit: cover; }
.screenshot-grid img:hover { border-color: #74a9f3; box-shadow: 0 2px 8px #2376f422 }
.code-preview { font: 10px/1.5 "Cascadia Code", Consolas, ui-monospace, monospace; background: #f7f9fd; border: 1px solid #e7edf5; color: #58708d; padding: 11px; border-radius: 7px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 215px; overflow: auto; margin: 8px 0 0 }
.detail-actions { display: flex; align-items: stretch; flex-wrap: wrap; gap: 8px; margin-top: 8px }
.detail-actions .button { flex: 1; min-width: 105px }
.warning { color: #a66b15; background: #fff8eb; border: 1px solid #fae9c9; border-radius: 7px; padding: 10px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; margin-bottom: 9px }
.field { display: grid; gap: 5px; margin-bottom: 12px }
.field label { color: #6b7c99; font-size: 11px; font-weight: 590 }
.field input,.field select,.field textarea { display: block; width: 100%; min-height: 34px; border-radius: 7px; background: #fff; border: 1px solid #dbe4ef; outline: none; padding: 8px 10px; color: #334663; font-size: 11px }
.field textarea { min-height: 75px; resize: vertical; }
.field input:focus,.field textarea:focus,.field select:focus { border-color: #6caaff; box-shadow: 0 0 0 2px #cfe4ff }
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.checklabel { display: flex; align-items: start; gap: 9px; margin: 14px 0; font-size: 11px; color: #6d7d94 }
.checklabel input { margin-top: 2px; accent-color: var(--blue) }
.detail-empty { display: flex; align-items: center; justify-content: center; flex-direction: column; color: var(--muted); padding: 40px 16px; gap: 8px }
.toast { position: fixed; z-index: 30; bottom: 23px; left: 50%; border-radius: 10px; background: #213755; color: white; box-shadow: 0 8px 24px #163b713b;
  padding: 11px 17px; transform: translate(-50%,25px); opacity: 0; pointer-events: none; transition: .18s; max-width: 85vw; font-size: 12px }
.toast.show { opacity: 1; transform: translate(-50%,0) }
@media (max-width: 1450px) {
  .workspace.has-detail { grid-template-columns: 186px minmax(0,1fr) 350px }
  .workspace { grid-template-columns: 186px minmax(0,1fr) }
  .main { padding: 22px 18px }
  .metrics { gap: 8px }
  .metric { padding: 12px; min-height: 116px }
  .metric strong { font-size: 22px }
  .jobs-table th,.jobs-table td { padding-left: 11px; padding-right: 11px }
  .folder-name { max-width: 275px }
  .folder-path { max-width: 260px }
}
@media (max-width: 1150px) {
  .system-pills { gap: 5px }
  .system-pill { padding: 6px 8px; font-size: 10px }
  .workspace { grid-template-columns: 184px minmax(0,1fr) }
  .workspace.has-detail { grid-template-columns: 184px minmax(0,1fr) }
  .detail-mask { display: block; position: fixed; inset: 0; background: #172c4970; z-index: 5 }
  .detail-panel { position: fixed; top: 0; right: 0; z-index: 6; height: 100dvh; width: min(410px,100%); box-shadow: -13px 0 35px #162f5a22 }
  .metrics { grid-template-columns: repeat(3,minmax(0,1fr)) }
}
@media (max-width: 800px) {
  .app-shell { padding: 0; min-height: 100dvh }
  .app-header { border-radius: 0; min-height: 64px; height: 64px; padding: 0 12px; gap: 8px }
  .header-brand { min-width: 0; gap: 9px }
  .brand-logo { width: 38px; height: 38px }
  .brand-copy strong { font-size: 15px }
  .brand-copy span { font-size: 9px }
  .system-pills { display: none }
  .header-actions { gap: 4px }
  .header-actions .button { padding: 8px }
  .header-actions .button svg { width: 15px; height: 15px }
  .workspace,.workspace.has-detail { margin: 0; border: 0; border-radius: 0; grid-template-columns: 61px minmax(0,1fr) }
  .sidebar { padding: 18px 7px }
  .nav-label,.nav-link .nav-count,.nav-secondary,.sidebar-bottom { display: none }
  .sidebar-nav { gap: 8px }
  .nav-link { justify-content: center; font-size: 0; padding: 10px 0; gap: 0 }
  .nav-link svg { width: 18px; height: 18px }
  .main { padding: 19px 15px }
  .page-heading h1 { font-size: 21px }
  .page-heading p { font-size: 11px }
  .heading-meta { display: none }
  .metrics { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px }
  .metric { min-height: 96px; padding: 10px }
  .metric-icon { margin-bottom: 3px; height: 27px; width: 27px }
  .metric strong { font-size: 21px }
  .metric-label { font-size: 10px }
  .toolbar { padding: 0 11px 12px; flex-wrap: wrap }
  .search-field { flex: 1 0 100% }
  .toolbar select { flex: 1 }
  .folder-name { max-width: 250px }
  .jobs-table { min-width: 560px }
  .detail-panel { width: min(410px,100%) }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important }
}

/* Live import activity */
.live-updates-section { margin-bottom: 20px; width: 100% }
.live-updates-head { min-height: 34px; margin-bottom: 9px; display: flex; align-items: end }
.live-updates-head h2 { margin: 0; font-size: 13px; font-weight: 720; display: flex; align-items: center; gap: 8px }
.live-updates-head p { margin: 3px 0 0; font-size: 10.5px; color: var(--muted) }
.live-updates-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 640px), 1fr)); gap: 14px }
.live-expand { margin-top: 7px }
.import-card {
  width: 100%; min-height: 112px; background: #fbfcff;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  padding: 14px 18px;
  display: grid;
  gap: 10px; align-content: start;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.import-card:hover {
  background: #fff;
  box-shadow: 0 5px 18px rgba(38,120,250,.065);
  border-color: #bacff0;
}
.import-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.import-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.import-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #e2f8fc;
  color: #028fa6;
  display: grid;
  place-items: center;
  flex: none;
}
.import-icon-wrap svg {
  width: 17px;
  height: 17px;
}
.import-title-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.import-title-copy strong {
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.import-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.import-stage-tag {
  background: #e9f0fa;
  color: #3b5a82;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}
.import-progress-box {
  display: grid;
  gap: 6px;
}
.import-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: var(--text2);
}
.import-progress-meta b { color: #223d64; font-weight: 700; font-variant-numeric: tabular-nums }
.import-progress-summary { display:flex; gap:12px; align-items:center; min-width:0; font-size:11px; color:var(--text2) }
.import-progress-summary span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.import-stage-copy { font-size:11px; color:#5c6f89; line-height:1.45 }
.import-live-message { color:#2f4667; font-size:11.5px; font-weight:580 }
.import-details { margin-top:1px; color:#70829a; font-size:10.5px; overflow-wrap:anywhere }
.import-details summary { cursor:pointer; color:#4774b1; width:fit-content }
.import-details p { margin:5px 0 0; line-height:1.55 }
.import-completed-at { color:#6c7e96; font-size:10.5px }
.import-view-task { align-self:start }
.progress-bar-bg {
  height: 7px;
  background: #e5ebf3;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.progress-bar-bg.small {
  height: 5px;
  margin-top: 4px;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #2678fa, #02b6cc);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.import-current-file {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.import-current-file span {
  color: #2b456b;
  font-weight: 550;
}
.import-error-banner {
  background: #fff0f2;
  color: #b33849;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  border-left: 3px solid #e34f61;
}
.progress-cell-wrap {
  display: flex;
  flex-direction: column;
  min-width: 130px;
}
.progress-cell-text {
  font-size: 11px;
  color: var(--text2);
}
.import-current-name {
  font-size: 11px;
  color: #4b5d77;
  max-width: 200px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-error-tip {
  font-size: 10px;
  color: #c93b4d;
  margin-top: 3px;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.archive-note {
  font-size: 10px;
  color: #2f7d5d;
  margin-top: 3px;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.poster-thumb {
  width:40px; height:60px; flex:none; border-radius:6px; object-fit:cover;
  background:linear-gradient(145deg,#f3f7fd,#dce8f8); border:1px solid #d5e0ee;
  box-shadow:0 2px 7px rgba(28,49,78,.08);
}
.poster-fallback { width:40px !important; height:60px !important }
.jobs-table td { height:76px }

/* Persisted publish history */
.history-view { padding-top:3px }
.history-toolbar { display:flex; gap:8px; align-items:center; margin-bottom:16px }
.history-toolbar .search-field { max-width:480px }
.history-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:14px }
.history-card { border:1px solid var(--border); border-radius:12px; background:#fff; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; text-align:left; padding:0; color:var(--text); transition:transform .15s,border-color .15s,box-shadow .15s }
.history-card:hover { border-color:#b9d2f5; box-shadow:0 9px 24px rgba(30,83,154,.09); transform:translateY(-1px) }
.history-card:focus-visible { outline:3px solid #93bdff80; outline-offset:2px }
.history-poster { aspect-ratio:2/3; width:100%; display:block; object-fit:cover; background:linear-gradient(150deg,#edf5ff,#d7e5f7) }
.history-poster-empty { display:grid; place-items:center; color:#7392b8; font-size:11px }
.history-card-copy { padding:11px 12px 12px; display:grid; gap:5px; min-width:0 }
.history-card-title { font-weight:720; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.history-card-meta { color:var(--muted); font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.history-card-foot { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:2px }
.history-cleanup { font-size:10px; border-radius:50px; padding:3px 7px; color:#64758e; background:#f0f3f8 }
.history-cleanup.done { color:#178456; background:#e7f8ee }
.history-cleanup.failed { color:#bb3f51; background:#fff0f2 }
.history-pagination { display:flex; justify-content:center; align-items:center; gap:12px; padding:20px 0 4px; color:var(--muted); font-size:11px }
.history-copy-block { white-space:pre-wrap; overflow-wrap:anywhere; background:#f8fafd; border-radius:8px; padding:10px 12px; font-size:11px; color:#576d89 }
.history-dialog-poster { width:112px; aspect-ratio:2/3; object-fit:cover; border-radius:9px; background:#eaf2fc }
.history-dialog-headline { display:flex; gap:16px; align-items:flex-start }

/* Clean Dialog Preview */
.cleanup-preview { display:grid; gap:9px }
.cleanup-dialog .manual-dialog-head h2,.history-dialog .manual-dialog-head h2 { overflow-wrap:anywhere }
.cleanup-path { padding:10px 12px; border-radius:8px; background:#f6f9fd; color:#526b8b; font:11px/1.55 "Cascadia Code",Consolas,monospace; overflow-wrap:anywhere }
.cleanup-conflict { padding:9px 11px; border-radius:8px; background:#fff0f2; color:#b33849; font-size:11px }
.cleanup-ok { color:#21845b; font-size:11px }

/* Status Pills */
.status-pill { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:3px 8px; font-size:10.5px; font-weight:600; white-space:nowrap; flex:none }
.status-pill .dot { width:5px; height:5px; border-radius:50%; background:currentColor; flex:none; display:inline-block }
.status-pill.success { color:#14804e; background:#e6f8ee }
.status-pill.warn { color:#b77f19; background:#fff4e2 }
.status-pill.info { color:#226ade; background:#edf4fe }
.status-pill.neutral { color:#627289; background:#f0f3f8 }

/* Modern Settings Layout */
.settings-layout { display:grid; gap:20px; width:100%; margin-bottom:24px }
.settings-section-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden }
.heading-icon { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:6px; background:#eef5ff; color:var(--blue); margin-right:8px; vertical-align:middle }
.heading-icon.icon-ptlgs { background:#edf5ff; color:#2678fa }
.heading-icon.icon-qb { background:#eef2ff; color:#4f46e5 }
.heading-icon.icon-cleanup { background:#fff4e2; color:#c88718 }

/* Settings: Status Overview Tiles */
.env-group { padding:0 20px 20px }
.env-group-head { display:flex; align-items:center; gap:8px; margin:16px 0 12px; color:var(--text2); font-size:12px; font-weight:700 }
.env-group-head .group-icon { display:grid; place-items:center; width:20px; height:20px; border-radius:5px; background:#f0f4fa; color:#526684 }
.service-tiles-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px }
.service-tile { background:#fbfcfe; border:1px solid #e5edf6; border-radius:10px; padding:14px 15px; display:flex; flex-direction:column; gap:11px; transition:border-color .15s,box-shadow .15s,background .15s }
.service-tile:hover { border-color:#bcd5fa; box-shadow:0 4px 14px rgba(38,120,250,.05); background:#fff }
.tile-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px }
.service-tile-icon { width:32px; height:32px; border-radius:8px; display:grid; place-items:center; flex:none }
.service-tile-icon.icon-ptlgs { background:#edf5ff; color:#2678fa }
.service-tile-icon.icon-qb { background:#eef2ff; color:#4f46e5 }
.service-tile-icon.icon-mp { background:#f3e8ff; color:#8557e6 }
.service-tile-icon.icon-media { background:#e6f9ef; color:#18a56c }
.tile-info { display:grid; gap:1px; min-width:0; flex:1 }
.tile-info strong { font-size:12.5px; font-weight:680; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.tile-sub { font-size:10.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.tile-rows { display:grid; gap:8px; border-top:1px solid #edf1f6; padding-top:10px; font-size:11.5px }
.tile-row { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:24px }
.tile-row .k { color:#7b8da5; font-size:11px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.spec-pill { font-size:10.5px; font-weight:580; color:#364d6e; background:#eef3f9; border-radius:4px; padding:2px 7px; max-width:130px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* Settings: Pipeline Parameters */
.env-group-pipeline { border-top:1px solid #edf1f6; padding-top:16px }
.pipeline-params-grid { display:grid; grid-template-columns:minmax(220px,2fr) minmax(130px,1fr) minmax(130px,1fr) minmax(220px,2fr); gap:12px }
.param-card { background:#fbfcfe; border:1px solid #e5edf6; border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; justify-content:space-between; gap:6px }
.param-label { font-size:10.5px; font-weight:650; color:#8393aa; letter-spacing:.3px }
.param-stat { display:flex; align-items:baseline; gap:4px }
.param-stat strong { font-size:20px; font-weight:740; color:#1c2e4a; font-variant-numeric:tabular-nums }
.param-stat small { font-size:11px; font-weight:500; color:var(--muted) }
.param-path-box { display:flex; flex-wrap:wrap; gap:6px }
.param-path-box code { background:#edf3fa; color:#223c5e; padding:3px 7px; border-radius:5px; font:11px/1.4 "Cascadia Code",Consolas,monospace; border:1px solid #dce6f2; overflow-wrap:anywhere }

/* Settings: Cleanup Panel */
.cleanup-settings-panel .section-heading { border-bottom:1px solid #edf1f6 }
.cleanup-status-badge { font-size:11px; font-weight:650; padding:4px 10px; border-radius:50px }
.cleanup-status-badge.enabled { color:#138652; background:#e7f9ee }
.cleanup-status-badge.disabled { color:#5f6d84; background:#f0f3f8 }
.cleanup-card-body { padding:18px 20px 22px; display:grid; gap:15px }
.cleanup-switch-banner { border:1px solid var(--border-strong); border-radius:10px; background:var(--soft); padding:13px 16px; transition:border-color .15s,background .15s }
.cleanup-switch-banner.is-active { border-color:#bcd5fa; background:#f5f9ff }
.cleanup-toggle-label { display:flex; align-items:center; gap:12px; cursor:pointer }
.cleanup-toggle-label input[type="checkbox"] { width:18px; height:18px; accent-color:var(--blue); margin:0; cursor:pointer; flex:none }
.cleanup-toggle-label .toggle-copy strong { font-size:13px; color:var(--text); display:block }
.cleanup-toggle-label .toggle-copy span { font-size:11px; color:var(--muted); display:block; margin-top:2px }
.cleanup-rules-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
.cleanup-rule-card { border:1px solid var(--border); border-radius:10px; background:#fff; padding:14px 16px; display:flex; flex-direction:column; gap:7px }
.rule-card-header { display:flex; align-items:center; gap:8px }
.rule-tag { font-size:10px; font-weight:700; color:#2566c7; background:#edf4fe; padding:2px 6px; border-radius:4px }
.rule-card-header strong { font-size:12.5px; color:var(--text) }
.rule-desc { margin:0; font-size:11px; color:var(--muted); line-height:1.5; min-height:33px }
.rule-input-wrap { display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:10px; border-top:1px solid #edf1f6; cursor:text }
.input-prefix { font-size:11.5px; color:var(--text2) }
.rule-input-wrap input[type="number"] { width:88px; height:35px; border:1px solid var(--border-strong); border-radius:7px; padding:0 8px; font-size:13px; font-weight:650; text-align:center; color:var(--text); font-variant-numeric:tabular-nums; outline:none }
.rule-input-wrap input[type="number"]:focus { border-color:var(--blue); box-shadow:0 0 0 2px #2878fa20 }
.input-suffix { font-size:11.5px; color:var(--text2); font-weight:580 }
.cleanup-option-card { border:1px solid var(--border); border-radius:10px; background:#fdfdfe; padding:12px 16px }
.cleanup-media-check { margin:0; align-items:flex-start }
.cleanup-media-check input { margin-top:2px; flex:none }
.option-copy strong { font-size:12px; color:var(--text); display:block }
.option-copy span { font-size:11px; color:var(--muted); display:block; margin-top:3px; line-height:1.55 }
.cleanup-safety-callout { display:flex; gap:12px; align-items:flex-start; background:#fdf9f2; border:1px solid #fae9c9; border-radius:8px; padding:12px 14px }
.cleanup-safety-callout .callout-icon { color:#c88718; flex:none; margin-top:1px }
.callout-copy strong { font-size:11.5px; color:#8e5807; display:block }
.callout-copy p { margin:2px 0 0; font-size:11px; color:#9c6c1f; line-height:1.55 }
.card-action-bar { display:flex; justify-content:flex-end; padding-top:4px }

/* Settings: Presets & Defaults Panel */
.ptlgs-defaults-panel .section-heading { border-bottom:1px solid #edf1f6 }
.presets-card-body { padding:18px 20px 22px; display:grid; gap:20px }
.preset-section { padding-top:18px; border-top:1px solid #edf1f6; display:grid; gap:12px }
.preset-mode-group { padding-top:0; border-top:0 }
.preset-section-title { display:flex; flex-direction:column; gap:3px }
.preset-section-title strong { font-size:13px; font-weight:700; color:var(--text) }
.preset-section-title small { font-size:11px; color:var(--muted) }
.preset-mode-field select { max-width:340px }
.preset-active-hint { margin:8px 0 0; font-size:11.5px; padding:10px 14px; border-radius:8px; border-left:3px solid #2678fa; background:#f2f7ff; color:#1e529a; line-height:1.6 }
.preset-fields-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px }
.anon-row { margin:0 }
.tag-details { border:1px solid var(--border); border-radius:10px; background:#fff; padding:12px 16px }
.tag-details summary { cursor:pointer; font-size:12px; font-weight:650; display:flex; justify-content:space-between; align-items:center; user-select:none }
.summary-label { color:var(--text); font-weight:680 }
.summary-action { font-size:10.5px; color:var(--blue); font-weight:500 }
.tag-picker { display:grid; grid-template-columns:repeat(auto-fill,minmax(125px,1fr)); gap:6px 12px; margin-top:14px; padding-top:12px; border-top:1px solid #edf1f6 }
.tag-picker .checklabel { margin:0; padding:3px 0; min-height:24px }
.tag-picker .checklabel span { font-size:12px }
.restricted-tag-confirm-box { margin-top:12px; padding:10px 12px; background:#fffaf0; border:1px solid #fae7c0; border-radius:8px; font-size:11px }
.restricted-tag-confirm-box .detail-help { margin:0 0 6px; color:#9c6c1f }
.restricted-tag-confirm-box .checklabel { margin:0 }
.rights-confirm-card { border:1px solid #cfe2fd; border-radius:10px; background:#f5f9ff; padding:14px 16px }
.rights-confirm-card .checklabel { margin:0; align-items:flex-start }
.rights-copy strong { font-size:12px; color:#1d4f94; display:block }
.rights-copy p { margin:2px 0 0; font-size:11px; color:#4369a1; line-height:1.55 }
.bbcode-editor-card { border:1px solid var(--border-strong); border-radius:10px; overflow:hidden; background:#fff }
.description-toolbar { background:#f7f9fc; border-bottom:1px solid var(--border); padding:8px 12px; display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.tb-group { display:inline-flex; align-items:center; gap:3px; background:#fff; border:1px solid #dce4ee; border-radius:6px; padding:2px }
.tb-group button { height:26px; border:0; background:transparent; color:#43546f; padding:0 8px; border-radius:4px; font-size:11.5px; cursor:pointer }
.tb-group button:hover { background:#eef4fc; color:var(--blue-dark) }
.tb-group label { display:inline-flex; align-items:center; gap:4px; padding:0 4px 0 6px; font-size:11px; color:#5c6f89 }
.tb-group input[type=color] { width:32px; height:24px; border:1px solid #dce4ee; border-radius:4px; padding:1px; background:#fff; cursor:pointer }
.tb-group select { height:26px; border:1px solid #dce4ee; border-radius:4px; background:#fff; color:#43546f; padding:0 4px; font-size:11px }
.description-field { margin:0 }
.description-input { border:0; border-radius:0; padding:12px 14px; width:100%; min-height:190px; font:12px/1.6 "Cascadia Code",Consolas,monospace; background:transparent; outline:none; color:var(--text); resize:vertical }
.desc-preview-container { border:1px solid var(--border); border-radius:10px; background:#fff; padding:12px 16px; margin-top:12px }
.desc-preview-head { display:flex; justify-content:space-between; align-items:center; gap:12px }
.preview-title-wrap strong { font-size:12px; color:var(--text); display:block }
.preview-title-wrap .detail-help { margin:2px 0 0; font-size:10.5px; color:var(--muted) }
#desc-preview-frame { width:100%; height:260px; border:1px solid var(--border-strong); border-radius:8px; background:#fff; margin-top:10px; box-shadow:inset 0 1px 3px rgba(0,0,0,.03) }
#desc-preview-frame[hidden] { display:none }

@media (max-width:1300px) {
  .service-tiles-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .pipeline-params-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .preset-fields-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}

@media (max-width:800px) {
  .live-updates-grid { grid-template-columns: 1fr }
  .history-toolbar { flex-wrap:wrap }
  .history-toolbar .search-field { max-width:none; flex:1 0 100% }
  .history-toolbar select { flex:1 }
  .history-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
  .settings-layout { gap:14px }
  .service-tiles-grid { grid-template-columns:1fr }
  .pipeline-params-grid { grid-template-columns:1fr }
  .cleanup-rules-grid { grid-template-columns:1fr }
  .rule-input-wrap { flex-wrap:wrap }
  .preset-fields-grid { grid-template-columns:1fr }
  .tag-picker { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .description-toolbar { gap:6px }
  .card-action-bar button { width:100% }
}
@media (max-width:430px) { .history-grid { grid-template-columns:minmax(0,1fr) } }
.workspace.has-detail.editing-job {grid-template-columns:204px minmax(220px,1fr) minmax(590px,670px)}

/* Manual folder intake: explicit path input without upload/copying media. */
.manual-add-dialog {
  position: fixed; inset: 0; margin: auto; width: min(550px,calc(100vw - 24px));
  max-height: min(85vh,740px); overflow: auto; border: 1px solid var(--border-strong);
  border-radius: 16px; background: var(--surface); color: var(--text); padding: 0;
  box-shadow: 0 24px 75px #13274f40;
}
.manual-add-dialog::backdrop { background: #15294682; backdrop-filter: blur(3px); }
.manual-add-dialog form { margin: 0; }
.manual-dialog-head { display: flex; align-items: center; gap: 12px;
  padding: 20px 22px; border-bottom: 1px solid var(--border); }
.manual-dialog-head > div { flex: 1; min-width: 0; }
.manual-dialog-head h2 { font-size: 17px; font-weight: 740; letter-spacing: -.25px; margin: 0 0 4px; }
.manual-dialog-head p { color: var(--muted); margin: 0; font-size: 11px; }
.manual-dialog-icon { width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 10px; background: var(--soft-blue); color: var(--blue); }
.manual-dialog-body { padding: 22px; display: grid; gap: 9px; }
.manual-dialog-body label { color: var(--text2); font-weight: 680; font-size: 12px; }
.manual-dialog-body input { display: block; width: 100%; padding: 12px 13px;
  font: 12px/1.5 "Cascadia Code", Consolas, monospace;
  border: 1px solid var(--border-strong); border-radius: 9px; outline: none; }
.manual-dialog-body input[type="checkbox"],.manual-dialog-body input[type="radio"] {
  display:inline-block; width:auto; padding:0; margin:2px 3px 3px 0;
}
.manual-dialog-body input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px #2878fa1c; }
.manual-dialog-help,.manual-allowed-roots { margin: 0; color: #8290a7; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.manual-allowed-roots { color: #4a6688; }
.manual-dialog-notice { margin: 10px 0 0; padding: 11px 13px; color: #4e6280;
  background: #f4f8ff; border-radius: 8px; font-size: 11px; line-height: 1.7; }
.manual-form-error { margin: 0; padding: 9px 11px; background: #fff0f2;
  color: #b33849; border-radius: 8px; font-size: 12px; }
.manual-dialog-actions { display: flex; justify-content: flex-end; gap: 9px;
  padding: 15px 22px 20px; border-top: 1px solid var(--border); }
@media (max-width:800px) {
  .header-actions .hide-sm { display: none; }
  .manual-dialog-head,.manual-dialog-body,.manual-dialog-actions { padding-left: 16px; padding-right: 16px; }
}

/* PTLGS BBCode preset editor: render via site's own preview.php inside a sandbox. */
.ptlgs-defaults-panel .description-heading {margin:22px 0 8px}
.description-toolbar {display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:12px 0 10px}
.description-toolbar button {min-height:32px;border:1px solid #dce5ef;border-radius:7px;background:#fff;color:#415577;font-size:12px;padding:5px 10px;cursor:pointer}
.description-toolbar button:hover {border-color:#8aaff0;background:#f1f7ff}
.description-toolbar label {display:inline-flex;align-items:center;gap:5px;color:#526886;font-size:11px}
.description-toolbar input[type=color] {width:42px;height:32px;border:1px solid #dce5ef;border-radius:6px;padding:2px;background:#fff;cursor:pointer}
.description-toolbar select {height:32px;border:1px solid #dce5ef;border-radius:6px;background:#fff;color:#415577;padding:3px 6px}
.ptlgs-defaults-panel textarea.description-input {max-width:100%;min-height:205px;resize:vertical;font:12px/1.65 "Cascadia Code",Consolas,monospace}
.desc-preview-head {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:12px 0 8px}
.desc-preview-head strong {font-size:12px;color:#253f60}
#desc-preview-frame {width:100%;height:320px;border:1px solid #ccd8e7;border-radius:8px;background:#fff;box-shadow:inset 0 1px 3px #ccd8e733;margin-bottom:12px}
#desc-preview-frame[hidden] {display:none}

/* Login page */
.login-body {min-height:100dvh;display:grid;place-items:center;padding:28px 18px;background:radial-gradient(120% 95% at 12% 0%,#eef5ff 0%,var(--bg) 58%)}
.login-shell {width:100%;max-width:390px}
.login-card {background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 46px rgba(33,60,103,.09);padding:28px 30px 22px}
.login-brand {display:flex;align-items:center;gap:12px;margin-bottom:22px}
.login-card h1 {font-size:21px;margin:5px 0 7px}
.login-hint {margin:0 0 19px;color:#8997ac;font-size:12px;line-height:1.65}
.login-form {display:grid;gap:13px}
.login-field {display:grid;gap:6px}
.login-field span {font-size:11px;font-weight:660;color:#566579}
.login-field input {height:38px;padding:0 12px;font-size:13px;color:var(--text);background:#fff;
  border:1px solid var(--border-strong);border-radius:9px;outline:none}
.login-field input:focus {border-color:#80b2ff;box-shadow:0 0 0 3px #c2ddff66}
.login-error {margin:0;padding:9px 11px;border-radius:8px;background:#fff0f2;color:#b33849;font-size:11px;font-weight:600}
.login-form .button.primary {min-height:40px;margin-top:3px}
.login-footnote {margin:17px 0 0;color:#9ba6b8;font-size:10px;text-align:center}
@media (max-width:420px) {.login-card {padding:24px 20px 18px}}