/* ========================================================================== Postwoo design system Shared by the admin SPA (/app), the landing page, /docs and error pages. ========================================================================== */ /* ---------- Tokens ---------- */ :root { color-scheme: light; --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* brand */ --purple: #7138F5; --purple-600: #5B27D9; --purple-700: #4A1FB8; --purple-100: #EFE9FF; --purple-50: #F6F3FF; --navy: #101D3A; --pink: #FF4F8B; --pink-100: #FFE4EE; --offwhite: #F5F6FA; --success: #1DB97A; --success-text: #0F8F5B; --success-bg: #E3F8EF; --warning: #F5B81B; --warning-text: #9A6B00; --warning-bg: #FFF4D6; --danger: #F04E5B; --danger-text: #B3222F; --danger-bg: #FFE6E8; --info-text: var(--purple-600); --info-bg: var(--purple-100); --neutral-bg: #EEF0F6; --neutral-text: #5B6479; --purple-bg: var(--purple-100); --purple-text: var(--purple-600); --pink-bg: var(--pink-100); --pink-text: #C2185B; /* legacy aliases kept for shared components */ --blue: var(--purple); --blue-600: var(--purple-600); --blue-100: var(--purple-100); --blue-50: var(--purple-50); --teal: #1FC1B8; --teal-100: #D7F5F2; --orange: #F5891B; --orange-100: #FDE9D3; --cream: var(--offwhite); /* surfaces & ink */ --bg: #F5F6FA; --surface: #FFFFFF; --surface-2: #F5F6FA; --surface-3: #E9EBF3; --surface-raised: #FFFFFF; --text: #101D3A; --text-2: #5B6479; --text-3: #8A92A8; --border: #E6E8F0; --border-strong: #CDD2E0; --overlay: rgba(16, 29, 58, 0.48); --sidebar-bg: #101D3A; --sidebar-text: #C7CCE0; --primary: var(--purple); --primary-hover: var(--purple-600); --primary-contrast: #FFFFFF; --primary-soft: var(--purple-100); --primary-soft-2: #E2D8FF; --focus-ring: 0 0 0 3px rgba(113, 56, 245, 0.35); --shadow-sm: 0 4px 14px rgba(16, 29, 58, 0.06), 0 1px 3px rgba(16, 29, 58, 0.04); --shadow-md: 0 10px 30px rgba(16, 29, 58, 0.08), 0 2px 6px rgba(16, 29, 58, 0.04); --shadow-lg: 0 24px 60px rgba(16, 29, 58, 0.18), 0 4px 12px rgba(16, 29, 58, 0.06); --shadow-primary: 0 8px 20px rgba(113, 56, 245, 0.32); --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-2xl: 28px; --sidebar-w: 248px; --sidebar-collapsed-w: 76px; --topbar-h: 64px; --bottom-nav-h: 64px; /* data viz (validated categorical palette, light) */ --viz-1: #7138F5; --viz-2: #E07314; --viz-3: #139A93; --viz-4: #B8860B; --viz-5: #D55181; --viz-6: #2A78D6; --viz-grid: #E9EBF3; --viz-axis: #CDD2E0; --viz-muted: #8A92A8; --viz-unavailable: #DCDFEA; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --dur: 180ms; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0B1220; --surface: #121A2E; --surface-2: #192238; --surface-3: #232D47; --surface-raised: #192238; --text: #EEF1FA; --text-2: #B7BED3; --text-3: #818AA6; --border: #253050; --border-strong: #364366; --overlay: rgba(3, 7, 18, 0.66); --sidebar-bg: #0B1220; --primary: #8E66FF; --primary-hover: #A58AFF; --primary-contrast: #0B1220; --primary-soft: rgba(142, 102, 255, 0.16); --primary-soft-2: rgba(142, 102, 255, 0.3); --purple-100: rgba(142, 102, 255, 0.18); --purple-50: rgba(142, 102, 255, 0.1); --pink-100: rgba(255, 79, 139, 0.18); --pink-text: #FF8AB4; --success-text: #5EDBA7; --success-bg: rgba(29, 185, 122, 0.16); --warning-text: #F8CB5E; --warning-bg: rgba(245, 184, 27, 0.16); --danger-text: #FF8891; --danger-bg: rgba(240, 78, 91, 0.16); --info-text: #B9A3FF; --info-bg: rgba(142, 102, 255, 0.16); --neutral-bg: rgba(255, 255, 255, 0.07); --neutral-text: #B7BED3; --purple-bg: rgba(142, 102, 255, 0.2); --purple-text: #B9A3FF; --orange-100: rgba(245, 137, 27, 0.18); --teal-100: rgba(31, 193, 184, 0.18); --blue-100: rgba(142, 102, 255, 0.22); --blue-50: rgba(142, 102, 255, 0.12); --cream: #121A2E; --offwhite: #121A2E; --focus-ring: 0 0 0 3px rgba(142, 102, 255, 0.45); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.5); --shadow-primary: 0 8px 20px rgba(142, 102, 255, 0.3); --viz-1: #8E66FF; --viz-2: #D9712A; --viz-3: #1FA39B; --viz-4: #B88A14; --viz-5: #D0608C; --viz-6: #3B8FE6; --viz-grid: #1F2941; --viz-axis: #364366; --viz-muted: #818AA6; --viz-unavailable: #2A3552; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0B1220; --surface: #121A2E; --surface-2: #192238; --surface-3: #232D47; --surface-raised: #192238; --text: #EEF1FA; --text-2: #B7BED3; --text-3: #818AA6; --border: #253050; --border-strong: #364366; --overlay: rgba(3, 7, 18, 0.66); --sidebar-bg: #0B1220; --primary: #8E66FF; --primary-hover: #A58AFF; --primary-contrast: #0B1220; --primary-soft: rgba(142, 102, 255, 0.16); --primary-soft-2: rgba(142, 102, 255, 0.3); --purple-100: rgba(142, 102, 255, 0.18); --purple-50: rgba(142, 102, 255, 0.1); --pink-100: rgba(255, 79, 139, 0.18); --pink-text: #FF8AB4; --success-text: #5EDBA7; --success-bg: rgba(29, 185, 122, 0.16); --warning-text: #F8CB5E; --warning-bg: rgba(245, 184, 27, 0.16); --danger-text: #FF8891; --danger-bg: rgba(240, 78, 91, 0.16); --info-text: #B9A3FF; --info-bg: rgba(142, 102, 255, 0.16); --neutral-bg: rgba(255, 255, 255, 0.07); --neutral-text: #B7BED3; --purple-bg: rgba(142, 102, 255, 0.2); --purple-text: #B9A3FF; --orange-100: rgba(245, 137, 27, 0.18); --teal-100: rgba(31, 193, 184, 0.18); --blue-100: rgba(142, 102, 255, 0.22); --blue-50: rgba(142, 102, 255, 0.12); --cream: #121A2E; --offwhite: #121A2E; --focus-ring: 0 0 0 3px rgba(142, 102, 255, 0.45); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.5); --shadow-primary: 0 8px 20px rgba(142, 102, 255, 0.3); --viz-1: #8E66FF; --viz-2: #D9712A; --viz-3: #1FA39B; --viz-4: #B88A14; --viz-5: #D0608C; --viz-6: #3B8FE6; --viz-grid: #1F2941; --viz-axis: #364366; --viz-muted: #818AA6; --viz-unavailable: #2A3552; } /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; height: 100%; } body { margin: 0; min-height: 100%; font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; } h1 { font-size: 26px; } h2 { font-size: 20px; } h3 { font-size: 16px; } h4 { font-size: 14px; } p { margin: 0; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } button:disabled { cursor: not-allowed; } code, pre, .mono { font-family: var(--mono); font-size: 0.92em; } pre { margin: 0; overflow: auto; } ul { margin: 0; padding: 0; list-style: none; } hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; } :focus { outline: none; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .muted { color: var(--text-3); } .text-2 { color: var(--text-2); } .small { font-size: 12px; } .tiny { font-size: 11px; } .strong { font-weight: 700; } .extra { font-weight: 800; } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tabular { font-variant-numeric: tabular-nums; } .right { text-align: right; } .center { text-align: center; } .flex { display: flex; } .inline-flex { display: inline-flex; } .col { flex-direction: column; } .wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .grow { flex: 1 1 auto; min-width: 0; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .w-full { width: 100%; } /* .hide-mobile keeps its natural display (table cells stay table-cell); hidden only below 760px */ .show-mobile { display: none !important; } @media (max-width: 760px) { .hide-mobile { display: none !important; } .show-mobile { display: initial !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 14px; font-weight: 800; font-size: 14px; line-height: 1; white-space: nowrap; border: 1px solid transparent; background: var(--surface-2); color: var(--text); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur); text-decoration: none; user-select: none; } .btn:hover { text-decoration: none; background: var(--surface-3); } .btn:active { transform: translateY(1px); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; } .btn-primary { background: var(--primary); color: var(--primary-contrast); box-shadow: var(--shadow-primary); } .btn-primary:hover { background: var(--primary-hover); } .btn-secondary { background: var(--surface); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--surface-2); } .btn-ghost { background: transparent; color: var(--text-2); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } .btn-soft { background: var(--primary-soft); color: var(--primary); } .btn-soft:hover { background: var(--primary-soft-2); } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { background: #D63B48; } .btn-danger-soft { background: var(--danger-bg); color: var(--danger-text); } .btn-success { background: var(--success); color: #fff; } .btn-success:hover { filter: brightness(0.95); } .btn-sm { height: 32px; padding: 0 12px; font-size: 13px; gap: 6px; } .btn-xs { height: 26px; padding: 0 10px; font-size: 12px; gap: 4px; } .btn-lg { height: 46px; padding: 0 24px; font-size: 15px; } .btn-block { width: 100%; } .btn .spin { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; color: var(--text-2); transition: background var(--dur), color var(--dur); border: 1px solid transparent; } .icon-btn:hover { background: var(--surface-2); color: var(--text); } .icon-btn.sm { width: 30px; height: 30px; border-radius: 8px; } .icon-btn.xs { width: 26px; height: 26px; border-radius: 7px; } .icon-btn.outlined { border-color: var(--border); background: var(--surface); } .icon-btn.danger:hover { background: var(--danger-bg); color: var(--danger-text); } .icon-btn:disabled { opacity: 0.45; } .btn-group { display: inline-flex; gap: 0; border: 1px solid var(--border); border-radius: 12px; padding: 3px; background: var(--surface-2); } .btn-group .btn { height: 30px; border-radius: 9px; background: transparent; color: var(--text-2); padding: 0 12px; font-size: 13px; } .btn-group .btn.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); } /* ---------- Badges / pills ---------- */ .pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; background: var(--neutral-bg); color: var(--neutral-text); } .pill .icon { width: 13px; height: 13px; } .pill.lg { height: 26px; padding: 0 11px; font-size: 13px; } .pill.sm { height: 18px; padding: 0 7px; font-size: 11px; } .pill.dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .tone-success { background: var(--success-bg); color: var(--success-text); } .tone-warning { background: var(--warning-bg); color: var(--warning-text); } .tone-danger { background: var(--danger-bg); color: var(--danger-text); } .tone-info { background: var(--info-bg); color: var(--info-text); } .tone-neutral { background: var(--neutral-bg); color: var(--neutral-text); } .tone-purple { background: var(--purple-bg); color: var(--purple-text); } .tone-pink { background: var(--pink-bg); color: var(--pink-text); } .heart { color: var(--pink); } .tone-orange { background: var(--orange-100); color: #9A4F05; } .tone-teal { background: var(--teal-100); color: #0D7A74; } :root[data-theme="dark"] .tone-orange, :root[data-theme="dark"] .tone-teal { color: inherit; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tone-orange, :root:not([data-theme="light"]) .tone-teal { color: inherit; } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tone-orange { color: #FFB46A; } :root:not([data-theme="light"]) .tone-teal { color: #6FE0D8; } } :root[data-theme="dark"] .tone-orange { color: #FFB46A; } :root[data-theme="dark"] .tone-teal { color: #6FE0D8; } .count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 800; background: var(--danger); color: #fff; } .count-badge.soft { background: var(--primary-soft-2); color: var(--primary); } /* ---------- Cards ---------- */ .card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-md); border: 1px solid transparent; } :root[data-theme="dark"] .card { border-color: var(--border); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card { border-color: var(--border); } } .card.pad { padding: 20px; } .card.pad-sm { padding: 14px 16px; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0; } .card-head h3 { font-size: 15px; } .card-head .sub { color: var(--text-3); font-size: 12px; font-weight: 600; } .card-body { padding: 16px 20px 20px; } .card-foot { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card.flush .card-body { padding: 0; } .card.soft { background: var(--surface-2); border-color: transparent; box-shadow: none; } .card.accent { border-top: 3px solid var(--primary); } /* ---------- Stat tiles ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; } .stat-tile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; min-height: 108px; cursor: default; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .stat-tile.link { cursor: pointer; } .stat-tile.link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .stat-tile .label { font-size: 12px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; gap: 6px; } .stat-tile .value { font-size: 32px; font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; } .stat-tile .value.sm { font-size: 24px; } .stat-tile .delta { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; } .stat-tile .delta.up { color: var(--success-text); } .stat-tile .delta.down { color: var(--danger-text); } .stat-tile .delta.flat { color: var(--text-3); } .stat-tile .spark { position: absolute; right: 14px; bottom: 12px; opacity: 0.9; } .stat-tile .hint { font-size: 12px; color: var(--text-3); } .stat-tile .tile-icon { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); } .stat-tile .tile-icon.warning { background: var(--warning-bg); color: var(--warning-text); } .stat-tile .tile-icon.danger { background: var(--danger-bg); color: var(--danger-text); } .stat-tile .tile-icon.success { background: var(--success-bg); color: var(--success-text); } .stat-tile .tile-icon.purple { background: var(--purple-bg); color: var(--purple-text); } /* ---------- Forms ---------- */ .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .field > label, .label { font-size: 12px; font-weight: 700; color: var(--text-2); display: flex; align-items: center; gap: 6px; } .label .req { color: var(--danger); } .input, .textarea, .native-select { width: 100%; min-height: 38px; padding: 8px 12px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); transition: border-color var(--dur), box-shadow var(--dur); } .input::placeholder, .textarea::placeholder { color: var(--text-3); } .input:focus, .textarea:focus, .native-select:focus, .select-trigger:focus-visible { border-color: var(--primary); box-shadow: var(--focus-ring); outline: none; } .input.sm { min-height: 32px; padding: 4px 10px; font-size: 13px; border-radius: 9px; } .input.invalid, .textarea.invalid, .select-trigger.invalid { border-color: var(--danger); } .textarea { resize: vertical; min-height: 96px; line-height: 1.5; } .native-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; } .input-wrap { position: relative; display: flex; align-items: center; } .input-wrap.has-icon .input { padding-left: 36px; } .input-wrap > .icon { position: absolute; left: 11px; color: var(--text-3); pointer-events: none; } .input-wrap .trail { position: absolute; right: 6px; } .input-wrap.trail-pad .input { padding-right: 40px; } .field-error { color: var(--danger-text); font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 4px; } .field-help { color: var(--text-3); font-size: 12px; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .form-grid .span-2 { grid-column: span 2; } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } .form-grid .span-2 { grid-column: span 1; } } .check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-weight: 600; font-size: 13px; } .check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--primary); flex: none; cursor: pointer; } .check .desc { display: block; font-weight: 400; color: var(--text-3); font-size: 12px; } .switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: 13px; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch .track { width: 38px; height: 22px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background var(--dur); flex: none; } .switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform var(--dur) var(--ease); box-shadow: 0 1px 2px rgba(0,0,0,0.25); } .switch input:checked + .track { background: var(--primary); } .switch input:checked + .track::after { transform: translateX(16px); } .switch input:focus-visible + .track { box-shadow: var(--focus-ring); } .switch input:disabled + .track { opacity: 0.5; } .radio-cards { display: grid; gap: 10px; } .radio-card { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--dur), background var(--dur); } .radio-card:hover { background: var(--surface-2); } .radio-card.selected { border-color: var(--primary); background: var(--primary-soft); } .radio-card input { margin-top: 3px; accent-color: var(--primary); } .radio-card .title { font-weight: 700; } .radio-card .desc { color: var(--text-3); font-size: 12px; } .color-swatches { display: flex; flex-wrap: wrap; gap: 8px; } .color-swatch { width: 26px; height: 26px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; transition: transform var(--dur); } .color-swatch:hover { transform: scale(1.1); } .color-swatch.selected { border-color: var(--surface); box-shadow: 0 0 0 2px var(--text); } .counter { font-size: 12px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; } .counter.warn { color: var(--warning-text); } .counter.over { color: var(--danger-text); } /* Custom select / combobox */ .select { position: relative; min-width: 0; } .select-trigger { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); text-align: left; cursor: pointer; } .select-trigger.sm { min-height: 32px; padding: 3px 8px 3px 10px; font-size: 13px; border-radius: 9px; } .select-trigger .placeholder { color: var(--text-3); } .select-trigger .value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; } .select-trigger .chev { color: var(--text-3); flex: none; } .select-trigger:disabled { opacity: 0.6; cursor: not-allowed; } .select-menu { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 100%; max-width: min(360px, 90vw); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px; max-height: 300px; overflow: auto; } .select-menu.right { left: auto; right: 0; } .select-search { position: sticky; top: -6px; background: var(--surface-raised); padding: 4px 4px 8px; margin: -6px -6px 4px; z-index: 1; padding: 8px 10px 8px; } .select-search .input { min-height: 32px; padding: 4px 10px; font-size: 13px; } .select-option { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text); width: 100%; text-align: left; } .select-option:hover, .select-option.active { background: var(--surface-2); } .select-option.selected { font-weight: 700; color: var(--primary); } .select-option .opt-sub { color: var(--text-3); font-size: 12px; margin-left: auto; } .select-group { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); padding: 8px 10px 4px; } .select-empty { padding: 12px; text-align: center; color: var(--text-3); font-size: 13px; } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 6px 0 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 700; } .chip .x { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: inherit; } .chip .x:hover { background: var(--primary-soft-2); } .chip.neutral { background: var(--neutral-bg); color: var(--text-2); } /* Filter bar */ .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; } .filter-bar .select, .filter-bar .input-wrap { min-width: 150px; } .filter-bar .input-wrap.search { min-width: 220px; flex: 1 1 220px; max-width: 360px; } .filter-bar .spacer { flex: 1; } /* ---------- Avatars & platform icons ---------- */ .avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pink); color: #fff; font-weight: 800; font-size: 13px; flex: none; overflow: hidden; position: relative; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar.sm { width: 26px; height: 26px; font-size: 11px; } .avatar.xs { width: 20px; height: 20px; font-size: 9px; } .avatar.lg { width: 48px; height: 48px; font-size: 18px; } .avatar.square { border-radius: 10px; } .avatar .plat { position: absolute; right: -2px; bottom: -2px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--surface); } .plat-icon { display: inline-grid; place-items: center; border-radius: 50%; color: #fff; flex: none; font-weight: 900; } .plat-icon svg { width: 60%; height: 60%; } .plat-stack { display: inline-flex; } .plat-stack .plat-icon { margin-left: -5px; border: 2px solid var(--surface); box-sizing: content-box; } .plat-stack .plat-icon:first-child { margin-left: 0; } /* ---------- Tables ---------- */ .table-wrap { overflow: auto; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); max-height: var(--table-max, none); position: relative; } .table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; } .table th, .table td { padding: 10px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); } .table th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); white-space: nowrap; } .table th.sortable { cursor: pointer; user-select: none; } .table th.sortable:hover { color: var(--text); } .table th .sort-ind { display: inline-block; margin-left: 4px; opacity: 0.6; vertical-align: middle; } .table tbody tr { transition: background var(--dur); } .table tbody tr:hover { background: var(--surface-2); } .table tbody tr.clickable { cursor: pointer; } .table tbody tr.selected { background: var(--primary-soft); } .table tbody tr:last-child td { border-bottom: 0; } .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; } .table .td-check { width: 36px; padding-right: 0; } .table .td-check input { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; } .table.dense th, .table.dense td { padding: 7px 12px; } .table .cell-title { font-weight: 700; color: var(--text); } .table .cell-sub { color: var(--text-3); font-size: 12px; } .table .actions { display: flex; gap: 2px; justify-content: flex-end; opacity: 0.7; } .table tbody tr:hover .actions { opacity: 1; } .table-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-3); flex-wrap: wrap; } .pager { display: inline-flex; align-items: center; gap: 4px; } .pager .btn { height: 30px; padding: 0 10px; font-size: 12px; } .bulk-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 14px; border-radius: var(--r-lg); background: var(--navy); color: #fff; box-shadow: var(--shadow-lg); } .bulk-bar .btn-ghost { color: #fff; } .bulk-bar .btn-ghost:hover { background: rgba(255,255,255,0.12); } /* ---------- Tabs ---------- */ .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; font-weight: 700; color: var(--text-3); white-space: nowrap; border-radius: 8px 8px 0 0; } .tab:hover { color: var(--text); background: var(--surface-2); } .tab.active { color: var(--primary); } .tab.active::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); } .tabs.pills { border: 0; gap: 6px; } .tabs.pills .tab { border-radius: 999px; padding: 7px 14px; background: var(--surface-2); } .tabs.pills .tab.active { background: var(--primary); color: var(--primary-contrast); } .tabs.pills .tab.active::after { display: none; } /* ---------- Overlays ---------- */ .overlay { position: fixed; inset: 0; z-index: 100; background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: 16px; } .modal { width: 100%; max-width: 560px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--surface-raised); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; } .modal.lg { max-width: 820px; } .modal.sm { max-width: 420px; } .modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 0; } .modal-head h2 { font-size: 18px; flex: 1; } .modal-head .sub { color: var(--text-3); font-size: 13px; margin-top: 2px; } .modal-body { padding: 16px 22px; overflow: auto; flex: 1; } .modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 22px 20px; border-top: 1px solid var(--border); } .modal-foot .left { margin-right: auto; } .drawer-overlay { position: fixed; inset: 0; z-index: 100; background: var(--overlay); } .drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 101; width: min(520px, 100vw); background: var(--surface-raised); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; border-radius: var(--r-xl) 0 0 var(--r-xl); } .drawer.wide { width: min(760px, 100vw); } .drawer-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid var(--border); } .drawer-head h2 { font-size: 18px; flex: 1; min-width: 0; } .drawer-head .sub { color: var(--text-3); font-size: 13px; margin-top: 2px; } .drawer-body { flex: 1; overflow: auto; padding: 18px 22px; } .drawer-foot { display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface-raised); } .drawer-foot .left { margin-right: auto; } @media (max-width: 640px) { .drawer { border-radius: 0; width: 100vw; } .modal { border-radius: var(--r-lg); } } .fade-enter-active, .fade-leave-active { transition: opacity 160ms var(--ease); } .fade-enter-from, .fade-leave-to { opacity: 0; } .slide-enter-active, .slide-leave-active { transition: transform 220ms var(--ease), opacity 220ms var(--ease); } .slide-enter-from, .slide-leave-to { transform: translateX(40px); opacity: 0; } .pop-enter-active, .pop-leave-active { transition: transform 180ms var(--ease), opacity 180ms var(--ease); } .pop-enter-from, .pop-leave-to { transform: translateY(10px) scale(0.98); opacity: 0; } /* Toasts */ .toasts { position: fixed; z-index: 200; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); } .toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--navy); color: #fff; box-shadow: var(--shadow-lg); font-size: 13px; font-weight: 600; } .toast .t-icon { flex: none; margin-top: 1px; } .toast .t-body { flex: 1; min-width: 0; } .toast .t-sub { font-weight: 400; opacity: 0.8; font-size: 12px; margin-top: 2px; word-break: break-word; } .toast .icon-btn { color: #fff; opacity: 0.8; } .toast.success .t-icon { color: #5EDBA7; } .toast.error .t-icon { color: #FF8891; } .toast.warning .t-icon { color: #F8CB5E; } .toast.info .t-icon { color: #8CC2F8; } .toast-enter-active, .toast-leave-active { transition: all 220ms var(--ease); } .toast-enter-from { opacity: 0; transform: translateY(12px); } .toast-leave-to { opacity: 0; transform: translateX(20px); } @media (max-width: 640px) { .toasts { bottom: calc(var(--bottom-nav-h) + 12px); left: 16px; right: 16px; max-width: none; } } /* Tooltip */ .tip { position: relative; display: inline-flex; } .tip-bubble { position: absolute; z-index: 90; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: pre-line; max-width: 260px; width: max-content; box-shadow: var(--shadow-md); pointer-events: none; line-height: 1.4; } .tip-bubble::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--navy); } .tip-bubble.bottom { bottom: auto; top: calc(100% + 8px); } .tip-bubble.bottom::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--navy); } /* Dropdown menu */ .menu { position: absolute; z-index: 70; top: calc(100% + 6px); right: 0; min-width: 200px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px; } .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; font-weight: 600; font-size: 13px; color: var(--text); } .menu-item:hover { background: var(--surface-2); text-decoration: none; } .menu-item.danger { color: var(--danger-text); } .menu-item .icon { color: var(--text-3); } .menu-sep { height: 1px; background: var(--border); margin: 6px 0; } .menu-head { padding: 8px 10px 4px; font-size: 11px; font-weight: 800; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; } /* ---------- Skeleton / empty / alerts ---------- */ .skeleton { position: relative; overflow: hidden; background: var(--surface-3); border-radius: 8px; min-height: 12px; } .skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); animation: shimmer 1.4s infinite; } @keyframes shimmer { 100% { transform: translateX(100%); } } .skeleton.text { height: 12px; margin: 6px 0; } .skeleton.title { height: 20px; width: 40%; } .skeleton.circle { border-radius: 50%; } .skeleton.block { height: 120px; border-radius: var(--r-lg); } .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; gap: 8px; color: var(--text-2); } .empty-state .mascot { margin-bottom: 6px; animation: bob 3.5s ease-in-out infinite; } .empty-state h3 { color: var(--text); font-size: 17px; } .empty-state p { max-width: 380px; font-size: 13px; } .empty-state.compact { padding: 22px 12px; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .alert { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); font-size: 13px; background: var(--info-bg); color: var(--info-text); font-weight: 600; } .alert .icon { flex: none; margin-top: 1px; } .alert .alert-body { flex: 1; min-width: 0; } .alert .alert-body p { font-weight: 400; margin-top: 2px; } .alert.warning { background: var(--warning-bg); color: var(--warning-text); } .alert.danger { background: var(--danger-bg); color: var(--danger-text); } .alert.success { background: var(--success-bg); color: var(--success-text); } .alert.neutral { background: var(--surface-2); color: var(--text-2); } .forbidden-panel { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 20px; } .forbidden-panel .lock { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--warning-bg); color: var(--warning-text); } /* ---------- App shell ---------- */ .app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; transition: grid-template-columns 200ms var(--ease); } .app-shell.collapsed { grid-template-columns: var(--sidebar-collapsed-w) 1fr; } .sidebar { position: sticky; top: 0; height: 100vh; background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; overflow: hidden; z-index: 40; } .sidebar-brand { display: flex; align-items: center; gap: 10px; height: var(--topbar-h); padding: 0 14px 0 16px; white-space: nowrap; text-decoration: none; } .sidebar-brand:hover { text-decoration: none; } .sidebar-brand .logo-tile { width: 42px; height: 42px; border-radius: 12px; background: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 6px 16px rgba(0,0,0,0.25); } .sidebar-brand .wordmark { font-weight: 900; font-size: 21px; color: #fff; letter-spacing: -0.02em; } .sidebar-brand .wordmark em { font-style: normal; color: #B49BFF; } .sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; } .nav-section { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); padding: 12px 10px 4px; white-space: nowrap; } .sidebar .nav-section { color: rgba(199, 204, 224, 0.55); } .nav-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; font-weight: 700; color: var(--text-2); white-space: nowrap; position: relative; text-decoration: none; transition: background var(--dur), color var(--dur); } .nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .nav-item.active { background: var(--primary-soft); color: var(--primary); } .sidebar .nav-item { color: var(--sidebar-text); border-radius: 14px; } .sidebar .nav-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .sidebar .nav-item.active { background: var(--purple); color: #fff; box-shadow: 0 8px 20px rgba(113, 56, 245, 0.35); } .sidebar .nav-item .count-badge { background: var(--pink); color: #fff; } .sidebar .nav-item .count-badge.soft { background: var(--pink); color: #fff; } .nav-item .icon { flex: none; } .nav-item .nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; } .nav-item .count-badge { margin-left: auto; } .collapsed .nav-item { justify-content: center; padding: 10px; } .collapsed .nav-item .nav-label, .collapsed .nav-item .count-badge, .collapsed .nav-section, .collapsed .sidebar-brand .wordmark { display: none; } .collapsed .sidebar-brand { justify-content: center; padding: 0; } .sidebar-foot { padding: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .sidebar-org { margin: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.07); font-size: 12px; color: var(--sidebar-text); } .sidebar-org b { display: block; color: #fff; font-size: 13px; } .collapsed .sidebar-org { display: none; } .topbar { position: sticky; top: 0; z-index: 30; height: var(--topbar-h); display: flex; align-items: center; gap: 10px; padding: 0 20px; background: transparent; border-bottom: 1px solid var(--border); } .topbar .search-trigger { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--text-3); font-weight: 600; width: 280px; max-width: 32vw; text-align: left; } .topbar .search-trigger:hover { border-color: var(--border-strong); } .topbar .search-trigger kbd { margin-left: auto; font-family: inherit; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); } .topbar .spacer { flex: 1; } .org-switcher { position: relative; } .org-switcher .trigger { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 6px; border-radius: 12px; font-weight: 700; max-width: 240px; } .org-switcher .trigger:hover { background: var(--surface-2); } .org-switcher .org-mark { width: 26px; height: 26px; border-radius: 8px; background: var(--purple); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 900; } .user-menu { position: relative; } .main { min-width: 0; display: flex; flex-direction: column; } .page { padding: 22px 24px 48px; max-width: 1480px; width: 100%; margin: 0 auto; } .page.wide { max-width: none; } .page.narrow { max-width: 960px; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .page-header .titles { min-width: 0; } .page-header h1 { font-size: 24px; display: flex; align-items: center; gap: 10px; } .page-header .subtitle { color: var(--text-3); margin-top: 3px; font-weight: 600; } .page-header .actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .page-header .back { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--text-3); margin-bottom: 6px; } .page-header .back:hover { color: var(--primary); text-decoration: none; } .demo-ribbon { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 12px; background: var(--purple-100); color: var(--purple-600); font-weight: 800; font-size: 12px; letter-spacing: 0.02em; } :root[data-theme="dark"] .demo-ribbon { color: #C9B8FF; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .demo-ribbon { color: #C9B8FF; } } .bottom-nav { display: none; } .mobile-menu-btn { display: none; } @media (max-width: 1024px) { .app-shell, .app-shell.collapsed { grid-template-columns: 1fr; } .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform 220ms var(--ease); width: var(--sidebar-w); box-shadow: var(--shadow-lg); } .collapsed .sidebar-org { display: block; } .sidebar.open { transform: translateX(0); } .collapsed .nav-item { justify-content: flex-start; padding: 9px 12px; } .collapsed .nav-item .nav-label, .collapsed .nav-item .count-badge, .collapsed .nav-section, .collapsed .sidebar-brand .wordmark { display: initial; } .collapsed .nav-item .count-badge { display: inline-flex; } .sidebar-scrim { position: fixed; inset: 0; z-index: 39; background: var(--overlay); } .mobile-menu-btn { display: inline-flex; } .topbar { padding: 0 12px; } .topbar .search-trigger { width: 38px; max-width: 38px; padding: 0; justify-content: center; } .topbar .search-trigger span, .topbar .search-trigger kbd { display: none; } .page { padding: 16px 16px calc(var(--bottom-nav-h) + 32px); } .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; height: var(--bottom-nav-h); background: var(--surface); border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); } .bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10px; font-weight: 800; color: var(--text-3); text-decoration: none; border-radius: 10px; } .bottom-nav a.active { color: var(--primary); } .bottom-nav a.compose .icon { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: var(--primary-contrast); padding: 8px; margin-top: -18px; box-shadow: 0 6px 14px rgba(43,140,237,0.4); } } @media (max-width: 640px) { .page-header h1 { font-size: 20px; } .page-header .actions { width: 100%; } } /* Global search palette */ .palette { width: 100%; max-width: 620px; align-self: flex-start; margin-top: 8vh; background: var(--surface-raised); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; } .palette .input-wrap { border-bottom: 1px solid var(--border); } .palette .input { border: 0; border-radius: 0; min-height: 54px; font-size: 15px; padding-left: 44px; } .palette .input:focus { box-shadow: none; } .palette-results { max-height: 60vh; overflow: auto; padding: 8px; } .palette-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 10px; text-align: left; } .palette-row:hover, .palette-row.active { background: var(--surface-2); } .palette-row .kind { font-size: 11px; font-weight: 800; color: var(--text-3); text-transform: uppercase; margin-left: auto; } /* Notifications */ .notif-panel { width: 360px; max-width: calc(100vw - 24px); } .notif-item { display: flex; gap: 10px; padding: 10px; border-radius: 10px; text-decoration: none; color: var(--text); } .notif-item:hover { background: var(--surface-2); text-decoration: none; } .notif-item .sev { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; } .sev-info { background: var(--primary); } .sev-warning { background: var(--warning); } .sev-danger { background: var(--danger); } /* ---------- Dashboard ---------- */ .dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; } .dash-grid > * { grid-column: span 12; } @media (min-width: 900px) { .dash-grid .c6 { grid-column: span 6; } .dash-grid .c4 { grid-column: span 4; } .dash-grid .c8 { grid-column: span 8; } .dash-grid .c5 { grid-column: span 5; } .dash-grid .c7 { grid-column: span 7; } } .greeting { display: flex; align-items: center; gap: 16px; } .health-strip { display: flex; flex-wrap: wrap; gap: 8px; } .health-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; font-weight: 700; } .health-chip .fix { color: var(--primary); font-weight: 800; margin-left: 4px; } .list-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .list-row:last-child { border-bottom: 0; } .list-row .main-text { flex: 1; min-width: 0; } .list-row .title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-row .sub { color: var(--text-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-row.link { cursor: pointer; margin: 0 -8px; padding: 10px 8px; border-radius: 10px; } .list-row.link:hover { background: var(--surface-2); } .client-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; } .activity-row { display: flex; gap: 10px; padding: 8px 0; font-size: 13px; border-bottom: 1px dashed var(--border); } .activity-row:last-child { border-bottom: 0; } .activity-row .when { color: var(--text-3); font-size: 12px; margin-left: auto; white-space: nowrap; } .legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-2); font-weight: 600; } .legend-item { display: inline-flex; align-items: center; gap: 6px; } .legend-swatch { width: 12px; height: 12px; border-radius: 3px; } .legend-line { width: 16px; height: 3px; border-radius: 2px; } .legend-swatch.hatched { background: repeating-linear-gradient(45deg, var(--viz-unavailable) 0 3px, transparent 3px 6px); border: 1px solid var(--viz-axis); } /* ---------- Charts ---------- */ .chart { width: 100%; position: relative; } .chart svg { width: 100%; height: auto; overflow: visible; display: block; } .chart text { font-family: var(--font); font-size: 11px; fill: var(--text-3); font-weight: 600; } .chart .grid line { stroke: var(--viz-grid); stroke-width: 1; } .chart .axis line { stroke: var(--viz-axis); stroke-width: 1; } .chart .series-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .chart .series-area { opacity: 0.1; } .chart .marker { stroke: var(--surface); stroke-width: 2; } .chart .bar { transition: opacity var(--dur); } .chart .bar:hover, .chart .bar.hover { opacity: 0.8; } .chart .crosshair { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: none; opacity: 0.6; } .chart .hit { fill: transparent; } .chart-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--navy); color: #fff; padding: 8px 10px; border-radius: 10px; font-size: 12px; box-shadow: var(--shadow-md); min-width: 120px; transform: translate(-50%, calc(-100% - 10px)); } .chart-tip .tip-title { font-weight: 800; margin-bottom: 4px; opacity: 0.85; } .chart-tip .tip-row { display: flex; align-items: center; gap: 6px; } .chart-tip .tip-row .k { width: 12px; height: 3px; border-radius: 2px; } .chart-tip .tip-row .v { font-weight: 800; margin-left: auto; padding-left: 10px; font-variant-numeric: tabular-nums; } .chart-tip .tip-row .n { opacity: 0.85; } .chart-tip .tip-row .na { font-style: italic; opacity: 0.7; } .chart-empty { display: grid; place-items: center; min-height: 120px; color: var(--text-3); font-size: 13px; font-weight: 600; } .donut-legend { display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .donut-legend .row { display: flex; align-items: center; gap: 8px; } .donut-legend .row .v { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; } .rating-bars { display: grid; gap: 6px; } .rating-bar { display: grid; grid-template-columns: 34px 1fr 36px; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; } .rating-bar .track { height: 10px; border-radius: 999px; background: var(--purple-100); overflow: hidden; } .rating-bar .fill { height: 100%; border-radius: 999px; background: var(--purple); } .rating-bar .n { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; } /* ---------- Calendar ---------- */ .cal-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .cal-toolbar .title { font-size: 18px; font-weight: 800; min-width: 180px; } .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--border); gap: 1px; } .cal-dow { background: var(--surface-2); padding: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); text-align: center; } .cal-cell { background: var(--surface); min-height: 118px; padding: 6px; display: flex; flex-direction: column; gap: 4px; position: relative; } .cal-cell.other { background: var(--surface-2); color: var(--text-3); } .cal-cell.other .cal-day { opacity: 0.6; } .cal-cell.past .cal-add { display: none; } .cal-cell .cal-day { font-size: 12px; font-weight: 800; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; } .cal-cell.today .cal-day { background: var(--primary); color: var(--primary-contrast); } .cal-cell .cal-add { position: absolute; top: 4px; right: 4px; opacity: 0; transition: opacity var(--dur); } .cal-cell:hover .cal-add, .cal-cell:focus-within .cal-add { opacity: 1; } .cal-chip { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 7px; font-size: 11px; font-weight: 700; color: var(--text); background: var(--surface-2); border-left: 3px solid var(--primary); width: 100%; text-align: left; cursor: pointer; overflow: hidden; transition: filter var(--dur), transform var(--dur); } .cal-chip:hover { filter: brightness(0.96); transform: translateX(1px); } .cal-chip .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-chip .time { color: var(--text-3); font-weight: 700; font-size: 10px; } .cal-chip.published { opacity: 0.8; } .cal-chip.failed { border-left-color: var(--danger) !important; } .cal-chip .status-ico { flex: none; } .cal-more { font-size: 11px; font-weight: 800; color: var(--primary); text-align: left; padding: 2px 6px; } .cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; } .cal-week .cal-cell { min-height: 360px; border-radius: var(--r-md); border: 1px solid var(--border); } .cal-week .cal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12px; font-weight: 800; } @media (max-width: 760px) { .cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } .cal-cell { min-height: 64px; padding: 4px; } .cal-chip .t, .cal-chip .time { display: none; } .cal-chip { width: auto; padding: 0; border: 0; height: 8px; border-radius: 4px; background: var(--primary); } .cal-cell .chips { display: flex; flex-wrap: wrap; gap: 3px; } .cal-week { grid-template-columns: 1fr; } .cal-week .cal-cell { min-height: 0; } .cal-cell .cal-add { display: none; } } /* ---------- Posts / composer ---------- */ .status-timeline { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 18px; } .status-timeline::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--border); border-radius: 2px; } .tl-item { position: relative; padding: 6px 0 10px; } .tl-item::before { content: ''; position: absolute; left: -17px; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); border: 2px solid var(--surface); } .tl-item.ok::before { background: var(--success); } .tl-item.bad::before { background: var(--danger); } .tl-item.warn::before { background: var(--warning); } .tl-item .tl-title { font-weight: 700; font-size: 13px; } .tl-item .tl-sub { color: var(--text-3); font-size: 12px; } .variant-card { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); display: grid; gap: 10px; } .variant-card .vc-head { display: flex; align-items: center; gap: 10px; } .error-box { background: var(--danger-bg); color: var(--danger-text); border-radius: var(--r-md); padding: 10px 12px; font-size: 12px; font-family: var(--mono); word-break: break-word; } .compose-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; } @media (max-width: 1100px) { .compose-layout { grid-template-columns: 1fr; } } .compose-col { display: flex; flex-direction: column; gap: 16px; } .compose-body { min-height: 180px; font-size: 15px; line-height: 1.55; } .limit-badges { display: flex; flex-wrap: wrap; gap: 6px; } .limit-badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px 0 4px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-2); } .limit-badge.warn { background: var(--warning-bg); color: var(--warning-text); } .limit-badge.over { background: var(--danger-bg); color: var(--danger-text); } .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .media-thumb { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--surface-3); border: 2px solid transparent; cursor: pointer; } .media-thumb img { width: 100%; height: 100%; object-fit: cover; } .media-thumb.selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); } .media-thumb .rm { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.55); color: #fff; } .media-thumb .ord { position: absolute; left: 6px; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; } .media-thumb .alt-flag { position: absolute; left: 4px; bottom: 4px; } .dropzone { border: 2px dashed var(--border-strong); border-radius: var(--r-lg); padding: 18px; text-align: center; color: var(--text-3); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color var(--dur), background var(--dur); } .dropzone:hover, .dropzone.over { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); } .progress { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .progress .bar { height: 100%; background: var(--primary); border-radius: 999px; transition: width 120ms linear; } .target-group { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .target-group + .target-group { margin-top: 8px; } .target-group .tg-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface-2); font-weight: 800; font-size: 12px; } .target-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--border); cursor: pointer; } .target-row:hover { background: var(--surface-2); } .target-row.selected { background: var(--primary-soft); } .target-row input { accent-color: var(--primary); width: 16px; height: 16px; flex: none; } .target-row .name { flex: 1; min-width: 0; font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .target-row .meta { color: var(--text-3); font-size: 11px; } .target-locs { padding: 4px 12px 10px 38px; display: grid; gap: 4px; border-top: 1px dashed var(--border); background: var(--surface); } .target-locs label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px; } .target-locs label:hover { background: var(--surface-2); } .override-card { border: 1px solid var(--border); border-radius: var(--r-md); } .override-card summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; font-weight: 700; font-size: 13px; list-style: none; } .override-card summary::-webkit-details-marker { display: none; } .override-card summary .chev { margin-left: auto; transition: transform var(--dur); color: var(--text-3); } .override-card[open] summary .chev { transform: rotate(180deg); } .override-card .ov-body { padding: 0 12px 12px; display: grid; gap: 10px; } .target-errs { margin-top: 6px; display: grid; gap: 4px; } .target-err { display: flex; gap: 6px; font-size: 12px; font-weight: 600; color: var(--danger-text); } .target-err.warn { color: var(--warning-text); } .previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .preview { border-radius: 16px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; font-size: 13px; box-shadow: var(--shadow-sm); } .preview .pv-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; } .preview .pv-head .n { font-weight: 800; font-size: 13px; } .preview .pv-head .s { color: var(--text-3); font-size: 11px; } .preview .pv-body { padding: 0 12px 10px; white-space: pre-wrap; word-break: break-word; line-height: 1.45; } .preview .pv-media { background: var(--surface-3); aspect-ratio: 16/9; overflow: hidden; display: grid; place-items: center; color: var(--text-3); } .preview .pv-media img { width: 100%; height: 100%; object-fit: cover; } .preview .pv-media.square { aspect-ratio: 1; } .preview .pv-media.vertical { aspect-ratio: 9/16; max-height: 300px; } .preview .pv-foot { display: flex; gap: 14px; padding: 8px 12px 10px; color: var(--text-3); font-size: 12px; font-weight: 700; border-top: 1px solid var(--border); } .preview .pv-cta { margin: 0 12px 12px; display: inline-flex; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--primary); color: var(--primary); font-weight: 800; font-size: 12px; } .preview .pv-link { margin: 0 12px 10px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: var(--surface-2); font-size: 12px; } .preview .pv-link .u { color: var(--text-3); font-size: 11px; text-transform: uppercase; } .preview .pv-tag { color: var(--primary); } .schedule-panel .tz-line { font-size: 12px; color: var(--text-3); font-weight: 600; } .sticky-actions { position: sticky; bottom: 0; z-index: 10; margin: 12px -24px -48px; padding: 12px 24px; background: var(--bg); border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } @media (max-width: 1024px) { .sticky-actions { margin: 12px -16px calc(-1 * (var(--bottom-nav-h) + 32px)); padding: 12px 16px calc(12px + var(--bottom-nav-h)); } } /* ---------- Reviews ---------- */ .reviews-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; } @media (max-width: 960px) { .reviews-layout { grid-template-columns: 1fr; } .reviews-filters { order: 2; } } .reviews-filters { position: sticky; top: calc(var(--topbar-h) + 16px); display: flex; flex-direction: column; gap: 12px; } .review-card { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); transition: box-shadow var(--dur), border-color var(--dur); } .review-card.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft-2); } .review-card.unread { border-left: 4px solid var(--primary); } .review-card .rc-head { display: flex; align-items: flex-start; gap: 12px; } .review-card .rc-meta { font-size: 12px; color: var(--text-3); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; } .review-card .comment { white-space: pre-wrap; line-height: 1.55; } .review-card .reply-box { background: var(--surface-2); border-radius: var(--r-md); padding: 12px 14px; font-size: 13px; border-left: 3px solid var(--teal); } .review-card .reply-box .rb-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); margin-bottom: 4px; font-weight: 700; } .stars { display: inline-flex; gap: 1px; color: var(--warning); } .stars .off { color: var(--border-strong); } .rating-filter { display: flex; gap: 4px; } .rating-filter button { flex: 1; height: 30px; border-radius: 8px; background: var(--surface-2); font-weight: 800; font-size: 12px; color: var(--text-2); } .rating-filter button.active { background: var(--warning); color: #3A2A00; } /* ---------- Integrations ---------- */ .matrix-wrap { overflow: auto; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); } .matrix { border-collapse: separate; border-spacing: 0; min-width: 760px; width: 100%; font-size: 13px; } .matrix th, .matrix td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: center; } .matrix th { background: var(--surface-2); position: sticky; top: 0; z-index: 2; font-size: 12px; } .matrix th:first-child, .matrix td:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; font-weight: 700; min-width: 200px; } .matrix th:first-child { background: var(--surface-2); z-index: 3; } .matrix tr:last-child td { border-bottom: 0; } .matrix td.cap { cursor: default; } .cap-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; } .cap-mark.supported { background: var(--success-bg); color: var(--success-text); } .cap-mark.pending_verification { background: var(--warning-bg); color: var(--warning-text); } .cap-mark.planned { background: var(--info-bg); color: var(--info-text); } .cap-mark.unsupported { background: var(--neutral-bg); color: var(--text-3); } .platform-card { display: grid; gap: 12px; } .platform-card .pc-head { display: flex; align-items: center; gap: 12px; } .req-list { display: grid; gap: 6px; font-size: 13px; color: var(--text-2); } .req-list li { display: flex; gap: 8px; } .req-list li::before { content: '•'; color: var(--primary); font-weight: 900; } .kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 13px; } .kv dt { color: var(--text-3); font-weight: 700; } .kv dd { margin: 0; min-width: 0; word-break: break-word; } .cap-list { display: grid; gap: 6px; } .cap-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13px; } .cap-row .cap-mark { width: 24px; height: 24px; border-radius: 7px; flex: none; } .cap-row .cl { font-weight: 700; } .cap-row .cn { color: var(--text-3); font-size: 12px; } /* ---------- Settings / misc ---------- */ .settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; } @media (max-width: 860px) { .settings-layout { grid-template-columns: 1fr; } } .vnav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--topbar-h) + 16px); } .vnav .nav-item { padding: 8px 12px; } @media (max-width: 860px) { .vnav { flex-direction: row; overflow-x: auto; position: static; } } .token-reveal { background: var(--navy); color: #fff; border-radius: var(--r-md); padding: 14px; font-family: var(--mono); font-size: 13px; word-break: break-all; display: flex; align-items: center; gap: 10px; } .token-reveal .icon-btn { color: #fff; } .scope-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; } @media (max-width: 560px) { .scope-grid { grid-template-columns: 1fr; } } .context-pre { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; font-size: 12px; max-height: 260px; overflow: auto; } .json-pre { font-family: var(--mono); font-size: 12px; white-space: pre-wrap; word-break: break-word; } .segmented { display: inline-flex; background: var(--surface-2); border-radius: 10px; padding: 3px; gap: 2px; } .segmented button { padding: 5px 10px; border-radius: 8px; font-weight: 700; font-size: 12px; color: var(--text-2); display: inline-flex; align-items: center; gap: 5px; } .segmented button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); } .notfound { min-height: 60vh; display: grid; place-items: center; } .approval-card { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); align-items: start; } .approval-card.selected { border-color: var(--primary); background: var(--primary-soft); } @media (max-width: 640px) { .approval-card { grid-template-columns: auto 1fr; } .approval-card .ac-actions { grid-column: 1 / -1; } } .subject-box { background: var(--surface-2); border-radius: var(--r-md); padding: 10px 12px; font-size: 13px; margin-top: 8px; white-space: pre-wrap; } .copy-field { display: flex; align-items: center; gap: 6px; background: var(--surface-2); border-radius: 10px; padding: 6px 6px 6px 12px; font-family: var(--mono); font-size: 12px; } .copy-field span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- Confetti ---------- */ .confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 300; overflow: hidden; } .confetti-piece { position: absolute; width: 8px; height: 12px; border-radius: 2px; animation: confetti-fall var(--d, 1.4s) cubic-bezier(0.2, 0.7, 0.3, 1) forwards; opacity: 0.95; } @keyframes confetti-fall { 0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; } 100% { transform: translate(var(--dx, 0), var(--dy, 400px)) rotate(var(--rot, 720deg)) scale(0.6); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .confetti-layer { display: none; } } /* ---------- Boot loader (SPA shell skeleton) ---------- */ .boot-loader { min-height: 100vh; display: grid; place-items: center; background: var(--bg); } .boot-loader .boot-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--text-3); font-weight: 700; } .boot-loader .boot-dots { display: flex; gap: 8px; } .boot-loader .boot-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); opacity: 0.4; animation: bootdot 1.2s ease-in-out infinite; } .boot-loader .boot-dots span:nth-child(2) { animation-delay: 0.15s; background: var(--pink); } .boot-loader .boot-dots span:nth-child(3) { animation-delay: 0.3s; background: var(--navy); } @keyframes bootdot { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } } /* ---------- Error pages (rendered by the PHP kernel) ---------- */ .error-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg); } .error-card { width: 100%; max-width: 520px; text-align: center; background: var(--surface); border-radius: var(--r-2xl); padding: 40px 32px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; align-items: center; gap: 14px; } .error-card img { width: 220px; height: auto; margin-bottom: 4px; } .error-card h1 { font-size: 24px; color: var(--navy); } :root[data-theme="dark"] .error-card h1 { color: #fff; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .error-card h1 { color: #fff; } } .error-card p { color: var(--text-2); font-size: 15px; } .error-card .btn { margin-top: 10px; height: 44px; padding: 0 22px; } /* ========================================================================== Docs page (.docs) ========================================================================== */ .docs { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 100vh; } .docs-side { position: sticky; top: 0; height: 100vh; overflow: auto; padding: 18px; border-right: 1px solid var(--border); background: var(--surface); } .docs-side .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-weight: 900; color: var(--navy); text-decoration: none; } .docs-side .input-wrap { margin-bottom: 6px; } .docs-side nav a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 13px; color: var(--text-2); font-weight: 600; } .docs-side nav a:hover { background: var(--surface-2); text-decoration: none; } .docs-side .tag-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); padding: 14px 8px 4px; } .docs-main { padding: 28px 36px 80px; max-width: 980px; } .docs-main h1 { font-size: 30px; } .docs .method { display: inline-grid; place-items: center; min-width: 58px; height: 24px; padding: 0 8px; border-radius: 7px; font-size: 11px; font-weight: 900; letter-spacing: 0.04em; color: #fff; font-family: var(--mono); } .docs .m-get { background: var(--purple); } .docs .m-post { background: var(--success); } .docs .m-patch { background: var(--orange); } .docs .m-put { background: var(--orange); } .docs .m-delete { background: var(--danger); } .docs .op { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; margin: 12px 0; overflow: hidden; } .docs .op summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; font-weight: 700; } .docs .op summary::-webkit-details-marker { display: none; } .docs .op summary code { font-size: 14px; } .docs .op summary .sum { color: var(--text-2); font-weight: 600; font-size: 13px; margin-left: auto; text-align: right; } .docs .op-body { padding: 0 16px 16px; border-top: 1px solid var(--border); display: grid; gap: 14px; padding-top: 14px; } .docs .op-body h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); margin-bottom: 6px; } .docs pre { background: #0B1220; color: #E3DCFF; border-radius: 12px; padding: 12px 14px; font-size: 12px; line-height: 1.5; } .docs .param-table { width: 100%; font-size: 13px; border-collapse: collapse; } .docs .param-table td, .docs .param-table th { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; } .docs .param-table th { font-size: 11px; text-transform: uppercase; color: var(--text-3); } .docs .schema { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; margin: 10px 0; } .docs .schema h3 { font-size: 15px; margin-bottom: 8px; } .docs .tag-title { margin-top: 36px; font-size: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } @media (max-width: 860px) { .docs { grid-template-columns: 1fr; } .docs-side { position: static; height: auto; max-height: 40vh; } .docs-main { padding: 20px 16px 60px; } } /* ========================================================================== Flat skin (final) — solid colours, hairline borders, Plus Jakarta Sans, pastel panels, mascot moods. Later rules override the base system above. ========================================================================== */ :root { --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: var(--font); --line: #E6E8F0; --lav: #EFEAFF; --lav-2: #DCD0FF; --pink-t: #FFE9F0; --pink-100: #FFE9F0; --pink-bg: #FFE9F0; --pink-text: #D12A68; --lemon: #FFF3C4; --sun: #FFC94D; --sun-100: #FFF3C4; --mint-100: #E3F8EF; --sky-100: #E6F3FF; --success: #17B978; --success-text: #0E8A5C; --success-bg: #E3F8EF; --warning: #E89B0C; --warning-text: #9A6400; --warning-bg: #FFF3C4; --danger-text: #B9273A; --danger-bg: #FFE7EA; --info-text: #7138F5; --info-bg: #EFEAFF; --purple-bg: #EFEAFF; --purple-text: #7138F5; --neutral-bg: #F5F6FA; --neutral-text: #5D6780; --primary-soft: #EFEAFF; --primary-soft-2: #DCD0FF; --text: #101D3A; --text-2: #5D6780; --text-3: #8B94AB; --border: #E6E8F0; --border-strong: #D5D8E3; --surface: #FFFFFF; --surface-2: #F5F6FA; --surface-3: #EDEFF6; --surface-raised: #FFFFFF; --bg: #F5F6FA; --sidebar-bg: #FFFFFF; --sidebar-text: #5D6780; --shadow-sm: none; --shadow-md: none; --shadow-lg: 0 1px 2px rgba(16, 29, 58, 0.04); --shadow-primary: none; --focus-ring: 0 0 0 3px rgba(113, 56, 245, 0.25); --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px; --viz-grid: #EDEFF6; --viz-axis: #E6E8F0; --viz-unavailable: #D5D8E3; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --line: rgba(255, 255, 255, 0.08); --lav: rgba(142, 102, 255, 0.14); --lav-2: rgba(142, 102, 255, 0.28); --pink-t: rgba(255, 79, 139, 0.14); --pink-100: rgba(255, 79, 139, 0.14); --pink-bg: rgba(255, 79, 139, 0.14); --pink-text: #FF8AB4; --lemon: rgba(255, 201, 77, 0.14); --sun-100: rgba(255, 201, 77, 0.14); --mint-100: rgba(23, 185, 120, 0.14); --sky-100: rgba(89, 195, 255, 0.14); --success-text: #5EDBA7; --success-bg: rgba(23, 185, 120, 0.14); --warning-text: #F8CB5E; --warning-bg: rgba(255, 201, 77, 0.14); --danger-text: #FF8891; --danger-bg: rgba(240, 78, 91, 0.14); --info-text: #B9A3FF; --info-bg: rgba(142, 102, 255, 0.14); --purple-bg: rgba(142, 102, 255, 0.14); --purple-text: #B9A3FF; --neutral-bg: rgba(255, 255, 255, 0.06); --neutral-text: #B7BED3; --primary-soft: rgba(142, 102, 255, 0.14); --primary-soft-2: rgba(142, 102, 255, 0.28); --text: #EEF1FA; --text-2: #B7BED3; --text-3: #818AA6; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --surface: #121A2E; --surface-2: #192238; --surface-3: #232D47; --surface-raised: #192238; --bg: #0B1220; --sidebar-bg: #121A2E; --sidebar-text: #B7BED3; --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.4); --viz-grid: #1F2941; --viz-axis: #2B3556; --viz-unavailable: #3A4461; } } :root[data-theme="dark"] { --line: rgba(255, 255, 255, 0.08); --lav: rgba(142, 102, 255, 0.14); --lav-2: rgba(142, 102, 255, 0.28); --pink-t: rgba(255, 79, 139, 0.14); --pink-100: rgba(255, 79, 139, 0.14); --pink-bg: rgba(255, 79, 139, 0.14); --pink-text: #FF8AB4; --lemon: rgba(255, 201, 77, 0.14); --sun-100: rgba(255, 201, 77, 0.14); --mint-100: rgba(23, 185, 120, 0.14); --sky-100: rgba(89, 195, 255, 0.14); --success-text: #5EDBA7; --success-bg: rgba(23, 185, 120, 0.14); --warning-text: #F8CB5E; --warning-bg: rgba(255, 201, 77, 0.14); --danger-text: #FF8891; --danger-bg: rgba(240, 78, 91, 0.14); --info-text: #B9A3FF; --info-bg: rgba(142, 102, 255, 0.14); --purple-bg: rgba(142, 102, 255, 0.14); --purple-text: #B9A3FF; --neutral-bg: rgba(255, 255, 255, 0.06); --neutral-text: #B7BED3; --primary-soft: rgba(142, 102, 255, 0.14); --primary-soft-2: rgba(142, 102, 255, 0.28); --text: #EEF1FA; --text-2: #B7BED3; --text-3: #818AA6; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --surface: #121A2E; --surface-2: #192238; --surface-3: #232D47; --surface-raised: #192238; --bg: #0B1220; --sidebar-bg: #121A2E; --sidebar-text: #B7BED3; --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.4); --viz-grid: #1F2941; --viz-axis: #2B3556; --viz-unavailable: #3A4461; } /* base type */ body { font-family: var(--font); font-weight: 500; background: var(--bg); } h1, h2, h3, h4, .page-header h1, .stat-tile .value, .card-head h3, .auth-head h1, .modal-head h2, .drawer-head h2, .empty-state h3 { font-family: var(--font); font-weight: 800; letter-spacing: -0.03em; } .strong, .cell-title, .title, .label, .btn, .pill, .tab, .nav-item { font-weight: 700; } .page-header h1 { font-size: 34px; line-height: 1.1; flex-wrap: wrap; } .page-header .subtitle { font-weight: 600; color: var(--text-2); font-size: 15px; } .card-head h3 { font-size: 18px; } .grad, .hl { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--purple-text); } .heart { color: var(--pink); } .bubble { position: relative; } .bubble::after { content: ''; position: absolute; left: 30px; bottom: -9px; width: 18px; height: 18px; background: inherit; transform: rotate(45deg); border-radius: 3px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .bubble.lav, .card.lav { background: var(--lav); border-color: var(--lav); } .bubble.lav::after { border-color: var(--lav); } /* cards: flat, hairline */ .card { background: var(--surface); border: 1px solid var(--line); outline: 0; border-radius: 16px; box-shadow: none; backdrop-filter: none; } .card.soft { background: var(--lav); border-color: var(--lav); } .card.accent { border: 1px solid var(--line); border-left: 4px solid var(--purple); background: var(--surface); } .card.hero, .stat-tile.tone-hero { background: var(--purple); color: #fff; border-color: var(--purple); } .card.hero .card-head h3, .card.hero .sub, .stat-tile.tone-hero .label, .stat-tile.tone-hero .hint, .stat-tile.tone-hero .delta, .stat-tile.tone-hero .value { color: #fff; } .stat-tile.tone-hero .hint, .stat-tile.tone-hero .label { color: rgba(255, 255, 255, 0.85); } .stat-tile.tone-pink, .card.pink { background: var(--pink-t); border-color: var(--pink-t); } .stat-tile.tone-sun, .card.sun { background: var(--lemon); border-color: var(--lemon); } .stat-tile.tone-danger { background: var(--danger-bg); border-color: var(--danger-bg); } .stat-tile.tone-mint, .card.mint { background: var(--mint-100); border-color: var(--mint-100); } .stat-tile.tone-lav { background: var(--lav); border-color: var(--lav); } .stat-tile.tone-sky { background: var(--sky-100); border-color: var(--sky-100); } .card-foot, .list-row, .activity-row, .table-foot { border-color: var(--line); } /* stat tiles */ .stat-grid { gap: 16px; } .stat-tile { border-radius: 16px; padding: 20px; min-height: 118px; transition: none; } .stat-tile.link:hover { transform: none; box-shadow: none; border-color: var(--border-strong); } .stat-tile.tone-hero.link:hover { border-color: var(--purple); } .stat-tile .label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 700; color: var(--text-2); } .stat-tile .value { font-size: 40px; letter-spacing: -0.04em; margin-top: 6px; } .stat-tile .delta, .stat-tile .hint { font-weight: 700; font-size: 12px; } .stat-tile .stamp { position: absolute; top: 14px; right: 14px; transform: none; } .stat-tile.tone-hero .stamp { background: rgba(255, 255, 255, 0.2); color: #fff; } .stat-tile.tone-sun .stamp { background: var(--surface); color: var(--warning-text); } .stat-tile .tile-icon { border-radius: 10px; box-shadow: none; } /* buttons */ .btn { border: 0; border-radius: 999px; font-weight: 700; height: 42px; padding: 0 20px; background: var(--surface-2); color: var(--text); box-shadow: none; transition: background 120ms, color 120ms, border-color 120ms; } .btn:hover { transform: none; box-shadow: none; background: var(--surface-3); } .btn:active { transform: none; } .btn-primary { background: var(--purple); color: #fff; box-shadow: none; } .btn-primary:hover { background: #5B27D9; filter: none; box-shadow: none; } :root[data-theme="dark"] .btn-primary { background: #7138F5; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary { background: #7138F5; } } :root[data-theme="dark"] .btn-primary:hover { background: #8E66FF; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary:hover { background: #8E66FF; } } .btn-secondary { background: var(--navy); color: #fff; } .btn-secondary:hover { background: #1B2B52; } :root[data-theme="dark"] .btn-secondary { background: #EEF1FA; color: #101D3A; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-secondary { background: #EEF1FA; color: #101D3A; } } :root[data-theme="dark"] .btn-secondary:hover { background: #fff; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-secondary:hover { background: #fff; } } .btn-ghost { background: var(--surface); color: var(--text); border: 1.5px solid var(--text); box-shadow: none; } .btn-ghost:hover { background: var(--surface-2); transform: none; box-shadow: none; } .btn-soft { background: var(--lav); color: var(--purple-text); } .btn-soft:hover { background: var(--lav-2); } .btn-pink { background: var(--pink); color: #fff; box-shadow: none; } .btn-pink:hover { background: #E8407A; box-shadow: none; } .btn-sun { background: var(--sun); color: #101D3A; box-shadow: none; } .btn-sun:hover { background: #F5BB33; } .btn-success { background: var(--success); color: #fff; box-shadow: none; } .btn-success:hover { background: #119C64; filter: none; } .btn-danger { background: var(--danger); color: #fff; box-shadow: none; } .btn-danger:hover { background: #D63B48; } .btn-danger-soft { background: var(--danger-bg); color: var(--danger-text); } .btn-danger-soft:hover { background: var(--danger-bg); } .btn-quiet { background: transparent; color: var(--text-2); } .btn-quiet:hover { background: var(--surface-2); color: var(--text); } .btn-sm { height: 34px; padding: 0 14px; } .btn-xs { height: 28px; padding: 0 11px; font-size: 12px; } .btn-lg { height: 52px; padding: 0 26px; font-size: 16px; } .btn-group { border: 1px solid var(--line); background: var(--surface); box-shadow: none; border-radius: 999px; padding: 3px; } .btn-group .btn { box-shadow: none; height: 30px; background: transparent; } .btn-group .btn:hover { background: var(--surface-2); } .btn-group .btn.active { background: var(--navy); color: #fff; } :root[data-theme="dark"] .btn-group .btn.active { background: #EEF1FA; color: #101D3A; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-group .btn.active { background: #EEF1FA; color: #101D3A; } } .segmented { background: var(--surface); border: 1px solid var(--line); box-shadow: none; border-radius: 999px; padding: 3px; } .segmented button { border-radius: 999px; } .segmented button.active { background: var(--navy); color: #fff; box-shadow: none; } :root[data-theme="dark"] .segmented button.active { background: #EEF1FA; color: #101D3A; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .segmented button.active { background: #EEF1FA; color: #101D3A; } } .icon-btn.outlined { border: 1px solid var(--line); background: var(--surface); box-shadow: none; border-radius: 10px; } .icon-btn:hover { background: var(--surface-2); } /* pills: pastel + dot + word */ .pill { background: var(--surface-2); color: var(--neutral-text); box-shadow: none; height: 24px; padding: 0 11px; font-weight: 700; border-radius: 999px; } .pill.sm { height: 20px; padding: 0 8px; } .pill .dot-i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .tone-success { background: var(--success-bg); color: var(--success-text); } .tone-warning { background: var(--warning-bg); color: var(--warning-text); } .tone-danger { background: var(--danger-bg); color: var(--danger-text); } .tone-info, .tone-purple { background: var(--lav); color: var(--purple-text); } .tone-pink { background: var(--pink-t); color: var(--pink-text); } .tone-neutral { background: var(--surface-2); color: var(--neutral-text); } .tone-orange { background: var(--lemon); color: var(--warning-text); } .tone-teal { background: var(--mint-100); color: var(--success-text); } .count-badge { background: var(--pink-t); color: var(--pink-text); min-width: 22px; height: 22px; border: 0; } .count-badge.soft { background: var(--lav); color: var(--purple-text); } .chip { background: var(--lav); color: var(--purple-text); border: 0; box-shadow: none; border-radius: 10px; height: 26px; } .chip.neutral { background: var(--surface-2); color: var(--text-2); } .alert { border-radius: 12px; box-shadow: none; border: 0; } .alert.neutral { background: var(--surface-2); } /* forms */ .input, .textarea, .native-select, .select-trigger { border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); box-shadow: none; font-weight: 600; } .input.sm, .select-trigger.sm { border-radius: 10px; } .input:focus, .textarea:focus, .native-select:focus, .select-trigger:focus-visible { border-color: var(--purple); box-shadow: var(--focus-ring); } .input.invalid, .textarea.invalid, .select-trigger.invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(240, 78, 91, 0.14); } .select-menu, .menu { border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); background: var(--surface); backdrop-filter: none; } .select-option:hover, .select-option.active, .menu-item:hover { background: var(--lav); } .switch .track { background: var(--border-strong); } .switch input:checked + .track { background: var(--purple); } .radio-card { border-color: var(--line); border-radius: 12px; } .radio-card.selected { background: var(--lav); border-color: var(--purple); } .dropzone { border: 1.5px dashed var(--border-strong); border-radius: 12px; background: var(--surface-2); } .dropzone:hover, .dropzone.over { background: var(--lav); border-color: var(--purple); } .limit-badge { background: var(--surface-2); border-radius: 10px; } .limit-badge.warn { background: var(--warning-bg); color: var(--warning-text); } .limit-badge.over { background: var(--danger-bg); color: var(--danger-text); } .progress { background: var(--surface-3); } .progress .bar { background: var(--purple); } /* tables */ .table-wrap { border: 1px solid var(--line); outline: 0; border-radius: 16px; box-shadow: none; background: var(--surface); backdrop-filter: none; } .table th { background: var(--surface-2); color: var(--text-2); border-bottom: 1px solid var(--line); text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 700; } .table td { border-bottom: 1px solid var(--line); } .table tbody tr:hover { background: var(--surface-2); } .table tbody tr.selected { background: var(--lav); } .bulk-bar { border-radius: 16px; background: var(--navy); color: #fff; box-shadow: none; } .tabs { border-bottom: 1px solid var(--line); gap: 4px; } .tab { font-weight: 700; border-radius: 10px 10px 0 0; } .tab.active { color: var(--purple-text); } .tab.active::after { height: 2px; background: var(--purple); bottom: -1px; border-radius: 0; } .tabs.pills .tab { background: var(--surface-2); box-shadow: none; } .tabs.pills .tab.active { background: var(--navy); color: #fff; } .vnav .nav-item { border-radius: 12px; } .vnav .nav-item.active { background: var(--lav); color: var(--purple-text); box-shadow: none; } /* overlays */ .modal, .drawer { border-radius: 20px; background: var(--surface); backdrop-filter: none; box-shadow: none; border: 1px solid var(--line); } .drawer { border-radius: 20px 0 0 20px; } .toast { background: var(--navy); color: #fff; box-shadow: none; border-radius: 12px; font-weight: 600; border: 0; backdrop-filter: none; } :root[data-theme="dark"] .toast { background: #EEF1FA; color: #101D3A; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toast { background: #EEF1FA; color: #101D3A; } } .toast .icon-btn { color: inherit; } .toast.success .t-icon { color: #5EDBA7; } .toast.error .t-icon { color: #FF8891; } .toast.warning .t-icon { color: #F8CB5E; } .toast.info .t-icon { color: #B9A3FF; } :root[data-theme="dark"] .toast.success .t-icon { color: #0E8A5C; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toast.success .t-icon { color: #0E8A5C; } } :root[data-theme="dark"] .toast.error .t-icon { color: #B9273A; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toast.error .t-icon { color: #B9273A; } } :root[data-theme="dark"] .toast.warning .t-icon { color: #9A6400; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toast.warning .t-icon { color: #9A6400; } } :root[data-theme="dark"] .toast.info .t-icon { color: #7138F5; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toast.info .t-icon { color: #7138F5; } } .toast .t-sub { opacity: 0.8; } .tip-bubble { background: var(--navy); box-shadow: none; } .palette { border-radius: 16px; box-shadow: var(--shadow-lg); background: var(--surface); backdrop-filter: none; border: 1px solid var(--line); } .palette-row:hover, .palette-row.active { background: var(--lav); } .chart-tip { background: var(--navy); color: #fff; box-shadow: none; border-radius: 10px; border: 0; } :root[data-theme="dark"] .chart-tip { background: #EEF1FA; color: #101D3A; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chart-tip { background: #EEF1FA; color: #101D3A; } } /* app shell */ .sidebar { background: var(--sidebar-bg); backdrop-filter: none; color: var(--sidebar-text); border-right: 1px solid var(--line); } .sidebar-brand { padding: 16px 16px 0 20px; height: auto; margin-bottom: 18px; } .sidebar-brand .logo-tile { width: auto; height: 40px; padding: 0; border-radius: 0; background: transparent; box-shadow: none; display: flex; align-items: center; } .sidebar-brand .logo-tile img { height: 36px; width: auto; } .sidebar-brand .wordmark { display: none; } .sidebar-brand .mascot-mini { display: none; } .collapsed .sidebar-brand .logo-tile img { display: none; } .collapsed .sidebar-brand .mascot-mini { display: inline-block; } .sidebar .nav-section { color: var(--text-3); font-size: 11px; } .sidebar .nav-item { color: var(--sidebar-text); border-radius: 12px; padding: 10px 14px; gap: 12px; font-weight: 700; } .sidebar .nav-item:hover { background: var(--surface-2); color: var(--text); } .sidebar .nav-item.active { background: var(--lav); color: var(--purple-text); box-shadow: none; transform: none; } .sidebar .nav-item .nav-ic { display: contents; } .sidebar .nav-item .count-badge { margin-left: auto; } .sidebar-org { display: none; } .mood-card { margin: 14px 12px 6px; padding: 16px; border-radius: 16px; background: var(--lemon); font-size: 13px; font-weight: 600; color: #6B5A1E; display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; box-shadow: none; } .mood-card.heart { background: var(--pink-t); color: #8A3D5B; } .mood-card.worried { background: var(--danger-bg); color: #7A2E36; } .mood-card.sleeping { background: var(--sky-100); color: #3A5B7A; } :root[data-theme="dark"] .mood-card, :root[data-theme="dark"] .mood-card.heart, :root[data-theme="dark"] .mood-card.worried, :root[data-theme="dark"] .mood-card.sleeping { color: var(--text-2); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mood-card, :root:not([data-theme="light"]) .mood-card.heart, :root:not([data-theme="light"]) .mood-card.worried, :root:not([data-theme="light"]) .mood-card.sleeping { color: var(--text-2); } } .mood-card b { color: var(--text); display: block; font-size: 14px; margin-bottom: 2px; font-weight: 800; } .collapsed .mood-card { grid-template-columns: 1fr; padding: 8px; margin: 10px 8px; } .collapsed .mood-card .mood-text { display: none; } .sidebar-foot { border-top: 0; } .topbar { background: transparent; border-bottom: 0; backdrop-filter: none; height: 76px; } /* Sticky top bar: content scrolls under it, so it needs its own (slightly frosted) background in both themes. */ .topbar { background: color-mix(in srgb, var(--bg) 97%, transparent); -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); } .topbar .search-trigger { border: 1px solid var(--line); border-radius: 12px; box-shadow: none; height: 44px; width: 360px; max-width: 34vw; font-weight: 600; color: var(--text-3); background: var(--surface); padding: 0 16px; } .topbar .search-trigger kbd { border: 0; background: var(--surface-2); color: var(--text-2); font-weight: 700; border-radius: 6px; padding: 3px 8px; } .topbar .icon-btn { border-radius: 50%; border: 1.5px solid var(--text); background: var(--surface); width: 42px; height: 42px; color: var(--text); box-shadow: none; } .topbar .icon-btn:hover { background: var(--surface-2); } .topbar .user-menu { border: 0 !important; } .topbar .user-menu .avatar { border-radius: 12px; background: var(--navy); color: #fff; width: 40px; height: 40px; border: 0; } :root[data-theme="dark"] .topbar .user-menu .avatar { background: #EEF1FA; color: #101D3A; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .topbar .user-menu .avatar { background: #EEF1FA; color: #101D3A; } } .org-switcher .trigger { border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: none; height: 42px; font-weight: 700; padding: 0 14px 0 6px; } .org-switcher .org-mark { background: var(--purple); border-radius: 8px; } .demo-ribbon { margin: 14px 24px 0; border-radius: 999px; background: var(--lav); color: var(--purple-text); box-shadow: none; width: fit-content; max-width: calc(100% - 48px); } .bottom-nav { background: var(--surface); backdrop-filter: none; border-top: 1px solid var(--line); } .bottom-nav a.compose .icon { background: var(--purple); box-shadow: none; } .avatar { border-radius: 10px; border: 0; } .avatar.sm { border-radius: 8px; } .avatar.xs { border-radius: 6px; } .plat-icon { border-radius: 10px !important; box-shadow: none; border: 0; } .plat-stack .plat-icon { border: 2px solid var(--surface); } .health-chip { border: 1px solid var(--line); box-shadow: none; background: var(--surface); font-weight: 700; } .client-dot { outline: 0; } .notif-item:hover { background: var(--lav); } /* skeleton / empty */ .skeleton { background: var(--surface-3); } .empty-state h3 { font-size: 20px; } .empty-state .mascot { margin-bottom: 10px; } .forbidden-panel .lock { background: var(--lemon); color: var(--warning-text); box-shadow: none; width: 44px; height: 44px; margin-top: -22px; border: 0; } .boot-loader .boot-dots span { opacity: 1; border: 0; } .boot-loader .boot-dots span:nth-child(2) { background: var(--pink); } .boot-loader .boot-dots span:nth-child(3) { background: var(--sun); } /* charts: flat */ .chart .series-line { stroke-width: 2.5; } .chart .grid line { stroke: var(--viz-grid); } .chart .axis line { stroke: var(--viz-axis); } .chart text { font-weight: 600; } .chart .bar { stroke: none; } .chart .bar-track { fill: var(--surface-2); } .chart .marker { stroke: var(--surface); stroke-width: 2; } .rating-bar .track { height: 10px; background: var(--surface-2); border: 0; } .rating-bar .fill { background: var(--pink); border-radius: 6px; } .rating-bar { font-weight: 700; } .legend-swatch, .legend-line { outline: 0; } .legend-swatch.hatched { background: repeating-linear-gradient(135deg, var(--viz-unavailable) 0 3px, #fff 3px 6px); border: 1px solid var(--line); } /* calendar */ .cal-grid { border: 1px solid var(--line); outline: 0; border-radius: 16px; background: var(--line); box-shadow: none; gap: 1px; } .cal-dow { background: var(--surface-2); color: var(--text-2); text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 700; } .cal-cell { background: var(--surface); } .cal-cell.other { background: var(--surface-2); } .cal-cell.today .cal-day { background: var(--purple); color: #fff; border: 0; } .cal-chip { border: 0; border-left: 4px solid var(--primary); border-radius: 8px; background: var(--surface-2); box-shadow: none; font-weight: 600; } .cal-chip:hover { transform: none; box-shadow: none; filter: none; background: var(--lav); } .cal-chip.published { opacity: 1; background: var(--mint-100); } .cal-chip.failed { background: var(--danger-bg); } .cal-week .cal-cell { border-radius: 12px; border: 1px solid var(--line); outline: 0; } .cal-cell .cal-add { background: var(--navy); color: #fff; border-radius: 8px; box-shadow: none; border: 0; } @media (max-width: 760px) { .cal-chip { box-shadow: none; height: 8px; background: var(--purple); } } /* reviews / posts / approvals */ .review-card { border: 1px solid var(--line); outline: 0; border-radius: 16px; box-shadow: none; background: var(--surface); backdrop-filter: none; position: relative; } .review-card.active { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple); outline: 0; } .review-card.unread { border-left: 1px solid var(--line); } .review-card.unread::before { content: 'new'; position: absolute; top: 14px; right: 56px; background: var(--lav); color: var(--purple-text); border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 700; transform: none; box-shadow: none; } .review-card .reply-box { background: var(--surface-2); border-left: 0; border: 0; border-radius: 12px; } .review-card .comment { font-weight: 600; font-size: 15px; } .rating-filter button { background: var(--surface-2); border-radius: 999px; box-shadow: none; font-weight: 700; border: 0; } .rating-filter button.active { background: var(--lemon); color: var(--warning-text); } .stars { color: #F5B81B; -webkit-text-stroke: 0; } .stars .off { color: var(--border-strong); -webkit-text-stroke: 0; } .variant-card, .override-card, .target-group, .approval-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .preview { border: 1px solid var(--line); outline: 0; border-radius: 14px; box-shadow: none; } .target-group .tg-head { background: var(--surface-2); border-bottom: 0; font-weight: 700; } .target-row { border-top: 1px solid var(--line); } .target-row.selected { background: var(--lav); } .target-row input, .target-locs input { accent-color: var(--purple); } .approval-card { border-radius: 16px; box-shadow: none; } .approval-card.selected { background: var(--lav); border-color: var(--purple); } .subject-box { background: var(--surface-2); border: 0; border-radius: 12px; } .error-box { border-radius: 10px; border: 0; } .status-timeline::before { background: var(--line); width: 2px; } .tl-item::before { border-color: var(--surface); } .media-thumb { border-radius: 12px; border: 1px solid var(--line); } .media-thumb.selected { border-color: var(--purple); box-shadow: 0 0 0 2px var(--purple); } .sticky-actions { border-top: 1px solid var(--line); background: var(--bg); backdrop-filter: none; } .token-reveal { background: var(--navy); color: #fff; border: 0; box-shadow: none; } :root[data-theme="dark"] .token-reveal { background: #EEF1FA; color: #101D3A; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .token-reveal { background: #EEF1FA; color: #101D3A; } } .copy-field { background: var(--surface-2); border: 0; } .context-pre { border: 0; } /* integrations */ .matrix-wrap { border: 1px solid var(--line); outline: 0; border-radius: 16px; box-shadow: none; background: var(--surface); } .matrix th { background: var(--surface-2); border-bottom: 1px solid var(--line); font-weight: 700; } .matrix th:first-child { background: var(--surface-2); } .matrix td:first-child { background: var(--surface); } .matrix td { border-bottom: 1px solid var(--line); } .cap-mark { border-radius: 10px; width: 30px; height: 30px; box-shadow: none; border: 0; } .cap-mark.supported { background: var(--mint-100); color: var(--success-text); } .cap-mark.pending_verification { background: var(--lemon); color: var(--warning-text); } .cap-mark.planned { background: var(--lav); color: var(--purple-text); } .cap-mark.unsupported { background: var(--surface-2); color: var(--text-3); } button.cap-mark:hover { transform: none; box-shadow: 0 0 0 2px var(--purple); } .cap-row { background: var(--surface-2); border: 0; } .req-list li::before { color: var(--purple); } /* ========================================================================== Sign in + sign up (pages/login.js, pages/signup.js, layout in pages/auth-ui.js) Desktop: the form column + an on-brand visual panel (gradient mesh, mascot, illustrative UI chips, rotating taglines). Phones (< 960px): one focused card. White-label (.auth-wl): agency logo / colours, no Postwoo mascot or copy. ========================================================================== */ .auth { --auth-panel: #F3EEFF; --auth-panel-2: #FFF1F6; --auth-blob-o: 0.55; --auth-dot: rgba(16, 29, 58, 0.09); --auth-halo: rgba(255, 255, 255, 0.95); --auth-chip: #FFFFFF; --auth-chip-line: rgba(16, 29, 58, 0.08); --auth-chip-shadow: 0 18px 40px -20px rgba(16, 29, 58, 0.32); --auth-field: var(--surface); --auth-card-shadow: 0 24px 60px -34px rgba(16, 29, 58, 0.38); --auth-glow-1: color-mix(in srgb, var(--primary) 22%, transparent); --auth-glow-2: color-mix(in srgb, var(--pink) 14%, transparent); min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); background: var(--surface); color: var(--text); } :root[data-theme="dark"] .auth { --auth-panel: #161E3C; --auth-panel-2: #0E1530; --auth-blob-o: 0.4; --auth-dot: rgba(255, 255, 255, 0.06); --auth-halo: color-mix(in srgb, var(--primary) 30%, transparent); --auth-chip: #1B2544; --auth-chip-line: rgba(255, 255, 255, 0.09); --auth-chip-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.8); --auth-field: #0E1629; --auth-card-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.85); --auth-glow-1: color-mix(in srgb, var(--primary) 28%, transparent); --auth-glow-2: color-mix(in srgb, var(--pink) 16%, transparent); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth { --auth-panel: #161E3C; --auth-panel-2: #0E1530; --auth-blob-o: 0.4; --auth-dot: rgba(255, 255, 255, 0.06); --auth-halo: color-mix(in srgb, var(--primary) 30%, transparent); --auth-chip: #1B2544; --auth-chip-line: rgba(255, 255, 255, 0.09); --auth-chip-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.8); --auth-field: #0E1629; --auth-card-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.85); --auth-glow-1: color-mix(in srgb, var(--primary) 28%, transparent); --auth-glow-2: color-mix(in srgb, var(--pink) 16%, transparent); } } /* form column */ .auth-main { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 28px clamp(24px, 5vw, 72px) 24px; } .auth-top { position: relative; z-index: 1; display: flex; align-items: center; min-height: 40px; } .auth-logo { display: inline-flex; align-items: center; } .auth-logo img.wordmark { display: block; height: 32px; width: auto; } .auth-logo.wl img { display: block; max-height: 40px; max-width: 200px; object-fit: contain; } .auth-wl-name { font-weight: 800; font-size: 22px; letter-spacing: -0.03em; color: var(--purple-text); } .auth-card { position: relative; z-index: 1; width: 100%; max-width: 420px; margin: auto; padding: 40px 0; animation: auth-rise 480ms var(--ease) both; } .auth-card-mascot { display: none; } .auth-head h1 { margin: 0; font-size: 38px; line-height: 1.06; letter-spacing: -0.045em; } .auth-lead { margin: 10px 0 28px; color: var(--text-2); font-weight: 600; font-size: 16px; line-height: 1.5; } .auth-form { display: flex; flex-direction: column; gap: 18px; } .auth-foot { position: relative; z-index: 1; display: flex; justify-content: center; } .auth-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 13px; font-weight: 600; } .auth-links a { color: var(--text-3); text-decoration: none; } .auth-links a:hover { color: var(--text); } /* fields: large, clear focus, inline errors */ .auth .field { gap: 8px; } .auth .field > label, .auth .label { font-size: 13px; color: var(--text); } .auth .input { min-height: 54px; padding: 12px 16px; font-size: 16px; border-width: 1.5px; border-radius: 14px; background: var(--auth-field); transition: border-color 140ms, box-shadow 140ms; } .auth .input:hover { border-color: var(--text-3); } .auth .input:focus { border-color: var(--purple); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent); } .auth .input.invalid { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(240, 78, 91, 0.12); } .auth .input-wrap.has-icon .input { padding-left: 46px; } .auth .input-wrap > .icon { left: 16px; transition: color 140ms; } .auth .input-wrap:focus-within > .icon { color: var(--purple-text); } .auth .input-wrap.trail-pad .input { padding-right: 54px; } .auth .input-wrap .trail { right: 8px; } .auth .input-wrap .trail .icon-btn { width: 38px; height: 38px; border-radius: 10px; } .auth .field-error { font-size: 13px; } .auth .alert { border-radius: 14px; } .auth .check { font-size: 14px; font-weight: 600; color: var(--text-2); align-items: center; } .auth .check input { width: 20px; height: 20px; margin: 0; } .auth .btn-lg { height: 54px; border-radius: 14px; font-size: 16px; } .auth .btn-primary { box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--primary) 80%, transparent); } .auth .btn-primary:active { transform: translateY(1px); } .auth .btn[aria-busy="true"] { cursor: progress; } .auth a:focus-visible, .auth button:focus-visible, .auth .btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; } .auth-pw { position: relative; } .auth-forgot { position: absolute; top: 0; right: 0; z-index: 1; font-size: 13px; font-weight: 700; line-height: 18px; color: var(--purple-text); text-decoration: none; } .auth-forgot:hover { text-decoration: underline; } .auth-note { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.5; } .auth-note.center, .auth-alt { text-align: center; } .auth-alt { margin: 0; } .auth-alt a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--purple-text); text-decoration: none; } .auth-switch { margin: 6px 0 0; padding: 16px; border-radius: 16px; background: var(--surface-2); color: var(--text-2); text-align: center; font-size: 15px; font-weight: 600; } .auth-switch a { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; font-weight: 800; color: var(--purple-text); text-decoration: none; } .auth-switch a:hover { text-decoration: underline; } .auth-demo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 0; color: var(--text-3); font-size: 13px; font-weight: 600; } .auth-demo .link-btn { font-size: 13px; } .auth .sso-block { gap: 12px; } .auth .btn.sso-btn.btn-secondary { height: 52px; border-radius: 14px; background: var(--surface); color: var(--text); border: 1.5px solid var(--border-strong); } .auth .btn.sso-btn.btn-secondary:hover { background: var(--surface-2); border-color: var(--text-3); } .auth .tf-step { gap: 16px; } .auth .tf-step .link-btn { font-size: 14px; } .auth .otp-box { height: 58px; } .auth-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .auth-terms .check { align-items: flex-start; line-height: 1.45; } .auth-terms .check a { font-weight: 700; color: var(--purple-text); } /* password strength hint */ .pw-meter { display: grid; gap: 8px; margin-top: 10px; } .pw-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .pw-bars span { height: 6px; border-radius: 999px; background: var(--surface-3); transition: background 220ms var(--ease); } .pw-meter.s1 .pw-bars span.on { background: var(--danger); } .pw-meter.s2 .pw-bars span.on { background: var(--warning); } .pw-meter.s3 .pw-bars span.on { background: #2BC48A; } .pw-meter.s4 .pw-bars span.on { background: var(--success); } .pw-text { display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--text-2); font-size: 13px; font-weight: 600; } .pw-text .pw-danger { color: var(--danger-text); } .pw-text .pw-warning { color: var(--warning-text); } .pw-text .pw-success { color: var(--success-text); } /* "check your inbox" */ .auth-sent-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--lav); color: var(--purple-text); } .auth-sent-text { margin: 0; color: var(--text-2); font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; } .auth-sent-text strong { color: var(--text); } .auth-steps { display: grid; gap: 12px; margin: 0; padding: 16px; list-style: none; border-radius: 16px; background: var(--surface-2); } .auth-steps li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; } .auth-steps span { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--purple-text); font-size: 13px; font-weight: 800; } /* visual panel */ .auth-aside { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center; margin: 14px; padding: 48px; border-radius: 32px; background: linear-gradient(160deg, var(--auth-panel) 0%, var(--auth-panel-2) 100%); } .auth-aside::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(var(--auth-dot) 1px, transparent 1.5px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%); mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%); } .auth-mesh { position: absolute; inset: 0; z-index: -2; pointer-events: none; } .auth-mesh span { position: absolute; border-radius: 50%; filter: blur(72px); opacity: var(--auth-blob-o); animation: auth-drift 18s ease-in-out infinite alternate; } .auth-mesh .m1 { width: 420px; height: 420px; top: -140px; right: -90px; background: #8E66FF; } .auth-mesh .m2 { width: 380px; height: 380px; bottom: -150px; left: -90px; background: #FF4F8B; opacity: calc(var(--auth-blob-o) * 0.75); animation-duration: 22s; animation-delay: -7s; } .auth-mesh .m3 { width: 260px; height: 260px; top: 34%; left: -70px; background: #4CE0B3; opacity: calc(var(--auth-blob-o) * 0.6); animation-duration: 26s; animation-delay: -3s; } .auth-mesh .m4 { width: 240px; height: 240px; bottom: 6%; right: -40px; background: #FFE66D; opacity: calc(var(--auth-blob-o) * 0.7); animation-duration: 20s; animation-delay: -11s; } .auth-aside-inner { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 520px; text-align: center; } .auth-stage { position: relative; width: 100%; max-width: 500px; height: 310px; margin-bottom: 26px; } .v-signup .auth-stage { height: 280px; margin-bottom: 20px; } .auth-halo { position: absolute; left: 50%; top: 50%; width: 250px; height: 250px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, var(--auth-halo), transparent 68%); } .auth-mascot { position: absolute; z-index: 1; left: 50%; top: 52%; transform: translate(-50%, -50%); } .auth-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border: 1px solid var(--auth-chip-line); border-radius: 16px; background: var(--auth-chip); box-shadow: var(--auth-chip-shadow); text-align: left; white-space: nowrap; animation: auth-float 7s ease-in-out infinite; } .auth-chip b { display: block; color: var(--text); font-size: 13px; font-weight: 800; } .auth-chip small { display: block; color: var(--text-2); font-size: 12px; font-weight: 600; } .auth-chip .ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; } .auth-chip .ic-purple { background: var(--lav); color: var(--purple-text); } .auth-chip .ic-pink { background: var(--pink-t); color: var(--pink-text); } .auth-chip .ic-mint { background: var(--mint-100); color: var(--success-text); } .auth-chip.c1 { left: 0; top: 4px; } .auth-chip.c2 { right: 0; top: 60%; animation-delay: -2.4s; } .auth-chip.c3 { left: 4%; bottom: 0; animation-delay: -4.6s; } .auth-aside h2 { max-width: 460px; margin: 0; color: var(--text); font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -0.045em; } .auth-rotator { display: flex; flex-direction: column; align-items: center; } .auth-tagline { max-width: 420px; min-height: 48px; margin: 12px 0 0; color: var(--text-2); font-size: 16px; font-weight: 600; line-height: 1.5; } .auth-dots { display: flex; gap: 6px; margin-top: 14px; } .auth-dots button { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--lav-2); cursor: pointer; transition: width 220ms var(--ease), background 220ms; } .auth-dots button::before { content: ''; position: absolute; inset: -8px -4px; } .auth-dots button.active { width: 24px; background: var(--purple); } .auth-perks { display: grid; gap: 10px; margin: 18px 0 4px; padding: 0; list-style: none; text-align: left; } .auth-perks li { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 15px; font-weight: 700; } .auth-perks li > .icon { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--purple); color: #fff; stroke-width: 3; } .auth-aside-inner.wl { gap: 14px; } .auth-wl-logo img { max-width: 260px; max-height: 96px; object-fit: contain; } .auth-wl-logo .auth-wl-name { font-size: 40px; } .auth-badge { margin: 12px 0 0; color: var(--text-3); font-size: 13px; font-weight: 600; } .auth-wl .auth-aside { background: linear-gradient(160deg, var(--lav) 0%, var(--surface-2) 100%); } .auth-wl .auth-mesh .m1 { background: var(--primary); } .auth-wl .auth-mesh .m2 { background: var(--pink); } .auth-wl .auth-mesh .m3, .auth-wl .auth-mesh .m4 { display: none; } /* the agency's primary colour in light and dark (the flat skin pins Postwoo purple on dark-mode buttons) */ .auth.auth-wl .btn.btn-primary { background: var(--primary); color: var(--primary-contrast); } .auth.auth-wl .btn.btn-primary:hover { background: var(--primary-hover); } /* motion (all of it switched off for prefers-reduced-motion) */ .auth-fade-enter-active, .auth-fade-leave-active { transition: opacity 260ms var(--ease), transform 260ms var(--ease); } .auth-fade-enter-from { opacity: 0; transform: translateY(6px); } .auth-fade-leave-to { opacity: 0; transform: translateY(-6px); } @keyframes auth-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes auth-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-36px, 28px, 0) scale(1.08); } } @keyframes auth-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .auth-card, .auth-chip, .auth-mesh span { animation: none !important; } .auth-fade-enter-active, .auth-fade-leave-active { transition: none; } } @media (max-width: 1180px) { .auth-chip.c3 { display: none; } .auth-aside { padding: 40px 32px; } } /* phones and small tablets: one focused card */ @media (max-width: 959px) { .auth { grid-template-columns: minmax(0, 1fr); background: var(--bg); } .auth-aside { display: none; } .auth-main { padding: 20px 16px 24px; } .auth-main::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 340px; pointer-events: none; background: radial-gradient(60% 80% at 15% 0%, var(--auth-glow-1), transparent 70%), radial-gradient(55% 70% at 95% 5%, var(--auth-glow-2), transparent 70%); } .auth-top { justify-content: center; } .auth-logo img.wordmark { height: 28px; } .auth-card { max-width: 460px; margin: 18px auto 0; padding: 26px 22px 24px; border: 1px solid var(--line); border-radius: 28px; background: var(--surface); box-shadow: var(--auth-card-shadow); } .auth-card-mascot { display: flex; justify-content: center; margin: -2px 0 8px; } .auth-head { text-align: center; } .auth-head h1 { font-size: 28px; } .auth-lead { margin: 8px 0 22px; font-size: 15px; } .auth-sent-icon { margin: 0 auto; } .auth-foot { margin-top: 22px; } } @media (max-width: 400px) { .auth-card { padding: 22px 18px 20px; border-radius: 24px; } .auth-switch { padding: 14px 12px; font-size: 14px; } } /* error pages */ .error-page { background: var(--bg); } .error-card { border-radius: 20px; box-shadow: none; background: var(--surface); border: 1px solid var(--line); backdrop-filter: none; } /* mascot (SVG, flat) */ .mascot-svg { display: inline-block; overflow: visible; } .mascot-svg .m-body, .mascot-svg .m-tuft { fill: var(--purple); } .mascot-svg .m-white { fill: #fff; } .mascot-svg .m-ink { fill: #101D3A; } .mascot-svg .m-pink { fill: var(--pink); } .mascot-svg .m-pink-shade { fill: rgba(0, 0, 0, 0.1); } .mascot-svg .m-line { fill: none; stroke: #101D3A; stroke-linecap: round; } .mascot-svg.shadow { filter: none; } .mascot-svg.bob { animation: bob 3.5s ease-in-out infinite; } .mascot-svg .m-z { font-family: var(--font); font-weight: 800; fill: #fff; animation: zz 2.4s ease-in-out infinite; } .mascot-svg .m-z:nth-of-type(2) { animation-delay: 0.6s; } @keyframes zz { 0% { opacity: 0; transform: translateY(0); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } } @media (prefers-reduced-motion: reduce) { .mascot-svg.bob, .mascot-svg .m-z { animation: none; } } /* mobile */ @media (max-width: 1024px) { .topbar .search-trigger { width: 44px; max-width: 44px; border-radius: 50%; padding: 0; } .demo-ribbon { margin: 10px 12px 0; } .page-header h1 { font-size: 28px; } } /* ========================================================================== Landing page (flat) ========================================================================== */ .lp { background: #FFFFFF; color: var(--text); font-size: 16px; overflow-x: hidden; } :root[data-theme="dark"] .lp { background: var(--bg); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp { background: var(--bg); } } .lp .wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; } .lp h1, .lp h2, .lp h3 { font-weight: 800; letter-spacing: -0.04em; } .lp-nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--line); } :root[data-theme="dark"] .lp-nav { background: rgba(11, 18, 32, 0.96); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-nav { background: rgba(11, 18, 32, 0.96); } } .lp-nav .wrap { display: flex; align-items: center; gap: 12px; height: 70px; } .lp-nav .brand img { height: 40px; width: auto; } .lp-nav .links { display: flex; gap: 28px; margin-left: auto; margin-right: 16px; font-weight: 700; font-size: 15px; } .lp-nav .links a { color: var(--text); } .lp-nav .links a:hover { color: var(--purple-text); text-decoration: none; } @media (max-width: 860px) { .lp-nav .links { display: none; } .lp-nav .cta { margin-left: auto; } } .lp-hero { padding: 72px 0 56px; } .lp-hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .lp-hero h1 { font-size: clamp(44px, 6.2vw, 72px); line-height: 1.02; letter-spacing: -0.045em; } .lp-hero h1 em { font-style: normal; color: var(--purple-text); } .lp-hero .lead { font-size: 20px; font-weight: 600; color: var(--text-2); max-width: 520px; margin: 24px 0 32px; line-height: 1.5; } .lp-hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .lp-hero .fine { font-size: 15px; color: var(--text-2); margin-top: 20px; font-weight: 600; } .shot { position: relative; padding: 36px 70px 70px 0; } .shot .ui { background: var(--surface-2); border: 1px solid var(--line); border-radius: 20px; padding: 18px; } :root[data-theme="dark"] .shot .ui { background: var(--surface-2); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shot .ui { background: var(--surface-2); } } .shot .uibar { display: flex; gap: 6px; margin-bottom: 14px; } .shot .uibar i { width: 10px; height: 10px; border-radius: 50%; background: #D9DBE6; display: block; } .shot .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; } .shot .tile { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 12px; font-weight: 700; color: var(--text-2); } .shot .tile b { display: block; font-size: 26px; color: var(--text); letter-spacing: -0.04em; margin-top: 4px; } .shot .tile.solid { background: var(--purple); border-color: var(--purple); color: rgba(255, 255, 255, 0.85); } .shot .tile.solid b { color: #fff; } .shot .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; } .shot .panel .ph { font-weight: 800; font-size: 14px; margin-bottom: 10px; letter-spacing: -0.02em; } .mini-bars { display: flex; align-items: flex-end; gap: 8px; height: 84px; } .mini-bars div { flex: 1; border-radius: 6px; background: var(--surface-2); position: relative; min-width: 0; } .mini-bars div b { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 6px; background: var(--purple); } .mini-bars div.hi b { background: var(--pink); } .mini-bars .hatch-demo { border-radius: 6px; } .shot .row { display: flex; align-items: center; gap: 10px; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--line); font-size: 13px; } .shot .row .t { font-weight: 700; } .shot .row .m { font-size: 11px; color: var(--text-2); font-weight: 600; } .shot .tag { position: absolute; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 9px 14px; font-weight: 700; font-size: 14px; white-space: nowrap; } .shot .tag.k { background: var(--pink-t); border-color: var(--pink-t); color: #8A3D5B; } .shot .tag.l { background: var(--lemon); border-color: var(--lemon); color: #6B5A1E; } .shot .tag.t1 { right: 20px; top: 8px; } .shot .tag.t2 { left: -10px; bottom: 100px; } .shot .peek { position: absolute; right: -10px; bottom: 0; } @media (max-width: 900px) { .lp-hero .wrap { grid-template-columns: 1fr; } .shot { padding: 20px 40px 60px 0; } .shot .tag.t1 { right: 0; top: -6px; } .shot .peek { right: -16px; } .shot .peek svg { width: 90px; height: 90px; } .lp-hero { padding-top: 40px; } } .lp-logos { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 0; background: var(--surface); } :root[data-theme="dark"] .lp-logos { background: var(--bg); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-logos { background: var(--bg); } } .lp-logos .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 24px; font-weight: 700; color: var(--text-2); font-size: 14px; } .lp-logos span { display: inline-flex; align-items: center; gap: 8px; } .lp-sec { padding: 80px 0; } .lp-sec .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .lp-sec.flip .wrap > .sec-visual { order: -1; } .lp-sec h2 { font-size: clamp(32px, 4vw, 44px); line-height: 1.05; } .lp-sec p { font-size: 18px; font-weight: 600; color: var(--text-2); line-height: 1.5; margin: 18px 0 22px; } .lp-sec ul { margin: 0 0 24px; display: grid; gap: 4px; font-weight: 600; font-size: 16px; } .lp-sec li { padding: 7px 0 7px 30px; position: relative; } .lp-sec li::before { content: ''; position: absolute; left: 0; top: 11px; width: 18px; height: 18px; border-radius: 50%; background: var(--purple); } .lp-sec li::after { content: ''; position: absolute; left: 5px; top: 16px; width: 8px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); } .lp-sec.lav { background: var(--lav); } .lp-sec.pinkbg { background: var(--pink-t); } .lp-sec.lemonbg { background: var(--lemon); } .lp-sec.skybg { background: var(--sky-100); } .lp-sec.mintbg { background: var(--mint-100); } .lp-sec .sec-visual .card { background: var(--surface); } @media (max-width: 860px) { .lp-sec { padding: 56px 0; } .lp-sec .wrap { grid-template-columns: 1fr; gap: 28px; } .lp-sec.flip .wrap > .sec-visual { order: 0; } } .mini-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .mini-cal .d { border: 1px solid var(--line); border-radius: 10px; min-height: 76px; padding: 6px; font-size: 11px; font-weight: 700; color: var(--text-3); display: grid; align-content: start; gap: 4px; } .mini-cal .d.today { border-color: var(--purple); color: var(--text); } .mini-cal .ev { border-radius: 6px; padding: 3px 5px; font-size: 10px; font-weight: 700; } .lp-stats { padding: 40px 0 72px; } .lp-stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .lp-stats .card { padding: 26px; } .lp-stats .n { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; } .lp-stats .m { font-size: 14px; margin-top: 6px; color: var(--text-2); font-weight: 600; } @media (max-width: 860px) { .lp-stats .wrap { grid-template-columns: 1fr 1fr; } } .lp-cta { padding: 0 0 72px; } .lp-cta .box { background: var(--navy); color: #fff; border-radius: 24px; padding: 56px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .lp-cta h2 { font-size: clamp(30px, 3.6vw, 40px); max-width: 560px; line-height: 1.1; } .lp-cta .btn-ghost { background: #fff; color: #101D3A; border-color: #fff; } @media (max-width: 640px) { .lp-cta .box { padding: 36px 24px; } } .lp-faq { padding: 0 0 72px; } .faq { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; } .faq details { background: var(--surface); border-radius: 16px; padding: 4px 22px; border: 1px solid var(--line); } .faq summary { cursor: pointer; font-weight: 800; font-size: 16px; padding: 16px 0; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; letter-spacing: -0.02em; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--purple-text); } .faq details[open] summary::after { content: '–'; } .faq p { color: var(--text-2); padding-bottom: 18px; line-height: 1.6; font-size: 15px; font-weight: 600; } .lp-section { padding: 72px 0; } .lp .head-center { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 36px; } .lp .sub { font-size: 17px; color: var(--text-2); margin-top: 12px; max-width: 640px; line-height: 1.55; font-weight: 600; } .lp-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--purple-text); margin-bottom: 12px; } .honesty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .honesty .hcard { border-radius: 16px; padding: 24px; background: var(--surface); border: 1px solid var(--line); } .honesty .hcard .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; font-size: 18px; font-weight: 800; } .honesty .hcard h4 { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; } .honesty .hcard p { color: var(--text-2); font-size: 14px; margin-top: 6px; line-height: 1.55; font-weight: 600; } @media (max-width: 860px) { .honesty { grid-template-columns: 1fr; } } .lp-footer { padding: 30px 0 60px; color: var(--text-3); font-size: 14px; font-weight: 600; border-top: 1px solid var(--line); } .lp-footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; } .lp-footer a { color: inherit; font-weight: 700; } .lp-footer .cols { display: flex; gap: 20px; flex-wrap: wrap; } .logo-wordmark { font-weight: 800; letter-spacing: -0.03em; color: var(--text); } .logo-wordmark em { font-style: normal; color: var(--purple-text); } .reveal { opacity: 1; transform: none; } .hatch-demo { background: repeating-linear-gradient(135deg, #E6E8F0 0 4px, #fff 4px 8px); } /* ========================================================================== Social layer — feed, stories, stickers, hearts, rail, love inbox. ========================================================================== */ :root { --lemon: #FFE66D; --lemon-t: #FFF6C7; --mint: #4CE0B3; --mint-t: #E3F8EF; --sky: #5BC8FF; --sky-t: #E6F3FF; --sun-100: #FFF6C7; --warning-bg: #FFF6C7; } :root[data-theme="dark"] { --lemon-t: rgba(255, 230, 109, 0.14); --mint-t: rgba(76, 224, 179, 0.14); --sky-t: rgba(91, 200, 255, 0.14); --sun-100: rgba(255, 230, 109, 0.14); --warning-bg: rgba(255, 230, 109, 0.14); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lemon-t: rgba(255, 230, 109, 0.14); --mint-t: rgba(76, 224, 179, 0.14); --sky-t: rgba(91, 200, 255, 0.14); --sun-100: rgba(255, 230, 109, 0.14); --warning-bg: rgba(255, 230, 109, 0.14); } } /* die-cut stickers */ .stk { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 12px; font-weight: 800; font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; border: 3px solid #fff; box-shadow: 0 2px 0 rgba(16, 29, 58, 0.18), 0 0 0 1px rgba(16, 29, 58, 0.06); line-height: 1.1; white-space: nowrap; } .stk.sm { padding: 4px 9px; font-size: 11px; border-width: 2px; border-radius: 9px; } .stk-purple { background: var(--purple); color: #fff; } .stk-pink { background: var(--pink); color: #fff; } .stk-lemon { background: #FFE66D; color: #101D3A; } .stk-mint { background: var(--mint); color: #101D3A; } .stk-navy { background: var(--navy); color: #fff; } .stk-sky { background: var(--sky); color: #101D3A; } .stk-white { background: #fff; color: #101D3A; } button.stk { cursor: pointer; } button.stk:hover { filter: brightness(0.97); } :root[data-theme="dark"] .stk { border-color: #121A2E; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stk { border-color: #121A2E; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08); } } :root[data-theme="dark"] .stk-white { background: #192238; color: #EEF1FA; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stk-white { background: #192238; color: #EEF1FA; } } @media (prefers-reduced-motion: reduce) { .stk { transform: none !important; } } .heart-svg { display: inline-block; vertical-align: middle; overflow: visible; flex: none; } /* feed layout */ .feed-layout { display: grid; grid-template-columns: minmax(0, 760px) 340px; gap: 22px; justify-content: center; align-items: start; } .feed-main { min-width: 0; } .feed-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--topbar-h) + 12px); } @media (max-width: 1200px) { .feed-layout { grid-template-columns: minmax(0, 760px); } .feed-rail { position: static; } } .feed-head h1 { font-size: 28px; } .stories { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 14px; scrollbar-width: none; } .stories::-webkit-scrollbar { display: none; } .story { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--text-2); width: 72px; flex: none; background: none; border: 0; cursor: pointer; padding: 0; } .story .name { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .story .ring { width: 64px; height: 64px; border-radius: 50%; padding: 3px; background: var(--border-strong); transition: transform var(--dur); } .story:hover .ring { transform: translateY(-2px); } .story .ring > span { width: 100%; height: 100%; border-radius: 50%; background: #fff; border: 3px solid var(--surface); display: grid; place-items: center; font-weight: 800; font-size: 17px; color: #fff; } .story.add .ring { background: var(--purple); } .story.add .ring > span { background: var(--surface); color: var(--purple-text); font-size: 26px; } .story.active .name { color: var(--purple-text); } .story.active .ring { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--navy); } .feed-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .feed-tabs button { height: 36px; padding: 0 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; font-size: 13px; color: var(--text); } .feed-tabs button.active { background: var(--navy); color: #fff; border-color: var(--navy); } :root[data-theme="dark"] .feed-tabs button.active { background: #EEF1FA; color: #101D3A; border-color: #EEF1FA; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .feed-tabs button.active { background: #EEF1FA; color: #101D3A; border-color: #EEF1FA; } } /* post card */ .post { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; margin-bottom: 18px; position: relative; } .post-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; } .post-head .who { font-weight: 800; font-size: 15px; } .post-head .meta { color: var(--text-2); font-size: 12px; font-weight: 600; } .post-head .plats { margin-left: auto; } .post-body { padding: 0 18px 12px; font-weight: 600; font-size: 15px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .post-media { margin: 0 18px; min-height: 220px; max-height: 320px; border-radius: 16px; position: relative; overflow: hidden; background: var(--surface-2); } .post-media img { width: 100%; height: 100%; max-height: 320px; object-fit: cover; display: block; } .post-media .stk { position: absolute; } .post-media .stk.tl { left: 16px; top: 16px; } .post-media .stk.tr { right: 16px; top: 16px; } .post-media .stk.br { right: 16px; bottom: 16px; } .post-media .stk.bl { left: 16px; bottom: 16px; } .post-media .deco-heart { position: absolute; right: 26px; top: 22px; } .post-react { display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px; font-weight: 700; font-size: 14px; color: var(--text); flex-wrap: wrap; } .post-react .r { display: inline-flex; align-items: center; gap: 6px; } .post-react .r .icon { color: var(--text); } .post-react .right { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } .post-react .state { color: var(--text-2); font-weight: 700; } .post-tags { padding: 0 18px 16px; display: flex; gap: 8px; flex-wrap: wrap; } .post-tags a, .post-tags span { color: var(--purple-text); font-weight: 700; font-size: 13px; text-decoration: none; } .post-foot-note { margin-left: auto; color: var(--text-3); font-size: 12px; font-weight: 600; } .post.woo-post { background: var(--lemon-t); border-color: var(--lemon-t); } .post.woo-post .post-body { font-weight: 600; } .post.woo-post .acts { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 18px 18px; } .woo-badge { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: 999px; border: 1.5px solid var(--purple); color: var(--purple-text); font-size: 10px; font-weight: 800; letter-spacing: 0.04em; margin-left: 6px; } .feed-empty { padding: 40px 20px; } /* rail cards */ .rail-card { padding: 18px 20px; } .rail-card .rc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .rail-card .rc-head h3 { font-size: 16px; } .rail-card .rc-head a { font-size: 13px; font-weight: 700; color: var(--purple-text); } .rail-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); } .rail-row:first-of-type { border-top: 0; padding-top: 0; } .rail-row .t { font-weight: 800; font-size: 14px; } .rail-row .m { color: var(--text-2); font-size: 12px; font-weight: 600; } .rail-row .grow { min-width: 0; } .big-rating { display: flex; align-items: center; gap: 10px; font-size: 34px; font-weight: 800; letter-spacing: -0.04em; margin-top: 10px; } .big-rating small { font-size: 13px; color: var(--text-2); font-weight: 600; letter-spacing: 0; } .rail-card.lav { background: var(--lav); border-color: var(--lav); } .rail-card.pinkbg { background: var(--pink-t); border-color: var(--pink-t); text-align: center; } .rail-card.pinkbg .n { font-size: 44px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin: 6px 0 4px; } .week-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 10px; } .week-stats b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; } .week-stats span { font-size: 11px; color: var(--text-2); font-weight: 600; } .week-stats .pink b { color: var(--pink); } .follow { height: 30px; padding: 0 12px; border-radius: 999px; font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; } .follow.connect { background: var(--navy); color: #fff; } .follow.connected { background: var(--lav); color: var(--purple-text); } .follow.reconnect { background: var(--pink); color: #fff; } :root[data-theme="dark"] .follow.connect { background: #EEF1FA; color: #101D3A; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .follow.connect { background: #EEF1FA; color: #101D3A; } } .follow:hover { text-decoration: none; filter: brightness(0.96); } /* floating create button (mobile) */ .fab { display: none; } @media (max-width: 1024px) { .fab { display: grid; place-items: center; position: fixed; right: 18px; bottom: calc(var(--bottom-nav-h) + 16px); width: 56px; height: 56px; border-radius: 50%; background: var(--pink); color: #fff; z-index: 36; text-decoration: none; } .fab:hover { text-decoration: none; } } /* love inbox */ .love-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; } @media (max-width: 1100px) { .love-layout { grid-template-columns: 1fr; } } .love-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--topbar-h) + 12px); } @media (max-width: 1100px) { .love-rail { position: static; } } .dm-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; display: grid; gap: 12px; } .dm-card.active { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple); } .dm-card .corner { position: absolute; top: -12px; right: 18px; } .dm-card .dm-head { display: flex; align-items: center; gap: 12px; } .dm-card .dm-head .who { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .dm-card .dm-head .meta { color: var(--text-2); font-size: 12px; font-weight: 600; } .dm-card .comment { font-weight: 600; font-size: 15px; line-height: 1.5; white-space: pre-wrap; } .dm-reply { background: var(--surface-2); border-radius: 14px; padding: 12px 14px; display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; } .dm-reply.pending { background: var(--lemon-t); } .dm-reply .rh { color: var(--text-2); font-size: 12px; font-weight: 600; margin-bottom: 2px; } .dm-reply .rb { font-weight: 600; font-size: 14px; white-space: pre-wrap; } .dm-reply .ra { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; } .quick-replies { display: flex; gap: 8px; flex-wrap: wrap; } .quick-replies button { height: 30px; padding: 0 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; font-size: 12px; color: var(--text); } .quick-replies button:hover { background: var(--lav); } .reply-stickers { display: flex; gap: 10px 8px; flex-wrap: wrap; padding: 4px 0 8px; } .by-location .rail-row { padding: 8px 0; } /* landing social bits */ .lp .hero-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; } .lp-hero h1 em.p { color: var(--purple-text); } .lp-hero h1 em.k { color: var(--pink); } .phone { position: relative; padding: 24px 40px 40px 20px; } .phone .screen { background: var(--surface-2); border: 1px solid var(--line); border-radius: 28px; padding: 14px; max-width: 420px; margin-left: auto; } .phone .post { margin-bottom: 12px; border-radius: 18px; } .phone .post-head { padding: 12px 14px 8px; } .phone .post-body { padding: 0 14px 10px; font-size: 13px; } .phone .post-media { margin: 0 14px; min-height: 120px; max-height: 140px; } .phone .post-react { padding: 10px 14px 12px; font-size: 12px; gap: 12px; } .phone .float { position: absolute; } .phone .float.stk { transform: rotate(-4deg); } .phone .f1 { right: 0; top: 10px; } .phone .f2 { right: -6px; top: 160px; transform: rotate(4deg); } .phone .f3 { left: -10px; bottom: 150px; } .phone .h1 { left: -6px; top: 40px; } .phone .h2 { right: 70px; top: 90px; } .phone .h3 { right: 20px; bottom: 170px; } .phone .peek { position: absolute; right: -30px; bottom: -10px; } @media (max-width: 900px) { .phone { padding: 10px 30px 30px 10px; } .phone .float { display: none; } .phone .peek { right: -16px; } .phone .peek svg { width: 90px; height: 90px; } .phone .screen { margin: 0 auto; } } .lp-sec .sec-label { margin-bottom: 18px; display: inline-flex; } .lp-cta .heart-stk { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); } .lp-cta .box { position: relative; } /* landing footer (matches marketing footer) */ .lp-footer .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; align-items: start; } .lp-footer .footer-brand p { margin-top: 10px; max-width: 320px; line-height: 1.5; } .lp-footer h4 { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 10px; letter-spacing: -0.01em; } .lp-footer ul { display: grid; gap: 6px; } .lp-footer ul a { font-weight: 600; color: var(--text-2); } .lp-footer ul a:hover { color: var(--purple-text); text-decoration: none; } .lp-footer .footer-bottom { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; } @media (max-width: 860px) { .lp-footer .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .lp-footer .footer-grid { grid-template-columns: 1fr; } } .notif-item .sev-success { background: var(--success); } .lp-footer .footer-bottom { display: block; } .lp-footer .footer-bottom a { margin: 0 2px; } @media (max-width: 760px) { .fab { display: none; } } /* ── ai-assistant (Woo drafts, you approve) ── */ .ai-tool { display: inline-flex; align-items: center; } .ai-tool .tip { display: inline-flex; } .ai-tones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .ai-tone { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 700; font-size: 13px; transition: background var(--dur), border-color var(--dur); } .ai-tone:hover:not(:disabled) { background: var(--lav); } .ai-tone.active { background: var(--purple); border-color: var(--purple); color: var(--primary-contrast, #fff); } .ai-tone:disabled { opacity: 0.6; cursor: default; } .ai-controls { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 12px 14px; align-items: start; } .ai-controls-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 130px; } .ai-controls-3 > :last-child { grid-column: 1 / -1; } @media (max-width: 640px) { .ai-controls, .ai-controls-3 { grid-template-columns: 1fr; } } .ai-variants, .ai-ideas { display: grid; gap: 12px; } .ai-ideas { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .ai-variant, .ai-idea { display: grid; gap: 10px; padding: 14px 16px 14px 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); position: relative; } .ai-variant::before, .ai-idea::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--purple); } .ai-idea::before { background: var(--pink); } .ai-variant-head, .ai-idea-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ai-idea-head h4 { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; margin: 0; } .ai-variant-text, .ai-idea-body { white-space: pre-wrap; line-height: 1.55; font-size: 14px; margin: 0; } .ai-idea-img { display: flex; align-items: flex-start; gap: 6px; font-style: italic; } .ai-disclaimer { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-2); } .ai-disclaimer code { font-family: var(--mono); font-size: 11px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; } .ai-preview { display: grid; gap: 8px; } .ai-preview-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; font-size: 13px; padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-2); } .ai-preview-row .k { font-weight: 800; color: var(--text-2); } .ai-preview-row .v { white-space: pre-wrap; font-weight: 600; } @media (max-width: 520px) { .ai-preview-row { grid-template-columns: 1fr; gap: 2px; } } .ai-usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; } /* ── queues (S5: evergreen queues & content categories) ── */ .qz-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; } .qz-side { display: grid; gap: 14px; position: sticky; top: 72px; } .qz-client-head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); padding: 0 6px 6px; } .qz-cat { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 10px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); cursor: pointer; color: inherit; transition: background var(--dur), border-color var(--dur), transform var(--dur); } .qz-cat + .qz-cat { margin-top: 6px; } .qz-cat:hover { background: var(--surface-2); transform: translateX(1px); } .qz-cat.active { border-color: var(--qz-color); box-shadow: inset 3px 0 0 var(--qz-color); } .qz-cat.paused { opacity: 0.75; } .qz-cat .swatch, .qz-swatch { width: 14px; height: 14px; border-radius: 5px; background: var(--qz-color); flex: none; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(16, 29, 58, 0.12); } .qz-cat .main { flex: 1; min-width: 0; display: grid; } .qz-cat .name { font-weight: 800; font-size: 13px; } .qz-cat .sub { font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qz-main { min-width: 0; } .qz-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .qz-head h2 { font-size: 20px; } /* slot grid */ .qz-grid { display: grid; grid-template-columns: 72px repeat(7, minmax(0, 1fr)); gap: 4px; } .qz-dow { text-align: center; font-size: 11px; font-weight: 800; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 0; } .qz-time { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 12px; font-weight: 800; color: var(--text-2); padding: 0 6px; font-variant-numeric: tabular-nums; } .qz-time .x { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--text-3); } .qz-time .x:hover { background: var(--surface-2); color: var(--danger); } .qz-cell { min-height: 34px; border-radius: 8px; border: 1px dashed var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--text-3); transition: background var(--dur), border-color var(--dur); } .qz-cell:hover:not(:disabled) { border-color: var(--qz-color); background: var(--surface-2); } .qz-cell.on { border-style: solid; border-color: var(--qz-color); background: color-mix(in srgb, var(--qz-color) 14%, var(--surface)); } .qz-cell.ro { cursor: default; } .qz-cell.ro:not(.on) { border-color: transparent; background: var(--surface-2); } .qz-cell .qz-plus { opacity: 0; font-weight: 800; } .qz-cell:hover:not(:disabled) .qz-plus { opacity: 1; } .qz-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; color: var(--text); } .qz-empty-row { grid-column: 1 / -1; padding: 14px; text-align: center; color: var(--text-3); font-size: 13px; font-weight: 600; border: 1px dashed var(--line); border-radius: 8px; } .qz-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .qz-daychk { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--text-2); } .qz-daychk input { accent-color: var(--primary); } /* item stickers */ .qz-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; } .qz-item { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--qz-color); border-radius: var(--r-md); padding: 12px 14px; display: grid; gap: 8px; box-shadow: 0 2px 0 rgba(16, 29, 58, 0.06); } .qz-item.off { opacity: 0.6; border-left-style: dashed; } .qz-item.cooling { border-left-color: var(--sky); } .qz-item-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .qz-body { margin: 0; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; } .qz-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .qz-meta .pill { font-weight: 700; } /* media picker */ .qz-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; margin-top: 6px; } .qz-thumb { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: var(--surface-2); padding: 0; cursor: pointer; } .qz-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .qz-thumb .qz-file { display: grid; place-items: center; width: 100%; height: 100%; color: var(--text-3); } .qz-thumb.on { border-color: var(--primary); } .qz-thumb .tick { position: absolute; right: 4px; top: 4px; color: #fff; background: var(--primary); border-radius: 50%; } /* plan */ .qz-plan { display: grid; gap: 10px; } .qz-day { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .qz-day-head { display: flex; gap: 8px; align-items: baseline; padding: 8px 12px; background: var(--surface-2); font-size: 12px; } .qz-plan-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 13px; } .qz-plan-row .time { width: 48px; font-weight: 800; color: var(--text-2); } .qz-plan-row .what { flex: 1; min-width: 0; } .qz-plan-row.failed { background: color-mix(in srgb, var(--danger) 6%, transparent); } .qz-plan-row.skipped_no_items .what { font-style: italic; } /* calendar chip marker */ .cal-chip .cal-recycle { color: var(--mint-text, #0f8a62); } @media (max-width: 960px) { .qz-layout { grid-template-columns: 1fr; } .qz-side { position: static; } } @media (max-width: 640px) { .qz-grid { grid-template-columns: 56px repeat(7, minmax(0, 1fr)); gap: 2px; } .qz-chip { font-size: 9px; } .qz-items { grid-template-columns: 1fr; } } /* ── reports (client-facing reports, S4) ── */ .rpt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; } @media (max-width: 1100px) { .rpt-layout { grid-template-columns: 1fr; } } .rpt-side { position: sticky; top: calc(var(--topbar-h, 56px) + 16px); } @media (max-width: 1100px) { .rpt-side { position: static; } } .rpt-doc { display: flex; flex-direction: column; gap: 18px; } .rpt-doc .rpt-head { border-radius: 22px; } .rpt-dot { width: 36px; height: 36px; border-radius: 50% 50% 50% 18%; display: inline-block; flex: none; } .rpt-title { font-size: 28px; letter-spacing: -0.03em; margin: 6px 0 2px; } .rpt-section h3 { font-size: 16px; margin: 0 0 10px; } .rpt-section .card h3 { margin: 0; } .rpt-notes { background: var(--warning-bg); border-radius: 18px; padding: 16px 20px; } .rpt-notes p { margin: 0; font-weight: 600; white-space: pre-line; } .rpt-caveats { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 2px; } .rpt-caveats strong { color: var(--text-2); } .rpt-table td { vertical-align: top; } .rpt-posts { display: grid; gap: 10px; } .rpt-post { display: flex; gap: 14px; } .rpt-rank { width: 32px; height: 32px; border-radius: 50% 50% 50% 18%; background: var(--purple); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; } .rpt-quote { margin: 0 0 12px; padding: 12px 14px; background: var(--surface-2); border-radius: 14px; font-weight: 600; } .rpt-quote p { margin: 4px 0 6px; } .rpt-fine { color: var(--text-2); } .rpt-fine ul { margin: 0; padding-left: 18px; font-weight: 600; } .rpt-fine li { margin-bottom: 4px; } .rpt-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; } .rpt-section-opt { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .rpt-section-opt input { accent-color: var(--purple); } .chip.rpt-lav { background: var(--purple-100); color: var(--purple-700); } .mono { font-family: var(--mono); font-size: 12px; } /* ── multi-location publishing (merge fields, location multi-select, per-location preview) ── */ .mf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 8px; } .mf-label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--text-3); } .mf-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--purple); font-size: 12px; font-weight: 700; cursor: pointer; list-style: none; } .mf-chip:hover { background: var(--lav); border-color: var(--lav); } .mf-chip:focus-visible { box-shadow: var(--focus-ring); outline: none; } .mf-more { position: relative; } .mf-more summary::-webkit-details-marker { display: none; } .mf-menu { position: absolute; z-index: 30; top: 30px; left: 0; width: min(460px, 92vw); max-height: 320px; overflow: auto; padding: 10px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-raised); box-shadow: var(--shadow-lg); display: grid; gap: 2px; } .mf-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 6px 8px; border-radius: 8px; border: 0; background: transparent; font-size: 12px; cursor: pointer; color: var(--text); } .mf-row:hover { background: var(--surface-2); } .mf-row code { font-size: 11px; color: var(--purple); font-weight: 700; white-space: nowrap; } .target-locs .tl-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 6px 6px; } .target-locs label.opted-out { opacity: 0.6; } .target-locs .link-btn, .link-btn { border: 0; background: none; padding: 0; color: var(--purple); font-weight: 700; font-size: 12px; cursor: pointer; } .link-btn:hover { text-decoration: underline; } .mf-preview-list { display: grid; gap: 10px; } .mf-preview-item { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; background: var(--surface); } .mf-preview-item.bad { border-color: var(--danger-bg); background: color-mix(in srgb, var(--danger-bg) 35%, var(--surface)); } .mf-pi-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .mf-pi-body { white-space: pre-wrap; font-size: 14px; line-height: 1.5; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); } .variant-rendered { margin-top: 8px; padding: 8px 10px; border-radius: 8px; border: 1px dashed var(--line); background: var(--surface); white-space: pre-wrap; font-size: 13px; line-height: 1.5; } /* ── pwa-and-push ── */ .push-devices { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .push-devices li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); } .push-devices li .icon { color: var(--purple); flex: 0 0 auto; } .push-card .switch { width: 100%; } /* ── review requests (S8: Get reviews — links, QR codes, feedback inbox) ── */ .rq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; } .rq-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; } .rq-card.paused { opacity: .72; } .rq-top { display: flex; gap: 16px; align-items: flex-start; min-width: 0; } .rq-qr { flex: none; width: 112px; height: 112px; border-radius: 14px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; overflow: hidden; padding: 6px; box-shadow: inset 0 0 0 3px var(--rq-accent, var(--purple)); } .rq-qr-svg svg { width: 100%; height: 100%; display: block; } .rq-qr-svg { display: block; width: 100%; height: 100%; } .rq-qr-ph { color: var(--text-3); } .rq-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; } .rq-client { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-2); min-width: 0; } .rq-title { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; display: flex; align-items: center; min-width: 0; } .rq-url { display: flex; align-items: center; gap: 6px; min-width: 0; } .rq-url code { font-size: 12px; font-weight: 700; background: var(--surface-2); border-radius: 8px; padding: 4px 8px; min-width: 0; color: var(--purple-text); } .rq-stats { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-top: 6px; } .rq-stats > div { display: flex; flex-direction: column; line-height: 1.1; } .rq-stats b { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .rq-stats span { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; } .rq-spark { margin-left: auto; } .rq-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; } .rq-actions .switch { margin: 0; } .rq-target { border: 1px dashed var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 10px; background: var(--surface-2); } .rq-target.ok { border-style: solid; border-color: var(--success); background: var(--success-bg, var(--surface-2)); } .rq-derived { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--success-text, var(--text-2)); min-width: 0; } .rq-derived code { font-weight: 600; word-break: break-all; color: var(--text-2); } .rq-logos { display: flex; gap: 8px; flex-wrap: wrap; } .rq-logo-opt { width: 64px; height: 64px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); padding: 4px; display: grid; place-items: center; cursor: pointer; overflow: hidden; } .rq-logo-opt img { max-width: 100%; max-height: 100%; object-fit: contain; } .rq-logo-opt.selected { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-100); } .rq-logo-none { font-size: 11px; font-weight: 800; color: var(--text-3); text-transform: uppercase; } .rq-switches { display: grid; gap: 12px; } .rq-feedback { display: grid; gap: 10px; } .rq-fb { padding: 14px 16px; } .rq-fb.handled { opacity: .7; } .rq-fb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rq-fb-msg { margin: 8px 0 6px; font-weight: 600; white-space: pre-wrap; } @media (max-width: 640px) { .rq-grid { grid-template-columns: 1fr; } .rq-top { flex-direction: column; } .rq-qr { width: 140px; height: 140px; } } /* ── S10 billing + CSV import (Settings tabs) ── */ .billing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .billing-plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .billing-plan-name { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; } .billing-trial { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); font-size: 13px; } .billing-tab .kv { margin-top: 12px; } .billing-limits { display: grid; gap: 14px; } .billing-limit .progress { margin-top: 6px; height: 8px; } .billing-limit.exceeded .progress .bar { background: var(--danger-text); } .billing-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .billing-plan-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); } .billing-plan-card.current { border-color: var(--purple); box-shadow: 0 0 0 2px var(--lav); } .billing-plan-limits { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 4px; color: var(--text-2); } .import-mapping { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; } .import-col { min-width: 160px; flex: 1 0 160px; display: grid; gap: 6px; } .import-col-head { font-size: 12px; font-weight: 700; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 6px 8px; background: var(--surface-2); border-radius: var(--r-sm); } .import-counts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .import-count { display: flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12px; background: var(--surface-2); color: var(--text-2); } .import-count strong { font-size: 15px; } .import-count.ok { background: var(--success-bg); color: var(--success-text); } .import-count.warning { background: var(--warning-bg); color: var(--warning-text); } .import-count.error { background: var(--danger-bg); color: var(--danger-text); } .import-messages { margin: 0; padding-left: 14px; display: grid; gap: 2px; } .import-messages li.error { color: var(--danger-text); } .import-messages li.warning { color: var(--warning-text); } .import-messages li.info { color: var(--text-2); } @media (max-width: 900px) { .billing-grid, .billing-plans { grid-template-columns: 1fr; } } /* ── brand kit + image templates (S7) ── */ .bk-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: 16px; align-items: start; } .bk-side { position: sticky; top: 76px; } .bk-color-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bk-swatch { position: relative; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); box-shadow: inset 0 0 0 2px var(--surface); cursor: pointer; flex: 0 0 auto; overflow: hidden; } .bk-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; } .bk-hex { width: 108px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.04em; } .bk-presets { display: flex; gap: 5px; flex-wrap: wrap; } .bk-preset { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; transition: transform var(--dur); } .bk-preset:hover { transform: scale(1.15); } .bk-preset.on { box-shadow: 0 0 0 2px var(--text); } .bk-strip { display: flex; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); } .bk-strip-cell { flex: 1; display: grid; place-items: center; height: 44px; font-weight: 800; font-size: 15px; } .bk-logo-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; } .bk-logo-box { width: 160px; height: 110px; border-radius: 14px; display: grid; place-items: center; padding: 14px; flex: 0 0 auto; border: 1px solid var(--line); } .bk-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; } .bk-groups { display: grid; gap: 10px; } .bk-group { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: var(--surface-2); } .bk-group-name { max-width: 240px; font-weight: 700; } .bk-chips { min-height: 34px; align-items: center; cursor: text; } .bk-chip-input { flex: 1; min-width: 120px; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--text); padding: 4px 2px; outline: none; } .bk-chip-input::placeholder { color: var(--text-3); } .bk-utm-sample { display: flex; align-items: center; gap: 6px; min-width: 0; } .bk-tpl-list { display: grid; gap: 6px; } .bk-tpl { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer; font: inherit; } .bk-tpl:hover { background: var(--surface-2); } .bk-tpl.on { border-color: var(--primary); background: var(--primary-soft); } .bk-tpl .cell-title, .bk-tpl .cell-sub { display: block; } .bk-tpl-swatch { display: block; width: 36px; border-radius: 6px; border: 1px solid var(--line); flex: 0 0 auto; } .bk-tpl-form { padding: 12px; border-radius: 14px; background: var(--surface-2); } .bk-preview { position: relative; width: 100%; border-radius: 14px; overflow: hidden; background: var(--surface-3); border: 1px solid var(--line); display: grid; place-items: center; } .bk-preview img { width: 100%; height: 100%; object-fit: contain; display: block; } .bk-preview.loading img { opacity: 0.55; transition: opacity var(--dur); } .bk-preview-msg { padding: 20px; text-align: center; } .bk-preview-spin { position: absolute; top: 10px; right: 10px; background: var(--surface); border-radius: 50%; padding: 4px; display: grid; place-items: center; box-shadow: var(--shadow-sm); } .bk-preview-flag { position: absolute; left: 10px; bottom: 10px; } .bk-savebar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); } .bk-make { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 18px; align-items: start; } .bk-make-form { display: grid; gap: 12px; } .bk-make-tool { display: inline-flex; } .bk-pick:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } @media (max-width: 960px) { .bk-layout { grid-template-columns: 1fr; } .bk-side { position: static; } .bk-make { grid-template-columns: 1fr; } } .rpt-table .mono, .rpt-caveats, .rpt-table td:first-child { overflow-wrap: anywhere; word-break: break-word; } .rpt-table td.num { white-space: nowrap; } /* ── S9 collaboration: comments, version history, media library ── */ .collab-card .card-head { padding: 0 20px; border-bottom: 1px solid var(--border); } .collab-card .card-head .grow { min-width: 0; } .collab-body { padding: 18px 20px 20px; } .c-link { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; font-weight: 700; color: var(--text-2); cursor: pointer; } .c-link:hover { color: var(--primary); text-decoration: underline; } .c-link.danger:hover { color: var(--danger-text); } .c-link:disabled { opacity: 0.5; cursor: default; } .comment-box .cb-wrap { position: relative; } .comment-box .textarea { width: 100%; min-height: 72px; } .comment-box.compact .textarea { min-height: 52px; } .mention-pop { position: absolute; left: 8px; bottom: calc(100% + 4px); z-index: 20; min-width: 260px; max-width: 360px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 4px; } .mention-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; background: none; border-radius: 8px; text-align: left; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; } .mention-opt.active, .mention-opt:hover { background: var(--primary-soft); } .mention { color: var(--primary); font-weight: 800; background: var(--primary-soft); border-radius: 6px; padding: 0 4px; } .threads { display: flex; flex-direction: column; gap: 14px; } .thread { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px; background: var(--surface); } .thread.resolved { background: var(--surface-2); } .thread.resolved .c-body { color: var(--text-2); } .comment { display: flex; gap: 10px; align-items: flex-start; } .c-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; margin-bottom: 2px; } .c-body { font-size: 14px; line-height: 1.55; word-break: break-word; } .c-actions { display: flex; gap: 12px; margin-top: 6px; } .replies { margin: 10px 0 0 44px; display: flex; flex-direction: column; gap: 10px; padding-left: 12px; border-left: 2px solid var(--border); } .versions { display: flex; flex-direction: column; gap: 8px; } .version { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; } .version.open { border-color: var(--border-strong); } .v-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--text); text-align: left; cursor: pointer; } .v-head:hover { background: var(--surface-2); } .v-no { font-family: var(--mono); font-weight: 800; font-size: 12px; color: var(--text-3); min-width: 28px; } .v-sum { white-space: nowrap; } .v-body { padding: 0 14px 14px 52px; } .diff-text { white-space: pre-wrap; font-size: 14px; line-height: 1.6; background: var(--surface-2); border-radius: var(--r-md); padding: 10px 12px; } .diff-text ins { background: var(--success-bg); color: var(--success-text); text-decoration: none; border-radius: 3px; padding: 0 1px; } .diff-text del { background: var(--danger-bg); color: var(--danger-text); border-radius: 3px; padding: 0 1px; } .diff-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .changed-fields { display: flex; flex-direction: column; gap: 4px; font-size: 13px; } .cf-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cf-k { font-weight: 700; color: var(--text-2); min-width: 110px; } .cf-from { color: var(--danger-text); text-decoration: line-through; } .cf-to { color: var(--success-text); font-weight: 700; } .comments-pill { margin-left: auto; flex: none; } .lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .lib-tile { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 2px solid var(--border); cursor: pointer; display: flex; flex-direction: column; } .lib-tile.skeleton { border: 0; aspect-ratio: 1; } .lib-tile:hover { border-color: var(--border-strong); } .lib-tile:focus-visible { box-shadow: var(--focus-ring); outline: none; } .lib-tile.selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); } .lib-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--surface-3); } .lib-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .lib-thumb .lib-file { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; color: var(--text-3); } .lib-thumb .lib-check { position: absolute; top: 6px; left: 6px; z-index: 2; background: rgba(255,255,255,0.9); border-radius: 6px; padding: 2px; display: grid; } .lib-thumb .lib-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); cursor: pointer; } .lib-thumb .alt-flag { position: absolute; left: 6px; bottom: 6px; } .lib-thumb .use-flag { position: absolute; right: 6px; top: 6px; } .lib-meta { padding: 8px 10px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .lib-tags { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-height: 20px; } .lib-folder { display: inline-flex; align-items: center; gap: 3px; color: var(--text-2); font-weight: 600; margin-right: 2px; } .lib-drop-line { display: flex; align-items: center; justify-content: center; gap: 8px; } .lib-preview { border-radius: var(--r-lg); overflow: hidden; background: var(--surface-3); display: grid; place-items: center; max-height: 320px; } .lib-preview img, .lib-preview video { max-width: 100%; max-height: 320px; object-fit: contain; } .dropzone .up-row { display: grid; grid-template-columns: 1fr 160px 48px; align-items: center; gap: 10px; margin-top: 8px; text-align: left; } .tag-list { display: flex; flex-direction: column; gap: 6px; } .tag-row { display: flex; align-items: center; gap: 10px; } button.stk.is-off { opacity: 0.45; filter: saturate(0.4); } button.stk.is-active { outline: 2px solid var(--primary); outline-offset: 2px; } .usage-list { display: flex; flex-direction: column; gap: 4px; } .usage-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-md); font-size: 13px; color: inherit; text-decoration: none; } .usage-row:hover { background: var(--surface-2); } :root[data-theme="dark"] .lib-thumb .lib-check { background: rgba(20, 26, 44, 0.9); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lib-thumb .lib-check { background: rgba(20, 26, 44, 0.9); } } @media (max-width: 720px) { .diff-cols { grid-template-columns: 1fr; } .v-body { padding-left: 14px; } .replies { margin-left: 16px; } .v-sum { white-space: normal; } } /* ── gbp-profile-health (location page #/locations/:id) ── */ .lp-top { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; } .lp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; } @media (max-width: 1100px) { .lp-grid { grid-template-columns: minmax(0, 1fr); } } .lp-top > *, .lp-grid > * { min-width: 0; } @media (max-width: 560px) { .lp-checklist li { flex-wrap: wrap; } .lp-checklist li > a.btn { margin-left: 36px; } } @media (max-width: 820px) { .lp-top { grid-template-columns: minmax(0, 1fr); } } .lp-score-wrap { display: flex; justify-content: center; padding: 6px 0; } .lp-ring { position: relative; display: inline-grid; place-items: center; } .lp-ring svg { position: absolute; inset: 0; } .lp-ring .track { stroke: var(--surface-3); } .lp-ring .bar { stroke: var(--purple); transition: stroke-dasharray .6s ease; } .lp-ring.tone-good .bar { stroke: var(--success); } .lp-ring.tone-mid .bar { stroke: var(--warning); } .lp-ring.tone-low .bar { stroke: var(--pink); } .lp-ring.tone-none .track { stroke-dasharray: 6 8; } .lp-ring-label { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; } .lp-ring-label .n { font-size: 46px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); } .lp-ring-label .d { font-size: 12px; font-weight: 700; color: var(--text-3); margin-top: 6px; text-transform: uppercase; letter-spacing: .04em; } .lp-summary { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 12px; } .lp-checklist { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; } .lp-checklist li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 4px; border-bottom: 1px solid var(--line); } .lp-checklist li:last-child { border-bottom: 0; } .lp-checklist li.st-ok .lp-cl-title { color: var(--text-2); } .lp-cl-title { font-weight: 700; } .lp-mark { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 1px 0 rgba(16, 29, 58, .16); margin-top: 1px; } .lp-mark.ok { background: var(--mint); color: var(--navy); } .lp-mark.missing { background: var(--pink); color: #fff; } .lp-mark.unknown { background: var(--neutral-bg); color: var(--neutral-text); } .lp-link { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 4px 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--purple-text); cursor: pointer; } .lp-link:hover { text-decoration: underline; } .lp-hours { display: grid; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .lp-hours-row { display: grid; grid-template-columns: 104px 112px 1fr; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface); } .lp-hours-row:last-child { border-bottom: 0; } .lp-hours-row:nth-child(even) { background: var(--surface-2); } .lp-day { font-weight: 800; } .lp-periods { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; } .lp-period { display: inline-flex; align-items: center; gap: 6px; } .lp-period .input, .lp-special-row .input { width: 70px; text-align: center; font-variant-numeric: tabular-nums; } .lp-special-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; } .lp-special-row .input[type=date] { width: 150px; } @media (max-width: 560px) { .lp-hours-row { grid-template-columns: 1fr auto; } .lp-periods { grid-column: 1 / -1; } } .lp-question { padding: 12px 0; border-bottom: 1px solid var(--line); } .lp-question:last-child { border-bottom: 0; } .lp-q-text { font-weight: 700; margin: 8px 0; font-size: 15px; } .lp-answer { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 14px; } .lp-question.st-answered .lp-answer { border-left: 4px solid var(--mint); } .lp-answer-box textarea { width: 100%; resize: vertical; } .lp-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .lp-photo { margin: 0; position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); aspect-ratio: 4 / 3; } .lp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .lp-photo figcaption { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; justify-content: space-between; align-items: center; gap: 6px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); } .lp-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; max-height: 340px; overflow: auto; padding: 2px; } .lp-pick { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; text-align: left; color: var(--text-2); } .lp-pick img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; } .lp-pick.on { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-100); } /* ── hashtags (S13) ── */ .ht-tool { display: inline-flex; } .ht-badge { display: inline-block; margin-left: 2px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 18px; font-variant-numeric: tabular-nums; } .ht-panel { display: grid; gap: 14px; } .ht-counter { padding: 10px 12px; border-radius: var(--r-md); font-size: 14px; } .ht-counter strong { font-size: 18px; font-variant-numeric: tabular-nums; } .ht-guidance { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--text-2); } .ht-guidance li { display: flex; gap: 8px; align-items: flex-start; } .ht-guidance li .plat-icon { flex: 0 0 auto; margin-top: 1px; } .ht-fc { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); } .ht-group { display: grid; gap: 6px; } .ht-group-head { display: flex; align-items: center; gap: 8px; font-size: 13px; } .ht-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ht-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: left; transition: border-color var(--dur, .15s) var(--ease, ease), background var(--dur, .15s) var(--ease, ease); } .ht-chip:hover:not(:disabled):not(.static) { border-color: var(--purple); background: var(--purple-50); } .ht-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); } .ht-chip.used, .ht-chip:disabled { opacity: .55; cursor: default; } .ht-chip.static { cursor: default; } .ht-tag { font-weight: 700; color: var(--purple); } .ht-hint { font-size: 11px; color: var(--text-3); } .ht-flag { display: inline-block; padding: 0 6px; border-radius: 999px; background: var(--lemon); color: var(--navy); font-size: 10px; font-weight: 700; line-height: 16px; } .ht-validate { padding: 12px; border: 1px dashed var(--line); border-radius: var(--r-md); } .ht-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; } .ht-meta { margin: 0 0 12px; } .ht-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .ht-posts li { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); display: grid; gap: 3px; } @media (max-width: 760px) { .ht-filters { grid-template-columns: 1fr 1fr; } } /* ── ideas-and-best-time ── */ .ideas-page .filter-bar .segmented { flex: none; } .idea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .idea-source-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; } .idea-source-head h2 { font-size: 17px; margin: 0; } .idea-source-note { margin: 0 0 10px; max-width: 900px; } .idea-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); min-width: 0; } .idea-card.insufficient { background: var(--surface-2); border-style: dashed; } .idea-top { display: flex; align-items: center; gap: 8px; } .idea-badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .01em; white-space: nowrap; } .idea-badge.conf-official { background: var(--sky-100); color: #1A5FA8; } .idea-badge.conf-curated { background: var(--lemon); color: var(--warning-text); } .idea-badge.conf-first { background: var(--mint-100); color: var(--success-text); } .idea-badge.conf-ai { background: var(--lav); color: var(--purple-600); } .idea-media { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); background: var(--surface-2); } .idea-date { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--purple); } .idea-title { margin: 0; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; } .idea-body { margin: 0; font-size: 13px; line-height: 1.5; white-space: pre-line; color: var(--text); overflow-wrap: anywhere; } .idea-why { margin: 0; line-height: 1.45; display: flex; gap: 6px; align-items: flex-start; } .idea-why .icon { margin-top: 2px; } .idea-source { margin-bottom: 28px; } .idea-tags { display: flex; flex-wrap: wrap; gap: 4px; } .idea-tags .chip { height: 22px; padding: 0 8px; font-size: 11px; } .idea-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; } .idea-attr { margin-left: auto; } .ideas-timeline { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; } .tl-item { flex: 0 0 150px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .tl-item.public_holiday { border-color: #BBD9F7; } .tl-item.dim { opacity: .55; } .tl-date { display: flex; align-items: baseline; gap: 4px; } .tl-day { font-size: 22px; font-weight: 800; line-height: 1; color: var(--navy); } .tl-mon { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-3); } .tl-name { font-size: 13px; font-weight: 700; line-height: 1.3; min-height: 34px; } :root[data-theme="dark"] .tl-day { color: var(--text); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tl-day { color: var(--text); } } .bt-heatmap { display: grid; gap: 3px; overflow-x: auto; padding-bottom: 4px; } .bt-row { display: grid; grid-template-columns: 34px repeat(24, minmax(14px, 1fr)); gap: 3px; align-items: center; } .bt-head .bt-h { font-size: 10px; color: var(--text-3); font-weight: 700; } .bt-day { font-size: 11px; font-weight: 700; color: var(--text-2); } .bt-cell { display: inline-block; height: 18px; min-width: 14px; border-radius: 4px; background: var(--surface-2); } .bt-cell.empty { background: transparent; border: 1px dashed var(--surface-3); } .bt-cell.top { outline: 2px solid var(--pink); outline-offset: 1px; } .bt-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; } .bt-legend .bt-cell { width: 14px; height: 12px; } .bt-slots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .bt-guidance, .st-guidance { padding: 10px 12px; border-radius: var(--r-md); border: 1px dashed var(--line); background: var(--surface-2); } .bt-guidance ul, .st-guidance ul { margin: 6px 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; } .ideas-pop-wrap { position: relative; display: inline-flex; } .ideas-pop { position: absolute; z-index: 40; top: 30px; max-width: 92vw; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-raised); box-shadow: var(--shadow-lg); } .st-pop { display: grid; gap: 8px; } .st-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .st-slot { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 4px 8px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; color: var(--text); } .st-slot:hover { border-color: var(--purple); background: var(--lav); } .st-slot:focus-visible { box-shadow: var(--focus-ring); outline: none; } .st-slot .st-label { font-weight: 800; font-size: 14px; } .st-slot .muted { grid-column: 1 / -1; } @media (max-width: 760px) { .idea-grid { grid-template-columns: 1fr; } .tl-item { flex-basis: 130px; } } /* ── image-studio (S12) ── */ .studio { display: flex; flex-direction: column; gap: 10px; height: calc(100vh - var(--topbar-h) - 110px); height: calc(100dvh - var(--topbar-h) - 110px); min-height: 540px; } .studio.loading { opacity: 0.7; pointer-events: none; } .studio-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .studio-title { display: flex; align-items: center; gap: 8px; margin-right: auto; } .studio-title h1 { font-size: 20px; display: flex; align-items: center; gap: 8px; } .studio-size { width: 260px; } .studio-tools { display: flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 3px 6px; } .studio-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; } .studio-zoom { min-width: 52px; font-weight: 700; font-size: 12px; color: var(--text-2); background: none; border: 0; cursor: pointer; } .studio-alert { margin: 0; } .studio-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 252px minmax(0, 1fr) 264px; gap: 10px; } .studio-left, .studio-right { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; min-height: 0; overflow: auto; } .studio-left { display: grid; grid-template-columns: 58px minmax(0, 1fr); overflow: hidden; } .studio-tabs { display: flex; flex-direction: column; gap: 2px; padding: 8px 4px; border-right: 1px solid var(--line); } .studio-tabs button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px; border-radius: 10px; font-size: 10px; font-weight: 700; color: var(--text-2); background: none; border: 0; cursor: pointer; } .studio-tabs button:hover { background: var(--surface-2); } .studio-tabs button.on { background: var(--lav); color: var(--purple); } .studio-panel { padding: 12px; overflow: auto; } .studio-right { padding: 12px 14px; } .st-h { font-weight: 800; font-size: 13px; margin-bottom: 8px; } .st-label { display: block; font-size: 11px; font-weight: 700; color: var(--text-2); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; } .st-label b { color: var(--text); font-weight: 700; text-transform: none; letter-spacing: 0; float: right; } .st-field { display: block; margin: 8px 0; } .st-row { display: flex; gap: 6px; align-items: flex-end; margin: 6px 0; flex-wrap: wrap; } .st-num { display: flex; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0; font-size: 11px; font-weight: 700; color: var(--text-2); } .st-num .input { min-width: 0; width: 100%; padding: 4px 6px; } .st-num em { font-style: normal; } .st-slider { display: block; margin: 8px 0; } .st-slider input { width: 100%; accent-color: var(--purple); } .st-swatches { display: flex; flex-wrap: wrap; gap: 5px; } .st-swatch { width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--border-strong); cursor: pointer; padding: 0; position: relative; } .st-swatch.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--purple); } .st-swatch.none { background: repeating-linear-gradient(45deg, #fff 0 4px, #f04e5b 4px 5px, #fff 5px 9px); } .st-swatch.custom { overflow: hidden; background: conic-gradient(#f04e5b, #ffc94d, #1db97a, #59c3ff, #7138f5, #ff4f8b, #f04e5b); } .st-swatch.custom input { opacity: 0; width: 100%; height: 100%; cursor: pointer; } .st-actions { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 4px; } .st-templates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .st-template { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); cursor: pointer; font-size: 11px; font-weight: 700; color: var(--text-2); } .st-template:hover { border-color: var(--purple); } .st-thumb { max-width: 100%; height: auto; border-radius: 6px; } .st-add { display: block; width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; color: var(--text); } .st-add:hover { border-color: var(--purple); } .st-add-heading { font-size: 20px; font-weight: 800; } .st-add-sub { font-size: 15px; font-weight: 700; } .st-add-body { font-size: 13px; } .st-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .st-tile { aspect-ratio: 1; display: grid; place-items: center; padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; color: var(--purple); } .st-tile:hover { border-color: var(--purple); } .st-tile svg { width: 100%; height: 100%; } .st-tile.sticker { background: var(--lav); } .st-library { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .st-library.big { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } .st-lib { aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--surface-3); } .st-lib:hover { border-color: var(--purple); } .st-lib img { width: 100%; height: 100%; object-fit: cover; display: block; } .st-layers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; } .st-layers li { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 9px; font-size: 12px; font-weight: 600; cursor: pointer; } .st-layers li:hover { background: var(--surface-2); } .st-layers li.on { background: var(--lav); color: var(--purple); } .st-layers li.hidden { opacity: 0.5; } .st-layers li .grow { min-width: 0; } .st-spec { padding: 10px; border-radius: 12px; background: var(--surface-2); } .st-keys { padding-left: 16px; margin: 0; display: grid; gap: 3px; } .st-keys kbd { font-family: var(--mono); font-size: 10px; padding: 0 4px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); } .studio-stage { position: relative; min-width: 0; min-height: 0; overflow: auto; display: grid; place-items: center; padding: 24px; border-radius: 18px; border: 1px solid var(--line); background-color: var(--surface-2); background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 16px 16px; touch-action: none; user-select: none; } .studio-board { position: relative; flex: none; box-shadow: 0 0 0 1px rgba(16, 29, 58, 0.08), 0 6px 18px rgba(16, 29, 58, 0.08); background: #fff; } .studio-canvas { display: block; } .studio-overlay { position: absolute; inset: 0; overflow: visible; pointer-events: none; } .studio-overlay .handle, .studio-overlay .rot-handle { pointer-events: all; fill: #fff; stroke: var(--purple); stroke-width: 1.5; } .studio-overlay .rot-handle { cursor: grab; } .studio-overlay .rot-stem { stroke: var(--purple); stroke-width: 1.2; } .studio-overlay .sel-outline { fill: none; stroke: var(--purple); stroke-width: 1.5; } .studio-overlay .sel-outline.locked { stroke: var(--text-3); stroke-dasharray: 4 3; } .studio-overlay .group-box { fill: none; stroke: var(--purple); stroke-dasharray: 5 4; stroke-width: 1; } .studio-overlay .snap-guide { stroke: var(--pink); stroke-width: 1; } .studio-overlay .marquee { fill: rgba(113, 56, 245, 0.08); stroke: var(--purple); stroke-width: 1; stroke-dasharray: 3 3; } .studio-overlay .safe-zone { fill: rgba(255, 79, 139, 0.12); stroke: rgba(255, 79, 139, 0.5); stroke-dasharray: 4 4; } .studio-overlay .safe-label { fill: #C2185B; font-size: 11px; font-weight: 700; font-family: var(--font); } .studio-small { padding: 40px 0; } @media (max-width: 1024px) { .studio { height: calc(100dvh - var(--topbar-h) - var(--bottom-nav-h) - 96px); } body:has(.studio) .fab { display: none; } } @media (max-width: 1180px) { .studio-main { grid-template-columns: 220px minmax(0, 1fr) 236px; } .studio-size { width: 200px; } } /* Adjust-crops drawer */ .crop-note { display: flex; align-items: flex-start; gap: 5px; } .crop-note .icon { margin-top: 2px; } .crop-tools { display: inline-flex; gap: 6px; flex-wrap: wrap; } .crop-tools .mf-chip:disabled { opacity: 0.5; cursor: not-allowed; } .crop-media { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); } .crop-media:last-child { border-bottom: 0; } .crop-source { position: relative; border-radius: 12px; overflow: hidden; background: var(--surface-3); line-height: 0; touch-action: none; user-select: none; } .crop-source.draggable { cursor: crosshair; } .crop-source:focus-visible { box-shadow: var(--focus-ring); outline: none; } .crop-source img { width: 100%; height: auto; display: block; pointer-events: none; } .crop-box { position: absolute; border: 2px solid; box-shadow: 0 0 0 9999px rgba(16, 29, 58, 0.12); pointer-events: none; line-height: 1.2; } .crop-box span { position: absolute; left: 0; top: 0; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 5px; border-bottom-right-radius: 6px; white-space: nowrap; } .focal-dot { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid #fff; background: var(--pink); box-shadow: 0 2px 0 rgba(16, 29, 58, 0.25); pointer-events: none; } .crop-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; align-content: start; } .crop-card { border: 1px solid var(--line); border-top-width: 3px; border-radius: 14px; padding: 10px; background: var(--surface); } .crop-preview { width: 100%; max-height: 220px; border-radius: 8px; overflow: hidden; background: var(--surface-3); display: grid; place-items: center; } .crop-preview img { width: 100%; height: 100%; object-fit: contain; display: block; } .crop-preview.original img { max-height: 200px; } @media (max-width: 640px) { .crop-media { grid-template-columns: 1fr; } } /* ── billing trial / lock ribbon (shell) ── */ .billing-ribbon{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:9px 14px;border-radius:14px;font-weight:700;font-size:13px;background:#FFF6C7;color:#7A5A00;border:1px solid #F2D86B} .billing-ribbon.tone-danger{background:#FFE3E6;color:#B4172C;border-color:#F5A3AE} .billing-ribbon-cta{margin-left:auto;font-weight:800;color:inherit;text-decoration:underline} /* ── W2: client connection invites (pages/connection-invites.js) ── */ .ci-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px} .ci-pick-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:inherit;font:inherit;font-weight:700;text-align:left;cursor:pointer} .ci-pick-item:hover{border-color:var(--purple)} .ci-pick-item.on{border-color:var(--purple);background:var(--lav);color:var(--navy)} .ci-pick-item.on .icon{color:var(--purple)} .ci-pick-item.off{opacity:.55;cursor:not-allowed} .ci-pick-item .grow{flex:1;min-width:0} .ci-prog{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap} .ci-prog-chip{display:inline-flex;align-items:center;gap:3px;padding:3px 7px 3px 4px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--text-2)} .ci-prog-chip.done{background:var(--mint);border-color:transparent;color:var(--navy)} .ci-invite-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:16px;background:var(--lav);margin:0 0 16px} .ci-invite-cta .grow{flex:1;min-width:200px} .ci-invite-cta .title{font-weight:800;color:var(--navy)} .ci-msg{background:var(--lav);color:var(--navy);border-radius:14px;padding:10px 12px;font-weight:600;white-space:pre-line} .ci-timeline{list-style:none;margin:0;padding:0 0 0 4px;border-left:2px solid var(--line)} .ci-timeline li{display:flex;gap:10px;align-items:flex-start;padding:6px 0 10px 0;margin-left:-13px} .ci-timeline .dot{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface);border:2px solid var(--line);color:var(--text-2)} .ci-timeline .ci-ev-success .dot{background:var(--mint);border-color:transparent;color:var(--navy)} .ci-timeline .ci-ev-danger .dot{background:var(--pink);border-color:transparent;color:#fff} .ci-timeline .ci-ev-info .dot{background:var(--sky);border-color:transparent;color:var(--navy)} /* ── W1: two-factor sign-in + SSO ── */ .sec-stack{display:grid;gap:16px} .otp{display:grid;grid-template-columns:repeat(6,minmax(0,52px));gap:8px;justify-content:center;margin:4px 0 2px} .otp-box{width:100%;height:56px;border:1.5px solid var(--border-strong);border-radius:14px;background:var(--surface);color:var(--text);font:800 24px/1 var(--mono);text-align:center;caret-color:var(--primary)} .otp-box:focus{outline:none;border-color:var(--primary);box-shadow:var(--focus-ring)} .otp.invalid .otp-box{border-color:var(--danger)} .otp-box:disabled{opacity:.6} .tf-step{display:grid;gap:14px} .tf-step-head{display:flex;gap:12px;align-items:flex-start} .tf-badge{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary)} .tf-title{font-size:18px;margin:0 0 2px;letter-spacing:-.01em} .sso-block{display:grid;gap:10px} .sso-or{display:flex;align-items:center;gap:10px;color:var(--text-3);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em} .sso-or::before,.sso-or::after{content:"";flex:1;height:1px;background:var(--border)} .sso-btn{gap:10px;text-decoration:none} .sso-mark{flex:none;width:26px;height:26px;border-radius:8px;display:inline-grid;place-items:center;font:800 13px/1 var(--font);background:var(--neutral-bg);color:var(--text);border:1px solid var(--border)} .sso-mark.sso-microsoft{background:var(--primary-soft);color:var(--primary)} .tf-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;margin:0;padding:14px 18px 14px 40px;border:1px dashed var(--border-strong);border-radius:14px;background:var(--surface-2);font:700 15px/1.6 var(--mono);color:var(--text)} .tf-wizard{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:start} .tf-qr{width:220px;height:220px;border-radius:16px;border:1px solid var(--border);background:#fff;display:grid;place-items:center;padding:8px} .tf-qr img{width:200px;height:200px;image-rendering:pixelated} .tf-qr-missing{padding:16px;text-align:center} .tf-wizard-steps{display:grid;gap:12px;min-width:0} .tf-steps{margin:0;padding-left:20px;display:grid;gap:10px;color:var(--text-2)} .tf-steps strong{color:var(--text)} .tf-secret{display:inline-block;padding:2px 8px;border-radius:8px;background:var(--surface-3);color:var(--text);font-weight:700;letter-spacing:.04em;word-break:break-all} .tf-wizard .otp{justify-content:start} .sso-list{list-style:none;margin:0;padding:0;display:grid} .sso-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)} .sso-row:last-child{border-bottom:0} .sec-chip-x{display:inline-grid;place-items:center;margin-left:4px;width:18px;height:18px;border-radius:50%;border:0;background:transparent;color:inherit;cursor:pointer} .sec-chip-x:hover{background:var(--surface-3)} .tf-setup-page{max-width:760px;display:grid;gap:16px} @media (max-width:640px){.tf-wizard{grid-template-columns:1fr}.tf-qr{margin:0 auto}.otp{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.otp-box{height:50px;font-size:20px}.tf-codes{grid-template-columns:1fr}} .tf-card > .alert{margin-bottom:12px} /* ── W3 data & privacy (pages/privacy.js) ── */ .privacy-tab { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .settings-layout > div:has(> .privacy-tab) { min-width: 0; } /* let the settings grid track shrink on phones (tables scroll inside) */ .privacy-tab .text-danger { color: var(--danger-text); } .privacy-danger { border-color: var(--danger-bg); } .privacy-danger-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--line); } .privacy-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .stk-tile { border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; } .stk-tile strong { font-size: 22px; letter-spacing: -0.03em; line-height: 1.1; } .stk-tile span { font-size: 12px; font-weight: 700; } .privacy-conns { display: flex; flex-direction: column; gap: 6px; } .privacy-conn { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .privacy-confirm { padding: 14px; border-radius: 16px; background: var(--danger-bg); color: var(--danger-text); } .privacy-confirm .field { margin: 0; } .privacy-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: var(--surface); color: var(--text); } .privacy-pending { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 16px; background: var(--warning-bg); color: var(--warning-text); flex: 1 1 320px; } .privacy-clock { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--lemon); color: #101D3A; flex: none; } .privacy-countdown { font-weight: 800; } @media (max-width: 640px) { .privacy-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── end W3 data & privacy ── */ /* ── social-inbox (W5, pages/inbox.js) ── */ .inbox-layout { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; } .inbox-list { padding: 6px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100dvh - var(--topbar-h) - 190px); overflow-y: auto; position: sticky; top: calc(var(--topbar-h) + 12px); } .inbox-list .empty-state { padding: 28px 12px; } .ib-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; text-align: left; padding: 10px; border-radius: 14px; border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; width: 100%; } .ib-item:hover { background: var(--surface-2); } .ib-item.active { background: var(--lav); border-color: var(--purple); } .ib-item:focus-visible { outline: none; box-shadow: var(--focus-ring); } .ib-av { position: relative; width: 36px; height: 36px; } .ib-av .ib-plat { position: absolute; right: -4px; bottom: -4px; border-radius: 50%; border: 2px solid var(--surface); } .ib-main { display: grid; gap: 3px; min-width: 0; } .ib-top { display: flex; align-items: baseline; gap: 8px; } .ib-who { font-weight: 800; font-size: 14px; flex: 1; min-width: 0; } .ib-item.unread .ib-who::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); margin-right: 6px; vertical-align: 1px; } .ib-time { color: var(--text-3); font-size: 11px; font-weight: 700; white-space: nowrap; } .ib-text { color: var(--text-2); font-size: 13px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .ib-tags { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; } .ib-assignee { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--sky-t); color: #0B5C8A; } .ib-unsupported { display: flex; gap: 6px; align-items: flex-start; padding: 10px; border-top: 1px solid var(--line); margin-top: 6px; } .ib-back { display: none; margin-bottom: 8px; } .inbox-empty-pane { padding: 40px 20px; } .inbox-convo { padding: 0; overflow: hidden; } .inbox-convo .pad { padding: 18px; } .ic-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 10px; } .ic-head .who { font-weight: 800; font-size: 16px; } .ic-head .meta { color: var(--text-2); font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .ic-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 0 18px 12px; border-bottom: 1px solid var(--line); } .ic-tools kbd, .ic-compose kbd { font-family: inherit; font-size: 10px; padding: 0 5px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); margin-left: 4px; } .ic-post { margin: 14px 18px 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border-left: 4px solid var(--line); } .ic-post.postwoo { border-left-color: var(--purple); background: var(--lav); } .ic-post-body { font-size: 14px; font-weight: 600; line-height: 1.45; white-space: pre-wrap; word-break: break-word; max-height: 7.5em; overflow: hidden; } .ic-messages { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; } .ic-msg { display: flex; } .ic-msg.outbound { justify-content: flex-end; } .ic-msg .bubble { max-width: min(560px, 85%); padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--surface-2); border: 1px solid var(--line); } .ic-msg.outbound .bubble { border-radius: 18px 18px 6px 18px; background: var(--purple); color: #fff; border-color: var(--purple); } .ic-msg.outbound.draft .bubble, .ic-msg.outbound.pending_approval .bubble, .ic-msg.outbound.sending .bubble { background: var(--lemon-t); color: #101D3A; border: 1px dashed var(--warning); } .ic-msg.outbound.failed .bubble { background: var(--danger-bg); color: #101D3A; border-color: var(--danger); } .ic-msg .mh { font-size: 12px; margin-bottom: 2px; } .ic-msg.outbound.sent .mh .muted { color: rgba(255, 255, 255, 0.78); } .ic-msg .mb { font-size: 14px; font-weight: 600; line-height: 1.45; white-space: pre-wrap; word-break: break-word; } .ic-msg .ma { margin-top: 4px; text-align: right; } .ic-msg.outbound.sent .ma .link-btn { color: rgba(255, 255, 255, 0.85); } .ic-alert { margin: 0 18px 12px; } .ic-compose { padding: 14px 18px 18px; border-top: 1px solid var(--line); background: var(--surface); } .ic-compose .snip { border-style: dashed; } .ic-compose .snip-pink { background: var(--pink-t); } .ic-compose .snip-mint { background: var(--mint-t); } .ic-compose .snip-lemon { background: var(--lemon-t); } .ic-compose .snip-sky { background: var(--sky-t); } .ic-compose .snip-purple { background: var(--lav); } :root[data-theme="dark"] .ic-compose .snip-mint, :root[data-theme="dark"] .ic-compose .snip-lemon, :root[data-theme="dark"] .ic-compose .snip-sky { color: #101D3A; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ic-compose .snip-mint, :root:not([data-theme="light"]) .ic-compose .snip-lemon, :root:not([data-theme="light"]) .ic-compose .snip-sky { color: #101D3A; } } :root[data-theme="dark"] .ib-assignee { color: #9AD8FF; background: rgba(91, 200, 255, 0.14); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ib-assignee { color: #9AD8FF; background: rgba(91, 200, 255, 0.14); } } @media (max-width: 900px) { .inbox-layout { grid-template-columns: 1fr; } .inbox-list { position: static; max-height: none; } .inbox-layout.has-selection .inbox-list { display: none; } .inbox-layout:not(.has-selection) .inbox-pane { display: none; } .ib-back { display: inline-flex; } } /* ── W6 white-label branding + client portal ── */ /* Sidebar styles (Settings → Branding & portal). "light" is the default look; colours come from the brand CSS variables. */ .app-shell.sb-navy .sidebar { --sidebar-bg: #101D3A; --sidebar-text: #C7CCE0; border-right-color: transparent; } .app-shell.sb-brand .sidebar { --sidebar-bg: var(--brand-primary-dark, var(--purple-700)); --sidebar-text: rgba(255, 255, 255, 0.82); border-right-color: transparent; } .app-shell.sb-navy .sidebar .nav-item:hover, .app-shell.sb-brand .sidebar .nav-item:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } .app-shell.sb-navy .sidebar .nav-item.active, .app-shell.sb-brand .sidebar .nav-item.active { background: rgba(255, 255, 255, 0.16); color: #fff; } .app-shell.sb-navy .sidebar .nav-section, .app-shell.sb-brand .sidebar .nav-section { color: rgba(255, 255, 255, 0.55); } .app-shell.sb-navy .sidebar-brand .wordmark.wl-wordmark, .app-shell.sb-brand .sidebar-brand .wordmark.wl-wordmark { color: #fff; } .sidebar-brand.wl-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .sidebar-brand .logo-tile.wl-tile { width: 40px; height: 40px; border-radius: 12px; overflow: hidden; justify-content: center; background: var(--surface-2); } .sidebar-brand .logo-tile.wl-tile img { width: 100%; height: 100%; object-fit: contain; display: block; } .collapsed .sidebar-brand .logo-tile.wl-tile img { display: block; } .wl-initial { font-weight: 900; font-size: 20px; color: var(--purple-text); } .sidebar-brand .wordmark.wl-wordmark { display: block; font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; max-width: 150px; } .collapsed .sidebar-brand .wordmark.wl-wordmark { display: none; } .wl-badge { margin: 10px 18px 4px; font-size: 11px; font-weight: 700; color: var(--text-3); } .app-shell.sb-navy .wl-badge, .app-shell.sb-brand .wl-badge { color: rgba(255, 255, 255, 0.6); } .collapsed .wl-badge { display: none; } /* Settings tab */ .wl-settings { display: grid; gap: 16px; } .wl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; } .wl-side { position: sticky; top: 16px; } .wl-media { display: flex; align-items: center; gap: 12px; } .wl-media-box { width: 120px; height: 56px; border: 1px dashed var(--border-strong); border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); overflow: hidden; flex: none; } .wl-media-box.sq { width: 56px; } .wl-media-box img { max-width: 100%; max-height: 100%; object-fit: contain; } .wl-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; } .wl-dns td { vertical-align: middle; } .wl-break { word-break: break-all; } .wl-checks, .wl-notes { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; } .wl-checks li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; font-weight: 600; } .wl-checks li.ok { color: var(--success-text); } .wl-checks li.bad { color: var(--danger-text); } .wl-notes li { padding-left: 14px; position: relative; } .wl-notes li::before { content: '•'; position: absolute; left: 2px; } .wl-preview { display: grid; grid-template-columns: 120px 1fr; height: 220px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: #F5F6FA; font-size: 11px; } .wl-pv-side { padding: 10px 8px; display: flex; flex-direction: column; gap: 4px; } .wl-pv-brand { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; min-height: 24px; overflow: hidden; } .wl-pv-brand img { max-height: 22px; max-width: 46px; object-fit: contain; } .wl-pv-brand b { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wl-pv-mark { width: 20px; height: 20px; border-radius: 6px; flex: none; } .wl-pv-item { padding: 5px 8px; border-radius: 8px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; } .wl-pv-badge { border-radius: 999px; padding: 0 6px; font-size: 10px; } .wl-pv-main { padding: 10px; display: flex; flex-direction: column; gap: 8px; } .wl-pv-bar { height: 18px; border-radius: 8px; background: #fff; border: 1px solid #E6E8F0; } .wl-pv-card { background: #fff; border: 1px solid #E6E8F0; border-radius: 12px; padding: 10px; } .wl-pv-line { height: 7px; border-radius: 4px; background: #E9EBF3; margin-bottom: 6px; } .wl-pv-line.w60 { width: 60%; } .wl-pv-line.w80 { width: 85%; } .wl-pv-btn { padding: 4px 10px; border-radius: 999px; font-weight: 800; font-size: 10px; } .wl-pv-foot { margin-top: auto; color: #8A93AD; font-size: 10px; text-align: right; } @media (max-width: 1100px) { .wl-grid { grid-template-columns: 1fr; } .wl-side { position: static; } } @media (max-width: 640px) { .wl-sections { grid-template-columns: 1fr; } } /* Client portal pages */ .portal-shell .topbar .spacer { flex: 1; } .pt-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 18px; } .pt-tile { padding: 16px 18px; text-decoration: none; color: inherit; display: block; } .pt-tile.hot { background: var(--lav); border-color: transparent; } .pt-num { font-size: 32px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; margin: 4px 0; } .pt-h { font-size: 18px; margin: 18px 0 10px; } .pt-feed { display: grid; gap: 12px; } .pt-post { padding: 14px 16px; } .pt-post-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pt-post-body { margin: 10px 0 0; white-space: pre-line; font-weight: 600; color: var(--text); } .pt-post-body.small { color: var(--text-2); } .pt-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; } .pt-media img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; } .pt-targets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .pt-view { margin-left: 6px; font-weight: 800; } .pt-days { display: grid; gap: 18px; } .pt-day { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; } .pt-day-label { display: flex; flex-direction: column; font-size: 13px; color: var(--text-2); padding-top: 12px; } .pt-day-label b { color: var(--text); font-size: 15px; } .pt-approval { display: grid; gap: 8px; } .pt-decide { padding: 14px 16px; } .pt-decided { padding: 0 6px; } .pt-reports { display: grid; gap: 10px; } .pt-report { display: flex; align-items: center; gap: 12px; padding: 14px 16px; } .pt-reviews { display: grid; gap: 12px; } .pt-review { padding: 14px 16px; } .pt-reply { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); } .pt-reply p { margin: 4px 0 0; font-weight: 600; } .pt-na { padding-top: 40px; } @media (max-width: 640px) { .pt-day { grid-template-columns: 1fr; } .pt-day-label { flex-direction: row; gap: 8px; padding-top: 0; } } /* ── end W6 ── */ /* ── W7 links & widgets (#/links, composer "Shorten links", post detail "Link clicks") ── */ .lw-h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.02em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lw-builder-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px} .lw-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:start} .lw-split-phone{grid-template-columns:minmax(0,1fr) 360px} .lw-settings-col,.lw-preview-col{display:grid;gap:16px;min-width:0} .lw-switches{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px} .lw-locs{display:grid;gap:6px;margin-top:6px;padding-left:4px} .lw-preview{border:1px dashed var(--border-strong);border-radius:16px;background:var(--surface-2);padding:8px;overflow:hidden} .lw-preview iframe{display:block;width:100%;height:380px;border:0;background:transparent} .lw-pv-list iframe,.lw-pv-grid iframe{height:560px} .lw-pv-badge iframe{height:90px} .lw-code{margin:12px 0;padding:12px 14px;border-radius:12px;background:var(--navy);color:#E9ECF6;font:12.5px/1.55 var(--mono);white-space:pre-wrap;word-break:break-all;max-height:200px;overflow:auto} .lw-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px} .lw-card{padding:16px;display:flex;flex-direction:column;gap:8px} .lw-card.paused{opacity:.72} .lw-card-top{display:flex;align-items:center;gap:8px} .lw-layout{text-transform:capitalize} .lw-card-title{margin:0;font-size:16px;font-weight:800;letter-spacing:-.01em} .lw-card-stats{display:flex;gap:18px;margin-top:4px} .lw-card-stats div,.lw-totals div{display:flex;flex-direction:column;line-height:1.1} .lw-card-stats b,.lw-totals b{font-size:18px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .lw-card-stats span,.lw-totals span{font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em} .lw-card-actions{display:flex;align-items:center;gap:6px;margin-top:6px} .lw-swatch{width:22px;height:22px;border-radius:8px;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border)} .lw-url{display:flex;align-items:center;gap:6px;min-width:0} .lw-url code{font-size:12.5px;color:var(--text-2)} .lw-totals{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap;margin:0 0 14px;padding:12px 16px;border:1px solid var(--border);border-radius:16px;background:var(--surface)} .lw-totals p{margin:0;flex:1 1 220px} .lw-code-cell{display:flex;align-items:center;gap:4px} .lw-target{display:inline-block;max-width:260px;vertical-align:middle;color:var(--text-2)} .lw-media{display:flex;flex-wrap:wrap;gap:8px} .lw-media-opt{width:56px;height:56px;border-radius:50%;border:2px solid var(--border);background:var(--surface-2);padding:0;overflow:hidden;cursor:pointer;font:700 10px var(--font);color:var(--text-2)} .lw-media-opt img{width:100%;height:100%;object-fit:cover;display:block} .lw-media-opt.on{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-100)} .lw-links{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px} .lw-link{display:flex;gap:8px;align-items:flex-start;padding:10px;border:1px solid var(--border);border-radius:14px;background:var(--surface)} .lw-link.dragging{opacity:.45} .lw-link.over{border-color:var(--purple);box-shadow:0 -3px 0 var(--purple)} .lw-link.off{background:var(--surface-2)} .lw-grip{cursor:grab;color:var(--text-3);padding:6px 0;flex:none} .lw-link-body{flex:1;min-width:0;display:grid;gap:6px} .lw-link-row{display:flex;gap:6px} .lw-link-row .input{flex:1;min-width:0} .lw-icon-sel{flex:0 0 112px !important} .lw-link-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px} .lw-chk{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--text-2);cursor:pointer} .lw-sched-btn{display:inline-flex;align-items:center;gap:4px;border:0;background:var(--surface-2);border-radius:999px;padding:3px 10px;font:700 12px var(--font);color:var(--text-2);cursor:pointer} .lw-sched{display:flex;gap:10px;flex-wrap:wrap} .lw-sched label{display:grid;gap:4px;font-size:12px;font-weight:700;color:var(--text-2)} .lw-link-tools{display:flex;flex-direction:column;gap:2px;flex:none} .lw-socials{display:grid;gap:6px;margin-bottom:14px} .lw-socials > .btn{justify-self:start} .lw-social{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:6px;align-items:center} .lw-colors{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px} .lw-color{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700} .lw-color input[type=color]{width:34px;height:34px;padding:0;border:1px solid var(--border);border-radius:10px;background:none;cursor:pointer} .lw-reset{border:0;background:none;color:var(--purple-600);font:700 11px var(--font);cursor:pointer;padding:0} .lw-phone-col{position:sticky;top:16px;display:flex;flex-direction:column;align-items:center;gap:10px} .lw-phone{width:340px;max-width:100%;height:680px;border:10px solid var(--navy);border-radius:42px;overflow:hidden;background:var(--surface-2)} .lw-phone iframe{display:block;width:100%;height:100%;border:0} .lw-phone-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-3);font-weight:700;font-size:13px} .lw-phone-url{display:flex;align-items:center;gap:6px} .lw-stats{display:grid;gap:14px} .lw-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .lw-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .lw-bars{list-style:none;margin:0;padding:0;display:grid;gap:6px} .lw-bars li{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:600} .lw-post-total{font-size:13px;margin-bottom:8px} .lw-post-total b{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-right:4px} .lw-post-links{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px} .lw-post-links li{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px} .lw-post-links code{font-size:12px} @media (max-width:1100px){.lw-split,.lw-split-phone{grid-template-columns:1fr}.lw-phone-col{position:static}} @media (max-width:640px){.lw-cards,.lw-two,.lw-tiles{grid-template-columns:1fr}.lw-social{grid-template-columns:1fr auto}.lw-social select{grid-column:1/-1}.lw-phone{height:600px}} /* ── W8: competitor benchmarks (pages/benchmarks.js) ── */ .bm-competitors .card-body{padding-top:4px} .bm-comp-list{list-style:none;margin:0;padding:0} .bm-comp-list li{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)} .bm-comp-list li:last-child{border-bottom:0} .bm-comp-list li.paused{opacity:.6} .bm-comp-list p{margin:4px 0 0} .bm-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} .bm-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 4px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--text-2)} .bm-table-wrap{border:0;border-radius:0} .bm-table{min-width:720px} .bm-table th.bm-metric-col{min-width:190px} .bm-table thead th{vertical-align:bottom;text-transform:none;letter-spacing:0;font-size:12px;color:var(--text-2);min-width:150px} .bm-table thead th.bm-client-col{background:var(--lav);color:var(--navy)} .bm-subject{display:block;font-weight:800;font-size:13px;color:var(--navy)} .bm-you{display:inline-block;margin-top:3px;padding:1px 7px;border-radius:999px;background:var(--purple);color:#fff;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em} .bm-handles{display:flex;flex-wrap:wrap;gap:6px;font-weight:600;color:var(--text-3)} .bm-group th{background:var(--surface-2);font-size:12px;font-weight:800;text-transform:none;letter-spacing:0;color:var(--navy);position:static} .bm-group th > *{vertical-align:middle;margin-right:8px} .bm-metric{font-weight:700;color:var(--navy);background:var(--surface);white-space:normal} .bm-mlabel{display:inline-flex;align-items:center;gap:5px;cursor:help} .bm-mlabel .icon{color:var(--text-3)} .bm-cell{vertical-align:top;min-width:150px} .bm-cell.client{background:color-mix(in srgb,var(--lav) 45%,transparent)} .bm-val{font-size:18px;font-weight:800;color:var(--navy);letter-spacing:-.01em;font-variant-numeric:tabular-nums} .bm-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px} .bm-badge{display:inline-flex;align-items:center;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.02em;background:var(--surface-2);color:var(--text-2);border:1px solid var(--line);cursor:help} .bm-badge.b-instagram{background:#FDE7F1;color:#A3165A;border-color:transparent} .bm-badge.b-youtube{background:#FFE3E3;color:#A31616;border-color:transparent} .bm-badge.b-places,.bm-badge.b-google_business_profile{background:var(--sky);color:var(--navy);border-color:transparent} .bm-badge.b-stored{background:var(--mint);color:var(--navy);border-color:transparent} .bm-change{font-size:11px;font-weight:800;color:var(--text-2)} .bm-change.up{color:var(--success-text)} .bm-change.down{color:var(--danger-text)} .bm-note{margin-top:4px;font-size:11px;color:var(--text-3);line-height:1.35} .bm-reason{margin-top:5px;font-size:12px;color:var(--text-2);line-height:1.35;max-width:240px} .bm-foot{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center} .bm-attribution{font-size:12px;color:var(--text-2)} .bm-explain-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px} .bm-explain-list li{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)} .bm-explain-list p{margin:6px 0 0} .bm-sources{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)} .bm-source p{margin:4px 0 0} .bm-places{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px} .bm-place{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:inherit;font:inherit;text-align:left;cursor:pointer} .bm-place:hover{border-color:var(--purple)} .bm-place.on{border-color:var(--purple);background:var(--lav);color:var(--navy)} .bm-place .icon{color:var(--purple)} @media (max-width:640px){.bm-comp-list li{flex-wrap:wrap}.bm-table th.bm-metric-col{min-width:140px}} /* ── W10: campaigns (pages/campaigns.js, calendar campaign dots) ── */ .cal-campaign-dot{flex:none;width:7px;height:7px;border-radius:50%;box-shadow:0 0 0 1.5px var(--surface)} .cmp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px} .cmp-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;text-align:left;font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);padding:18px 16px 14px} .cmp-card:hover{border-color:var(--cmp-color)} .cmp-band{position:absolute;left:0;top:0;right:0;height:5px;background:var(--cmp-color)} .cmp-swatch{flex:none;display:inline-block;width:12px;height:12px;border-radius:4px;background:var(--cmp-color)} .cmp-goal-line{text-align:left;font-weight:600;line-height:1.4} .cmp-bar{height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden} .cmp-bar.lg{height:9px;margin:10px 0 6px} .cmp-bar span{display:block;height:100%;border-radius:99px;background:var(--cmp-color,var(--primary))} .cmp-bar.partial span{opacity:.45} .cmp-detail{display:flex;flex-direction:column;gap:12px} .cmp-detail .card{padding:16px} .cmp-hero{position:relative;overflow:hidden;padding-top:20px} .cmp-goal{font-size:16px;font-weight:700;line-height:1.5;margin:10px 0 0;color:var(--text);white-space:pre-line} .cmp-h{font-size:15px;font-weight:800;margin:10px 0 0} .cmp-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px} .cmp-kpi{display:flex;flex-direction:column;gap:5px;border-top:4px solid var(--cmp-color)} .cmp-kpi .label{font-size:12px;font-weight:700;color:var(--text-2)} .cmp-kpi .value{font-size:26px;font-weight:800;letter-spacing:-.02em} .cmp-kpi.na .value{color:var(--text-3)} .cmp-kpi .cmp-bar{margin-top:2px} .cmp-cov{font-size:11px;font-weight:700;color:var(--text-3);white-space:nowrap} .cmp-cov.partial{color:var(--warning-text)} .cmp-reason{font-size:12px;font-weight:600;color:var(--text-2);line-height:1.4} .cmp-strip{display:flex;gap:2px;overflow-x:auto;padding:18px 2px 6px;min-height:64px} .cmp-day{position:relative;flex:1 0 14px;min-width:14px;max-width:34px;display:flex;flex-direction:column-reverse;align-items:center;gap:3px;padding:4px 0;border-radius:6px;background:var(--surface-2)} .cmp-day.today{background:var(--lav);box-shadow:inset 0 0 0 1.5px var(--purple)} .cmp-month{position:absolute;top:-16px;left:0;font-size:10px;font-weight:700;color:var(--text-3);white-space:nowrap} .cmp-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--text-3)} .cmp-dot.pub{background:var(--success)} .cmp-dot.sched{background:var(--cmp-color,var(--primary))} .cmp-dot.draft{background:transparent;box-shadow:inset 0 0 0 2px var(--text-3)} .cmp-dot.fail{background:var(--danger)} .cmp-more{font-size:9px;font-weight:800;color:var(--text-2)} .cmp-plats{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px} .cmp-mtable{width:100%} .cmp-mtable td{padding:6px 4px;border-top:1px solid var(--line);font-size:13px} .cmp-mtable tr:first-child td{border-top:0} .cmp-mtable .num{text-align:right} .cmp-two{display:grid;grid-template-columns:1fr 1fr;gap:12px} .cmp-top{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px} .cmp-big{font-size:24px;font-weight:800} .cmp-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--line)} .cmp-row:first-of-type{border-top:0} .cmp-notes{margin:0;padding-left:18px;font-size:13px;font-weight:600;color:var(--text-2);display:flex;flex-direction:column;gap:4px} .cmp-kpi-row{display:grid;grid-template-columns:minmax(160px,1.3fr) 110px 1fr auto;gap:8px;align-items:center;margin-bottom:8px} .cmp-pick{max-height:360px;overflow:auto;display:flex;flex-direction:column;gap:4px} .cmp-pick-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer} .cmp-pick-row.on{border-color:var(--purple);background:var(--lav);color:var(--navy)} .cmp-tool{display:inline-flex;align-items:center;gap:6px} @media (max-width:760px){.cmp-two{grid-template-columns:1fr}.cmp-kpi-row{grid-template-columns:1fr 1fr}} /* ── W9 automation ── */ .auto-rules { display: grid; gap: 12px; margin-top: 16px; } .auto-rule { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; } .auto-rule.off { opacity: .72; } .auto-rule .switch { margin-top: 2px; } .auto-rule-main { min-width: 0; } .auto-rule-name { font-size: 15px; } .auto-rule-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .auto-sentence { margin: 6px 0 8px; color: var(--text-2); font-weight: 600; line-height: 1.5; } .auto-k { display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--lav); color: var(--navy); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin: 0 2px; } .auto-icons { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; } .auto-act { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--neutral-bg); color: var(--neutral-text); } .auto-act.succeeded { background: var(--success-bg); color: var(--success-text); } .auto-act.failed { background: var(--danger-bg); color: var(--danger-text); } .auto-act.skipped { background: var(--surface); border: 1px dashed var(--line); } .auto-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 16px; } .auto-template { padding: 18px; display: flex; flex-direction: column; } .auto-template h3 { margin: 10px 0 4px; font-size: 16px; letter-spacing: -.01em; } .auto-template .btn { align-self: flex-start; margin-top: auto; } .auto-template-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--lemon); color: var(--navy); } .auto-step { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); margin-top: 14px; } .auto-step-k { width: 64px; flex: none; padding-top: 4px; } .auto-cond { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(90px, .8fr) minmax(120px, 1.2fr) auto; gap: 8px; align-items: start; margin-bottom: 8px; } .auto-action { padding: 12px 14px; margin-bottom: 10px; } .auto-action-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 12px; font-weight: 800; flex: none; } .auto-action-body { margin-top: 10px; padding-left: 30px; } .auto-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; } .auto-chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 700; color: var(--text-2); cursor: pointer; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .auto-chip:hover { border-color: var(--purple); color: var(--purple); } .auto-h4 { margin: 16px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); } .auto-checks, .auto-would { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .auto-checks li, .auto-would li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); } .auto-checks li.ok .icon { color: var(--success-text); } .auto-checks li.no .icon { color: var(--danger-text); } .auto-note { color: var(--warning-text); margin-top: 2px; } .auto-note .icon, .auto-action-body p .icon { display: inline-block; vertical-align: -2px; } .auto-preview { border-top: 1px solid var(--line); padding-top: 12px; } .auto-int-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; } .auto-steps { margin: 0; padding-left: 18px; display: grid; gap: 8px; line-height: 1.5; } .auto-endpoints td { vertical-align: top; } .auto-evlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .auto-evlist li { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } @media (max-width: 760px) { .auto-rule { flex-wrap: wrap; } .auto-rule-actions { width: 100%; justify-content: flex-start; } .auto-cond { grid-template-columns: 1fr 1fr; } .auto-step { flex-direction: column; gap: 6px; } .auto-action-body { padding-left: 0; } .auto-int-grid { grid-template-columns: 1fr; } } /* ── /W9 automation ── */ /* ── W11: Canva import + share target ── */ .canva-browser { min-height: 220px; } .canva-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .canva-tile { border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 2px solid var(--border); cursor: pointer; display: flex; flex-direction: column; } .canva-tile.skeleton { border: 0; aspect-ratio: 4 / 3; } .canva-tile:hover { border-color: var(--border-strong); } .canva-tile:focus-visible { box-shadow: var(--focus-ring); outline: none; } .canva-tile.selected { border-color: var(--purple); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--purple); } .canva-thumb { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface-3); display: grid; place-items: center; color: var(--text-2); } .canva-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; } .canva-meta { padding: 8px 10px; min-width: 0; } .canva-connect { text-align: center; max-width: 460px; margin: 8px auto; padding: 12px 0; } .canva-connect h3 { margin: 10px 0 6px; font-size: 19px; letter-spacing: -.01em; } .canva-connect-art { width: 72px; height: 72px; margin: 0 auto; border-radius: 50% 50% 50% 18%; background: var(--lav); color: var(--purple); display: grid; place-items: center; } .canva-opts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; } .canva-job { display: inline-flex; align-items: center; gap: 6px; } .canva-job-error { color: var(--danger); font-weight: 700; } .share-progress { display: inline-flex; align-items: center; gap: 6px; } @media (max-width: 640px) { .canva-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── W12: GBP bulk location tools (pages/locations-bulk.js), event/offer window (posts.js), review themes (pages/review-themes.js) ── */ .lb-layout { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 16px; align-items: start; } .lb-main { display: grid; gap: 16px; min-width: 0; } .lb-groups { max-height: 560px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .lb-group + .lb-group { border-top: 1px solid var(--line); } .lb-group-head { display: flex; width: 100%; align-items: center; gap: 8px; padding: 9px 12px; background: var(--surface-2); position: sticky; top: 0; z-index: 1; } .lb-loc { display: flex; width: 100%; align-items: center; gap: 10px; padding: 7px 12px 7px 26px; font-weight: 600; } .lb-loc:hover { background: var(--lav); } .lb-loc.blocked .grow { opacity: .75; } .lb-holidays { display: flex; flex-wrap: wrap; gap: 8px; } .lb-holiday { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 11px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; text-align: left; } .lb-holiday .d { font-size: 11px; font-weight: 800; color: var(--text-2); text-transform: uppercase; letter-spacing: .02em; } .lb-holiday .n { font-size: 13px; font-weight: 700; } .lb-holiday .r { font-size: 10px; font-weight: 700; color: var(--warning-text); } .lb-holiday:hover { border-color: var(--primary); } .lb-holiday.on { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); } .lb-holiday.on .d, .lb-holiday.on .r { color: inherit; } .lb-change { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; padding: 2px 0; } .lb-change .k { font-weight: 800; min-width: 92px; } .lb-change .from { color: var(--text-2); } .lb-change .from.unknown { font-style: italic; color: var(--text-3); } .lb-change .to { font-weight: 700; } .lb-change.act-unchanged .to, .lb-change.act-kept .to { color: var(--text-3); font-weight: 600; } .lb-note { display: flex; gap: 6px; align-items: flex-start; color: var(--text-2); padding: 2px 0; } .lb-note.warn { color: var(--warning-text); } .lb-note.bad { color: var(--danger-text); } .lb-notes { margin: 12px 0 0; padding-left: 18px; color: var(--text-3); font-size: 12px; } .lb-progress { display: flex; height: 10px; border-radius: 999px; background: var(--neutral-bg); overflow: hidden; } .lb-progress .seg { display: block; height: 100%; transition: width .4s ease; } .lb-progress .seg.ok { background: var(--success); } .lb-progress .seg.bad { background: var(--pink); } .lb-progress .seg.off { background: var(--border-strong); } .lb-day.off .lp-day { color: var(--text-3); } .lb-preview td { vertical-align: top; } .table tbody tr.active td { background: var(--lav); } .gbp-window { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-md); background: var(--lav); color: var(--text); } .gbp-window.is-ended { background: var(--neutral-bg); color: var(--text-2); } .gbp-window.is-running { background: var(--success-bg); } .rt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(220px, 1.2fr); gap: 12px; } .rt-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: start; } .rt-topic + .rt-topic { border-top: 1px solid var(--line); } .rt-topic-head { display: grid; grid-template-columns: 150px minmax(80px, 1fr) 80px auto 130px 16px; align-items: center; gap: 10px; width: 100%; padding: 10px 2px; background: none; border: 0; font: inherit; color: var(--text); cursor: pointer; text-align: left; } .rt-topic-head:hover .rt-label { color: var(--primary); } .rt-label { font-weight: 800; } .rt-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--neutral-bg); } .rt-bar span, .rt-legend .sw { display: inline-block; height: 100%; } .rt-bar .pos, .rt-legend .pos { background: var(--success); } .rt-bar .neu, .rt-legend .neu { background: var(--sun); } .rt-bar .neg, .rt-legend .neg { background: var(--pink); } .rt-bar .unr, .rt-legend .unr { background: var(--border-strong); } .rt-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .rt-legend .sw { width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; } .rt-change { font-weight: 700; color: var(--text-3); } .rt-change.up { color: var(--success-text); } .rt-change.down { color: var(--danger-text); } .rt-quotes { padding: 0 2px 12px; } .rt-quote { margin: 6px 0; padding: 8px 12px; border-left: 3px solid var(--line); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 13px; } .rt-quote.positive { border-left-color: var(--success); } .rt-quote.negative { border-left-color: var(--pink); } .rt-quote.neutral { border-left-color: var(--sun); } .rt-ai { border: 1px dashed var(--lav-2); border-radius: var(--r-md); padding: 12px; margin-bottom: 10px; background: var(--surface); } .rt-ai ul { margin: 4px 0 8px; padding-left: 18px; } @media (max-width: 980px) { .lb-layout, .rt-grid { grid-template-columns: minmax(0, 1fr); } .rt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rt-topic-head { grid-template-columns: 110px minmax(60px, 1fr) 64px 16px; } .rt-topic-head .pill, .rt-topic-head .rt-change { display: none; } .lb-groups { max-height: 360px; } } /* ── end W12 ── */ /* ── W18 onboarding: setup checklist card, Setup page, welcome wizard, empty-state CTAs ── */ .ob-card { margin: 0 0 16px; padding: 16px 18px; border: 2px solid var(--lav); } .ob-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; } .ob-card-head h3 { font-size: 17px; margin: 0 0 2px; } .ob-card-all { display: inline-block; margin-top: 8px; color: var(--primary); text-decoration: none; } .ob-ring { position: relative; flex: none; display: inline-grid; place-items: center; } .ob-ring svg { position: absolute; inset: 0; } .ob-ring-track { stroke: var(--neutral-bg); } .ob-ring-bar { stroke: var(--purple); transition: stroke-dashoffset var(--dur, .2s) var(--ease, ease); } .ob-ring-num { position: relative; font-weight: 800; font-size: 18px; color: var(--text); } .ob-ring-num small { font-size: 11px; font-weight: 700; color: var(--text-3); } .ob-list, .ob-next { display: flex; flex-direction: column; } .ob-step { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 2px; } .ob-step + .ob-step { border-top: 1px solid var(--line); } .ob-step.compact { padding: 9px 0; align-items: center; } .ob-step-mark { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--neutral-bg); color: var(--neutral-text); } .ob-step.is-done .ob-step-mark { background: var(--success-bg); color: var(--success-text); } .ob-step.is-in_progress .ob-step-mark { background: var(--warning-bg); color: var(--warning-text); } .ob-step.is-todo .ob-step-mark { background: var(--purple-bg); color: var(--purple-text); } .ob-step.is-skipped { opacity: .72; } .ob-step-title { font-weight: 800; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .ob-step.is-done .ob-step-title { color: var(--text-2); } .ob-step-why { color: var(--text-2); font-size: 13px; margin-top: 2px; } .ob-step-evidence, .ob-step-hint { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; margin-top: 4px; } .ob-step-evidence { color: var(--success-text); } .ob-step.is-in_progress .ob-step-evidence { color: var(--warning-text); } .ob-step-hint { color: var(--text-3); } .ob-step-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .ob-summary h3 { margin: 0 0 4px; } .ob-client + .ob-client { border-top: 1px solid var(--line); } .ob-client-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 2px; background: none; border: 0; font: inherit; color: var(--text); cursor: pointer; text-align: left; } .ob-client > .ob-list { padding: 0 0 8px 22px; } .ob-bar { width: 90px; height: 8px; border-radius: 999px; background: var(--neutral-bg); overflow: hidden; flex: none; } .ob-bar > span { display: block; height: 100%; background: var(--purple); border-radius: 999px; } /* wizard: full-screen modal */ .modal.ob-wizard { max-width: none; width: 100%; height: 100%; max-height: none; border-radius: 0; } .overlay:has(> .modal.ob-wizard) { padding: 0; } .ob-wz-head { display: flex; align-items: center; gap: 14px; } .ob-wz-head h2 { font-size: 22px; margin: 0; } .ob-wz-dots { display: flex; gap: 6px; list-style: none; margin: 16px 0 0; padding: 0; overflow-x: auto; } .ob-wz-dots li { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--neutral-bg); color: var(--text-3); font-size: 13px; font-weight: 700; white-space: nowrap; } .ob-wz-dots li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--text-2); font-size: 12px; } .ob-wz-dots li em { font-style: normal; } .ob-wz-dots li.on { background: var(--purple); color: var(--primary-contrast, #fff); } .ob-wz-dots li.on span { color: var(--purple-text); } .ob-wz-dots li.done { background: var(--success-bg); color: var(--success-text); } .ob-wz-body { max-width: 720px; margin: 8px auto 0; padding: 8px 0 24px; } .ob-wz-body h3 { font-size: 20px; margin: 0 0 4px; } .ob-wz-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ob-wz-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; border: 2px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; } .ob-wz-choice:hover, .ob-wz-choice:focus-visible { border-color: var(--purple); } .ob-wz-choice .icon, .ob-wz-choice svg { color: var(--purple); } .ob-wz-brand { display: flex; gap: 18px; align-items: flex-start; } .ob-wz-logo { width: 96px; height: 96px; border-radius: var(--r-lg); flex: none; display: grid; place-items: center; overflow: hidden; color: #fff; font-size: 38px; font-weight: 800; } .ob-wz-logo img { max-width: 80%; max-height: 80%; object-fit: contain; } .ob-wz-finale { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: var(--r-lg); background: var(--lav); } .modal.ob-wizard .modal-foot { justify-content: flex-end; } /* empty states with a primary action (calendar, analytics, reviews) */ .ob-empty-cta { margin-bottom: 16px; } @media (max-width: 640px) { .ob-step { grid-template-columns: 28px minmax(0, 1fr); } .ob-step-acts { grid-column: 2; justify-content: flex-start; } .ob-wz-choices { grid-template-columns: minmax(0, 1fr); } .ob-wz-brand { flex-direction: column; } .ob-wz-dots li em { display: none; } .ob-wz-dots li { padding: 6px; } .ob-wz-head .mascot, .ob-wz-head > :first-child { display: none; } .ob-bar { display: none; } } /* ── end W18 ── */ /* ── W13 content plans (pages/content-plans.js) ── */ .cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .cp-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; text-align: left; font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--line); padding: 18px 16px 14px; } .cp-card:hover { border-color: var(--cp-color); } .cp-band { position: absolute; left: 0; top: 0; right: 0; height: 5px; background: var(--cp-color); } .cp-detail { display: flex; flex-direction: column; gap: 12px; } .cp-hero { display: flex; flex-direction: column; gap: 8px; } .cp-bar { height: 8px; border-radius: 999px; background: var(--lav); overflow: hidden; } .cp-bar span { display: block; height: 100%; background: var(--purple); transition: width 0.3s; } .cp-notes { margin: 0; padding-left: 18px; color: var(--text-2); font-weight: 600; } .cp-inputs { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; background: var(--surface); } .cp-input { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--text-2); } .cp-input .icon, .cp-input svg { flex: none; margin-top: 2px; color: var(--success); } .cp-input.off svg { color: var(--text-3); } .cp-input b { color: var(--text); font-weight: 800; margin-right: 4px; } .cp-acc { display: inline-flex; align-items: center; gap: 3px; margin-right: 8px; white-space: nowrap; } .cp-cadence { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } .cp-cad { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px 8px; font-weight: 700; font-size: 13px; } .cp-cad input, .cp-mix-f input { width: 64px; } .cp-mix { display: flex; flex-wrap: wrap; gap: 10px; } .cp-mix-f { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; } .cp-mixbar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--line); margin-top: 8px; max-width: 100%; } .cp-bad { color: var(--danger-text); font-weight: 800; } .cp-cat-promo { --cp-cat: var(--pink); } .cp-cat-educational { --cp-cat: var(--sky); } .cp-cat-community { --cp-cat: var(--mint); } .cp-cat-seasonal { --cp-cat: var(--purple); } .cp-cat-none { --cp-cat: var(--line); } .cp-mixbar span { display: block; height: 100%; background: var(--cp-cat); } .cp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--cp-cat); margin-right: 4px; } .cp-month .cal-cell { min-height: 104px; } .cp-chip { display: flex; align-items: center; gap: 4px; width: 100%; padding: 3px 6px; border: 0; border-left: 4px solid var(--cp-cat); border-radius: 7px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 11px; font-weight: 700; text-align: left; cursor: pointer; overflow: hidden; } .cp-chip:hover { filter: brightness(0.96); } .cp-chip .time { color: var(--text-2); font-variant-numeric: tabular-nums; } .cp-chip .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-chip.st-accepted { background: var(--mint-t); } .cp-chip.st-rejected { opacity: 0.5; text-decoration: line-through; } .cp-chip.st-created { background: var(--lav); } .cp-warn { color: var(--danger-text); flex: none; } .cp-list { display: flex; flex-direction: column; gap: 8px; } .cp-row { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border-left: 4px solid var(--line); } .cp-row.st-accepted { border-left-color: var(--mint); } .cp-row.st-created { border-left-color: var(--purple); } .cp-row.st-rejected { opacity: 0.6; } .cp-when { width: 92px; flex: none; display: flex; flex-direction: column; gap: 4px; } .cp-body { min-width: 0; cursor: pointer; display: flex; flex-direction: column; gap: 4px; } .cp-cap { margin: 0; color: var(--text-2); white-space: pre-line; overflow-wrap: anywhere; } .cp-err { color: var(--danger-text); font-weight: 700; } .cp-flag { display: inline-flex; align-items: center; gap: 4px; } .cp-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; flex: none; } .cp-issues { display: flex; flex-direction: column; gap: 4px; } .cp-issue { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; font-weight: 600; padding: 6px 8px; border-radius: var(--r-sm); background: var(--surface-2); } .cp-issue.error { color: var(--danger-text); } .cp-issue.warning { color: var(--text-2); background: var(--lemon-t); } .cp-tab-list { display: flex; flex-direction: column; gap: 6px; } .cp-tab-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: inherit; text-decoration: none; border: 1px solid var(--line); } .cp-tab-row:hover { border-color: var(--purple); } @media (max-width: 760px) { .cp-row { flex-wrap: wrap; } .cp-when { width: auto; flex-direction: row; align-items: center; gap: 8px; } .cp-body { flex-basis: 100%; } .cp-actions { justify-content: flex-start; } .cp-month .cp-chip .t, .cp-month .cp-chip .plat-stack { display: none; } .cp-tab-row { flex-wrap: wrap; } } /* ── end W13 ── */ /* ── W17 social listening (pages/listening.js) ── */ .ls-filters { flex-wrap: wrap; gap: 8px; } .ls-filters .field { margin: 0; } .ls-list { display: flex; flex-direction: column; gap: 10px; } .ls-mention { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; } .ls-mention.unread { border-left: 3px solid var(--primary); } .ls-mention.dismissed { opacity: .7; } .ls-m-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; } .ls-who { min-width: 0; overflow-wrap: anywhere; } .ls-m-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .ls-check input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--primary); } .ls-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); margin-right: 4px; vertical-align: middle; } .ls-term { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--lav); color: var(--purple-text); font-size: 12px; font-weight: 700; } .ls-term.muted { background: var(--surface-2); color: var(--text-2); font-weight: 600; } .ls-term.excl { background: var(--surface-2); color: var(--text-2); } .ls-excerpt { margin: 8px 0 4px; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.5; } .ls-metrics { margin-bottom: 4px; } .ls-replied { display: flex; align-items: center; gap: 6px; color: var(--success-text); font-weight: 700; margin-top: 4px; } .ls-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); } .ls-quote { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--lav-2); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 13px; overflow-wrap: anywhere; } .ls-honest { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; color: var(--text-2); } .ls-set-list { list-style: none; margin: 0; padding: 0; } .ls-set-list > li { padding: 12px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; } .ls-set-list > li:first-child { border-top: 0; padding-top: 0; } .ls-set-list > li.paused { opacity: .75; } .ls-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .ls-runs { display: flex; flex-wrap: wrap; gap: 8px 14px; } .ls-run { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; } .ls-run-msg { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ls-link { background: none; border: 0; padding: 0; color: var(--primary); font: inherit; cursor: pointer; text-decoration: underline; } .ls-form .field-help { white-space: normal; } .ls-sources-pick { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .ls-source-opt { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; } .ls-source-opt.on { border-color: var(--primary); background: var(--primary-soft); } .ls-source-opt input { margin-top: 3px; accent-color: var(--primary); } .ls-source-opt .pill { margin-left: 4px; } .ls-source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .ls-source p { margin: 8px 0 0; } .ls-acct { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 8px; border-radius: var(--r-sm); background: var(--surface-2); } .ls-acct.ok { color: var(--success-text); } .ls-caps { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .ls-steps { margin: 6px 0; padding-left: 18px; } .ls-steps li + li { margin-top: 4px; } .ls-usage { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .ls-bar { display: block; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .ls-bar span { display: block; height: 100%; background: var(--primary); } .ls-warn { color: var(--warning-text); font-weight: 700; } .ls-unsup-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .ls-unsup-list p { margin: 4px 0 0; } @media (max-width: 720px) { .ls-m-tags { justify-content: flex-start; width: 100%; } .ls-source-grid, .ls-unsup-list { grid-template-columns: minmax(0, 1fr); } .ls-run-msg { max-width: 220px; } } /* ── end W17 ── */ /* ── W14: image alt text + post translation (pages/alt-text.js) ── */ .alt-tool .pill { margin-left: 6px; } .alt-suggest { display: grid; gap: 8px; } .alt-suggest-box { border: 1px dashed var(--lav-2, var(--line)); border-radius: var(--r-md); padding: 10px 12px; background: var(--surface); display: grid; gap: 6px; } .alt-suggest-text { margin: 0; font-size: 14px; line-height: 1.45; } .alt-list { display: grid; gap: 12px; } .alt-editor { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .alt-editor-img { position: relative; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); aspect-ratio: 1 / 1; } .alt-editor-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .alt-editor-img .alt-flag { position: absolute; left: 4px; bottom: 4px; } .alt-editor-body { display: grid; gap: 6px; min-width: 0; } .alt-editor-body .field { margin: 0; } .alt-pf { display: inline-flex; align-items: center; gap: 3px; margin: 0 4px; font-weight: 700; color: var(--text-2); } .alt-bulk-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .alt-bulk-head .stat-tile { min-width: 180px; } .alt-progress { display: grid; gap: 6px; } .tr-langs .select, .tr-langs .field { min-width: 200px; } .tr-token { display: inline-block; margin: 2px 4px 2px 0; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); font-family: var(--mono); font-size: 12px; color: var(--text-2); } .tr-pair { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); display: grid; gap: 8px; } .tr-pair.flagged { border-color: var(--warning, #F5B81B); background: var(--warning-bg); } .tr-pair-head { display: flex; align-items: center; gap: 8px; } .tr-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } .tr-cols .textarea { width: 100%; } .tr-original { white-space: pre-wrap; font-size: 14px; line-height: 1.45; padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-2); min-height: 100%; } @media (max-width: 720px) { .alt-editor { grid-template-columns: 72px minmax(0, 1fr); } .tr-cols { grid-template-columns: minmax(0, 1fr); } } /* ── end W14 ── */ /* ── W16: tasks board (pages/tasks.js) + portal requests (pages/portal-requests.js) ── */ .tk-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; } .tk-filters .field { margin: 0; } .tk-filters .tk-search { min-width: 200px; flex: 1 1 200px; max-width: 320px; } .tk-board-wrap { position: relative; } .tk-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(214px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: start; overscroll-behavior-x: contain; } .tk-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); display: flex; flex-direction: column; min-height: 220px; } .tk-col.drop-on { border-color: var(--primary); box-shadow: var(--focus-ring); } .tk-col-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; } .tk-col-head h3 { font-size: 14px; margin: 0; font-weight: 800; } .tk-count { font-size: 12px; font-weight: 800; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 0 8px; line-height: 20px; } .tk-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; } .tk-col-body { display: flex; flex-direction: column; gap: 8px; padding: 4px 10px 12px; min-height: 120px; flex: 1; } .tk-empty { padding: 14px 8px; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--r-md); } .tk-placeholder { height: 54px; border-radius: var(--r-md); border: 2px dashed var(--primary); background: var(--primary-soft); flex: none; } .tk-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; text-align: left; box-shadow: var(--shadow-sm); } .tk-card:hover { border-color: var(--border-strong); } .tk-card:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--r-md); } .tk-card[draggable="true"] { cursor: grab; } .tk-card.dragging { opacity: .45; } .tk-card.is-request { border-left: 4px solid var(--primary); } .tk-card.is-done .tk-title { color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--text-3); } .tk-card-top { display: flex; align-items: center; gap: 6px; min-height: 20px; } .tk-card-top .dropdown .menu { z-index: 30; } .tk-move-btn { width: 26px; height: 26px; } .tk-menu-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); padding: 4px 10px 2px; } .tk-title { font-weight: 800; font-size: 14px; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; } .tk-client { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-weight: 600; } .tk-labels { display: flex; flex-wrap: wrap; gap: 4px; } .tk-label { font-size: 11px; font-weight: 700; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 0 7px; line-height: 18px; } .tk-meta { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-weight: 700; flex-wrap: wrap; } .tk-meta > span { display: inline-flex; align-items: center; gap: 3px; } .tk-due.soon { color: var(--warning-text); } .tk-due.overdue { color: var(--danger-text); } .tk-unassigned { width: 22px; height: 22px; border-radius: 50%; border: 1px dashed var(--border-strong); justify-content: center; color: var(--text-3); } .tk-list { display: grid; gap: 16px; } .tk-list-group { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding-bottom: 10px; } .tk-list-cards { display: grid; gap: 8px; padding: 0 10px; } .tk-list-group .tk-empty { margin: 0 10px; } .tk-drawer .tk-sec { margin-top: 20px; } .tk-drawer .tk-sec h4 { display: flex; align-items: center; gap: 6px; font-size: 14px; margin: 0 0 8px; } .tk-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .tk-checklist li { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--r-sm); } .tk-checklist li:hover { background: var(--surface-2); } .tk-checklist label { display: flex; align-items: center; gap: 8px; flex: 1; font-weight: 600; cursor: pointer; } .tk-checklist input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); } .tk-checklist li.done span { text-decoration: line-through; color: var(--text-3); } .tk-link { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: 6px; background: var(--surface); } .tk-linker { padding: 12px; } .tk-pick { display: block; width: 100%; text-align: left; padding: 7px 8px; border-radius: var(--r-sm); font-weight: 600; color: var(--text); background: none; border: 0; cursor: pointer; } .tk-pick:hover, .tk-pick:focus-visible { background: var(--surface-2); } .tk-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; } .tk-file { position: relative; border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px; background: var(--surface); } .tk-file .icon-btn { position: absolute; top: 4px; right: 4px; background: var(--surface); } .tk-file-thumb { display: grid; place-items: center; height: 76px; border-radius: var(--r-sm); background: var(--surface-2); overflow: hidden; color: var(--text-2); } .tk-file-thumb img { width: 100%; height: 100%; object-fit: cover; } .tk-file-name { margin-top: 4px; } .tk-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; max-height: 240px; overflow-y: auto; } .tk-media-pick { height: 72px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); overflow: hidden; padding: 0; cursor: pointer; display: grid; place-items: center; } .tk-media-pick img { width: 100%; height: 100%; object-fit: cover; } .tk-media-pick:hover, .tk-media-pick:focus-visible { border-color: var(--primary); } .tk-comments { display: grid; gap: 12px; margin-top: 12px; } .tk-comment { display: flex; gap: 10px; align-items: flex-start; } .tk-comment-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .tk-comment-body { margin-top: 4px; padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-2); overflow-wrap: anywhere; } .tk-comment.internal .tk-comment-body { background: var(--surface-2); border: 1px dashed var(--border-strong); } .tk-comment.client .tk-comment-body { background: var(--primary-soft); } .tk-comment-body .mention { color: var(--primary); font-weight: 800; } .tk-compose { border-top: 1px solid var(--border); padding-top: 12px; } .tk-visibility { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .tk-activity { list-style: none; margin: 12px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--border); display: grid; gap: 10px; } .tk-activity li { position: relative; font-size: 13px; } .tk-activity li::before { content: ''; position: absolute; left: -20px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary); } .tk-colcfg { display: grid; gap: 8px; } .tk-colcfg-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tk-colcfg-row .field { margin: 0; } .tk-color { width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-sm); background: none; cursor: pointer; } .tk-client-tab { margin-top: 4px; } @media (max-width: 760px) { .tk-filters .field, .tk-filters .tk-search { flex: 1 1 140px; max-width: none; min-width: 0; } } /* portal requests */ .prq-list { display: grid; gap: 10px; } .prq-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--text); text-decoration: none; } .prq-item:hover { text-decoration: none; border-color: var(--primary); } .prq-count { display: inline-flex; align-items: center; gap: 4px; } .prq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; } .prq-details { white-space: pre-line; margin: 0; font-weight: 600; } .prq-attachments { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; } .prq-attachment { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); text-decoration: none; } .prq-attachment img { width: 100%; height: 80px; object-fit: cover; border-radius: var(--r-sm); } .prq-msg { margin: 0 0 12px; max-width: 88%; } .prq-msg.client { margin-left: auto; text-align: right; } .prq-bubble { display: inline-block; text-align: left; padding: 9px 13px; border-radius: 16px; background: var(--surface-2); white-space: pre-line; overflow-wrap: anywhere; font-weight: 600; } .prq-msg.client .prq-bubble { background: var(--primary); color: var(--primary-contrast); } .prq-msg-head { margin-bottom: 3px; } .prq-reply { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; } .prq-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .prq-files li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); } @media (max-width: 860px) { .prq-grid { grid-template-columns: 1fr; } .prq-msg { max-width: 100%; } } /* ── end W16 ── */ /* ── video-tools (W15) ── */ .ve-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: 20px; align-items: start; } .ve-embedded .ve-grid { grid-template-columns: 1fr; } @media (max-width: 1080px) { .ve-grid { grid-template-columns: 1fr; } } .ve-stage-wrap { display: flex; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px; } .ve-stage { position: relative; max-width: 100%; border-radius: var(--r-md); overflow: hidden; outline: none; touch-action: none; user-select: none; } .ve-stage:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); } .ve-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; } .ve-stage.ve-cropping { cursor: crosshair; } .ve-crop { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(16, 29, 58, .55); border-radius: 4px; pointer-events: none; } .ve-crop-label { position: absolute; top: 6px; left: 6px; background: #FFD23F; color: var(--navy); font-weight: 800; font-size: 11px; padding: 1px 7px; border-radius: 999px; } .ve-focal { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 3px solid #fff; border-radius: 50%; background: #FF4F8B; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); pointer-events: none; } .ve-cap-area { position: absolute; pointer-events: none; } .ve-unplayable { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; text-align: center; padding: 16px; color: #fff; font-size: 13px; background: rgba(16, 29, 58, .85); } .ve-cap-col { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-left: 7%; padding-right: 7%; } .ve-cap { display: inline-block; text-align: center; font-weight: 800; line-height: 1.25; padding: .12em .45em; border-radius: .2em; white-space: pre-line; max-width: 100%; } .ve-controls { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .ve-time { font-size: 13px; color: var(--text-2); font-family: var(--mono); } .ve-track { position: relative; height: 38px; margin: 10px 8px 4px; background: var(--surface-3); border-radius: 10px; cursor: pointer; touch-action: none; } .ve-range { position: absolute; top: 0; bottom: 0; background: var(--purple-100); border: 2px solid var(--purple); border-radius: 8px; } .ve-handle { position: absolute; top: -4px; bottom: -4px; width: 14px; margin-left: -7px; border: 0; border-radius: 6px; background: var(--purple); cursor: ew-resize; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); } .ve-handle:focus-visible { outline: 3px solid var(--focus-ring); } .ve-handle::after { content: ''; position: absolute; left: 4px; top: 30%; bottom: 30%; width: 4px; border-left: 1px solid #fff; border-right: 1px solid #fff; } .ve-playhead { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--pink); pointer-events: none; } .ve-covermark { position: absolute; top: -10px; width: 10px; height: 10px; margin-left: -5px; background: #FFD23F; border: 2px solid var(--navy); border-radius: 50%; pointer-events: none; } .ve-cuemarks { position: absolute; left: 0; right: 0; bottom: 3px; height: 5px; pointer-events: none; } .ve-cuemark { position: absolute; top: 0; bottom: 0; background: var(--teal); border-radius: 3px; opacity: .85; } .ve-trim-row { display: grid; grid-template-columns: 110px 110px 1fr; gap: 10px; align-items: end; margin-top: 6px; } .ve-trim-btns { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 14px; } .ve-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; } .ve-cover-row { display: flex; gap: 12px; align-items: center; } .ve-cover-thumb { width: 96px; max-height: 120px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border); } .ve-support { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; } .ve-support li { display: flex; align-items: center; gap: 8px; font-size: 13px; } .ve-cap-head { display: flex; gap: 10px; align-items: flex-end; } .ve-cap-head .field { width: 120px; } .ve-upload { margin-bottom: 14px; } .ve-cues { display: grid; gap: 8px; max-height: 340px; overflow: auto; padding-right: 4px; } .ve-cue { border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px; background: var(--surface-2); } .ve-cue.active { border-color: var(--purple); } .ve-cue.invalid { border-color: var(--danger); background: var(--danger-bg); } .ve-cue-times { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; } .ve-cue-times .input { width: 86px; padding: 4px 6px; } .ve-cue textarea { width: 100%; resize: vertical; min-height: 44px; } .ve-cue .link { background: none; border: 0; color: var(--purple); cursor: pointer; padding: 0; font-weight: 700; } .ve-tips { margin: 8px 0 0; padding-left: 18px; color: var(--warning-text); } .ve-style .color-swatch { width: 24px; height: 24px; } .ve-check { border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; margin-top: 8px; } .ve-check.bad { border-color: var(--danger); } .ve-check-head { display: flex; align-items: center; gap: 8px; } .ve-findings { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; color: var(--text-2); } .ve-findings li { display: flex; gap: 6px; align-items: flex-start; } .ve-findings li svg { flex: none; margin-top: 2px; color: var(--warning); } .ve-findings li.err { color: var(--danger-text); } .ve-findings li.err svg { color: var(--danger); } .ve-footer { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; display: grid; gap: 10px; } .ve-progress .progress { margin-top: 4px; } .ve-history { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .ve-hist { display: inline-flex; gap: 4px; align-items: center; } .ve-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .ve-pick-item { display: grid; gap: 4px; text-align: left; cursor: pointer; padding: 14px; border: 1px solid var(--border); background: var(--surface); } .ve-pick-item:hover { border-color: var(--purple); } .media-thumb video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; background: var(--navy); } /* ── end W15 ── */ /* ── W24 customer photos (pages/photos.js) ── */ .ugc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; } .ugc-sub { padding: 16px; display: flex; flex-direction: column; gap: 12px; } .ugc-sub-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap; } .ugc-note { display: inline-flex; align-items: center; gap: 5px; } .ugc-sub-who { display: flex; gap: 10px; align-items: center; min-width: 0; } .ugc-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--lemon); flex: none; font-size: 18px; } .ugc-credit { font-weight: 800; letter-spacing: -.01em; } .minw0 { min-width: 0; } .ugc-consent-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); border-radius: 999px; padding: 4px 10px; font: 700 12px var(--font); cursor: pointer; white-space: nowrap; } .ugc-consent-chip:hover { border-color: var(--primary); color: var(--primary); } .ugc-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .ugc-photo { margin: 0; display: flex; flex-direction: column; gap: 6px; } .ugc-photo.is-rejected .ugc-thumb, .ugc-photo.is-withdrawn .ugc-thumb { opacity: .55; } .ugc-thumb { display: block; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: var(--surface-3); border: 1px solid var(--border); } .ugc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ugc-thumb-gone { display: grid; place-items: center; align-content: center; gap: 4px; color: var(--text-3); font-size: 12px; font-weight: 700; } .ugc-photo figcaption { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .ugc-photo-actions { display: inline-flex; gap: 4px; } .ugc-sub-foot { display: flex; gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; } .ugc-takedown { background: var(--warning-bg); color: var(--warning-text); border-radius: var(--r-sm); padding: 8px; display: grid; gap: 6px; } .ugc-takedown p { margin: 0; } .ugc-approved-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } .ugc-approved { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .ugc-approved .ugc-thumb { border: 0; border-radius: 0; aspect-ratio: 4 / 3; } .ugc-approved-body { padding: 12px; display: grid; gap: 6px; } .ugc-credit-line { display: flex; align-items: center; gap: 6px; font-weight: 800; } .ugc-alt { margin: 0; color: var(--text-2); } .ugc-h3 { font-size: 14px; margin: 18px 0 6px; } .ugc-licence { white-space: pre-wrap; font: 13px/1.55 var(--font); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; margin: 0; max-height: 320px; overflow: auto; } .ugc-photo-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; } .ugc-credit-tool { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; } @media (max-width: 520px) { .ugc-grid { grid-template-columns: 1fr; } .ugc-sub-head { flex-direction: column; } } /* ── end W24 ── */ /* ── W23: report narrative ("What happened this month", pages/report-narrative.js) ── */ .nar-card .nar-empty { display: flex; gap: 14px; align-items: flex-start; } .nar-instr { height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: inherit; font: inherit; font-size: 13px; min-width: 220px; } .nar-editor { display: flex; flex-direction: column; gap: 14px; } .nar-sec-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin-bottom: 4px; } .nar-stmt { margin-bottom: 8px; } .nar-stmt.warn .nar-text { border-color: var(--warning); } .nar-text { width: 100%; resize: vertical; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: inherit; font: inherit; font-size: 14px; line-height: 1.45; } .nar-text.headline { font-weight: 800; font-size: 15px; } .nar-text:focus { outline: 2px solid var(--purple); outline-offset: 0; border-color: transparent; } .nar-meta { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; margin-top: 3px; min-height: 14px; } .nar-ref { display: inline-block; font-size: 10px; font-weight: 800; line-height: 1; padding: 2px 4px; border-radius: 6px; background: var(--purple-bg); color: var(--purple-text); cursor: pointer; vertical-align: super; } .nar-ref.missing { background: var(--danger-bg, #FDE8EA); color: var(--danger-text); } .nar-flag { font-size: 11px; font-weight: 700; color: var(--warning-text); } .nar-warn { font-size: 11px; font-weight: 700; color: var(--danger-text); } .nar-dropped { margin: 6px 0 0; padding-left: 18px; } .nar-dropped li { margin-bottom: 4px; } .nar-actions { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; } .nar-regen { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; } .nar-regen .chip { cursor: pointer; border: 0; height: 26px; font: inherit; font-size: 12px; font-weight: 700; } .nar-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .nar-versions, .nar-facts { margin: 8px 0 0; padding-left: 18px; font-size: 13px; } .nar-facts { list-style: none; padding-left: 0; } .nar-versions li, .nar-facts li { margin-bottom: 4px; } .nar-facts li.active { background: var(--purple-bg); box-shadow: 0 0 0 4px var(--purple-bg); border-radius: 6px; } .nar-public { border-left: 5px solid var(--purple); } .nar-public.preview { background: var(--surface-2); } .nar-public .nar-headline { font-size: 17px; font-weight: 800; line-height: 1.4; margin: 8px 0 10px; } .nar-public-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 20px; } .nar-public-grid ul { margin: 0; padding-left: 18px; font-weight: 600; font-size: 14px; line-height: 1.5; } @media (max-width: 640px) { .nar-card .nar-empty { flex-direction: column; } .nar-instr { min-width: 0; width: 100%; } } /* ── end W23 ── */ /* ── W21 Woo daily briefing (pages/briefing.js) ── */ .bf-page { max-width: 980px; } .bf-meta { margin: 6px 0 0; color: var(--text-2); font-weight: 700; font-size: 13px; } .bf-keys { display: flex; flex-wrap: wrap; gap: 14px; } .bf-keys kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px; background: var(--surface); font: 700 12px var(--mono); text-align: center; } .bf-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 14px; } .bf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 800; font-size: 13px; cursor: pointer; text-decoration: none; } .bf-chip:hover { border-color: var(--purple); } .bf-chip.is-empty { opacity: .55; } .bf-chip.is-urgent:not(.is-empty) { background: var(--danger-bg); color: var(--danger-text); border-color: transparent; } .bf-count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 800; text-align: center; } .bf-chip.is-urgent:not(.is-empty) .bf-count { background: var(--danger); color: #fff; } .bf-hidden { margin-left: auto; } .bf-section { margin: 0 0 22px; } .bf-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 8px; } .bf-section-head h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; letter-spacing: -.01em; } .bf-section.is-urgent .bf-section-head h2 { color: var(--danger-text); } .bf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .bf-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); outline: none; } .bf-item.is-urgent { border-left: 4px solid var(--danger); } .bf-item.is-active, .bf-item:focus-visible { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-100); } .bf-icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--purple); } .bf-item.is-urgent .bf-icon { background: var(--danger-bg); color: var(--danger-text); } .bf-main { min-width: 0; } .bf-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .bf-title { color: var(--text); font-weight: 800; text-decoration: none; overflow-wrap: anywhere; } .bf-title:hover { color: var(--purple); } .bf-client { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); font-size: 12px; font-weight: 700; } .bf-excerpt { margin: 4px 0 0; color: var(--text-2); font-size: 13.5px; overflow-wrap: anywhere; } .bf-why { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; } .bf-why li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--danger-text); } .bf-why li.is-ai { color: var(--purple-text); } .bf-why-tag { padding: 0 6px; border-radius: 6px; background: var(--danger-bg); font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; } .bf-why li.is-ai .bf-why-tag { background: var(--purple-bg); } .bf-draft { margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--purple); border-radius: var(--r-md); background: var(--purple-50); } .bf-draft-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--purple-text); } .bf-draft-body { margin: 4px 0 0; font-size: 13px; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; } .bf-actions { display: flex; align-items: center; gap: 6px; } .bf-disclaimer { margin-top: 18px; } .bf-card { margin-bottom: 14px; padding: 16px 20px; } .bf-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .bf-card-head h3 { display: flex; align-items: center; gap: 6px; margin: 0; } .bf-card .bf-chips { margin: 0; } .bf-woo-note { gap: 5px; } :root[data-theme="dark"] .bf-draft { background: var(--surface-2); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bf-draft { background: var(--surface-2); } } @media (max-width: 720px) { .bf-item { grid-template-columns: minmax(0, 1fr); } .bf-icon { display: none; } .bf-actions { flex-wrap: wrap; } .bf-hidden { margin-left: 0; width: 100%; } } /* ── end W21 ── */ /* ── W19 franchise mode (pages/franchise.js) ── */ .fr-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 10px; border-radius: 999px; background: var(--purple-50); color: var(--purple-text); font-size: 12.5px; font-weight: 700; } .fr-chip button { border: 0; background: none; color: inherit; font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; } .fr-plats, .fr-unit-pick { display: flex; flex-wrap: wrap; gap: 8px; } .fr-plat { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 700; cursor: pointer; } .fr-plat input { margin: 0; } .fr-plat.on { border-color: var(--purple); background: var(--purple-50); color: var(--purple-text); } .fr-warn { color: var(--warning-text); font-weight: 600; display: flex; gap: 6px; align-items: flex-start; } .fr-section { border-top: 1px solid var(--line); padding-top: 14px; } .fr-section h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 14px; } .fr-publish-warn { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: var(--warning-bg); color: var(--warning-text); font-size: 13.5px; } .fr-publish-warn svg { flex: none; margin-top: 2px; } .fr-media-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; } .fr-media { position: relative; aspect-ratio: 1; border: 2px solid var(--border); border-radius: var(--r-md); padding: 0; overflow: hidden; background: var(--surface-2); cursor: pointer; } .fr-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .fr-media.on { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-50); } .fr-media-n { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--purple); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; } .fr-board { display: grid; gap: 14px; } .fr-body { white-space: pre-wrap; margin: 0 0 8px; font-size: 15px; line-height: 1.5; } .fr-body.locked { padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px dashed var(--border-strong); color: var(--text-2); } .fr-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; font-weight: 600; color: var(--text-2); } .fr-facts span { display: inline-flex; align-items: center; gap: 5px; } .fr-danger-text { color: var(--danger-text); } .fr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .fr-tile { padding: 14px 16px; } .fr-tile .value { font-size: 26px; font-weight: 800; letter-spacing: -.02em; } .fr-tile.tone-success { border-top: 3px solid var(--success); } .fr-tile.tone-purple { border-top: 3px solid var(--purple); } .fr-tile.tone-warning { border-top: 3px solid var(--warning); } .fr-tile.tone-danger { border-top: 3px solid var(--danger); } .fr-tile.tone-neutral { border-top: 3px solid var(--border-strong); } .fr-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .fr-scroll .fr-table { min-width: 560px; } .fr-table td { vertical-align: top; } .fr-table .num { text-align: right; } .fr-reason { color: var(--text-2); font-style: italic; margin-top: 2px; } .fr-problems { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; } .fr-problems li { display: flex; gap: 5px; align-items: flex-start; color: var(--warning-text); } .fr-problems li.error { color: var(--danger-text); } .fr-problems li svg { flex: none; margin-top: 2px; } .fr-ok { color: var(--success-text); font-weight: 700; display: inline-flex; gap: 4px; align-items: center; } .fr-nd td { background: var(--surface-2); } .fr-report { display: grid; gap: 14px; } .fr-roll { display: grid; gap: 2px; } .fr-roll-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-sm); } .fr-roll-row.brand { background: var(--purple-50); } .fr-roll-row.region { background: var(--surface-2); margin-top: 6px; } .fr-roll-row.unit { padding-left: 26px; } .fr-num { min-width: 80px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; } .fr-num.muted { color: var(--text-3); font-weight: 600; } .fr-cov { min-width: 150px; text-align: right; font-size: 11.5px; font-weight: 700; color: var(--text-3); } .fr-cov.partial { color: var(--warning-text); } .fr-cov.complete { color: var(--success-text); } .fr-pending { display: inline-flex; gap: 4px; align-items: center; color: var(--warning-text); } .fr-post-list { display: grid; gap: 8px; } .fr-post-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-align: left; cursor: pointer; border: 1px solid var(--border); background: var(--surface); width: 100%; } .fr-post-row:hover { border-color: var(--purple); } .fr-counts { display: inline-flex; gap: 4px; } .fr-counts span, .fr-dot { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; font-size: 12px; font-weight: 800; display: inline-grid; place-items: center; } .fr-dot { min-width: 10px; width: 10px; height: 10px; padding: 0; } .fr-counts .ok, .fr-dot.ok { background: var(--success-bg); color: var(--success-text); } .fr-counts .wait, .fr-dot.wait { background: var(--warning-bg); color: var(--warning-text); } .fr-counts .skip, .fr-dot.skip { background: var(--neutral-bg); color: var(--neutral-text); } .fr-counts .bad, .fr-dot.bad { background: var(--danger-bg); color: var(--danger-text); } .fr-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .fr-assets.sm { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin-bottom: 8px; } .fr-asset { margin: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); } .fr-asset img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--surface-2); } .fr-asset figcaption { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 12px; font-weight: 600; } .fr-asset figcaption .truncate { flex: 1; min-width: 0; } .fr-pre { white-space: pre-wrap; margin: 0; line-height: 1.55; } .fr-deadline { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-md); background: var(--info-bg); color: var(--info-text); font-size: 13.5px; } .fr-deadline.publish { background: var(--warning-bg); color: var(--warning-text); } .fr-deadline svg { flex: none; margin-top: 2px; } .fr-rules ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-2); font-weight: 600; } .fr-preview { border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; margin-top: 6px; background: var(--surface); } .fr-preview-body { white-space: pre-wrap; font-size: 13.5px; margin-top: 4px; } .fr-guide summary { cursor: pointer; font-weight: 700; font-size: 13px; } .fr-actions { display: flex; flex-wrap: wrap; gap: 8px; } .fr-inbox { display: grid; gap: 8px; } .fr-inbox-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 20px; width: 100%; border: 1px solid var(--border); background: var(--surface); cursor: pointer; overflow: hidden; } .fr-inbox-item:hover, .fr-inbox-item.active { border-color: var(--purple); } .fr-band { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; } .fr-left { flex: none; font-size: 12px; font-weight: 800; color: var(--warning-text); background: var(--warning-bg); padding: 3px 9px; border-radius: 999px; } .fr-dash { border-left: 5px solid var(--purple); margin-bottom: 14px; } .fr-dash-list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; } .fr-origin { margin-top: 12px; } @media (max-width: 640px) { .fr-cov { min-width: 0; } .fr-roll-row { flex-wrap: wrap; } .fr-num { min-width: 60px; } .fr-post-row { flex-wrap: wrap; } } /* ── end W19 ── */ /* ── W20 review campaigns by e-mail ── */ .rc-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; } .rc-editor-form { min-width: 0; } .rc-preview { position: sticky; top: 0; min-width: 0; background: var(--surface-2, var(--surface)); border: 1px solid var(--line); border-radius: 16px; padding: 14px; } .rc-frame { width: 100%; height: 560px; border: 1px solid var(--line); border-radius: 12px; background: #F5F6FA; } .rc-meta { display: grid; gap: 2px; margin-bottom: 8px; } .rc-meta .muted { display: inline-block; min-width: 56px; } .rc-h4 { margin: 22px 0 8px; font-size: 15px; } .rc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .rc-chips .pill { cursor: pointer; font-family: var(--mono, monospace); } .rc-details { margin-top: 10px; } .rc-details summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--text-2); } .rc-pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px; max-height: 260px; overflow: auto; } .rc-followup { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 10px; } .rc-card { display: grid; gap: 8px; } .rc-title { margin: 0; font-size: 18px; letter-spacing: -.02em; } .rc-counts { display: flex; flex-wrap: wrap; gap: 18px; } .rc-counts div { display: grid; } .rc-counts b { font-size: 20px; } .rc-counts span { font-size: 12px; color: var(--text-2); } .rc-ready { margin: 0; padding: 8px 10px; list-style: none; background: var(--lemon); color: var(--navy); border-radius: 10px; font-size: 13px; display: grid; gap: 4px; } .rc-table { width: 100%; } .rc-table td { vertical-align: top; } .rc-row-actions { white-space: nowrap; text-align: right; } .rc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .rc-drop { display: flex; align-items: center; gap: 10px; padding: 18px; border: 2px dashed var(--line); border-radius: 14px; cursor: pointer; } .rc-drop input { position: absolute; opacity: 0; width: 1px; height: 1px; } .rc-drop:focus-within { border-color: var(--purple); } .rc-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; } .rc-mini { display: grid; gap: 6px; } .rc-mini-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; } @media (max-width: 900px) { .rc-editor { grid-template-columns: 1fr; } .rc-preview { position: static; } } @media (max-width: 640px) { .rc-table thead { display: none; } .rc-table tr { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); } .rc-table td { border: 0; padding: 2px 0; } .rc-row-actions { text-align: left; } } /* ── end W20 ── */ /* ── W22 MCP server (pages/mcp.js) ── */ .mcp-settings { display: grid; gap: 16px; } .mcp-url { margin-top: 4px; } .mcp-url .grow { overflow-wrap: anywhere; min-width: 0; } .mcp-steps { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; color: var(--text-2); } .mcp-steps b { color: var(--text); } .mcp-code { position: relative; margin-top: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 12px 12px 44px; } .mcp-code pre { margin: 0; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow: auto; } .mcp-code > :last-child:not(pre) { position: absolute; right: 10px; bottom: 8px; } .mcp-tool-list { margin-top: 8px; } .mcp-tool-list .list-row { flex-wrap: wrap; } .connect-ai { max-width: 720px; margin: 0 auto; } .connect-ai-card { padding: 22px; } .connect-ai-head { display: flex; gap: 14px; align-items: flex-start; } .connect-ai-head > div:nth-child(2) { flex: 1; min-width: 0; } .connect-ai-logo { width: 48px; height: 48px; border-radius: 16px; background: var(--lav); color: var(--purple); display: grid; place-items: center; flex: none; } .connect-ai-title { font-size: 20px; margin: 0 0 4px; letter-spacing: -.01em; overflow-wrap: anywhere; } .connect-ai-scopes .check { display: flex; margin: 6px 0; } .connect-ai-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; } @media (max-width: 640px) { .connect-ai-head { flex-wrap: wrap; } .connect-ai-head > div:nth-child(2) { flex-basis: calc(100% - 62px); } .connect-ai-head > :last-child { margin-left: 62px; } .connect-ai-actions > * { flex: 1; } } /* ── end W22 ── */ /* ── W25 caption A/B tests ── */ .ab-list { display: grid; gap: 8px; } .ab-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: inherit; text-decoration: none; } .ab-row:hover { border-color: var(--purple); } .ab-form { display: grid; gap: 12px; } .ab-accounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; } .ab-account { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; min-width: 0; } .ab-account.on { border-color: var(--purple); background: var(--purple-50); } .ab-captions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .ab-woo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; } .ab-woo .alert { flex-basis: 100%; } .ab-notes, .ab-explain, .ab-warn { margin: 8px 0 0; padding-left: 18px; color: var(--text-2); font-size: 13px; display: grid; gap: 3px; } .ab-warn { list-style: none; padding-left: 0; } .ab-warn li { display: flex; gap: 6px; align-items: flex-start; } .ab-warn li svg { flex: none; margin-top: 2px; color: var(--warning); } .ab-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } .ab-detail > *, .ab-arms > *, .ab-two > * { min-width: 0; } .ab-detail .card-body { overflow-x: auto; } .ab-verdict-head { display: flex; gap: 12px; align-items: flex-start; } .ab-verdict-head > svg { flex: none; color: var(--text-3); margin-top: 2px; } .ab-verdict.v-a_better .ab-verdict-head > svg, .ab-verdict.v-b_better .ab-verdict-head > svg { color: var(--success); } .ab-verdict.v-not_enough_data .ab-verdict-head > svg { color: var(--warning); } .ab-headline { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; } .ab-sentence { margin-top: 4px; font-size: 15px; color: var(--text); } .ab-chart { margin: 12px 0 0; } .ab-chart svg { width: 100%; max-width: 640px; height: auto; display: block; } .ab-axis { stroke: var(--viz-axis); stroke-width: 1; } .ab-zero { stroke: var(--viz-muted); stroke-width: 1; stroke-dasharray: 3 3; } .ab-tick { fill: var(--viz-muted); font-size: 11px; } .ab-val { fill: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; } .ab-val.strong { fill: var(--text); font-weight: 800; font-size: 13px; } .ab-ci { fill: var(--viz-1); opacity: 0.28; } .ab-ci.crosses { fill: var(--viz-muted); } .ab-est { fill: var(--viz-1); stroke: var(--surface); stroke-width: 2; } .ab-est.crosses { fill: var(--viz-muted); } .ab-arms, .ab-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ab-caption { white-space: pre-wrap; margin: 0 0 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); font-size: 14px; } .ab-arm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; } .ab-arm-stats > div { display: grid; gap: 2px; } .ab-arm-stats .k { font-size: 12px; color: var(--text-2); font-weight: 600; } .ab-arm-stats .v { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; } .ab-units { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .ab-unit { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); } .ab-arm-tag { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-weight: 800; font-size: 12px; } .ab-arm-tag.arm-a, .ab-arm.arm-a .card-head h3 { color: var(--viz-6); } .ab-arm-tag.arm-a { background: color-mix(in srgb, var(--viz-6) 14%, transparent); } .ab-arm-tag.arm-b, .ab-arm.arm-b .card-head h3 { color: var(--viz-1); } .ab-arm-tag.arm-b { background: color-mix(in srgb, var(--viz-1) 14%, transparent); } .ab-cov + .ab-cov { margin-top: 10px; } .ab-cov ul { margin: 4px 0 0; padding-left: 18px; color: var(--text-2); font-size: 13px; } .ab-posts tr.excluded td { color: var(--text-3); } .ab-map { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; } .ab-limits { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 13px; } .ab-limits dt { font-weight: 800; } .ab-limits dd { margin: 0; color: var(--text-2); } .ab-tool { display: inline-flex; } @media (max-width: 760px) { .ab-captions, .ab-arms, .ab-two { grid-template-columns: 1fr; } .ab-limits { grid-template-columns: 1fr; } .ab-headline { font-size: 19px; } .ab-verdict-head { flex-wrap: wrap; } .ab-verdict-head .grow { flex-basis: calc(100% - 40px); } } /* ── end W25 ── */ /* ── Installer: upgrade banner + Settings → System (pages/system.js) ── */ .upgrade-ribbon { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r-md); background: var(--info-bg); color: var(--info-text); border: 1px solid var(--border); font-size: 14px; } .upgrade-ribbon > span { flex: 1; min-width: 200px; color: var(--text); } .upgrade-ribbon.is-done { background: var(--success-bg); color: var(--success-text); } .upgrade-ribbon.is-error { background: var(--danger-bg); color: var(--danger-text); } .system-tab { display: grid; gap: 16px; } .cron-urls { display: grid; gap: 14px; } .cron-url-line { display: flex; gap: 8px; align-items: center; margin: 4px 0 2px; min-width: 0; } .cron-url { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-family: var(--mono); font-size: 12px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); } .system-token { display: grid; gap: 10px; } .system-token-row { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); } .system-token-row code { flex: 1; word-break: break-all; font-size: 13px; } /* ── Grid planner ── (pages/grid.js, #/grid). Tiles are photos, so their chips use fixed dark/white * overlays that read the same in light and dark mode; everything around the grid uses tokens. ── */ .gp-toolbar .gp-sel { min-width: 170px; } .gp-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; } .gp-source, .gp-hint { margin: 0 0 10px; } .gp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; max-width: 640px; } .gp-tile { position: relative; aspect-ratio: var(--gp-ratio, 0.75); overflow: hidden; background: var(--surface-2); border-radius: 2px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .gp-tile.movable { cursor: grab; } .gp-open { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: inherit; } .gp-open:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; } .gp-media { position: absolute; inset: 0; overflow: hidden; } .gp-media img, .gp-ghost img, .gp-drawer-preview img { position: absolute; left: 0; top: 0; max-width: none; display: block; pointer-events: none; } .gp-noimg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; text-align: center; font-size: 11px; font-weight: 600; color: var(--text-3); border: 1px dashed var(--border-strong); border-radius: 2px; } .gp-chip { position: absolute; left: 4px; display: inline-flex; align-items: center; gap: 3px; max-width: calc(100% - 8px); padding: 2px 6px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.35; white-space: nowrap; background: rgba(16, 29, 58, 0.8); color: #fff; } .gp-chip .t { overflow: hidden; text-overflow: ellipsis; } .gp-status { top: 4px; max-width: calc(100% - 30px); } .gp-status.is-scheduled, .gp-status.is-approved { background: rgba(91, 39, 217, 0.92); } .gp-status.is-wait { background: rgba(154, 107, 0, 0.94); } .gp-status.is-problem { background: rgba(179, 34, 47, 0.94); } .gp-time { bottom: 4px; max-width: calc(100% - 40px); } .gp-time.moved { background: #C2185B; } .gp-fmt { position: absolute; top: 5px; right: 5px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65)); } .gp-appr { position: absolute; top: 24px; right: 4px; width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; background: #0F8F5B; color: #fff; } .gp-lock { position: absolute; right: 4px; bottom: 4px; width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; background: rgba(16, 29, 58, 0.8); color: #fff; } .gp-grip { position: absolute; right: 3px; bottom: 3px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; display: grid; place-items: center; background: rgba(16, 29, 58, 0.78); color: #fff; cursor: grab; touch-action: none; } .gp-grip:focus-visible { outline: 2px solid #fff; box-shadow: var(--focus-ring); } .gp-grip[aria-pressed="true"] { background: #C2185B; } .gp-tile.changed::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px #FF4F8B; pointer-events: none; } .gp-tile.picked { outline: 3px solid var(--primary); outline-offset: -3px; z-index: 1; } .gp-tile.lifted { opacity: 0.35; outline: 2px dashed var(--primary); outline-offset: -2px; } .gp-grid.is-dragging .gp-tile.movable { cursor: grabbing; } .gp-ghost { position: fixed; left: 0; top: 0; z-index: 200; overflow: hidden; border-radius: 6px; pointer-events: none; opacity: 0.92; background: var(--surface-2); box-shadow: var(--shadow-lg); } body.gp-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; } .gp-colours { display: flex; flex-wrap: wrap; gap: 3px; max-width: 640px; margin: 4px 0; } .gp-swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface-2); } .gp-swatch.wait { opacity: 0.5; } .gp-swatch.na { background: repeating-linear-gradient(45deg, var(--viz-unavailable) 0 3px, transparent 3px 6px); border-color: var(--viz-axis); } .gp-colours-note { margin: 0 0 10px; } .gp-legend, .gp-notes, .gp-savebar { max-width: 640px; } .gp-savebar .gp-undo { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6); } .gp-savebar .gp-undo:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .gp-notes { margin: 8px 0 0; padding-left: 18px; } .gp-review-head { margin: 0 0 10px; } .gp-changes { list-style: none; margin: 0 0 10px; padding: 0; } .gp-changes li { padding: 8px 0; border-top: 1px solid var(--line); display: grid; gap: 2px; } .gp-warn { color: var(--warning-text); display: flex; align-items: center; gap: 4px; } .gp-drawer-preview { position: relative; width: 180px; max-width: 100%; aspect-ratio: var(--gp-ratio, 0.75); overflow: hidden; border-radius: 8px; background: var(--surface-2); } @media (max-width: 1024px) { .gp-savebar { bottom: calc(var(--bottom-nav-h) + 12px); } } @media (max-width: 560px) { .gp-toolbar .gp-sel { min-width: 0; flex: 1 1 140px; } .gp-grid { gap: 2px; } .gp-chip { font-size: 10px; padding: 1px 5px; left: 3px; } .gp-status { top: 3px; } .gp-time { bottom: 3px; } .gp-grip { width: 28px; height: 28px; right: 2px; bottom: 2px; } .gp-savebar { flex-wrap: wrap; } } @media (max-width: 400px) { .gp-status .t, .gp-time .icon { display: none; } .gp-status { padding: 2px 4px; } .gp-time { max-width: calc(100% - 22px); } .gp-grip { top: 2px; bottom: auto; width: 26px; height: 26px; } .gp-lock { top: 3px; bottom: auto; } .gp-fmt { top: auto; bottom: 5px; right: 4px; } .gp-appr { top: 32px; } } /* ── end Grid planner ── */ /* ── Reply rules ── smart reply rules, suggestions only (pages/reply-rules.js; the suggested-reply card in pages/inbox.js and pages/reviews.js). Tokens only (no theme-specific rules), so light and dark follow the shared palette. Phone first: everything wraps at 320px. */ .rr-page { min-width: 0; } .rr-status { display: grid; gap: 8px; margin-bottom: 14px; } .rr-status-main { display: flex; gap: 8px; align-items: flex-start; color: var(--text); } .rr-status-main .icon { flex: none; margin-top: 2px; color: var(--purple-text); } .rr-status-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; min-width: 0; } .rr-status-facts > span { min-width: 0; overflow-wrap: anywhere; } .rr-ai-note { color: var(--warning-text); } .rr-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; } .rr-filters .segmented { max-width: 100%; overflow-x: auto; } .rr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .rr-rule { padding: 14px 16px; display: grid; gap: 10px; min-width: 0; } .rr-rule.off { opacity: 0.72; } .rr-rule.focus { box-shadow: 0 0 0 2px var(--purple); } .rr-rule-head { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; } .rr-rule-title { min-width: 0; flex: 1 1 200px; } .rr-rule-title h3 { margin: 0 0 4px; font-size: 16px; letter-spacing: -0.01em; overflow-wrap: anywhere; } .rr-rule-tags, .rr-tags { display: flex; flex-wrap: wrap; gap: 4px; } .rr-tags { margin: 6px 0 0; } .inbox-convo > .rr-tags { margin: 0; padding: 0 18px 10px; } .rr-pos { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--lav); color: var(--purple-text); font-weight: 800; font-size: 13px; } .rr-sentence { margin: 0; font-size: 14px; color: var(--text); line-height: 1.5; overflow-wrap: anywhere; } .rr-sentence .k { display: inline-block; min-width: 42px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); } .rr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 6px; margin: 0; } .rr-stats > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; min-width: 0; } .rr-stats dt { font-size: 11px; font-weight: 700; color: var(--text-2); } .rr-stats dd { margin: 0; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); } .rr-rule-foot { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; } .rr-actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } /* editor */ .rr-step { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); margin-top: 14px; } .rr-step-k { width: 64px; flex: none; padding-top: 4px; } .rr-step-body { display: grid; gap: 12px; min-width: 0; } .rr-chips { display: flex; flex-wrap: wrap; gap: 6px; } .rr-chip { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 700; font-size: 13px; } .rr-chip.sm { height: 28px; padding: 0 10px; font-size: 12px; } .rr-chip.on { background: var(--lav); border-color: var(--purple); color: var(--purple-text); } .rr-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); } .rr-kw { display: grid; gap: 8px; } .rr-hours { display: grid; gap: 8px; margin-top: 8px; } .rr-hours-times { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .rr-snippet-preview { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px dashed var(--line); color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; } .rr-foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; width: 100%; } .rr-flags { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); margin-top: 14px; } .rr-guard { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 8px 10px; border-radius: 10px; background: var(--success-bg); color: var(--success-text); } .rr-guard .icon { flex: none; margin-top: 1px; } /* test result */ .rr-test { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); min-width: 0; } .rr-test-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; } .rr-test-n { display: grid; gap: 2px; } .rr-test-n strong { font-size: 18px; letter-spacing: -0.02em; } .rr-test-head .segmented { max-width: 100%; overflow-x: auto; } .rr-test-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 420px; overflow-y: auto; } .rr-test-list li { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); display: grid; gap: 4px; min-width: 0; } .rr-test-list li.hit { border-color: var(--success); } .rr-test-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; } .rr-test-top .truncate { max-width: 160px; } .rr-test-text { font-size: 13px; color: var(--text); overflow-wrap: anywhere; } .rr-checks { display: flex; flex-wrap: wrap; gap: 4px; } .rr-check { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; max-width: 100%; overflow-wrap: anywhere; } .rr-check.ok { background: var(--success-bg); color: var(--success-text); } .rr-check.no { background: var(--surface-2); color: var(--text-2); } /* suggested reply card (inbox reply box + review card) */ .rr-sug { display: grid; gap: 6px; margin: 0 0 10px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--purple); background: var(--lav); min-width: 0; } .rr-sug-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .rr-sug-by { overflow-wrap: anywhere; min-width: 0; } .rr-sug-by a { color: var(--purple-text); font-weight: 700; } .rr-sug-note, .rr-sug-fine { margin: 0; } .rr-sug-actions { display: flex; flex-wrap: wrap; gap: 6px; } .dm-reply .rr-sug { margin: 10px 0 0; } @media (max-width: 640px) { .rr-step { flex-direction: column; gap: 6px; } .rr-step-k { width: auto; } .rr-rule { padding: 12px; } .rr-hours-times { grid-template-columns: 1fr; } .rr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rr-sug-actions .btn, .rr-foot .btn { flex: 1 1 auto; justify-content: center; } } /* ── end Reply rules ── */ /* ── Referrals (pages/referrals.js): #/referrals "Refer an agency", Settings → System card, sign-up "Invited by" note. * Tokens only (dark mode follows them); phone first: one column, the link wraps instead of scrolling the page. * The QR tile stays white on purpose in dark mode: scanners need dark modules on a light background. ── */ .rf-page { display: grid; gap: 16px; min-width: 0; } .rf-page > * { min-width: 0; } .rf-top { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } .rf-side { display: grid; gap: 16px; align-content: start; min-width: 0; } .rf-link { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .rf-url { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; word-break: break-all; font-family: var(--mono); font-size: 14px; font-weight: 600; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); color: var(--text); } .rf-share-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; } .rf-share { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-top: 14px; } .rf-qr { justify-self: center; width: 168px; max-width: 100%; padding: 8px; border-radius: var(--r-md); background: #FFFFFF; border: 1px solid var(--border); line-height: 0; } .rf-qr svg { width: 100%; height: auto; display: block; } .rf-share-text { min-width: 0; } .rf-quote { margin: 6px 0 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); color: var(--text); font-size: 14px; overflow-wrap: anywhere; } .rf-stats { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); } .rf-stats .stat-tile .value { overflow-wrap: anywhere; } .rf-how { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; color: var(--text); } .rf-invite { display: grid; gap: 10px; } .rf-results, .rf-list, .rf-admin-list, .rf-flags, .rf-admin-credits { list-style: none; margin: 0; padding: 0; } .rf-results { display: grid; gap: 6px; margin-top: 12px; } .rf-results li { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 14px; } .rf-email { font-weight: 700; overflow-wrap: anywhere; min-width: 0; } .rf-list, .rf-admin-list { display: grid; gap: 0; } .rf-item, .rf-admin-item { padding: 14px 0; border-top: 1px solid var(--border); min-width: 0; } .rf-item:first-child, .rf-admin-item:first-child { border-top: 0; padding-top: 4px; } .rf-item-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; } .rf-name { font-size: 15px; overflow-wrap: anywhere; min-width: 0; } .rf-when { margin-left: auto; } .rf-steps { list-style: none; margin: 10px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; } .rf-steps li { display: grid; justify-items: center; gap: 4px; position: relative; text-align: center; min-width: 0; } .rf-steps li + li::before { content: ""; position: absolute; top: 9px; right: calc(50% + 12px); width: calc(100% - 20px); height: 2px; background: var(--border); } .rf-steps li.done + li.done::before { background: var(--success); } .rf-dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--border-strong); background: var(--surface); color: var(--surface); position: relative; z-index: 1; } .rf-steps li.done .rf-dot { background: var(--success); border-color: var(--success); color: var(--primary-contrast); } .rf-step-label { font-size: 11px; font-weight: 700; color: var(--text-3); overflow-wrap: anywhere; } .rf-steps li.done .rf-step-label { color: var(--text-2); } .rf-note { margin: 4px 0 0; color: var(--text-2); } .rf-credit { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .rf-invited { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: var(--r-md); background: var(--purple-bg); color: var(--purple-text); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; } .rf-invited > svg { flex: none; } .rf-admin-summary { margin: 12px 0; } .rf-flags { display: grid; gap: 4px; margin: 8px 0 0; } .rf-flags li { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--warning-text); } .rf-flags li > svg { flex: none; margin-top: 2px; } .rf-admin-credits { display: grid; gap: 4px; margin: 8px 0 0; } .rf-admin-credits li { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 13px; min-width: 0; } .rf-admin-credits .muted { font-family: var(--mono); overflow-wrap: anywhere; } .rf-error { color: var(--danger-text); overflow-wrap: anywhere; flex-basis: 100%; } .rf-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } @media (min-width: 640px) { .rf-share { grid-template-columns: 168px minmax(0, 1fr); align-items: start; } .rf-qr { justify-self: start; } .rf-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { .rf-top { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } .rf-stats { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 380px) { .rf-step-label { font-size: 10px; } .rf-when { margin-left: 0; flex-basis: 100%; } } /* ── end Referrals ── */ /* ── Health alerts ── */ /* pages/health-alerts.js: app banner, System health card, dashboard Health card, alert preference. * Tokens only, so light, dark and "follow the device" stay in step; phone first (wraps, no fixed widths). */ .health-ribbon { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--warning-bg); color: var(--warning-text); font-size: 14px; } .health-ribbon.is-danger { background: var(--danger-bg); color: var(--danger-text); } .health-ribbon > .icon { flex: none; margin-top: 2px; } .health-ribbon-text { flex: 1 1 220px; min-width: 0; color: var(--text); overflow-wrap: anywhere; } .health-ribbon-fix { margin-top: 4px; } .health-ribbon-fix summary, .health-fix-details summary { cursor: pointer; font-weight: 700; color: var(--primary); } .health-ribbon-fix p, .health-fix-details p { margin: 4px 0 0; font-size: 13px; color: var(--text-2); } .health-ribbon-more { display: block; margin-top: 2px; font-size: 12px; color: var(--text-2); font-weight: 700; } .health-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .health-row { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); min-width: 0; } .health-row[data-status="problem"] { background: var(--surface-2); } .health-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .health-row-label { flex: 1 1 auto; min-width: 0; } .health-when { color: var(--text-3); font-size: 12px; font-weight: 600; } .health-summary { margin: 6px 0 0; font-size: 14px; color: var(--text); overflow-wrap: anywhere; } .health-facts { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; } .health-fix { margin-top: 8px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-3); font-size: 13px; color: var(--text); overflow-wrap: anywhere; } .health-fix-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); margin-bottom: 2px; } .health-meta { margin: 6px 0 0; font-size: 12px; color: var(--text-3); overflow-wrap: anywhere; } .health-foot { margin-top: 12px; } .health-card { margin-bottom: 14px; padding: 16px 20px; } .health-card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .health-card-head h3 { display: flex; align-items: center; gap: 6px; margin: 0; flex: 1 1 auto; } .health-chips { display: flex; flex-wrap: wrap; gap: 8px; } .health-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-weight: 800; font-size: 12px; background: var(--neutral-bg); color: var(--neutral-text); } .health-chip.is-success { background: var(--success-bg); color: var(--success-text); } .health-chip.is-warning { background: var(--warning-bg); color: var(--warning-text); } .health-chip.is-danger { background: var(--danger-bg); color: var(--danger-text); } .health-list.compact { margin-top: 12px; } .health-list.compact .health-row { display: grid; gap: 6px; justify-items: start; } .health-list.compact .health-summary { margin: 0; } .health-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; min-width: 0; max-width: 100%; } .health-items a { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--border-strong); overflow-wrap: anywhere; } .health-fix-details { font-size: 13px; max-width: 100%; } .health-ok-line { margin: 10px 0 0; font-size: 13px; color: var(--text-2); font-weight: 600; overflow-wrap: anywhere; } .health-modes { display: grid; gap: 8px; } .health-mode { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); cursor: pointer; } .health-mode.active { border-color: var(--primary); background: var(--primary-soft); } .health-mode input { margin-top: 3px; accent-color: var(--primary); flex: none; } .health-mode strong { display: block; } .health-mode-desc { display: block; font-size: 13px; color: var(--text-2); } @media (min-width: 760px) { .health-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ── end Health alerts ── */ /* ── Bulk planning ── */ /* pages/bulk-planning.js: #/bulk-plan. Phone first: the grid scrolls sideways inside .bp-grid-wrap (its own box), never the page; colours are tokens only, so dark mode (both switches) follows without extra rules. */ .bp { display: grid; gap: 16px; min-width: 0; } .bp > * { min-width: 0; } .bp-start { display: grid; gap: 14px; } .bp-paste { font-family: var(--mono); font-size: 12.5px; min-height: 150px; white-space: pre; overflow-x: auto; tab-size: 12; } .bp-start-options { display: grid; gap: 12px; grid-template-columns: 1fr; } .bp-help summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; padding: 14px 16px; list-style: none; } .bp-help summary::-webkit-details-marker { display: none; } .bp-help-list { margin: 0; padding: 0 16px 16px; display: grid; grid-template-columns: 1fr; gap: 2px 16px; font-size: 13px; } .bp-help-list dt { font-weight: 800; margin-top: 8px; } .bp-help-list dd { margin: 0; color: var(--text-2); } .bp-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .bp-history li { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--border); min-width: 0; } .bp-history li:first-child { border-top: 0; } .bp-history a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .bp-summary { display: grid; gap: 12px; } .bp-summary-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; } .bp-summary-head .grow { min-width: 0; flex: 1 1 200px; } .bp-file { overflow-wrap: anywhere; } .bp-counts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .bp-count { display: flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12px; background: var(--surface-2); color: var(--text-2); } .bp-count strong { font-size: 16px; font-variant-numeric: tabular-nums; } .bp-count.ok { background: var(--success-bg); color: var(--success-text); } .bp-count.warning { background: var(--warning-bg); color: var(--warning-text); } .bp-count.error { background: var(--danger-bg); color: var(--danger-text); } .bp-count.info { background: var(--info-bg); color: var(--info-text); } .bp-outcomes { display: flex; flex-wrap: wrap; gap: 6px; } .bp-alerts { display: grid; gap: 8px; margin-top: 12px; } .bp-alerts:empty { display: none; } .bp-progress-wrap { display: grid; gap: 6px; } .bp-progress { height: 10px; border-radius: 999px; background: var(--neutral-bg); overflow: hidden; } .bp-progress .bar { display: block; height: 100%; background: var(--primary); border-radius: 999px; transition: width .4s ease; } .bp-toolbar { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 12px 14px; align-items: center; } .bp-tool { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; } .bp-tool-label { font-size: 12px; font-weight: 700; color: var(--text-2); flex-basis: 100%; } .bp-tool-select { min-width: 150px; flex: 1 1 150px; } .bp-shift { width: 72px; } .bp-unit { width: 112px; } .bp-grid-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .bp-grid-head .segmented { max-width: 100%; overflow-x: auto; } .bp-saving { min-height: 1em; } .bp-grid-wrap { max-width: 100%; max-height: 72vh; overflow: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); } .bp-grid-wrap:focus-visible { outline: none; box-shadow: var(--focus-ring); } .bp-grid { border-collapse: separate; border-spacing: 0; font-size: 13px; width: max-content; min-width: 100%; } .bp-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 800; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; } .bp-grid td, .bp-grid tbody th { vertical-align: top; border-bottom: 1px solid var(--border); padding: 4px; background: var(--surface); } .bp-grid td + td { border-left: 1px solid var(--border); } .bp-sticky { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--border); } .bp-grid thead .bp-sticky { z-index: 3; } .bp-rowhead { width: 112px; min-width: 112px; max-width: 112px; text-align: left; font-weight: 600; } .bp-grid tbody .bp-rowhead { display: table-cell; padding: 6px 8px; } .bp-grid tbody .bp-rowhead > * + * { margin-top: 4px; } .bp-rowhead-in { display: flex; align-items: center; gap: 6px; } .bp-rowno { font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 800; } .bp-check { display: inline-flex; align-items: center; } .bp-check input { width: 16px; height: 16px; accent-color: var(--primary); } .bp-skip { display: block; border: 0; background: none; padding: 0; color: var(--primary); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .bp-skip:hover { text-decoration: underline; } .bp-open { display: block; font-weight: 700; } .bp-msgs { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; font-size: 11.5px; font-weight: 600; white-space: normal; } .bp-msgs li.error { color: var(--danger-text); } .bp-msgs li.warning { color: var(--warning-text); } .bp-msgs li.info { color: var(--text-2); } .bp-input { display: block; width: 100%; min-width: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 13px; padding: 6px 8px; line-height: 1.35; } .bp-input::placeholder { color: transparent; } .bp-input:focus::placeholder { color: var(--text-3); } .bp-input:hover { border-color: var(--border); } .bp-input:focus { outline: none; border-color: var(--primary); background: var(--surface-raised); box-shadow: var(--focus-ring); } textarea.bp-input { resize: vertical; min-height: 52px; } .bp-ro { padding: 6px 8px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); } .bp-cell.lv-error .bp-input, .bp-cell.lv-error .bp-ro { border-color: var(--danger); background: var(--danger-bg); } .bp-cell.lv-warning .bp-input, .bp-cell.lv-warning .bp-ro { border-color: var(--warning); } .bp-note { display: flex; gap: 4px; align-items: flex-start; padding: 2px 8px 4px; font-size: 11.5px; font-weight: 600; color: var(--text-2); white-space: normal; overflow-wrap: anywhere; } .bp-note > svg { flex: none; margin-top: 2px; } .bp-note > span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .bp-note.error { color: var(--danger-text); } .bp-note.warning { color: var(--warning-text); } .bp-grid tr.skipped td { opacity: .55; } .bp-grid tr.skipped .bp-input { text-decoration: line-through; } .bp-empty { padding: 18px; text-align: center; } .bp-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .bp-footer .grow { flex: 1 1 220px; min-width: 0; } @media (min-width: 760px) { .bp-start-options { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bp-help-list { grid-template-columns: max-content 1fr; } .bp-help-list dt { margin-top: 0; } .bp-rowhead { width: 132px; min-width: 132px; max-width: 132px; } .bp-tool-label { flex-basis: auto; } } @media (max-width: 560px) { .bp-footer > .btn { flex: 1 1 100%; justify-content: center; } .bp-grid-wrap { max-height: 64vh; } } /* ── end Bulk planning ── */ /* ── Lifecycle e-mails ── */ /* Plan-limit ribbon on every page (pages/lifecycle.js PlanLimitBanner), Settings → E-mails from Woo and the Settings → System previews. Tokens only, so light, dark and device-dark all follow the theme. Phone first. */ .lc-ribbon { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; padding: 10px 12px 10px 14px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--info-bg); color: var(--info-text); font-size: 13px; line-height: 1.45; min-width: 0; } .lc-ribbon.is-reached { background: var(--warning-bg); color: var(--warning-text); } .lc-ribbon-icon { flex: none; margin-top: 2px; } .lc-ribbon-text { flex: 1; min-width: 0; color: var(--text); overflow-wrap: anywhere; } .lc-ribbon-text strong { font-weight: 800; } .lc-ribbon-more { color: var(--text-2); } .lc-ribbon-cta { flex: none; align-self: center; font-weight: 800; color: inherit; text-decoration: underline; white-space: nowrap; } .lc-ribbon-x { flex: none; margin: -4px -4px -4px 0; } @media (max-width: 560px) { .lc-ribbon { flex-wrap: wrap; } .lc-ribbon-text { flex-basis: calc(100% - 70px); } .lc-ribbon-cta { order: 3; flex-basis: 100%; padding-left: 26px; } } .lc-tab { display: grid; gap: 16px; } .lc-kinds { display: grid; gap: 16px; } .lc-locked { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); } .lc-locked > svg { flex: none; margin-top: 2px; color: var(--text-2); } .lc-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .lc-recent li { display: flex; align-items: center; gap: 10px; min-width: 0; } .lc-recent li .grow { min-width: 0; overflow-wrap: anywhere; } .lc-preview-grid { display: grid; gap: 14px; grid-template-columns: 1fr; min-width: 0; margin-top: 12px; } .lc-preview-list { display: grid; gap: 14px; align-content: start; min-width: 0; } .lc-preview-group { display: grid; gap: 6px; } .lc-preview-item { display: grid; gap: 2px; text-align: left; width: 100%; padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; } .lc-preview-item:hover { border-color: var(--primary); } .lc-preview-item.active { border-color: var(--primary); background: var(--purple-bg); } .lc-preview-pane { min-width: 0; display: grid; gap: 10px; align-content: start; } .lc-preview-empty { padding: 24px 12px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r-md); } .lc-preview-head { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; min-width: 0; } .lc-preview-head .grow { min-width: 0; overflow-wrap: anywhere; } .lc-frame-wrap { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); margin: 0 auto; width: 100%; } .lc-frame-wrap.w-phone { max-width: 390px; } .lc-frame { display: block; width: 100%; height: 640px; border: 0; background: #F5F6FA; } @media (min-width: 900px) { .lc-preview-grid { grid-template-columns: minmax(220px, 300px) 1fr; } .lc-frame { height: 760px; } } /* ── end Lifecycle e-mails ── */ /* ── Platform approval kit ── */ /* Settings → System → Platform review (pages/platform-review.js) */ .pak { display: grid; gap: 14px; min-width: 0; } .pak-group { display: grid; gap: 8px; min-width: 0; } .pak-h { margin: 0; font-size: 15px; font-weight: 800; color: var(--text); } .pak-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; } .pak-item { display: grid; gap: 4px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .pak-item[data-status="missing"] { border-color: var(--danger-text); } .pak-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; } .pak-item-head > strong, .pak-item-head > code { min-width: 0; overflow-wrap: anywhere; } .pak-value { display: flex; align-items: flex-start; gap: 6px; min-width: 0; } .pak-value > code, .pak-value > span, .pak-value > a { flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: break-word; } .pak-value > code { font-family: var(--mono); font-size: 12.5px; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); } .pak-why > span { font-size: 13.5px; color: var(--text); } .pak-where { font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; } .pak-hint { font-size: 12.5px; color: var(--warning-text); background: var(--warning-bg); border-radius: 8px; padding: 6px 8px; overflow-wrap: anywhere; } .pak-item[data-status="done"] .pak-hint, .pak-item[data-status="optional"] .pak-hint { color: var(--text-2); background: var(--surface-2); } .pak-item[data-status="missing"] .pak-hint { color: var(--danger-text); background: var(--danger-bg); } .pak-scope-name { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--text); } .pak-scopes-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .pak-platform { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); min-width: 0; } .pak-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 800; color: var(--text); } .pak-summary::-webkit-details-marker { display: none; } .pak-summary::before { content: '▸'; color: var(--text-3); transition: transform .15s; } .pak-platform[open] > .pak-summary::before { transform: rotate(90deg); } .pak-summary-name { flex: 1 1 160px; min-width: 0; } .pak-summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-lg); } .pak-body { display: grid; gap: 10px; padding: 0 12px 12px; min-width: 0; } .pak-console { margin: 0; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; } .pak-console code { font-family: var(--mono); font-size: 12px; } /* Public /data-deletion pages (resources/views/platform/data-deletion.php) */ .pak-page { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); } .pak-wrap { box-sizing: border-box; width: 100%; max-width: 640px; margin: 0 auto; padding: 24px 16px 40px; display: grid; gap: 16px; } .pak-head img { width: 150px; height: auto; display: block; box-sizing: content-box; padding: 6px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); } /* the logo has a white background: show it as a tile in both themes */ .pak-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px 20px; display: grid; gap: 12px; min-width: 0; overflow-wrap: anywhere; } .pak-card h1 { margin: 0; font-size: 24px; line-height: 1.2; color: var(--text); } .pak-card h2 { margin: 8px 0 0; font-size: 17px; color: var(--text); } .pak-card p, .pak-card li { margin: 0; color: var(--text); font-size: 15px; line-height: 1.55; } .pak-card a { color: var(--primary); } .pak-card .btn { color: var(--primary-contrast); } .pak-card .btn-secondary { color: var(--text); } .pak-card p.pak-eyebrow { font-size: 13px; font-weight: 800; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; } .pak-card p.pak-muted { color: var(--text-2); font-size: 14px; } .pak-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; } .pak-steps { list-style: none; margin: 4px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .pak-card li.pak-step { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 13px; font-weight: 700; color: var(--text-2); } .pak-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--surface-2); border: 2px solid var(--line); color: var(--text-2); } .pak-step.is-done .pak-dot { background: var(--success-bg); border-color: var(--success-text); color: var(--success-text); } .pak-card li.pak-step.is-done, .pak-card li.pak-step.is-current { color: var(--text); } .pak-step.is-current .pak-dot { border-color: var(--primary); color: var(--primary); } .pak-facts { margin: 0; display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: var(--surface-2); } .pak-facts > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; } .pak-facts dt { font-weight: 700; color: var(--text-2); font-size: 14px; } .pak-facts dd { margin: 0; color: var(--text); font-size: 14px; } .pak-facts code { font-family: var(--mono); font-size: 14px; word-break: break-all; } .pak-form { display: grid; gap: 6px; } .pak-form label { font-weight: 700; font-size: 14px; } .pak-form-row { display: flex; gap: 8px; min-width: 0; } .pak-form-row input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; } .pak-form-row .btn { height: 44px; } .pak-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; font-size: 14px; } .pak-foot a { color: var(--text-2); } /* ── end Platform approval kit ── */ /* ── Bulk bars: ghost buttons follow the bar's own colours (the newer .btn-ghost made them white on white) ── */ .bulk-bar .btn-ghost { background: transparent; color: inherit; border-color: currentColor; } .bulk-bar .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); } /* ── Card headers on phones: actions drop under the title instead of pushing the card wider than the screen ── */ @media (max-width: 480px) { .card-head { flex-wrap: wrap; } } /* ── I2 navigation: collapsible sidebar sections, pinned favourites, grouped Settings tabs with "Find a setting" ── * Structure and names: public/assets/app/ui/nav-layout.js (docs/naming.md). Colours are tokens only, so light and dark * follow the theme without extra rules. */ .sidebar-nav .nav-row { position: relative; display: block; } .sidebar-nav .nav-row.sec-hidden { display: none; } .nav-section-btn { display: flex; align-items: center; gap: 6px; width: 100%; margin: 0; background: transparent; border: 0; border-radius: 8px; font-family: inherit; text-align: left; cursor: pointer; } .nav-section-btn:hover { color: var(--text-2); } .nav-section-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } .nav-section-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .nav-section-chev { opacity: 0; transition: transform var(--dur), opacity var(--dur); } .nav-section-btn:hover .nav-section-chev, .nav-section-btn:focus-visible .nav-section-chev, .nav-section-btn.is-collapsed .nav-section-chev { opacity: 1; } .nav-section-btn.is-collapsed .nav-section-chev { transform: rotate(-90deg); } .nav-section-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); flex: none; } .nav-pin { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-3); cursor: pointer; opacity: 0; transition: opacity var(--dur), background var(--dur), color var(--dur); } .nav-row:hover .nav-pin, .nav-row:focus-within .nav-pin { opacity: 1; } .nav-pin:hover { background: var(--surface); color: var(--primary); } .nav-pin:focus-visible { outline: 2px solid var(--primary); outline-offset: 0; opacity: 1; } .nav-pin.on { color: var(--primary); } .nav-pin.on .icon { fill: currentColor; } .nav-item.active + .nav-pin { color: var(--purple-text); } .nav-row:hover .nav-item, .nav-row:focus-within .nav-item { padding-right: 40px; } /* room for the pin; the count badge moves left */ .app-shell.sb-navy .sidebar .nav-section-btn:hover, .app-shell.sb-brand .sidebar .nav-section-btn:hover { color: #fff; } .app-shell.sb-navy .nav-pin, .app-shell.sb-brand .nav-pin { color: rgba(255, 255, 255, 0.6); } .app-shell.sb-navy .nav-pin:hover, .app-shell.sb-brand .nav-pin:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } @media (hover: none) { .nav-section-chev { opacity: 0.8; } .nav-pin { opacity: 0.5; } .nav-pin.on { opacity: 1; } .sidebar-nav.can-pin .nav-row .nav-item { padding-right: 40px; } } @media (min-width: 1025px) { /* icon-only sidebar: no headings to expand, so show every item and hide the pins */ .collapsed .sidebar-nav .nav-row.sec-hidden { display: block; } .collapsed .nav-pin { display: none; } .collapsed .sidebar-nav .nav-row .nav-item { padding-right: 10px; } } .settings-nav { position: sticky; top: calc(var(--topbar-h) + 16px); max-height: calc(100vh - var(--topbar-h) - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-bottom: 8px; } .settings-nav .vnav { position: static; } .settings-nav-toggle { display: none; } .vnav-group { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); padding: 12px 12px 4px; } .vnav-group:first-child { padding-top: 2px; } .vnav-empty { margin: 0; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--text-2); } .settings-nav .vnav .nav-item { text-align: left; width: 100%; } /* buttons centre their text by default */ .search-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* one line, even next to a wide org name */ @media (max-width: 860px) { .settings-nav { position: static; max-height: none; overflow: visible; padding-bottom: 0; } .settings-nav .vnav { flex-direction: column; overflow: visible; } .settings-nav-toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); font-family: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; } .settings-nav-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .settings-nav-all { flex: none; font-size: 12px; font-weight: 700; color: var(--text-3); } .settings-nav-chev { transition: transform var(--dur); } .settings-nav.open .settings-nav-chev { transform: rotate(180deg); } .settings-nav:not(.open) .settings-nav-body { display: none; } .settings-nav-body { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); } .settings-layout > .settings-nav + div { min-width: 0; } /* a wide tab can no longer widen the column and push the section button off-screen */ } /* Settings → System on a 320 px phone: the Referrals card header (title + "Retry pending credits") wraps instead of widening the tab by 14 px. */ @media (max-width: 640px) { .card:has(> .card-body .rf-admin-summary) > .card-head { flex-wrap: wrap; row-gap: 8px; } } /* ── end I2 navigation ── */ /* ── I5 first run (pages/first-run.js, onboarding wizard, composer without accounts, connect dialog) ── * Tokens only, so light and dark both follow the theme without extra dark-mode rules. */ .dash-blocks { display: flex; flex-direction: column; } .dash-blocks > .ob-host { order: -1; } /* the setup card leads the dashboard while setup is unfinished */ .fr-networks { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); min-width: 0; } .fr-networks-card { padding: 16px 18px; background: var(--surface); } .fr-net-head { display: flex; align-items: flex-start; gap: 10px; min-width: 0; } .fr-net-head > .icon, .fr-net-head > svg { flex: none; margin-top: 2px; color: var(--text-2); } .fr-net-head .grow { min-width: 0; } .fr-net-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .fr-net-list li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding-top: 8px; border-top: 1px solid var(--line); } .fr-net-list li .grow { min-width: 0; } .fr-net-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 700; } .fr-noacc { display: grid; gap: 4px; min-width: 0; } .fr-noacc-head { display: flex; align-items: flex-start; gap: 12px; min-width: 0; } .fr-noacc-head h4 { margin: 2px 0 4px; font-size: 16px; } .fr-noacc-head p { margin: 0; line-height: 1.5; } .fr-compose-actions .fr-compose-why { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; } .fr-own-brand { display: inline-block; margin-top: 6px; text-align: left; } .fr-card-note { line-height: 1.45; } .fr-rail-na { font-weight: 700; white-space: nowrap; } /* Settings → Team on a phone: the members table pushed the card (and its "Invite member" button) off-screen, which * blocked inviting a teammate. Let the single settings column shrink; the table scrolls inside its own wrapper. */ .settings-layout > div:has(> .team-card) { min-width: 0; } @media (max-width: 640px) { .fr-compose-actions { gap: 10px; } .fr-compose-actions .fr-compose-why { flex-basis: 100%; } .fr-compose-actions .btn { flex: 1 1 auto; justify-content: center; } .fr-noacc-head .mascot, .fr-noacc-head > :first-child { flex: none; } } /* ── end I5 first run ── */