/* Audi's approved ON AIR pixel workshop. This is the final presentation layer.
   Scene art is illustrative; numbered stations are reading choices, never progress. */
body.pixel-workshop {
  --pw-scene: url('/assets/studio-workshop/workshop-night.png');
  --pw-ink: #f6f3ee; --pw-soft: #c7cfdf; --pw-muted: #b8c3d8;
  --pw-panel: #131c32; --pw-inset: #0d1529; --pw-edge: #59617a;
  --pw-gold: #f2d28b; --pw-mint: #83efcf; --pw-foil: #a98245;
  background: #091225; color: var(--pw-ink);
}
html[data-theme=light] body.pixel-workshop {
  --pw-scene: url('/assets/studio-workshop/workshop-day.png');
  --pw-ink: #192b42; --pw-soft: #293b53; --pw-muted: #34465e;
  --pw-panel: #f7f7f0; --pw-inset: #fffdf7; --pw-edge: #8c9bb0;
  --pw-gold: #5e3c08; --pw-mint: #074b3a; --pw-foil: #95702f;
  background: #dae8ed;
}
body.pixel-workshop::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--pw-scene); background-size: cover;
  background-position: center bottom; background-repeat: no-repeat;
}
.pixel-workshop .site-sky,.pixel-workshop .today-sky,.pixel-workshop .ak-sky { display: none !important; }
.pixel-workshop [hidden] { display: none !important; }
.pixel-workshop .studio-shell {
  --font-head: 'AK Thai','Google Sans','Outfit', 'Plus Jakarta Sans', 'Sarabun', sans-serif;
  --font-display: 'AK Thai','Google Sans','Outfit', 'Plus Jakarta Sans', 'Sarabun', sans-serif;
  --font-body: 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
  --oa-ink: var(--pw-ink); --oa-soft: var(--pw-soft); --oa-faint: var(--pw-muted);
  --oa-head: var(--pw-panel); --oa-inset: var(--pw-inset); --oa-edge: var(--pw-edge);
  --oa-line: color-mix(in srgb,var(--pw-edge) 50%,transparent);
  --oa-hair: color-mix(in srgb,var(--pw-foil) 65%,transparent);
  --oa-gold: var(--pw-gold); --oa-grain: none;
  --oa-bg: linear-gradient(155deg,color-mix(in srgb,var(--pw-panel) 95%,#43527c),var(--pw-inset));
  --sw-mint: var(--pw-mint);
  width: min(1440px,100%); max-width:1440px; box-sizing:border-box; margin: 0 auto; padding: 0 2rem 5rem;
  color: var(--pw-ink); font: 400 1rem/1.7 var(--font-body);
}
.pixel-workshop .studio-shell :is(button,input,select,textarea,summary) { font-family: var(--font-body); }
.pixel-workshop .studio-shell :is(h1,h2,h3,h4) { font-family: var(--font-head); }
.pixel-workshop .studio-shell :is(button,a,input,select,textarea,summary):focus-visible {
  outline: 3px solid var(--pw-gold); outline-offset: 4px;
}
.pixel-workshop .studio-shell :is(h1,h2,h3,h4,p,li,button) { overflow-wrap: anywhere; }
.pixel-workshop>.daybar { min-height: 32px; padding-block: 0; background: color-mix(in srgb,var(--pw-panel) 96%,transparent); }
.pixel-workshop>.daybar .brand { font-size: .875rem; color: var(--pw-soft); }
.pixel-workshop>.daybar .studio-route-menu>summary { min-height: 32px; color: var(--pw-soft); }
/* Repair2 completion: the shared utility bar owns its light surface/ink pair. */
html[data-theme=light] body.pixel-workshop>.daybar {
  background: var(--pw-panel) !important; color: var(--pw-soft) !important;
}
html[data-theme=light] body.pixel-workshop>.daybar :is(.brand,.brand span,.brand b,.studio-route-menu>summary) {
  color: var(--pw-soft) !important;
}
.pixel-workshop .cockpit-switcher-wrap {
  position: static !important; top: auto !important; z-index: auto;
  margin: 0 0 1rem; background: none; backdrop-filter: none;
}
.pixel-workshop .cockpit-tabs-bar {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: visible;
  background: linear-gradient(180deg,color-mix(in srgb,var(--pw-panel) 96%,#4a5368),var(--pw-inset));
  border: 1px solid var(--oa-hair); border-bottom: 3px solid var(--pw-inset);
  border-radius: 0 0 12px 12px; box-shadow: 0 4px 0 #060d1a66;
}
.pixel-workshop .cockpit-tab-btn {
  position: relative; min-height: 70px; padding: .75rem 1rem;
  border-radius: 0; border-bottom: 3px solid transparent !important;
  color: var(--pw-soft); background: transparent;
}
.pixel-workshop .cockpit-tab-btn.is-active {
  color: var(--pw-gold); border-bottom-color: var(--pw-gold) !important;
  background: linear-gradient(0deg,color-mix(in srgb,var(--pw-gold) 14%,transparent),transparent 85%);
}
.pixel-workshop .cockpit-tab-title { font-size: 1rem; line-height: 1.45; }
.pixel-workshop .cockpit-tab-desc { color: var(--pw-soft); font-size: .875rem; }
.pixel-workshop .cockpit-tab-icon { font-size: 1.75rem; }
.pixel-workshop .cockpit-tab-btn:hover .cockpit-tab-icon { transform: rotate(-8deg) scale(1.12); }
.pixel-workshop .cockpit-tab-btn:active { transform: translateY(2px); }
.pixel-workshop .cockpit-panel { position: relative; scroll-margin-top: 90px; }
.pixel-workshop .cockpit-panel.is-active { animation: pw-channel 180ms ease-out; }
@keyframes pw-channel { from { opacity: .75; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* An open catalogue, a connected production bench, and a distinct result folder. */
.pixel-workshop #panel-workflows .sw-opening {
  min-height: 0; padding: 0; margin: 0; border: 0; display: block;
}
.pixel-workshop #panel-workflows .sw-opening-meta {
  position: absolute; right: 0; top: 5px; display: flex; align-items: center;
  gap: 1rem; max-width: 29rem; font-size: .875rem;
}
.pixel-workshop #panel-workflows .sw-private { display: none; }
.pixel-workshop #panel-workflows .sw-store-status { font-size: .875rem; color: var(--pw-soft); }
.pixel-workshop #panel-workflows .sw-opening-meta { background: var(--pw-panel); padding-inline: .5rem; }
.pixel-workshop #panel-workflows .sw-tabs {
  display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  padding: 0 29rem 0 .6rem; margin: 0 0 1rem; gap: 1.6rem;
  background: color-mix(in srgb,var(--pw-panel) 96%,transparent);
  border-bottom: 1px solid var(--oa-hair);
}
.pixel-workshop #panel-workflows .sw-tabs::-webkit-scrollbar { display: none; }
.pixel-workshop #panel-workflows .sw-tabs button { flex: none; padding: .55rem 0; min-height: 46px; white-space: nowrap; }
.pixel-workshop #panel-workflows .sw-workbench {
  display: grid; grid-template-columns: 235px minmax(0,1fr); gap: 1.5rem;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible;
}
.pixel-workshop #panel-workflows .sw-selector {
  padding: .75rem 1rem 1rem; border: 1px solid var(--oa-hair);
  border-radius: 12px; background: linear-gradient(160deg,color-mix(in srgb,var(--pw-panel) 97%,#44527a),var(--pw-inset));
  align-self: start; box-shadow: 0 4px 0 #080f1d66;
}
.pixel-workshop #panel-workflows .sw-selector>summary {
  display: flex; align-items: center; min-height: 44px; padding: 0;
  font: 600 1.25rem/1.5 var(--font-head); color: var(--pw-ink); list-style: none;
}
.pixel-workshop #panel-workflows .sw-selector>summary::before { content: '➜'; color: var(--pw-gold); margin-right: .6rem; }
.pixel-workshop #panel-workflows .sw-selector>summary::after { content: none; }
.pixel-workshop #panel-workflows .sw-tools { padding: 0; margin: .5rem 0 1.1rem; }
.pixel-workshop #panel-workflows .sw-search {
  display: flex; padding: 0 .5rem; margin-bottom: .8rem; border: 1px solid var(--pw-edge);
  border-radius: 6px; background: var(--pw-inset); width: 100%;
}
.pixel-workshop #panel-workflows .sw-search input { min-height: 44px; font-size: 1rem; }
.pixel-workshop #panel-workflows .sw-category-label { margin: .5rem 0; }
.pixel-workshop #panel-workflows .sw-category-label select { background: var(--pw-inset); color: var(--pw-ink); color-scheme: dark; }
html[data-theme=light] .pixel-workshop #panel-workflows .sw-category-label select { color-scheme: light; }
.pixel-workshop #panel-workflows #sw-result-count { font-size: .875rem; }
.pixel-workshop #panel-workflows .sw-workflow-list { padding: 0; border: 0; }
.pixel-workshop #panel-workflows .sw-zone+.sw-zone { margin-top: 1rem; }
.pixel-workshop #panel-workflows .sw-zone h2 { font-size: 1rem; padding: .55rem 0; color: var(--pw-soft); }
.pixel-workshop #panel-workflows .sw-workflow-row {
  padding: .65rem .45rem; gap: .6rem; min-height: 48px; border: 0;
  border-radius: 6px; color: var(--pw-soft); background: none;
}
.pixel-workshop #panel-workflows .sw-workflow-row strong { font-size: .9375rem; font-weight: 600; }
.pixel-workshop #panel-workflows .sw-workflow-row .sw-row-icon { font-size: 1.25rem; }
.pixel-workshop #panel-workflows .sw-workflow-row[aria-pressed=true] {
  background: linear-gradient(180deg,#f8e4ad,#e2bc71); color: #241c10;
  box-shadow: 0 3px 0 #8e682f;
}
.pixel-workshop #panel-workflows .sw-workflow-row[aria-pressed=true] .sw-row-arrow { color: #493213; }
.pixel-workshop #panel-workflows .sw-workflow-row:hover:not([aria-pressed=true]) {
  background: color-mix(in srgb,var(--pw-gold) 12%,var(--pw-panel)); color: var(--pw-ink);
}
.pixel-workshop #panel-workflows .sw-workflow-detail {
  display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 1.4rem;
  align-self: start; align-content: start; align-items: start; grid-auto-rows: max-content;
  padding: .4rem 0 0; background: transparent; border: 0; box-shadow: none;
}
.pixel-workshop #panel-workflows .sw-detail-head { display: flex; align-items: start; gap: .9rem; background: linear-gradient(90deg,var(--pw-inset),color-mix(in srgb,var(--pw-inset) 86%,transparent)); }
.pixel-workshop #panel-workflows .sw-detail-head>div { display: block; }
.pixel-workshop #panel-workflows .sw-detail-head .sw-category { font: 600 .875rem/1.5 var(--font-body); color: var(--pw-soft); margin: 0 0 .1rem; }
.pixel-workshop #panel-workflows .sw-detail-head h2 { font: 600 2.25rem/1.35 var(--font-head); margin: 0 0 .4rem; grid-area: auto; }
.pixel-workshop #panel-workflows .sw-detail-head p { font-size: 1rem; line-height: 1.7; color: var(--pw-soft); margin: 0; max-width: 65ch; }
.pixel-workshop #panel-workflows .sp-title-icon { flex: none; padding-top: .5rem; }
.pixel-workshop #panel-workflows .sw-detail-actions {
  grid-column: 2; grid-row: 1; display: flex; flex-direction: row; align-items: start; flex-wrap: wrap;
  gap: .6rem; margin: .4rem 0 0; max-width: 24rem;
}
.pixel-workshop #panel-workflows .sw-btn { font-size: 1rem; padding: .65rem 1rem; border-radius: 8px; min-height: 48px; background: var(--pw-panel); color: var(--pw-ink); border-color: var(--pw-edge); }
.pixel-workshop #panel-workflows .sw-btn.is-primary {
  color: #251c0c; border: 1px solid #ffe3a2; border-bottom: 4px solid #97703b;
  background: linear-gradient(180deg,#ffe7b0,#e4bd73); box-shadow: inset 0 1px 0 #fff5d2;
}
.pixel-workshop #panel-workflows .sw-btn.is-primary:hover { background: linear-gradient(180deg,#fff2cb,#eac57f); transform: translateY(-2px); }
.pixel-workshop #panel-workflows .sw-btn.is-primary:active { transform: translateY(2px); }
.pixel-workshop #panel-workflows .sw-copy-note { grid-column: 1/-1; justify-self: start; margin: .6rem 0 1.4rem; padding: .1rem .5rem; font-size: .875rem; color: var(--pw-soft); background: var(--pw-inset); }
.pixel-workshop #panel-workflows .sp-work-grid { grid-column: 1/-1; display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 1.4rem; align-items: stretch; }
.pixel-workshop #panel-workflows .sp-production { min-width: 0; background: none; border: 0; }
.pixel-workshop #panel-workflows .sp-zone-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .2rem .5rem; background: color-mix(in srgb,var(--pw-panel) 96%,transparent); }
.pixel-workshop #panel-workflows .sp-zone-head h3,.pixel-workshop #panel-workflows .sp-delivery h3,.pixel-workshop #panel-workflows .sp-inputs h3 {
  display: flex; align-items: center; gap: .7rem; font: 600 1.5rem/1.5 var(--font-head); margin: 0;
}
.pixel-workshop #panel-workflows .sp-zone-head>span { color: var(--pw-soft); font-size: .875rem; }
.pixel-workshop #panel-workflows .sp-cast {
  height: 146px; display: flex; align-items: end; justify-content: space-between; padding: 0 8% 0 2%;
  margin: .2rem 0 -.35rem; position: relative; pointer-events: none;
}
.pixel-workshop #panel-workflows .sp-cast figure { margin: 0; position: relative; width: 152px; flex: none; display: flex; align-items: end; justify-content: center; }
.pixel-workshop #panel-workflows .sp-cast img { display: block; width: 136px; height: 136px; object-fit: contain; image-rendering: pixelated; }
.pixel-workshop #panel-workflows .sp-cast figure+figure img { width: 170px; height: 170px; }
.pixel-workshop #panel-workflows .sp-cast figcaption { position: absolute; left: 108px; bottom: 90px; width: max-content; max-width: 9rem; color: var(--pw-ink); background: var(--pw-inset); border: 1px solid #a38ac5; border-radius: 8px 8px 8px 0; padding: .4rem .7rem; font-size: .875rem; }
.pixel-workshop #panel-workflows .sp-cast figure+figure figcaption { left: auto; right: 117px; bottom: 90px; border-radius: 8px 8px 0 8px; }
.pixel-workshop #panel-workflows .sp-cast figcaption span { display: block; font-size: .875rem; color: var(--pw-soft); }
.pixel-workshop #panel-workflows .sp-production-path {
  --pw-stations: 6; display: grid; grid-template-columns: repeat(var(--pw-stations),minmax(0,1fr));
  gap: 16px; margin: 0; padding: .9rem .5rem .8rem; list-style: none;
  border-bottom: 7px solid #8a6338; border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg,transparent 35%,#4c3826 98%);
}
.pixel-workshop #panel-workflows .sp-production-path li { display: block; padding: 0; position: relative; }
.pixel-workshop #panel-workflows .sp-production-path li::before { content: none; }
.pixel-workshop #panel-workflows .sp-production-path li:not(:last-child)::after { content: '›'; position: absolute; right: -14px; top: 46px; font: 700 2rem/1 var(--font-head); color: #ffdf8f; text-shadow: 0 0 7px #f3b65a; pointer-events: none; }
.pixel-workshop #panel-workflows .sp-step {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: end;
  width: 100%; min-height: 136px; padding: 1.4rem .3rem .5rem; gap: .35rem;
  border: 1px solid #8793b3; border-bottom: 4px solid #253b4e; border-radius: 9px;
  background: linear-gradient(165deg,#273957,#0b172b 80%); color: #a0f6e1;
  transition: transform 180ms ease-out,background 180ms ease-out; cursor: pointer;
}
.pixel-workshop #panel-workflows .sp-step-order { position: absolute; top: -.75rem; left: calc(50% - 1rem); display: grid; place-items: center; width: 2rem; height: 2rem; font: 700 1.2rem/1 var(--font-head); color: #102b2b; background: #90f1ce; border: 2px solid #d8fff0; border-radius: 50%; }
.pixel-workshop #panel-workflows .sp-step svg { width: 34px; height: 34px; flex: none; transition: transform 180ms ease-out; }
.pixel-workshop #panel-workflows .sp-step strong { font: 600 1rem/1.45 var(--font-body); color: #f2f5fc; text-align: center; }
.pixel-workshop #panel-workflows .sp-step .sw-owner { color: #102b2b; background: #90f1ce; border-radius: 20px; min-width: 3.6rem; padding: .05rem .6rem; font: 700 .875rem/1.6 var(--font-body); }
.pixel-workshop #panel-workflows .sp-production-path .is-audi .sp-step-order,.pixel-workshop #panel-workflows .sp-step .sw-owner.is-audi { background: #f3cf83; color: #332408; border-color: #fff0c1; }
.pixel-workshop #panel-workflows .sp-production-path .is-audi .sp-step { color: #f5d79b; }
.pixel-workshop #panel-workflows .sp-step[aria-pressed=true] { border-color: #8effdb; border-bottom-color: #3d9b85; background: linear-gradient(160deg,#205752,#112c3b); outline: 2px solid #8effdb; outline-offset: 3px; }
.pixel-workshop #panel-workflows .is-audi .sp-step[aria-pressed=true] { outline-color: #f3cf83; border-color: #f3cf83; background: linear-gradient(160deg,#63502f,#2f2831); }
.pixel-workshop #panel-workflows .sp-step:hover { transform: translateY(-4px); }
.pixel-workshop #panel-workflows .sp-step:hover svg { transform: rotate(-8deg) scale(1.08); }
.pixel-workshop #panel-workflows .sp-step:active { transform: translateY(2px); }
html[data-theme=light] .pixel-workshop #panel-workflows .sp-production-path { background: linear-gradient(180deg,transparent 35%,#cfad76); border-bottom-color: #95703e; }
html[data-theme=light] .pixel-workshop #panel-workflows .sp-step { color: #0f6656; background: linear-gradient(165deg,#fbfaf2,#dce6e4); border-color: #647e8c; border-bottom-color: #78928e; }
html[data-theme=light] .pixel-workshop #panel-workflows .sp-step strong { color: #163645; }
html[data-theme=light] .pixel-workshop #panel-workflows .sp-step[aria-pressed=true] { background: linear-gradient(160deg,#d8f7e9,#b6e2d4); outline-color: #166c58; border-color: #166c58; }
html[data-theme=light] .pixel-workshop #panel-workflows .is-audi .sp-step[aria-pressed=true] { background: linear-gradient(160deg,#fff0cb,#ead6ac); outline-color: #8b5d15; border-color: #8b5d15; }
html[data-theme=light] .pixel-workshop #panel-workflows .sp-production-path .is-audi .sp-step { color: #8b5d15; }
.pixel-workshop #panel-workflows .sp-step-readout { display: grid; grid-template-columns: 2.6rem minmax(0,1fr); gap: 1rem; margin-top: 1.5rem; padding: 1.2rem; color: var(--pw-ink); border: 1px solid var(--pw-edge); border-top-color: var(--pw-gold); border-radius: 12px; background: var(--oa-bg); box-shadow: inset 0 1px 0 var(--oa-hair); }
.pixel-workshop #panel-workflows .sp-read-number { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; background: var(--pw-mint); color: var(--pw-inset); font: 700 1.5rem/1 var(--font-head); border-radius: 50%; }
.pixel-workshop #panel-workflows .sp-reading-label { font-size: .875rem; color: var(--pw-soft); }
.pixel-workshop #panel-workflows .sp-step-readout h4 { font: 600 1.375rem/1.5 var(--font-head); margin: .2rem 0 .5rem; }
.pixel-workshop #panel-workflows .sp-step-readout h4 .sw-owner { display: inline-block; margin-left: .5rem; color: var(--pw-mint); font-family: var(--font-body); }
.pixel-workshop #panel-workflows .sp-step-readout h4 .sw-owner.is-audi { color: var(--pw-gold); }
.pixel-workshop #panel-workflows .sp-step-readout p { font-size: 1rem; line-height: 1.7; color: var(--pw-soft); margin: 0 0 .6rem; }
.pixel-workshop #panel-workflows .sp-delivery { position: relative; align-self: stretch; margin: 1.3rem 0 0; padding: 1.4rem 1.2rem 1.2rem; border: 2px solid #c89853; border-bottom: 5px solid #806047; border-radius: 0 14px 14px 14px; background: var(--oa-bg); box-shadow: inset 0 0 0 3px var(--pw-panel),0 5px 0 #080f1d55; }
.pixel-workshop #panel-workflows .sp-delivery::before { content: ''; position: absolute; top: -19px; left: -2px; width: 104px; height: 19px; border: 2px solid #c89853; border-bottom: 0; border-radius: 9px 15px 0 0; background: linear-gradient(180deg,#ebc779,#a7753d); }
.pixel-workshop #panel-workflows .sp-delivery h3 { font-size: 1.5rem; }
.pixel-workshop #panel-workflows .sp-expected { font-size: .875rem; color: var(--pw-soft); margin: .4rem 0 .7rem; }
.pixel-workshop #panel-workflows .sp-file-art { position: relative; height: 128px; width: 180px; margin: 0 auto 1rem; }
.pixel-workshop #panel-workflows .sp-file-back { position: absolute; top: 16px; left: 30px; width: 135px; height: 98px; border: 2px solid #c0a877; border-radius: 2px; background: linear-gradient(180deg,#efe2bd,#bcb9b5); transform: rotate(-8deg); box-shadow: 0 4px 0 #715e47; }
.pixel-workshop #panel-workflows .sp-file-back::before { content: ''; position: absolute; inset: 13px 15px; border-top: 2px solid #635b50; border-bottom: 2px solid #635b50; opacity: .6; }
.pixel-workshop #panel-workflows .sp-file-front { position: absolute; inset: 33px 16px 0 10px; display: flex; align-items: center; justify-content: center; gap: .5rem; border: 4px solid #8779a3; border-top: 12px solid #76658e; border-radius: 5px; background: linear-gradient(150deg,#1f3456,#0b172b); color: #d7e5fa; transform: rotate(4deg); box-shadow: 0 5px 0 #31273f; }
.pixel-workshop #panel-workflows .sp-file-front b { font: 600 .875rem/1.4 var(--font-body); }
.pixel-workshop #panel-workflows .sp-delivery .sw-output-list { display: grid; gap: .9rem; list-style: none; padding: 0; margin: .6rem 0 0; }
.pixel-workshop #panel-workflows .sp-delivery .sw-output-list li { display: grid; grid-template-columns: 1.5rem minmax(0,1fr); gap: .6rem; padding: 0; border: 0; color: var(--pw-ink); font-size: 1rem; line-height: 1.7; }
.pixel-workshop #panel-workflows .sp-delivery .sw-output-list li::before { content: none; }
.pixel-workshop #panel-workflows .sp-output-note { border-top: 1px solid var(--oa-hair); color: var(--pw-soft); font-size: .875rem; line-height: 1.7; padding-top: 1rem; margin: 1rem 0 0; }
.pixel-workshop #panel-workflows .sp-inputs { grid-column: 1/-1; padding: 1rem 1.2rem; border: 1px solid var(--pw-edge); border-radius: 10px; background: var(--oa-bg); }
.pixel-workshop #panel-workflows .sp-inputs h3 { font-size: 1.25rem; margin-bottom: .6rem; }
.pixel-workshop #panel-workflows .sp-inputs .sw-inputs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .5rem 1.5rem; padding: 0; list-style: none; }
.pixel-workshop #panel-workflows .sp-inputs li { color: var(--pw-soft); font-size: 1rem; line-height: 1.7; padding-left: 1.3rem; position: relative; }
.pixel-workshop #panel-workflows .sp-inputs li::before { content: '›'; position: absolute; left: 0; color: var(--pw-gold); font-weight: 700; }
.pixel-workshop #panel-workflows .sp-support-folds { grid-column: 1/-1; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem 1.5rem; }
.pixel-workshop #panel-workflows .sw-fold { border: 0; border-bottom: 1px solid var(--oa-hair); border-radius: 0; padding: 0; background: none; }
.pixel-workshop #panel-workflows .sw-fold>summary { display: flex; min-height: 48px; align-items: center; justify-content: space-between; font-size: 1rem; padding: .5rem 0; color: var(--pw-ink); list-style: none; }
.pixel-workshop #panel-workflows .sw-fold>summary::after { content: 'เปิด ▾'; font-size: .875rem; color: var(--pw-gold); margin-left: 1rem; white-space: nowrap; }
.pixel-workshop #panel-workflows .sw-fold[open]>summary::after { content: 'ปิด ▴'; }
.pixel-workshop #panel-workflows .sw-fold[open] { grid-column: 1/-1; padding: 0 1rem 1rem; background: var(--pw-panel); border-radius: 8px; }
.pixel-workshop #panel-workflows .sw-library { border: 1px solid var(--pw-edge); border-radius: 12px; padding: 1.5rem; background: var(--oa-bg); }
.pixel-workshop #panel-workflows .sw-form { background: var(--pw-inset); border: 1px solid var(--pw-edge); border-top: 3px solid var(--pw-gold); border-radius: 10px; }
.pixel-workshop #panel-workflows .sw-form :is(input,textarea,select) { color: var(--pw-ink); background: var(--pw-panel); }
.pixel-workshop #panel-workflows .sw-entry { background: none; border-radius: 0; border-width: 0 0 1px; box-shadow: none; }

