/* Polpo theme-picker UI (injected on top of Planka / Gravity UI) */
/* real Polpo octopus mark (512x512 square source) + two-tone "Polpo"+"Hire" wordmark in the header */
.polpo-brand-mark { width: 38px !important; height: 38px !important; object-fit: contain !important; margin-right: 11px; vertical-align: middle; display: inline-block; flex: 0 0 auto; max-width: none; filter: drop-shadow(0 2px 6px rgba(120,200,255,.28)); }
[class*="_title_jdrq3"] { display: inline-flex !important; align-items: center; }
.polpo-word { font-weight: 800; letter-spacing: -0.025em; font-size: 19px; }
/* topbar is always dark -> wordmark stays light on every theme (incl. light presets) */
.polpo-word-1 { color: #f1eefb !important; }
.polpo-word-2 { color: var(--g-color-base-brand, #a78bfa); filter: brightness(1.22) saturate(1.05); }

/* theme launcher: lives in the top-right header cluster (next to notifications + profile) */
#polpo-theme-hdr { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: .82; transition: opacity .12s ease; }
#polpo-theme-hdr:hover { opacity: 1; }
#polpo-theme-hdr svg { display: block; }

/* ---- Odysseus-style theme modal + swatch grid ---- */
#polpo-theme-modal {
  position: fixed; inset: 0; z-index: 99999; display: none;
  align-items: center; justify-content: center;
  background: rgba(10, 6, 26, .5); padding: 4vh 3vw;
}
#polpo-theme-modal.open { display: flex; }
.polpo-tm-panel {
  width: min(560px, 96vw); max-height: 88vh; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--g-color-base-background, #fff);
  color: var(--g-color-text-primary, #1b1830);
  border: 1px solid var(--g-color-line-generic, #e7e7f1);
  border-radius: 16px; box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
}
.polpo-tm-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--g-color-line-generic, #e7e7f1);
}
.polpo-tm-title { font: 600 17px/1.2 system-ui, sans-serif; }
.polpo-tm-close {
  border: none; background: transparent; cursor: pointer; font-size: 22px; line-height: 1;
  color: var(--g-color-text-secondary, #777); padding: 0 4px; border-radius: 6px;
}
.polpo-tm-close:hover { background: var(--g-color-base-generic, rgba(0,0,0,.06)); }
.polpo-tm-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px; padding: 18px 20px; overflow: auto;
}
.polpo-swatch {
  border: 2px solid var(--g-color-line-generic, #e7e7f1); border-radius: 10px;
  cursor: pointer; padding: 9px 6px 7px; text-align: center;
  font: 500 11.5px/1.2 system-ui, sans-serif; color: var(--g-color-text-primary, #1b1830);
  background: var(--g-color-base-float, #fff);
  transition: border-color .15s, transform .15s;
}
.polpo-swatch:hover { transform: scale(1.06); }
.polpo-swatch[aria-current="true"] {
  border-color: var(--g-color-base-brand, #a78bfa);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--g-color-base-brand, #a78bfa) 33%, transparent);
}
.polpo-swatch-dots { display: flex; justify-content: center; margin-bottom: 6px; }
.polpo-swatch-dots span {
  width: 17px; height: 17px; border-radius: 50%; margin-left: -6px;
  border: 1.5px solid color-mix(in srgb, var(--g-color-text-primary, #000) 14%, transparent);
}
.polpo-swatch-dots span:first-child { margin-left: 0; }
.polpo-swatch-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Semantic UI / Fomantic recolor (hardcoded blue -> theme accent) ---- */
.ui.primary.button, .ui.primary.buttons .button,
.ui.blue.button, .ui.blue.buttons .button {
  background-color: var(--polpo-accent, #5b50e6) !important;
  color: var(--polpo-accent-text, #fff) !important;
}
.ui.primary.button:hover, .ui.primary.buttons .button:hover,
.ui.blue.button:hover, .ui.blue.buttons .button:hover {
  background-color: var(--polpo-accent-hover, #4a3fd6) !important;
}
.ui.primary.button:focus, .ui.primary.button:active,
.ui.primary.buttons .button:active {
  background-color: var(--polpo-accent-active, #4036c4) !important;
}
.ui.basic.primary.button, .ui.basic.blue.button {
  box-shadow: 0 0 0 1px var(--polpo-accent, #5b50e6) inset !important;
  color: var(--polpo-link, #4a3fd6) !important;
  background: transparent !important;
}
a:not(.ui):not(.button) { color: var(--polpo-link, #4a3fd6); }
.ui.checkbox input:checked ~ .box:before,
.ui.checkbox input:checked ~ label:before,
.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ label:before {
  background-color: var(--polpo-accent, #5b50e6) !important;
}
.ui.loader:after { border-color: var(--polpo-accent, #5b50e6) transparent transparent !important; }
.ui.label.blue, .ui.blue.label { background-color: var(--polpo-accent, #5b50e6) !important; border-color: var(--polpo-accent, #5b50e6) !important; }
.ui.progress.blue .bar, .ui.blue.progress .bar { background-color: var(--polpo-accent, #5b50e6) !important; }

/* ---- hide PLANKA Pro promo banner (current build hash, JS handles the rest) ---- */
[class*="_wrapper_1u45e"] { display: none !important; }

/* ---- Calendar view overlay ---- */
#polpo-cal {
  position: fixed; inset: 0; z-index: 99998; display: none;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .45); padding: 3vh 2vw;
}
.polpo-cal-panel {
  width: min(1100px, 96vw); max-height: 94vh; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--g-color-base-background, #f4f4fb);
  color: var(--g-color-text-primary, #1b1830);
  border: 1px solid var(--g-color-line-generic, #e7e7f1);
  border-radius: 16px; box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}
.polpo-cal-loading { padding: 40px; text-align: center; opacity: .7; }
.polpo-cal-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--g-color-line-generic, #e7e7f1); }
.polpo-cal-title { font: 600 19px/1.2 system-ui, sans-serif; text-transform: capitalize; }
.polpo-cal-nav { display: flex; gap: 6px; }
.polpo-cal-nav button {
  border: 1px solid var(--g-color-line-generic, #e7e7f1); background: var(--g-color-base-float, #fff);
  color: var(--g-color-text-primary, #1b1830); border-radius: 8px; padding: 6px 12px; cursor: pointer;
  font: 500 14px/1 system-ui, sans-serif;
}
.polpo-cal-nav button:hover { background: var(--g-color-base-generic, rgba(0,0,0,.05)); }
.polpo-cal-close { font-size: 18px !important; line-height: 1 !important; }
.polpo-cal-body { display: flex; gap: 14px; padding: 16px 20px; overflow: auto; }
.polpo-cal-month { flex: 1 1 auto; min-width: 0; }
.polpo-cal-grid-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.polpo-cal-grid-head div { font: 600 11px/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--g-color-text-hint, #888); text-align: center; padding: 2px; }
.polpo-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(92px, auto); gap: 6px; }
.polpo-cal-cell {
  border: 1px solid var(--g-color-line-generic, #e7e7f1); border-radius: 9px; padding: 5px;
  background: var(--g-color-base-float, #fff); min-height: 92px; overflow: hidden;
}
.polpo-cal-empty { background: transparent; border: none; }
.polpo-cal-today { border-color: var(--g-color-base-brand, #5b50e6); box-shadow: 0 0 0 1px var(--g-color-base-brand, #5b50e6) inset; }
.polpo-cal-num { font: 600 12px/1 system-ui, sans-serif; color: var(--g-color-text-secondary, #555); margin-bottom: 4px; }
.polpo-cal-chip {
  display: block; font: 500 11.5px/1.25 system-ui, sans-serif; padding: 3px 6px; margin-bottom: 3px;
  background: var(--g-color-base-selection, rgba(91,80,230,.12)); color: var(--g-color-text-primary, #1b1830);
  border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.polpo-cal-chip:hover { background: var(--g-color-base-brand, #5b50e6); color: #fff; }
.polpo-cal-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.polpo-cal-undated { flex: 0 0 230px; border-left: 1px solid var(--g-color-line-generic, #e7e7f1); padding-left: 14px; overflow: auto; }
.polpo-cal-undated-h { font: 600 12px/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .03em; color: var(--g-color-text-hint, #888); margin-bottom: 8px; }

/* ---- Odysseus front-loading boot animation (overlay injected by nginx into the HTML) ---- */
#polpo-boot {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(900px 600px at 50% 38%, #362e72, #2b2358 72%); opacity: 1; transition: opacity .55s ease;
}
#polpo-boot.polpo-boot-out { opacity: 0; pointer-events: none; }
#polpo-boot .pb-stage { display: flex; flex-direction: column; align-items: center; gap: 22px; }
#polpo-boot .pb-logo { width: 104px; height: 104px; object-fit: contain; overflow: visible; animation: pb-pop .75s cubic-bezier(.34,1.56,.64,1) both, pb-glow 2.6s ease .5s; }
#polpo-boot .pb-word {
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 16px; font-weight: 700; letter-spacing: .42em; padding-left: .42em;
  opacity: 0; animation: pb-word .7s ease .9s forwards;
}
#polpo-boot .pb-w1 { color: #e8e4f0; }
#polpo-boot .pb-w2 { color: #a78bfa; }
@keyframes pb-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pb-word { from { opacity: 0; letter-spacing: .62em; } to { opacity: .95; letter-spacing: .3em; } }
@keyframes pb-glow { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 45% { filter: drop-shadow(0 0 22px rgba(120,200,255,.45)); } }
@media (prefers-reduced-motion: reduce) {
  #polpo-boot * { animation-duration: .01s !important; animation-delay: 0s !important; }
}

/* ---- Polpo premium liquid-glass design system (Apple-grade) ---- */
:root {
  --polpo-r-sm: 10px;
  --polpo-r-md: 16px;
  --polpo-r-lg: 22px;
  --polpo-gloss: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.045) 32%, rgba(255,255,255,0) 60%);
  --polpo-glass-blur: 22px;
  --polpo-glass-backdrop: blur(var(--polpo-glass-blur)) saturate(180%) brightness(1.04);
  --polpo-glass-tint: color-mix(in srgb, var(--g-color-base-float, #fff) 70%, transparent);
  --polpo-glass-shadow: 0 16px 44px -24px rgba(18,12,45,.42), 0 4px 12px -7px rgba(18,12,45,.18);
  --polpo-glass-rim: inset 0 1px 0 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -16px 32px -24px rgba(18,12,45,.22);
  --polpo-card-shadow: 0 1px 2px rgba(14,9,34,.05), 0 10px 26px -18px rgba(14,9,34,.30);
  --polpo-card-shadow-hover: 0 2px 5px rgba(14,9,34,.07), 0 22px 48px -22px rgba(14,9,34,.42);
  --polpo-hairline: color-mix(in srgb, var(--g-color-line-generic, #e7e7f1) 70%, transparent);
}
.g-root_theme_dark {
  --polpo-gloss: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 42%);
  --polpo-glass-backdrop: blur(var(--polpo-glass-blur)) saturate(150%) brightness(1.1);
  --polpo-glass-tint: color-mix(in srgb, var(--g-color-base-float, #1b1430) 86%, transparent);
  --polpo-glass-shadow: 0 18px 44px -26px rgba(0,0,0,.55), 0 4px 14px -10px rgba(0,0,0,.38);
  --polpo-glass-rim: inset 0 1px 0 0 rgba(255,255,255,.06);
  --polpo-card-shadow: 0 1px 2px rgba(0,0,0,.2), 0 8px 22px -16px rgba(0,0,0,.42);
  --polpo-card-shadow-hover: 0 2px 6px rgba(0,0,0,.3), 0 20px 44px -22px rgba(0,0,0,.52);
  --polpo-hairline: rgba(255,255,255,.045);
}

/* board canvas: soft ambient brand mesh (strength scales with the intensity slider) */
[class*="_wrapperBoard_amg4a"] {
  background:
    radial-gradient(1200px 700px at 4% -16%, color-mix(in srgb, var(--g-color-base-brand, #5b50e6) calc(10% * var(--polpo-intensity, 1)), transparent), transparent 60%),
    radial-gradient(960px 680px at 106% 4%, color-mix(in srgb, var(--g-color-base-brand, #5b50e6) calc(6% * var(--polpo-intensity, 1)), transparent), transparent 58%) !important;
  padding-top: 22px !important;
}
/* breathing room between the filter toolbar and the first cards/rows, every view */
[class*="_cards_18h1r"] { padding-top: 6px !important; }

/* columns: glossy frosted glass */
[class*="_outerWrapper_hsqrn"] {
  background: var(--polpo-gloss), var(--polpo-glass-tint) !important;
  -webkit-backdrop-filter: var(--polpo-glass-backdrop); backdrop-filter: var(--polpo-glass-backdrop);
  border: 1px solid var(--polpo-hairline) !important;
  border-radius: var(--polpo-r-lg) !important;
  box-shadow: var(--polpo-glass-shadow), var(--polpo-glass-rim) !important;
}

/* pipeline-step header = a clear themed title card per column */
[class*="_header_hsqrn"] { padding: 10px 12px 6px !important; }
[class*="_headerName_hsqrn"] {
  display: inline-flex !important; align-items: center;
  background: color-mix(in srgb, var(--g-color-base-brand, #5b50e6) 15%, var(--g-color-base-float, #fff)) !important;
  color: var(--g-color-text-primary, #1b1830) !important;
  font-weight: 800 !important; font-size: clamp(12px, 0.66vw, 14.5px) !important; letter-spacing: .003em;
  padding: 7px 14px !important; border-radius: 11px !important; min-height: 0 !important;
  border: 1px solid color-mix(in srgb, var(--g-color-base-brand, #5b50e6) 28%, transparent) !important;
  box-shadow: 0 1px 2px rgba(18,12,45,.08), inset 0 1px 0 0 rgba(255,255,255,.18) !important;
}

/* cards: calm premium surface, soft glossy sheen, smooth lift.
   width:100% + min-width:0 so the card follows the (flex-sized) column and never
   overflows it, which would otherwise clip the member avatar on the right edge. */
[class*="_wrapper_36a26"] {
  background-color: var(--g-color-base-float, #fff) !important;
  background-image: var(--polpo-gloss) !important;
  border: 1px solid var(--polpo-hairline) !important;
  border-radius: var(--polpo-r-md) !important;
  box-shadow: var(--polpo-card-shadow) !important;
  transition: box-shadow .18s ease !important;
  width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important;
}
/* card list/inner containers shrink with the column too */
[class*="_innerWrapper_hsqrn"] *[class*="_cards"],
[class*="_innerWrapper_hsqrn"] [class*="_list_"],
[class*="_content_36a26"] { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }
[class*="_wrapper_36a26"]:hover { box-shadow: var(--polpo-card-shadow-hover) !important; }
/* during a drag: kill transitions + backdrop blur so the card follows the cursor
   instantly and stays fully visible (the glass look returns the moment you drop) */
html.polpo-dragging [class*="_wrapper_36a26"] { transition: none !important; }
html.polpo-dragging [class*="_outerWrapper_hsqrn"],
html.polpo-dragging [class*="_menu_jdrq3"] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Jira-style aging: red dot on a card stuck too long in its current column */
[class*="_wrapper_36a26"] { position: relative; }
.polpo-age-dot {
  position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%;
  background: #e5484d; pointer-events: none; z-index: 3;
  box-shadow: 0 0 0 2px var(--g-color-base-float, #fff), 0 0 7px rgba(229,72,77,.75);
}

/* priority filter: ONE dropdown control (matches the native Leden/Labels filters) */
.polpo-prio-ctl { position: relative; display: inline-block; margin-left: 12px; vertical-align: middle; }
.polpo-prio-trigger {
  font: 600 13px/1 system-ui, -apple-system, sans-serif; padding: 9px 30px 9px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--polpo-hairline, rgba(0,0,0,.16)); background: var(--g-color-base-float, #fff);
  color: var(--g-color-text-primary, #1b1830); white-space: nowrap;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
.polpo-prio-trigger:hover { border-color: var(--g-color-base-brand, #6d46d9); }
.polpo-prio-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 168px; padding: 6px;
  background: var(--g-color-base-float, #fff); border: 1px solid var(--polpo-hairline, rgba(0,0,0,.12)); border-radius: 12px;
  box-shadow: 0 12px 32px -8px rgba(18,12,45,.3);
}
.polpo-prio-ctl.open .polpo-prio-menu { display: block; }
.polpo-prio-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 8px; cursor: pointer;
  font: 600 13px/1 system-ui, -apple-system, sans-serif; color: var(--g-color-text-primary, #1b1830);
}
.polpo-prio-item:hover { background: color-mix(in srgb, var(--g-color-base-brand, #6d46d9) 12%, transparent); }
.polpo-prio-item.active { background: color-mix(in srgb, var(--g-color-base-brand, #6d46d9) 18%, transparent); }
.polpo-prio-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.polpo-prio-dot[data-prio="Hoog"]   { background: #e5484d; }
.polpo-prio-dot[data-prio="Midden"] { background: #f5a524; }
.polpo-prio-dot[data-prio="Laag"]   { background: #8b8b9a; }
.polpo-prio-dot-all { background: var(--g-color-base-brand, #6d46d9); }

/* dynamic fit: constrain Planka's content-growing column wrapper to the viewport,
   then let the columns flex-share it. The board fills the width and all columns fit
   at ANY browser zoom (80%, 100%, ...) with no whitespace, clipping or scroll. */
[class*="_wrapper_11uup"],
[class*="_wrapper_11uup"] > div,
[class*="_lists_11uup"] { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
[class*="_lists_11uup"] { display: flex !important; }
[class*="_outerWrapper_hsqrn"] { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; }
[class*="_innerWrapper_hsqrn"] { width: 100% !important; min-width: 0 !important; max-width: none !important; }

/* login page: drop Planka's stock cover image + the duplicate octopus, centre the form */
[class*="_cover_45te1"] { display: none !important; }
[class*="_grid_45te1"] {
  justify-content: center !important;
  background: radial-gradient(1100px 700px at 50% -10%, #efeafe, #f7f5fc 70%) !important; min-height: 100vh;
}
[class*="_gridItem_45te1"]:not([class*="_cover_45te1"]) { width: 100% !important; max-width: 440px !important; flex: 0 0 auto !important; }
/* keep only the big hero octopus, hide the smaller duplicate marks (login page ONLY -
   scoped to the login grid so it never touches the boot logo or the header brand mark) */
[class*="_grid_45te1"] img[src*="mark.png"]:not([class*="_logo_45te1"]) { display: none !important; }
[class*="_content_36a26"] { padding: 13px 14px 11px !important; }

/* card typography: calmer and more refined */
[class*="_name_i28lr"] { font-size: clamp(13px, 0.74vw, 16px) !important; font-weight: 600 !important; letter-spacing: -.005em; line-height: 1.36 !important; }

/* labels: soft rounded pills instead of hard colour blocks */
[class*="_labels_i28lr"] { gap: 5px !important; }
[class*="_wrapper_1anxy"] {
  border-radius: 999px !important; font-size: 10.5px !important; font-weight: 700 !important;
  letter-spacing: .015em; padding: 2px 9px !important; line-height: 1.5 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.08) !important;
  /* labels carry white text on their own colour; light labels (lime/orange/grey) need a
     shadow so the text reads. Harmless on dark labels. */
  text-shadow: 0 1px 2px rgba(0,0,0,.32) !important;
}

/* Planka hardcodes the board filter bar text to WHITE (it assumes a dark cover image
   behind it). On a light theme that makes Leden/Labels + the "Alle" value pills invisible.
   Bind them to the theme tokens so they read on every preset. */
[class*="_filterTitle_"] { color: var(--g-color-text-secondary, #555) !important; }
[class*="_filterLabel_"] {
  color: var(--g-color-text-primary, #1b1830) !important;
  background: var(--g-color-base-float, #fff) !important;
  border: 1px solid var(--polpo-hairline, rgba(0,0,0,.14)) !important;
  box-shadow: 0 1px 2px rgba(18,12,45,.06) !important;
}
[class*="_filterLabelIcon_"] { color: var(--g-color-text-secondary, #555) !important; }
[class*="_search_"] input { color: var(--g-color-text-primary, #1b1830) !important; opacity: 1; }
[class*="_search_"] input::placeholder { color: var(--g-color-text-hint, #8d89a6) !important; opacity: 1; }

/* Planka hardcodes card/list text to #17394d -> dark-on-dark on dark themes; bind to the theme token */
[class*="_headerName_hsqrn"], [class*="_name_i28lr"], [class*="_cardName"], [class*="_listName"] { color: var(--g-color-text-primary, #1b1830) !important; }
[class*="_addCardButtonText_hsqrn"], [class*="_text_"][class*="hsqrn"] { color: var(--g-color-text-hint, #8d89a6) !important; }
[class*="_headerName_hsqrn"] { font-weight: 700 !important; letter-spacing: -.01em; }

/* topbar: dark brand-tinted glass, consistent + readable on every theme */
[class*="_menu_jdrq3"] {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 64%), color-mix(in srgb, var(--g-color-base-brand, #5b50e6) 16%, #16112e) !important;
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  border: none !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08), 0 10px 30px -22px rgba(0,0,0,.6) !important;
}

/* project tiles (home): glass cards */
[class*="_card_suzcb"] {
  background: var(--polpo-gloss), var(--polpo-glass-tint) !important;
  -webkit-backdrop-filter: var(--polpo-glass-backdrop); backdrop-filter: var(--polpo-glass-backdrop);
  border: 1px solid var(--polpo-hairline) !important;
  border-radius: var(--polpo-r-md) !important;
  box-shadow: var(--polpo-glass-shadow), var(--polpo-glass-rim) !important;
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease !important;
}
[class*="_card_suzcb"]:hover { transform: translateY(-3px); }
/* the grey #555 placeholder cover (projects without a background image) -> let the glass show */
[class*="_cover_vr1u9"] { background-color: transparent !important; }
/* Planka hardcodes the project tile title to white (assumes a dark cover image). On the
   light glass tiles that is white-on-white -> bind it to the theme text token. */
[class*="_title_vr1u9"] { color: var(--g-color-text-primary, #1b1830) !important; text-shadow: none !important; font-weight: 700 !important; letter-spacing: -.01em; }
/* "Project aanmaken" add-tile: Planka hardcodes its label + icon white -> readable on glass */
[class*="_addButtonCover_suzcb"], [class*="_addButtonTitleWrapper_suzcb"],
[class*="_addButtonCover_suzcb"] *, [class*="_addButtonTitleWrapper_suzcb"] * { color: var(--g-color-text-secondary, #555) !important; }
[class*="_addButtonCover_suzcb"] { border: 1.5px dashed var(--polpo-hairline, rgba(0,0,0,.2)) !important; border-radius: var(--polpo-r-md, 16px) !important; background: transparent !important; }

/* Polpo overlays: glass */
.polpo-tm-panel, .polpo-cal-panel {
  background: var(--polpo-gloss), var(--polpo-glass-tint) !important;
  -webkit-backdrop-filter: var(--polpo-glass-backdrop); backdrop-filter: var(--polpo-glass-backdrop);
  border: 1px solid var(--polpo-hairline) !important;
  box-shadow: var(--polpo-glass-shadow), var(--polpo-glass-rim) !important;
}

/* Frosted-glass OFF: solid surfaces, no backdrop blur */
html.polpo-noglass [class*="_outerWrapper_hsqrn"],
html.polpo-noglass [class*="_card_suzcb"],
html.polpo-noglass [class*="_menu_jdrq3"],
html.polpo-noglass .polpo-tm-panel,
html.polpo-noglass .polpo-cal-panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.polpo-noglass [class*="_outerWrapper_hsqrn"],
html.polpo-noglass [class*="_card_suzcb"],
html.polpo-noglass .polpo-tm-panel,
html.polpo-noglass .polpo-cal-panel { background: var(--g-color-base-float, #fff) !important; }

/* theme modal footer: intensity slider + frosted-glass switch */
.polpo-tm-foot { border-top: 1px solid var(--polpo-hairline); padding: 15px 20px 18px; display: flex; flex-direction: column; gap: 14px; }
.polpo-tm-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 600 13px/1.3 system-ui, sans-serif; color: var(--g-color-text-primary, #1b1830); }
.polpo-tm-row small { display: block; font-size: 11px; opacity: .55; font-weight: 400; }
.polpo-range { flex: 0 0 200px; max-width: 200px; accent-color: var(--g-color-base-brand, #5b50e6); cursor: pointer; }
.polpo-switch { position: relative; width: 44px; height: 25px; flex: none; cursor: pointer; display: inline-block; }
.polpo-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.polpo-switch > span { position: absolute; inset: 0; border-radius: 999px; background: var(--g-color-base-generic-medium, rgba(120,120,140,.4)); transition: background .15s; }
.polpo-switch > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .16s cubic-bezier(.22,1,.36,1); }
.polpo-switch input:checked + span { background: var(--g-color-base-brand, #5b50e6); }
.polpo-switch input:checked + span::after { transform: translateX(19px); }

/* ===== batch-2 improvements ===== */

/* WIP count badge per column header + over-limit amber state */
.polpo-wip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; margin-left: 7px;
  border-radius: 999px; font: 700 10.5px/1 system-ui, sans-serif; letter-spacing: .01em;
  background: color-mix(in srgb, var(--g-color-text-hint, #8d89a6) 16%, transparent);
  color: var(--g-color-text-secondary, #555);
  border: 1px solid color-mix(in srgb, var(--g-color-line-generic, #e7e7f1) 80%, transparent);
  transition: background .2s, color .2s, border-color .2s; vertical-align: middle; flex-shrink: 0;
}
.polpo-wip.polpo-wip-warn { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; border-color: color-mix(in srgb, #f59e0b 35%, transparent); }
.g-root_theme_dark .polpo-wip.polpo-wip-warn { color: #fbbf24; background: color-mix(in srgb, #f59e0b 14%, transparent); border-color: color-mix(in srgb, #f59e0b 28%, transparent); }
[class*="_outerWrapper_hsqrn"].polpo-col-warn [class*="_header_hsqrn"] { box-shadow: inset 0 2px 0 0 color-mix(in srgb, #f59e0b 55%, transparent); }

/* board completion bar: compact, sits in the (always-dark) topbar next to the wordmark */
#polpo-progress-bar { display: inline-flex; align-items: center; gap: 9px; margin-left: 18px; padding: 0; vertical-align: middle; }
#polpo-progress-bar-track { flex: 0 0 140px; width: 140px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; }
#polpo-progress-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6ee7ff, var(--g-color-base-brand, #a78bfa)); transition: width .4s cubic-bezier(.22,1,.36,1); min-width: 0; max-width: 100%; box-shadow: 0 0 8px rgba(120,200,255,.4); }
#polpo-progress-bar-label { font: 700 11.5px/1 system-ui, sans-serif; color: rgba(255,255,255,.82); white-space: nowrap; flex-shrink: 0; letter-spacing: .01em; }
@media (max-width: 640px) { #polpo-progress-bar { display: none; } }

/* priority accent stripe on cards (scannable priority without reading the label) */
[class*="_wrapper_36a26"].polpo-prio-hoog::before,
[class*="_wrapper_36a26"].polpo-prio-midden::before,
[class*="_wrapper_36a26"].polpo-prio-laag::before {
  content: ""; position: absolute; top: 6px; left: 0; bottom: 6px; width: 3px;
  border-radius: 0 3px 3px 0; pointer-events: none; z-index: 2;
}
[class*="_wrapper_36a26"].polpo-prio-hoog::before   { background: #e5484d; }
[class*="_wrapper_36a26"].polpo-prio-midden::before { background: #f5a524; }
[class*="_wrapper_36a26"].polpo-prio-laag::before   { background: #8b8b9a; opacity: .55; }

/* aging: amber "warming" dot (7-13 days); red dot (>=14) already defined above */
.polpo-age-dot.polpo-age-warm { background: #f5a524; box-shadow: 0 0 0 2px var(--g-color-base-float, #fff), 0 0 7px rgba(245,165,36,.65); }

/* "My cards" quick toggle in the filter bar */
.polpo-mine-ctl { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; vertical-align: middle; font: 600 13px/1 system-ui, -apple-system, sans-serif; color: var(--g-color-text-primary, #1b1830); cursor: pointer; user-select: none; white-space: nowrap; }
.polpo-mine-ctl .polpo-switch { flex: none; }
.polpo-mine-label { opacity: .82; transition: opacity .12s; }
.polpo-mine-ctl:hover .polpo-mine-label { opacity: 1; }
.polpo-mine-ctl.active .polpo-mine-label { color: var(--g-color-base-brand, #6d46d9); }

/* empty-column placeholder */
.polpo-empty { display: flex; align-items: center; gap: 8px; padding: 14px 12px; margin: 2px 4px 8px; border-radius: var(--polpo-r-sm, 10px); color: var(--g-color-text-hint, #8d89a6); font: 500 12.5px/1.4 system-ui, -apple-system, sans-serif; letter-spacing: .005em; pointer-events: none; user-select: none; opacity: .72; transition: opacity .2s ease; }
.polpo-empty svg { flex: none; opacity: .55; }
html.polpo-dragging .polpo-empty { opacity: 0; pointer-events: none; }

/* drag drop-indicator: style the rbd placeholder + lift the picked-up card */
[data-rbd-placeholder-context-id] {
  box-sizing: border-box !important; border-radius: var(--polpo-r-md, 16px) !important;
  background: color-mix(in srgb, var(--g-color-base-brand, #5b50e6) 9%, transparent) !important;
  border: 1.5px dashed color-mix(in srgb, var(--g-color-base-brand, #5b50e6) 42%, transparent) !important;
  transition: none !important;
}
[class*="_wrapper_36a26"].polpo-lifted {
  box-shadow: 0 4px 12px rgba(14,9,34,.14), 0 22px 52px -14px rgba(14,9,34,.38), 0 0 0 1px color-mix(in srgb, var(--g-color-base-brand, #5b50e6) 30%, transparent) !important;
  transition: none !important;
}

/* responsive: below 1100px drop the flex-fill back to a horizontally scrollable
   track with readable fixed-width columns (usable on tablet/phone) */
@media (max-width: 1100px) {
  [class*="_wrapper_11uup"],
  [class*="_wrapper_11uup"] > div { width: auto !important; max-width: none !important; }
  [class*="_lists_11uup"] {
    width: auto !important; max-width: none !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin; scrollbar-color: var(--polpo-hairline, rgba(0,0,0,.18)) transparent;
  }
  [class*="_outerWrapper_hsqrn"] { flex: 0 0 auto !important; width: 78vw !important; min-width: 240px !important; max-width: 340px !important; }
  [class*="_wrapper_36a26"] { width: 100% !important; min-width: 0 !important; }
  [class*="_filter_"], [class*="_filters_"] { flex-wrap: wrap !important; gap: 6px 8px !important; }
  [class*="_name_i28lr"] { font-size: 13px !important; }
  [class*="_headerName_hsqrn"] { font-size: 12px !important; }
}
@media (max-width: 640px) {
  [class*="_outerWrapper_hsqrn"] { width: 85vw !important; min-width: 220px !important; max-width: none !important; }
  [class*="_menu_jdrq3"] { padding-left: 10px !important; padding-right: 10px !important; }
  .polpo-prio-trigger { font-size: 12px !important; padding: 7px 26px 7px 10px !important; }
  .polpo-prio-ctl { margin-left: 6px !important; }
}

/* a11y: focus-visible rings on interactive elements (keyboard only) */
[class*="_wrapper_36a26"]:focus-visible { outline: 2px solid var(--g-color-line-brand, #a78bfa) !important; outline-offset: 2px !important; border-radius: var(--polpo-r-md) !important; }
.polpo-swatch:focus-visible { outline: 2px solid var(--g-color-line-brand, #a78bfa); outline-offset: 2px; border-radius: 10px; }
.polpo-prio-trigger:focus-visible, .polpo-prio-item:focus-visible { outline: 2px solid var(--g-color-line-brand, #a78bfa); outline-offset: 2px; border-radius: 8px; }
.polpo-range:focus-visible { outline: 2px solid var(--g-color-line-brand, #a78bfa); outline-offset: 3px; border-radius: 4px; }
.polpo-switch input:focus-visible + span { outline: 2px solid var(--g-color-line-brand, #a78bfa); outline-offset: 2px; border-radius: 999px; }
.polpo-tm-close:focus-visible, .polpo-cal-nav button:focus-visible { outline: 2px solid var(--g-color-line-brand, #a78bfa); outline-offset: 2px; border-radius: 6px; }
.polpo-cal-chip:focus-visible { outline: 2px solid var(--g-color-line-brand, #a78bfa); outline-offset: 1px; border-radius: 6px; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--g-color-line-brand, #a78bfa) !important; outline-offset: 2px !important; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible), [class*="_wrapper_36a26"]:focus:not(:focus-visible), .polpo-swatch:focus:not(:focus-visible), .polpo-prio-trigger:focus:not(:focus-visible), .polpo-prio-item:focus:not(:focus-visible), .polpo-range:focus:not(:focus-visible), .polpo-tm-close:focus:not(:focus-visible), .polpo-cal-nav button:focus:not(:focus-visible), .polpo-cal-chip:focus:not(:focus-visible) { outline: none !important; }

/* a11y: respect reduced-motion (kill animations/transitions, keep end state) */
@media (prefers-reduced-motion: reduce) {
  #polpo-boot .pb-logo, #polpo-boot .pb-word { animation: none !important; opacity: 1 !important; letter-spacing: .3em !important; transform: none !important; filter: none !important; }
  #polpo-boot { transition: opacity .01s !important; }
  .polpo-age-dot { box-shadow: 0 0 0 2px var(--g-color-base-float, #fff) !important; animation: none !important; }
  [class*="_wrapper_36a26"], [class*="_wrapper_36a26"]:hover { transition: none !important; }
  [class*="_card_suzcb"], [class*="_card_suzcb"]:hover { transition: none !important; transform: none !important; }
  .polpo-swatch, .polpo-switch > span, .polpo-switch > span::after, #polpo-theme-hdr, .polpo-tm-close, .polpo-prio-trigger { transition: none !important; animation: none !important; }
}

/* =====================================================================
   POLPO · iOS-grade refinement layer (additive, source-order wins)
   ===================================================================== */
:root {
  --polpo-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", sans-serif;
  --polpo-canvas-lift:  color-mix(in srgb, var(--g-color-base-float, #fff) 60%, transparent);
  --polpo-canvas-deep:  color-mix(in srgb, var(--g-color-text-primary, #1b1830) calc(5% * var(--polpo-intensity, 1)), transparent);
  --polpo-canvas-brand: color-mix(in srgb, var(--g-color-base-brand, #5b50e6) calc(8% * var(--polpo-intensity, 1)), transparent);
  --polpo-tile-cover: linear-gradient(150deg,
      color-mix(in srgb, var(--g-color-base-brand, #5b50e6) 30%, var(--g-color-base-float, #fff)) 0%,
      color-mix(in srgb, var(--g-color-base-brand, #5b50e6) 13%, var(--g-color-base-float, #fff)) 52%,
      color-mix(in srgb, var(--g-color-base-float, #fff) 92%, transparent) 100%);
  --polpo-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
.g-root_theme_dark {
  --polpo-canvas-lift:  color-mix(in srgb, var(--g-color-base-float, #1b1430) 70%, transparent);
  --polpo-canvas-deep:  color-mix(in srgb, #000 calc(22% * var(--polpo-intensity, 1)), transparent);
  --polpo-canvas-brand: color-mix(in srgb, var(--g-color-base-brand, #a78bfa) calc(11% * var(--polpo-intensity, 1)), transparent);
  --polpo-tile-cover: linear-gradient(150deg,
      color-mix(in srgb, var(--g-color-base-brand, #a78bfa) 26%, var(--g-color-base-float, #1b1430)) 0%,
      color-mix(in srgb, var(--g-color-base-brand, #a78bfa) 11%, var(--g-color-base-float, #1b1430)) 54%,
      color-mix(in srgb, var(--g-color-base-float, #1b1430) 94%, transparent) 100%);
}

/* universal canvas: home (projects) + any page that shows the bare body get the same
   layered depth. background-image so it coexists with applyTheme's inline bg-color. */
body, #app, .g-root {
  background-image:
    radial-gradient(150% 90% at 50% -24%, var(--polpo-canvas-lift), transparent 58%),
    radial-gradient(1100px 720px at 0% -12%, var(--polpo-canvas-brand), transparent 56%),
    radial-gradient(1000px 700px at 105% 112%, var(--polpo-canvas-brand), transparent 60%) !important;
  background-attachment: fixed !important;
}

[class*="_wrapperBoard_amg4a"],
[class*="_card_suzcb"], [class*="_title_vr1u9"], [class*="_content_vr1u9"],
[class*="_name_i28lr"], [class*="_headerName_hsqrn"],
[class*="_content_36a26"], [class*="_filterTitle_"], [class*="_filterLabel_"] {
  font-family: var(--polpo-font) !important;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 1 - kill flat white: layered iOS canvas (board) */
[class*="_wrapperBoard_amg4a"],
[class*="_wrapper_11uup"] {
  position: relative;
  background:
    radial-gradient(150% 100% at 50% -28%, var(--polpo-canvas-lift), transparent 60%),
    radial-gradient(1200px 760px at 2% -14%, var(--polpo-canvas-brand), transparent 58%),
    radial-gradient(1000px 720px at 104% 110%, var(--polpo-canvas-brand), transparent 60%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--g-color-base-background, #f4f4fb) 100%, transparent) 0%,
      color-mix(in srgb, var(--g-color-base-background, #f4f4fb) 88%, var(--polpo-canvas-deep)) 100%)
    !important;
  background-attachment: fixed !important;
}
[class*="_wrapperBoard_amg4a"]::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--polpo-grain); background-size: 140px 140px;
  opacity: .55; pointer-events: none; mix-blend-mode: soft-light;
}
[class*="_wrapperBoard_amg4a"] > * { position: relative; z-index: 1; }
[class*="_wrapper_11uup"] { background-attachment: fixed !important; }
html.polpo-dragging [class*="_wrapperBoard_amg4a"] { background-attachment: scroll !important; }
html.polpo-dragging [class*="_wrapperBoard_amg4a"]::before { display: none !important; }

/* 2 - topbar: calmer iOS navbar */
[class*="_menu_jdrq3"] {
  min-height: 54px !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08), 0 1px 0 0 color-mix(in srgb, var(--g-color-base-brand, #5b50e6) 22%, transparent), 0 14px 38px -26px rgba(0,0,0,.7) !important;
}
[class*="_title_jdrq3"] { letter-spacing: -.014em; }

/* 3 - columns: calmer pipeline headers, breathing card rail */
[class*="_outerWrapper_hsqrn"] { border-radius: var(--polpo-r-lg) !important; }
[class*="_header_hsqrn"] { padding: 13px 13px 7px !important; }
[class*="_headerName_hsqrn"] {
  background: color-mix(in srgb, var(--g-color-base-brand, #5b50e6) 9%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--g-color-base-brand, #5b50e6) 16%, transparent) !important;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.14) !important;
  font-weight: 700 !important; letter-spacing: -.006em !important;
  padding: 6px 13px !important; border-radius: 10px !important;
  color: var(--g-color-text-primary, #1b1830) !important;
}
[class*="_cardsInnerWrapper_hsqrn"] { padding: 4px 8px 10px !important; }
[class*="_addCardButton"] {
  border-radius: 12px !important;
  border: 1px dashed color-mix(in srgb, var(--g-color-text-hint, #8d89a6) 38%, transparent) !important;
  background: color-mix(in srgb, var(--g-color-base-float, #fff) 26%, transparent) !important;
  transition: background .18s ease, border-color .18s ease !important; margin: 2px 6px 6px !important;
}
[class*="_addCardButton"]:hover {
  border-color: color-mix(in srgb, var(--g-color-base-brand, #5b50e6) 46%, transparent) !important;
  background: color-mix(in srgb, var(--g-color-base-brand, #5b50e6) 8%, transparent) !important;
}
html.polpo-dragging [class*="_addCardButton"] { transition: none !important; }

/* 4 - cards: iOS list-item feel */
[class*="_content_36a26"] { padding: 14px 15px 12px !important; }
[class*="_name_i28lr"] { font-weight: 600 !important; letter-spacing: -.012em !important; line-height: 1.38 !important; color: var(--g-color-text-primary, #1b1830) !important; }
[class*="_labels_i28lr"] { gap: 6px !important; margin-top: 9px !important; }
[class*="_wrapper_36a26"] { transition: box-shadow .18s ease, transform .18s cubic-bezier(.22,1,.36,1) !important; }
[class*="_wrapper_36a26"]:hover { transform: translateY(-1px); }
[class*="_wrapper_36a26"]:active { transform: translateY(0) scale(.997); }
html.polpo-dragging [class*="_wrapper_36a26"]:hover, html.polpo-dragging [class*="_wrapper_36a26"]:active { transform: none !important; }

/* 5 - labels: premium, readable (less candy) */
[class*="_wrapper_1anxy"] {
  border-radius: 7px !important; font-size: 10.5px !important; font-weight: 650 !important;
  letter-spacing: .012em !important; padding: 3px 9px !important; line-height: 1.45 !important;
  filter: saturate(.86) brightness(.97) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.18), 0 1px 1px rgba(14,9,34,.12) !important;
  text-shadow: 0 1px 1.5px rgba(0,0,0,.42) !important;
}

/* 6 - filter bar: iOS segments */
[class*="_filterTitle_"] { font-weight: 600 !important; letter-spacing: .01em !important; text-transform: uppercase; font-size: 11px !important; opacity: .9; }
[class*="_filterLabel_"] {
  border-radius: 999px !important; padding: 6px 13px !important; font-weight: 600 !important; letter-spacing: -.003em !important;
  background: color-mix(in srgb, var(--g-color-base-float, #fff) 86%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(18,12,45,.07) !important;
  transition: background .15s ease, box-shadow .15s ease !important;
}
[class*="_filterLabel_"]:hover { background: color-mix(in srgb, var(--g-color-base-brand, #5b50e6) 12%, var(--g-color-base-float, #fff)) !important; }
[class*="_search_"] input { border-radius: 999px !important; background: color-mix(in srgb, var(--g-color-base-float, #fff) 80%, transparent) !important; border: 1px solid var(--polpo-hairline, rgba(0,0,0,.12)) !important; padding-left: 13px !important; }
[class*="_name_cjxaz"] { font-weight: 700 !important; letter-spacing: -.012em !important; }

/* 7 - projects home: premium, readable tiles */
[class*="_card_suzcb"] {
  border-radius: var(--polpo-r-lg) !important; overflow: hidden !important;
  box-shadow: var(--polpo-card-shadow) !important; border: 1px solid var(--polpo-hairline) !important;
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease !important;
}
[class*="_card_suzcb"]:hover { transform: translateY(-4px) !important; box-shadow: var(--polpo-card-shadow-hover) !important; }
[class*="_cover_vr1u9"] { background: var(--polpo-tile-cover) !important; min-height: 84px !important; position: relative !important; }
[class*="_cover_vr1u9"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 46%); pointer-events: none; }
[class*="_content_vr1u9"] { background: color-mix(in srgb, var(--g-color-base-float, #fff) 94%, transparent) !important; }
[class*="_title_vr1u9"] { color: var(--g-color-text-primary, #1b1830) !important; text-shadow: none !important; font-weight: 700 !important; letter-spacing: -.018em !important; font-size: clamp(15px, 1vw, 18px) !important; line-height: 1.25 !important; }
[class*="_addButtonCover_suzcb"] {
  border: 1.5px dashed color-mix(in srgb, var(--g-color-base-brand, #5b50e6) 34%, var(--polpo-hairline)) !important;
  border-radius: var(--polpo-r-lg) !important; background: color-mix(in srgb, var(--g-color-base-brand, #5b50e6) 5%, transparent) !important;
  display: flex !important; align-items: center; justify-content: center; min-height: 84px !important;
  transition: background .18s ease, border-color .18s ease !important;
}
[class*="_addButtonCover_suzcb"]::before { content: "+"; font: 300 34px/1 var(--polpo-font); color: color-mix(in srgb, var(--g-color-base-brand, #5b50e6) 78%, var(--g-color-text-secondary, #555)) !important; }
[class*="_addButtonCover_suzcb"]:hover { background: color-mix(in srgb, var(--g-color-base-brand, #5b50e6) 11%, transparent) !important; border-color: color-mix(in srgb, var(--g-color-base-brand, #5b50e6) 52%, transparent) !important; }
[class*="_addButtonTitleWrapper_suzcb"], [class*="_addButtonTitleWrapper_suzcb"] * { color: var(--g-color-text-secondary, #555) !important; font-weight: 600 !important; letter-spacing: -.006em !important; }
[class*="_wrapper_11uup"] [class*="_group"] [class*="_title"], [class*="_wrapper_11uup"] h2, [class*="_wrapper_11uup"] h3 { font-family: var(--polpo-font) !important; font-weight: 700 !important; letter-spacing: -.014em !important; color: var(--g-color-text-primary, #1b1830) !important; }

/* 8 - iOS scrollbars */
[class*="_lists_11uup"]::-webkit-scrollbar, [class*="_cardsInnerWrapper_hsqrn"]::-webkit-scrollbar { width: 8px; height: 8px; }
[class*="_lists_11uup"]::-webkit-scrollbar-thumb, [class*="_cardsInnerWrapper_hsqrn"]::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--g-color-text-hint, #8d89a6) 34%, transparent); border-radius: 999px; }
[class*="_lists_11uup"]::-webkit-scrollbar-thumb:hover, [class*="_cardsInnerWrapper_hsqrn"]::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--g-color-text-hint, #8d89a6) 54%, transparent); }
[class*="_lists_11uup"]::-webkit-scrollbar-track, [class*="_cardsInnerWrapper_hsqrn"]::-webkit-scrollbar-track { background: transparent; }

/* 9 - reduced-motion for the new layer */
@media (prefers-reduced-motion: reduce) {
  [class*="_wrapper_36a26"], [class*="_wrapper_36a26"]:hover, [class*="_wrapper_36a26"]:active, [class*="_card_suzcb"], [class*="_card_suzcb"]:hover, [class*="_addCardButton"], [class*="_filterLabel_"], [class*="_addButtonCover_suzcb"] { transition: none !important; transform: none !important; }
  [class*="_wrapperBoard_amg4a"], [class*="_wrapper_11uup"], body, #app, .g-root { background-attachment: scroll !important; }
}

/* =====================================================================
   Connect hub: integrations panel (per-MCP agent permissions + connect)
   ===================================================================== */
#polpo-connect-modal { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; background: rgba(10,6,26,.5); padding: 4vh 3vw; font-family: var(--polpo-font); }
#polpo-connect-modal.open { display: flex; }
.polpo-cn-panel {
  width: min(720px, 96vw); max-height: 88vh; overflow: hidden; display: flex; flex-direction: column;
  background: var(--polpo-gloss), var(--polpo-glass-tint); -webkit-backdrop-filter: var(--polpo-glass-backdrop); backdrop-filter: var(--polpo-glass-backdrop);
  color: var(--g-color-text-primary, #1b1830); border: 1px solid var(--polpo-hairline);
  border-radius: var(--polpo-r-lg, 22px); box-shadow: var(--polpo-glass-shadow), var(--polpo-glass-rim);
}
.polpo-cn-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 22px; border-bottom: 1px solid var(--polpo-hairline); }
.polpo-cn-title { font: 700 18px/1.2 var(--polpo-font); letter-spacing: -.02em; }
.polpo-cn-close { border: none; background: transparent; cursor: pointer; font-size: 23px; line-height: 1; color: var(--g-color-text-secondary, #777); padding: 0 4px; border-radius: 8px; }
.polpo-cn-close:hover { background: var(--g-color-base-generic, rgba(0,0,0,.06)); }
.polpo-cn-body { display: flex; min-height: 0; flex: 1 1 auto; }
.polpo-cn-tabs { flex: 0 0 184px; padding: 12px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--polpo-hairline); }
.polpo-cn-tab {
  display: flex; align-items: center; gap: 9px; text-align: left; border: none; cursor: pointer;
  padding: 10px 12px; border-radius: 11px; font: 600 13.5px/1.2 var(--polpo-font); letter-spacing: -.006em;
  color: var(--g-color-text-secondary, #555); background: transparent; transition: background .14s ease, color .14s ease;
}
.polpo-cn-tab:hover { background: color-mix(in srgb, var(--g-color-base-brand, #5b50e6) 8%, transparent); }
.polpo-cn-tab.active { background: color-mix(in srgb, var(--g-color-base-brand, #5b50e6) 15%, transparent); color: var(--g-color-text-primary, #1b1830); }
.polpo-cn-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.polpo-cn-dot-live { background: #2ecc71; box-shadow: 0 0 7px rgba(46,204,113,.6); }
.polpo-cn-dot-setup { background: var(--g-color-text-hint, #9a96a6); }
.polpo-cn-content { flex: 1 1 auto; padding: 20px 24px 24px; overflow: auto; min-width: 0; }
.polpo-cn-rowtop { display: flex; align-items: center; gap: 12px; }
.polpo-cn-rowtop h3 { font: 700 19px/1.2 var(--polpo-font); letter-spacing: -.02em; margin: 0; }
.polpo-cn-badge { font: 700 10.5px/1 var(--polpo-font); padding: 5px 9px; border-radius: 999px; letter-spacing: .02em; text-transform: uppercase; }
.polpo-cn-badge-live { color: #1a8a4e; background: color-mix(in srgb, #2ecc71 20%, transparent); }
.polpo-cn-badge-setup { color: var(--g-color-text-secondary, #666); background: var(--g-color-base-generic, rgba(0,0,0,.06)); }
.polpo-cn-blurb { color: var(--g-color-text-secondary, #555); font-size: 13.5px; line-height: 1.55; margin: 12px 0 4px; }
.polpo-cn-sub { font: 700 11px/1 var(--polpo-font); text-transform: uppercase; letter-spacing: .06em; color: var(--g-color-text-hint, #8d89a6); margin: 22px 0 11px; }
.polpo-cn-perms { display: flex; flex-direction: column; gap: 2px; }
.polpo-cn-perm { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 13px; border-radius: 12px; background: color-mix(in srgb, var(--g-color-base-float, #fff) 50%, transparent); border: 1px solid var(--polpo-hairline); }
.polpo-cn-perm.danger .polpo-cn-plabel { color: #d2425a; }
.polpo-cn-plabel { font: 600 13.5px/1.3 var(--polpo-font); letter-spacing: -.006em; }
.polpo-cn-sw { position: relative; width: 42px; height: 25px; flex: none; border-radius: 999px; cursor: pointer; background: var(--g-color-base-generic-medium, rgba(120,120,140,.4)); transition: background .16s ease; }
.polpo-cn-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .18s cubic-bezier(.22,1,.36,1); }
.polpo-cn-sw.on { background: var(--g-color-base-brand, #5b50e6); }
.polpo-cn-sw.on::after { transform: translateX(17px); }
.polpo-cn-perm.danger .polpo-cn-sw.on { background: #e5484d; }
.polpo-cn-hint { color: var(--g-color-text-secondary, #555); font-size: 12.5px; line-height: 1.55; margin: 0 0 11px; }
.polpo-cn-code { background: color-mix(in srgb, var(--g-color-text-primary, #1b1830) 92%, #000); color: #e8e4f5; font: 12px/1.6 ui-monospace, "SF Mono", Menlo, monospace; padding: 14px 16px; border-radius: 13px; overflow-x: auto; white-space: pre; margin: 0 0 13px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.polpo-cn-btn { display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; padding: 11px 18px; border-radius: 12px; font: 700 13.5px/1 var(--polpo-font); letter-spacing: -.006em; color: #fff; background: var(--g-color-base-brand, #5b50e6); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--g-color-base-brand, #5b50e6) 80%, transparent); transition: transform .14s ease, box-shadow .14s ease, filter .14s ease; }
.polpo-cn-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.polpo-cn-btn:active { transform: translateY(0); }
.polpo-cn-slack { background: #fff; color: #1d1c1d; border: 1px solid var(--polpo-hairline); box-shadow: 0 2px 8px -4px rgba(0,0,0,.25); }
.polpo-cn-note { margin-top: 11px; padding: 11px 13px; border-radius: 11px; font-size: 12.5px; line-height: 1.5; color: var(--g-color-text-secondary, #555); background: color-mix(in srgb, var(--g-color-base-brand, #5b50e6) 8%, transparent); border: 1px solid var(--polpo-hairline); }
.polpo-cn-foot { padding: 13px 22px; border-top: 1px solid var(--polpo-hairline); }
.polpo-cn-seat { font-size: 11.5px; color: var(--g-color-text-hint, #8d89a6); }
#polpo-connect-hdr { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: .82; transition: opacity .12s ease; }
#polpo-connect-hdr:hover { opacity: 1; }
#polpo-connect-hdr svg { display: block; }
@media (max-width: 640px) { .polpo-cn-body { flex-direction: column; } .polpo-cn-tabs { flex: none; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--polpo-hairline); } }