:root {
  --ink: #17253a;
  --muted: #718097;
  --line: #dfe6ef;
  --soft: #f4f7fb;
  --paper: #ffffff;
  --navy: #173f6b;
  --blue: #2e76b8;
  --cyan: #54b8c4;
  --orange: #f08b57;
  --violet: #7569d8;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --shadow: 0 18px 55px rgba(34, 58, 86, .10);
  --tile-gap: 12px;
  --tile-min: 128px;
  --stack-gap: 16px;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: #eef3f8;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
select { appearance: none; -webkit-appearance: none; border-color: #c8d8e7 !important; border-radius: 14px !important; color: #294f76; background-image: linear-gradient(45deg, transparent 50%, #6685a2 50%), linear-gradient(135deg, #6685a2 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px !important; }
select option { color: var(--ink); background: #fff; }
.hidden { display: none !important; }
.eyebrow { margin: 0 0 8px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 12px; font-size: clamp(32px, 4vw, 56px); line-height: 1.08; letter-spacing: -.045em; }
h2 { margin-bottom: 4px; font-size: 23px; letter-spacing: -.025em; }
.lead { color: var(--muted); font-size: 16px; line-height: 1.75; max-width: 680px; }
.primary, .secondary, .text-button, .icon-button { border: 0; border-radius: 12px; transition: .2s ease; }
.primary { padding: 13px 19px; color: white; background: linear-gradient(135deg, var(--navy), var(--blue)); box-shadow: 0 9px 22px rgba(33, 91, 145, .2); font-weight: 750; }
.primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(33, 91, 145, .26); }
.secondary { padding: 10px 14px; border: 1px solid var(--line); background: white; color: var(--ink); font-weight: 700; }
.secondary:hover { border-color: #aac1da; color: var(--blue); }
.text-button { background: transparent; color: var(--blue); font-weight: 750; }
.full { width: 100%; }

.login-gate { min-height: 100%; display: grid; grid-template-columns: minmax(380px, 540px) 1fr; background: #f7fafc; }
.login-card { display: flex; flex-direction: column; justify-content: center; padding: clamp(44px, 8vw, 110px); background: white; position: relative; z-index: 2; box-shadow: 22px 0 70px rgba(28, 54, 80, .08); }
.brand-mark { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 34px; border-radius: 18px; color: white; background: linear-gradient(145deg, #173c67, #57b7c3); font: 800 26px Georgia, serif; box-shadow: 0 15px 35px rgba(34, 94, 142, .24); }
.brand-mark.small { width: 38px; height: 38px; margin: 0; border-radius: 11px; font-size: 18px; }
.login-card h1 { font-size: clamp(36px, 4vw, 55px); }
.login-copy { color: var(--muted); line-height: 1.7; margin-bottom: 30px; }
.login-card form { display: grid; gap: 15px; }
.login-card label { display: grid; gap: 7px; color: #526279; font-size: 13px; font-weight: 700; }
.login-card input { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; outline: 0; background: var(--soft); }
.login-card input:focus { border-color: #6aa2d0; box-shadow: 0 0 0 3px rgba(69, 133, 189, .12); }
.feishu-login { margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); text-align: center; text-decoration: none; font-weight: 700; }
.feishu-login.unavailable { color: #8b98a8; background: #f5f7fa; border-style: dashed; }
.form-error { min-height: 20px; margin: 12px 0 0; color: #c24f45; font-size: 13px; }
.login-art { overflow: hidden; position: relative; background: radial-gradient(circle at 30% 30%, #6dc8cf 0, #356e9a 34%, #163452 75%); }
.login-art::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 60px 60px; }
.art-orbit { position: absolute; border: 1px solid rgba(255,255,255,.23); border-radius: 50%; }
.orbit-one { width: 760px; height: 760px; left: 10%; top: 5%; }
.orbit-two { width: 440px; height: 440px; left: 29%; top: 25%; }
.art-card { position: absolute; width: 210px; height: 270px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255,255,255,.28); border-radius: 24px; color: white; background: rgba(255,255,255,.12); backdrop-filter: blur(20px); box-shadow: 0 28px 80px rgba(5, 25, 44, .22); }
.art-card span { font: 500 54px Georgia, serif; opacity: .45; }
.art-card strong { font-size: 19px; }
.card-a { left: 14%; top: 17%; transform: rotate(-8deg); }
.card-b { left: 43%; top: 34%; transform: rotate(6deg); }
.card-c { right: 9%; top: 12%; transform: rotate(13deg); }

.app-shell { height: 100%; background: radial-gradient(circle at 8% 4%, rgba(84,184,196,.14), transparent 26%), radial-gradient(circle at 92% 95%, rgba(117,105,216,.10), transparent 28%), #eef3f8; }
.topbar { height: 72px; display: grid; grid-template-columns: 230px 1fr 210px; align-items: center; gap: 20px; padding: 0 26px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand strong { display: block; font-size: 13px; letter-spacing: .09em; }
.brand span { display: block; color: var(--muted); font-size: 8px; letter-spacing: .14em; margin-top: 3px; }
.workspace-nav { height: 100%; display: flex; justify-content: center; gap: 3px; overflow-x: auto; scrollbar-width: none; }
.workspace-nav button { position: relative; padding: 0 15px; border: 0; color: #65768c; background: transparent; white-space: nowrap; font-size: 13px; font-weight: 720; }
.workspace-nav button::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 0; height: 3px; border-radius: 4px 4px 0 0; background: var(--blue); transform: scaleX(0); transition: .25s; }
.workspace-nav button.active { color: var(--navy); }
.workspace-nav button.active::after { transform: scaleX(1); }
.account { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.account strong, .account small { display: block; max-width: 125px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account strong { font-size: 12px; }.account small { color: var(--muted); font-size: 10px; margin-top: 2px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #35aa78; box-shadow: 0 0 0 4px rgba(53,170,120,.13); }
.icon-button { width: 34px; height: 34px; background: var(--soft); color: var(--muted); }

.slider-viewport { height: calc(100% - 72px); overflow: hidden; touch-action: pan-y; }
.slider-track { height: 100%; display: flex; transition: transform .58s cubic-bezier(.22,.84,.28,1); will-change: transform; }
.workspace { height: 100%; flex: 0 0 100%; overflow-y: auto; overscroll-behavior: contain; }
.workspace-inner { width: min(1480px, calc(100% - 96px)); min-height: 100%; margin: auto; padding: 48px 0 64px; }
.workspace-heading, .hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 30px; }
.workspace-heading h1, .hero-row h1 { font-size: clamp(36px, 4.2vw, 62px); }
.hero-row > div { max-width: 750px; }
.panel { padding: 26px; border: 1px solid rgba(210,220,233,.9); border-radius: var(--radius-lg); background: rgba(255,255,255,.92); box-shadow: var(--shadow); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.panel:hover { border-color: rgba(139,174,207,.72); box-shadow: 0 22px 64px rgba(34,58,86,.13); }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
.panel-head-tools { display: flex; align-items: center; gap: 8px; }
.panel-head-tools select {
  min-height: 30px;
  padding: 4px 28px 4px 8px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 650;
  line-height: 1.2;
  background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50% !important;
  background-size: 4px 4px, 4px 4px !important;
}
#taskPageSize, #assetPageSize { min-width: 52px; width: 52px; text-align: center; }
#taskFilter { min-width: 96px; max-width: 120px; }
.panel-head h2 { margin: 0; }
.chip { display: inline-flex; align-items: center; padding: 7px 10px; border-radius: 999px; color: #53677e; background: #edf2f7; font-size: 11px; font-weight: 750; white-space: nowrap; }
.chip.success { color: #187052; background: #e4f6ee; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 28px 0; }
.metric { min-height: 160px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: 0 10px 30px rgba(37,62,91,.06); }
.metric span, .metric small { display: block; color: var(--muted); }
.metric span { font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.metric strong {
  display: block;
  margin: 18px 0 12px;
  font: 700 clamp(28px, 3.2vw, 42px)/1 "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  font-feature-settings: "tnum" 1;
}
.metric small { font-size: 11px; }
.metric.accent { color: white; border-color: transparent; background: linear-gradient(145deg, #173d67, #2e76b8); }.metric.accent span, .metric.accent small { color: rgba(255,255,255,.72); }
.dashboard-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 20px; }
.dashboard-grid--solo { grid-template-columns: 1fr; }
.compact-list { display: grid; gap: 10px; }
.compact-task, .task-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 13px 15px; border: 1px solid #e7edf4; border-radius: 13px; background: #fafcfe; }
.compact-task strong, .task-row strong { font-size: 13px; }.compact-task span, .task-row span { color: var(--muted); font-size: 11px; }
.system-lines { display: grid; gap: 2px; }
.system-lines div { padding: 13px 0; display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid #edf1f5; }
.system-lines span { color: var(--muted); font-size: 12px; }.system-lines strong { text-align: right; font-size: 12px; }

.guide-dialog { width: min(1080px, 94vw); max-height: 92vh; padding: 0; overflow: hidden; border: 1px solid rgba(215,226,237,.88); background: linear-gradient(180deg, #ffffff, #f7fbff); box-shadow: 0 30px 90px rgba(29,53,82,.24); }
.guide-dialog::backdrop { background: rgba(16,27,42,.56); backdrop-filter: blur(8px); }
.guide-dialog-head { padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #fff; background: linear-gradient(135deg, #173d67, #2e76b8 65%, #54b8c4); }
.guide-dialog-head h2 { margin: 0; color: #fff; }
.guide-dialog-head .eyebrow { color: rgba(255,255,255,.78); }
.guide-dialog-body { padding: 22px 24px 10px; overflow: auto; max-height: calc(92vh - 142px); }
.guide-hero { padding: 20px; border-radius: 18px; border: 1px solid #d6e4f0; background: linear-gradient(145deg, #ffffff, #eef6fb); box-shadow: 0 12px 28px rgba(33,65,100,.06); }
.guide-hero h2 { margin-bottom: 10px; font-size: 28px; }
.guide-lead { margin-bottom: 10px; color: #214463; font-size: 16px; font-weight: 700; }
.guide-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.guide-card { padding: 16px; border: 1px solid #dfe8f1; border-radius: 16px; background: #fff; box-shadow: 0 8px 20px rgba(32,57,88,.05); }
.guide-card strong { display: block; margin-bottom: 8px; color: var(--navy); font-size: 13px; }
.guide-card p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 12px; }
.guide-changelog-card { margin-top: 18px; }
.guide-changelog { display: grid; gap: 10px; margin-top: 10px; }
.guide-changelog article { padding: 12px 13px; border-radius: 13px; background: #f7fbfe; border: 1px solid #e1ebf3; }
.guide-changelog article strong { display: block; margin-bottom: 4px; font-size: 12px; }
.guide-changelog article p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.guide-footer { margin-top: 18px; }
.guide-preview { display: grid; gap: 10px; }
.guide-preview strong { color: var(--navy); font-size: 14px; }
.guide-preview p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 12px; }
.guide-action-row { display: flex; flex-wrap: wrap; gap: 8px; }
.guide-action-row .secondary { text-decoration: none; }

.issue-hero { padding: 22px 24px; margin-bottom: 18px; border-radius: 20px; background: linear-gradient(135deg, #173d67, #2e76b8 58%, #54b8c4); color: #fff; box-shadow: 0 18px 50px rgba(28,66,108,.2); }
.issue-hero h2 { color: #fff; }
.issue-hero p { color: rgba(255,255,255,.82); }
.issue-hero-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.issue-stats { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.issue-stat { min-width: 104px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(255,255,255,.12); backdrop-filter: blur(10px); }
.issue-stat strong { display: block; font-size: 22px; line-height: 1.1; }
.issue-stat span { color: rgba(255,255,255,.78); font-size: 10px; }
.issue-filters { margin-top: 14px; display: grid; grid-template-columns: 180px 180px 180px 1fr; gap: 10px; }
.issue-filters input, .issue-filters select { min-width: 0; padding: 11px 13px; border: 1px solid #ccd9e6; border-radius: 12px; background: rgba(255,255,255,.95); }
.issue-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) 360px; gap: 18px; margin-top: 18px; }
.issue-list { display: grid; gap: 12px; align-content: start; }
.issue-card { padding: 16px; border: 1px solid #dbe4ee; border-radius: 18px; background: #fff; box-shadow: 0 10px 24px rgba(35,64,97,.06); }
.issue-card-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.issue-card-head h3 { margin: 0 0 6px; font-size: 16px; }
.issue-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.issue-body { color: var(--muted); line-height: 1.7; font-size: 12px; }
.issue-card-actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.issue-like, .issue-comment-toggle { padding: 8px 10px; border: 1px solid #cad8e5; border-radius: 10px; background: #f7fbfe; color: #315f88; font-size: 10px; font-weight: 750; }
.issue-like.active { color: #187052; border-color: #9ad0bb; background: #e8f6ef; }
.issue-comments { margin-top: 14px; display: grid; gap: 10px; }
.issue-comment { padding: 11px 12px; border-radius: 12px; background: #f8fbfd; border: 1px solid #e2ebf3; }
.issue-comment header { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 6px; }
.issue-comment header strong { font-size: 11px; }
.issue-comment p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.issue-comment-form { display: grid; gap: 10px; }
.issue-mention-hint { color: var(--muted); font-size: 10px; }
.issue-sidebar { display: grid; gap: 14px; align-content: start; }
.issue-form-actions { display: flex; justify-content: flex-end; }
.issue-note p { color: var(--muted); font-size: 12px; line-height: 1.65; }
.issue-chip { display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 999px; background: #edf4fa; color: #305b7e; font-size: 10px; font-weight: 750; }
.issue-chip.open { color: #1f6d54; background: #e4f6ee; }
.issue-chip.planned { color: #7a5d1f; background: #f7efd9; }
.issue-chip.in_progress { color: #8d5a1a; background: #faedd8; }
.issue-chip.done { color: #186f53; background: #e1f6ec; }

@media (max-width: 1100px) {
  .issue-layout { grid-template-columns: 1fr; }
  .issue-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .issue-hero-content { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .guide-grid { grid-template-columns: 1fr; }
  .issue-filters { grid-template-columns: 1fr; }
  .issue-hero { padding: 18px; }
  .guide-dialog-body { max-height: calc(100vh - 148px); }
}

.split-layout { display: grid; grid-template-columns: 285px minmax(0, 1fr); gap: 26px; }
.context-rail { padding: 12px 4px; }
.context-rail h1 { font-size: 45px; }
.context-rail > p:not(.eyebrow) { color: var(--muted); line-height: 1.7; }
.step-list { list-style: none; margin: 40px 0; padding: 0; counter-reset: steps; }
.step-list li { position: relative; padding: 13px 0 13px 42px; color: #8b98a9; font-size: 13px; font-weight: 750; }
.step-list li::before { counter-increment: steps; content: "0" counter(steps); position: absolute; left: 0; color: #9aacbe; font: 600 11px Georgia, serif; }
.step-list li.active { color: var(--navy); }.step-list li.active::before { color: var(--blue); }
.rail-note, .inline-notice { padding: 17px; border: 1px solid #d8e5f2; border-radius: 16px; background: #edf5fb; }
.rail-note strong, .inline-notice strong { font-size: 12px; }.rail-note p { margin: 7px 0 0; color: #647b91; font-size: 11px; line-height: 1.6; }
.creation-panel { min-height: 610px; }
.step-pane { display: none; animation: pane-in .3s ease; }.step-pane.active { display: block; }
@keyframes pane-in { from { opacity: 0; transform: translateX(14px); } }
.field { display: grid; gap: 8px; }
.field > span { color: #53647a; font-size: 12px; font-weight: 750; }
.field input, .field textarea, .field select, .panel-head select { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); outline: 0; color: var(--ink); background: linear-gradient(180deg, #fff, #f7fafe); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease; }
.field select, .panel-head select { appearance: none; -webkit-appearance: none; cursor: pointer; color: #294f76; border-color: #c8d8e7; background-color: #f5f9fd; background-image: linear-gradient(45deg, transparent 50%, #6685a2 50%), linear-gradient(135deg, #6685a2 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; box-shadow: inset 0 1px 0 rgba(255,255,255,.85); }
.field select option, .panel-head select option { color: var(--ink); background: #fff; }
.field textarea { resize: vertical; line-height: 1.65; }.field input:hover, .field textarea:hover, .field select:hover, .panel-head select:hover { border-color: #a8c2db; background: #fff; }.field input:focus, .field textarea:focus, .field select:focus, .panel-head select:focus { border-color: #64a4d5; background: #fff; box-shadow: 0 0 0 4px rgba(59,126,181,.12), 0 8px 22px rgba(42,91,136,.08); }
.field.wide { margin-bottom: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 18px 0; }
.dropzone { min-height: 190px; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px dashed #8fb2d1; border-radius: var(--radius-lg); background: linear-gradient(145deg, #f8fbff, #eef6fc); text-align: center; cursor: pointer; transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, background .24s ease; }
.dropzone:hover { transform: translateY(-3px); border-color: var(--cyan); background: linear-gradient(145deg, #f6fcfd, #eaf6f8); box-shadow: 0 16px 34px rgba(41,101,137,.12); }
.dropzone.has-preview { justify-content: flex-start; min-height: 220px; border-style: solid; border-color: #8cb9d8; background: linear-gradient(145deg, #fff, #f0f8fd); }
.dropzone.has-preview > .upload-icon { width: 32px; height: 32px; margin-bottom: 0; font-size: 18px; }
.upload-preview { width: 100%; display: grid; gap: 10px; margin-top: 8px; }
.upload-preview-status { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #315f86; font-size: 11px; flex-wrap: wrap; }
.upload-preview-status span { padding: 4px 8px; border-radius: 999px; color: #177154; background: #e2f5ed; font-weight: 750; }
.upload-preview-status .suite-clear-assets { margin-left: auto; color: #b42318; font-weight: 700; }
.upload-preview-strip { display: flex; gap: 9px; width: 100%; padding: 2px 1px 7px; overflow-x: auto; scrollbar-width: thin; }
.upload-preview figure { position: relative; flex: 0 0 104px; min-width: 0; margin: 0; overflow: hidden; border: 1px solid #d9e6f0; border-radius: 13px; background: #fff; box-shadow: 0 6px 14px rgba(34,72,108,.08); }
.upload-preview img { width: 100%; height: 82px; display: block; object-fit: cover; background: #edf2f6; }
.upload-preview figcaption { padding: 6px 7px; overflow: hidden; color: #61758b; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.upload-preview-remove { position: absolute; top: 5px; right: 5px; z-index: 2; width: 24px; height: 24px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.75); border-radius: 50% !important; color: #fff; background: rgba(27,42,60,.78); box-shadow: 0 4px 10px rgba(15,29,43,.2); font-size: 18px; line-height: 1; backdrop-filter: blur(5px); }.upload-preview-remove:hover { color: #fff; background: #d5525f; transform: scale(1.08); }
.upload-preview-more { min-height: 108px; display: grid; place-items: center; border-radius: 13px; color: var(--blue); background: #e8f2fa; font-weight: 800; }
.mask-preview .upload-preview-strip { background-color: #fff; background-image: linear-gradient(45deg, #dfe5eb 25%, transparent 25%), linear-gradient(-45deg, #dfe5eb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #dfe5eb 75%), linear-gradient(-45deg, transparent 75%, #dfe5eb 75%); background-position: 0 0, 0 8px, 8px -8px, -8px 0; background-size: 16px 16px; border-radius: 14px; padding: 6px; }
.dropzone.compact { min-height: 250px; }
.dropzone input { display: none; }.dropzone small { color: var(--muted); }.upload-icon { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 6px; border-radius: 50%; color: white; background: var(--blue); font-size: 24px; }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 22px; }
.choice { padding: 20px; display: grid; gap: 7px; border: 1px solid var(--line); border-radius: 15px; background: white; cursor: pointer; }.choice input { display: none; }.choice strong { font-size: 14px; }.choice span { color: var(--muted); font-size: 11px; }.choice.active { border-color: #6ca2ce; background: #f0f7fc; box-shadow: inset 0 0 0 1px #6ca2ce; }
.form-actions { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.review-card { min-height: 250px; padding: 22px; border-radius: 16px; background: #f4f7fa; line-height: 1.8; }
.review-card dl { display: grid; grid-template-columns: 110px 1fr; gap: 10px; margin: 0; }.review-card dt { color: var(--muted); }.review-card dd { margin: 0; font-weight: 700; }
.confirm-line { display: flex; align-items: center; gap: 9px; margin: 18px 0; color: #5c6e83; font-size: 12px; }
.panel-subtitle { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.market-grid { grid-template-columns: repeat(4, 1fr); }
.suite-upload-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.suite-upload { min-height: 178px; }
.raw-upload { background: #f1f8f6; border-color: #8dbfb1; }
.raw-upload .upload-icon { background: #33846f; }
.logo-upload { background: #f8f6fb; border-color: #b8add2; }
.logo-upload .upload-icon { background: #665688; }
.suite-component-list { display: grid; gap: 16px; margin-bottom: 20px; }
.suite-component { padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: #f9fbfd; box-shadow: 0 7px 20px rgba(39,62,88,.045); }
.component-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 16px; }
.component-number { display: flex; align-items: center; gap: 10px; }
.component-number span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: white; background: var(--navy); font: 700 11px Georgia, serif; }
.component-number strong { font-size: 13px; }
.remove-component { border: 0; color: #a65b55; background: transparent; font-size: 12px; font-weight: 750; }
.component-fields { display: grid; grid-template-columns: 1.2fr 1fr 110px; gap: 13px; }
.component-body { display: grid; grid-template-columns: 1fr 260px; gap: 14px; margin-top: 14px; }
.component-reference { min-height: 118px; padding: 16px; }
.component-reference .upload-icon { width: 32px; height: 32px; font-size: 18px; }

.operation-tabs { display: flex; gap: 8px; margin-bottom: 22px; overflow-x: auto; }
.operation-tabs button, .batch-modes button { padding: 12px 16px; border: 1px solid var(--line); border-radius: 999px; color: #617287; background: rgba(255,255,255,.9); white-space: nowrap; font-weight: 750; transition: transform .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.operation-tabs button:hover, .batch-modes button:hover { transform: translateY(-2px); color: var(--blue); border-color: #9dbdd8; box-shadow: 0 8px 18px rgba(39,91,137,.10); }
.operation-tabs button.active, .batch-modes button.active { border-color: transparent; color: white; background: linear-gradient(135deg, var(--navy), var(--blue) 62%, var(--cyan)); box-shadow: 0 9px 22px rgba(33,91,145,.22); }
.single-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 22px; }
.single-grid .panel { min-height: 420px; }
.single-history-panel {
  margin-top: 28px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(196, 214, 230, .95);
  background:
    radial-gradient(1200px 280px at 8% -10%, rgba(94, 156, 214, .14), transparent 55%),
    linear-gradient(180deg, #f8fbfe 0%, #ffffff 42%, #f5f8fb 100%);
  box-shadow: 0 18px 40px rgba(36, 70, 104, .08);
}
.single-history-panel .panel-head {
  padding: 22px 24px 14px;
  border-bottom: 1px solid rgba(214, 226, 238, .9);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,251,254,.65));
}
.single-history-panel .panel-head h2 { letter-spacing: -.02em; }
.single-history-panel .panel-head small { display: block; margin-top: 6px; color: var(--muted); line-height: 1.55; max-width: 52ch; }
.single-history-panel #singleHistoryToolbar {
  margin: 0;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(214, 226, 238, .75);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(8px);
}
.single-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
  min-height: 160px;
  padding: 20px 24px 8px;
}
.single-history-grid.empty-state {
  display: grid;
  place-items: center;
  min-height: 220px;
  color: var(--muted);
  background:
    linear-gradient(135deg, rgba(255,255,255,.35), transparent),
    repeating-linear-gradient(-12deg, transparent, transparent 10px, rgba(46, 118, 184, .03) 10px, rgba(46, 118, 184, .03) 11px);
}
.single-history-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(205, 220, 234, .95);
  border-radius: 18px;
  background: #fff;
  display: grid;
  grid-template-rows: auto 1fr;
  box-shadow: 0 10px 24px rgba(34, 68, 102, .06);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.single-history-card.is-enter {
  transform: translateY(8px);
  opacity: 0;
  animation: singleHistoryCardIn .45s ease forwards;
  animation-delay: var(--card-delay, 0ms);
}
@keyframes singleHistoryCardIn {
  to { transform: translateY(0); opacity: 1; }
}
.single-history-card:hover {
  transform: translateY(-4px);
  border-color: #9fbfd8;
  box-shadow: 0 18px 34px rgba(34, 68, 102, .12);
}
.single-history-card.is-selected {
  border-color: #6fa8d4;
  box-shadow: 0 0 0 1px rgba(46, 118, 184, .28), 0 16px 30px rgba(34, 68, 102, .12);
}
.single-history-card-check {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(255,255,255,.94);
  border: 1px solid #c9d9e7;
  box-shadow: 0 6px 14px rgba(28,55,84,.14);
  cursor: pointer;
}
.single-history-card-check.is-disabled { opacity: .38; cursor: not-allowed; }
.single-history-preview {
  all: unset;
  cursor: pointer;
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, #e8eef5, #f7fafc 48%, #e7eef6);
}
.single-history-preview img,
.single-history-thumb-empty {
  width: 100%;
  aspect-ratio: 1.05;
  display: block;
  object-fit: cover;
  background: #edf2f6;
  transition: transform .35s ease;
}
.single-history-card:hover .single-history-preview img { transform: scale(1.035); }
.single-history-thumb-empty {
  display: grid;
  place-items: center;
  color: #7e95aa;
  font-size: 13px;
  font-weight: 650;
}
.single-history-preview-mask {
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  display: grid;
  align-items: end;
  justify-items: start;
  padding: 12px;
  background: linear-gradient(180deg, transparent, rgba(18, 38, 58, .42));
  opacity: 0;
  transition: opacity .24s ease;
}
.single-history-preview-mask span {
  color: #fff;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
}
.single-history-card:hover .single-history-preview-mask { opacity: 1; }
.single-history-card footer {
  padding: 12px 13px 14px;
  display: grid;
  gap: 8px;
  background: linear-gradient(180deg, #fff, #f8fbfe);
}
.single-history-card-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.single-history-op {
  display: inline-flex;
  align-items: center;
  max-width: 60%;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef5fb;
  color: #2f628f;
  border: 1px solid #d5e5f2;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.single-history-card footer strong {
  font-size: 13px;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.single-history-time { color: var(--muted); font-size: 11px; }
.single-history-panel #singleHistoryPaging {
  margin: 8px 24px 22px;
  border-radius: 14px;
  background: rgba(255,255,255,.8);
}
.paging-pages { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.paging-page {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid #c9d9e7;
  border-radius: 10px;
  background: #fff;
  color: #2f5678;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: .18s ease;
}
.paging-page:hover { border-color: #8fb4d4; color: var(--blue); }
.paging-page.is-active { background: var(--blue); border-color: transparent; color: #fff; }
.paging-page:disabled { opacity: .45; cursor: default; }
.paging-ellipsis { color: var(--muted); font-size: 12px; padding: 0 2px; }
@media (max-width: 900px) {
  .single-history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; gap: 12px; }
  .single-history-panel .panel-head,
  .single-history-panel #singleHistoryToolbar { padding-left: 16px; padding-right: 16px; }
  .single-history-panel #singleHistoryPaging { margin: 8px 16px 18px; }
}
.single-source-panel { min-width: 0; display: grid; align-content: start; gap: 12px; }
.single-dropzone { position: relative; min-height: 520px !important; padding: 30px; overflow: hidden; isolation: isolate; background: linear-gradient(145deg, #f8fbff, #eaf3fa); }
.single-dropzone.source-ready { padding: 0; border-style: solid; border-color: #90b4d1; background: #142236; }
.single-dropzone.source-ready > .upload-icon, .single-dropzone.source-ready > strong, .single-dropzone.source-ready > #singleFileName { opacity: 0; pointer-events: none; }
.single-source-preview { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #142236; }
.single-source-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.single-source-preview::after { content: ""; position: absolute; inset: auto 0 0; height: 34%; pointer-events: none; background: linear-gradient(transparent, rgba(10,23,38,.72)); }
.single-source-caption { position: absolute; left: 18px; right: 54px; bottom: 16px; z-index: 2; display: grid; gap: 3px; color: #fff; text-align: left; }.single-source-caption strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.single-source-caption span { color: rgba(255,255,255,.7); font-size: 10px; }
.single-source-actions { display: flex; gap: 6px; margin-top: 5px; }.single-source-action { padding: 5px 8px; border: 1px solid rgba(255,255,255,.26); border-radius: 8px; color: #fff; background: rgba(255,255,255,.12); font-size: 9px; backdrop-filter: blur(5px); }.single-source-action:hover { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.22); }
.single-source-preview .upload-preview-remove { z-index: 3; top: 13px; right: 13px; }
.single-source-thumbs { padding: 8px; display: flex; gap: 8px; overflow-x: auto; border: 1px solid #d7e3ed; border-radius: 15px; background: rgba(255,255,255,.94); scrollbar-width: thin; }.single-source-thumb { position: relative; flex: 0 0 66px; height: 66px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 11px; background: #e9eff5; }.single-source-thumb.active { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46,118,184,.12); }.single-source-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }.single-source-thumb span { position: absolute; left: 4px; bottom: 4px; padding: 2px 4px; border-radius: 5px; color: #fff; background: rgba(15,29,45,.7); font-size: 8px; }.single-source-thumb i { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(28,39,52,.78); font-size: 13px; font-style: normal; line-height: 1; }.single-source-thumb i:hover { background: #d5525f; }
.single-mask-canvas { position: absolute; left: 50%; top: 50%; z-index: 3; overflow: hidden; transform: translate(-50%, -50%); background: #0d1826; box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 18px 45px rgba(0,0,0,.28); }
.single-mask-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#singleDrawCanvas { z-index: 2; cursor: crosshair; touch-action: none; }
#singleDrawCanvas.mask-hidden { opacity: 0; }
.single-mask-hint { position: absolute; left: 50%; bottom: 12px; z-index: 4; padding: 6px 10px; border-radius: 999px; color: #fff; background: rgba(17,31,47,.72); font-size: 10px; pointer-events: none; transform: translateX(-50%); backdrop-filter: blur(6px); white-space: nowrap; }
.single-mask-tools { padding: 11px 13px; display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, 1.1fr) repeat(5, auto); align-items: center; gap: 9px; border: 1px solid #d5e2ed; border-radius: 16px; background: rgba(255,255,255,.94); box-shadow: 0 9px 24px rgba(35,67,99,.08); }.single-mask-tools > div { display: grid; gap: 2px; }.single-mask-tools strong { font-size: 11px; }.single-mask-tools small { color: var(--muted); font-size: 9px; }.single-mask-tools label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; color: #60748a; font-size: 10px; }.single-mask-tools input { min-width: 80px; accent-color: var(--orange); }.single-mask-tools button { padding: 8px 10px; font-size: 10px; }
.single-output-note { margin: -5px 0 16px; padding: 9px 11px; border-radius: 11px; color: #426987; background: #edf6fb; font-size: 10px; }
.field-hint { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.45; }
#singleForm .confirm-line { margin: 0 0 14px; align-items: flex-start; }
#singleForm .confirm-line span { line-height: 1.45; }
#singleBrushSizeValue { min-width: 28px; color: #2f628f; font-size: 11px; font-weight: 750; font-style: normal; }
.single-brush-cursor {
  position: absolute; z-index: 5; width: 56px; height: 56px; border: 2px solid rgba(239, 76, 96, .95);
  border-radius: 50%; background: rgba(239, 76, 96, .12); pointer-events: none; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.55);
}
#singleDrawCanvas { cursor: none; }
.single-history-empty { display: grid; gap: 6px; place-items: center; text-align: center; color: var(--muted); }
.single-history-empty strong { color: var(--navy); font-size: 14px; }
.single-history-error { color: #a84e47; font-size: 11px; line-height: 1.4; }
.single-history-error.hidden { display: none; }
.single-history-card.is-failed { border-color: #e3b6b1; }
.single-history-card-actions { display: flex; gap: 8px; }
.single-compare-dialog {
  width: min(980px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  padding: 0;
  border: 1px solid #c9d9e7;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 60px rgba(24, 48, 74, .22);
}
.single-compare-dialog::backdrop { background: rgba(14, 28, 44, .48); backdrop-filter: blur(3px); }
.single-compare-head {
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #e2ebf2;
  background: linear-gradient(180deg, #f8fbfe, #fff);
}
.single-compare-head h2 { margin: 2px 0 0; font-size: 16px; }
.single-compare-actions { display: inline-flex; gap: 8px; align-items: center; }
.single-compare-error { padding: 12px 18px 0; }
.single-compare-error-actions { margin-top: 10px; }
.single-compare-grid {
  padding: 16px 18px 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.single-compare-grid figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid #d5e2ed;
  border-radius: 14px;
  background: #eef3f7;
}
.single-compare-grid figcaption {
  padding: 9px 11px;
  border-bottom: 1px solid #dfe8ef;
  background: #f7fbfe;
  color: #3f617f;
  font-size: 11px;
  font-weight: 750;
}
.single-compare-grid img {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  object-fit: contain;
  background:
    linear-gradient(45deg, #e8eef4 25%, transparent 25%) 0 0 / 16px 16px,
    linear-gradient(-45deg, #e8eef4 25%, transparent 25%) 0 8px / 16px 16px,
    #f5f8fb;
}
.single-compare-grid figure.is-empty img { opacity: .25; }
@media (max-width: 800px) {
  .single-compare-grid { grid-template-columns: 1fr; }
}

.segmented { padding: 4px; display: inline-flex; gap: 4px; border-radius: 13px; background: #dfe7ef; }
.segmented button { padding: 9px 14px; border: 0; border-radius: 9px; color: #64758a; background: transparent; font-weight: 750; }.segmented button.active { color: var(--navy); background: white; box-shadow: 0 4px 12px rgba(36,59,84,.1); }
.resizer-grid { display: grid; grid-template-columns: 380px 1fr; gap: 22px; }.output-panel { min-height: 510px; }
.resizer-v3-workspace { padding-top: 34px; padding-bottom: 100px; }
.resizer-v3-grid { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(420px, 1.18fr); gap: 18px; align-items: start; }
.resizer-v3-grid > .panel { min-width: 0; border-radius: 20px; }
.resizer-output-panel { grid-column: 1 / -1; min-height: 330px; }
.resizer-dropzone { min-height: 205px; padding: 25px; display: grid; place-items: center; align-content: center; gap: 7px; border: 1.5px dashed #9dbbd2; border-radius: 18px; color: #61768a; background: linear-gradient(145deg, #f7fbff, #edf5fa); text-align: center; cursor: pointer; transition: .22s ease; }
.resizer-dropzone:hover, .resizer-dropzone.dragover { border-color: var(--blue); background: #e8f4fb; transform: translateY(-2px); box-shadow: 0 13px 28px rgba(38,91,137,.12); }
.resizer-dropzone strong { color: var(--navy); font-size: 13px; }.resizer-dropzone small { font-size: 10px; }.resizer-dropzone .upload-icon { margin-bottom: 5px; }
.resizer-input-actions { margin: 11px 0; display: flex; flex-wrap: wrap; gap: 7px; }.resizer-input-actions button { padding: 8px 10px; font-size: 10px; }
.resizer-input-list { max-height: 285px; display: grid; gap: 7px; overflow: auto; }.resizer-file-row { min-width: 0; padding: 7px; display: grid; grid-template-columns: 54px 1fr 28px; align-items: center; gap: 9px; border: 1px solid #e0e8ef; border-radius: 12px; background: #fbfdff; }.resizer-file-preview { width: 54px; height: 46px; padding: 0; overflow: hidden; border: 0; border-radius: 9px; background: #e8eef4; }.resizer-file-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }.resizer-file-row > div { min-width: 0; display: grid; gap: 3px; }.resizer-file-row strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.resizer-file-row small { color: var(--muted); font-size: 9px; }.resizer-remove { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; color: #9d5553; background: #f9eae8; }
.resizer-mode-switch { margin-bottom: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.resizer-mode-switch button { padding: 12px; display: grid; gap: 4px; border: 1px solid #d8e3ec; border-radius: 14px; color: #65798c; background: #f7fafc; text-align: left; }.resizer-mode-switch button strong { font-size: 11px; }.resizer-mode-switch button small { font-size: 9px; }.resizer-mode-switch button.active { border-color: #77a9cf; color: #fff; background: linear-gradient(135deg, var(--navy), var(--blue)); box-shadow: 0 10px 22px rgba(38,91,137,.2); }
.resizer-settings-grid { margin-top: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }.resizer-settings-panel .confirm-line { margin: 10px 0; }
.resizer-presets { margin: 13px 0; padding: 12px; display: grid; gap: 8px; border: 1px solid #e1e9f0; border-radius: 14px; background: #f8fbfd; }.resizer-presets > span { color: #6c8093; font-size: 10px; font-weight: 800; }.resizer-presets > div { display: flex; flex-wrap: wrap; gap: 6px; }.resizer-presets button { padding: 6px 9px; border: 1px solid #cbdce8; border-radius: 999px; color: #3f6d92; background: #fff; font-size: 9px; }.resizer-presets button:hover { border-color: #77a9cf; background: #eaf4fb; }.resizer-custom-preset { display: inline-flex; }.resizer-custom-preset button + button { margin-left: -8px; color: #a65b55; border-left: 0; }
.resizer-progress { margin-top: 12px; display: grid; gap: 6px; }.resizer-progress > div { height: 7px; overflow: hidden; border-radius: 999px; background: #dce7ef; }.resizer-progress > div span { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan)); transition: width .2s ease; }.resizer-progress small { color: var(--muted); }
.resizer-output-history { display: grid; gap: 13px; }.resizer-output-batch { overflow: hidden; border: 1px solid #d9e4ed; border-radius: 16px; background: #fbfdff; }.resizer-output-batch > header { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid #e5edf3; background: linear-gradient(120deg, #f7fbff, #edf5fa); }.resizer-output-batch > header > div:first-child { min-width: 0; display: grid; gap: 3px; }.resizer-output-batch > header strong { font-size: 12px; }.resizer-output-batch > header small { color: var(--muted); font-size: 9px; }.resizer-output-batch > header > div:last-child { display: flex; gap: 7px; }.resizer-output-batch > header button { padding: 7px 9px; font-size: 9px; }
.resizer-result-grid { padding: 11px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }.resizer-result-card { min-width: 0; overflow: hidden; display: grid; grid-template-columns: 88px 1fr; border: 1px solid #e0e8ef; border-radius: 12px; background: #fff; }.resizer-result-card > button:first-child { position: relative; width: 88px; min-height: 86px; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: #e9eff4; }.resizer-result-card img { width: 100%; height: 100%; display: block; object-fit: cover; }.resizer-result-card > button:first-child span { position: absolute; inset: auto 5px 5px; padding: 3px; border-radius: 6px; color: #fff; background: rgba(15,30,47,.7); font-size: 8px; opacity: 0; transition: .2s; }.resizer-result-card > button:first-child:hover span { opacity: 1; }.resizer-result-card > div { min-width: 0; padding: 8px; display: grid; align-content: center; gap: 5px; }.resizer-result-card strong, .resizer-result-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.resizer-result-card strong { font-size: 9px; }.resizer-result-card small { color: var(--muted); font-size: 8px; }.resizer-result-card .secondary { justify-self: start; padding: 5px 8px; font-size: 8px; }
.asset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.task-list .asset-load-sentinel,
.asset-grid .asset-load-sentinel { grid-column: 1 / -1; }
.paging-bar { margin-top: 14px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid #d8e4ef; border-radius: 14px; background: linear-gradient(135deg, #fafcff, #eef5fb); }
.paging-bar.hidden { display: none !important; }
.paging-info { color: var(--muted); font-size: 11px; }
.asset-load-sentinel { height: 1px; width: 100%; grid-column: 1 / -1; }
.asset-card img { content-visibility: auto; }
.dam-search { margin: 0 0 22px; overflow: hidden; border: 1px solid #d4e2ee; border-radius: 22px; background: rgba(255,255,255,.94); box-shadow: 0 12px 30px rgba(38,70,103,.08); }.dam-search summary { min-height: 72px; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; gap: 18px; cursor: pointer; list-style: none; background: linear-gradient(120deg, #f7fbff, #edf6fb); }.dam-search summary::-webkit-details-marker { display: none; }.dam-search-summary { display: flex; align-items: center; gap: 12px; }.dam-search-summary > span:last-child { display: grid; gap: 3px; }.dam-search-summary strong { color: var(--navy); font-size: 15px; }.dam-search-summary small, .dam-search-toggle { color: var(--muted); font-size: 11px; }.dam-search-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); font-size: 24px; box-shadow: 0 8px 18px rgba(46,118,184,.2); }.dam-search-toggle { padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.78); }.dam-search-body { padding: 20px; display: grid; gap: 17px; border-top: 1px solid #e5edf4; }.dam-search-primary { display: grid; grid-template-columns: minmax(280px, 1.5fr) minmax(220px, .5fr); gap: 12px; }.dam-search label { min-width: 0; display: grid; gap: 6px; }.dam-search label > span, .dam-filter-section header small { color: #708198; font-size: 10px; font-weight: 700; }.dam-search input, .dam-search select { width: 100%; min-width: 0; padding: 11px 13px; border: 1px solid #cedde9; border-radius: 12px; outline: 0; background-color: #f9fbfd; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }.dam-search input:hover, .dam-search select:hover { border-color: #9bbbd6; background-color: #fff; }.dam-search input:focus, .dam-search select:focus { border-color: #65a5d4; background-color: #fff; box-shadow: 0 0 0 4px rgba(68,143,196,.11); }.dam-filter-section { padding: 15px; border: 1px solid #e2eaf2; border-radius: 16px; background: #fbfdff; }.dam-filter-section.visual { background: linear-gradient(135deg, #fbfdff, #f5f3fc); }.dam-filter-section header { display: flex; align-items: baseline; gap: 9px; margin-bottom: 12px; }.dam-filter-section header strong { font-size: 12px; }.dam-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }.dam-filter-grid.business { grid-template-columns: repeat(5, minmax(0, 1fr)); }.dam-search-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; }.dam-search-actions > small { color: var(--muted); }.dam-search-actions > div { display: flex; gap: 9px; }.dam-card { cursor: pointer; }.dam-card footer > div { min-width: 0; display: grid; gap: 4px; }.dam-card footer small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.dam-dialog { width: min(1120px, 94vw); max-height: 90vh; border: 0; border-radius: 18px; padding: 22px; }.dam-detail-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 24px; overflow: auto; max-height: 68vh; }.dam-metadata-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }.dam-metadata-grid .wide { grid-column: 1 / -1; }.dam-version-tree { display: grid; gap: 8px; margin-bottom: 20px; }.dam-version { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; padding: 9px; border-radius: 9px; background: #f4f7fa; }.dam-version small { grid-column: 2; color: var(--muted); }.dam-version.child { margin-left: 16px; }
#damGovernanceTools { display: grid; gap: 8px; margin-top: 18px; } #damGovernanceTools h3 { margin: 14px 0 2px; } #damGovernanceTools input, #damGovernanceTools select { width: 100%; } #damShareTools { display: grid; gap: 8px; }.muted { color: var(--muted); font-size: 12px; word-break: break-word; }
.dam-share-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px; border: 1px solid var(--line); border-radius: 8px; font-size: 11px; }.dam-share-row button { padding: 5px 8px; }
.asset-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: white; transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; }.asset-card:hover { transform: translateY(-4px); border-color: #9bbbd7; box-shadow: 0 16px 34px rgba(31,71,108,.14); }.asset-card img { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; background: #edf2f6; transition: transform .35s ease; }.asset-card:hover img { transform: scale(1.025); }.asset-card footer { padding: 11px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }.asset-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }.asset-card a { color: var(--blue); font-size: 11px; font-weight: 750; text-decoration: none; }
.asset-actions { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 6px !important; flex: 0 0 auto; }.asset-preview-button, .asset-download-button { padding: 6px 9px; border: 1px solid #c9d9e7; border-radius: 9px; color: #315f88; background: #f7fbfe; font-size: 10px !important; font-weight: 750; text-decoration: none; transition: .2s ease; }.asset-preview-button:hover { border-color: #75a9d2; color: #fff; background: var(--blue); }.asset-download-button:hover { border-color: #84bcae; color: #187052; background: #e8f6f1; }
.subtask > .asset-actions { margin-top: 10px; justify-content: flex-start; }
.image-preview-dialog { width: min(1180px, calc(100vw - 36px)); height: min(860px, calc(100vh - 36px)); max-width: none; max-height: none; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.5); background: #101a28; box-shadow: 0 34px 100px rgba(7,17,30,.5); }.image-preview-dialog::backdrop { background: rgba(10,22,37,.72); backdrop-filter: blur(7px); }.image-preview-head { min-height: 72px; padding: 13px 16px 13px 22px; display: flex; justify-content: space-between; align-items: center; gap: 18px; color: #fff; background: linear-gradient(135deg, #17283d, #1d3854); }.image-preview-head h2 { max-width: 500px; margin: 0; overflow: hidden; color: #fff; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }.image-preview-head .eyebrow { margin-bottom: 3px; color: #79c7d0; }.image-preview-toolbar { display: flex; align-items: center; gap: 7px; }.image-preview-toolbar button { min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 11px; color: #dce8f2; background: rgba(255,255,255,.08); }.image-preview-toolbar button:hover { color: #fff; background: rgba(255,255,255,.17); }.image-preview-toolbar .primary { min-width: 68px; padding: 9px 14px; text-align: center; }.image-preview-stage { height: calc(100% - 104px); display: grid; place-items: center; overflow: hidden; cursor: grab; background-color: #111c2a; background-image: linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.025) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.025) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.025) 75%); background-position: 0 0, 0 14px, 14px -14px, -14px 0; background-size: 28px 28px; }.image-preview-stage img { max-width: 88%; max-height: 88%; object-fit: contain; cursor: grab; user-select: none; touch-action: none; will-change: transform; transition: transform .06s linear; }.image-preview-stage img.dragging { cursor: grabbing; transition: none; }.image-preview-help { height: 32px; display: grid; place-items: center; color: #8fa3b8; background: #101a28; font-size: 10px; letter-spacing: .04em; }
.batch-modes { display: grid; gap: 9px; margin-top: 36px; }
.batch-panel {
  min-height: 620px;
  display: grid;
  gap: var(--stack-gap, 16px);
  align-content: start;
}
.batch-panel > .panel-head { margin-bottom: 0; }
.batch-panel > .dropzone,
.batch-panel > .primary,
.batch-panel > .secondary,
.batch-panel > .inline-notice { margin: 0; }
.batch-draft-panel {
  display: grid;
  gap: var(--stack-gap, 16px);
  align-content: start;
}
.batch-draft-panel > .panel-head { margin-bottom: 0; }
.inline-notice {
  display: flex;
  gap: 14px;
  margin-top: 0;
  font-size: 12px;
}
.inline-notice span { color: var(--muted); }

.center-grid { display: grid; grid-template-columns: 430px 1fr; gap: 20px; }.list-panel, .detail-panel { min-height: 570px; }.task-list { display: grid; gap: 9px; max-height: 480px; overflow-y: auto; }.task-row { cursor: pointer; }.task-row:hover, .task-row.active { border-color: #83acd0; background: #f1f7fc; }.status { padding: 4px 7px; border-radius: 999px; background: #e9eef4; font-size: 9px !important; font-weight: 800; }.status.succeeded { color: #17714f; background: #e1f5ec; }.status.failed, .status.timeout_unknown { color: #a64c43; background: #fae9e6; }
.task-list .task-row { grid-template-columns: 28px 54px minmax(0, 1fr) auto; align-items: center; min-height: 72px; padding: 8px 10px; }
.task-row-index {
  display: grid;
  place-items: center;
  min-width: 22px;
  color: #6f8298;
  font-size: 12px !important;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.list-panel .paging-bar {
  margin-top: 12px;
  padding: 8px 10px;
  gap: 8px;
}
.list-panel .paging-bar .secondary {
  padding: 6px 10px;
  font-size: 11px;
}
.list-panel .paging-info { font-size: 11px; text-align: center; flex: 1 1 auto; }
.task-list-thumb { width: 54px; height: 54px; display: block; object-fit: cover; border: 1px solid #d6e1eb; border-radius: 12px; background: #eaf0f5; box-shadow: 0 4px 12px rgba(34,62,91,.09); }
.task-list-thumb-empty { display: grid; place-items: center; color: #7890a6 !important; background: linear-gradient(145deg, #edf3f7, #dfe9f1); font-size: 15px !important; font-weight: 800; }
.task-row-copy { min-width: 0; display: grid; gap: 5px; }.task-row-copy strong, .task-row-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }.detail-meta div { padding: 13px; border-radius: 11px; background: var(--soft); }.detail-meta span, .detail-meta strong { display: block; }.detail-meta span { color: var(--muted); font-size: 10px; }.detail-meta strong { margin-top: 5px; overflow-wrap: anywhere; font-size: 12px; }
.task-comparison { margin-bottom: 18px; padding: 15px; border: 1px solid #d8e5ef; border-radius: 17px; background: linear-gradient(145deg, #f8fbfe, #eef6fb); }.task-comparison-head { margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }.task-comparison-head h3 { margin: 2px 0 0; font-size: 14px; }.task-mask-saved, .task-image-badge { padding: 5px 8px; border-radius: 999px; color: #287260; background: #dff3ed; font-size: 8px; font-weight: 850; letter-spacing: .06em; }.task-image-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.task-image-panel { min-width: 0; overflow: hidden; border: 1px solid #d3e0ea; border-radius: 14px; background: #fff; box-shadow: 0 8px 22px rgba(38,70,103,.07); }.task-image-panel > header { padding: 10px 11px; display: flex; justify-content: space-between; align-items: center; gap: 9px; }.task-image-panel > header > div { min-width: 0; display: grid; gap: 2px; }.task-image-panel > header span { color: var(--muted); font-size: 9px; }.task-image-panel > header strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.task-image-panel .task-image-badge { flex: 0 0 auto; color: #376e9c; background: #e5f1fa; }.task-image-stage { position: relative; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: #172536; }.task-image-stage img { width: 100%; height: 100%; display: block; object-fit: contain; transition: transform .28s ease; }.task-image-stage > span { position: absolute; right: 9px; bottom: 9px; padding: 5px 7px; border-radius: 8px; color: #fff; background: rgba(14,29,46,.72); font-size: 8px; opacity: 0; transform: translateY(4px); transition: .2s ease; }.task-image-stage:hover img { transform: scale(1.025); }.task-image-stage:hover > span { opacity: 1; transform: translateY(0); }.task-image-panel > .asset-actions { padding: 9px 10px; }.task-result-pending { min-height: 210px; padding: 22px; display: grid; place-items: center; align-content: center; gap: 9px; color: var(--muted); text-align: center; background: repeating-linear-gradient(135deg, #f7fafc, #f7fafc 12px, #eef4f8 12px, #eef4f8 24px); }.task-result-pending p { max-width: 220px; margin: 0; font-size: 10px; line-height: 1.5; }
.subtask-list { display: grid; gap: 8px; }.subtask { padding: 12px; border: 1px solid var(--line); border-radius: 11px; }.subtask header { display: flex; justify-content: space-between; }.subtask p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.subtask-visual { overflow: hidden; padding: 0; border-radius: 15px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }.subtask-visual:hover { border-color: #a8c4da; box-shadow: 0 10px 26px rgba(31,67,101,.09); }
.subtask-visual > header { padding: 11px 13px; align-items: center; gap: 12px; border-bottom: 1px solid #e8eef3; background: linear-gradient(135deg, #fafcfe, #f3f8fb); }.subtask-visual > header strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.subtask-visual-body { display: grid; grid-template-columns: 158px minmax(0, 1fr); min-height: 132px; }.subtask-preview-stage { position: relative; width: 158px; min-height: 132px; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: #162638; cursor: zoom-in; }.subtask-preview-stage img { width: 100%; height: 100%; min-height: 132px; display: block; object-fit: contain; transition: transform .28s ease; }.subtask-preview-stage > span:not(.status) { position: absolute; right: 8px; bottom: 8px; padding: 5px 7px; border-radius: 8px; color: #fff; background: rgba(12,27,43,.75); font-size: 8px; opacity: 0; transform: translateY(4px); transition: .2s ease; }.subtask-preview-stage:hover img { transform: scale(1.035); }.subtask-preview-stage:hover > span { opacity: 1; transform: translateY(0); }
.subtask-preview-pending { display: grid; place-items: center; align-content: center; gap: 8px; cursor: default; background: repeating-linear-gradient(135deg, #f4f8fb, #f4f8fb 12px, #eaf1f6 12px, #eaf1f6 24px); }.subtask-preview-pending small { color: #7f91a3; font-size: 9px; }.subtask-copy { min-width: 0; padding: 11px 13px; }.subtask-copy p:first-child { margin-top: 0; }.subtask-copy > .asset-actions { margin-top: 11px; justify-content: flex-start; }
@media (max-width: 760px) { .subtask-visual-body { grid-template-columns: 112px minmax(0, 1fr); }.subtask-preview-stage { width: 112px; } }
.admin-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; }.admin-system { grid-column: 1 / -1; }.table-list, .audit-list { display: grid; gap: 8px; max-height: 380px; overflow: auto; }.table-row, .audit-row { padding: 12px; display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid #edf1f5; }.table-row strong, .audit-row strong { font-size: 12px; }.table-row span, .audit-row span { color: var(--muted); font-size: 10px; }
.empty-state { min-height: 120px; display: grid; place-items: center; color: #8a98aa; text-align: center; font-size: 13px; }

.slide-arrow { position: fixed; top: 50%; z-index: 15; width: 42px; height: 74px; border: 1px solid rgba(198,210,223,.8); color: #678097; background: rgba(255,255,255,.78); backdrop-filter: blur(10px); font: 300 34px Georgia, serif; opacity: .55; transition: .2s; }.slide-arrow:hover { opacity: 1; color: var(--navy); }.slide-arrow.prev { left: 8px; border-radius: 0 14px 14px 0; }.slide-arrow.next { right: 8px; border-radius: 14px 0 0 14px; }
.slide-progress { position: fixed; left: 50%; bottom: 15px; z-index: 15; display: flex; gap: 7px; transform: translateX(-50%); }.slide-progress button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: #adbac8; transition: .2s; }.slide-progress button.active { width: 25px; border-radius: 6px; background: var(--blue); }
.toast { position: fixed; right: 25px; bottom: 28px; z-index: 50; max-width: 380px; padding: 14px 18px; border-radius: 13px; color: white; background: #173d67; box-shadow: var(--shadow); opacity: 0; transform: translateY(20px); pointer-events: none; transition: .25s; }.toast.show { opacity: 1; transform: translateY(0); }

button:active:not(:disabled) { transform: translateY(1px) scale(.985); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(84,184,196,.32); outline-offset: 2px; }
dialog { border-radius: var(--radius-lg) !important; }
dialog::backdrop { backdrop-filter: blur(5px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 1100px) {
  .topbar { grid-template-columns: 180px 1fr 150px; padding: 0 14px; }.workspace-nav button { padding: 0 9px; }.workspace-inner { width: calc(100% - 54px); }.metric-grid { grid-template-columns: repeat(2, 1fr); }.split-layout { grid-template-columns: 230px 1fr; }.asset-grid { grid-template-columns: repeat(2, 1fr); }.market-grid { grid-template-columns: repeat(2, 1fr); }.component-body { grid-template-columns: 1fr 220px; }.dam-filter-grid.business { grid-template-columns: repeat(3, minmax(0, 1fr)); }.dam-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.single-mask-tools { grid-template-columns: 1fr 1fr auto auto auto; }.single-mask-tools #singleImageReplace { grid-column: 1 / -1; }.resizer-v3-grid { grid-template-columns: 1fr; }.resizer-output-panel { grid-column: auto; }.resizer-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.paging-bar { flex-direction: column; align-items: stretch; }.panel-head-tools { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .login-gate { display: block; overflow-y: auto; }.login-card { min-height: 100%; padding: 34px 25px; }.login-art { display: none; }
  .topbar { height: 64px; grid-template-columns: 1fr auto; }.brand span { display: none; }.workspace-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: 58px; justify-content: flex-start; padding: 0 10px; background: white; border-top: 1px solid var(--line); }.workspace-nav button { min-width: 82px; }.workspace-nav button::after { top: 0; bottom: auto; }.account small, .status-dot { display: none; }
  .slider-viewport { height: calc(100% - 64px); }.workspace-inner { width: calc(100% - 30px); padding: 30px 0 90px; }.workspace-heading, .hero-row { display: block; }.workspace-heading > *:last-child, .hero-row > *:last-child { margin-top: 18px; }.metric-grid, .dashboard-grid, .single-grid, .resizer-grid, .center-grid, .admin-grid { grid-template-columns: 1fr; }.split-layout { display: block; }.context-rail { margin-bottom: 20px; }.step-list { display: flex; overflow: auto; margin: 22px 0; }.step-list li { min-width: 120px; }.rail-note { display: none; }.form-grid, .choice-grid, .suite-upload-grid, .component-fields, .component-body, .dam-search-primary, .dam-filter-grid, .dam-filter-grid.business, .task-image-comparison, .resizer-settings-grid { grid-template-columns: 1fr; }.asset-grid { grid-template-columns: repeat(2, 1fr); }.slide-arrow { display: none; }.slide-progress { bottom: 66px; }.admin-system { grid-column: auto; }.dam-search summary { padding: 13px 14px; }.dam-search-toggle { display: none; }.dam-search-body { padding: 14px; }.dam-search-actions { align-items: stretch; flex-direction: column; }.dam-search-actions > div { display: grid; grid-template-columns: 1fr 1fr; }.dam-search-actions .primary { grid-column: 1 / -1; }.asset-card footer { align-items: flex-start; flex-direction: column; }.asset-actions { width: 100%; }.asset-preview-button, .asset-download-button { flex: 1; text-align: center; }.image-preview-dialog { width: 100vw; height: 100dvh; border-radius: 0 !important; }.image-preview-head { min-height: 112px; padding: 11px; align-items: flex-start; flex-direction: column; }.image-preview-head h2 { max-width: calc(100vw - 28px); }.image-preview-toolbar { width: 100%; }.image-preview-toolbar .primary { margin-left: auto; }.image-preview-stage { height: calc(100% - 144px); }.single-dropzone { min-height: 410px !important; }.single-mask-tools { grid-template-columns: 1fr 1fr; }.single-mask-tools > div, .single-mask-tools > label, .single-mask-tools #singleImageReplace { grid-column: 1 / -1; }.resizer-mode-switch, .resizer-result-grid { grid-template-columns: 1fr; }.resizer-output-batch > header { align-items: flex-start; flex-direction: column; }.resizer-result-card { grid-template-columns: 76px 1fr; }
}

/* 2026-08 production workstation refresh */
.company-asset-notice { margin: 14px 0 0; padding: 10px 12px; border: 1px solid #e5ebf2; border-radius: 10px; color: #69798d; background: #f8fafc; font-size: 11px; line-height: 1.5; }
.company-policy-mini {
  width: 100%;
  margin-top: auto;
  padding: 13px 14px 12px;
  border: 1px solid #f0c078;
  border-left: 4px solid var(--orange);
  border-radius: 13px;
  color: #8a3f08;
  background: linear-gradient(145deg, #fff8ef, #ffedd8);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
  line-height: 1.5;
  letter-spacing: .04em;
  box-shadow: 0 8px 22px rgba(240, 139, 87, .18);
}
.company-policy-mini::before {
  content: "⚠";
  display: block;
  margin-bottom: 5px;
  font-size: 15px;
  line-height: 1;
}

@media (min-width: 901px) {
  .topbar { position: fixed; inset: 0 auto 0 0; width: 252px; height: 100vh; padding: 24px 18px 18px; display: flex; flex-direction: column; align-items: stretch; gap: 18px; border-right: 1px solid var(--line); border-bottom: 0; box-shadow: 12px 0 38px rgba(33,58,84,.045); }
  .brand { padding: 2px 6px 18px; border-bottom: 1px solid #edf1f5; }
  .workspace-nav { width: 100%; height: auto; padding: 0; display: grid; gap: 5px; overflow: visible; }
  .workspace-nav button { width: 100%; min-height: 43px; padding: 0 13px 0 16px; border-radius: 12px; text-align: left; }
  .workspace-nav button:hover { color: var(--navy); background: #f2f6fa; }
  .workspace-nav button::after { inset: 8px auto 8px 0; width: 3px; height: auto; border-radius: 0 4px 4px 0; transform: scaleY(0); }
  .workspace-nav button.active { color: #1d5e95; background: linear-gradient(90deg, #eaf4fb, #f7fbfe); }
  .workspace-nav button.active::after { transform: scaleY(1); }
  .account { width: 100%; margin-top: 10px; padding: 13px 6px 3px; border-top: 1px solid #edf1f5; justify-content: flex-start; }
  .account .icon-button { margin-left: auto; }
  .slider-viewport { width: calc(100% - 252px); height: 100vh; margin-left: 252px; }
  .workspace-inner { width: min(1440px, calc(100% - 72px)); padding-top: 42px; }
  .slide-arrow, .slide-progress { display: none !important; }
}

.workspace-heading h1, .hero-row h1 { letter-spacing: -.04em; }
.panel, .metric { border-color: #e2e9f0; box-shadow: 0 10px 34px rgba(37,62,91,.065); }
.panel:hover { transform: translateY(-1px); }

.single-operation-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; }
.single-operation-grid button { min-height: 76px; padding: 13px 14px; display: grid; align-content: center; gap: 5px; border: 1px solid #dfe7ef; border-radius: 15px; color: #435870; background: #fff; text-align: left; box-shadow: 0 6px 18px rgba(34,58,86,.04); }
.single-operation-grid button strong { font-size: 13px; }
.single-operation-grid button small { color: #8795a6; font-size: 10px; }
.single-operation-grid button:hover { border-color: #aac8df; background: #f8fbfd; }
.single-operation-grid button.active { color: #174f80; border-color: #8bb9d9; background: linear-gradient(145deg, #eaf5fb, #f8fcff); box-shadow: inset 0 0 0 1px rgba(73,139,187,.08), 0 8px 22px rgba(52,112,157,.08); }
.single-operation-grid button.active small { color: #5e7f9b; }

.task-detail-actions { display: flex; align-items: center; gap: 9px; }
.trace-chain { margin: 18px 0 22px; border: 1px solid #dce6ef; border-radius: 16px; overflow: hidden; background: #fbfdff; }
.trace-chain > summary { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; background: linear-gradient(135deg, #f7fbfe, #eef6fb); }
.trace-chain > summary::-webkit-details-marker { display: none; }
.trace-chain > summary > span:first-child { display: grid; gap: 3px; }
.trace-chain > summary strong { font-size: 12px; }
.trace-chain > summary small, .trace-chain > summary > span:last-child { color: #71869a; font-size: 9px; }
.trace-chain-body { padding: 12px; display: grid; gap: 9px; }
.trace-chain-body article { padding: 11px; border: 1px solid #e6edf3; border-radius: 12px; background: white; }
.trace-chain-body article header { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.trace-chain-body article header strong { font-size: 10px; }
.trace-call { margin-top: 8px; display: grid; grid-template-columns: 92px minmax(160px, 1fr) minmax(150px, .8fr) minmax(180px, 1fr) auto; gap: 8px; align-items: center; color: #67798c; font-size: 9px; }
.trace-call code { min-width: 0; padding: 5px 7px; overflow: hidden; border-radius: 7px; color: #315b7d; background: #f2f6fa; text-overflow: ellipsis; white-space: nowrap; }
.trace-billable { padding: 4px 7px; border-radius: 999px; color: #6a5f21; background: #fff8d9; }
.trace-chain-body footer { margin-top: 8px; color: #8090a1; font-size: 9px; line-height: 1.6; }
.inline-notice.warning { margin: 14px 0; border-color: #f1d8a1; background: #fff9ea; color: #72541b; }

.task-error-summary { margin: 14px 0 16px; padding: 14px; border: 1px solid #f0d4cc; border-radius: 16px; background: linear-gradient(160deg, #fff8f6, #fff1ec); }
.task-error-summary-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 12px; }
.task-error-summary-head h3 { margin: 2px 0 0; font-size: 14px; }
.task-error-summary-head > span { color: #a06455; font-size: 10px; font-weight: 700; }
.task-error-summary-list { display: grid; gap: 8px; }
.task-error-card { padding: 11px 12px; border: 1px solid #ead7d1; border-radius: 12px; background: #fff; }
.task-error-card header { display: flex; align-items: flex-start; gap: 8px; }
.task-error-card header strong { min-width: 0; color: #5d3d36; font-size: 12px; line-height: 1.45; }
.task-error-card p { margin: 7px 0 0; color: #7a5a52; font-size: 11px; line-height: 1.55; }
.task-error-card details { margin-top: 8px; }
.task-error-card summary { cursor: pointer; color: #8a6a61; font-size: 10px; }
.task-error-card code { display: block; margin-top: 6px; padding: 8px; border-radius: 8px; background: #f7efec; color: #6d4a42; white-space: pre-wrap; word-break: break-word; font-size: 10px; line-height: 1.45; }
.task-error-badge { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: .02em; }
.task-error-card.tone-danger { border-color: #efc5bc; background: #fff7f5; }
.task-error-card.tone-danger .task-error-badge { color: #9a3d32; background: #f8ddd7; }
.task-error-card.tone-warning { border-color: #ead6a5; background: #fffaf0; }
.task-error-card.tone-warning .task-error-badge { color: #8a6a1f; background: #f6e8bc; }
.task-error-card.tone-info { border-color: #c9dced; background: #f5faff; }
.task-error-card.tone-info .task-error-badge { color: #2f6288; background: #d9ebf8; }
.subtask-copy .task-error-card { margin-top: 10px; }
.subtask.subtask-visual.is-failed { border-color: #efc5bc; }
.subtask-preview-pending.has-error { background: repeating-linear-gradient(135deg, #fff4f1, #fff4f1 12px, #fde8e2 12px, #fde8e2 24px); }
.subtask-preview-pending.has-error small { color: #a04b3f; font-weight: 700; }

.guide-section-title { margin-bottom: 14px; }
.guide-section-title h3 { margin: 0; font-size: 18px; }
.guide-route-grid, .guide-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.guide-route-grid > div, .guide-check-grid > div { padding: 12px 13px; display: flex; justify-content: space-between; gap: 14px; border: 1px solid #e5ecf3; border-radius: 12px; background: #fafcfe; }
.guide-route-grid strong, .guide-check-grid strong { font-size: 11px; }
.guide-route-grid span, .guide-check-grid span { color: #718298; font-size: 10px; text-align: right; }
.guide-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guide-workflows { display: grid; gap: 8px; }
.guide-workflows > div { padding: 11px 0; display: grid; grid-template-columns: 120px 1fr; gap: 18px; border-bottom: 1px solid #edf1f5; }
.guide-workflows strong { font-size: 11px; }.guide-workflows span { color: #697c90; font-size: 10px; line-height: 1.6; }
.guide-safety ol { margin: 10px 0 0; padding-left: 22px; color: #5f7288; font-size: 11px; line-height: 1.8; }
.guide-dialog-body details { padding: 10px 0; border-bottom: 1px solid #edf1f5; }
.guide-dialog-body details summary { cursor: pointer; font-size: 11px; font-weight: 750; }
.guide-dialog-body details p { margin: 7px 0 0; color: #6f8194; font-size: 10px; line-height: 1.6; }

@media (max-width: 1100px) and (min-width: 901px) {
  .single-operation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trace-call { grid-template-columns: 80px 1fr; }
}

@media (max-width: 900px) {
  .company-policy-mini { display: none; }
  .topbar { position: relative; inset: auto; width: auto; height: 64px; display: grid; grid-template-columns: 1fr auto; padding: 0 14px; border-right: 0; border-bottom: 1px solid var(--line); box-shadow: none; }
  .workspace-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: 58px; display: flex; justify-content: flex-start; gap: 3px; padding: 0 10px; overflow-x: auto; background: white; border-top: 1px solid var(--line); }
  .workspace-nav button { min-width: 88px; padding: 0 9px; text-align: center; border-radius: 0; }
  .workspace-nav button::after { left: 10px; right: 10px; top: 0; bottom: auto; width: auto; height: 3px; transform: scaleX(0); }
  .workspace-nav button.active::after { transform: scaleX(1); }
  .slider-viewport { width: 100%; height: calc(100% - 64px); margin-left: 0; }
  .slide-progress { display: none; }
  .workspace-inner { width: calc(100% - 30px); padding-bottom: 90px; }
  .single-operation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trace-call { grid-template-columns: 1fr; }
  .guide-route-grid, .guide-check-grid, .guide-modules { grid-template-columns: 1fr; }
  .guide-workflows > div { grid-template-columns: 1fr; gap: 4px; }
}

.runtime-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: -2px 0 18px;
}
.runtime-strip > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #e9eef4;
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
}
.runtime-strip small { color: #7a8797; white-space: nowrap; }
.runtime-strip strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #253247; }
@media (max-width: 1100px) { .runtime-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .runtime-strip { grid-template-columns: 1fr; } }


/* V2.1 UI typography cleanup: remove decorative/helper microcopy and keep business metadata readable. */
:root { font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Inter, system-ui, sans-serif; font-size: 15px; line-height: 1.55; }
body { font-size: 15px; }
h1 { font-size: clamp(34px, 3.6vw, 50px); letter-spacing: -.035em; }
h2 { font-size: 22px; }
.workspace-nav button, .primary, .secondary, .text-button { font-size: 13px; }
.field span, .confirm-line, .chip { font-size: 12px; }
small { font-size: 12px; }
.status { font-size: 11px !important; }
.compact-task span, .task-row span, .detail-meta span, .table-row span, .audit-row span { font-size: 12px; }
.task-row strong, .compact-task strong, .resizer-file-row strong, .resizer-output-batch > header strong, .resizer-result-card strong { font-size: 13px; }
.resizer-input-actions button, .resizer-presets button, .resizer-output-batch > header button, .resizer-result-card .secondary, .asset-preview-button, .asset-download-button { font-size: 12px !important; }
.resizer-file-row small, .resizer-batch-meta, .resizer-result-meta, .resizer-progress > span { color: var(--muted); font-size: 12px; }
.resizer-mode-switch button { min-height: 48px; align-items: center; }
.resizer-mode-switch button strong { font-size: 13px; }
.resizer-result-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.resizer-result-card-pending { min-height: 92px; }
.resizer-result-pending { width: 88px; min-height: 86px; display: grid; place-items: center; background: linear-gradient(145deg, #f2f6fa, #e8eff5); }
.company-policy-mini { font-size: 13px; }

/* Remove non-essential helper/decorative microcopy. Functional labels, statuses, IDs and metadata stay visible. */
.eyebrow,
.brand > div > span,
.metric small,
.guide-preview > p,
.panel-subtitle,
.rail-note > p,
.dropzone > small,
.choice > span,
.single-source-caption > span,
.single-mask-hint,
.single-output-note,
.resizer-mode-switch small,
.image-preview-help,
.dam-search-summary small,
.dam-filter-section > header small,
.dam-search-actions > small,
.trace-chain > summary small,
.subtask-preview-pending small,
.issue-mention-hint { display: none !important; }

/* Main-site tile rhythm: equal gaps, grid-aligned action blocks */
.tile-grid {
  display: grid;
  gap: var(--tile-gap);
  align-items: stretch;
}

.tile-grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr));
}

.tile-grid > *,
.tile-grid button,
.tile-grid a.primary,
.tile-grid a.secondary {
  margin: 0;
  width: 100%;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tile-gap);
  align-items: stretch;
}

.hero-actions > button,
.hero-actions > a.primary,
.hero-actions > a.secondary {
  flex: 1 1 168px;
  min-width: 168px;
  margin: 0;
}

.hero-row--solo {
  display: block;
  margin-bottom: 30px;
}

.hero-row--solo > div {
  max-width: 750px;
}

.hero-row--dashboard {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 30px;
}

.hero-row--dashboard > div {
  max-width: 750px;
  flex: 1 1 auto;
}

.dashboard-guide-btn {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 28px;
  white-space: nowrap;
}

.guide-action-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr));
  gap: var(--tile-gap);
}

.metric-grid,
.single-operation-grid,
.suite-upload-grid,
.choice-grid,
.resizer-mode-switch,
.runtime-strip,
.guide-route-grid,
.guide-check-grid,
.resizer-result-grid {
  gap: var(--tile-gap);
}

.operation-tabs,
.single-operation-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--tile-gap);
  margin-bottom: calc(var(--tile-gap) + 10px);
  overflow: visible;
}

.batch-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tile-gap);
  margin: calc(var(--tile-gap) + 12px) 0;
}

.resizer-input-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--tile-gap);
  margin: var(--tile-gap) 0;
}

.resizer-presets > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: var(--tile-gap);
}

.resizer-presets button {
  width: 100%;
  justify-self: stretch;
  text-align: center;
}

.single-operation-grid button,
.operation-tabs button,
.resizer-mode-switch button,
.choice,
.batch-guide span {
  min-height: 76px;
  height: 100%;
}

.single-operation-grid button,
.operation-tabs button {
  width: 100%;
  margin: 0;
}

@media (max-width: 1100px) {
  .operation-tabs,
  .single-operation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .hero-actions {
    flex-direction: column;
  }

  .hero-actions > button,
  .hero-actions > a.primary,
  .hero-actions > a.secondary {
    width: 100%;
    min-width: 0;
  }

  .batch-guide {
    grid-template-columns: 1fr;
  }
}

.suite-draft-status { margin-top: 10px; color: #5f738d; font-size: 12px; line-height: 1.5; }
.suite-prompt-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.suite-prompt-loading { margin: 14px 0; padding: 18px 20px; border-radius: 16px; background: linear-gradient(160deg, #eef4ff, #f8fbff); border: 1px solid #d8e4ff; display: grid; gap: 6px; }
.suite-prompt-loading strong { font-size: 15px; }
.suite-prompt-loading span { color: var(--muted); font-size: 13px; }
.suite-prompt-plans { display: grid; gap: 14px; margin-top: 14px; }
.suite-prompt-card { border: 1px solid #dbe3ec; border-radius: 18px; background: #fff; padding: 18px; box-shadow: 0 10px 24px rgba(20, 35, 60, 0.04); }
.suite-prompt-card.is-fallback { border-color: #efd9c8; background: linear-gradient(180deg, #fffaf6, #fff); }
.suite-prompt-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; margin-bottom: 14px; }
.suite-prompt-card-head strong { display: block; font-size: 16px; margin-top: 4px; }
.suite-prompt-card-head small { color: var(--muted); }
.suite-prompt-index { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: #edf3ff; color: #3159d6; font-size: 12px; font-weight: 800; margin-right: 8px; }
.suite-prompt-alert { margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: #fff4ea; color: #9a5b22; font-size: 13px; line-height: 1.6; }
.suite-prompt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.suite-prompt-grid .field span { font-weight: 700; color: #334155; }
.suite-prompt-grid textarea { min-height: 84px; resize: vertical; }
.suite-prompt-advanced { margin-top: 12px; }
.suite-prompt-advanced summary { cursor: pointer; color: #3159d6; font-weight: 700; margin-bottom: 8px; }
.suite-prompt-advanced textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.55; }
.suite-prompt-meta { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid #edf2f7; color: var(--muted); font-size: 12px; }
.confirm-line.compact { margin: 0; font-size: 13px; }
@media (max-width: 900px) {
  .suite-prompt-grid { grid-template-columns: 1fr; }
  .suite-prompt-meta { flex-direction: column; align-items: flex-start; }
}

.suite-layout.split-layout { grid-template-columns: minmax(250px, 0.85fr) minmax(520px, 1.5fr); }
.suite-rail { display: grid; gap: 12px; align-content: start; max-height: calc(100vh - 120px); overflow: auto; }
.suite-side-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.suite-side-tabs button { border: 1px solid #d8e2ec; background: #f7fafc; color: #4a6078; border-radius: 999px; padding: 6px 12px; font-size: 12px; cursor: pointer; }
.suite-side-tabs button.active { background: #173d67; border-color: #173d67; color: #fff; }
.suite-side-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.suite-project-list, .suite-output-wall, .suite-preset-list { display: grid; gap: 8px; max-height: 220px; overflow: auto; }
.suite-project-row { text-align: left; border: 1px solid #dbe3ec; background: #fbfdff; border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.suite-project-row.is-active { border-color: #3767f4; box-shadow: inset 0 0 0 1px #3767f4; background: #f3f7ff; }
.suite-project-row strong, .suite-project-row span { display: block; }
.suite-project-row span { color: var(--muted); font-size: 12px; margin-top: 4px; }
.suite-output-toolbar, .bulk-download-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.suite-output-select-all, .bulk-download-select-all { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #355f84; font-weight: 650; cursor: pointer; }
.suite-output-selected-count, .bulk-download-selected-count { color: var(--muted); font-size: 12px; margin-right: auto; }
.suite-output-format-field, .bulk-download-format-field, .image-preview-format-field { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #355f84; font-weight: 650; }
.suite-output-format-field select, .bulk-download-format-field select, .image-preview-format-field select { min-width: 96px; padding: 6px 8px; border: 1px solid #c9d9e7; border-radius: 8px; background: #fff; color: #2f5678; font-size: 12px; }
.task-detail-download-toolbar { margin: 0 0 14px; padding: 0 2px; }
.bulk-download-check { display: inline-flex; align-items: center; margin-right: 6px; cursor: pointer; }
.subtask-header-title, .task-image-panel-title { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.asset-card { position: relative; }
.asset-card-check { position: absolute; top: 8px; left: 8px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,.92); border: 1px solid #c9d9e7; box-shadow: 0 4px 10px rgba(28,55,84,.12); cursor: pointer; }
.asset-card-preview { all: unset; cursor: pointer; display: block; width: 100%; }
.image-preview-download-tools { display: inline-flex; align-items: center; gap: 8px; }
.image-preview-download-tools .primary { padding: 7px 12px; border-radius: 10px; }
#suiteOutputPackMenu { display: inline-flex; align-items: center; gap: 8px; }
.suite-output-check { display: flex; align-items: flex-start; gap: 8px; min-width: 0; cursor: pointer; }
.suite-output-check input { margin-top: 3px; flex: 0 0 auto; }
.suite-output-group, .suite-preset-row { border: 1px solid #e3ebf3; border-radius: 12px; padding: 10px; background: #fff; }
.suite-output-group header, .suite-preset-row { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.suite-output-title { min-width: 0; display: grid; gap: 4px; }
.suite-output-title span { color: var(--muted); font-size: 12px; }
.suite-output-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.suite-output-actions .download-format-trigger { white-space: nowrap; }
.suite-output-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-top: 8px; }
.suite-output-thumb { display: grid; gap: 4px; text-decoration: none; color: inherit; font-size: 11px; }
.suite-output-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid #e6edf5; }
.suite-output-preview { all: unset; cursor: pointer; display: grid; gap: 4px; }
.download-format-menu { position: relative; display: inline-flex; }
.download-format-panel { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; min-width: 108px; padding: 6px; border: 1px solid #d5e2ee; border-radius: 10px; background: #fff; box-shadow: 0 12px 28px rgba(28, 55, 84, 0.16); display: grid; gap: 4px; }
.download-format-menu.is-open .download-format-panel { display: grid; }
.download-format-option { border: 0; background: transparent; text-align: left; padding: 7px 9px; border-radius: 8px; color: #2f5678; font-size: 12px; font-weight: 650; cursor: pointer; }
.download-format-option:hover { background: #eef6fb; color: #1d4f7a; }
.download-format-menu.is-compact .asset-download-button { padding: 4px 7px; font-size: 10px !important; }
.image-preview-toolbar .download-format-menu .download-format-trigger.primary { background: var(--blue); color: #fff; border-color: transparent; padding: 7px 12px; border-radius: 10px; }
.task-detail-actions .download-format-menu .download-format-panel { left: auto; right: 0; }
.component-head-actions { display: flex; gap: 8px; align-items: center; }
.global-task-dock { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; pointer-events: none; }
.global-task-dock-inner { pointer-events: auto; margin: 0 auto; max-width: 920px; background: rgba(23, 61, 103, 0.96); color: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: 0 18px 40px rgba(10, 24, 44, 0.28); }
.global-task-dock-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 13px; }
.global-task-dock-head .text-button { color: #dbeafe; margin-left: auto; }
.global-task-dock-list { display: flex; gap: 8px; overflow: auto; }
.global-task-chip { border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); color: #fff; border-radius: 999px; padding: 8px 12px; display: inline-flex; gap: 8px; align-items: center; cursor: pointer; white-space: nowrap; }
.global-task-chip em { font-style: normal; font-size: 11px; opacity: 0.85; }
.danger-text { color: #b53b4c !important; }


/* ===== Single workspace polish: alignment + inpaint compare + @ refs ===== */
.workspace[data-workspace="single"] .workspace-heading { margin-bottom: 18px; }
.workspace[data-workspace="single"] .workspace-heading .lead { max-width: 52ch; }
.single-operation-grid { margin-bottom: 22px; }
.single-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  gap: 24px;
  align-items: start;
}
.single-source-panel {
  min-width: 0;
  display: grid;
  gap: 14px;
  align-content: start;
}
.single-form-panel {
  min-width: 0;
  display: grid;
  gap: 0;
  padding: 22px 22px 20px;
  align-content: start;
}
.single-form-panel .panel-head { margin-bottom: 16px; }
.single-form-panel .field.wide { margin-bottom: 14px; }
.single-form-panel .field > span { letter-spacing: .01em; }
.single-quality-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  margin: 4px 0 12px;
  align-items: end;
}
.single-quality-grid .single-quality-preset { grid-column: 1 / -1; }
.single-quality-grid .field { margin: 0; }
.single-form-panel .single-output-note { margin: 0 0 14px; }
.single-form-panel .confirm-line { margin: 0 0 12px; }
.single-form-panel #singleSubmitBtn { margin-top: 2px; }

.single-inpaint-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.single-inpaint-compare.hidden { display: none !important; }
.single-inpaint-pane {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d5e2ed;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(34, 68, 102, .06);
}
.single-inpaint-pane > figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #e4edf4;
  background: linear-gradient(180deg, #f8fbfe, #f3f8fc);
  color: #355875;
  font-size: 12px;
  font-weight: 750;
}
.single-inpaint-pane > figcaption small { color: #7a91a6; font-size: 10px; font-weight: 600; }
.single-inpaint-frame {
  position: relative;
  aspect-ratio: 1;
  background:
    linear-gradient(45deg, #e8eef4 25%, transparent 25%) 0 0 / 14px 14px,
    linear-gradient(-45deg, #e8eef4 25%, transparent 25%) 0 7px / 14px 14px,
    #f4f8fb;
}
.single-inpaint-frame > img,
.single-inpaint-frame .single-mask-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.single-inpaint-pane.is-edit .single-inpaint-frame { background: #0f1b2a; }
.single-dropzone.is-inpaint-active {
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  opacity: 0;
  pointer-events: none;
  background: transparent;
  box-shadow: none;
}
.single-dropzone.is-inpaint-active > .upload-icon,
.single-dropzone.is-inpaint-active > strong,
.single-dropzone.is-inpaint-active > small,
.single-dropzone.is-inpaint-active > .single-source-preview {
  display: none !important;
}
.single-inpaint-frame .single-mask-canvas {
  transform: none;
  left: 0;
  top: 0;
  box-shadow: none;
}
.single-inpaint-frame .single-mask-hint {
  bottom: 10px;
}

.single-mask-tools {
  grid-template-columns: minmax(140px, 1.2fr) minmax(160px, 1fr) repeat(3, auto);
  gap: 10px;
}
.single-mask-tools label {
  grid-template-columns: auto 1fr auto;
}

.single-ref-block {
  position: relative;
  margin: 0 0 14px;
  padding: 12px 13px;
  border: 1px solid #d7e5f0;
  border-radius: 14px;
  background: linear-gradient(180deg, #f7fbfe, #f3f8fc);
}
.single-ref-head { display: grid; gap: 4px; margin-bottom: 10px; }
.single-ref-head strong { font-size: 12px; color: #2f5678; }
.single-ref-head small { color: #6f8498; font-size: 11px; line-height: 1.45; }
.single-ref-head kbd {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid #c5d6e6;
  border-radius: 5px;
  background: #fff;
  font-size: 10px;
}
.single-ref-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 28px; }
.single-ref-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 4px 8px 4px 4px;
  border: 1px solid #cfe0ee;
  border-radius: 999px;
  background: #fff;
  color: #2f5678;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.single-ref-chip img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: #e8eef4;
}
.single-ref-chip .remove-ref {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  color: #8a5b58;
  background: #f3e6e4;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.single-ref-actions { margin-top: 10px; }
.single-at-menu {
  position: absolute;
  left: 12px;
  right: 12px;
  top: calc(100% - 4px);
  z-index: 20;
  max-height: 220px;
  overflow: auto;
  padding: 6px;
  border: 1px solid #c9d9e7;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(28, 55, 84, .16);
}
.single-at-menu.hidden { display: none !important; }
.single-at-option {
  width: 100%;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
  padding: 7px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.single-at-option:hover,
.single-at-option.is-active { background: #eef5fb; }
.single-at-option img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  background: #e8eef4;
}
.single-at-option strong { display: block; font-size: 12px; color: #2a4f72; }
.single-at-option small { color: #7a91a6; font-size: 10px; }

@media (max-width: 1100px) {
  .single-grid { grid-template-columns: 1fr; }
  .single-inpaint-compare { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .single-quality-grid { grid-template-columns: 1fr; }
  .single-quality-grid .single-quality-preset { grid-column: auto; }
  .single-mask-tools { grid-template-columns: 1fr 1fr; }
}