/* Each chapter is a real workstation in the same scene. */
.pixel-workshop .studio-shell :is(.opening,.revenue-opening) { margin: 0 0 1.5rem; padding: .7rem 0 1.1rem; min-height: 148px; gap: 1.5rem; border: 0; }
.pixel-workshop .studio-shell :is(.opening-copy,.intelligence-heading) { padding: .5rem .7rem; background: linear-gradient(90deg,var(--pw-panel),color-mix(in srgb,var(--pw-panel) 94%,transparent)); }
.pixel-workshop .studio-shell .opening-copy p,.pixel-workshop .studio-shell .intelligence-heading p { color: var(--pw-soft) !important; }
.pixel-workshop .studio-shell .opening-pulse { padding: .8rem 1rem; background: var(--oa-bg); border: 1px solid var(--pw-edge); }
.pixel-workshop .studio-shell .opening-pulse :is(strong,small) { color: var(--pw-ink) !important; }
.pixel-workshop .studio-shell :is(.opening h1,.revenue-opening h1) { font-size: 2.25rem; line-height: 1.35; margin: .25rem 0 .6rem; }
.pixel-workshop .pw-chapter-cast { display: flex; flex: 0 0 230px; align-items: end; justify-content: center; min-height: 140px; position: relative; padding-top: .5rem; }
.pixel-workshop .pw-chapter-cast img { width: 115px; height: 115px; object-fit: contain; image-rendering: pixelated; }
.pixel-workshop .pw-chapter-cast img+img { width: 124px; height: 124px; margin-left: -.5rem; }
.pixel-workshop .pw-chapter-cast p { position: absolute; top: 0; left: 0; right: 0; padding: .1rem .3rem; text-align: center; font-size: .875rem; color: var(--pw-ink); background: var(--pw-panel); margin: 0; }
.pixel-workshop #panel-tasks.is-active { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(280px,1fr); gap: 0 1.7rem; }
.pixel-workshop #panel-tasks>.opening,.pixel-workshop #panel-tasks>#daily-intelligence-tasks { grid-column: 1/-1; }
.pixel-workshop #panel-tasks .opening-copy { display: block; }
.pixel-workshop #panel-tasks .opening-pulse { flex: 1 1 24rem; max-width: 29rem; }
.pixel-workshop #panel-tasks .opening-pulse strong { font-size: 1rem; }
.pixel-workshop #panel-tasks .command-grid { margin: 0 0 1.5rem; display: block; }
.pixel-workshop #panel-tasks .dayline { position: relative; min-height: 315px; padding: 1.5rem !important; background: var(--oa-bg) !important; border: 1px solid var(--pw-edge) !important; border-top: 4px solid var(--pw-gold) !important; border-radius: 9px; box-shadow: 5px 5px 0 color-mix(in srgb,var(--pw-edge) 45%,transparent) !important; }
.pixel-workshop #panel-tasks #dayline-title { font-size: 1.875rem; }
.pixel-workshop #panel-tasks .section-head { align-items: start; }
.pixel-workshop #panel-tasks .task-heading-actions { display: grid; gap: .7rem; justify-items: end; }
.pixel-workshop #panel-tasks #quick-add-link { border: 1px solid #ffe3a2; border-bottom: 4px solid #97703b; min-height: 48px; padding: .65rem 1rem; }
.pixel-workshop #panel-tasks .priority-row { background: none; border: 0; border-bottom: 1px solid var(--oa-line); padding: 1rem 0; }
.pixel-workshop #panel-tasks .quick-strip { background: none; gap: 1rem; }
.pixel-workshop #panel-tasks .quick-strip a { border: 1px solid var(--pw-edge); border-radius: 6px; background: var(--pw-inset); }
.pixel-workshop #panel-tasks .north-star { margin: 0 0 1.5rem; padding: 1rem 0; border-top: 2px solid var(--oa-hair); }
.pixel-workshop #panel-tasks .north-star .section-head { display: block; }
.pixel-workshop #panel-tasks .north-star h2 { font-size: 1.5rem; }
.pixel-workshop #panel-tasks .north-star .section-head p { font-size: .875rem; }
.pixel-workshop #panel-tasks .goal-gallery { display: grid; grid-template-columns: 1fr; }
.pixel-workshop #panel-tasks .goal-gallery .empty,.pixel-workshop #panel-tasks .north-star-projects { padding: 1rem; background: var(--oa-bg); border: 1px solid var(--pw-edge); border-radius: 8px; }
.pixel-workshop #panel-tasks .task-sky-details { margin-top: .6rem; }
.pixel-workshop #panel-tasks #daily-intelligence-tasks { margin-top: 2rem; }
.pixel-workshop #panel-content .opening-pulse { flex: 1 1 24rem; max-width: 29rem; }
.pixel-workshop #panel-content .intelligence-heading { margin: 0; padding: 0; }
.pixel-workshop #panel-content .desk-jumps { gap: .25rem 1.4rem; margin-bottom: 1.6rem; padding-inline: .7rem; background: color-mix(in srgb,var(--pw-panel) 96%,transparent) !important; }
.pixel-workshop #panel-content .studio-desk>.wk-hero { border: 1px solid var(--pw-edge) !important; border-top: 4px solid var(--pw-gold) !important; background: var(--oa-bg) !important; padding: 1.3rem; }
.pixel-workshop #panel-content .wk-overview { border: 0; background: none; }
.pixel-workshop #panel-content .wk-progress-band { padding: 1rem 1.2rem; border: 1px solid var(--pw-edge); border-radius: 8px; background: var(--oa-bg); }
.pixel-workshop #panel-content .wk-progress-band+.wk-progress-band { margin-top: .8rem; }
.pixel-workshop #panel-content .wk-progress-band.is-optional { border-style: dashed; }
.pixel-workshop #panel-content .wk-progress-group { background: none; }
.pixel-workshop #panel-content .wk-frame,.pixel-workshop #panel-content .wk-posting { border: 1px solid var(--pw-edge) !important; border-top: 3px solid var(--oa-hair) !important; border-radius: 9px; background: var(--oa-bg) !important; box-shadow: 0 5px 0 #080f1d55 !important; }
.pixel-workshop #panel-content .wk-frame::after { display: none; }
.pixel-workshop #panel-content .wk-block { margin-bottom: 2.5rem; }
.pixel-workshop #panel-content .wk-head h3 { font-size: 1.875rem; }
.pixel-workshop #panel-content :is(.aff-card,.cta-card) { padding: 1.2rem; background: var(--oa-bg) !important; border: 1px solid var(--pw-edge) !important; border-radius: 9px !important; }
.pixel-workshop #panel-content .wk-aff { gap: 1.5rem; }
.pixel-workshop #panel-content .aff-card+.aff-card { border-left: 1px solid var(--pw-edge) !important; }
.pixel-workshop #panel-revenue .revenue-opening .opening-copy { display: block; }
.pixel-workshop #panel-revenue .revenue-money-bridge { position: relative; border: 1px solid var(--pw-edge); border-top: 4px solid var(--pw-gold); background: var(--oa-bg); border-radius: 10px; padding: 1.7rem; box-shadow: 5px 5px 0 color-mix(in srgb,var(--pw-edge) 45%,transparent); }
.pixel-workshop #panel-revenue .bridge-head h2 { font-size: 1.5rem; }
.pixel-workshop #panel-revenue .bridge-head p { font-size: .875rem; }
.pixel-workshop #panel-revenue .bridge-head>.bridge-route-btn { background: linear-gradient(180deg,#ffe7b0,#e4bd73); border: 1px solid #ffe3a2; border-bottom: 4px solid #97703b; color: #251c0c; border-radius: 8px; min-height: 48px; padding: .65rem 1rem; font: 700 1rem/1.5 var(--font-body); }
.pixel-workshop #panel-revenue .bridge-metrics-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; align-items: start; padding: 1.5rem 0; gap: 1.5rem; border: 0; }
.pixel-workshop #panel-revenue .bridge-metric-card { background: none; border: 0; border-right: 1px solid var(--oa-line); padding: 0 1rem 0 0; border-radius: 0; }
.pixel-workshop #panel-revenue .bridge-metric-card:first-child strong { font: 600 2.75rem/1.35 var(--font-head); margin: .6rem 0; }
.pixel-workshop #panel-revenue .bridge-metric-card strong { font: 600 1.875rem/1.4 var(--font-head); margin: .6rem 0; }
.pixel-workshop #panel-revenue .bridge-metric-card strong:not([data-has-value]),.pixel-workshop #panel-revenue .bridge-metric-card strong[data-has-value=false] { font: 600 1rem/1.7 var(--font-body); color: var(--pw-soft); }
.pixel-workshop #panel-revenue .bridge-metric-card:last-child { border: 0; }
.pixel-workshop #panel-revenue .bridge-metric-card span,.pixel-workshop #panel-revenue .bridge-metric-card small { color: var(--pw-soft); font-size: .875rem; line-height: 1.7; }
.pixel-workshop #panel-revenue .bridge-shortcuts { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--oa-line); display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.pixel-workshop #panel-revenue .bridge-shortcuts .bridge-route-btn { color: var(--pw-soft); font-size: .875rem; background: none; border: 0; padding: 0; border-radius: 0; }
.pixel-workshop #panel-revenue .revenue-orbit-stage { background: var(--oa-bg); border: 1px solid var(--pw-edge); border-radius: 10px; padding: 1.5rem; margin: 2rem 0; }
.pixel-workshop #panel-revenue .revenue-streams-head h2 { font-size: 1.5rem; }
.pixel-workshop #panel-revenue .orbit-node { border-bottom: 1px solid var(--oa-line); padding: 1.3rem 0; }
.pixel-workshop #panel-revenue .orbit-node:last-child { border-bottom: 0; }
.pixel-workshop #panel-revenue .node-tier { font-size: .875rem; background: none; }
.pixel-workshop #panel-revenue .node-title { font-size: 1.25rem; }
.pixel-workshop #panel-revenue .node-desc,.pixel-workshop #panel-revenue .node-target { font-size: 1rem; }
.pixel-workshop .stream-modal-card { background: var(--pw-panel); color: var(--pw-ink); border: 2px solid var(--pw-foil); border-top-width: 7px; border-radius: 12px; }
.pixel-workshop .stream-modal-card :is(input,textarea,select) { background: var(--pw-inset); color: var(--pw-ink); border-color: var(--pw-edge); }
.pixel-workshop .stream-modal-card :is(h3,label) { color: var(--pw-ink); }
.pixel-workshop .stream-modal-card label { font-family: var(--font-body); }

@media(min-width:1600px) {
  .pixel-workshop #panel-workflows .sw-workbench { grid-template-columns: 250px minmax(0,1fr); gap: 2rem; }
  .pixel-workshop #panel-workflows .sp-work-grid { grid-template-columns: minmax(0,1fr) 320px; gap: 1.7rem; }
  .pixel-workshop #panel-workflows .sp-cast { height: 162px; }
  .pixel-workshop #panel-workflows .sp-cast img { width: 164px; height: 164px; }
  .pixel-workshop #panel-workflows .sp-cast figure+figure img { width: 174px; height: 174px; }
}
@media(max-width:1380px) {
  .pixel-workshop .studio-shell { padding-inline: 1.5rem; }
  .pixel-workshop #panel-workflows .sw-workbench { grid-template-columns: 205px minmax(0,1fr); gap: 1.25rem; }
  .pixel-workshop #panel-workflows .sw-opening-meta { position: static; max-width: none; justify-content: end; }
  .pixel-workshop #panel-workflows .sw-tabs { padding-right: 0; margin-top: -.25rem; }
  .pixel-workshop #panel-workflows .sw-detail-head h2 { font-size: 2rem; }
  .pixel-workshop #panel-workflows .sw-detail-actions { flex-direction: column; max-width: 15rem; }
  .pixel-workshop #panel-workflows .sw-detail-actions .sw-btn { width: 100%; }
  .pixel-workshop #panel-workflows .sp-work-grid { grid-template-columns: minmax(0,1fr) 245px; gap: 1.1rem; }
  .pixel-workshop #panel-workflows .sp-production-path { gap: 12px; }
  .pixel-workshop #panel-workflows .sp-production-path li:not(:last-child)::after { right: -12px; font-size: 1.7rem; }
  .pixel-workshop #panel-workflows .sp-step { min-height: 132px; }
  .pixel-workshop #panel-workflows .sp-cast figcaption { max-width: 7.8rem; }
}
@media(max-width:1180px) {
  .pixel-workshop #panel-workflows .sp-work-grid { grid-template-columns: minmax(0,1fr) 245px; }
  .pixel-workshop #panel-workflows .sp-production { grid-column: 1/-1; }
  .pixel-workshop #panel-workflows .sp-delivery { grid-column: 2; grid-row: 2/4; margin-top: 1.4rem; }
  .pixel-workshop #panel-workflows .sp-inputs { grid-column: 1; align-self: start; }
  .pixel-workshop #panel-workflows .sp-inputs .sw-inputs { grid-template-columns: 1fr; }
  .pixel-workshop #panel-workflows .sp-cast { padding-inline: 10%; }
  .pixel-workshop #panel-workflows .sp-cast figcaption { max-width: 9rem; }
  .pixel-workshop .cockpit-tab-btn { padding: .7rem; gap: .6rem; }
  .pixel-workshop .cockpit-tab-icon { font-size: 1.5rem; }
  .pixel-workshop .cockpit-tab-title { font-size: .9375rem; }
  .pixel-workshop .pw-chapter-cast { flex-basis: 190px; }
  .pixel-workshop .pw-chapter-cast img { width: 100px; height: 100px; }
  .pixel-workshop .pw-chapter-cast img+img { width: 108px; height: 108px; }
  .pixel-workshop #panel-tasks.is-active { grid-template-columns: minmax(0,1.5fr) minmax(250px,1fr); }
}
@media(max-width:900px) {
  .pixel-workshop #panel-workflows .sw-workbench { grid-template-columns: 180px minmax(0,1fr); gap: 1rem; }
  .pixel-workshop #panel-workflows .sw-selector { padding-inline: .7rem; }
  .pixel-workshop #panel-workflows .sw-workflow-row { padding-inline: .25rem; }
  .pixel-workshop #panel-workflows .sw-workflow-row strong { font-size: .875rem; }
  .pixel-workshop #panel-workflows .sw-detail-head { grid-column: 1/-1; }
  .pixel-workshop #panel-workflows .sw-detail-actions { grid-column: 1/-1; grid-row: auto; flex-direction: row; max-width: none; margin-top: 1rem; }
  .pixel-workshop #panel-workflows .sw-detail-actions .sw-btn { width: auto; flex: 1; }
  .pixel-workshop #panel-workflows .sp-production-path { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.8rem 1rem; }
  .pixel-workshop #panel-workflows .sp-production-path li:nth-child(3)::after { content: '↓'; top: auto; bottom: -28px; right: calc(50% - .45rem); }
  .pixel-workshop #panel-workflows .sp-production-path li:nth-child(4) { grid-column: 3; grid-row: 2; }
  .pixel-workshop #panel-workflows .sp-production-path li:nth-child(5) { grid-column: 2; grid-row: 2; }
  .pixel-workshop #panel-workflows .sp-production-path li:nth-child(6) { grid-column: 1; grid-row: 2; }
  .pixel-workshop #panel-workflows .sp-production-path li:nth-child(4)::after,.pixel-workshop #panel-workflows .sp-production-path li:nth-child(5)::after { content: '‹'; right: auto; left: -14px; }
  .pixel-workshop #panel-workflows .sp-work-grid { grid-template-columns: 1fr; }
  .pixel-workshop #panel-workflows .sp-delivery { grid-column: 1; grid-row: auto; margin-top: 1.3rem; }
  .pixel-workshop #panel-workflows .sp-file-art { float: right; margin-left: 1rem; }
  .pixel-workshop #panel-workflows .sp-inputs { grid-column: 1; }
  .pixel-workshop #panel-workflows .sp-cast { padding-inline: 0; }
  .pixel-workshop #panel-workflows .sp-cast figcaption { display: none; }
  .pixel-workshop #panel-workflows .sp-support-folds { grid-template-columns: 1fr; }
  .pixel-workshop #panel-tasks.is-active { display: block; }
  .pixel-workshop .studio-shell :is(.opening,.revenue-opening) { flex-wrap: wrap; }
  .pixel-workshop .pw-chapter-cast { margin-left: auto; }
  .pixel-workshop #panel-tasks .opening-pulse,.pixel-workshop #panel-content .opening-pulse { order: 3; max-width: none; flex-basis: 100%; }
}
@media(max-width:760px) {
  body.pixel-workshop::before { background-position: right center; }
  .pixel-workshop .studio-shell { padding: 0 1rem 4rem; }
  .pixel-workshop>.daybar .brand { font-size: .875rem; }
  .pixel-workshop .cockpit-tabs-bar { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; border-radius: 8px; }
  .pixel-workshop .cockpit-tabs-bar::-webkit-scrollbar { display: none; }
  .pixel-workshop .cockpit-tab-btn { flex: 0 0 184px; min-height: 66px; scroll-snap-align: center; padding: .6rem .8rem; }
  .pixel-workshop .cockpit-tab-short { display: inline; }
  .pixel-workshop .cockpit-tab-long { display: none; }
  .pixel-workshop .cockpit-tab-title { font-size: 1rem; }
  .pixel-workshop #panel-workflows .sw-opening-meta { justify-content: start; margin: -.2rem 0 .15rem; }
  .pixel-workshop #panel-workflows .sw-store-status { font-size: .875rem; }
  .pixel-workshop #panel-workflows .sw-tabs { gap: 1.2rem; margin-bottom: .8rem; }
  .pixel-workshop #panel-workflows .sw-tabs button { font-size: .9375rem; }
  .pixel-workshop #panel-workflows .sw-workbench { display: flex; flex-direction: column; gap: 1rem; }
  .pixel-workshop #panel-workflows .sw-selector { width: 100%; padding: .3rem 1rem; }
  .pixel-workshop #panel-workflows .sw-selector>summary { justify-content: space-between; min-height: 48px; font: 600 1rem/1.5 var(--font-body); }
  .pixel-workshop #panel-workflows .sw-selector>summary::before { content: none; }
  .pixel-workshop #panel-workflows .sw-selector>summary::after { content: 'เปิด ▾'; color: var(--pw-gold); font-size: .875rem; }
  .pixel-workshop #panel-workflows .sw-selector[open]>summary::after { content: 'ปิด ▴'; }
  .pixel-workshop #panel-workflows .sw-selector .sw-tools { padding: .5rem 0; }
  .pixel-workshop #panel-workflows .sw-workflow-row { padding: .7rem .5rem; }
  .pixel-workshop #panel-workflows .sw-workflow-row strong { font-size: 1rem; }
  .pixel-workshop #panel-workflows .sw-workflow-detail { width: 100%; padding: .25rem 0; scroll-margin-top: 90px; }
  .pixel-workshop #panel-workflows .sw-detail-head h2 { font-size: 1.875rem; }
  .pixel-workshop #panel-workflows .sp-title-icon { width: 32px !important; height: 32px !important; padding: .4rem 0 0; }
  .pixel-workshop #panel-workflows .sw-detail-head p { font-size: 1rem; }
  .pixel-workshop #panel-workflows .sw-detail-actions { display: grid; grid-template-columns: minmax(0,1fr) 48px; gap: .6rem; width: 100%; margin-top: 1rem; }
  .pixel-workshop #panel-workflows .sw-detail-actions .sw-btn { width: 100%; }
  .pixel-workshop #panel-workflows .sw-detail-actions .sw-btn:not(.is-primary) { min-height: 48px; padding: .45rem 0; font-size: 0; }
  .pixel-workshop #panel-workflows .sw-detail-actions .sw-btn:not(.is-primary)::after { content: '🎞️'; font-size: 1.25rem; }
  .pixel-workshop #panel-workflows .sw-copy-note { margin: .7rem 0 1.5rem; }
  .pixel-workshop #panel-workflows .sp-zone-head { display: block; }
  .pixel-workshop #panel-workflows .sp-zone-head h3 { font-size: 1.5rem; }
  .pixel-workshop #panel-workflows .sp-zone-head>span { display: block; margin-top: .2rem; }
  .pixel-workshop #panel-workflows .sp-cast { height: 108px; margin-top: 0; padding-inline: 3%; }
  .pixel-workshop #panel-workflows .sp-cast img { width: 106px; height: 106px; }
  .pixel-workshop #panel-workflows .sp-cast figure+figure img { width: 143px; height: 143px; }
  .pixel-workshop #panel-workflows .sp-cast figure { width: 123px; }
  .pixel-workshop #panel-workflows .sp-step { min-height: 128px; padding-inline: .3rem; }
  .pixel-workshop #panel-workflows .sp-step strong { font-size: 1rem; }
  .pixel-workshop #panel-workflows .sp-step-readout { padding: 1rem; gap: .7rem; grid-template-columns: 2rem minmax(0,1fr); }
  .pixel-workshop #panel-workflows .sp-read-number { width: 2rem; height: 2rem; font-size: 1.25rem; }
  .pixel-workshop #panel-workflows .sp-step-readout h4 { font-size: 1.25rem; }
  .pixel-workshop #panel-workflows .sp-delivery { padding: 1.2rem; }
  .pixel-workshop #panel-workflows .sp-file-art { float: none; margin: 0 auto 1rem; }
  .pixel-workshop #panel-workflows .sp-inputs { padding: 1rem; }
  .pixel-workshop #panel-workflows .sw-library { padding: 1rem; }
  .pixel-workshop .studio-shell :is(.opening,.revenue-opening) { display: grid; grid-template-columns: minmax(0,1fr) 128px; gap: .8rem; min-height: 0; padding-top: .5rem; margin-bottom: 1.4rem; }
  .pixel-workshop .studio-shell :is(.opening h1,.revenue-opening h1) { font-size: 1.875rem; }
  .pixel-workshop .studio-shell :is(.opening-copy,.opening-pulse) { max-width: 100%; }
  .pixel-workshop .pw-chapter-cast { min-height: 110px; padding-top: 1rem; width: 128px; align-self: end; }
  .pixel-workshop .pw-chapter-cast img { width: 72px; height: 72px; }
  .pixel-workshop .pw-chapter-cast img+img { width: 78px; height: 78px; margin-left: -.8rem; }
  .pixel-workshop .pw-chapter-cast p { font-size: .875rem; line-height: 1.5; }
  .pixel-workshop #panel-tasks .opening-pulse,.pixel-workshop #panel-content .opening-pulse { grid-column: 1/-1; margin: .5rem 0 0; }
  .pixel-workshop #panel-tasks .task-sky-details { grid-column: 1/-1; }
  .pixel-workshop #panel-tasks .dayline { padding: 1rem !important; }
  .pixel-workshop #panel-tasks #dayline-title { font-size: 1.5rem; }
  .pixel-workshop #panel-tasks .dayline .section-head { display: block; }
  .pixel-workshop #panel-tasks .task-heading-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: 1rem; }
  .pixel-workshop #panel-tasks .quick-strip { grid-template-columns: 1fr; gap: .6rem; }
  .pixel-workshop #panel-content .intelligence-heading { display: block; }
  .pixel-workshop #panel-content .desk-jumps { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 1.1rem; }
  .pixel-workshop #panel-content .desk-jumps a { flex: none; }
  .pixel-workshop #panel-content .wk-progress-band { padding: 1rem; }
  .pixel-workshop #panel-content .wk-head h3 { font-size: 1.5rem; }
  .pixel-workshop #panel-revenue .revenue-money-bridge { padding: 1.2rem; }
  .pixel-workshop #panel-revenue .bridge-head { display: block; }
  .pixel-workshop #panel-revenue .bridge-head>.bridge-route-btn { display: inline-flex; margin-top: 1rem; }
  .pixel-workshop #panel-revenue .bridge-metrics-grid { grid-template-columns: 1fr; gap: 1.3rem; }
  .pixel-workshop #panel-revenue .bridge-metric-card { border: 0; border-bottom: 1px solid var(--oa-line); padding: 0 0 1.2rem; }
  .pixel-workshop #panel-revenue .bridge-metric-card:first-child strong { font-size: 2.25rem; }
  .pixel-workshop #panel-revenue .bridge-metric-card strong { font-size: 1.75rem; }
  .pixel-workshop #panel-revenue .bridge-shortcuts { display: grid; }
  .pixel-workshop #panel-revenue .revenue-orbit-stage { padding: 1rem; }
  .pixel-workshop #panel-revenue .node-head { grid-template-columns: auto minmax(0,1fr); }
}
@media(max-height:600px) and (min-width:901px) {
  .pixel-workshop>.daybar { min-height: 0; height: 0; overflow: visible; }
  .pixel-workshop>.daybar .brand { display: none; }
  .pixel-workshop>.daybar .studio-route-menu { display: none; }
  .pixel-workshop .cockpit-switcher-wrap { margin-bottom: .6rem; }
  .pixel-workshop .cockpit-tab-btn { min-height: 62px; padding-block: .5rem; }
  .pixel-workshop #panel-workflows .sw-opening-meta { display: none; }
  .pixel-workshop #panel-workflows .sw-tabs { margin: 0 0 .7rem; }
  .pixel-workshop #panel-workflows .sw-detail-head h2 { font-size: 1.75rem; }
  .pixel-workshop #panel-workflows .sw-detail-head .sw-category { display: none; }
  .pixel-workshop #panel-workflows .sw-detail-head p { font-size: .875rem; line-height: 1.5; }
  .pixel-workshop #panel-workflows .sw-detail-actions { margin-top: 0; flex-direction: row; flex-wrap: nowrap; max-width: none; }
  .pixel-workshop #panel-workflows .sw-detail-actions .sw-btn { min-height: 44px; padding: .45rem .7rem; }
  .pixel-workshop #panel-workflows .sw-detail-actions .sw-btn.is-primary { width: auto; }
  .pixel-workshop #panel-workflows .sw-detail-actions .sw-btn:not(.is-primary) { width: 44px; min-width: 44px; padding-inline: 0; font-size: 0; }
  .pixel-workshop #panel-workflows .sw-detail-actions .sw-btn:not(.is-primary)::after { content: '🎞️'; font-size: 1.25rem; }
  .pixel-workshop #panel-workflows .sp-production { display: grid; grid-template-columns: minmax(0,1fr) 160px; grid-template-rows: 48px auto auto; align-items: end; }
  .pixel-workshop #panel-workflows .sp-zone-head { grid-column: 1; grid-row: 1; align-self: center; }
  .pixel-workshop #panel-workflows .sp-zone-head h3 { font-size: 1.25rem; }
  .pixel-workshop #panel-workflows .sp-zone-head>span { margin-left: .8rem; }
  .pixel-workshop #panel-workflows .sw-copy-note { margin: .5rem 0 .8rem; }
  .pixel-workshop #panel-workflows .sp-cast { grid-column: 2; grid-row: 1; height: 48px; padding: 0; margin: 0; }
  .pixel-workshop #panel-workflows .sp-cast figure { width: 72px; }
  .pixel-workshop #panel-workflows .sp-cast img { width: 72px; height: 72px; }
  .pixel-workshop #panel-workflows .sp-cast figure+figure img { width: 78px; height: 78px; }
  .pixel-workshop #panel-workflows .sp-cast figcaption { display: none; }
  .pixel-workshop #panel-workflows .sp-production-path { grid-column: 1/-1; grid-row: 2; padding-block: .8rem .5rem; }
  .pixel-workshop #panel-workflows .sp-step { min-height: 94px; padding-top: .9rem; gap: .15rem; }
  .pixel-workshop #panel-workflows .sp-step svg { width: 24px; height: 24px; }
  .pixel-workshop #panel-workflows .sp-step strong { font-size: .9375rem; }
  .pixel-workshop #panel-workflows .sp-step-readout { grid-column: 1/-1; grid-row: 3; margin-top: 1rem; }
  .pixel-workshop .studio-shell :is(.opening,.revenue-opening) { min-height: 0; margin-bottom: 1rem; padding-block: .5rem; }
  .pixel-workshop .pw-chapter-cast { min-height: 88px; flex-basis: 160px; }
  .pixel-workshop .pw-chapter-cast img { width: 75px; height: 75px; }
  .pixel-workshop .pw-chapter-cast img+img { width: 82px; height: 82px; }
}
@media(prefers-reduced-motion:reduce) {
  .pixel-workshop .studio-shell *, .pixel-workshop .studio-shell *::before, .pixel-workshop .studio-shell *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
html[data-motion=paused] .pixel-workshop .studio-shell *, .pixel-workshop.pw-static .studio-shell * { animation: none !important; transition: none !important; }

/* Repair1: the workshop stays visible around work, never underneath reading ink.
   Rebind at the exact themed shell so inherited light-theme rules cannot replace
   a child's ink without its surface. All semantic states retain their meanings. */
html[data-theme] body.pixel-workshop .studio-shell {
  --oa-ink: var(--pw-ink); --oa-soft: var(--pw-soft); --oa-faint: var(--pw-muted);
  --oa-head: var(--pw-panel); --oa-inset: var(--pw-inset); --oa-edge: var(--pw-edge);
  --oa-gold: var(--pw-gold); --sw-mint: var(--pw-mint);
  --oa-red: #ffb6af; --oa-green: #a1edc4; --oa-blue: #c1dbff;
  --oa-bg: linear-gradient(155deg,color-mix(in srgb,var(--pw-panel) 95%,#43527c),var(--pw-inset));
}
html[data-theme=light] body.pixel-workshop .studio-shell {
  --oa-red: #822119; --oa-green: #104c30; --oa-blue: #173d67;
}
.pixel-workshop .studio-shell :is(.wk-head,.wk-overview-head,.wk-progress-key,.wk-flow-key,.source-integrity),
.pixel-workshop #panel-tasks .north-star>.section-head {
  padding: .65rem .8rem; background: var(--pw-panel); color: var(--pw-soft);
}
.pixel-workshop .studio-shell :is(.wk-head h3,.wk-head h4,.wk-overview-head h4,.source-integrity strong),
.pixel-workshop #panel-tasks .north-star h2 { color: var(--pw-ink) !important; }
.pixel-workshop .studio-shell :is(.wk-range,.wk-progress-key,.source-integrity p) { color: var(--pw-soft) !important; }
.pixel-workshop .studio-shell :is(.wk-link,.wk-head>a,.section-head>a) { color: var(--pw-gold) !important; }
.pixel-workshop .studio-shell :is(.week-howto,.wk-guidance,.section-howto,.task-sky-details,.quick-add) {
  background: var(--pw-panel); color: var(--pw-soft); padding: .5rem .8rem;
}
.pixel-workshop .studio-shell :is(.week-howto,.wk-guidance,.section-howto,.task-sky-details,.quick-add)>summary {
  color: var(--pw-ink) !important; min-height: 44px; align-content: center;
}
.pixel-workshop .studio-shell :is(.week-howto,.section-howto) b { color: var(--pw-ink) !important; }
.pixel-workshop #panel-content #content-assist {
  padding: 1rem 1.2rem; background: var(--oa-bg); border-block: 1px solid var(--pw-edge);
}
.pixel-workshop #panel-content #content-assist>.wk-head { padding: .3rem 0 .7rem; background: transparent; }
.pixel-workshop #panel-content .studio-step h4 { color: var(--pw-ink); font-family: var(--font-head); }
.pixel-workshop #panel-content :is(.studio-step-copy p,.studio-agent,.studio-guide-status,.cta-status) { color: var(--pw-soft); }
.pixel-workshop #panel-content .studio-step-no { color: var(--pw-gold); font-family: var(--font-head); }
.pixel-workshop #panel-content .cta-status { padding: .5rem .7rem; background: var(--pw-panel); }
.pixel-workshop #panel-content .wk-item.is-empty { color: var(--pw-soft); }
.pixel-workshop #panel-workflows .sw-fold { background: var(--pw-panel); padding-inline: .8rem; }
.pixel-workshop #panel-workflows .sw-fold>summary { color: var(--pw-ink); }
.pixel-workshop #panel-workflows .sp-zone-head>span { color: var(--pw-soft); }
.pixel-workshop #panel-tasks .north-star-tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem !important;
  background: var(--pw-inset) !important;
  padding: 0.4rem !important;
  margin: 0.9rem 0 1rem !important;
  border: 1px solid var(--pw-edge) !important;
  border-radius: 12px !important;
}
body.pixel-workshop #panel-tasks #north-star-tabs button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  min-height: 46px !important;
  padding: 0.55rem 0.95rem !important;
  border-radius: 9px !important;
  font: 700 0.98rem/1.3 var(--font-body) !important;
  background: linear-gradient(160deg, color-mix(in srgb, var(--pw-panel) 94%, #253659), var(--pw-inset)) !important;
  border: 1.5px solid color-mix(in srgb, var(--pw-edge) 82%, transparent) !important;
  border-bottom: 3px solid color-mix(in srgb, var(--pw-edge) 55%, #060d1b) !important;
  color: var(--pw-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease !important;
}
body.pixel-workshop #panel-tasks #north-star-tabs button[aria-selected="false"]:is(:hover, :focus-visible) {
  transform: translateY(-2px) !important;
  background: linear-gradient(160deg, color-mix(in srgb, var(--pw-gold) 22%, var(--pw-panel)), var(--pw-panel)) !important;
  border-color: var(--pw-gold) !important;
  color: var(--pw-ink) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
body.pixel-workshop #panel-tasks #north-star-tabs button[aria-selected="true"] {
  color: #fffbeb !important;
  background: linear-gradient(135deg, #684812 0%, #3b2708 100%) !important;
  border: 1.5px solid #fde68a !important;
  border-bottom: 3px solid #c59738 !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}
body.pixel-workshop #panel-tasks #north-star-tabs button[aria-selected="true"]:is(:hover, :focus-visible) {
  transform: translateY(-2px) !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #825b17 0%, #4d330b 100%) !important;
  border-color: #fef08a !important;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.42), 0 8px 18px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
body.pixel-workshop #panel-tasks #north-star-tabs button .tab-count {
  color: var(--pw-gold) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 0 0 0.15rem !important;
  font: 800 0.94rem/1 var(--font-head) !important;
  opacity: 1 !important;
}
body.pixel-workshop #panel-tasks #north-star-tabs button[aria-selected="true"] .tab-count {
  color: #fffbeb !important;
}
.pixel-workshop .studio-shell :is(.row-badge,.work-countdown).is-soon {
  color: #604008 !important; background: #fff1d2 !important;
}
.pixel-workshop .studio-shell :is(.row-badge,.work-countdown).is-overdue {
  color: #7e2019 !important; background: #ffe6e1 !important;
}
.pixel-workshop .studio-shell .row-badge.is-done { color: #104c30 !important; background: #e7f7ed !important; }
.pixel-workshop .studio-shell .row-badge:not(.is-soon):not(.is-overdue):not(.is-done) {
  color: var(--pw-soft) !important; background: var(--pw-inset) !important; padding-inline: .4rem;
}
.pixel-workshop .studio-shell :is(.wk-due.is-red,.wk-prog.is-late) {
  color: #fff !important; background: linear-gradient(180deg,#9b261f,#771b17) !important;
}
.pixel-workshop .studio-shell .cta-type.ct-affiliate { --ti: #104c30; }
.pixel-workshop #panel-content .wk-cta.is-none { color: var(--pw-soft); }
html[data-theme=light] .pixel-workshop .studio-shell :is(.wk-prep.is-complete,.aff-ok) { color: #104c30 !important; }
html[data-theme=light] .pixel-workshop .studio-shell :is(.cta-src.is-audi,.wk-prog.is-done,.wk-cta.is-set) {
  color: #104c30 !important; background: #e7f7ed !important;
}
html[data-theme=light] .pixel-workshop .studio-shell :is(.wk-tag.is-missing,.wk-item.is-empty:not(.is-flex) .wk-missing) { color: #822119 !important; }
html[data-theme=light] .pixel-workshop .studio-shell .wk-tag.tag-carousel { color: #5b174b !important; }
.pixel-workshop .studio-shell .tone-progress { --si: #604008; --sbg: #fff1d2; }
.pixel-workshop .studio-shell .tone-done { --si: #104c30; --sbg: #e7f7ed; }
.pixel-workshop .studio-shell .tone-late { --si: #822119; --sbg: #ffe6e1; }
.pixel-workshop .studio-shell .tone-idle { --si: #293b53; --sbg: #eef0f4; }
html[data-theme=light] .pixel-workshop .studio-shell :is(.wk-date,.wk-fold-posts,.wk-publish-on,.tw-source,.status-label,.sw-skill-line) { color: var(--pw-soft); }
html[data-theme=light] .pixel-workshop #panel-revenue .node-action-link { color: #164e72; }
html[data-theme=light] .pixel-workshop #panel-tasks .sky-arc b { color: var(--pw-gold); }
/* A contextual guide pair owns this chapter while it is present. The legacy
   floating mate returns in library views without that pair; it cannot cover a
   station/control or introduce a third guide on top of the active workspace. */
body.pixel-workshop:has(.cockpit-panel.is-active:not([hidden]) .pw-chapter-cast:not([hidden])) #slime-mate,
body.pixel-workshop:has(#panel-workflows.is-active:not([hidden]) #sw-view-workflows:not([hidden]) .sp-cast:not([hidden])) #slime-mate { display: none !important; }
@media(max-width:760px) {
  .pixel-workshop .studio-shell :is(.opening,.revenue-opening) { grid-template-columns: minmax(0,1fr) 112px; gap: .7rem; }
  .pixel-workshop .studio-shell .opening-copy { grid-column: 1/-1; }
  .pixel-workshop .studio-shell :is(.opening h1,.revenue-opening h1) { line-height: 1.55; }
  .pixel-workshop .pw-chapter-cast { grid-column: 2; grid-row: 2; width: 112px; min-height: 90px; padding-top: 1rem; }
  .pixel-workshop .pw-chapter-cast img { width: 64px; height: 64px; }
  .pixel-workshop .pw-chapter-cast img+img { width: 70px; height: 70px; }
  .pixel-workshop #panel-tasks .opening-pulse,.pixel-workshop #panel-content .opening-pulse { grid-column: 1; grid-row: 2; margin: 0; align-self: center; }
  .pixel-workshop #panel-content #content-assist { padding-inline: .8rem; }
}

/* Repair2: this page owns its paired illustrated sky (data-ak-own-theme).
   Keep reading backings intact instead of letting the shared sky band cleaner
   erase them. Scoped data-ak-lf-skip regions own both their surface and ink. */
.pixel-workshop :is(#panel-tasks,#panel-content) .desk-jumps {
  background: var(--pw-panel) !important; padding: .4rem .7rem;
  border-block: 1px solid var(--pw-edge);
}
.pixel-workshop :is(#panel-tasks,#panel-content) .desk-jumps a { color: var(--pw-soft) !important; }
.pixel-workshop :is(#panel-tasks,#panel-content) .desk-jumps a:is(:hover,:focus-visible) {
  color: var(--pw-gold) !important; background: var(--pw-inset);
}
.pixel-workshop #panel-content #content-assist {
  display: flow-root; background: var(--oa-bg) !important;
}
.pixel-workshop #panel-content #weekly-board>.wk-link {
  display: inline-block; box-sizing: border-box; max-width: 100%;
  padding: .35rem .6rem; color: var(--pw-gold) !important; background: var(--pw-panel);
}
.pixel-workshop #panel-content .opening-pulse { background: var(--oa-bg) !important; }
.pixel-workshop #panel-content #studio-refresh-all {
  color: var(--pw-ink) !important; background: var(--pw-inset);
  border: 1px solid var(--pw-edge); min-height: 44px; padding: .45rem .6rem;
}
/* Keep optional neutral and category inks semantic, with room above AAA7 on
   these solid pairs. Painted acceptance still belongs to SYSTEM's replay. */
.pixel-workshop #panel-content .wk-plan button small { color: var(--pw-soft) !important; }
.pixel-workshop #panel-content .wk-plan button[aria-pressed=true] small { color: #3b2b0c !important; }
.pixel-workshop #panel-content .wk-optional-posts>summary { color: var(--pw-soft) !important; }
html[data-theme=light] .pixel-workshop #panel-content .wk-tag.tag-carousel:not(.is-flex):not(.is-ghost):not(.is-missing) {
  color: #421037 !important; background: #f9ebf1 !important;
}
.pixel-workshop #panel-content .cta-type.ct-save {
  --ti: #543805; color: #543805 !important; background: #f7f0de !important;
}
/* Repair3: AAA >= 7:1 contrast for overdue task time & missing FB-short tags in both themes,
   and single-line coherence for .wk-tag time pills (no 3-line split with isolated ·). */
.pixel-workshop #panel-tasks .priority-row.is-danger .time {
  color: #ffcdc8 !important;
}
html[data-theme=light] .pixel-workshop #panel-tasks .priority-row.is-danger .time {
  color: #6e1710 !important;
}
html[data-theme=light] .pixel-workshop .studio-shell :is(.wk-tag.is-missing,.wk-item.is-empty:not(.is-flex) .wk-missing) {
  color: #6e1710 !important;
}
html[data-theme=light] .pixel-workshop .studio-shell .wk-tag.is-missing {
  background: #fff3ee !important;
  border-color: #b42c1f !important;
}
.pixel-workshop #panel-content .wk-item>.wk-tag {
  white-space: nowrap !important;
  flex-shrink: 0;
}
.pixel-workshop #panel-content .wk-hero .wk-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .45rem .8rem;
}
.pixel-workshop #panel-content .wk-hero .wk-item>.wk-card-copy {
  flex: 1 1 100%;
  order: 3;
}
.pixel-workshop .pw-chapter-cast {
  min-height: 162px !important;
  padding-top: 2.35rem !important;
}
.pixel-workshop .pw-chapter-cast p {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  width: max-content;
  white-space: nowrap !important;
  padding: .2rem .75rem !important;
  border-radius: 999px !important;
  border: 1px solid #c89853;
  background: var(--pw-inset) !important;
  color: var(--pw-gold) !important;
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

/* Repair4: Tab 1 (#panel-tasks) Full-Width Horizontal Workshop Stations, 4-Column Horizontal North Star Pinboard,
   Semantic Jewel-Obsidian Urgency Pills, Frameless 4-KPI Pulse Strip & Multi-Part Playful Hover (Audi 2026-10-22) */
#stream-modal:not(.is-open) {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 0. Full-Width Horizontal Station Flow (No narrow tall right-hand vertical stack!) */
.pixel-workshop #panel-tasks.is-active {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 1.85rem !important;
}
.pixel-workshop #panel-tasks > .opening,
.pixel-workshop #panel-tasks > .command-grid,
.pixel-workshop #panel-tasks > .north-star,
.pixel-workshop #panel-tasks > #daily-intelligence-tasks {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
}

/* 1. Opening Broadcast Header Bar (.opening) */
.pixel-workshop #panel-tasks > .opening {
  padding: 0.9rem 1.35rem 0.85rem !important;
  min-height: 0 !important;
  border: 0 !important;
  border-top: 2px solid color-mix(in srgb, var(--pw-gold) 55%, transparent) !important;
  border-bottom: 6px solid #8a6338 !important;
  border-radius: 0 0 12px 12px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pw-panel) 90%, transparent) 0%, color-mix(in srgb, var(--pw-panel) 96%, #2b2118) 76%, #4c3826 100%) !important;
  box-shadow: 0 6px 0 rgba(6, 12, 24, 0.36) !important;
}
html[data-theme=light] .pixel-workshop #panel-tasks > .opening {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pw-panel) 94%, transparent) 0%, #efe5cf 76%, #cfad76 100%) !important;
  border-bottom-color: #95703e !important;
}
.pixel-workshop #panel-tasks > .opening .opening-copy {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.pixel-workshop #panel-tasks #day-greeting {
  margin: 0;
  font: 700 0.86rem/1.4 var(--font-body);
  color: var(--pw-gold) !important;
  letter-spacing: 0.01em;
}
.pixel-workshop #panel-tasks #today-title {
  margin: 0.15rem 0 0.25rem !important;
  font-size: clamp(1.75rem, 2.5vw, 2.15rem) !important;
}
.pixel-workshop #panel-tasks #today-date {
  margin: 0;
  font-size: 0.92rem;
  color: var(--pw-soft) !important;
}
.pixel-workshop #panel-tasks .task-sky-details {
  width: fit-content;
  margin-top: 0.6rem !important;
  padding: 0.08rem 0.85rem !important;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--pw-gold) 52%, var(--pw-edge));
  background: linear-gradient(135deg, #2b2116 0%, #17120c 100%) !important;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
html[data-theme=light] .pixel-workshop #panel-tasks .task-sky-details {
  background: #fff8e7 !important;
  border-color: #b78536;
}
.pixel-workshop #panel-tasks .task-sky-details:hover {
  transform: translateY(-2px);
  border-color: var(--pw-gold);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.32);
}
.pixel-workshop #panel-tasks .task-sky-details > summary {
  min-height: 34px !important;
  font: 700 0.85rem/1.4 var(--font-body) !important;
  color: var(--pw-gold) !important;
}
.pixel-workshop #panel-tasks .task-sky-details[open] {
  width: 100%;
  border-radius: 12px;
  padding: 0.5rem 0.95rem 0.85rem !important;
}
.pixel-workshop #panel-tasks > .opening .opening-pulse {
  padding: 0.35rem 0 0.35rem 1.25rem !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--oa-hair) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.pixel-workshop #panel-tasks #refresh-all {
  min-height: 40px;
  padding: 0.45rem 0.95rem;
  border-radius: 9px;
  border: 1.5px solid rgba(242, 210, 139, 0.55);
  border-bottom: 3px solid #7d5b28;
  background: linear-gradient(135deg, #3b2b15 0%, #22180b 100%);
  color: #fef3c7 !important;
  font: 700 0.88rem/1.2 var(--font-body);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
html[data-theme=light] .pixel-workshop #panel-tasks #refresh-all {
  background: linear-gradient(180deg, #fff5d9 0%, #edd196 100%);
  border-color: #9e722e;
  border-bottom-color: #74511c;
  color: #2f1f06 !important;
}
.pixel-workshop #panel-tasks #refresh-all:is(:hover, :focus-visible) {
  transform: translateY(-2px);
  border-color: #fde68a;
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.34);
}
html[data-theme=light] .pixel-workshop #panel-tasks #refresh-all:is(:hover, :focus-visible) {
  color: #1c1203 !important;
}

