/* NearPortal workspace system — canonical source: nearportal/landing/workspace.css.
   Copied byte-for-byte into nearportal-app/src/workspace by `npm run sync:workspace`.
   Aurora Portal identity (DESIGN-LOCK.md). Colors are the eight locked values and their mixes only.
   Fonts are declared by each frontend (asset paths differ); families: Manrope, Inter, IBM Plex Mono. */

:root {
  --ui-plum: #241933; --ui-paper: #fff7ff; --ui-violet: #a07aeb; --ui-deep-violet: #6e4fb4;
  --ui-pink: #f081bd; --ui-apricot: #fda774; --ui-cyan: #62d0ce; --ui-deep-pink: #a33fac;
  --ui-text: var(--ui-plum);
  --ui-soft: color-mix(in srgb, var(--ui-plum) 72%, var(--ui-violet));
  --ui-line: color-mix(in srgb, var(--ui-violet) 38%, var(--ui-paper));
  --ui-line-strong: color-mix(in srgb, var(--ui-violet) 62%, var(--ui-paper));
  --ui-tint: color-mix(in srgb, var(--ui-violet) 9%, var(--ui-paper));
  --ui-tint-strong: color-mix(in srgb, var(--ui-violet) 20%, var(--ui-paper));
  --ui-action: var(--ui-deep-violet);
  --ui-action-hover: color-mix(in srgb, var(--ui-deep-violet) 84%, var(--ui-plum));
  --ui-heading: Manrope, Inter, system-ui, sans-serif;
  --ui-body: Inter, system-ui, sans-serif;
  --ui-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --ui-width: 1200px; --ui-gutter: 32px;
  --ui-control: 40px; --ui-radius: 12px; --ui-radius-card: 16px; --ui-radius-small: 8px;
  --ui-focus: 0 0 0 3px var(--ui-paper), 0 0 0 5px var(--ui-deep-violet);
  --ui-fast: 150ms;
}
@media (pointer: coarse) { :root { --ui-control: 44px; } }
@media (max-width: 900px) { :root { --ui-gutter: 24px; } }
@media (max-width: 640px) { :root { --ui-gutter: 16px; } }

/* Base — applied to <body class="ui-app"> (landing) or the React root wrapper. */
.ui-app { margin: 0; min-height: 100vh;
  /* Aurora wash from the logo: violet leads, pink and apricot warm the top, cyan a faint accent. Light canvas preserved. */
  background:
    radial-gradient(60% 520px at 0% -120px, color-mix(in srgb, var(--ui-violet) 34%, transparent), transparent 72%),
    radial-gradient(45% 460px at 72% -160px, color-mix(in srgb, var(--ui-pink) 28%, transparent), transparent 70%),
    radial-gradient(35% 380px at 100% -60px, color-mix(in srgb, var(--ui-apricot) 26%, transparent), transparent 70%),
    radial-gradient(30% 300px at 40% 40px, color-mix(in srgb, var(--ui-cyan) 8%, transparent), transparent 70%),
    radial-gradient(50% 420px at 100% 100%, color-mix(in srgb, var(--ui-pink) 10%, transparent), transparent 70%),
    radial-gradient(45% 380px at 0% 100%, color-mix(in srgb, var(--ui-violet) 12%, transparent), transparent 70%),
    var(--ui-paper);
  background-repeat: no-repeat; color: var(--ui-text); font: 400 14px/1.5 var(--ui-body); letter-spacing: -.006em; -webkit-font-smoothing: antialiased; }
