:root {
  --page:#f5f6f2;
  --paper:#fff;
  --ink:#172c30;
  --muted:#6d7d7e;
  --line:#e1e7e3;
  --accent:#13755e;
  --accent-soft:#edf7f1;
  --danger:#a84735;
  --mono:"SFMono-Regular",Consolas,monospace;
  --sans:"Avenir Next","PingFang SC","Microsoft YaHei",sans-serif;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:var(--page);
  color:var(--ink);
  font:14px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea {
  font:inherit;
}
button,a,input,select,textarea,summary {
  touch-action:manipulation;
}
button {
  cursor:pointer;
}
button:disabled {
  cursor:not-allowed;
  opacity:.45;
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid #75b99b;
  outline-offset:3px;
}
input:focus,select:focus,textarea:focus {
  outline:0;
  border-color:var(--accent);
  box-shadow:0 0 0 3px #13755e14;
}
[hidden] {
  display:none!important;
}
.topbar {
  height:80px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5.4%;
  background:var(--paper);
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--ink);
  font-size:16px;
  letter-spacing:1px;
}
.brand strong {
  font-size:12px;
  letter-spacing:1.8px;
  font-weight:600;
}
.brand .brand-name {
  font-size:20px;
  font-weight:600;
  letter-spacing:2px;
}
.brand-mark {
  display:grid;
  place-items:center;
  width:34px;
  height:38px;
  background:var(--ink);
  color:#fff;
  font:28px Georgia,serif;
  border-radius:3px;
}
.local-tag {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  color:var(--muted);
}
.dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
}
.separator {
  margin:0 4px;
  color:#b5bfbb;
}
main {
  max-width:1460px;
  margin:auto;
  padding:0 5.4%;
}
.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:40px 0 30px;
}
.eyebrow {
  font-size:10px;
  letter-spacing:2px;
  color:var(--accent);
  font-weight:600;
  margin:0 0 9px;
}
h1 {
  font-size:30px;
  line-height:1.35;
  font-weight:600;
  letter-spacing:-.7px;
  margin:0;
}
.intro {
  font-size:13px;
  color:var(--muted);
  margin:12px 0 0;
}
.privacy-note {
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--muted);
  font-size:11px;
}
.privacy-note strong {
  display:block;
  font-size:12px;
  font-weight:500;
  color:var(--ink);
  margin-bottom:3px;
}
.privacy-symbol {
  color:var(--accent);
  font-size:32px;
}
.workspace {
  display:grid;
  grid-template-columns:350px minmax(0,1fr);
  gap:24px;
  align-items:start;
}
.panel {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}
.panel-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:69px;
  padding:20px 24px;
  border-bottom:1px solid var(--line);
}
h2 {
  font-size:15px;
  line-height:1.4;
  margin:0;
  font-weight:600;
}
.step-label {
  font-family:var(--mono);
  font-size:10px;
  color:#93a1a0;
  letter-spacing:.4px;
}
#task-form {
  padding:22px 24px 17px;
}
fieldset {
  border:0;
  padding:0;
  margin:0;
  min-width:0;
}
.mode-tabs {
  display:grid;
  grid-template-columns:1fr 1fr;
  background:#f1f4f1;
  border:1px solid var(--line);
  border-radius:5px;
  padding:3px;
  margin-bottom:24px;
}
.mode-tabs button {
  border:0;
  background:transparent;
  color:var(--muted);
  height:34px;
  border-radius:3px;
  font-size:12px;
}
.mode-tabs button[aria-selected=true] {
  background:#fff;
  color:var(--ink);
  box-shadow:0 1px 4px #172c3010;
  font-weight:600;
}
label {
  display:block;
  font-size:12px;
  font-weight:500;
  margin:0 0 8px;
}
input:not([type=checkbox]):not([type=file]),select {
  width:100%;
  height:43px;
  border:1px solid #dbe3dc;
  border-radius:5px;
  padding:0 12px;
  background:#fbfcfa;
  color:var(--ink);
  min-width:0;
  font-size:13px;
  transition:border-color .15s,box-shadow .15s;
}
input::placeholder {
  color:#98a49f;
  font-size:12px;
}
.label-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:19px;
}
.label-row label {
  margin:0;
}
.text-button {
  border:0;
  background:transparent;
  color:var(--accent);
  font-size:11px;
  padding:6px 0;
}
.label-row .text-button {
  margin-bottom:3px;
}
.optional {
  margin-top:11px;
  color:var(--muted);
  font-size:11px;
}
.optional summary {
  cursor:pointer;
  min-height:24px;
}
.optional input {
  margin-top:7px;
}
.section-line {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  margin-top:24px;
  padding-top:21px;
  margin-bottom:12px;
}
.section-line h3 {
  margin:0;
  font-size:12px;
  font-weight:600;
}
.section-line>span {
  color:var(--muted);
  font-size:10px;
}
.proxy-row {
  display:flex;
  gap:6px;
  align-items:center;
  margin-bottom:8px;
}
.proxy-row input {
  font-family:var(--mono);
}
.remove-proxy {
  width:32px;
  height:40px;
  background:none;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:4px;
  flex-shrink:0;
}
.add-button {
  font-size:11px;
  color:var(--accent);
  border:0;
  background:none;
  padding:5px 0;
}
.field-hint {
  font-size:11px;
  line-height:1.75;
  margin:7px 0 0;
  color:#82908a;
}
.option-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.checkbox-label {
  display:flex;
  align-items:center;
  gap:9px;
  margin:18px 0 0;
  font-size:11px;
  font-weight:400;
  color:var(--muted);
  cursor:pointer;
}
input[type=checkbox] {
  accent-color:var(--accent);
  width:15px;
  height:15px;
  margin:0;
}
.primary-button {
  width:100%;
  height:45px;
  border:0;
  border-radius:5px;
  background:var(--accent);
  color:white;
  padding:0 16px;
  margin-top:25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  font-weight:500;
  transition:background .15s;
}
.primary-button:hover {
  background:#105b49;
}
.primary-button>span:last-child {
  font-size:21px;
  font-weight:400;
}
.submit-hint {
  font-size:10px;
  color:#89978f;
  text-align:center;
  margin:9px 0 0;
}
.form-error {
  font-size:12px;
  color:var(--danger);
  background:#fbf2ee;
  padding:10px 12px;
  border-radius:4px;
  margin-top:16px;
  overflow-wrap:anywhere;
}
.upload-box {
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:5px;
  text-align:center;
  border:1px dashed #b8cbc0;
  border-radius:5px;
  background:#f8fbf7;
  padding:18px 10px;
  cursor:pointer;
}
.upload-icon {
  font-size:24px;
  color:var(--accent);
}
.upload-box strong {
  font-size:12px;
}
.upload-box span:not(.upload-icon) {
  font-size:10px;
  color:var(--muted);
}
.upload-box input {
  max-width:100%;
  font-size:11px;
  margin-top:6px;
}
.upload-box input::file-selector-button {
  border:1px solid var(--line);
  background:#fff;
  border-radius:3px;
  padding:5px;
  font:inherit;
  color:var(--ink);
}
#file-status {
  margin-top:4px;
}
.monitor-column {
  display:flex;
  flex-direction:column;
  gap:20px;
}
.status-badge {
  font-size:10px;
  font-weight:500;
  padding:4px 10px;
  border-radius:4px;
  white-space:nowrap;
  background:#f2f4f1;
  color:var(--muted);
}
.status-badge.running {
  background:#edf4ff;
  color:#436c9c;
}
.status-badge.succeeded {
  background:var(--accent-soft);
  color:var(--accent);
}
.status-badge.failed {
  background:#fbefea;
  color:var(--danger);
}
.run-summary {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  padding:24px;
}
.run-summary>div {
  border-right:1px solid var(--line);
  padding-left:24px;
}
.run-summary>div:first-child {
  padding-left:0;
}
.run-summary>div:last-child {
  border:0;
}
.metric-label {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-bottom:7px;
}
.run-summary strong {
  font:24px/1.3 var(--mono);
  letter-spacing:-1px;
}
.run-summary small {
  font-size:12px;
  color:#a0ada8;
  margin-left:6px;
  letter-spacing:0;
}
.progress-footer {
  border-top:1px solid var(--line);
  padding:15px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  background:#fcfdfb;
}
.progress-footer p {
  font-size:11px;
  color:var(--muted);
  margin:0;
  line-height:1.7;
}
.secondary-button {
  min-height:32px;
  white-space:nowrap;
  border:1px solid #d8ded8;
  border-radius:4px;
  background:#fff;
  color:var(--muted);
  font-size:11px;
  padding:5px 12px;
}
.count {
  font:10px var(--mono);
  color:var(--accent);
  background:var(--accent-soft);
  padding:2px 5px;
  border-radius:3px;
  margin-left:5px;
}
.results-panel .panel-title {
  min-height:61px;
  padding-top:17px;
  padding-bottom:17px;
}
.empty-state {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:33px 20px;
  color:var(--muted);
}
.empty-mark {
  font:32px var(--sans);
  color:#a3b6a9;
  border:1px solid #dce5dc;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
}
.empty-state strong {
  font-size:12px;
  color:#64786a;
  font-weight:500;
}
.empty-state p {
  font-size:11px;
  margin:5px 0 0;
}
.result-card {
  padding:20px 24px;
  border-bottom:1px solid var(--line);
  display:flex;
  gap:20px;
  align-items:flex-start;
}
.result-card:last-child {
  border:0;
}
.result-details {
  min-width:0;
  flex:1;
}
.result-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
  font-size:12px;
}
.result-meta strong {
  font-weight:600;
}
.expiry {
  font:10px var(--mono);
  color:var(--accent);
}
.expiry.expired {
  color:var(--danger);
}
.verified-label {
  font-size:10px;
  color:var(--accent);
  margin-bottom:6px;
}
.result-url {
  display:block;
  color:#5b7470;
  font-family:var(--mono);
  font-size:11px;
  word-break:break-all;
  text-decoration:none;
  line-height:1.7;
}
.result-url:hover {
  text-decoration:underline;
}
.result-actions {
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:10px;
}
.result-actions a {
  font-size:11px;
  color:var(--accent);
  text-decoration:none;
}
.result-qr {
  width:88px;
  height:88px;
  object-fit:contain;
  background:white;
  border:1px solid var(--line);
  border-radius:4px;
  padding:4px;
}
.logs-panel {
  border-radius:8px;
  background:#152b2e;
  color:#cfddd6;
  border:1px solid #152b2e;
  overflow:hidden;
}
.logs-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 22px;
  border-bottom:1px solid #ffffff0d;
}
.logs-heading h2 {
  font-size:12px;
  color:#e4ece6;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:8px;
}
.terminal-dot {
  width:5px;
  height:5px;
  background:#6dac91;
  border-radius:50%;
}
.logs-heading>span {
  font:9px var(--mono);
  color:#65877d;
  letter-spacing:1.4px;
}
.logs {
  height:218px;
  overflow:auto;
  padding:17px 22px;
  font:11px/1.95 var(--mono);
  scrollbar-color:#42635a transparent;
}
.log-placeholder {
  color:#7f9b90;
  margin:0;
}
.cursor {
  color:#7bba9d;
  animation:blink 1s steps(1) infinite;
}
.log-row {
  display:flex;
  gap:15px;
}
.log-time {
  color:#567a70;
  flex-shrink:0;
}
.log-text {
  overflow-wrap:anywhere;
  white-space:pre-wrap;
}
.log-row.error .log-text {
  color:#e5ad92;
}
.log-row.success .log-text {
  color:#8fd8ad;
}
footer {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:26px 0 30px;
  color:#95a29a;
  font-size:10px;
}
footer>span:first-child {
  font:9px var(--mono);
  letter-spacing:1px;
}
.footer-slash {
  padding:0 8px;
  color:#b1bdb6;
}
.toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  padding:10px 20px;
  border:1px solid #34534a;
  background:var(--ink);
  color:#fff;
  box-shadow:0 4px 20px #172c3020;
  border-radius:5px;
  font-size:12px;
  z-index:10;
  max-width:90vw;
  text-align:center;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