/* 2. Station 1: งานวันนี้ (.dayline) — Full-Width 2-Column Horizontal Cue Workbench */
.pixel-workshop #panel-tasks .dayline {
  position: relative;
  min-height: 0 !important;
  margin-top: 0.65rem !important;
  padding: 1.35rem 1.45rem 1.15rem !important;
  border-radius: 0 14px 14px 14px !important;
  border: 2px solid #c89853 !important;
  border-bottom: 6px solid #806047 !important;
  background: var(--oa-bg) !important;
  box-shadow: inset 0 0 0 3px var(--pw-panel), 0 8px 0 rgba(8, 15, 29, 0.42) !important;
}
.pixel-workshop #panel-tasks .dayline::before {
  content: '📋 คิวงานวันนี้';
  display: flex !important;
  align-items: center;
  position: absolute;
  top: -24px;
  left: -2px;
  height: 24px;
  padding: 0 0.95rem;
  font: 700 0.78rem/1 var(--font-body);
  color: #241c10;
  border: 2px solid #c89853;
  border-bottom: 0;
  border-radius: 9px 14px 0 0;
  background: linear-gradient(180deg, #f3d58d, #b88444);
}
.pixel-workshop #panel-tasks .dayline > .section-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  flex-wrap: wrap;
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--oa-hair);
}
.pixel-workshop #panel-tasks .task-heading-actions {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem !important;
  flex-wrap: wrap;
}
.pixel-workshop #panel-tasks #quick-add-link {
  display: inline-flex !important;
  align-items: center;
  gap: 0.55rem !important;
  min-height: 44px !important;
  padding: 0.5rem 1rem !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #684812 0%, #3b2708 100%) !important;
  color: #fffbeb !important;
  border: 1.5px solid #fde68a !important;
  border-bottom: 3px solid #97703b !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease !important;
}
.pixel-workshop #panel-tasks #quick-add-link:is(:hover, :focus-visible) {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #825b17 0%, #4d330b 100%) !important;
  border-color: #fef08a !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.38), 0 8px 18px rgba(0, 0, 0, 0.4) !important;
}
.pixel-workshop #panel-tasks .task-heading-actions > a:not(#quick-add-link) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.95rem;
  border-radius: 10px;
  border: 1.5px solid rgba(56, 189, 248, 0.58);
  border-bottom: 3px solid #0c4a6e;
  background: linear-gradient(135deg, #12355b 0%, #0b2038 100%);
  color: #e0f2fe !important;
  font: 700 0.88rem/1.3 var(--font-body);
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease;
}
html[data-theme=light] .pixel-workshop #panel-tasks .task-heading-actions > a:not(#quick-add-link) {
  background: linear-gradient(180deg, #e6f4fe 0%, #cce6fa 100%);
  border-color: #2b6cb0;
  border-bottom-color: #1e4e8c;
  color: #0d335d !important;
}
.pixel-workshop #panel-tasks .task-heading-actions > a:not(#quick-add-link):is(:hover, :focus-visible) {
  transform: translateY(-2px);
  border-color: #7dd3fc;
  background: linear-gradient(135deg, #19487a 0%, #0f2c4c 100%);
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(14, 165, 233, 0.28);
}
html[data-theme=light] .pixel-workshop #panel-tasks .task-heading-actions > a:not(#quick-add-link):is(:hover, :focus-visible) {
  background: linear-gradient(180deg, #d5ecfd 0%, #b8dcf8 100%);
  color: #072241 !important;
}

/* 2-Column Horizontal Priority Queue Grid (#priority-list) */
.pixel-workshop #panel-tasks .priority-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.7rem 1.15rem !important;
}
.pixel-workshop #panel-tasks .priority-list::before,
.pixel-workshop #panel-tasks .priority-row::before,
.pixel-workshop #panel-tasks .priority-row > div::before {
  display: none !important;
  content: none !important;
}
.pixel-workshop #panel-tasks .priority-row {
  position: relative;
  display: grid !important;
  grid-template-columns: 6.4rem minmax(0, 1fr) !important;
  align-items: center;
  gap: 0.85rem !important;
  min-height: 0 !important;
  padding: 0.78rem 2rem 0.78rem 0.8rem !important;
  border: 0 !important;
  border-left: 4px solid var(--pw-gold) !important;
  border-bottom: 1px solid var(--oa-line) !important;
  border-radius: 0 10px 10px 0 !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pw-inset) 76%, transparent) 0%, transparent 98%) !important;
  transition: transform 170ms cubic-bezier(0.16, 1, 0.3, 1), border-color 170ms ease, background 170ms ease, box-shadow 170ms ease !important;
}
.pixel-workshop #panel-tasks .priority-row::after {
  content: '→';
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font: 700 1rem/1 var(--font-head);
  color: var(--pw-soft);
  opacity: 0.65;
  transition: transform 170ms ease, color 170ms ease, opacity 170ms ease;
}
.pixel-workshop #panel-tasks .priority-row > div {
  padding-left: 0 !important;
}
.pixel-workshop #panel-tasks .priority-row:is(:hover, :focus-within) {
  transform: translateY(-2.5px) !important;
  border-color: var(--pw-gold) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pw-gold) 14%, var(--pw-panel)), var(--pw-inset)) !important;
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.32) !important;
}
.pixel-workshop #panel-tasks .priority-row:is(:hover, :focus-within)::after {
  color: var(--pw-gold);
  opacity: 1;
  transform: translate(3px, -50%);
}
/* Semantic Jewel-Obsidian .time pills inside #priority-list */
.pixel-workshop #panel-tasks .priority-row .time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.32rem 0.6rem;
  border-radius: 8px;
  background: linear-gradient(135deg, #12355b 0%, #0b2038 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.68);
  font: 700 0.82rem/1.25 var(--font-body);
  color: #e0f2fe !important;
  text-align: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 170ms ease, box-shadow 170ms ease;
}
.pixel-workshop #panel-tasks .priority-row:is(:hover, :focus-within) .time {
  transform: scale(1.04);
}
.pixel-workshop #panel-tasks .priority-row.is-today {
  border-left-color: #f59e0b !important;
}
.pixel-workshop #panel-tasks .priority-row.is-today .time {
  background: linear-gradient(135deg, #684812 0%, #3b2708 100%);
  border-color: #fde68a;
  color: #fffbeb !important;
}
.pixel-workshop #panel-tasks .priority-row.is-tomorrow {
  border-left-color: #a855f7 !important;
}
.pixel-workshop #panel-tasks .priority-row.is-tomorrow .time {
  background: linear-gradient(135deg, #3b2363 0%, #21123b 100%);
  border-color: rgba(192, 132, 252, 0.78);
  color: #f3e8ff !important;
}
.pixel-workshop #panel-tasks .priority-row.is-routine {
  border-left-color: #10b981 !important;
}
.pixel-workshop #panel-tasks .priority-row.is-routine .time {
  background: linear-gradient(135deg, #123e31 0%, #09241c 100%);
  border-color: rgba(52, 211, 153, 0.78);
  color: #d1fae5 !important;
}
.pixel-workshop #panel-tasks .priority-row.is-danger {
  border-left-color: #f43f5e !important;
}
.pixel-workshop #panel-tasks .priority-row.is-danger .time {
  background: linear-gradient(135deg, #4c1424 0%, #2d0a14 100%);
  border-color: #f43f5e;
  color: #ffcdc8 !important;
}
html[data-theme=light] .pixel-workshop #panel-tasks .priority-row .time {
  background: #e0f2fe;
  border-color: #0284c7;
  color: #0c4a6e !important;
  box-shadow: none;
}
html[data-theme=light] .pixel-workshop #panel-tasks .priority-row.is-today .time {
  background: #fef3c7;
  border-color: #b45309;
  color: #451a03 !important;
}
html[data-theme=light] .pixel-workshop #panel-tasks .priority-row.is-tomorrow .time {
  background: #f3e8ff;
  border-color: #7e22ce;
  color: #3b0764 !important;
}
html[data-theme=light] .pixel-workshop #panel-tasks .priority-row.is-routine .time {
  background: #d1fae5;
  border-color: #047857;
  color: #064e3b !important;
}
html[data-theme=light] .pixel-workshop #panel-tasks .priority-row.is-danger .time {
  background: #ffe6e1;
  border-color: #b42c1f;
  color: #6e1710 !important;
}
.pixel-workshop #panel-tasks .priority-row a {
  display: block;
  font: 700 0.98rem/1.42 var(--font-body);
  color: var(--pw-ink) !important;
}
.pixel-workshop #panel-tasks .priority-row:hover a {
  color: var(--pw-gold) !important;
}
.pixel-workshop #panel-tasks .priority-row small {
  display: block;
  margin-top: 0.16rem;
  font-size: 0.83rem;
  color: var(--pw-soft) !important;
}

/* Bottom Workbench Strip of .dayline (.quick-strip + .quick-add) */
.pixel-workshop #panel-tasks .quick-strip {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin-top: 0.9rem !important;
  padding: 0.7rem 0.75rem 0.65rem !important;
  border-top: 0 !important;
  border-bottom: 4px solid #8a6338 !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, transparent 10%, color-mix(in srgb, #4c3826 65%, var(--pw-inset)) 100%) !important;
  gap: 0.75rem !important;
}
html[data-theme=light] .pixel-workshop #panel-tasks .quick-strip {
  background: linear-gradient(180deg, transparent 15%, #dec08e 100%) !important;
  border-bottom-color: #95703e !important;
}
.pixel-workshop #panel-tasks .quick-strip a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px !important;
  padding: 0.52rem 0.95rem !important;
  border-radius: 9px !important;
  border: 1.5px solid rgba(52, 211, 153, 0.55) !important;
  border-bottom: 3px solid #065f46 !important;
  background: linear-gradient(135deg, #123e31 0%, #09241c 100%) !important;
  color: #ecfdf5 !important;
  font: 700 0.92rem/1.3 var(--font-body) !important;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease !important;
}
.pixel-workshop #panel-tasks .quick-strip a + a {
  border-color: rgba(168, 85, 247, 0.62) !important;
  border-bottom-color: #4c1d95 !important;
  background: linear-gradient(135deg, #3b2363 0%, #21123b 100%) !important;
  color: #f3e8ff !important;
}
html[data-theme=light] .pixel-workshop #panel-tasks .quick-strip a {
  background: linear-gradient(180deg, #e7f8ef 0%, #c8eedb 100%) !important;
  border-color: #107c54 !important;
  border-bottom-color: #0b583b !important;
  color: #083c28 !important;
}
html[data-theme=light] .pixel-workshop #panel-tasks .quick-strip a + a {
  background: linear-gradient(180deg, #f3e8ff 0%, #e2cbfc 100%) !important;
  border-color: #6b21a8 !important;
  border-bottom-color: #4c1d95 !important;
  color: #3b0764 !important;
}
.pixel-workshop #panel-tasks .quick-strip a:is(:hover, :focus-visible) {
  transform: translateY(-2px);
  border-color: var(--pw-gold) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme=light] .pixel-workshop #panel-tasks .quick-strip a:is(:hover, :focus-visible) {
  color: #111827 !important;
}
.pixel-workshop #panel-tasks .quick-add {
  margin-top: 0.55rem !important;
  padding: 0.1rem 0.4rem !important;
  border: 0 !important;
  border-top: 1px dashed var(--oa-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.pixel-workshop #panel-tasks .quick-add > summary {
  color: var(--pw-gold) !important;
  font-weight: 700;
  transition: transform 150ms ease, color 150ms ease;
}
.pixel-workshop #panel-tasks .quick-add > summary:hover {
  transform: translateX(3px);
}

/* 3. Station 2: 🧭 เป้าหมายและโปรเจกต์ (.north-star) — Unified Horizontal Workshop Pinboard
   (No vertical 1-column stretch! Header + Switcher on 1 top bar, 4-Column Horizontal Goal Row,
   and Frameless 3-Column Active Projects Strip inside the same board!) */
.pixel-workshop #panel-tasks .north-star {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center;
  gap: 0.9rem 1.25rem !important;
  margin-top: 0.65rem !important;
  padding: 1.3rem 1.45rem 1.35rem !important;
  border-radius: 0 14px 14px 14px !important;
  border: 2px solid #c89853 !important;
  border-bottom: 6px solid #806047 !important;
  background: var(--oa-bg) !important;
  box-shadow: inset 0 0 0 3px var(--pw-panel), 0 8px 0 rgba(8, 15, 29, 0.42) !important;
}
.pixel-workshop #panel-tasks .north-star::before {
  content: '🧭 เข็มทิศเป้าหมาย & โปรเจกต์';
  display: flex !important;
  align-items: center;
  position: absolute;
  top: -24px;
  left: -2px;
  height: 24px;
  padding: 0 0.95rem;
  font: 700 0.78rem/1 var(--font-body);
  color: #241c10;
  border: 2px solid #c89853;
  border-bottom: 0;
  border-radius: 9px 14px 0 0;
  background: linear-gradient(180deg, #f3d58d, #b88444);
}
.pixel-workshop #panel-tasks .north-star > .section-head {
  grid-column: 1;
  grid-row: 1;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.pixel-workshop #panel-tasks .north-star > .section-head > a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0.45rem 0.95rem;
  border-radius: 10px;
  border: 1.5px solid rgba(242, 210, 139, 0.62);
  border-bottom: 3px solid #7d5b28;
  background: linear-gradient(135deg, #3b2b15 0%, #22180b 100%);
  color: #fef3c7 !important;
  font: 700 0.86rem/1.25 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease;
}
html[data-theme=light] .pixel-workshop #panel-tasks .north-star > .section-head > a {
  background: linear-gradient(180deg, #fff5d9 0%, #edd196 100%);
  border-color: #9e722e;
  border-bottom-color: #74511c;
  color: #2f1f06 !important;
}
.pixel-workshop #panel-tasks .north-star > .section-head > a:is(:hover, :focus-visible) {
  transform: translateY(-2px);
  border-color: #fde68a;
  background: linear-gradient(135deg, #523b1c 0%, #2f210f 100%);
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.36);
}
html[data-theme=light] .pixel-workshop #panel-tasks .north-star > .section-head > a:is(:hover, :focus-visible) {
  background: linear-gradient(180deg, #fffaeb 0%, #e4c17a 100%);
  color: #1c1203 !important;
}
/* Connected Switcher Shelf (#north-star-tabs) aligned on the right of Row 1 */
.pixel-workshop #panel-tasks #north-star-tabs {
  grid-column: 2;
  grid-row: 1;
  display: inline-grid !important;
  grid-template-columns: repeat(2, minmax(138px, auto));
  gap: 0.45rem !important;
  margin: 0 !important;
  padding: 0.32rem !important;
  border-radius: 12px !important;
  border: 1.5px solid var(--pw-edge) !important;
  background: var(--pw-inset) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.42) !important;
}