.ui-app *, .ui-app *::before, .ui-app *::after { box-sizing: border-box; }
:where(.ui-app) [hidden] { display: none !important; }
:where(.ui-app) a { color: inherit; text-decoration: none; }
:where(.ui-app) button, :where(.ui-app) input, :where(.ui-app) select, :where(.ui-app) textarea { font: inherit; color: inherit; min-width: 0; }
:where(.ui-app) button { cursor: pointer; border: 0; background: none; padding: 0; }
:where(.ui-app) button:disabled { cursor: not-allowed; opacity: .55; }
:where(.ui-app) h1, :where(.ui-app) h2, :where(.ui-app) h3, :where(.ui-app) p { margin: 0; }
:where(.ui-app) h1, :where(.ui-app) h2, :where(.ui-app) h3 { font-family: var(--ui-heading); letter-spacing: -.025em; line-height: 1.25; color: var(--ui-text); }
:where(.ui-app) code, .ui-mono { font-family: var(--ui-mono); font-size: .92em; }
:where(.ui-app) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-icon { display: block; flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ui-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ui-skip { position: fixed; z-index: 50; left: 16px; top: 8px; transform: translateY(-200%); padding: 10px 16px; border-radius: var(--ui-radius-small); background: var(--ui-plum); color: var(--ui-paper); }
.ui-skip:focus { transform: none; }

/* App shell */
.ui-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--ui-paper) 55%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ui-violet) 28%, transparent); backdrop-filter: saturate(1.4) blur(14px); }
.ui-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--ui-violet) 20%, var(--ui-pink) 55%, var(--ui-apricot) 80%, transparent); opacity: .55; pointer-events: none; }
.ui-header-inner { max-width: calc(var(--ui-width) + 2 * var(--ui-gutter)); margin: 0 auto; padding: 0 var(--ui-gutter); height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.ui-brand { display: inline-flex; align-items: center; gap: 8px; justify-self: start; }
.ui-brand img { width: 36px; height: 36px; object-fit: contain; }
.ui-brand span { font: 800 22px/1 var(--ui-heading); letter-spacing: -.05em; }
.ui-nav { display: flex; gap: 4px; }
.ui-nav a { display: flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 10px; font-size: 14px; font-weight: 550; white-space: nowrap; color: var(--ui-text); transition: background var(--ui-fast), color var(--ui-fast), box-shadow var(--ui-fast); position:relative; }
.ui-nav a:hover { color: var(--ui-deep-violet); background: var(--ui-tint); }
.ui-nav a[aria-current] { color: var(--ui-deep-violet); background: linear-gradient(120deg,var(--ui-tint-strong),color-mix(in srgb,var(--ui-pink) 12%,var(--ui-paper))); font-weight: 650; box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--ui-violet) 22%,transparent),0 3px 12px color-mix(in srgb,var(--ui-deep-violet) 8%,transparent); }
.ui-nav a::after { content:''; position:absolute; height:2px; left:16px; right:16px; bottom:3px; border-radius:2px; background:linear-gradient(90deg,var(--ui-violet),var(--ui-pink),var(--ui-apricot)); transform:scaleX(0); transform-origin:center; transition:transform 180ms ease-out; }
.ui-nav a[aria-current]::after,.ui-nav a:hover::after { transform:scaleX(1); }
.ui-brand img { transition:transform 180ms ease-out,filter 180ms ease-out; }
.ui-brand:hover img { transform:translateY(-2px) rotate(-5deg); filter:drop-shadow(0 3px 5px color-mix(in srgb,var(--ui-violet) 30%,transparent)); }
@media(prefers-reduced-motion:reduce){.ui-nav a::after,.ui-brand img{transition:none}.ui-brand:hover img{transform:none}}
.ui-header-end { justify-self: end; display: flex; align-items: center; gap: 12px; }
.ui-env { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ui-line); font-size: 12px; font-weight: 550; color: var(--ui-soft); white-space: nowrap; }
.ui-env .ui-icon { width: 14px; height: 14px; color: var(--ui-deep-violet); }
.ui-profile { position: relative; }
.ui-profile-button { display: flex; align-items: center; gap: 8px; min-height: var(--ui-control); padding: 0 4px; font-size: 14px; font-weight: 550; white-space: nowrap; border-radius: 10px; }
.ui-profile-button > .ui-icon { width: 16px; height: 16px; color: var(--ui-deep-violet); }
.ui-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: none; background: var(--ui-tint-strong); color: var(--ui-deep-violet); }
.ui-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ui-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 240px; padding: 6px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-paper); box-shadow: 0 12px 32px color-mix(in srgb, var(--ui-deep-violet) 14%, transparent); z-index: 30; }
.ui-menu a, .ui-menu button { display: flex; width: 100%; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: var(--ui-radius-small); font-size: 13px; text-align: left; }
.ui-menu a:hover, .ui-menu button:hover { background: var(--ui-tint); }
.ui-menu .ui-icon { width: 16px; height: 16px; color: var(--ui-deep-violet); }
.ui-menu-state { padding: 8px 10px 6px; font-size: 12px; color: var(--ui-soft); }

