:root {
/* Surfaces */
--bg: #0b0c0f;
--surface: #14161c;
--card: #1a1d26;
--border: #2a2e3a;
--border-subtle: #22252f;
/* Blue palette — Option A */
--blue: #4F8EF7;
--blue-dim: rgba(79, 142, 247, 0.10);
--blue-glow: rgba(79, 142, 247, 0.22);
--blue-hover: #6ba3f9;
--blue-dark: #3a72d4;
/* Indigo accent — Option C (highlights, badges) */
--indigo: #7C86FF;
--indigo-dim: rgba(124, 134, 255, 0.10);
/* Slate — Option B (secondary, muted accents) */
--slate: #6C8EBF;
--slate-dim: rgba(108, 142, 191, 0.10);
/* Semantic */
--green: #4ade80;
--green-dim: rgba(74, 222, 128, 0.12);
--red: #f87171;
--red-dim: rgba(248, 113, 113, 0.12);
--amber: #fbbf24;
--amber-dim: rgba(251, 191, 36, 0.12);
/* Text */
--text: #eef0f6;
--text-2: #b0b8cc;
--muted: #6b7288;
--sidebar-w: 224px;
--font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", system-ui, sans-serif;
}
html.light {
--bg: #f0f2f8;
--surface: #ffffff;
--card: #f7f8fc;
--border: #dde1ee;
--border-subtle: #eaecf5;
--blue: #3a72d4;
--blue-dim: rgba(58, 114, 212, 0.08);
--blue-glow: rgba(58, 114, 212, 0.18);
--blue-hover: #2d5fbc;
--blue-dark: #2450a0;
--indigo: #5c68e8;
--indigo-dim: rgba(92, 104, 232, 0.08);
--slate: #4a6a9a;
--slate-dim: rgba(74, 106, 154, 0.08);
--green: #16a34a;
--green-dim: rgba(22, 163, 74, 0.10);
--red: #dc2626;
--red-dim: rgba(220, 38, 38, 0.10);
--amber: #d97706;
--amber-dim: rgba(217, 119, 6, 0.10);
--text: #111827;
--text-2: #4b5563;
--muted: #9ca3af;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-ui);
display: flex;
flex-direction: column;
min-height: 100vh;
overflow-x: hidden;
/* Disable overscroll bounce on the body. Without this the sticky
.app-header rubber-bands downward when the user scrolls past the
page end — visually reads as "the black bar is shifting." */
overscroll-behavior-y: none;
}
html { overscroll-behavior-y: none; }
/* ── APP HEADER (chrome bar) ───────────────────────────────────────
Always-visible dark bar at the top of every page. Houses identity
and global actions only — per-page tools live in .topbar below. */
.app-header {
flex-shrink: 0;
height: 48px;
background: #0d1117;
color: #e6e9ef;
display: flex;
align-items: center;
gap: 12px;
padding: 0 16px;
border-bottom: 1px solid #1f2530;
z-index: 200;
position: sticky;
top: 0;
}
.app-header-left,
.app-header-right {
display: flex;
align-items: center;
gap: 10px;
}
.app-header-center {
flex: 1;
}
.app-brand {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
color: #f5f7fa;
letter-spacing: 0.2px;
}
.app-store-badge {
display: inline-flex;
align-items: center;
gap: 8px;
height: 30px;
padding: 0 10px;
background: #1a2030;
border: 1px solid #2a3142;
color: #d6dae6;
font-family: inherit;
font-size: 12px;
font-weight: 600;
border-radius: 6px;
cursor: pointer;
transition: background .12s ease;
}
.app-store-badge:hover { background: #232b3d; }
.app-store-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 2px rgba(34, 197, 94, .18);
}
.app-icon-btn {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
color: #d6dae6;
cursor: pointer;
transition: background .12s ease;
}
.app-icon-btn i { color: inherit !important; }
.app-icon-btn:hover { background: #1a2030; }
.app-user-avatar {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #4F8EF7, #43c6ac);
color: #fff;
border: 0;
border-radius: 50%;
font-family: inherit;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
cursor: pointer;
transition: transform .12s ease;
}
.app-user-avatar:hover { transform: scale(1.05); }
/* Wrapper for sidebar + main, sitting below the chrome header.
Body is now column-flex; this is its row-flex child. */
.app-body {
flex: 1;
display: flex;
min-height: 0;
}
/* Dark-mode chrome — light-mode's hardcoded #0d1117 looks identical
to the dark-mode body bg (#0e1116), erasing the chrome's edge.
Lift the chrome to the same surface tone the sidebar uses so it
reads as a distinct layer above the body in dark mode too. */
html:not(.light) .app-header {
background: var(--ui-surface-strong);
border-bottom-color: var(--ui-line);
}
html:not(.light) .app-store-badge {
background: rgba(255, 255, 255, 0.04);
border-color: var(--ui-line);
color: var(--ui-text-soft);
}
html:not(.light) .app-store-badge:hover {
background: rgba(255, 255, 255, 0.07);
}
html:not(.light) .app-icon-btn:hover {
background: rgba(255, 255, 255, 0.06);
}
.notif-wrap-header .notif-bell-header {
color: #a9b2c7;
}
/* ── SIDEBAR ─────────────────────────────────────────────────── */
.sidebar {
width: var(--sidebar-w);
background: var(--surface);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
position: fixed;
top: 48px; /* sit below the 48px chrome header */
left: 0;
bottom: 0;
z-index: 100;
}
.sidebar-nav {
flex: 1;
padding: 16px 0;
overflow-y: auto;
}
.nav-section-label {
font-size: 10px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1px;
padding: 12px 20px 6px;
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
cursor: pointer;
font-size: 13px;
color: var(--muted);
border-left: 2px solid transparent;
position: relative;
transition: color 0.18s, background 0.18s, border-color 0.18s, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
will-change: transform;
}
.nav-item:hover {
color: var(--text);
background: var(--blue-dim);
transform: translateX(5px);
}
.nav-item.active {
color: var(--blue);
border-left-color: var(--blue);
background: var(--blue-dim);
transform: translateX(4px);
}
.nav-item.active span {
font-weight: 700;
}
.nav-item img {
flex-shrink: 0;
opacity: 0.55;
transition: opacity 0.18s, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ─── Polish bulk-edit table ─────────────────────────────────────── */
.polish-table thead th {
background: rgba(67, 198, 172, 0.06);
color: var(--text);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
padding: 11px 10px;
text-align: left;
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 1;
}
/* Light theme: re-tint so header reads dark-on-light, not grey-on-grey. */
html.light .polish-table thead th {
background: rgba(67, 198, 172, 0.08);
color: #1a2332;
border-bottom-color: rgba(0, 0, 0, 0.08);
}
.polish-table tbody td {
padding: 8px 10px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
color: var(--text);
}
.polish-table tbody tr:hover {
background: rgba(67, 198, 172, 0.04);
}
.polish-table tbody tr.row-selected {
background: rgba(67, 198, 172, 0.08);
}
/* Flash highlight when a row is jumped-to from Pre-flight's "Fix →" link.
Bright teal glow that fades over ~2.4s so the user's eye can find
the row even in a long table. */
@keyframes polishRowFlash {
0% {
background: rgba(67, 198, 172, 0.45);
box-shadow: inset 4px 0 0 var(--blue);
}
40% {
background: rgba(67, 198, 172, 0.30);
box-shadow: inset 4px 0 0 var(--blue);
}
100% {
background: rgba(67, 198, 172, 0.00);
box-shadow: inset 4px 0 0 transparent;
}
}
.polish-table tbody tr.row-flash {
animation: polishRowFlash 2.4s ease-out;
}
.polish-cell-input {
width: 100%;
background: transparent;
border: 1px solid var(--border);
color: var(--text);
font-size: 12px;
padding: 5px 8px;
border-radius: 5px;
font-family: inherit;
box-sizing: border-box;
transition: border-color 0.15s, background 0.15s;
}
/* Hover lifts the border so users see the field is interactive. */
.polish-cell-input:hover {
border-color: var(--blue);
}
.polish-cell-input:focus {
outline: none;
border-color: var(--blue);
background: rgba(67, 198, 172, 0.05);
}
/* Dirty = staged change not yet sent to server. Cleared on save. */
.polish-cell-input.dirty {
border-color: var(--amber);
background: rgba(228, 248, 160, 0.04);
}
/* Light theme: lift contrast so inputs visibly look editable. */
html.light .polish-cell-input {
border-color: rgba(0, 0, 0, 0.12);
background: #fff;
}
html.light .polish-cell-input:hover {
border-color: var(--blue);
}
html.light .polish-cell-input:focus {
border-color: var(--blue);
background: #fff;
}
/* Numeric inputs need extra width because of the spinner control. */
.polish-cell-input[type="number"] {
padding-right: 4px;
}
/* Quantity column specifically — Chrome's spinner eats ~16px on the right. */
.polish-table td.polish-qty-cell .polish-cell-input {
min-width: 56px;
}
/* ─── AI Suggest cell (Phase 6) ───────────────────────────────────── */
.polish-ai-cell {
display: flex;
align-items: center;
gap: 6px;
font-variant-numeric: tabular-nums;
}
.polish-ai-btn {
background: rgba(228, 248, 160, 0.07);
color: var(--amber);
border: 1px solid rgba(228, 248, 160, 0.25);
font-size: 10px;
font-weight: 600;
padding: 4px 9px;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
font-family: inherit;
transition: background 0.15s, border-color 0.15s;
}
.polish-ai-btn:hover {
background: rgba(228, 248, 160, 0.14);
border-color: rgba(228, 248, 160, 0.5);
}
.polish-ai-value {
font-size: 12px;
color: var(--text);
font-weight: 600;
cursor: help;
border-bottom: 1px dashed rgba(228, 248, 160, 0.4);
}
.polish-ai-use-btn {
background: var(--amber);
color: #001;
border: 0;
font-size: 9px;
font-weight: 700;
padding: 3px 7px;
border-radius: 4px;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.04em;
font-family: inherit;
transition: filter 0.12s;
}
.polish-ai-use-btn:hover {
filter: brightness(1.15);
}
/* Buttons inside the Polish AI Toolbar. Each one is a coloured
gradient pill — visually distinct from the muted Pricing strip
so users see at a glance that these spend AI credits. */
.polish-ai-tool-btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
padding: 6px 12px;
border-radius: 7px;
border: 1px solid rgba(67, 198, 172, 0.45);
background: linear-gradient(135deg, rgba(67, 198, 172, 0.16), rgba(228, 248, 160, 0.10));
color: var(--text);
cursor: pointer;
font-family: inherit;
transition: all 0.15s ease;
line-height: 1.2;
}
.polish-ai-tool-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(67, 198, 172, 0.20);
border-color: var(--blue);
background: linear-gradient(135deg, rgba(67, 198, 172, 0.24), rgba(228, 248, 160, 0.16));
}
.polish-ai-tool-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.polish-ai-tool-btn.running {
background: linear-gradient(135deg, rgba(228, 248, 160, 0.30), rgba(67, 198, 172, 0.18));
border-color: var(--amber);
color: var(--amber);
}
html.light .polish-ai-tool-btn {
background: linear-gradient(135deg, rgba(67, 198, 172, 0.12), rgba(228, 248, 160, 0.08));
}
/* Spinner used in the Push tab's live progress card while a row is
mid-flight. Blue ring with a teal arc that rotates. */
.pq-push-spinner {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid rgba(67, 134, 255, 0.20);
border-top-color: var(--blue);
border-radius: 50%;
animation: pq-push-spin 0.8s linear infinite;
}
@keyframes pq-push-spin {
to {
transform: rotate(360deg);
}
}
.polish-ai-spinner {
width: 12px;
height: 12px;
border: 2px solid rgba(228, 248, 160, 0.2);
border-top-color: var(--amber);
border-radius: 50%;
display: inline-block;
animation: polishAiSpin 0.8s linear infinite;
}
@keyframes polishAiSpin {
to {
transform: rotate(360deg);
}
}
/* Brief pulse on the Final Price input when "use" copies a value into
it — visual confirmation that something happened. */
.polish-pulse-once {
animation: polishPulse 0.8s ease-out;
}
@keyframes polishPulse {
0% {
box-shadow: 0 0 0 0 rgba(228, 248, 160, 0.5);
}
40% {
box-shadow: 0 0 0 6px rgba(228, 248, 160, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(228, 248, 160, 0);
}
}
/* ─── Pre-flight dots + statuses ───────────────────────────────────── */
.pf-dots {
display: inline-flex;
gap: 6px;
align-items: center;
}
/* Wrapper to host the hover tooltip without breaking the inline flow */
.pf-dot-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
.pf-dot {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
cursor: help;
transition: transform 0.15s;
}
.pf-dot-wrap:hover .pf-dot {
transform: scale(1.25);
}
.pf-dot.pass {
background: var(--green);
box-shadow: 0 0 0 2px rgba(67, 198, 172, 0.15);
}
.pf-dot.fail {
background: var(--red);
box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
}
/* Custom hover bubble — appears on hover and reads the failing check
label + fix instruction. Native title= attributes were unreliable
on a 12px element with no content. */
.pf-dot-tip {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: #14202b;
color: #fff;
font-size: 11px;
line-height: 1.4;
padding: 8px 11px;
border-radius: 7px;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
white-space: normal;
width: 220px;
z-index: 100;
pointer-events: none;
opacity: 0;
transition: opacity 0.12s, transform 0.18s;
transform: translate(-50%, 4px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.pf-dot-tip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #14202b;
}
.pf-dot-wrap:hover .pf-dot-tip {
opacity: 1;
transform: translate(-50%, 0);
}
.pf-dot-tip-label {
font-weight: 700;
margin-bottom: 3px;
display: block;
}
.pf-dot-tip-fix {
color: rgba(255, 255, 255, 0.75);
}
.pf-dot.pass+.pf-dot-tip {
border-color: rgba(67, 198, 172, 0.3);
}
.pf-dot.fail+.pf-dot-tip {
border-color: rgba(220, 38, 38, 0.3);
}
/* Last-row tooltips would clip below the table — flip them to render
below the dot instead of above. Apply via JS class when needed. */
.pf-dot-wrap.tip-below .pf-dot-tip {
bottom: auto;
top: calc(100% + 8px);
transform: translate(-50%, -4px);
}
.pf-dot-wrap.tip-below .pf-dot-tip::after {
top: auto;
bottom: 100%;
border-top-color: transparent;
border-bottom-color: #14202b;
}
.pf-dot-wrap.tip-below:hover .pf-dot-tip {
transform: translate(-50%, 0);
}
.pf-status-ready {
font-size: 11px;
padding: 3px 9px;
border-radius: 10px;
background: rgba(67, 198, 172, 0.14);
color: var(--green);
font-weight: 700;
white-space: nowrap;
}
.pf-status-blocked {
font-size: 11px;
padding: 3px 9px;
border-radius: 10px;
background: rgba(220, 38, 38, 0.10);
color: var(--red);
font-weight: 600;
white-space: nowrap;
cursor: help;
}
.polish-row-status {
font-size: 12px;
padding: 5px 12px;
border-radius: 8px;
font-weight: 700;
display: inline-block;
line-height: 1.2;
}
.polish-row-status.clean {
background: rgba(28, 140, 76, 0.10);
color: #1c8c4c;
}
.polish-row-status.saved {
background: rgba(28, 140, 76, 0.12);
color: #1c8c4c;
}
.polish-row-status.saving {
background: rgba(74, 159, 232, 0.12);
color: #2563eb;
}
.polish-row-status.error {
background: rgba(220, 38, 38, 0.12);
color: #dc2626;
}
.polish-row-status.dirty {
background: rgba(234, 179, 8, 0.14);
color: #b45309;
}
/* Tags input — when it has value, render with a soft purple pill tint.
Targeted via the [list=polish-tag-suggestions] attribute so no markup
change is needed. The :not(:placeholder-shown) selector switches
the styling once the user types or a value is pre-filled. */
.polish-cell-input[list="polish-tag-suggestions"]:not(:placeholder-shown) {
background: rgba(121, 80, 212, 0.10) !important;
color: #7950d4 !important;
border-color: rgba(121, 80, 212, 0.22) !important;
font-weight: 600;
}
.polish-cell-input[list="polish-tag-suggestions"]:not(:placeholder-shown)::placeholder {
color: rgba(121, 80, 212, 0.4) !important;
}
html:not(.light) .polish-cell-input[list="polish-tag-suggestions"]:not(:placeholder-shown) {
background: rgba(121, 80, 212, 0.10) !important;
color: #7950d4 !important;
border-color: rgba(121, 80, 212, 0.22) !important;
}
/* Polish row actions cell — three pill-style icon buttons (Edit, AI, Kebab) */
.polish-actions-cell {
white-space: nowrap;
text-align: right;
}
.polish-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 9px;
border: 1px solid #e6e8ee;
background: #ffffff;
color: #4a5160;
cursor: pointer;
transition: all 0.15s;
margin-left: 4px;
font-size: 14px;
}
.polish-action-btn:hover {
background: #f3f4f7;
border-color: #c4c9d4;
color: #1f2433;
}
.polish-action-btn.polish-action-edit {
border-color: rgba(37, 99, 235, 0.30);
color: #2563eb;
}
.polish-action-btn.polish-action-edit:hover {
background: rgba(37, 99, 235, 0.08);
border-color: #2563eb;
}
.polish-action-btn.polish-action-ai {
border-color: rgba(67, 198, 172, 0.30);
color: #43c6ac;
}
.polish-action-btn.polish-action-ai:hover {
background: rgba(67, 198, 172, 0.08);
border-color: #43c6ac;
}
/* Polish row kebab dropdown menu items */
.polish-kebab-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 14px;
border: none;
background: transparent;
color: #1f2433;
font-size: 13px;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: background 0.12s;
font-family: inherit;
}
.polish-kebab-item:hover {
background: #f3f4f7;
}
.polish-kebab-item i {
font-size: 14px;
color: #6b7280;
width: 16px;
text-align: center;
}
.polish-kebab-item-danger {
color: #dc2626;
}
.polish-kebab-item-danger i { color: #dc2626; }
.polish-kebab-item-danger:hover {
background: rgba(220, 38, 38, 0.06);
}
.polish-img {
width: 48px;
height: 48px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.3);
object-fit: cover;
border: 1px solid var(--border);
}
.polish-img-clickable {
cursor: zoom-in;
transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.polish-img-clickable:hover {
transform: scale(1.06);
border-color: var(--blue);
box-shadow: 0 0 0 2px rgba(67, 198, 172, 0.2);
}
/* Polish details modal — image reorder grid */
.polish-img-tile {
position: relative;
aspect-ratio: 1 / 1;
border-radius: 6px;
overflow: hidden;
border: 2px solid var(--border);
background: rgba(0, 0, 0, 0.25);
cursor: grab;
transition: border-color 0.15s, opacity 0.15s, transform 0.18s;
user-select: none;
}
.polish-img-tile.dragging {
opacity: 0.4;
cursor: grabbing;
}
.polish-img-tile.drop-target {
border-color: var(--blue);
transform: scale(1.04);
}
.polish-img-tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
.polish-img-tile-order {
position: absolute;
top: 4px;
left: 4px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 10px;
font-weight: 700;
padding: 1px 6px;
border-radius: 4px;
pointer-events: none;
}
.polish-img-tile-order.first {
background: var(--blue);
color: #001;
}
.polish-img-tile-remove {
position: absolute;
top: 4px;
right: 4px;
width: 20px;
height: 20px;
border: 0;
background: rgba(220, 38, 38, 0.85);
color: #fff;
font-size: 14px;
line-height: 1;
border-radius: 50%;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s;
font-family: inherit;
}
.polish-img-tile:hover .polish-img-tile-remove {
opacity: 1;
}
/* Description-mode toggle pills (Plain/HTML) */
.polish-desc-mode-btn.active {
background: var(--blue-dim);
color: var(--blue);
}
.polish-desc-mode-btn:not(.active):hover {
background: rgba(255, 255, 255, 0.04);
color: var(--text);
}
.polish-fx-preview {
font-size: 11px;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.polish-source {
font-size: 11px;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
/* Pipeline stage number chip — small, subtle, becomes blue when active. */
.stage-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
font-size: 10px;
font-weight: 700;
color: var(--muted);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border);
border-radius: 50%;
transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.nav-item:hover .stage-num,
.nav-item.active .stage-num {
color: var(--blue);
background: var(--blue-dim);
border-color: var(--blue);
}
.nav-item.locked .stage-num {
opacity: 0.4;
}
.nav-item:hover img,
.nav-item.active img {
opacity: 1;
filter: brightness(0) saturate(100%) invert(52%) sepia(70%) saturate(500%) hue-rotate(195deg) brightness(100%);
}
.nav-badge {
margin-left: auto;
background: var(--blue);
color: #fff;
font-size: 10px;
font-weight: 700;
padding: 1px 7px;
border-radius: 10px;
display: none;
flex-shrink: 0;
min-width: 18px;
text-align: center;
white-space: nowrap;
}
.nav-badge.visible {
display: block;
}
/* Stop sidebar labels from wrapping when paired with a 3-digit badge. */
.nav-item>span:not(.stage-num):not(.nav-badge) {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ── STORE TABS BAR ─────────────────────────────────────────── */
.store-tabs-bar {
position: fixed;
top: 105px; /* 48 chrome + 57 topbar */
left: var(--sidebar-w);
right: 0;
z-index: 49;
background: var(--surface);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
padding: 0 4px;
min-height: 38px;
}
.store-tabs-bar::-webkit-scrollbar {
display: none;
}
.store-tab {
display: flex;
align-items: center;
gap: 7px;
padding: 0 14px 0 12px;
height: 38px;
cursor: pointer;
font-size: 12px;
font-weight: 500;
color: var(--muted);
white-space: nowrap;
border-bottom: 2px solid transparent;
flex-shrink: 0;
transition: color 0.15s, border-color 0.15s, background 0.15s;
position: relative;
}
.store-tab:hover {
color: var(--text);
background: var(--blue-dim);
}
.store-tab.active {
color: var(--blue);
border-bottom-color: var(--blue);
font-weight: 700;
}
.store-tab .tab-favicon {
width: 14px;
height: 14px;
border-radius: 3px;
flex-shrink: 0;
object-fit: cover;
}
.store-tab .tab-close {
width: 14px;
height: 14px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
opacity: 0;
transition: opacity 0.15s, background 0.15s;
flex-shrink: 0;
color: var(--muted);
}
.store-tab:hover .tab-close {
opacity: 1;
}
.store-tab .tab-close:hover {
background: var(--red-dim);
color: var(--red);
}
.store-tab .tab-count {
font-size: 10px;
font-weight: 700;
color: var(--blue);
background: var(--blue-dim);
padding: 1px 5px;
border-radius: 8px;
}
.store-tab-add {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 38px;
cursor: pointer;
color: var(--muted);
font-size: 16px;
flex-shrink: 0;
transition: color 0.15s;
}
.store-tab-add:hover {
color: var(--blue);
}
.main {
padding-top: 97px;
}
/* topbar 57px + tabs 38px + 2px border */
/* ── NEW TAB INPUT ───────────────────────────────────────────── */
.new-tab-input-wrap {
display: none;
align-items: center;
gap: 6px;
padding: 0 8px;
flex-shrink: 0;
animation: fadeSlideIn 0.15s ease;
}
.new-tab-input-wrap.open {
display: flex;
}
@keyframes fadeSlideIn {
from {
opacity: 0;
transform: translateX(-6px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.new-tab-url-input {
background: var(--card);
border: 1px solid var(--blue);
color: var(--text);
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
outline: none;
width: 260px;
}
.new-tab-url-input::placeholder {
color: var(--muted);
}
.sidebar-footer {
padding: 16px 20px;
border-top: 1px solid var(--border);
}
.status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--muted);
display: inline-block;
margin-right: 6px;
}
.status-dot.online {
background: var(--blue);
box-shadow: 0 0 6px var(--blue);
}
.server-status {
font-size: 11px;
color: var(--muted);
}
/* ── MAIN ────────────────────────────────────────────────────── */
.main {
margin-left: var(--sidebar-w);
flex: 1;
display: flex;
flex-direction: column;
min-height: calc(100vh - 48px); /* below chrome header */
}
/* ── TOPBAR ──────────────────────────────────────────────────── */
.topbar {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 10px 20px;
display: flex;
align-items: center;
gap: 10px;
position: fixed;
top: 48px; /* below chrome header */
left: var(--sidebar-w);
right: 0;
z-index: 50;
height: 57px;
}
.nav-item.locked {
opacity: 0.35;
pointer-events: none;
cursor: default;
}
.scrape-toggle {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 8px;
font-size: 12px;
color: var(--text);
cursor: pointer;
user-select: none;
white-space: nowrap;
transition: border-color .15s ease, background .15s ease;
}
.scrape-toggle:hover {
border-color: var(--blue);
}
.scrape-toggle input {
width: 14px;
height: 14px;
accent-color: var(--blue);
cursor: pointer;
margin: 0;
}
.url-input {
flex: 1;
background: var(--card);
border: 1px solid var(--border);
color: var(--text);
padding: 10px 16px;
border-radius: 8px;
font-size: 13px;
outline: none;
transition: border-color 0.2s;
}
.url-input:focus {
border-color: var(--blue);
}
.url-input::placeholder {
color: var(--muted);
}
.btn {
padding: 10px 20px;
border-radius: 8px;
border: none;
cursor: pointer;
font-size: 13px;
font-weight: 600;
transition: all 0.15s;
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.btn-primary {
background: var(--blue);
color: #fff;
}
.btn-primary:hover {
background: var(--blue-hover);
}
.btn-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ── Feature cards (Enrich + QC panels) ───────────────────────────── */
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin-top: 24px;
}
.feature-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 16px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 14px;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--blue-glow) 0%, transparent 55%);
opacity: 0;
transition: opacity .25s ease;
pointer-events: none;
}
.feature-card:hover {
border-color: var(--blue);
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--blue-glow);
}
.feature-card:hover::before {
opacity: 1;
}
.feature-card>* {
position: relative;
z-index: 1;
}
.feature-icon {
width: 46px;
height: 46px;
border-radius: 12px;
background: var(--blue-glow);
border: 1px solid var(--blue);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.feature-title {
font-size: 15px;
font-weight: 650;
color: var(--text);
letter-spacing: -0.01em;
}
.feature-desc {
font-size: 13px;
color: var(--muted);
line-height: 1.5;
min-height: 38px;
}
.feature-input {
width: 100%;
padding: 10px 12px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 10px;
color: var(--text);
font-size: 13px;
transition: border-color .15s ease;
}
.feature-input:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 3px var(--blue-glow);
}
.feature-inputs-row {
display: flex;
gap: 8px;
}
.feature-btn {
width: 100%;
padding: 11px 16px;
background: var(--blue);
color: #fff;
border: none;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background .15s ease, transform .1s ease;
margin-top: auto;
}
.feature-btn:hover {
background: var(--blue-hover);
transform: translateY(-1px);
}
.feature-btn:active {
transform: translateY(0);
}
.feature-card.qc-card {
cursor: pointer;
}
.feature-card.qc-card .feature-icon {
background: var(--green-dim, rgba(74, 222, 128, 0.14));
border-color: var(--green);
}
/* ── Publish Pipeline Wizard ────────────────────────────────────── */
.wizard-progress {
display: flex;
align-items: center;
gap: 8px;
padding: 20px 24px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
margin-bottom: 18px;
}
.wiz-step {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 6px 12px;
border-radius: 10px;
transition: background 0.15s;
}
.wiz-step:hover {
background: var(--card);
}
.wiz-step-num {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--card);
border: 1.5px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 13px;
color: var(--muted);
transition: all 0.2s;
}
.wiz-step-label {
font-size: 13px;
font-weight: 600;
color: var(--muted);
transition: color 0.2s;
}
.wiz-step.active .wiz-step-num {
background: var(--blue);
border-color: var(--blue);
color: #fff;
box-shadow: 0 0 0 4px rgba(67, 198, 172, 0.15);
}
.wiz-step.active .wiz-step-label {
color: var(--text);
}
.wiz-step.done .wiz-step-num {
background: var(--green, #4ade80);
border-color: var(--green, #4ade80);
color: #fff;
}
.wiz-step.done .wiz-step-label {
color: var(--text-2);
}
.wiz-line {
flex: 1;
height: 2px;
background: var(--border);
border-radius: 2px;
}
.wiz-panel {
display: none;
}
.wiz-panel.active {
display: block;
animation: wizFadeIn 0.2s ease;
}
@keyframes wizFadeIn {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.wiz-nav {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
/* Tabs inside Step 3 */
.wiz-tabs {
display: flex;
gap: 4px;
padding: 4px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
margin-bottom: 16px;
}
.wiz-tab {
flex: 1;
text-align: center;
padding: 10px 14px;
border-radius: 9px;
font-size: 12px;
font-weight: 600;
color: var(--muted);
cursor: pointer;
transition: all 0.15s;
}
.wiz-tab:hover {
color: var(--text-2);
background: rgba(255, 255, 255, 0.02);
}
.wiz-tab.active {
background: var(--surface);
color: var(--text);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.wiz-tab-panel {
display: none;
}
.wiz-tab-panel.active {
display: block;
animation: wizFadeIn 0.15s ease;
}
/* Margin preset buttons */
.margin-preset {
background: var(--card);
border: 1px solid var(--border);
color: var(--text-2);
font-size: 11px;
font-weight: 600;
padding: 6px 10px;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s;
}
.margin-preset:hover {
background: var(--blue-dim);
border-color: var(--blue);
color: var(--blue);
transform: translateY(-1px);
}
.margin-preset.active {
background: var(--blue);
border-color: var(--blue);
color: #fff;
}
/* Checklist gate */
.checklist-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 8px;
background: var(--card);
border: 1px solid var(--border);
}
.checklist-item.pass {
border-color: var(--green, #4ade80);
background: rgba(74, 222, 128, 0.06);
}
.checklist-item.fail {
border-color: var(--red, #ef4444);
background: rgba(239, 68, 68, 0.06);
}
.checklist-item .check-icon {
width: 16px;
height: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
flex-shrink: 0;
}
.checklist-item.pass .check-icon {
background: var(--green, #4ade80);
color: #fff;
}
.checklist-item.fail .check-icon {
background: var(--red, #ef4444);
color: #fff;
}
.checklist-item.pending .check-icon {
background: var(--border);
color: var(--muted);
}
/* Push button disabled state */
.btn-primary[disabled] {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.result-panel {
margin-top: 24px;
padding: 18px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 14px;
font-family: var(--font-ui);
font-size: 12px;
color: var(--muted);
line-height: 1.6;
max-height: 520px;
overflow: auto;
}
/* ── QC Result UI ─────────────────────────────────────────────────── */
#qc-result {
margin-top: 24px;
}
.qc-loading,
.qc-error,
.qc-empty {
padding: 20px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 12px;
color: var(--muted);
font-size: 13px;
}
.qc-error {
color: #f87171;
border-color: #7f1d1d;
}
.qc-empty {
color: var(--green);
}
.qc-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
margin-bottom: 20px;
}
.qc-stat {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 14px;
padding: 18px 20px;
text-align: left;
}
.qc-stat-num {
font-size: 28px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.02em;
line-height: 1.1;
}
.qc-stat-label {
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 4px;
}
.qc-stat-good {
border-color: var(--green);
}
.qc-stat-good .qc-stat-num {
color: var(--green);
}
.qc-stat-warn {
border-color: #f59e0b;
}
.qc-stat-warn .qc-stat-num {
color: #f59e0b;
}
.qc-stat-bad {
border-color: #f87171;
}
.qc-stat-bad .qc-stat-num {
color: #f87171;
}
.qc-subsection {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 14px;
padding: 16px 20px;
margin-bottom: 14px;
}
.qc-subtitle {
font-size: 12px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
padding-bottom: 12px;
margin-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.qc-row {
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.qc-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.qc-row-key {
font-size: 13px;
color: var(--text);
font-weight: 500;
margin-bottom: 6px;
word-break: break-word;
}
.qc-row-meta {
font-size: 12px;
color: var(--muted);
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.qc-pill {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 500;
}
.qc-pill-bad {
background: rgba(248, 113, 113, 0.14);
color: #f87171;
border: 1px solid rgba(248, 113, 113, 0.3);
}
.qc-pill-muted {
background: var(--bg);
color: var(--muted);
border: 1px solid var(--border);
}
/* ── Product description rendering (preserves HTML, RTL-aware) ────── */
.product-desc {
font-size: 14px;
line-height: 1.75;
color: var(--text);
unicode-bidi: plaintext;
}
.product-desc p {
margin: 0 0 10px 0;
}
.product-desc p:last-child {
margin-bottom: 0;
}
.product-desc ul,
.product-desc ol {
margin: 10px 0;
padding-inline-start: 22px;
}
.product-desc li {
margin: 4px 0;
}
.product-desc strong,
.product-desc b {
color: var(--text);
font-weight: 650;
}
.product-desc h1,
.product-desc h2,
.product-desc h3,
.product-desc h4 {
font-size: 15px;
font-weight: 600;
margin: 12px 0 6px 0;
color: var(--text);
}
.product-desc a {
color: var(--blue);
text-decoration: underline;
}
.product-desc br {
display: block;
content: '';
margin: 4px 0;
}
/* Auto-detect Arabic → RTL */
.product-desc:lang(ar),
.product-desc[dir="rtl"] {
direction: rtl;
text-align: right;
}
.btn-outline {
background: transparent;
color: var(--text);
border: 1px solid var(--border);
}
.btn-outline:hover {
border-color: var(--blue);
color: var(--blue);
}
.btn-ghost {
background: transparent;
color: var(--muted);
border: none;
padding: 10px 14px;
}
.btn-ghost:hover {
color: var(--text);
background: var(--card);
}
.btn-danger {
background: var(--red);
color: #fff;
}
.btn-danger:hover {
opacity: 0.85;
}
.btn-yellow {
background: var(--indigo);
color: #fff;
}
.btn-yellow:hover {
opacity: 0.85;
}
/* ── CONTENT ─────────────────────────────────────────────────── */
.content {
padding: 28px;
flex: 1;
}
/* ── EMPTY STATE ─────────────────────────────────────────────── */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
text-align: center;
gap: 16px;
}
.empty-icon {
font-size: 56px;
opacity: 0.3;
}
.empty-title {
font-size: 20px;
font-weight: 600;
color: var(--text);
}
.empty-sub {
font-size: 14px;
color: var(--muted);
max-width: 340px;
line-height: 1.6;
}
.feature-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-top: 8px;
}
.pill {
background: var(--card);
border: 1px solid var(--border);
padding: 5px 12px;
border-radius: 20px;
font-size: 12px;
color: var(--muted);
}
.pill.teal {
border-color: var(--blue);
color: var(--blue);
background: var(--blue-dim);
}
.pill.indigo {
border-color: var(--indigo);
color: var(--indigo);
background: var(--indigo-dim);
}
.pill.slate {
border-color: var(--slate);
color: var(--slate);
background: var(--slate-dim);
}
/* ── LOADING ─────────────────────────────────────────────────── */
.loading-state {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
gap: 20px;
}
.spinner {
width: 48px;
height: 48px;
border: 3px solid var(--border);
border-top-color: var(--blue);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.loading-text {
font-size: 15px;
color: var(--muted);
}
.loading-steps {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
}
.loading-step {
font-size: 12px;
color: var(--muted);
display: flex;
align-items: center;
gap: 8px;
transition: color 0.3s;
}
.loading-step.done {
color: var(--blue);
}
.loading-step .step-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--border);
flex-shrink: 0;
}
.loading-step.done .step-dot {
background: var(--blue);
}
/* ── STAT CARDS ──────────────────────────────────────────────── */
.stat-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 16px;
margin-bottom: 28px;
}
.stat-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
cursor: pointer;
transition: all 0.15s;
}
.stat-card:hover {
border-color: var(--blue);
background: var(--blue-dim);
}
.stat-card.active-card {
border-color: var(--blue);
background: var(--blue-dim);
}
.stat-label {
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stat-value {
font-size: 32px;
font-weight: 700;
color: var(--text);
margin: 6px 0 4px;
line-height: 1;
}
.stat-sub {
font-size: 12px;
color: var(--muted);
}
.stat-icon {
font-size: 20px;
margin-bottom: 10px;
}
/* ── TECH STRIP ──────────────────────────────────────────────── */
.tech-strip {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px 20px;
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 28px;
align-items: center;
}
.tech-item {
display: flex;
flex-direction: column;
gap: 3px;
}
.tech-item-label {
font-size: 10px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.tech-item-value {
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.tech-badge {
background: var(--blue-dim);
border: 1px solid var(--blue);
color: var(--blue);
padding: 2px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
}
.pixel-badge {
background: var(--indigo-dim);
border: 1px solid var(--indigo);
color: var(--indigo);
padding: 2px 8px;
border-radius: 6px;
font-size: 11px;
}
/* ── SECTION ─────────────────────────────────────────────────── */
.section {
display: none;
}
.section.active {
display: block;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.3); }
}
/* ─── Launch stat cards ──────────────────────────────────────────── */
/* Background uses var(--card) so light mode = near-white, dark mode =
themed dark surface. Earlier hardcoded #fff broke dark mode. */
.launch-stat-card {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 14px;
cursor: pointer;
transition: all 0.15s ease;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.launch-stat-card:hover {
transform: translateY(-2px);
border-color: var(--blue);
box-shadow: 0 6px 16px rgba(58, 114, 212, 0.10);
}
.launch-stat-card.active {
border-color: var(--blue);
background: linear-gradient(135deg, rgba(74,159,232,0.06), rgba(74,159,232,0.02));
}
.launch-stat-icon {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.launch-stat-body { flex: 1; min-width: 0; }
.launch-stat-label {
font-size: 11px;
color: var(--muted);
font-weight: 600;
letter-spacing: 0.2px;
margin-bottom: 2px;
}
.launch-stat-value {
font-size: 24px;
font-weight: 700;
color: var(--text);
line-height: 1.1;
letter-spacing: -0.5px;
}
.launch-stat-sub {
font-size: 10px;
color: var(--muted);
margin-top: 2px;
}
/* ─── Launch section headers ─────────────────────────────────────── */
.launch-section {
margin-bottom: 28px;
}
.launch-section-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
cursor: pointer;
user-select: none;
}
.launch-section-title {
font-size: 14px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.2px;
}
.launch-section-count {
background: var(--bg-2);
color: var(--text-2);
font-size: 10px;
font-weight: 700;
padding: 2px 8px;
border-radius: 10px;
}
.launch-section-chevron {
margin-left: auto;
color: var(--muted);
transition: transform 0.2s;
}
.launch-section.collapsed .launch-section-chevron {
transform: rotate(-90deg);
}
.launch-section.collapsed .launch-section-body {
display: none;
}
/* ─── Launch cards (grid + horizontal compact variants) ──────────── */
.launch-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: all 0.15s ease;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.launch-card:hover {
transform: translateY(-2px);
border-color: var(--text-2);
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.launch-card-thumb {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
background: #fafafa;
display: block;
}
.launch-card-body {
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 6px;
}
.launch-card-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 6px;
width: fit-content;
}
.launch-card-name {
font-size: 14px;
font-weight: 700;
color: var(--text);
line-height: 1.3;
letter-spacing: -0.2px;
}
.launch-card-handle {
font-size: 11px;
color: var(--muted);
}
.launch-card-dates {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--text-2);
}
.launch-card-progress {
height: 5px;
background: var(--bg-2);
border-radius: 3px;
overflow: hidden;
position: relative;
}
.launch-card-progress-bar {
height: 100%;
background: var(--green);
border-radius: 3px;
transition: width 0.4s ease;
}
.launch-card-progress-bar.queued { background: var(--amber, #f0a832); }
.launch-card-progress-bar.generating { background: var(--blue); }
.launch-card-progress-bar.draft { background: var(--text-2); }
.launch-card-progress-bar.live { background: var(--green); }
.launch-card-actions {
display: flex;
gap: 6px;
margin-top: 6px;
}
.launch-card-btn {
padding: 7px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
transition: all 0.15s;
}
.launch-card-btn:hover { background: var(--bg-2); border-color: var(--text-2); }
.launch-card-btn.primary {
background: var(--blue);
color: #fff;
border-color: var(--blue);
}
.launch-card-btn.primary:hover { background: #3a8fd9; }
.launch-card-kebab {
width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--bg);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--muted);
transition: all 0.15s;
position: relative;
}
.launch-card-kebab:hover { background: var(--bg-2); color: var(--text); }
/* Horizontal compact card (for live / drafts / archived rows) */
.launch-card-row {
display: grid;
grid-template-columns: 80px 1fr 200px auto;
gap: 14px;
align-items: center;
padding: 12px 14px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 12px;
transition: all 0.15s;
cursor: pointer;
}
.launch-card-row:hover {
border-color: var(--text-2);
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.launch-card-row.archived { opacity: 0.65; }
.launch-card-row-thumb {
width: 70px;
height: 56px;
object-fit: cover;
border-radius: 8px;
background: #fafafa;
}
.launch-card-row-meta {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
/* ─── Image Studio v2 — mockup parity ────────────────────────────── */
.ist-v2-header {
display: flex;
align-items: flex-start;
gap: 24px;
max-width: 1480px;
margin: 24px auto 18px;
flex-wrap: wrap;
}
.ist-v2-title {
display: flex;
align-items: center;
gap: 14px;
}
.ist-v2-title-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, #e0eaff, #cfdcff);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ist-wizard {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 0;
}
.ist-wizard-step {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 6px;
opacity: 0.55;
transition: opacity 0.2s;
}
.ist-wizard-step.active { opacity: 1; }
.ist-wizard-step.done { opacity: 1; }
.ist-wizard-icon {
width: 40px;
height: 40px;
border-radius: 11px;
background: var(--bg);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
}
.ist-wizard-step.active .ist-wizard-icon {
border-color: var(--blue);
background: linear-gradient(135deg, rgba(74,159,232,0.1), transparent);
}
.ist-wizard-step.done .ist-wizard-icon {
border-color: var(--green);
background: linear-gradient(135deg, rgba(28,140,76,0.1), transparent);
}
.ist-wizard-label {
font-size: 11px;
font-weight: 600;
color: var(--text-2);
}
.ist-wizard-step.active .ist-wizard-label { color: var(--blue); }
.ist-wizard-bar {
width: 56px;
height: 1px;
background: var(--border);
margin: 0 4px 22px;
}
/* Flat settings row — mockup parity: card-style row, More-settings as
standalone button OUTSIDE the row, labels are normal-case, lighter. */
/* ─── V2 settings toolbar ──────────────────────────────────────────
Compact premium toolbar (not a stats card). ONE rounded white bar
holds Mode / Hero ref / Quality / Aspect / Scenes / Est. cost +
More settings — all cells, no gap between row and More-settings.
Subtle 1px dividers between each cell. */
.ist-v2-settings-wrap {
display: flex;
align-items: stretch;
gap: 0;
max-width: 1480px;
margin: 0 auto 22px;
background: #ffffff;
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
overflow: hidden;
}
.ist-v2-settings-row {
display: flex;
align-items: stretch;
gap: 0;
background: transparent;
border: none;
border-radius: 0;
padding: 0;
flex: 1;
box-shadow: none;
overflow: visible;
}
.ist-v2-setting {
flex: 1;
min-width: 0;
padding: 10px 16px 12px;
border-right: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
background: #ffffff;
}
.ist-v2-setting:last-child { border-right: none; }
.ist-v2-setting-label {
font-size: 11px;
font-weight: 700;
color: var(--text-2, #4a5160);
margin-bottom: 0;
letter-spacing: 0;
text-transform: none;
line-height: 1;
}
/* Compact dropdown — looks like a real select, smaller than before,
chevron clearly visible, consistent size across Mode/Quality/Aspect/Scenes.
Each property uses !important to defeat the global select rule
(`select { background: rgba(...) !important }` at the bottom of this
file) which would otherwise wipe out background-image via shorthand. */
.ist-v2-setting-input {
width: 100% !important;
padding: 8px 32px 8px 12px !important;
border-radius: 9px !important;
border: 1px solid var(--border) !important;
background-color: #ffffff !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 10px center !important;
background-size: 11px 11px !important;
font-size: 13px !important;
font-weight: 700 !important;
color: var(--text) !important;
cursor: pointer !important;
line-height: 1.2 !important;
min-height: 0 !important;
box-shadow: none !important;
-webkit-appearance: none !important;
appearance: none !important;
transition: border-color 0.15s !important;
}
.ist-v2-setting-input:hover { border-color: var(--text-2) !important; }
/* :focus needs to re-declare background-image because two global rules
(one in the light/dark theme block, one in the focus-ring block) use
`background: !important` on every focused select — which
resets background-image to `none` and the chevron disappears. We
re-state every background-related property here, all !important. */
.ist-v2-setting-input:focus,
.ist-v2-setting-input:focus-visible,
.ist-v2-setting-input:active {
outline: none !important;
border-color: var(--blue) !important;
background-color: #ffffff !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 10px center !important;
background-size: 11px 11px !important;
box-shadow: 0 0 0 3px rgba(74,159,232,0.15) !important;
}
/* Hero ref cell: small pill-style control with the label text + toggle. */
.ist-v2-setting-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
cursor: pointer;
padding: 7px 12px;
border-radius: 9px;
border: 1px solid var(--border);
background: #ffffff;
transition: border-color 0.15s;
min-height: 32px;
}
.ist-v2-setting-toggle:hover { border-color: var(--text-2); }
.ist-v2-setting-toggle span:first-child {
font-size: 13px;
font-weight: 700;
color: var(--text);
line-height: 1.2;
}
.ist-v2-pill-toggle {
width: 32px;
height: 18px;
background: #7950d4;
border-radius: 999px;
position: relative;
transition: background 0.2s;
flex-shrink: 0;
cursor: pointer;
}
.ist-v2-pill-toggle-dot {
position: absolute;
top: 2px;
right: 2px;
width: 14px;
height: 14px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
transition: right 0.2s;
}
.ist-v2-pill-toggle.off { background: var(--border); }
.ist-v2-pill-toggle.off .ist-v2-pill-toggle-dot { right: 16px; }
/* Est. cost cell — smaller, vertically centered, no padding bloat. */
.ist-v2-setting.cost-cell { justify-content: center; }
.ist-v2-cost {
font-size: 16px;
font-weight: 700;
color: var(--green);
letter-spacing: -0.2px;
padding: 0;
display: inline-flex;
align-items: center;
gap: 5px;
line-height: 1.1;
}
/* More-settings: lives as the rightmost cell of the toolbar bar.
No own border/radius/shadow — separated from Est. cost by the
same 1px subtle divider used between every other cell. Same height
as the rest of the bar. */
.ist-v2-more-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 22px;
background: #ffffff;
border: none;
border-left: 1px solid var(--border-subtle);
border-radius: 0;
color: var(--text);
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background 0.15s;
flex-shrink: 0;
}
.ist-v2-more-btn:hover {
background: var(--bg-2);
}
/* Sticky footer */
.ist-v2-footer {
position: sticky;
bottom: 0;
display: flex;
align-items: center;
gap: 18px;
padding: 16px 28px;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: 1px solid var(--border);
max-width: 1480px;
margin: 24px auto 0;
border-radius: 14px 14px 0 0;
z-index: 50;
flex-wrap: wrap;
}
.ist-v2-footer-stats {
display: flex;
gap: 32px;
}
.ist-v2-stat-value {
font-size: 22px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.4px;
line-height: 1;
}
.ist-v2-stat-label {
font-size: 10px;
font-weight: 600;
color: var(--muted);
letter-spacing: 0.3px;
text-transform: uppercase;
margin-top: 4px;
}
.ist-v2-footer-actions {
margin-left: auto;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.ist-v2-footer-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 10px 18px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.ist-v2-footer-btn:hover {
background: var(--bg-2);
border-color: var(--text-2);
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.ist-v2-footer-btn.primary {
background: linear-gradient(135deg, #7950d4 0%, #6943c8 100%);
color: #fff;
border-color: transparent;
box-shadow: 0 4px 12px rgba(121,80,212,0.3);
}
.ist-v2-footer-btn.primary:hover {
box-shadow: 0 6px 16px rgba(121,80,212,0.4);
}
.ist-v2-footer-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none;
}
/* V2 source product card — mockup-style empty + filled. Sized to feel
generous: ~120px thumbnail, ~22px title, bigger meta chips. */
.ist-v2-source {
background: #ffffff;
border: 1px solid var(--border);
border-radius: 16px;
padding: 22px 26px;
max-width: 1480px;
margin: 0 auto 16px;
display: flex;
align-items: center;
gap: 26px;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
min-height: 140px;
}
.ist-v2-source.empty {
background: var(--bg-2, #f8f9fb);
border-style: dashed;
min-height: 96px;
padding: 18px 22px;
}
.ist-v2-source-thumb {
width: 120px;
height: 120px;
border-radius: 14px;
object-fit: cover;
flex-shrink: 0;
background: var(--bg-2);
}
.ist-v2-source.empty .ist-v2-source-thumb,
.ist-v2-source-thumb.empty {
width: 56px;
height: 56px;
border: 1.5px dashed var(--border);
display: flex;
align-items: center;
justify-content: center;
background: var(--bg);
border-radius: 12px;
}
.ist-v2-source-info { flex: 1; min-width: 0; }
.ist-v2-source-title {
font-size: 22px;
font-weight: 700;
color: var(--text);
line-height: 1.25;
margin-bottom: 10px;
letter-spacing: -0.4px;
}
.ist-v2-source.empty .ist-v2-source-title {
font-size: 15px;
font-weight: 600;
margin-bottom: 4px;
}
/* Source-card meta column: two stacked rows. Row 1 = domain link +
Shopify badge. Row 2 = price + image count + Single product. */
.ist-v2-source-meta {
display: flex;
flex-direction: column;
gap: 10px;
font-size: 13px;
color: var(--muted);
}
.ist-v2-source-meta-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.ist-v2-source-meta-row:empty { display: none; }
.ist-v2-source-domain {
font-size: 13px;
color: var(--muted);
font-weight: 500;
}
.ist-v2-source-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 13px;
background: var(--bg-2);
border-radius: 9px;
font-size: 12px;
font-weight: 600;
color: var(--text-2);
}
.ist-v2-source-pill.shopify {
background: #95bf471a;
color: #5e8d2e;
}
.ist-v2-source-pill.purple {
background: rgba(121,80,212,0.1);
color: #7950d4;
}
.ist-v2-source-actions {
display: flex;
gap: 10px;
}
.ist-v2-source-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 22px;
border-radius: 11px;
border: 1.5px solid var(--blue);
background: rgba(74,159,232,0.04);
color: var(--blue);
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
}
.ist-v2-source-btn:hover { background: var(--blue); color: #fff; }
.ist-v2-source-btn.ghost {
border-color: var(--border);
background: var(--bg);
color: var(--text);
}
.ist-v2-source-btn.ghost:hover {
background: var(--bg-2);
color: var(--text);
}
/* V2 scene cards — horizontal row, square thumbs */
.ist-v2-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 14px;
max-width: 1480px;
margin: 0 auto 20px;
}
.ist-v2-grid[data-scenes="3"] { grid-template-columns: repeat(3, 1fr); }
.ist-v2-grid[data-scenes="12"] { grid-template-columns: repeat(6, 1fr); } /* row 1 of 6 + row 2 of 6 */
@media (max-width: 1280px) {
.ist-v2-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
.ist-v2-grid { grid-template-columns: repeat(2, 1fr); }
}
.ist-v2-scene {
background: #ffffff;
border: 1px solid #e6e8ee;
border-radius: 18px;
overflow: hidden;
transition: all 0.15s;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
display: flex;
flex-direction: column;
padding: 12px;
}
.ist-v2-scene:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(15,20,35,0.08);
}
.ist-v2-scene.selected {
border-color: #7950d4;
box-shadow: 0 0 0 3px rgba(121,80,212,0.15);
}
/* Thumb area: inset from the card with rounded corners — matches the
reference where the image sits as a rounded panel inside the card. */
.ist-v2-scene-thumb {
position: relative;
width: 100%;
aspect-ratio: 1;
background: #f3f4f7;
border-radius: 14px;
overflow: hidden;
}
.ist-v2-scene-thumb.clickable {
cursor: zoom-in;
}
.ist-v2-scene-thumb img,
.ist-v2-scene-thumb video {
width: 100%;
height: 100%;
object-fit: cover;
}
/* READY/WAITING/GENERATING/FAILED badges. READY uses the soft purple
tint the reference shows — solid color, no backdrop blur. */
.ist-v2-scene-badge {
position: absolute;
top: 12px;
left: 12px;
padding: 5px 12px;
border-radius: 8px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.ist-v2-scene-badge.ready { background: rgba(121,80,212,0.14); color: #7950d4; }
.ist-v2-scene-badge.waiting { background: rgba(44,52,66,0.85); color: #fff; backdrop-filter: blur(6px); }
.ist-v2-scene-badge.generating { background: rgba(74,159,232,0.92); color: #fff; }
.ist-v2-scene-badge.failed { background: rgba(248,113,113,0.92); color: #fff; }
.ist-v2-scene-kebab {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
border-radius: 8px;
background: rgba(255,255,255,0.95);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(15,20,35,0.08);
transition: background 0.15s, transform 0.15s;
}
.ist-v2-scene-kebab:hover { background: #fff; transform: scale(1.05); }
/* Per-scene approval tick.
Three states:
.is-hidden image not done yet → not rendered (CSS hides too as fallback)
.is-pending image done, not approved → outline pill, faint grey check on hover
.is-approved approved → SOLID green fill + bold white check (matches spec) */
.ist-v2-scene-check {
position: absolute;
top: 12px;
right: 50px;
width: 24px;
height: 24px;
border-radius: 7px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
z-index: 1;
padding: 0;
}
.ist-v2-scene-check.is-hidden { display: none; }
.ist-v2-scene-check.is-pending {
background: rgba(255, 255, 255, 0.92);
border: 1.5px solid rgba(15, 20, 35, 0.14);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.ist-v2-scene-check.is-pending:hover {
border-color: #1c8c4c;
background: rgba(28, 140, 76, 0.10);
}
.ist-v2-scene-check.is-approved {
background: #1c8c4c;
border: 1.5px solid #1c8c4c;
box-shadow: 0 2px 6px rgba(28, 140, 76, 0.32);
}
.ist-v2-scene-check.is-approved:hover {
background: #167a40;
border-color: #167a40;
}
/* Soft green ring around the whole scene card when approved — strong
visual signal at a glance which scenes are locked in. */
.ist-v2-scene.is-approved {
border-color: rgba(28, 140, 76, 0.45);
box-shadow: 0 0 0 3px rgba(28, 140, 76, 0.12);
}
/* Card body: tighter top padding (thumb already has 12px from card),
generous bottom for the Generate button. */
.ist-v2-scene-body {
padding: 14px 6px 4px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.ist-v2-scene-title {
font-size: 15px;
font-weight: 800;
color: #1f2433;
letter-spacing: -0.3px;
line-height: 1.2;
}
.ist-v2-scene-desc {
font-size: 12px;
color: #6b7280;
line-height: 1.4;
margin-bottom: 12px;
min-height: 34px;
}
.ist-v2-scene-btn {
width: 100%;
padding: 12px 16px;
border-radius: 12px;
border: 1px solid #c9dcf3;
background: rgba(74,159,232,0.07);
color: #4a9fe8;
font-size: 14px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.15s;
}
.ist-v2-scene-btn:hover {
background: #4a9fe8;
color: #ffffff;
border-color: #4a9fe8;
}
.ist-v2-scene-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.ist-v2-scene-btn:disabled:hover {
background: rgba(74,159,232,0.07);
color: #4a9fe8;
border-color: #c9dcf3;
}
.ist-v2-scene-btn.regen {
background: #ffffff;
border-color: #e6e8ee;
color: #4a5160;
}
.ist-v2-scene-btn.regen:hover {
background: #f3f4f7;
border-color: #c4c9d4;
color: #1f2433;
}
/* ─── Calendar redesign ──────────────────────────────────────────── */
.cal-view-tabs {
display: flex;
gap: 0;
padding: 4px;
background: var(--bg-2);
border-radius: 10px;
width: fit-content;
}
.cal-view-tab {
padding: 6px 14px;
border: none;
background: transparent;
color: var(--text-2);
font-size: 12px;
font-weight: 600;
cursor: pointer;
border-radius: 7px;
transition: all 0.15s;
}
.cal-view-tab:hover { color: var(--text); }
.cal-view-tab.active {
background: var(--bg);
color: var(--blue);
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.cal-stat-card {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 14px;
cursor: pointer;
transition: all 0.15s;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.cal-stat-card:hover {
transform: translateY(-2px);
border-color: var(--text-2);
box-shadow: 0 6px 16px rgba(0,0,0,0.07);
}
.cal-stat-card.active {
border-color: var(--blue);
background: linear-gradient(135deg, rgba(74,159,232,0.05), transparent);
}
.cal-stat-icon {
width: 44px;
height: 44px;
border-radius: 50%; /* circular per mockup */
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cal-stat-label {
font-size: 12px;
color: var(--muted);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
}
.cal-stat-value {
font-size: 30px; /* bumped per mockup */
font-weight: 700;
color: var(--text);
letter-spacing: -0.7px;
line-height: 1.05;
margin: 4px 0;
}
.cal-stat-sub {
font-size: 11px;
color: var(--muted);
letter-spacing: 0;
text-transform: none;
}
/* Strip the ugly native date-picker arrow from inline calendar date inputs */
#cal-filter-date-from::-webkit-calendar-picker-indicator,
#cal-filter-date-to::-webkit-calendar-picker-indicator,
#launches-date-from::-webkit-calendar-picker-indicator,
#launches-date-to::-webkit-calendar-picker-indicator {
opacity: 0;
cursor: pointer;
position: absolute;
right: 0;
width: 100%;
height: 100%;
}
#cal-filter-date-from, #cal-filter-date-to,
#launches-date-from, #launches-date-to {
position: relative;
font-family: inherit;
}
.cal-issue-pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 10px;
cursor: pointer;
transition: all 0.15s;
}
.cal-issue-pill:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.cal-issue-pill .cal-issue-icon {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cal-issue-pill .cal-issue-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.cal-issue-pill .cal-issue-count {
font-size: 13px;
font-weight: 700;
}
.cal-issue-pill .cal-issue-label {
font-size: 10px;
color: var(--muted);
}
.cal-bulk-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 11px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
font-size: 12px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: all 0.12s;
}
.cal-bulk-btn:hover { background: var(--bg-2); }
.cal-day-section {
margin-bottom: 22px;
}
.cal-day-header {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 0 12px;
cursor: pointer;
user-select: none;
}
.cal-day-chevron {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--muted);
transition: transform 0.2s;
}
.cal-day-section.collapsed .cal-day-chevron { transform: rotate(-90deg); }
.cal-day-section.collapsed .cal-day-body { display: none; }
.cal-day-title {
font-size: 14px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.2px;
}
.cal-day-meta {
font-size: 11px;
color: var(--muted);
}
.cal-day-add {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
border: 1px dashed var(--border);
background: transparent;
color: var(--blue);
font-size: 11px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s;
}
.cal-day-add:hover { background: rgba(74,159,232,0.06); border-color: var(--blue); border-style: solid; }
.cal-post-row {
display: grid;
grid-template-columns: 24px 84px 1fr 180px 280px 32px;
gap: 16px;
align-items: center;
padding: 14px 18px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 12px;
margin-bottom: 10px;
transition: all 0.12s;
}
.cal-post-row:hover { border-color: var(--text-2); box-shadow: 0 3px 10px rgba(0,0,0,0.04); }
.cal-post-row.selected { background: linear-gradient(90deg, rgba(74,159,232,0.06), transparent); border-color: var(--blue); }
.cal-post-thumb {
width: 76px;
height: 76px;
border-radius: 10px;
object-fit: cover;
background: var(--bg-2);
}
.cal-post-main {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.cal-post-line1 {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
flex-wrap: wrap;
}
.cal-post-time {
font-weight: 700;
color: var(--text);
}
.cal-post-product {
color: var(--text);
font-weight: 600;
}
.cal-post-postn {
color: var(--muted);
}
.cal-post-line2 {
display: flex;
align-items: center;
gap: 8px;
font-size: 10px;
color: var(--muted);
flex-wrap: wrap;
}
.cal-post-tag {
padding: 2px 7px;
background: var(--bg-2);
border-radius: 5px;
color: var(--text-2);
font-weight: 600;
}
.cal-post-caption {
font-size: 11px;
color: var(--text-2);
line-height: 1.45;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.cal-post-status-col {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 10px;
color: var(--muted);
}
.cal-post-sync {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--green);
font-weight: 600;
}
.cal-post-sync.unsynced {
color: var(--amber, #d18a1a);
}
.cal-post-actions {
display: flex;
gap: 6px;
}
.cal-post-action-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 10px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
font-size: 11px;
font-weight: 600;
border-radius: 7px;
cursor: pointer;
transition: all 0.12s;
}
.cal-post-action-btn:hover { background: var(--bg-2); border-color: var(--text-2); }
/* Brand pills — distinct colors per brand */
.cal-brand-pill {
display: inline-block;
padding: 2px 7px;
border-radius: 4px;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #fff;
}
.cal-brand-pill.ibraq { background: #16786f; }
.cal-brand-pill.junaid { background: #2a2a35; }
.cal-brand-pill.assaf { background: #14213d; }
.cal-brand-pill.marshoud { background: #8b5a2b; }
.cal-brand-pill.maqam { background: #6b5b48; }
.cal-brand-pill.ysl { background: #000; }
/* Status pills inside calendar rows */
.cal-status-pill {
display: inline-block;
padding: 3px 9px;
border-radius: 5px;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.cal-status-pill.ready,
.cal-status-pill.scheduled-future { background: #dcf7e6; color: #1c8c4c; }
.cal-status-pill.scheduled { background: #e0eaff; color: #3a8fd9; }
.cal-status-pill.posted { background: #f1e8ff; color: #7950d4; }
.cal-status-pill.draft { background: #fff1d6; color: #d18a1a; }
.cal-status-pill.failed { background: #ffe2e2; color: #c8392c; }
/* ─── New Launch modal — type cards + product rows ───────────────── */
.launch-type-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--bg);
border: 2px solid var(--border);
border-radius: 12px;
cursor: pointer;
transition: all 0.15s ease;
}
.launch-type-card:hover {
border-color: var(--text-2);
}
.launch-type-card.selected {
border-color: var(--blue);
background: linear-gradient(135deg, rgba(74,159,232,0.06), rgba(74,159,232,0.02));
}
.launch-type-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.launch-type-title {
font-size: 13px;
font-weight: 700;
color: var(--text);
margin-bottom: 2px;
}
.launch-type-sub {
font-size: 11px;
color: var(--muted);
}
/* Create Launch modal — premium light SaaS treatment matching the mockup. */
#launches-new-modal.launch-create-backdrop {
background: rgba(15, 23, 42, 0.56) !important;
backdrop-filter: blur(12px) saturate(0.92) !important;
-webkit-backdrop-filter: blur(12px) saturate(0.92) !important;
padding: 28px !important;
}
#launches-new-modal .launches-new-modal-v2 {
width: min(94vw, 680px) !important;
max-width: 680px !important;
border-radius: 18px !important;
border: 1px solid rgba(213, 222, 236, 0.96) !important;
background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
box-shadow:
0 28px 80px rgba(15, 23, 42, 0.26),
0 12px 30px rgba(15, 23, 42, 0.14) !important;
color: #10182b !important;
overflow: hidden !important;
}
#launches-new-modal .modal-body {
padding: 18px 28px 18px !important;
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, 0.52) transparent;
}
#launches-new-modal .modal-body::-webkit-scrollbar { width: 8px; }
#launches-new-modal .modal-body::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.45);
border-radius: 999px;
}
#launches-new-modal .modal-close {
position: static !important;
margin-left: auto !important;
width: 34px !important;
height: 34px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 10px !important;
color: #1f2937 !important;
font-size: 18px !important;
transition: background 0.16s ease, transform 0.16s ease, color 0.16s ease !important;
}
#launches-new-modal .modal-close:hover {
background: #f3f6fb !important;
color: #0f172a !important;
transform: translateY(-1px);
}
#launches-new-modal .launch-type-card {
box-sizing: border-box !important;
height: 78px;
min-height: 78px;
padding: 14px 18px !important;
border: 1px solid #dbe4f0 !important;
border-radius: 12px !important;
background: #ffffff !important;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.035);
}
#launches-new-modal .launch-type-card:hover {
border-color: #abc5fb !important;
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(37, 99, 235, 0.08);
}
#launches-new-modal .launch-type-card.selected {
border: 2px solid #2563eb !important;
background: linear-gradient(135deg, #ffffff 0%, #f7faff 100%) !important;
box-shadow: 0 16px 34px rgba(37, 99, 235, 0.10);
}
#launches-new-modal .launch-type-icon {
width: 44px !important;
height: 44px !important;
border-radius: 12px !important;
}
#launches-new-modal .launch-type-title {
color: #111827 !important;
font-size: 13px !important;
font-weight: 760 !important;
letter-spacing: -0.12px;
}
#launches-new-modal .launch-type-sub {
color: #70809a !important;
font-size: 12px !important;
line-height: 1.28;
}
#launches-new-modal input,
#launches-new-modal select {
height: 42px !important;
border: 1px solid #dbe4f0 !important;
border-radius: 10px !important;
background-color: #ffffff !important;
color: #10182b !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}
#launches-new-modal input:focus,
#launches-new-modal select:focus {
outline: none !important;
border-color: #2563eb !important;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}
#launches-new-modal select {
padding-right: 36px !important;
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B7A90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 16px !important;
}
#launches-product-search {
background: #fbfcff !important;
}
#launches-product-list {
border: 1px solid #dbe4f0 !important;
border-radius: 12px !important;
background: #f8fbff !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 12px 28px rgba(15, 23, 42, 0.06) !important;
}
#launches-new-modal #launches-readiness-panel,
#launches-new-modal #launches-output-preview {
display: none !important;
}
.launch-product-row {
display: grid;
grid-template-columns: 58px minmax(0, 1fr) minmax(130px, 168px) auto;
gap: 12px;
align-items: center;
padding: 10px 14px;
cursor: pointer;
transition: background 0.12s;
border-bottom: 1px solid var(--border-subtle);
}
#launches-new-modal .launch-product-row {
min-height: 68px;
padding: 10px 14px !important;
background: transparent;
border-bottom-color: #e2e8f0 !important;
}
#launches-new-modal .launch-product-row:hover {
background: #f1f6ff !important;
}
#launches-new-modal .launch-product-row.selected {
background: linear-gradient(90deg, rgba(37, 99, 235, 0.11), rgba(37, 99, 235, 0.045)) !important;
}
#launches-new-modal .launch-product-row.selected::after {
color: #2563eb !important;
font-size: 16px !important;
}
.launch-product-row:last-child { border-bottom: none; }
.launch-product-row:hover { background: var(--bg-2); }
.launch-product-row.selected {
background: linear-gradient(90deg, rgba(74,159,232,0.08), rgba(74,159,232,0.02));
}
.launch-product-row.selected::after {
content: '✓';
color: var(--blue);
font-weight: 700;
font-size: 14px;
}
.launch-product-thumb-wrap {
position: relative;
width: 50px;
height: 50px;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--border-subtle);
background: var(--bg-2);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
#launches-new-modal .launch-product-thumb-wrap {
width: 48px !important;
height: 48px !important;
border-radius: 9px !important;
border-color: #e2e8f0 !important;
background: #ffffff !important;
}
.launch-product-thumb {
width: 100%;
height: 100%;
object-fit: cover;
background: #fff;
display: block;
}
.launch-product-thumb-fallback {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
color: var(--muted);
font-size: 18px;
}
.launch-product-thumb-wrap.missing .launch-product-thumb-fallback,
.launch-product-thumb-wrap:not(:has(img)) .launch-product-thumb-fallback {
display: flex;
}
.launch-product-main {
min-width: 0;
}
.launch-product-info-row {
display: flex;
align-items: baseline;
gap: 8px;
min-width: 0;
}
.launch-product-handle {
font-size: 13px;
font-weight: 700;
color: var(--text);
white-space: nowrap;
}
#launches-new-modal .launch-product-handle,
#launches-new-modal .launch-product-title {
color: #10182b !important;
font-size: 13px !important;
font-weight: 760 !important;
}
#launches-new-modal .launch-product-sub,
#launches-new-modal .launch-product-launch-note {
color: #70809a !important;
font-size: 10px !important;
}
.launch-product-title {
font-size: 12px;
color: var(--text-2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.launch-product-sub {
font-size: 10px;
color: var(--muted);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.launch-product-status {
display: grid;
justify-items: end;
gap: 4px;
min-width: 0;
}
.launch-product-launch-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 21px;
padding: 0 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 780;
white-space: nowrap;
border: 1px solid transparent;
}
#launches-new-modal .launch-product-launch-badge {
min-height: 22px !important;
font-size: 9.5px !important;
box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04);
}
.launch-product-launch-badge.none {
color: #64748b;
background: rgba(100, 116, 139, 0.10);
border-color: rgba(100, 116, 139, 0.14);
}
.launch-product-launch-badge.ready {
color: #15803d;
background: rgba(34, 197, 94, 0.12);
border-color: rgba(34, 197, 94, 0.20);
}
.launch-product-launch-badge.active {
color: #2563eb;
background: rgba(37, 99, 235, 0.11);
border-color: rgba(37, 99, 235, 0.18);
}
.launch-product-launch-badge.draft {
color: #b45309;
background: rgba(245, 158, 11, 0.13);
border-color: rgba(245, 158, 11, 0.22);
}
.launch-product-launch-badge.failed {
color: #dc2626;
background: rgba(239, 68, 68, 0.12);
border-color: rgba(239, 68, 68, 0.22);
}
.launch-product-launch-note {
max-width: 100%;
color: var(--muted);
font-size: 9px;
line-height: 1.25;
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 720px) {
.launch-product-row {
grid-template-columns: 52px minmax(0, 1fr) auto;
}
.launch-product-thumb-wrap {
width: 46px;
height: 46px;
}
.launch-product-status {
grid-column: 2 / -1;
justify-items: start;
margin-top: -4px;
}
.launch-product-launch-note {
text-align: left;
}
}
#launches-new-modal .modal-footer {
padding: 16px 28px 22px !important;
background: rgba(248, 250, 252, 0.72) !important;
border-top: 1px solid #e2e8f0 !important;
box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.035);
}
#launches-new-modal .modal-footer button {
height: 42px !important;
border-radius: 10px !important;
font-weight: 720 !important;
letter-spacing: -0.05px;
}
#launches-save-draft-btn {
color: #526077 !important;
}
#launches-save-draft-btn:hover {
background: #eef4ff !important;
color: #2563eb !important;
}
#launches-queue-btn {
min-width: 140px;
justify-content: center;
background: linear-gradient(135deg, #2563eb, #2f6df2) !important;
box-shadow: 0 12px 26px rgba(37, 99, 235, 0.26);
opacity: 1 !important;
}
#launches-queue-btn:disabled {
cursor: not-allowed !important;
background: #8fb0f0 !important;
box-shadow: none !important;
opacity: 0.72 !important;
}
#launches-queue-btn.is-ready:not(:disabled):hover {
transform: translateY(-1px);
box-shadow: 0 16px 32px rgba(37, 99, 235, 0.32);
}
/* ─── Kebab menu popover ─────────────────────────────────────────── */
/* z-index must exceed any modal-backdrop (9000) so kebabs opened from
inside a modal — e.g. the launch-detail modal — render ABOVE the
modal card instead of clipped behind it. */
.launch-kebab-menu {
position: absolute;
top: 100%;
right: 0;
margin-top: 4px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
/* Same heavy shadow as the dashboard kebab — keeps the menu reading
as solidly "above" the content even in low-contrast dark mode. */
box-shadow:
0 18px 50px rgba(0, 0, 0, 0.55),
0 4px 12px rgba(0, 0, 0, 0.25);
min-width: 180px;
z-index: 99999;
overflow: hidden;
opacity: 1;
}
html.light .launch-kebab-menu {
box-shadow:
0 18px 50px rgba(15, 20, 35, 0.18),
0 4px 12px rgba(15, 20, 35, 0.08);
}
.launch-kebab-menu button {
width: 100%;
text-align: left;
padding: 9px 14px;
border: none;
background: transparent;
font-size: 12px;
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
gap: 9px;
transition: background 0.12s;
}
.launch-kebab-menu button:hover { background: var(--bg-2); }
.launch-kebab-menu button.danger { color: var(--red); }
.launch-kebab-menu button.danger:hover { background: rgba(248,113,113,0.08); }
.launch-kebab-menu .menu-divider {
height: 1px;
background: var(--border-subtle);
margin: 4px 0;
}
@keyframes pulse-bar {
0%,
100% {
width: 20%;
opacity: 0.7;
}
50% {
width: 70%;
opacity: 1;
}
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 10px;
}
.section-title {
font-size: 16px;
font-weight: 600;
color: var(--text);
}
.section-actions {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
/* ── SEARCH / FILTER ─────────────────────────────────────────── */
.filter-bar {
display: flex;
gap: 10px;
margin-bottom: 16px;
flex-wrap: wrap;
align-items: center;
}
.search-input {
background: var(--card);
border: 1px solid var(--border);
color: var(--text);
padding: 8px 14px;
border-radius: 8px;
font-size: 12px;
outline: none;
width: 220px;
transition: border-color 0.2s;
}
.search-input:focus {
border-color: var(--blue);
}
.search-input::placeholder {
color: var(--muted);
}
.view-toggle {
display: flex;
gap: 4px;
}
.view-btn {
padding: 7px 10px;
background: var(--card);
border: 1px solid var(--border);
color: var(--muted);
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: all 0.15s;
}
.view-btn.active {
border-color: var(--blue);
color: var(--blue);
background: var(--blue-dim);
}
/* ── PRODUCTS TABLE ──────────────────────────────────────────── */
.table-wrap {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
table {
width: 100%;
border-collapse: collapse;
}
thead th {
text-align: left;
padding: 12px 16px;
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid var(--border);
background: var(--surface);
}
tbody tr {
border-bottom: 1px solid var(--border);
transition: background 0.1s;
cursor: pointer;
}
tbody tr:last-child {
border-bottom: none;
}
tbody tr:hover {
background: rgba(255, 255, 255, 0.03);
}
td {
padding: 12px 16px;
font-size: 13px;
vertical-align: middle;
}
.td-thumb {
width: 48px;
height: 48px;
border-radius: 8px;
object-fit: cover;
background: var(--border);
cursor: zoom-in;
}
.td-thumb-placeholder {
width: 48px;
height: 48px;
border-radius: 8px;
background: var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.td-title {
font-weight: 500;
max-width: 260px;
}
.td-title a {
color: var(--text);
text-decoration: none;
}
.td-title a:hover {
color: var(--blue);
}
.td-price {
color: var(--blue);
font-weight: 600;
}
.td-compare {
color: var(--muted);
text-decoration: line-through;
font-size: 11px;
}
.td-badge {
display: inline-flex;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
}
.badge-available {
background: var(--green-dim);
color: var(--green);
}
.badge-unavailable {
background: var(--red-dim);
color: var(--red);
}
/* ── PRODUCTS GRID ───────────────────────────────────────────── */
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
.product-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
transition: all 0.15s;
cursor: pointer;
}
.product-card:hover {
border-color: var(--blue);
transform: translateY(-2px);
}
.product-card-img {
width: 100%;
height: 180px;
object-fit: cover;
background: var(--border);
display: block;
}
.product-card-img-placeholder {
width: 100%;
height: 180px;
background: var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
}
.product-card-body {
padding: 12px;
}
.product-card-title {
font-size: 13px;
font-weight: 500;
margin-bottom: 6px;
line-height: 1.4;
}
.product-card-price {
font-size: 14px;
font-weight: 700;
color: var(--blue);
}
.product-card-cat {
font-size: 11px;
color: var(--muted);
margin-top: 4px;
}
/* ── BANNERS GRID ────────────────────────────────────────────── */
.banners-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.banner-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: all 0.15s;
}
.banner-card:hover {
border-color: var(--blue);
transform: translateY(-2px);
}
.banner-card img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
background: var(--border);
}
.banner-card-meta {
padding: 10px 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.banner-size {
font-size: 11px;
color: var(--muted);
}
.banner-type {
font-size: 11px;
color: var(--blue);
}
/* ── CONTENT SECTION ─────────────────────────────────────────── */
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
}
.info-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
}
.info-card-title {
font-size: 12px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 14px;
}
.info-link-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid var(--border);
font-size: 13px;
}
.info-link-item:last-child {
border-bottom: none;
}
.info-link-item a {
color: var(--text);
text-decoration: none;
}
.info-link-item a:hover {
color: var(--blue);
}
.info-meta-row {
display: flex;
flex-direction: column;
gap: 10px;
}
.info-meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.info-meta-label {
font-size: 11px;
color: var(--muted);
}
.info-meta-value {
font-size: 13px;
color: var(--text);
line-height: 1.4;
}
/* ── MARKETING SECTION ───────────────────────────────────────── */
.social-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}
.social-chip {
display: flex;
align-items: center;
gap: 8px;
background: var(--card);
border: 1px solid var(--border);
padding: 8px 14px;
border-radius: 8px;
font-size: 13px;
text-decoration: none;
color: var(--text);
transition: all 0.15s;
}
.social-chip:hover {
border-color: var(--blue);
color: var(--blue);
}
/* ── PAGINATION ──────────────────────────────────────────────── */
.pagination {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20px;
flex-wrap: wrap;
gap: 10px;
}
.pagination-info {
font-size: 12px;
color: var(--muted);
}
.pagination-controls {
display: flex;
gap: 6px;
align-items: center;
}
.page-btn {
padding: 6px 12px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--card);
color: var(--text);
cursor: pointer;
font-size: 12px;
transition: all 0.15s;
}
.page-btn:hover {
border-color: var(--blue);
color: var(--blue);
}
.page-btn.active {
background: var(--blue);
color: #000;
border-color: var(--blue);
font-weight: 700;
}
.page-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
/* ── IMAGE PREVIEW MODAL ─────────────────────────────────────── */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.92);
z-index: 1000;
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
}
.modal-overlay.open {
display: flex;
}
.modal-content {
position: relative;
width: min(1180px, calc(100vw - 48px));
max-height: calc(100vh - 48px);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
padding: 14px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 22px;
background: rgba(10, 14, 22, 0.76);
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.52);
}
.modal-stage {
position: relative;
width: 100%;
height: clamp(420px, 72vh, 780px);
overflow: hidden;
display: grid;
place-items: center;
border-radius: 18px;
background-color: #070a10;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
isolation: isolate;
}
.modal-stage::before {
content: "";
position: absolute;
inset: -34px;
z-index: -2;
background: inherit;
filter: blur(28px) saturate(1.08);
transform: scale(1.06);
}
.modal-stage::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(180deg, rgba(7, 10, 16, 0.08), rgba(7, 10, 16, 0.20)),
radial-gradient(circle at center, rgba(255, 255, 255, 0.08), rgba(7, 10, 16, 0.32));
}
.modal-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
border-radius: 16px;
box-shadow: 0 22px 70px rgba(0, 0, 0, 0.44);
cursor: zoom-in;
transition: transform 0.18s ease;
transform-origin: center center;
z-index: 1;
}
.modal-img.zoomed {
cursor: zoom-out;
transform: scale(2);
}
.modal-img.zoomed.pan-ready {
cursor: grab;
}
.modal-img.zoomed.panning {
cursor: grabbing;
transition: none;
}
.modal-close {
position: absolute;
top: 22px;
right: 22px;
z-index: 3;
background: rgba(8, 12, 20, 0.62);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #fff;
width: 38px;
height: 38px;
border-radius: 12px;
cursor: pointer;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.modal-close:hover {
border-color: rgba(255, 255, 255, 0.36);
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.modal-info {
min-height: 42px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
color: rgba(255, 255, 255, 0.76);
font-size: 13px;
line-height: 1.35;
}
.modal-info strong {
display: block;
color: #fff;
font-size: 15px;
font-weight: 800;
letter-spacing: 0;
}
.modal-info span,
.modal-info small {
color: rgba(255, 255, 255, 0.62);
font-size: 12px;
font-weight: 500;
}
.modal-nav {
display: flex;
gap: 8px;
align-items: center;
}
.modal-footer-actions {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.modal-nav-btn {
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 0 16px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.055));
color: rgba(255, 255, 255, 0.86);
font: inherit;
font-size: 13px;
font-weight: 800;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, color 0.16s ease;
}
.modal-nav-btn:hover:not(:disabled) {
transform: translateY(-1px);
border-color: rgba(255, 255, 255, 0.28);
background: rgba(255, 255, 255, 0.13);
}
.modal-nav-btn:disabled {
opacity: 0.36;
cursor: default;
}
a#modal-download-btn.btn.btn-outline {
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 18px;
border-radius: 12px;
border-color: rgba(87, 129, 255, 0.46) !important;
background: linear-gradient(180deg, rgba(87, 129, 255, 0.26), rgba(87, 129, 255, 0.14)) !important;
color: #dbe7ff !important;
font-weight: 850;
text-decoration: none !important;
box-shadow: 0 12px 28px rgba(34, 94, 255, 0.16), inset 0 1px 0 rgba(255,255,255,0.12);
}
a#modal-download-btn.btn.btn-outline:hover {
transform: translateY(-1px);
border-color: rgba(130, 160, 255, 0.72) !important;
background: linear-gradient(180deg, rgba(87, 129, 255, 0.34), rgba(87, 129, 255, 0.20)) !important;
color: #ffffff !important;
}
@media (max-width: 760px) {
.modal-content {
width: calc(100vw - 20px);
max-height: calc(100vh - 20px);
padding: 10px;
border-radius: 18px;
}
.modal-stage {
height: 68vh;
border-radius: 14px;
}
.modal-info {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
}
.modal-actions {
display: flex;
gap: 8px;
}
/* ── PRODUCT DETAIL MODAL ────────────────────────────────────── */
.detail-modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
z-index: 1000;
align-items: center;
justify-content: center;
/* No live backdrop-filter anymore — the .me-blurred-bg child below
is a one-time snapshot of the dashboard, blurred once at capture
time, then static for the lifetime of the modal. Scrolling the
modal over it is free (no per-frame blur kernel). */
isolation: isolate;
}
/* Pre-rendered, pre-blurred snapshot of the page behind the modal.
Filled in by manageCaptureBlurredBg() on modal open. Scaled 1.05×
so the blur edges don't fade at the viewport edges. */
.me-blurred-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(20px) saturate(125%) brightness(0.8);
transform: scale(1.05);
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease-out;
}
.me-blurred-bg.ready {
opacity: 1;
}
/* Above the blurred bg, below page chrome. */
#manage-edit-modal>.detail-modal {
position: relative;
z-index: 1;
}
.detail-modal-overlay.open {
display: flex;
}
.detail-modal {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
width: min(700px, 92vw);
max-height: 88vh;
overflow-y: auto;
position: relative;
/* Promote to its own compositor layer so the modal's scroll repaints
don't invalidate the overlay (and vice versa). `contain` further tells
the browser the modal's layout/paint is self-contained. */
will-change: transform;
contain: layout paint;
/* Smooth out flick scrolling on touchpads/Macs. */
-webkit-overflow-scrolling: touch;
}
/* Chip-based pickers for metaobject_reference / list.metaobject_reference
metafields. Replaces the giant