/* 4-Column Horizontal Goal Gallery (#north-star-goals) */
.pixel-workshop #panel-tasks .goal-gallery {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.85rem !important;
  padding-top: 0.85rem;
  border-top: 1px solid var(--oa-hair);
}
.pixel-workshop #panel-tasks .goal-gallery:not(.is-expanded) .goal-card.is-extra-goal {
  display: none !important;
}
.pixel-workshop #panel-tasks .goal-card {
  position: relative;
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  align-items: center;
  gap: 0.78rem !important;
  padding: 0.65rem 1.85rem 0.65rem 0.68rem !important;
  border-radius: 12px !important;
  border: 1.5px solid color-mix(in srgb, var(--pw-edge) 75%, transparent) !important;
  border-left: 4px solid var(--pw-gold) !important;
  border-bottom: 4px solid #8a6338 !important;
  background: color-mix(in srgb, var(--pw-inset) 86%, var(--pw-panel)) !important;
  box-shadow: 0 5px 12px rgba(6, 12, 24, 0.34) !important;
  text-decoration: none;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), border-color 180ms ease, background 180ms ease, box-shadow 180ms ease !important;
}
.pixel-workshop #panel-tasks .goal-card.is-urgent {
  border-left-color: #f43f5e !important;
}
.pixel-workshop #panel-tasks .goal-card.is-dream {
  border-left-color: #a855f7 !important;
}
.pixel-workshop #panel-tasks .goal-card::after {
  content: '↗';
  position: absolute;
  right: 0.62rem;
  top: 0.62rem;
  font: 700 0.92rem/1 var(--font-head);
  color: var(--pw-soft);
  opacity: 0.7;
  transition: transform 180ms ease, color 180ms ease, opacity 180ms ease;
}
.pixel-workshop #panel-tasks .goal-card:is(:hover, :focus-visible) {
  transform: translateY(-3.5px) !important;
  border-color: var(--pw-gold) !important;
  background: linear-gradient(155deg, color-mix(in srgb, var(--pw-panel) 88%, #47361d), var(--pw-inset)) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.42), 0 0 14px rgba(242, 210, 139, 0.18) !important;
}
.pixel-workshop #panel-tasks .goal-card:is(:hover, :focus-visible)::after {
  color: var(--pw-gold);
  opacity: 1;
  transform: translate(2px, -2px);
}
.pixel-workshop #panel-tasks .goal-media {
  width: 92px !important;
  height: 70px !important;
  aspect-ratio: auto !important;
  border-radius: 8px !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--pw-panel) !important;
  display: grid;
  place-items: center;
}
.pixel-workshop #panel-tasks .goal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pixel-workshop #panel-tasks .goal-card:is(:hover, :focus-visible) .goal-media img {
  transform: scale(1.08);
}
.pixel-workshop #panel-tasks .goal-copy {
  padding: 0 !important;
  gap: 0.24rem !important;
  min-width: 0;
}
.pixel-workshop #panel-tasks .goal-copy strong {
  font: 700 0.94rem/1.34 var(--font-head) !important;
  color: var(--pw-ink) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pixel-workshop #panel-tasks .goal-card:is(:hover, :focus-visible) .goal-copy strong {
  color: var(--pw-gold) !important;
}
.pixel-workshop #panel-tasks .goal-copy small {
  font-size: 0.78rem !important;
  line-height: 1.38 !important;
  color: var(--pw-soft) !important;
}
.pixel-workshop #panel-tasks .goal-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem;
}
.pixel-workshop #panel-tasks .goal-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.42rem;
  border-radius: 6px;
  font: 600 0.73rem/1.25 var(--font-body);
  background: color-mix(in srgb, var(--pw-panel) 92%, #334155);
  border: 1px solid color-mix(in srgb, var(--pw-edge) 65%, transparent);
  color: var(--pw-soft);
}
.pixel-workshop #panel-tasks .goal-chip.is-prio.is-urgent {
  background: rgba(159, 18, 57, 0.38);
  border-color: rgba(244, 63, 94, 0.65);
  color: #fecdd3;
}
.pixel-workshop #panel-tasks .goal-chip.is-prio.is-high {
  background: rgba(120, 53, 15, 0.42);
  border-color: rgba(245, 158, 11, 0.65);
  color: #fef3c7;
}
html[data-theme=light] .pixel-workshop #panel-tasks .goal-chip.is-prio.is-urgent {
  background: #ffe4e6;
  border-color: #e11d48;
  color: #881337;
}
html[data-theme=light] .pixel-workshop #panel-tasks .goal-chip.is-prio.is-high {
  background: #fef3c7;
  border-color: #d97706;
  color: #78350f;
}
.pixel-workshop #panel-tasks .goal-copy .goal-date {
  color: var(--pw-gold) !important;
  font-weight: 700 !important;
}

/* Expand/Collapse Toggle Button (#north-star-more-btn) */
.pixel-workshop #panel-tasks .north-star-more-btn {
  grid-column: 1 / -1;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 38px;
  padding: 0.38rem 1.05rem;
  border-radius: 999px;
  border: 1.5px solid rgba(242, 210, 139, 0.58);
  border-bottom: 3px solid #7d5b28;
  background: linear-gradient(135deg, #3b2b15 0%, #22180b 100%);
  color: #fef3c7 !important;
  font: 700 0.84rem/1.2 var(--font-body);
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
html[data-theme=light] .pixel-workshop #panel-tasks .north-star-more-btn {
  background: linear-gradient(180deg, #fff5d9 0%, #edd196 100%);
  border-color: #9e722e;
  border-bottom-color: #74511c;
  color: #2f1f06 !important;
}
.pixel-workshop #panel-tasks .north-star-more-btn:is(:hover, :focus-visible) {
  transform: translateY(-2px);
  border-color: #fde68a;
  background: linear-gradient(135deg, #523b1c 0%, #2f210f 100%);
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.36);
}
html[data-theme=light] .pixel-workshop #panel-tasks .north-star-more-btn:is(:hover, :focus-visible) {
  background: linear-gradient(180deg, #fffaeb 0%, #e4c17a 100%);
  color: #1c1203 !important;
}

/* Frameless 3-Column Active Projects Strip (.north-star-projects — Zero Box-in-Box!) */
.pixel-workshop #panel-tasks .north-star-projects {
  grid-column: 1 / -1;
  margin-top: 0.35rem !important;
  padding: 0.95rem 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--oa-hair) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.pixel-workshop #panel-tasks .north-star-projects h3 {
  margin: 0 0 0.65rem !important;
  font: 700 1.08rem/1.35 var(--font-head) !important;
  color: var(--pw-ink) !important;
}
.pixel-workshop #panel-tasks #north-star-projects {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.65rem 0.9rem !important;
}
.pixel-workshop #panel-tasks #north-star-projects .intelligence-row {
  padding: 0.68rem 0.85rem !important;
  border: 0 !important;
  border-left: 3px solid var(--pw-mint) !important;
  border-bottom: 1px solid var(--oa-line) !important;
  border-radius: 0 10px 10px 0 !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pw-inset) 74%, transparent) 0%, transparent 96%) !important;
}
.pixel-workshop #panel-tasks #north-star-projects .intelligence-row:hover {
  transform: translateY(-2px);
  border-left-color: var(--pw-gold) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pw-mint) 14%, var(--pw-panel)), var(--pw-inset)) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3) !important;
}

/* 4. Station 3: ภาพรวมวันนี้ (#daily-intelligence-tasks) — Open Heading, Connected Segmented Jump Bar,
   Frameless 4-KPI Pulse Strip & Semantic Jewel-Obsidian .row-badge Pills */
.pixel-workshop #panel-tasks #daily-intelligence-tasks .intelligence-heading {
  padding: 0.95rem 1.25rem !important;
  margin-bottom: 0 !important;
  border-radius: 12px 12px 0 0;
  border: 1.5px solid var(--pw-edge);
  border-top: 3px solid var(--pw-gold);
  border-bottom: 1px solid var(--oa-line);
  background: linear-gradient(90deg, var(--pw-panel), color-mix(in srgb, var(--pw-inset) 92%, transparent)) !important;
}
.pixel-workshop #panel-tasks #daily-intelligence-tasks.is-locked .intelligence-heading {
  border-radius: 12px;
  border-bottom: 4px solid #8a6338;
}
.pixel-workshop #panel-tasks #daily-intelligence-tasks .desk-locked-note {
  margin-top: 0.4rem !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--pw-gold) !important;
  font-weight: 600;
}
.pixel-workshop #panel-tasks #daily-intelligence-tasks.is-locked .desk-jumps {
  display: none !important;
}
.pixel-workshop #panel-tasks .desk-jumps {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.55rem !important;
  padding: 0.55rem 1.15rem !important;
  margin-bottom: 1.35rem !important;
  border-radius: 0 0 12px 12px;
  border: 1.5px solid var(--pw-edge) !important;
  border-top: 0 !important;
  border-bottom: 4px solid #8a6338 !important;
  background: var(--pw-inset) !important;
}
.pixel-workshop #panel-tasks .desk-jumps a {
  display: inline-flex;
  align-items: center;
  min-height: 38px !important;
  padding: 0.38rem 0.9rem !important;
  border-radius: 8px !important;
  border: 1.5px solid color-mix(in srgb, var(--pw-edge) 72%, transparent) !important;
  border-bottom: 3px solid color-mix(in srgb, var(--pw-edge) 55%, #060d1b) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pw-panel) 94%, #253659), var(--pw-inset)) !important;
  color: var(--pw-ink) !important;
  font: 700 0.86rem/1.2 var(--font-body) !important;
  text-decoration: none !important;
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease !important;
}
.pixel-workshop #panel-tasks .desk-jumps a:is(:hover, :focus-visible) {
  transform: translateY(-2px);
  border-color: var(--pw-gold) !important;
  color: var(--pw-gold) !important;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.28);
}

/* Frameless 4-KPI Pulse Strip inside #command-summary */
.pixel-workshop #panel-tasks #command-summary {
  padding: 0.75rem 0 0.85rem !important;
  margin-bottom: 0.75rem !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--oa-hair) !important;
}
.pixel-workshop #panel-tasks #command-summary .cs-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}
.pixel-workshop #panel-tasks #command-summary .cs-kpi-sep {
  display: none;
}
.pixel-workshop #panel-tasks #command-summary .cs-kpi-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.85rem;
  border-radius: 0 8px 8px 0;
  border: 0;
  border-left: 3px solid var(--pw-gold);
  background: linear-gradient(90deg, color-mix(in srgb, var(--pw-inset) 74%, transparent) 0%, transparent 96%);
}
.pixel-workshop #panel-tasks #command-summary .cs-kpi-item.is-tasks {
  border-left-color: var(--pw-mint);
}
.pixel-workshop #panel-tasks #command-summary .cs-kpi-item.is-soon {
  border-left-color: #f59e0b;
}
.pixel-workshop #panel-tasks #command-summary .cs-kpi-label {
  font: 600 0.84rem/1.3 var(--font-body);
  color: var(--pw-soft);
}
.pixel-workshop #panel-tasks #command-summary .cs-kpi-num {
  font: 800 1.32rem/1 var(--font-head);
  color: var(--pw-ink);
}
.pixel-workshop #panel-tasks #command-summary .cs-kpi-item.is-soon .cs-kpi-num {
  color: var(--pw-gold);
}
.pixel-workshop #panel-tasks #command-summary .cs-kpi-item.is-danger {
  border-left-color: #f43f5e;
  background: linear-gradient(90deg, rgba(136, 19, 55, 0.32) 0%, transparent 96%);
}
.pixel-workshop #panel-tasks #command-summary .cs-kpi-item.is-danger .cs-kpi-num {
  color: #fda4af;
}
html[data-theme=light] .pixel-workshop #panel-tasks #command-summary .cs-kpi-item.is-danger {
  background: linear-gradient(90deg, #ffe4e6 0%, transparent 96%);
  border-left-color: #e11d48;
}
html[data-theme=light] .pixel-workshop #panel-tasks #command-summary .cs-kpi-item.is-danger .cs-kpi-num {
  color: #881337;
}
.pixel-workshop #panel-tasks #command-summary .cs-nearest-line {
  margin: 0;
  font: 600 0.92rem/1.5 var(--font-body);
  color: var(--pw-gold) !important;
}

.pixel-workshop #panel-tasks :is(.command-overview, .deadline-panel, .intelligence-card) {
  border-radius: 14px !important;
  border: 1.5px solid var(--pw-edge) !important;
  border-top: 3px solid var(--pw-gold) !important;
  border-bottom: 4px solid #8a6338 !important;
  background: var(--oa-bg) !important;
  box-shadow: 0 8px 22px rgba(6, 12, 24, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
.pixel-workshop #panel-tasks .intelligence-row {
  padding: 0.78rem 0.65rem !important;
  border: 0 !important;
  border-bottom: 1px dashed var(--oa-line) !important;
  border-left: 3px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background 150ms ease, transform 150ms ease, border-color 150ms ease;
}
.pixel-workshop #panel-tasks .intelligence-row:hover {
  transform: translateX(3px);
  border-left-color: var(--pw-gold) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pw-gold) 12%, var(--pw-inset)), transparent 92%) !important;
}

/* Semantic Jewel-Obsidian .row-badge & .work-countdown Pills (No clipped cream squares!) */
.pixel-workshop .studio-shell :is(.row-badge, .work-countdown) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.25rem 0.72rem !important;
  border-radius: 999px !important;
  font: 700 0.78rem/1.25 var(--font-body) !important;
  white-space: nowrap !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
.pixel-workshop .studio-shell :is(.row-badge, .work-countdown).is-soon {
  background: linear-gradient(135deg, #684812 0%, #3b2708 100%) !important;
  border: 1.5px solid rgba(253, 230, 138, 0.78) !important;
  color: #fffbeb !important;
}
.pixel-workshop .studio-shell :is(.row-badge, .work-countdown).is-overdue {
  background: linear-gradient(135deg, #4c1424 0%, #2d0a14 100%) !important;
  border: 1.5px solid rgba(244, 63, 94, 0.78) !important;
  color: #ffe4e6 !important;
}
.pixel-workshop .studio-shell :is(.row-badge, .work-countdown).is-done {
  background: linear-gradient(135deg, #123e31 0%, #09241c 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.78) !important;
  color: #d1fae5 !important;
}
.pixel-workshop .studio-shell .row-badge:not(.is-soon):not(.is-overdue):not(.is-done) {
  background: linear-gradient(135deg, #12355b 0%, #0b2038 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.62) !important;
  color: #e0f2fe !important;
}
html[data-theme=light] .pixel-workshop .studio-shell :is(.row-badge, .work-countdown).is-soon {
  background: #fef3c7 !important;
  border: 1.5px solid #b45309 !important;
  color: #451a03 !important;
  box-shadow: none !important;
}
html[data-theme=light] .pixel-workshop .studio-shell :is(.row-badge, .work-countdown).is-overdue {
  background: #ffe6e1 !important;
  border: 1.5px solid #b42c1f !important;
  color: #6e1710 !important;
  box-shadow: none !important;
}
html[data-theme=light] .pixel-workshop .studio-shell :is(.row-badge, .work-countdown).is-done {
  background: #d1fae5 !important;
  border: 1.5px solid #047857 !important;
  color: #064e3b !important;
  box-shadow: none !important;
}
html[data-theme=light] .pixel-workshop .studio-shell .row-badge:not(.is-soon):not(.is-overdue):not(.is-done) {
  background: #e0f2fe !important;
  border: 1.5px solid #0284c7 !important;
  color: #0c4a6e !important;
  box-shadow: none !important;
}

.pixel-workshop #panel-tasks .done-btn {
  min-height: 38px;
  padding: 0.38rem 0.85rem;
  border-radius: 8px;
  border: 1.5px solid #34d399;
  border-bottom: 3px solid #059669;
  background: linear-gradient(135deg, #114232 0%, #09261d 100%);
  color: #ecfdf5 !important;
  font: 700 0.84rem/1.2 var(--font-body);
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
html[data-theme=light] .pixel-workshop #panel-tasks .done-btn {
  background: linear-gradient(180deg, #d1fae5 0%, #a7f3d0 100%);
  border-color: #047857;
  border-bottom-color: #065f46;
  color: #064e3b !important;
}
.pixel-workshop #panel-tasks .done-btn:is(:hover, :focus-visible) {
  transform: translateY(-1.5px);
  box-shadow: 0 5px 14px rgba(16, 185, 129, 0.32);
}
.pixel-workshop #panel-tasks .row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.pixel-workshop #panel-tasks .status-label {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  font: 600 0.8rem/1.25 var(--font-body);
  color: var(--pw-soft) !important;
}
.pixel-workshop #panel-tasks :is(.status-select, .date-input),
.pixel-workshop #panel-tasks #quick-add-form :is(input, select) {
  min-height: 36px !important;
  padding: 0.32rem 0.62rem !important;
  border-radius: 8px !important;
  border: 1.5px solid color-mix(in srgb, var(--pw-edge) 85%, #38bdf8) !important;
  border-bottom: 2px solid #091020 !important;
  background: linear-gradient(180deg, #101b33 0%, #0b1325 100%) !important;
  color: var(--pw-ink) !important;
  font: 600 0.82rem/1.25 var(--font-body) !important;
  color-scheme: dark !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.42) !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
}
.pixel-workshop #panel-tasks :is(.status-select, .date-input) option,
.pixel-workshop #panel-tasks #quick-add-form select option {
  background: #0d1528;
  color: #f8fafc;
}
html[data-theme=light] .pixel-workshop #panel-tasks :is(.status-select, .date-input),
html[data-theme=light] .pixel-workshop #panel-tasks #quick-add-form :is(input, select) {
  background: #fffcf5 !important;
  color: #1f2937 !important;
  border-color: #9ca3af !important;
  border-bottom-color: #6b7280 !important;
  color-scheme: light !important;
  box-shadow: none !important;
}
html[data-theme=light] .pixel-workshop #panel-tasks :is(.status-select, .date-input) option,
html[data-theme=light] .pixel-workshop #panel-tasks #quick-add-form select option {
  background: #ffffff;
  color: #111827;
}
.pixel-workshop #panel-tasks :is(.status-select, .date-input):is(:hover, :focus-visible),
.pixel-workshop #panel-tasks #quick-add-form :is(input, select):is(:hover, :focus-visible) {
  border-color: var(--pw-gold) !important;
  box-shadow: 0 0 0 2px rgba(242, 210, 139, 0.22) !important;
}

/* Responsive Breakpoints for Horizontal Workshop Stations */
@media (max-width: 1240px) {
  .pixel-workshop #panel-tasks .goal-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .pixel-workshop #panel-tasks #north-star-projects {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .pixel-workshop #panel-tasks #command-summary .cs-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .pixel-workshop #panel-tasks .north-star {
    grid-template-columns: 1fr !important;
  }
  .pixel-workshop #panel-tasks #north-star-tabs {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
  }
  .pixel-workshop #panel-tasks .priority-list {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 760px) {
  .pixel-workshop #panel-tasks.is-active {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .pixel-workshop #panel-tasks > .opening .opening-pulse {
    border-left: 0 !important;
    border-top: 1px solid var(--oa-hair) !important;
    padding: 0.65rem 0 0 !important;
  }
  .pixel-workshop #panel-tasks .priority-row {
    grid-template-columns: 1fr !important;
    gap: 0.45rem !important;
  }
  .pixel-workshop #panel-tasks .priority-row .time {
    justify-self: start;
  }
  .pixel-workshop #panel-tasks .quick-strip,
  .pixel-workshop #panel-tasks .goal-gallery,
  .pixel-workshop #panel-tasks #north-star-projects,
  .pixel-workshop #panel-tasks #command-summary .cs-kpi-strip {
    grid-template-columns: 1fr !important;
  }
}

/* Zero Box-in-Box Sub-Navbar & Zero Pill-in-Button Lock (Audi 2026-10-22) */
.pixel-workshop nav.cockpit-tabs-bar,
.pixel-workshop #panel-tasks #north-star-tabs {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  gap: 8px !important;
}
.pixel-workshop nav.cockpit-tabs-bar .cockpit-tab-btn :is(.tab-badge, .tab-shortcut, span, b, small),
.pixel-workshop #panel-tasks #north-star-tabs button :is(span, b, small) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ==========================================================================
   Repair5: Adapt Approved Tab 1 Pixel Workshop Station Architecture Across
   Tab 2 (#panel-content), Tab 3 (#panel-workflows), Tab 4 (#panel-revenue),
   & #stream-modal (Audi 2026-10-22: "ดูดีขึ้นทีนี้เอาการออกแบบนี้ไปadaptกับหน้าอื่นก่อน")
   ========================================================================== */

/* 1. Shared Broadcast Header Shelf (.opening, .revenue-opening) Across Tabs */
.pixel-workshop :is(#panel-content > .opening, #panel-revenue > .revenue-opening) {
  padding: 0.95rem 1.35rem 0.9rem !important;
  min-height: 0 !important;
  margin: 0 0 1.45rem !important;
  border: 0 !important;
  border-top: 2px solid color-mix(in srgb, var(--pw-gold) 55%, transparent) !important;
  border-bottom: 6px solid #8a6338 !important;
  border-radius: 0 0 12px 12px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pw-panel) 90%, transparent) 0%, color-mix(in srgb, var(--pw-panel) 96%, #2b2118) 76%, #4c3826 100%) !important;
  box-shadow: 0 6px 0 rgba(6, 12, 24, 0.36) !important;
}
html[data-theme=light] .pixel-workshop :is(#panel-content > .opening, #panel-revenue > .revenue-opening) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pw-panel) 94%, transparent) 0%, #efe5cf 76%, #cfad76 100%) !important;
  border-bottom-color: #95703e !important;
}
body.pixel-workshop #slime-mate {
  display: none !important;
}
.pixel-workshop :is(#panel-content > .opening, #panel-revenue > .revenue-opening) .opening-copy {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.pixel-workshop #panel-content > .opening .opening-pulse {
  padding: 0.35rem 0 0.35rem 1.25rem !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--oa-hair) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.pixel-workshop #panel-content #studio-refresh-all {
  min-height: 40px;
  padding: 0.45rem 0.95rem;
  border-radius: 9px;
  border: 1.5px solid rgba(242, 210, 139, 0.55);
  border-bottom: 3px solid #7d5b28;
  background: linear-gradient(135deg, #3b2b15 0%, #22180b 100%);
  color: #fef3c7 !important;
  font: 700 0.88rem/1.2 var(--font-body);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
html[data-theme=light] .pixel-workshop #panel-content #studio-refresh-all {
  background: linear-gradient(180deg, #fff5d9 0%, #edd196 100%);
  border-color: #9e722e;
  border-bottom-color: #74511c;
  color: #2f1f06 !important;
}
.pixel-workshop #panel-content #studio-refresh-all:is(:hover, :focus-visible) {
  transform: translateY(-2px);
  border-color: #fde68a;
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.34);
}
html[data-theme=light] .pixel-workshop #panel-content #studio-refresh-all:is(:hover, :focus-visible) {
  color: #1c1203 !important;
}

/* 2. Shared Dark Inset Controls (.status-select, .date-input, .done-btn) Across All Studio Tabs */
.pixel-workshop .studio-shell .done-btn {
  min-height: 38px;
  padding: 0.38rem 0.85rem;
  border-radius: 8px;
  border: 1.5px solid #34d399;
  border-bottom: 3px solid #059669;
  background: linear-gradient(135deg, #114232 0%, #09261d 100%);
  color: #ecfdf5 !important;
  font: 700 0.84rem/1.2 var(--font-body);
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
html[data-theme=light] .pixel-workshop .studio-shell .done-btn {
  background: linear-gradient(180deg, #d1fae5 0%, #a7f3d0 100%);
  border-color: #047857;
  border-bottom-color: #065f46;
  color: #064e3b !important;
}
.pixel-workshop .studio-shell .done-btn:is(:hover, :focus-visible) {
  transform: translateY(-1.5px);
  box-shadow: 0 5px 14px rgba(16, 185, 129, 0.32);
}
.pixel-workshop .studio-shell :is(.status-select, .date-input) {
  min-height: 36px !important;
  padding: 0.32rem 0.62rem !important;
  border-radius: 8px !important;
  border: 1.5px solid color-mix(in srgb, var(--pw-edge) 85%, #38bdf8) !important;
  border-bottom: 2px solid #091020 !important;
  background: linear-gradient(180deg, #101b33 0%, #0b1325 100%) !important;
  color: var(--pw-ink) !important;
  font: 600 0.82rem/1.25 var(--font-body) !important;
  color-scheme: dark !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.42) !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
}
.pixel-workshop .studio-shell :is(.status-select, .date-input) option {
  background: #0d1528;
  color: #f8fafc;
}
html[data-theme=light] .pixel-workshop .studio-shell :is(.status-select, .date-input) {
  background: #fffcf5 !important;
  color: #1f2937 !important;
  border-color: #9ca3af !important;
  border-bottom-color: #6b7280 !important;
  color-scheme: light !important;
  box-shadow: none !important;
}
html[data-theme=light] .pixel-workshop .studio-shell :is(.status-select, .date-input) option {
  background: #ffffff;
  color: #111827;
}
.pixel-workshop .studio-shell :is(.status-select, .date-input):is(:hover, :focus-visible) {
  border-color: var(--pw-gold) !important;
  box-shadow: 0 0 0 2px rgba(242, 210, 139, 0.22) !important;
}

/* 3. Tab 2 (#panel-content — 🎬 คอนเทนต์ & ดีล): Connected Jump Shelf & Horizontal Workshop Stations */
.pixel-workshop #panel-content #daily-intelligence .intelligence-heading {
  padding: 0.95rem 1.25rem !important;
  margin-bottom: 0 !important;
  border-radius: 12px 12px 0 0;
  border: 1.5px solid var(--pw-edge);
  border-top: 3px solid var(--pw-gold);
  border-bottom: 1px solid var(--oa-line);
  background: linear-gradient(90deg, var(--pw-panel), color-mix(in srgb, var(--pw-inset) 92%, transparent)) !important;
}
.pixel-workshop #panel-content .desk-jumps {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.55rem !important;
  padding: 0.55rem 1.15rem !important;
  margin-bottom: 1.65rem !important;
  border-radius: 0 0 12px 12px;
  border: 1.5px solid var(--pw-edge) !important;
  border-top: 0 !important;
  border-bottom: 4px solid #8a6338 !important;
  background: var(--pw-inset) !important;
}
.pixel-workshop #panel-content .desk-jumps a {
  display: inline-flex;
  align-items: center;
  min-height: 38px !important;
  padding: 0.38rem 0.9rem !important;
  border-radius: 8px !important;
  border: 1.5px solid color-mix(in srgb, var(--pw-edge) 72%, transparent) !important;
  border-bottom: 3px solid color-mix(in srgb, var(--pw-edge) 55%, #060d1b) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pw-panel) 94%, #253659), var(--pw-inset)) !important;
  color: var(--pw-ink) !important;
  font: 700 0.86rem/1.2 var(--font-body) !important;
  text-decoration: none !important;
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease !important;
}
.pixel-workshop #panel-content .desk-jumps a:is(:hover, :focus-visible) {
  transform: translateY(-2px);
  border-color: var(--pw-gold) !important;
  color: var(--pw-gold) !important;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.28);
}

/* Folder-Tabbed Station Boards in Tab 2 (#panel-content) */
.pixel-workshop #panel-content :is(#weekly-routine, #weekly-board, #content-assist, #affiliate-tools, #cta-bank, #idea-dump) {
  position: relative;
  margin-top: 2rem !important;
  padding: 1.35rem 1.45rem !important;
  border-radius: 0 14px 14px 14px !important;
  border: 2px solid #c89853 !important;
  border-bottom: 6px solid #806047 !important;
  background: var(--oa-bg) !important;
  box-shadow: inset 0 0 0 3px var(--pw-panel), 0 8px 0 rgba(8, 15, 29, 0.42) !important;
}
.pixel-workshop #panel-content #affiliate-tools::before,
.pixel-workshop #panel-content #cta-bank::before {
  display: flex !important;
  align-items: center;
  position: absolute;
  top: -24px;
  left: -2px;
  height: 24px;
  padding: 0 0.95rem;
  font: 700 0.78rem/1 var(--font-body);
  color: #241c10;
  border: 2px solid #c89853;
  border-bottom: 0;
  border-radius: 9px 14px 0 0;
  background: linear-gradient(180deg, #f3d58d, #b88444);
}
.pixel-workshop #panel-content #affiliate-tools::before {
  content: '🤝 เครื่องมือ Affiliate';
}
.pixel-workshop #panel-content #cta-bank::before {
  content: '🎯 คลัง CTA ปิดคลิป';
}