/* Page */
.ui-page { max-width: calc(var(--ui-width) + 2 * var(--ui-gutter)); margin: 0 auto; padding: 32px var(--ui-gutter) 48px; }
.ui-page-narrow { max-width: calc(880px + 2 * var(--ui-gutter)); }
.ui-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; min-height: var(--ui-control); }
.ui-page-head h1 { font-size: 28px; font-weight: 750; letter-spacing: -.035em; }
.ui-page-sub { margin-top: 4px; font-size: 14px; color: var(--ui-soft); }
.ui-page-actions { display: flex; gap: 8px; flex: none; }
.ui-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 13px; font-weight: 550; color: var(--ui-deep-violet); min-height: 32px; }
.ui-back .ui-icon { width: 16px; height: 16px; }
.ui-section-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }

/* Actions */
.ui-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ui-control); padding: 0 16px; border-radius: 10px; border: 1px solid var(--ui-action); background: var(--ui-action); color: var(--ui-paper); font-size: 14px; font-weight: 650; white-space: nowrap; transition: background var(--ui-fast), border-color var(--ui-fast); }
.ui-button:hover:not(:disabled) { background: var(--ui-action-hover); border-color: var(--ui-action-hover); }
.ui-button .ui-icon { width: 17px; height: 17px; }
.ui-button-secondary { background: var(--ui-paper); border-color: var(--ui-line-strong); color: var(--ui-deep-violet); }
.ui-button-secondary:hover:not(:disabled) { background: var(--ui-tint); border-color: var(--ui-violet); }
.ui-button-small { min-height: 32px; padding: 0 12px; font-size: 13px; }
@media (pointer: coarse) { .ui-button-small { min-height: 40px; } }
.ui-link { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font-weight: 650; color: var(--ui-deep-violet); }
.ui-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.ui-link .ui-icon { width: 15px; height: 15px; }

/* Toolbar: view switch, repository filter, search */
.ui-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.ui-segmented { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-paper); flex: none; }
.ui-segmented button, .ui-segmented a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: calc(var(--ui-control) - 8px); padding: 0 12px; border-radius: 9px; font-size: 13px; font-weight: 550; color: var(--ui-soft); white-space: nowrap; }
.ui-segmented :is(button, a):hover { color: var(--ui-deep-violet); }
.ui-segmented [aria-pressed="true"], .ui-segmented [aria-selected="true"], .ui-segmented [aria-current] { background: var(--ui-tint-strong); color: var(--ui-deep-violet); font-weight: 650; }
.ui-segmented .ui-icon { width: 16px; height: 16px; }
.ui-select { position: relative; flex: 0 1 260px; min-width: 160px; }
.ui-select select { width: 100%; height: var(--ui-control); padding: 0 34px 0 12px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-paper); font-size: 13px; appearance: none; cursor: pointer; text-overflow: ellipsis; }
.ui-select > .ui-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; pointer-events: none; color: var(--ui-deep-violet); }
.ui-search { position: relative; flex: 1 1 240px; min-width: 180px; }
.ui-search > .ui-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--ui-deep-violet); pointer-events: none; }
.ui-search input { width: 100%; height: var(--ui-control); padding: 0 40px 0 38px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-paper); font-size: 13px; }
.ui-search input::placeholder { color: var(--ui-soft); opacity: .8; }
.ui-search input::-webkit-search-cancel-button { display: none; }
.ui-search-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--ui-radius-small); color: var(--ui-deep-violet); }
.ui-search-clear .ui-icon { width: 15px; height: 15px; }
.ui-summary { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: -4px 0 16px; font-size: 13px; color: var(--ui-soft); }
.ui-summary { padding: 0; }
.ui-summary li { list-style: none; display: flex; align-items: center; gap: 10px; }
.ui-summary li:not(:last-child)::after { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--ui-violet); }

