/* Task workspace: paper sidebar, a calm conversation sheet and a store rail.
   Roles come from tokens.css; status colors always pair with a dot and a label. */
.wk-layout, .wk-dialog { font: 400 var(--fs-body)/1.7 var(--font-sans); color: var(--ink); }
.wk-layout button, .wk-dialog button { padding: 0; border: 0; background: none; color: inherit; line-height: 1.5; }
.wk-layout a { color: inherit; text-decoration: none; }
.wk-layout p { margin: 0; }
.wk-layout button:disabled, .wk-dialog button:disabled { cursor: not-allowed; }
.wk-muted { color: var(--muted); }

.wk-layout { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr) 288px; height: 100dvh; min-height: 520px; overflow: hidden; background: var(--paper); }

/* Sidebar */
.wk-sidebar { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 20px 14px 14px; background: var(--paper); }
.wk-brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 18px; font: 700 18px/1.2 var(--font-serif); letter-spacing: .01em; }
.wk-brand img { width: 28px; height: 28px; border-radius: 7px; }
.wk-space {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); font-size: var(--fs-small); font-weight: 600;
}
.wk-space:hover { border-color: var(--line-strong); }
.wk-space > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-space-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; flex: none; background: var(--accent); color: var(--on-accent); font: 600 13px/1 var(--font-serif); }
.wk-space > .ui-icon { width: 16px; height: 16px; color: var(--muted); }
.wk-layout .wk-new {
  display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px; margin-bottom: 14px;
  border: 1px solid var(--control); border-radius: var(--r-m); background: var(--surface); font-weight: 600;
}
.wk-layout .wk-new:hover { background: var(--hover); }
.wk-new > .ui-icon { width: 17px; height: 17px; color: var(--accent); }
.wk-new kbd { margin-left: auto; padding: 2px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--r-s); font: 500 11px/1 var(--font-mono); color: var(--muted); }
.wk-filters { display: grid; gap: 1px; margin-bottom: 18px; }
.wk-filters button {
  display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 10px; border-radius: var(--r-m);
  text-align: left; color: var(--ink-2);
}
.wk-filters button .ui-icon { width: 17px; height: 17px; color: var(--muted); }
.wk-filters button:hover { background: var(--hover); color: var(--ink); }
.wk-filters button[aria-current] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
.wk-filters button[aria-current] .ui-icon { color: var(--accent); }
.wk-filters button > span:last-child { margin-left: auto; font-size: var(--fs-caption); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.wk-filters button[data-value=attention] > span:last-child { color: var(--warn); }
.wk-list-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 0 10px; font-size: var(--fs-caption); color: var(--muted); }
.wk-list-head button { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-m); color: var(--muted); }
.wk-list-head button:hover { background: var(--hover); color: var(--ink); }
.wk-list-head .ui-icon { width: 15px; height: 15px; }
.wk-search { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--surface); }
.wk-search:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.wk-search > .ui-icon { width: 15px; height: 15px; color: var(--muted); }
.wk-search input { width: 100%; min-width: 0; padding: 7px 0; border: 0; background: transparent; color: var(--ink); font-size: var(--fs-small); outline: none; }
.wk-task-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; }
.wk-task-link { display: block; padding: 8px 10px; border-radius: var(--r-m); }
.wk-task-link:hover { background: var(--hover); }
.wk-task-link[aria-current] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.wk-task-title { display: flex; align-items: center; gap: 6px; overflow: hidden; font-size: var(--fs-small); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.wk-unread { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.wk-task-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-top: 2px; font-size: var(--fs-caption); }
.wk-task-meta time { color: var(--muted); white-space: nowrap; }
.wk-list-empty { padding: 16px 10px; font-size: var(--fs-caption); color: var(--muted); }
.wk-layout .wk-load-more { display: block; margin: 12px auto; color: var(--accent-ink); font-size: var(--fs-small); font-weight: 500; }
.wk-sidebar-footer { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.wk-sidebar-footer > a:first-child:not(.wk-person) { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-m); color: var(--ink-2); }
.wk-sidebar-footer > a:hover { background: var(--hover); }
.wk-sidebar-footer .ui-icon { width: 17px; height: 17px; color: var(--muted); }
.wk-sidebar-footer > a > .ui-icon:last-child { margin-left: auto; width: 15px; height: 15px; }
.wk-person { display: flex; align-items: center; gap: 10px; padding: 8px 10px 2px; border-radius: var(--r-m); }
.wk-person > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; font-size: var(--fs-small); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.wk-person small { display: block; font-size: var(--fs-caption); font-weight: 400; color: var(--muted); }
.wk-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-caption); font-weight: 600; }