/* Side-by-Side Deals (#deals) & Active Production (#content-production) Cards */
.pixel-workshop #panel-content .command-surface {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr) !important;
  gap: 1.25rem !important;
  margin: 1.85rem 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.pixel-workshop #panel-content :is(#deals, #content-production) {
  position: relative;
  padding: 1.3rem 1.35rem !important;
  border-radius: 14px !important;
  border: 1.5px solid var(--pw-edge) !important;
  border-top: 3px solid var(--pw-gold) !important;
  border-bottom: 5px solid #8a6338 !important;
  background: var(--oa-bg) !important;
  box-shadow: 0 8px 22px rgba(6, 12, 24, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
.pixel-workshop #panel-content .deal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.55rem 0 0.9rem;
}
.pixel-workshop #panel-content .deal-tab {
  min-height: 36px;
  padding: 0.35rem 0.85rem;
  border-radius: 8px;
  border: 1.5px solid color-mix(in srgb, var(--pw-edge) 75%, transparent);
  border-bottom: 3px solid #091020;
  background: linear-gradient(135deg, #13223b 0%, #0b1526 100%);
  color: var(--pw-ink) !important;
  font: 700 0.8rem/1.2 var(--font-body);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
html[data-theme=light] .pixel-workshop #panel-content .deal-tab {
  background: linear-gradient(180deg, #fffdf8 0%, #efe4cc 100%);
  border-color: #b48a4e;
  border-bottom-color: #8a6338;
  color: #2c2010 !important;
}
.pixel-workshop #panel-content .deal-tab:is(:hover, :focus-visible) {
  transform: translateY(-1.5px);
  border-color: var(--pw-gold);
}
.pixel-workshop #panel-content .deal-tab[aria-selected="true"] {
  background: linear-gradient(135deg, #684812 0%, #3b2708 100%) !important;
  border-color: #fde68a !important;
  border-bottom-color: #97703b !important;
  color: #fffbeb !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.32), 0 4px 10px rgba(0, 0, 0, 0.35);
}
html[data-theme=light] .pixel-workshop #panel-content .deal-tab[aria-selected="true"] {
  background: linear-gradient(180deg, #fff2c6 0%, #e4be6e 100%) !important;
  border-color: #8a5a12 !important;
  color: #241602 !important;
}
.pixel-workshop #panel-content .deal-card {
  margin-bottom: 0.55rem;
  padding: 0.15rem 0.85rem !important;
  border: 1px solid color-mix(in srgb, var(--pw-edge) 55%, transparent) !important;
  border-left: 4px solid var(--pw-gold) !important;
  border-radius: 10px !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pw-inset) 82%, transparent) 0%, transparent 98%) !important;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.pixel-workshop #panel-content .deal-card.level-overdue { border-left-color: #f43f5e !important; }
.pixel-workshop #panel-content .deal-card.level-urgent { border-left-color: #f59e0b !important; }
.pixel-workshop #panel-content .deal-card.level-near { border-left-color: #eab308 !important; }
.pixel-workshop #panel-content .deal-card.level-later { border-left-color: #10b981 !important; }
.pixel-workshop #panel-content .deal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
}

/* 2-Column Horizontal Grid for #content-assist ol.studio-steps (Halves vertical height!) */
.pixel-workshop #panel-content #content-assist .studio-steps {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem 1.15rem !important;
  list-style: none;
  padding: 0 !important;
  margin: 0.85rem 0 0 !important;
}
.pixel-workshop #panel-content #content-assist .studio-steps > li {
  display: grid !important;
  grid-template-columns: 2.3rem minmax(0, 1fr) auto !important;
  align-items: center;
  gap: 0.75rem !important;
  padding: 0.75rem 0.9rem !important;
  border: 1px solid color-mix(in srgb, var(--pw-edge) 58%, transparent) !important;
  border-left: 4px solid var(--pw-gold) !important;
  border-bottom: 3px solid #8a6338 !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--pw-inset) 86%, var(--pw-panel)) !important;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.pixel-workshop #panel-content #content-assist .studio-steps > li:hover {
  transform: translateY(-2.5px);
  border-color: var(--pw-gold) !important;
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.34);
}
.pixel-workshop #panel-content #content-assist .step-no {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 8px;
  background: linear-gradient(135deg, #3b2b15 0%, #22180b 100%);
  border: 1.5px solid rgba(242, 210, 139, 0.65);
  color: #fef3c7 !important;
  font: 800 0.86rem/1 var(--font-head);
}
html[data-theme=light] .pixel-workshop #panel-content #content-assist .step-no {
  background: #fff3d1;
  border-color: #9e722e;
  color: #3b2708 !important;
}
.pixel-workshop #panel-content :is(.studio-copy, .cta-add-btn, .idea-save) {
  min-height: 38px;
  padding: 0.4rem 0.88rem;
  border-radius: 9px;
  border: 1.5px solid rgba(242, 210, 139, 0.62);
  border-bottom: 3px solid #7d5b28;
  background: linear-gradient(135deg, #4b3516 0%, #2b1d0a 100%) !important;
  color: #fef3c7 !important;
  font: 700 0.82rem/1.2 var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
html[data-theme=light] .pixel-workshop #panel-content :is(.studio-copy, .cta-add-btn, .idea-save) {
  background: linear-gradient(180deg, #fff5d9 0%, #edd196 100%) !important;
  border-color: #9e722e;
  border-bottom-color: #74511c;
  color: #2f1f06 !important;
}
.pixel-workshop #panel-content :is(.studio-copy, .cta-add-btn, .idea-save):is(:hover, :focus-visible) {
  transform: translateY(-2px);
  border-color: #fde68a;
  color: #ffffff !important;
  box-shadow: 0 5px 14px rgba(245, 158, 11, 0.3);
}
html[data-theme=light] .pixel-workshop #panel-content :is(.studio-copy, .cta-add-btn, .idea-save):is(:hover, :focus-visible) {
  color: #1c1203 !important;
}
.pixel-workshop #panel-content :is(#idea-input, #idea-lane) {
  min-height: 42px !important;
  padding: 0.48rem 0.8rem !important;
  border-radius: 9px !important;
  border: 1.5px solid color-mix(in srgb, var(--pw-edge) 85%, #38bdf8) !important;
  border-bottom: 3px solid #091020 !important;
  background: linear-gradient(180deg, #101b33 0%, #0b1325 100%) !important;
  color: var(--pw-ink) !important;
  color-scheme: dark !important;
}
html[data-theme=light] .pixel-workshop #panel-content :is(#idea-input, #idea-lane) {
  background: #fffcf5 !important;
  color: #1f2937 !important;
  border-color: #9ca3af !important;
  border-bottom-color: #6b7280 !important;
  color-scheme: light !important;
}

/* ==========================================================================
   4. Tab 3 (#panel-workflows — 🛠️ วิธีทำงาน & สกิล): Unboxed 4-Tab Bar,
   Tactile Station Readout Monitor, Folder-Tabbed Pre-Flight Tray (.sp-inputs),
   & 2x2 Crafted Workshop Inspection Drawers (.sw-fold)
   ========================================================================== */
.pixel-workshop #panel-workflows > .sw-opening {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 0 0.55rem !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.pixel-workshop #panel-workflows .sw-opening-meta {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.65rem;
  max-width: none !important;
  padding: 0.28rem 0.85rem !important;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pw-gold) 45%, var(--pw-edge));
  background: color-mix(in srgb, var(--pw-panel) 90%, var(--pw-inset)) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.26);
}
.pixel-workshop #panel-workflows .sw-store-status {
  min-height: 0 !important;
  margin: 0 !important;
  font: 600 0.82rem/1.3 var(--font-body) !important;
  color: var(--pw-gold) !important;
}
.pixel-workshop #panel-workflows .sw-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.65rem !important;
  padding: 0 !important;
  margin: 0 0 1.25rem !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.pixel-workshop #panel-workflows .sw-tabs button {
  min-height: 46px !important;
  padding: 0.58rem 0.95rem !important;
  border-radius: 10px !important;
  border: 1.5px solid color-mix(in srgb, var(--pw-edge) 76%, transparent) !important;
  border-bottom: 4px solid #091020 !important;
  background: linear-gradient(135deg, #13223b 0%, #0b1526 100%) !important;
  color: var(--pw-ink) !important;
  font: 700 0.92rem/1.25 var(--font-body) !important;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}
html[data-theme=light] .pixel-workshop #panel-workflows .sw-tabs button {
  background: linear-gradient(180deg, #fffdf8 0%, #efe4cc 100%) !important;
  border-color: #b48a4e !important;
  border-bottom-color: #8a6338 !important;
  color: #2c2010 !important;
}
.pixel-workshop #panel-workflows .sw-tabs button:is(:hover, :focus-visible) {
  transform: translateY(-2px);
  border-color: var(--pw-gold) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.36) !important;
}
.pixel-workshop #panel-workflows .sw-tabs button[aria-selected="true"] {
  background: linear-gradient(135deg, #684812 0%, #3b2708 100%) !important;
  border-color: #fde68a !important;
  border-bottom-color: #97703b !important;
  color: #fffbeb !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.38), 0 6px 14px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}
html[data-theme=light] .pixel-workshop #panel-workflows .sw-tabs button[aria-selected="true"] {
  background: linear-gradient(180deg, #fff2c6 0%, #e4be6e 100%) !important;
  border-color: #8a5a12 !important;
  color: #241602 !important;
}

/* Search Input & Segment Filter Pills in Tab 3 */
.pixel-workshop #panel-workflows .sw-search {
  border: 1.5px solid color-mix(in srgb, var(--pw-edge) 85%, #38bdf8) !important;
  border-bottom: 3px solid #091020 !important;
  border-radius: 10px !important;
  padding: 0.15rem 0.75rem !important;
  background: linear-gradient(180deg, #101b33 0%, #0b1325 100%) !important;
}
html[data-theme=light] .pixel-workshop #panel-workflows .sw-search {
  background: #fffcf5 !important;
  border-color: #9ca3af !important;
  border-bottom-color: #6b7280 !important;
}
.pixel-workshop #panel-workflows .sw-segments {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.45rem !important;
  border: 0 !important;
  margin-bottom: 1.15rem !important;
}
.pixel-workshop #panel-workflows .sw-segments button {
  min-height: 38px !important;
  padding: 0.4rem 0.85rem !important;
  border-radius: 8px !important;
  border: 1.5px solid color-mix(in srgb, var(--pw-edge) 72%, transparent) !important;
  border-bottom: 3px solid #091020 !important;
  background: linear-gradient(135deg, #13223b 0%, #0b1526 100%) !important;
  color: var(--pw-ink) !important;
  font: 700 0.84rem/1.2 var(--font-body) !important;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease !important;
}
html[data-theme=light] .pixel-workshop #panel-workflows .sw-segments button {
  background: linear-gradient(180deg, #fffdf8 0%, #efe4cc 100%) !important;
  border-color: #b48a4e !important;
  border-bottom-color: #8a6338 !important;
  color: #2c2010 !important;
}
.pixel-workshop #panel-workflows .sw-segments button[aria-pressed="true"] {
  background: linear-gradient(135deg, #684812 0%, #3b2708 100%) !important;
  border-color: #fde68a !important;
  border-bottom-color: #97703b !important;
  color: #fffbeb !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.32);
}
html[data-theme=light] .pixel-workshop #panel-workflows .sw-segments button[aria-pressed="true"] {
  background: linear-gradient(180deg, #fff2c6 0%, #e4be6e 100%) !important;
  border-color: #8a5a12 !important;
  color: #241602 !important;
}

/* Workflow Detail Header, Copy Brief Note & Mascot Speech Bubbles (Zero Box-in-Box) */
.pixel-workshop #panel-workflows .sw-detail-head {
  padding: 0.65rem 1.1rem !important;
  border-radius: 0 12px 12px 0 !important;
  border: 0 !important;
  border-left: 4px solid var(--pw-gold) !important;
  border-bottom: 1px solid var(--oa-hair) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pw-inset) 88%, transparent) 0%, transparent 98%) !important;
  box-shadow: none !important;
}
.pixel-workshop #panel-workflows .sw-detail-head .sw-category {
  display: inline-block !important;
  padding: 0 !important;
  margin-bottom: 0.18rem !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--pw-gold) !important;
  font: 700 0.82rem/1.3 var(--font-body) !important;
}
html[data-theme=light] .pixel-workshop #panel-workflows .sw-detail-head .sw-category {
  color: #78350f !important;
}
.pixel-workshop #panel-workflows .sw-copy-note {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0 1.15rem !important;
  padding: 0.15rem 0.65rem !important;
  border: 0 !important;
  border-left: 3px solid var(--pw-gold) !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--pw-inset) 72%, transparent) !important;
  color: var(--pw-soft) !important;
  font: 600 0.84rem/1.3 var(--font-body) !important;
}
.pixel-workshop #panel-workflows .sp-zone-head {
  padding: 0.45rem 0.75rem !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-left: 4px solid var(--pw-mint) !important;
  border-bottom: 1px solid var(--oa-hair) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pw-panel) 88%, transparent) 0%, transparent 96%) !important;
}
.pixel-workshop #panel-workflows .sp-cast figcaption {
  z-index: 6;
  border: 1.5px solid #c89853 !important;
  border-bottom: 3px solid #806047 !important;
  border-radius: 10px 10px 10px 2px !important;
  background: linear-gradient(160deg, color-mix(in srgb, var(--pw-panel) 96%, #3b2b15), var(--pw-inset)) !important;
  color: var(--pw-gold) !important;
  font: 700 0.84rem/1.3 var(--font-body) !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.38);
}
.pixel-workshop #panel-workflows .sp-cast figure + figure figcaption {
  border-radius: 10px 10px 2px 10px !important;
}
.pixel-workshop #panel-workflows .sp-cast figcaption span {
  margin-top: 0.1rem;
  font: 500 0.78rem/1.3 var(--font-body) !important;
  color: var(--pw-ink) !important;
}

/* Tactile Buttons (.sw-btn) in Tab 3 */
.pixel-workshop #panel-workflows .sw-btn {
  min-height: 42px !important;
  padding: 0.5rem 1rem !important;
  border-radius: 10px !important;
  border: 1.5px solid rgba(56, 189, 248, 0.58) !important;
  border-bottom: 3px solid #0c4a6e !important;
  background: linear-gradient(135deg, #12355b 0%, #0b2038 100%) !important;
  color: #e0f2fe !important;
  font: 700 0.86rem/1.25 var(--font-body) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}
html[data-theme=light] .pixel-workshop #panel-workflows .sw-btn {
  background: linear-gradient(180deg, #e6f4fe 0%, #cce6fa 100%) !important;
  border-color: #2b6cb0 !important;
  border-bottom-color: #1e4e8c !important;
  color: #0d335d !important;
}
.pixel-workshop #panel-workflows .sw-btn.is-primary {
  background: linear-gradient(135deg, #684812 0%, #3b2708 100%) !important;
  border-color: #fde68a !important;
  border-bottom-color: #97703b !important;
  color: #fffbeb !important;
}
html[data-theme=light] .pixel-workshop #panel-workflows .sw-btn.is-primary {
  background: linear-gradient(180deg, #fff5d9 0%, #edd196 100%) !important;
  border-color: #9e722e !important;
  border-bottom-color: #74511c !important;
  color: #2f1f06 !important;
}
.pixel-workshop #panel-workflows .sw-btn:is(:hover, :focus-visible) {
  transform: translateY(-2px);
  border-color: var(--pw-gold) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.36) !important;
}

/* Active Station Cue Monitor (.sp-step-readout) & Deliverable Slots (.sp-delivery) — Zero Box-in-Box */
.pixel-workshop #panel-workflows .sp-step-readout {
  position: relative;
  display: grid !important;
  grid-template-columns: 2.6rem minmax(0, 1fr) !important;
  align-items: start;
  gap: 0.95rem !important;
  margin-top: 0.95rem !important;
  padding: 1.1rem 1.3rem !important;
  border-radius: 12px !important;
  border: 1.5px solid color-mix(in srgb, var(--pw-gold) 58%, var(--pw-edge)) !important;
  border-left: 5px solid var(--pw-mint) !important;
  border-bottom: 5px solid #8a6338 !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pw-panel) 92%, #1d3538), var(--pw-inset)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 20px rgba(6, 12, 24, 0.38) !important;
}
.pixel-workshop #panel-workflows .sp-read-number {
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 50% !important;
  border: 2px solid #d8fff0 !important;
  background: var(--pw-mint) !important;
  color: #0b241f !important;
  font: 800 1.28rem/1 var(--font-head) !important;
}
.pixel-workshop #panel-workflows .sp-readout-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  flex-wrap: wrap;
  padding-bottom: 0.38rem;
  margin-bottom: 0.38rem;
  border-bottom: 1px dashed var(--oa-line);
}
.pixel-workshop #panel-workflows .sp-reading-label {
  font: 700 0.82rem/1.3 var(--font-body) !important;
  color: var(--pw-gold) !important;
  letter-spacing: 0.01em;
}
.pixel-workshop #panel-workflows .sp-readout-top .sw-owner {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--pw-mint) !important;
  font: 800 0.84rem/1.2 var(--font-head) !important;
}
.pixel-workshop #panel-workflows .sp-readout-top .sw-owner.is-audi {
  color: var(--pw-gold) !important;
}
.pixel-workshop #panel-workflows .sp-step-readout h4 {
  margin: 0 0 0.32rem !important;
  font: 700 1.26rem/1.35 var(--font-head) !important;
  color: var(--pw-ink) !important;
}
.pixel-workshop #panel-workflows .sp-step-readout p {
  margin: 0 !important;
  font-size: 0.96rem !important;
  line-height: 1.65 !important;
  color: var(--pw-soft) !important;
}
.pixel-workshop #panel-workflows .sp-step-readout .sw-skill-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--oa-line);
}
.pixel-workshop #panel-workflows .sp-skill-kicker {
  font: 600 0.8rem/1.2 var(--font-body);
  color: var(--pw-soft);
}
.pixel-workshop #panel-workflows .sp-skill-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.16rem 0.6rem;
  border-radius: 0 6px 6px 0;
  border: 0;
  border-left: 2.5px solid #a855f7;
  background: rgba(168, 85, 247, 0.14);
  color: #e9d5ff !important;
  font: 700 0.82rem/1.25 var(--font-head);
}
html[data-theme=light] .pixel-workshop #panel-workflows .sp-skill-chip {
  background: #f3e8ff;
  border-left-color: #7e22ce;
  color: #3b0764 !important;
}

/* Deliverable Folder Card (.sp-delivery) Output Slots */
.pixel-workshop #panel-workflows .sp-delivery .sw-output-list {
  gap: 0.55rem !important;
}
.pixel-workshop #panel-workflows .sp-delivery .sw-output-list li {
  display: grid !important;
  grid-template-columns: 1.6rem minmax(0, 1fr) !important;
  align-items: start;
  gap: 0.55rem !important;
  padding: 0.52rem 0.65rem !important;
  border-radius: 0 8px 8px 0 !important;
  border: 0 !important;
  border-left: 3px solid var(--pw-gold) !important;
  border-bottom: 1px solid var(--oa-line) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pw-inset) 74%, transparent) 0%, transparent 98%) !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
}
.pixel-workshop #panel-workflows .sp-delivery .sw-output-list li:nth-child(2) {
  border-left-color: var(--pw-mint) !important;
}
.pixel-workshop #panel-workflows .sp-delivery .sw-output-list li:nth-child(3) {
  border-left-color: #38bdf8 !important;
}

/* Folder-Tabbed Pre-Flight Checklist Tray (.sp-inputs — เตรียมก่อนเริ่ม · Zero Box-in-Box) */
.pixel-workshop #panel-workflows .sp-inputs {
  position: relative;
  margin-top: 1.85rem !important;
  padding: 1.15rem 1.35rem 1.1rem !important;
  border-radius: 0 14px 14px 14px !important;
  border: 2px solid #c89853 !important;
  border-bottom: 5px solid #806047 !important;
  background: var(--oa-bg) !important;
  box-shadow: inset 0 0 0 3px var(--pw-panel), 0 6px 0 rgba(8, 15, 29, 0.38) !important;
}
.pixel-workshop #panel-workflows .sp-inputs::before {
  content: '📋 เช็กลิสต์ก่อนเริ่มงาน';
  display: flex !important;
  align-items: center;
  position: absolute;
  top: -24px;
  left: -2px;
  height: 24px;
  padding: 0 0.95rem;
  font: 700 0.78rem/1 var(--font-body);
  color: #241c10;
  border: 2px solid #c89853;
  border-bottom: 0;
  border-radius: 9px 14px 0 0;
  background: linear-gradient(180deg, #f3d58d, #b88444);
}
.pixel-workshop #panel-workflows .sp-inputs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-bottom: 0.6rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--oa-hair);
}
.pixel-workshop #panel-workflows .sp-inputs-head > h3 {
  margin: 0 !important;
  font: 700 1.15rem/1.3 var(--font-head) !important;
  color: var(--pw-ink) !important;
}
.pixel-workshop #panel-workflows .sp-inputs-sub {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--pw-mint);
  font: 700 0.82rem/1.25 var(--font-body);
}
html[data-theme=light] .pixel-workshop #panel-workflows .sp-inputs-sub {
  color: #064e3b;
}
.pixel-workshop #panel-workflows .sp-inputs .sw-inputs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.65rem 1.05rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.pixel-workshop #panel-workflows .sp-inputs .sw-inputs > li {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem !important;
  border-radius: 0 8px 8px 0 !important;
  border: 0 !important;
  border-left: 3px solid var(--pw-mint) !important;
  border-bottom: 1px solid var(--oa-line) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pw-inset) 74%, transparent) 0%, transparent 96%) !important;
  color: var(--pw-ink) !important;
  font: 600 0.88rem/1.45 var(--font-body);
  box-shadow: none !important;
  transition: transform 150ms ease, border-color 150ms ease;
}
.pixel-workshop #panel-workflows .sp-inputs .sw-inputs > li:hover {
  transform: translateX(3px);
  border-left-color: var(--pw-gold) !important;
}
.pixel-workshop #panel-workflows .sp-inputs .sw-inputs > li::before {
  display: none !important;
  content: none !important;
}
.pixel-workshop #panel-workflows .sp-input-num {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--pw-mint);
  font: 800 0.96rem/1 var(--font-head);
}
html[data-theme=light] .pixel-workshop #panel-workflows .sp-input-num {
  color: #047857;
}

/* ==========================================================================
   2x2 Crafted Workshop Inspection Drawers (.sp-support-folds .sw-fold:
   🛡️ ด่านตรวจคุณภาพ, 🎞️ ดูรูปแบบตัวอย่าง, 🎯 ตัวอย่างที่ใช้ในบรีฟ, 🧰 สกิลและต้นทาง)
   Zero Box-in-Box & Zero Double-Pill Clutter!
   ========================================================================== */
.pixel-workshop #panel-workflows .sp-support-folds {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.95rem 1.15rem !important;
  margin-top: 1.35rem !important;
  align-items: start;
}
.pixel-workshop #panel-workflows .sw-fold {
  position: relative;
  margin: 0 !important;
  padding: 0.45rem 1.15rem !important;
  border-radius: 12px !important;
  border: 1.5px solid color-mix(in srgb, var(--pw-edge) 78%, transparent) !important;
  border-left: 5px solid var(--pw-gold) !important;
  border-bottom: 4px solid #8a6338 !important;
  background: linear-gradient(155deg, color-mix(in srgb, var(--pw-panel) 94%, #253352), var(--pw-inset)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 16px rgba(6, 12, 24, 0.34) !important;
  transition: transform 170ms cubic-bezier(0.16, 1, 0.3, 1), border-color 170ms ease, box-shadow 170ms ease !important;
}
.pixel-workshop #panel-workflows .sw-fold.is-fold-checks,
.pixel-workshop #panel-workflows .sp-support-folds > .sw-fold:nth-child(1) {
  border-left-color: #10b981 !important;
}
.pixel-workshop #panel-workflows .sw-fold.is-fold-sample,
.pixel-workshop #panel-workflows .sp-support-folds > .sw-fold:nth-child(2) {
  border-left-color: #38bdf8 !important;
}
.pixel-workshop #panel-workflows .sw-fold.is-fold-refs,
.pixel-workshop #panel-workflows .sp-support-folds > .sw-fold:nth-child(3) {
  border-left-color: #f59e0b !important;
}
.pixel-workshop #panel-workflows .sw-fold.is-fold-skills,
.pixel-workshop #panel-workflows .sp-support-folds > .sw-fold:nth-child(4) {
  border-left-color: #a855f7 !important;
}
.pixel-workshop #panel-workflows .sp-support-folds > .sw-fold[open] {
  grid-column: 1 / -1 !important;
  padding: 0.55rem 1.3rem 1.2rem !important;
  border-color: color-mix(in srgb, var(--pw-gold) 65%, var(--pw-edge)) !important;
}
.pixel-workshop #panel-workflows .sw-fold:hover {
  transform: translateY(-2.5px);
  border-color: var(--pw-gold) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.42) !important;
}
.pixel-workshop #panel-workflows .sw-fold > summary {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 48px !important;
  padding: 0.25rem 0 !important;
  font: 700 0.98rem/1.35 var(--font-head) !important;
  color: var(--pw-ink) !important;
  list-style: none;
}
.pixel-workshop #panel-workflows .sw-fold[open] > summary {
  padding-bottom: 0.7rem !important;
  margin-bottom: 0.85rem !important;
  border-bottom: 1px solid var(--oa-hair);
}
.pixel-workshop #panel-workflows .sw-fold-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: 700 1.02rem/1.3 var(--font-head);
  color: var(--pw-ink);
}
/* Unboxed metadata label on <summary> (Zero Double-Pill Clutter!) */
.pixel-workshop #panel-workflows .sw-fold-meta {
  margin-left: auto;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--pw-soft);
  font: 600 0.8rem/1.2 var(--font-body);
  white-space: nowrap;
}
.pixel-workshop #panel-workflows .sw-fold.is-fold-checks .sw-fold-meta { color: var(--pw-mint); }
.pixel-workshop #panel-workflows .sw-fold.is-fold-sample .sw-fold-meta { color: #7dd3fc; }
.pixel-workshop #panel-workflows .sw-fold.is-fold-refs .sw-fold-meta { color: var(--pw-gold); }
.pixel-workshop #panel-workflows .sw-fold.is-fold-skills .sw-fold-meta { color: #d8b4fe; }
html[data-theme=light] .pixel-workshop #panel-workflows .sw-fold.is-fold-checks .sw-fold-meta { color: #047857; }
html[data-theme=light] .pixel-workshop #panel-workflows .sw-fold.is-fold-sample .sw-fold-meta { color: #0369a1; }
html[data-theme=light] .pixel-workshop #panel-workflows .sw-fold.is-fold-refs .sw-fold-meta { color: #b45309; }
html[data-theme=light] .pixel-workshop #panel-workflows .sw-fold.is-fold-skills .sw-fold-meta { color: #6b21a8; }

.pixel-workshop #panel-workflows .sw-fold > summary::after {
  display: inline-flex;
  align-items: center;
  margin-left: 0.55rem !important;
  padding: 0 0 0 0.65rem !important;
  border: 0 !important;
  border-left: 1px solid var(--oa-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pw-gold) !important;
  font: 700 0.82rem/1.2 var(--font-body);
}

/* Drawer 1 Inner Content: Frameless 2-Column QA Check Rows (.sw-check-list — Zero Box-in-Box) */
.pixel-workshop #panel-workflows .sw-check-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.6rem 1.1rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.pixel-workshop #panel-workflows .sw-check-list > li {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0 8px 8px 0;
  border: 0;
  border-left: 3px solid #10b981;
  border-bottom: 1px solid var(--oa-line);
  background: linear-gradient(90deg, color-mix(in srgb, var(--pw-inset) 74%, transparent) 0%, transparent 96%);
  color: var(--pw-ink) !important;
  font: 500 0.9rem/1.5 var(--font-body);
}
.pixel-workshop #panel-workflows .sw-check-badge {
  flex: none;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--pw-mint);
  font: 800 0.8rem/1.2 var(--font-head);
  white-space: nowrap;
}
html[data-theme=light] .pixel-workshop #panel-workflows .sw-check-badge {
  color: #047857;
}

/* Drawer 2 Inner Content: Unboxed Studio Blueprint Cue Sheet (.sw-illustration — Zero Box-in-Box) */
.pixel-workshop #panel-workflows .sw-illustration {
  margin: 0 !important;
  padding: 0.15rem 0 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.pixel-workshop #panel-workflows .sw-illus-head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-bottom: 0.55rem;
  margin-bottom: 0.65rem;
  border-bottom: 1px dashed var(--oa-line);
}
.pixel-workshop #panel-workflows .sw-example-state {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--pw-gold) !important;
  font: 700 0.8rem/1.3 var(--font-body) !important;
}
.pixel-workshop #panel-workflows .sw-example-state.is-approved {
  color: var(--pw-mint) !important;
}
html[data-theme=light] .pixel-workshop #panel-workflows .sw-example-state {
  color: #b45309 !important;
}
html[data-theme=light] .pixel-workshop #panel-workflows .sw-example-state.is-approved {
  color: #047857 !important;
}
.pixel-workshop #panel-workflows .sw-illustration h4 {
  margin: 0 !important;
  font: 700 1.15rem/1.35 var(--font-head) !important;
  color: var(--pw-ink) !important;
}
.pixel-workshop #panel-workflows .sw-illustration .sw-example-body {
  max-width: none !important;
  margin: 0 0 0.7rem !important;
  padding: 0.75rem 1rem;
  border-radius: 0 8px 8px 0;
  border: 0;
  border-left: 3.5px solid #38bdf8;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pw-inset) 82%, transparent) 0%, transparent 98%);
  color: var(--pw-ink) !important;
  font: 500 0.92rem/1.75 var(--font-body) !important;
}
html[data-theme=light] .pixel-workshop #panel-workflows .sw-illustration .sw-example-body {
  border-left-color: #0284c7;
}
.pixel-workshop #panel-workflows .sw-illustration figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  font: 600 0.82rem/1.4 var(--font-body) !important;
  color: var(--pw-soft) !important;
}
.pixel-workshop #panel-workflows .sw-illus-link {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pw-gold) !important;
  font: 700 0.84rem/1.2 var(--font-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Drawer 3 Inner Content: Unboxed Left-Bar Vault Slot (.sw-fold-vault-note — Bare Emoji & Zero Box-in-Box) */
.pixel-workshop #panel-workflows .sw-fold-vault-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-radius: 0 8px 8px 0;
  border: 0;
  border-left: 3.5px solid #f59e0b;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pw-inset) 78%, transparent) 0%, transparent 96%);
}
.pixel-workshop #panel-workflows .sw-vault-ico {
  flex: none;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 1.25rem;
  line-height: 1.2;
}
.pixel-workshop #panel-workflows .sw-fold-vault-note strong {
  display: block;
  font: 700 0.94rem/1.35 var(--font-head);
  color: var(--pw-gold);
}
.pixel-workshop #panel-workflows .sw-fold-vault-note p {
  margin: 0.18rem 0 0 !important;
  font: 500 0.86rem/1.5 var(--font-body) !important;
  color: var(--pw-soft) !important;
}
.pixel-workshop #panel-workflows .sw-choose-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1rem;
}
.pixel-workshop #panel-workflows .sw-choose {
  padding: 0.55rem 0.75rem !important;
  border-radius: 0 8px 8px 0;
  border: 0;
  border-left: 3px solid var(--pw-gold);
  border-bottom: 1px solid var(--oa-line);
  background: linear-gradient(90deg, color-mix(in srgb, var(--pw-inset) 74%, transparent) 0%, transparent 96%);
}