/* Status — always icon + explicit words, never color alone */
.ui-status { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.ui-status .ui-icon { width: 13px; height: 13px; }
.ui-status-pending { background: color-mix(in srgb, var(--ui-apricot) 22%, var(--ui-paper)); color: var(--ui-plum); }
.ui-status-secured { background: color-mix(in srgb, var(--ui-cyan) 22%, var(--ui-paper)); color: var(--ui-plum); }
.ui-status-active { background: var(--ui-tint-strong); color: var(--ui-deep-violet); }
.ui-status-success { background: color-mix(in srgb, var(--ui-cyan) 40%, var(--ui-paper)); color: var(--ui-plum); }
.ui-status-attention { background: color-mix(in srgb, var(--ui-pink) 16%, var(--ui-paper)); color: var(--ui-deep-pink); }
.ui-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ui-soft); white-space: nowrap; }
.ui-tag .ui-icon { width: 13px; height: 13px; color: var(--ui-deep-violet); }

/* Board */
.ui-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.ui-column { min-width: 0; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-card); background: var(--ui-tint); }
.ui-column-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 4px; }
.ui-column-head h2 { font-size: 14px; font-weight: 750; letter-spacing: -.01em; }
.ui-count { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--ui-tint-strong); color: var(--ui-deep-violet); font-size: 12px; font-weight: 650; line-height: 20px; text-align: center; }
.ui-column-cards { display: grid; gap: 8px; padding: 8px; }
.ui-column-empty { padding: 8px 6px 12px; font-size: 13px; color: var(--ui-soft); }
.ui-column-tabs { display: none; margin-bottom: 12px; overflow-x: auto; max-width: 100%; }
.ui-card { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-paper); transition: border-color var(--ui-fast), box-shadow var(--ui-fast); }
.ui-card:hover { border-color: var(--ui-violet); box-shadow: 0 4px 14px color-mix(in srgb, var(--ui-violet) 12%, transparent); }
.ui-card-repo { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--ui-soft); }
.ui-card-repo > .ui-icon { width: 15px; height: 15px; color: var(--ui-plum); }
.ui-card-repo > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ui-card-repo .ui-private { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; flex: none; color: var(--ui-deep-violet); }
.ui-card-repo .ui-private .ui-icon { width: 13px; height: 13px; }
.ui-card-title { font: 700 15px/1.45 var(--ui-heading); letter-spacing: -.015em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-card-title a:hover { color: var(--ui-deep-violet); }
.ui-card-title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.ui-card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ui-amount { font: 750 18px/1.3 var(--ui-heading); letter-spacing: -.03em; white-space: nowrap; }
.ui-card-meta { font-size: 12px; color: var(--ui-soft); overflow-wrap: anywhere; }
.ui-card-action { position: relative; z-index: 1; align-self: flex-start; margin-top: 4px; font-size: 13px; }
.ui-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.ui-card-top .ui-private { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--ui-soft); }
.ui-card-top .ui-private .ui-icon { width: 13px; height: 13px; color: var(--ui-deep-violet); }
.ui-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ui-line); }
.ui-card-foot .ui-card-action { margin-top: 0; }
.ui-card-desc { font-size: 13px; color: var(--ui-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }

/* List / table */
.ui-table-wrap { border: 1px solid var(--ui-line); border-radius: var(--ui-radius-card); overflow: hidden; }
.ui-table { width: 100%; border-collapse: collapse; text-align: left; }
.ui-table th { padding: 10px 16px; background: var(--ui-tint); font-size: 12px; font-weight: 600; color: var(--ui-soft); white-space: nowrap; }
.ui-table td { padding: 12px 16px; border-top: 1px solid var(--ui-line); font-size: 13px; vertical-align: middle; }
.ui-table tr:hover td { background: color-mix(in srgb, var(--ui-violet) 4%, var(--ui-paper)); }
.ui-table-title { display: block; padding: 3px 0; font: 700 14px/1.4 var(--ui-heading); letter-spacing: -.01em; }
.ui-table-title:hover { color: var(--ui-deep-violet); }
.ui-table-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--ui-soft); overflow-wrap: anywhere; }
.ui-table .ui-amount { font-size: 15px; }
.ui-table-mobile { display: none; }