/* Conversation sheet */
.wk-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.wk-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; height: 56px; padding: 0 28px; border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--muted); }
.wk-topbar > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wk-topbar #work-breadcrumb { overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.wk-shop-toggle, .wk-mobile, .wk-shop-close { display: none; }
.wk-conversation { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.wk-welcome { width: 100%; max-width: 760px; margin: 0 auto; padding: clamp(36px, 8vh, 96px) 32px 24px; }
.wk-welcome-mark { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); color: var(--muted); }
.wk-welcome-mark img { width: 22px; height: 22px; border-radius: 5px; }
.wk-welcome h1 { margin: 14px 0 8px; font: 600 clamp(30px, 2.8vw, 40px)/1.3 var(--font-serif); letter-spacing: .01em; }
.wk-welcome h1 > span { color: var(--accent); }
.wk-welcome > p { font-size: var(--fs-lead); color: var(--ink-2); }
.wk-suggestions { display: grid; margin-top: 32px; border-top: 1px solid var(--line); }
.wk-suggestions button {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 16px; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  padding: 14px 6px; border-bottom: 1px solid var(--line); text-align: left;
}
.wk-suggestions button::after {
  content: ""; grid-column: 3; grid-row: 1 / 3; width: 14px; height: 14px; background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.wk-suggestions button:hover { background: var(--paper); }
.wk-suggestions button:hover::after { background: var(--accent); transform: translateX(3px); }
.wk-suggestion-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); color: var(--accent); }
.wk-suggestion-icon .ui-icon { width: 17px; height: 17px; }
.wk-suggestions strong { font-size: 15px; font-weight: 600; }
.wk-suggestions button > span:last-child { grid-column: 2; font-size: var(--fs-small); color: var(--muted); }
.wk-welcome-foot { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: var(--fs-small); color: var(--muted); }
.wk-welcome-foot .ui-icon { width: 15px; height: 15px; color: var(--ok); }

.wk-compose-wrap { flex: none; width: 100%; max-width: 824px; margin: 0 auto; padding: 12px 32px 16px; }
.wk-composer { padding: 14px 14px 10px 18px; border: 1px solid var(--line-strong); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-lift); }
.wk-composer:focus-within { border-color: var(--focus); outline: 2px solid color-mix(in srgb, var(--focus) 35%, transparent); outline-offset: 0; }
.wk-composer textarea { display: block; width: 100%; min-height: 52px; max-height: 180px; padding: 0; border: 0; outline: none; background: none; color: var(--ink); font: 400 15px/1.75 var(--font-sans); resize: none; }
.wk-compose-bottom { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.wk-layout .wk-context { display: flex; align-items: center; gap: 6px; max-width: 55%; height: 30px; padding: 0 10px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-m); font-size: var(--fs-small); font-weight: 500; }
.wk-layout .wk-context:hover { background: var(--hover); }
.wk-context .ui-icon { width: 15px; height: 15px; color: var(--accent); }
.wk-context span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-keyhint { margin-left: auto; font-size: var(--fs-caption); color: var(--muted); white-space: nowrap; }
.wk-layout .wk-send { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: var(--r-m); background: var(--accent); color: var(--on-accent); }
.wk-layout .wk-send:hover { background: var(--accent-hover); }
.wk-layout .wk-send:disabled { background: var(--disabled-bg); color: var(--disabled-ink); }
.wk-send .ui-icon { width: 17px; height: 17px; }
.wk-compose-note { margin-top: 8px; text-align: center; font-size: var(--fs-caption); color: var(--muted); }
.wk-error, .wk-pending { margin: 12px 28px 0; padding: 10px 14px; border-radius: var(--r-m); font-size: var(--fs-small); overflow-wrap: anywhere; }
.wk-error { background: var(--danger-bg); color: var(--danger); }
.wk-pending { background: var(--warn-bg); color: var(--warn); }
.wk-pending button { margin-left: 6px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Thread */
.wk-thread { width: 100%; max-width: 800px; margin: 0 auto; padding: 32px 32px 24px; }
.wk-thread-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.wk-thread-head > div:first-child { flex: 1; min-width: 0; }
.wk-eyebrow { font-size: var(--fs-caption); font-weight: 500; color: var(--muted); }
.wk-thread-head h1 { margin: 6px 0 12px; font: 600 26px/1.4 var(--font-serif); letter-spacing: .01em; overflow-wrap: anywhere; }
.wk-thread-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: var(--fs-caption); color: var(--muted); }
.wk-thread-actions { display: flex; gap: 6px; flex: none; }
.wk-thread-actions button { height: 30px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-m); font-size: var(--fs-small); font-weight: 500; }
.wk-thread-actions button:hover { background: var(--hover); }