/* Drawer 4 Inner Content: Frameless 2-Column Toolbox & SOP Source Grid (.sw-toolbox-grid) */
.pixel-workshop #panel-workflows .sw-toolbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}
.pixel-workshop #panel-workflows .sw-toolbox-head {
  margin: 0 0 0.6rem !important;
  padding-bottom: 0.38rem;
  border-bottom: 1px dashed var(--oa-line);
  font: 700 0.9rem/1.3 var(--font-head) !important;
  color: var(--pw-gold) !important;
}
.pixel-workshop #panel-workflows .sw-skill-cards,
.pixel-workshop #panel-workflows .sw-source-cards {
  display: grid;
  gap: 0.55rem;
}
.pixel-workshop #panel-workflows .sw-skill-card {
  padding: 0.55rem 0.8rem;
  border-radius: 0 8px 8px 0;
  border: 0;
  border-left: 3px solid #a855f7;
  border-bottom: 1px solid var(--oa-line);
  background: linear-gradient(90deg, color-mix(in srgb, var(--pw-inset) 76%, transparent) 0%, transparent 96%);
}
.pixel-workshop #panel-workflows .sw-sc-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.2rem;
}
.pixel-workshop #panel-workflows .sw-sc-name {
  font: 700 0.92rem/1.3 var(--font-head);
  color: #e9d5ff;
}
html[data-theme=light] .pixel-workshop #panel-workflows .sw-sc-name {
  color: #581c87;
}
.pixel-workshop #panel-workflows .sw-sc-agent {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--pw-gold);
  font: 700 0.75rem/1.2 var(--font-head);
}
html[data-theme=light] .pixel-workshop #panel-workflows .sw-sc-agent {
  color: #78350f;
}
.pixel-workshop #panel-workflows .sw-sc-desc {
  margin: 0 !important;
  font: 500 0.85rem/1.48 var(--font-body) !important;
  color: var(--pw-soft) !important;
}
.pixel-workshop #panel-workflows .sw-source-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.55rem 0.8rem;
  border-radius: 0 8px 8px 0;
  border: 0;
  border-left: 3px solid var(--pw-gold);
  border-bottom: 1px solid var(--oa-line);
  background: linear-gradient(90deg, color-mix(in srgb, var(--pw-inset) 76%, transparent) 0%, transparent 96%);
}
.pixel-workshop #panel-workflows .sw-src-label {
  font: 700 0.88rem/1.3 var(--font-head);
  color: var(--pw-ink);
}
.pixel-workshop #panel-workflows .sw-source-path {
  display: block;
  font: 500 0.78rem/1.45 'JetBrains Mono', 'IBM Plex Mono', monospace !important;
  color: var(--pw-gold) !important;
  overflow-wrap: anywhere;
}

/* Sub-Tabs 2, 3 & 4 Library Boards (.sw-library) & Skill Table (.sw-skill-table) */
.pixel-workshop #panel-workflows .sw-library {
  position: relative;
  padding: 1.4rem 1.5rem !important;
  border-radius: 14px !important;
  border: 2px solid #c89853 !important;
  border-bottom: 6px solid #806047 !important;
  background: var(--oa-bg) !important;
  box-shadow: inset 0 0 0 3px var(--pw-panel), 0 8px 0 rgba(8, 15, 29, 0.42) !important;
}
.pixel-workshop #panel-workflows .sw-skill-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #e9d5ff !important;
  font: 700 0.94rem/1.3 var(--font-head);
}
html[data-theme=light] .pixel-workshop #panel-workflows .sw-skill-badge {
  color: #581c87 !important;
}
.pixel-workshop #panel-workflows .sw-skill-agent {
  margin-top: 0.2rem;
  font: 600 0.78rem/1.3 var(--font-body) !important;
  color: var(--pw-soft) !important;
}
.pixel-workshop #panel-workflows .sw-skill-links {
  gap: 0.45rem !important;
}
.pixel-workshop #panel-workflows .sw-skill-links button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 34px !important;
  padding: 0.28rem 0.72rem !important;
  border-radius: 8px !important;
  border: 1.5px solid rgba(56, 189, 248, 0.52) !important;
  border-bottom: 2px solid #0c4a6e !important;
  background: linear-gradient(135deg, #12355b 0%, #0b2038 100%) !important;
  color: #e0f2fe !important;
  font: 600 0.8rem/1.2 var(--font-body) !important;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
html[data-theme=light] .pixel-workshop #panel-workflows .sw-skill-links button {
  background: #e6f4fe !important;
  border-color: #2b6cb0 !important;
  border-bottom-color: #1e4e8c !important;
  color: #0d335d !important;
}
.pixel-workshop #panel-workflows .sw-skill-links button:is(:hover, :focus-visible) {
  transform: translateY(-2px);
  border-color: var(--pw-gold) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
}
html[data-theme=light] .pixel-workshop #panel-workflows .sw-skill-links button:is(:hover, :focus-visible) {
  color: #072241 !important;
}
.pixel-workshop #panel-workflows .sw-fold.is-fold-skills-meta {
  margin-top: 1.15rem !important;
}

/* ==========================================================================
   5. Tab 4 (#panel-revenue — ⏳ เข็มทิศ & เวลา) & #stream-modal:
   Folder-Tabbed Financial Bridge, 2-Column Revenue Streams Grid, & Workshop Modal
   ========================================================================== */
.pixel-workshop #panel-revenue .revenue-money-bridge,
.pixel-workshop #panel-revenue .revenue-orbit-stage {
  position: relative !important;
  min-height: 0 !important;
  margin: 1.85rem 0 0 !important;
  padding: 1.35rem 1.45rem !important;
  border-radius: 0 14px 14px 14px !important;
  border: 2px solid #c89853 !important;
  border-bottom: 6px solid #806047 !important;
  background: var(--oa-bg) !important;
  box-shadow: inset 0 0 0 3px var(--pw-panel), 0 8px 0 rgba(8, 15, 29, 0.42) !important;
  overflow: visible !important;
}
.pixel-workshop #panel-revenue .revenue-money-bridge::before,
.pixel-workshop #panel-revenue .revenue-orbit-stage::before {
  display: flex !important;
  align-items: center;
  position: absolute !important;
  inset: auto !important;
  top: -24px !important;
  left: -2px !important;
  width: auto !important;
  height: 24px !important;
  padding: 0 0.95rem;
  font: 700 0.78rem/1 var(--font-body);
  color: #241c10;
  border: 2px solid #c89853;
  border-bottom: 0;
  border-radius: 9px 14px 0 0;
  background: linear-gradient(180deg, #f3d58d, #b88444) !important;
  opacity: 1 !important;
}
.pixel-workshop #panel-revenue .revenue-money-bridge::before {
  content: '📊 สะพานเชื่อมการเงิน & พอร์ต' !important;
}
.pixel-workshop #panel-revenue .revenue-orbit-stage::before {
  content: '💎 ท่อรายได้ & เป้าหมาย' !important;
}

/* 3-Column Horizontal KPI Cards inside .bridge-metrics-grid */
.pixel-workshop #panel-revenue .bridge-metrics-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.95rem !important;
  margin-bottom: 1.15rem !important;
}
.pixel-workshop #panel-revenue .bridge-metric-card {
  padding: 0.95rem 1.1rem !important;
  border-radius: 12px !important;
  border: 1.5px solid color-mix(in srgb, var(--pw-edge) 75%, transparent) !important;
  border-left: 4px solid #10b981 !important;
  border-bottom: 4px solid #8a6338 !important;
  background: color-mix(in srgb, var(--pw-inset) 86%, var(--pw-panel)) !important;
  box-shadow: 0 5px 12px rgba(6, 12, 24, 0.3) !important;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.pixel-workshop #panel-revenue .bridge-metric-card:nth-child(2) {
  border-left-color: #38bdf8 !important;
}
.pixel-workshop #panel-revenue .bridge-metric-card:nth-child(3) {
  border-left-color: #a855f7 !important;
}
.pixel-workshop #panel-revenue .bridge-metric-card:hover {
  transform: translateY(-2.5px);
  border-color: var(--pw-gold) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.36) !important;
}

/* 4-Column Horizontal Route Button Shelf (.bridge-shortcuts) */
.pixel-workshop #panel-revenue .bridge-shortcuts {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  margin-top: 1rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid var(--oa-hair) !important;
}
.pixel-workshop #panel-revenue .bridge-route-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px !important;
  padding: 0.5rem 0.85rem !important;
  border-radius: 10px !important;
  border: 1.5px solid rgba(56, 189, 248, 0.58) !important;
  border-bottom: 3px solid #0c4a6e !important;
  background: linear-gradient(135deg, #12355b 0%, #0b2038 100%) !important;
  color: #e0f2fe !important;
  font: 700 0.84rem/1.25 var(--font-body) !important;
  text-align: center;
  text-decoration: none !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28) !important;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}
html[data-theme=light] .pixel-workshop #panel-revenue .bridge-route-btn {
  background: linear-gradient(180deg, #e6f4fe 0%, #cce6fa 100%) !important;
  border-color: #2b6cb0 !important;
  border-bottom-color: #1e4e8c !important;
  color: #0d335d !important;
}
.pixel-workshop #panel-revenue .bridge-route-btn:is(:hover, :focus-visible) {
  transform: translateY(-2px);
  border-color: var(--pw-gold) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.36) !important;
}
html[data-theme=light] .pixel-workshop #panel-revenue .bridge-route-btn:is(:hover, :focus-visible) {
  color: #072241 !important;
}

/* 2-Column Horizontal Revenue Streams Grid (#orbit-satellites-container.orbit-satellites) */
.pixel-workshop #panel-revenue .revenue-streams-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.9rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--oa-hair);
}
.pixel-workshop #panel-revenue #btn-add-stream {
  min-height: 42px;
  padding: 0.48rem 1.05rem;
  border-radius: 10px;
  border: 1.5px solid #fde68a !important;
  border-bottom: 3px solid #97703b !important;
  background: linear-gradient(135deg, #684812 0%, #3b2708 100%) !important;
  color: #fffbeb !important;
  font: 700 0.86rem/1.2 var(--font-body);
}
html[data-theme=light] .pixel-workshop #panel-revenue #btn-add-stream {
  background: linear-gradient(180deg, #fff5d9 0%, #edd196 100%) !important;
  border-color: #9e722e !important;
  border-bottom-color: #74511c !important;
  color: #2f1f06 !important;
}
.pixel-workshop #panel-revenue #btn-reset-streams {
  min-height: 42px;
  padding: 0.48rem 0.95rem;
  border-radius: 10px;
  border: 1.5px solid color-mix(in srgb, var(--pw-edge) 78%, transparent) !important;
  border-bottom: 3px solid #091020 !important;
  background: linear-gradient(135deg, #13223b 0%, #0b1526 100%) !important;
  color: var(--pw-ink) !important;
  font: 700 0.84rem/1.2 var(--font-body);
}
html[data-theme=light] .pixel-workshop #panel-revenue #btn-reset-streams {
  background: linear-gradient(180deg, #fffdf8 0%, #efe4cc 100%) !important;
  border-color: #b48a4e !important;
  border-bottom-color: #8a6338 !important;
  color: #2c2010 !important;
}
.pixel-workshop #panel-revenue #orbit-satellites-container.orbit-satellites {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.95rem !important;
}
.pixel-workshop #panel-revenue .orbit-node {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  animation: none !important;
  padding: 1.05rem 1.15rem !important;
  border-radius: 12px !important;
  border: 1.5px solid color-mix(in srgb, var(--pw-edge) 78%, transparent) !important;
  border-left: 4px solid var(--pw-gold) !important;
  border-bottom: 4px solid #8a6338 !important;
  background: color-mix(in srgb, var(--pw-inset) 86%, var(--pw-panel)) !important;
  box-shadow: 0 5px 14px rgba(6, 12, 24, 0.34) !important;
  transition: transform 170ms cubic-bezier(0.16, 1, 0.3, 1), border-color 170ms ease, box-shadow 170ms ease !important;
}
.pixel-workshop #panel-revenue .orbit-node:hover {
  transform: translateY(-3px) !important;
  border-color: var(--pw-gold) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.42) !important;
}
.pixel-workshop #panel-revenue .node-icon-wrap {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  border: 1.5px solid rgba(242, 210, 139, 0.45) !important;
  background: var(--pw-panel) !important;
}
.pixel-workshop #panel-revenue .btn-tool-mini {
  width: auto !important;
  height: auto !important;
  min-height: 30px !important;
  padding: 0.22rem 0.62rem !important;
  border-radius: 7px !important;
  border: 1px solid color-mix(in srgb, var(--pw-edge) 75%, transparent) !important;
  background: var(--pw-panel) !important;
  color: var(--pw-ink) !important;
  font: 700 0.75rem/1.2 var(--font-body) !important;
}
.pixel-workshop #panel-revenue .btn-tool-mini:hover {
  border-color: var(--pw-gold) !important;
  color: var(--pw-gold) !important;
  transform: translateY(-1px) !important;
}
.pixel-workshop #panel-revenue .node-title {
  color: var(--pw-ink) !important;
  font: 700 1.04rem/1.35 var(--font-head) !important;
}
.pixel-workshop #panel-revenue .node-desc {
  color: var(--pw-soft) !important;
  font-size: 0.84rem !important;
  line-height: 1.45 !important;
}

/* Stream Modal Dialog (#stream-modal .stream-modal-card) */
.pixel-workshop #stream-modal .stream-modal-card {
  border-radius: 14px !important;
  border: 2px solid #c89853 !important;
  border-bottom: 6px solid #806047 !important;
  background: var(--oa-bg) !important;
  box-shadow: inset 0 0 0 3px var(--pw-panel), 0 24px 64px rgba(0, 0, 0, 0.72) !important;
}
.pixel-workshop #stream-modal .stream-modal-head h3 {
  color: var(--pw-ink) !important;
  font: 700 1.25rem/1.3 var(--font-head) !important;
}
.pixel-workshop #stream-modal .stream-form-group label {
  color: var(--pw-gold) !important;
  font: 700 0.82rem/1.3 var(--font-body) !important;
}
.pixel-workshop #stream-modal .stream-form-group :is(input, select, textarea) {
  border-radius: 9px !important;
  border: 1.5px solid color-mix(in srgb, var(--pw-edge) 85%, #38bdf8) !important;
  border-bottom: 3px solid #091020 !important;
  background: linear-gradient(180deg, #101b33 0%, #0b1325 100%) !important;
  color: var(--pw-ink) !important;
  color-scheme: dark !important;
}
html[data-theme=light] .pixel-workshop #stream-modal .stream-form-group :is(input, select, textarea) {
  background: #fffcf5 !important;
  color: #1f2937 !important;
  border-color: #9ca3af !important;
  border-bottom-color: #6b7280 !important;
  color-scheme: light !important;
}
.pixel-workshop #stream-modal .btn-cancel {
  min-height: 42px;
  padding: 0.5rem 1.05rem;
  border-radius: 9px;
  border: 1.5px solid var(--pw-edge) !important;
  border-bottom: 3px solid #091020 !important;
  background: var(--pw-panel) !important;
  color: var(--pw-ink) !important;
}
.pixel-workshop #stream-modal .btn-submit {
  min-height: 42px;
  padding: 0.5rem 1.2rem;
  border-radius: 9px;
  border: 1.5px solid #fde68a !important;
  border-bottom: 3px solid #97703b !important;
  background: linear-gradient(135deg, #684812 0%, #3b2708 100%) !important;
  color: #fffbeb !important;
}

@media (max-width: 960px) {
  .pixel-workshop #panel-content .command-surface,
  .pixel-workshop #panel-content #content-assist .studio-steps,
  .pixel-workshop #panel-workflows .sp-inputs .sw-inputs,
  .pixel-workshop #panel-workflows .sp-support-folds,
  .pixel-workshop #panel-workflows .sw-check-list,
  .pixel-workshop #panel-workflows .sw-choose-grid,
  .pixel-workshop #panel-workflows .sw-toolbox-grid,
  .pixel-workshop #panel-revenue .bridge-metrics-grid,
  .pixel-workshop #panel-revenue .bridge-shortcuts,
  .pixel-workshop #panel-revenue #orbit-satellites-container.orbit-satellites {
    grid-template-columns: 1fr !important;
  }
}

/* Living workspace · 2026-10-23. Keep the ON AIR world; let the work lead. */
body.pixel-workshop .studio-shell .cockpit-tabs-bar { grid-template-columns:repeat(5,minmax(0,1fr)); }
body.pixel-workshop .studio-shell :is(#panel-tasks,#panel-content,#panel-revenue) > :is(.opening,.revenue-opening) {
  display:grid!important; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  min-height:0!important; padding:16px 0!important; margin-bottom:24px!important; gap:12px 24px;
  border:0!important; border-bottom:1px solid var(--pw-edge)!important; border-radius:0!important;
  background:none!important; box-shadow:none!important;
}
body.pixel-workshop .studio-shell .opening .opening-copy { grid-column:1; padding:0!important; background:none!important; }
body.pixel-workshop .studio-shell :is(.opening,.revenue-opening) h1 { font-size:clamp(1.75rem,2.7vw,2.25rem)!important; margin:6px 0!important; }
body.pixel-workshop .studio-shell .opening .opening-pulse {
  grid-column:1/-1; grid-row:auto; max-width:none; width:auto; min-height:0!important;
  padding:8px 0!important; border:0!important; background:none!important; box-shadow:none!important;
}
body.pixel-workshop .studio-shell .opening-pulse small { font-size:14px!important; }
body.pixel-workshop .studio-shell .pw-chapter-cast { grid-column:2; grid-row:1; flex:none; width:150px; min-height:92px!important; padding:20px 0 0!important; margin:0!important; }
body.pixel-workshop .studio-shell .pw-chapter-cast img { width:70px!important; height:70px!important; }
body.pixel-workshop .studio-shell .pw-chapter-cast img+img { width:76px!important; height:76px!important; }
body.pixel-workshop .studio-shell .pw-chapter-cast p { font-size:14px!important; background:none!important; }
body.pixel-workshop #panel-tasks .dayline { min-height:0!important; padding:24px!important; }
body.pixel-workshop #panel-tasks .north-star { padding:16px 0!important; border:0!important; background:none!important; box-shadow:none!important; }
body.pixel-workshop #panel-tasks #daily-intelligence-tasks .intelligence-heading {
  padding:16px 0!important; border:0!important; border-bottom:1px solid var(--pw-edge)!important;
  border-radius:0!important; background:none!important; box-shadow:none!important;
}
body.pixel-workshop #panel-tasks #daily-intelligence-tasks h2 { font-size:1.75rem!important; }
body.pixel-workshop #panel-tasks .intelligence-card { border:0!important; border-top:1px solid var(--pw-edge)!important; border-radius:0!important; background:var(--oa-bg)!important; box-shadow:none!important; }
body.pixel-workshop #panel-tasks .intelligence-card h3 { color:var(--pw-ink)!important; }
body.pixel-workshop #panel-content .wk-block { margin-block:32px!important; }
body.pixel-workshop #panel-content .wk-head h3 { font-size:clamp(1.6rem,2.3vw,1.9rem)!important; line-height:1.4!important; }
body.pixel-workshop #panel-content :is(.wk-progress-band,.wk-progress-group,.wk-overview) {
  border:0!important; border-radius:0!important; background:none!important; box-shadow:none!important;
}
body.pixel-workshop #panel-content .wk-progress-band { padding:16px 0!important; border-bottom:1px solid var(--pw-edge)!important; }
body.pixel-workshop #panel-content .wk-progress-band.is-optional { border-bottom-style:dashed!important; }
body.pixel-workshop #panel-content :is(.command-overview,.deadline-panel) { border:0!important; border-top:1px solid var(--pw-edge)!important; border-radius:0!important; box-shadow:none!important; }
body.pixel-workshop #panel-content :is(.aff-card,.cta-card) { border:0!important; border-bottom:1px solid var(--pw-edge)!important; border-radius:0!important; box-shadow:none!important; }
body.pixel-workshop #panel-content :is(.deal-card,.studio-step) { box-shadow:none!important; }
body.pixel-workshop #panel-content .desk-jumps { gap:8px!important; background:none!important; box-shadow:none!important; }
body.pixel-workshop #panel-workflows .sw-tabs {
  display:flex!important; flex-wrap:wrap!important; gap:0 20px!important; margin:0 0 16px!important;
  padding:0!important; background:none!important; border-bottom:1px solid var(--pw-edge)!important;
}
body.pixel-workshop #panel-workflows .sw-tabs button {
  flex:0 0 auto; width:auto; min-height:44px!important; padding:10px 4px!important;
  border:0!important; border-bottom:3px solid transparent!important; border-radius:0!important;
  background:none!important; box-shadow:none!important; color:var(--pw-soft)!important;
}
body.pixel-workshop #panel-workflows .sw-tabs button[aria-selected=true],
body.pixel-workshop #panel-workflows .sw-tabs button:is(:hover,:focus-visible) { color:var(--pw-ink)!important; border-bottom-color:var(--pw-gold)!important; }
body.pixel-workshop #panel-workflows .sw-workbench { background:var(--pw-panel)!important; border:1px solid var(--pw-edge)!important; border-radius:12px!important; padding:24px; }
body.pixel-workshop #panel-workflows .sw-selector { background:none!important; border:0!important; border-right:1px solid var(--pw-edge)!important; border-radius:0!important; box-shadow:none!important; }
body.pixel-workshop #panel-workflows .sw-workflow-detail { display:block!important; min-width:0; background:none!important; }
body.pixel-workshop #panel-workflows .sp-step-readout { background:none!important; border:0!important; border-top:1px solid var(--pw-edge)!important; border-radius:0!important; }
body.pixel-workshop #panel-workflows .sw-detail-head { padding:0 0 16px!important; border:0!important; background:none!important; box-shadow:none!important; }
body.pixel-workshop #panel-workflows .sw-detail-actions {
  display:flex!important; flex-flow:row wrap!important; gap:10px!important; width:100%; max-width:none!important;
  margin:8px 0!important; grid-column:auto; grid-row:auto;
}
body.pixel-workshop #panel-workflows .sw-detail-actions .sw-btn {
  flex:0 1 auto; width:auto!important; min-width:0!important; max-width:100%; min-height:48px!important;
  padding:10px 16px!important; font:600 16px/1.5 var(--font-body)!important; white-space:normal; overflow-wrap:normal;
}
body.pixel-workshop #panel-workflows .sw-detail-actions .sw-btn:not(.is-primary)::after { content:none!important; }
body.pixel-workshop #panel-workflows .sp-work-grid { display:flex!important; flex-direction:column; gap:28px!important; margin-top:20px; }
body.pixel-workshop #panel-workflows .sp-delivery { order:-1; padding:20px 0!important; border:0!important; border-block:1px solid var(--pw-edge)!important; border-radius:0!important; background:none!important; box-shadow:none!important; }
body.pixel-workshop #panel-workflows .sp-file-art { display:none!important; }
body.pixel-workshop #panel-workflows .sw-output-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px!important; padding:0!important; }
body.pixel-workshop #panel-workflows .sp-delivery .sw-output-list li { padding:0!important; border:0!important; background:none!important; color:var(--pw-ink)!important; font:500 16px/1.7 var(--font-body)!important; }
body.pixel-workshop #panel-workflows .sp-cast { float:right; width:180px; min-height:90px!important; height:90px!important; margin:0 0 12px 12px!important; padding:0!important; }
body.pixel-workshop #panel-workflows .sp-cast figure { width:85px!important; }
body.pixel-workshop #panel-workflows .sp-cast img { width:72px!important; height:72px!important; }
body.pixel-workshop #panel-workflows .sp-cast figure+figure img { width:80px!important; height:80px!important; }
body.pixel-workshop #panel-workflows .sp-cast figcaption { display:none!important; }
body.pixel-workshop #panel-workflows .sp-production-path { clear:both; }
body.pixel-workshop #panel-workflows :is(.sp-step-readout,.sp-inputs,.sw-fold) { box-shadow:none!important; }
body.pixel-workshop #panel-revenue :is(.revenue-money-bridge,.revenue-orbit-stage) { border:0!important; border-top:1px solid var(--pw-edge)!important; border-radius:0!important; box-shadow:none!important; padding:24px 0!important; background:none!important; }
body.pixel-workshop #panel-revenue :is(.revenue-money-bridge,.revenue-orbit-stage)::before { content:none!important; }
body.pixel-workshop #panel-revenue .bridge-metric-card { padding:16px!important; border:0!important; border-bottom:1px solid var(--pw-edge)!important; border-radius:0!important; box-shadow:none!important; background:var(--oa-bg)!important; }
body.pixel-workshop #panel-revenue .orbit-node { border:0!important; border-top:1px solid var(--pw-edge)!important; border-radius:0!important; box-shadow:none!important; background:var(--oa-bg)!important; padding:24px 16px!important; }
body.pixel-workshop #stream-notice { color:var(--pw-ink); font:500 16px/1.7 var(--font-body); }
body.pixel-workshop #btn-undo-stream { min-height:44px; padding:8px 16px; margin-left:8px; color:var(--pw-ink); background:var(--pw-inset); border:1px solid var(--pw-gold); border-radius:6px; cursor:pointer; }
@media(max-width:1100px) {
  body.pixel-workshop #panel-workflows .sw-workbench { display:block!important; }
  body.pixel-workshop #panel-workflows .sw-selector { border:0!important; border-bottom:1px solid var(--pw-edge)!important; border-radius:0!important; box-shadow:none!important; padding:12px 0!important; }
  body.pixel-workshop #panel-workflows .sw-selector>summary { display:flex!important; }
  body.pixel-workshop #panel-workflows .sw-workflow-detail { padding:20px 0!important; }
}
@media(max-width:960px) {
  body.pixel-workshop .studio-shell .cockpit-tabs-bar { display:flex!important; flex-wrap:nowrap; overflow-x:auto; }
  body.pixel-workshop .studio-shell .cockpit-tab-btn { flex:0 0 145px; min-width:145px; min-height:64px!important; }
  body.pixel-workshop #panel-workflows .sw-output-list { grid-template-columns:1fr; }
}
@media(max-width:600px) {
  body.pixel-workshop .studio-shell :is(#panel-tasks,#panel-content,#panel-revenue) > :is(.opening,.revenue-opening) { display:block!important; padding:12px 0!important; }
  body.pixel-workshop .studio-shell .pw-chapter-cast { display:flex!important; width:112px; min-height:76px!important; margin:8px 0 0 auto!important; padding-top:18px!important; }
  body.pixel-workshop .studio-shell .pw-chapter-cast img { width:52px!important; height:52px!important; }
  body.pixel-workshop .studio-shell .pw-chapter-cast img+img { width:58px!important; height:58px!important; }
  body.pixel-workshop #panel-tasks .dayline { padding:20px 16px!important; }
  body.pixel-workshop #panel-tasks .task-heading-actions { justify-items:start; }
  body.pixel-workshop #panel-workflows .sw-detail-actions .sw-btn { flex-basis:100%; }
  body.pixel-workshop #panel-workflows .sp-cast { float:none; margin:8px 0!important; }
}

/* Task tab readability · Audi 2026-10-23: "🧭 เป้าหมายและโปรเจกต์ ... พวกนี้อ่านยากเพราะมันโปร่งแสงไปไหมพื้นหลัง".
   The de-box pass above stripped the 🧭 station's surface, so its heading, subtitle and project rows sat
   straight on the pixel scene. Text never sits on the scene: the station gets the same reading surface as 📋 งานวันนี้. */
body.pixel-workshop #panel-tasks .north-star {
  margin-top: 40px !important;
  padding: 24px !important;
  border: 2px solid #c89853 !important;
  border-bottom: 6px solid #806047 !important;
  border-radius: 0 14px 14px 14px !important;
  background: var(--oa-bg) !important;
  box-shadow: inset 0 0 0 3px var(--pw-panel), 0 8px 0 rgba(8, 15, 29, 0.42) !important;
}
body.pixel-workshop #panel-tasks .north-star > .section-head h2 {
  font: 700 clamp(1.5rem, 2.2vw, 1.875rem)/1.3 var(--font-head) !important;
  color: var(--pw-ink) !important;
  text-shadow: none !important;
}
/* The shared heading marker is transparent here and only left a blank gap before the 🧭. */
body.pixel-workshop #panel-tasks .north-star > .section-head h2::before { display: none !important; }
body.pixel-workshop #panel-tasks .north-star > .section-head p {
  margin-top: 4px !important;
  font-size: 15px !important;
  color: var(--pw-soft) !important;
}
/* Cards inside the station: one quiet surface, no second floating shadow layer. */
body.pixel-workshop #panel-tasks .north-star .goal-card {
  background: var(--pw-inset) !important;
  box-shadow: none !important;
}
body.pixel-workshop #panel-tasks .north-star .goal-card :is(.goal-date, .goal-meta-row) { color: var(--pw-soft) !important; }
body.pixel-workshop #panel-tasks .north-star #north-star-projects .intelligence-row { background: var(--pw-inset) !important; }
/* The opening greeting and the intelligence heading also sit on the scene (pixel sweep: white text on the day
   scene at 1.1–3.1:1, lamp glow at 2.5:1 at night). They get a quiet plate in the theme's panel colour, no gold frame. */