/* Panels, forms */
.ui-panel { border: 1px solid var(--ui-line); border-radius: var(--ui-radius-card); background: var(--ui-paper); padding: 20px; }
.ui-panel + .ui-panel { margin-top: 12px; }
.ui-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ui-panel-head h2 { font-size: 17px; font-weight: 700; }
.ui-panel-head p { font-size: 13px; color: var(--ui-soft); margin-top: 2px; }
.ui-panel-dark { background: var(--ui-plum); border-color: var(--ui-plum); color: var(--ui-paper); }
.ui-panel-dark h2, .ui-panel-dark h3 { color: var(--ui-paper); }
.ui-field { display: grid; gap: 6px; margin-bottom: 14px; font-size: 13px; font-weight: 600; }
.ui-field small { font-weight: 400; color: var(--ui-soft); font-size: 12px; }
.ui-input, .ui-field input, .ui-field select, .ui-field textarea { width: 100%; min-height: var(--ui-control); padding: 0 12px; border: 1px solid var(--ui-line-strong); border-radius: 10px; background: var(--ui-paper); font-size: 14px; font-weight: 400; }
.ui-field textarea { padding: 10px 12px; min-height: 96px; resize: vertical; }
.ui-field :is(input, select, textarea):focus { outline: none; border-color: var(--ui-deep-violet); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-violet) 30%, transparent); }
.ui-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.ui-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; font-size: 13px; }
.ui-dl dt { color: var(--ui-soft); }
.ui-dl dd { margin: 0; overflow-wrap: anywhere; }
.ui-divider { height: 1px; background: var(--ui-line); border: 0; margin: 20px 0; }

/* Feedback */
.ui-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 20px; border: 1px dashed var(--ui-line-strong); border-radius: var(--ui-radius-card); text-align: center; }
.ui-empty p { font-size: 14px; font-weight: 600; }
.ui-alert, .ui-notice, .ui-success { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border: 1px solid; border-radius: var(--ui-radius); font-size: 13px; margin-bottom: 16px; }
.ui-alert .ui-icon, .ui-notice .ui-icon, .ui-success .ui-icon { margin-top: 1px; }
.ui-alert { border-color: var(--ui-pink); background: color-mix(in srgb, var(--ui-pink) 11%, var(--ui-paper)); }
.ui-alert .ui-icon { color: var(--ui-deep-pink); }
.ui-alert button { margin-left: auto; font-weight: 650; color: var(--ui-deep-violet); text-decoration: underline; white-space: nowrap; }
.ui-notice { border-color: var(--ui-line); background: var(--ui-tint); }
.ui-notice .ui-icon { color: var(--ui-deep-violet); }
.ui-success { border-color: var(--ui-cyan); background: color-mix(in srgb, var(--ui-cyan) 16%, var(--ui-paper)); }
.ui-skeleton { border: 1px solid var(--ui-line); border-radius: var(--ui-radius-card); background: linear-gradient(90deg, var(--ui-tint) 0%, var(--ui-tint-strong) 50%, var(--ui-tint) 100%) 0 0 / 200% 100%; animation: ui-shimmer 1.4s linear infinite; min-height: 160px; }
.ui-loading-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@keyframes ui-shimmer { to { background-position: -200% 0; } }
.ui-footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; font-size: 12px; color: var(--ui-soft); }