@keyframes blink {
  50% {
    opacity:0;
  }
}
@media(min-width:1440px) {
  .workspace {
    grid-template-columns:380px minmax(0,1fr);
  }
  h1 {
    font-size:34px;
  }
}
@media(max-width:1100px) {
  main {
    padding:0 4%;
  }
  .topbar {
    padding:0 4%;
  }
  .workspace {
    grid-template-columns:320px minmax(0,1fr);
    gap:18px;
  }
  .privacy-note {
    display:none;
  }
}
@media(max-width:760px) {
  .topbar {
    height:68px;
  }
  .brand {
    gap:8px;
    font-size:14px;
  }
  .brand strong {
    font-size:10px;
  }
  .local-tag {
    font-size:10px;
    gap:6px;
  }
  .separator {
    margin:0;
  }
  .page-heading {
    padding:28px 0 23px;
  }
  h1 {
    font-size:25px;
  }
  .intro {
    font-size:12px;
    max-width:300px;
  }
  .workspace {
    grid-template-columns:1fr;
    gap:18px;
  }
  .config-panel {
    width:100%;
  }
  .monitor-column {
    gap:18px;
  }
  .run-summary strong {
    font-size:22px;
  }
  .run-summary>div {
    padding-left:16px;
  }
  footer {
    flex-direction:column;
    gap:8px;
  }
  .result-card {
    gap:12px;
  }
  .result-qr {
    width:72px;
    height:72px;
  }
  .mode-tabs button,.text-button,.add-button {
    min-height:36px;
  }
  .secondary-button {
    min-height:44px;
  }
  .remove-proxy {
    height:44px;
  }
  .upload-box input::file-selector-button {
    min-height:44px;
  }
  .logs {
    height:240px;
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    animation:none!important;
    transition:none!important;
  }
}
a.text-button {
  text-decoration: none;
}
a.text-button.disabled {
  opacity: .45;
  cursor: not-allowed;
}
@media(max-width:760px) {
  input:not([type=checkbox]):not([type=file]), select, .mode-tabs button, .text-button, .add-button {
    min-height: 44px;
  }
}