body.pixel-workshop #panel-tasks > .opening :is(.opening-copy, .opening-pulse),
body.pixel-workshop #panel-tasks #daily-intelligence-tasks .intelligence-heading > div,
body.pixel-workshop #panel-tasks #daily-intelligence-tasks .intelligence-heading > .source-pill {
  width: fit-content;
  max-width: 100%;
  padding: 12px 16px !important;
  border: 1px solid color-mix(in srgb, var(--pw-edge) 60%, transparent) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--pw-panel) 93%, transparent) !important;
  box-shadow: 0 6px 18px rgba(4, 8, 18, 0.28) !important;
}
body.pixel-workshop #panel-tasks > .opening :is(h1, strong),
body.pixel-workshop #panel-tasks #daily-intelligence-tasks .intelligence-heading h2 { color: var(--pw-ink) !important; text-shadow: none !important; }
body.pixel-workshop #panel-tasks > .opening :is(p, small, .today-date),
body.pixel-workshop #panel-tasks #daily-intelligence-tasks .intelligence-heading :is(p, .source-pill) { color: var(--pw-soft) !important; text-shadow: none !important; }
body.pixel-workshop #panel-tasks > .opening #day-greeting,
body.pixel-workshop #panel-tasks #daily-intelligence-tasks .desk-kicker { color: var(--pw-gold) !important; }
html[data-theme=light] body.pixel-workshop #panel-tasks #north-star-tabs button[aria-selected="false"] { color: var(--pw-soft) !important; }
@media (max-width: 760px) {
  body.pixel-workshop #panel-tasks .north-star { padding: 20px 16px !important; }
}

/* Task tab button system = "B" · Audi 2026-10-23 picked option B from the 3-way comparison ("B แล้วจำสกิลนี้ไว้ไปใช้กับทุกหน้า").
   (#panel-tasks doubled on purpose: outweighs the older per-theme button rules above.)
   ONE solid gold primary per station · everything that goes somewhere else = gold text link with → ·
   switches = underline tabs · secondary actions (refresh, show more) = quiet text buttons · status = chips.
   Earlier audit that led here: banned navy Quest Board, navy-on-navy Dreams + jump bar, same gold for action and
   selected tab, 8 heights / 5 radii, then 5 heavy keycaps competing with the headings. */

/* PRIMARY: 1 per station (＋ เพิ่มงาน · สร้างใน Notion) */
html body.pixel-workshop #panel-tasks#panel-tasks :is(#quick-add-link, #quick-add-form .done-btn) {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px !important; height: auto !important; padding: 10px 18px !important;
  border: 0 !important; border-radius: 10px !important;
  background: linear-gradient(180deg, #e9b949 0%, #c48f22 100%) !important;
  color: #2a1a02 !important; font: 700 15px/1.2 var(--font-body) !important; text-decoration: none !important;
  box-shadow: 0 2px 0 #7a5410, 0 6px 14px rgba(0, 0, 0, 0.25) !important;
  transform: none; transition: filter 140ms ease, transform 120ms ease, box-shadow 120ms ease !important;
}
html body.pixel-workshop #panel-tasks#panel-tasks :is(#quick-add-link, #quick-add-form .done-btn):is(:hover, :focus-visible) {
  filter: brightness(1.07); transform: translateY(-1px); color: #2a1a02 !important;
  background: linear-gradient(180deg, #f0c45a 0%, #cc982a 100%) !important;
  box-shadow: 0 3px 0 #7a5410, 0 8px 18px rgba(0, 0, 0, 0.28) !important;
}
html body.pixel-workshop #panel-tasks#panel-tasks :is(#quick-add-link, #quick-add-form .done-btn):active {
  transform: translateY(1px); box-shadow: 0 1px 0 #7a5410, 0 3px 8px rgba(0, 0, 0, 0.22) !important;
}

/* LINK: goes to another page or place (เปิด Quest Board → · ✏️ แก้ Goal → · 💚 เช็กอินสุขภาพ · 🎯 เริ่มโฟกัส) */
html body.pixel-workshop #panel-tasks#panel-tasks :is(.task-heading-actions > a:not(#quick-add-link), .north-star > .section-head > a, .quick-strip a) {
  display: inline-flex !important; align-items: center; gap: 6px;
  min-height: 44px !important; height: auto !important; padding: 10px 4px !important;
  border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; transform: none !important;
  color: var(--pw-gold) !important; font: 700 15px/1.2 var(--font-body) !important; text-decoration: none !important;
  transition: border-color 140ms ease, color 140ms ease !important;
}
html body.pixel-workshop #panel-tasks#panel-tasks :is(.task-heading-actions > a:not(#quick-add-link), .north-star > .section-head > a, .quick-strip a):is(:hover, :focus-visible) {
  border-bottom-color: currentColor !important; background: none !important; box-shadow: none !important; transform: none !important;
}
html body.pixel-workshop #panel-tasks#panel-tasks :is(.task-heading-actions, .north-star > .section-head, .quick-strip) a :is(span, b, small) {
  color: inherit !important; background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important;
}
/* Link first, primary last (reading order ends on the action) */
html body.pixel-workshop #panel-tasks#panel-tasks .task-heading-actions { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 20px !important; }
html body.pixel-workshop #panel-tasks#panel-tasks .task-heading-actions > #quick-add-link { order: 2; }
/* Quick routes = a quiet row of two links under the queue */
html body.pixel-workshop #panel-tasks#panel-tasks .quick-strip {
  display: flex !important; gap: 28px !important; padding: 4px 0 0 !important; margin-top: 4px;
  border: 0 !important; border-top: 1px solid var(--oa-hair) !important; background: none !important; box-shadow: none !important;
}
html body.pixel-workshop #panel-tasks#panel-tasks .quick-strip a { width: auto !important; justify-content: flex-start !important; }
html body.pixel-workshop #panel-tasks#panel-tasks .quick-strip a b { font-size: 13px; opacity: 0.8; }

/* QUIET: secondary actions on this page (รีเฟรช · ดูเป้าหมายเพิ่ม) */
html body.pixel-workshop #panel-tasks#panel-tasks :is(#refresh-all, #north-star-more-btn) {
  display: inline-flex !important; align-items: center; gap: 6px;
  min-height: 40px !important; height: auto !important; padding: 8px 12px !important;
  border: 1px solid color-mix(in srgb, var(--pw-edge) 70%, transparent) !important; border-radius: 10px !important;
  background: none !important; box-shadow: none !important; transform: none !important;
  color: var(--pw-soft) !important; font: 600 14px/1.2 var(--font-body) !important;
  transition: border-color 140ms ease, color 140ms ease !important;
}
html body.pixel-workshop #panel-tasks#panel-tasks :is(#refresh-all, #north-star-more-btn):is(:hover, :focus-visible) {
  border-color: var(--pw-gold) !important; color: var(--pw-ink) !important; background: none !important; box-shadow: none !important;
}

/* TABS: 🎯 Goals | 🌙 Dreams = underline tabs, only the chosen one is ink + gold line */
html body.pixel-workshop #panel-tasks#panel-tasks #north-star-tabs {
  display: inline-flex !important; gap: 4px !important; padding: 0 !important;
  border: 0 !important; border-bottom: 1px solid var(--oa-hair) !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important;
}
html body.pixel-workshop #panel-tasks#panel-tasks #north-star-tabs button {
  min-height: 44px !important; padding: 10px 14px !important; margin: 0 0 -1px !important;
  border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; transform: none !important;
  color: var(--pw-soft) !important; font: 700 15px/1.2 var(--font-body) !important;
}
html body.pixel-workshop #panel-tasks#panel-tasks #north-star-tabs button:is(:hover, :focus-visible) { color: var(--pw-ink) !important; background: none !important; }
html body.pixel-workshop #panel-tasks#panel-tasks #north-star-tabs button[aria-selected="true"] {
  color: var(--pw-ink) !important; border-bottom-color: var(--pw-gold) !important; background: none !important; box-shadow: none !important;
}
html body.pixel-workshop #panel-tasks#panel-tasks #north-star-tabs button .tab-count {
  margin-left: 6px !important; padding: 0 !important; border-radius: 0 !important; background: none !important;
  color: var(--pw-soft) !important; font-weight: 600 !important;
}
html body.pixel-workshop #panel-tasks#panel-tasks #north-star-tabs button .tab-count:empty { display: none !important; }

/* Jump bar (🧭 สรุปวันนี้ · ⏳ เดดไลน์ ...) = the same underline tabs, on a plate because it sits on the scene */
html body.pixel-workshop #panel-tasks#panel-tasks .desk-jumps {
  display: flex !important; flex-wrap: wrap; gap: 0 !important; padding: 0 6px !important; width: fit-content; max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--pw-edge) 60%, transparent) !important; border-radius: 12px !important;
  background: color-mix(in srgb, var(--pw-panel) 93%, transparent) !important; box-shadow: 0 6px 18px rgba(4, 8, 18, 0.28) !important;
}
html body.pixel-workshop #panel-tasks#panel-tasks .desk-jumps a {
  min-height: 44px !important; padding: 10px 16px !important; margin: 0 !important;
  border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; color: var(--pw-soft) !important;
  font: 700 15px/1.2 var(--font-body) !important;
}
html body.pixel-workshop #panel-tasks#panel-tasks .desk-jumps a:is(:hover, :focus-visible) {
  border-bottom-color: var(--pw-gold) !important; color: var(--pw-ink) !important; background: none !important;
}

/* Add-task form: fields share the 44px button height so the save button lines up (bug_sweep misalign 36 vs 44). */
html body.pixel-workshop #panel-tasks#panel-tasks #quick-add-form :is(select, input:not([type="radio"])) { min-height: 44px !important; box-sizing: border-box; }
/* CHIPS on this tab: the default "อีก N วัน" time pill and deadline badge were navy on navy; skill Slot 5 Copper replaces dark blue. */
html body.pixel-workshop #panel-tasks#panel-tasks .priority-row:not(.is-today):not(.is-tomorrow):not(.is-danger):not(.is-routine) .time,
html body.pixel-workshop #panel-tasks#panel-tasks .row-badge:not(.is-soon):not(.is-overdue):not(.is-done) {
  background: linear-gradient(180deg, #542912 0%, #301608 100%) !important;
  border: 1.5px solid rgba(249, 115, 22, 0.76) !important; color: #ffedd5 !important;
}
html[data-theme=light] body.pixel-workshop #panel-tasks#panel-tasks .quick-add > summary { color: var(--pw-gold) !important; }

/* Task tab opening = ONE balanced band · Audi 2026-10-23: "ตรงนี้มันสมดุลกันแล้วหรอ?? หรือที่มันแปลกๆเพราะเราใช้หลากสีไป??".
   Before: two plates of different widths stacked left, an empty middle, the cast stranded far right, five accents
   (gold kicker, gold keycap, teal dot, blue icon, bronze button). Now: one plate spanning the row, three columns
   (who/when · status + refresh · cast), one accent (gold kicker); weather becomes a quiet text toggle. */
html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  grid-template-areas: "copy pulse cast";
  align-items: center; gap: 0 28px !important;
  padding: 20px 24px !important; margin-bottom: 28px !important;
  border: 1px solid color-mix(in srgb, var(--pw-edge) 60%, transparent) !important; border-radius: 14px !important;
  background: color-mix(in srgb, var(--pw-panel) 93%, transparent) !important;
  box-shadow: 0 8px 22px rgba(4, 8, 18, 0.3) !important;
}
html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening :is(.opening-copy, .opening-pulse) {
  width: auto; max-width: none; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
}
html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening .opening-copy { grid-area: copy; padding: 0 !important; }
html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening .opening-pulse {
  grid-area: pulse; display: flex !important; align-items: center; gap: 14px;
  padding: 4px 0 4px 24px !important; border-left: 1px solid var(--oa-hair) !important; align-self: stretch;
}
html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening .opening-pulse > div { flex: 1 1 auto; min-width: 0; }
html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening .pulse-dot { background: var(--pw-gold) !important; box-shadow: none !important; }
html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening .pw-chapter-cast {
  grid-area: cast; grid-column: auto !important; grid-row: auto !important;
  display: flex !important; align-items: flex-end; justify-content: center; position: relative;
  width: auto !important; min-height: 0 !important; padding: 26px 0 0 !important; margin: 0 !important;
}
html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening .pw-chapter-cast p {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); white-space: nowrap; margin: 0 !important;
}
html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening .pw-chapter-cast img { width: 64px !important; height: 64px !important; }
/* One accent only: the gold kicker. Title ink, everything else soft. */
html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening #day-greeting { color: var(--pw-gold) !important; font-size: 14px !important; }
html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening .opening-pulse strong { color: var(--pw-ink) !important; font-size: 16px !important; }
/* Weather = quiet text toggle, not a second keycap next to Refresh. */
html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening .task-sky-details > summary {
  display: inline-flex !important; min-height: 32px !important; padding: 4px 0 !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  color: var(--pw-soft) !important; font: 600 14px/1.2 var(--font-body) !important; transform: none !important;
}
html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening .task-sky-details > summary:is(:hover, :focus-visible) {
  color: var(--pw-ink) !important; text-decoration: underline; text-underline-offset: 4px; background: none !important; box-shadow: none !important;
}
html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening .task-sky-details[open] { grid-column: auto; }
@media (max-width: 900px) {
  html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy cast" "pulse pulse"; gap: 16px 20px !important;
  }
  html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening .opening-pulse {
    padding: 14px 0 0 !important; border-left: 0 !important; border-top: 1px solid var(--oa-hair) !important;
  }
}
@media (max-width: 760px) {
  html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening { padding: 16px !important; }
  html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening .pw-chapter-cast img { width: 48px !important; height: 48px !important; }
}
html body.pixel-workshop :is(#panel-tasks#panel-tasks) > .opening .task-sky-details > summary::after { content: ' ▾'; margin-left: 4px; color: var(--pw-soft); }
html body.pixel-workshop #panel-tasks#panel-tasks > .opening .task-sky-details[open] > summary::after { content: ' ▴'; }
/* Fresh-reviewer fixes (2026-10-23): under B only the primary is solid gold, so status never wears a gold fill;
   a link next to tabs gets a divider so it doesn't read as a third tab; labels and heading plates don't look clickable. */
html body.pixel-workshop #panel-tasks#panel-tasks .priority-row.is-today .time {
  background: color-mix(in srgb, #f59e0b 16%, transparent) !important; border: 1.5px solid #f59e0b !important;
  color: var(--pw-ink) !important; box-shadow: none !important;
}
html body.pixel-workshop #panel-tasks#panel-tasks #north-star-tabs { margin-left: 8px !important; padding-left: 16px !important; border-left: 1px solid var(--oa-hair) !important; }
html body.pixel-workshop #panel-tasks#panel-tasks #daily-intelligence-tasks .intelligence-heading > .source-pill {
  padding: 4px 12px !important; border-radius: 999px !important; box-shadow: none !important; font-size: 13px !important;
}
html body.pixel-workshop #panel-tasks#panel-tasks #daily-intelligence-tasks .intelligence-heading > div { box-shadow: none !important; }

/* Content & Deals tab = Button Hierarchy B · Audi 2026-10-23 (option B site-wide; this tab follows the Task tab).
   PRIMARY (one per section): ➕ เพิ่ม CTA · ➕ เก็บไอเดีย · 💾 บันทึก in the deal form.
   QUIET (stays on the page): รีเฟรช · 📋 copy-command chips · คัดลอก / แก้ on CTA cards · 📅 ดูทั้งสัปดาห์; ลบ = red text.
   TABS: สัปดาห์นี้/หน้า · ตุนล่วงหน้า/ทำแล้วลงเลย · deal stage filter · the jump bar. Category filters (.cta-filter) keep their chips. */
html body.pixel-workshop #panel-content#panel-content :is(.cta-add-btn, .idea-save, .deal-edit .done-btn) {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px !important; padding: 10px 18px !important;
  border: 0 !important; border-radius: 10px !important;
  background: linear-gradient(180deg, #e9b949 0%, #c48f22 100%) !important;
  color: #2a1a02 !important; font: 700 15px/1.2 var(--font-body) !important;
  box-shadow: 0 2px 0 #7a5410, 0 6px 14px rgba(0, 0, 0, 0.25) !important; transform: none;
  transition: filter 140ms ease, transform 120ms ease, box-shadow 120ms ease !important;
}
html body.pixel-workshop #panel-content#panel-content :is(.cta-add-btn, .idea-save, .deal-edit .done-btn):is(:hover, :focus-visible) {
  filter: brightness(1.07); transform: translateY(-1px); color: #2a1a02 !important;
  background: linear-gradient(180deg, #f0c45a 0%, #cc982a 100%) !important;
}
html body.pixel-workshop #panel-content#panel-content :is(.cta-add-btn, .idea-save, .deal-edit .done-btn) * { color: inherit !important; background: none !important; }

html body.pixel-workshop #panel-content#panel-content :is(.opening-pulse > button, .studio-copy, .cta-btn.is-main:not(.idea-save), .cta-btn.is-sub, .wk-strip-btn) {
  display: inline-flex !important; align-items: center; gap: 6px;
  min-height: 40px !important; padding: 8px 12px !important;
  border: 1px solid color-mix(in srgb, var(--pw-edge) 70%, transparent) !important; border-radius: 10px !important;
  background: none !important; box-shadow: none !important; transform: none !important;
  color: var(--pw-soft) !important; font: 600 14px/1.2 var(--font-body) !important;
  transition: border-color 140ms ease, color 140ms ease !important;
}
html body.pixel-workshop #panel-content#panel-content .cta-btn.is-main:not(.idea-save),
html body.pixel-workshop #panel-content#panel-content .studio-copy { color: var(--pw-gold) !important; }
html body.pixel-workshop #panel-content#panel-content :is(.opening-pulse > button, .studio-copy, .cta-btn.is-main:not(.idea-save), .cta-btn.is-sub, .wk-strip-btn):is(:hover, :focus-visible) {
  border-color: var(--pw-gold) !important; color: var(--pw-ink) !important; background: none !important;
}
html body.pixel-workshop #panel-content#panel-content .cta-btn.is-del {
  min-height: 40px !important; padding: 8px 10px !important; border: 0 !important; background: none !important; box-shadow: none !important;
  color: #fca5a5 !important; font: 600 14px/1.2 var(--font-body) !important;
}
html[data-theme=light] body.pixel-workshop #panel-content#panel-content .cta-btn.is-del { color: #b91c1c !important; }
html body.pixel-workshop #panel-content#panel-content .cta-btn.is-del:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 4px; }
html body.pixel-workshop #panel-content#panel-content :is(.cta-btn, .studio-copy):not(.aku-cta) * { color: inherit !important; background: none !important; }

/* TABS: underline on one hairline; only the chosen one is ink + gold line */
html body.pixel-workshop #panel-content#panel-content :is(.wk-tabs, .wk-plan, .deal-tabs) {
  display: inline-flex !important; flex-wrap: wrap; gap: 4px !important; padding: 0 !important;
  border: 0 !important; border-bottom: 1px solid var(--oa-hair) !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important;
}
html body.pixel-workshop #panel-content#panel-content :is(.wk-tabs > button, .wk-plan > button, .deal-tabs > button) {
  min-height: 44px !important; padding: 10px 14px !important; margin: 0 0 -1px !important;
  border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; transform: none !important;
  color: var(--pw-soft) !important; font: 700 15px/1.2 var(--font-body) !important; text-align: left;
}
html body.pixel-workshop #panel-content#panel-content :is(.wk-tabs > button, .wk-plan > button, .deal-tabs > button) * { color: inherit !important; background: none !important; border: 0 !important; box-shadow: none !important; }
html body.pixel-workshop #panel-content#panel-content :is(.wk-tabs > button, .wk-plan > button, .deal-tabs > button):is(:hover, :focus-visible) { color: var(--pw-ink) !important; background: none !important; }
html body.pixel-workshop #panel-content#panel-content :is(.wk-tabs > button, .wk-plan > button, .deal-tabs > button):is(.is-active, .is-on, [aria-selected="true"], [aria-pressed="true"]) {
  color: var(--pw-ink) !important; border-bottom-color: var(--pw-gold) !important; background: none !important; box-shadow: none !important;
}
html body.pixel-workshop #panel-content#panel-content .desk-jumps {
  display: flex !important; flex-wrap: wrap; gap: 0 !important; padding: 0 !important;
  border: 0 !important; border-bottom: 1px solid var(--oa-hair) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
}
html body.pixel-workshop #panel-content#panel-content .desk-jumps a {
  min-height: 44px !important; padding: 10px 14px !important; margin: 0 !important;
  border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; color: var(--pw-soft) !important; font: 700 15px/1.2 var(--font-body) !important;
}
html body.pixel-workshop #panel-content#panel-content .desk-jumps a:is(:hover, :focus-visible) { border-bottom-color: var(--pw-gold) !important; color: var(--pw-ink) !important; background: none !important; }
/* Content opening kicker = the one accent, like the Task tab greeting */
html body.pixel-workshop #panel-content#panel-content > .opening .desk-kicker { color: var(--pw-gold) !important; font-size: 14px !important; }
html body.pixel-workshop #panel-content#panel-content > .opening .pw-chapter-cast p { white-space: normal !important; width: max-content; max-width: 220px; text-align: center; }
/* Status never wears the primary gold (B): today badges become amber outline chips; the selected category filter
   is an outlined chip so it can't be confused with ➕ เพิ่ม CTA beside it. */
html body.pixel-workshop #panel-content#panel-content :is(.wk-hero-kicker, .wk-today) {
  background: color-mix(in srgb, #f59e0b 16%, transparent) !important; border: 1.5px solid #f59e0b !important;
  color: var(--pw-ink) !important; box-shadow: none !important;
}
html body.pixel-workshop #panel-content#panel-content .cta-filter:is(.is-active, [aria-pressed="true"], [aria-selected="true"]) {
  background: color-mix(in srgb, var(--pw-gold) 14%, transparent) !important; border: 1.5px solid var(--pw-gold) !important;
  color: var(--pw-ink) !important; box-shadow: none !important;
}
html body.pixel-workshop #panel-content#panel-content .cta-filter:is(.is-active, [aria-pressed="true"], [aria-selected="true"]) * { color: inherit !important; }
html body.pixel-workshop #panel-content#panel-content .desk-jumps {
  width: fit-content; max-width: 100%; padding: 0 6px !important;
  border: 1px solid color-mix(in srgb, var(--pw-edge) 60%, transparent) !important; border-radius: 12px !important;
  background: color-mix(in srgb, var(--pw-panel) 93%, transparent) !important;
}
@media (max-width: 900px) {
  html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening .pw-chapter-cast p { left: auto !important; right: 0; transform: none !important; max-width: 160px; white-space: normal !important; text-align: right; }
  html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening .pw-chapter-cast { padding-top: 44px !important; }
}
html[data-theme=light] body.pixel-workshop :is(#panel-tasks, #panel-content) .source-warning { color: #9a3412 !important; }
html body.pixel-workshop #panel-content#panel-content .deal-edit :is(input:not([type="checkbox"]):not([type="radio"]), select) { min-height: 44px !important; box-sizing: border-box; }
/* KPI meaning (Audi 2026-10-23 "ค" + fresh reviewer): zero and not-connected stay neutral grey; colour only when there is something to act on. */
html body.pixel-workshop #panel-tasks#panel-tasks #command-summary .cs-kpi-item:is(.is-zero, .is-off) { border-left-color: color-mix(in srgb, var(--pw-edge) 80%, transparent) !important; }
html body.pixel-workshop #panel-tasks#panel-tasks #command-summary .cs-kpi-item:is(.is-zero, .is-off) .cs-kpi-num { color: var(--pw-soft) !important; }
html body.pixel-workshop #panel-tasks#panel-tasks #command-summary .cs-kpi-item.is-off .cs-kpi-off { font: 600 13px/1.2 var(--font-body); color: var(--pw-soft); margin-left: 6px; }
html[data-theme=light] body.pixel-workshop #panel-tasks#panel-tasks #command-summary .cs-kpi-item.is-soon .cs-kpi-num { color: #92400e !important; }
html body.pixel-workshop #panel-tasks#panel-tasks .north-star .goal-card .goal-date.is-soon { color: #fbbf24 !important; font-weight: 700; }
html body.pixel-workshop #panel-tasks#panel-tasks .north-star .goal-card .goal-date.is-overdue { color: #fda4af !important; font-weight: 700; }
html[data-theme=light] body.pixel-workshop #panel-tasks#panel-tasks .north-star .goal-card .goal-date.is-soon { color: #92400e !important; }
html[data-theme=light] body.pixel-workshop #panel-tasks#panel-tasks .north-star .goal-card .goal-date.is-overdue { color: #9f1239 !important; }
/* Posting table: a long slot tag ("AI 2 · Weekly Recap · 12:00 ⚡") spilled over "ต้องลง" (fresh reviewer 2026-10-23).
   Wider tag column and a 2-line wrap for long tags only; short ones stay on one line. */
@media (min-width: 761px) { html body.pixel-workshop #panel-content#panel-content .wk-posting .wk-item { grid-template-columns: minmax(13rem, 17.5rem) minmax(0, 1fr) auto !important; } }
html body.pixel-workshop #panel-content#panel-content .wk-posting .wk-item > .wk-tag { max-width: 100% !important; white-space: normal !important; overflow-wrap: anywhere; }
html body.pixel-workshop #panel-content#panel-content .cta-btn.is-del { color: #f87171 !important; font-weight: 700 !important; }
@media (max-width: 900px) {
  html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening .pw-chapter-cast p { position: static !important; display: block; margin: 0 0 4px !important; max-width: 150px; text-align: center; }
  html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening .pw-chapter-cast { flex-wrap: wrap; justify-content: center; padding-top: 0 !important; max-width: 160px; }
}
html body.pixel-workshop #panel-tasks#panel-tasks #command-summary .cs-kpi-item.is-zero .cs-kpi-off { font: 600 13px/1.2 var(--font-body); color: var(--pw-soft); margin-left: 6px; }
@media (max-width: 760px) {
  html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening {
    grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "copy copy" "pulse cast" !important;
  }
  html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening .pw-chapter-cast p { font-size: 12px !important; max-width: 120px; }
  html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening .pw-chapter-cast { max-width: 130px; }
}
html body.pixel-workshop #panel-tasks#panel-tasks > .opening .task-sky-details:not([open]) { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; width: auto; }
@media (max-width: 760px) {
  html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening .opening-pulse {
    display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px 10px;
  }
  html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening .opening-pulse .pulse-dot { margin-top: 7px; }
  html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content) > .opening .opening-pulse > button { grid-column: 1 / -1; justify-self: start; }
}

/* Workflows & Skills tab = Button Hierarchy B · Audi 2026-10-23 ("ก": continue tab by tab).
   Mode switch (📋 วิธีทำงาน · คลังตัวอย่าง · ภาษาออดี้ · คลังสกิล) = underline tabs; 📋 คัดลอกบรีฟเริ่มงาน = the one gold primary;
   🎞️ เก็บตัวอย่างที่ชอบ = quiet (was a banned navy fill). The numbered 1–6 station shelf keeps its approved look. */
html body.pixel-workshop #panel-workflows#panel-workflows .sw-tabs {
  display: flex !important; gap: 4px !important; padding: 0 6px !important; width: fit-content; max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--pw-edge) 60%, transparent) !important; border-radius: 12px !important;
  background: color-mix(in srgb, var(--pw-panel) 93%, transparent) !important; box-shadow: none !important;
}
html body.pixel-workshop #panel-workflows#panel-workflows .sw-tabs > button {
  min-height: 44px !important; padding: 10px 14px !important; margin: 0 !important;
  border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; transform: none !important;
  color: var(--pw-soft) !important; font: 700 15px/1.2 var(--font-body) !important;
}
html body.pixel-workshop #panel-workflows#panel-workflows .sw-tabs > button * { color: inherit !important; background: none !important; }
html body.pixel-workshop #panel-workflows#panel-workflows .sw-tabs > button:is(:hover, :focus-visible) { color: var(--pw-ink) !important; background: none !important; }
html body.pixel-workshop #panel-workflows#panel-workflows .sw-tabs > button:is(.is-active, [aria-selected="true"]) {
  color: var(--pw-ink) !important; border-bottom-color: var(--pw-gold) !important; background: none !important; box-shadow: none !important;
}
html body.pixel-workshop #panel-workflows#panel-workflows .sw-btn.is-primary {
  display: inline-flex !important; align-items: center; gap: 8px; min-height: 44px !important; padding: 10px 18px !important;
  border: 0 !important; border-radius: 10px !important; background: linear-gradient(180deg, #e9b949 0%, #c48f22 100%) !important;
  color: #2a1a02 !important; font: 700 15px/1.2 var(--font-body) !important; box-shadow: 0 2px 0 #7a5410, 0 6px 14px rgba(0, 0, 0, 0.25) !important;
}
html body.pixel-workshop #panel-workflows#panel-workflows .sw-btn.is-primary:is(:hover, :focus-visible) { filter: brightness(1.07); color: #2a1a02 !important; }
html body.pixel-workshop #panel-workflows#panel-workflows .sw-btn.is-primary * { color: inherit !important; background: none !important; }
html body.pixel-workshop #panel-workflows#panel-workflows .sw-btn:not(.is-primary) {
  display: inline-flex !important; align-items: center; gap: 6px; min-height: 40px !important; padding: 8px 12px !important;
  border: 1px solid color-mix(in srgb, var(--pw-edge) 70%, transparent) !important; border-radius: 10px !important;
  background: none !important; box-shadow: none !important; color: var(--pw-soft) !important; font: 600 14px/1.2 var(--font-body) !important;
}
html body.pixel-workshop #panel-workflows#panel-workflows .sw-btn:not(.is-primary):is(:hover, :focus-visible) { border-color: var(--pw-gold) !important; color: var(--pw-ink) !important; background: none !important; }
html body.pixel-workshop #panel-workflows#panel-workflows .sw-btn:not(.is-primary) * { color: inherit !important; background: none !important; }
/* Selected workflow in the list = selection, not an action: outline + soft tint, never the primary's solid gold (B). */
html body.pixel-workshop #panel-workflows#panel-workflows .sw-workflow-row[aria-pressed="true"] {
  background: color-mix(in srgb, var(--pw-gold) 14%, transparent) !important; border: 1.5px solid var(--pw-gold) !important;
  color: var(--pw-ink) !important; box-shadow: none !important;
}
html body.pixel-workshop #panel-workflows#panel-workflows .sw-workflow-row[aria-pressed="true"] :is(strong, .sw-row-arrow) { color: var(--pw-ink) !important; }
/* Delivery folder tab had an empty label; the skill names it "📦 ผลลัพธ์เมื่อจบสายงาน". */
html body.pixel-workshop #panel-workflows#panel-workflows .sp-delivery::before {
  content: '📦 ผลลัพธ์เมื่อจบสายงาน' !important; width: auto !important; height: 22px !important; top: -22px !important;
  display: flex; align-items: center; padding: 0 12px; font: 700 12px/1 var(--font-body); color: #241c10; white-space: nowrap;
}
html body.pixel-workshop #panel-workflows#panel-workflows .sw-detail-actions .sw-btn { min-height: 44px !important; align-self: center; }
html[data-theme=light] body.pixel-workshop #panel-workflows#panel-workflows .sw-fold-meta { color: #92400e !important; }