.wk-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.wk-status i, .wk-shop-state i { display: block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.wk-thread-meta .wk-status { height: 22px; padding: 0 8px; border-radius: var(--r-s); background: var(--sunken); }
.wk-status:is([data-state=awaiting_approval], [data-state=awaiting_review], [data-state=needs_input], [data-state=blocked], [data-state=partial], [data-state=uncertain], [data-state=needs_human], [data-state=awaiting_assertion], [data-state=paused]) { color: var(--warn); }
.wk-status:is([data-state=completed], [data-state=succeeded], [data-state=verified]) { color: var(--ok); }
.wk-status:is([data-state=failed], [data-state=dead_letter]) { color: var(--danger); }
.wk-status:is([data-state=running], [data-state=thinking], [data-state=started], [data-state=leased], [data-state=queued]) { color: var(--info); }
.wk-thread-meta .wk-status:is([data-state=awaiting_approval], [data-state=awaiting_review], [data-state=needs_input], [data-state=blocked], [data-state=partial], [data-state=paused]) { background: var(--warn-bg); }
.wk-thread-meta .wk-status:is([data-state=completed], [data-state=succeeded], [data-state=verified]) { background: var(--ok-bg); }
.wk-thread-meta .wk-status:is([data-state=failed], [data-state=dead_letter]) { background: var(--danger-bg); }
.wk-thread-meta .wk-status:is([data-state=running], [data-state=thinking], [data-state=started]) { background: var(--info-bg); }

.wk-events { display: grid; gap: 24px; }
.wk-event-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; font-size: var(--fs-small); font-weight: 600; }
.wk-event:not(.wk-from-user) .wk-event-head > span { font-family: var(--font-serif); }
.wk-event-head time { font-size: var(--fs-caption); font-weight: 400; color: var(--muted); }
.wk-event p { font-size: var(--fs-body); line-height: 1.85; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.wk-from-user { margin-left: 18%; padding: 12px 16px; border-radius: var(--r-l) var(--r-l) var(--r-s) var(--r-l); background: var(--sunken); }
.wk-from-user p { color: var(--ink); }
.wk-working { display: flex; align-items: center; gap: 10px; padding: 20px 0; font-size: var(--fs-small); color: var(--ink-2); }
.wk-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: wk-pulse 1.6s var(--ease) infinite; }
@keyframes wk-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 60% { box-shadow: 0 0 0 7px transparent; } }