textarea {
  display: block;
  width: 100%;
  min-height: 108px;
  resize: vertical;
  border: 1px solid #dbe3dc;
  border-radius: 5px;
  padding: 10px 12px;
  background: #fbfcfa;
  color: var(--ink);
  font: 12px/1.8 var(--mono);
  overflow-wrap: anywhere;
}
textarea::placeholder { color: #98a49f; font-family: var(--sans); }
.proxy-label { margin-top: 12px; }
.account-email { margin: -5px 24px 22px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.result-email { margin: 0 0 8px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.account-list-heading { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 0 24px 12px; }
.account-list-heading h3 { margin: 0; font-size: 12px; }
.account-list-heading > span { font-size: 11px; color: var(--muted); }
.account-tasks { max-height: 350px; overflow: auto; margin: 0 24px 22px; border-top: 1px solid var(--line); }
.account-task { padding: 12px 0; border-bottom: 1px solid var(--line); }
.account-task-identity strong { font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.account-task-identity .field-hint { display: block; margin-top: 2px; }
.account-task-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 7px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
#concurrency { margin-bottom: 4px; }
#concurrency + .field-hint { margin-bottom: 16px; }

/* Local task board: gray canvas, white cards, 14px rhythm; compact desktop / 44px mobile controls. */
body:has(.workspace-main) { background:#f4f5f6; }
.workspace-main { max-width:1920px; padding:0 28px; --page:#f4f5f6; --ink:#252c33; --muted:#79828e; --line:#e2e6eb; --danger:#b43b4c; }
.client-topbar { padding-left:28px; padding-right:28px; }
.workspace-main .page-heading { padding:28px 0 26px; }
.workspace-main h1 { font-size:28px; letter-spacing:-.5px; }
.workspace-main .intro { margin-top:8px; }
.workspace-main .workspace { grid-template-columns:300px minmax(0,1fr); gap:24px; }
.workspace-main .config-panel { border-radius:7px; }
.workspace-main .config-panel .panel-title { min-height:58px; padding:16px 20px; }
.workspace-main #task-form { padding:20px; }
.workspace-main .monitor-column { min-width:0; }
.workspace-main .field-hint { color:#79828e; }
.workspace-main .privacy-note { font-size:11px; }
.task-board { min-width:0; }
.board-toolbar, .bulk-actions, .board-task-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.board-toolbar { justify-content:space-between; gap:10px; margin-bottom:22px; }
.board-task-actions { margin-left:auto; }
.board-button { min-height:35px; padding:7px 10px; border:1px solid #d8dee5; border-radius:5px; color:#4a535d; background:#f9fafb; font-size:11px; font-weight:600; line-height:1.5; white-space:nowrap; transition:background .15s,border-color .15s; }
.board-button:hover:not(:disabled) { background:#eef1f4; border-color:#a8b2be; }
.board-button.accent { color:var(--accent); border-color:#aed7c9; background:#f3f9f6; }
.board-button.accent:hover:not(:disabled) { background:#e3f2ec; border-color:#6db49b; }
.board-button.danger { color:var(--danger); border-color:#ebbac3; background:#fff7f8; }
.board-button.danger:hover:not(:disabled) { background:#fcebed; border-color:#d77988; }
.board-button:disabled { opacity:.4; }
.board-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.board-heading .eyebrow { font-size:10px; letter-spacing:.5px; margin:0 0 4px; font-weight:800; }
.board-title-line { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.board-title-line h2 { font-size:22px; letter-spacing:-.5px; }
#batch-summary { color:var(--muted); font:10px/1.6 var(--mono); overflow-wrap:anywhere; }
.board-overview { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px; flex-wrap:wrap; }
.task-filters { display:flex; flex-wrap:wrap; gap:4px; }
.task-filters button { display:inline-flex; align-items:center; gap:6px; font-size:11px; border:1px solid transparent; color:var(--muted); background:transparent; border-radius:5px; padding:6px 9px; min-height:32px; }
.task-filters strong { font-size:13px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.task-filters button:hover { background:#eaedf0; }
.task-filters button[aria-pressed=true] { background:white; border-color:#dce2e6; color:var(--ink); box-shadow:0 1px 2px #182c3010; }
.task-filters [data-filter=succeeded] strong { color:var(--accent); }
.task-filters [data-filter=failed] strong { color:var(--danger); }
#download-button { font-size:11px; white-space:nowrap; }
.task-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(245px,1fr)); gap:14px; align-items:start; }
.task-card { min-width:0; height:302px; border:1px solid #dbe1e7; background:white; border-radius:7px; padding:12px; display:flex; flex-direction:column; box-shadow:0 2px 5px #203c3310; }
.task-card.succeeded { border-color:#9dcebd; }
.task-card.failed { border-color:#efb4bf; }
.task-card.running { border-color:#b3cbe8; }
.task-card-header { display:flex; align-items:center; gap:8px; min-height:28px; }
.task-number { background:#eef0f2; color:#34414e; border-radius:5px; min-width:26px; height:26px; padding:0 5px; display:grid; place-items:center; font:700 11px var(--mono); }
.task-state { font-size:11px; font-weight:600; white-space:nowrap; }
.succeeded .task-state, .succeeded .task-state-message { color:var(--accent); }
.failed .task-state, .failed .task-state-message { color:var(--danger); }
.running .task-state, .running .task-state-message { color:#507aab; }
.task-card .expiry { font-size:10px; padding:2px 8px; border:1px solid #b4d9cd; background:#f3f9f6; border-radius:4px; white-space:nowrap; margin-left:auto; }
.task-card .expiry.expired { border-color:#e8bbc3; background:#fff6f7; }
.account-details { position:relative; margin-left:auto; }
.task-card .expiry + .account-details { margin-left:2px; }
.task-more { list-style:none; width:28px; height:28px; display:grid; place-items:center; border:1px solid #dce2e8; border-radius:5px; color:#7b8795; font-weight:700; font-size:17px; cursor:pointer; }
.task-more::-webkit-details-marker { display:none; }
.task-more:hover, .account-details[open] .task-more { color:var(--accent); border-color:#99c4b6; background:#f5faf7; }
.account-details-body { position:absolute; z-index:3; right:0; top:35px; width:242px; max-width:calc(100vw - 55px); border:1px solid var(--line); border-radius:6px; background:#fff; box-shadow:0 8px 24px #253c3924; padding:14px; font-size:11px; overflow-wrap:anywhere; }
.account-details-body p { margin:8px 0; color:var(--muted); }
.account-details-body .task-error-detail { color:var(--danger); }
.task-email { font-size:10px; color:var(--muted); margin:8px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-visual { display:flex; align-items:center; justify-content:center; flex:1; min-height:0; padding:10px 0 12px; }
.task-qr-frame { display:grid; place-items:center; width:134px; height:134px; padding:12px; border:1px solid #dce1e7; border-radius:5px; background:#fff; }
.task-qr { width:108px; height:108px; object-fit:contain; }
.task-state-message { text-align:center; color:#8b96a3; max-width:100%; }
.task-state-symbol { display:block; font:700 29px/1.25 var(--sans); margin-bottom:7px; }
.task-state-message strong { font-size:11px; font-weight:500; }
.task-state-message p { font-size:10px; line-height:1.6; margin:6px 0 0; overflow-wrap:anywhere; }
.task-reason { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.task-card-footer { border-top:1px solid #e8ebef; padding-top:7px; }
.task-card-meta { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:10px; margin-bottom:6px; }
.task-card-meta strong { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-card-actions { display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; }
.task-card-actions .board-button { padding:6px 3px; min-height:33px; font-size:10px; }
.board-empty { grid-column:1/-1; min-height:390px; border:1px dashed #cdd6dc; border-radius:7px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:30px 20px; color:var(--muted); }
.board-empty-symbol { width:54px; height:54px; display:grid; place-items:center; font-size:28px; border:1px solid #d8e2dd; border-radius:12px; background:#edf5f0; color:var(--accent); margin-bottom:18px; }
.board-empty strong { font-size:16px; color:#42535b; font-weight:500; }
.board-empty p { font-size:12px; margin:10px 0 2px; }
.board-footer { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; color:var(--muted); font-size:10px; margin:12px 0 0; }
.board-footer p { margin:0; font-size:11px; }
.board-footer>span { white-space:nowrap; }
.spinning { animation:task-spin 2.5s linear infinite; }
@keyframes task-spin { to { transform:rotate(360deg); } }
@media(min-width:1700px) { .workspace-main .workspace { grid-template-columns:320px minmax(0,1fr); } }
@media(max-width:1100px) { .workspace-main .workspace { grid-template-columns:270px minmax(0,1fr); gap:18px; } .workspace-main { padding:0 20px; } .task-card-grid { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); } .task-card-header { gap:6px; } .task-card .expiry { padding:2px 5px; } }
@media(max-width:800px) { .workspace-main .workspace { grid-template-columns:1fr; } .workspace-main .privacy-note { display:none; } .workspace-main .page-heading { padding:24px 0; } .board-toolbar { margin-bottom:20px; } .board-task-actions { margin-left:0; } }
@media(max-width:520px) { .workspace-main { padding:0 16px; } .client-topbar { padding-left:16px; padding-right:16px; } .workspace-main h1 { font-size:26px; } .task-card-grid { grid-template-columns:1fr; } .task-card { height:335px; padding:14px; } .board-button, .task-card-actions .board-button { min-height:44px; } .task-filters button { min-height:44px; padding:6px 9px; } .task-more { width:44px; height:44px; } .account-details-body { top:49px; } .task-card-actions .board-button { font-size:11px; } .task-email { font-size:11px; } .board-title-line { gap:6px 12px; } .board-title-line #batch-summary { flex-basis:100%; } .board-footer { flex-direction:column; gap:6px; } .bulk-actions { display:grid; grid-template-columns:1fr 1fr; width:100%; } .bulk-actions .board-button { white-space:normal; } .board-empty { min-height:280px; } }
@media(prefers-reduced-motion:reduce) { .spinning { animation:none; } .board-button { transition:none; } }