/* ═══════════════════════════════════════════════════════════════
Merch Troop Portal v3 — Dashboard
═══════════════════════════════════════════════════════════════ */
:root {
--bg: #070911;
--bg-2: #0c0f1a;
--surface: #131826;
--surface-2: #1a2034;
--surface-hi: #202743;
--border: rgba(255, 255, 255, 0.06);
--border-hi: rgba(255, 255, 255, 0.12);
--text: #eef3ff;
--text-2: #b4becf;
--muted: rgba(238, 243, 255, 0.55);
/* Brand stays orange; mint added as secondary accent borrowed from marketing site */
--brand: #ff9100;
--brand-2: #ff5a00;
--accent: #71f6da;
--accent-glow: rgba(113, 246, 218, 0.35);
--accent-3: #a78bfa;
--red: #ef4444;
--yellow: #f59e0b;
--blue: #3b82f6;
--indigo: #6366f1;
--purple: #a855f7;
--green: #22c55e;
--r: 14px;
--r-sm: 8px;
--ease: cubic-bezier(0.2, 0.9, 0.2, 1);
--shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px rgba(0, 0, 0, 0.25);
}
/* Live Studio */
.live-shell {
display: grid;
gap: 16px;
}
.live-hero-panel,
.live-admin-hero,
.live-queue-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 22px;
border: 1px solid var(--border);
border-radius: 8px;
background:
linear-gradient(135deg, rgba(255,122,26,.16), rgba(56,189,248,.08)),
rgba(255,255,255,.035);
}
.live-hero-panel h2,
.live-admin-hero h2,
.live-queue-head h2 {
margin: 0;
font-size: 28px;
line-height: 1.05;
letter-spacing: 0;
}
.live-hero-panel p,
.live-admin-hero p,
.live-queue-head p {
margin: 8px 0 0;
color: var(--muted);
font-size: 13px;
}
.live-admin-hero {
color: var(--live-text);
background:
radial-gradient(circle at 16% 22%, color-mix(in srgb, var(--live-primary), transparent 70%), transparent 34%),
linear-gradient(135deg, var(--live-bg), color-mix(in srgb, var(--live-accent), #111827 76%));
}
.live-home-grid,
.live-admin-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
gap: 16px;
}
.live-readiness-strip,
.live-queue-metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
gap: 10px;
}
.live-readiness-strip div,
.live-queue-metrics div {
min-width: 0;
padding: 12px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 8px;
background: rgba(255,255,255,.04);
}
.live-readiness-strip span,
.live-queue-metrics span {
display: block;
color: var(--muted);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0;
}
.live-readiness-strip b,
.live-queue-metrics b {
display: block;
margin-top: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text);
font-size: 14px;
}
.live-readiness-strip .ok {
border-color: rgba(34,197,94,.25);
}
.live-readiness-strip .warn {
border-color: rgba(245,158,11,.32);
}
.live-admin-grid .wide {
grid-column: 1 / -1;
}
.live-panel {
min-width: 0;
padding: 16px;
border: 1px solid var(--border);
border-radius: 8px;
background: rgba(255,255,255,.035);
}
.live-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.live-panel-head b {
display: block;
font-size: 14px;
color: var(--text);
}
.live-panel-head span,
.live-muted {
display: block;
margin-top: 3px;
color: var(--muted);
font-size: 12px;
}
.live-event-list,
.live-launch-stack,
.live-products,
.live-lane-list {
display: grid;
gap: 10px;
}
.live-event-card,
.live-launch-link,
.live-order-card {
display: grid;
gap: 10px;
padding: 12px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 8px;
background: rgba(0,0,0,.18);
text-decoration: none;
color: var(--text);
}
.live-event-card b,
.live-launch-link b,
.live-order-card b {
display: block;
font-size: 13px;
}
.live-event-card span,
.live-launch-link span {
color: var(--muted);
font-size: 12px;
}
.live-card-stats,
.live-card-actions,
.live-admin-actions,
.live-order-actions,
.live-order-paths {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.live-card-stats span,
.live-order-paths span {
padding: 4px 8px;
border-radius: 999px;
background: rgba(255,255,255,.06);
color: var(--text-2);
font-size: 11px;
}
.live-order-route {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.live-order-route span {
padding: 5px 8px;
border-radius: 8px;
background: rgba(255,255,255,.06);
color: var(--text-2);
font-size: 11px;
}
.live-order-route .ok {
color: #bbf7d0;
background: rgba(34,197,94,.15);
}
.live-order-route .warn {
color: #fde68a;
background: rgba(245,158,11,.15);
}
.live-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.live-form-grid label,
.live-kiosk-builder label {
display: grid;
gap: 6px;
color: var(--muted);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0;
}
.live-form-grid label.wide {
grid-column: 1 / -1;
}
.live-form-grid input,
.live-form-grid select,
.live-product-row input,
.live-product-row select,
.live-upload-row input,
.live-kiosk-builder input,
.live-kiosk-builder select,
.live-card-machine {
width: 100%;
min-width: 0;
border: 1px solid rgba(255,255,255,.1);
border-radius: 8px;
background: rgba(0,0,0,.24);
color: var(--text);
padding: 10px 11px;
font: inherit;
font-size: 13px;
}
.live-form-grid input[type="color"],
.live-upload-row input[type="color"] {
height: 40px;
padding: 3px;
}
.live-check {
align-content: center;
grid-template-columns: 18px minmax(0, 1fr);
grid-auto-flow: column;
text-transform: none !important;
letter-spacing: 0 !important;
color: var(--text-2) !important;
}
.live-check input {
width: 16px;
height: 16px;
padding: 0;
}
.live-product-row {
display: grid;
grid-template-columns: minmax(150px, 1.1fr) 150px minmax(110px, .8fr) minmax(110px, .8fr) 90px minmax(120px, .8fr) auto;
gap: 8px;
align-items: center;
}
.live-asset-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.live-asset-chip {
min-width: 120px;
padding: 9px 10px;
border: 1px solid rgba(255,255,255,.1);
border-radius: 8px;
background: rgba(0,0,0,.2);
}
.live-asset-chip b,
.live-asset-chip span {
display: block;
}
.live-asset-chip span {
margin-top: 3px;
color: var(--muted);
font-size: 11px;
}
.live-upload-row {
display: grid;
grid-template-columns: minmax(110px, 1fr) minmax(100px, .8fr) 64px minmax(160px, 1fr) auto;
gap: 8px;
}
.live-kiosk {
position: relative;
isolation: isolate;
min-height: calc(100vh - 40px);
padding: clamp(18px, 2.4vw, 32px);
overflow: hidden;
color: var(--live-text);
background:
linear-gradient(135deg, color-mix(in srgb, var(--live-bg), #000 4%), color-mix(in srgb, var(--live-accent), #020617 82%));
}
.live-kiosk::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background:
linear-gradient(90deg, rgba(0,0,0,.76), rgba(0,0,0,.34) 42%, rgba(0,0,0,.72)),
url('/img/live-production.jpg') center / cover;
opacity: .48;
}
.live-kiosk::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(180deg, rgba(255,255,255,.12), transparent 24%),
radial-gradient(circle at 28% 18%, color-mix(in srgb, var(--live-primary), transparent 58%), transparent 28%),
radial-gradient(circle at 86% 78%, color-mix(in srgb, var(--live-accent), transparent 72%), transparent 34%);
pointer-events: none;
}
.live-kiosk-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: clamp(18px, 2.5vw, 28px);
}
.live-kiosk-brand {
display: flex;
align-items: center;
gap: 16px;
min-width: 0;
}
.live-kiosk-brand img {
width: 58px;
height: 58px;
object-fit: contain;
padding: 8px;
border: 1px solid rgba(255,255,255,.16);
border-radius: 8px;
background: rgba(255,255,255,.9);
}
.live-kiosk-top h1 {
margin: 0;
max-width: 840px;
font-size: clamp(32px, 4.7vw, 72px);
line-height: .94;
letter-spacing: 0;
}
.live-kiosk-top p {
margin: 8px 0 0;
color: color-mix(in srgb, var(--live-text), transparent 22%);
font-size: 15px;
}
.live-kiosk-statusbar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
color: color-mix(in srgb, var(--live-text), transparent 18%);
font-size: 12px;
}
.live-kiosk-statusbar span,
.live-kiosk-statusbar a {
min-height: 34px;
display: inline-flex;
align-items: center;
padding: 7px 10px;
border: 1px solid rgba(255,255,255,.16);
border-radius: 8px;
background: rgba(0,0,0,.24);
color: inherit;
text-decoration: none;
}
.live-kiosk-stage {
display: grid;
grid-template-columns: minmax(440px, 1.08fr) minmax(360px, 520px);
gap: clamp(16px, 2vw, 24px);
align-items: stretch;
}
.live-kiosk-builder,
.live-kiosk-preview-panel {
border: 1px solid rgba(255,255,255,.16);
border-radius: 8px;
background: rgba(6,8,14,.72);
box-shadow: 0 28px 90px rgba(0,0,0,.34);
backdrop-filter: blur(22px);
}
.live-kiosk-builder {
display: grid;
gap: 12px;
align-self: start;
padding: 14px;
max-height: calc(100vh - 158px);
overflow: auto;
}
.live-kiosk-hidden {
display: none;
}
.live-stepper {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.live-stepper span {
display: flex;
align-items: center;
justify-content: center;
min-height: 34px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 8px;
background: rgba(255,255,255,.06);
color: color-mix(in srgb, var(--live-text), transparent 28%);
font-size: 12px;
font-weight: 800;
}
.live-stepper span.active {
color: #061016;
background: var(--live-accent);
border-color: transparent;
}
.live-control-section {
display: grid;
gap: 10px;
padding: 12px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 8px;
background: rgba(255,255,255,.055);
}
.live-section-title {
display: flex;
align-items: center;
gap: 10px;
}
.live-section-title > span {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--live-primary);
color: #070911;
font-weight: 900;
}
.live-section-title b,
.live-section-title small {
display: block;
}
.live-section-title b {
font-size: 14px;
}
.live-section-title small {
margin-top: 2px;
color: color-mix(in srgb, var(--live-text), transparent 38%);
font-size: 11px;
line-height: 1.25;
}
.live-product-picker,
.live-art-picker {
display: grid;
gap: 8px;
}
.live-product-option,
.live-art-tile,
.live-color-chip,
.live-size-chip,
.live-placement-pad button {
border: 1px solid rgba(255,255,255,.13);
border-radius: 8px;
background: rgba(255,255,255,.06);
color: var(--live-text);
font: inherit;
letter-spacing: 0;
}
.live-product-option {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
min-height: 66px;
padding: 9px;
text-align: left;
}
.live-product-option.active,
.live-art-tile.active,
.live-color-chip.active,
.live-size-chip.active {
border-color: color-mix(in srgb, var(--live-accent), #fff 18%);
background: color-mix(in srgb, var(--live-accent), transparent 84%);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--live-accent), transparent 52%) inset;
}
.live-product-icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 8px;
background: color-mix(in srgb, var(--live-primary), transparent 18%);
color: #071018;
font-size: 19px;
font-weight: 950;
}
.live-product-option b,
.live-product-option small {
display: block;
}
.live-product-option b {
font-size: 14px;
}
.live-product-option small {
color: color-mix(in srgb, var(--live-text), transparent 38%);
font-size: 11px;
}
.live-product-swatches {
display: flex;
gap: 3px;
}
.live-product-swatches i,
.live-color-chip i {
display: block;
border: 1px solid rgba(255,255,255,.48);
border-radius: 50%;
}
.live-product-swatches i {
width: 12px;
height: 12px;
}
.live-choice-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.live-color-chip,
.live-size-chip {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 8px 10px;
gap: 7px;
font-size: 12px;
font-weight: 800;
}
.live-color-chip i {
width: 18px;
height: 18px;
}
.live-choice-row.compact .live-size-chip {
min-width: 46px;
justify-content: center;
}
.live-art-picker {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.live-art-tile {
display: grid;
grid-template-columns: 54px minmax(0, 1fr);
gap: 9px;
align-items: center;
min-height: 70px;
padding: 8px;
text-align: left;
}
.live-art-tile span,
.live-art-tile img {
display: grid;
place-items: center;
width: 54px;
height: 54px;
border-radius: 8px;
object-fit: contain;
color: #fff;
font-weight: 950;
font-size: 16px;
box-shadow: 0 10px 24px rgba(0,0,0,.26);
}
.live-art-tile b {
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
white-space: nowrap;
}
.live-personalize {
display: grid;
gap: 6px;
color: color-mix(in srgb, var(--live-text), transparent 34%);
font-size: 11px;
text-transform: uppercase;
}
.live-personalize input,
.live-proof-card input {
min-height: 44px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 8px;
background: rgba(0,0,0,.28);
color: var(--live-text);
padding: 11px 12px;
font: inherit;
font-size: 15px;
}
.live-placement-pad {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr)) repeat(2, 44px);
gap: 7px;
}
.live-placement-pad button {
min-height: 38px;
font-size: 13px;
font-weight: 900;
}
.live-kiosk-pair {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.live-submit {
min-height: 54px;
justify-content: center;
font-size: 15px;
}
.live-kiosk-preview-panel {
display: grid;
grid-template-rows: minmax(540px, 1fr) auto;
gap: 12px;
padding: clamp(12px, 1.7vw, 18px);
}
.live-kiosk-preview {
position: relative;
min-height: min(68vh, 740px);
overflow: hidden;
border-radius: 8px;
background:
linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.04)),
radial-gradient(circle at 50% 30%, rgba(255,255,255,.14), transparent 36%),
rgba(3,6,12,.48);
}
.live-preview-light {
position: absolute;
inset: 9% 14% auto;
height: 28%;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,.28), transparent 68%);
filter: blur(8px);
}
.live-product-mockup {
position: absolute;
inset: 11% 12% 7%;
filter: drop-shadow(0 36px 54px rgba(0,0,0,.42));
}
.live-product-mockup .mock-shadow {
position: absolute;
left: 18%;
right: 18%;
bottom: 2%;
height: 9%;
border-radius: 50%;
background: rgba(0,0,0,.38);
filter: blur(14px);
}
.live-product-mockup .mock-body {
position: absolute;
inset: 0;
}
.live-product-mockup.tee .mock-body {
background:
linear-gradient(90deg, rgba(255,255,255,.11), transparent 22% 78%, rgba(0,0,0,.2)),
radial-gradient(circle at 52% 12%, rgba(255,255,255,.16), transparent 10%),
var(--product-color, #1f2937);
clip-path: polygon(34% 0, 66% 0, 76% 9%, 96% 18%, 87% 35%, 76% 31%, 76% 98%, 24% 98%, 24% 31%, 13% 35%, 4% 18%, 24% 9%);
}
.live-product-mockup.tee .mock-collar {
position: absolute;
left: 42%;
top: 2%;
width: 16%;
height: 8%;
border: 3px solid rgba(255,255,255,.28);
border-top: 0;
border-radius: 0 0 50% 50%;
}
.live-product-mockup.tee .mock-seam {
position: absolute;
top: 25%;
bottom: 9%;
width: 1px;
background: rgba(255,255,255,.12);
}
.live-product-mockup.tee .mock-seam.a { left: 29%; }
.live-product-mockup.tee .mock-seam.b { right: 29%; }
.live-product-mockup.tumbler {
inset: 10% 27% 6%;
}
.live-product-mockup.tumbler .mock-body {
border-radius: 36% / 8%;
background:
linear-gradient(90deg, rgba(255,255,255,.4), rgba(255,255,255,.08) 15%, transparent 34%, rgba(0,0,0,.34) 100%),
var(--product-color, #111318);
}
.live-product-mockup.tumbler .mock-top,
.live-product-mockup.tumbler .mock-bottom {
position: absolute;
left: 0;
right: 0;
height: 15%;
border-radius: 50%;
background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.08));
border: 1px solid rgba(255,255,255,.22);
}
.live-product-mockup.tumbler .mock-top { top: -2%; }
.live-product-mockup.tumbler .mock-bottom { bottom: -2%; }
.live-product-mockup.tote {
inset: 13% 20% 7%;
}
.live-product-mockup.tote .mock-body {
top: 18%;
border-radius: 8px 8px 22px 22px;
background:
linear-gradient(90deg, rgba(255,255,255,.18), transparent 42%, rgba(0,0,0,.13)),
var(--product-color, #ded3bd);
}
.live-product-mockup.tote .mock-handle {
position: absolute;
left: 28%;
top: 0;
width: 44%;
height: 31%;
border: 13px solid color-mix(in srgb, var(--product-color, #ded3bd), #000 10%);
border-bottom: 0;
border-radius: 48% 48% 0 0;
}
.live-product-mockup.hat {
inset: 24% 15% 20%;
}
.live-product-mockup.hat .mock-body {
border-radius: 52% 52% 18% 18%;
background:
linear-gradient(90deg, rgba(255,255,255,.16), transparent 54%, rgba(0,0,0,.22)),
var(--product-color, #1f2937);
}
.live-product-mockup.hat .mock-bottom {
position: absolute;
left: 16%;
right: 16%;
bottom: -13%;
height: 24%;
border-radius: 50%;
background: color-mix(in srgb, var(--product-color, #1f2937), #000 12%);
}
.live-print-zone {
position: absolute;
left: 33%;
top: 24%;
width: 34%;
height: 36%;
border: 1px dashed rgba(255,255,255,.36);
border-radius: 8px;
background: rgba(255,255,255,.035);
}
.live-kiosk-preview[data-product-kind="tumbler"] .live-print-zone {
left: 41%;
top: 27%;
width: 18%;
height: 40%;
}
.live-kiosk-preview[data-product-kind="tote"] .live-print-zone {
left: 31%;
top: 37%;
width: 38%;
height: 32%;
}
.live-kiosk-preview[data-product-kind="hat"] .live-print-zone {
left: 34%;
top: 38%;
width: 32%;
height: 21%;
}
.live-preview-art {
position: absolute;
left: var(--live-x, 43%);
top: var(--live-y, 36%);
transform: translate(-50%, -50%) scale(var(--live-scale, 1));
display: grid;
justify-items: center;
gap: 11px;
min-width: 160px;
}
.live-preview-mark {
display: grid;
place-items: center;
}
.live-preview-badge,
.live-preview-image {
width: clamp(112px, 15vw, 170px);
height: clamp(112px, 15vw, 170px);
border-radius: 50%;
object-fit: contain;
box-shadow: 0 18px 38px rgba(0,0,0,.28);
}
.live-preview-badge {
display: grid;
place-items: center;
color: #fff;
font-weight: 950;
font-size: clamp(30px, 4vw, 48px);
}
.live-preview-image {
padding: 5px;
background: rgba(255,255,255,.9);
}
.live-preview-text {
min-height: 34px;
color: var(--live-text);
font-size: clamp(24px, 3.6vw, 38px);
line-height: 1;
font-weight: 950;
text-align: center;
text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.live-proof-tag {
position: absolute;
left: 16px;
top: 16px;
padding: 7px 10px;
border: 1px solid rgba(255,255,255,.18);
border-radius: 8px;
background: rgba(0,0,0,.28);
color: color-mix(in srgb, var(--live-text), transparent 18%);
font-size: 12px;
font-weight: 800;
}
.live-kiosk-meta,
.live-kiosk-result {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
min-height: 42px;
color: color-mix(in srgb, var(--live-text), transparent 18%);
}
.live-kiosk-meta b {
font-size: 14px;
}
.live-kiosk-result {
justify-content: flex-start;
border-top: 1px solid rgba(255,255,255,.1);
padding-top: 10px;
}
.live-kiosk-result b {
color: var(--live-accent);
font-size: 18px;
}
.live-queue-board {
display: grid;
grid-template-columns: repeat(6, minmax(240px, 1fr));
gap: 12px;
overflow-x: auto;
padding-bottom: 8px;
}
.live-queue-lane {
min-height: 420px;
padding: 10px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 8px;
background: rgba(255,255,255,.03);
}
.live-lane-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.live-lane-head b {
font-size: 13px;
}
.live-lane-head span {
color: var(--muted);
font-size: 12px;
}
.live-order-top {
display: grid;
grid-template-columns: minmax(0, 1fr) 132px;
gap: 8px;
}
.live-order-top span,
.live-order-meta span {
display: block;
color: var(--muted);
font-size: 12px;
}
.live-order-preview {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 8px;
background: rgba(255,255,255,.04);
}
.live-order-meta {
display: grid;
gap: 3px;
}
.live-hot-path {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--muted);
font-size: 10.5px;
border-top: 1px solid rgba(255,255,255,.08);
padding-top: 8px;
}
.live-empty-lane {
display: grid;
place-items: center;
min-height: 84px;
color: var(--muted);
font-size: 12px;
border: 1px dashed rgba(255,255,255,.1);
border-radius: 8px;
}
.live-line-public-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(340px, 480px);
gap: clamp(16px, 2vw, 24px);
align-items: stretch;
}
.live-line-ticket-panel,
.live-line-form,
.live-line-status-card {
border: 1px solid rgba(255,255,255,.16);
border-radius: 8px;
background: rgba(6,8,14,.72);
box-shadow: 0 28px 90px rgba(0,0,0,.34);
backdrop-filter: blur(22px);
}
.live-line-ticket-panel {
display: grid;
align-content: space-between;
gap: 18px;
min-height: 480px;
padding: clamp(18px, 2.6vw, 32px);
}
.live-line-ticket-panel h2 {
max-width: 760px;
margin: 0;
color: var(--live-text);
font-size: clamp(30px, 4vw, 62px);
line-height: .98;
letter-spacing: 0;
}
.live-line-plain {
max-width: 720px;
color: color-mix(in srgb, var(--live-text), transparent 24%);
font-size: clamp(17px, 1.8vw, 24px);
line-height: 1.34;
}
.live-line-proof-points {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.live-line-proof-points span {
padding: 9px 11px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 8px;
background: rgba(255,255,255,.07);
color: color-mix(in srgb, var(--live-text), transparent 18%);
font-size: 12px;
font-weight: 900;
}
.live-line-small {
width: fit-content;
padding: 8px 10px;
border: 1px solid rgba(255,255,255,.16);
border-radius: 8px;
background: rgba(255,255,255,.08);
color: color-mix(in srgb, var(--live-text), transparent 18%);
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
}
.live-line-form {
display: grid;
align-content: start;
gap: 12px;
padding: clamp(16px, 2vw, 22px);
}
.live-line-form.single {
max-width: 520px;
margin: 12vh auto 0;
}
.live-line-form h2 {
margin: 0 0 8px;
font-size: clamp(28px, 4vw, 48px);
letter-spacing: 0;
}
.live-line-form p {
color: color-mix(in srgb, var(--live-text), transparent 26%);
line-height: 1.5;
}
.live-line-form label {
display: grid;
gap: 7px;
color: color-mix(in srgb, var(--live-text), transparent 34%);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
}
.live-line-form input {
min-height: 50px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 8px;
background: rgba(0,0,0,.28);
color: var(--live-text);
padding: 12px;
font: inherit;
font-size: 16px;
}
.live-join-primary {
min-height: 62px;
font-size: 17px;
}
.live-check-link {
justify-content: center;
}
.live-muted-field {
display: none !important;
}
.live-line-form .live-kiosk-result a {
color: var(--live-accent);
}
.live-line-capacity {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.live-line-capacity > div,
.live-line-command,
.live-display-side > div {
border: 1px solid rgba(255,255,255,.09);
border-radius: 8px;
background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
}
.live-line-capacity > div {
display: grid;
gap: 4px;
min-height: 124px;
padding: 16px;
}
.live-line-capacity span,
.live-display-side span,
.live-display-now span {
color: var(--muted);
font-size: 11px;
font-weight: 900;
letter-spacing: 0;
text-transform: uppercase;
}
.live-line-capacity b {
font-size: clamp(28px, 4vw, 48px);
line-height: .95;
letter-spacing: 0;
}
.live-line-capacity small {
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.health-green { border-color: rgba(34,197,94,.28) !important; }
.health-yellow { border-color: rgba(250,204,21,.34) !important; }
.health-red { border-color: rgba(239,68,68,.42) !important; }
.health-green b { color: #86efac; }
.health-yellow b { color: #fde047; }
.health-red b { color: #fca5a5; }
.live-line-command {
display: grid;
grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
gap: 14px;
padding: 14px;
}
.live-line-wave-box,
.live-line-manual-box {
display: grid;
grid-template-columns: minmax(120px, 1fr) auto;
gap: 10px;
align-items: end;
}
.live-line-wave-box small {
grid-column: 1 / -1;
color: var(--muted);
font-size: 12px;
}
.live-line-manual-box {
grid-template-columns: minmax(140px, 1fr) 90px auto;
}
.live-line-command label {
display: grid;
gap: 6px;
color: var(--muted);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
}
.live-line-command input {
min-height: 42px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 8px;
background: rgba(0,0,0,.18);
color: var(--text);
padding: 10px;
font: inherit;
}
.live-line-status-card {
display: grid;
grid-template-columns: minmax(210px, 30%) minmax(0, 1fr);
min-height: 480px;
overflow: hidden;
}
.live-line-position {
display: grid;
place-items: center;
align-content: center;
gap: 8px;
padding: clamp(18px, 3vw, 34px);
background: color-mix(in srgb, var(--live-primary), #020617 28%);
color: #071018;
}
.live-line-position span {
font-size: 13px;
font-weight: 900;
text-transform: uppercase;
}
.live-line-position b {
font-size: clamp(76px, 13vw, 180px);
line-height: .82;
letter-spacing: 0;
}
.live-line-status-card.status-called .live-line-position b,
.live-line-status-card.status-checked_in .live-line-position b,
.live-line-status-card.status-designing .live-line-position b {
max-width: 100%;
font-size: clamp(58px, 8vw, 108px);
overflow-wrap: anywhere;
}
.live-line-status-copy {
display: grid;
align-content: center;
gap: 16px;
padding: clamp(20px, 4vw, 48px);
}
.live-line-status-copy h2 {
margin: 0;
font-size: clamp(34px, 5vw, 76px);
line-height: .95;
letter-spacing: 0;
}
.live-line-status-copy p {
max-width: 760px;
color: color-mix(in srgb, var(--live-text), transparent 22%);
font-size: clamp(16px, 2vw, 22px);
line-height: 1.38;
}
.live-line-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.live-line-board {
display: grid;
grid-template-columns: repeat(7, minmax(220px, 1fr));
gap: 12px;
overflow-x: auto;
padding-bottom: 8px;
}
.live-line-card {
display: grid;
gap: 10px;
padding: 12px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 8px;
background: rgba(0,0,0,.18);
}
.live-line-card-top {
display: flex;
justify-content: space-between;
gap: 10px;
}
.live-line-card-top b,
.live-line-card-top span {
display: block;
}
.live-line-card-top b {
font-size: 18px;
}
.live-line-card-top span {
color: var(--muted);
font-size: 12px;
}
.live-line-state {
align-self: start;
white-space: nowrap;
padding: 5px 8px;
border-radius: 8px;
background: rgba(255,255,255,.08);
color: var(--text-2) !important;
font-size: 11px !important;
font-weight: 900;
}
.live-display-screen {
min-height: 100vh;
}
.live-display-grid {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
gap: clamp(16px, 2vw, 24px);
align-items: stretch;
}
.live-display-now,
.live-display-side {
border: 1px solid rgba(255,255,255,.14);
border-radius: 8px;
background: rgba(4,8,16,.72);
box-shadow: 0 28px 90px rgba(0,0,0,.34);
}
.live-display-now {
display: grid;
align-content: center;
gap: 18px;
min-height: min(62vh, 660px);
padding: clamp(24px, 5vw, 72px);
}
.live-display-now b {
color: var(--live-text);
font-size: clamp(64px, 10vw, 168px);
line-height: .85;
letter-spacing: 0;
}
.live-display-now p {
max-width: 820px;
color: color-mix(in srgb, var(--live-text), transparent 20%);
font-size: clamp(20px, 2.4vw, 34px);
line-height: 1.18;
}
.live-display-side {
display: grid;
gap: 12px;
padding: 12px;
}
.live-display-side > div {
display: grid;
align-content: center;
gap: 6px;
min-height: 132px;
padding: 16px;
}
.live-display-side b {
color: var(--live-text);
font-size: clamp(24px, 3vw, 42px);
line-height: 1;
letter-spacing: 0;
}
.live-display-footer {
display: flex;
justify-content: space-between;
gap: 18px;
margin-top: 18px;
color: color-mix(in srgb, var(--live-text), transparent 24%);
font-size: clamp(15px, 1.7vw, 22px);
font-weight: 800;
}
@media (max-width: 980px) {
.live-home-grid,
.live-admin-grid,
.live-kiosk-stage,
.live-line-public-grid,
.live-line-capacity,
.live-line-command,
.live-display-grid,
.live-line-status-card {
grid-template-columns: 1fr;
}
.live-readiness-strip,
.live-queue-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.live-product-row,
.live-upload-row {
grid-template-columns: 1fr;
}
.live-hero-panel,
.live-admin-hero,
.live-queue-head,
.live-kiosk-top {
align-items: stretch;
flex-direction: column;
}
.live-admin-actions {
align-items: stretch;
}
.live-admin-actions .btn-ghost,
.live-admin-actions .btn-primary {
justify-content: center;
}
.live-kiosk {
padding: 14px;
}
.live-kiosk-builder {
max-height: none;
}
.live-kiosk-preview-panel {
grid-template-rows: minmax(360px, 50vh) auto;
}
.live-kiosk-preview {
min-height: 360px;
}
.live-queue-board {
grid-template-columns: 1fr;
overflow: visible;
}
.live-line-board {
grid-template-columns: 1fr;
overflow: visible;
}
.live-line-wave-box,
.live-line-manual-box {
grid-template-columns: 1fr;
}
.live-display-now {
min-height: 420px;
}
.live-display-footer {
flex-direction: column;
}
.live-line-ticket-panel,
.live-line-status-card {
min-height: 0;
}
.live-line-position {
min-height: 180px;
}
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
background:
radial-gradient(1200px 600px at 15% -10%, rgba(113, 246, 218, 0.06), transparent 60%),
radial-gradient(1000px 600px at 100% 100%, rgba(168, 85, 247, 0.05), transparent 60%),
var(--bg);
color: var(--text);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
font-feature-settings: "ss01", "cv11";
font-size: 13.5px;
line-height: 1.5;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Subtle film-grain noise overlay borrowed from the Codex marketing site —
adds depth without distracting. Sits above everything but doesn't block clicks. */
.noise {
position: fixed; inset: 0; pointer-events: none; z-index: 9999;
background-image: url('data:image/svg+xml;utf8,');
mix-blend-mode: overlay;
opacity: 0.025;
}
/* Gradient text utility — for hero headlines / brand mentions */
.gradient-text {
background: linear-gradient(135deg, var(--accent), var(--brand));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Reveal-on-scroll utility (paired with IntersectionObserver in script.js) */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
/* Focus visibility — keyboard nav affordance (WCAG AA). Use :focus-visible so
mouse clicks don't leave stray outlines on buttons. */
:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
border-radius: 4px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 1px;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
/* ═══════════════════════════════════════════════════════════════
App Layout
═══════════════════════════════════════════════════════════════ */
.app {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
min-height: 100vh;
}
/* ═══════════════════════════════════════════════════════════════
Sidebar
═══════════════════════════════════════════════════════════════ */
.sidebar {
background: linear-gradient(180deg, rgba(18, 22, 37, 0.8), rgba(10, 13, 20, 0.9));
border-right: 1px solid var(--border);
padding: 20px 14px;
display: flex;
flex-direction: column;
gap: 6px;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 10px; }
.brand {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 8px 18px;
}
.brand-mark {
width: 32px; height: 32px;
display: grid;
place-items: center;
border-radius: 10px;
background: rgba(255,122,26,0.1);
border: 1px solid rgba(255,145,0,0.35);
box-shadow: 0 10px 22px rgba(255, 90, 0, 0.18);
overflow: hidden;
flex: 0 0 auto;
}
.brand-mark-img {
width: 100%;
height: 100%;
display: block;
}
.brand-copy {
min-width: 0;
display: flex;
flex-direction: column;
line-height: 1.08;
}
.brand-name {
font-size: 15px;
font-weight: 900;
letter-spacing: 0;
}
.brand-sub {
margin-top: 3px;
font-size: 9.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.11em;
color: var(--muted);
}
.nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.nav-item {
display: flex;
align-items: center;
gap: 11px;
padding: 9px 10px;
border-radius: 9px;
color: var(--text-2);
font-size: 13px;
font-weight: 500;
transition: all 0.15s;
position: relative;
}
.nav-item:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.nav-item.on {
background: linear-gradient(90deg, rgba(255,145,0,0.18), rgba(255,145,0,0.04));
color: var(--text);
box-shadow: 0 0 0 1px rgba(255,145,0,0.25);
}
.nav-item.on .ic { color: var(--brand); }
.nav-item.on::before {
content: "";
position: absolute;
left: -14px; top: 8px; bottom: 8px;
width: 3px;
border-radius: 0 3px 3px 0;
background: linear-gradient(180deg, var(--brand), var(--brand-2));
}
.nav-item .ic-chev { margin-left: auto; opacity: 0.5; font-size: 10px; }
.nav-badge {
margin-left: auto;
font-size: 11px;
font-weight: 700;
padding: 1px 7px;
border-radius: 99px;
background: rgba(239, 68, 68, 0.9);
color: #fff;
min-width: 22px;
text-align: center;
}
.mobile-nav {
display: none;
}
.side-panel {
border-radius: 12px;
padding: 14px;
margin-top: 10px;
border: 1px solid var(--border);
}
.side-panel.focus {
background: linear-gradient(135deg, rgba(255,145,0,0.08), rgba(17, 20, 33, 0.6));
border-color: rgba(255,145,0,0.18);
}
.focus-head {
font-size: 11px;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 10px;
}
.focus-row { display: flex; gap: 12px; align-items: center; }
.focus-num {
width: 42px; height: 42px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(255,145,0,0.35), rgba(255,145,0,0.08) 70%);
display: grid;
place-items: center;
font-size: 20px;
font-weight: 800;
color: var(--brand);
border: 1px solid rgba(255,145,0,0.3);
}
.focus-title { font-size: 12px; font-weight: 600; }
.focus-link { font-size: 11px; color: var(--brand); margin-top: 2px; display: inline-block; }
.side-panel.boost {
background: linear-gradient(180deg, rgba(99,102,241,0.12), rgba(30, 27, 75, 0.4));
border-color: rgba(99,102,241,0.25);
position: relative;
overflow: hidden;
text-align: center;
padding: 16px 14px 14px;
margin-top: 14px;
}
.boost-glow {
position: absolute;
top: -50%; left: -30%;
width: 160%; height: 120%;
background: radial-gradient(circle, rgba(139, 92, 246, 0.25), transparent 60%);
pointer-events: none;
}
.boost-icon {
position: relative;
width: 42px; height: 42px;
display: grid;
place-items: center;
margin: 2px auto 10px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(168,85,247,0.25), rgba(59,130,246,0.2));
border: 1px solid rgba(167, 139, 250, 0.35);
}
.boost-title { font-size: 13px; font-weight: 700; position: relative; }
.boost-sub { font-size: 11px; color: var(--text-2); margin: 6px 0 12px; position: relative; line-height: 1.4; }
.boost-btn {
position: relative;
width: 100%;
font-size: 12px;
font-weight: 600;
padding: 8px 12px;
border-radius: 8px;
background: rgba(255,255,255,0.06);
border: 1px solid var(--border-hi);
color: var(--text);
transition: background 0.15s;
}
.boost-btn:hover { background: rgba(255,255,255,0.12); }
.side-foot {
margin-top: auto;
padding: 12px 8px 4px;
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--muted);
}
.foot-logo {
width: 20px;
height: 20px;
border-radius: 6px;
overflow: hidden;
background: #070911;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,0.08);
}
.foot-logo img {
width: 25px;
height: 21px;
object-fit: contain;
display: block;
}
.foot-ver { margin-left: auto; font-size: 11px; opacity: 0.6; }
/* ═══════════════════════════════════════════════════════════════
Main area
═══════════════════════════════════════════════════════════════ */
.main {
padding: 18px 22px 60px;
min-width: 0;
overflow-x: auto;
}
.topbar {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
padding-bottom: 18px;
}
.search {
flex: 1;
max-width: 520px;
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
border-radius: 10px;
background: var(--surface);
border: 1px solid var(--border);
}
.search input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: var(--text);
font-family: inherit;
font-size: 13px;
}
.search { position: relative; }
.search-results {
position: absolute;
top: calc(100% + 6px);
left: 0; right: 0;
max-height: 440px;
overflow-y: auto;
background: var(--surface-2);
border: 1px solid var(--border-hi);
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
padding: 6px;
z-index: 800;
}
.search-empty { padding: 18px; text-align: center; color: var(--muted); font-size: 12.5px; }
.search-group {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
padding: 8px 10px 4px;
}
.search-row {
display: grid;
grid-template-columns: 28px 1fr;
gap: 10px;
align-items: center;
padding: 8px 10px;
border-radius: 8px;
cursor: pointer;
}
.search-row:hover { background: rgba(255, 255, 255, 0.04); }
.search-ico {
width: 28px; height: 28px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.04);
display: grid; place-items: center;
color: var(--text-2);
}
.search-ico .ic { width: 14px; height: 14px; }
.search-title { font-size: 12.5px; font-weight: 600; }
.search-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.search input::placeholder { color: var(--muted); }
.kbd {
font-size: 11px;
color: var(--muted);
background: rgba(255,255,255,0.05);
padding: 2px 7px;
border-radius: 5px;
border: 1px solid var(--border);
}
.topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.icon-btn {
width: 36px; height: 36px;
border-radius: 10px;
background: var(--surface);
border: 1px solid var(--border);
display: grid;
place-items: center;
position: relative;
color: var(--text-2);
transition: all 0.15s;
}
.icon-btn:hover { color: var(--text); border-color: var(--border-hi); }
.dot-badge {
position: absolute;
top: -4px; right: -4px;
font-size: 10px;
font-weight: 700;
background: var(--red);
color: #fff;
padding: 1px 5px;
border-radius: 99px;
min-width: 18px;
text-align: center;
border: 2px solid var(--bg);
}
.date-pill {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 10px;
background: var(--surface);
border: 1px solid var(--border);
font-size: 12px;
color: var(--text);
font-weight: 500;
}
.date-pill:hover { border-color: var(--border-hi); }
.date-pill .ic-chev-d { opacity: 0.6; font-size: 10px; }
.claude-btn {
width: 36px; height: 36px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(168,85,247,0.18), rgba(99,102,241,0.12));
border: 1px solid rgba(168,85,247,0.3);
display: grid;
place-items: center;
}
.user-pill {
display: flex;
align-items: center;
gap: 10px;
padding: 5px 10px 5px 5px;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--border);
max-width: 100%;
}
.avatar {
width: 30px; height: 30px;
border-radius: 50%;
background: linear-gradient(135deg, #f97316, #ef4444);
display: grid; place-items: center;
font-weight: 700;
font-size: 13px;
color: #fff;
position: relative;
}
.presence {
position: absolute;
right: -1px; bottom: -1px;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--green);
border: 2px solid var(--surface);
}
.user-meta { line-height: 1.2; min-width: 0; }
.user-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.user-role { font-size: 11px; color: var(--muted); }
.user-pill .ic-chev-d { opacity: 0.5; font-size: 10px; }
/* ═══════════════════════════════════════════════════════════════
Event Strip
═══════════════════════════════════════════════════════════════ */
.event-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-bottom: 14px;
}
.event-card {
background: linear-gradient(180deg, var(--surface-2), var(--surface));
border: 1px solid var(--border);
border-radius: var(--r);
padding: 16px 18px 0;
position: relative;
overflow: hidden;
box-shadow: var(--shadow);
}
.event-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
margin-bottom: 4px;
}
.event-title { font-size: 14px; font-weight: 600; }
.event-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.event-body {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-top: 10px;
}
.event-count { }
.event-num { font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.event-lbl { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 0.08em; margin-top: 3px; }
.sparkline { width: 130px; height: 44px; flex-shrink: 0; margin-bottom: -1px; }
/* ═══════════════════════════════════════════════════════════════
Pills / badges
═══════════════════════════════════════════════════════════════ */
.pill {
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 99px;
white-space: nowrap;
}
.pill.sm { font-size: 10px; padding: 2px 8px; }
.pill-orange { background: rgba(255,145,0,0.14); color: #ffb75c; border: 1px solid rgba(255,145,0,0.3); }
.pill-red { background: rgba(239,68,68,0.14); color: #fca5a5; border: 1px solid rgba(239,68,68,0.3); }
.pill-yellow { background: rgba(245,158,11,0.14); color: #fcd34d; border: 1px solid rgba(245,158,11,0.3); }
.pill-green { background: rgba(34,197,94,0.14); color: #86efac; border: 1px solid rgba(34,197,94,0.3); }
/* ═══════════════════════════════════════════════════════════════
Grid Layout (main dashboard)
═══════════════════════════════════════════════════════════════ */
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 14px;
}
.monday-start {
display: grid;
grid-template-columns: minmax(300px, 1.1fr) minmax(340px, 1fr) minmax(260px, .82fr);
gap: 14px;
margin: 0 0 14px;
}
.monday-main,
.monday-queue,
.monday-sources {
background: linear-gradient(180deg, rgba(32, 39, 67, 0.72), rgba(19, 24, 38, 0.86));
border: 1px solid var(--border);
border-radius: var(--r);
padding: 16px;
box-shadow: var(--shadow);
}
.monday-main {
background:
linear-gradient(135deg, rgba(113, 246, 218, 0.12), rgba(255, 145, 0, 0.06) 46%, rgba(19, 24, 38, 0.9)),
var(--surface);
}
.monday-kicker {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.14em;
color: var(--accent);
text-transform: uppercase;
}
.monday-title {
font-size: 25px;
font-weight: 850;
letter-spacing: 0;
margin-top: 4px;
}
.monday-sub {
color: var(--text-2);
max-width: 520px;
margin-top: 3px;
}
.monday-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin-top: 18px;
}
.monday-stats div,
.task-cockpit-card {
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.035);
border-radius: 10px;
padding: 10px;
min-width: 0;
}
.monday-stats span,
.task-cockpit-card span {
display: block;
font-size: 10px;
color: var(--muted);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.monday-stats b,
.task-cockpit-card b {
display: block;
font-size: 20px;
margin-top: 2px;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.monday-stats em {
display: block;
color: var(--muted);
font-size: 10.5px;
font-style: normal;
line-height: 1.2;
margin-top: 1px;
}
.mini-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.mini-head span {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
}
.mini-head a {
font-size: 11px;
color: var(--accent);
font-weight: 700;
}
.monday-task,
.task-next-row {
width: 100%;
text-align: left;
display: grid;
align-items: center;
gap: 10px;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.025);
border-radius: 10px;
padding: 10px;
}
.monday-task {
grid-template-columns: 4px minmax(0, 1fr) auto;
}
.monday-task + .monday-task,
.task-next-row + .task-next-row,
.source-bar + .source-bar { margin-top: 7px; }
.monday-task:hover,
.task-next-row:hover {
border-color: var(--border-hi);
background: rgba(255, 255, 255, 0.045);
}
.monday-pri {
width: 4px;
height: 34px;
border-radius: 6px;
background: rgba(100, 116, 139, 0.8);
}
.monday-pri.urgent { background: var(--red); }
.monday-pri.attention { background: var(--yellow); }
.monday-task b,
.task-next-main b {
display: block;
font-size: 12.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.monday-task em,
.task-next-main em {
display: block;
font-style: normal;
color: var(--muted);
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.monday-task i {
font-style: normal;
color: var(--text-2);
font-size: 10.5px;
white-space: nowrap;
}
.monday-empty,
.source-note {
color: var(--muted);
font-size: 12px;
line-height: 1.45;
padding: 8px 2px 2px;
}
.source-bar-head {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--text-2);
font-size: 11.5px;
margin-bottom: 5px;
}
.source-bar-track {
height: 7px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
overflow: hidden;
}
.source-bar-track div {
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--accent), var(--brand));
}
.kpi-row { grid-column: span 9; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.revenue { grid-column: span 6; min-height: 320px; }
.funnel { grid-column: span 3; }
.cal { grid-column: span 3; grid-row: span 2; }
.qa { grid-column: span 3; }
.alerts {
grid-column: span 9;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.agenda { grid-column: span 3; }
.waiting { grid-column: span 3; }
.priorities { grid-column: span 3; }
.speed { grid-column: span 3; }
.team { grid-column: span 3; }
/* ═══════════════════════════════════════════════════════════════
Card
═══════════════════════════════════════════════════════════════ */
.card {
background: linear-gradient(180deg, var(--surface-2), var(--surface));
border: 1px solid var(--border);
border-radius: var(--r);
padding: 16px 18px;
box-shadow: var(--shadow);
min-width: 0;
}
.card-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
gap: 10px;
}
.card-title {
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.card-tools { display: flex; align-items: center; gap: 14px; }
.view-all { font-size: 12px; color: var(--brand); }
.view-all:hover { text-decoration: underline; }
.count-pill {
font-size: 11px;
font-weight: 700;
padding: 2px 8px;
border-radius: 99px;
background: rgba(255,145,0,0.14);
color: var(--brand);
border: 1px solid rgba(255,145,0,0.3);
}
.select-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 8px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
font-size: 11.5px;
color: var(--text-2);
}
.select-pill.sm { padding: 4px 8px; font-size: 11px; }
.select-pill:hover { border-color: var(--border-hi); color: var(--text); }
.select-pill .ic-chev-d { font-size: 9px; opacity: 0.6; }
.legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--text-2); }
.leg { display: inline-flex; align-items: center; gap: 6px; }
.dot {
width: 8px; height: 8px;
border-radius: 50%;
display: inline-block;
}
.dot.orange { background: var(--brand); }
.dot.gray { background: var(--muted); }
.dot.green { background: var(--green); }
.dot.red { background: var(--red); }
.dot.blue { background: var(--blue); }
/* ═══════════════════════════════════════════════════════════════
KPI Cards
═══════════════════════════════════════════════════════════════ */
.kpi-card {
background: linear-gradient(180deg, var(--surface-2), var(--surface));
border: 1px solid var(--border);
border-radius: var(--r);
padding: 16px 18px 4px;
position: relative;
overflow: hidden;
min-height: 112px;
box-shadow: var(--shadow);
}
.kpi-lbl { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.kpi-info {
display: inline-grid;
place-items: center;
width: 13px; height: 13px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
color: var(--muted);
font-size: 9px;
font-weight: 700;
font-style: normal;
cursor: help;
}
.kpi-card:hover .kpi-info { background: rgba(255, 145, 0, 0.15); color: var(--brand); }
.kpi-val {
font-size: 24px;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
}
.kpi-val.green { color: var(--green); }
.kpi-val.ops { color: var(--text); }
.kpi-delta {
font-size: 11px;
color: var(--muted);
margin-top: 3px;
}
.kpi-delta.up { color: var(--green); }
.kpi-delta.dim { color: var(--muted); }
.kpi-spark {
position: absolute;
bottom: 0; left: 0;
width: 100%;
height: 40px;
opacity: 0.75;
}
.kpi-donut {
position: absolute;
right: 14px; top: 16px;
width: 56px; height: 56px;
}
/* ═══════════════════════════════════════════════════════════════
Revenue chart
═══════════════════════════════════════════════════════════════ */
.revenue .chart-wrap {
width: 100%;
height: 260px;
}
.revenue .chart { width: 100%; height: 100%; display: block; }
/* ═══════════════════════════════════════════════════════════════
Pipeline Funnel
═══════════════════════════════════════════════════════════════ */
.funnel-wrap {
display: grid;
grid-template-columns: 1fr 140px;
gap: 12px;
align-items: center;
}
.funnel-svg { width: 100%; height: 200px; }
.funnel-rows {
display: flex;
flex-direction: column;
gap: 14px;
}
.f-row {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--text-2);
}
.f-row b { font-weight: 700; color: var(--text); }
.funnel-foot {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
border-top: 1px solid var(--border);
margin-top: 14px;
padding-top: 14px;
}
.ff-lbl { font-size: 11px; color: var(--muted); }
.ff-val { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin-top: 2px; }
.ff-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ff-sub.up { color: var(--green); }
/* ═══════════════════════════════════════════════════════════════
Event Calendar
═══════════════════════════════════════════════════════════════ */
.cal-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px 2px 12px;
}
.cal-title { font-size: 13px; font-weight: 600; }
.ic-b {
width: 24px; height: 24px;
border-radius: 6px;
display: grid;
place-items: center;
color: var(--muted);
}
.ic-b:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-bottom: 16px;
}
.dow {
text-align: center;
font-size: 10px;
font-weight: 700;
color: var(--muted);
padding: 4px 0;
letter-spacing: 0.04em;
}
.d {
text-align: center;
font-size: 11.5px;
padding: 5px 0;
border-radius: 6px;
color: var(--text-2);
}
.d.muted { color: rgba(100,116,139,0.3); }
.d.ev { color: var(--brand); font-weight: 700; }
.d.today {
background: linear-gradient(135deg, var(--brand), var(--brand-2));
color: #000;
font-weight: 800;
}
.cal-events { display: flex; flex-direction: column; gap: 8px; }
.cal-ev {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 10px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--border);
}
.ev-date {
display: grid;
place-items: center;
min-width: 36px;
text-align: center;
}
.ev-m { font-size: 9px; color: var(--muted); font-weight: 700; letter-spacing: 0.08em; }
.ev-n { font-size: 16px; font-weight: 800; }
.ev-body { flex: 1; min-width: 0; }
.ev-title { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.ev-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.ev-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.ev-dot.orange { background: var(--brand); }
/* ═══════════════════════════════════════════════════════════════
Quick Actions
═══════════════════════════════════════════════════════════════ */
.qa-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.qa-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 14px 8px;
border-radius: 10px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--border);
color: var(--text-2);
font-size: 11px;
font-weight: 500;
transition: all 0.15s;
}
.qa-btn:hover {
background: rgba(255,145,0,0.06);
border-color: rgba(255,145,0,0.25);
color: var(--text);
}
.qa-btn .ic.big { font-size: 18px; color: var(--text-2); }
/* ═══════════════════════════════════════════════════════════════
Alerts
═══════════════════════════════════════════════════════════════ */
.alert {
display: flex;
gap: 10px;
padding: 12px 14px;
border-radius: var(--r);
background: var(--surface);
border: 1px solid var(--border);
position: relative;
overflow: hidden;
min-height: 86px;
}
.alert::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
}
.alert-red::before { background: var(--red); }
.alert-yellow::before { background: var(--yellow); }
.alert-blue::before { background: var(--blue); }
.alert-green::before { background: var(--green); }
.alert-ico {
width: 28px; height: 28px;
border-radius: 8px;
display: grid;
place-items: center;
font-size: 14px;
flex-shrink: 0;
}
.alert-red .alert-ico { background: rgba(239,68,68,0.12); color: var(--red); }
.alert-yellow .alert-ico { background: rgba(245,158,11,0.12); color: var(--yellow); }
.alert-blue .alert-ico { background: rgba(59,130,246,0.12); color: var(--blue); }
.alert-green .alert-ico { background: rgba(34,197,94,0.12); color: var(--green); }
.alert-body { min-width: 0; flex: 1; }
.alert-title { font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.alert-sub { font-size: 11px; color: var(--muted); margin: 3px 0 6px; }
.alert-link {
font-size: 11.5px;
color: var(--brand);
font-weight: 600;
}
.alert-link:hover { text-decoration: underline; }
/* ═══════════════════════════════════════════════════════════════
Lists (Agenda, Priorities)
═══════════════════════════════════════════════════════════════ */
.list { display: flex; flex-direction: column; gap: 4px; }
.li {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 8px;
border-radius: 8px;
transition: background 0.12s;
}
.li:hover { background: rgba(255,255,255,0.03); }
.li-ico {
width: 30px; height: 30px;
border-radius: 8px;
display: grid;
place-items: center;
font-size: 14px;
flex-shrink: 0;
}
.li-ico.red { background: rgba(239,68,68,0.14); color: var(--red); }
.li-ico.green { background: rgba(34,197,94,0.14); color: var(--green); }
.li-ico.orange { background: rgba(255,145,0,0.14); color: var(--brand); }
.li-ico.purple { background: rgba(168,85,247,0.14); color: var(--purple); }
.li-ico.blue { background: rgba(59,130,246,0.14); color: var(--blue); }
.li-body { min-width: 0; flex: 1; }
.li-title { font-size: 12.5px; font-weight: 600; }
.li-sub { font-size: 11px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li.pri { padding: 10px 10px; border-left: 2px solid transparent; }
.li.pri:nth-child(1), .li.pri:nth-child(2), .li.pri:nth-child(3) { border-left-color: rgba(239,68,68,0.6); }
.li.pri:nth-child(4), .li.pri:nth-child(5) { border-left-color: rgba(245,158,11,0.6); }
.li.pri:nth-child(6) { border-left-color: rgba(34,197,94,0.6); }
/* ═══════════════════════════════════════════════════════════════
Speed to Lead
═══════════════════════════════════════════════════════════════ */
.speed-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 14px;
}
.ss-val { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.ss-lbl { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.speed-chart svg { width: 100%; height: 180px; }
.speed-foot {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 10px;
font-size: 11px;
color: var(--muted);
}
.goal { display: inline-flex; align-items: center; gap: 6px; }
/* ═══════════════════════════════════════════════════════════════
Team Workload
═══════════════════════════════════════════════════════════════ */
.team-list { display: flex; flex-direction: column; gap: 10px; }
.team-list li {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 10px;
align-items: center;
}
.tm-av {
width: 36px; height: 36px;
border-radius: 50%;
display: grid;
place-items: center;
font-weight: 700;
font-size: 14px;
color: #fff;
}
.tm-av.orange { background: linear-gradient(135deg, #f97316, #ef4444); }
.tm-av.blue { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.tm-av.purple { background: linear-gradient(135deg, #a855f7, #ec4899); }
.tm-av.green { background: linear-gradient(135deg, #22c55e, #14b8a6); }
.tm-name { font-size: 12.5px; font-weight: 600; }
.tm-role { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.bar {
height: 4px;
background: rgba(255,255,255,0.06);
border-radius: 99px;
overflow: hidden;
}
.bar-fill { height: 100%; border-radius: 99px; }
.bar-fill.orange { background: linear-gradient(90deg, #f97316, #ef4444); }
.bar-fill.blue { background: linear-gradient(90deg, #3b82f6, #6366f1); }
.bar-fill.purple { background: linear-gradient(90deg, #a855f7, #ec4899); }
.bar-fill.green { background: linear-gradient(90deg, #22c55e, #14b8a6); }
.tm-pct { font-size: 12px; font-weight: 700; color: var(--text-2); }
.top-pri {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.tp-head { font-size: 11px; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.tp-row { display: flex; align-items: center; gap: 9px; }
.tp-body { flex: 1; min-width: 0; }
.tp-title { font-size: 12px; font-weight: 600; }
.tp-sub { font-size: 11px; color: var(--muted); }
/* ═══════════════════════════════════════════════════════════════
Icons (minimal, inline CSS icons using shapes via pseudo elements)
═══════════════════════════════════════════════════════════════ */
.ic {
display: inline-block;
width: 16px; height: 16px;
background: currentColor;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
flex-shrink: 0;
}
/* inline SVG masks */
.ic-grid { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-auto { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-calendar, .ic-cal2 { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-box { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-doc { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-funnel { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-check { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-pipe { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-pack { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-user { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-team { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-chart { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-search { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-bell { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-chev { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-chev-d { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-chev-l { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-chev-r { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-alert { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-flag { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-phone { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-user-plus { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-cal-plus { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-upload { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-gear { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-dtf { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-emb { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-agent { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic-sync { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ic.big { width: 20px; height: 20px; }
.nav-item .ic { width: 17px; height: 17px; }
.nav-item .ic-chev { width: 12px; height: 12px; }
/* ═══════════════════════════════════════════════════════════════
Toasts
═══════════════════════════════════════════════════════════════ */
.toasts {
position: fixed;
top: 16px;
right: 16px;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.toast {
pointer-events: auto;
background: var(--surface-2);
border: 1px solid var(--border-hi);
border-radius: 10px;
padding: 10px 14px;
font-size: 12.5px;
color: var(--text);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
animation: toastIn 0.2s ease-out;
max-width: 320px;
}
.toast.ok { border-color: rgba(34, 197, 94, 0.4); }
.toast.err { border-color: rgba(239, 68, 68, 0.4); color: #fca5a5; }
@keyframes toastIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
/* ═══════════════════════════════════════════════════════════════
Modal
═══════════════════════════════════════════════════════════════ */
.modal-backdrop {
position: fixed;
inset: 0;
width: 100vw;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
z-index: 900;
display: grid;
place-items: center;
padding: 20px;
animation: modalIn 0.15s ease-out;
}
@keyframes modalIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
width: 100%;
max-width: 480px;
box-sizing: border-box;
background: var(--surface-2);
border: 1px solid var(--border-hi);
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
overflow: hidden;
max-height: 88vh;
display: flex;
flex-direction: column;
}
.modal.event-detail-modal {
max-width: min(720px, calc(100vw - 40px));
}
.modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
.modal-title { font-size: 15px; font-weight: 700; }
.modal-close {
width: 28px; height: 28px;
border-radius: 8px;
font-size: 20px;
color: var(--muted);
display: grid;
place-items: center;
}
.modal-close:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.modal-body {
padding: 16px 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.modal-note {
font-size: 12px;
color: var(--text-2);
padding: 10px 12px;
background: rgba(255, 145, 0, 0.08);
border: 1px solid rgba(255, 145, 0, 0.25);
border-radius: 8px;
margin-bottom: 4px;
}
.portal-control-menu {
position: fixed;
z-index: 3000;
width: min(220px, calc(100vw - 24px));
padding: 6px;
background: rgba(15, 23, 42, 0.98);
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: 8px;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.portal-control-menu button {
width: 100%;
min-height: 36px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 10px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--text);
font: inherit;
font-size: 13px;
text-align: left;
cursor: pointer;
}
.portal-control-menu button:hover,
.portal-control-menu button[aria-checked="true"] {
background: rgba(255, 145, 0, 0.14);
}
.portal-control-menu b {
color: var(--orange);
font-size: 11px;
font-weight: 700;
}
.rosie-quick-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
}
.calculator-shell {
min-height: calc(100vh - 180px);
height: clamp(720px, calc(100vh - 180px), 1180px);
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 8px;
overflow: auto;
background: #020617;
max-width: 100%;
}
.calculator-frame {
display: block;
width: 100%;
height: 100%;
border: 0;
background: #020617;
}
.sep-drive-confirm {
display: grid;
gap: 12px;
}
.sep-drive-confirm-grid {
display: grid;
grid-template-columns: minmax(88px, max-content) minmax(0, 1fr);
gap: 8px 12px;
padding: 12px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: var(--r-sm);
background: rgba(15, 23, 42, 0.46);
}
.sep-drive-confirm-grid span {
color: var(--muted);
font-size: 11px;
font-weight: 850;
text-transform: uppercase;
}
.sep-drive-confirm-grid b {
min-width: 0;
overflow-wrap: anywhere;
color: var(--text);
font-size: 12px;
}
.modal-foot {
display: flex;
gap: 10px;
justify-content: flex-end;
padding: 12px 20px;
border-top: 1px solid var(--border);
}
@media (max-width: 720px) {
.modal-backdrop {
align-items: stretch;
padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
}
.modal.event-detail-modal {
max-width: 100%;
max-height: calc(100vh - max(16px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
min-height: 0;
}
.modal.event-detail-modal .modal-head {
flex: 0 0 auto;
padding: 14px 16px;
}
.modal.event-detail-modal .modal-body {
flex: 1 1 auto;
min-height: 0;
padding: 14px 16px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.modal.event-detail-modal .modal-foot {
flex: 0 0 auto;
padding: 10px 16px max(10px, env(safe-area-inset-bottom));
flex-wrap: wrap;
}
.modal.event-detail-modal .modal-foot .btn-ghost,
.modal.event-detail-modal .modal-foot .btn-primary {
min-height: 42px;
}
}
body.modal-open .modal-backdrop {
overscroll-behavior: contain;
}
.fld { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-2); }
.fld span { font-weight: 500; }
.fld input, .fld select, .fld textarea {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border);
color: var(--text);
border-radius: 8px;
padding: 9px 11px;
font-family: inherit;
font-size: 13px;
outline: none;
}
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--brand); }
.fld textarea { min-height: 72px; resize: vertical; }
.fld.row2 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 6px 12px;
}
.fld.row2 .a { grid-column: 1; }
.fld.row2 .b { grid-column: 2; }
.fld.row2 input:nth-of-type(1) { grid-column: 1; }
.fld.row2 input:nth-of-type(2) { grid-column: 2; }
.btn-primary, .btn-ghost {
font-size: 12.5px;
font-weight: 600;
padding: 8px 16px;
border-radius: 8px;
border: 1px solid transparent;
}
.btn-primary {
background: linear-gradient(135deg, var(--brand), var(--brand-2));
color: #000;
}
.btn-primary:hover { opacity: 0.92; }
.btn-primary:disabled { opacity: 0.6; cursor: default; }
.btn-ghost {
background: transparent;
border-color: var(--border-hi);
color: var(--text-2);
}
.btn-ghost:hover { color: var(--text); background: rgba(255, 255, 255, 0.03); }
.btn-ghost:disabled {
opacity: 0.48;
cursor: default;
color: var(--muted);
background: rgba(15, 23, 42, 0.35);
}
.btn-ghost:disabled:hover {
color: var(--muted);
background: rgba(15, 23, 42, 0.35);
}
/* ═══════════════════════════════════════════════════════════════
Event card (clickable) + staff info
═══════════════════════════════════════════════════════════════ */
.event-card.clickable { cursor: pointer; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.event-card.clickable:hover { transform: translateY(-1px); border-color: var(--border-hi); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3); }
.event-staff {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--text-2);
padding: 8px 18px 14px;
margin-top: -4px;
}
.event-staff .ic { width: 13px; height: 13px; color: var(--text-2); }
.cal-ev.clickable { cursor: pointer; transition: background 0.12s; }
.cal-ev.clickable:hover { background: rgba(255, 255, 255, 0.04); }
/* ═══════════════════════════════════════════════════════════════
Event detail modal
═══════════════════════════════════════════════════════════════ */
.event-detail { display: flex; flex-direction: column; gap: 16px; }
.ed-head { display: flex; gap: 14px; align-items: center; min-width: 0; }
.ed-date-box {
display: grid;
place-items: center;
min-width: 52px;
height: 56px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(255,145,0,0.18), rgba(255,145,0,0.05));
border: 1px solid rgba(255,145,0,0.3);
}
.ed-m { font-size: 10px; font-weight: 800; color: var(--brand); letter-spacing: 0.08em; }
.ed-d { font-size: 20px; font-weight: 800; line-height: 1; }
.ed-title-box { min-width: 0; }
.ed-title { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.ed-sub { font-size: 12px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.ed-meta {
display: grid;
gap: 10px;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border);
border-radius: 10px;
font-size: 12.5px;
line-height: 1.5;
overflow-wrap: anywhere;
}
.ed-meta .lb {
display: inline-block;
min-width: 70px;
font-size: 10px;
font-weight: 700;
color: var(--muted);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-right: 8px;
}
.supply-pill { white-space: normal; overflow-wrap: anywhere; }
.ed-staff-head {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
font-weight: 600;
color: var(--text);
margin-bottom: 8px;
padding: 0 2px;
}
.claim-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border);
margin-bottom: 6px;
}
.claim-av {
width: 30px; height: 30px;
border-radius: 50%;
background: linear-gradient(135deg, #3b82f6, #6366f1);
color: #fff;
font-weight: 700;
display: grid; place-items: center;
font-size: 13px;
}
.claim-body { flex: 1; min-width: 0; }
.claim-name { font-size: 12.5px; font-weight: 600; }
.claim-email { font-size: 11px; color: var(--muted); margin-top: 1px; }
.claim-email .tag {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
}
.claim-email .tag.ok { background: rgba(34,197,94,0.15); color: #86efac; border: 1px solid rgba(34,197,94,0.3); }
.claim-email .tag.warn { background: rgba(245,158,11,0.15); color: #fcd34d; border: 1px solid rgba(245,158,11,0.3); }
.claims-empty {
padding: 14px;
text-align: center;
font-size: 12px;
color: var(--muted);
border: 1px dashed var(--border);
border-radius: 10px;
}
.btn-ghost.sm, .btn-primary.sm { padding: 4px 10px; font-size: 11px; }
.ed-add {
padding: 12px 14px;
border: 1px solid rgba(255,145,0,0.2);
border-radius: 10px;
background: rgba(255,145,0,0.04);
}
.ed-add-head { font-size: 12px; font-weight: 700; color: var(--brand); margin-bottom: 8px; }
.event-edit-panel {
display: flex;
flex-direction: column;
gap: 10px;
border-color: rgba(96, 165, 250, 0.28);
background: rgba(59, 130, 246, 0.055);
}
.event-edit-panel .ed-add-head { color: #93c5fd; }
.event-edit-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.event-edit-toggles {
display: grid;
gap: 6px;
}
.check-row {
display: flex;
align-items: center;
gap: 8px;
min-height: 28px;
color: var(--text-2);
font-size: 12px;
}
.check-row input {
flex: 0 0 auto;
width: 15px;
height: 15px;
}
.event-edit-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.event-update-result {
min-height: 16px;
font-size: 11px;
color: var(--muted);
}
.event-update-result.ok { color: #86efac; }
.event-update-result.err { color: #fecaca; }
.event-opening-panel {
display: flex;
flex-direction: column;
gap: 10px;
border-color: rgba(34, 197, 94, 0.28);
background: rgba(34, 197, 94, 0.055);
}
.event-opening-panel .ed-add-head { color: #86efac; }
.opening-helper {
margin: 0;
color: #cbd5e1;
font-size: 12px;
line-height: 1.45;
}
.opening-helper.ok { color: #bbf7d0; }
.opening-helper.warn { color: #fcd34d; }
.opening-actions,
.opening-picker-tools {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.opening-picker-tools {
padding-top: 2px;
font-size: 11px;
color: var(--muted);
}
.opening-staff-picker {
display: grid;
gap: 8px;
}
.opening-staff-picker[hidden] { display: none; }
.opening-recipient-list {
display: grid;
gap: 6px;
max-height: 180px;
overflow: auto;
padding-right: 2px;
}
.opening-recipient-row {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 8px;
border: 1px solid var(--border);
border-radius: 8px;
background: rgba(255, 255, 255, 0.025);
}
.opening-recipient-row input {
flex: 0 0 auto;
width: 15px;
height: 15px;
}
.opening-recipient-row span {
display: grid;
gap: 1px;
min-width: 0;
}
.opening-recipient-row b {
font-size: 12px;
color: var(--text);
overflow-wrap: anywhere;
}
.opening-recipient-row em {
font-style: normal;
font-size: 11px;
color: var(--muted);
overflow-wrap: anywhere;
}
.staff-picker { margin-bottom: 8px; }
.role-picker { margin-top: 8px; }
.ed-add-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.ed-add-row.staff-contact-row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr) minmax(0, 0.95fr); }
.ed-add-row input {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border);
color: var(--text);
border-radius: 8px;
padding: 8px 10px;
font-family: inherit;
font-size: 12.5px;
outline: none;
}
.ed-add-row input:focus { border-color: var(--brand); }
@media (max-width: 720px) {
.event-edit-grid { grid-template-columns: 1fr; }
.ed-add-row.staff-contact-row { grid-template-columns: 1fr; }
}
.ed-add-note { font-size: 11px; color: var(--muted); margin-top: 8px; }
/* ═══════════════════════════════════════════════════════════════
Skeleton / loading
═══════════════════════════════════════════════════════════════ */
.skeleton {
display: inline-block;
height: 1em;
min-width: 80px;
background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 100%);
background-size: 200% 100%;
animation: skeleton 1.4s ease-in-out infinite;
border-radius: 4px;
}
.event-card.loading .event-title.skeleton { width: 140px; margin-bottom: 4px; }
.event-card.loading .event-sub.skeleton { width: 180px; height: 0.8em; }
@keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* ═══════════════════════════════════════════════════════════════
Sub-pages (view shell + shared list patterns)
═══════════════════════════════════════════════════════════════ */
.view-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 16px;
padding: 6px 0 18px;
border-bottom: 1px solid var(--border);
margin-bottom: 18px;
}
.view-title {
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.05;
}
.view-sub {
font-size: 13px;
color: var(--muted);
margin-top: 3px;
}
.view-actions {
display: flex;
gap: 10px;
align-items: center;
}
.view-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; max-width: 100%; }
.list-card {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 14px 16px;
box-shadow: var(--shadow);
min-width: 0;
max-width: 100%;
}
.list-section + .list-section { margin-top: 18px; }
.list-section-head {
font-size: 11px;
text-transform: uppercase;
font-weight: 700;
color: var(--muted);
letter-spacing: 0.08em;
padding: 10px 4px 8px;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid var(--border);
margin-bottom: 8px;
}
.list-section-head.muted { opacity: 0.6; }
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 20px;
text-align: center;
color: var(--muted);
gap: 12px;
}
.empty-ico {
width: 42px; height: 42px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
display: grid; place-items: center;
color: var(--muted);
}
.empty-ico .ic { width: 22px; height: 22px; }
.empty-msg { font-size: 13px; max-width: 360px; line-height: 1.5; }
.empty-action { margin-top: 8px; text-decoration: none; font-size: 12.5px; }
/* Event list rows */
.ev-list-row {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) minmax(180px, 34%);
gap: 14px;
align-items: center;
padding: 12px 10px;
border-radius: 10px;
margin-bottom: 4px;
min-width: 0;
}
.ev-list-row:hover { background: rgba(255, 255, 255, 0.03); }
.ev-list-row.clickable { cursor: pointer; }
.ev-list-row .ev-date {
display: grid;
place-items: center;
height: 48px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(255, 145, 0, 0.12), rgba(255, 145, 0, 0.03));
border: 1px solid rgba(255, 145, 0, 0.25);
}
.ev-right {
display: flex;
gap: 6px;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
min-width: 0;
}
/* Production group headers */
.prod-group-header {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
padding: 10px 2px 6px;
border-bottom: 1px solid var(--border);
margin-bottom: 8px;
}
/* Kanban */
.kanban {
display: flex;
gap: 10px;
overflow-x: auto;
max-width: 100%;
padding-bottom: 14px;
scrollbar-gutter: stable;
}
.kan-col {
min-width: 220px;
max-width: 260px;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px;
}
.kan-head {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.kan-cards { display: flex; flex-direction: column; gap: 6px; }
.kan-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
cursor: pointer;
transition: border-color 0.12s;
}
.kan-card:hover { border-color: var(--border-hi); }
.kan-title { font-size: 12.5px; font-weight: 600; }
.kan-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.kan-due { font-size: 10.5px; color: var(--yellow); margin-top: 4px; font-weight: 600; }
.kan-empty { font-size: 11px; color: var(--muted); text-align: center; padding: 10px; }
/* Estimate row */
.est-row {
display: grid;
grid-template-columns: 36px 1fr auto auto auto;
gap: 12px;
align-items: center;
padding: 12px 10px;
border-radius: 8px;
}
.est-row:hover { background: rgba(255, 255, 255, 0.03); }
.est-icon {
width: 30px; height: 30px;
border-radius: 8px;
display: grid; place-items: center;
background: rgba(255, 255, 255, 0.04);
}
.est-icon.green { background: rgba(34, 197, 94, 0.14); color: var(--green); }
.est-icon.blue { background: rgba(59, 130, 246, 0.14); color: var(--blue); }
.est-icon.orange { background: rgba(255, 145, 0, 0.14); color: var(--brand); }
.est-icon.gray { background: rgba(255, 255, 255, 0.04); color: var(--muted); }
.est-title { font-size: 12.5px; font-weight: 600; }
.est-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.est-amount { font-size: 13px; font-weight: 700; color: var(--green); }
.pill-gray { background: rgba(255, 255, 255, 0.05); color: var(--muted); border: 1px solid var(--border); }
/* Stats strip */
.stats-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.stat-card {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 16px;
}
.stat-lbl { font-size: 11px; color: var(--muted); }
.stat-val { font-size: 22px; font-weight: 800; margin-top: 4px; letter-spacing: -0.02em; }
/* Mockup approval tool */
.mockup-grid {
display: grid;
grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
gap: 14px;
align-items: start;
min-width: 0;
max-width: 100%;
}
.mockup-panel {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 16px;
box-shadow: var(--shadow);
min-width: 0;
max-width: 100%;
}
.panel-title {
font-size: 13px;
font-weight: 800;
margin-bottom: 12px;
letter-spacing: 0.01em;
}
.mockup-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.mockup-stepper {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin-bottom: 14px;
}
.mockup-step {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
padding: 8px 9px;
border: 1px solid var(--border);
border-radius: 8px;
color: var(--muted);
font-size: 11px;
font-weight: 800;
background: rgba(255, 255, 255, 0.025);
}
.mockup-step b {
display: grid;
place-items: center;
width: 20px;
height: 20px;
border-radius: 999px;
background: rgba(251, 146, 60, 0.18);
color: #fed7aa;
font-size: 11px;
}
.mockup-step.is-active {
border-color: rgba(251, 146, 60, 0.45);
color: var(--text);
}
.mockup-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 12px;
}
.mockup-fields .wide { grid-column: 1 / -1; }
.mockup-garment-override {
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px;
background: rgba(255, 255, 255, 0.025);
}
.mockup-preset-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
}
.mockup-preset {
min-height: 72px;
text-align: left;
border: 1px solid var(--border);
border-radius: 8px;
background: rgba(255, 255, 255, 0.025);
color: var(--text);
padding: 10px;
cursor: pointer;
}
.mockup-preset b,
.mockup-preset span {
display: block;
}
.mockup-preset b {
font-size: 12px;
margin-bottom: 4px;
}
.mockup-preset span {
color: var(--muted);
font-size: 11px;
line-height: 1.3;
}
.mockup-preset.is-active {
border-color: rgba(251, 146, 60, 0.65);
background: rgba(251, 146, 60, 0.12);
}
.mockup-placement-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.mockup-placement-grid.compact {
grid-template-columns: 1fr;
}
.mockup-placement-card {
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px;
background: rgba(255, 255, 255, 0.025);
}
.mockup-placement-card.enabled {
border-color: rgba(34, 197, 94, 0.42);
}
.mockup-placement-toggle {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
font-size: 12px;
font-weight: 900;
}
.mockup-placement-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.mockup-placement-fields .wide {
grid-column: 1 / -1;
}
.mockup-placement-art input {
font-size: 11px;
}
.mockup-dropzone {
display: grid;
place-items: center;
gap: 6px;
min-height: 112px;
border: 1px dashed rgba(148, 163, 184, 0.55);
border-radius: 10px;
background: rgba(15, 23, 42, 0.3);
cursor: pointer;
}
.mockup-dropzone.dragging,
.mockup-canvas-wrap.dragging {
border-color: rgba(251, 146, 60, 0.85);
background: rgba(251, 146, 60, 0.12);
}
.mockup-dropzone input {
display: none;
}
.mockup-validation-list,
.mockup-chip-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.mockup-validation-list span,
.mockup-chip-row span {
display: inline-flex;
align-items: center;
gap: 5px;
border: 1px solid var(--border);
border-radius: 999px;
padding: 5px 8px;
color: var(--muted);
font-size: 11px;
font-weight: 800;
}
.mockup-validation-list span.ok {
color: #bbf7d0;
border-color: rgba(34, 197, 94, 0.38);
background: rgba(34, 197, 94, 0.1);
}
.mockup-engine {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border);
font-size: 11px;
color: var(--muted);
}
.mockup-jobs {
display: flex;
flex-direction: column;
gap: 12px;
}
.mockup-job {
display: grid;
grid-template-columns: minmax(0, 1fr) 178px;
gap: 14px;
padding: 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: rgba(255, 255, 255, 0.025);
}
.mockup-job-main {
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.mockup-job-head {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
}
.mockup-job-title {
font-size: 13px;
font-weight: 800;
}
.mockup-job-sub,
.mockup-job-prompt,
.mockup-job-spec,
.mockup-job-foot {
color: var(--muted);
font-size: 11.5px;
overflow-wrap: anywhere;
}
.mockup-job-prompt {
color: var(--text-2);
}
.mockup-error {
color: #fca5a5;
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.2);
border-radius: 8px;
padding: 8px 10px;
font-size: 11.5px;
overflow-wrap: anywhere;
}
.mockup-job-foot {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.mockup-preview {
width: 178px;
aspect-ratio: 4 / 3;
object-fit: contain;
background: #fff;
border: 1px solid var(--border-hi);
border-radius: 8px;
padding: 6px;
}
.mockup-editor-modal {
width: min(1180px, calc(100vw - 32px));
max-width: min(1180px, calc(100vw - 32px));
max-height: calc(100vh - 34px);
}
.mockup-editor-sub {
margin-top: 4px;
color: var(--muted);
font-size: 12px;
}
.mockup-editor-body {
display: grid;
grid-template-columns: minmax(300px, 0.82fr) minmax(420px, 1.18fr);
gap: 16px;
align-items: start;
}
.mockup-editor-left,
.mockup-editor-right {
min-width: 0;
}
.mockup-editor-preview,
.mockup-editor-empty {
width: 100%;
aspect-ratio: 4 / 3;
background: #fff;
border: 1px solid var(--border-hi);
border-radius: 10px;
}
.mockup-editor-preview {
object-fit: contain;
padding: 8px;
}
.mockup-editor-empty {
display: grid;
place-items: center;
color: #475569;
font-weight: 800;
}
.mockup-editor-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.mockup-studio {
display: flex;
flex-direction: column;
gap: 10px;
}
.mockup-studio-toolbar {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.mockup-placement-callout,
.mockup-placement-rescue {
display: grid;
gap: 8px;
padding: 10px 12px;
border: 1px solid rgba(251, 146, 60, 0.34);
border-radius: var(--r-sm);
background: rgba(251, 146, 60, 0.11);
}
.mockup-placement-callout {
grid-template-columns: minmax(0, auto) minmax(0, 1fr);
align-items: center;
margin-top: 8px;
}
.mockup-placement-callout b,
.mockup-placement-rescue b {
color: #fed7aa;
font-size: 12px;
font-weight: 900;
}
.mockup-placement-callout span,
.mockup-placement-rescue span {
color: var(--text-2);
font-size: 11.5px;
line-height: 1.35;
}
.mockup-placement-rescue {
grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.3fr);
align-items: center;
}
.mockup-placement-rescue > div:first-child {
display: grid;
gap: 2px;
}
.mockup-placement-presets {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: flex-end;
}
.mockup-adjust-btn {
box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.32), 0 12px 24px rgba(251, 146, 60, 0.12);
}
.mockup-canvas-wrap {
position: relative;
border: 1px solid var(--border-hi);
border-radius: 10px;
background:
linear-gradient(45deg, rgba(148, 163, 184, 0.12) 25%, transparent 25%),
linear-gradient(-45deg, rgba(148, 163, 184, 0.12) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, 0.12) 75%),
linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, 0.12) 75%);
background-size: 18px 18px;
background-position: 0 0, 0 9px, 9px -9px, -9px 0;
overflow: hidden;
}
.mockup-canvas-wrap canvas {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
touch-action: none;
}
.mockup-canvas-hint {
position: absolute;
left: 10px;
bottom: 8px;
padding: 4px 7px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.78);
color: #cbd5e1;
font-size: 10px;
font-weight: 800;
}
.mockup-layer-dock {
display: grid;
grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
gap: 10px;
}
.mockup-layer-list,
.mockup-layer-controls {
min-height: 92px;
border: 1px solid var(--border);
border-radius: 10px;
padding: 8px;
background: rgba(255, 255, 255, 0.025);
}
.mockup-layer-row {
width: 100%;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 3px 8px;
text-align: left;
border: 1px solid transparent;
border-radius: 8px;
padding: 8px;
color: var(--text);
background: transparent;
cursor: pointer;
}
.mockup-layer-row span {
grid-row: span 2;
align-self: center;
padding: 3px 6px;
border-radius: 999px;
background: rgba(251, 146, 60, 0.15);
color: #fed7aa;
font-size: 10px;
font-weight: 900;
}
.mockup-layer-row b {
min-width: 0;
overflow-wrap: anywhere;
font-size: 12px;
}
.mockup-layer-row small {
color: var(--muted);
font-size: 10.5px;
}
.mockup-layer-row.is-active {
border-color: rgba(251, 146, 60, 0.55);
background: rgba(251, 146, 60, 0.1);
}
.mockup-layer-buttons {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.mockup-nudge-pad,
.mockup-snap-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.mockup-nudge-pad .btn-ghost,
.mockup-snap-row .btn-ghost {
min-width: 0;
}
.mockup-production-blueprint {
display: grid;
gap: 10px;
margin-top: 10px;
padding: 12px;
border: 1px solid rgba(34, 197, 94, 0.22);
border-radius: 10px;
background: rgba(15, 23, 42, 0.50);
}
.mockup-blueprint-head {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: flex-start;
}
.mockup-blueprint-head b,
.mockup-blueprint-selected b {
display: block;
color: var(--text);
font-size: 12px;
font-weight: 900;
}
.mockup-blueprint-head span,
.mockup-blueprint-selected span,
.mockup-blueprint-selected em,
.mockup-blueprint-empty {
color: var(--muted);
font-size: 11px;
line-height: 1.35;
font-style: normal;
}
.mockup-blueprint-actions,
.mockup-blueprint-sizes {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.mockup-blueprint-selected {
display: grid;
gap: 3px;
padding: 9px 10px;
border-radius: 8px;
border: 1px solid rgba(148, 163, 184, 0.16);
background: rgba(2, 6, 23, 0.32);
}
.mockup-blueprint-risk {
display: grid;
gap: 5px;
color: #fde68a;
font-size: 11px;
}
.mockup-blueprint-risk span {
padding: 5px 7px;
border-radius: 7px;
background: rgba(245, 158, 11, 0.10);
}
.mockup-blueprint-ok {
color: #bbf7d0;
font-size: 11px;
font-weight: 800;
}
.mockup-canvas-wrap canvas:focus {
outline: 2px solid rgba(251, 146, 60, 0.72);
outline-offset: -2px;
}
.mockup-editor-fields,
.mockup-section-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 12px;
}
.mockup-editor-fields .wide,
.mockup-section-grid .wide,
.mockup-editor-right .wide {
grid-column: 1 / -1;
}
.mockup-section-tabs {
display: grid;
gap: 10px;
margin: 12px 0;
}
.mockup-edit-section {
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px;
background: rgba(255, 255, 255, 0.025);
}
.mockup-upload-row {
display: grid;
grid-template-columns: 132px minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
}
.mockup-upload-row select {
width: 100%;
min-width: 0;
}
.mockup-upload-row input[type="file"],
.mockup-form input[type="file"] {
width: 100%;
min-width: 0;
color: var(--muted);
font-size: 11.5px;
}
.mockup-asset-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 10px;
}
.mockup-asset-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 8px 0;
border-top: 1px solid var(--border);
}
.mockup-asset-row:first-child {
border-top: 0;
padding-top: 0;
}
.mockup-asset-row b {
display: block;
color: var(--text);
font-size: 12px;
overflow-wrap: anywhere;
}
.mockup-asset-row span {
display: block;
margin-top: 2px;
color: var(--muted);
font-size: 11px;
}
.mockup-asset-actions {
display: flex;
gap: 6px;
align-items: center;
}
.mockup-editor-label {
margin-bottom: 8px;
color: var(--muted);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.mockup-history {
margin-top: 14px;
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px;
background: rgba(255, 255, 255, 0.025);
}
.mockup-history-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 0;
border-top: 1px solid var(--border);
}
.mockup-history-row:first-of-type {
border-top: 0;
}
.mockup-history-row span,
.mockup-history-empty {
display: block;
color: var(--muted);
font-size: 11px;
}
/* Create-form live preview (v72) */
.mockup-create-preview {
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px;
background: rgba(15, 23, 42, 0.18);
display: flex;
flex-direction: column;
gap: 10px;
}
.mockup-create-preview-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.mockup-create-preview-head .mockup-editor-label {
margin-bottom: 0;
}
.mockup-create-preview-hint {
color: var(--muted);
font-size: 11px;
font-weight: 700;
}
.mockup-create-canvas-wrap {
position: relative;
}
.mockup-create-canvas-wrap canvas:focus {
outline: 2px solid rgba(56, 189, 248, 0.55);
outline-offset: -2px;
}
.mockup-canvas-help {
position: absolute;
right: 10px;
bottom: 8px;
padding: 4px 8px;
border-radius: 6px;
background: rgba(15, 23, 42, 0.78);
color: #cbd5e1;
font-size: 10px;
font-weight: 700;
opacity: 0;
pointer-events: none;
transition: opacity 120ms ease;
}
.mockup-create-canvas-wrap canvas:focus + .mockup-canvas-hint + .mockup-canvas-help,
.mockup-create-canvas-wrap canvas:focus + .mockup-canvas-help {
opacity: 1;
}
.mockup-create-layer-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.mockup-create-layer-row:empty { display: none; }
.mockup-create-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 9px;
border: 1px solid var(--border);
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
color: var(--text);
font-size: 11px;
cursor: pointer;
}
.mockup-create-chip b {
font-size: 10.5px;
font-weight: 900;
color: #fed7aa;
}
.mockup-create-chip span {
color: var(--muted);
}
.mockup-create-chip.is-active {
border-color: rgba(251, 146, 60, 0.7);
background: rgba(251, 146, 60, 0.15);
}
.mockup-create-chip.is-active span {
color: var(--text);
}
.mockup-placement-foot {
margin-top: 6px;
color: var(--muted);
font-size: 11px;
}
/* AI grader badges + panel (v73) */
.mockup-panel-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
.mockup-panel-title-row .panel-title { margin-bottom: 0; }
.mockup-ai-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 7px;
margin-left: 8px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 900;
border: 1px solid var(--border);
vertical-align: middle;
}
.mockup-ai-badge.ok { color: #bbf7d0; border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.12); }
.mockup-ai-badge.warn { color: #fed7aa; border-color: rgba(251, 146, 60, 0.55); background: rgba(251, 146, 60, 0.14); }
.mockup-ai-badge.bad { color: #fecaca; border-color: rgba(239, 68, 68, 0.55); background: rgba(239, 68, 68, 0.14); }
.mockup-ai-summary {
color: var(--text-2);
font-size: 11.5px;
background: rgba(255, 255, 255, 0.03);
border-left: 3px solid rgba(56, 189, 248, 0.6);
padding: 6px 10px;
border-radius: 6px;
}
.mockup-ai-summary em { color: var(--muted); font-style: normal; }
.mockup-ai-panel {
margin-top: 12px;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
font-size: 12px;
line-height: 1.45;
}
.mockup-ai-panel.idle { color: var(--muted); }
.mockup-ai-panel.ok { border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.08); }
.mockup-ai-panel.warn { border-color: rgba(251, 146, 60, 0.45); background: rgba(251, 146, 60, 0.1); }
.mockup-ai-panel.bad { border-color: rgba(239, 68, 68, 0.45); background: rgba(239, 68, 68, 0.08); }
.mockup-ai-panel.err { border-color: rgba(239, 68, 68, 0.55); background: rgba(239, 68, 68, 0.12); color: #fecaca; }
.mockup-ai-panel-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
margin-bottom: 6px;
}
.mockup-ai-score { color: var(--text); font-weight: 900; }
.mockup-ai-panel-summary { color: var(--text); margin-bottom: 8px; }
.mockup-ai-list { margin-top: 6px; }
.mockup-ai-list b { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.mockup-ai-list ul { margin: 0; padding-left: 18px; }
.mockup-ai-list li { margin-bottom: 2px; }
.mockup-ai-meta { margin-top: 8px; color: var(--muted); font-size: 10.5px; }
/* Per-placement view tabs above the editor canvas */
.mockup-view-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.mockup-view-tabs:empty { display: none; }
.mockup-view-tab {
padding: 5px 10px;
border: 1px solid var(--border);
border-radius: 999px;
background: rgba(255, 255, 255, 0.03);
color: var(--text);
font-size: 11px;
font-weight: 800;
cursor: pointer;
}
.mockup-view-tab span { display: inline-block; }
.mockup-view-tab.is-active {
border-color: rgba(251, 146, 60, 0.7);
background: rgba(251, 146, 60, 0.16);
color: #fed7aa;
}
/* Lead / client / report rows */
.lead-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 12px;
align-items: center;
padding: 10px;
border-radius: 8px;
}
.lead-row:hover { background: rgba(255, 255, 255, 0.03); }
.lead-row.clickable { cursor: pointer; }
.lead-title { font-size: 12.5px; font-weight: 600; }
.lead-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.lead-meta { font-size: 11px; color: var(--muted); }
.clients-table .client-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 0.5fr 1fr auto;
gap: 12px;
align-items: center;
padding: 9px 10px;
border-bottom: 1px solid var(--border);
font-size: 12.5px;
}
.clients-table .client-row.clickable { cursor: pointer; }
.clients-table .client-row.clickable:hover { background: rgba(255, 255, 255, 0.03); }
.repeat-pill {
display: inline-block;
font-size: 9.5px;
font-weight: 700;
padding: 1px 6px;
border-radius: 99px;
background: rgba(34, 197, 94, 0.14);
color: #86efac;
border: 1px solid rgba(34, 197, 94, 0.3);
margin-left: 6px;
vertical-align: 1px;
}
/* Report chart + top clients row */
.report-chart { width: 100%; height: 220px; display: block; }
.topclient-row {
display: grid;
grid-template-columns: 24px 1.5fr 2fr 1fr;
gap: 12px;
align-items: center;
padding: 8px 10px;
border-bottom: 1px solid var(--border);
font-size: 13px;
}
.topclient-row:last-child { border-bottom: none; }
.topclient-rank {
width: 20px; height: 20px;
border-radius: 50%;
background: rgba(255,145,0,0.15);
color: var(--brand);
font-size: 11px;
font-weight: 700;
display: grid; place-items: center;
}
.topclient-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topclient-bar {
height: 6px;
background: rgba(255,255,255,0.05);
border-radius: 99px;
overflow: hidden;
}
.topclient-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--brand), var(--brand-2));
border-radius: 99px;
}
.topclient-total { text-align: right; }
.clients-table .client-row:last-child { border-bottom: none; }
.clients-table .client-row.header {
font-size: 10.5px;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.client-name { font-weight: 600; }
.team-row {
display: grid;
grid-template-columns: 40px 1fr;
gap: 12px;
align-items: center;
padding: 10px;
border-bottom: 1px solid var(--border);
}
.team-row:last-child { border-bottom: none; }
.team-name { font-size: 13px; font-weight: 600; }
.team-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.report-row {
display: flex;
justify-content: space-between;
padding: 9px 10px;
font-size: 12.5px;
border-bottom: 1px solid var(--border);
}
.report-row:last-child { border-bottom: none; }
/* Calendar page */
.cal-day {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 10px;
}
.cal-day-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
font-size: 13px;
}
.cal-day-date { font-weight: 700; }
.cal-day-days { font-size: 11px; color: var(--muted); }
.cal-ev .ev-kind {
font-size: 10px;
color: var(--muted);
padding: 2px 6px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.04);
margin-left: auto;
}
.ev-dot.blue { background: var(--blue); }
/* Info card (stubs) */
.info-card {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 14px;
padding: 22px 24px;
box-shadow: var(--shadow);
}
.info-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.info-card p { font-size: 13px; color: var(--text-2); line-height: 1.55; margin-bottom: 12px; }
.info-card p.muted { color: var(--muted); font-size: 12px; margin-top: 14px; }
.vendor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 14px 0; }
.vendor-card {
display: flex;
flex-direction: column;
border-radius: 14px;
background: var(--surface-2);
border: 1px solid var(--border);
overflow: hidden;
transition: border-color 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
text-decoration: none;
}
.vendor-card:hover {
border-color: rgba(113, 246, 218, 0.4);
transform: translateY(-2px);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.vendor-thumb {
height: 130px;
background-size: cover;
background-position: center;
background-color: rgba(255,255,255,0.02);
}
.vendor-body { padding: 14px 16px; }
.vendor-name { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.vendor-sub { font-size: 12px; color: var(--text-2); margin: 6px 0 10px; line-height: 1.5; }
.vendor-link { font-size: 12px; color: var(--accent); font-weight: 700; letter-spacing: 0.02em; }
/* Hero card — used on Inventory + future "intro" pages */
.hero-card {
position: relative;
border-radius: 18px;
overflow: hidden;
border: 1px solid var(--border);
min-height: 240px;
margin-bottom: 6px;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}
.hero-photo {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
filter: saturate(1.05);
transform: scale(1.04);
transition: transform 6s ease-out;
}
.hero-card:hover .hero-photo { transform: scale(1.08); }
.hero-card::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(120deg, rgba(7,9,17,0.92), rgba(7,9,17,0.55) 60%, rgba(7,9,17,0.2));
}
.hero-overlay {
position: relative;
z-index: 1;
padding: 32px 36px;
max-width: 620px;
}
.hero-badge {
display: inline-block;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.16em;
color: var(--accent);
border: 1px solid rgba(113, 246, 218, 0.35);
background: rgba(113, 246, 218, 0.06);
padding: 4px 10px;
border-radius: 99px;
margin-bottom: 14px;
}
.hero-headline {
font-size: clamp(20px, 2.4vw, 28px);
font-weight: 900;
letter-spacing: -0.025em;
line-height: 1.1;
margin-bottom: 10px;
}
.hero-sub {
font-size: 13.5px;
color: var(--text-2);
line-height: 1.6;
max-width: 520px;
}
.notice {
padding: 16px 20px;
background: rgba(59, 130, 246, 0.08);
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 10px;
color: var(--text-2);
font-size: 13px;
}
.pipe-meta { font-size: 12px; color: var(--muted); margin: 6px 0 10px; }
/* Filter chips */
.filter-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.chip {
font-size: 12px;
font-weight: 600;
padding: 6px 14px;
border-radius: 99px;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.02);
color: var(--text-2);
transition: all 0.12s;
}
.chip:hover { color: var(--text); border-color: var(--border-hi); }
.chip.on {
background: rgba(255, 145, 0, 0.12);
border-color: rgba(255, 145, 0, 0.4);
color: var(--brand);
}
.filter-row {
display: flex;
gap: 14px;
align-items: center;
margin-bottom: 12px;
flex-wrap: wrap;
}
.search-inline {
flex: 1;
min-width: 200px;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
border-radius: 8px;
padding: 7px 12px;
font-family: inherit;
font-size: 12.5px;
outline: none;
}
.search-inline:focus { border-color: var(--brand); }
/* Pipe selector */
.pipe-meta-bar {
display: flex;
align-items: center;
gap: 16px;
padding: 10px 0 14px;
border-bottom: 1px solid var(--border);
margin-bottom: 12px;
}
.pipe-selector { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.pipe-selector select {
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
border-radius: 8px;
padding: 6px 10px;
font-family: inherit;
font-size: 12.5px;
outline: none;
}
.pipe-selector select:focus { border-color: var(--brand); }
.pipe-summary { font-size: 12.5px; color: var(--text-2); margin-right: auto; }
.kan-head-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text); }
.kan-head-meta { font-size: 10.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.kan-source { font-size: 10px; color: var(--muted); margin-top: 3px; font-style: italic; }
/* Task rows */
.task-cockpit {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
gap: 14px;
align-items: stretch;
}
.task-cockpit-grid,
.task-next-lane {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 14px;
box-shadow: var(--shadow);
}
.task-cockpit-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.task-cockpit-card.hot {
border-color: rgba(239, 68, 68, 0.32);
background: rgba(239, 68, 68, 0.08);
}
.task-cockpit-card.wide { grid-column: span 2; }
.task-cockpit-card em {
display: block;
color: var(--muted);
font-size: 11px;
font-style: normal;
margin-top: 2px;
}
.task-next-row {
grid-template-columns: 28px minmax(0, 1fr) auto;
}
.task-next-rank {
width: 28px;
height: 28px;
border-radius: 8px;
display: grid;
place-items: center;
background: rgba(113, 246, 218, 0.12);
color: var(--accent);
font-size: 12px;
font-weight: 800;
}
.task-next-main { min-width: 0; }
.task-next-meta {
color: var(--text-2);
font-size: 11px;
white-space: nowrap;
}
.task-row {
display: grid;
grid-template-columns: 22px 4px 1fr auto;
gap: 12px;
align-items: center;
padding: 10px 12px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border);
margin-bottom: 6px;
cursor: pointer;
transition: border-color 0.12s;
}
.task-row:hover { border-color: var(--border-hi); }
.task-check {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
cursor: pointer;
border-radius: 4px;
}
.task-check:hover { background: rgba(255, 255, 255, 0.05); }
.task-checkbox {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: var(--green);
margin: 0;
}
.task-pri {
width: 4px; height: 100%;
min-height: 34px;
border-radius: 4px;
}
.task-pri.urgent { background: var(--red); }
.task-pri.attention { background: var(--yellow); }
.task-pri.normal { background: rgba(100, 116, 139, 0.6); }
.task-title { font-size: 13px; font-weight: 600; }
.task-job { font-weight: 400; color: var(--muted); font-size: 12px; }
.task-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.sla-overdue { color: var(--red); font-weight: 700; }
.sla-soon { color: var(--yellow); }
.task-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.task-amt { font-size: 13px; font-weight: 700; color: var(--green); }
.bulk-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 900;
display: none;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 12px 24px calc(12px + env(safe-area-inset-bottom));
background: rgba(15, 18, 31, 0.96);
border-top: 1px solid rgba(74, 222, 128, 0.45);
box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.34);
backdrop-filter: blur(16px);
}
.bulk-bar.on { display: flex; }
.bulk-bar-left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.bulk-count {
color: var(--green);
font-size: 13px;
font-weight: 700;
white-space: nowrap;
}
.task-detail { display: flex; flex-direction: column; gap: 14px; }
.td-head { padding: 4px 0 10px; border-bottom: 1px solid var(--border); }
.td-title { font-size: 16px; font-weight: 700; }
.td-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.td-meta {
display: grid;
gap: 10px;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border);
border-radius: 10px;
font-size: 12.5px;
line-height: 1.5;
}
.td-meta .lb {
display: inline-block;
min-width: 80px;
font-size: 10px;
font-weight: 700;
color: var(--muted);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-right: 8px;
}
.td-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-ghost.danger { border-color: rgba(239, 68, 68, 0.3); color: #fca5a5; }
.btn-ghost.danger:hover { background: rgba(239, 68, 68, 0.08); }
/* Team view extras */
.team-row .team-body { min-width: 0; }
.team-row .bar { margin-top: 6px; width: 100%; }
.team-role { color: var(--muted); font-size: 11px; font-weight: 400; }
.team-top { font-size: 11px; color: var(--text-2); margin-top: 4px; }
.tm-av.gray { background: linear-gradient(135deg, #64748b, #475569); }
.bar-fill.gray { background: linear-gradient(90deg, #64748b, #475569); }
.access-request-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
padding: 10px;
border-bottom: 1px solid var(--border);
}
.access-request-row:last-of-type { border-bottom: none; }
.access-request-main { min-width: 0; }
.access-request-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.access-link-note {
color: var(--muted);
font-size: 12px;
padding: 10px 4px 2px;
}
.copy-text {
color: var(--brand);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
user-select: all;
}
@media (max-width: 760px) {
.ev-list-row {
grid-template-columns: 44px minmax(0, 1fr);
align-items: start;
gap: 10px;
}
.ev-list-row .ev-date { height: 44px; }
.ev-right {
grid-column: 2;
justify-content: flex-start;
flex-wrap: wrap;
}
.cal-ev {
align-items: flex-start;
flex-wrap: wrap;
}
.cal-ev .ev-body { flex: 1 1 180px; min-width: 0; }
.cal-ev .ev-title { flex-wrap: wrap; }
.cal-ev .ev-kind { margin-left: 46px; }
.access-request-row { grid-template-columns: 1fr; }
.access-request-actions { justify-content: flex-start; }
}
/* Settings modal */
.settings-section { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.settings-section:last-child { border-bottom: none; padding-bottom: 0; }
.settings-section h3 { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.settings-hint { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.settings-section input[type="text"] {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border);
color: var(--text);
border-radius: 8px;
padding: 9px 11px;
font-family: inherit;
font-size: 13px;
outline: none;
}
.settings-section input[type="text"]:focus { border-color: var(--brand); }
.radio-group { display: flex; flex-direction: column; gap: 8px; }
.radio {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border);
cursor: pointer;
transition: border-color 0.12s;
}
.radio:hover { border-color: var(--border-hi); }
.radio input[type="radio"] { margin-top: 3px; }
.radio span { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.radio span b { color: var(--text); }
/* Funnel toggle */
.toggle-group {
display: inline-flex;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border);
border-radius: 8px;
padding: 2px;
}
.toggle-btn {
font-size: 11.5px;
font-weight: 600;
padding: 4px 12px;
border-radius: 6px;
color: var(--muted);
transition: all 0.12s;
}
.toggle-btn:hover { color: var(--text); }
.toggle-btn.on {
background: var(--brand);
color: #000;
}
/* Staffing warning */
.staffing-warning {
display: flex;
gap: 10px;
align-items: center;
padding: 10px 12px;
border-radius: 10px;
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.35);
color: #fca5a5;
font-size: 12px;
line-height: 1.4;
}
.staffing-warning b { color: #fff; }
.staffing-warning .ic { color: var(--red); width: 16px; height: 16px; flex-shrink: 0; }
/* Checklist */
.checklist { list-style: none; padding: 0; margin: 8px 0; }
.checklist li {
padding: 6px 0;
font-size: 12.5px;
color: var(--text-2);
border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}
.checklist li:last-child { border-bottom: none; }
/* Claim role + supplier deadline pill */
.claim-role { color: var(--muted); font-weight: 400; }
.supply-pill {
display: inline-block;
padding: 2px 8px;
border-radius: 99px;
font-size: 11px;
font-weight: 600;
margin-right: 4px;
}
.supply-pill.overdue { background: rgba(239, 68, 68, 0.18); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.4); }
.supply-pill.urgent { background: rgba(245, 158, 11, 0.18); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.4); }
.supply-pill.soon { background: rgba(59, 130, 246, 0.15); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.3); }
.supply-pill.ok { background: rgba(34, 197, 94, 0.12); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.3); }
.btn-ghost.xs { font-size: 10.5px; padding: 2px 8px; }
/* DTF stage dots */
.stage-dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
margin-right: 6px;
}
.stage-dot.blue { background: var(--blue); }
.stage-dot.purple { background: var(--purple); }
.stage-dot.orange { background: var(--brand); }
.stage-dot.yellow { background: var(--yellow); }
.stage-dot.green { background: var(--green); }
.dtf-kanban { margin-top: 14px; }
.dtf-col { min-width: 200px; max-width: 220px; }
.dtf-card { position: relative; }
.dtf-tool-panel {
margin-bottom: 16px;
padding: 16px;
border: 1px solid var(--border);
border-radius: var(--r);
background: var(--surface-2);
box-shadow: var(--shadow);
}
.dtf-tool-head {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
margin-bottom: 14px;
}
.dtf-tool-sub {
font-size: 12px;
color: var(--muted);
margin-top: -6px;
}
.dtf-trim-grid {
display: grid;
grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.25fr);
gap: 14px;
align-items: stretch;
}
.dtf-dropzone {
position: relative;
min-height: 176px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 9px;
padding: 22px;
border: 1px dashed rgba(148, 163, 184, 0.42);
border-radius: 10px;
background: rgba(255, 255, 255, 0.025);
cursor: pointer;
text-align: center;
transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.dtf-dropzone:hover,
.dtf-dropzone.dragging {
border-color: rgba(255, 145, 0, 0.65);
background: rgba(255, 145, 0, 0.06);
}
.dtf-dropzone.dragging { transform: translateY(-1px); }
.dtf-dropzone input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.dtf-drop-icon {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 10px;
color: #fff;
background: linear-gradient(135deg, rgba(255, 145, 0, 0.92), rgba(59, 130, 246, 0.86));
}
.dtf-drop-title {
font-size: 13px;
font-weight: 800;
color: var(--text);
}
.dtf-drop-meta {
max-width: 100%;
font-size: 11.5px;
color: var(--muted);
overflow-wrap: anywhere;
}
.dtf-size-panel {
padding: 14px;
border: 1px solid var(--border);
border-radius: 10px;
background: rgba(255, 255, 255, 0.025);
}
.dtf-size-title {
font-size: 12px;
font-weight: 800;
margin-bottom: 10px;
}
.dtf-size-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
gap: 10px;
}
.dtf-check {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
font-size: 12px;
color: var(--text-2);
}
.dtf-check input { accent-color: var(--brand); }
.dtf-size-actions {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}
.dtf-size-actions .btn-primary,
.dtf-size-actions .btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-primary.disabled {
opacity: 0.48;
pointer-events: none;
cursor: default;
text-decoration: none;
}
.dtf-trim-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 14px;
}
.dtf-trim-stats > div {
min-width: 0;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 9px;
background: rgba(255, 255, 255, 0.025);
}
.dtf-trim-stats span {
display: block;
color: var(--muted);
font-size: 10.5px;
margin-bottom: 4px;
}
.dtf-trim-stats b {
display: block;
font-size: 11.5px;
color: var(--text-2);
font-weight: 700;
overflow-wrap: anywhere;
}
.dtf-preview-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 14px;
}
.dtf-preview-card {
min-width: 0;
}
.dtf-preview-label {
font-size: 11px;
font-weight: 800;
color: var(--muted);
margin-bottom: 7px;
}
.dtf-preview-card canvas {
width: 100%;
height: auto;
aspect-ratio: 18 / 13;
display: block;
border: 1px solid var(--border-hi);
border-radius: 9px;
background: #f8fafc;
}
.dtf-gang-builder {
display: grid;
gap: 12px;
margin-top: 14px;
padding: 14px;
border: 1px solid rgba(59, 130, 246, 0.20);
border-radius: 10px;
background: rgba(15, 23, 42, 0.42);
}
.dtf-gang-head {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
}
.dtf-gang-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}
.dtf-gang-controls {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px;
align-items: end;
}
.dtf-gang-readout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.dtf-gang-readout > div {
min-width: 0;
padding: 9px 10px;
border: 1px solid var(--border);
border-radius: 8px;
background: rgba(255, 255, 255, 0.025);
}
.dtf-gang-readout span {
display: block;
color: var(--muted);
font-size: 10.5px;
margin-bottom: 4px;
}
.dtf-gang-readout b {
display: block;
color: var(--text-2);
font-size: 11.5px;
overflow-wrap: anywhere;
}
.dtf-gang-readout b.warn {
color: #fde68a;
}
.dtf-gang-preview-card {
margin-top: 0;
}
.stat-val.green { color: var(--green); }
.stat-val.red { color: var(--red); }
b.green { color: var(--green); }
/* Margin chip (inline on tasks + kanban cards) */
.margin-chip {
display: inline-block;
font-size: 10px;
font-weight: 700;
padding: 1px 6px;
border-radius: 99px;
letter-spacing: 0.02em;
vertical-align: 1px;
}
.margin-chip.green { background: rgba(34, 197, 94, 0.14); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.3); }
.margin-chip.yellow { background: rgba(245, 158, 11, 0.14); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.3); }
.margin-chip.red { background: rgba(239, 68, 68, 0.14); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3); }
/* Waiting on client card */
.card.waiting { grid-column: span 3; }
.waiting-li {
cursor: pointer;
display: grid !important;
grid-template-columns: 30px 1fr auto;
gap: 10px;
padding: 9px 8px;
border-radius: 8px;
}
.waiting-li:hover { background: rgba(255, 255, 255, 0.03); }
.waiting-li [data-remind] { align-self: center; }
.waiting-hot { color: var(--red); font-weight: 700; }
.waiting-warm { color: var(--yellow); font-weight: 700; }
.waiting-ok { color: var(--muted); }
/* Reminder draft modal */
.reminder-draft { display: flex; flex-direction: column; gap: 12px; }
.draft-tabs { display: inline-flex; gap: 4px; }
.draft-tabs .chip { cursor: pointer; }
/* Event actions stack */
.ed-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Honest empty states on Overview cards */
.empty-inline {
padding: 12px 4px;
text-align: center;
display: flex;
flex-direction: column;
gap: 10px;
}
.empty-inline p {
font-size: 11.5px;
color: var(--muted);
line-height: 1.5;
}
.empty-inline .btn-ghost {
align-self: center;
}
.dim-val { color: var(--muted) !important; font-size: 14px !important; font-weight: 600 !important; }
.team-empty-state {
display: grid !important;
grid-template-columns: 36px 1fr !important;
gap: 12px;
padding: 8px 0;
}
.team-empty-state .tm-av { align-self: start; }
.team-empty-state .tm-body { min-width: 0; }
.team-empty-state .btn-ghost { display: inline-block; text-decoration: none; }
/* Event Mobile View (deep-linked for staff) */
.event-mobile {
max-width: 460px;
margin: 0 auto;
padding: 20px 16px 40px;
display: flex;
flex-direction: column;
gap: 16px;
font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.em-loading, .em-empty { padding: 24px; text-align: center; color: var(--muted); font-size: 14px; }
.em-card {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 16px;
padding: 20px 22px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.em-card h1, .em-card h2 {
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
}
.em-card h1 { font-size: 22px; margin-bottom: 4px; letter-spacing: -0.02em; }
.em-countdown {
display: inline-block;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 99px;
background: linear-gradient(135deg, var(--brand), var(--brand-2));
color: #000;
margin-bottom: 10px;
}
.em-title { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.em-client { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.em-meta { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--border); padding-top: 14px; }
.em-row { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.em-lbl { flex-shrink: 0; width: 28px; font-size: 16px; text-align: center; }
.em-link { color: var(--brand); text-decoration: none; font-weight: 600; }
.em-link:hover { text-decoration: underline; }
.em-staff-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.em-staff-row:last-child { border-bottom: none; }
.em-staff-avatar {
width: 36px; height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand), var(--brand-2));
color: #000;
display: grid; place-items: center;
font-weight: 700;
font-size: 14px;
}
.em-staff-name { font-size: 15px; font-weight: 600; }
.em-staff-role { font-size: 12px; color: var(--muted); margin-top: 1px; }
.em-checklist { list-style: none; padding: 0; }
.em-checklist li { padding: 10px 0; font-size: 15px; border-bottom: 1px solid var(--border); }
.em-checklist li:last-child { border-bottom: none; }
.em-sub { font-size: 12px; color: var(--muted); margin-top: 10px; font-style: italic; }
.em-notes { font-size: 14px; color: var(--text-2); line-height: 1.5; white-space: pre-wrap; }
.em-error h2 { color: var(--red); }
.em-exit { text-align: center; margin-top: 10px; text-decoration: none; padding: 10px; }
@media (max-width: 380px) {
.em-countdown { font-size: 10px; padding: 2px 8px; }
.em-title { font-size: 20px; }
.em-card { padding: 16px 18px; }
.em-row { font-size: 13px; }
}
/* Shop-floor kiosk mode */
body.kiosk-mode .sidebar { display: none; }
body.kiosk-mode .app { grid-template-columns: 1fr; }
body.kiosk-mode .topbar { display: none; }
body.kiosk-mode .mobile-nav { display: none; }
body.kiosk-mode .main { padding: 0; }
.floor-view {
min-height: 100vh;
background: #090c12;
color: #fff;
padding: 20px 24px 44px;
font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.floor-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 18px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 16px;
}
.floor-title {
font-size: 26px;
font-weight: 800;
letter-spacing: -0.02em;
color: #fff;
}
.floor-subtitle { margin-top: 4px; font-size: 13px; color: var(--muted); }
.floor-meta { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
#floorTime {
font-size: 15px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--text-2);
}
.floor-filter { display: flex; gap: 4px; background: rgba(255,255,255,0.04); padding: 3px; border-radius: 8px; flex-wrap: wrap; }
.floor-filter button {
font-size: 12px;
font-weight: 600;
padding: 7px 10px;
border-radius: 6px;
color: var(--text-2);
transition: all 0.12s;
}
.floor-filter button.on {
background: var(--brand);
color: #000;
}
.floor-filter button:hover:not(.on) { color: #fff; }
.floor-exit {
font-size: 13px;
color: var(--muted);
padding: 7px 12px;
border: 1px solid var(--border);
border-radius: 7px;
text-decoration: none;
background: rgba(255, 255, 255, 0.03);
}
.floor-exit:hover { color: #fff; border-color: var(--border-hi); }
.floor-command {
display: grid;
grid-template-columns: minmax(240px, 420px) 1fr;
gap: 12px;
align-items: center;
margin-bottom: 12px;
}
#floorSearch {
width: 100%;
background: rgba(255, 255, 255, 0.055);
border: 1px solid var(--border);
border-radius: 8px;
padding: 11px 13px;
color: var(--text);
font: inherit;
}
.floor-intel {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
min-height: 42px;
padding: 8px 12px;
border: 1px solid rgba(113, 246, 218, 0.16);
border-radius: 8px;
background: rgba(113, 246, 218, 0.055);
font-size: 12px;
color: var(--muted);
}
.floor-intel b { color: var(--text); }
.floor-intel em { color: var(--accent); font-style: normal; }
.floor-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.floor-stat {
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.035);
border-radius: 8px;
padding: 10px 12px;
}
.floor-stat span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.floor-stat b { display: block; margin-top: 4px; font-size: 22px; color: #fff; }
.floor-stat.warn { border-color: rgba(239, 68, 68, 0.45); background: rgba(239, 68, 68, 0.08); }
.floor-board {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
gap: 10px;
overflow-x: visible;
padding-bottom: 14px;
max-width: 100%;
}
.floor-lane {
min-width: 0;
min-height: 58vh;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
background: rgba(255, 255, 255, 0.025);
display: flex;
flex-direction: column;
}
.floor-lane-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 11px;
border-bottom: 1px solid var(--border);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--text);
}
.floor-lane-head b {
min-width: 24px;
text-align: center;
border-radius: 99px;
padding: 2px 7px;
background: rgba(255, 255, 255, 0.07);
color: var(--muted);
}
.floor-dropzone {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
padding: 9px;
min-height: 220px;
}
.floor-dropzone.over {
outline: 2px solid var(--accent);
outline-offset: -4px;
background: rgba(113, 246, 218, 0.06);
}
.floor-job-card {
background: #111721;
border: 1px solid rgba(255, 255, 255, 0.1);
border-left: 4px solid var(--muted);
border-radius: 8px;
padding: 10px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}
.floor-job-card.dragging { opacity: 0.55; transform: scale(0.98); }
.floor-job-card.overdue { border-left-color: var(--red); }
.floor-job-card.today { border-left-color: #f59e0b; }
.floor-job-card.soon { border-left-color: var(--brand); }
.floor-job-card.week { border-left-color: var(--blue); }
.floor-job-card.future { border-left-color: var(--green); }
.floor-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.floor-chip,
.floor-urgency {
min-width: 0;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 3px 7px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
color: var(--muted);
}
.floor-urgency {
color: #fff;
white-space: nowrap;
}
.floor-job-card.overdue .floor-urgency { background: var(--red); color: #fff; }
.floor-job-card.today .floor-urgency { background: #f59e0b; color: #000; }
.floor-card-main {
width: 100%;
display: block;
text-align: left;
padding: 0;
border: 0;
background: transparent;
color: inherit;
}
.floor-card-title {
display: block;
font-size: 15px;
font-weight: 800;
line-height: 1.25;
}
.floor-card-job { display: block; font-size: 12px; color: var(--text-2); margin-top: 3px; line-height: 1.35; }
.floor-card-meta,
.floor-card-pills,
.floor-card-actions {
display: flex;
gap: 6px;
margin-top: 9px;
flex-wrap: wrap;
align-items: center;
}
.floor-card-meta span {
font-size: 11px;
color: var(--muted);
padding: 3px 6px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.045);
}
.floor-pill {
font-size: 10.5px;
font-weight: 600;
padding: 3px 7px;
border-radius: 999px;
color: var(--muted);
background: rgba(255, 255, 255, 0.055);
}
.floor-pill.ok { color: #86efac; background: rgba(34, 197, 94, 0.12); }
.floor-pill.warn { color: #fcd34d; background: rgba(245, 158, 11, 0.12); }
.floor-pill.bad { color: #fca5a5; background: rgba(239, 68, 68, 0.14); }
.floor-card-actions button {
flex: 1 1 92px;
min-height: 30px;
border: 1px solid var(--border);
border-radius: 6px;
background: rgba(255, 255, 255, 0.04);
color: var(--text-2);
font-size: 11px;
font-weight: 700;
}
.floor-card-actions button:hover { color: #fff; border-color: var(--border-hi); }
.floor-move-select {
width: 100%;
margin-top: 8px;
padding: 7px 8px;
border-radius: 6px;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.045);
color: var(--text);
font: inherit;
font-size: 12px;
}
.floor-empty {
padding: 80px 24px;
text-align: center;
font-size: 18px;
color: var(--green);
font-weight: 700;
}
.floor-empty-lane {
display: grid;
place-items: center;
min-height: 70px;
border: 1px dashed rgba(255, 255, 255, 0.12);
border-radius: 7px;
color: var(--muted);
font-size: 12px;
}
.floor-audit-panel {
margin-top: 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: rgba(255, 255, 255, 0.025);
overflow: hidden;
}
.floor-audit-head {
padding: 10px 12px;
border-bottom: 1px solid var(--border);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
}
.floor-audit-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; }
.floor-audit-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 8px;
align-items: center;
padding: 9px 12px;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
font-size: 12px;
}
.floor-audit-row b { color: var(--text); }
.floor-audit-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.floor-audit-row em { color: var(--muted); font-style: normal; white-space: nowrap; }
.floor-detail .td-actions { align-items: stretch; }
@media (max-width: 900px) {
.floor-view { padding: 14px 12px 36px; }
.floor-header { flex-direction: column; align-items: stretch; }
.floor-meta { justify-content: flex-start; }
.floor-command { grid-template-columns: 1fr; }
.floor-intel { justify-content: flex-start; flex-wrap: wrap; }
.floor-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.floor-board { display: grid; grid-template-columns: 1fr; overflow: visible; }
.floor-lane { min-height: 0; }
}
/* Margin cards + table */
.margin-cards {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 12px;
}
.margin-cards .stat-card { padding: 16px 18px; }
.margin-cards .margin-primary {
background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(34,197,94,0.02));
border-color: rgba(34,197,94,0.25);
}
.stat-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
.stat-sub.green { color: var(--green); }
.stat-sub.red { color: #fca5a5; }
.stat-val.green { color: var(--green); }
.stat-val.red { color: #fca5a5; }
b.green { color: var(--green); }
b.red { color: #fca5a5; }
.margin-table-head, .margin-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1.2fr;
gap: 10px;
align-items: center;
padding: 9px 10px;
font-size: 12px;
}
.margin-table-head {
font-size: 10.5px;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
border-bottom: 1px solid var(--border);
}
.margin-row {
border-bottom: 1px solid var(--border);
}
.margin-row:last-child { border-bottom: none; }
.margin-contact { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.margin-note em { color: var(--muted); font-size: 10.5px; }
.kpi-link { color: var(--brand); text-decoration: none; font-weight: 600; }
.kpi-link:hover { text-decoration: underline; }
@media (max-width: 900px) {
.margin-cards { grid-template-columns: 1fr; }
.margin-table-head, .margin-row { grid-template-columns: 2fr 1fr 1fr; }
.margin-table-head > :nth-child(n+4), .margin-row > :nth-child(n+4):not(:last-child) { display: none; }
}
/* Health chip in topbar */
.health-chip {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 10px;
background: var(--surface);
border: 1px solid var(--border);
font-size: 11.5px;
font-weight: 600;
color: var(--text-2);
transition: all 0.12s;
}
.health-chip:hover { border-color: var(--border-hi); color: var(--text); }
.health-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--muted);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.04);
flex-shrink: 0;
}
.health-dot.ok { background: var(--green); box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15); }
.health-dot.warn { background: var(--yellow); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15); }
.health-dot.err { background: var(--red); box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15); animation: pulse-err 2s ease-in-out infinite; }
@keyframes pulse-err { 50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.35); } }
/* Health drawer */
.health-drawer-body { display: flex; flex-direction: column; gap: 14px; padding: 10px 4px; }
.health-summary {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border);
border-radius: 10px;
font-size: 12.5px;
}
.health-ok { color: var(--green); font-weight: 600; }
.health-degraded { color: #fcd34d; font-weight: 600; }
.health-checked { color: var(--muted); font-size: 11px; }
.health-rows { display: flex; flex-direction: column; gap: 6px; }
.health-row {
padding: 10px 12px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border);
}
.health-row.err { border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.04); }
.health-row-head { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.health-row-name { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; color: var(--text-2); }
.health-row-status { margin-left: auto; font-size: 11px; color: var(--muted); font-weight: 500; }
.health-row.err .health-row-status { color: #fca5a5; }
.health-row-detail { font-size: 11px; color: var(--muted); margin-top: 4px; padding-left: 18px; line-height: 1.5; }
.health-foot { padding-top: 6px; }
/* Drawer sections */
.drawer-section { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.drawer-section-head {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
padding: 6px 8px;
}
.staffing-gap.err { border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.04); }
.staffing-gap.warn { border-color: rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.04); }
/* Alerts drawer */
.drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(3px);
z-index: 900;
display: flex;
justify-content: flex-end;
animation: modalIn 0.18s ease-out;
}
.drawer {
width: min(440px, 96vw);
background: var(--surface-2);
border-left: 1px solid var(--border-hi);
box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
height: 100vh;
animation: drawerSlide 0.22s ease-out;
}
@keyframes drawerSlide { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.drawer-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 18px;
border-bottom: 1px solid var(--border);
}
.drawer-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.drawer-body {
flex: 1;
overflow-y: auto;
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
}
.alert-item {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 10px;
align-items: center;
padding: 10px 12px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border);
cursor: pointer;
transition: border-color 0.12s;
}
.alert-item:hover { border-color: var(--border-hi); }
.alert-item .alert-ico {
width: 30px; height: 30px;
border-radius: 8px;
display: grid; place-items: center;
}
.alert-item .alert-ico.red { background: rgba(239, 68, 68, 0.14); color: var(--red); }
.alert-item .alert-ico.yellow { background: rgba(245, 158, 11, 0.14); color: var(--yellow); }
.alert-item .alert-ico.blue { background: rgba(59, 130, 246, 0.14); color: var(--blue); }
.alert-item .alert-title { font-size: 12.5px; font-weight: 600; }
.alert-item .alert-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
/* Agent command center */
.agent-page {
display: flex;
flex-direction: column;
gap: 14px;
}
.agent-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.agent-kpi {
min-height: 82px;
border: 1px solid var(--border);
border-radius: 8px;
background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.agent-kpi span {
color: var(--muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0;
}
.agent-kpi b {
font-size: 26px;
line-height: 1;
}
.agent-layout,
.agent-board {
display: grid;
grid-template-columns: minmax(360px, 1fr) minmax(420px, 1.2fr);
gap: 14px;
margin-bottom: 14px;
}
.agent-board {
grid-template-columns: minmax(520px, 1.35fr) minmax(320px, .8fr);
}
.agent-board-wide {
grid-template-columns: 1fr;
}
.agent-panel {
border: 1px solid var(--border);
border-radius: 8px;
background: rgba(255,255,255,.026);
min-width: 0;
overflow: hidden;
}
.agent-panel-head {
min-height: 58px;
padding: 14px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.agent-panel-head h2 {
font-size: 14px;
line-height: 1.2;
}
.agent-panel-head p {
margin-top: 2px;
color: var(--muted);
font-size: 11.5px;
}
.agent-map {
position: relative;
height: 410px;
min-height: 360px;
background:
linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
background-size: 34px 34px;
}
.agent-map-lines {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.agent-node {
position: absolute;
width: 94px;
min-height: 64px;
transform: translate(-50%, -50%);
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--agent-color), transparent 45%);
background: rgba(12,15,26,.94);
box-shadow: 0 10px 24px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.03) inset;
display: grid;
place-items: center;
gap: 3px;
padding: 8px;
z-index: 2;
}
.agent-node span {
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: 50%;
background: color-mix(in srgb, var(--agent-color), transparent 76%);
color: var(--text);
font-size: 10px;
font-weight: 800;
}
.agent-node b {
font-size: 11px;
}
.agent-node.running,
.agent-node.active {
box-shadow: 0 0 0 1px color-mix(in srgb, var(--agent-color), transparent 40%), 0 0 28px color-mix(in srgb, var(--agent-color), transparent 74%);
}
.agent-node.queued span { background: rgba(255,145,0,.24); }
.agent-node.paused,
.agent-node.offline {
opacity: .58;
}
.agent-roster {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
padding: 12px;
}
.agent-card {
border: 1px solid var(--border);
border-radius: 8px;
background: rgba(10,13,22,.62);
padding: 12px;
min-width: 0;
}
.agent-card-top {
display: grid;
grid-template-columns: 34px 1fr auto;
gap: 10px;
align-items: center;
}
.agent-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
display: grid;
place-items: center;
background: color-mix(in srgb, var(--agent-color), transparent 76%);
color: var(--text);
font-size: 11px;
font-weight: 800;
}
.agent-name {
font-size: 13px;
font-weight: 800;
}
.agent-lane {
color: var(--muted);
font-size: 11px;
}
.agent-status {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 22px;
padding: 3px 7px;
border-radius: 999px;
border: 1px solid var(--border);
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0;
color: var(--text-2);
background: rgba(255,255,255,.035);
}
.agent-status.running,
.agent-status.active {
color: var(--accent);
border-color: rgba(113,246,218,.32);
background: rgba(113,246,218,.08);
}
.agent-status.queued,
.agent-status.acknowledged {
color: var(--yellow);
border-color: rgba(245,158,11,.32);
background: rgba(245,158,11,.08);
}
.agent-status.blocked,
.agent-status.failed,
.agent-status.attention {
color: var(--red);
border-color: rgba(239,68,68,.32);
background: rgba(239,68,68,.08);
}
.agent-status.done {
color: var(--green);
border-color: rgba(34,197,94,.32);
background: rgba(34,197,94,.08);
}
.agent-status.paused,
.agent-status.offline,
.agent-status.cancelled,
.agent-status.open {
color: var(--muted);
}
.agent-launcher {
margin-bottom: 14px;
}
.agent-launcher-body {
display: grid;
grid-template-columns: minmax(0, 1fr) 220px;
gap: 12px;
padding: 12px;
}
.agent-template-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.agent-template,
.agent-thread,
.agent-queue-item,
.agent-link-title {
appearance: none;
border: 0;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.agent-template {
min-height: 72px;
border: 1px solid var(--border);
border-radius: 8px;
background: rgba(10,13,22,.58);
padding: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.agent-template:hover,
.agent-thread:hover,
.agent-queue-item:hover {
border-color: var(--border-hi);
background: rgba(255,255,255,.04);
}
.agent-template b {
font-size: 12.5px;
}
.agent-template span {
color: var(--muted);
font-size: 11px;
}
.agent-launcher-side {
border: 1px solid var(--border);
border-radius: 8px;
background: rgba(255,255,255,.022);
padding: 10px;
display: grid;
gap: 8px;
}
.agent-launcher-side span {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--muted);
font-size: 11.5px;
}
.agent-launcher-side b {
color: var(--text);
font-size: 18px;
}
.agent-policy-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
padding: 0 12px 12px;
}
.agent-policy-row span {
border: 1px solid rgba(113,246,218,.2);
border-radius: 8px;
background: rgba(113,246,218,.055);
color: var(--text-2);
font-size: 11px;
line-height: 1.35;
padding: 9px 10px;
}
.agent-card-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 10px 0;
color: var(--muted);
font-size: 10.5px;
}
.agent-card-meta span {
border: 1px solid var(--border);
border-radius: 999px;
padding: 3px 7px;
background: rgba(255,255,255,.025);
}
.agent-current {
min-height: 36px;
color: var(--text-2);
font-size: 12px;
line-height: 1.35;
}
.agent-card-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin: 10px 0;
}
.agent-card-stats span {
border-radius: 7px;
background: rgba(255,255,255,.035);
padding: 7px 6px;
color: var(--text-2);
font-size: 10.5px;
text-align: center;
}
.agent-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
min-height: 24px;
}
.agent-tags span {
color: var(--muted);
border: 1px solid var(--border);
border-radius: 999px;
padding: 3px 7px;
font-size: 10.5px;
}
.agent-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.agent-queue-grid {
display: grid;
grid-template-columns: repeat(5, minmax(170px, 1fr));
gap: 10px;
padding: 12px;
}
.agent-queue-card {
border: 1px solid var(--border);
border-radius: 8px;
background: rgba(10,13,22,.5);
min-width: 0;
overflow: hidden;
}
.agent-queue-head {
padding: 9px 10px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
gap: 8px;
align-items: center;
}
.agent-queue-head b {
font-size: 12px;
}
.agent-queue-head span,
.agent-queue-empty {
color: var(--muted);
font-size: 11px;
}
.agent-queue-empty {
padding: 12px 10px;
}
.agent-queue-item {
width: 100%;
min-height: 76px;
border: 0;
border-bottom: 1px solid var(--border);
background: transparent;
padding: 9px 10px;
display: grid;
gap: 5px;
}
.agent-queue-item:last-child {
border-bottom: 0;
}
.agent-queue-item b {
font-size: 12px;
line-height: 1.25;
}
.agent-queue-item em {
color: var(--muted);
font-size: 10.5px;
font-style: normal;
}
.agent-empty-pad {
padding: 12px;
}
.agent-message-list {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
max-height: 610px;
overflow: auto;
}
.agent-message {
display: grid;
grid-template-columns: 1fr 172px;
gap: 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: rgba(10,13,22,.56);
padding: 12px;
}
.agent-message.running {
border-color: rgba(113,246,218,.24);
}
.agent-message.queued {
border-color: rgba(255,145,0,.2);
}
.agent-message-route {
color: var(--muted);
font-size: 11px;
text-transform: uppercase;
font-weight: 800;
letter-spacing: 0;
}
.agent-message-route span {
color: rgba(238,243,255,.35);
margin: 0 4px;
}
.agent-message-subject {
margin-top: 4px;
font-weight: 800;
font-size: 13px;
}
.agent-message-trace {
margin-top: 2px;
color: rgba(238,243,255,.38);
font-size: 10.5px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.agent-message-body {
margin-top: 5px;
color: var(--text-2);
font-size: 12px;
}
.agent-message-output {
margin-top: 8px;
border-left: 2px solid var(--green);
padding-left: 8px;
color: var(--muted);
font-size: 11.5px;
}
.agent-message-output.err {
border-left-color: var(--red);
color: #fca5a5;
}
.agent-message-meta {
margin-top: 3px;
color: rgba(238,243,255,.44);
font-size: 10.5px;
}
.agent-message-side {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 7px;
}
.agent-message-time {
color: var(--muted);
font-size: 11px;
}
.agent-message-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 5px;
}
.agent-timeline {
display: flex;
flex-direction: column;
gap: 7px;
padding: 12px;
max-height: 610px;
overflow: auto;
}
.agent-mission-list,
.agent-thread-list {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
max-height: 470px;
overflow: auto;
}
.agent-mission {
display: grid;
grid-template-columns: 1fr 126px;
gap: 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: rgba(10,13,22,.56);
padding: 12px;
}
.agent-mission.running {
border-color: rgba(113,246,218,.24);
}
.agent-mission.attention {
border-color: rgba(239,68,68,.3);
}
.agent-link-title {
display: block;
width: 100%;
margin-top: 4px;
padding: 0;
background: transparent;
font-weight: 800;
font-size: 13px;
}
.agent-link-title:hover {
color: var(--accent);
}
.agent-thread {
width: 100%;
min-height: 86px;
border: 1px solid var(--border);
border-radius: 8px;
background: rgba(10,13,22,.56);
padding: 10px;
display: grid;
gap: 5px;
}
.agent-thread b {
font-size: 12.5px;
}
.agent-thread em,
.agent-thread code {
color: var(--muted);
font-size: 10.5px;
font-style: normal;
}
.agent-thread code {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.agent-thread-modal {
display: grid;
gap: 12px;
}
.agent-thread-summary {
border: 1px solid var(--border);
border-radius: 8px;
background: rgba(255,255,255,.03);
padding: 10px;
display: grid;
gap: 4px;
}
.agent-thread-summary span {
color: var(--muted);
font-size: 11px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.agent-thread-messages,
.modal-list {
max-height: min(58vh, 620px);
overflow: auto;
}
.agent-thread-message {
border: 1px solid var(--border);
border-radius: 8px;
background: rgba(10,13,22,.56);
padding: 10px;
margin-bottom: 8px;
}
.agent-check-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.agent-check {
min-height: 58px;
border: 1px solid var(--border);
border-radius: 8px;
background: rgba(255,255,255,.025);
padding: 9px 10px;
display: grid;
grid-template-columns: auto 1fr;
column-gap: 8px;
align-items: center;
}
.agent-check input {
grid-row: span 2;
}
.agent-check span {
font-size: 12.5px;
font-weight: 800;
}
.agent-check em {
color: var(--muted);
font-size: 10.5px;
font-style: normal;
min-width: 0;
}
.agent-event {
display: grid;
grid-template-columns: 12px 1fr auto;
gap: 9px;
align-items: start;
border-bottom: 1px solid var(--border);
padding: 8px 0;
}
.agent-event:last-child {
border-bottom: 0;
}
.agent-event-dot {
width: 8px;
height: 8px;
margin-top: 5px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px rgba(113,246,218,.08);
}
.agent-event-title {
font-size: 11.5px;
font-weight: 800;
}
.agent-event-sub,
.agent-event time {
color: var(--muted);
font-size: 11px;
}
/* Loading bar */
.loading-bar {
position: fixed;
top: 0; left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--brand), transparent);
background-size: 200% 100%;
animation: loadingSlide 1.2s infinite linear;
z-index: 2000;
}
@keyframes loadingSlide { to { background-position: -200% 0; } }
/* ═══════════════════════════════════════════════════════════════
Responsive
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1400px) {
.monday-start { grid-template-columns: 1fr 1fr; }
.monday-sources { grid-column: 1 / -1; }
.kpi-row { grid-column: span 12; }
.revenue { grid-column: span 8; }
.funnel { grid-column: span 4; }
.cal { grid-column: span 6; grid-row: auto; }
.qa { grid-column: span 6; }
.alerts { grid-column: span 12; }
.agenda, .waiting, .priorities, .speed, .team { grid-column: span 6; }
.agent-layout, .agent-board { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
.app { grid-template-columns: 68px 1fr; }
.sidebar { padding: 16px 8px; }
.brand-copy, .nav-item span, .side-panel, .side-foot span, .focus-row > div:last-child { display: none; }
.nav-item { justify-content: center; padding: 10px; }
.nav-badge { position: absolute; top: 2px; right: 2px; }
.monday-start,
.task-cockpit { grid-template-columns: 1fr; }
.monday-sources { grid-column: auto; }
.event-strip { grid-template-columns: 1fr; }
.kpi-row { grid-template-columns: repeat(2, 1fr); }
.alerts { grid-template-columns: repeat(2, 1fr); }
.agent-kpis, .agent-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.agent-launcher-body { grid-template-columns: 1fr; }
.agent-policy-row { grid-template-columns: 1fr; }
.agent-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.agent-queue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.agent-message { grid-template-columns: 1fr; }
.agent-mission { grid-template-columns: 1fr; }
.agent-message-side { align-items: flex-start; }
.agent-message-actions { justify-content: flex-start; }
.mockup-grid { grid-template-columns: 1fr; }
.mockup-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mockup-placement-grid { grid-template-columns: 1fr; }
.mockup-layer-dock { grid-template-columns: 1fr; }
.mockup-blueprint-head,
.dtf-gang-head { flex-direction: column; align-items: stretch; }
.dtf-trim-grid { grid-template-columns: 1fr; }
.dtf-size-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dtf-trim-stats { grid-template-columns: 1fr; }
.dtf-gang-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dtf-gang-readout { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
.monday-stats,
.task-cockpit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.task-cockpit-card.wide { grid-column: span 2; }
.monday-task,
.task-next-row { grid-template-columns: 24px minmax(0, 1fr); }
.monday-task i,
.task-next-meta { grid-column: 2; }
.revenue, .funnel, .cal, .qa, .agenda, .waiting, .priorities, .speed, .team { grid-column: span 12; }
.kpi-row { grid-template-columns: 1fr; }
.alerts { grid-template-columns: 1fr; }
.topbar-right { gap: 6px; }
.user-meta { display: none; }
.kbd { display: none; }
.health-chip span:not(.health-dot) { display: none; }
.agent-kpis, .agent-roster { grid-template-columns: 1fr; }
.agent-template-grid,
.agent-queue-grid,
.agent-check-grid { grid-template-columns: 1fr; }
.agent-map { height: 520px; }
.mockup-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mockup-preset-grid { grid-template-columns: 1fr; }
.mockup-fields { grid-template-columns: 1fr; }
.mockup-placement-fields { grid-template-columns: 1fr; }
.mockup-job { grid-template-columns: 1fr; }
.mockup-preview { width: 100%; max-height: 280px; }
.mockup-editor-modal { width: calc(100vw - 18px); max-height: calc(100vh - 18px); }
.mockup-editor-body { grid-template-columns: 1fr; }
.mockup-editor-fields,
.mockup-section-grid { grid-template-columns: 1fr; }
.mockup-editor-preview,
.mockup-editor-empty { max-height: 300px; }
.mockup-upload-row,
.mockup-asset-row { grid-template-columns: 1fr; }
.dtf-preview-grid { grid-template-columns: 1fr; }
.dtf-size-fields { grid-template-columns: 1fr; }
.dtf-gang-controls { grid-template-columns: 1fr; }
.mockup-blueprint-actions .btn-ghost,
.mockup-blueprint-sizes .btn-ghost,
.dtf-gang-actions .btn-ghost { flex: 1; justify-content: center; }
.dtf-size-actions { justify-content: stretch; }
.dtf-size-actions .btn-primary,
.dtf-size-actions .btn-ghost { flex: 1; justify-content: center; }
}
@media (max-width: 480px) {
/* iPhone-class: collapse sidebar entirely, true single-column */
.app { grid-template-columns: 1fr; }
.sidebar { display: none; }
.main { padding: 12px 14px calc(92px + env(safe-area-inset-bottom)); }
.topbar {
position: sticky;
top: 0;
z-index: 120;
background: rgba(7, 9, 17, 0.86);
backdrop-filter: blur(14px);
margin: -12px -14px 12px;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
}
.search { min-width: 0; padding: 8px 10px; }
.search input { font-size: 12px; }
.date-pill,
.claude-btn,
#settingsBtn {
display: none;
}
.mobile-nav {
position: fixed;
left: 10px;
right: 10px;
bottom: calc(10px + env(safe-area-inset-bottom));
z-index: 860;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 4px;
padding: 8px;
border: 1px solid var(--border-hi);
border-radius: 14px;
background: rgba(10, 13, 22, 0.94);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.48);
backdrop-filter: blur(18px);
}
.bulk-bar {
left: 10px;
right: 10px;
bottom: calc(78px + env(safe-area-inset-bottom));
padding: 10px;
border: 1px solid rgba(74, 222, 128, 0.45);
border-radius: 12px;
}
.bulk-bar-left { gap: 6px; }
.bulk-count { font-size: 12px; }
.mobile-nav-item {
min-width: 0;
min-height: 50px;
border-radius: 10px;
display: grid;
place-items: center;
align-content: center;
gap: 3px;
color: var(--muted);
font-size: 10px;
font-weight: 700;
position: relative;
}
.mobile-nav-item .ic {
width: 18px;
height: 18px;
}
.mobile-nav-item.on {
color: var(--text);
background: rgba(255, 145, 0, 0.16);
box-shadow: 0 0 0 1px rgba(255, 145, 0, 0.24) inset;
}
.mobile-nav-item.on .ic {
color: var(--brand);
}
.mobile-nav-item .nav-badge {
position: absolute;
top: 1px;
right: 1px;
min-width: 17px;
padding: 0 4px;
font-size: 9px;
line-height: 16px;
margin-left: 0;
border: 2px solid rgba(10, 13, 22, 0.94);
}
.monday-title { font-size: 20px; }
.monday-stats { grid-template-columns: 1fr 1fr; }
.monday-stats b,
.task-cockpit-card b { font-size: 17px; }
.task-cockpit-grid { grid-template-columns: 1fr; }
.task-cockpit-card.wide { grid-column: auto; }
.event-strip { grid-template-columns: 1fr; }
.margin-cards { grid-template-columns: 1fr; }
.funnel-wrap { grid-template-columns: 1fr; }
.funnel-svg { display: none; }
.view-head { flex-direction: column; align-items: flex-start; gap: 10px; }
.view-title { font-size: 18px; }
.view-actions {
width: 100%;
display: grid;
grid-template-columns: 1fr;
}
.view-actions .btn-primary,
.view-actions .btn-ghost {
width: 100%;
justify-content: center;
}
.agent-layout,
.agent-board {
gap: 10px;
margin-bottom: 10px;
}
.agent-map {
height: 330px;
min-height: 300px;
}
.agent-node {
width: 76px;
min-height: 58px;
padding: 6px;
}
.agent-node b {
font-size: 10px;
}
.agent-kpi {
min-height: 68px;
}
.agent-kpi b {
font-size: 22px;
}
.agent-panel-head {
padding: 12px;
align-items: flex-start;
}
.agent-card-meta span,
.agent-tags span {
max-width: 100%;
overflow-wrap: anywhere;
}
.agent-message,
.agent-mission {
padding: 10px;
}
.agent-message-actions {
width: 100%;
}
.agent-message-actions .btn-ghost {
flex: 1;
justify-content: center;
}
}
/* Subtle hover elevation on dashboard + kanban cards for affordance */
.card { transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s; }
.kan-card { transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s; }
.kan-card:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25); }
/* Art separations workbench */
.sep-shell {
display: grid;
grid-template-columns: 300px minmax(320px, 1fr);
gap: 16px;
align-items: start;
min-width: 0;
max-width: 100%;
}
.sep-panel,
.sep-stage,
.sep-channel-panel,
.sep-export-panel {
background: rgba(15, 23, 42, 0.72);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
}
.sep-intake,
.sep-controls,
.sep-source-panel {
padding: 16px;
}
.sep-controls {
grid-column: 1;
}
.sep-source-panel {
grid-column: 1;
}
.sep-stage {
grid-column: 2;
grid-row: 1 / span 3;
padding: 16px;
min-width: 0;
}
.sep-stage .dtf-trim-grid {
grid-template-columns: 1fr;
}
.sep-dropzone {
position: relative;
min-height: 164px;
display: grid;
place-items: center;
gap: 8px;
text-align: center;
border: 1px dashed rgba(148, 163, 184, 0.42);
border-radius: var(--r);
background:
linear-gradient(135deg, rgba(255, 145, 0, 0.12), rgba(59, 130, 246, 0.08)),
rgba(2, 6, 23, 0.28);
cursor: pointer;
}
.sep-dropzone:hover,
.sep-dropzone.dragging {
border-color: rgba(255, 145, 0, 0.72);
background:
linear-gradient(135deg, rgba(255, 145, 0, 0.18), rgba(34, 197, 94, 0.10)),
rgba(2, 6, 23, 0.34);
}
.sep-dropzone input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.sep-mode-row,
.sep-preset-row,
.sep-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 14px;
}
.sep-actions .btn-primary,
.sep-actions .btn-ghost {
flex: 1;
justify-content: center;
}
.sep-profile-card {
margin-top: 14px;
padding: 12px;
border: 1px solid rgba(255, 145, 0, 0.28);
border-radius: var(--r-sm);
background: rgba(255, 145, 0, 0.08);
}
.sep-profile-card .fld {
margin: 0;
}
.sep-profile-title {
margin-top: 10px;
color: var(--text);
font-size: 13px;
font-weight: 900;
}
.sep-profile-metrics {
margin-top: 4px;
color: var(--text);
font-size: 12px;
font-weight: 800;
}
.sep-profile-hint {
margin-top: 4px;
color: var(--muted);
font-size: 11px;
line-height: 1.35;
}
.sep-status {
margin-top: 12px;
min-height: 38px;
padding: 10px 12px;
border-radius: var(--r-sm);
color: var(--text-2);
background: rgba(2, 6, 23, 0.28);
border: 1px solid rgba(148, 163, 184, 0.14);
font-size: 12px;
line-height: 1.4;
}
.sep-status.err {
color: #fecaca;
border-color: rgba(239, 68, 68, 0.36);
background: rgba(127, 29, 29, 0.18);
}
.sep-control-grid {
display: grid;
gap: 12px;
}
.sep-range {
display: grid;
gap: 7px;
}
.sep-range span {
display: flex;
justify-content: space-between;
gap: 12px;
color: var(--text-2);
font-size: 12px;
}
.sep-range b {
font-weight: 700;
color: var(--text);
}
.sep-range em {
font-style: normal;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.sep-range input[type="range"] {
width: 100%;
accent-color: var(--brand);
}
.sep-toggle-grid {
display: grid;
gap: 8px;
margin-top: 16px;
}
.sep-size-row {
display: grid;
gap: 10px;
margin-top: 14px;
}
.sep-job-row {
margin-top: 0;
margin-bottom: 14px;
}
.sep-advanced {
margin-top: 14px;
border-top: 1px solid rgba(148, 163, 184, 0.14);
padding-top: 12px;
}
.sep-advanced summary {
cursor: pointer;
color: var(--text);
font-size: 13px;
font-weight: 800;
}
.emb-tune {
border: 1px solid rgba(148, 163, 184, 0.14);
border-radius: var(--r-sm);
padding: 0;
background: rgba(2, 6, 23, 0.22);
}
.emb-tune summary {
padding: 11px 12px;
}
.emb-tune[open] {
padding-bottom: 12px;
}
.emb-tune[open] .sep-control-grid,
.emb-tune[open] .sep-toggle-grid {
padding: 0 12px;
}
.sep-edit-panel {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(148, 163, 184, 0.14);
}
.sep-edit-tools {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.sep-edit-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 12px;
}
.sep-picker-readout {
min-height: 36px;
margin-top: 10px;
padding: 9px 10px;
border-radius: var(--r-sm);
border: 1px solid rgba(148, 163, 184, 0.14);
background: rgba(2, 6, 23, 0.26);
color: var(--muted);
font-size: 11px;
line-height: 1.35;
}
.sep-mockup-list {
display: grid;
gap: 8px;
max-height: 260px;
overflow: auto;
}
.sep-mockup-source {
display: grid;
gap: 8px;
width: 100%;
padding: 10px;
border-radius: var(--r-sm);
border: 1px solid rgba(148, 163, 184, 0.14);
background: rgba(2, 6, 23, 0.24);
color: var(--text);
text-align: left;
}
.sep-mockup-source:hover {
border-color: rgba(255, 145, 0, 0.45);
}
.sep-mockup-source-main {
display: grid;
gap: 3px;
min-width: 0;
}
.sep-mockup-source-actions {
display: grid;
grid-template-columns: minmax(72px, 0.8fr) minmax(132px, 1.2fr);
gap: 8px;
}
.sep-mockup-source-actions .btn-primary,
.sep-mockup-source-actions .btn-ghost {
width: 100%;
justify-content: center;
min-height: 34px;
}
.sep-mockup-source-intent {
padding: 6px 8px;
border-radius: 8px;
border: 1px solid rgba(34, 197, 94, 0.18);
background: rgba(34, 197, 94, 0.08);
color: #bbf7d0;
font-size: 10.5px;
font-weight: 800;
}
.sep-mockup-source span,
.sep-mockup-source em {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--muted);
font-size: 11px;
font-style: normal;
}
.sep-flow-panel {
padding: 14px;
margin-bottom: 12px;
border-radius: var(--r-lg);
border: 1px solid rgba(148, 163, 184, 0.16);
background: rgba(15, 23, 42, 0.56);
}
.sep-flow-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.sep-flow-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
min-width: 0;
}
.sep-readiness-card {
display: grid;
grid-template-columns: minmax(220px, 0.85fr) minmax(260px, 1.15fr);
gap: 12px;
margin-top: 10px;
padding: 12px;
border-radius: var(--r-sm);
border: 1px solid rgba(148, 163, 184, 0.18);
background: rgba(2, 6, 23, 0.28);
}
.sep-readiness-card b {
display: block;
color: var(--text);
font-size: 13px;
font-weight: 900;
}
.sep-readiness-card span {
display: block;
margin-top: 4px;
color: var(--text-2);
font-size: 11.5px;
line-height: 1.4;
}
.sep-readiness-card ul {
display: grid;
gap: 5px;
margin: 0;
padding-left: 16px;
color: var(--text-2);
font-size: 11.5px;
line-height: 1.35;
}
.sep-readiness-card li.blocked {
color: #fecaca;
}
.sep-readiness-card li.review {
color: #fde68a;
}
.sep-readiness-card li.ready {
color: #bbf7d0;
}
.sep-readiness-card.blocked {
border-color: rgba(239, 68, 68, 0.38);
background: rgba(127, 29, 29, 0.16);
}
.sep-readiness-card.review {
border-color: rgba(245, 158, 11, 0.42);
background: rgba(120, 53, 15, 0.16);
}
.sep-readiness-card.ready {
border-color: rgba(34, 197, 94, 0.36);
background: rgba(20, 83, 45, 0.16);
}
.sep-review-ack {
display: none;
align-items: flex-start;
gap: 8px;
margin-top: 10px;
padding: 9px 10px;
border-radius: 8px;
border: 1px solid rgba(245, 158, 11, 0.30);
background: rgba(245, 158, 11, 0.08);
color: #fde68a;
font-size: 11.5px;
line-height: 1.35;
font-weight: 800;
}
.sep-review-ack.is-visible {
display: flex;
}
.sep-review-ack input {
margin-top: 2px;
accent-color: var(--brand);
}
.sep-flow-card {
min-width: 0;
display: grid;
gap: 4px;
padding: 10px 11px;
border-radius: var(--r-sm);
border: 1px solid rgba(148, 163, 184, 0.14);
background: rgba(2, 6, 23, 0.22);
}
.sep-flow-card.ready {
border-color: rgba(34, 197, 94, 0.30);
}
.sep-flow-card.active {
border-color: rgba(255, 145, 0, 0.40);
}
.sep-flow-card b {
color: var(--text);
font-size: 12px;
font-weight: 800;
}
.sep-flow-card span {
color: var(--muted);
font-size: 11px;
line-height: 1.35;
}
.sep-dtf-bridge {
margin-top: 12px;
border-radius: var(--r-lg);
border: 1px solid rgba(148, 163, 184, 0.16);
background: rgba(15, 23, 42, 0.46);
}
.sep-dtf-bridge summary {
cursor: pointer;
padding: 14px;
color: var(--text);
font-size: 13px;
font-weight: 800;
}
.sep-dtf-bridge .dtf-tool-panel {
margin: 0;
border: 0;
border-top: 1px solid rgba(148, 163, 184, 0.14);
border-radius: 0 0 var(--r-lg) var(--r-lg);
box-shadow: none;
}
.sep-preview-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
min-width: 0;
}
.sep-preview-card {
min-width: 0;
padding: 12px;
border-radius: var(--r);
border: 1px solid rgba(148, 163, 184, 0.16);
background: rgba(2, 6, 23, 0.26);
}
.sep-preview-card canvas {
width: 100%;
aspect-ratio: 23 / 16;
display: block;
border-radius: 8px;
background: #fff;
border: 1px solid rgba(148, 163, 184, 0.16);
}
.sep-active-card canvas,
#sepSourceCanvas {
cursor: crosshair;
touch-action: none;
}
.emb-decision-panel {
margin-top: 12px;
padding: 16px;
border-radius: var(--r-sm);
border: 1px solid rgba(148, 163, 184, 0.18);
background:
linear-gradient(135deg, rgba(255, 145, 0, 0.14), rgba(37, 99, 235, 0.08)),
rgba(15, 23, 42, 0.54);
}
.emb-decision-panel.warn {
border-color: rgba(245, 158, 11, 0.42);
background:
linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(15, 23, 42, 0.50)),
rgba(15, 23, 42, 0.56);
}
.emb-decision-panel.pass {
border-color: rgba(34, 197, 94, 0.34);
background:
linear-gradient(135deg, rgba(34, 197, 94, 0.16), rgba(15, 23, 42, 0.50)),
rgba(15, 23, 42, 0.56);
}
.emb-decision-panel.fail {
border-color: rgba(239, 68, 68, 0.40);
background:
linear-gradient(135deg, rgba(239, 68, 68, 0.16), rgba(15, 23, 42, 0.52)),
rgba(15, 23, 42, 0.58);
}
.emb-decision-kicker {
color: var(--brand);
font-size: 11px;
font-weight: 900;
letter-spacing: 0;
text-transform: uppercase;
}
.emb-decision-title {
margin-top: 4px;
color: var(--text);
font-size: clamp(18px, 2vw, 26px);
font-weight: 950;
line-height: 1.08;
}
.emb-decision-copy {
max-width: 860px;
margin-top: 7px;
color: var(--text-2);
font-size: 13px;
line-height: 1.45;
}
.emb-decision-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.emb-decision-actions .btn-primary,
.emb-decision-actions .btn-ghost {
min-height: 34px;
justify-content: center;
}
.emb-decision-facts {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 12px;
}
.emb-decision-facts span {
padding: 4px 8px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 999px;
background: rgba(2, 6, 23, 0.22);
color: var(--muted);
font-size: 11px;
line-height: 1.25;
}
.sep-output-row {
display: grid;
grid-template-columns: minmax(280px, 1.3fr) minmax(230px, 0.7fr);
gap: 12px;
margin-top: 12px;
min-width: 0;
max-width: 100%;
}
.sep-channel-panel,
.sep-export-panel {
padding: 14px;
}
.sep-panel-head {
display: flex;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
/* v76 iter8: typography polish — clearer hierarchy, more legible secondary text */
.sep-panel-title {
font-size: 14px;
font-weight: 900;
color: var(--text);
letter-spacing: 0.01em;
}
.sep-panel-sub,
.sep-export-note {
margin-top: 4px;
color: var(--muted);
font-size: 12px;
line-height: 1.5;
}
.sep-active-card .dtf-preview-label {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.04em;
}
.sep-active-label {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: 6px 10px;
}
.sep-active-title {
white-space: nowrap;
}
#sepActivePlateMeta {
grid-column: 1;
min-width: 0;
color: var(--muted);
font-size: 11px;
font-weight: 600;
letter-spacing: 0;
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.35;
}
.sep-channel-list {
display: grid;
gap: 8px;
max-height: 460px;
overflow: auto;
}
.sep-channel {
display: grid;
grid-template-columns: 28px minmax(168px, 0.72fr) minmax(390px, 1.28fr);
align-items: start;
border-radius: var(--r-sm);
border: 1px solid rgba(148, 163, 184, 0.14);
background: rgba(15, 23, 42, 0.46);
}
.sep-channel.on {
border-color: rgba(255, 145, 0, 0.58);
box-shadow: 0 0 0 1px rgba(255, 145, 0, 0.12) inset;
}
.sep-channel.suppressed {
border-style: dashed;
opacity: 0.82;
}
.sep-channel-check {
display: grid;
place-items: center;
padding-top: 13px;
}
.sep-channel-main {
min-width: 0;
display: grid;
grid-template-columns: 24px 1fr;
gap: 10px;
align-items: center;
width: 100%;
padding: 10px 10px 10px 0;
color: var(--text);
background: transparent;
border: 0;
text-align: left;
cursor: pointer;
}
.sep-color-input {
width: 28px;
height: 28px;
padding: 0;
margin-right: 0;
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 999px;
overflow: hidden;
background: transparent;
}
.sep-channel-tools {
display: grid;
grid-template-columns: minmax(92px, 1.15fr) minmax(72px, 0.82fr) minmax(88px, 1fr) minmax(72px, 0.8fr) 32px;
grid-auto-rows: 32px;
gap: 8px;
align-items: center;
padding: 8px 8px 8px 0;
}
.sep-ink-select,
.sep-pms-input,
.sep-name-input,
.sep-mini-number,
.sep-dot-select {
min-width: 0;
width: 100%;
height: 32px;
padding: 0 7px;
border-radius: var(--r-sm);
border: 1px solid rgba(148, 163, 184, 0.18);
background: rgba(15, 23, 42, 0.92);
color: var(--text);
font-size: 12px;
}
.sep-mini-number {
font-variant-numeric: tabular-nums;
}
.sep-density-input {
width: 100%;
accent-color: var(--brand);
}
.sep-lock {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
min-height: 32px;
color: var(--muted);
font-size: 11px;
white-space: nowrap;
}
.sep-swatch {
width: 22px;
height: 22px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22);
}
.sep-channel-main b,
.sep-channel-main em {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sep-channel-main b {
font-size: 13px;
font-weight: 750;
}
.sep-channel-main em {
margin-top: 2px;
font-size: 11px;
font-style: normal;
color: var(--muted);
}
.sep-review-badge {
display: inline-flex;
align-items: center;
margin-left: 7px;
padding: 1px 6px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.22);
color: var(--muted);
font-size: 10px;
line-height: 1.35;
vertical-align: 1px;
}
.sep-review-badge.suppressed {
border-color: rgba(245, 158, 11, 0.34);
color: #fbbf24;
}
.sep-review-badge.kept {
border-color: rgba(34, 197, 94, 0.34);
color: #86efac;
}
.sep-review-badge.budget {
border-color: rgba(245, 158, 11, 0.42);
color: #fbbf24;
}
.sep-budget-panel {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
align-items: center;
padding: 10px 11px;
border-radius: var(--r-sm);
border: 1px solid rgba(245, 158, 11, 0.28);
background: rgba(245, 158, 11, 0.08);
}
.sep-budget-panel.ok {
border-color: rgba(34, 197, 94, 0.24);
background: rgba(34, 197, 94, 0.06);
}
.sep-budget-panel.fail {
border-color: rgba(248, 113, 113, 0.34);
background: rgba(248, 113, 113, 0.08);
}
.sep-budget-panel b,
.sep-budget-panel span {
display: block;
}
.sep-budget-panel b {
color: var(--text);
font-size: 12px;
font-weight: 850;
}
.sep-budget-panel span {
margin-top: 2px;
color: var(--muted);
font-size: 11px;
line-height: 1.4;
}
.sep-budget-actions,
.sep-budget-row-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: flex-start;
}
.sep-budget-action-group {
display: inline-flex;
gap: 5px;
flex-wrap: wrap;
align-items: center;
}
.sep-budget-action-meta {
padding: 3px 7px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 999px;
background: rgba(2, 6, 23, 0.26);
color: var(--muted);
font-size: 10px;
font-weight: 800;
line-height: 1;
}
.sep-budget-row-actions {
grid-column: 1 / -1;
justify-content: flex-start;
}
.sep-budget-action,
.sep-budget-preview,
.sep-budget-clear {
border-color: rgba(245, 158, 11, 0.42);
color: #fbbf24;
}
.sep-micro-preview-modes,
.sep-solid-preview-modes {
grid-column: 1;
display: flex;
gap: 5px;
flex-wrap: wrap;
justify-content: flex-start;
}
.sep-micro-preview-modes[hidden],
.sep-solid-preview-modes[hidden] {
display: none;
}
.sep-micro-preview-modes .chip,
.sep-solid-preview-modes .chip {
min-height: 26px;
padding: 4px 8px;
font-size: 10.5px;
}
.sep-micro-review {
margin-top: 10px;
padding: 12px;
border-radius: var(--r-sm);
border: 1px solid rgba(245, 158, 11, 0.26);
background: rgba(120, 53, 15, 0.14);
}
.sep-micro-head {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
margin-bottom: 9px;
}
.sep-micro-head b,
.sep-micro-head span {
display: block;
}
.sep-micro-head b {
color: var(--text);
font-size: 12px;
font-weight: 850;
}
.sep-micro-head span,
.sep-micro-head em {
color: var(--muted);
font-size: 11px;
font-style: normal;
line-height: 1.35;
}
.sep-micro-list {
display: grid;
gap: 8px;
}
.sep-micro-row {
display: grid;
grid-template-columns: 24px minmax(0, 1fr) minmax(260px, auto);
gap: 9px;
align-items: center;
padding: 9px;
border-radius: var(--r-sm);
border: 1px solid rgba(148, 163, 184, 0.15);
background: rgba(2, 6, 23, 0.3);
}
.sep-micro-row.kept {
border-color: rgba(34, 197, 94, 0.24);
}
.sep-micro-main {
min-width: 0;
}
.sep-micro-main b,
.sep-micro-main span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sep-micro-main b {
color: var(--text);
font-size: 11.5px;
}
.sep-micro-main span {
margin-top: 2px;
color: var(--muted);
font-size: 10.5px;
}
.sep-micro-actions {
display: flex;
gap: 6px;
justify-content: flex-end;
align-items: center;
}
.sep-micro-target {
min-width: 100px;
height: 30px;
padding: 0 8px;
border-radius: var(--r-sm);
border: 1px solid rgba(148, 163, 184, 0.18);
background: rgba(15, 23, 42, 0.92);
color: var(--text);
font-size: 11px;
}
.sep-export-grid {
display: grid;
gap: 8px;
margin-top: 12px;
}
.sep-export-grid .btn-primary,
.sep-export-grid .btn-ghost {
justify-content: center;
width: 100%;
}
.sep-upload-manager {
margin-top: 12px;
padding: 11px;
border-radius: var(--r-sm);
border: 1px solid rgba(56, 189, 248, 0.22);
background: rgba(8, 47, 73, 0.16);
}
.sep-upload-head {
display: flex;
justify-content: space-between;
gap: 10px;
}
.sep-upload-head b,
.sep-upload-topline b,
.sep-upload-stale b {
color: var(--text);
font-size: 12px;
font-weight: 850;
}
.sep-upload-head span,
.sep-upload-meta,
.sep-upload-stale span,
.sep-upload-stale em {
display: block;
margin-top: 2px;
color: var(--muted);
font-size: 11px;
line-height: 1.35;
}
.sep-upload-card,
.sep-upload-stale {
min-width: 0;
display: grid;
gap: 7px;
margin-top: 9px;
padding: 9px;
border-radius: var(--r-sm);
border: 1px solid rgba(148, 163, 184, 0.16);
background: rgba(2, 6, 23, 0.24);
}
.sep-upload-card.active {
border-color: rgba(255, 145, 0, 0.42);
}
.sep-upload-card.done {
border-color: rgba(34, 197, 94, 0.32);
}
.sep-upload-card.warn {
border-color: rgba(245, 158, 11, 0.34);
}
.sep-upload-card.err {
border-color: rgba(239, 68, 68, 0.36);
}
.sep-upload-topline {
display: flex;
justify-content: space-between;
gap: 8px;
align-items: center;
}
.sep-upload-topline span {
color: var(--text-2);
font-size: 11px;
font-variant-numeric: tabular-nums;
}
.sep-upload-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-2);
font-size: 11.5px;
}
.sep-upload-progress {
width: 100%;
height: 7px;
overflow: hidden;
border-radius: 999px;
background: rgba(148, 163, 184, 0.15);
}
.sep-upload-progress span {
display: block;
height: 100%;
min-width: 2px;
border-radius: inherit;
background: linear-gradient(90deg, #fb923c, #38bdf8);
}
.sep-upload-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.sep-upload-row-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
}
.sep-upload-actions .btn-ghost {
flex: 1;
justify-content: center;
}
.sep-upload-file-btn {
cursor: pointer;
}
.sep-upload-file-btn input {
display: none;
}
.sep-upload-pending {
margin-top: 10px;
}
.sep-upload-subhead {
color: var(--text-2);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.sep-upload-stale {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
}
.sep-upload-stale .sep-upload-progress {
grid-column: 1 / -1;
}
.sep-preflight-panel,
.sep-sync-panel {
margin-top: 12px;
padding: 14px;
border-radius: var(--r-lg);
border: 1px solid rgba(148, 163, 184, 0.16);
background: rgba(15, 23, 42, 0.56);
}
.sep-preflight-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.sep-preflight-item {
min-width: 0;
display: grid;
gap: 3px;
padding: 10px 11px;
border-radius: var(--r-sm);
border: 1px solid rgba(148, 163, 184, 0.14);
border-left-width: 3px;
background: rgba(2, 6, 23, 0.24);
}
.sep-preflight-item b {
color: var(--text);
font-size: 12px;
font-weight: 800;
}
.sep-preflight-item span {
color: var(--muted);
font-size: 11px;
line-height: 1.35;
}
.sep-inline-action {
justify-self: start;
margin-top: 4px;
padding: 6px 9px;
border-radius: var(--r-sm);
border: 1px solid rgba(251, 146, 60, 0.42);
background: rgba(251, 146, 60, 0.14);
color: #fed7aa;
font-size: 11px;
font-weight: 800;
cursor: pointer;
}
.sep-inline-action:hover {
border-color: rgba(251, 146, 60, 0.76);
background: rgba(251, 146, 60, 0.22);
}
.sep-preflight-item.ok {
border-left-color: #22c55e;
}
.sep-preflight-item.info {
border-left-color: #38bdf8;
}
.sep-preflight-item.warn {
border-left-color: #f59e0b;
}
.sep-engine-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 12px;
}
.sep-engine-card {
min-width: 0;
display: grid;
gap: 3px;
padding: 10px 11px;
border-radius: var(--r-sm);
border: 1px solid rgba(148, 163, 184, 0.14);
background: rgba(2, 6, 23, 0.22);
}
.sep-engine-card.ok {
border-color: rgba(34, 197, 94, 0.28);
}
.sep-engine-card.info {
border-color: rgba(56, 189, 248, 0.28);
}
.sep-engine-card.warn {
border-color: rgba(245, 158, 11, 0.28);
}
.sep-engine-card b {
color: var(--text);
font-size: 12px;
font-weight: 800;
}
.sep-engine-card span {
color: var(--text-2);
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sep-engine-card em {
color: var(--muted);
font-size: 11px;
font-style: normal;
line-height: 1.35;
}
.sep-saved-panel {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(148, 163, 184, 0.14);
}
.sep-saved-list {
display: grid;
gap: 8px;
margin-top: 10px;
}
.sep-saved-card {
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 11px;
border-radius: var(--r-sm);
border: 1px solid rgba(148, 163, 184, 0.14);
background: rgba(2, 6, 23, 0.22);
}
.sep-saved-card.expanded {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
}
.sep-saved-main {
min-width: 0;
display: grid;
gap: 2px;
}
.sep-saved-card b {
color: var(--text);
font-size: 12px;
font-weight: 800;
}
.sep-saved-card span,
.sep-saved-card em {
color: var(--muted);
font-size: 11px;
font-style: normal;
line-height: 1.35;
}
.sep-saved-health-badge {
width: fit-content;
max-width: 100%;
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 3px 8px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 999px;
background: rgba(15, 23, 42, 0.64);
color: var(--text-2) !important;
font-size: 10px !important;
font-weight: 850;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sep-saved-health-badge.ready {
border-color: rgba(52, 211, 153, 0.34);
color: #bbf7d0 !important;
}
.sep-saved-health-badge.review {
border-color: rgba(251, 191, 36, 0.40);
color: #fde68a !important;
}
.sep-saved-health-badge.incomplete {
border-color: rgba(248, 113, 113, 0.42);
color: #fecaca !important;
}
.sep-saved-review-badge {
width: fit-content;
max-width: 100%;
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 3px 8px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 999px;
background: rgba(15, 23, 42, 0.64);
color: var(--text-2) !important;
font-size: 10px !important;
font-weight: 850;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sep-saved-review-badge.approved,
.sep-saved-review-badge.press {
border-color: rgba(52, 211, 153, 0.34);
color: #bbf7d0 !important;
}
.sep-saved-review-badge.revision {
border-color: rgba(248, 113, 113, 0.42);
color: #fecaca !important;
}
.sep-saved-review-badge.review {
border-color: rgba(251, 191, 36, 0.40);
color: #fde68a !important;
}
.sep-saved-source-badge,
.sep-saved-handoff-badge,
.sep-saved-drive-badge,
.sep-saved-quality-badge,
.sep-saved-rescue-badge,
.sep-saved-budget-badge {
width: fit-content;
max-width: 100%;
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 3px 8px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 999px;
background: rgba(15, 23, 42, 0.64);
color: var(--text-2) !important;
font-size: 10px !important;
font-weight: 850;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sep-saved-source-badge.ready,
.sep-saved-handoff-badge.ready,
.sep-saved-handoff-badge.staged,
.sep-saved-drive-badge.ready,
.sep-saved-quality-badge.ready,
.sep-saved-rescue-badge.ready {
border-color: rgba(56, 189, 248, 0.42);
color: #bae6fd !important;
}
.sep-saved-source-badge.review,
.sep-saved-drive-badge.review,
.sep-saved-quality-badge.review,
.sep-saved-rescue-badge.review {
border-color: rgba(251, 146, 60, 0.46);
color: #fed7aa !important;
}
.sep-saved-source-badge.manual {
border-color: rgba(148, 163, 184, 0.26);
color: var(--text-2) !important;
}
.sep-saved-source-badge.blocked,
.sep-saved-handoff-badge.blocked,
.sep-saved-drive-badge.blocked,
.sep-saved-quality-badge.blocked,
.sep-saved-rescue-badge.blocked {
border-color: rgba(251, 191, 36, 0.40);
color: #fde68a !important;
}
.sep-saved-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
}
.sep-saved-detail {
grid-column: 1 / -1;
display: grid;
gap: 10px;
padding-top: 10px;
border-top: 1px solid rgba(148, 163, 184, 0.14);
}
.sep-saved-review {
min-width: 0;
display: grid;
gap: 9px;
padding: 10px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: var(--r-sm);
background: rgba(15, 23, 42, 0.46);
}
.sep-saved-review.approved,
.sep-saved-review.press {
border-color: rgba(52, 211, 153, 0.28);
}
.sep-saved-review.revision {
border-color: rgba(248, 113, 113, 0.32);
}
.sep-saved-review.review {
border-color: rgba(251, 191, 36, 0.28);
}
.sep-saved-review-head {
min-width: 0;
display: flex;
align-items: start;
justify-content: space-between;
gap: 12px;
}
.sep-saved-review-head h4 {
margin: 0;
color: var(--text);
font-size: 12px;
font-weight: 900;
letter-spacing: 0;
}
.sep-saved-review-head p {
margin: 2px 0 0;
color: var(--muted);
font-size: 11px;
line-height: 1.35;
}
.sep-saved-review-head > b {
flex: 0 0 auto;
padding: 4px 8px;
border-radius: 999px;
background: rgba(2, 6, 23, 0.40);
color: var(--text);
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
}
.sep-saved-review.press .sep-saved-review-head > b,
.sep-saved-review.approved .sep-saved-review-head > b {
color: #86efac;
}
.sep-saved-review.revision .sep-saved-review-head > b {
color: #fecaca;
}
.sep-saved-review.review .sep-saved-review-head > b {
color: #fde68a;
}
.sep-saved-review-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.sep-saved-review-actions .active {
border-color: rgba(251, 146, 60, 0.62);
color: var(--accent);
background: rgba(251, 146, 60, 0.10);
}
.sep-saved-review-note {
min-width: 0;
display: grid;
gap: 5px;
}
.sep-saved-review-note span {
color: var(--muted);
font-size: 10px;
font-weight: 850;
text-transform: uppercase;
}
.sep-saved-review-note textarea {
width: 100%;
min-height: 54px;
resize: vertical;
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: var(--r-sm);
background: rgba(2, 6, 23, 0.34);
color: var(--text);
padding: 8px 9px;
font: inherit;
font-size: 12px;
line-height: 1.35;
}
.sep-saved-review-history {
display: grid;
gap: 4px;
}
.sep-saved-review-history span {
color: var(--muted);
font-size: 11px;
line-height: 1.35;
}
.sep-saved-source-link,
.sep-saved-handoff,
.sep-saved-drive-sync,
.sep-saved-quality-gate,
.sep-saved-halftone-inspector,
.sep-saved-source-rescue,
.sep-saved-budget-audit {
min-width: 0;
display: grid;
gap: 9px;
padding: 10px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: var(--r-sm);
background: rgba(15, 23, 42, 0.46);
}
.sep-saved-source-link.ready,
.sep-saved-handoff.ready,
.sep-saved-handoff.staged,
.sep-saved-drive-sync.ready,
.sep-saved-quality-gate.ready,
.sep-saved-halftone-inspector.ready,
.sep-saved-source-rescue.ready {
border-color: rgba(56, 189, 248, 0.34);
}
.sep-saved-source-link.review,
.sep-saved-drive-sync.review,
.sep-saved-quality-gate.review,
.sep-saved-halftone-inspector.review,
.sep-saved-source-rescue.review {
border-color: rgba(251, 146, 60, 0.34);
}
.sep-saved-source-link.manual {
border-color: rgba(148, 163, 184, 0.18);
}
.sep-saved-source-link.blocked,
.sep-saved-handoff.blocked,
.sep-saved-drive-sync.blocked,
.sep-saved-quality-gate.blocked,
.sep-saved-halftone-inspector.blocked,
.sep-saved-source-rescue.blocked {
border-color: rgba(251, 191, 36, 0.28);
}
.sep-saved-source-link-head,
.sep-saved-handoff-head,
.sep-saved-drive-sync-head,
.sep-saved-quality-gate-head,
.sep-saved-halftone-inspector-head,
.sep-saved-source-rescue-head,
.sep-saved-budget-audit-head {
min-width: 0;
display: flex;
align-items: start;
justify-content: space-between;
gap: 12px;
}
.sep-saved-source-rescue-proof {
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px;
border: 1px solid rgba(56, 189, 248, 0.18);
border-radius: var(--r-sm);
background: rgba(8, 47, 73, 0.22);
color: var(--text-2);
font-size: 11px;
line-height: 1.35;
}
.sep-saved-source-rescue-proof span {
min-width: 0;
}
.sep-saved-source-rescue-proof > div {
min-width: 0;
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.sep-saved-source-rescue-proof-thumb {
flex: 0 0 112px;
width: 112px;
height: 44px;
padding: 0;
border: 1px solid rgba(148, 163, 184, 0.28);
border-radius: var(--r-sm);
background: rgba(15, 23, 42, 0.72);
overflow: hidden;
cursor: zoom-in;
}
.sep-saved-source-rescue-proof-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sep-saved-source-rescue-proof-thumb.load-failed {
display: grid;
place-items: center;
cursor: default;
}
.sep-saved-source-rescue-proof-thumb.load-failed::after {
content: "Proof unavailable";
color: var(--muted);
font-size: 10px;
line-height: 1.2;
padding: 6px;
text-align: center;
}
.sep-saved-source-rescue-proof-thumb:hover,
.sep-saved-source-rescue-proof-thumb:focus-visible {
border-color: rgba(56, 189, 248, 0.58);
outline: none;
}
.sep-saved-source-rescue-proof.missing {
border-color: rgba(251, 191, 36, 0.22);
background: rgba(120, 53, 15, 0.18);
}
@media (max-width: 760px) {
.sep-saved-source-rescue-proof,
.sep-saved-source-rescue-proof > div {
align-items: stretch;
flex-direction: column;
}
.sep-saved-source-rescue-proof-thumb {
width: 100%;
height: 72px;
}
}
.sep-saved-source-link-head h4,
.sep-saved-handoff-head h4,
.sep-saved-drive-sync-head h4,
.sep-saved-quality-gate-head h4,
.sep-saved-halftone-inspector-head h4,
.sep-saved-source-rescue-head h4,
.sep-saved-budget-audit-head h4 {
margin: 0;
color: var(--text);
font-size: 12px;
font-weight: 900;
}
.sep-saved-source-link-head p,
.sep-saved-handoff-head p,
.sep-saved-drive-sync-head p,
.sep-saved-quality-gate-head p,
.sep-saved-halftone-inspector-head p,
.sep-saved-source-rescue-head p,
.sep-saved-budget-audit-head p {
margin: 2px 0 0;
color: var(--muted);
font-size: 11px;
line-height: 1.35;
}
.sep-saved-source-link-head > b,
.sep-saved-handoff-head > b,
.sep-saved-drive-sync-head > b,
.sep-saved-quality-gate-head > b,
.sep-saved-halftone-inspector-head > b,
.sep-saved-source-rescue-head > b,
.sep-saved-budget-audit-head > b {
flex: 0 0 auto;
padding: 4px 8px;
border-radius: 999px;
background: rgba(2, 6, 23, 0.40);
color: #bae6fd;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
}
.sep-saved-source-link.ready .sep-saved-source-link-head > b {
color: #bae6fd;
}
.sep-saved-source-link.review .sep-saved-source-link-head > b {
color: #fed7aa;
}
.sep-saved-source-link.manual .sep-saved-source-link-head > b {
color: var(--text-2);
}
.sep-saved-source-link.blocked .sep-saved-source-link-head > b,
.sep-saved-handoff.blocked .sep-saved-handoff-head > b,
.sep-saved-drive-sync.blocked .sep-saved-drive-sync-head > b,
.sep-saved-quality-gate.blocked .sep-saved-quality-gate-head > b,
.sep-saved-halftone-inspector.blocked .sep-saved-halftone-inspector-head > b {
color: #fde68a;
}
.sep-saved-drive-sync.review .sep-saved-drive-sync-head > b,
.sep-saved-quality-gate.review .sep-saved-quality-gate-head > b,
.sep-saved-halftone-inspector.review .sep-saved-halftone-inspector-head > b,
.sep-saved-source-rescue.review .sep-saved-source-rescue-head > b {
color: #fed7aa;
}
.sep-saved-quality-gate.ready .sep-saved-quality-gate-head > b,
.sep-saved-halftone-inspector.ready .sep-saved-halftone-inspector-head > b,
.sep-saved-source-rescue.ready .sep-saved-source-rescue-head > b {
color: #86efac;
}
.sep-saved-source-rescue.blocked .sep-saved-source-rescue-head > b {
color: #fecaca;
}
.sep-saved-budget-badge {
border-color: rgba(251, 146, 60, 0.26);
background: rgba(124, 45, 18, 0.18);
color: #fed7aa;
}
.sep-saved-budget-audit {
border-color: rgba(251, 146, 60, 0.26);
}
.sep-saved-budget-audit-head > b {
color: #fed7aa;
}
.sep-saved-source-link-target,
.sep-saved-handoff-target,
.sep-saved-drive-sync-target {
min-width: 0;
display: grid;
gap: 4px;
}
.sep-saved-source-link-target span,
.sep-saved-handoff-target span,
.sep-saved-drive-sync-target span {
color: var(--muted);
font-size: 10px;
font-weight: 850;
text-transform: uppercase;
}
.sep-saved-source-link-target b,
.sep-saved-handoff-target b,
.sep-saved-drive-sync-target b {
min-width: 0;
overflow-wrap: anywhere;
color: var(--text);
font-size: 12px;
font-weight: 800;
}
.sep-saved-source-link-issues,
.sep-saved-handoff-issues,
.sep-saved-handoff-actions,
.sep-saved-drive-sync-issues,
.sep-saved-drive-sync-actions,
.sep-saved-drive-sync-meta,
.sep-saved-quality-gate-checks,
.sep-saved-source-rescue-issues {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.sep-saved-quality-gate-budget {
display: grid;
gap: 6px;
padding: 8px;
border: 1px solid rgba(251, 146, 60, 0.22);
border-radius: var(--r-sm);
background: rgba(124, 45, 18, 0.16);
}
.sep-saved-quality-gate-budget b {
color: #fed7aa;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
}
.sep-saved-quality-gate-budget span {
color: var(--text);
font-size: 11px;
font-weight: 780;
line-height: 1.35;
}
.sep-saved-quality-gate-budget div {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.sep-saved-quality-gate-budget em {
padding: 3px 7px;
border-radius: 999px;
background: rgba(2, 6, 23, 0.34);
color: #fed7aa;
font-size: 10px;
font-style: normal;
font-weight: 800;
}
.sep-saved-quality-gate-proof {
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px;
border: 1px solid rgba(56, 189, 248, 0.20);
border-radius: var(--r-sm);
background: rgba(8, 47, 73, 0.20);
}
.sep-saved-quality-gate-proof.review {
border-color: rgba(251, 146, 60, 0.28);
background: rgba(124, 45, 18, 0.16);
}
.sep-saved-quality-gate-proof.blocked {
border-color: rgba(248, 113, 113, 0.28);
background: rgba(127, 29, 29, 0.16);
}
.sep-saved-quality-gate-proof > div {
min-width: 0;
display: grid;
gap: 3px;
}
.sep-saved-quality-gate-proof b {
color: #bae6fd;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
}
.sep-saved-quality-gate-proof.review b {
color: #fed7aa;
}
.sep-saved-quality-gate-proof.blocked b {
color: #fecaca;
}
.sep-saved-quality-gate-proof span {
min-width: 0;
color: var(--text-2);
font-size: 11px;
line-height: 1.35;
overflow-wrap: anywhere;
}
.sep-saved-quality-gate-proof .missing {
flex: 0 0 auto;
color: #fed7aa;
font-weight: 850;
}
.sep-saved-quality-gate-metrics {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
}
.sep-saved-quality-gate-metrics span {
min-width: 0;
display: grid;
gap: 2px;
padding: 7px 8px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: var(--r-sm);
background: rgba(2, 6, 23, 0.24);
color: var(--text-2);
font-size: 11px;
font-weight: 800;
line-height: 1.15;
overflow-wrap: anywhere;
}
.sep-saved-quality-gate-metrics span.ok {
border-color: rgba(34, 197, 94, 0.24);
}
.sep-saved-quality-gate-metrics span.warn {
border-color: rgba(251, 146, 60, 0.32);
color: #fed7aa;
}
.sep-saved-quality-gate-metrics span.fail {
border-color: rgba(248, 113, 113, 0.34);
color: #fecaca;
}
.sep-saved-quality-gate-metrics span.info {
border-color: rgba(56, 189, 248, 0.24);
color: #bae6fd;
}
.sep-saved-quality-gate-metrics b {
color: var(--muted);
font-size: 9px;
font-weight: 900;
text-transform: uppercase;
}
.sep-saved-quality-gate-actions {
display: grid;
gap: 7px;
padding: 9px;
border: 1px solid rgba(251, 146, 60, 0.2);
border-radius: var(--r-sm);
background: rgba(124, 45, 18, 0.12);
}
.sep-saved-quality-gate-actions.blocked {
border-color: rgba(248, 113, 113, 0.28);
background: rgba(127, 29, 29, 0.12);
}
.sep-saved-quality-gate-actions > b {
color: #fed7aa;
font-size: 10px;
font-weight: 900;
letter-spacing: 0;
text-transform: uppercase;
}
.sep-saved-quality-gate-actions.blocked > b {
color: #fecaca;
}
.sep-saved-quality-gate-actions > div {
display: grid;
gap: 6px;
}
.sep-saved-quality-gate-actions span {
display: grid;
gap: 2px;
min-width: 0;
padding: 8px;
border: 1px solid rgba(251, 146, 60, 0.18);
border-radius: var(--r-sm);
background: rgba(15, 23, 42, 0.32);
}
.sep-saved-quality-gate-actions span.fail {
border-color: rgba(248, 113, 113, 0.28);
}
.sep-saved-quality-gate-actions strong {
color: var(--text);
font-size: 11px;
font-weight: 900;
}
.sep-saved-quality-gate-actions em {
color: var(--text-2);
font-size: 11px;
font-style: normal;
line-height: 1.35;
overflow-wrap: anywhere;
}
.sep-saved-halftone-inspector {
background: rgba(8, 47, 73, 0.14);
}
.sep-saved-halftone-inspector-plates,
.sep-saved-halftone-inspector-recs {
display: grid;
gap: 6px;
}
.sep-saved-halftone-inspector-plates span,
.sep-saved-halftone-inspector-recs span {
display: grid;
gap: 2px;
padding: 7px 8px;
border: 1px solid rgba(148, 163, 184, 0.14);
border-radius: var(--r-sm);
background: rgba(2, 6, 23, 0.28);
color: var(--text-2);
font-size: 11px;
line-height: 1.3;
overflow-wrap: anywhere;
}
.sep-saved-halftone-inspector-plates span.ok {
border-color: rgba(34, 197, 94, 0.20);
}
.sep-saved-halftone-inspector-plates span.warn,
.sep-saved-halftone-inspector-recs span.warn {
border-color: rgba(251, 146, 60, 0.28);
color: #fed7aa;
}
.sep-saved-halftone-inspector-plates span.fail,
.sep-saved-halftone-inspector-recs span.fail {
border-color: rgba(248, 113, 113, 0.28);
color: #fecaca;
}
.sep-saved-halftone-inspector-plates b {
color: var(--text);
font-size: 10px;
font-weight: 900;
}
@media (max-width: 760px) {
.sep-saved-quality-gate-proof {
align-items: stretch;
flex-direction: column;
}
.sep-saved-quality-gate-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.sep-saved-source-rescue-summary {
display: grid;
gap: 4px;
padding: 8px;
border: 1px solid rgba(251, 146, 60, 0.22);
border-radius: var(--r-sm);
background: rgba(124, 45, 18, 0.14);
}
.sep-saved-source-rescue-summary b {
color: #fed7aa;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
}
.sep-saved-source-rescue-summary span {
color: var(--text);
font-size: 11px;
font-weight: 780;
line-height: 1.35;
}
.sep-saved-budget-audit-list {
display: grid;
gap: 6px;
}
.sep-saved-budget-audit-list span {
display: grid;
gap: 3px;
padding: 7px 8px;
border-radius: var(--r-sm);
border: 1px solid rgba(148, 163, 184, 0.14);
background: rgba(2, 6, 23, 0.28);
color: var(--text);
font-size: 11px;
line-height: 1.35;
}
.sep-saved-budget-audit-list span.applied {
border-color: rgba(34, 197, 94, 0.20);
}
.sep-saved-budget-audit-list span.undone {
border-color: rgba(251, 191, 36, 0.24);
}
.sep-saved-budget-audit-list b {
color: #fed7aa;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
}
.sep-saved-budget-audit-list em {
color: var(--muted);
font-style: normal;
}
.sep-saved-drive-sync-receipt {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px;
padding: 8px;
border: 1px solid rgba(56, 189, 248, 0.20);
border-radius: var(--r-sm);
background: rgba(8, 47, 73, 0.18);
}
.sep-saved-drive-sync-receipt span {
color: var(--muted);
font-size: 10px;
font-weight: 850;
text-transform: uppercase;
}
.sep-saved-drive-sync-receipt b {
color: #bae6fd;
font-size: 11px;
font-weight: 900;
}
.sep-saved-drive-sync-meta span,
.sep-saved-drive-sync-meta a {
padding: 3px 7px;
border-radius: 999px;
background: rgba(2, 6, 23, 0.34);
color: var(--muted);
font-size: 10.5px;
font-weight: 780;
}
.sep-saved-drive-sync-meta a {
color: #bae6fd;
text-decoration: none;
}
.sep-saved-source-link-issues span,
.sep-saved-handoff-issues span,
.sep-saved-drive-sync-issues span,
.sep-saved-quality-gate-issues span,
.sep-saved-quality-gate-checks span,
.sep-saved-source-rescue-issues span {
padding: 3px 7px;
border-radius: 999px;
background: rgba(2, 6, 23, 0.36);
color: var(--muted);
font-size: 10.5px;
font-weight: 750;
}
.sep-saved-source-link-issues .ok,
.sep-saved-handoff-issues .ok,
.sep-saved-drive-sync-issues .ok,
.sep-saved-quality-gate-issues .ok,
.sep-saved-quality-gate-checks .ok,
.sep-saved-source-rescue-issues .ok {
color: #86efac;
}
.sep-saved-source-link-issues .warn,
.sep-saved-handoff-issues .warn,
.sep-saved-drive-sync-issues .warn,
.sep-saved-quality-gate-issues .warn,
.sep-saved-quality-gate-checks .warn,
.sep-saved-source-rescue-issues .warn {
color: #fde68a;
}
.sep-saved-source-link-issues .fail,
.sep-saved-handoff-issues .fail,
.sep-saved-drive-sync-issues .fail,
.sep-saved-quality-gate-issues .fail,
.sep-saved-quality-gate-checks .fail,
.sep-saved-source-rescue-issues .fail {
color: #fecaca;
}
.sep-saved-quality-gate-issues {
display: grid;
gap: 4px;
}
.sep-saved-quality-gate-checks b {
color: inherit;
font-size: 9px;
font-weight: 900;
text-transform: uppercase;
}
.sep-saved-proof-health {
min-width: 0;
display: grid;
gap: 9px;
padding: 10px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: var(--r-sm);
background: rgba(15, 23, 42, 0.46);
}
.sep-saved-proof-health.ready {
border-color: rgba(52, 211, 153, 0.26);
}
.sep-saved-proof-health.review {
border-color: rgba(251, 191, 36, 0.30);
}
.sep-saved-proof-health.incomplete {
border-color: rgba(248, 113, 113, 0.30);
}
.sep-saved-proof-health.checking {
border-style: dashed;
}
.sep-saved-proof-health.checking .sep-saved-proof-health-head p::after {
content: " · verifying file links";
color: #93c5fd;
}
.sep-saved-proof-health-verify {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-width: 0;
padding: 7px 8px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: var(--r-sm);
background: rgba(2, 6, 23, 0.26);
}
.sep-saved-proof-health-verify.checking {
border-color: rgba(96, 165, 250, 0.34);
}
.sep-saved-proof-health-verify.timeout,
.sep-saved-proof-health-verify.cancelled,
.sep-saved-proof-health-verify.failed {
border-color: rgba(251, 191, 36, 0.34);
background: rgba(120, 53, 15, 0.16);
}
.sep-saved-proof-health-verify span {
min-width: 0;
color: var(--muted);
font-size: 11px;
line-height: 1.35;
}
.sep-saved-proof-health-verify b {
display: block;
color: var(--text);
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
}
.sep-saved-proof-health-verify .btn-ghost {
flex: 0 0 auto;
}
.sep-saved-proof-health-head {
min-width: 0;
display: flex;
align-items: start;
justify-content: space-between;
gap: 12px;
}
.sep-saved-proof-health-head h4 {
margin: 0;
color: var(--text);
font-size: 12px;
font-weight: 900;
letter-spacing: 0;
}
.sep-saved-proof-health-head p {
margin: 2px 0 0;
color: var(--muted);
font-size: 11px;
line-height: 1.35;
}
.sep-saved-proof-health-head > b {
flex: 0 0 auto;
padding: 4px 8px;
border-radius: 999px;
background: rgba(2, 6, 23, 0.40);
color: var(--text);
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
}
.sep-saved-proof-health.ready .sep-saved-proof-health-head > b {
color: #86efac;
}
.sep-saved-proof-health.review .sep-saved-proof-health-head > b {
color: #fde68a;
}
.sep-saved-proof-health.incomplete .sep-saved-proof-health-head > b {
color: #fecaca;
}
.sep-saved-proof-health-checks {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.sep-saved-proof-health-checks span {
display: inline-flex;
align-items: center;
gap: 5px;
max-width: 210px;
min-height: 22px;
padding: 3px 7px;
border: 1px solid rgba(148, 163, 184, 0.14);
border-radius: 999px;
background: rgba(2, 6, 23, 0.30);
color: var(--text-2);
font-size: 10px;
line-height: 1.2;
}
.sep-saved-proof-health-checks b {
color: inherit;
font-size: 9px;
font-weight: 900;
text-transform: uppercase;
}
.sep-saved-proof-health-checks .ok {
color: #bbf7d0;
}
.sep-saved-proof-health-checks .warn {
color: #fde68a;
}
.sep-saved-proof-health-checks .fail {
color: #fecaca;
}
.sep-saved-proof-health-issues {
display: grid;
gap: 4px;
}
.sep-saved-proof-health-issues span {
color: var(--muted);
font-size: 11px;
line-height: 1.35;
}
.sep-saved-proof-health-issues .ok {
color: #86efac;
}
.sep-saved-proof-health-issues .warn {
color: #fbbf24;
}
.sep-saved-proof-health-issues .fail {
color: #f87171;
}
.sep-saved-detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 12px 18px;
}
.sep-saved-detail-grid.files {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.sep-saved-detail-section {
min-width: 0;
display: grid;
align-content: start;
gap: 6px;
}
.sep-saved-detail-section h4 {
margin: 0;
color: var(--text);
font-size: 11px;
font-weight: 900;
letter-spacing: 0;
}
.sep-saved-detail-list {
display: grid;
gap: 4px;
}
.sep-saved-detail-line {
min-width: 0;
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
gap: 8px;
align-items: start;
}
.sep-saved-detail-line > span {
color: var(--muted);
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
}
.sep-saved-detail-line > b {
min-width: 0;
color: var(--text-2);
font-size: 11px;
font-weight: 650;
overflow-wrap: anywhere;
}
.sep-saved-detail-line .warn,
.sep-saved-detail-line.warn > b {
color: #fbbf24;
}
.sep-saved-detail-line .ok,
.sep-saved-detail-line.ok > b {
color: #34d399;
}
.sep-saved-detail-line .fail,
.sep-saved-detail-line.fail > b {
color: #f87171;
}
.sep-saved-file-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.sep-saved-file-grid > span {
color: var(--muted);
font-size: 11px;
line-height: 1.35;
}
.sep-saved-file-link {
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sep-saved-thumbs {
min-width: 0;
}
.sep-saved-thumb-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
gap: 8px;
}
.sep-saved-thumb-grid > span {
color: var(--muted);
font-size: 11px;
line-height: 1.35;
}
.sep-saved-thumb {
min-width: 0;
display: grid;
gap: 5px;
padding: 7px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: var(--r-sm);
background: rgba(15, 23, 42, 0.55);
color: var(--text-2);
text-align: left;
cursor: zoom-in;
}
.sep-saved-thumb:hover,
.sep-saved-thumb:focus-visible {
border-color: rgba(249, 115, 22, 0.62);
box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.20);
}
.sep-saved-thumb-media {
width: 100%;
aspect-ratio: 4 / 3;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 6px;
background-color: #f8fafc;
background-image:
linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
background-size: 16px 16px;
background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.sep-saved-thumb-media img {
width: 100%;
height: 100%;
object-fit: contain;
}
.sep-saved-thumb.load-failed .sep-saved-thumb-media {
background-color: rgba(15, 23, 42, 0.82);
background-image: none;
}
.sep-saved-thumb.load-failed .sep-saved-thumb-media::after {
content: "Preview unavailable";
color: var(--muted);
font-size: 10px;
line-height: 1.2;
padding: 8px;
text-align: center;
}
.sep-saved-thumb b {
color: var(--text);
font-size: 11px;
font-weight: 850;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sep-saved-thumb span:not(.sep-saved-thumb-media) {
color: var(--muted);
font-size: 10px;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sep-proof-inspector-modal {
width: min(1040px, calc(100vw - 28px));
max-height: calc(100vh - 28px);
}
.sep-proof-inspector-sub {
margin-top: 2px;
color: var(--muted);
font-size: 11px;
line-height: 1.35;
}
.sep-proof-inspector-body {
display: grid;
gap: 10px;
}
.sep-proof-inspector-toolbar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
color: var(--muted);
font-size: 12px;
}
.sep-proof-inspector-toolbar [data-sep-proof-position],
.sep-proof-inspector-toolbar [data-sep-proof-zoom] {
min-width: 46px;
text-align: center;
font-weight: 800;
color: var(--text);
}
.sep-proof-inspector-toolbar .btn-ghost.active {
border-color: rgba(249, 115, 22, 0.70);
color: #ffedd5;
background: rgba(249, 115, 22, 0.18);
}
.sep-proof-inspector-spacer {
flex: 1 1 auto;
min-width: 16px;
}
.sep-proof-inspector-frame {
min-height: 280px;
max-height: min(70vh, 760px);
display: grid;
place-items: center;
overflow: auto;
border: 1px solid rgba(148, 163, 184, 0.20);
border-radius: var(--r-sm);
background-color: #f8fafc;
background-image:
linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}
.sep-proof-inspector-frame.compare {
grid-template-columns: repeat(2, minmax(260px, 1fr));
align-items: stretch;
place-items: stretch;
gap: 10px;
padding: 10px;
}
.sep-proof-inspector-frame.pannable {
cursor: grab;
}
.sep-proof-inspector-frame.panning {
cursor: grabbing;
user-select: none;
}
.sep-proof-inspector-frame img {
max-width: 100%;
max-height: min(68vh, 720px);
object-fit: contain;
user-select: none;
-webkit-user-drag: none;
touch-action: none;
}
.sep-proof-inspector-frame img.zoomed {
width: calc(100% * var(--sep-proof-zoom, 1));
max-width: none;
max-height: none;
}
.sep-proof-pane {
display: grid;
grid-template-rows: auto minmax(220px, 1fr);
gap: 6px;
min-width: 0;
}
.sep-proof-pane-label {
color: #0f172a;
font-size: 11px;
font-weight: 900;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sep-proof-pane-media {
min-height: 240px;
display: grid;
place-items: center;
overflow: auto;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: var(--r-sm);
background: rgba(255, 255, 255, 0.34);
}
.sep-proof-pane-media.loading::after {
content: "Loading proof...";
color: var(--muted);
font-size: 12px;
font-weight: 800;
padding: 18px;
text-align: center;
}
.sep-proof-pane-media.loaded::after {
content: none;
}
.sep-proof-pane-media.failed {
background: rgba(15, 23, 42, 0.06);
}
.sep-proof-inspector-error {
color: var(--muted);
font-size: 13px;
font-weight: 750;
text-align: center;
padding: 18px;
}
.sep-proof-inspector-meta {
color: var(--muted);
font-size: 11px;
display: grid;
gap: 3px;
overflow-wrap: anywhere;
}
.sep-proof-inspector-actions {
gap: 8px;
}
.emb-proof-panel {
margin-top: 12px;
padding: 14px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: var(--r-sm);
background: rgba(15, 23, 42, 0.42);
}
.emb-proof-panel.fail {
border-color: rgba(239, 68, 68, 0.46);
background: rgba(127, 29, 29, 0.20);
}
.emb-proof-panel.warn {
border-color: rgba(245, 158, 11, 0.44);
background: rgba(120, 53, 15, 0.18);
}
.emb-proof-panel.pass {
border-color: rgba(34, 197, 94, 0.40);
background: rgba(20, 83, 45, 0.16);
}
.emb-proof-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.emb-proof-badge {
flex: 0 0 auto;
padding: 4px 9px;
border: 1px solid rgba(148, 163, 184, 0.24);
border-radius: 999px;
color: var(--muted);
font-size: 10px;
font-weight: 900;
letter-spacing: 0;
text-transform: uppercase;
}
.emb-proof-badge.fail {
color: #fecaca;
border-color: rgba(239, 68, 68, 0.40);
background: rgba(239, 68, 68, 0.14);
}
.emb-proof-badge.warn {
color: #fcd34d;
border-color: rgba(245, 158, 11, 0.38);
background: rgba(245, 158, 11, 0.13);
}
.emb-proof-badge.pass {
color: #86efac;
border-color: rgba(34, 197, 94, 0.34);
background: rgba(34, 197, 94, 0.12);
}
.emb-proof-list {
display: grid;
gap: 8px;
margin-top: 12px;
}
.emb-proof-item {
display: grid;
grid-template-columns: 84px 1fr;
gap: 10px;
padding: 9px 10px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: var(--r-sm);
background: rgba(2, 6, 23, 0.26);
color: var(--text-2);
font-size: 12px;
line-height: 1.35;
}
.emb-proof-item b {
color: var(--text);
font-size: 10px;
text-transform: uppercase;
}
.emb-proof-item.blocker b,
.emb-proof-item.fail b {
color: #fca5a5;
}
.emb-proof-item.redraw b {
color: #fdba74;
}
.emb-proof-item.warn b {
color: #fbbf24;
}
.emb-proof-item.fix b,
.emb-proof-item.pass b {
color: #86efac;
}
.emb-fit-panel {
margin-top: 12px;
padding: 14px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: var(--r-sm);
background: rgba(15, 23, 42, 0.34);
}
.emb-fit-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.emb-fit-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
}
.emb-fit-card {
min-width: 0;
min-height: 112px;
display: grid;
gap: 4px;
align-content: start;
text-align: left;
padding: 10px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: var(--r-sm);
background: rgba(2, 6, 23, 0.22);
color: var(--text-2);
cursor: pointer;
}
.emb-fit-card b {
color: var(--text);
font-size: 12px;
font-weight: 900;
}
.emb-fit-card span,
.emb-fit-card em {
color: var(--muted);
font-size: 11px;
font-style: normal;
line-height: 1.3;
}
.emb-fit-card.recommended {
border-color: rgba(34, 197, 94, 0.42);
background: rgba(20, 83, 45, 0.14);
}
.emb-fit-card.current,
.emb-fit-card.current-risk {
border-color: rgba(245, 158, 11, 0.44);
}
.emb-fit-card.not-recommended,
.emb-fit-card.bad-fit {
opacity: 0.74;
}
.emb-fit-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.sep-mockup-list,
.emb-qc-list,
.emb-job-list {
display: grid;
gap: 8px;
margin-top: 10px;
}
.emb-format-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 12px;
}
.emb-qc-item {
padding: 8px 10px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: var(--r-sm);
background: rgba(2, 6, 23, 0.28);
color: var(--text-2);
font-size: 12px;
line-height: 1.35;
}
.emb-job-card {
display: grid;
gap: 8px;
padding: 10px 12px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: var(--r-sm);
background: rgba(15, 23, 42, 0.44);
}
.emb-job-card b,
.emb-job-card span {
display: block;
}
.emb-job-card b {
color: var(--text);
font-size: 13px;
}
.emb-job-card span {
margin-top: 2px;
color: var(--muted);
font-size: 11.5px;
}
.emb-job-files {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.emb-job-files a {
padding: 4px 7px;
border-radius: 999px;
background: rgba(255, 145, 0, 0.10);
border: 1px solid rgba(255, 145, 0, 0.22);
color: var(--text);
font-size: 11px;
text-decoration: none;
}
.emb-job-files a.emb-package-link {
background: rgba(34, 197, 94, 0.13);
border-color: rgba(34, 197, 94, 0.32);
}
.emb-job-files a.emb-sheet-link {
background: rgba(59, 130, 246, 0.13);
border-color: rgba(59, 130, 246, 0.32);
}
.emb-job-files a.emb-chart-link {
background: rgba(245, 158, 11, 0.13);
border-color: rgba(245, 158, 11, 0.32);
}
.emb-job-files a.emb-validation-link {
background: rgba(168, 85, 247, 0.13);
border-color: rgba(168, 85, 247, 0.32);
}
.emb-job-files a.emb-readme-link {
background: rgba(148, 163, 184, 0.13);
border-color: rgba(148, 163, 184, 0.32);
}
.emb-validation-pill {
display: inline-flex;
align-items: center;
margin-left: 6px;
padding: 2px 7px;
border-radius: 999px;
font-size: 10px;
font-style: normal;
font-weight: 800;
letter-spacing: 0;
text-transform: uppercase;
}
.emb-validation-pill.pass {
color: #86efac;
background: rgba(34, 197, 94, 0.13);
border: 1px solid rgba(34, 197, 94, 0.30);
}
.emb-validation-pill.warn {
color: #fbbf24;
background: rgba(245, 158, 11, 0.13);
border: 1px solid rgba(245, 158, 11, 0.30);
}
.emb-validation-pill.fail {
color: #fca5a5;
background: rgba(239, 68, 68, 0.13);
border: 1px solid rgba(239, 68, 68, 0.30);
}
@media (max-width: 1180px) {
.sep-shell {
grid-template-columns: 1fr;
}
.sep-output-row {
grid-template-columns: 1fr;
}
.sep-controls,
.sep-source-panel,
.sep-stage {
grid-column: auto;
grid-row: auto;
}
}
@media (max-width: 760px) {
.mockup-placement-callout,
.mockup-placement-rescue {
grid-template-columns: 1fr;
}
.mockup-placement-presets {
justify-content: stretch;
}
.mockup-placement-presets .btn-ghost {
flex: 1 1 120px;
}
.sep-intake,
.sep-controls,
.sep-source-panel,
.sep-stage,
.sep-channel-panel,
.sep-export-panel {
padding: 12px;
}
.sep-preview-grid,
.sep-output-row,
.sep-flow-grid,
.sep-readiness-card,
.sep-preflight-list,
.emb-fit-grid,
.sep-engine-list {
grid-template-columns: 1fr;
}
.sep-saved-card {
align-items: stretch;
flex-direction: column;
}
.sep-saved-actions {
justify-content: stretch;
}
.sep-saved-actions .btn-ghost {
flex: 1;
justify-content: center;
}
.sep-flow-actions {
justify-content: stretch;
}
.sep-flow-actions .btn-ghost {
flex: 1;
justify-content: center;
}
.emb-decision-actions .btn-primary,
.emb-decision-actions .btn-ghost {
flex: 1 1 160px;
}
.sep-actions {
grid-template-columns: 1fr;
}
.emb-proof-head,
.emb-fit-head,
.emb-proof-item {
grid-template-columns: 1fr;
}
.emb-proof-head,
.emb-fit-head {
display: grid;
}
.sep-channel-list {
max-height: none;
}
.sep-budget-panel {
grid-template-columns: 1fr;
}
.sep-budget-actions {
justify-content: stretch;
}
.sep-budget-actions .btn-ghost,
.sep-budget-row-actions .btn-ghost {
flex: 1 1 160px;
justify-content: center;
}
.sep-budget-action-group {
flex: 1 1 100%;
flex-wrap: wrap;
}
.sep-channel {
grid-template-columns: 28px minmax(0, 1fr);
}
.sep-channel-tools {
grid-column: 2;
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 0 8px 10px 0;
}
.sep-micro-head,
.sep-micro-row {
grid-template-columns: 1fr;
display: grid;
}
.sep-micro-actions {
justify-content: flex-start;
flex-wrap: wrap;
}
.sep-color-input {
justify-self: start;
}
.sep-lock {
justify-content: flex-start;
}
.sep-edit-grid {
grid-template-columns: 1fr;
}
.sep-sync-panel .sep-panel-head {
display: grid;
grid-template-columns: 1fr;
}
.sep-sync-panel #sepSyncBtn {
width: 100%;
justify-content: center;
}
.sep-upload-stale {
grid-template-columns: 1fr;
}
.sep-upload-stale .btn-ghost {
justify-content: center;
}
}
/* Automation Hub */
.auto-board {
display: grid;
grid-template-columns: repeat(5, minmax(220px, 1fr));
gap: 12px;
align-items: start;
overflow-x: auto;
padding-bottom: 8px;
}
.auto-col {
min-width: 220px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 8px;
background: rgba(10,14,24,.58);
overflow: hidden;
}
.auto-col header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
min-height: 72px;
padding: 12px;
border-bottom: 1px solid rgba(255,255,255,.07);
background: rgba(255,255,255,.035);
}
.auto-col h2 {
margin: 0;
color: var(--text);
font-size: 14px;
line-height: 1.25;
letter-spacing: 0;
}
.auto-col header span,
.auto-col header b {
color: var(--muted);
font-size: 11px;
font-weight: 600;
line-height: 1.35;
}
.auto-col header b {
white-space: nowrap;
color: rgba(148,163,184,.9);
}
.auto-drop {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 180px;
padding: 10px;
}
.auto-drop.is-dropping {
background: rgba(96,165,250,.08);
outline: 1px dashed rgba(96,165,250,.42);
outline-offset: -6px;
}
.auto-empty,
.auto-loading,
.auto-error {
border: 1px dashed rgba(255,255,255,.12);
border-radius: 8px;
padding: 16px;
color: var(--muted);
font-size: 13px;
text-align: center;
}
.auto-error {
color: #fca5a5;
border-color: rgba(248,113,113,.35);
background: rgba(127,29,29,.14);
}
.auto-error-panel {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
text-align: left;
}
.auto-error-panel b,
.auto-error-panel span,
.auto-error-panel p {
display: block;
}
.auto-error-panel b {
color: #fecaca;
font-size: 14px;
line-height: 1.25;
}
.auto-error-panel span {
margin-top: 4px;
color: #fca5a5;
}
.auto-error-panel p {
margin: 8px 0 0;
color: rgba(254,202,202,.82);
line-height: 1.45;
}
.auto-error-actions {
flex: 0 0 auto;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}
.auto-card {
border: 1px solid rgba(255,255,255,.08);
border-radius: 8px;
background: rgba(15,23,42,.88);
padding: 10px;
cursor: grab;
box-shadow: 0 12px 26px rgba(0,0,0,.16);
}
.auto-card.dragging {
opacity: .55;
cursor: grabbing;
}
.auto-card.is-off {
opacity: .68;
}
.auto-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.auto-card h3 {
margin: 0;
min-width: 0;
color: var(--text);
font-size: 13px;
line-height: 1.28;
letter-spacing: 0;
overflow-wrap: anywhere;
}
.auto-badge {
flex: 0 0 auto;
border-radius: 999px;
padding: 3px 7px;
font-size: 10px;
font-weight: 800;
line-height: 1;
color: #dbeafe;
background: rgba(96,165,250,.14);
border: 1px solid rgba(96,165,250,.26);
}
.auto-badge.live,
.auto-badge.ok {
color: #bbf7d0;
background: rgba(34,197,94,.13);
border-color: rgba(34,197,94,.28);
}
.auto-badge.err {
color: #fecaca;
background: rgba(239,68,68,.15);
border-color: rgba(239,68,68,.30);
}
.auto-badge.off,
.auto-badge.stale {
color: #e2e8f0;
background: rgba(148,163,184,.10);
border-color: rgba(148,163,184,.22);
}
.auto-badge.pending {
color: #fde68a;
background: rgba(234,179,8,.14);
border-color: rgba(234,179,8,.28);
}
.auto-chips {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 8px;
}
.auto-chips span {
max-width: 100%;
border: 1px solid rgba(255,255,255,.08);
border-radius: 999px;
padding: 3px 7px;
color: rgba(226,232,240,.82);
font-size: 10px;
line-height: 1.15;
overflow-wrap: anywhere;
}
.auto-schedule {
display: grid;
gap: 4px;
margin-top: 8px;
}
.auto-schedule code {
display: block;
width: 100%;
border-radius: 6px;
padding: 6px 7px;
background: rgba(0,0,0,.22);
color: #e2e8f0;
font-size: 11px;
white-space: normal;
overflow-wrap: anywhere;
}
.auto-schedule span,
.auto-card p,
.auto-card-foot {
color: var(--muted);
font-size: 11px;
line-height: 1.4;
}
.auto-card p {
margin: 8px 0 0;
max-height: 64px;
overflow: hidden;
}
.auto-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 10px;
}
.auto-card-foot div {
display: flex;
gap: 5px;
}
.auto-mini {
min-width: 38px;
border: 1px solid rgba(255,255,255,.10);
border-radius: 6px;
background: rgba(255,255,255,.05);
color: var(--text);
padding: 4px 8px;
font-size: 11px;
font-weight: 700;
cursor: pointer;
}
.auto-mini:hover {
background: rgba(255,255,255,.10);
}
.auto-mini.auto-edit {
color: #bfdbfe;
border-color: rgba(96,165,250,.30);
background: rgba(96,165,250,.12);
}
.auto-modal-backdrop {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(0,0,0,.66);
backdrop-filter: blur(4px);
}
.auto-modal {
width: min(640px, 100%);
max-height: min(90vh, 780px);
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(255,255,255,.10);
border-radius: 8px;
background: #0f172a;
box-shadow: 0 24px 60px rgba(0,0,0,.42);
}
.auto-modal header,
.auto-modal footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.auto-modal footer {
border-top: 1px solid rgba(255,255,255,.08);
border-bottom: 0;
}
.auto-modal footer div {
display: flex;
gap: 8px;
}
.auto-modal h2 {
margin: 0;
color: var(--text);
font-size: 16px;
letter-spacing: 0;
}
.auto-modal header span {
display: block;
margin-top: 2px;
color: var(--muted);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
overflow-wrap: anywhere;
}
.auto-modal-x {
border: 0;
border-radius: 6px;
background: transparent;
color: var(--muted);
font-size: 18px;
line-height: 1;
padding: 5px 8px;
cursor: pointer;
}
.auto-modal-x:hover {
background: rgba(255,255,255,.08);
color: var(--text);
}
.auto-modal-body {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
overflow-y: auto;
}
.auto-modal-body label {
display: flex;
flex-direction: column;
gap: 6px;
color: var(--muted);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
}
.auto-modal-body input,
.auto-modal-body select,
.auto-modal-body textarea {
width: 100%;
border: 1px solid rgba(255,255,255,.11);
border-radius: 8px;
background: rgba(255,255,255,.05);
color: var(--text);
padding: 9px 10px;
font: 13px/1.4 inherit;
text-transform: none;
}
.auto-modal-body textarea {
min-height: 150px;
resize: vertical;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
}
.auto-modal-body small {
color: rgba(148,163,184,.85);
font-size: 11px;
font-weight: 600;
text-transform: none;
}
.auto-modal-toggle {
flex-direction: row !important;
align-items: center;
text-transform: none !important;
font-size: 13px !important;
}
.auto-modal-toggle input {
width: auto;
accent-color: #60a5fa;
}
@media (max-width: 900px) {
.auto-board {
grid-template-columns: repeat(2, minmax(220px, 1fr));
}
}
@media (max-width: 560px) {
.auto-board {
grid-template-columns: minmax(0, 1fr);
overflow-x: visible;
}
.auto-error-panel {
align-items: stretch;
flex-direction: column;
}
.auto-error-actions {
justify-content: stretch;
}
.auto-error-actions .btn-primary,
.auto-error-actions .btn-ghost {
flex: 1;
justify-content: center;
}
.auto-card-foot,
.auto-col header,
.auto-modal footer {
align-items: stretch;
flex-direction: column;
}
.auto-card-foot div,
.auto-modal footer div {
width: 100%;
}
.auto-mini,
.auto-modal footer .btn-ghost,
.auto-modal footer .btn-primary {
flex: 1;
justify-content: center;
}
}
/* ═══ 2026-06-11 overhaul: grouped nav, live progress states, a11y focus ═══ */
/* Sidebar nav groups */
.nav-group { margin: 2px 0; }
.nav-group > summary {
list-style: none;
cursor: pointer;
user-select: none;
padding: 7px 14px 5px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--muted, #8b93a7);
display: flex;
align-items: center;
gap: 6px;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after {
content: '▸';
font-size: 9px;
margin-left: auto;
transition: transform 0.15s ease;
opacity: 0.7;
}
.nav-group[open] > summary::after { transform: rotate(90deg); }
.nav-group > summary:hover { color: var(--text, #e7eaf2); }
.nav-group .nav-item { padding-left: 22px; }
/* Art Seps: simple-mode hint + busy status */
.sep-simple-hint {
font-size: 11.5px;
color: var(--muted, #8b93a7);
line-height: 1.45;
margin: 4px 0 8px;
}
.sep-finetune > summary { font-weight: 700; }
.sep-status.busy {
position: relative;
padding-left: 22px;
}
.sep-status.busy::before {
content: '';
position: absolute;
left: 2px;
top: 50%;
width: 12px;
height: 12px;
margin-top: -7px;
border: 2px solid rgba(255,122,26,0.25);
border-top-color: var(--brand, #ff7a1a);
border-radius: 50%;
animation: sepSpin 0.8s linear infinite;
}
@keyframes sepSpin { to { transform: rotate(360deg); } }
/* Mockups: live auto-update note */
.mockup-live-note {
color: var(--brand, #ff7a1a);
font-size: 11.5px;
}
.mockup-live-note::before {
content: '';
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--brand, #ff7a1a);
margin-right: 6px;
animation: mockupPulse 1.6s ease-in-out infinite;
}
@keyframes mockupPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
/* Accessibility: restore visible keyboard focus everywhere */
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.chip:focus-visible,
.nav-item:focus-visible,
.nav-group > summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
button:focus-visible,
a:focus-visible {
outline: 2px solid var(--brand, #ff7a1a) !important;
outline-offset: 2px;
}
/* ═══ Today action queue ═══ */
.today-panel {
background: linear-gradient(180deg, rgba(255,122,26,0.06), rgba(255,255,255,0.015));
border: 1px solid rgba(255,122,26,0.22);
border-radius: 14px;
padding: 16px 18px;
margin-bottom: 18px;
}
.today-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.today-title { font-size: 17px; font-weight: 800; letter-spacing: 0.01em; }
.today-sub { font-size: 12px; color: var(--muted, #8b93a7); margin-top: 2px; }
.today-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.today-list { display: flex; flex-direction: column; gap: 6px; }
.today-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.06);
background: rgba(255,255,255,0.02);
text-decoration: none; color: var(--text, #e7eaf2);
transition: background 0.12s ease, border-color 0.12s ease;
}
.today-item:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,122,26,0.35); }
.today-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: #64748b; }
.today-item.u-overdue .today-dot { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.6); }
.today-item.u-today .today-dot { background: #f59e0b; }
.today-item.u-late .today-dot { background: #f97316; }
.today-item.u-soon .today-dot { background: #38bdf8; }
.today-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.today-item-title { font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-item-sub { font-size: 11.5px; color: var(--muted, #8b93a7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-badge { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted, #8b93a7); flex: 0 0 auto; }
.today-item.u-overdue .today-badge { color: #fca5a5; }
.today-item.u-late .today-badge { color: #fdba74; }
.today-item.u-today .today-badge { color: #fcd34d; }
.today-action { flex: 0 0 auto; }
.today-empty { padding: 14px 4px; font-size: 13px; color: var(--muted, #8b93a7); }
.today-more { padding: 8px 4px 2px; font-size: 12px; color: var(--muted, #8b93a7); }
.today-more a { color: var(--brand, #ff7a1a); }
@media (max-width: 720px) {
.today-item { flex-wrap: wrap; }
.today-action { display: none; }
.today-item-title, .today-item-sub { white-space: normal; }
}
/* ═══ Mobile: trimmed bottom nav + More sheet, larger touch targets ═══ */
.mobile-more-sheet {
position: fixed;
left: 0; right: 0; bottom: 58px;
z-index: 60;
background: rgba(13, 17, 28, 0.97);
border-top: 1px solid rgba(255,122,26,0.3);
backdrop-filter: blur(12px);
padding: 14px;
max-height: 60vh;
overflow-y: auto;
}
.mobile-more-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.mobile-more-link {
display: flex; align-items: center; justify-content: center;
min-height: 48px;
border: 1px solid rgba(255,255,255,0.09);
border-radius: 10px;
background: rgba(255,255,255,0.03);
color: var(--text, #e7eaf2);
font-size: 13px; font-weight: 650;
text-decoration: none;
}
.mobile-more-link:active { background: rgba(255,122,26,0.15); }
@media (min-width: 901px) { .mobile-more-sheet { display: none; } }
@media (max-width: 900px) {
.mobile-nav-item { min-height: 52px; }
.btn-primary, .btn-ghost { min-height: 40px; }
input, select, textarea { font-size: 16px; } /* prevents iOS zoom-on-focus */
}
button.mobile-nav-item { background: none; border: none; font: inherit; color: inherit; cursor: pointer; }
/* ═══ Sub-navigation tab strips (Sales, Design Tools) ═══ */
.subnav { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.subnav .chip { text-decoration: none; }
/* ═══════════════════════════════════════════════════════════════
v280 DASHBOARD REDESIGN — KPI summary, event readiness, grouped tasks
Additive layer. Reuses existing tokens (--surface, --brand, etc.) and
the existing .pill / .chip components. 2026-06-26.
═══════════════════════════════════════════════════════════════ */
/* ── 1. KPI summary cards (top of overview) ─────────────────── */
.kpi-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
.kpi-card2 {
position: relative; overflow: hidden; display: block; text-decoration: none; color: var(--text);
background: linear-gradient(180deg, var(--surface-2), var(--surface));
border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; min-height: 128px;
box-shadow: var(--shadow); transition: transform .15s var(--ease), border-color .15s;
}
.kpi-card2:hover { transform: translateY(-1px); border-color: var(--border-hi); }
.kpi-card2::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; opacity: .9; }
.kpi-card2.k-rev::before { background: linear-gradient(90deg, var(--green), #15803d); }
.kpi-card2.k-est::before { background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.kpi-card2.k-pipe::before { background: linear-gradient(90deg, var(--purple), var(--indigo)); }
.kpi-card2.k-evt::before { background: linear-gradient(90deg, var(--blue), #0ea5e9); }
.kpi-card2.loading { pointer-events: none; }
.kpi-card2.loading .kpi-big { color: var(--muted); }
.kpi-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.kpi-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; }
.kpi-ico svg { width: 16px; height: 16px; }
.k-rev .kpi-ico { background: rgba(34,197,94,.14); color: #86efac; }
.k-est .kpi-ico { background: rgba(255,145,0,.14); color: #ffb75c; }
.k-pipe .kpi-ico { background: rgba(168,85,247,.14); color: #d8b4fe; }
.k-evt .kpi-ico { background: rgba(59,130,246,.14); color: #93c5fd; }
.kpi-card2.loading .kpi-ico { background: rgba(255,255,255,.05); }
.kpi-name { font-size: 11.5px; font-weight: 700; color: var(--text-2); letter-spacing: .01em; }
.kpi-big { font-size: 27px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.k-rev .kpi-big { color: var(--green); }
.kpi-meta { display: flex; align-items: center; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
.kpi-tag { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.kpi-tag.good { background: rgba(34,197,94,.14); color: #86efac; border: 1px solid rgba(34,197,94,.28); }
.kpi-tag.warn { background: rgba(245,158,11,.14); color: #fcd34d; border: 1px solid rgba(245,158,11,.28); }
.kpi-tag.info { background: rgba(59,130,246,.14); color: #93c5fd; border: 1px solid rgba(59,130,246,.28); }
.kpi-tag.dim { background: rgba(255,255,255,.05); color: var(--muted); border: 1px solid var(--border-hi); }
.kpi-sub { font-size: 11.5px; color: var(--muted); margin-top: 7px; }
/* ── 2. Event readiness cards (staffing bar + prep checklist) ── */
.event-card.readiness { padding: 16px 18px 16px; }
.staff-bar-wrap { margin: 14px 0 12px; }
.staff-bar-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; margin-bottom: 6px; }
.staff-bar-top .sb-lbl { color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.staff-bar-top .sb-val { font-weight: 800; }
.staff-bar { height: 7px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.staff-bar > span { display: block; height: 100%; border-radius: 99px; transition: width .6s var(--ease); }
.staff-bar > span.full { background: linear-gradient(90deg, #15803d, var(--green)); }
.staff-bar > span.part { background: linear-gradient(90deg, #b45309, var(--yellow)); }
.staff-bar > span.low { background: linear-gradient(90deg, #991b1b, var(--red)); }
.prep-list { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.prep-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.prep-check { width: 17px; height: 17px; border-radius: 5px; flex: 0 0 auto; display: grid; place-items: center; }
.prep-check svg { width: 11px; height: 11px; }
.prep-row.done .prep-check { background: rgba(34,197,94,.16); color: #86efac; }
.prep-row.done .prep-txt { color: var(--text-2); }
.prep-row.todo .prep-check { background: rgba(255,255,255,.05); border: 1px solid var(--border-hi); }
.prep-row.todo .prep-txt { color: var(--muted); }
.prep-txt { font-weight: 600; }
.prep-row .prep-meta { margin-left: auto; font-size: 11px; color: var(--muted); font-weight: 600; }
/* ── 3. Grouped task list (replaces flat Today list) ─────────── */
.today-panel .today-list { gap: 12px; }
.task-group { background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.tg-head { display: flex; align-items: center; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.tg-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; }
.tg-ico svg { width: 15px; height: 15px; }
.tg-title { font-size: 13.5px; font-weight: 800; letter-spacing: .01em; }
.tg-count { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 99px; }
.tg-spacer { flex: 1; }
.tg-link { font-size: 11.5px; font-weight: 700; color: var(--muted); text-decoration: none; }
.tg-link:hover { color: var(--text-2); }
.tg-overdue { border-color: rgba(239,68,68,.22); }
.tg-overdue .tg-ico { background: rgba(239,68,68,.15); color: #fca5a5; }
.tg-overdue .tg-count { background: rgba(239,68,68,.16); color: #fca5a5; }
.tg-stale .tg-ico { background: rgba(245,158,11,.15); color: #fcd34d; }
.tg-stale .tg-count { background: rgba(245,158,11,.16); color: #fcd34d; }
.tg-leads .tg-ico { background: rgba(59,130,246,.15); color: #93c5fd; }
.tg-leads .tg-count { background: rgba(59,130,246,.16); color: #93c5fd; }
.tg-prod .tg-ico { background: rgba(34,197,94,.15); color: #86efac; }
.tg-prod .tg-count { background: rgba(34,197,94,.16); color: #86efac; }
.tg-body { display: flex; flex-direction: column; }
.tg-item { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid rgba(255,255,255,.03); text-decoration: none; color: var(--text); transition: background .12s ease; }
.tg-item:first-child { border-top: none; }
.tg-item:hover { background: rgba(255,255,255,.03); }
.tg-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.tg-overdue .tg-dot { background: var(--red); box-shadow: 0 0 8px rgba(239,68,68,.6); }
.tg-stale .tg-dot { background: var(--yellow); }
.tg-leads .tg-dot { background: var(--blue); }
.tg-prod .tg-dot { background: var(--green); }
.tg-item-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.tg-item-title { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-item-sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-more-txt { color: var(--muted); font-weight: 700; }
.tg-action { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; padding: 6px 13px; border-radius: 8px; border: 1px solid var(--border-hi); background: rgba(255,255,255,.03); color: var(--text-2); white-space: nowrap; transition: .12s ease; }
.tg-item:hover .tg-action { border-color: rgba(255,145,0,.4); color: #ffb75c; background: rgba(255,145,0,.07); }
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) { .kpi-summary { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
.kpi-summary { grid-template-columns: 1fr; }
.tg-action { display: none; }
.tg-head { gap: 9px; padding: 12px 14px; }
}
/* ═══ Mockup preview lightbox (v280) — click thumbnail to expand in-page ═══ */
.mockup-preview { cursor: zoom-in; transition: border-color .12s ease, transform .12s ease; }
.mockup-preview:hover { border-color: var(--brand); transform: translateY(-1px); }
.mockup-preview:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.mockup-lightbox {
position: fixed; inset: 0; z-index: 1200;
background: rgba(4, 6, 12, 0.86); backdrop-filter: blur(6px);
display: grid; place-items: center; padding: 32px;
animation: modalIn 0.15s ease-out;
}
.mockup-lightbox .mlb-inner { display: grid; place-items: center; gap: 12px; max-width: 92vw; max-height: 88vh; }
.mockup-lightbox .mlb-img {
max-width: 92vw; max-height: 82vh; object-fit: contain;
background: #fff; border-radius: 12px; padding: 10px;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55); cursor: default;
}
.mockup-lightbox .mlb-cap { font-size: 12.5px; color: var(--text-2); text-align: center; max-width: 80vw; }
.mockup-lightbox .mlb-close {
position: fixed; top: 18px; right: 22px; width: 40px; height: 40px; border-radius: 50%;
border: 1px solid var(--border-hi); background: rgba(255, 255, 255, 0.06); color: var(--text);
font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: .12s ease;
}
.mockup-lightbox .mlb-close:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--border-hi); }
.mockup-lightbox .mlb-open {
position: fixed; bottom: 22px; right: 22px; font-size: 12px; font-weight: 700;
padding: 8px 14px; border-radius: 99px; border: 1px solid var(--border-hi);
background: rgba(255, 255, 255, 0.05); color: var(--text-2); text-decoration: none; transition: .12s ease;
}
.mockup-lightbox .mlb-open:hover { color: #ffb75c; border-color: rgba(255, 145, 0, 0.4); background: rgba(255, 145, 0, 0.08); }
@media (max-width: 560px) { .mockup-lightbox { padding: 16px; } .mockup-lightbox .mlb-open { bottom: 14px; right: 14px; } }
/* v284 event staff payouts */
.payout-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-bottom: 14px;
}
.payout-stats > div {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 14px;
}
.payout-stats span,
.payout-num span {
display: block;
color: var(--muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
}
.payout-stats b {
display: block;
margin-top: 4px;
color: var(--text);
font-size: 24px;
font-weight: 850;
}
.payout-card .list-section-head {
display: flex;
align-items: center;
gap: 8px;
}
.payout-card .view-all {
margin-left: auto;
color: var(--accent);
font-size: 12px;
font-weight: 750;
text-decoration: none;
}
.payout-row {
display: grid;
grid-template-columns: minmax(220px, 1fr) 78px 78px 86px 96px auto;
gap: 10px;
align-items: center;
padding: 12px 0;
border-top: 1px solid var(--border);
}
.payout-row:first-of-type {
border-top: 0;
}
.payout-title {
color: var(--text);
font-size: 14px;
font-weight: 800;
}
.payout-sub {
margin-top: 3px;
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.payout-num,
.payout-total {
text-align: right;
font-variant-numeric: tabular-nums;
}
.payout-num b {
display: block;
margin-top: 2px;
color: var(--text);
font-size: 13px;
}
.payout-total {
color: var(--green);
font-size: 15px;
font-weight: 850;
}
.payout-actions {
display: flex;
justify-content: flex-end;
gap: 6px;
flex-wrap: wrap;
}
.receipt-list {
display: grid;
gap: 8px;
}
.receipt-row {
display: grid;
grid-template-columns: 54px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid var(--border);
}
.receipt-row img {
width: 54px;
height: 54px;
object-fit: cover;
border-radius: 6px;
border: 1px solid var(--border);
}
.receipt-main b,
.receipt-main span {
display: block;
}
.receipt-main span {
margin-top: 2px;
color: var(--muted);
font-size: 12px;
}
.receipt-amt {
color: var(--green);
font-weight: 800;
font-variant-numeric: tabular-nums;
}
@media (max-width: 860px) {
.payout-stats {
grid-template-columns: 1fr;
}
.payout-row {
grid-template-columns: 1fr 1fr;
align-items: start;
}
.payout-main,
.payout-actions {
grid-column: 1 / -1;
}
.payout-actions {
justify-content: flex-start;
}
.payout-num,
.payout-total {
text-align: left;
}
}
/* ── Prep Board (v296) ─────────────────────────────────────────────
Mirrors Christine's weekly prep spreadsheet: light spreadsheet-style
cards on the dark shell, her exact sheet palette — dark-green date
header, medium-green client band, green rows = handled, pink = pending. */
.prep-board { display: flex; flex-direction: column; gap: 26px; }
.prep-week-head {
font-weight: 700; font-size: 15px; color: var(--text);
margin-bottom: 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.prep-week-meta { font-weight: 400; font-size: 12.5px; color: var(--muted); }
.prep-week-meta b { color: #f8b4b4; font-weight: 600; }
.prep-week-row {
display: grid; gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
align-items: start;
}
.prep-card {
background: #fbfdf9; border-radius: var(--r-sm); overflow: hidden;
border: 1px solid rgba(56, 118, 29, 0.5);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
color: #1a2b12; font-size: 13px;
}
.prep-card.all-clear { border-color: rgba(56, 118, 29, 0.9); }
.prep-head {
background: #38761d; color: #fff; font-weight: 700; font-size: 14px;
padding: 8px 10px; display: flex; justify-content: space-between; align-items: center;
cursor: pointer;
}
.prep-chip {
font-size: 10.5px; font-weight: 600; background: rgba(255, 255, 255, 0.22);
border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.prep-chip.hot { background: #ff9100; color: #241300; }
.prep-hours { padding: 6px 10px; font-weight: 700; font-size: 13px; cursor: pointer; }
.prep-hours.ok { background: #d9ead3; color: #274e13; }
.prep-hours.pend { background: #f4cccc; color: #85200c; }
.prep-name {
background: #6aa84f; color: #fff; font-weight: 700; letter-spacing: 0.02em;
padding: 7px 10px; cursor: pointer;
}
.prep-meta {
padding: 6px 10px; font-size: 11.5px; color: #4a5d3f;
background: #f1f6ec; border-bottom: 1px solid #dde8d5;
}
.prep-items { display: flex; flex-direction: column; }
.prep-item {
display: flex; align-items: flex-start; justify-content: space-between; gap: 6px;
padding: 7px 10px; line-height: 1.35; cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.65);
}
.prep-item.done { background: #d9ead3; color: #274e13; }
.prep-item.pend { background: #f4cccc; color: #85200c; }
.prep-item.done .prep-item-text::before { content: '✓ '; font-weight: 700; }
.prep-item:hover { filter: brightness(0.96); }
.prep-item-tools { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s var(--ease); }
.prep-item:hover .prep-item-tools { opacity: 1; }
.prep-tool {
border: 0; background: rgba(0, 0, 0, 0.08); color: inherit; border-radius: 4px;
width: 20px; height: 20px; line-height: 1; cursor: pointer; font-size: 12px; padding: 0;
}
.prep-tool:hover { background: rgba(0, 0, 0, 0.18); }
.prep-empty { padding: 10px; font-size: 12px; color: #7c8a72; font-style: italic; }
.prep-add-row { display: flex; gap: 6px; padding: 8px 10px; background: #eef4e9; }
.prep-add-input {
flex: 1; border: 1px solid #b7cba7; border-radius: 6px; padding: 6px 8px;
font-size: 12.5px; background: #fff; color: #1a2b12; min-width: 0;
}
.prep-add-input:focus { outline: 2px solid #6aa84f; outline-offset: -1px; }
.prep-add-btn {
border: 0; background: #38761d; color: #fff; font-weight: 700; font-size: 15px;
border-radius: 6px; width: 30px; cursor: pointer; flex-shrink: 0;
}
.prep-add-btn:hover { background: #2c5e16; }
.prep-past-toggle { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
/* Modal variant — keep spreadsheet look inside the dark event modal */
.ed-prep .prep-items.in-modal { border-radius: var(--r-sm); overflow: hidden; border: 1px solid rgba(56, 118, 29, 0.4); }
.ed-prep .prep-add-row.in-modal { background: transparent; padding: 8px 0 0; }
.ed-prep .prep-empty { background: rgba(255, 255, 255, 0.04); color: var(--muted); border-radius: var(--r-sm); }
.ed-prep-link { font-size: 12px; color: var(--accent); text-decoration: none; }
.ed-prep-link:hover { text-decoration: underline; }
@media (max-width: 640px) {
.prep-week-row { grid-template-columns: 1fr; }
}
@media (hover: none) {
.prep-item-tools { opacity: 1; }
}