.wk-plan, .wk-delivery, .wk-results { margin-top: 24px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.wk-plan { border-left: 3px solid var(--accent); }
.wk-delivery[data-state=accepted] { border-left: 3px solid var(--ok); }
.wk-delivery[data-state=partial] { border-left: 3px solid var(--warn); }
.wk-card-kicker { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--fs-caption); font-weight: 500; color: var(--muted); }
.wk-card-kicker > span { height: 22px; padding: 0 8px; border-radius: var(--r-s); background: var(--sunken); color: var(--ink-2); line-height: 22px; }
.wk-delivery[data-state=partial] .wk-card-kicker > span { background: var(--warn-bg); color: var(--warn); }
.wk-delivery[data-state=accepted] .wk-card-kicker > span { background: var(--ok-bg); color: var(--ok); }
.wk-delivery[data-state=verified] .wk-card-kicker > span { background: var(--info-bg); color: var(--info); }
.wk-plan h2, .wk-delivery h2 { margin: 6px 0 12px; font-size: var(--fs-h3); font-weight: 600; line-height: 1.5; }
.wk-plan ol { margin: 0; padding: 0; list-style: none; counter-reset: wk-step; }
.wk-plan li { counter-increment: wk-step; display: grid; grid-template-columns: 30px minmax(0, 1fr); padding: 10px 0; border-top: 1px dashed var(--line); }
.wk-plan li::before { content: counter(wk-step, decimal-leading-zero); grid-row: 1 / 3; padding-top: 2px; font: 500 var(--fs-caption)/1.8 var(--font-mono); color: var(--muted); }
.wk-plan li > span { font-size: var(--fs-body); font-weight: 500; }
.wk-plan li small { grid-column: 2; font-size: var(--fs-caption); color: var(--muted); }
.wk-acceptance { margin: 14px 0 4px; padding: 12px 14px; border-radius: var(--r-m); background: var(--sunken); }
.wk-acceptance > span { font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2); }
.wk-acceptance p { margin-top: 2px; font-size: var(--fs-small); line-height: 1.8; color: var(--ink-2); }
.wk-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.wk-card-actions > span, .wk-card-actions > small { font-size: var(--fs-caption); color: var(--muted); }
.wk-card-actions > div { display: flex; gap: 8px; }
.wk-layout :is(.wk-primary, .wk-secondary), .wk-dialog :is(.wk-primary, .wk-secondary) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 16px;
  border-radius: var(--r-m); font-size: var(--fs-body); font-weight: 500; white-space: nowrap; text-decoration: none;
}
.wk-layout .wk-primary, .wk-dialog .wk-primary { border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); }
.wk-layout .wk-primary:hover, .wk-dialog .wk-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.wk-layout .wk-secondary, .wk-dialog .wk-secondary { border: 1px solid var(--control); background: var(--surface); color: var(--ink); }
.wk-layout .wk-secondary:hover, .wk-dialog .wk-secondary:hover { background: var(--hover); }
.wk-layout :is(.wk-primary, .wk-secondary):disabled, .wk-dialog :is(.wk-primary, .wk-secondary):disabled { border-color: var(--disabled-bg); background: var(--disabled-bg); color: var(--disabled-ink); }
.wk-layout :is(.wk-text-button, .wk-capability-link) { margin-top: 16px; color: var(--accent-ink); font-size: var(--fs-small); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.wk-result-row, .wk-delivery-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.wk-result-row > span:first-child { font-size: var(--fs-small); }
.wk-delivery-item strong { font-weight: 600; }
.wk-delivery-item small { display: block; margin-top: 2px; font-size: var(--fs-caption); color: var(--muted); }
.wk-delivery-item button { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--r-m); color: var(--accent-ink); font-size: var(--fs-small); font-weight: 500; white-space: nowrap; }
.wk-delivery-item button:hover { background: var(--accent-tint); }
.wk-delivery-item .ui-icon { width: 15px; height: 15px; }
.wk-delivery > p { margin-top: 12px; font-size: var(--fs-small); }
.wk-blocked { margin: 24px 0; padding: 16px 18px; border-left: 3px solid var(--warn); border-radius: 0 var(--r-m) var(--r-m) 0; background: var(--warn-bg); }
.wk-blocked strong { font-weight: 600; color: var(--warn); }
.wk-blocked p { margin-top: 4px; font-size: var(--fs-small); color: var(--ink-2); }
.wk-blocked :is(button, a) { margin: 8px 16px 0 0; font-size: var(--fs-small); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.wk-schedule-card { display: flex; gap: 12px; margin-bottom: 24px; padding: 14px 16px; border-radius: var(--r-m); background: var(--info-bg); }
.wk-schedule-card > .ui-icon { color: var(--info); }
.wk-schedule-card strong { font-weight: 600; }
.wk-schedule-card p, .wk-schedule-card small { display: block; margin-top: 2px; font-size: var(--fs-caption); color: var(--ink-2); }
.wk-empty { max-width: 640px; margin: 0 auto; padding: 96px 32px; }
.wk-empty h1 { font: 600 26px/1.4 var(--font-serif); }
.wk-empty p { margin: 10px 0 20px; color: var(--muted); }

/* Maintenance home */
.wk-maintain-content { max-width: 1040px; margin: 0 auto; padding: 40px 36px; }
.wk-maintain-content > h1 { margin: 6px 0 8px; font: 600 var(--fs-h1)/1.3 var(--font-serif); letter-spacing: .01em; }
.wk-maintain-content > .wk-muted { font-size: var(--fs-lead); }
.wk-maintain-queue { margin: 32px 0 40px; border-top: 1px solid var(--ink); }
.wk-section-title { display: flex; align-items: baseline; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.wk-section-title h2 { font-size: var(--fs-h3); font-weight: 600; }
.wk-section-title span { font-size: var(--fs-small); font-weight: 600; color: var(--warn); }
.wk-maintain-queue > a { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.wk-maintain-queue > a:hover strong { color: var(--accent-ink); }
.wk-maintain-queue > a > div { flex: 1; min-width: 0; }
.wk-maintain-queue strong { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.wk-maintain-queue small { display: block; margin-top: 2px; font-size: var(--fs-caption); color: var(--muted); }
.wk-maintain-queue > a > span:last-child { color: var(--muted); }
.wk-calm-empty { display: flex; align-items: center; gap: 12px; padding: 24px 0; font-size: var(--fs-small); color: var(--ink-2); }
.wk-calm-empty > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); }
.wk-tools-heading { margin-bottom: 14px; font-size: var(--fs-h3); font-weight: 600; }
.wk-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
.wk-tools a { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.wk-tools a:hover { border-color: var(--line-strong); background: var(--paper); }
.wk-tools a > .ui-icon { width: 18px; height: 18px; margin-bottom: 12px; color: var(--accent); }
.wk-tools strong { display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
.wk-tools strong .ui-icon { width: 14px; height: 14px; color: var(--muted); transition: transform var(--dur) var(--ease); }
.wk-tools a:hover strong .ui-icon { transform: translateX(3px); color: var(--accent); }
.wk-tools p { margin-top: 2px; font-size: var(--fs-caption); line-height: 1.7; color: var(--muted); }

/* Store rail */
.wk-shops { display: flex; flex-direction: column; min-height: 0; padding: 0 18px; background: var(--paper); }
.wk-shops > header { display: flex; align-items: center; gap: 8px; flex: none; height: 56px; font-weight: 600; }
.wk-shops > header > .ui-icon { width: 17px; height: 17px; color: var(--accent); }
.wk-shops > header small { margin-left: auto; font-size: var(--fs-caption); font-weight: 400; color: var(--muted); }
.wk-shops #shop-list { flex: 1; min-height: 0; overflow-y: auto; }
.wk-shop { padding: 14px 0; border-bottom: 1px solid var(--line); }
.wk-shop:first-child { border-top: 1px solid var(--line); }
.wk-shop-name { display: flex; align-items: center; gap: 10px; }
.wk-shop-name > div { min-width: 0; }
.wk-shop-name strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.wk-shop-name small { display: block; font-size: var(--fs-caption); color: var(--muted); }
.wk-shop-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); font: 600 14px/1 var(--font-serif); color: var(--ink-2); }
.wk-shop-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--fs-caption); }
.wk-shop-state > span { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-s); background: var(--sunken); color: var(--ink-2); font-weight: 500; }
.wk-shop-state[data-state=ready] > span { background: var(--ok-bg); color: var(--ok); }
.wk-shop-state:is([data-state=offline], [data-state=restricted]) > span { background: var(--warn-bg); color: var(--warn); }
.wk-shop-state time { color: var(--muted); }
.wk-shop-tasks { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.wk-shop-tasks a { display: grid; }
.wk-shop-tasks a > span { overflow: hidden; font-size: var(--fs-small); text-overflow: ellipsis; white-space: nowrap; }
.wk-shop-tasks a:hover > span { color: var(--accent-ink); }
.wk-shop-tasks small { font-size: var(--fs-caption); color: var(--muted); }
.wk-shop-idle { margin-top: 8px; font-size: var(--fs-caption); color: var(--muted); }
.wk-shop-empty { padding: 20px 0; border-top: 1px solid var(--line); }
.wk-shop-empty > .ui-icon { width: 22px; height: 22px; color: var(--accent); }
.wk-shop-empty h3 { margin: 10px 0 4px; font-size: var(--fs-body); font-weight: 600; }
.wk-shop-empty p { font-size: var(--fs-small); color: var(--muted); }
.wk-shop-empty a { display: inline-block; margin-top: 12px; color: var(--accent-ink); font-size: var(--fs-small); font-weight: 600; }
.wk-shop-bottom { padding: 14px 0 18px; font-size: var(--fs-caption); color: var(--muted); }
.wk-shop-bottom > span { display: inline-block; vertical-align: middle; }
.wk-live-dot { width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--ok); }
.wk-shop-bottom p { margin-top: 8px; padding: 10px 12px; border-radius: var(--r-m); background: var(--sunken); line-height: 1.7; }