/* Workflows hierarchy + breathing room · Audi 2026-10-23: "หน้าตายังออกแบบไม่ค่อยดีรึป่าว ดุอึดอัดไปหมด แล้วหัวข้อใหญ่เช่น 🎬 คลิป 5
   ทำไมน้ำหนักมันเหมือน [Stock Art / Short การเงิน / ...] เลย ได้ดูสกิลการทำเว็ปของเราจริงๆไหม".
   Skill W0.2 roles: index label → GROUP HEADING (🎬 คลิป, 📝 โพสต์ ...) → job rows → count. Two axes: size/weight + spacing/hairline.
   Index widened 260 → 300px so job names stop wrapping; the work area gets more padding and section gaps. */
@media (min-width: 1101px) {
  html body.pixel-workshop #panel-workflows#panel-workflows .sw-workbench { grid-template-columns: 300px minmax(0, 1fr) !important; }
}
html body.pixel-workshop #panel-workflows#panel-workflows .sw-selector { padding: 24px 20px 28px !important; }
html body.pixel-workshop #panel-workflows#panel-workflows .sw-workflow-detail { padding: 32px 36px 40px !important; }
/* Index label = small quiet kicker, not a competing heading */
html body.pixel-workshop #panel-workflows#panel-workflows .sw-selector > summary {
  font: 700 13px/1.4 var(--font-body) !important; color: var(--pw-soft) !important; letter-spacing: .02em; margin-bottom: 14px !important;
}
/* GROUP HEADING: bigger, heavier, ink, with a hairline and air above */
html body.pixel-workshop #panel-workflows#panel-workflows .sw-zone + .sw-zone { margin-top: 22px !important; padding-top: 18px; border-top: 1px solid var(--oa-hair); }
html body.pixel-workshop #panel-workflows#panel-workflows .sw-zone h2 {
  display: flex !important; align-items: center; gap: 10px; margin: 0 0 8px !important; padding: 0 !important;
  font: 800 18px/1.3 var(--font-head) !important; color: var(--pw-ink) !important;
}
html body.pixel-workshop #panel-workflows#panel-workflows .sw-zone h2 span:last-child {
  margin-left: auto; padding: 1px 9px; border-radius: 999px; background: color-mix(in srgb, var(--pw-edge) 30%, transparent);
  font: 700 13px/1.5 var(--font-body) !important; color: var(--pw-soft) !important;
}
/* JOB ROWS: lighter and smaller than the group heading, indented under it */
html body.pixel-workshop #panel-workflows#panel-workflows .sw-workflow-row {
  min-height: 40px !important; padding: 8px 10px 8px 14px !important; margin: 2px 0 !important; border-radius: 8px !important;
  font: 500 15px/1.35 var(--font-body) !important; color: var(--pw-soft) !important;
}
html body.pixel-workshop #panel-workflows#panel-workflows .sw-workflow-row strong { font-weight: 500 !important; color: inherit !important; }
html body.pixel-workshop #panel-workflows#panel-workflows .sw-workflow-row:is(:hover, :focus-visible) { color: var(--pw-ink) !important; background: color-mix(in srgb, var(--pw-edge) 18%, transparent) !important; }
html body.pixel-workshop #panel-workflows#panel-workflows .sw-workflow-row[aria-pressed="true"] strong { font-weight: 700 !important; }
/* Work area: air between the job header, actions, deliverables and the production route */
html body.pixel-workshop #panel-workflows#panel-workflows .sw-detail-actions { margin-top: 20px !important; gap: 12px !important; }
html body.pixel-workshop #panel-workflows#panel-workflows .sw-copy-note { margin: 12px 0 0 !important; }
html body.pixel-workshop #panel-workflows#panel-workflows .sp-delivery { margin-top: 44px !important; }
html body.pixel-workshop #panel-workflows#panel-workflows .sp-production { margin-top: 44px !important; }
html body.pixel-workshop #panel-workflows#panel-workflows .sw-output-list { gap: 16px 32px !important; margin-top: 16px !important; }
html body.pixel-workshop #panel-workflows#panel-workflows .sw-output-list li { line-height: 1.55 !important; font-size: 15px !important; }
html body.pixel-workshop #panel-workflows#panel-workflows :is(.sp-delivery, .sp-production) h3 { font: 800 22px/1.3 var(--font-head) !important; }

/* B = ONE gold button + text only · Audi 2026-10-23: "ก็ยังดูไม่ดีนะ ไอพวกปุ่มแบบนี้ 📋 คัดลอกบรีฟเริ่มงาน 🎞️ เก็บตัวอย่างที่ชอบ
   เราไม่ได้ตั้งกฎใหม่เรื่องปุ่มแล้วหรอ". The B he chose had no bordered secondary boxes; my "quiet bordered" role was an
   invention. Every secondary in-page action is now plain text (icon + label, soft ink, underline on hover), and the gold
   primary sits last in its row. Applies to Task, Content & Deals and Workflows. */
html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content, #panel-workflows#panel-workflows)
  :is(#refresh-all, #north-star-more-btn, .opening-pulse > button, .studio-copy, .cta-btn.is-main:not(.idea-save), .cta-btn.is-sub, .wk-strip-btn, .sw-btn:not(.is-primary)) {
  display: inline-flex !important; align-items: center; gap: 6px;
  min-height: 44px !important; padding: 10px 4px !important;
  border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; transform: none !important;
  color: var(--pw-soft) !important; font: 600 15px/1.2 var(--font-body) !important;
  transition: color 140ms ease, border-color 140ms ease !important;
}
html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content, #panel-workflows#panel-workflows)
  :is(#refresh-all, #north-star-more-btn, .opening-pulse > button, .studio-copy, .cta-btn.is-main:not(.idea-save), .cta-btn.is-sub, .wk-strip-btn, .sw-btn:not(.is-primary)):is(:hover, :focus-visible) {
  color: var(--pw-ink) !important; border-bottom-color: currentColor !important; background: none !important;
}
html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content, #panel-workflows#panel-workflows)
  :is(.studio-copy, .cta-btn.is-main:not(.idea-save)) { color: var(--pw-gold) !important; }
html body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content, #panel-workflows#panel-workflows)
  :is(#refresh-all, #north-star-more-btn, .opening-pulse > button, .studio-copy, .cta-btn, .wk-strip-btn, .sw-btn):disabled {
  color: rgba(199, 207, 223, 0.72) !important; border-bottom-color: transparent !important; cursor: not-allowed;
}
html[data-theme=light] body.pixel-workshop :is(#panel-tasks#panel-tasks, #panel-content#panel-content, #panel-workflows#panel-workflows) :is(#refresh-all, #north-star-more-btn, .opening-pulse > button, .studio-copy, .cta-btn, .wk-strip-btn, .sw-btn):disabled { color: rgba(41, 59, 83, 0.72) !important; }
/* Gold primary last in its row (B reading order: text actions first, the one action at the end) */
html body.pixel-workshop #panel-workflows#panel-workflows .sw-detail-actions { display: flex !important; flex-wrap: wrap; align-items: center; gap: 20px !important; }
html body.pixel-workshop #panel-workflows#panel-workflows .sw-detail-actions > .sw-btn.is-primary { order: 2; }
html body.pixel-workshop #panel-content#panel-content .cta-actions { gap: 16px !important; }
/* Copy-command chips sit in a row; text style needs a little gap instead of borders */
html body.pixel-workshop #panel-content#panel-content .studio-commands { gap: 4px 16px !important; }
/* Workflows reviewer fixes (2026-10-23 batch 3) */
/* Status note under the actions is information, not a control: plain soft text, no gold-edged box. */
html body.pixel-workshop #panel-workflows#panel-workflows .sw-copy-note {
  padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important;
  color: var(--pw-soft) !important; font: 500 14px/1.4 var(--font-body) !important;
}
/* A disabled save says why. */
html body.pixel-workshop #panel-workflows#panel-workflows .sw-btn:not(.is-primary):disabled::after { content: '· ต้องล็อกอินก่อน' !important; font: 500 13px/1.2 var(--font-body); margin-left: 6px; white-space: nowrap; }
html body.pixel-workshop #panel-workflows#panel-workflows .sw-btn:not(.is-primary):disabled { white-space: nowrap; }
@media (max-width: 760px) {
  /* Fold rows: title on its own line, meta + open hint on the second line, nothing collides. */
  html body.pixel-workshop #panel-workflows#panel-workflows .sw-fold > summary {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title title" "meta open"; gap: 4px 12px; align-items: center;
  }
  html body.pixel-workshop #panel-workflows#panel-workflows .sw-fold > summary .sw-fold-title { grid-area: title; white-space: normal; }
  html body.pixel-workshop #panel-workflows#panel-workflows .sw-fold > summary .sw-fold-meta { grid-area: meta; min-width: 0; }
  /* Step detail: smaller number badge column so the text gets the width. */
  html body.pixel-workshop #panel-workflows#panel-workflows .sp-step-readout { grid-template-columns: 1.75rem minmax(0, 1fr) !important; gap: .6rem !important; padding: .9rem .8rem !important; }
  html body.pixel-workshop #panel-workflows#panel-workflows .sw-workflow-detail { padding: 24px 16px 32px !important; }
}

/* Revenue & Money tab = Button Hierarchy B + W0.2 role map · Audi 2026-10-23: "รายได้หลัก คือเดียวจะทำ audit, 0dte trade,
   sponsored video รองคือ facebook revenue, รายได้อื่นๆ เช่น ขาย sticker, membership".
   Roles: page identity (opening) → section heading (💰 รายรับที่บันทึก · 📊 ภาพรวมการเงิน · 💎 ช่องทางรายได้) → TIER HEADING
   (👑 หลัก · 🌱 รอง · 🧩 อื่นๆ, 20px/800 + hairline) → stream rows (17px name, 15px soft detail) → status chip / record line.
   One gold primary (＋ เพิ่มช่องทาง, last in its row); everything else is text. Recorded facts stay above the plan (brief order). */
html body.pixel-workshop #panel-revenue#panel-revenue > .revenue-opening {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 28px !important;
  padding: 20px 24px !important; margin-bottom: 28px !important;
  border: 1px solid color-mix(in srgb, var(--pw-edge) 60%, transparent) !important; border-radius: 14px !important;
  background: color-mix(in srgb, var(--pw-panel) 93%, transparent) !important; box-shadow: 0 8px 22px rgba(4, 8, 18, 0.3) !important;
}
html body.pixel-workshop #panel-revenue#panel-revenue > .revenue-opening .opening-copy { padding: 0 !important; background: none !important; border: 0 !important; }
html body.pixel-workshop #panel-revenue#panel-revenue > .revenue-opening .desk-kicker { color: var(--pw-gold) !important; font-size: 14px !important; }
html body.pixel-workshop #panel-revenue#panel-revenue > .revenue-opening h1 { color: var(--pw-ink) !important; }
html body.pixel-workshop #panel-revenue#panel-revenue > .revenue-opening .revenue-lede { color: var(--pw-soft) !important; }
html body.pixel-workshop #panel-revenue#panel-revenue > .revenue-opening .pw-chapter-cast { grid-column: 2 !important; grid-row: 1 !important; padding-top: 26px !important; position: relative; }

/* Money overview: shortcuts are routes → text links, no boxes */
html body.pixel-workshop #panel-revenue#panel-revenue .bridge-shortcuts { display: flex !important; flex-wrap: wrap; gap: 4px 24px !important; padding-top: 12px; border-top: 1px solid var(--oa-hair); }
html body.pixel-workshop #panel-revenue#panel-revenue .bridge-shortcuts .bridge-route-btn {
  display: inline-flex !important; align-items: center; min-height: 44px !important; padding: 10px 2px !important;
  border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  color: var(--pw-gold) !important; font: 700 15px/1.2 var(--font-body) !important; transform: none !important;
}
html body.pixel-workshop #panel-revenue#panel-revenue .bridge-shortcuts .bridge-route-btn:is(:hover, :focus-visible) { border-bottom-color: currentColor !important; background: none !important; }

/* Streams header: title left, text reset then gold primary at the end */
html body.pixel-workshop #panel-revenue#panel-revenue .revenue-streams-head { display: flex !important; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
html body.pixel-workshop #panel-revenue#panel-revenue .revenue-actions { display: flex !important; align-items: center; gap: 20px !important; }
html body.pixel-workshop #panel-revenue#panel-revenue #btn-add-stream {
  display: inline-flex !important; align-items: center; gap: 8px; min-height: 44px !important; padding: 10px 18px !important;
  border: 0 !important; border-radius: 10px !important; background: linear-gradient(180deg, #e9b949 0%, #c48f22 100%) !important;
  color: #2a1a02 !important; font: 700 15px/1.2 var(--font-body) !important; box-shadow: 0 2px 0 #7a5410, 0 6px 14px rgba(0, 0, 0, 0.25) !important;
}
html body.pixel-workshop #panel-revenue#panel-revenue #btn-add-stream:is(:hover, :focus-visible) { filter: brightness(1.07); color: #2a1a02 !important; }
html body.pixel-workshop #panel-revenue#panel-revenue :is(#btn-reset-streams, .rev-text-btn, #btn-undo-stream) {
  display: inline-flex !important; align-items: center; gap: 6px; min-height: 44px !important; padding: 10px 2px !important;
  border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  color: var(--pw-soft) !important; font: 600 15px/1.2 var(--font-body) !important; cursor: pointer;
}
html body.pixel-workshop #panel-revenue#panel-revenue :is(#btn-reset-streams, .rev-text-btn, #btn-undo-stream):is(:hover, :focus-visible) { color: var(--pw-ink) !important; border-bottom-color: currentColor !important; }
html body.pixel-workshop #panel-revenue#panel-revenue .rev-text-btn.is-del { color: #f87171 !important; font-weight: 700 !important; }
html[data-theme=light] body.pixel-workshop #panel-revenue#panel-revenue .rev-text-btn.is-del { color: #b91c1c !important; }

/* Tier groups (replace the equal-weight card wall) */
html body.pixel-workshop #panel-revenue#panel-revenue #orbit-satellites-container {
  display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; margin-top: 16px;
  padding: 8px 24px 16px !important; border: 1px solid color-mix(in srgb, var(--pw-edge) 60%, transparent) !important; border-radius: 14px !important;
  background: color-mix(in srgb, var(--pw-panel) 93%, transparent) !important;
}
html body.pixel-workshop #panel-revenue#panel-revenue .rev-tier { padding: 18px 0 8px; }
html body.pixel-workshop #panel-revenue#panel-revenue .rev-tier + .rev-tier { border-top: 1px solid var(--oa-hair); }
html body.pixel-workshop #panel-revenue#panel-revenue .rev-tier-head {
  display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; font: 800 20px/1.3 var(--font-head); color: var(--pw-ink);
}
html body.pixel-workshop #panel-revenue#panel-revenue .rev-tier-count { font: 600 13px/1.4 var(--font-body); color: var(--pw-soft); }
html body.pixel-workshop #panel-revenue#panel-revenue .rev-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--pw-edge) 30%, transparent);
}
html body.pixel-workshop #panel-revenue#panel-revenue .rev-row:last-child { border-bottom: 0; }
html body.pixel-workshop #panel-revenue#panel-revenue .rev-icon { font-size: 26px; line-height: 1.2; text-align: center; }
html body.pixel-workshop #panel-revenue#panel-revenue .rev-title-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
html body.pixel-workshop #panel-revenue#panel-revenue .rev-title { margin: 0; font: 700 17px/1.35 var(--font-head); color: var(--pw-ink); }
html body.pixel-workshop #panel-revenue#panel-revenue .rev-status { padding: 2px 9px; border-radius: 999px; font: 700 12px/1.5 var(--font-body); }
html body.pixel-workshop #panel-revenue#panel-revenue .rev-status.is-active { background: rgba(16, 185, 129, 0.14); border: 1px solid rgba(16, 185, 129, 0.6); color: var(--pw-ink); }
html body.pixel-workshop #panel-revenue#panel-revenue .rev-status.is-upcoming { background: rgba(245, 158, 11, 0.14); border: 1px solid #f59e0b; color: var(--pw-ink); }
html body.pixel-workshop #panel-revenue#panel-revenue .rev-desc { margin: 4px 0 0; font: 500 15px/1.5 var(--font-body); color: var(--pw-soft); }
html body.pixel-workshop #panel-revenue#panel-revenue .rev-record { margin: 6px 0 0; font: 500 14px/1.5 var(--font-body); color: var(--pw-soft); }
html body.pixel-workshop #panel-revenue#panel-revenue .rev-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
html body.pixel-workshop #panel-revenue#panel-revenue .rev-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 2px; border-bottom: 2px solid transparent;
  color: var(--pw-gold) !important; font: 700 15px/1.2 var(--font-body); text-decoration: none;
}
html body.pixel-workshop #panel-revenue#panel-revenue .rev-link:is(:hover, :focus-visible) { border-bottom-color: currentColor; }
html body.pixel-workshop #panel-revenue#panel-revenue .rev-empty { margin: 4px 0 8px; color: var(--pw-soft); font-size: 14px; }
html body.pixel-workshop #panel-revenue#panel-revenue #stream-notice { margin: 12px 0 0; color: var(--pw-soft); }
@media (max-width: 760px) {
  html body.pixel-workshop #panel-revenue#panel-revenue #orbit-satellites-container { padding: 4px 16px 12px !important; }
  html body.pixel-workshop #panel-revenue#panel-revenue .rev-row { grid-template-columns: 32px minmax(0, 1fr); }
  html body.pixel-workshop #panel-revenue#panel-revenue .rev-actions { grid-column: 2; justify-content: flex-start; }
  html body.pixel-workshop #panel-revenue#panel-revenue > .revenue-opening { padding: 16px !important; }
}
/* Revenue: the money overview and the channels header also sat on the scene (light-theme pixel sweep 1.4–4.3:1). Same plate rule. */
html body.pixel-workshop #panel-revenue#panel-revenue :is(.revenue-money-bridge, .revenue-streams-head) {
  padding: 20px 24px !important; border: 1px solid color-mix(in srgb, var(--pw-edge) 60%, transparent) !important; border-radius: 14px !important;
  background: color-mix(in srgb, var(--pw-panel) 93%, transparent) !important; box-shadow: 0 8px 22px rgba(4, 8, 18, 0.28) !important;
}
html body.pixel-workshop #panel-revenue#panel-revenue .revenue-money-bridge { margin-bottom: 28px !important; }
html body.pixel-workshop #panel-revenue#panel-revenue .revenue-streams-head { margin-bottom: 0 !important; border-radius: 14px 14px 0 0 !important; border-bottom: 0 !important; box-shadow: none !important; }
html body.pixel-workshop #panel-revenue#panel-revenue .revenue-streams-head + #stream-notice + #orbit-satellites-container,
html body.pixel-workshop #panel-revenue#panel-revenue .revenue-streams-head ~ #orbit-satellites-container { margin-top: 0 !important; border-radius: 0 0 14px 14px !important; border-top: 1px solid var(--oa-hair) !important; }
html body.pixel-workshop #panel-revenue#panel-revenue .revenue-streams-head :is(h2) { color: var(--pw-ink) !important; }
html body.pixel-workshop #panel-revenue#panel-revenue .revenue-streams-head p { color: var(--pw-soft) !important; }

/* Revenue reviewer fixes (2026-10-23): reset kept away from the primary and quieter; delete wins its red; tiers outweigh rows. */
html body.pixel-workshop #panel-revenue#panel-revenue .revenue-actions { gap: 28px !important; }
html body.pixel-workshop #panel-revenue#panel-revenue .revenue-actions #btn-reset-streams { font-size: 13px !important; font-weight: 500 !important; min-height: 44px !important; padding: 10px 2px !important; }
html body.pixel-workshop #panel-revenue#panel-revenue #orbit-satellites-container .rev-text-btn.is-del { color: #f87171 !important; font-weight: 700 !important; }
html[data-theme=light] body.pixel-workshop #panel-revenue#panel-revenue #orbit-satellites-container .rev-text-btn.is-del { color: #b91c1c !important; }
html body.pixel-workshop #panel-revenue#panel-revenue .rev-tier-head { font-size: 22px !important; }
html body.pixel-workshop #panel-revenue#panel-revenue .rev-title { font-size: 16px !important; }

/* 💳 รายจ่ายประจำ (Revenue tab) · Audi 2026-10-23. Outflow amounts in the expense red, zero/missing neutral; AI grouped first. */
html body.pixel-workshop #panel-revenue#panel-revenue .revenue-subscriptions {
  margin-top: 28px; padding: 20px 24px !important; border: 1px solid color-mix(in srgb, var(--pw-edge) 60%, transparent); border-radius: 14px;
  background: color-mix(in srgb, var(--pw-panel) 93%, transparent); box-shadow: 0 8px 22px rgba(4, 8, 18, 0.28);
}
html body.pixel-workshop #panel-revenue#panel-revenue .subs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--oa-hair); }
html body.pixel-workshop #panel-revenue#panel-revenue .subs-head h2 { margin: 0; color: var(--pw-ink); }
html body.pixel-workshop #panel-revenue#panel-revenue .subs-head p { margin: 4px 0 0; color: var(--pw-soft); font-size: 15px; }
html body.pixel-workshop #panel-revenue#panel-revenue .subs-link { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 2px; border-bottom: 2px solid transparent; color: var(--pw-gold); font: 700 15px/1.2 var(--font-body); text-decoration: none; }
html body.pixel-workshop #panel-revenue#panel-revenue .subs-link:is(:hover, :focus-visible) { border-bottom-color: currentColor; }
html body.pixel-workshop #panel-revenue#panel-revenue .subs-summary { display: flex; gap: 48px; flex-wrap: wrap; padding: 18px 0; border-bottom: 1px solid var(--oa-hair); }
html body.pixel-workshop #panel-revenue#panel-revenue .subs-summary > div { display: grid; gap: 2px; }
html body.pixel-workshop #panel-revenue#panel-revenue .subs-label { font: 600 14px/1.4 var(--font-body); color: var(--pw-soft); }
html body.pixel-workshop #panel-revenue#panel-revenue :is(.subs-total, .subs-ai) { font: 800 30px/1.2 var(--font-head); color: #fca5a5; }
html body.pixel-workshop #panel-revenue#panel-revenue .subs-ai { font-size: 24px; }
html body.pixel-workshop #panel-revenue#panel-revenue .subs-summary small { font: 500 14px/1.4 var(--font-body); color: var(--pw-soft); }
html body.pixel-workshop #panel-revenue#panel-revenue .subs-group { padding: 16px 0 4px; }
html body.pixel-workshop #panel-revenue#panel-revenue .subs-group + .subs-group { border-top: 1px solid var(--oa-hair); }
html body.pixel-workshop #panel-revenue#panel-revenue .subs-group-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; font: 800 20px/1.3 var(--font-head); color: var(--pw-ink); }
html body.pixel-workshop #panel-revenue#panel-revenue .subs-group-sum { font: 700 14px/1.4 var(--font-body); color: var(--pw-soft); }
html body.pixel-workshop #panel-revenue#panel-revenue .subs-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--pw-edge) 30%, transparent); }
html body.pixel-workshop #panel-revenue#panel-revenue .subs-row:last-child { border-bottom: 0; }
html body.pixel-workshop #panel-revenue#panel-revenue .subs-name { display: block; font: 700 16px/1.35 var(--font-head); color: var(--pw-ink); }
html body.pixel-workshop #panel-revenue#panel-revenue .subs-meta { display: block; font: 500 14px/1.4 var(--font-body); color: var(--pw-soft); }
html body.pixel-workshop #panel-revenue#panel-revenue .subs-amount { font: 800 17px/1.2 var(--font-head); color: #fca5a5; white-space: nowrap; }
html body.pixel-workshop #panel-revenue#panel-revenue .subs-empty { margin: 14px 0 4px; color: var(--pw-soft); }
html[data-theme=light] body.pixel-workshop #panel-revenue#panel-revenue :is(.subs-total, .subs-ai, .subs-amount) { color: #b91c1c; }
@media (max-width: 760px) {
  html body.pixel-workshop #panel-revenue#panel-revenue .revenue-subscriptions { padding: 16px !important; }
  html body.pixel-workshop #panel-revenue#panel-revenue .subs-summary { gap: 18px; }
}
html body.pixel-workshop #panel-revenue#panel-revenue .subs-amount { color: var(--pw-ink) !important; }
html body.pixel-workshop #panel-revenue#panel-revenue .subs-row.is-yearly .subs-meta { color: var(--pw-gold) !important; font-weight: 600; }

/* Studio tab strip: text never sits on the pixel city (Audi 2026-10-23 "อ่านยากเพราะมันโปร่งแสงไปไหมพื้นหลัง").
   Each tab's title + subline gets its own opaque plate; the scene stays visible around it. */
html body.pixel-workshop .cockpit-tab-btn .cockpit-tab-text{padding:3px 8px;border-radius:7px;background:color-mix(in srgb,var(--pw-panel) 90%,transparent)}
@media (max-width:760px){html body.pixel-workshop .cockpit-tab-btn .cockpit-tab-text{padding:2px 4px;min-width:0;flex:1 1 auto}}