/* Responsive */
@media (max-width: 1080px) {
  .ui-header-inner { gap: 12px; }
  .ui-nav a { padding: 0 10px; font-size: 13px; }
  .ui-profile-name { display: none; }
  .ui-env span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ui-env { padding: 6px; }
  .ui-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-loading-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ui-header-inner { height: auto; grid-template-columns: 1fr auto; gap: 0 12px; padding-top: 8px; }
  .ui-nav { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; scrollbar-width: none; margin: 4px calc(-1 * var(--ui-gutter)) 0; padding: 4px var(--ui-gutter) 8px; }
  .ui-nav::-webkit-scrollbar { display: none; }
  .ui-nav { justify-content: space-between; gap: 2px; }
  .ui-nav a { min-height: 40px; padding: 0 8px; font-size: 13px; }
  .ui-column-tabs { width: 100%; flex-wrap: wrap; }
  .ui-column-tabs button { flex: 1 0 auto; padding: 0 8px; }
  .ui-page { padding-top: 20px; }
  .ui-page-head { flex-wrap: wrap; margin-bottom: 16px; }
  .ui-page-head h1 { font-size: 24px; }
  .ui-toolbar { gap: 8px; }
  .ui-search { flex-basis: 100%; order: 3; }
  .ui-select { flex: 1 1 140px; }
  .ui-board { grid-template-columns: 1fr; }
  .ui-board[data-mobile-column] .ui-column { display: none; }
  .ui-board[data-mobile-column] .ui-column[data-active] { display: block; }
  .ui-board[data-mobile-column] .ui-column-head { display: none; }
  .ui-column-tabs { display: flex; }
  .ui-loading-row { grid-template-columns: 1fr; }
  .ui-table th:nth-child(n+2):not(:last-child), .ui-table td:nth-child(n+2):not(:last-child) { display: none; }
  .ui-table-mobile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
  .ui-table td, .ui-table th { padding-inline: 12px; }
  .ui-form-grid { grid-template-columns: 1fr; }
  .ui-panel { padding: 16px; }
}
@media (max-width: 400px) {
  .ui-nav a { padding: 0 6px; font-size: 12.5px; }
  .ui-brand span { font-size: 20px; }
  .ui-brand img { width: 32px; height: 32px; }
  .ui-segmented button, .ui-segmented a { padding: 0 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-app *, .ui-app *::before, .ui-app *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Personal assignment is explicit, independent of workflow status. */
.ui-card-assigned{border-color:color-mix(in srgb,var(--ui-deep-violet) 50%,var(--ui-paper));background:linear-gradient(130deg,color-mix(in srgb,var(--ui-violet) 7%,var(--ui-paper)),var(--ui-paper) 75%);box-shadow:inset 3px 0 0 var(--ui-deep-violet),0 6px 18px -14px var(--ui-deep-violet)}
.ui-card-assigned:hover{border-color:var(--ui-deep-violet);box-shadow:inset 3px 0 0 var(--ui-deep-violet),0 8px 24px -16px var(--ui-deep-violet)}
.ui-assignment{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;color:var(--ui-deep-violet);line-height:1.5}
.ui-assignment .ui-icon{width:15px;height:15px;padding:4px;box-sizing:content-box;border-radius:50%;background:var(--ui-tint-strong)}
.ui-assignment.is-paid{color:var(--ui-plum)}
.ui-assignment.is-paid .ui-icon{background:color-mix(in srgb,var(--ui-cyan) 28%,var(--ui-paper))}
.ui-card[data-status="paid"]{border-color:color-mix(in srgb,var(--ui-cyan) 45%,var(--ui-paper))}
.ui-column[data-stage="paid"] .ui-column-head .ui-count{background:color-mix(in srgb,var(--ui-cyan) 25%,var(--ui-paper));color:var(--ui-plum)}
.ui-row-assigned td:first-child{box-shadow:inset 3px 0 0 var(--ui-deep-violet)}
.ui-row-assigned td{background:color-mix(in srgb,var(--ui-violet) 5%,var(--ui-paper))}
.ui-table .ui-assignment{margin-top:6px}

.ui-card-pr-ready{position:relative;z-index:1;display:block;align-self:flex-end;font-size:12px;margin-top:2px;color:var(--ui-soft)}
.ui-table .ui-card-pr-ready{margin-top:8px}

/* Workflow color accents supplement explicit labels; long labels wrap inside the card. */
.ui-card{--ui-state-accent:var(--ui-deep-violet)}
.ui-card[data-status="toFund"]{--ui-state-accent:var(--ui-apricot)}
.ui-card[data-status="available"]{--ui-state-accent:var(--ui-cyan)}
.ui-card[data-status="inReview"]{--ui-state-accent:var(--ui-pink)}
.ui-card[data-status="paymentProcessing"]{--ui-state-accent:var(--ui-apricot)}
.ui-card[data-status="paid"]{--ui-state-accent:var(--ui-cyan)}
.ui-card[data-status="attention"]{--ui-state-accent:var(--ui-deep-pink)}
.ui-card[data-status]{border-color:color-mix(in srgb,var(--ui-state-accent) 52%,var(--ui-paper));background:linear-gradient(130deg,color-mix(in srgb,var(--ui-state-accent) 6%,var(--ui-paper)),var(--ui-paper) 80%)}
.ui-card-assigned[data-status]{box-shadow:inset 3px 0 0 var(--ui-state-accent),0 6px 18px -14px var(--ui-deep-violet)}
.ui-card-assigned[data-status]:hover{box-shadow:inset 3px 0 0 var(--ui-state-accent),0 8px 24px -16px var(--ui-deep-violet)}
.ui-card-top{flex-wrap:wrap;align-items:flex-start;gap:8px;min-width:0}
.ui-card-top .ui-status{white-space:normal;overflow-wrap:anywhere;min-width:0;max-width:100%;flex:0 1 auto;box-sizing:border-box;line-height:1.5;border-radius:12px}
.ui-card-top .ui-status .ui-icon{flex:none;align-self:flex-start;margin-top:2px}
.ui-card-top .ui-private{flex:none;margin-left:auto;padding-top:3px}
.ui-card[data-status="inReview"] .ui-status{background:color-mix(in srgb,var(--ui-pink) 18%,var(--ui-paper));color:var(--ui-deep-pink)}
.ui-card[data-status="paymentProcessing"] .ui-status{background:color-mix(in srgb,var(--ui-apricot) 24%,var(--ui-paper));color:var(--ui-plum)}
.ui-column[data-stage="review"] .ui-count{background:color-mix(in srgb,var(--ui-pink) 22%,var(--ui-paper));color:var(--ui-deep-pink)}
.ui-column[data-stage="payment"] .ui-count,.ui-column[data-stage="fund"] .ui-count{background:color-mix(in srgb,var(--ui-apricot) 25%,var(--ui-paper));color:var(--ui-plum)}
.ui-table .ui-status{white-space:normal;line-height:1.5;border-radius:10px}
.ui-table tr[data-status="inReview"] .ui-status{background:color-mix(in srgb,var(--ui-pink) 18%,var(--ui-paper));color:var(--ui-deep-pink)}
.ui-row-assigned[data-status="inReview"] td:first-child{box-shadow:inset 3px 0 0 var(--ui-pink)}
.ui-row-assigned[data-status="paymentProcessing"] td:first-child{box-shadow:inset 3px 0 0 var(--ui-apricot)}
.ui-row-assigned[data-status="attention"] td:first-child{box-shadow:inset 3px 0 0 var(--ui-deep-pink)}

@media (max-width:600px) { .ui-nav { flex-wrap:wrap; overflow:visible; justify-content:center; } .ui-nav a { min-height:34px; } }