/* Dialogs */
.wk-dialog {
  width: min(540px, calc(100vw - 32px)); max-height: 86dvh; padding: 24px 28px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-pop);
}
.wk-dialog::backdrop { background: var(--scrim); backdrop-filter: blur(2px); }
.wk-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.wk-dialog h2 { font: 600 var(--fs-h2)/1.4 var(--font-serif); }
.wk-dialog header button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-m); color: var(--muted); }
.wk-dialog header button:hover { background: var(--hover); color: var(--ink); }
.wk-dialog p { font-size: var(--fs-small); line-height: 1.8; }
.wk-dialog form > label, .wk-field-row > label { display: grid; gap: 6px; margin: 14px 0; font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); }
.wk-dialog :where(input:not([type=checkbox]), select, textarea) { width: 100%; padding: 8px 12px; border: 1px solid var(--control); border-radius: var(--r-m); background: var(--surface); color: var(--ink); font: 400 var(--fs-body)/1.6 var(--font-sans); }
.wk-dialog :where(input, select, textarea):focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.wk-dialog textarea { resize: vertical; }
.wk-field-row { display: flex; gap: 12px; }
.wk-field-row > label { flex: 1; min-width: 0; }
.wk-dialog input[type=checkbox] { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--accent); }
.wk-check-list { display: grid; gap: 8px; margin: 18px 0; }
.wk-check-list label { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-m); cursor: pointer; }
.wk-check-list label:hover { background: var(--paper); }
.wk-check-list label:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.wk-check-list strong { display: block; font-weight: 600; }
.wk-check-list small { display: block; font-size: var(--fs-caption); color: var(--muted); }
.wk-check-list label:has(input:checked) small { color: var(--on-tint); }
.wk-dialog footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.wk-dialog label.wk-consent { display: flex; align-items: center; gap: 10px; font-weight: 400; }
.wk-dialog-error { margin-top: 16px; padding: 10px 12px; border-radius: var(--r-m); background: var(--danger-bg); color: var(--danger); font-size: var(--fs-small); }
.wk-grants section { padding: 16px 0; border-bottom: 1px solid var(--line); }
.wk-grants section > strong { margin-right: 8px; font-weight: 600; }
.wk-grants section > small { font-size: var(--fs-caption); color: var(--muted); }
.wk-grants section > label, .wk-grant-stores label { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-size: var(--fs-small); }
.wk-grant-stores { display: grid; gap: 2px; margin: 10px 0; }
.wk-grants section button { margin-top: 8px; }

/* Responsive */
@media (min-width: 1680px) {
  .wk-layout { grid-template-columns: 264px minmax(0, 1fr) 316px; }
}
@media (max-width: 1100px) {
  .wk-layout { grid-template-columns: var(--sidebar) minmax(0, 1fr); }
  .wk-main { border-right: 0; }
  .wk-shops { display: none; }
  .wk-layout .wk-shop-toggle { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-m); font-size: var(--fs-small); font-weight: 500; color: var(--ink); white-space: nowrap; }
  .wk-shop-toggle > .ui-icon { width: 15px; height: 15px; color: var(--accent); }
  .wk-shops-open .wk-shops {
    position: fixed; top: 64px; right: 12px; bottom: 12px; z-index: 50; display: flex; width: 320px; padding: 0 18px;
    border: 1px solid var(--line); border-radius: var(--r-l); background: var(--paper); box-shadow: var(--shadow-pop);
  }
  .wk-layout .wk-shop-close { display: grid; place-items: center; width: 30px; height: 30px; margin-left: 8px; border-radius: var(--r-m); color: var(--muted); }
  .wk-layout .wk-shop-close:hover { background: var(--hover); }
  .wk-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 761px) and (max-height: 800px) {
  .wk-sidebar { padding-top: 14px; }
  .wk-brand { padding-bottom: 12px; }
  .wk-filters { margin-bottom: 10px; }
  .wk-filters button { min-height: 30px; padding-block: 4px; }
  .wk-welcome { padding-top: 28px; }
  .wk-suggestions { margin-top: 22px; }
  .wk-suggestions button { padding-block: 10px; }
  .wk-composer textarea { min-height: 44px; max-height: 120px; }
}
@media (max-width: 760px) {
  .wk-layout { display: flex; min-height: 420px; }
  .wk-main { width: 100%; border: 0; }
  .wk-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 70; width: 280px; padding-top: 20px;
    transform: translateX(-100%); transition: transform .2s var(--ease); box-shadow: none;
  }
  .wk-nav-open .wk-sidebar { transform: none; box-shadow: var(--shadow-pop); }
  .wk-layout .wk-scrim { position: fixed; inset: 0; z-index: 60; width: 100%; height: 100%; background: var(--scrim); }
  .wk-topbar { height: 52px; padding: 0 16px; }
  .wk-layout .wk-mobile { display: grid; place-items: center; width: 34px; height: 34px; margin-left: -6px; border-radius: var(--r-m); }
  .wk-layout .wk-mobile:hover { background: var(--hover); }
  .wk-shops-open .wk-shops { top: 60px; right: 10px; bottom: 10px; width: min(330px, calc(100vw - 20px)); }
  .wk-welcome { padding: 28px 20px 16px; }
  .wk-welcome h1 { font-size: 28px; }
  .wk-welcome > p { font-size: var(--fs-body); }
  .wk-suggestions { margin-top: 22px; }
  .wk-compose-wrap { padding: 8px 12px 12px; }
  .wk-composer { padding: 12px 12px 8px 14px; }
  .wk-composer textarea { min-height: 48px; font-size: 16px; }
  .wk-keyhint { display: none; }
  .wk-layout .wk-context { max-width: 72%; }
  .wk-layout .wk-send { margin-left: auto; }
  .wk-thread { padding: 22px 18px; }
  .wk-thread-head { display: block; }
  .wk-thread-head h1 { font-size: 22px; }
  .wk-thread-actions { margin-top: 14px; }
  .wk-from-user { margin-left: 10%; }
  .wk-plan, .wk-delivery, .wk-results { padding: 16px; }
  .wk-card-actions { flex-direction: column; align-items: stretch; }
  .wk-card-actions > div { justify-content: flex-end; }
  .wk-error, .wk-pending { margin: 10px 16px 0; }
  .wk-maintain-content { padding: 24px 18px; }
  .wk-maintain-content > h1 { font-size: 26px; }
  .wk-maintain-queue > a { flex-wrap: wrap; gap: 6px 10px; }
  .wk-maintain-queue > a > div { flex-basis: 100%; }
  .wk-tools { grid-template-columns: 1fr 1fr; gap: 8px; }
  .wk-tools a { padding: 14px; }
  .wk-tools strong .ui-icon { display: none; }
  .wk-dialog { padding: 20px; }
}